/* Obor Kuasa brand system v1: image-accurate pixel wordmark plus signal tower lockup. */
.obor-v19-pixel-wordmark {
  display: block;
  width: min(100%, 12rem);
  aspect-ratio: 471 / 41;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  background: url("../images/obor-kuasa-pixel-wordmark-v1.png") left center / 100% 100% no-repeat;
  text-shadow: none !important;
}

.obor-v19-brand-lockup {
  --obor-v19-brand-ivory: #fffed5;
  --obor-v19-brand-amber: #e9a62f;
  --obor-v19-brand-tower-color: var(--obor-v19-brand-amber);
  --obor-v19-brand-beacon-top: -.48rem;
  --obor-v19-brand-beacon-size: 1.55rem;
  --obor-v19-brand-wordmark-width: clamp(10.5rem, 14vw, 14.5rem);
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: clamp(.45rem, .8vw, .72rem);
  color: var(--obor-v19-brand-ivory);
  text-decoration: none;
}

.obor-v19-brand-lockup__mark {
  position: relative;
  display: block;
  flex: 0 0 clamp(1.25rem, 1.8vw, 1.65rem);
  width: clamp(1.25rem, 1.8vw, 1.65rem);
  height: clamp(2rem, 2.9vw, 2.65rem);
}

.obor-v19-brand-lockup__tower {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  fill: none;
  object-fit: contain;
  stroke: var(--obor-v19-brand-tower-color);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.45;
  filter: brightness(0) saturate(100%) invert(76%) sepia(83%) saturate(651%) hue-rotate(345deg) brightness(96%) contrast(96%) drop-shadow(0 0 .35rem rgba(255,157,29,.18));
}

.obor-v19-brand-lockup__beacon {
  position: absolute;
  top: var(--obor-v19-brand-beacon-top);
  left: 50%;
  display: block !important;
  width: var(--obor-v19-brand-beacon-size) !important;
  height: var(--obor-v19-brand-beacon-size) !important;
  object-fit: contain;
  transform: translateX(-50%);
  filter: brightness(.95) drop-shadow(0 0 .35rem rgba(255,181,44,.32));
}

.obor-v19-brand-lockup__copy {
  display: grid;
  min-width: 0;
  gap: .24rem;
}

.obor-v19-brand-lockup__wordmark {
  display: block;
  width: min(100%, var(--obor-v19-brand-wordmark-width));
  aspect-ratio: 471 / 41;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  background: url("../images/obor-kuasa-pixel-wordmark-v1.png") left center / 100% 100% no-repeat;
  text-shadow: none !important;
}

