/* DEEPRO, "work order". The page is a carbonless order pad: grey form paper, four copy
   tints (one per activity, equal weight), carbon ink, teal as the only stamp ink, 1px form
   rules and zero radius. Light by default (read in daylight, on site or in an office), dark
   follows the system setting, and the header button lets the visitor force either. */

/* ── fonts, self-hosted ── */
@font-face { font-family: "Archivo"; src: url(/assets/fonts/archivo-latin.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  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"; src: url(/assets/fonts/archivo-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Martian Mono"; src: url(/assets/fonts/martian-mono-latin.woff2) format("woff2"); font-weight: 400 500; font-display: swap;
  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"; src: url(/assets/fonts/martian-mono-latin-ext.woff2) format("woff2"); font-weight: 400 500; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+A720-A7FF; }
@font-face { font-family: "Noto Kufi Arabic"; src: url(/assets/fonts/noto-kufi-arabic.woff2) format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }

/* ── tokens ── */
:root {
  --paper: #e3e6e1;
  --sheet: #fafbf8;
  --copy-a: #f6f8f7;   /* lightest teal: maintenance */
  --copy-b: #e1eeec;   /* pale teal: supply */
  --copy-c: #cde4e2;   /* soft teal: import */
  --copy-d: #b7d8d6;   /* deep teal: design & print */
  --ink: #1b2730;
  --ink-soft: color-mix(in oklab, var(--ink) 76%, transparent);
  --rule: color-mix(in oklab, var(--ink) 24%, transparent);
  --teal: #006c72;
  --teal-hi: #00575c;
  --on-teal: #fafbf8;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* panels that slide on a click: moves at once, settles softly */
  --sans: "Archivo", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;
  color-scheme: light dark;
}
/* dark: follows the system unless the visitor picked a theme with the header button (data-theme on <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* carbon copy: neutral ground, the four copies are four steps of teal, teal keeps the logo's hue (#008e96) */
    --paper: #131617;
    --sheet: #1b1f20;
    --copy-a: #222829;
    --copy-b: #1c3132;
    --copy-c: #173a3b;
    --copy-d: #12454a;
    --ink: #ece9e1;
    --teal: #0aa1a9;
    --teal-hi: #13b6be;
    --on-teal: #061012;
  }
}
:root[data-theme="dark"] {
  /* carbon copy: neutral ground, the four copies are four steps of teal, teal keeps the logo's hue (#008e96) */
  --paper: #131617;
  --sheet: #1b1f20;
  --copy-a: #222829;
  --copy-b: #1c3132;
  --copy-c: #173a3b;
  --copy-d: #12454a;
  --ink: #ece9e1;
  --teal: #0aa1a9;
  --teal-hi: #13b6be;
  --on-teal: #061012;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[dir="rtl"] { --sans: "Noto Kufi Arabic", "Archivo", system-ui, sans-serif; }

.copy-a { --copy: var(--copy-a); }
.copy-b { --copy: var(--copy-b); }
.copy-c { --copy: var(--copy-c); }
.copy-d { --copy: var(--copy-d); }

/* ── base and browser surfaces ── */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
  scrollbar-color: var(--teal) var(--paper);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  caret-color: var(--teal);
  text-wrap: pretty;
}
::selection { background: var(--teal); color: var(--on-teal); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--sans); }
button, a, [role="button"], .type { touch-action: manipulation; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
[dir="rtl"] .ic.flip { transform: scaleX(-1); }
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

/* data: references, phone numbers, step numbers */
.data { font-family: var(--mono); font-weight: 500; font-size: 0.86em; letter-spacing: 0; font-variant-numeric: tabular-nums; }
[dir="rtl"] .data { direction: ltr; unicode-bidi: isolate; }
/* a number is LTR inside Arabic, so its own "inline start" is the left: push it to the end of an RTL button explicitly */
:root[dir="rtl"] .actions-3 .btn .data { margin-inline-start: 0; margin-right: auto; }

/* ── type ── */
.t-display {
  margin: 0;
  font-weight: 800; font-stretch: 87%;
  font-size: clamp(36px, 4.6vw, 66px); line-height: 0.98; letter-spacing: -0.015em;
  text-transform: uppercase; text-wrap: balance;
}
.t-h2 {
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-weight: 750; font-stretch: 87%;
  font-size: clamp(26px, 3vw, 40px); line-height: 1.04; letter-spacing: -0.01em;
  text-transform: uppercase; text-wrap: balance;
}
.t-h3, .copy-title, .line-main h3, .sector h3, .steps h3, .clauses dt {
  font-weight: 720; font-stretch: 87%; text-transform: uppercase; letter-spacing: 0; line-height: 1.12;
}
.t-h3 { margin: 0 0 16px; font-size: clamp(20px, 1.8vw, 24px); }
.t-h4 { margin: 28px 0 10px; font-size: 16px; font-weight: 700; }
.lead { margin: 18px 0 0; max-width: 58ch; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.55; }
.strip dt, .field label, .types-set legend, .ft-h, .info-list dt, .chips li {
  font-weight: 600; font-stretch: 62%; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
[dir="rtl"] .t-display, [dir="rtl"] .t-h2, [dir="rtl"] .t-h3, [dir="rtl"] .copy-title, [dir="rtl"] .line-main h3,
[dir="rtl"] .sector h3, [dir="rtl"] .steps h3, [dir="rtl"] .clauses dt, [dir="rtl"] .btn, [dir="rtl"] .statement {
  text-transform: none; letter-spacing: 0; line-height: 1.35;
}
[dir="rtl"] .t-display { font-weight: 700; font-size: clamp(30px, 4.2vw, 58px); }
[dir="rtl"] .strip dt, [dir="rtl"] .field label, [dir="rtl"] .types-set legend, [dir="rtl"] .ft-h, [dir="rtl"] .info-list dt, [dir="rtl"] .copy-tags, [dir="rtl"] .chips li { letter-spacing: 0; }

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 20px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--sans); font-weight: 650; font-stretch: 87%; font-size: 15px; line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-ink { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.btn .data { font-size: 13px; font-weight: 400; text-transform: none; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.actions-3 { gap: 10px; }
/* three equal buttons never wrap two plus one: when their box is too narrow for one row, all three stack */
.bon-head, .stub-sheet { container-type: inline-size; }
@container (max-width: 820px) {
  .actions-3 { flex-direction: column; align-items: stretch; max-width: 30rem; }
  .actions-3 .btn { justify-content: flex-start; }
  .actions-3 .btn .data { margin-inline-start: auto; }
}

/* ── header ── */
.hd { position: sticky; top: 0; z-index: 50; background: var(--sheet); border-bottom: 1px solid var(--ink); padding-top: env(safe-area-inset-top, 0px); }
.hd-in { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 22px); min-height: 64px; }
.hd-logo { display: inline-flex; flex: none; padding-block: 8px; }
.hd-logo img { height: 22px; width: auto; }
.hd-nav { display: flex; margin-inline-start: auto; }
.hd-nav a {
  padding: 10px clamp(6px, 0.7vw, 11px);
  color: var(--ink); text-decoration: none; white-space: nowrap;
  font-weight: 600; font-stretch: 75%; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
}
.hd-nav a[aria-current] { color: var(--teal); text-decoration: underline 2px; text-underline-offset: 8px; }
.hd-menu { margin-inline-start: auto; min-height: 40px; }
.hd-lang .in { min-height: 40px; width: auto; padding: 0 30px 0 12px; font-weight: 600; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] .hd-lang .in { padding: 0 12px 0 30px; background-position: 15px 50%, 10px 50%; }
.hd-call { min-height: 40px; padding: 0 16px; flex: none; }
/* theme button: three states (system, light, dark), it shows the one in force */
.hd-theme { min-height: 40px; width: 40px; padding: 0; justify-content: center; flex: none; }
.hd-theme .ic { display: none; }
:root:not([data-theme]) .hd-theme .i-system,
:root[data-theme="light"] .hd-theme .i-light,
:root[data-theme="dark"] .hd-theme .i-dark { display: block; }

.hd-drawer { border-top: 1px solid var(--rule); background: var(--sheet); }
.hd-drawer .wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 24px; padding-block: 6px 14px; }
.hd-drawer a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none;
  font-weight: 650; font-stretch: 87%; font-size: 16px; text-transform: uppercase; letter-spacing: 0.03em; }
