/* ==========================================================
   THE GARDEN SPECIALISTS LLC — Design B (Fieldmark / slot b)
   All selectors: [data-design="b"] — ZERO [data-design="b"].dq-design
   Keyframes: fm- prefixed (no collision with slot a)
   Tokens: --design-b-* + --fm-* on the root block
   ========================================================== */

/* ── Design token block ── */
[data-design="b"].dq-design,
[data-design="b"] .dq-design {
  /* Colours */
  --design-b-paper:          #EFE6D2;
  --design-b-leaf:           #F7F1E1;
  --design-b-ink:            #2A2118;
  --design-b-ink-soft:       #6E5F47;
  --design-b-rule:           #D6C8A6;
  --design-b-botanical:      #5B6B39;
  --design-b-botanical-deep: #46582C;
  --design-b-specimen:       #A23B1E;
  --design-b-specimen-deep:  #8C2F18;

  /* Alias tokens the shared FM primitives reference */
  --fm-paper:          var(--design-b-paper);
  --fm-leaf:           var(--design-b-leaf);
  --fm-ink:            var(--design-b-ink);
  --fm-ink-soft:       var(--design-b-ink-soft);
  --fm-rule:           var(--design-b-rule);
  --fm-botanical:      var(--design-b-botanical);
  --fm-botanical-deep: var(--design-b-botanical-deep);
  --fm-specimen:       var(--design-b-specimen);
  --fm-specimen-deep:  var(--design-b-specimen-deep);

  /* Primary exposed token */
  --design-b-primary: var(--design-b-specimen);

  /* Typography */
  --fm-font-display: "Cochin", "Hoefler Text", "Libre Caslon Display", "Big Caslon", Georgia, serif;
  --fm-font-body:    "Iowan Old Style", "Spectral", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --fm-font-hand:    "Mansalva", "Caveat", "Segoe Script", cursive;
  --fm-font-tag:     "Cochin", "Hoefler Text", "Libre Caslon Display", Georgia, serif;
  --fm-font-mono:    "Courier Prime", "Courier New", ui-monospace, monospace;

  /* Scale */
  --fm-t-cap:  0.875rem;
  --fm-t-body: 1.0625rem;
  --fm-t-lead: 1.25rem;
  --fm-t-h3:   1.5rem;
  --fm-t-h2:   2.0rem;
  --fm-t-h1:   clamp(2.2rem, 5.5vw, 4rem);

  /* Spacing (4px base) */
  --fm-hair:      4px;
  --fm-rule-gap:  8px;
  --fm-gutter:    16px;
  --fm-specimen:  24px;
  --fm-inset:     32px;
  --fm-folio:     48px;
  --fm-leaf-gap:  72px;
  --fm-spread:    96px;
  --fm-plate-gap: clamp(72px, 12vh, 128px);

  /* Motion */
  --fm-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fm-press:  cubic-bezier(0.3, 0, 0, 1);
  --fm-bloom:  ease-in-out;
  --fm-breath: ease-in-out;

  /* Radius */
  --fm-r-cut:  0;
  --fm-r-tag:  3px;
  --fm-r-hole: 50%;

  /* Elevation */
  --fm-lift-flat:   none;
  --fm-lift-tipped: 0 1px 0 rgba(255,255,255,0.5) inset, 0 10px 24px -12px rgba(42,33,24,0.32);
  --fm-lift-loupe:  0 24px 60px -18px rgba(20,12,4,0.55);

  /* Layout base */
  box-sizing: border-box;
  background: var(--design-b-paper);
  color: var(--design-b-ink);
  font-family: var(--fm-font-body);
  font-size: var(--fm-t-body);
  line-height: 1.6;
  overflow-x: clip;
}

/* Mobile no-hscroll guard */
[data-design="b"].dq-design { max-width: 100%; overflow-x: clip; }
[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;
}

*, *::before, *::after { box-sizing: inherit; }

/* ── Shared eyebrow ── */
[data-design="b"] .fm-eyebrow {
  font-family: var(--fm-font-tag);
  font-variant: small-caps;
  letter-spacing: .14em;
  color: var(--design-b-specimen);
  font-size: var(--fm-t-cap);
  margin: 0 0 var(--fm-rule-gap);
}

/* ── Section inner container (content windowed-center per principles.md §13) ── */
[data-design="b"] .fm-section-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--fm-spread) var(--fm-inset);
}
[data-design="b"] .fm-section-inner--two {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--fm-folio);
  align-items: start;
}

/* ==========================================================
   E1 — ANIMATED MINIMALIST HEADER
   ========================================================== */
