/* ==========================================================================
   Modern Obsidian — Bali Kurakura Luxury
   Minimalist dark editorial system. Strict monochrome #080808 → #FFFFFF.
   Serif italic headlines / Geist Mono labels / Inter body.
   Fluid 92vw, noise texture, frosted glass, silver gradient CTAs.
   ========================================================================== */
:root {
  --obs-bg: #080808;
  --obs-bg-2: #0d0d0f;
  --obs-ink: #ffffff;
  --obs-silver: #e2e8f0;
  --obs-muted: rgba(226, 232, 240, 0.62);
  --obs-faint: rgba(226, 232, 240, 0.42);
  --obs-line: rgba(255, 255, 255, 0.08);
  --obs-line-strong: rgba(255, 255, 255, 0.16);
  --obs-glass: rgba(255, 255, 255, 0.02);
  --obs-silver-grad: linear-gradient(135deg, #f8fafc 0%, #94a3b8 100%);
  --obs-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --obs-vw: 92vw;
  --obs-max: 1440px;
  /* Hero art (CSS background) — sourced from kurakurabali.com (Kura Kura Bali) */
  --obs-hero-800: url("obs-hero-800.webp");
  --obs-hero-1920: url("obs-hero-1920.webp");
  /* Page-level art pool. A page sets --obs-hero-file on .obs-hero to override
     the default hero; keys must stay in sync with obs_image_pool() in
     inc/obsidian-media.php. */
  --kk-aerial: url("kk-aerial-1280.webp");
  --kk-marina: url("kk-marina-1280.webp");
  --kk-dining: url("kk-dining-1280.webp");
  --kk-promenade: url("kk-promenade-1280.webp");
  --kk-turtles: url("kk-turtles-1280.webp");
  --kk-surf: url("kk-surf-1280.webp");
  --kk-boutique: url("kk-boutique-1280.webp");
  --kk-bazaar: url("kk-bazaar-1280.webp");
  --kk-offering: url("kk-offering-1280.webp");
  --kk-retail: url("kk-retail-1280.webp");
  --kk-gate: url("kk-gate-1280.webp");
  --kk-acsgate: url("kk-acsgate-1280.webp");
  --kk-azur: url("kk-azur-1280.webp");
  --kk-qpark: url("kk-qpark-1280.webp");
  --kk-uid: url("kk-uid-1280.webp");
  --kk-doves: url("kk-doves-1280.webp");
  --kk-ceremony: url("kk-ceremony-1280.webp");
  --kk-invest: url("kk-invest-1280.webp");
  --kk-pilates: url("kk-pilates-1280.webp");
  --kk-turtle2: url("kk-turtle2-1280.webp");
  --kk-jazz: url("kk-jazz-1280.webp");
  --kk-penjor: url("kk-penjor-1280.webp");
  --kk-seaweed: url("kk-seaweed-1280.webp");
}

/* Base — obsidian ONLY on front page (body.obsidian); subpages keep legacy theme */
html { background: #080808; }
body.obsidian {
  background: var(--obs-bg) !important;
  color: var(--obs-silver) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.obsidian::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
body.obsidian > * { position: relative; z-index: 1; }
body.obsidian a { color: var(--obs-ink); }
body.obsidian a:hover { color: #fff; }
body.obsidian p { color: var(--obs-muted) !important; }
body.obsidian h1, body.obsidian h2, body.obsidian h3, body.obsidian h4 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.95 !important;
  color: #fff !important;
}

.obs-wrap { width: var(--obs-vw); max-width: var(--obs-max); margin-inline: auto; }
.obs-mono {
  font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace !important;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}
.obs-silver-text {
  background: var(--obs-silver-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
/* Over the hero photo the silver gradient loses contrast against dark rock.
   Two engine quirks to avoid here: (1) a `filter` on a background-clip:text
   element makes Blink clip to the border-box instead of the glyphs, and
   (2) the h1 text-shadow paints *behind* the transparent fill, so it reads as a
   dark halo instead of a halo. So: near-white gradient, no filter, no shadow. */
.obs-hero-glass .obs-silver-text {
  background-image: linear-gradient(135deg, #ffffff 0%, #eef2f7 55%, #dbe3ec 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

/* Reveal */
.obs-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--obs-ease), transform 0.8s var(--obs-ease); }
.obs-reveal.is-in { opacity: 1; transform: none; }

/* Header */
.obs-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8, 8, 8, 0.72);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--obs-line);
}
.obs-header-inner {
  width: var(--obs-vw); max-width: var(--obs-max); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; gap: 20px;
}
.obs-brand {
  font-family: 'Geist Mono', ui-monospace, monospace !important;
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: #fff !important; text-decoration: none; font-weight: 600;
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
}
.obs-brand-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--obs-silver-grad); flex-shrink: 0; }
/* Brand lockup: gold BK monogram from uploads/2026/09/Balikuraku-Luxury-logo.png,
   cropped to assets/logo-mark-*.png. The wordmark stays in HTML so it stays
   selectable, translatable and legible even before the image loads. */
