/* ============================================================
   Design B — "Grid & Glaze" — retheme of mizu (Sento Water Room)
   for Las Vegas Tile & Bathroom Remodeling.
   Palette: cool porcelain / wet-slate / grout-line teal — precision-craft,
   grid-honest. Distinct from Site A's warm kiln-card register.
   Motion grammar: mizu's water/ripple physics repurposed as tile-setting
   physics — a tile easing flush into its grid cell IS the droplet-into-pool.
   Scope: EVERYTHING under [data-design="b"].
   ============================================================ */

[data-design="b"] {
  /* ---- Color tokens (~14) ---- */
  --design-b-primary:   #14464A; /* deep grout-teal — anchor */
  --b-surface:          #F2F0EA; /* porcelain white, warm-neutral, never pure white */
  --b-surface-2:        #E7E3D8; /* raised plate / secondary panel */
  --b-ink:               #17201F; /* near-black slate ink, never pure black */
  --b-primary:           #14464A; /* deep grout-teal */
  --b-secondary:         #2F6E70; /* shallower teal — hover / quieter surfaces */
  --b-accent:            #9FD8CE; /* glaze-mist — ripples, focus rings, water accents */
  --b-warm:              #C08A4E; /* fired-clay warm — used sparingly, max twice per screen */
  --b-critical:          #A23B2E; /* seal-red — errors only */
  --b-success:           #4F7A52; /* moss — confirmations only */
  --b-mist:              rgba(20,70,74,0.08); /* hairline rule tint */
  --b-mist-2:            rgba(20,70,74,0.16);
  --b-line:              #C7C1B2; /* neutral hairline on porcelain */
  --b-shadow-tint:       rgba(20,70,74,0.18);

  /* ---- Type ---- */
  --b-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --b-font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --b-font-mono: ui-monospace, 'JetBrains Mono', monospace;

  /* ---- Spacing (4px base) ---- */
  --b-sp-1: 4px;
  --b-sp-2: 8px;
  --b-sp-3: 16px;
  --b-sp-4: 24px;
  --b-sp-5: 48px;
  --b-sp-6: 80px;
  --b-sp-7: 120px;

  /* ---- Motion (mizu grammar, retimed for tile physics) ---- */
  --b-ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --b-ease-ripple: cubic-bezier(0.16, 0.84, 0.44, 1);
  --b-ease-unfurl: cubic-bezier(0.4, 0, 0.2, 1);
  --b-ease-draw:   cubic-bezier(0.65, 0, 0.35, 1);
  --b-dur-tap:     160ms;
  --b-dur-ripple:  640ms;
  --b-dur-unfurl:  480ms;
  --b-dur-amb-mid: 12s;
  --b-dur-amb-long: 20s;

  --b-r-tile: 2px;
  --b-r-stone: 6px;
  --b-r-drop: 999px;

  background: var(--b-surface);
  color: var(--b-ink);
  font-family: var(--b-font-body);
}

[data-design="b"].dq-design * { box-sizing: border-box; }
[data-design="b"].dq-design img, [data-design="b"].dq-design svg:not([data-keep-size]) { max-width: 100%; height: auto; display: block; }

