/* ============================================================
   GO GREEN ROOFING SERVICES — DESIGN A
   Design system: Almanac Press (letterpress field-manual),
   themed to roofing (slate / asphalt / cedar / copper over
   cotton-rag paper, with cyan+brick registration plates).
   ALL selectors scoped under [data-design="a"]. Keyframes ap-*.
   ============================================================ */

[data-design="a"].dq-design,
[data-design="a"] {
  /* ---- Color: paper + ink + plates + roofing accents ---- */
  --ap-paper:       #F2EAD6; /* cotton-rag surface */
  --ap-paper-deep:  #E6DBBE; /* foxed edge / secondary surface */
  --ap-ink:         #1B1A17; /* body, type, primary fill */
  --ap-ink-soft:    #3D3A33; /* long body */
  --ap-muted:       #7A7363; /* caption, plate number */
  --ap-rule:        #2A2722; /* hairline, table grid */
  --ap-cyan:        #1E5E6E; /* cyan registration plate */
  --ap-brick:       #A53A2A; /* brick registration plate */
  --ap-ochre:       #B98421; /* seasonal stamp */
  --ap-moss:        #4D5A2C; /* "go green" — success / in-season */
  --ap-slate:       #36414A; /* slate roof — deep accent surface */
  --ap-copper:      #9C5A2D; /* weathered copper flashing */
  --ap-critical:    #7A1F14;

  /* the slot's exposed primary (roofing: moss-green, the firm's name) */
  --design-a-primary: var(--ap-moss);

  /* ---- Typography ---- */
  --ap-font-display: "Old Standard TT", "Bodoni 72", Didot, Georgia, serif;
  --ap-font-body:    "Crimson Pro", "Hoefler Text", Georgia, serif;
  --ap-font-stamp:   "Special Elite", "American Typewriter", ui-monospace, monospace;
  --ap-font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  --ap-text-xs:   12px;
  --ap-text-sm:   14px;
  --ap-text-base: 17px;
  --ap-text-md:   20px;
  --ap-text-lg:   28px;
  --ap-text-xl:   40px;
  --ap-text-2xl:  clamp(44px, 8vw, 76px);

  /* ---- Spacing (printer's furniture) ---- */
  --ap-space-quad:      4px;
  --ap-space-em:        8px;
  --ap-space-pica:      12px;
  --ap-space-leading:   16px;
  --ap-space-folio:     24px;
  --ap-space-column:    40px;
  --ap-space-signature: 64px;
  --ap-space-gutter:    96px;
  --ap-space-bleed:     144px;

  /* ---- Motion ---- */
  --ap-dur-snap:   160ms;
  --ap-dur-settle: 320ms;
  --ap-dur-unfurl: 640ms;
  --ap-dur-press:  22000ms;
  --ap-ease-paper:   cubic-bezier(.22, .61, .36, 1);
  --ap-ease-release: cubic-bezier(.16, 1, .3, 1);
  --ap-ease-tide:    cubic-bezier(.45, .05, .55, .95);

  --ap-shadow-deboss: inset 0 1px 0 rgba(27,26,23,.06), inset 0 -1px 0 rgba(27,26,23,.12);
}

@media (prefers-color-scheme: dark) {
  [data-design="a"].dq-design,
  [data-design="a"] {
    --ap-paper:      #15110B;
    --ap-paper-deep: #1E1A12;
    --ap-ink:        #EFE6CE;
    --ap-ink-soft:   #C3B894;
    --ap-muted:      #857C62;
    --ap-rule:       #9C907A;
    --ap-cyan:       #3FA6B6;
    --ap-brick:      #D86A55;
    --ap-ochre:      #D9A856;
    --ap-moss:       #8EA055;
    --ap-slate:      #AEB8C0;
    --ap-copper:     #D08A55;
    --ap-critical:   #C04A3A;
  }
}

/* ---- Base ---- */
[data-design="a"].dq-design {
  background: var(--ap-paper);
  color: var(--ap-ink);
  font-family: var(--ap-font-body);
  font-size: var(--ap-text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
[data-design="a"] *, [data-design="a"] *::before, [data-design="a"] *::after { box-sizing: border-box; }
[data-design="a"] main { display: block; }
[data-design="a"] section { padding: var(--ap-space-gutter) var(--ap-space-folio); }
[data-design="a"] h1, [data-design="a"] h2, [data-design="a"] h3 { margin: 0; }
[data-design="a"] p { margin: 0; }

/* ============================================================ */
/* ELEMENT 1 — HEADER "The Registered Masthead"                 */
/* ============================================================ */
[data-design="a"] .ap-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ap-paper);
  border-bottom: 1px solid var(--ap-rule);
}
[data-design="a"] .ap-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ap-space-column);
  padding: var(--ap-space-leading) var(--ap-space-folio);
  max-width: 1280px;
  margin: 0 auto;
}
[data-design="a"] .ap-logo {
  text-decoration: none;
  color: var(--ap-ink);
  display: inline-flex;
  align-items: center;
}
[data-design="a"] .ap-logo__mark {
  position: relative;
  font-family: var(--ap-font-display);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 27px);
  letter-spacing: -0.01em;
  isolation: isolate;
  line-height: 1;
}
[data-design="a"] .ap-logo__name { position: relative; z-index: 3; color: var(--ap-ink); }
[data-design="a"] .ap-logo__plate {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  font: inherit;
  white-space: nowrap;
}
[data-design="a"] .ap-logo__plate::before { content: attr(data-text); }
[data-design="a"] .ap-logo__plate--cyan {
  z-index: 2; color: var(--ap-cyan); opacity: .55;
  transform: translate(8px, 4px);
  transition: transform 320ms var(--ap-ease-release);
}
[data-design="a"] .ap-logo__plate--brick {
  z-index: 1; color: var(--ap-brick); opacity: .55;
  transform: translate(-8px, -4px);
  transition: transform 320ms var(--ap-ease-release) 40ms;
}
[data-design="a"] .ap-header--registered .ap-logo__plate--cyan { transform: translate(2px, 1px); }
[data-design="a"] .ap-header--registered .ap-logo__plate--brick { transform: translate(-2px, -1px); }