.obs-brand-logo {
  width: 44px; height: 44px; flex-shrink: 0; display: block;
  object-fit: contain; border-radius: 50%;
  transition: transform 0.5s var(--obs-ease), box-shadow 0.5s var(--obs-ease);
}
.obs-brand:hover .obs-brand-logo {
  transform: rotate(-6deg) scale(1.04);
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.28);
}
.obs-brand-name {
  font-family: 'Geist Mono', ui-monospace, monospace !important;
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: #fff !important; font-weight: 600; white-space: nowrap;
}
/* Footer: full stacked lockup (monogram + Balikuraku Luxury wordmark) */
.obs-foot-lockup {
  display: inline-flex; margin-bottom: 22px; text-decoration: none;
  border-radius: 14px; transition: transform 0.5s var(--obs-ease), box-shadow 0.5s var(--obs-ease);
}
.obs-foot-lockup:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(212, 175, 55, 0.18); }
.obs-foot-logo { width: 150px; height: auto; display: block; }
.obs-nav { display: flex; align-items: center; gap: 6px; }
.obs-nav-links {
  display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--obs-line);
  border-radius: 100px; padding: 4px;
  list-style: none; margin: 0;
}
.obs-nav-links li { list-style: none; margin: 0; }
.obs-nav-links a, .obs-nav-links button.obs-nav-link {
  display: inline-flex; align-items: center;
  font-family: 'Geist Mono', monospace !important;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--obs-muted) !important; text-decoration: none;
  padding: 9px 15px; border-radius: 100px; border: 0; background: transparent;
  cursor: pointer; white-space: nowrap; transition: all 0.3s var(--obs-ease);
}
.obs-nav-links a:hover, .obs-nav-links button.obs-nav-link:hover { color: #fff !important; background: rgba(255,255,255,0.07); }
.obs-join {
  font-family: 'Geist Mono', monospace !important;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
  background: #fff !important; color: #000 !important;
  padding: 12px 22px; border-radius: 100px; text-decoration: none;
  border: 1px solid #fff; transition: all 0.3s var(--obs-ease); white-space: nowrap;
}
.obs-join:hover { transform: translateY(-1px); box-shadow: 0 0 20px rgba(255,255,255,0.15); color: #000 !important; }
.obs-burger { display: none; background: rgba(255,255,255,0.05); border: 1px solid var(--obs-line); border-radius: 100px; color: #fff; padding: 10px 18px; cursor: pointer; }
.obs-dropdown { position: relative; }
.obs-dropdown-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 250px; background: rgba(13,13,15,0.96); backdrop-filter: blur(24px);
  border: 1px solid var(--obs-line); border-radius: 16px; padding: 10px;
  opacity: 0; visibility: hidden; transition: all 0.3s var(--obs-ease); z-index: 120;
}
.obs-dropdown:hover > .obs-dropdown-panel, .obs-dropdown:focus-within > .obs-dropdown-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.obs-dropdown-panel a { display: block !important; border-radius: 10px !important; }

/* Hero */
.obs-hero { padding: 48px 0 28px; }
.obs-hero-glass {
  background-color: var(--obs-bg-2);
  /* No scrim here on purpose. A pseudo-element child is painted *after* the
     parent's own background, so gradients declared on this element end up
     underneath the photo and never darken it. Layering is instead:
       ::before (z 0) = photograph  →  ::after (z 1) = scrims  →  content (z 2) */
  border: 1px solid var(--obs-line);
  border-radius: 4rem;
  padding: clamp(56px, 8vw, 120px) clamp(24px, 5vw, 84px) clamp(40px, 7vw, 110px);
  text-align: center;
  position: relative; overflow: hidden;
  isolation: isolate;
  min-height: clamp(520px, 62vh, 760px);
  display: flex; flex-direction: column; justify-content: center;
}
.obs-hero-glass::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--obs-hero-file, var(--obs-hero-1920));
  background-size: cover; background-position: 88% 78%; background-repeat: no-repeat;
  /* No filter — the photograph renders with its own colour and tonality.
     Because the source is bright, the scrim gradients above carry the whole
     legibility load, so they are tuned against the unfiltered pixels. */
  transform: scale(1.02);
  transition: transform 1.4s var(--obs-ease);
}
.obs-hero-glass:hover::before { transform: scale(1.05); }
@media (max-width: 700px) {
  .obs-hero-glass::before { background-image: var(--obs-hero-800); }
}
.obs-hero-glass::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* The photo carries no filter, so these gradients do all the legibility work:
     a wide centre column under the serif headline, a radial pool behind the
     lede, a top/bottom wash for the credit strip and meta bar, plus a faint
     silver sheen at the top. Outer thirds stay readable as photograph. */
  background-image:
    linear-gradient(90deg, rgba(8,8,8,0.3) 0%, rgba(8,8,8,0.58) 24%, rgba(8,8,8,0.66) 50%, rgba(8,8,8,0.58) 76%, rgba(8,8,8,0.3) 100%),
    radial-gradient(ellipse 62% 44% at 50% 32%, rgba(8,8,8,0.58) 0%, rgba(8,8,8,0.44) 52%, rgba(8,8,8,0.16) 82%, transparent 100%),
    linear-gradient(180deg, rgba(8,8,8,0.58) 0%, rgba(8,8,8,0.26) 26%, rgba(8,8,8,0.3) 62%, rgba(8,8,8,0.78) 100%),
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(248,250,252,0.08), transparent 72%);
}
.obs-hero-glass > * { position: relative; z-index: 2; }
.obs-hero-glass .obs-eyebrow,
.obs-hero-glass .obs-cta-row,
.obs-hero-glass .obs-meta-bar { z-index: 2; }
/* Text legibility over the photo — layered dark halo, not a box-shadow */
.obs-hero-glass .obs-h1 {
  text-shadow: 0 2px 40px rgba(8,8,8,0.95), 0 2px 12px rgba(8,8,8,0.9), 0 1px 3px rgba(8,8,8,0.85);
}
.obs-hero-glass .obs-lede {
  text-shadow: 0 2px 26px rgba(8,8,8,0.92), 0 1px 4px rgba(8,8,8,0.8);
  color: #fff !important;
}
.obs-hero-glass .obs-sub {
  text-shadow: 0 2px 18px rgba(8,8,8,0.92), 0 1px 3px rgba(8,8,8,0.8);
  color: rgba(255,255,255,0.9) !important;
}
.obs-hero-glass .obs-meta-v { text-shadow: 0 1px 12px rgba(8,8,8,0.85); color: #fff !important; }
.obs-hero-glass .obs-eyebrow {
  background: rgba(8,8,8,0.42);
  border-color: rgba(255,255,255,0.14);
}
/* Background-art description for screen readers — must never be visible.
   Modern visually-hidden pattern (clip-path), not the legacy rect() form. */
.obs-hero-bg-alt {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---- Chapter prose (verbatim DB wording inside .obs-two-col) ---- */
.obs-chapter { margin-bottom: 30px; }
.obs-chapter p {
  font-size: 15px !important; line-height: 1.8 !important;
  color: var(--obs-muted) !important; margin: 0 0 1.05em !important;
}
.obs-chapter p:last-child { margin-bottom: 0 !important; }
.obs-chapter strong { color: #fff !important; font-weight: 600; }
.obs-chapter em { font-style: italic; color: var(--obs-silver) !important; }
.obs-chapter a {
  color: #fff !important; text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.28); text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.obs-chapter a:hover { text-decoration-color: #fff; }
.obs-chapter ul, .obs-chapter ol { margin: 0 0 1.1em; padding-left: 20px; }
.obs-chapter li { font-size: 14.5px; line-height: 1.7; color: var(--obs-muted); margin-bottom: 8px; }
.obs-chapter ul li::marker { color: rgba(255,255,255,0.35); }
.obs-chapter blockquote {
  margin: 1.4em 0; padding: 4px 0 4px 20px;
  border-left: 1px solid rgba(255,255,255,0.28); font-style: italic;
}
.obs-chapter h3, .obs-chapter h4 {
  font-size: clamp(20px, 2.4vw, 27px) !important; margin: 1.4em 0 0.5em !important;
}

/* ---- Island gallery (front page) ---- */
.obs-gallery {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
.obs-shot {
  margin: 0; position: relative; overflow: hidden;
  background: var(--obs-bg-2);
  aspect-ratio: 4 / 3;
  border-radius: 16px; border: 1px solid var(--obs-line);
  transition: border-color 0.5s var(--obs-ease), transform 0.6s var(--obs-ease);
}
.obs-shot:hover { border-color: rgba(255,255,255,0.24); transform: translateY(-3px); }
.obs-shot-link {
  display: block; position: absolute; inset: 0;
  text-decoration: none; overflow: hidden;
}
.obs-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02);
  transition: transform 1.4s var(--obs-ease);
}
.obs-shot:hover img { transform: scale(1.06); }
.obs-shot-link::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,8,0.46) 0%, transparent 34%, transparent 44%, rgba(8,8,8,0.88) 100%);
}
.obs-shot-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 7px; padding: 18px;
}
.obs-shot-n { color: rgba(255,255,255,0.52) !important; flex-shrink: 0; }
.obs-shot-t {
  font-family: 'DM Serif Display', Georgia, serif; font-style: italic;
  font-size: 17px; line-height: 1.26; color: #fff;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.45s var(--obs-ease), transform 0.45s var(--obs-ease);
}
.obs-shot:hover .obs-shot-t,
.obs-shot:focus-within .obs-shot-t { opacity: 1; transform: none; }
/* Always keep a readable caption on touch devices, where hover does not exist */
@media (hover: none) {
  .obs-shot-t { opacity: 1; transform: none; font-size: 15px; }
}

