/* Everhart & Hoover — construction drawing set */

@font-face { font-family: "Overpass"; src: url("../fonts/overpass-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("../fonts/overpass-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Overpass Mono"; src: url("../fonts/overpass-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --ground: #EEF1F3;
  --sheet: #F8FAFB;
  --line: #24307A;
  --line-2: #7F89C2;
  --line-3: #C9CEE6;
  --ink: #121826;
  --ink-2: #47505E;
  --orange: #F26A1B;
  --orange-deep: #E25E12;
  --orange-ink: #A83F06;
  --field: #24307A;
  --field-ink: #FFFFFF;
  --field-ink-2: #CDD2F2;
  --field-rule: rgba(255, 255, 255, .28);

  --display: "Overpass", "Public Sans", sans-serif;
  --mono: "Overpass Mono", ui-monospace, monospace;
  --body: "Public Sans", system-ui, sans-serif;

  --gutter: clamp(16px, 3vw, 40px);
  --space-1: 6px; --space-2: 12px; --space-3: 20px; --space-4: 32px; --space-5: 52px; --space-6: 84px; --space-7: 128px;
  --hair: 1px solid var(--line-3);
  --rule: 1.5px solid var(--line);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  font-feature-settings: "kern", "liga";
  caret-color: var(--orange);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--orange); color: var(--ink); }
html { scrollbar-color: var(--line-2) var(--ground); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--ground); }

