/* ---------- 0. Typefaces, self-hosted ----------------------------------
   Archivo and Martian Mono are served from our own domain rather than the
   Google Fonts CDN. Loading them from Google sent every visitor's IP address
   to a third party on every page view, before they interacted with anything —
   which is a disclosure we would otherwise have to make. Serving them here
   means the request never leaves vaydos.com, and it drops a DNS lookup, a TLS
   handshake and a connection to a second origin from the critical path.

   Both faces are variable, and the site uses the axes: the headings and labels
   set font-variation-settings: "wdth" between 100 and 118, and weights run from
   100 to 800. The font-stretch range declared below is what tells the browser
   the width axis exists — drop it and every "wdth" setting in this file
   silently snaps back to the default instance, with no error anywhere.

   Only the latin and latin-ext subsets are shipped, which covers English and
   French including œ and every accent Québec French needs. The Cyrillic and
   Vietnamese subsets Google also offers are deliberately not here.

   Both fonts are licensed under the SIL Open Font License, which permits this.
   To update: re-download from Google Fonts and keep the unicode-range values
   in step with whatever it returns.
   ---------------------------------------------------------------------- */

/* Archivo — display and body */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Martian Mono — labels, markers and data */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/martian-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/martian-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =====================================================================
   VAYDOS — site.css
   "Expanding Horizons, Elevating Impact"
   ---------------------------------------------------------------------
   Palette comes straight off the logo: the mark's orange gradient
   (#F69C36 -> #F06C2A) and the wordmark charcoal (#36363C). The alert
   tone (#C43A16) extends that same warm ramp one step hotter, and is
   RESERVED for Rescue & Recovery. Never use it decoratively.
   Structure : full-width colour SLABS. Scrolling slams between paper,
               charcoal and orange. That contrast is the design.
   Type      : Archivo (heavy, expanded) + Martian Mono (spec labels)
   ===================================================================== */

/* ---------- 1. Tokens -------------------------------------------- */
:root {
  --ink:       #2E2E35;   /* deep slab charcoal */
  --ink-2:     #36363C;   /* the exact wordmark grey */
  --ink-3:     #45454D;
  --paper:     #F5F4F2;
  --concrete:  #E7E6E3;
  --steel:     #61616B;
  --steel-lt:  #A9A9B3;

  --orange:    #F06C2A;   /* deep end of the logo gradient - primary */
  --orange-lt: #F69C36;   /* light end of the logo gradient */
  --orange-dk: #D95818;
  --orange-ink:#A33D0E;   /* small text on light backgrounds */
  --on-orange: #2A1000;   /* text sitting ON an orange fill */
  --alert:     #C43A16;   /* Rescue & Recovery ONLY */

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --nav-h: 86px;
  --edge: clamp(1.15rem, 4vw, 3rem);

  /* per-slab, overridden below */
  --fg: var(--ink);
  --muted: var(--steel);
  --rule: rgba(46, 46, 53, .16);
  --rule-hard: rgba(46, 46, 53, .9);
}

/* ---------- 2. Reset --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
.slab--orange :focus-visible { outline-color: var(--ink); }

::selection { background: var(--orange); color: var(--ink); }

.skip {
  position: absolute;
  left: 12px; top: -120px;
  z-index: 300;
  padding: 14px 22px;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top .18s ease;
}
.skip:focus { top: 12px; }

/* ---------- 3. Typography ---------------------------------------- */
h1, h2, h3, h4 { font-family: var(--display); text-wrap: balance; }

h1 {
  font-size: clamp(3rem, 8.4vw, 7.2rem);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(2.1rem, 5.2vw, 4.1rem);
  font-weight: 800;
  font-variation-settings: "wdth" 108;
  line-height: .94;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: 700;
  font-variation-settings: "wdth" 104;
  line-height: 1.08;
  letter-spacing: -.02em;
}

h4 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

p { text-wrap: pretty; }

.lede {
  font-size: clamp(1.075rem, 1.45vw, 1.32rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--muted);
  max-width: 58ch;
}

.body-lg { font-size: 1.06rem; line-height: 1.62; color: var(--muted); }
.muted { color: var(--muted); }

/* Spec-sheet label — the recurring structural device */
.label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-size: .655rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
}
.label::before {
  content: "";
  width: 30px; height: 5px;
  background: var(--orange);
  flex: none;
}
.label--bare::before { display: none; }
.label--alert::before { background: var(--alert); }

/* Section index marker — sits at the top edge of each slab */
.marker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: clamp(36px, 4.5vw, 60px);
  border-bottom: 3px solid var(--rule-hard);
  font-family: var(--mono);
  font-size: .655rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.marker span:last-child { color: var(--muted); text-align: right; }

/* ---------- 4. Slabs --------------------------------------------- */
.slab {
  --fg: var(--ink);
  --muted: var(--steel);
  --rule: rgba(46, 46, 53, .16);
  --rule-hard: rgba(46, 46, 53, .88);
  position: relative;
  padding-block: clamp(64px, 8vw, 130px);
  background: var(--paper);
  color: var(--fg);
}

.slab--concrete { background: var(--concrete); }

.slab--ink {
  --fg: var(--paper);
  --muted: var(--steel-lt);
  --rule: rgba(245, 244, 242, .2);
  --rule-hard: rgba(245, 244, 242, .85);
  background: var(--ink);
  color: var(--fg);
}

.slab--orange {
  --fg: #2A1000;
  --muted: #4A1B02;
  --rule: rgba(46, 46, 53, .3);
  --rule-hard: rgba(46, 46, 53, .92);
  background: var(--orange);
  color: var(--fg);
}

.slab--flush { padding-block: 0; }
.slab--tight { padding-block: clamp(44px, 5vw, 76px); }

.wrap { width: min(100% - (var(--edge) * 2), 1320px); margin-inline: auto; }
/* No page uses this any more. It centred a 880px column inside a page whose
   header and footer sit on the 1320px .wrap, so anything using it appeared
   indented from the rest of the site — 220px in at a 1440px viewport. Prose
   pages now sit on .wrap like everything else and cap their own blocks
   instead, which keeps the left edge aligned and the line length readable.
   Kept only so an older page or a pasted snippet does not break; do not reach
   for it in new markup. */
.wrap--narrow { width: min(100% - (var(--edge) * 2), 880px); margin-inline: auto; }

.head { max-width: 24ch; margin-bottom: clamp(28px, 3.5vw, 46px); }
.head + .lede { margin-bottom: clamp(36px, 4.5vw, 60px); }

.split { display: grid; gap: clamp(32px, 4vw, 72px); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide { grid-template-columns: 1.4fr 1fr; }
  .split--narrow { grid-template-columns: .8fr 1.2fr; }
}

/* ---------- 5. Buttons ------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 28px;
  background: var(--orange);
  color: var(--on-orange);
  border: 3px solid var(--ink);
  font-family: var(--mono);
  font-size: .715rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .13s ease, box-shadow .13s ease, background .13s ease;
}
.btn:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--ink); }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--outline { background: transparent; box-shadow: none; }
.btn--outline:hover { background: var(--orange); transform: none; box-shadow: none; }

.btn--alert { background: var(--alert); color: #fff; }

/* on ink slabs the frame flips to paper */
.slab--ink .btn { border-color: var(--paper); box-shadow: 6px 6px 0 var(--orange); }
.slab--ink .btn:hover { box-shadow: 3px 3px 0 var(--orange); }
.slab--ink .btn:active { box-shadow: 0 0 0 var(--orange); }
.slab--ink .btn--outline { color: var(--paper); box-shadow: none; }
.slab--ink .btn--outline:hover { background: var(--paper); color: var(--ink); }

/* on amber slabs the fill flips to ink */
.slab--orange .btn { background: var(--ink); color: #fff; box-shadow: 6px 6px 0 rgba(46,46,53,.3); }
.slab--orange .btn:hover { box-shadow: 3px 3px 0 rgba(46,46,53,.3); }
.slab--orange .btn--outline { background: transparent; color: var(--ink); box-shadow: none; }
.slab--orange .btn--outline:hover { background: var(--ink); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 3px solid var(--orange);
}
.tlink span { transition: transform .16s ease; }
.tlink:hover span { transform: translateX(5px); }
.tlink--alert { border-bottom-color: var(--alert); }

/* ---------- 6. Header -------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: #fff;
  color: var(--ink-2);
  border-bottom: 4px solid var(--orange);
}

.nav-inner {
  width: min(100% - (var(--edge) * 2), 1320px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand { display: inline-flex; align-items: center; margin-right: auto; }
.brand img {
  height: 46px;
  width: auto;
  max-width: min(56vw, 260px);
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 480px) { .brand img { height: 38px; } }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > a {
  padding: 10px 15px;
  font-family: var(--mono);
  font-size: .655rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--steel);
  transition: color .14s ease, background .14s ease;
}
.nav-links > a:hover { color: var(--ink-2); background: var(--concrete); }
.nav-links > a[aria-current="page"] { color: var(--orange-ink); }

.nav-cta {
  padding: 13px 22px !important;
  background: var(--orange);
  color: var(--on-orange) !important;
  font-weight: 700 !important;
}
.nav-cta:hover { background: var(--orange-dk) !important; color: #fff !important; }

/* Language switcher. Deliberately quiet next to the orange CTA — it is a
   wayfinding control, not a call to action — but bordered so it reads as a
   control rather than another nav link. The label names the language you get
   by pressing it, not the one you are already reading. */
.nav-lang {
  padding: 11px 13px !important;
  border: 2px solid var(--rule);
  font-family: var(--mono);
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em;
}
.nav-lang:hover { border-color: var(--orange-ink); color: var(--orange) !important; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  place-items: center;
  background: transparent;
  border: 2px solid var(--rule);
  color: var(--ink-2);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--orange-ink); color: var(--orange); }
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 1000px) {
  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--edge) 26px;
    background: #fff;
    border-bottom: 4px solid var(--orange);
    box-shadow: 0 20px 40px -24px rgba(46,46,53,.5);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-links > a {
    padding: 17px 4px;
    font-size: .8rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav-cta { margin-top: 18px; text-align: center; padding: 17px !important; }
  .nav-toggle { display: grid; }
}