/* ---- Accordion list (long Q&A pages: FAQ etc.) ---- */
.obs-list { border-top: 1px solid var(--obs-line); }
.obs-row { border-bottom: 1px solid var(--obs-line); }
.obs-row-s {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 20px 4px; cursor: pointer; list-style: none;
  transition: background 0.35s var(--obs-ease), padding 0.35s var(--obs-ease);
}
.obs-row-s::-webkit-details-marker { display: none; }
.obs-row-s::after {
  content: "+"; margin-left: auto; flex-shrink: 0;
  font-family: 'Geist Mono', monospace; font-size: 16px; line-height: 1;
  color: var(--obs-faint); transition: transform 0.35s var(--obs-ease), color 0.2s;
}
.obs-row[open] > .obs-row-s::after { content: "−"; color: #fff; }
.obs-row-s:hover { background: rgba(255,255,255,0.03); }
.obs-row-s .obs-card-idx { margin-bottom: 0; flex-shrink: 0; padding-top: 3px; min-width: 96px; }
.obs-row-t {
  font-family: 'DM Serif Display', Georgia, serif; font-style: italic;
  font-size: clamp(17px, 2.1vw, 23px); line-height: 1.2; color: #fff;
}
.obs-row-b { padding: 4px 4px 24px 118px; margin-bottom: 0; }
.obs-row-b p:last-child { margin-bottom: 0 !important; }
@media (max-width: 700px) {
  .obs-row-b { padding-left: 4px; }
  .obs-row-s { flex-wrap: wrap; gap: 10px; }
  .obs-row-s .obs-card-idx { min-width: 0; }
}

/* ---- Extra panel: markup appended by mu-plugins (form, byline, related) ---- */
.obs-panel {
  border: 1px solid var(--obs-line);
  border-radius: 24px;
  background: var(--obs-glass);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: clamp(24px, 3.4vw, 44px);
}
.obs-panel h2, .obs-panel h3 {
  font-size: clamp(22px, 2.6vw, 32px) !important; margin: 0 0 14px !important;
}
.obs-panel > :last-child { margin-bottom: 0 !important; }

/* Neutralise the legacy light-on-cream mu-plugin blocks inside Obsidian */
.obsidian .bklux-related {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--obs-line) !important;
  border-left: 1px solid var(--obs-line) !important;
  border-radius: 16px !important; padding: 24px !important;
}
.obsidian .bklux-related h2 { color: #fff !important; }
.obsidian .bklux-related ul { columns: 2; column-gap: 32px; }
.obsidian .bklux-related a { color: var(--obs-silver) !important; }
.obsidian .bklux-related a:hover { color: #fff !important; }
.obsidian .bklux-byline { color: var(--obs-faint) !important; font-size: 11px !important; letter-spacing: 0.1em; text-transform: uppercase; }
.obsidian .bklux-byline strong { color: var(--obs-silver) !important; }

/* Contact form — recast from gold-on-cream to Obsidian glass */
.obsidian .bklux-form {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--obs-line) !important;
  border-radius: 20px !important; padding: clamp(22px, 3vw, 38px) !important;
  max-width: 100% !important; margin: 0 !important;
}
.obsidian .bklux-form h3 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-style: italic !important; color: #fff !important; font-size: 26px !important;
}
.obsidian .bklux-form label {
  color: var(--obs-muted) !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 10px !important; letter-spacing: 0.22em; text-transform: uppercase;
}
.obsidian .bklux-form input, .obsidian .bklux-form textarea {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--obs-line) !important;
  border-radius: 12px !important; color: #fff !important;
  font-family: 'Inter', sans-serif !important; font-size: 15px !important;
  padding: 13px 15px !important;
}
.obsidian .bklux-form input:focus, .obsidian .bklux-form textarea:focus {
  border-color: rgba(255,255,255,0.28) !important; outline: none !important;
}
.obsidian .bklux-form input::placeholder, .obsidian .bklux-form textarea::placeholder { color: var(--obs-faint) !important; }
.obsidian .bklux-form .bftk-btn,
.obsidian .bklux-form button[type="submit"],
.obsidian .bklux-form .bklux-cta {
  background: var(--obs-silver-grad) !important; color: #000 !important;
  border: 1px solid rgba(255,255,255,0.4) !important; border-radius: 12px !important;
  font-family: 'Geist Mono', monospace !important; font-size: 11px !important;
  letter-spacing: 0.2em !important; text-transform: uppercase; font-weight: 700 !important;
  padding: 16px 28px !important; transition: all 0.3s var(--obs-ease) !important;
}
.obsidian .bklux-form .bklux-cta:hover { box-shadow: 0 0 20px rgba(255,255,255,0.15); transform: translateY(-1px); }
.obsidian .bklux-form .bklux-cta.ghost2,
.obsidian .bklux-form .ghost2 {
  background: transparent !important; color: var(--obs-silver) !important;
  border: 1px solid var(--obs-line-strong) !important;
}
.obsidian .bklux-msg { color: #fff !important; }
.obsidian .bklux-form p { color: var(--obs-faint) !important; }
.obs-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: center; width: fit-content;
  border: 1px solid var(--obs-line); border-radius: 100px;
  padding: 9px 18px; background: rgba(255,255,255,0.03);
  margin-bottom: 30px;
}
.obs-eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: #fff; display: inline-block; }
.obs-h1 {
  font-size: clamp(42px, 10vw, 140px) !important;
  margin: 0 0 28px; text-wrap: balance;
}
.obs-h1 em { font-style: italic !important; }
.obs-lede {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-style: italic !important;
  font-size: clamp(17px, 2.2vw, 23px) !important;
  line-height: 1.5 !important;
  color: var(--obs-silver) !important;
  max-width: 820px; margin: 0 auto 18px;
}
.obs-sub {
  font-size: 15px !important; line-height: 1.75 !important;
  max-width: 760px; margin: 0 auto 36px !important;
}
.obs-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 54px; position: relative; z-index: 2; }
.obs-btn-silver {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
  background: var(--obs-silver-grad) !important; color: #000 !important;
  padding: 17px 32px; border-radius: 14px; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.4); transition: all 0.3s var(--obs-ease);
  display: inline-flex; align-items: center; gap: 10px;
}
.obs-btn-silver:hover { transform: translateY(-1px); box-shadow: 0 0 20px rgba(255,255,255,0.15); color: #000 !important; }
.obs-btn-ghost {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  color: var(--obs-silver) !important; padding: 17px 32px; border-radius: 14px;
  border: 1px solid var(--obs-line-strong); text-decoration: none;
  background: rgba(255,255,255,0.02); backdrop-filter: blur(24px);
  transition: all 0.3s var(--obs-ease); display: inline-flex; align-items: center; gap: 10px;
}
.obs-btn-ghost:hover { border-color: rgba(255,255,255,0.35); color: #fff !important; }
/* WhatsApp CTAs carry a faint gold edge, echoing the BK monogram accent */
.obs-btn-wa { border-color: rgba(212, 175, 55, 0.45); }
.obs-btn-wa:hover { box-shadow: 0 0 24px rgba(212, 175, 55, 0.3); border-color: rgba(212, 175, 55, 0.8); }
.obs-btn-ghost.obs-btn-wa:hover { border-color: rgba(212, 175, 55, 0.7); background: rgba(212, 175, 55, 0.08); }
.obs-meta-bar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--obs-line); padding-top: 30px; gap: 24px;
  text-align: left; position: relative; z-index: 2;
}
.obs-meta-bar > div + div { border-left: 1px solid var(--obs-line); padding-left: 24px; }
.obs-meta-k { font-family: 'Geist Mono', monospace !important; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--obs-faint) !important; margin-bottom: 10px; display: block; }
.obs-meta-v { font-size: 13.5px; line-height: 1.65; color: var(--obs-silver) !important; margin: 0; }

