/* ============================================================================
   WEBSPACEZ FRAMEWORK — v1.0.6 — SINGLE-FILE BUNDLE
   ----------------------------------------------------------------------------
   Paste this whole file into:  Bricks → Settings → Custom CSS
   (or enqueue it as one stylesheet from your child theme).
   
   Contains, in order: fonts, variables, base/layout, typography, buttons,
   surfaces, components, forms, utilities.
   
   All tokens prefixed --ws-   ·   all classes prefixed .ws-
   Class reference + setup steps: README-bricks.md
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* ===== 00-fonts.css ===== */
/* ============================================================================
   WEBSPACEZ — 00 FONTS
   ----------------------------------------------------------------------------
   Two options. Pick ONE.
   
   OPTION A (fastest to set up, but calls Google — not GDPR-safe in the EU):
   keep the @import below.
   
   OPTION B (RECOMMENDED for production): self-host.
   1. Download Space Grotesk, Manrope and JetBrains Mono as .woff2
   (google-webfonts-helper is the easiest source).
   2. Upload to  /wp-content/themes/<child-theme>/fonts/
   3. Delete the @import, uncomment the @font-face block, fix the paths.
   4. If you own Degular (.woff2), add it as family name "Degular" and it
   takes over --ws-t-sans automatically — no other change needed.
   ============================================================================ */
/* ---- OPTION A ------------------------------------------------------------ */
/* ---- OPTION B (uncomment, adjust paths) ---------------------------------- */
/*
   @font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
   @font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
   @font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
   @font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
   @font-face{font-family:"Manrope";src:url("fonts/manrope-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
   @font-face{font-family:"Manrope";src:url("fonts/manrope-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
   @font-face{font-family:"Manrope";src:url("fonts/manrope-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
   @font-face{font-family:"Manrope";src:url("fonts/manrope-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
   @font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
   @font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
   */
/* Space Grotesk has no true italic — the editorial italic is synthesised.
   This keeps the slant consistent across browsers. */
.ws-italic,.ws-display-1 em,.ws-display-2 em,.ws-h1 em,.ws-h2 em {
  font-style:italic;
  font-synthesis:style;
}

/* ===== 01-variables.css ===== */
/* ============================================================================
   WEBSPACEZ — 01 VARIABLES (design tokens)
   ----------------------------------------------------------------------------
   Every token is prefixed --ws- so nothing can clash with the theme,
   Bricks itself, or another plugin.
   
   Also enter these in Bricks → Settings → Variables so they appear in the
   colour/size pickers for editors. See README-bricks.md for the paste list.
   ============================================================================ */
:root {
  /* ---- Brand palette — 10 swatches, fixed UI meanings ------------------- */
  --ws-sprout:#7DB851;
  /* success / confirmation        */
  --ws-tender:#E2BE3C;
  /* alert / highlight             */
  --ws-ember:#DE8E2D;
  /* energy / primary CTA on light */
  --ws-signal:#C44A45;
  /* error / destructive           */
  --ws-pixel:#C744B8;
  /* editorial / new launches      */
  --ws-wave:#4D88D1;
  /* information / in progress     */
  --ws-volt:#2A29C9;
  /* default accent on dark        */
  --ws-ink:#0A0826;
  /* primary text / dark surface   */
  --ws-paper:#F5F2EB;
  /* default canvas                */
  --ws-steel:#2D3640;
  /* editorial dark / UI chrome    */
  /* ---- Neutral surfaces ------------------------------------------------- */
  --ws-paper-2:#ECE7DA;
  --ws-paper-3:#DDD6C3;
  --ws-steel-2:#232A33;
  --ws-steel-3:#1A1F26;
  /* ---- Dark "Ink" page surfaces ---------------------------------------- */
  --ws-bg:#0A0826;
  --ws-bg-2:#14102F;
  --ws-bg-card:#0F0D2B;
  --ws-bg-card-2:#16133A;
  /* ---- Lines & dim text (on dark) -------------------------------------- */
  --ws-line:rgba(245,242,235,0.10);
  --ws-line-2:rgba(245,242,235,0.18);
  --ws-dim:rgba(245,242,235,0.60);
  --ws-dim-2:rgba(245,242,235,0.40);
  /* ---- Lines & dim text (on light) ------------------------------------- */
  --ws-line-paper:rgba(10,8,38,0.12);
  --ws-line-paper-2:rgba(10,8,38,0.20);
  --ws-dim-paper:rgba(10,8,38,0.62);
  --ws-dim-paper-2:rgba(10,8,38,0.42);
  /* ---- Accent — override per section with .ws-accent-* or inline -------- */
  --ws-accent:var(--ws-volt);
  --ws-accent-ink:var(--ws-paper);
  /* ---- Typography families --------------------------------------------- */
  --ws-t-disp:"Space Grotesk","Helvetica Neue",Helvetica,sans-serif;
  --ws-t-sans:"Degular","Degular Display","Manrope",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,sans-serif;
  --ws-t-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ws-t-display:var(--ws-t-disp);
  --ws-t-body:var(--ws-t-sans);
  --ws-t-label:var(--ws-t-mono);
  /* ---- Type ramp ------------------------------------------------------- */
  --ws-fs-display-1:clamp(56px,9vw,120px);
  --ws-fs-display-2:clamp(40px,6vw,72px);
  --ws-fs-h1:clamp(36px,5vw,56px);
  --ws-fs-h2:clamp(28px,4vw,36px);
  --ws-fs-h3:24px;
  --ws-fs-body:17px;
  --ws-fs-small:13px;
  --ws-fs-label:11px;
  /* ---- Tracking -------------------------------------------------------- */
  --ws-track-display:-0.03em;
  --ws-track-tight:-0.02em;
  --ws-track-label:0.18em;
  /* ---- Spacing scale (8pt) --------------------------------------------- */
  --ws-s-1:4px;
  --ws-s-2:8px;
  --ws-s-3:12px;
  --ws-s-4:16px;
  --ws-s-5:24px;
  --ws-s-6:32px;
  --ws-s-7:48px;
  --ws-s-8:64px;
  --ws-s-9:96px;
  --ws-s-10:128px;
  /* ---- Layout ---------------------------------------------------------- */
  --ws-container:1440px;
  --ws-container-narrow:900px;
  --ws-gutter:72px;
  --ws-section-y:clamp(64px,8vw,128px);
  /* ---- Radii ----------------------------------------------------------- */
  --ws-r-1:4px;
  --ws-r-2:8px;
  --ws-r-3:14px;
  --ws-r-4:22px;
  --ws-r-pill:999px;
  /* ---- Shadows — always tinted with Ink, never neutral grey ------------- */
  --ws-sh-1:0 1px 0 rgba(10,8,38,0.06),0 1px 2px rgba(10,8,38,0.06);
  --ws-sh-2:0 6px 16px -8px rgba(10,8,38,0.18),0 2px 4px rgba(10,8,38,0.06);
  --ws-sh-3:0 24px 60px -24px rgba(10,8,38,0.30),0 8px 16px -8px rgba(10,8,38,0.12);
  --ws-sh-glow:0 0 0 4px color-mix(in oklab,var(--ws-accent) 22%,transparent);
  /* ---- Motion ---------------------------------------------------------- */
  --ws-ease-fn:cubic-bezier(0.32,0.72,0,1);
  --ws-ease-soft:cubic-bezier(0.16,1,0.3,1);
  --ws-dur-fast:0.15s;
  --ws-dur-med:0.25s;
  --ws-dur-slow:0.35s;
}

