/* Palette and type are the client's brand guide (Guide de marque v1.0, juillet 2026).
   Names match the guide so the two can be checked against each other.
   Hard rule from the guide: laiton on black is 3.9:1 — decorative only, never
   body text under 18px. Small labels use beton/acier, not laiton. */
:root {
  --noir: #18171a;        /* Noir Chantier · PMS Black 6 */
  --ardoise: #262b31;     /* Ardoise · PMS 432 */
  --ardoise-2: #2e343c;   /* derived: panels, cards, tray */
  --acier: #5b6168;       /* Acier · PMS 431 */
  --beton: #e7e3d9;       /* Béton · PMS Warm Gray 1 */
  --beton-2: #d6d1c4;
  --papier: #fbfaf6;      /* Papier · PMS 11-0107 */
  --laiton: #a9814b;      /* Laiton · PMS 4515 — the only warm accent, sparingly */
  --laiton-dim: #8c6a3c;
  --laiton-lift: #c39a5e; /* large text / hover on dark */
  --rouille: #7a4632;     /* Rouille · PMS 4695 */

  --line-d: rgba(231, 227, 217, 0.16);
  --line-d-soft: rgba(231, 227, 217, 0.08);
  --line-l: rgba(24, 23, 26, 0.14);
  --line-l-soft: rgba(24, 23, 26, 0.07);

  --shell: min(1240px, 100% - 2 * var(--gut));
  --gut: 20px;

  --r-sm: 2px;
  --r-md: 4px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

le: #7a4632;     /* Rouille · PMS 4695 */

  --line-d: rgba(231, 227, 217, 0.16);
  --line-d-soft: rgba(231, 227, 217, 0.08);
  --line-l: rgba(24, 23, 26, 0.14);
  --line-l-soft: rgba(24, 23, 26, 0.07);

  --shell: min(1240px, 100% - 2 * var(--gut));
  --gut: 20px;

  --r-sm: 2px;
  --r-md: 4px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 720px) { :root { --gut: 32px; } }
@media (min-width: 1100px) { :root { --gut: 56px; } }

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip, never hidden — `hidden` turns the root into a scroll
   container and silently breaks `position: sticky` on the masthead. `clip`
   guards against stray full-bleed children without that side effect. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--noir);
  color: var(--beton);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible {
  outline: 2px solid var(--laiton);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --- type roles --------------------------------------------------------- */
.display {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
/* the guide reserves italic Fraunces for editorial voice: pull-quotes, values,
   accroches — so the accent word in a headline is italic, not a colour swap */
.display em { font-style: italic; font-weight: 500; }
/* nudged up from 4.5rem, well short of the original 6.4rem: big enough to
   carry the page, small enough that the hero still fits the fold */
/* 6.6vw rather than 6.9: at ~1100px the longest headline line lands within a
   few percent of wrapping, and the max still applies from 1261px up */
.d-xxl { font-size: clamp(2.15rem, 5.5vw, 4.3rem); }
.d-xl  { font-size: clamp(1.75rem, 3.9vw, 2.9rem); }
.d-lg  { font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
.d-md  { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -0.012em; }

.mono {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.lede {
  font-size: clamp(1.05rem, 1.55vw, 1.28rem);
  line-height: 1.55;
  color: rgba(231, 227, 217, 0.76);
  max-width: 62ch;
}
.body-copy { color: rgba(231, 227, 217, 0.72); max-width: 66ch; }
.on-light .lede { color: rgba(24, 23, 26, 0.72); }
.on-light .body-copy { color: rgba(24, 23, 26, 0.7); }

/* eyebrow: mono label with a hi-vis tick */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(231, 227, 217, 0.62);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--laiton);
  flex: none;
}
.on-light .eyebrow { color: rgba(24, 23, 26, 0.6); }

/* --- layout ------------------------------------------------------------- */
.shell { width: var(--shell); margin-inline: auto; }
.section { padding-block: clamp(64px, 9vw, 132px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }
.on-light { background: var(--beton); color: var(--noir); }
.on-mid { background: var(--ardoise); }

.rule { height: 1px; background: var(--line-d); border: 0; }
.on-light .rule { background: var(--line-l); }

/* concrete grain — static, cheap, keeps flat fields from looking synthetic */
.on-light::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}
.on-light > * { position: relative; z-index: 1; }

/* section header: mono index + display title, split rule */
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head__top {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-d);
}
.on-light .sec-head__top { border-bottom-color: var(--line-l); }
.sec-head__top .mono { flex: none; }
.sec-head__top .sec-head__meta {
  margin-left: auto;
  color: rgba(231, 227, 217, 0.42);
  text-align: right;
}
.on-light .sec-head__top .sec-head__meta { color: rgba(24, 23, 26, 0.45); }

/* --- header ------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--noir);
  border-bottom: 1px solid var(--line-d-soft);
}
.masthead__in {
  width: var(--shell);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
}
.wordmark { display: flex; align-items: center; gap: 11px; flex: none; min-width: 0; }
.wordmark__mark { width: 34px; height: 19px; flex: none; }
.wordmark__text {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 700; font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0;
  font-size: 1.12rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
}
.wordmark__text i {
  display: block;
  font-style: normal;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.53rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: rgba(231, 227, 217, 0.55);
  margin-top: 4px;
}

.nav { display: none; margin-left: auto; align-items: center; gap: 4px; }
@media (min-width: 1000px) { .nav { display: flex; } }
.nav a {
  padding: 9px 13px;
  font-size: 0.86rem;
  color: rgba(231, 227, 217, 0.7);
  transition: color 0.2s var(--ease);
  position: relative;
}
.nav a:hover { color: var(--beton); }
.nav a[aria-current="page"] { color: var(--beton); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 2px;
  background: var(--laiton);
}

.masthead__end { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; }
@media (min-width: 1000px) { .masthead__end { margin-left: 14px; } }
/* the header CTA lives in the drawer on small screens — three controls plus a
   wordmark will not fit a 360px bar without pushing the document wide */
.masthead__end > .btn { display: none; }
@media (min-width: 700px) { .masthead__end > .btn { display: inline-flex; } }

.lang {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-d);
  border-radius: var(--r-sm);
  overflow: hidden;
  flex: none;
}
.lang a {
  padding: 5px 9px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(231, 227, 217, 0.72);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.lang a:hover { color: var(--beton); }
.lang a[aria-current="true"] { background: var(--beton); color: var(--noir); }

/* burger */
.burger {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--line-d);
  border-radius: var(--r-sm);
  cursor: pointer;
  flex: none;
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger span { display: block; width: 16px; height: 1.5px; background: var(--beton); transition: transform 0.28s var(--ease), opacity 0.2s; }
.burger span + span { margin-top: 4px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
  display: grid;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--ease);
  border-top: 0 solid var(--line-d);
  background: var(--ardoise);
}
.drawer[data-open="true"] { max-height: 420px; border-top-width: 1px; }
@media (min-width: 1000px) { .drawer { display: none; } }
.drawer__in { width: var(--shell); margin-inline: auto; padding-block: 12px 22px; }
.drawer a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-d-soft);
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 600; font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.drawer .btn { margin-top: 18px; border-bottom: 0; }

