/*
 * Halberd & Stone — layout and components. Namespace .hs-*. Every value comes
 * from assets/tokens.css (--s-*). Square corners, hard lines, no shadows that
 * blur, no gradients except hatching and ruled lines. Mobile-first: 4 columns,
 * 8 at 768px, 12 at 1024px — the survey grid overlay follows the same grid.
 */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--s-header-h) + var(--s-space-m)); }
body {
    margin: 0; background: var(--s-bg); color: var(--s-text);
    font: var(--s-weight-body) var(--s-step-body)/var(--s-leading-body) var(--s-font-body);
    font-stretch: var(--s-wdth-body);
    overflow-x: hidden; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.hs-num { font-variant-numeric: tabular-nums lining-nums; }
.hs-vh { position: absolute !important; width: var(--s-line); height: var(--s-line); margin: calc(var(--s-line) * -1); padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

:focus-visible {
    outline: var(--s-focus-w) solid var(--s-text); outline-offset: var(--s-space-hair);
    box-shadow: 0 0 0 var(--s-focus-halo) var(--s-accent);
}
.hs-hero :focus-visible, .hs-foot :focus-visible, .hs-safety :focus-visible { outline-color: var(--s-accent); box-shadow: 0 0 0 var(--s-focus-halo) var(--s-dark); }

.hs-skip {
    position: absolute; left: var(--s-gutter); top: var(--s-space-s); z-index: calc(var(--s-z-header) + 10);
    padding: var(--s-space-m) var(--s-space-l); background: var(--s-accent); color: var(--s-accent-ink);
    font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-100) var(--s-font-mono); letter-spacing: var(--s-track-label); text-transform: uppercase;
    transform: translateY(-200%);
}
.hs-skip:focus { transform: none; }

.hs-label {
    font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-140) var(--s-font-mono);
    letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-muted);
}

/* ---------- the 4 / 8 / 12 column wrap ---------- */
.hs-wrap {
    position: relative; z-index: var(--s-z-content);
    width: 100%; max-width: var(--s-max); margin-inline: auto; padding-inline: var(--s-gutter);
    display: grid; grid-template-columns: repeat(var(--s-cols), minmax(0, 1fr)); column-gap: var(--s-gap);
}
.hs-wrap > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 768px) { :root { --s-cols: 8; } }
@media (min-width: 1024px) { :root { --s-cols: 12; } }

/* registration marks on a block: two L-shaped corners */
.hs-marks { position: relative; }
.hs-marks::before, .hs-marks::after {
    content: ""; position: absolute; width: var(--s-mark); height: var(--s-mark);
    border: var(--s-line-heavy) solid var(--s-text); pointer-events: none;
}
.hs-marks::before { top: calc(var(--s-line-heavy) * -2); left: calc(var(--s-line-heavy) * -2); border-right: 0; border-bottom: 0; }
.hs-marks::after { bottom: calc(var(--s-line-heavy) * -2); right: calc(var(--s-line-heavy) * -2); border-left: 0; border-top: 0; }

/* ---------- buttons (square, heavy) ---------- */
.hs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-space-sm);
    min-height: var(--s-size-n); padding: var(--s-space-m) var(--s-space-xl2); border: var(--s-line-heavy) solid transparent; border-radius: var(--s-radius);
    font: var(--s-weight-760) var(--s-step-small)/var(--s-leading-100) var(--s-font-display); font-stretch: 112%; letter-spacing: var(--s-track-0p05); text-transform: uppercase;
    text-decoration: none; cursor: pointer;
    transition: background-color var(--s-dur) var(--s-ease), color var(--s-dur) var(--s-ease), border-color var(--s-dur) var(--s-ease);
}
.hs-btn--amber { background: var(--s-accent); color: var(--s-accent-ink); border-color: var(--s-accent); }
.hs-btn--amber:hover { background: var(--s-text); color: var(--s-accent); border-color: var(--s-text); }
.hs-hero .hs-btn--amber:hover { background: var(--s-bg); color: var(--s-text); border-color: var(--s-bg); }
.hs-btn--line { background: transparent; color: var(--s-dark-text); border-color: var(--s-dark-text); }
.hs-btn--line:hover { background: var(--s-dark-text); color: var(--s-dark); }

/* ---------- header ---------- */
.hs-header {
    position: sticky; top: 0; z-index: var(--s-z-header);
    display: flex; align-items: center; gap: var(--s-space-m); flex-wrap: wrap;
    min-height: var(--s-header-h); padding: var(--s-space-s) var(--s-gutter);
    background: var(--s-bg); border-bottom: var(--s-line-heavy) solid var(--s-text);
}
.hs-brand { display: inline-flex; align-items: center; gap: var(--s-space-m); text-decoration: none; margin-right: auto; min-height: var(--s-tap); }
.hs-brand__mark {
    display: inline-grid; place-items: center; width: var(--s-size-mark); height: var(--s-size-mark); flex: none;
    background: var(--s-text); color: var(--s-bg);
    font: var(--s-weight-600) var(--s-step-mark)/var(--s-leading-100) var(--s-font-mono); letter-spacing: var(--s-track-0p02);
}
.hs-brand__name { font: var(--s-weight-860) var(--s-step-brand)/var(--s-leading-100) var(--s-font-display); font-stretch: 118%; letter-spacing: var(--s-track-n0p01); text-transform: uppercase; white-space: nowrap; }
.hs-nav ol { display: flex; flex-wrap: wrap; gap: var(--s-space-2xs) var(--s-space-lx); }
.hs-nav a {
    display: inline-flex; align-items: baseline; gap: var(--s-space-xs); min-height: var(--s-tap); padding-block: var(--s-space-m);
    text-decoration: none; font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-100) var(--s-font-mono); letter-spacing: var(--s-track-label); text-transform: uppercase;
    border-bottom: var(--s-line-heavy) solid transparent;
}
.hs-nav a:hover { border-bottom-color: var(--s-accent); }
.hs-nav__sheet { color: var(--s-muted); }
.hs-header__cta { display: none; }
.hs-menu {
    display: inline-flex; align-items: center; gap: var(--s-space-sm); min-height: var(--s-tap); padding: 0 var(--s-space-ml);
    background: transparent; color: var(--s-text); border: var(--s-line-heavy) solid var(--s-text); border-radius: var(--s-radius);
    font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-100) var(--s-font-mono); letter-spacing: var(--s-track-label); text-transform: uppercase; cursor: pointer;
}
.hs-menu[hidden] { display: none; }
.hs-menu__bars, .hs-menu__bars::before { display: block; width: var(--s-size-bars); height: var(--s-line-heavy); background: currentColor; }
.hs-menu__bars { position: relative; transform: translateY(calc(var(--s-space-3xs) * -1)); }
.hs-menu__bars::before { content: ""; position: absolute; top: var(--s-space-xs); }
.hs-menu[aria-expanded="true"] .hs-menu__bars { transform: rotate(45deg); }
.hs-menu[aria-expanded="true"] .hs-menu__bars::before { top: 0; transform: rotate(-90deg); }
/* no JS: the index simply wraps under the brand */
.hs-nav { flex-basis: 100%; }
.hs-js .hs-nav { display: none; flex-basis: 100%; padding: var(--s-space-2xs) 0 var(--s-space-m); border-top: var(--s-line) solid var(--s-rule); }
.hs-js .hs-nav.is-open { display: block; }
.hs-js .hs-nav.is-open ol { flex-direction: column; gap: 0; }
.hs-js .hs-nav.is-open a { width: 100%; border-bottom: var(--s-line) solid var(--s-rule); font-size: var(--s-step-nav); }
@media (max-width: 439px) {
    .hs-header { flex-wrap: nowrap; gap: var(--s-space-s); }
    .hs-js .hs-header.is-open { flex-wrap: wrap; }
    .hs-brand { gap: var(--s-space-s); min-width: 0; }
    .hs-brand__mark { width: var(--s-size-mark-sm); height: var(--s-size-mark-sm); }
    .hs-brand__name { font-size: var(--s-step-xs); font-stretch: 105%; }
    .hs-menu { padding: 0 var(--s-space-sm); }
}
@media (min-width: 640px) { .hs-header__cta { display: inline-flex; } }
@media (min-width: 1100px) {
    .hs-menu { display: none !important; }
    .hs-nav, .hs-js .hs-nav { display: block; flex-basis: auto; padding: 0; border: 0; }
}

