/* SABI STRUCTURA – sketch stylesheet. Components follow docs/design-system.md §3; values come from tokens.css.
   Breakpoints: sm < 760, md 760–1023, lg >= 1024 (content stays 1312 px wide from 1440). */

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; font-weight: 400; font-stretch: 100%;
  font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-wrap: break-word; hyphens: manual;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, blockquote { margin: 0; }
ul, ol { padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; } /* AVIF <source> + WebP <img>: the <img> keeps its own box and classes */
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
::selection { background: var(--c-ink); color: var(--c-paper); }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: var(--margin); top: -120px; z-index: 100; padding: 12px 16px; background: var(--c-ink); color: var(--c-paper); font-weight: 600; text-decoration: none; }
.skip:focus { top: 8px; }
main:focus { outline: none; }
.container { width: min(100% - 2 * var(--margin), var(--content-max)); margin-inline: auto; }

/* ============================================================ type roles (§2.2) – font-stretch always after the shorthand */
.t-h1 { font: 660 var(--fs-h1)/1.02 var(--font); font-stretch: var(--w-display); letter-spacing: -0.022em; text-wrap: balance; }
.t-statement { font: 600 var(--fs-statement)/1.08 var(--font); font-stretch: var(--w-display); letter-spacing: -0.016em; text-wrap: balance; }
.t-h2 { font: 620 var(--fs-h2)/1.1 var(--font); font-stretch: var(--w-display); letter-spacing: -0.014em; text-wrap: balance; }
.t-h3 { font: 620 var(--fs-h3)/1.2 var(--font); letter-spacing: -0.006em; text-wrap: balance; }
.t-figure { font: 740 var(--fs-figure)/1 var(--font); font-stretch: var(--w-figure); letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; }
.t-figure-s { font: 720 var(--fs-figure-s)/1.05 var(--font); font-stretch: var(--w-figure); font-variant-numeric: tabular-nums lining-nums; }
.t-notation { font: 640 var(--fs-notation)/1.15 var(--font); font-stretch: var(--w-notation); letter-spacing: 0.005em; font-variant-numeric: tabular-nums; }
.t-value { font: 600 var(--fs-value)/1.3 var(--font); font-variant-numeric: tabular-nums; }
.t-lettering { font: 560 var(--fs-lettering)/1.25 var(--font); font-stretch: var(--w-lettering); letter-spacing: 0.02em; color: var(--c-text-2); }
.t-lede { font-size: var(--fs-lede); line-height: 1.45; max-width: var(--measure-lede); }
.t-small { font-size: var(--fs-small); line-height: 1.45; }
.t-num { font-variant-numeric: tabular-nums lining-nums; }
.nw { white-space: nowrap; }

/* ============================================================ links and buttons (§3.4) */
.tl { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.tl:hover { text-decoration-thickness: 2px; }
.tl--cta { font-weight: 600; }
.tl--btn { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; min-height: 24px; }
p a, li a, dd a { text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
p a:hover, li a:hover, dd a:hover { text-decoration-thickness: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border: 1px solid var(--c-btn); border-radius: 0; background: var(--c-btn); color: var(--c-paper);
  font: 600 var(--fs-ui)/1.25 var(--font); text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--dur-instant), border-color var(--dur-instant), color var(--dur-instant);
}
.btn--hd { white-space: nowrap; }
.btn--primary:hover { background: var(--c-btn-hover); border-color: var(--c-btn-hover); }
.btn--secondary { background: var(--c-paper); color: var(--c-ink); border-color: var(--c-ink); }
.btn--secondary:hover { background: var(--c-calc); }
.btn--hd { min-height: 44px; padding: 0 20px; }
.btn--block { display: flex; width: 100%; min-height: 52px; }
.btn[aria-busy="true"] { cursor: progress; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span, .chip-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: var(--rule-ui);
  background: var(--c-paper); color: var(--c-ink); font: 500 15px/1.2 var(--font); text-align: left;
  transition: background-color var(--dur-instant), border-color var(--dur-instant);
}
.chip-btn { cursor: pointer; }
.chip input:hover + span, .chip-btn:hover { border-color: var(--c-ink); }
.chip input:checked + span, .chip-btn[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.chip input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.chip-n { color: var(--c-grafit); font-variant-numeric: tabular-nums; }
.chip-btn[aria-pressed="true"] .chip-n { color: var(--c-on-ink); }
.chip-btn[aria-disabled="true"] { border-style: dashed; color: var(--c-text-2); cursor: default; } /* a filter that would show nothing */
.chip-btn[aria-disabled="true"]:hover { border-color: var(--c-creion); }

/* option cells (radio) */
.opts { display: grid; gap: 1px; border: var(--rule-cell); background: var(--c-ink); }
.opt { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 14px; background: var(--c-paper); cursor: pointer; line-height: 1.35; transition: background-color var(--dur-instant); }
.opt:hover { background: var(--c-calc); }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt__mark { flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 2px; border: 1px solid var(--c-ink); border-radius: 50%; background: var(--c-paper); }
.opt__label { font-size: 16px; }
.opt:has(input:checked) { background: var(--c-calc); }
.opt input:checked ~ .opt__mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-ink); }
.opt input:checked ~ .opt__label { font-weight: 600; }
.opt:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: -2px; }

/* ============================================================ drafting marks (§3.6) */
.lvl { flex: none; width: 14px; height: 12px; color: var(--c-ink); fill: currentColor; }
.bub {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--c-ink); border-radius: 50%;
  background: var(--c-paper); color: var(--c-ink); font: 600 12.5px/1 var(--font); font-stretch: var(--w-lettering); font-variant-numeric: tabular-nums;
}
.bub.is-on { background: var(--c-ink); color: var(--c-paper); }
.stepb {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--c-ink); border-radius: 50%;
  background: var(--c-paper); color: var(--c-ink); font: 640 15px/1 var(--font); font-stretch: var(--w-notation); font-variant-numeric: tabular-nums;
}
.sm { display: inline-flex; align-items: center; gap: 6px; }
.sm__sw { flex: none; width: 12px; height: 12px; border: 1px solid var(--c-ink); background: var(--c-paper); }
/* finished: the drawing's poché with its Creion hatch (3.2–3.6:1), so the two states differ by more than Calc vs paper */
.sm--fin .sm__sw { background: repeating-linear-gradient(45deg, var(--c-creion) 0 1px, transparent 1px 3.5px), var(--c-calc); }
.sm--plan .sm__sw { border-style: dashed; }
.sm__date { color: var(--c-grafit); font-weight: 400; }
.tri { width: 10px; height: 10px; fill: currentColor; }
.picto { flex: none; color: var(--c-ink); }
.picto * { vector-effect: non-scaling-stroke; }
.pg-l { fill: none; stroke: var(--c-ink); stroke-width: 1; }
.pg-p { fill: var(--c-calc); stroke: var(--c-ink); stroke-width: 1; }
.pg-g { fill: none; stroke: var(--c-ink); stroke-width: 1.5; }
.pg-t { fill: none; stroke: var(--c-ink); stroke-width: 1; }
.pg-f { fill: none; stroke: var(--c-constructie); stroke-width: 0.75; }
.pg-hl { stroke: var(--c-constructie); stroke-width: 0.75; }
.pg-earth { fill: none; stroke: var(--c-creion); stroke-width: 0.75; }
.pg-raft, .pg-bar { fill: var(--c-ink); }

/* view title (§3.1): 2.5 px rule, 2 px gap, 1 px rule */
.view-title { display: inline-block; position: relative; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 2.5px solid currentColor; }
.view-title::after { content: ""; position: absolute; inset-inline: 0; bottom: -5.5px; height: 1px; background: currentColor; }

/* ============================================================ sheets and section heads (§3.1) */
.sheet { padding-block: var(--section-y); }
.sheet--calc { background: var(--c-calc); }
.sheet--ink { background: var(--c-band); color: var(--c-band-text); }
.sheet--rule { border-top: 1px solid var(--c-ink); }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-7); row-gap: var(--s-3); margin-bottom: var(--stack-head); }
.sec-head__intro { max-width: 48ch; color: var(--c-text-2); }
.sec-head__link { margin-left: auto; }

/* footnotes (§3.1) */
.fn { font: 600 0.75rem/0 var(--font); vertical-align: top; align-self: flex-start; } /* 12 px at any heading size, at the top of its line */
/* a 24 × 24 target: the digit sits at the box's left edge (no gap after the word), the negative margins keep the box
   out of the line height and give the space after it back to the text */