/* --- buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--laiton);
  --btn-fg: var(--noir);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--r-sm);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -12px rgba(169, 129, 75, 0.6); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: 9px 15px; font-size: 0.75rem; }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--beton);
  border-color: var(--line-d);
}
.btn--ghost:hover { background: rgba(231, 227, 217, 0.06); box-shadow: none; border-color: rgba(231, 227, 217, 0.3); }
.on-light .btn--ghost { --btn-fg: var(--noir); border-color: var(--line-l); }
.on-light .btn--ghost:hover { background: rgba(24, 23, 26, 0.05); border-color: rgba(24, 23, 26, 0.3); }
.btn--wide { width: 100%; }
.btn__arrow { width: 14px; height: 10px; flex: none; transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* --- imagery ------------------------------------------------------------
   One treatment for every photo on the site: pull the saturation back, then
   multiply Noir Chantier over it. Stock footage from four different shoots then reads
   as one set instead of four.
   ------------------------------------------------------------------------ */
.plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  border-radius: var(--r-md);
  background: var(--ardoise);
}
.plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.7s var(--ease), transform 1s var(--ease);
}
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(24, 23, 26, 0.1), rgba(24, 23, 26, 0.6));
  mix-blend-mode: multiply;
}
.plate:hover img { filter: grayscale(0.1) contrast(1.04) brightness(1) saturate(1); transform: scale(1.025); }
.plate--wide { aspect-ratio: 16 / 9; }
.plate--cine { aspect-ratio: 21 / 9; }
.plate--mini { aspect-ratio: 4 / 5; }

/* copy with a narrow photo beside it, not a banner above it — the picture is a
   supporting detail here, so it gets a column rather than the full width */
.approach { display: grid; gap: 22px; align-items: start; }
@media (min-width: 560px) { .approach { grid-template-columns: 152px minmax(0, 1fr); gap: 26px; } }
@media (min-width: 980px) { .approach { grid-template-columns: 168px minmax(0, 1fr); } }
@media (max-width: 559px) { .approach .plate--mini { max-width: 190px; } }
/* the plate is narrow, so the caption gets its own smaller setting */
.plate--mini .plate__cap { font-size: 0.6rem; letter-spacing: 0.1em; padding: 11px 12px; }
@media (max-width: 619px) { .plate--cine { aspect-ratio: 16 / 9; } }
.plate--land { aspect-ratio: 5 / 4; }
.plate--tall { aspect-ratio: 4 / 5; }
.plate--sq { aspect-ratio: 1 / 1; }
@media (max-width: 619px) { .plate--land { aspect-ratio: 16 / 9; } }
.plate__cap {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  color: rgba(231, 227, 217, 0.92);
  text-shadow: 0 1px 12px rgba(24, 23, 26, 0.6);
}

/* 3-up strip — used where the content is a set, not a gallery */
.trio { display: grid; gap: 10px; }
@media (min-width: 620px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* full-bleed image band */
.reel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  min-height: clamp(300px, 40vw, 500px);
}
.reel__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* bias the crop upward: in every one of these frames the people and the
     machinery sit above centre, and the caption occupies the bottom */
  object-position: 50% 30%;
  filter: grayscale(0.5) contrast(1.06) brightness(0.74) saturate(0.85);
}
.reel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(24, 23, 26, 0.6) 0%, rgba(24, 23, 26, 0.18) 42%, rgba(24, 23, 26, 0.94) 100%);
}
.reel__in { padding-block: clamp(26px, 4vw, 48px); display: grid; gap: 12px; }
.reel__t {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 600; font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0;
  font-size: clamp(1.25rem, 3vw, 2.05rem);
  line-height: 1.02;
  letter-spacing: -0.016em;
  max-width: 26ch;
}
.reel__d { color: rgba(231, 227, 217, 0.72); max-width: 52ch; font-size: 0.95rem; }