/* ---------- hero (HS-01) ---------- */
.hs-hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: calc(100vh - var(--s-header-h)); min-height: calc(100svh - var(--s-header-h));
    background: var(--s-dark); color: var(--s-dark-text);
    display: flex;
}
.hs-hero__plate, .hs-hero__plate img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hs-hero__plate img { object-fit: cover; object-position: 80% 70%; filter: var(--s-plate-filter); }
/* Phone: the plate shows at the top, the wash deepens under the copy. Desktop: the wash
   is heavy behind the headline on the left and clears to the right, where the plate lives. */
.hs-hero__wash {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 45% at 78% 72%, var(--s-sodium), var(--s-sodium-clear) 70%),
        linear-gradient(180deg, var(--s-overlay-soft) 0%, var(--s-overlay-mid) 30%, var(--s-overlay-strong) 62%);
}
@media (min-width: 1024px) {
    .hs-hero__plate img { object-position: 72% 60%; }
    .hs-hero__wash {
        background:
            radial-gradient(ellipse 50% 50% at 75% 70%, var(--s-sodium), var(--s-sodium-clear) 70%),
            linear-gradient(90deg, var(--s-overlay-strong) 0%, var(--s-overlay-mid) 40%, var(--s-overlay-clear) 72%),
            linear-gradient(0deg, var(--s-overlay-foot) 0%, var(--s-overlay-clear) 38%);
    }
}
.hs-hero__frame { position: absolute; inset: var(--s-space-m); border: var(--s-line) solid var(--s-dark-rule); pointer-events: none; }
.hs-hero__frame span { position: absolute; width: var(--s-size-corner); height: var(--s-size-corner); border: var(--s-line-heavy) solid var(--s-accent); }
.hs-hero__frame span:nth-child(1) { top: calc(var(--s-line-heavy) * -1); left: calc(var(--s-line-heavy) * -1); border-right: 0; border-bottom: 0; }
.hs-hero__frame span:nth-child(2) { top: calc(var(--s-line-heavy) * -1); right: calc(var(--s-line-heavy) * -1); border-left: 0; border-bottom: 0; }
.hs-hero__frame span:nth-child(3) { bottom: calc(var(--s-line-heavy) * -1); left: calc(var(--s-line-heavy) * -1); border-right: 0; border-top: 0; }
.hs-hero__frame span:nth-child(4) { bottom: calc(var(--s-line-heavy) * -1); right: calc(var(--s-line-heavy) * -1); border-left: 0; border-top: 0; }

.hs-hero__inner {
    position: relative; z-index: 1; width: 100%; max-width: var(--s-max); margin-inline: auto;
    padding: clamp(var(--s-space-3xl), 4vw, var(--s-space-7xl)) var(--s-gutter) clamp(var(--s-space-5xl), 5vw, var(--s-space-10xl));
    display: grid; grid-template-columns: repeat(var(--s-cols), minmax(0, 1fr)); column-gap: var(--s-gap);
    grid-template-rows: auto 1fr auto auto; row-gap: var(--s-space-3xl);
}
.hs-hero__inner > * { grid-column: 1 / -1; min-width: 0; }
.hs-hero__tb {
    display: flex; align-items: center; gap: var(--s-space-m); flex-wrap: wrap;
    font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-100) var(--s-font-mono); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-dark-muted);
}
.hs-hero__sheet { color: var(--s-dark-text); font-weight: var(--s-weight-600); }
.hs-hero .hs-bubble { border-color: var(--s-dark-text); color: var(--s-dark-text); }
.hs-hero__copy { align-self: end; }
.hs-hero__kicker {
    margin-bottom: var(--s-space-lx); color: var(--s-dark-muted);
    font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-150) var(--s-font-mono); letter-spacing: var(--s-track-label); text-transform: uppercase;
}
.hs-hero__title {
    max-width: var(--s-hero-measure);
    font: var(--s-weight-display) var(--s-step-hero)/var(--s-leading-display) var(--s-font-display);
    font-stretch: var(--s-wdth-display-sm); letter-spacing: var(--s-track-display);
    text-wrap: balance;
}
.hs-hero__dim { position: relative; height: var(--s-size-dim); margin: var(--s-space-xl2) 0 var(--s-space-lx); max-width: 34rem; }
.hs-hero__dim span { position: absolute; inset: var(--s-space-xs) 0 auto; height: var(--s-line); background: var(--s-dark-muted); transform-origin: left center; }
.hs-hero__dim::before, .hs-hero__dim::after { content: ""; position: absolute; top: 0; width: var(--s-line); height: var(--s-size-dim); background: var(--s-dark-muted); }
.hs-hero__dim::before { left: 0; } .hs-hero__dim::after { right: 0; }
.hs-hero__lede { max-width: 52ch; color: var(--s-dark-muted); font-size: var(--s-step-lede); line-height: var(--s-leading-150); }
.hs-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-space-m); margin-top: var(--s-space-2xl2); }
/* Phone: no full-height hero (it left a dead band above the kicker); the plate gets a
   short reveal at the top and the copy follows straight on. */
