/* ============================================================
   Sacred Blueprint — standalone page
   Hero composition follows the Diffui render; execution follows
   DESIGN.md "The Engraved Instrument".

   Deliberate departures from the render, per DESIGN.md:
   - no nebula / moons / starfield      → anti-reference #1, mystical kitsch
   - no glow on ornament                → "always a drawn line, never a fill, never a glow"
   - no new mystical icon art           → reuses the approved assets/shore/ instrument marks
   - Tiffany only on the CTA + roadmap arrow → action only, ~2% of screen
   Surface + metal match Section 06 on the homepage so the two read as one brand.
   ============================================================ */

.bp-page {
  --accent: #c9905f;                      /* copper: base structural metal, for the hero and earliest sections */
  --accent-line: rgba(201, 144, 95, .62);
  --cream: #f4ece0;
  --surface: #0b1113;                     /* cold branch — the imagery is night sky, per the Tide Rule */
  background: var(--surface);
  color: var(--ink);
}

/* ---------- Hero shell ---------- */
.bph {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: max(100vh, 980px);
  padding: calc(1.8vh + 78px + 3.2vh) 3.1vw 3.5vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Photographic ground (DESIGN.md §4): the night sky supplies the real depth,
   the interface stays flat on top of it. Anchored right so the moons and ridge
   sit under the plates and the left half stays dark for the headline.
   Overhangs top and bottom so the parallax never reveals an edge;
   blueprint-parallax.js writes --bph-drift. Only the photograph moves. */
.bph::before {
  content: "";
  position: absolute; inset: -10% 0; z-index: -2; pointer-events: none;
  background: url("assets/blueprint/sky.webp") no-repeat center right / cover;
  transform: translate3d(0, var(--bph-drift, 0px), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .bph::before { transform: none; }
}
/* Legibility wash — a directional gradient on the section, never a panel behind text. */
.bph::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* right edge: gives the margin rails ground to sit on without a panel */
    linear-gradient(270deg, rgba(11, 17, 19, .8) 0%, rgba(11, 17, 19, .5) 9%, rgba(11, 17, 19, 0) 20%),
    linear-gradient(90deg, rgba(11, 17, 19, .94) 0%, rgba(11, 17, 19, .8) 32%, rgba(11, 17, 19, .44) 60%, rgba(11, 17, 19, .2) 100%),
    linear-gradient(180deg, rgba(11, 17, 19, .88) 0%, rgba(11, 17, 19, 0) 24%, rgba(11, 17, 19, 0) 66%, rgba(11, 17, 19, .74) 100%);
}

/* The Diamond Pin Rule: every diamond is filled with ITS OWN section's surface. */
.bph > .deco-frame i { background: var(--surface); }

/* ---------- Layout ---------- */
.bph-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 3.4vw, 76px);
  padding: 0 clamp(16px, 2.4vw, 54px);
}

/* ---------- Left column: the claim ---------- */
.bph-copy { padding-top: clamp(4px, 1.4vh, 22px); }

.bph-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 5.3vw, 86px);
  line-height: .92;
  letter-spacing: -.042em;
  word-spacing: .05em;           /* tracking is tight enough that words collide without this */
  color: var(--ink);
}
.bph-title span { display: block; }

.bph-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16px, 1.52vw, 30px);
  line-height: 1.54;
  color: var(--cream);
  max-width: 24em;
  margin-top: clamp(18px, 2.6vh, 36px);
}

/* mono caption with a rule running off to the right, like a marking on a case */
.bph-process {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: clamp(18px, 2.8vh, 38px);
  color: var(--accent);
  font-size: clamp(11px, 1.02vw, 18px);
  letter-spacing: .26em;
  text-transform: uppercase;
}
.bph-process em {
  flex: 1 1 auto;
  height: 1px;
  max-width: 300px;
  background: var(--accent-line);
  position: relative;
}
.bph-process em::after {
  content: "";
  position: absolute; right: 0; top: -3px;
  width: 1px; height: 7px;
  background: var(--accent-line);
}

/* ---------- Right column: the three numbered plates ---------- */
.bph-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 22px);
  align-items: start;
}

.bph-step {
  position: relative;
  padding: clamp(18px, 2.2vh, 32px) clamp(10px, 1.1vw, 22px) clamp(20px, 2.4vh, 34px);
  border: 1px solid var(--accent-line);
  text-align: center;
}
/* staggered descent, 01 → 02 → 03, as in the render */
.bph-step:nth-child(2) { margin-top: clamp(20px, 3.6vh, 54px); }
.bph-step:nth-child(3) { margin-top: clamp(40px, 7.2vh, 108px); }

/* corner brackets, drawn — this is how depth is made here, never shadow */
.bph-step::before,
.bph-step::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  border: 1px solid var(--accent);
}
.bph-step::before { left: 5px;  top: 5px;    border-right: 0; border-bottom: 0; }
.bph-step::after  { right: 5px; bottom: 5px; border-left: 0;  border-top: 0; }
.bph-step > b {
  position: absolute; inset: 0; pointer-events: none;
}
.bph-step > b::before,
.bph-step > b::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  border: 1px solid var(--accent);
}
.bph-step > b::before { right: 5px; top: 5px;    border-left: 0;  border-bottom: 0; }
.bph-step > b::after  { left: 5px;  bottom: 5px; border-right: 0; border-top: 0; }

/* number badge sitting in the top rule */
.bph-num {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--accent);
  font-size: clamp(10px, .92vw, 16px);
  letter-spacing: .3em;
}
.bph-num::before,
.bph-num::after {
  content: "";
  width: clamp(12px, 1.6vw, 30px);
  height: 1px;
  background: var(--accent-line);
}