/* footer lockup uses the knockout logo */
.footer-brand img { height: 52px; width: auto; max-width: 240px; object-fit: contain; object-position: left center; }
.footer-tag {
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--orange-lt);
  margin-top: 14px;
  display: block;
}

/* ---------- 7. Hero ---------------------------------------------- */
.hero { background: var(--paper); position: relative; overflow: hidden; }

.hero__grid {
  display: grid;
  align-items: stretch;
  min-height: min(86vh, 820px);
}
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 1.08fr .92fr; }
}

.hero__text {
  padding: clamp(48px, 6vw, 96px) 0 clamp(48px, 6vw, 88px);
  padding-right: clamp(0px, 4vw, 64px);
  align-self: center;
}
.hero__text h1 { margin-block: 26px 28px; }
.hero__text .lede { max-width: 46ch; }
.hero__cta { margin-top: 36px; }

.hero__strip {
  margin-top: clamp(38px, 5vw, 58px);
  padding-top: 20px;
  border-top: 3px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-family: var(--mono);
  font-size: .645rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel);
}
.slab--ink .hero__strip {
  border-top-color: var(--orange);
  color: var(--steel-lt);
}
.slab--ink .hero__strip a:hover { color: var(--orange-lt); }

/* photo bleeds off the right edge of the viewport */
.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
@media (min-width: 940px) {
  .hero__media {
    /* bleed off the right edge of the viewport */
    margin-right: calc((100vw - min(100vw - (var(--edge) * 2), 1320px)) / -2);
  }
  .hero__media img { position: absolute; inset: 0; }
}