[data-design="a"] .ap-header__menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--ap-rule);
  border-radius: 0;
  cursor: pointer;
}
[data-design="a"] .ap-header__menu-bar {
  display: block; height: 2px; width: 100%;
  background: var(--ap-ink);
  transition: transform 160ms var(--ap-ease-paper), opacity 160ms;
}
[data-design="a"] .ap-header__menu[aria-expanded="true"] .ap-header__menu-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-design="a"] .ap-header__menu[aria-expanded="true"] .ap-header__menu-bar:nth-child(2) { opacity: 0; }
[data-design="a"] .ap-header__menu[aria-expanded="true"] .ap-header__menu-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

[data-design="a"] .ap-header__rule {
  height: 1px;
  background: var(--ap-rule);
  animation: ap-rule-breath var(--ap-dur-press) var(--ap-ease-tide) infinite;
}
@keyframes ap-rule-breath {
  0%, 100% { background: var(--ap-rule); }
  25%      { background: var(--ap-cyan); opacity: .55; }
  50%      { background: var(--ap-rule); }
  75%      { background: var(--ap-brick); opacity: .55; }
}

/* ---- Drawer (focus-trapped; display:none when hidden) ---- */
[data-design="a"] .ap-drawer { position: fixed; inset: 0; z-index: 80; }
[data-design="a"] .ap-drawer[hidden] { display: none; }
[data-design="a"] .ap-drawer::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(27,26,23,.5);
  opacity: 0; transition: opacity 320ms var(--ap-ease-paper);
}
[data-design="a"] .ap-drawer.is-open::before { opacity: 1; }
[data-design="a"] .ap-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(90vw, 380px);
  background: var(--ap-paper);
  border-left: 1px solid var(--ap-rule);
  box-shadow: -2px 0 0 var(--ap-cyan);
  padding: var(--ap-space-signature) var(--ap-space-folio) var(--ap-space-folio);
  transform: translateX(100%);
  transition: transform 420ms var(--ap-ease-paper);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--ap-space-folio);
}
[data-design="a"] .ap-drawer.is-open .ap-drawer__panel { transform: translateX(0); }
[data-design="a"] .ap-drawer__close {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px;
  font-size: 28px; line-height: 1;
  background: transparent; border: 1px solid var(--ap-rule); border-radius: 0;
  color: var(--ap-ink); cursor: pointer;
}
[data-design="a"] .ap-drawer__stamp {
  font-family: var(--ap-font-stamp);
  font-size: var(--ap-text-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ap-muted);
  padding-bottom: var(--ap-space-em);
  border-bottom: 1px solid var(--ap-rule);
}
[data-design="a"] .ap-drawer__nav { display: flex; flex-direction: column; }
[data-design="a"] .ap-drawer__nav a {
  font-family: var(--ap-font-display);
  font-size: var(--ap-text-md);
  color: var(--ap-ink); text-decoration: none;
  padding: var(--ap-space-pica) 0;
  border-bottom: 1px solid var(--ap-rule);
  transition: color 160ms var(--ap-ease-paper), padding-left 160ms var(--ap-ease-paper);
}
[data-design="a"] .ap-drawer__nav a:hover,
[data-design="a"] .ap-drawer__nav a:focus-visible { color: var(--ap-brick); padding-left: var(--ap-space-em); }
[data-design="a"] .ap-drawer__cta-stack { display: flex; flex-direction: column; gap: var(--ap-space-leading); margin-top: auto; }
[data-design="a"] .ap-drawer__phone {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: var(--ap-ink);
  padding: var(--ap-space-pica); border: 1px solid var(--ap-rule);
}
[data-design="a"] .ap-drawer__phone-label {
  font-family: var(--ap-font-stamp); font-size: var(--ap-text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ap-muted);
}
[data-design="a"] .ap-drawer__phone-num { font-family: var(--ap-font-mono); font-size: var(--ap-text-md); }
[data-design="a"] .ap-drawer__phone-num--mail { font-size: var(--ap-text-sm); word-break: break-all; }

