/* ================================================================
   Vellum & Rule — Design A · roofing-st-louis
   Slot-remap contract: [data-design="a"] only. ZERO [data-design="a"].
   ================================================================ */

/* ----------------------------------------------------------------
   DESIGN TOKENS
   ---------------------------------------------------------------- */
[data-design="a"] {
  --design-a-primary: var(--vr-blueprint-600);

  /* Color */
  --vr-vellum-50:      #f8f4ec;
  --vr-vellum-100:     #f1ebdd;
  --vr-vellum-200:     #e7dfc9;
  --vr-graphite-900:   #1a1814;
  --vr-graphite-700:   #3a352c;
  --vr-graphite-500:   #6b6558;
  --vr-graphite-300:   #a59f8f;
  --vr-blueprint-600:  #1d4f8b;
  --vr-blueprint-500:  #2c6cb0;
  --vr-blueprint-100:  #d3e3f5;
  --vr-vermillion-600: #b8392e;
  --vr-vermillion-100: #f3d8d3;
  --vr-field-tan:      #c9b896;
  --vr-success-700:    #3f6b4a;

  /* Typography */
  --vr-font-display: "Bricolage Grotesque","Arquivo Narrow",system-ui,sans-serif;
  --vr-font-body:    "Newsreader","Source Serif Pro",Georgia,serif;
  --vr-font-mono:    "DM Mono","JetBrains Mono",monospace;

  /* Spacing */
  --vr-tick:      4px;
  --vr-mark:      8px;
  --vr-rule:      12px;
  --vr-bay:       24px;
  --vr-frame:     40px;
  --vr-grid:      64px;
  --vr-span:      96px;
  --vr-storey:    128px;
  --vr-elevation: 192px;

  /* Radius */
  --vr-radius-0:     0;
  --vr-radius-1:     2px;
  --vr-radius-2:     4px;
  --vr-stamp-radius: 6px;
  --vr-pill:         999px;

  /* Shadows */
  --vr-shadow-paper:       0 1px 3px rgba(26,24,20,.08), 0 1px 2px rgba(26,24,20,.06);
  --vr-shadow-paper-lift:  0 4px 12px rgba(26,24,20,.12), 0 2px 4px rgba(26,24,20,.08);
  --vr-shadow-stamp-imprint: inset 0 1px 3px rgba(26,24,20,.18);

  /* Easing */
  --vr-ease-settle:   cubic-bezier(0.22,0.61,0.36,1);
  --vr-ease-register: cubic-bezier(0.65,0,0.35,1);
  --vr-ease-unfurl:   cubic-bezier(0.4,0,0.2,1);
  --vr-ease-stamp:    cubic-bezier(0.18,1.4,0.4,1);
  --vr-ease-breath:   cubic-bezier(0.45,0,0.55,1);

  /* Durations */
  --vr-dur-feedback:    160ms;
  --vr-dur-register:    280ms;
  --vr-dur-press:       420ms;
  --vr-dur-unfurl:      720ms;
  --vr-dur-draw:        1600ms;
  --vr-dur-breath-fast: 5s;
  --vr-dur-breath-mid:  14s;
  --vr-dur-breath-slow: 28s;
}

/* ----------------------------------------------------------------
   MOBILE OVERFLOW GUARD (HARD CONTRACT)
   ---------------------------------------------------------------- */
[data-design="a"].dq-design,
[data-design="a"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}
[data-design="a"].dq-design * {
  min-width: 0;
}
[data-design="a"].dq-design img,
[data-design="a"].dq-design svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------------------
   BASE RESET & PAGE CANVAS
   ---------------------------------------------------------------- */
[data-design="a"].dq-design {
  background: var(--vr-vellum-50);
  color: var(--vr-graphite-900);
  font-family: var(--vr-font-body);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------------
   CENTERED CONTENT CONTAINER
   ---------------------------------------------------------------- */
[data-design="a"] .vr-header__inner,
[data-design="a"] .vr-hero__inner,
[data-design="a"] .vr-funnel__inner,
[data-design="a"] .vr-services__inner,
[data-design="a"] .vr-portfolio__inner,
[data-design="a"] .vr-mid-cta__inner,
[data-design="a"] .vr-roof-systems__inner,
[data-design="a"] .vr-process__inner,
[data-design="a"] .vr-about__inner,
[data-design="a"] .vr-service-area__inner,
[data-design="a"] .vr-footer__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(var(--vr-bay), 5vw, var(--vr-span));
}

/* ================================================================
   E1 — HEADER "Title Block"
   ================================================================ */
[data-design="a"] .vr-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--vr-vellum-50);
  border-bottom: 1px solid var(--vr-graphite-300);
}

[data-design="a"] .vr-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  overflow: hidden;
}