/* Hero image credit strip. Sits at the BOTTOM of the hero, above the meta bar
   clearance, so it cannot collide with the eyebrow pill in normal flow. */
.obs-hero-media-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(20px, 2.6vw, 34px) clamp(18px, 2.2vw, 26px);
  pointer-events: none;
}
.obs-hero-media-l, .obs-hero-media-r {
  font-family: 'Geist Mono', monospace !important;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  margin: 0 !important; white-space: nowrap;
}
.obs-hero-media-l { color: rgba(255,255,255,0.9) !important; }
.obs-hero-media-r { color: rgba(255,255,255,0.5) !important; }
.obs-hero-media-l span { color: rgba(255,255,255,0.5); }
/* Keep the strip from sitting on the meta-bar row */
.obs-hero-glass .obs-meta-bar { margin-bottom: 26px; }
@media (max-width: 760px) {
  .obs-hero-media-cap { justify-content: center; text-align: center; }
  .obs-hero-media-r { display: none; }
}

/* Capture form */

/* Data strip */
.obs-strip { border-top: 1px solid var(--obs-line); border-bottom: 1px solid var(--obs-line); margin: 40px 0 0; }
.obs-strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.obs-strip-cell { padding: 26px 28px; border-right: 1px solid var(--obs-line); }
.obs-strip-cell:last-child { border-right: 0; }
.obs-strip-num { font-family: 'DM Serif Display', Georgia, serif !important; font-style: italic !important; font-size: clamp(26px, 3vw, 40px) !important; color: #fff !important; line-height: 1 !important; margin-bottom: 10px; }

/* Sections */
.obs-section { padding: clamp(60px, 8vw, 120px) 0; }
.obs-sec-head { max-width: 860px; margin-bottom: 54px; }
.obs-sec-head.center { margin-inline: auto; text-align: center; }
.obs-h2 { font-size: clamp(34px, 5.5vw, 76px) !important; margin: 16px 0 18px !important; text-wrap: balance; }
.obs-sec-sub { font-size: 15.5px !important; line-height: 1.75 !important; margin: 0 !important; }

/* Bento */
.obs-bento { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--obs-line); border-left: 1px solid var(--obs-line); }
.obs-card {
  border-right: 1px solid var(--obs-line); border-bottom: 1px solid var(--obs-line);
  padding: 30px 26px 32px; background: transparent;
  transition: background 0.5s var(--obs-ease), border-color 0.5s var(--obs-ease);
  position: relative; min-height: 280px; display: flex; flex-direction: column;
}
.obs-card:hover { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.2); }
.obs-card-idx { margin-bottom: 0; flex-shrink: 0; padding-top: 3px; min-width: 96px; }
.obs-row-t {
  font-family: 'DM Serif Display', Georgia, serif; font-style: italic;
  font-size: clamp(17px, 2.1vw, 23px); line-height: 1.2; color: #fff;
}
.obs-row-b { padding: 4px 4px 24px 118px; margin-bottom: 0; }
.obs-row-b p:last-child { margin-bottom: 0 !important; }
@media (max-width: 700px) {
  .obs-row-b { padding-left: 4px; }
  .obs-row-s { flex-wrap: wrap; gap: 10px; }
  .obs-row-s .obs-card-idx { min-width: 0; }
}