.fn a { position: relative; z-index: 1; display: inline-block; min-width: 24px; padding: 6px 0 6px 1px; margin: -6px -15px -6px 0; line-height: 12px; text-align: left; text-decoration: underline; text-underline-offset: 0.15em; }
/* a heading and its footnote marker: the marker follows the last word but stays outside the heading element */
.hn__h { display: inline; font: inherit; letter-spacing: inherit; }
.fn-notes { margin-top: var(--s-5); max-width: 86ch; font-size: var(--fs-small); line-height: 1.45; color: var(--c-text-2); }
.fn-notes li { display: flex; gap: 8px; }
.fn__n { flex: none; font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.fn__back { white-space: nowrap; color: var(--c-ink); }

/* breadcrumb (§3.1) */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--fs-small); color: var(--c-text-2); }
.crumbs li:not(:last-child)::after { content: "/"; margin: 0 8px; color: var(--c-text-2); }
.crumbs a { color: var(--c-text-2); text-decoration: underline; text-underline-offset: 0.22em; }
.crumbs a:hover { color: var(--c-ink); }
.crumbs [aria-current] { color: var(--c-ink); }

/* ============================================================ title blocks (§3.7) */
.cartus { display: grid; margin: 0; gap: 1px; background: var(--c-ink); grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.cartus > .cell { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; padding: var(--cell-pad); background: var(--c-paper); grid-column: span var(--span, 1); }
.cartus dt { font: 560 var(--fs-lettering)/1.25 var(--font); font-stretch: var(--w-lettering); letter-spacing: 0.02em; color: var(--c-text-2); }
.cartus dd { margin: 0; font: 600 var(--fs-value)/1.3 var(--font); font-variant-numeric: tabular-nums; color: var(--c-ink); }
.cell__sub { display: block; margin-top: 4px; font: 400 var(--fs-small)/1.45 var(--font); color: var(--c-text-2); }
.cartus--full { border: var(--rule-frame); }
.cartus--strip { border-block: var(--rule-cell); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.cartus--strip > .cell { grid-column: auto; }
.cartus--form { border: var(--rule-cell); }

/* sketch-only notes */
.sk-note { margin-block: var(--s-6); padding: 16px 20px 18px; border: 1.5px dashed var(--c-grafit); background: var(--c-paper); color: var(--c-ink); font-size: var(--fs-small); line-height: 1.5; max-width: 96ch; }
.sk-note__label { margin-bottom: 8px; font: 600 var(--fs-lettering)/1.25 var(--font); font-stretch: var(--w-lettering); letter-spacing: 0.02em; color: var(--c-text-2); }
.sk-note p + p { margin-top: 6px; }
.sk-note__list { display: grid; gap: 6px; margin: 6px 0; }
.sk-note__list li { position: relative; padding-left: 18px; }
.sk-note__list li::before { content: "–"; position: absolute; left: 0; color: var(--c-grafit); }
.sk-note--slim { margin-top: 0; margin-bottom: var(--s-5); }
.sk-inline { color: var(--c-grafit); font-size: var(--fs-small); }

/* ============================================================ header, menu, action bar (§3.2, §3.3) */
.hd { position: sticky; top: 0; z-index: 50; background: var(--c-paper); border-bottom: 1px solid var(--c-ink); }
.hd__in { display: flex; align-items: center; gap: var(--s-7); height: var(--header-h); }
.hd__logo { flex: none; display: block; width: 104px; color: var(--c-ink); }
.hd__wm { width: 100%; height: auto; }
.hd__list { display: flex; gap: var(--s-6); }
.hd__list a { display: inline-block; padding: 10px 0; font-weight: 500; text-decoration: none; text-underline-offset: 6px; white-space: nowrap; }
.hd__list a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.hd__list a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
.hd__end { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
.lang { display: flex; align-items: baseline; gap: 12px; font: 600 14px/1 var(--font); }
.lang > * { display: inline-block; min-width: 24px; padding: 5px 0; text-align: center; white-space: nowrap; }
.lang__cur { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lang__link { color: var(--c-grafit); text-decoration: none; }
.lang__link:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 5px; }
.lang--full { gap: 20px; font-size: 16px; font-weight: 500; }
.hd__tel { font-weight: 600; text-decoration: none; white-space: nowrap; }
.hd__tel:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.menu { display: none; }
.menu > summary { list-style: none; cursor: pointer; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-2) var(--margin) calc(var(--s-7) + env(safe-area-inset-bottom)); background: var(--c-paper); border-top: 1px solid var(--c-ink);
}
.menu__list a { display: flex; align-items: center; min-height: 56px; border-bottom: var(--rule-hair); font: 600 24px/1.2 var(--font); font-stretch: var(--w-display); text-decoration: none; }
.menu__list a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu__more { display: grid; justify-items: start; gap: var(--s-5); margin-top: var(--s-6); }
.menu__tel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
html.menu-open { overflow: hidden; }

.abar { display: none; }

/* ============================================================ hero (§3.8, §3.9) */
.hero { padding-top: clamp(20px, 1.8vw, 28px); padding-bottom: var(--s-6); }
.hero__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.hero__copy, .hero__fig, .pf-keyd, .hero__notes { grid-column: 1 / -1; }
.hero__copy h1 { max-width: 14.5em; }
.hero__lede { margin-top: 18px; text-wrap: balance; } /* no two-word last line */
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 26px; }
.hero__clients { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; }
.hero__names { font-size: clamp(17px, 1.25vw, 18px); font-weight: 600; line-height: 1.35; color: var(--c-ink); }
.hero__fig { margin-top: var(--s-2); }
.hero__notes .fn-notes { margin-top: var(--s-3); }

/* the drawing */
.pf { position: relative; width: 100%; aspect-ratio: var(--pf-w) / var(--pf-h); overflow-x: clip; }
/* the box ends 16 units below the bubble centres; brackets and group labels hang below in px (hero only) */
.pf--full { margin-bottom: max(0px, calc(13px - 16 / 1312 * 100%)); }
.pf--hero { margin-bottom: calc(52px - 16 / 1312 * 100%); } /* bracket + label (39 px below the bubble centres) + 13 px */
.pf-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pf-svg * { vector-effect: non-scaling-stroke; }
.pf-ov { position: absolute; inset: 0; }
.pf-l {
  position: absolute; left: calc(var(--x) / var(--pf-w) * 100%); top: calc(var(--y) / var(--pf-h) * 100%); translate: -50% -50%;
  white-space: nowrap; pointer-events: none; color: var(--c-ink);
  font: 600 12.5px/1.2 var(--font); font-stretch: var(--w-lettering); letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.pf-bub { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--c-ink); border-radius: 50%; background: var(--c-paper); line-height: 1; transition: background-color var(--dur-instant), color var(--dur-instant); }
.pf-bub.is-on, .pf-bub.is-prev { background: var(--c-ink); color: var(--c-paper); }
.pf-call { display: flex; align-items: center; gap: 6px; translate: -50% -100%; padding: 2px 4px; background: var(--c-paper); font: 640 13px/1.15 var(--font); font-stretch: var(--w-notation); letter-spacing: 0.005em; opacity: 0; visibility: hidden; transition: opacity var(--dur-quick); }
.pf-call.is-on, .pf-call.is-prev { opacity: 1; visibility: visible; }
.pf-call__t { text-align: left; }
.pf-call--r { translate: -100% -100%; }
.pf-call--l { translate: 0 -100%; }
/* ±0,00: the value above the level mark, the mark on the ground line, 8 px clear of the first building */
.pf-zero { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; translate: calc(-100% - 8px) -100%; font: 640 13px/1 var(--font); font-stretch: var(--w-notation); }
.pf-dimt { font-weight: 600; }
.pf-dimt--v { rotate: -90deg; translate: calc(-50% + 10px) -50%; padding: 0 3px; background: var(--c-paper); } /* beside the line, on a paper halo */
/* group brackets and labels, set in px from the bubble centres so they clear the 24 px bubbles at every width */
.pf-brk { position: absolute; left: calc(var(--x) / var(--pf-w) * 100%); width: calc((var(--x2) - var(--x)) / var(--pf-w) * 100%); top: calc(var(--y) / var(--pf-h) * 100% + 17px); height: 8px; translate: 0 -50%; border-inline: 1px solid var(--c-ink); pointer-events: none; }
.pf-brk::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--c-ink); }
.pf-grp { top: calc(var(--y) / var(--pf-h) * 100% + 24px); translate: -50% 0; color: var(--c-text-2); font-weight: 560; }
.pf-hit { position: absolute; left: calc(var(--x0) / var(--pf-w) * 100%); width: calc((var(--x1) - var(--x0)) / var(--pf-w) * 100%); top: calc(var(--y0) / var(--pf-h) * 100%); height: calc((var(--y1) - var(--y0)) / var(--pf-h) * 100%); }
.pf-hit:focus { outline: none; }
.pf-earth { fill: none; stroke: var(--c-creion); stroke-width: 0.75; }
.pf-ground { fill: none; stroke: var(--c-ink); stroke-width: 2; }
.pf-body { fill: var(--c-paper); stroke: var(--c-ink); stroke-width: 1; transition: fill var(--dur-instant); }
.st-fin .pf-body { fill: var(--c-poche-done); }
.pf-fin { stroke: none; pointer-events: none; }
.pf-finl { stroke: var(--c-creion); stroke-width: 0.75; }
.st-plan .pf-body { fill: none; stroke-dasharray: 3 2; }
.pf-fl, .pf-bfl { fill: none; stroke: var(--c-floor); stroke-width: 0.75; }
.pf-hat { opacity: 0; stroke: none; }
.pf-pvl { stroke: var(--c-ink); stroke-width: 0.75; }
.pf-bsm { stroke: var(--c-ink); stroke-width: 1; }
.pf-bsm--c { fill: var(--c-paper); }
.pf-bhbg { fill: var(--c-paper); }
.pf-bhl { stroke: var(--c-constructie); stroke-width: 0.5; }
.pf-raft { fill: var(--c-ink); }
.pf-pile { fill: none; stroke: var(--c-ink); stroke-width: 0.75; }
.pf-fbeam, .pf-pad { fill: var(--c-calc); stroke: var(--c-ink); stroke-width: 1; }
.pf-col { fill: none; stroke: var(--c-ink); stroke-width: 2; }
.pf-break { fill: none; stroke: var(--c-ink); stroke-width: 0.75; }
.pf-axis { fill: none; stroke: var(--c-creion); stroke-width: 0.75; stroke-dasharray: 12 3 2 3; }
.pf-dim { fill: none; stroke: var(--c-ink); stroke-width: 0.75; }
.pf-tick { fill: none; stroke: var(--c-ink); stroke-width: 1; }
.pf-b.is-prev .pf-hat { opacity: 1; }
.pf-b.is-prev .pf-axis, .pf-b.is-sel .pf-axis { stroke: var(--c-ink); }
.pf-b.is-sel .pf-body { fill: var(--c-ink); }
.pf-b.is-sel .pf-fin, .pf-b.is-out .pf-fin { opacity: 0; }
.pf-b.is-sel .pf-fl { stroke: var(--c-grafit); }
.pf-b.is-sel .pf-hat { opacity: 0; }
.pf-b.is-out .pf-body { fill: none; stroke: var(--c-constructie); }
.pf-b.is-out .pf-fl, .pf-b.is-out .pf-hat { opacity: 0; }
.pf-b.is-out .pf-dn { opacity: 0.3; }
.pf-b.is-out .pf-axis { stroke: var(--c-constructie); }
.pf-ov .is-out { opacity: 0.35; }
.pf-hit.is-out { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .pf--hero .pf-ground { transform-box: fill-box; transform-origin: 0 50%; animation: pf-draw var(--dur-draw) var(--ease-in-out) backwards; }
  .pf--hero .pf-up { animation: pf-rise var(--dur-rise) var(--ease-out) backwards; animation-delay: calc(250ms + var(--i) * var(--stagger)); }
  .pf--hero .pf-call.is-on { animation: pf-fade var(--dur-quick) ease 1150ms backwards; }
}
@keyframes pf-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pf-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pf-fade { from { opacity: 0; } }