/* --- hero --------------------------------------------------------------- */
.hero { padding-block: clamp(52px, 8.5vw, 116px) 0; position: relative; overflow: hidden; }

/* hero with footage or a still behind the type. the gradient keeps the left
   column — where every headline sits — close to solid noir, so contrast
   never depends on what the footage is doing. */
.hero--media { isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--noir); }
.hero__media > img,
.hero__media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: grayscale(0.18) contrast(1.04) brightness(0.95) saturate(0.95);
}
/* Two stacked washes. The horizontal one falls off early and hard, so the
   right half of the frame is close to untouched footage while the type column
   keeps enough density to stay readable. The vertical one hands the section
   off to the solid noir below. Measured, not guessed: the headline band sits
   above 7:1 against the footage and the intro paragraph above 6:1. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(93deg, rgba(24, 23, 26, 0.9) 0%, rgba(24, 23, 26, 0.85) 40%, rgba(24, 23, 26, 0.54) 66%, rgba(24, 23, 26, 0.12) 90%, rgba(24, 23, 26, 0) 100%),
    linear-gradient(180deg, rgba(24, 23, 26, 0.34) 0%, rgba(24, 23, 26, 0) 26%, rgba(24, 23, 26, 0) 58%, rgba(24, 23, 26, 0.3) 82%, var(--noir) 100%);
}
/* Mid widths: the headline occupies a larger share of the line, so the dense
   zone has to reach further right before it falls away. */
@media (min-width: 761px) and (max-width: 1099px) {
  .hero__media::after {
    background:
      linear-gradient(93deg, rgba(24, 23, 26, 0.9) 0%, rgba(24, 23, 26, 0.86) 55%, rgba(24, 23, 26, 0.58) 78%, rgba(24, 23, 26, 0.16) 100%),
      linear-gradient(180deg, rgba(24, 23, 26, 0.34) 0%, rgba(24, 23, 26, 0) 26%, rgba(24, 23, 26, 0) 58%, rgba(24, 23, 26, 0.3) 82%, var(--noir) 100%);
  }
}

/* the type column runs full width on small screens, so the wash goes flat */
@media (max-width: 760px) {
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(24, 23, 26, 0.62) 0%, rgba(24, 23, 26, 0.78) 45%, var(--noir) 100%);
  }
}

/* Blown-out skies need more density than a normal frame: measured raw, the
   overcast sky on the fee-schedule hero reads ~250, so the wash has to hold
   above 0.55 under the type or the hi-vis headline drops under 3:1. Only the
   left two-thirds is affected — the cranes on the right stay clear. */
.hero--dense .hero__media > img,
.hero--dense .hero__media > video {
  filter: grayscale(0.18) contrast(1.04) brightness(0.78) saturate(0.95);
}
.hero--dense .hero__media::after {
  background:
    linear-gradient(93deg, rgba(24, 23, 26, 0.9) 0%, rgba(24, 23, 26, 0.8) 48%, rgba(24, 23, 26, 0.7) 68%, rgba(24, 23, 26, 0.2) 92%, rgba(24, 23, 26, 0) 100%),
    linear-gradient(180deg, rgba(24, 23, 26, 0.34) 0%, rgba(24, 23, 26, 0) 26%, rgba(24, 23, 26, 0) 58%, rgba(24, 23, 26, 0.3) 82%, var(--noir) 100%);
}
@media (max-width: 760px) {
  .hero--dense .hero__media::after {
    background:
      linear-gradient(180deg, rgba(24, 23, 26, 0.68) 0%, rgba(24, 23, 26, 0.82) 45%, var(--noir) 100%);
  }
}
.hero__video { opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__video[data-ready="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero::after {
  /* survey lines: two hairlines that mark the ladder's axis, drawn on load */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line-d);
}
.hero__grid { display: grid; gap: clamp(28px, 4vw, 48px); }
.hero__title { margin-top: 22px; }
.hero--media .hero__title,
.hero--media .hero__sub { text-shadow: 0 1px 22px rgba(24, 23, 26, 0.55); }
/* padding keeps accented capitals (É, Ê) from being clipped by the reveal mask */
.hero__title .ln { display: block; overflow: hidden; padding-top: 0.1em; margin-top: -0.1em; }
.hero__title .ln > span { display: block; }
.hero__title em {
  color: inherit;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0;
}
.hero__sub {
  margin-top: 22px;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  max-width: 58ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* action row: the form CTA and the phone number carry equal weight — half of
   these visitors are contractors who would rather just call */
.hero__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 34px;
  margin-top: 32px;
}
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }

.phone {
  display: grid;
  gap: 3px;
  padding-left: 16px;
  border-left: 2px solid var(--laiton);
  align-content: center;
}
.phone__k { color: rgba(231, 227, 217, 0.55); }
.phone__n {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(1.45rem, 3vw, 2.05rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s var(--ease);
}
.phone:hover .phone__n,
.phone:focus-visible .phone__n { color: var(--laiton); }
.phone__d { color: rgba(231, 227, 217, 0.45); }
.hero__note {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: rgba(231, 227, 217, 0.5);
}
.hero__note li { display: flex; align-items: center; gap: 8px; }
.hero__note li::before { content: ""; width: 4px; height: 4px; background: var(--laiton); flex: none; }

/* hero ticker — a slow marquee of what the firm actually promises. Full-bleed
   so it reads as continuous; the hero's own overflow clips it. */
.ticker {
  margin-top: clamp(40px, 5.5vw, 70px);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-top: 1px solid var(--line-d);
  overflow: hidden;
  padding-block: 17px;
  background: rgba(24, 23, 26, 0.34);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 46s linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__set { display: flex; align-items: center; }
.ticker__set li {
  display: flex;
  align-items: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(231, 227, 217, 0.82);
  white-space: nowrap;
}
/* hi-vis lozenge between phrases — the same structural tick used in the eyebrow */
.ticker__set li::after {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--laiton);
  transform: rotate(45deg);
  flex: none;
  margin-inline: 30px;   /* equal on both sides, so the lozenge reads as a separator */
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Nothing is moving, so drop the full bleed and the edge fade — otherwise the
   mask clips the first phrase mid-word. Aligns to the shell and scrolls. */
@media (prefers-reduced-motion: reduce) {
  .ticker {
    width: auto;
    margin-inline: 0;
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ticker__track { animation: none; }
  .ticker__set + .ticker__set { display: none; }
  .ticker__set li:first-child::before { content: none; }
}

/* --- la grille (signature) --------------------------------------------- */
.grille { display: grid; gap: 0; }
.rung {
  --w: 30%;
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 0 16px;
  align-items: center;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line-l);
  background: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 0.3s var(--ease);
}
.rung:last-child { border-bottom: 1px solid var(--line-l); }
.rung::before {
  /* fee-encoded bar: rung length is the fee. hidden chart inside a menu. */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--w);
  background: var(--noir);
  opacity: 0.16;
  transition: width 0.55s var(--ease-out), opacity 0.3s var(--ease), background 0.3s var(--ease);
}
.rung:hover { background: rgba(24, 23, 26, 0.035); }
.rung:hover::before { opacity: 0.34; }
.rung__code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--acier);
  padding: clamp(18px, 2.4vw, 26px) 0;
  align-self: start;
  transition: color 0.25s var(--ease);
}
.rung__body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 18px;
  align-items: center;
  padding: clamp(18px, 2.4vw, 26px) 0;
}
.rung__name {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 600; font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0;
  font-size: clamp(1.02rem, 2.1vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.rung__note {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--acier);
  max-width: 54ch;
}
.rung__fee {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(1.05rem, 2vw, 1.42rem);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  grid-row: 1;
  grid-column: 2;
}
.rung__fee small { font-size: 0.62em; opacity: 0.6; letter-spacing: 0.04em; }

.rung[data-on="true"] { background: var(--noir); color: var(--beton); }
.rung[data-on="true"]::before { background: var(--laiton); opacity: 1; height: 3px; }
.rung[data-on="true"] .rung__code { color: var(--beton); }
.rung[data-on="true"] .rung__note { color: rgba(231, 227, 217, 0.6); }
.rung[data-on="true"] .rung__code::after { content: " ●"; letter-spacing: 0; }

/* hatched bar for the % based tier — it has no fixed length, so we say so */
.rung--pct::before {
  width: 100%;
  background: repeating-linear-gradient(90deg, var(--noir) 0 6px, transparent 6px 12px);
}
.rung--pct[data-on="true"]::before {
  background: repeating-linear-gradient(90deg, var(--laiton) 0 6px, transparent 6px 12px);
}

.grille__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  margin-top: 26px;
  color: rgba(24, 23, 26, 0.6);
}

/* --- mandat tray ------------------------------------------------------- */
.tray {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--ardoise-2);
  border-top: 2px solid var(--laiton);
  transform: translateY(104%);
  transition: transform 0.5s var(--ease-out);
  box-shadow: 0 -20px 50px -24px rgba(0, 0, 0, 0.6);
}
.tray[data-open="true"] { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .tray { transition: none; } }
.tray__in {
  width: var(--shell);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 14px;
  flex-wrap: wrap;
}
.tray__slot { display: grid; gap: 3px; min-width: 0; }
.tray__k { color: rgba(231, 227, 217, 0.5); }
.tray__v {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 600; font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0;
  font-size: 0.97rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46vw;
}
.tray__fee {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--laiton);
  font-variant-numeric: tabular-nums;
}
.tray__sep { width: 1px; align-self: stretch; background: var(--line-d); display: none; }
@media (min-width: 760px) { .tray__sep { display: block; } }
.tray__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tray__close {
  background: none;
  border: 1px solid var(--line-d);
  border-radius: var(--r-sm);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(231, 227, 217, 0.7);
  transition: border-color 0.2s, color 0.2s;
  flex: none;
}
.tray__close:hover { border-color: rgba(231, 227, 217, 0.35); color: var(--beton); }

