/* ==========================================================================
   Design tokens, ported from the V2 design system.

   Source: the V2 design project's mw-pricing.css and campaign-types.css,
   whose header reads "Brand tokens from Brand & Identity Guidelines". Where
   this file and the old Showit-derived tokens disagree, the V2 design wins:
   the point of the refactor is that the site looks like that design.

   What changed from the Showit extraction, and why it matters when reading
   the rest of the CSS:

     - Typeface is Proxima Nova, the brand face, self-hosted from the four
       .woff files carried over from the Showit site. No third-party request
       on any page and no dependency on fonts.gstatic.com still resolving.
       The V2 design files were drawn in Figtree as a stand-in; brand wins.
       The Figtree .woff2 files are now unreferenced.

     - The type scale is clamp()-based rather than two fixed px sets either
       side of Showit's 768px breakpoint. Sizes are also smaller: the V2
       design tops its h1 out at 64px where Showit drew it at 78px. That is
       the design's call, not a transcription slip.

     - The neutral ramp is cool, not grey. --bg-soft, --line and --line-soft
       are blue-tinted, which is what makes the V2 cards read as crisp rather
       than washed out. Do not substitute plain greys.

   One naming note, because it is a genuine trap. The V2 CSS uses --ink for
   HEADLINE navy and --body for graphite body copy. This codebase already used
   --ink for body copy in ~1300 lines of component CSS, and headings already
   resolve their colour through var(--navy) (which is the same value the design
   calls --ink). So --ink keeps its local meaning of "body copy" here and is now
   graphite. --body is provided as an alias for anyone reading across from the
   design files. Headings continue to use --navy and land on the design's value.
   ========================================================================== */

/* Proxima Nova, four static faces. There is no variable cut in the licensed
   set, so each weight is its own file and only the weights a page actually
   uses get downloaded.

   The heaviest cut ships is Extrabold (800). The type scale asks for 900 on
   h1/h2, so that face is declared over the range 800-900: the browser then
   uses the real Extrabold outlines for both instead of synthesising a faux
   bold on top of 800. Do not add a 900 rule expecting a heavier face; there
   isn't one. */
