/* GENERATED by tools/build_proportional_css.py. DO NOT EDIT.
 * Source: foundation.css SHA256 bef1c3a9fa050b44be6d4678f7194887a4ae2c08d7e7f36f7c3a272d22de6958
 * 1460px desktop proportions at 721–1460px; original CSS outside. */
@media not all and (min-width: 721px) and (max-width: 1460px) {
/* ============================================================
   GECKO 5.0 · FOUNDATION STYLESHEET
   Version 0.1 · 24 August 2026

   Drop this in first, before any theme or page CSS. Everything
   in the brand guide is expressed here as a token or a rule.

   Read the companion document "Gecko Build Spec" for what each
   of these means in plain language and when to reach for it.
   ============================================================ */

/* ------------------------------------------------------------
   1 · TOKENS
   Change a value here and it changes everywhere. Never hard-code
   a hex, a size or a radius anywhere else in the project.
   ------------------------------------------------------------ */
:root{

  /* --- colour: grounds --- */
  --ink:        #181910;  /* page ground, dark bands, every heading */
  --ink-deep:   #181909;  /* statement grounds only. foot tile, Rally, speed band */
  --paper:      #FAF8F2;  /* the light ground */
  --paper-2:    #F4F3EB;  /* cards, quiet panels, bento tiles */
  --paper-3:    #EDEBDD;  /* nested inside a card, quiet buttons, swatch grounds */

  /* --- colour: greys, evenly spaced by perceptual lightness --- */
  --graphite:   #2E2E1E;  /* raised cards sitting on Ink            L* 19 */
  --char:       #4A4A38;  /* dividers inside dark sections          L* 31 */
  --slate:      #68694F;  /* secondary text, ALL three Papers 4.7:1  L* 44 */
  --ash:        #858768;  /* secondary text on Ink        4.8:1     L* 55 */
  --stone:      #ACAC9A;  /* placeholders, disabled, never body     L* 70 */
  --line:       #DFDCC8;  /* hairlines and grid lines on Paper      L* 88 */
  --line-dark:  rgba(250,248,242,.13);  /* hairlines on Ink */

  /* --- colour: accent --- */
  --fluro:      #EBFF00;  /* ONE element per viewport. never two */
  --fluro-deep: #636900;  /* Fluro when it must read as text on Paper  5.6:1 */
  --fluro-lift: #F4FF4D;  /* Fluro hover only */

  /* --- colour: system states. never decorative --- */
  --ok:         #137845;  /* on Paper */
  --ok-dark:    #1A9F5C;  /* on Ink */
  --alert:      #C43020;  /* on Paper */
  --alert-dark: #E36254;  /* on Ink */
  /* there is deliberately no amber. warnings are Alert at low emphasis */

  /* --- type --- */
  --ff:      'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-h1:      clamp(40px, 6.6vw, 86px);
  --fs-h2:      clamp(32px, 4.6vw, 58px);
  --fs-h3:      clamp(22px, 2.4vw, 30px);
  --fs-h4:      19px;
  --fs-body:    17px;
  --fs-small:   14.5px;
  --fs-eyebrow: 12.5px;
  --fs-button:  13px;
  --fs-meta:    12px;

  /* weight is inverse to size: big type carries less, small type needs more */
  --fw-h1: 500;      --fw-h2: 500;      --fw-h3: 700;      --fw-h4: 700;
  --ls-h1: -.016em;  --ls-h2: -.014em;  --ls-h3: -.010em;  --ls-h4: -.008em;
  --ls-eyebrow: .16em;  --ls-button: .08em;  --ls-meta: .12em;

  --lh-display: .95;
  --lh-body:   1.6;

  /* --- layout --- */
  --cols:    12;
  /* --max is the CONTENT measure, which is what the brand guide has
     always said it was: "at 1240 that puts a single column at 85px".
     .wrap was applying it as the box width and then putting the page
     padding inside it, so the real content was 1113px and a column was
     74px, not 85. Every page has been one --pad narrower than the guide
     documents. --shell is the box that carries the measure, so the two
     numbers can no longer drift apart. */
  --max:     1360px;                    /* content. 12 columns of 95px */
  --shell:   calc(var(--max) + var(--pad) * 2);
  --pad:     clamp(20px, 4.4vw, 64px);  /* gutter, outside the grid */
  --col-gap: 20px;
  --row-gap: 28px;
  --band:    clamp(64px, 8.5vw, 120px); /* vertical padding on a section */

  /* --- spacing scale. if a gap is not on this list it is a mistake --- */
  --s-1:   4px;   /* icon to label */
  --s-2:   8px;   /* inside a pill */
  --s-3:  12px;   /* tile gaps inside a component */
  --s-4:  20px;   /* column gap */
  --s-5:  28px;   /* row gap */
  --s-6:  44px;   /* between sub-sections */
  --s-7:  64px;   /* band padding, minimum */
  --s-8: 120px;   /* band padding, desktop */

  /* --- radius. three values, nothing else --- */
  --r-band:  30px;                    /* the sheet that slides over the hero */
  --r-card:  14px;
  --r-inner: 12px;
  --r-pill:  100px;

  /* --- motion --- */
  --dur-hover:  180ms;
  --dur-reveal: 620ms;
  --dur-rise:   820ms;   /* entrances. longer than a state change, so the
                            travel reads as arrival rather than a twitch */
  --ease:       cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------
   2 · RESET AND BASE
   ------------------------------------------------------------ */
*, *::before, *::after{ box-sizing: border-box; }
*{ margin: 0; padding: 0; }

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, canvas{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul, ol{ list-style: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea{ font: inherit; color: inherit; }

::selection{ background: var(--fluro); color: var(--ink); }

/* ------------------------------------------------------------
   3 · TYPE
   Headings are Roboto, weighted by size. 500 Medium at display sizes,
   700 Bold once the type is small enough to need the extra body.
   Tracking is set per level for the same reason.
   ------------------------------------------------------------ */
h1, h2, h3, h4{
  font-family: var(--ff);
  line-height: var(--lh-display);
  text-wrap: balance;   /* kills orphan words without manual line breaks */
}
h1{ font-size: var(--fs-h1); font-weight: var(--fw-h1); letter-spacing: var(--ls-h1); }
h2{ font-size: var(--fs-h2); font-weight: var(--fw-h2); letter-spacing: var(--ls-h2); }
h3{ font-size: var(--fs-h3); font-weight: var(--fw-h3); letter-spacing: var(--ls-h3); line-height: .98; }
h4{ font-size: var(--fs-h4); font-weight: var(--fw-h4); letter-spacing: var(--ls-h4); line-height: 1; }

p{ max-width: 70ch; }          /* measure cap. long lines look amateur */
b, strong{ font-weight: 700; }

.lede{ font-size: 19px; line-height: 1.6; color: var(--slate); max-width: 62ch; }
.small{ font-size: var(--fs-small); line-height: 1.62; color: var(--slate); }

/* eyebrow: the small mono label above a heading */
/* The eyebrow labels the heading under it, so the gap belongs to the
   pair rather than to either element on its own. It was being set by
   whatever top margin the heading happened to carry, which is why it
   read tight in some bands and not others. 24px here, and the heading
   below gives up its own top margin so the two cannot compound. */
/* The eyebrow is a highlighter mark, not coloured type: Ink on a Fluro
   block sized to the words. inline-block is load bearing, a block level
   element carrying a background runs the full measure and reads as a bar
   across the page rather than as a mark made on the words.

   The block is a background, not a colour, so it can be drawn in. On a
   view timeline it wipes left to right as the eyebrow enters, and because
   a scroll timeline is a position rather than a playback it un-draws
   itself when the reader scrolls back up. No script. */
.eyebrow{
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(var(--fluro), var(--fluro)) left center / 100% 100% no-repeat;
  padding: 3px 7px 4px;
  margin-bottom: 24px;
}
/* The wipe is driven from script, not from a view() timeline. This page
   sets overflow-x:hidden on the body, which makes the body a scroll
   container, and a view timeline then resolves against that rather than
   against the page and never advances. Measured: background-size stayed
   at 100% at every scroll position. One rAF throttled handler writing a
   0 to 1 progress onto each mark is boring and it works everywhere,
   including the browsers that have no timeline support at all.

   Because it is a position and not a playback, scrolling back up
   un-draws the mark, which is the whole point of it. */
.eyebrow{ background-size: calc(var(--eb, 1) * 100%) 100%; }
@media (prefers-reduced-motion: reduce){ .eyebrow{ --eb: 1 } }

/* meta: captions, timestamps, small structural labels */
.meta{
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--stone);
}

/* prices and all figures are mono, because its numerals are tabular
   and a column of prices lines up with no effort */
.figure{ font-family: var(--ff-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   4 · LAYOUT
   ------------------------------------------------------------ */

/* the content container. bands go full-bleed, content stops here */
.wrap{ max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }

/* a section band. NEVER two dark bands in a row */
section{ padding: var(--band) 0; }
.dark{ background: var(--ink); color: var(--paper); }
.dark p, .dark .lede{ color: #B9B6AA; }
.deep{ background: var(--ink-deep); color: var(--paper); }

/* --- the 12 column grid ---
   Single source of truth. EVERY multi-column layout uses this,
   so every row on the page shares identical column boundaries. */
.row{
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--row-gap) var(--col-gap);
  align-items: start;
}
.row.stretch{ align-items: stretch; }
.row.bottom { align-items: end; }

/* Spans are set on grid-column-END, not the shorthand. The shorthand
   `grid-column: span 6` leaves the END at auto, so adding .start-7 to it
   would collapse the item to a single column. Setting the end explicitly
   lets .col-N and .start-N combine correctly. */
.col-1 { grid-column-end: span 1; }   .col-7 { grid-column-end: span 7; }
.col-2 { grid-column-end: span 2; }   .col-8 { grid-column-end: span 8; }
.col-3 { grid-column-end: span 3; }   .col-9 { grid-column-end: span 9; }
.col-4 { grid-column-end: span 4; }   .col-10{ grid-column-end: span 10; }
.col-5 { grid-column-end: span 5; }   .col-11{ grid-column-end: span 11; }
.col-6 { grid-column-end: span 6; }   .col-12{ grid-column-end: span 12; }

/* start a column somewhere other than the next free slot */
.start-2{ grid-column-start: 2; }  .start-7 { grid-column-start: 7; }
.start-3{ grid-column-start: 3; }  .start-8 { grid-column-start: 8; }
.start-6{ grid-column-start: 6; }  .start-9 { grid-column-start: 9; }

[class*="col-"]{ min-width: 0; }  /* lets grid children shrink. do not remove */

/* --- the hairline grid ---
   A component that divides its own width with 1px lines. The lines
   are the background showing through the gap, not borders. */
.hgrid{
  display: grid;
  gap: 1px;
  background: var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.hgrid > *{ background: var(--paper); padding: 26px 24px 28px; }
.dark .hgrid{ background: var(--char); }
.dark .hgrid > *{ background: var(--ink); }

/* ------------------------------------------------------------
   5 · DEPTH
   There are NO drop shadows and NO outlines anywhere in this system.
   Depth is a step in the fill and nothing else. Three levels only.
   ------------------------------------------------------------ */
.card      { background: var(--paper-2); border-radius: var(--r-card); padding: 30px 28px; }
.card-inner{ background: var(--paper-3); border-radius: var(--r-inner); padding: 22px 20px; }
.dark .card      { background: var(--graphite); }
.dark .card-inner{ background: var(--char); }

/* a horizontal rule. the only line that is allowed to be a border */
.rule{ height: 1px; background: var(--line); border: 0; }
.dark .rule{ background: var(--line-dark); }

/* ------------------------------------------------------------
   6 · BUTTONS
   Three flat fills, no outline variant, because there are no outlines.
   ONE Fluro button per viewport. A second action is .btn-quiet.
   ------------------------------------------------------------ */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ff-mono);
  font-size: var(--fs-button);
  font-weight: 700;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: 16px 27px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: transform var(--dur-hover) ease, background var(--dur-hover) ease;
}
.btn:hover{ transform: translateY(-2px); }

/* The arrow. It was the → character, which inherits the button's 13px
   and renders at whatever weight the font feels like. Drawn as a mask
   instead it is sized independently of the label, takes the button's
   own colour, and can be nudged on hover. 1.5em against a 13px label
   puts it at 19.5px, which reads at a glance without shouting over the
   words it belongs to. */
.btn .ar{
  width: 1.5em; height: 1.5em; flex: 0 0 auto;
  margin: 0 -4px 0 -1px;             /* optical, the glyph has its own air */
  background: currentColor;
  transition: transform var(--dur-hover) var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 12h16.8'/%3E%3Cpath d='m14.2 5.8 6.2 6.2-6.2 6.2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 12h16.8'/%3E%3Cpath d='m14.2 5.8 6.2 6.2-6.2 6.2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn:hover .ar{ transform: translateX(3px); }
@media (prefers-reduced-motion: reduce){ .btn:hover .ar{ transform: none; } }

.btn-primary{ background: var(--fluro); color: var(--ink); }
.btn-primary:hover{ background: var(--fluro-lift); }

.btn-strong{ background: var(--ink); color: var(--paper); }
.btn-strong:hover{ background: #000; }

.btn-quiet{ background: var(--paper-3); color: var(--ink); }
.btn-quiet:hover{ background: #E3E0CE; }
.dark .btn-quiet{ background: rgba(250,248,242,.10); color: var(--paper); }
.dark .btn-quiet:hover{ background: rgba(235,255,0,.14); color: var(--fluro); }

.btn[disabled], .btn.is-disabled{
  background: var(--paper-3);
  color: var(--stone);
  pointer-events: none;
}

/* text link with a rule under it */
.tlink{
  font-family: var(--ff-mono);
  font-size: var(--fs-button);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fluro-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  padding-bottom: 3px;
}
.dark .tlink{ color: var(--fluro); }

/* ------------------------------------------------------------
   7 · TAGS
   ------------------------------------------------------------ */
.tag{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--paper-3); color: var(--slate);
}
.tag-accent{ background: var(--fluro); color: var(--ink); }
.tag-ok    { background: rgba(19,120,69,.12);  color: var(--ok); }
.tag-alert { background: rgba(196,48,32,.11);  color: var(--alert); }

/* ------------------------------------------------------------
   8 · FORM FIELDS
   The label NEVER sits inside the field. A placeholder that
   disappears when you type is not a label.
   ------------------------------------------------------------ */
.field{ display: block; }
.field > span{
  display: block;
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 9px;
}
.field input, .field textarea, .field select{
  width: 100%;
  background: var(--paper-2);
  border: none;
  border-radius: var(--r-inner);
  padding: 14px 16px;
  font-size: 15px;
}
.field input::placeholder, .field textarea::placeholder{ color: var(--stone); }
.field.is-error input{ background: rgba(196,48,32,.07); }
.field .msg{
  display: flex; align-items: center; gap: 7px;
  margin-top: 9px; font-size: 12.5px; color: var(--alert); font-style: normal;
}
.field .msg svg{ width: 14px; height: 14px; }

/* ------------------------------------------------------------
   9 · ICONS
   24 grid, 1.8 stroke, no fills. They inherit currentColor, so
   colour them by the text around them, never individually.
   ------------------------------------------------------------ */
.icon{ width: 24px; height: 24px; flex: 0 0 auto; }
.icon-sm{ width: 16px; height: 16px; }   /* inline with text */
.icon-lg{ width: 32px; height: 32px; }   /* standing alone. the largest an icon gets */
.icon svg, .icon-sm svg, .icon-lg svg{ width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------
   10 · MOTION
   Three things move. Nothing else does.
   ------------------------------------------------------------ */
.rv{ opacity: 0; transform: translateY(var(--rise, 26px)); }
.rv.is-in{
  opacity: 1; transform: none;
  transition: opacity var(--dur-rise) var(--ease) var(--d, 0ms),
              transform var(--dur-rise) var(--ease) var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rv{ opacity: 1; transform: none; }
  .btn:hover{ transform: none; }
}

/* ------------------------------------------------------------
   11 · ACCESSIBILITY
   Non-negotiable. Do not remove any of this.
   ------------------------------------------------------------ */
:focus-visible{
  outline: 2px solid var(--fluro-deep);
  outline-offset: 3px;
  border-radius: 3px;
}
.dark :focus-visible{ outline-color: var(--fluro); }

.skip{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--fluro); color: var(--ink);
  padding: 12px 20px;
  font-family: var(--ff-mono); font-size: 12px;
}
.skip:focus{ left: 12px; top: 12px; }

.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------
   12 · COMPONENTS ADDED AFTER THE KINSTA REVIEW
   August 2026. Every one of these came out of the teardown
   document. They are here rather than in a page stylesheet
   because they are all used on more than one page.
   ------------------------------------------------------------ */

/* --- two tone heading. line one states it, line two qualifies it.
       Wrap the second half in <span class="q">, nothing else. --- */
h1 .q, h2 .q{ color: var(--slate); }
.dark h1 .q, .dark h2 .q, .slab h2 .q{ color: var(--ash); }

/* --- source footnote. goes under ANY figure we did not produce
       ourselves, naming the source and the date it was read.
       This is a house rule, not a decoration. --- */
.srcnote{
  margin-top: 18px;
  font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .03em;
  color: var(--slate);           /* never Stone. Stone is 2.2:1 on Paper */
}
.srcnote a{ text-decoration: underline; text-underline-offset: 3px; }
.dark .srcnote, .slab .srcnote{ color: var(--ash); }

/* --- microcopy under a price row. tax and currency, nothing else --- */
.microcopy{
  margin-top: 22px; text-align: center;
  margin-left: auto; margin-right: auto;   /* p is capped at 70ch, so centre the box too */
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .03em;
  color: var(--slate);
}

/* --- band tones. Three light grounds that alternate down a page.
       A page uses at most one dark band, and reaches for .slab when it
       wants a dark moment without spending that one band. --- */
.tone-a{ background: var(--paper); }
.tone-b{ background: var(--paper-2); }
.tone-c{ background: var(--paper-3); }
/* two Paper bands running together need the join drawn, not implied */
.tone-a + .tone-a{ box-shadow: inset 0 1px 0 var(--line); }

/* --- the band that carries an inline CTA bar --- */
.ctaband{ padding: clamp(30px,4vw,56px) 0; }

/* --- capability chips. a long list that does not deserve sentences --- */
.chips{ display: flex; flex-wrap: wrap; gap: 9px; }
.chips.center{ justify-content: center; }
.chips span{
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .03em;
  background: var(--paper-3); color: var(--ink);
  padding: 9px 15px; border-radius: var(--r-pill);
}
.dark .chips span, .slab .chips span{ background: rgba(250,248,242,.10); color: var(--paper); }

/* --- stat row. three across, and one of the three is allowed to be
       a phrase rather than a number. that is the whole trick. --- */
.statrow{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,44px); }
.statrow b{
  display: block; font-size: clamp(32px,3.8vw,52px); font-weight: 500;
  letter-spacing: -.02em; line-height: 1;
}
.statrow span{
  display: block; margin-top: 13px;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate);
}
.dark .statrow span, .slab .statrow span{ color: var(--ash); }
.dark .statrow b, .slab .statrow b{ color: var(--paper); }

/* --- icon grid. an Ink squircle holding a Fluro line icon, a short
       heading and two lines. Fluro on Ink is 15.9:1. --- */
.ig{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border-radius: var(--r-card); overflow: hidden;
}
.ig > div{ background: var(--paper); padding: 30px 28px 34px; }
.ig .ic{
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--ink); color: var(--fluro);
  display: grid; place-items: center; margin-bottom: 20px;
}
.ig .ic svg{ width: 21px; height: 21px; display: block; }
.ig h3{ font-size: 19px; font-weight: 700; letter-spacing: -.008em; margin-bottom: 9px; }
.ig p{ font-size: 14.5px; line-height: 1.6; color: var(--slate); }
.tone-b .ig{ background: var(--line); }
.tone-b .ig > div{ background: var(--paper-2); }
.tone-c .ig > div{ background: var(--paper-3); }

/* --- media card. dark panel on top holding a diagram or a shot,
       light copy underneath. Lets a light page carry a dark object
       without turning into a dark band. --- */
.mc{ border-radius: var(--r-card); overflow: hidden; }
.mc .mc-media{ background: var(--ink); padding: clamp(16px,2.2vw,32px); overflow-x: auto; }
.mc .mc-media svg{ display: block; width: 100%; height: auto; }
.mc .mc-body{
  background: var(--paper-2);
  padding: clamp(22px,2.6vw,30px) clamp(24px,2.8vw,34px) clamp(26px,3vw,34px);
}
.mc .mc-body h3{ font-size: 19px; font-weight: 700; letter-spacing: -.008em; margin-bottom: 10px; }
.mc .mc-body p{ font-size: 15px; line-height: 1.65; color: var(--slate); }
.tone-b .mc .mc-body{ background: var(--paper-3); }

/* --- inline CTA bar. drops between two sections about halfway down
       so nobody has to reach the footer to act. --- */
.ctabar{
  background: var(--paper-3); border-radius: var(--r-card);
  padding: clamp(24px,2.8vw,32px) clamp(26px,3vw,36px);
  display: flex; align-items: center; gap: clamp(20px,3vw,36px); flex-wrap: wrap;
}
.ctabar .mk{ width: 46px; height: auto; flex: 0 0 auto; color: var(--ink); }
.ctabar .mk svg{ width: 100%; height: auto; display: block; }
.ctabar p{
  flex: 1 1 300px; max-width: 34ch;
  font-size: clamp(19px,2vw,24px); font-weight: 500;
  letter-spacing: -.012em; line-height: 1.28;
}
.ctabar .acts{ display: flex; gap: 10px; flex-wrap: wrap; }
.tone-c .ctabar{ background: var(--paper); }

/* --- slab. a dark object inset inside a light band, rather than a
       dark band. This is what lets a light page carry a strong dark
       moment without breaking the one dark band per page rule. --- */
.slab{
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-card);
  padding: clamp(34px,4vw,56px) clamp(26px,3.4vw,48px) clamp(36px,4.2vw,58px);
}
.slab h2, .slab h3{ color: var(--paper); }
/* the mark carries its own ground, so the type on it is Ink wherever
   the slab happens to sit */
.slab .eyebrow{ color: var(--ink); }
.slab .lede, .slab p{ color: var(--ash); }

/* --- included versus a category. NEVER versus a named company.
       The left state is always a category, see the teardown. --- */
.vs-switch{
  display: inline-flex; background: rgba(250,248,242,.08);
  border-radius: var(--r-pill); padding: 4px; gap: 4px;
}
.vs-switch button{
  font-family: var(--ff-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 20px; border-radius: var(--r-pill);
  color: var(--stone);           /* Stone is correct here. this is the OFF state */
  transition: background var(--dur-hover), color var(--dur-hover);
}
/* the accent marks US, never the category we are comparing against */
.vs-switch button[aria-selected="true"]{ background: var(--paper); color: var(--ink); }
.vs-switch button.accent[aria-selected="true"]{ background: var(--fluro); color: var(--ink); }
.vs-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--char); border-radius: var(--r-inner); overflow: hidden;
}
.vs-grid > div{
  background: var(--graphite); padding: 20px 20px 22px;
  display: flex; flex-direction: column; gap: 15px;
}
.vs-grid b{ font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--paper); }
.vs-grid > div.no b{ color: var(--stone); }
.vs-grid .m{ width: 22px; height: 22px; display: none; }
.vs-grid .m svg{ width: 100%; height: 100%; display: block; }
.vs-grid > div:not(.no) .m-yes{ display: block; color: var(--ok-dark); }
.vs-grid > div.no .m-no{ display: block; color: var(--alert-dark); }

