
    .sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
      border:1px solid color-mix(in srgb,currentColor 50%,transparent);
      border-radius:2px;box-sizing:border-box;overflow:hidden}
    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
    html.sc-dc-streaming .sc-placeholder,
    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
      background:color-mix(in srgb,currentColor 5%,transparent);
      border-color:transparent}
    html.sc-dc-streaming .sc-placeholder::before,
    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
      position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
      background:color-mix(in srgb,currentColor 8%,transparent)}
    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
      color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
      border-radius:2px;box-sizing:border-box;color:transparent;
      user-select:none}
    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
      color:color-mix(in srgb,currentColor 50%,transparent);
      background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
      padding:0 3px}
    .sc-host.sc-has-error{position:relative}
    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
      border-radius:4px;white-space:pre-wrap;pointer-events:none}
    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
    @media print {
      @page { margin: 0.5cm; }
      figure, table { break-inside: avoid; }
      #dc-root, #dc-root > .sc-host { height: auto; }
      *, *::before, *::after {
        print-color-adjust: exact; -webkit-print-color-adjust: exact;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        animation-delay: -99s !important; animation-duration: .001s !important;
        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
        animation-play-state: running !important; transition-duration: 0s !important;
      }
    }
  
x-dc{display:none!important}

html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}
/* PRECISION — type families.

   Two faces, both with some character in them. This is deliberate: the v1
   system ran on Inter Tight and Geist Mono, and it read as machine-made
   because those two are the house faces of every generated landing page.

   Familjen Grotesk (Letters from Sweden) does display and body. It is a
   grotesk, so it stays credible at small sizes and in a table, but it has
   quirks a neutral grotesk doesn't — a curled leg on the R, a single-storey
   g in italic, tight warm counters. Set it TIGHT at display sizes
   (-0.032em) and let it run normal below 24px.

   Spline Sans Mono does labels, dates, capacities and any figure that wants
   to read as a measurement. Never body copy.

   Both are variable and both carry a true italic. Weights used: 500 for text,
   700 for display. Both are open-licence (SIL OFL), so they can be self-hosted
   without a purchase — see the note at the foot of this file.

   Söhne and Suisse Int'l, named in the original brand document, were never
   licensed. They are no longer the intent — the system names what it has.

   Never JetBrains Mono — PRIMAL owns it. Never Barlow, in any width.
   Never Inter, in any width, ever again. */

/* Familjen Grotesk — display and body */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/4ff5a0ae-8035-48c9-870a-848d477bf7bb.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/9a628a3f-62a9-44b8-9a05-6a9f9b86aa89.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/d1c1c42b-2e17-480e-bcda-5e86c8db044d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/0325f8a9-89bb-471b-8d9e-546113980ef6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Spline Sans Mono — labels, dates, measurements */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/30ba0dee-319d-4008-8912-223ee45a26c7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/6d8e4cdf-2537-4feb-bcab-e924b126d5c4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/ae0e9192-5c50-40f9-9aa5-b2a6276e86b4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/bce82c99-15d5-4522-ad80-880a6faf0aa9.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* SELF-HOSTING. Both families are SIL OFL, so a production build should serve
   them itself rather than depend on Google. Download both from Google Fonts,
   drop the woff2 files in assets/fonts, and change the eight src: url(…)
   values above to local paths. The family names, weights and unicode ranges
   stay exactly as they are; nothing else in the system changes. */

:root {
  --pr-font-display: "Familjen Grotesk", system-ui, -apple-system, sans-serif;
  --pr-font-body:    "Familjen Grotesk", system-ui, -apple-system, sans-serif;
  --pr-font-mono:    "Spline Sans Mono", ui-monospace, monospace;
}

/* PRECISION — colour

   The events are the loud thing. The system is the warm quiet thing that
   holds them.

   v1 ran one blue accent on cool grey paper and banned everything else. It
   was defensible and it was cold, and it made an events company look like an
   audit firm. v2 keeps the discipline but moves the ground warm and gives the
   events a real palette to shout in.

   RATIO — 60 Cream · 25 Ink · 15 Field.
   Field means one of the three event colours below, used as a full block of
   colour, not as a tint or a border or a 4px accent line.

   THE THREE FIELDS. Each is a background that carries type, never a text
   colour on cream (Sea Deep is the exception, and it is the link colour).
     Sun    #FFC531  ink on sun,   11.5:1 — the hero field, the loudest
     Coral  #EF5B33  cream on it,   4.1:1 — live, now, on-site
     Sea    #12788C  cream on it,   5.3:1 — booked, scheduled, ahead

   Use ONE field per view as the dominant. Two is a decision. Three is a
   circus, and the only place it's allowed is a card row where each card is a
   different event.

   Ink is a field too, and it's the one to reach for when the content is
   serious — pricing, contracts, the close of a deck. */