[data-design="b"] .fm-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--design-b-paper);
  border-bottom: 1px solid var(--design-b-rule);
  overflow: clip;
}
[data-design="b"] .fm-header__wash {
  position: absolute; inset: -40% -10% auto -10%;
  height: 220%; pointer-events: none; opacity: .5;
  background:
    radial-gradient(60% 80% at 30% 40%,
      color-mix(in oklab, var(--design-b-specimen) 14%, transparent), transparent 70%),
    radial-gradient(50% 70% at 75% 60%,
      color-mix(in oklab, var(--design-b-botanical) 14%, transparent), transparent 70%);
  animation: fm-header-wash 26s var(--fm-bloom) infinite alternate;
}
[data-design="b"] .fm-header__rule {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--design-b-specimen);
  transform-origin: left;
  animation: fm-header-rule 22s ease-in-out infinite alternate;
}
[data-design="b"] .fm-header__bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--fm-gutter); max-width: 72rem; margin: 0 auto;
  padding: var(--fm-rule-gap) var(--fm-inset);
}
[data-design="b"] .fm-logo {
  font-family: var(--fm-font-display); font-size: 1.35rem;
  letter-spacing: .01em; color: var(--design-b-ink); text-decoration: none;
}
[data-design="b"] .fm-burger {
  display: grid; gap: 5px; width: 44px; height: 44px;
  align-content: center; justify-items: end;
  background: none; border: 0; cursor: pointer;
}
[data-design="b"] .fm-burger__line {
  width: 26px; height: 1.5px; background: var(--design-b-ink);
  transition: transform 160ms var(--fm-press);
}
/* Burger hover gated — touch safety */
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .fm-burger:hover .fm-burger__line { background: var(--design-b-specimen); }
}
[data-design="b"] .fm-burger[aria-expanded="true"] .fm-burger__line:first-child {
  transform: translateY(3.5px) rotate(8deg);
}
[data-design="b"] .fm-burger[aria-expanded="true"] .fm-burger__line:last-child {
  transform: translateY(-3px) rotate(-8deg); width: 26px;
}
[data-design="b"] .fm-burger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--design-b-specimen); border-radius: var(--fm-r-tag);
}
/* Index drawer */
[data-design="b"] .fm-index[hidden] { display: none; }
[data-design="b"] .fm-index {
  position: fixed; inset: 0; z-index: 60;
}
[data-design="b"] .fm-index__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--design-b-ink) 30%, transparent);
  opacity: 0; transition: opacity 280ms var(--fm-settle);
}
[data-design="b"] .fm-index__sheet {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(86vw, 22rem);
  background: var(--design-b-leaf);
  border-left: 1px solid var(--design-b-rule);
  box-shadow: var(--fm-lift-tipped);
  padding: var(--fm-inset);
  display: flex; flex-direction: column; gap: var(--fm-folio);
  transform: translateX(100%); transition: transform 280ms var(--fm-settle);
}
[data-design="b"] .fm-index[data-open="true"] .fm-index__backdrop { opacity: 1; }
[data-design="b"] .fm-index[data-open="true"] .fm-index__sheet { transform: translateX(0); }
[data-design="b"] .fm-index__head {
  font-family: var(--fm-font-tag); font-variant: small-caps;
  letter-spacing: .12em; color: var(--design-b-specimen);
  border-bottom: 1px solid var(--design-b-rule); padding-bottom: var(--fm-rule-gap);
}
[data-design="b"] .fm-index__links {
  display: grid; gap: var(--fm-specimen);
  font-family: var(--fm-font-display); font-size: 1.35rem;
}
[data-design="b"] .fm-index__links a { color: var(--design-b-ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .fm-index__links a:hover { color: var(--design-b-specimen); }
}
[data-design="b"] .fm-index__foot {
  margin-top: auto; display: grid; gap: var(--fm-gutter);
  font-family: var(--fm-font-body);
}
[data-design="b"] .fm-drawer-phone {
  color: var(--design-b-ink-soft); font-size: var(--fm-t-body);
  text-decoration: none;
}
@keyframes fm-header-wash {
  from { transform: translate3d(-3%, 0, 0); }
  to   { transform: translate3d(3%, 0, 0); }
}
@keyframes fm-header-rule {
  0%   { opacity: .35; transform: scaleX(.4); }
  100% { opacity: .8;  transform: scaleX(1); }
}

/* ==========================================================
   E3 / HERO — unique animated backdrop (Ken-Burns on real photo)
   ONE animated layer. All text opacity:1. No directional primitives.
   data-mf-role="hero"
   ========================================================== */
[data-design="b"] .fm-hero {
  position: relative;
  min-height: clamp(480px, 72vh, 840px);
  display: flex; align-items: flex-end;
  overflow: clip;
  padding: 0;
}
/* The ONE animated backdrop layer */
[data-design="b"] .fm-hero__backdrop {
  position: absolute; inset: 0; z-index: 0;
}
[data-design="b"] .fm-hero__still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  transform-origin: 52% 48%;
  animation: fm-plate-breath 20s ease-in-out infinite alternate;
}
[data-design="b"] .fm-hero__wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(
      to bottom,
      color-mix(in oklab, var(--design-b-botanical) 22%, transparent) 0%,
      transparent 40%,
      color-mix(in oklab, var(--design-b-ink) 55%, transparent) 100%
    );
  /* NOT a moving layer — static tint under the animated still */
}
/* Double-frame overlay (non-animated — decor only) */
[data-design="b"] .fm-hero__frame {
  position: absolute; inset: var(--fm-gutter); z-index: 2; pointer-events: none;
  border: 1px solid color-mix(in oklab, #fff 25%, transparent);
  outline: 3px solid transparent; outline-offset: -6px;
}
/* Text tag — ALL text opacity:1 at first paint (HARD RULE) */
[data-design="b"] .fm-hero__tag {
  position: relative; z-index: 3;
  max-width: min(90%, 38rem);
  margin: 0 auto var(--fm-inset);
  margin-left: var(--fm-inset);
  background: var(--design-b-leaf);
  border: 1px solid var(--design-b-rule);
  border-radius: var(--fm-r-tag);
  padding: var(--fm-specimen) var(--fm-inset);
  box-shadow: var(--fm-lift-tipped);
  display: grid; gap: var(--fm-rule-gap);
}
[data-design="b"] .fm-hero__plateno {
  font-family: var(--fm-font-tag); font-variant: small-caps;
  letter-spacing: .14em; color: var(--design-b-specimen);
  font-size: var(--fm-t-cap);
}
[data-design="b"] .fm-hero__name {
  font-family: var(--fm-font-display);
  font-size: var(--fm-t-h1);
  line-height: 1.1; color: var(--design-b-ink); margin: 0;
}
[data-design="b"] .fm-hero__essence {
  font-family: var(--fm-font-body);
  font-size: var(--fm-t-body); color: var(--design-b-ink);
  max-width: 58ch; margin: 0;
}
[data-design="b"] .fm-hero__proof {
  font-family: var(--fm-font-mono); font-size: .8rem;
  letter-spacing: .02em; color: var(--design-b-ink-soft); margin: 0;
}
[data-design="b"] .fm-hero__chip {
  justify-self: start;
  font-family: var(--fm-font-tag); font-variant: small-caps;
  letter-spacing: .1em; font-size: .78rem;
  color: var(--design-b-botanical);
  border: 1px solid color-mix(in oklab, var(--design-b-botanical) 50%, var(--design-b-rule));
  border-radius: var(--fm-r-tag); padding: 2px var(--fm-rule-gap);
}
@keyframes fm-plate-breath {
  from { transform: scale(1.0); }
  to   { transform: scale(1.018); }
}

/* ==========================================================
   E2 — SEAL / CTA (data-mf-role="cta")
   Resting opacity:1 everywhere. Confirmation state uses display:none.
   ========================================================== */
[data-design="b"] .fm-seal {
  position: relative; display: inline-flex; align-items: center;
  gap: var(--fm-rule-gap); padding: var(--fm-gutter) var(--fm-specimen);
  min-height: 44px;
  font-family: var(--fm-font-tag); font-variant: small-caps;
  letter-spacing: .08em; font-size: 1rem;
  color: var(--design-b-specimen);
  background: var(--design-b-leaf);
  border: 1px solid var(--design-b-specimen);
  border-radius: var(--fm-r-tag);
  text-decoration: none; cursor: pointer;
  box-shadow: var(--fm-lift-tipped);
  transition: transform 160ms var(--fm-press), box-shadow 160ms var(--fm-press);
}
[data-design="b"] .fm-seal__label { position: relative; }
[data-design="b"] .fm-seal__label::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1.5px; background: var(--design-b-specimen);
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms var(--fm-settle);
}
[data-design="b"] .fm-seal__mark {
  display: inline-flex;
  animation: fm-seal-breath 5s ease-in-out infinite;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .fm-seal:hover { transform: translateY(-1px); }
  [data-design="b"] .fm-seal:hover .fm-seal__label::after { transform: scaleX(1); }
}
[data-design="b"] .fm-seal:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--design-b-specimen) 35%, transparent);
}
[data-design="b"] .fm-seal:active {
  transform: translateY(1px) scale(.98);
  box-shadow: var(--fm-lift-flat);
}
@keyframes fm-seal-breath {
  0%,100% { transform: translate3d(0, 0, 0); opacity: .85; }
  50%      { transform: translate3d(1px, -1px, 0); opacity: 1; }
}
[data-design="b"] .fm-hero__cta { margin-top: var(--fm-rule-gap); justify-self: start; }
[data-design="b"] .fm-seal--drawer { width: 100%; justify-content: center; }