/* ============================================================ */
/* ELEMENT 2 — CTA "The Plate Button"                           */
/* ============================================================ */
[data-design="a"] .ap-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--ap-space-leading);
  padding: 15px 26px;
  min-height: 44px;
  font-family: var(--ap-font-stamp);
  font-size: var(--ap-text-sm); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ap-paper); background: var(--ap-ink);
  border: none; border-radius: 0; text-decoration: none; cursor: pointer;
  isolation: isolate;
  transition: transform 120ms var(--ap-ease-release), background-color 120ms var(--ap-ease-paper);
}
[data-design="a"] .ap-cta__plate {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  transition: transform 320ms var(--ap-ease-release);
}
[data-design="a"] .ap-cta__plate--cyan {
  background: var(--ap-cyan); opacity: .55;
  transform: translate(2px, 1px);
  animation: ap-cta-breath-cyan 5s var(--ap-ease-tide) infinite;
}
[data-design="a"] .ap-cta__plate--brick {
  background: var(--ap-brick); opacity: .55;
  transform: translate(-2px, -1px);
  animation: ap-cta-breath-brick 5s var(--ap-ease-tide) infinite;
}
@keyframes ap-cta-breath-cyan { 0%,100% { transform: translate(2px,1px); } 50% { transform: translate(4px,2px); } }
@keyframes ap-cta-breath-brick { 0%,100% { transform: translate(-2px,-1px); } 50% { transform: translate(-4px,-2px); } }
[data-design="a"] .ap-cta__arrow { display: inline-block; transition: transform 200ms var(--ap-ease-release); }
[data-design="a"] .ap-cta:hover .ap-cta__plate--cyan,
[data-design="a"] .ap-cta:focus-visible .ap-cta__plate--cyan { animation: none; transform: translate(8px, 4px); }
[data-design="a"] .ap-cta:hover .ap-cta__plate--brick,
[data-design="a"] .ap-cta:focus-visible .ap-cta__plate--brick { animation: none; transform: translate(-8px, -4px); }
[data-design="a"] .ap-cta:hover .ap-cta__arrow,
[data-design="a"] .ap-cta:focus-visible .ap-cta__arrow { transform: translateX(4px); }
[data-design="a"] .ap-cta:focus-visible { outline: 2px solid var(--ap-cyan); outline-offset: 4px; }
[data-design="a"] .ap-cta:active { transform: translate(1px, 1px); box-shadow: var(--ap-shadow-deboss); }
[data-design="a"] .ap-cta:active .ap-cta__plate--cyan,
[data-design="a"] .ap-cta:active .ap-cta__plate--brick { animation: none; transform: translate(0,0); transition-duration: 80ms; }
[data-design="a"] .ap-cta[disabled], [data-design="a"] .ap-cta[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
[data-design="a"] .ap-cta[disabled] .ap-cta__plate { animation: none; }
[data-design="a"] .ap-cta--invert { background: var(--ap-paper); color: var(--ap-ink); box-shadow: inset 0 0 0 1px var(--ap-ink); }

/* ============================================================ */
/* HERO — roofline-draw + course-lay (themed-movement v0.2)     */
/* ============================================================ */
[data-design="a"] .ap-hero {
  position: relative;
  overflow: hidden;
  background: var(--ap-paper);
  padding: clamp(72px, 12vw, 132px) var(--ap-space-folio) clamp(56px, 9vw, 104px);
  min-height: clamp(460px, 72vh, 620px);
  display: flex; align-items: center;
}
[data-design="a"] .ap-hero__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
[data-design="a"] .ap-hero__wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(54,65,74,0) 0%, rgba(54,65,74,.10) 62%, rgba(54,65,74,.20) 100%),
    linear-gradient(90deg, rgba(30,94,110,.05), rgba(165,58,42,.04));
  animation: ap-hero-wash 12s var(--ap-ease-tide) infinite;
}
@keyframes ap-hero-wash { 0%,100% { opacity: .82; } 50% { opacity: 1; } }
[data-design="a"] .ap-hero__roofline {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--ap-slate);
}
[data-design="a"] .ap-hero__ridge {
  stroke: var(--ap-slate); stroke-width: 2.5; opacity: .55;
  stroke-dasharray: 2600; stroke-dashoffset: 2600;
  animation: ap-ridge-draw 1900ms var(--ap-ease-paper) 120ms forwards;
}
[data-design="a"] .ap-hero__ridge--2 { stroke: var(--ap-cyan); opacity: .32; animation-delay: 360ms; animation-duration: 2100ms; }
@keyframes ap-ridge-draw { to { stroke-dashoffset: 0; } }
[data-design="a"] .ap-hero__course {
  fill: var(--ap-slate); opacity: 0;
  transform-box: fill-box; transform-origin: left center;
  transform: scaleX(0);
  animation: ap-course-lay 760ms var(--ap-ease-paper) forwards;
}
[data-design="a"] .ap-hero__course:nth-child(1) { animation-delay: 300ms; opacity: .22; }
[data-design="a"] .ap-hero__course:nth-child(2) { animation-delay: 440ms; }
[data-design="a"] .ap-hero__course:nth-child(3) { animation-delay: 580ms; }
[data-design="a"] .ap-hero__course:nth-child(4) { animation-delay: 720ms; }
[data-design="a"] .ap-hero__course:nth-child(5) { animation-delay: 860ms; }
@keyframes ap-course-lay { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: .26; } }