/* Tablet / mobile gutters — matches Bricks' default breakpoints */
@media (max-width:991px) {
  :root {
    --ws-gutter:40px;
  }
}

@media (max-width:767px) {
  :root {
    --ws-gutter:24px;
  }
}

/* ---- Per-section accent switches ---------------------------------------
   Add one of these to a Section's CSS classes and every child that uses
   var(--ws-accent) retints — eyebrows, buttons, card hairlines, checkmarks. */
.ws-accent-sprout {
  --ws-accent:var(--ws-sprout);
  --ws-accent-ink:var(--ws-ink);
}

.ws-accent-tender {
  --ws-accent:var(--ws-tender);
  --ws-accent-ink:var(--ws-ink);
}

.ws-accent-ember {
  --ws-accent:var(--ws-ember);
  --ws-accent-ink:var(--ws-ink);
}

.ws-accent-signal {
  --ws-accent:var(--ws-signal);
  --ws-accent-ink:var(--ws-paper);
}

.ws-accent-pixel {
  --ws-accent:var(--ws-pixel);
  --ws-accent-ink:var(--ws-paper);
}

.ws-accent-wave {
  --ws-accent:var(--ws-wave);
  --ws-accent-ink:var(--ws-paper);
}

.ws-accent-volt {
  --ws-accent:var(--ws-volt);
  --ws-accent-ink:var(--ws-paper);
}

/* ===== 02-base.css ===== */
/* ============================================================================
   WEBSPACEZ — 02 BASE / LAYOUT
   Scoped deliberately: we do NOT restyle bare h1/p/a globally, because Bricks
   Theme Styles owns those. Set body font + colours in Theme Styles, then use
   these classes for structure.
   ============================================================================ */
/* ---- Box model ----------------------------------------------------------
   The framework must be self-sufficient: it ships as a standalone importable,
   so it cannot assume the host theme sets border-box. Without this, every
   width:100% component (.ws-btn--block, .ws-input, .ws-container) overflows
   its padding box.
   
   Selectors are prefix-anchored ([class^="ws-"] / [class*=" ws-"]) rather than
   a bare [class*="ws-"], which would also match host classes such as
   "news-item". Scoped to .ws-* only — never a global *{} reset, so it can't
   fight the theme. */
[class^="ws-"],[class*=" ws-"], [class^="ws-"]::before,[class*=" ws-"]::before, [class^="ws-"]::after,[class*=" ws-"]::after {
  box-sizing:border-box;
}

/* `hidden` must always win — author display rules (.ws-wordmark{display:
   inline-flex} etc.) otherwise override the UA's [hidden]{display:none}. */
[hidden] {
  display:none!important;
}

/* Canvas helpers — put on a Section -------------------------------------
   Link colours use :where() so they carry ZERO specificity — otherwise
   `.ws-ink a` (0,1,1) would outrank `.ws-btn--primary` (0,1,0) and every
   button inside a dark section would inherit Paper white. */
.ws-ink {
  background:var(--ws-bg);
  color:var(--ws-paper);
}

.ws-ink :where(a) {
  color:inherit;
}

.ws-ink :where(a:hover) {
  color:var(--ws-accent);
}

.ws-paper-bg {
  background:var(--ws-paper);
  color:var(--ws-ink);
}

.ws-paper-bg :where(a) {
  color:var(--ws-ink);
}

.ws-paper-bg :where(a:hover) {
  color:var(--ws-volt);
}

.ws-steel-bg {
  background:var(--ws-steel);
  color:var(--ws-paper);
}

/* Section rhythm --------------------------------------------------------- */
.ws-section {
  padding-top:var(--ws-section-y);
  padding-bottom:var(--ws-section-y);
  position:relative;
}

.ws-section--tight {
  padding-top:var(--ws-s-8);
  padding-bottom:var(--ws-s-8);
}

.ws-section--flush {
  padding-top:0;
  padding-bottom:0;
}

.ws-section--divided {
  border-top:1px solid var(--ws-line);
}

.ws-paper-bg.ws-section--divided,.ws-section--divided.ws-paper-bg {
  border-top-color:var(--ws-line-paper);
}

/* Container ------------------------------------------------------------- */
.ws-container {
  width:100%;
  max-width:var(--ws-container);
  margin-inline:auto;
  padding-inline:var(--ws-gutter);
}

.ws-container--narrow {
  max-width:var(--ws-container-narrow);
}

.ws-container--flush {
  padding-inline:0;
}

/* Ambient glow pools — the signature Ink-page background.
   Put on the Section (needs position:relative, which .ws-section has). */
.ws-glow::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(ellipse 50% 40% at 88% 0%,color-mix(in oklab,var(--ws-accent) 16%,transparent),transparent 60%),radial-gradient(ellipse 46% 38% at 6% 26%,color-mix(in oklab,var(--ws-pixel) 10%,transparent),transparent 60%);
}

.ws-glow>* {
  position:relative;
  z-index:1;
}

/* Brutalist 12-col grid lines (light pages) ------------------------------ */
.ws-gridlines::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:repeating-linear-gradient(90deg,var(--ws-line-paper) 0 1px,transparent 1px calc(100% / 12));
}

.ws-gridlines>* {
  position:relative;
  z-index:1;
}