/* Blueprint-grid ambient canvas */
[data-design="a"] .vr-header__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
[data-design="a"] .vr-header__grid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Logo */
[data-design="a"] .vr-header__logo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.15;
}
[data-design="a"] .vr-header__logo-firm {
  font-family: var(--vr-font-display);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vr-graphite-900);
}
[data-design="a"] .vr-header__logo-mark {
  font-family: var(--vr-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--vr-graphite-500);
  text-transform: uppercase;
}

/* Hamburger */
[data-design="a"] .vr-header__burger {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--vr-rule);
}
[data-design="a"] .vr-header__burger-bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--vr-graphite-700);
  transform-origin: center;
  transition:
    transform var(--vr-dur-register) var(--vr-ease-settle),
    opacity   var(--vr-dur-register) var(--vr-ease-settle);
}
[data-design="a"] .vr-header__burger[aria-expanded="true"] .vr-header__burger-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
[data-design="a"] .vr-header__burger[aria-expanded="true"] .vr-header__burger-bar:nth-child(2) {
  transform: scaleX(0);
}
[data-design="a"] .vr-header__burger[aria-expanded="true"] .vr-header__burger-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Nav drawer */
[data-design="a"] .vr-nav-drawer {
  position: fixed;
  inset-block: 0;
  right: 0;
  width: min(340px, 90vw);
  background: var(--vr-vellum-50);
  border-left: 1px solid var(--vr-graphite-300);
  z-index: 200;
  transform: translateX(100%);
  transition: transform var(--vr-dur-unfurl) var(--vr-ease-unfurl);
  will-change: transform;
  overflow-y: auto;
  overscroll-behavior: contain;
}
[data-design="a"] .vr-nav-drawer.is-open {
  transform: translateX(0);
}

[data-design="a"] .vr-nav-drawer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--vr-bay);
  padding: var(--vr-frame) var(--vr-bay);
  padding-top: var(--vr-bay);
  min-height: 100%;
}
[data-design="a"] .vr-nav-drawer__close {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--vr-graphite-700);
}
[data-design="a"] .vr-nav-drawer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vr-mark);
}
[data-design="a"] .vr-nav-link {
  display: block;
  font-family: var(--vr-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--vr-graphite-700);
  text-decoration: none;
  padding-block: var(--vr-mark);
  border-bottom: 1px solid var(--vr-vellum-200);
  transition: color var(--vr-dur-feedback) var(--vr-ease-settle);
}
[data-design="a"] .vr-nav-drawer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--vr-rule);
  margin-top: auto;
}
[data-design="a"] .vr-nav-drawer__phone {
  font-family: var(--vr-font-mono);
  font-size: 16px;
  color: var(--vr-graphite-700);
  text-decoration: none;
  letter-spacing: 0.04em;
}
[data-design="a"] .vr-nav-drawer__cta {
  text-align: center;
}

/* Overlay */
[data-design="a"] .vr-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,24,20,.45);
  z-index: 190;
  display: none;
}
[data-design="a"] .vr-nav-overlay.is-visible {
  display: block;
}

/* ================================================================
   E3 + E2 — HERO "Elevation Drift" + "Stamped & Sealed"
   ================================================================ */
[data-design="a"] .vr-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(520px, 80vh, 760px);
  display: flex;
  align-items: center;
  background: var(--vr-vellum-50);
  overflow: hidden;
}

/* Backdrop — behind everything, never above text */
[data-design="a"] .vr-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
[data-design="a"] .vr-hero__elev-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.28;
}

/* Scroll-parallax: the backdrop drifts at 40% scroll speed (JS writes --vr-scroll-y) */
[data-design="a"] .vr-hero__backdrop {
  transform: translateY(calc(var(--vr-scroll-y, 0px) * 0.4));
  will-change: transform;
}