:root {
  /* Ground — warm, not grey. The paper has yellow in it. */
  --pr-cream:       #FFFDF7;
  --pr-cream-sunk:  #F3EFE2;
  --pr-cream-edge:  #E7E1CE;

  --pr-ink:         #1C1B18;
  --pr-ink-raised:  #2A2823;

  /* Fields */
  --pr-sun:         #FFC531;
  --pr-sun-press:   #F0B01C;
  --pr-coral:       #EF5B33;
  --pr-coral-press: #D64720;
  --pr-sea:         #12788C;
  --pr-sea-press:   #0E5F70;

  /* Sea Deep — the one field colour legible as type on cream. Links, and
     small interactive text. 6.6:1. */
  --pr-sea-deep:    #0E5F70;

  /* Warm greys. Both mixed toward the cream, never neutral. */
  --pr-grey:        #6E6A61;
  --pr-grey-2:      #918C81;
  --pr-rule:        #E2DCC9;
  --pr-rule-ink:    #38352E;

  /* Semantic — cream ground (the default) */
  --pr-text:         var(--pr-ink);
  --pr-text-2:       var(--pr-grey);
  --pr-text-3:       var(--pr-grey-2);
  --pr-surface:      var(--pr-cream);
  --pr-surface-2:    var(--pr-cream-sunk);
  --pr-accent:       var(--pr-sea-deep);
  --pr-accent-press: #0A4B59;
  --pr-focus:        var(--pr-sea-deep);
  --pr-hairline:     var(--pr-rule);

  /* Event status. Coral is happening, Sea is coming, grey is done. */
  --pr-status-live:  var(--pr-coral);
  --pr-status-sale:  var(--pr-sea);
  --pr-status-build: var(--pr-grey);
  --pr-status-done:  var(--pr-grey-2);
}

/* Field scopes. Put data-field="sun" on a section and its type, rules and
   links resolve to the legible pair automatically. Never hand-pick. */

[data-field="sun"] {
  --pr-text: var(--pr-ink);
  --pr-text-2: #6A5410;
  --pr-text-3: #856C1D;
  --pr-surface: var(--pr-sun);
  --pr-surface-2: #F7BB22;
  --pr-accent: var(--pr-ink);
  --pr-accent-press: #000;
  --pr-rule: rgba(28,27,24,.18);
  --pr-focus: var(--pr-ink);
  color: var(--pr-text);
  background: var(--pr-surface);
}

[data-field="coral"] {
  --pr-text: var(--pr-cream);
  --pr-text-2: rgba(255,253,247,.82);
  --pr-text-3: rgba(255,253,247,.66);
  --pr-surface: var(--pr-coral);
  --pr-surface-2: #E5522B;
  --pr-accent: var(--pr-cream);
  --pr-accent-press: #FFF;
  --pr-rule: rgba(255,253,247,.26);
  --pr-focus: var(--pr-cream);
  color: var(--pr-text);
  background: var(--pr-surface);
}

[data-field="sea"] {
  --pr-text: var(--pr-cream);
  --pr-text-2: rgba(255,253,247,.82);
  --pr-text-3: rgba(255,253,247,.64);
  --pr-surface: var(--pr-sea);
  --pr-surface-2: #106B7D;
  --pr-accent: var(--pr-cream);
  --pr-accent-press: #FFF;
  --pr-rule: rgba(255,253,247,.24);
  --pr-focus: var(--pr-cream);
  color: var(--pr-text);
  background: var(--pr-surface);
}

[data-field="ink"] {
  --pr-text: var(--pr-cream);
  --pr-text-2: #A8A29A;
  --pr-text-3: #837D74;
  --pr-surface: var(--pr-ink);
  --pr-surface-2: var(--pr-ink-raised);
  --pr-accent: var(--pr-sun);
  --pr-accent-press: var(--pr-sun-press);
  --pr-rule: var(--pr-rule-ink);
  --pr-focus: var(--pr-sun);
  color: var(--pr-text);
  background: var(--pr-surface);
}

/* Back-compat: v1 shipped data-ground="ink". Same thing. */
[data-ground="ink"], .pr-ink-ground {
  --pr-text: var(--pr-cream);
  --pr-text-2: #A8A29A;
  --pr-text-3: #837D74;
  --pr-surface: var(--pr-ink);
  --pr-surface-2: var(--pr-ink-raised);
  --pr-accent: var(--pr-sun);
  --pr-accent-press: var(--pr-sun-press);
  --pr-rule: var(--pr-rule-ink);
  --pr-focus: var(--pr-sun);
  color: var(--pr-text);
  background: var(--pr-surface);
}

/* v1 aliases. Kept so anything not yet migrated still resolves to something
   legible rather than to nothing. Do not use these in new work. */
:root {
  --pr-paper:         var(--pr-cream);
  --pr-paper-sunk:    var(--pr-cream-sunk);
  --pr-signal:        var(--pr-sea-deep);
  --pr-signal-press:  var(--pr-sea-press);
  --pr-signal-tint:   var(--pr-cream-sunk);
  --pr-signal-lift:   var(--pr-sun);
  --pr-graphite:      var(--pr-grey);
  --pr-steel:         var(--pr-grey-2);
  --pr-hairline-dark: var(--pr-rule-ink);
}

/* RETIRED — do not reintroduce.
   --pr-signal #0761EA  the v1 single accent on cool grey paper. Cut at v2:
                        one cold blue could not carry an events calendar.
   --pr-paper  #F1EFEA  the v1 cool paper. Cream replaced it.
   Signal cyan #00CFE8, navy #1B2A5B, the mark's #F3135D and its
   blue-to-blue gradient. All still out. */