.obor-v19-brand-lockup__tagline {
  display: block;
  color: var(--obor-v19-brand-amber);
  font-family: var(--mono, monospace);
  font-size: clamp(.37rem, .48vw, .52rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .34em;
  white-space: nowrap;
}

.obor-v19-brand-lockup--light {
  --obor-v19-brand-ivory: #101b2b;
  --obor-v19-brand-amber: #101b2b;
}

.obor-v19-brand-lockup--light .obor-v19-brand-lockup__wordmark {
  filter: invert(1) saturate(.45) brightness(.32);
}

/* Page tones: recolor the signal tower and beacon only. The pixel wordmark
   keeps its canonical surface treatment; the tagline keeps its baseline
   amber/deep-ink treatment instead of following the page tone. */
.obor-v19-brand-lockup--amber {
  --obor-v19-brand-tower-color: #e9a62f;
}

.obor-v19-brand-lockup--blue {
  --obor-v19-brand-tower-color: #1558d6;
}

.obor-v19-brand-lockup--cyan {
  --obor-v19-brand-tower-color: #67e8f9;
}

.obor-v19-brand-lockup--green {
  --obor-v19-brand-tower-color: #137333;
}

.obor-v19-brand-lockup--indigo {
  --obor-v19-brand-tower-color: #3341a8;
}

.obor-v19-brand-lockup--purple {
  --obor-v19-brand-tower-color: #6d3bb5;
}

.obor-v19-brand-lockup--red {
  --obor-v19-brand-tower-color: #a52222;
}

.obor-v19-brand-lockup--sky {
  --obor-v19-brand-tower-color: #0369a1;
}

.obor-v19-brand-lockup--teal {
  --obor-v19-brand-tower-color: #006d70;
}

.obor-v19-brand-lockup:is(
    .obor-v19-brand-lockup--amber,
    .obor-v19-brand-lockup--blue,
    .obor-v19-brand-lockup--cyan,
    .obor-v19-brand-lockup--green,
    .obor-v19-brand-lockup--indigo,
    .obor-v19-brand-lockup--purple,
    .obor-v19-brand-lockup--red,
    .obor-v19-brand-lockup--sky,
    .obor-v19-brand-lockup--teal
  ) .obor-v19-brand-lockup__tower,
.obor-v19-brand-lockup:is(
    .obor-v19-brand-lockup--amber,
    .obor-v19-brand-lockup--blue,
    .obor-v19-brand-lockup--cyan,
    .obor-v19-brand-lockup--green,
    .obor-v19-brand-lockup--indigo,
    .obor-v19-brand-lockup--purple,
    .obor-v19-brand-lockup--red,
    .obor-v19-brand-lockup--sky,
    .obor-v19-brand-lockup--teal
  ) .obor-v19-brand-lockup__beacon {
  opacity: 0 !important;
  filter: none !important;
}

.obor-v19-brand-lockup:is(
    .obor-v19-brand-lockup--amber,
    .obor-v19-brand-lockup--blue,
    .obor-v19-brand-lockup--cyan,
    .obor-v19-brand-lockup--green,
    .obor-v19-brand-lockup--indigo,
    .obor-v19-brand-lockup--purple,
    .obor-v19-brand-lockup--red,
    .obor-v19-brand-lockup--sky,
    .obor-v19-brand-lockup--teal
  ) .obor-v19-brand-lockup__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--obor-v19-brand-tower-color);
  pointer-events: none;
  -webkit-mask: url("../images/obor-signal-tower-mark-v1.svg") center / 100% 100% no-repeat;
  mask: url("../images/obor-signal-tower-mark-v1.svg") center / 100% 100% no-repeat;
}

.obor-v19-brand-lockup:is(
    .obor-v19-brand-lockup--amber,
    .obor-v19-brand-lockup--blue,
    .obor-v19-brand-lockup--cyan,
    .obor-v19-brand-lockup--green,
    .obor-v19-brand-lockup--indigo,
    .obor-v19-brand-lockup--purple,
    .obor-v19-brand-lockup--red,
    .obor-v19-brand-lockup--sky,
    .obor-v19-brand-lockup--teal
  ) .obor-v19-brand-lockup__mark::after {
  content: "";
  position: absolute;
  top: var(--obor-v19-brand-beacon-top);
  left: 50%;
  width: var(--obor-v19-brand-beacon-size);
  height: var(--obor-v19-brand-beacon-size);
  background: var(--obor-v19-brand-tower-color);
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-mask: url("../images/obor-organic-beacon-flame-v6.png") center / contain no-repeat;
  mask: url("../images/obor-organic-beacon-flame-v6.png") center / contain no-repeat;
}

.obor-v19-brand-lockup--footer {
  --obor-v19-brand-wordmark-width: clamp(11rem, 17vw, 17rem);
  --obor-v19-brand-beacon-top: -.58rem;
  --obor-v19-brand-beacon-size: 1.8rem;
}

.obor-v19-brand-lockup--footer .obor-v19-brand-lockup__mark {
  flex-basis: clamp(1.5rem, 2.1vw, 1.9rem);
  width: clamp(1.5rem, 2.1vw, 1.9rem);
  height: clamp(2.35rem, 3.55vw, 3.25rem);
}

.obor-v19-demo .mobile-footer-wordmark {
  display: block;
  width: min(72vw, 18rem);
  aspect-ratio: 471 / 41;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background: url("../images/obor-kuasa-pixel-wordmark-v1.png") left center / 100% 100% no-repeat;
}

.obor-v19-demo .root .obor-v19-brand-lockup {
  gap: .58rem;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
}

.obor-v19-demo .root .footerBrand.obor-v19-brand-lockup {
  letter-spacing: 0;
}

.obor-v19-demo .root .header .brand.obor-v19-brand-lockup .obor-v19-brand-lockup__tower {
  filter: brightness(0) saturate(100%) invert(76%) sepia(83%) saturate(651%) hue-rotate(345deg) brightness(96%) contrast(96%) drop-shadow(0 0 .35rem rgba(255,157,29,.18));
}