[data-design="b"] .b-container {
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

[data-design="b"].dq-design section { position: relative; }

[data-design="b"].dq-design h1, [data-design="b"].dq-design h2, [data-design="b"].dq-design h3 {
  font-family: var(--b-font-display);
  color: var(--b-ink);
  margin: 0;
  line-height: 1.15;
}

[data-design="b"].dq-design p { line-height: 1.6; margin: 0; }

[data-design="b"] .b-eyebrow {
  font-family: var(--b-font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--b-secondary);
  margin: 0 0 var(--b-sp-2);
}

/* ============================================================
   ELEMENT 1 — Animated minimalist header
   Grammar: a hairline grout-line at the header base draws left->right on
   first paint; a slow grid-shadow drift behind the bar; noren-style drawer
   retooled as a "grout sheet" unfurl.
   ============================================================ */
[data-design="b"] .b-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--b-surface);
  padding: var(--b-sp-4) clamp(20px, 5vw, 48px);
  isolation: isolate;
}
[data-design="b"] .b-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 2;
  max-width: 1360px; margin-inline: auto;
}
[data-design="b"] .b-logo { text-decoration: none; }
[data-design="b"] .b-logo__mark {
  font-family: var(--b-font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--b-ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}
[data-design="b"] .b-hamburger {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 6px; min-height: 44px; min-width: 44px;
  justify-content: center;
}
[data-design="b"] .b-hamburger__rule {
  display: block; width: 26px; height: 1px; background: var(--b-ink);
  transition: transform var(--b-dur-tap) var(--b-ease-settle);
}
[data-design="b"] .b-hamburger[aria-expanded="true"] .b-hamburger__rule:first-child { transform: translateY(3px) rotate(3deg); }
[data-design="b"] .b-hamburger[aria-expanded="true"] .b-hamburger__rule:last-child  { transform: translateY(-4px) rotate(-3deg); }

[data-design="b"] .b-header__hairline {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--b-primary); opacity: 0;
  transform: scaleX(0); transform-origin: left;
  animation: b-hairline-draw 1.4s var(--b-ease-draw) 200ms forwards;
}
@keyframes b-hairline-draw {
  from { opacity: 0.7; transform: scaleX(0); }
  to   { opacity: 0.7; transform: scaleX(1); }
}

/* Ambient grid-shadow drift atmosphere layer in the header band */
[data-design="b"] .b-header__grid {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1;
}
[data-design="b"] .b-header__grid::before {
  content: "";
  position: absolute; top: -20%; right: -10%; width: 46%; height: 220%;
  background-image:
    linear-gradient(var(--b-mist) 1px, transparent 1px),
    linear-gradient(90deg, var(--b-mist) 1px, transparent 1px);
  background-size: 22px 22px;
  transform: translateX(0) rotate(6deg);
  animation: b-grid-drift var(--b-dur-amb-long) linear infinite;
  opacity: 0.6;
}
@keyframes b-grid-drift {
  0%   { transform: translate(0, 0) rotate(6deg); }
  50%  { transform: translate(-14px, 10px) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(6deg); }
}

/* Drawer — "grout sheet" unfurl (retooled noren) */
[data-design="b"] .b-drawer {
  position: fixed; inset: 0; z-index: 40;
  display: grid; grid-template-rows: 1fr auto 1fr;
  pointer-events: none;
}
[data-design="b"] .b-drawer[hidden] { display: none; }
[data-design="b"] .b-drawer__panel {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: var(--b-surface);
  transform: translateY(-100%);
  transition: transform var(--b-dur-unfurl) var(--b-ease-unfurl);
}
[data-design="b"] .b-drawer__panel--left { left: 0; }
[data-design="b"] .b-drawer__panel--right { right: 0; transition-delay: 60ms; }
[data-design="b"] .b-drawer.is-open .b-drawer__panel { transform: translateY(0); }
[data-design="b"] .b-drawer__rule {
  position: absolute; top: 34%; left: 0; right: 0; height: 1px;
  background: var(--b-primary); transform: scaleX(0); transform-origin: left;
  transition: transform 640ms var(--b-ease-ripple) 180ms;
}
[data-design="b"] .b-drawer.is-open .b-drawer__rule { transform: scaleX(1); }
[data-design="b"] .b-drawer__list {
  position: relative; z-index: 1; align-self: center; justify-self: center;
  list-style: none; padding: 0; margin: 0;
  font-family: var(--b-font-display); font-size: clamp(28px, 5.6vw, 48px);
  text-align: center; pointer-events: auto;
  opacity: 0; transform: translateY(8px);
  transition: opacity 320ms var(--b-ease-settle) 280ms, transform 320ms var(--b-ease-settle) 280ms;
}
[data-design="b"] .b-drawer.is-open .b-drawer__list { opacity: 1; transform: translateY(0); pointer-events: auto; }
[data-design="b"] .b-drawer__list li { margin: var(--b-sp-3) 0; }
[data-design="b"] .b-drawer__list a { color: var(--b-ink); text-decoration: none; }
[data-design="b"] .b-drawer__list a:hover { color: var(--b-primary); }
[data-design="b"] .b-drawer__phone {
  display: inline-flex; align-items: center; gap: var(--b-sp-2);
  font-family: var(--b-font-mono); font-size: 16px; color: var(--b-primary);
  margin-top: var(--b-sp-3);
}
[data-design="b"] .b-drawer__close {
  position: absolute; top: var(--b-sp-4); right: var(--b-sp-4);
  background: transparent; border: 0; font-family: var(--b-font-body);
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--b-ink); cursor: pointer; pointer-events: auto;
  opacity: 0; transition: opacity 220ms var(--b-ease-settle) 380ms;
  min-height: 44px; min-width: 44px;
}
[data-design="b"] .b-drawer.is-open .b-drawer__close { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-header__hairline { animation: none; opacity: 0.7; transform: scaleX(1); }
  [data-design="b"] .b-header__grid::before { animation: none; }
  [data-design="b"] .b-drawer__panel, [data-design="b"] .b-drawer__rule, [data-design="b"] .b-drawer__list { transition-duration: 0ms; }
}