/* PRECISION — type

   Sentence case everywhere, including headlines. UPPERCASE is for mono
   labels only — a date, a status, a market. Never a headline, never a
   sentence.

   Display is set TIGHT: -0.032em and a line-height under 1. Familjen
   Grotesk has warm close counters and it wants to be crowded at size; loose
   tracking is what made v1 look generic. Below 24px, tracking goes to normal
   and stays there.

   Hierarchy comes from size, weight and colour field — not from six weights.
   Two weights do everything: 500 for text, 700 for anything display. */

:root {
  --pr-display-size:   clamp(46px, 6.4vw, 104px);
  --pr-display-lh:     0.98; /* @kind font */
  --pr-display-ls:     -0.032em;

  --pr-h1-size:        clamp(34px, 3.8vw, 58px);
  --pr-h1-lh:          1.02; /* @kind font */
  --pr-h1-ls:          -0.028em;

  --pr-h2-size:        clamp(25px, 2.3vw, 34px);
  --pr-h2-lh:          1.1; /* @kind font */
  --pr-h2-ls:          -0.024em;

  --pr-h3-size:        21px;
  --pr-h3-lh:          1.16; /* @kind font */
  --pr-h3-ls:          -0.018em;

  --pr-body-size:      16.5px;
  --pr-body-lh:        1.58; /* @kind font */
  --pr-body-measure:   64ch;

  --pr-small-size:     14.5px;
  --pr-small-lh:       1.5; /* @kind font */

  --pr-label-size:     11px;
  --pr-label-lh:       1; /* @kind font */
  --pr-label-ls:       0.08em;

  /* Figures are mono and tight — they should read as measurements. */
  --pr-figure-size:    clamp(38px, 5.2vw, 84px);
  --pr-figure-ls:      -0.04em;

  --pr-weight-regular: 400;
  --pr-weight-medium:  500;
  --pr-weight-bold:    700;
}

.pr-display { font: var(--pr-weight-bold) var(--pr-display-size)/var(--pr-display-lh) var(--pr-font-display); letter-spacing: var(--pr-display-ls); }
.pr-h1      { font: var(--pr-weight-bold) var(--pr-h1-size)/var(--pr-h1-lh) var(--pr-font-display); letter-spacing: var(--pr-h1-ls); }
.pr-h2      { font: var(--pr-weight-bold) var(--pr-h2-size)/var(--pr-h2-lh) var(--pr-font-display); letter-spacing: var(--pr-h2-ls); }
.pr-h3      { font: var(--pr-weight-medium) var(--pr-h3-size)/var(--pr-h3-lh) var(--pr-font-display); letter-spacing: var(--pr-h3-ls); }
.pr-body    { font: var(--pr-weight-regular) var(--pr-body-size)/var(--pr-body-lh) var(--pr-font-body); max-width: var(--pr-body-measure); }
.pr-small   { font: var(--pr-weight-regular) var(--pr-small-size)/var(--pr-small-lh) var(--pr-font-body); color: var(--pr-text-2); }
.pr-label   { font: var(--pr-weight-medium) var(--pr-label-size)/var(--pr-label-lh) var(--pr-font-mono); letter-spacing: var(--pr-label-ls); text-transform: uppercase; }
.pr-figure  { font: var(--pr-weight-medium) var(--pr-figure-size)/1 var(--pr-font-display); letter-spacing: var(--pr-figure-ls); font-variant-numeric: tabular-nums; }
.pr-figure-mono { font: var(--pr-weight-regular) var(--pr-figure-size)/1 var(--pr-font-mono); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }

/* PRECISION — space. 4pt scale. Empty space is the confidence signal; protect it. */

:root {
  --pr-space-1:  4px;
  --pr-space-2:  8px;
  --pr-space-3:  12px;
  --pr-space-4:  16px;
  --pr-space-6:  24px;
  --pr-space-8:  32px;
  --pr-space-12: 48px;
  --pr-space-16: 64px;
  --pr-space-24: 96px;
  --pr-space-32: 128px;

  --pr-margin-desk: 96px;
  --pr-margin-mob:  24px;
  --pr-gutter:      24px;
  --pr-max-width:   1320px;
  --pr-columns:     12; /* @kind other */
}

/* PRECISION — geometry

   v1 banned radius, shadow and gradient outright. That rule is why the system
   read as cold. v2 allows generous radius and one soft warm shadow, and still
   bans gradients and glow.

   THE TWO RADII. Only two, so the system stays recognisable:
     Pill   999px — anything you click or that reports a status.
                    Buttons, tags, chips, pagination, the status dot.
     Block   20px — anything that holds content. Cards, panels, hero blocks,
                    image wells, the whole colour field.
   Nothing in between. No 4px, no 8px, no 12px. If it looks wrong at 20px the
   element is the wrong size.

   Small parts (checkbox, swatch, 40px-and-under wells) get 8px, because a
   20px radius on a 16px box is a circle.

   SHADOW. One, warm, and only for things that genuinely float above the
   page — dialog, toast, tooltip, dropdown. Never on a card sitting in the
   flow; cards separate by colour, not by lift. The shadow is brown-black,
   never neutral or blue.

   Still banned: gradients, glow, bevel, inner shadow, texture overlays. */

