/* ===========================================================================
   The Web Master — « LE RELEVÉ »
   Design system, written for this site. Replaces main.css from 2026-09-12.

   WHY THIS DESIGN. The business argues from measurement: 410 ranking actions
   tested one at a time out of a leaked API, a fee owed only once a written
   target is reached, and no position ever guaranteed. So the page is dressed as
   an instrument. A brass tick-rule runs through it, every section carries a
   surveyor's coordinate, the numbers are the graphics, and the ground changes
   when the page stops explaining and starts asserting.

   WHAT THE PREVIOUS DESIGN GOT WRONG, measured before rewriting:
     · 0 photographs on the home page — the only image in the project was the
       Open Graph card, so every section was type on blank ivory.
     · 5 sections repeated one pattern: eyebrow / serif h2 / paragraph / grid
       of bordered boxes.
     · 8 bands alternated between two tones of ivory, 2.5 % apart.
     · card borders at 11 % opacity, i.e. below the threshold where an edge
       reads as an edge.
     · 4 gradient declarations in 30 KB of CSS.

   COLOUR CONTRACT (checked by audit/checks/contrast.py, do not loosen):
     --brass is DECORATIVE on paper: 2.4:1. It may rule a hairline, fill a
     numeral at display size, or sit on the dark ground. It may never carry
     body text on paper. --brass-ink is its readable counterpart on paper,
     --brass-lit its readable counterpart on the ground.
     --clay carries price, refusal and limit. --green is structure.
   =========================================================================== */

:root {
  /* ---- grounds ------------------------------------------------------- */
  --paper:     #F5F1E8;   /* warm limestone — Marrakech pisé, not white */
  --paper-2:   #EBE4D5;   /* recessed band */
  --plate:     #FFFCF5;   /* raised plate */
  --ground:    #0C1712;   /* green-black — the anchor ground */
  --ground-2:  #132119;   /* second dark step, so two dark bands separate */

  /* ---- ink ----------------------------------------------------------- */
  --ink:        #0E1A15;  /* 15.1:1 on --paper */
  --ink-2:      #35443C;  /*  8.0:1 on --paper */
  --muted:      #5A685F;  /*  4.9:1 on --paper-2, the darkest it sits on */
  --on-ground:  #EDE7D8;  /* 14.6:1 on --ground */
  --on-ground-2:#A8B5AC;  /*  6.4:1 on --ground */

  /* ---- accents ------------------------------------------------------- */
  --green:     #0F5C46;
  --green-2:   #0A4434;
  --green-lit: #3E9C7E;   /* green that may be read on the ground */
  --brass:     #C4992C;   /* decorative on paper — never body text */
  --brass-ink: #7E6320;   /* 4.9:1 on --paper */
  --brass-lit: #DFBB62;   /* 8.1:1 on --ground */
  --clay:      #B54A26;   /* 4.8:1 on --paper */
  --clay-lit:  #E28259;   /* 6.0:1 on --ground */

  --hair:     rgba(14, 26, 21, .16);
  --hair-2:   rgba(14, 26, 21, .30);
  --hair-lit: rgba(237, 231, 216, .16);

  /* ---- measure ------------------------------------------------------- */
  /* 4px base, then doublings: a ruler counts in equal steps, so no gap on
     this page is a number chosen by eye. */
  --u1: 4px;  --u2: 8px;  --u3: 16px; --u4: 24px;
  --u5: 40px; --u6: 64px; --u7: 104px; --u8: 168px;

  --wrap: 1240px;
  --narrow: 760px;
  --read: 68ch;
  --pad: clamp(20px, 5vw, 64px);

  --shadow-plate: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 28px -18px rgba(14,26,21,.42);
  --shadow-lift:  0 1px 0 rgba(255,255,255,.7) inset, 0 26px 48px -26px rgba(14,26,21,.46);
  --shadow-nav:   0 24px 60px -28px rgba(14,26,21,.42);
  --ease: cubic-bezier(.2, .9, .25, 1);

  --display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------------ base -- */
* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
  scroll-behavior: smooth;
  /* The header is sticky, so an in-page anchor would otherwise land under it. */
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, .35vw + .92rem, 17.5px);
  line-height: 1.62;
  overflow-x: clip;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-feature-settings: "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 3px; border-radius: 2px; }
.sec--ground :focus-visible, .hero :focus-visible, .ftr--dark :focus-visible { outline-color: var(--brass-lit); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--green); color: #FFFDF7; padding: 14px 22px; font-weight: 600;
}
.skip-link:focus { left: 0; }

.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.container--narrow { max-width: var(--narrow); }
.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;
}
.mt-1 { margin-top: var(--u3); }
.mt-2 { margin-top: var(--u5); }

/* ------------------------------------------------------------ typography -- */
h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; text-wrap: balance; }
h1 {
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: .96; letter-spacing: -.04em;
  font-variation-settings: "opsz" 144;
}
h2 {
  font-size: clamp(1.95rem, 3.9vw, 3.1rem);
  line-height: 1.04; letter-spacing: -.028em;
  font-variation-settings: "opsz" 72;
}
h3 {
  font-size: clamp(1.2rem, 1.5vw, 1.42rem);
  line-height: 1.24; letter-spacing: -.014em; font-weight: 600;
  font-variation-settings: "opsz" 24;
}
/* h4 is this site's structural LABEL, not a fourth heading level. It is set in
   mono because that is the page's instrument voice, and build.py emits it as a
   <p class="lab">, never an <h4> — an h4 sitting before the h2 it labels
   skipped a heading level on all 32 pages of the previous build. */
.lab {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  margin: 0 -.2em 0 0;
}
.lab--brass { color: var(--brass-ink); }
.lab--lit { color: var(--brass-lit); }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }
.prose p, .hero__lead, .faq__a { hanging-punctuation: first last; }

/* ======================== THE TICK RULE — signature =======================
   A brass measuring scale: a minor tick every 8px, a major every fifth. Two
   gradients, no markup, one device reused at three scales. It is what makes
   the page recognisable without a logo. */