.obor-v19-demo .root .header .brand.obor-v19-brand-lockup .obor-v19-brand-lockup__beacon {
  filter: brightness(.95) drop-shadow(0 0 .35rem rgba(255,181,44,.32));
}

body.obor-server-room-article-page .sr-article-brand.obor-v19-brand-lockup {
  --obor-v19-brand-beacon-top: -.45rem;
  --obor-v19-brand-beacon-size: 1.5rem;
  gap: .58rem;
  letter-spacing: 0;
}

body.obor-server-room-article-page .sr-article-brand.obor-v19-brand-lockup .obor-v19-brand-lockup__mark {
  flex-basis: 1.45rem;
  width: 1.45rem;
  height: 2.3rem;
}

.obor-field-ledger .rn-mark.obor-v19-pixel-wordmark { width: 8.5rem; }
.obor-field-ledger .mega-head .mh-mark.obor-v19-pixel-wordmark { width: 9rem; }
.obor-field-ledger .team-gates-wordmark.obor-v19-pixel-wordmark { width: 8.5rem; }
.obor-field-ledger .journey-v4__brand b.obor-v19-pixel-wordmark { width: 6.3rem; }
.sa-topline > span { display: block; width: 7.8rem; aspect-ratio: 471 / 41; color: transparent; font-size: 0; line-height: 0; background: url("../images/obor-kuasa-pixel-wordmark-v1.png") left center / 100% 100% no-repeat; }

.obor-field-ledger footer.site-footer .site-footer__masthead .fmark {
  width: clamp(13rem, 17vw, 19rem);
  aspect-ratio: 471 / 41;
  object-fit: contain;
  object-position: left center;
}

.obor-field-ledger footer.site-footer .site-footer__wordmark.obor-v19-pixel-wordmark {
  position: relative;
  overflow: visible;
  isolation: isolate;
  width: min(88vw, 72rem);
  background: transparent !important;
  margin: clamp(2.8rem, 5.5vw, 5.5rem) 0 clamp(3.2rem, 6vw, 6rem);
}

/* The particle field is the footer wordmark surface; never paint the static asset behind it. */
.obor-field-ledger footer.site-footer .site-footer__wordmark[data-obor-particles] {
  background-image: none !important;
  background-color: transparent !important;
}

.obor-field-ledger footer.site-footer .site-footer__wordmark[data-obor-particles] > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 1;
  transition: opacity .12s linear;
}

.obor-field-ledger footer.site-footer .site-footer__wordmark[data-obor-particles] canvas {
  display: block;
}

@media (max-width: 900px) {
  .obor-v19-brand-lockup {
    --obor-v19-brand-wordmark-width: clamp(8.25rem, 34vw, 11rem);
    --obor-v19-brand-beacon-top: -.4rem;
    --obor-v19-brand-beacon-size: 1.25rem;
    gap: .45rem;
  }

  .obor-v19-brand-lockup__mark {
    flex-basis: 1.12rem;
    width: 1.12rem;
    height: 1.82rem;
  }

  .obor-v19-brand-lockup__copy { gap: .18rem; }
  .obor-v19-brand-lockup__tagline { font-size: .34rem; letter-spacing: .27em; }
  .obor-v19-brand-lockup--footer .obor-v19-brand-lockup__mark { flex-basis: 1.35rem; width: 1.35rem; height: 2.15rem; }
  .obor-v19-brand-lockup--footer { --obor-v19-brand-beacon-top: -.46rem; --obor-v19-brand-beacon-size: 1.5rem; }
  .obor-field-ledger footer.site-footer .site-footer__wordmark.obor-v19-pixel-wordmark { width: min(94vw, 38rem); margin: 3.5rem 0 4rem; }
}

/* Field Notes hub and story pages are static HTML routed through case-study.php. */
.brand-logo.obor-v19-field-brand {
  --obor-field-ivory: #fffed5;
  --obor-field-amber: #e9a62f;
  --obor-field-color: #e9a62f;
  --obor-field-beacon-top: -.4rem;
  --obor-field-beacon-size: 1.35rem;
  display: inline-flex;
  align-items: center;
  width: auto !important;
  max-width: min(42vw, 18rem);
  height: auto !important;
  max-height: none !important;
  gap: .48rem;
  color: var(--obor-field-ivory);
  line-height: 1;
  filter: none !important;
}