/* ============================================================
   HERO — one animated backdrop layer (grid-lay tessellation), arrival
   then sustained ambient life. NO directional primitive.
   ============================================================ */
[data-design="b"] .b-hero {
  isolation: isolate;
  position: relative;
  min-height: 86vh;
  display: flex; align-items: center;
  padding: var(--b-sp-7) clamp(20px, 5vw, 48px) var(--b-sp-6);
  background: var(--b-surface);
  overflow: clip;
}
[data-design="b"] .b-hero__backdrop {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
/* Grid-lay tessellation: tiles ease into a grid, row by row, then keep a slow
   perceptible glaze-shimmer ambient life at rest (never freezes). */
[data-design="b"] .b-hero__grid {
  position: absolute; inset: -5%;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
  opacity: 0.9;
}
[data-design="b"] .b-hero__cell {
  background: var(--b-primary);
  opacity: 0;
  transform: scale(0.9);
  animation:
    b-cell-lay 900ms var(--b-ease-settle) forwards,
    b-cell-glaze 9s var(--b-ease-ripple) infinite;
}
[data-design="b"] .b-hero__cell:nth-child(10n+1) { animation-delay: 0ms, 8.4s; }
[data-design="b"] .b-hero__cell:nth-child(10n+2) { animation-delay: 40ms, 1.1s; }
[data-design="b"] .b-hero__cell:nth-child(10n+3) { animation-delay: 80ms, 2.6s; }
[data-design="b"] .b-hero__cell:nth-child(10n+4) { animation-delay: 120ms, 4.1s; }
[data-design="b"] .b-hero__cell:nth-child(10n+5) { animation-delay: 160ms, 5.6s; }
[data-design="b"] .b-hero__cell:nth-child(10n+6) { animation-delay: 200ms, 7.0s; }
[data-design="b"] .b-hero__cell:nth-child(10n+7) { animation-delay: 240ms, 0.4s; }
[data-design="b"] .b-hero__cell:nth-child(10n+8) { animation-delay: 280ms, 3.3s; }
[data-design="b"] .b-hero__cell:nth-child(10n+9) { animation-delay: 320ms, 6.2s; }
[data-design="b"] .b-hero__cell:nth-child(10n+10){ animation-delay: 360ms, 8.9s; }
@keyframes b-cell-lay {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 0.14; transform: scale(1); }
}
@keyframes b-cell-glaze {
  0%, 100% { opacity: 0.14; }
  45% { opacity: 0.34; }
  55% { opacity: 0.34; }
}
[data-design="b"] .b-hero__wash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 78% 30%, var(--b-accent) 0%, transparent 55%);
  opacity: 0.28;
  animation: b-wash-breathe 11s var(--b-ease-ripple) infinite;
}
@keyframes b-wash-breathe {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.32; }
}