[data-design="a"] .ap-hero__inner {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto; width: 100%;
}
[data-design="a"] .ap-hero__kicker {
  font-family: var(--ap-font-stamp); font-size: var(--ap-text-xs);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ap-muted);
  margin-bottom: var(--ap-space-leading);
}
[data-design="a"] .ap-hero__title {
  font-family: var(--ap-font-display); font-weight: 700;
  font-size: var(--ap-text-2xl); line-height: 1.04; letter-spacing: -0.015em;
  color: var(--ap-ink);
  max-width: 18ch;
  opacity: 1; /* first-paint visible — NEVER reveal-gated */
}
[data-design="a"] .ap-hero__subtitle {
  font-family: var(--ap-font-body); font-size: var(--ap-text-md);
  line-height: 1.5; color: var(--ap-ink-soft);
  margin-top: var(--ap-space-folio); max-width: 56ch;
}
[data-design="a"] .ap-hero__proof {
  font-family: var(--ap-font-stamp); font-size: var(--ap-text-sm);
  letter-spacing: 0.04em; color: var(--ap-muted);
  margin-top: var(--ap-space-leading);
  max-width: 56ch;
}
[data-design="a"] .ap-hero__actions {
  display: flex; align-items: center; gap: var(--ap-space-folio);
  flex-wrap: wrap; margin-top: var(--ap-space-column);
}
[data-design="a"] .ap-hero__chip {
  font-family: var(--ap-font-stamp); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ap-moss);
  padding: 5px 10px;
  border: 1px solid var(--ap-moss);
  box-shadow: var(--ap-shadow-deboss);
}

/* ============================================================ */
/* ELEMENT 6 — POINTER (water-shed / roofline wayfinding)       */
/* ============================================================ */
[data-design="a"] .ap-pointer {
  display: flex; justify-content: center;
  padding: clamp(32px, 6vw, 64px) 16px clamp(40px, 7vw, 72px);
  background: var(--ap-paper);
}
[data-design="a"] .ap-pointer__hit {
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  gap: var(--ap-space-em); text-decoration: none; color: var(--ap-muted);
}
[data-design="a"] .ap-pointer__tick { display: block; width: 18px; height: 1px; background: currentColor; opacity: .7; }
[data-design="a"] .ap-pointer__rule {
  display: block; width: 1px; height: 60px; background: currentColor;
  transform-origin: top center;
  animation: ap-pointer-shed 5s ease-in-out infinite;
}
[data-design="a"] .ap-pointer__label {
  font-family: var(--ap-font-stamp); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0; animation: ap-pointer-stamp 5s ease-in-out infinite;
}
@keyframes ap-pointer-shed { 0%,100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: .85; } }
@keyframes ap-pointer-stamp { 0%,30%,100% { opacity: 0; } 50%,70% { opacity: .85; } }

/* ============================================================ */
/* ELEMENT 5 — THE FUNNEL "Request for Service"                 */
/* ============================================================ */
[data-design="a"] .ap-funnel {
  background: var(--ap-paper-deep);
  border-top: 1px solid var(--ap-rule);
  border-bottom: 1px solid var(--ap-rule);
}
[data-design="a"] .ap-funnel__head { max-width: 760px; margin: 0 auto var(--ap-space-column); }
[data-design="a"] .ap-funnel__stamp,
[data-design="a"] .ap-work__stamp,
[data-design="a"] .ap-guarantee__stamp,
[data-design="a"] .ap-roll__stamp,
[data-design="a"] .ap-process__stamp,
[data-design="a"] .ap-area__stamp,
[data-design="a"] .ap-close__stamp {
  font-family: var(--ap-font-stamp); font-size: var(--ap-text-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ap-muted);
  margin-bottom: var(--ap-space-leading);
}
[data-design="a"] .ap-funnel__title {
  font-family: var(--ap-font-display); font-weight: 700;
  font-size: var(--ap-text-xl); line-height: 1.12; color: var(--ap-ink);
  margin-bottom: var(--ap-space-leading);
}
[data-design="a"] .ap-funnel__lede {
  font-size: var(--ap-text-base); color: var(--ap-ink-soft);
  max-width: 56ch; margin-bottom: var(--ap-space-leading);
}
[data-design="a"] .ap-funnel__counter {
  font-family: var(--ap-font-stamp); font-size: var(--ap-text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ap-brick);
}
[data-design="a"] .ap-funnel__sheet {
  max-width: 760px; margin: 0 auto;
  border-top: 1px solid var(--ap-rule);
}
[data-design="a"] .ap-funnel__step { display: none; border: none; margin: 0; padding: var(--ap-space-folio) 0 0; min-inline-size: 0; }
[data-design="a"] .ap-funnel__step.is-current { display: block; animation: ap-step-settle var(--ap-dur-settle) var(--ap-ease-paper); }
@keyframes ap-step-settle { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
[data-design="a"] .ap-funnel__legend {
  font-family: var(--ap-font-display); font-size: var(--ap-text-lg);
  line-height: 1.2; color: var(--ap-ink);
  margin-bottom: var(--ap-space-folio); padding: 0; float: none;
}
[data-design="a"] .ap-funnel__row { display: grid; gap: var(--ap-space-leading); }
[data-design="a"] .ap-funnel__row--3 { grid-template-columns: repeat(3, 1fr); }
[data-design="a"] .ap-funnel__row--4 { grid-template-columns: repeat(2, 1fr); }

[data-design="a"] .ap-block-btn {
  position: relative; text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--ap-space-folio);
  min-height: 88px;
  font-family: var(--ap-font-display); font-size: var(--ap-text-md);
  color: var(--ap-ink); background: var(--ap-paper);
  border: 1px solid var(--ap-rule); border-radius: 0; cursor: pointer;
  transition: transform 120ms var(--ap-ease-release), box-shadow 160ms var(--ap-ease-paper), border-color 160ms;
}
[data-design="a"] .ap-block-btn__no {
  font-family: var(--ap-font-stamp); font-size: 11px;
  letter-spacing: 0.12em; color: var(--ap-muted);
}
[data-design="a"] .ap-block-btn__meta {
  font-family: var(--ap-font-body); font-style: italic;
  font-size: var(--ap-text-sm); color: var(--ap-muted);
}
[data-design="a"] .ap-block-btn:hover,
[data-design="a"] .ap-block-btn:focus-visible {
  border-color: var(--ap-ink);
  box-shadow: 3px 2px 0 rgba(30,94,110,.4), -3px -2px 0 rgba(165,58,42,.4);
  outline: none;
}
[data-design="a"] .ap-block-btn.is-selected {
  border-color: var(--ap-ink);
  background: var(--ap-ink); color: var(--ap-paper);
  box-shadow: var(--ap-shadow-deboss);
}
[data-design="a"] .ap-block-btn.is-selected .ap-block-btn__no,
[data-design="a"] .ap-block-btn.is-selected .ap-block-btn__meta { color: var(--ap-paper-deep); }