@media (max-width: 767px) {
    .hs-hero { min-height: 0; }
    .hs-hero__inner { grid-template-rows: auto; row-gap: var(--s-space-xl); padding-top: var(--s-space-xl); padding-bottom: var(--s-space-3xl); }
    .hs-hero__copy { padding-top: var(--s-hero-reveal); }
    /* The building keeps to its own band and fades to graphite: nothing busy behind the words (LESSONS 2). */
    .hs-hero__plate { bottom: auto; height: var(--s-hero-plate-m); -webkit-mask-image: linear-gradient(180deg, var(--s-dark) 55%, transparent); mask-image: linear-gradient(180deg, var(--s-dark) 55%, transparent); }
    .hs-hero__plate img { object-position: var(--s-hero-plate-pos-m); }
    .hs-hero__wash { bottom: auto; height: var(--s-hero-plate-m); background: radial-gradient(ellipse 70% 50% at 70% 75%, var(--s-sodium), var(--s-sodium-clear) 70%), linear-gradient(180deg, var(--s-overlay-soft), var(--s-overlay-clear) 50%); }
    .hs-hero__dim { margin: var(--s-space-l) 0 var(--s-space-ml); }
    .hs-hero__actions { margin-top: var(--s-space-xl); }
}

.hs-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--s-line) solid var(--s-dark-rule); }
@media (max-width: 479px) {
    .hs-hero__stats { grid-template-columns: minmax(0, 1fr); }
    .hs-hero__stats .hs-hero__stat, .hs-hero__stats .hs-hero__stat + .hs-hero__stat { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: var(--s-space-m); padding: var(--s-space-sm) 0; border-left: 0; border-bottom: var(--s-line) solid var(--s-dark-rule); }
    .hs-hero__stats .hs-hero__stat dd { order: -1; }
}
.hs-hero__stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-space-xs); padding: var(--s-space-ml) var(--s-space-m) 0 0; }
.hs-hero__stat + .hs-hero__stat { padding-left: var(--s-space-m); border-left: var(--s-line) solid var(--s-dark-rule); }
.hs-hero__stat dd { font: var(--s-weight-display) var(--s-step-stat)/var(--s-leading-100) var(--s-font-display); font-stretch: 112%; color: var(--s-accent); }
.hs-hero__unit { display: block; margin-top: var(--s-space-xs); color: var(--s-dark-text); font: var(--s-weight-label) var(--s-step-label-sm)/var(--s-leading-100) var(--s-font-mono); letter-spacing: var(--s-track-label); text-transform: uppercase; }
.hs-hero__stat dt { color: var(--s-dark-muted); font-size: var(--s-step-xs); line-height: var(--s-leading-135); }
.hs-hero__block { display: none; }
@media (min-width: 768px) {
    .hs-hero__title { font-stretch: var(--s-wdth-display); }
}
@media (min-width: 1024px) {
    .hs-hero__copy { grid-column: 1 / 10; }
    .hs-hero__stats { grid-column: 1 / 9; }
    .hs-hero__block {
        grid-column: 10 / 13; grid-row: 3; align-self: end;
        display: grid; grid-template-columns: 1fr 1fr; border: var(--s-line) solid var(--s-dark-rule);
    }
    .hs-hero__block div { padding: var(--s-space-sm) var(--s-space-m); border: var(--s-line) solid var(--s-dark-rule); }
    .hs-hero__block dt { color: var(--s-dark-muted); font: var(--s-weight-label) var(--s-step-label-sm)/var(--s-leading-100) var(--s-font-mono); letter-spacing: var(--s-track-label); text-transform: uppercase; }
    .hs-hero__block dd { margin-top: var(--s-space-xs); font: var(--s-weight-600) var(--s-step-small)/var(--s-leading-100) var(--s-font-mono); }
}

/* ---------- drawing set + survey grid ---------- */
.hs-set { position: relative; }
.hs-grid { position: absolute; inset: 0; z-index: var(--s-z-grid); pointer-events: none; }
.hs-grid__inner {
    height: 100%; max-width: var(--s-max); margin-inline: auto; padding-inline: var(--s-gutter);
    display: grid; grid-template-columns: repeat(var(--s-cols), minmax(0, 1fr)); column-gap: var(--s-gap);
}
.hs-grid__col {
    position: relative; border-inline: var(--s-line) solid var(--s-grid-line);
    transition: background-color var(--s-dur) var(--s-ease), border-color var(--s-dur) var(--s-ease);
}
.hs-grid__col:nth-child(n + 5) { display: none; }
@media (min-width: 768px) { .hs-grid__col:nth-child(-n + 8) { display: block; } }
@media (min-width: 1024px) { .hs-grid__col:nth-child(n) { display: block; } }
.hs-grid__num {
    position: absolute; top: var(--s-space-sm); left: 50%; transform: translateX(-50%);
    min-width: var(--s-size-corner); padding: var(--s-space-3xs) var(--s-space-2xs); text-align: center;
    font: var(--s-weight-label) var(--s-step-label-sm)/var(--s-leading-100) var(--s-font-mono); color: var(--s-muted); background: var(--s-bg);
}
.hs-grid__num--end { top: auto; bottom: var(--s-space-sm); }
.hs-grid__col.is-hot { background: var(--s-hot-tint); border-color: var(--s-grid-hot); }
.hs-grid__col.is-hot .hs-grid__num { background: var(--s-accent); color: var(--s-accent-ink); }

/* ---------- section scaffolding ---------- */
.hs-sec { position: relative; padding-block: var(--s-section); }
/* The safety band closes Process at full bleed; the bid sheet starts right after it, no cream gap between. */
.hs-sec--ends-dark { padding-bottom: 0; }
.hs-sec--after-dark { padding-top: calc(var(--s-section) * 0.6); }
.hs-bubble {
    display: inline-grid; place-items: center; width: var(--s-size-bubble); height: var(--s-size-bubble); flex: none;
    border: var(--s-line-mid) solid var(--s-text); border-radius: 50%;
    font: var(--s-weight-600) var(--s-step-xs)/var(--s-leading-100) var(--s-font-mono);
}
.hs-tb {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-space-sm) var(--s-space-ml);
    padding-top: var(--s-space-ml); border-top: var(--s-line-heavy) solid var(--s-text);
    font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-130) var(--s-font-mono); letter-spacing: var(--s-track-label); text-transform: uppercase;
}
.hs-tb__sheet { font-weight: var(--s-weight-600); padding: var(--s-space-2xs) var(--s-space-s); background: var(--s-text); color: var(--s-bg); }
.hs-tb__kicker { color: var(--s-muted); }
@media (min-width: 768px) { .hs-tb__kicker { margin-left: auto; } }
.hs-head { display: grid; gap: var(--s-space-xl); margin: clamp(var(--s-space-3xl), 4vw, var(--s-space-9xl)) 0 clamp(var(--s-space-5xl), 5vw, var(--s-space-11xl)); }
.hs-h2 {
    max-width: 20ch;
    font: var(--s-weight-display) var(--s-step-h2)/var(--s-leading-98) var(--s-font-display);
    font-stretch: var(--s-wdth-display-sm); letter-spacing: var(--s-track-display); text-wrap: balance;
}
.hs-intro { max-width: 46ch; color: var(--s-muted); font-size: var(--s-step-lede); line-height: var(--s-leading-150); }
@media (min-width: 1024px) {
    .hs-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-gap); align-items: end; }
    .hs-h2 { grid-column: 1 / 9; font-stretch: var(--s-wdth-display); }
    .hs-intro { grid-column: 9 / 13; }
}