/* --- cards / claims ---------------------------------------------------- */
.claims { display: grid; gap: 1px; background: var(--line-d-soft); border-block: 1px solid var(--line-d-soft); }
@media (min-width: 700px) { .claims { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .claims { grid-template-columns: repeat(3, 1fr); } }
.claim { background: var(--noir); padding: clamp(24px, 3vw, 34px) clamp(20px, 2.4vw, 30px); display: grid; gap: 12px; align-content: start; }
.on-mid .claim { background: var(--ardoise); }
.claim__n { color: rgba(231, 227, 217, 0.5); font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; letter-spacing: 0.16em; }
.claim__t { font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 600; font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0; font-size: 1.06rem; line-height: 1.14; letter-spacing: -0.008em; }
.claim__d { font-size: 0.9rem; color: rgba(231, 227, 217, 0.62); }

/* --- process rail ------------------------------------------------------ */
.steps { display: grid; gap: 0; position: relative; }
.steps__rail {
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line-l);
}
.steps__rail i { position: absolute; left: 0; top: 0; width: 1px; background: var(--laiton-dim); height: var(--fill, 0%); transition: height 0.25s linear; }
@media (min-width: 760px) { .steps__rail { left: 7px; } }
.step {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 0 20px;
  padding-block: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--line-l-soft);
}
.step:first-child { border-top: 0; }
@media (min-width: 760px) { .step { grid-template-columns: 16px 108px 1fr; gap: 0 28px; } }
.step__dot { position: relative; z-index: 1; margin-top: 9px; }
.step__dot span {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--beton);
  border: 1px solid var(--line-l);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
@media (min-width: 760px) { .step__dot span { width: 15px; height: 15px; } }
.step.is-on .step__dot span { background: var(--laiton); border-color: var(--laiton-dim); transform: scale(1.1); }
.step__n { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--acier); padding-top: 7px; display: none; }
@media (min-width: 760px) { .step__n { display: block; } }
.step__body { display: grid; gap: 9px; }
.step__t { font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 600; font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0; font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.1; letter-spacing: -0.012em; }
.step__t em { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: 0.62em; letter-spacing: 0.12em; color: var(--acier); text-transform: none; display: block; margin-bottom: 6px; }
@media (min-width: 760px) { .step__t em { display: none; } }
.step__d { color: rgba(24, 23, 26, 0.68); max-width: 60ch; font-size: 0.96rem; }

/* --- expertise ledger -------------------------------------------------- */
.ledger { border-top: 1px solid var(--line-d); }
.ledger__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 24px;
  padding-block: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--line-d-soft);
  align-items: baseline;
  transition: padding-left 0.3s var(--ease), background 0.3s var(--ease);
}
@media (min-width: 820px) { .ledger__row { grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1.15fr); } }
.ledger__row:hover { background: rgba(231, 227, 217, 0.03); }
.ledger__i { font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; letter-spacing: 0.12em; color: rgba(231, 227, 217, 0.4); }
.ledger__t { font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 600; font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0; font-size: clamp(1.02rem, 1.8vw, 1.24rem); letter-spacing: -0.008em; line-height: 1.14; }
.ledger__d { font-size: 0.9rem; color: rgba(231, 227, 217, 0.58); }

/* --- split / feature --------------------------------------------------- */
.split { display: grid; gap: clamp(30px, 4vw, 64px); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
@media (min-width: 900px) { .split--narrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 900px) and (max-width: 979.98px) { .split--req { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 980px) { .split--req { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr); } }

/* the competency card artifact — signed, stamped, physical */
.carnet {
  background: var(--ardoise-2);
  border: 1px solid var(--line-d);
  border-radius: var(--r-md);
  padding: 22px;
  display: grid;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.carnet::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border: 1px solid var(--line-d-soft);
  border-radius: 50%;
}
.carnet__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line-d); }
.carnet__who { display: grid; gap: 5px; }
.carnet__name { font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 650; font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0; font-size: 1.15rem; letter-spacing: -0.01em; }
.carnet__role { color: rgba(231, 227, 217, 0.55); }
.carnet__rows { display: grid; gap: 12px; }
.carnet__row { display: grid; grid-template-columns: 114px 1fr; gap: 14px; align-items: baseline; }
.carnet__k { color: rgba(231, 227, 217, 0.42); }
.carnet__v { font-size: 0.94rem; }
.carnet__v a:hover { color: var(--laiton); }

/* --- forms -------------------------------------------------------------- */
.form { display: grid; gap: clamp(26px, 3vw, 38px); }
.fset { display: grid; gap: 16px; border: 0; padding: 0; margin: 0; }
.fset__head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-d); }
.on-light .fset__head { border-bottom-color: var(--line-l); }
.fset__head h3 { font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 600; font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0; font-size: 1.02rem; letter-spacing: 0.005em; }
.fset__head .mono { color: rgba(231, 227, 217, 0.55); flex: none; }
.on-light .fset__head .mono { color: var(--laiton-dim); }

.grid2 { display: grid; gap: 16px; }
@media (min-width: 680px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field > label,
.field > .field__label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(231, 227, 217, 0.55);
}
.on-light .field > label,
.on-light .field > .field__label { color: rgba(24, 23, 26, 0.55); }
.field__label span { color: rgba(231, 227, 217, 0.32); letter-spacing: 0.08em; }
.on-light .field__label span { color: rgba(24, 23, 26, 0.35); }