/* Honest image placeholder — 45° hatch + mono caption -------------------- */
.ws-placeholder {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--ws-line-2);
  border-radius:var(--ws-r-3);
  background-image:repeating-linear-gradient(45deg,color-mix(in oklab,var(--ws-paper) 8%,transparent) 0 2px,transparent 2px 10px);
  font-family:var(--ws-t-mono);
  font-size:11px;
  letter-spacing:var(--ws-track-label);
  text-transform:uppercase;
  color:var(--ws-dim);
  min-height:200px;
  text-align:center;
  padding:var(--ws-s-5);
}

.ws-placeholder--4x5 {
  aspect-ratio:4/5;
  min-height:0;
}

.ws-placeholder--16x9 {
  aspect-ratio:16/9;
  min-height:0;
}

.ws-paper-bg .ws-placeholder {
  border-color:var(--ws-line-paper);
  color:var(--ws-dim-paper);
  background-image:repeating-linear-gradient(45deg,color-mix(in oklab,var(--ws-ink) 8%,transparent) 0 2px,transparent 2px 10px);
}

/* Hairline divider ------------------------------------------------------- */
.ws-rule {
  height:1px;
  background:var(--ws-line);
  border:0;
  margin:0;
}

.ws-rule--dashed {
  height:0;
  border-top:1px dashed var(--ws-line-2);
  background:none;
}

.ws-paper-bg .ws-rule {
  background:var(--ws-line-paper);
}

/* Respect the user's motion preference ---------------------------------- */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
}

/* ===== 03-typography.css ===== */
/* ============================================================================
   WEBSPACEZ — 03 TYPOGRAPHY HELPERS
   Sentence case for headlines & body. UPPERCASE only for mono labels.
   Signature move: an italic Space Grotesk word inside a headline, accent-tinted.
   ============================================================================ */
.ws-display-1 {
  font-family:var(--ws-t-disp);
  font-weight:500;
  font-size:var(--ws-fs-display-1);
  line-height:0.92;
  letter-spacing:var(--ws-track-display);
  margin:0;
}

.ws-display-2 {
  font-family:var(--ws-t-disp);
  font-weight:600;
  font-size:var(--ws-fs-display-2);
  line-height:0.98;
  letter-spacing:-0.025em;
  margin:0;
}

.ws-h1 {
  font-family:var(--ws-t-sans);
  font-weight:600;
  font-size:var(--ws-fs-h1);
  line-height:1.04;
  letter-spacing:var(--ws-track-tight);
  margin:0;
}

.ws-h2 {
  font-family:var(--ws-t-sans);
  font-weight:600;
  font-size:var(--ws-fs-h2);
  line-height:1.1;
  letter-spacing:-0.015em;
  margin:0;
}

.ws-h3 {
  font-family:var(--ws-t-sans);
  font-weight:600;
  font-size:var(--ws-fs-h3);
  line-height:1.2;
  letter-spacing:-0.005em;
  margin:0;
}

.ws-body {
  font-family:var(--ws-t-sans);
  font-weight:400;
  font-size:var(--ws-fs-body);
  line-height:1.55;
  text-wrap:pretty;
}

.ws-body--lead {
  font-size:20px;
  line-height:1.5;
  color:var(--ws-dim);
}

.ws-paper-bg .ws-body--lead {
  color:var(--ws-dim-paper);
}

.ws-small {
  font-family:var(--ws-t-sans);
  font-weight:500;
  font-size:var(--ws-fs-small);
  line-height:1.45;
}

/* Headline display type on a display-family heading, whatever the tag ---- */
.ws-display-1 em,.ws-display-2 em {
  font-style:italic;
  font-weight:400;
  color:var(--ws-accent);
}

.ws-italic {
  font-style:italic;
  font-weight:400;
}

.ws-strike {
  text-decoration:line-through;
  text-decoration-thickness:1px;
  color:var(--ws-dim-2);
}

/* Measure caps ----------------------------------------------------------- */
.ws-measure {
  max-width:60ch;
}

.ws-measure--short {
  max-width:44ch;
}

/* Eyebrow / kicker ------------------------------------------------------- */
.ws-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--ws-t-mono);
  font-size:var(--ws-fs-label);
  letter-spacing:var(--ws-track-label);
  text-transform:uppercase;
  color:var(--ws-accent);
}

.ws-eyebrow::before {
  content:"";
  width:22px;
  height:1px;
  background:currentColor;
  flex:0 0 auto;
}

.ws-eyebrow--bare::before {
  display:none;
}

/* Mono label / metadata ------------------------------------------------- */
.ws-label {
  font-family:var(--ws-t-mono);
  font-size:var(--ws-fs-label);
  letter-spacing:var(--ws-track-label);
  text-transform:uppercase;
}

.ws-label--dim {
  color:var(--ws-dim);
}

.ws-index {
  font-family:var(--ws-t-mono);
  font-size:12px;
  letter-spacing:0.14em;
  color:var(--ws-dim-2);
}

/* Big stat number ------------------------------------------------------- */
.ws-stat {
  font-family:var(--ws-t-disp);
  font-weight:500;
  font-size:clamp(40px,5vw,64px);
  line-height:0.95;
  letter-spacing:-0.025em;
  color:var(--ws-accent);
}

/* ===== 04-buttons.css ===== */
/* ============================================================================
   WEBSPACEZ — 04 BUTTONS, PILLS, CHIPS
   Two lineages: (1) 8px solid rect buttons, (2) editorial uppercase pill
   with a 1.5px border that fills with currentColor on hover.
   Usage: ws-btn ws-btn--primary   /   ws-pill ws-pill--arrow
   ============================================================================ */
.ws-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 26px;
  font-family:var(--ws-t-sans);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  border-radius:var(--ws-r-2);
  border:1.5px solid transparent;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:background var(--ws-dur-fast) ease,color var(--ws-dur-fast) ease,border-color var(--ws-dur-fast) ease,transform var(--ws-dur-fast) ease;
}

.ws-btn:hover {
  transform:translateY(-1px);
}

.ws-btn:focus-visible {
  outline:none;
  box-shadow:var(--ws-sh-glow);
}

.ws-btn--primary {
  background:var(--ws-paper);
  color:var(--ws-ink);
  border-color:var(--ws-paper);
}

.ws-btn--primary:hover {
  background:transparent;
  color:var(--ws-paper);
}

.ws-btn--accent {
  background:var(--ws-accent);
  color:var(--ws-accent-ink);
  border-color:var(--ws-accent);
}

.ws-btn--accent:hover {
  background:var(--ws-ink);
  color:var(--ws-paper);
  border-color:var(--ws-ink);
}

.ws-btn--outline {
  background:transparent;
  color:currentColor;
  border-color:var(--ws-line-2);
}