/* ==========================================================
   E6 — POINTER: ink rule + maple-samara seed
   data-mf-role="pointer". opacity:1, height≥8px. Last before #funnel.
   ========================================================== */
[data-design="b"] .fm-pointer {
  display: grid; justify-items: center; gap: var(--fm-rule-gap);
  padding: var(--fm-folio) var(--fm-gutter) var(--fm-inset);
  /* Explicitly visible — gate checks opacity:1 + bounding-box height */
  opacity: 1; min-height: 120px;
}
[data-design="b"] .fm-pointer__rule { width: 2px; height: 96px; }
[data-design="b"] .fm-pointer__line {
  stroke-dasharray: 96; stroke-dashoffset: 96;
  transition: stroke-dashoffset 1.4s var(--fm-settle);
}
[data-design="b"] .fm-pointer.is-in .fm-pointer__line { stroke-dashoffset: 0; }
[data-design="b"] .fm-pointer__seed { width: 32px; height: auto; }
[data-design="b"] .fm-pointer.is-in .fm-pointer__seed {
  animation: fm-pointer-drift 6s ease-in-out infinite;
}
[data-design="b"] .fm-pointer__label {
  font-family: var(--fm-font-hand); font-size: 1.05rem;
  color: var(--design-b-ink-soft);
  /* opacity:1 at first paint — draw-in transitions label only into view */
  opacity: 1;
  cursor: pointer;
}
@keyframes fm-pointer-drift {
  0%   { transform: translate3d(0, -4px, 0) rotate(-6deg); }
  50%  { transform: translate3d(3px, 4px, 0) rotate(6deg); }
  100% { transform: translate3d(0, -4px, 0) rotate(-6deg); }
}

