/* ==========================================================================
   BUMP — SITE STYLESHEET

   One stylesheet for every page. Scoping markers sit on the <html> element:

     .site          the 14 main site pages (tokens, reset, layout, buttons)
     .site-chrome   the 13 of those using the standard nav + footer
                    (euroconsumers-idea-sprint has its own doc-nav / doc-footer)
     .page-<name>   one per HTML file — everything unique to that page

   Scopes use :where(), which adds no specificity, so every rule keeps exactly
   the weight it had when these styles lived in per-page <style> blocks.

   Breakpoint overrides are collected in section 11 so they always follow the
   base rules they override. A page therefore has two blocks: its base rules in
   section 9, its responsive rules in section 11, under the same .page-<name>.

   CONTENTS
      1. Tokens                 :root — every colour and shared value
      2. Reset & base elements
      3. Layout primitives
      4. Site chrome            header, nav, mobile menu, footer
      5. Buttons
      6. Shared components
      7. Animations
      8. Utilities              replace the former style="" attributes
      9. Pages                  base rules, one block per HTML file
     10. Embeds                 base rules for the widgets in images/
     11. Responsive             all @media blocks, shared first then per page

   WHERE EACH PAGE LIVES

     file                               base rules   responsive
     ----------------------------------------------------------
     bump-cafe.html                     9.1          11.2
     campaigns.html                     9.2          11.3
     euroconsumers-idea-sprint.html     9.3          11.4
     idea-sprint.html                   9.4          11.5
     index.html                         9.5          11.6
     media-partnerships.html            9.6          11.7
     policy-experience-space.html       9.7          11.8
     policy-experiences.html            9.8          11.9
     policymicrocommunities.html        9.9          11.10
     team.html                          9.10         11.11
     tiktok-house.html + case studies   9.11         11.12   (.case-study)
     venues.html                        9.12         11.13
     work.html                          9.13         11.14
     working-with-bump.html             9.14         11.15
     venues-thirdparties.html           9.15         11.17
     copd/index.php +
       irish-presidency/index.php       9.16         11.18
     terms-and-conditions.html +
       cookie-policy.html (.legal-doc)  9.17         11.19
     images/bump-cafe-loop.html         10.1         —
     images/forum-loop.html             10.2         11.16
     images/microcommunitiesring1.html  10.3         —
     images/microcommunitiesrole.html   10.4         —
   ========================================================================== */

/* === 1. TOKENS ======================================================= */

:root {
  --ink:#0a0a0a;
  --paper:#ffffff;
  --muted:#666666;
  --line:#e6e6e6;
  --accent:#4f7fff;
  --purple:#b46bf0;
  --mint:#00e6a3;
  --pink:#ff2e93;
  --yellow:#eeff3c;
  --wash:#eeeeee;
  --frame:#161616;
  --frame-line:#262626;
}

/* Self-hosted Apercu. Only the weights/styles actually used on the site:
   400 for body copy and italic emphasis, 600 for medium-weight labels,
   and one bold face covering both the 700 and 800 weight declarations
   used across the site (Apercu has no separate 800/black cut). */
