/* ==========================================================================
   fill-service.eu — DESIGN PACK  v1.0
   Direction B "Nameplate" · light ground · implements D-57, D-58
   Class convention per FREEZE-CONTRACT Item 2 (fs- prefix, BEM, ground as
   a SECTION-LEVEL modifier so no component ever names a colour).

   Everything in this file is on the FREE-TO-CHANGE-FOREVER list of D-58.
   One save applies across 19 pages and later all five languages.

   CONTENTS
     1  Tokens — the palette, once
     2  Ground system — the reversibility mechanism
     3  Reset and base
     4  Type scale
     5  Layout primitives
     6  Motif — the nameplate frame
     7  Components  C-01 … C-20
     8  Motion
     9  Responsive
   ========================================================================== */


/* 1 — TOKENS ============================================================== */
/* The five colours of Direction B, plus states. Nothing else is a colour.   */

:root {
  /* palette */
  --fs-ink:        #0E1419;  /* machined near-black, blue bias   */
  --fs-steel:      #1B2A38;  /* deep steel blue, survives from 5.5 */
  --fs-paper:      #E9ECEE;  /* cool paper — NOT beige (D-57)    */
  --fs-machined:   #8FB3CC;  /* cool highlight: hairlines, data  */
  --fs-accent:     #C4551F;  /* orange on light                  */
  --fs-accent-lit: #E2712F;  /* the same orange lifted for dark ground */

  /* states */
  --fs-success:    #2E8B57;
  --fs-warning:    #E8A33D;
  --fs-error:      #C0392B;

  /* type */
  --fs-face-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fs-face-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --fs-face-data:    "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* spacing scale — 4px base, named by use not by number */
  --fs-s1: 4px;   --fs-s2: 8px;   --fs-s3: 12px;  --fs-s4: 16px;
  --fs-s5: 24px;  --fs-s6: 32px;  --fs-s7: 48px;  --fs-s8: 64px;
  --fs-s9: 96px;  --fs-s10: 128px;

  /* structure */
  --fs-measure: 68ch;          /* long-form reading column        */
  --fs-width:   1240px;        /* outer container                 */
  --fs-hair:    1px;           /* hairline weight — one variable  */
  --fs-radius:  2px;           /* machined, not rounded           */
  --fs-edge:    6px;           /* the accent edge of a plate      */
  --fs-wordmark-ar: 7.5273;  /* wordmark width ÷ height. The ONE number to
                                  change if the artwork's proportions change. */

  /* motion */
  --fs-ease:    cubic-bezier(.2, .6, .2, 1);
  --fs-fast:    140ms;
  --fs-slow:    620ms;
}


/* 2 — GROUND SYSTEM ======================================================= */
/* A section declares a ground; every component inside reads semantic vars.
   This is the whole of D-57's reversibility: flipping the site to dark is
   editing the two blocks below, not the 19 pages.
   .fs-invert on <html> swaps them — proof that it is a token job.          */

.fs-section,
html.fs-invert .fs-section--dark {
  --ground:  var(--fs-paper);
  --raise:   #F3F5F6;
  --plate:   #FCFDFD;
  --text:    #111820;
  --dim:     #4A4F54;
  --rule:    #C4CFD6;
  --hair:    #D5DDE1;
  --accent:  var(--fs-accent);
  --data:    #35617D;
  --stamp:   #6C8194;
  --shadow:  0 1px 0 rgba(14, 20, 25, .04), 0 12px 28px -18px rgba(14, 20, 25, .5);
}

.fs-section--dark,
html.fs-invert .fs-section:not(.fs-section--dark) {
  --ground:  var(--fs-ink);
  --raise:   #141E26;
  --plate:   #131C24;
  --text:    #E9ECEE;
  --dim:     #93A6B3;
  --rule:    #2B3A45;
  --hair:    #223039;
  --accent:  var(--fs-accent-lit);
  --data:    var(--fs-machined);
  --stamp:   #7C97AA;
  --shadow:  0 1px 0 rgba(255, 255, 255, .03), 0 16px 32px -20px #000;
}

