/* ==========================================================================
   Direction 04 — Technical Blueprint
   A drawing office rather than a brochure: blueprint grid ground, line-art
   schematics, monospace spec labels, dimension callouts, cyan hover highlight.
   Speaks to engineers; the configurator becomes the hero of the site.
   ========================================================================== */
:root {
  --brand: #1b5fd9;
  --brand-600: #1450bc;
  --brand-700: #0f3f96;
  --brand-900: #061c40;
  --accent: #00c2ff;
  --accent-2: #8ae6ff;

  --bg: #f7fafd;
  --surface: #ffffff;
  --surface-2: #eaf1fb;
  --border: #c4d6ee;

  --text: #061c40;
  --text-dim: #5a7092;

  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 0 rgba(6, 28, 64, .06);
  --shadow: 0 6px 18px rgba(6, 28, 64, .07);
  --shadow-lg: 0 18px 44px rgba(6, 28, 64, .12);

  --font-display: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: Consolas, "Cascadia Mono", ui-monospace, monospace;

  --fs-hero: clamp(2.1rem, 1.2rem + 3.6vw, 3.8rem);
  --lh-display: 1.1;
  --tracking-display: -0.02em;

  --grid-line: rgba(27, 95, 217, .09);
  --grid-line-major: rgba(27, 95, 217, .16);
}

/* --- blueprint ground --------------------------------------------------- */
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-major) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
}

/* everything sits on opaque white panels so the grid reads as the paper */
.site-header { background: rgba(247, 250, 253, .93); border-bottom: 1px solid var(--border); }
.section--tint { background: rgba(234, 241, 251, .72); border-block: 1px solid var(--border); }
.trust { background: rgba(255, 255, 255, .82); }

/* --- monospace technical voice ----------------------------------------- */
.eyebrow {
  color: var(--brand-700); background: var(--surface-2);
  border: 1px solid var(--border); padding: .3rem .55rem;
  letter-spacing: .12em;
}
.eyebrow::before { width: .55rem; height: .55rem; border-radius: 0; background: var(--accent); }
.nav a { font-family: var(--font-mono); font-size: .82rem; font-weight: 600; }
.card-link, .tile-name { font-family: var(--font-mono); }
.tile-name { font-size: .86rem; font-weight: 700; }
.btn { font-family: var(--font-mono); letter-spacing: .02em; font-size: .88rem; }
.brand { font-family: var(--font-mono); letter-spacing: -.01em; }
.brand-mark { background: var(--brand-900); color: var(--accent); border-radius: 2px; }

/* --- hero as a drawing sheet ------------------------------------------- */
.hero { background: transparent; }
.hero-media .ph {
  background: var(--surface);
  border: 1px solid var(--brand);
  border-radius: 2px;
  box-shadow: var(--shadow);
}
/* corner registration marks + a title block, like a real drawing */
.hero-media { padding: 1.25rem; }
.hero-media::after {
  content: "DECM · DRAWING No. [PLACEHOLDER] · REV 00 · SCALE NTS";
  position: absolute; left: 1.25rem; right: 1.25rem; bottom: -.25rem;
  font: 600 .64rem/1 var(--font-mono); letter-spacing: .1em;
  color: var(--text-dim); text-align: right;
}
.hero-media::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(var(--brand) 0 0) 0 0 / 14px 1px no-repeat,
    linear-gradient(var(--brand) 0 0) 0 0 / 1px 14px no-repeat,
    linear-gradient(var(--brand) 0 0) 100% 0 / 14px 1px no-repeat,
    linear-gradient(var(--brand) 0 0) 100% 0 / 1px 14px no-repeat,
    linear-gradient(var(--brand) 0 0) 0 100% / 14px 1px no-repeat,
    linear-gradient(var(--brand) 0 0) 0 100% / 1px 14px no-repeat,
    linear-gradient(var(--brand) 0 0) 100% 100% / 14px 1px no-repeat,
    linear-gradient(var(--brand) 0 0) 100% 100% / 1px 14px no-repeat;
  pointer-events: none;
}
.hero-stats .stat-num { font-family: var(--font-mono); font-size: 1.5rem; }
.hero-stats .stat-label { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; }

/* --- panels with annotation leaders ------------------------------------ */
.card, .tile, .quote, .project, .p-card, .filters, .cfg-spec, .cfg-stage {
  background: var(--surface); border: 1px solid var(--border); border-radius: 2px;
}
.card::before { background: var(--accent); height: 2px; }
.card { padding-top: 1.6rem; }
.card:hover, .p-card:hover, .tile:hover, .project:hover {
  transform: none; border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow);
}
.card-icon { background: var(--surface-2); color: var(--brand); border: 1px solid var(--border); border-radius: 2px; }
.card:hover .card-icon { background: var(--brand-900); color: var(--accent); border-color: var(--brand-900); }

/* dimension-style rule under every section head */
.section-head { position: relative; padding-bottom: 1.25rem; }
.section-head::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; max-width: 22rem; height: 1px;
  background: var(--border);
}
.section-head::before {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 1px; height: 9px; background: var(--brand);
}
.h2 { font-weight: 700; }

.stat-num { font-family: var(--font-mono); }
.section--brand { background: var(--brand-900); }
.section--brand::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.teaser { background: var(--brand-900); border: 1px solid var(--brand); border-radius: 3px; }
.teaser .ph { border-radius: 2px; }
.cta-band {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--brand); border-left: 4px solid var(--accent); border-radius: 2px;
}
.cta-band .btn { --btn-bg: var(--brand); --btn-bd: var(--brand); --btn-fg: #fff; }
.site-footer { background: var(--brand-900); }
.site-footer h4 { letter-spacing: .12em; }

/* --- shop: spec-sheet product cards ------------------------------------ */
.chip { border-radius: 2px; font-family: var(--font-mono); font-size: .76rem; }
.p-media { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.p-media::after {
  content: ""; position: absolute; inset: auto 12% 10% 12%; height: 1px;
  background: var(--border);
}
.p-badge { border-radius: 2px; }
.p-badge--stock { background: #e3f7ec; color: #0a5c32; border: 1px solid #9fdcbb; }
.p-badge--custom { background: var(--surface-2); color: var(--brand-700); border: 1px solid var(--border); }
.p-name { font-family: var(--font-mono); font-size: .9rem; }
.p-price { font-family: var(--font-mono); }
.select, .opt, .step-num, .icon-btn, .btn { border-radius: 2px; }

/* --- configurator as the centrepiece ----------------------------------- */
.cfg-tabs { border-radius: 2px; background: var(--surface); border: 1px solid var(--border); }
.cfg-tab { border-radius: 2px; font-family: var(--font-mono); }
.cfg-tab[aria-selected="true"] { background: var(--brand-900); color: var(--accent); }
.stage-viz {
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 20px 20px;
}
.stage-viz svg { color: var(--brand); }
.viz-tag { font-family: var(--font-mono); background: var(--surface); padding: .2rem .4rem; border: 1px solid var(--border); }
.opt { font-family: var(--font-body); }
.opt b { font-family: var(--font-mono); font-size: .84rem; }
.spec-head { background: var(--brand-900); color: #fff; }
.spec-head h3 { font-family: var(--font-mono); }
.spec-head p { color: var(--accent-2); }
.spec-row dd { font-family: var(--font-mono); font-size: .8rem; }
.price-panel { border-radius: 2px; }
.progress > i { background: var(--accent); }