/* ============ Site B+ — “Modern Romance, refined” ============
   .bx wraps every page: B base + luxury details borrowed from A
   (topbar, gold hairlines, letter-spaced caps on money signals). */

/* --- luxury overrides --- */
.bx-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 64px;
  border-bottom: 1px solid color-mix(in oklab, var(--burgundy) 10%, transparent);
  font: 600 10.5px/1 var(--sans-b); letter-spacing: 0.24em; text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 52%, var(--ivory));
  background: var(--ivory);
}
.bx-topbar span { white-space: nowrap; }
.bx .db-nav { border-bottom: 1px solid var(--goldline); }
.bx .btn {
  font: 600 12px/1 var(--sans-b); letter-spacing: 0.18em; text-transform: uppercase;
  padding: 19px 36px;
}
.bx .db-nav .btn { padding: 15px 28px; }
.bx .textlink { font: 600 12px/1 var(--sans-b); letter-spacing: 0.16em; text-transform: uppercase; }
.bx .db-cta::after {
  content: ''; position: absolute; inset: 14px;
  border: 1px solid color-mix(in oklab, var(--gold) 50%, transparent);
  border-radius: 36px; pointer-events: none;
}
.bx .db-footer { border-top: 1px solid var(--goldline); }
.bx-divider { height: 1px; background: var(--goldline); margin: 0 104px; border: none; }

/* --- inner-page hero --- */
.bx-pagehero { position: relative; text-align: center; padding: 78px 64px 84px; overflow: hidden; }
.bx-pagehero.tight { padding-bottom: 40px; }
.bx-pagehero .wash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(720px 460px at 50% 0%, color-mix(in oklab, var(--blush) calc(var(--wash-pct) * 0.9%), transparent), transparent 72%);
}
.bx-pagehero .crumbs { font: 600 11px/1 var(--sans-b); letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in oklab, var(--ink) 45%, var(--ivory)); margin-bottom: 28px; position: relative; }
.bx-pagehero .crumbs b { color: var(--rose); font-weight: 600; }
.bx-pagehero .display { font-size: 68px; line-height: 1.08; max-width: 880px; margin: 0 auto; position: relative; }
.bx-pagehero .lede { max-width: 640px; margin: 26px auto 0; position: relative; }

/* --- values (About) --- */
.bx-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 60px; }
.bx-values .v {
  border-radius: 28px; padding: 36px 32px; min-height: 210px;
  background: #FFFFFF; box-shadow: 0 0 0 1px color-mix(in oklab, var(--burgundy) 12%, transparent) inset;
}
.bx-values .v:nth-child(even) { background: color-mix(in oklab, var(--blush) calc(var(--wash-pct) * 0.9%), var(--ivory)); box-shadow: none; }
.bx-values .n { font: 400 italic 17px/1 var(--serif-b); color: var(--gold); display: block; margin-bottom: 20px; }
.bx-values h4 { font: 500 23px/1.25 var(--serif-b); color: var(--burgundy); margin: 0 0 12px; }
.bx-values p { font: 300 14.5px/1.7 var(--sans-b); color: color-mix(in oklab, var(--ink) 72%, var(--ivory)); margin: 0; }

/* --- founder story (About) --- */
.bx-fstory { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: center; }
.bx-fstory .lede { margin-top: 24px; }
.bx-fstory .note { margin-top: 28px; font-family: var(--mono); font-size: 11px; color: color-mix(in oklab, var(--ink) 50%, var(--ivory)); }

/* --- filter pills (Portfolio) --- */
.bx-filters { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
.bx-filters .pill {
  font: 600 13px/1 var(--sans-b); letter-spacing: 0.04em; color: var(--burgundy); white-space: nowrap;
  padding: 13px 24px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--burgundy) 25%, transparent) inset;
}
.bx-filters .pill.on { background: var(--burgundy); color: var(--ivory); box-shadow: none; }

/* --- masonry (Portfolio) --- */
.bx-masonry { columns: 3; column-gap: 24px; margin-top: 56px; }
.bx-masonry figure { margin: 0 0 24px; break-inside: avoid; }
.bx-masonry figcaption { margin-top: 10px; font-family: var(--mono); font-size: 10.5px; color: color-mix(in oklab, var(--ink) 45%, var(--ivory)); }
.bx-masonry .cat { font: 600 10.5px/1 var(--sans-b); letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose); display: block; margin-top: 8px; }

/* --- case studies --- */
.bx-case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 56px; }
.bx-case {
  background: #FFFFFF; border-radius: 32px; overflow: hidden; text-decoration: none;
  box-shadow: 0 1px 0 color-mix(in oklab, var(--burgundy) 8%, transparent), 0 14px 36px -24px color-mix(in oklab, var(--burgundy) 35%, transparent);
}
.bx-case .body { padding: 30px 34px 34px; }
.bx-case h4 { font: 500 26px/1.25 var(--serif-b); color: var(--burgundy); margin: 0 0 14px; }
.bx-case .steps { display: flex; gap: 22px; font: 600 11px/1 var(--sans-b); letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in oklab, var(--ink) 48%, var(--ivory)); }
.bx-case .steps span { white-space: nowrap; }
.bx-case .steps i { font-style: normal; color: var(--gold); margin-right: 6px; }