/* SVG path animation definitions */
[data-design="a"] .vr-ep {
  fill: none;
  stroke: var(--vr-blueprint-600);
  stroke-linecap: square;
}
[data-design="a"] .vr-ep--ground {
  stroke-width: 2;
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  animation: vr-ep-draw 2s var(--vr-ease-unfurl) 0s infinite;
}
[data-design="a"] .vr-ep--found {
  stroke-width: 1.2;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: vr-ep-draw 2.4s var(--vr-ease-unfurl) 0.3s infinite;
}
[data-design="a"] .vr-ep--walls {
  stroke-width: 1.2;
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  animation: vr-ep-draw 3s var(--vr-ease-unfurl) 0.6s infinite;
}
[data-design="a"] .vr-ep--roof {
  stroke-width: 1.8;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: vr-ep-draw 3.2s var(--vr-ease-unfurl) 1.0s infinite;
}
[data-design="a"] .vr-ep--ridge {
  stroke-width: 2.4;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: vr-ep-draw 0.8s var(--vr-ease-settle) 1.7s infinite;
}
[data-design="a"] .vr-ep--courses {
  stroke-width: 0.7;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  opacity: 0.55;
  animation: vr-ep-draw 2s var(--vr-ease-unfurl) 2.0s infinite;
}
[data-design="a"] .vr-ep--chimney {
  stroke-width: 1.2;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: vr-ep-draw 1.6s var(--vr-ease-unfurl) 1.4s infinite;
}
[data-design="a"] .vr-ep--windows {
  stroke-width: 1;
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
  animation: vr-ep-draw 1.8s var(--vr-ease-unfurl) 1.8s infinite;
}
[data-design="a"] .vr-ep--door {
  stroke-width: 1;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: vr-ep-draw 1.6s var(--vr-ease-unfurl) 2.0s infinite;
}
[data-design="a"] .vr-ep--dim {
  stroke-width: 0.8;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  opacity: 0.6;
  animation: vr-ep-draw 2.5s var(--vr-ease-unfurl) 2.4s infinite;
}
[data-design="a"] .vr-ep-text {
  fill: var(--vr-blueprint-600);
  font-family: var(--vr-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  animation: vr-ep-text-in 1s var(--vr-ease-settle) 5s forwards;
  opacity: 0;
}

@keyframes vr-ep-draw {
  0%   { stroke-dashoffset: 1500; opacity: 0.1; }
  6%   { opacity: 0.9; }
  55%  { stroke-dashoffset: 0; opacity: 0.85; }
  88%  { stroke-dashoffset: 0; opacity: 0.7; }
  100% { stroke-dashoffset: 1500; opacity: 0.1; }
}
@keyframes vr-ep-text-in {
  from { opacity: 0; }
  to   { opacity: 0.7; }
}

/* Hero text container — z-index above backdrop */
[data-design="a"] .vr-hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
}

[data-design="a"] .vr-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--vr-bay);
  padding-block: clamp(var(--vr-span), 10vh, var(--vr-storey));
  max-width: 680px;
}

/* HARD CONTRACT: all hero text opacity:1 at first paint */
[data-design="a"] .vr-hero__overline {
  font-family: var(--vr-font-mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vr-graphite-500);
  opacity: 1;
  margin: 0;
}
[data-design="a"] .vr-hero__headline {
  font-family: var(--vr-font-display);
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--vr-graphite-900);
  opacity: 1;
  margin: 0;
}
[data-design="a"] .vr-hero__subtitle {
  font-family: var(--vr-font-body);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--vr-graphite-700);
  opacity: 1;
  margin: 0;
  max-width: 520px;
}

[data-design="a"] .vr-hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vr-bay);
  opacity: 1;
}
[data-design="a"] .vr-hero__phone {
  font-family: var(--vr-font-mono);
  font-size: clamp(15px, 1.2vw, 17px);
  letter-spacing: 0.04em;
  color: var(--vr-graphite-700);
  text-decoration: none;
}

/* ================================================================
   E2 — BUTTON "Stamped & Sealed"
   ================================================================ */
[data-design="a"] .vr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--vr-rule) var(--vr-frame);
  border-radius: var(--vr-radius-1);
  font-family: var(--vr-font-display);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  transition:
    transform     var(--vr-dur-feedback) var(--vr-ease-settle),
    box-shadow    var(--vr-dur-feedback) var(--vr-ease-settle);
}

[data-design="a"] .vr-btn--primary {
  background: var(--vr-blueprint-600);
  color: #fff;
  box-shadow:
    0 0 0 0 rgba(29,79,139,0),
    var(--vr-shadow-paper);
  animation: vr-cta-breath var(--vr-dur-breath-fast) var(--vr-ease-breath) infinite;
}

[data-design="a"] .vr-btn--secondary {
  background: transparent;
  color: var(--vr-blueprint-600);
  border: 1.5px solid var(--vr-blueprint-600);
}

/* Stamp label / received spans */
[data-design="a"] .vr-btn__stamped {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-family: var(--vr-font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--vr-vermillion-600);
  background: rgba(248,244,236,0.92);
}
[data-design="a"] .vr-btn__stamped.is-visible {
  display: flex;
  animation: vr-stamp-flash var(--vr-dur-press) var(--vr-ease-stamp) forwards;
}

@keyframes vr-cta-breath {
  0%,100% { box-shadow: 0 0 0 0 rgba(29,79,139,.0),  var(--vr-shadow-paper); }
  50%      { box-shadow: 0 0 0 6px rgba(29,79,139,.15), var(--vr-shadow-paper-lift); }
}

