/* ==========================================================================
   Direction 03 — Bold Editorial
   Oversized serif display, hard-edged blue and white blocks, warm amber CTAs
   (the complement of blue, for maximum brightness), asymmetric grid and a
   horizontal-scrolling product rail.
   ========================================================================== */
:root {
  --brand: #0b43b8;
  --brand-600: #093795;
  --brand-700: #072a72;
  --brand-900: #05194a;
  --accent: #ffb020;
  --accent-2: #ff8a00;

  --bg: #fffdf8;
  --surface: #f2f5ff;
  --surface-2: #e4eaff;
  --border: #05194a;

  --text: #05194a;
  --text-dim: #5a6483;

  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;

  --shadow-sm: none;
  --shadow: 6px 6px 0 var(--brand-900);
  --shadow-lg: 10px 10px 0 var(--brand-900);

  --font-display: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.6rem, 1rem + 6.4vw, 6rem);
  --fs-h2: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
  --lh-display: 1;
  --tracking-display: -0.035em;

  --section-py: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --container: 1300px;
}

h1, h2, h3, h4 { font-weight: 700; }
.h3 { font-family: var(--font-body); font-weight: 800; letter-spacing: -.01em; }

/* --- header: hard rule, uppercase sans nav ----------------------------- */
.site-header { background: var(--bg); border-bottom: 2px solid var(--brand-900); }
.site-header.is-stuck { box-shadow: none; border-bottom-width: 2px; }
.nav a { text-transform: uppercase; letter-spacing: .1em; font-size: .76rem; font-weight: 700; color: var(--text); }
.nav a::after { height: 3px; background: var(--accent); }
.brand { font-family: var(--font-display); letter-spacing: -.02em; font-size: 1.35rem; }
.brand-mark { background: var(--brand); border-radius: 0; }
.icon-btn { border: 2px solid var(--brand-900); }

.btn { border-width: 2px; font-weight: 800; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--brand-900); }
.btn--primary { --btn-bg: var(--brand-900); --btn-bd: var(--brand-900); }
.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--brand-900); --btn-bd: var(--brand-900); }
.btn--ghost { --btn-bd: var(--brand-900); --btn-fg: var(--brand-900); }

/* --- asymmetric hero on a flat blue block ------------------------------ */
.hero { background: var(--brand); color: #fff; border-bottom: 2px solid var(--brand-900); }
.hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; }
.hero h1 { font-style: italic; }
.hero h1::after { content: "."; color: var(--accent); font-style: normal; }
.hero .eyebrow { color: var(--accent); }
.hero .eyebrow::before { background: var(--accent); }
.hero .lede { color: rgba(255, 255, 255, .8); border-left: 3px solid var(--accent); padding-left: 1.1rem; }
.hero-stats { border-top: 2px solid rgba(255, 255, 255, .3); }
.hero-stats .stat-num { color: var(--accent); font-family: var(--font-display); }
.hero-stats .stat-label { color: rgba(255, 255, 255, .7); }
.hero .ph { background-color: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .4); }
.hero .ph::after { color: rgba(255, 255, 255, .7); }
.hero-media { transform: translateY(2rem); }

/* --- editorial section heads ------------------------------------------- */
.eyebrow {
  color: var(--brand-900); font-family: var(--font-body);
  border: 2px solid var(--brand-900); padding: .3rem .6rem; border-radius: 0;
}
.eyebrow::before { display: none; }
.section-head { max-width: 30ch; }
.section-head .lede { font-family: var(--font-display); font-size: 1.2em; color: var(--text); }

/* --- hard-edged cards with offset shadow ------------------------------- */
.card, .quote, .project, .p-card, .filters, .cfg-spec, .cfg-stage, .tile {
  border: 2px solid var(--brand-900); border-radius: 0; background: var(--bg);
}
.card { border-left-width: 2px; }
.card::before { display: none; }
.card:hover, .p-card:hover, .project:hover, .tile:hover {
  transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--brand-900);
}
.card-icon { border-radius: 0; background: var(--accent); color: var(--brand-900); }
.card-link { text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; }
.quote-mark { font-family: var(--font-display); color: var(--brand); font-size: 3.5rem; }

/* --- horizontal product rail ------------------------------------------- */
[data-render="categories"] {
  display: flex; grid-template-columns: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scrollbar-width: thin;
}
[data-render="categories"] .tile { flex: 0 0 clamp(210px, 22vw, 260px); scroll-snap-align: start; }

/* --- blocky bands ------------------------------------------------------- */
.section--tint { background: var(--surface); border-block: 2px solid var(--brand-900); }
.section--brand { background: var(--brand-900); }
.section--brand .stat-num { color: var(--accent); font-family: var(--font-display); }
.stat-num { font-family: var(--font-display); }
.teaser { background: var(--brand-900); border: 2px solid var(--brand-900); }
.teaser::after { background: radial-gradient(circle, rgba(255, 176, 32, .4), transparent 68%); }
.teaser-list li::before { color: var(--accent); }
.cta-band {
  background: var(--accent); color: var(--brand-900);
  border: 2px solid var(--brand-900); box-shadow: 10px 10px 0 var(--brand-900);
}
.cta-band h2 { font-style: italic; }
.site-footer { background: var(--brand-900); }
.site-footer h4 { font-family: var(--font-body); }

.trust { background: var(--brand-900); border-block: 0; }
.trust-label { color: rgba(255, 255, 255, .6); }
.trust .ph { background-color: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .35); }
.trust .ph::after { color: rgba(255, 255, 255, .6); }

/* --- shop + configurator ------------------------------------------------ */
.chip { border: 2px solid var(--brand-900); border-radius: 0; color: var(--brand-900); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--brand-900); }
.p-media { background: var(--surface-2); border-bottom: 2px solid var(--brand-900); }
.p-badge { border-radius: 0; border: 2px solid var(--brand-900); }
.p-badge--stock { background: var(--accent); color: var(--brand-900); }
.p-badge--custom { background: #fff; color: var(--brand-900); }
.p-price { font-family: var(--font-display); font-size: 1.2rem; }
.select, .opt, .step-num { border-radius: 0; border-width: 2px; }
.cfg-tabs { border: 2px solid var(--brand-900); border-radius: 0; background: var(--bg); }
.cfg-tab { border-radius: 0; }
.cfg-tab[aria-selected="true"] { background: var(--brand-900); color: #fff; box-shadow: none; }
.stage-viz { background: var(--surface-2); }
.stage-viz svg { color: var(--brand); }
.spec-head { background: var(--brand-900); color: #fff; }
.spec-head p { color: rgba(255, 255, 255, .65); }
.price-panel { border: 2px dashed var(--brand-900); background: var(--surface); }
.progress > i { background: var(--accent); }
.notice { border-width: 2px; border-radius: 0; }