.rule {
  height: 11px; border: 0; margin: 0;
  background:
    repeating-linear-gradient(90deg, var(--brass) 0 1px, transparent 1px 8px) bottom / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--brass) 0 1px, transparent 1px 40px) bottom / 100% 11px no-repeat;
  opacity: .5;
}
.rule--lit { opacity: .72; }
.rule--thin { height: 6px; background-size: 100% 3px, 100% 6px; }

/* One hairline carrying a single major tick at its left end — starts a block
   without spending a whole rule on it. */
.tick { border-top: 1px solid var(--hair); position: relative; padding-top: var(--u3); }
.tick::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 9px; background: var(--brass); }

/* The zellige eight-point star: the only ornament. Hairline, brand mark, and
   list bullet. Two squares at 45°, so it stays sharp at any size. */
.star { width: 1em; height: 1em; flex: none; color: var(--brass); }

/* =============================== breadcrumb ===============================
   The breadcrumb IS the eyebrow: one mono line inside the hero, still a real
   <nav> carrying BreadcrumbList semantics. */
.eyebrow {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--u2);
  margin: 0 -.18em 0 0;
}
.eyebrow a { color: var(--muted); }
.eyebrow a:hover { color: var(--brass-ink); }
.eyebrow .sep { color: var(--brass); }
.eyebrow [aria-current] { color: var(--ink); }
.hero .eyebrow { color: var(--on-ground-2); }
.hero .eyebrow a { color: var(--on-ground-2); }
.hero .eyebrow a:hover, .hero .eyebrow [aria-current] { color: var(--brass-lit); }
.hero .eyebrow .sep { color: var(--brass); }