@keyframes vr-stamp-flash {
  0%   { transform: scale(0.96); }
  40%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Hover / focus — motion-gated */
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .vr-btn--primary:hover {
    background: var(--vr-blueprint-500);
    transform: translateY(-1px);
    box-shadow: var(--vr-shadow-paper-lift);
  }
  [data-design="a"] .vr-btn--secondary:hover {
    background: var(--vr-blueprint-100);
    transform: translateY(-1px);
  }
  [data-design="a"] .vr-btn:active {
    transform: scale(0.97);
  }
  [data-design="a"] .vr-nav-link:hover {
    color: var(--vr-blueprint-600);
  }
}
[data-design="a"] .vr-btn:focus-visible {
  outline: 2px solid var(--vr-blueprint-600);
  outline-offset: 3px;
}

/* ================================================================
   E6 — POINTER "Dimension Line"
   ================================================================ */
[data-design="a"] .vr-pointer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: var(--vr-bay);
  cursor: pointer;
  opacity: 1;
  min-height: 200px;
}

[data-design="a"] .vr-pointer__svg {
  display: block;
  overflow: visible;
}

[data-design="a"] .vr-ptr-line {
  stroke: var(--vr-blueprint-600);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: vr-ptr-draw 1.6s var(--vr-ease-unfurl) 0.2s forwards;
}
[data-design="a"] .vr-ptr-tick {
  stroke: var(--vr-blueprint-600);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: vr-ptr-draw 0.4s var(--vr-ease-settle) 1.8s forwards;
}
[data-design="a"] .vr-ptr-chevron {
  fill: none;
  stroke: var(--vr-blueprint-600);
  stroke-width: 1.5;
  animation: vr-ptr-drift 5s var(--vr-ease-breath) 2s infinite;
}
[data-design="a"] .vr-ptr-label {
  fill: var(--vr-blueprint-600);
  font-family: var(--vr-font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  opacity: 1;
}

@keyframes vr-ptr-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes vr-ptr-drift {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(4px); }
}

/* ================================================================
   E5 — FUNNEL "Project Intake"
   ================================================================ */
[data-design="a"] .vr-funnel {
  background: var(--vr-vellum-100);
  border-top: 1px solid var(--vr-graphite-300);
  border-bottom: 1px solid var(--vr-graphite-300);
  padding-block: clamp(var(--vr-frame), 6vh, var(--vr-span));
}

[data-design="a"] .vr-funnel__inner {
  max-width: 640px;
}

[data-design="a"] .vr-funnel__header {
  display: flex;
  align-items: center;
  gap: var(--vr-bay);
  margin-bottom: var(--vr-frame);
}
[data-design="a"] .vr-funnel__project-label {
  font-family: var(--vr-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--vr-graphite-500);
  white-space: nowrap;
}
[data-design="a"] .vr-funnel__progress {
  flex: 1;
  height: 2px;
  background: var(--vr-vellum-200);
  border-radius: 1px;
  overflow: hidden;
}
[data-design="a"] .vr-funnel__progress-bar {
  height: 100%;
  background: var(--vr-blueprint-600);
  transform-origin: left;
  transform: scaleX(0.2);
  transition: transform var(--vr-dur-unfurl) var(--vr-ease-settle);
}
[data-design="a"] .vr-funnel__step-count {
  font-family: var(--vr-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--vr-graphite-500);
  white-space: nowrap;
}

/* Stamps */
[data-design="a"] .vr-funnel__stamps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vr-mark);
  margin-bottom: var(--vr-bay);
  min-height: 28px;
}
[data-design="a"] .vr-stamp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vr-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--vr-vermillion-600);
  background: var(--vr-vermillion-100);
  border: 1px solid var(--vr-vermillion-600);
  border-radius: var(--vr-radius-2);
  padding: 2px var(--vr-mark);
  animation: vr-stamp-press 0.5s var(--vr-ease-stamp) forwards;
}
@keyframes vr-stamp-press {
  0%   { transform: scale(0.94); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Steps */
[data-design="a"] .vr-funnel__step {
  animation: vr-step-in var(--vr-dur-unfurl) var(--vr-ease-unfurl) both;
}
[data-design="a"] .vr-funnel__step--hidden {
  display: none;
}
@keyframes vr-step-in {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

[data-design="a"] .vr-funnel__question {
  font-family: var(--vr-font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--vr-graphite-900);
  margin: 0 0 var(--vr-frame) 0;
  line-height: 1.25;
}

[data-design="a"] .vr-funnel__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vr-rule);
}

[data-design="a"] .vr-funnel__option {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--vr-mark) var(--vr-bay);
  background: var(--vr-vellum-50);
  border: 1px solid var(--vr-graphite-700);
  border-radius: var(--vr-radius-1);
  font-family: var(--vr-font-body);
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--vr-graphite-700);
  cursor: pointer;
  position: relative;
  transition:
    border-color var(--vr-dur-feedback) var(--vr-ease-settle),
    color        var(--vr-dur-feedback) var(--vr-ease-settle),
    transform    var(--vr-dur-feedback) var(--vr-ease-settle);
}
[data-design="a"] .vr-funnel__option::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--vr-blueprint-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--vr-dur-register) var(--vr-ease-settle);
}
[data-design="a"] .vr-funnel__option.is-selected,
[data-design="a"] .vr-funnel__option:focus-visible {
  border-color: var(--vr-blueprint-600);
  color: var(--vr-blueprint-600);
  outline: none;
}
[data-design="a"] .vr-funnel__option.is-selected::after {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .vr-funnel__option:hover {
    border-color: var(--vr-blueprint-600);
    color: var(--vr-blueprint-600);
    transform: translateY(-1px);
  }
  [data-design="a"] .vr-funnel__option:hover::after {
    transform: scaleX(1);
  }
}