@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/proximanova-reg-webfont.woff') format('woff');
}
@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/proximanova-medium.woff') format('woff');
}
@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/proximanova-bold-webfont.woff') format('woff');
}
@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url('../fonts/proximanova-xbold_copy-webfont.woff') format('woff');
}

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --navy: #0b3b60;          /* headlines, primary dark */
  --deep-navy: #00233f;     /* the darkest band, used for heroes and closers */
  --pink: #e81f76;          /* primary CTA and accent */
  --arctic: #9ddae7;        /* light blue accent, on dark only */
  --turquoise: #44bda9;     /* success ticks, secondary accent */
  --graphite: #000000;      /* body copy: black, per Owen's directive that grey
                               text does not stand out enough on white (was
                               #57585a). Flows to --ink and --body below. */
  --white: #fff;

  /* ---- Non-brand utility colours ---------------------------------------- */
  /* Deliberately outside the brand palette, tokenised so no raw hex lives in
     the CSS or the inline SVGs. Never use these on brand content:
       --trustpilot-green  the TrustPilot mark's own green, badge only
       --amber-signal      decorative lamp/taillight on the truck + segue van
       --segue-*           shades used only inside the page-segue SVG scene */
  --trustpilot-green: #00b67a;
  --amber-signal: #ffd24a;
  --segue-tyre: #26333f;
  --segue-env-front: #dbe6f1;
  --segue-env-flap: #eef3f9;

  /* ---- Semantic --------------------------------------------------------- */
  /* Body copy. Named --ink for continuity with this codebase's components;
     the V2 design calls this --body, aliased just below. See the header note.
     Now points at black via --graphite, per Owen's directive: grey body copy
     did not stand out enough on white, so all readable text is black for maximum
     contrast. This deliberately overrides the earlier Brand & Identity choice of
     Graphite #57585A (which avoided pure black to keep it from clashing with
     navy). --graphite holds the same value and stays the name used for small
     labels and captions. Contrast: #000 is 21:1 on --white, well clear of AA. */
  --ink: var(--graphite);
  --body: var(--graphite);
  --bg: var(--white);
  --bg-soft: #f3f6fa;       /* the alternating light band */
  --line: #e2e9f1;          /* card and table borders */
  --line-soft: #edf1f6;     /* internal dividers, lighter than --line */

  /* Arctic (#9DDAE7) and turquoise (#44BDA9) are both far too light to be read
     as type on a light band: 1.6:1 and 2.3:1. Each therefore has two values.

       --arctic / --turquoise         the brand fills, for shapes and rules
       --arctic-text / --teal-text    lighter-but-legible cuts, for type and for
                                      the masked icon glyphs

     Owen asked for these two cuts to come back up toward the brand colours: the
     previous values (#287E6F teal, #1B7A94 arctic) read as dark green and dark
     blue rather than as the brand's teal and baby blue. These are each the
     LIGHTEST value on the line to the brand colour that still clears 3:1 on both
     white and --bg-soft, which is the floor for the 18-43px bold headings and
     the 44-70px pictograms they are used on:

       --teal-text    #369E8D   3.26:1 on white, 3.01:1 on --bg-soft (was 4.88:1)
       --arctic-text  #4599AF   3.27:1 on white, 3.01:1 on --bg-soft (was 4.93:1)

     Going the rest of the way to the brand values would put both under 2.4:1 and
     arctic under 1.6:1, at which point the headings are not there. So: FILLS use
     the true brand colour, type and glyphs use these. Do not swap them round.
     Where a fill is one of the light brand colours, the copy on it goes
     --deep-navy, not white; see --accent-on in components.css. */
  --arctic-text: #4599af;
  --arctic-deco: #3fa3c2;
  --teal-text: #369e8d;

  /* The brand pink has the same problem in a milder form: #E81F76 is 4.3:1 on
     white and 3.96:1 on --bg-soft, just under the 4.5:1 that small text needs.
     This is it darkened by 8%, which clears 4.58:1 on --bg-soft and is very hard
     to tell apart at eyebrow and caption sizes.

     Used for SMALL pink text only: eyebrows, captions, attributions, links, card
     headings, inline errors. Display headlines keep the true brand --pink, since
     at 30px and up they only need 3:1 and already clear it. Every pink FILL also
     keeps the true brand --pink. Revert by pointing this at var(--pink). */
  --pink-text: #d51d6d;
  /* Input placeholders and disabled/invalid states. #93a2b3 is 2.61:1 on white,
     below AA: fine for placeholders and disabled states (both exempt from
     1.4.3), but NOT for real text. Kept grey (reverted from an all-black pass)
     at Owen's request so empty-field hints stay distinct from typed input. */
  --muted: #93a2b3;
  /* Muted read-text (field hints, captions that would otherwise use --muted) is
     now black too, per Owen's directive that grey text does not stand out enough
     on white (was the blue-grey #69758a, 4.65:1). Placeholders and disabled
     states keep --muted below; those are UI affordances, not readable copy, and
     black would make an empty field look filled. */
  --muted-text: #000000;
  --border-dark: #c9d3de;

  /* ---- Type ------------------------------------------------------------- */
  --font: 'Proxima Nova', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* clamp()-based, so there is no separate mobile scale to keep in sync.
     Upper bounds are the V2 design's: 4rem h1, 2.7rem h2. */
  --fs-title: clamp(2.4rem, 5.2vw, 4rem);
  --fs-heading: clamp(1.9rem, 3.4vw, 2.7rem);
  --fs-subheading: clamp(1.15rem, 1.9vw, 1.5rem);
  --fs-h3: clamp(1.1rem, 1.5vw, 1.25rem);
  --fs-body: 1rem;
  --fs-body-lg: 1.06rem;    /* hero sub and section-head paragraphs */
  --fs-small: 0.92rem;      /* card copy, table cells */
  --fs-button: 0.82rem;
  --fs-eyebrow: 0.72rem;

  --lh-tight: 1.06;         /* the design's heading line-height */
  --lh-snug: 1.25;
  --lh-body: 1.6;

  /* Tracking. The design sets -.02em on headings and wide positive tracking on
     the uppercase micro-type, which is most of what gives it its character. */
  --ls-heading: -0.02em;
  --ls-eyebrow: 0.16em;
  --ls-button: 0.06em;
  --ls-label: 0.12em;

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1340px;
  --gutter: 28px;
  --radius: 10px;           /* buttons */
  --radius-card: 16px;      /* cards, tables, panels */
  --radius-sm: 9px;         /* mega-nav rows, small chips */
  /* 88px, up from 72px: the 132px logo is ~57px tall, so this centres it with
     ~15px of clear space above and beneath. Kept as the single source for the
     bar height so the sticky offset, scroll-padding and mobile drawer inset all
     track the real header. */
  --header-h: 88px;

  /* Density multiplier on section padding, straight from the design, where the
     Tweaks panel drove it. Set --sp on :root to compact the whole site at once. */
  --sp: 1;
  --section-pad: calc(72px * var(--sp));

  /* ---- Spacing scale ---------------------------------------------------- */
  /* One step scale for component and content spacing, so margins and padding
     come from a fixed set rather than ad-hoc pixel values. Use these for
     margins/padding inside blocks; --section-pad still owns the section rhythm.
     Fluid gaps that genuinely need to scale with the viewport stay on clamp(). */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 64px;
  --space-6xl: 80px;

  /* How far an .overlap row climbs into the band above it, and the clear space
     that band has to keep between its last line of copy and the row's top
     edge. Both are read by .overlap and by the band above it, so they live
     here rather than on either one. See .overlap in base.css. */
  --overlap-pull: clamp(52px, 7vw, 104px);
  --overlap-clear: clamp(24px, 3vw, 40px);

  /* ---- Elevation -------------------------------------------------------- */
  /* All navy-tinted rather than black, which is why the design's shadows read
     as depth instead of grime. Each is the design's own value. */
  --shadow-card: 0 18px 50px -24px rgba(11, 59, 96, 0.28);
  --shadow-card-sm: 0 12px 32px -18px rgba(11, 59, 96, 0.25);
  --shadow-featured: 0 26px 60px -28px rgba(11, 59, 96, 0.45);
  --shadow-mega: 0 30px 64px -26px rgba(11, 59, 96, 0.34);
  --shadow-pink: 0 8px 22px -8px rgba(232, 31, 118, 0.6);
  --shadow-pink-hover: 0 14px 30px -10px rgba(232, 31, 118, 0.7);
  --shadow-navy: 0 8px 22px -8px rgba(11, 59, 96, 0.5);

  /* ---- Motion ----------------------------------------------------------- */
  --t-fast: 0.15s;
  --t-base: 0.25s;
  --t-slow: 0.5s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Legacy aliases --------------------------------------------------- */
  /* Kept so the pages and components written against the Showit extraction
     keep resolving while they are worked through. Each points at its V2
     counterpart, so nothing renders in the old palette. */
  --navy-deep: var(--deep-navy);
  --navy-mid: #355e7e;
  --sky: var(--arctic);
  --sky-text: var(--arctic-text);
  --teal: var(--turquoise);
  --off-white: var(--bg-soft);
  --border: var(--line);
}

@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --header-h: 78px;
    --section-pad: calc(52px * var(--sp));
  }
}

/* Respect a user's reduced-motion preference. The current site has no such
   handling; every scroll reveal and autoplaying video fires regardless.

   Note for the testimonial waterfall: it is additionally gated in JS on this
   same query, so it never clones its cards and never starts. Killing its
   animation here alone would leave a duplicated static list. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}