/* ================================= buttons ================================
   Not a flat green rectangle. A brass underline slides the full width of the
   primary on hover; the outline button's border warms. Radius stays at 2px —
   an instrument has milled edges, not pills. */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--u2);
  font-family: var(--sans); font-size: .93rem; font-weight: 600; letter-spacing: -.004em;
  padding: 15px var(--u4); border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--brass); transition: width .34s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { width: 100%; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--acc { background: var(--green); color: #FFFDF7; }
.btn--acc:hover { background: var(--green-2); box-shadow: 0 10px 26px -14px rgba(15,92,70,.75); }
.btn--brass { background: var(--brass); color: #17120A; }
.btn--brass:hover { background: var(--brass-lit); }
.btn--brass::after { background: #17120A; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #060D0A; }
.btn--ghost { border-color: var(--hair-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--green); color: var(--green); }
/* on the dark ground the outline button needs the light hairline, and the
   primary becomes brass so green is not the only accent on the page */
.hero .btn--ghost, .sec--ground .btn--ghost, .cta .btn--ghost {
  border-color: var(--hair-lit); color: var(--on-ground);
}
.hero .btn--ghost:hover, .sec--ground .btn--ghost:hover, .cta .btn--ghost:hover {
  border-color: var(--brass-lit); color: var(--brass-lit);
}
.btn--sm { padding: 10px var(--u3); font-size: .86rem; }
.btn--lg { padding: 19px var(--u5); font-size: 1rem; }
.btn--block { width: 100%; }
/* flex, not grid: a lone third button grows into its row instead of leaving a
   phantom empty cell, which is the half-empty row defect from variant-n */
.hero__cta, .cta__btns, .btn-row { display: flex; flex-wrap: wrap; gap: var(--u3); }

/* ================================== header ================================ */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245, 241, 232, .9);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.hdr.is-scrolled { background: rgba(245, 241, 232, .98); border-bottom-color: var(--hair); }
.hdr__in { display: flex; align-items: center; gap: var(--u4); height: 76px; }

.logo {
  /* The gap is for the star mark only. As a flex gap it also applied between
     the wordmark and the trailing brass full stop, so the dot floated ten
     pixels away from the "r" — "The Web Master ." instead of "The Web Master."
     The mark carries its own right margin instead. */
  display: inline-flex; align-items: center;
  font-family: var(--display); font-weight: 600; font-size: 1.2rem;
  letter-spacing: -.03em; white-space: nowrap; color: var(--ink);
}
.logo .star { width: 15px; height: 15px; margin-right: 10px; }
.logo__dot { color: var(--brass-ink); }   /* 4.9:1 — it is punctuation, so it is text */

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--u1); }
.nav > a, .nav__btn {
  position: relative; font-family: inherit; font-size: .9rem; font-weight: 500;
  color: var(--ink-2); background: none; border: 0; cursor: pointer;
  padding: 10px 12px; transition: color .18s ease;
}
.nav > a::after, .nav__trig::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav > a:hover, .nav__btn:hover { color: var(--ink); }
.nav > a:hover::after, .nav__group:hover .nav__trig::after,
.nav__group.is-open .nav__trig::after { transform: scaleX(1); }
.nav > a[aria-current="page"] { color: var(--ink); }
.nav > a[aria-current="page"]::after { transform: scaleX(1); background: var(--green); }
.nav > .btn { margin-left: var(--u2); }
/* `.nav > a` above sets background:none and ink colour at (0,1,1), which beat
   .btn--acc at (0,1,0): the header's primary CTA shipped as a plain grey link
   on all 32 pages. Restated here at a higher specificity. */
.nav > a.btn--acc { background: var(--green); color: #FFFDF7; padding: 10px var(--u3); }
.nav > a.btn--acc:hover { background: var(--green-2); color: #FFFDF7; }
.nav > .btn::after { left: 0; right: auto; bottom: 0; height: 2px; }

.nav__group { position: relative; }
.nav__trig { display: inline-flex; align-items: center; gap: 6px; }
.nav__trig svg { width: 11px; height: 11px; transition: transform .22s var(--ease); }
.nav__group.is-open .nav__trig svg { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 296px; padding: var(--u2);
  background: var(--plate); border: 1px solid var(--hair); border-top: 2px solid var(--brass);
  box-shadow: var(--shadow-nav);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s var(--ease), visibility .18s;
}
.nav__group.is-open .nav__menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__menu a { display: block; padding: 10px 12px; font-size: .89rem; font-weight: 600; color: var(--ink); }
.nav__menu a span { display: block; font-size: .77rem; color: var(--muted); font-weight: 400; margin-top: 2px; }
.nav__menu a:hover { background: var(--paper-2); }

/* ---- the burger and the mobile drawer ----
   The drawer is a direct child of <body>, NOT of .hdr: a position:fixed child
   of an element carrying backdrop-filter is measured against that element, so
   a drawer inside this header collapsed to the height of the bar as soon as
   the page was scrolled. It also carries its OWN close button, because
   locking the scroll must never be done by displacing the body — that pushes
   a sticky bar and its ✕ off the top of a real phone. */
.burger {
  display: none; width: 42px; height: 42px; margin-left: auto;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  background: none; border: 1px solid var(--hair-2); border-radius: 2px; cursor: pointer;
}
.burger span { display: block; width: 17px; height: 1.5px; background: var(--ink); transition: transform .25s var(--ease), opacity .2s ease; }

.drawer {
  position: fixed; inset: 0; z-index: 80;
  background: var(--ground); color: var(--on-ground);
  display: flex; flex-direction: column;
  padding: var(--u4) var(--pad) var(--u6);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s ease, transform .26s var(--ease), visibility .22s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; gap: var(--u3); min-height: 52px; }
.drawer__top .logo { color: var(--on-ground); }
.drawer__close {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--hair-lit); border-radius: 2px;
  color: var(--on-ground); cursor: pointer; font-size: 1.2rem; line-height: 1;
}
.drawer__close:hover { border-color: var(--brass-lit); color: var(--brass-lit); }
.drawer__body { margin-top: var(--u5); display: grid; gap: var(--u5); }
.drawer h4 {
  font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass-lit); margin: 0 0 var(--u3);
}
.drawer__links { display: grid; }
.drawer__links a {
  display: block; padding: 13px 0; font-size: 1.02rem; font-weight: 500;
  border-bottom: 1px solid var(--hair-lit);
}
.drawer__links a:hover { color: var(--brass-lit); }
.drawer .btn { margin-top: var(--u3); }

/* ============================== photo grounds =============================
   A photograph is never decoration here: each band is a real Marrakech place,
   split-toned into the palette by build/images.py. The scrim is a gradient on
   a ::after, sized so the text column always sits over the opaque end — that
   is what keeps the measured contrast ratios true rather than lucky. */
.photo { position: absolute; inset: 0; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo::after { content: ""; position: absolute; inset: 0; }
/* text on the left, picture breathing on the right */
.photo--side::after {
  background: linear-gradient(90deg, var(--ground) 0%, rgba(12,23,18,.95) 26%,
              rgba(12,23,18,.52) 68%, rgba(12,23,18,.26) 100%);
}
/* full-width band with type over the middle */
.photo--band::after {
  background: linear-gradient(180deg, rgba(12,23,18,.82) 0%, rgba(12,23,18,.93) 100%);
}
.photo--quiet::after {
  background: linear-gradient(180deg, rgba(12,23,18,.9) 0%, rgba(12,23,18,.72) 100%);
}
/* a thin strip for inner-page heroes: the picture is a horizon, not a subject */
.photo--strip::after {
  background: linear-gradient(90deg, var(--ground) 0%, rgba(12,23,18,.93) 38%,
              rgba(12,23,18,.6) 100%);
}

/* =================================== hero =================================
   Two shapes. The home page splits 1.62 / 1 and the narrow column carries the
   result-based offer as a real ledger. Every other page uses one column over a
   photographic strip. The asymmetry is deliberate and stays. */
.hero { position: relative; background: var(--ground); color: var(--on-ground); overflow: hidden; }
.hero__in { position: relative; padding-block: clamp(var(--u6), 7vw, 108px) var(--u6); }
.hero h1 { color: #FBF7EC; }
.hero h1 em { color: var(--brass-lit); font-style: italic; }
.hero__lead {
  margin-top: var(--u4); max-width: 46ch; font-size: 1.08rem; color: var(--on-ground-2);
}
.hero .eyebrow, .hero .lab { margin-bottom: var(--u5); }
.hero__cta { margin-top: var(--u5); }
.hero__meta { margin-top: var(--u6); display: flex; flex-wrap: wrap; gap: var(--u3) var(--u5); }
.hero__meta span, .hero__fact {
  display: inline-flex; align-items: center; gap: var(--u2);
  font-size: .85rem; color: var(--on-ground-2);
}
.hero__meta svg { width: 15px; height: 15px; color: var(--brass-lit); flex: none; }
.hero__fact b {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; color: var(--brass-lit);
}
.hero--split .hero__in {
  display: grid; grid-template-columns: 1.62fr 1fr; gap: var(--u6); align-items: start;
}
.hero--split .hero__in > * { min-width: 0; }
.hero--narrow .hero__in { padding-block: clamp(var(--u5), 6vw, 84px) var(--u5); }
.hero--narrow h1 { font-size: clamp(1.95rem, 4.2vw, 2.9rem); }
.hero__stamp { margin-top: var(--u3); font-family: var(--mono); font-size: .74rem; color: var(--on-ground-2); }

/* the result-based offer, set as a ledger */
.pledge { background: var(--ground-2); border: 1px solid var(--hair-lit); border-top: 2px solid var(--brass); }
.pledge__hd { padding: var(--u4); }
.pledge__hd h2 { font-size: 1.7rem; color: #FBF7EC; margin-top: var(--u2); letter-spacing: -.026em; }
.pledge__hd p { margin: var(--u3) 0 0; font-size: .88rem; color: var(--on-ground-2); }
.pledge__rows { border-top: 1px solid var(--hair-lit); }
.pledge__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--u3);
  padding: 13px var(--u4); border-bottom: 1px dotted rgba(237,231,216,.2);
}
.pledge__row span { font-size: .84rem; color: var(--on-ground-2); }
.pledge__row b { font-family: var(--mono); font-size: .9rem; color: var(--brass-lit); white-space: nowrap; }
.pledge__row--nil b { color: var(--green-lit); }
.pledge__ft { padding: var(--u4); }
.pledge__ft small { display: block; margin-top: var(--u3); font-size: .74rem; line-height: 1.5; color: #8E9B92; }

/* ================================= sections ===============================
   Three kinds and never a fourth: paper invites reading, recessed paper holds
   a list, the ground states a fact. The kind IS the rhythm — the previous
   build had eight bands that all looked the same. */
.sec { padding-block: clamp(var(--u6), 7.5vw, 116px); }
.sec--tight { padding-block: clamp(var(--u5), 5vw, 72px); }
.sec--alt { background: var(--paper-2); }
.sec--ground { position: relative; background: var(--ground); color: var(--on-ground); overflow: hidden; }
.sec--ground-2 { background: var(--ground-2); }
.sec--ground h2, .sec--ground h3 { color: #FBF7EC; }
.sec--ground p { color: var(--on-ground-2); }
.sec--ground .lab { color: var(--brass-lit); }
.sec--ground > .container { position: relative; }
/* where two dark bands meet, a rule marks the seam */
.seam {
  height: 11px; border: 0; margin: 0;
  background:
    repeating-linear-gradient(90deg, var(--brass) 0 1px, transparent 1px 8px) bottom / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--brass) 0 1px, transparent 1px 40px) bottom / 100% 11px no-repeat;
  opacity: .55;
}

/* Section head: the surveyor's coordinate on the left, the title in a column
   that stops short of the full measure. */
.sec__head {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--u5);
  align-items: start; margin-bottom: var(--u6);
}
.sec__head > * { min-width: 0; }
.sec__num, .sec__head .lab {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
  padding-top: 10px; border-top: 1px solid var(--hair); margin: 0;
}
.sec--ground .sec__num, .sec--ground .sec__head .lab {
  color: var(--brass-lit); border-top-color: var(--hair-lit);
}
.sec__body { max-width: 46ch; }
.sec__body > p { margin-top: var(--u4); color: var(--ink-2); font-size: 1.03rem; }
.sec--ground .sec__body > p { color: var(--on-ground-2); }
/* a head with no label still aligns its title to the same column */
.sec__head--plain { grid-template-columns: 132px minmax(0, 1fr); }

/* ================================== prose ================================= */
.prose { max-width: var(--read); }
.prose > p { color: var(--ink-2); }
.prose > p:first-of-type { font-size: 1.12rem; color: var(--ink); }
.prose h2 { margin: var(--u6) 0 var(--u4); }
.prose h3 { margin: var(--u5) 0 var(--u3); }
.prose a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--brass-ink); }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.3em; color: var(--ink-2); }
.prose li { margin-bottom: .45em; }

