/* V1 Installation Drawing, full commitment: blueprint field, dimension lines, title block. */
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/assets/fonts/hanken-grotesk.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* measurements and dimension labels only */
  --display-stretch: 125%;
  --display-weight: 720;
  --fs-display: clamp(2.3rem, 1.2rem + 3.7vw, 4.55rem);
  --fs-h2: clamp(1.85rem, 1.25rem + 2vw, 3rem);
  --r-media: 20px;
  --r-card: 16px;
  --r-panel: 24px;
  --reviews-bg: color-mix(in oklab, var(--sky) 55%, var(--white));
}

/* blueprint paper: the services sheet carries a faint drafting grid */
.v1 .services {
  background-color: var(--navy);
  background-image:
    linear-gradient(color-mix(in oklab, var(--sky) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--sky) 9%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
}
.v1 .dim-hero .dim-label { color: var(--navy); }
.v1 .hero-sheet { margin-inline: 2px; }

/* the title block is ruled like a drawing's legend */
.v1 .title-block {
  width: min(410px, 36%); padding: 10px; border-radius: 20px; overflow: visible;
  border: 1px solid color-mix(in oklab, var(--navy) 22%, var(--white)); box-shadow: var(--shadow-float);
}
/* inner radius = outer radius minus the 10px inset, so the corners run parallel */
.v1 .title-block .btn { border-radius: 10px; margin: 0 0 4px; min-height: 64px; padding: 10px 10px 10px 22px; }
.v1 .title-block .btn .arrow-dot { width: 42px; height: 42px; }
.v1 .tb-message { border-bottom: 1px solid var(--line-strong); padding: 20px 14px 20px 12px; gap: 16px; }
.v1 .tb-rating { padding: 18px 14px 12px 12px; gap: 16px; }
.v1 .tb-message-text { gap: 3px; }
.v1 .tb-message-text strong { text-wrap: balance; }
.v1 .tb-rating-text { gap: 4px; }
.v1 .tb-wa { width: 44px; height: 44px; border-radius: 10px; }

/* numbers are measurements */
.v1 .stat dd, .v1 .rs-score { font-stretch: 112%; }
.v1 .stat dt, .v1 .hours dd, .v1 .tb-message-text span { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; }
.v1 .band-bar { border-radius: 14px; }
.v1 .band-bar::before { content: none; }

.v1 .review figure { border-color: color-mix(in oklab, var(--sky) 60%, var(--navy) 18%); }
.v1 .info-cells { border-color: var(--navy); }
.v1 .info-cell + .info-cell { border-left-color: var(--navy); }
.v1 .quote-panel, .v1 .pf-cta-panel { background-color: var(--navy);
  background-image:
    linear-gradient(color-mix(in oklab, var(--sky) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--sky) 7%, transparent) 1px, transparent 1px);
  background-size: 56px 56px; }
@media (max-width: 899px) { .v1 .title-block { width: auto; box-shadow: none; } }