.pf--compact, .pf-caption { display: none; }
.pf-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 32px; margin-top: var(--s-3); }
.pf-cap__title { font: 620 var(--fs-h3)/1.2 var(--font); font-stretch: var(--w-display); letter-spacing: -0.006em; }
.pf-cap__note { flex: 1 1 380px; max-width: 70ch; font-size: var(--fs-small); line-height: 1.45; color: var(--c-text-2); }
.pf-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--fs-small); }
.pf-caption { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--c-text-2); }

/* key list */
.pf-keyd { margin-top: var(--s-5); }
.pf-keyd__sum { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 600; list-style: none; }
.pf-keyd__sum::-webkit-details-marker { display: none; }
.pf-keyd__sum::before { content: ""; width: 0; height: 0; border-left: 7px solid var(--c-ink); border-block: 5px solid transparent; transition: rotate var(--dur-quick); }
.pf-keyd[open] > .pf-keyd__sum::before { rotate: 90deg; }
.pf-key { display: grid; gap: var(--s-4); }
.pf-key__g { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 4px 16px; padding-top: 10px; border-top: var(--rule-cell); }
.pf-key__h { padding-top: 6px; }
.pf-key__g--single { grid-template-columns: minmax(0, 1fr); }
.pf-key__l { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.pf-key__l li { display: flex; align-items: center; }
.pf-key__l li .fn { align-self: center; translate: 0 -0.5em; } /* beside the name, raised like a superscript */
.pf-key__a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 0; text-decoration: none; font-size: 15px; line-height: 1.25; }
.pf-key__n { font-weight: 500; }
.pf-key__c { color: var(--c-text-2); font-size: 14px; }
.pf-key__a:hover .pf-key__n, .pf-key__a:focus-visible .pf-key__n { text-decoration: underline; text-underline-offset: 0.22em; }
.pf-key__a.is-on .bub, .pf-key__a.is-prev .bub { background: var(--c-ink); color: var(--c-paper); }
/* while a key link has keyboard focus, the arrow-key hint is shown as a lettering line above the groups */
.pf-key:has(.pf-key__a:focus-visible) > .pf-key__hint { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; font: 560 var(--fs-lettering)/1.25 var(--font); font-stretch: var(--w-lettering); letter-spacing: 0.02em; color: var(--c-text-2); }

/* hero panel: the title block of the selected building */
.pnl { background: var(--c-paper); }
.pnl__fig { border: var(--rule-frame); border-bottom: 0; background: var(--c-paper); }
.pnl__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-calc); }
.pnl__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-quick) linear; }
.pnl__media.is-contain { background: var(--c-paper); }
.pnl__img.is-contain { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.pnl__img.is-in { opacity: 0; }
.pnl__cap { display: flex; justify-content: space-between; gap: 12px; padding: 7px 14px 6px; border-top: var(--rule-cell); font: 560 var(--fs-lettering)/1.25 var(--font); font-stretch: var(--w-lettering); letter-spacing: 0.02em; color: var(--c-text-2); }
.pnl__kind { color: var(--c-ink); font-weight: 600; }
.cartus--panel { --cols: 2; }
.cell--proj { grid-column: 1 / -1 !important; }
.cell--proj { position: relative; }
.cell--proj dt { display: flex; align-items: center; min-height: 36px; }
.cell--proj dd { display: block; }
.pnl__namewrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.pnl__name { font: 650 20px/1.2 var(--font); }
.pnl__city { font: 400 15px/1.2 var(--font); color: var(--c-text-2); }
.pnl__city:empty { display: none; }
.pnl__step { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; gap: 2px; }
.pnl__step[hidden] { display: none; }
.pnl__pos { min-width: 5.5em; text-align: center; font: 600 14px/1 var(--font); color: var(--c-ink); }
.stepper { display: grid; place-items: center; width: 40px; height: 36px; padding: 0; border: 0; background: none; color: var(--c-ink); cursor: pointer; }
.stepper:hover { background: var(--c-calc); }
.cell--link dd { margin-top: auto; }

/* ============================================================ proof sheet (§3.10) */
.proof__h { max-width: calc(10 / 12 * 100%); margin-bottom: var(--s-6); }
.cartus--proof { --cols: 12; }
.cartus--proof > .cell { padding: 14px 18px 16px; }
.cell--firm .t-figure-s { display: block; margin-top: 6px; }
.cell--fig dd { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.cell--fig .cell__sub { min-height: 2.9em; }
.fig-row { display: block; }
.fig-pre { margin-right: 2px; font: 500 14px/1.2 var(--font); color: var(--c-ink); } /* „până la” on the figure's baseline */
/* when a figure cell is too narrow for „până la 22 m” on one line, every figure cell in the row stacks the prefix */
.cartus--proof > .cell--fig { padding-inline: 12px; container: fig / inline-size; }
@container fig (max-width: 189.98px) { .fig-pre { display: block; margin: 0 0 2px; } }
.fig-unit { font-size: 0.55em; letter-spacing: 0; }
/* the 64 × 48 pictogram sits in the cell's top-right corner, 12 px in, beside the label and clear of the figure */
.cell--picto { position: relative; }
.cell--picto dt { min-height: 48px; padding-right: 72px; }
.fig-pict { position: absolute; top: 12px; right: 12px; }
.fig-pict .picto { width: 64px; height: 48px; }
.proof__clients { display: block; font-size: 18px; line-height: 1.35; max-width: 40ch; }
.cartus--proof .t-figure-s { line-height: 1.1; }

/* ============================================================ services schedule (§3.12) */
.svc-list { border-bottom: var(--rule-cell); }
.svc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-4); padding-block: 28px 32px; border-top: var(--rule-cell); }
.svc__pict { grid-column: 1 / 3; }
.svc__main { grid-column: 3 / 6; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.svc__promise { font-size: 17px; line-height: 1.5; }
.svc__when { grid-column: 6 / 9; }
.svc__get { grid-column: 9 / 13; }
.svc__when .t-lettering, .svc__get .t-lettering { display: block; margin-bottom: 6px; }
.svc__get .t-lettering + .svc__sign { font-size: 15px; }
.svc__get ul + .t-lettering { margin-top: 18px; }
.svc__when p:not(.t-lettering) { font-size: 16px; line-height: 1.55; }
.dash { display: grid; gap: 6px; font-size: 16px; line-height: 1.5; }
.dash li { position: relative; padding-left: 20px; }
.dash li::before { content: "–"; position: absolute; left: 0; color: var(--c-text-2); }
.svc-notes { display: grid; gap: 12px; margin-top: var(--s-5); max-width: calc(8 / 12 * 100%); font-size: 15px; color: var(--c-text-2); }
.svc-notes__ind, .tools__ind { display: grid; gap: 4px; }
.tools .tools__ind p + p { margin-top: 0; }
.tools__ind { margin-top: var(--s-5); max-width: var(--measure); }

/* ============================================================ plates (§3.13) and viewports (§4) */
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); margin-bottom: calc(-1 * var(--s-7)); }
/* mat / name / notation / strip share their rows with the neighbouring plate, so a sub-line or a footnote marker in
   one plate never pushes its strip below its neighbour's */
