/* =====================================================
   SI PATRIOT — PUBLIC WEBSITE VISUAL LANGUAGE
   Art direction: premium editorial AgriTech.
   Photography → Composition → Whitespace → Typography → UI (last).

   Two layers:
     Layer 1 (brand identity — shared with the SI PATRIOT app):
       --primary (the one green). Used only as accent: CTA,
       badge, highlight, impact number. Never as a page background.
     Layer 2 (marketing visual language — follows the reference's
       mood: premium, editorial, nature, cinematic, breathing space):
       everything else below.

   Loaded ALONGSIDE style.css on new public-website pages only.
   Purely additive — does not touch style.css or unmigrated pages.
   ===================================================== */


/* =====================================================
   STANDARD BREAKPOINT SYSTEM — use only these two values.
   Media queries cannot reference CSS custom properties, so
   these are documented here as the literal values every
   component must use. Do NOT invent a new breakpoint to
   patch a one-off layout problem — fix it within Mobile or
   Tablet, or escalate here if a genuine third tier is needed.

     Desktop  — default, no media query (≥901px)
     Tablet   — @media (max-width: 900px)
     Mobile   — @media (max-width: 640px)

   Exception tier (rare, additive-only, large-screen enhancements
   that should NOT appear at ordinary desktop widths):
     Large Desktop — @media (min-width: 1200px)
   ===================================================== */

:root {
  /* ---- Layer 1: Brand accent (one green, used sparingly) ---- */
  --primary: #2E7D32;
  --primary-deep: #1B5E20; /* interaction state only, not a "palette color" */

  /* ---- Layer 2: Editorial palette — mostly neutral ---- */
  --ink: #14150F;
  --ink-soft: #4A4D42;
  --ink-faint: #686B60;
  --white: #FFFFFF;
  --warm-white: #FAF8F3;
  --gray-light: #EFEEE8;
  --line: #E3E1D9;

  /* ---- Typography ---- */
  --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;

  /* Measured against reference proportions — headline should resolve to
     2-3 lines at container width, not 5-6. Scale is deliberately modest. */
  --text-hero: clamp(2rem, 1.5rem + 2.4vw, 2.875rem);
  --text-h1: clamp(1.625rem, 1.35rem + 1.4vw, 2.25rem);
  --text-h2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --text-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-lead: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --text-body: 0.9375rem;
  --text-small: 0.8125rem;
  --text-kicker: 0.6875rem;

  /* Impact number — same scale as h1, not larger */
  --text-stat: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);

  /* ---- Spacing rhythm (sections breathe at different tempos, but
     compact overall — density matched to the references) ---- */
  --pad-compact: clamp(36px, 4vw, 56px);
  --pad-medium: clamp(56px, 6vw, 80px);
  --pad-large: clamp(80px, 8vw, 112px);
  --pad-epic: clamp(96px, 9vw, 140px);
  --gutter: clamp(20px, 4vw, 48px);
  --container: 1240px;

  /* ---- Radius — generous, photographic ---- */
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Shadow — nearly absent; used for the floating nav capsule ---- */
  --shadow-nav: 0 1px 2px rgba(20,21,15,.04), 0 8px 20px rgba(20,21,15,.06);

  /* ---- Motion system ---- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 200ms;
  --dur-base: 600ms;
  --dur-slow: 900ms;
}

/* =====================================================
   Base
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* The browser default `body { margin: 8px }` was never reset. Nothing on
   this site was ever designed around an 8px frame, so every page silently
   rendered 16px narrower than the viewport it was measured against — the
   nav rail's five labels were being fit into 359px of a 375px screen, not
   375px, which is why "Artikel" clipped even after padding was tightened.
   overflow-x:clip below hid the symptom (no horizontal scrollbar) without
   fixing the cause. */
html, body { margin: 0; }
/* `clip`, not `hidden`: `overflow-x: hidden` forces overflow-y to compute to `auto`, which turns
   html/body into a scroll container and BREAKS `position: sticky` for every descendant on the
   site. `clip` contains horizontal overflow identically without creating a scroll container. */
html { overflow-x: clip; }

.web {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* Defensive: decorative elements (hero particles use intentional negative
     offsets like right:-44px, tuned for wide viewports) must never create
     real horizontal scroll at narrow widths. Nothing on this site needs
     horizontal overflow, so clipping it here is always safe.
     MUST be `clip`, not `hidden` — see the note on html above; `hidden` here
     breaks every sticky element on the site. */
  overflow-x: clip;
}

.web h1, .web h2, .web h3, .web h4 {
  font-family: var(--font-display);
  color: inherit;
  margin: 0;
}

.web p {
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
}

/* =====================================================
   Layout primitives
   ===================================================== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Section rhythm — NOT uniform. Pick deliberately per section. */
.section-hero    { padding-block: var(--pad-epic) var(--pad-large); }
.section-compact { padding-block: var(--pad-compact); }
.section-medium  { padding-block: var(--pad-medium); }
.section-large   { padding-block: var(--pad-large); }
.section-epic    { padding-block: var(--pad-epic); }

.bg-warm  { background: var(--warm-white); }
.bg-ink   { background: var(--ink); color: var(--white); }
.bg-ink p { color: rgba(255,255,255,.68); }

/* =====================================================
   Editorial split — asymmetric, alternating, image-led
   ===================================================== */
.split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.split--reverse { grid-template-columns: 1fr 1.15fr; }
.split--reverse .split__media { order: 2; }
.split--reverse .split__text  { order: 1; }

.split__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.split__text { max-width: 42ch; }

@media (max-width: 900px) {
  .split, .split--reverse { grid-template-columns: 1fr; gap: 32px; }
  .split--reverse .split__media,
  .split--reverse .split__text { order: initial; }
}

/* Media — the photograph carries the mood. Zoom is the one micro-interaction. */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--gray-light);
}

.media img,
.media .media__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.media:hover img,
.media:hover .media__ph {
  transform: scale(1.03);
}

/* Placeholder photography (until real assets land) — cinematic gradient, not a flat swatch */
.media__ph {
  background: linear-gradient(155deg, #3A6B2E 0%, #244A1D 55%, #16300F 100%);
}

/* =====================================================
   Typography utilities
   ===================================================== */
.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-kicker);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.kicker--on-dark { color: rgba(255,255,255,.6); }
.kicker em { color: var(--primary); font-style: normal; }

.hero-title {
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.h1 { font-size: var(--text-h1); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; }
.h2 { font-size: var(--text-h2); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }

.lead {
  font-size: var(--text-lead);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 42ch;
}

/* =====================================================
   Evidence of Impact — numbers dominate, everything else recedes
   ===================================================== */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(40px, 6vw, 88px);
  row-gap: 40px;
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}

/* Hierarchy — not every number carries equal weight. First stat is
   the headline figure; the rest step down. */
.stat__value--lg { font-size: calc(var(--text-stat) * 1.18); }
.stat__value--md { font-size: calc(var(--text-stat) * 0.9); }
.stat__value--sm { font-size: calc(var(--text-stat) * 0.78); color: var(--ink-soft); }

.stat__value em {
  font-style: normal;
  color: var(--primary);
}

.stat__label {
  margin-top: 10px;
  font-size: var(--text-kicker);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* =====================================================
   Buttons — restrained, premium proportions
   ===================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}

.btn-primary {
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--white);
}

.btn-primary:hover { background: var(--primary-deep); transform: translateY(-2px); }

/* Underline appears on hover only — reads as a quiet text link, not a raw <a> */
.btn-line {
  padding: 0 0 2px 0;
  color: var(--ink);
  border-radius: 0;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.btn-line:hover {
  color: var(--primary-deep);
  background-image: linear-gradient(var(--primary-deep), var(--primary-deep));
  background-size: 100% 1px;
}

.btn-line::after {
  content: '→';
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn-line:hover::after { transform: translateX(4px); }

/* =====================================================
   Motion system
   ===================================================== */
.web .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.web .reveal.in { opacity: 1; transform: translateY(0); }

/* Stagger: set style="--i:0" / "--i:1" / "--i:2" on siblings */
.web .stagger { transition-delay: calc(var(--i, 0) * 110ms); }

.hover-lift { transition: transform var(--dur-base) var(--ease-out); }
.hover-lift:hover { transform: translateY(-6px); }

/* =====================================================
   Particles — thin sparkle glyphs, decorative punctuation
   around a headline. Not a background texture, not Web3.
   ===================================================== */
.particle-field {
  position: relative;
}

.particle {
  position: absolute;
  stroke: var(--ink-soft);
  fill: none;
  stroke-width: 1.6;
  pointer-events: none;
  animation: particle-float 7s var(--ease-out) infinite;
}

.particle--on-dark { stroke: rgba(255,255,255,.55); }

@keyframes particle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* =====================================================
   Opening hero — text stacked above full-bleed photo,
   not overlaid. Centered composition (the one section on
   the page that centers).
   ===================================================== */
.opening {
  text-align: center;
  padding-block: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 36px);
}

.opening__lead {
  margin-inline: auto;
  font-size: var(--text-small);
}

.opening__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

/* Cinematic landscape band — near full-bleed, fades into the page at
   top and bottom instead of appearing as a bordered card. */
.opening-photo {
  width: 100%;
  height: clamp(420px, 52vw, 680px);
  overflow: hidden;
  background: var(--gray-light);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  /* Establishes a proper containing block so the parallax-scaled image inside
     is reliably clipped instead of leaking a few px into document scrollWidth. */
  transform: translateZ(0);
}

.opening-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 6s var(--ease-out);
}

.opening-photo:hover img { transform: scale(1.03); }

/* =====================================================
   Gallery grid — small radius, tight gutter, edge-to-edge
   photography (used for supporting imagery, not the hero)
   ===================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.gallery-grid .media { aspect-ratio: 1 / 1; border-radius: var(--radius-md); }

@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================
   Feature grid — icon-led bullets (Berry Boss reference).
   Icons are the ONE place icons appear on the page — kept
   small, uniform, and quiet so they read as punctuation,
   not UI chrome.
   ===================================================== */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
  margin-top: 40px;
}

.feature__icon {
  display: block;
  font-size: 20px;
  line-height: 1;
  color: var(--primary);
  margin-bottom: 10px;
}

@media (max-width: 640px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   Pillar list — editorial, horizontal, no cards/borders/
   shadows. Berry Boss's bullet pattern stretched across
   the full container instead of a boxed 2x2 grid.
   ===================================================== */
.pillar-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 8px;
}

.pillar__icon {
  display: block;
  font-size: 18px;
  line-height: 1;
  color: var(--primary);
  margin-bottom: 14px;
}

.pillar__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.pillar__text {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .pillar-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pillar-list { grid-template-columns: 1fr; }
}

/* =====================================================
   Dashboard Experience — Apple/Berry-Boss style product
   reveal: overlapping floating device frames over a
   blurred color glow, not a flat screenshot.
   ===================================================== */
.device-stage {
  position: relative;
  padding: 48px 24px 24px;
}

.device-stage::before {
  content: '';
  position: absolute;
  inset: -10% -5%;
  background: radial-gradient(60% 60% at 50% 40%, rgba(46,125,50,.14), transparent 70%);
  filter: blur(40px);
  z-index: 0;
}

.device-browser {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(20,21,15,.14), 0 4px 16px rgba(20,21,15,.06);
  overflow: hidden;
}

.device-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.device-browser__bar span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line);
}

.device-browser__body {
  padding: 28px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
}

.device-stat {
  background: var(--warm-white);
  border-radius: var(--radius-md);
  padding: 16px;
}

.device-stat__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.device-stat__value { margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); }

.device-bars {
  display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 10px;
}
.device-bars span { flex: 1; background: var(--primary); opacity: .35; border-radius: 3px 3px 0 0; }
.device-bars span:nth-child(3), .device-bars span:nth-child(5) { opacity: .8; }

.device-phone {
  position: absolute;
  z-index: 2;
  right: -18px;
  bottom: -32px;
  width: 128px;
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(20,21,15,.18), 0 2px 8px rgba(20,21,15,.08);
  padding: 10px 10px 14px;
  border: 1px solid var(--line);
}

.device-phone__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.device-phone__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
.device-phone__bar { height: 6px; background: var(--gray-light); border-radius: 3px; margin-bottom: 6px; }
.device-phone__bar--sm { width: 60%; }

@media (max-width: 900px) {
  .device-browser__body { grid-template-columns: 1fr; }
  .device-phone { display: none; }
}

/* =====================================================
   Program Timeline — horizontal, connected by a thin
   line. Premium process indicator, not a vertical list.
   ===================================================== */
.timeline-h {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 48px;
}

.timeline-step {
  position: relative;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.timeline-step::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
}

.timeline-step--upcoming::before {
  background: var(--white);
  border: 1.5px solid var(--ink-faint);
}

.timeline-step__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.timeline-step__text {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .timeline-h { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}
@media (max-width: 640px) {
  .timeline-h { grid-template-columns: 1fr; }
}

/* =====================================================
   Knowledge Center — Medium-style resource list, not
   download cards.
   ===================================================== */
.knowledge-list { margin-top: 40px; }

.knowledge-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.knowledge-list .knowledge-item:last-child { border-bottom: 1px solid var(--line); }

.knowledge-item:hover { opacity: .6; }

.knowledge-item__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}

.knowledge-item__meta {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-faint);
  display: flex;
  gap: 8px;
  align-items: center;
}

.knowledge-item__meta span:not(:last-child)::after { content: '·'; margin-left: 8px; }

.knowledge-item__arrow { font-size: 18px; color: var(--ink-faint); flex-shrink: 0; }

/* =====================================================
   Built Together — editorial collaboration section. No
   pills, no borders, no button-like chrome. Reads as
   prose + a plain grouped list, not a tag selector.
   ===================================================== */
.collab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.collab-group__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 14px;
  display: block;
}

.collab-group__item {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .collab-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* =====================================================
   Circular Smart Farming — the identity infographic.
   A loop, not a linear timeline: nodes connected by thin
   arrows, wrapping back to the start via a closing label.
   ===================================================== */
.cycle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 4px 2px;
  margin-top: 56px;
}

.cycle-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 108px;
}

.cycle-node__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--primary);
  background: var(--white);
}

.cycle-node__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  text-align: center;
}

.cycle-arrow {
  align-self: center;
  margin-top: 26px;
  font-size: 15px;
  color: var(--ink-faint);
}

.cycle-loop-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  font-size: var(--text-kicker);
  color: var(--ink-faint);
}

.cycle-loop-note i { font-size: 14px; }

@media (max-width: 640px) {
  .cycle-arrow { display: none; }
  .cycle-row { gap: 24px 32px; }
}

/* =====================================================
   Explore More — compact 3-up teaser row replacing what
   would otherwise be three full homepage sections
   (Knowledge / Team / Articles). Each is a doorway, not
   a summary.
   ===================================================== */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.explore-card {
  background: var(--white);
  padding: 32px 28px;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-base) var(--ease-out);
}

.explore-card:hover { background: var(--warm-white); }

.explore-card__icon { font-size: 20px; color: var(--primary); margin-bottom: 16px; display: block; }
.explore-card__title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.explore-card__text { margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.explore-card__arrow { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--ink); }
.explore-card:hover .explore-card__arrow { color: var(--primary-deep); }