[data-design="a"] .ap-funnel__back {
  margin-top: var(--ap-space-folio);
  font-family: var(--ap-font-stamp); font-size: var(--ap-text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ap-muted);
  background: transparent; border: none; border-radius: 0; cursor: pointer;
  padding: 10px 0; min-height: 44px;
}
[data-design="a"] .ap-funnel__back:hover { color: var(--ap-brick); }

/* contact step */
[data-design="a"] .ap-funnel__fields { display: flex; flex-direction: column; gap: var(--ap-space-leading); }
[data-design="a"] .ap-funnel__summary {
  font-family: var(--ap-font-mono); font-size: var(--ap-text-sm);
  color: var(--ap-cyan); padding-bottom: var(--ap-space-em);
  border-bottom: 1px solid var(--ap-rule); min-height: 1.4em;
}
[data-design="a"] .ap-field { display: flex; flex-direction: column; gap: 6px; }
[data-design="a"] .ap-field__label {
  font-family: var(--ap-font-stamp); font-size: var(--ap-text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ap-ink);
}
[data-design="a"] .ap-field__input {
  width: 100%; padding: 12px;
  border: 1px solid var(--ap-rule); border-radius: 0;
  background: var(--ap-paper); color: var(--ap-ink);
  font-family: var(--ap-font-body); font-size: var(--ap-text-base);
  transition: border-color 120ms var(--ap-ease-paper), box-shadow 120ms;
}
[data-design="a"] .ap-field__input:focus {
  outline: none; border-color: var(--ap-ink); border-width: 2px; padding: 11px;
  box-shadow: 2px 1px 0 rgba(30,94,110,.55);
}
[data-design="a"] .ap-field__textarea { resize: vertical; min-height: 88px; font-family: var(--ap-font-body); }
[data-design="a"] .ap-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ap-space-leading); }
[data-design="a"] .ap-field__hint { font-family: var(--ap-font-body); font-style: italic; font-size: var(--ap-text-sm); color: var(--ap-muted); }
[data-design="a"] .ap-funnel__actions { display: flex; align-items: center; gap: var(--ap-space-folio); flex-wrap: wrap; margin-top: var(--ap-space-folio); }

/* done */
[data-design="a"] .ap-funnel__done { padding: var(--ap-space-folio) 0; }
[data-design="a"] .ap-funnel__done[hidden] { display: none; }
[data-design="a"] .ap-stamp--done {
  display: inline-block;
  font-family: var(--ap-font-stamp); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ap-moss);
  padding: 4px 10px; border: 1px solid var(--ap-moss);
  box-shadow: var(--ap-shadow-deboss); margin-bottom: var(--ap-space-leading);
}
[data-design="a"] .ap-funnel__done-title { font-family: var(--ap-font-display); font-size: var(--ap-text-lg); color: var(--ap-ink); margin-bottom: var(--ap-space-em); }
[data-design="a"] .ap-funnel__done-note { font-size: var(--ap-text-base); color: var(--ap-ink-soft); max-width: 56ch; }
[data-design="a"] .ap-funnel__done-note a, [data-design="a"] .ap-funnel__foot a { color: var(--ap-cyan); }

