/* Lumini design system, applied on top of the Webflow export.
   Source: the "Lumini" Design System (claude.ai/artifact/SVo1FaNGcMyGLiXoh743NM),
   "Site deviations" section. Loaded after the Webflow CSS and before custom.css.
   Colours, fonts and spacing come from css/tokens.css (copied from the design system); change them there, not here. */

/* Type: Roboto only, self-hosted. The @font-face rules are in tokens.css. */

:root {
  /* Remap the Webflow variables the whole stylesheet reads */
  --_typography---font-styles--body: var(--font-sans);
  --_typography---font-styles--heading: var(--font-sans);
  --_primitives---colors--neutral-darkest: var(--ink);   /* was near-black #0d0b02 */
  --_primitives---colors--neutral-darker: var(--navy-dark);          /* was #25231b; navy-dark */
  --_primitives---colors--neutral-dark: var(--ink-muted);/* was warm grey #55544d */
  --_primitives---colors--neutral: var(--ink-muted);     /* was #868580 (failed on white) */
  --_primitives---colors--neutral-light: var(--navy-lighter); /* was #b6b5b3 */
  --_primitives---colors--neutral-lighter: var(--navy-lighter); /* was #dadad9 */
}

/* Hard-coded fonts and greys in the Webflow CSS */
.heading-h3-new { font-family: var(--font-sans); }
.politik-offer-sub,
.closing-cta-sub,
.closing-cta-sub-copy,
.closing-cta-sub-copy-copy { color: var(--ink-muted); }

/* Primary button: navy label on cyan (the site's white label was 2.4:1) */
.button { color: var(--ink); }
.button:hover { color: var(--ink); }
.button.is-secondary:hover,
.button.is-yellow:hover,
.button.is-cta:hover { color: var(--ink); }
.button.is-alternate:hover { color: var(--ink); }
.button.is-secondary.is-alternate:hover { color: var(--white); }

/* Focus: a visible 2px navy ring (the site's grey ring was 2.8:1) */
:focus-visible,
[data-wf-focus-visible] {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.color-scheme-5 :focus-visible,
.color-scheme-5 [data-wf-focus-visible] {
  outline-color: var(--yellow); /* the system's focus on navy grounds */
}

/* Cyan text on light grounds uses cyan-darker (plain cyan was 2.4:1 on white) */
.faq_eyebrow,
.testimonial_eyebrow,
.stats28_number { color: var(--cyan-darker); }

/* Form controls: a 1px outline so fields meet 3:1 boundary contrast */
.form_input,
.form_checkbox-icon,
.form_radio-icon { border-color: var(--control-border); }
.form_input:focus { border-color: var(--ink); }
.form_input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.form_checkbox-icon.w--redirected-checked { border-color: var(--ink); background-color: var(--ink); }
.form_radio-icon.w--redirected-checked { border-color: var(--ink); }

/* Icons: Material Symbols (Rounded, filled) from the design system, drawn inline.
   Feature icons (the system's "feature" variant; its gradient "tile" is retired):
   - feature grids: the bare icon above the heading, 40px, cyan-dark (#0f91bb, 3.6:1),
     no tile, gradient or frame; plain cyan on navy grounds
   - beside a heading in running layouts (the home carousel): 32px, cyan-dark */
.icon-1x1-medium.is-blue {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--cyan-dark);
}
.icon-embed-small.is-blue { flex: none; width: 2rem; height: 2rem; color: var(--cyan-dark); }
.color-scheme-5 :is(.icon-1x1-medium, .icon-embed-small).is-blue { color: var(--cyan); }

/* Quote card eyebrows ("My take on Lumini", "What clients say:") sit on white:
   use cyan-darker, not the site's cyan-dark (3.6:1). */
.test-div .text-color-blue { color: var(--cyan-darker); }

/* Section spacing (design system "SectionLayout"): every section pads its own
   top and bottom with space-section: 96px desktop, 64px at 991px and below,
   48px at 767px and below. The hero (first section) has 80px / 72px / 48px above.
   Webflow split this across .padding-global (80px top, nothing below) and an
   inner .padding-section-* (0 top, 32-96px below) plus one-off classes
   (section-top-6rem, smaller-top, no-top, is-section-padding). The padding now
   sits on each section's outer .padding-global, and the inner wrappers are zeroed.
   !important is needed to beat Webflow's multi-class one-offs. */