.ws-btn--outline:hover {
  border-color:currentColor;
}

.ws-btn--ink {
  background:var(--ws-ink);
  color:var(--ws-paper);
  border-color:var(--ws-ink);
}

.ws-btn--ink:hover {
  background:var(--ws-accent);
  color:var(--ws-accent-ink);
  border-color:var(--ws-accent);
}

.ws-btn--pill {
  border-radius:var(--ws-r-pill);
}

.ws-btn--sm {
  padding:11px 18px;
  font-size:12px;
}

.ws-btn--block {
  width:100%;
}

/* Editorial uppercase pill --------------------------------------------- */
.ws-pill {
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:16px 30px;
  font-family:var(--ws-t-sans);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border-radius:var(--ws-r-pill);
  border:1.5px solid currentColor;
  background:transparent;
  color:inherit;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:background var(--ws-dur-fast) ease,color var(--ws-dur-fast) ease;
}

.ws-ink .ws-pill:hover {
  background:var(--ws-paper);
  color:var(--ws-ink);
}

.ws-paper-bg .ws-pill:hover {
  background:var(--ws-ink);
  color:var(--ws-paper);
}

.ws-pill:focus-visible {
  outline:none;
  box-shadow:var(--ws-sh-glow);
}

/* Inline mini arrow inside a pill — inverts with the fill --------------- */
.ws-pill__arrow {
  width:24px;
  height:24px;
  border-radius:50%;
  background:currentColor;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--ws-t-mono);
  font-size:13px;
  flex:0 0 auto;
  position:relative;
}

.ws-pill__arrow::before {
  content:"\2192";
  color:var(--ws-bg);
  mix-blend-mode:normal;
}

/* Big circular CTA — rotates 45° on hover ------------------------------ */
.ws-arrow-cta {
  width:96px;
  height:96px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid currentColor;
  background:transparent;
  color:inherit;
  font-family:var(--ws-t-mono);
  font-size:26px;
  text-decoration:none;
  cursor:pointer;
  transition:transform var(--ws-dur-med) var(--ws-ease-fn),background var(--ws-dur-fast) ease,color var(--ws-dur-fast) ease;
}

.ws-arrow-cta:hover {
  transform:rotate(45deg);
  background:var(--ws-accent);
  color:var(--ws-accent-ink);
  border-color:transparent;
}

/* Round icon button ---------------------------------------------------- */
.ws-iconbtn {
  width:46px;
  height:46px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid var(--ws-line-2);
  background:transparent;
  color:inherit;
  font-family:var(--ws-t-mono);
  font-size:16px;
  cursor:pointer;
  text-decoration:none;
  transition:background var(--ws-dur-fast) ease,color var(--ws-dur-fast) ease,border-color var(--ws-dur-fast) ease;
}

.ws-ink .ws-iconbtn:hover {
  background:var(--ws-paper);
  color:var(--ws-ink);
  border-color:var(--ws-paper);
}

.ws-paper-bg .ws-iconbtn:hover {
  background:var(--ws-ink);
  color:var(--ws-paper);
  border-color:var(--ws-ink);
}

.ws-iconbtn.is-disabled,.ws-iconbtn[disabled] {
  opacity:0.35;
  pointer-events:none;
}

.ws-iconbtn--sm {
  width:38px;
  height:38px;
  font-size:14px;
}

/* Text link with a nudging arrow --------------------------------------- */
.ws-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--ws-t-sans);
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  color:var(--ws-accent);
}

.ws-link::after {
  content:"\2192";
  transition:transform var(--ws-dur-fast) ease;
}

.ws-link:hover::after {
  transform:translateX(4px);
}

/* Filter chip ---------------------------------------------------------- */
.ws-chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:var(--ws-r-pill);
  border:1px solid var(--ws-line-2);
  background:transparent;
  color:var(--ws-dim);
  cursor:pointer;
  font-family:var(--ws-t-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background var(--ws-dur-fast) ease,color var(--ws-dur-fast) ease,border-color var(--ws-dur-fast) ease;
}

.ws-chip:hover {
  color:var(--ws-paper);
  border-color:var(--ws-dim);
}

.ws-chip.is-active {
  background:var(--ws-paper);
  color:var(--ws-ink);
  border-color:var(--ws-paper);
}

.ws-paper-bg .ws-chip {
  color:var(--ws-dim-paper);
  border-color:var(--ws-line-paper-2);
}

.ws-paper-bg .ws-chip:hover {
  color:var(--ws-ink);
  border-color:var(--ws-ink);
}

.ws-paper-bg .ws-chip.is-active {
  background:var(--ws-ink);
  color:var(--ws-paper);
  border-color:var(--ws-ink);
}

/* Button group — flex + gap so Bricks drag-reorder keeps spacing -------- */
.ws-btn-row {
  display:flex;
  flex-wrap:wrap;
  gap:var(--ws-s-3);
  align-items:center;
}

/* ===== 05-surfaces.css ===== */
/* ============================================================================
   WEBSPACEZ — 05 SURFACES: cards, KPI tiles, pricing, badges
   Dark card = bg-card fill + 1px line-2 + 22px radius + top hairline.
   Light card = Paper fill + hairline Ink border + sh-2.
   ============================================================================ */
/* Surfaces are frequently used AS links (a whole card is the click target).
   Every surface class must therefore kill the UA anchor underline, the way
   .ws-btn / .ws-pill / .ws-link / .ws-media-card already do — an ancestor's
   underline paints across descendant inline boxes even when the children
   themselves set text-decoration:none. */
.ws-card,.ws-kpi,.ws-price-card,.ws-badge,.ws-placeholder {
  text-decoration:none;
}

.ws-card {
  position:relative;
  background:var(--ws-bg-card);
  border:1px solid var(--ws-line-2);
  border-radius:var(--ws-r-4);
  padding:28px 30px;
  color:var(--ws-paper);
  overflow:hidden;
}

.ws-card--hairline::before {
  content:"";
  position:absolute;
  top:-1px;
  left:24px;
  right:24px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--ws-accent),transparent);
  opacity:0.7;
}

.ws-card--paper {
  background:var(--ws-paper);
  border-color:var(--ws-line-paper);
  color:var(--ws-ink);
  box-shadow:var(--ws-sh-2);
}

.ws-card--steel {
  background:var(--ws-steel-2);
  border-color:var(--ws-line);
}

.ws-card--flat {
  background:transparent;
}

.ws-card--lift {
  transition:transform var(--ws-dur-med) var(--ws-ease-fn),box-shadow var(--ws-dur-med) ease,border-color var(--ws-dur-med) ease;
}

