/* ==========================================================================
   ECN, one stylesheet for all three markets.
   --------------------------------------------------------------------------
   Linked from the English, French and German pages alike at /assets/style.css.
   That leading slash matters: a relative path would resolve inside /fr/ or
   /de/ and fail. Nothing in here carries copy, which is why one file serves
   three sites: 890 of the 908 class names are identical across them.
   ========================================================================== */

/* Document-level defaults the mocks carry in their own head. color-scheme in
   particular is what makes the browser draw form controls and default button
   text for a dark page. */
html{color-scheme:dark}
img{max-width:100%}
[hidden]{display:none!important}

/* ===================== ECN DESIGN SYSTEM ===================== */

/* ==========================================================================
   ECN HOMEPAGE CONCEPT
   All seven changes applied. Brand palette unchanged.
   Single committed dark theme, painted explicitly.
   ========================================================================== */
:root{
  --navy:#051E33;
  --surface:#082A46;
  --surface-lift:#0B3A5F;
  --blue:#399FD9;
  --blue-soft:#8CD2F5;
  --yellow:#F4E504;
  --white:#EAF1F8;
  --body:#C2D6E6;
  --quiet:#7D9BB5;
  --line:rgba(57,159,217,0.16);
  --line-2:rgba(57,159,217,0.30);
  --live:#2EE08C;

  --r-btn:4px;
  --r-panel:12px;

  --pad-x:clamp(20px,5vw,64px);
  --pad-y:clamp(56px,7vw,88px);
  --max:1360px;
}

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

body{
  margin:0;
  background:var(--navy);
  color:var(--body);
  font-family:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:'Barlow Condensed','Barlow',sans-serif;
  color:var(--white);
  margin:0;
  text-wrap:balance;
}

a{text-decoration:none}

.inner{max-width:var(--max);margin:0 auto;padding-inline:var(--pad-x)}

/* ---------- concept strip ---------- */
.concept-bar{
  background:#02121F;
  border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--quiet);
  padding:9px var(--pad-x);
  text-align:center;
}
.concept-bar b{color:var(--yellow);font-weight:600}

/* ---------- nav ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:66px;
  padding-inline:clamp(18px,3vw,40px);
  background:rgba(5,30,51,0.94);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.nav-left{display:flex;align-items:center;gap:26px;min-width:0}
.logo{display:block;flex:none;line-height:0}
.logo img{height:32px;width:auto;display:block}
footer .logo img{height:36px}
.nav-live{
  display:flex;align-items:center;gap:7px;flex:none;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:0.1em;color:var(--quiet);
}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--live);flex:none}
@media(prefers-reduced-motion:no-preference){
  .pulse{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(46,224,140,.55)}50%{box-shadow:0 0 0 5px rgba(46,224,140,0)}}
}
.nav-links{display:flex;gap:2px;list-style:none;margin:0;padding:0;min-width:0}
.nav-links a{
  display:block;padding:6px 10px;border-radius:var(--r-btn);
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--body);white-space:nowrap;
  transition:color .18s,background .18s;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--white);background:rgba(57,159,217,.09)}
.nav-links a.on{color:var(--white);background:rgba(57,159,217,.13)}
.nav-right{display:flex;align-items:center;gap:14px;flex:none}
.lang{display:flex;gap:2px}
.lang button{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:0.1em;background:none;border:none;cursor:pointer;
  color:var(--quiet);padding:5px 8px;border-radius:3px;
}
.lang button.on{color:var(--navy);background:var(--blue-soft)}
.nav-cta{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:9px 22px;border-radius:var(--r-btn);
  background:var(--yellow);color:var(--navy);
}
.burger{display:none;background:none;border:1px solid var(--line-2);border-radius:var(--r-btn);
  width:40px;height:36px;cursor:pointer;padding:0;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--white)}
.burger span:nth-child(1){top:12px}.burger span:nth-child(2){top:17px}.burger span:nth-child(3){top:22px}
.drawer{display:none;border-bottom:1px solid var(--line);background:#041828;padding:10px var(--pad-x) 20px}
.drawer.open{display:block}
.drawer a{display:block;padding:11px 0;border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--body)}

@media(max-width:1520px){.nav-live{display:none}}
@media(max-width:1560px){
  .nav-links a{padding:6px 8px;font-size:11px;letter-spacing:.04em}
  .nav-left{gap:18px}
  .nav-right{gap:10px}
}
@media(max-width:1200px){
  .nav-links,.lang{display:none}
  .burger{display:block}
}

/* ---------- eyebrow ---------- */
.eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--blue-soft);margin:0 0 26px;
}

/* ---------- 07 · hero on network photography ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:transparent}
.hero-bg{display:none}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;
  background-position:72% 46%;
}
.hero-bg::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(95deg,
    var(--navy) 0%,
    rgba(5,30,51,.98) 32%,
    rgba(5,30,51,.88) 46%,
    rgba(5,30,51,.34) 64%,
    rgba(5,30,51,.12) 100%);
}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(5,30,51,.55) 0%, transparent 22%, transparent 62%, var(--navy) 100%);
}
.hero .inner{position:relative;z-index:1;padding-block:clamp(56px,8vw,104px) clamp(48px,6vw,84px)}
.hero-copy{width:100%;max-width:620px}

.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--blue-soft);margin-bottom:24px;
}
.hero-badge i{width:6px;height:6px;border-radius:50%;background:var(--yellow);display:block}

/* 04 · headline reads in white, yellow is reserved for the action */
h1.hero-h{
  font-size:clamp(48px,7vw,104px);
  font-weight:800;text-transform:uppercase;
  line-height:0.92;letter-spacing:-0.02em;
  color:var(--white);
  margin-bottom:26px;
}
/* 04 · headline accent system, exactly as the live site sets it:
   opening phrase at 75% white, one key phrase in yellow, remainder full white */
.hero-h .o{color:rgba(255,255,255,.75)}
.hero-h .y{color:var(--yellow);text-shadow:0 0 80px rgba(244,229,4,.2)}
/* 01 · body copy at 18px in the hero, 16px everywhere else */
.hero-p{
  font-size:clamp(13px,1.69vw,16.5px);font-weight:300;
  color:var(--body);line-height:1.55;max-width:46ch;margin:0 0 32px;
}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  border-radius:var(--r-btn);display:inline-block;transition:.18s;
}
.btn-y{font-weight:700;padding:15px 30px;background:var(--yellow);color:var(--navy)}
.btn-y:hover{box-shadow:0 0 28px rgba(244,229,4,.32);transform:translateY(-1px)}
.btn-o{font-weight:600;padding:14px 30px;border:1px solid var(--line-2);color:var(--body)}
.btn-o:hover{border-color:var(--blue);color:var(--blue-soft)}

/* 04 · stats unboxed, one rule holds the group */
.hero-stats{margin-top:44px;padding-top:26px;border-top:1px solid var(--line-2);max-width:620px}
.hero-stats .eyebrow{margin-bottom:22px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat-v{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(32px,3.85vw,42px);font-weight:800;line-height:1;
  color:var(--yellow);font-variant-numeric:tabular-nums;margin-bottom:5px;
}
.stat-l{font-size:13px;color:var(--blue-soft);line-height:1.35}

@media(max-width:820px){
  .hero-bg{background-position:66% 42%}
  .hero-bg::before{background:linear-gradient(172deg,var(--navy) 0%,rgba(5,30,51,.97) 38%,rgba(5,30,51,.91) 100%)}
  .stat-row{grid-template-columns:repeat(2,1fr);gap:24px 20px}
}

/* ---------- ticker · keeps its monospace, it is a live readout ---------- */
.ticker{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;height:52px;display:flex;align-items:center;background:rgba(4,24,40,.62);
}
.ticker-track{display:flex;white-space:nowrap;animation:slide 52s linear infinite}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick{
  display:flex;align-items:center;gap:14px;padding:0 30px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  border-right:1px solid var(--line);color:var(--white);
}
.tick .c{color:var(--blue-soft)}
.tick .n{color:var(--white)}
.tick .l{color:var(--live);font-size:9.5px}

/* ---------- live sites strip ---------- */
.reel{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--surface);margin:0}
.frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.80) saturate(.94);
  transition:transform .6s cubic-bezier(.22,1,.36,1), filter .4s;
}
.frame:hover img{transform:scale(1.045);filter:brightness(1) saturate(1)}
@media(prefers-reduced-motion:reduce){.frame img{transition:none}.frame:hover img{transform:none}}
.frame figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 18px 16px;
  background:linear-gradient(0deg, rgba(4,18,30,.95) 0%, rgba(4,18,30,.72) 42%, transparent 100%);
}
.frame-brand{
  display:block;
  font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--white);line-height:1.1;
}
.frame-addr{
  display:block;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em;
  color:var(--yellow);text-transform:lowercase;margin-top:5px;
}
@media(max-width:820px){.reel{grid-template-columns:repeat(2,1fr)}}

/* ---------- 02 · proof figures, no boxes ---------- */
.proof{padding-block:var(--pad-y)}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
.proof-item{padding-top:26px;border-top:1px solid var(--line)}
.proof-n{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(65px,7.24vw,90px);font-weight:800;line-height:.9;
  color:var(--yellow);font-variant-numeric:tabular-nums;margin-bottom:14px;
}
.proof-n em{
  font-style:normal;display:block;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin-top:10px;
}
.proof-t{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:40ch}
.proof-t b{color:var(--white);font-weight:500}
@media(max-width:860px){.proof-grid{grid-template-columns:1fr;gap:0}.proof-item{margin-top:26px}.proof-item:first-child{margin-top:0}}

/* ---------- 03 · value columns, no cage ---------- */
.value{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.value .inner{padding-block:var(--pad-y)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
.value-item{padding-top:24px;border-top:1px solid var(--line)}
.value-item:first-child{border-top:2px solid var(--yellow)}
.value-item h3{font-size:26px;font-weight:700;text-transform:uppercase;margin-bottom:12px;line-height:1.05}
.value-item p{margin:0;font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:40ch}
@media(max-width:860px){
  .value-grid{grid-template-columns:1fr}
  .value-item{margin-top:26px}
  .value-item:first-child{margin-top:0}
}

/* ---------- 05 · programmatic, one container ---------- */
.prog{padding-block:var(--pad-y) clamp(36px,4.5vw,56px)}
.prog-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(36px,6vw,80px);align-items:center}
.prog h2{font-size:clamp(38px,5.65vw,69px);font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:-0.02em;margin-bottom:22px}
.prog h2 span{color:var(--yellow)}
.prog p{font-size:13px;font-weight:300;line-height:1.6;max-width:42ch;margin:0 0 30px}
.pipe{border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82)}
.pipe-row{display:grid;grid-template-columns:34px 1fr;gap:18px;align-items:baseline;padding:20px 24px;border-top:1px solid rgba(57,159,217,.12)}
.pipe-row:first-child{border-top:none}
.pipe-n{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--blue)}
.pipe-t{font-family:'Barlow Condensed',sans-serif;font-size:18.5px;font-weight:700;text-transform:uppercase;color:var(--white);line-height:1.1;margin-bottom:3px}
.pipe-d{font-size:13px;font-weight:300;line-height:1.45;color:var(--body)}
@media(max-width:860px){.prog-grid{grid-template-columns:1fr}}

/* ---------- 06 · CTA pair with hierarchy ---------- */
.cta{padding-block:clamp(40px,5vw,64px) var(--pad-y)}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{background:rgba(8,42,70,.82);border:1px solid var(--line);border-radius:var(--r-panel);padding:clamp(30px,4vw,48px)}
.card.lead{background:linear-gradient(158deg,rgba(11,58,95,.84) 0%,rgba(7,33,53,.84) 100%);border-color:var(--line-2)}
.card h2{font-size:clamp(34px,4.52vw,53px);font-weight:800;text-transform:uppercase;line-height:.98;margin-bottom:16px}
.card p{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:34ch;margin:0 0 30px}
@media(max-width:820px){.cta-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:rgba(4,24,40,.74)}
footer .inner{padding-block:40px 52px;display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-end}
.foot-copy{font-size:13px;color:var(--quiet);margin-top:14px;max-width:44ch}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 26px}
.foot-links a{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);
}
.foot-links a:hover{color:var(--blue-soft)}

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

/* ---- router ---- */
.page{display:none}
.page.active{display:block}
/* A safety net, not a layout rule. The marquees (.ticker-track, .clients-track)
   are deliberately many times wider than the viewport and their containers
   already clip them, but their animated transform still contributes a few
   pixels to the document's scrollable width at some viewport sizes, which is
   enough to let a phone drag sideways. overflow-x:clip contains that without
   creating a scroll container, so position:sticky on the nav is unaffected,
   which is why it is used here rather than overflow-x:hidden. */
.page{overflow-x:clip}

/* ---- Knowledge: the case-studies intro and the benchmark below it ----
   These two read as one idea, "real campaigns, real results" and then the
   benchmark they are measured against, but 215px of empty tint sat between
   them: the intro paragraph's own 38px bottom margin, then 88px of padding
   closing the intro block, then another 88px opening the benchmark block.
   Three separate spacings stacking up, none of them wrong on its own.

   The paragraph's trailing margin goes, and the two paddings either side of
   the seam come down to 28px each, so the gap reads as one break of 56px
   rather than a hole. Every other margin and padding on the page is left
   alone, and nothing moves on any other page.

   :has() is what lets the intro be recognised by what follows it. Where it
   is not supported the first two rules still apply and the gap is 117px
   instead of 215px, so the page degrades to better rather than to broken. */
#page-knowledge .sec-tint > .inner > *:last-child{margin-bottom:0}
#page-knowledge .sec.kn-bench{padding-top:28px}
#page-knowledge .sec-tint:has(+ .sec.kn-bench) > .inner{padding-bottom:28px}

/* ---- mobile and tablet menu ----
   The design system already carries .drawer and .drawer.open. What it never
   carried is the styling for what goes inside one, because the drawer markup
   lived in each mock's own nav and was lost when the mocks were assembled
   behind a single shared nav. These rules dress the drawer the shell now
   emits. Nothing here changes any desktop layout: every rule is scoped to
   .drawer, and the drawer itself is display:none until the burger opens it. */
/* The design system's z-index rules for .drawer are all page-scoped
   (#page-home .drawer, .knowledgepage .drawer and so on) because the drawer
   used to sit inside each page. This one is a sibling of the pages, so it
   matches none of them and would be painted underneath .page-bg, which is
   fixed at z-index 0. It sits just under the sticky nav (z-index 80). */
.drawer{position:relative;z-index:79}
/* The footer has exactly the same problem, and it is the one the eye sees.
   The design's own rule is #page-home footer, #page-advertise footer and so
   on, twenty-odd page-scoped copies of position:relative;z-index:1. The
   assembled site has one footer, a sibling of the pages rather than a child,
   so none of those selectors reach it and .page-bg, fixed at z-index 0, was
   painting straight over the copyright line and the legal links on every
   page that carries a background image. Same rule, unscoped. */
footer{position:relative;z-index:1}
.drawer a{display:block;padding:13px 2px;color:var(--white);text-decoration:none;
  font:600 15px/1.2 'Barlow Condensed',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;border-bottom:1px solid var(--line)}
.drawer a:last-child{border-bottom:0}
.drawer a.on{color:var(--yellow)}
.drawer-lang{display:flex;gap:6px;padding:16px 0 4px}
.drawer-lang button{flex:0 0 auto;min-width:52px;min-height:40px;cursor:pointer;
  background:none;border:1px solid var(--line-2);border-radius:var(--r-btn);
  color:var(--body);font:600 12px/1 'Barlow Condensed',sans-serif;letter-spacing:.12em}
.drawer-lang button.on{background:var(--blue);border-color:var(--blue);color:var(--navy)}
.drawer .nav-cta{display:block;margin-top:14px;padding:14px;text-align:center;
  background:var(--yellow);color:var(--navy);border-radius:var(--r-btn);border-bottom:0}
/* a drawer left open before the viewport grew must not sit under a nav that
   has its own links back. 1200px is the design's own breakpoint: it is where
   .nav-links and .lang come back and .burger goes away, so the drawer has to
   retire at exactly the same width or there is a band where the burger is
   showing and the drawer refuses to open. */
@media(min-width:1201px){.drawer,.drawer.open{display:none}}

/* ---- phone width: the faults an audit at 390px turned up ----
   The design's own responsive layer is thorough down to 768px and both
   tablet sizes come up clean. These are the things that only break on a
   phone, and every one of them is a containment fault rather than a design
   change: nothing is re-laid-out, re-ordered or re-worded, the content is
   simply stopped from running off the right edge. Scoped to 560px so no
   tablet or desktop rule is touched. */
@media(max-width:560px){
  /* German and French set far longer words than the English the display sizes
     were tuned on: AUFMERKSAMKEIT and PROGRAMMATISCHES are single unbreakable
     words. The type size is deliberately left exactly as the design draws it;
     these two properties do nothing at all unless a word genuinely will not
     fit, and then they wrap it rather than let it run off the page. */
  .hero-h{overflow-wrap:break-word;hyphens:auto}
  h1,h2,h3{overflow-wrap:break-word}

  /* A grid or flex child defaults to min-width:auto, which means it can never
     be narrower than its longest unbreakable word. German compounds such as
     Zielkunden-Targeting and Kampagnenmessung are longer than a phone's
     content width, so two German pages were pushed out to 442px. min-width:0
     lets the card shrink and the word wrap; it changes nothing at any width
     where the words already fit. */
  .card,.pcard,.mk-card,.cs-card,.result,.cap{min-width:0;overflow-wrap:break-word}
  .card *,.pcard *,.cs-card *{overflow-wrap:break-word}

  /* the network-at-a-glance row is a hard four-column grid at every width,
     so the fourth figure was cut in half on a phone */
  .stat-row{grid-template-columns:repeat(2,1fr);gap:18px 16px}

  /* the legal tables are wider than a phone on the live site too. A scroll
     container keeps the table intact and stops it dragging the page sideways */
  .legal-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    white-space:nowrap;font-size:12px}

  .dashboardpage img,.dashboardpage canvas,.dashboardpage svg{max-width:100%;height:auto}
  .dashboardpage .proof-card{max-width:100%}
}

/* The Planning Centre lays its charts and proof cards out in a two-column grid
   written as an inline style on the page's own wrapper, with 64px of side
   padding. Inline styles beat any stylesheet rule, which is the one reason
   !important appears anywhere in this build. It stops fitting at 620px rather
   than at the phone breakpoint, so it gets its own query. */
@media(max-width:640px){
  .dashboardpage > div[style*="grid-template-columns"]{
    grid-template-columns:1fr!important;
    padding-left:20px!important;padding-right:20px!important}
}

/* ============ PER-PAGE STYLES, scoped to their own page ============ */
/* ===== home ===== */

/* ==========================================================================
   ECN HOMEPAGE CONCEPT
   All seven changes applied. Brand palette unchanged.
   Single committed dark theme, painted explicitly.
   ========================================================================== */
:root{
  --navy:#051E33;
  --surface:#082A46;
  --surface-lift:#0B3A5F;
  --blue:#399FD9;
  --blue-soft:#8CD2F5;
  --yellow:#F4E504;
  --white:#EAF1F8;
  --body:#C2D6E6;
  --quiet:#7D9BB5;
  --line:rgba(57,159,217,0.16);
  --line-2:rgba(57,159,217,0.30);
  --live:#2EE08C;

  --r-btn:4px;
  --r-panel:12px;

  --pad-x:clamp(20px,5vw,64px);
  --pad-y:clamp(56px,7vw,88px);
  --max:1360px;
}

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

#page-home{
  margin:0;
  background:var(--navy);
  color:var(--body);
  font-family:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

#page-home h1, #page-home h2, #page-home h3{
  font-family:'Barlow Condensed','Barlow',sans-serif;
  color:var(--white);
  margin:0;
  text-wrap:balance;
}

#page-home a{text-decoration:none}

#page-home .inner{max-width:var(--max);margin:0 auto;padding-inline:var(--pad-x)}

/* ---------- concept strip ---------- */
#page-home .concept-bar{
  background:#02121F;
  border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--quiet);
  padding:9px var(--pad-x);
  text-align:center;
}
#page-home .concept-bar b{color:var(--yellow);font-weight:600}

/* ---------- nav ---------- */
#page-home .nav{
  position:sticky;
  top:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:66px;
  padding-inline:clamp(18px,3vw,40px);
  background:rgba(5,30,51,0.94);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
#page-home .nav-left{display:flex;align-items:center;gap:26px;min-width:0}
#page-home .logo{display:block;flex:none;line-height:0}
#page-home .logo img{height:32px;width:auto;display:block}
#page-home footer .logo img{height:36px}
#page-home .nav-live{
  display:flex;align-items:center;gap:7px;flex:none;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:0.1em;color:var(--quiet);
}
#page-home .pulse{width:6px;height:6px;border-radius:50%;background:var(--live);flex:none}
@media(prefers-reduced-motion:no-preference){
  #page-home .pulse{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(46,224,140,.55)}50%{box-shadow:0 0 0 5px rgba(46,224,140,0)}}
}
#page-home .nav-links{display:flex;gap:2px;list-style:none;margin:0;padding:0;min-width:0}
#page-home .nav-links a{
  display:block;padding:6px 10px;border-radius:var(--r-btn);
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--body);white-space:nowrap;
  transition:color .18s,background .18s;
}
#page-home .nav-links a:hover, #page-home .nav-links a:focus-visible{color:var(--white);background:rgba(57,159,217,.09)}
#page-home .nav-links a.on{color:var(--white);background:rgba(57,159,217,.13)}
#page-home .nav-right{display:flex;align-items:center;gap:14px;flex:none}
#page-home .lang{display:flex;gap:2px}
#page-home .lang button{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:0.1em;background:none;border:none;cursor:pointer;
  color:var(--quiet);padding:5px 8px;border-radius:3px;
}
#page-home .lang button.on{color:var(--navy);background:var(--blue-soft)}
#page-home .nav-cta{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:9px 22px;border-radius:var(--r-btn);
  background:var(--yellow);color:var(--navy);
}
#page-home .burger{display:none;background:none;border:1px solid var(--line-2);border-radius:var(--r-btn);
  width:40px;height:36px;cursor:pointer;padding:0;position:relative}
#page-home .burger span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--white)}
#page-home .burger span:nth-child(1){top:12px}#page-home .burger span:nth-child(2){top:17px}#page-home .burger span:nth-child(3){top:22px}
#page-home .drawer{display:none;border-bottom:1px solid var(--line);background:#041828;padding:10px var(--pad-x) 20px}
#page-home .drawer.open{display:block}
#page-home .drawer a{display:block;padding:11px 0;border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--body)}

@media(max-width:1520px){#page-home .nav-live{display:none}}
@media(max-width:1560px){
  #page-home .nav-links a{padding:6px 8px;font-size:11px;letter-spacing:.04em}
  #page-home .nav-left{gap:18px}
  #page-home .nav-right{gap:10px}
}
@media(max-width:1200px){
  #page-home .nav-links, #page-home .lang{display:none}
  #page-home .burger{display:block}
}

/* ---------- eyebrow ---------- */
#page-home .eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--blue-soft);margin:0 0 26px;
}

/* ---------- 07 · hero on network photography ---------- */
#page-home .hero{position:relative;isolation:isolate;overflow:hidden;background:transparent}
#page-home .hero-bg{display:none}



#page-home .hero .inner{position:relative;z-index:1;padding-block:clamp(56px,8vw,104px) clamp(48px,6vw,84px)}
#page-home .hero-copy{width:100%;max-width:620px}

#page-home .hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--blue-soft);margin-bottom:24px;
}
#page-home .hero-badge i{width:6px;height:6px;border-radius:50%;background:var(--yellow);display:block}

/* 04 · headline reads in white, yellow is reserved for the action */
#page-home h1.hero-h{
  font-size:clamp(48px,7vw,104px);
  font-weight:800;text-transform:uppercase;
  line-height:0.92;letter-spacing:-0.02em;
  color:var(--white);
  margin-bottom:26px;
}
/* 04 · headline accent system, exactly as the live site sets it:
   opening phrase at 75% white, one key phrase in yellow, remainder full white */
#page-home .hero-h .o{color:rgba(255,255,255,.75)}
#page-home .hero-h .y{color:var(--yellow);text-shadow:0 0 80px rgba(244,229,4,.2)}
/* 01 · body copy at 18px in the hero, 16px everywhere else */
#page-home .hero-p{
  font-size:clamp(13px,1.69vw,16.5px);font-weight:300;
  color:var(--body);line-height:1.55;max-width:46ch;margin:0 0 32px;
}
#page-home .actions{display:flex;flex-wrap:wrap;gap:12px}
#page-home .btn{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  border-radius:var(--r-btn);display:inline-block;transition:.18s;
}
#page-home .btn-y{font-weight:700;padding:15px 30px;background:var(--yellow);color:var(--navy)}
#page-home .btn-y:hover{box-shadow:0 0 28px rgba(244,229,4,.32);transform:translateY(-1px)}
#page-home .btn-o{font-weight:600;padding:14px 30px;border:1px solid var(--line-2);color:var(--body)}
#page-home .btn-o:hover{border-color:var(--blue);color:var(--blue-soft)}

/* 04 · stats unboxed, one rule holds the group */
#page-home .hero-stats{margin-top:44px;padding-top:26px;border-top:1px solid var(--line-2);max-width:620px}
#page-home .hero-stats .eyebrow{margin-bottom:22px}
#page-home .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
#page-home .stat-v{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(32px,3.85vw,42px);font-weight:800;line-height:1;
  color:var(--yellow);font-variant-numeric:tabular-nums;margin-bottom:5px;
}
#page-home .stat-l{font-size:13px;color:var(--blue-soft);line-height:1.35}
/* ---------- ticker · keeps its monospace, it is a live readout ---------- */
#page-home .ticker{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;height:52px;display:flex;align-items:center;background:rgba(4,24,40,.62);
}
#page-home .ticker-track{display:flex;white-space:nowrap;animation:slide 52s linear infinite}
@media(prefers-reduced-motion:reduce){#page-home .ticker-track{animation:none}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#page-home .tick{
  display:flex;align-items:center;gap:14px;padding:0 30px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  border-right:1px solid var(--line);color:var(--white);
}
#page-home .tick .c{color:var(--blue-soft)}
#page-home .tick .n{color:var(--white)}
#page-home .tick .l{color:var(--live);font-size:9.5px}

/* ---------- live sites strip ---------- */
#page-home .reel{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
#page-home .frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:rgba(8,42,70,.9);margin:0}
#page-home .frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.80) saturate(.94);
  transition:transform .6s cubic-bezier(.22,1,.36,1), filter .4s;
}
#page-home .frame:hover img{transform:scale(1.045);filter:brightness(1) saturate(1)}
@media(prefers-reduced-motion:reduce){#page-home .frame img{transition:none}#page-home .frame:hover img{transform:none}}
#page-home .frame figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 18px 16px;
  background:linear-gradient(0deg, rgba(4,18,30,.95) 0%, rgba(4,18,30,.72) 42%, transparent 100%);
}
#page-home .frame-brand{
  display:block;
  font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--white);line-height:1.1;
}
#page-home .frame-addr{
  display:block;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em;
  color:var(--yellow);text-transform:lowercase;margin-top:5px;
}
@media(max-width:820px){#page-home .reel{grid-template-columns:repeat(2,1fr)}}

/* ---------- 02 · proof figures, no boxes ---------- */
#page-home .proof{padding-block:var(--pad-y)}
#page-home .proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
#page-home .proof-item{padding-top:26px;border-top:1px solid var(--line)}
#page-home .proof-n{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(65px,7.24vw,90px);font-weight:800;line-height:.9;
  color:var(--yellow);font-variant-numeric:tabular-nums;margin-bottom:14px;
}
#page-home .proof-n em{
  font-style:normal;display:block;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin-top:10px;
}
#page-home .proof-t{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:40ch}
#page-home .proof-t b{color:var(--white);font-weight:500}
@media(max-width:860px){#page-home .proof-grid{grid-template-columns:1fr;gap:0}#page-home .proof-item{margin-top:26px}#page-home .proof-item:first-child{margin-top:0}}

/* ---------- 03 · value columns, no cage ---------- */
#page-home .value{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#page-home .value .inner{padding-block:var(--pad-y)}
#page-home .value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
#page-home .value-item{padding-top:24px;border-top:1px solid var(--line)}
#page-home .value-item:first-child{border-top:2px solid var(--yellow)}
#page-home .value-item h3{font-size:26px;font-weight:700;text-transform:uppercase;margin-bottom:12px;line-height:1.05}
#page-home .value-item p{margin:0;font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:40ch}
@media(max-width:860px){
  #page-home .value-grid{grid-template-columns:1fr}
  #page-home .value-item{margin-top:26px}
  #page-home .value-item:first-child{margin-top:0}
}

/* ---------- 05 · programmatic, one container ---------- */
#page-home .prog{padding-block:var(--pad-y) clamp(36px,4.5vw,56px)}
#page-home .prog-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(36px,6vw,80px);align-items:center}
#page-home .prog h2{font-size:clamp(38px,5.65vw,69px);font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:-0.02em;margin-bottom:22px}
#page-home .prog h2 span{color:var(--yellow)}
#page-home .prog p{font-size:13px;font-weight:300;line-height:1.6;max-width:42ch;margin:0 0 30px}
#page-home .pipe{border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82)}
#page-home .pipe-row{display:grid;grid-template-columns:34px 1fr;gap:18px;align-items:baseline;padding:20px 24px;border-top:1px solid rgba(57,159,217,.12)}
#page-home .pipe-row:first-child{border-top:none}
#page-home .pipe-n{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--blue)}
#page-home .pipe-t{font-family:'Barlow Condensed',sans-serif;font-size:18.5px;font-weight:700;text-transform:uppercase;color:var(--white);line-height:1.1;margin-bottom:3px}
#page-home .pipe-d{font-size:13px;font-weight:300;line-height:1.45;color:var(--body)}
@media(max-width:860px){#page-home .prog-grid{grid-template-columns:1fr}}

/* ---------- 06 · CTA pair with hierarchy ---------- */
#page-home .cta{padding-block:clamp(40px,5vw,64px) var(--pad-y)}
#page-home .cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
#page-home .card{background:rgba(8,42,70,.82);border:1px solid var(--line);border-radius:var(--r-panel);padding:clamp(30px,4vw,48px)}
#page-home .card.lead{background:linear-gradient(158deg,rgba(11,58,95,.84) 0%,rgba(7,33,53,.84) 100%);border-color:var(--line-2)}
#page-home .card h2{font-size:clamp(34px,4.52vw,53px);font-weight:800;text-transform:uppercase;line-height:.98;margin-bottom:16px}
#page-home .card p{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:34ch;margin:0 0 30px}
@media(max-width:820px){#page-home .cta-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
#page-home footer{border-top:1px solid var(--line);background:rgba(4,24,40,.74)}
#page-home footer .inner{padding-block:40px 52px;display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-end}
#page-home .foot-copy{font-size:13px;color:var(--quiet);margin-top:14px;max-width:44ch}
#page-home .foot-links{display:flex;flex-wrap:wrap;gap:10px 26px}
#page-home .foot-links a{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);
}
#page-home .foot-links a:hover{color:var(--blue-soft)}


/* ==========================================================================
   AMBIENT GROUND
   The hero photograph stays fixed behind the entire page, softened and
   veiled so it reads as depth rather than detail. Sections below the hero
   become translucent so it shows through and parallaxes as you scroll.
   ========================================================================== */
#page-home .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  
  background-size:cover;background-position:58% 46%;
}
#page-home .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(95deg,
      rgba(5,30,51,.98) 0%,
      rgba(5,30,51,.93) 26%,
      rgba(5,30,51,.66) 44%,
      rgba(5,30,51,.26) 64%,
      rgba(5,30,51,.08) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
#page-home .concept-bar, #page-home .drawer, #page-home .hero, #page-home section, #page-home .ticker, #page-home .reel, #page-home .clients, #page-home footer{position:relative;z-index:1}
@media(max-width:820px){
  #page-home .page-bg{background-position:58% 44%}
  #page-home .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}


/* ===== advertise ===== */

/* ==========================================================================
   ADVERTISE PAGE ADDITIONS
   Same tokens, same seven rules. Only new component shapes live here.
   ========================================================================== */

/* hero ground: Twirl campaign, City of London lobby */



@media(max-width:820px){
  
  
}

/* how to buy: four parallel facts, not a sequence, so no numbers */
#page-advertise .buy-row{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 34px}
#page-advertise .buy-t{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18.5px;font-weight:700;text-transform:uppercase;
  color:var(--white);line-height:1.08;margin-bottom:6px;
}
#page-advertise .buy-d{font-size:13px;font-weight:300;line-height:1.45;color:var(--blue-soft)}
@media(max-width:560px){#page-advertise .buy-row{grid-template-columns:1fr;gap:22px}}

/* utility jump to the specs card: for creative teams, so it stays quiet */
#page-advertise .jump{
  display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-soft);border-bottom:1px solid rgba(140,210,245,.4);
  padding-bottom:3px;transition:color .18s,border-color .18s;
}
#page-advertise .jump:hover{color:var(--yellow);border-color:rgba(244,229,4,.55)}
#page-advertise .jump span{font-family:'JetBrains Mono',monospace;font-size:13px}
#page-advertise #advertise--specs{scroll-margin-top:96px}

/* client band: one weight, one size, no logo-height lottery */
#page-advertise .clients{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(4,24,40,.62);overflow:hidden;padding:26px 0 30px;
}
#page-advertise .clients-label{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);
  text-align:center;margin:0 0 20px;
}
#page-advertise .clients-track{display:flex;white-space:nowrap;animation:slide 64s linear infinite;width:max-content}
@media(prefers-reduced-motion:reduce){#page-advertise .clients-track{animation:none}}
#page-advertise .client{
  font-family:'Barlow Condensed',sans-serif;
  font-size:19px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--body);padding:0 28px;flex:none;
}
#page-advertise .client + .client{border-left:1px solid var(--line)}
#page-advertise .client{display:flex;align-items:center}
#page-advertise .client img{
  width:auto;
  /* the brand marks arrive in assorted colours; the strip reads as one row */
  filter:grayscale(1) brightness(0) invert(1);opacity:.62;
}

/* how it works: a real sequence, so the numbers stay */
#page-advertise .stages{padding-block:var(--pad-y)}
#page-advertise .stages h2{font-size:clamp(34px,5.2vw,65px);font-weight:800;text-transform:uppercase;line-height:.96;letter-spacing:-0.02em;margin-bottom:20px}
#page-advertise .stages h2 span{color:var(--yellow)}
#page-advertise .stages .lede{font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:62ch;margin:0 0 44px}
#page-advertise .stage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 44px}
#page-advertise .stage{padding-top:22px;border-top:1px solid var(--line)}
#page-advertise .stage:first-child{border-top:2px solid var(--yellow)}
#page-advertise .stage-n{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;
}
#page-advertise .stage-n b{color:var(--white);font-weight:700;margin-right:8px}
#page-advertise .stage h3{font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:10px}
#page-advertise .stage p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body)}
@media(max-width:940px){
  #page-advertise .stage-grid{grid-template-columns:repeat(2,1fr);gap:0 36px}
  #page-advertise .stage:nth-child(2){border-top:2px solid var(--yellow)}
  #page-advertise .stage:nth-child(n+3){margin-top:30px}
}
@media(max-width:600px){
  #page-advertise .stage-grid{grid-template-columns:1fr}
  #page-advertise .stage:nth-child(2){border-top:1px solid var(--line)}
  #page-advertise .stage:nth-child(n+2){margin-top:28px}
}

/* capabilities: two columns, no cage, stats carry the weight */
#page-advertise .caps{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#page-advertise .caps .inner{padding-block:var(--pad-y)}
#page-advertise .caps h2{font-size:clamp(34px,5.2vw,65px);font-weight:800;text-transform:uppercase;line-height:.96;letter-spacing:-0.02em;margin-bottom:20px}
#page-advertise .caps h2 span{color:var(--yellow)}
#page-advertise .caps .lede{font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:62ch;margin:0 0 46px}
#page-advertise .cap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 56px}
#page-advertise .cap{padding-top:24px;border-top:1px solid var(--line-2)}
#page-advertise .cap-eyebrow{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);margin-bottom:12px;
}
#page-advertise .cap h3{font-size:26px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:18px}
#page-advertise .cap-stats{display:flex;gap:44px;margin-bottom:20px}
#page-advertise .cap-v{
  font-family:'Barlow Condensed',sans-serif;font-size:50px;font-weight:800;line-height:1;
  color:var(--yellow);font-variant-numeric:tabular-nums;margin-bottom:4px;
}
#page-advertise .cap-l{font-size:13px;color:var(--blue-soft);line-height:1.3;max-width:20ch}
#page-advertise .cap p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:46ch}
#page-advertise .cap-avail{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--quiet);padding-top:14px;border-top:1px solid var(--line);
}
@media(max-width:860px){#page-advertise .cap-grid{grid-template-columns:1fr;gap:34px}}

/* inline note */
#page-advertise .note{
  margin-top:46px;padding:20px 24px;
  border-left:2px solid var(--yellow);background:rgba(244,229,4,.05);
  max-width:72ch;
}
#page-advertise .note b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin-bottom:6px;
}
#page-advertise .note p{margin:0;font-size:13px;font-weight:300;line-height:1.6;color:var(--body)}
#page-advertise .note a{color:var(--blue-soft);border-bottom:1px solid rgba(140,210,245,.35)}