/* ---------- capabilities (HS-02) ---------- */
.hs-matrix { background: var(--s-bg); border: var(--s-line) solid var(--s-rule-strong); }
.hs-matrix table { width: 100%; border-collapse: collapse; }
.hs-matrix thead { position: absolute; width: var(--s-line); height: var(--s-line); overflow: hidden; clip-path: inset(50%); }
.hs-matrix tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-space-xs); border-bottom: var(--s-line) solid var(--s-rule); }
.hs-matrix tbody tr { padding: var(--s-space-m) var(--s-space-ml); }
.hs-matrix tbody th { grid-column: 1 / -1; padding-bottom: var(--s-space-2xs); text-align: left; }
.hs-matrix__name { display: block; font: var(--s-weight-760) var(--s-step-h4)/var(--s-leading-115) var(--s-font-display); font-stretch: 110%; }
.hs-matrix__fig { display: block; margin-top: var(--s-space-hair); color: var(--s-muted); font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-130) var(--s-font-mono); letter-spacing: var(--s-track-0p04); font-variant-numeric: tabular-nums; }
.hs-matrix td { display: block; min-width: 0; }
.hs-matrix td .hs-cell { display: none; }
.hs-chip {
    display: block; padding: var(--s-space-xs2) 0; text-align: center; border: var(--s-line-heavy) solid var(--s-text);
    font: var(--s-weight-600) var(--s-step-label-sm)/var(--s-leading-100) var(--s-font-mono); letter-spacing: var(--s-track-0p06); text-transform: uppercase; white-space: nowrap;
}
.hs-matrix td[data-mark="core"] .hs-chip { background: var(--s-text); color: var(--s-bg); }
.hs-matrix td[data-mark="partner"] .hs-chip { background: var(--s-bg); color: var(--s-text); }
.hs-codes { display: flex; flex-wrap: wrap; gap: var(--s-space-xs) var(--s-space-ml); padding: 0 var(--s-space-l) var(--s-space-l); color: var(--s-muted); font: var(--s-weight-label) var(--s-step-label-sm)/var(--s-leading-140) var(--s-font-mono); letter-spacing: var(--s-track-0p04); }
.hs-codes__label { width: 100%; text-transform: uppercase; letter-spacing: var(--s-track-label); }
.hs-codes b { color: var(--s-text); text-transform: uppercase; }
.hs-cell { display: inline-block; width: var(--s-size-cell); height: var(--s-size-cell); flex: none; }
.hs-cell--core { background: var(--s-text); }
.hs-cell--partner { border: var(--s-line-heavy) solid var(--s-text); background: var(--s-bg); }
.hs-cell--none { border-top: var(--s-line-heavy) solid var(--s-rebar); height: 0; width: var(--s-size-dim); }
.hs-legend { display: flex; flex-wrap: wrap; gap: var(--s-space-sm) var(--s-space-3xl); padding: var(--s-space-ml) var(--s-space-l); font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-140) var(--s-font-mono); letter-spacing: var(--s-track-0p04); color: var(--s-muted); }
.hs-legend li { display: flex; align-items: center; gap: var(--s-space-sm); }
.hs-legend .hs-cell--core { background: var(--s-text); }
@media (min-width: 768px) {
    .hs-matrix thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
    .hs-matrix tr { display: table-row; padding: 0; }
    .hs-matrix th, .hs-matrix td { display: table-cell; padding: var(--s-space-l) var(--s-space-ml); vertical-align: middle; }
    .hs-matrix td { text-align: center; border-left: var(--s-line) solid var(--s-rule); }
    .hs-matrix td .hs-cell { display: inline-block; margin: 0; vertical-align: middle; }
    .hs-chip, .hs-codes { display: none; }
    .hs-matrix thead th {
        text-align: center; vertical-align: bottom; border-bottom: var(--s-line-heavy) solid var(--s-text);
        font: var(--s-weight-label) var(--s-step-label-sm)/var(--s-leading-130) var(--s-font-mono); letter-spacing: var(--s-track-0p08); text-transform: uppercase; color: var(--s-muted);
    }
    .hs-matrix thead th:first-child { text-align: left; }
    .hs-matrix tbody th { width: 30%; padding-bottom: var(--s-space-l); }
    .hs-matrix tbody tr { transition: background-color var(--s-dur) var(--s-ease); }
    .hs-matrix tbody tr:hover { background: var(--s-surface); }
    .hs-legend { border-top: var(--s-line) solid var(--s-rule-strong); }
}

.hs-diff { display: grid; gap: var(--s-space-2xl); margin-top: clamp(var(--s-space-8xl), 7vw, var(--s-space-13xl)); }
.hs-diff__title { margin-top: var(--s-space-sm); font: var(--s-weight-display) var(--s-step-h2)/var(--s-leading-98) var(--s-font-display); font-stretch: var(--s-wdth-display-sm); letter-spacing: var(--s-track-display); }
.hs-diff__body { max-width: 60ch; font-size: var(--s-step-lede); line-height: var(--s-leading-155); }
.hs-figs { display: grid; gap: var(--s-gap); margin-top: var(--s-space-l); }
.hs-figs__item { padding: var(--s-space-xl2) var(--s-space-xl); background: var(--s-surface); border: var(--s-line) solid var(--s-rule); }
.hs-figs__item dd { font: var(--s-weight-display) var(--s-step-stat)/var(--s-leading-100) var(--s-font-display); font-stretch: 112%; }
.hs-figs__item dt { margin-top: var(--s-space-sm); color: var(--s-muted); font-size: var(--s-step-small); line-height: var(--s-leading-140); }
@media (min-width: 768px) { .hs-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
    .hs-diff { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-gap); }
    .hs-diff__head { grid-column: 1 / 6; }
    .hs-diff__body { grid-column: 6 / 13; align-self: end; }
    .hs-figs { grid-column: 1 / -1; }
}

/* ---------- The Rise (HS-03) ---------- */
.hs-rise { padding-bottom: 0; }
.hs-rise__pin { position: relative; z-index: var(--s-z-content); padding-bottom: var(--s-section); }
.hs-rise__stage { row-gap: var(--s-space-l); align-items: center; }
.hs-rise__drawing { background: var(--s-bg); border: var(--s-line) solid var(--s-rule-strong); padding: clamp(var(--s-space-xs), 1.4vw, var(--s-space-lx)); }
.hs-elev { width: 100%; height: auto; overflow: visible; }
.hs-elev--d { display: none; }
@media (min-width: 768px) { .hs-elev--d { display: block; } .hs-elev--m { display: none; } }
.hs-elev__ghost { fill: none; stroke: var(--s-ghost); stroke-width: 1.5; stroke-dasharray: 6 4; }