img { max-width: 100%; display: block; }
a { color: var(--line); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:not(.btn):not(.call):not(.wordmark):not(.skip):hover { color: var(--orange-ink); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { overflow-wrap: break-word; font-family: var(--display); color: var(--line); margin: 0; text-wrap: balance; }
h1 { font-weight: 900; text-transform: uppercase; font-size: clamp(2.5rem, 5.2vw, 5.25rem); line-height: .9; letter-spacing: -.02em; }
h2 { font-weight: 850; text-transform: uppercase; font-size: clamp(1.9rem, 3.4vw, 3.25rem); line-height: .95; letter-spacing: -.015em; }
h3 { font-weight: 800; font-size: 1.3rem; line-height: 1.15; }
.mono, code { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--orange); color: var(--ink); padding: 10px 14px; z-index: 20; font-weight: 700; }
.skip:focus { left: 8px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Sheet frame ---------- */
.frame {
  margin: 10px;
  border: 2px solid var(--line);
  outline: 1px solid var(--line);
  outline-offset: 4px;
  background: var(--ground);
  position: relative;
}
.zones {
  display: grid; grid-template-columns: repeat(8, 1fr);
  height: 20px; border-bottom: 1px solid var(--line);
  font: 600 .6875rem/20px var(--mono); color: var(--line); text-align: center;
}
.zones span + span { border-left: 1px solid var(--line-3); }
@media (max-width: 720px) { .zones { grid-template-columns: repeat(4, 1fr); } .zones span:nth-child(n+5) { display: none; } }

/* ---------- Header ---------- */
.masthead {
  display: grid; grid-template-columns: auto 1fr auto; align-items: stretch;
  border-bottom: var(--rule);
}
.wordmark {
  display: flex; flex-direction: column; justify-content: center;
  padding: 14px var(--gutter); text-decoration: none; color: var(--line);
  border-right: 1px solid var(--line);
}
.wordmark b { font: 900 1.4rem/1 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.wordmark small { font: 600 .6875rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-top: 4px; }
.wordmark:hover { color: var(--line); }
.wordmark:hover b { color: var(--orange-ink); }

.sheet-index { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.sheet-index a {
  display: flex; flex-direction: column; justify-content: center; height: 100%;
  padding: 10px 18px; text-decoration: none; color: var(--ink);
  border-right: 1px solid var(--line-3);
  font: 750 .95rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em;
  position: relative;
}
.sheet-index a span { font: 500 .6875rem/1 var(--mono); color: var(--ink-2); letter-spacing: .08em; margin-bottom: 5px; }
.sheet-index a:hover { background: var(--sheet); color: var(--line); }
.sheet-index a[aria-current="page"] { color: var(--line); background: var(--sheet); }
.sheet-index a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 4px; background: var(--orange); }

.call {
  display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter);
  background: var(--orange); color: var(--ink); text-decoration: none;
  border-left: 1px solid var(--line);
  transition: background-color .25s var(--ease-out);
}
.call:hover { background: var(--orange-deep); color: var(--ink); }
.call small { display: block; font: 600 .6875rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.call b { display: block; font: 900 1.25rem/1.1 var(--display); font-variant-numeric: tabular-nums; margin-top: 3px; }
.call svg { flex: none; }

.menu-btn { display: none; }
@media (max-width: 1080px) {
  .masthead { grid-template-columns: 1fr auto auto; }
  .menu-btn {
    display: flex; align-items: center; gap: 8px; padding: 0 var(--gutter);
    background: var(--sheet); color: var(--line); border: 0; border-left: 1px solid var(--line);
    font: 800 .875rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
  }
  .sheet-index {
    grid-column: 1 / -1; flex-direction: column; display: none;
    border-top: 1px solid var(--line);
  }
  .masthead.open .sheet-index { display: flex; }
  .sheet-index a { flex-direction: row; align-items: baseline; gap: 14px; border-right: 0; border-bottom: 1px solid var(--line-3); padding: 14px var(--gutter); font-size: 1.05rem; }
  .sheet-index a span { margin: 0; min-width: 44px; }
  .sheet-index a[aria-current="page"]::after { top: 0; bottom: 0; left: 0; right: auto; width: 4px; height: auto; }
}
@media (max-width: 560px) {
  .wordmark b { font-size: 1.05rem; }
  .wordmark small { display: none; }
  .call { padding: 8px 14px; }
  .call small { display: none; }
  .call b { font-size: 1rem; margin: 0; }
  .call svg { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 12px 22px; text-decoration: none; cursor: pointer;
  font: 850 1rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em;
  border: 2px solid var(--line); background: transparent; color: var(--line);
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.btn:hover { background: var(--line); color: var(--sheet); }
.btn-primary { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn-primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: var(--ink); }
.btn .num { font-variant-numeric: tabular-nums; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.on-field .btn { border-color: var(--field-ink); color: var(--field-ink); }
.on-field .btn:hover { background: var(--field-ink); color: var(--field); }
.on-field .btn-primary { border-color: var(--orange); color: var(--ink); }
.on-field .btn-primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Generic section scaffolding ---------- */
.band { padding: var(--space-6) var(--gutter); border-bottom: var(--rule); }
.band-tight { padding: var(--space-5) var(--gutter); }
.measure { max-width: 66ch; }
.lede { font-size: clamp(1.15rem, 1.4vw, 1.35rem); line-height: 1.5; color: var(--ink); max-width: 46ch; }
.head-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-items: end; margin-bottom: var(--space-5); }
.head-row p { margin: 0; color: var(--ink-2); max-width: 52ch; }
@media (max-width: 860px) { .head-row { grid-template-columns: 1fr; align-items: start; } }
.tag {
  display: inline-block; font: 600 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--line); border: 1px solid var(--line); padding: 6px 8px 5px;
}

/* ---------- Hero / cover sheet ---------- */
.cover { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); border-bottom: var(--rule); }
.cover-drawing { background: var(--sheet); border-right: 1px solid var(--line); padding: var(--space-3) var(--space-3) 0; display: flex; flex-direction: column; }
.cover-copy { padding: var(--space-5) var(--gutter) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.cover-copy h1 { margin-top: var(--space-1); font-size: clamp(2.3rem, 3.7vw, 4rem); }
.cover-copy .lede { margin: 0; }
@media (max-width: 1080px) {
  .cover { grid-template-columns: 1fr; }
  .cover-drawing { border-right: 0; border-bottom: 1px solid var(--line); }
}

.drawing { width: 100%; height: auto; overflow: visible; }
.drawing .g { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drawing .thin { stroke-width: .9; }
.drawing .heavy { stroke-width: 3; }
.drawing .hidden-line { stroke-dasharray: 6 4; }
.drawing .fill-sheet { fill: var(--sheet); }
.drawing .fill-line { fill: var(--line); stroke: none; }
.drawing .soft { stroke: var(--line-2); }
.drawing text { font-family: var(--mono); font-size: 11px; fill: var(--line); letter-spacing: .04em; }
.drawing text.lg { font-size: 13px; font-weight: 700; }
.drawing .balloon circle { fill: var(--sheet); stroke: var(--line); stroke-width: 1.6; transition: fill .2s var(--ease-out), stroke .2s var(--ease-out); }
.drawing .balloon text { font: 700 13px var(--display); text-anchor: middle; dominant-baseline: central; fill: var(--line); }
.drawing .leader { stroke: var(--line); stroke-width: 1; fill: none; transition: stroke .2s var(--ease-out); }
.drawing .unit .body * { transition: stroke .2s var(--ease-out); }
.drawing .unit.on .body .g, .drawing .unit.on .leader { stroke: var(--orange-deep); }
.drawing .unit.on .balloon circle { fill: var(--orange); stroke: var(--orange-deep); }
.drawing .unit.on .balloon text { fill: var(--ink); }
.drawing .unit.on text.lbl { fill: var(--orange-ink); }
.drawing .cloud { fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linejoin: round; }
.drawing.keyplan .unit:not(.on) { opacity: .42; }
.drawing .unit { cursor: pointer; }
.drawing-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line-3); margin-top: var(--space-2); padding: 10px 2px 12px;
  font: 600 .6875rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}

/* Scope of work table */
.scope { margin: var(--space-2) 0 0; border-top: var(--rule); }
.scope-cap { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 8px; font: 800 .8125rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--line); border-bottom: 1px solid var(--line); }
.scope-cap span { font: 500 .6875rem/1 var(--mono); color: var(--ink-2); letter-spacing: .08em; }
.scope ol { list-style: none; margin: 0; padding: 0; }
.scope a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 10px 4px; border-bottom: 1px solid var(--line-3); text-decoration: none; color: var(--ink);
  transition: background-color .2s var(--ease-out);
}
.scope .bal {
  width: 28px; height: 28px; border: 1.6px solid var(--line); border-radius: 50%;
  display: grid; place-items: center; font: 800 .85rem/1 var(--display); color: var(--line);
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.scope b { font: 800 1.05rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .005em; color: var(--line); }
.scope .spec { font: 500 .75rem/1.2 var(--mono); color: var(--ink-2); text-align: right; }
.scope a:hover, .scope a.on, .scope a:focus-visible { background: rgba(242, 106, 27, .09); }
.scope a:hover .bal, .scope a.on .bal, .scope a:focus-visible .bal { background: var(--orange); border-color: var(--orange-deep); color: var(--ink); }
@media (max-width: 480px) { .scope .spec { display: none; } .scope a { grid-template-columns: 34px 1fr; } }

/* ---------- General notes ---------- */
.notes-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 960px) { .notes-wrap { grid-template-columns: 1fr; } }
.notes { list-style: none; counter-reset: n; margin: 0; padding: 0; border-top: var(--rule); }
.notes li {
  counter-increment: n; display: grid; grid-template-columns: 2.4rem minmax(0, 9.5rem) minmax(0, 1fr); gap: 4px 18px;
  padding: 18px 0; border-bottom: 1px solid var(--line-3); align-items: baseline;
}
.notes li::before { content: counter(n) "."; font: 700 .875rem/1 var(--mono); color: var(--line); }
.notes .fig { font: 900 clamp(1.6rem, 2.6vw, 2.4rem)/1 var(--display); color: var(--line); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.notes .fig small { font-size: .62em; font-weight: 800; letter-spacing: .02em; margin-left: 2px; }
.notes p { margin: 0; }
.notes p b { color: var(--line); }
.notes.plain li { grid-template-columns: 2.4rem minmax(0, 1fr); }
@media (max-width: 560px) {
  .notes li { grid-template-columns: 2rem minmax(0, 1fr); }
  .notes .fig { grid-column: 2; }
  .notes p { grid-column: 2; }
}

/* ---------- Photo plates ---------- */
.plate { margin: 0; border: 1px solid var(--line); background: var(--sheet); }
.plate img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3; }
.plate.wide img { aspect-ratio: 16 / 9; }
.plate.tall img { aspect-ratio: 4 / 5; }
.plate figcaption {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline;
  padding: 9px 12px; border-top: 1px solid var(--line);
  font: 400 .8125rem/1.4 var(--body); color: var(--ink-2);
}
.plate figcaption b { color: var(--line); font: 700 .75rem/1.4 var(--mono); letter-spacing: .06em; }
.plates { display: grid; gap: var(--space-3); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.plates > :nth-child(1) { grid-column: span 7; grid-row: span 2; }
.plates > :nth-child(1) img { aspect-ratio: auto; height: 100%; min-height: 360px; }
.plates > :nth-child(1) { display: flex; flex-direction: column; }
.plates > :nth-child(1) img { flex: 1; }
.plates > :nth-child(n+2) { grid-column: span 5; }
.plates > :nth-child(n+4) { grid-column: span 6; }
.plates.n4 > :nth-child(4) { grid-column: 1 / -1; }
.plates.n4 > :nth-child(4) img { aspect-ratio: 21 / 9; }
.plates.n2 > :nth-child(1) { grid-row: auto; grid-column: span 7; }
.plates.n2 > :nth-child(2) { grid-column: span 5; }
.plates.n1 > :nth-child(1) { grid-column: 1 / -1; grid-row: auto; }
.plates.n1 > :nth-child(1) img { aspect-ratio: 21 / 9; min-height: 0; }
@media (max-width: 860px) { .plates > * { grid-column: 1 / -1 !important; grid-row: auto !important; } .plates > :nth-child(1) img { min-height: 0; aspect-ratio: 4 / 3; } }

/* ---------- Storm band (drenched) ---------- */
.field { background: var(--field); color: var(--field-ink); }
.field h2, .field h3 { color: var(--field-ink); }
.field p { color: var(--field-ink-2); }
.field a:not(.btn) { color: var(--field-ink); }
.storm { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.storm .phone { display: block; margin: var(--space-3) 0; font: 900 clamp(2.6rem, 6vw, 5.5rem)/.9 var(--display); color: var(--field-ink); text-decoration: none; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.storm .phone:hover { color: var(--orange); }
.storm .plate { border-color: var(--field-rule); background: transparent; }
.storm .plate figcaption { border-color: var(--field-rule); color: var(--field-ink-2); }
.storm .plate figcaption b { color: var(--field-ink); }
.storm ul { list-style: none; padding: 0; margin: var(--space-3) 0 0; border-top: 1px solid var(--field-rule); }
.storm li { padding: 10px 0; border-bottom: 1px solid var(--field-rule); font: 500 .9375rem/1.4 var(--body); color: var(--field-ink); }
@media (max-width: 960px) { .storm { grid-template-columns: 1fr; } }

/* ---------- Bill of materials ---------- */
.bom { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.bom caption { text-align: left; padding-bottom: 10px; font: 800 .8125rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--line); }
.bom th { text-align: left; font: 600 .6875rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--line); padding: 10px 12px; border-top: var(--rule); border-bottom: 1px solid var(--line); }
.bom td { padding: 11px 12px; border-bottom: 1px solid var(--line-3); vertical-align: top; }
.bom td:first-child, .bom th:first-child { width: 3.5rem; font-family: var(--mono); color: var(--line); font-variant-numeric: tabular-nums; }
.bom td b { font-weight: 650; }
.bom td.use { font: 500 .8125rem/1.4 var(--mono); color: var(--ink-2); }
.bom tr:hover td { background: rgba(36, 48, 122, .035); }
@media (max-width: 640px) { .bom td.use, .bom th.use { display: none; } }

.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); border-top: var(--rule); border-left: 1px solid var(--line-3); }
.specs div { padding: 14px 16px 16px; border-right: 1px solid var(--line-3); border-bottom: 1px solid var(--line-3); }
.specs dt { font: 600 .6875rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.specs dd { margin: 8px 0 0; font: 900 1.45rem/1.05 var(--display); color: var(--line); font-variant-numeric: tabular-nums; }
.specs dd small { font-size: .55em; font-weight: 800; margin-left: 3px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- Remarks (testimonial) ---------- */
.remarks { border: 1px solid var(--line); background: var(--sheet); display: grid; grid-template-columns: 9rem minmax(0, 1fr); }
.remarks > span { border-right: 1px solid var(--line); padding: 16px; font: 600 .6875rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--line); }
.remarks blockquote { margin: 0; padding: var(--space-4) var(--space-4) var(--space-3); }
.remarks blockquote p { font: 700 clamp(1.35rem, 2.3vw, 2rem)/1.25 var(--display); color: var(--ink); letter-spacing: -.005em; max-width: 34ch; }
.remarks cite { font: 500 .875rem/1.3 var(--body); font-style: normal; color: var(--ink-2); }
@media (max-width: 640px) { .remarks { grid-template-columns: 1fr; } .remarks > span { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---------- Service sheet ---------- */
.sheet-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border-bottom: var(--rule); }
.sheet-head .copy { padding: var(--space-5) var(--gutter); display: flex; flex-direction: column; gap: var(--space-3); }
.sheet-head .key { background: var(--sheet); border-left: 1px solid var(--line); padding: var(--space-3) var(--space-3) 0; display: flex; flex-direction: column; }
.crumbs { font: 600 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.crumbs a { color: var(--ink-2); }
@media (max-width: 1000px) { .sheet-head { grid-template-columns: 1fr; } .sheet-head .key { border-left: 0; border-top: 1px solid var(--line); } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.scope-list { columns: 3 15rem; column-gap: var(--space-4); list-style: none; padding: 0; margin: 0; counter-reset: s; border-top: var(--rule); }
.scope-list li { break-inside: avoid; display: grid; grid-template-columns: 1.6rem 1fr; padding: 10px 0; border-bottom: 1px solid var(--line-3); }
.scope-list li::before { content: ""; width: 14px; height: 1.5px; background: var(--line); margin-top: .8em; }

.rfi { border-top: var(--rule); }
.rfi details { border-bottom: 1px solid var(--line-3); }
.rfi summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 28px; gap: 16px; align-items: baseline;
  padding: 18px 0; font: 750 1.15rem/1.3 var(--display); color: var(--ink);
}
.rfi summary::-webkit-details-marker { display: none; }
.rfi summary span { font: 600 .75rem/1 var(--mono); color: var(--line); letter-spacing: .06em; }
.rfi summary i { width: 22px; height: 22px; border: 1.5px solid var(--line); border-radius: 50%; position: relative; align-self: center; }
.rfi summary i::before, .rfi summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; background: var(--line); transform: translate(-50%, -50%); transition: transform .3s var(--ease-out); }
.rfi summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.rfi details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.rfi summary:hover { color: var(--line); }
.rfi .ans { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 16px; padding: 0 44px 20px 0; }
.rfi .ans span { font: 600 .75rem/1.6 var(--mono); color: var(--orange-ink); letter-spacing: .06em; }
.rfi .ans p { margin: 0; color: var(--ink-2); max-width: 64ch; }
@media (max-width: 560px) { .rfi summary, .rfi .ans { grid-template-columns: 1fr 28px; } .rfi summary span, .rfi .ans span { grid-column: 1 / -1; } .rfi .ans { padding-right: 0; } }

.refs { border-top: var(--rule); }
.refs a { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line-3); text-decoration: none; color: var(--ink); }
.refs a span { font: 600 .75rem/1 var(--mono); color: var(--line); }
.refs a b { font: 850 1.25rem/1.15 var(--display); text-transform: uppercase; color: var(--line); }
.refs a p { margin: 4px 0 0; color: var(--ink-2); font-size: .9375rem; }
.refs a em { font-style: normal; font: 800 .8125rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--line); white-space: nowrap; }
.refs a:hover { background: rgba(242, 106, 27, .07); }
.refs a:hover em { color: var(--orange-ink); }
@media (max-width: 560px) { .refs a { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Forms ---------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }
.field-row label, .form legend { display: block; font: 600 .75rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--line); margin-bottom: 7px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="date"], .form select, .form textarea {
  width: 100%; font: 400 1rem/1.4 var(--body); color: var(--ink);
  background: var(--sheet); border: 1.5px solid var(--line-2); border-radius: 0; padding: 13px 14px;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.form textarea { min-height: 150px; resize: vertical; }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--line) 50%), linear-gradient(135deg, var(--line) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.form input::placeholder, .form textarea::placeholder { color: #6B7381; }
.form :is(input, select, textarea):hover { border-color: var(--line); }
.form :is(input, select, textarea):focus { outline: none; border-color: var(--orange); background: #fff; box-shadow: 0 0 0 3px rgba(242, 106, 27, .25); }
.form :is(input, select, textarea)[aria-invalid="true"] { border-color: #B3261E; }
.form .err { display: none; margin-top: 6px; font-size: .875rem; color: #B3261E; }
.form [aria-invalid="true"] + .err { display: block; }
.form fieldset { border: 0; padding: 0; margin: 0; }
.radios { display: flex; gap: 10px; }
.radios label { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1.5px solid var(--line-2); background: var(--sheet); cursor: pointer; font: 750 .95rem/1 var(--display); text-transform: uppercase; color: var(--ink); min-width: 92px; }
.radios input { position: absolute; opacity: 0; }
.radios label:has(input:checked) { border-color: var(--orange); background: rgba(242, 106, 27, .1); color: var(--ink); }
.radios label:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; }
.radios label::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--line); border-radius: 50%; }
.radios label:has(input:checked)::before { background: var(--orange); border-color: var(--orange-deep); box-shadow: inset 0 0 0 3px var(--sheet); }
.form-status { grid-column: 1 / -1; margin: 0; padding: 14px 16px; border: 1.5px solid var(--line); background: var(--sheet); display: none; }
.form-status.show { display: block; }
.form-status.ok { border-color: #1C7C4A; }
.form-status.bad { border-color: #B3261E; }

.info-block { border-top: var(--rule); }
.info-block div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-3); }
.info-block dt { font: 600 .75rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--line); }
.info-block dd { margin: 0; font-size: 1.05rem; }
.info-block dd a { font-weight: 650; }

/* ---------- SDS ---------- */
.filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: var(--space-3); }
@media (max-width: 760px) { .filters { grid-template-columns: 1fr; } }
.sds-count { font: 600 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; }
.sds td a { display: inline-flex; align-items: center; gap: 6px; font: 800 .875rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; min-height: 36px; }
.sds td .nick { display: block; font: 500 .8125rem/1.3 var(--mono); color: var(--ink-2); margin-top: 2px; }
.sds .none { font: 500 .8125rem/1.3 var(--mono); color: var(--ink-2); }
.empty { display: none; padding: 26px 16px; border: 1.5px dashed var(--line-2); text-align: center; color: var(--ink-2); }
.empty.show { display: block; }
@media (max-width: 640px) {
  .sds thead { display: none; }
  .sds tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line-3); }
  .sds td { border: 0; padding: 0; }
  .sds td:first-child { display: none; }
  .sds td:nth-child(2) { grid-column: 1; }
  .sds td:nth-child(3), .sds td:nth-child(4) { grid-column: 1; font: 500 .8125rem/1.3 var(--mono); color: var(--ink-2); }
  .sds td:last-child { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* ---------- Title block footer ---------- */
.titleblock { background: var(--field); color: var(--field-ink); display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; }
.titleblock > div { padding: 18px var(--gutter) 20px; border-right: 1px solid var(--field-rule); border-bottom: 1px solid var(--field-rule); }
.titleblock > div:nth-child(4n) { border-right: 0; }
.titleblock dt, .titleblock h2 { font: 600 .6875rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--field-ink-2); margin: 0 0 8px; }
.titleblock dd { margin: 0; }
.titleblock a { color: var(--field-ink); }
.titleblock a:hover { color: var(--orange); }
.titleblock .firm { display: flex; gap: 16px; align-items: center; }
.titleblock .firm img { width: 96px; height: auto; background: var(--sheet); padding: 6px; }
.titleblock .firm b { display: block; font: 900 1.35rem/1 var(--display); text-transform: uppercase; }
.titleblock .firm span { display: block; font: 500 .8125rem/1.4 var(--body); color: var(--field-ink-2); margin-top: 6px; }
.titleblock .big { font: 900 1.6rem/1 var(--display); font-variant-numeric: tabular-nums; }
.titleblock ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 18px; }
.titleblock li { padding: 3px 0; font-size: .9375rem; }
.titleblock li a { text-decoration: none; }
.titleblock li a:hover { text-decoration: underline; }
.titleblock .sheetno { font: 900 2.2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.titleblock .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font: 500 .8125rem/1.3 var(--mono); }
.titleblock .meta span { display: block; color: var(--field-ink-2); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.titleblock .legal { grid-column: 1 / -1; border-right: 0; border-bottom: 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 400 .8125rem/1.4 var(--body); color: var(--field-ink-2); padding-top: 14px; padding-bottom: 16px; }
@media (max-width: 1080px) { .titleblock { grid-template-columns: 1fr 1fr; } .titleblock > div:nth-child(2n) { border-right: 0; } .titleblock > div:nth-child(4n+1) { border-right: 1px solid var(--field-rule); } }
@media (max-width: 600px) { .titleblock { grid-template-columns: 1fr; } .titleblock > div { border-right: 0 !important; } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: var(--space-3) 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-3); }
.legend div { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.legend svg { width: 40px; height: 20px; display: block; }
.legend dd { margin: 0; font: 400 .8125rem/1.3 var(--body); color: var(--ink-2); }
@media (max-width: 560px) { .legend { grid-template-columns: 1fr; } }
.sheet-head .key { justify-content: center; }
@media (max-width: 1080px) { .cover-drawing { order: 2; border-bottom: 0; border-top: 1px solid var(--line); } }
@media (max-width: 560px) {
  .masthead { grid-template-columns: 1fr auto; }
  .call { grid-column: 1 / -1; grid-row: 2; justify-content: center; border-left: 0; border-top: 1px solid var(--line); }
  .call small { display: inline; margin-right: 8px; }
  .call span { display: flex; align-items: baseline; }
  .sheet-index { grid-row: 3; }
}
@media (max-width: 1080px) {
  .masthead > .wordmark { grid-row: 1; grid-column: 1; }
  .masthead > .menu-btn { grid-row: 1; grid-column: 2; }
  .masthead > .call { grid-row: 1; grid-column: 3; }
  .masthead > nav { grid-row: 2; grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .masthead > .call { grid-row: 2; grid-column: 1 / -1; }
  .masthead > nav { grid-row: 3; }
}
@media (max-width: 1080px) { .sheet-index a { justify-content: flex-start; } }
.info-block dd { overflow-wrap: anywhere; }
@media (max-width: 480px) { .info-block div { grid-template-columns: 4.5rem minmax(0, 1fr); } }

.btn-primary:hover, .call:hover, .on-field .btn-primary:hover { color: var(--ink) !important; }
.scope a:hover, .scope a:focus-visible, .refs a:hover { color: var(--ink); }

/* ---- finish-review batch ---- */
.drawing text { paint-order: stroke; stroke: var(--sheet); stroke-width: 4px; stroke-linejoin: round; }
.drawing .balloon text { stroke: none; }
.drawing text.dim { font-size: 10px; }
.cover-drawing { padding-bottom: var(--space-3); }
.cover-tb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); border: 1.5px solid var(--line); margin-top: var(--space-3); background: var(--sheet); }
.cover-tb dl { margin: 0; display: grid; border-right: 1px solid var(--line); }
.cover-tb dl div { padding: 9px 12px; border-bottom: 1px solid var(--line-3); }
.cover-tb dl div:last-child { border-bottom: 0; }
.cover-tb dt, .tb-call .fl { display: block; font: 600 .6875rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.cover-tb dd { margin: 3px 0 0; font: 750 .9375rem/1.25 var(--display); color: var(--line); text-transform: uppercase; }
.tb-call { padding: 18px 20px; display: flex; align-items: center; }
.tb-call.boxed { border: 1.5px solid var(--line); background: var(--sheet); margin-top: auto; }
.cloud-wrap { position: relative; padding: 16px 22px 14px; width: 100%; }
.cloud-wrap > svg.cloud-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cloud-wrap .cloud-svg path { fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linejoin: round; }
.cloud-wrap .delta { position: absolute; top: -12px; right: -4px; width: 26px; height: 23px; z-index: 1; }
.tb-call .fl { color: var(--orange-ink); }
.tb-call a { display: block; margin-top: 6px; font: 900 clamp(1.5rem, 2.2vw, 2rem)/1 var(--display); color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.tb-call a:hover { color: var(--orange-ink); }
.scroll-hint { display: none; margin: 8px 0 0; font: 400 .8125rem/1.3 var(--body); color: var(--ink-2); }
@media (max-width: 1080px) {
  .cover { display: flex; flex-direction: column; }
  .cover-copy { display: contents; }
  .cover-copy > * { margin-left: var(--gutter); margin-right: var(--gutter); }
  .cover-copy > h1 { order: 1; margin-top: var(--space-5); }
  .cover-copy > .lede { order: 2; margin-top: var(--space-3); }
  .cover-copy > .actions { order: 3; margin-top: var(--space-3); margin-bottom: var(--space-4); }
  .cover-copy > .crumbs { order: 0; margin-top: var(--space-4); margin-bottom: 0; }
  .cover-drawing { order: 4; }
  .cover-copy > .scope { order: 5; margin-top: var(--space-4); margin-bottom: var(--space-5); }
}
@media (max-width: 760px) {
  .drawing-scroll { overflow-x: auto; margin: 0 calc(var(--space-3) * -1); padding: 0 var(--space-3); -webkit-overflow-scrolling: touch; }
  .drawing-scroll .drawing { min-width: 780px; }
  .scroll-hint { display: block; }
  .cover-tb { grid-template-columns: 1fr; }
  .cover-tb dl { border-right: 0; border-bottom: 1px solid var(--line); }
}
/* zone letters on sheet sides */
.frame { padding: 0 20px; }
.frame > .zones { margin: 0 -20px; }
.rail { position: absolute; top: 20px; bottom: 0; width: 20px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; font: 600 .6875rem/1 var(--mono); color: var(--line); pointer-events: none; }
.rail.l { left: 0; border-right: 1px solid var(--line); }
.rail.r { right: 0; border-left: 1px solid var(--line); }
@media (max-width: 720px) { .frame { padding: 0 8px; } .frame > .zones { margin: 0 -8px; } .rail { width: 8px; } .rail span { display: none; } }
.titleblock { margin: 0 -20px; }
@media (max-width: 720px) { .titleblock { margin: 0 -8px; } }
.titleblock .firm img { background: transparent; padding: 0; width: 112px; }
@media (max-width: 1080px) { .cover-copy > .lede { margin: var(--space-3) var(--gutter) 0; } }
.titleblock .firm img { width: 81px; height: auto; background: var(--sheet); padding: 8px; border: 1px solid var(--field-rule); box-sizing: content-box; }