.obor-v19-field-brand__mark {
  position: relative;
  display: block;
  flex: 0 0 1.35rem;
  width: 1.35rem;
  height: 2.2rem;
}

.obor-v19-field-brand__tower {
  display: block;
  /* Protect the tower geometry from legacy header image rules. */
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(76%) sepia(83%) saturate(651%) hue-rotate(345deg) brightness(96%) contrast(96%) drop-shadow(0 0 .35rem rgba(255,157,29,.18));
}

.obor-v19-field-brand__beacon {
  position: absolute;
  top: var(--obor-field-beacon-top);
  left: 50%;
  /* Keep the flame square so its optical bounds stay on the mast tip. */
  width: var(--obor-field-beacon-size) !important;
  height: var(--obor-field-beacon-size) !important;
  object-fit: contain;
  transform: translateX(-50%);
  filter: brightness(.95) drop-shadow(0 0 .35rem rgba(255,181,44,.32));
}

.obor-v19-field-brand__copy {
  display: grid;
  min-width: 0;
  gap: .18rem;
}

.obor-v19-field-brand__wordmark {
  display: block;
  width: clamp(9rem, 13vw, 12.5rem);
  aspect-ratio: 471 / 41;
  color: transparent;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  background: url("../images/obor-kuasa-pixel-wordmark-v1.png") left center / 100% 100% no-repeat;
}

.obor-v19-field-brand__tagline {
  display: block;
  color: var(--obor-field-amber);
  font-family: var(--mono, monospace);
  font-size: .32rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .27em;
  white-space: nowrap;
}

.hub-page .brand-logo.obor-v19-field-brand,
.footer-brand .brand-logo.obor-v19-field-brand,
.site-header .brand-logo.obor-v19-field-brand { filter: none !important; }

.hub-page .obor-v19-field-brand__wordmark,
.footer-brand .obor-v19-field-brand__wordmark { filter: invert(1) saturate(.45) brightness(.32); }

/* Field Notes uses the same tone vocabulary as the main page shells. The
   hub and each story footer are paper surfaces, so they use dark semantic
   colors; story hero headers remain the original light treatment over film. */
.hub-page .brand-logo.obor-v19-field-brand,
.footer-brand .brand-logo.obor-v19-field-brand {
  --obor-field-ivory: #3341a8;
  --obor-field-amber: #101b2b;
  --obor-field-color: #3341a8;
}

body:has(.story-page.story-hotels-more) .footer-brand .brand-logo.obor-v19-field-brand {
  --obor-field-ivory: #006d70;
  --obor-field-amber: #101b2b;
  --obor-field-color: #006d70;
}

body:has(.story-page.story-milestone-production) .footer-brand .brand-logo.obor-v19-field-brand {
  --obor-field-ivory: #1558d6;
  --obor-field-amber: #101b2b;
  --obor-field-color: #1558d6;
}

body:has(.story-page.story-mbf-protection) .footer-brand .brand-logo.obor-v19-field-brand {
  --obor-field-ivory: #a52222;
  --obor-field-amber: #101b2b;
  --obor-field-color: #a52222;
}

body:has(.story-page.story-nextgreen) .footer-brand .brand-logo.obor-v19-field-brand {
  --obor-field-ivory: #137333;
  --obor-field-amber: #101b2b;
  --obor-field-color: #137333;
}

body:has(.story-page.story-usahasama-emas) .footer-brand .brand-logo.obor-v19-field-brand {
  --obor-field-ivory: #6d3bb5;
  --obor-field-amber: #101b2b;
  --obor-field-color: #6d3bb5;
}

body:has(.story-page.story-havi-logistics) .footer-brand .brand-logo.obor-v19-field-brand {
  --obor-field-ivory: #0369a1;
  --obor-field-amber: #101b2b;
  --obor-field-color: #0369a1;
}