.hs-elev__gridline { stroke: var(--s-draw-grid); stroke-width: 1; stroke-dasharray: 10 4 2 4; }
.hs-elev__bubble { fill: var(--s-bg); stroke: var(--s-draw-line); stroke-width: 1.5; }
.hs-elev__bubbletext { fill: var(--s-text); font: var(--s-weight-600) var(--s-svg-l) var(--s-font-mono); }
.hs-earth { stroke: var(--s-draw-thin); stroke-width: 1; }
.hs-elev__grade { stroke: var(--s-draw-line); stroke-width: 2.5; }
.hs-elev__footing { fill: var(--s-draw-footing); stroke: var(--s-draw-line); stroke-width: 1; }
.hs-elev__col { fill: var(--s-draw-concrete); stroke: var(--s-draw-line); stroke-width: 1; }
.hs-elev__slab { fill: var(--s-draw-line); }
.hs-elev__glass { fill: var(--s-draw-glass); fill-opacity: 0.14; }
.hs-elev__mullion { stroke: var(--s-draw-thin); stroke-width: 1; }
.hs-elev__dimline { stroke: var(--s-draw-line); stroke-width: 1; }
.hs-elev__tick { stroke: var(--s-draw-line); stroke-width: 2; }
.hs-elev__tri { fill: var(--s-draw-line); }
.hs-elev__note { fill: var(--s-muted); font: var(--s-weight-label) var(--s-svg-s) var(--s-font-mono); letter-spacing: var(--s-track-0p04); white-space: pre; }
.hs-elev__dimtext { fill: var(--s-text); font: var(--s-weight-600) var(--s-svg-m) var(--s-font-mono); letter-spacing: var(--s-track-0p06); }
.hs-elev__datumtext { fill: var(--s-text); font: var(--s-weight-600) var(--s-svg-datum-sm) var(--s-font-mono); }
.hs-elev--m .hs-elev__bubbletext { font-size: var(--s-svg-xl-sm); }
.hs-elev--m .hs-elev__dimtext { font-size: var(--s-svg-l-sm); }
.hs-elev--m .hs-elev__note { font-size: var(--s-svg-m-sm); }
.hs-elev--m .hs-stamp__sub { font-size: var(--s-svg-2xs); letter-spacing: var(--s-track-0p02); }
.hs-hatch-a { fill: var(--s-accent); }
.hs-hatch-b { fill: var(--s-text); }
.hs-stamp__field { fill: var(--s-bg); stroke: var(--s-text); stroke-width: 2; }
.hs-stamp__l1 { fill: var(--s-text); font: var(--s-weight-600) var(--s-svg-m) var(--s-font-mono); letter-spacing: var(--s-track-0p2); text-transform: uppercase; }
.hs-stamp__l2 { fill: var(--s-text); font: var(--s-weight-880) var(--s-svg-stamp) var(--s-font-display); font-stretch: 118%; text-transform: uppercase; letter-spacing: var(--s-track-n0p01); }
.hs-stamp__sub { fill: var(--s-muted); font: var(--s-weight-label) var(--s-svg-xs) var(--s-font-mono); letter-spacing: var(--s-track-0p08); text-transform: uppercase; }

.hs-ledger { background: var(--s-surface); border: var(--s-line) solid var(--s-rule-strong); padding: var(--s-space-l); }
.hs-ledger__title {
    display: flex; justify-content: space-between; padding-bottom: var(--s-space-sm); border-bottom: var(--s-line-heavy) solid var(--s-text);
    font: var(--s-weight-600) var(--s-step-label)/var(--s-leading-100) var(--s-font-mono); letter-spacing: var(--s-track-label); text-transform: uppercase;
}
/* A ledger page: every row is label, then figure and unit in fixed columns, so the
   figures line up and a unit never drops under its number. */
.hs-ledger__row { padding: var(--s-space-sm) 0; border-bottom: var(--s-line) solid var(--s-rule); }
.hs-ledger__row dt { color: var(--s-muted); font: var(--s-weight-label) var(--s-step-label-sm)/var(--s-leading-130) var(--s-font-mono); letter-spacing: var(--s-track-0p08); text-transform: uppercase; }
.hs-ledger__row dd {
    margin-top: var(--s-space-2xs); display: grid; grid-template-columns: minmax(var(--s-ledger-val-min), max-content) minmax(0, 1fr);
    align-items: baseline; column-gap: var(--s-space-sm);
}
.hs-ledger__val { font: var(--s-weight-display) var(--s-step-counter)/var(--s-leading-105) var(--s-font-display); font-stretch: 105%; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.hs-ledger__unit { color: var(--s-muted); font: var(--s-weight-label) var(--s-step-label-sm)/var(--s-leading-120) var(--s-font-mono); letter-spacing: var(--s-track-0p04); white-space: nowrap; }
.hs-ledger__row--safety .hs-ledger__val { justify-self: start; padding: 0 var(--s-space-sm); background: var(--s-accent); color: var(--s-accent-ink); }
@media (min-width: 480px) {
    .hs-ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s-space-ml); }
    .hs-ledger__row dd { margin-top: 0; grid-template-columns: minmax(var(--s-ledger-val-min), max-content) minmax(var(--s-ledger-unit-min), max-content); }
    .hs-ledger__val { text-align: right; }
    .hs-ledger__row--safety .hs-ledger__val { justify-self: end; }
}
.hs-ledger__seq { margin-top: var(--s-space-ml); }
.hs-ledger__stages { margin-top: var(--s-space-s); }
.hs-ledger__stages li {
    display: flex; gap: var(--s-space-sm); padding: var(--s-space-xs) var(--s-space-s);
    font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-135) var(--s-font-mono); letter-spacing: var(--s-track-0p03);
    transition: background-color var(--s-dur) var(--s-ease), color var(--s-dur) var(--s-ease);
}
.hs-ledger__n { color: var(--s-muted); }
.hs-ledger__stages li.is-done { color: var(--s-muted); }
.hs-ledger__stages li.is-now { background: var(--s-accent); color: var(--s-accent-ink); }
.hs-ledger__stages li.is-now .hs-ledger__n { color: var(--s-accent-ink); }
.hs-ledger__note { margin-top: var(--s-space-m); color: var(--s-muted); font-size: var(--s-step-xs); line-height: var(--s-leading-140); }

/* live (pinned) mode — only once JS has taken over */
.hs-rise.is-live .hs-rise__pin { display: flex; align-items: center; min-height: calc(100vh - var(--s-header-h)); min-height: calc(100svh - var(--s-header-h)); padding-block: var(--s-space-m); }
.hs-rise.is-live .hs-ledger__note { display: none; }
@media (max-width: 1023px) {
    .hs-rise.is-live .hs-rise__drawing { padding: var(--s-space-2xs); }
    .hs-rise.is-live .hs-ledger { padding: var(--s-space-sm) var(--s-space-m); }
    .hs-rise.is-live .hs-ledger__row { padding-block: var(--s-space-xs); }
    .hs-rise.is-live .hs-ledger__seq { display: none; }
    .hs-rise.is-live .hs-ledger__stages li:not(.is-now) { display: none; }
    .hs-rise.is-live .hs-ledger__stages { margin-top: var(--s-space-s); }
}
/* Phone, pinned: the ledger collapses to one strip of two figures plus the current stage,
   and the portrait elevation takes the freed height. */
