/*
THESIS: the check is a site survey (sopralluogo). The company's technology is a building drawn in
section; answering draws it, the report colors it. Refuses the typeform quiz with a radar chart.
OWN-WORLD: drafting sheet on a grey-green table, drafting grid, blue-black ink, pencil ghost lines,
Italian permit convention (demolition red, construction yellow), indigo stamp for the author's hand.
Archivo across its width axis as drafting lettering. Ruled cells, square boxes, no rounded cards.
STORY: owner sees a professional survey, answers in plain language while the drawing builds,
fills the title block, sees a stamped result, books the free 30 minute survey call.
FIRST VIEWPORT: sheet strip "Tavola 01"; condensed headline left, building section with numbered
parts right (below on phone); stamp button "Inizia il rilievo" under the promise; title block below.
FORM: grounded candidate 6 of 7 (perizia tecnica), staging "withheld reveal", seed 778ced22.
*/

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --table: #dfe6e5;
  --sheet: #fbfcfa;
  --grid: rgba(162, 190, 203, 0.28);
  --ink: #17202e;
  --ink-soft: #3a4657;
  --muted: #586476;
  --pencil: #8c97a6;
  --red: #b9301c;
  --red-soft: #f6dad5;
  --yellow: #f4b400;
  --yellow-soft: #fce8a6;
  --amber-ink: #8a5a00;
  --stamp: #3336a6;
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(10px, 2.5vw, 28px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--table);
  font-variant-numeric: lining-nums;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--stamp);
  text-underline-offset: 3px;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 1rem;
}

:focus-visible {
  outline: 3px solid var(--stamp);
  outline-offset: 2px;
}

h1:focus,
h2:focus {
  outline: none;
}

.lettering {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 650;
  font-stretch: 80%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Page frame ------------------------------------------------------------------------------- */

.site-header,
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px calc(var(--gutter) + 4px);
  font-size: 0.8rem;
  font-stretch: 80%;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-header a,
.site-footer a {
  color: var(--ink);
  text-decoration: none;
}

.site-header .brand-by,
.site-footer {
  color: var(--muted);
}

.site-footer a {
  color: var(--muted);
  text-decoration: underline;
}

.sheet {
  position: relative;
  display: block;
  max-width: 1180px;
  margin: 0 var(--gutter);
  padding: 18px 16px 28px;
  background-color: var(--sheet);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  border: 1px solid var(--ink);
}

.sheet::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 2px solid var(--ink);
  pointer-events: none;
}

/* Zone marks in the band between the two frames, as on a drafting sheet. */
.sheet::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--ink) calc(12.5% - 1px) 12.5%) top / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--ink) calc(12.5% - 1px) 12.5%) bottom / 100% 5px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 calc(16.66% - 1px), var(--ink) calc(16.66% - 1px) 16.66%) left / 5px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 calc(16.66% - 1px), var(--ink) calc(16.66% - 1px) 16.66%) right / 5px 100% no-repeat;
}

@media (min-width: 1236px) {
  .sheet {
    margin: 0 auto;
  }
}

@media (min-width: 880px) {
  .sheet {
    padding: 34px 44px 44px;
  }
}

.sheet-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 4px 0 10px;
  margin-bottom: 22px;
  border-bottom: 2px solid var(--ink);
  font-size: 0.78rem;
  font-weight: 650;
  font-stretch: 80%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.strip-num {
  padding: 2px 8px;
  background: var(--ink);
  color: var(--sheet);
}

.strip-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* Buttons ---------------------------------------------------------------------------------- */

.btn-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 14px 24px;
  border: 2px solid var(--ink);
  background: var(--stamp);
  color: #fff;
  box-shadow: 4px 4px 0 var(--ink);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 750;
  font-stretch: 85%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

@media (hover: hover) {
  .btn-stamp:hover:not(:disabled) {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--ink);
  }
}

.btn-stamp:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}

.btn-stamp:disabled {
  background: var(--pencil);
  box-shadow: none;
  cursor: default;
}

@media (min-width: 560px) {
  .btn-stamp {
    width: auto;
  }
}

.btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Building drawing ------------------------------------------------------------------------- */

.building {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.building .el {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.building .fillable {
  fill: var(--sheet);
}

.building .leader {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.building .marker circle,
.building .callout circle {
  fill: var(--sheet);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.building text {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 750;
  font-stretch: 80%;
  fill: var(--ink);
}

.building .callout circle {
  fill: var(--ink);
}

.building .callout text {
  fill: var(--sheet);
  font-size: 13px;
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Landing: the drawing draws itself once. */
.is-intro .el {
  stroke-dasharray: 1;
  animation: draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: calc(var(--area-delay, 0s) + var(--el-delay, 0s));
}

.is-intro .el:nth-child(2) {
  --el-delay: 0.09s;
}

.is-intro .el:nth-child(3) {
  --el-delay: 0.18s;
}

.is-intro .el:nth-child(4) {
  --el-delay: 0.27s;
}

.is-intro .area-product {
  --area-delay: 0.1s;
}

.is-intro .area-team {
  --area-delay: 0.4s;
}

.is-intro .area-debt {
  --area-delay: 0.7s;
}

.is-intro .area-security {
  --area-delay: 1s;
}

.is-intro .area-costs {
  --area-delay: 1.3s;
}

/* Quiz: undrawn elements are faint pencil construction lines. */
.is-building .el {
  stroke: var(--pencil);
  stroke-width: 1.5;
  stroke-dasharray: 0.012 0.018;
  opacity: 0.6;
}

.is-building .fillable {
  fill: none;
}

.is-building .el.is-drawn {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 1;
  opacity: 1;
  animation: draw 0.7s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.is-building .el.is-drawn.fillable {
  fill: var(--sheet);
}

.is-building .el.is-drawn.is-latest {
  animation: draw 0.7s cubic-bezier(0.65, 0, 0.35, 1) both, ink-dry 1.4s ease-out both;
}

@keyframes ink-dry {
  from {
    stroke: var(--stamp);
    stroke-width: 3.5;
  }
  to {
    stroke: var(--ink);
    stroke-width: 2;
  }
}

.is-building .marker {
  opacity: 0.55;
}

.is-building .marker.is-current {
  opacity: 1;
}

.is-building .marker.is-current circle {
  fill: var(--yellow);
}

.is-building .marker.is-done {
  opacity: 1;
}

/* Report: parts colored by condition. */
.cond-critical .el {
  stroke: var(--red);
}

.cond-critical .fillable {
  fill: url(#hatch-critical);
}

.hatch-bg-critical {
  fill: var(--red-soft);
}

.hatch-line-critical {
  stroke: var(--red);
  stroke-width: 1.6;
}

.cond-at_risk .el {
  stroke: var(--amber-ink);
}

.cond-at_risk .fillable {
  fill: url(#hatch-at_risk);
}

.hatch-bg-at_risk {
  fill: var(--yellow);
}

/* Landing ---------------------------------------------------------------------------------- */

.intro-grid {
  display: grid;
  grid-template-areas: 'title' 'drawing' 'copy' 'legend';
  gap: 14px;
}

.intro-title {
  grid-area: title;
}

.intro-drawing {
  grid-area: drawing;
}

.intro-copy {
  grid-area: copy;
}

.parts-legend {
  grid-area: legend;
}

.intro-title {
  font-size: clamp(2.5rem, 10.5vw, 4.7rem);
  font-weight: 820;
  font-stretch: 70%;
  line-height: 0.95;
  letter-spacing: -0.005em;
  margin-bottom: 18px;
}

.lead {
  font-size: 1.22rem;
  line-height: 1.4;
  font-weight: 550;
  color: var(--ink);
  max-width: 34ch;
}

.method {
  margin: 22px 0 0;
  color: var(--ink-soft);
  max-width: 50ch;
}

.intro-copy .lead {
  margin-bottom: 18px;
}

.note {
  margin: 14px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.notice {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  background: var(--yellow-soft);
}

.intro-drawing {
  margin: 0;
}

.intro-drawing .building {
  max-width: 460px;
  max-height: 210px;
  margin: 0 auto;
}

@media (min-width: 880px) {
  .intro-drawing .building {
    max-height: none;
  }
}

.parts-legend {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 4px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  font-size: 0.92rem;
}

.parts-legend li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink-soft);
}

.parts-legend strong {
  margin-right: 4px;
  font-weight: 750;
  font-stretch: 80%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 750;
  font-stretch: 80%;
  color: var(--ink);
}

@media (min-width: 880px) {
  .intro-grid {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas: 'title drawing' 'copy drawing' 'copy legend';
    grid-template-rows: auto auto 1fr;
    column-gap: 44px;
    row-gap: 18px;
    align-items: start;
  }

  .intro-title {
    align-self: end;
  }

  .parts-legend {
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
  }

  .parts-legend li:last-child {
    grid-column: 1 / -1;
  }
}

.intro-end {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}

.intro-end-title {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 800;
  font-stretch: 74%;
  line-height: 1.08;
  max-width: 30ch;
}

@media (min-width: 880px) {
  .intro-end {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.cartiglio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  margin: 30px 0 0;
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
}

.cartiglio .cell {
  padding: 8px 10px 10px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--sheet);
}

.cartiglio dt {
  font-size: 0.7rem;
  font-weight: 650;
  font-stretch: 80%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.cartiglio dd {
  margin: 2px 0 0;
  font-weight: 600;
  line-height: 1.3;
}

.cell-author {
  grid-column: 1 / -1;
}

.cell-author dd {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cell-author img {
  width: 40px;
  height: 40px;
  border: 1px solid var(--ink);
  object-fit: cover;
}

@media (min-width: 880px) {
  .cartiglio {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .cell-author {
    grid-column: auto;
  }
}

.proof {
  margin-top: 34px;
}

/* Client logos keep their original colors on a dark band across the sheet, as on sessa.es.
   The band bleeds through the sheet padding up to the inner frame (5px inset + 2px border). */
.proof-clients {
  margin: 0 -9px;
  padding: 22px 16px 20px;
  background: var(--ink);
  color: #cbd5e1;
  text-align: center;
}

.proof-clients .lettering {
  color: #cbd5e1;
  letter-spacing: 0.12em;
}

.logos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 16px;
  max-width: 1000px;
  margin: 16px auto 18px;
  padding: 0;
}

.logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}

.logos img {
  width: 100%;
  max-width: 100px;
  height: 28px;
  object-fit: contain;
}

.logos .invert img {
  filter: brightness(0) invert(1);
}

.proof-since {
  margin: 0;
  font-size: 0.92rem;
  color: #cbd5e1;
}

@media (min-width: 880px) {
  .proof-clients {
    margin: 0 -37px;
    padding: 30px 37px 26px;
  }

  .logos li {
    height: 44px;
  }

  .logos img {
    max-width: 120px;
    height: 36px;
  }
}

.quote {
  max-width: 760px;
  margin: 30px auto 0;
  text-align: center;
}

.quote blockquote {
  margin: 0 0 10px;
  font-size: 1.15rem;
  line-height: 1.4;
  font-weight: 500;
  font-stretch: 92%;
}

.quote figcaption {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.quote-note {
  color: var(--muted);
}

@media (min-width: 640px) {
  .logos {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 880px) {
  .quote blockquote {
    font-size: 1.35rem;
  }
}

/* Quiz ------------------------------------------------------------------------------------- */

.quiz-grid,
.gate-grid {
  display: grid;
  gap: 14px;
}

.quiz-drawing,
.gate-drawing {
  position: relative;
  margin: 0;
}

.quiz-drawing .building {
  height: 150px;
  width: auto;
  margin: 0 auto;
}

@media (min-width: 880px) {
  .quiz-grid,
  .gate-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 48px;
    align-items: start;
  }

  .quiz-drawing,
  .gate-drawing {
    position: sticky;
    top: 24px;
  }

  .quiz-drawing .building {
    height: auto;
    width: 100%;
  }
}

.scale {
  display: flex;
  gap: 2px;
  height: 12px;
  padding: 2px;
  margin-bottom: 18px;
  border: 1.5px solid var(--ink);
  background: var(--sheet);
}

.scale .seg {
  flex: 1;
}

.scale .seg.is-done {
  background: var(--ink);
}

.scale .seg.is-current {
  background: var(--yellow);
}

.quiz-area {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 10px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.part-tag {
  padding: 1px 7px;
  background: var(--yellow-soft);
  border: 1px solid var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 80%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.question {
  margin-bottom: 20px;
  font-size: clamp(1.5rem, 5.4vw, 2.1rem);
  font-weight: 760;
  font-stretch: 86%;
  line-height: 1.12;
}

.options {
  margin-bottom: 8px;
  border-top: 2px solid var(--ink);
}

.option {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
  width: 100%;
  min-height: 58px;
  padding: 16px 8px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

.option::before {
  content: '';
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 2px solid var(--ink);
  background: var(--sheet) center / 14px 14px no-repeat;
}

@media (hover: hover) {
  .option:hover {
    background: rgba(252, 232, 166, 0.45);
  }
}

.option[aria-checked='true'] {
  background: var(--yellow-soft);
}

.option[aria-checked='true']::before {
  border-color: var(--stamp);
  background-color: var(--stamp);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.option:focus-visible {
  outline-offset: -3px;
}

/* Gate ------------------------------------------------------------------------------------- */

.gate-drawing .building {
  max-height: 190px;
  width: auto;
  margin: 0 auto;
  opacity: 0.85;
}

@media (min-width: 880px) {
  .gate-drawing .building {
    max-height: none;
    width: 100%;
  }
}

.stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 180px;
  padding: 8px 16px 10px;
  border: 3px solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: 3px;
  background: rgba(251, 252, 250, 0.9);
  color: var(--muted);
  text-align: center;
  transform: translate(-50%, -50%) rotate(-7deg);
}

.stamp-label {
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 80%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stamp-value {
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight: 850;
  font-stretch: 68%;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.stamp.is-pending {
  border-style: dashed;
  outline-style: dashed;
}

.stamp.band-critical {
  color: var(--red);
}

.stamp.band-at_risk {
  color: var(--amber-ink);
}

.stamp.band-solid {
  color: var(--stamp);
}

.stamp.is-pressed {
  animation: press 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes press {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-7deg) scale(1.7);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-7deg) scale(1);
  }
}

.gate-title {
  margin-bottom: 10px;
  font-size: clamp(1.9rem, 7vw, 2.8rem);
  font-weight: 820;
  font-stretch: 72%;
  line-height: 1;
}

.gate-text {
  color: var(--ink-soft);
  max-width: 52ch;
}

.form-title {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--ink);
}

.form-cells {
  margin-bottom: 16px;
  border: 2px solid var(--ink);
  background: var(--sheet);
}

.field {
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--ink);
}

.field:last-child {
  border-bottom: 0;
}

.field:focus-within {
  background: rgba(252, 232, 166, 0.5);
  box-shadow: inset 0 0 0 2px var(--stamp);
}

.field:has(input[aria-invalid='true']) {
  box-shadow: inset 0 0 0 2px var(--red);
}

.field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 650;
  font-stretch: 80%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input {
  width: 100%;
  min-height: 40px;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px dashed var(--pencil);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.12rem;
  font-weight: 550;
}

.field input:focus {
  outline: none;
}

.field-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.field-error {
  margin: 4px 0 0;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--red);
}

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--stamp);
}

.check-error {
  margin: -4px 0 12px 34px;
}

.optional {
  color: var(--muted);
}

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

.form-error {
  padding: 10px 12px;
  border: 2px solid var(--red);
  background: var(--sheet);
  color: var(--red);
  font-weight: 600;
}

.gate-form .btn-stamp {
  margin-top: 6px;
}

/* Report ----------------------------------------------------------------------------------- */

.report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: -12px 0 22px;
}

.report-meta div {
  padding: 2px 18px 2px 10px;
  border-left: 2px solid var(--ink);
}

.report-meta dt {
  font-size: 0.7rem;
  font-weight: 650;
  font-stretch: 80%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.report-meta dd {
  margin: 0;
  font-weight: 650;
}

.report-grid {
  display: grid;
  gap: 18px;
}

.verdict-title {
  font-size: clamp(3.4rem, 15vw, 6.4rem);
  font-weight: 860;
  font-stretch: 62%;
  line-height: 0.88;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.band-critical {
  color: var(--red);
}

.band-at_risk {
  color: var(--amber-ink);
}

.band-solid {
  color: var(--stamp);
}

.score {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 16px 0 14px;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
}

.score-num {
  font-size: clamp(4rem, 17vw, 6.6rem);
  font-weight: 850;
  font-stretch: 62%;
  line-height: 0.82;
  font-variant-numeric: tabular-nums;
}

.score-of {
  padding-bottom: 4px;
  font-size: 0.78rem;
  font-weight: 650;
  font-stretch: 80%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.verdict-text {
  max-width: 44ch;
  font-size: 1.1rem;
  color: var(--ink-soft);
}

.report-drawing {
  margin: 0;
}

.drawing-frame {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

.report-drawing .building {
  margin: 0 auto;
}

.building .dimension line,
.building .dimension path {
  stroke: var(--ink);
  stroke-width: 1;
  fill: var(--ink);
}

.building .dimension text {
  font-size: 13px;
  font-weight: 800;
  font-stretch: 75%;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--sheet);
  stroke-width: 6px;
}

.stamp.stamp-final {
  left: auto;
  right: -4px;
  top: auto;
  bottom: 2%;
  transform: rotate(-9deg);
  background: rgba(251, 252, 250, 0.92);
}

.stamp.stamp-final.is-pressed {
  animation: press-final 0.34s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

@keyframes press-final {
  from {
    opacity: 0;
    transform: rotate(-9deg) scale(1.7);
  }
  to {
    opacity: 1;
    transform: rotate(-9deg) scale(1);
  }
}

.stamp-score {
  font-size: 0.9rem;
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: 0.04em;
}

.signature {
  display: block;
  width: 130px;
  height: auto;
  margin: 2px auto 4px;
}

.signature path {
  fill: none;
  stroke: var(--stamp);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.swatch {
  width: 22px;
  height: 14px;
  border: 1.5px solid var(--ink);
}

.swatch-critical {
  border-color: var(--red);
  background: repeating-linear-gradient(45deg, var(--red) 0 1.5px, var(--red-soft) 1.5px 4px);
}

.swatch-at_risk {
  border-color: var(--amber-ink);
  background: var(--yellow);
}

.swatch-solid {
  background: var(--sheet);
}

@media (min-width: 880px) {
  .report-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
}

.report-section {
  margin-top: 38px;
}

.report-section h2,
.cta h2 {
  font-size: clamp(1.6rem, 5.5vw, 2.2rem);
  font-weight: 800;
  font-stretch: 74%;
  line-height: 1.05;
  margin-bottom: 8px;
}

.section-intro {
  color: var(--ink-soft);
}

.priorities {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.priority {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink);
}

.priority-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--sheet);
  font-weight: 800;
  font-stretch: 80%;
}

.priority h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-bottom: 6px;
  font-size: 1.15rem;
  font-weight: 700;
}

.part-name {
  font-size: 0.78rem;
  font-weight: 700;
  font-stretch: 80%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.priority-score {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.priority p {
  margin: 0;
  max-width: 64ch;
  color: var(--ink-soft);
}

.cta {
  display: grid;
  gap: 20px;
  margin-top: 40px;
  padding: 22px 18px;
  border: 2px solid var(--ink);
  background: var(--sheet);
  box-shadow: 6px 6px 0 var(--ink);
}

.cta-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
  justify-self: center;
  width: 190px;
  padding: 14px 12px 10px;
  border: 3px double var(--stamp);
  color: var(--stamp);
  text-align: center;
  transform: rotate(-3deg);
}

.cta-stamp img {
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  border: 2px solid var(--stamp);
  object-fit: cover;
}

.cta-name {
  margin: 0;
  font-weight: 800;
  font-stretch: 80%;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cta-role {
  margin: 0 0 8px;
  font-size: 0.82rem;
  line-height: 1.3;
}

.cta-stamp .lettering {
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid var(--stamp);
  color: var(--stamp);
}

.cta-body p {
  color: var(--ink-soft);
  font-size: 1.08rem;
}

.cta-points {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.cta-points li {
  position: relative;
  padding: 7px 0 7px 26px;
  border-bottom: 1px solid var(--grid);
}

.cta-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 12px;
  height: 12px;
  background: var(--stamp);
}

@media (min-width: 720px) {
  .cta {
    grid-template-columns: 210px 1fr;
    gap: 32px;
    padding: 30px;
  }
}

.schedule {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--ink);
}

.schedule th,
.schedule td {
  padding: 12px 6px;
  border-bottom: 1px solid var(--ink);
  text-align: left;
  vertical-align: middle;
}

.schedule th {
  font-weight: 600;
}

.schedule .part-name,
.schedule .area-name {
  display: block;
}

.col-num {
  width: 30px;
  font-weight: 750;
  font-stretch: 80%;
}

.col-scale {
  width: 1%;
  white-space: nowrap;
}

.col-band {
  width: 1%;
  padding-left: 24px;
  white-space: nowrap;
  text-align: right;
}

.mini-scale {
  display: inline-flex;
  gap: 2px;
  margin-right: 10px;
  vertical-align: middle;
}

.mini-scale span {
  width: 7px;
  height: 16px;
  border: 1px solid var(--ink);
}

.mini-scale.band-critical .on {
  background: var(--red);
}

.mini-scale.band-at_risk .on {
  background: var(--yellow);
}

.mini-scale.band-solid .on {
  background: var(--stamp);
}

.score-cell {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.band-tag {
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 80%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (min-width: 560px) {
  .band-inline,
  .scale-inline {
    display: none;
  }
}

@media (max-width: 559px) {
  .col-num,
  .col-band,
  .scale-wide {
    display: none;
  }

  .scale-inline {
    display: block;
    margin-top: 6px;
  }

  .scale-inline .mini-scale {
    display: flex;
    margin: 0;
  }

  .scale-inline .mini-scale span {
    flex: 1;
  }

  .score-cell {
    font-size: 1.6rem;
    font-stretch: 70%;
  }

  .schedule .col-scale {
    text-align: right;
    vertical-align: top;
    padding-top: 14px;
  }
}

.report-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 30px;
  font-size: 0.95rem;
  color: var(--muted);
  text-align: center;
}

.report-foot p {
  margin: 0;
}

/* Simple pages ----------------------------------------------------------------------------- */

.prose-body,
.message-body {
  max-width: 68ch;
  padding: 8px 0 12px;
}

.prose h1,
.message h1 {
  margin-bottom: 14px;
  font-size: clamp(2rem, 8vw, 3.2rem);
  font-weight: 820;
  font-stretch: 72%;
  line-height: 1;
}

.prose h2 {
  margin: 26px 0 8px;
  font-size: 1.2rem;
  font-weight: 750;
}

.muted {
  color: var(--muted);
}

.message .lead {
  max-width: 50ch;
}


/* Phone: keep the question and its options within reach. */
@media (max-width: 879px) {
  .quiz-drawing .building {
    height: 168px;
  }

  .gate-drawing .building {
    max-height: 150px;
  }

  .stamp {
    min-width: 0;
    padding: 4px 10px 6px;
    border-width: 2px;
    outline-offset: 2px;
  }

  .stamp-label {
    font-size: 0.6rem;
  }

  .stamp-value {
    font-size: 1.35rem;
  }

  .quiz .sheet-strip {
    margin-bottom: 12px;
  }

  .question {
    margin-bottom: 14px;
  }

  .option {
    min-height: 52px;
    padding: 12px 6px;
  }
}

@media (max-width: 479px) {
  .quiz .strip-title {
    display: none;
  }
}

@media (min-width: 1100px) {
  .logos {
    grid-template-columns: repeat(6, 1fr);
    max-width: none;
  }
}

/* Red flags on the report: demolition red, one ruled row per immediate risk. */
.flags h2 {
  color: var(--red);
}

.flag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 2px solid var(--red);
  background: var(--sheet);
}

.flag {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--red);
}

.flag:last-child {
  border-bottom: 0;
}

.flag-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--red);
  color: #fff;
  font-weight: 850;
  font-stretch: 70%;
  font-size: 1.1rem;
}

.flag h3 {
  margin-bottom: 4px;
  font-size: 1.1rem;
  font-weight: 750;
  color: var(--ink);
}

.flag p {
  margin: 0;
  max-width: 64ch;
  color: var(--ink-soft);
}

/* Admin (internal) --------------------------------------------------------------------------- */

.admin .sheet a:not(.btn-stamp) {
  color: var(--stamp);
}

.admin-stats {
  grid-template-columns: repeat(2, 1fr);
  margin: 0 0 18px;
}

.admin-stats .cell {
  grid-column: auto;
}

@media (min-width: 880px) {
  .admin-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.admin-sort,
.admin-pager,
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--ink);
  font-size: 0.92rem;
  background: var(--sheet);
}

.admin-table th,
.admin-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--ink);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  font-size: 0.72rem;
  font-weight: 700;
  font-stretch: 80%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.nowrap {
  white-space: nowrap;
}

.lead-score {
  display: inline-block;
  min-width: 38px;
  padding: 2px 6px;
  border: 1.5px solid var(--ink);
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.lead-score.hot {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.lead-score.warm {
  background: var(--yellow-soft);
}

.flag-count,
.unknown-tag {
  display: inline-block;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 750;
  font-stretch: 80%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.flag-count {
  background: var(--red);
  color: #fff;
}

.unknown-tag {
  border: 1px solid var(--amber-ink);
  color: var(--amber-ink);
}

.admin-scores {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 22px 0 6px;
  padding: 0;
}

.admin-scores li {
  display: flex;
  gap: 8px;
}

.admin .sheet h2 {
  margin: 28px 0 8px;
  font-size: 1.3rem;
  font-weight: 800;
  font-stretch: 78%;
}

.answers .q {
  width: 48%;
  color: var(--ink-soft);
}

.answers .pts {
  width: 30px;
  font-weight: 800;
  text-align: right;
}

.answers tr.zero td:not(.q) {
  color: var(--red);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}