/* Corner Lot Studio — BOLD option.
   Same brand (Hedge / Daylight / Butter / Satoshi), pushed hard: full-bleed
   dark slabs, oversized display type, and a hover-reveal work index
   (the Relume Portfolio-20 mechanic, rebuilt in vanilla).
   Loads on top of site.css purely for the tokens, @font-face and reset. */

body.bx {
  background: var(--daylight);
  color: var(--ink);
  overflow-x: hidden;
}
.bx * { box-sizing: border-box; }

/* option switcher */
.bx-switch {
  position: fixed; bottom: 18px; left: 18px; z-index: 100;
  background: var(--butter); color: var(--ink);
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 11px 16px; text-decoration: none; border-radius: 999px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.45);
}
.bx-switch:hover { background: var(--daylight); }

/* ---------- header (sits on the dark hero) ---------- */
.bx-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px clamp(20px, 4vw, 56px);
  color: var(--daylight);
}
.bx-lockup { display: flex; align-items: center; gap: 10px; color: var(--daylight); text-decoration: none; }
.bx-lockup svg { width: 22px; height: 22px; }
.bx-lockup span { font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px; }
.bx-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); }
.bx-nav a {
  color: rgba(251, 250, 246, 0.72); text-decoration: none;
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}
.bx-nav a:hover { color: var(--daylight); }
/* the nav link rule above outranks .bx-btn, which left the Order button as
   near-white text on a near-white fill (invisible). Restore the button colours. */
.bx-nav a.bx-btn { color: var(--ink); }
.bx-nav a.bx-btn:hover { color: var(--ink); }

/* ---------- buttons ---------- */
.bx-btn {
  display: inline-block; text-decoration: none;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 15px 26px; border: 1px solid currentColor;
  background: var(--daylight); color: var(--ink); border-color: var(--daylight);
  transition: transform .25s var(--ease-out), background .25s var(--ease-out);
}
.bx-btn:hover { transform: translateY(-2px); }
.bx-btn--butter { background: var(--butter); border-color: var(--butter); color: var(--ink); }
.bx-btn--ghost { background: transparent; color: var(--daylight); border-color: rgba(251,250,246,.4); }
.bx-btn--ghost:hover { border-color: var(--daylight); }
.bx-nav .bx-btn { padding: 11px 18px; }

/* ---------- display type ---------- */
.bx-display {
  margin: 0;
  font-size: clamp(2.6rem, 8.4vw, 8.4rem);
  font-weight: 700; line-height: 0.92; letter-spacing: -0.02em;
  text-transform: uppercase;
}
.bx-display span { display: block; }
.bx-display--sm { font-size: clamp(2.2rem, 6vw, 5.5rem); }
.bx-accent { color: var(--butter); }

.bx-statement {
  margin: 0;
  font-size: clamp(1.9rem, 4.6vw, 4.4rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -0.02em;
  text-wrap: balance;
}
.bx-statement--light { color: var(--daylight); }

.bx-eyebrow {
  margin: 0; font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--hedge);
}
.bx-eyebrow--butter { color: var(--butter); }
.bx-kicker {
  margin: 0 0 clamp(24px, 4vw, 48px);
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--butter);
}

/* ---------- HERO — full-bleed night ---------- */
.bx-hero {
  position: relative; background: var(--night, #1d211e); color: var(--daylight);
  min-height: 100vh; display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end; gap: clamp(24px, 4vw, 72px);
  padding: clamp(120px, 16vh, 200px) clamp(20px, 4vw, 56px) clamp(40px, 6vw, 72px);
}
.bx-hero-foot {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: clamp(20px, 3vw, 48px); margin-top: clamp(28px, 4vw, 56px);
}
.bx-hero-copy { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); max-width: 46ch; }
.bx-hero-foot p {
  margin: 0; max-width: 46ch; font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.5; color: rgba(251, 250, 246, 0.72);
}
.bx-hero-foot p b { color: var(--daylight); }
.bx-hero-sub {
  font-size: clamp(0.9rem, 1vw, 1rem); line-height: 1.55;
  color: rgba(251, 250, 246, 0.88);
  padding-top: clamp(12px, 1.4vw, 18px);
  border-top: 1px solid rgba(251, 250, 246, 0.16);
}
.bx-hero-foot .bx-hero-sub b { color: var(--butter); font-weight: 500; }
.bx-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.bx-hero-reel { justify-self: end; width: 100%; }
.bx-hero-reel video, .bx-hero-reel img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7);
}
.bx-reel-tag {
  display: block; margin-top: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(251, 250, 246, 0.6);
}