:root {
  --pr-radius-pill:  999px;
  --pr-radius-block: 20px;
  --pr-radius-small: 8px;

  /* v1 names, remapped so old components keep working. */
  --pr-radius-ctrl:  var(--pr-radius-pill);
  --pr-radius-surf:  var(--pr-radius-block);

  --pr-hairline-w:   1px;
  --pr-rule-strong:  2px;
  --pr-border:       var(--pr-hairline-w) solid var(--pr-rule);

  --pr-shadow-float: 0 2px 6px rgba(44,34,14,.06), 0 14px 34px rgba(44,34,14,.13);
  --pr-focus-ring:   0 0 0 2px var(--pr-surface), 0 0 0 4px var(--pr-focus);

  /* Diagonal hatch. The one texture the system owns — it stands in for
     photography that hasn't been shot yet, and marks a build-in-progress
     state. Inherits the current field's rule colour. */
  --pr-hatch: repeating-linear-gradient(-45deg, transparent 0 7px, var(--pr-rule) 7px 8px);

  /* Hi-vis stripe — operations device. Status only, max 8px tall. */
  --pr-hivis: repeating-linear-gradient(45deg, var(--pr-coral) 0 6px, transparent 6px 12px);
}

/* PRECISION — motion

   v1's rule was "snap, never bounce", which gave the whole system a clipped
   180ms feel. v2 keeps snap for anything that reports state, and allows one
   soft overshoot for things that arrive — a card entering, a dialog opening,
   a counter landing.

   Overshoot is subtle: it settles about 3% past and comes back. It is not a
   bounce, it does not wobble, and it never repeats.

   PRESS. Everything clickable shrinks to 0.97 on press and lifts back. This
   is the single most human thing in the system — do not skip it.

   Still banned: parallax, float, pulse, spin, typewriter, anything on loop,
   and any animation longer than 320ms. */

:root {
  --pr-dur-fast: 130ms; /* @kind other */
  --pr-dur-base: 190ms; /* @kind other */
  --pr-dur-slow: 280ms; /* @kind other */

  --pr-ease:       cubic-bezier(.2, 0, 0, 1); /* @kind other */
  --pr-ease-out:   cubic-bezier(.32, .72, 0, 1); /* @kind other */
  --pr-ease-over:  cubic-bezier(.34, 1.32, .64, 1); /* @kind other */

  --pr-transition:  var(--pr-dur-base) var(--pr-ease); /* @kind other */
  --pr-transition-arrive: var(--pr-dur-slow) var(--pr-ease-over); /* @kind other */

  --pr-press-scale: 0.97; /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pr-dur-fast: 1ms; /* @kind other */
    --pr-dur-base: 1ms; /* @kind other */
    --pr-dur-slow: 1ms; /* @kind other */
    --pr-press-scale: 1; /* @kind other */
    --pr-ease-over: linear; /* @kind other */
  }
}

/* PRECISION — base. Minimal reset plus the globals the brand demands:
   tabular figures, left alignment, warm ground. */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--pr-cream);
  color: var(--pr-ink);
  font: var(--pr-weight-regular) var(--pr-body-size)/var(--pr-body-lh) var(--pr-font-body);
  font-variant-numeric: tabular-nums;
  text-align: left;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--pr-weight-bold); letter-spacing: -0.024em; text-wrap: balance; }
p { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Links carry a Sea Deep underline that thickens on hover. On a colour field
   they resolve to that field's accent automatically. */
a {
  color: var(--pr-accent);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 currentColor;
  transition: box-shadow var(--pr-transition), color var(--pr-transition);
}
a:hover { color: var(--pr-accent-press); box-shadow: inset 0 -2px 0 currentColor; }
a:active { color: var(--pr-accent-press); }

:focus-visible { outline: none; box-shadow: var(--pr-focus-ring); }

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

hr { border: 0; border-top: var(--pr-hairline-w) solid var(--pr-rule); margin: 0; }

/* PRECISION — design system entry point. Link this one file. v2 · 18 Aug 2026 */
/* PRECISION — type families.

   Two faces, both with some character in them. This is deliberate: the v1
   system ran on Inter Tight and Geist Mono, and it read as machine-made
   because those two are the house faces of every generated landing page.

   Familjen Grotesk (Letters from Sweden) does display and body. It is a
   grotesk, so it stays credible at small sizes and in a table, but it has
   quirks a neutral grotesk doesn't — a curled leg on the R, a single-storey
   g in italic, tight warm counters. Set it TIGHT at display sizes
   (-0.032em) and let it run normal below 24px.

   Spline Sans Mono does labels, dates, capacities and any figure that wants
   to read as a measurement. Never body copy.

   Both are variable and both carry a true italic. Weights used: 500 for text,
   700 for display. Both are open-licence (SIL OFL), so they can be self-hosted
   without a purchase — see the note at the foot of this file.

   Söhne and Suisse Int'l, named in the original brand document, were never
   licensed. They are no longer the intent — the system names what it has.

   Never JetBrains Mono — PRIMAL owns it. Never Barlow, in any width.
   Never Inter, in any width, ever again. */

/* Familjen Grotesk — display and body */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/4ff5a0ae-8035-48c9-870a-848d477bf7bb.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/9a628a3f-62a9-44b8-9a05-6a9f9b86aa89.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/d1c1c42b-2e17-480e-bcda-5e86c8db044d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/0325f8a9-89bb-471b-8d9e-546113980ef6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Spline Sans Mono — labels, dates, measurements */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/30ba0dee-319d-4008-8912-223ee45a26c7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/6d8e4cdf-2537-4feb-bcab-e924b126d5c4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/ae0e9192-5c50-40f9-9aa5-b2a6276e86b4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/bce82c99-15d5-4522-ad80-880a6faf0aa9.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* SELF-HOSTING. Both families are SIL OFL, so a production build should serve
   them itself rather than depend on Google. Download both from Google Fonts,
   drop the woff2 files in assets/fonts, and change the eight src: url(…)
   values above to local paths. The family names, weights and unicode ranges
   stay exactly as they are; nothing else in the system changes. */

:root {
  --pr-font-display: "Familjen Grotesk", system-ui, -apple-system, sans-serif;
  --pr-font-body:    "Familjen Grotesk", system-ui, -apple-system, sans-serif;
  --pr-font-mono:    "Spline Sans Mono", ui-monospace, monospace;
}

/* PRECISION — colour

   The events are the loud thing. The system is the warm quiet thing that
   holds them.

   v1 ran one blue accent on cool grey paper and banned everything else. It
   was defensible and it was cold, and it made an events company look like an
   audit firm. v2 keeps the discipline but moves the ground warm and gives the
   events a real palette to shout in.

   RATIO — 60 Cream · 25 Ink · 15 Field.
   Field means one of the three event colours below, used as a full block of
   colour, not as a tint or a border or a 4px accent line.

   THE THREE FIELDS. Each is a background that carries type, never a text
   colour on cream (Sea Deep is the exception, and it is the link colour).
     Sun    #FFC531  ink on sun,   11.5:1 — the hero field, the loudest
     Coral  #EF5B33  cream on it,   4.1:1 — live, now, on-site
     Sea    #12788C  cream on it,   5.3:1 — booked, scheduled, ahead

   Use ONE field per view as the dominant. Two is a decision. Three is a
   circus, and the only place it's allowed is a card row where each card is a
   different event.

   Ink is a field too, and it's the one to reach for when the content is
   serious — pricing, contracts, the close of a deck. */

:root {
  /* Ground — warm, not grey. The paper has yellow in it. */
  --pr-cream:       #FFFDF7;
  --pr-cream-sunk:  #F3EFE2;
  --pr-cream-edge:  #E7E1CE;

  --pr-ink:         #1C1B18;
  --pr-ink-raised:  #2A2823;

  /* Fields */
  --pr-sun:         #FFC531;
  --pr-sun-press:   #F0B01C;
  --pr-coral:       #EF5B33;
  --pr-coral-press: #D64720;
  --pr-sea:         #12788C;
  --pr-sea-press:   #0E5F70;

  /* Sea Deep — the one field colour legible as type on cream. Links, and
     small interactive text. 6.6:1. */
  --pr-sea-deep:    #0E5F70;

  /* Warm greys. Both mixed toward the cream, never neutral. */
  --pr-grey:        #6E6A61;
  --pr-grey-2:      #918C81;
  --pr-rule:        #E2DCC9;
  --pr-rule-ink:    #38352E;

  /* Semantic — cream ground (the default) */
  --pr-text:         var(--pr-ink);
  --pr-text-2:       var(--pr-grey);
  --pr-text-3:       var(--pr-grey-2);
  --pr-surface:      var(--pr-cream);
  --pr-surface-2:    var(--pr-cream-sunk);
  --pr-accent:       var(--pr-sea-deep);
  --pr-accent-press: #0A4B59;
  --pr-focus:        var(--pr-sea-deep);
  --pr-hairline:     var(--pr-rule);

  /* Event status. Coral is happening, Sea is coming, grey is done. */
  --pr-status-live:  var(--pr-coral);
  --pr-status-sale:  var(--pr-sea);
  --pr-status-build: var(--pr-grey);
  --pr-status-done:  var(--pr-grey-2);
}

/* Field scopes. Put data-field="sun" on a section and its type, rules and
   links resolve to the legible pair automatically. Never hand-pick. */

[data-field="sun"] {
  --pr-text: var(--pr-ink);
  --pr-text-2: #6A5410;
  --pr-text-3: #856C1D;
  --pr-surface: var(--pr-sun);
  --pr-surface-2: #F7BB22;
  --pr-accent: var(--pr-ink);
  --pr-accent-press: #000;
  --pr-rule: rgba(28,27,24,.18);
  --pr-focus: var(--pr-ink);
  color: var(--pr-text);
  background: var(--pr-surface);
}

[data-field="coral"] {
  --pr-text: var(--pr-cream);
  --pr-text-2: rgba(255,253,247,.82);
  --pr-text-3: rgba(255,253,247,.66);
  --pr-surface: var(--pr-coral);
  --pr-surface-2: #E5522B;
  --pr-accent: var(--pr-cream);
  --pr-accent-press: #FFF;
  --pr-rule: rgba(255,253,247,.26);
  --pr-focus: var(--pr-cream);
  color: var(--pr-text);
  background: var(--pr-surface);
}

[data-field="sea"] {
  --pr-text: var(--pr-cream);
  --pr-text-2: rgba(255,253,247,.82);
  --pr-text-3: rgba(255,253,247,.64);
  --pr-surface: var(--pr-sea);
  --pr-surface-2: #106B7D;
  --pr-accent: var(--pr-cream);
  --pr-accent-press: #FFF;
  --pr-rule: rgba(255,253,247,.24);
  --pr-focus: var(--pr-cream);
  color: var(--pr-text);
  background: var(--pr-surface);
}

[data-field="ink"] {
  --pr-text: var(--pr-cream);
  --pr-text-2: #A8A29A;
  --pr-text-3: #837D74;
  --pr-surface: var(--pr-ink);
  --pr-surface-2: var(--pr-ink-raised);
  --pr-accent: var(--pr-sun);
  --pr-accent-press: var(--pr-sun-press);
  --pr-rule: var(--pr-rule-ink);
  --pr-focus: var(--pr-sun);
  color: var(--pr-text);
  background: var(--pr-surface);
}

/* Back-compat: v1 shipped data-ground="ink". Same thing. */
[data-ground="ink"], .pr-ink-ground {
  --pr-text: var(--pr-cream);
  --pr-text-2: #A8A29A;
  --pr-text-3: #837D74;
  --pr-surface: var(--pr-ink);
  --pr-surface-2: var(--pr-ink-raised);
  --pr-accent: var(--pr-sun);
  --pr-accent-press: var(--pr-sun-press);
  --pr-rule: var(--pr-rule-ink);
  --pr-focus: var(--pr-sun);
  color: var(--pr-text);
  background: var(--pr-surface);
}

/* v1 aliases. Kept so anything not yet migrated still resolves to something
   legible rather than to nothing. Do not use these in new work. */
:root {
  --pr-paper:         var(--pr-cream);
  --pr-paper-sunk:    var(--pr-cream-sunk);
  --pr-signal:        var(--pr-sea-deep);
  --pr-signal-press:  var(--pr-sea-press);
  --pr-signal-tint:   var(--pr-cream-sunk);
  --pr-signal-lift:   var(--pr-sun);
  --pr-graphite:      var(--pr-grey);
  --pr-steel:         var(--pr-grey-2);
  --pr-hairline-dark: var(--pr-rule-ink);
}

/* RETIRED — do not reintroduce.
   --pr-signal #0761EA  the v1 single accent on cool grey paper. Cut at v2:
                        one cold blue could not carry an events calendar.
   --pr-paper  #F1EFEA  the v1 cool paper. Cream replaced it.
   Signal cyan #00CFE8, navy #1B2A5B, the mark's #F3135D and its
   blue-to-blue gradient. All still out. */

/* PRECISION — type

   Sentence case everywhere, including headlines. UPPERCASE is for mono
   labels only — a date, a status, a market. Never a headline, never a
   sentence.

   Display is set TIGHT: -0.032em and a line-height under 1. Familjen
   Grotesk has warm close counters and it wants to be crowded at size; loose
   tracking is what made v1 look generic. Below 24px, tracking goes to normal
   and stays there.

   Hierarchy comes from size, weight and colour field — not from six weights.
   Two weights do everything: 500 for text, 700 for anything display. */

:root {
  --pr-display-size:   clamp(46px, 6.4vw, 104px);
  --pr-display-lh:     0.98; /* @kind font */
  --pr-display-ls:     -0.032em;

  --pr-h1-size:        clamp(34px, 3.8vw, 58px);
  --pr-h1-lh:          1.02; /* @kind font */
  --pr-h1-ls:          -0.028em;

  --pr-h2-size:        clamp(25px, 2.3vw, 34px);
  --pr-h2-lh:          1.1; /* @kind font */
  --pr-h2-ls:          -0.024em;

  --pr-h3-size:        21px;
  --pr-h3-lh:          1.16; /* @kind font */
  --pr-h3-ls:          -0.018em;

  --pr-body-size:      16.5px;
  --pr-body-lh:        1.58; /* @kind font */
  --pr-body-measure:   64ch;

  --pr-small-size:     14.5px;
  --pr-small-lh:       1.5; /* @kind font */

  --pr-label-size:     11px;
  --pr-label-lh:       1; /* @kind font */
  --pr-label-ls:       0.08em;

  /* Figures are mono and tight — they should read as measurements. */
  --pr-figure-size:    clamp(38px, 5.2vw, 84px);
  --pr-figure-ls:      -0.04em;

  --pr-weight-regular: 400;
  --pr-weight-medium:  500;
  --pr-weight-bold:    700;
}

.pr-display { font: var(--pr-weight-bold) var(--pr-display-size)/var(--pr-display-lh) var(--pr-font-display); letter-spacing: var(--pr-display-ls); }
.pr-h1      { font: var(--pr-weight-bold) var(--pr-h1-size)/var(--pr-h1-lh) var(--pr-font-display); letter-spacing: var(--pr-h1-ls); }
.pr-h2      { font: var(--pr-weight-bold) var(--pr-h2-size)/var(--pr-h2-lh) var(--pr-font-display); letter-spacing: var(--pr-h2-ls); }
.pr-h3      { font: var(--pr-weight-medium) var(--pr-h3-size)/var(--pr-h3-lh) var(--pr-font-display); letter-spacing: var(--pr-h3-ls); }
.pr-body    { font: var(--pr-weight-regular) var(--pr-body-size)/var(--pr-body-lh) var(--pr-font-body); max-width: var(--pr-body-measure); }
.pr-small   { font: var(--pr-weight-regular) var(--pr-small-size)/var(--pr-small-lh) var(--pr-font-body); color: var(--pr-text-2); }
.pr-label   { font: var(--pr-weight-medium) var(--pr-label-size)/var(--pr-label-lh) var(--pr-font-mono); letter-spacing: var(--pr-label-ls); text-transform: uppercase; }
.pr-figure  { font: var(--pr-weight-medium) var(--pr-figure-size)/1 var(--pr-font-display); letter-spacing: var(--pr-figure-ls); font-variant-numeric: tabular-nums; }
.pr-figure-mono { font: var(--pr-weight-regular) var(--pr-figure-size)/1 var(--pr-font-mono); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }

/* PRECISION — space. 4pt scale. Empty space is the confidence signal; protect it. */

:root {
  --pr-space-1:  4px;
  --pr-space-2:  8px;
  --pr-space-3:  12px;
  --pr-space-4:  16px;
  --pr-space-6:  24px;
  --pr-space-8:  32px;
  --pr-space-12: 48px;
  --pr-space-16: 64px;
  --pr-space-24: 96px;
  --pr-space-32: 128px;

  --pr-margin-desk: 96px;
  --pr-margin-mob:  24px;
  --pr-gutter:      24px;
  --pr-max-width:   1320px;
  --pr-columns:     12; /* @kind other */
}

/* PRECISION — geometry

   v1 banned radius, shadow and gradient outright. That rule is why the system
   read as cold. v2 allows generous radius and one soft warm shadow, and still
   bans gradients and glow.

   THE TWO RADII. Only two, so the system stays recognisable:
     Pill   999px — anything you click or that reports a status.
                    Buttons, tags, chips, pagination, the status dot.
     Block   20px — anything that holds content. Cards, panels, hero blocks,
                    image wells, the whole colour field.
   Nothing in between. No 4px, no 8px, no 12px. If it looks wrong at 20px the
   element is the wrong size.

   Small parts (checkbox, swatch, 40px-and-under wells) get 8px, because a
   20px radius on a 16px box is a circle.

   SHADOW. One, warm, and only for things that genuinely float above the
   page — dialog, toast, tooltip, dropdown. Never on a card sitting in the
   flow; cards separate by colour, not by lift. The shadow is brown-black,
   never neutral or blue.

   Still banned: gradients, glow, bevel, inner shadow, texture overlays. */

:root {
  --pr-radius-pill:  999px;
  --pr-radius-block: 20px;
  --pr-radius-small: 8px;

  /* v1 names, remapped so old components keep working. */
  --pr-radius-ctrl:  var(--pr-radius-pill);
  --pr-radius-surf:  var(--pr-radius-block);

  --pr-hairline-w:   1px;
  --pr-rule-strong:  2px;
  --pr-border:       var(--pr-hairline-w) solid var(--pr-rule);

  --pr-shadow-float: 0 2px 6px rgba(44,34,14,.06), 0 14px 34px rgba(44,34,14,.13);
  --pr-focus-ring:   0 0 0 2px var(--pr-surface), 0 0 0 4px var(--pr-focus);

  /* Diagonal hatch. The one texture the system owns — it stands in for
     photography that hasn't been shot yet, and marks a build-in-progress
     state. Inherits the current field's rule colour. */
  --pr-hatch: repeating-linear-gradient(-45deg, transparent 0 7px, var(--pr-rule) 7px 8px);

  /* Hi-vis stripe — operations device. Status only, max 8px tall. */
  --pr-hivis: repeating-linear-gradient(45deg, var(--pr-coral) 0 6px, transparent 6px 12px);
}

/* PRECISION — motion

   v1's rule was "snap, never bounce", which gave the whole system a clipped
   180ms feel. v2 keeps snap for anything that reports state, and allows one
   soft overshoot for things that arrive — a card entering, a dialog opening,
   a counter landing.

   Overshoot is subtle: it settles about 3% past and comes back. It is not a
   bounce, it does not wobble, and it never repeats.

   PRESS. Everything clickable shrinks to 0.97 on press and lifts back. This
   is the single most human thing in the system — do not skip it.

   Still banned: parallax, float, pulse, spin, typewriter, anything on loop,
   and any animation longer than 320ms. */

:root {
  --pr-dur-fast: 130ms; /* @kind other */
  --pr-dur-base: 190ms; /* @kind other */
  --pr-dur-slow: 280ms; /* @kind other */

  --pr-ease:       cubic-bezier(.2, 0, 0, 1); /* @kind other */
  --pr-ease-out:   cubic-bezier(.32, .72, 0, 1); /* @kind other */
  --pr-ease-over:  cubic-bezier(.34, 1.32, .64, 1); /* @kind other */

  --pr-transition:  var(--pr-dur-base) var(--pr-ease); /* @kind other */
  --pr-transition-arrive: var(--pr-dur-slow) var(--pr-ease-over); /* @kind other */

  --pr-press-scale: 0.97; /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pr-dur-fast: 1ms; /* @kind other */
    --pr-dur-base: 1ms; /* @kind other */
    --pr-dur-slow: 1ms; /* @kind other */
    --pr-press-scale: 1; /* @kind other */
    --pr-ease-over: linear; /* @kind other */
  }
}

