/* Meridian Labels
   ---------------------------------------------------------------------------
   Rebuilt, July 2026. The first version had eight bands in eight different
   colours that did not build on one another, and a high-contrast didone serif
   fighting an electric-violet palette — the serif said heritage, the violet
   said software, and neither won. It also put its weakest copy in every
   headline slot above genuinely specific body copy.

   This version is a specimen sheet. A label printer's website should be built
   out of labels:

     · ONE ink. Violet, on paper. No mint, no lilac, no eight-colour stack.
     · Die-cut swatches as the primary component — real corner radii, real
       stock colours, doing navigation as well as decoration.
     · Spec-sheet typography: dotted leader rules between a property and its
       value, tabular figures, and a 12px caps label. This is what a print
       specification actually looks like on paper.
     · The run-length scale drawn as a diagram, because "digital below 8,000,
       flexo above 40,000" is the most useful thing this company knows and a
       paragraph is a poor way to say it.
   --------------------------------------------------------------------------- */

/* ---- fonts ---- */
/* Archivo carries the display work, and it carries it WIDE — the variable
   width axis is set to 112 on headings. A label is a wide format, and a wide
   grotesque reads as packaging and print rather than as an app. Public Sans
   sets everything else: a neutral, wide-aperture text face that stays legible
   at 13px in a spec table, which is where most of this site lives. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-stretch: 62% 125%; font-display: swap; src: url('/assets/fonts/archivo.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/public-sans.woff2') format('woff2'); }
@font-face { font-family: 'Archivo fallback'; src: local('Helvetica Neue'), local('Arial'); ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; size-adjust: 104%; }
@font-face { font-family: 'Public fallback'; src: local('Helvetica Neue'), local('Arial'); ascent-override: 96%; descent-override: 25%; line-gap-override: 0%; size-adjust: 100%; }

/* ---- tokens ---- */
:root {
  /* The violet is the accent — the ink this press runs — not the surface. It
     used to paint the header, the hero and the figures band, which put
     saturated purple across the top two-thirds of every page and made a
     forty-year-old trade printer read as a software launch. It now appears at
     the size a spot colour appears at: buttons, rules, figures, kickers. */
  --violet: #5b21d6;      /* 8.0:1 under white — used as fill and as text */
  --violet-deep: #191428; /* the dark surface: near-black, faint violet cast */
  --ink: #17131f;
  --paper: #ffffff;
  --stock: #f4f2f7;       /* coated stock: a violet-tinted paper, not a warm grey */

  /* Material swatch colours. These are stock samples, never page surfaces. */
  --kraft: #c9b191;
  --silver: #d4d6dd;

  --accent: var(--violet);
  --muted: #55506b;       /* 7.4:1 on white, 6.5:1 on stock */
  --rule: #dcd7ea;

  --display: 'Archivo', 'Archivo fallback', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Public Sans', 'Public fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --wrap: 1320px;
  --gutter: 20px;

  --t-display: clamp(2.6rem, 1.3rem + 5.2vw, 5.75rem);
  --t-h1: clamp(2.2rem, 1.5rem + 2.8vw, 3.75rem);
  --t-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  --t-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --t-figure: clamp(2.2rem, 1.5rem + 2.6vw, 3.75rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --t-body: 1rem;
  --t-sm: 0.875rem;
  --t-xs: 0.8125rem;
  --t-label: 0.75rem;

  /* A die-cut label has a small, consistent corner radius — 2 or 3mm on a
     60mm label. The old build's 24px pill radius was doing a softness that a
     print business does not want. */
  --radius: 5px;
  --radius-lg: 10px;
  --pad: clamp(60px, 6vw, 116px);
}

/* Every dark surface redeclares its tokens, kept separate from the background
   so a surface that paints itself violet cannot inherit the light-surface set. */
.on-violet, .on-deep, .site-footer, .menu {
  --accent: #ffffff;
  --muted: #cfc4ee;       /* 6.9:1 on violet, 10.9:1 on deep */
  --rule: rgba(255, 255, 255, 0.26);
}
.on-violet { background: var(--violet); color: var(--paper); }
.on-deep, .site-footer { background: var(--violet-deep); color: var(--paper); }

/* The header is paper with an ink rule under it. As a solid violet band it was
   the third purple block above the fold and it fought the hero for attention. */
.site-header { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule); }
.on-stock { background: var(--stock); }

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
/* Wide, mixed case, weight 600. The width axis is the identity here, rather
   than the tight tracking every other technical site is reaching for. */