.input {
  width: 100%;
  padding: 13px 14px;
  background: rgba(231, 227, 217, 0.045);
  border: 1px solid var(--line-d);
  border-radius: var(--r-sm);
  color: var(--beton);
  font-size: 0.97rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  appearance: none;
}
.input::placeholder { color: rgba(231, 227, 217, 0.28); }
.input:hover { border-color: rgba(231, 227, 217, 0.26); }
.input:focus { border-color: var(--laiton); background: rgba(231, 227, 217, 0.07); outline: none; }
textarea.input { min-height: 118px; resize: vertical; }
.on-light .input { background: rgba(24, 23, 26, 0.035); border-color: var(--line-l); color: var(--noir); }
.on-light .input::placeholder { color: rgba(24, 23, 26, 0.3); }
.on-light .input:focus { border-color: var(--laiton-dim); background: #fff; }

/* segmented choice — quantity */
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  display: grid;
  place-items: center;
  padding: 12px 6px;
  border: 1px solid var(--line-d);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.seg label:hover { border-color: rgba(231, 227, 217, 0.3); }
.seg input:checked + label { background: var(--laiton); border-color: var(--laiton); color: var(--noir); font-weight: 600; }
.seg input:focus-visible + label { outline: 2px solid var(--laiton); outline-offset: 2px; }

/* level picker inside the form */
.picker { display: grid; gap: 8px; }
.picker input { position: absolute; opacity: 0; pointer-events: none; }
.pick {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--line-d);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.pick:hover { border-color: rgba(231, 227, 217, 0.28); background: rgba(231, 227, 217, 0.03); }
.pick__c { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.1em; color: rgba(231, 227, 217, 0.5); }
.pick__n { font-size: 0.94rem; line-height: 1.25; }
.pick__f { font-family: "IBM Plex Mono", monospace; font-size: 0.88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.picker input:checked + .pick { border-color: var(--laiton); background: rgba(169, 129, 75, 0.09); }
.picker input:checked + .pick .pick__c { color: var(--beton); }
.picker input:focus-visible + .pick { outline: 2px solid var(--laiton); outline-offset: 2px; }

.form__foot { display: grid; gap: 16px; }
.form__legal { font-size: 0.8rem; color: rgba(231, 227, 217, 0.45); max-width: 58ch; }
.on-light .form__legal { color: rgba(24, 23, 26, 0.5); }
.form__status { font-family: "IBM Plex Mono", monospace; font-size: 0.76rem; letter-spacing: 0.05em; min-height: 1.2em; }
.form__status[data-state="ok"] { color: var(--beton); }
.form__status[data-state="err"] { color: #c8785a; }
.on-light .form__status[data-state="ok"] { color: #6d5326; }
.on-light .form__status[data-state="err"] { color: #7a4632; }

/* summary panel next to the request form */
.summary {
  position: sticky;
  top: 92px;
  border: 1px solid var(--line-d);
  border-radius: var(--r-md);
  padding: 22px;
  background: var(--ardoise);
  display: grid;
  gap: 16px;
}
.summary__t { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-d); }
.summary__rows { display: grid; gap: 13px; }
.summary__row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; }
.summary__k { color: rgba(231, 227, 217, 0.45); }
.summary__v { font-size: 0.95rem; text-align: right; font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 500; font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0; }
.summary__total { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; padding-top: 15px; border-top: 1px solid var(--line-d); }
.summary__fee { font-family: "IBM Plex Mono", monospace; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 500; color: var(--laiton); line-height: 1; font-variant-numeric: tabular-nums; }
.summary__note { font-size: 0.78rem; color: rgba(231, 227, 217, 0.42); }

/* --- service-area map ---------------------------------------------------
   Province outlines are projected from real geodata (Canada's standard Lambert
   conformal conic), and the city dots use the same projection — so a dot sits
   where the city actually is. See the map generator note in the README before
   moving anything by hand.
   ------------------------------------------------------------------------ */
@media (min-width: 980px) { .split--map { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-items: center; } }

.mapwrap {
  border: 1px solid var(--line-d);
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 90% at 70% 15%, rgba(91, 97, 104, 0.32), transparent 60%),
    var(--noir);
  padding: clamp(12px, 2vw, 26px);
}
.mapsvg { width: 100%; height: auto; overflow: visible; }

.prov {
  stroke: rgba(231, 227, 217, 0.34);
  stroke-width: 2.2;
  stroke-linejoin: round;
  transition: fill 0.4s var(--ease);
}
.prov--on { fill: #272d34; }
.prov--qc { fill: #30373f; }

.mapsvg__prov {
  font-family: "IBM Plex Mono", monospace;
  font-size: 26px;
  letter-spacing: 0.24em;
  fill: rgba(231, 227, 217, 0.34);
  text-transform: uppercase;
}
.mapsvg__cluster {
  font-family: "IBM Plex Mono", monospace;
  font-size: 19px;
  letter-spacing: 0.14em;
  fill: rgba(231, 227, 217, 0.66);
  text-transform: uppercase;
}
.mapsvg__lead { stroke: rgba(231, 227, 217, 0.3); stroke-width: 1.4; stroke-dasharray: 5 5; }

.city { cursor: default; }
.city__dot { fill: var(--laiton); stroke: rgba(24, 23, 26, 0.75); stroke-width: 1.6; transition: r 0.2s var(--ease); }
.city__star { fill: #fff; stroke: var(--laiton); stroke-width: 1.2; }
.city__ring {
  fill: none;
  stroke: var(--laiton);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  animation: cityPulse 3.4s ease-out infinite;
}
@keyframes cityPulse {
  0%   { transform: scale(0.5); opacity: 0.75; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}
.city__lbl {
  font-family: "IBM Plex Mono", monospace;
  font-size: 20px;
  fill: var(--beton);
  opacity: 0;
  paint-order: stroke;
  stroke: rgba(24, 23, 26, 0.85);
  stroke-width: 4;
  transition: opacity 0.2s var(--ease);
  pointer-events: none;
}
.city__lbl--on { opacity: 1; }
.city:hover .city__dot { r: 6.4; }
.city:hover .city__lbl { opacity: 1; }
.city--hq .city__lbl { fill: var(--papier); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .city__ring { animation: none; opacity: 0.3; } }
/* the labels get unreadable once the map is small — the list below carries them */
@media (max-width: 719px) {
  .mapsvg__prov { font-size: 34px; }
  .mapsvg__cluster { font-size: 27px; }
  .city__lbl--on { display: none; }
}

.hqcard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--line-d);
  border-radius: var(--r-sm);
  background: rgba(24, 23, 26, 0.5);
  width: fit-content;
}
.hqcard__pin { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--r-sm); background: rgba(169, 129, 75, 0.12); color: var(--laiton); }
.hqcard__pin svg { width: 15px; height: 19px; }
.hqcard__k { display: block; color: rgba(231, 227, 217, 0.5); margin-bottom: 3px; }
.hqcard__v { display: block; font-size: 0.92rem; }

.citylist__k { color: rgba(231, 227, 217, 0.42); margin-bottom: 12px; }
.citylist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.citylist li {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(231, 227, 217, 0.55);
}

/* --- faq ---------------------------------------------------------------- */
/* anchor targets must clear the sticky masthead */
[id] { scroll-margin-top: 88px; }

/* jump chips — only worth it on the standalone FAQ, which is long */
.jump { display: flex; flex-wrap: wrap; gap: 8px; }
.jump a {
  padding: 8px 13px;
  border: 1px solid var(--line-d);
  border-radius: var(--r-sm);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(231, 227, 217, 0.72);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.jump a:hover { border-color: var(--laiton); color: var(--beton); background: rgba(169, 129, 75, 0.1); }
.on-light .jump a { border-color: var(--line-l); color: rgba(24, 23, 26, 0.72); }
.on-light .jump a:hover { border-color: var(--noir); color: var(--noir); background: rgba(24, 23, 26, 0.05); }

.faq-group + .faq-group { margin-top: clamp(40px, 5vw, 68px); }
.faq-group .faq { border-top: 0; }
.faq-group__head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-d); }
.on-light .faq-group__head { border-bottom-color: var(--line-l); }
.faq-group__head h2 {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 600; font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  letter-spacing: -0.012em;
  line-height: 1.1;
}
.faq-group__head .mono { flex: none; color: var(--acier); }
.faq-group__head .faq-group__n { margin-left: auto; color: rgba(231, 227, 217, 0.42); text-align: right; }
.on-light .faq-group__head .faq-group__n { color: rgba(24, 23, 26, 0.4); }

.faq { border-top: 1px solid var(--line-d); }
.on-light .faq { border-top-color: var(--line-l); }
.faq details { border-bottom: 1px solid var(--line-d-soft); }
.on-light .faq details { border-bottom-color: var(--line-l-soft); }
.faq summary {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding-block: clamp(16px, 2vw, 22px);
  cursor: pointer;
  list-style: none;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 600; font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0;
  font-size: clamp(1rem, 1.7vw, 1.16rem);
  line-height: 1.28;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.1rem;
  color: var(--laiton);
  line-height: 1;
  flex: none;
  transition: transform 0.25s var(--ease);
}
.on-light .faq summary::after { color: var(--laiton-dim); }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--papier); }
.on-light .faq summary:hover { color: var(--noir); }
.faq__a { padding-bottom: 24px; max-width: 68ch; font-size: 0.96rem; color: rgba(231, 227, 217, 0.66); }
.on-light .faq__a { color: rgba(24, 23, 26, 0.68); }
.faq__a p + p { margin-top: 12px; }