.plate { position: relative; min-width: 0; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; margin-bottom: var(--s-7); }
.plate__strip { align-self: start; }
.plate:focus-within { outline: 2px solid var(--c-focus); outline-offset: 6px; }
.plate:focus-within .plate__link:focus-visible { outline: none; }
.mat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 20px; background: var(--c-calc); }
.mat--single { grid-template-columns: minmax(0, 1fr); }
.vp-fig { min-width: 0; }
.vp { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-paper); }
.vp__img { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; max-width: calc(var(--w) * 1px); max-height: calc(var(--h) * 1px); object-fit: cover; }
.vp--cover { background: var(--c-calc); }
/* Models (and GEO5 exports) sit on paper inside the Calc mat, contained with an 8 px inset: never cropped through
   the structure, never keyed, no filters (design §3.13, §4.1). The renders are trimmed to their content bounds when
   the images are prepared (src/model-trim.mjs; the build refuses an untrimmed model), so a white export blends into
   the paper. An export that still carries the ETABS grey gradient keeps a faint lower edge until SABI sends white
   exports. The same rule holds on the A–A stage, in the hero panel and in the index thumbnails. */
.vp--contain { background: var(--c-paper); }
.vp--contain .vp__img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.vp__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin-top: 8px; font: 560 var(--fs-lettering)/1.3 var(--font); font-stretch: var(--w-lettering); letter-spacing: 0.02em; color: var(--c-text-2); }
.vp__kind { color: var(--c-ink); font-weight: 600; }
.vp__text { flex-basis: 100%; font: 400 var(--fs-small)/1.45 var(--font); letter-spacing: 0; color: var(--c-ink); }
.plate__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: var(--s-4); }
.plate__title { display: inline-flex; align-items: baseline; }
.plate__link { text-decoration: none; }
.plate__link::after { content: ""; position: absolute; inset: 0; }
.plate:hover .plate__link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.plate__city { font-size: 16px; color: var(--c-text-2); }
.plate__notation { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 18px; }
.plate__notation .lvl { align-self: center; }
.plate__not { min-width: 0; }
.plate__strip { margin-top: 14px; }
.ddm-strip { margin-top: var(--s-7); }
.cartus .ddm-strip__text { font-weight: 400; line-height: 1.5; }

/* ============================================================ process (§3.16) */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--gutter); counter-reset: none; }
.step { position: relative; display: grid; align-content: start; gap: 10px; }
.step::before { content: ""; position: absolute; top: 16px; left: 0; right: calc(-1 * var(--gutter)); height: 1px; background: repeating-linear-gradient(90deg, var(--c-creion) 0 12px, transparent 12px 15px, var(--c-creion) 15px 17px, transparent 17px 20px); }
.step:nth-child(3n)::before { right: calc(100% - 16px); }
.step .stepb { position: relative; z-index: 1; background: var(--c-calc); }
.step__h { margin-top: 8px; }
.step p { max-width: 40ch; font-size: 16px; line-height: 1.55; }

/* ============================================================ FAQ (§3.18) */
.faq__list { border-top: var(--rule-cell); }
.faq__item { border-bottom: var(--rule-hair); }
.faq__q { display: flex; align-items: baseline; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font: 600 18px/1.35 var(--font); }
.faq__q::-webkit-details-marker { display: none; }
.faq__mk { flex: none; width: 0; height: 0; border-left: 10px solid var(--c-ink); border-block: 6px solid transparent; transition: rotate var(--dur-quick); translate: 0 -1px; }
.faq__item[open] .faq__mk { rotate: 90deg; }
.faq__q:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.faq__a { padding: 0 0 24px 26px; max-width: calc(var(--measure) + 26px); }

/* ============================================================ quote band (§3.19) */
.band__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-7); align-items: start; }
.band__text { grid-column: 1 / 6; }
.band__sheet { grid-column: 7 / 13; }
.view-title--inv { color: var(--c-band-text); }
.band__lede { margin-top: var(--s-5); max-width: 46ch; color: var(--c-band-text-2); font-size: 17px; }
.band__steps { display: grid; gap: 10px; margin-top: var(--s-5); }
.band__steps li { display: flex; align-items: center; gap: 12px; color: var(--c-band-text-2); }
.band__steps .stepb { background: transparent; border-color: var(--c-band-text-2); color: var(--c-band-text-2); }
.band__steps li[aria-current] { color: var(--c-band-text); font-weight: 600; }
.band__steps li[aria-current] .stepb { background: var(--c-paper); border-color: var(--c-paper); color: var(--c-ink); }
.band__direct { display: grid; justify-items: start; gap: 6px; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-band-text-2); }
.band__direct .t-lettering { color: var(--c-band-text-2); }
.band__tel { color: var(--c-band-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.band__tel:hover { text-decoration-thickness: 2px; }
.band__mail { color: var(--c-band-text); }
.band__resp { margin-top: 6px; font-size: var(--fs-small); color: var(--c-band-text-2); }
.sheet--ink { --c-focus: var(--c-paper); }
.band__sheet { --c-focus: var(--c-ink); padding: 32px; background: var(--c-paper); color: var(--c-ink); }
.starter__h { margin-bottom: var(--s-5); }
.band__sheet .fld + .fld { margin-top: var(--s-5); }
.fld__label { display: block; width: 100%; margin-bottom: 10px; font: 600 15px/1.3 var(--font); }
.fld__req { margin-left: 4px; font: 400 13px/1 var(--font); color: var(--c-text-2); }
.starter__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: var(--s-5); }
.starter__next { color: var(--c-text-2); }

/* ============================================================ footer (§3.22) */
.ft { padding-block: clamp(40px, 4vw, 56px) clamp(24px, 2.5vw, 32px); }
.ft--rule { border-top: 1px solid var(--c-ink); }
.cartus--legal { --cols: 12; }
.cartus--legal > .cell { padding: 12px 14px 14px; justify-content: flex-start; } /* one-line labels: values share a row, sub-lines hang below */
.cartus--legal dd { font-size: 15px; font-weight: 600; }
.cell--logo { grid-row: span 2; justify-content: center !important; align-items: center; }
.cell--logo dd { display: grid; place-items: center; width: 100%; height: 100%; }
.ft__wm { width: 160px; max-width: 100%; height: auto; color: var(--c-ink); }
.ft__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--gutter); margin-top: var(--s-7); }
.ft__h { margin-bottom: 12px; }
.ft__links ul { display: grid; gap: 6px; }
.ft__links a { display: inline-block; padding: 2px 0; text-decoration: none; font-size: 15px; }
.ft__links a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.ft__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: var(--s-7); padding-top: var(--s-5); border-top: var(--rule-hair); font-size: var(--fs-small); color: var(--c-text-2); }
.ft__credits a { color: var(--c-text-2); text-underline-offset: 0.22em; }
.ft__credits a:hover { color: var(--c-ink); }
.anpc { margin-left: auto; text-decoration: none; }
.anpc__box { display: grid; place-items: center; width: 250px; height: 50px; border: var(--rule-cell); background: var(--c-paper); color: var(--c-ink); font: 600 var(--fs-lettering)/1.2 var(--font); font-stretch: var(--w-lettering); letter-spacing: 0.02em; text-align: center; }
.anpc:hover .anpc__box { background: var(--c-calc); }
.ft__sketch { flex-basis: 100%; font: 560 12.5px/1.2 var(--font); font-stretch: var(--w-lettering); letter-spacing: 0.04em; color: var(--c-text-2); }