[data-design="a"] .vr-funnel__back {
  display: inline-flex;
  align-items: center;
  margin-top: var(--vr-bay);
  background: none;
  border: none;
  font-family: var(--vr-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--vr-graphite-500);
  cursor: pointer;
  padding: var(--vr-mark) 0;
  min-height: 44px;
}

/* Form */
[data-design="a"] .vr-funnel__form {
  display: flex;
  flex-direction: column;
  gap: var(--vr-rule);
}
[data-design="a"] .vr-form-row {
  display: flex;
  flex-direction: column;
  gap: var(--vr-tick);
}
[data-design="a"] .vr-form-row--full {
  grid-column: 1 / -1;
}
[data-design="a"] .vr-form-label {
  font-family: var(--vr-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--vr-graphite-500);
  text-transform: uppercase;
}
[data-design="a"] .vr-form-hint {
  font-size: 10px;
  color: var(--vr-graphite-300);
  text-transform: none;
}
[data-design="a"] .vr-form-input,
[data-design="a"] .vr-form-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--vr-rule) var(--vr-mark);
  background: var(--vr-vellum-50);
  border: 1px solid var(--vr-graphite-300);
  border-radius: var(--vr-radius-2);
  font-family: var(--vr-font-body);
  font-size: 16px; /* prevent zoom on iOS */
  color: var(--vr-graphite-900);
  transition: border-color var(--vr-dur-feedback) var(--vr-ease-settle);
  box-sizing: border-box;
}
[data-design="a"] .vr-form-input:focus,
[data-design="a"] .vr-form-textarea:focus {
  outline: none;
  border-color: var(--vr-blueprint-600);
  box-shadow: 0 0 0 3px var(--vr-blueprint-100);
}
[data-design="a"] .vr-form-textarea {
  resize: vertical;
  min-height: 88px;
}
[data-design="a"] .vr-form-input--file {
  padding-block: var(--vr-mark);
}

[data-design="a"] .vr-funnel__form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vr-bay);
  margin-top: var(--vr-mark);
}

/* Received state */
[data-design="a"] .vr-funnel__received {
  text-align: center;
  padding-block: var(--vr-frame);
}
[data-design="a"] .vr-received__stamp {
  font-family: var(--vr-font-mono);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--vr-vermillion-600);
  animation: vr-received-press 0.72s var(--vr-ease-stamp) both;
  display: inline-block;
}
@keyframes vr-received-press {
  0%   { transform: scale(1.4); }
  60%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
[data-design="a"] .vr-received__msg {
  margin-top: var(--vr-bay);
  font-size: 16px;
  color: var(--vr-graphite-700);
}

/* ================================================================
   SECTION HEADERS (E4 pattern)
   ================================================================ */
[data-design="a"] .vr-section-header {
  display: flex;
  align-items: center;
  gap: var(--vr-bay);
  margin-bottom: clamp(var(--vr-frame), 4vw, var(--vr-span));
}
[data-design="a"] .vr-section-header__mono {
  font-family: var(--vr-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--vr-graphite-500);
  text-transform: uppercase;
  white-space: nowrap;
}
[data-design="a"] .vr-section-rule {
  flex: 1;
  height: 1px;
  background: var(--vr-graphite-300);
}

/* ================================================================
   E4 — SERVICES "Spec-Sheet Rule"
   ================================================================ */
[data-design="a"] .vr-services {
  background: var(--vr-vellum-50);
  padding-block: clamp(var(--vr-frame), 6vh, var(--vr-span));
}

/* Animated dashed rules */
[data-design="a"] .vr-dashed-rules {
  margin-bottom: var(--vr-bay);
  overflow: hidden;
  height: 4px;
}
[data-design="a"] .vr-dashed-rule-svg {
  width: 100%;
  height: 4px;
  display: block;
}
[data-design="a"] .vr-dashrule {
  stroke-dashoffset: 0;
  animation: vr-dashrule-drift 14s linear infinite;
}
[data-design="a"] .vr-dashrule--1 {
  animation-duration: 14s;
}
@keyframes vr-dashrule-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-40px); }
}

