/* ============================================================
     BRAND DESIGN TOKENS  (from BRAND.md — Jump Guy / Citadel)
  ============================================================ */
  :root {
    --cp-blue:        #2C70D4;   /* primary */
    --cp-blue-dark:   #2360B8;
    --cp-royal:       #0A1A5C;   /* deep hero background */
    --cp-navy:        #16233B;   /* dark bars / footer */
    --cp-red:         #ED1C24;   /* CTA accent */
    --cp-red-dark:    #C8151C;
    --cp-yellow:      #FFC72C;   /* highlight */
    --cp-ink:         #111827;
    --cp-body:        #374151;
    --cp-muted:       #6B7280;
    --cp-border:      rgba(0,0,0,.09);
    --cp-off:         #F4F7FC;
    --cp-light:       #E7EDF6;
    --font-head:      'Nunito', sans-serif;
    --font-body:      'Inter', sans-serif;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--cp-body);
    background: #fff;
    line-height: 1.6;
  }
  h1, h2, h3, h4 { font-family: var(--font-head); color: var(--cp-ink); margin: 0; line-height: 1.15; letter-spacing: -0.01em; }
  a { color: inherit; }
  img { max-width: 100%; display: block; }
  .cp-wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
  .cp-hl { color: var(--cp-yellow); }              /* the signature yellow highlight word */

  /* Buttons — pill system */
  .cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-weight: 800; font-size: 15px; padding: 13px 24px; border-radius: 999px; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform .12s, background .15s, color .15s; white-space: nowrap; }
  .cp-btn:hover { transform: translateY(-2px); }
  .cp-btn-red { background: var(--cp-red); color: #fff; }
  .cp-btn-red:hover { background: var(--cp-red-dark); }
  .cp-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
  .cp-btn-outline:hover { background: rgba(255,255,255,.12); }
  .cp-btn-blue { background: var(--cp-blue); color: #fff; }
  .cp-btn-blue:hover { background: var(--cp-blue-dark); }

  /* ===== UTILITY BAR ===== */
  .cp-utility { background: var(--cp-navy); color: rgba(255,255,255,.85); font-size: 13px; }
  .cp-utility .cp-wrap { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px 20px; flex-wrap: wrap; text-align: center; }
  .cp-utility strong { color: var(--cp-yellow); }
  .cp-utility a { text-decoration: none; color: var(--cp-yellow); font-weight: 700; }

  /* ===== HEADER ===== */
  .cp-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--cp-border); box-shadow: 0 2px 14px rgba(0,0,0,.05); }
  .cp-header .cp-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; }
  .cp-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 900; font-size: 20px; color: var(--cp-royal); text-decoration: none; }
  .cp-logo .mark { width: 40px; height: 40px; border-radius: 12px; background: var(--cp-blue); color: #fff; display: grid; place-items: center; font-size: 20px; }
  .cp-logo .mark::after { content: "🎉"; }
  .cp-nav { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; }
  /* nowrap keeps two-word labels ("Party Planning", "Service Area") on one line
     instead of breaking mid-label and making the nav look two rows tall */
  .cp-nav a { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--cp-ink); text-decoration: none; white-space: nowrap; }
  .cp-nav a:hover { color: var(--cp-blue); }
  /* tighten slightly on narrow desktops so it still fits above the 900px burger breakpoint */
  @media (max-width: 1120px) { .cp-nav { gap: 15px; } .cp-nav a { font-size: 14px; } }
  /* Narrow desktops: the full nav + phone text + CTA button overflow the header.
     Drop the phone digits (icon stays tappable, and the number is in the utility
     bar directly above) only in the band where the full nav is still shown. */
  @media (min-width: 901px) and (max-width: 1030px) {
    .cp-header-phone span { display: none; }
    .cp-header .cp-wrap { gap: 10px; }
  }
  .cp-header-cta { display: flex; align-items: center; gap: 14px; }
  .cp-header-phone { font-family: var(--font-head); font-weight: 800; color: var(--cp-royal); text-decoration: none; white-space: nowrap; }
  .cp-header-phone i { color: var(--cp-red); }
  .cp-burger { display: none; background: none; border: none; font-size: 24px; color: var(--cp-ink); cursor: pointer; }

  /* ===== HERO ===== */
  .cp-hero { position: relative; background: var(--cp-royal); color: #fff; overflow: hidden; }
  .cp-hero::before { /* dot texture */
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.09) 1.5px, transparent 1.5px);
    background-size: 22px 22px; opacity: .9; pointer-events: none;
  }
  .cp-hero .cp-wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 56px 20px 64px; }
  .cp-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; margin-bottom: 18px; }
  .cp-hero h1 { color: #fff; font-size: clamp(32px, 5vw, 52px); font-weight: 900; margin-bottom: 16px; }
  .cp-hero-sub { font-size: 17px; color: rgba(255,255,255,.82); max-width: 520px; margin-bottom: 26px; }
  .cp-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
  .cp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .cp-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 7px 13px; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; color: #fff; }
  .cp-chip i { color: var(--cp-yellow); }
  /* Hero visual placeholder — replace with a real photo collage */
  .cp-hero-visual { border-radius: 20px; overflow: hidden; border: 4px solid rgba(255,255,255,.14); background:
      linear-gradient(135deg, var(--cp-blue), #4E8BE6);
    aspect-ratio: 4/3; display: grid; place-items: center; text-align: center; }
  .cp-hero-visual span { font-size: 76px; }
  .cp-hero-visual small { display: block; color: rgba(255,255,255,.8); font-family: var(--font-head); font-weight: 700; margin-top: 6px; }

  /* ===== SECTION SHELL ===== */
  .cp-section { padding: 64px 0; }
  .cp-section.alt { background: var(--cp-off); }
  .cp-eyebrow { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; color: var(--cp-blue); margin: 0 0 8px; }
  .cp-section h2 { font-size: clamp(26px, 3.5vw, 36px); font-weight: 900; margin-bottom: 10px; }
  .cp-section-intro { color: var(--cp-muted); font-size: 16px; max-width: 640px; margin: 0 0 34px; }
  .cp-center { text-align: center; }
  .cp-center .cp-section-intro { margin-left: auto; margin-right: auto; }

  /* ===== HOW IT WORKS ===== */
  .cp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .cp-step { background: #fff; border: 1px solid var(--cp-border); border-radius: 16px; padding: 24px 20px; text-align: center; }
  .cp-step .num { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; background: var(--cp-blue); color: #fff; font-family: var(--font-head); font-weight: 900; display: grid; place-items: center; font-size: 18px; }
  .cp-step h3 { font-size: 17px; margin-bottom: 6px; }
  .cp-step p { font-size: 14px; color: var(--cp-muted); margin: 0; }

  /* ===== STAT TILES ===== */
  .cp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .cp-stat { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--cp-border); border-radius: 16px; padding: 18px 20px; }
  .cp-stat-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; background: rgba(44,112,212,.10); }
  .cp-stat .n { font-family: var(--font-head); font-weight: 900; font-size: 22px; color: var(--cp-ink); line-height: 1; }
  .cp-stat .l { font-size: 13px; color: var(--cp-muted); }

  /* ===== POPULAR RENTALS GRID ===== */
  .cp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .cp-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--cp-border); text-decoration: none; display: block; }
  /* Replace each .cp-card-img background with a real <img>. Placeholder shown. */
  .cp-card-img { position: absolute; inset: 0; display: grid; place-items: center; font-size: 60px; }
  .cp-card:nth-child(1) .cp-card-img { background: linear-gradient(135deg,#2C70D4,#5B9BEA); }
  .cp-card:nth-child(2) .cp-card-img { background: linear-gradient(135deg,#22A86B,#4ADE80); }
  .cp-card:nth-child(3) .cp-card-img { background: linear-gradient(135deg,#ED1C24,#FF6B6B); }
  .cp-card:nth-child(4) .cp-card-img { background: linear-gradient(135deg,#0A1A5C,#2C70D4); }
  .cp-card:nth-child(5) .cp-card-img { background: linear-gradient(135deg,#F59E0B,#FFC72C); }
  .cp-card:nth-child(6) .cp-card-img { background: linear-gradient(135deg,#0891B2,#22D3EE); }
  .cp-card-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 16px 14px; background: linear-gradient(transparent, rgba(0,0,0,.78)); color: #fff; }
  .cp-card-cap .t { font-family: var(--font-head); font-weight: 800; font-size: 16px; }
  .cp-card-cap .s { font-size: 12.5px; color: rgba(255,255,255,.8); }
  .cp-card:hover .cp-card-cap .t { color: var(--cp-yellow); }

  /* ===== INTERACTIVE SECTIONS SLOT ===== */
  .cp-slot { border: 2px dashed var(--cp-blue); border-radius: 16px; padding: 40px 24px; text-align: center; color: var(--cp-blue); background: rgba(44,112,212,.04); font-family: var(--font-head); font-weight: 700; }

  /* ===== TESTIMONIALS ===== */
  .cp-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .cp-quote { background: #fff; border: 1px solid var(--cp-border); border-radius: 16px; padding: 22px; }
  .cp-quote .stars { color: var(--cp-yellow); margin-bottom: 10px; letter-spacing: 2px; }
  .cp-quote p { font-size: 14.5px; color: var(--cp-body); margin: 0 0 14px; }
  .cp-quote .who { font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--cp-ink); }
  .cp-quote .who span { display: block; font-weight: 600; font-size: 12.5px; color: var(--cp-muted); }

  /* ===== FAQ ===== */
  .cp-faq { max-width: 820px; margin: 0 auto; }
  .cp-faq-item { border: 1px solid var(--cp-border); border-radius: 14px; margin-bottom: 10px; overflow: hidden; background: #fff; }
  .cp-faq-q { width: 100%; text-align: left; background: none; border: none; padding: 18px 20px; font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--cp-ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .cp-faq-q i { color: var(--cp-blue); transition: transform .2s; flex-shrink: 0; }
  .cp-faq-item.open .cp-faq-q i { transform: rotate(45deg); }
  .cp-faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
  .cp-faq-a p { padding: 0 20px 18px; margin: 0; font-size: 14.5px; color: var(--cp-body); }

  /* ===== CLOSING CTA BAND ===== */
  .cp-cta-band { background: var(--cp-red); color: #fff; text-align: center; }
  .cp-cta-band .cp-wrap { padding: 48px 20px; }
  .cp-cta-band h2 { color: #fff; font-size: clamp(24px,3.5vw,34px); margin-bottom: 10px; }
  .cp-cta-band p { color: rgba(255,255,255,.9); margin: 0 0 22px; }
  .cp-cta-band .cp-btn-white { background: #fff; color: var(--cp-red); }
  .cp-cta-band .cp-btn-white:hover { background: var(--cp-yellow); color: var(--cp-navy); }

  /* ===== FOOTER ===== */
  .cp-footer { background: var(--cp-navy); color: rgba(255,255,255,.72); font-size: 14px; }
  .cp-footer .cp-wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px; padding: 48px 20px 30px; }
  .cp-footer h3, .cp-footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; font-weight: 800; }
  .cp-footer a { color: rgba(255,255,255,.72); text-decoration: none; display: block; margin-bottom: 8px; }
  .cp-footer a:hover { color: var(--cp-yellow); }
  .cp-footer .socials { display: flex; gap: 12px; margin-top: 4px; }
  .cp-footer .socials a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.10); margin: 0; }
  .cp-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); text-align: center; padding: 16px 20px; font-size: 12.5px; color: rgba(255,255,255,.5); }

  /* ===== MOBILE CLICK-TO-CALL BAR ===== */
  .cp-callbar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: var(--cp-red); color: #fff; text-align: center; padding: 14px; font-family: var(--font-head); font-weight: 800; text-decoration: none; box-shadow: 0 -4px 16px rgba(0,0,0,.2); }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 900px) {
    .cp-nav { display: none; }
    .cp-burger { display: block; }
    .cp-hero .cp-wrap { grid-template-columns: 1fr; }
    .cp-hero-visual { order: -1; }
    .cp-steps, .cp-stats, .cp-cards, .cp-quotes { grid-template-columns: 1fr 1fr; }
    .cp-footer .cp-wrap { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .cp-header-phone span { display: none; }
    .cp-steps, .cp-stats, .cp-cards, .cp-quotes, .cp-footer .cp-wrap { grid-template-columns: 1fr; }
    .cp-callbar { display: block; }
    body { padding-bottom: 56px; }
  }

/* ===== EMBEDDED INTERACTIVE TOOLS GROUP ===== */
.cp-tools { background: var(--cp-off); }
.cp-tools > .cp-embed { max-width: 1180px; margin: 0 auto; }
.cp-tools > .cp-embed + .cp-embed { margin-top: 4px; }
/* ===== SERVICE AREA ===== */
.cp-areas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
.cp-area { background:#fff; border:1px solid var(--cp-border); border-radius:12px; padding:12px 14px; font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--cp-ink); display:flex; align-items:center; gap:8px; }
.cp-area i { color: var(--cp-blue); }
@media (max-width: 900px){ .cp-areas-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .cp-areas-grid { grid-template-columns: 1fr; } }

/* ===== REAL IMAGERY: hero + card images fill their frames ===== */
.cp-hero-visual { background: var(--cp-navy); }
.cp-hero-visual picture { display: block; width: 100%; height: 100%; }
.cp-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
picture.cp-card-img { display: block; }
.cp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== SVG LOGO MARK (replaces emoji) ===== */
.cp-logo .mark { background: transparent; overflow: hidden; padding: 0; }
.cp-logo .mark::after { content: none; }
.cp-logo .mark svg { width: 100%; height: 100%; display: block; }

/* ===== PARENT-BRAND (Jump Guy) LOGO IN FOOTER ===== */
.cp-parentbrand { display: inline-block; margin-top: 16px; }
.cp-parentbrand img { border-radius: 12px; width: 120px; height: auto; }

/* ===== REVIEWS CTA (honest placeholder until real reviews are pasted) ===== */
.cp-review-cta { max-width: 620px; margin: 6px auto 0; background: #fff; border: 1px solid var(--cp-border); border-radius: 16px; padding: 28px 26px; text-align: center; box-shadow: 0 6px 24px rgba(16,35,59,.06); }
.cp-review-cta p { margin: 0 0 18px; color: var(--cp-body); font-size: 15.5px; }
.cp-review-cta .cp-btn i { color: #fff; }

/* ===== ACCESSIBILITY: visible focus + larger mobile tap targets ===== */
a:focus-visible, button:focus-visible, .cp-btn:focus-visible,
input:focus-visible, select:focus-visible, [tabindex]:focus-visible,
.cp-faq-q:focus-visible { outline: 3px solid var(--cp-blue); outline-offset: 2px; border-radius: 6px; }
.cp-hero a:focus-visible, .cp-cta-band a:focus-visible, .cp-footer a:focus-visible { outline-color: var(--cp-yellow); }
@media (max-width: 560px) {
  .cp-footer a { padding: 6px 0; }
  .cp-utility a { padding: 4px 0; display: inline-block; }
}

/* ===== WCAG 2.1 AA CONTRAST TUNING ===== */
/* Brand red/blue as small text or button fills need darker shades for 4.5:1 */
.cp-btn-red { background: #C8151C; }
.cp-btn-red:hover { background: #A5111A; }
.cp-btn-blue { background: #2360B8; }
.cp-btn-blue:hover { background: #1B4E97; }
.cp-cta-band .cp-btn-white { color: #C8151C; }
.cp-eyebrow { color: #215CB0; }
/* Interactive sections: darken primary + muted so small text/links pass AA */
[id^="ludiParty"] { --ludi-red: #235FB0; --ludi-red-dark: #1B4E97; --ludi-muted: #586274; }

/* CTA band + mobile call bar: darker red so body text passes AA */
.cp-cta-band { background: #C8151C; }
.cp-cta-band p { color: #fff; }
.cp-callbar { background: #C8151C; }

/* ===== BRAND LOGOS (real Jump Guy PNGs) ===== */
.cp-brand-logo { width: 48px; height: 48px; border-radius: 10px; display: block; }
.cp-brand-word { font-family: var(--font-head); font-weight: 900; font-size: 20px; color: var(--cp-royal); white-space: nowrap; }
@media (max-width: 1120px) { .cp-brand-word { font-size: 18px; } }
.cp-utility-logo { height: 26px; width: auto; display: block; }
.cp-footer .cp-footer-logo { display: inline-block; }
.cp-footer .cp-footer-logo img { width: 200px; height: auto; }
@media (max-width: 560px) { .cp-utility-logo { display: none; } .cp-brand-word { font-size: 17px; } }

/* Keep logos from flex-shrinking (preserves intrinsic aspect ratio) */
.cp-logo picture { display: block; flex: 0 0 auto; line-height: 0; }
.cp-brand-logo { flex-shrink: 0; }
.cp-utility picture { display: block; flex: 0 0 auto; line-height: 0; }

/* ============================================================
   PHASE 2 — category / location / guide pages
============================================================ */
.cp-page-hero { position: relative; background: var(--cp-royal); color: #fff; overflow: hidden; }
.cp-page-hero::before { content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.09) 1.5px, transparent 1.5px); background-size:22px 22px; pointer-events:none; }
.cp-page-hero .cp-wrap { position: relative; padding: 46px 20px 50px; }
.cp-page-hero h1 { color:#fff; font-size: clamp(28px,4.6vw,46px); font-weight:900; margin-bottom:14px; max-width:900px; }
.cp-page-hero p.cp-lede { color: rgba(255,255,255,.86); font-size:17px; max-width:660px; margin:0 0 22px; }
.cp-page-hero .cp-hero-ctas { margin-bottom: 20px; }
/* breadcrumb */
.cp-breadcrumb { background: var(--cp-off); border-bottom: 1px solid var(--cp-border); }
.cp-breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 auto; padding:11px 20px; max-width:1140px; font-size:13px; color:var(--cp-muted); font-family:var(--font-head); font-weight:700; }
.cp-breadcrumb a { color:#215CB0; text-decoration:none; }
.cp-breadcrumb a:hover { text-decoration:underline; }
.cp-breadcrumb li+li::before { content:"›"; margin-right:8px; color:var(--cp-muted); }
/* product grid */
.cp-count { font-family:var(--font-head); font-weight:800; color:var(--cp-muted); font-size:14px; margin:0 0 18px; }
.cp-pgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cp-pcard { display:flex; flex-direction:column; background:#fff; border:1px solid var(--cp-border); border-radius:16px; overflow:hidden; text-decoration:none; transition:transform .12s, box-shadow .15s; }
.cp-pcard:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(16,35,59,.12); }
.cp-pcard-img { aspect-ratio:4/3; background:#fff; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.cp-pcard-img picture { width:100%; height:100%; display:block; }
.cp-pcard-img img { width:100%; height:100%; object-fit:contain; display:block; padding:6px; }
.cp-pcard-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:10px; flex:1; }
.cp-pcard-name { font-family:var(--font-head); font-weight:800; font-size:14.5px; color:var(--cp-ink); line-height:1.25; }
.cp-pcard-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.cp-pcard-price { font-family:var(--font-head); font-weight:900; color:var(--cp-royal); font-size:15px; white-space:nowrap; }
.cp-pcard-price small { display:block; font-weight:700; font-size:10px; color:var(--cp-muted); letter-spacing:.02em; }
.cp-pcard-cta { font-family:var(--font-head); font-weight:800; font-size:12px; color:#fff; background:#2360B8; padding:7px 12px; border-radius:999px; white-space:nowrap; }
.cp-pcard:hover .cp-pcard-cta { background:#1B4E97; }
@media (max-width:900px){ .cp-pgrid{ grid-template-columns:1fr 1fr; } }
/* related links */
.cp-related { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.cp-related a { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--cp-border); border-radius:999px; padding:10px 18px; font-family:var(--font-head); font-weight:800; font-size:14px; color:var(--cp-ink); text-decoration:none; }
.cp-related a:hover { border-color:var(--cp-blue); color:#215CB0; }

/* ===== NAV DROPDOWN (Rentals menu) ===== */
.cp-has-sub { position: relative; }
.cp-has-sub > a { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--cp-ink); text-decoration: none; }
.cp-has-sub > a:hover { color: var(--cp-blue); }
.cp-has-sub > a .caret { font-size: 10px; opacity: .7; }
.cp-sub { position: absolute; top: 100%; left: 0; min-width: 230px; background: #fff; border: 1px solid var(--cp-border); border-radius: 14px; box-shadow: 0 14px 34px rgba(16,35,59,.16); padding: 8px; display: none; flex-direction: column; z-index: 60; }
.cp-has-sub:hover .cp-sub, .cp-has-sub:focus-within .cp-sub { display: flex; }
.cp-sub a { padding: 9px 13px; border-radius: 9px; font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--cp-ink); text-decoration: none; white-space: nowrap; }
.cp-sub a:hover { background: var(--cp-off); color: #215CB0; }
@media (max-width: 900px) {
  .cp-has-sub { display: block; width: 100%; }
  .cp-sub { position: static; display: flex; box-shadow: none; border: none; border-radius: 0; padding: 2px 0 8px 16px; min-width: 0; }
  .cp-has-sub > a .caret { display: none; }
}

/* ===== Phase-2 pages: contact actions, socials, service-hub cards ===== */
.cp-area { text-decoration: none; }
.cp-area:hover { border-color: var(--cp-blue); color: #215CB0; }
.cp-contact-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cp-btn-lg { font-size: 17px; padding: 16px 30px; }
.cp-btn-outline-dark { background: #fff; color: var(--cp-ink); border-color: var(--cp-border); }
.cp-btn-outline-dark:hover { background: var(--cp-off); color: #215CB0; }
.cp-social { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cp-off); color: #215CB0; text-decoration: none; }
.cp-social:hover { background: var(--cp-blue); color: #fff; }
.cp-pgrid-wide { grid-template-columns: repeat(3, 1fr); }
.cp-pgrid-wide .cp-pcard-body { padding: 22px 20px; }
@media (max-width: 900px) { .cp-pgrid-wide { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cp-pgrid-wide { grid-template-columns: 1fr; } }

/* ===== Network / sister-site chips (service area) ===== */
.cp-net-h { font-family: var(--font-head); font-weight: 800; font-size: 14px; color: #215CB0; text-transform: uppercase; letter-spacing: .06em; margin: 30px 0 12px; }
.cp-netgrid { display: flex; flex-wrap: wrap; gap: 10px; }
.cp-netchip { background: #fff; border: 1px solid var(--cp-border); border-radius: 999px; padding: 9px 16px; font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: var(--cp-ink); text-decoration: none; transition: transform .12s, border-color .15s, color .15s, background .15s; }
.cp-netchip:hover { border-color: var(--cp-blue); color: #215CB0; background: var(--cp-off); transform: translateY(-1px); }

/* ===== Footer "Our Network" hub links ===== */
.cp-footer-network { border-top: 1px solid rgba(255,255,255,.12); }
.cp-footer-network .cp-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 15px 20px; font-size: 12.5px; }
.cp-fn-label { color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; margin-right: 4px; }
.cp-footer-network a { color: rgba(255,255,255,.72); text-decoration: none; }
.cp-footer-network a:hover { color: var(--cp-yellow); }

/* deep-linked town chips / sections clear the sticky header */
.cp-area[id], section[id] { scroll-margin-top: 90px; }

/* ===== Contact delivery map (Leaflet + OSM) ===== */
.cp-map { height: 480px; border-radius: 16px; overflow: hidden; border: 1px solid var(--cp-border); box-shadow: 0 10px 34px rgba(16,35,59,.10); background: var(--cp-off); position: relative; z-index: 0; }
@media (max-width: 600px) { .cp-map { height: 360px; } }
.cp-map-list { margin-top: 6px; }
.cp-pin-dot { display: block; width: 16px; height: 16px; border-radius: 50%; background: #2360B8; border: 2.5px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.45); box-sizing: border-box; }
.cp-pin-hq .cp-pin-dot { width: 28px; height: 28px; background: var(--cp-red); box-shadow: 0 2px 7px rgba(0,0,0,.5); }
.cp-pop { font-family: var(--font-head); font-weight: 800; color: #215CB0; text-decoration: none; font-size: 14px; }
.cp-pop strong { color: var(--cp-ink); display: block; }

/* ===== Contact: polished social row + delivery note + footer address ===== */
.cp-social { width: 44px; height: 44px; border: 1px solid var(--cp-border); background: #fff; font-size: 17px; transition: transform .12s, background .15s, color .15s, border-color .15s; }
.cp-social:hover { background: var(--cp-blue); border-color: var(--cp-blue); color: #fff; transform: translateY(-2px); }
.cp-social-row { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
.cp-cc-note { max-width: 640px; margin: 26px auto 0; font-family: var(--font-head); font-weight: 700; font-size: 15.5px; color: var(--cp-ink); background: rgba(44,112,212,.06); border: 1px solid var(--cp-border); border-radius: 14px; padding: 14px 20px; }
.cp-foot-addr { display: block; margin-bottom: 8px; color: rgba(255,255,255,.72); }