/* ================================== plates ================================
   Cards became plates: an object with a brass top edge that draws on hover and
   a bled index numeral. They no longer depend on an 11 %-opacity hairline to
   be visible, which is why the old grids read as empty space. */
.grid { display: grid; gap: var(--u3); }
.grid > * { min-width: 0; }
.grid--2, .grid--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* .grid--3 is fed a variable number of cards — 3 AI bricks on the home page,
   but 4 related services on a pillar page, which leaves two empty cells on the
   last row of a 3-column grid. Flex makes the last row always full whatever
   the count, which is the half-empty row defect fixed at its source rather
   than per page. */
.grid--3 { display: flex; flex-wrap: wrap; }
.grid--3 > * { flex: 1 1 min(300px, 100%); }
/* A 4-item set in a 3-column grid leaves one cell empty on the second row —
   the half-empty row the user has rejected repeatedly. Flow those as flex so
   the last items grow and the row is always full. */
.grid--flow {
  display: flex; flex-wrap: wrap; grid-template-columns: none;
}
.grid--flow > * { flex: 1 1 min(300px, 100%); }

.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: var(--u5) var(--u5) var(--u4);
  background: var(--plate); border: 1px solid var(--hair);
  box-shadow: var(--shadow-plate);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
a.card:hover::before { transform: scaleX(1); }
.card h3 { margin-bottom: var(--u3); }
.card p { color: var(--ink-2); font-size: .96rem; }
.card__meta {
  display: block; margin-bottom: var(--u4);
  font-family: var(--mono); font-size: .66rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--brass-ink);
}
.card__n {
  position: absolute; top: -.17em; right: var(--u4);
  font-family: var(--display); font-weight: 500; font-size: 6.2rem; line-height: 1;
  font-variation-settings: "opsz" 144; color: var(--brass); opacity: .17;
  pointer-events: none; user-select: none;
}
.card__arrow {
  margin-top: auto; padding-top: var(--u4);
  display: inline-flex; align-items: center; gap: var(--u2);
  font-size: .85rem; font-weight: 600; color: var(--green);
}
.card__arrow svg { width: 15px; height: 15px; transition: transform .26s var(--ease); }
a.card:hover .card__arrow svg { transform: translateX(5px); }
.sec--ground .card { background: var(--ground-2); border-color: var(--hair-lit); box-shadow: none; }
.sec--ground .card p { color: var(--on-ground-2); }
.sec--ground .card__meta { color: var(--brass-lit); }
.sec--ground .card__arrow { color: var(--brass-lit); }

/* ============================= the service index ==========================
   Nine grey pills became a contents page over a photograph: numbered, ruled,
   set in mono. Rows are equalised so the three columns' hairlines land on the
   same baselines even when one title wraps. */
/* Two columns, not three: there are ten services, and ten in three columns
   leaves two empty cells on the last row. Ten in two columns is five full
   rows, and the extra width lets a long title stay on one line. */
.index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0 var(--u6); }
.index a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--u3);
  align-items: center; min-height: 64px; height: 100%; padding: var(--u2) 0;
  border-bottom: 1px solid var(--hair-lit); transition: color .2s ease;
}
.index a:hover { color: var(--brass-lit); }
.index em { font-family: var(--mono); font-size: .68rem; font-style: normal; letter-spacing: .1em; color: var(--brass); }
.index b { font-weight: 500; font-size: .97rem; }

