@font-face { font-family: "Fraunces"; src: url("assets/fraunces-300.ttf") format("truetype"); font-weight: 300; font-display: swap; }
  @font-face { font-family: "Fraunces"; src: url("assets/fraunces-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }

  :root {
    --bg: #1d1b19;   /* warmed 2026-10-08, matches blueprint-shared.css */
    --ink: #f2efe9;
    --soft: rgba(242, 239, 233, 0.78);
    --action: #86d1cd;          /* Tiffany: action color */
    --depth: #050b18;           /* button hover fill */
    --accent: #c9905f;          /* copper from the design. Swap to #d4c5a9 (sand) if brass/copper isn't approved */
    --accent-line: rgba(201, 144, 95, 0.75);
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
    --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
    --ease: cubic-bezier(0.23, 1, 0.32, 1);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { background: var(--bg); color: var(--ink); }
  body { font-family: var(--mono); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }

  /* ---------- Stage: full-bleed backdrop (card on wet stone) ---------- */
  .stage {
    position: relative;
    min-height: 100vh;
    min-height: max(100vh, 760px);
    background:
      radial-gradient(ellipse 40% 45% at 80% 40%, rgba(134, 209, 205, .05), transparent 70%),
      radial-gradient(ellipse 55% 50% at 72% 18%, rgba(212, 197, 169, .07), transparent 70%),
      var(--bg);
    isolation: isolate;
    display: flex; flex-direction: column;
  }
  .stage > .deck { margin-top: auto; }
  .no-webgl .stage { background: var(--bg) url("assets/hero.webp") no-repeat right bottom / cover; }

  /* ---------- 3D layer ---------- */
  #scene {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block;
    opacity: 0; transition: opacity 1.2s var(--ease);
  }
  .webgl-ready #scene { opacity: 1; }
  .no-webgl #scene { display: none; }
  /* Invisible box that tells the 3D scene where the big card stands (bottom-center) and how tall it is */
  .hero-card-anchor {
    position: absolute; left: 77.4%; bottom: 14%; height: 74%; width: 1px;
    pointer-events: none; visibility: hidden;
  }
  .hero-arrows { display: none; } /* shown only in the stacked (phone/tablet) layout */
  @media (max-width: 1024px) { .hero-arrows { display: flex; } }
  .stage::before { /* keeps the left text column legible on wide screens */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.25) 38%, rgba(20,20,20,0) 55%);
  }
  .stage::after { /* sinks the droplet floor into black toward the bottom edge.
                     Above the canvas (z 0), below the hero copy and card deck (z 2). */
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg,
      rgba(0,0,0,0) 54%, rgba(0,0,0,.28) 72%, rgba(0,0,0,.66) 86%, rgba(0,0,0,.92) 96%, #000 100%);
  }

  /* ---------- Nav ---------- */
  .nav {
    position: fixed;
    transition: background .5s var(--ease), backdrop-filter .5s var(--ease); top: 1.8vh; left: 1.4vw; right: 1.4vw;
    height: 78px;
    display: flex; align-items: center;
    padding: 0 20px 0 32px;
    border: 1px solid var(--accent-line);
    z-index: 5;
  }
  .nav::before, .nav::after { /* notched corners */
    content: ""; position: absolute; width: 10px; height: 10px; border: 1px solid var(--accent);
  }
  .nav::before { left: -5px; bottom: -5px; border-top: 0; border-right: 0; }
  .nav::after  { right: -5px; top: -5px; border-bottom: 0; border-left: 0; }

  .brand { display: flex; align-items: center; height: 100%; flex: 0 0 auto; }
  /* flex: none + object-fit stop a narrow nav from squeezing the logo out of its true proportions */
  .brand img { height: 42px; width: auto; flex: 0 0 auto; object-fit: contain; margin-left: calc(42px * -0.15); }


  .nav-links { display: flex; align-items: center; gap: 34px; list-style: none; }
  .nav-links li { display: flex; align-items: center; gap: 34px; }
  .nav-links li + li::before {
    content: ""; width: 7px; height: 7px; border: 1px solid var(--accent); transform: rotate(45deg); margin-right: 0;
  }
  .nav-links a {
    position: relative; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 0;
    transition: color .3s;
  }
  .nav-links a:hover { color: var(--action); }
  .nav-links a[aria-current="page"]::after {
    content: ""; position: absolute; left: -2px; right: -2px; bottom: -8px; height: 4px; background: var(--action);
  }

  .nav-end { margin-left: auto; display: flex; align-items: center; height: 100%; }
  .nav-end::before { content: ""; width: 1px; height: 46px; background: var(--accent-line); margin-right: 34px; }

  /* Brand pill button with depth-fill hover */
  .btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 16px;
    padding: 14px 34px;
    border: 1.5px solid var(--action);
    border-radius: 9999px;
    color: var(--ink);
    font: 500 15px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
    transition: border-radius .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
    isolation: isolate;
  }
  .btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--depth);
    transform: scaleX(0); transition: transform .6s var(--ease);
  }
  .btn:hover { border-radius: 12px; }
  .btn:hover::before { transform: scaleX(1); }
  .btn svg { width: 16px; height: 10px; }

  /* The nav wears the bracket plate too, sized down to sit inside the 78px bar.
     Tiffany rule and brackets, same as the other primary actions. */
  .nav .bp-cta {
    margin-top: 0; flex: 0 0 auto;
    padding: 13px 28px; gap: 14px;
    font-size: 15px; letter-spacing: .14em; color: var(--ink);
    border-color: var(--action);
  }
  .nav .bp-cta::before, .nav .bp-cta::after,
  .nav .bp-cta i::before, .nav .bp-cta i::after { border-color: var(--action); width: 9px; height: 9px; }
  .nav .bp-cta svg { width: 24px; color: var(--action); }
  .nav .bp-cta:hover { background: rgba(134, 209, 205, .12); }

  /* ---------- Hero copy ---------- */
  .hero {
    position: relative; z-index: 2;
    padding: calc(1.8vh + 78px + 72px) 0 0 5.9vw;
    width: min(60vw, 860px);
  }
  @media (min-width: 1025px) { .serif-line { white-space: nowrap; } }
  .eyebrow { color: var(--accent); font-size: 16px; letter-spacing: .08em; margin-bottom: 20px; }
  h1 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(48px, 6.25vw, 92px);
    line-height: .9; letter-spacing: -.035em; word-spacing: .04em;
    color: var(--ink);
  }
  .serif-line {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(30px, 3.75vw, 54px); line-height: 1.1; letter-spacing: -.025em;
    margin-top: 14px;
  }
  .mono-line { font-size: clamp(15px, 1.4vw, 20px); letter-spacing: .1em; line-height: 1.5; margin-top: 28px; }

  /* Divider with centered diamond */
  .rule { position: relative; width: min(610px, 100%); height: 1px; background: var(--accent-line); margin: 64px 0 26px; }
  .rule::before, .rule::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--accent-line); }
  .rule::before { left: 0; } .rule::after { right: 0; }
  .rule i {
    position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; transform: translate(-50%, -50%) rotate(45deg);
    border: 1px solid var(--accent); background: var(--bg);
  }
  .rule i::after { content: ""; position: absolute; inset: 3px; background: var(--accent); }

  /* ---------- Card spec + quote ---------- */
  .spec { display: grid; grid-template-columns: auto 1fr; width: min(610px, 100%); }
  .stats { display: grid; grid-template-columns: 104px 32px auto; row-gap: 7px; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; padding-top: 4px; }
  .stats dt { color: var(--soft); }
  .stats .slash { color: var(--soft); }
  .stats dd.hi { color: var(--action); }
  .quote-col {
    margin-left: 112px; border-left: 1px solid var(--accent-line);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 0 0 0 58px; min-height: 160px;
  }
  .quote-col svg { width: 52px; height: 72px; color: var(--accent); margin-top: -2px; }
  /* scoped to the hero: a bare `blockquote` rule with nowrap silently breaks every later section */
  .quote-col blockquote {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 22px; line-height: 1.25; text-align: center; margin-top: 14px; white-space: nowrap;
  }
  .quote-col .dash { width: 20px; height: 1px; background: var(--accent); margin-top: 22px; }

  /* ---------- Deck carousel ---------- */
  .deck {
    position: relative; z-index: 2;
    display: flex; align-items: flex-start; gap: 0;
    padding: 40px 0 48px 2vw;
  }
  .deck-arrow {
    flex: 0 0 auto; display: flex; align-items: center; height: 132px;
    background: none; border: 0; cursor: pointer; color: var(--accent); padding: 0;
    transition: color .3s;
  }
  .deck-arrow:hover { color: var(--action); }
  .deck-arrow svg { width: 34px; height: 64px; }
  .deck-arrow.prev::after, .deck-arrow.next::before { content: ""; width: 1px; height: 64px; background: var(--accent-line); }
  .deck-arrow.prev::after { margin-left: 30px; }
  .deck-arrow.next::before { margin-right: 22px; }
  .deck-arrow.prev { margin-right: 34px; }
  .deck-arrow.next { margin-left: 38px; }

  .cards { display: flex; gap: 40px; list-style: none; }
  .cards button { background: none; border: 0; cursor: pointer; color: inherit; font: inherit; display: flex; flex-direction: column; align-items: center; }
  .thumb {
    width: 88px; height: 126px; border-radius: 5px; overflow: hidden;
    outline: 1px solid rgba(201, 144, 95, .35);
    box-shadow: 0 10px 22px rgba(0,0,0,.55);
    transition: transform .4s var(--ease), outline-color .3s;
  }
  .thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.9); }
  .cards button:hover .thumb { transform: translateY(-4px); }
  .cards button[aria-current="true"] .thumb {
    outline: 2px solid var(--action); outline-offset: 5px; border-radius: 3px;
  }
  .cards button[aria-current="true"] .thumb img { filter: none; }
  /* With 3D on, the thumbnail boxes become empty slots the 3D cards stand in */
  .webgl-ready .thumb { outline-color: transparent; box-shadow: none; overflow: visible; }
  .webgl-ready .thumb img { visibility: hidden; }
  .webgl-ready .cards button:hover .thumb { transform: none; }
  .webgl-ready .cards button[aria-current="true"] .thumb { outline-color: var(--action); }
  .num { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 14px; letter-spacing: .1em; color: var(--soft); }
  .num::before { content: ""; width: 6px; height: 6px; border: 1px solid var(--accent); transform: rotate(45deg); }
  .cards button[aria-current="true"] .num { color: var(--action); }
  .cards button[aria-current="true"] .num::before {
    width: 14px; height: 14px; border: 0; transform: none; background: var(--action);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  }

  /* The nav's ground, always on (2026-10-09) rather than arriving at 40px of
     scroll. Cold tint: this page opens on ocean and night sky. */
  .nav {
    --nav-ground: 8, 20, 22;
    background: rgba(var(--nav-ground), .55);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .nav.scrolled { background: rgba(var(--nav-ground), .72); }

  /* ---------- Section 02: Practitioner messaging (water) ---------- */
  .messaging {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: max(100vh, 900px);
    background: #051316;
    display: flex; align-items: flex-start;
  }
  .messaging::after { /* the water, oversized so it can drift without exposing an edge */
    content: ""; position: absolute; left: 0; right: 0; top: -8%; bottom: -8%; z-index: -1; pointer-events: none;
    background: url("assets/water/floating-cards.webp") no-repeat center / cover;
    transform: translate3d(0, var(--water-shift, 0px), 0);   /* driven by messaging-motion.js */
    will-change: transform;
  }
  .messaging::before { /* legibility: darker water behind the copy, like the design */
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(3, 14, 16, .78) 0%, rgba(3, 14, 16, .5) 34%, rgba(3, 14, 16, 0) 58%),
                linear-gradient(180deg, rgba(5, 19, 22, .9) 0%, rgba(5, 19, 22, 0) 16%);
  }
  .rays { /* sunlight shafts through the surface, top center-right */
    position: absolute; z-index: 1; pointer-events: none; top: -8%; left: 58%; width: 36%; height: 62%;
    background:
      linear-gradient(100deg, transparent 38%, rgba(190, 240, 232, .16) 44%, transparent 50%),
      linear-gradient(97deg, transparent 50%, rgba(190, 240, 232, .12) 55%, transparent 60%),
      linear-gradient(104deg, transparent 22%, rgba(190, 240, 232, .08) 30%, transparent 36%);
    filter: blur(14px); mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 50%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 50%, transparent 100%);
    animation: rays 9s ease-in-out infinite alternate;
    /* the independent `translate` property, so the parallax offset composes with the
       animation's own transform instead of overwriting it */
    translate: 0 var(--rays-shift, 0px);
  }
  @keyframes rays { from { opacity: .65; transform: translateX(-1.5%) skewX(-2deg); } to { opacity: 1; transform: translateX(1.5%) skewX(2deg); } }

  .msg-copy {
    position: relative; z-index: 2; padding: calc(1.8vh + 78px + 74px) 0 96px 5.9vw; width: min(52vw, 760px);
    transform: translate3d(0, var(--msg-drift, 0px), 0);   /* nearer plane: drifts against the water */
  }
  .messaging h2 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(44px, 5.45vw, 80px); line-height: .86; letter-spacing: -.035em; word-spacing: .04em;
    color: var(--ink); text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
  }
  .messaging h2 span { display: block; }
  .msg-body {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(19px, 1.8vw, 26px); line-height: 1.5; letter-spacing: .005em;
    max-width: 600px; margin-top: 34px; color: var(--ink);
  }
  .messaging .rule { width: min(540px, 100%); margin: 40px 0 30px; }
  .messaging .rule i { background: #0a1f22; }
  .accent-line {
    font-size: clamp(13px, 1.2vw, 17px); letter-spacing: .44em; line-height: 1.6; text-transform: uppercase;
    color: var(--accent);
  }
  @media (prefers-reduced-motion: reduce) { .rays { animation: none; } }

  /* ---------- Section 03: Where it gets tangled (three panels over water) ---------- */
  .struggles {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: max(100vh, 920px);
    background: #041214;
    padding: calc(1.8vh + 78px + 48px) 2.7vw 96px;
  }
  .struggles::after { /* the water itself, on an oversized layer so it can drift without showing an edge */
    content: ""; position: absolute; left: 0; right: 0; top: -9%; bottom: -9%; z-index: 0; pointer-events: none;
    background: url("assets/water/underwater-cards.webp") no-repeat center top / cover;
    transform: translate3d(0, var(--backdrop-shift, 0px), 0);   /* driven by tangle-motion.js */
    will-change: transform;
  }
  .struggles::before { /* black fade off the top edge, then top shade under the nav + soft vignette */
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 7%, rgba(0,0,0,0) 18%),
                linear-gradient(180deg, rgba(4,18,20,.85) 0%, rgba(4,18,20,0) 14%, rgba(4,18,20,0) 82%, rgba(4,18,20,.7) 100%);
  }

  .struggle-grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5vw;
    min-height: calc(max(100vh, 920px) - (1.8vh + 78px + 48px) - 96px);
    perspective: 2100px; perspective-origin: 50% 42%;   /* the shared camera all three panels orbit under
                                                           (further back = flatter, gentler orbit) */
  }
  .struggle {
    position: relative; display: flex; flex-direction: column;
    border: 1px solid var(--accent-line);
    background: linear-gradient(180deg, rgba(4,18,20,0) 0%, rgba(4,18,20,0) 48%, rgba(4,18,20,.82) 60%, rgba(4,18,20,.93) 100%);
    transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
    transform-style: preserve-3d; will-change: transform;
    /* --depth (0→1 on hover) and --copy-drift (scroll) are written by tangle-motion.js */
    box-shadow: 0 calc(18px * var(--depth, 0)) calc(46px * var(--depth, 0)) rgba(0, 0, 0, calc(.55 * var(--depth, 0)));
  }
  .struggle:focus-visible { outline: 1px solid var(--action); outline-offset: 6px; }
  .struggle::before { /* four corner brackets, like the design */
    content: ""; position: absolute; inset: -5px; pointer-events: none;
    --c: var(--accent);
    background:
      linear-gradient(var(--c), var(--c)) left top / 12px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) left top / 1px 12px no-repeat,
      linear-gradient(var(--c), var(--c)) right top / 12px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) right top / 1px 12px no-repeat,
      linear-gradient(var(--c), var(--c)) left bottom / 12px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) left bottom / 1px 12px no-repeat,
      linear-gradient(var(--c), var(--c)) right bottom / 12px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) right bottom / 1px 12px no-repeat;
  }
  .struggle:hover { border-color: var(--accent); }
  /* Depth planes: brackets sit in front of the frame, copy floats above the water, art stays deepest */
  .struggle::before { transform: translateZ(calc(12px * var(--depth, 0))); }
  .struggle-art { flex: 0 0 auto; height: max(300px, 44vh); transform: translateZ(calc(-16px * var(--depth, 0))); }
  .struggle-copy {
    margin-top: auto; padding: 0 2.4vw 3.2vw;
    transform: translate3d(0, var(--copy-drift, 0px), calc(24px * var(--depth, 0)));
  }
  .struggle .eyebrow { font-size: 18px; margin-bottom: 18px; }
  .struggle h3 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(26px, 2.8vw, 41px); line-height: .98; letter-spacing: -.035em; word-spacing: .04em;
    color: var(--ink); text-shadow: 0 2px 20px rgba(0,0,0,.4); text-align: center;
  }
  .struggle .rule { width: 100%; margin: 30px 0 26px; }
  .struggle .rule i { background: #06181a; }
  .struggle-copy > p:last-child {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(18px, 1.75vw, 25px); line-height: 1.46; letter-spacing: .012em; color: var(--ink);
    text-align: center;
  }

  /* ---------- Section 04: The reframe (deco compass) ---------- */
  .reframe {
    --accent: #cca35f;                         /* this section's gold reads warmer/yellower than the copper above */
    --accent-line: rgba(204, 163, 95, .62);
    --cream: #f5ece0;
    position: relative; isolation: isolate; overflow: hidden;
    min-height: max(100vh, 900px);
    background: #242423;
    padding: calc(1.8vh + 78px + 5vh) 3.1vw 5vh;
    display: flex; align-items: center;
  }
  /* Both surface layers sit *behind* the content (z -1 inside the isolated section) so the
     gold plates above can screen-blend against them instead of against a bare stacking context. */
  .reframe::before { /* charcoal grain, kept faint so it reads as surface, not noise */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url("assets/reframe/charcoal-grain.webp") repeat; background-size: 440px 440px;
    opacity: .42; mix-blend-mode: soft-light;
  }
  .reframe::after { /* soft depth behind the compass + shade under the nav */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 60% 60% at 72% 48%, rgba(204, 163, 95, .05), transparent 70%),
                linear-gradient(180deg, rgba(20,20,19,.55) 0%, rgba(20,20,19,0) 18%);
  }

  /* Deco frame: one rule, corner brackets, edge diamonds.
     Inner rule and bottom pin retired 2026-10-04 — see DESIGN.md. */
  .deco-frame { position: absolute; inset: 1.2vw; pointer-events: none; border: 1px solid var(--accent-line); }
  .deco-frame i { position: absolute; width: 13px; height: 13px; border: 1px solid var(--accent); background: #242423;
    transform: rotate(45deg); }
  .deco-frame i::after { content: ""; position: absolute; inset: 3px; background: var(--accent); }
  .deco-frame i.t { top: -7px; left: 50%; margin-left: -6px; }
  .deco-frame i.l { left: -7px; top: 50%; margin-top: -6px; }
  .deco-frame i.r { right: -7px; top: 50%; margin-top: -6px; }
  .deco-frame u { /* corner brackets sitting between the two rules */
    position: absolute; width: 3.2vw; height: 3.2vw; text-decoration: none;
    border: 1px solid rgba(204, 163, 95, .45);
  }
  .deco-frame u.tl { top: .55vw; left: .55vw; border-right: 0; border-bottom: 0; }
  .deco-frame u.tr { top: .55vw; right: .55vw; border-left: 0; border-bottom: 0; }
  .deco-frame u.bl { bottom: .55vw; left: .55vw; border-right: 0; border-top: 0; }
  .deco-frame u.br { bottom: .55vw; right: .55vw; border-left: 0; border-top: 0; }

  /* The ornament plates are gold line art on black, so screen drops their field and keeps the lines */
  .reframe-burst {
    position: absolute; width: min(23vw, 340px); pointer-events: none;
    mix-blend-mode: screen; opacity: .8;
  }
  /* the ornaments are the nearest plane, so they drift slightly against the compass */
  .reframe-burst.bl { left: 2.7vw; bottom: 2.7vw; width: min(16vw, 250px); transform: translate3d(0, var(--burst-y, 0px), 0); }
  .reframe-burst.tr { right: 2.7vw; top: 2.7vw; width: min(13vw, 200px); opacity: .5;
    transform: translate3d(0, var(--burst-y, 0px), 0) rotate(180deg); }

  .reframe-inner {
    position: relative; width: 100%;
    display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
    align-items: center; gap: 1vw;
  }
  .reframe-copy { padding-left: 5vw; }

  /* Eyebrow: diamond · label · long rule ending in a tick */
  .deco-eyebrow {
    display: flex; align-items: center; gap: 22px;
    color: var(--accent); font-size: clamp(12px, 1.12vw, 22px); letter-spacing: .34em; text-transform: uppercase;
    margin-bottom: clamp(26px, 3.6vh, 52px);
  }
  .deco-eyebrow i { position: relative; flex: 0 0 auto; width: 13px; height: 13px; border: 1px solid var(--accent); transform: rotate(45deg); }
  .deco-eyebrow i::after { content: ""; position: absolute; inset: 3px; background: var(--accent); }
  .deco-eyebrow i::before { content: ""; position: absolute; top: 50%; left: -20px; width: 18px; height: 1px; background: var(--accent-line); transform: rotate(-45deg); transform-origin: right center; }
  .deco-eyebrow em { flex: 1 1 auto; height: 1px; background: var(--accent-line); max-width: 520px; position: relative; }
  .deco-eyebrow em::after { content: ""; position: absolute; right: 0; top: -3px; width: 1px; height: 7px; background: var(--accent-line); }

  /* Headline with its vertical gold stem + turquoise marker */
  .reframe-headline { position: relative; padding-left: 3.6vw; }
  .reframe-headline::before {
    content: ""; position: absolute; left: 0; top: 4%; bottom: 4%; width: 1px; background: var(--accent-line);
  }
  .reframe-headline .mark {
    position: absolute; left: -9px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%) rotate(45deg);
    border: 1.5px solid var(--action); background: #242423;
  }
  .reframe-headline .mark::after { content: ""; position: absolute; inset: 5px; background: var(--action); }
  .reframe h2 {
    font-family: "Playfair Display", var(--serif); font-weight: 900;
    font-size: clamp(32px, 4.75vw, 98px); line-height: 1.05; letter-spacing: -.015em;
    color: var(--cream);
  }
  .reframe h2 span { display: block; }
  @media (min-width: 1025px) { .reframe h2 span { white-space: nowrap; } } /* one sentence per line, as drawn */

  .reframe-body {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(17px, 1.62vw, 33px); line-height: 1.46; letter-spacing: .004em;
    color: var(--cream); max-width: 40vw;
    margin: clamp(28px, 4.4vh, 62px) 0 0 3.6vw;
  }
  /* 40vw matches .reframe-body exactly, so the rule and the paragraph share a right edge.
     The min() caps it against the parent column, which is what the old bare 41vw lacked. */
  .reframe .rule { width: min(40vw, calc(100% - 3.6vw)); margin: clamp(30px, 4.6vh, 66px) 0 clamp(20px, 2.6vh, 34px) 3.6vw; }
  .reframe .rule i { background: #242423; }
  .reframe-note {
    display: flex; align-items: flex-start; gap: 28px; margin-left: 3.6vw;
    font-size: clamp(12px, 1.12vw, 22px); letter-spacing: .28em; line-height: 1.75; text-transform: uppercase;
    color: var(--cream);
  }
  .reframe-note i { flex: 0 0 auto; width: clamp(48px, 4vw, 86px); height: 1px; background: var(--accent); margin-top: .85em; }

  /* Compass + its four corner captions */
  .reframe-art { position: relative; display: grid; place-items: center; }
  .reframe-art img.compass {
    width: min(31vw, 640px); height: auto; max-width: 100%; aspect-ratio: 3 / 4; object-fit: contain;
    mix-blend-mode: screen;                    /* the plate is line art on black, so screen keeps only the gold */
    /* --compass-x / --compass-y are written by reframe-motion.js */
    transform: translate3d(var(--compass-x, 0px), var(--compass-y, 0px), 0);
    will-change: transform;
  }
  .compass-label {
    position: absolute; font-size: clamp(10px, .88vw, 17px); letter-spacing: .26em; line-height: 1.85;
    text-transform: uppercase; color: var(--cream);
  }
  .compass-label::after { content: ""; display: block; width: clamp(26px, 2.2vw, 44px); height: 1px; background: var(--accent); margin-top: 14px; }
  .compass-label.tr { top: 7%; right: 2%; }
  .compass-label { transform: translate3d(0, var(--caption-y, 0px), 0); }   /* nearer plane: drifts less */

  /* ---------- Section 05: How I work (ocean → black sand) ---------- */
  .shore {
    --accent: #cca35f;
    --accent-line: rgba(204, 163, 95, .6);
    --cream: #f4ece0;
    --panel: rgba(6, 10, 12, .62);
    position: relative; isolation: isolate; overflow: hidden;
    min-height: max(100vh, 940px);
    padding: calc(1.8vh + 78px + 4.5vh) 3.1vw 4vh;
    display: flex; flex-direction: column;
  }
  /* The photo is viewport-fixed: it parallaxes as the section scrolls past, and — crucially —
     the step cards can paint the SAME fixed image so the shoreline continues through them
     in perfect register instead of being a separate, misaligned copy. */
  .shore::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: #0a0d0e url("assets/shore/shore.webp") no-repeat center / cover fixed;
  }
  .shore::after { /* keeps the headline legible over the water and sinks the lower half */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(5,10,12,.78) 0%, rgba(5,10,12,.3) 22%, rgba(5,10,12,.12) 42%, rgba(4,8,9,.5) 74%, rgba(4,8,9,.72) 100%),
                linear-gradient(90deg, rgba(4,8,9,.62) 0%, rgba(4,8,9,.1) 52%, rgba(4,8,9,0) 72%);
  }
  .shore .deco-frame i { background: rgba(6, 12, 14, .9); }
  .shore-burst { position: absolute; width: min(11vw, 150px); opacity: .5; mix-blend-mode: screen; pointer-events: none; }
  .shore-burst.tl { left: 2.6vw; top: 2.6vw; transform: rotate(90deg); }
  .shore-burst.tr { right: 2.6vw; top: 2.6vw; transform: rotate(180deg); }

  .shore-copy { position: relative; padding: 0 32px; max-width: min(56vw, 900px); }
  .shore .deco-eyebrow { margin-bottom: clamp(14px, 1.8vh, 24px); }
  .shore h2 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(30px, 3.9vw, 74px); line-height: .96; letter-spacing: -.035em; word-spacing: .04em;
    color: #fff; text-shadow: 0 2px 26px rgba(0, 0, 0, .55);
  }
  .shore h2 span { display: block; }
  .shore-quote {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(19px, 2.12vw, 40px); line-height: 1.24; letter-spacing: .002em;
    color: var(--cream); margin-top: clamp(14px, 1.9vh, 26px); max-width: 17.5em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
  }
  .shore-lede {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(15px, 1.42vw, 27px); line-height: 1.4;
    color: rgba(244, 236, 224, .88); margin-top: clamp(14px, 2vh, 26px); max-width: 24em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
  }

  /* ---- the four steps ---- */
  .steps {
    position: relative; margin-top: auto; padding-top: clamp(34px, 5vh, 70px); list-style: none;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1vw; align-items: stretch;
  }
  /* --bevel: cut corners. The gold plate sits behind a slightly smaller, OPAQUE inner panel, so
     only a hairline of gold shows as the outline — the inner never tints. */
  .step { --bevel: 15px; position: relative; display: flex; }
  .step::before {
    content: ""; position: absolute; inset: 0; background: var(--accent-line); pointer-events: none;
    clip-path: polygon(var(--bevel) 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% calc(100% - var(--bevel)),
                       calc(100% - var(--bevel)) 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)), 0 var(--bevel));
    transition: background .45s var(--ease);
  }
  .step:hover::before { background: var(--accent); }
  .step-inner {
    position: relative; z-index: 1; flex: 1; margin: 1px;
    /* dark wash over the same viewport-fixed shoreline: the beach continues through the card */
    background: linear-gradient(rgba(5, 9, 11, .74), rgba(5, 9, 11, .84)),
                url("assets/shore/shore.webp") no-repeat center / cover fixed;
    padding: clamp(26px, 3vh, 44px) clamp(16px, 1.5vw, 30px) clamp(20px, 2.6vh, 34px);
    display: flex; flex-direction: column; align-items: center; text-align: center;
    clip-path: polygon(var(--bevel) 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% calc(100% - var(--bevel)),
                       calc(100% - var(--bevel)) 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)), 0 var(--bevel));
  }
  .step-num {  /* hexagon badge straddling the top edge */
    position: absolute; top: -17px; left: 50%; transform: translateX(-50%); z-index: 2;
    width: 68px; height: 34px; display: grid; place-items: center;
    background: var(--accent-line);
    clip-path: polygon(16% 0, 84% 0, 100% 50%, 84% 100%, 16% 100%, 0 50%);
    font: 500 14px/1 var(--mono); letter-spacing: .12em; color: var(--accent);
  }
  .step-num span {
    width: calc(100% - 2px); height: calc(100% - 2px); display: grid; place-items: center;
    background: #0b1113;
    clip-path: polygon(16% 0, 84% 0, 100% 50%, 84% 100%, 16% 100%, 0 50%);
  }
  .step-icon {
    width: clamp(70px, 6.6vw, 108px); aspect-ratio: 1; border: 1px solid var(--accent-line); border-radius: 50%;
    display: grid; place-items: center; margin-bottom: clamp(16px, 2.2vh, 30px);
    transition: border-color .45s var(--ease), transform .45s var(--ease);
  }
  .step-icon img { width: 62%; height: 62%; }
  .step:hover .step-icon { border-color: var(--accent); transform: translateY(-3px); }
  .step h3 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(17px, 1.72vw, 32px); line-height: .98; letter-spacing: -.03em; word-spacing: .04em;
    color: #fff;
  }
  .step h3 span { display: block; }
  .step p {
    font-family: var(--serif); font-weight: 300; text-align: center;
    font-size: clamp(14px, 1.22vw, 23px); line-height: 1.54; color: var(--cream);
    margin-top: clamp(14px, 1.9vh, 26px);
  }

  /* ---------- Section 06: Start with Sacred Blueprint ---------- */
  .blueprint {
    --accent: #cca35f;
    --accent-line: rgba(204, 163, 95, .6);
    --cream: #f4ece0;
    position: relative; isolation: isolate; overflow: hidden;
    min-height: max(100vh, 940px);
    background: #232221;
    padding: calc(1.8vh + 78px + 2vh) 3.1vw 3.5vh;
    display: flex; align-items: center;
  }
  .blueprint::before { /* same charcoal grain as the reframe panel, kept faint */
    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;
  }
  .blueprint::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 55% 55% at 26% 40%, rgba(204,163,95,.045), transparent 70%),
                linear-gradient(180deg, rgba(18,17,16,.5) 0%, rgba(18,17,16,0) 16%);
  }
  /* Parallax planes. blueprint-motion.js writes one value, --bp-drift; each layer takes its own
     share of it. `translate` (not `transform`) so it composes with the mirror/rotate below. */
  .bp-burst { /* the big ray fan low between the two columns; mirrored so its rays open up-left */
    position: absolute; right: 42%; bottom: -2%; width: min(32vw, 450px); z-index: 0;
    transform: scaleX(-1);
    translate: 0 var(--bp-drift, 0px);
    mix-blend-mode: screen; opacity: .42; pointer-events: none;
  }
  .bp-card { translate: 0 calc(var(--bp-drift, 0px) * -.2); }     /* nearest plane, rises slightly */
  .bp-copy { translate: 0 calc(var(--bp-drift, 0px) * -.09); }
  /* a few scattered four-point stars, as in the design */
  .bp-star {
    position: absolute; z-index: 1; background: var(--accent); pointer-events: none;
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  }
  /* staggered rates: the field of stars separates in depth instead of sliding as one sheet */
  .bp-star.s1 { width: 26px; height: 26px; left: 8%;  top: 13%; opacity: .75; translate: 0 calc(var(--bp-drift, 0px) * .82); }
  .bp-star.s2 { width: 14px; height: 14px; left: 36%; top: 9%;  opacity: .5;  translate: 0 calc(var(--bp-drift, 0px) * .46); }
  .bp-star.s3 { width: 20px; height: 20px; left: 55%; top: 22%; opacity: .6;  translate: 0 calc(var(--bp-drift, 0px) * 1.12); }
  .bp-star.s4 { width: 16px; height: 16px; left: 50%; top: 47%; opacity: .45; translate: 0 calc(var(--bp-drift, 0px) * .64); }
  .bp-star.s5 { width: 22px; height: 22px; left: 33%; bottom: 8%; opacity: .5; translate: 0 calc(var(--bp-drift, 0px) * .95); }

  .bp-grid {
    position: relative; z-index: 2; width: 100%;
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 3vw; align-items: center;
  }
  .bp-copy { padding: 0 24px; }
  .blueprint h2 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(32px, 4.5vw, 86px); line-height: .92; letter-spacing: -.035em; word-spacing: .04em;
    color: #fff;
  }
  .blueprint h2 span { display: block; }
  .bp-sub {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(20px, 2.35vw, 44px); line-height: 1.16; letter-spacing: -.005em;
    color: var(--cream); margin-top: clamp(16px, 2.4vh, 32px); max-width: 15em;
  }
  .bp-body {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(15px, 1.35vw, 26px); line-height: 1.5;
    color: rgba(244, 236, 224, .9); margin-top: clamp(16px, 2.4vh, 30px); max-width: 27em;
  }

  /* CTA: rectangular gold plate with bracketed corners */
  .bp-cta {
    position: relative; display: inline-flex; align-items: center; gap: clamp(14px, 1.4vw, 26px);
    margin-top: clamp(22px, 3.4vh, 46px);
    padding: clamp(16px, 1.9vh, 26px) clamp(26px, 2.6vw, 48px);
    border: 1.5px solid var(--accent);
    font: 500 clamp(14px, 1.28vw, 24px)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
    transition: background .45s var(--ease), color .45s var(--ease);
  }
  .bp-cta::before, .bp-cta::after { /* corner brackets, inside the plate */
    content: ""; position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--accent);
  }
  .bp-cta::before { left: 5px; top: 5px; border-right: 0; border-bottom: 0; }
  .bp-cta::after { right: 5px; bottom: 5px; border-left: 0; border-top: 0; }
  .bp-cta i { position: absolute; inset: 0; pointer-events: none; }   /* carries the other two corners */
  .bp-cta i::before, .bp-cta i::after { content: ""; position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--accent); }
  .bp-cta i::before { right: 5px; top: 5px; border-left: 0; border-bottom: 0; }
  .bp-cta i::after { left: 5px; bottom: 5px; border-right: 0; border-top: 0; }
  .bp-cta svg { width: clamp(22px, 2vw, 34px); height: 12px; color: var(--action); flex: 0 0 auto; }
  .bp-cta:hover { background: rgba(204, 163, 95, .12); }
  /* Blueprint's CTA is the page's primary action, so it wears the Tiffany action colour */
  .blueprint .bp-cta { border-color: var(--action); }
  .blueprint .bp-cta::before, .blueprint .bp-cta::after,
  .blueprint .bp-cta i::before, .blueprint .bp-cta i::after { border-color: var(--action); }
  .blueprint .bp-cta:hover { background: rgba(134, 209, 205, .12); }
  .bp-note {
    margin-top: clamp(18px, 2.6vh, 30px);
    font-size: clamp(12px, 1.07vw, 20px); letter-spacing: .22em; line-height: 1.8; text-transform: uppercase;
    color: var(--cream);
  }

  /* ---- the offer card ---- */
  .bp-card {
    position: relative; padding: clamp(28px, 3.6vh, 52px) clamp(20px, 2.2vw, 44px) clamp(24px, 3vh, 44px);
    background: rgba(16, 15, 14, .55);
    border: 1px solid var(--accent-line);
    text-align: center;
  }
  .bp-card > i.d { /* diamond straddling the top and bottom edges */
    position: absolute; left: 50%; width: 15px; height: 15px; margin-left: -8px;
    border: 1px solid var(--accent); background: #232221; transform: rotate(45deg);
  }
  .bp-card > i.d::after { content: ""; position: absolute; inset: 3px; background: var(--accent); }
  .bp-card > i.d.t { top: -8px; }
  .bp-card > i.d.b { bottom: -8px; }

  .bp-mark {
    width: clamp(72px, 7vw, 118px); aspect-ratio: 1; margin: 0 auto clamp(12px, 1.6vh, 22px);
    border: 1px solid var(--accent-line); border-radius: 50%; display: grid; place-items: center;
  }
  .bp-mark img { width: 66%; height: 66%; }
  .bp-card h3 {
    font: 400 clamp(17px, 1.95vw, 36px)/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #fff;
  }
  .bp-card-sub {
    margin-top: clamp(8px, 1.2vh, 14px);
    font-size: clamp(10px, .92vw, 17px); letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  }

  .bp-list { list-style: none; margin-top: clamp(16px, 2.4vh, 32px); display: grid; gap: clamp(12px, 1.8vh, 26px); }
  .bp-list li { display: grid; grid-template-columns: auto 1fr; gap: clamp(14px, 1.4vw, 26px); text-align: left; align-items: start; }
  .bp-ico {
    width: clamp(44px, 4.1vw, 68px); aspect-ratio: 1; border: 1px solid var(--accent-line); border-radius: 50%;
    display: grid; place-items: center; color: var(--accent);
  }
  .bp-ico img, .bp-ico svg { width: 54%; height: 54%; }
  .bp-list h4 {
    font: 400 clamp(12px, 1.12vw, 21px)/1.25 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cream);
  }
  .bp-list p {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(13px, 1.12vw, 21px); line-height: 1.5; color: rgba(244, 236, 224, .82); margin-top: 8px;
  }

  .bp-divide { position: relative; height: 1px; background: var(--accent-line); margin: clamp(16px, 2.4vh, 32px) 0 clamp(12px, 1.7vh, 20px); }
  .bp-divide i {
    position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -7px 0 0 -7px;
    border: 1px solid var(--accent); background: #191817; transform: rotate(45deg);
  }
  .bp-entry { font-size: clamp(11px, 1.05vw, 20px); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
  .bp-price {
    font-family: var(--display); font-weight: 900; color: #fff;
    font-size: clamp(38px, 4.6vw, 88px); line-height: 1; letter-spacing: -.02em; margin-top: 2px;
  }
  .bp-fine {
    margin-top: clamp(8px, 1.2vh, 14px);
    font-size: clamp(10px, .92vw, 17px); letter-spacing: .13em; line-height: 1.7; text-transform: uppercase;
    color: rgba(244, 236, 224, .82);
  }

  /* ---------- Section 07: Client reflections (moonlit beach) ---------- */
  .reflections {
    --accent: #cca35f;
    --accent-line: rgba(204, 163, 95, .58);
    --cream: #f4ece0;
    position: relative; isolation: isolate; overflow: hidden;
    min-height: max(100vh, 940px);
    background: #060b0d;
    padding: calc(1.8vh + 78px + 3vh) 3.4vw 2.6vh;
    display: flex; flex-direction: column;
  }
  .reflections::before { /* the moonlit beach, viewport-fixed so it parallaxes as the section passes */
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: #060b0d url("assets/reflections/moonlit-beach.webp") no-repeat center / cover fixed;
  }
  .reflections::after { /* legibility wash: dark at the top-left where the copy sits */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(4,8,10,.8) 0%, rgba(4,8,10,.34) 26%, rgba(4,8,10,.2) 50%, rgba(4,8,10,.55) 88%, rgba(4,8,10,.75) 100%),
                linear-gradient(90deg, rgba(4,8,10,.66) 0%, rgba(4,8,10,.22) 46%, rgba(4,8,10,0) 68%);
  }

  /* arc + star ornament, top centre */
  .rf-arc { position: absolute; top: calc(1.8vh + 78px + 1vh); left: 50%; width: min(19vw, 270px); aspect-ratio: 2 / 1; transform: translateX(-52%); pointer-events: none; }
  .rf-arc::before {
    content: ""; position: absolute; inset: 0; border: 1px solid var(--accent-line); border-bottom: 0;
    border-radius: 999px 999px 0 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  }
  .rf-arc::after { /* the sparkle sitting inside the arc */
    content: ""; position: absolute; left: 50%; bottom: 8%; width: 30px; height: 44px; margin-left: -15px;
    background: var(--accent);
    clip-path: polygon(50% 0, 57% 42%, 100% 50%, 57% 58%, 50% 100%, 43% 58%, 0 50%, 43% 42%);
  }

  /* right-edge stack, like a margin note */
  .rf-side {
    position: absolute; right: 3.4vw; top: calc(1.8vh + 78px + 5vh); text-align: right;
    font-size: clamp(10px, .86vw, 16px); letter-spacing: .26em; line-height: 1.85; text-transform: uppercase;
    color: var(--cream);
  }
  .rf-side::before, .rf-side::after { content: ""; display: block; width: 1px; height: 26px; background: var(--accent-line); margin-left: auto; }
  .rf-side::before { margin-bottom: 14px; }
  .rf-side::after { margin-top: 14px; }

  .rf-head { position: relative; z-index: 2; max-width: min(64vw, 1000px); }
  .reflections h2 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(30px, 3.85vw, 74px); line-height: .96; letter-spacing: -.035em; word-spacing: .04em;
    color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,.5);
  }
  .reflections h2 span { display: block; }
  .rf-lede {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(17px, 1.85vw, 35px); line-height: 1.26;
    color: var(--cream); margin-top: clamp(10px, 1.6vh, 20px); max-width: 24em;
    text-shadow: 0 2px 18px rgba(0,0,0,.5);
  }

  /* no z-index here: it would nest a stacking context and trap the emblem's screen blend
     (the section's isolate + negative-z backdrop layers already put content on top) */
  .rf-grid {
    position: relative; margin-top: 0; padding-top: clamp(32px, 1.4vh, 18px);
    display: grid; grid-template-columns: minmax(0, 1.48fr) 1px minmax(0, 1fr); gap: clamp(20px, 2.4vw, 46px);
    align-items: stretch;
  }
  .rf-split { position: relative; background: var(--accent-line); }   /* the vertical rule between columns */
  .rf-split i {
    position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -7px 0 0 -7px;
    border: 1px solid var(--accent); background: #07100f; transform: rotate(45deg);
  }
  .rf-split i::after { content: ""; position: absolute; inset: 3px; background: var(--accent); }

  /* ---- featured quote ---- */
  /* No backdrop-filter here on purpose: it would create a stacking context and trap the emblem's
     screen blend inside the card, leaving a black plate instead of gold linework. */
  .rf-feature {
    position: relative; margin: 0; overflow: hidden;
    border: 1px solid var(--accent-line); background: rgba(5, 12, 14, .52);
    padding: clamp(26px, 3.6vh, 54px) clamp(24px, 2.6vw, 52px) clamp(22px, 3vh, 44px);
  }
  .rf-feature > blockquote, .rf-feature > figcaption, .rf-feature > .bp-cta, .rf-feature > .rf-note { position: relative; }
  .rf-feature::before { /* corner brackets */
    content: ""; position: absolute; inset: 7px; pointer-events: none; --c: var(--accent);
    background:
      linear-gradient(var(--c), var(--c)) left top / 18px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) left top / 1px 18px no-repeat,
      linear-gradient(var(--c), var(--c)) right top / 18px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) right top / 1px 18px no-repeat,
      linear-gradient(var(--c), var(--c)) left bottom / 18px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) left bottom / 1px 18px no-repeat,
      linear-gradient(var(--c), var(--c)) right bottom / 18px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) right bottom / 1px 18px no-repeat;
  }
  .rf-emblem {
    position: absolute; right: 0%; top: 36%; width: min(23vw, 300px);
    mix-blend-mode: screen; opacity: .9; pointer-events: none;
  }
  .rf-feature blockquote {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(19px, 2.1vw, 40px); line-height: 1.24; letter-spacing: -.004em;
    color: #fff; max-width: 15em;
  }
  .rf-feature figcaption {
    margin-top: clamp(12px, 1.8vh, 24px);
    font-size: clamp(11px, 1.02vw, 19px); letter-spacing: .24em; text-transform: uppercase; color: var(--accent);
  }
  .reflections .bp-cta {
    margin-top: clamp(16px, 2.4vh, 32px);
    padding: clamp(11px, 1.35vh, 18px) clamp(18px, 1.9vw, 34px);
    font-size: clamp(12px, 1.05vw, 20px); letter-spacing: .18em;
  }
  .reflections .bp-cta svg { width: clamp(18px, 1.6vw, 28px); }
  .rf-note {
    margin-top: clamp(14px, 2vh, 26px);
    font-size: clamp(10px, .92vw, 17px); letter-spacing: .2em; line-height: 1.8; text-transform: uppercase;
    color: rgba(244, 236, 224, .9);
  }

  /* ---- short quotes ---- */
  .rf-list {
    list-style: none; display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 1.8vh, 24px);
    /* The moon trail runs straight behind this column. A tinted panel plus a wide, soft shadow of the
       same colour darkens the water without drawing a visible box edge. */
    background: rgba(4, 9, 11, .58);
    box-shadow: 0 0 56px 34px rgba(4, 9, 11, .58);
  }
  .rf-list li + li { border-top: 1px solid var(--accent-line); padding-top: clamp(12px, 1.8vh, 24px); position: relative; }
  .rf-list li + li::before { /* diamond on the divider */
    content: ""; position: absolute; left: 50%; top: 0; width: 11px; height: 11px; margin: -6px 0 0 -6px;
    border: 1px solid var(--accent); background: #07100f; transform: rotate(45deg);
  }
  .rf-list blockquote {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(15px, 1.34vw, 25px); line-height: 1.5; color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.75);
  }
  .rf-list cite {
    display: block; margin-top: 7px; font-style: normal;
    font-size: clamp(10px, .92vw, 17px); letter-spacing: .24em; text-transform: uppercase; color: var(--accent);
  }

  /* ---- footer strip ---- */
  .rf-foot {
    position: relative; z-index: 2; margin-top: clamp(18px, 2.6vh, 36px);
    display: flex; align-items: center; gap: clamp(14px, 1.8vw, 34px);
    font-size: clamp(9px, .84vw, 16px); letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
  }
  .rf-foot i { position: relative; flex: 1 1 auto; height: 1px; background: var(--accent-line); }
  .rf-foot i::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -6px 0 0 -6px;
    background: var(--accent); transform: rotate(45deg);
  }

  /* ---------- Section 08: Who I am (about Matt) ---------- */
  .about {
    --accent: #c9a063;
    --accent-line: rgba(201, 160, 99, .58);
    --cream: #efe6d8;
    position: relative; isolation: isolate; overflow: hidden;
    background: #272420;
    padding: calc(1.8vh + 78px + 3.2vh) clamp(42px, 5.4vw, 116px) clamp(34px, 5vh, 72px);
  }
  .about::before { /* same charcoal grain as the other dark panels */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url("assets/reframe/charcoal-grain.webp") repeat; background-size: 440px 440px;
    opacity: .5;
  }
  .about::after { /* warm pools of light: top-left behind the copy, and behind the portrait */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(ellipse 48% 54% at 16% 20%, rgba(201, 160, 99, .10), transparent 70%),
      radial-gradient(ellipse 38% 46% at 78% 44%, rgba(201, 160, 99, .08), transparent 72%);
  }
  .about .deco-frame i { background: #272420; }
  .ab-sun { /* the ray fan tucked into the bottom-right corner */
    position: absolute; right: -3vw; bottom: -4vw; width: min(22vw, 320px);
    opacity: .4; mix-blend-mode: screen; pointer-events: none; transform: rotate(-90deg);
  }

  /* concentric arcs + sparkles in the gutter beside the headline */
  .ab-arcs { position: absolute; left: 24%; top: 8%; width: min(30vw, 470px); aspect-ratio: 1; pointer-events: none; }
  .ab-arcs i, .ab-arcs u {
    position: absolute; border-radius: 50%; border: 1px solid rgba(201, 160, 99, .34);
    -webkit-mask-image: linear-gradient(88deg, transparent 40%, #000 76%);
            mask-image: linear-gradient(88deg, transparent 40%, #000 76%);
  }
  .ab-arcs i { inset: 0; }
  .ab-arcs i + i { inset: 9%; }
  .ab-arcs u { inset: 20%; border-style: dotted; border-color: rgba(201, 160, 99, .45); }
  .ab-star {
    position: absolute; background: var(--accent); pointer-events: none;
    clip-path: polygon(50% 0, 57% 42%, 100% 50%, 57% 58%, 50% 100%, 43% 58%, 0 50%, 43% 42%);
  }
  .ab-star.s1 { left: 46.5%; top: 21%; width: 26px; height: 38px; }
  .ab-star.s2 { left: 50.5%; top: 30%; width: 15px; height: 22px; opacity: .8; }
  .ab-star.s3 { left: 44%; top: 45%; width: 11px; height: 16px; opacity: .55; }

  /* Parallax planes. about-motion.js writes one value, --ab-drift; each layer takes its own rate,
     so the ornaments sink while the portrait and copy rise gently against them. */
  .ab-arcs    { translate: 0 calc(var(--ab-drift, 0px) * .9); }
  .ab-sun     { translate: 0 calc(var(--ab-drift, 0px) * .7); }
  .ab-star.s1 { translate: 0 calc(var(--ab-drift, 0px) * 1.1); }
  .ab-star.s2 { translate: 0 calc(var(--ab-drift, 0px) * .72); }
  .ab-star.s3 { translate: 0 calc(var(--ab-drift, 0px) * 1.28); }
  .ab-portrait { translate: 0 calc(var(--ab-drift, 0px) * -.18); }
  .ab-copy     { translate: 0 calc(var(--ab-drift, 0px) * -.07); }
  @media (prefers-reduced-motion: reduce) {
    .ab-arcs, .ab-sun, .ab-star, .ab-portrait, .ab-copy { translate: none; }
  }

  .ab-grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: clamp(28px, 3.6vw, 78px); align-items: start;
  }

  /* ---- left column: the copy ---- */
  .ab-copy { padding: 0 24px; }
  .about .deco-eyebrow { margin-bottom: clamp(14px, 1.9vh, 26px); }
  .about h2 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(46px, 6.6vw, 128px); line-height: .9; letter-spacing: -.045em; word-spacing: .07em;
    color: #fff;
  }
  .ab-lede, .ab-body {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(16px, 1.66vw, 33px); line-height: 1.56; color: var(--cream);
    max-width: 22em;
  }
  .ab-lede { margin-top: clamp(16px, 2.4vh, 32px); }
  .ab-body { margin-top: clamp(18px, 2.7vh, 36px); color: rgba(239, 230, 216, .88); }
  .ab-rule { /* gold hairline with a diamond at its centre */
    position: relative; height: 1px; background: var(--accent-line);
    margin: clamp(26px, 3.6vh, 46px) 0 clamp(8px, 1vh, 16px); max-width: 22em;
  }
  .ab-rule i {
    position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -7px 0 0 -7px;
    border: 1px solid var(--accent); background: #272420; transform: rotate(45deg);
  }
  .ab-claim {
    font-family: "Playfair Display", var(--serif); font-weight: 700;
    font-size: clamp(17px, 1.6vw, 32px); line-height: 1.46; color: #fff;
    margin-top: clamp(28px, 3.8vh, 50px); max-width: 27em;
  }
  .ab-foot {
    display: flex; align-items: center; flex-wrap: wrap; gap: clamp(18px, 2.2vw, 54px);
    margin-top: clamp(28px, 4vh, 56px);
  }
  .about .bp-cta {
    margin-top: 0; flex: 0 0 auto;
    padding: clamp(14px, 1.7vh, 23px) clamp(20px, 2.1vw, 38px);
  }
  .about .bp-cta svg { color: var(--action); }
  .about .bp-cta:hover { background: rgba(201, 160, 99, .12); }
  .ab-note {
    padding-left: clamp(18px, 2.2vw, 44px); border-left: 1px solid var(--accent-line);
    font-size: clamp(10px, .88vw, 17px); letter-spacing: .16em; line-height: 1.9;
    text-transform: uppercase; color: var(--accent);
    /* two lines, as drawn — if the row runs out of room the flex wrap drops it below the button */
    white-space: nowrap;
    padding-bottom: 16px;
  }

  /* ---- right column: the framed portrait ---- */
  .ab-portrait { position: relative; padding: 0 clamp(22px, 2.4vw, 46px); }
  .ab-rail { /* vertical margin notes either side of the frame */
    position: absolute; top: 12%; writing-mode: vertical-rl;
    font-size: clamp(9px, .82vw, 15px); letter-spacing: .3em; text-transform: uppercase;
    color: var(--accent); white-space: nowrap;
  }
  .ab-rail.l { left: 0; transform: rotate(180deg); }
  .ab-rail.r { right: 0; }
  .ab-plate { position: relative; border: 1px solid var(--accent-line); padding: clamp(8px, .75vw, 15px); }
  /* height:auto is required — the img's height attribute is a presentation hint that would
     otherwise beat aspect-ratio and stretch the frame to the file's full 1536px */
  .ab-plate img { width: 100%; height: auto; aspect-ratio: 79 / 100; object-fit: cover; border: 1px solid rgba(201, 160, 99, .4); }
  .ab-pin { /* diamonds centred on the top and bottom rails of the frame */
    position: absolute; left: 50%; width: 15px; height: 15px; margin-left: -8px;
    border: 1px solid var(--accent); background: #272420; transform: rotate(45deg);
  }
  .ab-pin::after { content: ""; position: absolute; inset: 3px; background: var(--accent); }
  .ab-pin.t { top: -8px; }
  .ab-pin.b { bottom: -8px; }
  .ab-portrait figcaption {
    display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.4vw, 26px);
    margin-top: clamp(12px, 1.6vh, 22px);
    font-size: clamp(10px, .92vw, 17px); letter-spacing: .24em; text-transform: uppercase; color: var(--cream);
  }
  .ab-portrait figcaption i { flex: 1 1 auto; height: 1px; background: var(--accent-line); max-width: 90px; }
  .ab-portrait figcaption em { font-style: normal; color: var(--accent); margin: 0 .3em; }

  /* ---------- Section 09: Sacred ID might be a good fit if… (black sand) ---------- */
  .fit {
    --accent: #c9a063;
    --accent-line: rgba(201, 160, 99, .55);
    --cream: #efe6d8;
    position: relative; isolation: isolate; overflow: hidden;
    min-height: max(100vh, 980px);
    background: #0a0908;
    padding: calc(1.8vh + 78px + 2.6vh) clamp(38px, 4.4vw, 96px) clamp(30px, 4vh, 66px);
    display: flex; flex-direction: column;
  }
  .fit::before { /* the black-sand scene: cards and compass sit in its right third.
                    Oversized top and bottom so it can drift without exposing an edge. */
    content: ""; position: absolute; left: 0; right: 0; top: -8%; bottom: -8%; z-index: -2; pointer-events: none;
    background: #0a0908 url("assets/fit/black-sand.webp") no-repeat center right / cover;
    translate: 0 var(--fit-drift, 0px);
  }
  .fit::after { /* legibility wash so the list stays readable over the sand */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(6,5,5,.92) 0%, rgba(6,5,5,.86) 40%, rgba(6,5,5,.6) 54%, rgba(6,5,5,.2) 68%, rgba(6,5,5,0) 80%),
      linear-gradient(180deg, rgba(6,5,5,.6) 0%, rgba(6,5,5,0) 22%, rgba(6,5,5,0) 74%, rgba(6,5,5,.5) 100%);
  }
  .fit .deco-frame i { background: #0a0908; }

  /* right-edge margin notes, stacked down the outer rail */
  .fit-rail {
    position: absolute; right: clamp(38px, 4.4vw, 96px); text-align: right; z-index: 2;
    font-size: clamp(9px, .84vw, 16px); letter-spacing: .26em; line-height: 1.9;
    text-transform: uppercase; color: var(--accent);
  }
  .fit-rail.top { top: calc(1.8vh + 78px + 3vh); }
  .fit-rail.mid { top: 58%; }
  .fit-rail.low { bottom: clamp(34px, 5vh, 80px); color: var(--cream); padding-right: 14px; border-right: 1px solid var(--accent-line); }
  .fit-rail.top::after { content: ""; display: block; width: 1px; height: 30px; margin: 12px 0 0 auto; background: var(--accent-line); }

  .fit-head { position: relative; z-index: 2; max-width: min(50vw, 960px); }
  .fit .deco-eyebrow { margin-bottom: clamp(12px, 1.7vh, 22px); }
  /* the teal index bar that runs down the left of the headline */
  .fit-title { position: relative; padding-left: clamp(40px, 4.2vw, 88px); }
  .fit-title::before {
    content: ""; position: absolute; left: clamp(14px, 1.5vw, 30px); top: 2%; bottom: 8%;
    width: 2px; background: var(--action);
  }
  .fit-title .idx {
    position: absolute; left: 0; top: 46%; transform: translateY(-50%);
    font-size: clamp(11px, 1.02vw, 19px); letter-spacing: .12em; color: var(--action);
  }
  .fit h2 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(32px, 4.15vw, 80px); line-height: .95; letter-spacing: -.038em; word-spacing: .05em;
    color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,.6);
  }
  .fit h2 span { display: block; }
  .fit-sub {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(18px, 2.05vw, 39px); line-height: 1.36; color: var(--cream);
    margin-top: clamp(15px, 2.2vh, 30px); text-shadow: 0 2px 18px rgba(0,0,0,.55);
  }
  .fit-sub span { display: block; }
  .fit-kicker {
    margin-top: clamp(13px, 1.9vh, 26px);
    font-size: clamp(10px, .95vw, 18px); letter-spacing: .26em; text-transform: uppercase;
    color: rgba(239, 230, 216, .72);
  }
  .fit-divide { /* gold rule with a diamond at its centre, under the header */
    position: relative; height: 1px; background: var(--accent-line);
    margin: clamp(24px, 3.4vh, 46px) 0 clamp(6px, 1vh, 16px); max-width: min(50vw, 960px);
  }
  .fit-divide i {
    position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -7px 0 0 -7px;
    border: 1px solid var(--accent); background: #0a0908; transform: rotate(45deg);
  }

  /* ---- the six criteria ---- */
  .fit-list { position: relative; z-index: 2; list-style: none; max-width: min(50vw, 960px); }

  /* Parallax planes. fit-motion.js writes one value, --fit-drift; each layer takes its own rate,
     so the sand sinks behind while the header, list and margin notes rise gently against it. */
  .fit-rail.top { translate: 0 calc(var(--fit-drift, 0px) * .58); }
  .fit-rail.mid { translate: 0 calc(var(--fit-drift, 0px) * .34); }
  .fit-rail.low { translate: 0 calc(var(--fit-drift, 0px) * -.26); }
  .fit-head   { translate: 0 calc(var(--fit-drift, 0px) * -.16); }
  .fit-divide { translate: 0 calc(var(--fit-drift, 0px) * -.1); }
  .fit-list   { translate: 0 calc(var(--fit-drift, 0px) * -.06); }
  @media (prefers-reduced-motion: reduce) {
    .fit::before, .fit-rail, .fit-head, .fit-divide, .fit-list { translate: none; }
  }
  .fit-list li {
    display: grid; grid-template-columns: clamp(38px, 4vw, 86px) 1px 1fr;
    gap: clamp(16px, 1.9vw, 38px); align-items: start;
    padding: clamp(20px, 2.9vh, 40px) 0;
    position: relative;
  }
  .fit-list li + li::before { /* hairline between rows, with a diamond on its right end */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent-line);
  }
  .fit-list li + li::after {
    content: ""; position: absolute; right: -6px; top: -6px; width: 12px; height: 12px;
    border: 1px solid var(--accent); background: #0a0908; transform: rotate(45deg);
  }
  .fit-num {
    font-size: clamp(12px, 1.16vw, 22px); letter-spacing: .1em; color: var(--cream);
    padding-top: .18em;
  }
  /* not .rule — that's a global 1px-high horizontal divider and its height would win */
  .fit-list li > .fit-rule { width: 1px; align-self: stretch; background: var(--accent-line); }
  .fit-list h3 {
    font-family: var(--display); font-weight: 800;
    font-size: clamp(16px, 1.52vw, 29px); line-height: 1.26; letter-spacing: -.015em; color: #fff;
  }
  .fit-list p {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(14px, 1.33vw, 26px); line-height: 1.52; color: rgba(239, 230, 216, .9);
    margin-top: .55em; max-width: 34em;
  }

  /* ---------- Section 10: FAQ accordion ---------- */
  .faq {
    --accent: #c9a063;
    --accent-line: rgba(201, 160, 99, .52);
    --cream: #efe6d8;
    position: relative; isolation: isolate; overflow: hidden;
    background: #211f1d;
    padding: calc(1.8vh + 78px + 3vh) clamp(38px, 4.4vw, 92px) clamp(32px, 4.4vh, 70px);
  }
  .faq::before { /* the same charcoal grain as the other dark panels */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url("assets/reframe/charcoal-grain.webp") repeat; background-size: 440px 440px;
    opacity: .5;
  }
  .faq .deco-frame i { background: #211f1d; }
  .faq-burst { /* ray fan in the bottom-left corner */
    position: absolute; left: -6vw; bottom: -4vw; width: min(17vw, 250px);
    opacity: .3; mix-blend-mode: screen; pointer-events: none; transform: rotate(180deg);
  }

  /* no z-index here: it would nest a stacking context and trap the compass's screen blend
     (the section's isolate + negative-z grain already put content on top) */
  .faq-grid {
    position: relative;
    display: grid; grid-template-columns: minmax(0, .58fr) minmax(0, 1fr);
    gap: clamp(26px, 2.6vw, 56px); align-items: start;
  }

  /* ---- left column ---- */
  .faq-copy { padding: 0 24px; }
  .faq .deco-eyebrow { margin-bottom: clamp(12px, 1.8vh, 24px); }
  .faq h2 {
    font-family: var(--display); font-weight: 900;
    /* sized so "answered with" stays on one line, as drawn */
    font-size: clamp(32px, 4.2vw, 80px); line-height: .92; letter-spacing: -.042em; word-spacing: .05em;
    color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.5);
  }
  .faq h2 span { display: block; }
  .faq-lede {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(17px, 1.92vw, 37px); line-height: 1.44; color: var(--cream);
    margin-top: clamp(18px, 2.6vh, 34px);
  }
  .faq-rule { /* gold hairline with a tiffany diamond at its centre */
    position: relative; height: 1px; background: var(--accent-line);
    margin: clamp(20px, 2.8vh, 40px) 0 clamp(18px, 2.4vh, 32px);
  }
  .faq-rule::before, .faq-rule::after {
    content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--accent-line);
  }
  .faq-rule::before { left: 0; } .faq-rule::after { right: 0; }
  .faq-rule i {
    position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -8px 0 0 -8px;
    border: 1px solid var(--accent); background: #211f1d; transform: rotate(45deg);
  }
  .faq-rule i::after { content: ""; position: absolute; inset: 3px; background: var(--action); }
  .faq-note {
    font-size: clamp(10px, 1.02vw, 19px); letter-spacing: .24em; line-height: 1.85;
    text-transform: uppercase; color: var(--cream);
  }
  .faq-compass {
    display: block; width: min(15vw, 220px); height: auto; aspect-ratio: 3 / 4; object-fit: contain; margin: clamp(6px, 1vh, 18px) 0 0 0;
    opacity: .92; mix-blend-mode: screen; pointer-events: none;
  }
  .faq-tag {
    margin: clamp(-46px, -4vh, -20px) 0 0 clamp(90px, 18vw, 300px);
    font-size: clamp(10px, .96vw, 18px); letter-spacing: .24em; line-height: 1.9;
    text-transform: uppercase; color: var(--accent);
  }

  /* ---- right column: the accordion panel ---- */
  .faq-panel {
    position: relative; padding: clamp(12px, 1.2vw, 24px);
    border: 1px solid var(--accent-line);
  }
  .faq-panel::after { /* corner brackets, set just inside the rule */
    content: ""; position: absolute; inset: 4px; pointer-events: none; --c: var(--accent);
    background:
      linear-gradient(var(--c), var(--c)) left top / 20px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) left top / 1px 20px no-repeat,
      linear-gradient(var(--c), var(--c)) right top / 20px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) right top / 1px 20px no-repeat,
      linear-gradient(var(--c), var(--c)) left bottom / 20px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) left bottom / 1px 20px no-repeat,
      linear-gradient(var(--c), var(--c)) right bottom / 20px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) right bottom / 1px 20px no-repeat;
  }
  .faq-list { position: relative; z-index: 1; list-style: none; padding: clamp(6px, .8vw, 14px); }
  .faq-item { position: relative; }
  .faq-item + .faq-item { border-top: 1px solid var(--accent-line); }

  .faq-q {
    width: 100%; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 32px);
    padding: clamp(18px, 2.4vh, 32px) clamp(10px, 1.2vw, 24px);
    background: none; border: 0; cursor: pointer; text-align: left;
    color: #fff; font-family: var(--mono);
    transition: color .3s var(--ease);
  }
  .faq-q:hover .faq-qt { color: var(--action); }
  .faq-badge {
    position: relative; flex: 0 0 auto; display: grid; place-items: center;
    width: clamp(34px, 3.3vw, 62px); aspect-ratio: 1;
    font-size: clamp(11px, 1.04vw, 20px); letter-spacing: .06em; color: var(--accent);
  }
  .faq-badge::before {
    content: ""; position: absolute; inset: 0; border: 1px solid var(--accent); transform: rotate(45deg);
  }
  .faq-qt {
    flex: 1 1 auto;
    font-size: clamp(12px, 1.2vw, 23px); letter-spacing: .12em; line-height: 1.5; text-transform: uppercase;
    transition: color .3s var(--ease);
  }
  .faq-ico { flex: 0 0 auto; width: clamp(16px, 1.5vw, 28px); display: grid; place-items: center; color: var(--accent); }
  .faq-ico svg { width: 100%; height: auto; }
  .faq-q[aria-expanded="true"] .faq-ico { color: var(--action); }
  .faq-q[aria-expanded="true"] .i-plus,
  .faq-q[aria-expanded="false"] .i-chev { display: none; }

  /* answer: 0fr → 1fr keeps the open/close smooth without measuring heights */
  .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
  .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
  .faq-a > div { overflow: hidden; }
  .faq-a p {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(15px, 1.42vw, 27px); line-height: 1.56; color: var(--cream);
    padding: clamp(20px, 2.7vh, 36px) clamp(14px, 1.8vw, 38px) clamp(22px, 3vh, 40px);
    border-top: 1px solid var(--accent-line);
  }
  /* the open panel gets its own frame + corner brackets, as drawn */
  .faq-item.is-open { border-top-color: transparent; }
  .faq-item.is-open::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    border: 1px solid var(--accent-line);
  }
  .faq-item.is-open::after {
    content: ""; position: absolute; inset: 6px; pointer-events: none; --c: var(--accent);
    background:
      linear-gradient(var(--c), var(--c)) left top / 16px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) left top / 1px 16px no-repeat,
      linear-gradient(var(--c), var(--c)) right top / 16px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) right top / 1px 16px no-repeat,
      linear-gradient(var(--c), var(--c)) left bottom / 16px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) left bottom / 1px 16px no-repeat,
      linear-gradient(var(--c), var(--c)) right bottom / 16px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) right bottom / 1px 16px no-repeat;
  }

  .faq-gem {
    position: relative; width: 22px; height: 22px; margin: clamp(14px, 2vh, 28px) auto 0;
    border: 1px solid var(--accent); transform: rotate(45deg);
  }
  .faq-gem::after { content: ""; position: absolute; inset: 3px; background: var(--accent); }
  .faq-foot {
    display: flex; align-items: center; justify-content: center; gap: clamp(14px, 1.6vw, 32px);
    margin-top: clamp(14px, 1.8vh, 26px); padding: clamp(12px, 1.6vh, 22px) clamp(6px, .8vw, 14px) 0;
    border-top: 1px solid var(--accent-line);
    font-size: clamp(10px, .96vw, 18px); letter-spacing: .24em; text-transform: uppercase; color: var(--accent);
  }
  .faq-foot i { flex: 1 1 auto; height: 1px; max-width: 190px; background: var(--accent-line); }

  /* ---------- Section 11: Final call to action ---------- */
  .finale {
    --accent: #c9a063;
    --accent-line: rgba(201, 160, 99, .5);
    --cream: #efe6d8;
    position: relative; isolation: isolate; overflow: hidden;
    min-height: max(100vh, 880px);
    background: #26231f;
    padding: calc(1.8vh + 78px + 4vh) clamp(38px, 5vw, 110px) clamp(40px, 6vh, 90px);
    display: flex; flex-direction: column; justify-content: center; text-align: center;
  }
  .finale::before { /* the charcoal grain the other warm panels use */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url("assets/reframe/charcoal-grain.webp") repeat; background-size: 440px 440px;
    opacity: .45;
  }
  .finale .deco-frame i { background: #26231f; }
  .fin-burst { /* ray fans in the two bottom corners, as drawn */
    position: absolute; bottom: -5vw; width: min(26vw, 380px);
    opacity: .4; mix-blend-mode: screen; pointer-events: none;
  }
  /* no rotation: this asset already fans upward, and turning it scatters its sparkles */
  .fin-burst.bl { left: -4vw; }
  .fin-burst.br { right: -4vw; transform: scaleX(-1); }

  /* concentric arcs sweeping behind the headline */
  .fin-arcs {
    position: absolute; left: 50%; top: 10%; width: min(88vw, 1560px); aspect-ratio: 1;
    transform: translateX(-50%); pointer-events: none; z-index: -1;
  }
  .fin-arcs i, .fin-arcs u {
    position: absolute; border-radius: 50%; border: 1px solid rgba(201, 160, 99, .22);
    -webkit-mask-image: linear-gradient(180deg, #000 0 48%, transparent 68%);
            mask-image: linear-gradient(180deg, #000 0 48%, transparent 68%);
  }
  .fin-arcs i { inset: 0; }
  .fin-arcs i + i { inset: 8%; }
  .fin-arcs u { inset: 17%; border-style: dotted; border-color: rgba(201, 160, 99, .3); }

  .fin-inner { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; }

  /* Parallax planes. finale-motion.js writes one value, --fin-drift; each layer takes its own rate,
     so the arcs and corner ray fans sink while the crest, headline and action row rise against them.
     These use the translate property, not transform: .fin-burst.br and .fin-arcs already carry one. */
  .fin-arcs   { translate: 0 calc(var(--fin-drift, 0px) * .9); }
  .fin-burst  { translate: 0 calc(var(--fin-drift, 0px) * .62); }
  .fin-crest  { translate: 0 calc(var(--fin-drift, 0px) * -.12); }
  .finale h2  { translate: 0 calc(var(--fin-drift, 0px) * -.2); }
  .fin-body   { translate: 0 calc(var(--fin-drift, 0px) * -.13); }
  .fin-action { translate: 0 calc(var(--fin-drift, 0px) * -.07); }
  @media (prefers-reduced-motion: reduce) {
    .fin-arcs, .fin-burst, .fin-crest, .finale h2, .fin-body, .fin-action { translate: none; }
  }

  /* crest: compass medallion with its two symmetrical arms */
  .fin-crest { display: block; width: min(76vw, 1100px); margin: 0 auto clamp(18px, 3.4vh, 54px); color: var(--accent); }
  .fin-crest svg { display: block; width: 100%; height: auto; }

  .finale h2 {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(38px, 7.9vw, 150px); line-height: .93; letter-spacing: -.045em; word-spacing: .06em;
    color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.45);
  }
  .finale h2 span { display: block; }
  .fin-body {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(16px, 1.82vw, 36px); line-height: 1.5; color: var(--cream);
    margin: clamp(20px, 3.2vh, 46px) auto 0; max-width: 30em;
  }

  /* the action row: hairline, plate, hairline */
  .fin-action {
    display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.6vw, 56px);
    margin-top: clamp(26px, 4.4vh, 62px);
  }
  .fin-rule { position: relative; flex: 1 1 auto; max-width: clamp(60px, 16vw, 300px); height: 1px; background: var(--accent-line); }
  .fin-rule::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -6px 0 0 -6px;
    border: 1px solid var(--accent); background: #26231f; transform: rotate(45deg);
  }
  /* Tiffany, not gold: this is the same fit-call action as the blueprint section,
     and the two-metals rule reserves Tiffany for anything actionable */
  .finale .bp-cta { margin-top: 0; flex: 0 0 auto; border-color: var(--action); }
  .finale .bp-cta::before, .finale .bp-cta::after,
  .finale .bp-cta i::before, .finale .bp-cta i::after { border-color: var(--action); }
  .finale .bp-cta svg { color: var(--action); }
  .finale .bp-cta:hover { background: rgba(134, 209, 205, .12); }

  .fin-coda { display: block; width: clamp(90px, 9vw, 160px); margin: clamp(12px, 2vh, 26px) auto 0; color: var(--accent); }
  .fin-coda svg { display: block; width: 100%; height: auto; }

  /* visually hidden, still read by screen readers */
  .sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  /* ---------- Site footer ---------- */
  .site-foot {
    --accent: #c9a063;
    --accent-line: rgba(201, 160, 99, .5);
    --cream: #efe6d8;
    position: relative; isolation: isolate; overflow: hidden;
    background: #07171b;   /* cold branch: the imagery here is night sky */
    padding: clamp(40px, 6vh, 92px) clamp(26px, 3.6vw, 82px) clamp(26px, 3.6vh, 54px);
  }
  .site-foot::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: #07171b url("assets/footer/night-sky.webp") no-repeat center / cover;
  }
  .site-foot::after { /* keeps the four columns legible over the cloud bank */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(5,16,19,.72) 0%, rgba(5,16,19,.84) 55%, rgba(5,16,19,.92) 100%);
  }
  .site-foot .deco-frame i { background: #0a191d; }

  .foot-grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .82fr) minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(20px, 2.8vw, 56px);
    padding: clamp(14px, 2.4vh, 36px) clamp(10px, 1.6vw, 36px) clamp(20px, 3vh, 44px);
  }
  /* 1px rules between columns, as drawn */
  .foot-col + .foot-col { border-left: 1px solid var(--accent-line); padding-left: clamp(18px, 2.4vw, 48px); }

  /* ---- brand column ---- */
  .foot-mark { display: block; width: clamp(260px, 25vw, 460px); height: auto; margin-bottom: clamp(16px, 2.4vh, 32px); }
  .foot-rule { position: relative; height: 1px; background: var(--accent-line); margin: clamp(16px, 2.4vh, 32px) 0; }
  .foot-rule::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -6px 0 0 -6px;
    border: 1px solid var(--accent); background: #0a191d; transform: rotate(45deg);
  }
  .foot-lead {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(19px, 1.74vw, 34px); line-height: 1.24; color: #fff;
  }
  .foot-sub {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(15px, 1.24vw, 24px); line-height: 1.5; color: var(--cream);
    margin-top: clamp(8px, 1.2vh, 16px); max-width: 24em;
  }
  .foot-form { display: flex; align-items: stretch; gap: clamp(8px, 1vw, 18px); margin-top: clamp(16px, 2.4vh, 32px); }
  .foot-form input {
    flex: 1 1 auto; min-width: 0;
    padding: clamp(12px, 1.5vh, 18px) clamp(12px, 1.2vw, 20px);
    background: rgba(255,255,255,.03); border: 1px solid var(--accent-line); border-radius: 0;
    color: var(--ink);
    font: 400 clamp(11px, .94vw, 17px)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  }
  .foot-form input::placeholder { color: rgba(239, 230, 216, .45); }
  .foot-form input:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-color: var(--action); }
  .foot-join {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px;
    padding: clamp(12px, 1.5vh, 18px) clamp(16px, 1.6vw, 28px);
    background: none; border: 1px solid var(--accent); border-radius: 0; cursor: pointer;
    color: var(--ink);
    font: 500 clamp(11px, .94vw, 17px)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
    transition: background .4s var(--ease);
  }
  .foot-join svg { width: 22px; color: var(--accent); }
  .foot-join:hover { background: rgba(201, 160, 99, .14); }
  .foot-join:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
  .foot-note {
    display: flex; align-items: flex-start; gap: 12px; margin-top: clamp(12px, 1.8vh, 22px);
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(13px, 1.06vw, 20px); line-height: 1.45; color: var(--cream);
  }
  .foot-note svg { flex: 0 0 auto; width: clamp(15px, 1.2vw, 22px); color: var(--action); margin-top: .15em; }

  /* ---- link columns ---- */
  .foot-label {
    font-size: clamp(10px, .95vw, 18px); letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
    margin-bottom: clamp(28px, 4.2vh, 52px);
  }
  .foot-links { list-style: none; display: grid; gap: clamp(12px, 1.8vh, 24px); }
  .foot-links a {
    font-size: clamp(11px, 1.04vw, 20px); letter-spacing: .13em; text-transform: uppercase; color: var(--cream);
    transition: color .3s var(--ease);
  }
  .foot-links a:hover { color: var(--action); }
  .foot-links a:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }

  /* ---- contact column ---- */
  /* the system's bracket plate, sized down. Not a new shape: DESIGN.md allows
     exactly two button shapes, and a clipped octagon shreds a 1.5px border anyway */
  .site-foot .bp-cta {
    margin-top: 0; white-space: nowrap;
    padding: clamp(13px, 1.7vh, 20px) clamp(16px, 1.7vw, 30px);
    font-size: clamp(10px, .9vw, 17px); letter-spacing: .12em;
    border-color: var(--action);
  }
  .site-foot .bp-cta::before, .site-foot .bp-cta::after,
  .site-foot .bp-cta i::before, .site-foot .bp-cta i::after { border-color: var(--action); }
  .site-foot .bp-cta svg { width: clamp(22px, 2vw, 34px); color: var(--action); }
  .site-foot .bp-cta:hover { background: rgba(134, 209, 205, .12); }
  .foot-email { display: flex; align-items: center; gap: 12px; margin-top: clamp(16px, 2.4vh, 30px); }
  .foot-email svg { flex: 0 0 auto; width: clamp(18px, 1.5vw, 26px); color: var(--action); }
  /* "Email" label hidden from the page but kept for screen readers — see the
     matching note in blueprint-shared.css */
  .foot-email dt {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .foot-email dd {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(15px, 1.22vw, 23px); color: var(--cream);
  }
  .foot-email a:hover { color: var(--action); }
  .foot-creed {
    margin-top: clamp(14px, 2.2vh, 28px); padding-top: clamp(14px, 2.2vh, 28px);
    border-top: 1px solid var(--accent-line); text-align: center;
  }
  .foot-creed i { /* the sparkle above the creed */
    display: block; width: 15px; height: 22px; margin: 0 auto clamp(8px, 1.2vh, 16px);
    background: var(--accent);
    clip-path: polygon(50% 0, 57% 42%, 100% 50%, 57% 58%, 50% 100%, 43% 58%, 0 50%, 43% 42%);
  }
  .foot-creed p {
    font-size: clamp(10px, .92vw, 17px); letter-spacing: .26em; line-height: 1.9;
    text-transform: uppercase; color: var(--accent);
  }

  /* ---- bottom bar ---- */
  .foot-base {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: clamp(14px, 1.8vw, 34px);
    padding-top: clamp(16px, 2.4vh, 30px); padding-bottom: 24px; border-top: 1px solid var(--accent-line);
    font-size: clamp(9px, .88vw, 16px); letter-spacing: .2em; text-transform: uppercase; color: var(--cream);
  }
  .foot-base i { position: relative; flex: 1 1 auto; height: 1px; background: var(--accent-line); }
  .foot-base i::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -6px 0 0 -5px;
    border: 1px solid var(--accent); background: #0a191d; transform: rotate(45deg);
  }
  .foot-seal { flex: 0 0 auto; width: clamp(44px, 4.4vw, 76px); color: var(--accent); }
  .foot-seal svg { display: block; width: 100%; height: auto; }

  /* ---------- Responsive ---------- */
  @media (max-width: 1180px) {
    .nav-links, .nav-links li { gap: 22px; }
    .quote-col { margin-left: 56px; padding-left: 36px; }
  }
  @media (max-width: 1024px) {
    .no-webgl .stage { background-size: auto 62vh; background-position: right top; }
    .stage::before { background: linear-gradient(180deg, rgba(29,27,25,0) 30vh, var(--bg) 62vh); }
    .nav-links { display: none; }
    /* Stacked layout geometry: card sits a clear gap below the nav bar; arrows + headline follow it */
    .stage { --card-top: calc(1.8vh + 78px + 36px); --card-h: 50vh; --text-top: calc(var(--card-top) + var(--card-h) + 0.5vh); }
    /* Logo mark sits exactly 32px inside the nav border (the PNG has 9/60 of its height as empty space on the left) */
    .nav { padding-left: 32px; }
    .brand img { height: 42px; margin-left: calc(42px * -0.15); }
    .hero-card-anchor { left: 50%; top: var(--card-top); bottom: auto; height: var(--card-h); }
    /* Tablets: lighter backing so the wet floor and droplets show behind the headline */
    .hero::before { background: linear-gradient(180deg, rgba(27,27,27,0), rgba(27,27,27,.32) 80px, rgba(27,27,27,.45) calc(100% - 40px), rgba(27,27,27,0)); }
    .hero h1, .serif-line, .mono-line, .eyebrow { text-shadow: 0 2px 18px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5); }
    /* Phones/tablets: no thumbnail row — arrows beside the big card instead */
    .deck { display: none; }
    .hero-arrows {
      position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--card-top) + var(--card-h) / 2); transform: translateY(-50%);
      display: flex; justify-content: space-between; padding: 0 3vw; pointer-events: none;
    }
    .hero-arrows button {
      pointer-events: auto; width: 48px; height: 72px; display: grid; place-items: center;
      background: none; border: 0; color: var(--accent); cursor: pointer; transition: color .3s;
    }
    .hero-arrows button:hover, .hero-arrows button:focus-visible { color: var(--action); }
    .hero-arrows svg { width: 22px; height: 44px; }
    .hero::before { /* dark backing so the headline stays readable over the 3D floor */
      content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(var(--text-top) - 40px); bottom: -30px;
      background: linear-gradient(180deg, rgba(27,27,27,0), rgba(27,27,27,.92) 60px, rgba(27,27,27,.92) calc(100% - 40px), rgba(27,27,27,0));
    }
    .nav { background: rgba(20, 20, 20, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    .hero { width: auto; padding: var(--text-top) 6vw 10vh; }
    .deck { padding-left: 6vw; overflow-x: auto; }
    .msg-copy { width: auto; padding: 46vh 6vw 80px; }
    .messaging::before { background: linear-gradient(180deg, rgba(5,19,22,.9) 0%, rgba(5,19,22,0) 12%, rgba(5,19,22,0) 36%, rgba(3,14,16,.86) 52%, rgba(3,14,16,.86) 100%); }
    .rays { left: 30%; width: 60%; }
    .struggle-grid { grid-template-columns: 1fr; gap: 40px; min-height: 0; }
    .struggle { min-height: 0; }
    /* Stacked: the panels form one tall column, so a single full-section background would zoom
       hugely. Each panel's window gets its own card crop instead. */
    .struggles::after { display: none; }   /* stacked: each panel carries its own crop instead */
    .struggle-art { height: auto; aspect-ratio: 4 / 3; background: no-repeat center / cover; }
    .struggle:nth-child(1) .struggle-art { background-image: url("assets/water/tangle-01.webp"); }
    .struggle:nth-child(2) .struggle-art { background-image: url("assets/water/tangle-02.webp"); }
    .struggle:nth-child(3) .struggle-art { background-image: url("assets/water/tangle-03.webp"); }
    .struggle-copy { padding: 0 24px 32px; }
  }
  /* Tablet: headline left, portrait right, sharing one hero band. The black stays as breathing room. */
  @media (min-width: 641px) and (max-width: 1024px) {
    .stage {
      --card-top: calc(1.8vh + 78px + 36px);
      --card-h: min(50vh, 50vw);
      --card-w: calc(var(--card-h) * 0.679);
      --card-cx: calc(100% - 6vw - 52px - var(--card-w) / 2);
      min-height: 100vh; min-height: 100svh; padding-bottom: 0;
    }
    .hero-card-anchor { left: var(--card-cx); top: var(--card-top); bottom: auto; height: var(--card-h); }
    .hero-arrows { left: calc(var(--card-cx) - var(--card-w) / 2 - 56px); right: auto; width: calc(var(--card-w) + 112px); padding: 0; top: calc(var(--card-top) + var(--card-h) / 2); }
    .hero { width: calc(var(--card-cx) - var(--card-w) / 2 - 60px); padding: var(--card-top) 0 0 6vw; min-height: calc(var(--card-top) + var(--card-h)); display: flex; flex-direction: column; justify-content: center; }
    .hero::before { display: none; }
    .hero h1 { font-size: clamp(36px, 5.3vw, 64px); }
    .serif-line { font-size: clamp(22px, 3.2vw, 38px); }
    .mono-line { font-size: clamp(13px, 1.6vw, 16px); }
    /* the stacked tangle panels get wider side margins on tablet so the lines do not run edge to edge */
    .struggle-copy { padding: 0 80px 32px; }
    /* stacked full width, the headings fit on one line: drop the drawn-in break */
    .struggle h3 br { display: none; }
  }
  @media (max-width: 640px) {
    .nav { height: 64px; left: 10px; right: 10px; padding: 0 8px 0 12px; }
    .nav-end::before { display: none; }
    .nav .bp-cta { padding: 10px 12px; font-size: 11px; letter-spacing: .04em; gap: 0; white-space: nowrap; }
    .nav .bp-cta svg { display: none; }   /* no room for the arrow beside the logo on a phone */
    .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: 24px; }
    .spec { grid-template-columns: 1fr; }
    .quote-col { margin: 36px 0 0; border-left: 0; padding: 0; min-height: 0; }
    .messaging h2 span { display: inline; }
    .stage { --card-top: 13vh; --card-h: 42vh; --text-top: 56vh; } /* phones keep their original card position */
    .nav { padding-left: 16px; }
    .brand img { margin-left: calc(24px * -0.15); }
    .hero::before { background: linear-gradient(180deg, rgba(27,27,27,0), rgba(27,27,27,.92) 60px, rgba(27,27,27,.92) calc(100% - 40px), rgba(27,27,27,0)); }
    .accent-line { letter-spacing: .3em; }
    .deck-arrow { display: none; }
    .cards { gap: 22px; }
  }

  /* Section 04 stacks: compass below the copy, captions become a row under it */
  @media (max-width: 1024px) {
    .reframe { padding: calc(1.8vh + 78px + 5vh) 6vw 9vh; align-items: flex-start; min-height: 0; }
    .reframe-inner { grid-template-columns: 1fr; gap: 7vh; }
    .reframe-copy { padding-left: 0; }
    .reframe h2 { font-size: clamp(32px, 6.6vw, 60px); }
    .reframe-body { max-width: none; font-size: clamp(17px, 2.5vw, 26px); }
    /* hidden once the section stacks: the gap between the body and the note
       already separates them, so the divider is redundant at this width */
    .reframe .rule { display: none; }
    .reframe-headline { padding-left: 26px; }
    .reframe-body, .reframe .rule, .reframe-note { margin-left: 26px; }
    .reframe-art img.compass { max-width: min(78vw, 520px); }
    .compass-label { position: static; text-align: center; }
    .compass-label::after { margin: 12px auto 0; }
    .reframe-art { gap: 26px; }
    .reframe-burst.tr { display: none; }
    .reframe-burst.bl { width: 46vw; opacity: .5; }
  }
  /* Section 05 stacks: copy first, then the steps two-up, then one-up on phones */
  @media (max-width: 1024px) {
    .shore { padding: calc(1.8vh + 78px + 4vh) 6vw 8vh; min-height: 0; }
    .shore-copy { padding: 0 26px 26px; max-width: none; }
    .shore h2 { font-size: clamp(30px, 6.2vw, 56px); }
    .shore-quote { font-size: clamp(19px, 3.2vw, 32px); max-width: none; }
    .shore-lede { font-size: clamp(15px, 2.2vw, 22px); max-width: none; }
    /* fixed attachment is unreliable on touch browsers: plain scroll photo, flat dark cards */
    .shore::before { background-attachment: scroll; }
    .step-inner { background: rgba(7, 12, 14, .86); }
    .steps { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; padding-top: 7vh; }
    .step h3 { font-size: clamp(19px, 3vw, 28px); }
    .step h3 span { display: inline; }
    .step p { font-size: clamp(15px, 2vw, 20px); }
    .shore-burst { width: 22vw; }
  }
  /* Section 07 stacks: featured quote, then the short ones */
  @media (max-width: 1024px) {
    .reflections { padding: calc(1.8vh + 78px + 3vh) 6vw 5vh; min-height: 0; }
    .reflections::before { background-attachment: scroll; }   /* fixed is unreliable on touch */
    .rf-arc, .rf-side { display: none; }
    .rf-head { max-width: none; }
    .reflections h2 { font-size: clamp(30px, 6.2vw, 54px); }
    .rf-lede { font-size: clamp(17px, 2.6vw, 26px); max-width: none; }
    .rf-grid { grid-template-columns: 1fr; gap: 6vh; padding-top: 6vh; }
    .rf-split { display: none; }
    .rf-feature blockquote { font-size: clamp(19px, 3.4vw, 32px); max-width: none; }
    .rf-emblem { width: 52vw; right: -12%; top: auto; bottom: -6%; opacity: .5; }
    .rf-list blockquote { font-size: clamp(16px, 2.2vw, 22px); }
    .rf-foot { flex-wrap: wrap; row-gap: 10px; }
    .rf-foot i { min-width: 40px; }
  }
  /* Footer: four columns to two, then one */
  @media (max-width: 1024px) {
    .site-foot { padding: 7vh 6vw 5vh; }
    .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) {
    .site-foot { padding: 6vh 7vw 4vh; }
    .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; }
  }

  /* Section 11: the closing plate keeps its centred stack, just tighter */
  @media (max-width: 1024px) {
    .finale { padding: calc(1.8vh + 78px + 4vh) 6vw 9vh; min-height: 0; }
    .finale h2 { font-size: clamp(34px, 8.6vw, 72px); }
    .fin-body { font-size: clamp(16px, 2.6vw, 26px); max-width: none; }
    .fin-body br { display: none; }
    .fin-crest { width: 92vw; }
    .fin-burst { width: 44vw; opacity: .3; }
    .fin-rule { max-width: 60px; }
  }
  @media (max-width: 640px) {
    .finale { padding: calc(1.8vh + 64px + 3vh) 7vw 8vh; }
    .fin-action { flex-direction: column; gap: 20px; }
    .fin-rule { width: 70px; max-width: none; flex: 0 0 auto; }
    .finale .bp-cta { width: 100%; justify-content: center; }
  }

  /* Section 10 stacks: copy above, accordion below */
  @media (max-width: 1024px) {
    .faq { padding: calc(1.8vh + 78px + 4vh) 6vw 8vh; }
    .faq-grid { grid-template-columns: 1fr; gap: 5vh; }
    .faq h2 { font-size: clamp(36px, 8vw, 68px); }
    .faq-lede { font-size: clamp(17px, 2.8vw, 26px); }
    .faq-compass { width: min(46vw, 320px); margin-left: auto; margin-right: auto; }
    .faq-tag { margin: 10px 0 0; text-align: center; }
    .faq-qt { font-size: clamp(12px, 2.2vw, 18px); }
    .faq-a p { font-size: clamp(15px, 2.2vw, 21px); }
  }
  @media (max-width: 640px) {
    .faq { padding: calc(1.8vh + 64px + 3vh) 7vw 7vh; }
    .faq-q { gap: 14px; padding-left: 4px; padding-right: 4px; }
    .faq-badge { width: 32px; font-size: 11px; }
    .faq-foot i { display: none; }
  }

  /* Section 09 stacks: the sand photo drops behind a darker wash, list goes full width */
  @media (max-width: 1024px) {
    .fit { padding: calc(1.8vh + 78px + 4vh) 6vw 8vh; min-height: 0; }
    .fit::before { background-position: 72% center; }
    .fit::after {
      background: linear-gradient(180deg, rgba(6,5,5,.9) 0%, rgba(6,5,5,.82) 40%, rgba(6,5,5,.88) 100%);
    }
    .fit-rail { display: none; }
    .fit-head, .fit-divide, .fit-list { max-width: none; }
    .fit h2 { font-size: clamp(30px, 6.4vw, 56px); }
    .fit-sub { font-size: clamp(18px, 3.2vw, 30px); padding: 0 24px; }
    .fit-kicker { padding-left: 24px; }
    .fit-list li { grid-template-columns: clamp(30px, 6vw, 52px) 1px 1fr; gap: 16px; }
    .fit-list h3 { font-size: clamp(16px, 2.9vw, 24px); }
    .fit-list p { font-size: clamp(15px, 2.2vw, 21px); max-width: none; }
  }
  @media (max-width: 640px) {
    .fit { padding: calc(1.8vh + 64px + 3vh) 7vw 7vh; }
    .fit-title { padding-left: 30px; }
    .fit-title::before { left: 10px; }
    .fit-title .idx { display: none; }
    .fit-list li { grid-template-columns: 26px 1px 1fr; gap: 12px; }
  }

  /* Section 08 stacks: copy above, portrait below */
  @media (max-width: 1024px) {
    .about { padding: calc(1.8vh + 78px + 4vh) 6vw 8vh; }
    .ab-grid { grid-template-columns: 1fr; gap: 6vh; }
    .about h2 { font-size: clamp(42px, 8.4vw, 76px); }
    .ab-lede, .ab-body, .ab-claim { max-width: none; }
    .ab-lede, .ab-body { font-size: clamp(16px, 2.4vw, 24px); }
    .ab-lede br { display: none; }
    .ab-rule { max-width: none; }
    .ab-claim { font-size: clamp(18px, 2.6vw, 26px); }
    .ab-arcs, .ab-star { display: none; }
    .ab-portrait { padding: 0; max-width: 560px; }
    .ab-rail { display: none; }
    .ab-sun { width: 40vw; opacity: .28; }
  }
  @media (max-width: 640px) {
    .about { padding: calc(1.8vh + 64px + 3vh) 7vw 7vh; }
    .ab-foot { flex-direction: column; align-items: flex-start; gap: 22px; }
    .about .bp-cta { width: 100%; justify-content: center; }
    .ab-note { padding-left: 0; border-left: 0; }
    .ab-portrait figcaption i { display: none; }
  }
  @media (max-width: 640px) {
    .reflections { padding: calc(1.8vh + 64px + 2vh) 7vw 5vh; }
    .rf-foot i { display: none; }
    .rf-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  }

  /* Section 06 stacks: copy above, offer card below */
  @media (max-width: 1024px) {
    .blueprint { padding: calc(1.8vh + 78px + 4vh) 6vw 8vh; min-height: 0; align-items: flex-start; }
    .bp-grid { grid-template-columns: 1fr; gap: 6vh; }
    .bp-copy { padding: 0 24px; }
    .blueprint h2 { font-size: clamp(32px, 6.4vw, 58px); }
    .bp-sub { font-size: clamp(20px, 3.4vw, 34px); max-width: none; }
    .bp-body { font-size: clamp(15px, 2.1vw, 22px); max-width: none; }
    .bp-burst { left: auto; right: -6vw; bottom: 2vw; width: 46vw; opacity: .35; }
    .bp-card h3 { font-size: clamp(19px, 3.4vw, 30px); }
    .bp-list h4 { font-size: clamp(13px, 2vw, 18px); }
    .bp-list p { font-size: clamp(14px, 2vw, 19px); }
    .bp-price { font-size: clamp(42px, 8vw, 70px); }
  }
  @media (max-width: 640px) {
    .blueprint { padding: calc(1.8vh + 64px + 3vh) 7vw 7vh; }
    .bp-cta { width: 100%; justify-content: center; }
    .bp-card { padding: 30px 18px 28px; }
    .bp-list li { gap: 14px; }
    .shore { padding: calc(1.8vh + 64px + 3vh) 7vw 7vh; }
    .steps { grid-template-columns: 1fr; gap: 40px; }
    .shore-burst.tr { display: none; }
    .reframe { padding: calc(1.8vh + 64px + 4vh) 7vw 8vh; }
    .deco-frame { inset: 3vw; }
    .deco-frame::before { inset: 3vw; }
    .deco-frame u { width: 8vw; height: 8vw; }
    .deco-eyebrow { gap: 14px; letter-spacing: .26em; }
    .reframe-note { gap: 16px; letter-spacing: .2em; }
    .reframe-art { grid-template-columns: 1fr; }
    .compass-label { letter-spacing: .2em; }
  }

  /* Phone conversion pass: keep the engraved identity, but let the buying path
     breathe. Decorative rails and repeated ornaments recede on the small canvas. */
  @media (max-width: 640px) {
    .deco-frame {
      border-color: rgba(201, 144, 95, .46);
    }
    .deco-frame i,
    .deco-frame u,
    .bp-burst,
    .shore-burst,
    .reframe-burst,
    .rf-emblem,
    .ab-sun,
    .faq-burst,
    .fin-burst,
    .fin-arcs,
    .fin-coda,
    .faq-compass,
    .faq-tag {
      display: none;
    }
    .messaging,
    .struggles,
    .reframe,
    .shore,
    .blueprint,
    .reflections,
    .about,
    .fit,
    .faq,
    .finale {
      padding-left: 7vw;
      padding-right: 7vw;
    }
    .msg-copy,
    .shore-copy,
    .bp-copy,
    .faq-copy {
      padding-left: 0;
      padding-right: 0;
    }
    .struggle-grid,
    .steps,
    .rf-grid,
    .fit-list,
    .faq-grid,
    .bp-grid,
    .ab-grid {
      gap: 32px;
    }
    .struggle,
    .step-inner,
    .bp-card,
    .faq-panel {
      background-color: rgba(12, 17, 17, .72);
      border-color: rgba(201, 144, 95, .45);
    }
    .struggle::before,
    .faq-panel::after,
    .faq-item.is-open::before,
    .faq-item.is-open::after {
      opacity: .55;
    }
    .struggle-art {
      aspect-ratio: 5 / 3;
      opacity: .74;
    }
    .struggle-copy {
      padding: 0 18px 26px;
    }
    .fit-list li {
      grid-template-columns: 1fr;
      gap: 8px;
      padding: 22px 0;
    }
    .fit-num,
    .fit-list li > .fit-rule,
    .fit-list li + li::after {
      display: none;
    }
    .fit-list li + li::before {
      left: 0;
      right: 0;
      opacity: .55;
    }
    .faq-rule,
    .fit-divide,
    .ab-rule {
      opacity: .55;
    }
    .faq-panel {
      padding: 2px;
    }
    .faq-q {
      min-height: 56px;
    }
    .finale .deco-frame {
      display: none;
    }
    .finale {
      background: #15110e;
    }
  }

  /* ============================================================
     Hero — Homepage_Hero_Beach_Tarot render (2026-10-05)
     Replaces the 3D card deck. Cold branch (the imagery is a night
     shore), copper metal. Photo generated from the render, not cropped:
     assets/home/hero-beach-tarot.webp. The three cards sit in the right
     ~57% of the image; the left is deep shadow for the copy.
     The old .stage / .hero / .deck / #scene rules above are now unused
     and can go in the next cleanup pass.
     ============================================================ */
  .hh-top { position: relative; }
  .hh {
    --surface: #060b0d;
    position: relative; isolation: isolate; overflow: hidden;
    min-height: max(100vh, 820px);
    display: flex; align-items: center;
    padding: calc(1.8vh + 78px + 4vh) 3.1vw 7vh;
    background: var(--surface);
  }
  /* Overhangs so the parallax never shows an edge; hero-parallax.js writes --hh-drift */
  .hh::before {
    content: ""; position: absolute; inset: -10% 0; z-index: -2; pointer-events: none;
    background: var(--surface) url("assets/home/hero-beach-tarot.webp") no-repeat right center / cover;
    transform: translate3d(0, var(--hh-drift, 0px), 0);
    will-change: transform;
  }
  .hh::after { /* legibility wash: a directional gradient, never a panel */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(6, 11, 13, .9) 0%, rgba(6, 11, 13, .72) 28%, rgba(6, 11, 13, .2) 46%, rgba(6, 11, 13, 0) 60%),
      linear-gradient(180deg, rgba(6, 11, 13, .78) 0%, rgba(6, 11, 13, 0) 22%, rgba(6, 11, 13, 0) 74%, rgba(6, 11, 13, .8) 100%);
  }
  .hh > .deco-frame { z-index: 1; }
  .hh > .deco-frame i { background: var(--surface); }   /* Diamond Pin Rule */

  .hh-copy {
    position: relative; z-index: 2;
    width: min(42vw, 800px);
    padding: 0 clamp(16px, 2.4vw, 54px);
  }
  .hh .deco-eyebrow span { max-width: 25em; line-height: 1.7; }

  .hh-title {
    font-family: var(--display); font-weight: 900;
    font-size: clamp(36px, 4.3vw, 82px);
    line-height: .94; letter-spacing: -.042em; word-spacing: .05em;
    color: var(--ink);
  }
  .hh-title span { display: block; }
  .hh-b { margin-top: .3em; }

  .hh-line {
    margin-top: clamp(14px, 2vh, 26px);
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(20px, 2.3vw, 42px); line-height: 1.3; letter-spacing: -.01em;
    color: #f4ece0;
  }

  /* Rotating service word — hero-rotator.js cycles Strategy / Brand Identity /
     Websites / AI Systems through this slot, animating per character. No frame
     and no fill: the word sits in the line like any other, and the slot's width
     transition is what makes the rest of the sentence slide rather than jump.
     It clips top and bottom only (clip-path, not overflow, which would break the
     inline-block baseline) so characters vanish at the line's edge instead of
     drifting over the headline above. Vertical padding gives ascenders and
     descenders room inside that clip. */
  .hh-rot {
    position: relative; display: inline-block; white-space: nowrap;
    padding: .14em 0;
    clip-path: inset(0 -2px);
    transition: width 520ms cubic-bezier(.23, 1, .32, 1);
  }
  .hh-rot-w { display: inline-block; white-space: nowrap; }
  .hh-rot-w.out { position: absolute; left: 0; top: .14em; }
  .hh-rot-m {                       /* off-screen ruler: measures the next word */
    position: absolute; left: 0; top: 0; visibility: hidden;
    pointer-events: none; white-space: nowrap;
  }
  .hh-rot i {
    display: inline-block; font-style: normal;
    transition: transform 520ms cubic-bezier(.23, 1, .32, 1),
                opacity   520ms cubic-bezier(.23, 1, .32, 1);
  }
  .hh-rot i.enter { transform: translateY(115%);  opacity: 0; }
  .hh-rot i.exit  { transform: translateY(-125%); opacity: 0; }

  /* Reduced motion: the word still changes, but by cross-fade only — no travel. */
  @media (prefers-reduced-motion: reduce) {
    .hh-rot i { transition: opacity 400ms linear; }
    .hh-rot i.enter, .hh-rot i.exit { transform: none; }
  }

  /* rule with end ticks and a pinned diamond at its centre */
  .hh-rule {
    position: relative; height: 1px; width: min(100%, 26em);
    margin: clamp(22px, 3.4vh, 44px) 0 clamp(18px, 2.6vh, 32px);
    background: var(--accent-line);
  }
  .hh-rule::before, .hh-rule::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--accent-line); }
  .hh-rule::before { left: 0; } .hh-rule::after { right: 0; }
  .hh-rule i {
    position: absolute; left: 50%; top: 50%; width: 13px; height: 13px;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 1px solid var(--accent); background: var(--surface);
  }
  .hh-rule i::after { content: ""; position: absolute; inset: 3px; background: var(--accent); }

  /* the hero's single action: Tiffany plate */
  .hh .bp-cta { margin-top: 0; color: var(--ink); border-color: var(--action); }
  .hh .bp-cta::before, .hh .bp-cta::after,
  .hh .bp-cta i::before, .hh .bp-cta i::after { border-color: var(--action); }
  .hh .bp-cta:hover, .hh .bp-cta:focus-visible { background: rgba(134, 209, 205, .12); }
  .hh .bp-cta:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }

  /* Tablet: keep copy left, cards right. The photo is height-fitted here, so the
     first card (Alignment) slides under the copy column; the wash takes it back
     into shadow so Expansion and Resonance carry the right half. */
  @media (min-width: 761px) and (max-width: 1280px) {
    /* match the section to the photo's 2048x1440 shape so cover shows it whole
       and the cards stay in the right half (no parallax overhang here) */
    .hh { min-height: 70.3vw; padding-bottom: 4vh; }
    .hh::before { inset: 0; transform: none; }
    .hh-copy { width: 44vw; }
    .hh-title { font-size: clamp(32px, 4.5vw, 58px); }
    .hh-line { font-size: clamp(18px, 2.2vw, 30px); }
    .hh::after {
      background:
        linear-gradient(90deg, rgba(6, 11, 13, .94) 0%, rgba(6, 11, 13, .88) 36%, rgba(6, 11, 13, .55) 47%, rgba(6, 11, 13, 0) 60%),
        linear-gradient(180deg, rgba(6, 11, 13, .78) 0%, rgba(6, 11, 13, 0) 22%, rgba(6, 11, 13, 0) 74%, rgba(6, 11, 13, .8) 100%);
    }
  }

  /* Phones: no room beside the copy, so stack — copy over the dark sky, the
     cards anchored to the foot of the section beneath the CTA. */
  @media (max-width: 760px) {
    .hh { min-height: 0; align-items: flex-start; padding: calc(1.8vh + 78px + 4vh) 6vw 104vw; }
    .hh::before { inset: 0; transform: none; background-size: 175% auto; background-position: 100% 100%; }
    .hh-copy { width: 100%; padding: 0; }
    .hh-title { font-size: clamp(34px, 9vw, 56px); }
    .hh::after {
      background: linear-gradient(180deg,
        rgba(6, 11, 13, 1) 0%, rgba(6, 11, 13, .95) calc(100% - 124vw),
        rgba(6, 11, 13, .3) calc(100% - 94vw), rgba(6, 11, 13, 0) calc(100% - 80vw),
        rgba(6, 11, 13, .45) 100%);
    }
    .hh .bp-cta { width: 100%; justify-content: center; }
  }
  @media (max-width: 640px) {
    .hh { padding-top: calc(1.8vh + 64px + 4vh); }   /* the nav is 64px tall here */
  }
  @media (prefers-reduced-motion: reduce) { .hh::before { transform: none; } }