/* ---------- MARQUEE — butter slab ---------- */
.bx-marquee {
  background: var(--butter); color: var(--ink);
  overflow: hidden; white-space: nowrap; padding: 16px 0; user-select: none;
}
.bx-track { display: inline-flex; animation: bx-scroll 32s linear infinite; will-change: transform; }
/* No padding: each copy already ends with its own "·" separator, so padding
   here would only ever widen the one gap where the two copies meet. */
.bx-track span {
  font-size: clamp(1rem, 1.8vw, 1.6rem); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
}
@keyframes bx-scroll { to { transform: translateX(-50%); } }

/* ---------- THE IDEA / STUDIO ---------- */
.bx-idea, .bx-studio { padding: clamp(72px, 11vw, 160px) clamp(20px, 4vw, 56px); }
.bx-studio { background: var(--sage, #c9d4c2); }
.bx-idea .bx-statement, .bx-studio .bx-statement { margin: 16px 0 clamp(32px, 5vw, 64px); }
.bx-idea-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 72px); max-width: 1100px;
}
.bx-idea-cols p { margin: 0; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6; color: rgba(29,33,30,.72); }
.bx-idea-cols p b { color: var(--ink); }

/* the three beats of the job: win it, launch it, close it */
.bx-principles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(48px, 7vw, 96px);
}
.bx-principle { border-top: 1px solid rgba(29,33,30,.22); padding-top: 18px; }
.bx-p-n {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--hedge);
}
.bx-principle h3 {
  margin: 14px 0 8px; font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
}
.bx-principle p { margin: 0; font-size: .98rem; line-height: 1.55; color: rgba(29,33,30,.66); }

/* ---------- THE PROMISE — the point of view, stated ----------
   Never names the method (see brand/voice.md); the differentiator is a promise
   about the work. Bold option carries it on a butter slab. */
.bx-promise {
  background: var(--butter); color: var(--ink);
  padding: clamp(64px, 10vw, 140px) clamp(20px, 4vw, 56px);
}
/* the vow — the memorable line, at display scale, two-tone on the turn */
.bx-promise-vow {
  margin: clamp(20px, 3vw, 40px) 0 clamp(40px, 6vw, 80px);
  font-size: clamp(2.4rem, 6.6vw, 6rem);
  font-weight: 700; line-height: 0.98; letter-spacing: -0.03em;
  max-width: 16ch; text-wrap: balance;
}
.bx-vow-turn { color: var(--hedge); }

.bx-promise-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 72px); max-width: 1000px;
  border-top: 1px solid rgba(29, 33, 30, 0.18); padding-top: clamp(24px, 3vw, 40px);
}
.bx-promise-body p {
  margin: 0; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.6;
  color: rgba(29, 33, 30, 0.66);
}

/* ---------- THE INDEX — hover to reveal ---------- */
.bx-index-sec {
  position: relative; padding: clamp(56px, 8vw, 120px) clamp(20px, 4vw, 56px) clamp(72px, 10vw, 140px);
}
.bx-index-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid rgba(29,33,30,.18); padding-bottom: 14px; margin-bottom: clamp(8px, 2vw, 24px);
}
.bx-hint { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(29,33,30,.4); }

.bx-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(16px, 3vw, 44px);
  padding: clamp(16px, 2.4vw, 30px) 0;
  border-bottom: 1px solid rgba(29,33,30,.18);
  text-decoration: none; color: var(--ink);
  transition: opacity .35s var(--ease-out), padding-left .35s var(--ease-out);
}
.bx-num {
  font-size: clamp(.8rem, 1vw, 1rem); font-weight: 700;
  letter-spacing: 0.1em; color: var(--hedge);
}
.bx-name {
  font-size: clamp(1.9rem, 5.4vw, 5rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
}
.bx-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hedge); border: 1px solid rgba(41,72,58,.3); padding: 6px 10px; white-space: nowrap;
}
/* the mechanic: hovering one row fades the rest back */
.bx-index.is-hover .bx-row { opacity: .16; }
.bx-index.is-hover .bx-row.is-active { opacity: 1; padding-left: clamp(8px, 1.5vw, 24px); }