@media (max-width: 767px) {
    .hs-rise.is-live .hs-rise__stage { row-gap: var(--s-space-s); }
    .hs-rise.is-live .hs-rise__drawing { display: flex; justify-content: center; }
    .hs-rise.is-live .hs-elev--m {
        width: auto; max-width: 100%;
        height: calc(100svh - var(--s-header-h) - var(--s-rise-chrome)); min-height: var(--s-rise-svg-min);
    }
    .hs-rise.is-live .hs-ledger__title { display: none; }
    .hs-rise.is-live .hs-ledger__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-space-m); }
    .hs-rise.is-live .hs-ledger__row:not(.hs-ledger__row--strip) { display: none; }
    .hs-rise.is-live .hs-ledger__row { display: block; padding-block: var(--s-space-2xs); border-bottom: 0; }
    .hs-rise.is-live .hs-ledger__row dd { grid-template-columns: max-content minmax(0, 1fr); column-gap: 6px; }
    .hs-rise.is-live .hs-ledger__unit { white-space: normal; }
    .hs-rise.is-live .hs-ledger__stages { margin-top: var(--s-space-2xs); }
    .hs-rise.is-live .hs-ledger__stages li { padding-block: var(--s-space-2xs); }
}
@media (min-width: 1024px) {
    .hs-rise__drawing { grid-column: 1 / 9; }
    .hs-ledger { grid-column: 9 / 13; }
    .hs-rise.is-live .hs-elev { max-height: calc(100svh - var(--s-header-h) - var(--s-rise-chrome-lg)); }
}

/* ---------- projects (HS-04) ---------- */
.hs-cards { display: grid; grid-template-columns: repeat(var(--s-cols), minmax(0, 1fr)); gap: var(--s-gap); }
.hs-card { grid-column: 1 / -1; background: var(--s-surface); border: var(--s-line) solid var(--s-rule-strong); transition: border-color var(--s-dur) var(--s-ease), box-shadow var(--s-dur) var(--s-ease); }
.hs-card:hover, .hs-card:focus-within { border-color: var(--s-text); box-shadow: inset 0 var(--s-space-2xs) 0 var(--s-accent); }
.hs-card article { height: 100%; display: flex; flex-direction: column; }
.hs-card__plate { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: var(--s-line) solid var(--s-rule-strong); background: var(--s-graphite); padding: var(--s-space-xs); }
.hs-card__plate img { width: 100%; height: 100%; object-fit: cover; filter: var(--s-plate-filter); }
.hs-card__body { display: flex; flex-direction: column; gap: var(--s-space-ml); padding: var(--s-space-lx) var(--s-space-lx) var(--s-space-xl2); flex: 1; }
.hs-card__code { display: flex; justify-content: space-between; gap: var(--s-space-m); color: var(--s-muted); font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-120) var(--s-font-mono); letter-spacing: var(--s-track-label); text-transform: uppercase; }
.hs-card__code span:first-child { color: var(--s-text); font-weight: var(--s-weight-600); }
.hs-card__name { font: var(--s-weight-heavy) var(--s-step-h3)/var(--s-leading-115) var(--s-font-display); font-stretch: 108%; }
.hs-card__figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-space-2xs) var(--s-space-m); padding-block: var(--s-space-xs) var(--s-space-sm); border-bottom: var(--s-line-heavy) solid var(--s-text); }
.hs-card__figure .hs-num { font: var(--s-weight-display) var(--s-step-figure)/var(--s-leading-90) var(--s-font-display); font-stretch: 112%; letter-spacing: var(--s-track-n0p03); }
.hs-card__figunit { font: var(--s-weight-600) var(--s-step-label)/var(--s-leading-130) var(--s-font-mono); letter-spacing: var(--s-track-0p06); text-transform: uppercase; }
.hs-card__spec { display: grid; grid-template-columns: minmax(0, 1fr); }
.hs-card__spec div { display: grid; grid-template-columns: var(--s-em-9p5) minmax(0, 1fr); gap: var(--s-space-sm); padding: var(--s-space-xs2) 0; border-bottom: var(--s-line) solid var(--s-rule); }
.hs-card__spec dt { color: var(--s-muted); font: var(--s-weight-label) var(--s-step-label-sm)/var(--s-leading-160) var(--s-font-mono); letter-spacing: var(--s-track-0p08); text-transform: uppercase; }
.hs-card__spec dd { font-size: var(--s-step-small); line-height: var(--s-leading-140); font-variant-numeric: tabular-nums; }
.hs-card__solved { margin-top: auto; font-size: var(--s-step-small); line-height: var(--s-leading-150); }
.hs-card__solved .hs-label { color: var(--s-text); margin-right: var(--s-space-xs); padding: var(--s-space-hair) var(--s-space-xs); background: var(--s-accent); color: var(--s-accent-ink); }
@media (min-width: 768px) {
    .hs-card { grid-column: span 4; }
    .hs-card:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .hs-card:nth-child(1) { grid-column: 1 / 8; }
    .hs-card:nth-child(2) { grid-column: 8 / 13; }
    .hs-card:nth-child(3) { grid-column: 1 / 5; }
    .hs-card:nth-child(4) { grid-column: 5 / 9; }
    .hs-card:nth-child(5) { grid-column: 9 / 13; }
    .hs-card:nth-child(6) { grid-column: 1 / 13; }
    /* P-06 closes the set as a wide band: the school letterboxed across the sheet, its title block in three columns below. */
    .hs-card:nth-child(6) .hs-card__plate { aspect-ratio: var(--s-band-ratio); }
    .hs-card:nth-child(6) .hs-card__plate img { object-position: var(--s-band-focus); }
    .hs-card:nth-child(6) .hs-card__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-gap); align-items: start; }
    .hs-card:nth-child(6) .hs-card__code, .hs-card:nth-child(6) .hs-card__name, .hs-card:nth-child(6) .hs-card__figure { grid-column: 1; }
    .hs-card:nth-child(6) .hs-card__spec { grid-column: 2; grid-row: 1 / span 3; }
    .hs-card:nth-child(6) .hs-card__solved { grid-column: 3; grid-row: 1 / span 3; margin-top: 0; font-size: var(--s-step-lede); line-height: var(--s-leading-150); }
    .hs-card:nth-child(1) .hs-card__figure .hs-num { font-size: calc(var(--s-step-figure) * 1.25); }
}