/* proven results: figures unboxed, the percentile chip is the one accent */
#page-advertise .results{padding-block:var(--pad-y) clamp(36px,4.5vw,56px)}
#page-advertise .results-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:44px}
#page-advertise .results-head h2{font-size:clamp(30px,4.52vw,55px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;max-width:18ch}
#page-advertise .results-head h2 span{color:var(--yellow)}
#page-advertise .result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
#page-advertise .result{padding-top:26px;border-top:1px solid var(--line)}
#page-advertise .result-v{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(65px,7.24vw,90px);font-weight:800;line-height:.9;
  color:var(--yellow);font-variant-numeric:tabular-nums;margin-bottom:16px;
}
#page-advertise .chip{
  display:inline-block;
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);background:var(--yellow);
  padding:5px 12px;border-radius:3px;margin-bottom:18px;
}
#page-advertise .result h3{font-size:26px;font-weight:700;text-transform:uppercase;margin-bottom:10px;line-height:1.05}
#page-advertise .result p{margin:0 0 14px;font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:42ch}
#page-advertise .result p b{color:var(--white);font-weight:600}
#page-advertise .result-market{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--quiet);line-height:1.5;
}
#page-advertise .results-foot{
  margin-top:40px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;color:var(--quiet);
}
@media(max-width:860px){#page-advertise .result-grid{grid-template-columns:1fr}#page-advertise .result:nth-child(n+2){margin-top:34px}}

/* ==========================================================================
   AMBIENT GROUND
   The hero photograph stays fixed behind the entire page, softened and
   veiled so it reads as depth rather than detail. Sections below the hero
   become translucent so it shows through and parallaxes as you scroll.
   ========================================================================== */
#page-advertise .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  
  background-size:cover;background-position:58% 46%;
}
#page-advertise .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(95deg,
      rgba(5,30,51,.98) 0%,
      rgba(5,30,51,.93) 26%,
      rgba(5,30,51,.66) 44%,
      rgba(5,30,51,.26) 64%,
      rgba(5,30,51,.08) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
#page-advertise .concept-bar, #page-advertise .drawer, #page-advertise .hero, #page-advertise section, #page-advertise .ticker, #page-advertise .reel, #page-advertise .clients, #page-advertise footer{position:relative;z-index:1}
@media(max-width:820px){
  #page-advertise .page-bg{background-position:58% 44%}
  #page-advertise .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}



/* ===== audience ===== */

/* ==========================================================================
   AUDIENCE PAGE ADDITIONS
   Same tokens, same seven rules. Only new component shapes live here.
   ========================================================================== */

/* hero ground: Just Eat for Business, The Gherkin.
   A far brighter frame than the other two, so the scrim runs heavier. */



@media(max-width:820px){
  
  
}

/* audience profile: four parallel facts about who is standing there */
#page-audience .prof-row{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 34px}
#page-audience .prof-t{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18.5px;font-weight:700;text-transform:uppercase;
  color:var(--white);line-height:1.08;margin-bottom:6px;
}
#page-audience .prof-d{font-size:13px;font-weight:300;line-height:1.45;color:var(--blue-soft)}
@media(max-width:560px){#page-audience .prof-row{grid-template-columns:1fr;gap:22px}}

/* this headline is three words wide, so the copy column runs wider here.
   The paragraph keeps its own 46ch measure, so only the headline benefits. */
#page-audience .hero-copy{max-width:900px}
#page-audience .hero-stats{max-width:700px}
@media(max-width:820px){#page-audience .hero-copy, #page-audience .hero-stats{max-width:100%}}

/* who you reach: three open columns */
#page-audience .reach{padding-block:var(--pad-y)}
#page-audience .reach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
#page-audience .reach-item{padding-top:24px;border-top:1px solid var(--line)}
#page-audience .reach-item:first-child{border-top:2px solid var(--yellow)}
#page-audience .reach-item h3{font-size:26px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:12px}
#page-audience .reach-item p{margin:0;font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:40ch}
@media(max-width:860px){
  #page-audience .reach-grid{grid-template-columns:1fr}
  #page-audience .reach-item{margin-top:26px}
  #page-audience .reach-item:first-child{margin-top:0}
}

/* moments: three dayparts. The peak window is marked by its rule, not a box. */
#page-audience .moments{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#page-audience .moments .inner{padding-block:var(--pad-y)}
#page-audience .moments h2{
  font-size:clamp(30px,4.75vw,59px);font-weight:800;text-transform:uppercase;
  line-height:1;letter-spacing:-0.02em;margin-bottom:48px;max-width:24ch;
}
#page-audience .moments h2 span{color:var(--yellow)}
#page-audience .day-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
#page-audience .day{padding-top:24px;border-top:1px solid var(--line-2)}
#page-audience .day.peak{border-top:3px solid var(--yellow)}
#page-audience .day-time{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  color:var(--blue-soft);margin-bottom:14px;
}
#page-audience .day.peak .day-time{color:var(--yellow)}
#page-audience .day h3{font-size:26px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:12px}
#page-audience .day p{margin:0;font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:40ch}
@media(max-width:860px){
  #page-audience .day-grid{grid-template-columns:1fr}
  #page-audience .day{margin-top:28px}
  #page-audience .day:first-child{margin-top:0}
}

/* verified data */
#page-audience .verified{padding-block:var(--pad-y)}
#page-audience .ver-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(36px,6vw,80px);align-items:start}
#page-audience .verified h2{font-size:clamp(34px,5.2vw,65px);font-weight:800;text-transform:uppercase;line-height:.96;letter-spacing:-0.02em;margin-bottom:20px}
#page-audience .verified h2 span{color:var(--yellow)}
#page-audience .verified .lede{font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:44ch;margin:0 0 34px}

/* targeting axes: three ways in, so no cage and no numbers */
#page-audience .axes{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;margin-bottom:36px}
#page-audience .axis{padding-top:18px;border-top:1px solid var(--line-2)}
#page-audience .axis-t{
  font-family:'Barlow Condensed',sans-serif;font-size:13.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--white);margin-bottom:6px;
}
#page-audience .axis-d{font-size:13px;font-weight:300;line-height:1.45;color:var(--body)}
@media(max-width:600px){#page-audience .axes{grid-template-columns:1fr;gap:0}#page-audience .axis{margin-top:18px}#page-audience .axis:first-child{margin-top:0}}

/* certification: one container per group, rows inside it */
#page-audience .cert-label{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 14px;
}
#page-audience .cert-box + .cert-label{margin-top:30px}
#page-audience .cert-box{border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82)}
#page-audience .cert-row{display:grid;grid-template-columns:34px 1fr;gap:18px;padding:20px 24px;border-top:1px solid rgba(57,159,217,.12)}
#page-audience .cert-row:first-child{border-top:none}
#page-audience .cert-row.no-flag{grid-template-columns:1fr}
#page-audience .cert-flag{
  font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.06em;color:var(--blue);padding-top:2px;
}
#page-audience .cert-t{
  font-family:'Barlow Condensed',sans-serif;font-size:17.5px;font-weight:700;
  text-transform:uppercase;color:var(--white);line-height:1.1;margin-bottom:5px;
}
#page-audience .cert-d{font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
#page-audience .cert-status{
  display:inline-block;margin-left:10px;vertical-align:2px;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--yellow);
}
@media(max-width:860px){#page-audience .ver-grid{grid-template-columns:1fr}}

/* ==========================================================================
   AMBIENT GROUND
   The hero photograph stays fixed behind the entire page, softened and
   veiled so it reads as depth rather than detail. Sections below the hero
   become translucent so it shows through and parallaxes as you scroll.
   ========================================================================== */
#page-audience .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  
  background-size:cover;background-position:58% 46%;
}
#page-audience .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(95deg,
      rgba(5,30,51,.98) 0%,
      rgba(5,30,51,.93) 26%,
      rgba(5,30,51,.66) 44%,
      rgba(5,30,51,.26) 64%,
      rgba(5,30,51,.08) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
#page-audience .concept-bar, #page-audience .drawer, #page-audience .hero, #page-audience section, #page-audience .ticker, #page-audience .reel, #page-audience .clients, #page-audience footer{position:relative;z-index:1}
@media(max-width:820px){
  #page-audience .page-bg{background-position:58% 44%}
  #page-audience .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}



/* ===== abm ===== */

/* ==========================================================================
   ABM MATCHER PAGE
   This is the one page on the site that is a tool rather than a document,
   so the rules bend in one place: the matcher genuinely is a panel and
   keeps its border. Everything around it follows the same seven changes.
   ========================================================================== */

/* hero ground: Lenovo AI PC, City of London lift lobby */



/* [hidden] needs to beat the display:flex on the empty state */
#page-abm [hidden]{display:none!important}

/* long headline, so the copy column runs wider here; the paragraph keeps its own measure */
#page-abm .hero-copy{max-width:1000px}
#page-abm h1.hero-h{font-size:clamp(48px,7vw,104px)}
#page-abm .hero-stats{max-width:700px}
@media(max-width:820px){#page-abm .hero-copy, #page-abm .hero-stats{max-width:100%}}

@media(max-width:820px){
  
  
}

/* how it works: a genuine sequence, so the numbers stay */
#page-abm .steps{padding-block:clamp(44px,5.5vw,68px)}
#page-abm .step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
#page-abm .step{padding-top:22px;border-top:1px solid var(--line)}
#page-abm .step:first-child{border-top:2px solid var(--yellow)}
#page-abm .step-n{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;
}
#page-abm .step-n b{color:var(--white);font-weight:700;margin-right:8px}
#page-abm .step h3{font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:10px}
#page-abm .step p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:38ch}
@media(max-width:860px){
  #page-abm .step-grid{grid-template-columns:1fr}
  #page-abm .step{margin-top:26px}
  #page-abm .step:first-child{margin-top:0}
}

/* ---------- the matcher ---------- */
#page-abm .tool-wrap{padding-block:0 clamp(44px,5.5vw,68px)}
#page-abm .tool{
  border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;
  background:rgba(8,42,70,.80);
}
#page-abm .tool-bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:20px 26px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(5,30,51,.85), rgba(57,159,217,.06));
}
#page-abm .tool-bar h2{font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.1}
#page-abm .tool-bar p{margin:2px 0 0;font-size:13px;font-weight:300;color:var(--body)}
#page-abm .tool-live{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--live);
}
#page-abm .tool-panes{display:grid;grid-template-columns:1fr 1fr}
#page-abm .pane-in{padding:clamp(24px,3vw,34px);border-right:1px solid var(--line)}
#page-abm .pane-out{padding:clamp(24px,3vw,34px);background:rgba(4,18,30,.45)}
@media(max-width:900px){
  #page-abm .tool-panes{grid-template-columns:1fr}
  #page-abm .pane-in{border-right:none;border-bottom:1px solid var(--line)}
}

#page-abm .step-tag{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 22px;
}
#page-abm .flabel{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);margin:0 0 10px;
}
#page-abm .flabel + .flabel{margin-top:24px}

#page-abm .tabs{display:flex;border:1px solid var(--line-2);border-radius:var(--r-btn);overflow:hidden;margin-bottom:12px}
#page-abm .tabs button{
  flex:1;padding:10px;cursor:pointer;border:none;background:transparent;
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);transition:.18s;
}
#page-abm .tabs button + button{border-left:1px solid var(--line-2)}
#page-abm .tabs button[aria-selected="true"]{background:rgba(57,159,217,.16);color:var(--white)}

#page-abm textarea.fi, #page-abm select.fi, #page-abm input.fi{
  width:100%;background:rgba(4,14,26,.6);
  border:1px solid var(--line-2);border-radius:var(--r-btn);
  color:var(--white);font-family:'Barlow',sans-serif;font-size:13px;line-height:1.6;
  padding:12px 14px;
}
#page-abm textarea.fi{resize:vertical;min-height:170px}
#page-abm select.fi{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--blue-soft) 50%),linear-gradient(135deg,var(--blue-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px, calc(100% - 14px) 20px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;}
#page-abm select.fi option{background:#061826;color:#EAF1F8}
#page-abm .fi:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}

#page-abm .drop{
  display:block;border:1px dashed var(--line-2);border-radius:var(--r-btn);
  padding:30px 20px;text-align:center;cursor:pointer;background:rgba(57,159,217,.04);
}
#page-abm .drop b{display:block;font-size:13px;font-weight:500;color:var(--white);margin-bottom:5px}
#page-abm .drop span{font-size:13px;color:var(--quiet)}

#page-abm .count{font-size:13px;color:var(--blue-soft);margin:10px 0 0}
#page-abm .privacy{
  margin:18px 0 0;padding:14px 16px;
  border-left:2px solid var(--yellow);background:rgba(244,229,4,.05);
  font-size:13px;font-weight:300;line-height:1.55;color:var(--body);
}
#page-abm .privacy b{color:var(--white);font-weight:600}

#page-abm .mkts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#page-abm .mkt{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  background:rgba(4,14,26,.5);border:1px solid var(--line);border-radius:var(--r-btn);
  padding:11px 14px;transition:border-color .18s,background .18s;
}
#page-abm .mkt:hover{border-color:var(--line-2)}
#page-abm .mkt:has(input:checked){border-color:var(--blue);background:rgba(57,159,217,.08)}
#page-abm .mkt input{accent-color:#399FD9;width:15px;height:15px;flex:none}
#page-abm .mkt span{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--white)}

#page-abm button.btn-run{
  width:100%;margin-top:24px;padding:15px;cursor:pointer;border:none;
  border-radius:var(--r-btn);background:var(--yellow);color:var(--navy);
  font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;transition:.18s;
}
#page-abm button.btn-run:hover:not(:disabled){box-shadow:0 0 28px rgba(244,229,4,.32)}
#page-abm button.btn-run:disabled{background:rgba(57,159,217,.14);color:var(--quiet);cursor:not-allowed}

/* results */
#page-abm .empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:320px;text-align:center;color:var(--quiet);font-size:13px;font-weight:300;line-height:1.6;
}
#page-abm .empty-mark{width:46px;height:46px;border:2px solid var(--line-2);border-radius:50%;margin-bottom:18px;position:relative}
#page-abm .empty-mark::after{content:'';position:absolute;inset:12px;border:2px solid var(--line-2);border-radius:50%}

#page-abm .headline-num{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(87px,10.18vw,124px);font-weight:800;line-height:.86;
  color:var(--yellow);font-variant-numeric:tabular-nums;
}
#page-abm .headline-of{font-size:13px;font-weight:300;color:var(--body);margin:8px 0 22px}
#page-abm .headline-of b{color:var(--white);font-weight:600}
#page-abm .meter{height:8px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden}
#page-abm .meter i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#399FD9,#F4E504);transition:width 1s cubic-bezier(.4,0,.2,1)}
#page-abm .meter-pct{
  font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:700;
  color:var(--blue-soft);margin-top:10px;font-variant-numeric:tabular-nums;
}
#page-abm .meter-pct > span:last-child{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-left:8px}

#page-abm .by-mkt{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
#page-abm .mkt-rows{display:grid;gap:12px;margin-top:16px}
#page-abm .mkt-row{display:grid;grid-template-columns:78px 1fr 58px;gap:14px;align-items:center}
#page-abm .mkt-row-l{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--white)}
#page-abm .mkt-row-t{height:8px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden}
#page-abm .mkt-row-t i{display:block;height:100%;background:#399FD9;border-radius:4px}
#page-abm .mkt-row-v{font-family:'Barlow Condensed',sans-serif;font-size:16.5px;font-weight:700;color:var(--white);text-align:right;font-variant-numeric:tabular-nums}

#page-abm .matched{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
#page-abm .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
#page-abm .chip-co{
  font-size:13px;color:var(--body);background:rgba(57,159,217,.09);
  border:1px solid var(--line);border-radius:3px;padding:4px 10px;
}
#page-abm .chip-more{color:var(--quiet);font-size:13px;padding:4px 2px}

#page-abm .disclaim{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;font-weight:300;line-height:1.55;color:var(--quiet);
}
#page-abm .next{margin-top:26px}
#page-abm .next h3{font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.1;margin-bottom:8px}
#page-abm .next p{margin:0 0 20px;font-size:13px;font-weight:300;line-height:1.55;color:var(--body)}

/* ---------- sector coverage ---------- */
#page-abm .sectors{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#page-abm .sectors .inner{padding-block:var(--pad-y)}
#page-abm .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:30px}
#page-abm .sec-head h2{font-size:clamp(30px,4.52vw,55px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em}
#page-abm .sec-head h2 span{color:var(--yellow)}
#page-abm .sec-head p{margin:0;font-size:13px;font-weight:300;color:var(--body);max-width:34ch}
#page-abm .sec-tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:28px}
#page-abm .sec-tabs button{
  cursor:pointer;padding:9px 18px;border-radius:var(--r-btn);
  border:1px solid var(--line-2);background:transparent;color:var(--body);
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;transition:.18s;
}
#page-abm .sec-tabs button[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:var(--navy)}
#page-abm .sec-total{
  margin-left:auto;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;
  color:var(--white);font-variant-numeric:tabular-nums;
}
#page-abm .sec-total span{font-family:'Barlow',sans-serif;font-size:13px;font-weight:300;color:var(--quiet);margin-left:6px}

/* single-series magnitude: one hue, ranked, value direct-labelled */
#page-abm .bars{display:grid;gap:10px}
#page-abm .bar-row{display:grid;grid-template-columns:minmax(150px,240px) 1fr 62px;gap:18px;align-items:center}
#page-abm .bar-l{font-size:13px;color:var(--body);line-height:1.3}
#page-abm .bar-t{height:14px;background:rgba(255,255,255,.05);border-radius:4px;overflow:hidden}
#page-abm .bar-t i{display:block;height:100%;background:#399FD9;border-radius:0 4px 4px 0;transition:width .5s ease}
#page-abm .bar-v{
  font-family:'Barlow Condensed',sans-serif;font-size:16.5px;font-weight:700;color:var(--white);
  text-align:right;font-variant-numeric:tabular-nums;
}
#page-abm .bar-row:hover .bar-t i{background:#5FB6E6}
@media(max-width:700px){
  #page-abm .bar-row{grid-template-columns:1fr 54px;gap:6px 12px}
  #page-abm .bar-l{grid-column:1/-1}
  #page-abm .bar-t{grid-column:1}
}

/* ---------- playbooks ---------- */
#page-abm .play{padding-block:var(--pad-y)}
#page-abm .play-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(36px,6vw,72px);align-items:center}
#page-abm .play h2{font-size:clamp(30px,4.52vw,55px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;margin-bottom:18px}
#page-abm .play h2 span{color:var(--yellow)}
#page-abm .play .lede{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:46ch;margin:0 0 28px}
#page-abm .pbk{border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82)}
#page-abm .pbk a{
  display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;
  padding:18px 22px;border-top:1px solid rgba(57,159,217,.12);transition:background .18s;
}
#page-abm .pbk a:first-child{border-top:none}
#page-abm .pbk a:hover{background:rgba(57,159,217,.06)}
#page-abm .pbk-cc{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--blue)}
#page-abm .pbk-t{font-family:'Barlow Condensed',sans-serif;font-size:18.5px;font-weight:700;text-transform:uppercase;color:var(--white);line-height:1.1}
#page-abm .pbk-d{font-size:13px;font-weight:300;color:var(--body);line-height:1.4}
#page-abm .pbk-go{font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-soft)}
#page-abm .pbk a:hover .pbk-go{color:var(--yellow)}
@media(max-width:860px){#page-abm .play-grid{grid-template-columns:1fr}#page-abm .pbk a{grid-template-columns:36px 1fr}#page-abm .pbk-go{display:none}}

/* ==========================================================================
   AMBIENT GROUND
   ========================================================================== */
#page-abm .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  
  background-size:cover;background-position:58% 46%;
}
#page-abm .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(95deg,
      rgba(5,30,51,.98) 0%,
      rgba(5,30,51,.93) 26%,
      rgba(5,30,51,.66) 44%,
      rgba(5,30,51,.26) 64%,
      rgba(5,30,51,.08) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
#page-abm .concept-bar, #page-abm .drawer, #page-abm .hero, #page-abm section, #page-abm .ticker, #page-abm footer{position:relative;z-index:1}
@media(max-width:820px){
  #page-abm .page-bg{background-position:58% 44%}
  #page-abm .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}


/* ===== programmatic ===== */

/* ==========================================================================
   PROGRAMMATIC PAGE
   Same tokens, same seven changes. Only new component shapes live here.
   ========================================================================== */

/* hero ground: Zoho CRM, City of London lift lobby */



@media(max-width:820px){
  
  
}

/* programmatic access: four parallel facts about buying it */
#page-programmatic .acc-row{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 34px}
#page-programmatic .acc-t{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18.5px;font-weight:700;text-transform:uppercase;
  color:var(--white);line-height:1.08;margin-bottom:6px;
}
#page-programmatic .acc-d{font-size:13px;font-weight:300;line-height:1.45;color:var(--blue-soft)}
@media(max-width:560px){#page-programmatic .acc-row{grid-template-columns:1fr;gap:22px}}

/* the longest headline in the set: wider column, and stepped down so it sets in two lines */
#page-programmatic .hero-copy{max-width:1000px}
#page-programmatic .hero-stats{max-width:700px}
#page-programmatic h1.hero-h{font-size:clamp(48px,7vw,104px)}
@media(max-width:820px){#page-programmatic .hero-copy, #page-programmatic .hero-stats{max-width:100%}}

/* platform band: one weight, one size */
#page-programmatic .dsps{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(4,24,40,.62);overflow:hidden;padding:24px 0 28px;
}
#page-programmatic .dsps-head{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  max-width:var(--max);margin:0 auto 18px;padding-inline:var(--pad-x);
}
#page-programmatic .dsps-head p{
  margin:0;font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);
}
#page-programmatic .dsps-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent);min-width:30px}
#page-programmatic .dsps-head .n{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-soft);
}
#page-programmatic .dsps-track{display:flex;white-space:nowrap;width:max-content;animation:slide 46s linear infinite}
@media(prefers-reduced-motion:reduce){#page-programmatic .dsps-track{animation:none}}
#page-programmatic .dsp{
  font-family:'Barlow Condensed',sans-serif;
  font-size:19px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--body);padding:0 28px;flex:none;
}
#page-programmatic .dsp + .dsp{border-left:1px solid var(--line)}
#page-programmatic .dsp{display:flex;align-items:center;gap:10px}
#page-programmatic .dsp img{width:auto;filter:grayscale(1) brightness(0) invert(1);opacity:.62}

/* how it works: a real sequence */
#page-programmatic .flow{padding-block:var(--pad-y) clamp(30px,4vw,44px)}
#page-programmatic .flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 44px}
#page-programmatic .fl{padding-top:22px;border-top:1px solid var(--line)}
#page-programmatic .fl:first-child{border-top:2px solid var(--yellow)}
#page-programmatic .fl-n{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;
}
#page-programmatic .fl-n b{color:var(--white);font-weight:700;margin-right:8px}
#page-programmatic .fl h3{font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:10px}
#page-programmatic .fl p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body)}
@media(max-width:940px){
  #page-programmatic .flow-grid{grid-template-columns:repeat(2,1fr);gap:0 36px}
  #page-programmatic .fl:nth-child(2){border-top:2px solid var(--yellow)}
  #page-programmatic .fl:nth-child(n+3){margin-top:30px}
}
@media(max-width:600px){
  #page-programmatic .flow-grid{grid-template-columns:1fr}
  #page-programmatic .fl:nth-child(2){border-top:1px solid var(--line)}
  #page-programmatic .fl:nth-child(n+2){margin-top:28px}
}

/* dynamic creative: one row, not a card */
#page-programmatic .dco{padding-block:0 var(--pad-y)}
#page-programmatic .dco-row{
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  padding-top:22px;border-top:1px solid var(--line-2);
}
#page-programmatic .dco h3{font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.1;margin-bottom:8px}
#page-programmatic .dco p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:62ch}
#page-programmatic .dco-flag{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--navy);
  background:var(--yellow);padding:5px 12px;border-radius:3px;white-space:nowrap;
}
@media(max-width:600px){#page-programmatic .dco-row{grid-template-columns:1fr;gap:16px;justify-items:start}}

/* marketplace: deal IDs are genuinely a panel, so they keep their container */
#page-programmatic .mkt-place{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#page-programmatic .mkt-place .inner{padding-block:var(--pad-y)}
#page-programmatic .mkt-place h2{font-size:clamp(34px,5.2vw,65px);font-weight:800;text-transform:uppercase;line-height:.96;letter-spacing:-0.02em;margin-bottom:20px}
#page-programmatic .mkt-place h2 span{color:var(--yellow)}
#page-programmatic .mkt-place .lede{font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:56ch;margin:0 0 38px}
#page-programmatic .deal-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:stretch}
#page-programmatic .deals{border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82);display:flex;flex-direction:column}
#page-programmatic .deals .deal{flex:1 1 0}
#page-programmatic .deal{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  padding:20px 24px;border-top:1px solid rgba(57,159,217,.12);
}
#page-programmatic .deal:first-child{border-top:none}
#page-programmatic .deal-ssp{
  font-family:'Barlow Condensed',sans-serif;font-size:16.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--white);margin-bottom:6px;
}
#page-programmatic .deal-id{
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
  color:var(--blue-soft);letter-spacing:.02em;word-break:break-all;
}
#page-programmatic .deal-copy{
  cursor:pointer;background:transparent;border:1px solid var(--line-2);border-radius:var(--r-btn);
  padding:9px 16px;white-space:nowrap;transition:.18s;
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--body);
}
#page-programmatic .deal-copy:hover{border-color:var(--blue);color:var(--white)}
#page-programmatic .deal-copy[data-done="1"]{border-color:var(--live);color:var(--live)}
@media(max-width:860px){#page-programmatic .deal-grid{grid-template-columns:1fr}}


#page-programmatic .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  
  background-size:cover;background-position:58% 46%;
}
#page-programmatic .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(95deg,
      rgba(5,30,51,.98) 0%,
      rgba(5,30,51,.93) 26%,
      rgba(5,30,51,.66) 44%,
      rgba(5,30,51,.26) 64%,
      rgba(5,30,51,.08) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
#page-programmatic .concept-bar, #page-programmatic .drawer, #page-programmatic .hero, #page-programmatic section, #page-programmatic footer{position:relative;z-index:1}
@media(max-width:820px){
  #page-programmatic .page-bg{background-position:58% 44%}
  #page-programmatic .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}


/* ===== locations ===== */

/* ==========================================================================
   LOCATIONS PAGE
   Same tokens, same seven changes. The market list is the one real panel:
   it exists to be compared row against row, so it keeps a container.
   ========================================================================== */

/* hero ground: More London. No locations-specific shot was supplied, so this
   is the only frame in the set with a recognisable city in it. */



@media(max-width:820px){
  
  
}

/* this headline sets in two lines, so the copy column runs a little wider */
#page-locations .hero-copy{max-width:900px}
#page-locations .hero-stats{max-width:700px}
#page-locations h1.hero-h{font-size:clamp(48px,6.8vw,100px)}
@media(max-width:820px){#page-locations .hero-copy, #page-locations .hero-stats{max-width:100%}}

/* ---------- markets: separate cards, as on the live site ---------- */
#page-locations .markets{padding-block:var(--pad-y)}
#page-locations .markets h2{
  font-size:clamp(30px,4.52vw,55px);font-weight:800;text-transform:uppercase;
  line-height:1;letter-spacing:-0.02em;margin-bottom:12px;
}
#page-locations .markets h2 span{color:var(--yellow)}
#page-locations .markets .lede{font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:56ch;margin:0 0 32px}

#page-locations .mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#page-locations .mk-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;margin-top:16px;align-items:stretch}
#page-locations .mk-grid2>div{display:flex}
#page-locations .mk-grid2>div>.mk{flex:1 1 auto}
#page-locations .mk{
  background:rgba(8,42,70,.84);border:1px solid var(--line-2);border-radius:var(--r-panel);
  padding:24px clamp(18px,2vw,24px);cursor:pointer;
  transition:border-color .25s, transform .25s;
  display:flex;flex-direction:column;
}
#page-locations .mk:hover{border-color:var(--blue);transform:translateY(-2px)}
#page-locations .mk.primary{border-bottom:3px solid var(--yellow)}

#page-locations .mk-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-bottom:18px}
#page-locations .mk-cc{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--blue)}
#page-locations .mk-name{display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1}
#page-locations .mk-sub{display:block;font-size:13px;color:var(--blue-soft);margin-top:4px}
#page-locations .mk-arrow{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:var(--blue-soft)}
#page-locations .mk.primary .mk-arrow{color:var(--yellow)}
#page-locations .mk:hover .mk-arrow{color:var(--yellow)}

#page-locations .mk-figs{display:flex;gap:clamp(16px,2vw,26px);padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:16px}
#page-locations .mk-fig b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
#page-locations .mk-fig span{display:block;font-size:13px;color:var(--blue-soft);margin-top:3px}

#page-locations .mk-cities{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
#page-locations .city{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--body);background:rgba(57,159,217,.08);
  border:1px solid var(--line);border-radius:3px;padding:4px 9px;
  cursor:pointer;transition:.16s;
}
#page-locations .city:hover{border-color:var(--blue);color:var(--white);background:rgba(57,159,217,.16)}
#page-locations .city.hub{border-color:rgba(244,229,4,.45);color:var(--yellow);background:rgba(244,229,4,.08)}
#page-locations .city.hub:hover{background:rgba(244,229,4,.16);color:var(--yellow)}

#page-locations .mk-go{margin-top:auto;
  margin-top:auto;font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
}
#page-locations .mk:hover .mk-go{color:var(--yellow)}

#page-locations .mk-pan{
  background:rgba(8,42,70,.84);border:1px solid var(--line-2);border-radius:var(--r-panel);
  padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;justify-content:center;
}
#page-locations .mk-pan h3{font-size:clamp(21px,3.12vw,34px);font-weight:800;text-transform:uppercase;line-height:1.05;margin-bottom:12px}
#page-locations .mk-pan h3 span{color:var(--yellow)}
#page-locations .mk-pan p{margin:0 0 22px;font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:52ch}

@media(max-width:940px){
  #page-locations .mk-grid{grid-template-columns:repeat(2,1fr)}
  #page-locations .mk-grid2{grid-template-columns:1fr}
}
@media(max-width:620px){#page-locations .mk-grid{grid-template-columns:1fr}}

/* hub note */
#page-locations .hub-note{
  margin-top:20px;font-size:13px;font-weight:300;color:var(--quiet);
  display:flex;align-items:center;gap:9px;
}
#page-locations .hub-note i{width:9px;height:9px;border-radius:2px;background:rgba(244,229,4,.5);border:1px solid rgba(244,229,4,.6);flex:none}

/* pan-european */
#page-locations .pan{padding-block:0 var(--pad-y)}
@media(max-width:480px){
  #page-locations .card h2{font-size:30px;overflow-wrap:break-word}
}

/* ---------- ambient ---------- */
#page-locations .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  
  background-size:cover;background-position:58% 46%;
}
#page-locations .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(95deg,
      rgba(5,30,51,.98) 0%,
      rgba(5,30,51,.93) 26%,
      rgba(5,30,51,.66) 44%,
      rgba(5,30,51,.26) 64%,
      rgba(5,30,51,.08) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
#page-locations .concept-bar, #page-locations .drawer, #page-locations .hero, #page-locations section, #page-locations .ticker, #page-locations footer{position:relative;z-index:1}
@media(max-width:820px){
  #page-locations .page-bg{background-position:58% 44%}
  #page-locations .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}


/* ===== city-uk ===== */

/* ==========================================================================
   UK LOCATION PAGE
   Same tokens, same seven changes. Two things are genuinely panels and keep
   a container: the city list and the coverage map.
   ========================================================================== */

/* hero ground: Emirates at 110 Cannon Street, City of London */



@media(max-width:820px){
  
  
}

#page-city-uk .hero-copy{max-width:840px}
#page-city-uk .hero-sub{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,26px);font-weight:500;line-height:1.3;
  letter-spacing:.01em;color:rgba(255,255,255,.92);max-width:720px;margin:0 0 22px;
}
#page-city-uk .hero-sub em{font-style:normal;color:var(--yellow);font-weight:600}
#page-city-uk .hero-stats{max-width:700px}
#page-city-uk h1.hero-h{font-size:clamp(48px,6.8vw,100px)}
@media(max-width:820px){#page-city-uk .hero-copy, #page-city-uk .hero-stats{max-width:100%}}

/* breadcrumb */
#page-city-uk .crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-block:16px 0;
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
#page-city-uk .crumb a{color:var(--blue-soft)}
#page-city-uk .crumb a:hover{color:var(--yellow)}
#page-city-uk .crumb i{color:var(--quiet);font-style:normal}
#page-city-uk .crumb b{color:var(--white);font-weight:600}

/* ---------- cities + map ---------- */
#page-city-uk .uk-net{padding-block:var(--pad-y)}
#page-city-uk .uk-net h2{font-size:clamp(30px,4.52vw,55px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;margin-bottom:16px}
#page-city-uk .uk-net h2 span{color:var(--yellow)}
#page-city-uk .uk-net .lede{font-size:13px;font-weight:300;line-height:1.75;color:var(--body);max-width:74ch;margin:0 0 38px}
#page-city-uk .net-grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);gap:clamp(32px,4.5vw,64px);align-items:stretch}

/* cities: separate cards, as on the live site */
#page-city-uk .city-list{display:grid;gap:12px}
#page-city-uk .crow{
  display:grid;grid-template-columns:1fr auto auto;gap:clamp(14px,2vw,26px);align-items:center;
  width:100%;text-align:left;cursor:pointer;
  padding:20px clamp(18px,2.2vw,24px);
  background:rgba(8,42,70,.84);border:1px solid var(--line-2);border-radius:var(--r-panel);
  transition:border-color .25s, transform .25s;
}
#page-city-uk .crow:hover, #page-city-uk .crow:focus-visible{border-color:var(--blue);transform:translateY(-2px)}
#page-city-uk .crow[data-primary="1"]{border-bottom:3px solid var(--yellow)}
#page-city-uk .crow-name{
  display:block;
  font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;
  text-transform:uppercase;color:var(--white);line-height:1;margin-bottom:6px;
}
#page-city-uk .crow-d{display:block;font-size:13px;font-weight:300;line-height:1.4;color:var(--blue-soft)}
#page-city-uk .crow-n{text-align:right}
#page-city-uk .crow-n b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;
  color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums;
}
#page-city-uk .crow-n span{display:block;font-size:13px;color:var(--blue-soft);margin-top:3px}
#page-city-uk .crow-go{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue-soft);white-space:nowrap;
}
#page-city-uk .crow:hover .crow-go{color:var(--yellow)}
@media(max-width:560px){
  #page-city-uk .crow{grid-template-columns:1fr auto}
  #page-city-uk .crow-go{display:none}
}

/* map */
#page-city-uk .map-panel{border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82);display:flex;flex-direction:column}
#page-city-uk .map-head{
  padding:16px 22px;border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);
}
#page-city-uk .map-body{padding:18px 18px 8px;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0}
#page-city-uk .map-body svg{display:block;width:auto;height:auto;max-width:100%;max-height:398px}
#page-city-uk .uk-coast{fill:rgba(57,159,217,.09);stroke:rgba(57,159,217,.34);stroke-width:1.5;stroke-linejoin:round}
#page-city-uk .pin{cursor:pointer}
#page-city-uk .pin circle{transition:r .18s, fill .18s}
#page-city-uk .pin text{
  font-family:'Barlow Condensed',sans-serif;font-size:16.5px;font-weight:700;
  letter-spacing:.04em;fill:#EAF1F8;
}
#page-city-uk .pin:hover circle.dot{r:9}
#page-city-uk .pin:hover text{fill:#F4E504}
#page-city-uk .map-key{
  display:flex;gap:22px;flex-wrap:wrap;padding:0 22px 18px;
  font-size:13px;color:var(--quiet);
}
#page-city-uk .map-key span{display:flex;align-items:center;gap:8px}
#page-city-uk .map-key i{width:10px;height:10px;border-radius:50%;flex:none}
#page-city-uk .map-key i.p{background:#F4E504}
#page-city-uk .map-key i.s{background:#399FD9}
@media(max-width:900px){#page-city-uk .net-grid{grid-template-columns:1fr}}

/* ---------- profile + buying ---------- */
#page-city-uk .uk-prof{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#page-city-uk .uk-prof .inner{padding-block:var(--pad-y)}
#page-city-uk .prof-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
#page-city-uk .prof-grid h3{font-size:26px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:16px}
#page-city-uk .prof-grid p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.65;color:var(--body);max-width:62ch}
#page-city-uk .who{margin-top:26px;display:grid;gap:0}
#page-city-uk .who div{
  padding:14px 0;border-top:1px solid var(--line);
  font-size:13px;font-weight:300;line-height:1.5;color:var(--body);
}
#page-city-uk .who div:first-child{border-top:1px solid var(--line-2)}
#page-city-uk .who b{color:var(--white);font-weight:600}