/* ---- Extra panel: markup appended by mu-plugins (form, byline, related) ---- */
.obs-panel {
  border: 1px solid var(--obs-line);
  border-radius: 24px;
  background: var(--obs-glass);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: clamp(24px, 3.4vw, 44px);
}
.obs-panel h2, .obs-panel h3 {
  font-size: clamp(22px, 2.6vw, 32px) !important; margin: 0 0 14px !important;
}
.obs-panel > :last-child { margin-bottom: 0 !important; }

/* Neutralise the legacy light-on-cream mu-plugin blocks inside Obsidian */
.obsidian .bklux-related {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--obs-line) !important;
  border-left: 1px solid var(--obs-line) !important;
  border-radius: 16px !important; padding: 24px !important;
}
.obsidian .bklux-related h2 { color: #fff !important; }
.obsidian .bklux-related ul { columns: 2; column-gap: 32px; }
.obsidian .bklux-related a { color: var(--obs-silver) !important; }
.obsidian .bklux-related a:hover { color: #fff !important; }
.obsidian .bklux-byline { color: var(--obs-faint) !important; font-size: 11px !important; letter-spacing: 0.1em; text-transform: uppercase; }
.obsidian .bklux-byline strong { color: var(--obs-silver) !important; }

/* Contact form — recast from gold-on-cream to Obsidian glass */
.obsidian .bklux-form {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--obs-line) !important;
  border-radius: 20px !important; padding: clamp(22px, 3vw, 38px) !important;
  max-width: 100% !important; margin: 0 !important;
}
.obsidian .bklux-form h3 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-style: italic !important; color: #fff !important; font-size: 26px !important;
}
.obsidian .bklux-form label {
  color: var(--obs-muted) !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 10px !important; letter-spacing: 0.22em; text-transform: uppercase;
}
.obsidian .bklux-form input, .obsidian .bklux-form textarea {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--obs-line) !important;
  border-radius: 12px !important; color: #fff !important;
  font-family: 'Inter', sans-serif !important; font-size: 15px !important;
  padding: 13px 15px !important;
}
.obsidian .bklux-form input:focus, .obsidian .bklux-form textarea:focus {
  border-color: rgba(255,255,255,0.28) !important; outline: none !important;
}
.obsidian .bklux-form input::placeholder, .obsidian .bklux-form textarea::placeholder { color: var(--obs-faint) !important; }
.obsidian .bklux-form .bftk-btn,
.obsidian .bklux-form button[type="submit"],
.obsidian .bklux-form .bklux-cta {
  background: var(--obs-silver-grad) !important; color: #000 !important;
  border: 1px solid rgba(255,255,255,0.4) !important; border-radius: 12px !important;
  font-family: 'Geist Mono', monospace !important; font-size: 11px !important;
  letter-spacing: 0.2em !important; text-transform: uppercase; font-weight: 700 !important;
  padding: 16px 28px !important; transition: all 0.3s var(--obs-ease) !important;
}
.obsidian .bklux-form .bklux-cta:hover { box-shadow: 0 0 20px rgba(255,255,255,0.15); transform: translateY(-1px); }
.obsidian .bklux-form .bklux-cta.ghost2,
.obsidian .bklux-form .ghost2 {
  background: transparent !important; color: var(--obs-silver) !important;
  border: 1px solid var(--obs-line-strong) !important;
}
.obsidian .bklux-msg { color: #fff !important; }
.obsidian .bklux-form p { color: var(--obs-faint) !important; }
.obs-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: center; width: fit-content;
  border: 1px solid var(--obs-line); border-radius: 100px;
  padding: 9px 18px; background: rgba(255,255,255,0.03);
  margin-bottom: 30px;
}
.obs-eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: #fff; display: inline-block; }
.obs-h1 {
  font-size: clamp(42px, 10vw, 140px) !important;
  margin: 0 0 28px; text-wrap: balance;
}
.obs-h1 em { font-style: italic !important; }
.obs-lede {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-style: italic !important;
  font-size: clamp(17px, 2.2vw, 23px) !important;
  line-height: 1.5 !important;
  color: var(--obs-silver) !important;
  max-width: 820px; margin: 0 auto 18px;
}
.obs-sub {
  font-size: 15px !important; line-height: 1.75 !important;
  max-width: 760px; margin: 0 auto 36px !important;
}
.obs-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 54px; position: relative; z-index: 2; }
.obs-btn-silver {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
  background: var(--obs-silver-grad) !important; color: #000 !important;
  padding: 17px 32px; border-radius: 14px; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.4); transition: all 0.3s var(--obs-ease);
  display: inline-flex; align-items: center; gap: 10px;
}
.obs-btn-silver:hover { transform: translateY(-1px); box-shadow: 0 0 20px rgba(255,255,255,0.15); color: #000 !important; }
.obs-btn-ghost {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  color: var(--obs-silver) !important; padding: 17px 32px; border-radius: 14px;
  border: 1px solid var(--obs-line-strong); text-decoration: none;
  background: rgba(255,255,255,0.02); backdrop-filter: blur(24px);
  transition: all 0.3s var(--obs-ease); display: inline-flex; align-items: center; gap: 10px;
}
.obs-btn-ghost:hover { border-color: rgba(255,255,255,0.35); color: #fff !important; }
.obs-meta-bar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--obs-line); padding-top: 30px; gap: 24px;
  text-align: left; position: relative; z-index: 2;
}
.obs-meta-bar > div + div { border-left: 1px solid var(--obs-line); padding-left: 24px; }
.obs-meta-k { font-family: 'Geist Mono', monospace !important; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--obs-faint) !important; margin-bottom: 10px; display: block; }
.obs-meta-v { font-size: 13.5px; line-height: 1.65; color: var(--obs-silver) !important; margin: 0; }