.bph-step h2 {
  margin-top: clamp(8px, 1.1vh, 14px);
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(13px, 1.24vw, 23px);
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* instrument mark: a drawn ring with an approved icon inside. Stroked, never filled. */
.bph-mark {
  display: grid;
  place-items: center;
  width: clamp(54px, 5.4vw, 96px);
  height: clamp(54px, 5.4vw, 96px);
  margin: clamp(14px, 2vh, 26px) auto clamp(12px, 1.8vh, 22px);
  border: 1px solid var(--accent-line);
  border-radius: 50%;            /* the one permitted radius: a circular icon ring */
  color: var(--accent);
}
.bph-mark img { width: 56%; height: 56%; opacity: .92; }

.bph-what {
  font-family: var(--mono);
  font-size: clamp(11px, 1.04vw, 19px);
  line-height: 1.7;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}

.bph-sub {
  list-style: none;
  margin-top: clamp(12px, 1.8vh, 22px);
  padding-top: clamp(12px, 1.8vh, 22px);
  border-top: 1px solid rgba(201, 144, 95, .34);
  display: grid;
  gap: 6px;
}
.bph-sub li {
  font-size: clamp(10px, .95vw, 17px);
  line-height: 1.75;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(244, 236, 224, .72);
}

/* ---------- Offer plate ---------- */
.bph-offer {
  position: relative;
  z-index: 2;
  margin: clamp(24px, 3.4vh, 54px) clamp(16px, 2.4vw, 54px) 0;
  width: min(100%, 940px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 48px);
  padding: clamp(22px, 3vh, 40px) clamp(20px, 2.4vw, 46px);
  border: 1px solid var(--accent-line);
}
.bph-offer::before,
.bph-offer::after {
  content: "";
  position: absolute;
  width: 15px; height: 15px;
  border: 1px solid var(--accent);
}
.bph-offer::before { left: 6px;  top: 6px;    border-right: 0; border-bottom: 0; }
.bph-offer::after  { right: 6px; bottom: 6px; border-left: 0;  border-top: 0; }
.bph-offer > b { position: absolute; inset: 0; pointer-events: none; }
.bph-offer > b::before,
.bph-offer > b::after {
  content: "";
  position: absolute;
  width: 15px; height: 15px;
  border: 1px solid var(--accent);
}
.bph-offer > b::before { right: 6px; top: 6px;    border-left: 0;  border-bottom: 0; }
.bph-offer > b::after  { left: 6px;  bottom: 6px; border-right: 0; border-top: 0; }

/* "→ 90-DAY ROADMAP" — the arrow is Tiffany because the roadmap is the thing you act toward */
.bph-roadmap {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.3vw, 24px);
  font-family: var(--mono);
  font-size: clamp(15px, 1.75vw, 33px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.bph-roadmap svg {
  width: clamp(26px, 2.3vw, 42px);
  height: 12px;
  color: var(--action);
  flex: 0 0 auto;
}

.bph-price {
  margin-top: clamp(8px, 1.2vh, 16px);
  padding-bottom: clamp(12px, 1.8vh, 22px);
  border-bottom: 1px solid rgba(201, 144, 95, .34);
  font-family: var(--mono);
  font-size: clamp(14px, 1.6vw, 30px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.bph-price b {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.32em;
  letter-spacing: -.02em;
}

.bph-includes {
  margin-top: clamp(10px, 1.6vh, 20px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(14px, 1.14vw, 22px);
  line-height: 1.54;
  color: var(--cream);
}

/* The page's single action. Tiffany rule + Tiffany arrow. */
.bph-offer .bp-cta {
  margin-top: clamp(16px, 2.4vh, 32px);
  color: var(--ink);             /* system forbids #fff */
  border-color: var(--action);
}
.bph-offer .bp-cta::before,
.bph-offer .bp-cta::after,
.bph-offer .bp-cta i::before,
.bph-offer .bp-cta i::after { border-color: var(--action); }
.bph-offer .bp-cta:hover,
.bph-offer .bp-cta:focus-visible { background: rgba(134, 209, 205, .12); }

/* right half of the plate: the three deliverables */
.bph-deliver {
  list-style: none;
  display: grid;
  gap: clamp(14px, 2.2vh, 28px);
  align-content: center;
  padding-left: clamp(16px, 2.2vw, 44px);
  border-left: 1px solid rgba(201, 144, 95, .34);
}
.bph-deliver li {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.3vw, 22px);
}
.bph-deliver span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(28px, 2.5vw, 44px);
  height: clamp(28px, 2.5vw, 44px);
  color: var(--accent);
}
.bph-deliver span img,
.bph-deliver span svg { width: 100%; height: 100%; }
.bph-deliver p {
  font-size: clamp(11px, 1.02vw, 19px);
  line-height: 1.7;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Margin rails ---------- */
.bph-rail {
  position: absolute;
  z-index: 2;
  color: var(--accent);
  font-size: clamp(10px, .82vw, 15px);
  line-height: 1.9;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: right;
  pointer-events: none;
}
.bph-rail.tr { top: calc(1.8vh + 78px + 4.4vh); right: 4.4vw; }
.bph-rail.mr { right: 4.4vw; bottom: 25%; color: rgba(204, 163, 95, .82); }
.bph-rail.br { right: 4.4vw; bottom: 9%; display: grid; gap: 2px; }

/* bottom rule with a centred caption, like a scale marking */
.bph-base {
  position: relative;
  z-index: 2;
  margin-top: clamp(20px, 2.8vh, 42px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 32px);
  padding: 0 clamp(16px, 2.4vw, 54px);
  color: var(--accent);
  font-size: clamp(10px, .92vw, 17px);
  letter-spacing: .26em;
  text-transform: uppercase;
}
.bph-base::before,
.bph-base::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--accent-line);
}

/* ---------- Wide screens: reserve a true margin-rail gutter ----------
   The rails are markings on the case, so they get their own column rather
   than floating over the plates. */
@media (min-width: 1181px) {
  .bph { --rail-gutter: clamp(132px, 12.6vw, 258px); }
  .bph-grid  { padding-right: var(--rail-gutter); }
  .bph-offer { margin-right: var(--rail-gutter); }
  /* rails live inside that gutter and may never grow past it */
  .bph-rail {
    right: clamp(16px, 1.8vw, 36px);
    max-width: calc(var(--rail-gutter) - clamp(26px, 2.6vw, 50px));
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .bph-grid { grid-template-columns: 1fr; gap: clamp(28px, 4vh, 52px); }
  .bph-rail { display: none; }
  .bph-step:nth-child(2),
  .bph-step:nth-child(3) { margin-top: 0; }
  .bph-offer { grid-template-columns: 1fr; width: 100%; }
  .bph-deliver { padding-left: 0; padding-top: clamp(18px, 2.6vh, 30px); border-left: 0; border-top: 1px solid rgba(201, 144, 95, .34); }
}

@media (max-width: 760px) {
  .bph { min-height: 0; padding: calc(1.8vh + 78px + 3vh) 6vw 7vh; }
  .bph-grid { padding: 0; }
  .bph-steps { grid-template-columns: 1fr; gap: 16px; }
  .bph-title { font-size: clamp(34px, 9.4vw, 58px); }
  .bph-offer { margin-inline: 0; }
  .bph-process em { display: none; }   /* the rule becomes a stray tick once the label wraps */
  .bph-base { padding: 0; }
  .bph-base::before { display: none; }
}

/* ============================================================
   Section 02 — You are not short on gifts
   Composition from the Business_Blueprint_Clarity render.
   Tonal step: cold night hero (#0b1113) → warm near-black here (#211f1d)
   → warm charcoal in the process (#232221). The tide going out.

   Departures from that render, per DESIGN.md:
   - the 01–04 numbers are copper, not Tiffany. Numbers are structure.
   - Tiffany is kept for the one real link in the section, which is also
     this section's single call to action.
   - ornament reuses deco-burst + the four-point star; no new art.
   ============================================================ */

.bpc {
  --accent: #c9905f;                      /* copper: still an early section */
  --accent-line: rgba(201, 144, 95, .62);
  --surface: #211f1d;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface);
  padding: clamp(54px, 9vh, 120px) 3.1vw clamp(48px, 8vh, 104px);
  scroll-margin-top: calc(1.8vh + 78px + 2vh);
}
.bpc::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("assets/reframe/charcoal-grain.webp") repeat;
  background-size: 440px 440px;
  opacity: .34;
  mix-blend-mode: soft-light;
}
.bpc > .deco-frame i { background: var(--surface); }

/* Ornament: gold line art on black, screened so the field drops and the lines
   survive — the same convention as assets/reframe/compass.webp. Generated from
   the Diffui reference; crescent, star field and sunburst in one tall panel.
   It runs the height of the section and is overlapped by the opaque plate. */
.bpc-ornament {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 36%;
  transform: translateY(-50%);
  height: min(94%, 1020px);
  width: auto;
  opacity: .9;
  pointer-events: none;
  mix-blend-mode: screen;
}

.bpc-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 3.6vw, 76px);
  padding: 0 clamp(16px, 2.4vw, 54px);
}