/* --- CTA band ---------------------------------------------------------- */
.band { background: var(--laiton); color: var(--noir); }
.band .band__in { display: grid; gap: 24px; padding-block: clamp(48px, 6vw, 80px); }
@media (min-width: 900px) { .band .band__in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; } }
.band__t { font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 650; font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0; font-size: clamp(1.7rem, 4.2vw, 3rem); line-height: 0.98; letter-spacing: -0.02em; }
.band__d { color: rgba(24, 23, 26, 0.72); margin-top: 12px; max-width: 52ch; }
.band .btn { --btn-bg: var(--noir); --btn-fg: var(--laiton); }
.band .btn:hover { box-shadow: 0 10px 26px -12px rgba(24, 23, 26, 0.6); }
.band .btn--ghost { --btn-bg: transparent; --btn-fg: var(--noir); border-color: rgba(24, 23, 26, 0.28); }
.band .btn--ghost:hover { background: rgba(24, 23, 26, 0.07); }
.band__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- footer ------------------------------------------------------------- */
.foot { background: var(--noir); border-top: 1px solid var(--line-d); }
.foot__in { display: grid; gap: 36px; padding-block: clamp(44px, 5vw, 64px) 26px; }
@media (min-width: 860px) { .foot__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 40px; } }
.foot__brand { display: grid; gap: 16px; align-content: start; }
.foot__blurb { font-size: 0.9rem; color: rgba(231, 227, 217, 0.52); max-width: 34ch; }
.foot__col { display: grid; gap: 11px; align-content: start; }
.foot__col h4 { color: rgba(231, 227, 217, 0.4); font-family: "IBM Plex Mono", monospace; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; margin-bottom: 4px; }
.foot__col a, .foot__col p { font-size: 0.9rem; color: rgba(231, 227, 217, 0.68); }
.foot__col a:hover { color: var(--laiton); }
.foot__base { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding-top: 22px; border-top: 1px solid var(--line-d-soft); color: rgba(231, 227, 217, 0.38); }
.foot__base .foot__by { margin-left: auto; }
.foot__base a:hover { color: rgba(231, 227, 217, 0.7); }