h1, h2, h3, h4 {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-variation-settings: 'wdth' 112; line-height: 1.08;
  letter-spacing: -0.005em; text-wrap: balance;
}
h3, h4 { font-variation-settings: 'wdth' 106; line-height: 1.22; letter-spacing: 0; }
p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--violet); color: #fff; padding: 12px 18px; border-radius: var(--radius); font-weight: 700; text-decoration: none; transition: top .15s ease; }
.skip:focus { top: 16px; }

/* ---- layout ---- */
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 900px) { .wrap { padding-inline: 44px; } }
.section { padding-block: var(--pad); }
.section--tight { padding-block: clamp(40px, 4vw, 68px); }
.measure { max-width: 36em; }

/* ---- type ---- */
.display { font-size: var(--t-display); }
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }
.lead { font-size: var(--t-lead); line-height: 1.5; max-width: 34em; }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
/* The one caps device on the site: a spec-sheet field label. */
.kicker { display: block; margin: 0 0 clamp(14px, 1.4vw, 22px); font-family: var(--sans); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.prose { max-width: 36em; }
.prose a:not(.btn), .link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:not(.btn):hover, .link:hover { text-decoration-thickness: 2px; }

/* Section head: heading left, standfirst right, on one baseline. */
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 60px); align-items: end; margin-bottom: clamp(32px, 3.6vw, 60px); }
.head > :last-child { color: var(--muted); max-width: 34em; }
.head p { margin: 0; }
@media (max-width: 840px) { .head { grid-template-columns: 1fr; align-items: start; } }

/* ---- buttons ---- */
/* One verb per action. The old build had six ways to say "read more" and
   floated them at the right edge of section headings, where they read as
   decoration rather than as controls. */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 13px 26px; background: var(--violet); color: #fff; border: 1px solid var(--violet); border-radius: var(--radius); font-weight: 700; font-size: var(--t-sm); text-decoration: none; cursor: pointer; transition: background-color .16s ease, color .16s ease; }