/* ---------- Left: the claim ---------- */
.bpc-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(34px, 4.4vw, 76px);
  line-height: .96;
  letter-spacing: -.042em;
  word-spacing: .05em;
  color: var(--ink);
}
.bpc-title span { display: block; }

.bpc-lede {
  margin-top: clamp(16px, 2.4vh, 32px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16px, 1.5vw, 29px);
  line-height: 1.5;
  color: var(--cream);
  max-width: 24em;
}
.bpc-sub {
  margin-top: clamp(12px, 1.8vh, 24px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(14px, 1.18vw, 23px);
  line-height: 1.56;
  color: rgba(244, 236, 224, .82);
  max-width: 26em;
}

.bpc-divide {
  position: relative;
  height: 1px;
  width: min(100%, 30em);
  margin: clamp(22px, 3.4vh, 44px) 0 clamp(16px, 2.4vh, 28px);
  background: var(--accent-line);
}
.bpc-divide i {
  position: absolute;
  left: 44%; top: 50%;
  width: 15px; height: 15px;
  margin: -8px 0 0 -8px;
  border: 1px solid var(--accent);
  background: var(--surface);
  transform: rotate(45deg);
}

/* this section's single action — a real link, so Tiffany is correct */
.bpc-next {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 22px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16px, 1.42vw, 28px);
  line-height: 1.3;
  color: var(--ink);
  transition: color .45s var(--ease);
}
.bpc-next svg { width: clamp(26px, 2.2vw, 40px); height: 12px; color: var(--action); flex: 0 0 auto; }
.bpc-next:hover,
.bpc-next:focus-visible { color: var(--action); }

.bpc-rail {
  margin-top: clamp(18px, 2.8vh, 34px);
  font-size: clamp(10px, .92vw, 17px);
  line-height: 1.85;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream);
}

/* ---------- Right: the framed panel of four ---------- */
.bpc-panel {
  position: relative;
  background: var(--surface);             /* opaque, so the ornament can run behind it */
  padding: clamp(24px, 3.4vh, 46px) clamp(20px, 2.2vw, 44px);
  border: 1px solid var(--accent-line);
}
/* inner rule removed: one rule per plate */
/* corner brackets between the two rules */
.bpc-panel > b { position: absolute; inset: 0; pointer-events: none; }
.bpc-panel > b::before,
.bpc-panel > b::after,
.bpc-panel > u::before,
.bpc-panel > u::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border: 1px solid var(--accent);
}
.bpc-panel > u { position: absolute; inset: 0; pointer-events: none; text-decoration: none; }
.bpc-panel > b::before { left: 0;  top: 0;    border-right: 0; border-bottom: 0; }
.bpc-panel > b::after  { right: 0; top: 0;    border-left: 0;  border-bottom: 0; }
.bpc-panel > u::before { left: 0;  bottom: 0; border-right: 0; border-top: 0; }
.bpc-panel > u::after  { right: 0; bottom: 0; border-left: 0;  border-top: 0; }
/* diamonds straddling the top and bottom rules */
.bpc-panel > i.d {
  position: absolute;
  left: 50%;
  width: 15px; height: 15px;
  margin-left: -8px;
  border: 1px solid var(--accent);
  background: var(--surface);
  transform: rotate(45deg);
}
.bpc-panel > i.d.t { top: -8px; }
.bpc-panel > i.d.b { bottom: -8px; }

.bpc-list { list-style: none; }
/* one centre axis per row: number, mark, title, body */
.bpc-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: clamp(6px, .9vh, 12px);
  padding: clamp(14px, 2.1vh, 26px) 0;
}
.bpc-list li + li { border-top: 1px solid rgba(201, 144, 95, .3); }

/* scoped to beat .bpc-list p / h3, which also set grid placement */
.bpc-list .bpc-n {
  grid-column: 1;
  font-size: clamp(15px, 1.4vw, 27px);
  letter-spacing: .1em;
  color: var(--accent);                   /* copper: a number is structure, not an action */
  line-height: 1;
}
.bpc-list .bpc-ico {
  grid-column: 1;
  display: grid;
  place-items: center;
  width: clamp(44px, 4.2vw, 74px);
  height: clamp(44px, 4.2vw, 74px);
  margin: clamp(2px, .5vh, 8px) 0 clamp(4px, .7vh, 10px);
  border: 1px solid var(--accent-line);
  border-radius: 50%;                     /* the one permitted radius */
  color: var(--accent);
}
.bpc-ico img, .bpc-ico svg { width: 56%; height: 56%; opacity: .92; }