@media (max-width: 900px) {
  .explore-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   /program page components
   ===================================================== */

/* Compact page intro — NOT a generic hero. Home owns the
   hero moment; inner pages get a short frame, then flow
   straight into their first narrative beat. */
.page-intro {
  padding-block: clamp(28px, 3vw, 40px) 0;
  text-align: center;
}
.page-intro .kicker { justify-content: center; }
.page-intro p { margin: 12px auto 0; max-width: 46ch; text-align: center; }

/* Reality / Transformation — quiet, photo-led, spacious.
   Deliberately mirrored so before/after is felt structurally. */
.reality-band {
  width: 100%;
  height: clamp(280px, 34vw, 460px);
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.reality-caption {
  max-width: 52ch;
  margin: 28px auto 0;
  text-align: center;
  font-size: var(--text-lead);
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Why existing approaches fail — dense, stacked, documentary.
   Tighter rhythm than any other section on the page. */
.fail-stack { margin-top: 40px; max-width: 640px; margin-inline: auto; }
.fail-row {
  display: flex;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.fail-row:last-child { border-bottom: 1px solid var(--line); }
.fail-row__num { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink-faint); flex-shrink: 0; width: 24px; }
.fail-row__text { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.fail-row__text strong { color: var(--ink); font-weight: 600; }

/* Our Intervention — the page's one hero-weight moment. */
.intervention-statement {
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: center;
  max-width: 18ch;
  margin: 20px auto 0;
}
.intervention-statement em { font-style: normal; color: var(--primary); }

/* Ecosystem — two parallel connected cycles (physical + digital),
   showing them reinforce each other, not one isolated loop. */
.ecosystem-dual { margin-top: 56px; display: flex; flex-direction: column; gap: 8px; }
.ecosystem-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 2px; }
.ecosystem-row__label {
  width: 100%; text-align: center; margin-bottom: 18px;
  font-size: var(--text-kicker); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.ecosystem-link {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 24px auto; font-size: 11px; color: var(--ink-faint);
}
.ecosystem-link i { font-size: 18px; color: var(--primary); }

/* Timeline proof metric — one concrete number per implementation step. */
.timeline-step__proof {
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary-deep);
}

/* Where to go next — two clear branches, not one CTA. */
.next-branch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  margin-top: 40px;
  border: 1px solid var(--line);
}
.next-branch__item {
  background: var(--white);
  padding: 36px 28px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-base) var(--ease-out);
}
.next-branch__item:hover { background: var(--warm-white); }
.next-branch__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.next-branch__text { margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); }
.next-branch__arrow { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--primary-deep); }

@media (max-width: 640px) {
  .next-branch { grid-template-columns: 1fr; }
}

/* =====================================================
   /program v2 — image-first, asymmetric, memorable moments.
   Replaces the text-sequential v1 components below.
   ===================================================== */

/* Hero moment — full-bleed, dark, statement anchored bottom-left
   (not centered). This is the page's visual anchor. */
.hero-moment {
  position: relative;
  min-height: 74vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: var(--white);
}
.hero-moment::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,12,8,.78) 0%, rgba(10,12,8,.25) 45%, rgba(10,12,8,.05) 70%);
}
.hero-moment__inner { position: relative; z-index: 2; padding: 0 var(--gutter) clamp(48px,7vw,88px); max-width: 680px; }
.hero-moment .kicker { color: rgba(255,255,255,.72); }
.hero-moment .kicker::before { background: var(--primary-light, var(--primary)); }
.hero-moment__statement {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-hero); line-height: 1.05; letter-spacing: -0.02em;
  margin-top: 14px;
}
.hero-moment p { color: rgba(255,255,255,.8); margin-top: 16px; max-width: 46ch; }

/* Asymmetric fail-split — small image, large stacked statements.
   Replaces the plain centered fail-stack. */
.fail-split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; margin-top: 8px; }
.fail-split__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; }
@media (min-width: 1200px) {
  /* Grid-breaking bleed — large-desktop-only enhancement, the image escapes the container edge. */
  .fail-split__media { margin-left: calc(-1 * (100vw - 1240px) / 2 - 40px); }
}
@media (max-width: 900px) { .fail-split { grid-template-columns: 1fr; gap: 32px; } }

/* Bold numbered implementation list — alternating asymmetric,
   large numerals, replaces the thin horizontal timeline for /program. */
.impl-list { margin-top: 48px; display: flex; flex-direction: column; }
.impl-row {
  display: grid; grid-template-columns: 100px 1fr;
  gap: 24px; align-items: baseline;
  padding: 32px 0; border-top: 1px solid var(--line);
}
.impl-row:last-child { border-bottom: 1px solid var(--line); }
.impl-row__num { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--gray-light); line-height: 1; }
.impl-row__title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); }
.impl-row__text { margin-top: 6px; font-size: 14px; color: var(--ink-soft); max-width: 52ch; }
.impl-row__proof { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--primary-deep); }
@media (max-width: 640px) {
  .impl-row { grid-template-columns: 1fr; gap: 8px; }
  .impl-row__num { font-size: 28px; }
}

/* Transformation band — full-bleed edge-to-edge, overlay caption,
   mirrors the hero-moment treatment for a felt before/after. */
.transform-band {
  position: relative;
  height: clamp(360px, 46vw, 560px);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  color: var(--white);
}
.transform-band::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 40%, rgba(10,12,8,.6) 100%);
}
.transform-band__caption {
  position: relative; z-index: 1;
  max-width: 420px;
  padding: clamp(32px,5vw,56px);
  text-align: right;
}
.transform-band__caption .kicker { color: rgba(255,255,255,.7); justify-content: flex-end; }
.transform-band__caption p { color: var(--white); font-size: var(--text-lead); line-height: 1.5; margin-top: 12px; }

/* =====================================================
   Ecosystem ring v2 — animated SVG ring + ambient glow.
   This is the signature visual; treat it like a logo, not
   an infographic. Slow continuous rotation reinforces
   "cycle," never stops, never draws attention loudly.
   ===================================================== */
.ecosystem-ring { position: relative; }
.ecosystem-ring::before {
  content: '';
  position: absolute; inset: -8%;
  background: radial-gradient(closest-side, rgba(46,125,50,.16), transparent 72%);
  filter: blur(30px);
  z-index: 0;
}
.ecosystem-ring__svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: ring-rotate 60s linear infinite;
}
.ecosystem-ring__svg circle {
  fill: none;
  stroke: var(--primary);
  stroke-opacity: .35;
  stroke-width: 1.5;
  stroke-dasharray: 2 14;
  stroke-linecap: round;
}
@keyframes ring-rotate { to { transform: rotate(360deg); } }
.ring-node { z-index: 1; }

/* Pull quote — a text-only viewport moment. No heading label,
   no supporting image. Sometimes one sentence is enough. */