.ws-card--lift:hover {
  transform:translateY(-4px);
  box-shadow:var(--ws-sh-3);
  border-color:color-mix(in oklab,var(--ws-accent) 45%,transparent);
}

.ws-card__title {
  font-family:var(--ws-t-sans);
  font-weight:600;
  font-size:20px;
  letter-spacing:-0.01em;
  margin:0 0 var(--ws-s-2);
}

.ws-card__text {
  font-family:var(--ws-t-sans);
  font-size:15px;
  line-height:1.55;
  color:var(--ws-dim);
  margin:0;
  text-wrap:pretty;
}

.ws-card--paper .ws-card__text {
  color:var(--ws-dim-paper);
}

.ws-card__corner {
  position:absolute;
  top:16px;
  right:20px;
  font-family:var(--ws-t-mono);
  font-size:11px;
  letter-spacing:0.14em;
  color:var(--ws-dim-2);
}

/* Product / project card — 4:5 media, lift on hover -------------------- */
.ws-media-card {
  display:flex;
  flex-direction:column;
  gap:var(--ws-s-4);
  text-decoration:none;
  color:inherit;
  transition:transform var(--ws-dur-med) var(--ws-ease-fn);
}

.ws-media-card:hover {
  transform:translateY(-4px);
}

.ws-media-card__media {
  aspect-ratio:4/5;
  border-radius:var(--ws-r-3);
  overflow:hidden;
  background:var(--ws-bg-card-2);
}

.ws-media-card__media img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* KPI / stat tile ------------------------------------------------------ */
.ws-kpi {
  display:flex;
  flex-direction:column;
  gap:6px;
  background:var(--ws-bg-card);
  border:1px solid var(--ws-line);
  border-radius:var(--ws-r-3);
  padding:24px;
  color:var(--ws-paper);
}

.ws-kpi__value {
  font-family:var(--ws-t-disp);
  font-weight:500;
  font-size:46px;
  line-height:0.95;
  letter-spacing:-0.025em;
  color:var(--ws-accent);
}

.ws-kpi__label {
  font-family:var(--ws-t-sans);
  font-size:13px;
  line-height:1.4;
  color:var(--ws-dim);
}

.ws-kpi--paper {
  background:var(--ws-paper);
  border-color:var(--ws-line-paper);
  color:var(--ws-ink);
}

.ws-kpi--paper .ws-kpi__label {
  color:var(--ws-dim-paper);
}

/* Pricing card -------------------------------------------------------- */
.ws-price-card {
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--ws-bg-card);
  border:1px solid var(--ws-line-2);
  border-radius:var(--ws-r-4);
  padding:32px 30px;
  color:var(--ws-paper);
  overflow:hidden;
}

.ws-price-card::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--ws-accent);
}

.ws-price-card.is-featured {
  border-color:color-mix(in oklab,var(--ws-accent) 50%,transparent);
  box-shadow:var(--ws-sh-3);
}

.ws-price-card__name {
  font-family:var(--ws-t-disp);
  font-weight:600;
  font-size:30px;
  letter-spacing:-0.02em;
  color:var(--ws-accent);
}

.ws-price-card__full {
  font-family:var(--ws-t-mono);
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--ws-dim-2);
  margin:4px 0 24px;
}

.ws-price-card__price {
  display:flex;
  align-items:baseline;
  gap:6px;
}

.ws-price-card__price .ws-cur {
  font-family:var(--ws-t-disp);
  font-weight:500;
  font-size:28px;
}

.ws-price-card__price .ws-amt {
  font-family:var(--ws-t-disp);
  font-weight:500;
  font-size:64px;
  line-height:0.9;
  letter-spacing:-0.03em;
}

.ws-price-card__price .ws-per {
  font-family:var(--ws-t-sans);
  font-size:16px;
  color:var(--ws-dim);
}

.ws-price-card__note {
  font-family:var(--ws-t-sans);
  font-size:13px;
  color:var(--ws-dim-2);
  margin:4px 0 24px;
}

.ws-price-card__foot {
  margin-top:auto;
  padding-top:var(--ws-s-6);
}

/* Feature list -------------------------------------------------------- */
.ws-feat {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}

.ws-feat__item {
  display:grid;
  grid-template-columns:18px 1fr;
  gap:12px;
  align-items:baseline;
  font-family:var(--ws-t-sans);
  font-size:14px;
  line-height:1.45;
  color:inherit;
}

.ws-feat__item::before {
  content:"\2713";
  color:var(--ws-accent);
}

.ws-feat__item.is-off {
  color:var(--ws-dim-2);
}

.ws-feat__item.is-off::before {
  content:"\2014";
  color:var(--ws-dim-2);
}

/* Badges -------------------------------------------------------------- */
.ws-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  font-family:var(--ws-t-mono);
  font-size:11px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  border-radius:var(--ws-r-pill);
  background:rgba(245,242,235,0.08);
  color:inherit;
}

.ws-paper-bg .ws-badge {
  background:rgba(10,8,38,0.06);
}

.ws-badge--sprout {
  background:color-mix(in oklab,var(--ws-sprout) 18%,transparent);
  color:color-mix(in oklab,var(--ws-sprout) 70%,var(--ws-paper));
}

.ws-badge--tender {
  background:color-mix(in oklab,var(--ws-tender) 18%,transparent);
  color:var(--ws-tender);
}

.ws-badge--wave {
  background:color-mix(in oklab,var(--ws-wave) 18%,transparent);
  color:var(--ws-wave);
}

.ws-badge--pixel {
  background:color-mix(in oklab,var(--ws-pixel) 18%,transparent);
  color:color-mix(in oklab,var(--ws-pixel) 80%,var(--ws-paper));
}

.ws-badge--ember {
  background:color-mix(in oklab,var(--ws-ember) 20%,transparent);
  color:var(--ws-ember);
}

.ws-badge--signal {
  background:color-mix(in oklab,var(--ws-signal) 20%,transparent);
  color:var(--ws-signal);
}

.ws-badge--solid {
  background:var(--ws-accent);
  color:var(--ws-accent-ink);
}

/* Live status dot ----------------------------------------------------- */
.ws-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ws-sprout);
  display:inline-block;
  flex:0 0 auto;
}

.ws-dot--pulse {
  animation:ws-pulse 2s var(--ws-ease-soft) infinite;
}

