/* ==========================================================================
   typography.css : site-wide readability pass
   Controls ONLY: font-size, line-height, color, letter-spacing, max-width.
   Loaded last on every page (after each page's inline <style> and nav-cta.css).
   Navigation, dropdowns, the mobile menu and buttons are intentionally NOT
   styled here.

   Specificity: every selector is prefixed with html:not(#p2) (an id-weight
   boost) so these values win over the per-page inline <style> blocks without
   using !important. The few !important rules at the bottom exist only to beat
   inline style="" attributes on specific elements.
   ========================================================================== */

:root {
  --tx-body: #D6D6D6;   /* dark-section paragraphs        (13.8:1 on #080808) */
  --tx-card: #CFCFCF;   /* card and list text             (12.9:1 on #080808) */
  --tx-label: #BFBFBF;  /* small neutral labels on dark   (10.9:1 on #080808) */
  --tx-ink: #2A2A2A;    /* all text on light backgrounds  (13.0:1 on #f4f4f2) */
  --tx-measure: 62ch;   /* paragraph line length */
}

/* 1. Body paragraphs in dark sections */

html:not(#p2) .page-desc,
html:not(#p2) .section-body,
html:not(#p2) .sec-body,
html:not(#p2) .body-text,
html:not(#p2) .bt,
html:not(#p2) .copy,
html:not(#p2) .article-intro,
html:not(#p2) .article-subtitle,
html:not(#p2) .article-body p,
html:not(#p2) .article-body li,
html:not(#p2) .faq-answer p,
html:not(#p2) .faq-answer li,
html:not(#p2) .faq-item p,
html:not(#p2) .cta-sub,
html:not(#p2) .cta-block p,
html:not(#p2) .article-cta p,
html:not(#p2) .cta p,
html:not(#p2) .hero-desc,
html:not(#p2) .hero-copy,
html:not(#p2) .services-body,
html:not(#p2) .locations-body,
html:not(#p2) .newsletter-sub,
html:not(#p2) .subtext,
html:not(#p2) .logistics-copy,
html:not(#p2) .logistics-copy p,
html:not(#p2) .service-area-copy,
html:not(#p2) .service-area-copy p,
html:not(#p2) .longview-story-copy p:not(.section-tag),
html:not(#p2) .story-body p,
html:not(#p2) .story-body,
html:not(#p2) .founder-body p,
html:not(#p2) .mersea-feature-desc,
html:not(#p2) .seo-body p,
html:not(#p2) .seo-body,
html:not(#p2) .size-block p,
html:not(#p2) .section-copy,
html:not(#p2) .section-copy p,
html:not(#p2) .section-copy li,
html:not(#p2) .faq-answer > div {
  font-size: 18px;
  line-height: 1.7;
  color: var(--tx-body);
}

/* 4. Paragraph measure (about 65 characters). Blocks that already have a narrower cap keep it. */

html:not(#p2) .section-body,
html:not(#p2) .sec-body,
html:not(#p2) .body-text,
html:not(#p2) .bt,
html:not(#p2) .copy,
html:not(#p2) .article-body p,
html:not(#p2) .article-body li,
html:not(#p2) .faq-answer p,
html:not(#p2) .faq-answer li,
html:not(#p2) .faq-item p,
html:not(#p2) .logistics-copy,
html:not(#p2) .logistics-copy p,
html:not(#p2) .service-area-copy,
html:not(#p2) .service-area-copy p,
html:not(#p2) .longview-story-copy p:not(.section-tag),
html:not(#p2) .story-body p,
html:not(#p2) .founder-body p,
html:not(#p2) .seo-body p,
html:not(#p2) .size-block p,
html:not(#p2) .section-copy,
html:not(#p2) .section-copy p,
html:not(#p2) .section-copy li,
html:not(#p2) p.stat-label,
html:not(#p2) .photo-caption,
html:not(#p2) .article-hero-caption,
html:not(#p2) .article-img-caption,
html:not(#p2) .article-intro,
html:not(#p2) .services-body,
html:not(#p2) .locations-body,
html:not(#p2) .newsletter-sub,
html:not(#p2) .subtext {
  max-width: var(--tx-measure);
}

html:not(#p2) .page-desc {
  width: min(100%, var(--tx-measure));
}

html:not(#p2) .article-body em {
  color: inherit;
}

/* 2. Card and list text */

html:not(#p2):not(#p3) .benefit-card p,
html:not(#p2):not(#p3) .activation-card p,
html:not(#p2):not(#p3) .event-card p,
html:not(#p2):not(#p3) .step-card p,
html:not(#p2):not(#p3) .service-card p,
html:not(#p2):not(#p3) .card p,
html:not(#p2):not(#p3) .case-study-copy p,
html:not(#p2):not(#p3) .addon-text,
html:not(#p2):not(#p3) .service-text,
html:not(#p2):not(#p3) .svc-body,
html:not(#p2):not(#p3) .client-desc,
html:not(#p2):not(#p3) .spec-desc,
html:not(#p2):not(#p3) .step-desc,
html:not(#p2):not(#p3) .step-text,
html:not(#p2):not(#p3) .location-body,
html:not(#p2):not(#p3) .blog-card-excerpt,
html:not(#p2):not(#p3) .featured-excerpt,
html:not(#p2):not(#p3) .sidebar-text,
html:not(#p2):not(#p3) .milestone-content p,
html:not(#p2):not(#p3) .service-body,
html:not(#p2):not(#p3) .checklist li,
html:not(#p2):not(#p3) .checklist ul li,
html:not(#p2):not(#p3) .menu-items li,
html:not(#p2):not(#p3) .difference-item,
html:not(#p2):not(#p3) .value-body,
html:not(#p2):not(#p3) .addon-desc {
  font-size: 17px;
  line-height: 1.65;
  color: var(--tx-card);
}

html:not(#p2):not(#p3) .benefit-card p,
html:not(#p2):not(#p3) .activation-card p,
html:not(#p2):not(#p3) .event-card p,
html:not(#p2):not(#p3) .step-card p,
html:not(#p2):not(#p3) .service-card p,
html:not(#p2):not(#p3) .card p,
html:not(#p2):not(#p3) .case-study-copy p,
html:not(#p2):not(#p3) .addon-text,
html:not(#p2):not(#p3) .service-text,
html:not(#p2):not(#p3) .svc-body,
html:not(#p2):not(#p3) .location-body,
html:not(#p2):not(#p3) .blog-card-excerpt,
html:not(#p2):not(#p3) .milestone-content p,
html:not(#p2):not(#p3) .service-body,
html:not(#p2):not(#p3) .checklist li,
html:not(#p2):not(#p3) .checklist ul li,
html:not(#p2):not(#p3) .menu-items li,
html:not(#p2):not(#p3) .difference-item,
html:not(#p2):not(#p3) .value-body,
html:not(#p2):not(#p3) .addon-desc {
  max-width: var(--tx-measure);
}

/* 3. Light-background sections (reviews, about, difference, clients, values, light content blocks) */

html:not(#p2):not(#p3):not(#p4):not(#p5) :is(.content-section.light, .section.light, .about, .difference, .clients, .testimonials, .addons, .values, .client-event, .t-card, .client-events-wrap, .text-client-list) p,
html:not(#p2):not(#p3):not(#p4):not(#p5) :is(.content-section.light, .section.light, .about, .difference, .clients, .testimonials, .addons, .values, .client-event, .t-card, .client-events-wrap, .text-client-list) li,
html:not(#p2):not(#p3):not(#p4):not(#p5) :is(.content-section.light, .section.light, .about, .difference, .clients, .testimonials, .addons, .values, .client-event, .t-card, .client-events-wrap, .text-client-list) figcaption,
html:not(#p2):not(#p3):not(#p4):not(#p5) :is(.content-section.light, .section.light, .about, .difference, .clients, .testimonials, .addons, .values, .client-event, .t-card, .client-events-wrap, .text-client-list) blockquote,
html:not(#p2):not(#p3):not(#p4):not(#p5) :is(.content-section.light, .section.light, .about, .difference, .clients, .testimonials, .addons, .values, .client-event, .t-card, .client-events-wrap, .text-client-list) dd {
  color: var(--tx-ink);
}

html:not(#p2) .about-body,
html:not(#p2) .t-text,
html:not(#p2) .difference-proof,
html:not(#p2) .difference-subhead,
html:not(#p2) .clients-subtitle,
html:not(#p2) .section-body.dark-text,
html:not(#p2) .story-copy p,
html:not(#p2) .light .copy,
html:not(#p2) .content-section.light .section-copy,
html:not(#p2) .content-section.light .section-copy p,
html:not(#p2) .content-section.light .section-copy li,
html:not(#p2) .content-section.light .logistics-copy p,
html:not(#p2) .content-section.light .service-area-copy p,
html:not(#p2) .section.light p:not(.section-tag),
html:not(#p2) .content-section.light .logistics-copy,
html:not(#p2) .content-section.light .service-area-copy {
  font-size: 18px;
  line-height: 1.7;
  color: var(--tx-ink);
}

html:not(#p2) .about-body,
html:not(#p2) .t-text,
html:not(#p2) .difference-proof,
html:not(#p2) .difference-subhead,
html:not(#p2) .section-body.dark-text,
html:not(#p2) .story-copy p,
html:not(#p2) .section.light p:not(.section-tag) {
  max-width: var(--tx-measure);
}

html:not(#p2) .content-section.light .section-copy,
html:not(#p2) .content-section.light .logistics-copy,
html:not(#p2) .content-section.light .service-area-copy,
html:not(#p2) .about-body,
html:not(#p2) .difference-proof strong,
html:not(#p2) .t-text {
  color: var(--tx-ink);
}

html:not(#p2):not(#p3):not(#p4):not(#p5) .difference-item,
html:not(#p2):not(#p3):not(#p4):not(#p5) .difference-item.with,
html:not(#p2):not(#p3):not(#p4):not(#p5) .value-body,
html:not(#p2):not(#p3):not(#p4):not(#p5) .addon-desc {
  color: var(--tx-ink);
}

/* 5. Small all-caps labels: 13px floor, letter-spacing <= 0.08em. Cyan/accent eyebrows keep their colour. */

html:not(#p2):not(#p3):not(#p4) p.section-tag,
html:not(#p2):not(#p3):not(#p4) .sec-tag,
html:not(#p2):not(#p3):not(#p4) p.hero-eyebrow,
html:not(#p2):not(#p3):not(#p4) .page-eyebrow,
html:not(#p2):not(#p3):not(#p4) p.eyebrow,
html:not(#p2):not(#p3):not(#p4) .hero-tag,
html:not(#p2):not(#p3):not(#p4) .article-category,
html:not(#p2):not(#p3):not(#p4) .blog-card-cat,
html:not(#p2):not(#p3):not(#p4) .post-category,
html:not(#p2):not(#p3):not(#p4) .client-type,
html:not(#p2):not(#p3):not(#p4) .service-badge,
html:not(#p2):not(#p3):not(#p4) .client-panel-label,
html:not(#p2):not(#p3):not(#p4) .proof-label p,
html:not(#p2):not(#p3):not(#p4) .location-state,
html:not(#p2):not(#p3):not(#p4) .read-more,
html:not(#p2):not(#p3):not(#p4) .footer-back,
html:not(#p2):not(#p3):not(#p4) .stat-label,
html:not(#p2):not(#p3):not(#p4) .stat-label2,
html:not(#p2):not(#p3):not(#p4) .stat-box-label,
html:not(#p2):not(#p3):not(#p4) .stat-callout-label,
html:not(#p2):not(#p3):not(#p4) .article-meta-item,
html:not(#p2):not(#p3):not(#p4) .article-hero-caption,
html:not(#p2):not(#p3):not(#p4) .photo-caption,
html:not(#p2):not(#p3):not(#p4) .blog-card-date,
html:not(#p2):not(#p3):not(#p4) .post-date,
html:not(#p2):not(#p3):not(#p4) .breadcrumb,
html:not(#p2):not(#p3):not(#p4) .breadcrumb span,
html:not(#p2):not(#p3):not(#p4) .footer-col-title,
html:not(#p2):not(#p3):not(#p4) .footer-title,
html:not(#p2):not(#p3):not(#p4) .footer-copy,
html:not(#p2):not(#p3):not(#p4) .expect-label,
html:not(#p2):not(#p3):not(#p4) .expect-item,
html:not(#p2):not(#p3):not(#p4) .filter-label,
html:not(#p2):not(#p3):not(#p4) .tag,
html:not(#p2):not(#p3):not(#p4) .hero-meta span,
html:not(#p2):not(#p3):not(#p4) .menu-note,
html:not(#p2):not(#p3):not(#p4) .spec-label,
html:not(#p2):not(#p3):not(#p4) .sidebar-label,
html:not(#p2):not(#p3):not(#p4) .event-card-meta,
html:not(#p2):not(#p3):not(#p4) .event-card-count,
html:not(#p2):not(#p3):not(#p4) .contact-card-label,
html:not(#p2):not(#p3):not(#p4) .contact-card-sub,
html:not(#p2):not(#p3):not(#p4) .story-img-badge-label,
html:not(#p2):not(#p3):not(#p4) .about-badge-label,
html:not(#p2):not(#p3):not(#p4) .service-includes li,
html:not(#p2):not(#p3):not(#p4) .svc-list li,
html:not(#p2):not(#p3):not(#p4) .client-list li,
html:not(#p2):not(#p3):not(#p4) .location-link,
html:not(#p2):not(#p3):not(#p4) .sidebar-toc a,
html:not(#p2):not(#p3):not(#p4) .founder-name,
html:not(#p2):not(#p3):not(#p4) .lightbox-count,
html:not(#p2):not(#p3):not(#p4) .coming-text,
html:not(#p2):not(#p3):not(#p4) .coming-soon-text,
html:not(#p2):not(#p3):not(#p4) .t-role,
html:not(#p2):not(#p3):not(#p4) .t-name,
html:not(#p2):not(#p3):not(#p4) .client-event figcaption,
html:not(#p2):not(#p3):not(#p4) .text-client-list li,
html:not(#p2):not(#p3):not(#p4) .about-list li,
html:not(#p2):not(#p3):not(#p4) p.step-title,
html:not(#p2):not(#p3):not(#p4) .footer-contact a,
html:not(#p2):not(#p3):not(#p4) .event-card-arrow,
html:not(#p2):not(#p3):not(#p4) .t-stars span,
html:not(#p2):not(#p3):not(#p4) .t-stars,
html:not(#p2):not(#p3):not(#p4) .checklist h4,
html:not(#p2):not(#p3):not(#p4) .stat b + span,
html:not(#p2):not(#p3):not(#p4) .footer-bottom > span:not(.footer-slogan) {
  font-size: 13px;
}

html:not(#p2):not(#p3):not(#p4) p.section-tag,
html:not(#p2):not(#p3):not(#p4) .sec-tag,
html:not(#p2):not(#p3):not(#p4) p.hero-eyebrow,
html:not(#p2):not(#p3):not(#p4) .page-eyebrow,
html:not(#p2):not(#p3):not(#p4) p.eyebrow,
html:not(#p2):not(#p3):not(#p4) .hero-tag,
html:not(#p2):not(#p3):not(#p4) .article-category,
html:not(#p2):not(#p3):not(#p4) .blog-card-cat,
html:not(#p2):not(#p3):not(#p4) .post-category,
html:not(#p2):not(#p3):not(#p4) .client-type,
html:not(#p2):not(#p3):not(#p4) .service-badge,
html:not(#p2):not(#p3):not(#p4) .client-panel-label,
html:not(#p2):not(#p3):not(#p4) .proof-label p,
html:not(#p2):not(#p3):not(#p4) .location-state,
html:not(#p2):not(#p3):not(#p4) .read-more,
html:not(#p2):not(#p3):not(#p4) .footer-back,
html:not(#p2):not(#p3):not(#p4) .stat-label,
html:not(#p2):not(#p3):not(#p4) .stat-label2,
html:not(#p2):not(#p3):not(#p4) .stat-box-label,
html:not(#p2):not(#p3):not(#p4) .stat-callout-label,
html:not(#p2):not(#p3):not(#p4) .article-meta-item,
html:not(#p2):not(#p3):not(#p4) .article-hero-caption,
html:not(#p2):not(#p3):not(#p4) .article-img-caption,
html:not(#p2):not(#p3):not(#p4) .photo-caption,
html:not(#p2):not(#p3):not(#p4) .blog-card-date,
html:not(#p2):not(#p3):not(#p4) .post-date,
html:not(#p2):not(#p3):not(#p4) .breadcrumb,
html:not(#p2):not(#p3):not(#p4) .breadcrumb span,
html:not(#p2):not(#p3):not(#p4) .footer-col-title,
html:not(#p2):not(#p3):not(#p4) .footer-title,
html:not(#p2):not(#p3):not(#p4) .footer-copy,
html:not(#p2):not(#p3):not(#p4) .expect-label,
html:not(#p2):not(#p3):not(#p4) .expect-item,
html:not(#p2):not(#p3):not(#p4) .filter-label,
html:not(#p2):not(#p3):not(#p4) .tag,
html:not(#p2):not(#p3):not(#p4) .hero-meta span,
html:not(#p2):not(#p3):not(#p4) .menu-note,
html:not(#p2):not(#p3):not(#p4) .spec-label,
html:not(#p2):not(#p3):not(#p4) .sidebar-label,
html:not(#p2):not(#p3):not(#p4) .event-card-meta,
html:not(#p2):not(#p3):not(#p4) .event-card-count,
html:not(#p2):not(#p3):not(#p4) .contact-card-label,
html:not(#p2):not(#p3):not(#p4) .story-img-badge-label,
html:not(#p2):not(#p3):not(#p4) .about-badge-label,
html:not(#p2):not(#p3):not(#p4) .service-includes li,
html:not(#p2):not(#p3):not(#p4) .svc-list li,
html:not(#p2):not(#p3):not(#p4) .feat-list li,
html:not(#p2):not(#p3):not(#p4) .feature-list li,
html:not(#p2):not(#p3):not(#p4) .client-list li,
html:not(#p2):not(#p3):not(#p4) .location-link,
html:not(#p2):not(#p3):not(#p4) .sidebar-toc a,
html:not(#p2):not(#p3):not(#p4) .founder-name,
html:not(#p2):not(#p3):not(#p4) .lightbox-count,
html:not(#p2):not(#p3):not(#p4) .coming-text,
html:not(#p2):not(#p3):not(#p4) .coming-soon-text,
html:not(#p2):not(#p3):not(#p4) .t-name,
html:not(#p2):not(#p3):not(#p4) .about-list li,
html:not(#p2):not(#p3):not(#p4) p.step-title,
html:not(#p2):not(#p3):not(#p4) .stat b + span,
html:not(#p2):not(#p3):not(#p4) .footer-bottom > span:not(.footer-slogan),
html:not(#p2):not(#p3):not(#p4) .footer-contact a,
html:not(#p2):not(#p3):not(#p4) .t-stars,
html:not(#p2):not(#p3):not(#p4) .difference-topic,
html:not(#p2):not(#p3):not(#p4) .tour-list li,
html:not(#p2):not(#p3):not(#p4) .trust-strip,
html:not(#p2):not(#p3):not(#p4) .hero-eyebrow,
html:not(#p2):not(#p3):not(#p4) .checklist h4,
html:not(#p2):not(#p3):not(#p4) .milestone-content h4,
html:not(#p2):not(#p3):not(#p4) .stat b + span {
  letter-spacing: 0.08em;
}

html:not(#p2):not(#p3):not(#p4) .article-body .article-img-caption {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--tx-label);
}

html:not(#p2):not(#p3):not(#p4) .stat-label,
html:not(#p2):not(#p3):not(#p4) .stat-label2,
html:not(#p2):not(#p3):not(#p4) .stat-box-label,
html:not(#p2):not(#p3):not(#p4) .stat-callout-label,
html:not(#p2):not(#p3):not(#p4) .article-meta-item,
html:not(#p2):not(#p3):not(#p4) .article-hero-caption,
html:not(#p2):not(#p3):not(#p4) .article-img-caption,
html:not(#p2):not(#p3):not(#p4) .photo-caption,
html:not(#p2):not(#p3):not(#p4) .blog-card-date,
html:not(#p2):not(#p3):not(#p4) .post-date,
html:not(#p2):not(#p3):not(#p4) .breadcrumb,
html:not(#p2):not(#p3):not(#p4) .breadcrumb span,
html:not(#p2):not(#p3):not(#p4) .footer-col-title,
html:not(#p2):not(#p3):not(#p4) .footer-title,
html:not(#p2):not(#p3):not(#p4) .footer-copy,
html:not(#p2):not(#p3):not(#p4) .expect-label,
html:not(#p2):not(#p3):not(#p4) .expect-item,
html:not(#p2):not(#p3):not(#p4) .filter-label,
html:not(#p2):not(#p3):not(#p4) .tag,
html:not(#p2):not(#p3):not(#p4) .hero-meta span,
html:not(#p2):not(#p3):not(#p4) .menu-note,
html:not(#p2):not(#p3):not(#p4) .spec-label,
html:not(#p2):not(#p3):not(#p4) .sidebar-label,
html:not(#p2):not(#p3):not(#p4) .event-card-meta,
html:not(#p2):not(#p3):not(#p4) .event-card-count,
html:not(#p2):not(#p3):not(#p4) .contact-card-label,
html:not(#p2):not(#p3):not(#p4) .contact-card-sub,
html:not(#p2):not(#p3):not(#p4) .story-img-badge-label,
html:not(#p2):not(#p3):not(#p4) .about-badge-label,
html:not(#p2):not(#p3):not(#p4) .service-includes li,
html:not(#p2):not(#p3):not(#p4) .svc-list li,
html:not(#p2):not(#p3):not(#p4) .feat-list li,
html:not(#p2):not(#p3):not(#p4) .feature-list li,
html:not(#p2):not(#p3):not(#p4) .client-list li,
html:not(#p2):not(#p3):not(#p4) .location-link,
html:not(#p2):not(#p3):not(#p4) .sidebar-toc a,
html:not(#p2):not(#p3):not(#p4) .founder-name,
html:not(#p2):not(#p3):not(#p4) .lightbox-count,
html:not(#p2):not(#p3):not(#p4) .coming-text,
html:not(#p2):not(#p3):not(#p4) .coming-soon-text,
html:not(#p2):not(#p3):not(#p4) .t-role,
html:not(#p2):not(#p3):not(#p4) .t-name,
html:not(#p2):not(#p3):not(#p4) .client-event figcaption,
html:not(#p2):not(#p3):not(#p4) .text-client-list li,
html:not(#p2):not(#p3):not(#p4) .about-list li,
html:not(#p2):not(#p3):not(#p4) p.step-title,
html:not(#p2):not(#p3):not(#p4) .stat b + span,
html:not(#p2):not(#p3):not(#p4) .footer-bottom > span:not(.footer-slogan),
html:not(#p2):not(#p3):not(#p4) .footer-contact a,
html:not(#p2):not(#p3):not(#p4) .event-card-arrow,
html:not(#p2):not(#p3):not(#p4) .footer-tagline,
html:not(#p2):not(#p3):not(#p4) .footer-links a {
  color: var(--tx-label);
}

/* Footer slogan: solid accent colour (was 30-75% alpha), 16px, tracking capped */

html:not(#p2):not(#p3):not(#p4) .footer-slogan {
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

html:has(link[rel="canonical"][href$="/faq"]):not(#p2):not(#p3):not(#p4) .footer-slogan {
  color: var(--red);
}

/* Dark panels that sit inside light sections keep light text */

html:not(#p2):not(#p3):not(#p4):not(#p5):not(#p6) :is(.content-section.light, .section.light) .longview-story-copy p {
  color: var(--tx-body);
}

html:not(#p2):not(#p3):not(#p4):not(#p5):not(#p6) :is(.content-section.light, .section.light) .longview-story-copy .section-tag {
  color: var(--cyan);
}

html:not(#p2) .article-body a:not([class]) {
  color: inherit;
}

/* Labels on photos: a soft dark halo behind the text (the photo underneath is measured, not assumed) */

html:not(#p2):not(#p3):not(#p4) :is(.hero, .page-hero, .hero-content, .page-hero-content) :is(.eyebrow, .hero-eyebrow, .page-eyebrow, .hero-tag, .breadcrumb),
html:not(#p2):not(#p3):not(#p4) .event-card-count {
  text-shadow: 0 0 2px #080808, 0 0 4px #080808, 0 0 8px #080808, 0 0 14px #080808, 0 0 24px rgba(8,8,8,.9), 0 0 40px rgba(8,8,8,.8);
}

/* Chips, pills and labels that sit on coloured tiles */

html:not(#p2):not(#p3):not(#p4) .event-card-type,
html:not(#p2):not(#p3):not(#p4) .featured-badge,
html:not(#p2):not(#p3):not(#p4) .white-pill,
html:not(#p2):not(#p3):not(#p4) .connection-kicker,
html:not(#p2):not(#p3):not(#p4) .mersea-brand-tile-label,
html:not(#p2):not(#p3):not(#p4) .mersea-activation-cta-action {
  font-size: 13px;
  letter-spacing: 0.08em;
}

html:not(#p2):not(#p3):not(#p4) .connection-kicker,
html:not(#p2):not(#p3):not(#p4) .mersea-brand-tile-label {
  opacity: 1;
}

html:not(#p2):not(#p3):not(#p4) .connection-kicker,
html:not(#p2):not(#p3):not(#p4) .mersea-brand-tile-label {
  color: #080808;
}

html:not(#p2):not(#p3):not(#p4) .featured-badge,
html:not(#p2):not(#p3):not(#p4) .event-card-type.concert {
  color: #080808;
}

/* Mobile: body paragraphs drop to 17px. Card/list text stays 17px. */
@media (max-width: 600px) {
html:not(#p2) .page-desc,
html:not(#p2) .section-body,
html:not(#p2) .sec-body,
html:not(#p2) .body-text,
html:not(#p2) .bt,
html:not(#p2) .copy,
html:not(#p2) .article-intro,
html:not(#p2) .article-subtitle,
html:not(#p2) .article-body p,
html:not(#p2) .article-body li,
html:not(#p2) .faq-answer p,
html:not(#p2) .faq-answer li,
html:not(#p2) .faq-item p,
html:not(#p2) .cta-sub,
html:not(#p2) .cta-block p,
html:not(#p2) .article-cta p,
html:not(#p2) .cta p,
html:not(#p2) .hero-desc,
html:not(#p2) .hero-copy,
html:not(#p2) .services-body,
html:not(#p2) .locations-body,
html:not(#p2) .newsletter-sub,
html:not(#p2) .subtext,
html:not(#p2) .logistics-copy,
html:not(#p2) .logistics-copy p,
html:not(#p2) .service-area-copy,
html:not(#p2) .service-area-copy p,
html:not(#p2) .longview-story-copy p:not(.section-tag),
html:not(#p2) .story-body p,
html:not(#p2) .story-body,
html:not(#p2) .founder-body p,
html:not(#p2) .mersea-feature-desc,
html:not(#p2) .seo-body p,
html:not(#p2) .seo-body,
html:not(#p2) .size-block p,
html:not(#p2) .section-copy,
html:not(#p2) .section-copy p,
html:not(#p2) .section-copy li,
html:not(#p2) .faq-answer > div,
html:not(#p2) .about-body,
html:not(#p2) .t-text,
html:not(#p2) .difference-proof,
html:not(#p2) .difference-subhead,
html:not(#p2) .clients-subtitle,
html:not(#p2) .section-body.dark-text,
html:not(#p2) .story-copy p,
html:not(#p2) .light .copy,
html:not(#p2) .content-section.light .section-copy,
html:not(#p2) .content-section.light .section-copy p,
html:not(#p2) .content-section.light .section-copy li,
html:not(#p2) .content-section.light .logistics-copy p,
html:not(#p2) .content-section.light .service-area-copy p,
html:not(#p2) .section.light p:not(.section-tag),
html:not(#p2) .content-section.light .logistics-copy,
html:not(#p2) .content-section.light .service-area-copy {
  font-size: 17px;
}
}

/* Elements whose size, leading or tracking is set by an inline style="" attribute.
   Colours on these elements are edited in the HTML itself. */
html [style*="font-size:.65rem"],
html [style*="font-size:.7rem"],
html [style*="font-size:.75rem"] { font-size: 13px !important; }
html [style*="font-size:.88rem"],
html [style*="font-size:.9rem"] { font-size: 17px !important; line-height: 1.65 !important; max-width: var(--tx-measure); }
html [style*="font-size:.95rem"] { font-size: 18px !important; line-height: 1.7 !important; max-width: var(--tx-measure) !important; }
html [style*="letter-spacing:.15em"],
html [style*="letter-spacing:.18em"],
html [style*="letter-spacing:.2em"],
html [style*="letter-spacing:.22em"],
html [style*="letter-spacing:.25em"] { letter-spacing: 0.08em !important; }
@media (max-width: 600px) {
  html [style*="font-size:.95rem"] { font-size: 17px !important; }
}