[data-design="b"] .b-hero__content {
  position: relative; z-index: 2;
  max-width: 720px;
}
[data-design="b"] .b-hero__headline {
  font-size: clamp(34px, 5.4vw, 64px);
  opacity: 1;
  margin-bottom: var(--b-sp-3);
}
[data-design="b"] .b-hero__subtitle {
  font-family: var(--b-font-body);
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--b-ink);
  opacity: 1;
  max-width: 56ch;
  margin-bottom: var(--b-sp-4);
}
[data-design="b"] .b-hero__proof {
  font-family: var(--b-font-mono);
  font-size: 14px;
  color: var(--b-secondary);
  opacity: 1;
  margin-bottom: var(--b-sp-4);
}
[data-design="b"] .b-hero__chip {
  display: inline-flex; align-items: center; gap: var(--b-sp-2);
  background: var(--b-surface-2);
  border: 1px solid var(--b-line);
  padding: var(--b-sp-1) var(--b-sp-3);
  border-radius: var(--b-r-stone);
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--b-primary);
  opacity: 1;
  margin-bottom: var(--b-sp-4);
}

@media (max-width: 768px) {
  [data-design="b"] .b-hero { min-height: 92vh; }
  [data-design="b"] .b-hero__grid { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(9, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-hero__cell { animation: b-cell-lay 1ms forwards; opacity: 0.2; }
  [data-design="b"] .b-hero__wash { animation: none; opacity: 0.22; }
}

/* ============================================================
   ELEMENT 2 — Funnel-anchor CTA (single, dominant, hero)
   Grammar: a glaze-drop hovers above the tile-button and settles flush
   every 5s (tile easing into its grid cell = the droplet-into-pool beat).
   ============================================================ */
[data-design="b"] .b-cta {
  position: relative; display: inline-flex; align-items: center; gap: var(--b-sp-3);
  padding: 18px 28px 18px 26px; min-height: 56px;
  background: var(--b-primary); color: var(--b-surface);
  font-family: var(--b-font-body); font-size: 15px; letter-spacing: 0.04em;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--b-r-tile); overflow: hidden; isolation: isolate;
  transition: transform var(--b-dur-tap) var(--b-ease-settle), background var(--b-dur-tap) var(--b-ease-settle);
}
[data-design="b"] .b-cta__label { position: relative; z-index: 2; }
[data-design="b"] .b-cta__tile {
  position: absolute; top: -8px; right: 22px; z-index: 2;
  width: 10px; height: 10px; background: var(--b-accent);
  border-radius: var(--b-r-tile);
  animation: b-cta-settle 5s var(--b-ease-ripple) infinite;
}
[data-design="b"] .b-cta__ripple {
  position: absolute; top: 50%; right: 22px; z-index: 1;
  width: 6px; height: 6px; border: 1px solid var(--b-accent);
  border-radius: 50%; opacity: 0; transform: translate(50%, -50%) scale(1);
  animation: b-cta-ring 5s var(--b-ease-ripple) infinite;
}
@keyframes b-cta-settle {
  0%, 70% { transform: translateY(0) rotate(0deg); opacity: 1; }
  78%     { transform: translateY(18px) rotate(8deg); opacity: 1; }
  82%     { transform: translateY(18px) rotate(8deg); opacity: 0; }
  100%    { transform: translateY(0) rotate(0deg); opacity: 1; }
}
@keyframes b-cta-ring {
  0%, 78% { opacity: 0; transform: translate(50%, -50%) scale(1); }
  82%     { opacity: 0.8; transform: translate(50%, -50%) scale(1); }
  100%    { opacity: 0; transform: translate(50%, -50%) scale(16); }
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-cta:hover { background: var(--b-secondary); }
  [data-design="b"] .b-cta:hover .b-cta__tile { animation-duration: 1.4s; }
}
[data-design="b"] .b-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--b-accent); }
[data-design="b"] .b-cta:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-cta__tile, [data-design="b"] .b-cta__ripple { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   E6 — Pointer between hero and funnel (grid-lay / grout-line register)
   Grammar: a grout line draws taut downward between two tile edges, then
   a droplet gathers and falls toward the estimator anchor.
   ============================================================ */
[data-design="b"] .b-pointer {
  display: flex; justify-content: center;
  padding: clamp(32px, 6vw, 56px) 16px clamp(40px, 7vw, 64px);
  opacity: 1;
}
[data-design="b"] .b-pointer__hit {
  position: relative; display: inline-block;
  width: 2px; height: 88px;
  text-decoration: none;
}
[data-design="b"] .b-pointer__line {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, var(--b-primary) 100%);
  transform-origin: top center;
  animation: b-pointer-fill 5s ease-in-out infinite;
  opacity: 0.7;
}
[data-design="b"] .b-pointer__drop {
  position: absolute; left: 50%; bottom: -4px;
  width: 8px; height: 8px; margin-left: -4px;
  background: var(--b-primary);
  border-radius: var(--b-r-tile);
  transform: translateY(-64px) scale(0.4) rotate(45deg);
  opacity: 0;
  animation: b-pointer-drop 5s ease-in infinite;
}
@keyframes b-pointer-fill {
  0%, 100% { transform: scaleY(0.4); opacity: 0.45; }
  60%      { transform: scaleY(1);   opacity: 0.85; }
}
@keyframes b-pointer-drop {
  0%, 55%  { transform: translateY(-64px) scale(0.4) rotate(45deg); opacity: 0; }
  70%      { transform: translateY(-64px) scale(1) rotate(45deg);   opacity: 1; }
  92%      { transform: translateY(0) scale(1) rotate(45deg);       opacity: 1; }
  100%     { transform: translateY(0) scale(0.2) rotate(45deg);     opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-pointer__line, [data-design="b"] .b-pointer__drop { animation: none; opacity: 0.5; }
}

/* ============================================================
   ELEMENT 5 — THE ESTIMATOR (funnel). EST-8: one step visible at a time.
   Tactile grammar: choice chips ease flush into a grid cell on select
   (the tile-settle physics reused as the funnel's answer interaction).
   ============================================================ */
[data-design="b"] .b-funnel {
  padding: var(--b-sp-7) clamp(20px, 5vw, 48px);
  background: var(--b-surface-2);
}
[data-design="b"] .b-funnel__head { max-width: 720px; margin-bottom: var(--b-sp-5); }
[data-design="b"] .b-funnel__head h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: var(--b-sp-2);
}
[data-design="b"] .b-funnel__lede {
  font-family: var(--b-font-body); font-size: 17px; color: var(--b-ink);
  max-width: 56ch;
}