.fs-section {
  background: var(--ground);
  color: var(--text);
  position: relative;
}


/* 3 — RESET AND BASE ====================================================== */

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

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

body {
  margin: 0;
  background: var(--fs-paper);
  color: #111820;
  font-family: var(--fs-face-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--fs-accent); color: #fff; }

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent, var(--fs-accent));
  outline-offset: 3px;
  border-radius: var(--fs-radius);
}


/* 4 — TYPE SCALE ========================================================== */

.fs-h1, .fs-h2, .fs-h3, .fs-h4 {
  font-family: var(--fs-face-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

.fs-h1 { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.4rem); }
.fs-h2 { font-size: clamp(1.85rem, 1.25rem + 1.8vw, 2.6rem); line-height: 1.1; }
.fs-h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.012em; }
.fs-h4 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.008em; font-weight: 600; }

.fs-lede {
  font-size: clamp(1.075rem, 1rem + .35vw, 1.3rem);
  line-height: 1.55;
  color: var(--text);
  max-width: 62ch;
  margin: 0;
}

.fs-body { max-width: var(--fs-measure); }
.fs-body p { margin: 0 0 1.15em; }
.fs-body > :last-child { margin-bottom: 0; }

.fs-dim { color: var(--dim); }

.fs-micro {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--dim);
}

/* the kicker / stamped label — the mono voice of the site */
.fs-kicker {
  font-family: var(--fs-face-data);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stamp);
  margin: 0 0 var(--fs-s4);
  display: block;
}

/* THE MONO RULE — every model, serial, format and figure on the site.
   One class, applied in the markup, so it survives a typeface swap.       */
.fs-data {
  font-family: var(--fs-face-data);
  font-size: .94em;          /* mono runs large next to Plex Sans */
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;       /* a model or a format never breaks across lines */
  color: var(--data);
}

/* inline text links — prose only, never nav or footer lists */
.fs-body a:not([class]), .fs-nameplate a:not([class]) {
  color: var(--text);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% var(--fs-hair);
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--fs-fast) var(--fs-ease), color var(--fs-fast) var(--fs-ease);
}
.fs-body a:not([class]):hover,
.fs-nameplate a:not([class]):hover { color: var(--accent); background-size: 100% 2px; }


/* 5 — LAYOUT PRIMITIVES =================================================== */

.fs-wrap {
  width: 100%;
  max-width: var(--fs-width);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

.fs-section > .fs-wrap { padding-block: clamp(56px, 8vw, 104px); }
.fs-section--tight > .fs-wrap { padding-block: clamp(32px, 4vw, 48px); }

/* the hairline that separates two sections sharing a ground. Where the
   ground changes, the change itself is the separation.                   */
.fs-section:not(.fs-section--dark) + .fs-section:not(.fs-section--dark)::before,
.fs-section--dark + .fs-section--dark::before {
  content: "";
  position: absolute;
  inset: 0 clamp(20px, 5vw, 56px) auto;
  height: var(--fs-hair);
  background: var(--hair);
}

.fs-head { margin-bottom: var(--fs-s7); max-width: 46ch; }
.fs-head .fs-lede { margin-top: var(--fs-s4); color: var(--dim); }

.fs-grid { display: grid; gap: clamp(20px, 2.5vw, 32px); }
.fs-grid > * { min-width: 0; }   /* grid items default to min-content — this is
                                    what stops a spec table widening the page */
.fs-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fs-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fs-grid--4 { grid-template-columns: repeat(4, 1fr); }


/* 6 — THE MOTIF: NAMEPLATE FRAME ========================================== */
/* A hairline-boxed plate with a stamped mono label sitting on its top edge
   and four corner marks. Taken off the machine itself, which is also where
   the customer finds the serial number every form asks for.               */

.fs-plate {
  position: relative;
  border: var(--fs-hair) solid var(--rule);
  border-radius: var(--fs-radius);
  background-color: var(--plate);
  padding: clamp(24px, 3.2vw, 40px);

  /* the four fixings, drawn rather than nested */
  background-image:
    radial-gradient(circle 1.5px at 10px 10px, var(--rule) 98%, transparent 100%),
    radial-gradient(circle 1.5px at calc(100% - 10px) 10px, var(--rule) 98%, transparent 100%),
    radial-gradient(circle 1.5px at 10px calc(100% - 10px), var(--rule) 98%, transparent 100%),
    radial-gradient(circle 1.5px at calc(100% - 10px) calc(100% - 10px), var(--rule) 98%, transparent 100%);
  background-repeat: no-repeat;
}

.fs-plate__label {
  position: absolute;
  top: 0;
  left: clamp(18px, 2.4vw, 28px);
  transform: translateY(-50%);
  background: var(--ground);
  padding-inline: var(--fs-s3);
  font-family: var(--fs-face-data);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stamp);
  white-space: nowrap;
}