@font-face {
  font-family:"Apercu";
  src:url("../fonts/apercu-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"Apercu";
  src:url("../fonts/apercu-regular-italic.woff2") format("woff2");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face {
  font-family:"Apercu";
  src:url("../fonts/apercu-medium.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"Apercu";
  src:url("../fonts/apercu-bold.woff2") format("woff2");
  font-weight:700 800;
  font-style:normal;
  font-display:swap;
}

/* === 2. RESET & BASE ELEMENTS ======================================== */

:where(.site) body {
  background:var(--paper);
  color:var(--ink);
  font-family:"Apercu","Helvetica Neue",Helvetica,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
html:where(.site), :where(.site) *{box-sizing:border-box;margin:0;padding:0}
html:where(.site){scroll-behavior:smooth;color-scheme:light}
:where(.site) a{color:inherit;text-decoration:none}

/* Off-screen until keyboard-focused, so mouse/touch visitors never see it but
   Tab from the top of the page reveals it as the first stop. */
:where(.site) .skip-link {
  position:absolute;
  top:-40px;
  left:8px;
  z-index:1000;
  background:var(--ink);
  color:#fff;
  padding:10px 18px;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  transition:top .15s;
}
:where(.site) .skip-link:focus{top:8px}

/* === 3. LAYOUT PRIMITIVES ============================================ */

:where(.site) .wrap{max-width:1180px;margin:0 auto;padding:0 32px}
:where(.site) .eyebrow {
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}

/* === 4. SITE CHROME ================================================== */

:where(.site-chrome) header.nav {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
:where(.site-chrome) .nav-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
}
:where(.site-chrome) .logo-img{height:24px;width:auto;display:block}
:where(.site-chrome) nav ul{display:flex;gap:28px;list-style:none}
:where(.site-chrome) nav a{font-size:14px;font-weight:600;color:var(--ink);transition:color .15s}
:where(.site-chrome) nav a:hover{color:var(--pink)}
:where(.site-chrome) .menu-toggle {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;
  height:32px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  z-index:60;
}
:where(.site-chrome) .menu-toggle span {
  display:block;
  width:100%;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .2s,opacity .2s;
}
:where(.site-chrome) body.nav-open .menu-toggle span:nth-child(1) {
  transform:translateY(7px) rotate(45deg);
}
:where(.site-chrome) body.nav-open .menu-toggle span:nth-child(2){opacity:0}
:where(.site-chrome) body.nav-open .menu-toggle span:nth-child(3) {
  transform:translateY(-7px) rotate(-45deg);
}
:where(.site-chrome) .hero-image {
  margin-top:56px;
  aspect-ratio:16/7;
  border-radius:16px;
  background:var(--wash);
  border:1px dashed var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
:where(.site-chrome) .proj::before{content:"";position:absolute;inset:0;background:var(--ink)}
/* .has-image drops the project's cover photo into a card, above the ::before fill
   and below the ::after scrim that keeps the white card text readable. The scrim
   is strengthened here because the per-page gradients were tuned against a flat
   dark fill, not a photograph. */
:where(.site-chrome) .proj.has-image > img {
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
:where(.site-chrome) .proj.has-image::after {
  background:linear-gradient(180deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,.45) 40%,rgba(0,0,0,.88) 100%);
}
/* .has-image turns the dashed placeholder box into a real photo frame.
   The four pages using .hero-image can adopt it as their art lands. */
:where(.site-chrome) .hero-image.has-image{background:none;border:0;overflow:hidden}
:where(.site-chrome) .hero-image.has-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

:where(.site-chrome) .hero .back {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
}
:where(.site-chrome) .hero .back .arrow{font-size:15px;font-weight:800}
:where(.site-chrome) .hero .back:hover{color:var(--ink)}
:where(.site-chrome) .highlights{padding:10px 0 90px}
:where(.site-chrome) .highlight-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:44px;
}
:where(.site-chrome) footer{background:var(--ink);color:#fff;padding:70px 0 40px}
:where(.site-chrome) .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
:where(.site-chrome) .highlight .tag {
  display:inline-block;
  width:34px;
  height:6px;
  border-radius:6px;
  margin-bottom:18px;
}
:where(.site-chrome) .highlight-grid .highlight:nth-child(4n + 1) .tag{background:var(--accent)}
:where(.site-chrome) .row-1 .tag{background:var(--accent)}
:where(.site-chrome) footer .logo{color:#fff}
:where(.site-chrome) .highlight-grid .highlight:nth-child(4n + 2) .tag{background:var(--purple)}
:where(.site-chrome) footer .logo-img{filter:invert(1)}
:where(.site-chrome) .highlight-grid .highlight:nth-child(4n + 3) .tag{background:var(--mint)}
:where(.site-chrome) footer h3 {
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#888;
  margin-bottom:16px;
}
:where(.site-chrome) .highlight-grid .highlight:nth-child(4n) .tag{background:var(--pink)}
:where(.site-chrome) footer p, :where(.site-chrome) footer a {
  font-size:14.5px;
  color:#cfcfcf;
  line-height:1.7;
  display:block;
}
:where(.site-chrome) footer a:hover{color:#fff}
:where(.site-chrome) .foot-bottom {
  margin-top:50px;
  padding-top:24px;
  border-top:1px solid #2a2a2a;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:13px;
  color:#777;
}
:where(.site-chrome) .foot-bottom a{display:inline;color:#777}
:where(.site-chrome) .foot-bottom a:hover{color:#fff}
:where(.site-chrome) .process{background:var(--ink);color:#fff;padding:92px 0}
:where(.site-chrome) .process .lede {
  max-width:60ch;
  font-size:clamp(18px,2.2vw,24px);
  line-height:1.45;
  font-weight:600;
  letter-spacing:-.01em;
}
:where(.site-chrome) .process .sub {
  margin-top:18px;
  max-width:62ch;
  color:#bdbdbd;
  font-size:16px;
  line-height:1.6;
}
:where(.site-chrome) .process-step:last-child{border-right:none}
:where(.site-chrome) .process-step .n {
  font-size:13px;
  font-weight:800;
  letter-spacing:.1em;
  color:#777;
}
:where(.site-chrome) .process-steps .process-step:nth-child(1) .bar{background:var(--accent)}
:where(.site-chrome) .retainer p{font-size:15.5px;color:#444}
:where(.site-chrome) .faq-item:first-child{padding-top:0}
:where(.site-chrome) .faq-item:last-child{border-bottom:none}
:where(.site-chrome) .faq-item h4 {
  font-size:16.5px;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:8px;
  max-width:62ch;
}

/* The site header is sticky at 69px, so an anchored section would otherwise
   land with its heading tucked underneath it. */
:where(.site-chrome) section[id]{scroll-margin-top:88px}

/* === 5. BUTTONS ====================================================== */

/* "Opening November 2026" badge for Bump's Café Concept. Shared so the home
   page, the venues page and the café page all state it identically. It is a
   span, not a p, so page-level paragraph rules cannot recolour it, and the
   fill is opaque so it stays legible on the dark venue card as well. */
:where(.site-chrome) .opening-note {
  display:inline-block;
  margin-top:12px;
  padding:6px 14px;
  border-radius:999px;
  background:#d6f7ec;
  color:#00604a;
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
/* The badge is status metadata, so it sits on the kicker line rather than
   between the heading and the body copy, where it split the two apart. */
:where(.site-chrome) .meta-line {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
:where(.site-chrome) .meta-line .opening-note {
  margin-top:0;
  padding:5px 12px;
  letter-spacing:.08em;
}
:where(.site-chrome) .meta-line .kicker,
:where(.site-chrome) .meta-line .v-kicker{margin-bottom:0}

:where(.site-chrome) .btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 24px;
  border-radius:8px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.07em;
  text-transform:uppercase;
  border:1.5px solid var(--ink);
  transition:transform .15s, background-color .15s;
}
:where(.site-chrome) .btn-solid{background:var(--ink);color:#fff}
:where(.site-chrome) .btn-solid:hover{transform:translateY(-2px)}
:where(.site-chrome) .btn-ghost{background:transparent}
:where(.site-chrome) .btn-ghost:hover{background:var(--wash)}


/* === 6. SHARED COMPONENTS ============================================ */

.bump-loop .bl-track {
  display:flex;
  width:1100%;
  height:100%;
  animation:bumpLoop 39s cubic-bezier(.66,0,.34,1) infinite;
  will-change:transform;
}
.bump-loop .bl-pane {
  width:9.0909%;
  height:100%;
  box-sizing:border-box;
  display:flex;
  border:12px solid var(--c);
  border-width:max(8px,0.75cqi);
  background:var(--c);
}
.bump-loop .bl-plan {
  flex:1 1 52%;
  min-width:0;
  overflow:hidden;
  background:#F1F3F2;
  border-right:6px solid var(--c);
  border-right-width:max(4px,0.38cqi);
}
.bump-loop .bl-shot {
  flex:1 1 48%;
  min-width:0;
  overflow:hidden;
  background:#0E0E0E;
  border-left:6px solid var(--c);
  border-left-width:max(4px,0.38cqi);
}
.bump-loop img{width:100%;height:100%;object-fit:cover;display:block}
:where(.site) .logo {
  font-weight:800;
  font-size:20px;
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Reset for a <button> styled to read as plain text/a link — used for the
   footer's "Cookie preferences" link (a button since it doesn't navigate
   anywhere, it reopens the banner below) and that banner's own "Which
   cookies?" details toggle. Buttons don't inherit text color by default
   the way an <a> would, so that's set explicitly here rather than relied
   on; each use then overrides it as needed. This must come before the
   cookie banner rules below, since :where() gives every selector here
   zero specificity — whichever rule is later in the file wins ties, and
   the banner's toggle needs to win over this plain reset. */
:where(.site) .footer-link-btn {
  appearance:none;
  background:none;
  border:0;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
}

/* Cookie consent banner. Injected by js/cookie-consent.js on every page —
   there's no per-page markup for it, so this isn't grouped with any single
   page's rules in section 9. Matches the footer's dark band (background:
   var(--ink)) since it reads as an extension of that chrome. Gates Google
   Analytics; see js/analytics.js and cookie-policy.html section 2. */
:where(.site) .cookie-banner {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
  background:var(--ink);
  color:#fff;
  padding:20px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  box-shadow:0 -4px 20px rgba(0,0,0,.25);
}
:where(.site) .cookie-banner[hidden]{display:none}
:where(.site) .cookie-banner-main{flex:1 1 420px;min-width:260px}
:where(.site) .cookie-banner p {
  margin:0;
  max-width:60ch;
  font-size:14.5px;
  line-height:1.6;
  color:#cfcfcf;
}
:where(.site) .cookie-banner a{color:#fff}
:where(.site) .cookie-banner-toggle {
  color:#fff;
  text-decoration:underline;
  text-underline-offset:2px;
}
:where(.site) .cookie-banner-toggle:hover{color:#cfcfcf}
:where(.site) .cookie-banner-details{margin-top:12px}
:where(.site) .cookie-banner-details[hidden]{display:none}
:where(.site) .cookie-banner-details p{margin:0;font-size:13.5px;line-height:1.6;color:#cfcfcf}
:where(.site) .cookie-banner-details p + p{margin-top:10px}
:where(.site) .cookie-banner-details a{text-decoration:underline}
:where(.site) .cookie-banner-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  flex:none;
}
:where(.site) .cookie-banner .btn{border-color:#fff}
:where(.site) .cookie-banner .btn-solid{background:#fff;color:var(--ink)}
:where(.site) .cookie-banner .btn-ghost{background:transparent;color:#fff}
:where(.site) .cookie-banner .btn-ghost:hover{background:rgba(255,255,255,.12)}
:where(.site) .foot-bottom .footer-link-btn:hover{color:#fff}

/* === 7. ANIMATIONS =================================================== */

@keyframes bumpLoop{0.0000%{transform:translateX(0.0000%)}
  7.6923%{transform:translateX(0.0000%)}
  10.0000%{transform:translateX(-9.0909%)}
  17.6923%{transform:translateX(-9.0909%)}
  20.0000%{transform:translateX(-18.1818%)}
  27.6923%{transform:translateX(-18.1818%)}
  30.0000%{transform:translateX(-27.2727%)}
  37.6923%{transform:translateX(-27.2727%)}
  40.0000%{transform:translateX(-36.3636%)}
  47.6923%{transform:translateX(-36.3636%)}
  50.0000%{transform:translateX(-45.4545%)}
  57.6923%{transform:translateX(-45.4545%)}
  60.0000%{transform:translateX(-54.5455%)}
  67.6923%{transform:translateX(-54.5455%)}
  70.0000%{transform:translateX(-63.6364%)}
  77.6923%{transform:translateX(-63.6364%)}
  80.0000%{transform:translateX(-72.7273%)}
  87.6923%{transform:translateX(-72.7273%)}
  90.0000%{transform:translateX(-81.8182%)}
  97.6923%{transform:translateX(-81.8182%)}
  100.0000%{transform:translateX(-90.9091%)}}

/* === 8. UTILITIES ==================================================== */

/* These replace the style="" attributes that used to sit on the markup. An inline
   style outranks every class rule, so each declaration keeps !important to preserve
   exactly the cascade it had. Custom-property classes need no such help. */

.u-mt-6{margin-top:6px !important}
.u-mt-10{margin-top:10px !important}
.u-mt-14{margin-top:14px !important}
.u-mt-16{margin-top:16px !important}
.u-mt-18{margin-top:18px !important}
.u-mt-20{margin-top:20px !important}
.u-mt-24{margin-top:24px !important}
.u-mt-32{margin-top:32px !important}
.u-mt-48{margin-top:48px !important}
.u-mt-56{margin-top:56px !important}
.u-mt-40-neg{margin-top:-40px !important}
.u-mb-0{margin-bottom:0 !important}
.u-ml-2{margin-left:2px !important}
.u-pt-0{padding-top:0 !important}
.u-block-24-70{margin:24px 0 70px !important}
.u-maxw-30ch{max-width:30ch !important}
.u-color-dim{color:#888 !important}
.u-color-999{color:#999 !important}
.u-color-muted{color:var(--muted) !important}
.u-color-mint{color:var(--mint) !important}
.u-color-accent{color:var(--accent) !important}
.u-color-purple{color:var(--purple) !important}
.u-no-border-bottom{border-bottom:none !important}
.btn-sm{font-size:14px !important;padding:10px 20px !important}
.btn-xs{font-size:12px !important;padding:10px 18px !important}
.link-rule {
  font-weight:700 !important;
  border-bottom:2px solid var(--ink) !important;
  padding-bottom:1px !important;
}
.link-rule-inline {
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  font-weight:700 !important;
  font-size:14.5px !important;
  border-bottom:2px solid var(--ink) !important;
  padding-bottom:2px !important;
}
.section-label {
  font-size:12px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
}
.text-meta{font-size:14.5px !important;color:var(--muted) !important}
.display-md {
  font-size:clamp(26px,3.4vw,38px) !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  line-height:1.15 !important;
}
.pane-pink{--c:#EB4592}
.pane-blue{--c:#5A7EF7}
.pane-green{--c:#69E3A8}
.loop-timing{--hold:4800ms;--fade:2600ms}

/* === 9. PAGES ======================================================== */


/* -----------------------------------------------------------------------
   9.1      .page-bump-cafe                  bump-cafe.html
   ----------------------------------------------------------------------- */
:where(.page-bump-cafe) .logo {
  font-weight:800;
  font-size:22px;
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap:8px;
}
:where(.page-bump-cafe) .logo-img{height:26px;width:auto;display:block}
:where(.page-bump-cafe) nav ul{display:flex;gap:30px;list-style:none}
:where(.page-bump-cafe) .nav-cta {
  border:1.5px solid var(--ink);
  padding:9px 18px;
  border-radius:8px;
  color:var(--ink)!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background-color .15s, border-color .15s, color .15s;
}
:where(.page-bump-cafe) .nav-cta:hover {
  background:var(--pink);
  border-color:var(--pink);
  color:#fff!important;
}
:where(.page-bump-cafe) .hero{padding:96px 0 60px}
:where(.page-bump-cafe) .hero-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
:where(.page-bump-cafe) .coffee-credit{display:flex;align-items:center;gap:8px;opacity:.5}
:where(.page-bump-cafe) .coffee-credit span {
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}
:where(.page-bump-cafe) .coffee-credit img{height:38px;width:auto;display:block}
:where(.page-bump-cafe) .hero h1 {
  font-size:clamp(36px,5.4vw,68px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:800;
  max-width:18ch;
}
:where(.page-bump-cafe) .hero p.lede {
  margin-top:28px;
  max-width:56ch;
  font-size:clamp(17px,2vw,21px);
  color:#333;
  line-height:1.55;
}
:where(.page-bump-cafe) .hero .actions{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
:where(.page-bump-cafe) .section-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
:where(.page-bump-cafe) .section-head h2 {
  font-size:clamp(28px,3.6vw,44px);
  letter-spacing:-.02em;
  font-weight:800;
  line-height:1.05;
}
:where(.page-bump-cafe) .highlight{border:1px solid var(--line);border-radius:14px;padding:26px}
:where(.page-bump-cafe) .highlight p{font-size:14.5px;color:#333;line-height:1.55;font-weight:600}
:where(.page-bump-cafe) .process-steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--line);
  margin-top:50px;
}
:where(.page-bump-cafe) .process-steps.two-col{grid-template-columns:repeat(2,1fr)}
:where(.page-bump-cafe) .process-step{padding:28px 28px 28px 0;border-right:1px solid var(--line)}
:where(.page-bump-cafe) .process-step .bar {
  width:28px;
  height:5px;
  border-radius:5px;
  margin:12px 0 16px;
}
:where(.page-bump-cafe) .process-steps .process-step:nth-child(2) .bar{background:var(--mint)}
:where(.page-bump-cafe) .process-step h4 {
  font-size:19px;
  font-weight:800;
  margin-bottom:10px;
  letter-spacing:-.01em;
}
:where(.page-bump-cafe) .process-step p.desc {
  font-size:14.5px;
  color:#555;
  line-height:1.6;
  max-width:44ch;
}
/* The "how it works" section runs on ink site-wide. Here it sits between two
   bands of photography and read as a black slab, so it is lifted onto the
   light wash. Every colour inside it was chosen against black, so the
   hairlines and body copy above are re-stated to suit. */
:where(.page-bump-cafe) .process{background:var(--wash);color:var(--ink)}
:where(.page-bump-cafe) .process .sub{color:#555}
:where(.page-bump-cafe) .process .process-step .n{color:var(--muted)}

:where(.page-bump-cafe) .event-formats{padding:90px 0;border-top:1px solid var(--line)}
:where(.page-bump-cafe) .formats-intro{max-width:72ch}
:where(.page-bump-cafe) .formats-intro p{font-size:16.5px;color:#333;line-height:1.65}
:where(.page-bump-cafe) .formats-intro p + p{margin-top:16px}
:where(.page-bump-cafe) .bump-loop {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#0E0E0E;
  container-type:inline-size;
  margin-top:48px;
}
:where(.page-bump-cafe) .bl-caption{margin-top:14px;font-size:13px;color:var(--muted)}

/* Case-study tiles in the gallery section.
   The tile's photo is `position:absolute; inset:0` from the shared
   .site-chrome rule, so the tile itself MUST establish a positioned,
   aspect-ratioed box — without it the photo has no containing block and
   escapes to the top of the page, over everything else. Mirrors the
   equivalent rules on the work and policy-experience-space pages. */
:where(.page-bump-cafe) .gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:38px;
}
:where(.page-bump-cafe) .proj {
  position:relative;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  color:#fff;
  transition:transform .18s;
}
:where(.page-bump-cafe) .proj:hover{transform:translateY(-4px)}
:where(.page-bump-cafe) .proj::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.5));
}
:where(.page-bump-cafe) .proj .p-body{position:relative;z-index:2;padding:22px}
:where(.page-bump-cafe) .proj h3{font-size:19px;font-weight:800;letter-spacing:-.01em}
:where(.page-bump-cafe) .proj span {
  font-size:12.5px;
  font-weight:700;
  color:var(--mint);
  letter-spacing:.04em;
}

/* Photography of the room. The hero is 3:2 rather than the site's 16:7 band,
   because these are wide interiors and the letterbox crop threw away the
   ceiling and the floor — which is most of what tells you the room is 400m2. */
:where(.page-bump-cafe) .hero-image{aspect-ratio:3/2}
:where(.page-bump-cafe) .cafe-shot{margin-top:44px}
:where(.page-bump-cafe) .cafe-shot img {
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
}
:where(.page-bump-cafe) .cafe-shot figcaption {
  margin-top:12px;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}
/* Leading a section rather than closing one, so it needs no top gap. */
:where(.page-bump-cafe) .cafe-shot--lead{margin-top:0;margin-bottom:40px}

/* One photograph per block of the café-hours / after-hours split,
   so both states are shown as well as named. */
:where(.page-bump-cafe) .day-split .block-shot {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
  border-radius:8px;
  margin-bottom:16px;
}
/* Stacked full width rather than three narrow columns: in a third of the
   page each photograph was too small and too tightly cropped to show the
   room, which is the only reason they are here. */
:where(.page-bump-cafe) .day-split {
  margin-top:40px;
  display:grid;
  grid-template-columns:1fr;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
:where(.page-bump-cafe) .day-split .block{padding:22px 24px;border-bottom:1px solid var(--line)}
:where(.page-bump-cafe) .day-split .block:last-child{border-bottom:none}
:where(.page-bump-cafe) .day-split .time {
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--muted);
}
:where(.page-bump-cafe) .day-split .label {
  margin-top:6px;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.01em;
}
:where(.page-bump-cafe) .day-split .desc{margin-top:6px;font-size:13px;color:#555;line-height:1.5}
:where(.page-bump-cafe) .format-group{margin-top:64px}
:where(.page-bump-cafe) .format-group .group-time {
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--muted);
  margin-bottom:10px;
}
:where(.page-bump-cafe) .format-group h3 {
  font-size:clamp(22px,2.8vw,30px);
  font-weight:800;
  letter-spacing:-.01em;
  max-width:24ch;
}
:where(.page-bump-cafe) .format-group .group-desc {
  margin-top:16px;
  max-width:72ch;
  font-size:15.5px;
  color:#444;
  line-height:1.65;
}
:where(.page-bump-cafe) .format-list {
  margin-top:32px;
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
}
:where(.page-bump-cafe) .format-row {
  padding:24px 0;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:280px 1fr;
  gap:28px;
  align-items:start;
}
:where(.page-bump-cafe) .format-row .tag {
  display:block;
  width:28px;
  height:5px;
  border-radius:5px;
  margin-bottom:10px;
}
:where(.page-bump-cafe) .format-row h4{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
:where(.page-bump-cafe) .format-row p{font-size:14.5px;color:#444;line-height:1.6}
:where(.page-bump-cafe) .format-list .format-row:nth-child(1) .tag{background:var(--accent)}
:where(.page-bump-cafe) .format-list .format-row:nth-child(2) .tag{background:var(--purple)}
:where(.page-bump-cafe) .format-list .format-row:nth-child(3) .tag{background:var(--mint)}
:where(.page-bump-cafe) .format-list .format-row:nth-child(4) .tag{background:var(--pink)}
:where(.page-bump-cafe) .format-list .format-row:nth-child(5) .tag{background:var(--yellow)}
:where(.page-bump-cafe) .gallery{padding:90px 0}
:where(.page-bump-cafe) .faq{padding:90px 0;border-top:1px solid var(--line)}
:where(.page-bump-cafe) .faq-list{margin-top:8px}
:where(.page-bump-cafe) .faq-item{padding:24px 0;border-bottom:1px solid var(--line)}
:where(.page-bump-cafe) .faq-item p{font-size:14.5px;color:#444;line-height:1.6;max-width:62ch}
:where(.page-bump-cafe) .cafe-cta {
  border-top:1px solid var(--line);
  padding:70px 0 90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
:where(.page-bump-cafe) .cafe-cta h3 {
  font-size:clamp(22px,2.6vw,30px);
  font-weight:800;
  letter-spacing:-.02em;
}
:where(.page-bump-cafe) .cafe-cta p{color:var(--muted);margin-top:6px;font-size:15.5px}

/* -----------------------------------------------------------------------
   9.2      .page-campaigns                  campaigns.html
   ----------------------------------------------------------------------- */
:where(.page-campaigns) .logo {
  font-weight:800;
  font-size:22px;
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap:8px;
}
:where(.page-campaigns) .logo-img{height:26px;width:auto;display:block}
:where(.page-campaigns) nav ul{display:flex;gap:30px;list-style:none}
:where(.page-campaigns) .nav-cta {
  border:1.5px solid var(--ink);
  padding:9px 18px;
  border-radius:8px;
  color:var(--ink)!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background-color .15s, border-color .15s, color .15s;
}
:where(.page-campaigns) .nav-cta:hover {
  background:var(--pink);
  border-color:var(--pink);
  color:#fff!important;
}
:where(.page-campaigns) .hero{padding:96px 0 60px}
:where(.page-campaigns) .hero h1 {
  font-size:clamp(36px,5.4vw,64px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:800;
  max-width:17ch;
}
:where(.page-campaigns) .hero p.lede {
  margin-top:28px;
  max-width:60ch;
  font-size:clamp(17px,2vw,21px);
  color:#333;
  line-height:1.55;
}
:where(.page-campaigns) .hero .actions{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
/* Taller than the site's default 16:7 hero band. The campaigns photograph is
   of a billboard in a metro station, and the station is half the point — the
   wider band crops the context away and leaves only the screen. */
:where(.page-campaigns) .hero-image{aspect-ratio:3/2}
:where(.page-campaigns) .section-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
:where(.page-campaigns) .section-head h2 {
  font-size:clamp(28px,3.6vw,44px);
  letter-spacing:-.02em;
  font-weight:800;
  line-height:1.05;
}
:where(.page-campaigns) .phase{padding:80px 0;border-top:1px solid var(--line)}
:where(.page-campaigns) .phase h2 {
  font-size:clamp(28px,3.6vw,42px);
  letter-spacing:-.02em;
  font-weight:800;
  margin-top:14px;
  max-width:22ch;
}
:where(.page-campaigns) .phase .intro {
  margin-top:18px;
  max-width:66ch;
  font-size:16.5px;
  color:#333;
  line-height:1.65;
}
:where(.page-campaigns) .phase .intro + .intro{margin-top:16px}
:where(.page-campaigns) .phase .intro a{border-bottom:2px solid currentColor;font-weight:700}
:where(.page-campaigns) .culminate {
  margin-top:32px;
  border:1px dashed var(--line);
  border-radius:14px;
  padding:24px 28px;
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:var(--wash);
  max-width:66ch;
}
:where(.page-campaigns) .culminate .rk {
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--mint);
  white-space:nowrap;
  padding-top:2px;
}
:where(.page-campaigns) .culminate p {
  font-size:16px;
  color:var(--ink);
  font-weight:700;
  line-height:1.5;
}
:where(.page-campaigns) .tactic-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
  margin-top:40px;
}
:where(.page-campaigns) .tactic{border:1px solid var(--line);border-radius:14px;padding:26px}
:where(.page-campaigns) .tactic .tag {
  display:inline-block;
  width:34px;
  height:6px;
  border-radius:6px;
  margin-bottom:18px;
}
:where(.page-campaigns) .tactic-grid .tactic:nth-child(1) .tag{background:var(--accent)}
:where(.page-campaigns) .tactic-grid .tactic:nth-child(2) .tag{background:var(--purple)}
:where(.page-campaigns) .tactic-grid .tactic:nth-child(3) .tag{background:var(--mint)}
:where(.page-campaigns) .tactic-grid .tactic:nth-child(4) .tag{background:var(--pink)}
:where(.page-campaigns) .tactic-grid .tactic:nth-child(5) .tag{background:var(--yellow)}
:where(.page-campaigns) .tactic h3 {
  font-size:17.5px;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:10px;
}
:where(.page-campaigns) .tactic p{font-size:14.5px;color:#444;line-height:1.55}
:where(.page-campaigns) .tactic p a{font-weight:700;border-bottom:1px solid currentColor}
:where(.page-campaigns) .cases {
  padding:90px 0;
  background:var(--wash);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
:where(.page-campaigns) .case-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:40px;
}
:where(.page-campaigns) .case {
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px;
  display:flex;
  flex-direction:column;
  transition:transform .18s,box-shadow .18s;
}
:where(.page-campaigns) .case:hover {
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.07);
}
/* Each case card carries the case study's preview image and is a link in full. */
:where(.page-campaigns) .case img {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
  border-radius:10px;
  margin-bottom:20px;
}
:where(.page-campaigns) .case .k {
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:800;
  padding:5px 12px;
  border-radius:20px;
  display:inline-block;
  width:fit-content;
}
:where(.page-campaigns) .case.c1 .k{background:rgba(180,107,240,.12);color:var(--purple)}
:where(.page-campaigns) .case.c2 .k{background:rgba(0,230,163,.14);color:#00a37a}
:where(.page-campaigns) .case.c3 .k{background:rgba(79,127,255,.12);color:var(--accent)}
:where(.page-campaigns) .case h3 {
  font-size:20px;
  font-weight:800;
  letter-spacing:-.01em;
  margin-top:16px;
}
:where(.page-campaigns) .case p{font-size:14.5px;color:#444;line-height:1.6;margin-top:12px}
:where(.page-campaigns) .case .see {
  margin-top:auto;
  padding-top:18px;
  font-weight:700;
  font-size:13.5px;
  border-top:1px solid var(--line);
  margin-top:20px;
}
:where(.page-campaigns) .cmp-cta {
  border-top:1px solid var(--line);
  padding:70px 0 90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  width:100%;
}
:where(.page-campaigns) .cmp-cta h3 {
  font-size:clamp(22px,2.6vw,30px);
  font-weight:800;
  letter-spacing:-.02em;
}
:where(.page-campaigns) .cmp-cta p {
  color:var(--muted);
  margin-top:6px;
  font-size:15.5px;
  max-width:50ch;
}

/* -----------------------------------------------------------------------
   9.3      .page-euroconsumers-idea-sprint  euroconsumers-idea-sprint.html
   ----------------------------------------------------------------------- */
:where(.page-euroconsumers-idea-sprint) header.doc-nav {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
:where(.page-euroconsumers-idea-sprint) .doc-nav-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}
:where(.page-euroconsumers-idea-sprint) .logo-img{height:22px;width:auto;display:block}
:where(.page-euroconsumers-idea-sprint) .doc-tag {
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  letter-spacing:.02em;
}
:where(.page-euroconsumers-idea-sprint) .doc-tag strong{color:var(--ink)}
:where(.page-euroconsumers-idea-sprint) .hero{padding:64px 0 0}
:where(.page-euroconsumers-idea-sprint) .hero .eyebrow{color:var(--pink)}
:where(.page-euroconsumers-idea-sprint) .hero h1 {
  margin-top:18px;
  font-size:clamp(34px,5vw,58px);
  line-height:1.06;
  letter-spacing:-.03em;
  font-weight:800;
  max-width:20ch;
}
:where(.page-euroconsumers-idea-sprint) .hero .lede {
  margin-top:20px;
  max-width:66ch;
  font-size:clamp(16px,1.8vw,19px);
  color:#333;
  line-height:1.6;
}
:where(.page-euroconsumers-idea-sprint) .ref-link {
  margin-top:28px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 22px;
  border-radius:8px;
  border:1.5px solid var(--ink);
  font-weight:800;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:background-color .15s;
}
:where(.page-euroconsumers-idea-sprint) .ref-link:hover{background:var(--wash)}
:where(.page-euroconsumers-idea-sprint) .meta-row {
  margin-top:32px;
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
}
:where(.page-euroconsumers-idea-sprint) .meta{font-size:14px;color:var(--muted)}
:where(.page-euroconsumers-idea-sprint) .meta strong {
  display:block;
  color:var(--ink);
  font-size:15px;
  font-weight:700;
  margin-bottom:2px;
}
:where(.page-euroconsumers-idea-sprint) .ref-cases {
  padding:20px 0 36px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
}
:where(.page-euroconsumers-idea-sprint) .ref-label {
  font-size:12.5px;
  color:var(--muted);
  font-weight:700;
  margin-right:2px;
}
:where(.page-euroconsumers-idea-sprint) .ref-cases a {
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  padding-bottom:1px;
  transition:border-color .15s;
}
:where(.page-euroconsumers-idea-sprint) .ref-cases a:hover{border-color:var(--ink)}
:where(.page-euroconsumers-idea-sprint) .progress {
  padding:26px 0;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:64px;
  z-index:40;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);
}
:where(.page-euroconsumers-idea-sprint) .progress-list {
  display:flex;
  gap:0;
  list-style:none;
  overflow-x:auto;
}
:where(.page-euroconsumers-idea-sprint) .progress-list a {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 20px 8px 0;
  font-size:13.5px;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
  transition:color .15s;
}
:where(.page-euroconsumers-idea-sprint) .progress-list a:hover{color:var(--ink)}
:where(.page-euroconsumers-idea-sprint) .progress-list .dot {
  width:9px;
  height:9px;
  border-radius:50%;
  flex:none;
  border:1.5px solid var(--muted);
}
:where(.page-euroconsumers-idea-sprint) .progress-list li:nth-child(1) .dot {
  border-color:var(--accent);
}
:where(.page-euroconsumers-idea-sprint) .progress-list li:nth-child(2) .dot {
  border-color:var(--purple);
}
:where(.page-euroconsumers-idea-sprint) .progress-list li:nth-child(3) .dot {
  border-color:var(--mint);
}
:where(.page-euroconsumers-idea-sprint) .progress-list li.done .dot{background:currentColor}
:where(.page-euroconsumers-idea-sprint) .progress-list li:nth-child(1).done .dot, :where(.page-euroconsumers-idea-sprint) .progress-list li:nth-child(1).done a {
  color:var(--accent);
}
:where(.page-euroconsumers-idea-sprint) .progress-list li:nth-child(2).done .dot, :where(.page-euroconsumers-idea-sprint) .progress-list li:nth-child(2).done a {
  color:var(--purple);
}
:where(.page-euroconsumers-idea-sprint) .progress-list li:nth-child(3).done .dot, :where(.page-euroconsumers-idea-sprint) .progress-list li:nth-child(3).done a {
  color:var(--mint);
}
:where(.page-euroconsumers-idea-sprint) .progress-list li.current a{color:var(--pink)}
:where(.page-euroconsumers-idea-sprint) .progress-list li.current .dot {
  border-color:var(--pink);
  background:var(--pink);
  box-shadow:0 0 0 4px rgba(255,46,146,.16);
}
:where(.page-euroconsumers-idea-sprint) .progress-list li.upcoming a{color:#bbb}
:where(.page-euroconsumers-idea-sprint) .progress-list li.upcoming .dot {
  border-color:#ddd;
  border-style:dashed;
}
:where(.page-euroconsumers-idea-sprint) .step{padding:80px 0;border-bottom:1px solid var(--line)}
:where(.page-euroconsumers-idea-sprint) .step-kicker {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:8px;
}
:where(.page-euroconsumers-idea-sprint) .step-n {
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
}
:where(.page-euroconsumers-idea-sprint) .step-status {
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 11px;
  border-radius:20px;
}
:where(.page-euroconsumers-idea-sprint) .status-done{background:var(--ink);color:#fff}
:where(.page-euroconsumers-idea-sprint) .status-current{background:var(--pink);color:#fff}
:where(.page-euroconsumers-idea-sprint) .status-upcoming {
  background:var(--wash);
  color:var(--muted);
  border:1px dashed var(--line);
}
:where(.page-euroconsumers-idea-sprint) .step h2 {
  font-size:clamp(28px,3.6vw,44px);
  letter-spacing:-.02em;
  font-weight:800;
  line-height:1.08;
  max-width:20ch;
}
:where(.page-euroconsumers-idea-sprint) .step .step-sub {
  margin-top:10px;
  font-size:15px;
  color:var(--muted);
  max-width:60ch;
}
:where(.page-euroconsumers-idea-sprint) .step .body{margin-top:30px;max-width:70ch}
:where(.page-euroconsumers-idea-sprint) .step .body p{font-size:16.5px;color:#333;line-height:1.65}
:where(.page-euroconsumers-idea-sprint) .step .body p + p{margin-top:16px}
:where(.page-euroconsumers-idea-sprint) #listen .step-n{color:var(--accent)}
:where(.page-euroconsumers-idea-sprint) #strategise .step-n{color:var(--purple)}
:where(.page-euroconsumers-idea-sprint) #ideate .step-n{color:var(--mint)}
:where(.page-euroconsumers-idea-sprint) #refine{background:var(--wash)}
:where(.page-euroconsumers-idea-sprint) #refine .step-n{color:var(--pink)}
:where(.page-euroconsumers-idea-sprint) #rollout .step-n{color:#999}
:where(.page-euroconsumers-idea-sprint) #rollout {
  border-bottom:none;
  background:var(--ink);
  color:#fff;
}
:where(.page-euroconsumers-idea-sprint) #rollout .step-sub{color:#999}
:where(.page-euroconsumers-idea-sprint) .obj-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:36px;
}
:where(.page-euroconsumers-idea-sprint) .obj {
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px;
}
:where(.page-euroconsumers-idea-sprint) .obj .tag {
  display:inline-block;
  width:30px;
  height:6px;
  border-radius:6px;
  margin-bottom:16px;
}
:where(.page-euroconsumers-idea-sprint) .obj-grid .obj:nth-child(1) .tag{background:var(--accent)}
:where(.page-euroconsumers-idea-sprint) .obj-grid .obj:nth-child(2) .tag{background:var(--purple)}
:where(.page-euroconsumers-idea-sprint) .obj-grid .obj:nth-child(3) .tag{background:var(--mint)}
:where(.page-euroconsumers-idea-sprint) .obj-grid .obj:nth-child(4) .tag{background:var(--pink)}
:where(.page-euroconsumers-idea-sprint) .obj h3 {
  font-size:16px;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
:where(.page-euroconsumers-idea-sprint) .obj p{font-size:14px;color:#444;line-height:1.55}
:where(.page-euroconsumers-idea-sprint) .success-list {
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:1px solid var(--line);
  max-width:78ch;
}
:where(.page-euroconsumers-idea-sprint) .success-item {
  display:flex;
  gap:14px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
:where(.page-euroconsumers-idea-sprint) .success-item .b {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--purple);
  margin-top:8px;
  flex:none;
}
:where(.page-euroconsumers-idea-sprint) .success-item p {
  font-size:15.5px;
  color:#333;
  line-height:1.55;
}
:where(.page-euroconsumers-idea-sprint) .narrative-grid {
  margin-top:40px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
:where(.page-euroconsumers-idea-sprint) .narrative-card {
  background:var(--ink);
  color:#fff;
  border-radius:16px;
  padding:32px;
}
:where(.page-euroconsumers-idea-sprint) .narrative-card .k {
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
  color:#999;
  margin-bottom:14px;
}
:where(.page-euroconsumers-idea-sprint) .narrative-card p {
  font-size:15.5px;
  color:#e6e6e6;
  line-height:1.65;
}
:where(.page-euroconsumers-idea-sprint) .umbrella-intro{margin-top:30px;max-width:74ch}
:where(.page-euroconsumers-idea-sprint) .umbrella-intro p {
  font-size:16.5px;
  color:#333;
  line-height:1.65;
}
:where(.page-euroconsumers-idea-sprint) .archetypes{margin-top:36px}
:where(.page-euroconsumers-idea-sprint) .archetypes-label {
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--muted);
  margin-bottom:16px;
}
:where(.page-euroconsumers-idea-sprint) .archetype-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
:where(.page-euroconsumers-idea-sprint) .archetype {
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 20px;
  background:var(--wash);
}
:where(.page-euroconsumers-idea-sprint) .archetype h4 {
  font-size:14px;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
:where(.page-euroconsumers-idea-sprint) .archetype p{font-size:13px;color:#444;line-height:1.5}
:where(.page-euroconsumers-idea-sprint) .archetype p a {
  font-weight:700;
  border-bottom:1px solid currentColor;
}
:where(.page-euroconsumers-idea-sprint) .options {
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
:where(.page-euroconsumers-idea-sprint) .option {
  border:1px solid var(--line);
  border-radius:16px;
  padding:32px;
  position:relative;
}
:where(.page-euroconsumers-idea-sprint) .option::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:5px;
  border-radius:16px 0 0 16px;
}
:where(.page-euroconsumers-idea-sprint) .options .option:nth-child(1)::before {
  background:var(--accent);
}
:where(.page-euroconsumers-idea-sprint) .options .option:nth-child(2)::before {
  background:var(--purple);
}
:where(.page-euroconsumers-idea-sprint) .options .option:nth-child(3)::before {
  background:var(--mint);
}
:where(.page-euroconsumers-idea-sprint) .options .option:nth-child(4)::before {
  background:var(--pink);
}
:where(.page-euroconsumers-idea-sprint) .option-head {
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}
:where(.page-euroconsumers-idea-sprint) .option-letter {
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
:where(.page-euroconsumers-idea-sprint) .option h3 {
  font-size:24px;
  font-weight:800;
  letter-spacing:-.01em;
}
:where(.page-euroconsumers-idea-sprint) .option .tagline {
  margin-top:6px;
  font-size:16px;
  color:#444;
  font-style:italic;
  max-width:60ch;
}
:where(.page-euroconsumers-idea-sprint) .option .big-idea {
  margin-top:18px;
  font-size:15px;
  color:#333;
  line-height:1.65;
  max-width:72ch;
}
:where(.page-euroconsumers-idea-sprint) .pc-grid {
  margin-top:22px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
:where(.page-euroconsumers-idea-sprint) .pc-grid h4 {
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
  margin-bottom:10px;
}
:where(.page-euroconsumers-idea-sprint) .pros-col h4{color:var(--mint)}
:where(.page-euroconsumers-idea-sprint) .cons-col h4{color:var(--pink)}
:where(.page-euroconsumers-idea-sprint) .pc-grid ul {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}
:where(.page-euroconsumers-idea-sprint) .pc-grid li {
  font-size:14px;
  color:#444;
  line-height:1.5;
  padding-left:16px;
  position:relative;
}
:where(.page-euroconsumers-idea-sprint) .pc-grid li::before {
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:7px;
  height:2px;
  background:currentColor;
}
:where(.page-euroconsumers-idea-sprint) .pros-col li{color:#2a6b52}
:where(.page-euroconsumers-idea-sprint) .cons-col li{color:#8a3a56}
:where(.page-euroconsumers-idea-sprint) .pros-col ul {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}
:where(.page-euroconsumers-idea-sprint) .pros-col li {
  font-size:14px;
  line-height:1.5;
  padding-left:16px;
  position:relative;
}
:where(.page-euroconsumers-idea-sprint) .pros-col li::before {
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:7px;
  height:2px;
  background:currentColor;
}
:where(.page-euroconsumers-idea-sprint) .big-idea + .pros-col{margin-top:22px}
:where(.page-euroconsumers-idea-sprint) .note-aside {
  margin-top:24px;
  padding:20px 24px;
  background:var(--wash);
  border-radius:12px;
  max-width:74ch;
  font-size:14.5px;
  color:#444;
  line-height:1.6;
}
:where(.page-euroconsumers-idea-sprint) .note-aside strong{color:var(--ink)}
:where(.page-euroconsumers-idea-sprint) .note-aside p{font-size:14.5px;color:#444;line-height:1.6}
:where(.page-euroconsumers-idea-sprint) #agenda{background:var(--wash)}
:where(.page-euroconsumers-idea-sprint) .agenda-list {
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:0;
  max-width:74ch;
}
:where(.page-euroconsumers-idea-sprint) .agenda-item {
  display:grid;
  grid-template-columns:36px 1fr;
  gap:16px;
  padding:20px 0;
  border-top:1px solid var(--line);
}
:where(.page-euroconsumers-idea-sprint) .agenda-item:first-child{border-top:none}
:where(.page-euroconsumers-idea-sprint) .agenda-item .an {
  font-size:15px;
  font-weight:800;
  color:var(--accent);
}
:where(.page-euroconsumers-idea-sprint) .agenda-item p {
  font-size:15.5px;
  color:#333;
  line-height:1.55;
}
:where(.page-euroconsumers-idea-sprint) .here-now {
  margin-top:32px;
  border:1.5px solid var(--pink);
  border-radius:16px;
  background:#fff;
  padding:30px 32px;
  max-width:74ch;
}
:where(.page-euroconsumers-idea-sprint) .here-now .rk {
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--pink);
  margin-bottom:10px;
}
:where(.page-euroconsumers-idea-sprint) .here-now p{font-size:15.5px;color:#333;line-height:1.6}
:where(.page-euroconsumers-idea-sprint) .here-now p + p{margin-top:12px}
:where(.page-euroconsumers-idea-sprint) .next-list {
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:0;
  max-width:70ch;
}
:where(.page-euroconsumers-idea-sprint) .next-item {
  display:grid;
  grid-template-columns:32px 1fr;
  gap:16px;
  padding:20px 0;
  border-top:1px solid #2a2a2a;
}
:where(.page-euroconsumers-idea-sprint) .next-item:first-child{border-top:none}
:where(.page-euroconsumers-idea-sprint) .next-item .nn{font-size:15px;font-weight:800;color:#666}
:where(.page-euroconsumers-idea-sprint) .next-item h4 {
  font-size:16px;
  font-weight:800;
  color:#fff;
  margin-bottom:4px;
}
:where(.page-euroconsumers-idea-sprint) .next-item p {
  font-size:14.5px;
  color:#bdbdbd;
  line-height:1.6;
}
:where(.page-euroconsumers-idea-sprint) .rollout-copy {
  margin-top:16px;
  font-size:16px;
  color:#ccc;
  line-height:1.65;
  max-width:70ch;
}
:where(.page-euroconsumers-idea-sprint) footer.doc-footer {
  padding:44px 0;
  border-top:1px solid var(--line);
}
:where(.page-euroconsumers-idea-sprint) footer.doc-footer .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
:where(.page-euroconsumers-idea-sprint) footer.doc-footer .logo-img{height:20px}
:where(.page-euroconsumers-idea-sprint) footer.doc-footer .note{font-size:13px;color:var(--muted)}

/* -----------------------------------------------------------------------
   9.4      .page-idea-sprint                idea-sprint.html
   ----------------------------------------------------------------------- */
/* .narrow keeps the intro copy to a readable measure without pulling the block
   out of the page grid. It previously overrode .wrap's "margin:0 auto", which
   pushed the opening paragraph flush left while the h1 above it stayed in the
   grid. Capping the children instead keeps the same 676px measure and lines the
   text up with every other section on the page. */
:where(.page-idea-sprint) .narrow > *{max-width:676px}
:where(.page-idea-sprint) .nav-cta {
  border:1.5px solid var(--ink);
  padding:9px 18px;
  border-radius:8px;
  color:var(--ink)!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background-color .15s, border-color .15s, color .15s;
}
:where(.page-idea-sprint) .nav-cta:hover {
  background:var(--pink);
  border-color:var(--pink);
  color:#fff!important;
}
:where(.page-idea-sprint) .hero{padding:80px 0 56px}
:where(.page-idea-sprint) .hero h1 {
  margin-top:22px;
  font-size:clamp(38px,6vw,72px);
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:800;
}
:where(.page-idea-sprint) .hero .lede {
  margin-top:22px;
  max-width:60ch;
  font-size:clamp(17px,2vw,21px);
  color:#333;
  line-height:1.55;
}
:where(.page-idea-sprint) .intro{padding:20px 0 70px}
:where(.page-idea-sprint) .intro p{font-size:17px;color:#333;line-height:1.65}
:where(.page-idea-sprint) .intro p + p{margin-top:18px}
:where(.page-idea-sprint) .roles{border-top:1px solid var(--line);padding:70px 0}
:where(.page-idea-sprint) .section-head{margin-bottom:36px}
:where(.page-idea-sprint) .section-head h2 {
  font-size:clamp(26px,3.2vw,36px);
  letter-spacing:-.02em;
  font-weight:800;
}
:where(.page-idea-sprint) .role-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
:where(.page-idea-sprint) .role{border-top:3px solid var(--ink);padding-top:16px}
:where(.page-idea-sprint) .role-grid .role:nth-child(1){border-top-color:var(--accent)}
:where(.page-idea-sprint) .role-grid .role:nth-child(2){border-top-color:var(--purple)}
:where(.page-idea-sprint) .role-grid .role:nth-child(3){border-top-color:var(--mint)}
:where(.page-idea-sprint) .role-grid .role:nth-child(4){border-top-color:var(--pink)}
:where(.page-idea-sprint) .role h3 {
  font-size:16.5px;
  font-weight:800;
  margin-bottom:8px;
  letter-spacing:-.01em;
}
:where(.page-idea-sprint) .role p{font-size:14.5px;color:#444;line-height:1.55}
:where(.page-idea-sprint) .steps-section{background:var(--ink);color:#fff;padding:80px 0}
:where(.page-idea-sprint) .steps-section .section-head h2{color:#fff}
:where(.page-idea-sprint) .steps-section .section-head p{color:#999}
:where(.page-idea-sprint) .step-row {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:32px;
  padding:36px 0;
  border-top:1px solid #2a2a2a;
}
:where(.page-idea-sprint) .step-row:last-child{padding-bottom:0}
:where(.page-idea-sprint) .step-row .num{display:flex;flex-direction:column;gap:12px}
:where(.page-idea-sprint) .step-row .num .n {
  font-size:13px;
  font-weight:800;
  letter-spacing:.1em;
  color:#777;
}
:where(.page-idea-sprint) .step-row .num .bar{width:30px;height:5px;border-radius:5px}
:where(.page-idea-sprint) .step-list .step-row:nth-child(1) .bar{background:var(--accent)}
:where(.page-idea-sprint) .step-list .step-row:nth-child(2) .bar{background:var(--purple)}
:where(.page-idea-sprint) .step-list .step-row:nth-child(3) .bar{background:var(--mint)}
:where(.page-idea-sprint) .step-list .step-row:nth-child(4) .bar{background:var(--pink)}
:where(.page-idea-sprint) .step-list .step-row:nth-child(5) .bar{background:var(--yellow)}
:where(.page-idea-sprint) .step-row h3 {
  font-size:22px;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:12px;
}
:where(.page-idea-sprint) .step-row p{font-size:15.5px;color:#ccc;line-height:1.65;max-width:66ch}
:where(.page-idea-sprint) .step-row p + p{margin-top:14px}
:where(.page-idea-sprint) .step-row ul {
  margin:14px 0 0;
  padding-left:18px;
  color:#ccc;
  font-size:15px;
  line-height:1.7;
  max-width:60ch;
}
:where(.page-idea-sprint) .step-row ul li{margin-bottom:4px}
:where(.page-idea-sprint) .timing-callout {
  margin:70px 0;
  border:1px dashed var(--line);
  border-radius:14px;
  padding:28px 32px;
  display:flex;
  align-items:flex-start;
  gap:16px;
}
:where(.page-idea-sprint) .timing-callout .rk {
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--accent);
  white-space:nowrap;
  padding-top:2px;
}
:where(.page-idea-sprint) .timing-callout p{font-size:15.5px;color:#444;line-height:1.6}

/* -----------------------------------------------------------------------
   9.5      .page-index                      index.html
   ----------------------------------------------------------------------- */
/* The ring mark sits inside the "What we build" block, in flow above the
   heading. The white disc reads as a held moment against the grey band, and it
   stays clear of the photo spread above the fold. */
/* Homepage promo modal — announces Connected Cup. Markup sits at the end of
   index.html, timing in js/promo-modal.js. Inline style is blocked by the CSP,
   so everything it needs lives here. Deliberately shows on top of the cookie
   banner (z-index 9999) rather than waiting for it — z-index here must stay
   above that. */
:where(.page-index) .promo {
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow-y:auto;
}
:where(.page-index) .promo[hidden]{display:none}
:where(.page-index) .promo-backdrop {
  position:absolute;
  inset:0;
  background:rgba(10,10,10,.62);
  backdrop-filter:blur(3px);
}
:where(.page-index) .promo-panel {
  position:relative;
  margin:auto 0;
  background:var(--paper);
  border-radius:18px;
  padding:44px 44px 36px;
  max-width:560px;
  width:100%;
  box-shadow:0 24px 70px rgba(0,0,0,.32);
}
:where(.page-index) .promo-close {
  position:absolute;
  top:14px;
  right:16px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
:where(.page-index) .promo-close:hover{background:var(--wash);color:var(--ink)}
:where(.page-index) .promo-eyebrow {
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--accent);
}
:where(.page-index) .promo-title {
  margin-top:12px;
  font-size:clamp(32px,5vw,46px);
  line-height:1.04;
  letter-spacing:-.03em;
  font-weight:800;
}
:where(.page-index) .promo-sub {
  margin-top:8px;
  font-size:clamp(17px,2vw,20px);
  line-height:1.3;
  font-weight:600;
  color:var(--ink);
}
:where(.page-index) .promo-panel p:not(.promo-eyebrow):not(.promo-sub) {
  margin-top:16px;
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
}
:where(.page-index) .promo-actions {
  margin-top:28px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
/* Stop the page behind scrolling while the dialog is up. */
.promo-open, .promo-open body{overflow:hidden}

:where(.page-index) .ring-divider {
  width:132px;
  height:132px;
  margin-bottom:30px;
  border-radius:50%;
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
:where(.page-index) .ring-divider .ring-mark{width:92px;height:auto;display:block;overflow:visible}
:where(.page-index) .nav-cta {
  border:1.5px solid var(--ink);
  padding:9px 18px;
  border-radius:8px;
  color:var(--ink)!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background-color .15s, border-color .15s, color .15s;
}
:where(.page-index) .nav-cta:hover {
  background:var(--pink);
  border-color:var(--pink);
  color:#fff!important;
}
:where(.page-index) .hero{padding:88px 0 56px;position:relative;overflow:hidden;text-align:center}
:where(.page-index) .hero::before {
  content:"";
  position:absolute;
  inset:-38% auto auto 50%;
  translate:-50% 0;
  width:120%;
  height:150%;
  z-index:0;
  background-image:repeating-radial-gradient(circle at 50% 0%, transparent 0 46px, rgba(180,107,240,.08) 46px 47px);
  pointer-events:none;
}
:where(.page-index) .hero .wrap{position:relative;z-index:1}
:where(.page-index) .hero h1 {
  font-size:clamp(40px,6.4vw,82px);
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:800;
  max-width:15ch;
  margin-inline:auto;
}
:where(.page-index) .hero h1 em {
  font-style:normal;
  position:relative;
  white-space:nowrap;
  color:var(--accent);
}
:where(.page-index) .hero h1 em::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:.08em;
  height:.1em;
  background:var(--accent);
  opacity:.28;
}
:where(.page-index) .hero p.lede {
  margin-top:28px;
  max-width:54ch;
  font-size:clamp(17px,2vw,21px);
  color:#333;
  line-height:1.55;
}
:where(.page-index) .hero .actions{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
:where(.page-index) .btn .arrow{font-size:14px}
:where(.page-index) .btn-solid .arrow{color:var(--mint)}
/* Hero: centred column over a fan of project photos that rises on load and is
   clipped by the hero's own bottom edge, so the cards read as peeking up. */
:where(.page-index) .hero .lede{margin-inline:auto}
:where(.page-index) .hero-pill {
  display:inline-block;
  padding:8px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
}
/* Homepage hero: a slow drifting band of case-study photography, borrowed
   from cosmos.so. Two rows moving in opposite directions, the whole band
   tilted a few degrees so it does not read as a plain strip.

   Each row's images are repeated in the markup until one set is wider than
   any viewport, then that set is emitted twice — the animation translates by
   exactly -50%, so the second set lands where the first began and the loop
   is seamless. The duration lives here rather than per element because the
   site's CSP forbids inline style attributes. */
:where(.page-index) .hero-marquee {
  margin-top:64px;
  transform:rotate(-3deg) scale(1.06);
  transform-origin:center;
}
:where(.page-index) .hm-track{overflow:hidden}
:where(.page-index) .hm-track + .hm-track{margin-top:12px}
:where(.page-index) .hm-row {
  display:flex;
  gap:12px;
  width:max-content;
  animation:hmDrift 107s linear infinite;
  will-change:transform;
}
:where(.page-index) .hm-row--back{animation-direction:reverse}
:where(.page-index) .hm-row img {
  display:block;
  width:140px;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:10px;
  background:var(--wash);
}
/* Pausing on hover lets someone actually look at a project. */
:where(.page-index) .hero-marquee:hover .hm-row{animation-play-state:paused}
@keyframes hmDrift {
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media (prefers-reduced-motion:reduce) {
  :where(.page-index) .hm-row{animation:none}
}

:where(.page-index) .thesis {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--wash);
  position:relative;
}
:where(.page-index) .thesis .wrap {
  padding:90px 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:740px;
}
:where(.page-index) .thesis h2 {
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:800;
  margin-top:10px;
}
:where(.page-index) .thesis h2 .accent{color:var(--accent)}
:where(.page-index) .thesis .body{margin-top:26px}
:where(.page-index) .thesis .body p{font-size:18px;color:#333;line-height:1.6}
:where(.page-index) .thesis .body p + p{margin-top:18px}
:where(.page-index) .thesis .more-link {
  margin-top:22px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:14.5px;
  border-bottom:2px solid var(--ink);
  padding-bottom:2px;
  transition:border-color .15s, color .15s;
}
:where(.page-index) .thesis .more-link:hover{border-color:var(--accent);color:var(--accent)}
:where(.page-index) .ways{padding:90px 0 70px}
:where(.page-index) .section-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
:where(.page-index) .section-head h2 {
  font-size:clamp(28px,3.6vw,44px);
  letter-spacing:-.02em;
  font-weight:800;
  line-height:1.05;
}
:where(.page-index) .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
:where(.page-index) .card {
  display:block;
  border:1px solid var(--line);
  border-radius:10px;
  padding:30px;
  transition:transform .18s,box-shadow .18s;
}
:where(.page-index) .card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.07)}
:where(.page-index) .card .tag {
  display:inline-block;
  width:34px;
  height:6px;
  border-radius:6px;
  margin-bottom:20px;
}
:where(.page-index) .cards .card:nth-child(1) .tag{background:var(--accent)}
:where(.page-index) .cards .card:nth-child(2) .tag{background:var(--purple)}
:where(.page-index) .cards .card:nth-child(3) .tag{background:var(--mint)}
:where(.page-index) .card h3 {
  font-size:21px;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:12px;
}
:where(.page-index) .card p{font-size:15.5px;color:#444;line-height:1.55}
:where(.page-index) .retainer {
  margin-top:24px;
  border:1px dashed var(--line);
  border-radius:10px;
  padding:22px 28px;
  display:flex;
  align-items:center;
  gap:16px;
  background:#fff;
}
:where(.page-index) .retainer .rk {
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--accent);
  white-space:nowrap;
}
:where(.page-index) .readmore{cursor:pointer;transition:border-color .15s,background .15s}
:where(.page-index) .readmore:hover{border-color:var(--ink);background:var(--wash)}
:where(.page-index) .readmore .rk{color:var(--purple)}
:where(.page-index) .readmore p{font-weight:700;color:var(--ink)}
:where(.page-index) .readmore .arrow {
  margin-left:auto;
  font-weight:800;
  font-size:18px;
  color:var(--purple);
}
:where(.page-index) .venues{padding:40px 0 90px}
:where(.page-index) .venue-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:38px;
}
:where(.page-index) .venue {
  position:relative;
  border-radius:10px;
  overflow:hidden;
  min-height:340px;
  display:flex;
  align-items:flex-end;
  color:#fff;
  transition:box-shadow .18s;
  border-top:4px solid var(--accent);
}
:where(.page-index) .venue-grid .venue:nth-child(2){border-top-color:var(--mint)}
:where(.page-index) .venue::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:var(--ink);
}
/* .has-image lays a photo over the ::before fill (which stays as the colour that
   shows while the image loads) and under the ::after gradient that keeps the
   white card text legible. */
:where(.page-index) .venue.has-image > img {
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
:where(.page-index) .venue::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.5));
  z-index:1;
}
/* The card's default ::after scrim was tuned against the solid .venue::before
   fill. A photo is far brighter, so .has-image cards get a stronger one —
   measured to keep the heading and body copy above WCAG AA over both photos. */
:where(.page-index) .venue.has-image::after {
  background:linear-gradient(180deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,.45) 40%,rgba(0,0,0,.88) 100%);
}
:where(.page-index) .venue:hover{box-shadow:0 0 0 2px var(--accent) inset}
:where(.page-index) .venue .v-body{position:relative;z-index:2;padding:32px}
:where(.page-index) .venue .v-kicker {
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--accent);
}
:where(.page-index) .venue h3 {
  font-size:28px;
  font-weight:800;
  letter-spacing:-.02em;
  margin:8px 0 10px;
}
:where(.page-index) .venue p{font-size:15.5px;max-width:42ch;line-height:1.5;opacity:.85}
:where(.page-index) .sprint{background:var(--ink);color:#fff;padding:76px 0}
:where(.page-index) .sprint .lede {
  max-width:52ch;
  font-size:clamp(14px,1.4vw,16px);
  line-height:1.4;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#999;
}
:where(.page-index) .sprint .name {
  margin-top:22px;
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}
:where(.page-index) .sprint .name h3 {
  font-size:clamp(26px,3.4vw,38px);
  font-weight:800;
  letter-spacing:-.02em;
}
:where(.page-index) .sprint .name .pill {
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid #444;
  border-radius:30px;
  padding:6px 12px;
  color:#cfcfcf;
}
:where(.page-index) .steps {
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  border-top:1px solid #2a2a2a;
}
:where(.page-index) .step {
  padding:26px 22px 26px 0;
  border-right:1px solid #2a2a2a;
  position:relative;
}
:where(.page-index) .step:last-child{border-right:none}
:where(.page-index) .step .n{font-size:13px;font-weight:800;letter-spacing:.1em;color:#777}
:where(.page-index) .step .bar{width:30px;height:5px;border-radius:5px;margin:14px 0 16px}
:where(.page-index) .steps .step:nth-child(1) .bar{background:var(--accent)}
:where(.page-index) .steps .step:nth-child(2) .bar{background:var(--purple)}
:where(.page-index) .steps .step:nth-child(3) .bar{background:var(--mint)}
:where(.page-index) .steps .step:nth-child(4) .bar{background:var(--pink)}
:where(.page-index) .steps .step:nth-child(5) .bar{background:var(--yellow)}
:where(.page-index) .step h4{font-size:18px;font-weight:800;margin-bottom:8px}
:where(.page-index) .step p{font-size:14px;color:#bdbdbd;line-height:1.5}
:where(.page-index) .sprint .link {
  margin-top:40px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  border-bottom:2px solid var(--accent);
  padding-bottom:3px;
}
:where(.page-index) .sprint .link:hover{gap:14px;transition:gap .15s}
:where(.page-index) .work{padding:90px 0}
:where(.page-index) .work-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:38px;
}
:where(.page-index) .proj {
  border-radius:10px;
  overflow:hidden;
  position:relative;
  aspect-ratio:4/3;
  display:flex;
  align-items:flex-end;
  color:#fff;
  transition:transform .18s,box-shadow .18s;
}
:where(.page-index) .work-grid .proj:last-child::before{background:var(--purple)}
:where(.page-index) .proj::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55));
}
:where(.page-index) .proj .p-body{position:relative;z-index:2;padding:22px}
:where(.page-index) .proj h3{font-size:20px;font-weight:800;letter-spacing:-.01em}
:where(.page-index) .proj span {
  font-size:13px;
  font-weight:700;
  color:var(--accent);
  letter-spacing:.04em;
}
:where(.page-index) .work-grid .proj:last-child span{color:rgba(255,255,255,.85)}
:where(.page-index) .proj:hover {
  transform:translateY(-4px);
  box-shadow:0 0 0 2px var(--accent) inset;
}

/* -----------------------------------------------------------------------
   9.6      .page-media-partnerships         media-partnerships.html
   ----------------------------------------------------------------------- */
:where(.page-media-partnerships) em{font-style:italic}
:where(.page-media-partnerships) .logo {
  font-weight:800;
  font-size:22px;
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap:8px;
}
:where(.page-media-partnerships) .logo-img{height:26px;width:auto;display:block}
:where(.page-media-partnerships) nav ul{display:flex;gap:30px;list-style:none}
:where(.page-media-partnerships) .nav-cta {
  border:1.5px solid var(--ink);
  padding:9px 18px;
  border-radius:8px;
  color:var(--ink)!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background-color .15s, border-color .15s, color .15s;
}
:where(.page-media-partnerships) .nav-cta:hover {
  background:var(--pink);
  border-color:var(--pink);
  color:#fff!important;
}
:where(.page-media-partnerships) .hero{padding:96px 0 60px}
:where(.page-media-partnerships) .hero h1 {
  font-size:clamp(36px,5.4vw,64px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:800;
  max-width:17ch;
}
:where(.page-media-partnerships) .hero p.lede {
  margin-top:28px;
  max-width:60ch;
  font-size:clamp(17px,2vw,21px);
  color:#333;
  line-height:1.55;
}
:where(.page-media-partnerships) .hero .actions {
  margin-top:36px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
:where(.page-media-partnerships) .section-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
:where(.page-media-partnerships) .section-head h2 {
  font-size:clamp(28px,3.6vw,44px);
  letter-spacing:-.02em;
  font-weight:800;
  line-height:1.05;
}
:where(.page-media-partnerships) .thinking{padding:20px 0 80px;border-top:1px solid var(--line)}
:where(.page-media-partnerships) .thinking h2 {
  font-size:clamp(27px,3.4vw,40px);
  line-height:1.12;
  letter-spacing:-.02em;
  font-weight:800;
  max-width:20ch;
}
:where(.page-media-partnerships) .thinking .body{margin-top:26px;max-width:68ch}
:where(.page-media-partnerships) .thinking .body p{font-size:17.5px;color:#333;line-height:1.65}
:where(.page-media-partnerships) .thinking .body p + p{margin-top:18px}
:where(.page-media-partnerships) .thinking .body a {
  border-bottom:2px solid var(--accent);
  font-weight:700;
  color:var(--ink);
}
:where(.page-media-partnerships) .thinking .body a:hover{color:var(--accent)}
:where(.page-media-partnerships) .why {
  background:var(--wash);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
:where(.page-media-partnerships) .why .wrap{padding:88px 32px}
:where(.page-media-partnerships) .why h2 {
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:800;
  max-width:16ch;
}
:where(.page-media-partnerships) .why-grid {
  margin-top:40px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:56px;
  align-items:start;
}
:where(.page-media-partnerships) .why .copy p {
  margin-top:16px;
  font-size:16.5px;
  color:#333;
  line-height:1.65;
}
:where(.page-media-partnerships) .why .copy p:first-of-type{margin-top:0}
:where(.page-media-partnerships) .why-list{list-style:none}
:where(.page-media-partnerships) .why-list li {
  display:flex;
  gap:16px;
  padding:18px 0;
  border-top:1px solid var(--line);
}
:where(.page-media-partnerships) .why-list li:first-child{border-top:none;padding-top:0}
:where(.page-media-partnerships) .why-list .dot {
  width:9px;
  height:9px;
  border-radius:50%;
  margin-top:7px;
  flex:none;
}
:where(.page-media-partnerships) .why-list li:nth-child(1) .dot{background:var(--accent)}
:where(.page-media-partnerships) .why-list li:nth-child(2) .dot{background:var(--purple)}
:where(.page-media-partnerships) .why-list li:nth-child(3) .dot{background:var(--mint)}
:where(.page-media-partnerships) .why-list li:nth-child(4) .dot{background:var(--pink)}
:where(.page-media-partnerships) .why-list li:nth-child(5) .dot{background:var(--yellow)}
:where(.page-media-partnerships) .why-list p{font-size:15.5px;color:#333;line-height:1.55}
:where(.page-media-partnerships) .ways-head{padding:80px 0 0}
:where(.page-media-partnerships) .product{padding:70px 0;border-top:1px solid var(--line)}
:where(.page-media-partnerships) .product h2 {
  font-size:clamp(26px,3.2vw,38px);
  letter-spacing:-.02em;
  font-weight:800;
  margin-top:14px;
  max-width:26ch;
}
:where(.page-media-partnerships) .product .intro {
  margin-top:18px;
  max-width:66ch;
  font-size:16.5px;
  color:#333;
  line-height:1.65;
}
:where(.page-media-partnerships) .product .intro a {
  border-bottom:2px solid currentColor;
  font-weight:700;
}
/* .has-image turns the dashed product frame into a real photo. */
:where(.page-media-partnerships) .product-image.has-image {
  display:block;
  background:none;
  border:0;
  overflow:hidden;
}
:where(.page-media-partnerships) .product-image.has-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
:where(.page-media-partnerships) .product-image {
  margin-top:32px;
  aspect-ratio:16/7;
  border-radius:14px;
  background:var(--wash);
  border:1px dashed var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
:where(.page-media-partnerships) .highlight-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:36px;
}
:where(.page-media-partnerships) .highlight {
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
}
:where(.page-media-partnerships) .highlight h4 {
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
:where(.page-media-partnerships) .highlight p{font-size:13.5px;color:#444;line-height:1.5}
:where(.page-media-partnerships) .steps-intro {
  margin-top:44px;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  max-width:62ch;
}
:where(.page-media-partnerships) .steps-list {
  margin-top:24px;
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
}
:where(.page-media-partnerships) .step-item {
  display:grid;
  grid-template-columns:64px 1fr;
  gap:22px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
:where(.page-media-partnerships) .step-item .n {
  font-size:13.5px;
  font-weight:800;
  letter-spacing:.08em;
}
:where(.page-media-partnerships) .step-head {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:6px;
}
:where(.page-media-partnerships) .step-item h4 {
  font-size:17px;
  font-weight:800;
  letter-spacing:-.01em;
}
:where(.page-media-partnerships) .step-head h4{margin-bottom:0}
:where(.page-media-partnerships) .step-item p {
  font-size:15px;
  color:#444;
  line-height:1.6;
  max-width:62ch;
}
:where(.page-media-partnerships) .product--mint .step-item .n{color:var(--mint)}
:where(.page-media-partnerships) .product--purple .step-item .n{color:var(--purple)}
:where(.page-media-partnerships) .product--accent .step-item .n{color:var(--accent)}
:where(.page-media-partnerships) .owner {
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
:where(.page-media-partnerships) .owner--bump{background:var(--ink);color:#fff}
:where(.page-media-partnerships) .owner--parliament {
  background:transparent;
  border:1px solid var(--ink);
  color:var(--ink);
}
:where(.page-media-partnerships) .owner--both {
  background:var(--wash);
  border:1px dashed var(--muted);
  color:var(--muted);
}
:where(.page-media-partnerships) .gallery{padding:90px 0;border-top:1px solid var(--line)}
:where(.page-media-partnerships) .gallery-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:38px;
}
:where(.page-media-partnerships) .proj-placeholder {
  border:1px dashed var(--line);
  border-radius:14px;
  aspect-ratio:4/3;
  padding:22px;
  display:flex;
  flex-direction:column;
  background:var(--wash);
}
:where(.page-media-partnerships) .proj-placeholder .ph-tag {
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}
:where(.page-media-partnerships) .proj-placeholder .ph-body{margin-top:auto}
:where(.page-media-partnerships) .proj-placeholder h3 {
  font-size:17.5px;
  font-weight:800;
  letter-spacing:-.01em;
}
:where(.page-media-partnerships) .proj-placeholder .ph-sub {
  margin-top:6px;
  font-size:12.5px;
  color:var(--muted);
  font-weight:600;
}
:where(.page-media-partnerships) .mp-cta {
  border-top:1px solid var(--line);
  padding:70px 0 90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  width:100%;
}
:where(.page-media-partnerships) .mp-cta h3 {
  font-size:clamp(22px,2.6vw,30px);
  font-weight:800;
  letter-spacing:-.02em;
}
:where(.page-media-partnerships) .mp-cta p {
  color:var(--muted);
  margin-top:6px;
  font-size:15.5px;
  max-width:50ch;
}

/* -----------------------------------------------------------------------
   9.7      .page-policy-experience-space    policy-experience-space.html
   ----------------------------------------------------------------------- */
:where(.page-policy-experience-space) .logo {
  font-weight:800;
  font-size:22px;
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap:8px;
}
:where(.page-policy-experience-space) .logo-img{height:26px;width:auto;display:block}
:where(.page-policy-experience-space) nav ul{display:flex;gap:30px;list-style:none}
:where(.page-policy-experience-space) .nav-cta {
  border:1.5px solid var(--ink);
  padding:9px 18px;
  border-radius:8px;
  color:var(--ink)!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background-color .15s, border-color .15s, color .15s;
}
:where(.page-policy-experience-space) .nav-cta:hover {
  background:var(--pink);
  border-color:var(--pink);
  color:#fff!important;
}
:where(.page-policy-experience-space) .hero{padding:96px 0 60px}
:where(.page-policy-experience-space) .hero h1 {
  font-size:clamp(36px,5.4vw,68px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:800;
  max-width:18ch;
  /* Optical alignment: "A"'s diagonal stroke has more left bearing than the
     eyebrow's "P" above it, so the two read as misaligned despite sharing
     the same box edge. */
  margin-left:-.08em;
}
:where(.page-policy-experience-space) .hero p.lede {
  margin-top:28px;
  max-width:54ch;
  font-size:clamp(17px,2vw,21px);
  color:#333;
  line-height:1.55;
}
:where(.page-policy-experience-space) .hero .actions {
  margin-top:36px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
:where(.page-policy-experience-space) .section-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
:where(.page-policy-experience-space) .section-head h2 {
  font-size:clamp(28px,3.6vw,44px);
  letter-spacing:-.02em;
  font-weight:800;
  line-height:1.05;
}
:where(.page-policy-experience-space) .highlight {
  border:1px solid var(--line);
  border-radius:14px;
  padding:26px;
}
:where(.page-policy-experience-space) .highlight p {
  font-size:14.5px;
  color:#333;
  line-height:1.55;
  font-weight:600;
}
:where(.page-policy-experience-space) .process-group{margin-top:50px}
:where(.page-policy-experience-space) .process-group h3 {
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#888;
  font-weight:800;
  margin-bottom:18px;
}
:where(.page-policy-experience-space) .process-steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid #2a2a2a;
}
:where(.page-policy-experience-space) .process-step {
  padding:24px 20px 24px 0;
  border-right:1px solid #2a2a2a;
}
:where(.page-policy-experience-space) .process-step .top {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
}
:where(.page-policy-experience-space) .process-step .cat {
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#777;
  font-weight:700;
}
:where(.page-policy-experience-space) .process-step .bar {
  width:28px;
  height:5px;
  border-radius:5px;
  margin:12px 0 14px;
}
:where(.page-policy-experience-space) .process-steps .process-step:nth-child(2) .bar {
  background:var(--purple);
}
:where(.page-policy-experience-space) .process-steps .process-step:nth-child(3) .bar {
  background:var(--mint);
}
:where(.page-policy-experience-space) .process-steps .process-step:nth-child(4) .bar {
  background:var(--pink);
}
:where(.page-policy-experience-space) .process-step h4 {
  font-size:16.5px;
  font-weight:800;
  margin-bottom:8px;
  letter-spacing:-.01em;
}
:where(.page-policy-experience-space) .process-step p.desc {
  font-size:13.5px;
  color:#bdbdbd;
  line-height:1.5;
}
:where(.page-policy-experience-space) .process-step ul {
  margin:10px 0 0;
  padding-left:16px;
  color:#bdbdbd;
  font-size:12.5px;
  line-height:1.5;
}
:where(.page-policy-experience-space) .process-step ul li{margin-bottom:4px}
:where(.page-policy-experience-space) .process-step .timing {
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid #2a2a2a;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#777;
}
:where(.page-policy-experience-space) .process-step .timing strong{color:#fff;font-weight:800}
:where(.page-policy-experience-space) .gallery{padding:90px 0}
:where(.page-policy-experience-space) .gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:38px;
}
:where(.page-policy-experience-space) .proj {
  border-radius:14px;
  overflow:hidden;
  position:relative;
  aspect-ratio:4/3;
  display:flex;
  align-items:flex-end;
  color:#fff;
  transition:transform .18s;
}
:where(.page-policy-experience-space) .proj:hover{transform:translateY(-4px)}
:where(.page-policy-experience-space) .gallery-grid .proj.proj--featured::before {
  background:var(--accent);
}
:where(.page-policy-experience-space) .proj::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.5));
}
:where(.page-policy-experience-space) .proj .p-body{position:relative;z-index:2;padding:22px}
:where(.page-policy-experience-space) .proj h3 {
  font-size:19px;
  font-weight:800;
  letter-spacing:-.01em;
}
:where(.page-policy-experience-space) .proj span {
  font-size:12.5px;
  font-weight:700;
  color:var(--accent);
  letter-spacing:.04em;
}
:where(.page-policy-experience-space) .gallery-grid .proj.proj--featured span {
  color:rgba(255,255,255,.85);
}
:where(.page-policy-experience-space) .partner {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--wash);
}
:where(.page-policy-experience-space) .partner .wrap {
  padding:84px 32px;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:56px;
  align-items:start;
}
:where(.page-policy-experience-space) .partner h2 {
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:800;
}
:where(.page-policy-experience-space) .partner h2 .accent{color:var(--accent)}
:where(.page-policy-experience-space) .partner .intro {
  font-size:16px;
  color:#444;
  margin-top:16px;
  max-width:38ch;
}
:where(.page-policy-experience-space) .partner-list{list-style:none}
:where(.page-policy-experience-space) .partner-list li {
  display:flex;
  gap:18px;
  padding:20px 0;
  border-top:1px solid var(--line);
}
:where(.page-policy-experience-space) .partner-list li:first-child{border-top:none;padding-top:0}
:where(.page-policy-experience-space) .partner-list .num {
  font-size:20px;
  font-weight:800;
  color:var(--accent);
  min-width:32px;
}
:where(.page-policy-experience-space) .partner-list p{font-size:15px;color:#333;line-height:1.55}
:where(.page-policy-experience-space) .faq{padding:90px 0}
:where(.page-policy-experience-space) .faq-category{margin-top:48px}
:where(.page-policy-experience-space) .faq-category:first-child{margin-top:44px}
:where(.page-policy-experience-space) .faq-category h3 {
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:800;
  margin-bottom:8px;
}
:where(.page-policy-experience-space) .faq-list{margin-top:8px}
:where(.page-policy-experience-space) .faq-item{padding:24px 0;border-bottom:1px solid var(--line)}
:where(.page-policy-experience-space) .faq-item p {
  font-size:14.5px;
  color:#444;
  line-height:1.6;
  max-width:62ch;
}
:where(.page-policy-experience-space) .pes-cta {
  border-top:1px solid var(--line);
  padding:70px 0 90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
:where(.page-policy-experience-space) .pes-cta h3 {
  font-size:clamp(22px,2.6vw,30px);
  font-weight:800;
  letter-spacing:-.02em;
}
:where(.page-policy-experience-space) .pes-cta p {
  color:var(--muted);
  margin-top:6px;
  font-size:15.5px;
}

/* -----------------------------------------------------------------------
   9.8      .page-policy-experiences         policy-experiences.html
   ----------------------------------------------------------------------- */
:where(.page-policy-experiences) .nav-cta {
  border:1.5px solid var(--ink);
  padding:9px 18px;
  border-radius:8px;
  color:var(--ink)!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background-color .15s, border-color .15s, color .15s;
}
:where(.page-policy-experiences) .nav-cta:hover {
  background:var(--pink);
  border-color:var(--pink);
  color:#fff!important;
}
:where(.page-policy-experiences) .hero{padding:80px 0 64px}
:where(.page-policy-experiences) .hero h1 {
  font-size:clamp(38px,5.6vw,68px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:800;
  max-width:16ch;
}
:where(.page-policy-experiences) .hero .lede {
  margin-top:22px;
  max-width:60ch;
  font-size:clamp(16px,1.8vw,19px);
  color:#333;
  line-height:1.55;
}
:where(.page-policy-experiences) .hero .actions {
  margin-top:32px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
:where(.page-policy-experiences) .types{padding:10px 0 40px}
:where(.page-policy-experiences) .type-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  padding:64px 0;
  border-top:1px solid var(--line);
}
:where(.page-policy-experiences) .type-row:first-child{border-top:none;padding-top:0}
:where(.page-policy-experiences) .type-row.reverse .type-photo{order:2}
:where(.page-policy-experiences) .type-photo {
  aspect-ratio:4/3;
  border-radius:10px;
  background:var(--frame);
  border:1px solid var(--frame-line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#666;
}
/* .has-image swaps the icon-and-label placeholder frame for a real photo. The
   --frame background stays as the colour shown while the image loads. */
:where(.page-policy-experiences) .type-photo.has-image {
  display:block;
  border:0;
  overflow:hidden;
}
:where(.page-policy-experiences) .type-photo.has-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

:where(.page-policy-experiences) .type-content .tag {
  display:inline-block;
  width:34px;
  height:6px;
  border-radius:6px;
  margin-bottom:18px;
}
:where(.page-policy-experiences) .type-content h2 {
  font-size:clamp(24px,3vw,32px);
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:14px;
}
:where(.page-policy-experiences) .type-content p{font-size:16px;color:#444;line-height:1.6}
:where(.page-policy-experiences) .type-content .more-link {
  margin-top:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:13.5px;
  border-bottom:2px solid var(--ink);
  padding-bottom:2px;
}
:where(.page-policy-experiences) .type-content .more-link:hover{gap:12px;transition:gap .15s}
:where(.page-policy-experiences) .case-list{margin-top:28px}
:where(.page-policy-experiences) .case-list .k {
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
  margin-bottom:10px;
  display:block;
}
:where(.page-policy-experiences) .case-list .items{display:flex;flex-wrap:wrap;gap:10px}
:where(.page-policy-experiences) .case-list a {
  border:1px solid var(--line);
  border-radius:40px;
  padding:8px 16px;
  font-size:13.5px;
  font-weight:700;
  transition:border-color .15s,color .15s;
}
:where(.page-policy-experiences) .row-1 .tag{color:var(--accent)}
:where(.page-policy-experiences) .row-1 .case-list a:hover {
  border-color:var(--accent);
  color:var(--accent);
}
:where(.page-policy-experiences) .row-2 .tag{background:var(--purple)}
:where(.page-policy-experiences) .row-2 .case-list a:hover {
  border-color:var(--purple);
  color:var(--purple);
}
:where(.page-policy-experiences) .row-3 .tag{background:var(--mint)}
:where(.page-policy-experiences) .row-3 .case-list a:hover {
  border-color:var(--mint);
  color:var(--mint);
}
:where(.page-policy-experiences) .row-4 .tag{background:var(--pink)}
:where(.page-policy-experiences) .pe-cta {
  border-top:1px solid var(--line);
  padding:70px 0 90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
:where(.page-policy-experiences) .pe-cta h3 {
  font-size:clamp(22px,2.6vw,28px);
  font-weight:800;
  letter-spacing:-.02em;
}
:where(.page-policy-experiences) .pe-cta p{color:var(--muted);margin-top:6px;font-size:15px}

/* -----------------------------------------------------------------------
   9.9      .page-policymicrocommunities     policymicrocommunities.html
   ----------------------------------------------------------------------- */
:where(.page-policymicrocommunities) .nav-cta {
  border:1.5px solid var(--ink);
  padding:9px 18px;
  border-radius:8px;
  color:var(--ink)!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background-color .15s, border-color .15s, color .15s;
}
:where(.page-policymicrocommunities) .nav-cta:hover {
  background:var(--pink);
  border-color:var(--pink);
  color:#fff!important;
}
:where(.page-policymicrocommunities) .hero{padding:80px 0 60px}
:where(.page-policymicrocommunities) .hero .wrap {
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:40px;
  align-items:center;
}
:where(.page-policymicrocommunities) .hero h1 {
  margin-top:22px;
  font-size:clamp(34px,5vw,60px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:800;
  max-width:22ch;
  text-wrap:balance;
}
:where(.page-policymicrocommunities) .hero .lede {
  margin-top:22px;
  max-width:62ch;
  font-size:clamp(16px,1.8vw,19px);
  color:#333;
  line-height:1.55;
}
:where(.page-policymicrocommunities) .hero-visual {
  display:flex;
  align-items:center;
  justify-content:center;
}
:where(.page-policymicrocommunities) .hero-visual .ring-mark {
  display:block;
  width:100%;
  max-width:420px;
  height:auto;
  overflow:visible;
}
:where(.page-policymicrocommunities) .section-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:36px;
}
:where(.page-policymicrocommunities) .section-head h2 {
  font-size:clamp(26px,3.4vw,40px);
  letter-spacing:-.02em;
  font-weight:800;
  line-height:1.1;
}
:where(.page-policymicrocommunities) .structure {
  padding:20px 0 80px;
  border-top:1px solid var(--line);
}
:where(.page-policymicrocommunities) .individual{padding:80px 0;border-top:1px solid var(--line)}
:where(.page-policymicrocommunities) .intro-copy{max-width:64ch;margin-bottom:8px}
:where(.page-policymicrocommunities) .intro-copy p {
  margin-top:18px;
  font-size:17.5px;
  color:#333;
  line-height:1.6;
}
:where(.page-policymicrocommunities) .rules {
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:62ch;
}
:where(.page-policymicrocommunities) .rule{display:flex;gap:14px;align-items:flex-start}
:where(.page-policymicrocommunities) .rule .b {
  width:30px;
  height:6px;
  border-radius:6px;
  margin-top:9px;
  flex:none;
}
:where(.page-policymicrocommunities) .rule:nth-child(1) .b{background:var(--accent)}
:where(.page-policymicrocommunities) .rule:nth-child(2) .b{background:var(--purple)}
:where(.page-policymicrocommunities) .rule:nth-child(3) .b{background:var(--mint)}
:where(.page-policymicrocommunities) .rule p{font-size:16px;color:#333;margin:0}
:where(.page-policymicrocommunities) .rule strong{color:var(--ink)}
:where(.page-policymicrocommunities) .caveat {
  margin-top:30px;
  font-size:13.5px;
  color:var(--muted);
  line-height:1.6;
  max-width:70ch;
}
:where(.page-policymicrocommunities) .roles-section {
  padding:70px 0;
  background:var(--wash);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
:where(.page-policymicrocommunities) .roles-visual {
  display:flex;
  justify-content:center;
  margin:8px 0 44px;
}
:where(.page-policymicrocommunities) .roles-visual .dot-mark{width:240px;height:auto;display:block}
:where(.page-policymicrocommunities) .roles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
:where(.page-policymicrocommunities) .role {
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px;
  background:#fff;
  transition:transform .18s,box-shadow .18s;
}
:where(.page-policymicrocommunities) .role:hover {
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.07);
}
:where(.page-policymicrocommunities) .role .tag {
  display:inline-block;
  width:34px;
  height:6px;
  border-radius:6px;
  margin-bottom:18px;
}
:where(.page-policymicrocommunities) .role.askers .tag{background:var(--pink)}
:where(.page-policymicrocommunities) .role.asked .tag{background:var(--accent)}
:where(.page-policymicrocommunities) .role.inter .tag{background:var(--mint)}
:where(.page-policymicrocommunities) .role h3 {
  font-size:20px;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:10px;
}
:where(.page-policymicrocommunities) .role p{font-size:15px;color:#444;line-height:1.55}
/* Equal until eclipsed. Two panels of the same community, the second with one
   member grown large enough to cover the others. The rings inherit currentColor
   so the pair sits on the page palette rather than carrying its own. */
:where(.page-policymicrocommunities) .eclipse-section{padding:80px 0;border-bottom:1px solid var(--line)}
:where(.page-policymicrocommunities, .page-feve) .eclipse {
  margin-top:44px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
:where(.page-policymicrocommunities, .page-feve) .ec-panel{margin:0;color:var(--ink)}
:where(.page-policymicrocommunities, .page-feve) .ec-mark {
  width:100%;
  max-width:300px;
  height:auto;
  display:block;
  margin:0 auto;
}
:where(.page-policymicrocommunities, .page-feve) .ec-panel figcaption {
  margin:26px auto 0;
  font-size:16px;
  color:#333;
  line-height:1.6;
  text-align:center;
  max-width:38ch;
}
:where(.page-policymicrocommunities, .page-feve) .eclipse-note {
  margin:48px auto 0;
  max-width:62ch;
  font-size:17px;
  color:#333;
  line-height:1.65;
  text-align:center;
}

:where(.page-policymicrocommunities) .engines-section{padding:80px 0}
:where(.page-policymicrocommunities) .engines {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
:where(.page-policymicrocommunities) .engine{border-top:3px solid var(--ink);padding-top:16px}
:where(.page-policymicrocommunities) .engine .b {
  width:30px;
  height:6px;
  border-radius:6px;
  margin-bottom:14px;
}
:where(.page-policymicrocommunities) .engine:nth-child(1) .b{background:var(--accent)}
:where(.page-policymicrocommunities) .engine:nth-child(2) .b{background:var(--purple)}
:where(.page-policymicrocommunities) .engine:nth-child(3) .b{background:var(--mint)}
:where(.page-policymicrocommunities) .engine:nth-child(4) .b{background:var(--pink)}
:where(.page-policymicrocommunities) .engine:nth-child(5) .b{background:var(--yellow)}
:where(.page-policymicrocommunities) .engine:nth-child(6) .b{background:var(--accent)}
:where(.page-policymicrocommunities) .engine h3 {
  font-size:17.5px;
  font-weight:800;
  margin-bottom:8px;
  letter-spacing:-.01em;
}
:where(.page-policymicrocommunities) .engine p{font-size:14.5px;color:#444;line-height:1.5}
:where(.page-policymicrocommunities) .needs-section {
  padding:80px 0;
  background:var(--wash);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
:where(.page-policymicrocommunities) .needs{display:grid;grid-template-columns:1fr 1fr;gap:24px}
:where(.page-policymicrocommunities) .need {
  border-radius:14px;
  padding:32px;
  border:1px solid var(--line);
}
:where(.page-policymicrocommunities) .need.declared{background:#fff}
:where(.page-policymicrocommunities) .need.underlying {
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
:where(.page-policymicrocommunities) .need .k {
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  margin-bottom:8px;
}
:where(.page-policymicrocommunities) .need.declared .k{color:var(--accent)}
:where(.page-policymicrocommunities) .need.underlying .k{color:var(--pink)}
:where(.page-policymicrocommunities) .need h3 {
  font-size:21px;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:18px;
}
:where(.page-policymicrocommunities) .need ul{list-style:none;display:flex;flex-wrap:wrap;gap:9px}
:where(.page-policymicrocommunities) .need li {
  font-size:14px;
  font-weight:600;
  border-radius:30px;
  padding:8px 14px;
}
:where(.page-policymicrocommunities) .need.declared li {
  background:var(--wash);
  color:#333;
  border:1px solid var(--line);
}
:where(.page-policymicrocommunities) .need.underlying li {
  background:#1b1b1b;
  color:#e8e8e8;
  border:1px solid #2f2f2f;
}
:where(.page-policymicrocommunities) .need .note{margin-top:18px;font-size:14px;line-height:1.5}
:where(.page-policymicrocommunities) .need.declared .note{color:var(--muted)}
:where(.page-policymicrocommunities) .need.underlying .note{color:#9a9a9a}
:where(.page-policymicrocommunities) .needs-punch {
  margin-top:32px;
  font-size:clamp(20px,2.8vw,28px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.25;
  max-width:34ch;
}
:where(.page-policymicrocommunities) .dark-block{background:var(--ink);color:#fff;padding:80px 0}
:where(.page-policymicrocommunities) .dark-block .lede {
  max-width:60ch;
  font-size:clamp(18px,2.2vw,26px);
  line-height:1.4;
  font-weight:700;
  letter-spacing:-.01em;
}
:where(.page-policymicrocommunities) .dark-block .sub {
  margin-top:16px;
  max-width:64ch;
  color:#bdbdbd;
  font-size:16px;
  line-height:1.6;
}
:where(.page-policymicrocommunities) .seek {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
  max-width:64ch;
}
:where(.page-policymicrocommunities) .seek span {
  font-size:14.5px;
  font-weight:700;
  border:1px solid #2f2f2f;
  border-radius:30px;
  padding:10px 16px;
  color:#e0e0e0;
}
:where(.page-policymicrocommunities) .statement{padding:80px 0;border-bottom:1px solid var(--line)}
:where(.page-policymicrocommunities) .statement h2 {
  font-size:clamp(28px,4vw,46px);
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:800;
  max-width:20ch;
}
:where(.page-policymicrocommunities) .statement p.sub {
  margin-top:22px;
  max-width:62ch;
  font-size:clamp(16px,1.8vw,18px);
  color:#333;
  line-height:1.6;
}
:where(.page-policymicrocommunities) .divider{background:var(--ink);color:#fff;padding:90px 0}
:where(.page-policymicrocommunities) .divider .eyebrow{color:#888}
:where(.page-policymicrocommunities) .divider h2 {
  font-size:clamp(32px,5vw,58px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:800;
  margin-top:14px;
  max-width:22ch;
}
:where(.page-policymicrocommunities) .divider h2 .accent{color:var(--mint);display:block}
:where(.page-policymicrocommunities) .divider .closing-line {
  margin-top:22px;
  max-width:52ch;
  font-size:clamp(17px,2.1vw,23px);
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.01em;
}
:where(.page-policymicrocommunities) .divider .sub {
  margin-top:20px;
  max-width:60ch;
  color:#bdbdbd;
  font-size:17px;
  line-height:1.6;
}
:where(.page-policymicrocommunities) .pmc-cta {
  border-top:1px solid var(--line);
  padding:70px 0 90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  width:100%;
}
:where(.page-policymicrocommunities) .pmc-cta h3 {
  font-size:clamp(22px,2.6vw,28px);
  font-weight:800;
  letter-spacing:-.02em;
}
:where(.page-policymicrocommunities) .pmc-cta p{color:var(--muted);margin-top:6px;font-size:15px}

/* -----------------------------------------------------------------------
   9.10     .page-team                       team.html
   ----------------------------------------------------------------------- */
:where(.page-team) .logo {
  font-weight:800;
  font-size:22px;
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap:8px;
}
:where(.page-team) .logo-img{height:26px;width:auto;display:block}
:where(.page-team) nav ul{display:flex;gap:30px;list-style:none}
:where(.page-team) .nav-cta {
  border:1.5px solid var(--ink);
  padding:9px 18px;
  border-radius:8px;
  color:var(--ink)!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background-color .15s, border-color .15s, color .15s;
}
:where(.page-team) .nav-cta:hover {
  background:var(--pink);
  border-color:var(--pink);
  color:#fff!important;
}
:where(.page-team) .hero{padding:96px 0 60px}
:where(.page-team) .hero h1 {
  font-size:clamp(36px,5.4vw,64px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:800;
  max-width:20ch;
}
:where(.page-team) .team{padding:10px 0 100px}
:where(.page-team) .team-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:34px 28px;
  margin-top:10px;
}
:where(.page-team) .person{display:flex;flex-direction:column;gap:4px}
:where(.page-team) .avatar {
  aspect-ratio:1/1;
  border-radius:14px;
  margin-bottom:14px;
  width:100%;
  object-fit:cover;
  display:block;
  background:var(--wash);
}
:where(.page-team) .person h3{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
:where(.page-team) .person .role {
  font-size:13.5px;
  color:var(--muted);
  font-weight:600;
  margin-top:2px;
}
:where(.page-team) .person a.email {
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  width:fit-content;
  margin-top:8px;
}
:where(.page-team) .person a.email:hover{border-color:var(--ink)}
:where(.page-team) .team-cta {
  margin-top:80px;
  border-top:1px solid var(--line);
  padding-top:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
:where(.page-team) .team-cta h3 {
  font-size:clamp(22px,2.6vw,30px);
  font-weight:800;
  letter-spacing:-.02em;
}
:where(.page-team) .team-cta p{color:var(--muted);margin-top:6px;font-size:15.5px}

/* -----------------------------------------------------------------------
   9.11     .case-study                      case study template — tiktok-house.html
            and every case study page (they share this one block)
   ----------------------------------------------------------------------- */
:where(.case-study) button{font:inherit}
:where(.case-study) .narrow{max-width:760px}
:where(.case-study) .nav-cta {
  border:1.5px solid var(--ink);
  padding:9px 18px;
  border-radius:8px;
  color:var(--ink)!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
:where(.case-study) .nav-cta:hover{background:var(--ink);color:#fff!important}
:where(.case-study) .case-hero{padding:56px 0 0}
:where(.case-study) .case-hero .back {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
}
:where(.case-study) .case-hero .back .arrow{font-size:15px;font-weight:800}
:where(.case-study) .case-hero .back:hover{color:var(--ink)}
:where(.case-study) .case-hero h1 {
  margin-top:22px;
  font-size:clamp(38px,6vw,68px);
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:800;
}
:where(.case-study) .case-hero .lede {
  margin-top:18px;
  max-width:56ch;
  font-size:clamp(16px,1.8vw,19px);
  color:#333;
  line-height:1.55;
}
:where(.case-study) .meta-row {
  display:flex;
  gap:44px;
  flex-wrap:wrap;
  margin-top:36px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
:where(.case-study) .meta-item{display:flex;flex-direction:column;gap:5px}
:where(.case-study) .meta-k {
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}
:where(.case-study) .meta-v{font-size:15px;font-weight:800}
/* .has-image turns the placeholder cover frame into the project's cover photo.
   --frame stays behind it as the colour shown while the image loads. */
:where(.case-study) .cover.has-image {
  display:block;
  border:0;
  overflow:hidden;
}
:where(.case-study) .cover.has-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
:where(.case-study) .cover {
  margin-top:40px;
  aspect-ratio:16/8;
  border-radius:10px;
  background:var(--frame);
  border:1px solid var(--frame-line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#666;
}
:where(.case-study) .cover span {
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:#777;
}
:where(.case-study) .challenge{padding:70px 0}
:where(.case-study) .challenge p{font-size:18px;color:#333;line-height:1.65}
:where(.case-study) .challenge p + p{margin-top:20px}
:where(.case-study) .gallery{padding:20px 0 90px;border-top:1px solid var(--line)}
:where(.case-study) .gallery{padding-top:70px}
:where(.case-study) .section-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:36px;
}
:where(.case-study) .section-head h2 {
  font-size:clamp(24px,3vw,34px);
  letter-spacing:-.02em;
  font-weight:800;
}
:where(.case-study) .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* .has-image swaps a gallery tile's icon placeholder for the photo itself. */
:where(.case-study) .gallery-item.has-image {
  display:block;
  padding:0;
  border:0;
  overflow:hidden;
}
:where(.case-study) .gallery-item.has-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .3s;
}
:where(.case-study) .gallery-item.has-image:hover img{transform:scale(1.04)}
:where(.case-study) .gallery-item {
  aspect-ratio:4/3;
  border-radius:10px;
  background:var(--frame);
  border:1px solid var(--frame-line);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#666;
  transition:transform .18s,border-color .18s;
  padding:0;
  width:100%;
}
:where(.case-study) .gallery-item:hover {
  transform:translateY(-3px);
  border-color:var(--accent);
}
:where(.case-study) .gallery-item svg{width:26px;height:26px;opacity:.5}
:where(.case-study) .gallery-item span {
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
  color:#777;
}
:where(.case-study) .lightbox {
  position:fixed;
  inset:0;
  background:rgba(6,6,6,.95);
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:32px;
}
:where(.case-study) .lightbox.is-open{display:flex}
:where(.case-study) .lightbox-stage img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:12px;
}
:where(.case-study) .lightbox-stage {
  width:min(880px,80vw);
  aspect-ratio:16/10;
  background:var(--frame);
  border:1px solid var(--frame-line);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#777;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
}
:where(.case-study) .lightbox-close {
  position:absolute;
  top:26px;
  right:30px;
  background:none;
  border:none;
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  opacity:.8;
}
:where(.case-study) .lightbox-close:hover{opacity:1}
:where(.case-study) .lightbox-nav {
  background:none;
  border:1.5px solid rgba(255,255,255,.3);
  color:#fff;
  width:44px;
  height:44px;
  border-radius:50%;
  font-size:17px;
  cursor:pointer;
  flex-shrink:0;
  transition:border-color .15s;
  margin:0 22px;
}
:where(.case-study) .lightbox-nav:hover{border-color:var(--accent)}
:where(.case-study) .video-section{padding:0 0 90px}
/* Responsive 16:9 frame for an embedded episode player. */
:where(.case-study) .video-embed {
  position:relative;
  padding-bottom:56.25%;
  height:0;
  border-radius:12px;
  overflow:hidden;
  background:var(--frame);
}
:where(.case-study) .video-embed-facade {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:var(--frame);
  border:0;
  cursor:pointer;
}
:where(.case-study) .video-embed-play {
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s;
}
:where(.case-study) .video-embed-play::before {
  content:"";
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
  margin-left:4px;
}
:where(.case-study) .video-embed-facade:hover .video-embed-play{transform:scale(1.08)}
:where(.case-study) .video-embed-label {
  color:#fff;
  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;
}
:where(.case-study) .video-embed iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
:where(.case-study) .case-cta {
  border-top:1px solid var(--line);
  padding:60px 0 90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
:where(.case-study) .case-cta h3 {
  font-size:clamp(22px,2.6vw,28px);
  font-weight:800;
  letter-spacing:-.02em;
}
:where(.case-study) .case-cta p{color:var(--muted);margin-top:6px;font-size:15px}
:where(.case-study) .more-work{border-top:1px solid var(--line);padding:60px 0}
:where(.case-study) .more-work-list{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px}
:where(.case-study) .more-work-list a {
  border:1px solid var(--line);
  border-radius:40px;
  padding:10px 20px;
  font-size:14px;
  font-weight:700;
  transition:border-color .15s,color .15s;
}
:where(.case-study) .more-work-list a:hover{border-color:var(--accent);color:var(--accent)}

/* -----------------------------------------------------------------------
   9.12     .page-venues                     venues.html
   ----------------------------------------------------------------------- */
:where(.page-venues) .nav-cta {
  border:1.5px solid var(--ink);
  padding:9px 18px;
  border-radius:8px;
  color:var(--ink)!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background-color .15s, border-color .15s, color .15s;
}
:where(.page-venues) .nav-cta:hover {
  background:var(--pink);
  border-color:var(--pink);
  color:#fff!important;
}
:where(.page-venues) .hero{padding:80px 0 60px}
:where(.page-venues) .hero h1 {
  font-size:clamp(38px,5.6vw,68px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:800;
  max-width:16ch;
}
:where(.page-venues) .hero .lede {
  margin-top:22px;
  max-width:62ch;
  font-size:clamp(16px,1.8vw,19px);
  color:#333;
  line-height:1.55;
}
:where(.page-venues) .venues-list{padding:10px 0 30px}
:where(.page-venues) .venue-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  padding:60px 0;
  border-top:1px solid var(--line);
}
:where(.page-venues) .venue-row:first-child{border-top:none;padding-top:0}
:where(.page-venues) .venue-row.reverse .venue-photo{order:2}
:where(.page-venues) .venue-photo {
  aspect-ratio:4/3;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  background:var(--ink);
  display:flex;
  align-items:flex-end;
  color:#fff;
}
:where(.page-venues) .venue-photo::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.5));
}
:where(.page-venues) .venue-photo .v-tag {
  position:relative;
  z-index:2;
  padding:24px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:rgba(255,255,255,.6);
}
:where(.page-venues) .venue-photo img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
/* the gradient exists to keep the .v-tag caption legible; a real photo has none */
:where(.page-venues) .venue-photo.has-image::after{content:none}
:where(.page-venues) .venue-content .tag {
  display:inline-block;
  width:34px;
  height:6px;
  border-radius:6px;
  margin-bottom:18px;
}
:where(.page-venues) .row-2 .tag{background:var(--mint)}
:where(.page-venues) .venue-content .kicker {
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
  margin-bottom:10px;
  display:block;
}
:where(.page-venues) .venue-content .meta-line{margin-bottom:10px}
:where(.page-venues) .venue-content h2 {
  font-size:clamp(26px,3.2vw,36px);
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:14px;
}
:where(.page-venues) .venue-content p{font-size:16px;color:#444;line-height:1.6}
:where(.page-venues) .venue-content .more-link {
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:14px;
  border-bottom:2px solid var(--ink);
  padding-bottom:2px;
}
:where(.page-venues) .row-1 .more-link:hover {
  border-color:var(--accent);
  color:var(--accent);
  transition:border-color .15s, color .15s;
}
:where(.page-venues) .row-2 .more-link:hover {
  border-color:var(--mint);
  color:var(--mint);
  transition:border-color .15s, color .15s;
}
:where(.page-venues) .callouts{padding:30px 0 90px}
:where(.page-venues) .callout {
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px 32px;
  display:flex;
  align-items:flex-start;
  gap:16px;
}
:where(.page-venues) .callout + .callout{margin-top:24px}
:where(.page-venues) .callout-body{flex:1}
:where(.page-venues) .callout-act{margin-top:18px}
:where(.page-venues) .callout-act .btn{min-height:44px;display:inline-flex;align-items:center;text-transform:none;letter-spacing:.01em;font-size:14px}
:where(.page-venues) .callout.note{background:var(--wash);border-color:var(--wash)}
:where(.page-venues) .callout .rk {
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  white-space:nowrap;
  padding-top:2px;
}
:where(.page-venues) .callout.note .rk{color:var(--pink)}
:where(.page-venues) .callout.agency .rk{color:var(--accent)}
:where(.page-venues) .callout p{font-size:15px;color:#333;line-height:1.6}
:where(.page-venues) .callout.agency{border-style:dashed}
:where(.page-venues) .callout a.inline-link {
  font-weight:700;
  border-bottom:2px solid var(--ink);
  padding-bottom:1px;
}

/* -----------------------------------------------------------------------
   9.13     .page-work                       work.html
   ----------------------------------------------------------------------- */
:where(.page-work) .nav-cta {
  border:1.5px solid var(--ink);
  padding:9px 18px;
  border-radius:8px;
  color:var(--ink)!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
:where(.page-work) .nav-cta:hover{background:var(--ink);color:#fff!important}
:where(.page-work) .hero{padding:80px 0 60px}
:where(.page-work) .hero h1 {
  font-size:clamp(38px,5.6vw,68px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:800;
  max-width:16ch;
}
:where(.page-work) .hero .lede {
  margin-top:22px;
  max-width:60ch;
  font-size:clamp(16px,1.8vw,19px);
  color:#333;
  line-height:1.55;
}
:where(.page-work) .work{padding:10px 0 100px}
:where(.page-work) .work-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:16px;
}
:where(.page-work) .proj {
  border-radius:10px;
  overflow:hidden;
  position:relative;
  aspect-ratio:4/3;
  display:flex;
  align-items:flex-end;
  color:#fff;
  transition:transform .18s,box-shadow .18s;
}
:where(.page-work) .proj::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55));
}
:where(.page-work) .proj .p-body{position:relative;z-index:2;padding:20px}
:where(.page-work) .proj h3{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
:where(.page-work) .proj span {
  font-size:11.5px;
  font-weight:700;
  color:var(--accent);
  letter-spacing:.04em;
  display:block;
  margin-bottom:6px;
}
:where(.page-work) .proj:hover{transform:translateY(-4px);box-shadow:0 0 0 2px var(--accent) inset}
:where(.page-work) .proj--featured::before{background:var(--accent)}
:where(.page-work) .proj--featured span{color:rgba(255,255,255,.85)}

/* -----------------------------------------------------------------------
   9.14     .page-working-with-bump          working-with-bump.html
   ----------------------------------------------------------------------- */
:where(.page-working-with-bump) .logo {
  font-weight:800;
  font-size:22px;
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap:8px;
}
:where(.page-working-with-bump) .logo-img{height:26px;width:auto;display:block}
:where(.page-working-with-bump) nav ul{display:flex;gap:30px;list-style:none}
:where(.page-working-with-bump) .nav-cta {
  border:1.5px solid var(--ink);
  padding:9px 18px;
  border-radius:8px;
  color:var(--ink)!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background-color .15s, border-color .15s, color .15s;
}
:where(.page-working-with-bump) .nav-cta:hover {
  background:var(--pink);
  border-color:var(--pink);
  color:#fff!important;
}
:where(.page-working-with-bump) .hero{padding:96px 0 60px}
:where(.page-working-with-bump) .hero h1 {
  font-size:clamp(36px,5.4vw,64px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:800;
  max-width:18ch;
}
:where(.page-working-with-bump) .hero p.lede {
  margin-top:28px;
  max-width:60ch;
  font-size:clamp(17px,2vw,21px);
  color:#333;
  line-height:1.55;
}
:where(.page-working-with-bump) .section-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
:where(.page-working-with-bump) .section-head h2 {
  font-size:clamp(28px,3.6vw,44px);
  letter-spacing:-.02em;
  font-weight:800;
  line-height:1.05;
}
:where(.page-working-with-bump) .profile{padding:20px 0 80px;border-top:1px solid var(--line)}
:where(.page-working-with-bump) .profile .intro-copy{max-width:66ch}
/* Optical alignment: "S" reads as indented under the flush-left "W" of the
   eyebrow above it, same cause as the policy-experience-space.html fix. */
:where(.page-working-with-bump) .profile .intro-copy h2{margin-left:-.07em}
:where(.page-working-with-bump) .profile .intro-copy p {
  margin-top:16px;
  font-size:17.5px;
  color:#333;
  line-height:1.6;
}
:where(.page-working-with-bump) .profile .intro-copy p + p{margin-top:14px}
/* "Who we work with": copy on the left, a right-pinned spread of people photos
   on the right. The cards are anchored with right:0 and only ever translate
   left, so the group stays flush right whether piled or fanned open. */
:where(.page-working-with-bump) .profile-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:56px;
  align-items:start;
}
:where(.page-working-with-bump) .people-spread {
  position:relative;
  height:430px;
  margin-top:6px;
}
:where(.page-working-with-bump) .pp-card {
  position:absolute;
  right:0;
  top:0;
  margin:0;
  width:212px;
  border-radius:14px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:0 18px 40px rgba(0,0,0,.16);
  transition:transform 620ms cubic-bezier(.32,.72,0,1);
  will-change:transform;
}
:where(.page-working-with-bump) .pp-card img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center;
}
@media (prefers-reduced-motion:reduce) {
  :where(.page-working-with-bump) .pp-card{transition:none}
}

:where(.page-working-with-bump) .traits-label {
  margin-top:40px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}
:where(.page-working-with-bump) .traits {
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:64ch;
}
:where(.page-working-with-bump) .trait{display:flex;gap:14px;align-items:flex-start}
:where(.page-working-with-bump) .trait .b {
  width:30px;
  height:6px;
  border-radius:6px;
  margin-top:9px;
  flex:none;
}
:where(.page-working-with-bump) .trait:nth-child(1) .b{background:var(--accent)}
:where(.page-working-with-bump) .trait:nth-child(2) .b{background:var(--purple)}
:where(.page-working-with-bump) .trait:nth-child(3) .b{background:var(--mint)}
:where(.page-working-with-bump) .trait:nth-child(4) .b{background:var(--pink)}
:where(.page-working-with-bump) .trait p{font-size:16px;color:#333;margin:0}
:where(.page-working-with-bump) .trait strong{color:var(--ink)}
:where(.page-working-with-bump) .promise{padding:80px 0;background:var(--ink);color:#fff}
:where(.page-working-with-bump) .promise .section-head h2{color:#fff}
:where(.page-working-with-bump) .promise .section-head p{color:#999}
:where(.page-working-with-bump) .promise .intro {
  max-width:66ch;
  color:#ccc;
  font-size:16px;
  line-height:1.6;
  margin-bottom:36px;
}
:where(.page-working-with-bump) .promise-list {
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:1px solid #2a2a2a;
}
:where(.page-working-with-bump) .promise-item {
  display:flex;
  gap:18px;
  padding:20px 0;
  border-bottom:1px solid #2a2a2a;
  align-items:flex-start;
}
:where(.page-working-with-bump) .promise-item .b {
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:6px;
  flex:none;
}
:where(.page-working-with-bump) .promise-list .promise-item:nth-child(1) .b {
  background:var(--accent);
}
:where(.page-working-with-bump) .promise-list .promise-item:nth-child(2) .b {
  background:var(--purple);
}
:where(.page-working-with-bump) .promise-list .promise-item:nth-child(3) .b{background:var(--mint)}
:where(.page-working-with-bump) .promise-list .promise-item:nth-child(4) .b{background:var(--pink)}
:where(.page-working-with-bump) .promise-list .promise-item:nth-child(5) .b {
  background:var(--yellow);
}
:where(.page-working-with-bump) .promise-list .promise-item:nth-child(6) .b {
  background:var(--accent);
}
:where(.page-working-with-bump) .promise-list .promise-item:nth-child(7) .b {
  background:var(--purple);
}
:where(.page-working-with-bump) .promise-list .promise-item:nth-child(8) .b{background:var(--mint)}
:where(.page-working-with-bump) .promise-item p {
  font-size:16.5px;
  color:#e6e6e6;
  line-height:1.5;
  margin:0;
}
:where(.page-working-with-bump) .expect{padding:80px 0}
:where(.page-working-with-bump) .expect .intro {
  max-width:66ch;
  color:#333;
  font-size:16px;
  line-height:1.6;
  margin-bottom:36px;
}
:where(.page-working-with-bump) .expect-list {
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:1px solid var(--line);
}
:where(.page-working-with-bump) .expect-item {
  display:grid;
  grid-template-columns:44px 1fr;
  gap:18px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
:where(.page-working-with-bump) .expect-item .num {
  font-size:13px;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--muted);
}
:where(.page-working-with-bump) .expect-item p{font-size:16px;color:#333;line-height:1.6;margin:0}
:where(.page-working-with-bump) .expect-item strong{color:var(--ink)}
:where(.page-working-with-bump) .pricing{padding:80px 0 20px;border-top:1px solid var(--line)}
:where(.page-working-with-bump) .price-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:44px;
}
:where(.page-working-with-bump) .price-card {
  border:1px solid var(--line);
  border-radius:14px;
  padding:30px;
  display:flex;
  flex-direction:column;
  transition:transform .18s,box-shadow .18s;
}
:where(.page-working-with-bump) .price-card:hover {
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.07);
}
:where(.page-working-with-bump) .price-card .tag {
  display:inline-block;
  width:34px;
  height:6px;
  border-radius:6px;
  margin-bottom:20px;
}
:where(.page-working-with-bump) .price-grid .price-card:nth-child(3n + 1) .tag {
  background:var(--accent);
}
:where(.page-working-with-bump) .price-grid .price-card:nth-child(3n + 2) .tag {
  background:var(--purple);
}
:where(.page-working-with-bump) .price-grid .price-card:nth-child(3n) .tag{background:var(--mint)}
:where(.page-working-with-bump) .pe-grid .price-card:nth-child(4n + 1) .tag {
  background:var(--accent);
}
:where(.page-working-with-bump) .pe-grid .price-card:nth-child(4n + 2) .tag {
  background:var(--purple);
}
:where(.page-working-with-bump) .pe-grid .price-card:nth-child(4n + 3) .tag{background:var(--mint)}
:where(.page-working-with-bump) .pe-grid .price-card:nth-child(4n) .tag{background:var(--pink)}
:where(.page-working-with-bump) .price-card .amount {
  font-size:26px;
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:4px;
}
:where(.page-working-with-bump) .price-card .amount span {
  font-size:13.5px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:0;
}
:where(.page-working-with-bump) .price-card h3 {
  font-size:16.5px;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:10px;
}
:where(.page-working-with-bump) .price-card p{font-size:14.5px;color:#444;line-height:1.55}
:where(.page-working-with-bump) .retainer {
  margin-top:24px;
  border:1px dashed var(--line);
  border-radius:14px;
  padding:22px 28px;
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:#fff;
}
:where(.page-working-with-bump) .retainer .rk {
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--accent);
  white-space:nowrap;
  padding-top:2px;
}
:where(.page-working-with-bump) .doc-link {
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:14.5px;
  border-bottom:2px solid var(--ink);
  padding-bottom:3px;
}
:where(.page-working-with-bump) .retainer .doc-link{margin-top:10px}
:where(.page-working-with-bump) .doc-link:hover{gap:14px;transition:gap .15s}
:where(.page-working-with-bump) .pe-detail{margin-top:70px}
:where(.page-working-with-bump) .pe-detail .deck {
  max-width:62ch;
  color:#444;
  font-size:15.5px;
  margin:-16px 0 36px;
}
:where(.page-working-with-bump) .pe-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
:where(.page-working-with-bump) .pe-grid .price-card .amount{margin-bottom:10px}
:where(.page-working-with-bump) .amount-list{margin-bottom:10px}
:where(.page-working-with-bump) .amount-list .row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-top:1px solid var(--line);
}
:where(.page-working-with-bump) .amount-list .row:first-child{border-top:none;padding-top:0}
:where(.page-working-with-bump) .amount-list .row strong {
  font-size:16px;
  font-weight:800;
  letter-spacing:-.01em;
}
:where(.page-working-with-bump) .amount-list .row span {
  font-size:12.5px;
  color:var(--muted);
  text-align:right;
}
:where(.page-working-with-bump) .price-card .more-link {
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  font-weight:700;
  font-size:13.5px;
  border-bottom:2px solid var(--ink);
  padding-bottom:2px;
}
:where(.page-working-with-bump) .price-card .more-link:hover{gap:12px;transition:gap .15s}
:where(.page-working-with-bump) .philosophy {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--wash);
  margin-top:70px;
}
:where(.page-working-with-bump) .philosophy .wrap {
  padding:84px 32px;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:56px;
  align-items:start;
}
:where(.page-working-with-bump) .philosophy h2 {
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:800;
}
:where(.page-working-with-bump) .philosophy h2 .accent{color:var(--accent)}
:where(.page-working-with-bump) .philosophy .body p{font-size:18px;color:#333;line-height:1.6}
:where(.page-working-with-bump) .philosophy .body p + p{margin-top:18px}
:where(.page-working-with-bump) .faq{border-top:1px solid var(--line);padding:90px 0}
:where(.page-working-with-bump) .faq-list{margin-top:36px}
:where(.page-working-with-bump) .faq-item{padding:28px 0;border-bottom:1px solid var(--line)}
:where(.page-working-with-bump) .faq-item h3 {
  font-size:18px;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:10px;
  max-width:62ch;
}
:where(.page-working-with-bump) .faq-item p {
  font-size:15px;
  color:#444;
  line-height:1.6;
  max-width:62ch;
}
:where(.page-working-with-bump) .faq-item p a {
  color:var(--accent);
  border-bottom:1px solid var(--accent);
}
:where(.page-working-with-bump) .faq-item p a:hover{color:var(--ink);border-color:var(--ink)}
:where(.page-working-with-bump) .fin-cta {
  border-top:1px solid var(--line);
  padding:70px 0 90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
:where(.page-working-with-bump) .fin-cta h3 {
  font-size:clamp(22px,2.6vw,30px);
  font-weight:800;
  letter-spacing:-.02em;
}
:where(.page-working-with-bump) .fin-cta p{color:var(--muted);margin-top:6px;font-size:15.5px}

/* -----------------------------------------------------------------------
   9.15     .page-thirdparties               venues-thirdparties.html
   ----------------------------------------------------------------------- */
:where(.page-thirdparties) .hero{padding:76px 0 40px}
:where(.page-thirdparties) .hero h1{font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1.12;max-width:20ch}
:where(.page-thirdparties) .tp-intro{margin-top:26px;max-width:62ch}
:where(.page-thirdparties) .tp-intro p{font-size:17px;color:#333;line-height:1.65}
:where(.page-thirdparties) .tp-intro p + p{margin-top:16px}
:where(.page-thirdparties) .tp-section{padding:16px 0 90px}

/* The interactive tree is shown only when scripting is available; without it the
   plain nested list below carries the whole tree instead. */
:where(.page-thirdparties) .tp{display:none}
:where(.page-thirdparties.js) .tp{display:block}
:where(.page-thirdparties.js) .tp-fallback{display:none}
/* Outcome panels are visible by default so the no-JavaScript list can link
   straight to them. With scripting on, the tree decides which one shows. */
:where(.page-thirdparties.js) .tp-outcome{display:none}
:where(.page-thirdparties.js) .tp-outcome.is-shown{display:block}

:where(.page-thirdparties) .tp-q{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:18px}
:where(.page-thirdparties) .tp-q:focus{outline:none}
:where(.page-thirdparties) .tp-q:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
:where(.page-thirdparties) .tp-cards{display:grid;gap:14px;max-width:760px}
:where(.page-thirdparties) .tp-card {
  min-height:44px;
  text-align:left;
  font:inherit;
  font-size:16px;
  font-weight:600;
  line-height:1.45;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 52px 18px 20px;
  cursor:pointer;
  position:relative;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
:where(.page-thirdparties) .tp-card::after {
  content:"\2192";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  transition:transform .15s,color .15s;
}
:where(.page-thirdparties) .tp-card:hover {
  border-color:var(--accent);
  box-shadow:0 8px 22px rgba(0,0,0,.07);
}
:where(.page-thirdparties) .tp-card:hover::after{color:var(--accent);transform:translate(3px,-50%)}
:where(.page-thirdparties) .tp-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Chosen path, kept above the outcome */
/* An author display value overrides the user agent's [hidden] rule, so the
   hidden state has to be declared here or the bar shows at the start step. */
:where(.page-thirdparties) .tp-path[hidden]{display:none}
:where(.page-thirdparties) .tp-path {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-bottom:22px;
  margin-bottom:26px;
  border-bottom:1px solid var(--line);
}
:where(.page-thirdparties) .tp-crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;max-width:70ch}
:where(.page-thirdparties) .tp-crumbs li{font-size:13.5px;color:var(--muted);line-height:1.5}
:where(.page-thirdparties) .tp-crumbs li + li::before{content:"\2192";margin-right:8px;color:var(--muted)}
:where(.page-thirdparties) .tp-crumbs li[aria-current]{color:var(--ink);font-weight:700}
:where(.page-thirdparties) .tp-crumb {
  font:inherit;
  color:var(--muted);
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
:where(.page-thirdparties) .tp-crumb:hover{color:var(--accent)}
:where(.page-thirdparties) .tp-restart {
  font:inherit;
  font-size:13px;
  font-weight:700;
  min-height:44px;
  padding:0 4px;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--ink);
  border-bottom:2px solid var(--ink);
  align-self:flex-start;
  white-space:nowrap;
}
:where(.page-thirdparties) .tp-restart:hover{color:var(--accent);border-color:var(--accent)}

/* Outcomes */
:where(.page-thirdparties) .tp-outcome {
  max-width:70ch;
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:12px;
  padding:28px 30px;
  background:var(--paper);
}
:where(.page-thirdparties) .tp-outcome + .tp-outcome{margin-top:20px}
:where(.page-thirdparties) .tp-outcome-h{font-size:20px;font-weight:800;letter-spacing:-.01em}
:where(.page-thirdparties) .tp-outcome-h:focus{outline:none}
:where(.page-thirdparties) .tp-outcome-h:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
:where(.page-thirdparties) .tp-outcome p{font-size:16px;color:#333;line-height:1.65;margin-top:12px}
/* An outcome can carry more than one action, so the row lays them out and
   wraps them rather than relying on inline whitespace. */
:where(.page-thirdparties) .tp-act{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
/* The shared .btn uppercases its label. These buttons stay in sentence case,
   as the page copy specifies, and so "MoU" is not flattened to "MOU". */
:where(.page-thirdparties) .tp-act .btn{text-transform:none;letter-spacing:.01em;font-size:14px}

/* Non-JavaScript fallback */
:where(.page-thirdparties) .tp-fallback{max-width:70ch}
:where(.page-thirdparties) .tp-fallback h2{font-size:19px;font-weight:800;margin-bottom:14px}
:where(.page-thirdparties) .tp-fallback ul{padding-left:22px;margin-top:8px}
:where(.page-thirdparties) .tp-fallback li{font-size:16px;line-height:1.6;margin-top:8px}
:where(.page-thirdparties) .tp-fallback a{text-decoration:underline;text-underline-offset:3px}
:where(.page-thirdparties) .tp-fallback + .tp-outcomes{margin-top:40px}

/* The flow chart this page is based on colour-codes its three entry branches
   and answers the venue-hire question in a box of its own, outside the tree.
   Both are reproduced here using the site's own three accent colours rather
   than the chart's, so the page stays on palette. */
:where(.page-thirdparties) .tp-card--client,
:where(.page-thirdparties) .tp-card--agency,
:where(.page-thirdparties) .tp-card--media {
  border-left-width:4px;
  padding-left:17px;      /* 20px less the 3px the wider border adds, so the
                             label stays aligned with the uncoloured cards */
}
:where(.page-thirdparties) .tp-card--client{border-left-color:var(--accent)}
:where(.page-thirdparties) .tp-card--agency{border-left-color:var(--mint)}
:where(.page-thirdparties) .tp-card--media{border-left-color:var(--purple)}

/* Venue hire: the question everyone arrives with, and a flat no. Deliberately
   not a branch of the tree — it is answered before anyone starts choosing. */
:where(.page-thirdparties) .tp-hire {
  margin-top:56px;
  padding:32px 34px;
  border-radius:16px;
  background:var(--frame);
  color:#fff;
  max-width:760px;
}
:where(.page-thirdparties) .tp-hire-q {
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--mint);
}
:where(.page-thirdparties) .tp-hire-a {
  margin-top:10px;
  font-size:clamp(22px,2.6vw,28px);
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:800;
  color:#fff;
}
:where(.page-thirdparties) .tp-hire p:last-child {
  margin-top:16px;
  font-size:16px;
  line-height:1.65;
  color:rgba(255,255,255,.76);
  max-width:60ch;
}

/* -----------------------------------------------------------------------
   9.16     .page-copd, .page-irish-presidency, .page-ukmission,
            .page-bms, .page-feve
                                             copd/index.php,
                                             irish-presidency/index.php,
                                             ukmission/index.php,
                                             bms/index.php,
                                             feve/index.php

   A client-facing quote or proposal, so it borrows the document chrome of the
   Idea Sprint page (sticky doc-nav, numbered steps, doc-footer) rather than
   the site nav. It carries .site but not .site-chrome: no header nav, no
   site footer. Every rule here is shared by all five quote pages; anything
   genuinely unique to one lives right after, scoped to that page alone (see
   .page-irish-presidency below). To add another quote page, give it a real
   server-side password gate like the five above all use — see the comment
   at the top of copd/index.php — then add its class alongside them rather
   than duplicating this block.
   ----------------------------------------------------------------------- */

/* Document chrome */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) header.doc-nav {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .doc-nav-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:64px;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .logo-img{height:22px;width:auto;display:block}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .doc-tag {
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  letter-spacing:.02em;
  text-align:right;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .doc-tag strong{color:var(--ink)}

/* Hero */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .hero{padding:64px 0 0}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .hero .eyebrow{color:var(--accent)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .hero h1 {
  margin-top:18px;
  font-size:clamp(34px,5vw,58px);
  line-height:1.06;
  letter-spacing:-.03em;
  font-weight:800;
  max-width:16ch;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .hero .lede {
  margin-top:20px;
  max-width:64ch;
  font-size:clamp(16px,1.8vw,19px);
  color:#333;
  line-height:1.6;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .meta-row {
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  gap:28px 44px;
  padding:28px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .meta{font-size:14px;color:var(--muted);max-width:34ch}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .meta strong {
  display:block;
  color:var(--ink);
  font-size:15px;
  font-weight:700;
  margin-bottom:2px;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .hero-image {
  margin-top:36px;
  border-radius:12px;
  overflow:hidden;
  background:var(--frame);
  aspect-ratio:16/7;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .hero-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 62%;
}

/* Contents rail. Sits directly under the 64px doc-nav. */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .doc-toc {
  margin-top:52px;
  padding:14px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:64px;
  z-index:40;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .toc-list {
  display:flex;
  gap:26px;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .toc-list::-webkit-scrollbar{display:none}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .toc-list a {
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:6px 0;
  font-size:13.5px;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .toc-list .tn {
  font-size:11px;
  letter-spacing:.1em;
  color:var(--muted);
  font-weight:800;
  transition:color .15s;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .toc-plain{padding-left:2px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .toc-list a:hover{color:var(--ink)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .toc-list a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .toc-list a[aria-current] .tn{color:var(--accent)}

/* Numbered sections */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .step{padding:76px 0;border-bottom:1px solid var(--line)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) #options{overflow:hidden}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .step-kicker{margin-bottom:14px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .step-n {
  font-size:12px;
  letter-spacing:.16em;
  font-weight:800;
  color:var(--accent);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .step h2 {
  font-size:clamp(26px,3.6vw,40px);
  line-height:1.1;
  letter-spacing:-.025em;
  font-weight:800;
  max-width:22ch;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .step-sub {
  margin-top:16px;
  max-width:70ch;
  font-size:17px;
  color:#333;
  line-height:1.65;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) h3.sub {
  margin-top:52px;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.01em;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .body{margin-top:16px;max-width:70ch}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .body p{font-size:17px;color:#333;line-height:1.65}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .body p + p{margin-top:16px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .body .invite{color:var(--ink)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .xref {
  font-weight:700;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  transition:border-color .15s,color .15s;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .xref:hover{color:var(--accent);border-color:var(--accent)}

/* Callout: a recommendation or a caveat lifted out of the running text */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .callout {
  margin-top:26px;
  max-width:70ch;
  padding:24px 28px;
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:12px;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .callout .ck {
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--accent);
  margin-bottom:10px;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .callout p{font-size:16px;color:#333;line-height:1.65}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .callout p + p{margin-top:12px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .callout-plain{border-left-color:var(--ink)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .callout-plain .ck{color:var(--ink)}

/* Key/value specification lists */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .spec{margin-top:22px;border-top:1px solid var(--line)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .spec-row {
  display:grid;
  grid-template-columns:230px 1fr;
  gap:24px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .spec dt{font-size:14px;color:var(--muted);font-weight:700;line-height:1.5}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .spec dd{font-size:15.5px;color:var(--ink);line-height:1.6}

/* Reference links to case studies */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .ref-cases {
  padding:22px 0 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .ref-label{font-size:12.5px;color:var(--muted);font-weight:700}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .ref-cases a {
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  padding-bottom:1px;
  transition:border-color .15s;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .ref-cases a:hover{border-color:var(--ink)}

/* Copy beside a supporting photo */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .split {
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr 0.9fr;
  gap:44px;
  align-items:stretch;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .split .body{margin-top:0}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .split-fig{display:flex;flex-direction:column;min-height:280px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .split-fig img {
  display:block;
  width:100%;
  flex:1;
  min-height:0;
  border-radius:12px;
  object-fit:cover;
  object-position:center 58%;
  background:var(--frame);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) figcaption {
  margin-top:10px;
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}

/* Option cards */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .opt {
  margin-top:32px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:32px 34px;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .opt-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .opt-letter {
  display:block;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--accent);
  margin-bottom:6px;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .opt-head h3 {
  font-size:clamp(21px,2.4vw,27px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .opt-price {
  font-size:22px;
  font-weight:800;
  letter-spacing:-.01em;
  white-space:nowrap;
  text-align:right;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .opt-price span {
  display:block;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
  margin-top:3px;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .opt-lead {
  margin-top:20px;
  max-width:70ch;
  font-size:16.5px;
  color:#333;
  line-height:1.65;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .opt-lead + .opt-lead{margin-top:14px}

/* Run of show */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .rundown{margin-top:26px;list-style:none;border-top:1px solid var(--line)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .rundown li {
  display:grid;
  grid-template-columns:150px 1fr;
  gap:24px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .rundown .rt {
  font-size:13.5px;
  color:var(--muted);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  padding-top:1px;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .rundown .rl{font-size:15.5px;font-weight:800;letter-spacing:-.01em}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .rundown .rn{margin-top:4px;font-size:14.5px;color:var(--muted);line-height:1.55}

/* What an option includes */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .incl{margin-top:26px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .incl-k {
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--muted);
  margin-bottom:12px;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .incl ul{list-style:none;max-width:70ch}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .incl li {
  position:relative;
  padding-left:22px;
  font-size:15.5px;
  color:#333;
  line-height:1.6;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .incl li + li{margin-top:8px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .incl li::before {
  content:"";
  position:absolute;
  left:2px;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
}

/* Photographs of people from across the projects. Same behaviour as the home
   page spread: js/photo-stack.js owns the transforms, these sizes drive the fan. */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .photo-stack {
  position:relative;
  width:min(1040px,100%);
  height:340px;
  margin:56px auto 8px;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .ps-card {
  position:absolute;
  left:50%;
  top:50%;
  margin:0;
  width:280px;
  border-radius:14px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:0 18px 42px rgba(0,0,0,.17);
  transform:translate(-50%,-50%);
  transition:transform 620ms cubic-bezier(.32,.72,0,1);
  will-change:transform;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .ps-card img {
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
@media (prefers-reduced-motion:reduce) {
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .ps-card{transition:none}
}

/* The reception, shown large. The wider frame carries the room, the narrower
   one the bar service, so the pair says "our space, our team" in one look. */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .reception{margin:44px 0 40px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .reception-grid {
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:16px;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .reception-grid img {
  display:block;
  width:100%;
  height:440px;
  border-radius:12px;
  object-fit:cover;
  background:var(--frame);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .reception figcaption{margin-top:12px;max-width:70ch}

/* Caption under a shuffling spread */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .stack-note {
  margin:18px auto 0;
  max-width:78ch;
  text-align:center;
  font-size:13.5px;
  color:var(--muted);
  line-height:1.55;
}

/* Two responsibilities side by side */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .two-col{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card {
  border:1px solid var(--line);
  border-radius:12px;
  padding:26px 28px;
  display:flex;
  flex-direction:column;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card h4{font-size:16px;font-weight:800;letter-spacing:-.01em}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card p{margin-top:12px;font-size:15.5px;color:#333;line-height:1.65}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card ul{margin-top:12px;list-style:none}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card li {
  position:relative;
  padding-left:20px;
  font-size:15.5px;
  color:#333;
  line-height:1.6;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card li + li{margin-top:8px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card li::before {
  content:"";
  position:absolute;
  left:2px;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--muted);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card .owner {
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--muted);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card-ink{background:var(--ink);border-color:var(--ink)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card-ink h4{color:#fff}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card-ink p{color:#d8d8d8}
/* A list inside the ink card inherits .col-card li, which is #333 on black.
   Lift the text and the bullet onto the dark ground. */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card-ink li{color:#e2e2e2}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card-ink li::before{background:#9a9a9a}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card-ink .owner{color:#fff;border-top-color:#333}

/* Before / during / after */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .phases{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .phase{border-top:2px solid var(--ink);padding-top:16px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .phase .ph {
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  margin-bottom:10px;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .phase p{font-size:15.5px;color:#333;line-height:1.65}

/* Priced line items */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .price-block{margin-top:44px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .price-h{font-size:18px;font-weight:800;letter-spacing:-.01em;margin-bottom:16px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .price-note{max-width:70ch;font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:16px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .price{list-style:none;border-top:1px solid var(--line)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .price li {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:32px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .price span{font-size:15.5px;color:#333;line-height:1.55}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .price b {
  font-size:15.5px;
  font-weight:800;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .price .total {
  background:var(--wash);
  border-bottom:2px solid var(--ink);
  padding:15px 16px;
  margin-top:2px;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .price .total span{font-weight:800;color:var(--ink);font-size:16px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .price .total b{font-size:17px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fineprint{margin-top:32px;max-width:80ch}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fineprint p{font-size:13.5px;color:var(--muted);line-height:1.6}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fineprint p + p{margin-top:10px}

/* Exclusions and MoU terms */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .bounds{margin-top:26px;list-style:none;max-width:74ch}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .bounds li {
  position:relative;
  padding:11px 0 11px 26px;
  border-bottom:1px solid var(--line);
  font-size:16px;
  color:#333;
  line-height:1.6;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .bounds li::before {
  content:"";
  position:absolute;
  left:2px;
  top:1.28em;
  width:10px;
  height:1.5px;
  background:var(--muted);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .act{margin-top:26px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .ref-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 22px;
  border-radius:8px;
  border:1.5px solid var(--ink);
  font-weight:800;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:background-color .15s;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .ref-link:hover{background:var(--wash)}

/* Remarks */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .remarks {
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:32px 44px;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .remark h3{font-size:16px;font-weight:800;letter-spacing:-.01em}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .remark p{margin-top:10px;font-size:15.5px;color:#333;line-height:1.65}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .remark p + p{margin-top:12px}

/* At a glance */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .table-scroll{margin-top:30px;overflow-x:auto}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .glance{width:100%;min-width:660px;border-collapse:collapse}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .glance th, :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .glance td {
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  font-size:15px;
  line-height:1.5;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .glance thead th {
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--muted);
  border-bottom:1.5px solid var(--ink);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .glance tbody th{font-weight:700;color:var(--ink);padding-left:0}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .glance thead th:first-child{padding-left:0}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .glance td{width:18%}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .glance .y{font-weight:700;color:var(--ink)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .glance .n{color:var(--muted)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .glance .tr-total th, :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .glance .tr-total td {
  font-weight:800;
  font-size:16px;
  border-bottom:none;
  border-top:1.5px solid var(--ink);
  font-variant-numeric:tabular-nums;
}

/* Folded detail: sections 06 to 09.

   These are the terms behind the quote rather than the pitch, so they sit in
   one quiet band of <details> instead of four full sections. Native disclosure
   means they open without JavaScript and are keyboard operable for free;
   js/copd-toc.js only adds opening on deep link and before printing. */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .folds-lead {
  margin-top:6px;
  max-width:62ch;
  font-size:16px;
  color:var(--muted);
  line-height:1.6;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-list{margin-top:30px;border-top:1px solid var(--line)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold{border-bottom:1px solid var(--line)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-head {
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px 4px;
  cursor:pointer;
  list-style:none;
  transition:color .15s;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-head::-webkit-details-marker{display:none}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-head:hover{color:var(--accent)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-head:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-n {
  font-size:12px;
  letter-spacing:.14em;
  font-weight:800;
  color:var(--muted);
  min-width:24px;
  transition:color .15s;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-t {
  flex:1;
  font-size:clamp(17px,2vw,21px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.25;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold[open] .fold-n{color:var(--accent)}

/* Plus that becomes a minus, drawn rather than typed so it stays optical. */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-mark{position:relative;width:14px;height:14px;flex:none}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-mark::before, :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-mark::after {
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:14px;
  height:1.5px;
  background:currentColor;
  transition:transform .2s ease;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-mark::after{transform:rotate(90deg)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold[open] .fold-mark::after{transform:rotate(0deg)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-body{padding:4px 0 40px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-body > :first-child{margin-top:0}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-body .step-sub{margin-top:0}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-body h3.sub:first-of-type{margin-top:34px}

/* The café format loop, embedded from images/bump-cafe-loop.html. It shows the
   room converting between layouts, which is the claim the copy beside it makes. */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .loop-embed{margin:26px 0 6px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .loop-embed iframe {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:12px;
  background:#0E0E0E;
}

/* Password gate. Server-rendered by copd/index.php: this markup only
   reaches the browser when the session isn't authenticated yet, and no
   other page content is sent alongside it. */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .gate {
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  background:var(--paper);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .gate-box {
  width:100%;
  max-width:360px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .gate-logo{height:26px;width:auto;display:block}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .gate-title {
  margin-top:26px;
  font-size:clamp(24px,3.4vw,30px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .gate-label {
  margin-top:30px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--muted);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .gate-input {
  margin-top:10px;
  width:100%;
  font:inherit;
  font-size:16px;
  padding:13px 15px;
  border:1.5px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .gate-input:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,127,255,.18);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .gate-btn {
  margin-top:14px;
  font:inherit;
  font-size:13px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  padding:14px 26px;
  border-radius:8px;
  border:1.5px solid var(--ink);
  background:var(--ink);
  color:#fff;
  cursor:pointer;
  transition:transform .15s;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .gate-btn:hover{transform:translateY(-2px)}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .gate-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .gate-err {
  margin-top:14px;
  min-height:1.4em;
  font-size:14px;
  color:#b00034;
  line-height:1.4;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .gate-note {
  margin-top:18px;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .gate-note a{color:var(--muted);text-decoration:underline}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .gate-note a:hover{color:var(--ink)}

/* Signature block */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .approval{padding:76px 0}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .approval h2 {
  font-size:clamp(24px,3vw,32px);
  font-weight:800;
  letter-spacing:-.02em;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .spec-sign{max-width:560px;border-top:none}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .spec-sign .spec-row{border-bottom:none;padding:16px 0;align-items:end}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .spec-sign .rule{border-bottom:1px solid var(--ink);min-height:1.7em}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .approval-cta {
  margin-top:52px;
  padding-top:36px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .approval-cta h3{font-size:22px;font-weight:800;letter-spacing:-.02em}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .approval-cta p{margin-top:6px;font-size:16px;color:var(--muted)}

/* Document footer */
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) footer.doc-footer{border-top:1px solid var(--line);padding:32px 0 48px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) footer.doc-footer .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) footer.doc-footer .logo-img{height:20px}
:where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) footer.doc-footer .note {
  font-size:12.5px;
  color:var(--muted);
  line-height:1.6;
  text-align:right;
  max-width:70ch;
}

/* .page-bms — elements unique to this quote. */

/* The preliminary note sits in the hero and must be read before the creative
   below it, so it is set apart rather than blending into the lede. */
:where(.page-bms) .lede.is-prelim {
  border-left:3px solid var(--accent);
  padding-left:20px;
  color:var(--muted);
  font-weight:500;
}

/* The venue exterior, shown early so the reader knows which building is being
   proposed before any of the creative. */
:where(.page-bms) .venue-shot{margin-top:36px}
:where(.page-bms) .venue-shot img{display:block;width:100%;height:auto;border-radius:14px}
:where(.page-bms) .venue-shot figcaption {
  margin-top:12px;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

/* Precedent cards, two across. The card itself stays compact — small type,
   tight padding, one-line blurbs — so two columns do not run tall. */
:where(.page-bms) .ex-grid {
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
:where(.page-bms) .ex-card {
  display:block;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--paper);
  transition:border-color .15s,transform .15s;
}
:where(.page-bms) .ex-card:hover{border-color:var(--ink);transform:translateY(-3px)}
:where(.page-bms) .ex-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
:where(.page-bms) .ex-body{padding:16px 18px 20px}
:where(.page-bms) .ex-client {
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--muted);
}
:where(.page-bms) .ex-body h3{margin-top:6px;font-size:17px;font-weight:800;letter-spacing:-.015em;line-height:1.25}
:where(.page-bms) .ex-body p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted)}

/* The working prototype, embedded live and given real room: it is the one
   thing on this page a reader can actually operate, so it breaks out of the
   enclosing card's 34px padding and runs taller than a standard media block.
   Its host is named explicitly in the CSP frame-src — without that the iframe
   is blocked and the caption's fallback link is all that remains, which is
   why that link is there. */
:where(.page-bms) .demo-embed {
  margin:36px -34px 0;          /* cancel .opt's horizontal padding */
}
:where(.page-bms) .demo-embed iframe {
  display:block;
  width:100%;
  aspect-ratio:3/2;
  min-height:520px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--wash);
}
:where(.page-bms) .demo-embed figcaption{padding:0 34px}
:where(.page-bms) .demo-embed figcaption {
  margin-top:12px;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}
:where(.page-bms) .demo-embed figcaption strong{color:var(--ink)}

/* Build tiers (06). Three columns mirroring the tier slide: a coloured rule
   over each tier, then the isometrics of builds we have actually delivered at
   that level. Columns are deliberately uneven in height — tier 2 has one
   example, the others two — so they are top-aligned rather than stretched. */
:where(.page-bms) .tier-grid {
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  align-items:start;
}
:where(.page-bms) .tier-bar{display:block;height:6px;border-radius:3px;background:var(--ink)}
:where(.page-bms) .tier--t1 .tier-bar{background:var(--accent)}
:where(.page-bms) .tier--t2 .tier-bar{background:var(--pink)}
:where(.page-bms) .tier--t3 .tier-bar{background:var(--yellow)}
:where(.page-bms) .tier-n {
  margin-top:14px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
:where(.page-bms) .tier-n strong{color:var(--ink);font-weight:800}
:where(.page-bms) .tier-price {
  margin-top:8px;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--ink);
}
:where(.page-bms) .tier-desc{margin-top:10px;font-size:15px;line-height:1.6;color:#333}
:where(.page-bms) .tier-shot{margin-top:20px}
:where(.page-bms) .tier-shot img {
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--wash);
}
:where(.page-bms) .tier-shot figcaption {
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
:where(.page-bms) .tier-link {
  display:inline-block;
  margin-top:3px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:color .18s ease, border-color .18s ease;
}
:where(.page-bms) .tier-link:hover{color:var(--accent);border-color:var(--accent)}
:where(.page-bms) .tier-soon{display:inline-block;margin-top:3px;color:var(--muted)}

/* .page-feve — the elements unique to this proposal.

   Written to be read by member CEOs on their own, often on a phone, so the
   three repeating structures (the menu, the calendar, the packages) each
   collapse to a single column early and stay legible rather than clever. */

/* Unconfirmed figures. Marked visibly on purpose: this page goes out with
   real Bump prices alongside numbers that still need checking, and the two
   must never be mistaken for each other. */

/* The budget menu, as a three-column table. A CEO reads this to add up, so
   item, unit and price each get their own column and the price column is
   fixed-width and right-aligned - the figures line up as a column you can
   run an eye down, instead of floating at the end of a sentence. */
:where(.page-feve) .m-table{margin-top:34px}
:where(.page-feve) .m-head,
:where(.page-feve) .m-row {
  display:grid;
  grid-template-columns:1fr 130px 190px;
  gap:20px;
  align-items:baseline;
}
:where(.page-feve) .m-head {
  padding-bottom:10px;
  border-bottom:2px solid var(--ink);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
}
:where(.page-feve) .m-row{padding:18px 0;border-bottom:1px solid var(--line)}
:where(.page-feve) .m-band {
  margin-top:30px;
  padding-bottom:8px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--accent);
}
:where(.page-feve) .m-item{font-size:17px;font-weight:800;letter-spacing:-.01em}
:where(.page-feve) .m-sub{margin-top:5px;font-size:14px;line-height:1.55;color:var(--muted);max-width:52ch}
:where(.page-feve) .m-unit{font-size:13px;color:var(--muted);text-align:right}
:where(.page-feve) .m-price {
  font-size:18px;
  font-weight:800;
  letter-spacing:-.02em;
  text-align:right;
  font-variant-numeric:tabular-nums;   /* digits align down the column */
}
:where(.page-feve) .m-plus{font-weight:600;color:var(--muted)}

:where(.page-feve) .tbc {
  display:inline;
  padding:1px 6px;
  border-radius:4px;
  background:var(--yellow);
  color:var(--ink);
  font-size:.92em;
  font-weight:700;
}

/* The menu of options. */
/* The three roles that decide a file. Borrowed from the micro-communities
   page's own framing, flattened into three cards because this page is read
   straight through rather than scrolled as a diagram. */
:where(.page-feve) .roles-feve {
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
:where(.page-feve) .role-f {
  padding:22px 22px 24px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--wash);
}
:where(.page-feve) .role-bar{display:block;width:32px;height:4px;border-radius:2px;background:var(--accent)}
:where(.page-feve) .role-f:nth-child(2) .role-bar{background:var(--pink)}
:where(.page-feve) .role-f:nth-child(3) .role-bar{background:var(--mint)}
:where(.page-feve) .role-f h4 {
  margin-top:14px;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.01em;
}
:where(.page-feve) .role-f p{margin-top:8px;font-size:14.5px;line-height:1.6;color:#333}
:where(.page-feve) .eclipse{margin-top:34px}
:where(.page-feve) .eclipse-note{margin-top:34px}

:where(.page-feve) .opt-grid {
  margin-top:38px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
:where(.page-feve) .opt-card {
  padding:26px 28px 28px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper);
}
:where(.page-feve) .opt-bar{display:block;width:40px;height:5px;border-radius:3px;background:var(--accent)}
:where(.page-feve) .opt-card:nth-child(2) .opt-bar{background:var(--pink)}
:where(.page-feve) .opt-card:nth-child(3) .opt-bar{background:var(--mint)}
:where(.page-feve) .opt-card:nth-child(4) .opt-bar{background:var(--purple)}
:where(.page-feve) .opt-card:nth-child(5) .opt-bar{background:var(--yellow)}
:where(.page-feve) .opt-card:nth-child(6) .opt-bar{background:var(--ink)}
:where(.page-feve) .opt-n {
  margin-top:16px;
  font-size:12px;
  letter-spacing:.14em;
  font-weight:700;
  color:var(--muted);
}
:where(.page-feve) .opt-card h3 {
  margin-top:6px;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.25;
}
:where(.page-feve) .opt-what{margin-top:12px;font-size:16px;line-height:1.6;color:#333}
:where(.page-feve) .opt-does{margin-top:12px;font-size:15px;line-height:1.6;color:#333}
:where(.page-feve) .opt-does strong{color:var(--ink)}
/* Photographs inside an option card. Two side by side where there are two,
   one full width where there is one, so a single shot never sits in half a
   card with dead space beside it. */
:where(.page-feve) .opt-shots {
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:10px;
}
:where(.page-feve) .opt-shots img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;      /* every source photo is 1600x1067, so this crops nothing */
  object-fit:cover;
  border-radius:10px;
}
:where(.page-feve) .opt-note {
  margin-top:14px;
  padding:14px 16px;
  border-radius:10px;
  background:var(--wash);
  font-size:14.5px;
  line-height:1.6;
  color:#333;
}

:where(.page-feve) .opt-proof {
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}
/* One link treatment for every text container on the page. The page leans
   hard on links out to Bump's own case studies and methodology pages, and
   they sit in a dozen different blocks - listing the containers here keeps
   them all consistent and stops the next one added from falling back to
   default browser blue. The contents rail and the gate are styled above and
   are deliberately not included. */
:where(.page-feve) .step-sub a,
:where(.page-feve) .body a,
:where(.page-feve) .opt-what a,
:where(.page-feve) .opt-does a,
:where(.page-feve) .opt-note a,
:where(.page-feve) .opt-proof a,
:where(.page-feve) .role-f a,
:where(.page-feve) .cal-what a,
:where(.page-feve) .eclipse-note a,
:where(.page-feve) .m-sub a,
:where(.page-feve) .callout a {
  color:var(--ink);
  border-bottom:1px solid var(--line);
  text-decoration:none;
  transition:color .18s ease, border-color .18s ease;
}
:where(.page-feve) .step-sub a:hover,
:where(.page-feve) .body a:hover,
:where(.page-feve) .opt-what a:hover,
:where(.page-feve) .opt-does a:hover,
:where(.page-feve) .opt-note a:hover,
:where(.page-feve) .opt-proof a:hover,
:where(.page-feve) .role-f a:hover,
:where(.page-feve) .cal-what a:hover,
:where(.page-feve) .eclipse-note a:hover,
:where(.page-feve) .m-sub a:hover,
:where(.page-feve) .callout a:hover{color:var(--accent);border-color:var(--accent)}

/* The year. A two-column list rather than a chart: it has to survive being
   read on a phone, where any real calendar grid stops being readable. */
:where(.page-feve) .cal{margin-top:38px;border-top:1px solid var(--line)}
:where(.page-feve) .cal-row {
  display:grid;
  grid-template-columns:150px 1fr;
  gap:24px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
:where(.page-feve) .cal-when {
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
}
:where(.page-feve) .cal-head{font-size:17px;font-weight:800;letter-spacing:-.01em}
:where(.page-feve) .cal-what p + p{margin-top:6px;font-size:15px;line-height:1.6;color:#333}


/* .page-irish-presidency — the one element unique to this quote.

   The demo station visual is a portrait mock-up of a single member's kiosk, so
   it sits beside the copy at its own aspect rather than being cropped into the
   landscape band .split-fig produces. */
:where(.page-irish-presidency) .kiosk {
  margin-top:30px;
  display:grid;
  grid-template-columns:1fr 340px;
  gap:40px;
  align-items:start;
}
:where(.page-irish-presidency) .kiosk .body{margin-top:0}
:where(.page-irish-presidency) .kiosk-fig{margin:0}
:where(.page-irish-presidency) .kiosk-fig img {
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  background:var(--wash);
}

/* -----------------------------------------------------------------------
   9.17     .legal-doc                       terms-and-conditions.html,
                                              cookie-policy.html

   Shared block for the two legal pages. Long-form text, so it trades the
   wide, card-heavy layout the rest of the site uses for a narrow reading
   column and plain headings/lists.
   ----------------------------------------------------------------------- */
:where(.legal-doc) .hero{padding:80px 0 40px;border-bottom:1px solid var(--line)}
:where(.legal-doc) .hero h1 {
  font-size:clamp(32px,4.6vw,52px);
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:800;
  max-width:20ch;
}
:where(.legal-doc) .hero .lede {
  margin-top:16px;
  max-width:62ch;
  font-size:clamp(15px,1.6vw,17px);
  color:#333;
  line-height:1.55;
}
:where(.legal-doc) .legal-body{padding:56px 0 90px}
:where(.legal-doc) .legal-col{max-width:720px}
:where(.legal-doc) .legal-col h2 {
  font-size:22px;
  font-weight:800;
  letter-spacing:-.01em;
  margin-top:48px;
}
:where(.legal-doc) .legal-col h2:first-child{margin-top:0}
:where(.legal-doc) .legal-col h3 {
  font-size:16.5px;
  font-weight:800;
  margin-top:28px;
}
:where(.legal-doc) .legal-col p {
  font-size:15.5px;
  color:#333;
  line-height:1.65;
  margin-top:14px;
}
:where(.legal-doc) .legal-col ul, :where(.legal-doc) .legal-col ol {
  margin-top:14px;
  padding-left:22px;
  font-size:15.5px;
  color:#333;
  line-height:1.65;
}
:where(.legal-doc) .legal-col li + li{margin-top:8px}
:where(.legal-doc) .legal-col a{text-decoration:underline;text-underline-offset:2px}
:where(.legal-doc) .legal-col a:hover{color:var(--accent)}
:where(.legal-doc) .legal-meta {
  font-size:13.5px;
  color:var(--muted);
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

/* === 10. EMBEDS ====================================================== */


/* -----------------------------------------------------------------------
   10.1     .page-bump-cafe-loop             images/bump-cafe-loop.html
   ----------------------------------------------------------------------- */
html:where(.page-bump-cafe-loop), :where(.page-bump-cafe-loop) body {
  margin:0;
  padding:0;
  background:#0E0E0E;
}
:where(.page-bump-cafe-loop) .bump-loop {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#0E0E0E;
  container-type:inline-size;
}

/* -----------------------------------------------------------------------
   10.2     .page-forum-loop                 images/forum-loop.html
   ----------------------------------------------------------------------- */
:where(.page-forum-loop) body{margin:0;background:#f4f3f0;font:14px/1.4 system-ui, sans-serif}
:where(.page-forum-loop) .demo {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 40px;
  box-sizing:border-box;
}
:where(.page-forum-loop) .forum-loop {
  width:100%;
  max-width:1280px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
:where(.page-forum-loop) .forum-loop__stage {
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#e8e6e1;
  border-radius:3px;
}
:where(.page-forum-loop) .forum-loop__stage img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.045);
  transform-origin:52% 46%;
  will-change:opacity, transform;
  transition:opacity var(--fade, 2600ms) ease-in-out, transform calc(var(--hold, 4800ms) + var(--fade, 2600ms)) linear;
}
:where(.page-forum-loop) .forum-loop__stage img.is-active{opacity:1;transform:scale(1)}
:where(.page-forum-loop) .forum-loop__ticks{display:flex;gap:8px;align-items:center}
:where(.page-forum-loop) .forum-loop__tick {
  position:relative;
  width:46px;
  height:2px;
  background:rgba(47,59,49,.16);
  overflow:hidden;
}
:where(.page-forum-loop) .forum-loop__tick > span {
  position:absolute;
  inset:0;
  background:#2f3b31;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 400ms linear;
}
:where(.page-forum-loop) .forum-loop__tick.is-active > span {
  transition:transform calc(var(--hold, 4800ms) + var(--fade, 2600ms)) linear;
  transform:scaleX(1);
}

/* -----------------------------------------------------------------------
   10.3     .page-microcommunitiesring1      images/microcommunitiesring1.html
   ----------------------------------------------------------------------- */
html:where(.page-microcommunitiesring1), :where(.page-microcommunitiesring1) body {
  margin:0;
  background:#FFFFFF;
}
:where(.page-microcommunitiesring1) .ring-mark {
  display:block;
  width:100%;
  max-width:560px;
  margin:0 auto;
  height:auto;
  overflow:visible;
}

/* -----------------------------------------------------------------------
   10.4     .page-microcommunitiesrole       images/microcommunitiesrole.html
   ----------------------------------------------------------------------- */
html:where(.page-microcommunitiesrole), :where(.page-microcommunitiesrole) body {
  margin:0;
  background:#FFFFFF;
}
:where(.page-microcommunitiesrole) .dot-mark {
  display:block;
  width:100%;
  max-width:520px;
  margin:0 auto;
  height:auto;
}

/* === 11. RESPONSIVE ================================================== */

/* Everything below is a breakpoint override. It lives after all base rules so the
   cascade matches the original per-page stylesheets, where @media came last. */

/* -----------------------------------------------------------------------
   11.1     .site / .site-chrome             shared across pages
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce) {
  .bump-loop .bl-track{animation:none}
  html:where(.site), :where(.site) *{transition:none!important;scroll-behavior:auto}
}

@media (max-width:900px) {
  :where(.site-chrome) .foot-grid{grid-template-columns:1fr 1fr}
  :where(.site-chrome) .menu-toggle{display:flex;order:3}
  :where(.site-chrome) nav ul {
    display:flex;
    flex-direction:column;
    gap:0;
    position:fixed;
    top:68px;
    left:0;
    right:0;
    height:calc(100vh - 68px);
    background:#fff;
    padding:12px 32px 40px;
    transform:translateX(100%);
    transition:transform .25s ease;
    overflow-y:auto;
    z-index:55;
  }
  :where(.site-chrome) body.nav-open nav ul{transform:translateX(0)}
  :where(.site-chrome) nav ul li{border-bottom:1px solid var(--line)}
  :where(.site-chrome) nav ul a{display:block;padding:18px 0;font-size:16px}
  :where(.site-chrome) nav ul .nav-cta{display:inline-block;margin:20px 0;padding:12px 20px}
  :where(.site-chrome) .gallery-grid{grid-template-columns:1fr 1fr}
  :where(.site-chrome) .highlight-grid{grid-template-columns:1fr 1fr}
  :where(.site-chrome) .process-steps{grid-template-columns:1fr 1fr}
  :where(.site-chrome) .retainer{flex-direction:column;align-items:flex-start;gap:8px}
}

@media (max-width:560px) {
  :where(.site) .wrap{padding:0 20px}
  :where(.site-chrome) .foot-grid{grid-template-columns:1fr}
  :where(.site-chrome) .gallery-grid{grid-template-columns:1fr}
  :where(.site-chrome) .highlight-grid{grid-template-columns:1fr}
  :where(.site-chrome) .hero-image{aspect-ratio:4/3;margin-top:40px}
}

/* -----------------------------------------------------------------------
   11.2     .page-bump-cafe                  bump-cafe.html
   ----------------------------------------------------------------------- */

@media (max-width:900px) {
  :where(.page-bump-cafe) .process-steps.two-col{grid-template-columns:1fr}
  :where(.page-bump-cafe) .gallery-grid{grid-template-columns:1fr}

  :where(.page-bump-cafe) .cafe-shot{margin-top:32px}
  :where(.page-bump-cafe) .cafe-shot img{border-radius:12px}
  :where(.page-bump-cafe) .format-row{grid-template-columns:1fr;gap:8px}
  :where(.page-bump-cafe) .cafe-cta{flex-direction:column;align-items:flex-start}
}

@media (max-width:560px) {
  :where(.page-bump-cafe) .process-steps{grid-template-columns:1fr}
  :where(.page-bump-cafe) .process-step {
    border-right:none;
    border-top:1px solid var(--line);
    padding:24px 0;
  }
  :where(.page-bump-cafe) .process-steps{border-top:none}
  :where(.page-bump-cafe) .hero{padding:60px 0 40px}
  /* bump-cafe.html has no 560px .foot-grid rule of its own — keep its 900px value. */
  :where(.page-bump-cafe) .foot-grid{grid-template-columns:1fr 1fr}
}

/* -----------------------------------------------------------------------
   11.3     .page-campaigns                  campaigns.html
   ----------------------------------------------------------------------- */

@media (max-width:900px) {
  :where(.page-campaigns) .tactic-grid{grid-template-columns:1fr 1fr}
  :where(.page-campaigns) .case-grid{grid-template-columns:1fr}
  :where(.page-campaigns) .cmp-cta{flex-direction:column;align-items:flex-start}
}

@media (max-width:560px) {
  :where(.page-campaigns) .tactic-grid{grid-template-columns:1fr}
  :where(.page-campaigns) .hero{padding:60px 0 40px}
  /* On phones the hero follows the site's 4:3, set above — taller suits the
     narrow column, and the photograph has the headroom for it now. */
  :where(.page-campaigns) .hero-image{margin-top:40px}
}

/* -----------------------------------------------------------------------
   11.4     .page-euroconsumers-idea-sprint  euroconsumers-idea-sprint.html
   ----------------------------------------------------------------------- */

@media (max-width:900px) {
  :where(.page-euroconsumers-idea-sprint) .obj-grid{grid-template-columns:1fr 1fr}
  :where(.page-euroconsumers-idea-sprint) .narrative-grid{grid-template-columns:1fr}
  :where(.page-euroconsumers-idea-sprint) .pc-grid{grid-template-columns:1fr}
  :where(.page-euroconsumers-idea-sprint) .archetype-grid{grid-template-columns:1fr 1fr}
  :where(.page-euroconsumers-idea-sprint) .progress{top:64px}
}

@media (max-width:560px) {
  :where(.page-euroconsumers-idea-sprint) .obj-grid{grid-template-columns:1fr}
  :where(.page-euroconsumers-idea-sprint) .archetype-grid{grid-template-columns:1fr}
  :where(.page-euroconsumers-idea-sprint) .hero{padding:48px 0 0}
  :where(.page-euroconsumers-idea-sprint) .step{padding:56px 0}
  :where(.page-euroconsumers-idea-sprint) .option{padding:24px}
  :where(.page-euroconsumers-idea-sprint) footer.doc-footer .wrap {
    flex-direction:column;
    align-items:flex-start;
  }
}

/* -----------------------------------------------------------------------
   11.5     .page-idea-sprint                idea-sprint.html
   ----------------------------------------------------------------------- */

@media (max-width:900px) {
  :where(.page-idea-sprint) .role-grid{grid-template-columns:1fr}
  :where(.page-idea-sprint) .step-row{grid-template-columns:1fr;gap:14px}
}

@media (max-width:560px) {
  :where(.page-idea-sprint) .hero{padding:56px 0 40px}
}

/* -----------------------------------------------------------------------
   11.6     .page-index                      index.html
   ----------------------------------------------------------------------- */

@media (max-width:900px) {
  :where(.page-index) .cards{grid-template-columns:1fr}
  :where(.page-index) .ring-divider{width:112px;height:112px;margin-bottom:24px}
  :where(.page-index) .ring-divider .ring-mark{width:78px}
  :where(.page-index) .venue-grid{grid-template-columns:1fr}
  :where(.page-index) .steps{grid-template-columns:1fr;border-top:none}
  :where(.page-index) .step{border-right:none;border-top:1px solid #2a2a2a;padding:22px 0}
  :where(.page-index) .work-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:560px) {
  :where(.page-index) .hero{padding:64px 0 64px}
  :where(.page-index) .ring-divider{width:92px;height:92px;margin-bottom:20px}
  :where(.page-index) .ring-divider .ring-mark{width:64px}
  :where(.page-index) .promo-panel{padding:34px 22px 26px;border-radius:14px}
  :where(.page-index) .work-grid{grid-template-columns:1fr}
  :where(.page-index) .hm-row img{width:100px}
  :where(.page-index) .hm-row{gap:8px}
  :where(.page-index) .hm-track + .hm-track{margin-top:8px}

}

/* -----------------------------------------------------------------------
   11.7     .page-media-partnerships         media-partnerships.html
   ----------------------------------------------------------------------- */

@media (max-width:900px) {
  :where(.page-media-partnerships) .why .wrap{padding:60px 32px}
  :where(.page-media-partnerships) .why-grid{grid-template-columns:1fr;gap:28px}
  :where(.page-media-partnerships) .step-item{grid-template-columns:1fr;gap:8px}
  :where(.page-media-partnerships) .mp-cta{flex-direction:column;align-items:flex-start}
}

@media (max-width:560px) {
  :where(.page-media-partnerships) .hero{padding:60px 0 40px}
}

/* -----------------------------------------------------------------------
   11.8     .page-policy-experience-space    policy-experience-space.html
   ----------------------------------------------------------------------- */

@media (max-width:900px) {
  :where(.page-policy-experience-space) .partner .wrap {
    grid-template-columns:1fr;
    gap:28px;
    padding:60px 32px;
  }
  :where(.page-policy-experience-space) .pes-cta{flex-direction:column;align-items:flex-start}
}

@media (max-width:560px) {
  :where(.page-policy-experience-space) .process-steps{grid-template-columns:1fr}
  :where(.page-policy-experience-space) .process-step {
    border-right:none;
    border-top:1px solid #2a2a2a;
    padding:20px 0;
  }
  :where(.page-policy-experience-space) .process-steps{border-top:none}
  :where(.page-policy-experience-space) .hero{padding:60px 0 40px}
}

/* -----------------------------------------------------------------------
   11.9     .page-policy-experiences         policy-experiences.html
   ----------------------------------------------------------------------- */

@media (max-width:900px) {
  :where(.page-policy-experiences) .type-row{grid-template-columns:1fr;gap:28px;padding:48px 0}
  :where(.page-policy-experiences) .type-row.reverse .type-photo{order:0}
  :where(.page-policy-experiences) .pe-cta{flex-direction:column;align-items:flex-start}
}

@media (max-width:560px) {
  :where(.page-policy-experiences) .hero{padding:56px 0 40px}
}

/* -----------------------------------------------------------------------
   11.10    .page-policymicrocommunities     policymicrocommunities.html
   ----------------------------------------------------------------------- */

@media (max-width:900px) {
  :where(.page-policymicrocommunities) .hero .wrap{grid-template-columns:1fr;gap:32px}
  :where(.page-policymicrocommunities) .hero-visual{order:2}
  :where(.page-policymicrocommunities) .hero-visual .ring-mark{max-width:320px}
  :where(.page-policymicrocommunities) .roles{grid-template-columns:1fr}
  :where(.page-policymicrocommunities, .page-feve) .eclipse{grid-template-columns:1fr;gap:44px}
  :where(.page-policymicrocommunities) .engines{grid-template-columns:1fr 1fr}
  :where(.page-policymicrocommunities) .needs{grid-template-columns:1fr}
  :where(.page-policymicrocommunities) .pmc-cta{flex-direction:column;align-items:flex-start}
}

@media (max-width:560px) {
  :where(.page-policymicrocommunities) .engines{grid-template-columns:1fr}
  :where(.page-policymicrocommunities) .hero{padding:56px 0 40px}
  :where(.page-policymicrocommunities) .hero-visual .ring-mark{max-width:240px}
  :where(.page-policymicrocommunities) .roles-visual .dot-mark{width:190px}
}

/* -----------------------------------------------------------------------
   11.11    .page-team                       team.html
   ----------------------------------------------------------------------- */

@media (max-width:900px) {
  :where(.page-team) .team-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:560px) {
  :where(.page-team) .team-grid{grid-template-columns:1fr 1fr;gap:26px 18px}
  :where(.page-team) .hero{padding:60px 0 40px}
  :where(.page-team) .team-cta{flex-direction:column;align-items:flex-start}
}

/* -----------------------------------------------------------------------
   11.12    .case-study                      case study template (all case study pages)
   ----------------------------------------------------------------------- */

@media (max-width:900px) {
  :where(.case-study) .case-cta{flex-direction:column;align-items:flex-start}
}

@media (max-width:560px) {
  :where(.case-study) .meta-row{gap:28px}
  :where(.case-study) .lightbox-nav{display:none}
}

/* -----------------------------------------------------------------------
   11.13    .page-venues                     venues.html
   ----------------------------------------------------------------------- */

@media (max-width:900px) {
  :where(.page-venues) .venue-row{grid-template-columns:1fr;gap:24px;padding:44px 0}
  :where(.page-venues) .venue-row.reverse .venue-photo{order:0}
  :where(.page-venues) .callout{flex-direction:column}
}

@media (max-width:560px) {
  :where(.page-venues) .hero{padding:56px 0 40px}
}

/* -----------------------------------------------------------------------
   11.14    .page-work                       work.html
   ----------------------------------------------------------------------- */

@media (max-width:900px) {
  :where(.page-work) .work-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:560px) {
  :where(.page-work) .work-grid{grid-template-columns:1fr}
  :where(.page-work) .hero{padding:56px 0 40px}
}

/* -----------------------------------------------------------------------
   11.15    .page-working-with-bump          working-with-bump.html
   ----------------------------------------------------------------------- */

@media (max-width:900px) {
  :where(.page-working-with-bump) .profile-grid{grid-template-columns:1fr;gap:36px}
  :where(.page-working-with-bump) .people-spread{height:330px}
  :where(.page-working-with-bump) .pp-card{width:168px}
  :where(.page-working-with-bump) .expect-item{grid-template-columns:32px 1fr}
  :where(.page-working-with-bump) .philosophy .wrap {
    grid-template-columns:1fr;
    gap:28px;
    padding:60px 32px;
  }
  :where(.page-working-with-bump) .price-grid{grid-template-columns:1fr}
  :where(.page-working-with-bump) .pe-grid{grid-template-columns:1fr}
  :where(.page-working-with-bump) .fin-cta{flex-direction:column;align-items:flex-start}
}

@media (max-width:560px) {
  :where(.page-working-with-bump) .hero{padding:60px 0 40px}
}

/* -----------------------------------------------------------------------
   11.16    .page-forum-loop                 images/forum-loop.html
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce) {
  :where(.page-forum-loop) .forum-loop__stage img{transform:none !important}
}

/* -----------------------------------------------------------------------
   11.17    .page-thirdparties               venues-thirdparties.html
   ----------------------------------------------------------------------- */

@media (max-width:560px) {
  :where(.page-thirdparties) .hero{padding:56px 0 32px}
  :where(.page-thirdparties) .tp-section{padding:8px 0 64px}
  :where(.page-thirdparties) .tp-card{padding:16px 46px 16px 16px;font-size:15.5px}
  :where(.page-thirdparties) .tp-card--client,
  :where(.page-thirdparties) .tp-card--agency,
  :where(.page-thirdparties) .tp-card--media{padding-left:13px}
  :where(.page-thirdparties) .tp-outcome{padding:22px 20px}
  :where(.page-thirdparties) .tp-hire{padding:24px 22px;margin-top:40px;border-radius:14px}
  :where(.page-thirdparties) .tp-path{gap:14px}
}

/* -----------------------------------------------------------------------
   11.18    .page-copd, .page-irish-presidency, .page-ukmission, .page-bms
                                             copd/index.php, irish-presidency/index.php
   ----------------------------------------------------------------------- */

@media (max-width:900px) {
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .split{grid-template-columns:1fr;gap:28px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .split-fig{min-height:0}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .split-fig img{aspect-ratio:16/9;height:auto;flex:none}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .reception-grid{grid-template-columns:1fr;gap:14px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .reception-grid img{height:300px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .photo-stack{height:280px;margin-top:44px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .ps-card{width:230px;border-radius:12px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .two-col{grid-template-columns:1fr}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .phases{grid-template-columns:1fr;gap:26px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .remarks{grid-template-columns:1fr;gap:28px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .spec-row{grid-template-columns:180px 1fr;gap:18px}
}

@media (max-width:760px) {
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .doc-tag{display:none}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .step{padding:56px 0}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .hero{padding:44px 0 0}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .hero h1{max-width:none}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .hero-image{aspect-ratio:4/3}
  :where(.page-bms) .ex-grid{grid-template-columns:1fr}
  :where(.page-bms) .venue-shot img{border-radius:12px}
  :where(.page-bms) .demo-embed{margin-left:-20px;margin-right:-20px}
  :where(.page-bms) .demo-embed figcaption{padding:0 20px}
  :where(.page-bms) .demo-embed iframe{aspect-ratio:4/3;min-height:420px}
  :where(.page-bms) .tier-grid{grid-template-columns:1fr;gap:34px}
  :where(.page-feve) .opt-grid{grid-template-columns:1fr}
  :where(.page-feve) .roles-feve{grid-template-columns:1fr}
  :where(.page-feve) .opt-card{padding:22px 20px 24px}
  /* Three columns cannot hold at phone width. The header row goes, and unit
     and price sit on one line under the item instead of stacking separately. */
  :where(.page-feve) .m-head{display:none}
  :where(.page-feve) .m-row{grid-template-columns:auto 1fr;gap:4px 14px}
  :where(.page-feve) .m-what{grid-column:1 / -1}
  :where(.page-feve) .m-unit{text-align:left;margin-top:8px}
  :where(.page-feve) .m-price{text-align:right;margin-top:8px}
  /* The month label stacks above its entry rather than squeezing into a
     150px column that would wrap "Nov - Dec" onto two lines on a phone. */
  :where(.page-feve) .cal-row{grid-template-columns:1fr;gap:8px;padding:18px 0}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .doc-toc{margin-top:38px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .spec-row{grid-template-columns:1fr;gap:4px;padding:12px 0}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .spec dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .opt{padding:24px 20px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .opt-price{text-align:left}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .photo-stack{height:210px;margin-top:36px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .ps-card{width:178px;border-radius:10px;box-shadow:0 12px 26px rgba(0,0,0,.16)}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .rundown li{grid-template-columns:1fr;gap:4px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .rundown .rt{font-size:12px;letter-spacing:.1em}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .reception{margin:32px 0 30px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .reception-grid img{height:220px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card{padding:22px 20px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-head{gap:14px;padding:19px 2px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-body{padding-bottom:32px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .callout{padding:22px 20px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .price li{flex-direction:column;align-items:flex-start;gap:4px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .price .total{padding:14px 14px}
  :where(.page-irish-presidency) .kiosk{grid-template-columns:1fr;gap:28px}
  :where(.page-irish-presidency) .kiosk-fig{max-width:340px}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .approval{padding:56px 0}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) footer.doc-footer .note{text-align:left}
}

/* The quote is meant to be printable. Drop the sticky chrome, unpin the
   layout, and keep each option and each priced block on one page. */
@media print {
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .doc-nav, :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .doc-toc{position:static;backdrop-filter:none}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .doc-toc{display:none}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .step{padding:28px 0;break-inside:auto}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .opt, :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .price-block,
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .callout, :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .remark{break-inside:avoid}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .step h2{break-after:avoid}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .hero-image, :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .photo-stack,
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .split-fig, :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .loop-embed,
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .reception, :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .stack-note{display:none}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .gate{display:none}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold-mark{display:none}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .fold{break-inside:avoid}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .split{grid-template-columns:1fr}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card-ink{background:var(--paper);border-color:var(--ink)}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card-ink h4, :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card-ink p,
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .col-card-ink .owner{color:var(--ink)}
  :where(.page-copd, .page-irish-presidency, .page-ukmission, .page-bms, .page-feve) .approval{break-before:page}
}

/* -----------------------------------------------------------------------
   11.19    .legal-doc                       terms-and-conditions.html,
                                              cookie-policy.html
   ----------------------------------------------------------------------- */
@media (max-width:560px) {
  :where(.legal-doc) .hero{padding:56px 0 32px}
}