.bpc-list h3 {
  grid-column: 1;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(15px, 1.36vw, 27px);
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--ink);
  text-align: center;
}
.bpc-list p {
  grid-column: 1;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(13px, 1.04vw, 20px);
  line-height: 1.52;
  color: var(--cream);
  text-align: center;
}

.bpc-foot {
  margin-top: clamp(14px, 2.1vh, 26px);
  padding-top: clamp(14px, 2.1vh, 26px);
  border-top: 1px solid rgba(201, 144, 95, .3);
  text-align: center;
  font-size: clamp(10px, .94vw, 17px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 1180px) {
  .bpc-grid { grid-template-columns: 1fr; gap: clamp(30px, 4.4vh, 56px); }
  .bpc-ornament { left: auto; right: -6vw; height: min(70%, 680px); opacity: .5; }
}

@media (max-width: 760px) {
  .bpc { padding: clamp(44px, 7vh, 72px) 6vw clamp(40px, 6vh, 64px); }
  .bpc-grid { padding: 0; }
  .bpc-ornament { display: none; }
  .bpc-panel { padding: clamp(20px, 3vh, 32px) clamp(14px, 4vw, 26px); }
  .bpc-divide i { left: 50%; }
}

/* ============================================================
   Section 03 — The process
   Composition from the Strategic_Brief_Process render.
   Warm branch: the tide goes out, cold night hero → warm charcoal here.
   Ornament reuses the existing reframe compass + burst; icons reuse assets/shore.

   Departures from that render, per DESIGN.md:
   - the divider diamond is warm metal, not Tiffany. Tiffany means actionable.
   - the render's four step arrows are dropped entirely.
   ============================================================ */

.bpp {
  --accent: #c9a063;                      /* antique gold: the warm-charcoal metal */
  --accent-line: rgba(201, 160, 99, .5);
  --surface: #232221;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface);
  padding: clamp(54px, 9vh, 124px) 3.1vw clamp(48px, 8vh, 110px);
}
.bpp::before {                            /* the charcoal grain used across the warm sections */
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("assets/reframe/charcoal-grain.webp") repeat;
  background-size: 440px 440px;
  opacity: .4;
  mix-blend-mode: soft-light;
}
.bpp > .deco-frame i { background: var(--surface); }

/* Drawn ornament: gold line art on black, so screen drops the field and keeps the lines. */
.bpp-compass,
.bpp-burst {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.bpp-compass { top: clamp(10px, 2vh, 34px); right: 9vw; width: min(28vw, 400px); opacity: .72; }
.bpp-burst   { top: clamp(26px, 5vh, 76px); right: -2vw; width: min(14vw, 210px); opacity: .42; transform: rotate(180deg); }

/* anchors must clear the fixed 78px nav */
.bpp, .bph { scroll-margin-top: calc(1.8vh + 78px + 2vh); }

/* ---------- Head ---------- */
.bpp-head {
  position: relative;
  z-index: 2;
  width: min(52ch, 60%);
  padding: 0 clamp(16px, 2.4vw, 54px);
}
.bpp-head h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(42px, 6vw, 104px);
  line-height: .92;
  letter-spacing: -.042em;
  word-spacing: .05em;
  color: var(--ink);
}
.bpp-claim {
  margin-top: clamp(8px, 1.2vh, 18px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, 1.92vw, 38px);
  line-height: 1.3;
  color: var(--cream);
}
/* rule with a pinned diamond at its centre — gold, because it is ornament */
.bpp-divide {
  position: relative;
  height: 1px;
  margin: clamp(22px, 3.4vh, 46px) 0 clamp(18px, 2.6vh, 32px);
  background: var(--accent-line);
}
.bpp-divide i {
  position: absolute;
  left: 42%;
  top: 50%;
  width: 15px; height: 15px;
  margin: -8px 0 0 -8px;
  border: 1px solid var(--accent);
  background: var(--surface);
  transform: rotate(45deg);
}
.bpp-divide i::after {
  content: "";
  position: absolute; inset: 3px;
  background: var(--accent);
}
.bpp-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(15px, 1.3vw, 25px);
  line-height: 1.54;
  color: var(--cream);
  max-width: 34em;
}

/* ---------- The four steps ---------- */
.bpp-steps {
  position: relative;
  z-index: 2;
  list-style: none;
  margin-top: clamp(46px, 7vh, 96px);
  padding: 0 clamp(16px, 2.4vw, 54px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 28px);
}

.bpp-step {
  position: relative;
  isolation: isolate;
  padding: clamp(34px, 4.4vh, 52px) clamp(14px, 1.5vw, 30px) clamp(20px, 2.6vh, 34px);
  border: 1px solid var(--accent-line);
  display: flex;
  flex-direction: column;
  text-align: center;
}
/* corner brackets — drawn depth, never shadow */
.bpp-step::before,
.bpp-step::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--accent);
}
.bpp-step::before { left: 6px;  top: 6px;    border-right: 0; border-bottom: 0; }
.bpp-step::after  { right: 6px; bottom: 6px; border-left: 0;  border-top: 0; }
.bpp-step > b { position: absolute; inset: 0; pointer-events: none; }
.bpp-step > b::before,
.bpp-step > b::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--accent);
}
.bpp-step > b::before { right: 6px; top: 6px;    border-left: 0;  border-bottom: 0; }
.bpp-step > b::after  { left: 6px;  bottom: 6px; border-right: 0; border-top: 0; }

/* numbered diamond badge straddling the top rule */
.bpp-badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(38px, 3.2vw, 54px);
  height: clamp(38px, 3.2vw, 54px);
  display: grid;
  place-items: center;
  isolation: isolate;
  color: var(--accent);
  font-size: clamp(11px, .96vw, 17px);
  letter-spacing: .16em;
}
.bpp-badge::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--accent);
  background: var(--surface);
  transform: rotate(45deg);
}

.bpp-mark {
  display: grid;
  place-items: center;
  width: clamp(62px, 6.2vw, 112px);
  height: clamp(62px, 6.2vw, 112px);
  margin: clamp(6px, 1vh, 14px) auto clamp(16px, 2.4vh, 30px);
  border: 1px solid var(--accent-line);
  border-radius: 50%;                      /* the one permitted radius: a circular icon ring */
  color: var(--accent);
}
.bpp-mark img { width: 58%; height: 58%; opacity: .92; }