[data-design="b"] .b-estimator {
  background: var(--b-surface);
  border: 1px solid var(--b-line);
  border-radius: var(--b-r-stone);
  overflow: hidden;
  max-width: 880px;
}

/* Live range readout — persists across all steps, never overlapping chips */
[data-design="b"] .b-estimator__readout {
  padding: var(--b-sp-4) var(--b-sp-4);
  background: var(--b-primary);
  color: var(--b-surface);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--b-sp-2);
}
[data-design="b"] .b-estimator__range {
  font-family: var(--b-font-display);
  font-size: clamp(26px, 3.4vw, 36px);
}
[data-design="b"] .b-estimator__range-note {
  font-family: var(--b-font-body); font-size: 12px; letter-spacing: 0.06em;
  color: var(--b-accent); text-transform: uppercase;
}
[data-design="b"] .b-estimator__steps-indicator {
  font-family: var(--b-font-mono); font-size: 12px; color: var(--b-accent);
}

/* Step body — exactly one step group visible at a time */
[data-design="b"] .b-estimator__body {
  padding: var(--b-sp-5) var(--b-sp-4);
  position: relative;
}
[data-design="b"] .b-estimator__step {
  display: none;
}
[data-design="b"] .b-estimator__step.is-active {
  display: block;
  animation: b-step-in 360ms var(--b-ease-settle);
}
@keyframes b-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-design="b"] .b-estimator__step h3 {
  font-size: clamp(20px, 2.6vw, 26px);
  margin-bottom: var(--b-sp-4);
}
[data-design="b"] .b-estimator__chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--b-sp-3);
}
[data-design="b"] .b-chip {
  appearance: none; cursor: pointer;
  border: 1px solid var(--b-line);
  background: var(--b-surface);
  color: var(--b-ink);
  border-radius: var(--b-r-tile);
  padding: var(--b-sp-4) var(--b-sp-3);
  min-height: 56px;
  text-align: left;
  font-family: var(--b-font-body); font-size: 15px; line-height: 1.4;
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform var(--b-dur-tap) var(--b-ease-settle), border-color var(--b-dur-tap) var(--b-ease-settle), background var(--b-dur-tap) var(--b-ease-settle);
}
[data-design="b"] .b-chip::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--b-accent); opacity: 0;
  transform: translate(-50%, -50%) scale(1);
}
[data-design="b"] .b-chip.is-selected {
  transform: scale(0.98) translateY(-2px);
  border-color: var(--b-primary);
  background: var(--b-surface-2);
}
[data-design="b"] .b-chip.is-selected::after {
  animation: b-chip-ripple 640ms var(--b-ease-ripple) forwards;
}
@keyframes b-chip-ripple {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(24); }
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-chip:hover { border-color: var(--b-secondary); }
}
[data-design="b"] .b-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--b-accent); }