:root {
  --ds-section: 6rem;
  --ds-hero-top: 5rem;
}
@media screen and (max-width: 991px) {
  :root { --ds-section: 4rem; --ds-hero-top: 4.5rem; }
}
@media screen and (max-width: 767px) {
  :root { --ds-section: 3rem; --ds-hero-top: 3rem; }
}
main > * > .padding-global {
  padding-top: var(--ds-section) !important;
  padding-bottom: var(--ds-section) !important;
}
main > * > .padding-global > [class*="padding-section"],
main > * > .padding-global > .container-large > [class*="padding-section"],
main > * > .padding-global > .container-large > .padding-bottom,
main > * > .padding-global > .container-large > .padding-top {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
main > section.closing-cta {
  padding-top: var(--ds-section) !important;
  padding-bottom: var(--ds-section) !important;
}
/* Extra spacing inside some sections that stacked on top of the section padding */
.blog-post3-content_content { margin-top: 0; margin-bottom: 0; }   /* blog post body: 96px margins */
.section-hero-2 .container-large { margin-top: 0; }                /* landing-page heroes: 40px */
.content30_component { margin-top: 0; }                            /* legal pages: 48px */
.content30_content > .promise-panel:first-child { margin-top: 0; } /* legal pages: 32px */
/* The hero: its own top spacing, space-section below. */
main > :first-child > .padding-global {
  padding-top: var(--ds-hero-top) !important;
}
/* Two touching sections on the same background: the second drops its top padding. */
main > .ds-flush-top > .padding-global,
main > section.closing-cta.ds-flush-top {
  padding-top: 0 !important;
}

/* Section heading block to content: space-large, 48px / 40px / 32px
   (Webflow's heading wrapper, .margin-bottom.margin-xxlarge, was 32px at every size). */
:root { --ds-heading-gap: 3rem; }
@media screen and (max-width: 991px) { :root { --ds-heading-gap: 2.5rem; } }
@media screen and (max-width: 767px) { :root { --ds-heading-gap: 2rem; } }
main .margin-bottom.margin-xxlarge:has(h2) { margin-bottom: var(--ds-heading-gap); }

/* Navigation (design system SiteHeader): ink links, a fill-subtle hover and a cyan
   underline on the current page. Replaces #000 text, the grey #edeef1 hover and the
   orange (#ff4800) open state, which is outside the palette. */
.nav-toggle { color: var(--ink); }
.nav-toggle:hover { color: var(--ink); background-color: var(--fill-subtle); }
.nav-toggle.w--open { color: var(--ink); }
/* Keyed off aria-current: webflow.js strips w--current when the URL has no .html. */
.nav-toggle[aria-current="page"] > div {
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Legal pages (Privacy, Terms of Use, Website Terms): the summary panel belongs with
   the page title, so the body section after the title band starts with the compact
   space-section-small (48px; 32px at 767px and below), and its first panel has no
   extra top margin (Terms pages added 32px). */
:root { --ds-section-small: 3rem; }
@media screen and (max-width: 767px) { :root { --ds-section-small: 2rem; } }
main > .section_header64 + .section_content30 > .padding-global {
  padding-top: var(--ds-section-small) !important;
}
.section_content30 .container-large > :is(.promise-panel, .brief-card):first-child,
.section_content30 .container-large > .padding-section-large > :is(.promise-panel, .brief-card):first-child {
  margin-top: 0;
}

/* Legal pages, bottom: the company details panel sits one group gap (space-large:
   48px / 40px / 32px) below the last clause, and the last panel adds no margin of its
   own, so the gap to the footer is the section's 96px / 64px / 48px. */
.section_content30 .container-large > .brief-card:last-child {
  margin-top: var(--ds-heading-gap);
  margin-bottom: 0;
}
.content30_content:last-child,
.content30_content > .contact-card-1:last-child {
  margin-bottom: 0;
}
.content30_content > .contact-card-1:last-child {
  margin-top: var(--ds-heading-gap);
}

/* Section taglines ("Reach out" and the Select Committees eyebrows) sit on white or
   pale cyan: cyan-darker, not plain cyan (2.4:1). The yellow .is-landing variant on the
   blue landing-page heroes stays as it is. */
.text-style-tagline:not(.is-landing) { color: var(--cyan-darker); }

/* Article (the system's .lm-prose): long-form reading copy. Blog post bodies carry
   .lm-prose on their rich-text block. Rules as in the system's Article component,
   plus resets for Webflow's element defaults (li padding, blockquote padding). */
.lm-prose { max-width: var(--measure); margin-left: auto; margin-right: auto; color: var(--ink); font-size: 1rem; line-height: 1.75; }
.lm-prose > * { margin: 0; }
.lm-prose > * + * { margin-top: 1.25rem; }
.lm-prose h2 { margin-top: var(--space-large); margin-bottom: var(--space-xsmall); font-family: var(--font-sans); font-size: 2rem; line-height: 1.25; font-weight: 700; letter-spacing: -.02rem; }
.lm-prose h3 { margin-top: var(--space-medium); margin-bottom: .75rem; font-family: var(--font-sans); font-size: 1.5rem; line-height: 1.3; font-weight: 700; letter-spacing: -.015rem; }
.lm-prose h4 { margin-top: var(--space-small); margin-bottom: var(--space-xxsmall); font-family: var(--font-sans); font-size: 1.125rem; line-height: 1.4; font-weight: 700; }
.lm-prose > :first-child { margin-top: 0; }
.lm-prose h2 + *, .lm-prose h3 + *, .lm-prose h4 + * { margin-top: 0; }
.lm-prose ul, .lm-prose ol { padding-left: 1.5rem; }
.lm-prose li { margin: 0; padding-left: 0; }
.lm-prose li + li { margin-top: var(--space-xxsmall); }
.lm-prose li::marker { color: var(--ink-muted); }
.lm-prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.lm-prose a:hover { text-decoration-thickness: 2px; }
.lm-prose a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lm-prose strong { font-weight: 700; }
.lm-prose blockquote { margin-left: 0; margin-right: 0; padding: 0 0 0 1.25rem; border-left: 3px solid var(--accent); font-size: 1.25rem; line-height: 1.5; font-weight: 500; }
.lm-prose blockquote cite, .lm-prose figcaption { display: block; margin-top: var(--space-xxsmall); font-size: .875rem; line-height: 1.5; font-style: normal; font-weight: 400; color: var(--ink-muted); }
.lm-prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-card); }
.lm-prose figure { margin-left: 0; margin-right: 0; }
.lm-prose hr { height: 1px; border: 0; background: var(--line); margin-top: var(--space-large); margin-bottom: var(--space-large); }
@media screen and (max-width: 767px) {
  .lm-prose h2 { font-size: 1.5rem; }
  .lm-prose h3 { font-size: 1.25rem; }
}