/* amber plate punched over the seam */
.hero__plate {
  position: absolute;
  left: clamp(-14px, -1.5vw, -8px);
  bottom: clamp(26px, 5vw, 56px);
  z-index: 2;
  background: var(--orange);
  border: 3px solid var(--ink);
  padding: 18px 22px;
  max-width: 260px;
}
.hero__plate .n {
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  line-height: .86;
  letter-spacing: -.04em;
  display: block;
}
.hero__plate .t {
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-top: 8px;
  display: block;
  line-height: 1.45;
}
@media (max-width: 939px) {
  .hero__plate { left: auto; right: 14px; bottom: 14px; }
}

/* ---------- 8. SIGNATURE: the process plates --------------------- */
.process { position: relative; }

.process__row {
  display: grid;
  gap: 4px;              /* amber shows through as panel seams */
  position: relative;
}
@media (min-width: 860px) {
  .process__row { grid-template-columns: repeat(3, 1fr); }
}

.pplate {
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: var(--paper);
  border: 3px solid var(--ink);
  padding: clamp(22px, 2.3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pplate__n {
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  font-weight: 800;
  font-variation-settings: "wdth" 118;
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--orange-lt);
}
.pplate__phase {
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--steel-lt);
}
.pplate h3 { color: var(--paper); }
.pplate p { font-size: .93rem; color: var(--steel-lt); line-height: 1.5; }