[data-design="a"] .ap-funnel__foot {
  max-width: 760px; margin: var(--ap-space-column) auto 0;
  padding-top: var(--ap-space-folio); border-top: 1px solid var(--ap-rule);
}
[data-design="a"] .ap-funnel__foot-line { font-family: var(--ap-font-body); font-size: var(--ap-text-sm); color: var(--ap-muted); margin-bottom: var(--ap-space-em); }

/* ============================================================ */
/* WORK / PORTFOLIO — honest typographic plates (NO photos)     */
/* ============================================================ */
[data-design="a"] .ap-work { max-width: 1280px; margin: 0 auto; }
[data-design="a"] .ap-work__head, [data-design="a"] .ap-roll__head, [data-design="a"] .ap-process__head, [data-design="a"] .ap-area__head { max-width: 60ch; margin-bottom: var(--ap-space-column); }
[data-design="a"] .ap-work__title, [data-design="a"] .ap-process__title, [data-design="a"] .ap-area__title {
  font-family: var(--ap-font-display); font-weight: 700;
  font-size: var(--ap-text-xl); line-height: 1.12; color: var(--ap-ink);
  margin-bottom: var(--ap-space-leading);
}
[data-design="a"] .ap-work__lede { font-size: var(--ap-text-base); color: var(--ap-ink-soft); }
[data-design="a"] .ap-work__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ap-rule); }
[data-design="a"] .ap-work__plate {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--ap-space-column); align-items: start;
  padding: var(--ap-space-folio) 0; border-bottom: 1px solid var(--ap-rule);
  position: relative;
}
[data-design="a"] .ap-work__plate::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: var(--ap-cyan); opacity: 0; transition: opacity 320ms var(--ap-ease-paper);
}
[data-design="a"] .ap-work__plate:hover::after { opacity: .55; }
[data-design="a"] .ap-work__num { font-family: var(--ap-font-stamp); font-size: var(--ap-text-xs); letter-spacing: 0.12em; color: var(--ap-muted); min-width: 6ch; padding-top: 6px; }
[data-design="a"] .ap-work__name { font-family: var(--ap-font-display); font-size: var(--ap-text-md); color: var(--ap-ink); margin-bottom: 6px; }
[data-design="a"] .ap-work__scope { font-size: var(--ap-text-base); color: var(--ap-ink-soft); max-width: 60ch; }
[data-design="a"] .ap-work__tag {
  font-family: var(--ap-font-stamp); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ap-copper); padding: 4px 10px; border: 1px solid var(--ap-rule); white-space: nowrap; height: fit-content;
}
[data-design="a"] .ap-work__note {
  font-family: var(--ap-font-body); font-style: italic;
  font-size: var(--ap-text-sm); color: var(--ap-muted);
  margin-top: var(--ap-space-folio); max-width: 64ch;
  padding-left: var(--ap-space-leading); border-left: 2px solid var(--ap-ochre);
}
[data-design="a"] .ap-work__cta-row, [data-design="a"] .ap-close__block {
  display: flex; flex-direction: column; gap: var(--ap-space-leading);
  align-items: flex-start; margin-top: var(--ap-space-column);
}
[data-design="a"] .ap-work__cta-line { font-family: var(--ap-font-display); font-size: var(--ap-text-md); color: var(--ap-ink); }

/* ============================================================ */
/* SERVICE GUARANTEE — affidavit panel (verbatim copy)          */
/* ============================================================ */
[data-design="a"] .ap-guarantee { background: var(--ap-slate); }
[data-design="a"] .ap-guarantee__panel { max-width: 880px; margin: 0 auto; color: var(--ap-paper); }
@media (prefers-color-scheme: dark) { [data-design="a"] .ap-guarantee__panel { color: var(--ap-ink); } }
[data-design="a"] .ap-guarantee__stamp { color: rgba(242,234,214,.7); }
@media (prefers-color-scheme: dark) { [data-design="a"] .ap-guarantee__stamp { color: var(--ap-muted); } }
[data-design="a"] .ap-guarantee__quote { margin: 0 0 var(--ap-space-folio); }
[data-design="a"] .ap-guarantee__quote p {
  font-family: var(--ap-font-display); font-style: italic;
  font-size: clamp(24px, 4vw, 36px); line-height: 1.28;
}
[data-design="a"] .ap-guarantee__sub {
  font-family: var(--ap-font-body); font-size: var(--ap-text-md);
  color: rgba(242,234,214,.86); max-width: 52ch;
  padding-top: var(--ap-space-folio); border-top: 1px solid rgba(242,234,214,.3);
}
@media (prefers-color-scheme: dark) { [data-design="a"] .ap-guarantee__sub { color: var(--ap-ink-soft); border-top-color: var(--ap-rule); } }
[data-design="a"] .ap-guarantee__facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--ap-space-folio); margin: var(--ap-space-column) 0 0;
}
[data-design="a"] .ap-guarantee__fact { border-top: 2px solid var(--ap-ochre); padding-top: var(--ap-space-pica); }
[data-design="a"] .ap-guarantee__fact dt {
  font-family: var(--ap-font-stamp); font-size: var(--ap-text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242,234,214,.7); margin-bottom: 6px;
}
@media (prefers-color-scheme: dark) { [data-design="a"] .ap-guarantee__fact dt { color: var(--ap-muted); } }
[data-design="a"] .ap-guarantee__fact dd { margin: 0; font-family: var(--ap-font-body); font-size: var(--ap-text-base); }