/* --- sticky glass nav. Transparent over a dark hero, then it lifts
       into a blurred Ink bar the moment the page moves. The wordmark
       flips to the foot at the same time, so the shrunk bar keeps a
       mark without keeping the full logo.

       Measured: the stuck bar composites to #4A4A42 over Paper. Paper
       text on it is 8.4:1 and the .74 links are 5.5:1, so nothing here
       needs a heavier fill to stay legible. --- */
.gnav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding: 0 var(--pad);
  transition: padding var(--dur-reveal) var(--ease);
}
.gnav-in{
  position: relative;                 /* the links are centred off this */
  /* .gnav puts --pad outside this box, so the cap here is the measure
     itself. That lands the wordmark on exactly the same line as .wrap's
     content edge, which is why this reads as the obvious thing again
     now that --max means what it says. */
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; border-radius: 0; background: transparent;
  transition: padding var(--dur-reveal) var(--ease),
              background var(--dur-reveal) var(--ease),
              border-radius var(--dur-reveal) var(--ease),
              box-shadow var(--dur-reveal) var(--ease);
}
.gnav.stuck{ padding: 10px var(--pad); }
.gnav.stuck .gnav-in{
  padding: 9px 9px 9px 26px;         /* the CTA hugs the right end of the lozenge */
  border-radius: var(--r-pill);
  background: rgba(24,25,16,.78);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
          backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(250,248,242,.10);   /* a light edge, not a border */
}