/* 7 — COMPONENTS ========================================================== */

/* --- C-01 site-header ---------------------------------------------------- */

/* Header and footer carry fs-section--dark in the markup like any other
   section. They name no colour of their own, which is what keeps the
   ground decision reversible everywhere including the chrome.            */
.fs-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: var(--fs-hair) solid var(--hair);
  transition: box-shadow var(--fs-slow) var(--fs-ease);
}
.fs-header .fs-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-s6);
  padding-block: var(--fs-s5);
  transition: padding-block var(--fs-slow) var(--fs-ease);
}
.fs-header--condensed { box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .9); }
.fs-header--condensed .fs-header__inner { padding-block: var(--fs-s3); }

/* WORDMARK — ONE SOURCE, EVERYWHERE.
   The artwork is never re-typeset in markup. It exists once, as
   brand/wordmark-symbol.svg, embedded once per page; the header, the footer
   and anywhere else all <use> that single definition. Replacing that one file
   changes the logo across the site — nothing else has to be found and edited.
   The letters take currentColor and the mark and TLD take the ground tokens,
   so the same artwork serves the light and dark grounds without a variant.

   In WordPress the same rule is enforced by the platform: the Site Logo block
   inside C-01 and C-02 both resolve to the single Site Logo media item, and the
   favicon comes from the single Site Icon setting. Never hard-code an <img>. */

.fs-wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  transition: opacity var(--fs-fast) var(--fs-ease);
}
.fs-wordmark:hover { opacity: .82; }
.fs-wordmark__svg {
  --h: 21px;
  display: block;
  height: var(--h);
  width: calc(var(--h) * var(--fs-wordmark-ar));
  transition: height var(--fs-slow) var(--fs-ease), width var(--fs-slow) var(--fs-ease);
}
.fs-header--condensed .fs-wordmark__svg { --h: 19px; }
.fs-footer .fs-wordmark__svg { --h: 20px; }

.fs-nav__list { display: flex; gap: clamp(14px, 1.8vw, 28px); align-items: center; }

/* the menu button — hidden until the nav collapses */
.fs-nav__toggle {
  display: none;
  align-items: center;
  gap: 10px;
  background: none;
  border: var(--fs-hair) solid var(--rule);
  border-radius: var(--fs-radius);
  color: var(--text);
  font-family: var(--fs-face-data);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color var(--fs-fast) var(--fs-ease);
}
.fs-nav__toggle:hover { border-color: var(--accent); }
.fs-nav__bars { position: relative; width: 15px; height: 9px; flex: 0 0 auto; }
.fs-nav__bars::before, .fs-nav__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--accent);
  transition: transform var(--fs-slow) var(--fs-ease);
}
.fs-nav__bars::before { top: 0; }
.fs-nav__bars::after  { bottom: 0; }
.fs-nav__toggle[aria-expanded="true"] .fs-nav__bars::before { transform: translateY(3.75px) rotate(45deg); }
.fs-nav__toggle[aria-expanded="true"] .fs-nav__bars::after  { transform: translateY(-3.75px) rotate(-45deg); }
.fs-nav__item {
  font-size: .875rem;
  font-weight: 500;
  color: var(--dim);
  text-decoration: none;
  padding-block: var(--fs-s2);
  position: relative;
  white-space: nowrap;
  transition: color var(--fs-fast) var(--fs-ease);
}
.fs-nav__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fs-slow) var(--fs-ease);
}
.fs-nav__item:hover { color: var(--text); }
.fs-nav__item:hover::after,
.fs-nav__item[aria-current="page"]::after { transform: scaleX(1); }
.fs-nav__item[aria-current="page"] { color: var(--text); }