/* Hero image credit strip. Sits at the BOTTOM of the hero, above the meta bar
   clearance, so it cannot collide with the eyebrow pill in normal flow. */
.obs-hero-media-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(20px, 2.6vw, 34px) clamp(18px, 2.2vw, 26px);
  pointer-events: none;
}
.obs-hero-media-l, .obs-hero-media-r {
  font-family: 'Geist Mono', monospace !important;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  margin: 0 !important; white-space: nowrap;
}
.obs-hero-media-l { color: rgba(255,255,255,0.9) !important; }
.obs-hero-media-r { color: rgba(255,255,255,0.5) !important; }
.obs-hero-media-l span { color: rgba(255,255,255,0.5); }
/* Keep the strip from sitting on the meta-bar row */
.obs-hero-glass .obs-meta-bar { margin-bottom: 26px; }
@media (max-width: 760px) {
  .obs-hero-media-cap { justify-content: center; text-align: center; }
  .obs-hero-media-r { display: none; }
}

/* Capture form */

/* Data strip */
.obs-strip { border-top: 1px solid var(--obs-line); border-bottom: 1px solid var(--obs-line); margin: 40px 0 0; }
.obs-strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.obs-strip-cell { padding: 26px 28px; border-right: 1px solid var(--obs-line); }
.obs-strip-cell:last-child { border-right: 0; }
.obs-strip-num { font-family: 'DM Serif Display', Georgia, serif !important; font-style: italic !important; font-size: clamp(26px, 3vw, 40px) !important; color: #fff !important; line-height: 1 !important; margin-bottom: 10px; }

/* Sections */
.obs-section { padding: clamp(60px, 8vw, 120px) 0; }
.obs-sec-head { max-width: 860px; margin-bottom: 54px; }
.obs-sec-head.center { margin-inline: auto; text-align: center; }
.obs-h2 { font-size: clamp(34px, 5.5vw, 76px) !important; margin: 16px 0 18px !important; text-wrap: balance; }
.obs-sec-sub { font-size: 15.5px !important; line-height: 1.75 !important; margin: 0 !important; }

/* Bento */
.obs-bento { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--obs-line); border-left: 1px solid var(--obs-line); }
.obs-card {
  border-right: 1px solid var(--obs-line); border-bottom: 1px solid var(--obs-line);
  padding: 30px 26px 32px; background: transparent;
  transition: background 0.5s var(--obs-ease), border-color 0.5s var(--obs-ease);
  position: relative; min-height: 280px; display: flex; flex-direction: column;
}
.obs-card:hover { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.2); }
.obs-card-idx { font-family: 'Geist Mono', monospace !important; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--obs-faint) !important; margin-bottom: 22px; display: block; }
.obs-card h3 { font-size: 27px !important; margin: 0 0 14px !important; line-height: 1.02 !important; }
.obs-card p { font-size: 13.5px !important; line-height: 1.7 !important; margin: 0 !important; }
.obs-card-link { margin-top: auto; padding-top: 22px; font-family: 'Geist Mono', monospace !important; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--obs-silver) !important; text-decoration: none; }
.obs-card-link:hover { color: #fff !important; }

/* Editorial / value */
.obs-editorial { background: rgba(255,255,255,0.01); border-top: 1px solid var(--obs-line); border-bottom: 1px solid var(--obs-line); }
.obs-quote-big { font-size: clamp(30px, 4.6vw, 62px) !important; text-align: center; max-width: 1000px; margin: 0 auto !important; line-height: 1.08 !important; text-wrap: balance; }
.obs-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 60px; border-top: 1px solid var(--obs-line); }
.obs-two-col > div { padding: 36px 0 0 64px; border-left: 1px solid var(--obs-line); }
.obs-two-col > div:first-child { border-left: 0; padding-left: 0; padding-right: 64px; }
.obs-two-col p { font-size: 15px !important; line-height: 1.8 !important; }