/* cursor-following preview — big enough to actually read the piece */
.bx-float {
  position: fixed; top: 0; left: 0; z-index: 5;
  width: clamp(420px, 38vw, 680px);
  pointer-events: none; opacity: 0;
  transition: opacity .3s var(--ease-out);
  will-change: transform;
}
.bx-float.on { opacity: 1; }
.bx-float img {
  width: 100%; height: auto; display: block;
  max-height: 78vh; object-fit: contain;
  box-shadow: 0 60px 110px -40px rgba(0, 0, 0, .55);
}
@media (hover: none), (max-width: 900px) { .bx-float { display: none; } }

/* ---------- lightbox: the real paged piece ---------- */
.bx-lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16, 19, 17, 0.94);
  display: none; place-items: center;
  padding: clamp(56px, 8vh, 96px) clamp(16px, 5vw, 80px);
}
.bx-lb.open { display: grid; }
.bx-lb-inner { display: grid; gap: 20px; justify-items: center; width: 100%; }

.bx-lb-stage {
  position: relative; width: 100%; max-width: min(92vw, 1100px);
  height: min(70vh, 780px);
}
.bx-lb-sheet {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .45s var(--ease-in-out);
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.bx-lb-sheet.is-current { opacity: 1; }
/* Item 5d — virtual-staging disclosure label. The frame shrinks to the painted
   image so the label sits on the photo (not the letterbox); the .jpg is untouched,
   so §4 and the watermark pipeline are unaffected. */
.bx-stage-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  max-width: 100%; max-height: 100%;
}
.bx-lb-sheet .bx-stage-frame img {
  width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: fill;
}
.bx-stage-label {
  position: absolute; left: 14px; bottom: 14px; z-index: 4;
  background: rgba(29, 33, 30, 0.82); color: var(--daylight);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 4px; pointer-events: none;
}
.bx-lb-sheet img, .bx-lb-sheet video {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* the brochure's print sheet is two 8.5×11 panels side by side — scale it to 2×
   the panel width and slide to the half we want, so one panel fills the frame */
.bx-panel {
  height: 100%; aspect-ratio: 700 / 906; margin: 0 auto;
  background-size: 200% 100%; background-repeat: no-repeat;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6);
}

/* ---------- paper: the page turn ----------
   The brochure and the CMA are printed things, so they turn instead of dissolving.
   The turn is a one-shot keyframe rather than a transition, which is what keeps it
   honest: the sheet pivots on its spine, and its opacity drops at exactly the
   halfway mark — the moment it's edge-on to the viewer and the swap can't be seen.
   Nothing is restacked while anything is moving. (The earlier 3D attempt juggled
   z-index mid-transition and the pages hopped.) */
/* The stage has to shrink-wrap the page, not the viewport: the sheet pivots on its
   own left edge, so if the stage were wider than the page the spine would sit out
   in empty space and the page would swing in from nowhere. Every paper piece here
   is Letter-ish (the CMA and the kit are 1082×1400; the brochure panel is 700×906,
   the same ratio to three decimals), so one aspect covers all three. */
.bx-lb-stage.is-paper {
  perspective: 2400px;
  height: min(70vh, 780px);
  width: auto; aspect-ratio: 1082 / 1400;
  max-width: 92vw; margin: 0 auto;
}
.bx-lb-stage.is-paper .bx-lb-sheet {
  transform-origin: left center;
  transition: none;            /* the keyframes own opacity here, not a crossfade */
  will-change: transform, opacity;
}
.bx-lb-stage.is-paper .bx-lb-sheet img {
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6);
}
@keyframes bx-flip-out {
  0%   { transform: rotateY(0deg);    opacity: 1; }
  49%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { transform: rotateY(-176deg); opacity: 0; }
}
@keyframes bx-flip-in {
  0%   { transform: rotateY(-176deg); opacity: 0; }
  50%  { opacity: 0; }
  51%  { opacity: 1; }
  100% { transform: rotateY(0deg);    opacity: 1; }
}