/* PRECISION — base. Minimal reset plus the globals the brand demands:
   tabular figures, left alignment, warm ground. */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--pr-cream);
  color: var(--pr-ink);
  font: var(--pr-weight-regular) var(--pr-body-size)/var(--pr-body-lh) var(--pr-font-body);
  font-variant-numeric: tabular-nums;
  text-align: left;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--pr-weight-bold); letter-spacing: -0.024em; text-wrap: balance; }
p { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Links carry a Sea Deep underline that thickens on hover. On a colour field
   they resolve to that field's accent automatically. */
a {
  color: var(--pr-accent);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 currentColor;
  transition: box-shadow var(--pr-transition), color var(--pr-transition);
}
a:hover { color: var(--pr-accent-press); box-shadow: inset 0 -2px 0 currentColor; }
a:active { color: var(--pr-accent-press); }

:focus-visible { outline: none; box-shadow: var(--pr-focus-ring); }

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

hr { border: 0; border-top: var(--pr-hairline-w) solid var(--pr-rule); margin: 0; }



html,body{margin:0;background:var(--pr-cream)}
[data-nav-panel] button[data-on="true"]{background:var(--pr-cream-sunk) !important}
@media (max-width:1100px){
  [data-r="hero"]{grid-template-columns:1fr !important}
  [data-r="hero"] img{aspect-ratio:16/9 !important}
  [data-r="logos"]{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  [data-r="steps"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  [data-r="four"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  [data-r="row"]{grid-template-columns:180px 1fr !important;gap:32px !important}
  [data-r="row3"]{grid-template-columns:180px 1fr auto !important}
  [data-r="footer"]{grid-template-columns:1fr 1fr !important}
}
@media (max-width:960px){
  [data-r="cards3"]{grid-template-columns:1fr !important}
}
@media (max-width:760px){
  [data-sp="a"]{padding:56px 20px !important}
  [data-sp="b"]{padding:0 20px 56px !important}
  [data-sp="c"]{padding:48px 20px 40px !important}
  [data-sp="d"]{padding:48px 20px 56px !important}
  [data-sp="f"]{margin:12px !important;padding:32px 20px !important}
  [data-sp="i"]{margin:0 12px 56px !important}
  [data-sp="p"]{padding:28px 20px !important}
  [data-r="2"],[data-r="three"],[data-r="four"],[data-r="steps"],[data-r="cta"],[data-r="footer"],[data-r="row"],[data-r="row3"]{grid-template-columns:1fr !important}
  [data-r="2"],[data-r="cta"]{gap:40px !important}
  [data-r="row"],[data-r="row3"]{gap:12px !important}
  [data-r="three"],[data-r="four"],[data-r="steps"]{gap:20px !important}
  [data-r="hero"] img{aspect-ratio:4/3 !important}
  [data-r="stats"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px 14px !important}
  [data-r="logos"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:28px 20px !important}
  [data-r="gallery"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-auto-rows:150px !important}
  [data-r="videos"]{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;max-width:none !important;padding-bottom:4px;scrollbar-width:none}
  [data-r="videos"]::-webkit-scrollbar{display:none}
  [data-r="videos"] > *{flex:0 0 68%;scroll-snap-align:start}
  [data-r="map"]{overflow-x:auto !important}
  [data-r="map"] img{min-width:880px}
  h1.pr-display{font-size:38px !important}
  [data-fs="xl"]{font-size:36px !important}
  [data-fs="l"]{font-size:32px !important}
  [data-r="stats"] [data-fs="xl"]{font-size:34px !important}
}
@media (max-width:560px){
  [data-r="form2"],[data-r="list2"]{grid-template-columns:1fr !important}
}
a{color:var(--pr-accent);text-decoration:none}
a:hover{color:var(--pr-accent-press)}
header nav button{white-space:nowrap}
@media (max-width:1280px){
  header{padding:18px 20px !important;gap:16px !important}
  header nav{gap:2px !important}
  header nav button{font-size:13.5px !important;padding:8px 10px 7px !important}
}

/* --- static build: nav chrome --- */
.pr-hdr-narrow{display:none!important}
@media (max-width:960px){.pr-dd-wrap{display:none!important}}
@media (max-width:960px){
  .pr-hdr-wide{display:none!important}
  .pr-hdr-narrow{display:flex!important}
}
#dd-panel[hidden],#menu-sheet[hidden]{display:none!important}
.pr-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--pr-ink);color:var(--pr-cream);
  padding:12px 18px;border-radius:0 0 12px 0;font-family:var(--pr-font-body);font-size:15px;text-decoration:none}
.pr-skip:focus{left:0}
@media (max-width:760px){.pr-stencil{white-space:normal!important;line-height:1.5!important}}
#brief[hidden],#brief-status[hidden]{display:none!important}
.pr-unlink,.pr-unlink:hover,.pr-unlink:active{box-shadow:none!important;text-decoration:none}
[data-nav-panel] [data-on="true"]{background:var(--pr-cream-sunk)!important}
.pr-standalone-link{min-height:24px!important;display:inline-flex!important;align-items:center}
.pr-logo-link{min-height:24px;display:flex!important;align-items:center;justify-content:center}
footer a[href],a.pr-label,a[href] > .pr-label{min-height:24px;display:inline-flex;align-items:center}
a[href][style*='font-mono']{min-height:24px;display:inline-flex!important;align-items:center}
.pr-err{color:#8C2F1B;font-family:var(--pr-font-body);font-size:14.5px;margin:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--pr-ink);outline-offset:2px}