.bpp-step h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(16px, 1.42vw, 28px);
  line-height: 1.26;
  letter-spacing: -.015em;
  color: var(--ink);
}
.bpp-step p {
  margin-top: clamp(10px, 1.5vh, 18px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(14px, 1.12vw, 22px);
  line-height: 1.54;
  color: var(--cream);
}
@media (max-width: 1180px) {
  .bpp-head { width: min(52ch, 100%); }
  .bpp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 4vh, 48px) clamp(14px, 2vw, 28px); }
  .bpp-compass { opacity: .4; right: 2vw; width: min(40vw, 360px); }
  .bpp-burst { display: none; }
}

@media (max-width: 760px) {
  .bpp { padding: clamp(44px, 7vh, 72px) 6vw clamp(40px, 6vh, 64px); }
  .bpp-head, .bpp-steps { padding: 0; }
  .bpp-steps { grid-template-columns: 1fr; }
  .bpp-compass { display: none; }
  .bpp-divide i { left: 50%; }
}

/* ============================================================
   Section 04 — The clarity blueprint
   Composition from the Clarity_Blueprint render.
   Photographic ground: assets/shore/shore.webp, the project's own black-sand
   shore, flipped so the dark sand carries the headline and the water sits
   under the plate. Cold branch, per the Tide Rule — the imagery is ocean.

   Departures from that render, per DESIGN.md:
   - the right-hand plate is an opaque surface, not a translucent panel over
     photography. Glass panels are forbidden; a surface-filled card is not.
   - the circular arrow button is dropped. No button carries a radius, so the
     closing line becomes a plain Tiffany arrow link, as in section 02.
   - the diamond pinned to the plate's top rule is copper, not Tiffany.
   ============================================================ */

.bps {
  --accent: #c9905f;
  --accent-line: rgba(201, 144, 95, .62);
  --surface: #051316;                     /* cold branch: ocean imagery */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface);
  min-height: max(92vh, 880px);
  display: flex;
  align-items: center;
  padding: clamp(54px, 9vh, 120px) 3.1vw clamp(48px, 8vh, 104px);
  scroll-margin-top: calc(1.8vh + 78px + 2vh);
}
/* the photograph supplies the depth; the interface stays flat on top */
/* Overhangs the section top and bottom so the parallax never reveals an edge.
   bps-motion.js writes --bps-drift; only the photograph moves, not the wash. */
.bps::before {
  content: "";
  position: absolute; inset: -12% 0; z-index: -2; pointer-events: none;
  background: url("assets/shore/shore.webp") no-repeat center / cover;
  transform: scaleX(-1) translate3d(0, var(--bps-drift, 0px), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .bps::before { transform: scaleX(-1); }
}
/* legibility wash — a directional gradient, never a panel behind the text */
.bps::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 19, 22, .93) 0%, rgba(5, 19, 22, .82) 34%, rgba(5, 19, 22, .5) 62%, rgba(5, 19, 22, .36) 100%),
    linear-gradient(180deg, rgba(5, 19, 22, .8) 0%, rgba(5, 19, 22, 0) 22%, rgba(5, 19, 22, 0) 68%, rgba(5, 19, 22, .72) 100%);
}
.bps > .deco-frame i { background: var(--surface); }

.bps-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 3.6vw, 76px);
  padding: 0 clamp(16px, 2.4vw, 54px);
}

/* ---------- Left ---------- */
.bps-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(34px, 4.3vw, 74px);
  line-height: .96;
  letter-spacing: -.042em;
  word-spacing: .05em;
  color: var(--ink);
}
.bps-title span { display: block; }

.bps-claim {
  margin-top: clamp(16px, 2.4vh, 32px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16px, 1.46vw, 28px);
  line-height: 1.5;
  color: var(--cream);
  max-width: 24em;
}
.bps-sub {
  margin-top: clamp(12px, 1.8vh, 22px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(14px, 1.14vw, 22px);
  line-height: 1.56;
  color: rgba(244, 236, 224, .84);
  max-width: 26em;
}

.bps-divide {
  position: relative;
  height: 1px;
  width: min(100%, 32em);
  margin: clamp(22px, 3.4vh, 46px) 0 clamp(16px, 2.4vh, 28px);
  background: var(--accent-line);
}
.bps-divide i {
  position: absolute;
  left: 0; top: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 1px solid var(--accent);
  background: var(--surface);
  transform: rotate(45deg);
}

.bps-close {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2.2vw, 40px);
}
.bps-close p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(15px, 1.34vw, 26px);
  line-height: 1.44;
  color: var(--ink);
  max-width: 20em;
}
/* this section's single action */
.bps-next {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(10px, .92vw, 17px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream);
  transition: color .45s var(--ease);
}
.bps-next svg { width: clamp(26px, 2.2vw, 40px); height: 12px; color: var(--action); flex: 0 0 auto; }
.bps-next:hover, .bps-next:focus-visible { color: var(--action); }
.bps-next span { line-height: 1.85; }

/* ---------- Right: the plate ---------- */
.bps-panel {
  position: relative;
  background: var(--surface);             /* opaque, not glass */
  padding: clamp(22px, 3.2vh, 42px) clamp(18px, 2vw, 40px);
  border: 1px solid var(--accent-line);
}
/* inner rule removed: one rule per plate */
.bps-panel > b, .bps-panel > u { position: absolute; inset: 0; pointer-events: none; text-decoration: none; }
.bps-panel > b::before, .bps-panel > b::after,
.bps-panel > u::before, .bps-panel > u::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border: 1px solid var(--accent);
}
.bps-panel > b::before { left: 0;  top: 0;    border-right: 0; border-bottom: 0; }
.bps-panel > b::after  { right: 0; top: 0;    border-left: 0;  border-bottom: 0; }
.bps-panel > u::before { left: 0;  bottom: 0; border-right: 0; border-top: 0; }
.bps-panel > u::after  { right: 0; bottom: 0; border-left: 0;  border-top: 0; }
.bps-panel > i.d {
  position: absolute;
  left: 50%;
  width: 15px; height: 15px;
  margin-left: -8px;
  border: 1px solid var(--accent);        /* copper, not Tiffany: ornament */
  background: var(--surface);
  transform: rotate(45deg);
}
.bps-panel > i.d.t { top: -8px; }
.bps-panel > i.d.b { bottom: -8px; }