.pull-quote {
  padding-block: clamp(96px, 12vw, 160px);
  text-align: center;
}
.pull-quote blockquote {
  margin: 0 auto;
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pull-quote blockquote em { font-style: normal; color: var(--primary); }
.pull-quote cite {
  display: block; margin-top: 20px;
  font-style: normal; font-size: 12.5px; color: var(--ink-faint);
}

/* =====================================================
   /knowledge — v2. No photographic hero (photography belongs to
   Home/Program/Artikel, not here). The page opens directly into
   information: a compact title strip, then search + domain/
   audience navigation, then a two-column Intelligence Workspace
   that's fully reactive to domain selection — one click updates
   the insight, its evidence, and the resource list together.
   This is an analytical workspace, not a dashboard (one insight
   at a time, not 50 KPIs) and not a blog (no article rhythm).
   ===================================================== */
/* Opening — Identity + Mission only. The earlier "operational status panel" (Live Dataset /
   Last Sync / Peternak Terhubung / Source) is removed entirely per explicit feedback: it had
   near-zero decision value and only added visual noise. Do not add a replacement badge here —
   the header should breathe (whitespace, not metadata). */
.k-open { padding: clamp(120px,14vw,150px) 0 clamp(32px,4vw,40px); }
.k-open__identity { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.k-open__identity span { display: block; margin-top: 2px; font-family: var(--font-body); font-weight: 500; font-size: 11.5px; color: var(--ink-faint); }

.k-open__title {
  margin-top: 18px; max-width: 18ch;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
  line-height: 1.1; letter-spacing: -0.02em; color: var(--ink);
}

.k-open__interaction { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }

/* =====================================================
   Financial Overview — rebuilt from scratch, deleted rather than
   refined (the domain-switching "Executive Dashboard" is GONE).
   Ground-truth constraint: the SI PATRIOT app only records cash
   flow (uang masuk/keluar, kategori, nominal, tanggal, liter susu
   opsional). It is not an ERP, not IoT, no health sensors, no ML.
   Every number on this page must be traceable to that transaction
   log — nothing here may imply data the app doesn't have. Because
   of that, this module does NOT switch per knowledge-domain (only
   Financial has real backing data); domain switching now lives
   further down, scoped to the Knowledge Collection document
   library, where it always belonged.

   Visual language: the PAGE stays light/white, matching the rest
   of the site — only this one module is a contained dark analytical
   panel (#161816), not a full-bleed dark section. Neutral borders
   (#2B2B2B-equivalent), green used only as a semantic accent
   (positive values, one CTA), never as the dominant hue, never a
   gradient/glow/glass surface. Charts are thin-stroke and unfilled.
   The "Executive Finding" reads as a written sentence, not a grid
   of context-free stat tiles.
   ===================================================== */
.fin-overview {
  margin: clamp(32px,4vw,48px) 0 clamp(64px,8vw,96px);
  background: #161816; border: 1px solid #2B2B2B; border-radius: var(--radius-lg);
  color: #fff; padding: clamp(28px,4vw,44px);
}
.fin-overview__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.fin-overview__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.fin-overview__badge { font-size: 11px; color: rgba(255,255,255,.5); }

.fin-kpis { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px,4vw,48px); padding-bottom: 24px; border-bottom: 1px solid #2B2B2B; }
.fin-kpi__label { font-size: 12px; color: rgba(255,255,255,.6); }
.fin-kpi__value { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px,1.8vw,26px); color: #fff; }
.fin-kpi__delta { margin-top: 4px; font-size: 12px; font-weight: 600; }
.fin-kpi__delta--good { color: #4CAF50; }
.fin-kpi__delta--bad { color: #E5695B; }

.fin-canvas { margin-top: 28px; display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px,4vw,56px); }
.fin-panel__title { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); }
.fin-chart { margin-top: 16px; width: 100%; height: 100px; }
.fin-chart path.line { fill: none; stroke: #4CAF50; stroke-width: 1.5; }
.fin-chart path.grid { fill: none; stroke: #2B2B2B; stroke-width: 1; }
.fin-chart-legend { margin-top: 10px; font-size: 11px; color: rgba(255,255,255,.5); }

.fin-composition { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.fin-composition__row { display: flex; align-items: center; gap: 12px; }
.fin-composition__label { width: 90px; flex-shrink: 0; font-size: 12.5px; color: rgba(255,255,255,.8); }
.fin-composition__track { flex: 1; height: 4px; background: #2B2B2B; }
.fin-composition__fill { height: 100%; background: rgba(255,255,255,.55); }
.fin-composition__pct { width: 34px; flex-shrink: 0; text-align: right; font-size: 12.5px; font-weight: 600; color: #fff; }

/* Executive Finding — a written finding, not a stat-tile grid. Every number sits inside a
   sentence with a real subject, so it never reads as a context-free percentage. */
.fin-finding { margin-top: 28px; padding-top: 24px; border-top: 1px solid #2B2B2B; }
.fin-finding__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.fin-finding__text { margin-top: 12px; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.94); max-width: 62ch; }
.fin-finding__text strong { color: #fff; font-weight: 700; }
.fin-finding__text .is-bad { color: #E5695B; font-weight: 700; }
.fin-finding__text .is-good { color: #4CAF50; font-weight: 700; }
.fin-finding__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-size: 13.5px; font-weight: 600; color: #4CAF50; text-decoration: none;
}
.fin-finding__link i { font-size: 12px; }

/* Priority — editorial spacing (large row height, whitespace not borders, few rows). */
.fin-priority { margin-top: 28px; padding-top: 24px; border-top: 1px solid #2B2B2B; }
.fin-priority__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.fin-priority__list { margin-top: 14px; display: flex; flex-direction: column; }
.fin-priority__row { display: flex; align-items: center; gap: 20px; padding: 18px 0; }
.fin-priority__row + .fin-priority__row { border-top: 1px solid #232323; }
.fin-priority__num { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: rgba(255,255,255,.35); width: 20px; flex-shrink: 0; }
.fin-priority__who { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: #fff; width: 130px; flex-shrink: 0; }
.fin-priority__issue { flex: 1; font-size: 13.5px; color: rgba(255,255,255,.75); }
.fin-priority__tag { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); flex-shrink: 0; }
.fin-priority__tag--high { background: rgba(229,105,91,.16); color: #E5695B; }
.fin-priority__tag--medium { background: rgba(232,169,60,.16); color: #E8A93C; }

@media (max-width: 900px) {
  .fin-kpis { grid-template-columns: 1fr; gap: 16px; }
  .fin-canvas { grid-template-columns: 1fr; gap: 28px; }
  .fin-priority__row { flex-wrap: wrap; gap: 6px 20px; }
  .fin-priority__who { width: auto; }
}

/* Thin, Apple-style search — a tool, not a hero element. */
.knowledge-search { position: relative; max-width: 420px; }
.knowledge-search input {
  width: 100%; padding: 9px 14px 9px 34px; border: none; border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-body); font-size: 13.5px; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.knowledge-search input:focus { outline: none; border-color: var(--primary); }
.knowledge-search i { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 14px; }

/* Domain tabs — underline style, reads as navigation, not buttons. */
.domain-nav { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.domain-chip {
  padding: 6px 0; border: none; border-bottom: 2px solid transparent;
  background: transparent; font-size: 12.5px; font-weight: 600; color: var(--ink-faint);
  cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.domain-chip:hover { color: var(--ink); }
.domain-chip.is-active { color: var(--primary-deep); border-color: var(--primary); }

/* Audience filter moved out of the header (kept the header to 3 layers only per the
   locked simplification) — lives beside Knowledge Collection instead, as a light
   secondary refinement, not a header-level control. */
.audience-nav { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.audience-nav__label { font-size: 12px; color: var(--ink-faint); margin-right: 4px; }
.audience-chip {
  padding: 5px 13px; border-radius: var(--radius-pill); background: transparent; border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--ink-faint); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.audience-chip:hover { color: var(--ink); }
.audience-chip.is-active { background: rgba(46,125,50,.1); color: var(--primary-deep); border-color: var(--primary); }

/* Knowledge Collection — editorial, type-grouped list. Never a uniform card grid. */
.knowledge-collection { padding-block: clamp(64px, 8vw, 96px); }
.collection-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 28px; }
.collection-grid .collection__group { margin-top: 0; }
.collection__group:not(:first-child) { margin-top: 28px; }
.collection__group-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.collection__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.collection__item:last-child { border-bottom: none; }
.collection__item-left { display: flex; flex-direction: column; gap: 2px; }
.collection__item-type { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--primary-deep); }
.collection__item-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.collection__item i { font-size: 13px; color: var(--ink-faint); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.collection__item:hover i { color: var(--primary-deep); transform: translateX(3px); }
.collection__empty { color: var(--ink-faint); font-size: 13.5px; padding: 20px 0; }

@media (max-width: 900px) {
  .workspace__grid { grid-template-columns: 1fr; border-radius: var(--radius-md); }
  .workspace__panel { border-right: none; border-bottom: 1px solid var(--line); }
  .workspace__collection { max-height: none; }
}

/* =====================================================
   Related Reading — Medium/Notion-style "continue
   understanding," appears only after the workspace, and
   reacts to the same domain selection.
   ===================================================== */
.related-reading { padding-block: clamp(64px, 8vw, 96px); background: var(--warm-white); border-top: 1px solid var(--line); }
.related-reading__list { margin-top: 32px; display: flex; flex-direction: column; }
.related-reading__item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit;
}
.related-reading__item:last-child { border-bottom: 1px solid var(--line); }
.related-reading__title { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink); }
.related-reading__sub { margin-top: 3px; font-size: 12.5px; color: var(--ink-faint); }
.related-reading__item i { color: var(--primary-deep); font-size: 15px; flex-shrink: 0; }

/* Parallax hero photo — background scrolls slower than foreground,
   deepens the sense of atmosphere. Falls back to static on
   reduced-motion / no-JS gracefully since it's a transform only. */
.opening-photo { position: relative; }
.opening-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(10,12,8,.22) 100%);
  pointer-events: none;
}

/* =====================================================
   Circular Smart Farming — SI PATRIOT's visual signature.
   NOT concentric rotating rings. An organic path (like a
   root or a stream) that matter and energy travel along.
   Structure stays still; only what should move, moves.
   Given the most design effort of any component on the site.
   ===================================================== */
.eco-signature {
  position: relative;
  width: min(460px, 92vw);
  aspect-ratio: 100/132;
  margin: 64px auto 0;
}
.eco-signature::before {
  content: '';
  position: absolute; inset: -14%;
  background: radial-gradient(closest-side, rgba(46,125,50,.16), transparent 70%);
  filter: blur(40px);
  z-index: 0;
  animation: eco-breathe 7s ease-in-out infinite;
}
@keyframes eco-breathe { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

.eco-signature__svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.eco-path { fill: none; stroke: var(--line); stroke-width: 1; stroke-linecap: round; }

/* Matter (organic, slower, warm) and energy (fast, green) travel the same path, staggered. */
.eco-flow-dot--matter { filter: drop-shadow(0 0 3px rgba(139,111,71,.6)); }
.eco-flow-dot--energy { filter: drop-shadow(0 0 5px rgba(46,125,50,.8)); }

.eco-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 3; text-align: center; width: 46%;
  pointer-events: none;
}
.eco-center__ring {
  width: 58px; height: 58px; margin: 0 auto;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  animation: eco-pulse 3.4s ease-in-out infinite;
  transition: transform var(--dur-base) var(--ease-out);
}
.eco-signature.has-hover .eco-center__ring { transform: scale(1.12); animation-play-state: paused; box-shadow: 0 0 0 8px rgba(46,125,50,.14); }
.eco-center__ring i { font-size: 22px; color: var(--primary); transition: opacity var(--dur-fast) var(--ease-out); }
@keyframes eco-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(46,125,50,.22); }
  50% { box-shadow: 0 0 0 10px rgba(46,125,50,0); }
}
.eco-center__caption {
  margin-top: 12px; font-family: var(--font-display); font-weight: 600;
  font-size: 13px; color: var(--ink); line-height: 1.35; min-height: 34px;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.eco-node {
  position: absolute; transform: translate(-50%,-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
  opacity: 0;
  animation: eco-node-arrive .6s var(--ease-out) forwards;
}
@keyframes eco-node-arrive { from { opacity: 0; transform: translate(-50%,-50%) scale(.6); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

.eco-node__dot {
  width: 44px; height: 44px; font-size: 17px; color: var(--primary);
  border-radius: 50%; background: var(--white); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.eco-node__label { font-size: 11px; color: var(--ink-faint); font-weight: 500; }

/* Traveling pulse — a wave passes through each node in path order (staggered via inline animation-delay set by JS), not a hover-only effect. Represents matter/energy actually reaching that stage. */
@keyframes eco-node-pulse {
  0%, 85%, 100% { box-shadow: 0 0 0 0 rgba(46,125,50,0); border-color: var(--line); }
  92% { box-shadow: 0 0 0 7px rgba(46,125,50,.16); border-color: var(--primary); }
}
.eco-node__dot { animation: eco-node-pulse var(--eco-cycle, 9s) ease-in-out infinite; animation-delay: var(--eco-delay, 0s); }

.eco-node:hover .eco-node__dot,
.eco-node.is-active .eco-node__dot {
  transform: scale(1.18);
  border-color: var(--primary);
  box-shadow: 0 0 0 7px rgba(46,125,50,.16);
  animation-play-state: paused;
}
.eco-signature.has-hover .eco-node:not(:hover):not(.is-active) { opacity: .4 !important; transition: opacity var(--dur-base) var(--ease-out); }
.eco-signature.has-hover .eco-node { transition: opacity var(--dur-base) var(--ease-out); }

@media (max-width: 640px) {
  .eco-node__dot { width: 38px; height: 38px; font-size: 15px; }
  .eco-node__label { font-size: 9.5px; }
  .eco-center__ring { width: 46px; height: 46px; }
  .eco-center__caption { font-size: 11px; }
}

/* Lightweight teaser variant for Home — same organic path, no hover interaction. */
.eco-signature--teaser .eco-node { cursor: default; }
.eco-signature--teaser .eco-node:hover .eco-node__dot { transform: none; border-color: var(--line); box-shadow: none; animation-play-state: running; }

/* =====================================================
   Ecosystem — mobile: not a shrunk diagram. A vertical
   journey, one stage revealing at a time on scroll.
   ===================================================== */
.eco-journey { display: none; }
@media (max-width: 640px) {
  .eco-signature-desktop { display: none; }
  .eco-journey {
    display: block;
    margin-top: 40px;
    max-width: 420px;
    margin-inline: auto;
  }
  .eco-journey__step {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
  }
  .eco-journey__step:last-child { border-bottom: 1px solid var(--line); }
  .eco-journey__icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    background: var(--white); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--primary);
  }
  .eco-journey__title { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); }
  .eco-journey__text { margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
}
@media (min-width: 641px) { .eco-journey { display: none !important; } }

/* =====================================================
   Hero watermark — huge, near-transparent editorial type
   behind the hero photo. Per-page word, not a repeated
   brand mark: Home="SI PATRIOT", Program="PROGRAM", etc.
   A photographic design element, not readable copy —
   felt, not read. Responsive across desktop/tablet/mobile.
   ===================================================== */
.hero-watermark {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.hero-watermark span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 16vw, 13rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.06);
  mix-blend-mode: overlay;
  white-space: nowrap;
  user-select: none;
  filter: blur(1px);
}
@media (max-width: 640px) {
  .hero-watermark span { font-size: clamp(2.5rem, 16vw, 4.5rem); }
}

/* =====================================================
   Digital cycle strip — the physical ecosystem's digital
   counterpart, made visible as a connected companion, not
   a separate component. Highlights when the "Dashboard"
   node on the organic path is hovered.
   ===================================================== */
.digital-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 40px auto 0;
  max-width: 640px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.digital-strip__label {
  width: 100%; text-align: center; margin-bottom: 14px;
  font-size: var(--text-kicker); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.digital-step {
  font-size: 12.5px; font-weight: 500; color: var(--ink-faint);
  padding: 6px 12px; border-radius: var(--radius-pill);
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.digital-step:not(:last-child)::after { content: '→'; margin-left: 10px; color: var(--line); }
.digital-strip.is-linked .digital-step { color: var(--ink-soft); }
.digital-strip.is-linked .digital-step--active { color: var(--primary-deep); background: rgba(46,125,50,.1); font-weight: 700; }

/* =====================================================
   /tim — Featured Team Hero (v5). Extracted directly from the
   Amber Aviation corporate-team reference: LIGHT glossy studio
   background (not a busy photo blur — a crafted gradient stage
   that the sharp portrait stands on), portrait fills ~55-58%
   of hero width and ~90% of its height (dominant, not decor),
   text column is a compact vertical stack (eyebrow → Name →
   Role → Description, no competing headline eating the column),
   arrows hug the true viewport edges, glass strip is light and
   has a reflection highlight. Two-column grid so text never
   crowds the portrait. No quote/CTA bar — the hero is the whole
   story here (removed per explicit feedback).
   ===================================================== */
.team-hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(300px, 40%) 1fr;
  align-items: center;
}
.team-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(52% 60% at 76% 42%, rgba(255,255,255,.95) 0%, rgba(236,242,237,.5) 55%, transparent 80%),
    linear-gradient(102deg, #E7EDE8 0%, #F1F5F1 40%, #FBFDFB 72%, #F3F7F3 100%);
}
.team-hero__bloom {
  position: absolute; z-index: 1; pointer-events: none;
  right: 2%; top: 12%; width: 46%; height: 76%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(46,125,50,.14), transparent 72%);
  filter: blur(30px);
}
.team-hero__vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(20,30,20,.06) 0%, transparent 30%);
}

.team-hero__portrait {
  position: relative; z-index: 2;
  grid-column: 2;
  height: 100%;
  overflow: visible;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding-top: clamp(64px, 8vh, 100px);
  /* fade the bottom into the glass strip smoothly */
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 96%);
}
.team-hero__portrait img {
  /* Preserve original waist-up framing: don't force cover, don't zoom */
  width: min(38vw, 540px); height: auto;
  max-height: 92vh;
  object-fit: contain; object-position: top center;
  opacity: 0; transition: opacity 400ms var(--ease-out);
  filter: drop-shadow(0 28px 36px rgba(20,30,20,.20));
}
.team-hero__portrait img.is-visible { opacity: 1; }
.team-hero__portrait-initials {
  width: clamp(240px, 26vw, 340px); aspect-ratio: 3/4; margin-bottom: 6%;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); background: rgba(255,255,255,.7);
  border: 1px solid rgba(20,30,20,.1);
  font-family: var(--font-display); font-weight: 700; font-size: 64px; color: var(--ink-faint);
}

.team-hero__content {
  position: relative; z-index: 3;
  grid-column: 1;
  padding: 0 32px 0 clamp(64px,7vw,120px);
}
.team-hero__kicker2, .team-hero__name, .team-hero__role, .team-hero__desc, .team-hero__progress { opacity: 0; transition: opacity 300ms var(--ease-out); }
.team-hero__kicker2.is-visible, .team-hero__name.is-visible, .team-hero__role.is-visible, .team-hero__desc.is-visible, .team-hero__progress.is-visible { opacity: 1; }

.team-hero__progress { display: flex; align-items: center; gap: 10px; }
.team-hero__progress-label { font-size: 11.5px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.team-hero__progress-track { width: 40px; height: 1px; background: var(--line); overflow: hidden; }
.team-hero__progress-fill { display: block; height: 100%; background: var(--primary); transition: width 400ms var(--ease-out); }

.team-hero__name {
  margin-top: 16px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem); letter-spacing: -0.02em; line-height: 1.03;
  color: var(--ink);
}
.team-hero__role { display: block; margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--primary-deep); }
.team-hero__desc { margin-top: 18px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); max-width: 42ch; }

/* Floating arrows — icon only, edge-hugging, no button chrome */
.team-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-faint); font-size: 20px;
  transition: color var(--dur-fast) var(--ease-out);
}
.team-hero__arrow:hover { color: var(--primary-deep); }
.team-hero__arrow--prev { left: clamp(12px,2vw,32px); }
.team-hero__arrow--next { right: clamp(48px,14vw,220px); }

/* Glass strip — light frosted bar with a top reflection highlight */
.team-hero__strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 20px var(--gutter);
  background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.62) 100%);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-top: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 -8px 24px rgba(20,30,20,.05);
}
.team-hero__thumbs { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.team-hero__thumb {
  position: relative;
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(255,255,255,.9); cursor: pointer; background: var(--white);
  opacity: .75;
  box-shadow: 0 6px 16px rgba(20,30,20,.14), inset 0 0 0 1px rgba(20,30,20,.04);
  transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.team-hero__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-hero__thumb-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--ink-faint); }
.team-hero__thumb:hover { opacity: .92; }
.team-hero__thumb.is-active {
  opacity: 1; border-color: var(--primary); transform: scale(1.28);
  box-shadow: 0 0 0 6px rgba(46,125,50,.14), 0 8px 20px rgba(46,125,50,.22), inset 0 0 0 1px rgba(255,255,255,.6);
}

@media (max-width: 900px) {
  .team-hero { height: auto; min-height: 100vh; grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding-top: clamp(88px,14vw,110px); }
  .team-hero__content { grid-column: 1; grid-row: 1; padding: 0 clamp(24px,6vw,40px); text-align: center; }
  .team-hero__desc { margin-inline: auto; }
  .team-hero__progress { justify-content: center; }
  .team-hero__portrait {
    grid-column: 1; grid-row: 2; justify-content: center; align-items: flex-end;
    /* Tall enough to show head-to-waist even on mobile */
    padding: 12px 0 clamp(150px,28vw,190px); height: auto;
    min-height: clamp(380px, 60vh, 580px);
    mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 97%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 97%);
  }
  /* Narrower on mobile so the full height of head-to-waist fits without zooming in */
  .team-hero__portrait img { width: min(58vw, 340px); max-height: none; }
  .team-hero__arrow { width: 40px; height: 40px; }
  .team-hero__arrow--next { right: clamp(12px,4vw,32px); }
}
@media (max-width: 640px) {
  .team-hero__name { font-size: clamp(1.9rem, 1.5rem + 3.4vw, 2.4rem); }
  .team-hero__thumb { width: 40px; height: 40px; }
}

/* =====================================================
   /tim — Seluruh Anggota directory. Rectangular editorial
   cards, not circles (the whole site is editorial, circular
   avatars read as "old campus website"). Grouped by division.
   ===================================================== */
.team-group { margin-top: var(--pad-large); }
.team-group:first-of-type { margin-top: 0; }
.team-group__label {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 28px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px 20px;
}
.team-card__portrait {
  width: 100%; aspect-ratio: 3/4; border-radius: var(--radius-md);
  background: var(--warm-white); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.team-card__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card__initials { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 3vw, 24px); color: var(--ink-faint); }
.team-card__name { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 13.5px; color: var(--ink); }
.team-card__role { margin-top: 2px; font-size: 11.5px; color: var(--ink-faint); }

@media (max-width: 900px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 18px; }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
}

/* =====================================================
   /tim — implementation timeline. One horizontal line,
   generous whitespace, month labels — editorial, not a
   project-management Gantt.
   ===================================================== */