/* Over a dark band an Ink pane on Ink is invisible, so the glass inverts to
   a thin Paper wash. The script below the nav works out which band is under
   the bar from its computed background, so this needs no markup and it keeps
   working when the band order changes. */
.gnav.on-dark.stuck .gnav-in{
  background: rgba(250,248,242,.07);
  box-shadow: inset 0 1px 0 rgba(250,248,242,.16);
}

/* the links are pinned to the centre of the bar rather than sitting in the
   flex flow, so the mark can shrink from 104px to 30px without dragging
   the whole nav sideways as it goes */
.gnav-links{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: flex; align-items: center; gap: clamp(18px, 2.2vw, 30px);
  white-space: nowrap;
}
.gnav-links a{
  font-family: var(--ff-mono); font-size: 13.5px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(250,248,242,.74);
  transition: color var(--dur-hover);
}
.gnav-links a:hover, .gnav-links a[aria-current]{ color: var(--fluro); }
.gnav-right{ display: flex; align-items: center; gap: 14px; }
.gnav-right .tel{
  font-family: var(--ff-mono); font-size: 13.5px; letter-spacing: .04em;
  color: rgba(250,248,242,.62); transition: color var(--dur-hover);
}
.gnav-right .tel:hover{ color: var(--fluro); }
/* The nav CTA is quiet over the hero, because the hero already spends the
   accent on its own button and the rule is one Fluro per view. Once the hero
   has scrolled away the bar takes the accent over. */
