/* ============================================================
   Renée Hulst — Richting B (Expressief)
   Activated by body[data-direction="b"]
   Bolder color fields · the signature petrol→orange gradient
   · duotone photography · spaced-caps display
   ============================================================ */

body[data-direction="b"] {
  --gradient: linear-gradient(90deg, var(--rh-petrol) 0%, var(--rh-orange) 100%);
}

/* ---- Display goes spaced-caps in B ---- */
body[data-direction="b"] .display {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.0;
}
body[data-direction="b"] .h2 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
body[data-direction="b"] .eyebrow {
  letter-spacing: 0.34em;
}

/* ---- Header: solid petrol bar ---- */
body[data-direction="b"] .site-header {
  background: var(--rh-petrol);
  border-bottom-color: rgba(255,255,255,0.12);
}
body[data-direction="b"] .brandmark { color: var(--rh-white); }
body[data-direction="b"] .brandmark span { color: var(--rh-orange-300); }
body[data-direction="b"] .nav-links a { color: rgba(255,255,255,0.9); }
body[data-direction="b"] .nav-links a.active { color: var(--rh-white); }
body[data-direction="b"] .nav-toggle svg { stroke: var(--rh-white); }
body[data-direction="b"] .nav.open .nav-links { background: var(--rh-petrol-700); }

/* ---- HERO on the gradient ---- */
body[data-direction="b"] .hero {
  background: var(--gradient);
  color: var(--rh-white);
  margin-bottom: 0;
}
body[data-direction="b"] .hero .eyebrow { color: var(--rh-white); opacity: 0.85; }
body[data-direction="b"] .hero .display { color: var(--rh-white); }
body[data-direction="b"] .hero .lead { color: rgba(255,255,255,0.92); }
body[data-direction="b"] .hero-note { color: rgba(255,255,255,0.8); }
body[data-direction="b"] .hero .mark::after { background: var(--rh-white); opacity: 0.28; }
body[data-direction="b"] .hero .btn-ghost {
  color: var(--rh-white); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.7);
}
body[data-direction="b"] .hero .btn-ghost:hover { background: var(--rh-white); color: var(--rh-petrol); }
body[data-direction="b"] .hero-photo img {
  border-radius: var(--r-lg);
  filter: grayscale(0.2) contrast(1.02);
  box-shadow: 0 24px 50px rgba(0,0,0,0.28);
}
body[data-direction="b"] .hero-oval { opacity: 1; border-color: rgba(255,255,255,0.55); }
body[data-direction="b"] .hero-photo .badge { background: var(--rh-black); }
body[data-direction="b"] .hero-photo .badge p { color: rgba(255,255,255,0.85); }
body[data-direction="b"] .hero-photo .badge strong { color: var(--rh-white); }
body[data-direction="b"] .hero-photo .badge .dot { background: rgba(248,114,45,0.25); }

/* trust strip becomes dark */
body[data-direction="b"] .trust { background: var(--rh-black); border-color: transparent; }
body[data-direction="b"] .trust .label { color: rgba(255,255,255,0.55); }
body[data-direction="b"] .trust-stat .n { color: var(--rh-orange-300); }
body[data-direction="b"] .trust-stat .t { color: rgba(255,255,255,0.7); }

/* ---- Recognition: petrol field, duotone feel ---- */
body[data-direction="b"] .recognition { background: var(--rh-petrol); color: var(--rh-white); }
body[data-direction="b"] .recognition .eyebrow { color: var(--rh-orange-300); }
body[data-direction="b"] .recognition .h2 { color: var(--rh-white); }
body[data-direction="b"] .recognition .quote-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.95);
}
body[data-direction="b"] .recognition .reco-foot p { color: rgba(255,255,255,0.9); }

/* ---- Approach note / steps accent ---- */
body[data-direction="b"] .step .num { color: var(--rh-orange); }

/* offer section neutral but feature glows */
body[data-direction="b"] .offer--feature {
  background: var(--gradient);
  border: none;
}
body[data-direction="b"] .offer--feature .kicker { color: rgba(255,255,255,0.85); }
body[data-direction="b"] .offer--feature .desc { color: rgba(255,255,255,0.92); }

/* ---- Duotone photography in B (portraits / media) ---- */
body[data-direction="b"] .split-photo,
body[data-direction="b"] .arch-frame,
body[data-direction="b"] .aanbod-media { position: relative; }
body[data-direction="b"] .split-photo img,
body[data-direction="b"] .aanbod-media img {
  filter: grayscale(1) contrast(1.05);
}
body[data-direction="b"] .split-photo::after,
body[data-direction="b"] .aanbod-media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--rh-petrol); mix-blend-mode: multiply; opacity: 0.55;
  pointer-events: none;
}
body[data-direction="b"] .split-photo.arch img { border-radius: 200px 200px var(--r-md) var(--r-md); }
body[data-direction="b"] .split-photo.arch::after { border-radius: 200px 200px var(--r-md) var(--r-md); }
body[data-direction="b"] .aanbod-media img { border-radius: var(--r-lg); }

/* keep the closing arch warm (orange duotone) */
body[data-direction="b"] .arch-frame img { filter: grayscale(1) contrast(1.05); }
body[data-direction="b"] .arch-frame::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 999px 999px var(--r-md) var(--r-md);
  background: var(--rh-orange); mix-blend-mode: multiply; opacity: 0.42; pointer-events: none;
}

/* ---- Testimonials: dark feature ---- */
body[data-direction="b"] .testi-section .eyebrow { color: var(--rh-orange); }

/* ---- Page-hero subpages get a tinted top ---- */
body[data-direction="b"] .page-hero {
  background: var(--gradient);
  color: var(--rh-white);
  padding-bottom: clamp(40px,5vw,72px);
  margin-bottom: clamp(28px,4vw,56px);
}
body[data-direction="b"] .page-hero .eyebrow { color: var(--rh-white); opacity: 0.85; }
body[data-direction="b"] .page-hero .display { color: var(--rh-white); }
body[data-direction="b"] .page-hero .lead { color: rgba(255,255,255,0.92); }

/* pill tags + pullquote stay on-brand */
body[data-direction="b"] .pullquote { color: var(--rh-petrol); }

/* closing eyebrow */
body[data-direction="b"] .closing .eyebrow { color: var(--rh-orange); }