#page-city-uk .buy{border-top:2px solid var(--yellow);padding-top:22px}
#page-city-uk .buy-item{padding:20px 0;border-top:1px solid var(--line)}
#page-city-uk .buy-item:first-child{border-top:none;padding-top:0}
#page-city-uk .buy-item h4{
  font-family:'Barlow Condensed',sans-serif;font-size:18.5px;font-weight:700;
  text-transform:uppercase;color:var(--white);line-height:1.1;margin:0 0 8px;
}
#page-city-uk .buy-item p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body)}
@media(max-width:900px){#page-city-uk .prof-grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
#page-city-uk .faq{padding-block:var(--pad-y)}
#page-city-uk .faq h2{font-size:clamp(27px,3.85vw,42px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;margin-bottom:32px}
#page-city-uk .faq-list{display:grid;gap:0;max-width:78ch}
#page-city-uk .faq-item{border-top:1px solid var(--line)}
#page-city-uk .faq-item:first-child{border-top:2px solid var(--yellow)}
#page-city-uk .faq-q{
  width:100%;text-align:left;cursor:pointer;background:transparent;border:none;
  padding:20px 34px 20px 0;position:relative;
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;
  text-transform:uppercase;color:var(--white);line-height:1.15;
}
#page-city-uk .faq-q::after{
  content:'+';position:absolute;right:4px;top:18px;
  font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:600;color:var(--blue);
}
#page-city-uk .faq-item[data-open="1"] .faq-q::after{content:'\2212'}
#page-city-uk .faq-a{padding:0 0 22px;font-size:13px;font-weight:300;line-height:1.65;color:var(--body);max-width:68ch}

/* ---------- ambient ---------- */
#page-city-uk .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  
  background-size:cover;background-position:58% 46%;
}
#page-city-uk .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(95deg,
      rgba(5,30,51,.98) 0%,
      rgba(5,30,51,.93) 26%,
      rgba(5,30,51,.66) 44%,
      rgba(5,30,51,.26) 64%,
      rgba(5,30,51,.08) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
#page-city-uk .concept-bar, #page-city-uk .drawer, #page-city-uk .hero, #page-city-uk section, #page-city-uk .crumb-wrap, #page-city-uk footer{position:relative;z-index:1}
@media(max-width:820px){
  #page-city-uk .page-bg{background-position:58% 44%}
  #page-city-uk .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}


/* ===== city-london ===== */

/* ==========================================================================
   LONDON LOCATION PAGE
   Same tokens, same seven changes. Three things are genuinely panels and
   keep a container: the building list, the district schematic, the pack
   planner. Everything else runs on rules and whitespace.
   ========================================================================== */

/* hero ground: the City skyline from the Thames */



@media(max-width:820px){
  
  
}

#page-city-london .hero-copy{max-width:860px}
#page-city-london .hero-stats{max-width:720px}
#page-city-london h1.hero-h{font-size:clamp(48px,6.8vw,100px)}
@media(max-width:820px){#page-city-london .hero-copy, #page-city-london .hero-stats{max-width:100%}}

#page-city-london .crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
#page-city-london .crumb a{color:var(--blue-soft)}
#page-city-london .crumb a:hover{color:var(--yellow)}
#page-city-london .crumb i{color:var(--quiet);font-style:normal}
#page-city-london .crumb b{color:var(--white);font-weight:600}

#page-city-london .hero-sub{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,26px);font-weight:500;line-height:1.3;
  letter-spacing:.01em;color:rgba(255,255,255,.92);max-width:720px;margin:0 0 22px;
}
#page-city-london .hero-sub em{font-style:normal;color:var(--yellow);font-weight:600}
#page-city-london .hero-dist{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 22px;
}
/* the long-form intro: SEO and AI-answer copy, kept in full */
#page-city-london .hero-lead{
  font-size:13px;font-weight:300;line-height:1.75;color:var(--body);
  max-width:74ch;margin:0 0 28px;padding-top:20px;border-top:1px solid var(--line);
}
#page-city-london .hero-lead b{color:var(--white);font-weight:500}

/* ---------- shared section furniture ---------- */
#page-city-london .sec{padding-block:var(--pad-y)}
#page-city-london .sec-tint{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#page-city-london .sec-tint .inner{padding-block:var(--pad-y)}
#page-city-london .h2{font-size:clamp(30px,4.52vw,58px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;margin-bottom:18px}
#page-city-london .h2 span{color:var(--yellow)}
#page-city-london .lede{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:64ch;margin:0 0 38px}

/* three-up figures on rules */
#page-city-london .fig3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
#page-city-london .fig{padding-top:24px;border-top:1px solid var(--line)}
#page-city-london .fig:first-child{border-top:2px solid var(--yellow)}
#page-city-london .fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(53px,6.11vw,75px);font-weight:800;line-height:.92;
  color:var(--yellow);font-variant-numeric:tabular-nums;margin-bottom:12px;
}
#page-city-london .fig h3{font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:10px}
#page-city-london .fig p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:38ch}
@media(max-width:860px){
  #page-city-london .fig3{grid-template-columns:1fr}
  #page-city-london .fig{margin-top:26px}
  #page-city-london .fig:first-child{margin-top:0}
}

/* ---------- buildings: three-up cards with photography, as on the live site ---------- */
#page-city-london .blds{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#page-city-london .bld{
  border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;
  background:rgba(8,42,70,.84);display:flex;flex-direction:column;
  transition:border-color .25s, transform .25s;
}
#page-city-london .bld:hover{border-color:var(--blue);transform:translateY(-2px)}
#page-city-london .bld-visual{position:relative;aspect-ratio:4/3;overflow:hidden;background:rgba(8,42,70,.9)}
#page-city-london .bld-visual img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.86) saturate(.96);transition:transform .6s cubic-bezier(.22,1,.36,1),filter .4s;
}
#page-city-london .bld:hover .bld-visual img{transform:scale(1.045);filter:brightness(1) saturate(1)}
@media(prefers-reduced-motion:reduce){#page-city-london .bld-visual img{transition:none}#page-city-london .bld:hover .bld-visual img{transform:none}}
#page-city-london .bld-pin{
  position:absolute;top:14px;left:14px;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(5,30,51,.82);border:1px solid rgba(57,159,217,.42);border-radius:3px;
  padding:5px 11px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
}
#page-city-london .bld-pin i{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:none}
#page-city-london .bld-body{padding:24px clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1}
#page-city-london .bld-district{
  font-family:'Barlow Condensed',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-soft);margin-bottom:8px;
}
#page-city-london .bld-name{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1;margin-bottom:8px}
#page-city-london .bld-addr{font-size:13px;font-weight:300;line-height:1.45;color:var(--body);margin-bottom:20px}
#page-city-london .bld-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#page-city-london .bld-fig b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
#page-city-london .bld-fig span{display:block;font-size:13px;color:var(--blue-soft);margin-top:4px;line-height:1.3}
#page-city-london .bld-note{margin:18px 0 0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body)}
#page-city-london .bld-note b{color:var(--white);font-weight:600}
@media(max-width:1000px){#page-city-london .blds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){#page-city-london .blds{grid-template-columns:1fr}}

/* ---------- districts + schematic ---------- */
#page-city-london .dist-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,60px);align-items:stretch}
#page-city-london .dist-grid>div:first-child{display:flex;flex-direction:column}
#page-city-london .dist-grid > *{min-width:0}
/* districts: separate cards plus a summary table, as on the live site */
#page-city-london .dtable{display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
#page-city-london .dtable>.drow{flex:1 1 0}
#page-city-london .drow{
  padding:20px clamp(18px,2.2vw,24px);
  background:rgba(8,42,70,.84);border:1px solid var(--line-2);border-radius:var(--r-panel);
  transition:border-color .25s, transform .25s;
}
#page-city-london .drow:hover{border-color:var(--blue);transform:translateY(-2px)}
#page-city-london .drow[data-primary="1"]{border-bottom:3px solid var(--yellow)}
#page-city-london .drow-h{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline}
#page-city-london .drow-n{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1}
#page-city-london .drow-pc{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--blue-soft)}
#page-city-london .drow-d{font-size:13px;font-weight:300;color:var(--blue-soft);margin-top:6px;line-height:1.4}
#page-city-london .drow-figs{display:flex;gap:clamp(18px,2.6vw,34px);margin-top:14px}
#page-city-london .drow-figs div b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
#page-city-london .drow-figs div span{display:block;font-size:13px;color:var(--blue-soft);margin-top:3px}

/* network summary */

#page-city-london .schema{border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82)}
#page-city-london .schema-h{
  padding:16px 22px;border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);
}
#page-city-london .schema-b{padding:22px 18px 10px}
#page-city-london .schema-b svg{display:block;width:100%;height:auto}
#page-city-london .thames{fill:none;stroke:rgba(57,159,217,.42);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
#page-city-london .zone text{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;fill:#EAF1F8}
#page-city-london .zone tspan.sub{font-size:13px;font-weight:600;fill:#8CD2F5}
#page-city-london .schema-k{display:flex;gap:20px;flex-wrap:wrap;padding:0 22px 18px;font-size:13px;color:var(--quiet)}
#page-city-london .schema-k span{display:flex;align-items:center;gap:8px}
#page-city-london .schema-k i{width:10px;height:10px;border-radius:50%;flex:none}
#page-city-london .schema-k i.p{background:#F4E504}
#page-city-london .schema-k i.s{background:#399FD9}
#page-city-london .schema-note{padding:0 22px 20px;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}
@media(max-width:900px){#page-city-london .dist-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- square mile ---------- */
#page-city-london .sq-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
#page-city-london .sq-grid p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
#page-city-london .sq-grid p b{color:var(--white);font-weight:600}
#page-city-london .sq-stats{border-top:2px solid var(--yellow)}
#page-city-london .sq-stat{padding:20px 0;border-top:1px solid var(--line)}
#page-city-london .sq-stat:first-child{border-top:none}
#page-city-london .sq-stat b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:35px;font-weight:800;
  color:var(--white);line-height:1;margin-bottom:8px;
}
#page-city-london .sq-stat span{font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
@media(max-width:900px){#page-city-london .sq-grid{grid-template-columns:1fr}}

/* ---------- audience list ---------- */
#page-city-london .aud{margin-top:8px}
#page-city-london .aud div{padding:14px 0;border-top:1px solid var(--line);font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
#page-city-london .aud div:first-child{border-top:1px solid var(--line-2)}
#page-city-london .aud b{color:var(--white);font-weight:600}

/* ---------- pack planner: density matched to the live module ---------- */
#page-city-london .plan-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,2.4vw,28px);align-items:stretch}
#page-city-london .plan-side{display:flex;flex-direction:column;gap:16px;justify-content:space-between}
@media(max-width:1000px){#page-city-london .plan-grid{grid-template-columns:1fr}}

#page-city-london .planner{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.86);padding:clamp(20px,2.2vw,26px)}
#page-city-london .planner-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin:0 0 6px;
}
#page-city-london .planner h3{font-size:30px;font-weight:800;text-transform:uppercase;line-height:1;margin-bottom:16px}

#page-city-london .packs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
#page-city-london .packs button{
  cursor:pointer;padding:6px 11px;border-radius:3px;
  border:1px solid var(--line);background:rgba(57,159,217,.07);color:var(--body);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;transition:.15s;white-space:nowrap;
}
#page-city-london .packs button:hover{border-color:var(--blue);color:var(--white)}
#page-city-london .packs button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--navy)}

#page-city-london .pack-desc{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);margin:16px 0 18px}

#page-city-london .pack-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#page-city-london .pack-fig{border:1px solid var(--line);border-radius:4px;padding:12px 14px;background:rgba(4,18,30,.35)}
#page-city-london .pack-fig span{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-bottom:4px;
}
#page-city-london .pack-fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;
  color:var(--white);line-height:1;font-variant-numeric:tabular-nums;
}
#page-city-london .pack-fig.hero b{color:var(--yellow)}

#page-city-london .weeks{margin-top:14px;border:1px solid var(--line);border-radius:4px;padding:16px 16px 14px;background:rgba(4,18,30,.35)}
#page-city-london .weeks-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:10px}
#page-city-london .weeks-h p{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
#page-city-london .weeks-h b{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--white);font-variant-numeric:tabular-nums}
#page-city-london input[type=range]{width:100%;accent-color:#F4E504;height:18px;cursor:pointer;display:block}
#page-city-london .weeks-scale{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.08em;margin-top:2px}
#page-city-london .cpm{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
#page-city-london .cpm-l b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
#page-city-london .cpm-l span{font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.06em}
#page-city-london .cpm-v{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:var(--white);font-variant-numeric:tabular-nums;line-height:1}
#page-city-london .planner-foot{margin:14px 0 0;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}

/* side panels */
#page-city-london .pcard{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);padding:clamp(20px,2.2vw,26px)}
#page-city-london .pcard-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 8px;
}
#page-city-london .pcard h3{font-size:19px;font-weight:800;text-transform:uppercase;line-height:1.1;margin-bottom:12px}
#page-city-london .pcard-big{font-family:'Barlow Condensed',sans-serif;font-size:39px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
#page-city-london .pcard-cap{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:var(--blue-soft);margin:5px 0 14px}
#page-city-london .pcard p{margin:0 0 12px;font-size:13px;font-weight:300;line-height:1.6;color:var(--body)}
#page-city-london .pcard p b{color:var(--white);font-weight:600}
#page-city-london .pcard-src{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.08em;color:var(--quiet);margin:0 0 12px}
#page-city-london .pcard-link{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  color:var(--blue-soft);border-bottom:1px solid rgba(140,210,245,.35);
}
#page-city-london .pcard-link:hover{color:var(--yellow);border-color:rgba(244,229,4,.5)}
#page-city-london .pcard .btn{width:100%;text-align:center;margin-top:6px}

/* ---------- FAQ ---------- */
#page-city-london .faq-list{display:grid;gap:0;max-width:80ch}
#page-city-london .faq-item{border-top:1px solid var(--line)}
#page-city-london .faq-item:first-child{border-top:2px solid var(--yellow)}
#page-city-london .faq-q{
  width:100%;text-align:left;cursor:pointer;background:transparent;border:none;
  padding:20px 34px 20px 0;position:relative;
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;
  text-transform:uppercase;color:var(--white);line-height:1.15;
}
#page-city-london .faq-q::after{content:'+';position:absolute;right:4px;top:18px;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:600;color:var(--blue)}
#page-city-london .faq-item[data-open="1"] .faq-q::after{content:'\2212'}
#page-city-london .faq-a{padding:0 0 22px;font-size:13px;font-weight:300;line-height:1.65;color:var(--body);max-width:70ch}

/* ---------- ambient ---------- */
#page-city-london .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  
  background-size:cover;background-position:58% 46%;
}
#page-city-london .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(95deg,
      rgba(5,30,51,.98) 0%,
      rgba(5,30,51,.93) 26%,
      rgba(5,30,51,.66) 44%,
      rgba(5,30,51,.26) 64%,
      rgba(5,30,51,.08) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
#page-city-london .concept-bar, #page-city-london .drawer, #page-city-london .hero, #page-city-london section, #page-city-london footer{position:relative;z-index:1}
@media(max-width:820px){
  #page-city-london .page-bg{background-position:58% 44%}
  #page-city-london .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}


/* ===== converted-page components ===== */

/* ==========================================================================
   LONDON LOCATION PAGE
   Same tokens, same seven changes. Three things are genuinely panels and
   keep a container: the building list, the district schematic, the pack
   planner. Everything else runs on rules and whitespace.
   ========================================================================== */

/* hero ground: the City skyline from the Thames */



@media(max-width:820px){
  
  
}

.citypage .hero-copy{max-width:860px}
.citypage .hero-stats{max-width:720px}
.citypage h1.hero-h{font-size:clamp(48px,6.8vw,100px)}
@media(max-width:820px){.citypage .hero-copy, .citypage .hero-stats{max-width:100%}}

.citypage .crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.citypage .crumb a{color:var(--blue-soft)}
.citypage .crumb a:hover{color:var(--yellow)}
.citypage .crumb i{color:var(--quiet);font-style:normal}
.citypage .crumb b{color:var(--white);font-weight:600}

.citypage .hero-sub{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,26px);font-weight:500;line-height:1.3;
  letter-spacing:.01em;color:rgba(255,255,255,.92);max-width:720px;margin:0 0 22px;
}
.citypage .hero-sub em{font-style:normal;color:var(--yellow);font-weight:600}
.citypage .hero-dist{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 22px;
}
/* the long-form intro: SEO and AI-answer copy, kept in full */
.citypage .hero-lead{
  font-size:13px;font-weight:300;line-height:1.75;color:var(--body);
  max-width:74ch;margin:0 0 28px;padding-top:20px;border-top:1px solid var(--line);
}
.citypage .hero-lead b{color:var(--white);font-weight:500}

/* ---------- shared section furniture ---------- */
.citypage .sec{padding-block:var(--pad-y)}
.citypage .sec-tint{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.citypage .sec-tint .inner{padding-block:var(--pad-y)}
.citypage .h2{font-size:clamp(30px,4.52vw,58px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;margin-bottom:18px}
.citypage .h2 span{color:var(--yellow)}
.citypage .lede{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:64ch;margin:0 0 38px}

/* three-up figures on rules */
.citypage .fig3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
.citypage .fig{padding-top:24px;border-top:1px solid var(--line)}
.citypage .fig:first-child{border-top:2px solid var(--yellow)}
.citypage .fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(53px,6.11vw,75px);font-weight:800;line-height:.92;
  color:var(--yellow);font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.citypage .fig h3{font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:10px}
.citypage .fig p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:38ch}
@media(max-width:860px){
  .citypage .fig3{grid-template-columns:1fr}
  .citypage .fig{margin-top:26px}
  .citypage .fig:first-child{margin-top:0}
}

/* ---------- buildings: three-up cards with photography, as on the live site ---------- */
.citypage .blds{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.citypage .bld{
  border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;
  background:rgba(8,42,70,.84);display:flex;flex-direction:column;
  transition:border-color .25s, transform .25s;
}
.citypage .bld:hover{border-color:var(--blue);transform:translateY(-2px)}
.citypage .bld-visual{position:relative;aspect-ratio:4/3;overflow:hidden;background:rgba(8,42,70,.9)}
.citypage .bld-visual img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.86) saturate(.96);transition:transform .6s cubic-bezier(.22,1,.36,1),filter .4s;
}
.citypage .bld:hover .bld-visual img{transform:scale(1.045);filter:brightness(1) saturate(1)}
@media(prefers-reduced-motion:reduce){.citypage .bld-visual img{transition:none}.citypage .bld:hover .bld-visual img{transform:none}}
.citypage .bld-pin{
  position:absolute;top:14px;left:14px;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(5,30,51,.82);border:1px solid rgba(57,159,217,.42);border-radius:3px;
  padding:5px 11px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
}
.citypage .bld-pin i{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:none}
.citypage .bld-body{padding:24px clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1}
.citypage .bld-district{
  font-family:'Barlow Condensed',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-soft);margin-bottom:8px;
}
.citypage .bld-name{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1;margin-bottom:8px}
.citypage .bld-addr{font-size:13px;font-weight:300;line-height:1.45;color:var(--body);margin-bottom:20px}
.citypage .bld-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.citypage .bld-fig b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.citypage .bld-fig span{display:block;font-size:13px;color:var(--blue-soft);margin-top:4px;line-height:1.3}
.citypage .bld-note{margin:18px 0 0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body)}
.citypage .bld-note b{color:var(--white);font-weight:600}
@media(max-width:1000px){.citypage .blds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.citypage .blds{grid-template-columns:1fr}}

/* ---------- districts + schematic ---------- */
.citypage .dist-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,60px);align-items:stretch}
.citypage .dist-grid>div:first-child{display:flex;flex-direction:column}
.citypage .dist-grid > *{min-width:0}
/* districts: separate cards plus a summary table, as on the live site */
.citypage .dtable{display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.citypage .dtable>.drow{flex:1 1 0}
.citypage .drow{
  padding:20px clamp(18px,2.2vw,24px);
  background:rgba(8,42,70,.84);border:1px solid var(--line-2);border-radius:var(--r-panel);
  transition:border-color .25s, transform .25s;
}
.citypage .drow:hover{border-color:var(--blue);transform:translateY(-2px)}
.citypage .drow[data-primary="1"]{border-bottom:3px solid var(--yellow)}
.citypage .drow-h{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline}
.citypage .drow-n{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1}
.citypage .drow-pc{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--blue-soft)}
.citypage .drow-d{font-size:13px;font-weight:300;color:var(--blue-soft);margin-top:6px;line-height:1.4}
.citypage .drow-figs{display:flex;gap:clamp(18px,2.6vw,34px);margin-top:14px}
.citypage .drow-figs div b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.citypage .drow-figs div span{display:block;font-size:13px;color:var(--blue-soft);margin-top:3px}

/* network summary */

.citypage .schema{border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82)}
.citypage .schema-h{
  padding:16px 22px;border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);
}
.citypage .schema-b{padding:22px 18px 10px}
.citypage .schema-b svg{display:block;width:100%;height:auto}
.citypage .thames{fill:none;stroke:rgba(57,159,217,.42);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.citypage .zone text{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;fill:#EAF1F8}
.citypage .zone tspan.sub{font-size:13px;font-weight:600;fill:#8CD2F5}
.citypage .schema-k{display:flex;gap:20px;flex-wrap:wrap;padding:0 22px 18px;font-size:13px;color:var(--quiet)}
.citypage .schema-k span{display:flex;align-items:center;gap:8px}
.citypage .schema-k i{width:10px;height:10px;border-radius:50%;flex:none}
.citypage .schema-k i.p{background:#F4E504}
.citypage .schema-k i.s{background:#399FD9}
.citypage .schema-note{padding:0 22px 20px;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}
@media(max-width:900px){.citypage .dist-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- square mile ---------- */
.citypage .sq-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
.citypage .sq-grid p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.citypage .sq-grid p b{color:var(--white);font-weight:600}
.citypage .sq-stats{border-top:2px solid var(--yellow)}
.citypage .sq-stat{padding:20px 0;border-top:1px solid var(--line)}
.citypage .sq-stat:first-child{border-top:none}
.citypage .sq-stat b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:35px;font-weight:800;
  color:var(--white);line-height:1;margin-bottom:8px;
}
.citypage .sq-stat span{font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
@media(max-width:900px){.citypage .sq-grid{grid-template-columns:1fr}}

/* ---------- audience list ---------- */
.citypage .aud{margin-top:8px}
.citypage .aud div{padding:14px 0;border-top:1px solid var(--line);font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
.citypage .aud div:first-child{border-top:1px solid var(--line-2)}
.citypage .aud b{color:var(--white);font-weight:600}

/* ---------- pack planner: density matched to the live module ---------- */
.citypage .plan-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,2.4vw,28px);align-items:stretch}
.citypage .plan-side{display:flex;flex-direction:column;gap:16px;justify-content:space-between}
@media(max-width:1000px){.citypage .plan-grid{grid-template-columns:1fr}}

.citypage .planner{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.86);padding:clamp(20px,2.2vw,26px)}
.citypage .planner-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin:0 0 6px;
}
.citypage .planner h3{font-size:30px;font-weight:800;text-transform:uppercase;line-height:1;margin-bottom:16px}

.citypage .packs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.citypage .packs button{
  cursor:pointer;padding:6px 11px;border-radius:3px;
  border:1px solid var(--line);background:rgba(57,159,217,.07);color:var(--body);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;transition:.15s;white-space:nowrap;
}
.citypage .packs button:hover{border-color:var(--blue);color:var(--white)}
.citypage .packs button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--navy)}

.citypage .pack-desc{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);margin:16px 0 18px}

.citypage .pack-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.citypage .pack-fig{border:1px solid var(--line);border-radius:4px;padding:12px 14px;background:rgba(4,18,30,.35)}
.citypage .pack-fig span{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-bottom:4px;
}
.citypage .pack-fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;
  color:var(--white);line-height:1;font-variant-numeric:tabular-nums;
}
.citypage .pack-fig.hero b{color:var(--yellow)}

.citypage .weeks{margin-top:14px;border:1px solid var(--line);border-radius:4px;padding:16px 16px 14px;background:rgba(4,18,30,.35)}
.citypage .weeks-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:10px}
.citypage .weeks-h p{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.citypage .weeks-h b{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--white);font-variant-numeric:tabular-nums}
.citypage input[type=range]{width:100%;accent-color:#F4E504;height:18px;cursor:pointer;display:block}
.citypage .weeks-scale{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.08em;margin-top:2px}
.citypage .cpm{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.citypage .cpm-l b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.citypage .cpm-l span{font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.06em}
.citypage .cpm-v{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:var(--white);font-variant-numeric:tabular-nums;line-height:1}
.citypage .planner-foot{margin:14px 0 0;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}

/* side panels */
.citypage .pcard{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);padding:clamp(20px,2.2vw,26px)}
.citypage .pcard-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 8px;
}
.citypage .pcard h3{font-size:19px;font-weight:800;text-transform:uppercase;line-height:1.1;margin-bottom:12px}
.citypage .pcard-big{font-family:'Barlow Condensed',sans-serif;font-size:39px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.citypage .pcard-cap{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:var(--blue-soft);margin:5px 0 14px}
.citypage .pcard p{margin:0 0 12px;font-size:13px;font-weight:300;line-height:1.6;color:var(--body)}
.citypage .pcard p b{color:var(--white);font-weight:600}
.citypage .pcard-src{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.08em;color:var(--quiet);margin:0 0 12px}
.citypage .pcard-link{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  color:var(--blue-soft);border-bottom:1px solid rgba(140,210,245,.35);
}
.citypage .pcard-link:hover{color:var(--yellow);border-color:rgba(244,229,4,.5)}
.citypage .pcard .btn{width:100%;text-align:center;margin-top:6px}

/* ---------- FAQ ---------- */
.citypage .faq-list{display:grid;gap:0;max-width:80ch}
.citypage .faq-item{border-top:1px solid var(--line)}
.citypage .faq-item:first-child{border-top:2px solid var(--yellow)}
.citypage .faq-q{
  width:100%;text-align:left;cursor:pointer;background:transparent;border:none;
  padding:20px 34px 20px 0;position:relative;
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;
  text-transform:uppercase;color:var(--white);line-height:1.15;
}
.citypage .faq-q::after{content:'+';position:absolute;right:4px;top:18px;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:600;color:var(--blue)}
.citypage .faq-item[data-open="1"] .faq-q::after{content:'\2212'}
.citypage .faq-a{padding:0 0 22px;font-size:13px;font-weight:300;line-height:1.65;color:var(--body);max-width:70ch}

/* ---------- ambient ---------- */
.citypage .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:58% 46%;
  /* the daylight city photography carries a lift so it reads as a photograph
     rather than a grey ground; the wash above is set against this value */
  filter:brightness(var(--lift,1.30)) saturate(1.06);
}
.citypage .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    /* The approved London page is dark behind its copy column and opens up to
       the right, where only figures and panels sit. The flat wash used here
       before kept the same average brightness but spread it evenly, which put
       body copy on a lighter ground than London's and made it harder to read.
       This restores London's shape at the same overall brightness.

       Measured for body copy over the Paris ground, left to right across the
       copy column: London 10.8:1 down to 6.8:1, this 11.1:1 down to 6.7:1.
       The two sections that run prose across the full width carry the tinted
       ground, which holds their right-hand column near 5.5:1. */
    linear-gradient(95deg,
      rgba(5,30,51,var(--w1,.96)) 0%,
      rgba(5,30,51,var(--w2,.90)) 26%,
      rgba(5,30,51,var(--w3,.74)) 46%,
      rgba(5,30,51,var(--w4,.52)) 66%,
      rgba(5,30,51,var(--w5,.40)) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
.citypage .concept-bar, .citypage .drawer, .citypage .hero, .citypage section, .citypage footer{position:relative;z-index:1}
@media(max-width:820px){
  .citypage .page-bg{background-position:58% 44%}
  .citypage .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}


/* ==========================================================================
   CITY PAGES · components the London mock did not need
   Written in the same idiom as the block above: same tokens, same rhythm,
   no new colours and no new type scale.
   ========================================================================== */

/* the city photograph is supplied per page on .page-bg, so no rule here */

.citypage .h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(22px,2.4vw,32px);font-weight:800;text-transform:uppercase;
  line-height:1.02;letter-spacing:-0.01em;color:var(--white);margin:0 0 14px;
}
.citypage .h3 span{color:var(--yellow)}

.citypage .prose p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.citypage .prose p:last-child{margin-bottom:0}
.citypage .prose p b{color:var(--white);font-weight:600}
.citypage .prose .aud{margin-top:26px}

/* zone cards: the same panel as a district row, laid out across the page */
.citypage .zones{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.citypage .zones .drow-figs{margin-top:12px}
.citypage .zones .drow-d{margin-top:14px}

/* the pack ribbon above the building cards */
.citypage .ribbon{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);
  padding:22px clamp(18px,2.2vw,28px);margin-bottom:clamp(32px,4vw,48px);
}
.citypage .ribbon .planner-eye{margin-bottom:4px}
.citypage .ribbon-t{
  margin:0;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,24px);font-weight:700;color:var(--white);
  line-height:1.2;max-width:62ch;
}

.citypage .more{margin:30px 0 0}

/* a word-valued figure (an anchor sector, say) sets smaller so the four cells
   in a building card stay on one line, as they do on the live card */
.citypage .bld-fig-word b{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}


/* ==========================================================================
   LONDON LOCATION PAGE
   Same tokens, same seven changes. Three things are genuinely panels and
   keep a container: the building list, the district schematic, the pack
   planner. Everything else runs on rules and whitespace.
   ========================================================================== */

/* hero ground: the City skyline from the Thames */



@media(max-width:820px){
  
  
}

.contactpage .hero-copy{max-width:860px}
.contactpage .hero-stats{max-width:720px}
.contactpage h1.hero-h{font-size:clamp(48px,6.8vw,100px)}
@media(max-width:820px){.contactpage .hero-copy, .contactpage .hero-stats{max-width:100%}}

.contactpage .crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.contactpage .crumb a{color:var(--blue-soft)}
.contactpage .crumb a:hover{color:var(--yellow)}
.contactpage .crumb i{color:var(--quiet);font-style:normal}
.contactpage .crumb b{color:var(--white);font-weight:600}

.contactpage .hero-sub{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,26px);font-weight:500;line-height:1.3;
  letter-spacing:.01em;color:rgba(255,255,255,.92);max-width:720px;margin:0 0 22px;
}
.contactpage .hero-sub em{font-style:normal;color:var(--yellow);font-weight:600}
.contactpage .hero-dist{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 22px;
}
/* the long-form intro: SEO and AI-answer copy, kept in full */
.contactpage .hero-lead{
  font-size:13px;font-weight:300;line-height:1.75;color:var(--body);
  max-width:74ch;margin:0 0 28px;padding-top:20px;border-top:1px solid var(--line);
}
.contactpage .hero-lead b{color:var(--white);font-weight:500}

/* ---------- shared section furniture ---------- */
.contactpage .sec{padding-block:var(--pad-y)}
.contactpage .sec-tint{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contactpage .sec-tint .inner{padding-block:var(--pad-y)}
.contactpage .h2{font-size:clamp(30px,4.52vw,58px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;margin-bottom:18px}
.contactpage .h2 span{color:var(--yellow)}
.contactpage .lede{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:64ch;margin:0 0 38px}

/* three-up figures on rules */
.contactpage .fig3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
.contactpage .fig{padding-top:24px;border-top:1px solid var(--line)}
.contactpage .fig:first-child{border-top:2px solid var(--yellow)}
.contactpage .fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(53px,6.11vw,75px);font-weight:800;line-height:.92;
  color:var(--yellow);font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.contactpage .fig h3{font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:10px}
.contactpage .fig p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:38ch}
@media(max-width:860px){
  .contactpage .fig3{grid-template-columns:1fr}
  .contactpage .fig{margin-top:26px}
  .contactpage .fig:first-child{margin-top:0}
}

/* ---------- buildings: three-up cards with photography, as on the live site ---------- */
.contactpage .blds{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.contactpage .bld{
  border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;
  background:rgba(8,42,70,.84);display:flex;flex-direction:column;
  transition:border-color .25s, transform .25s;
}
.contactpage .bld:hover{border-color:var(--blue);transform:translateY(-2px)}
.contactpage .bld-visual{position:relative;aspect-ratio:4/3;overflow:hidden;background:rgba(8,42,70,.9)}
.contactpage .bld-visual img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.86) saturate(.96);transition:transform .6s cubic-bezier(.22,1,.36,1),filter .4s;
}
.contactpage .bld:hover .bld-visual img{transform:scale(1.045);filter:brightness(1) saturate(1)}
@media(prefers-reduced-motion:reduce){.contactpage .bld-visual img{transition:none}.contactpage .bld:hover .bld-visual img{transform:none}}
.contactpage .bld-pin{
  position:absolute;top:14px;left:14px;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(5,30,51,.82);border:1px solid rgba(57,159,217,.42);border-radius:3px;
  padding:5px 11px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
}
.contactpage .bld-pin i{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:none}
.contactpage .bld-body{padding:24px clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1}
.contactpage .bld-district{
  font-family:'Barlow Condensed',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-soft);margin-bottom:8px;
}
.contactpage .bld-name{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1;margin-bottom:8px}
.contactpage .bld-addr{font-size:13px;font-weight:300;line-height:1.45;color:var(--body);margin-bottom:20px}
.contactpage .bld-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contactpage .bld-fig b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.contactpage .bld-fig span{display:block;font-size:13px;color:var(--blue-soft);margin-top:4px;line-height:1.3}
.contactpage .bld-note{margin:18px 0 0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body)}
.contactpage .bld-note b{color:var(--white);font-weight:600}
@media(max-width:1000px){.contactpage .blds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.contactpage .blds{grid-template-columns:1fr}}

/* ---------- districts + schematic ---------- */
.contactpage .dist-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,60px);align-items:stretch}
.contactpage .dist-grid>div:first-child{display:flex;flex-direction:column}
.contactpage .dist-grid > *{min-width:0}
/* districts: separate cards plus a summary table, as on the live site */
.contactpage .dtable{display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.contactpage .dtable>.drow{flex:1 1 0}
.contactpage .drow{
  padding:20px clamp(18px,2.2vw,24px);
  background:rgba(8,42,70,.84);border:1px solid var(--line-2);border-radius:var(--r-panel);
  transition:border-color .25s, transform .25s;
}
.contactpage .drow:hover{border-color:var(--blue);transform:translateY(-2px)}
.contactpage .drow[data-primary="1"]{border-bottom:3px solid var(--yellow)}
.contactpage .drow-h{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline}
.contactpage .drow-n{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1}
.contactpage .drow-pc{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--blue-soft)}
.contactpage .drow-d{font-size:13px;font-weight:300;color:var(--blue-soft);margin-top:6px;line-height:1.4}
.contactpage .drow-figs{display:flex;gap:clamp(18px,2.6vw,34px);margin-top:14px}
.contactpage .drow-figs div b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.contactpage .drow-figs div span{display:block;font-size:13px;color:var(--blue-soft);margin-top:3px}

/* network summary */