/* the off-ramp: emergency-stop red, offset below the track */
.pbranch {
  position: relative;
  margin-top: 44px;
  margin-left: 0;
  background: var(--alert);
  color: #fff;
  border: 3px solid var(--ink);
  padding: clamp(22px, 2.3vw, 30px);
  display: grid;
  gap: 12px;
}
@media (min-width: 860px) {
  .pbranch { margin-left: 16%; margin-right: 16%; }
  .pbranch::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -44px;
    width: 8px;
    height: 44px;
    background: var(--alert);
    transform: translateX(-50%);
  }
}
.pbranch__phase {
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.pbranch h3 { color: #fff; }
.pbranch p { font-size: .95rem; line-height: 1.55; max-width: 62ch; }

/* ---------- 9. Service cards (image-led) ------------------------- */
.scard {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 3px solid var(--ink);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.scard:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }

.scard__media { position: relative; aspect-ratio: 9 / 10; overflow: hidden; background: var(--concrete); }
.scard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.scard:hover .scard__media img { transform: scale(1.05); }

.scard__badge {
  position: absolute;
  left: 0; top: 0;
  background: var(--orange);
  color: var(--on-orange);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: 9px 15px;
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.scard__body { padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; gap: 13px; flex: 1; }
.scard__body p { font-size: .93rem; line-height: 1.55; color: var(--steel); }
.scard__body .tlink { margin-top: auto; align-self: flex-start; padding-top: 6px; }

.scard--alert { border-color: var(--alert); }
.scard--alert:hover { box-shadow: 8px 8px 0 var(--alert); }
.scard--alert .scard__badge { background: var(--alert); color: #fff; border-color: var(--alert); }

/* ---------- 10. Full-bleed band ---------------------------------- */
.band { position: relative; display: grid; }
/* The band carries a self-contained artwork: show it whole, no crop and no
   scrim — the darkening gradient existed only to keep overlaid text legible. */
.band__img img { width: 100%; height: auto; display: block; }
.band__inner {
  position: relative;
  z-index: 1;
  align-self: center;
  padding-block: clamp(52px, 6vw, 90px);
  color: var(--paper);
}
.band blockquote { max-width: 20ch; }
.band blockquote p {
  font-size: clamp(1.7rem, 4vw, 3.2rem);
  font-weight: 800;
  font-variation-settings: "wdth" 106;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.band cite {
  display: block;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: .655rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-lt);
}

/* ---------- 11. Platform plates ---------------------------------- */
.pf {
  border: 3px solid var(--rule-hard);
  padding: clamp(22px, 2.4vw, 32px);
  display: grid;
  gap: 16px;
  align-content: start;
  transition: background .16s ease, transform .16s ease;
}
.pf:hover { transform: translateY(-4px); }
.slab--ink .pf:hover { background: var(--ink-2); }
.slab--ink .pf__tag { color: var(--orange-lt); }

.pf__name {
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.pf__tag {
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-ink);
  display: block;
  margin-top: 9px;
}
.pf p { font-size: .93rem; line-height: 1.55; color: var(--muted); }
.pf dl { display: grid; gap: 0; margin: 0; }
.pf dt {
  font-family: var(--mono);
  font-size: .59rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 13px;
  border-top: 1px solid var(--rule);
}
.pf dd { margin: 0 0 13px; font-size: .91rem; line-height: 1.45; font-weight: 500; }

/* ---------- 12. Method ------------------------------------------- */
.method { display: grid; }
.method__item {
  display: grid;
  gap: 8px 32px;
  padding-block: clamp(24px, 2.8vw, 36px);
  border-top: 3px solid var(--rule-hard);
  align-items: start;
}
.method__item:last-child { border-bottom: 3px solid var(--rule-hard); }
@media (min-width: 860px) {
  .method__item { grid-template-columns: 130px 1fr 1.25fr; }
}
.method__n {
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 800;
  font-variation-settings: "wdth" 118;
  line-height: .82;
  letter-spacing: -.05em;
  color: var(--orange-ink);
}
.method__item p { font-size: .97rem; line-height: 1.58; color: var(--muted); }

/* ---------- 13. Lists -------------------------------------------- */
.ticks { list-style: none; padding: 0; display: grid; gap: 0; }
/* Flow layout, not grid: a grid li turns the run of text after <strong> into a
   separate anonymous grid item, which auto-places into the 26px tick column and
   wraps one word per line. The tick is positioned instead, so all inline
   content stays in a single flow. */
.ticks li {
  position: relative;
  padding-block: 13px;
  padding-left: 40px;
  border-top: 1px solid var(--rule);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--muted);
}
.ticks li:last-child { border-bottom: 1px solid var(--rule); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 16px; height: 16px;
  background: var(--orange);
  clip-path: polygon(0 44%, 38% 100%, 100% 8%, 100% 30%, 38% 100%, 0 66%);
}
.ticks--alert li::before { background: var(--alert); }
.ticks li strong { color: var(--fg); font-weight: 700; }

/* ---------- 14. Portfolio ---------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: clamp(30px, 3.6vw, 46px);
  border: 3px solid var(--ink);
  overflow: hidden;
}
.filter {
  flex: 1 0 auto;
  padding: 13px 20px;
  background: var(--paper);
  border: 0;
  border-right: 3px solid var(--ink);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .13s ease, color .13s ease;
}
.filter:last-child { border-right: 0; }
.filter:hover { background: var(--concrete); }
.filter[aria-pressed="true"] { background: var(--ink); color: #fff; }

.case {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 3px solid var(--ink);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.case:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.case[hidden] { display: none; }

.case__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--concrete); }
.case__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.case:hover .case__media img { transform: scale(1.05); }

.case__badge {
  position: absolute;
  left: 0; top: 0;
  background: var(--orange);
  color: var(--on-orange);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: .615rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.case__badge--alert { background: var(--alert); color: #fff; }

.case__body { padding: clamp(20px, 2vw, 26px); display: flex; flex-direction: column; gap: 13px; flex: 1; }
.case__body p { font-size: .92rem; line-height: 1.55; color: var(--steel); }
.case__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  padding: 4px 10px;
  border: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: .565rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.case__result {
  margin-top: auto;
  padding-top: 16px;
  border-top: 3px solid var(--ink);
  display: grid;
  gap: 5px;
}
.case__result dt {
  font-family: var(--mono);
  font-size: .59rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel);
}
.case__result dd { margin: 0; font-size: .93rem; font-weight: 600; line-height: 1.45; }

.empty-state {
  padding: 64px 20px;
  text-align: center;
  border: 3px dashed var(--ink);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- 15. Grids -------------------------------------------- */
.grid { display: grid; gap: clamp(16px, 1.8vw, 24px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--flush { gap: 0; }

/* ---------- 16. Panels ------------------------------------------- */
.panel {
  border: 3px solid var(--rule-hard);
  padding: clamp(24px, 2.6vw, 36px);
}
.panel--orange { background: var(--orange); border-color: var(--ink); color: var(--ink); }
.panel--orange .ticks li { color: rgba(46,46,53,.82); border-color: rgba(46,46,53,.26); }
.panel--orange .ticks li::before { background: var(--ink); }
.panel--orange .ticks li strong { color: var(--ink); }
.panel--alert { border-color: var(--alert); border-width: 3px; }
.panel--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.panel--ink .ticks li { color: var(--steel-lt); border-color: rgba(245,244,242,.18); }
.panel--ink .ticks li strong { color: var(--paper); }

/* ---------- 17. Forms -------------------------------------------- */
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 9px; }
.field > label, .legend {
  font-family: var(--mono);
  font-size: .615rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.req { color: var(--alert); }

.input, .select, .textarea {
  width: 100%;
  padding: 15px 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  transition: box-shadow .13s ease, background .13s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--steel); font-weight: 400; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  background: #fff;
  box-shadow: 5px 5px 0 var(--orange);
}
.textarea { min-height: 158px; resize: vertical; line-height: 1.55; }
.select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  padding-right: 46px;
}

/* Phone: country-code picker and national number, drawn as a single control.
   The wrapper carries the border and the focus shadow; the two inputs sit
   inside it bare, split by a rule, so it reads as one field and not two. */
.phone-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  background: var(--paper);
  border: 3px solid var(--ink);
  transition: box-shadow .13s ease, background .13s ease;
}
.phone-field:focus-within {
  background: #fff;
  box-shadow: 5px 5px 0 var(--orange);
}
.phone-code, .phone-number {
  min-width: 0;
  padding: 15px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
}
.phone-code:focus, .phone-number:focus { outline: none; }
.phone-number::placeholder { color: var(--steel); font-weight: 400; }
.phone-code {
  width: 100%;
  max-width: 190px;
  appearance: none;
  border-right: 3px solid var(--ink);
  padding-right: 34px;
  text-overflow: ellipsis;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}

/* On a phone the number being typed matters more than the country name being
   readable in full, so the picker gives its width back. */
@media (max-width: 559px) {
  .phone-code { max-width: 154px; }
}

.field-row { display: grid; gap: 22px; }
@media (min-width: 660px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* The phone field carries two controls, so it takes the larger share of its
   row. Work email is short enough to give the space up. */
@media (min-width: 660px) {
  .field-row--phone { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

/* The form sits in a two-column split, so its own column is much narrower than
   the viewport. Between the point where fields start pairing up (660px) and a
   genuinely wide screen, that column cannot carry the country picker and the
   number side by side — around 1000px the number field was left with 49px of
   usable space and clipped its own placeholder mid-digit.
   Give the phone row the full column back until there is room for two.
   Checked at 1440, 1280, 1100, 1000, 800, 640 and 375. */
@media (max-width: 1259px) {
  .field-row--phone { grid-template-columns: minmax(0, 1fr); }
}

fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 13px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.choice span {
  display: block;
  padding: 11px 18px;
  border: 3px solid var(--ink);
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .13s ease, color .13s ease;
}
.choice input:hover + span { background: var(--concrete); }
.choice input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 3px; }
.choice input:checked + span { background: var(--ink); color: #fff; }

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-items: start;
  font-size: .89rem;
  line-height: 1.5;
  color: var(--steel);
}
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); cursor: pointer; }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note {
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.8;
  color: var(--steel);
}
.form-note a { font-weight: 700; }

.form-status {
  padding: 17px 20px;
  border: 3px solid var(--ink);
  font-family: var(--mono);
  font-size: .705rem;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.6;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: var(--orange); color: var(--on-orange); }
.form-status--err { background: var(--alert); color: #fff; border-color: var(--alert); }

[aria-invalid="true"] { border-color: var(--alert) !important; }

/* ---------- 18. Contact details ---------------------------------- */
.detail { padding-block: 17px; border-top: 1px solid var(--rule); display: grid; gap: 5px; }
.detail:last-child { border-bottom: 1px solid var(--rule); }
.detail dt {
  font-family: var(--mono);
  font-size: .59rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail dd { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.45; }
.detail dd a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.detail dd a:hover { color: var(--orange-ink); }


/* ---------- 20. Legal pages ---------------------------------------- */
/* Long-form prose needs a narrower measure than the marketing pages: these
   sections are read, not scanned. Everything else is the existing system. */
.legal { display: grid; gap: clamp(34px, 4vw, 52px); }
.legal section { scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal h2 {
  font-size: clamp(1.32rem, 2.6vw, 1.72rem);
  margin-bottom: 18px;
  text-wrap: balance;
}
.legal h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin-block: 24px 8px;
}
.legal p { max-width: 68ch; margin-bottom: 14px; line-height: 1.68; color: var(--muted); }
.legal p:last-child { margin-bottom: 0; }
.legal p strong { color: var(--fg); }
.legal ul:not(.ticks) { max-width: 68ch; padding-left: 20px; margin-bottom: 16px; display: grid; gap: 9px; }
.legal ul:not(.ticks) li { line-height: 1.6; color: var(--muted); }
.legal ul:not(.ticks) li strong { color: var(--fg); }
.legal a { text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* These pages sit on the standard .wrap container, like every other page, so
   their left edge lines up with the header logo and the footer. That container
   is 1320px, which is far too wide for a block of prose — so the blocks inside
   are capped individually instead. The result is a left-aligned column rather
   than a narrower box centred in the page, which is what made this page look
   inset from the rest of the site. */
.legal-toc, .legal .panel { max-width: 68ch; }

/* In-page contents. A legal page is referred back to, not read once, so being
   able to jump straight to a clause matters more than it does elsewhere. */
.legal-toc { border: 3px solid var(--rule-hard); padding: clamp(20px, 2.6vw, 28px); }
.legal-toc ol { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.legal-toc li { font-size: .95rem; }
.legal-toc a { color: var(--fg); text-decoration-thickness: 1px; }
.legal-toc a:hover { color: var(--orange-ink); }

/* Effective date and the like — small, mono, quiet. */
.legal-meta {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

/* The legal link in the footer's bottom bar. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.footer-legal a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--orange); }

/* ---------- 21. Language suggestion bar ---------------------------- */
/* Offered, never forced. A visitor whose browser is set to French is told the
   French site exists and decides for themselves. Deliberately not a redirect:
   nobody gets moved without asking, crawlers still reach both language trees,
   and — because we store no preference — the promise on the privacy page that
   nothing is kept in your browser stays true.

   Sits above the sticky header so it scrolls away and never eats viewport. */
.langbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 11px clamp(1.15rem, 4vw, 3rem);
  background: var(--ink);
  color: var(--paper);
  border-bottom: 3px solid var(--orange);
}
.langbar p {
  margin: 0;
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .04em;
}
.langbar__go {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--orange);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.langbar__go:hover { color: #fff; }
.langbar__close {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 2px solid rgba(245, 244, 242, .3);
  color: var(--paper);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.langbar__close:hover { border-color: var(--orange); color: var(--orange); }
@media (max-width: 560px) {
  .langbar__close { margin-left: 0; }
}
/* ---------- 19. Footer ------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  --fg: var(--paper);
  --muted: var(--steel-lt);
  --rule: rgba(245,244,242,.18);
  border-top: 8px solid var(--orange);
  padding-block: clamp(48px, 5.5vw, 78px) 28px;
}
.footer-grid { display: grid; gap: clamp(30px, 3.6vw, 52px); margin-bottom: 44px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1.1fr; } }

/* These are h2 rather than h4 so the heading order never skips a level. They
   used to be h4 with no h3 above them anywhere on the site, which meant every
   page jumped straight from h2 — or from h1 on the contact and thank-you
   pages — to h4, and anyone navigating by heading felt the gap.

   line-height and font-variation-settings are repeated here only to cancel
   what the global h2 rule sets; without them these labels would inherit the
   display heading's tight leading and wider glyphs. The rendered result is
   identical to the old h4. */
.footer-grid h2 {
  font-family: var(--mono);
  font-size: .615rem;
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--orange-lt);
  margin-bottom: 16px;
}
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 11px; }
.footer-grid a { color: var(--steel-lt); text-decoration: none; font-size: .92rem; }
.footer-grid a:hover { color: var(--orange-lt); }
.footer-grid p { color: var(--steel-lt); font-size: .93rem; max-width: 36ch; line-height: 1.55; }
.footer-brand { margin-bottom: 18px; }

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
}

/* ---------- 20. Reveal ------------------------------------------- */
/* Content ships visible. The inline script in <head> sets .js on <html>,
   which is what arms the animation — so if JavaScript never runs, nothing is
   left stranded at opacity 0. */
.reveal { transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); }
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in { opacity: 1; transform: none; }

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

@media print {
  .site-header, .btn, .hero__media { display: none; }
  body { background: #fff; color: #000; }
}