/* ============================ the figure block ============================
   The number is the artwork: 410 set enormous, with the distribution drawn
   from the page's own claim that the first fifty actions carry most of the
   weight. The label owns its own row — set with a negative leading it climbed
   over the numeral, which the desktop screenshot caught. */
.figure { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u6); align-items: start; }
.figure > * { min-width: 0; }
.fig__lab { display: block; margin-bottom: var(--u4); }
.fig__n {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(5rem, 12vw, 10.5rem); line-height: .9; letter-spacing: -.05em;
  color: var(--brass-lit); font-variation-settings: "opsz" 144;
}
.fig__cap {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--on-ground-2); margin-top: var(--u3);
}
.bars {
  display: flex; gap: 2px; align-items: flex-end; height: 128px;
  margin-top: var(--u5); border-bottom: 1px solid var(--hair-lit);
}
.bars i { flex: 1 1 0; min-width: 2px; background: rgba(237,231,216,.19); }
.bars i.hot { background: var(--brass); }
.bars__key {
  display: flex; flex-wrap: wrap; gap: var(--u3) var(--u5); margin-top: var(--u3);
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-ground-2);
}
.bars__key span { display: inline-flex; align-items: center; gap: var(--u2); }
.bars__key i { width: 10px; height: 10px; flex: none; }
.bars__key i.hot { background: var(--brass); }
.bars__key i.cold { background: rgba(237,231,216,.19); }

/* ================================ the offer ===============================
   The free-tools block was a bordered table on ivory. It becomes a quotation:
   struck-through list prices, a real total rule, a clay top edge because the
   limit (25 accounts) is the point. */
.offer { background: var(--plate); border: 1px solid var(--hair); border-top: 2px solid var(--clay); box-shadow: var(--shadow-plate); }
.offer__hd {
  padding: var(--u5); display: flex; flex-wrap: wrap; gap: var(--u4);
  justify-content: space-between; align-items: end; border-bottom: 1px solid var(--hair);
}
.offer__hd h2, .offer__hd h3 { font-size: clamp(1.65rem, 2.5vw, 2.2rem); max-width: 24ch; font-family: var(--display); font-weight: 500; letter-spacing: -.026em; line-height: 1.06; }
.offer__hd > div { min-width: 0; }
.offer__note-hd { max-width: 32ch; font-size: .9rem; color: var(--ink-2); margin: 0; }
.offer__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--u4);
  align-items: baseline; padding: var(--u4) var(--u5); border-bottom: 1px dotted var(--hair-2);
}
.offer__row b { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.offer__row i { display: block; font-style: normal; font-size: .84rem; color: var(--muted); margin-top: 3px; }
.offer__was { font-family: var(--mono); font-size: .8rem; color: var(--muted); text-decoration: line-through; }
.offer__now { font-family: var(--mono); font-size: .9rem; font-weight: 500; color: var(--green); white-space: nowrap; }
.offer__tot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--u4);
  align-items: baseline; padding: var(--u4) var(--u5);
  background: var(--paper-2); border-top: 1px solid var(--hair-2);
}
.offer__tot > span:first-child {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.offer__tot .offer__now { font-size: 1.26rem; color: var(--clay); }
/* the row's own 0 MAD sits on --paper-2, where --green is 4.18:1 */
.offer__tot .offer__now, .offer__row .offer__now { color: var(--green-2); }
.offer__ft { padding: var(--u5); display: grid; gap: var(--u4); }

.note {
  display: flex; gap: var(--u3); padding: var(--u4);
  background: var(--paper-2); border-left: 2px solid var(--clay);
  font-size: .88rem; color: var(--ink-2);
}
.note strong { color: var(--ink); }
.sec--ground .note { background: rgba(237,231,216,.06); border-left-color: var(--clay-lit); color: var(--on-ground-2); }
.sec--ground .note strong { color: var(--on-ground); }

/* ================================== steps ================================= */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--u5); }
.steps > * { min-width: 0; }
.step { position: relative; border-top: 1px solid var(--hair); padding-top: var(--u4); }
.step::before { content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 2px; background: var(--brass); }
.step em { font-family: var(--mono); font-size: .68rem; font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); }
.step h3 { margin: var(--u3) 0 var(--u2); font-size: 1.2rem; }
.step p { font-size: .93rem; color: var(--ink-2); }
.sec--ground .step { border-top-color: var(--hair-lit); }
.sec--ground .step em { color: var(--brass-lit); }
.sec--ground .step p { color: var(--on-ground-2); }

/* ================================== stats ================================= */
.stats { display: flex; flex-wrap: wrap; gap: var(--u5); }
.stat { flex: 1 1 min(200px, 100%); border-top: 1px solid var(--hair); padding-top: var(--u3); }
.stat__n {
  font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: 1; letter-spacing: -.035em; color: var(--brass-ink);
  font-variation-settings: "opsz" 72;
}
.stat__l { margin-top: var(--u2); font-size: .86rem; color: var(--muted); }
.sec--ground .stat { border-top-color: var(--hair-lit); }
.sec--ground .stat__n { color: var(--brass-lit); }
.sec--ground .stat__l { color: var(--on-ground-2); }

/* =================================== faq ================================== */
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  display: flex; gap: var(--u4); align-items: baseline; justify-content: space-between;
  padding: var(--u4) 0; cursor: pointer; font-weight: 600; font-size: 1.04rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--mono); font-size: 1.15rem; line-height: 1;
  color: var(--brass-ink); flex: none;
}
.faq details[open] summary::after { content: "–"; color: var(--clay); }
.faq summary:hover { color: var(--green); }
.faq__a { padding-bottom: var(--u4); max-width: var(--read); color: var(--ink-2); font-size: .97rem; }

/* ================================= checks ================================= */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--u3); }
.checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--u3); align-items: start; font-size: .97rem; color: var(--ink-2); }
.checks svg { width: 17px; height: 17px; color: var(--green); margin-top: 4px; }