/* Service rows */
[data-design="a"] .vr-services__list {
  display: flex;
  flex-direction: column;
}
[data-design="a"] .vr-service-row {
  display: flex;
  align-items: baseline;
  gap: var(--vr-bay);
  padding-block: var(--vr-bay);
  border-bottom: 1px solid var(--vr-vellum-200);
  opacity: 1;
  transition: border-color var(--vr-dur-feedback) var(--vr-ease-settle);
}
[data-design="a"] .vr-service-row[data-reveal] {
  transform: translateY(8px);
  opacity: 0;
  transition:
    transform var(--vr-dur-unfurl) var(--vr-ease-settle),
    opacity   var(--vr-dur-unfurl) var(--vr-ease-settle);
}
[data-design="a"] .vr-service-row[data-reveal].is-revealed {
  transform: translateY(0);
  opacity: 1;
}
[data-design="a"] .vr-service-row__num {
  font-family: var(--vr-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--vr-graphite-300);
  flex-shrink: 0;
  width: 28px;
}
[data-design="a"] .vr-service-row__body {
  flex: 1;
}
[data-design="a"] .vr-service-row__name {
  font-family: var(--vr-font-display);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 700;
  color: var(--vr-graphite-900);
  margin: 0 0 4px 0;
}
[data-design="a"] .vr-service-row__desc {
  font-size: clamp(14px, 1vw, 16px);
  color: var(--vr-graphite-700);
  margin: 0;
  line-height: 1.5;
}
[data-design="a"] .vr-service-row__dim {
  font-family: var(--vr-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--vr-blueprint-600);
  flex-shrink: 0;
  padding: 2px var(--vr-mark);
  border: 1px solid var(--vr-blueprint-600);
  border-radius: var(--vr-radius-2);
  align-self: center;
}

/* ================================================================
   PORTFOLIO — honest no-photo
   ================================================================ */
[data-design="a"] .vr-portfolio {
  background: var(--vr-vellum-100);
  padding-block: clamp(var(--vr-frame), 6vh, var(--vr-span));
}
[data-design="a"] .vr-portfolio__layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vr-frame);
  align-items: center;
}
[data-design="a"] .vr-portfolio__drawing {
  flex: 1 1 480px;
  background: var(--vr-vellum-200);
  border: 1px solid var(--vr-graphite-300);
  border-radius: var(--vr-radius-2);
  overflow: hidden;
  min-height: 140px;
}
[data-design="a"] .vr-portfolio__svg {
  width: 100%;
  display: block;
}
[data-design="a"] .vr-pf-path {
  fill: none;
  stroke: var(--vr-blueprint-600);
  stroke-width: 1.2;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
[data-design="a"] .vr-pf--1 { animation: vr-pf-draw 4s var(--vr-ease-unfurl) 0s infinite; }
[data-design="a"] .vr-pf--2 { animation: vr-pf-draw 4s var(--vr-ease-unfurl) 0.6s infinite; }
[data-design="a"] .vr-pf--3 { animation: vr-pf-draw 4s var(--vr-ease-unfurl) 1.2s infinite; }
[data-design="a"] .vr-pf-label {
  fill: var(--vr-graphite-500);
  font-family: var(--vr-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
@keyframes vr-pf-draw {
  0%   { stroke-dashoffset: 600; opacity: 0.2; }
  10%  { opacity: 0.7; }
  65%  { stroke-dashoffset: 0; opacity: 0.6; }
  90%  { stroke-dashoffset: 0; opacity: 0.5; }
  100% { stroke-dashoffset: 600; opacity: 0.2; }
}
[data-design="a"] .vr-portfolio__copy {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: var(--vr-bay);
}
[data-design="a"] .vr-portfolio__statement {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--vr-graphite-700);
  margin: 0;
  line-height: 1.65;
}

/* ================================================================
   MID-CTA
   ================================================================ */
[data-design="a"] .vr-mid-cta {
  background: var(--vr-blueprint-600);
  padding-block: clamp(var(--vr-frame), 4vh, var(--vr-span));
}
[data-design="a"] .vr-mid-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vr-bay);
}
[data-design="a"] .vr-mid-cta__line {
  font-family: var(--vr-font-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  color: #fff;
  margin: 0;
  flex: 1 1 300px;
}
[data-design="a"] .vr-mid-cta .vr-btn--primary {
  background: #fff;
  color: var(--vr-blueprint-600);
  flex-shrink: 0;
}

/* ================================================================
   ROOF SYSTEMS
   ================================================================ */
[data-design="a"] .vr-roof-systems {
  background: var(--vr-vellum-50);
  padding-block: clamp(var(--vr-frame), 6vh, var(--vr-span));
}
[data-design="a"] .vr-systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--vr-bay);
}
[data-design="a"] .vr-system-card {
  background: var(--vr-vellum-200);
  border: 1px solid var(--vr-vellum-200);
  border-radius: var(--vr-radius-2);
  padding: var(--vr-frame) var(--vr-bay);
  display: flex;
  flex-direction: column;
  gap: var(--vr-rule);
  transform: translateY(8px);
  transition:
    transform var(--vr-dur-unfurl) var(--vr-ease-settle),
    opacity   var(--vr-dur-unfurl) var(--vr-ease-settle),
    box-shadow var(--vr-dur-feedback) var(--vr-ease-settle);
}
[data-design="a"] .vr-system-card[data-reveal] {
  opacity: 0;
}
[data-design="a"] .vr-system-card[data-reveal].is-revealed {
  transform: translateY(0);
  opacity: 1;
}
[data-design="a"] .vr-system-card__glyph {
  display: block;
  margin-bottom: var(--vr-mark);
}
[data-design="a"] .vr-system-card__name {
  font-family: var(--vr-font-display);
  font-size: clamp(17px, 1.3vw, 19px);
  font-weight: 700;
  color: var(--vr-graphite-900);
  margin: 0;
}
[data-design="a"] .vr-system-card__desc {
  font-size: clamp(14px, 1vw, 15px);
  color: var(--vr-graphite-700);
  margin: 0;
  line-height: 1.6;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .vr-system-card:hover {
    box-shadow: var(--vr-shadow-paper-lift);
    transform: translateY(-2px);
  }
  [data-design="a"] .vr-system-card[data-reveal].is-revealed:hover {
    transform: translateY(-2px);
  }
}