[data-design="b"] .b-estimator__nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--b-sp-5);
  gap: var(--b-sp-3);
  flex-wrap: wrap;
}
[data-design="b"] .b-btn {
  appearance: none; cursor: pointer;
  padding: 14px 22px; min-height: 44px;
  font-family: var(--b-font-body); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: var(--b-r-tile);
  border: 1px solid var(--b-primary);
  transition: transform var(--b-dur-tap) var(--b-ease-settle), background var(--b-dur-tap) var(--b-ease-settle);
}
[data-design="b"] .b-btn--primary { background: var(--b-primary); color: var(--b-surface); }
[data-design="b"] .b-btn--ghost { background: transparent; color: var(--b-ink); }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-btn--primary:hover { background: var(--b-secondary); }
}
[data-design="b"] .b-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--b-accent); }
[data-design="b"] .b-btn:active { transform: translateY(1px); }

/* Capture step */
[data-design="b"] .b-estimator__form {
  display: grid; gap: var(--b-sp-3);
  max-width: 480px;
}
[data-design="b"] .b-field { display: flex; flex-direction: column; gap: 6px; }
[data-design="b"] .b-field__label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--b-secondary);
}
[data-design="b"] .b-field__input {
  appearance: none; background: var(--b-surface-2); color: var(--b-ink);
  border: 1px solid var(--b-line); border-radius: var(--b-r-tile);
  padding: 12px 10px; font-family: var(--b-font-body); font-size: 15px;
  min-height: 44px;
  transition: border-color var(--b-dur-tap) var(--b-ease-settle);
}
[data-design="b"] .b-field__input:focus-visible { outline: none; border-color: var(--b-primary); }
[data-design="b"] .b-estimator__summary {
  background: var(--b-surface-2); border: 1px solid var(--b-line);
  border-radius: var(--b-r-tile); padding: var(--b-sp-3);
  font-family: var(--b-font-mono); font-size: 13px; color: var(--b-ink);
  margin-bottom: var(--b-sp-3);
}
[data-design="b"] .b-estimator__done {
  text-align: center; padding: var(--b-sp-5) var(--b-sp-3);
}
[data-design="b"] .b-hanko {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--b-success); color: var(--b-surface);
  font-family: var(--b-font-display); font-size: 26px;
  margin-bottom: var(--b-sp-3);
}
[data-design="b"] .b-estimator__ballpark-note {
  font-size: 13px; color: var(--b-secondary); margin-top: var(--b-sp-3);
}

@media (max-width: 560px) {
  [data-design="b"] .b-estimator__readout { flex-direction: column; align-items: flex-start; }
  [data-design="b"] .b-estimator__body { padding: var(--b-sp-4) var(--b-sp-3); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-chip, [data-design="b"] .b-btn, [data-design="b"] .b-estimator__step { transition-duration: 0ms; animation: none !important; }
}

/* ============================================================
   ELEMENT 4 — Ambient content segment B (Waterproofing cutaway)
   Grammar: a membrane layer illuminating behind a schematic tile cutaway.
   ============================================================ */
[data-design="b"] .b-waterproof {
  padding: var(--b-sp-7) clamp(20px, 5vw, 48px);
  background: var(--b-primary);
  color: var(--b-surface);
}
[data-design="b"] .b-waterproof__grid {
  display: grid; gap: var(--b-sp-5);
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.6fr);
  align-items: center;
}
@media (max-width: 768px) {
  [data-design="b"] .b-waterproof__grid { grid-template-columns: 1fr; }
}
[data-design="b"] .b-waterproof h2 { color: var(--b-surface); font-size: clamp(28px, 4vw, 40px); margin-bottom: var(--b-sp-3); }
[data-design="b"] .b-waterproof__copy { font-size: 17px; color: var(--b-surface); max-width: 60ch; opacity: 0.92; }
[data-design="b"] .b-waterproof .b-eyebrow { color: var(--b-accent); }