/* ==========================================================
   E5 — FUNNEL: routing qualifying intake
   id="funnel". All funnel-option buttons opacity:1 (entrances transform-only).
   ========================================================== */
[data-design="b"] .fm-funnel {
  background: var(--design-b-leaf);
  border-top: 1px solid var(--design-b-rule);
  border-bottom: 1px solid var(--design-b-rule);
}
[data-design="b"] .fm-funnel__inner {
  max-width: 56rem; margin: 0 auto;
  padding: var(--fm-spread) var(--fm-inset);
}
[data-design="b"] .fm-funnel__title {
  font-family: var(--fm-font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--design-b-ink); margin: 0 0 var(--fm-rule-gap);
}
[data-design="b"] .fm-funnel__sub {
  font-family: var(--fm-font-body); color: var(--design-b-ink-soft);
  max-width: 55ch; margin: 0 0 var(--fm-folio);
}
/* Step dots */
[data-design="b"] .fm-funnel__steps {
  display: flex; align-items: center; gap: 0;
  margin-bottom: var(--fm-folio);
}
[data-design="b"] .fm-step-dot {
  width: 32px; height: 32px; border-radius: var(--fm-r-hole);
  background: var(--design-b-paper); border: 1px solid var(--design-b-rule);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fm-font-mono); font-size: .75rem;
  color: var(--design-b-ink-soft);
  transition: background 280ms var(--fm-settle), color 280ms var(--fm-settle);
}
[data-design="b"] .fm-step-dot[aria-current="step"] {
  background: var(--design-b-specimen); border-color: var(--design-b-specimen);
  color: var(--design-b-leaf);
}
[data-design="b"] .fm-step-dot.is-complete {
  background: var(--design-b-botanical); border-color: var(--design-b-botanical);
  color: var(--design-b-leaf);
}
[data-design="b"] .fm-step-connector {
  flex: 1; height: 1px; background: var(--design-b-rule); max-width: 48px;
}
/* Fieldset reset */
[data-design="b"] .fm-funnel__step {
  border: none; margin: 0; padding: 0;
  animation: fm-step-arrive 280ms var(--fm-settle) both;
}
@keyframes fm-step-arrive {
  from { opacity: 1; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
[data-design="b"] .fm-funnel__legend {
  font-family: var(--fm-font-display);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  color: var(--design-b-ink); margin-bottom: var(--fm-specimen);
  float: none; display: block;
}
/* Funnel option buttons — resting opacity:1 (HARD RULE) */
[data-design="b"] .fm-funnel__options {
  display: grid; gap: var(--fm-gutter);
}
[data-design="b"] .fm-funnel__options--wrap {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
[data-design="b"] .fm-funnel-option {
  display: grid; gap: 4px; text-align: left;
  padding: var(--fm-specimen) var(--fm-inset);
  min-height: 56px; /* ≥56px per layout floor */
  background: var(--design-b-paper);
  border: 1px solid var(--design-b-rule);
  border-radius: var(--fm-r-tag);
  cursor: pointer;
  font-family: var(--fm-font-body);
  color: var(--design-b-ink);
  transition: border-color 160ms var(--fm-press),
              box-shadow 160ms var(--fm-press),
              transform 160ms var(--fm-press);
  /* opacity:1 at rest — entrance is transform-only */
  opacity: 1;
}
[data-design="b"] .fm-funnel-option--sm {
  padding: var(--fm-gutter) var(--fm-specimen);
  font-size: var(--fm-t-body);
}
[data-design="b"] .fm-option__icon {
  font-size: 1.4rem; color: var(--design-b-specimen); line-height: 1;
}
[data-design="b"] .fm-option__label {
  font-weight: 600; font-size: var(--fm-t-lead);
  font-family: var(--fm-font-display);
}
[data-design="b"] .fm-option__sub {
  font-size: var(--fm-t-cap); color: var(--design-b-ink-soft);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .fm-funnel-option:hover {
    border-color: var(--design-b-specimen);
    box-shadow: var(--fm-lift-tipped);
    transform: translateY(-1px);
  }
}
[data-design="b"] .fm-funnel-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--design-b-specimen) 35%, transparent);
}
[data-design="b"] .fm-funnel-option.is-selected {
  border-color: var(--design-b-specimen);
  background: color-mix(in oklab, var(--design-b-specimen) 8%, var(--design-b-paper));
  box-shadow: var(--fm-lift-tipped);
}
/* Form nav / back */
[data-design="b"] .fm-funnel__nav {
  margin-top: var(--fm-gutter); display: flex; align-items: center;
}
[data-design="b"] .fm-funnel__back {
  background: none; border: none; cursor: pointer;
  font-family: var(--fm-font-body); color: var(--design-b-ink-soft);
  font-size: var(--fm-t-body); padding: var(--fm-rule-gap);
  min-height: 44px; min-width: 44px;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .fm-funnel__back:hover { color: var(--design-b-specimen); }
}
/* Fields */
[data-design="b"] .fm-funnel__fields {
  display: grid; gap: var(--fm-gutter);
  grid-template-columns: 1fr 1fr; margin-bottom: var(--fm-gutter);
}
[data-design="b"] .fm-field { display: grid; gap: var(--fm-hair); }
[data-design="b"] .fm-field--full { grid-column: 1 / -1; }
[data-design="b"] .fm-field__label {
  font-family: var(--fm-font-tag); font-variant: small-caps;
  letter-spacing: .1em; font-size: var(--fm-t-cap);
  color: var(--design-b-ink-soft);
}
[data-design="b"] .fm-field__input {
  background: transparent; border: none;
  border-bottom: 1.5px solid var(--design-b-rule);
  padding: var(--fm-rule-gap) 0;
  font-family: var(--fm-font-body); font-size: var(--fm-t-body);
  color: var(--design-b-ink); width: 100%;
  transition: border-color 180ms var(--fm-settle);
}
[data-design="b"] .fm-field__input:focus {
  outline: none; border-bottom-color: var(--design-b-specimen);
}
[data-design="b"] .fm-field__textarea { resize: vertical; min-height: 88px; }
[data-design="b"] .fm-funnel__submit {
  margin-top: var(--fm-gutter); width: 100%; justify-content: center;
}
/* Confirmation — display:none not opacity:0 (HARD RULE) */
[data-design="b"] .fm-funnel__confirm { padding: var(--fm-folio) 0; }
[data-design="b"] .fm-funnel__confirm-head {
  font-family: var(--fm-font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem); color: var(--design-b-ink);
  margin-bottom: var(--fm-rule-gap);
}
[data-design="b"] .fm-funnel__confirm-sub {
  font-family: var(--fm-font-mono); font-size: .85rem;
  color: var(--design-b-ink-soft);
}
/* Trust footer */
[data-design="b"] .fm-funnel__trust {
  border-top: 1px solid var(--design-b-rule); margin-top: var(--fm-folio);
  padding-top: var(--fm-gutter); display: grid; gap: var(--fm-rule-gap);
  font-family: var(--fm-font-mono); font-size: .78rem;
  color: var(--design-b-ink-soft);
}