.hd-drawer a[aria-current] { color: var(--teal); }
/* the prerendered page carries both navigations; show the one that fits (the script uses the same 1260px) */
@media (max-width: 1259px) { .hd-nav { display: none; } }
@media (min-width: 1260px) { .hd-menu { display: none; } }

/* ── the form strip: labelled cells, as on a printed order ── */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--ink); }
.strip > div { padding: 8px 16px 10px; border-inline-start: 1px solid var(--rule); min-width: 0; }
.strip > div:first-child { border-inline-start: 0; }
.strip dt { color: var(--ink-soft); }
.strip dd { margin: 4px 0 0; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.strip dd a { color: var(--ink); text-decoration: none; }
.strip-act { display: inline-grid; grid-template-columns: repeat(3, auto); max-width: 100%; border: 1px solid var(--ink);
  background: color-mix(in oklab, var(--copy, var(--sheet)) 55%, var(--sheet)); margin-bottom: clamp(20px, 3vw, 36px); }

/* ── home: the order form ── */
.bon { padding: clamp(12px, 2vw, 24px) 0 clamp(48px, 6vw, 88px); }
.sheet { background: var(--sheet); border: 1px solid var(--ink); }
.bon-head { padding: clamp(22px, 2.6vw, 34px) clamp(16px, 3vw, 40px) clamp(20px, 2vw, 24px); }
.bon-head .lead { margin-top: 14px; max-width: 66ch; }
.bon-head .actions { margin-top: 20px; }

/* trades accordion: four panels in a row, each a tear-off tab in its copy tint plus a sheet (poster, text, link).
   One panel is open; it grows, the others keep only their tab. The sheet has a fixed width, so opening only unclips it. */
.acc { --tab: 64px; --pw: clamp(220px, 25cqi, 320px); container-type: inline-size; display: flex; border-top: 1px solid var(--ink); }
.acc-panel {
  display: flex; flex: 0.0001 0 var(--tab); min-width: 0; overflow: hidden;
  background: var(--copy); border-inline-start: 1px solid var(--ink);
  transition: flex-grow 360ms var(--ease-drawer);
}
.acc-panel:first-child { border-inline-start: 0; }
.acc-panel.is-open { flex-grow: 1; }
.acc-tab {
  display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; width: var(--tab); padding: 20px 0;
  border: 0; border-inline-end: 1px dashed var(--rule); background: transparent; color: var(--ink); font: inherit; cursor: pointer;
  user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: background-color 160ms ease;
}
.acc-tab .data { font-size: 13px; }
.acc-tab-title {
  margin-top: auto; writing-mode: vertical-rl; transform: rotate(180deg);
  font-weight: 720; font-stretch: 87%; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
[dir="rtl"] .acc-tab-title { text-transform: none; letter-spacing: 0; }
.acc-caret { display: none; }
.acc-panel.is-open .acc-tab { cursor: default; }
.acc-panel.is-open .tick { clip-path: inset(0); }
.acc-panel:not(.is-open) .acc-tab:active { background: color-mix(in oklab, var(--copy) 84%, var(--ink)); }
.acc-body { flex: none; width: calc(100cqi - 4 * var(--tab) - 3px); }
.acc-inner { display: flex; gap: clamp(24px, 3cqi, 44px); align-items: center; padding: clamp(20px, 2.4cqi, 32px); }
.acc-poster { flex: none; width: var(--pw); aspect-ratio: 820 / 1100; height: auto; border: 1px solid var(--ink); }
img.acc-poster { object-fit: cover; }
.acc-text { display: grid; gap: 14px; justify-items: start; min-width: 0; max-width: 46ch; }
.acc-title { margin: 0; font-size: clamp(26px, 2.6cqi, 38px); line-height: 1.02; text-transform: uppercase; font-weight: 800; font-stretch: 87%; text-wrap: balance; }
[dir="rtl"] .acc-title { text-transform: none; }
.acc-desc { margin: 0; font-size: 17px; line-height: 1.55; }
.acc-text .copy-tags { margin: 0; padding-top: 12px; justify-self: stretch; }
.acc-text .btn { margin-top: 6px; }

/* composed poster (C, D): the printed posters' layout, a title on paper above three diagonal photo bands.
   It is a printed object, so it keeps its paper and ink in dark mode, like the A and B posters. */
.poster-art { position: relative; overflow: hidden; background: #f2f4f3; container-type: inline-size; }
.pa-title { position: absolute; top: 6.5%; left: 7%; z-index: 1; margin: 0; color: #1f2b2c; font-weight: 800; font-stretch: 75%; font-size: 8.6cqi; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.pa-band { position: absolute; left: 0; width: 100%; max-width: none; object-fit: cover; }
.pa-1 { top: 6.5%; height: 57.7%; clip-path: polygon(0 64.6%, 100% 0, 100% 35.5%, 0 100%); }
.pa-2 { top: 28.5%; height: 57.7%; clip-path: polygon(0 64.6%, 100% 0, 100% 35.5%, 0 100%); }
.pa-3 { top: 50.5%; height: 49.5%; clip-path: polygon(0 75.4%, 100% 0, 100% 100%, 0 100%); }
.copies { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.copy {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 14px clamp(14px, 1.4vw, 20px) 18px;
  background: var(--copy); color: var(--ink); text-decoration: none;
  border-inline-start: 1px solid var(--ink);
  transition: background-color 200ms ease;
}
.copy:first-child { border-inline-start: 0; }
.copy:focus-visible { outline-offset: -4px; }
.copy:active { background: color-mix(in oklab, var(--copy) 88%, var(--ink)); }
.copy-top { display: flex; align-items: center; gap: 10px; }
.box { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border: 1.5px solid var(--ink); }
.tick { width: 15px; height: 15px; color: var(--teal); clip-path: inset(0 100% 0 0); transition: clip-path 220ms var(--ease-out); }
[dir="rtl"] .tick { clip-path: inset(0 0 0 100%); }
.copy-go { width: 20px; height: 20px; margin-inline-start: auto; transition: transform 200ms var(--ease-out); }
.copy-photo { overflow: hidden; border: 1px solid var(--rule); background: var(--paper); }
.copy-photo img { width: 100%; aspect-ratio: 2.3 / 1; object-fit: cover; transition: transform 500ms var(--ease-out); }
.copy-title { margin: 4px 0 0; font-size: clamp(18px, 1.5vw, 21px); }
.copy-text { font-size: 15px; line-height: 1.5; }
.copy-tags { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--rule); color: var(--ink-soft); font-weight: 600; font-stretch: 75%; font-size: 14px; }
.copy:focus-visible .tick { clip-path: inset(0); }
.copies-compact { border: 1px solid var(--ink); background: var(--sheet); }

/* ── sections ── */
.sec { padding-block: clamp(56px, 8vw, 112px); }
.sec-tight { padding-block: clamp(36px, 5vw, 64px); }
.sec-paper { background: var(--sheet); border-block: 1px solid var(--rule); }
.note { margin: 28px 0 0; max-width: 70ch; color: var(--ink-soft); }
.prose { max-width: 68ch; }
.prose p { margin: 0 0 1.1em; font-size: 18px; line-height: 1.65; }
.statement { margin: 0 0 clamp(32px, 4vw, 56px); max-width: 34ch; font-weight: 700; font-stretch: 87%; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.25; }

/* sectors: one large field, two stacked */
.sectors { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); }
.sector { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.sector:first-child { grid-row: span 2; }
.sector img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--rule); }
.sector:first-child img { flex: 1 1 0; min-height: 320px; aspect-ratio: auto; height: 0; }
.sector h3 { margin: 0; font-size: clamp(19px, 1.7vw, 23px); }
.sector p { margin: 6px 0 0; max-width: 54ch; }

/* steps: a real sequence, so the numbers carry meaning */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.steps li { padding: 20px clamp(12px, 1.6vw, 24px) 6px; border-inline-start: 1px solid var(--rule); }
.steps li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.step-n { display: block; color: var(--teal); font-size: clamp(34px, 3.4vw, 48px); line-height: 1; }
[dir="rtl"] .step-n { text-align: right; }
.steps h3 { margin: 16px 0 8px; font-size: 18px; }
.steps p { margin: 0; font-size: 15.5px; }

/* clauses: commitments, network, scope */
.clauses-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.clauses-wrap > .t-h2 { position: sticky; top: 96px; }
.clauses { margin: 0; border-bottom: 1px solid var(--ink); }
.clauses > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 24px; padding: 22px 0; border-top: 1px solid var(--ink); }
.clauses dt { font-size: clamp(18px, 1.6vw, 22px); }
.clauses dd { margin: 0; }
.clauses-tight > div { grid-template-columns: 1fr; }

/* tear-off stub: the closing call to action */
.stub { padding-block: clamp(40px, 6vw, 88px); }
.stub-sheet {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start;
  margin-top: 30px; padding: clamp(28px, 4vw, 48px);
  background: var(--sheet); border: 1px solid var(--ink); border-top: 2px dashed var(--ink);
}
.stub-sheet::before {
  content: ""; position: absolute; inset-inline: -1px; bottom: 100%; height: 30px;
  border: 1px solid var(--ink); border-bottom: 0; background: color-mix(in oklab, var(--sheet) 60%, var(--paper));
}
.stub-text p { margin: 0; max-width: 56ch; }
.stub .t-h2 { margin-bottom: 14px; }
.stub .t-h2 { max-width: 22ch; }
.stub .actions { margin: 0; }

/* ── activity pages: the page takes its copy's colour ── */
.act { background: var(--copy); border-bottom: 1px solid var(--ink); }
.act-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(24px, 4vw, 56px); }
.act-plain .wrap { padding-block: clamp(24px, 4vw, 56px); }
.act-photo { margin: 0; padding: 8px; background: var(--sheet); border: 1px solid var(--ink); transform: rotate(-1deg); }
[dir="rtl"] .act-photo { transform: rotate(1deg); }
.act-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* the text column is too narrow for three buttons in a row: stack all three, each with its number at the end */
.act .actions-3 { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 30rem; }
.act .actions-3 .btn { justify-content: flex-start; }
.act .actions-3 .btn .data { margin-inline-start: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.chips li { padding: 6px 10px; border: 1px solid var(--ink); background: var(--sheet); }

.axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.axes li { display: flex; align-items: center; gap: 12px; padding: 18px 16px 18px 0; font-weight: 700; font-stretch: 87%; font-size: 19px; line-height: 1.25; }
[dir="rtl"] .axes li { padding: 18px 0 18px 16px; }
.box-on .tick { clip-path: inset(0); }
.ticks { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 8px; font-size: 15px; }
.ticks li .ic { margin-top: 4px; color: var(--teal); }

/* order lines: reference and box, description, what the line covers, photo when the line has one */
.lines { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.line { display: grid; grid-template-columns: 6.5em minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 200px); gap: 8px clamp(16px, 2vw, 32px); align-items: start; padding: 20px 0; }
.line + .line { border-top: 1px solid var(--rule); }
.line-ref { display: flex; align-items: center; gap: 10px; padding-top: 2px; }
.line-ref .data { color: var(--teal); font-size: 14px; }
.line-main h3 { margin: 0 0 6px; font-size: clamp(18px, 1.5vw, 21px); }
.line-main p { margin: 0; max-width: 60ch; }
.line-checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.line-checks li { display: flex; gap: 8px; font-size: 15px; }
.line-checks .ic { margin-top: 4px; color: var(--teal); }
.line-photo { display: block; border: 1px solid var(--rule); }
.line-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lines:not(:has(.line-checks)) .line { grid-template-columns: 6.5em minmax(0, 1fr); }
.lines:not(:has(.line-checks)) .line-main p { max-width: 70ch; }
.gallery .data, .other .data { color: var(--teal); font-size: 14px; }

.panel { padding: clamp(24px, 4vw, 56px); background: var(--copy); border: 1px solid var(--ink); }
.panel p { margin: 0; max-width: 62ch; }
.panel .panel-big { max-width: 46ch; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.45; font-weight: 500; }

.gallery { display: grid; gap: clamp(16px, 2vw, 24px); }
.gallery-3 { grid-template-columns: 2fr 1fr 1fr; }
.gallery-2 { grid-template-columns: 3fr 2fr; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: clamp(220px, 26vw, 380px); object-fit: cover; border: 1px solid var(--rule); }
.gallery figcaption { display: flex; gap: 10px; margin-top: 10px; font-weight: 650; font-stretch: 87%; font-size: 15px; }

.scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); align-items: center; }
.scope-photo { margin: 0; padding: 8px; background: var(--sheet); border: 1px solid var(--ink); }
.scope-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ink); }
.other { display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: var(--copy); color: var(--ink); text-decoration: none; border-inline-start: 1px solid var(--ink); }
.other:first-child { border-inline-start: 0; }
.other-t { font-weight: 700; font-stretch: 87%; font-size: 17px; line-height: 1.2; }
.other .ic { margin-inline-start: auto; transition: transform 200ms var(--ease-out); }
.other:active { background: color-mix(in oklab, var(--copy) 88%, var(--ink)); }