/* ---------- screen: the piece inside a phone ----------
   The carousels, the story and the reel are social posts. Showing them as bare
   squares on a black field is a lie about where they live, so they get the device
   and the app chrome around them. */
/* Flex, not grid: as a grid item the phone's height:100% resolved against a row
   that was itself auto-sized by the phone — circular, so it fell back to auto and
   the frame got sized by its width instead, overflowing the stage. A flex line has
   a definite height, so the percentage lands.
   The stage also has to leave room for the bar under it; at 78vh the frame ran
   long enough to sit on top of the next/prev buttons and swallow their clicks. */
.bx-lb-stage.is-screen {
  display: flex; align-items: center; justify-content: center;
  height: min(74vh, 780px);
}
.bx-phone { height: 100%; display: flex; }
.bx-phone-body {
  position: relative; height: 100%; aspect-ratio: 9 / 19.3;
  background: #000; color: #fff;
  border: 9px solid #14171a;
  border-radius: 42px;
  box-shadow: 0 60px 110px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(251,250,246,.12);
  display: flex; flex-direction: column; overflow: hidden;
  font-family: var(--font-sans);
}
.bx-phone-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 34%; height: 22px; background: #14171a;
  border-radius: 0 0 14px 14px; z-index: 6;
}

/* the media well — where the slides actually page */
.bx-ig-media { position: relative; width: 100%; background: #000; }
.bx-phone--feed .bx-ig-media { aspect-ratio: 1 / 1; }
.bx-phone--story .bx-ig-media,
.bx-phone--reel .bx-ig-media { flex: 1; min-height: 0; }
.bx-phone--feed { --pad: 11px; }

/* feed: the post header */
.bx-ig-top {
  display: flex; align-items: center; gap: 9px;
  padding: 30px 11px 9px;
}
.bx-ig-av {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--butter), var(--hedge));
  box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #e1306c;
}
.bx-ig-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bx-ig-who b { font-size: 12px; font-weight: 700; }
.bx-ig-who small { font-size: 10px; color: rgba(255,255,255,.62); }
.bx-ig-more { margin-left: auto; font-size: 15px; letter-spacing: 1px; color: rgba(255,255,255,.8); }