/* ==========================================================
   OUR WORK — portfolio gallery (photo plates)
   ========================================================== */
[data-design="b"] .fm-work {
  padding: 0;
  border-top: 1px solid var(--design-b-rule);
}
[data-design="b"] .fm-work__title {
  font-family: var(--fm-font-display);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: var(--design-b-ink); margin: var(--fm-rule-gap) 0 var(--fm-gutter);
}
[data-design="b"] .fm-work__intro {
  font-family: var(--fm-font-body); color: var(--design-b-ink-soft);
  max-width: 60ch; margin-bottom: var(--fm-folio);
}
/* Gallery sequence — from E5 design pattern */
[data-design="b"] .fm-gallery__seq {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--fm-plate-gap);
}
[data-design="b"] .fm-mount {
  opacity: 1; transform: translateY(22px) rotate(.5deg);
  transition: transform 280ms var(--fm-settle);
}
[data-design="b"] .fm-mount.is-in {
  opacity: 1; transform: none;
}
[data-design="b"] .fm-mount__fig { margin: 0; }
[data-design="b"] .fm-mount__open {
  display: block; width: 100%; padding: var(--fm-rule-gap);
  background: var(--design-b-leaf); border: 1px solid var(--design-b-rule);
  cursor: zoom-in; box-shadow: var(--fm-lift-tipped);
}
[data-design="b"] .fm-mount__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
}
[data-design="b"] .fm-mount__open:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--design-b-specimen) 35%, transparent);
}
[data-design="b"] .fm-mount__cap {
  font-family: var(--fm-font-hand); font-size: 1.05rem;
  line-height: 1.55; color: var(--design-b-ink);
  padding: var(--fm-gutter) var(--fm-rule-gap) 0;
  opacity: 1;
}
[data-design="b"] .fm-work__cta { margin-top: var(--fm-leaf-gap); }