.contactpage .schema{border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82)}
.contactpage .schema-h{
  padding:16px 22px;border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);
}
.contactpage .schema-b{padding:22px 18px 10px}
.contactpage .schema-b svg{display:block;width:100%;height:auto}
.contactpage .thames{fill:none;stroke:rgba(57,159,217,.42);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.contactpage .zone text{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;fill:#EAF1F8}
.contactpage .zone tspan.sub{font-size:13px;font-weight:600;fill:#8CD2F5}
.contactpage .schema-k{display:flex;gap:20px;flex-wrap:wrap;padding:0 22px 18px;font-size:13px;color:var(--quiet)}
.contactpage .schema-k span{display:flex;align-items:center;gap:8px}
.contactpage .schema-k i{width:10px;height:10px;border-radius:50%;flex:none}
.contactpage .schema-k i.p{background:#F4E504}
.contactpage .schema-k i.s{background:#399FD9}
.contactpage .schema-note{padding:0 22px 20px;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}
@media(max-width:900px){.contactpage .dist-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- square mile ---------- */
.contactpage .sq-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
.contactpage .sq-grid p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.contactpage .sq-grid p b{color:var(--white);font-weight:600}
.contactpage .sq-stats{border-top:2px solid var(--yellow)}
.contactpage .sq-stat{padding:20px 0;border-top:1px solid var(--line)}
.contactpage .sq-stat:first-child{border-top:none}
.contactpage .sq-stat b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:35px;font-weight:800;
  color:var(--white);line-height:1;margin-bottom:8px;
}
.contactpage .sq-stat span{font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
@media(max-width:900px){.contactpage .sq-grid{grid-template-columns:1fr}}

/* ---------- audience list ---------- */
.contactpage .aud{margin-top:8px}
.contactpage .aud div{padding:14px 0;border-top:1px solid var(--line);font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
.contactpage .aud div:first-child{border-top:1px solid var(--line-2)}
.contactpage .aud b{color:var(--white);font-weight:600}

/* ---------- pack planner: density matched to the live module ---------- */
.contactpage .plan-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,2.4vw,28px);align-items:stretch}
.contactpage .plan-side{display:flex;flex-direction:column;gap:16px;justify-content:space-between}
@media(max-width:1000px){.contactpage .plan-grid{grid-template-columns:1fr}}

.contactpage .planner{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.86);padding:clamp(20px,2.2vw,26px)}
.contactpage .planner-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin:0 0 6px;
}
.contactpage .planner h3{font-size:30px;font-weight:800;text-transform:uppercase;line-height:1;margin-bottom:16px}

.contactpage .packs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.contactpage .packs button{
  cursor:pointer;padding:6px 11px;border-radius:3px;
  border:1px solid var(--line);background:rgba(57,159,217,.07);color:var(--body);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;transition:.15s;white-space:nowrap;
}
.contactpage .packs button:hover{border-color:var(--blue);color:var(--white)}
.contactpage .packs button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--navy)}

.contactpage .pack-desc{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);margin:16px 0 18px}

.contactpage .pack-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.contactpage .pack-fig{border:1px solid var(--line);border-radius:4px;padding:12px 14px;background:rgba(4,18,30,.35)}
.contactpage .pack-fig span{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-bottom:4px;
}
.contactpage .pack-fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;
  color:var(--white);line-height:1;font-variant-numeric:tabular-nums;
}
.contactpage .pack-fig.hero b{color:var(--yellow)}

.contactpage .weeks{margin-top:14px;border:1px solid var(--line);border-radius:4px;padding:16px 16px 14px;background:rgba(4,18,30,.35)}
.contactpage .weeks-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:10px}
.contactpage .weeks-h p{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.contactpage .weeks-h b{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--white);font-variant-numeric:tabular-nums}
.contactpage input[type=range]{width:100%;accent-color:#F4E504;height:18px;cursor:pointer;display:block}
.contactpage .weeks-scale{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.08em;margin-top:2px}
.contactpage .cpm{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.contactpage .cpm-l b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.contactpage .cpm-l span{font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.06em}
.contactpage .cpm-v{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:var(--white);font-variant-numeric:tabular-nums;line-height:1}
.contactpage .planner-foot{margin:14px 0 0;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}

/* side panels */
.contactpage .pcard{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);padding:clamp(20px,2.2vw,26px)}
.contactpage .pcard-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 8px;
}
.contactpage .pcard h3{font-size:19px;font-weight:800;text-transform:uppercase;line-height:1.1;margin-bottom:12px}
.contactpage .pcard-big{font-family:'Barlow Condensed',sans-serif;font-size:39px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.contactpage .pcard-cap{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:var(--blue-soft);margin:5px 0 14px}
.contactpage .pcard p{margin:0 0 12px;font-size:13px;font-weight:300;line-height:1.6;color:var(--body)}
.contactpage .pcard p b{color:var(--white);font-weight:600}
.contactpage .pcard-src{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.08em;color:var(--quiet);margin:0 0 12px}
.contactpage .pcard-link{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  color:var(--blue-soft);border-bottom:1px solid rgba(140,210,245,.35);
}
.contactpage .pcard-link:hover{color:var(--yellow);border-color:rgba(244,229,4,.5)}
.contactpage .pcard .btn{width:100%;text-align:center;margin-top:6px}

/* ---------- FAQ ---------- */
.contactpage .faq-list{display:grid;gap:0;max-width:80ch}
.contactpage .faq-item{border-top:1px solid var(--line)}
.contactpage .faq-item:first-child{border-top:2px solid var(--yellow)}
.contactpage .faq-q{
  width:100%;text-align:left;cursor:pointer;background:transparent;border:none;
  padding:20px 34px 20px 0;position:relative;
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;
  text-transform:uppercase;color:var(--white);line-height:1.15;
}
.contactpage .faq-q::after{content:'+';position:absolute;right:4px;top:18px;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:600;color:var(--blue)}
.contactpage .faq-item[data-open="1"] .faq-q::after{content:'\2212'}
.contactpage .faq-a{padding:0 0 22px;font-size:13px;font-weight:300;line-height:1.65;color:var(--body);max-width:70ch}

/* ---------- ambient ---------- */
.contactpage .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:58% 46%;
  /* the daylight city photography carries a lift so it reads as a photograph
     rather than a grey ground; the wash above is set against this value */
  filter:brightness(var(--lift,1.30)) saturate(1.06);
}
.contactpage .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    /* The approved London page is dark behind its copy column and opens up to
       the right, where only figures and panels sit. The flat wash used here
       before kept the same average brightness but spread it evenly, which put
       body copy on a lighter ground than London's and made it harder to read.
       This restores London's shape at the same overall brightness.

       Measured for body copy over the Paris ground, left to right across the
       copy column: London 10.8:1 down to 6.8:1, this 11.1:1 down to 6.7:1.
       The two sections that run prose across the full width carry the tinted
       ground, which holds their right-hand column near 5.5:1. */
    linear-gradient(95deg,
      rgba(5,30,51,var(--w1,.96)) 0%,
      rgba(5,30,51,var(--w2,.90)) 26%,
      rgba(5,30,51,var(--w3,.74)) 46%,
      rgba(5,30,51,var(--w4,.52)) 66%,
      rgba(5,30,51,var(--w5,.40)) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
.contactpage .concept-bar, .contactpage .drawer, .contactpage .hero, .contactpage section, .contactpage footer{position:relative;z-index:1}
@media(max-width:820px){
  .contactpage .page-bg{background-position:58% 44%}
  .contactpage .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}


/* ==========================================================================
   CITY PAGES · components the London mock did not need
   Written in the same idiom as the block above: same tokens, same rhythm,
   no new colours and no new type scale.
   ========================================================================== */

/* the city photograph is supplied per page on .page-bg, so no rule here */

.contactpage .h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(22px,2.4vw,32px);font-weight:800;text-transform:uppercase;
  line-height:1.02;letter-spacing:-0.01em;color:var(--white);margin:0 0 14px;
}
.contactpage .h3 span{color:var(--yellow)}

.contactpage .prose p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.contactpage .prose p:last-child{margin-bottom:0}
.contactpage .prose p b{color:var(--white);font-weight:600}
.contactpage .prose .aud{margin-top:26px}

/* zone cards: the same panel as a district row, laid out across the page */
.contactpage .zones{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.contactpage .zones .drow-figs{margin-top:12px}
.contactpage .zones .drow-d{margin-top:14px}

/* the pack ribbon above the building cards */
.contactpage .ribbon{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);
  padding:22px clamp(18px,2.2vw,28px);margin-bottom:clamp(32px,4vw,48px);
}
.contactpage .ribbon .planner-eye{margin-bottom:4px}
.contactpage .ribbon-t{
  margin:0;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,24px);font-weight:700;color:var(--white);
  line-height:1.2;max-width:62ch;
}

.contactpage .more{margin:30px 0 0}

/* a word-valued figure (an anchor sector, say) sets smaller so the four cells
   in a building card stay on one line, as they do on the live card */
.contactpage .bld-fig-word b{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}


/* ==========================================================================
   LONDON LOCATION PAGE
   Same tokens, same seven changes. Three things are genuinely panels and
   keep a container: the building list, the district schematic, the pack
   planner. Everything else runs on rules and whitespace.
   ========================================================================== */

/* hero ground: the City skyline from the Thames */



@media(max-width:820px){
  
  
}

.signagepage .hero-copy{max-width:860px}
.signagepage .hero-stats{max-width:720px}
.signagepage h1.hero-h{font-size:clamp(48px,6.8vw,100px)}
@media(max-width:820px){.signagepage .hero-copy, .signagepage .hero-stats{max-width:100%}}

.signagepage .crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.signagepage .crumb a{color:var(--blue-soft)}
.signagepage .crumb a:hover{color:var(--yellow)}
.signagepage .crumb i{color:var(--quiet);font-style:normal}
.signagepage .crumb b{color:var(--white);font-weight:600}

.signagepage .hero-sub{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,26px);font-weight:500;line-height:1.3;
  letter-spacing:.01em;color:rgba(255,255,255,.92);max-width:720px;margin:0 0 22px;
}
.signagepage .hero-sub em{font-style:normal;color:var(--yellow);font-weight:600}
.signagepage .hero-dist{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 22px;
}
/* the long-form intro: SEO and AI-answer copy, kept in full */
.signagepage .hero-lead{
  font-size:13px;font-weight:300;line-height:1.75;color:var(--body);
  max-width:74ch;margin:0 0 28px;padding-top:20px;border-top:1px solid var(--line);
}
.signagepage .hero-lead b{color:var(--white);font-weight:500}

/* ---------- shared section furniture ---------- */
.signagepage .sec{padding-block:var(--pad-y)}
.signagepage .sec-tint{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.signagepage .sec-tint .inner{padding-block:var(--pad-y)}
.signagepage .h2{font-size:clamp(30px,4.52vw,58px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;margin-bottom:18px}
.signagepage .h2 span{color:var(--yellow)}
.signagepage .lede{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:64ch;margin:0 0 38px}

/* three-up figures on rules */
.signagepage .fig3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
.signagepage .fig{padding-top:24px;border-top:1px solid var(--line)}
.signagepage .fig:first-child{border-top:2px solid var(--yellow)}
.signagepage .fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(53px,6.11vw,75px);font-weight:800;line-height:.92;
  color:var(--yellow);font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.signagepage .fig h3{font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:10px}
.signagepage .fig p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:38ch}
@media(max-width:860px){
  .signagepage .fig3{grid-template-columns:1fr}
  .signagepage .fig{margin-top:26px}
  .signagepage .fig:first-child{margin-top:0}
}

/* ---------- buildings: three-up cards with photography, as on the live site ---------- */
.signagepage .blds{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.signagepage .bld{
  border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;
  background:rgba(8,42,70,.84);display:flex;flex-direction:column;
  transition:border-color .25s, transform .25s;
}
.signagepage .bld:hover{border-color:var(--blue);transform:translateY(-2px)}
.signagepage .bld-visual{position:relative;aspect-ratio:4/3;overflow:hidden;background:rgba(8,42,70,.9)}
.signagepage .bld-visual img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.86) saturate(.96);transition:transform .6s cubic-bezier(.22,1,.36,1),filter .4s;
}
.signagepage .bld:hover .bld-visual img{transform:scale(1.045);filter:brightness(1) saturate(1)}
@media(prefers-reduced-motion:reduce){.signagepage .bld-visual img{transition:none}.signagepage .bld:hover .bld-visual img{transform:none}}
.signagepage .bld-pin{
  position:absolute;top:14px;left:14px;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(5,30,51,.82);border:1px solid rgba(57,159,217,.42);border-radius:3px;
  padding:5px 11px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
}
.signagepage .bld-pin i{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:none}
.signagepage .bld-body{padding:24px clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1}
.signagepage .bld-district{
  font-family:'Barlow Condensed',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-soft);margin-bottom:8px;
}
.signagepage .bld-name{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1;margin-bottom:8px}
.signagepage .bld-addr{font-size:13px;font-weight:300;line-height:1.45;color:var(--body);margin-bottom:20px}
.signagepage .bld-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.signagepage .bld-fig b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.signagepage .bld-fig span{display:block;font-size:13px;color:var(--blue-soft);margin-top:4px;line-height:1.3}
.signagepage .bld-note{margin:18px 0 0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body)}
.signagepage .bld-note b{color:var(--white);font-weight:600}
@media(max-width:1000px){.signagepage .blds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.signagepage .blds{grid-template-columns:1fr}}

/* ---------- districts + schematic ---------- */
.signagepage .dist-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,60px);align-items:stretch}
.signagepage .dist-grid>div:first-child{display:flex;flex-direction:column}
.signagepage .dist-grid > *{min-width:0}
/* districts: separate cards plus a summary table, as on the live site */
.signagepage .dtable{display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.signagepage .dtable>.drow{flex:1 1 0}
.signagepage .drow{
  padding:20px clamp(18px,2.2vw,24px);
  background:rgba(8,42,70,.84);border:1px solid var(--line-2);border-radius:var(--r-panel);
  transition:border-color .25s, transform .25s;
}
.signagepage .drow:hover{border-color:var(--blue);transform:translateY(-2px)}
.signagepage .drow[data-primary="1"]{border-bottom:3px solid var(--yellow)}
.signagepage .drow-h{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline}
.signagepage .drow-n{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1}
.signagepage .drow-pc{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--blue-soft)}
.signagepage .drow-d{font-size:13px;font-weight:300;color:var(--blue-soft);margin-top:6px;line-height:1.4}
.signagepage .drow-figs{display:flex;gap:clamp(18px,2.6vw,34px);margin-top:14px}
.signagepage .drow-figs div b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.signagepage .drow-figs div span{display:block;font-size:13px;color:var(--blue-soft);margin-top:3px}

/* network summary */

.signagepage .schema{border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82)}
.signagepage .schema-h{
  padding:16px 22px;border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);
}
.signagepage .schema-b{padding:22px 18px 10px}
.signagepage .schema-b svg{display:block;width:100%;height:auto}
.signagepage .thames{fill:none;stroke:rgba(57,159,217,.42);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.signagepage .zone text{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;fill:#EAF1F8}
.signagepage .zone tspan.sub{font-size:13px;font-weight:600;fill:#8CD2F5}
.signagepage .schema-k{display:flex;gap:20px;flex-wrap:wrap;padding:0 22px 18px;font-size:13px;color:var(--quiet)}
.signagepage .schema-k span{display:flex;align-items:center;gap:8px}
.signagepage .schema-k i{width:10px;height:10px;border-radius:50%;flex:none}
.signagepage .schema-k i.p{background:#F4E504}
.signagepage .schema-k i.s{background:#399FD9}
.signagepage .schema-note{padding:0 22px 20px;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}
@media(max-width:900px){.signagepage .dist-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- square mile ---------- */
.signagepage .sq-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
.signagepage .sq-grid p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.signagepage .sq-grid p b{color:var(--white);font-weight:600}
.signagepage .sq-stats{border-top:2px solid var(--yellow)}
.signagepage .sq-stat{padding:20px 0;border-top:1px solid var(--line)}
.signagepage .sq-stat:first-child{border-top:none}
.signagepage .sq-stat b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:35px;font-weight:800;
  color:var(--white);line-height:1;margin-bottom:8px;
}
.signagepage .sq-stat span{font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
@media(max-width:900px){.signagepage .sq-grid{grid-template-columns:1fr}}

/* ---------- audience list ---------- */
.signagepage .aud{margin-top:8px}
.signagepage .aud div{padding:14px 0;border-top:1px solid var(--line);font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
.signagepage .aud div:first-child{border-top:1px solid var(--line-2)}
.signagepage .aud b{color:var(--white);font-weight:600}

/* ---------- pack planner: density matched to the live module ---------- */
.signagepage .plan-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,2.4vw,28px);align-items:stretch}
.signagepage .plan-side{display:flex;flex-direction:column;gap:16px;justify-content:space-between}
@media(max-width:1000px){.signagepage .plan-grid{grid-template-columns:1fr}}

.signagepage .planner{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.86);padding:clamp(20px,2.2vw,26px)}
.signagepage .planner-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin:0 0 6px;
}
.signagepage .planner h3{font-size:30px;font-weight:800;text-transform:uppercase;line-height:1;margin-bottom:16px}

.signagepage .packs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.signagepage .packs button{
  cursor:pointer;padding:6px 11px;border-radius:3px;
  border:1px solid var(--line);background:rgba(57,159,217,.07);color:var(--body);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;transition:.15s;white-space:nowrap;
}
.signagepage .packs button:hover{border-color:var(--blue);color:var(--white)}
.signagepage .packs button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--navy)}

.signagepage .pack-desc{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);margin:16px 0 18px}

.signagepage .pack-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.signagepage .pack-fig{border:1px solid var(--line);border-radius:4px;padding:12px 14px;background:rgba(4,18,30,.35)}
.signagepage .pack-fig span{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-bottom:4px;
}
.signagepage .pack-fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;
  color:var(--white);line-height:1;font-variant-numeric:tabular-nums;
}
.signagepage .pack-fig.hero b{color:var(--yellow)}

.signagepage .weeks{margin-top:14px;border:1px solid var(--line);border-radius:4px;padding:16px 16px 14px;background:rgba(4,18,30,.35)}
.signagepage .weeks-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:10px}
.signagepage .weeks-h p{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.signagepage .weeks-h b{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--white);font-variant-numeric:tabular-nums}
.signagepage input[type=range]{width:100%;accent-color:#F4E504;height:18px;cursor:pointer;display:block}
.signagepage .weeks-scale{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.08em;margin-top:2px}
.signagepage .cpm{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.signagepage .cpm-l b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.signagepage .cpm-l span{font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.06em}
.signagepage .cpm-v{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:var(--white);font-variant-numeric:tabular-nums;line-height:1}
.signagepage .planner-foot{margin:14px 0 0;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}

/* side panels */
.signagepage .pcard{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);padding:clamp(20px,2.2vw,26px)}
.signagepage .pcard-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 8px;
}
.signagepage .pcard h3{font-size:19px;font-weight:800;text-transform:uppercase;line-height:1.1;margin-bottom:12px}
.signagepage .pcard-big{font-family:'Barlow Condensed',sans-serif;font-size:39px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.signagepage .pcard-cap{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:var(--blue-soft);margin:5px 0 14px}
.signagepage .pcard p{margin:0 0 12px;font-size:13px;font-weight:300;line-height:1.6;color:var(--body)}
.signagepage .pcard p b{color:var(--white);font-weight:600}
.signagepage .pcard-src{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.08em;color:var(--quiet);margin:0 0 12px}
.signagepage .pcard-link{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  color:var(--blue-soft);border-bottom:1px solid rgba(140,210,245,.35);
}
.signagepage .pcard-link:hover{color:var(--yellow);border-color:rgba(244,229,4,.5)}
.signagepage .pcard .btn{width:100%;text-align:center;margin-top:6px}

/* ---------- FAQ ---------- */
.signagepage .faq-list{display:grid;gap:0;max-width:80ch}
.signagepage .faq-item{border-top:1px solid var(--line)}
.signagepage .faq-item:first-child{border-top:2px solid var(--yellow)}
.signagepage .faq-q{
  width:100%;text-align:left;cursor:pointer;background:transparent;border:none;
  padding:20px 34px 20px 0;position:relative;
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;
  text-transform:uppercase;color:var(--white);line-height:1.15;
}
.signagepage .faq-q::after{content:'+';position:absolute;right:4px;top:18px;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:600;color:var(--blue)}
.signagepage .faq-item[data-open="1"] .faq-q::after{content:'\2212'}
.signagepage .faq-a{padding:0 0 22px;font-size:13px;font-weight:300;line-height:1.65;color:var(--body);max-width:70ch}

/* ---------- ambient ---------- */
.signagepage .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:58% 46%;
  /* the daylight city photography carries a lift so it reads as a photograph
     rather than a grey ground; the wash above is set against this value */
  filter:brightness(var(--lift,1.30)) saturate(1.06);
}
.signagepage .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    /* The approved London page is dark behind its copy column and opens up to
       the right, where only figures and panels sit. The flat wash used here
       before kept the same average brightness but spread it evenly, which put
       body copy on a lighter ground than London's and made it harder to read.
       This restores London's shape at the same overall brightness.

       Measured for body copy over the Paris ground, left to right across the
       copy column: London 10.8:1 down to 6.8:1, this 11.1:1 down to 6.7:1.
       The two sections that run prose across the full width carry the tinted
       ground, which holds their right-hand column near 5.5:1. */
    linear-gradient(95deg,
      rgba(5,30,51,var(--w1,.96)) 0%,
      rgba(5,30,51,var(--w2,.90)) 26%,
      rgba(5,30,51,var(--w3,.74)) 46%,
      rgba(5,30,51,var(--w4,.52)) 66%,
      rgba(5,30,51,var(--w5,.40)) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
.signagepage .concept-bar, .signagepage .drawer, .signagepage .hero, .signagepage section, .signagepage footer{position:relative;z-index:1}
@media(max-width:820px){
  .signagepage .page-bg{background-position:58% 44%}
  .signagepage .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}


/* ==========================================================================
   CITY PAGES · components the London mock did not need
   Written in the same idiom as the block above: same tokens, same rhythm,
   no new colours and no new type scale.
   ========================================================================== */

/* the city photograph is supplied per page on .page-bg, so no rule here */

.signagepage .h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(22px,2.4vw,32px);font-weight:800;text-transform:uppercase;
  line-height:1.02;letter-spacing:-0.01em;color:var(--white);margin:0 0 14px;
}
.signagepage .h3 span{color:var(--yellow)}

.signagepage .prose p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.signagepage .prose p:last-child{margin-bottom:0}
.signagepage .prose p b{color:var(--white);font-weight:600}
.signagepage .prose .aud{margin-top:26px}

/* zone cards: the same panel as a district row, laid out across the page */
.signagepage .zones{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.signagepage .zones .drow-figs{margin-top:12px}
.signagepage .zones .drow-d{margin-top:14px}

/* the pack ribbon above the building cards */
.signagepage .ribbon{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);
  padding:22px clamp(18px,2.2vw,28px);margin-bottom:clamp(32px,4vw,48px);
}
.signagepage .ribbon .planner-eye{margin-bottom:4px}
.signagepage .ribbon-t{
  margin:0;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,24px);font-weight:700;color:var(--white);
  line-height:1.2;max-width:62ch;
}

.signagepage .more{margin:30px 0 0}

/* a word-valued figure (an anchor sector, say) sets smaller so the four cells
   in a building card stay on one line, as they do on the live card */
.signagepage .bld-fig-word b{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}


/* ==========================================================================
   LONDON LOCATION PAGE
   Same tokens, same seven changes. Three things are genuinely panels and
   keep a container: the building list, the district schematic, the pack
   planner. Everything else runs on rules and whitespace.
   ========================================================================== */

/* hero ground: the City skyline from the Thames */



@media(max-width:820px){
  
  
}

.knowledgepage .hero-copy{max-width:860px}
.knowledgepage .hero-stats{max-width:720px}
.knowledgepage h1.hero-h{font-size:clamp(48px,6.8vw,100px)}
@media(max-width:820px){.knowledgepage .hero-copy, .knowledgepage .hero-stats{max-width:100%}}

.knowledgepage .crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.knowledgepage .crumb a{color:var(--blue-soft)}
.knowledgepage .crumb a:hover{color:var(--yellow)}
.knowledgepage .crumb i{color:var(--quiet);font-style:normal}
.knowledgepage .crumb b{color:var(--white);font-weight:600}

.knowledgepage .hero-sub{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,26px);font-weight:500;line-height:1.3;
  letter-spacing:.01em;color:rgba(255,255,255,.92);max-width:720px;margin:0 0 22px;
}
.knowledgepage .hero-sub em{font-style:normal;color:var(--yellow);font-weight:600}
.knowledgepage .hero-dist{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 22px;
}
/* the long-form intro: SEO and AI-answer copy, kept in full */
.knowledgepage .hero-lead{
  font-size:13px;font-weight:300;line-height:1.75;color:var(--body);
  max-width:74ch;margin:0 0 28px;padding-top:20px;border-top:1px solid var(--line);
}
.knowledgepage .hero-lead b{color:var(--white);font-weight:500}

/* ---------- shared section furniture ---------- */
.knowledgepage .sec{padding-block:var(--pad-y)}
.knowledgepage .sec-tint{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.knowledgepage .sec-tint .inner{padding-block:var(--pad-y)}
.knowledgepage .h2{font-size:clamp(30px,4.52vw,58px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;margin-bottom:18px}
.knowledgepage .h2 span{color:var(--yellow)}
.knowledgepage .lede{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:64ch;margin:0 0 38px}

/* three-up figures on rules */
.knowledgepage .fig3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
.knowledgepage .fig{padding-top:24px;border-top:1px solid var(--line)}
.knowledgepage .fig:first-child{border-top:2px solid var(--yellow)}
.knowledgepage .fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(53px,6.11vw,75px);font-weight:800;line-height:.92;
  color:var(--yellow);font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.knowledgepage .fig h3{font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:10px}
.knowledgepage .fig p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:38ch}
@media(max-width:860px){
  .knowledgepage .fig3{grid-template-columns:1fr}
  .knowledgepage .fig{margin-top:26px}
  .knowledgepage .fig:first-child{margin-top:0}
}

/* ---------- buildings: three-up cards with photography, as on the live site ---------- */
.knowledgepage .blds{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.knowledgepage .bld{
  border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;
  background:rgba(8,42,70,.84);display:flex;flex-direction:column;
  transition:border-color .25s, transform .25s;
}
.knowledgepage .bld:hover{border-color:var(--blue);transform:translateY(-2px)}
.knowledgepage .bld-visual{position:relative;aspect-ratio:4/3;overflow:hidden;background:rgba(8,42,70,.9)}
.knowledgepage .bld-visual img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.86) saturate(.96);transition:transform .6s cubic-bezier(.22,1,.36,1),filter .4s;
}
.knowledgepage .bld:hover .bld-visual img{transform:scale(1.045);filter:brightness(1) saturate(1)}
@media(prefers-reduced-motion:reduce){.knowledgepage .bld-visual img{transition:none}.knowledgepage .bld:hover .bld-visual img{transform:none}}
.knowledgepage .bld-pin{
  position:absolute;top:14px;left:14px;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(5,30,51,.82);border:1px solid rgba(57,159,217,.42);border-radius:3px;
  padding:5px 11px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
}
.knowledgepage .bld-pin i{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:none}
.knowledgepage .bld-body{padding:24px clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1}
.knowledgepage .bld-district{
  font-family:'Barlow Condensed',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-soft);margin-bottom:8px;
}
.knowledgepage .bld-name{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1;margin-bottom:8px}
.knowledgepage .bld-addr{font-size:13px;font-weight:300;line-height:1.45;color:var(--body);margin-bottom:20px}
.knowledgepage .bld-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.knowledgepage .bld-fig b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.knowledgepage .bld-fig span{display:block;font-size:13px;color:var(--blue-soft);margin-top:4px;line-height:1.3}
.knowledgepage .bld-note{margin:18px 0 0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body)}
.knowledgepage .bld-note b{color:var(--white);font-weight:600}
@media(max-width:1000px){.knowledgepage .blds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.knowledgepage .blds{grid-template-columns:1fr}}

/* ---------- districts + schematic ---------- */
.knowledgepage .dist-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,60px);align-items:stretch}
.knowledgepage .dist-grid>div:first-child{display:flex;flex-direction:column}
.knowledgepage .dist-grid > *{min-width:0}
/* districts: separate cards plus a summary table, as on the live site */
.knowledgepage .dtable{display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.knowledgepage .dtable>.drow{flex:1 1 0}
.knowledgepage .drow{
  padding:20px clamp(18px,2.2vw,24px);
  background:rgba(8,42,70,.84);border:1px solid var(--line-2);border-radius:var(--r-panel);
  transition:border-color .25s, transform .25s;
}
.knowledgepage .drow:hover{border-color:var(--blue);transform:translateY(-2px)}
.knowledgepage .drow[data-primary="1"]{border-bottom:3px solid var(--yellow)}
.knowledgepage .drow-h{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline}
.knowledgepage .drow-n{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1}
.knowledgepage .drow-pc{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--blue-soft)}
.knowledgepage .drow-d{font-size:13px;font-weight:300;color:var(--blue-soft);margin-top:6px;line-height:1.4}
.knowledgepage .drow-figs{display:flex;gap:clamp(18px,2.6vw,34px);margin-top:14px}
.knowledgepage .drow-figs div b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.knowledgepage .drow-figs div span{display:block;font-size:13px;color:var(--blue-soft);margin-top:3px}

/* network summary */

.knowledgepage .schema{border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82)}
.knowledgepage .schema-h{
  padding:16px 22px;border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);
}
.knowledgepage .schema-b{padding:22px 18px 10px}
.knowledgepage .schema-b svg{display:block;width:100%;height:auto}
.knowledgepage .thames{fill:none;stroke:rgba(57,159,217,.42);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.knowledgepage .zone text{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;fill:#EAF1F8}
.knowledgepage .zone tspan.sub{font-size:13px;font-weight:600;fill:#8CD2F5}
.knowledgepage .schema-k{display:flex;gap:20px;flex-wrap:wrap;padding:0 22px 18px;font-size:13px;color:var(--quiet)}
.knowledgepage .schema-k span{display:flex;align-items:center;gap:8px}
.knowledgepage .schema-k i{width:10px;height:10px;border-radius:50%;flex:none}
.knowledgepage .schema-k i.p{background:#F4E504}
.knowledgepage .schema-k i.s{background:#399FD9}
.knowledgepage .schema-note{padding:0 22px 20px;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}
@media(max-width:900px){.knowledgepage .dist-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- square mile ---------- */
.knowledgepage .sq-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
.knowledgepage .sq-grid p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.knowledgepage .sq-grid p b{color:var(--white);font-weight:600}
.knowledgepage .sq-stats{border-top:2px solid var(--yellow)}
.knowledgepage .sq-stat{padding:20px 0;border-top:1px solid var(--line)}
.knowledgepage .sq-stat:first-child{border-top:none}
.knowledgepage .sq-stat b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:35px;font-weight:800;
  color:var(--white);line-height:1;margin-bottom:8px;
}
.knowledgepage .sq-stat span{font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
@media(max-width:900px){.knowledgepage .sq-grid{grid-template-columns:1fr}}

/* ---------- audience list ---------- */
.knowledgepage .aud{margin-top:8px}
.knowledgepage .aud div{padding:14px 0;border-top:1px solid var(--line);font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
.knowledgepage .aud div:first-child{border-top:1px solid var(--line-2)}
.knowledgepage .aud b{color:var(--white);font-weight:600}

/* ---------- pack planner: density matched to the live module ---------- */
.knowledgepage .plan-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,2.4vw,28px);align-items:stretch}
.knowledgepage .plan-side{display:flex;flex-direction:column;gap:16px;justify-content:space-between}
@media(max-width:1000px){.knowledgepage .plan-grid{grid-template-columns:1fr}}

.knowledgepage .planner{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.86);padding:clamp(20px,2.2vw,26px)}
.knowledgepage .planner-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin:0 0 6px;
}
.knowledgepage .planner h3{font-size:30px;font-weight:800;text-transform:uppercase;line-height:1;margin-bottom:16px}

.knowledgepage .packs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.knowledgepage .packs button{
  cursor:pointer;padding:6px 11px;border-radius:3px;
  border:1px solid var(--line);background:rgba(57,159,217,.07);color:var(--body);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;transition:.15s;white-space:nowrap;
}
.knowledgepage .packs button:hover{border-color:var(--blue);color:var(--white)}
.knowledgepage .packs button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--navy)}

.knowledgepage .pack-desc{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);margin:16px 0 18px}

.knowledgepage .pack-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.knowledgepage .pack-fig{border:1px solid var(--line);border-radius:4px;padding:12px 14px;background:rgba(4,18,30,.35)}
.knowledgepage .pack-fig span{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-bottom:4px;
}
.knowledgepage .pack-fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;
  color:var(--white);line-height:1;font-variant-numeric:tabular-nums;
}
.knowledgepage .pack-fig.hero b{color:var(--yellow)}

.knowledgepage .weeks{margin-top:14px;border:1px solid var(--line);border-radius:4px;padding:16px 16px 14px;background:rgba(4,18,30,.35)}
.knowledgepage .weeks-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:10px}
.knowledgepage .weeks-h p{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.knowledgepage .weeks-h b{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--white);font-variant-numeric:tabular-nums}
.knowledgepage input[type=range]{width:100%;accent-color:#F4E504;height:18px;cursor:pointer;display:block}
.knowledgepage .weeks-scale{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.08em;margin-top:2px}
.knowledgepage .cpm{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.knowledgepage .cpm-l b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.knowledgepage .cpm-l span{font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.06em}
.knowledgepage .cpm-v{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:var(--white);font-variant-numeric:tabular-nums;line-height:1}
.knowledgepage .planner-foot{margin:14px 0 0;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}

/* side panels */
.knowledgepage .pcard{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);padding:clamp(20px,2.2vw,26px)}
.knowledgepage .pcard-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 8px;
}
.knowledgepage .pcard h3{font-size:19px;font-weight:800;text-transform:uppercase;line-height:1.1;margin-bottom:12px}
.knowledgepage .pcard-big{font-family:'Barlow Condensed',sans-serif;font-size:39px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.knowledgepage .pcard-cap{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:var(--blue-soft);margin:5px 0 14px}
.knowledgepage .pcard p{margin:0 0 12px;font-size:13px;font-weight:300;line-height:1.6;color:var(--body)}
.knowledgepage .pcard p b{color:var(--white);font-weight:600}
.knowledgepage .pcard-src{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.08em;color:var(--quiet);margin:0 0 12px}
.knowledgepage .pcard-link{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  color:var(--blue-soft);border-bottom:1px solid rgba(140,210,245,.35);
}
.knowledgepage .pcard-link:hover{color:var(--yellow);border-color:rgba(244,229,4,.5)}
.knowledgepage .pcard .btn{width:100%;text-align:center;margin-top:6px}

/* ---------- FAQ ---------- */
.knowledgepage .faq-list{display:grid;gap:0;max-width:80ch}
.knowledgepage .faq-item{border-top:1px solid var(--line)}
.knowledgepage .faq-item:first-child{border-top:2px solid var(--yellow)}
.knowledgepage .faq-q{
  width:100%;text-align:left;cursor:pointer;background:transparent;border:none;
  padding:20px 34px 20px 0;position:relative;
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;
  text-transform:uppercase;color:var(--white);line-height:1.15;
}
.knowledgepage .faq-q::after{content:'+';position:absolute;right:4px;top:18px;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:600;color:var(--blue)}
.knowledgepage .faq-item[data-open="1"] .faq-q::after{content:'\2212'}
.knowledgepage .faq-a{padding:0 0 22px;font-size:13px;font-weight:300;line-height:1.65;color:var(--body);max-width:70ch}

/* ---------- ambient ---------- */
.knowledgepage .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:58% 46%;
  /* the daylight city photography carries a lift so it reads as a photograph
     rather than a grey ground; the wash above is set against this value */
  filter:brightness(var(--lift,1.30)) saturate(1.06);
}
.knowledgepage .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    /* The approved London page is dark behind its copy column and opens up to
       the right, where only figures and panels sit. The flat wash used here
       before kept the same average brightness but spread it evenly, which put
       body copy on a lighter ground than London's and made it harder to read.
       This restores London's shape at the same overall brightness.

       Measured for body copy over the Paris ground, left to right across the
       copy column: London 10.8:1 down to 6.8:1, this 11.1:1 down to 6.7:1.
       The two sections that run prose across the full width carry the tinted
       ground, which holds their right-hand column near 5.5:1. */
    linear-gradient(95deg,
      rgba(5,30,51,var(--w1,.96)) 0%,
      rgba(5,30,51,var(--w2,.90)) 26%,
      rgba(5,30,51,var(--w3,.74)) 46%,
      rgba(5,30,51,var(--w4,.52)) 66%,
      rgba(5,30,51,var(--w5,.40)) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
.knowledgepage .concept-bar, .knowledgepage .drawer, .knowledgepage .hero, .knowledgepage section, .knowledgepage footer{position:relative;z-index:1}
@media(max-width:820px){
  .knowledgepage .page-bg{background-position:58% 44%}
  .knowledgepage .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}


/* ==========================================================================
   CITY PAGES · components the London mock did not need
   Written in the same idiom as the block above: same tokens, same rhythm,
   no new colours and no new type scale.
   ========================================================================== */

/* the city photograph is supplied per page on .page-bg, so no rule here */

.knowledgepage .h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(22px,2.4vw,32px);font-weight:800;text-transform:uppercase;
  line-height:1.02;letter-spacing:-0.01em;color:var(--white);margin:0 0 14px;
}
.knowledgepage .h3 span{color:var(--yellow)}