/* ================================= split ================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u6); align-items: start; }
.split > * { min-width: 0; }
.sticky { position: sticky; top: 104px; }

/* ================================== pills ================================= */
.pills { display: flex; flex-wrap: wrap; gap: var(--u2); }
.pill {
  padding: 10px var(--u3); border: 1px solid var(--hair-2); border-radius: 2px;
  font-size: .87rem; font-weight: 500; color: var(--ink-2); background: var(--plate);
  transition: border-color .2s, color .2s, background .2s;
}
.pill:hover { border-color: var(--green); color: var(--green); background: var(--plate); }

/* ================================ terminal ================================ */
.term {
  padding: var(--u4); background: var(--ground); border: 1px solid var(--hair-lit);
  border-top: 2px solid var(--brass);
  font-family: var(--mono); font-size: .8rem; line-height: 1.85; color: var(--on-ground-2);
  overflow-x: auto;
}
.term__bar { display: flex; gap: 6px; margin-bottom: var(--u3); }
.term__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(237,231,216,.24); }
.term b { color: var(--brass-lit); font-weight: 400; }
.term em { color: var(--green-lit); font-style: normal; }
.term u { color: var(--brass-lit); text-decoration: none; }

/* ================================== tables ================================ */
.tbl-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--hair); background: var(--plate); }
table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .93rem; }
th, td { padding: 13px var(--u4); text-align: left; border-bottom: 1px solid var(--hair); vertical-align: top; }
thead th {
  font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); background: var(--paper-2);
  border-bottom: 1px solid var(--hair-2);
}
tbody th { font-weight: 600; color: var(--ink); }
tbody td { color: var(--ink-2); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* =============================== closing cta ============================== */
.cta { position: relative; overflow: hidden; background: var(--ground); color: var(--on-ground); }
.cta__in { position: relative; padding: clamp(var(--u6), 8vw, 128px) var(--pad); text-align: center; }
.cta .rule { max-width: 260px; margin: 0 auto var(--u5); }
.cta h2 { font-size: clamp(2.1rem, 5vw, 3.8rem); color: #FBF7EC; }
.cta p { margin: var(--u4) auto 0; max-width: 54ch; color: var(--on-ground-2); }
.cta__btns { justify-content: center; margin-top: var(--u5); }

/* ================================== footer ================================ */
.ftr { background: var(--paper-2); border-top: 1px solid var(--hair); padding-block: var(--u6) var(--u5); }
.ftr__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--u5); }
.ftr__grid > * { min-width: 0; }
.ftr h4 {
  font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 var(--u4);
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr a { font-size: .9rem; color: var(--ink-2); }
.ftr a:hover { color: var(--green); }
.ftr__about { font-size: .88rem; color: var(--muted); margin: var(--u3) 0 var(--u4); max-width: 34ch; }
.ftr__contact { display: grid; gap: var(--u2); font-size: .88rem; }
.ftr__contact a, .ftr__contact span { display: inline-flex; align-items: center; gap: var(--u2); }
.ftr__contact svg { width: 15px; height: 15px; color: var(--brass-ink); flex: none; }
.ftr__btm {
  margin-top: var(--u6); padding-top: var(--u4); border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: var(--u3) var(--u5); justify-content: space-between;
  font-size: .8rem; color: var(--muted);
}
.ftr__btm nav { display: flex; flex-wrap: wrap; gap: var(--u3) var(--u4); }

/* ================================== forms ================================= */
.field { display: grid; gap: var(--u2); margin-bottom: var(--u4); }
.field > label { font-size: .84rem; font-weight: 600; color: var(--ink); }
.field .hint { font-size: .78rem; color: var(--muted); }
/* Listing the input types by name let the form's `type="url"` field ship
   completely unstyled at 21px tall next to 47px siblings — an enumeration is
   a list of the types I remembered. Excluding the few that must NOT get the
   text-field treatment cannot miss a type that is added later. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]),
select, textarea {
  width: 100%; padding: 13px var(--u3);
  font-family: inherit; font-size: .96rem; color: var(--ink);
  background: var(--plate); border: 1px solid var(--hair-2); border-radius: 2px;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(15, 92, 70, .14);
}
textarea { min-height: 156px; resize: vertical; }
.check-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--u3); align-items: start; font-size: .88rem; color: var(--ink-2); }
.check-row input { width: 24px; height: 24px; accent-color: var(--green); }
.form-note { font-size: .82rem; color: var(--muted); }
.alert { padding: var(--u4); border-left: 2px solid var(--green); background: var(--paper-2); font-size: .92rem; }
.alert--bad { border-left-color: var(--clay); }

/* ================================ responsive ==============================
   Verified by screenshot and by scrollWidth at 320 / 360 / 390 / 414 / 768 /
   1024 / 1440 — not by reading these rules. */
@media (max-width: 1080px) {
  .hero--split .hero__in { grid-template-columns: 1fr; gap: var(--u5); }
  .figure, .split { grid-template-columns: 1fr; gap: var(--u5); }
  .sticky { position: static; }
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 > * { flex: 1 1 min(280px, 100%); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  /* The dropdown nav becomes the drawer. `margin-left:auto` moves onto the
     burger, which is the element that stays visible — leaving it on .nav
     stopped pushing anything once .nav was hidden. */
  .nav { display: none; }
  .burger { display: inline-flex; }
  .photo--side::after, .photo--strip::after {
    background: linear-gradient(180deg, rgba(12,23,18,.9) 0%, rgba(12,23,18,.72) 100%);
  }
}
@media (max-width: 760px) {
  .hdr__in { height: 64px; }
  .logo { font-size: 1.06rem; }
  .sec__head, .sec__head--plain { grid-template-columns: 1fr; gap: var(--u4); }
  .grid--2, .grid--2x2, .grid--3 { grid-template-columns: 1fr; }
  .index { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: var(--u4); }
  .offer__row, .offer__tot { grid-template-columns: minmax(0, 1fr) auto; }
  .offer__was { display: none; }
  .offer__hd, .offer__ft, .offer__row, .offer__tot { padding-inline: var(--u4); }
  .pledge__hd, .pledge__ft, .pledge__row { padding-inline: var(--u4); }
  .hero__cta .btn, .cta__btns .btn, .offer__ft .btn { width: 100%; }
  .hero__meta { gap: var(--u3); flex-direction: column; align-items: flex-start; }
  .card { padding: var(--u5) var(--u4) var(--u4); }
  .card__n { font-size: 4.8rem; right: var(--u3); }
  .ftr__grid { grid-template-columns: 1fr; gap: var(--u5); }
  .bars { height: 72px; }
  .term { font-size: .74rem; }
}
@media (max-width: 380px) {
  /* At 320-360px the brand text and the burger were the only two things in the
     bar; the serif needs to give up a step so they never touch. */
  .logo { font-size: .98rem; }
  .logo .star { width: 13px; height: 13px; }
  .hdr__in { gap: var(--u3); }
}
@media print {
  .hdr, .drawer, .burger, .cta, .photo { display: none !important; }
  body { background: #fff; color: #000; }
  .sec { padding-block: 12pt; }
}

/* ========================= the pieces the templates ask for ===============
   Found by diffing every class="" in build/templates against the rules above.
   A class with no rule is invisible in review and renders as unstyled markup,
   which is how the contact form's error state and the footer's column labels
   would have shipped naked. */

/* footer column label — a label, not a heading: an <h4> after the page's <h2>
   skipped a level on all 32 pages of the previous build */
.ftr__h {
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 var(--u4);
}
.ftr__meta { display: inline-flex; align-items: center; gap: var(--u2); color: var(--muted); }

.hero__lab { display: flex; align-items: center; gap: var(--u3); margin-bottom: var(--u5); }
.hero__lab .lab { margin-bottom: 0; }

/* the tools page repeats the offer rows inside its own panel */
.offer__rows { border-top: 1px solid var(--hair); }

/* --------------------------------------------------------- contact form -- */
.form { display: grid; gap: 0; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u4); }
.field--row > * { min-width: 0; }
/* the honeypot: off-screen rather than display:none, because a bot that reads
   the computed style skips a hidden field and fills a positioned one */
.hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.field__err { font-size: .8rem; color: var(--clay); min-height: 1.1em; }
.field--err input, .field--err select, .field--err textarea { border-color: var(--clay); }
.field--err .field__err::before { content: "↳ "; }
.consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--u3); align-items: start; margin-bottom: var(--u4); font-size: .88rem; color: var(--ink-2); }
/* 17px is below the 24px minimum for a control that has to be hit with a
   thumb; the label wraps it, so the text is a target too, but the box itself
   must also be reachable. */