[data-design="b"] .b-cutaway { display: flex; justify-content: center; }
[data-design="b"] .b-cutaway svg { width: clamp(160px, 22vw, 240px); height: auto; }
[data-design="b"] .b-cutaway__membrane {
  opacity: 0.5;
  animation: b-membrane-glow 6s var(--b-ease-ripple) infinite;
}
@keyframes b-membrane-glow {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .b-cutaway__membrane { animation: none; opacity: 0.55; }
}

/* ============================================================
   Gallery / completed work — close, honest photography
   ============================================================ */
[data-design="b"] .b-gallery {
  padding: var(--b-sp-7) clamp(20px, 5vw, 48px);
  background: var(--b-surface);
}
[data-design="b"] .b-gallery__head { max-width: 720px; margin-bottom: var(--b-sp-5); }
[data-design="b"] .b-gallery__head h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: var(--b-sp-2); }
[data-design="b"] .b-gallery__grid {
  display: grid; gap: var(--b-sp-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) { [data-design="b"] .b-gallery__grid { grid-template-columns: 1fr; } }
[data-design="b"] .b-gallery__item {
  background: var(--b-surface-2);
  border: 1px solid var(--b-line);
  border-radius: var(--b-r-stone);
  overflow: hidden;
}
[data-design="b"] .b-gallery__photo { width: 100%; aspect-ratio: 4/3; overflow: hidden; }
[data-design="b"] .b-gallery__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--b-ease-settle);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-gallery__item:hover .b-gallery__photo img { transform: scale(1.03); }
}
[data-design="b"] .b-gallery__meta { padding: var(--b-sp-3); }
[data-design="b"] .b-gallery__meta h3 { font-size: 19px; margin-bottom: 4px; }
[data-design="b"] .b-gallery__meta p { font-size: 14px; color: var(--b-secondary); }

[data-design="b"] .b-gallery__repeat-cta { margin-top: var(--b-sp-5); text-align: left; }

/* ============================================================
   Process / Tile types / About / Service area / Reviews / Footer
   ============================================================ */