/* Registry */
.obs-reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--obs-line); border: 1px solid var(--obs-line); border-radius: 16px; overflow: hidden; position: relative; }
.obs-reg-item {
  background: var(--obs-bg-2); padding: 20px 22px; display: flex; align-items: center; gap: 14px;
  text-decoration: none; transition: all 0.3s var(--obs-ease);
}
.obs-reg-item:hover { background: rgba(255,255,255,0.03); }
.obs-reg-item:hover .obs-reg-title { color: #fff !important; transform: translateX(4px); }
.obs-reg-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--obs-silver-grad); color: #000; display: flex; align-items: center; justify-content: center; font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 700; flex-shrink: 0; filter: grayscale(1) contrast(1.25); transition: transform 0.3s var(--obs-ease); }
.obs-reg-item:hover .obs-reg-avatar { transform: scale(1.1); }
.obs-reg-title { font-family: 'Geist Mono', monospace !important; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--obs-muted) !important; transition: all 0.3s var(--obs-ease); line-height: 1.5; }
.obs-reg-deco { position: absolute; right: -20px; bottom: -30px; font-size: 160px; opacity: 0.05; color: #fff; pointer-events: none; line-height: 1; }

/* Final CTA */
.obs-final {
  background: var(--obs-glass); backdrop-filter: blur(24px);
  border: 1px solid var(--obs-line); border-radius: 2rem;
  padding: clamp(48px, 7vw, 100px) clamp(28px, 5vw, 80px);
  text-align: center; position: relative; overflow: hidden;
}

/* Footer */
.obs-footer { border-top: 1px solid var(--obs-line); padding: 70px 0 120px; }
.obs-foot-grid { display: grid; grid-template-columns: 1.2fr 2fr; gap: 64px; margin-bottom: 56px; }
.obs-foot-brand p { font-size: 14px !important; line-height: 1.7 !important; max-width: 300px; }
.obs-foot-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.obs-foot-nav h4 { font-family: 'Geist Mono', monospace !important; font-style: normal !important; font-size: 10px !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--obs-faint) !important; margin: 0 0 16px !important; line-height: 1.5 !important; }
.obs-foot-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.obs-foot-nav a { font-size: 13.5px; color: var(--obs-muted) !important; text-decoration: none; transition: color 0.2s; }
.obs-foot-nav a:hover { color: #fff !important; }
.obs-foot-copy { border-top: 1px solid var(--obs-line); padding-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.obs-foot-copy p { font-family: 'Geist Mono', monospace !important; font-size: 10px !important; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 !important; }

/* Floating mobile nav */
body.obsidian .obs-mnav {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(140%); opacity: 0;
  z-index: 200; display: flex; align-items: center; gap: 4px;
  background: rgba(8,8,8,0.85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--obs-line-strong); border-radius: 100px; padding: 8px;
  transition: transform 0.6s var(--obs-ease), opacity 0.6s var(--obs-ease);
}
body.obsidian .obs-mnav.is-show { transform: translateX(-50%) translateY(0); opacity: 1; }
body.obsidian .obs-mnav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: 'Geist Mono', monospace !important; font-size: 8px !important;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--obs-muted) !important;
  text-decoration: none; padding: 9px 14px; border-radius: 100px;
}
body.obsidian .obs-mnav a.obs-mnav-cta { background: #fff !important; color: #000 !important; font-weight: 700; padding: 10px 20px; }
body.obsidian .obs-mnav a i { font-size: 17px; font-style: normal; line-height: 1; }

/* Legacy overrides for obsidian pages */
body.obsidian .site-header, body.obsidian .site-footer, body.obsidian .bftk-footer { display: none !important; }

/* ---- Floating WhatsApp chat ---- */
body.obsidian .obs-wa {
  position: fixed; right: 24px; bottom: 24px; z-index: 205;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  text-decoration: none;
  background: rgba(8, 8, 8, 0.82);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(212, 175, 55, 0.42);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  transition: transform 0.45s var(--obs-ease), border-color 0.35s, box-shadow 0.45s var(--obs-ease);
}
body.obsidian .obs-wa-icon {
  font-size: 30px; line-height: 1; color: #d4af37;
  transition: transform 0.45s var(--obs-ease);
}
/* Soft gold pulse, matching the BK monogram accent */
body.obsidian .obs-wa-ring {
  position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.5);
  animation: obs-wa-pulse 2.8s var(--obs-ease) infinite;
}
@keyframes obs-wa-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.34); opacity: 0; }
  100% { transform: scale(1.34); opacity: 0; }
}
body.obsidian .obs-wa:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.85);
  box-shadow: 0 0 28px rgba(212, 175, 55, 0.28), 0 10px 34px rgba(0, 0, 0, 0.55);
}
body.obsidian .obs-wa:hover .obs-wa-icon { transform: scale(1.08); }
/* Number label slides out on hover — desktop only */
body.obsidian .obs-wa-label {
  position: absolute; right: calc(100% + 12px);
  white-space: nowrap; color: rgba(255, 255, 255, 0.88) !important;
  background: rgba(8, 8, 8, 0.9);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--obs-line-strong); border-radius: 100px;
  padding: 9px 16px; opacity: 0; pointer-events: none;
  transform: translateX(8px);
  transition: opacity 0.35s var(--obs-ease), transform 0.35s var(--obs-ease);
}
body.obsidian .obs-wa:hover .obs-wa-label, body.obsidian .obs-wa:focus-visible .obs-wa-label { opacity: 1; transform: none; }
@media (max-width: 900px) {
  body.obsidian .obs-wa { right: 16px; bottom: 88px; width: 52px; height: 52px; }
  body.obsidian .obs-wa-icon { font-size: 27px; }
  body.obsidian .obs-wa-label { display: none; }
}