@keyframes ws-pulse {
  0%,100% {
    box-shadow:0 0 0 0 color-mix(in oklab,var(--ws-sprout) 55%,transparent);
  }
  50% {
    box-shadow:0 0 0 6px color-mix(in oklab,var(--ws-sprout) 0%,transparent);
  }
}

/* ===== 06-components.css ===== */
/* ============================================================================
   WEBSPACEZ — 06 COMPONENTS: nav, wordmark, index list, marquee, footer
   ============================================================================ */
/* Wordmark — filled "WEB" + outlined "SPACEZ", pure CSS ----------------
   The stroke CANNOT use currentColor: this rule sets color:transparent on the
   same element, so currentColor would resolve to transparent and the outline
   would paint nothing. The stroke colour is therefore explicit, switched per
   canvas, and overridable via --ws-wordmark-stroke. */
.ws-wordmark {
  font-family:var(--ws-t-disp);
  font-weight:700;
  font-size:26px;
  letter-spacing:-0.01em;
  line-height:1;
  display:inline-flex;
  align-items:baseline;
  gap:3px;
  text-decoration:none;
  color:inherit;
}

.ws-wordmark__filled {
  color:currentColor;
}

.ws-wordmark__outlined {
  color:transparent;
  -webkit-text-stroke:1.4px var(--ws-wordmark-stroke,var(--ws-paper));
}

.ws-paper-bg .ws-wordmark__outlined,.ws-wordmark--ink .ws-wordmark__outlined {
  -webkit-text-stroke-color:var(--ws-wordmark-stroke,var(--ws-ink));
}

/* Nav pill ------------------------------------------------------------ */
.ws-navpill {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px;
  background:rgba(245,242,235,0.05);
  border:1px solid var(--ws-line);
  border-radius:var(--ws-r-pill);
  font-family:var(--ws-t-sans);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:0.10em;
  text-transform:uppercase;
}

.ws-navpill a,.ws-navpill .ws-navpill__item {
  padding:9px 17px;
  border-radius:var(--ws-r-pill);
  color:var(--ws-dim);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:color var(--ws-dur-fast) ease,background var(--ws-dur-fast) ease;
}

.ws-navpill a:hover {
  color:var(--ws-paper);
}

.ws-navpill a.is-active,.ws-navpill .current-menu-item>a {
  background:rgba(245,242,235,0.10);
  color:var(--ws-paper);
}

.ws-paper-bg .ws-navpill {
  background:rgba(10,8,38,0.04);
  border-color:var(--ws-line-paper);
}

.ws-paper-bg .ws-navpill a {
  color:var(--ws-dim-paper);
}

.ws-paper-bg .ws-navpill a:hover,.ws-paper-bg .ws-navpill a.is-active {
  color:var(--ws-ink);
  background:rgba(10,8,38,0.07);
}

/* Hamburger mark ------------------------------------------------------ */
.ws-burger {
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--ws-line);
  background:rgba(245,242,235,0.05);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  cursor:pointer;
}

.ws-burger span {
  width:3px;
  height:13px;
  background:currentColor;
  border-radius:2px;
}

/* Sticky translucent bar (nav / TOC) ---------------------------------- */
.ws-sticky {
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  background:color-mix(in oklab,var(--ws-steel) 62%,transparent);
  border-bottom:1px solid var(--ws-line);
}

/* ---- EDITORIAL INDEX LIST -------------------------------------------
   The work/portfolio row list. Structure per row:
   a.ws-idx__row > .ws-idx__num .ws-idx__name .ws-idx__meta .ws-idx__year
   .ws-idx__ext .ws-idx__peek
   Set --ws-accent per row to retint name + arrow + peek.               */
.ws-idx {
  display:flex;
  flex-direction:column;
}

.ws-idx__row {
  display:grid;
  grid-template-columns:64px 1.5fr 1fr 92px 40px;
  gap:28px;
  align-items:center;
  padding:26px 0;
  border-top:1px solid var(--ws-line);
  position:relative;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:padding-left var(--ws-dur-slow) var(--ws-ease-fn);
}

.ws-idx>.ws-idx__row:last-child {
  border-bottom:1px solid var(--ws-line);
}

.ws-idx__row:hover {
  padding-left:18px;
}

.ws-idx__num {
  font-family:var(--ws-t-mono);
  font-size:12px;
  letter-spacing:0.14em;
  color:var(--ws-dim-2);
}

.ws-idx__name {
  font-family:var(--ws-t-disp);
  font-weight:600;
  font-size:clamp(26px,3.2vw,40px);
  line-height:1;
  letter-spacing:var(--ws-track-tight);
  transition:color var(--ws-dur-med) ease;
}

.ws-idx__row:hover .ws-idx__name {
  color:var(--ws-accent);
}

.ws-idx__meta {
  font-family:var(--ws-t-mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ws-dim);
  display:flex;
  gap:8px 14px;
  flex-wrap:wrap;
}

.ws-idx__year {
  font-family:var(--ws-t-mono);
  font-size:12px;
  letter-spacing:0.14em;
  color:var(--ws-dim);
  text-align:right;
  transition:opacity var(--ws-dur-med) ease;
}

.ws-idx__row:hover .ws-idx__year {
  opacity:0;
}

.ws-idx__ext {
  justify-self:end;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--ws-line-2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--ws-t-mono);
  font-size:14px;
  color:var(--ws-dim);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity var(--ws-dur-med) ease,transform var(--ws-dur-med) ease,background var(--ws-dur-med) ease,color var(--ws-dur-med) ease;
}

.ws-idx__row:hover .ws-idx__ext {
  opacity:1;
  transform:translateX(0);
  background:var(--ws-accent);
  color:var(--ws-accent-ink);
  border-color:transparent;
}

.ws-idx__peek {
  position:absolute;
  right:150px;
  top:50%;
  width:0;
  height:76px;
  border-radius:var(--ws-r-2);
  transform:translateY(-50%);
  overflow:hidden;
  pointer-events:none;
  z-index:2;
  transition:width var(--ws-dur-slow) var(--ws-ease-fn);
}

.ws-idx__peek img {
  width:120px;
  height:100%;
  object-fit:cover;
  display:block;
}

.ws-idx__row:hover .ws-idx__peek {
  width:120px;
}

.ws-paper-bg .ws-idx__row,.ws-paper-bg .ws-idx>.ws-idx__row:last-child {
  border-color:var(--ws-line-paper);
}

.ws-paper-bg .ws-idx__meta,.ws-paper-bg .ws-idx__year {
  color:var(--ws-dim-paper);
}