/* ============================================================ projects index (§3.14) */
.pjx-head, .cs-head, .qhead, .chead, .doc, .ddm-head, .about-head { padding-top: clamp(24px, 3vw, 40px); }
.pjx-head { padding-bottom: var(--s-6); }
.pjx-head .crumbs, .cs-head .crumbs, .qhead .crumbs, .chead .crumbs, .doc .crumbs, .ddm-head .crumbs, .about-head .crumbs { margin-bottom: var(--s-5); }
.pjx-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5) var(--s-7); }
.pjx-head__intro { margin-top: var(--s-4); }
.vswitch { display: inline-flex; border: var(--rule-ui); }
.vswitch[hidden] { display: none; }
.vswitch button { min-height: 40px; min-width: 88px; padding: 0 18px; border: 0; background: var(--c-paper); color: var(--c-ink); font: 600 15px/1 var(--font); cursor: pointer; }
.vswitch button + button { border-left: var(--rule-ui); }
.vswitch button:hover { background: var(--c-calc); }
.vswitch button[aria-pressed="true"] { background: var(--c-ink); color: var(--c-paper); }
.fbar { margin-top: var(--s-6); padding-block: var(--s-4); border-block: var(--rule-cell); }
.fbar[hidden] { display: none; }
.fbar__toggle { display: none; }
.fbar__panel { display: grid; gap: var(--s-4); }
.fgroup { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: start; gap: 8px 16px; }
.fgroup__label { padding-top: 14px; }
.fgroup__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fbar__end { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-height: 24px; }
.fbar__apply { display: none; }
.fcount { margin-top: var(--s-5); font-weight: 600; }
.pjx-body { padding-bottom: var(--s-6); }
.pjx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.pjx-table { grid-column: 1 / 9; min-width: 0; }
.pvw { grid-column: 9 / 13; position: sticky; top: calc(var(--header-h) + 24px); }
.mat--pvw { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 12px; }
.vp--pvw { aspect-ratio: 16 / 10; }
.pvw__name { margin-top: var(--s-4); }
.pvw__not { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: 18px; }
.pvw__spans { flex-basis: 100%; padding-left: 20px; font: 400 var(--fs-small)/1.4 var(--font); color: var(--c-text-2); }
.pvw__strip { margin-top: 12px; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
.cartus--strip dd, .t-value { overflow-wrap: normal; } /* a value is never split inside a word („Residenc/e”) */
.pvw__link { display: inline-block; margin-top: 12px; }
.pvw .vp__img { transition: opacity var(--dur-quick) linear; }
.pvw .vp__img.is-in { opacity: 0; }
.pjx-prof { padding-block: var(--s-4) var(--s-7); }
.pjx-prof[hidden] { display: none; }
.pf-fig--group { margin-top: var(--s-6); }
.pf-fig--group + .pf-key { margin-top: var(--s-4); }
.pf-groupnote { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; margin-top: var(--s-6); }
.pjx-foot { padding-bottom: var(--section-y); }
.pjx-foot .fn-notes { margin-top: 0; }
.fempty { padding: var(--s-6) 0; border-bottom: var(--rule-hair); }
.fempty[hidden] { display: none; }
.fempty p { margin-bottom: var(--s-4); }

/* index table */
.ix { width: 100%; border-collapse: collapse; }
.ix thead th { padding: 0 12px 10px; border-bottom: var(--rule-cell); text-align: left; vertical-align: bottom; white-space: nowrap; font: 560 var(--fs-lettering)/1.25 var(--font); font-stretch: var(--w-lettering); letter-spacing: 0.02em; color: var(--c-text-2); }
.ix thead th:first-child { padding-left: 36px; }
.ix td { padding: 18px 12px; border-bottom: var(--rule-hair); vertical-align: baseline; } /* one baseline per row */
.ix__row { position: relative; transition: background-color var(--dur-instant); }
.ix__row:hover, .ix__row:focus-within, .ix__row.is-active { background: var(--c-calc); }
.ix__row[hidden] { display: none; }
.ix__proj { position: relative; padding-left: 36px !important; }
.ix__namewrap { display: inline-flex; align-items: baseline; gap: 0; }
.ix__namewrap .lvl { position: absolute; left: 14px; top: 25px; opacity: 0; transition: opacity var(--dur-instant); }
.ix__row:hover .lvl, .ix__row:focus-within .lvl, .ix__row.is-active .lvl { opacity: 1; }
.ix__name { font: 600 20px/1.25 var(--font); text-decoration: none; }
.ix__name::after { content: ""; position: absolute; inset: 0; }
.ix__name:focus-visible { outline: none; }
.ix__row:focus-within { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.ix__row:hover .ix__name { text-decoration: underline; text-underline-offset: 0.2em; }
.ix__sub { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--c-text-2); }
.ix__reg { font-size: 17px; }
.ix__year, .ix__loc, .ix__st { font-size: 16px; }
.ix__year, .ix__st { white-space: nowrap; }
.ix__thumb { display: none; }
/* a model is never cropped, not even in a thumbnail; on paper, like every model viewport, with a hairline that keeps
   the square slot of the row (a photo fills it) */
.ix__thumb[data-kind="model"], .ix__thumb[data-kind="geo"] { box-sizing: border-box; padding: 4px; object-fit: contain; background: var(--c-paper); outline: var(--rule-hair); outline-offset: -1px; }

/* ============================================================ case study (§3.15) */
.cs-head { padding-bottom: var(--s-6); }
.cs-head__h { max-width: 20em; }
.cs-head__pdf { margin-top: var(--s-3); }
.cs-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: var(--s-4); }
.cs-head__role { font-weight: 600; }
.cs-head .fn-notes { margin-top: var(--s-4); }
.cs-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-7); align-items: start; padding-bottom: var(--s-8); }
.cs-grid--end { padding-bottom: var(--section-y); }
.cs-rows { display: grid; gap: var(--s-8); padding-bottom: var(--section-y); }
.cs-lead { grid-column: 1 / 9; grid-row: 1; min-width: 0; }
.cs-facts { grid-column: 9 / 13; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }
.cs-main { grid-column: 1 / 9; grid-row: 2; min-width: 0; display: grid; gap: var(--s-8); }
.cs-m2r, .cs-gal { min-width: 0; }
.m2r { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-5); align-items: start; margin-top: var(--s-5); }
.m2r__stage { grid-column: 1 / 9; min-width: 0; }
.m2r__stage .aa { margin-top: 0; }
.m2r__side { grid-column: 9 / 13; display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
.m2r__intro { max-width: var(--measure); color: var(--c-text-2); }
.m2r > .m2r__intro { grid-column: 1 / 9; }
.m2r__side .m2r__intro { padding-top: 24px; } /* level with the stage, below its section mark */

.cs-facts__h { margin-bottom: 8px; }
.cartus--facts { --cols: 2; }
.vp--lead1 { aspect-ratio: 3 / 2; }
.cs-about__st { margin-top: var(--s-5); max-width: 22ch; }
.cs-about__sum { margin-top: var(--s-5); max-width: var(--measure); font-size: var(--fs-body); }
.seq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) 12px; margin-top: var(--s-6); padding: 20px; background: var(--c-calc); }
.seq--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m2r > .seq { grid-column: 1 / -1; margin-top: 0; }
.seq--side { margin-top: 0; padding: 14px; grid-template-columns: minmax(0, 1fr); }
.seq__item .vp { aspect-ratio: 4 / 3; }
/* gallery: equal 4:3 tiles across the 12 columns, on a Calc mat like every other image group (design §1: images sit
   on tracing-paper mats); photos cover, models contain on their paper viewport; captions on one line */
.gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--s-5) 12px; margin-top: var(--s-5); padding: 20px; background: var(--c-calc); }
/* one or two tiles keep the three-column tile size; the mat closes around them instead of leaving an empty column */
.gal--n1 { grid-template-columns: minmax(0, 1fr); width: calc((100% - 64px) / 3 + 40px); }
.gal--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc((100% - 64px) * 2 / 3 + 52px); }
.gal__a { display: block; }
.gal__a:hover .vp__img { opacity: 0.92; }
.vp--gal { aspect-ratio: 4 / 3; }
.cs-cta .cta-strip { --cols: 12; grid-auto-flow: row; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.cta-strip__text { grid-column: 1 / 8 !important; }
.cta-strip__act { grid-column: 8 / 13 !important; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: flex-end !important; gap: 12px 24px !important; }
.cta-strip > .cell { padding: 24px 0; background: var(--c-calc); }
.cta-strip__text p { margin-top: 8px; color: var(--c-text-2); }
.cs-cta .cartus--strip { background: var(--c-ink); }
.cs-rel .view-title { margin-bottom: var(--s-5); }
.cs-rel { padding-bottom: var(--s-6); }
.cs-foot { padding-top: var(--s-6); }
.cs-credits { display: grid; gap: 8px; max-width: 96ch; color: var(--c-text-2); }

/* A–A comparison (§3.15) */
.aa { margin-top: var(--s-5); width: 100%; }
.aa__frame { position: relative; padding-block: 24px; }
.aa__stage { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-paper); touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; outline: 1px solid var(--c-constructie); }
.aa__layer { position: absolute; inset: 0; }
.aa__layer--model { background: var(--c-paper); }
.aa__layer--photo { clip-path: inset(0 0 0 var(--cut)); background: var(--c-calc); }
.aa__img { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; max-width: calc(var(--w) * 1px); max-height: calc(var(--h) * 1px); }
.aa__img--model { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.aa__img--photo { object-fit: cover; }
.aa__chip { position: absolute; top: 10px; z-index: 2; padding: 4px 8px; background: var(--c-paper); color: var(--c-ink); font: 600 var(--fs-lettering)/1.2 var(--font); font-stretch: var(--w-lettering); letter-spacing: 0.02em; pointer-events: none; }
.aa__chip--l { left: 10px; }
.aa__chip--r { right: 10px; }
.aa__line { position: absolute; top: 0; bottom: 0; left: var(--cut); z-index: 3; width: 4px; translate: -50% 0; background: var(--c-paper); border-inline: 1px solid var(--c-ink); pointer-events: none; }
.aa__handle { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; gap: 4px; translate: -50% -50%; color: var(--c-ink); }
.aa__handle .tri { width: 16px; height: 16px; padding: 3px; background: var(--c-paper); border: 1px solid var(--c-ink); }
.aa__box { display: grid; place-items: center; width: 44px; height: 44px; background: var(--c-paper); border: 1px solid var(--c-ink); }
.aa__box svg { width: 12px; height: 16px; fill: var(--c-ink); }
.aa__mark { position: absolute; left: var(--cut); display: flex; align-items: center; gap: 3px; translate: -50% 0; font: 600 13px/1 var(--font); font-stretch: var(--w-lettering); color: var(--c-ink); }
.aa__mark .tri { width: 8px; height: 8px; }
.aa__mark--top { top: 4px; }
.aa__mark--bot { bottom: 4px; }
.aa__range { position: absolute; left: 0; bottom: 0; width: 100%; height: 24px; margin: 0; opacity: 0; pointer-events: none; }
.aa:has(.aa__range:focus-visible) .aa__box { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.aa__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; font-size: var(--fs-small); color: var(--c-text-2); }

/* lightbox */
.lb { width: min(96vw, 1100px); max-height: 94vh; padding: 0; border: var(--rule-frame); background: var(--c-paper); color: var(--c-ink); }
.lb::backdrop { background: var(--c-calc); }
.lb__in { display: grid; gap: 12px; padding: 16px; }
.lb__fig { display: grid; justify-items: center; gap: 10px; }
.lb__img { max-width: min(100%, calc(var(--w) * 1px)); max-height: 70vh; width: auto; height: auto; object-fit: contain; }
.lb__cap { max-width: 80ch; font-size: var(--fs-small); color: var(--c-text-2); text-align: left; justify-self: stretch; }
.lb__kind { font-weight: 600; color: var(--c-ink); }
.lb__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lb__pos { margin-right: auto; font-weight: 600; }

/* ============================================================ Dedeman */
.ddm-head__consent { margin-top: var(--s-3); }
.ddm-head__intro { margin-top: var(--s-4); }
.ddm-halls { padding-top: 0; }
.ddm-net__text { margin-top: var(--s-5); max-width: var(--measure); }
.loc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: var(--s-5); border: var(--rule-cell); background: var(--c-ink); }
.loc-grid li { padding: 14px; background: var(--c-paper); font-weight: 600; }
.ddm-net__note, .ddm-net__disc { margin-top: var(--s-4); max-width: 96ch; color: var(--c-text-2); }

/* ============================================================ quote form (§3.20) and contact form */
.qhead { padding-bottom: var(--s-5); }
.qhead__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-4); align-items: end; }
.qhead__row h1 { grid-column: 1 / 6; }
.qhead__intro { grid-column: 6 / 13; color: var(--c-text-2); }
.qhead__phone { display: none; margin-top: var(--s-4); }
.qprog { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: var(--s-6); }
.qprog::before { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, var(--c-creion) 0 12px, transparent 12px 15px, var(--c-creion) 15px 17px, transparent 17px 20px); }
.qprog__i { position: relative; display: flex; align-items: center; gap: 12px; padding-right: 16px; background: var(--c-paper); color: var(--c-text-2); white-space: nowrap; }
.qprog__i:last-child { padding-right: 0; }
.qprog__i .stepb { border-color: var(--c-creion); color: var(--c-text-2); }
.qprog__i[aria-current] { color: var(--c-ink); font-weight: 600; }
.qprog__i[aria-current] .stepb { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.qprog__i.is-done .stepb { border-color: var(--c-ink); color: var(--c-ink); }

.qbody { padding-top: var(--s-5); }
.qgrid, .cgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-7); align-items: start; }
.qmain { grid-column: 1 / 9; min-width: 0; }
.qside { grid-column: 9 / 13; position: sticky; top: calc(var(--header-h) + 24px); display: grid; justify-items: start; gap: 10px; padding: 20px 22px 22px; border: var(--rule-cell); }
.qside__tel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.qside__links { display: grid; gap: 6px; }
.qside__dl dt { margin-bottom: 2px; }
.qside__dl dd { margin: 0; }
.qside__resp { color: var(--c-text-2); }
.qside__prep { margin-top: 8px; }
.qside .dash { font-size: 15px; }
.qf-step + .qf-step { margin-top: var(--s-7); }
.qf-step__h { display: block; width: 100%; margin-bottom: var(--s-4); }
.qf-cells { --cols: 2; }
.fcell { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 72px; padding: 12px 14px 12px; background: var(--c-paper); grid-column: span 1; transition: background-color var(--dur-instant); }
.fcell--full { grid-column: 1 / -1; }
.fcell:hover { background: var(--c-calc); }
.fcell:focus-within { background: var(--c-calc); outline: 2px solid var(--c-ink); outline-offset: -2px; }
.fcell--group:focus-within { outline: none; }
.fcell--group { display: block; }
.fcell--group > legend { float: left; width: 100%; margin-bottom: 6px; }
.fcell--group > legend + * { clear: both; }
.fcell--group > .fcell__help { margin-bottom: 6px; }
.fcell--group > .fcell__err { margin-top: 8px; }
.fld > legend { float: left; }
.fld > legend + * { clear: both; }
.fcell[hidden] { display: none; }
.fcell__label { display: block; width: 100%; font: 600 15px/1.35 var(--font); color: var(--c-ink); }
.fcell__req { margin-left: 4px; font: 400 13px/1 var(--font); color: var(--c-text-2); }
.fcell__help { font-size: 14px; line-height: 1.45; color: var(--c-text-2); }
.fcell__ctl { position: relative; display: flex; align-items: center; }
.fcell__input { width: 100%; min-height: 44px; padding: 6px 0; border: 0; border-radius: 0; background: transparent; color: var(--c-ink); font-size: 17px; line-height: 1.4; outline: none; }
.fcell__input::placeholder { color: var(--c-text-2); opacity: 1; font-size: 15px; font-stretch: var(--w-lettering); } /* examples, never mistaken for values */
textarea.fcell__input { min-height: 120px; resize: vertical; }
input[type="file"].fcell__input { font-size: 15px; padding-top: 10px; }
input[type="file"].fcell__input::file-selector-button { margin-right: 12px; min-height: 40px; padding: 0 14px; border: var(--rule-cell); background: var(--c-paper); color: var(--c-ink); font: 600 15px var(--font); cursor: pointer; }
.fcell--suffix .fcell__input { padding-right: 36px; }
.fcell__suffix { position: absolute; right: 0; font-weight: 600; color: var(--c-text-2); pointer-events: none; }
.fcell__count { align-self: flex-end; font-size: 13px; color: var(--c-text-2); }
.fcell__err { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--c-error); }
.fcell__err[hidden] { display: none; }
.fcell__err::before { content: ""; flex: none; width: 12px; height: 11px; margin-top: 3px; background: var(--c-error); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fcell.is-invalid::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-error); }
.fcell--group .opts, .fcell--group .chips { margin-top: 4px; }
/* inside a form cell the option rows run edge to edge under one rule: the cell is the frame, never a box in a box */
.fcell--group > .opts { margin: 8px -14px 0; border: 0; border-top: var(--rule-cell); }
.fcell--group:has(> .opts) { padding-bottom: 0; }
.fcell--group:has(> .opts) > .fcell__err:not([hidden]) { padding: 10px 0 12px; margin-top: 0; }
.qf-errors { position: relative; margin-bottom: var(--s-5); padding: 16px 20px 16px 24px; border: var(--rule-cell); background: var(--c-paper); }
.qf-errors::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-error); }
.qf-errors:focus { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.qf-errors p { font-weight: 600; color: var(--c-error); }
.qf-errors ul { display: grid; gap: 4px; margin-top: 8px; }
.qf-errors a { color: var(--c-ink); }
.qf-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: var(--s-5); }
.qf-nav[hidden] { display: none; }
.qf-nav [data-qf-back][hidden] { display: none; }
.qf-nav [data-qf-next] { margin-left: auto; }
.qf-submit { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-4); align-items: end; margin-top: var(--s-5); }
.qf-gdpr { grid-column: 1 / 6; color: var(--c-text-2); }
.qf-submit__btn { grid-column: 6 / 9; justify-self: end; }
.qf-done-steps { display: grid; gap: 1px; margin-bottom: var(--s-5); }
.qf-sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 12px 14px; border-block: var(--rule-cell); }
.qf-sum + .qf-sum { border-top: 0; }
.qf-sum__t { font-weight: 600; }
.qf-sum__v { flex: 1 1 280px; color: var(--c-text-2); }
.qf-prefill { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: var(--s-5); }
.qf-prefill[hidden] { display: none; }
.qf-prefill__chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: var(--rule-ui); font-size: 15px; }
.qf-done { padding: var(--s-6) 0; }
.qf-done[hidden] { display: none; }
.qf-done .t-lede { margin-top: var(--s-4); }
.qf-done:focus { outline: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.chead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
.chead__intro { margin-top: var(--s-4); }
.ccells { --cols: 12; margin-top: var(--s-6); }
.ccells > .cell { padding: 14px 18px 16px; }
.cell--big dd { margin-top: 4px; }
.tl-plain { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.cform__main { grid-column: 1 / 9; min-width: 0; }
.cform__intro { margin: var(--s-4) 0 var(--s-5); max-width: var(--measure); color: var(--c-text-2); }
.coffice { grid-column: 9 / 13; display: grid; gap: 10px; padding-top: 10px; }
.coffice__area { font-weight: 600; }
.coffice__reg { margin-top: var(--s-3); }
.coffice__reg dd { font-weight: 400; }

/* ============================================================ documents (legal, privacy) and about */
.doc__draft { margin-top: var(--s-4); font-size: var(--fs-body); }
.doc__upd { margin-top: var(--s-3); }
.doc__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: var(--s-7); }
.doc__toc { grid-column: 1 / 4; position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.doc__toc ol { display: grid; gap: 4px; padding-top: 10px; border-top: var(--rule-cell); font-size: var(--fs-small); }
.doc__toc a { display: inline-block; padding: 3px 0; text-decoration: none; color: var(--c-text-2); }
.doc__toc a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 0.22em; }
.doc__body { grid-column: 5 / 12; display: grid; gap: var(--s-7); }
.doc__sec p, .doc__sec ul { margin-top: var(--s-4); max-width: var(--measure); }
.doc__h { font-size: clamp(1.375rem, 2vw, 1.75rem); }
.doc__rows { margin-top: var(--s-5); }
.doc__credits { display: grid; gap: 6px; }
.about-head .about__lead { margin-top: var(--s-5); font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.4; max-width: 44ch; }
.about__body { display: grid; gap: var(--s-4); margin-top: var(--s-5); max-width: var(--measure); }
.team__intro, .team__rest { margin-top: var(--s-5); max-width: var(--measure); }
.team__person { margin-top: var(--s-6); }
.team__role { color: var(--c-text-2); }
.team__strip, .tools__strip, .clients__strip { margin-top: var(--s-4); }
.tools__std { margin-top: var(--s-5); max-width: var(--measure); }
.tools p + p { margin-top: var(--s-3); }
.clients .t-lede { margin-top: var(--s-5); }
.clients__disc { margin-top: var(--s-4); max-width: 96ch; color: var(--c-text-2); }

/* ============================================================ responsive: lg (>= 1024) */

@media (min-width: 1024px) {
  /* 2:1 instead of 16:10 keeps the floating panel inside the sky above the halls for every pinned project */
  .pnl__media { aspect-ratio: 2 / 1; }
  .hero__copy { grid-column: 1 / 8; }
  .hero__fig { position: static; }
  .pnl { position: absolute; top: calc(var(--fs-h1) * 0.16); right: 0; z-index: 1; width: calc((100% - 11 * var(--gutter)) / 12 * 4 + 3 * var(--gutter)); }
  .pf-keyd > .pf-keyd__sum { display: none; }
}
/* 1024–1279: the English header fits (V1); the index table takes all 12 columns, the preview plate returns at 1280 (V2) */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .hd__in { gap: var(--s-6); }
  .hd__list { gap: 20px; }
  .hd__end { gap: var(--s-4); }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .pjx-table { grid-column: 1 / -1; }
  .pvw { display: none; }
}
/* sticky side columns only where they fit the viewport (laptops at 1280 × 720 or 1366 × 768 scroll them away) */
@media (min-width: 1024px) and (max-height: 860px) {
  .pvw, .cs-facts { position: static; }
}