/* Loupe (lightbox) */
[data-design="b"] .fm-loupe[hidden] { display: none; }
[data-design="b"] .fm-loupe {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: var(--fm-inset);
}
[data-design="b"] .fm-loupe__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--design-b-ink) 72%, transparent);
}
[data-design="b"] .fm-loupe__fig {
  position: relative; margin: 0;
  max-width: min(92vw, 60rem); max-height: 88vh;
  background: var(--design-b-leaf); padding: var(--fm-gutter);
  border: 1px solid var(--design-b-rule); box-shadow: var(--fm-lift-loupe);
  transform: scale(.96); opacity: 0;
  transition: transform 280ms var(--fm-settle), opacity 280ms var(--fm-settle);
}
[data-design="b"] .fm-loupe[data-open="true"] .fm-loupe__fig {
  transform: scale(1); opacity: 1;
}
[data-design="b"] .fm-loupe__img {
  display: block; max-width: 100%; max-height: 72vh; object-fit: contain;
}
[data-design="b"] .fm-loupe__cap {
  font-family: var(--fm-font-hand); font-size: 1.05rem;
  color: var(--design-b-ink); padding-top: var(--fm-gutter); max-width: 60ch;
}
[data-design="b"] .fm-loupe__close {
  position: absolute; top: -14px; right: -14px;
  width: 44px; height: 44px; border-radius: var(--fm-r-hole);
  border: 1px solid var(--design-b-rule); background: var(--design-b-leaf);
  color: var(--design-b-specimen); font-size: 1.4rem; cursor: pointer;
  box-shadow: var(--fm-lift-tipped);
}
[data-design="b"] .fm-loupe__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--design-b-specimen) 40%, transparent);
}

/* ==========================================================
   E4 — AMBIENT CONTENT SEGMENT B: "What grows here" field-notes band
   Botanical sprig draws on scroll + sap-green watercolour wash.
   ========================================================== */
[data-design="b"] .fm-grows {
  position: relative; overflow: clip;
  padding: var(--fm-leaf-gap) var(--fm-gutter);
  display: grid; grid-template-columns: 1fr;
  gap: var(--fm-folio); align-items: center;
  border-top: 1px solid var(--design-b-rule);
}
[data-design="b"] .fm-grows__wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .45;
  background: radial-gradient(60% 70% at 75% 50%,
    color-mix(in oklab, var(--design-b-botanical) 22%, transparent), transparent 72%);
  animation: fm-wash-bloom 20s ease-in-out infinite alternate;
  animation-play-state: paused;
}
[data-design="b"] .fm-grows__inner {
  position: relative; z-index: 1; max-width: 60ch;
}
[data-design="b"] .fm-grows__title {
  font-family: var(--fm-font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--design-b-ink); margin: var(--fm-rule-gap) 0;
}
[data-design="b"] .fm-grows__body {
  font-family: var(--fm-font-body); line-height: 1.65;
  color: var(--design-b-ink);
}
[data-design="b"] .fm-grows__species {
  list-style: none; margin: var(--fm-specimen) 0 0; padding: 0;
  display: grid; gap: var(--fm-rule-gap);
  font-family: var(--fm-font-hand); color: var(--design-b-ink-soft);
}
[data-design="b"] .fm-grows__sprig {
  position: relative; z-index: 1;
  width: clamp(120px, 26vw, 200px); max-width: 100%;
  height: auto; justify-self: center;
}
[data-design="b"] .fm-grows__sprig path {
  stroke-dasharray: 420; stroke-dashoffset: 420;
  transition: stroke-dashoffset 2s var(--fm-settle);
}
[data-design="b"] .fm-grows__sprig .fm-sprig__bud {
  opacity: 0; transition: opacity 280ms var(--fm-settle) .9s;
}
[data-design="b"] .fm-grows.is-in .fm-grows__sprig path { stroke-dashoffset: 0; }
[data-design="b"] .fm-grows.is-in .fm-grows__sprig .fm-sprig__bud { opacity: 1; }
[data-design="b"] .fm-grows.is-in .fm-grows__sprig {
  transform-origin: 100px 312px;
  animation: fm-sprig-stir 16s ease-in-out 2s infinite;
}
[data-design="b"] .fm-grows.is-in .fm-grows__wash {
  animation-play-state: running;
}
@keyframes fm-sprig-stir {
  0%,100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.4deg); }
}
@keyframes fm-wash-bloom {
  from { opacity: .28; transform: scale(.96); }
  to   { opacity: .5;  transform: scale(1.04); }
}

/* ==========================================================
   PROCESS
   ========================================================== */
[data-design="b"] .fm-process {
  border-top: 1px solid var(--design-b-rule);
}
[data-design="b"] .fm-process__title {
  font-family: var(--fm-font-display);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  color: var(--design-b-ink); margin: var(--fm-rule-gap) 0 var(--fm-folio);
}
[data-design="b"] .fm-process__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--fm-specimen);
}
[data-design="b"] .fm-process__step {
  display: flex; gap: var(--fm-inset); align-items: flex-start;
  opacity: 1; transform: translateX(-16px);
  transition: transform 280ms var(--fm-settle);
}
[data-design="b"] .fm-process__step.is-in {
  opacity: 1; transform: none;
}
[data-design="b"] .fm-process__num {
  font-family: var(--fm-font-mono); font-size: 1rem;
  color: var(--design-b-specimen); flex-shrink: 0; width: 2.5rem;
  padding-top: .25rem;
}
[data-design="b"] .fm-process__name {
  font-family: var(--fm-font-display); font-size: var(--fm-t-h3);
  color: var(--design-b-ink); margin: 0 0 var(--fm-hair);
}
[data-design="b"] .fm-process__desc {
  font-family: var(--fm-font-body); color: var(--design-b-ink-soft);
  line-height: 1.6; margin: 0;
}