.gnav .btn-cta{ background: rgba(250,248,242,.12); color: var(--paper); }
.gnav .btn-cta:hover{ background: rgba(235,255,0,.16); color: var(--fluro); }
.gnav.stuck .btn-cta{ background: var(--fluro); color: var(--ink); }
.gnav.stuck .btn-cta:hover{ background: var(--fluro-lift); color: var(--ink); }
.gnav .btn:hover{ transform: none; }   /* a bar that lifts on hover reads as broken */

/* --- the mark flip. Wordmark on the front, foot on the back, one
       rotation on the Y axis. The slot narrows at the same time so the
       bar actually gets shorter rather than leaving a gap. --- */
.brandflip{
  display: block; flex: 0 0 auto;
  /* 34px tall, up from 26. The bar has the room and the wordmark was
     reading as a small label next to a full size CTA rather than as the
     thing the bar belongs to. The box keeps the same 4:1 proportion so
     nothing else in the bar has to move. */
  width: 136px; height: 34px;
  transition: width var(--dur-reveal) var(--ease);
}
.gnav.stuck .brandflip{ width: 34px; }
.brandflip .flip{
  position: relative; display: block; width: 100%; height: 100%;
}
/* --- The flip is 2D, and that is the whole point of it. ---

   It used to be a real rotateY inside a perspective, with the two faces
   hidden from each other on backface-visibility. That works, and it puts
   the wordmark into its own 3D compositing layer, where the browser
   rasterises the vector ONCE at the layer's size and then reuses that
   bitmap. On a high density display the bitmap is often laid down at 1x
   and scaled up, and the wordmark comes out visibly jagged, permanently,
   whether or not anything is animating.

   Squeezing each face on scaleX instead reads as the same flip at 34px
   tall, creates no 3D context and no promoted layer, and leaves the SVG
   to be drawn as a vector at device resolution on every frame. */
.brandflip .face{
  position: absolute; inset: 0;
  /* start, not centre. The box is wider than the wordmark, so centring
     floated the ink to the right of its own box. The box was on the grid
     and the logo was not, which is exactly the kind of thing you see
     before you can name it. */
  display: grid; place-items: center start;
  transform-origin: left center;
  transition: transform var(--dur-reveal) var(--ease),
              opacity calc(var(--dur-reveal) / 2) var(--ease);
  color: var(--paper);
}
.brandflip .face.back{ transform: scaleX(0); opacity: 0 }
.gnav.stuck .brandflip .face.front{ transform: scaleX(0); opacity: 0 }
.gnav.stuck .brandflip .face.back { transform: scaleX(1); opacity: 1 }
/* geometricPrecision, not auto. On a mark this small at this weight the
   UA is allowed to trade edge quality for speed under `auto`, and on the
   Fluro on Ink lockup in the footer that trade is visible. */
.brandflip .face svg,
.brandflip .face .custom-logo,
.f-word svg{ height: 100%; width: auto; display: block;
             shape-rendering: geometricPrecision; }