/* ============================================================ responsive: md and below (< 1024) */
@media (max-width: 1023.98px) {
  .hd__nav, .hd__end > .lang, .hd__tel { display: none; }
  .menu { display: block; }
  .hero__fig { position: relative; }
  .pnl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-6); }
  .pnl__fig { border-bottom: var(--rule-frame); border-right: 0; display: flex; flex-direction: column; }
  .pnl__media { flex: 1; aspect-ratio: auto; min-height: 220px; }
  .stepper { width: 44px; height: 44px; } /* touch is likely below 1024 (design §6.1, item 5) */
  .cell--proj dt { min-height: 44px; }
  .pf--full .pf-dimt, .pf--full .pf-annd, .pf--full .pf-zero { display: none; } /* no lone triangle below 1024 */
  .proof__h { max-width: none; }
  .cartus--proof { --cols: 4; }
  .cartus--proof > .cell { grid-column: span var(--span-md, var(--span, 1)); }
  .svc { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); }
  .svc__pict { grid-column: 1; grid-row: 1; }
  .svc__main { grid-column: 2 / 4; grid-row: 1; }
  .svc__when { grid-column: 1 / 3; }
  .svc__get { grid-column: 3; }
  .svc__pict .picto { width: 110px; height: auto; }
  .svc-notes { max-width: none; }
  .plates { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(3n)::before { right: calc(-1 * var(--gutter)); }
  .step:nth-child(2n)::before { right: calc(100% - 16px); }
  .band__text, .band__sheet { grid-column: 1 / -1; }
  .cartus--legal { --cols: 6; }
  .cartus--legal > .cell { grid-column: span var(--span-md, var(--span, 1)); }
  .cell--logo { grid-column: 1 / -1 !important; grid-row: auto; }
  .ft__wm { width: 140px; }
  .ft__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* projects */
  .pjx-table { grid-column: 1 / -1; }
  .pvw { display: none; }
  .ix thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* block, so the clip holds */
  .ix, .ix tbody { display: block; }
  .ix__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; padding: 18px 0 18px 136px; min-height: 156px; border-bottom: var(--rule-hair); background: none !important; }
  .ix td { display: block; padding: 0; border: 0; }
  .ix__proj { grid-column: 1 / -1; position: static !important; padding: 0 0 12px !important; }
  .ix__thumb { display: block; position: absolute; left: 0; top: 18px; width: 120px; height: 120px; object-fit: cover; background: var(--c-calc); }
  .ix__namewrap .lvl { display: none; }
  .ix__c { padding: 8px 12px 10px 12px !important; border-top: var(--rule-cell) !important; }
  .ix__loc, .ix__year { padding-left: 0 !important; }
  .ix__c::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: 2px; font: 560 var(--fs-lettering)/1.25 var(--font); font-stretch: var(--w-lettering); letter-spacing: 0.02em; color: var(--c-text-2); }
  .ix__loc { order: 1; } .ix__reg { order: 2; } .ix__year { order: 3; } .ix__st { order: 4; }
  .ix__row { row-gap: 0; }
  .ix__c { border-bottom: 0 !important; min-width: 0; }
  .ix__year, .ix__st { border-bottom: var(--rule-cell) !important; } /* the 2×2 strip closes (V20) */
  .ix__reg, .ix__st { border-left: var(--rule-cell) !important; }
  .ix__st { white-space: normal; }
  /* case study */
  .cs-lead, .cs-facts, .cs-main { grid-column: 1 / -1; grid-row: auto; position: static; }
  .m2r__stage, .m2r__side, .m2r > .m2r__intro { grid-column: 1 / -1; }
  .m2r__side .m2r__intro { padding-top: 0; }
  .m2r__side { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; } /* text beside the plate */
  .seq--n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal--n2 { width: auto; }
  .gal--n1 { grid-template-columns: minmax(0, 1fr); width: calc((100% - 52px) / 2 + 40px); }
  .cta-strip__text, .cta-strip__act { grid-column: 1 / -1 !important; justify-content: flex-start !important; }
  /* forms */
  .qmain, .qside, .cform__main, .coffice { grid-column: 1 / -1; position: static; }
  .qhead__row h1, .qhead__intro { grid-column: 1 / -1; }
  .ccells { --cols: 6; }
  .ccells > .cell { grid-column: span 3; }
  .doc__toc { display: none; }
  .doc__body { grid-column: 1 / -1; }
  .loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================ responsive: sm (< 760) */