/* --- reveal ------------------------------------------------------------- */
[data-rise] { opacity: 0; transform: translateY(16px); }
.js [data-rise] { transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-rise].is-in { opacity: 1; transform: none; }

/* load sequence for the hero lines */
.js .hero__title .ln > span { transform: translateY(105%); }
.js .hero[data-loaded="true"] .hero__title .ln > span {
  transform: none;
  transition: transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .hero__lift { opacity: 0; transform: translateY(14px); }
.js .hero[data-loaded="true"] .hero__lift {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  [data-rise] { opacity: 1; transform: none; }
  .js .hero__title .ln > span { transform: none; }
  .js .hero__lift { opacity: 1; transform: none; }
}

/* --- utility ------------------------------------------------------------ */
.stack { display: grid; gap: 18px; align-content: start; }
.stack--lg { gap: 26px; }
.mt-l { margin-top: clamp(28px, 3.5vw, 44px); }
.mb-l { margin-bottom: clamp(28px, 3.5vw, 44px); }
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--laiton);
  color: var(--noir);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 12px; }
.pad-tray { padding-bottom: 96px; }

/* --- Fraunces optical sizing --------------------------------------------
   The opsz axis (9–144) is not decorative: set display sizes high and small
   headings low, or the small ones come out cramped and over-contrasted.
   Placed last so it wins over the individual rules above. */
.claim__t, .ledger__t, .rung__name, .fset__head h3, .carnet__name,
.faq summary, .faq-group__head h2, .pick__n, .tray__v, .summary__v,
.wordmark__text, .hqcard__k, .drawer a {
  font-variation-settings: "opsz" 26, "SOFT" 0, "WONK" 0;
}
.step__t, .reel__t, .d-md { font-variation-settings: "opsz" 54, "SOFT" 0, "WONK" 0; }
.claim__t { font-size: 1.1rem; font-weight: 550; line-height: 1.2; }
.ledger__t, .rung__name { font-weight: 550; }

/* --- brand icons ---------------------------------------------------------
   The guide's monolinear set. Used as CSS masks rather than plain <img> so a
   single black-matte file renders in laiton on dark sections and noir on light
   ones. Icons are decorative — every one sits beside a label that already
   carries the meaning — so if masking is unsupported they simply don't paint.
   ------------------------------------------------------------------------ */
.ic {
  display: inline-block;
  flex: none;
  width: 1.55em;
  height: 1.55em;
  background: currentColor;
  opacity: 0.75;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
@supports not ((-webkit-mask-image: url(#a)) or (mask-image: url(#a))) {
  .ic { display: none; }
}

/* trades: the 16 corps de métier, each with its own pictogram */
.trades { display: grid; gap: 2px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .trades { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .trades { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trades li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-block: 9px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(231, 227, 217, 0.62);
}
.trades .ic { color: var(--laiton); opacity: 1; width: 1.5rem; height: 1.5rem; }

/* the expertise ledger rows carry the general pictograms */
.ledger__t { display: flex; align-items: center; gap: 12px; }
.ledger__t .ic { color: var(--laiton); opacity: 1; width: 1.45rem; height: 1.45rem; }
@media (max-width: 819px) { .ledger__t .ic { width: 1.3rem; height: 1.3rem; } }

/* --- fee calculator -------------------------------------------------------
   The schedule is priced per hire, so selecting a rung opens a stepper and
   multiplies it out. The count is shared with the request form — one value, so
   the ladder and the form can never disagree.
   ------------------------------------------------------------------------ */
.calc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease-out);
  background: rgba(24, 23, 26, 0.045);
  border-bottom: 1px solid var(--line-l);
}
.calc[data-open="true"] { grid-template-rows: 1fr; }
.calc__wrap { overflow: hidden; min-height: 0; }
.calc__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  padding: 20px 0 8px 70px;
}
.calc__k { color: var(--acier); flex: none; }
.calc__eq {
  color: var(--acier);
  font-variant-numeric: tabular-nums;
}
.calc__total {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-left: auto;
}
.calc__note { padding: 0 0 20px 70px; color: var(--acier); }
@media (max-width: 719px) {
  .calc__in { padding-left: 0; gap: 12px 18px; }
  .calc__note { padding-left: 0; }
  .calc__total { margin-left: 0; }
}

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-l);
  border-radius: var(--r-sm);
  background: var(--papier);
  overflow: hidden;
  flex: none;
}
.stepper button {
  width: 36px;
  height: 38px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--noir);
  font-size: 1.05rem;
  line-height: 1;
  transition: background 0.2s var(--ease);
}
.stepper button:hover { background: rgba(24, 23, 26, 0.07); }
.stepper button:disabled { opacity: 0.3; cursor: default; background: none; }
.stepper input {
  width: 46px;
  height: 38px;
  border: 0;
  border-inline: 1px solid var(--line-l);
  background: none;
  text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  color: var(--noir);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible { outline: 2px solid var(--laiton); outline-offset: -2px; }

/* the same control inside the dark request form */
.form .stepper { background: rgba(231, 227, 217, 0.05); border-color: var(--line-d); }
.form .stepper button { color: var(--beton); }
.form .stepper button:hover { background: rgba(231, 227, 217, 0.09); }
.form .stepper input { color: var(--beton); border-inline-color: var(--line-d); }
.qtyrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.qtyrow__hint { color: rgba(231, 227, 217, 0.45); }

@media (prefers-reduced-motion: reduce) { .calc { transition: none; } }