.knowledgepage .prose p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.knowledgepage .prose p:last-child{margin-bottom:0}
.knowledgepage .prose p b{color:var(--white);font-weight:600}
.knowledgepage .prose .aud{margin-top:26px}

/* zone cards: the same panel as a district row, laid out across the page */
.knowledgepage .zones{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.knowledgepage .zones .drow-figs{margin-top:12px}
.knowledgepage .zones .drow-d{margin-top:14px}

/* the pack ribbon above the building cards */
.knowledgepage .ribbon{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);
  padding:22px clamp(18px,2.2vw,28px);margin-bottom:clamp(32px,4vw,48px);
}
.knowledgepage .ribbon .planner-eye{margin-bottom:4px}
.knowledgepage .ribbon-t{
  margin:0;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,24px);font-weight:700;color:var(--white);
  line-height:1.2;max-width:62ch;
}

.knowledgepage .more{margin:30px 0 0}

/* a word-valued figure (an anchor sector, say) sets smaller so the four cells
   in a building card stay on one line, as they do on the live card */
.knowledgepage .bld-fig-word b{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}


/* ==========================================================================
   LONDON LOCATION PAGE
   Same tokens, same seven changes. Three things are genuinely panels and
   keep a container: the building list, the district schematic, the pack
   planner. Everything else runs on rules and whitespace.
   ========================================================================== */

/* hero ground: the City skyline from the Thames */



@media(max-width:820px){
  
  
}

.aboutpage .hero-copy{max-width:860px}
.aboutpage .hero-stats{max-width:720px}
.aboutpage h1.hero-h{font-size:clamp(48px,6.8vw,100px)}
@media(max-width:820px){.aboutpage .hero-copy, .aboutpage .hero-stats{max-width:100%}}

.aboutpage .crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.aboutpage .crumb a{color:var(--blue-soft)}
.aboutpage .crumb a:hover{color:var(--yellow)}
.aboutpage .crumb i{color:var(--quiet);font-style:normal}
.aboutpage .crumb b{color:var(--white);font-weight:600}

.aboutpage .hero-sub{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,26px);font-weight:500;line-height:1.3;
  letter-spacing:.01em;color:rgba(255,255,255,.92);max-width:720px;margin:0 0 22px;
}
.aboutpage .hero-sub em{font-style:normal;color:var(--yellow);font-weight:600}
.aboutpage .hero-dist{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 22px;
}
/* the long-form intro: SEO and AI-answer copy, kept in full */
.aboutpage .hero-lead{
  font-size:13px;font-weight:300;line-height:1.75;color:var(--body);
  max-width:74ch;margin:0 0 28px;padding-top:20px;border-top:1px solid var(--line);
}
.aboutpage .hero-lead b{color:var(--white);font-weight:500}

/* ---------- shared section furniture ---------- */
.aboutpage .sec{padding-block:var(--pad-y)}
.aboutpage .sec-tint{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.aboutpage .sec-tint .inner{padding-block:var(--pad-y)}
.aboutpage .h2{font-size:clamp(30px,4.52vw,58px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;margin-bottom:18px}
.aboutpage .h2 span{color:var(--yellow)}
.aboutpage .lede{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:64ch;margin:0 0 38px}

/* three-up figures on rules */
.aboutpage .fig3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
.aboutpage .fig{padding-top:24px;border-top:1px solid var(--line)}
.aboutpage .fig:first-child{border-top:2px solid var(--yellow)}
.aboutpage .fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(53px,6.11vw,75px);font-weight:800;line-height:.92;
  color:var(--yellow);font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.aboutpage .fig h3{font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:10px}
.aboutpage .fig p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:38ch}
@media(max-width:860px){
  .aboutpage .fig3{grid-template-columns:1fr}
  .aboutpage .fig{margin-top:26px}
  .aboutpage .fig:first-child{margin-top:0}
}

/* ---------- buildings: three-up cards with photography, as on the live site ---------- */
.aboutpage .blds{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.aboutpage .bld{
  border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;
  background:rgba(8,42,70,.84);display:flex;flex-direction:column;
  transition:border-color .25s, transform .25s;
}
.aboutpage .bld:hover{border-color:var(--blue);transform:translateY(-2px)}
.aboutpage .bld-visual{position:relative;aspect-ratio:4/3;overflow:hidden;background:rgba(8,42,70,.9)}
.aboutpage .bld-visual img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.86) saturate(.96);transition:transform .6s cubic-bezier(.22,1,.36,1),filter .4s;
}
.aboutpage .bld:hover .bld-visual img{transform:scale(1.045);filter:brightness(1) saturate(1)}
@media(prefers-reduced-motion:reduce){.aboutpage .bld-visual img{transition:none}.aboutpage .bld:hover .bld-visual img{transform:none}}
.aboutpage .bld-pin{
  position:absolute;top:14px;left:14px;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(5,30,51,.82);border:1px solid rgba(57,159,217,.42);border-radius:3px;
  padding:5px 11px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
}
.aboutpage .bld-pin i{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:none}
.aboutpage .bld-body{padding:24px clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1}
.aboutpage .bld-district{
  font-family:'Barlow Condensed',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-soft);margin-bottom:8px;
}
.aboutpage .bld-name{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1;margin-bottom:8px}
.aboutpage .bld-addr{font-size:13px;font-weight:300;line-height:1.45;color:var(--body);margin-bottom:20px}
.aboutpage .bld-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.aboutpage .bld-fig b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.aboutpage .bld-fig span{display:block;font-size:13px;color:var(--blue-soft);margin-top:4px;line-height:1.3}
.aboutpage .bld-note{margin:18px 0 0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body)}
.aboutpage .bld-note b{color:var(--white);font-weight:600}
@media(max-width:1000px){.aboutpage .blds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.aboutpage .blds{grid-template-columns:1fr}}

/* ---------- districts + schematic ---------- */
.aboutpage .dist-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,60px);align-items:stretch}
.aboutpage .dist-grid>div:first-child{display:flex;flex-direction:column}
.aboutpage .dist-grid > *{min-width:0}
/* districts: separate cards plus a summary table, as on the live site */
.aboutpage .dtable{display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.aboutpage .dtable>.drow{flex:1 1 0}
.aboutpage .drow{
  padding:20px clamp(18px,2.2vw,24px);
  background:rgba(8,42,70,.84);border:1px solid var(--line-2);border-radius:var(--r-panel);
  transition:border-color .25s, transform .25s;
}
.aboutpage .drow:hover{border-color:var(--blue);transform:translateY(-2px)}
.aboutpage .drow[data-primary="1"]{border-bottom:3px solid var(--yellow)}
.aboutpage .drow-h{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline}
.aboutpage .drow-n{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1}
.aboutpage .drow-pc{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--blue-soft)}
.aboutpage .drow-d{font-size:13px;font-weight:300;color:var(--blue-soft);margin-top:6px;line-height:1.4}
.aboutpage .drow-figs{display:flex;gap:clamp(18px,2.6vw,34px);margin-top:14px}
.aboutpage .drow-figs div b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.aboutpage .drow-figs div span{display:block;font-size:13px;color:var(--blue-soft);margin-top:3px}

/* network summary */

.aboutpage .schema{border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82)}
.aboutpage .schema-h{
  padding:16px 22px;border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);
}
.aboutpage .schema-b{padding:22px 18px 10px}
.aboutpage .schema-b svg{display:block;width:100%;height:auto}
.aboutpage .thames{fill:none;stroke:rgba(57,159,217,.42);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.aboutpage .zone text{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;fill:#EAF1F8}
.aboutpage .zone tspan.sub{font-size:13px;font-weight:600;fill:#8CD2F5}
.aboutpage .schema-k{display:flex;gap:20px;flex-wrap:wrap;padding:0 22px 18px;font-size:13px;color:var(--quiet)}
.aboutpage .schema-k span{display:flex;align-items:center;gap:8px}
.aboutpage .schema-k i{width:10px;height:10px;border-radius:50%;flex:none}
.aboutpage .schema-k i.p{background:#F4E504}
.aboutpage .schema-k i.s{background:#399FD9}
.aboutpage .schema-note{padding:0 22px 20px;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}
@media(max-width:900px){.aboutpage .dist-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- square mile ---------- */
.aboutpage .sq-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
.aboutpage .sq-grid p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.aboutpage .sq-grid p b{color:var(--white);font-weight:600}
.aboutpage .sq-stats{border-top:2px solid var(--yellow)}
.aboutpage .sq-stat{padding:20px 0;border-top:1px solid var(--line)}
.aboutpage .sq-stat:first-child{border-top:none}
.aboutpage .sq-stat b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:35px;font-weight:800;
  color:var(--white);line-height:1;margin-bottom:8px;
}
.aboutpage .sq-stat span{font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
@media(max-width:900px){.aboutpage .sq-grid{grid-template-columns:1fr}}

/* ---------- audience list ---------- */
.aboutpage .aud{margin-top:8px}
.aboutpage .aud div{padding:14px 0;border-top:1px solid var(--line);font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
.aboutpage .aud div:first-child{border-top:1px solid var(--line-2)}
.aboutpage .aud b{color:var(--white);font-weight:600}

/* ---------- pack planner: density matched to the live module ---------- */
.aboutpage .plan-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,2.4vw,28px);align-items:stretch}
.aboutpage .plan-side{display:flex;flex-direction:column;gap:16px;justify-content:space-between}
@media(max-width:1000px){.aboutpage .plan-grid{grid-template-columns:1fr}}

.aboutpage .planner{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.86);padding:clamp(20px,2.2vw,26px)}
.aboutpage .planner-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin:0 0 6px;
}
.aboutpage .planner h3{font-size:30px;font-weight:800;text-transform:uppercase;line-height:1;margin-bottom:16px}

.aboutpage .packs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.aboutpage .packs button{
  cursor:pointer;padding:6px 11px;border-radius:3px;
  border:1px solid var(--line);background:rgba(57,159,217,.07);color:var(--body);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;transition:.15s;white-space:nowrap;
}
.aboutpage .packs button:hover{border-color:var(--blue);color:var(--white)}
.aboutpage .packs button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--navy)}

.aboutpage .pack-desc{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);margin:16px 0 18px}

.aboutpage .pack-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.aboutpage .pack-fig{border:1px solid var(--line);border-radius:4px;padding:12px 14px;background:rgba(4,18,30,.35)}
.aboutpage .pack-fig span{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-bottom:4px;
}
.aboutpage .pack-fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;
  color:var(--white);line-height:1;font-variant-numeric:tabular-nums;
}
.aboutpage .pack-fig.hero b{color:var(--yellow)}

.aboutpage .weeks{margin-top:14px;border:1px solid var(--line);border-radius:4px;padding:16px 16px 14px;background:rgba(4,18,30,.35)}
.aboutpage .weeks-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:10px}
.aboutpage .weeks-h p{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.aboutpage .weeks-h b{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--white);font-variant-numeric:tabular-nums}
.aboutpage input[type=range]{width:100%;accent-color:#F4E504;height:18px;cursor:pointer;display:block}
.aboutpage .weeks-scale{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.08em;margin-top:2px}
.aboutpage .cpm{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.aboutpage .cpm-l b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.aboutpage .cpm-l span{font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.06em}
.aboutpage .cpm-v{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:var(--white);font-variant-numeric:tabular-nums;line-height:1}
.aboutpage .planner-foot{margin:14px 0 0;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}

/* side panels */
.aboutpage .pcard{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);padding:clamp(20px,2.2vw,26px)}
.aboutpage .pcard-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 8px;
}
.aboutpage .pcard h3{font-size:19px;font-weight:800;text-transform:uppercase;line-height:1.1;margin-bottom:12px}
.aboutpage .pcard-big{font-family:'Barlow Condensed',sans-serif;font-size:39px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.aboutpage .pcard-cap{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:var(--blue-soft);margin:5px 0 14px}
.aboutpage .pcard p{margin:0 0 12px;font-size:13px;font-weight:300;line-height:1.6;color:var(--body)}
.aboutpage .pcard p b{color:var(--white);font-weight:600}
.aboutpage .pcard-src{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.08em;color:var(--quiet);margin:0 0 12px}
.aboutpage .pcard-link{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  color:var(--blue-soft);border-bottom:1px solid rgba(140,210,245,.35);
}
.aboutpage .pcard-link:hover{color:var(--yellow);border-color:rgba(244,229,4,.5)}
.aboutpage .pcard .btn{width:100%;text-align:center;margin-top:6px}

/* ---------- FAQ ---------- */
.aboutpage .faq-list{display:grid;gap:0;max-width:80ch}
.aboutpage .faq-item{border-top:1px solid var(--line)}
.aboutpage .faq-item:first-child{border-top:2px solid var(--yellow)}
.aboutpage .faq-q{
  width:100%;text-align:left;cursor:pointer;background:transparent;border:none;
  padding:20px 34px 20px 0;position:relative;
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;
  text-transform:uppercase;color:var(--white);line-height:1.15;
}
.aboutpage .faq-q::after{content:'+';position:absolute;right:4px;top:18px;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:600;color:var(--blue)}
.aboutpage .faq-item[data-open="1"] .faq-q::after{content:'\2212'}
.aboutpage .faq-a{padding:0 0 22px;font-size:13px;font-weight:300;line-height:1.65;color:var(--body);max-width:70ch}

/* ---------- ambient ---------- */
.aboutpage .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:58% 46%;
  /* the daylight city photography carries a lift so it reads as a photograph
     rather than a grey ground; the wash above is set against this value */
  filter:brightness(var(--lift,1.30)) saturate(1.06);
}
.aboutpage .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    /* The approved London page is dark behind its copy column and opens up to
       the right, where only figures and panels sit. The flat wash used here
       before kept the same average brightness but spread it evenly, which put
       body copy on a lighter ground than London's and made it harder to read.
       This restores London's shape at the same overall brightness.

       Measured for body copy over the Paris ground, left to right across the
       copy column: London 10.8:1 down to 6.8:1, this 11.1:1 down to 6.7:1.
       The two sections that run prose across the full width carry the tinted
       ground, which holds their right-hand column near 5.5:1. */
    linear-gradient(95deg,
      rgba(5,30,51,var(--w1,.96)) 0%,
      rgba(5,30,51,var(--w2,.90)) 26%,
      rgba(5,30,51,var(--w3,.74)) 46%,
      rgba(5,30,51,var(--w4,.52)) 66%,
      rgba(5,30,51,var(--w5,.40)) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
.aboutpage .concept-bar, .aboutpage .drawer, .aboutpage .hero, .aboutpage section, .aboutpage footer{position:relative;z-index:1}
@media(max-width:820px){
  .aboutpage .page-bg{background-position:58% 44%}
  .aboutpage .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}


/* ==========================================================================
   CITY PAGES · components the London mock did not need
   Written in the same idiom as the block above: same tokens, same rhythm,
   no new colours and no new type scale.
   ========================================================================== */

/* the city photograph is supplied per page on .page-bg, so no rule here */

.aboutpage .h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(22px,2.4vw,32px);font-weight:800;text-transform:uppercase;
  line-height:1.02;letter-spacing:-0.01em;color:var(--white);margin:0 0 14px;
}
.aboutpage .h3 span{color:var(--yellow)}

.aboutpage .prose p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.aboutpage .prose p:last-child{margin-bottom:0}
.aboutpage .prose p b{color:var(--white);font-weight:600}
.aboutpage .prose .aud{margin-top:26px}

/* zone cards: the same panel as a district row, laid out across the page */
.aboutpage .zones{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.aboutpage .zones .drow-figs{margin-top:12px}
.aboutpage .zones .drow-d{margin-top:14px}

/* the pack ribbon above the building cards */
.aboutpage .ribbon{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);
  padding:22px clamp(18px,2.2vw,28px);margin-bottom:clamp(32px,4vw,48px);
}
.aboutpage .ribbon .planner-eye{margin-bottom:4px}
.aboutpage .ribbon-t{
  margin:0;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,24px);font-weight:700;color:var(--white);
  line-height:1.2;max-width:62ch;
}

.aboutpage .more{margin:30px 0 0}

/* a word-valued figure (an anchor sector, say) sets smaller so the four cells
   in a building card stay on one line, as they do on the live card */
.aboutpage .bld-fig-word b{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}


/* ==========================================================================
   LONDON LOCATION PAGE
   Same tokens, same seven changes. Three things are genuinely panels and
   keep a container: the building list, the district schematic, the pack
   planner. Everything else runs on rules and whitespace.
   ========================================================================== */

/* hero ground: the City skyline from the Thames */



@media(max-width:820px){
  
  
}

.brusselspage .hero-copy{max-width:860px}
.brusselspage .hero-stats{max-width:720px}
.brusselspage h1.hero-h{font-size:clamp(48px,6.8vw,100px)}
@media(max-width:820px){.brusselspage .hero-copy, .brusselspage .hero-stats{max-width:100%}}

.brusselspage .crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.brusselspage .crumb a{color:var(--blue-soft)}
.brusselspage .crumb a:hover{color:var(--yellow)}
.brusselspage .crumb i{color:var(--quiet);font-style:normal}
.brusselspage .crumb b{color:var(--white);font-weight:600}

.brusselspage .hero-sub{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,26px);font-weight:500;line-height:1.3;
  letter-spacing:.01em;color:rgba(255,255,255,.92);max-width:720px;margin:0 0 22px;
}
.brusselspage .hero-sub em{font-style:normal;color:var(--yellow);font-weight:600}
.brusselspage .hero-dist{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 22px;
}
/* the long-form intro: SEO and AI-answer copy, kept in full */
.brusselspage .hero-lead{
  font-size:13px;font-weight:300;line-height:1.75;color:var(--body);
  max-width:74ch;margin:0 0 28px;padding-top:20px;border-top:1px solid var(--line);
}
.brusselspage .hero-lead b{color:var(--white);font-weight:500}

/* ---------- shared section furniture ---------- */
.brusselspage .sec{padding-block:var(--pad-y)}
.brusselspage .sec-tint{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brusselspage .sec-tint .inner{padding-block:var(--pad-y)}
.brusselspage .h2{font-size:clamp(30px,4.52vw,58px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;margin-bottom:18px}
.brusselspage .h2 span{color:var(--yellow)}
.brusselspage .lede{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:64ch;margin:0 0 38px}

/* three-up figures on rules */
.brusselspage .fig3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
.brusselspage .fig{padding-top:24px;border-top:1px solid var(--line)}
.brusselspage .fig:first-child{border-top:2px solid var(--yellow)}
.brusselspage .fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(53px,6.11vw,75px);font-weight:800;line-height:.92;
  color:var(--yellow);font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.brusselspage .fig h3{font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:10px}
.brusselspage .fig p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:38ch}
@media(max-width:860px){
  .brusselspage .fig3{grid-template-columns:1fr}
  .brusselspage .fig{margin-top:26px}
  .brusselspage .fig:first-child{margin-top:0}
}

/* ---------- buildings: three-up cards with photography, as on the live site ---------- */
.brusselspage .blds{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.brusselspage .bld{
  border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;
  background:rgba(8,42,70,.84);display:flex;flex-direction:column;
  transition:border-color .25s, transform .25s;
}
.brusselspage .bld:hover{border-color:var(--blue);transform:translateY(-2px)}
.brusselspage .bld-visual{position:relative;aspect-ratio:4/3;overflow:hidden;background:rgba(8,42,70,.9)}
.brusselspage .bld-visual img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.86) saturate(.96);transition:transform .6s cubic-bezier(.22,1,.36,1),filter .4s;
}
.brusselspage .bld:hover .bld-visual img{transform:scale(1.045);filter:brightness(1) saturate(1)}
@media(prefers-reduced-motion:reduce){.brusselspage .bld-visual img{transition:none}.brusselspage .bld:hover .bld-visual img{transform:none}}
.brusselspage .bld-pin{
  position:absolute;top:14px;left:14px;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(5,30,51,.82);border:1px solid rgba(57,159,217,.42);border-radius:3px;
  padding:5px 11px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
}
.brusselspage .bld-pin i{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:none}
.brusselspage .bld-body{padding:24px clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1}
.brusselspage .bld-district{
  font-family:'Barlow Condensed',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-soft);margin-bottom:8px;
}
.brusselspage .bld-name{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1;margin-bottom:8px}
.brusselspage .bld-addr{font-size:13px;font-weight:300;line-height:1.45;color:var(--body);margin-bottom:20px}
.brusselspage .bld-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brusselspage .bld-fig b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.brusselspage .bld-fig span{display:block;font-size:13px;color:var(--blue-soft);margin-top:4px;line-height:1.3}
.brusselspage .bld-note{margin:18px 0 0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body)}
.brusselspage .bld-note b{color:var(--white);font-weight:600}
@media(max-width:1000px){.brusselspage .blds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.brusselspage .blds{grid-template-columns:1fr}}

/* ---------- districts + schematic ---------- */
.brusselspage .dist-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,60px);align-items:stretch}
.brusselspage .dist-grid>div:first-child{display:flex;flex-direction:column}
.brusselspage .dist-grid > *{min-width:0}
/* districts: separate cards plus a summary table, as on the live site */
.brusselspage .dtable{display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.brusselspage .dtable>.drow{flex:1 1 0}
.brusselspage .drow{
  padding:20px clamp(18px,2.2vw,24px);
  background:rgba(8,42,70,.84);border:1px solid var(--line-2);border-radius:var(--r-panel);
  transition:border-color .25s, transform .25s;
}
.brusselspage .drow:hover{border-color:var(--blue);transform:translateY(-2px)}
.brusselspage .drow[data-primary="1"]{border-bottom:3px solid var(--yellow)}
.brusselspage .drow-h{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline}
.brusselspage .drow-n{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1}
.brusselspage .drow-pc{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--blue-soft)}
.brusselspage .drow-d{font-size:13px;font-weight:300;color:var(--blue-soft);margin-top:6px;line-height:1.4}
.brusselspage .drow-figs{display:flex;gap:clamp(18px,2.6vw,34px);margin-top:14px}
.brusselspage .drow-figs div b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.brusselspage .drow-figs div span{display:block;font-size:13px;color:var(--blue-soft);margin-top:3px}

/* network summary */

.brusselspage .schema{border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82)}
.brusselspage .schema-h{
  padding:16px 22px;border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);
}
.brusselspage .schema-b{padding:22px 18px 10px}
.brusselspage .schema-b svg{display:block;width:100%;height:auto}
.brusselspage .thames{fill:none;stroke:rgba(57,159,217,.42);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.brusselspage .zone text{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;fill:#EAF1F8}
.brusselspage .zone tspan.sub{font-size:13px;font-weight:600;fill:#8CD2F5}
.brusselspage .schema-k{display:flex;gap:20px;flex-wrap:wrap;padding:0 22px 18px;font-size:13px;color:var(--quiet)}
.brusselspage .schema-k span{display:flex;align-items:center;gap:8px}
.brusselspage .schema-k i{width:10px;height:10px;border-radius:50%;flex:none}
.brusselspage .schema-k i.p{background:#F4E504}
.brusselspage .schema-k i.s{background:#399FD9}
.brusselspage .schema-note{padding:0 22px 20px;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}
@media(max-width:900px){.brusselspage .dist-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- square mile ---------- */
.brusselspage .sq-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
.brusselspage .sq-grid p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.brusselspage .sq-grid p b{color:var(--white);font-weight:600}
.brusselspage .sq-stats{border-top:2px solid var(--yellow)}
.brusselspage .sq-stat{padding:20px 0;border-top:1px solid var(--line)}
.brusselspage .sq-stat:first-child{border-top:none}
.brusselspage .sq-stat b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:35px;font-weight:800;
  color:var(--white);line-height:1;margin-bottom:8px;
}
.brusselspage .sq-stat span{font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
@media(max-width:900px){.brusselspage .sq-grid{grid-template-columns:1fr}}

/* ---------- audience list ---------- */
.brusselspage .aud{margin-top:8px}
.brusselspage .aud div{padding:14px 0;border-top:1px solid var(--line);font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
.brusselspage .aud div:first-child{border-top:1px solid var(--line-2)}
.brusselspage .aud b{color:var(--white);font-weight:600}

/* ---------- pack planner: density matched to the live module ---------- */
.brusselspage .plan-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,2.4vw,28px);align-items:stretch}
.brusselspage .plan-side{display:flex;flex-direction:column;gap:16px;justify-content:space-between}
@media(max-width:1000px){.brusselspage .plan-grid{grid-template-columns:1fr}}

.brusselspage .planner{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.86);padding:clamp(20px,2.2vw,26px)}
.brusselspage .planner-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin:0 0 6px;
}
.brusselspage .planner h3{font-size:30px;font-weight:800;text-transform:uppercase;line-height:1;margin-bottom:16px}

.brusselspage .packs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.brusselspage .packs button{
  cursor:pointer;padding:6px 11px;border-radius:3px;
  border:1px solid var(--line);background:rgba(57,159,217,.07);color:var(--body);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;transition:.15s;white-space:nowrap;
}
.brusselspage .packs button:hover{border-color:var(--blue);color:var(--white)}
.brusselspage .packs button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--navy)}

.brusselspage .pack-desc{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);margin:16px 0 18px}

.brusselspage .pack-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.brusselspage .pack-fig{border:1px solid var(--line);border-radius:4px;padding:12px 14px;background:rgba(4,18,30,.35)}
.brusselspage .pack-fig span{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-bottom:4px;
}
.brusselspage .pack-fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;
  color:var(--white);line-height:1;font-variant-numeric:tabular-nums;
}
.brusselspage .pack-fig.hero b{color:var(--yellow)}

.brusselspage .weeks{margin-top:14px;border:1px solid var(--line);border-radius:4px;padding:16px 16px 14px;background:rgba(4,18,30,.35)}
.brusselspage .weeks-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:10px}
.brusselspage .weeks-h p{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.brusselspage .weeks-h b{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--white);font-variant-numeric:tabular-nums}
.brusselspage input[type=range]{width:100%;accent-color:#F4E504;height:18px;cursor:pointer;display:block}
.brusselspage .weeks-scale{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.08em;margin-top:2px}
.brusselspage .cpm{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.brusselspage .cpm-l b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.brusselspage .cpm-l span{font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.06em}
.brusselspage .cpm-v{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:var(--white);font-variant-numeric:tabular-nums;line-height:1}
.brusselspage .planner-foot{margin:14px 0 0;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}

/* side panels */
.brusselspage .pcard{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);padding:clamp(20px,2.2vw,26px)}
.brusselspage .pcard-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 8px;
}
.brusselspage .pcard h3{font-size:19px;font-weight:800;text-transform:uppercase;line-height:1.1;margin-bottom:12px}
.brusselspage .pcard-big{font-family:'Barlow Condensed',sans-serif;font-size:39px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.brusselspage .pcard-cap{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:var(--blue-soft);margin:5px 0 14px}
.brusselspage .pcard p{margin:0 0 12px;font-size:13px;font-weight:300;line-height:1.6;color:var(--body)}
.brusselspage .pcard p b{color:var(--white);font-weight:600}
.brusselspage .pcard-src{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.08em;color:var(--quiet);margin:0 0 12px}
.brusselspage .pcard-link{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  color:var(--blue-soft);border-bottom:1px solid rgba(140,210,245,.35);
}
.brusselspage .pcard-link:hover{color:var(--yellow);border-color:rgba(244,229,4,.5)}
.brusselspage .pcard .btn{width:100%;text-align:center;margin-top:6px}

/* ---------- FAQ ---------- */
.brusselspage .faq-list{display:grid;gap:0;max-width:80ch}
.brusselspage .faq-item{border-top:1px solid var(--line)}
.brusselspage .faq-item:first-child{border-top:2px solid var(--yellow)}
.brusselspage .faq-q{
  width:100%;text-align:left;cursor:pointer;background:transparent;border:none;
  padding:20px 34px 20px 0;position:relative;
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;
  text-transform:uppercase;color:var(--white);line-height:1.15;
}
.brusselspage .faq-q::after{content:'+';position:absolute;right:4px;top:18px;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:600;color:var(--blue)}
.brusselspage .faq-item[data-open="1"] .faq-q::after{content:'\2212'}
.brusselspage .faq-a{padding:0 0 22px;font-size:13px;font-weight:300;line-height:1.65;color:var(--body);max-width:70ch}

/* ---------- ambient ---------- */
.brusselspage .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:58% 46%;
  /* the daylight city photography carries a lift so it reads as a photograph
     rather than a grey ground; the wash above is set against this value */
  filter:brightness(var(--lift,1.30)) saturate(1.06);
}
.brusselspage .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    /* The approved London page is dark behind its copy column and opens up to
       the right, where only figures and panels sit. The flat wash used here
       before kept the same average brightness but spread it evenly, which put
       body copy on a lighter ground than London's and made it harder to read.
       This restores London's shape at the same overall brightness.

       Measured for body copy over the Paris ground, left to right across the
       copy column: London 10.8:1 down to 6.8:1, this 11.1:1 down to 6.7:1.
       The two sections that run prose across the full width carry the tinted
       ground, which holds their right-hand column near 5.5:1. */
    linear-gradient(95deg,
      rgba(5,30,51,var(--w1,.96)) 0%,
      rgba(5,30,51,var(--w2,.90)) 26%,
      rgba(5,30,51,var(--w3,.74)) 46%,
      rgba(5,30,51,var(--w4,.52)) 66%,
      rgba(5,30,51,var(--w5,.40)) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
.brusselspage .concept-bar, .brusselspage .drawer, .brusselspage .hero, .brusselspage section, .brusselspage footer{position:relative;z-index:1}
@media(max-width:820px){
  .brusselspage .page-bg{background-position:58% 44%}
  .brusselspage .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}


/* ==========================================================================
   CITY PAGES · components the London mock did not need
   Written in the same idiom as the block above: same tokens, same rhythm,
   no new colours and no new type scale.
   ========================================================================== */

/* the city photograph is supplied per page on .page-bg, so no rule here */

.brusselspage .h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(22px,2.4vw,32px);font-weight:800;text-transform:uppercase;
  line-height:1.02;letter-spacing:-0.01em;color:var(--white);margin:0 0 14px;
}
.brusselspage .h3 span{color:var(--yellow)}

.brusselspage .prose p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.brusselspage .prose p:last-child{margin-bottom:0}
.brusselspage .prose p b{color:var(--white);font-weight:600}
.brusselspage .prose .aud{margin-top:26px}

/* zone cards: the same panel as a district row, laid out across the page */
.brusselspage .zones{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.brusselspage .zones .drow-figs{margin-top:12px}
.brusselspage .zones .drow-d{margin-top:14px}

/* the pack ribbon above the building cards */
.brusselspage .ribbon{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);
  padding:22px clamp(18px,2.2vw,28px);margin-bottom:clamp(32px,4vw,48px);
}
.brusselspage .ribbon .planner-eye{margin-bottom:4px}
.brusselspage .ribbon-t{
  margin:0;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,24px);font-weight:700;color:var(--white);
  line-height:1.2;max-width:62ch;
}

.brusselspage .more{margin:30px 0 0}

/* a word-valued figure (an anchor sector, say) sets smaller so the four cells
   in a building card stay on one line, as they do on the live card */
.brusselspage .bld-fig-word b{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}


/* ==========================================================================
   LONDON LOCATION PAGE
   Same tokens, same seven changes. Three things are genuinely panels and
   keep a container: the building list, the district schematic, the pack
   planner. Everything else runs on rules and whitespace.
   ========================================================================== */

/* hero ground: the City skyline from the Thames */



@media(max-width:820px){
  
  
}

.dashboardpage .hero-copy{max-width:860px}
.dashboardpage .hero-stats{max-width:720px}
.dashboardpage h1.hero-h{font-size:clamp(48px,6.8vw,100px)}
@media(max-width:820px){.dashboardpage .hero-copy, .dashboardpage .hero-stats{max-width:100%}}

.dashboardpage .crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.dashboardpage .crumb a{color:var(--blue-soft)}
.dashboardpage .crumb a:hover{color:var(--yellow)}
.dashboardpage .crumb i{color:var(--quiet);font-style:normal}
.dashboardpage .crumb b{color:var(--white);font-weight:600}

.dashboardpage .hero-sub{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,26px);font-weight:500;line-height:1.3;
  letter-spacing:.01em;color:rgba(255,255,255,.92);max-width:720px;margin:0 0 22px;
}
.dashboardpage .hero-sub em{font-style:normal;color:var(--yellow);font-weight:600}
.dashboardpage .hero-dist{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 22px;
}
/* the long-form intro: SEO and AI-answer copy, kept in full */
.dashboardpage .hero-lead{
  font-size:13px;font-weight:300;line-height:1.75;color:var(--body);
  max-width:74ch;margin:0 0 28px;padding-top:20px;border-top:1px solid var(--line);
}
.dashboardpage .hero-lead b{color:var(--white);font-weight:500}

/* ---------- shared section furniture ---------- */
.dashboardpage .sec{padding-block:var(--pad-y)}
.dashboardpage .sec-tint{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dashboardpage .sec-tint .inner{padding-block:var(--pad-y)}
.dashboardpage .h2{font-size:clamp(30px,4.52vw,58px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;margin-bottom:18px}
.dashboardpage .h2 span{color:var(--yellow)}
.dashboardpage .lede{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:64ch;margin:0 0 38px}

/* three-up figures on rules */
.dashboardpage .fig3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
.dashboardpage .fig{padding-top:24px;border-top:1px solid var(--line)}
.dashboardpage .fig:first-child{border-top:2px solid var(--yellow)}
.dashboardpage .fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(53px,6.11vw,75px);font-weight:800;line-height:.92;
  color:var(--yellow);font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.dashboardpage .fig h3{font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:10px}
.dashboardpage .fig p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body);max-width:38ch}
@media(max-width:860px){
  .dashboardpage .fig3{grid-template-columns:1fr}
  .dashboardpage .fig{margin-top:26px}
  .dashboardpage .fig:first-child{margin-top:0}
}

/* ---------- buildings: three-up cards with photography, as on the live site ---------- */
.dashboardpage .blds{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dashboardpage .bld{
  border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;
  background:rgba(8,42,70,.84);display:flex;flex-direction:column;
  transition:border-color .25s, transform .25s;
}
.dashboardpage .bld:hover{border-color:var(--blue);transform:translateY(-2px)}
.dashboardpage .bld-visual{position:relative;aspect-ratio:4/3;overflow:hidden;background:rgba(8,42,70,.9)}
.dashboardpage .bld-visual img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.86) saturate(.96);transition:transform .6s cubic-bezier(.22,1,.36,1),filter .4s;
}
.dashboardpage .bld:hover .bld-visual img{transform:scale(1.045);filter:brightness(1) saturate(1)}
@media(prefers-reduced-motion:reduce){.dashboardpage .bld-visual img{transition:none}.dashboardpage .bld:hover .bld-visual img{transform:none}}
.dashboardpage .bld-pin{
  position:absolute;top:14px;left:14px;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(5,30,51,.82);border:1px solid rgba(57,159,217,.42);border-radius:3px;
  padding:5px 11px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
}
.dashboardpage .bld-pin i{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:none}
.dashboardpage .bld-body{padding:24px clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1}
.dashboardpage .bld-district{
  font-family:'Barlow Condensed',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-soft);margin-bottom:8px;
}
.dashboardpage .bld-name{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1;margin-bottom:8px}
.dashboardpage .bld-addr{font-size:13px;font-weight:300;line-height:1.45;color:var(--body);margin-bottom:20px}
.dashboardpage .bld-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dashboardpage .bld-fig b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.dashboardpage .bld-fig span{display:block;font-size:13px;color:var(--blue-soft);margin-top:4px;line-height:1.3}
.dashboardpage .bld-note{margin:18px 0 0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body)}
.dashboardpage .bld-note b{color:var(--white);font-weight:600}
@media(max-width:1000px){.dashboardpage .blds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.dashboardpage .blds{grid-template-columns:1fr}}

/* ---------- districts + schematic ---------- */
.dashboardpage .dist-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,60px);align-items:stretch}
.dashboardpage .dist-grid>div:first-child{display:flex;flex-direction:column}
.dashboardpage .dist-grid > *{min-width:0}
/* districts: separate cards plus a summary table, as on the live site */
.dashboardpage .dtable{display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.dashboardpage .dtable>.drow{flex:1 1 0}
.dashboardpage .drow{
  padding:20px clamp(18px,2.2vw,24px);
  background:rgba(8,42,70,.84);border:1px solid var(--line-2);border-radius:var(--r-panel);
  transition:border-color .25s, transform .25s;
}
.dashboardpage .drow:hover{border-color:var(--blue);transform:translateY(-2px)}
.dashboardpage .drow[data-primary="1"]{border-bottom:3px solid var(--yellow)}
.dashboardpage .drow-h{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline}
.dashboardpage .drow-n{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1}
.dashboardpage .drow-pc{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--blue-soft)}
.dashboardpage .drow-d{font-size:13px;font-weight:300;color:var(--blue-soft);margin-top:6px;line-height:1.4}
.dashboardpage .drow-figs{display:flex;gap:clamp(18px,2.6vw,34px);margin-top:14px}
.dashboardpage .drow-figs div b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.dashboardpage .drow-figs div span{display:block;font-size:13px;color:var(--blue-soft);margin-top:3px}