[data-design="b"] .b-process {
  padding: var(--b-sp-7) clamp(20px, 5vw, 48px);
  background: var(--b-surface-2);
}
[data-design="b"] .b-process__head { max-width: 720px; margin-bottom: var(--b-sp-5); }
[data-design="b"] .b-process__head h2 { font-size: clamp(28px, 4vw, 40px); }
[data-design="b"] .b-process__track {
  display: grid; gap: var(--b-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
[data-design="b"] .b-process__phase {
  background: var(--b-surface);
  border: 1px solid var(--b-line);
  border-radius: var(--b-r-tile);
  padding: var(--b-sp-3);
}
[data-design="b"] .b-process__phase-num {
  font-family: var(--b-font-mono); font-size: 12px; color: var(--b-secondary);
  display: block; margin-bottom: var(--b-sp-2);
}
[data-design="b"] .b-process__phase h3 { font-size: 18px; margin-bottom: 4px; }
[data-design="b"] .b-process__phase p { font-size: 14px; }

[data-design="b"] .b-types {
  padding: var(--b-sp-7) clamp(20px, 5vw, 48px);
  background: var(--b-surface);
}
[data-design="b"] .b-types__head { max-width: 720px; margin-bottom: var(--b-sp-5); }
[data-design="b"] .b-types__head h2 { font-size: clamp(28px, 4vw, 40px); }
[data-design="b"] .b-types__grid {
  display: grid; gap: var(--b-sp-3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
[data-design="b"] .b-types__tile {
  background: var(--b-surface-2);
  border: 1px solid var(--b-line);
  border-radius: var(--b-r-tile);
  padding: var(--b-sp-3);
  font-family: var(--b-font-display);
  font-size: 18px;
  transition: background var(--b-dur-tap) var(--b-ease-settle);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-types__tile:hover { background: var(--b-accent); }
}

[data-design="b"] .b-about {
  padding: var(--b-sp-7) clamp(20px, 5vw, 48px);
  background: var(--b-surface-2);
}
[data-design="b"] .b-about__grid {
  display: grid; gap: var(--b-sp-5);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: start;
}
@media (max-width: 768px) { [data-design="b"] .b-about__grid { grid-template-columns: 1fr; } }
[data-design="b"] .b-about h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: var(--b-sp-3); }
[data-design="b"] .b-about__copy { font-size: 17px; max-width: 60ch; }
[data-design="b"] .b-service-area__list {
  display: flex; flex-wrap: wrap; gap: var(--b-sp-2);
  list-style: none; padding: 0; margin: var(--b-sp-3) 0 0;
}
[data-design="b"] .b-service-area__list li {
  background: var(--b-surface);
  border: 1px solid var(--b-line);
  border-radius: var(--b-r-drop);
  padding: 6px 16px;
  font-size: 14px;
}

[data-design="b"] .b-footer {
  padding: var(--b-sp-6) clamp(20px, 5vw, 48px);
  background: var(--b-ink);
  color: var(--b-surface);
}
[data-design="b"] .b-footer__grid {
  display: grid; gap: var(--b-sp-5);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
[data-design="b"] .b-footer h3 { color: var(--b-surface); font-size: 16px; margin-bottom: var(--b-sp-2); }
[data-design="b"] .b-footer p, [data-design="b"] .b-footer a { color: var(--b-surface); opacity: 0.85; font-size: 14px; }
[data-design="b"] .b-footer__bottom {
  margin-top: var(--b-sp-5); padding-top: var(--b-sp-3);
  border-top: 1px solid rgba(242,240,234,0.15);
  font-size: 13px; opacity: 0.7;
}

/* ============================================================
   Styled external anchors (chips) — HARD requirement, every <a href="http">
   ============================================================ */
[data-design="b"] .b-link-chip {
  display: inline-flex; align-items: center; gap: var(--b-sp-2);
  padding: 10px 16px; min-height: 44px;
  border: 1px solid var(--b-line);
  border-radius: var(--b-r-drop);
  color: var(--b-primary);
  text-decoration: none;
  font-size: 14px;
  transition: border-color var(--b-dur-tap) var(--b-ease-settle), background var(--b-dur-tap) var(--b-ease-settle);
}
[data-design="b"] .b-footer .b-link-chip { color: var(--b-surface); border-color: rgba(242,240,234,0.3); }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .b-link-chip:hover { border-color: var(--b-primary); background: var(--b-surface-2); }
  [data-design="b"] .b-footer .b-link-chip:hover { background: rgba(242,240,234,0.08); }
}
[data-design="b"] .b-tel-chip {
  display: inline-flex; align-items: center; gap: var(--b-sp-2);
  color: var(--b-primary); text-decoration: none; font-family: var(--b-font-mono);
  min-height: 44px; padding: 8px 4px;
}

/* ============================================================
   MOBILE / overflow safety (bottom-of-file, per contract)
   ============================================================ */
[data-design="b"].dq-design,[data-design="b"] .dq-design{max-width:100%;overflow-x:clip;}
[data-design="b"].dq-design *{min-width:0;}
[data-design="b"].dq-design img,[data-design="b"].dq-design svg:not([data-keep-size]){max-width:100%;height:auto;}

/* stranded-wrapper autofix (drain 2026-07-03): every fixed max-width column centers — gate content_uncentered_left_stranded */
[data-design="b"] .b-hero__content { margin-inline: auto; }
[data-design="b"] .b-hero__subtitle { margin-inline: auto; }
[data-design="b"] .b-funnel__head { margin-inline: auto; }
[data-design="b"] .b-funnel__lede { margin-inline: auto; }
[data-design="b"] .b-estimator { margin-inline: auto; }
/* Capture step */
[data-design="b"] .b-estimator__form { margin-inline: auto; }
[data-design="b"] .b-waterproof__copy { margin-inline: auto; }
[data-design="b"] .b-gallery__head { margin-inline: auto; }
[data-design="b"] .b-process__head { margin-inline: auto; }
[data-design="b"] .b-types__head { margin-inline: auto; }
[data-design="b"] .b-about__copy { margin-inline: auto; }

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