.consent input { width: 24px; height: 24px; margin-top: 0; accent-color: var(--green); }
.consent.field--err { color: var(--clay); }
.form__msg { margin-bottom: var(--u4); font-size: .92rem; }
.form__msg:empty { display: none; }
.form__msg.is-ok { padding: var(--u4); background: var(--paper-2); border-left: 2px solid var(--green); color: var(--ink); }
.form__msg.is-err { padding: var(--u4); background: var(--paper-2); border-left: 2px solid var(--clay); color: var(--ink); }

@media (max-width: 760px) {
  .field--row { grid-template-columns: 1fr; gap: 0; }
}

/* the drawer's group label, matching the footer's: a label tied to its list */
.drawer__h {
  font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass-lit); margin: 0 0 var(--u3);
}

/* =============================== réalisations =============================
   2026-09-14. A web agency with no portfolio was asking to be believed on its
   word. Each plate is EVIDENCE: a screenshot of the live site as served on the
   day it was measured (never a mock-up, never toned into this palette), the
   phone view of the same page, and three figures measured on that same URL.
   The browser frame is drawn in the instrument's language — a hairline bar
   with the host in mono — not a skeuomorphic Chrome. */
.work { display: grid; gap: var(--u5); align-items: center; }
.work > * { min-width: 0; }
.work--row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--u6); }
.work--row.work--flip .work__view { order: 2; }
.work--row + .work--row { margin-top: clamp(var(--u6), 8vw, var(--u8)); }

.work__view { position: relative; display: block; padding: 0 var(--u5) var(--u5) 0; }
.work__screen {
  position: relative; background: var(--plate); border: 1px solid var(--hair-2);
  border-top: 2px solid var(--brass); box-shadow: var(--shadow-lift); overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.work__bar {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--u3);
  background: var(--paper-2); border-bottom: 1px solid var(--hair);
}
.work__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--hair-2); flex: none; }
.work__bar span {
  margin-left: var(--u2); font-family: var(--mono); font-size: .66rem; letter-spacing: .06em;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.work__bar span::before { content: "https://"; color: var(--hair-2); }
.work__screen img { width: 100%; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top; }
.work__phone {
  position: absolute; right: 0; bottom: 0; width: 25%; min-width: 92px;
  padding: 5px; border-radius: 16px; background: var(--ground);
  box-shadow: 0 0 0 1px rgba(196,153,44,.35), 0 22px 40px -18px rgba(14,26,21,.6);
  transition: transform .45s var(--ease);
}
.work__phone img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 11px; }
a.work__view:hover .work__screen { transform: translateY(-4px); }
a.work__view:hover .work__phone { transform: translate(4px, 4px); }