/* network summary */

.dashboardpage .schema{border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82)}
.dashboardpage .schema-h{
  padding:16px 22px;border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);
}
.dashboardpage .schema-b{padding:22px 18px 10px}
.dashboardpage .schema-b svg{display:block;width:100%;height:auto}
.dashboardpage .thames{fill:none;stroke:rgba(57,159,217,.42);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.dashboardpage .zone text{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;fill:#EAF1F8}
.dashboardpage .zone tspan.sub{font-size:13px;font-weight:600;fill:#8CD2F5}
.dashboardpage .schema-k{display:flex;gap:20px;flex-wrap:wrap;padding:0 22px 18px;font-size:13px;color:var(--quiet)}
.dashboardpage .schema-k span{display:flex;align-items:center;gap:8px}
.dashboardpage .schema-k i{width:10px;height:10px;border-radius:50%;flex:none}
.dashboardpage .schema-k i.p{background:#F4E504}
.dashboardpage .schema-k i.s{background:#399FD9}
.dashboardpage .schema-note{padding:0 22px 20px;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}
@media(max-width:900px){.dashboardpage .dist-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- square mile ---------- */
.dashboardpage .sq-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
.dashboardpage .sq-grid p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.dashboardpage .sq-grid p b{color:var(--white);font-weight:600}
.dashboardpage .sq-stats{border-top:2px solid var(--yellow)}
.dashboardpage .sq-stat{padding:20px 0;border-top:1px solid var(--line)}
.dashboardpage .sq-stat:first-child{border-top:none}
.dashboardpage .sq-stat b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:35px;font-weight:800;
  color:var(--white);line-height:1;margin-bottom:8px;
}
.dashboardpage .sq-stat span{font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
@media(max-width:900px){.dashboardpage .sq-grid{grid-template-columns:1fr}}

/* ---------- audience list ---------- */
.dashboardpage .aud{margin-top:8px}
.dashboardpage .aud div{padding:14px 0;border-top:1px solid var(--line);font-size:13px;font-weight:300;line-height:1.5;color:var(--body)}
.dashboardpage .aud div:first-child{border-top:1px solid var(--line-2)}
.dashboardpage .aud b{color:var(--white);font-weight:600}

/* ---------- pack planner: density matched to the live module ---------- */
.dashboardpage .plan-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,2.4vw,28px);align-items:stretch}
.dashboardpage .plan-side{display:flex;flex-direction:column;gap:16px;justify-content:space-between}
@media(max-width:1000px){.dashboardpage .plan-grid{grid-template-columns:1fr}}

.dashboardpage .planner{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.86);padding:clamp(20px,2.2vw,26px)}
.dashboardpage .planner-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin:0 0 6px;
}
.dashboardpage .planner h3{font-size:30px;font-weight:800;text-transform:uppercase;line-height:1;margin-bottom:16px}

.dashboardpage .packs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.dashboardpage .packs button{
  cursor:pointer;padding:6px 11px;border-radius:3px;
  border:1px solid var(--line);background:rgba(57,159,217,.07);color:var(--body);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;transition:.15s;white-space:nowrap;
}
.dashboardpage .packs button:hover{border-color:var(--blue);color:var(--white)}
.dashboardpage .packs button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--navy)}

.dashboardpage .pack-desc{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);margin:16px 0 18px}

.dashboardpage .pack-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dashboardpage .pack-fig{border:1px solid var(--line);border-radius:4px;padding:12px 14px;background:rgba(4,18,30,.35)}
.dashboardpage .pack-fig span{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-bottom:4px;
}
.dashboardpage .pack-fig b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;
  color:var(--white);line-height:1;font-variant-numeric:tabular-nums;
}
.dashboardpage .pack-fig.hero b{color:var(--yellow)}

.dashboardpage .weeks{margin-top:14px;border:1px solid var(--line);border-radius:4px;padding:16px 16px 14px;background:rgba(4,18,30,.35)}
.dashboardpage .weeks-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:10px}
.dashboardpage .weeks-h p{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.dashboardpage .weeks-h b{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--white);font-variant-numeric:tabular-nums}
.dashboardpage input[type=range]{width:100%;accent-color:#F4E504;height:18px;cursor:pointer;display:block}
.dashboardpage .weeks-scale{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.08em;margin-top:2px}
.dashboardpage .cpm{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.dashboardpage .cpm-l b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.dashboardpage .cpm-l span{font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--quiet);letter-spacing:.06em}
.dashboardpage .cpm-v{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:var(--white);font-variant-numeric:tabular-nums;line-height:1}
.dashboardpage .planner-foot{margin:14px 0 0;font-size:13px;font-weight:300;color:var(--quiet);line-height:1.5}

/* side panels */
.dashboardpage .pcard{border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);padding:clamp(20px,2.2vw,26px)}
.dashboardpage .pcard-eye{
  font-family:'Barlow Condensed',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 8px;
}
.dashboardpage .pcard h3{font-size:19px;font-weight:800;text-transform:uppercase;line-height:1.1;margin-bottom:12px}
.dashboardpage .pcard-big{font-family:'Barlow Condensed',sans-serif;font-size:39px;font-weight:800;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.dashboardpage .pcard-cap{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:var(--blue-soft);margin:5px 0 14px}
.dashboardpage .pcard p{margin:0 0 12px;font-size:13px;font-weight:300;line-height:1.6;color:var(--body)}
.dashboardpage .pcard p b{color:var(--white);font-weight:600}
.dashboardpage .pcard-src{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.08em;color:var(--quiet);margin:0 0 12px}
.dashboardpage .pcard-link{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  color:var(--blue-soft);border-bottom:1px solid rgba(140,210,245,.35);
}
.dashboardpage .pcard-link:hover{color:var(--yellow);border-color:rgba(244,229,4,.5)}
.dashboardpage .pcard .btn{width:100%;text-align:center;margin-top:6px}

/* ---------- FAQ ---------- */
.dashboardpage .faq-list{display:grid;gap:0;max-width:80ch}
.dashboardpage .faq-item{border-top:1px solid var(--line)}
.dashboardpage .faq-item:first-child{border-top:2px solid var(--yellow)}
.dashboardpage .faq-q{
  width:100%;text-align:left;cursor:pointer;background:transparent;border:none;
  padding:20px 34px 20px 0;position:relative;
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;
  text-transform:uppercase;color:var(--white);line-height:1.15;
}
.dashboardpage .faq-q::after{content:'+';position:absolute;right:4px;top:18px;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:600;color:var(--blue)}
.dashboardpage .faq-item[data-open="1"] .faq-q::after{content:'\2212'}
.dashboardpage .faq-a{padding:0 0 22px;font-size:13px;font-weight:300;line-height:1.65;color:var(--body);max-width:70ch}

/* ---------- ambient ---------- */
.dashboardpage .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:58% 46%;
  /* the daylight city photography carries a lift so it reads as a photograph
     rather than a grey ground; the wash above is set against this value */
  filter:brightness(var(--lift,1.30)) saturate(1.06);
}
.dashboardpage .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    /* The approved London page is dark behind its copy column and opens up to
       the right, where only figures and panels sit. The flat wash used here
       before kept the same average brightness but spread it evenly, which put
       body copy on a lighter ground than London's and made it harder to read.
       This restores London's shape at the same overall brightness.

       Measured for body copy over the Paris ground, left to right across the
       copy column: London 10.8:1 down to 6.8:1, this 11.1:1 down to 6.7:1.
       The two sections that run prose across the full width carry the tinted
       ground, which holds their right-hand column near 5.5:1. */
    linear-gradient(95deg,
      rgba(5,30,51,var(--w1,.96)) 0%,
      rgba(5,30,51,var(--w2,.90)) 26%,
      rgba(5,30,51,var(--w3,.74)) 46%,
      rgba(5,30,51,var(--w4,.52)) 66%,
      rgba(5,30,51,var(--w5,.40)) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
.dashboardpage .concept-bar, .dashboardpage .drawer, .dashboardpage .hero, .dashboardpage section, .dashboardpage footer{position:relative;z-index:1}
@media(max-width:820px){
  .dashboardpage .page-bg{background-position:58% 44%}
  .dashboardpage .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}


/* ==========================================================================
   CITY PAGES · components the London mock did not need
   Written in the same idiom as the block above: same tokens, same rhythm,
   no new colours and no new type scale.
   ========================================================================== */

/* the city photograph is supplied per page on .page-bg, so no rule here */

.dashboardpage .h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(22px,2.4vw,32px);font-weight:800;text-transform:uppercase;
  line-height:1.02;letter-spacing:-0.01em;color:var(--white);margin:0 0 14px;
}
.dashboardpage .h3 span{color:var(--yellow)}

.dashboardpage .prose p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.dashboardpage .prose p:last-child{margin-bottom:0}
.dashboardpage .prose p b{color:var(--white);font-weight:600}
.dashboardpage .prose .aud{margin-top:26px}

/* zone cards: the same panel as a district row, laid out across the page */
.dashboardpage .zones{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.dashboardpage .zones .drow-figs{margin-top:12px}
.dashboardpage .zones .drow-d{margin-top:14px}

/* the pack ribbon above the building cards */
.dashboardpage .ribbon{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);
  padding:22px clamp(18px,2.2vw,28px);margin-bottom:clamp(32px,4vw,48px);
}
.dashboardpage .ribbon .planner-eye{margin-bottom:4px}
.dashboardpage .ribbon-t{
  margin:0;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,24px);font-weight:700;color:var(--white);
  line-height:1.2;max-width:62ch;
}

.dashboardpage .more{margin:30px 0 0}

/* a word-valued figure (an anchor sector, say) sets smaller so the four cells
   in a building card stay on one line, as they do on the live card */
.dashboardpage .bld-fig-word b{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}


/* ===== country pages (shared) ===== */

/* ==========================================================================
   UK LOCATION PAGE
   Same tokens, same seven changes. Two things are genuinely panels and keep
   a container: the city list and the coverage map.
   ========================================================================== */

/* hero ground: Emirates at 110 Cannon Street, City of London */



@media(max-width:820px){
  
  
}

.countrypage .hero-copy{max-width:840px}
.countrypage .hero-sub{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,26px);font-weight:500;line-height:1.3;
  letter-spacing:.01em;color:rgba(255,255,255,.92);max-width:720px;margin:0 0 22px;
}
.countrypage .hero-sub em{font-style:normal;color:var(--yellow);font-weight:600}
.countrypage .hero-stats{max-width:700px}
.countrypage h1.hero-h{font-size:clamp(48px,6.8vw,100px)}
@media(max-width:820px){.countrypage .hero-copy, .countrypage .hero-stats{max-width:100%}}

/* breadcrumb */
.countrypage .crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-block:16px 0;
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.countrypage .crumb a{color:var(--blue-soft)}
.countrypage .crumb a:hover{color:var(--yellow)}
.countrypage .crumb i{color:var(--quiet);font-style:normal}
.countrypage .crumb b{color:var(--white);font-weight:600}

/* ---------- cities + map ---------- */
.countrypage .uk-net{padding-block:var(--pad-y)}
.countrypage .uk-net h2{font-size:clamp(30px,4.52vw,55px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;margin-bottom:16px}
.countrypage .uk-net h2 span{color:var(--yellow)}
.countrypage .uk-net .lede{font-size:13px;font-weight:300;line-height:1.75;color:var(--body);max-width:74ch;margin:0 0 38px}
.countrypage .net-grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);gap:clamp(32px,4.5vw,64px);align-items:stretch}

/* cities: separate cards, as on the live site */
.countrypage .city-list{display:grid;gap:12px}
.countrypage .crow{
  display:grid;grid-template-columns:1fr auto auto;gap:clamp(14px,2vw,26px);align-items:center;
  width:100%;text-align:left;cursor:pointer;
  padding:20px clamp(18px,2.2vw,24px);
  background:rgba(8,42,70,.84);border:1px solid var(--line-2);border-radius:var(--r-panel);
  transition:border-color .25s, transform .25s;
}
.countrypage .crow:hover, .countrypage .crow:focus-visible{border-color:var(--blue);transform:translateY(-2px)}
.countrypage .crow[data-primary="1"]{border-bottom:3px solid var(--yellow)}
.countrypage .crow-name{
  display:block;
  font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;
  text-transform:uppercase;color:var(--white);line-height:1;margin-bottom:6px;
}
.countrypage .crow-d{display:block;font-size:13px;font-weight:300;line-height:1.4;color:var(--blue-soft)}
.countrypage .crow-n{text-align:right}
.countrypage .crow-n b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;
  color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums;
}
.countrypage .crow-n span{display:block;font-size:13px;color:var(--blue-soft);margin-top:3px}
.countrypage .crow-go{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue-soft);white-space:nowrap;
}
.countrypage .crow:hover .crow-go{color:var(--yellow)}
@media(max-width:560px){
  .countrypage .crow{grid-template-columns:1fr auto}
  .countrypage .crow-go{display:none}
}

/* map */
.countrypage .map-panel{border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82);display:flex;flex-direction:column}
.countrypage .map-head{
  padding:16px 22px;border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);
}
.countrypage .map-body{padding:18px 18px 8px;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0}
.countrypage .map-body svg{display:block;width:auto;height:auto;max-width:100%;max-height:398px}
.countrypage .uk-coast{fill:rgba(57,159,217,.09);stroke:rgba(57,159,217,.34);stroke-width:1.5;stroke-linejoin:round}
.countrypage .pin{cursor:pointer}
.countrypage .pin circle{transition:r .18s, fill .18s}
.countrypage .pin text{
  font-family:'Barlow Condensed',sans-serif;font-size:16.5px;font-weight:700;
  letter-spacing:.04em;fill:#EAF1F8;
}
.countrypage .pin:hover circle.dot{r:9}
.countrypage .pin:hover text{fill:#F4E504}
.countrypage .map-key{
  display:flex;gap:22px;flex-wrap:wrap;padding:0 22px 18px;
  font-size:13px;color:var(--quiet);
}
.countrypage .map-key span{display:flex;align-items:center;gap:8px}
.countrypage .map-key i{width:10px;height:10px;border-radius:50%;flex:none}
.countrypage .map-key i.p{background:#F4E504}
.countrypage .map-key i.s{background:#399FD9}
@media(max-width:900px){.countrypage .net-grid{grid-template-columns:1fr}}

/* ---------- profile + buying ---------- */
.countrypage .uk-prof{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.countrypage .uk-prof .inner{padding-block:var(--pad-y)}
.countrypage .prof-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
.countrypage .prof-grid h3{font-size:26px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:16px}
.countrypage .prof-grid p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.65;color:var(--body);max-width:62ch}
.countrypage .who{margin-top:26px;display:grid;gap:0}
.countrypage .who div{
  padding:14px 0;border-top:1px solid var(--line);
  font-size:13px;font-weight:300;line-height:1.5;color:var(--body);
}
.countrypage .who div:first-child{border-top:1px solid var(--line-2)}
.countrypage .who b{color:var(--white);font-weight:600}

.countrypage .buy{border-top:2px solid var(--yellow);padding-top:22px}
.countrypage .buy-item{padding:20px 0;border-top:1px solid var(--line)}
.countrypage .buy-item:first-child{border-top:none;padding-top:0}
.countrypage .buy-item h4{
  font-family:'Barlow Condensed',sans-serif;font-size:18.5px;font-weight:700;
  text-transform:uppercase;color:var(--white);line-height:1.1;margin:0 0 8px;
}
.countrypage .buy-item p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body)}
@media(max-width:900px){.countrypage .prof-grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.countrypage .faq{padding-block:var(--pad-y)}
.countrypage .faq h2{font-size:clamp(27px,3.85vw,42px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;margin-bottom:32px}
.countrypage .faq-list{display:grid;gap:0;max-width:78ch}
.countrypage .faq-item{border-top:1px solid var(--line)}
.countrypage .faq-item:first-child{border-top:2px solid var(--yellow)}
.countrypage .faq-q{
  width:100%;text-align:left;cursor:pointer;background:transparent;border:none;
  padding:20px 34px 20px 0;position:relative;
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;
  text-transform:uppercase;color:var(--white);line-height:1.15;
}
.countrypage .faq-q::after{
  content:'+';position:absolute;right:4px;top:18px;
  font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:600;color:var(--blue);
}
.countrypage .faq-item[data-open="1"] .faq-q::after{content:'\2212'}
.countrypage .faq-a{padding:0 0 22px;font-size:13px;font-weight:300;line-height:1.65;color:var(--body);max-width:68ch}

/* ---------- ambient ---------- */
.countrypage .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:58% 46%;
}
.countrypage .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(95deg,
      rgba(5,30,51,.98) 0%,
      rgba(5,30,51,.93) 26%,
      rgba(5,30,51,.66) 44%,
      rgba(5,30,51,.26) 64%,
      rgba(5,30,51,.08) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
.countrypage .concept-bar, .countrypage .drawer, .countrypage .hero, .countrypage section, .countrypage .crumb-wrap, .countrypage footer{position:relative;z-index:1}
@media(max-width:820px){
  .countrypage .page-bg{background-position:58% 44%}
  .countrypage .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}


/* ==========================================================================
   COUNTRY PAGES · France and Germany
   Same components as the approved UK page. These few additions cover what the
   UK page did not need: the chip row for the smaller cities, and the two-line
   headline used on the tenant-profile section.
   ========================================================================== */

.countrypage .h2{font-size:clamp(30px,4.52vw,58px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-.02em;margin-bottom:18px}
.countrypage .h2 span{color:var(--yellow)}

/* the cities that have no row of their own */
.countrypage .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.countrypage .chips button{
  cursor:pointer;padding:7px 13px;border-radius:3px;
  border:1px solid var(--line);background:rgba(57,159,217,.07);color:var(--body);
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;transition:.15s;
}
.countrypage .chips button:hover{border-color:var(--blue);color:var(--white)}

/* "best for" pairs, set as the buying panel is */
.countrypage .bestfor{display:grid;gap:0}
.countrypage .bestfor .buy-item:first-child{border-top:2px solid var(--yellow)}

.countrypage .prose p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.countrypage .prose p:last-child{margin-bottom:0}
.countrypage .prose p b{color:var(--white);font-weight:600}


/* ==========================================================================
   UK LOCATION PAGE
   Same tokens, same seven changes. Two things are genuinely panels and keep
   a container: the city list and the coverage map.
   ========================================================================== */

/* hero ground: Emirates at 110 Cannon Street, City of London */



@media(max-width:820px){
  
  
}

.brusselspage .hero-copy{max-width:840px}
.brusselspage .hero-sub{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,26px);font-weight:500;line-height:1.3;
  letter-spacing:.01em;color:rgba(255,255,255,.92);max-width:720px;margin:0 0 22px;
}
.brusselspage .hero-sub em{font-style:normal;color:var(--yellow);font-weight:600}
.brusselspage .hero-stats{max-width:700px}
.brusselspage h1.hero-h{font-size:clamp(48px,6.8vw,100px)}
@media(max-width:820px){.brusselspage .hero-copy, .brusselspage .hero-stats{max-width:100%}}

/* breadcrumb */
.brusselspage .crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-block:16px 0;
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.brusselspage .crumb a{color:var(--blue-soft)}
.brusselspage .crumb a:hover{color:var(--yellow)}
.brusselspage .crumb i{color:var(--quiet);font-style:normal}
.brusselspage .crumb b{color:var(--white);font-weight:600}

/* ---------- cities + map ---------- */
.brusselspage .uk-net{padding-block:var(--pad-y)}
.brusselspage .uk-net h2{font-size:clamp(30px,4.52vw,55px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;margin-bottom:16px}
.brusselspage .uk-net h2 span{color:var(--yellow)}
.brusselspage .uk-net .lede{font-size:13px;font-weight:300;line-height:1.75;color:var(--body);max-width:74ch;margin:0 0 38px}
.brusselspage .net-grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);gap:clamp(32px,4.5vw,64px);align-items:stretch}

/* cities: separate cards, as on the live site */
.brusselspage .city-list{display:grid;gap:12px}
.brusselspage .crow{
  display:grid;grid-template-columns:1fr auto auto;gap:clamp(14px,2vw,26px);align-items:center;
  width:100%;text-align:left;cursor:pointer;
  padding:20px clamp(18px,2.2vw,24px);
  background:rgba(8,42,70,.84);border:1px solid var(--line-2);border-radius:var(--r-panel);
  transition:border-color .25s, transform .25s;
}
.brusselspage .crow:hover, .brusselspage .crow:focus-visible{border-color:var(--blue);transform:translateY(-2px)}
.brusselspage .crow[data-primary="1"]{border-bottom:3px solid var(--yellow)}
.brusselspage .crow-name{
  display:block;
  font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;
  text-transform:uppercase;color:var(--white);line-height:1;margin-bottom:6px;
}
.brusselspage .crow-d{display:block;font-size:13px;font-weight:300;line-height:1.4;color:var(--blue-soft)}
.brusselspage .crow-n{text-align:right}
.brusselspage .crow-n b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;
  color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums;
}
.brusselspage .crow-n span{display:block;font-size:13px;color:var(--blue-soft);margin-top:3px}
.brusselspage .crow-go{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue-soft);white-space:nowrap;
}
.brusselspage .crow:hover .crow-go{color:var(--yellow)}
@media(max-width:560px){
  .brusselspage .crow{grid-template-columns:1fr auto}
  .brusselspage .crow-go{display:none}
}

/* map */
.brusselspage .map-panel{border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;background:rgba(8,42,70,.82);display:flex;flex-direction:column}
.brusselspage .map-head{
  padding:16px 22px;border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);
}
.brusselspage .map-body{padding:18px 18px 8px;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0}
.brusselspage .map-body svg{display:block;width:auto;height:auto;max-width:100%;max-height:398px}
.brusselspage .uk-coast{fill:rgba(57,159,217,.09);stroke:rgba(57,159,217,.34);stroke-width:1.5;stroke-linejoin:round}
.brusselspage .pin{cursor:pointer}
.brusselspage .pin circle{transition:r .18s, fill .18s}
.brusselspage .pin text{
  font-family:'Barlow Condensed',sans-serif;font-size:16.5px;font-weight:700;
  letter-spacing:.04em;fill:#EAF1F8;
}
.brusselspage .pin:hover circle.dot{r:9}
.brusselspage .pin:hover text{fill:#F4E504}
.brusselspage .map-key{
  display:flex;gap:22px;flex-wrap:wrap;padding:0 22px 18px;
  font-size:13px;color:var(--quiet);
}
.brusselspage .map-key span{display:flex;align-items:center;gap:8px}
.brusselspage .map-key i{width:10px;height:10px;border-radius:50%;flex:none}
.brusselspage .map-key i.p{background:#F4E504}
.brusselspage .map-key i.s{background:#399FD9}
@media(max-width:900px){.brusselspage .net-grid{grid-template-columns:1fr}}

/* ---------- profile + buying ---------- */
.brusselspage .uk-prof{background:rgba(11,52,86,.50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brusselspage .uk-prof .inner{padding-block:var(--pad-y)}
.brusselspage .prof-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
.brusselspage .prof-grid h3{font-size:26px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:16px}
.brusselspage .prof-grid p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.65;color:var(--body);max-width:62ch}
.brusselspage .who{margin-top:26px;display:grid;gap:0}
.brusselspage .who div{
  padding:14px 0;border-top:1px solid var(--line);
  font-size:13px;font-weight:300;line-height:1.5;color:var(--body);
}
.brusselspage .who div:first-child{border-top:1px solid var(--line-2)}
.brusselspage .who b{color:var(--white);font-weight:600}

.brusselspage .buy{border-top:2px solid var(--yellow);padding-top:22px}
.brusselspage .buy-item{padding:20px 0;border-top:1px solid var(--line)}
.brusselspage .buy-item:first-child{border-top:none;padding-top:0}
.brusselspage .buy-item h4{
  font-family:'Barlow Condensed',sans-serif;font-size:18.5px;font-weight:700;
  text-transform:uppercase;color:var(--white);line-height:1.1;margin:0 0 8px;
}
.brusselspage .buy-item p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body)}
@media(max-width:900px){.brusselspage .prof-grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.brusselspage .faq{padding-block:var(--pad-y)}
.brusselspage .faq h2{font-size:clamp(27px,3.85vw,42px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-0.02em;margin-bottom:32px}
.brusselspage .faq-list{display:grid;gap:0;max-width:78ch}
.brusselspage .faq-item{border-top:1px solid var(--line)}
.brusselspage .faq-item:first-child{border-top:2px solid var(--yellow)}
.brusselspage .faq-q{
  width:100%;text-align:left;cursor:pointer;background:transparent;border:none;
  padding:20px 34px 20px 0;position:relative;
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;
  text-transform:uppercase;color:var(--white);line-height:1.15;
}
.brusselspage .faq-q::after{
  content:'+';position:absolute;right:4px;top:18px;
  font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:600;color:var(--blue);
}
.brusselspage .faq-item[data-open="1"] .faq-q::after{content:'\2212'}
.brusselspage .faq-a{padding:0 0 22px;font-size:13px;font-weight:300;line-height:1.65;color:var(--body);max-width:68ch}

/* ---------- ambient ---------- */
.brusselspage .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:58% 46%;
}
.brusselspage .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(95deg,
      rgba(5,30,51,.98) 0%,
      rgba(5,30,51,.93) 26%,
      rgba(5,30,51,.66) 44%,
      rgba(5,30,51,.26) 64%,
      rgba(5,30,51,.08) 100%),
    linear-gradient(180deg, rgba(5,30,51,.16) 0%, rgba(5,30,51,.03) 18%, rgba(5,30,51,.03) 78%, rgba(5,30,51,.18) 100%);
}
.brusselspage .concept-bar, .brusselspage .drawer, .brusselspage .hero, .brusselspage section, .brusselspage .crumb-wrap, .brusselspage footer{position:relative;z-index:1}
@media(max-width:820px){
  .brusselspage .page-bg{background-position:58% 44%}
  .brusselspage .page-bg::after{background:linear-gradient(176deg,rgba(5,30,51,.74) 0%,rgba(5,30,51,.66) 40%,rgba(5,30,51,.72) 100%)}
}


/* ==========================================================================
   COUNTRY PAGES · France and Germany
   Same components as the approved UK page. These few additions cover what the
   UK page did not need: the chip row for the smaller cities, and the two-line
   headline used on the tenant-profile section.
   ========================================================================== */

.brusselspage .h2{font-size:clamp(30px,4.52vw,58px);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-.02em;margin-bottom:18px}
.brusselspage .h2 span{color:var(--yellow)}

/* the cities that have no row of their own */
.brusselspage .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.brusselspage .chips button{
  cursor:pointer;padding:7px 13px;border-radius:3px;
  border:1px solid var(--line);background:rgba(57,159,217,.07);color:var(--body);
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;transition:.15s;
}
.brusselspage .chips button:hover{border-color:var(--blue);color:var(--white)}

/* "best for" pairs, set as the buying panel is */
.brusselspage .bestfor{display:grid;gap:0}
.brusselspage .bestfor .buy-item:first-child{border-top:2px solid var(--yellow)}

.brusselspage .prose p{margin:0 0 18px;font-size:13px;font-weight:300;line-height:1.7;color:var(--body);max-width:66ch}
.brusselspage .prose p:last-child{margin-bottom:0}
.brusselspage .prose p b{color:var(--white);font-weight:600}


/* ===== legal pages (shared) ===== */
/* ==========================================================================
   LEGAL PAGES  ·  Privacy, Terms, Legal, Accessibility, Modern Slavery, ESG
   --------------------------------------------------------------------------
   These six pages already share one component family in the live build
   (legal-page, legal-eye, legal-h1, legal-meta, legal-toc, legal-h2, legal-h3,
   legal-p, legal-ul, legal-ol, legal-strong, legal-table, legal-link), so the
   conversion is a stylesheet rather than a rebuild. Not one character of markup
   is touched, which means copy and reading order cannot move.

   The five agreed rules applied:
     2 · the contents panel and the table lose their outlines and become rules
     3 · corners come off everything
     4 · one vertical rhythm, set from the design system's own spacing
     5 · yellow carries the headline accent and nothing else

   Rule 1, photography behind the page, is deliberately not applied here. These
   are long-form reading pages, up to 38,000 characters, and a photographic
   ground behind that much body copy costs legibility for no gain. They sit on
   the flat navy instead. Say the word if you want the photograph and I will
   add it washed back.
   ========================================================================== */

.legalpage .legal-page{
  /* a measure of roughly 70 characters at the 15px body size used here; set in
     pixels because `ch` would resolve against the 13px inherited size */
  max-width:820px;
  margin:0 auto;
  padding-inline:var(--pad-x);
  padding-block:clamp(48px,6vw,80px) clamp(64px,8vw,112px);
}

/* headings clear the sticky nav when jumped to from the contents list */
.legalpage .legal-h1, .legalpage .legal-h2, .legalpage .legal-h3{scroll-margin-top:96px}

/* ---------- masthead ---------- */
.legalpage .legal-eye{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-soft);margin:0 0 22px;
}

.legalpage h1.legal-h1{
  font-size:clamp(38px,5.2vw,64px);font-weight:800;text-transform:uppercase;
  line-height:.96;letter-spacing:-.02em;color:var(--white);margin:0 0 24px;
}
.legalpage h1.legal-h1 .accent{color:var(--yellow)}

.legalpage .legal-meta{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--quiet);line-height:1.7;
  margin-bottom:38px;
}
.legalpage .legal-meta a{color:var(--blue-soft)}
.legalpage .legal-meta a:hover{color:var(--yellow)}

/* ---------- contents: rules and space, no panel ---------- */
.legalpage .legal-toc{
  border:none;background:transparent;border-radius:0;
  border-top:2px solid var(--yellow);
  padding:22px 0 0;margin:0 0 40px;
}
.legalpage .legal-toc-title{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--quiet);margin-bottom:14px;
}
.legalpage .legal-toc ol{
  list-style:none;counter-reset:toc;margin:0;padding:0;
  columns:2;column-gap:44px;
}
.legalpage .legal-toc li{
  counter-increment:toc;padding:5px 0;font-size:13px;break-inside:avoid;line-height:1.45;
}
.legalpage .legal-toc li::before{
  content:counter(toc,decimal-leading-zero) "  ";
  font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--blue);
}
.legalpage .legal-toc a{color:var(--body)}
.legalpage .legal-toc a:hover{color:var(--yellow)}
@media(max-width:700px){.legalpage .legal-toc ol{columns:1}}

/* ---------- section headings on rules ---------- */
.legalpage h2.legal-h2{
  font-size:clamp(21px,2.3vw,27px);font-weight:800;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.1;color:var(--white);
  margin:48px 0 16px;padding-top:24px;border-top:1px solid var(--line-2);
}
.legalpage .legal-page > h2.legal-h2:first-of-type{margin-top:0}

.legalpage h3.legal-h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:14.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-soft);margin:30px 0 12px;
}

/* ---------- body ---------- */
.legalpage p.legal-p{
  font-size:15px;font-weight:300;line-height:1.8;color:var(--body);margin:0 0 18px;
}
.legalpage strong.legal-strong{color:var(--white);font-weight:500}

.legalpage ul.legal-ul, .legalpage ol.legal-ol{
  font-size:15px;font-weight:300;line-height:1.8;color:var(--body);
  margin:0 0 22px;padding-left:22px;
}
.legalpage ul.legal-ul li, .legalpage ol.legal-ol li{margin-bottom:9px;padding-left:4px}
.legalpage ul.legal-ul li::marker{color:var(--blue)}
.legalpage ol.legal-ol li::marker{color:var(--blue);font-family:'JetBrains Mono',monospace;font-size:12px}

.legalpage a.legal-link{
  color:var(--blue-soft);border-bottom:1px solid rgba(140,210,245,.35);
}
.legalpage a.legal-link:hover{color:var(--yellow);border-bottom-color:rgba(244,229,4,.5)}

/* ---------- table: a surface, but no outline and no corners ---------- */
.legalpage .legal-table{
  width:100%;border:none;border-radius:0;border-collapse:collapse;
  margin:24px 0 32px;background:rgba(8,42,70,.62);
}
.legalpage .legal-table th, .legalpage .legal-table td{
  padding:13px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);font-size:13px;line-height:1.6;
}
.legalpage .legal-table th{
  background:transparent;border-bottom:1px solid var(--line-2);
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft);
}
.legalpage .legal-table td{color:var(--body);font-weight:300}
.legalpage .legal-table tr:last-child td{border-bottom:none}
.legalpage .legal-table code{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--yellow)}
@media(max-width:700px){
  .legalpage .legal-table th, .legalpage .legal-table td{padding:11px 12px;font-size:12px}
}


/* ===== contact ===== */
/* ==========================================================================
   CONTACT
   --------------------------------------------------------------------------
   The enquiry panel and the proof column, rebuilt in the agreed components.
   Copy, field names, form ids and the two onclick handlers are carried over
   from the live page unchanged, so the HubSpot and Netlify wiring still finds
   what it expects.

   Fields are the one place the design system had no component, so they are
   written here in its own idiom: 4px corners, hairline borders, the same
   condensed uppercase labels used everywhere else.
   ========================================================================== */

.contactpage .contact-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(40px,5.5vw,84px);align-items:start;
}
@media(max-width:940px){.contactpage .contact-grid{grid-template-columns:1fr}}

.contactpage h1.contact-h1{font-size:clamp(40px,5.6vw,76px);margin-bottom:22px}
.contactpage .contact-grid .lede{margin-bottom:30px}

/* ---------- the photograph ----------
   This page is the one that carries copy in BOTH columns. The city pages'
   ground is a left-to-right ramp, dark behind the copy column and opening up
   to the right where only figures sit, and it left this page's contact details
   sitting on the brightest part of the picture. The live site darkens this
   photograph rather than lifting it, and these are its own values; the wash is
   flat, because there is no side of this page without text on it. */
.contactpage .page-bg{ filter:brightness(.65) saturate(.85); }
.contactpage .page-bg::after{
  background:linear-gradient(180deg,
    rgba(5,30,51,.66) 0%, rgba(5,30,51,.58) 42%, rgba(5,30,51,.70) 100%);
}

/* ---------- tab pair ----------
   Colour-coded as on the live site: blue is the advertiser side, yellow the
   landlord side, which is the same pairing the rest of the site uses. */
.contactpage .contact-tabs{margin-bottom:28px;border-bottom:1px solid var(--line);padding-bottom:16px}
.contactpage .contact-tabs button{padding:10px 18px;font-size:11px}
.contactpage .contact-tabs button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--navy)}
.contactpage .contact-tabs button#tab-sig[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.contactpage .contact-tabs button#tab-sig{border-color:rgba(244,229,4,.30);color:rgba(244,229,4,.85)}
.contactpage .contact-tabs button#tab-sig:hover{border-color:var(--yellow);color:var(--yellow)}
.contactpage .contact-tabs button#tab-sig[aria-pressed="true"]:hover{color:var(--navy)}

/* ---------- fields ---------- */
.contactpage .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.contactpage .frow{grid-template-columns:1fr}}

.contactpage .field{margin:0 0 14px}
.contactpage .field label{
  display:block;margin-bottom:7px;
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-soft);
}
.contactpage .field input, .contactpage .field select, .contactpage .field textarea{
  width:100%;display:block;
  background:rgba(4,18,30,.45);
  border:1px solid var(--line-2);border-radius:4px;
  padding:13px 14px;
  font-family:'Barlow',sans-serif;font-size:13px;font-weight:300;
  color:var(--white);outline:none;transition:border-color .18s,background .18s;
}
.contactpage .field textarea{resize:vertical;min-height:104px;line-height:1.6}
.contactpage .field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--blue) 50%),
                   linear-gradient(135deg,var(--blue) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:40px;
}
.contactpage .field select option{background:#041220;color:#EAF1F8}
.contactpage .field input::placeholder, .contactpage .field textarea::placeholder{color:var(--quiet)}
.contactpage .field input:focus, .contactpage .field select:focus, .contactpage .field textarea:focus{
  border-color:var(--blue);background:rgba(4,18,30,.68);
}

.contactpage .contact-send{width:100%;text-align:center;margin-top:8px;padding-block:16px}

/* ---------- proof and contact column ---------- */
.contactpage .contact-side .sq-stats{margin-bottom:38px}
.contactpage .contact-side .sq-stat b{font-size:clamp(40px,4.4vw,52px);color:var(--yellow)}

/* The live site puts the contact details on their own panel rather than
   letting them sit on the photograph. Same idea here, in the design system's
   own card: surface, hairline, panel radius. */
.contactpage .cblock{
  background:rgba(6,25,48,.94);
  border:1px solid var(--line-2);
  border-radius:var(--r-panel);
  padding:clamp(20px,2.3vw,28px);
  margin-top:16px;
}
.contactpage .cblock:first-of-type{margin-top:0}
.contactpage .clabel{
  margin:0 0 8px;
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--quiet);
}
.contactpage .cline{margin-bottom:16px}
.contactpage .cline .clabel{margin-bottom:4px;color:var(--blue-soft)}
.contactpage .cnote{margin:20px 0 0;font-size:13px;font-weight:300;line-height:1.6;color:var(--body)}