.btn:hover { background: var(--violet-deep); border-color: var(--violet-deep); }
.btn--ghost { background: transparent; color: var(--violet); }
.btn--ghost:hover { background: var(--violet); color: #fff; }
.on-violet .btn, .on-deep .btn, .site-footer .btn { background: #fff; color: var(--violet); border-color: #fff; }
.on-violet .btn:hover, .on-deep .btn:hover, .site-footer .btn:hover { background: transparent; color: #fff; }
.on-violet .btn--ghost, .on-deep .btn--ghost, .site-footer .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.on-violet .btn--ghost:hover, .on-deep .btn--ghost:hover, .site-footer .btn--ghost:hover { background: #fff; color: var(--violet); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.arrow-link { display: inline-flex; align-items: center; gap: 8px; padding-block: 6px; font-weight: 700; font-size: var(--t-sm); text-decoration: none; color: var(--accent); border-bottom: 1px solid currentColor; }
.arrow-link:hover { gap: 13px; }
@media (prefers-reduced-motion: reduce) { .arrow-link:hover { gap: 8px; } }

/* ---- header ---- */
.site-header .wrap { display: flex; align-items: center; gap: 22px; min-height: 78px; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 108; font-size: 1.3rem; letter-spacing: -0.01em; }
.brand__mark { width: 24px; height: 24px; flex: 0 0 auto; }
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a { font-size: var(--t-sm); font-weight: 600; text-decoration: none; padding-block: 6px; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current='page'] { border-bottom-color: var(--violet); color: var(--violet); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; margin-left: auto; background: none; border: 1px solid currentColor; border-radius: var(--radius); cursor: pointer; }
.nav-toggle > span { display: grid; gap: 4px; width: 20px; }
.nav-toggle > span > span { height: 2px; background: currentColor; }

.menu { position: fixed; inset: 0; z-index: 60; background: var(--violet-deep); color: #fff; padding: 18px var(--gutter) 46px; overflow-y: auto; overscroll-behavior: contain; }
.menu[hidden] { display: none; }
.menu__head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-bottom: 26px; }
.menu__close { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: none; border: 1px solid currentColor; border-radius: var(--radius); cursor: pointer; }
.menu__nav a { display: block; padding: 14px 0; font-family: var(--display); font-weight: 600; font-variation-settings: 'wdth' 108; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem); text-decoration: none; border-bottom: 1px solid var(--rule); }
body.menu-open { overflow: hidden; }

/* ---- die-cut swatch ----
   The site's primary component. A label-shaped tile at a real die-cut radius,
   in a real stock colour, carrying a label type and doubling as navigation. */
/* ---- estimator ----
   A white card on the deep hero. Like a swatch it is its own island and
   redeclares the tokens it needs, so nothing inherits the dark surface's
   light-lavender body colour onto white. */
.estimator {
  --muted: #55506b;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius); padding: clamp(22px, 2.2vw, 30px);
  box-shadow: 0 24px 60px -30px rgba(12, 4, 40, .7);
}
.estimator__title { font-size: 1.125rem; margin: 0 0 20px; }
.estimator__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .estimator__grid { grid-template-columns: 1fr; } }
.estimator .field span { font-size: var(--t-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.estimator .field select { min-height: 46px; padding: 11px 12px; }
.estimator__out {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px;
  margin-top: 22px; padding-top: 20px; border-top: 2px solid var(--violet);
}
.estimator__label { font-size: var(--t-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.estimator__price, .estimator__lead {
  margin: 8px 0 4px; font-family: var(--display); font-weight: 600;
  font-variation-settings: 'wdth' 108; line-height: 1; font-variant-numeric: tabular-nums;
}
.estimator__price { font-size: clamp(2rem, 3.4vw, 2.75rem); }
.estimator__lead { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.estimator__unit { margin: 0; font-size: var(--t-xs); color: var(--muted); }
.estimator__note { margin: 18px 0 0; font-size: var(--t-xs); color: var(--muted); line-height: 1.55; }
.estimator__note a { color: var(--violet); }

.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
@media (max-width: 900px) { .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .swatches { grid-template-columns: 1fr; } }

/* A swatch is an island: it carries its own ground, so it redeclares its own
   muted and accent rather than inheriting the section's. Without this a white
   paper tile inside the deep-violet hero picks up the dark surface's light
   lavender for its body copy and lands at about 1.6:1 on white. */
.swatch {
  --muted: #55506b;
  --stock-ink: var(--violet);
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  text-decoration: none; overflow: hidden;
  transition: border-color .16s ease, transform .16s ease;
}
/* The photograph is the sample. It carries the top of the tile and the copy
   sits under it, so the grid reads as six printed jobs rather than six boxes. */
.swatch__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--stock); }
.swatch__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
a.swatch:hover { border-color: var(--violet); transform: translateY(-3px); }
.swatch__no { font-size: var(--t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.swatch h3 { font-size: 1.0625rem; }
.swatch p { margin: 0; font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }
.swatch__stock { margin-top: auto; padding-top: 14px; font-size: var(--t-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stock-ink); }
/* Stock variants. Each is a material sample: it changes the tile's face and
   nothing about the page around it, and each is checked on its own ground. */
.swatch--kraft { background: var(--kraft); border-color: #a98d68; --muted: #33280f; --stock-ink: #33280f; }
.swatch--silver { background: var(--silver); border-color: #a9acb6; --muted: #26282f; --stock-ink: #26282f; }
/* Solid ink. Uses the bright violet rather than the deep one so the tile stays
   distinguishable inside a deep-violet section. */
.swatch--ink { background: var(--violet); border-color: #7a4ce4; color: #fff; --muted: #e2d8fb; --stock-ink: #fff; }
/* Clear-on-clear: a transparent face stock, drawn as a fine hatch showing
   through rather than as a grey box. Because it is transparent, it is the one
   swatch whose text colour has to follow the surface underneath it. */
.swatch--clear {
  background:
    linear-gradient(rgba(91,33,214,.05), rgba(91,33,214,.05)),
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(91,33,214,.1) 7px 8px);
  border-style: dashed; border-color: #a99cd4;
}
.on-violet .swatch, .on-deep .swatch { border-color: rgba(255,255,255,.3); }
.on-violet .swatch--clear, .on-deep .swatch--clear {
  color: #fff; border-color: rgba(255,255,255,.5);
  background:
    linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)),
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(255,255,255,.16) 7px 8px);
}
.on-violet .swatch--clear, .on-deep .swatch--clear { --muted: #d7ccf5; --stock-ink: #fff; }
@media (prefers-reduced-motion: reduce) { a.swatch:hover { transform: none; } }

/* ---- run-length scale ----
   The decision this company is actually paid for, drawn as a scale instead of
   described in a paragraph. Every zone carries its own text label, so the
   fills are redundant rather than load-bearing. */
.runscale { display: grid; gap: 10px; }
.runscale__bar { display: flex; gap: 4px; }
.runscale__zone { flex: 0 0 var(--w); display: grid; gap: 6px; padding: 18px 16px 20px; border-radius: var(--radius); min-width: 0; }
.runscale__zone b { font-family: var(--display); font-weight: 600; font-variation-settings: 'wdth' 106; font-size: 1.0625rem; line-height: 1.2; }
.runscale__zone span { font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.runscale__zone--a { background: var(--violet); color: #fff; }
.runscale__zone--a span { color: #ded4fb; }
.runscale__zone--b { background: #ddd4f5; color: var(--ink); }
.runscale__zone--b span { color: #453e5c; }
.runscale__zone--c { background: var(--violet-deep); color: #fff; }
.runscale__zone--c span { color: #cfc4ee; }
.runscale__axis { display: flex; justify-content: space-between; font-size: var(--t-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) {
  .runscale__bar { flex-direction: column; }
  .runscale__zone { flex: 1 1 auto; }
  .runscale__axis { display: none; }
}

/* ---- spec sheet ----
   Dotted leader rules between a property and its value. This is what a print
   specification looks like on paper, and it is a better use of the space than
   a bordered table for two-column data. */
.spec { display: grid; gap: 0; }
.spec > div { display: flex; align-items: baseline; gap: 8px; padding-block: 13px; border-bottom: 1px solid var(--rule); }
.spec dt { flex: 0 0 auto; font-size: var(--t-sm); font-weight: 700; }
.spec .leader { flex: 1 1 auto; height: 2px; margin-bottom: 4px; background-image: radial-gradient(circle, var(--rule) 1px, transparent 1.2px); background-size: 5px 2px; background-repeat: repeat-x; }
.spec dd { flex: 0 0 auto; margin: 0; font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.on-violet .spec .leader, .on-deep .spec .leader { background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.2px); }

/* ---- figures ---- */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.figures > div { padding-top: 18px; border-top: 2px solid var(--violet); }
.on-violet .figures > div, .on-deep .figures > div { border-top-color: #fff; }
.figures dt { font-family: var(--display); font-weight: 600; font-variation-settings: 'wdth' 108; font-size: var(--t-figure); line-height: 1; font-variant-numeric: tabular-nums; }
.figures dd { margin: 10px 0 0; font-size: var(--t-sm); color: var(--muted); }
@media (max-width: 720px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- service rows ---- */
.rows > li { padding-block: clamp(24px, 2.6vw, 40px); border-top: 1px solid var(--rule); }
.rows > li:last-child { border-bottom: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 4.5rem minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2.4vw, 44px); align-items: start; }
.row__n { font-family: var(--display); font-weight: 600; font-variation-settings: 'wdth' 108; font-size: 1.5rem; line-height: 1.1; color: var(--violet); font-variant-numeric: tabular-nums; }
.on-violet .row__n, .on-deep .row__n { color: #fff; }
@media (max-width: 800px) { .row { grid-template-columns: 3rem minmax(0, 1fr); } .row > :last-child { grid-column: 2; } }

/* ---- cards ---- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 940px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards, .cards--2 { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: border-color .16s ease, transform .16s ease; }
.card:hover { border-color: var(--violet); transform: translateY(-3px); }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card__body { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1 1 auto; }
.card__date { font-size: var(--t-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.card h3 { font-size: 1.0625rem; }
.card p { margin: 0; font-size: var(--t-xs); color: var(--muted); line-height: 1.55; }
.card__cta { margin-top: auto; padding-top: 14px; font-size: var(--t-sm); font-weight: 700; color: var(--violet); }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }

/* ---- split + figure ---- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(26px, 3.6vw, 68px); align-items: start; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--mid { align-items: center; }
@media (max-width: 880px) { .split, .split--even { grid-template-columns: 1fr; } }
.figure img { width: 100%; border-radius: var(--radius-lg); }
.figure figcaption { margin-top: 12px; font-size: var(--t-sm); color: var(--muted); }
.bleed-media img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; border-radius: var(--radius-lg); }

/* ---- ticks ---- */
.ticks { display: grid; gap: 11px; }
.ticks > li { position: relative; padding-left: 26px; font-size: var(--t-sm); }
.ticks > li::before { content: ''; position: absolute; left: 0; top: .5em; width: 13px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 38px; }
@media (max-width: 700px) { .ticks--2 { grid-template-columns: 1fr; } }

/* ---- table ---- */
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.data { width: 100%; min-width: 520px; border-collapse: collapse; }
.data caption { text-align: left; font-size: var(--t-sm); color: var(--muted); padding-bottom: 14px; }
.data th, .data td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); }
.data thead th { font-size: var(--t-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.data td { font-variant-numeric: tabular-nums; }

/* ---- forms ---- */
.form { display: grid; gap: 20px; max-width: 600px; }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--t-sm); font-weight: 700; }
.field input, .field select, .field textarea { font: inherit; color: var(--ink); width: 100%; min-height: 50px; padding: 13px 14px; background: #fff; border: 1px solid #6b6580; border-radius: var(--radius); }
.field textarea { min-height: 150px; resize: vertical; }
.field.invalid input, .field.invalid textarea { border-color: #9c1414; }
.field .error { margin: 0; font-size: var(--t-sm); color: #8a1212; }
.on-violet .field .error, .on-deep .field .error { color: #ffc0bd; }
.field:not(.invalid) .error { display: none; }
.field--hp { position: absolute; left: -9999px; }
.form-note { font-size: var(--t-sm); color: var(--muted); max-width: 36em; }

/* ---- footer ---- */
.site-footer { padding-top: clamp(54px, 5vw, 88px); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 34px 28px; padding-bottom: 44px; }
.footer-grid h2 { font-family: var(--sans); font-size: var(--t-label); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 16px; color: #fff; }
.footer-grid li { padding: 4px 0; font-size: var(--t-sm); }
.footer-grid a { text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Without an explicit box the inline SVG takes its intrinsic size and fills
   the footer with a single 400px glyph. */
.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: var(--radius); }
.socials a:hover { background: #fff; color: var(--violet-deep); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }

.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 22px; border-top: 1px solid var(--rule); font-size: var(--t-xs); color: var(--muted); }
.footer-legal a { text-decoration: none; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- reveal ---- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { scroll-behavior: auto !important; } }

@media (max-width: 1040px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .brand { margin-right: 0; }
}