/* feed: the action row */
.bx-ig-acts { display: flex; align-items: center; gap: 13px; padding: 11px 11px 4px; }
.bx-ig-act { width: 22px; height: 22px; color: #fff; }
.bx-ig-act svg { width: 100%; height: 100%; display: block; }
.bx-ig-act--end { margin-left: 0; }
.bx-ig-dots { display: flex; gap: 4px; margin: 0 auto; }
.bx-ig-dots i {
  width: 5px; height: 5px; border-radius: 50%; display: block;
  background: rgba(255,255,255,.32); transition: background .3s var(--ease-out);
}
.bx-ig-dots i.on { background: #3897f0; }
.bx-ig-cap {
  padding: 6px 11px 14px; font-size: 11px; line-height: 1.45;
  color: rgba(255,255,255,.82);
}
.bx-ig-cap b { color: #fff; font-weight: 700; margin-right: 4px; }
.bx-ig-gap { flex: 1; min-height: 0; }
.bx-ig-tabs {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 18px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.bx-ig-tabs .bx-ig-act { width: 20px; height: 20px; color: rgba(255,255,255,.85); }

/* story + reel: chrome that sits over the media */
.bx-ig-overlay-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  padding: 28px 12px 10px;
  background: linear-gradient(rgba(0,0,0,.5), transparent);
}
.bx-ig-bars { display: flex; gap: 3px; margin-bottom: 10px; }
.bx-ig-bars i {
  flex: 1; height: 2px; border-radius: 2px; display: block;
  background: rgba(255,255,255,.35);
}
.bx-ig-bars i.on { background: #fff; }
.bx-ig-who--over { flex-direction: row; align-items: center; gap: 8px; }
.bx-ig-who--over .bx-ig-av { width: 24px; height: 24px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); }
.bx-ig-who--over b { font-size: 12px; }
.bx-ig-follow {
  margin-left: 6px; font-size: 10px; font-weight: 700;
  border: 1px solid rgba(255,255,255,.7); border-radius: 5px; padding: 3px 8px;
}
.bx-ig-rail {
  position: absolute; right: 10px; bottom: 74px; z-index: 5;
  display: flex; flex-direction: column; gap: 16px;
}
.bx-ig-rail .bx-ig-act { width: 24px; height: 24px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.bx-ig-overlay-cap {
  position: absolute; left: 0; right: 54px; bottom: 0; z-index: 5;
  padding: 40px 12px 16px; display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  font-size: 11px; line-height: 1.4;
}
.bx-ig-overlay-cap b { font-weight: 700; }
.bx-ig-overlay-cap span { color: rgba(255,255,255,.82); }

/* Contain, never cover. The phone is taller than the 9:16 art, so cover cropped the
   sides off the story — the price and the neighbourhood were sliced away. Cropping
   the work to fit the frame defeats the point of showing the work. Letterboxing top
   and bottom is also what a 9:16 story actually does on a tall phone. */
.bx-lb-stage.is-screen .bx-lb-sheet img,
.bx-lb-stage.is-screen .bx-lb-sheet video { object-fit: contain; }
.bx-phone--reel .bx-lb-sheet video { cursor: pointer; }

.bx-lb-bar {
  display: flex; align-items: center; gap: 20px; color: var(--daylight);
  /* the bar stays clickable even if a tall piece runs into it */
  position: relative; z-index: 2;
}
.bx-lb-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--butter); margin-right: auto;
}
.bx-lb-count {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  color: rgba(251, 250, 246, 0.6); min-width: 56px; text-align: center;
}
.bx-lb-bar button {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--daylight);
  border: 1px solid rgba(251, 250, 246, 0.3);
  font-size: 17px; line-height: 1;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.bx-lb-bar button:hover { border-color: var(--butter); color: var(--butter); }
.bx-lb-bar button[aria-disabled="true"] { opacity: .28; cursor: default; }

.bx-lb-close {
  position: absolute; top: clamp(16px, 3vh, 32px); right: clamp(16px, 3vw, 40px);
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--daylight);
  border: 1px solid rgba(251, 250, 246, 0.3); font-size: 18px; line-height: 1;
}
.bx-lb-close:hover { border-color: var(--butter); color: var(--butter); }
.bx-lb-open-link {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(251, 250, 246, 0.6); text-decoration: none; border-bottom: 1px solid currentColor;
}
.bx-lb-open-link:hover { color: var(--butter); }

.bx-row { cursor: pointer; }

/* ---------- TRY — one-listing entry band ----------
   daylight like the index above it, so the seam needs the hairline;
   background/color restated deliberately (matches .bx-referral's precedent) */
.bx-try {
  padding: clamp(72px, 10vw, 140px) clamp(20px, 4vw, 56px);
  background: var(--daylight);
  color: var(--ink);
  border-top: 1px solid rgba(29, 33, 30, 0.18);
}
.bx-try-copy {
  max-width: 58ch;
  margin: clamp(20px, 3vw, 32px) 0 clamp(28px, 4vw, 40px);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.6;
}

/* ---------- RATES — hedge slab, oversized prices ---------- */
.bx-rates {
  background: var(--hedge); color: var(--daylight);
  padding: clamp(72px, 11vw, 160px) clamp(20px, 4vw, 56px);
}
.bx-rates-head {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.bx-rates-note { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.bx-rates-fine {
  font-size: 12px; line-height: 1.4;
  color: rgba(251, 250, 246, 0.55);
}
.bx-rates-lede {
  margin: 0 0 clamp(32px, 5vw, 64px); max-width: 60ch;
  font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.55;
  color: rgba(251, 250, 246, 0.75);
}
.bx-rates-lede b { color: var(--butter); font-weight: 700; }
.bx-ret-terms {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(251, 250, 246, 0.5); margin-top: auto; padding-top: 8px;
}
.bx-group {
  margin: clamp(36px, 5vw, 60px) 0 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--butter);
}
.bx-menu .bx-group:first-child { margin-top: 0; }
.bx-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: clamp(12px, 1.6vw, 20px) 0;
  border-top: 1px solid rgba(251, 250, 246, 0.18);
  text-decoration: none; color: var(--daylight);
  transition: padding-left .3s var(--ease-out), color .3s var(--ease-out);
}
.bx-line:hover { padding-left: 14px; color: var(--butter); }
.bx-line-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bx-line-name { font-size: clamp(1.05rem, 1.7vw, 1.7rem); font-weight: 700; }
.bx-line-sum {
  font-size: clamp(.85rem, 1vw, 1rem); font-weight: 400; line-height: 1.5;
  color: rgba(251, 250, 246, 0.6); max-width: 58ch;
}
.bx-line:hover .bx-line-sum { color: rgba(251, 250, 246, 0.75); }
.bx-line-price {
  font-size: clamp(1.3rem, 2.6vw, 2.6rem); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bx-line-price small { font-size: 0.4em; font-weight: 500; letter-spacing: .06em; }

.bx-retainer {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(48px, 7vw, 96px);
}
.bx-ret-card {
  border: 1px solid rgba(251, 250, 246, 0.24);
  padding: clamp(24px, 3.4vw, 44px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.bx-ret-card--full { border-top: 4px solid var(--butter); }
.bx-ret-price {
  font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bx-ret-price small { font-size: 0.32em; font-weight: 500; letter-spacing: .08em; color: rgba(251,250,246,.6); }
/* No lock-in is a reason to buy, not a disclaimer. It sits under the cards at the
   size of a statement, not the size of legalese. */
.bx-terms {
  margin: clamp(20px, 2.6vw, 32px) 0 0;
  font-size: clamp(.95rem, 1.1vw, 1.1rem); line-height: 1.5;
  color: rgba(251, 250, 246, 0.72);
}
/* ---------- PLAIN TERMS — the fine print a buyer actually asks about ---------- */
.bx-plain { margin: 14px 0 0; padding: 0; }
.bx-plain li { list-style: none; margin: 0 0 10px; }
.bx-plain-more { margin: 18px 0 0; }
.bx-plain-more a { color: inherit; text-decoration: underline; }
.bx-ret-card p { margin: 0 0 8px; color: rgba(251, 250, 246, 0.75); max-width: 36ch; line-height: 1.55; }
/* what each plan actually includes, so the reader isn't guessing */
.bx-ret-includes { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.bx-ret-includes li {
  position: relative; padding-left: 18px;
  font-size: 0.92rem; line-height: 1.4; color: rgba(251, 250, 246, 0.82);
}
.bx-ret-includes li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--butter);
}
/* .bx-ret-terms carries the margin-top:auto that pins this block to the bottom */
.bx-ret-card .bx-btn { margin-top: 4px; }

/* ---------- FAQ — night slab ---------- */
.bx-faq {
  background: var(--ink); color: var(--daylight);
  padding: clamp(72px, 11vw, 160px) clamp(20px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
  gap: clamp(32px, 6vw, 96px); align-items: start;
}
.bx-faq-list details { border-top: 1px solid rgba(251, 250, 246, 0.18); }
.bx-faq-list details:last-child { border-bottom: 1px solid rgba(251, 250, 246, 0.18); }
.bx-faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: clamp(1rem, 1.5vw, 1.35rem); font-weight: 700;
}
.bx-faq-list summary::-webkit-details-marker { display: none; }
.bx-faq-list summary span { color: var(--butter); font-weight: 400; transition: transform .3s var(--ease-out); }
.bx-faq-list details[open] summary span { transform: rotate(45deg); }
.bx-faq-list p { margin: 0 0 24px; color: rgba(251, 250, 246, 0.72); max-width: 62ch; line-height: 1.6; }


/* ---------- referral — an offer, so it gets to be one ---------- */
/* daylight, not sage: it lands between the night FAQ and the butter CTA, and a
   third colour in that run just muddies the step up to the call to action */
.bx-referral {
  background: var(--daylight); color: var(--ink);
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 56px);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: clamp(12px, 3vw, 48px);
}
.bx-referral-line {
  margin: 0; max-width: 62ch;
  font-size: clamp(1.05rem, 1.6vw, 1.5rem); line-height: 1.45;
  color: rgba(29, 33, 30, 0.78);
}
.bx-referral-line b { color: var(--ink); font-weight: 700; }
.bx-referral-note {
  margin: 0; flex-basis: 100%;
  font-size: .85rem; line-height: 1.5; color: rgba(29, 33, 30, 0.55);
}

/* ---------- CTA band — butter ---------- */
.bx-cta-band {
  background: var(--butter); color: var(--ink);
  padding: clamp(64px, 9vw, 130px) clamp(20px, 4vw, 56px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
}
.bx-cta-band .bx-btn { background: var(--ink); border-color: var(--ink); color: var(--daylight); }

/* ---------- footer ---------- */
.bx-footer {
  background: var(--ink); color: rgba(251, 250, 246, 0.6);
  padding: 32px clamp(20px, 4vw, 56px);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  border-top: 1px solid rgba(251, 250, 246, 0.12);
}
.bx-footer a { color: var(--butter); text-decoration: none; }
.bx-footer-legal { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- cart — select pieces, pay one bill ---------- */
.bx-cart[hidden], .bx-cart-panel[hidden] { display: none; }
.bx-cart { position: fixed; bottom: 18px; right: 18px; z-index: 150; }

/* the affordance: a menu line reads "Add · $249" on hover, and carries a check
   once it's in the order */
.bx-line { cursor: pointer; }
.bx-line:hover .bx-line-price::before,
.bx-line:focus-visible .bx-line-price::before {
  content: "Add · "; font-size: 0.42em; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--butter);
  vertical-align: middle;
}
/* Full Identity routes to a conversation, not the cart: suppress the "Add ·"
   affordance and mark it as consultative. */
.bx-line--talk:hover .bx-line-price::before,
.bx-line--talk:focus-visible .bx-line-price::before { content: none; }
.bx-line--sub { border-top: 0; padding-top: 0; padding-left: clamp(16px, 2vw, 28px); opacity: 0.92; }
.bx-line--sub .bx-line-name { font-size: 0.9em; }
.bx-ret-alt { display: inline-block; margin-left: 14px; font-size: 13px; color: rgba(251, 250, 246, 0.6); text-decoration: underline; text-underline-offset: 3px; }
.bx-ret-alt:hover { color: var(--butter); }
.bx-line-tag {
  display: inline-block; margin-top: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--butter);
}
/* the pieces inside a bundle, pulled out of the sentence so they read at a glance */
.bx-line-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.bx-line-chips span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(251, 250, 246, 0.9); background: rgba(251, 250, 246, 0.08);
  border: 1px solid rgba(251, 250, 246, 0.18);
  padding: 3px 9px; border-radius: 999px;
}
.bx-line.in-cart .bx-line-price::after {
  content: " ✓"; color: var(--butter); font-size: 0.7em;
}
.bx-line.pulse { animation: bx-pulse .4s var(--ease-out); }
@keyframes bx-pulse { 0% { padding-left: 14px; } 100% { padding-left: 0; } }

.bx-cart-tab {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--butter); color: var(--ink); border: none;
  padding: 13px 18px; border-radius: 999px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.5);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  transition: transform .2s var(--ease-out);
}
.bx-cart-tab:hover { transform: translateY(-2px); }
.bx-cart-count {
  display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--ink); color: var(--daylight); border-radius: 999px;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.bx-cart-total { font-variant-numeric: tabular-nums; }