/* ================================================================
   PROCESS
   ================================================================ */
[data-design="a"] .vr-process {
  background: var(--vr-vellum-100);
  padding-block: clamp(var(--vr-frame), 6vh, var(--vr-span));
}
[data-design="a"] .vr-process__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
[data-design="a"] .vr-process__step {
  display: flex;
  gap: var(--vr-bay);
  padding-block: var(--vr-bay);
  border-bottom: 1px solid var(--vr-vellum-200);
  transform: translateY(8px);
  transition:
    transform var(--vr-dur-unfurl) var(--vr-ease-settle),
    opacity   var(--vr-dur-unfurl) var(--vr-ease-settle);
}
[data-design="a"] .vr-process__step[data-reveal] {
  opacity: 0;
}
[data-design="a"] .vr-process__step[data-reveal].is-revealed {
  transform: translateY(0);
  opacity: 1;
}
[data-design="a"] .vr-process__num {
  font-family: var(--vr-font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--vr-graphite-300);
  flex-shrink: 0;
  width: 28px;
  padding-top: 4px;
}
[data-design="a"] .vr-process__name {
  font-family: var(--vr-font-display);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 700;
  color: var(--vr-graphite-900);
  margin: 0 0 4px 0;
}
[data-design="a"] .vr-process__desc {
  font-size: clamp(14px, 1vw, 16px);
  color: var(--vr-graphite-700);
  margin: 0;
  line-height: 1.6;
}

/* ================================================================
   ABOUT
   ================================================================ */
[data-design="a"] .vr-about {
  background: var(--vr-vellum-50);
  padding-block: clamp(var(--vr-frame), 6vh, var(--vr-span));
}
[data-design="a"] .vr-about__layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vr-span);
  align-items: flex-start;
}
[data-design="a"] .vr-about__copy {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: var(--vr-bay);
}
[data-design="a"] .vr-about__headline {
  font-family: var(--vr-font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vr-graphite-900);
  margin: 0;
  line-height: 1.15;
}
[data-design="a"] .vr-about__body {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--vr-graphite-700);
  margin: 0;
  line-height: 1.7;
}
[data-design="a"] .vr-about__plate {
  flex: 0 1 320px;
}
[data-design="a"] .vr-spec-plate {
  background: var(--vr-vellum-200);
  border: 1px solid var(--vr-graphite-300);
  padding: var(--vr-bay);
}
[data-design="a"] .vr-spec-plate__rule {
  height: 1px;
  background: var(--vr-graphite-300);
  margin-block: var(--vr-rule);
}
[data-design="a"] .vr-spec-plate__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--vr-mark) var(--vr-bay);
  margin: 0;
}
[data-design="a"] .vr-spec-plate__dl dt {
  font-family: var(--vr-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--vr-graphite-500);
  text-transform: uppercase;
  padding-top: 2px;
}
[data-design="a"] .vr-spec-plate__dl dd {
  font-family: var(--vr-font-body);
  font-size: 14px;
  color: var(--vr-graphite-700);
  margin: 0;
}

/* ================================================================
   SERVICE AREA
   ================================================================ */