/* ============================================================ */
/* ELEMENT 4 — ROOF SYSTEMS "The Almanac Roll" (unfurl)         */
/* ============================================================ */
[data-design="a"] .ap-roll { background: var(--ap-paper); max-width: 1280px; margin: 0 auto; }
[data-design="a"] .ap-roll__title {
  font-family: var(--ap-font-display); font-weight: 700;
  font-size: var(--ap-text-2xl); line-height: 1.05; letter-spacing: -0.01em; color: var(--ap-ink);
}
[data-design="a"] .ap-roll__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ap-rule); }
[data-design="a"] .ap-roll__item {
  display: grid; grid-template-columns: auto 1fr 2fr;
  gap: var(--ap-space-column); align-items: baseline;
  padding: var(--ap-space-folio) 0; border-bottom: 1px solid var(--ap-rule);
  position: relative;
  clip-path: inset(0 100% 0 0); opacity: 0;
  transition: clip-path var(--ap-dur-unfurl) var(--ap-ease-paper), opacity var(--ap-dur-unfurl) var(--ap-ease-paper);
}
[data-design="a"] .ap-roll__item--revealed { clip-path: inset(0 0 0 0); opacity: 1; }
[data-design="a"] .ap-roll__item--revealed::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: var(--ap-cyan); opacity: 0;
  animation: ap-roll-second-pass 800ms var(--ap-ease-paper) 320ms forwards;
}
@keyframes ap-roll-second-pass { to { opacity: .55; } }
[data-design="a"] .ap-roll__num { font-family: var(--ap-font-stamp); font-size: var(--ap-text-xs); letter-spacing: 0.12em; color: var(--ap-muted); text-transform: uppercase; min-width: 6ch; }
[data-design="a"] .ap-roll__name { font-family: var(--ap-font-display); font-size: var(--ap-text-md); color: var(--ap-ink); }
[data-design="a"] .ap-roll__copy { font-family: var(--ap-font-body); font-size: var(--ap-text-base); color: var(--ap-ink-soft); }
[data-design="a"] .ap-roll__item:hover .ap-roll__name { color: var(--ap-brick); }

/* ============================================================ */
/* PROCESS — phase track                                        */
/* ============================================================ */
[data-design="a"] .ap-process { background: var(--ap-paper-deep); }
[data-design="a"] .ap-process__head { max-width: 60ch; margin-left: auto; margin-right: auto; }
[data-design="a"] .ap-process__lede { font-size: var(--ap-text-base); color: var(--ap-ink-soft); }
[data-design="a"] .ap-process__track {
  list-style: none; padding: 0; margin: 0; max-width: 1280px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--ap-space-folio);
  margin-inline: auto;
}
[data-design="a"] .ap-process__phase { border-top: 2px solid var(--ap-rule); padding-top: var(--ap-space-leading); }
[data-design="a"] .ap-process__step { font-family: var(--ap-font-mono); font-size: var(--ap-text-lg); color: var(--ap-brick); display: block; margin-bottom: var(--ap-space-em); }
[data-design="a"] .ap-process__name { font-family: var(--ap-font-display); font-size: var(--ap-text-md); color: var(--ap-ink); margin-bottom: 6px; }
[data-design="a"] .ap-process__copy { font-family: var(--ap-font-body); font-size: var(--ap-text-sm); color: var(--ap-ink-soft); }

/* ============================================================ */
/* SERVICE AREA                                                 */
/* ============================================================ */
[data-design="a"] .ap-area { background: var(--ap-paper); }
[data-design="a"] .ap-area__body { max-width: 1280px; margin: 0 auto; }
[data-design="a"] .ap-area__copy { font-size: var(--ap-text-md); color: var(--ap-ink-soft); max-width: 60ch; margin-bottom: var(--ap-space-folio); }
[data-design="a"] .ap-area__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--ap-space-pica); }
[data-design="a"] .ap-area__chips li {
  font-family: var(--ap-font-stamp); font-size: var(--ap-text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-ink);
  padding: 8px 14px; border: 1px solid var(--ap-rule); background: var(--ap-paper-deep);
}

/* ============================================================ */
/* CLOSING CTA                                                  */
/* ============================================================ */
[data-design="a"] .ap-close { background: var(--ap-ink); }
[data-design="a"] .ap-close__stamp { color: rgba(242,234,214,.6); }
[data-design="a"] .ap-close__title {
  font-family: var(--ap-font-display); font-weight: 700;
  font-size: var(--ap-text-2xl); line-height: 1.05; color: var(--ap-paper);
  max-width: 18ch;
}
@media (prefers-color-scheme: dark) { [data-design="a"] .ap-close { background: var(--ap-paper-deep); } [data-design="a"] .ap-close__title { color: var(--ap-ink); } [data-design="a"] .ap-close__stamp { color: var(--ap-muted); } }