.contactpage .cgeo{display:flex;align-items:flex-start;gap:12px}
.contactpage .cgeo svg{width:16px;height:16px;flex:none;color:var(--blue);margin-top:3px}
.contactpage .cgeo address{
  font-style:normal;font-size:13px;font-weight:300;line-height:1.6;color:var(--body);
}

.contactpage .cli{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-top:1px solid var(--line);color:var(--white);
  transition:color .18s;
}
.contactpage .cli:first-of-type{border-top:none}
.contactpage .cli:hover{color:var(--blue-soft)}
.contactpage .cli svg{width:18px;height:18px;flex:none;color:var(--blue)}
.contactpage .cli span{flex:1;min-width:0}
.contactpage .cli b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.2;
}
.contactpage .cli i{
  display:block;font-style:normal;font-size:11px;color:var(--quiet);margin-top:3px;
}
.contactpage .cli em{font-style:normal;font-family:'Barlow Condensed',sans-serif;font-size:13px;color:var(--blue)}


/* ===== signage ===== */
/* ==========================================================================
   ASSET PARTNERS
   Additions only. The hero, buttons, eyebrows, stat row, cards, .pipe and the
   .blds building cards all come from the shared design system and the London
   page's component sheet; this file adds the four things they do not cover:
   an image logo strip, the content-calendar block, the quote cards and the
   product-family cards. Same tokens, same type scale, no new colours.
   ========================================================================== */

/* ---------- the photograph ----------
   This page keeps the city pages' lift. The live site darkens its heroes to
   brightness .65, and that value was tried here, but it is the wrong fix for
   this page: unlike Contact, every piece of copy on Asset Partners sits in the
   left column, where the wash is already at .96 and the picture contributes
   almost nothing. Darkening the photograph therefore cost the picture without
   buying any legibility, so the sheet's own lift stands. */

/* the hero paragraph carries one lead phrase in white, as the live page does */
.signagepage .hero-p strong{ color:var(--white);font-weight:500 }

/* ---------- logo strip ----------
   The .clients component as the advertise mock defines it. It lives in that
   mock's own scoped stylesheet rather than the shared design system, so the
   rules are repeated here verbatim; only the image handling below is new. */
.signagepage .clients{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(4,24,40,.62);overflow:hidden;padding:26px 0 30px;
  position:relative;z-index:1;
}
.signagepage .clients-label{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--quiet);text-align:center;margin:0 0 20px;
}
.signagepage .clients-track{ display:flex;white-space:nowrap;width:max-content;animation:slide 64s linear infinite }
.signagepage .client{
  font-family:'Barlow Condensed',sans-serif;
  font-size:19px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--body);padding:0 28px;flex:0 0 auto;
}
.signagepage .client + .client{ border-left:1px solid var(--line) }

.signagepage .sg-clients .client{ display:flex;align-items:center;padding:0 34px }
.signagepage .sg-clients .client img{
  width:auto;object-fit:contain;
  /* the partner marks arrive in assorted colours; the strip reads as one row */
  filter:grayscale(1) brightness(0) invert(1);opacity:.62;
  transition:opacity .25s;
}
.signagepage .sg-clients .client img:hover{ opacity:1 }
.signagepage .sg-clients .clients-track{ animation-duration:46s }

/* ---------- numbered value items (the ABM mock's .step trio) ---------- */
.signagepage .step-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px }
.signagepage .step{ padding-top:22px;border-top:1px solid var(--line) }
.signagepage .step:first-child{ border-top:2px solid var(--yellow) }
.signagepage .step-n{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin-bottom:12px;
}
.signagepage .step-n b{ color:var(--white);font-weight:700 }
.signagepage .step h3{ font-size:26px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:12px }
.signagepage .step p{ margin:0;font-size:13px;font-weight:300;line-height:1.6;color:var(--body);max-width:40ch }

/* ---------- content calendar ---------- */
.signagepage .cal-grid{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center }
.signagepage .cal-fan{ position:relative;height:clamp(240px,26vw,340px) }
.signagepage .cal-tile{
  position:absolute;top:0;width:44%;height:100%;
  background-size:cover;background-position:center;
  border:1px solid var(--line-2);border-radius:var(--r-panel);
  box-shadow:0 18px 44px rgba(2,14,26,.45);
  transition:transform .3s;
}
.signagepage .cal-tile:nth-child(1){ left:0;transform:rotate(-6deg) }
.signagepage .cal-tile:nth-child(2){ left:27%;z-index:2 }
.signagepage .cal-tile:nth-child(3){ left:54%;transform:rotate(6deg) }
.signagepage .cal-grid:hover .cal-tile:nth-child(1){ transform:rotate(-9deg) translateY(-4px) }
.signagepage .cal-grid:hover .cal-tile:nth-child(3){ transform:rotate(9deg) translateY(-4px) }
.signagepage .cal-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--quiet);margin:16px 0 0;
}

/* ---------- partner quotes ---------- */
.signagepage .q-grid{ display:grid;grid-template-columns:1fr 1fr;gap:20px }
.signagepage .card.quote{ display:flex;flex-direction:column;justify-content:space-between }
.signagepage .q-t{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(20px,2.1vw,26px);font-weight:500;line-height:1.24;
  color:var(--white);margin:0;
}
.signagepage .q-by{
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--yellow);margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);
}

/* ---------- the product family ---------- */
.signagepage .pf-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:26px }
.signagepage .card.pfc{ padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column }
.signagepage .pfc-n{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin:0 0 14px;
}
.signagepage .card.pfc.lead .pfc-n{ color:var(--yellow) }
.signagepage .pfc-name{
  font-size:clamp(26px,2.8vw,34px);font-weight:800;text-transform:uppercase;
  line-height:1;letter-spacing:-.01em;color:var(--white);margin:0 0 6px;
}
.signagepage .pfc-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--quiet);margin:0 0 16px;
}
.signagepage .pfc-d{ font-size:13px;font-weight:300;line-height:1.6;color:var(--body);margin:0 0 22px;max-width:none }
.signagepage .pfc-meta{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--quiet);
}
.signagepage .pfc-cta{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue);
}
.signagepage .pfc-cta:hover{ color:var(--blue-soft) }

/* ---------- trusted network split ---------- */
.signagepage .sg-split{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center }
.signagepage .sg-em-l{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--quiet);margin:22px 0 4px;
}
.signagepage .sg-em{ margin:0;font-size:14px }
.signagepage .sg-em a{ color:var(--blue) }
.signagepage .sg-em a:hover{ color:var(--blue-soft) }

/* ---------------------------------------------------------------- narrow */
@media (max-width:980px){
  .signagepage .cal-grid, .signagepage .sg-split, .signagepage .q-grid{ grid-template-columns:1fr }
  .signagepage .pf-grid{ grid-template-columns:repeat(2,1fr) }
  .signagepage .step-grid{ grid-template-columns:1fr }
  .signagepage .step{ margin-top:26px }
  .signagepage .step:first-child{ margin-top:0 }
}
@media (max-width:620px){
  .signagepage .pf-grid{ grid-template-columns:1fr }
  .signagepage .sg-clients .client{ padding:0 22px }
}


/* ===== knowledge ===== */
/* ==========================================================================
   KNOWLEDGE CENTRE
   --------------------------------------------------------------------------
   The article grid is fed by the headless CMS, so its markup, its card
   template, its filter chips, its detail panel and its pagination are carried
   over from the live site untouched and converted here by stylesheet alone.
   New articles keep appearing with no further work. The benchmark section is
   already properly classed and converts the same way. The hero, the case
   studies intro and the case-study cards are rebuilt in the approved
   components, because those are static and the case cards had no class hooks.

   Everything below uses the design system's own tokens and type scale. The
   hero, buttons, eyebrows, .sec / .sec-tint, .h2 and .lede all come from the
   shared sheet and the city component sheet; this file adds only what they do
   not cover.
   ========================================================================== */

/* ---------- hero: copy left, the two filter rows right ---------- */
.knowledgepage .kn-filters{
  margin-top:44px;padding-top:26px;border-top:1px solid var(--line-2);max-width:720px;
}
.knowledgepage .kn-frow + .kn-frow{margin-top:18px}
.knowledgepage .kn-flabel{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--quiet);margin:0 0 10px;
}
.knowledgepage .chips{display:flex;flex-wrap:wrap;gap:8px}
.knowledgepage .dsp-chip{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--body);background:transparent;
  border:1px solid var(--line-2);border-radius:var(--r-btn);
  padding:7px 14px;cursor:pointer;transition:.18s;
}
.knowledgepage .dsp-chip:hover{border-color:var(--blue);color:var(--blue-soft)}

/* ==========================================================================
   THE ARTICLE GRID  ·  markup carried over from the live site
   ========================================================================== */
.knowledgepage .kn-arts .inner{padding-block:0}
.knowledgepage #arts-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  padding:0;margin:0;max-width:none;
}
.knowledgepage .art-card{
  background:rgba(8,42,70,.82);
  border:1px solid var(--line);border-radius:var(--r-panel);
  overflow:hidden;display:flex;flex-direction:column;cursor:pointer;
  transition:border-color .25s, transform .25s;
}
.knowledgepage .art-card:hover{border-color:var(--blue);transform:translateY(-2px)}
.knowledgepage .art-card.hidden{display:none}

.knowledgepage .art-img{position:relative;height:196px;overflow:hidden;flex:none}
.knowledgepage .art-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.knowledgepage .art-card:hover .art-img img{transform:scale(1.04)}
.knowledgepage .art-chips{
  position:absolute;left:14px;bottom:14px;right:14px;
  display:flex;flex-wrap:wrap;gap:6px;
}
.knowledgepage .art-chip, .knowledgepage .art-chip-y{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;
  background:rgba(5,30,51,.85);border:1px solid rgba(57,159,217,.3);color:var(--blue-soft);
}
.knowledgepage .art-chip-y{border-color:rgba(244,229,4,.35);color:var(--yellow)}

.knowledgepage .art-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.knowledgepage .art-date{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--quiet);margin-bottom:10px;
}
.knowledgepage .art-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:21px;font-weight:700;text-transform:uppercase;line-height:1.08;
  color:var(--white);margin-bottom:10px;
}
.knowledgepage .art-exc{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);margin-bottom:18px}
.knowledgepage .art-more{
  margin-top:auto;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue);
}

.knowledgepage .arts-pagination{
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:30px;
}
.knowledgepage .arts-pagination button, .knowledgepage .arts-pagination a, .knowledgepage .arts-pagination span{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--body);background:transparent;
  border:1px solid var(--line-2);border-radius:var(--r-btn);
  padding:8px 14px;cursor:pointer;transition:.18s;
}
.knowledgepage .arts-pagination .active, .knowledgepage .arts-pagination [aria-current]{
  background:var(--blue);border-color:var(--blue);color:var(--navy)
}

/* ---------- the article detail view ---------- */
.knowledgepage #art-overlay{background:rgba(5,30,51,.85)}
.knowledgepage .art-full-panel{
  position:relative;z-index:10;max-width:820px;margin:0 auto;
  background:rgba(8,42,70,.94);
  border:1px solid var(--line-2);border-radius:var(--r-panel);
  padding:clamp(24px,3.4vw,44px);
}
.knowledgepage .art-full-meta{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--line);
}
.knowledgepage .art-detail-chips{display:flex;gap:6px;flex-wrap:wrap}
.knowledgepage .art-full-date{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);
}
.knowledgepage .art-full-back{
  margin-left:auto;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--r-btn);padding:8px 16px;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--body);transition:.18s;
}
.knowledgepage .art-full-back:hover{border-color:var(--blue);color:var(--blue-soft)}
.knowledgepage .art-full-image{border-radius:var(--r-panel);overflow:hidden;margin-bottom:26px}
.knowledgepage .art-full-image img{width:100%;height:auto;display:block}
.knowledgepage .art-full-title{
  font-size:clamp(28px,3.6vw,46px);font-weight:800;text-transform:uppercase;
  line-height:1;letter-spacing:-.02em;color:var(--white);margin:0 0 22px;
}
.knowledgepage .art-detail-body{font-size:14px;font-weight:300;line-height:1.75;color:var(--body)}
.knowledgepage .art-detail-body h2, .knowledgepage .art-detail-body h3{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;text-transform:uppercase;color:var(--white);
  line-height:1.1;margin:30px 0 12px;
}
.knowledgepage .art-detail-body h2{font-size:24px}
.knowledgepage .art-detail-body h3{font-size:19px}
.knowledgepage .art-detail-body p{margin:0 0 16px}
.knowledgepage .art-detail-body a{color:var(--blue)}
.knowledgepage .art-detail-body ul, .knowledgepage .art-detail-body ol{margin:0 0 16px 20px}
.knowledgepage .art-detail-body li{margin-bottom:8px}
.knowledgepage .art-detail-body img{max-width:100%;height:auto;border-radius:var(--r-panel);margin:18px 0}

/* ==========================================================================
   THE BENCHMARK  ·  markup carried over from the live site
   ========================================================================== */
.knowledgepage .bench-head{max-width:760px;margin-bottom:34px}
.knowledgepage .bench-eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px;
}
.knowledgepage .bench-headline{
  font-size:clamp(30px,4.52vw,58px);font-weight:800;text-transform:uppercase;
  line-height:1;letter-spacing:-.02em;color:var(--white);margin:0 0 16px;
}
.knowledgepage .bench-headline .y, .knowledgepage .summary-title .y{color:var(--yellow)}
.knowledgepage .bench-sub{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);margin:0}

.knowledgepage .flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 40px}
.knowledgepage .flow-step{padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column}
.knowledgepage .flow-step:first-child{border-top:2px solid var(--yellow)}
.knowledgepage .flow-num{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin-bottom:12px;
}
.knowledgepage .flow-num-badge{color:var(--white);font-weight:700;margin-right:8px}
.knowledgepage .flow-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:24px;font-weight:700;text-transform:uppercase;line-height:1.05;
  color:var(--white);margin-bottom:8px;
}
.knowledgepage .flow-subtitle{font-size:12px;font-weight:300;line-height:1.5;color:var(--blue-soft);margin-bottom:12px}
.knowledgepage .flow-body{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);margin-bottom:16px}

.knowledgepage .rank-pills{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.knowledgepage .rank-pill{
  display:flex;align-items:baseline;gap:10px;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-btn);
  background:rgba(8,42,70,.6);
}
.knowledgepage .rank-pill.standout{border-color:rgba(244,229,4,.4);background:rgba(244,229,4,.06)}
.knowledgepage .ranking{
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--blue);flex:none;
}
.knowledgepage .rank-pill.standout .ranking{color:var(--yellow)}
.knowledgepage .context{font-size:11px;font-weight:300;line-height:1.35;color:var(--quiet)}

.knowledgepage .flow-step.summary{
  background:rgba(8,42,70,.82);border:1px solid var(--line-2);border-radius:var(--r-panel);
  border-top:1px solid var(--line-2);padding:24px;
}
.knowledgepage .summary-eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin-bottom:12px;
}
.knowledgepage .summary-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:24px;font-weight:700;text-transform:uppercase;line-height:1.05;
  color:var(--white);margin:0 0 12px;
}
.knowledgepage .summary-body{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);margin:0 0 16px}
.knowledgepage .summary-body strong{color:var(--white);font-weight:500}
.knowledgepage .method-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.knowledgepage .method-chip{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;
  border:1px solid var(--line-2);color:var(--blue-soft);
}
.knowledgepage .summary-cta{
  margin-top:auto;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue);
}
.knowledgepage .summary-cta:hover{color:var(--blue-soft)}
.knowledgepage .ext{font-style:normal}

.knowledgepage .bench-source{
  margin-top:30px;padding-top:16px;border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.1em;line-height:1.7;color:var(--quiet);
}
.knowledgepage .bench-source strong{color:var(--body);font-weight:400}

/* ==========================================================================
   CASE STUDY CARDS  ·  rebuilt in the approved components
   ========================================================================== */
.knowledgepage .cs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start}
.knowledgepage .cs-card{
  background:rgba(8,42,70,.82);
  border:1px solid var(--line-2);border-radius:var(--r-panel);
  overflow:hidden;transition:border-color .25s;
}
.knowledgepage .cs-card:hover, .knowledgepage .cs-card.open{border-color:var(--blue)}
.knowledgepage .cs-visual{height:220px;overflow:hidden}
.knowledgepage .cs-thumb{width:100%;height:100%;object-fit:cover;display:block}
.knowledgepage .cs-body{padding:clamp(22px,2.6vw,32px)}
.knowledgepage .cs-meta{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:18px;
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);
}
.knowledgepage .cs-meta span:first-child{color:var(--blue)}
.knowledgepage .logo-slot{height:34px;margin-bottom:16px;display:flex;align-items:center}
.knowledgepage .logo-slot img{max-height:100%;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.85}
.knowledgepage .cs-title{
  font-size:clamp(22px,2.4vw,30px);font-weight:800;text-transform:uppercase;
  line-height:1.04;letter-spacing:-.01em;color:var(--white);margin:0 0 20px;
}
.knowledgepage .cs-figs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.knowledgepage .cs-figs-out{grid-template-columns:repeat(3,1fr)}
.knowledgepage .cs-fig b{
  display:block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(30px,3.4vw,42px);font-weight:800;line-height:.95;
  color:var(--yellow);font-variant-numeric:tabular-nums;
}
.knowledgepage .cs-fig span{
  display:block;margin-top:6px;
  font-size:11px;font-weight:300;line-height:1.4;color:var(--body);
}
.knowledgepage .cs-toggle{
  margin-top:24px;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:16px;border-top:1px solid var(--line);
  background:transparent;border-left:none;border-right:none;border-bottom:none;
  cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);transition:.18s;
}
.knowledgepage .cs-toggle:hover{color:var(--blue-soft)}
.knowledgepage .cs-toggle-icon{
  font-style:normal;width:24px;height:24px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:var(--r-btn);
  transition:transform .25s;
}
.knowledgepage .cs-card.open .cs-toggle-icon{transform:rotate(45deg);border-color:var(--blue)}

.knowledgepage .cs-panel{display:none}
.knowledgepage .cs-panel.open{display:block}
.knowledgepage .cs-panel-inner{
  padding:0 clamp(22px,2.6vw,32px) clamp(22px,2.6vw,32px);
  border-top:1px solid var(--line);margin-top:0;padding-top:24px;
}
.knowledgepage .cs-tag{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin:0 0 14px;
}
.knowledgepage .cs-rows{margin-bottom:26px}
.knowledgepage .cs-row{
  display:grid;grid-template-columns:120px 1fr;gap:14px;
  padding:10px 0;border-top:1px solid rgba(57,159,217,.12);
}
.knowledgepage .cs-row:first-child{border-top:none}
.knowledgepage .cs-row span{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--quiet);padding-top:2px;
}
.knowledgepage .cs-row p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--body)}

/* ---------------------------------------------------------------- narrow */
@media(max-width:1100px){
  .knowledgepage #arts-grid{grid-template-columns:repeat(2,1fr)}
  .knowledgepage .flow-grid{grid-template-columns:repeat(2,1fr);gap:0 32px}
  .knowledgepage .flow-step{margin-top:26px}
  .knowledgepage .flow-step:nth-child(-n+2){margin-top:0}
}
@media(max-width:820px){
  .knowledgepage .cs-grid{grid-template-columns:1fr}
  .knowledgepage .cs-figs-out{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .knowledgepage #arts-grid{grid-template-columns:1fr}
  .knowledgepage .flow-grid{grid-template-columns:1fr}
  .knowledgepage .flow-step{margin-top:26px}
  .knowledgepage .flow-step:first-child{margin-top:0}
  .knowledgepage .cs-row{grid-template-columns:1fr;gap:4px}
}

/* the review file marks its sample so nobody mistakes it for live content */
.knowledgepage .kn-sample-note{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.1em;line-height:1.7;color:var(--quiet);
  border-left:2px solid var(--yellow);padding-left:12px;margin:0 0 24px;max-width:70ch;
}
.knowledgepage .arts-page-btn[disabled]{opacity:.35;cursor:default}
.knowledgepage .arts-page-btn.active{background:var(--blue);border-color:var(--blue);color:var(--navy)}
.knowledgepage .dsp-chip.on{border-color:var(--blue);color:var(--blue)}


/* ===== about ===== */
/* ==========================================================================
   ABOUT
   --------------------------------------------------------------------------
   Additions only. The hero, buttons, eyebrows, .sec / .sec-tint, .h2, .lede,
   .card, .pipe and .proof-grid all come from the shared design system and the
   city component sheet. This file adds the four things they do not cover: the
   group's brand cards, the region chips, the team cards and the ESG key.
   Same tokens, same type scale, no new colours.
   ========================================================================== */

/* ---------- the expansion timeline ----------
   Horizontal, in the same idiom as the advertise mock's four stages and the
   programmatic mock's flow: one hairline axis running the full width, a stop
   under it for each market, yellow marking where the story starts. The rule is
   1px the whole way across rather than 2px on the first stop, so the axis
   stays level and reads as one line. */
.aboutpage .ab-time{margin-top:52px;max-width:none}
.aboutpage .ab-time .eyebrow{margin-bottom:24px}

.aboutpage .tl{
  --tl-gap:clamp(18px,2.4vw,34px);
  display:grid;grid-template-columns:repeat(5,1fr);gap:0 var(--tl-gap);
  margin:0;padding:0;list-style:none;
}
/* the axis is drawn per stop but carried across the gap, so five columns read
   as one unbroken line rather than five separate rules */
.aboutpage .tl-stop{position:relative;padding-top:28px}
.aboutpage .tl-stop::before{
  content:'';position:absolute;top:0;left:0;height:1px;
  width:calc(100% + var(--tl-gap));background:var(--line);
}
.aboutpage .tl-stop:last-child::before{width:100%}
.aboutpage .tl-stop:first-child::before{background:var(--yellow)}
.aboutpage .tl-dot{
  position:absolute;top:-6px;left:0;
  width:9px;height:9px;border-radius:50%;
  background:var(--navy);border:2px solid var(--blue);
}
.aboutpage .tl-stop:first-child .tl-dot{border-color:var(--yellow)}
.aboutpage .tl-y{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.14em;font-variant-numeric:tabular-nums;
  color:var(--blue);margin:0 0 10px;
}
.aboutpage .tl-stop:first-child .tl-y{color:var(--yellow)}
.aboutpage .tl-w{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(20px,2.2vw,28px);font-weight:700;text-transform:uppercase;
  line-height:1.04;letter-spacing:.01em;color:var(--white);margin:0 0 9px;
}
.aboutpage .tl-d{font-size:12.5px;font-weight:300;line-height:1.55;color:var(--body);margin:0;max-width:26ch}

/* ---------- the group's four brands ---------- */
.aboutpage .grp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.aboutpage .card.grp{padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column}
.aboutpage .grp-logo{height:40px;margin-bottom:20px;display:flex;align-items:center}
.aboutpage .grp-logo img{
  max-height:100%;width:auto;max-width:100%;object-fit:contain;
  /* the group marks arrive in assorted colours; one row, one weight */
  filter:grayscale(1) brightness(0) invert(1);opacity:.72;
}
.aboutpage .grp-where{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin:0 0 8px;
}
.aboutpage .grp-line{font-size:13px;font-weight:300;line-height:1.6;color:var(--body);margin:0;max-width:none}

/* ---------- region chips ---------- */
.aboutpage .region-filter{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.aboutpage .region-filter-label{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--quiet);
}
.aboutpage .chips{display:flex;flex-wrap:wrap;gap:8px}
.aboutpage .region-chip{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--body);background:transparent;
  border:1px solid var(--line-2);border-radius:var(--r-btn);
  padding:7px 16px;cursor:pointer;transition:.18s;
}
.aboutpage .region-chip:hover{border-color:var(--blue);color:var(--blue-soft)}
.aboutpage .region-chip.active{background:var(--blue);border-color:var(--blue);color:var(--navy)}

/* ---------- team cards ---------- */
.aboutpage .team-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.aboutpage .card.tm-card{padding:clamp(22px,2.4vw,30px)}
.aboutpage .tm-head{display:flex;align-items:flex-start;gap:16px}
.aboutpage .tm-face{
  width:88px;height:88px;flex:none;border-radius:50%;object-fit:cover;display:block;
  border:1px solid var(--line-2);
}
.aboutpage .tm-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:19px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  line-height:1.1;color:var(--white);margin:2px 0 6px;
}
.aboutpage .tm-role{
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.08em;line-height:1.5;
  color:var(--blue);margin:0 0 12px;
}
.aboutpage .tm-li{
  display:inline-block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-soft);
  border:1px solid var(--line-2);border-radius:var(--r-btn);
  padding:5px 11px;transition:.18s;
}
.aboutpage .tm-li:hover{border-color:var(--blue);color:var(--blue)}

.aboutpage .tbio{
  display:none;
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;font-weight:300;line-height:1.7;color:var(--body);
}
.aboutpage .tm-card.open .tbio{display:block}
.aboutpage .tm-more{
  margin-top:14px;padding:0;background:transparent;border:none;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);transition:.18s;
}
.aboutpage .tm-more:hover{color:var(--blue-soft)}

/* ---------- ESG ---------- */
.aboutpage .esg-k{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin:0 0 10px;
}
.aboutpage .ab-esg-act{margin-top:40px}

/* ---------------------------------------------------------------- narrow */
@media(max-width:1100px){
  .aboutpage .grp-grid{grid-template-columns:repeat(2,1fr)}
  .aboutpage .team-panel{grid-template-columns:repeat(2,1fr)}
  /* once the row wraps, a carried rule would run off the end of it */
  .aboutpage .tl{grid-template-columns:repeat(3,1fr);row-gap:32px}
  .aboutpage .tl-stop::before{width:100%}
}
@media(max-width:760px){
  .aboutpage .tl{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .aboutpage .grp-grid, .aboutpage .team-panel, .aboutpage .tl{grid-template-columns:1fr}
  .aboutpage .tm-head{gap:14px}
  .aboutpage .tm-face{width:72px;height:72px}
}

/* a word in the figure slot takes the heading size, not the 90px figure size */
.aboutpage .proof-n.word{
  font-size:clamp(30px,3.4vw,44px);line-height:1.04;letter-spacing:-.01em;
}

/* the bio link sits on the card's bottom edge, so a row of cards lines up */
.aboutpage .card.tm-card{display:flex;flex-direction:column}
.aboutpage .tm-more{margin-top:auto;padding-top:14px;text-align:left}
.aboutpage .tm-card.open .tm-more{margin-top:14px}


/* ===== city-brussels ===== */
/* ==========================================================================
   BRUSSELS
   --------------------------------------------------------------------------
   Brussels borrows two sheets rather than needing its own: the city component
   sheet for .sec, .sec-tint, .page-bg, .crumb and .hero-dist, and the country
   sheet for .prof-grid, .who, .buy and the map panel. This file adds only the
   three things neither covers: the two institutional notes, the question list
   and the closing card's market mark.
   ========================================================================== */

/* the Leaflet container the live site fills by id */
.brusselspage .map-body .geo-map{width:100%;height:clamp(240px,26vw,320px);border-radius:var(--r-btn)}

/* ---------- the two institutional notes ---------- */
.brusselspage .br-notes{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.brusselspage .br-note{
  border:1px solid var(--line-2);border-radius:var(--r-btn);
  background:rgba(8,42,70,.6);padding:15px 18px;
}
.brusselspage .br-note p{margin:0;font-size:12.5px;font-weight:300;line-height:1.6;color:var(--body)}
.brusselspage .br-note-k{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);margin:0 0 6px !important;
}

/* ---------- the three questions ----------
   Static, because the live page's are static rather than an accordion. */
.brusselspage .qa-list{margin-top:26px;border-top:1px solid var(--line)}
.brusselspage .qa{padding:15px 0;border-bottom:1px solid var(--line)}
.brusselspage .qa-q{
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  line-height:1.2;color:var(--white);margin:0 0 7px;
}
.brusselspage .qa-a{font-size:12.5px;font-weight:300;line-height:1.65;color:var(--body);margin:0}

/* ---------- the closing card ---------- */
.brusselspage .card.br-cta{position:relative;overflow:hidden}
.brusselspage .card.br-cta p:last-of-type{margin-bottom:30px}
.brusselspage .br-cta-mark{
  position:absolute;right:clamp(18px,3vw,40px);bottom:-.14em;
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(80px,11vw,150px);font-weight:800;line-height:1;
  letter-spacing:-.02em;color:rgba(57,159,217,.09);pointer-events:none;
}

@media(max-width:820px){
  .brusselspage .br-cta-mark{display:none}
}


/* ===== dashboard ===== */
/* ==========================================================================
   PLANNING CENTRE
   --------------------------------------------------------------------------
   This page is a live tool: a market filter, three Chart.js canvases, the
   Audience Builder, 32 ids and a 69k script driving all of it. So the markup,
   the ids and the handlers are carried over and the conversion is a
   stylesheet. The chart colours are left exactly as the page's own script
   sets them, because it already draws in blue 57,159,217 and yellow
   244,229,4: the design system's own two accents.

   Everything below uses the shared tokens and type scale.
   ========================================================================== */

/* ---------- the page container ----------
   The live stylesheet gave .hero and the section wrappers their width and
   gutter. That sheet is not carried, so the same job is done here with the
   design system's own container: one max width, one gutter, everything on the
   page lined up with every other page. The wrappers set theirs inline, so
   those are overridden rather than left to bleed. */
.dashboardpage .hero{
  position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;
  width:100%;max-width:var(--max);margin:0 auto;
  padding-inline:var(--pad-x);
}
.dashboardpage [style*="max-width:1400px"]{
  max-width:var(--max) !important;
  padding-left:var(--pad-x) !important;
  padding-right:var(--pad-x) !important;
}

/* ---------- hero ---------- */
.dashboardpage .hero-headline{
  font-size:clamp(44px,6.4vw,92px);font-weight:800;text-transform:uppercase;
  line-height:.94;letter-spacing:-.02em;color:var(--white);margin:0 0 26px;
}
.dashboardpage .hero-headline .word-yellow{color:var(--yellow);text-shadow:0 0 80px rgba(244,229,4,.2)}
.dashboardpage .hero-bottom{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:end;
}
.dashboardpage .hero-copy p{
  font-size:clamp(13px,1.69vw,16.5px);font-weight:300;
  color:var(--body);line-height:1.55;max-width:46ch;margin:0;
}
.dashboardpage .hero-stats{padding-top:26px;border-top:1px solid var(--line-2)}
.dashboardpage .stats-header{margin-bottom:12px}
.dashboardpage .stats-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--quiet);
}
.dashboardpage .dsp-chip{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--body);background:transparent;
  border:1px solid var(--line-2);border-radius:var(--r-btn);
  padding:8px 15px;cursor:pointer;transition:.18s;
}
.dashboardpage .dsp-chip:hover{border-color:var(--blue);color:var(--blue-soft)}
/* the page's own script marks the chosen market with .active */
.dashboardpage .dsp-chip.active{background:var(--blue);border-color:var(--blue);color:var(--navy)}

/* ---------- the KPI row ----------
   display:grid came from the live stylesheet; the column count is inline on
   the element, so only the display mode has to be restored here. */
.dashboardpage .stats-grid{
  display:grid;
  border:1px solid var(--line);border-radius:var(--r-panel);
  background:rgba(8,42,70,.82);overflow:hidden;
}
.dashboardpage .stat-cell{position:relative;border-left:1px solid var(--line)}
.dashboardpage .stat-cell:first-child{border-left:none}
.dashboardpage .stat-lbl{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--quiet);
}
.dashboardpage .stat-val{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(30px,3.4vw,42px);font-weight:800;line-height:1;
  letter-spacing:-.01em;color:var(--yellow);font-variant-numeric:tabular-nums;
}
.dashboardpage .kpi-ind-list{font-size:13px;font-weight:300;line-height:1.7;color:var(--body)}
.dashboardpage .stat-bar{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--blue),rgba(57,159,217,0));
  transform-origin:left;
}
.dashboardpage .kpi-foot{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.1em;color:var(--quiet);
}

/* ---------- the cards ---------- */
.dashboardpage .proof-card{
  position:relative;overflow:hidden;
  background:rgba(8,42,70,.82);
  border:1px solid var(--line);border-radius:var(--r-panel);
  transition:border-color .25s, transform .25s;
}
.dashboardpage .proof-card:hover{border-color:var(--blue);transform:translateY(-2px)}
/* the builder is a form, not a card to hover over */
.dashboardpage .proof-card.ab-card:hover{transform:none}
.dashboardpage .dsh-t{
  font-family:'Barlow Condensed',sans-serif;
  font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  line-height:1.1;color:var(--white);
}
.dashboardpage .dsh-sub{
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);
}
.dashboardpage .dsh-lbl{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);
}

/* the two gender tiles */
.dashboardpage .dsh-g{border:1px solid var(--line);border-radius:var(--r-btn);background:rgba(5,30,51,.5)}
.dashboardpage .dsh-g-ico{font-size:15px;color:var(--blue)}
.dashboardpage .dsh-g-v{
  font-family:'Barlow Condensed',sans-serif;
  font-size:26px;font-weight:800;line-height:1;color:var(--white);
  font-variant-numeric:tabular-nums;
}
.dashboardpage .dsh-g-l{
  font-family:'JetBrains Mono',monospace;
  font-size:8.5px;letter-spacing:.14em;color:var(--quiet);
}

/* the age bars */
.dashboardpage .dsh-age-l, .dashboardpage .dsh-age-v{
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.06em;color:var(--quiet);
  font-variant-numeric:tabular-nums;
}
.dashboardpage .dsh-age-v{color:var(--body)}
.dashboardpage .dsh-age-t{background:rgba(57,159,217,.12);border-radius:2px}
.dashboardpage .dsh-age-i{background:var(--blue);border-radius:2px}

/* the industry bars the script builds into #ind-bars */
.dashboardpage #ind-bars > div{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--body);
}

/* ---------- the audience builder ---------- */
.dashboardpage .ab-date{
  font-family:'JetBrains Mono',monospace;
  font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);
}
.dashboardpage .ab-tab, .dashboardpage .ab-pill{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--body);background:transparent;
  border:1px solid var(--line-2);border-radius:var(--r-btn);
  cursor:pointer;transition:.18s;
}
.dashboardpage .ab-tab{font-size:10px;padding:6px 11px}
.dashboardpage .ab-pill{font-size:10.5px;padding:6px 14px}
.dashboardpage .ab-tab:hover, .dashboardpage .ab-pill:hover{border-color:var(--blue);color:var(--blue-soft)}
.dashboardpage .ab-tab-active, .dashboardpage .ab-pill-active{
  background:var(--blue);border-color:var(--blue);color:var(--navy)
}
.dashboardpage #ab-lens-meta, .dashboardpage .ab-note{
  font-family:'JetBrains Mono',monospace;
  font-size:8.5px;letter-spacing:.1em;color:var(--quiet);line-height:1.6;
}
.dashboardpage .ab-note-box{
  border:1px solid var(--line-2);border-radius:var(--r-btn);
  background:rgba(5,30,51,.5);
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.08em;color:var(--quiet);line-height:1.6;
}
.dashboardpage .ab-flabel{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--quiet);
}
.dashboardpage .ab-fvalue{
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--white);
}
.dashboardpage .ab-card select{
  background:rgba(5,30,51,.6);color:var(--white);
  border:1px solid var(--line-2);border-radius:var(--r-btn);
  font-family:'Barlow',sans-serif;font-size:13px;
}
.dashboardpage .ab-card input[type=range]{accent-color:var(--blue)}