/* ── request forms ── */
.form-wrap { max-width: 880px; }
.req { position: relative; padding: clamp(20px, 3vw, 36px); background: var(--copy); border: 1px solid var(--ink); }
.types-set { margin: 0 0 24px; padding: 0; border: 0; }
.types-set legend { margin-bottom: 10px; padding: 0; }
.types { display: flex; flex-wrap: wrap; gap: 8px; }
.type {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px;
  background: var(--copy); border: 1px solid var(--ink); cursor: pointer; user-select: none; -webkit-user-select: none;
  font-weight: 650; font-stretch: 87%; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase;
  transition: transform 140ms var(--ease-out);
}
.type:active { transform: scale(0.97); }
.type input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.type:has(input:checked) { box-shadow: inset 0 0 0 1px var(--ink); }
.type:has(input:checked) .tick { clip-path: inset(0); }
.type:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
[dir="rtl"] .type { text-transform: none; letter-spacing: 0; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin-bottom: 20px; }
.field-wide { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 6px; }
.in {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 12px;
  font-family: var(--sans); font-size: 16px; line-height: 1.4; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--ink); border-radius: 0;
  transition: box-shadow 140ms ease;
}
textarea.in { min-height: 110px; resize: vertical; }
.in:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--teal); }
.err { margin: 0 0 16px; padding: 10px 14px; background: var(--sheet); border: 1px solid var(--ink); font-weight: 600; }
.hint { font-size: 14px; color: var(--ink-soft); }
.hint-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.req .actions { align-items: center; margin-top: 4px; }
.recap { margin: 18px 0; padding: 16px; background: var(--sheet); border: 1px solid var(--rule); font-family: var(--mono); font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; }
.stamp {
  position: absolute; top: 18px; inset-inline-end: 18px; margin: 0; padding: 8px 14px;
  color: var(--teal); border: 2.5px solid var(--teal);
  font-weight: 800; font-stretch: 87%; font-size: 15px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase;
  transform: rotate(-6deg); animation: stamp 260ms var(--ease-out) both;
}
@keyframes stamp { from { opacity: 0; transform: rotate(-6deg) scale(1.25); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
.req-sent .t-h3 { padding-inline-end: 9em; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.info { padding: clamp(20px, 2.4vw, 28px); background: var(--sheet); border: 1px solid var(--rule); }
.info-list { margin: 0; }
.info-list > div { padding: 12px 0; border-top: 1px solid var(--rule); }
.info-list dt { color: var(--ink-soft); }
.info-list dd { margin: 4px 0 0; }
.info-list dd .data { font-size: 15px; line-height: 1.8; color: var(--ink); text-decoration: none; }
.map-link { margin-top: 10px; }
.info .t-h4 { margin-top: 24px; }
/* ── footer ── */
.ft { padding-block: clamp(40px, 5vw, 64px) calc(clamp(24px, 3vw, 40px) + 64px); background: var(--sheet); border-top: 1px solid var(--ink); }
.ft-in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.ft-brand img { height: 24px; width: auto; }
.ft-brand p { max-width: 36ch; color: var(--ink-soft); }
.ft nav, .ft-in > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ft-in > div:last-child p { margin: 4px 0 0; max-width: 30ch; color: var(--ink-soft); }
.ft a { color: var(--ink); text-decoration: none; }
.ft-h { margin: 0 0 6px; color: var(--ink-soft); }
.ft-rights { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-soft); }

.wa-fab {
  position: fixed; z-index: 60;
  inset-inline-end: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px;
  background: var(--teal); color: var(--on-teal); border: 0; text-decoration: none;
  font-weight: 700; font-stretch: 87%; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 12px 24px -12px color-mix(in oklab, var(--ink) 60%, transparent);
  user-select: none; -webkit-user-select: none;
  transition: transform 140ms var(--ease-out);
}
.wa-fab:active { transform: scale(0.97); }
.wa-fab .ic { width: 22px; height: 22px; }

/* ── hover, only where a precise pointer can hover ── */
@media (hover: hover) and (pointer: fine) {
  .btn-ink:hover { background: var(--teal-hi); border-color: var(--teal-hi); }
  .btn-line:hover { background: color-mix(in oklab, var(--ink) 7%, transparent); }
  .acc-panel:not(.is-open) .acc-tab:hover { background: color-mix(in oklab, var(--copy) 90%, var(--ink)); }
  .acc-panel:not(.is-open) .acc-tab:hover .tick { clip-path: inset(0); }
  .hd-nav a:hover, .hd-drawer a:hover, .ft a:hover { color: var(--teal); }
  .copy:hover { background: color-mix(in oklab, var(--copy) 93%, var(--ink)); }
  .copy:hover .tick { clip-path: inset(0); }
  .copy:hover .copy-go, .other:hover .ic { transform: translateX(4px); }
  [dir="rtl"] .copy:hover .copy-go, [dir="rtl"] .other:hover .ic { transform: scaleX(-1) translateX(4px); }
  .copy:hover .copy-photo img { transform: scale(1.03); }
  .other:hover { background: color-mix(in oklab, var(--copy) 93%, var(--ink)); }
  .wa-fab:hover { background: var(--teal-hi); }
}

/* ── responsive ── */
@media (max-width: 1080px) {
  .copies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .copy:nth-child(3) { border-inline-start: 0; }
  .copy:nth-child(n + 3) { border-top: 1px solid var(--ink); }
  .strip:not(.strip-act) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip:not(.strip-act) > div:nth-child(3) { border-inline-start: 0; }
  .strip:not(.strip-act) > div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .line { grid-template-columns: 6.5em minmax(0, 1fr) minmax(0, 1fr); }
  .line-photo { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .gallery-3 { grid-template-columns: 1fr 1fr; }
  .gallery-3 figure:first-child { grid-column: 1 / -1; }
}
/* under 820px the accordion stacks: each tab becomes a full-width bar and the open sheet unfolds below it */
@media (max-width: 819px) {
  .acc { flex-direction: column; }
  .acc-panel { display: block; flex: none; overflow: visible; border-inline-start: 0; border-top: 1px solid var(--ink); }
  .acc-panel:first-child { border-top: 0; }
  .acc-tab { scroll-margin-top: 76px; flex-direction: row; width: 100%; min-height: 56px; padding: 0 clamp(16px, 4vw, 24px); border-inline-end: 0; text-align: start; }
  .acc-tab-title { margin: 0; writing-mode: horizontal-tb; transform: none; white-space: normal; }
  .acc-caret { display: block; width: 18px; height: 18px; margin-inline-start: auto; flex: none; transition: transform 240ms var(--ease-out); }
  .acc-panel.is-open .acc-caret { transform: rotate(180deg); }
  .acc-body { display: grid; grid-template-rows: 0fr; width: auto; transition: grid-template-rows 360ms var(--ease-drawer); }
  .acc-panel.is-open .acc-body { grid-template-rows: 1fr; }
  .acc-inner { flex-direction: column; align-items: stretch; min-height: 0; overflow: hidden; padding: 0 clamp(16px, 4vw, 24px); border-top: 1px dashed transparent; }
  .acc-panel.is-open .acc-inner { padding-bottom: 24px; border-top-color: var(--rule); padding-top: 20px; }
  .acc-poster { width: min(100%, 360px); }
  .acc-text { max-width: none; }
}
@media (max-width: 860px) {
  .act-in, .scope, .clauses-wrap, .stub-sheet { grid-template-columns: 1fr; }
  .clauses-wrap > .t-h2 { position: static; }
  .act-photo { transform: none; }
  [dir="rtl"] .act-photo { transform: none; }
  .sectors { grid-template-columns: 1fr; }
  .sector:first-child { grid-row: auto; }
  .sector:first-child img { flex: none; height: auto; min-height: 0; aspect-ratio: 3 / 2; }
  .line, .lines:not(:has(.line-checks)) .line { grid-template-columns: 1fr; gap: 10px; }
  .others { grid-template-columns: 1fr; }
  .other { border-inline-start: 0; border-top: 1px solid var(--ink); }
  .other:first-child { border-top: 0; }
  .ft-in { grid-template-columns: 1fr 1fr; }
  .ft-brand { grid-column: 1 / -1; }
  .strip-act { grid-template-columns: repeat(2, auto); }
  .strip-act > div:nth-child(3) { border-inline-start: 0; border-top: 1px solid var(--rule); }
  /* stacked steps: the rule moves from the side to the top, every step starts on the same edge */
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li:first-child { border-inline-start: 0; padding: 18px 0 14px; }
  .steps li + li { border-top: 1px solid var(--rule); }
}
@media (max-width: 560px) {
  .copies { grid-template-columns: 1fr; }
  .copy { border-inline-start: 0; border-top: 1px solid var(--ink); }
  .copy:first-child { border-top: 0; }
  .copy-photo img { aspect-ratio: 16 / 9; }
  .fields { grid-template-columns: 1fr; }
  .gallery-3, .gallery-2 { grid-template-columns: 1fr; }
  .gallery-3 figure:first-child { grid-column: auto; }
  .ft-in { grid-template-columns: 1fr; }
  .wa-fab { padding: 0; width: 52px; justify-content: center; }
  .wa-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hd-call { padding: 0 12px; }
  .hd-call span, .hd-menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .req-sent .t-h3 { padding-inline-end: 0; margin-top: 40px; }
}

/* ── reduced motion: keep colour changes, drop movement ── */
@media (prefers-reduced-motion: reduce) {
  .btn, .type, .wa-fab, .copy-go, .other .ic, .copy-photo img { transition: none; }
  .acc-panel, .acc-tab, .acc-body, .acc-caret { transition: none; }
  .btn:active, .type:active, .wa-fab:active { transform: none; }
  .copy:hover .copy-go, .other:hover .ic, .copy:hover .copy-photo img { transform: none; }
  .stamp { animation: stamp-fade 200ms ease both; }
}
@keyframes stamp-fade { from { opacity: 0; } to { opacity: 1; } }