/* --- buttons ------------------------------------------------------------- */

.fs-btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: var(--fs-s3);
  font-family: var(--fs-face-body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .005em;
  padding: 18px 26px;
  border: var(--fs-hair) solid transparent;
  border-radius: var(--fs-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--fs-fast) var(--fs-ease), box-shadow var(--fs-fast) var(--fs-ease);
}
.fs-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity var(--fs-fast) var(--fs-ease);
}
.fs-btn > * { position: relative; }
.fs-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px var(--accent); }
.fs-btn:hover::before { opacity: .14; }
.fs-btn:active { transform: translateY(0); }

.fs-btn__arrow { transition: transform var(--fs-slow) var(--fs-ease); }
.fs-btn:hover .fs-btn__arrow { transform: translateX(4px); }

.fs-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--rule);
}
.fs-btn--ghost:hover { box-shadow: none; border-color: var(--accent); }
.fs-btn--ghost:hover::before { opacity: 0; }

/* secondary CTA — a text link that behaves like one */
.fs-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--fs-s2);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-bottom: var(--fs-hair) solid var(--rule);
  padding-bottom: 3px;
  transition: color var(--fs-fast) var(--fs-ease), border-color var(--fs-fast) var(--fs-ease);
}
.fs-link:hover { color: var(--accent); border-color: var(--accent); }
.fs-link__arrow { transition: transform var(--fs-slow) var(--fs-ease); }
.fs-link:hover .fs-link__arrow { transform: translateX(4px); }

/* --- C-04 hero-primary --------------------------------------------------- */

.fs-hero { position: relative; overflow: hidden; }
.fs-hero .fs-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 88px) clamp(44px, 5.5vw, 76px);
}
/* the hero image is cropped to 4:3 on desktop, so the manifest's 16:9
   plate wants its subject centred with headroom. Below 1024 it reverts
   to the source ratio.                                                  */
.fs-hero__media .fs-figure__frame { aspect-ratio: 4 / 3; }
.fs-hero__media .fs-figure__frame img { height: 100%; object-fit: cover; object-position: center; }
.fs-hero__h1 { margin-bottom: var(--fs-s5); }
.fs-hero__lede { margin-bottom: var(--fs-s5); }
.fs-hero__sub {
  font-family: var(--fs-face-data);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--dim);
  border-top: var(--fs-hair) solid var(--hair);
  padding-top: var(--fs-s4);
  margin: 0 0 var(--fs-s6);
  max-width: 56ch;
}
.fs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-s5) var(--fs-s6);
  margin-bottom: var(--fs-s4);
}
.fs-hero__micro { max-width: 46ch; }

/* --- C-19 figure --------------------------------------------------------- */

.fs-figure { margin: 0; position: relative; }
.fs-figure__frame {
  position: relative;
  border: var(--fs-hair) solid var(--rule);
  border-radius: var(--fs-radius);
  overflow: hidden;
  background: var(--raise);
}
.fs-figure__frame img {
  width: 100%;
  filter: saturate(.88) contrast(1.02);
  transform: scale(1.001);
  transition: filter var(--fs-slow) var(--fs-ease), transform 900ms var(--fs-ease);
}
.fs-figure:hover .fs-figure__frame img { filter: saturate(1) contrast(1.02); transform: scale(1.02); }
.fs-figure__tag {
  position: absolute;
  left: var(--fs-s4);
  bottom: var(--fs-s4);
  z-index: 2;
  font-family: var(--fs-face-data);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #E9ECEE;
  background: rgba(14, 20, 25, .82);
  border: var(--fs-hair) solid rgba(143, 179, 204, .3);
  border-radius: var(--fs-radius);
  padding: 7px 11px;
  backdrop-filter: blur(3px);
}
.fs-figure__caption {
  margin-top: var(--fs-s3);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--dim);
}