[data-design="a"] .vr-service-area {
  background: var(--vr-vellum-100);
  padding-block: clamp(var(--vr-frame), 6vh, var(--vr-span));
}
[data-design="a"] .vr-service-area__layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vr-span);
  align-items: center;
}
[data-design="a"] .vr-service-area__copy {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: var(--vr-bay);
}
[data-design="a"] .vr-service-area__city {
  font-family: var(--vr-font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--vr-graphite-900);
  margin: 0;
}
[data-design="a"] .vr-service-area__desc {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--vr-graphite-700);
  margin: 0;
}
[data-design="a"] .vr-service-area__mapplate {
  flex: 0 1 320px;
  background: var(--vr-vellum-200);
  border: 1px solid var(--vr-graphite-300);
  border-radius: var(--vr-radius-2);
  overflow: hidden;
}
[data-design="a"] .vr-service-area__svg {
  display: block;
  width: 100%;
}
[data-design="a"] .vr-map-grid {
  stroke: var(--vr-graphite-300);
  stroke-width: 0.6;
  opacity: 0.55;
}

/* ================================================================
   FOOTER
   ================================================================ */
[data-design="a"] .vr-footer {
  background: var(--vr-graphite-900);
  padding-block: clamp(var(--vr-frame), 4vh, var(--vr-span));
}
[data-design="a"] .vr-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vr-frame);
  align-items: flex-start;
  justify-content: space-between;
}
[data-design="a"] .vr-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--vr-mark);
}
[data-design="a"] .vr-footer__firm {
  font-family: var(--vr-font-display);
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 700;
  color: var(--vr-vellum-50);
}
[data-design="a"] .vr-footer__loc {
  font-family: var(--vr-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--vr-graphite-500);
}
[data-design="a"] .vr-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vr-bay);
}
[data-design="a"] .vr-footer__link {
  font-family: var(--vr-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--vr-graphite-300);
  text-decoration: none;
  transition: color var(--vr-dur-feedback) var(--vr-ease-settle);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .vr-footer__link:hover {
    color: var(--vr-vellum-50);
  }
}
[data-design="a"] .vr-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--vr-rule);
}
[data-design="a"] .vr-footer__phone {
  font-family: var(--vr-font-mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--vr-vellum-50);
  text-decoration: none;
}
[data-design="a"] .vr-footer .vr-btn--primary {
  background: var(--vr-blueprint-600);
  color: #fff;
}
[data-design="a"] .vr-footer__divider {
  height: 1px;
  background: var(--vr-graphite-700);
  margin-block: var(--vr-bay);
}
[data-design="a"] .vr-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vr-bay);
  justify-content: space-between;
}
[data-design="a"] .vr-footer__copy,
[data-design="a"] .vr-footer__tagline {
  font-family: var(--vr-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--vr-graphite-500);
}

/* ================================================================
   SHARED UTILS
   ================================================================ */
[data-design="a"] .vr-link {
  color: var(--vr-blueprint-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ================================================================
   REDUCED MOTION FALLBACKS
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .vr-ep,
  [data-design="a"] .vr-ep--ground,
  [data-design="a"] .vr-ep--found,
  [data-design="a"] .vr-ep--walls,
  [data-design="a"] .vr-ep--roof,
  [data-design="a"] .vr-ep--ridge,
  [data-design="a"] .vr-ep--courses,
  [data-design="a"] .vr-ep--chimney,
  [data-design="a"] .vr-ep--windows,
  [data-design="a"] .vr-ep--door,
  [data-design="a"] .vr-ep--dim {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 0.35;
  }
  [data-design="a"] .vr-ep-text {
    animation: none;
    opacity: 0.5;
  }
  [data-design="a"] .vr-ptr-line,
  [data-design="a"] .vr-ptr-tick {
    animation: none;
    stroke-dashoffset: 0;
  }
  [data-design="a"] .vr-ptr-chevron {
    animation: none;
  }
  [data-design="a"] .vr-ptr-label {
    opacity: 1;
  }
  [data-design="a"] .vr-btn--primary {
    animation: none;
  }
  [data-design="a"] .vr-funnel__step {
    animation: none;
  }
  [data-design="a"] .vr-dashrule {
    animation: none;
  }
  [data-design="a"] .vr-pf--1,
  [data-design="a"] .vr-pf--2,
  [data-design="a"] .vr-pf--3 {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 0.4;
  }
  [data-design="a"] .vr-hero__backdrop {
    transform: none;
  }
  /* Reveal items still show without transform */
  [data-design="a"] [data-reveal] {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Phase-3.4 hero visibility floor (forge_assemble) */
[data-design="a"] [data-mf-role="hero"] :is(h1,h2,p,.headline,.subtitle,.proof,[class*="headline"],[class*="subtitle"],[class*="proof"]),
[data-design="a"] [data-mf-role="cta"] { opacity: 1 !important; }