@media (max-width:991px) {
  .ws-idx__row {
    grid-template-columns:48px 1fr auto;
    gap:16px;
  }
  .ws-idx__meta {
    grid-column:2;
  }
  .ws-idx__peek {
    display:none;
  }
}

@media (max-width:767px) {
  .ws-idx__row {
    grid-template-columns:1fr auto;
    row-gap:10px;
  }
  .ws-idx__num {
    grid-column:1;
  }
  .ws-idx__name {
    grid-column:1/-1;
  }
  .ws-idx__ext {
    display:none;
  }
}

/* Slow italic marquee ------------------------------------------------- */
.ws-marquee {
  overflow:hidden;
  white-space:nowrap;
  display:flex;
  gap:0;
}

.ws-marquee__track {
  display:inline-flex;
  gap:48px;
  padding-right:48px;
  font-family:var(--ws-t-disp);
  font-style:italic;
  font-weight:400;
  font-size:clamp(40px,6vw,88px);
  letter-spacing:-0.02em;
  animation:ws-marquee 28s linear infinite;
  flex:0 0 auto;
}

@keyframes ws-marquee {
  from {
    transform:translateX(0);
  }
  to {
    transform:translateX(-100%);
  }
}

/* Spec / definition rows (dashed hairlines) --------------------------- */
.ws-specs {
  display:flex;
  flex-direction:column;
}

.ws-specs__row {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:24px;
  padding:16px 0;
  border-top:1px dashed var(--ws-line-2);
  font-family:var(--ws-t-sans);
  font-size:15px;
}

.ws-specs__row dt,.ws-specs__key {
  font-family:var(--ws-t-mono);
  font-size:11px;
  letter-spacing:var(--ws-track-label);
  text-transform:uppercase;
  color:var(--ws-dim);
  margin:0;
}

.ws-specs__row dd {
  margin:0;
}

/* Footer strip -------------------------------------------------------- */
.ws-strip {
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  border-top:1px solid var(--ws-line);
  padding-top:22px;
  font-family:var(--ws-t-mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ws-dim-2);
}

.ws-paper-bg .ws-strip {
  border-top-color:var(--ws-line-paper);
  color:var(--ws-dim-paper-2);
}

/* ===== 07-forms.css ===== */
/* ============================================================================
   WEBSPACEZ — 07 FORMS
   Covers the .ws-input primitive AND Bricks' own Form element markup, so a
   native Bricks form inherits the system without per-field styling.
   ============================================================================ */
.ws-input,.ws-select,.ws-textarea {
  font-family:var(--ws-t-sans);
  font-size:15px;
  padding:16px 18px;
  background:var(--ws-bg);
  border:1px solid var(--ws-line-2);
  border-radius:var(--ws-r-2);
  color:var(--ws-paper);
  outline:none;
  width:100%;
  transition:border-color var(--ws-dur-fast) ease,box-shadow var(--ws-dur-fast) ease;
}

.ws-input::placeholder,.ws-textarea::placeholder {
  color:var(--ws-dim-2);
}

.ws-input:focus,.ws-select:focus,.ws-textarea:focus {
  border-color:var(--ws-accent);
  box-shadow:var(--ws-sh-glow);
}

.ws-textarea {
  min-height:140px;
  resize:vertical;
}

.ws-input--paper,.ws-paper-bg .ws-input,.ws-paper-bg .ws-select,.ws-paper-bg .ws-textarea {
  background:var(--ws-paper);
  border-color:var(--ws-line-paper-2);
  color:var(--ws-ink);
}

.ws-input.has-error {
  border-color:var(--ws-signal);
}

.ws-field {
  display:flex;
  flex-direction:column;
  gap:var(--ws-s-2);
}

.ws-field__label {
  font-family:var(--ws-t-mono);
  font-size:11px;
  letter-spacing:var(--ws-track-label);
  text-transform:uppercase;
  color:var(--ws-dim);
}

.ws-field__help {
  font-family:var(--ws-t-sans);
  font-size:13px;
  color:var(--ws-dim-2);
}

.ws-field__error {
  font-family:var(--ws-t-sans);
  font-size:13px;
  color:var(--ws-signal);
}

.ws-form-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--ws-s-4);
}

@media (max-width:767px) {
  .ws-form-grid {
    grid-template-columns:1fr;
  }
}

/* Inline "scan" style CTA field + button ------------------------------ */
.ws-inline-form {
  display:flex;
  gap:var(--ws-s-3);
  flex-wrap:wrap;
  align-items:center;
}

.ws-inline-form .ws-input {
  flex:1 1 260px;
  width:auto;
}

/* ---- Bricks Form element ------------------------------------------- */
.ws-form .bricks-form .form-group {
  margin-bottom:var(--ws-s-4);
}

.ws-form .bricks-form input[type=text],.ws-form .bricks-form input[type=email],.ws-form .bricks-form input[type=tel],.ws-form .bricks-form input[type=url],.ws-form .bricks-form input[type=number],.ws-form .bricks-form textarea,.ws-form .bricks-form select {
  font-family:var(--ws-t-sans);
  font-size:15px;
  padding:16px 18px;
  background:var(--ws-bg);
  border:1px solid var(--ws-line-2);
  border-radius:var(--ws-r-2);
  color:var(--ws-paper);
  width:100%;
}

.ws-form .bricks-form input:focus,.ws-form .bricks-form textarea:focus,.ws-form .bricks-form select:focus {
  border-color:var(--ws-accent);
  box-shadow:var(--ws-sh-glow);
  outline:none;
}

.ws-form .bricks-form label {
  font-family:var(--ws-t-mono);
  font-size:11px;
  letter-spacing:var(--ws-track-label);
  text-transform:uppercase;
  color:var(--ws-dim);
}

.ws-form .bricks-form button[type=submit] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 26px;
  font-family:var(--ws-t-sans);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  border-radius:var(--ws-r-2);
  border:1.5px solid var(--ws-accent);
  background:var(--ws-accent);
  color:var(--ws-accent-ink);
  cursor:pointer;
  transition:background var(--ws-dur-fast) ease,color var(--ws-dur-fast) ease;
}

.ws-form .bricks-form button[type=submit]:hover {
  background:var(--ws-ink);
  color:var(--ws-paper);
  border-color:var(--ws-ink);
}

.ws-form .bricks-form .message {
  font-family:var(--ws-t-sans);
  font-size:14px;
  border-radius:var(--ws-r-2);
}