/* --- C-06 nameplate ------------------------------------------------------ */
/* Body weight, full contrast. Never small print — the disclosure sells.     */

.fs-nameplate { max-width: 92ch; }
.fs-nameplate__body {
  font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}
.fs-nameplate__body strong { font-weight: 600; }

/* --- C-07 trust-strip ---------------------------------------------------- */

.fs-trust { display: grid; grid-template-columns: repeat(3, 1fr); }
.fs-trust__item {
  padding: var(--fs-s5) clamp(16px, 2.4vw, 32px);
  border-left: var(--fs-hair) solid var(--hair);
}
.fs-trust__item:first-child { border-left: 0; padding-left: 0; }
.fs-trust__heading {
  font-family: var(--fs-face-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--fs-s2);
}
.fs-trust__sub { font-size: .875rem; line-height: 1.5; color: var(--dim); margin: 0; }

/* --- C-08 time-triad ----------------------------------------------------- */

.fs-triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.fs-triad__cell {
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2.6vw, 36px);
  border-left: var(--fs-hair) solid var(--rule);
  position: relative;
}
.fs-triad__cell:first-child { border-left: 0; padding-left: 0; }
.fs-triad__fig {
  font-family: var(--fs-face-data);
  font-size: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  display: block;
  margin-bottom: var(--fs-s4);
}
.fs-triad__fig span { color: var(--accent); }
.fs-triad__label {
  font-family: var(--fs-face-display);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--fs-s2);
}
.fs-triad__note { font-size: .875rem; line-height: 1.5; color: var(--dim); margin: 0; }

/* --- C-10 service-card --------------------------------------------------- */

.fs-card {
  display: flex;
  flex-direction: column;
  background: var(--plate);
  border: var(--fs-hair) solid var(--rule);
  border-radius: var(--fs-radius);
  padding: clamp(24px, 2.6vw, 32px);
  text-decoration: none;
  color: var(--text);
  position: relative;
  isolation: isolate;
  transition: transform var(--fs-slow) var(--fs-ease),
              border-color var(--fs-slow) var(--fs-ease),
              box-shadow var(--fs-slow) var(--fs-ease);
}
.fs-card::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: var(--fs-edge);
  background: var(--accent);
  border-radius: var(--fs-radius) 0 0 var(--fs-radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--fs-slow) var(--fs-ease);
}
.fs-card:hover { transform: translateY(-3px); border-color: var(--rule); box-shadow: var(--shadow); }
.fs-card:hover::before { transform: scaleY(1); }
.fs-card__kicker { margin-bottom: var(--fs-s3); }
.fs-card__title { margin-bottom: var(--fs-s3); }
.fs-card__body { font-size: .9375rem; line-height: 1.6; color: var(--dim); margin: 0 0 var(--fs-s5); flex: 1; }
.fs-card__link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--fs-s2);
  font-size: .875rem;
  font-weight: 600;
  color: var(--accent);
}
.fs-card__link .fs-btn__arrow { transition: transform var(--fs-slow) var(--fs-ease); }
.fs-card:hover .fs-card__link .fs-btn__arrow { transform: translateX(4px); }

/* --- C-09 price-plate ---------------------------------------------------- */
/* The accent is a 6px EDGE, not a filled block, so two plates can sit
   together without shouting. Second plate takes the machined edge.        */

.fs-priceplate {
  position: relative;
  background: var(--plate);
  border: var(--fs-hair) solid var(--rule);
  border-radius: var(--fs-radius);
  border-left-width: var(--fs-edge);
  border-left-color: var(--accent);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--fs-slow) var(--fs-ease), transform var(--fs-slow) var(--fs-ease);
}
.fs-priceplate:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.fs-priceplate--machined { border-left-color: var(--data); }
.fs-priceplate__title {
  font-family: var(--fs-face-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--fs-s4);
}
.fs-priceplate__fig {
  font-family: var(--fs-face-data);
  font-size: clamp(2.15rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--fs-s4);
  color: var(--text);
}
.fs-priceplate__fig small {
  font-size: .375em;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stamp);
  display: block;
  margin-bottom: var(--fs-s3);
}
/* the qualifier is NOT optional — claims-register requirement */
.fs-priceplate__qual {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--dim);
  margin: 0 0 var(--fs-s5);
  flex: 1;
}
.fs-priceplate__cta { align-self: flex-start; }