.brandflip .face .custom-logo{ filter: brightness(0) invert(1); }
/* the mark shrink wraps to the artwork, so the trade mark can hang off
   the wordmark's real right edge rather than off the 104px box, which
   left it floating 37px out in open space */
.brandflip .mk{ position: relative; display: block; height: 100%; }
/* Absolutely placed so it cannot push the wordmark off the grid line,
   and hidden on the flipped face because the foot is not the mark. */
.brandflip .tm{
  position: absolute; top: 0; left: 100%; margin-left: 5px;
  /* The sans at Bold, not the mono at Regular. Measured side by side at
     9, 10, 11, 12 and 14px: the mono's circled C sits small inside its
     own em box and the ring is a hair thin, and at the size this thing
     is actually used it closes up. Roboto 700 draws the same glyph
     larger in the box and with enough weight in the ring to survive
     antialiasing at 11px. */
  font-family: var(--ff); font-size: 11px; font-weight: 700;
  letter-spacing: 0; line-height: 1; color: currentColor; opacity: .78;
  pointer-events: none;
  transition: opacity var(--dur-hover) ease;
}
.gnav.stuck .brandflip .tm{ opacity: 0; }   /* no room on the 34px foot */

/* --- small screens. The links cannot live in the bar, so they move to a
       full screen Ink panel. Two bars rather than three, because two
       become an X without a third one to hide. --- */
.gnav-burger{ display: none; }
.gnav-burger i{
  display: block; width: 17px; height: 1.5px; background: var(--paper);
  transition: transform var(--dur-hover) var(--ease);
}
.gnav-burger.on i:nth-child(1){ transform: translateY(3.25px) rotate(45deg); }
.gnav-burger.on i:nth-child(2){ transform: translateY(-3.25px) rotate(-45deg); }

.gnav-panel{
  position: fixed; inset: 0; z-index: 55;
  background: var(--ink-deep); padding: 0 var(--pad);
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-hover) ease;
}
.gnav-panel.open{ opacity: 1; pointer-events: auto; }
.gnav-panel a{
  display: block; padding: 11px 0;
  font-size: clamp(30px, 9vw, 44px); font-weight: 500; letter-spacing: -.016em;
  color: var(--paper);
}
.gnav-panel a:hover{ color: var(--fluro); }
.gnav-panel .tel{
  font-family: var(--ff-mono); font-size: 15px; letter-spacing: .04em;
  color: var(--ash); margin-top: 30px; padding: 0;
}

@media (prefers-reduced-motion: reduce){
  .gnav, .gnav-in, .brandflip, .brandflip .flip, .gnav-panel{ transition: none; }
}
@media (max-width: 900px){
  .gnav-links, .gnav-right .tel{ display: none; }
  .gnav.stuck .gnav-in{ padding: 8px 8px 8px 18px; }
  .gnav-burger{
    display: grid; place-content: center; gap: 5px;
    width: 40px; height: 40px; border-radius: var(--r-inner);
    background: rgba(250,248,242,.12);
  }
  .gnav-burger:hover{ background: rgba(235,255,0,.16); }
}
@media (min-width: 901px){ .gnav-panel{ display: none; } }

/* --- trust strip. compliance tiles plus one plain sentence.
       Only ever holds accreditations we actually hold. --- */