/* ==========================================================
   SERVICES
   ========================================================== */
[data-design="b"] .fm-services {
  background: var(--design-b-leaf);
  border-top: 1px solid var(--design-b-rule);
}
[data-design="b"] .fm-services__title {
  font-family: var(--fm-font-display);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  color: var(--design-b-ink); margin: var(--fm-rule-gap) 0 var(--fm-rule-gap);
}
[data-design="b"] .fm-services__note {
  font-family: var(--fm-font-body); color: var(--design-b-ink-soft);
  max-width: 60ch; margin-bottom: var(--fm-folio);
}
[data-design="b"] .fm-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--fm-inset);
}
[data-design="b"] .fm-service-card {
  background: var(--design-b-paper);
  border: 1px solid var(--design-b-rule);
  padding: var(--fm-inset);
  opacity: 1; transform: translateY(16px);
  transition: transform 280ms var(--fm-settle);
}
[data-design="b"] .fm-service-card.is-in {
  opacity: 1; transform: none;
}
[data-design="b"] .fm-service-card__name {
  font-family: var(--fm-font-display); font-size: var(--fm-t-lead);
  color: var(--design-b-ink); margin: 0 0 var(--fm-hair);
}
[data-design="b"] .fm-service-card__rate {
  font-family: var(--fm-font-mono); font-size: .9rem;
  color: var(--design-b-specimen); margin: 0 0 var(--fm-rule-gap);
}
[data-design="b"] .fm-service-card__desc {
  font-family: var(--fm-font-body); font-size: var(--fm-t-cap);
  color: var(--design-b-ink-soft); line-height: 1.6; margin: 0;
}
[data-design="b"] .fm-services__extras {
  margin-top: var(--fm-folio); font-family: var(--fm-font-mono);
  font-size: .78rem; color: var(--design-b-ink-soft);
}

/* ==========================================================
   ABOUT
   ========================================================== */
[data-design="b"] .fm-about {
  border-top: 1px solid var(--design-b-rule);
}
[data-design="b"] .fm-about__photo-wrap {
  position: relative;
}
[data-design="b"] .fm-about__photo {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4/5; object-fit: cover;
  border: 1px solid var(--design-b-rule);
  box-shadow: var(--fm-lift-tipped);
}
[data-design="b"] .fm-about__title {
  font-family: var(--fm-font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  color: var(--design-b-ink); margin: var(--fm-rule-gap) 0 var(--fm-gutter);
  line-height: 1.2;
}
[data-design="b"] .fm-about__body {
  font-family: var(--fm-font-body); line-height: 1.65;
  color: var(--design-b-ink); margin-bottom: var(--fm-gutter);
  max-width: 65ch;
}
[data-design="b"] .fm-about__credentials {
  list-style: none; margin: var(--fm-specimen) 0 0; padding: 0;
  display: grid; gap: var(--fm-rule-gap);
  font-family: var(--fm-font-mono); font-size: .82rem;
  color: var(--design-b-ink-soft); border-left: 2px solid var(--design-b-botanical);
  padding-left: var(--fm-gutter);
}

/* ==========================================================
   FOOTER
   ========================================================== */
[data-design="b"] .fm-footer {
  background: var(--design-b-ink);
  border-top: 3px solid var(--design-b-specimen);
  padding: var(--fm-spread) var(--fm-inset);
}
[data-design="b"] .fm-footer .fm-section-inner { padding: 0; max-width: 72rem; margin: 0 auto; }
[data-design="b"] .fm-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--fm-folio);
  margin-bottom: var(--fm-folio);
}
[data-design="b"] .fm-footer__name {
  font-family: var(--fm-font-display); font-size: 1.3rem;
  color: var(--design-b-leaf); margin: 0 0 var(--fm-rule-gap);
}
[data-design="b"] .fm-footer__sub,
[data-design="b"] .fm-footer__license,
[data-design="b"] .fm-footer__cert {
  font-family: var(--fm-font-mono); font-size: .78rem;
  color: color-mix(in oklab, var(--design-b-leaf) 60%, var(--design-b-ink));
  margin: 0 0 4px;
}
[data-design="b"] .fm-footer__label {
  font-family: var(--fm-font-tag); font-variant: small-caps;
  letter-spacing: .12em; color: var(--design-b-specimen);
  font-size: var(--fm-t-cap); margin-bottom: var(--fm-rule-gap);
}
[data-design="b"] .fm-footer__phone,
[data-design="b"] .fm-footer__email {
  display: block; font-family: var(--fm-font-body); font-size: var(--fm-t-body);
  color: var(--design-b-leaf); text-decoration: none; margin-bottom: var(--fm-rule-gap);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .fm-footer__phone:hover,
  [data-design="b"] .fm-footer__email:hover { color: var(--design-b-specimen); }
}
[data-design="b"] .fm-footer__social {
  display: flex; gap: var(--fm-gutter); flex-wrap: wrap; margin-top: var(--fm-rule-gap);
}
[data-design="b"] .fm-footer__soc-link {
  font-family: var(--fm-font-tag); font-variant: small-caps;
  letter-spacing: .1em; font-size: var(--fm-t-cap);
  color: color-mix(in oklab, var(--design-b-leaf) 70%, transparent);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .fm-footer__soc-link:hover { color: var(--design-b-specimen); }
}
[data-design="b"] .fm-footer__seal {
  color: var(--design-b-leaf);
  background: transparent;
  border-color: var(--design-b-specimen);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .fm-footer__seal:hover { background: color-mix(in oklab, var(--design-b-specimen) 12%, transparent); }
}
[data-design="b"] .fm-footer__copy {
  font-family: var(--fm-font-mono); font-size: .72rem;
  color: color-mix(in oklab, var(--design-b-leaf) 40%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--design-b-leaf) 12%, transparent);
  padding-top: var(--fm-gutter); margin: 0;
}