.bps-cap {
  padding-bottom: clamp(12px, 1.8vh, 22px);
  border-bottom: 1px solid rgba(201, 144, 95, .3);
  text-align: center;
  font-size: clamp(10px, .94vw, 17px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.bps-list { list-style: none; }
.bps-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(14px, 1.5vw, 26px);
  padding: clamp(13px, 2vh, 24px) 0;
}
.bps-list li + li { border-top: 1px solid rgba(201, 144, 95, .3); }

.bps-ico {
  display: grid;
  place-items: center;
  width: clamp(42px, 4vw, 70px);
  height: clamp(42px, 4vw, 70px);
  border: 1px solid var(--accent-line);
  border-radius: 50%;                     /* the one permitted radius */
  color: var(--accent);
}
.bps-ico img, .bps-ico svg { width: 56%; height: 56%; opacity: .92; }

.bps-list h3 {
  font-size: clamp(11px, 1.02vw, 19px);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink);
}
.bps-list p {
  margin-top: clamp(5px, .8vh, 10px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(13px, 1.02vw, 20px);
  line-height: 1.5;
  color: var(--cream);
}

.bps-foot {
  padding-top: clamp(12px, 1.8vh, 22px);
  border-top: 1px solid rgba(201, 144, 95, .3);
  text-align: center;
  font-size: clamp(10px, .94vw, 17px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 1180px) {
  .bps { min-height: 0; }
  .bps-grid { grid-template-columns: 1fr; gap: clamp(30px, 4.4vh, 56px); }
  .bps::after {
    background:
      linear-gradient(180deg, rgba(5, 19, 22, .9) 0%, rgba(5, 19, 22, .82) 50%, rgba(5, 19, 22, .9) 100%);
  }
}

@media (max-width: 760px) {
  .bps { padding: clamp(44px, 7vh, 72px) 6vw clamp(40px, 6vh, 64px); }
  .bps-grid { padding: 0; }
  .bps-panel { padding: clamp(20px, 3vh, 32px) clamp(14px, 4vw, 24px); }
  .bps-list li { grid-template-columns: 1fr; row-gap: 10px; }
  .bps-close { gap: 18px; }
}

/* ============================================================
   Section 05 — After Blueprint
   Composition from the After_Blueprint_Support render.
   Warm branch, lightest charcoal: the tide is out and the page closes dry.
   Ornament and icons reuse existing assets; nothing generated.

   Centred, unlike the four asymmetric sections above it. That is deliberate:
   this section is a fork, and a fork reads as a set of equal choices.
   ============================================================ */

.bpa {
  --accent: #c9a063;
  --accent-line: rgba(201, 160, 99, .5);
  --surface: #242423;                     /* warm branch, lightest: dry by the close */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface);
  padding: clamp(54px, 9vh, 120px) 3.1vw clamp(44px, 7vh, 96px);
  scroll-margin-top: calc(1.8vh + 78px + 2vh);
}
.bpa::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("assets/reframe/charcoal-grain.webp") repeat;
  background-size: 440px 440px;
  opacity: .4;
  mix-blend-mode: soft-light;
}
.bpa > .deco-frame i { background: var(--surface); }

.bpa-burst,
.bpa-compass {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.bpa-burst   { top: 3%; left: -3vw;  width: min(22vw, 330px); opacity: .5; transform: rotate(-28deg); }
.bpa-compass { top: 2%; right: -4vw; width: min(20vw, 300px); opacity: .34; }

/* ---------- Head ---------- */
.bpa-head {
  position: relative;
  z-index: 2;
  width: min(74ch, 100%);
  margin: 0 auto;
  text-align: center;
}
.bpa-head .deco-eyebrow { justify-content: center; }

.bpa-head h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(42px, 5.8vw, 100px);
  line-height: .94;
  letter-spacing: -.042em;
  word-spacing: .05em;
  color: var(--ink);
}
.bpa-claim {
  margin-top: clamp(8px, 1.2vh, 18px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(17px, 1.8vw, 35px);
  line-height: 1.3;
  color: var(--cream);
}
.bpa-divide {
  position: relative;
  height: 1px;
  width: min(100%, 34em);
  margin: clamp(20px, 3vh, 40px) auto clamp(16px, 2.4vh, 30px);
  background: var(--accent-line);
}
.bpa-divide i,
.bpa-rule i {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 1px solid var(--accent);
  background: var(--surface);
  transform: rotate(45deg);
}
.bpa-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(15px, 1.28vw, 25px);
  line-height: 1.54;
  color: var(--cream);
  max-width: 44em;
  margin: 0 auto;
}

/* ---------- The three paths ---------- */
.bpa-paths {
  position: relative;
  z-index: 2;
  list-style: none;
  margin-top: clamp(40px, 6vh, 86px);
  padding: 0 clamp(16px, 2.4vw, 54px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 32px);
}

.bpa-path {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: clamp(34px, 4.6vh, 56px) clamp(16px, 1.7vw, 34px) clamp(22px, 3vh, 38px);
  border: 1px solid var(--accent-line);
  transition: border-color .45s var(--ease), background-color .45s var(--ease);
}
.bpa-path::before,
.bpa-path::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--accent);
}
.bpa-path::before { left: 6px;  top: 6px;    border-right: 0; border-bottom: 0; }
.bpa-path::after  { right: 6px; bottom: 6px; border-left: 0;  border-top: 0; }
.bpa-path > b { position: absolute; inset: 0; pointer-events: none; }
.bpa-path > b::before,
.bpa-path > b::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--accent);
}
.bpa-path > b::before { right: 6px; top: 6px;    border-left: 0;  border-bottom: 0; }
.bpa-path > b::after  { left: 6px;  bottom: 6px; border-right: 0; border-top: 0; }

.bpa-badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(38px, 3.2vw, 54px);
  height: clamp(38px, 3.2vw, 54px);
  display: grid;
  place-items: center;
  isolation: isolate;
  color: var(--accent);
  font-size: clamp(11px, .96vw, 17px);
  letter-spacing: .16em;
}
.bpa-badge::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--accent);
  background: var(--surface);
  transform: rotate(45deg);
}