.trust{ display: flex; align-items: center; gap: clamp(20px,3vw,40px); flex-wrap: wrap; }
.trust .tiles{
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--line); border-radius: var(--r-inner); overflow: hidden;
}
.trust .tiles span{
  background: var(--paper); color: var(--ink);
  padding: 13px 17px; display: flex; align-items: center; gap: 9px;
  font-family: var(--ff-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.trust .tiles i{ width: 15px; height: 15px; display: block; color: var(--ok); }
.trust .tiles i svg{ width: 100%; height: 100%; display: block; }
.trust .say{ font-size: 17px; font-weight: 500; letter-spacing: -.008em; }
.trust .lnks{ display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--slate); }
.trust .lnks a{ text-decoration: underline; text-underline-offset: 4px; }
.trust .lnks a:hover{ color: var(--ink); }
.dark .trust .tiles{ background: var(--char); }
.dark .trust .tiles span{ background: var(--graphite); color: var(--paper); }
.dark .trust .tiles i{ color: var(--ok-dark); }
.dark .trust .say{ color: var(--paper); }
.dark .trust .lnks{ color: var(--ash); }
.dark .trust .lnks a:hover{ color: var(--fluro); }

@media (max-width: 1000px){
  .ig, .vs-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .ig, .vs-grid, .statrow{ grid-template-columns: 1fr; }
  .statrow{ gap: 26px; }
}

/* ------------------------------------------------------------
   13 · BREAKPOINTS
   Two, and everything between them is fluid. Type uses clamp()
   and padding uses vw, so the layout never steps.
   ------------------------------------------------------------ */
@media (max-width: 1000px){
  [class*="col-"]{ grid-column: 1 / span 6; }
  .col-12{ grid-column: span 12; }
}
@media (max-width: 700px){
  [class*="col-"]{ grid-column: 1 / span 12; }
}

}
@media (min-width: 721px) and (max-width: 1460px) {
:root{--ink:#181910;--ink-deep:#181909;--paper:#FAF8F2;--paper-2:#F4F3EB;--paper-3:#EDEBDD;--graphite:#2E2E1E;--char:#4A4A38;--slate:#68694F;--ash:#858768;--stone:#ACAC9A;--line:#DFDCC8;--line-dark:rgba(250,248,242,.13);--fluro:#EBFF00;--fluro-deep:#636900;--fluro-lift:#F4FF4D;--ok:#137845;--ok-dark:#1A9F5C;--alert:#C43020;--alert-dark:#E36254;--ff:"Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;--ff-mono:"Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;--fs-h1:clamp(2.7397260274vw, 6.6vw, 5.8904109589vw);--fs-h2:clamp(2.1917808219vw, 4.6vw, 3.9726027397vw);--fs-h3:clamp(1.5068493151vw, 2.4vw, 2.0547945205vw);--fs-h4:1.301369863vw;--fs-body:1.1643835616vw;--fs-small:0.9931506849vw;--fs-eyebrow:0.8561643836vw;--fs-button:0.8904109589vw;--fs-meta:0.8219178082vw;--fw-h1:500;--fw-h2:500;--fw-h3:700;--fw-h4:700;--ls-h1:-.016em;--ls-h2:-.014em;--ls-h3:-.010em;--ls-h4:-.008em;--ls-eyebrow:.16em;--ls-button:.08em;--ls-meta:.12em;--lh-display:.95;--lh-body:1.6;--cols:12;--max:93.1506849315vw;--shell:calc(var(--max) + var(--pad) * 2);--pad:clamp(1.3698630137vw, 4.4vw, 4.3835616438vw);--col-gap:1.3698630137vw;--row-gap:1.9178082192vw;--band:clamp(4.3835616438vw, 8.5vw, 8.2191780822vw);--s-1:0.2739726027vw;--s-2:0.5479452055vw;--s-3:0.8219178082vw;--s-4:1.3698630137vw;--s-5:1.9178082192vw;--s-6:3.0136986301vw;--s-7:4.3835616438vw;--s-8:8.2191780822vw;--r-band:2.0547945205vw;--r-card:0.9589041096vw;--r-inner:0.8219178082vw;--r-pill:6.8493150685vw;--dur-hover:180ms;--dur-reveal:620ms;--dur-rise:820ms;--ease:cubic-bezier(.16, 1, .3, 1);}
*, *::before, *::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:var(--ff);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img, svg, video, canvas{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul, ol{list-style:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input, select, textarea{font:inherit;color:inherit;}
::selection{background:var(--fluro);color:var(--ink);}
h1, h2, h3, h4{font-family:var(--ff);line-height:var(--lh-display);text-wrap:balance;}
h1{font-size:var(--fs-h1);font-weight:var(--fw-h1);letter-spacing:var(--ls-h1);}
h2{font-size:var(--fs-h2);font-weight:var(--fw-h2);letter-spacing:var(--ls-h2);}
h3{font-size:var(--fs-h3);font-weight:var(--fw-h3);letter-spacing:var(--ls-h3);line-height:.98;}
h4{font-size:var(--fs-h4);font-weight:var(--fw-h4);letter-spacing:var(--ls-h4);line-height:1;}
p{max-width:70ch;}
b, strong{font-weight:700;}
.lede{font-size:1.301369863vw;line-height:1.6;color:var(--slate);max-width:62ch;}
.small{font-size:var(--fs-small);line-height:1.62;color:var(--slate);}
.eyebrow{display:inline-block;font-family:var(--ff-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ink);background:linear-gradient(var(--fluro), var(--fluro)) left center / 100% 100% no-repeat;padding:0.2054794521vw 0.4794520548vw 0.2739726027vw;margin-bottom:1.6438356164vw;}
.eyebrow{background-size:calc(var(--eb, 1) * 100%) 100%;}
@media (prefers-reduced-motion: reduce){
.eyebrow{--eb:1;}
}
.meta{font-family:var(--ff-mono);font-size:var(--fs-meta);letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--stone);}
.figure{font-family:var(--ff-mono);font-weight:500;font-variant-numeric:tabular-nums;}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);}
section{padding:var(--band) 0;}
.dark{background:var(--ink);color:var(--paper);}
.dark p, .dark .lede{color:#B9B6AA;}
.deep{background:var(--ink-deep);color:var(--paper);}
.row{display:grid;grid-template-columns:repeat(var(--cols), 1fr);gap:var(--row-gap) var(--col-gap);align-items:start;}
.row.stretch{align-items:stretch;}
.row.bottom{align-items:end;}
.col-1{grid-column-end:span 1;}
.col-7{grid-column-end:span 7;}
.col-2{grid-column-end:span 2;}
.col-8{grid-column-end:span 8;}
.col-3{grid-column-end:span 3;}
.col-9{grid-column-end:span 9;}
.col-4{grid-column-end:span 4;}
.col-10{grid-column-end:span 10;}
.col-5{grid-column-end:span 5;}
.col-11{grid-column-end:span 11;}
.col-6{grid-column-end:span 6;}
.col-12{grid-column-end:span 12;}
.start-2{grid-column-start:2;}
.start-7{grid-column-start:7;}
.start-3{grid-column-start:3;}
.start-8{grid-column-start:8;}
.start-6{grid-column-start:6;}
.start-9{grid-column-start:9;}
[class*="col-"]{min-width:0;}
.hgrid{display:grid;gap:0.0684931507vw;background:var(--line);border-radius:var(--r-card);overflow:hidden;}
.hgrid > *{background:var(--paper);padding:1.7808219178vw 1.6438356164vw 1.9178082192vw;}
.dark .hgrid{background:var(--char);}
.dark .hgrid > *{background:var(--ink);}
.card{background:var(--paper-2);border-radius:var(--r-card);padding:2.0547945205vw 1.9178082192vw;}
.card-inner{background:var(--paper-3);border-radius:var(--r-inner);padding:1.5068493151vw 1.3698630137vw;}
.dark .card{background:var(--graphite);}
.dark .card-inner{background:var(--char);}
.rule{height:0.0684931507vw;background:var(--line);border:0;}
.dark .rule{background:var(--line-dark);}
.btn{display:inline-flex;align-items:center;gap:0.6164383562vw;font-family:var(--ff-mono);font-size:var(--fs-button);font-weight:700;letter-spacing:var(--ls-button);text-transform:uppercase;padding:1.095890411vw 1.8493150685vw;border-radius:var(--r-pill);white-space:nowrap;transition:transform var(--dur-hover) ease, background var(--dur-hover) ease;}
.btn:hover{transform:translateY(-0.1369863014vw);}
.btn .ar{width:1.5em;height:1.5em;flex:0 0 auto;margin:0 -0.2739726027vw 0 -0.0684931507vw;background:currentColor;transition:transform var(--dur-hover) var(--ease);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 12h16.8'/%3E%3Cpath d='m14.2 5.8 6.2 6.2-6.2 6.2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 12h16.8'/%3E%3Cpath d='m14.2 5.8 6.2 6.2-6.2 6.2'/%3E%3C/svg%3E") center/contain no-repeat;}
.btn:hover .ar{transform:translateX(0.2054794521vw);}
@media (prefers-reduced-motion: reduce){
.btn:hover .ar{transform:none;}
}
.btn-primary{background:var(--fluro);color:var(--ink);}
.btn-primary:hover{background:var(--fluro-lift);}
.btn-strong{background:var(--ink);color:var(--paper);}
.btn-strong:hover{background:#000;}
.btn-quiet{background:var(--paper-3);color:var(--ink);}
.btn-quiet:hover{background:#E3E0CE;}
.dark .btn-quiet{background:rgba(250,248,242,.10);color:var(--paper);}
.dark .btn-quiet:hover{background:rgba(235,255,0,.14);color:var(--fluro);}
.btn[disabled], .btn.is-disabled{background:var(--paper-3);color:var(--stone);pointer-events:none;}
.tlink{font-family:var(--ff-mono);font-size:var(--fs-button);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fluro-deep);text-decoration:underline;text-underline-offset:0.2739726027vw;text-decoration-thickness:0.102739726vw;padding-bottom:0.2054794521vw;}
.dark .tlink{color:var(--fluro);}
.tag{display:inline-flex;align-items:center;gap:0.4794520548vw;font-family:var(--ff-mono);font-size:0.7534246575vw;letter-spacing:.12em;text-transform:uppercase;padding:0.4109589041vw 0.8219178082vw;border-radius:var(--r-pill);background:var(--paper-3);color:var(--slate);}
.tag-accent{background:var(--fluro);color:var(--ink);}
.tag-ok{background:rgba(19,120,69,.12);color:var(--ok);}
.tag-alert{background:rgba(196,48,32,.11);color:var(--alert);}
.field{display:block;}
.field > span{display:block;font-family:var(--ff-mono);font-size:0.7534246575vw;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);margin-bottom:0.6164383562vw;}
.field input, .field textarea, .field select{width:100%;background:var(--paper-2);border:none;border-radius:var(--r-inner);padding:0.9589041096vw 1.095890411vw;font-size:1.0273972603vw;}
.field input::placeholder, .field textarea::placeholder{color:var(--stone);}
.field.is-error input{background:rgba(196,48,32,.07);}
.field .msg{display:flex;align-items:center;gap:0.4794520548vw;margin-top:0.6164383562vw;font-size:0.8561643836vw;color:var(--alert);font-style:normal;}
.field .msg svg{width:0.9589041096vw;height:0.9589041096vw;}
.icon{width:1.6438356164vw;height:1.6438356164vw;flex:0 0 auto;}
.icon-sm{width:1.095890411vw;height:1.095890411vw;}
.icon-lg{width:2.1917808219vw;height:2.1917808219vw;}
.icon svg, .icon-sm svg, .icon-lg svg{width:100%;height:100%;display:block;}
.rv{opacity:0;transform:translateY(var(--rise, 1.7808219178vw));}
.rv.is-in{opacity:1;transform:none;transition:opacity var(--dur-rise) var(--ease) var(--d, 0ms),
              transform var(--dur-rise) var(--ease) var(--d, 0ms);}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
*, *::before, *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
.rv{opacity:1;transform:none;}
.btn:hover{transform:none;}
}
:focus-visible{outline:0.1369863014vw solid var(--fluro-deep);outline-offset:0.2054794521vw;border-radius:0.2054794521vw;}
.dark :focus-visible{outline-color:var(--fluro);}
.skip{position:absolute;left:-684.8630136986vw;top:0;z-index:100;background:var(--fluro);color:var(--ink);padding:0.8219178082vw 1.3698630137vw;font-family:var(--ff-mono);font-size:0.8219178082vw;}
.skip:focus{left:0.8219178082vw;top:0.8219178082vw;}
.visually-hidden{position:absolute;width:0.0684931507vw;height:0.0684931507vw;padding:0;margin:-0.0684931507vw;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
h1 .q, h2 .q{color:var(--slate);}
.dark h1 .q, .dark h2 .q, .slab h2 .q{color:var(--ash);}
.srcnote{margin-top:1.2328767123vw;font-family:var(--ff-mono);font-size:0.7876712329vw;letter-spacing:.03em;color:var(--slate);}
.srcnote a{text-decoration:underline;text-underline-offset:0.2054794521vw;}
.dark .srcnote, .slab .srcnote{color:var(--ash);}
.microcopy{margin-top:1.5068493151vw;text-align:center;margin-left:auto;margin-right:auto;font-family:var(--ff-mono);font-size:0.8219178082vw;letter-spacing:.03em;color:var(--slate);}
.tone-a{background:var(--paper);}
.tone-b{background:var(--paper-2);}
.tone-c{background:var(--paper-3);}
.tone-a + .tone-a{box-shadow:inset 0 0.0684931507vw 0 var(--line);}
.ctaband{padding:clamp(2.0547945205vw,4vw,3.8356164384vw) 0;}
.chips{display:flex;flex-wrap:wrap;gap:0.6164383562vw;}
.chips.center{justify-content:center;}
.chips span{font-family:var(--ff-mono);font-size:0.8219178082vw;letter-spacing:.03em;background:var(--paper-3);color:var(--ink);padding:0.6164383562vw 1.0273972603vw;border-radius:var(--r-pill);}
.dark .chips span, .slab .chips span{background:rgba(250,248,242,.10);color:var(--paper);}
.statrow{display:grid;grid-template-columns:repeat(3, 1fr);gap:clamp(1.3698630137vw,3vw,3.0136986301vw);}
.statrow b{display:block;font-size:clamp(2.1917808219vw,3.8vw,3.5616438356vw);font-weight:500;letter-spacing:-.02em;line-height:1;}
.statrow span{display:block;margin-top:0.8904109589vw;font-family:var(--ff-mono);font-size:0.8219178082vw;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);}
.dark .statrow span, .slab .statrow span{color:var(--ash);}
.dark .statrow b, .slab .statrow b{color:var(--paper);}
.ig{display:grid;grid-template-columns:repeat(3, 1fr);gap:0.0684931507vw;background:var(--line);border-radius:var(--r-card);overflow:hidden;}
.ig > div{background:var(--paper);padding:2.0547945205vw 1.9178082192vw 2.3287671233vw;}
.ig .ic{width:2.7397260274vw;height:2.7397260274vw;border-radius:0.8219178082vw;background:var(--ink);color:var(--fluro);display:grid;place-items:center;margin-bottom:1.3698630137vw;}
.ig .ic svg{width:1.4383561644vw;height:1.4383561644vw;display:block;}
.ig h3{font-size:1.301369863vw;font-weight:700;letter-spacing:-.008em;margin-bottom:0.6164383562vw;}
.ig p{font-size:0.9931506849vw;line-height:1.6;color:var(--slate);}
.tone-b .ig{background:var(--line);}
.tone-b .ig > div{background:var(--paper-2);}
.tone-c .ig > div{background:var(--paper-3);}
.mc{border-radius:var(--r-card);overflow:hidden;}
.mc .mc-media{background:var(--ink);padding:clamp(1.095890411vw,2.2vw,2.1917808219vw);overflow-x:auto;}
.mc .mc-media svg{display:block;width:100%;height:auto;}
.mc .mc-body{background:var(--paper-2);padding:clamp(1.5068493151vw,2.6vw,2.0547945205vw) clamp(1.6438356164vw,2.8vw,2.3287671233vw) clamp(1.7808219178vw,3vw,2.3287671233vw);}
.mc .mc-body h3{font-size:1.301369863vw;font-weight:700;letter-spacing:-.008em;margin-bottom:0.6849315068vw;}
.mc .mc-body p{font-size:1.0273972603vw;line-height:1.65;color:var(--slate);}
.tone-b .mc .mc-body{background:var(--paper-3);}
.ctabar{background:var(--paper-3);border-radius:var(--r-card);padding:clamp(1.6438356164vw,2.8vw,2.1917808219vw) clamp(1.7808219178vw,3vw,2.4657534247vw);display:flex;align-items:center;gap:clamp(1.3698630137vw,3vw,2.4657534247vw);flex-wrap:wrap;}
.ctabar .mk{width:3.1506849315vw;height:auto;flex:0 0 auto;color:var(--ink);}
.ctabar .mk svg{width:100%;height:auto;display:block;}
.ctabar p{flex:1 1 20.5479452055vw;max-width:34ch;font-size:clamp(1.301369863vw,2vw,1.6438356164vw);font-weight:500;letter-spacing:-.012em;line-height:1.28;}
.ctabar .acts{display:flex;gap:0.6849315068vw;flex-wrap:wrap;}
.tone-c .ctabar{background:var(--paper);}
.slab{background:var(--ink);color:var(--paper);border-radius:var(--r-card);padding:clamp(2.3287671233vw,4vw,3.8356164384vw) clamp(1.7808219178vw,3.4vw,3.2876712329vw) clamp(2.4657534247vw,4.2vw,3.9726027397vw);}
.slab h2, .slab h3{color:var(--paper);}
.slab .eyebrow{color:var(--ink);}
.slab .lede, .slab p{color:var(--ash);}
.vs-switch{display:inline-flex;background:rgba(250,248,242,.08);border-radius:var(--r-pill);padding:0.2739726027vw;gap:0.2739726027vw;}
.vs-switch button{font-family:var(--ff-mono);font-size:0.7876712329vw;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:0.7534246575vw 1.3698630137vw;border-radius:var(--r-pill);color:var(--stone);transition:background var(--dur-hover), color var(--dur-hover);}
.vs-switch button[aria-selected="true"]{background:var(--paper);color:var(--ink);}
.vs-switch button.accent[aria-selected="true"]{background:var(--fluro);color:var(--ink);}
.vs-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:0.0684931507vw;background:var(--char);border-radius:var(--r-inner);overflow:hidden;}
.vs-grid > div{background:var(--graphite);padding:1.3698630137vw 1.3698630137vw 1.5068493151vw;display:flex;flex-direction:column;gap:1.0273972603vw;}
.vs-grid b{font-weight:500;font-size:1.0273972603vw;line-height:1.4;color:var(--paper);}
.vs-grid > div.no b{color:var(--stone);}
.vs-grid .m{width:1.5068493151vw;height:1.5068493151vw;display:none;}
.vs-grid .m svg{width:100%;height:100%;display:block;}
.vs-grid > div:not(.no) .m-yes{display:block;color:var(--ok-dark);}
.vs-grid > div.no .m-no{display:block;color:var(--alert-dark);}
.gnav{position:fixed;top:0;left:0;right:0;z-index:60;padding:0 var(--pad);transition:padding var(--dur-reveal) var(--ease);}
.gnav-in{position:relative;max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.6438356164vw;padding:1.6438356164vw 0;border-radius:0;background:transparent;transition:padding var(--dur-reveal) var(--ease),
              background var(--dur-reveal) var(--ease),
              border-radius var(--dur-reveal) var(--ease),
              box-shadow var(--dur-reveal) var(--ease);}
.gnav.stuck{padding:0.6849315068vw var(--pad);}
.gnav.stuck .gnav-in{padding:0.6164383562vw 0.6164383562vw 0.6164383562vw 1.7808219178vw;border-radius:var(--r-pill);background:rgba(24,25,16,.78);-webkit-backdrop-filter:blur(1.3698630137vw) saturate(150%);backdrop-filter:blur(1.3698630137vw) saturate(150%);box-shadow:inset 0 0.0684931507vw 0 rgba(250,248,242,.10);}
.gnav.on-dark.stuck .gnav-in{background:rgba(250,248,242,.07);box-shadow:inset 0 0.0684931507vw 0 rgba(250,248,242,.16);}
.gnav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:clamp(1.2328767123vw, 2.2vw, 2.0547945205vw);white-space:nowrap;}
.gnav-links a{font-family:var(--ff-mono);font-size:0.9246575342vw;letter-spacing:.08em;text-transform:uppercase;color:rgba(250,248,242,.74);transition:color var(--dur-hover);}
.gnav-links a:hover, .gnav-links a[aria-current]{color:var(--fluro);}
.gnav-right{display:flex;align-items:center;gap:0.9589041096vw;}
.gnav-right .tel{font-family:var(--ff-mono);font-size:0.9246575342vw;letter-spacing:.04em;color:rgba(250,248,242,.62);transition:color var(--dur-hover);}
.gnav-right .tel:hover{color:var(--fluro);}
.gnav .btn-cta{background:rgba(250,248,242,.12);color:var(--paper);}
.gnav .btn-cta:hover{background:rgba(235,255,0,.16);color:var(--fluro);}
.gnav.stuck .btn-cta{background:var(--fluro);color:var(--ink);}
.gnav.stuck .btn-cta:hover{background:var(--fluro-lift);color:var(--ink);}
.gnav .btn:hover{transform:none;}
.brandflip{display:block;flex:0 0 auto;width:9.3150684932vw;height:2.3287671233vw;transition:width var(--dur-reveal) var(--ease);}
.gnav.stuck .brandflip{width:2.3287671233vw;}
.brandflip .flip{position:relative;display:block;width:100%;height:100%;}
.brandflip .face{position:absolute;inset:0;display:grid;place-items:center start;transform-origin:left center;transition:transform var(--dur-reveal) var(--ease),
              opacity calc(var(--dur-reveal) / 2) var(--ease);color:var(--paper);}