/* ============================================================ */
/* FOOTER / IMPRINT                                             */
/* ============================================================ */
[data-design="a"] .ap-footer { background: var(--ap-paper-deep); border-top: 1px solid var(--ap-rule); }
[data-design="a"] .ap-footer__rule { height: 2px; background: var(--ap-rule); }
[data-design="a"] .ap-footer__inner {
  max-width: 1280px; margin: 0 auto;
  padding: var(--ap-space-gutter) var(--ap-space-folio) var(--ap-space-folio);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--ap-space-column);
}
[data-design="a"] .ap-footer__mark { font-family: var(--ap-font-display); font-weight: 700; font-size: var(--ap-text-lg); color: var(--ap-ink); }
[data-design="a"] .ap-footer__tag { font-family: var(--ap-font-body); font-size: var(--ap-text-sm); color: var(--ap-muted); margin-top: var(--ap-space-em); max-width: 36ch; }
[data-design="a"] .ap-footer__cols { display: contents; margin: 0; }
[data-design="a"] .ap-footer__col dt {
  font-family: var(--ap-font-stamp); font-size: var(--ap-text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ap-muted); margin-bottom: var(--ap-space-em);
}
[data-design="a"] .ap-footer__col dd { margin: 0 0 6px; font-family: var(--ap-font-body); font-size: var(--ap-text-sm); color: var(--ap-ink-soft); }
[data-design="a"] .ap-footer__data, [data-design="a"] .ap-footer__col dd a { font-family: var(--ap-font-mono); color: var(--ap-cyan); text-decoration: none; word-break: break-word; }
[data-design="a"] .ap-footer__base {
  max-width: 1280px; margin: 0 auto;
  padding: var(--ap-space-folio); border-top: 1px solid var(--ap-rule);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--ap-space-leading);
}
[data-design="a"] .ap-footer__copy, [data-design="a"] .ap-footer__stamp {
  font-family: var(--ap-font-stamp); font-size: var(--ap-text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-muted);
}

/* ============================================================ */
/* RESPONSIVE                                                   */
/* ============================================================ */
@media (max-width: 768px) {
  [data-design="a"] section { padding: var(--ap-space-signature) var(--ap-space-folio); }
  [data-design="a"] .ap-funnel__row--3 { grid-template-columns: repeat(2, 1fr); }
  [data-design="a"] .ap-process__track { grid-template-columns: repeat(2, 1fr); }
  [data-design="a"] .ap-guarantee__facts { grid-template-columns: 1fr; }
  [data-design="a"] .ap-footer__inner { grid-template-columns: 1fr 1fr; }
  [data-design="a"] .ap-roll__item { grid-template-columns: auto 1fr; grid-template-rows: auto auto; row-gap: var(--ap-space-em); column-gap: var(--ap-space-leading); }
  [data-design="a"] .ap-roll__copy { grid-column: 1 / -1; }
  [data-design="a"] .ap-work__plate { grid-template-columns: auto 1fr; grid-template-rows: auto auto; row-gap: var(--ap-space-em); }
  [data-design="a"] .ap-work__tag { grid-column: 2; justify-self: start; }
  [data-design="a"] .ap-work__body { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  [data-design="a"] .ap-funnel__row--3, [data-design="a"] .ap-funnel__row--4 { grid-template-columns: 1fr; }
  [data-design="a"] .ap-field-pair { grid-template-columns: 1fr; }
  [data-design="a"] .ap-process__track { grid-template-columns: 1fr; }
  [data-design="a"] .ap-footer__inner { grid-template-columns: 1fr; }
  [data-design="a"] .ap-hero__title { font-size: clamp(38px, 11vw, 52px); }
}

/* ============================================================ */
/* REDUCED MOTION                                               */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .ap-logo__plate--cyan { transform: translate(2px, 1px); transition: none; }
  [data-design="a"] .ap-logo__plate--brick { transform: translate(-2px, -1px); transition: none; }
  [data-design="a"] .ap-header__rule,
  [data-design="a"] .ap-hero__wash,
  [data-design="a"] .ap-pointer__rule,
  [data-design="a"] .ap-pointer__label,
  [data-design="a"] .ap-cta__plate { animation: none !important; }
  [data-design="a"] .ap-hero__ridge { stroke-dashoffset: 0; animation: none; }
  [data-design="a"] .ap-hero__course { transform: scaleX(1); opacity: .26; animation: none; }
  [data-design="a"] .ap-hero__course:nth-child(1) { opacity: .22; }
  [data-design="a"] .ap-pointer__rule, [data-design="a"] .ap-pointer__label { opacity: .7; }
  [data-design="a"] .ap-cta__plate--cyan { transform: translate(3px, 2px); }
  [data-design="a"] .ap-cta__plate--brick { transform: translate(-3px, -2px); }
  [data-design="a"] .ap-funnel__step.is-current { animation: none; }
  [data-design="a"] .ap-roll__item { transition: opacity 200ms linear; clip-path: inset(0 0 0 0); }
  [data-design="a"] .ap-roll__item--revealed::after { animation: none; opacity: .55; }
}

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

/* 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; }