.bpa-mark {
  display: grid;
  place-items: center;
  width: clamp(66px, 6.6vw, 118px);
  height: clamp(66px, 6.6vw, 118px);
  margin: clamp(4px, .8vh, 12px) auto clamp(14px, 2.2vh, 28px);
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  color: var(--accent);
  transition: border-color .45s var(--ease);
}
.bpa-mark img { width: 56%; height: 56%; opacity: .92; }

.bpa-path h3 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(16px, 1.52vw, 30px);
  line-height: 1.16;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.bpa-tag {
  margin-top: clamp(6px, .9vh, 12px);
  font-size: clamp(10px, .96vw, 17px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.bpa-rule {
  position: relative;
  height: 1px;
  width: min(100%, 15em);
  margin: clamp(14px, 2vh, 26px) auto;
  background: var(--accent-line);
}
.bpa-path p.bpa-body {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 22px);
  line-height: 1.54;
  color: var(--cream);
  padding-bottom: 16px;        /* floor gap to the CTA on the longest card */
}

/* each path's own action; the plate wears Tiffany because it is clickable */
.bpa-path .bp-cta {
  margin-top: auto;                       /* all three sit on the card floor */
  justify-content: center;
  width: 100%;
  color: var(--ink);                      /* the shared shell still says #fff */
  border-color: var(--action);
}
.bpa-path .bp-cta::before,
.bpa-path .bp-cta::after,
.bpa-path .bp-cta i::before,
.bpa-path .bp-cta i::after { border-color: var(--action); }
.bpa-path .bp-cta:hover,
.bpa-path .bp-cta:focus-visible { background: rgba(134, 209, 205, .12); }

.bpa-rail {
  position: relative;
  z-index: 2;
  margin-top: clamp(26px, 4vh, 54px);
  text-align: center;
  font-size: clamp(10px, .92vw, 17px);
  line-height: 1.85;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (hover: hover) {
  .bpa-path:hover { border-color: var(--accent); background-color: rgba(201, 160, 99, .04); }
  .bpa-path:hover .bpa-mark { border-color: var(--accent); }
}

@media (max-width: 1180px) {
  .bpa-paths { grid-template-columns: 1fr; gap: clamp(32px, 4.6vh, 56px); max-width: 44em; margin-inline: auto; }
  .bpa-burst, .bpa-compass { opacity: .28; }
}

@media (max-width: 760px) {
  .bpa { padding: clamp(44px, 7vh, 72px) 6vw clamp(38px, 6vh, 60px); }
  .bpa-paths { padding: 0; }
  .bpa-burst, .bpa-compass { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bpa-path, .bpa-mark { transition: none; }
}

/* ============================================================
   Section 06 — Questions before you start
   Composition from the Blueprint_FAQ render: six panels, two columns,
   each a collapsible plate. Warm branch, one step up from the section
   above it, so the page finishes at its lightest and driest.

   Departures from that render, per DESIGN.md:
   - the rule under the headline is warm metal, not Tiffany. Tiffany means
     actionable; that rule is ornament.
   - the collapse glyph stays Tiffany, because it IS actionable.
   - one rule per plate, no inner rule (retired 2026-10-04).
   ============================================================ */

.bpf {
  --accent: #c9a063;
  --accent-line: rgba(201, 160, 99, .5);
  --surface: #272420;                     /* warm branch, raised: the last step up */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface);
  padding: clamp(54px, 9vh, 116px) 3.1vw clamp(48px, 8vh, 104px);
  scroll-margin-top: calc(1.8vh + 78px + 2vh);
}
.bpf::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("assets/reframe/charcoal-grain.webp") repeat;
  background-size: 440px 440px;
  opacity: .4;
  mix-blend-mode: soft-light;
}
.bpf > .deco-frame i { background: var(--surface); }

.bpf-compass,
.bpf-burst {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.bpf-compass { top: 1%; right: 6vw;  width: min(24vw, 360px); opacity: .6; }
.bpf-burst   { top: 14%; right: -2vw; width: min(16vw, 240px); opacity: .4; transform: rotate(205deg); }

/* ---------- Head ---------- */
/* sized in px, not ch: ch resolves against the mono base, not the display face */
.bpf-head {
  position: relative;
  z-index: 2;
  width: min(100%, 1020px);
  padding: 0 clamp(16px, 2.4vw, 54px);
}
.bpf-head h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(38px, 4.9vw, 86px);
  line-height: .94;
  letter-spacing: -.042em;
  word-spacing: .05em;
  color: var(--ink);
}
.bpf-head h2 span { display: block; }

.bpf-underline {                          /* warm metal: ornament, not an action */
  height: 1px;
  width: min(100%, 30em);
  margin: clamp(18px, 2.6vh, 32px) 0 clamp(14px, 2vh, 24px);
  background: var(--accent-line);
}
.bpf-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16px, 1.52vw, 30px);
  line-height: 1.5;
  color: var(--cream);
  max-width: 28em;
}
.bpf-rail {
  margin-top: clamp(16px, 2.4vh, 30px);
  font-size: clamp(10px, .92vw, 17px);
  line-height: 1.85;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- The six panels ---------- */
.bpf-list {
  position: relative;
  z-index: 2;
  list-style: none;
  margin-top: clamp(38px, 5.6vh, 80px);
  padding: 0 clamp(16px, 2.4vw, 54px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 30px);
  align-items: start;
}

.bpf-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(12px, 1.4vw, 26px);
  padding: clamp(18px, 2.4vh, 30px) clamp(16px, 1.7vw, 32px);
  border: 1px solid var(--accent-line);
  transition: border-color .45s var(--ease);
}
.bpf-item::before,
.bpf-item::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--accent);
}
.bpf-item::before { left: 6px;  top: 6px;    border-right: 0; border-bottom: 0; }
.bpf-item::after  { right: 6px; bottom: 6px; border-left: 0;  border-top: 0; }
.bpf-item > b { position: absolute; inset: 0; pointer-events: none; }
.bpf-item > b::before,
.bpf-item > b::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--accent);
}
.bpf-item > b::before { right: 6px; top: 6px;    border-left: 0;  border-bottom: 0; }
.bpf-item > b::after  { left: 6px;  bottom: 6px; border-right: 0; border-top: 0; }