.dashboardpage .ab-stat, .dashboardpage .ab-cpm-row, .dashboardpage .ab-pack-box{
  border:1px solid var(--line);border-radius:var(--r-btn);background:rgba(5,30,51,.5)
}
.dashboardpage .ab-stat-l{
  font-family:'Barlow Condensed',sans-serif;
  font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--quiet);
}
.dashboardpage .ab-stat-v{
  font-family:'Barlow Condensed',sans-serif;
  font-size:21px;font-weight:800;line-height:1;color:var(--white);
  font-variant-numeric:tabular-nums;
}
.dashboardpage .ab-cpm-v{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;font-weight:800;line-height:1;color:var(--yellow);
  font-variant-numeric:tabular-nums;
}
.dashboardpage .ab-pack-v{
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  color:var(--white);line-height:1.2;
}
.dashboardpage .ab-foot{
  font-family:'JetBrains Mono',monospace;
  font-size:8.5px;letter-spacing:.08em;color:var(--quiet);line-height:1.7;
}

/* ---------------------------------------------------------------- narrow */
@media(max-width:980px){
  .dashboardpage .hero-bottom{grid-template-columns:1fr}
  .dashboardpage .stats-grid{grid-template-columns:repeat(2,1fr) !important}
  .dashboardpage .stat-cell{border-left:1px solid var(--line);border-top:1px solid var(--line)}
}
@media(max-width:620px){
  .dashboardpage .stats-grid{grid-template-columns:1fr !important}
}

/* ---------- the photograph ----------
   This page keeps the live markup's .hero-bg-img rather than the .page-bg the
   rebuilt pages use, so the same treatment is applied to it here. The wash is
   flat: the KPI row and the cards sit across the full width. */
.dashboardpage .hero-bg-img{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.dashboardpage .hero-bg-img img{
  width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;
  filter:brightness(.62) saturate(.85);
}
.dashboardpage .hero-bg-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(5,30,51,.70) 0%, rgba(5,30,51,.62) 38%, rgba(5,30,51,.80) 100%);
}
.dashboardpage .hero, .dashboardpage .stats-grid, .dashboardpage .proof-card{position:relative;z-index:1}

/* a browser quirk the live page fixes and this keeps: the dropdown's own
   list is drawn by the OS, so it needs its colours set explicitly */
.dashboardpage #ab-city option{background:#0a1f3a;color:var(--white)}

/* The industry bars. buildIndustries sets an 80px track inline, which suited
   the old narrow card and is lost in this one. The track is given the room the
   new layout has; the script itself is left alone, so the bar lengths, the
   ordering and the yellow leader all still come from it. */
.dashboardpage #ind-bars > div{gap:14px !important}
.dashboardpage #ind-bars > div > div{width:clamp(140px,26%,280px) !important;height:5px !important}
.dashboardpage #ind-bars > div > span:last-child{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;
  color:var(--body);font-variant-numeric:tabular-nums;min-width:30px;text-align:right;
}


/* The pack ribbon, as it appears on the live city pages. The agreed London mock
   dropped it; this puts it back in the same position, above the three-offices
   headline, using the same component as the other city pages. */
#page-city-london .ribbon{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);
  padding:22px clamp(18px,2.2vw,28px);margin-bottom:clamp(32px,4vw,48px);
}
#page-city-london .ribbon .planner-eye{margin-bottom:4px}
#page-city-london .ribbon-t{
  margin:0;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,24px);font-weight:700;color:var(--white);
  line-height:1.2;max-width:62ch;
}

/* The pack ribbon, as it appears on the live city pages. The agreed London mock
   dropped it; this puts it back in the same position, above the three-offices
   headline, using the same component as the other city pages. */
#page-city-paris .ribbon{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);
  padding:22px clamp(18px,2.2vw,28px);margin-bottom:clamp(32px,4vw,48px);
}
#page-city-paris .ribbon .planner-eye{margin-bottom:4px}
#page-city-paris .ribbon-t{
  margin:0;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,24px);font-weight:700;color:var(--white);
  line-height:1.2;max-width:62ch;
}

/* The pack ribbon, as it appears on the live city pages. The agreed London mock
   dropped it; this puts it back in the same position, above the three-offices
   headline, using the same component as the other city pages. */
#page-city-frankfurt .ribbon{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);
  padding:22px clamp(18px,2.2vw,28px);margin-bottom:clamp(32px,4vw,48px);
}
#page-city-frankfurt .ribbon .planner-eye{margin-bottom:4px}
#page-city-frankfurt .ribbon-t{
  margin:0;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,24px);font-weight:700;color:var(--white);
  line-height:1.2;max-width:62ch;
}

/* The pack ribbon, as it appears on the live city pages. The agreed London mock
   dropped it; this puts it back in the same position, above the three-offices
   headline, using the same component as the other city pages. */
#page-city-munich .ribbon{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line-2);border-radius:var(--r-panel);background:rgba(8,42,70,.84);
  padding:22px clamp(18px,2.2vw,28px);margin-bottom:clamp(32px,4vw,48px);
}
#page-city-munich .ribbon .planner-eye{margin-bottom:4px}
#page-city-munich .ribbon-t{
  margin:0;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,1.9vw,24px);font-weight:700;color:var(--white);
  line-height:1.2;max-width:62ch;
}


/* ===== Vodafone case study ===== */
#page-advertise .result-grid{grid-template-columns:repeat(3,1fr);gap:0 40px}
@media (max-width:1080px){#page-advertise .result-grid{grid-template-columns:1fr}}

/* Three case studies across one row. The grid was built for two, so the
   Vodafone card dropped onto a second row on its own. */
#page-knowledge .cs-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
@media (max-width:1080px){#page-knowledge .cs-grid{grid-template-columns:1fr}}

/* ---- the three cards line up row by row ----
   The meta line wraps to a different number of lines in each card, because
   one market list is "City of London . UK" and another is "Paris . La
   Defense . Lyon . Nantes". That pushed the logo, headline, figures and
   button down by 22px on the middle card at 1600px, and by as much as 44px
   on the French build at 1200px, so nothing lined up across the row.

   Subgrid fixes it at the source: the outer grid owns the rows, each card
   spans them, and .cs-body steps out of the way with display:contents so its
   children sit directly in those shared rows. Every card's meta occupies the
   same row, so every card's headline starts at the same y, whatever the
   content does. No magic numbers, and it holds in all three languages.

   The body's padding moves onto the children it used to wrap, because
   display:contents removes the box that carried it. .cs-visual keeps no
   padding, which is what makes the photograph full-bleed.

   Where subgrid is not supported the rows simply are not shared and the
   cards render as they do today, unaligned but correct. */
@media (min-width:1081px){
  #page-knowledge .cs-grid{grid-template-rows:repeat(6,auto)}
  /* minmax(0,1fr) rather than letting the single implicit column size itself.
     A grid container with no grid-template-columns gets one auto column, and
     auto is minmax(min-content,max-content), so the column grew to the widest
     thing in the card. Closed that is harmless; open, the brief panel's
     max-content is 548px inside a 397px card, so the column grew to it and
     overflow:hidden cut the headline and the last outcome figure off at the
     card edge. A 1fr column with a zero floor is exactly the card's width. */
  #page-knowledge .cs-card{grid-row:span 6;display:grid;
    grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr)}
  #page-knowledge .cs-card > *,
  #page-knowledge .cs-body > *{min-width:0}
  /* The panel is the card's seventh child against six shared rows, so it was
     being placed in the toggle's row and stretching that row for all three
     cards: open one card and the other two grew 350px of empty space under
     their buttons. Only the open card claims the seventh row, and because the
     outer grid's rows are auto, that row does not exist until it does. */
  #page-knowledge .cs-card.open{grid-row:span 7}
  #page-knowledge .cs-body{display:contents}
  /* These are written against .cs-body, not .cs-card.
     display:contents takes the body's box out of the LAYOUT tree so its
     children become grid items of the card. It does not take it out of the
     DOM, and a selector matches the DOM. Written as .cs-card > .cs-meta these
     rules matched nothing at all, so the padding the design gives the body,
     clamp(22px,2.6vw,32px), was removed and never replaced: every case study
     card has been running with its logo, headline, figures and button hard
     against the card's left edge. Same values, selectors that match.

     The panel is deliberately absent. It is a sibling of .cs-body rather than
     a child, so it never carried the body's padding, and .cs-panel-inner
     brings its own. */
  #page-knowledge .cs-body > .cs-meta,
  #page-knowledge .cs-body > .logo-slot,
  #page-knowledge .cs-body > .cs-title,
  #page-knowledge .cs-body > .cs-figs,
  #page-knowledge .cs-body > .cs-toggle{
    margin-left:clamp(22px,2.6vw,32px);margin-right:clamp(22px,2.6vw,32px)}
  #page-knowledge .cs-body > .cs-meta{margin-top:clamp(22px,2.6vw,32px)}
  #page-knowledge .cs-body > .cs-toggle{width:auto;
    margin-bottom:clamp(22px,2.6vw,32px)}
  #page-knowledge .cs-card.open .cs-body > .cs-toggle{margin-bottom:0}
  /* the figures sit at the top of their shared row rather than stretching */
  #page-knowledge .cs-body > .cs-figs{align-self:start}
}
/* The outcomes row inside an open brief is three hard 1fr columns. A 1fr
   track will not shrink past its own min-content, and "1200%" at 30px plus
   "consideration" and "familiarity" need 345px between them against the
   331px a card gives, so the third figure was cut off at the card edge on
   every three-figure study. auto-fit takes two per line where two fit and
   three where three do, and the floor is set by the widest figure rather
   than guessed. Only the panel is touched; the two figures on the face of
   the card are unchanged. */
#page-knowledge .cs-panel .cs-figs-out{
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}



/* ===== Advertise capabilities, reworked ===== */

/* The attention card lays its two figures and its two paragraphs on the same
   grid, so each paragraph sits directly under the figure it explains. The
   other cards keep the flex row they already had. */
#page-advertise .cap-att .cap-stats,
#page-advertise .cap-att .cap-cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
#page-advertise .cap-att .cap-cols p{margin:0}
/* The large-format finding closes the card across both columns. .cap p caps
   at 46ch for a single-column card, which here left it wrapping inside the
   width of the left column instead of spanning the pair. */
#page-advertise .cap-att .cap-note{margin:18px 0 0;max-width:none}
#page-advertise .cap-att .cap-l{max-width:none}
@media(max-width:820px){
  #page-advertise .cap-att .cap-stats,
  #page-advertise .cap-att .cap-cols{grid-template-columns:1fr;gap:18px}
}



/* ===== Why ECN: the proof under two of the three cards ===== */
#page-home .value-proof{margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line)}
#page-home .value-v{font-family:'Barlow Condensed',sans-serif;
  font-size:38px;font-weight:800;line-height:1;color:var(--yellow);
  font-variant-numeric:tabular-nums;margin-bottom:6px}
/* the numeric figure is set at the same size as the hero stat row above it,
   so the two read as one piece of evidence rather than two tiers. The
   word-based value on the next card keeps the smaller size: at hero scale a
   two-word value wraps and reads as a headline, not a figure. */
#page-home .value-v.value-v-big{font-size:clamp(65px,7.24vw,90px);
  line-height:.9;margin-bottom:14px}
#page-home .value-l{font-size:12.5px;line-height:1.4;color:var(--blue-soft);
  max-width:34ch;margin-bottom:10px}
#page-home .value-src{font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);margin:0}
/* the card without a figure keeps its own height rather than being stretched
   level with the two that have one */
#page-home .value-grid{align-items:start}
/* The two proof cards carry labels of different lengths, so their source
   lines sat at different heights. Subgrid puts figure, label and source on
   shared row tracks across all three cards, which lines the two "measured
   by" lines up with each other whatever the label does in any language.
   The grid's row-gap is already 0, so the shared tracks add no spacing.
   display:contents removes the proof block's own box but not its place in
   the DOM, so the rule and the space above it move onto the figure, which
   is the block's first child, and the child selectors still match. */
@media(min-width:861px){
  #page-home .value-grid{grid-template-rows:repeat(5,auto);align-items:stretch}
  #page-home .value-item{grid-row:span 5;display:grid;
    grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr)}
  #page-home .value-item > *{min-width:0}
  #page-home .value-proof{display:contents}
  #page-home .value-proof > .value-v{margin-top:18px;padding-top:16px;
    border-top:1px solid var(--line)}
  #page-home .value-proof > .value-src{align-self:start}
}
/* The two figures are measured by different houses and answer different
   questions, so nothing on the cards themselves says how they relate. This
   line closes the section and makes the link, the same job the full-width
   note does at the foot of the Advertise attention card. */
#page-home .value-close{margin:30px 0 0;padding-top:18px;
  border-top:1px solid var(--line);font-size:13.5px;line-height:1.65;
  color:var(--blue-soft);max-width:78ch}
#page-home .value-close b{color:var(--white);font-weight:600}



/* ===== Planning Centre: the ways in ===== */
#page-home .proof-more{margin:28px 0 0}
#page-home .proof-more a{font-family:'Barlow Condensed',sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue);text-decoration:none;
  border-bottom:1px solid rgba(57,159,217,.35);padding-bottom:2px}
#page-home .proof-more a:hover{color:var(--yellow);
  border-bottom-color:var(--yellow)}
#page-audience .hero-stats .hero-more{margin:22px 0 0}
#page-audience .hero-more a{font-size:13px;color:var(--blue-soft);
  text-decoration:none;border-bottom:1px solid rgba(140,210,245,.35);
  padding-bottom:2px}
#page-audience .hero-more a:hover{color:var(--yellow);
  border-bottom-color:var(--yellow)}



/* ===== Location-page maps: the live Leaflet rules ===== */
/* Lifted from the live stylesheet. One substitution: the live sheet's
   var(--border) is var(--line-2) here. */
.geo-map{width:100%;height:500px;border-radius:8px;overflow:hidden;
  border:1px solid var(--line-2);position:relative;z-index:1}
/* Leaflet tile tint, ECN blue palette */
.leaflet-layer,.leaflet-tile-pane{
  filter:hue-rotate(190deg) brightness(.62) saturate(.7) contrast(1.05)}
.leaflet-container{background:#030f1e;font-family:'Barlow',sans-serif}
.leaflet-control-zoom a{background:rgba(8,42,70,.95)!important;
  color:rgba(180,215,240,.8)!important;
  border:1px solid rgba(57,159,217,.2)!important;
  width:30px!important;height:30px!important;line-height:30px!important}
.leaflet-control-zoom a:hover{background:rgb(57,159,217)!important;
  color:rgb(5,30,51)!important}
.leaflet-control-attribution{background:rgba(3,10,20,.7)!important;
  color:rgba(57,159,217,.3)!important;font-size:8px!important;
  font-family:'JetBrains Mono',monospace!important}
.leaflet-control-attribution a{color:rgba(57,159,217,.4)!important}
.leaflet-popup-content-wrapper{background:rgba(8,42,70,.97)!important;
  border:1px solid rgba(57,159,217,.3)!important;border-radius:6px!important;
  box-shadow:0 8px 32px rgba(0,0,0,.5)!important}
.leaflet-popup-tip{background:rgba(8,42,70,.97)!important}
.leaflet-popup-close-button{color:rgba(57,159,217,.6)!important;
  font-size:16px!important}
.popup-city{font-family:'Barlow Condensed',sans-serif;font-size:18px;
  font-weight:700;text-transform:uppercase;color:#e8eef4;margin-bottom:3px}
.popup-stat{font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.08em;color:rgb(244,229,4);margin-bottom:8px}
.popup-body{font-size:11px;color:rgba(180,215,240,.8);line-height:1.5;
  margin-bottom:10px}
.popup-btn{display:inline-block;background:rgb(244,229,4);color:rgb(5,30,51);
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;
  border:0;border-radius:3px;cursor:pointer}
.popup-btn-outline{display:inline-block;background:transparent;
  color:rgba(57,159,217,.9);font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;
  border:1px solid rgba(57,159,217,.35);border-radius:3px}
.leaflet-tooltip-dark{background:rgba(8,42,70,.95);
  border:1px solid rgba(57,159,217,.3);color:#e8eef4;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.05em}

/* ---- the map inside the new design's panel ----
   .map-body centres a drawn SVG, which is why it is a flex container with
   align-items:center. A Leaflet map is not a picture to centre, it is a box
   that has to fill the space, so these three lines let it. The panel chrome,
   its head, its border and its key are untouched. */
.map-body .geo-map,.schema-b .geo-map{width:100%;flex:1 1 auto;align-self:stretch}
.map-body:has(.geo-map){display:block;padding:18px}
.schema-b:has(.geo-map){padding:18px}
/* Brussels was given its own height, clamp(240px,26vw,320px), when its panel
   was styled. That was written for a map nobody had ever seen render, since
   Leaflet was not loading at all, and it leaves Brussels 180px shorter than
   the four maps beside it in the same nav. Back to the live height, like the
   others. Everything else in that rule stands. */
.brusselspage .map-body .geo-map{height:500px}
/* The live sheet caps the map on small screens so it does not swallow the
   page. Same rule, same height. */
@media(max-width:860px){.geo-map{height:280px!important}}


/* ============ CITY PANEL ============ */
/* ==========================================================================
   CITY PANEL
   --------------------------------------------------------------------------
   The detail panel behind the smaller city cards: Manchester, Lyon, Berlin and
   the rest. The live site opens the same panel with the same copy; this is the
   same content in the agreed components, so it reads as part of the site rather
   than as a dialog bolted on.
   ========================================================================== */

.citypanel{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:clamp(24px,6vh,64px) var(--pad-x) 48px;
  background:rgba(4,12,24,.92);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.citypanel[hidden]{display:none}

.citypanel-box{
  position:relative;width:100%;max-width:660px;
  background:rgba(8,42,70,.96);
  border:1px solid var(--line-2);border-radius:var(--r-panel);
  padding:clamp(28px,4vw,46px);
}

.citypanel-x{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;padding:0;cursor:pointer;
  background:transparent;border:1px solid var(--line-2);border-radius:3px;
  color:var(--body);font-size:19px;line-height:1;
  transition:border-color .18s,color .18s;
}
.citypanel-x:hover{border-color:var(--blue);color:var(--white)}

/* ---------- masthead ---------- */
.cp-tag{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 14px;
}
.cp-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(34px,4.4vw,50px);font-weight:800;text-transform:uppercase;
  line-height:1;letter-spacing:-.02em;color:var(--white);margin:0 0 8px;
}
.cp-stat{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;
  color:var(--yellow);margin:0 0 24px;
}
.cp-desc{font-size:13px;font-weight:300;line-height:1.75;color:var(--body);margin:0}

/* ---------- the blocks below, on rules rather than in boxes ---------- */
.cp-block{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.cp-block:first-of-type{border-top:2px solid var(--yellow)}
.cp-label{
  font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--quiet);margin:0 0 10px;
}
.cp-block p{margin:0;font-size:13px;font-weight:300;line-height:1.7;color:var(--body)}

.cp-faq{border-top:1px solid var(--line);padding:16px 0}
.cp-faq:first-of-type{border-top:none;padding-top:2px}
.cp-q{
  font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;color:var(--white);
  margin:0 0 7px;line-height:1.15;
}
.cp-a{margin:0;font-size:13px;font-weight:300;line-height:1.65;color:var(--body)}

.cp-act{margin-top:28px;padding-top:22px;border-top:1px solid var(--line-2)}

@media(max-width:560px){
  .citypanel{padding-inline:16px}
  .citypanel-box{padding:26px 20px 30px}
}


/* ============ COOKIE CONSENT BANNER, from the live page ============ */
.cookie-banner {
    position: fixed;
    bottom: 24px;
    left: 24px;
    right: 24px;
    max-width: 1100px;
    margin: 0 auto;
    background: rgba(8, 42, 70, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 20px 28px;
    z-index: 3000;
    display: none;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }
.cookie-banner.visible { display: grid; }
.cookie-banner-text {
    font-size: 13px;
    color: var(--mid);
    line-height: 1.55;
    font-weight: 300;
  }
.cookie-banner-text strong {
    color: var(--white);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 14px;
    display: block;
    margin-bottom: 4px;
  }
.cookie-banner-text a {
    color: var(--blue);
    text-decoration: none;
    border-bottom: 1px solid rgba(57, 159, 217, 0.3);
  }
.cookie-banner-text a:hover { color: var(--yellow); }
.cookie-banner-actions {
    display: flex;
    gap: 10px;
    align-items: center;
  }
.cookie-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
  }
.cookie-btn-primary {
    background: var(--yellow);
    color: var(--bg);
  }
.cookie-btn-primary:hover { background: #fff17a; }
.cookie-btn-secondary {
    background: transparent;
    color: var(--mid);
    border-color: var(--border2);
  }
.cookie-btn-secondary:hover {
    color: var(--white);
    border-color: var(--blue);
  }
.cookie-banner {
      grid-template-columns: 1fr;
      padding: 18px 20px;
      bottom: 16px;
      left: 16px;
      right: 16px;
    }
.cookie-banner-actions { flex-wrap: wrap; }

/* ===================== Attention research ===================== */
#page-attention .at{max-width:1180px;margin:0 auto;padding-inline:var(--pad-x)}
#page-attention .at-sec{padding-block:clamp(48px,6vw,78px);border-top:1px solid var(--line);
  position:relative;z-index:1}

/* chapter heads
   The generic paragraph rule is declared first, and every named paragraph
   class below carries its element so it outranks that rule. Without the
   element the generic rule is the more specific of the two and flattens
   every eyebrow, caption and pull quote to body size. */
#page-attention .at-sec p{font-size:15px;line-height:1.75;color:var(--body);max-width:66ch}
#page-attention p.at-n{font-family:'Barlow Condensed',sans-serif;font-size:13px;
  font-weight:700;letter-spacing:.2em;color:var(--yellow);margin:0 0 10px}
#page-attention p.at-eye{font-family:'Barlow Condensed',sans-serif;font-size:11px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);
  margin:0 0 14px}
#page-attention h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  text-transform:uppercase;font-size:clamp(30px,3.9vw,50px);line-height:.98;
  letter-spacing:-.01em;color:var(--white);margin:0 0 20px;max-width:21ch;text-wrap:balance}
#page-attention h2 em{font-style:normal;color:var(--yellow)}
#page-attention h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:17px;letter-spacing:.01em;color:var(--white);
  margin:0 0 7px}
#page-attention p.at-lede{font-size:16px;line-height:1.7;color:var(--body);
  max-width:72ch;margin:0 0 6px}
#page-attention .at-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 48px;margin-top:24px}
#page-attention .at-2col p{margin:0;max-width:none}

/* The hero photograph and its wash, carried from the other pages. Each page
   scopes its own .page-bg rules, so this one needs its own pair rather than
   inheriting; the gradient is the site's standard treatment, unchanged. */
#page-attention .page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:20% 0%;
}
/* The top of the screen in this photograph sits about 60px down a 1080px
   frame, so a viewport wider than 16:9 (1920x900 and most desktop windows)
   clips it off. The crop is anchored to the top of the photograph so the
   whole screen stays in shot and the overflow comes off the floor at the
   bottom, where there is nothing to lose. The 20% across,
   rather than the usual 58%, slides the screen clear of the copy column.
   This photograph already carries its own left-to-right gradient, dark enough
   on the left to hold the hero copy on its own. The site's standard wash on
   top of that doubles up and flattens the screen and the light trails, so
   this page runs at roughly half the usual opacity. The crop sits at 20%
   rather than the usual 58% to slide the screen clear of the copy column. */
#page-attention .page-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(95deg, rgba(5,30,51,.74) 0%, rgba(5,30,51,.60) 30%,
      rgba(5,30,51,.34) 52%, rgba(5,30,51,.18) 72%, rgba(5,30,51,.10) 100%),
    linear-gradient(180deg, rgba(5,30,51,.12) 0%, rgba(5,30,51,0) 24%,
      rgba(5,30,51,0) 72%, rgba(5,30,51,.28) 100%);
}
/* Narrow viewports crop the dark left side out of the frame entirely and put
   the bright screen straight behind the copy, so below this width the wash
   goes flat and heavy instead of directional. */
@media(max-width:980px){
  #page-attention .page-bg{background-position:46% 0%}
  #page-attention .page-bg::after{
    background:linear-gradient(180deg, rgba(5,30,51,.88) 0%, rgba(5,30,51,.80) 40%,
      rgba(5,30,51,.86) 100%);
  }
}
/* Below the hero the sections sit over the photograph rather than hiding it,
   so the lobby stays present the whole way down the page. The two levels are
   as light as the measured contrast allows: against the brightest point of
   the composited backdrop (the Samsung screen, measured at 41,65,81 through
   the lighter of these two), body copy holds 7.1:1 and the mono lines 5.6:1,
   both clear of the 4.5:1 AA floor for small text. Lightening further drops
   the mono lines below it, which is why they stop here. */
#page-attention .at-sec{background:rgba(5,30,51,.82)}
#page-attention .at-sec.at-tint{background:rgba(5,30,51,.9)}
/* the photograph now shows through, so the page lifts the recessive mono
   colour off the site default to keep the 9.5px source lines legible over it */
#page-attention{--quiet:#A8BFD2}

/* the hero */
#page-attention .at-hero{position:relative;z-index:1;padding-block:clamp(96px,11vw,150px) 54px}
#page-attention .at-hero h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  text-transform:uppercase;font-size:clamp(40px,6.1vw,76px);line-height:.92;margin:12px 0 0;
  max-width:15ch;color:var(--white)}
#page-attention .at-hero h1 .y{color:var(--yellow)}
/* the wash clears toward the right, so the hero copy is kept inside the
   dark side of it rather than running out over the photograph */
#page-attention .at-hero .at-lede{margin-top:24px;font-size:17px;max-width:44ch}
#page-attention .at-hero .at-hnote{max-width:50ch}
#page-attention .at-hnote{font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);margin:18px 0 0}
#page-attention .at-creds{display:flex;flex-wrap:wrap;gap:0;margin:30px 0 4px;
  border-top:1px solid var(--line);max-width:760px}
#page-attention .at-cred{flex:1 1 150px;padding:18px 20px 0 0}
#page-attention .at-cred b{display:block;font-family:'Barlow Condensed',sans-serif;
  font-size:38px;font-weight:800;line-height:1;color:var(--yellow);
  font-variant-numeric:tabular-nums}
#page-attention .at-cred span{display:block;font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--quiet);
  margin-top:8px}

/* section 01 sets the commentary and the focus-span chart side by side, so
   the chart supports the argument rather than interrupting it */
#page-attention .at-aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px 52px;align-items:start;margin-top:4px}
#page-attention .at-aside > div > p:first-child{margin-top:0}
#page-attention .at-aside .at-fig{margin-top:0;border-top:0;padding-top:6px;max-width:none}
#page-attention .at-aside .at-pair{margin-top:22px}
@media(max-width:900px){
  #page-attention .at-aside{grid-template-columns:1fr;gap:26px}
  #page-attention .at-aside .at-fig{border-top:1px solid var(--line);padding-top:18px}
}

/* the three steps from frequency to recall, with an arrow between them on
   wide screens so the chain reads as a sequence rather than a list */
#page-attention .at-chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px 44px;margin:30px 0 34px}
#page-attention .at-chain .at-item{position:relative}
@media(min-width:861px){
  #page-attention .at-chain .at-item + .at-item::before{content:'';position:absolute;
    left:-26px;top:30px;width:9px;height:9px;border-top:1.5px solid var(--yellow);
    border-right:1.5px solid var(--yellow);transform:rotate(45deg)}
}
@media(max-width:860px){#page-attention .at-chain{grid-template-columns:1fr}}

/* the three headline findings, side by side above the APM chart */
#page-attention .at-finds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px 44px;margin:32px 0 4px}
#page-attention .at-f{border-top:1px solid var(--line);padding-top:16px}
#page-attention .at-f b{display:block;font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(46px,5.2vw,64px);font-weight:800;line-height:.9;color:var(--yellow);
  font-variant-numeric:tabular-nums;margin-bottom:12px}
#page-attention .at-f span{display:block;font-size:14px;line-height:1.6;
  color:var(--white)}
@media(max-width:860px){#page-attention .at-finds{grid-template-columns:1fr}}

/* a headline finding: big yellow figure, label, source */
#page-attention .at-find{display:grid;grid-template-columns:minmax(190px,auto) minmax(0,1fr);
  gap:4px 34px;align-items:start;margin:30px 0 4px}
#page-attention .at-find b{font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(58px,7vw,88px);font-weight:800;line-height:.86;color:var(--yellow);
  font-variant-numeric:tabular-nums}
#page-attention .at-find span{font-size:15.5px;line-height:1.6;color:var(--white);
  max-width:46ch;padding-top:8px}

/* numbered grids: the four steps, the four reasons, the six principles */
#page-attention .at-grid{display:grid;gap:30px 44px;margin-top:30px}
#page-attention .at-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
#page-attention .at-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
#page-attention .at-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
#page-attention .at-item{border-top:1px solid var(--line);padding-top:16px}
#page-attention .at-item i{font-style:normal;font-family:'Barlow Condensed',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--yellow);
  display:block;margin-bottom:9px}
#page-attention .at-item p{font-size:14px;line-height:1.65;margin:0;color:var(--body)}

/* figures */
#page-attention .at-fig{margin:30px 0 0;border-top:1px solid var(--line);padding-top:18px;
  max-width:800px}
#page-attention .at-fig.wide{max-width:960px}
#page-attention p.at-fig-t{font-family:'Barlow Condensed',sans-serif;font-size:13px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--white);
  margin:0 0 20px}
#page-attention p.at-src{font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--quiet);margin:16px 0 0;
  max-width:none;line-height:1.6}
#page-attention .at-scroll{overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
#page-attention .at-fig svg{display:block;width:100%;height:auto}
#page-attention #atFocus{min-width:320px}
#page-attention #atHours{min-width:620px}
#page-attention #atOoh{min-width:660px}
#page-attention #atDig{min-width:820px}
#page-attention #atRecall{min-width:600px}
/* phones: the chart script draws narrow layouts below this width (SM) */
@media(max-width:640px){#page-attention #atOoh,#page-attention #atDig,
  #page-attention #atHours,#page-attention #atRecall{min-width:0}}
#page-attention .at-leg{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 14px;
  font-size:12.5px;color:var(--blue-soft)}
#page-attention .at-leg span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}

/* a pull quote line inside a chapter */
#page-attention p.at-pull{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:clamp(22px,2.9vw,36px);line-height:1.06;
  margin:0 0 22px;max-width:24ch;color:var(--white)}
#page-attention .at-pull em{font-style:normal;color:var(--blue-soft)}

/* a note with a yellow rule, used for the caveats that matter */
#page-attention p.at-note{border-left:2px solid var(--yellow);padding:3px 0 3px 18px;
  margin:28px 0 0;font-size:14.5px;line-height:1.65;color:var(--white);max-width:70ch}
#page-attention .at-note b{color:var(--yellow);font-weight:600}

/* small stat pair under fig 1 */
#page-attention .at-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;margin-top:26px;border-top:1px solid var(--line);padding-top:18px}
#page-attention .at-pair b{font-family:'Barlow Condensed',sans-serif;font-size:32px;
  font-weight:800;line-height:1;color:var(--blue-soft);display:block}
#page-attention .at-pair span{font-size:13px;line-height:1.55;color:var(--body);
  display:block;margin-top:7px}

/* the three questions panel */
#page-attention .at-ask{background:rgba(11,58,95,.5);border:1px solid var(--line);
  padding:28px 30px;align-self:start}
#page-attention .at-ask p.at-ask-t{font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin:0 0 16px}
#page-attention .at-ask ul{list-style:none;margin:0;padding:0}
#page-attention .at-ask li{font-family:'Barlow Condensed',sans-serif;font-size:19px;
  font-weight:600;line-height:1.2;color:var(--white);padding:13px 0;
  border-top:1px solid var(--line)}
#page-attention .at-ask li:first-child{border-top:0;padding-top:0}
#page-attention .at-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:44px;align-items:start}

/* the quote */
#page-attention .at-q{margin:0;max-width:880px;border-left:2px solid var(--yellow);
  padding-left:26px}
#page-attention .at-q blockquote{margin:0;font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-size:clamp(21px,2.6vw,31px);line-height:1.22;color:var(--white);
  text-wrap:pretty}
#page-attention .at-q figcaption{margin-top:18px;font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
#page-attention .at-q figcaption b{color:var(--blue-soft);font-weight:500}

/* sources */
#page-attention .at-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px 48px;margin-top:28px}
#page-attention .at-notes div{border-top:1px solid var(--line);padding-top:15px}
#page-attention .at-notes b{display:block;font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:700;text-transform:uppercase;color:var(--white);
  letter-spacing:.02em;margin-bottom:7px}
/* who measured it: the standing of the research house, beside its credentials.
   It sits inside the method section rather than carrying a number of its own,
   because it answers the same question the method answers. */
#page-attention .at-lu{display:grid;grid-template-columns:1fr 1.05fr;
  gap:30px 46px;margin:34px 0 0;padding-top:26px;border-top:1px solid var(--line)}
#page-attention .at-lu h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  text-transform:uppercase;font-size:27px;line-height:1.05;margin:10px 0 12px;
  color:var(--white)}
#page-attention .at-lu p{font-size:15px;line-height:1.7;margin:0}
#page-attention .at-lu-l{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line)}
#page-attention .at-lu-l li{position:relative;padding:14px 0 14px 26px;
  border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.65;
  color:var(--body)}
#page-attention .at-lu-l li::before{content:'';position:absolute;left:2px;top:21px;
  width:9px;height:6px;border-left:1.6px solid var(--blue);
  border-bottom:1.6px solid var(--blue);transform:rotate(-45deg)}
#page-attention .at-lu-l b{color:var(--white);font-weight:600}
/* the as-at line, below everything it qualifies */
/* 66ch on the generic paragraph rule resolves against the mono face here,
   which would box this line into a narrow column, so it opts out */
#page-attention p.at-asof{font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);max-width:none;
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--line)}
#page-attention .at-notes p{font-size:13px;line-height:1.65;margin:0;color:var(--quiet);
  max-width:none}

/* the foot */
#page-attention .at-dl{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:48px;align-items:start}
#page-attention .at-dl .at-meta{font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);margin:14px 0 0}
#page-attention .at-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}

@media(max-width:980px){
  #page-attention .at-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  #page-attention .at-split,#page-attention .at-dl{grid-template-columns:1fr;gap:34px}
  #page-attention .at-lu{grid-template-columns:1fr;gap:24px}
  #page-attention .at-2col{grid-template-columns:1fr;gap:17px}
}
@media(max-width:720px){
  #page-attention .at-grid.c3,#page-attention .at-grid.c2,
  #page-attention .at-notes,#page-attention .at-pair{grid-template-columns:1fr}
  #page-attention .at-find{grid-template-columns:1fr;gap:10px}
  #page-attention .at-find span{padding-top:0}
}

/* ===================== Audience submenu ===================== */
.nav .has-sub{position:relative;display:inline-block}
.nav .has-sub > a{display:inline-flex;align-items:center;gap:6px}
.nav .has-sub .caret{width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid currentColor;
  display:inline-block;opacity:.75}
.nav .submenu{position:absolute;top:calc(100% + 14px);left:-16px;min-width:214px;
  background:#07243B;border:1px solid var(--line-2);padding:6px;display:flex;
  flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.45);z-index:120;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s}
.nav .has-sub:hover .submenu,.nav .has-sub:focus-within .submenu{
  opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* the gap between the nav item and the panel would otherwise drop the hover */
.nav .has-sub::after{content:'';position:absolute;left:0;right:0;top:100%;height:16px}
.nav .submenu a{display:block;padding:10px 14px;font-size:13px;color:var(--blue-soft);
  text-decoration:none;white-space:nowrap}
.nav .submenu a:hover{background:#0A2E49;color:#fff}
.nav .submenu a.on{color:var(--navy);background:var(--yellow);font-weight:600}
/* the drawer has no hover, so the same three sit as indented children */
.drawer .sub-link{padding-left:20px;font-size:14px;opacity:.9;
  border-left:1px solid var(--line-2);margin-left:2px}

/* the 3.4x claim, wherever it is made, points at the research behind it */
a.at-src-link{color:var(--blue-soft);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(140,210,245,.35);padding-bottom:1px}
a.at-src-link:hover{color:var(--yellow);border-bottom-color:var(--yellow)}
.cap-avail a.at-src-link{margin-left:8px}

/* ---------- building cards: one shared set of rows across the three ------
   The address runs to one, two or three lines depending on the market and
   the viewport, which left the rule above the figures sitting at a different
   height in each card. Subgrid gives the row of cards one set of rows to
   share, so the district, the name, the address and the figures line up
   whatever the copy does. @supports keeps older browsers on today's
   behaviour; above 1000px is the only width where the cards are three
   abreast. */
@media(min-width:1001px){
  @supports (grid-template-rows:subgrid){
    .blds{row-gap:0}
    .blds>.bld{display:grid;grid-row:span 6;
      grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr)}
    .blds>.bld>.bld-body{display:grid;grid-row:span 5;
      grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr)}
    .blds>.bld>*,.blds>.bld>.bld-body>*{min-width:0}
  }
}