.bx-cart-panel {
  position: absolute; bottom: calc(100% + 12px); right: 0;
  width: min(360px, calc(100vw - 36px));
  background: var(--daylight); color: var(--ink);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(29,33,30,.08);
  display: flex; flex-direction: column; max-height: min(70vh, 620px);
}
.bx-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 12px;
}
.bx-cart-close {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid rgba(29,33,30,.2); color: var(--ink);
  font-size: 13px; line-height: 1;
}
.bx-cart-close:hover { border-color: var(--ink); }

.bx-cart-items { overflow-y: auto; padding: 0 20px; }
.bx-cart-empty { padding: 24px 0 28px; color: rgba(29,33,30,.5); font-size: .95rem; }
.bx-cart-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px;
  padding: 14px 0; border-top: 1px solid rgba(29,33,30,.12);
}
.bx-cart-row:first-child { border-top: none; }
.bx-cart-row-name { font-size: .98rem; font-weight: 700; }
.bx-cart-row-price { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.bx-step {
  display: flex; align-items: center; gap: 0;
  border: 1px solid rgba(29,33,30,.2); border-radius: 999px; overflow: hidden;
}
.bx-step button {
  width: 26px; height: 26px; cursor: pointer; background: transparent; border: none;
  color: var(--ink); font-size: 15px; line-height: 1;
}
.bx-step button:hover { background: rgba(29,33,30,.08); }
.bx-step span { min-width: 22px; text-align: center; font-size: .85rem; font-variant-numeric: tabular-nums; }
.bx-cart-rm {
  background: none; border: none; cursor: pointer; color: rgba(29,33,30,.45);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.bx-cart-rm:hover { color: #a3403a; }
.bx-cart-rm { justify-self: end; }
.bx-step { justify-self: start; }
.bx-cart-perphoto { grid-column: 1 / -1; font-size: 11px; color: rgba(29,33,30,.5); letter-spacing: .04em; }

.bx-cart-foot { padding: 16px 20px 20px; border-top: 1px solid rgba(29,33,30,.14); }
.bx-cart-sub {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bx-cart-fine { margin: 8px 0 14px; font-size: 11px; line-height: 1.5; color: rgba(29,33,30,.55); }
.bx-cart-fine.ok { color: #29483a; }
.bx-cart-fine.bad { color: #a3403a; }
.bx-cart-code { display: flex; gap: 8px; margin: 10px 0 4px; }
.bx-cart-code input {
  flex: 1; min-width: 0; padding: 10px 12px; font: inherit; font-size: .9rem;
  border: 1px solid rgba(29,33,30,.3); border-radius: 0; background: transparent; color: inherit;
}
.bx-cart-code input:focus { outline: 2px solid #29483a; outline-offset: -1px; }
.bx-cart-code button {
  padding: 10px 14px; font: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; border: 1px solid currentColor;
  border-radius: 0; background: transparent; color: inherit; cursor: pointer;
}
.bx-cart-code button[disabled] { opacity: .6; cursor: default; }
.bx-cart-go { width: 100%; text-align: center; border: none; }
.bx-cart-go[disabled] { opacity: .6; cursor: default; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .bx-hero { grid-template-columns: 1fr; align-items: start; min-height: auto; }
  .bx-hero-reel { justify-self: start; max-width: 260px; margin-top: 32px; }
  .bx-faq { grid-template-columns: 1fr; }
  .bx-row { grid-template-columns: auto minmax(0, 1fr); }
  .bx-tag { display: none; }
  .bx-index.is-hover .bx-row { opacity: 1; }
}

/* The header used to wrap onto a second line here: the wordmark, three links and
   a 21-character button don't fit across a 375px phone. The mark carries the
   lockup on its own, the links tighten, and the button says the short version. */
@media (max-width: 720px) {
  .bx-header { padding: 16px 20px; }
  .bx-lockup span { display: none; }
  .bx-nav { gap: 16px; }
  .bx-nav a { font-size: 11px; letter-spacing: 0.1em; }
  .bx-nav .bx-btn { padding: 10px 14px; font-size: 10px; letter-spacing: 0.1em; }
  .bx-nav .bx-btn .bx-btn-long { display: none; }
}
.bx-btn-short { display: none; }
@media (max-width: 720px) { .bx-nav .bx-btn .bx-btn-short { display: inline; } }

/* the lightbox on a phone: the device frame would be a phone inside a phone, so
   the chrome comes off and the piece just fills the screen */
@media (max-width: 720px) {
  .bx-lb { padding: 64px 12px 16px; }
  .bx-lb-stage.is-screen { height: 62vh; }
  .bx-lb-stage.is-paper { height: 62vh; }
  .bx-phone-body { border-width: 6px; border-radius: 30px; }
  .bx-lb-bar { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .bx-lb-title { margin-right: 0; width: 100%; text-align: center; }
}

@media (max-width: 560px) {
  .bx-cart { left: 12px; right: 12px; bottom: 12px; }
  .bx-cart-tab { width: 100%; justify-content: center; }
  .bx-cart-panel { width: 100%; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bx-track { animation: none; }
  .bx-btn, .bx-row, .bx-line, .bx-float { transition: none; }
}