/* --- C-11 spec-table ----------------------------------------------------- */

.fs-spec { width: 100%; overflow-x: auto; }
.fs-spec__caption {
  text-align: left;
  font-family: var(--fs-face-data);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stamp);
  padding-bottom: var(--fs-s4);
}
.fs-spec table { width: 100%; border-collapse: collapse; }
.fs-spec th, .fs-spec td {
  text-align: left;
  padding: var(--fs-s4) var(--fs-s4) var(--fs-s4) 0;
  border-bottom: var(--fs-hair) solid var(--hair);
  vertical-align: baseline;
}
.fs-spec th {
  font-family: var(--fs-face-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--dim);
  width: 34%;
  white-space: nowrap;
}
.fs-spec td { font-size: .9375rem; }
.fs-spec td.d {
  font-family: var(--fs-face-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;       /* a model or a format never breaks across lines */
  color: var(--data);
}
.fs-spec tr { transition: background var(--fs-fast) var(--fs-ease); }
.fs-spec tbody tr:hover { background: var(--raise); }
.fs-spec tbody tr:hover td.d { color: var(--accent); }
.fs-spec tr:last-child th, .fs-spec tr:last-child td { border-bottom: 0; }

/* --- C-12 proof-pair ----------------------------------------------------- */

.fs-proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }

/* --- C-15 faq ------------------------------------------------------------ */

.fs-faq { border-top: var(--fs-hair) solid var(--rule); }
.fs-faq__item { border-bottom: var(--fs-hair) solid var(--rule); }
.fs-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fs-s5);
  padding: var(--fs-s5) 0;
  font-family: var(--fs-face-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color var(--fs-fast) var(--fs-ease);
}
.fs-faq__q::-webkit-details-marker { display: none; }
.fs-faq__q:hover { color: var(--accent); }
.fs-faq__sign {
  position: relative;
  flex: 0 0 auto;
  width: 14px; height: 14px;
  margin-top: 6px;
}
.fs-faq__sign::before, .fs-faq__sign::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform var(--fs-slow) var(--fs-ease), opacity var(--fs-slow) var(--fs-ease);
}
.fs-faq__sign::before { left: 0; right: 0; top: 6px; height: 2px; }
.fs-faq__sign::after  { top: 0; bottom: 0; left: 6px; width: 2px; }
.fs-faq__item[open] .fs-faq__sign::after { transform: rotate(90deg); opacity: 0; }
.fs-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--fs-slow) var(--fs-ease);
}
.fs-faq__item[open] .fs-faq__a { grid-template-rows: 1fr; }
.fs-faq__a > div { overflow: hidden; }
.fs-faq__a p {
  margin: 0;
  padding-bottom: var(--fs-s5);
  max-width: 72ch;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--dim);
}

/* --- C-16 cta-band ------------------------------------------------------- */

.fs-cta { text-align: left; }
.fs-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-s6);
}
.fs-cta__heading { max-width: 22ch; }
.fs-cta__side {
  display: flex;
  flex-direction: column;
  gap: var(--fs-s4);
  align-items: flex-start;
  max-width: 44ch;
  flex: 0 1 auto;
}

/* --- C-02 site-footer ---------------------------------------------------- */

.fs-footer .fs-wrap { padding-block: clamp(48px, 6vw, 80px) var(--fs-s7); }
.fs-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding-bottom: var(--fs-s7);
  border-bottom: var(--fs-hair) solid var(--hair);
}
.fs-footer__coltitle {
  font-family: var(--fs-face-data);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stamp);
  margin: 0 0 var(--fs-s4);
}
.fs-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fs-s3); }
.fs-footer__list a {
  font-size: .875rem;
  color: var(--dim);
  text-decoration: none;
  transition: color var(--fs-fast) var(--fs-ease);
}
.fs-footer__list a:hover { color: var(--accent); }
.fs-footer__legal {
  padding-top: var(--fs-s6);
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--dim);
  max-width: 90ch;
}
.fs-footer__legal strong { color: var(--text); font-weight: 500; }