/* ==========================================================
   SCROLL-PARALLAX — TRIAD-2: genuine scroll-driven motion on
   hero→content handoff. CSS scroll-driven animation (GPU-only).
   ========================================================== */
@supports (animation-timeline: scroll()) {
  [data-design="b"] .fm-hero__still {
    animation:
      fm-plate-breath 20s ease-in-out infinite alternate,
      fm-hero-parallax linear both;
    animation-timeline: auto, scroll(root block);
    animation-range: 0% 60%;
  }
  @keyframes fm-hero-parallax {
    from { transform: scale(1.0) translateY(0); }
    to   { transform: scale(1.018) translateY(-6%); }
  }
}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .fm-header__wash { animation: none; }
  [data-design="b"] .fm-header__rule { animation: none; opacity: .7; transform: scaleX(1); }
  [data-design="b"] .fm-index__sheet,
  [data-design="b"] .fm-index__backdrop,
  [data-design="b"] .fm-burger__line { transition: none; }
  [data-design="b"] .fm-hero__still { animation: none; transform: none; }
  [data-design="b"] .fm-seal__mark { animation: none; }
  [data-design="b"] .fm-seal,
  [data-design="b"] .fm-seal__label::after { transition: none; }
  [data-design="b"] .fm-pointer__line { transition: none; stroke-dashoffset: 0; }
  [data-design="b"] .fm-pointer.is-in .fm-pointer__seed { animation: none; }
  [data-design="b"] .fm-grows__sprig path { transition: none; stroke-dashoffset: 0; }
  [data-design="b"] .fm-grows__sprig .fm-sprig__bud { transition: none; opacity: 1; }
  [data-design="b"] .fm-grows.is-in .fm-grows__sprig { animation: none; }
  [data-design="b"] .fm-grows__wash { animation: none; }
  [data-design="b"] .fm-mount { transition: none; opacity: 1; transform: none; }
  [data-design="b"] .fm-mount__cap { transition: none; opacity: 1; }
  [data-design="b"] .fm-loupe__fig { transition: none; transform: none; opacity: 1; }
  [data-design="b"] .fm-process__step { transition: none; transform: none; }
  [data-design="b"] .fm-service-card { transition: none; transform: none; }
  [data-design="b"] .fm-step-dot { transition: none; }
  [data-design="b"] .fm-funnel__step { animation: none; }
}

/* ==========================================================
   RESPONSIVE — no hscroll at 320 / 390 / 768 / 1440
   ========================================================== */
@media (max-width: 960px) {
  [data-design="b"] .fm-section-inner--two {
    grid-template-columns: 1fr;
  }
  [data-design="b"] .fm-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  [data-design="b"] .fm-header__bar { padding: var(--fm-rule-gap) var(--fm-gutter); }
  [data-design="b"] .fm-logo { font-size: 1.1rem; }
  [data-design="b"] .fm-hero__tag {
    margin: 0 var(--fm-gutter) var(--fm-gutter);
    max-width: 100%;
  }
  [data-design="b"] .fm-section-inner { padding: var(--fm-leaf-gap) var(--fm-gutter); }
  [data-design="b"] .fm-funnel__inner { padding: var(--fm-leaf-gap) var(--fm-gutter); }
  [data-design="b"] .fm-funnel__fields { grid-template-columns: 1fr; }
  [data-design="b"] .fm-footer { padding: var(--fm-leaf-gap) var(--fm-gutter); }
  [data-design="b"] .fm-footer__grid { grid-template-columns: 1fr; }
  [data-design="b"] .fm-gallery__seq { overflow-x: visible; }
  [data-design="b"] .fm-mount__img { aspect-ratio: 4/5; }
  [data-design="b"] .fm-grows { grid-template-columns: 1fr; }
  [data-design="b"] .fm-grows__sprig { display: none; }
}
@media (min-width: 768px) {
  [data-design="b"] .fm-grows {
    grid-template-columns: 1.4fr .6fr;
  }
  [data-design="b"] .fm-gallery__seq {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1440px) {
  [data-design="b"] .fm-hero__tag {
    margin-left: calc((100% - 72rem) / 2 + var(--fm-inset));
  }
}

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