/* ===== 08-utilities.css ===== */
/* ============================================================================
   WEBSPACEZ — 08 UTILITIES
   Deliberately small. Bricks controls handle most layout; these exist for the
   things that are tedious to click (grids, stacks, colour swaps).
   ============================================================================ */
/* Text colour --------------------------------------------------------- */
.ws-text-sprout {
  color:var(--ws-sprout);
}

.ws-text-tender {
  color:var(--ws-tender);
}

.ws-text-ember {
  color:var(--ws-ember);
}

.ws-text-signal {
  color:var(--ws-signal);
}

.ws-text-pixel {
  color:var(--ws-pixel);
}

.ws-text-wave {
  color:var(--ws-wave);
}

.ws-text-volt {
  color:var(--ws-volt);
}

.ws-text-ink {
  color:var(--ws-ink);
}

.ws-text-paper {
  color:var(--ws-paper);
}

.ws-text-accent {
  color:var(--ws-accent);
}

.ws-text-dim {
  color:var(--ws-dim);
}

.ws-paper-bg .ws-text-dim {
  color:var(--ws-dim-paper);
}

/* Background swatches — each sets a readable foreground ---------------- */
.ws-bg-ink {
  background:var(--ws-ink);
  color:var(--ws-paper);
}

.ws-bg-ink-2 {
  background:var(--ws-bg-2);
  color:var(--ws-paper);
}

.ws-bg-paper {
  background:var(--ws-paper);
  color:var(--ws-ink);
}

.ws-bg-paper-2 {
  background:var(--ws-paper-2);
  color:var(--ws-ink);
}

.ws-bg-steel {
  background:var(--ws-steel);
  color:var(--ws-paper);
}

.ws-bg-card {
  background:var(--ws-bg-card);
  color:var(--ws-paper);
}

.ws-bg-sprout {
  background:var(--ws-sprout);
  color:var(--ws-ink);
}

.ws-bg-tender {
  background:var(--ws-tender);
  color:var(--ws-ink);
}

.ws-bg-ember {
  background:var(--ws-ember);
  color:var(--ws-ink);
}

.ws-bg-signal {
  background:var(--ws-signal);
  color:var(--ws-paper);
}

.ws-bg-pixel {
  background:var(--ws-pixel);
  color:var(--ws-paper);
}

.ws-bg-wave {
  background:var(--ws-wave);
  color:var(--ws-paper);
}

.ws-bg-volt {
  background:var(--ws-volt);
  color:var(--ws-paper);
}

/* Stacks & rows — gap-based, survives Bricks drag-reorder -------------- */
.ws-stack {
  display:flex;
  flex-direction:column;
}

.ws-stack-1 {
  display:flex;
  flex-direction:column;
  gap:var(--ws-s-1);
}

.ws-stack-2 {
  display:flex;
  flex-direction:column;
  gap:var(--ws-s-2);
}

.ws-stack-3 {
  display:flex;
  flex-direction:column;
  gap:var(--ws-s-3);
}

.ws-stack-4 {
  display:flex;
  flex-direction:column;
  gap:var(--ws-s-4);
}

.ws-stack-5 {
  display:flex;
  flex-direction:column;
  gap:var(--ws-s-5);
}

.ws-stack-6 {
  display:flex;
  flex-direction:column;
  gap:var(--ws-s-6);
}

.ws-stack-7 {
  display:flex;
  flex-direction:column;
  gap:var(--ws-s-7);
}

.ws-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--ws-s-4);
}

.ws-row--between {
  justify-content:space-between;
}

.ws-row--end {
  justify-content:flex-end;
}

.ws-row--baseline {
  align-items:baseline;
}

.ws-row--top {
  align-items:flex-start;
}

/* Grids --------------------------------------------------------------- */
.ws-grid {
  display:grid;
  gap:var(--ws-s-5);
}

.ws-grid-2 {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--ws-s-5);
}

.ws-grid-3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--ws-s-5);
}

.ws-grid-4 {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--ws-s-5);
}

.ws-grid-auto {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--ws-s-5);
}

.ws-grid--split {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:var(--ws-s-8);
  align-items:start;
}

@media (max-width:991px) {
  .ws-grid-3,.ws-grid-4 {
    grid-template-columns:repeat(2,1fr);
  }
  .ws-grid--split {
    grid-template-columns:1fr;
    gap:var(--ws-s-6);
  }
}

@media (max-width:767px) {
  .ws-grid-2,.ws-grid-3,.ws-grid-4 {
    grid-template-columns:1fr;
  }
}

/* Section head — eyebrow + headline left, meta right ------------------ */
.ws-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  flex-wrap:wrap;
  padding-bottom:var(--ws-s-7);
}

.ws-head__meta {
  text-align:right;
  font-family:var(--ws-t-mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ws-dim);
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-end;
}

/* Resets at 991px, not 767px: .ws-head wraps below ~991px, and right-aligned
   meta against a full-width row rags badly. */
@media (max-width:991px) {
  .ws-head {
    align-items:flex-start;
  }
  .ws-head__meta {
    text-align:left;
    align-items:flex-start;
  }
}

/* Spacing escape hatches ---------------------------------------------- */
.ws-mt-0 {
  margin-top:0;
}

.ws-mb-0 {
  margin-bottom:0;
}

.ws-mt-4 {
  margin-top:var(--ws-s-4);
}

.ws-mt-5 {
  margin-top:var(--ws-s-5);
}

.ws-mt-6 {
  margin-top:var(--ws-s-6);
}

.ws-mt-7 {
  margin-top:var(--ws-s-7);
}

.ws-mb-4 {
  margin-bottom:var(--ws-s-4);
}

.ws-mb-5 {
  margin-bottom:var(--ws-s-5);
}

.ws-mb-6 {
  margin-bottom:var(--ws-s-6);
}

.ws-mb-7 {
  margin-bottom:var(--ws-s-7);
}

.ws-push {
  margin-top:auto;
}

/* Visibility ----------------------------------------------------------
   Each class only ever HIDES inside its own media query, and declares nothing
   outside it — so the component's own `display` stands when visible.
   Never use `display:revert` to un-hide: revert drops to the UA origin and
   discards the component's authored display (an inline-flex burger became an
   inline box, collapsing its bars to 0x0).
   ws-hide-desktop is the exact complement of ws-hide-tablet at 991/992px. */
@media (min-width:992px) {
  .ws-hide-desktop {
    display:none!important;
  }
}

@media (max-width:991px) {
  .ws-hide-tablet {
    display:none!important;
  }
}

@media (max-width:767px) {
  .ws-hide-mobile {
    display:none!important;
  }
}

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