.brandflip .face.back{transform:scaleX(0);opacity:0;}
.gnav.stuck .brandflip .face.front{transform:scaleX(0);opacity:0;}
.gnav.stuck .brandflip .face.back{transform:scaleX(1);opacity:1;}
.brandflip .face svg,
.brandflip .face .custom-logo,
.f-word svg{height:100%;width:auto;display:block;shape-rendering:geometricPrecision;}
.brandflip .face .custom-logo{filter:brightness(0) invert(1);}
.brandflip .mk{position:relative;display:block;height:100%;}
.brandflip .tm{position:absolute;top:0;left:100%;margin-left:0.3424657534vw;font-family:var(--ff);font-size:0.7534246575vw;font-weight:700;letter-spacing:0;line-height:1;color:currentColor;opacity:.78;pointer-events:none;transition:opacity var(--dur-hover) ease;}
.gnav.stuck .brandflip .tm{opacity:0;}
.gnav-burger{display:none;}
.gnav-burger i{display:block;width:1.1643835616vw;height:0.102739726vw;background:var(--paper);transition:transform var(--dur-hover) var(--ease);}
.gnav-burger.on i:nth-child(1){transform:translateY(0.2226027397vw) rotate(45deg);}
.gnav-burger.on i:nth-child(2){transform:translateY(-0.2226027397vw) rotate(-45deg);}
.gnav-panel{position:fixed;inset:0;z-index:55;background:var(--ink-deep);padding:0 var(--pad);display:flex;flex-direction:column;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--dur-hover) ease;}
.gnav-panel.open{opacity:1;pointer-events:auto;}
.gnav-panel a{display:block;padding:0.7534246575vw 0;font-size:clamp(2.0547945205vw, 9vw, 3.0136986301vw);font-weight:500;letter-spacing:-.016em;color:var(--paper);}
.gnav-panel a:hover{color:var(--fluro);}
.gnav-panel .tel{font-family:var(--ff-mono);font-size:1.0273972603vw;letter-spacing:.04em;color:var(--ash);margin-top:2.0547945205vw;padding:0;}
@media (prefers-reduced-motion: reduce){
.gnav, .gnav-in, .brandflip, .brandflip .flip, .gnav-panel{transition:none;}
}
.gnav-panel{display:none;}
.trust{display:flex;align-items:center;gap:clamp(1.3698630137vw,3vw,2.7397260274vw);flex-wrap:wrap;}
.trust .tiles{display:flex;flex-wrap:wrap;gap:0.0684931507vw;background:var(--line);border-radius:var(--r-inner);overflow:hidden;}
.trust .tiles span{background:var(--paper);color:var(--ink);padding:0.8904109589vw 1.1643835616vw;display:flex;align-items:center;gap:0.6164383562vw;font-family:var(--ff-mono);font-size:0.7876712329vw;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.trust .tiles i{width:1.0273972603vw;height:1.0273972603vw;display:block;color:var(--ok);}
.trust .tiles i svg{width:100%;height:100%;display:block;}
.trust .say{font-size:1.1643835616vw;font-weight:500;letter-spacing:-.008em;}
.trust .lnks{display:flex;gap:1.2328767123vw;flex-wrap:wrap;font-size:0.9589041096vw;color:var(--slate);}
.trust .lnks a{text-decoration:underline;text-underline-offset:0.2739726027vw;}
.trust .lnks a:hover{color:var(--ink);}
.dark .trust .tiles{background:var(--char);}
.dark .trust .tiles span{background:var(--graphite);color:var(--paper);}
.dark .trust .tiles i{color:var(--ok-dark);}
.dark .trust .say{color:var(--paper);}
.dark .trust .lnks{color:var(--ash);}
.dark .trust .lnks a:hover{color:var(--fluro);}
/* Static template lengths, SVG and runtime styles excluded. */
[style="font-size:15px;line-height:1.66;color:var(--slate)"]{font-size:1.0273972603vw !important;}
[style="margin-top:12px;max-width:22ch"]{margin-top:0.8219178082vw !important;}
[style="margin-top:16px"]{margin-top:1.095890411vw !important;}
[style="margin-top:18px"]{margin-top:1.2328767123vw !important;}
[style="margin-top:44px"]{margin-top:3.0136986301vw !important;}
[style="margin-top:clamp(46px,5.5vw,80px)"]{margin-top:clamp(3.1506849315vw,5.5vw,5.4794520548vw) !important;}
}