.work__kind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u2) var(--u3); margin: 0 0 var(--u3); }
.chip {
  font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; padding: 4px 8px; border: 1px solid currentColor; border-radius: 2px;
}
.chip--client { color: var(--green); }
.chip--produit { color: #9C3E1F; }   /* --clay is 4.18:1 on --paper-2; this is 5.3:1 */
.work__sector { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.work__txt h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 500; letter-spacing: -.024em; line-height: 1.08; }
.work__txt > p { margin-top: var(--u3); color: var(--ink-2); max-width: 44ch; }

/* the three measured figures, set as a ledger like the pledge */
.work__m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--u4) 0 0; border-top: 1px solid var(--hair-2); }
.work__m > div { padding: var(--u3) var(--u3) 0 0; }
.work__m > div + div { padding-left: var(--u3); border-left: 1px dotted var(--hair-2); }
.work__m dt { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.work__m dd { margin: 4px 0 0; font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1; letter-spacing: -.02em; color: var(--brass-ink); font-variation-settings: "opsz" 48; }
.work__txt .checks { margin-top: var(--u4); }
.work__pending { margin-top: var(--u3); padding-left: var(--u3); border-left: 2px solid var(--clay); font-size: .84rem; color: var(--ink-2); max-width: 48ch; }
.work__go { margin-top: var(--u4); display: inline-flex; align-items: center; gap: var(--u2); font-size: .9rem; font-weight: 600; color: var(--green); border-bottom: 1px solid var(--hair-2); padding-bottom: 2px; }
.work__go:hover { color: var(--brass-ink); border-bottom-color: var(--brass); }
.work__go svg { width: 14px; height: 14px; }

/* the home page and the pillar: a compact grid of plates */
.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u6) var(--u5); }
.works > * { min-width: 0; }
.works .work { gap: var(--u4); align-content: start; }
.works .work__txt h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
.works .work__m dd { font-size: 1.3rem; }
.works--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.works--3 .work__view { padding: 0 var(--u4) var(--u4) 0; }
.works__ft { margin-top: var(--u6); display: flex; flex-wrap: wrap; gap: var(--u3) var(--u5); align-items: center; justify-content: space-between; border-top: 1px solid var(--hair); padding-top: var(--u4); }
.works__ft p { margin: 0; font-size: .84rem; color: var(--muted); max-width: 62ch; }
.work__stamp { font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; color: var(--muted); margin-top: var(--u3); }

/* the page's own summary strip: the totals across every plate */
.tally { display: flex; flex-wrap: wrap; gap: var(--u3) var(--u6); margin-top: var(--u5); }
.tally div { border-top: 1px solid var(--hair-lit); padding-top: var(--u2); }
.tally b { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; color: var(--brass-lit); letter-spacing: -.03em; }
.tally span { font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-ground-2); }

@media (max-width: 1080px) {
  .work--row { grid-template-columns: 1fr; gap: var(--u5); }
  .work--row.work--flip .work__view { order: 0; }
  .works--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .works, .works--3 { grid-template-columns: 1fr; gap: var(--u6); }
  .work__view, .works--3 .work__view { padding: 0 var(--u4) var(--u4) 0; }
  .work__m dd, .works .work__m dd { font-size: 1.2rem; }
  .work__m > div { padding-right: var(--u2); }
  .work__m > div + div { padding-left: var(--u2); }
}


/* ========================= pixel review 2026-09-15 ========================
   Every rule below fixes a defect seen on the full-page captures (34 pages at
   1440 and 390 px), not a preference. */

/* THE CONTACT FORM SHOWED EVERY ERROR MESSAGE ON ARRIVAL. main.css hid
   .field__err until the field was marked invalid; releve.css restyled the
   message and never carried the display rule over, so a visitor landed on
   five red "invalide" lines before typing anything. */
.field__err { display: none; }
.field--err .field__err { display: block; }
/* a stretched grid cell spread its rows: the optional field's input sat 25 px
   lower than its neighbour's */
.field { align-content: start; }

/* Selects kept the operating system's arrow and padding next to text fields. */
select {
  -webkit-appearance: none; appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237E6320' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px;
}

/* Mono labels were set at .6-.68rem: 9.6 to 10.9 px, under the 11 px floor. */
.lab, .eyebrow, .sec__num, .sec__head .lab, .fig__cap, .bars__key, .card__meta,
.step em, .index em, .hero__fact b, .ftr__h, .drawer__h, .work__sector, thead th,
.offer__tot > span:first-child { font-size: .74rem; }
.work__m dt { font-size: .7rem; }
.chip { font-size: .7rem; }

/* The offer's label touched its heading. */
.offer__hd .lab { margin-bottom: var(--u2); }

/* The brass seam sat 116 px above the join between two dark bands, because it
   was inside the section's bottom padding. It now marks the join itself. */
.sec--ground > .seam { position: absolute; left: 0; right: 0; bottom: 0; }

/* On pillar, service and legal pages the section title sat in the right-hand
   column (132 px label + gap) while the paragraphs under it started at the
   left edge: two left margins in one section. The prose now follows its title. */
@media (min-width: 761px) {
  .sec__head + .prose, .sec__head ~ .prose { margin-left: calc(132px + var(--u5)); }
}

/* Tap targets on a phone: footer and contact links were 23 px tall. */
@media (max-width: 760px) {
  .ftr ul { gap: 2px; }
  /* scoped to the lists: on .ftr__contact (inline-flex) and on .logo it put
     the icon on its own line above the text */
  .ftr ul a { display: inline-block; padding-block: 5px; min-width: 44px; }
  .eyebrow a { display: inline-block; padding-block: 4px; min-width: 24px; }
  .ftr__contact a { padding-block: 4px; }
  .logo { min-height: 44px; }
  .ftr__btm nav a { padding-block: 6px; }
}
/* A .note is a flex row [icon][paragraph]. Given a bare <strong> followed by
   text, flex turned the two into columns: "Ce qui / se / passe / ensuite." on
   /contact/ and "À / savoir :" on the four tool pages. Every note now wraps
   its text in a <p>; this keeps a future bare one from splitting. */
.note > strong { flex: none; }
.note:not(:has(> svg)) { display: block; }

/* The formation page uses .cta as a boxed panel inside a container, without
   .cta__in: at 390 px its text and button ran flush to the dark edges. */
.container > .cta { padding: clamp(var(--u5), 6vw, var(--u6)); }
.container > .cta h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.container > .cta .btn--acc { background: var(--brass); color: #17120A; }
.container > .cta .btn--acc:hover { background: var(--brass-lit); }