.hub-page .brand-logo.obor-v19-field-brand .obor-v19-field-brand__tower,
.hub-page .brand-logo.obor-v19-field-brand .obor-v19-field-brand__beacon,
.footer-brand .brand-logo.obor-v19-field-brand .obor-v19-field-brand__tower,
.footer-brand .brand-logo.obor-v19-field-brand .obor-v19-field-brand__beacon {
  opacity: 0 !important;
  filter: none !important;
}

.hub-page .brand-logo.obor-v19-field-brand .obor-v19-field-brand__mark::before,
.footer-brand .brand-logo.obor-v19-field-brand .obor-v19-field-brand__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--obor-field-color);
  pointer-events: none;
  -webkit-mask: url("../images/obor-signal-tower-mark-v1.svg") center / 100% 100% no-repeat;
  mask: url("../images/obor-signal-tower-mark-v1.svg") center / 100% 100% no-repeat;
}

.hub-page .brand-logo.obor-v19-field-brand .obor-v19-field-brand__mark::after,
.footer-brand .brand-logo.obor-v19-field-brand .obor-v19-field-brand__mark::after {
  content: "";
  position: absolute;
  top: var(--obor-field-beacon-top);
  left: 50%;
  width: var(--obor-field-beacon-size);
  height: var(--obor-field-beacon-size);
  background: var(--obor-field-color);
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-mask: url("../images/obor-organic-beacon-flame-v6.png") center / contain no-repeat;
  mask: url("../images/obor-organic-beacon-flame-v6.png") center / contain no-repeat;
}

@media (max-width: 700px) {
  .brand-logo.obor-v19-field-brand { max-width: min(72vw, 15rem); gap: .36rem; }
  .obor-v19-field-brand__mark { flex-basis: 1rem; width: 1rem; height: 1.7rem; }
  .brand-logo.obor-v19-field-brand { --obor-field-beacon-top: -.32rem; --obor-field-beacon-size: 1.05rem; }
  .obor-v19-field-brand__wordmark { width: clamp(7.5rem, 42vw, 10rem); }
  .obor-v19-field-brand__tagline { font-size: .27rem; letter-spacing: .19em; }
}

/* Independent case-study routes inherit legacy nav rules; keep the approved
   Image #2 spatial contract: tower left, centered beacon, pixel wordmark right. */
.okcs-nav a.okcs-nav__brand.obor-v19-brand-lockup {
  display: inline-flex !important;
  align-items: center;
  gap: .58rem;
  min-height: 44px;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0 !important;
  line-height: 1;
}

.okcs-nav a.okcs-nav__brand.obor-v19-brand-lockup .obor-v19-brand-lockup__mark {
  display: block;
  flex: 0 0 1.65rem;
  width: 1.65rem;
  height: 2.65rem;
}

.okcs-nav a.okcs-nav__brand.obor-v19-brand-lockup .obor-v19-brand-lockup__copy {
  display: grid !important;
  min-width: 0;
  gap: .24rem;
  letter-spacing: 0 !important;
}

.okcs-nav a.okcs-nav__brand.obor-v19-brand-lockup .obor-v19-brand-lockup__wordmark {
  width: min(100%, var(--obor-v19-brand-wordmark-width));
  letter-spacing: 0 !important;
}

.okcs-nav a.okcs-nav__brand.obor-v19-brand-lockup .obor-v19-brand-lockup__tagline {
  font-size: clamp(.37rem, .48vw, .52rem) !important;
  letter-spacing: .34em !important;
}

@media (max-width: 767px) {
  .okcs-nav a.okcs-nav__brand.obor-v19-brand-lockup {
    gap: .45rem;
  }

  .okcs-nav a.okcs-nav__brand.obor-v19-brand-lockup .obor-v19-brand-lockup__mark {
    flex-basis: 1.12rem;
    width: 1.12rem;
    height: 1.82rem;
  }

  .okcs-nav a.okcs-nav__brand.obor-v19-brand-lockup .obor-v19-brand-lockup__beacon {
    top: -.4rem;
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  .okcs-nav a.okcs-nav__brand.obor-v19-brand-lockup .obor-v19-brand-lockup__wordmark {
    width: clamp(8.25rem, 34vw, 11rem);
  }

  .okcs-nav a.okcs-nav__brand.obor-v19-brand-lockup .obor-v19-brand-lockup__tagline {
    font-size: .34rem !important;
    letter-spacing: .27em !important;
  }
}