/* --- journal featured + newsletter --- */
.bx-featured {
  display: grid; grid-template-columns: 1.15fr 0.85fr; border-radius: 36px; overflow: hidden;
  background: #FFFFFF; box-shadow: 0 1px 0 color-mix(in oklab, var(--burgundy) 8%, transparent), 0 16px 40px -26px color-mix(in oklab, var(--burgundy) 38%, transparent);
  text-decoration: none;
}
.bx-featured .body { padding: 52px 56px; display: flex; flex-direction: column; justify-content: center; }
.bx-featured .meta { font: 600 11px/1 var(--sans-b); letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose); margin-bottom: 18px; }
.bx-featured h3 { font: 500 36px/1.2 var(--serif-b); color: var(--burgundy); margin: 0 0 18px; text-wrap: pretty; }
.bx-featured p { font: 300 15.5px/1.75 var(--sans-b); color: color-mix(in oklab, var(--ink) 72%, var(--ivory)); margin: 0 0 28px; }
.bx-news {
  border-radius: 36px; background: color-mix(in oklab, var(--blush) calc(var(--wash-pct) * 1%), var(--ivory));
  padding: 64px 80px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
}
.bx-news h3 { font: 500 32px/1.2 var(--serif-b); color: var(--burgundy); margin: 0 0 10px; }
.bx-news p { font: 300 15px/1.7 var(--sans-b); color: color-mix(in oklab, var(--ink) 70%, var(--ivory)); margin: 0; }
.bx-news .row { display: flex; gap: 12px; }
.bx-news input {
  width: 320px; border: none; border-radius: 999px; padding: 17px 26px;
  font: 400 15px var(--sans-b); color: var(--ink); background: #FFFFFF;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--burgundy) 16%, transparent) inset; outline: none;
}

/* --- prose (journal post, legal) --- */
.bx-prose { max-width: 760px; margin: 0 auto; }
.bx-prose h2 { font: 500 32px/1.25 var(--serif-b); color: var(--burgundy); margin: 52px 0 18px; }
.bx-prose p { font: 300 17px/1.85 var(--sans-b); color: color-mix(in oklab, var(--ink) 82%, var(--ivory)); margin: 0 0 20px; }
.bx-prose ul { margin: 0 0 20px; padding-left: 22px; }
.bx-prose li { font: 300 17px/1.85 var(--sans-b); color: color-mix(in oklab, var(--ink) 82%, var(--ivory)); margin-bottom: 8px; }
.bx-prose .legalnote { font-family: var(--mono); font-size: 11px; color: color-mix(in oklab, var(--ink) 50%, var(--ivory)); }
.bx-author {
  display: flex; gap: 22px; align-items: center; margin-top: 56px;
  border-top: 1px solid var(--goldline); padding-top: 34px;
}
.bx-author b { display: block; font: 500 18px/1.3 var(--serif-b); color: var(--burgundy); }
.bx-author span { font: 300 13.5px/1.5 var(--sans-b); color: color-mix(in oklab, var(--ink) 60%, var(--ivory)); }

/* --- contact form --- */
.bx-contact { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
.bx-form {
  background: #FFFFFF; border-radius: 36px; padding: 48px 52px 52px;
  box-shadow: 0 1px 0 color-mix(in oklab, var(--burgundy) 8%, transparent), 0 16px 40px -26px color-mix(in oklab, var(--burgundy) 38%, transparent);
}
.bx-form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; }
.bx-form .field { display: grid; gap: 9px; }
.bx-form .field.full { grid-column: 1 / -1; }
.bx-form label { font: 600 11px/1 var(--sans-b); letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in oklab, var(--ink) 58%, var(--ivory)); }
.bx-form label i { font-style: normal; color: color-mix(in oklab, var(--ink) 38%, var(--ivory)); letter-spacing: 0.08em; text-transform: none; }
.bx-form input, .bx-form select, .bx-form textarea {
  border: none; border-radius: 14px; padding: 15px 18px; width: 100%; box-sizing: border-box;
  font: 400 15px/1.4 var(--sans-b); color: var(--ink); background: var(--ivory);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--burgundy) 16%, transparent) inset; outline: none;
}
.bx-form select { color: color-mix(in oklab, var(--ink) 60%, var(--ivory)); appearance: none; }
.bx-form textarea { min-height: 130px; resize: vertical; }
.bx-form .check { display: flex; gap: 12px; align-items: center; font: 400 14px/1.4 var(--sans-b); color: color-mix(in oklab, var(--ink) 70%, var(--ivory)); }
.bx-form .check .box { width: 20px; height: 20px; border-radius: 6px; flex: none; box-shadow: 0 0 0 1px color-mix(in oklab, var(--burgundy) 25%, transparent) inset; background: var(--ivory); }
.bx-form .note { font: 300 13px/1.5 var(--sans-b); color: color-mix(in oklab, var(--ink) 55%, var(--ivory)); margin: 18px 0 0; }
.bx-details { display: grid; gap: 24px; }
.bx-details .card {
  background: color-mix(in oklab, var(--blush) calc(var(--wash-pct) * 0.8%), var(--ivory));
  border-radius: 32px; padding: 38px 40px;
}
.bx-details h5 { font: 600 11px/1 var(--sans-b); letter-spacing: 0.22em; text-transform: uppercase; color: var(--rose); margin: 0 0 18px; }
.bx-details ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bx-details li { font: 400 15px/1.5 var(--sans-b); color: var(--burgundy); }
.bx-details li.mono { font-family: var(--mono); font-size: 12px; color: color-mix(in oklab, var(--ink) 55%, var(--ivory)); }

/* --- FAQ groups --- */
.bx-faqgroup { font: 600 11.5px/1 var(--sans-b); letter-spacing: 0.24em; text-transform: uppercase; color: var(--rose); margin: 44px 0 6px; text-align: center; }

/* --- 404 --- */
.bx-404 { text-align: center; padding: 130px 64px 150px; position: relative; overflow: hidden; }
.bx-404 .display { font-size: 64px; line-height: 1.1; }
.bx-404 .lede { max-width: 460px; margin: 22px auto 40px; }
.bx-404 img { height: 64px; margin-bottom: 36px; }