.team-timeline { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: var(--pad-large); }
.team-timeline__step { position: relative; padding-top: 24px; border-top: 1px solid var(--line); padding-right: 20px; }
.team-timeline__step::before {
  content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
}
.team-timeline__month { font-size: var(--text-kicker); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-deep); }
.team-timeline__title { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.team-timeline__text { margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }

@media (max-width: 900px) {
  .team-timeline { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
}
@media (max-width: 640px) {
  .team-timeline { grid-template-columns: 1fr; gap: 28px; }
}


/* =====================================================
   /program — CLEAN INFORMATIVE PARADIGM (replaces the deprecated
   cinematic/scroll-driven module removed above).

   Design rules this module follows, decided after four rounds of review:
   - Natural browser scrolling only. No pinned scenes, no scroll
     hijacking, no forced state progression. Sticky is used nowhere here.
   - Photography is prominent but simple: contained, well-cropped,
     never a full-viewport stage with text floating over noise.
   - Text NEVER sits directly on a photograph without a solid surface.
     Contrast is guaranteed by the layout, never by luck.
   - Cards are containers for information, allowed and encouraged.
   - Background tone changes carry section rhythm.
   - One circular-system treatment on the page, and it is a plain
     readable chain rather than a radial chart.
   - Every number on the page is either sourced or explicitly a target.
   ===================================================== */

.ph-eyebrow {
  display: inline-block; font-family: var(--font-display);
  font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--primary-deep);
}
.ph-eyebrow--light { color: #A8DDA8; }

.ph-h2 {
  margin-top: 14px;
  font-family: var(--font-editorial, var(--font-display)); font-weight: 600;
  font-size: clamp(1.65rem, 1.25rem + 1.5vw, 2.5rem);
  line-height: 1.14; letter-spacing: -0.01em; color: var(--ink);
}
.ph-h2 em { font-style: italic; font-weight: 500; color: var(--primary-deep); }
.ph-h2--light { color: #fff; }
.ph-h4 { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.ph-h4 i { font-size: 15px; color: var(--primary-deep); }

.ph-lead { margin-top: 16px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); max-width: 60ch; }
.ph-lead--center { margin-inline: auto; text-align: center; }
.ph-lead--light { color: rgba(255,255,255,.76); }
.ph-lead strong { color: var(--ink); font-weight: 700; }

.ph-note { margin-top: 20px; display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.55; color: var(--ink-faint); }
.ph-note i { font-size: 14px; margin-top: 1px; flex-shrink: 0; }
.ph-note--light { color: rgba(255,255,255,.55); justify-content: center; }

.ph-secthead { text-align: center; max-width: 720px; margin-inline: auto; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: #fff; background: var(--primary); border-radius: var(--radius-pill);
  padding: 13px 22px; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-primary:hover { background: var(--primary-deep); transform: translateY(-1px); }
.btn-primary i { transition: transform var(--dur-fast) var(--ease-out); }
.btn-primary:hover i { transform: translateX(3px); }
.btn-primary--light { background: #fff; color: var(--primary-deep); }
.btn-primary--light:hover { background: #EFF6EF; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  color: var(--ink); background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 12px 20px; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn-ghost:hover { border-color: var(--primary); background: rgba(46,125,50,.05); }
.btn-ghost--light { color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost--light:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* ---- 01 HERO ---- */
.ph-hero { background: linear-gradient(180deg, #F2F6EE 0%, var(--warm-white) 100%); padding: clamp(52px,7vw,84px) 0 0; }
.ph-hero__inner { text-align: center; max-width: 760px; margin-inline: auto; }
.ph-hero__title {
  margin-top: 16px;
  font-family: var(--font-editorial, var(--font-display)); font-weight: 600;
  font-size: clamp(1.95rem, 1.35rem + 2.5vw, 3.3rem);
  line-height: 1.12; letter-spacing: -0.015em; color: var(--ink);
}
.ph-hero__title em { font-style: italic; font-weight: 500; color: var(--primary-deep); }
.ph-hero__sub { margin: 18px auto 0; max-width: 58ch; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.ph-hero__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.ph-hero__figure {
  position: relative; margin: clamp(40px,5vw,64px) 0 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden;
  aspect-ratio: 21/9; background: var(--ink-faint);
}
.ph-hero__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-hero__card {
  position: absolute; left: clamp(16px,3vw,32px); bottom: clamp(16px,3vw,32px);
  display: flex; flex-direction: column; gap: 3px;
  background: rgba(255,255,255,.97); border-radius: var(--radius-md);
  padding: 14px 18px; box-shadow: 0 18px 44px rgba(20,21,15,.18);
}
.ph-hero__card-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.ph-hero__card-label i { font-size: 13px; color: var(--primary-deep); }
.ph-hero__card-body { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.ph-hero__card-meta { font-size: 12px; color: var(--ink-soft); }

/* ---- 02 OVERVIEW ---- */
.ph-overview { background: var(--warm-white); padding: clamp(56px,7vw,88px) 0; }
.ph-overview__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px,4vw,64px); align-items: start; }
.ph-chiprow { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.ph-chiprow li {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 8px 15px;
}
.ph-chiprow i { font-size: 14px; color: var(--primary-deep); }

/* ---- 03 OUR PROGRAMS ---- */
.ph-programs { background: #F4F7F1; padding: clamp(64px,8vw,100px) 0; }
.ph-cardgrid { margin-top: clamp(32px,4vw,48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.ph-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px 22px 26px; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ph-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(20,21,15,.09); border-color: rgba(46,125,50,.3); }
.ph-card__num { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; color: var(--ink-faint); }
.ph-card__icon { margin-top: 14px; font-size: 26px; color: var(--primary); }
.ph-card__title { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.ph-card__text { margin-top: 7px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }

/* ---- 04/07 PROGRAM DETAIL ---- */
.ph-detail { background: var(--warm-white); padding: clamp(64px,8vw,100px) 0; }
.ph-detail--alt { background: var(--white); }
.ph-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: center; }
.ph-detail__body { min-width: 0; }
.ph-detail__media { position: relative; min-width: 0; }
.ph-detail__media > img { width: 100%; border-radius: var(--radius-lg); display: block; aspect-ratio: 4/3; object-fit: cover; }

.ph-steps { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: s; }
.ph-steps li { counter-increment: s; position: relative; padding: 11px 0 11px 40px; border-top: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); }
.ph-steps li::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 11px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--primary);
}

.ph-statcard {
  position: absolute; right: -12px; bottom: -20px; width: min(258px, 74%);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 16px 18px; box-shadow: 0 18px 44px rgba(20,21,15,.14);
}
.ph-statcard__label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.ph-statcard__foot { display: block; margin-top: 10px; font-size: 10.5px; color: var(--ink-faint); }
.ph-bars { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ph-bars li { display: grid; grid-template-columns: 62px 1fr 30px; align-items: center; gap: 8px; }
.ph-bars__k { font-size: 11px; color: var(--ink-soft); }
.ph-bars__t { height: 5px; border-radius: 3px; background: rgba(20,21,15,.08); overflow: hidden; }
.ph-bars__t > span { display: block; height: 100%; width: var(--p); background: var(--primary); border-radius: 3px; }
.ph-bars__v { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; color: var(--ink); text-align: right; }

.ph-twocol { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ph-list { margin: 10px 0 0; padding: 0; list-style: none; }
.ph-list li { position: relative; padding: 5px 0 5px 16px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.ph-list li::before { content: ''; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
.ph-list em { font-style: italic; color: var(--ink); }
.ph-list--split { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.ph-list--split li { display: flex; align-items: center; gap: 8px; padding-left: 0; color: var(--ink); font-weight: 500; }
.ph-list--split li::before { display: none; }
.ph-list--split i { font-size: 15px; color: var(--primary-deep); flex-shrink: 0; }

/* ---- 06 CIRCULAR SYSTEM (the page's only one) ---- */
.ph-cycle { background: #1C2B1E; padding: clamp(64px,8vw,100px) 0; }
.ph-flow { margin: clamp(36px,5vw,52px) 0 0; padding: 0; list-style: none; display: flex; align-items: stretch; justify-content: center; gap: 8px; }
.ph-flow__step {
  flex: 1 1 0; max-width: 240px; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg); padding: 22px 18px;
}
.ph-flow__step--key { background: var(--primary); border-color: var(--primary); }
.ph-flow__step > i { font-size: 26px; color: #A8DDA8; }
.ph-flow__step--key > i { color: #fff; }
.ph-flow__t { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; }
.ph-flow__d { margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.62); }
.ph-flow__step--key .ph-flow__d { color: rgba(255,255,255,.82); }
.ph-flow__arrow { display: flex; align-items: center; color: rgba(255,255,255,.3); flex: 0 0 auto; }
.ph-flow__arrow i { font-size: 20px; }
.ph-loopback {
  margin: 22px auto 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; color: rgba(255,255,255,.62);
}
.ph-loopback i { font-size: 15px; color: #A8DDA8; }

/* ---- 07 UI FRAGMENT ---- */
.ph-detail__media--ui { display: flex; justify-content: center; }
.ph-ui { width: min(340px, 100%); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 48px rgba(20,21,15,.1); }
.ph-ui__bar { display: flex; align-items: center; gap: 5px; padding: 12px 16px; background: #F4F5F1; border-bottom: 1px solid var(--line); }
.ph-ui__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(20,21,15,.16); }
.ph-ui__title { margin-left: 8px; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--ink-soft); }
.ph-ui__body { padding: 8px 16px 18px; }
.ph-ui__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.ph-ui__row b { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--ink-faint); }
.ph-ui__btn { margin-top: 16px; width: 100%; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #fff; background: var(--primary); border: none; border-radius: var(--radius-pill); padding: 12px; opacity: .55; cursor: not-allowed; }
.ph-ui__hint { display: block; margin-top: 10px; text-align: center; font-size: 10.5px; color: var(--ink-faint); }

/* ---- 08 PEOPLE ---- */
.ph-people { background: #F4F7F1; padding: clamp(64px,8vw,100px) 0; }
.ph-people__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px,5vw,64px); align-items: center; }
.ph-people__figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; }
.ph-people__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-factrow { margin-top: 26px; display: flex; gap: 40px; }
.ph-factrow div { display: flex; flex-direction: column; }
.ph-factrow b { font-family: var(--font-editorial, var(--font-display)); font-weight: 600; font-size: clamp(1.7rem,1.4rem+1vw,2.2rem); color: var(--primary-deep); line-height: 1; }
.ph-factrow span { margin-top: 5px; font-size: 12.5px; color: var(--ink-soft); }

/* ---- 09 TARGETS ---- */
.ph-targets { background: var(--white); padding: clamp(64px,8vw,100px) 0; }
.ph-targetgrid { margin-top: clamp(32px,4vw,48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; }
.ph-target { background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 22px; text-align: center; }
.ph-target b { display: block; font-family: var(--font-editorial, var(--font-display)); font-weight: 600; font-size: clamp(1.9rem,1.5rem+1.2vw,2.6rem); color: var(--primary); line-height: 1; }
.ph-target span { display: block; margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

/* ---- 10 ROADMAP ---- */
.ph-roadmap { background: var(--warm-white); padding: clamp(64px,8vw,100px) 0; }
.ph-timeline { margin: clamp(36px,5vw,56px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,36px); }
.ph-timeline li { position: relative; padding-top: 30px; border-top: 2px solid var(--line); }
.ph-timeline li:first-child { border-top-color: var(--primary); }
.ph-timeline li::before { content: ''; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 2px solid var(--primary); }
.ph-timeline__year { font-family: var(--font-editorial, var(--font-display)); font-weight: 600; font-size: clamp(1.6rem,1.3rem+1vw,2.1rem); color: var(--ink); line-height: 1; }
.ph-timeline__phase { display: block; margin-top: 7px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--primary-deep); text-transform: uppercase; }
.ph-timeline p { margin-top: 12px; font-size: 13px; line-height: 1.65; color: var(--ink-soft); }

/* ---- 11 CTA ---- */
.ph-cta { background: var(--primary-deep); padding: clamp(64px,8vw,104px) 0; text-align: center; }
.ph-cta__title { font-family: var(--font-editorial, var(--font-display)); font-weight: 600; font-size: clamp(1.5rem,1.2rem+1.4vw,2.3rem); line-height: 1.25; color: #fff; }
.ph-cta__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---- RESPONSIVE: intentional recomposition, not a shrunk desktop ---- */
@media (max-width: 900px) {
  .ph-overview__grid { grid-template-columns: 1fr; gap: 20px; }
  .ph-detail__grid { grid-template-columns: 1fr; gap: 36px; }
  .ph-detail__media { order: -1; }
  .ph-people__grid { grid-template-columns: 1fr; gap: 28px; }
  .ph-people__figure { order: -1; }
  .ph-hero__figure { aspect-ratio: 16/10; }
  .ph-timeline { grid-template-columns: 1fr; gap: 28px; }
  .ph-flow { flex-direction: column; align-items: stretch; gap: 6px; }
  .ph-flow__step { max-width: none; flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 16px 18px; flex-wrap: wrap; }
  .ph-flow__step > i { font-size: 22px; flex-shrink: 0; }
  .ph-flow__t { margin-top: 0; }
  .ph-flow__d { margin-top: 2px; flex-basis: 100%; }
  .ph-flow__arrow { justify-content: center; }
  .ph-flow__arrow i { transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .ph-hero__figure { aspect-ratio: 4/3; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .ph-hero__card { position: static; margin: 14px var(--gutter) 0; box-shadow: none; border: 1px solid var(--line); }
  .ph-statcard { position: static; width: auto; margin-top: 16px; right: auto; bottom: auto; box-shadow: none; }
  .ph-twocol { grid-template-columns: 1fr; gap: 20px; }
  .ph-list--split { grid-template-columns: 1fr; }
  .ph-factrow { gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-card, .btn-primary { transition: none; }
  .ph-card:hover, .btn-primary:hover { transform: none; }
}

/* Five programs in a repeat(auto-fit,minmax()) grid left an orphaned card alone on row two
   at desktop widths. Force a balanced 3 + 2 arrangement instead. */
@media (min-width: 901px) {
  .ph-cardgrid { grid-template-columns: repeat(6, 1fr); }
  .ph-cardgrid .ph-card { grid-column: span 2; }
  .ph-cardgrid .ph-card:nth-child(4) { grid-column: 2 / span 2; }
  .ph-cardgrid .ph-card:nth-child(5) { grid-column: 4 / span 2; }
}

/* .ph-card is an <a>; without an explicit colour its children inherit the browser's default
   link blue (the card titles rendered blue). Anchors used as layout surfaces must reset colour. */
.ph-card, .ph-card:visited { color: inherit; }

/* Global `.web h1..h4 { color: inherit }` has specificity (0,1,1) and beats single-class
   heading rules like .ph-h2--light / .ph-cta__title — headings on the dark sections were
   inheriting dark ink and rendering nearly invisible. Because those headings inherit, the
   correct fix is to set the colour on the dark section CONTAINERS, not on the headings. */
.ph-cycle { color: #fff; }
.ph-cta { color: #fff; }
.web .ph-h2--light { color: #fff; }
.web .ph-cta__title { color: #fff; }

/* `.web p { color: var(--ink-soft) }` is also (0,1,1) and beats the single-class light
   variants, so every <p> on the dark sections stayed dark. Prefix the light variants with
   .web so they win. Applies to any future dark section on this page too. */
.web .ph-lead--light { color: rgba(255,255,255,.78); }
.web .ph-note--light { color: rgba(255,255,255,.6); }
.web .ph-loopback { color: rgba(255,255,255,.7); }
.web .ph-flow__d { color: rgba(255,255,255,.66); }
.web .ph-flow__step--key .ph-flow__d { color: rgba(255,255,255,.85); }

/* =====================================================
   /program — art-direction pass on the clean foundation.
   The clean rebuild fixed the structure but read as a generic template:
   every section was a text/image split and all five programmes were
   equal-weight cards. This pass adds authorship without adding
   complexity: layout now follows the SHAPE OF THE INFORMATION.
     hero        -> environmental composition (text inside the image)
     programmes  -> one flagship + four supporting (not five equals)
     sanitasi    -> process composition (the content is sequential)
     limbah      -> system chain
     pencatatan  -> product/interface showcase
     kelompok    -> human editorial
   Natural scrolling and the contrast rules from the previous pass hold.
   ===================================================== */

/* ---- HERO: one composition ---- */
.ph-hero { background: var(--warm-white); padding: 0 0 clamp(48px,6vw,72px); }
.ph-hero__stage { position: relative; min-height: clamp(440px, 62vh, 620px); display: flex; align-items: center; overflow: hidden; }
.ph-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Guarantees text legibility regardless of what the photograph happens to contain. */
.ph-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(14,26,16,.86) 0%, rgba(14,26,16,.6) 42%, rgba(14,26,16,.22) 72%, rgba(14,26,16,.34) 100%);
}
.ph-hero__content { position: relative; z-index: 2; padding-top: clamp(48px,7vh,80px); padding-bottom: clamp(72px,9vh,104px); }
.ph-hero__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-pill); padding: 7px 15px; backdrop-filter: blur(8px);
}
.ph-hero__dot { width: 6px; height: 6px; border-radius: 50%; background: #C6E86B; }
.web .ph-hero__title {
  margin-top: 20px; max-width: 17ch;
  font-family: var(--font-editorial, var(--font-display)); font-weight: 600;
  font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3.1rem); line-height: 1.1; letter-spacing: -0.015em;
  color: #fff;
}
.web .ph-hero__sub { margin-top: 16px; max-width: 46ch; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.82); }
.ph-hero__content .btn-primary { margin-top: 26px; }
.btn-primary--onphoto { background: #fff; color: var(--primary-deep); }
.btn-primary--onphoto:hover { background: #EFF6EF; }

/* White panel overlapping the image edge. */
.ph-hero__panel {
  position: relative; z-index: 3; margin-top: clamp(-56px,-5vw,-36px);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(24px,4vw,56px); align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px,3vw,34px) clamp(24px,3.5vw,40px);
  box-shadow: 0 24px 60px rgba(20,21,15,.1);
}
.web .ph-hero__panel-main p { margin-top: 10px; max-width: 52ch; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.ph-hero__panel-facts { display: flex; gap: clamp(24px,3vw,44px); }
.ph-hero__panel-facts div { display: flex; flex-direction: column; }
.ph-hero__panel-facts b { font-family: var(--font-editorial, var(--font-display)); font-weight: 600; font-size: clamp(1.5rem,1.2rem+.9vw,2rem); color: var(--primary-deep); line-height: 1; }
.ph-hero__panel-facts span { margin-top: 5px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

/* ---- PROGRAMMES: flagship + supporting ---- */
.ph-proggrid { margin-top: clamp(32px,4vw,48px); display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; align-items: stretch; }
.ph-feature {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 420px; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform var(--dur-fast) var(--ease-out);
}
.ph-feature:hover { transform: translateY(-3px); }
.ph-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.ph-feature:hover img { transform: scale(1.03); }
.ph-feature::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,26,16,.05) 30%, rgba(14,26,16,.86) 100%);
}
.ph-feature__body { position: relative; z-index: 2; padding: clamp(24px,3vw,34px); }
.ph-feature__num { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #C6E86B; }
.web .ph-feature__title { margin-top: 10px; font-family: var(--font-editorial, var(--font-display)); font-weight: 600; font-size: clamp(1.3rem,1.1rem+.7vw,1.75rem); line-height: 1.2; color: #fff; }
.web .ph-feature__text { margin-top: 10px; max-width: 40ch; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.8); }
.ph-feature__link { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #fff; }
.ph-feature__link i { transition: transform var(--dur-fast) var(--ease-out); }
.ph-feature:hover .ph-feature__link i { transform: translateX(3px); }

.ph-progstack { display: grid; grid-template-rows: repeat(4,1fr); gap: 12px; }
.ph-mini {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 18px 20px; text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ph-mini:hover { border-color: rgba(46,125,50,.35); transform: translateX(3px); }
.ph-mini > i { font-size: 20px; color: var(--primary); margin-top: 2px; flex-shrink: 0; }
.ph-mini__num { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.web .ph-mini__title { margin-top: 3px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.web .ph-mini__text { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

/* ---- PROCESS composition (sanitasi) ---- */
.ph-process { background: var(--white); padding: clamp(64px,8vw,100px) 0; }
.ph-processgrid { margin-top: clamp(32px,4vw,48px); display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.ph-pstep {
  background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 22px 24px;
}
.ph-pstep--lead {
  position: relative; grid-row: span 2; padding: 0; overflow: hidden; border: none;
  display: flex; align-items: flex-end; min-height: 340px;
}
.ph-pstep--lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-pstep--lead::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,16,.06) 35%, rgba(14,26,16,.88) 100%); }
.ph-pstep__overlay { position: relative; z-index: 2; padding: clamp(22px,3vw,30px); }
.ph-pstep__tag { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-deep); }
.ph-pstep--lead .ph-pstep__tag { color: #C6E86B; }
.web .ph-pstep__title { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.web .ph-pstep--lead .ph-pstep__title { font-family: var(--font-editorial, var(--font-display)); font-weight: 600; font-size: clamp(1.3rem,1.1rem+.6vw,1.6rem); color: #fff; }
.web .ph-pstep__text { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.web .ph-pstep--lead .ph-pstep__text { max-width: 42ch; color: rgba(255,255,255,.82); }
.ph-pstep__text em { font-style: italic; color: var(--ink); }
.ph-pstep--lead .ph-pstep__text em { color: #fff; }
.ph-note--center { justify-content: center; margin-inline: auto; }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .ph-hero__panel { grid-template-columns: 1fr; gap: 22px; }
  .ph-hero__panel-facts { flex-wrap: wrap; gap: 22px 32px; }
  .ph-proggrid { grid-template-columns: 1fr; }
  .ph-feature { min-height: 320px; }
  .ph-progstack { grid-template-rows: none; }
  .ph-processgrid { grid-template-columns: 1fr 1fr; }
  .ph-pstep--lead { grid-column: span 2; grid-row: auto; min-height: 280px; }
}
@media (max-width: 640px) {
  .ph-hero__stage { min-height: 400px; }
  .ph-hero__scrim { background: linear-gradient(180deg, rgba(14,26,16,.5) 0%, rgba(14,26,16,.72) 60%, rgba(14,26,16,.86) 100%); }
  .ph-hero__panel { margin-top: -28px; }
  .ph-processgrid { grid-template-columns: 1fr; }
  .ph-pstep--lead { grid-column: auto; }
}

/* Four steps in a 3-column grid with the lead spanning two rows left one empty cell beside
   the last step. Let the final step span the remaining two columns. */
@media (min-width: 901px) {
  .ph-processgrid .ph-pstep:last-of-type { grid-column: span 2; }
}

/* =====================================================
   /program — reference GEOMETRY pass.
   Previous passes reproduced the references' surface (green, rounded
   cards, farm photos) but not their spatial grammar, so the result read
   as "another site with a similar palette". This pass reconstructs the
   actual geometry:
     hero    -> contained shell, single centred axis, wide image field
                with a BROAD ELLIPTICAL LOWER BOUNDARY, then flat
                information continuation (no card floating on the photo)
     intro   -> five-state visual index, large stage + thin translucent
                caption (not five equal cards, not a SaaS carousel)
     limbah  -> connected system on a drawn track with a visible return
                path (not four cards in a row)
     closing -> ONE environmental composition: photo stage + message +
                large white panel inset from the edges carrying the whole
                footer (not a dark CTA block plus a separate footer bar)
   Natural scrolling, contrast and specificity rules from earlier passes
   all still apply.
   ===================================================== */

/* ---------- 01 HERO ---------- */
.ph-hero { background: var(--white); padding: 0 0 clamp(40px,5vw,64px); }
.ph-hero__shell {
  position: relative; margin: 0 auto; max-width: 1360px;
  padding: clamp(40px,5vw,64px) var(--gutter) 0;
  background: linear-gradient(180deg, #EAF2E4 0%, #F3F7EF 55%, #F7F9F4 100%);
  border-radius: 0 0 clamp(24px,3vw,40px) clamp(24px,3vw,40px);
  overflow: hidden;
}
/* Single centred axis: eyebrow, heading, copy and CTA all share it. */
.ph-hero__head { max-width: 760px; margin: 0 auto; text-align: center; }
.ph-hero__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--primary-deep);
  background: rgba(255,255,255,.7); border: 1px solid rgba(46,125,50,.18);
  border-radius: var(--radius-pill); padding: 7px 15px;
}
.ph-hero__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.web .ph-hero__title {
  margin-top: 18px;
  font-family: var(--font-editorial, var(--font-display)); font-weight: 600;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1.12; letter-spacing: -0.015em;
  color: var(--ink);
}
.web .ph-hero__sub { margin: 16px auto 0; max-width: 54ch; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.ph-hero__cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* THE SIGNATURE: a broad elliptical lower boundary, not a rectangle and not small corner
   radii. Expressed as an elliptical border-radius so it scales with the container rather
   than breaking at narrow widths. */
.ph-hero__img {
  position: relative; margin: clamp(32px,4vw,52px) 0 0; overflow: hidden;
  aspect-ratio: 21/8;
  border-radius: clamp(20px,2vw,28px) clamp(20px,2vw,28px) 46% 46% / clamp(20px,2vw,28px) clamp(20px,2vw,28px) 18% 18%;
}
.ph-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Information continuation: flat, beneath the curve. Not a card. */
.ph-herofacts {
  margin-top: clamp(32px,4vw,52px);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(24px,4vw,64px); align-items: center;
}
.web .ph-herofacts__statement { max-width: 46ch; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.ph-herofacts__metrics { display: flex; gap: clamp(28px,4vw,56px); }
.ph-herofacts__metrics div { display: flex; flex-direction: column; }
.ph-herofacts__metrics b { font-family: var(--font-editorial, var(--font-display)); font-weight: 600; font-size: clamp(1.6rem,1.3rem+1vw,2.2rem); color: var(--ink); line-height: 1; }
.ph-herofacts__metrics span { margin-top: 6px; font-size: 12px; color: var(--ink-faint); white-space: nowrap; }

/* ---------- 03 PROGRAM INTRODUCTION SLIDER ---------- */
.ph-slider { margin-top: clamp(32px,4vw,48px); }
.ph-slider__stage {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 16/7; background: var(--ink-faint); touch-action: pan-y;
}
.ph-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .5s var(--ease-out); }
.ph-slide.is-active { opacity: 1; }
.ph-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.2s var(--ease-out); }
.ph-slide.is-active img { transform: scale(1); }
/* Thin translucent caption, an editorial caption rather than a dashboard card. */
.ph-slide__cap {
  position: absolute; left: clamp(16px,2.5vw,32px); bottom: clamp(16px,2.5vw,32px);
  max-width: min(440px, 72%);
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border-radius: var(--radius-md); padding: 16px 20px;
}
.ph-slide__num { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-deep); }
.web .ph-slide__title { margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.web .ph-slide__text { margin-top: 5px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }

.ph-slider__bar { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ph-slider__dots { display: flex; gap: 6px; }
.ph-dot {
  font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .06em;
  color: var(--ink-faint); background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 7px 13px; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ph-dot:hover { border-color: rgba(46,125,50,.4); color: var(--ink); }
.ph-dot.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.ph-slider__nav { display: flex; align-items: center; gap: 10px; }
.ph-slider__count { font-family: var(--font-display); font-size: 12px; letter-spacing: .1em; color: var(--ink-faint); }
.ph-slider__count b { color: var(--ink); font-size: 14px; }
.ph-arrow {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--white); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ph-arrow:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.ph-arrow:focus-visible, .ph-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- 06 BIODIGESTER SYSTEM ---------- */
.ph-sys { position: relative; margin-top: clamp(40px,5vw,60px); }
.ph-sys__track { position: absolute; top: 27px; left: 6%; right: 6%; height: 2px; background: rgba(255,255,255,.16); }
.ph-sys__fill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--primary) 0%, #A8DDA8 100%); transform-origin: left; animation: sysdraw 1.4s var(--ease-out) both; }
@keyframes sysdraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ph-sys__nodes { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.ph-sys__node { text-align: center; cursor: default; transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.ph-sys.has-focus .ph-sys__node { opacity: .42; }
.ph-sys.has-focus .ph-sys__node.is-on { opacity: 1; transform: translateY(-3px); }
.ph-sys__dot {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 50%;
  background: #24361F; border: 2px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: #A8DDA8;
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.ph-sys__node--key .ph-sys__dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.ph-sys__node.is-on .ph-sys__dot { background: var(--primary); border-color: #A8DDA8; color: #fff; box-shadow: 0 0 0 6px rgba(46,125,50,.22); }
.web .ph-sys__t { display: block; margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: #fff; }
.web .ph-sys__d { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.6); max-width: 22ch; margin-inline: auto; }
/* The visible return path is what makes this read as a cycle rather than a line. */
.ph-sys__loop { position: relative; margin-top: 26px; display: flex; align-items: center; justify-content: center; }
.ph-sys__loopline { position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; border-top: 1px dashed rgba(255,255,255,.28); }
.ph-sys__looptext {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: #1C2B1E; padding: 0 16px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; color: #A8DDA8;
}

/* ---------- 11 CLOSING ENVIRONMENT + PANEL ---------- */
.ph-close { position: relative; padding: clamp(72px,9vw,120px) 0 clamp(24px,3vw,40px); overflow: hidden; }
.ph-close__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-close__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,22,14,.78) 0%, rgba(12,22,14,.62) 45%, rgba(12,22,14,.72) 100%); }
.ph-close__msg { position: relative; z-index: 2; text-align: center; }
.web .ph-close__title {
  margin: 0 auto; max-width: 22ch;
  font-family: var(--font-editorial, var(--font-display)); font-weight: 600;
  font-size: clamp(1.5rem,1.2rem+1.3vw,2.3rem); line-height: 1.22; color: #fff;
}
.ph-close__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Large panel, inset from the viewport so the environment stays visible around it. */
.ph-panel {
  position: relative; z-index: 2; margin-top: clamp(48px,6vw,80px);
  background: var(--white); border-radius: clamp(20px,2.5vw,32px);
  padding: clamp(28px,3.5vw,44px) clamp(24px,3.5vw,44px) clamp(20px,2.5vw,28px);
  box-shadow: 0 30px 70px rgba(0,0,0,.28);
}
.ph-panel__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(24px,3vw,44px); }
.ph-panel__logo { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); }
.web .ph-panel__brand p { margin-top: 12px; max-width: 34ch; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.ph-panel__col { display: flex; flex-direction: column; gap: 9px; }
.ph-panel__head { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.ph-panel__col a { font-size: 13px; color: var(--ink-soft); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.ph-panel__col a:hover { color: var(--primary-deep); }
.ph-panel__static { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.ph-panel__foot {
  margin-top: clamp(24px,3vw,36px); padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-faint);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .ph-hero__img { aspect-ratio: 16/10; border-radius: 18px 18px 38% 38% / 18px 18px 10% 10%; }
  .ph-herofacts { grid-template-columns: 1fr; gap: 22px; }
  .ph-herofacts__metrics { flex-wrap: wrap; gap: 22px 36px; }
  .ph-slider__stage { aspect-ratio: 4/3; }
  .ph-slide__cap { max-width: none; right: clamp(16px,2.5vw,32px); }
  .ph-sys__track { display: none; }
  .ph-sys__nodes { grid-template-columns: 1fr; gap: 10px; }
  .ph-sys__node { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; text-align: left; }
  .web .ph-sys__t { margin-top: 0; }
  .web .ph-sys__d { margin-inline: 0; max-width: none; }
  .ph-sys.has-focus .ph-sys__node.is-on { transform: none; }
  .ph-panel__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .ph-panel__brand { grid-column: span 2; }
}
@media (max-width: 640px) {
  .ph-hero__shell { padding-top: 32px; }
  .ph-hero__img { aspect-ratio: 3/2; }
  .ph-slider__bar { justify-content: center; }
  .ph-slider__stage { aspect-ratio: 3/4; }
  .ph-panel__grid { grid-template-columns: 1fr; }
  .ph-panel__brand { grid-column: auto; }
  .ph-panel__foot { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-slide, .ph-slide img, .ph-sys__node, .ph-sys__dot { transition: none; }
  .ph-sys__fill { animation: none; }
  .ph-slide.is-active img { transform: none; }
}

/* =====================================================
   /program — hero simplification + reference-5 peek rail.
   Two corrections:
   1. The hero previously stacked a pale-green shell BEHIND a separate
      inset image. Two competing layers. Now there is ONE layer: the
      photograph is the shell's own background, full bleed edge to edge,
      with the copy on top and a broad semicircular lower boundary. The
      farmer/cattle context sits at the bottom of that same section.
   2. The programme introduction is rebuilt as the reference's peek row:
      the active programme is a large landscape image card carrying a
      translucent caption, the following programmes stay visible as
      compact cards, and circular arrows sit at the rail's edges.
   ===================================================== */

/* ---------- HERO: one full-bleed photographic layer ---------- */
.ph-hero { background: var(--white); padding: 0; }
.ph-hero__shell {
  position: relative; margin: 0; max-width: none; padding: 0;
  min-height: clamp(520px, 76vh, 760px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* The broad semicircular lower edge belongs to the photographic layer itself. */
  border-radius: 0 0 50% 50% / 0 0 12% 12%;
}
.ph-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Minimum intervention needed for legibility. No second decorative layer. */
.ph-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,20,12,.52) 0%, rgba(10,20,12,.34) 45%, rgba(10,20,12,.58) 100%);
}
.ph-hero__head {
  position: relative; z-index: 2;
  width: min(760px, 92vw); margin: 0 auto; text-align: center;
  padding: clamp(60px,8vh,90px) 0;
}
.ph-hero__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-pill); padding: 7px 15px; backdrop-filter: blur(8px);
}
.ph-hero__dot { width: 6px; height: 6px; border-radius: 50%; background: #C6E86B; }
/* Symmetric block: heading, copy and buttons all share the same centred axis. */
.web .ph-hero__title {
  margin: 20px auto 0; max-width: 20ch;
  font-family: var(--font-editorial, var(--font-display)); font-weight: 600;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1.14; letter-spacing: -0.015em;
  color: #fff; text-wrap: balance;
}
.web .ph-hero__sub {
  margin: 16px auto 0; max-width: 52ch;
  font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.86); text-wrap: balance;
}
.ph-hero__cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn-ghost--onphoto { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.btn-ghost--onphoto:hover { border-color: #fff; background: rgba(255,255,255,.18); }

/* Context strip sits at the bottom of the same hero section. */
.ph-herofacts {
  margin-top: clamp(28px,4vw,44px); padding-bottom: clamp(8px,1vw,16px);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(24px,4vw,64px); align-items: center;
}

/* ---------- PROGRAMME RAIL (reference 5 grammar) ---------- */
.ph-rail { position: relative; margin-top: clamp(32px,4vw,48px); display: flex; align-items: center; gap: 12px; }
.ph-rail__mask { flex: 1; overflow: hidden; }
.ph-rail__track { display: flex; gap: 16px; transition: transform .55s var(--ease-out); }

.ph-step {
  position: relative; flex: 0 0 auto; width: 268px; min-height: 380px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: width .55s var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ph-step:hover { box-shadow: 0 14px 34px rgba(20,21,15,.1); }
.ph-step:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* Active card becomes the wide landscape stage and reveals its photograph. */
.ph-step.is-active { width: min(620px, 58vw); border-color: transparent; cursor: default; }

.ph-step img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .55s var(--ease-out); }
.ph-step.is-active img { opacity: 1; }
.ph-step.is-active::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,22,14,0) 45%, rgba(12,22,14,.72) 100%);
}

.ph-step__panel { position: relative; z-index: 2; padding: 22px; }
/* Inactive cards read as quiet text cards; the active one carries a translucent caption. */
.ph-step.is-active .ph-step__panel {
  margin: 16px; padding: 18px 20px; border-radius: var(--radius-md);
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(14px);
}
.ph-step__tag {
  display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  background: var(--warm-white); border-radius: var(--radius-pill); padding: 5px 11px;
}
.ph-step.is-active .ph-step__tag { color: #fff; background: rgba(255,255,255,.22); }
.web .ph-step__title { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.web .ph-step.is-active .ph-step__title { font-size: 21px; color: #fff; }
.web .ph-step__text { margin-top: 7px; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.web .ph-step.is-active .ph-step__text { font-size: 13.5px; color: rgba(255,255,255,.88); max-width: 42ch; }

.ph-railnav {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.ph-railnav:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); color: #fff; }
.ph-railnav:disabled { opacity: .3; cursor: default; }
.ph-railnav:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ph-rail__meter { margin-top: 16px; text-align: right; font-family: var(--font-display); font-size: 12px; letter-spacing: .12em; color: var(--ink-faint); }
.ph-rail__meter b { color: var(--ink); font-size: 15px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .ph-hero__shell { min-height: 66vh; border-radius: 0 0 50% 50% / 0 0 7% 7%; }
  .ph-step { width: 210px; min-height: 320px; }
  .ph-step.is-active { width: min(72vw, 460px); }
}
@media (max-width: 640px) {
  .ph-hero__shell { min-height: 62vh; border-radius: 0 0 50% 50% / 0 0 5% 5%; }
  .ph-hero__head { padding: 48px 0; }
  .ph-rail { gap: 8px; }
  .ph-railnav { width: 36px; height: 36px; }
  .ph-step { width: 132px; min-height: 300px; }
  .ph-step.is-active { width: min(78vw, 340px); }
  .web .ph-step__title { font-size: 14px; }
  .web .ph-step__text { font-size: 11.5px; }
  .ph-rail__meter { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-rail__track, .ph-step, .ph-step img { transition: none; }
}

/* Rail sizing fix. Setting `width` on flex items inside a block-level flex container let them
   collapse (an inline width:620px still computed to 2px). Size them with flex-basis instead and
   let the track be max-content so it genuinely overflows the mask and is translated into view. */
.ph-rail__track { width: max-content; align-items: stretch; }
.ph-step { flex: 0 0 268px; width: auto; }
.ph-step.is-active { flex: 0 0 min(620px, 58vw); width: auto; }
@media (max-width: 900px) {
  .ph-step { flex: 0 0 210px; width: auto; }
  .ph-step.is-active { flex: 0 0 min(72vw, 460px); width: auto; }
}
@media (max-width: 640px) {
  .ph-step { flex: 0 0 132px; width: auto; }
  .ph-step.is-active { flex: 0 0 min(78vw, 340px); width: auto; }
}

/* =====================================================
   /program — carousel rebuilt on native scroll-snap, sticky-nav scroll
   offset, and a real source-attribution component.

   The custom transform rail was abandoned: the active card drifted left,
   the final state left a large dead field, peek cards clipped into
   unreadable slivers, and the transform silently failed to apply at all.
   Native scroll-snap hands centring, momentum and touch to the browser,
   which removes that entire class of bug.
   ===================================================== */

/* ---------- Sticky-nav scroll offset ----------
   Anchored sections were landing under the sticky bar, so headings sat
   crushed against it. Every anchor target now reserves the bar's height. */
:root { --nav-h: 66px; }
#programs, #pakan, #sanitasi, #limbah, #pencatatan, #kelompok, #roadmap, .ph-detail, .ph-process, .ph-cycle,
#masalah, #luaran, #arsitektur {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

/* ---------- Scroll-snap rail ---------- */
.ph-rail__mask {
  flex: 1; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;   /* a swipe past the end must not navigate the page back */
}
.ph-rail__mask::-webkit-scrollbar { display: none; }
.ph-rail__mask:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: var(--radius-lg); }

/* Symmetric padding lets the first and last card reach the centre, which is what removes the
   dead field at either end. Percentages resolve against the mask, not the max-content track. */
.ph-rail__track {
  display: flex; gap: 16px; width: max-content;
  transform: none !important;          /* the old transform driver is fully retired */
  padding-inline: max(0px, calc((100% - 620px) / 2));
  align-items: stretch;
}
/* No scroll-snap-stop: it forbids scrolling past a snap point, so a jump from 01 to 05 halted
   after one card. Arrows move one step anyway; direct card selection needs multi-step travel. */
.ph-step { scroll-snap-align: center; }

/* Peek cards keep enough width to stay readable. 268px was clipping titles like
   "Limbah & Biodigester" into "Limbah & B...". */
.ph-step { flex: 0 0 300px; width: auto; min-height: 400px; }
.ph-step.is-active { flex: 0 0 min(620px, 62vw); width: auto; }
.web .ph-step__title { overflow-wrap: break-word; hyphens: none; }

/* ---------- Caption: editorial, not glassmorphism ----------
   The frosted panel was blurring the photograph so heavily that the image stopped reading.
   Lighter surface, minimal blur, so the picture stays present behind it. */
.ph-step.is-active .ph-step__panel {
  margin: 16px; padding: 16px 18px; border-radius: var(--radius-md);
  background: rgba(16,26,18,.52);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(3px);
}

/* ---------- Tablet: active card plus one deliberate preview ---------- */
@media (max-width: 1024px) {
  .ph-rail__track { padding-inline: max(0px, calc((100% - min(520px, 66vw)) / 2)); }
  .ph-step { flex: 0 0 240px; min-height: 360px; }
  .ph-step.is-active { flex: 0 0 min(520px, 66vw); }
}

/* ---------- Mobile: one full-width slide, recomposed, not shrunk ----------
   Desktop peek geometry at 375px produced a narrow image with a large empty side and a
   clipped caption. Mobile shows exactly one programme, edge to edge. */
@media (max-width: 760px) {
  .ph-rail { display: block; position: relative; }
  .ph-rail__mask { margin-inline: calc(-1 * var(--gutter)); padding-inline: 0; }
  .ph-rail__track { padding-inline: var(--gutter); gap: 12px; }
  .ph-step,
  .ph-step.is-active { flex: 0 0 calc(100vw - (var(--gutter) * 2)); min-height: 0; aspect-ratio: 4/5; }
  /* Every card shows its photograph on mobile; there is no peek state to distinguish. */
  .ph-step img { opacity: 1; }
  .ph-step::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(12,22,14,0) 40%, rgba(12,22,14,.8) 100%);
  }
  .ph-step__panel,
  .ph-step.is-active .ph-step__panel {
    margin: 12px; padding: 14px 16px;
    background: rgba(16,26,18,.55); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(3px);
  }
  .ph-step__tag,
  .ph-step.is-active .ph-step__tag { color: #fff; background: rgba(255,255,255,.2); }
  .web .ph-step__title,
  .web .ph-step.is-active .ph-step__title { font-size: 17px; color: #fff; }
  .web .ph-step__text,
  .web .ph-step.is-active .ph-step__text { font-size: 12.5px; color: rgba(255,255,255,.88); }
  /* Arrows overlay the visual at its edges rather than sitting detached beside a narrow card. */
  .ph-railnav { position: absolute; top: 42%; transform: translateY(-50%); z-index: 3; box-shadow: 0 4px 16px rgba(0,0,0,.26); }
  .ph-railnav--prev { left: 10px; }
  .ph-railnav--next { right: 10px; }
  .ph-rail__controls { margin-top: 14px; display: flex; justify-content: center; }
  .ph-rail__meter { margin-top: 0; text-align: center; }
}

/* ---------- Source attribution: provenance metadata, not a trailing line ---------- */
.ph-source {
  margin-top: clamp(24px, 3vw, 36px);
  display: inline-flex; align-items: flex-start; gap: 12px;
  background: var(--warm-white); border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 13px 18px 13px 15px;
  max-width: 46ch;
}
.ph-source > i { font-size: 17px; color: var(--primary-deep); margin-top: 1px; flex-shrink: 0; }
.ph-source__label {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint);
}
.web .ph-source__doc { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--ink); font-weight: 500; }
/* On the dark system section the same component inverts. */
.ph-cycle .ph-source { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); border-left-color: #A8DDA8; }
.ph-cycle .ph-source > i { color: #A8DDA8; }
.ph-cycle .ph-source__label { color: rgba(255,255,255,.55); }
.web .ph-cycle .ph-source__doc { color: #fff; }
.ph-source--center { display: inline-flex; text-align: left; }

@media (max-width: 640px) {
  .ph-source { max-width: none; width: 100%; }
}

/* ---------- Mobile hero and metrics: fewer competing priorities ---------- */
@media (max-width: 760px) {
  /* Secondary CTA drops below the primary rather than competing beside it. */
  .ph-hero__cta { flex-direction: column; align-items: center; gap: 10px; }
  .ph-hero__cta .btn-ghost { order: 2; }
  .web .ph-hero__sub { max-width: 34ch; font-size: 14px; }
  /* Statement was eating most of the viewport while the numbers lost prominence. */
  .ph-herofacts { grid-template-columns: 1fr; gap: 20px; }
  .web .ph-herofacts__statement { font-size: 13.5px; max-width: 38ch; }
  .ph-herofacts__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .ph-herofacts__metrics span { white-space: normal; font-size: 11px; }
}

/* ---------- Circular system: orbital, with a centre hub and a visible return ----------
   Replaces the horizontal Kotoran → Biodigester → Biogas → Digestat chain, which read as a
   linear pipeline and therefore contradicted the words "circular farming". */
.ph-orbit {
  position: relative; width: min(560px, 88vw); aspect-ratio: 1;
  margin: clamp(36px,5vw,56px) auto 0;
}
.ph-orbit__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-orbit__arc { transition: stroke .4s var(--ease-out), stroke-width .4s var(--ease-out); }
/* The closing arc is drawn brighter: it is the one that makes the loop legible as a loop. */
.ph-orbit__arc--return { opacity: .95; }

.ph-orbit__hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: clamp(132px, 30%, 168px); aspect-ratio: 1; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-align: center; padding: 10px; z-index: 3;
  box-shadow: 0 18px 44px rgba(46,125,50,.34);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.ph-orbit__hub:hover, .ph-orbit__hub:focus-visible { transform: translate(-50%,-50%) scale(1.04); outline: none; }
.ph-orbit__hub > i { font-size: clamp(22px, 4vw, 30px); }
.ph-orbit__hub-t { font-family: var(--font-display); font-weight: 700; font-size: clamp(12px,2vw,14px); }
.ph-orbit__hub-d { font-size: 10px; color: rgba(255,255,255,.8); }

.ph-orbit__node {
  position: absolute; top: var(--y); left: var(--x); transform: translate(-50%,-50%);
  width: clamp(112px, 26%, 150px); text-align: center; z-index: 2; cursor: default;
  transition: opacity .35s var(--ease-out);
}
.ph-orbit.has-focus .ph-orbit__node { opacity: .38; }
.ph-orbit.has-focus .ph-orbit__node.is-on { opacity: 1; }
.ph-orbit__dot {
  width: 52px; height: 52px; margin: 0 auto; border-radius: 50%;
  background: #24361F; border: 2px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center; font-size: 21px; color: #A8DDA8;
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.ph-orbit__node.is-on .ph-orbit__dot { background: var(--primary); border-color: #A8DDA8; color: #fff; box-shadow: 0 0 0 6px rgba(46,125,50,.24); }
.web .ph-orbit__t { display: block; margin-top: 9px; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #fff; }
.web .ph-orbit__d { display: block; margin-top: 4px; font-size: 11px; line-height: 1.45; color: rgba(255,255,255,.62); }

.ph-orbit__return {
  position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px; color: #A8DDA8;
}

/* Mobile keeps the cycle readable as a cycle: a compact ring with the hub still central,
   rather than degrading into a vertical icon list. */
@media (max-width: 760px) {
  .ph-orbit { width: min(94vw, 420px); margin-bottom: 40px; }
  .ph-orbit__node { width: clamp(96px, 30%, 128px); }
  .ph-orbit__dot { width: 44px; height: 44px; font-size: 18px; }
  .web .ph-orbit__t { font-size: 11.5px; margin-top: 7px; }
  .web .ph-orbit__d { display: none; }   /* labels carry the meaning at this size */
  .ph-orbit__hub { width: clamp(104px, 32%, 130px); }
  .ph-orbit__hub-d { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-orbit__node, .ph-orbit__dot, .ph-orbit__hub, .ph-orbit__arc { transition: none; }
}

/* ---------- Circular system: text safe zones ----------
   Node captions were rendering directly on the orbit line, and the return label overlapped the
   Digestat caption. The ring now owns a clean geometric channel: nodes carry only an icon and a
   short label on a solid chip, and all prose moves into one readout beneath the hub. */
.ph-orbit__d { display: none; }

.ph-orbit__node { width: auto; }
.ph-orbit__t {
  display: inline-block; margin-top: 8px;
  background: #1C2B1E; padding: 4px 10px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.web .ph-orbit__t { font-size: 12px; }

/* Single readout under the hub. Sits inside the ring, so it can never collide with the orbit. */
.ph-orbit__readout {
  position: absolute; top: 62%; left: 50%; transform: translateX(-50%);
  width: min(230px, 46%); text-align: center; z-index: 2; pointer-events: none;
}
.ph-orbit__readout-t {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: .04em; color: #A8DDA8;
}
.ph-orbit__readout-d {
  display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.5;
  color: rgba(255,255,255,.68);
}

/* Return label moved clear of the ring and the Digestat chip. */
.ph-orbit__return { bottom: -52px; }

/* The source card sat too close to the diagram; give the section room to breathe. */
.ph-cycle .ph-source { margin-top: clamp(56px, 7vw, 84px); }

@media (max-width: 760px) {
  .ph-orbit__readout { top: 60%; width: min(180px, 54%); }
  .ph-orbit__readout-d { display: none; }   /* label alone at this size; ring stays legible */
  .web .ph-orbit__t { font-size: 10.5px; }
  .ph-orbit__t { padding: 3px 8px; }
  .ph-orbit__return { bottom: -44px; }
}

/* The top node's label flows downward from its icon and crossed the ring. Flip it above the
   icon so it moves away from the orbit instead of into it. Same idea for the bottom node,
   whose label already flows outward and therefore stays clear. */
.ph-orbit__node[data-node="0"] { display: flex; flex-direction: column-reverse; }
.ph-orbit__node[data-node="0"] .ph-orbit__t { margin-top: 0; margin-bottom: 8px; }

/* Side nodes sit at the ring's horizontal extremes, so a wide label centred on the icon extends
   inward across the orbit. Anchor each side label outward instead. (Icons intentionally sit on
   the ring; only text must stay clear of it.) */
.ph-orbit__node[data-node="3"] { align-items: flex-start; text-align: left; }
.ph-orbit__node[data-node="1"] { align-items: flex-end; text-align: right; }
.ph-orbit__node[data-node="3"] .ph-orbit__t { margin-left: -8px; }
.ph-orbit__node[data-node="1"] .ph-orbit__t { margin-right: -8px; }

/* ---------- Circular: readout moved OUT of the orbit ----------
   Placing the readout at 62% put it underneath the hub and inside the ring, so the description
   rendered behind the Biodigester circle. Three zones must not share space: node labels sit on
   the ring, the hub owns the centre, and the readout gets its own band below the diagram. */
.ph-orbit { margin-bottom: clamp(96px, 12vw, 132px); }
.ph-orbit__readout {
  position: absolute; top: auto; bottom: -84px; left: 50%; transform: translateX(-50%);
  width: min(420px, 88%); text-align: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md); padding: 12px 18px;
}
.ph-orbit__readout-t { font-size: 12.5px; }
.ph-orbit__readout-d { display: block; margin-top: 4px; }
/* Return marker sits between the ring and the readout band. */
.ph-orbit__return { bottom: -46px; }
/* Section framing: the diagram was nearly touching the lead copy above it. */
.ph-cycle .ph-secthead { margin-bottom: clamp(40px, 5vw, 64px); }
.ph-cycle .ph-source { margin-top: clamp(40px, 5vw, 56px); }

@media (max-width: 760px) {
  .ph-orbit { margin-bottom: clamp(104px, 26vw, 140px); }
  .ph-orbit__readout { bottom: -92px; width: min(320px, 92%); padding: 10px 14px; }
  .ph-orbit__readout-d { display: block; font-size: 11px; }
  .ph-orbit__return { bottom: -50px; }
}

/* ---------- Roadmap: editorial milestones ----------
   Replaces the generic long line + dots + paragraphs. The year becomes the visual anchor at
   large editorial scale, each milestone is a distinct block rather than an entry in a list,
   and the connector is a short segment between blocks instead of one dominant rule. */
.ph-mile { list-style: none; margin: clamp(40px,5vw,64px) 0 0; padding: 0; }
.ph-mile__item {
  display: grid; grid-template-columns: minmax(120px, 200px) 1fr;
  gap: clamp(24px,4vw,64px); align-items: start;
  padding: clamp(28px,3.5vw,42px) 0;
  border-top: 1px solid var(--line);
}
.ph-mile__item:first-child { border-top: none; padding-top: 0; }
.ph-mile__year {
  font-family: var(--font-editorial, var(--font-display)); font-weight: 600;
  font-size: clamp(2.6rem, 2rem + 2.6vw, 4.4rem); line-height: .9;
  color: var(--ink); letter-spacing: -0.02em;
}
/* Each successive year sits slightly lighter, so the eye reads a progression rather than
   three equal entries. */
.ph-mile__item:nth-child(2) .ph-mile__year { color: rgba(20,21,15,.78); }
.ph-mile__item:nth-child(3) .ph-mile__year { color: rgba(20,21,15,.58); }
.ph-mile__body { padding-top: clamp(4px,1vw,10px); }
.ph-mile__stage {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--primary-deep);
}
.ph-mile__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.web .ph-mile__text { margin-top: 12px; max-width: 62ch; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }

/* Mobile: year above the block, connector between milestones, no long dominant rule. */
@media (max-width: 760px) {
  .ph-mile__item { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .ph-mile__year { font-size: clamp(2.1rem, 1.7rem + 3vw, 2.8rem); }
  .ph-mile__body { padding-top: 0; }
  .web .ph-mile__text { font-size: 13.5px; max-width: none; }
}

/* ============================================================
   FIX 1 — Program 01 mobile reading order.
   `.prog-module__visual { order: -1 }` forced image-first on every module, so on mobile the
   Pakan photo and the ransum panel appeared BEFORE "Program 01" and the headline. The reader
   met the evidence before learning what the section was. Mobile order is now:
   eyebrow → headline → explanation → visual → supporting detail.
   ============================================================ */
@media (max-width: 900px) {
  .ph-detail__media { order: 0; }
  .ph-detail__body  { order: -1; }
}

/* ============================================================
   FIX 2 — Circular readout and return label were sharing vertical space.
   Return sat at bottom:-46px while the readout card spans roughly -14px to -84px below the
   ring, so the two rendered on top of each other on every state. They now occupy separate
   bands, and the readout gets a fixed max-width and steady line-height so its height does not
   jump between states of different text length.
   ============================================================ */
.ph-orbit { margin-bottom: clamp(150px, 19vw, 190px); }
.ph-orbit__return { bottom: -40px; font-size: 11.5px; }
.ph-orbit__readout {
  bottom: -142px; width: min(400px, 92%);
  min-height: 76px; display: flex; flex-direction: column; justify-content: center;
  padding: 14px 20px;
}
.ph-orbit__readout-t { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.ph-orbit__readout-d { margin-top: 6px; line-height: 1.55; max-width: 46ch; margin-inline: auto; }

@media (max-width: 760px) {
  .ph-orbit { margin-bottom: clamp(168px, 42vw, 200px); }
  .ph-orbit__return { bottom: -38px; }
  .ph-orbit__readout { bottom: -152px; width: min(330px, 94%); min-height: 84px; }
}

/* ============================================================
   FIX 3 — Roadmap: left spine with milestone nodes, and status hierarchy.
   2026 is the current stage and reads at full strength; 2027 and 2028 are future stages and
   are muted. Wording stays "roadmap", never "not implemented", since the project documents
   describe planned direction rather than technical status.
   ============================================================ */
.ph-mile { position: relative; padding-left: 0; }
.ph-mile__item {
  position: relative;
  grid-template-columns: 34px minmax(96px, 150px) 1fr;
  border-top: none; padding: 0 0 clamp(30px,3.6vw,44px);
}
.ph-mile__item:last-child { padding-bottom: 0; }
/* The spine is drawn per item so it stops cleanly at the final node. */
.ph-mile__item::before {
  content: ''; position: absolute; left: 7px; top: 20px; bottom: 0; width: 2px;
  background: var(--line);
}
.ph-mile__item:last-child::before { display: none; }
.ph-mile__item::after {
  content: ''; position: absolute; left: 0; top: 12px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--primary);
}
/* Future stages: hollow, lighter node and spine. */
.ph-mile__item:nth-child(n+2)::after { border-color: rgba(46,125,50,.38); }
.ph-mile__item:nth-child(n+2)::before { background: rgba(20,21,15,.08); }
.ph-mile__year { grid-column: 2; }
.ph-mile__body { grid-column: 3; }
.ph-mile__dot { display: none; }   /* the spine node replaces the inline dot */
.ph-mile__item:nth-child(2) .ph-mile__stage,
.ph-mile__item:nth-child(3) .ph-mile__stage { color: rgba(27,94,32,.62); }
.web .ph-mile__item:nth-child(2) .ph-mile__text,
.web .ph-mile__item:nth-child(3) .ph-mile__text { color: rgba(74,77,66,.78); }

@media (max-width: 760px) {
  .ph-mile__item { grid-template-columns: 30px 1fr; gap: 4px 14px; padding-bottom: 30px; }
  .ph-mile__item::before { left: 6px; }
  .ph-mile__item::after { width: 14px; height: 14px; top: 10px; }
  .ph-mile__year { grid-column: 2; }
  .ph-mile__body { grid-column: 2; }
}

/* Side labels are anchored outward on desktop to stay off the ring, but at 375px that pushes
   them past the viewport edge. On mobile pull the orbit in and re-centre the side labels so
   they stay on screen; the ring is small enough there that they no longer cross it. */
@media (max-width: 760px) {
  .ph-orbit { width: min(78vw, 300px); }
  .ph-orbit__node[data-node="1"],
  .ph-orbit__node[data-node="3"] { align-items: center; text-align: center; }
  .ph-orbit__node[data-node="1"] .ph-orbit__t,
  .ph-orbit__node[data-node="3"] .ph-orbit__t { margin-left: 0; margin-right: 0; }
  .ph-orbit__node { width: clamp(84px, 34%, 110px); }
}

/* ---------- Digital: sample record rows ----------
   Replaces the repeated "Belum dicatat" empty state. Compact editorial records, not an admin
   dashboard: date, activity with a small qualifier, and the value. */
.ph-ui__badge {
  display: inline-block; margin: 4px 0 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--primary-deep);
  background: rgba(46,125,50,.1); border-radius: var(--radius-pill); padding: 4px 10px;
}
.ph-ui__rec {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.ph-ui__rec:last-of-type { border-bottom: none; }
.ph-ui__rec-date { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; color: var(--ink-faint); }
.ph-ui__rec-main { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink); min-width: 0; }
.ph-ui__rec-main small { margin-top: 2px; font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--ink-faint); }
.ph-ui__rec-val { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--primary-deep); white-space: nowrap; }
.ph-ui__hint { margin-top: 14px; }

/* Mobile: never a horizontally scrolling table. The row simply tightens. */
@media (max-width: 640px) {
  .ph-ui__rec { grid-template-columns: 42px 1fr auto; gap: 10px; }
  .ph-ui__rec-main { font-size: 12.5px; }
  .ph-ui__rec-val { font-size: 12.5px; }
}

/* ---------- Section header groups: one shared centred axis ----------
   Centred headers were only text-align:center, so the lead paragraph took its own width and
   drifted off the headline's axis. Both now share the same centred container and max-width,
   which fixes Program 02 and every other centred header at once. */
.ph-secthead { display: flex; flex-direction: column; align-items: center; }
.ph-secthead > * { margin-inline: auto; }
.ph-secthead .ph-h2 { max-width: 22ch; text-wrap: balance; }
.ph-secthead .ph-lead--center { max-width: 56ch; text-wrap: balance; }
@media (max-width: 640px) {
  .ph-secthead .ph-h2 { max-width: 18ch; }
  .ph-secthead .ph-lead--center { max-width: 42ch; }
}

/* =====================================================================
   SITE CHROME: RESPONSIVE NAVIGATION + SHARED FOOTER
   ---------------------------------------------------------------------
   The primary navigation used to be removed with `display: none` below
   900px, which left every page below tablet width with no way to reach
   any other page. Navigation now RECOMPOSES instead of disappearing:

     >= 1100px   full centred pill
     768-1099px  same pill, tightened
     <= 767px    compact header plus an expandable drawer

   The drawer is built at runtime by site-chrome.js from the links already
   present in the pill, so every page gains it without duplicating markup
   and the two can never fall out of sync.
   ===================================================================== */



/* ---------- Inline chrome icons ----------
   site-chrome.js now injects inline SVG rather than icon-font glyphs. The
   webfont is fetched from a third party CDN and a failed request rendered
   every glyph as an empty box; the burger measured 0x0, so the mobile menu
   trigger was invisible. These sizes are explicit because .ic defaults to
   1em and would otherwise inherit whatever font-size the button carries. */
.ic { width: 1em; height: 1em; flex-shrink: 0; display: inline-block; vertical-align: -0.145em; }
.nav__burger .ic { width: 20px; height: 20px; }
.nav-drawer__close .ic { width: 20px; height: 20px; }
.nav-drawer__cta .ic { width: 16px; height: 16px; }

/* Base navigation. Declared here, not per page. A page that re-declares
   the pill's display value in its own stylesheet or an inline style block
   loads after this file and silently beats the mobile rule below, which is
   what left the pill sitting next to the drawer trigger at 375px. Keeping
   the whole component in one place is what prevents that recurring. */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 14px var(--gutter);
  background: rgba(255,255,255,.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(20,21,15,.06);
}
.nav__logo { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; text-decoration: none; color: inherit; justify-self: start; }
.nav-pill { justify-self: center; display: flex; align-items: center; gap: 2px; background: var(--ink); border-radius: var(--radius-pill); padding: 4px; box-shadow: var(--shadow-nav); }
.nav-pill__item { padding: 7px 13px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.65); text-decoration: none; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.nav-pill__item.is-active { color: var(--ink); background: var(--white); font-weight: 700; }
.nav-pill__item:hover:not(.is-active) { color: #fff; }
.nav__cta { justify-self: end; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 8px 16px; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nav__cta:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Tablet: tighten rather than drop. Same visual identity, less room. */
@media (max-width: 1099px) {
  .nav-pill { padding: 3px; gap: 1px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav-pill::-webkit-scrollbar { display: none; }
  .nav-pill__item { padding: 7px 10px; font-size: 12px; white-space: nowrap; }
  .nav__cta { padding: 7px 13px; font-size: 12px; white-space: nowrap; }
}

@media (max-width: 900px) {
  .nav-pill__item { padding: 6px 9px; font-size: 11.5px; }
}

/* Mobile: the pill steps aside for a drawer trigger. */
.nav__burger {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  background: var(--ink); color: #fff; border: none;
  border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.nav__burger i { font-size: 19px; }
.nav__burger:hover { background: var(--primary-deep); }
.nav__burger:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Visibility is switched with the display property, never with opacity, and
   the fade is an animation rather than a transition. If the animation never runs the
   drawer is simply visible straight away. Gating visibility on a transition
   risks an invisible sheet that still swallows taps, which is a far worse
   failure than a missing fade. */
.nav-drawer {
  position: fixed; inset: 0; z-index: 200;
  display: none; flex-direction: column; justify-content: flex-start;
  background: rgba(20,21,15,.42); backdrop-filter: blur(3px);
}
.nav-drawer.is-open { display: flex; }
/* Only the offset is animated. Opacity is deliberately NOT part of the
   reveal: if an animation stalls on its first frame the sheet would be
   invisible while still swallowing taps. A sheet sitting 10px high is a
   cosmetic flaw; an invisible menu that eats input is a broken page. */
@keyframes navSheetIn { from { transform: translateY(-10px); } to { transform: none; } }
.nav-drawer__sheet {
  background: var(--white);
  border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);
  padding: 16px var(--gutter) 22px;
  box-shadow: 0 18px 44px rgba(20,21,15,.18);
}
.nav-drawer.is-open .nav-drawer__sheet { animation: navSheetIn 220ms var(--ease-out); }
.nav-drawer__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.nav-drawer__logo { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; }
.nav-drawer__close {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--gray-light); color: var(--ink); border: none; border-radius: var(--radius-pill); cursor: pointer;
}
.nav-drawer__close i { font-size: 19px; }
.nav-drawer__close:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.nav-drawer__links { display: flex; flex-direction: column; padding-block: 6px; }
.nav-drawer__links a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 50px; padding: 6px 2px;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav-drawer__links a:last-child { border-bottom: none; }
/* Active page stays obvious in the drawer, matching the pill's logic. */
.nav-drawer__links a.is-active { color: var(--primary-deep); }
.nav-drawer__links a.is-active::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
}
.nav-drawer__cta {
  margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: var(--radius-pill);
  background: var(--primary); color: #fff; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
}
.nav-drawer__cta:hover { background: var(--primary-deep); }

/* ---------------------------------------------------------------------
   MOBILE NAVIGATION: a labelled bar, not a hamburger
   ---------------------------------------------------------------------
   The pill used to be hidden below 767px and replaced by a round burger
   opening a drawer. Two problems with that: the destinations were
   invisible until you guessed what the icon did, and that icon was the
   only route to four of the five pages.

   The pill now stays at every width. Below 768px it becomes a second row
   that scrolls sideways when the labels do not fit, so every destination
   is readable as text and reachable in one tap. No icon-only control and
   nothing hidden behind a gesture. */
/* ---------------------------------------------------------------------
   MOBILE NAV — one cohesive unit, not two disconnected blocks
   ---------------------------------------------------------------------
   The 2-row layout (logo+CTA / pill) is correct structurally: it gives
   every destination a text label and keeps the brand + action visible.
   The problem was visual, not structural: row-gap: 8px created a
   visible gap between the white top row and the dark pill row, making
   them read as two separate components.

   Fix: close the gap entirely (row-gap: 0). The pill carries its own
   vertical padding (8px top / 10px bottom) which keeps the items
   comfortably tappable. The top row stays at its natural height.
   The overall nav height on mobile is now ~100-108px, not 74px, so
   downstream pages that hardcode --chrome-h must read --nav-chrome-h
   instead. That variable is set here and updated on resize by
   site-chrome.js so every page can reference it.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  .nav {
    grid-template-columns: 1fr auto;
    grid-template-areas: "logo cta" "pill pill";
    row-gap: 0;          /* was: 8px — the gap that made it look split */
    padding-top: 10px;
    padding-bottom: 0;   /* pill's own padding provides the bottom space */
  }
  .nav__logo { grid-area: logo; }
  .nav__cta  { grid-area: cta; display: inline-flex; align-items: center; }
  .nav-pill {
    grid-area: pill;
    justify-self: stretch;
    position: relative;
    /* Same component as desktop: a dark rounded pill inset by the page's
       own gutter, not a black bar bled to the screen edges. An earlier
       version bled the pill full-width to solve label truncation, which
       fixed the fit at the cost of turning it into a visually different,
       heavier component than the desktop pill it is supposed to adapt.
       Fit is solved below with tighter item padding/type instead, at the
       nav's normal margin — max-width:100% inherited from the 1099px
       block above already caps it at the grid track, so no explicit
       override is needed here. */
    margin-top: 8px;     /* breathing room between the top row and the pill */
    margin-bottom: 10px;
    padding: 4px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-nav);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .nav-pill::-webkit-scrollbar { display: none; }

  /* SCROLL HINT — fade on the side that still has more items.
     site-chrome.js sets .is-scrolled and .has-more as the row scrolls,
     so the hint never shows on an empty edge. */
  .nav-pill::before,
  .nav-pill::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 32px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 150ms var(--ease-out, ease-out);
  }
  .nav-pill::before {
    left: 0;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    background: linear-gradient(to right, var(--ink), transparent);
  }
  .nav-pill::after {
    right: 0;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    background: linear-gradient(to left, var(--ink), transparent);
  }
  .nav-pill.is-scrolled::before { opacity: 1; }
  .nav-pill.has-more::after    { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .nav-pill::before, .nav-pill::after { transition: none; }
  }

  .nav-pill__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    /* No forced min-height here: the desktop pill is ~29px tall from its
       own padding + line-height, and that natural height — not a 44px tap
       target — is what makes it read as the same slim component on mobile.
       Horizontal padding measured against the actual content: with all
       five labels ("Program"..."Artikel") this is what clears 375px
       without scrolling, verified in-browser rather than estimated. */
    padding: 7px 8px;
    font-size: 12.5px;
    /* Raised from rgba(255,255,255,.65) — 3.9:1 — to pass WCAG AA 4.5:1
       for small text on the dark pill background. */
    color: rgba(255, 255, 255, .82);
  }
  .nav__cta { padding: 8px 12px; font-size: 12px; min-height: 40px; }
}

/* The burger and its drawer are gone from the markup and the script.
   These rules remain only to neutralise a cached copy of the old script
   that might still inject them. */
.nav__burger, .nav-drawer { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .nav-drawer.is-open, .nav-drawer.is-open .nav-drawer__sheet { animation: none; }
}

/* ---------------------------------------------------------------------
   SHARED FOOTER
   One structure for every page. program.html's closing panel is the same
   grammar presented as a floating panel over its environmental image;
   this is the standalone form the other pages use.
   --------------------------------------------------------------------- */
.site-footer { background: var(--white); border-top: 1px solid var(--line); padding-block: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 32px); }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 44px); }
.site-footer__logo { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); }
.web .site-footer__brand p { margin-top: 12px; max-width: 34ch; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.site-footer__col { display: flex; flex-direction: column; gap: 9px; }
.site-footer__head { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.site-footer__col a { font-size: 13px; color: var(--ink-soft); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.site-footer__col a:hover { color: var(--primary-deep); }
.site-footer__static { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.site-footer__foot {
  margin-top: clamp(28px, 3.5vw, 44px); padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-faint);
}

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .site-footer__brand { grid-column: span 2; }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__brand { grid-column: auto; }
  .site-footer__foot { justify-content: center; text-align: center; }
}

/* =====================================================================
   TYPOGRAPHY ROLES
   ---------------------------------------------------------------------
   The agreed system splits on role, not on element:

     heading   Helvetica Neue / Helvetica / Arial   700
     subhead   Arial / Helvetica                    600
     body      Arial / Helvetica                    400
     label,
     button    Arial / Helvetica                    600

   Headings already resolve through --font-display. Buttons, pills, tags
   and small-caps labels were inheriting that same token, which put them
   on Helvetica Neue instead of Arial. They are moved onto --font-body
   here. On Windows both stacks fall through to Arial, so this only
   changes rendering where Helvetica Neue actually exists.
   ===================================================================== */
.nav__cta,
.nav-drawer__cta,
.btn, .btn-primary, .btn-ghost, .btn-line,
.ph-panel__head, .site-footer__head,
.ar-eyebrow, .ar-tag, .ar-pill, .ar-filter__lb, .ar-status,
.ar-art__src-lb, .ar-rel__k, .ar-docmeta__lb, .ar-feat__cycle-lb, .ar-feat__idx {
  font-family: var(--font-body);
  font-weight: 600;
}

/* Numerals inside the editorial index keep their heavier weight: they are
   display figures, not labels. */
.ar-mast__row b, .ar-docitem__n, .ar-guide__n, .ar-feat__steps b {
  font-family: var(--font-body);
  font-weight: 700;
}

/* Screen-reader-only text. Used where a page needs a proper heading for
   document structure but the design has no visible slot for one. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Tap target. .btn-line is a bare underlined text link with no padding,
   so it measured 17px tall on mobile: well under the ~44px a finger
   needs. Padding is added inline-block so the underline still sits on
   the text, and the extra height comes from the box rather than from
   line-height, which would loosen the type.
   Breakpoint is 1024px, not 720px: at 768 these measured 17px again,
   and 768 is a tablet width where the input is a finger. */
@media (hover: none), (max-width: 1024px) {
  .btn-line {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* =====================================================================
   BRAND MARK
   The logo is a solid green badge, so it needs no transparency handling
   and reads correctly on both the light chrome and the dark footer
   panel. Served at 64px for a ~26px slot to stay sharp on 2x screens;
   the 2000x2000 original is 3.65MB and never reaches the browser.
   ===================================================================== */
.nav__logo { display: inline-flex; align-items: center; gap: 9px; }
.nav__logo img,
.nav-drawer__logo img { width: 26px; height: 26px; border-radius: 6px; display: block; flex-shrink: 0; }
.nav-drawer__logo { display: inline-flex; align-items: center; gap: 9px; }
.ph-panel__logo { display: inline-flex; align-items: center; gap: 10px; }
.ph-panel__logo img { width: 30px; height: 30px; border-radius: 7px; display: block; flex-shrink: 0; }
@media (max-width: 640px) {
  .nav__logo img, .nav-drawer__logo img { width: 24px; height: 24px; }
}

/* ---------- CONTACT ---------- */
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.contact-pending {
  display: flex; align-items: flex-start; gap: 11px; justify-content: center;
  max-width: 56ch; margin: 0 auto; text-align: left;
  font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.82);
}
.contact-pending .ic { width: 17px; height: 17px; margin-top: 3px; flex-shrink: 0; color: rgba(255,255,255,.55); }
.contact-pending a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.contact-note { margin-top: 14px; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.55); }

/* =====================================================================
   DARK SURFACES
   ---------------------------------------------------------------------
   `.web p { color: var(--ink-soft) }` has specificity (0,1,1). Every
   component rule that tried to colour a paragraph on a dark section was
   a single class, (0,1,0), so it lost. The note under the three tracks
   on Dampak was rendering #4A4D42 on #16281A: a contrast ratio of
   1.80:1 against a 4.5:1 requirement, effectively invisible.

   Fixing it inline would have left the same trap for the next dark
   paragraph, so the dark surfaces are named here and given tokens.
   Every selector below is prefixed with `.web` so it outranks the
   global paragraph colour instead of relying on source order.

   Measured against --surface-dark #16281A:
     --text-on-dark        #FFFFFF   15.526:1
     --text-muted-on-dark  #A7B4A3    7.11:1
     --text-accent-on-dark #A8DDA8    9.78:1

   .kn-arch is deliberately NOT in this list. Its name suggests a dark
   band but its measured background is rgb(241,243,238), luminance 0.89.
   Including it painted .kn-flow__t white on white. Surfaces here were
   verified by measuring computed luminance, not by reading names.
   ===================================================================== */
:root {
  --surface-dark: #16281A;
  --surface-dark-elevated: #1E3524;
  --text-on-dark: #FFFFFF;
  --text-muted-on-dark: #A7B4A3;
  --text-accent-on-dark: #A8DDA8;
  --border-on-dark: rgba(255, 255, 255, .20);
}

.web .dp-path-sec, .web .dp-close, .web .ar-close, .web .bg-ink {
  color: var(--text-on-dark);
}
.web .dp-path-sec p, .web .dp-close p, .web .ar-close p, .web .bg-ink p,
.web .dp-path-sec li, .web .ar-close li {
  color: var(--text-muted-on-dark);
}
.web .dp-path-sec h1, .web .dp-path-sec h2, .web .dp-path-sec h3,
.web .dp-close h1, .web .dp-close h2, .web .dp-close h3,
.web .ar-close h1, .web .ar-close h2, .web .ar-close h3,
.web .bg-ink h1, .web .bg-ink h2, .web .bg-ink h3 {
  color: var(--text-on-dark);
}
/* Small print on dark: eyebrows, captions, notes. These were the worst
   offenders because they combine a muted colour with a small size. */
.web .dp-path-sec .dp-eyebrow, .web .ar-close .ar-eyebrow, .web .bg-ink .kicker {
  color: var(--text-accent-on-dark);
}
.web .dp-path-sec__note, .web .dp-path-sec__note span {
  color: var(--text-muted-on-dark);
  line-height: 1.7;
}
.web .dp-path-sec__note .ic { color: var(--text-accent-on-dark); }
/* Borders and separators on dark need to be visible without competing
   with the content sitting inside them. */
.web .dp-path-sec [class*="__card"], .web .ar-close [class*="__card"] {
  border-color: var(--border-on-dark);
}

/* =====================================================================
   HOME CLOSING BAND
   Two columns instead of a centred headline alone in a tall dark band.
   The contact notice sits beside the statement as a bordered aside, so
   it reads as supporting information rather than as an error or an
   afterthought stranded in whitespace.
   ===================================================================== */
.home-close { padding-block: clamp(56px, 6vw, 88px); }
.home-close__grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.web .home-close__t {
  margin-top: 14px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.22;
  letter-spacing: -0.02em; color: var(--text-on-dark); max-width: 20ch;
}
.web .home-close__d {
  margin-top: 16px; max-width: 48ch; font-size: 15px; line-height: 1.72;
  color: var(--text-muted-on-dark);
}
.home-close__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
/* .btn-line is drawn for light grounds; on dark it needs its own ink. */
.btn-line--on-dark {
  color: var(--text-on-dark);
  background-image: linear-gradient(var(--text-on-dark), var(--text-on-dark));
}
.btn-line--on-dark:hover { color: var(--text-accent-on-dark); }
.home-close__aside {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .04);
}
/* Inside the aside the notice is already the whole point, so it drops
   the centred layout it uses elsewhere. */
.home-close__aside .contact-pending { margin: 0; text-align: left; justify-content: flex-start; max-width: none; }
.home-close__aside .contact-note { margin-top: 14px; text-align: left; }
.home-close__aside .contact-actions { justify-content: flex-start; }

@media (max-width: 900px) {
  .home-close__grid { grid-template-columns: 1fr; gap: 26px; }
  .web .home-close__t { max-width: none; }
}

/* The footer panel is a white card that lives inside the dark closing
   sections, so the dark-surface rules above reach it and would paint
   light-on-light. It opts back out explicitly. */
.web .ph-panel, .web .ph-panel p, .web .ph-panel li, .web .ph-panel span {
  color: var(--ink-soft);
}
.web .ph-panel h1, .web .ph-panel h2, .web .ph-panel h3,
.web .ph-panel .ph-panel__logo { color: var(--ink); }
.web .ph-panel .ph-panel__head, .web .ph-panel .ph-panel__foot,
.web .ph-panel .ph-panel__foot span { color: var(--ink-faint); }

/* =====================================================================
   MOBILE TOUCH TARGETS — shared chrome
   =====================================================================
   Audited at 320/360/390px: footer links measured 15px tall and the
   logo 24px, well under the 44px minimum.

   The breakpoint is 1024px, not 767px. At exactly 768px the desktop nav
   pill returns with 24px items and a 30px CTA, and a 768-1024px device is
   a tablet, which is touch. A fix that stops at 767px leaves the most
   common tablet width with the smallest targets on the site. */
@media (max-width: 1024px) {
  /* Footer links were 15px of text with no padding, nine of them stacked
     9px apart. Padding alone would have pushed them apart visually, so
     the gap shrinks by the amount the padding adds and the column keeps
     its original rhythm. */
  .ph-panel__col { gap: 0; }
  /* Column headings were 10.5px, below what is comfortable at arm length. */
  .ph-panel__head { font-size: 11.5px; }

  .ph-panel__col a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 4px;
  }

  /* The wordmark is a link to the homepage and was a 24px hit area. */
  .nav__logo {
    min-height: 44px;
    padding-block: 10px;
  }

  /* Desktop nav items measured 24px and the header CTA 30px. They are
     mouse targets at desktop width but finger targets on a tablet. */
  .nav-pill__item { min-height: 44px; display: inline-flex; align-items: center; }
  .nav__cta { min-height: 44px; display: inline-flex; align-items: center; }

  .nav__burger {
    min-width: 44px;
    min-height: 44px;
  }

  /* The shared CTA pair measured 41px everywhere they appear: the Dampak
     hero, the Knowledge closing block, and the article footers. Three
     pixels short is still short. */
  .btn-primary,
  .btn-ghost,
  .btn-line {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* =====================================================================
   REMAINING TOUCH TARGETS — measured, not guessed
   =====================================================================
   Swept every page at 320px and raised what was left under 44px. Scoped
   to touch widths, so the desktop layouts are untouched. */
@media (max-width: 1024px) {
  /* Breadcrumb link on every article: 15px of bare text. */
  .ar-crumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Article filter pills on blog.html measured 40px. */
  .ar-pill { min-height: 44px; }

  /* Carousel arrows: 36px on Program, 40px on Tim. These are the only
     way to page through those rails on a phone, so they are the last
     controls that should be fiddly. */
  .ph-railnav,
  .team-hero__arrow {
    min-width: 44px;
    min-height: 44px;
  }

  /* Inline links inside body copy on the homepage were 16px. Only the
     ones that stand alone as calls to action are raised; raising every
     inline link inside a paragraph would wreck the line rhythm. */
  .ph-panel__col a,
  .ph-inline-cta { min-height: 44px; display: inline-flex; align-items: center; }
}

/* The two page links from the pending-contact block, as their own tappable
   buttons rather than 16px words inside a sentence. */
.contact-links {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 10px 0 0; padding: 0; list-style: none;
}
.contact-links a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-pill);
  color: #fff; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
}
.contact-links a:hover { background: rgba(255,255,255,.1); }
.contact-links a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }