/* Beltway Steel — design system adapted from ON.energy reference (Refero
   1d0983e0-be29-4e1d-b217-1edec1003fb3): industrial luxe, dark stage,
   achromatic + single yellow accent. Brand swap: accent = Beltway gold
   #F0B721 (not ON's #fff313), logo navy lives only inside the mark. */
:root {
  --bg: #1F3450;            /* Beltway navy (from logo) — replaces ON's black */
  --bg-deep: #16263c;       /* header/footer/callbar layer */
  --panel: #2B4262;         /* elevated navy panel (graphite role) */
  --line: #3A5478;
  --text: #eeeeee;          /* Screen White */
  --muted: #B9C6D8;         /* silver-blue (Industrial Silver role) — 5.9:1 on panel, WCAG AA */
  --faint: #5A7396;         /* slate — borders/decoration only, NOT small text */
  --accent: #F0B721;        /* Beltway gold (brand) */
  --light-bg: #eeeeee;      /* light interlude sections */
  --light-text: #111111;
  --light-muted: #4b4b4b;
  --accent-ghost: #6E5104;  /* ghosted text on gold statement — 4.05:1, AA large */
  --r: 6px;                 /* default radius */
  --r-card: 9px;            /* image/content cards */
  --r-img: 16px;            /* images (DESIGN.md) */
  --gap-section: 64px;      /* mobile; 120px from 900px up */
  --scrim: #0d1725;         /* photo-stage dark: hero/cinematic band base + tint family */
  --ok: #43d17c;            /* status green (open dot) */
  --ok-deep: #1a7f37;       /* status green on light chips */
  --err: #b00020;           /* form/validation red */
  --err-soft: #FFB4AB;      /* error text on dark panels (calculator) */
  --ok-wash: #e6f4ea;       /* light chip behind success text */
  --err-wash: #fdecea;      /* light chip behind error text */
}
@media (min-width: 900px) { :root { --gap-section: 120px; } }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  padding-bottom: 76px; /* sticky call bar */
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: 1350px; margin: 0 auto; padding: 0 20px; }

/* ---- Type scale (ON.energy: light display, negative tracking) ---- */
h1, .display {
  font-weight: 300;
  font-size: clamp(34px, 8vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--text);
}
h2, .heading {
  font-weight: 300;
  font-size: clamp(24px, 5vw, 36px);
  line-height: 1.13;
  letter-spacing: -0.02em;
}
.body-sm { font-size: 14px; line-height: 1.2; }
.caption { font-size: 12px; line-height: 1.38; color: var(--muted); }

/* ---- Header ---- */
.site-header {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.site-header .logo { height: 46px; width: auto; }
@media (min-width: 900px) { .site-header .logo { height: 52px; } }

/* ---- Buttons ---- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: #000;
  font-weight: 500; font-size: 16px; text-decoration: none;
  padding: 12px 17px; border-radius: var(--r);
  min-height: 48px; white-space: nowrap;
}
.btn-primary:active { filter: brightness(.92); }
/* Secondary CTA: gold outline + light text (was gray — too quiet) */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(22, 38, 60, 0.35); color: #ffffff;
  border: 1.5px solid var(--accent);
  font-weight: 500; font-size: 16px; text-decoration: none;
  padding: 12px 14px; border-radius: var(--r); min-height: 48px;
}
.btn-ghost:active { background: rgba(240, 183, 33, .22); }

/* ---- Hero: full-bleed graded photo, melts into navy stage ---- */
.hero {
  position: relative;
  background: var(--bg);
  padding: 56px 0 64px;
  min-height: 60svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 22%; /* building lives in the upper part */
  filter: saturate(.8); /* DESIGN.md brand grade — one value site-wide */
  z-index: 0;
}
.hero::after { /* text-legibility + melt into page background */
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(22,38,60,.28) 0%, rgba(31,52,80,.06) 45%, rgba(31,52,80,.4) 84%, #1F3450 100%),
    linear-gradient(100deg, rgba(22,38,60,.8) 0%, rgba(22,38,60,.42) 30%, rgba(22,38,60,0) 55%);
}
@media (max-width: 700px) {
  /* WORK-16.9: hero главной = утверждённый «оверлап-постер» продуктовых (v=90325):
     фото в родных пропорциях, низ растворяется до ЧИСТОГО var(--bg) на 88% высоты
     кадра (кромка невидима, нейви-в-нейви), бровь+H1 стартуют в зоне растворения,
     подстрока/CTA/статус — на сплошном нейви ниже. Desktop не тронут. */
  .hero { padding: 0 0 56px; min-height: 0; display: block; }
  .hero picture { display: block; position: relative; }
  .hero picture::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,23,37,.20) 0%, rgba(13,23,37,.02) 34%,
      rgba(13,23,37,.16) 50%, rgba(19,32,50,.70) 70%, var(--bg) 84%); }
  .hero-bg { position: static; display: block; width: 100%; height: auto; filter: saturate(.8); }
  .hero::after { display: none; }
  .hero .wrap { margin-top: -64px; }
  /* ES: три сегмента брови не влезают в строку (перенос давал висячую точку) —
     средний скрыт, как на продуктовых; EN укладывается в одну строку целиком */
  html[lang="es"] .hero .eyebrow span:nth-child(2) { display: none; }
  .hero .eyebrow span {
    text-shadow: 0 1px 10px rgba(13,23,37,.9), 0 0 3px rgba(13,23,37,.7); }
}
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero-copy { max-width: 640px; }
/* Product eyebrow above the punch headline (hero V2, 2026-08-12) */
.hero .eyebrow, .hero-product .eyebrow { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 16px;
  font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  text-shadow: 0 1px 8px rgba(10,18,30,.6); }
.hero .eyebrow span + span::before, .hero-product .eyebrow span + span::before { content: '·'; margin-right: 14px; color: var(--muted); }
.hero h1 { font-size: clamp(30px, 7.4vw, 56px); max-width: 620px; text-shadow: 0 2px 18px rgba(10,18,30,.45); }
.hero .sub {
  margin-top: 20px; font-size: 16px; line-height: 1.38;
  color: #D7DFEA; max-width: 520px;
  text-shadow: 0 1px 10px rgba(10,18,30,.5);
}
.hero .cta-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero .badge-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  background: rgba(22, 38, 60, .55); /* mid-ground: readable, not a heavy chip */
  border: 1px solid rgba(255, 255, 255, .28);
  color: #E8EEF6; font-size: 12px; font-weight: 500;
  padding: 6px 16px; border-radius: 16px; /* accent pill */
}

/* ---- Sections ---- */
section { padding: var(--gap-section) 0; }

/* ---- Full-bleed gold statement (DESIGN.md: yellow statement section) ---- */
.statement {
  background: var(--accent);
  padding: var(--gap-section) 0;
}
.statement p {
  font-weight: 300;
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1.13;
  letter-spacing: -0.04em;
  color: var(--accent-ghost);
  max-width: 900px;
}
.statement p strong { font-weight: 300; color: #1F3450; } /* navy on gold = logo pairing */
.section-title { margin-bottom: 24px; color: var(--text); }
.section-light .section-title { color: var(--light-text); }

/* Products sit one spacing step below the hero */
#products { position: relative; z-index: 3; padding-top: 0; margin-top: 64px; }
@media (max-width: 700px) { #products { margin-top: 40px; } }
/* Why pulled two spacing steps closer to the products above it */
#why { padding-top: 0; }

/* ---- Product cards: graphite panels, no shadows ---- */
.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 24px;
  text-decoration: none; display: block;
}
.card:hover { border-color: var(--muted); }
.card h3 { font-weight: 400; font-size: 20px; letter-spacing: -0.01em; color: var(--text); }
.card p { color: var(--muted); font-size: 14px; line-height: 1.38; margin-top: 8px; }
.card .price-note { margin-top: 18px; font-size: 14px; font-weight: 500; }
.card .price-note .accent { color: var(--accent); }

/* ---- Light interlude (pickup) — ON.energy alternates dark/#eeeeee ---- */
.section-light { background: var(--light-bg); color: var(--light-text); }
.yard-photo { position: relative; margin-bottom: 16px; }
.yard-photo img { width: 100%; height: auto; border-radius: var(--r-img); }
.yard-badge {
  position: absolute; left: 16px; bottom: 16px;
  background: rgba(22, 38, 60, .85); color: #E8EEF6;
  font-size: 13px; font-weight: 500;
  padding: 7px 14px; border-radius: var(--r);
}
.pickup-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .pickup-grid { grid-template-columns: 1fr 1fr; } }
.pickup-col { display: grid; gap: 16px; align-content: start; }
.steps { list-style: none; }
.info-box .steps li {
  display: flex; gap: 12px; padding: 9px 0; font-size: 14px; color: var(--light-muted);
  justify-content: flex-start; border-bottom: 0; /* override .info-box li table styling */
}
.info-box .steps li strong { color: var(--light-text); font-weight: 600; }
.info-box .steps .num {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #16263c;
  font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.info-box {
  background: #ffffff; border: 1px solid #d7d7d7;
  border-radius: var(--r-card); padding: 24px;
}
.info-box h3 { font-weight: 400; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 12px; }
.info-box a { color: var(--light-text); }
.info-box ul { list-style: none; }
.info-box li {
  display: flex; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid #e4e4e4;
  font-size: 14px; color: var(--light-muted);
}
.info-box li:last-child { border-bottom: 0; }
.info-box li span:last-child { color: var(--light-text); }
.map-embed {
  width: 100%; height: 240px; border: 0;
  border-radius: var(--r-card); margin-top: 14px; display: block;
}
.addr-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.addr-actions .pickup-tag { margin-top: 0; }
.btn-directions {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #16263c;
  font-weight: 600; font-size: 14px; text-decoration: none;
  padding: 10px 16px; border-radius: var(--r); min-height: 48px;
}
.pickup-tag {
  display: inline-block; margin-top: 14px;
  border: 1px solid var(--light-text); color: var(--light-text);
  border-radius: var(--r); font-size: 12px; font-weight: 500;
  padding: 5px 12px;
}

/* ---- Sticky mobile call bar: Call | Text, taps >=48px ---- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--bg-deep); border-top: 1px solid var(--accent);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 10px;
}
.callbar a { flex: 1; text-align: center; min-height: 48px; }
@media (min-width: 900px) { .callbar { display: none; } body { padding-bottom: 0; } }

/* ---- Header phone: clickable AND selectable/copyable ---- */
.header-phone { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.phone-link {
  color: var(--accent); font-weight: 600; font-size: 18px;
  text-decoration: none; letter-spacing: .01em;
  user-select: all; -webkit-user-select: all; /* one tap selects the whole number for copy */
}
.phone-cap { font-size: 11px; color: var(--muted); }

/* ---- Hero refinements (CTA fine print) ---- */
.cta-note {
  margin-top: 12px; font-size: 13px; color: #C4D0DF;
  text-shadow: 0 1px 8px rgba(10,18,30,.5);
}

.card { display: flex; flex-direction: column; }

/* ---- Why builders switch: pain -> solution tiles ---- */
.why-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .why-grid { grid-template-columns: 1fr 1fr; } }
/* Photo of the builder at work beside the pain tiles */
.why-layout { display: grid; gap: 20px; }
.why-photo { position: relative; margin: 0; border-radius: var(--r-img); overflow: hidden;
             background: var(--panel); aspect-ratio: 16 / 10; }
.why-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                 filter: saturate(.8); }
.why-photo::after { content: ''; position: absolute; inset: 0; background: rgba(31,52,80,.18); pointer-events: none; }
@media (min-width: 960px) {
  .why-layout { grid-template-columns: 5fr 7fr; gap: 32px; align-items: stretch; }
  .why-photo { aspect-ratio: auto; height: 100%; }
}
.why-photo img.why-crane { object-position: 50% 76%; }
@media (max-width: 959px) { .why-photo img.why-crane { object-position: 50% 62%; } }

.why-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }
.why-tile h3 { color: var(--accent); font-weight: 500; font-size: 17px; letter-spacing: -0.01em; margin-bottom: 8px; }
.why-tile p { color: var(--muted); font-size: 15px; line-height: 1.45; }

/* ---- Pickup speed line ---- */
.pickup-fast {
  margin-top: 14px; padding: 12px 14px;
  background: #FFF6DC; border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 14px; font-weight: 500; color: var(--light-text);
}

/* ---- Product landing: flat hero (no photo — fast LCP) ---- */
.hero--flat { min-height: auto; padding: 48px 0 56px; background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 70%); }
.hero--flat::after { display: none; }
.hero--flat h1 { text-shadow: none; }
.hero--flat .sub { text-shadow: none; }
.crumb { font-size: 13px; margin-bottom: 18px; }
/* WORK-18: utility pages (privacy, sms-terms) — quieter H1, below product 47px */
.hero--utility h1 { font-size: clamp(26px, 5vw, 38px); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--text); }

/* ---- Spec table ---- */
/* WORK-17.4 (Nur): compact, not space-filling — cap width at 760px (left on the
   content column), shrink the label column to its content, one padding step down */
.spec-wrap { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; max-width: 760px; }
.spec-table { width: 100%; border-collapse: collapse; background: var(--panel); }
.spec-table th, .spec-table td {
  padding: 9px 16px; text-align: left; vertical-align: top;
  font-size: 14px; line-height: 1.4; border-bottom: 1px solid var(--line);
}
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { color: var(--muted); font-weight: 500; width: 1%; white-space: nowrap; padding-right: 28px; }
.spec-table td { color: var(--text); }
.to-confirm { color: var(--accent); }

/* ---- How ordering works (dark section steps) ---- */
.order-steps { list-style: none; display: grid; gap: 14px; }
@media (min-width: 720px) { .order-steps { grid-template-columns: repeat(3, 1fr); } }
.order-steps li {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 20px;
  font-size: 14px; line-height: 1.45; color: var(--muted);
}
.order-steps strong { color: var(--text); font-weight: 600; display: block; margin-bottom: 4px; }
.order-steps .num {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #16263c;
  font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.order-steps a { color: var(--accent); }

/* ---- Request a Quote form (light section) ---- */
.quote-form { display: grid; gap: 14px; max-width: 560px; }
.quote-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--light-text); }
/* progressive reveal: the form opens as one field; phone/email appear as you type */
.js .quote-form .lead-step { display: none; }
.js .quote-form .lead-step.on { display: grid; animation: leadStepIn .25s ease; }
@keyframes leadStepIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.quote-form input, .quote-form select, .quote-form textarea {
  width: 100%; padding: 12px; font: inherit; font-size: 16px; /* 16px prevents iOS zoom */
  color: var(--light-text); background: #fff;
  border: 1px solid #c9c9c9; border-radius: var(--r);
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent);
}
.quote-form .consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 400; font-size: 13px; line-height: 1.4; color: var(--light-muted);
}
.quote-form .consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); }
.quote-form button[type="submit"] { border: 0; cursor: pointer; width: 100%; font-size: 17px; }
.form-note { font-size: 13px; color: var(--light-muted); }
.form-status { display: none; font-size: 14px; font-weight: 500; padding: 12px 14px; border-radius: var(--r); }
.form-status.show { display: block; }
.form-status.ok { background: var(--ok-wash); color: var(--ok-deep); }
.form-status.err { background: var(--err-wash); color: var(--err); }
.form-status a { color: inherit; }

/* ---- Related products interlinking ---- */
.related { font-size: 14px; color: var(--muted); }
.related a { color: var(--accent); text-underline-offset: 3px; }

/* ---- Footer ---- */
.site-footer {
  background: var(--bg-deep); border-top: 1px solid var(--line);
  color: var(--muted); padding: 40px 0 48px; font-size: 12px; line-height: 1.38;
}
.site-footer .logo { height: 38px; width: auto; margin-bottom: 16px; }
.site-footer a { color: var(--text); }
.site-footer .legal { margin-top: 14px; color: #96A9C0; } /* 6.3:1 on bg-deep, AA */

/* =====================================================================
   Visual upgrade (2026-08-04): tech drawings, icons, motion, photo slots
   ===================================================================== */

/* ---- Focus visibility (keyboard) ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Hover/active life (transform-only: zero CLS) ---- */
.btn-primary, .btn-ghost, .btn-directions,
.card, .why-tile, .site-footer a, .related a {
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease,
              filter .18s ease, color .18s ease, box-shadow .18s ease;
}
@media (hover: hover) {
  .btn-primary:hover, .btn-directions:hover {
    filter: brightness(1.07); transform: translateY(-1px);
  }
  .btn-ghost:hover { background: rgba(240, 183, 33, .18); transform: translateY(-1px); }
  .card:hover, .why-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
  .site-footer a:hover, .related a:hover { color: var(--accent); }
  .crumb a:hover { color: var(--text); }
}

/* ---- Scroll reveal (html.js set inline in <head>; no-JS pages never hide) ---- */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
  html.js .reveal.in { opacity: 1; transform: none; }
  html.js .cards .reveal:nth-child(2), html.js .why-grid .reveal:nth-child(2),
  html.js .order-steps .reveal:nth-child(2) { transition-delay: .07s; }
  html.js .cards .reveal:nth-child(3), html.js .why-grid .reveal:nth-child(3),
  html.js .order-steps .reveal:nth-child(3) { transition-delay: .14s; }
  html.js .why-grid .reveal:nth-child(4) { transition-delay: .21s; }
}

/* ---- Inline SVG icons (why-tiles, order steps) ---- */
.ico { width: 26px; height: 26px; stroke: var(--accent); fill: none;
       stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.why-tile .ico { margin-bottom: 12px; }
.order-steps .ico { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; margin-right: 7px; }

/* ---- Product cinematic hero (Central States-style pilot, R-Panel 2026-08-20)
   Full-bleed dark mill/product photo shifted right, left text column on a
   scrim. Same z-index rule as .statement-cine: the photo sits at z auto/0,
   the ::before scrim at z-index 1, copy at z-index 2. ---- */
.hero-product {
  position: relative; display: flex; align-items: flex-end; /* copy hugs the bottom - tight handoff to the next section */
  padding: 0; /* it's a <section>: kill the generic 120px section padding inside the hero */
  min-height: 50vh; overflow: hidden; background: var(--scrim); /* 85->66->56vh: Nur, twice - empty space */
}
.hero-product-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 50%;
}
@media (min-width: 701px) {
  /* Nur: full-bleed cover over a short hero over-zooms the 3:2 shot. Pin the
     photo right at near-native aspect and fade its left edge into the navy. */
  .hero-product-bg {
    left: auto; width: 60%; object-position: 60% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 14%);
  }
}
.hero-product::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(13,23,37,.94) 0%, rgba(19,32,50,.72) 28%, rgba(31,52,80,.10) 55%, rgba(31,52,80,0) 85%),
    linear-gradient(180deg, rgba(13,23,37,.30) 0%, rgba(13,23,37,0) 38%, rgba(31,52,80,.88) 90%, var(--bg) 100%);
}

/* Full-bleed product hero (Nur, purlins): photo edge-to-edge, light uniform dim */
@media (min-width: 701px) {
  .hero-product--full .hero-product-bg {
    left: 0; width: 100%; object-position: 50% 45%;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-product--full .eyebrow span {
    text-shadow: 0 1px 10px rgba(13,23,37,.9), 0 0 3px rgba(13,23,37,.7);
  }
  .hero-product--full::before {
    background:
      radial-gradient(ellipse 58% 72% at 23% 52%, rgba(13,23,37,.72) 0%, rgba(13,23,37,.45) 52%, rgba(13,23,37,0) 76%),
      linear-gradient(180deg, rgba(13,23,37,.18) 0%, rgba(13,23,37,0) 35%, rgba(31,52,80,.85) 92%, var(--bg) 100%);
  }
  /* busy textures (ribbed panels): linear side shade follows the ribs — no radial "stain" */
  .hero-product--dense.hero-product--full::before {
    background:
      linear-gradient(90deg, rgba(13,23,37,.78) 0%, rgba(13,23,37,.62) 30%, rgba(13,23,37,.22) 56%, rgba(13,23,37,0) 76%),
      linear-gradient(180deg, rgba(13,23,37,.15) 0%, rgba(13,23,37,0) 35%, rgba(31,52,80,.85) 92%, var(--bg) 100%);
  }
  .hero-product--dense .hero-product-bg { object-position: 50% 62%; }
  #st-hero .hero-product-bg { object-position: 45% 80%; } /* show the ground - scale (Nur) */
  #st-hero { min-height: 74vh; }
}

.hero-product-inner { position: relative; z-index: 2; width: 100%; padding: 44px 20px 40px; }
/* hierarchy rule (Nur): product hero H1 stays below the home hero's 56px */
.hero-product h1 {
  font-weight: 300; font-size: clamp(28px, 3.6vw, 47px);
  line-height: 1.06; letter-spacing: -0.04em;
  color: var(--text); max-width: 640px;
  text-shadow: 0 2px 18px rgba(10,18,30,.5);
}
.hero-product .sub {
  margin-top: 18px; font-size: 16px; line-height: 1.42;
  color: #D7DFEA; max-width: 520px;
  text-shadow: 0 1px 10px rgba(10,18,30,.55);
}
.hero-product .cta-row { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-product .cta-note { margin-top: 12px; font-size: 13px; color: #C4D0DF; text-shadow: 0 1px 8px rgba(10,18,30,.5); }
.hero-product .crumb { margin-bottom: 22px; }
/* half-step top gap (Nur: specs sit a touch lower under the hero) */
section.half-top { padding-top: calc(var(--gap-section) / 2); }
.hero-product + section.half-top { padding-top: calc(var(--gap-section) / 2); }

/* stitch adjacent sections together (Nur 2026-09-03: photos right under spec note) */
section.flush-bottom { padding-bottom: 20px; }
section.flush-top { padding-top: 10px; }

/* first section after a product hero sits close - no chasm (Nur 2026-08-20) */
.hero-product + section { padding-top: 20px; }
@media (max-width: 700px) { .hero-product + section { padding-top: 16px; } }
.hero-product .badge-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) {
  .hero-product { min-height: 46vh; }
  .hero-product::before { /* denser overall on phones: copy spans most of the frame */
    background:
      linear-gradient(180deg, rgba(13,23,37,.74) 0%, rgba(19,32,50,.48) 46%, rgba(31,52,80,.92) 88%, var(--bg) 100%);
  }
  /* WORK-16.5 variant A (Nur): full-screen cinema on photo heroes — tall frame, light
     veil up top, dense only in the copy zone; eyebrow gets a halo and drops its generic
     middle tag. Scoped to --full: the studs hero keeps the compact style. */
  /* WORK-16.8 «Оверлап-постер» (Нур, итерация 3, вариант A): фото в родных пропорциях,
     его низ растворяется в нейви ДО физической кромки (градиент достигает чистого
     var(--bg) на 88% высоты кадра — видимого шва не существует, линия не может резать
     буквы ни на одном кадре), текстовая группа стартует внутри зоны растворения.
     Refs: Apple TV movie detail 8cde1178, HBO Max f8c47df0. Desktop не тронут. */
  .hero-product--full { min-height: auto; display: block; }
  .hero-product--full .hero-product-bg { position: static; display: block;
    width: 100%; height: auto; filter: saturate(.8); }
  .hero-product--full picture { display: block; position: relative; }
  .hero-product--full picture::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,23,37,.18) 0%, rgba(13,23,37,0) 34%,
      rgba(13,23,37,.14) 52%, rgba(19,32,50,.68) 72%, var(--bg) 88%); }
  /* яркие рёбра крыши: r-panel получает более плотную середину растворения,
     чтобы бровь и первая строка H1 не тонули на светлом металле */
  #rp-hero picture::after { background: linear-gradient(180deg, rgba(13,23,37,.18) 0%,
      rgba(13,23,37,.02) 34%, rgba(13,23,37,.34) 52%, rgba(19,32,50,.76) 72%, var(--bg) 88%); }
  .hero-product--full::before { display: none; }
  .hero-product--full .hero-product-inner { margin-top: -96px; padding-top: 0; }
  .hero-product--full .eyebrow span:nth-child(2) { display: none; }
  .hero-product--full .eyebrow span {
    text-shadow: 0 1px 10px rgba(13,23,37,.9), 0 0 3px rgba(13,23,37,.7); }
}

/* ---- Photo composition rework, R-Panel pilot (2026-08-20) ----
   Refero ON.energy style (1d0983e0, = DESIGN.md): photos live as full-bleed
   acts or inside split-layouts — never as orphan strips glued to content. */

/* Full-bleed photo band with a short punch (light cousin of .statement-cine;
   same layering: img z-auto, ::before scrim z-1, copy z-2) */
.photo-band { position: relative; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; background: var(--bg); }
.photo-band .band-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
/* Andercore technique (Refero 15fd028d): a flat dark tint over the whole
   frame + both edges melting into the page navy, so bands read as acts of
   one system rather than pasted photos */
.photo-band::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(31,52,80,.06) 18%, rgba(13,23,37,.04) 40%, rgba(13,23,37,.92) 82%, var(--bg) 100%),
    rgba(13, 23, 37, .18); }
.photo-band-inner { position: relative; z-index: 2; width: 100%; padding: 120px 0 36px; }
.band-punch {
  font-weight: 300; font-size: clamp(26px, 3.4vw, 42px); /* Nur: the punch was getting lost */
  line-height: 1.12; letter-spacing: -0.03em; color: #ffffff;
  text-shadow: 0 2px 10px rgba(6,12,20,.95), 0 0 44px rgba(6,12,20,.8);
}
.band-punch strong { font-weight: 400; color: var(--accent); }
@media (max-width: 700px) {
  .photo-band { min-height: 400px; }
  .photo-band-inner { padding-top: 96px; }
}


/* ---- Editorial duo (approved layout C, Refero: Rivian e91a5840 caption grid) ---- */
.duo-grid { display: grid; gap: 28px; }
@media (min-width: 820px) { .duo-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.duo-grid figure { margin: 0; }
.duo-grid .ph { border-radius: var(--r-img); overflow: hidden; aspect-ratio: 4 / 3; }
.duo-grid .ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.duo-cap { margin-top: 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.duo-cap strong { font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; }
.duo-cap span { font-size: 13px; color: var(--muted); }

/* Mini drawings in What We Roll cards */
.card-fig { height: 96px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.card-fig svg { height: 100%; width: auto; max-width: 100%; }
/* Photo variant of a card figure — taller than the 96px svg band so the product reads; hero-matching navy grade */
.card-fig.card-photo { position: relative; display: block; height: auto; aspect-ratio: 11 / 5; border-radius: var(--r-img); overflow: hidden; background: var(--panel); }
.card-fig.card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.8); }
.card-fig.card-photo::after { content: ''; position: absolute; inset: 0; background: rgba(31, 52, 80, .18); pointer-events: none; }

/* ---- Statement (cinematic): full-bleed mill photo, text on dark scrim ---- */
.statement-cine { position: relative; display: flex; align-items: flex-end; min-height: 520px; overflow: hidden; }
.statement-cine .cine-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.statement-cine::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(22,38,60,.15) 0%, rgba(22,38,60,.28) 45%, rgba(13,23,37,.93) 70%, var(--scrim) 100%); }
.cine-inner { position: relative; z-index: 2; padding: 360px 0 44px; width: 100%; }
.cine-big {
  font-weight: 300;
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.13;
  letter-spacing: -0.04em;
  color: #eeeeee;
  max-width: 900px;
}
.cine-big strong { font-weight: 300; color: var(--accent); }
.cine-punch { list-style: none; margin: 26px 0 0; display: grid; gap: 8px; }
.cine-punch li { font-weight: 300; font-size: clamp(17px, 2vw, 22px); letter-spacing: -0.02em; color: #C2CFDF; }
.cine-punch li strong { font-weight: 400; color: #eeeeee; }
@media (min-width: 960px) {
  .statement-cine { min-height: 640px; }
  .cine-inner { padding-top: 340px; }
  .cine-punch { grid-template-columns: repeat(3, auto); justify-content: start; gap: 40px; }
}

/* ---- Photo slots (hidden until tonight's photos land; aspect fixed = CLS 0) ----
   Grade: saturate(.8) + navy wash overlay, matches hero treatment. */
.photo-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) {
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .photo-grid--three { grid-template-columns: repeat(3, 1fr); }
  /* a lone photo (other slots still hidden) centers instead of hugging the left */
  .photo-grid:has(.photo-frame[hidden]) > .photo-frame:not([hidden]) { grid-column: 1 / -1; max-width: 720px; justify-self: center; width: 100%; }
}
.photo-frame { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-img);
               overflow: hidden; background: var(--panel); }
.photo-frame.wide { aspect-ratio: 16 / 9; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.photo-frame::after { content: ''; position: absolute; inset: 0; background: rgba(31, 52, 80, .18); pointer-events: none; }
.photo-frame figcaption {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  background: rgba(22, 38, 60, .82); color: #E8EEF6;
  font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: var(--r);
}

/* =====================================================================
   Mobile pack + ES version (2026-08-04)
   ===================================================================== */

/* ---- Language switcher: compact pill in the header ---- */
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: 48px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  color: var(--muted); font-size: 14px; font-weight: 500;
  text-decoration: none; flex: 0 0 auto;
}
.lang-switch:hover { border-color: var(--accent); color: var(--text); }
.header-phone { min-height: 48px; justify-content: center; }
.phone-link { padding: 11px 0; margin: -11px 0; } /* ~48px tap area, same layout */
@media (max-width: 359px) { .phone-cap { display: none; } }

/* ---- Tap targets >=48px: footer, related links, crumbs ---- */
.site-footer p { line-height: 1.6; }
.site-footer a, .related a { display: inline-block; padding: 16px 6px; margin: -12px -2px; }
.crumb a { display: inline-block; padding: 14px 0; margin: -10px 0; }
.quote-form .consent input { width: 22px; height: 22px; flex: 0 0 22px; }
.quote-form .consent { padding: 6px 0; }

/* ---- Inline field errors ---- */
.field-err { color: var(--err); font-size: 13px; font-weight: 400; margin-top: 2px; }
.quote-form input.invalid, .quote-form textarea.invalid { border-color: var(--err); }
.quote-form input.invalid:focus { outline-color: var(--err); }

/* ---- ES trust line under hero CTAs ---- */
.es-note { margin-top: 10px; font-size: 13px; color: #C4D0DF; text-shadow: 0 1px 8px rgba(10,18,30,.5); }
.es-note a { color: var(--accent); text-underline-offset: 3px; display: inline-block; padding: 15px 0; margin: -15px 0; }

/* ---- Pickup: map deeplinks, copy address, vCard ---- */
.addr-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-copy {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 8px 14px;
  background: #fff; color: var(--light-text);
  border: 1px solid #b9b9b9; border-radius: var(--r);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.btn-copy:hover { border-color: var(--accent); }
.btn-copy.copied { border-color: var(--ok-deep); color: var(--ok-deep); }
.btn-vcard {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 10px 16px;
  background: #fff; color: var(--light-text);
  border: 1.5px solid var(--accent); border-radius: var(--r);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.btn-vcard:hover { background: #FFF6DC; }
.site-footer .btn-vcard {
  background: transparent; color: var(--text); border-color: var(--accent);
  margin: 10px 0 0; padding: 10px 16px;
}
.site-footer .btn-vcard:hover { background: rgba(240,183,33,.15); }

/* =====================================================================
   Cut-list calculator (2026-08-19) — remove .demo-banner with real prices
   ===================================================================== */
.demo-banner {
  background: #16263c;
  border-bottom: 1px solid #3A5478;
  color: #A9B8CC; font-weight: 400; font-size: 13px; letter-spacing: .02em;
  text-align: center; padding: 10px 16px;
}
.demo-banner strong { color: var(--accent); font-weight: 600; }
.hero--calc { padding: 36px 0 28px; }
/* small gold tag next to embedded-calculator section titles while pricing is placeholder */
.calc-preview-note {
  display: inline-block; vertical-align: middle; margin-left: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 3px 8px;
  white-space: nowrap;
}
.hero--calc + section { padding-top: 24px; } /* pull the builder up under the hero copy */
.hero--calc h1 { font-size: clamp(28px, 6.5vw, 44px); }

.calc-grid { display: grid; gap: 20px; }
@media (min-width: 960px) { .calc-grid { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } }

.calc-builder { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; }
.calc-builder h2 { font-size: 20px; font-weight: 400; margin-bottom: 16px; color: var(--text); }
.calc-builder label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.calc-builder select, .calc-builder input {
  width: 100%; padding: 12px; font: inherit; font-size: 16px;
  color: var(--text); background: var(--bg-deep);
  border: 1px solid var(--line); border-radius: var(--r);
  min-height: 48px;
}
.calc-builder select:focus, .calc-builder input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.calc-form { display: grid; gap: 14px; }
.calc-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.calc-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.calc-builder .btn-primary { width: 100%; border: 0; cursor: pointer; font-size: 16px; }
.calc-add-err { color: var(--err-soft); font-size: 13px; min-height: 1em; }

.calc-lines { display: grid; gap: 10px; margin-top: 20px; }
.calc-empty { color: var(--muted); font-size: 14px; padding: 14px 2px; }
.calc-empty a { color: var(--accent); }
.calc-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 14px 16px;
}
.calc-line-info { display: grid; gap: 2px; min-width: 0; }
.calc-line-info strong { font-size: 15px; font-weight: 500; color: var(--text); }
.calc-line-info span { font-size: 13px; color: var(--muted); }
.calc-line-money { display: grid; gap: 2px; text-align: right; }
.calc-line-total { font-size: 16px; font-weight: 600; color: var(--accent); }
.calc-line-per { font-size: 12px; color: var(--muted); }
.calc-line-actions { display: flex; gap: 6px; }
.calc-mini {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-deep); color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r);
  font-size: 15px; cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.calc-mini:hover { border-color: var(--accent); color: var(--text); }

.calc-summary { background: var(--bg-deep); border: 1.5px solid var(--accent); border-radius: var(--r-card); padding: 20px; }
@media (min-width: 960px) { .calc-summary { position: sticky; top: 90px; } }
.calc-summary h2 { font-size: 18px; font-weight: 400; color: var(--muted); margin-bottom: 6px; }
.calc-total { font-size: 40px; font-weight: 300; letter-spacing: -0.02em; color: var(--text); }
.calc-total-note { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.calc-total-note strong { color: var(--accent); font-weight: 600; }
.calc-summary .quote-form { margin-top: 18px; max-width: none; }
.calc-summary .quote-form label { color: var(--muted); }
.calc-summary .quote-form input {
  background: var(--panel); color: var(--text); border-color: var(--line);
}
.calc-summary hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* ---- /q quote page ---- */
.q-page { padding: 36px 0 var(--gap-section); background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 40%); }
.q-wrap { max-width: 720px; }
.q-title { font-size: clamp(26px, 6vw, 36px); font-weight: 300; letter-spacing: -0.02em; color: var(--text); }
.q-title .calc-preview-note { vertical-align: 6px; }
.q-summary .calc-total { font-size: 34px; } /* WORK-20.1: never larger than .q-title (36px) */
.q-meta { margin: 10px 0 22px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.q-summary { margin-top: 20px; position: static; }
.q-cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.q-cta .btn-primary, .q-cta .btn-ghost { flex: 1 1 auto; text-align: center; font-size: 15px; }
.q-cta button.btn-ghost { font: inherit; font-size: 15px; cursor: pointer; }
.quote-link { display: inline-block; margin-top: 6px; font-weight: 600; color: inherit; text-underline-offset: 3px; }

/* ---- WORK-16: conversion layer D (Nur's pick) ---- */
.open-status { font-size: 13px; font-weight: 500; }
.hero .open-status, .hero-product .open-status { margin-top: 14px; color: #D7DFEA; text-shadow: 0 1px 8px rgba(10,18,30,.5); }
.open-status.is-open::before, .open-status.is-closed::before { content: ''; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.open-status.is-open::before { background: var(--ok); }
.open-status.is-closed::before { background: var(--muted); }
.es-note-low { display: none; text-align: center; font-size: 13px; padding: 0 16px 28px; }
@media (max-width: 899px) {
  /* Quiet mobile hero: badges and language note live below the fold */
  .hero .badge-row, .hero .es-note { display: none; }
  .es-note-low { display: block; }
  /* Callbar appears only after the hero's own CTA pair is scrolled away
     (body.has-hero is set by js/cro.js; pages without a hero keep the bar) */
  body.has-hero .callbar { transform: translateY(110%); }
  body.has-hero.past-hero .callbar { transform: none; }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) { .callbar { transition: transform .3s ease; } }
/* Home cards: one action — the whole card is the link to the product page */
a.card { display: block; color: inherit; text-decoration: none; }
.card-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; /* WORK-18.1: pins to card bottom - even grid */
  color: var(--accent); font-size: 14px; font-weight: 500; }
.card-more .arr { transition: transform .18s ease; }
a.card:hover .card-more .arr, a.card:focus-visible .card-more .arr { transform: translateX(3px); }

/* ---- WORK-16.2: panoramic ordering band (purlins) — steps live in the sky ---- */
.ordering-band { position: relative; overflow: hidden; background: var(--bg); }
.ordering-band .ob-bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%; filter: saturate(.8); }
/* flat brand tint + gentle top veil so white copy sits calmly on open sky */
.ordering-band::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,23,37,.46) 0%, rgba(13,23,37,.32) 34%, rgba(13,23,37,.16) 55%, rgba(13,23,37,.38) 100%),
              rgba(13, 23, 37, .14); }
.ordering-band .ob-inner { position: relative; z-index: 2; }
@media (min-width: 720px) {
  .ordering-band { min-height: 70vh; display: flex; align-items: flex-start; }
  .ordering-band .ob-inner { padding-top: 18px; width: 100%; }
  .ordering-band .section-title { text-shadow: 0 1px 12px rgba(6,12,20,.55); }
  /* steps float on the sky: no panels, no borders — type only (DESIGN.md: no boxes) */
  .ordering-band .order-steps li { background: none; border: none; padding: 0 24px 0 0;
    color: #DCE4EE; text-shadow: 0 1px 10px rgba(6,12,20,.5); }
  .ordering-band .order-steps strong { color: #fff; }
}
@media (max-width: 719px) {
  /* mobile "card + timeline" (WORK-16.3, Nur-approved variant B): title, framed photo
     card, then a vertical gold timeline on clean navy — photo and type never overlap.
     Refs: Raycast careers 9640e9be, Instacart d030e2b2, 601 Inc 8c5f5afd. */
  .ordering-band { display: flex; flex-direction: column; }
  .ordering-band::before { display: none; }
  .ordering-band picture { order: 2; display: block; position: relative;
    margin: 0 20px; border-radius: var(--r-img); overflow: hidden; }
  .ordering-band picture::after { content: ''; position: absolute; inset: 0;
    background: rgba(31,52,80,.18); pointer-events: none; }
  .ordering-band .ob-bg { position: static; display: block;
    width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 34%; }
  .ordering-band .ob-inner { display: contents; }
  .ordering-band .section-title { order: 1; margin: 0 20px 18px; }
  .ordering-band .order-steps { order: 3; position: relative; gap: 28px; margin: 28px 20px 0; }
  .ordering-band .order-steps::before { content: ''; position: absolute; left: 17px;
    top: 12px; bottom: 12px; width: 2px;
    background: linear-gradient(180deg, rgba(240,183,33,.55), rgba(240,183,33,.10)); }
  .ordering-band .order-steps li { background: none; border: none; display: block;
    position: relative; padding: 0 0 0 54px; }
  .ordering-band .order-steps .num { position: absolute; left: 0; top: 0; margin-top: 0;
    width: 36px; height: 36px; background: var(--bg); border: 1px solid var(--accent);
    color: var(--accent); font-size: 14px; font-weight: 500; }
  /* the line stops at the last node */
  .ordering-band .order-steps li:last-child::after { content: ''; position: absolute;
    left: 15px; width: 6px; top: 38px; bottom: -14px; background: var(--bg); }
}

/* ---- FAQ accordion (Task 4) ---- */
.faq-list { max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative;
  color: #fff; font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-size: 22px; font-weight: 300; transition: transform 180ms; }
.faq-item[open] summary::after { content: '\2013'; }
.faq-item p { color: var(--muted); font-size: 15px; line-height: 1.5; padding: 0 0 18px; max-width: 720px; }

/* ---- WORK-17: open pricing, steel studs (per-product go-live) ---- */
/* gold price flag next to the product-hero H1 */
.price-flag {
  display: inline-flex; align-items: baseline; gap: 7px;
  margin-top: 16px; padding: 7px 16px;
  background: rgba(22, 38, 60, .55);
  border: 1px solid var(--accent); border-radius: 16px;
  color: var(--accent); font-size: 14px; font-weight: 400;
}
.price-flag strong { font-weight: 500; font-size: 19px; letter-spacing: -0.01em; }
/* compact $/ft table — same panel/line grammar as .spec-table */
.price-wrap { border: 1px solid var(--line); border-radius: var(--r-card); overflow-x: auto; max-width: 760px; }
.price-table { width: 100%; border-collapse: collapse; background: var(--panel); min-width: 480px; }
.price-table th, .price-table td {
  padding: 9px 16px; border-bottom: 1px solid var(--line);
  font-size: 14px; font-weight: 400; text-align: left; line-height: 1.35;
}
.price-table thead th { color: var(--muted); font-weight: 500; font-size: 13px; }
.price-table tbody th { color: var(--muted); font-weight: 500; white-space: nowrap; }
.price-table td { color: var(--text); white-space: nowrap; }
.price-table tr:last-child th, .price-table tr:last-child td { border-bottom: 0; }
.price-table .unit { color: var(--muted); font-size: 12px; font-weight: 400; }
.price-note { margin-top: 12px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.price-note a { color: var(--accent); }
.price-cta { margin-top: 20px; }

/* WORK-17.3 (Nur): lift a section one rhythm step — top padding off, the
   junction keeps only the previous section's bottom --gap-section */
section.step-up { padding-top: 0; }

/* ---- WORK-21: steel-studs page rebuild (studs pages only; cache ?v=91001) ---- */
.sub-lede { max-width: 760px; margin: -8px 0 24px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.sub-lede strong { color: var(--text); font-weight: 500; }
.section-light .sub-lede { color: var(--light-muted); }
.section-light .sub-lede strong { color: var(--light-text); }
.prose { max-width: 720px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.prose p + p { margin-top: 14px; }
.prose strong { color: var(--text); font-weight: 500; }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.section-light .prose { color: var(--light-muted); }
.section-light .prose strong { color: var(--light-text); }
.sms-example { display: inline-block; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.5; color: #DCE4EE; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px;
  margin-top: 8px; overflow-wrap: anywhere; }
.tile-cta { display: inline-block; margin-top: 12px; padding: 6px 0; color: var(--accent);
  font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.ob-sub { max-width: 760px; margin: -6px 0 26px; font-size: 15px; line-height: 1.55;
  color: #DCE4EE; text-shadow: 0 1px 8px rgba(13,23,37,.6); }

/* =====================================================================
   WORK-22: studs page compression (Nur 2026-10-01: "too much text") —
   sections merged 11→7, prose → structured rows/chips. Cache ?v=91002.
   ===================================================================== */
/* sub-blocks inside a merged section: smaller than .section-title, same restraint */
.block-title { font-weight: 400; font-size: 20px; letter-spacing: -0.01em;
  color: var(--text); margin: 44px 0 8px; }
.block-lede { max-width: 760px; margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.block-lede strong { color: var(--text); font-weight: 500; }
/* Full-gauge-vs-EQ compact card (replaces the old prose + crane photo section) */
.eq-card { max-width: 760px; margin-top: 44px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 22px; }
.eq-card h3 { font-weight: 500; font-size: 17px; letter-spacing: -0.01em;
  color: var(--accent); margin-bottom: 10px; }
.eq-card p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.eq-card p + p { margin-top: 8px; }
.eq-card strong { color: var(--text); font-weight: 500; }
.eq-card a { color: var(--accent); text-underline-offset: 3px; }
/* who-buys chip row inside the ordering band (replaces the 5 use-case tiles) */
.who-line { margin-top: 28px; font-size: 12px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: #C4D0DF; text-shadow: 0 1px 8px rgba(13,23,37,.6); }
.who-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ordering-band .cta-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.info-box .pickup-fast { margin-top: 16px; }
/* long CTA labels (ES "Use la calculadora — …") must wrap, not widen the page */
.price-cta .btn-primary { white-space: normal; text-align: center; }
@media (max-width: 719px) {
  /* mobile band is display:contents + flex order (card+timeline, WORK-16.3) —
     give the typed blocks explicit slots and restore the side padding that
     display:contents dissolves (ob-sub/cta used to land above the title, bare) */
  .ordering-band .ob-sub { order: 3; margin: 18px 20px 0; }
  .ordering-band .who-line { order: 4; margin: 28px 20px 0; }
  .ordering-band .who-chips { order: 4; margin: 10px 20px 0; }
  .ordering-band .cta-row { order: 5; margin: 26px 20px 0; }
}