/* ==========================================================================
   brand.css — the three company chapters.
   One layout, three colour contexts. `--accent` is set per section and
   every child reads from it.
   ========================================================================== */

.brand { position: relative; overflow: clip; }

.brand__inner {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
}

/* Whichever column is shorter pins itself while the longer one scrolls past.
   Marked in the markup with .brand__sticky so it can differ per chapter. */
@media (min-width: 1000px) {
  .brand__sticky {
    position: sticky;
    top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem));
  }

  .brand__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(3rem, 6vw, 6rem);
  }
  .brand--flip .brand__visual { order: -1; }
}

.brand__head { display: grid; gap: var(--s-5); position: relative; }

.brand__title {
  font-family: var(--f-display);
  font-size: var(--fs-3xl);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.brand__title em { color: var(--accent); }

.brand__legal {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.brand__promise {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--fs-xl);
  font-weight: 300;
  color: var(--accent);
  line-height: 1.24;
}

/* --- Capability list — reads like a ledger, not a feature grid ------------ */

.caps { display: grid; }

.caps__row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
  transition: padding-left var(--d-mid) var(--e-out), color var(--d-mid) var(--e-out);
}
.caps__row:last-child { border-bottom: 1px solid var(--line); }
.caps__row:hover { padding-left: var(--s-3); color: var(--accent); }

.caps__no {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--fg-faint);
  letter-spacing: 0.08em;
}
.caps__row:hover .caps__no { color: var(--accent); }

.caps__label { font-size: var(--fs-base); font-weight: 300; }
.caps__note { display: block; font-size: var(--fs-sm); color: var(--fg-dim); margin-top: 0.15rem; }

/* --- Visual column -------------------------------------------------------- */

.brand__visual { position: relative; display: grid; gap: var(--s-5); }

.orb {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
  box-shadow: var(--shadow-soft);
}
.orb img { width: 100%; height: 100%; object-fit: cover; }

.orb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: inset 0 0 60px -20px color-mix(in srgb, var(--accent) 70%, transparent);
}

.orb__caption {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  background: rgba(26, 20, 13, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--t-night);
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Two overlapping orbs, offset — the "farm and table" pairing. */
.orb-pair {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
}
.orb-pair .orb--a { grid-column: 1 / span 4; }
.orb-pair .orb--b { grid-column: 4 / span 3; margin-top: 28%; }

.brand__logo {
  width: clamp(72px, 9vw, 104px);
  height: clamp(72px, 9vw, 104px);
  border-radius: 50%;
  object-fit: cover;
}

.brand__logo--glow {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
    0 0 30px -10px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* --- Tag row -------------------------------------------------------------- */

.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.tag {
  padding: 0.36rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: border-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.tag:hover { border-color: var(--accent); color: var(--accent); }

/* --- Ambient wash keyed to the section accent ----------------------------- */

.brand__wash {
  position: absolute;
  z-index: 0;
  width: 46vw; height: 46vw;
  max-width: 720px; max-height: 720px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.32;
  background: radial-gradient(circle, var(--accent), transparent 68%);
  pointer-events: none;
}
.brand__wash--tr { right: -12vw; top: -14vw; }
.brand__wash--bl { left: -14vw; bottom: -16vw; }

.brand > .shell { position: relative; z-index: 1; }

/* ==========================================================================
   Fund-distribution diagram (Planet Niaga JV).
   Every animated pipe carries pathLength="100" in the markup, so one dash
   pattern and one duration read correctly on lines of any real length.
   ========================================================================== */

.flow { width: 100%; height: auto; overflow: visible; }

.flow__pipe,
.flow__return {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

.flow__return { stroke-dasharray: 3 4; opacity: 0.75; }

.flow__pulse {
  fill: none;
  stroke: url(#flowFade);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 9 91;
  animation: flow-run 3.4s linear infinite;
}
.flow__pulse--slow { animation-duration: 4.6s; animation-delay: 0.7s; }

@keyframes flow-run {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

.flow__hub {
  fill: color-mix(in srgb, var(--accent) 14%, transparent);
  stroke: var(--accent);
  stroke-width: 1;
}

.flow__box {
  fill: rgba(243, 236, 221, 0.035);
  stroke: var(--line);
  stroke-width: 1;
}

.flow__label,
.flow__hub-text,
.flow__sub {
  font-family: var(--f-mono);
  fill: var(--fg);
  letter-spacing: 0.16em;
}

.flow__label { font-size: 9px; }
.flow__hub-text { font-size: 8px; fill: var(--accent); }
.flow__sub { font-size: 6.5px; fill: var(--fg-faint); }
.flow__sub--return { letter-spacing: 0.2em; }

@media (prefers-reduced-motion: reduce) {
  .flow__pulse { animation: none; stroke-dasharray: none; opacity: 0.5; }
}