@media (max-width: 759.98px) {
  .hd__logo { width: 92px; }
  .hd__end > .btn--primary { display: none; }
  .hd__in { gap: var(--s-4); }
  .hero__copy h1 { max-width: none; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero__cta .btn { min-height: 52px; }
  .hero__cta .tl { align-self: flex-start; }
  .pf--full { display: none; }
  .pf--compact, .pf-caption { display: block; }
  .pnl { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-4); }
  .pnl__fig { border-bottom: 0; }
  .pnl__media { aspect-ratio: 16 / 10; min-height: 0; }
  .pf-cap { margin-top: var(--s-5); }
  .pf-key__g { grid-template-columns: minmax(0, 1fr); }
  .pf-key__l { grid-template-columns: minmax(0, 1fr); }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .sec-head__link { margin-left: 0; }
  .cartus--proof { --cols: 2; }
  .cartus--proof > .cell { grid-column: span var(--span-sm, 2); padding: 12px 14px 14px; }
  .cell--picto dt { min-height: 0; padding-right: 0; }
  .fig-pict { position: static; display: block; margin-top: 8px; } /* under the figure on sm (design §3.10) */
  .fig-pict .picto { width: 48px; height: 36px; }
  .cell--firm .t-figure-s { font-size: clamp(1.25rem, 6.2vw, 2rem); } /* the legal name fits the cell; it may break only before „S.R.L.” */
  .svc { grid-template-columns: minmax(0, 1fr); }
  .svc__pict, .svc__main, .svc__when, .svc__get { grid-column: 1; grid-row: auto; }
  .svc__pict .picto { width: 96px; }
  .mat { padding: 12px; gap: 8px; }
  .vp--plate { aspect-ratio: 1 / 1; }
  .plate__strip { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
  .plate__strip > .cell:first-child { grid-column: 1 / -1; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .step { grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; }
  .step .stepb { grid-row: 1 / span 2; }
  .step__h { margin-top: 4px; }
  .step::before { top: 0; bottom: calc(-1 * var(--s-5)); left: 16px; right: auto; width: 1px; height: auto; background: repeating-linear-gradient(180deg, var(--c-creion) 0 12px, transparent 12px 15px, var(--c-creion) 15px 17px, transparent 17px 20px); }
  .step:last-child::before { display: none; }
  .step:nth-child(n)::before { right: auto; }
  .faq__a { padding-left: 0; }
  .band__sheet { padding: 20px 16px; }
  .band__tel { display: inline-flex; align-items: center; min-height: 56px; }
  .cartus--legal { --cols: 2; }
  .cartus--legal > .cell { grid-column: span var(--span-sm, 2); }
  .ft__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ddm-strip, .cta-strip { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .ddm-strip > .cell, .cta-strip > .cell { grid-column: 1 / -1 !important; }
  .anpc { margin-left: 0; flex-basis: 100%; }
  .ft__copy { flex-basis: 100%; }
  /* action bar */
  .abar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding-bottom: env(safe-area-inset-bottom); background: var(--c-paper); border-top: 1px solid var(--c-ink); }
  .abar__a { display: flex; align-items: center; justify-content: center; min-height: var(--bar-h); padding: 0 8px; border-right: 1px solid var(--c-ink); font-weight: 600; text-decoration: none; text-align: center; }
  .abar__a--cta { border-right: 0; background: var(--c-ink); color: var(--c-paper); }
  .abar :focus-visible { outline-offset: -4px; }
  body.has-abar { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
  html:has(body.has-abar) { scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 16px); } /* focus never lands under the bar (WCAG 2.4.11) */
  body:has(:is(input, textarea, select):focus) .abar { display: none; }
  html.menu-open .abar { display: none; }
  /* projects */
  .pjx-head__row { flex-direction: column; align-items: flex-start; }
  .fbar { padding-block: 0; border: 0; }
  .fbar__toggle { display: inline-flex; }
  .fbar__panel { display: none; margin-top: var(--s-4); padding: var(--s-4) 0; border-block: var(--rule-cell); }
  .fbar.is-open .fbar__panel { display: grid; }
  .fgroup { grid-template-columns: minmax(0, 1fr); }
  .fgroup__label { padding-top: 0; }
  .fbar__end { flex-direction: column; align-items: stretch; }
  .fbar__apply { display: flex; width: 100%; min-height: 52px; }
  .ix__row { padding-left: 0; min-height: 0; grid-template-columns: 7rem minmax(0, 1fr); } /* the short values take 7 rem; the regime and status get the rest (no overflow at 320) */
  .ix__proj { min-height: 104px; padding-left: 104px !important; }
  .ix__thumb { width: 88px; height: 88px; }
  .ix__name { font-size: 18px; }
  .ix__c { padding-right: 8px !important; }
  .ix__reg { font-size: min(17px, 4.4vw); }
  /* case study */
  .vp--lead { aspect-ratio: 1 / 1; }
  .seq { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .m2r__side { grid-template-columns: minmax(0, 1fr); }
  .gal, .gal--n1, .gal--n2 { grid-template-columns: minmax(0, 1fr); width: auto; padding: 12px; }
  .aa__frame { padding-block: 20px; }
  .aa__chip { top: 6px; padding: 3px 6px; }
  .aa__chip--l { left: 6px; } .aa__chip--r { right: 6px; }
  /* forms */
  .qhead__phone { display: block; }
  .qprog { gap: 8px; }
  .qprog__i .qprog__t { display: none; }
  .qprog__i[aria-current] .qprog__t { display: inline; }
  .qprog__i { gap: 8px; padding-right: 8px; }
  .qf-cells { --cols: 1; }
  .fcell { grid-column: 1 / -1; }
  .qf-submit { grid-template-columns: minmax(0, 1fr); }
  .qf-gdpr, .qf-submit__btn { grid-column: 1; justify-self: stretch; }
  .qf-submit__btn { min-height: 52px; }
  .qf-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .qf-nav .btn { min-height: 52px; }
  .qf-nav [data-qf-next] { margin-left: 0; grid-column: 2; }
  .qf-nav:has([data-qf-back][hidden]) [data-qf-next] { grid-column: 1 / -1; } /* full-width primary on sm (design §3.4) */
  .ccells { --cols: 2; }
  .ccells > .cell { grid-column: span 2; }
  .loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb__in { padding: 10px; }
  .doc__rows { --cols: 1; } /* long legal values (addresses, phone numbers) get the full width */
  .doc__rows > .cell:last-child:nth-child(odd) { grid-column: auto; }
  .qside__tel { font-size: clamp(1.25rem, 5.6vw, 2rem); }
}
@media (max-width: 359.98px) {
  .qprog__i { white-space: normal; } /* below 360 the current step's label may take two lines rather than overflow */
}

/* ============================================================ modes */
@media (forced-colors: active) {
  .pf-body, .pf-bsm, .pf-ground, .pf-dim, .pf-col, .pf-finl { stroke: CanvasText; }
  .pf-b.is-sel .pf-body { fill: Highlight; }
  .btn, .chip span, .chip-btn, .opts, .cartus { border: 1px solid CanvasText; }
  .sk-note { border-color: CanvasText; }
  .pf-brk, .pf-brk::before { border-color: CanvasText; }
  /* selected chips, filters and radio marks are drawn with background colours, which forced colours remove */
  .chip input:checked + span, .chip-btn[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .chip-btn[aria-pressed="true"] .chip-n { color: HighlightText; }
  .opt input:checked ~ .opt__mark::after { forced-color-adjust: none; background: CanvasText; }
  .opt:has(input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
  .vswitch button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .sm--fin .sm__sw { forced-color-adjust: none; background: repeating-linear-gradient(45deg, CanvasText 0 1px, Canvas 1px 3.5px); border-color: CanvasText; }
}
@media (prefers-contrast: more) {
  :root { --c-creion: var(--c-ink); --c-constructie: var(--c-grafit); }
}
@media print {
  .hd, .abar, .band, .ft__links, .menu, .skip, .aa__line, .aa__range, .sk-note, .cs-cta, .gal, .pvw, .fbar { display: none !important; }
  body { padding: 0 !important; }
  .cs-facts { position: static; }
  .sheet { padding-block: 16px; }
}
.pf-key__a.is-out { opacity: 0.45; }
.qf-nav [data-qf-next][hidden] { display: none; }
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .pnl__media { aspect-ratio: 12 / 5; }
  .pnl__name { font-size: 18px; }
  .pnl .cartus > .cell { padding: 8px 12px 10px; }
  .stepper { width: 34px; }
  .pnl__pos { min-width: 4.6em; }
}
.doc__rows > .cell:last-child:nth-child(odd) { grid-column: 1 / -1; }