/* left rail: diamond number, dropped hairline, star */
.bpf-rail-col {
  grid-row: 1 / span 2;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: clamp(8px, 1.2vh, 16px);
  padding-top: 2px;
}
.bpf-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(40px, 3.4vw, 58px);
  height: clamp(40px, 3.4vw, 58px);
  isolation: isolate;
  font-style: normal;
  color: var(--accent);
  font-size: clamp(11px, .96vw, 17px);
  letter-spacing: .16em;
}
.bpf-badge::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--accent);
  background: var(--surface);
  transform: rotate(45deg);
}
.bpf-drop { width: 1px; height: clamp(16px, 3vh, 38px); background: var(--accent-line); }
.bpf-star {
  width: 15px; height: 15px;
  background: var(--accent);
  opacity: .75;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}

/* question row */
.bpf-item h3 { margin: 0; }
.bpf-q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: clamp(10px, 1.2vw, 22px);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bpf-label {
  grid-column: 1;
  display: block;
  color: var(--accent);
  font-family: var(--mono);
  font-size: clamp(10px, .86vw, 15px);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.bpf-qt {
  grid-column: 1;
  display: block;
  margin-top: clamp(4px, .7vh, 9px);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(17px, 1.62vw, 32px);
  line-height: 1.14;
  letter-spacing: -.028em;
  color: var(--ink);
  transition: color .35s var(--ease);
}
.bpf-ico {
  grid-column: 2;
  grid-row: 1;
  width: clamp(16px, 1.3vw, 24px);
  color: var(--accent);                   /* plus, closed: warm metal */
  transition: color .35s var(--ease);
}
.bpf-ico svg { display: block; width: 100%; height: auto; }
.bpf-q[aria-expanded="true"] .bpf-ico { color: var(--action); }  /* minus, open: Tiffany */
.bpf-q[aria-expanded="true"] .i-plus,
.bpf-q[aria-expanded="false"] .i-minus { display: none; }

/* answer */
.bpf-a {
  grid-column: 2;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease);
}
.bpf-item.is-open .bpf-a { grid-template-rows: 1fr; }
.bpf-a > div { overflow: hidden; }
.bpf-a p {
  margin-top: clamp(12px, 1.7vh, 22px);
  padding-top: clamp(12px, 1.7vh, 22px);
  border-top: 1px solid rgba(201, 160, 99, .32);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(14px, 1.14vw, 23px);
  line-height: 1.54;
  color: var(--cream);
}

@media (hover: hover) {
  .bpf-item:hover { border-color: var(--accent); }
  .bpf-q:hover .bpf-qt { color: var(--action); }
}

@media (max-width: 1180px) {
  .bpf-list { grid-template-columns: 1fr; max-width: 46em; margin-inline: auto; }
  .bpf-compass { opacity: .3; }
  .bpf-burst { display: none; }
}

@media (max-width: 760px) {
  .bpf { padding: clamp(44px, 7vh, 72px) 6vw clamp(40px, 6vh, 64px); }
  .bpf-head, .bpf-list { padding: 0; }
  .bpf-compass { display: none; }
  .bpf-item { column-gap: 14px; padding: clamp(16px, 2.4vh, 24px) clamp(14px, 4vw, 22px); }
  .bpf-drop { height: 14px; }
  .bpf-star { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bpf-a { transition: none; }
  .bpf-item, .bpf-qt, .bpf-ico { transition: none; }
}

/* ============================================================
   Plate hover — hero steps and process steps
   These cards are not links, so they must not borrow the CTA plate's 12%
   background wash; that reads as pressable. Instead the metal catches the
   light: the outer rule comes up from ~62% to full, the icon ring and the
   divider follow, and a 4% tint lifts the surface just enough to register.
   Drawn, not filled. No movement, no shadow, no glow.

   hover:hover only, so touch devices never get a stuck state.
   ============================================================ */
@media (hover: hover) {
  .bph-step,
  .bpp-step {
    transition: border-color .45s var(--ease), background-color .45s var(--ease);
  }
  .bph-mark,
  .bpp-mark,
  .bph-sub {
    transition: border-color .45s var(--ease);
  }

  /* hero: copper */
  .bph-step:hover {
    border-color: var(--accent);
    background-color: rgba(201, 144, 95, .04);
  }
  .bph-step:hover .bph-mark { border-color: var(--accent); }
  .bph-step:hover .bph-sub { border-top-color: rgba(201, 144, 95, .55); }

  /* process: antique gold */
  .bpp-step:hover {
    border-color: var(--accent);
    background-color: rgba(201, 160, 99, .04);
  }
  .bpp-step:hover .bpp-mark { border-color: var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
  .bph-step, .bpp-step, .bph-mark, .bpp-mark, .bph-sub { transition: none; }
}

/* ---------- Shared shell responsive (mirrors index.html's own rules) ---------- */

@media (max-width: 1024px) {
  .nav { padding-left: 32px; background: rgba(20, 20, 20, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 5vh 6vw; }
  .foot-col + .foot-col { border-left: 0; padding-left: 0; }
  .foot-col:first-child { grid-column: 1 / -1; }
  .foot-sub { max-width: none; }
  .foot-base { flex-wrap: wrap; justify-content: center; text-align: center; row-gap: 14px; }
  .foot-base i { min-width: 40px; }
}

@media (max-width: 640px) {
  .nav { height: 64px; padding: 0 12px 0 16px; }
  .nav-end::before { display: none; }
  .nav .bp-cta { padding: 10px 16px; font-size: 12px; letter-spacing: .08em; gap: 0; white-space: nowrap; }
  .nav .bp-cta svg { display: none; }
  .nav .bp-cta::before, .nav .bp-cta::after,
  .nav .bp-cta i::before, .nav .bp-cta i::after { width: 7px; height: 7px; left: auto; right: auto; }
  .nav .bp-cta::before { left: 4px; top: 4px; }
  .nav .bp-cta::after { right: 4px; bottom: 4px; }
  .nav .bp-cta i::before { right: 4px; top: 4px; }
  .nav .bp-cta i::after { left: 4px; bottom: 4px; }
  .brand img { height: 26px; margin-left: calc(26px * -0.15); }
  .foot-grid { grid-template-columns: 1fr; gap: 4.5vh; }
  .foot-form { flex-direction: column; }
  .foot-join { justify-content: center; }
  .foot-base i { display: none; }
  .foot-base { flex-direction: column; gap: 16px; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bph *,
  .bph *::before,
  .bph *::after { transition: none !important; animation: none !important; }
}

/* Frame density: the inner rule and the bottom diamond pin were retired from the
   system on 2026-10-04 and are now gone from index.html and the shared shell, so
   the page-scoped overrides that used to live here are no longer needed. */