/* Responsive */
@media (max-width: 1100px) {
  .obs-bento { grid-template-columns: repeat(2, 1fr); }
  .obs-gallery { grid-template-columns: repeat(2, 1fr); }
  .obs-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .obs-strip-cell:nth-child(2) { border-right: 0; }
  .obs-strip-cell { border-bottom: 1px solid var(--obs-line); }
  .obs-foot-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 900px) {
  .obs-nav-links { display: none !important; }
  .obs-nav .obs-join { display: none; }
  .obs-burger { display: block; }
  .obs-nav-links.is-open {
    display: flex !important; position: fixed; top: 70px; left: 4vw; right: 4vw;
    flex-direction: column; align-items: stretch; border-radius: 20px; padding: 12px;
    background: rgba(13,13,15,0.98); z-index: 150;
  }
  .obs-two-col { grid-template-columns: 1fr; }
  .obs-two-col > div { border-left: 0 !important; padding: 28px 0 0 !important; }
  .obs-meta-bar { grid-template-columns: 1fr; }
  .obs-meta-bar > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--obs-line); padding-top: 20px; }
  .obs-hero-glass { border-radius: 2rem; min-height: clamp(460px, 58vh, 640px); }
  .obs-hero-media-cap { padding: 18px 18px 0; }
  .obs-foot-nav { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .obs-bento { grid-template-columns: 1fr; }
  .obs-card { min-height: 0; }
  .obs-gallery { grid-template-columns: 1fr; }
  .obs-strip-inner { grid-template-columns: 1fr; }
  .obs-strip-cell { border-right: 0; }
  .obsidian .bklux-related ul { columns: 1; }
  .obs-chapter ul, .obs-chapter ol { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .obs-reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---- FAQ category tabs (long Q&A pages: /faq/ etc.) ---------------------- */
.obsidian .obs-tabbar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 6px; padding-bottom: 2px;
}
.obsidian .obs-tab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 100px;
  border: 1px solid var(--obs-line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--obs-muted);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background 0.3s var(--obs-ease), color 0.3s var(--obs-ease), border-color 0.3s var(--obs-ease);
}
.obsidian .obs-tab:hover { border-color: var(--obs-line-strong); color: #fff; }
.obsidian .obs-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.obsidian .obs-tab.is-active {
  background: var(--obs-silver-grad); border-color: transparent; color: #0b0b0d;
}
.obsidian .obs-tab-n { font-size: 10px; letter-spacing: 0.12em; opacity: 0.55; }
.obsidian .obs-tab.is-active .obs-tab-n { color: #0b0b0d; opacity: 0.5; }

/* Panels. Without JS every panel stays open and keeps its caption, so the
   page still reads top to bottom; .is-js is added by the tab script. */
.obsidian .obs-tab-head { margin: 32px 0 2px; color: var(--obs-faint) !important; }
.obsidian .obs-tabs.is-js .obs-tab-head { display: none; }
.obsidian .obs-tabs.is-js .obs-tabpanel { display: none; }
.obsidian .obs-tabs.is-js .obs-tabpanel.is-active {
  display: block; animation: obs-tab-in 0.45s var(--obs-ease) both;
}
@keyframes obs-tab-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Related-links mesh, parked under the registry grid. */
.obsidian .obs-reg-aside { margin-top: 30px; }

@media (max-width: 760px) {
  .obsidian .obs-tabbar {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .obsidian .obs-tabbar::-webkit-scrollbar { display: none; }
  .obsidian .obs-tab { flex: 0 0 auto; padding: 10px 15px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .obsidian .obs-tabs.is-js .obs-tabpanel.is-active { animation: none; }
}

/* Phone: keep the +/- marker pinned top-right instead of letting it wrap onto
   a line of its own under the question. */
@media (max-width: 700px) {
  .obsidian .obs-row-s { position: relative; padding-right: 28px; }
  .obsidian .obs-row-s::after { position: absolute; top: 20px; right: 2px; margin-left: 0; }
}