/* ---------- process: gantt (HS-05) ---------- */
.hs-gantt { background: var(--s-bg); border: var(--s-line) solid var(--s-rule-strong); padding: var(--s-space-xs) var(--s-space-l) var(--s-space-sm); }
.hs-gantt__axis { display: none; }
.hs-gantt__row { display: grid; gap: var(--s-space-sm); padding: var(--s-space-lx) 0; border-bottom: var(--s-line) solid var(--s-rule); }
.hs-gantt__row:last-child { border-bottom: 0; }
.hs-gantt__name { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-space-m); align-items: baseline; }
.hs-gantt__code { font: var(--s-weight-600) var(--s-step-label)/var(--s-leading-100) var(--s-font-mono); padding: var(--s-space-2xs) var(--s-space-xs); background: var(--s-text); color: var(--s-bg); }
.hs-gantt__name h3 { font: var(--s-weight-heavy) var(--s-step-h4)/var(--s-leading-110) var(--s-font-display); font-stretch: 110%; }
.hs-gantt__weeks { grid-column: 2; margin-top: var(--s-space-2xs); color: var(--s-muted); font: var(--s-weight-label) var(--s-step-label-sm)/var(--s-leading-130) var(--s-font-mono); letter-spacing: var(--s-track-0p08); text-transform: uppercase; }
.hs-gantt__track {
    position: relative; height: var(--s-size-dim); background: var(--s-surface);
    background-image: repeating-linear-gradient(90deg, var(--s-rule) 0 var(--s-line), transparent var(--s-line) calc(100% / var(--s-max-steps)));
}
.hs-gantt__bar {
    position: absolute; top: 0; bottom: 0;
    left: calc(var(--hs-start) / var(--hs-max) * 100%); width: calc(var(--hs-span) / var(--hs-max) * 100%);
    background: var(--s-text); transform-origin: left center;
}
.hs-gantt__row:hover .hs-gantt__bar { background: repeating-linear-gradient(45deg, var(--s-accent) 0 var(--s-hatch), var(--s-text) var(--s-hatch) calc(var(--s-hatch) * 2)); }
.hs-gantt__receive { color: var(--s-muted); font-size: var(--s-step-small); line-height: var(--s-leading-150); }
.hs-gantt__receive .hs-label { display: block; margin-bottom: var(--s-space-2xs); color: var(--s-text); }
@media (min-width: 1024px) {
    .hs-gantt { padding: var(--s-space-xs) var(--s-space-xl2) var(--s-space-sm); }
    .hs-gantt__axis, .hs-gantt__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); column-gap: var(--s-space-3xl); align-items: center; }
    .hs-gantt__axis { padding: var(--s-space-ml) 0 var(--s-space-sm); border-bottom: var(--s-line-heavy) solid var(--s-text); }
    .hs-gantt__axislabel { font: var(--s-weight-label) var(--s-step-label-sm)/var(--s-leading-100) var(--s-font-mono); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-muted); }
    .hs-gantt__ticks { position: relative; height: var(--s-size-dim); }
    .hs-gantt__ticks span {
        position: absolute; left: calc(var(--hs-at) / var(--hs-max) * 100%); transform: translateX(-50%);
        font: var(--s-weight-label) var(--s-step-label-sm)/var(--s-leading-100) var(--s-font-mono); color: var(--s-muted); font-variant-numeric: tabular-nums;
    }
    .hs-gantt__ticks span:first-child { transform: none; }
    .hs-gantt__ticks span:last-child { transform: translateX(-100%); }
    .hs-gantt__track { height: var(--s-size-corner); --s-max-steps: 8; }
}

/* safety band */
.hs-safety { position: relative; z-index: var(--s-z-content); margin-top: var(--s-section); background: var(--s-dark); color: var(--s-dark-text); padding-block: clamp(var(--s-space-10xl), 8vw, var(--s-space-14xl)); }
.hs-safety::before {
    content: ""; position: absolute; inset: 0 0 auto; height: var(--s-size-dim);
    background: repeating-linear-gradient(-45deg, var(--s-accent) 0 var(--s-hatch), var(--s-dark) var(--s-hatch) calc(var(--s-hatch) * 2));
}
.hs-safety .hs-label { color: var(--s-dark-muted); }
.hs-safety__inner { row-gap: var(--s-space-5xl); }
.hs-safety__title { margin-top: var(--s-space-m); font: var(--s-weight-display) var(--s-step-h2)/var(--s-leading-98) var(--s-font-display); font-stretch: var(--s-wdth-display-sm); letter-spacing: var(--s-track-display); max-width: 18ch; }
.hs-safety__body { margin-top: var(--s-space-xl); max-width: 48ch; color: var(--s-dark-muted); font-size: var(--s-step-lede); line-height: var(--s-leading-150); }
.hs-safety__figs { display: grid; }
.hs-safety__fig { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--s-space-xl) 0; border-top: var(--s-line) solid var(--s-dark-rule); }
.hs-safety__fig dd.hs-num { order: -1; color: var(--s-accent); font: var(--s-weight-display) var(--s-step-figure)/var(--s-leading-95) var(--s-font-display); font-stretch: 108%; letter-spacing: var(--s-track-n0p03); }
.hs-safety__fig dt { margin-top: var(--s-space-s); font: var(--s-weight-600) var(--s-step-label)/var(--s-leading-130) var(--s-font-mono); letter-spacing: var(--s-track-0p08); text-transform: uppercase; }
.hs-safety__note { margin-top: var(--s-space-2xs); color: var(--s-dark-muted); font-size: var(--s-step-small); }
@media (min-width: 1024px) {
    .hs-safety__head { grid-column: 1 / 6; }
    .hs-safety__figs { grid-column: 7 / 13; }
}