/* 8 — MOTION ============================================================== */
/* One reveal, used sparingly: 14px and a fade, staggered per section.
   Anything more is a used-machinery marketplace with a parallax library.  */

[data-fs-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--fs-slow) var(--fs-ease), transform var(--fs-slow) var(--fs-ease);
  transition-delay: var(--fs-delay, 0ms);
  will-change: opacity, transform;
}
[data-fs-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-fs-reveal] { opacity: 1; transform: none; }
}


/* 9 — RESPONSIVE ========================================================== */

@media (max-width: 1024px) {
  .fs-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .fs-footer__cols { grid-template-columns: 1fr 1fr; }
  .fs-hero .fs-hero__inner { grid-template-columns: 1fr; }
  .fs-hero__media { order: -1; }
  .fs-hero__media .fs-figure__frame { aspect-ratio: 16 / 9; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .fs-grid--2, .fs-grid--3, .fs-grid--4, .fs-proof { grid-template-columns: 1fr; }

  .fs-trust, .fs-triad { grid-template-columns: 1fr; }
  .fs-trust__item, .fs-triad__cell {
    border-left: 0;
    border-top: var(--fs-hair) solid var(--hair);
    padding-inline: 0;
  }
  .fs-triad__cell { border-top-color: var(--rule); }
  .fs-trust__item:first-child, .fs-triad__cell:first-child { border-top: 0; padding-top: 0; }

  .fs-nav__toggle { display: inline-flex; }
  .fs-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--ground);
    border-bottom: var(--fs-hair) solid var(--hair);
    padding: 0 clamp(20px, 5vw, 56px);
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--fs-slow) var(--fs-ease);
  }
  .fs-nav > * { overflow: hidden; }
  .fs-nav[data-open="true"] { grid-template-rows: 1fr; }
  .fs-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--fs-s4); }
  .fs-nav__item {
    padding-block: var(--fs-s4);
    border-top: var(--fs-hair) solid var(--hair);
    font-size: 1rem;
  }
  .fs-nav__item::after { display: none; }
  .fs-footer__cols { grid-template-columns: 1fr; }
  /* a spec table on a phone stacks rather than scrolls — the reading
     context is a brewhouse at 11am, not a desk (D-57's assumption)      */
  .fs-spec table, .fs-spec tbody, .fs-spec tr, .fs-spec th, .fs-spec td { display: block; width: auto; }
  .fs-spec tr { padding: var(--fs-s4) 0; border-bottom: var(--fs-hair) solid var(--hair); }
  .fs-spec tr:last-child { border-bottom: 0; }
  .fs-spec th {
    white-space: normal;
    padding: 0 0 var(--fs-s1);
    border-bottom: 0;
    font-family: var(--fs-face-data);
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--stamp);
  }
  .fs-spec td { padding: 0; border-bottom: 0; }
  .fs-cta__inner { flex-direction: column; align-items: flex-start; }
}


/* — DEMO AFFORDANCE — not part of the production pack ---------------------
   Proves D-58's claim that the ground is a token swap, not a rebuild.
   Delete this block when the pack goes into the theme.                    */

.fs-groundtoggle {
  position: fixed;
  right: 20px; bottom: 20px;
  max-width: calc(100vw - 40px);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fs-face-data);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #E9ECEE;
  background: rgba(14, 20, 25, .92);
  border: 1px solid rgba(143, 179, 204, .35);
  border-radius: 999px;
  padding: 11px 16px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color var(--fs-fast) var(--fs-ease), transform var(--fs-fast) var(--fs-ease);
}
.fs-groundtoggle:hover { border-color: var(--fs-accent-lit); transform: translateY(-1px); }
.fs-groundtoggle__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #E9ECEE;
  box-shadow: 0 0 0 1px rgba(143,179,204,.5);
}
html.fs-invert .fs-groundtoggle__dot { background: #0E1419; }
html.fs-invert body { background: var(--fs-ink); }