/* Lumini design system tokens, copied from the design system's tokens.css
   (https://claude.ai/artifact/SVo1FaNGcMyGLiXoh743NM, project/tokens.css).
   Only the custom properties and @font-face rules are copied; its type classes
   (.h1, .body, .small ...) are left out because they clash with Webflow class names.
   To update: copy the new values in from the design system. Don't edit by hand. */

:root, [data-theme="light"] {
  --cyan: #13b6ea; /* Brand sheet CYAN (RGB 19.182.234, CMYK 70.7.0.0); Site variable `--_primitives---colors--bright-turquoise`. The mark, the primary button fill, highlights. Never text on white (2.4:1); as text only on navy (7.0:1). */
  --cyan-light: #59cbf0; /* Primary button hover fill (navy label 8.9:1). Site variable `bright-turquoise-light`. */
  --cyan-lighter: #cff0fa; /* Primary button hover glow; pale cyan fills. Site variable `bright-turquoise-lighter`. */
  --cyan-dark: #0f91bb; /* Pressed/hover cyan on dark buttons. Fails as text on white (3.6:1): fills and icons only. Site variable `bright-turquoise-dark`. */
  --cyan-darker: #07485d; /* Deep cyan for text or icons on white (10.0:1) and on tint-cyan (9.1:1). Site variable `bright-turquoise-darker`. */
  --cyan-darkest: #053646; /* Site variable `bright-turquoise-darkest`. Deepest cyan, for dark grounds. */
  --navy: #1a1a40; /* Brand sheet NAVY (RGB 26.26.64, CMYK 96.93.42.50); Site variable `port-gore`. Lumini's text colour: on white 16.6:1, tint-cyan 15.1:1, cyan 7.0:1, yellow 12.8:1. */
  --navy-light: #5e5e79; /* Secondary text on white (6.3:1) and tint-cyan (5.7:1). Site variable `port-gore-light`. */
  --navy-lighter: #d1d1d8; /* Secondary text on navy (10.9:1); hairlines on white. Site variable `port-gore-lighter`. */
  --navy-lightest: #e8e8eb; /* Pale grey-navy panels (navy text 13.6:1). Site variable `port-gore-lightest`. */
  --navy-dark: #141433; /* Dark section ground (colour scheme 5); white text 17.8:1. Site variable `port-gore-dark`. */
  --navy-darker: #0a0a19; /* Site variable `port-gore-darker`. */
  --navy-darkest: #070713; /* Site variable `port-gore-darkest`. */
  --yellow: #fee32b; /* Brand sheet YELLOW (RGB 254.227.43, CMYK 0.5.93.0); Site variable `sunglow`. The CTA fill and brand bands; navy text 12.8:1. Never text on white. */
  --yellow-light: #feeb6a; /* Yellow button hover fill. Site variable `sunglow-light`. */
  --yellow-lighter: #fef9d4; /* Site variable `sunglow-lighter`. Pale yellow highlight panels. */
  --yellow-lightest: #fefce9; /* Site variable `sunglow-lightest`. */
  --yellow-dark: #cbb522; /* Site variable `sunglow-dark`. Fills only. */
  --yellow-darker: #655a11; /* Site variable `sunglow-darker`. */
  --yellow-darkest: #4c440c; /* Site variable `sunglow-darkest`. */
  --tint-cyan: #e7f7fc; /* The pale cyan section ground used across the site (colour scheme 4; set via the misnamed `--_primitives---neutral-darkest`). */
  --tint-hover: #f4fbff; /* Hover ground for cards and list items. Site variable `--hover-blue`. */
  --white: #ffffff; /* Brand sheet white; the page ground and the reversed logo colour. */
  --black: #000000; /* The brand sheet's own print text colour. Print only; on screen use ink. */
  --success: #027a48; /* Success text: on success-soft 5.1:1 (light) / 7.3:1 (dark), on surface 5.4:1 / 8.7:1. From `.form_message-success`; dark value is Untitled UI success-400 (the site has no dark mode). Always pair with a word or icon. */
  --success-soft: #ecfdf3; /* Success message background, from `.form_message-success`; dark value Untitled UI success-950. */
  --error: #b42318; /* Error text: on error-soft 6.1:1 (light) / 5.0:1 (dark), on surface 6.6:1 / 6.0:1. From `.form_message-error`; dark value is Untitled UI error-400 (the site has no dark mode). Always pair with a word or icon. */
  --error-soft: #fef3f2; /* Error message background, from `.form_message-error`; dark value Untitled UI error-950. */
  --chart-1: #0f91bb; /* Chart series 1 (cyan). Categorical slots are used in order, never skipped or cycled; the order is what keeps neighbours apart for colour-blind readers (worst adjacent ΔE 9.1 light, 8.4 dark; validated on white and navy). Brand cyan at `cyan-dark`, so it clears 3:1 as a mark on white (3.6:1) and on navy (4.6:1). The default colour for any single-series chart. */
  --chart-2: #eb6834; /* Chart series 2 (orange). Categorical slots are used in order, never skipped or cycled; the order is what keeps neighbours apart for colour-blind readers (worst adjacent ΔE 9.1 light, 8.4 dark; validated on white and navy). */
  --chart-3: #1baf7a; /* Chart series 3 (aqua). Categorical slots are used in order, never skipped or cycled; the order is what keeps neighbours apart for colour-blind readers (worst adjacent ΔE 9.1 light, 8.4 dark; validated on white and navy). Below 3:1 on white (2.8:1): label the marks or offer the table view. */
  --chart-4: #eda100; /* Chart series 4 (amber). Categorical slots are used in order, never skipped or cycled; the order is what keeps neighbours apart for colour-blind readers (worst adjacent ΔE 9.1 light, 8.4 dark; validated on white and navy). Below 3:1 on white (2.2:1): label the marks or offer the table view. */
  --chart-5: #e87ba4; /* Chart series 5 (magenta). Categorical slots are used in order, never skipped or cycled; the order is what keeps neighbours apart for colour-blind readers (worst adjacent ΔE 9.1 light, 8.4 dark; validated on white and navy). Below 3:1 on white (2.7:1): label the marks or offer the table view. */
  --chart-6: #008300; /* Chart series 6 (green). Categorical slots are used in order, never skipped or cycled; the order is what keeps neighbours apart for colour-blind readers (worst adjacent ΔE 9.1 light, 8.4 dark; validated on white and navy). */
  --chart-7: #4a3aa7; /* Chart series 7 (violet). Categorical slots are used in order, never skipped or cycled; the order is what keeps neighbours apart for colour-blind readers (worst adjacent ΔE 9.1 light, 8.4 dark; validated on white and navy). */
  --chart-8: #e34948; /* Chart series 8 (red). Categorical slots are used in order, never skipped or cycled; the order is what keeps neighbours apart for colour-blind readers (worst adjacent ΔE 9.1 light, 8.4 dark; validated on white and navy). */
  --chart-other: var(--navy-light); /* The "Other" bucket and de-emphasised series (everything except the one the story is about). Never a ninth hue: series past eight, or past two in scatter plots and maps, fold into Other. */
  --chart-seq-1: var(--cyan); /* Ordinal and sequential ramp, step 1 (least). One hue, light to dark on white; on navy the ramp flips so more is lighter. Validated: monotone lightness, steps ≥0.06 apart, first step ≥2:1 on its ground. */
  --chart-seq-2: var(--cyan-dark); /* Ordinal and sequential ramp, step 2. */
  --chart-seq-3: #0b6b8b; /* Ordinal and sequential ramp, step 3. #0b6b8b is the OKLab midpoint of cyan-dark and cyan-darker. */
  --chart-seq-4: var(--cyan-darker); /* Ordinal and sequential ramp, step 4 (most). */
  --chart-div-pos-2: var(--cyan-dark); /* Diverging scale, strong positive (for example, support in submissions). Cyan for the positive arm, orange for the negative, grey in the middle; equal steps per arm. */
  --chart-div-pos-1: var(--cyan-light); /* Diverging scale, mild positive. */
  --chart-div-mid: var(--navy-lightest); /* Diverging midpoint: neutral, no position, no change. Always grey, never a hue. */
  --chart-div-neg-1: #f8a283; /* Diverging scale, mild negative. #f8a283 is chart-2 orange lightened in OKLab to the lightness of cyan-light. */
  --chart-div-neg-2: #eb6834; /* Diverging scale, strong negative (for example, opposition in submissions). */
  --warning: #b54708; /* Warning text and status marks: 5.4:1 on white, 9.0:1 on navy. Untitled UI warning-700 / warning-400, matching success and error. Status colours keep their meaning (good, warning, critical = success, warning, error) and always come with an icon and a word. */
  --warning-soft: #fffaeb; /* Warning message background; Untitled UI warning-25 / warning-950. */
  --chart-grid: var(--navy-lightest); /* Gridlines, table rules and empty tracks: 1px, solid, never dashed. */
  --chart-axis: var(--navy-lighter); /* Baselines, axis lines and unreached markers. Axis labels use ink-muted, never this. */
  --party-national: #065bb4; /* National. Blue, from National's website. 6.6:1 on white. Party colours are for charts about parties only (seats, votes, polls, coalitions), on white or pale grounds only, always with the party named on or beside the mark. Other parties and independents use chart-other. */
  --party-labour: #e2261e; /* Labour. Red, from Labour's website. 4.6:1 on white. Party colours are for charts about parties only (seats, votes, polls, coalitions), on white or pale grounds only, always with the party named on or beside the mark. Other parties and independents use chart-other. */
  --party-green: #098137; /* Green. Green, the widely used convention. 5.0:1 on white. Told apart from Labour red by colour-blind readers (ΔE 9.1), but always label it. Party colours are for charts about parties only (seats, votes, polls, coalitions), on white or pale grounds only, always with the party named on or beside the mark. Other parties and independents use chart-other. */
  --party-act: #fde401; /* ACT. Yellow, ACT's long-standing colour (its current branding leans pink, #ed0082). 1.3:1 on white: always label ACT's marks. Party colours are for charts about parties only (seats, votes, polls, coalitions), on white or pale grounds only, always with the party named on or beside the mark. Other parties and independents use chart-other. */
  --party-nzfirst: #000000; /* NZ First. Black, as Wikipedia lists it (some read it as navy). Party colours are for charts about parties only (seats, votes, polls, coalitions), on white or pale grounds only, always with the party named on or beside the mark. Other parties and independents use chart-other. */
  --party-tpm: #8a1538; /* Te Pāti Māori. Deep red from the party's black, red and white, chosen to stay clearly apart from Labour red (ΔE 19.5). 9.4:1 on white. Party colours are for charts about parties only (seats, votes, polls, coalitions), on white or pale grounds only, always with the party named on or beside the mark. Other parties and independents use chart-other. */
  --party-top: #32dac3; /* The Opportunity Party. Teal, the widely used convention. 1.8:1 on white: always label its marks. Party colours are for charts about parties only (seats, votes, polls, coalitions), on white or pale grounds only, always with the party named on or beside the mark. Other parties and independents use chart-other. */
  --fill-subtle: #0d0b020d; /* Quiet fill for inputs, checkboxes, tags and the secondary button. Site `neutral-darkest-5` (light) / `white-10` (dark). Decorative: it does not give a control a 3:1 boundary on its own. */
  --fill-subtle-hover: #0d0b0226; /* Hover state of fill-subtle. Site `neutral-darkest-15` / `white-20`. */
  --control-border: var(--navy-light); /* 1px resting outline on inputs, selects, checkboxes and radios: 6.3:1 on white, 5.7:1 on tint-cyan (light); 3.8:1 on navy (dark, site white-40). Meets the 3:1 boundary contrast for controls; focus switches it to ink. Added by the system: the site's fields have no border. */
  --panel-blue: #e6f1fa; /* Info panel background (`.promise-panel`, `.contact-card-1`); navy text 14.5:1. */
  --panel-blue-line: #cdddf0; /* Info panel border (`.promise-panel`). */
  --panel-grey: #f6f8fb; /* Summary card background (`.brief-card`); navy text 15.6:1. */
  --panel-grey-line: #e2e8f0; /* Summary card border (`.brief-card`). */
  --surface: var(--white); /* Page background: white; navy in dark. */
  --surface-alt: var(--tint-cyan); /* Alternating section ground: pale cyan, as the site alternates white and #e7f7fc; navy-dark in dark. */
  --surface-hover: var(--tint-hover); /* Hover ground for interactive cards and rows. */
  --line: #0d0b0226; /* Dividers and card borders at the site's 1px divider width (decorative). Site `--color-scheme-2--border` (neutral-darkest 15%) / `--color-scheme-1--border` (white 20%). */
  --ink: var(--navy); /* All text on surface and surface-alt: light 16.6:1 / 15.1:1; dark 16.6:1 / 17.8:1. Replaces the site's near-black #0d0b02. */
  --ink-muted: var(--navy-light); /* Secondary text and metadata on surface and surface-alt: light 6.3:1 / 5.7:1; dark 10.9:1 / 11.7:1. */
  --accent: var(--cyan); /* Brand highlight fills, rules and the mark in both themes. As text only on navy grounds (7.0:1 on navy, 7.6:1 on navy-dark). */
  --primary: var(--cyan); /* Primary button fill: the cyan pill (`.button`). */
  --primary-hover: var(--cyan-light); /* Primary button hover fill (`.button:hover`), with a cyan-lighter glow. */
  --on-primary: var(--navy); /* Primary button label: navy on cyan 7.0:1, on cyan-light 8.9:1. The site's white label (2.4:1) is the deviation to fix. */
  --cta: var(--yellow); /* Highlight call-to-action fill (`.button.is-cta`, `.is-yellow`), one per view. Label in on-cta. */
  --cta-hover: var(--yellow-light); /* CTA hover fill (`.button.is-yellow:hover`). */
  --on-cta: var(--navy); /* Text and icons on a cta fill (12.8:1; 13.7:1 on hover). */
  --link: var(--navy); /* Link text, always underlined (as the site's `a` and `.text-style-link`). */
  --focus: var(--navy); /* 2px solid focus ring (16.6:1 light, 12.8:1 dark). The site's grey focus ring (#9b9b9b, 2.8:1) fails and is replaced. */
  --shadow-xxsmall: 0 1px 2px #0000000d; /* `.shadow-xxsmall`. */
  --shadow-xsmall: 0 1px 3px #0000001a, 0 1px 2px #0000000f; /* `.shadow-xsmall`. */
  --shadow-small: 0 4px 8px -2px #0000001a, 0 2px 4px -2px #0000000f; /* `.shadow-small`: resting cards. */
  --shadow-medium: 0 12px 16px -4px #00000014, 0 4px 6px -2px #00000008; /* `.shadow-medium`. */
  --shadow-large: 0 20px 24px -4px #00000014, 0 8px 8px -4px #00000008; /* `.shadow-large`: dropdowns. */
  --shadow-xlarge: 0 24px 48px -12px #0000002e; /* `.shadow-xlarge`: modals. */
  --shadow-glow: 0 2px 20px 2px #cff0fa; /* Primary button hover glow (`.button:hover`). */
  --shadow-panel: 10px 0 20px -6px #1a1a401f; /* Info panels (`.promise-panel`, `.contact-card-1`). */
}
[data-theme="dark"] {
  --success: #32d583;
  --success-soft: #053321;
  --error: #f97066;
  --error-soft: #55160c;
  --chart-1: #0f91bb;
  --chart-2: #d95926;
  --chart-3: #199e70;
  --chart-4: #c98500;
  --chart-5: #d55181;
  --chart-6: #008300;
  --chart-7: #9085e9;
  --chart-8: #e66767;
  --chart-other: #8a8aa3;
  --chart-seq-1: var(--cyan-dark);
  --chart-seq-2: var(--cyan);
  --chart-seq-3: var(--cyan-light);
  --chart-seq-4: var(--cyan-lighter);
  --chart-div-pos-2: var(--cyan-light);
  --chart-div-pos-1: var(--cyan-dark);
  --chart-div-mid: var(--navy-light);
  --chart-div-neg-1: #d95926;
  --chart-div-neg-2: #f8a283;
  --warning: #fdb022;
  --warning-soft: #4e1d09;
  --chart-grid: #ffffff1f;
  --chart-axis: #ffffff4d;
  --fill-subtle: #ffffff1a;
  --fill-subtle-hover: #ffffff33;
  --control-border: #ffffff66;
  --panel-blue: var(--navy-dark);
  --panel-blue-line: #ffffff33;
  --panel-grey: var(--navy-dark);
  --panel-grey-line: #ffffff33;
  --surface: var(--navy);
  --surface-alt: var(--navy-dark);
  --surface-hover: var(--navy-dark);
  --line: #ffffff33;
  --ink: var(--white);
  --ink-muted: var(--navy-lighter);
  --accent: var(--cyan);
  --primary: var(--cyan);
  --primary-hover: var(--cyan-light);
  --on-primary: var(--navy);
  --cta: var(--yellow);
  --cta-hover: var(--yellow-light);
  --on-cta: var(--navy);
  --link: var(--cyan);
  --focus: var(--yellow);
}
:root {
  --space-tiny: 0.25rem; /* 4px. `.margin-tiny` / `.padding-tiny`; icon gaps. */
  --space-xxsmall: 0.5rem; /* 8px. `-xxsmall`; button gaps, tight stacks. */
  --space-xsmall: 1rem; /* 16px (12px ≤767). `-xsmall`; default gap, grid gap. */
  --space-small: 1.5rem; /* 24px (20px ≤767). `-small`; button side padding, card padding. */
  --space-medium: 2rem; /* 32px (24px ≤767). `-medium`; panel padding, gaps between groups. */
  --space-large: 3rem; /* 48px (40px ≤991, 32px ≤767). `-large`. */
  --space-xlarge: 4rem; /* 64px (56px ≤991, 40px ≤767). `-xlarge`. */
  --space-xxlarge: 5rem; /* 80px (72px ≤991, 48px ≤767). `-xxlarge`; top padding of `.padding-global`. */
  --space-huge: 6rem; /* 96px (80px ≤991, 56px ≤767). `-huge`; section spacing. */
  --space-xhuge: 7rem; /* 112px (96px ≤991, 64px ≤767). `-xhuge`. */
  --space-xxhuge: 10rem; /* 160px (120px ≤991, 80px ≤767). `-xxhuge`. */
  --space-gutter: 5%; /* Page side padding (`.padding-global`). */
  --space-section: 6rem; /* Section top and bottom padding: 96px desktop, 64px ≤991, 48px ≤767. Drop the top when the section above shares its background. */
  --space-section-small: 3rem; /* Compact sections (`.padding-section-small`): 48px top and bottom; 32px ≤767. */
  --radius-none: 0; /* Section bands, images, colour blocks: the site's `--_ui-styles---radius--small` and `--radius--large` are both 0. */
  --radius-tag: 6px; /* Tags (`.tag`). */
  --radius-small: 0.5rem; /* 8px. Testimonial cards, FAQ question rows, mobile buttons (site `.5rem`). */
  --radius-input: 12px; /* Form inputs (`.form_input`) and info panels (`.promise-panel`, `.brief-card`). */
  --radius-card: 1rem; /* Cards and feature tiles: `--_ui-styles---radius--medium` (16px). */
  --radius-pill: 50rem; /* Buttons (`.button`): a full pill. */
  --container-large: 80rem; /* 1280px. Main page container (`.container-large`). */
  --container-medium: 64rem; /* 1024px (`.container-medium`). */
  --container-small: 48rem; /* 768px (`.container-small`, `.max-width-large`). */
  --measure: 42rem; /* 672px. Reading column for long text (`.privacy-body`). */
  --max-width-medium: 35rem; /* 560px. Intro text blocks (`.max-width-medium`). */
  --max-width-small: 30rem; /* 480px. Forms and short copy (`.max-width-small`). */
  --breakpoint-tablet: 991px; /* Tablet breakpoint (max-width). */
  --breakpoint-mobile-landscape: 767px; /* Mobile landscape breakpoint (max-width). */
  --breakpoint-mobile: 479px; /* Mobile portrait breakpoint (max-width). */
  --font-sans: Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-hero: 700 5rem/1 var(--font-sans); /* Hero headline (`.heading-style-hero`). 80px; 64px at ≤479px. */
  --text-h1: 700 3.5rem/1.2 var(--font-sans); /* Page title (`h1`, `.heading-style-h1`). 56px; 52px ≤991; 40px ≤767. */
  --text-h2: 700 3rem/1.2 var(--font-sans); /* Section heading (`.heading-style-h2`). 48px; 44px ≤991; 36px ≤767. The bare `h2` tag is 400. */
  --text-h3: 400 2.5rem/1.2 var(--font-sans); /* Large sub-heading (`h3`, `.heading-style-h3`), Regular. 40px; 36px ≤991; 32px ≤767. */
  --text-h4: 700 2rem/1.3 var(--font-sans); /* Card and block heading (`h4`). 32px; 28px ≤991; 24px ≤767 (line height 1.4). The site's `.heading-style-h4` asks for 600, which Roboto renders as 700. */
  --text-h5: 700 1.5rem/1.4 var(--font-sans); /* Small heading (`.heading-style-h5`). 24px; 20px ≤767. */
  --text-h6: 500 1.25rem/1.4 var(--font-sans); /* Smallest heading and section label (`h6`), Medium as the brand sheet's labels. 20px; 18px ≤767. The site's 600 maps to Medium. */
  --text-text-large: 400 1.25rem/1.5 var(--font-sans); /* Intro paragraphs, quotes, `blockquote` (`.text-size-large`, `.text-style-quote`). 20px; 18px ≤767. */
  --text-text-medium: 500 1.3rem/1.5 var(--font-sans); /* Emphasised lead lines (`.text-size-medium`), Medium. 20.8px; 16px ≤767. */
  --text-body: 400 1rem/1.5 var(--font-sans); /* Running copy (`body`, `.text-size-regular`). 16px; 14px ≤479. */
  --text-body-long: 400 1rem/1.75 var(--font-sans); /* Long-form reading copy in a 42rem column (`.privacy-body`). */
  --text-small: 400 0.875rem/1.5 var(--font-sans); /* Captions, metadata, tags (`.text-size-small`, `.tag` at 500). 14px; 12px ≤479. */
  --text-tiny: 400 0.75rem/1.5 var(--font-sans); /* Fine print (`.text-size-tiny`). 12px; 10px ≤479. */
  --text-label: 500 1rem/1.5 var(--font-sans); /* Form labels (`label`), Medium. */
  --text-eyebrow: 500 0.725rem/1.5 var(--font-sans); /* Uppercase eyebrows and data labels (`.is-caps`). Write the text in capitals. */
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}