/* ---------- bid (HS-06) ---------- */
.hs-bid { display: grid; gap: clamp(var(--s-space-3xl), 4vw, var(--s-space-8xl)); }
.hs-form { background: var(--s-surface); border: var(--s-line) solid var(--s-rule-strong); padding: clamp(var(--s-space-lx), 3vw, var(--s-space-5xl)); display: grid; gap: var(--s-space-2xl2); }
.hs-form__grid { display: grid; gap: var(--s-space-xl) var(--s-gap); }
.hs-field { display: grid; gap: var(--s-space-s); align-content: start; }
.hs-field label, .hs-choice legend {
    font: var(--s-weight-600) var(--s-step-label)/var(--s-leading-130) var(--s-font-mono); letter-spacing: var(--s-track-0p08); text-transform: uppercase;
}
.hs-req { color: var(--s-muted); font-weight: var(--s-weight-label); }
.hs-field input, .hs-field select, .hs-field textarea {
    width: 100%; min-height: var(--s-size-n); padding: var(--s-space-m) var(--s-space-ml);
    background: var(--s-bg); color: var(--s-text); border: var(--s-line-heavy) solid var(--s-rule-strong); border-radius: var(--s-radius);
    font: var(--s-weight-body) var(--s-step-input)/var(--s-leading-140) var(--s-font-body);
    -webkit-appearance: none; appearance: none;
    transition: border-color var(--s-dur) var(--s-ease);
}
.hs-field textarea { resize: vertical; min-height: var(--s-size-textarea); }
.hs-field input::placeholder, .hs-field textarea::placeholder { color: var(--s-muted); opacity: 1; }
.hs-field input:hover, .hs-field select:hover, .hs-field textarea:hover { border-color: var(--s-text); }
.hs-field input:focus-visible, .hs-field select:focus-visible, .hs-field textarea:focus-visible { border-color: var(--s-text); outline-offset: 0; }
.hs-field [aria-invalid="true"] { border-color: var(--s-error); }
.hs-field__err { color: var(--s-error); font-size: var(--s-step-small); font-weight: var(--s-weight-600); }
.hs-select { position: relative; }
.hs-select::after {
    content: ""; position: absolute; right: var(--s-space-l); top: 50%; width: var(--s-size-chev); height: var(--s-size-chev); margin-top: calc(var(--s-space-xs2) * -1);
    border-right: var(--s-line-heavy) solid var(--s-text); border-bottom: var(--s-line-heavy) solid var(--s-text); transform: rotate(45deg); pointer-events: none;
}
.hs-select select { padding-right: var(--s-space-7xl); }
.hs-choice { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--s-space-sm); }
.hs-choice legend { width: 100%; margin-bottom: var(--s-space-sm); padding: 0; float: left; }
.hs-choice__opt {
    display: inline-flex; align-items: center; gap: var(--s-space-sm); min-height: var(--s-size-n); padding: var(--s-space-sm) var(--s-space-ml);
    background: var(--s-bg); border: var(--s-line-heavy) solid var(--s-rule-strong); cursor: pointer; font-size: var(--s-step-small);
}
.hs-choice__opt:hover { border-color: var(--s-text); }
.hs-choice__opt:has(input:checked) { border-color: var(--s-text); background: var(--s-hot-tint); }
.hs-choice__opt input {
    -webkit-appearance: none; appearance: none; margin: 0; flex: none;
    width: var(--s-size-check); height: var(--s-size-check); border: var(--s-line-heavy) solid var(--s-text); border-radius: 0; background: var(--s-bg); cursor: pointer;
}
.hs-choice__opt input[type="radio"]:checked { background: var(--s-text); box-shadow: inset 0 0 0 var(--s-space-2xs) var(--s-bg); }
.hs-choice__opt input[type="checkbox"]:checked { background: var(--s-accent); box-shadow: inset 0 0 0 var(--s-space-3xs) var(--s-text); }
.hs-field--wide { grid-column: 1 / -1; }
.hs-btn--submit { justify-self: start; min-height: var(--s-size-btn-lg); padding-inline: var(--s-space-4xl); font-size: var(--s-step-input); }
.hs-form__errors { padding: var(--s-space-l) var(--s-space-lx); background: var(--s-bg); border-left: var(--s-space-xs) solid var(--s-error); }
.hs-form__errors p { font-weight: var(--s-weight-700); }
.hs-form__errors ul { margin-top: var(--s-space-s); list-style: square; padding-left: var(--s-space-xl); }
.hs-form__errors a { color: var(--s-error); font-weight: var(--s-weight-600); }
.hs-form__done { padding: var(--s-space-lx) var(--s-space-xl); background: var(--s-ok-bg); color: var(--s-ok-text); border-left: var(--s-space-s) solid var(--s-accent); line-height: var(--s-leading-150); }
.hs-form__errors[hidden], .hs-form__done[hidden], .hs-field__err[hidden] { display: none; }
@media (min-width: 640px) { .hs-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hs-next { align-self: start; }
.hs-next__title { padding-bottom: var(--s-space-m); border-bottom: var(--s-line-heavy) solid var(--s-text); font: var(--s-weight-heavy) var(--s-step-h3)/var(--s-leading-115) var(--s-font-display); font-stretch: 110%; }
.hs-next li { display: grid; grid-template-columns: var(--s-size-n) minmax(0, 1fr); column-gap: var(--s-space-l); padding: var(--s-space-lx) 0; border-bottom: var(--s-line) solid var(--s-rule); }
.hs-next__n { grid-row: span 2; display: grid; place-items: center; width: var(--s-size-n); height: var(--s-size-n); background: var(--s-text); color: var(--s-accent); font: var(--s-weight-display) var(--s-step-n)/var(--s-leading-100) var(--s-font-display); }
.hs-next h4 { font: var(--s-weight-700) var(--s-step-brand)/var(--s-leading-125) var(--s-font-display); }
.hs-next p { margin-top: var(--s-space-2xs); color: var(--s-muted); font-size: var(--s-step-small); line-height: var(--s-leading-150); }
@media (min-width: 1024px) {
    .hs-form { grid-column: 1 / 9; }
    .hs-next { grid-column: 9 / 13; position: sticky; top: calc(var(--s-header-h) + var(--s-space-2xl)); }
    .hs-bid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-gap); }
}

/* ---------- footer (HS-07) ---------- */
.hs-foot { position: relative; background: var(--s-dark); color: var(--s-dark-text); padding-block: var(--s-space-12xl) var(--s-space-3xl); }
.hs-foot::before {
    content: ""; position: absolute; inset: 0 0 auto; height: var(--s-size-hatch-foot);
    background: repeating-linear-gradient(-45deg, var(--s-accent) 0 var(--s-hatch), var(--s-dark) var(--s-hatch) calc(var(--s-hatch) * 2));
}
.hs-foot .hs-wrap { row-gap: var(--s-space-6xl); }
.hs-foot .hs-brand__mark { background: var(--s-accent); color: var(--s-accent-ink); }
.hs-foot__name { margin-top: var(--s-space-l); font: var(--s-weight-display) var(--s-step-foot)/var(--s-leading-100) var(--s-font-display); font-stretch: 118%; text-transform: uppercase; }
.hs-foot__since { margin-top: var(--s-space-s); color: var(--s-dark-muted); }
.hs-foot .hs-label { color: var(--s-dark-muted); padding-bottom: var(--s-space-m); border-bottom: var(--s-line) solid var(--s-dark-rule); }
.hs-foot__offices ul { display: grid; gap: var(--s-space-2xl); margin-top: var(--s-space-lx); }
.hs-foot__offices li p { color: var(--s-dark-muted); font-size: var(--s-step-small); line-height: var(--s-leading-155); }
.hs-foot__offices .hs-foot__office { color: var(--s-dark-text); font-weight: var(--s-weight-700); margin-bottom: var(--s-space-2xs); }
.hs-foot__offices a { color: var(--s-dark-text); font-variant-numeric: tabular-nums; text-underline-offset: var(--s-space-3xs); }
.hs-foot__licence { color: var(--s-dark-muted); font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-160) var(--s-font-mono); letter-spacing: var(--s-track-0p04); }
.hs-foot__end {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-m) var(--s-space-3xl); padding-top: var(--s-space-xl); border-top: var(--s-line-heavy) solid var(--s-dark-text);
    font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-140) var(--s-font-mono); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-dark-muted);
}
.hs-foot__end a { color: var(--s-dark-text); text-underline-offset: var(--s-space-3xs); min-height: var(--s-tap); display: inline-flex; align-items: center; }
.hs-foot__sheet { display: inline-flex; align-items: center; gap: var(--s-space-sm); color: var(--s-dark-text); font-weight: var(--s-weight-600); }
.hs-foot__dash { display: inline-block; width: var(--s-size-dash); height: var(--s-line-heavy); background: var(--s-accent); }
@media (min-width: 768px) { .hs-foot__offices ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
    .hs-foot__brand { grid-column: 1 / 4; }
    .hs-foot__offices { grid-column: 5 / 13; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}