/* Elementor editor: JS-driven reveal never fires inside the editor, show everything */
body.elementor-editor-active .elementor.elementor [data-c~="reveal"] { opacity: 1; transform: none; transition: none; }
/* Editor: the photo cycler is driven by JS (adds .is-active) - show its first photo while editing */
body.elementor-editor-active .elementor.elementor [data-c~="about-intro__art"] > img:first-of-type { opacity: 1; }
body { box-sizing: border-box; }
/* ── pamflet-pages glue: neutralise Elementor atomic defaults so the source CSS decides ── */
body .elementor.elementor :is(.e-con,.e-div-block-base,.e-flexbox-base,.e-grid-base) {
  position: static; width: auto; min-width: auto; max-width: none; margin-inline: 0; padding: 0;
}
body .elementor.elementor .e-button-base:where(:not(.pf-btn)) { text-align: inherit; padding: 0; border-width: 0; border-radius: 0; background-color: transparent; }
.elementor.elementor .e-button-base:is(button):where(:not(.pf-btn)) { text-align: center; padding: 1px 6px; border: 2px outset buttonborder; border-radius: 0; background-color: buttonface; }
body .elementor.elementor .elementor-widget-html,
body .elementor.elementor .elementor-widget-html > .elementor-widget-container,
body .elementor.elementor #pf-header-wrap, body .elementor.elementor #pf-footer-wrap { display: contents; }
body .elementor.elementor .e-grid-base > * { min-width: 0; }
/* <code> becomes a span-based paragraph (data-t="code"): keep the browser's monospace default */
body .elementor.elementor [data-t="code"] { font-family: monospace; }
/* plain text links (data-i) are inline in the source HTML; page rules below (same specificity, later) still win when a class sets display */
body .elementor.elementor [data-i] { display: inline; }
body.elementor-page .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* ============================================================
   Pamflet Generasi — design tokens (from Figma: Pamflet Website)
   ============================================================ */
:root {

  --color-footer-bg: var(--color-dark);

  /* League Gothic (Google Fonts, OFL, single 400 weight) is used for h1/h2
     display headings; DM Sans is used for everything else. */
  --font-display: "League Gothic", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Libre Baskerville is reserved for the knowledge-article page only. */
  --font-article: "Libre Baskerville", Georgia, serif;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;


  /* Single unified size for all DM Sans body/description/article-style
     paragraph text, regardless of which section it sits in. */

  --shadow-hard: 8px 8px 0px var(--color-dark);
  --shadow-hard-sm: 4px 4px 0px var(--color-dark);
}

/* ============================================================
   Reset
   ============================================================ */
body .elementor.elementor *,
body .elementor.elementor *::before,
body .elementor.elementor *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Set by an inline script in <head> until the fonts are ready (see fonts.css). */

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-dark);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
body .elementor.elementor img { max-width: 100%; display: block; }
body .elementor.elementor a { text-decoration: none; }
body .elementor.elementor a:where(:not(.pf-btn)) { color: inherit; }
body .elementor.elementor :is(ul,[data-t="ul"]),
body .elementor.elementor :is(dl,[data-t="dl"]),
body .elementor.elementor :is(dd,[data-t="dd"]) { margin: 0; padding: 0; }
body .elementor.elementor h1,
body .elementor.elementor h2,
body .elementor.elementor h3,
body .elementor.elementor p { margin: 0; }
body .elementor.elementor button:where(:not(.pf-btn)),
body .elementor.elementor input,
body .elementor.elementor select { font: inherit; color: inherit; }

body .elementor.elementor :is(.sr-only,[data-c~="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;
}

body .elementor.elementor :is(.skip-link,[data-c~="skip-link"]) {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-orange);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
body .elementor.elementor :is(.skip-link,[data-c~="skip-link"]):focus {
  left: 0;
}

body .elementor.elementor :is(.container,[data-c~="container"]) {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   Buttons & tags
   ============================================================ */
body .elementor.elementor :is(.btn,[data-c~="btn"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.95rem, 1vw, 1.375rem);
  line-height: 1;
  white-space: nowrap;
  padding: 1rem 2rem;
  border-radius: 15px;
  border: var(--border-w) solid var(--color-dark);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body .elementor.elementor :is(.btn--primary,[data-c~="btn--primary"]) {
  background: var(--color-orange);
  color: var(--color-white);
  box-shadow: var(--shadow-hard);
}
body .elementor.elementor :is(.btn--primary,[data-c~="btn--primary"]):hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0px var(--color-dark);
}
body .elementor.elementor :is(.btn--primary,[data-c~="btn--primary"]):active {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0px var(--color-dark);
}
body .elementor.elementor :is(.btn--secondary,[data-c~="btn--secondary"]) {
  background: var(--color-white);
  color: var(--color-dark);
  box-shadow: var(--shadow-hard);
}
body .elementor.elementor :is(.btn--secondary,[data-c~="btn--secondary"]):hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0px var(--color-dark);
}
body .elementor.elementor :is(.btn--secondary,[data-c~="btn--secondary"]):active {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0px var(--color-dark);
}
body .elementor.elementor :is(.btn--small,[data-c~="btn--small"]) {
  padding: 0.7rem 1.5rem;
  font-size: 1rem;
}

body .elementor.elementor :is(.tag,[data-c~="tag"]):where(:not(.pf-tag)) {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-radius: 28px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  color: var(--color-dark);
  white-space: nowrap;
}
body .elementor.elementor :is(.tag--pink,[data-c~="tag--pink"]):where(:not(.pf-tag-pink)) { background: var(--color-pink-tag); }
body .elementor.elementor :is(.tag--yellow,[data-c~="tag--yellow"]):where(:not(.pf-tag-yellow)) { background: var(--color-yellow-tag); }
body .elementor.elementor :is(.tag--cyan,[data-c~="tag--cyan"]):where(:not(.pf-tag-cyan)) { background: var(--color-cyan-tag); }
body .elementor.elementor :is(.tag-row,[data-c~="tag-row"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

body .elementor.elementor :is(.badge,[data-c~="badge"]):where(:not(.pf-badge)) {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  padding: 0.4rem 1.1rem;
  border-radius: 28px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-white);
}
body .elementor.elementor :is(.badge--orange,[data-c~="badge--orange"]):where(:not(.pf-badge-orange)) { background: var(--color-orange); }

/* ============================================================
   Section scaffolding
   ============================================================ */
body .elementor.elementor :is(.section,[data-c~="section"]) { padding-block: clamp(3rem, 7vw, 6rem); }
body .elementor.elementor :is(.section--offwhite,[data-c~="section--offwhite"]) { background: var(--color-offwhite); }
body .elementor.elementor :is(.section--pale,[data-c~="section--pale"]) { background: var(--color-blue-pale); }

body .elementor.elementor :is(.eyebrow,[data-c~="eyebrow"]):where(:not(.pf-eyebrow)) {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-body);
  color: var(--color-orange);
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}
/* spacing stays with the token (Elementor's .e-paragraph-base margin reset would otherwise beat the pf-eyebrow class) */
body .elementor.elementor :is(.eyebrow,[data-c~="eyebrow"]):where(.pf-eyebrow) { margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem); }
body .elementor.elementor :is(.eyebrow--light,[data-c~="eyebrow--light"]) { color: var(--color-orange); }

body .elementor.elementor :is(.section-title,[data-c~="section-title"]):where(:not(.pf-section-title)) {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-dark);
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: 0.5px;
}
body .elementor.elementor :is(.section-title--light,[data-c~="section-title--light"]) { color: var(--color-white); }

body .elementor.elementor :is(.section-header,[data-c~="section-header"]) {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 3.5rem);
}

/* ============================================================
   Navbar
   ============================================================ */
body .elementor.elementor :is(.navbar,[data-c~="navbar"]) {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 2px solid var(--color-dark);
  /* Fixed height (logo 4rem + padding + 2px border) so the bar is exactly the
     same on every page whichever link is selected; own layer keeps it from
     repainting mid-scroll over the hero. */
  height: 5.225rem;
  transform: translate3d(0, 0, 0);
  transition: transform 0.28s ease;
}
/* Sub-section anchor targets (Tentang Kami / Program submenus): land below
   the sticky navbar instead of right under it. */
body .elementor.elementor #apa-itu-pamflet,
body .elementor.elementor #cara-kerja,
body .elementor.elementor #isu-pamflet,
body .elementor.elementor #perjalanan,
body .elementor.elementor #divisi,
body .elementor.elementor #mitra,
body .elementor.elementor #karir,
body .elementor.elementor #suka-ria-remaja,
body .elementor.elementor #simpul,
body .elementor.elementor #urban-futures,
body .elementor.elementor #awarenest-cop,
body .elementor.elementor #program-selesai {
  scroll-margin-top: 6.5rem;
}
/* Slides out of view while the page scrolls down; comes back when scrolling
   up, at the very top, or when the menu / a nav link has focus (js/main.js). */
body .elementor.elementor :is(.navbar,[data-c~="navbar"]).is-hidden { transform: translate3d(0, -100%, 0); }
@media (prefers-reduced-motion: reduce) {
  body .elementor.elementor :is(.navbar,[data-c~="navbar"]) { transition: none; }
}
body .elementor.elementor :is(.navbar__inner,[data-c~="navbar__inner"]) {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0.55rem var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
body .elementor.elementor :is(.nav-brand,[data-c~="nav-brand"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
body .elementor.elementor :is(.nav-brand,[data-c~="nav-brand"]) img { height: 4rem; width: auto; }
body .elementor.elementor :is(.nav-brand__text,[data-c~="nav-brand__text"]) {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.6vw, 1.75rem);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--color-dark);
}

body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) {
  display: flex;
  align-items: center;
  gap: clamp(0.15rem, 0.5vw, 0.5rem);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
}
body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) a { white-space: nowrap; }
body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) a:not(:is(.btn,[data-c~="btn"],.pf-btn)) {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) a:not(:is(.btn,[data-c~="btn"],.pf-btn)):hover,
body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) a:not(:is(.btn,[data-c~="btn"],.pf-btn)):focus-visible,
body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) a:not(:is(.btn,[data-c~="btn"],.pf-btn))[aria-current="page"] {
  background: var(--color-orange);
  color: var(--color-white);
}
body .elementor.elementor :is(.nav-contact,[data-c~="nav-contact"]) { margin-left: 0.5rem; font-size: 1em; }

/* "Tentang Kami" / "Program" submenus: the sub-sections of that page, shown
   as a dropdown on hover/focus (desktop) or expanded inline (mobile menu). */
body .elementor.elementor :is(.nav-item,[data-c~="nav-item"]) {
  position: relative;
  display: inline-flex;
  align-items: center;
}
body .elementor.elementor :is(.nav-item,[data-c~="nav-item"]) > a:not(:is(.btn,[data-c~="btn"],.pf-btn))::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
  vertical-align: middle;
  opacity: 0.7;
}
body .elementor.elementor :is(.nav-item__toggle,[data-c~="nav-item__toggle"]) { display: none; }
body .elementor.elementor :is(.nav-subnav,[data-c~="nav-subnav"]) {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  min-width: 15rem;
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 12px;
  box-shadow: var(--shadow-hard-sm);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
/* Invisible bridge over the gap between the link and the panel, so moving
   the mouse diagonally from one to the other never drops out of :hover. */
body .elementor.elementor :is(.nav-subnav,[data-c~="nav-subnav"])::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 0;
  right: 0;
  height: 0.5rem;
}
body .elementor.elementor :is(.nav-item,[data-c~="nav-item"]):hover :is(.nav-subnav,[data-c~="nav-subnav"]),
body .elementor.elementor :is(.nav-item,[data-c~="nav-item"]):focus-within :is(.nav-subnav,[data-c~="nav-subnav"]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
body .elementor.elementor :is(.nav-subnav,[data-c~="nav-subnav"]) a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: normal;
  color: var(--color-dark);
  transition: background-color 0.15s ease, color 0.15s ease;
}
body .elementor.elementor :is(.nav-subnav,[data-c~="nav-subnav"]) a:hover,
body .elementor.elementor :is(.nav-subnav,[data-c~="nav-subnav"]) a:focus-visible {
  background: var(--color-orange);
  color: var(--color-white);
}

/* Search in the top nav: icon button; the field drops down beneath it as a
   popover (no layout shift), and is always inline inside the mobile menu */
body .elementor.elementor :is(.nav-search,[data-c~="nav-search"]) {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
}
body .elementor.elementor :is(.nav-search__input,[data-c~="nav-search__input"]) {
  position: absolute;
  top: calc(100% + 0.9rem);
  right: 0;
  width: 19rem;
  max-width: calc(100vw - 2rem);
  padding: 0.8rem 1.1rem;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 999px;
  outline: none;
  background: var(--color-white);
  box-shadow: var(--shadow-hard-sm);
  font-size: 0.95rem;
  color: var(--color-dark);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
body .elementor.elementor :is(.nav-search__input,[data-c~="nav-search__input"])::placeholder { color: var(--color-gray-500); }
body .elementor.elementor :is(.nav-search,[data-c~="nav-search"]).is-open :is(.nav-search__input,[data-c~="nav-search__input"]) { opacity: 1; visibility: visible; transform: none; }
body .elementor.elementor :is(.nav-search__btn,[data-c~="nav-search__btn"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
body .elementor.elementor :is(.nav-search__btn,[data-c~="nav-search__btn"]):hover,
body .elementor.elementor :is(.nav-search__btn,[data-c~="nav-search__btn"]):focus-visible,
body .elementor.elementor :is(.nav-search,[data-c~="nav-search"]).is-open :is(.nav-search__btn,[data-c~="nav-search__btn"]) { background: var(--color-yellow-tag); }

body .elementor.elementor :is(.lang-switch,[data-c~="lang-switch"]) {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 0.4rem;
  padding: 3px;
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  background: var(--color-white);
  flex-shrink: 0;
}
body .elementor.elementor :is(.lang-switch__btn,[data-c~="lang-switch__btn"]) {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.72em;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  color: var(--color-dark);
  opacity: 0.5;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
body .elementor.elementor :is(.lang-switch__btn,[data-c~="lang-switch__btn"]):hover,
body .elementor.elementor :is(.lang-switch__btn,[data-c~="lang-switch__btn"]):focus-visible { opacity: 0.85; }
body .elementor.elementor :is(.lang-switch__btn,[data-c~="lang-switch__btn"]).is-active {
  background: var(--color-dark);
  color: var(--color-white);
  opacity: 1;
}

body .elementor.elementor :is(.nav-toggle,[data-c~="nav-toggle"]) {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}
body .elementor.elementor :is(.nav-toggle,[data-c~="nav-toggle"]) span {
  width: 26px;
  height: 3px;
  background: var(--color-dark);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ============================================================
   Hero
   ============================================================ */
/* Hero + rolling-text strip together fill the first screen: --navbar-h and
   --strip-h are measured by js/main.js (fallbacks below are close guesses),
   so the strip lands at the bottom edge of the window on first load. */
body .elementor.elementor :is(.hero,[data-c~="hero"]) {
  --hero-pad: clamp(1rem, 3vh, 4rem);
  --hero-h: calc(100vh - var(--navbar-h, 6.25rem) - var(--strip-h, 3.75rem));
  padding-block: var(--hero-pad);
  min-height: var(--hero-h);
  display: flex;
  align-items: center;
  overflow: hidden;
}
@supports (height: 100dvh) {
  body .elementor.elementor :is(.hero,[data-c~="hero"]) { --hero-h: calc(100dvh - var(--navbar-h, 6.25rem) - var(--strip-h, 3.75rem)); }
}
body .elementor.elementor :is(.hero__inner,[data-c~="hero__inner"]) {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
/* Text sits above the decorative yellow squiggle (which hangs out of the media column). */
body .elementor.elementor :is(.hero__text,[data-c~="hero__text"]) { position: relative; z-index: 2; }
body .elementor.elementor :is(.hero__text,[data-c~="hero__text"]) :is(.eyebrow,[data-c~="eyebrow"]) {
  font-size: var(--text-body);
  font-weight: 700;
  margin-bottom: clamp(0.75rem, 3vh, 3rem);
}
body .elementor.elementor :is(.hero__title,[data-c~="hero__title"]) {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.9rem, min(7vw, 8.2vh), 7.5rem);
  line-height: 1.2em;
  margin-block: 0 clamp(0.75rem, 2.5vh, 1.5rem);
  letter-spacing: 0em;
}
body .elementor.elementor :is(.text-cycle,[data-c~="text-cycle"]) {
  display: inline-block;
  animation: text-color-cycle 6s ease-in-out infinite;
}
@keyframes text-color-cycle {
  0%, 100% { color: var(--color-orange); }
  25% { color: var(--color-blue-link); }
  50% { color: var(--color-teal); }
  75% { color: var(--color-navy); }
}
body .elementor.elementor :is(.dance-word,[data-c~="dance-word"]) {
  display: inline-block;
  animation: dance-word 5s ease-in-out infinite;
  animation-delay: calc(var(--dance-i, 0) * 0.25s);
}
@keyframes dance-word {
  /* Bounces briefly, then holds still for the rest of the 5s cycle */
  0%, 84%, 100% { transform: translateY(0) rotate(0deg); }
  4% { transform: translateY(-0.16em) rotate(-4deg); }
  9% { transform: translateY(0.07em) rotate(2deg); }
  14% { transform: translateY(-0.1em) rotate(-2deg); }
  19% { transform: translateY(0) rotate(0deg); }
}
body .elementor.elementor :is(.hero__desc,[data-c~="hero__desc"]) {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  max-width: 40ch;
  margin-bottom: clamp(1rem, 3.5vh, 2rem);
}
body .elementor.elementor :is(.hero__actions,[data-c~="hero__actions"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
body .elementor.elementor :is(.hero__media,[data-c~="hero__media"]) {
  position: relative;
  display: flex;
  justify-content: center;
}
body .elementor.elementor :is(.hero__squiggle,[data-c~="hero__squiggle"]) {
  /* Sized and positioned to match Figma's proportions relative to the
     hero photo: left/top/width are % of hero__media (≈ the photo's own
     box); aspect-ratio (from the source SVG, 1345.965×777) keeps the
     curve from stretching now that height is no longer forced by inset. */
  position: absolute;
  left: -62%;
  top: 35%;
  width: 188%;
  height: auto;
  aspect-ratio: 1345.965 / 777;
  max-width: none;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
}
/* Hero illustration: still image + a transparent video that plays over just
   the hovered room / the door (js/main.js builds the clip masks from the
   polygons in the zones <svg>). */
body .elementor.elementor :is(.hero-house,[data-c~="hero-house"]) {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  min-width: 0;
  line-height: 0;
  transform: rotate(2deg);
}
body .elementor.elementor :is(.hero__photo,[data-c~="hero__photo"]) {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(var(--hero-h) - 2 * var(--hero-pad) - 1.5rem);
  object-fit: contain;
}
body .elementor.elementor :is(.hero-house__canvas,[data-c~="hero-house__canvas"]),
body .elementor.elementor :is(.hero-house__zones,[data-c~="hero-house__zones"]) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body .elementor.elementor :is(.hero-house__canvas,[data-c~="hero-house__canvas"]) {
  opacity: 0;
  pointer-events: none;
}
/* the video itself is never shown; its frames are drawn into the canvas */
body .elementor.elementor :is(.hero-house__video,[data-c~="hero-house__video"]) {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
}
body .elementor.elementor :is(.hero-house,[data-c~="hero-house"]):is(.is-playing,[data-c~="is-playing"]) :is(.hero-house__canvas,[data-c~="hero-house__canvas"]) { opacity: 1; }
body .elementor.elementor :is(.hero-house,[data-c~="hero-house"]):is(.is-playing,[data-c~="is-playing"]) :is(.hero-house__still,[data-c~="hero-house__still"]) { visibility: hidden; }
body .elementor.elementor :is(.hero-house__zones,[data-c~="hero-house__zones"]) polygon {
  fill: transparent;
  cursor: pointer;
  outline: none;
}

/* ============================================================
   Logo strip
   ============================================================ */
body .elementor.elementor :is(.logo-strip,[data-c~="logo-strip"]) {
  border-top: 2px solid var(--color-dark);
  border-bottom: 2px solid var(--color-dark);
  overflow: hidden;
  padding-block: 1.25rem;
}
body .elementor.elementor :is(.logo-strip__track,[data-c~="logo-strip__track"]) {
  display: flex;
  width: max-content;
  animation: logo-marquee 28s linear infinite;
}
body .elementor.elementor :is(.logo-strip,[data-c~="logo-strip"]):hover :is(.logo-strip__track,[data-c~="logo-strip__track"]) {
  animation-play-state: paused;
}
body .elementor.elementor :is(.logo-strip__group,[data-c~="logo-strip__group"]) {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline-end: clamp(1.5rem, 3vw, 3rem);
}
body .elementor.elementor :is(.logo-strip__group,[data-c~="logo-strip__group"]) p {
  margin: 0;
  color: var(--color-dark);
  font-size: clamp(1rem, 1.25vw, 1.35rem);
  white-space: nowrap;
}
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   Work cards ("Yang kami kerjakan")
   ============================================================ */
body .elementor.elementor :is(.work-section,[data-c~="work-section"]) :is(.container,[data-c~="container"]) {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

body .elementor.elementor :is(.work-card,[data-c~="work-card"]) {
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 20rem;
}
/* Homepage cards have no tag row now, so they size to their text. */
body .elementor.elementor :is(.work-section,[data-c~="work-section"]) :is(.work-card,[data-c~="work-card"]) { min-height: 0; }
/* Illustration banner at the top of a work card (bleeds to the card edge) */
body .elementor.elementor :is(.work-card__art,[data-c~="work-card__art"]) {
  margin: -2.5rem -2.5rem 0;
  line-height: 0;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}
body .elementor.elementor :is(.work-card__art,[data-c~="work-card__art"]) svg { display: block; width: 100%; height: auto; }
body .elementor.elementor :is(.work-card--blue,[data-c~="work-card--blue"]) { box-shadow: 5px 5px 0px var(--color-blue-link); }
body .elementor.elementor :is(.work-card--orange,[data-c~="work-card--orange"]) { box-shadow: 5px 5px 0px var(--color-orange); }
body .elementor.elementor :is(.work-card--teal,[data-c~="work-card--teal"]) { box-shadow: 5px 5px 0px var(--color-teal); }
body .elementor.elementor :is(.work-card__body,[data-c~="work-card__body"]) h3 {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.4vw, 1.7rem);
  margin-bottom: 1rem;
}
body .elementor.elementor :is(.work-card__body,[data-c~="work-card__body"]) p {
  font-size: var(--text-body);
  line-height: 1.5;
}

/* ============================================================
   Pillars ("Tiga pilar Pamflet", Tentang Kami): one shared
   illustration in the middle, a labelled box for each pillar
   arranged around the part of the illustration it names.
   ============================================================ */
body .elementor.elementor :is(.pillars,[data-c~="pillars"]) {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.7fr) minmax(0, 0.85fr);
  grid-template-areas:
    "activism art studies"
    "activism art movement";
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
body .elementor.elementor :is(.pillars__art,[data-c~="pillars__art"]) { grid-area: art; }
body .elementor.elementor :is(.pillars__art,[data-c~="pillars__art"]) img { display: block; width: 100%; height: auto; }
body .elementor.elementor :is(.pillar-box,[data-c~="pillar-box"]) {
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  padding: clamp(1.25rem, 2vw, 2rem);
  box-shadow: 6px 6px 0 var(--pillar-accent, var(--color-dark));
}
body .elementor.elementor :is(.pillar-box,[data-c~="pillar-box"]) h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  margin-bottom: 0.75rem;
  /* Dark, not the accent colour: teal/yellow read poorly as text on white. */
  color: var(--color-dark);
}
body .elementor.elementor :is(.pillar-box,[data-c~="pillar-box"]) p {
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-dark);
}
body .elementor.elementor :is(.pillar-box--activism,[data-c~="pillar-box--activism"]) { grid-area: activism; --pillar-accent: var(--color-blue-link); }
body .elementor.elementor :is(.pillar-box--studies,[data-c~="pillar-box--studies"]) { grid-area: studies; --pillar-accent: var(--color-teal); }
body .elementor.elementor :is(.pillar-box--movement,[data-c~="pillar-box--movement"]) { grid-area: movement; --pillar-accent: var(--color-yellow-tag); }

/* ============================================================
   Why section ("Kenapa Pamflet?") — pale blue + texture overlay
   ============================================================ */
body .elementor.elementor :is(.why-section,[data-c~="why-section"]) {
  position: relative;
  background: var(--color-blue-pale);
  overflow: hidden;
}
body .elementor.elementor :is(.why-section,[data-c~="why-section"])::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/wp-content/plugins/pamflet-site/assets/assets/images/texture-why-pamflet.jpg");
  /* Same grain size in every section: `cover` scaled the texture to each
     section's own height, so a tall section next to a short one (e.g. the page
     header above "Apa itu Pamflet") showed a much coarser pattern. */
  background-size: max(100%, 1800px) auto;
  background-repeat: repeat-y;
  background-position: top center;
  mix-blend-mode: multiply;
  opacity: 0.78;
  pointer-events: none;
}
body .elementor.elementor :is(.why-section,[data-c~="why-section"]) > :is(.container,[data-c~="container"]) { position: relative; z-index: 1; }
body .elementor.elementor :is(.why-split,[data-c~="why-split"]) {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
/* Large screens: a taller section and more breathing room between the
   illustration and the text column, without touching the art's own size. */
@media (min-width: 1200px) {
  body .elementor.elementor #kenapa-pamflet { padding-block: clamp(6rem, 10vw, 11rem); }
  body .elementor.elementor #kenapa-pamflet :is(.why-split,[data-c~="why-split"]) { column-gap: clamp(5rem, 8vw, 9rem); }
}
/* Same "photo card" treatment used for illustrations/photos elsewhere on the
   site (see .page-hero__photo): a rotated colour blob behind a bordered,
   hard-shadowed card, kept here as its own rule so .why-split__art can stay
   sticky (position: relative on .page-hero__photo would fight that). */
body .elementor.elementor :is(.why-split__art,[data-c~="why-split__art"]) {
  position: sticky;
  top: 7rem;
  padding: 1rem;
}
body .elementor.elementor :is(.why-split__art,[data-c~="why-split__art"])::before {
  content: "";
  position: absolute;
  inset: 0 -2% -4% 4%;
  background: var(--color-yellow-tag);
  border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%;
  transform: rotate(-6deg);
  z-index: 0;
}
body .elementor.elementor :is(.why-split__art,[data-c~="why-split__art"]) img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 1583 / 1130;
  object-fit: cover;
  margin-inline: auto;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  box-shadow: 8px 8px 0 var(--color-teal);
  transform: rotate(1.5deg);
}
/* Floating stickers around the photo card, echoing the chat-bubble / dot /
   sparkle accents from the illustration this replaced, so the corner
   doesn't read as empty next to a single framed image. */
body .elementor.elementor :is(.why-split__art-sticker,[data-c~="why-split__art-sticker"]) {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(3px 3px 0 var(--color-dark));
}
body .elementor.elementor :is(.why-split__art-sticker--bubble,[data-c~="why-split__art-sticker--bubble"]) { width: 6.5rem; top: 0.5rem; left: -1.75rem; transform: rotate(-8deg); }
body .elementor.elementor :is(.why-split__art-sticker--dots,[data-c~="why-split__art-sticker--dots"]) { width: 5rem; top: -0.75rem; right: -1.5rem; }
body .elementor.elementor :is(.why-split__art-sticker--note,[data-c~="why-split__art-sticker--note"]) { width: 8.5rem; bottom: 1.5rem; right: -2.5rem; transform: rotate(5deg); }
body .elementor.elementor :is(.why-split__art-sticker--sparkle-lg,[data-c~="why-split__art-sticker--sparkle-lg"]) { width: 1.75rem; top: 42%; left: -1.5rem; }
body .elementor.elementor :is(.why-split__art-sticker--sparkle-sm,[data-c~="why-split__art-sticker--sparkle-sm"]) { width: 1.25rem; bottom: 12%; left: 8%; }
body .elementor.elementor :is(.why-split__body,[data-c~="why-split__body"]) {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
body .elementor.elementor :is(.why-split__lead,[data-c~="why-split__lead"]) {
  font-size: var(--text-body);
  line-height: 1.6;
}
body .elementor.elementor :is(.why-points,[data-c~="why-points"]) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
body .elementor.elementor :is(.why-point,[data-c~="why-point"]):where(:not(.pf-point)) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
body .elementor.elementor :is(.why-point__num,[data-c~="why-point__num"]):where(:not(.pf-point-num)) {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--color-dark);
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 3px 3px 0 var(--color-dark);
}

body .elementor.elementor :is(.why-point__num,[data-c~="why-point__num"]):where(.pf-point-num) { box-shadow: 3px 3px 0 var(--color-dark); }
body .elementor.elementor :is(.why-point__num--teal,[data-c~="why-point__num--teal"]):where(:not(.pf-point-num-teal)) { background: var(--color-teal); }
body .elementor.elementor :is(.why-point__num--orange,[data-c~="why-point__num--orange"]):where(:not(.pf-point-num-orange)) { background: var(--color-orange); color: var(--color-white); }
body .elementor.elementor :is(.why-point__num--yellow,[data-c~="why-point__num--yellow"]):where(:not(.pf-point-num-yellow)) { background: var(--color-yellow-tag); }
body .elementor.elementor :is(.why-point,[data-c~="why-point"]) h3:where(:not(.pf-point-title)) {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.3;
  margin-bottom: 0.4rem;
}

body .elementor.elementor :is(.why-point,[data-c~="why-point"]) h3:where(.pf-point-title) { margin-bottom: 0.4rem; }
body .elementor.elementor :is(.why-point,[data-c~="why-point"]) p:where(:not(.pf-point-text)) {
  font-size: var(--text-body);
  line-height: 1.55;
}

/* ============================================================
   Filter strip (search + selects)
   ============================================================ */
body .elementor.elementor :is(.filter-strip,[data-c~="filter-strip"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
/* "See all" button under the Blog / Produk lists on the home page */
body .elementor.elementor :is(.list-cta,[data-c~="list-cta"]) {
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
/* Home page Blog / Produk lists show only the "see all" link: no search box or dropdowns */
body .elementor.elementor :is(.filter-strip,[data-c~="filter-strip"]) :is(.search-row,[data-c~="search-row"]) { display: none; }
body .elementor.elementor :is(.search-row,[data-c~="search-row"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
}
body .elementor.elementor :is(.search-pill,[data-c~="search-pill"]) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-white);
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  flex: 0 1 24rem;
}
body .elementor.elementor :is(.search-pill__icon,[data-c~="search-pill__icon"]) {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
body .elementor.elementor :is(.search-pill,[data-c~="search-pill"]) input[type="search"] {
  border: none;
  outline: none;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  color: var(--color-gray-700);
  background: transparent;
}
body .elementor.elementor :is(.filter-pill,[data-c~="filter-pill"]) {
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  background: var(--color-white);
  padding: 0.75rem 2rem 0.75rem 1.25rem;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300245b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
body .elementor.elementor :is(.see-all,[data-c~="see-all"]) {
  font-weight: 700;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  color: var(--color-blue-link);
  white-space: nowrap;
}
body .elementor.elementor :is(.see-all,[data-c~="see-all"]):hover { text-decoration: underline; }

/* ============================================================
   Product / Blog cards
   ============================================================ */

body .elementor.elementor :is(.product-card,[data-c~="product-card"]),
body .elementor.elementor :is(.blog-card,[data-c~="blog-card"]) {
  display: block;
}
body .elementor.elementor :is(.product-card__media,[data-c~="product-card__media"]),
body .elementor.elementor :is(.blog-card__media,[data-c~="blog-card__media"]) {
  position: relative;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow-hard-sm);
  aspect-ratio: 659 / 563;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body .elementor.elementor :is(.blog-card__media,[data-c~="blog-card__media"]) { aspect-ratio: 659 / 288; }
body .elementor.elementor :is(.product-card__media,[data-c~="product-card__media"]) img,
body .elementor.elementor :is(.blog-card__media,[data-c~="blog-card__media"]) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Same "lift + grow hard-shadow" interaction as .btn--primary:hover,
   scaled down to the thumbnail's smaller base shadow. Applied to just
   the media box (not the whole card) for both card types, so blog and
   product thumbnails behave identically on hover. */
body .elementor.elementor :is(.product-card,[data-c~="product-card"]):hover :is(.product-card__media,[data-c~="product-card__media"]),
body .elementor.elementor :is(.blog-card,[data-c~="blog-card"]):hover :is(.blog-card__media,[data-c~="blog-card__media"]) {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0px var(--color-dark);
}
body .elementor.elementor :is(.product-card__title,[data-c~="product-card__title"]):where(:not(.pf-product-title)) {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.6rem);
  line-height: 1.3;
  margin-top: 1.5rem;
  transition: color 0.2s ease;
}

body .elementor.elementor :is(.product-card__title,[data-c~="product-card__title"]):where(.pf-product-title) { margin-top: 1.5rem; }
body .elementor.elementor :is(.product-card,[data-c~="product-card"]):hover :is(.product-card__title,[data-c~="product-card__title"]) {
  color: var(--color-blue-link);
}
body .elementor.elementor :is(.blog-card__body,[data-c~="blog-card__body"]):where(:not(.pf-blog-body)) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

body .elementor.elementor :is(.blog-card__body,[data-c~="blog-card__body"]):where(.pf-blog-body) { margin-top: 1.5rem; }
body .elementor.elementor :is(.blog-card__body,[data-c~="blog-card__body"]) h3:where(:not(.pf-blog-title)) {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.6rem);
  line-height: 1.3;
  transition: color 0.2s ease;
}
body .elementor.elementor :is(.blog-card,[data-c~="blog-card"]):hover :is(.blog-card__body,[data-c~="blog-card__body"]) h3 {
  color: var(--color-blue-link);
}
body .elementor.elementor :is(.blog-card__meta,[data-c~="blog-card__meta"]):where(:not(.pf-blog-meta)) {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-dark);
}

/* Partner logo wall (Tentang Kami) */
body .elementor.elementor :is(.partner-grid,[data-c~="partner-grid"]) {list-style: none;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;}
/* From here on, fill the full container width: as many ~9rem tiles as fit,
   stretched evenly, instead of capping out and leaving space on wide screens. */
@media (min-width: 700px) {  }
body .elementor.elementor :is(.partner-intro,[data-c~="partner-intro"]) {
  font-size: var(--text-body);
  line-height: 1.6;
  max-width: 72ch;
  margin-top: 1.5rem;
}
body .elementor.elementor :is(.partner-grid,[data-c~="partner-grid"]) :is(li,[data-t="li"]) {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0.75rem;
  transition: transform 0.2s ease;
}
body .elementor.elementor :is(.partner-grid,[data-c~="partner-grid"]) :is(li,[data-t="li"]):hover { transform: translateY(-4px); }
body .elementor.elementor :is(.partner-grid,[data-c~="partner-grid"]) img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
   Impact stats (dark "Dampak Kami")
   ============================================================ */
body .elementor.elementor :is(.impact-stats--dark,[data-c~="impact-stats--dark"]) {
  position: relative;
  background: var(--color-navy);
  color: var(--color-white);
  overflow: hidden;
}
body .elementor.elementor :is(.impact-stats--dark,[data-c~="impact-stats--dark"])::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/wp-content/plugins/pamflet-site/assets/assets/images/texture-why-pamflet.jpg");
  background-size: cover;
  background-position: center;
  /* Overlay (not multiply) so the light grain actually shows up against navy
     instead of just darkening further. */
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}
body .elementor.elementor :is(.impact-stats--dark,[data-c~="impact-stats--dark"]) > :is(.container,[data-c~="container"]) {
  position: relative;
  z-index: 1;
}
body .elementor.elementor :is(.impact-stats__inner,[data-c~="impact-stats__inner"]) {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
body .elementor.elementor :is(.impact-stats__intro,[data-c~="impact-stats__intro"]) :is(.eyebrow,[data-c~="eyebrow"]) {
  margin-bottom: 1.25rem;
}
body .elementor.elementor :is(.impact-stats__desc,[data-c~="impact-stats__desc"]) {
  font-size: var(--text-body);
  line-height: 1.5;
  margin-top: 1.5rem;
  max-width: 40ch;
}
body .elementor.elementor :is(.stat-grid,[data-c~="stat-grid"]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem 2.5rem;
}
body .elementor.elementor :is(.stat__top,[data-c~="stat__top"]):where(:not(.pf-stat-top)) {
  display: flex;
  align-items: center;
}
body .elementor.elementor :is(.stat__icon,[data-c~="stat__icon"]):where(:not(.pf-stat-icon)) {
  width: clamp(3.5rem, 7vw, 5.5rem);
  height: clamp(3.5rem, 7vw, 5.5rem);
  flex-shrink: 0;
  object-fit: contain;
  margin-right: -0.75rem;
  position: relative;
  z-index: 0;
}

body .elementor.elementor :is(.stat__icon,[data-c~="stat__icon"]):where(.pf-stat-icon) { margin-right: -0.75rem; }
body .elementor.elementor :is(.stat__number,[data-c~="stat__number"]):where(:not(.pf-stat-number)) {
  font-family: var(--font-sans);
  color: var(--color-teal);
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 1;
  display: block;
  position: relative;
  z-index: 1;
  margin: 0;
}

body .elementor.elementor :is(.stat__number,[data-c~="stat__number"]):where(.pf-stat-number) { margin: 0; }
body .elementor.elementor :is(.stat__percent,[data-c~="stat__percent"]) {
  font-size: 0.4em;
  margin-left: 0.35rem;
}
body .elementor.elementor :is(.stat__label,[data-c~="stat__label"]):where(:not(.pf-stat-label)) {
  margin-top: 0.75rem;
  font-size: clamp(1rem, 1.3vw, 1.6875rem);
  line-height: 1.4;
  max-width: 32ch;
}

body .elementor.elementor :is(.stat__label,[data-c~="stat__label"]):where(.pf-stat-label) { margin-top: 0.75rem; }

/* ============================================================
   Impact map ("Sebaran dampak") — placeholder interactive map
   ============================================================ */
body .elementor.elementor :is(.impact-map-section__intro,[data-c~="impact-map-section__intro"]) {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
body .elementor.elementor :is(.impact-map-section__desc,[data-c~="impact-map-section__desc"]) {
  font-size: var(--text-body);
  line-height: 1.5;
  margin-top: 1.25rem;
}
body .elementor.elementor :is(.impact-map-section__note,[data-c~="impact-map-section__note"]) {
  font-size: 0.95rem;
  color: var(--color-dark);
  margin-top: 1.5rem;
}
body .elementor.elementor :is(.impact-map-stage,[data-c~="impact-map-stage"]) { position: relative; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
body .elementor.elementor :is(.impact-map-chart,[data-c~="impact-map-chart"]) { width: 100%; height: clamp(17rem, 40vw, 36rem); }
body .elementor.elementor :is(.impact-map-chart,[data-c~="impact-map-chart"])[hidden] { display: none; }
/* Touch: a vertical swipe scrolls the page until the map is zoomed in, then
   one finger pans the map (class toggled by js/impact-map.js). */
body .elementor.elementor :is(.impact-map-chart,[data-c~="impact-map-chart"]) canvas { touch-action: pan-y !important; }
body .elementor.elementor :is(.impact-map-chart,[data-c~="impact-map-chart"]):is(.is-zoomed,[data-c~="is-zoomed"]) canvas { touch-action: none !important; }
body .elementor.elementor :is(.impact-map-hint,[data-c~="impact-map-hint"]) { display: none; }
@media (max-width: 760px) {
  /* Taller map area on phones: more room to zoom and tap the pins. */
  body .elementor.elementor :is(.impact-map-chart,[data-c~="impact-map-chart"]) { height: clamp(21rem, 105vw, 30rem); }
}
@media (hover: none) {
  body .elementor.elementor :is(.impact-map-hint,[data-c~="impact-map-hint"]) {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--color-gray-400);
  }
}
body .elementor.elementor :is(.impact-map-legend,[data-c~="impact-map-legend"]) {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  font-size: 1rem;
  color: var(--color-white);
}
body .elementor.elementor :is(.impact-map-legend,[data-c~="impact-map-legend"]) :is(li,[data-t="li"]) { display: inline-flex; align-items: center; gap: 0.6rem; }
body .elementor.elementor :is(.impact-map-legend__swatch,[data-c~="impact-map-legend__swatch"]) { width: 1.1rem; height: 1.1rem; border-radius: 4px; background: var(--color-teal); }
body .elementor.elementor :is(.impact-map-legend__pin,[data-c~="impact-map-legend__pin"]) {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--color-orange);
  border: 2px solid var(--color-white);
}
body .elementor.elementor :is(.impact-fallback,[data-c~="impact-fallback"]) { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--color-white); line-height: 1.6; }

/* Hover / tap card with the programs and impact of a province */
body .elementor.elementor :is(.impact-tip,[data-c~="impact-tip"]) {
  position: fixed;
  z-index: 300;
  width: min(24rem, calc(100vw - 1rem));
  max-height: calc(100vh - 1rem);
  overflow-y: auto;
  padding: 1rem 1.15rem;
  background: var(--color-white);
  color: var(--color-dark);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 12px;
  box-shadow: 6px 6px 0 var(--color-teal);
  pointer-events: none;
  font-size: 0.95rem;
  line-height: 1.45;
}
body .elementor.elementor :is(.impact-tip,[data-c~="impact-tip"])[hidden] { display: none; }
body .elementor.elementor :is(.impact-tip__head,[data-c~="impact-tip__head"]) { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
body .elementor.elementor :is(.impact-tip__region,[data-c~="impact-tip__region"]) { font-size: 1.15rem; }
body .elementor.elementor :is(.impact-tip__count,[data-c~="impact-tip__count"]) { font-size: 0.85rem; color: var(--color-gray-700); font-weight: 700; }
body .elementor.elementor :is(.impact-tip__prog,[data-c~="impact-tip__prog"]) { padding-top: 0.65rem; margin-top: 0.65rem; border-top: 1px solid rgba(20, 22, 24, 0.15); }
body .elementor.elementor :is(.impact-tip__prog,[data-c~="impact-tip__prog"]):first-of-type { margin-top: 0; }
body .elementor.elementor :is(.impact-tip__row,[data-c~="impact-tip__row"]) { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
body .elementor.elementor :is(.impact-tip__pill,[data-c~="impact-tip__pill"]) {
  flex-shrink: 0;
  padding: 0.1rem 0.6rem;
  border-radius: 28px;
  background: var(--color-gray-400);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
}
body .elementor.elementor :is(.impact-tip__pill,[data-c~="impact-tip__pill"]).is-active { background: var(--color-orange); }
body .elementor.elementor :is(.impact-tip__meta,[data-c~="impact-tip__meta"]) { color: var(--color-dark); font-size: 0.85rem; margin-top: 0.15rem; }
body .elementor.elementor :is(.impact-tip__desc,[data-c~="impact-tip__desc"]) {
  margin-top: 0.35rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body .elementor.elementor :is(.impact-tip,[data-c~="impact-tip"]):is(.is-pinned,[data-c~="is-pinned"]) { pointer-events: auto; }
body .elementor.elementor :is(.impact-tip__desc,[data-c~="impact-tip__desc"]):is(.is-short,[data-c~="is-short"]) { -webkit-line-clamp: 2; }
body .elementor.elementor :is(.impact-tip,[data-c~="impact-tip"]):is(.is-pinned,[data-c~="is-pinned"]) :is(.impact-tip__desc,[data-c~="impact-tip__desc"]) { display: block; -webkit-line-clamp: unset; overflow: visible; }
body .elementor.elementor :is(.impact-tip__hint,[data-c~="impact-tip__hint"]) { margin-top: 0.75rem; font-size: 0.8rem; font-style: italic; color: var(--color-dark); }
body .elementor.elementor :is(.impact-tip__impact,[data-c~="impact-tip__impact"]) { margin-top: 0.35rem; font-weight: 700; color: var(--color-blue-link); }
body .elementor.elementor :is(.impact-tip__impact,[data-c~="impact-tip__impact"]):is(.is-empty,[data-c~="is-empty"]) { font-weight: 400; font-style: italic; color: var(--color-dark); }
body .elementor.elementor :is(.impact-tip__close,[data-c~="impact-tip__close"]) {
  float: right;
  width: 2rem;
  height: 2rem;
  margin: -0.35rem -0.4rem 0 0.5rem;
  border: 2px solid var(--color-dark);
  border-radius: 50%;
  background: var(--color-white);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
@media (hover: none) {
  body .elementor.elementor :is(.impact-tip,[data-c~="impact-tip"]) {
    left: 0.5rem !important;
    right: 0.5rem;
    top: auto !important;
    bottom: 0.5rem;
    width: auto;
    max-height: 60vh;
    pointer-events: auto;
  }
}

/* Combined "Dampak Kami" section: stats, then the map on the same navy band */
body .elementor.elementor :is(.impact-map-block,[data-c~="impact-map-block"]) { margin-top: clamp(3rem, 6vw, 5rem); }
body .elementor.elementor :is(.impact-map-block__title,[data-c~="impact-map-block__title"]) {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  color: var(--color-white);
}
body .elementor.elementor :is(.impact-stats--dark,[data-c~="impact-stats--dark"]) :is(.impact-map-section__desc,[data-c~="impact-map-section__desc"]) { color: var(--color-white); }
body .elementor.elementor :is(.impact-stats--dark,[data-c~="impact-stats--dark"]) :is(.impact-map-section__note,[data-c~="impact-map-section__note"]) { color: var(--color-gray-400); }

/* ============================================================
   Issue puzzle (Tentang Kami): the issue names as jigsaw pieces
   ============================================================ */
body .elementor.elementor :is(.issue-section,[data-c~="issue-section"]) { padding-block: clamp(2rem, 4.5vw, 3.5rem); }
body .elementor.elementor :is(.issue-frame,[data-c~="issue-frame"]) {
  padding: clamp(1.25rem, 3vw, 2rem);
}
body .elementor.elementor :is(.issue-section__head,[data-c~="issue-section__head"]) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.75rem 1.5rem; }
body .elementor.elementor :is(.puzzle-controls,[data-c~="puzzle-controls"]) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
body .elementor.elementor :is(.puzzle-status,[data-c~="puzzle-status"]) {
  padding: 0.35rem 1rem;
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  background: var(--color-yellow-tag);
  font-weight: 700;
  font-size: 0.95rem;
}
body .elementor.elementor :is(.puzzle-status,[data-c~="puzzle-status"]).is-solved { background: var(--color-teal); }
body .elementor.elementor :is(.puzzle-board,[data-c~="puzzle-board"]) {
  position: relative;
  list-style: none;
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  padding: 0;
  min-height: 16rem;
  overflow: hidden;
  background-image: radial-gradient(rgba(20, 22, 24, 0.14) 1.4px, transparent 1.6px);
  background-size: 22px 22px;
  touch-action: pan-y;
}
body .elementor.elementor :is(.puzzle-ghost,[data-c~="puzzle-ghost"]) { position: absolute; left: 0; top: 0; pointer-events: none; }
body .elementor.elementor :is(.puzzle-piece,[data-c~="puzzle-piece"]) {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  will-change: transform;
  pointer-events: none;
}
body .elementor.elementor :is(.puzzle-piece,[data-c~="puzzle-piece"]):focus-visible { outline: none; }
body .elementor.elementor :is(.puzzle-piece,[data-c~="puzzle-piece"]):focus-visible svg { filter: drop-shadow(3px 3px 0 var(--color-dark)) drop-shadow(0 0 0 var(--color-blue-link)) drop-shadow(0 0 3px var(--color-blue-link)); }
body .elementor.elementor :is(.puzzle-piece,[data-c~="puzzle-piece"]):is(.is-settling,[data-c~="is-settling"]) { transition: transform 0.5s cubic-bezier(0.22, 1.1, 0.36, 1); }
body .elementor.elementor :is(.puzzle-piece,[data-c~="puzzle-piece"]).is-dragging { cursor: grabbing; }
body .elementor.elementor :is(.puzzle-piece,[data-c~="puzzle-piece"]) svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(3px 3px 0 var(--color-dark)); pointer-events: none; }
body .elementor.elementor :is(.puzzle-piece,[data-c~="puzzle-piece"]) svg path { pointer-events: visiblePainted; }
body .elementor.elementor :is(.puzzle-piece,[data-c~="puzzle-piece"]).is-dragging svg { filter: drop-shadow(7px 7px 0 var(--color-dark)); }
body .elementor.elementor :is(.puzzle-piece,[data-c~="puzzle-piece"]).is-locked { cursor: default; }
body .elementor.elementor :is(.puzzle-piece,[data-c~="puzzle-piece"]).is-locked svg { filter: drop-shadow(1px 1px 0 var(--color-dark)); }
body .elementor.elementor :is(.puzzle-piece,[data-c~="puzzle-piece"]) svg :is(.puzzle-outline,[data-c~="puzzle-outline"]) { pointer-events: none; }
body .elementor.elementor :is(.puzzle-board,[data-c~="puzzle-board"]).is-solved :is(.puzzle-piece,[data-c~="puzzle-piece"]) svg :is(.puzzle-outline,[data-c~="puzzle-outline"]) { stroke-width: 1.5; }
body .elementor.elementor :is(.puzzle-piece,[data-c~="puzzle-piece"]):is(.is-popping,[data-c~="is-popping"]) { animation: puzzle-pop 0.45s ease; }
body .elementor.elementor :is(.puzzle-piece__label,[data-c~="puzzle-piece__label"]) {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  font-weight: 700;
  line-height: 1.15;
  pointer-events: none;
}
body .elementor.elementor :is(.puzzle-piece__text,[data-c~="puzzle-piece__text"]) {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.22em 0.4em;
  color: var(--color-dark);
  background: rgba(255, 255, 255, 0.94);
  border: 2px solid var(--color-dark);
  border-radius: 0.7em;
}
@keyframes puzzle-pop {
  0% { filter: none; scale: 1; }
  50% { scale: 1.06; }
  100% { scale: 1; }
}
body .elementor.elementor :is(.puzzle-board,[data-c~="puzzle-board"]).is-solved :is(.puzzle-piece,[data-c~="puzzle-piece"]) { animation: puzzle-pop 0.6s ease; }
body .elementor.elementor :is(.puzzle-confetti,[data-c~="puzzle-confetti"]) { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
body .elementor.elementor :is(.puzzle-confetti,[data-c~="puzzle-confetti"]) span {
  position: absolute;
  width: 10px;
  height: 14px;
  border: 2px solid var(--color-dark);
  border-radius: 3px;
  animation: puzzle-confetti 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes puzzle-confetti {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
/* Without JavaScript the pieces are just a readable list */
body .elementor.elementor :is(.puzzle-board,[data-c~="puzzle-board"]):not(.is-ready) { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 1rem; min-height: 0; }
body .elementor.elementor :is(.puzzle-board,[data-c~="puzzle-board"]):not(.is-ready) :is(.puzzle-piece,[data-c~="puzzle-piece"]) { position: static; pointer-events: auto; padding: 0.5rem 1rem; border: 2px solid var(--color-dark); border-radius: 999px; background: var(--color-white); }
body .elementor.elementor :is(.puzzle-board,[data-c~="puzzle-board"]):not(.is-ready) :is(.puzzle-piece__label,[data-c~="puzzle-piece__label"]) { position: static; }
@media (prefers-reduced-motion: reduce) {
  body .elementor.elementor :is(.puzzle-piece,[data-c~="puzzle-piece"]):is(.is-settling,[data-c~="is-settling"]) { transition: none; }
}

/* ============================================================
   Partners ("Mitra Kerja")
   ============================================================ */
body .elementor.elementor :is(.partners__inner,[data-c~="partners__inner"]) {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
body .elementor.elementor :is(.partners__intro,[data-c~="partners__intro"]) p {
  font-size: var(--text-body);
  line-height: 1.5;
  margin-block: 1.25rem 2rem;
  max-width: 42ch;
}
body .elementor.elementor :is(.partners__logos,[data-c~="partners__logos"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}
body .elementor.elementor :is(.partners__logos,[data-c~="partners__logos"]) img {
  max-height: 128px;
  width: auto;
  max-width: 250px;
  object-fit: contain;
}

/* ============================================================
   CTA — Dukung Kami
   ============================================================ */
body .elementor.elementor :is(.cta-partners,[data-c~="cta-partners"]) {
  position: relative;
  overflow: hidden;
}
body .elementor.elementor :is(.cta-partners,[data-c~="cta-partners"])::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/wp-content/plugins/pamflet-site/assets/assets/images/texture-why-pamflet.jpg");
  background-size: max(100%, 1800px) auto;
  background-repeat: repeat-y;
  background-position: top center;
  mix-blend-mode: multiply;
  opacity: 0.78;
  pointer-events: none;
}
body .elementor.elementor :is(.cta-partners,[data-c~="cta-partners"]) > :is(.container,[data-c~="container"]) { position: relative; z-index: 1; }
body .elementor.elementor :is(.cta-partners__inner,[data-c~="cta-partners__inner"]) {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
body .elementor.elementor :is(.cta-partners__inner,[data-c~="cta-partners__inner"]) p {
  font-size: var(--text-body);
  line-height: 1.5;
  max-width: 55ch;
}
body .elementor.elementor :is(.cta-partners__actions,[data-c~="cta-partners__actions"]) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ============================================================
   Footer
   ============================================================ */
body .elementor.elementor :is(.site-footer,[data-c~="site-footer"]) {
  background: var(--color-footer-bg);
  color: var(--color-white);
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: 2rem;
}
body .elementor.elementor :is(.footer-top,[data-c~="footer-top"]) {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr) minmax(240px, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
body .elementor.elementor :is(.footer-brand__mark,[data-c~="footer-brand__mark"]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
body .elementor.elementor :is(.footer-brand__swatch,[data-c~="footer-brand__swatch"]) {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--color-teal);
  border: 2px solid var(--color-white);
  display: inline-block;
}
body .elementor.elementor :is(.footer-brand__name,[data-c~="footer-brand__name"]) {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
}
body .elementor.elementor :is(.footer-brand,[data-c~="footer-brand"]) p {
  font-family: var(--font-sans);
  color: var(--color-white);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 36ch;
}

body .elementor.elementor :is(.footer-col,[data-c~="footer-col"]) { display: flex; flex-direction: column; gap: 1rem; }
body .elementor.elementor :is(.footer-col__title,[data-c~="footer-col__title"]) {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-teal);
  margin-bottom: 0.25rem;
}
body .elementor.elementor :is(.footer-col,[data-c~="footer-col"]) a {
  font-family: var(--font-sans);
  font-size: 1rem;
}
body .elementor.elementor :is(.footer-col,[data-c~="footer-col"]) a:hover { color: var(--color-teal); }

body .elementor.elementor :is(.footer-newsletter__title,[data-c~="footer-newsletter__title"]) {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-orange);
  margin-bottom: 0.5rem;
}
body .elementor.elementor :is(.footer-newsletter,[data-c~="footer-newsletter"]) > p {
  font-family: var(--font-sans);
  color: var(--color-white);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
body .elementor.elementor :is(.footer-newsletter__form,[data-c~="footer-newsletter__form"]) {
  display: flex;
  gap: 0.5rem;
}
body .elementor.elementor :is(.footer-newsletter__form,[data-c~="footer-newsletter__form"]) input {
  flex: 1;
  min-width: 0;
  background: var(--color-footer-input-bg);
  border: 1px solid var(--color-footer-border);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 1rem;
}
body .elementor.elementor :is(.footer-newsletter__form,[data-c~="footer-newsletter__form"]) input::placeholder { color: var(--color-gray-400); }
body .elementor.elementor :is(.footer-newsletter__form,[data-c~="footer-newsletter__form"]) button {
  background: var(--color-orange);
  border: none;
  border-radius: 4px;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
body .elementor.elementor :is(.footer-newsletter__form,[data-c~="footer-newsletter__form"]) button img { width: 18px; height: 18px; }
body .elementor.elementor :is(.footer-newsletter__note,[data-c~="footer-newsletter__note"]) {
  min-height: 1.25em;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-teal);
}

body .elementor.elementor :is(.footer-bottom,[data-c~="footer-bottom"]) :is(hr,[data-t="hr"]) {
  border: none;
  border-top: 1px solid var(--color-footer-border);
  margin: 0 0 1.5rem;
}
body .elementor.elementor :is(.footer-bottom__row,[data-c~="footer-bottom__row"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-gray-500);
}

/* ============================================================
   Entrance animation ("reveal")
   ============================================================ */
body .elementor.elementor :is(.reveal,[data-c~="reveal"]) {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1.05s cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 1.05s cubic-bezier(0.16, 0.84, 0.44, 1);
  /* A built-in pause before anything moves, so items don't snap into motion
     the instant they cross into view — reads more deliberate, more dramatic. */
  transition-delay: var(--reveal-delay, 0.2s);
  will-change: opacity, transform;
}
body .elementor.elementor :is(.reveal,[data-c~="reveal"]).is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered groups: nth-child delay per item within their grid/row */
body .elementor.elementor :is(.hero__text,[data-c~="hero__text"]) > :is(.reveal,[data-c~="reveal"]):nth-child(1) { --reveal-delay: 0.15s; }
body .elementor.elementor :is(.hero__text,[data-c~="hero__text"]) > :is(.reveal,[data-c~="reveal"]):nth-child(2) { --reveal-delay: 0.32s; }
body .elementor.elementor :is(.hero__text,[data-c~="hero__text"]) > :is(.reveal,[data-c~="reveal"]):nth-child(3) { --reveal-delay: 0.49s; }
body .elementor.elementor :is(.hero__text,[data-c~="hero__text"]) > :is(.reveal,[data-c~="reveal"]):nth-child(4) { --reveal-delay: 0.66s; }
body .elementor.elementor :is(.hero__media,[data-c~="hero__media"]):is(.reveal,[data-c~="reveal"]) { --reveal-delay: 0.4s; }

body .elementor.elementor :is(.why-points,[data-c~="why-points"]) > :is(.reveal,[data-c~="reveal"]):nth-child(2) { --reveal-delay: 0.2s; }
body .elementor.elementor :is(.why-points,[data-c~="why-points"]) > :is(.reveal,[data-c~="reveal"]):nth-child(3) { --reveal-delay: 0.36s; }
body .elementor.elementor :is(.stat-grid,[data-c~="stat-grid"]) > :is(.reveal,[data-c~="reveal"]):nth-child(1) { --reveal-delay: 0.15s; }
body .elementor.elementor :is(.stat-grid,[data-c~="stat-grid"]) > :is(.reveal,[data-c~="reveal"]):nth-child(2) { --reveal-delay: 0.28s; }
body .elementor.elementor :is(.stat-grid,[data-c~="stat-grid"]) > :is(.reveal,[data-c~="reveal"]):nth-child(3) { --reveal-delay: 0.41s; }
body .elementor.elementor :is(.stat-grid,[data-c~="stat-grid"]) > :is(.reveal,[data-c~="reveal"]):nth-child(4) { --reveal-delay: 0.54s; }
body .elementor.elementor :is(.stat-grid,[data-c~="stat-grid"]) > :is(.reveal,[data-c~="reveal"]):nth-child(5) { --reveal-delay: 0.67s; }
body .elementor.elementor :is(.work-grid,[data-c~="work-grid"]) > :is(.reveal,[data-c~="reveal"]):nth-child(1) { --reveal-delay: 0.15s; }
body .elementor.elementor :is(.work-grid,[data-c~="work-grid"]) > :is(.reveal,[data-c~="reveal"]):nth-child(2) { --reveal-delay: 0.32s; }
body .elementor.elementor :is(.work-grid,[data-c~="work-grid"]) > :is(.reveal,[data-c~="reveal"]):nth-child(3) { --reveal-delay: 0.49s; }

body .elementor.elementor :is(.product-grid,[data-c~="product-grid"]) > :is(.reveal,[data-c~="reveal"]):nth-child(1),
body .elementor.elementor :is(.blog-grid,[data-c~="blog-grid"]) > :is(.reveal,[data-c~="reveal"]):nth-child(1) { --reveal-delay: 0.15s; }
body .elementor.elementor :is(.product-grid,[data-c~="product-grid"]) > :is(.reveal,[data-c~="reveal"]):nth-child(2),
body .elementor.elementor :is(.blog-grid,[data-c~="blog-grid"]) > :is(.reveal,[data-c~="reveal"]):nth-child(2) { --reveal-delay: 0.32s; }
body .elementor.elementor :is(.product-grid,[data-c~="product-grid"]) > :is(.reveal,[data-c~="reveal"]):nth-child(3),
body .elementor.elementor :is(.blog-grid,[data-c~="blog-grid"]) > :is(.reveal,[data-c~="reveal"]):nth-child(3) { --reveal-delay: 0.49s; }



body .elementor.elementor :is(.footer-top,[data-c~="footer-top"]) > :is(.reveal,[data-c~="reveal"]):nth-child(1) { --reveal-delay: 0.15s; }
body .elementor.elementor :is(.footer-top,[data-c~="footer-top"]) > :is(.reveal,[data-c~="reveal"]):nth-child(2) { --reveal-delay: 0.32s; }
body .elementor.elementor :is(.footer-top,[data-c~="footer-top"]) > :is(.reveal,[data-c~="reveal"]):nth-child(3) { --reveal-delay: 0.49s; }

@media (prefers-reduced-motion: reduce) {
  body .elementor.elementor :is(.reveal,[data-c~="reveal"]) {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body .elementor.elementor :is(.logo-strip__track,[data-c~="logo-strip__track"]) {
    animation: none;
  }
  body .elementor.elementor :is(.logo-strip,[data-c~="logo-strip"]) {
    overflow-x: auto;
  }
  body .elementor.elementor :is(.text-cycle,[data-c~="text-cycle"]) {
    animation: none;
    color: var(--color-orange);
  }
  body .elementor.elementor :is(.dance-word,[data-c~="dance-word"]) {
    animation: none;
    transform: none;
  }
}

/* ============================================================
   Inner-page hero (breadcrumb + title banner)
   ============================================================ */
body .elementor.elementor :is(.page-hero,[data-c~="page-hero"]) {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}
body .elementor.elementor :is(.breadcrumb,[data-c~="breadcrumb"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.875rem;
  color: var(--color-gray-500);
  margin-bottom: 1.5rem;
}
body .elementor.elementor :is(.breadcrumb,[data-c~="breadcrumb"]) a { color: var(--color-gray-700); }
body .elementor.elementor :is(.breadcrumb,[data-c~="breadcrumb"]) a:hover { color: var(--color-orange); }
body .elementor.elementor :is(.breadcrumb__home,[data-c~="breadcrumb__home"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-700);
}
body .elementor.elementor :is(.breadcrumb__home,[data-c~="breadcrumb__home"]) svg { display: block; width: 18px; height: 18px; }
body .elementor.elementor :is(.breadcrumb__home,[data-c~="breadcrumb__home"]):hover { color: var(--color-orange); }
body .elementor.elementor :is(.breadcrumb,[data-c~="breadcrumb"]) a:not(:is(.breadcrumb__home,[data-c~="breadcrumb__home"])) {
  background: rgba(0, 36, 91, 0.06);
  padding: 0.3rem 0.8rem;
  border-radius: 8px;
  font-weight: 500;
}
body .elementor.elementor :is(.breadcrumb,[data-c~="breadcrumb"]) a:not(:is(.breadcrumb__home,[data-c~="breadcrumb__home"])):hover {
  background: var(--color-blue-pale);
  color: var(--color-blue-link);
}
body .elementor.elementor :is(.breadcrumb,[data-c~="breadcrumb"]) span[aria-current="page"] { color: var(--color-blue-link); font-weight: 600; }
body .elementor.elementor :is(.breadcrumb__home,[data-c~="breadcrumb__home"]) + span[aria-hidden="true"] { font-size: 0; }
body .elementor.elementor :is(.breadcrumb__home,[data-c~="breadcrumb__home"]) + span[aria-hidden="true"]::before { content: "\203A"; font-size: 1rem; color: var(--color-gray-500); }
/* Elementor Pro Breadcrumbs widget (Yoast markup: nav#breadcrumbs > span > span > a) — same look as the component above */
body .elementor.elementor .elementor-widget-breadcrumbs #breadcrumbs > span {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.875rem;
  color: var(--color-gray-500);
  margin-bottom: 1.5rem;
}
body .elementor.elementor .elementor-widget-breadcrumbs #breadcrumbs a { color: var(--color-gray-700); text-decoration: none; }
body .elementor.elementor .elementor-widget-breadcrumbs #breadcrumbs a:hover { color: var(--color-orange); }
body .elementor.elementor .elementor-widget-breadcrumbs #breadcrumbs .pf-bc-home a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body .elementor.elementor .elementor-widget-breadcrumbs #breadcrumbs .pf-bc-home svg { display: block; width: 18px; height: 18px; }
body .elementor.elementor .elementor-widget-breadcrumbs #breadcrumbs > span > span:not(.pf-bc-home):not(.pf-bc-sep):not(.breadcrumb_last) a {
  display: inline-block;
  background: rgba(0, 36, 91, 0.06);
  padding: 0.3rem 0.8rem;
  border-radius: 8px;
  font-weight: 500;
}
body .elementor.elementor .elementor-widget-breadcrumbs #breadcrumbs > span > span:not(.pf-bc-home):not(.pf-bc-sep):not(.breadcrumb_last) a:hover {
  background: var(--color-blue-pale);
  color: var(--color-blue-link);
}
body .elementor.elementor .elementor-widget-breadcrumbs #breadcrumbs .breadcrumb_last { color: var(--color-blue-link); font-weight: 600; }
body .elementor.elementor .elementor-widget-breadcrumbs #breadcrumbs .pf-bc-sep::before { content: "/"; color: var(--color-gray-500); }
body .elementor.elementor .elementor-widget-breadcrumbs #breadcrumbs .pf-bc-home + .pf-bc-sep::before { content: "\203A"; font-size: 1rem; }
body .elementor.elementor :is(.page-hero--program,[data-c~="page-hero--program"]) .elementor-widget-breadcrumbs #breadcrumbs > span { justify-content: center; }
body .elementor.elementor :is(.page-hero__title,[data-c~="page-hero__title"]):where(:not(.pf-h1)) {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  line-height: 1.2em;
  margin-block: 0.75rem 1.25rem;
  letter-spacing: 0em;
}
body .elementor.elementor :is(.page-hero__subtitle,[data-c~="page-hero__subtitle"]):where(:not(.pf-text)) {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  max-width: 56ch;
  color: var(--color-dark);
}

/* Elements styled by a global class (pf-h1 / pf-text) keep the layout part of the base rule */
body .elementor.elementor :is(.page-hero__title,[data-c~="page-hero__title"]):where(.pf-h1) { margin-block: 0.75rem 1.25rem; }
body .elementor.elementor :is(.page-hero__subtitle,[data-c~="page-hero__subtitle"]):where(.pf-text) { max-width: 56ch; }

/* ============================================================
   Prose / long-form text blocks
   ============================================================ */
body .elementor.elementor :is(.prose,[data-c~="prose"]) {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 72ch;
  margin-top: 1.5rem;
}
body .elementor.elementor :is(.prose,[data-c~="prose"]) p {
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-dark);
}

body .elementor.elementor #apa-itu-pamflet { padding-top: clamp(1rem, 2.5vw, 2rem); }
/* Tentang Kami intro: description on the left, illustration on the right */
body .elementor.elementor :is(.about-intro,[data-c~="about-intro"]) {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
body .elementor.elementor :is(.about-intro,[data-c~="about-intro"]) :is(.prose,[data-c~="prose"]) { margin-top: 0; max-width: none; }
body .elementor.elementor :is(.about-intro,[data-c~="about-intro"]) :is(.prose,[data-c~="prose"]) p { font-size: var(--text-body); line-height: 1.7; }
body .elementor.elementor :is(.about-intro__art,[data-c~="about-intro__art"]) { max-width: 32rem; width: 100%; justify-self: center; }

/* ============================================================
   Value blocks (Visi / Misi / Prinsip)
   ============================================================ */
body .elementor.elementor :is(.value-grid,[data-c~="value-grid"]) {margin-top: clamp(2rem, 4vw, 3rem);}
body .elementor.elementor :is(.value-block,[data-c~="value-block"]):where(:not(.pf-value)) {
  border-top: 4px solid var(--color-dark);
  padding-top: 1.5rem;
}

body .elementor.elementor :is(.value-block,[data-c~="value-block"]):where(.pf-value) { padding-top: 1.5rem; }
body .elementor.elementor :is(.value-block__label,[data-c~="value-block__label"]):where(:not(.pf-value-label)) {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.1;
  margin-bottom: 0.9rem;
}

body .elementor.elementor :is(.value-block__label,[data-c~="value-block__label"]):where(.pf-value-label) { margin-bottom: 0.9rem; }
body .elementor.elementor :is(.value-block,[data-c~="value-block"]) p:where(:not(.pf-value-text)) {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-dark);
}
body .elementor.elementor :is(.value-block--visi,[data-c~="value-block--visi"]):where(:not(.pf-value-visi)) { border-color: var(--color-blue-link); }
body .elementor.elementor :is(.value-block--visi,[data-c~="value-block--visi"]) :is(.value-block__label,[data-c~="value-block__label"]):where(:not(.pf-value-label-visi)) { color: var(--color-blue-link); }
body .elementor.elementor :is(.value-block--misi,[data-c~="value-block--misi"]):where(:not(.pf-value-misi)) { border-color: var(--color-orange); }
body .elementor.elementor :is(.value-block--misi,[data-c~="value-block--misi"]) :is(.value-block__label,[data-c~="value-block__label"]):where(:not(.pf-value-label-misi)) { color: var(--color-orange); }
body .elementor.elementor :is(.value-block--prinsip,[data-c~="value-block--prinsip"]):where(:not(.pf-value-prinsip)) { border-color: var(--color-teal); }
body .elementor.elementor :is(.value-block--prinsip,[data-c~="value-block--prinsip"]) :is(.value-block__label,[data-c~="value-block__label"]):where(:not(.pf-value-label-prinsip)) { color: var(--color-teal); }

/* ============================================================
   Program detail pages: "Kegiatan Utama" activity list
   ============================================================ */
body .elementor.elementor :is(.activity-grid,[data-c~="activity-grid"]) {margin-top: clamp(2rem, 4vw, 3rem);}
body .elementor.elementor :is(.activity-item,[data-c~="activity-item"]) { border: var(--border-w) solid var(--color-dark); border-radius: 15px; padding: clamp(1.25rem, 2vw, 1.75rem); }
:where(body .elementor.elementor) :is(.activity-item,[data-c~="activity-item"]) { background: var(--color-white); box-shadow: 6px 6px 0 var(--program-accent, var(--color-dark)); }
body .elementor.elementor :is(.activity-item__num,[data-c~="activity-item__num"]) { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-weight: 700; font-size: 1rem; margin-bottom: 1rem; }
:where(body .elementor.elementor) :is(.activity-item__num,[data-c~="activity-item__num"]) { background: var(--program-accent, var(--color-dark)); color: var(--color-dark); }
body .elementor.elementor :is(.activity-item,[data-c~="activity-item"]) h3 { font-size: 1.15rem; font-weight: 500; margin-bottom: 0.5rem; }
:where(body .elementor.elementor) :is(.activity-item,[data-c~="activity-item"]) h3 { color: var(--color-dark); }
body .elementor.elementor :is(.activity-item,[data-c~="activity-item"]) p { font-size: 0.95rem; line-height: 1.6; }
:where(body .elementor.elementor) :is(.activity-item,[data-c~="activity-item"]) p { color: var(--color-gray-700); }

/* Activity card preset variants (Program / Activity – Dark, – Accent components) */
:where(body .elementor.elementor) [data-c~="activity-item--dark"] { background: var(--color-dark); }
:where(body .elementor.elementor [data-c~="activity-item--dark"]) :is(h3, p:not([data-c~="activity-item__num"])) { color: var(--color-white); }
:where(body .elementor.elementor [data-c~="activity-item--dark"]) [data-c~="activity-item__num"] { color: var(--color-white); }
:where(body .elementor.elementor) [data-c~="activity-item--accent"] { background: var(--program-accent, var(--color-dark)); box-shadow: 6px 6px 0 var(--color-dark); }
:where(body .elementor.elementor [data-c~="activity-item--accent"]) :is(h3, p) { color: var(--color-white); }
:where(body .elementor.elementor [data-c~="activity-item--accent"]) [data-c~="activity-item__num"] { background: var(--color-white); color: var(--color-dark); }

/* ============================================================
   Work-card additions: small eyebrow label + icon (reused across pages)
   ============================================================ */
body .elementor.elementor :is(.work-card__eyebrow,[data-c~="work-card__eyebrow"]) {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-blue-link);
  margin-bottom: 0.75rem;
}

/* ============================================================
   Timeline ("Perjalanan Pamflet")
   ============================================================ */
body .elementor.elementor :is(.timeline-controls,[data-c~="timeline-controls"]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 1rem;
}
body .elementor.elementor :is(.timeline-hint,[data-c~="timeline-hint"]) { font-weight: 700; font-size: 0.95rem; color: var(--color-dark); }
body .elementor.elementor :is(.timeline-buttons,[data-c~="timeline-buttons"]) { display: flex; gap: 0.75rem; }
body .elementor.elementor :is(.timeline-btn,[data-c~="timeline-btn"]) {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--color-dark);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
body .elementor.elementor :is(.timeline-btn,[data-c~="timeline-btn"]):hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--color-dark); }
body .elementor.elementor :is(.timeline-btn,[data-c~="timeline-btn"]):active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--color-dark); }
body .elementor.elementor :is(.timeline-btn,[data-c~="timeline-btn"]):disabled { opacity: 0.35; cursor: default; }

/* Horizontal, draggable timeline (js/main.js adds the mouse-drag) */
body .elementor.elementor :is(.timeline,[data-c~="timeline"]) {
  list-style: none;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0.5rem var(--gutter) 2.25rem;
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: var(--color-dark) transparent;
}
body .elementor.elementor :is(.timeline,[data-c~="timeline"]).is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
body .elementor.elementor :is(.timeline,[data-c~="timeline"]):focus-visible { outline: 3px solid var(--color-blue-link); outline-offset: -3px; }
body .elementor.elementor :is(.timeline__item,[data-c~="timeline__item"]) {
  --timeline-accent: var(--color-blue-link);
  position: relative;
  flex: 0 0 clamp(16rem, 28vw, 26rem);
  scroll-snap-align: start;
  padding-top: 3.5rem;
}
body .elementor.elementor :is(.timeline__item,[data-c~="timeline__item"]):nth-child(2) { --timeline-accent: var(--color-orange); }
body .elementor.elementor :is(.timeline__item,[data-c~="timeline__item"]):nth-child(3) { --timeline-accent: var(--color-teal); }
body .elementor.elementor :is(.timeline__item,[data-c~="timeline__item"]):nth-child(4) { --timeline-accent: var(--color-yellow-tag); }
body .elementor.elementor :is(.timeline__item,[data-c~="timeline__item"])::before {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: 0;
  right: -2rem;
  height: 3px;
  background: var(--color-dark);
}
body .elementor.elementor :is(.timeline__item,[data-c~="timeline__item"]):last-child::before { right: 0; }
body .elementor.elementor :is(.timeline__year,[data-c~="timeline__year"]) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 0.3rem 1rem;
  background: var(--timeline-accent);
  color: var(--color-white);
  border: 2px solid var(--color-dark);
  border-radius: 28px;
  font-weight: 700;
  font-size: 1rem;
}
body .elementor.elementor :is(.timeline__item,[data-c~="timeline__item"]):nth-child(3) :is(.timeline__year,[data-c~="timeline__year"]),
body .elementor.elementor :is(.timeline__item,[data-c~="timeline__item"]):nth-child(4) :is(.timeline__year,[data-c~="timeline__year"]) { color: var(--color-dark); }
body .elementor.elementor :is(.timeline__photo,[data-c~="timeline__photo"]) {
  margin: 0;
  aspect-ratio: 4 / 3;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--timeline-accent);
}
body .elementor.elementor :is(.timeline__photo,[data-c~="timeline__photo"]) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
}
body .elementor.elementor :is(.timeline__content,[data-c~="timeline__content"]) { margin-top: 1.5rem; }
body .elementor.elementor :is(.timeline__content,[data-c~="timeline__content"]) h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
body .elementor.elementor :is(.timeline__content,[data-c~="timeline__content"]) p {
  color: var(--color-dark);
  line-height: 1.6;
  font-size: var(--text-body);
}

/* ============================================================
   Team grid ("Tim & Divisi")
   ============================================================ */
body .elementor.elementor :is(.team-grid,[data-c~="team-grid"]) {margin-top: clamp(2rem, 4vw, 3rem);}
body .elementor.elementor :is(.team-card__photo,[data-c~="team-card__photo"]) {
  aspect-ratio: 1;
  border: 2px dashed var(--color-gray-400);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  font-size: 0.9rem;
  background: var(--color-offwhite);
  margin-bottom: 1rem;
}
body .elementor.elementor :is(.team-card,[data-c~="team-card"]) h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}
body .elementor.elementor :is(.team-card,[data-c~="team-card"]) p {
  color: var(--color-dark);
  font-size: 0.95rem;
}

/* ============================================================
   Placeholder / empty-state boxes (mitra logos, karir)
   ============================================================ */
body .elementor.elementor :is(.placeholder-row,[data-c~="placeholder-row"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
body .elementor.elementor :is(.placeholder-box,[data-c~="placeholder-box"]) {
  width: 160px;
  height: 80px;
  border: 2px dashed var(--color-gray-400);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  font-size: 0.85rem;
  background: var(--color-white);
}
body .elementor.elementor :is(.empty-state,[data-c~="empty-state"]) {
  border: 2px dashed var(--color-gray-400);
  border-radius: 15px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--color-gray-700);
  font-size: var(--text-body);
  line-height: 1.65;
  max-width: 60ch;
  margin-top: clamp(2rem, 4vw, 3rem);
}
body .elementor.elementor :is(.value-block--blue,[data-c~="value-block--blue"]) { border-color: var(--color-blue-link); }
body .elementor.elementor :is(.value-block--blue,[data-c~="value-block--blue"]) :is(.value-block__label,[data-c~="value-block__label"]) { color: var(--color-blue-link); }
body .elementor.elementor :is(.value-block--teal-alt,[data-c~="value-block--teal-alt"]) { border-color: var(--color-teal); }
body .elementor.elementor :is(.value-block--teal-alt,[data-c~="value-block--teal-alt"]) :is(.value-block__label,[data-c~="value-block__label"]) { color: var(--color-teal); }
body .elementor.elementor :is(.value-stack,[data-c~="value-stack"]) {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: clamp(2rem, 4vw, 2.5rem);
  max-width: 72ch;
}
body .elementor.elementor :is(.tag--blue-pale,[data-c~="tag--blue-pale"]):where(:not(.pf-tag-blue-pale)) { background: var(--color-blue-pale); color: var(--color-blue-link); }

/* ============================================================
   Simple divided list (e.g. "Proyek" archive)
   ============================================================ */
body .elementor.elementor :is(.simple-list,[data-c~="simple-list"]) {
  list-style: none;
  margin: clamp(2rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  max-width: 72ch;
}
body .elementor.elementor :is(.simple-list,[data-c~="simple-list"]) :is(li,[data-t="li"]) {
  padding: 1.5rem 0;
  border-top: 1px solid rgba(20, 22, 24, 0.12);
}
body .elementor.elementor :is(.simple-list,[data-c~="simple-list"]) :is(li,[data-t="li"]):last-child { border-bottom: 1px solid rgba(20, 22, 24, 0.12); }
body .elementor.elementor :is(.simple-list,[data-c~="simple-list"]) h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 0.35rem;
}
body .elementor.elementor :is(.simple-list,[data-c~="simple-list"]) span {
  color: var(--color-gray-500);
  font-size: 0.95rem;
}

/* ============================================================
   Document cards (Perpustakaan Digital)
   ============================================================ */
body .elementor.elementor :is(.doc-grid,[data-c~="doc-grid"]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
body .elementor.elementor :is(.doc-card,[data-c~="doc-card"]) {
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow-hard-sm);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
}
body .elementor.elementor :is(.doc-card__media,[data-c~="doc-card__media"]) {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-offwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: var(--border-w) solid var(--color-dark);
  transition: background 0.3s ease;
}
body .elementor.elementor :is(.doc-card,[data-c~="doc-card"]):hover :is(.doc-card__media,[data-c~="doc-card__media"]) {
  background: var(--color-blue-pale);
}
body .elementor.elementor :is(.doc-card__badge,[data-c~="doc-card__badge"]) {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.35rem 0.9rem;
  border-radius: 28px;
  background: var(--color-orange);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}
body .elementor.elementor :is(.doc-card__body,[data-c~="doc-card__body"]) {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
body .elementor.elementor :is(.doc-card__meta,[data-c~="doc-card__meta"]) {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-blue-link);
}
body .elementor.elementor :is(.doc-card__body,[data-c~="doc-card__body"]) h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.3;
  transition: color 0.2s ease;
}
body .elementor.elementor :is(.doc-card,[data-c~="doc-card"]):hover :is(.doc-card__body,[data-c~="doc-card__body"]) h3 {
  color: var(--color-blue-link);
}
body .elementor.elementor :is(.doc-card__downloads,[data-c~="doc-card__downloads"]) {
  font-size: 0.85rem;
  color: var(--color-gray-500);
}
body .elementor.elementor :is(.library-count,[data-c~="library-count"]) {
  color: var(--color-gray-500);
  font-size: var(--text-body);
  margin-top: 1rem;
  max-width: 72ch;
}
body .elementor.elementor :is(.pagination,[data-c~="pagination"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
body .elementor.elementor :is(.pagination,[data-c~="pagination"]) button,
body .elementor.elementor :is(.pagination,[data-c~="pagination"]) span {
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border-radius: 8px;
  border: 2px solid var(--color-dark);
  background: var(--color-white);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body .elementor.elementor :is(.pagination,[data-c~="pagination"]) button[aria-current="page"] {
  background: var(--color-dark);
  color: var(--color-white);
}
body .elementor.elementor :is(.pagination,[data-c~="pagination"]) span { border-color: transparent; cursor: default; color: var(--color-gray-500); }

/* ============================================================
   Stat banner (Alumni)
   ============================================================ */
body .elementor.elementor :is(.stat-banner,[data-c~="stat-banner"]) {
  background: var(--color-blue-link);
  color: var(--color-white);
  border-radius: 20px;
  padding: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 48rem;
}
body .elementor.elementor :is(.stat-banner__number,[data-c~="stat-banner__number"]) {
  font-family: var(--font-sans);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1;
  margin-bottom: 1rem;
}
body .elementor.elementor :is(.stat-banner,[data-c~="stat-banner"]) p {
  font-size: var(--text-body);
  line-height: 1.5;
  max-width: 40ch;
}
body .elementor.elementor :is(.cta-card,[data-c~="cta-card"]) {
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: var(--shadow-hard-sm);
}
body .elementor.elementor :is(.cta-card,[data-c~="cta-card"]) h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.3rem;
  margin-bottom: 0.35rem;
}
body .elementor.elementor :is(.cta-card,[data-c~="cta-card"]) p { color: var(--color-dark); font-size: var(--text-body); }

/* ============================================================
   "Program lainnya": 3 quick links to other programs, styled like
   the site's other hard-shadow bordered components (buttons, cards)
   ============================================================ */
body .elementor.elementor :is(.program-related,[data-c~="program-related"]) { text-align: center; }
body .elementor.elementor :is(.program-related__grid,[data-c~="program-related__grid"]) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
body .elementor.elementor :is(.program-related__item,[data-c~="program-related__item"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 1.75rem 0.6rem 0.6rem;
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 999px;
  box-shadow: 5px 5px 0 var(--program-accent, var(--color-dark));
  color: var(--color-dark);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body .elementor.elementor :is(.program-related__item,[data-c~="program-related__item"]):hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--program-accent, var(--color-dark));
}
body .elementor.elementor :is(.program-related__item,[data-c~="program-related__item"]):active {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--program-accent, var(--color-dark));
}
body .elementor.elementor :is(.program-related__icon,[data-c~="program-related__icon"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid var(--color-dark);
  flex-shrink: 0;
  color: var(--color-dark);
}
body .elementor.elementor :is(.program-related__icon,[data-c~="program-related__icon"]) svg { width: 22px; height: 22px; }
body .elementor.elementor :is(.program-related__icon--orange,[data-c~="program-related__icon--orange"]) { background: color-mix(in srgb, var(--color-orange) 25%, white); }
body .elementor.elementor :is(.program-related__icon--blue,[data-c~="program-related__icon--blue"]) { background: color-mix(in srgb, var(--color-blue-link) 20%, white); }
body .elementor.elementor :is(.program-related__icon--teal,[data-c~="program-related__icon--teal"]) { background: color-mix(in srgb, var(--color-teal) 28%, white); }
body .elementor.elementor :is(.program-related__icon--yellow,[data-c~="program-related__icon--yellow"]) { background: color-mix(in srgb, var(--color-yellow-tag) 55%, white); }
body .elementor.elementor :is(.program-related__icon--dark,[data-c~="program-related__icon--dark"]) { background: color-mix(in srgb, var(--color-dark) 10%, white); }
body .elementor.elementor :is(.program-related__name,[data-c~="program-related__name"]) {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.05rem;
}
@media (max-width: 640px) {
  /* Equal-width pills on phones instead of ragged, content-sized ones. */
  body .elementor.elementor :is(.program-related__item,[data-c~="program-related__item"]) { width: 100%; max-width: 19rem; }
}

/* ============================================================
   Programs: listing boxes + single-program pages
   ============================================================ */
body .elementor.elementor :is(.program-facts--blue,[data-c~="program-facts--blue"]) { --program-accent: var(--color-blue-link); }
body .elementor.elementor :is(.program-facts--orange,[data-c~="program-facts--orange"]) { --program-accent: var(--color-orange); }
body .elementor.elementor :is(.program-facts--teal,[data-c~="program-facts--teal"]) { --program-accent: var(--color-teal); }
body .elementor.elementor :is(.program-facts--yellow,[data-c~="program-facts--yellow"]) { --program-accent: var(--color-yellow-tag); }
body .elementor.elementor :is(.accent-blue,[data-c~="accent-blue"]) { --program-accent: var(--color-blue-link); }
body .elementor.elementor :is(.accent-orange,[data-c~="accent-orange"]) { --program-accent: var(--color-orange); }
body .elementor.elementor :is(.accent-teal,[data-c~="accent-teal"]) { --program-accent: var(--color-teal); }
body .elementor.elementor :is(.accent-yellow,[data-c~="accent-yellow"]) { --program-accent: var(--color-yellow-tag); }

/* Split hero: copy on the left, tilted photo (placeholder) on the right */
body .elementor.elementor :is(.page-hero--split,[data-c~="page-hero--split"]) {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-blue-pale) 0%, #ffffff 100%);
}
body .elementor.elementor :is(.page-hero--split,[data-c~="page-hero--split"])::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/wp-content/plugins/pamflet-site/assets/assets/images/texture-why-pamflet.jpg");
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.1;
  pointer-events: none;
}
body .elementor.elementor :is(.page-hero--split,[data-c~="page-hero--split"]) :is(.page-hero__split,[data-c~="page-hero__split"]) {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
/* Illustration variant of the hero visual (listing page) */
body .elementor.elementor :is(.page-hero__art,[data-c~="page-hero__art"]) {
  position: relative;
  padding: 1rem;
  text-align: center;
}
body .elementor.elementor :is(.page-hero__art,[data-c~="page-hero__art"]) svg,
body .elementor.elementor :is(.page-hero__art,[data-c~="page-hero__art"]) img {
  display: block;
  width: 100%;
  max-width: 36rem;
  height: auto;
  margin-inline: auto;
}
/* Nudges the hero title down a touch so it doesn't hang in empty space
   above the (taller) bag illustration beside it. */
body .elementor.elementor :is(.page-hero__title--lowered,[data-c~="page-hero__title--lowered"]) { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

/* Program-page hero illustration: a transparent tote bag (Bag.png) layered
   over the program stickers (programs.png) so they read as "inside" it,
   each gently animated for a lively, hand-drawn feel. Hovering speeds the
   animation up and nudges the whole bag, for a playful tactile response. */
body .elementor.elementor :is(.program-bag,[data-c~="program-bag"]) {
  position: relative;
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}
body .elementor.elementor :is(.program-bag,[data-c~="program-bag"]):hover,
body .elementor.elementor :is(.program-bag,[data-c~="program-bag"]):focus-visible { transform: scale(1.035) rotate(-0.5deg); }
body .elementor.elementor :is(.page-hero__art,[data-c~="page-hero__art"]) :is(.program-bag,[data-c~="program-bag"]) :is(.badge,[data-c~="badge"]) {
  position: absolute;
  z-index: 3;
  top: 12%;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  margin: 0;
  width: max-content;
  white-space: nowrap;
  border: 2px solid var(--color-dark);
  font-weight: 700;
}
body .elementor.elementor :is(.page-hero__art,[data-c~="page-hero__art"]) :is(.program-bag__shell,[data-c~="program-bag__shell"]) {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  transform-origin: 50% 0%;
  animation: program-bag-sway 4.5s ease-in-out infinite;
}
body .elementor.elementor :is(.page-hero__art,[data-c~="page-hero__art"]) :is(.program-bag__contents,[data-c~="program-bag__contents"]) {
  position: absolute;
  z-index: 1;
  top: 42%;
  left: 6%;
  width: 88%;
  max-width: none;
  margin-inline: 0;
  opacity: 0.92;
  filter: saturate(0.9) brightness(1.02);
  animation: program-bag-bob 3.2s ease-in-out infinite;
}
/* A faint pale-blue veil over the contents only, like they're seen through
   the bag's plastic rather than pasted flat on top of it. */
body .elementor.elementor :is(.page-hero__art,[data-c~="page-hero__art"]) :is(.program-bag,[data-c~="program-bag"])::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 42%;
  left: 6%;
  width: 88%;
  height: 52%;
  background: var(--color-blue-pale);
  mix-blend-mode: multiply;
  opacity: 0.15;
  pointer-events: none;
}
body .elementor.elementor :is(.program-bag,[data-c~="program-bag"]):hover :is(.program-bag__shell,[data-c~="program-bag__shell"]),
body .elementor.elementor :is(.program-bag,[data-c~="program-bag"]):focus-visible :is(.program-bag__shell,[data-c~="program-bag__shell"]) { animation-duration: 1.1s; }
body .elementor.elementor :is(.program-bag,[data-c~="program-bag"]):hover :is(.program-bag__contents,[data-c~="program-bag__contents"]),
body .elementor.elementor :is(.program-bag,[data-c~="program-bag"]):focus-visible :is(.program-bag__contents,[data-c~="program-bag__contents"]) { animation-duration: 0.9s; }
@keyframes program-bag-sway {
  0%, 100% { transform: rotate(-1.25deg); }
  50% { transform: rotate(1.25deg); }
}
@keyframes program-bag-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3%); }
}
@media (prefers-reduced-motion: reduce) {
  body .elementor.elementor :is(.program-bag__shell,[data-c~="program-bag__shell"]),
body .elementor.elementor :is(.program-bag__contents,[data-c~="program-bag__contents"]) { animation: none; }
  body .elementor.elementor :is(.program-bag,[data-c~="program-bag"]):hover,
body .elementor.elementor :is(.program-bag,[data-c~="program-bag"]):focus-visible { transform: none; }
}
body .elementor.elementor :is(.page-hero__photo,[data-c~="page-hero__photo"]) {
  position: relative;
  padding: 1rem;
}
body .elementor.elementor :is(.page-hero__photo,[data-c~="page-hero__photo"])::before {
  content: "";
  position: absolute;
  inset: 0 -2% -4% 4%;
  background: var(--color-yellow-tag);
  border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%;
  transform: rotate(-6deg);
}
body .elementor.elementor :is(.page-hero__photo,[data-c~="page-hero__photo"]) img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  box-shadow: 8px 8px 0 var(--program-accent, var(--color-orange));
  transform: rotate(1.5deg);
}
body .elementor.elementor :is(.page-hero__photo,[data-c~="page-hero__photo"]) :is(.badge,[data-c~="badge"]) { top: 0; right: 0; transform: rotate(4deg); border: 2px solid var(--color-dark); font-weight: 700; }

/* Centered program hero: title + subtitle centered, playful overlapping
   photo strip below instead of a single side photo */
body .elementor.elementor :is(.page-hero--program,[data-c~="page-hero--program"]) { text-align: center; }
body .elementor.elementor :is(.page-hero--program,[data-c~="page-hero--program"]) :is(.breadcrumb,[data-c~="breadcrumb"]) { justify-content: center; }
body .elementor.elementor :is(.page-hero--program,[data-c~="page-hero--program"]) :is(.page-hero__title,[data-c~="page-hero__title"]),
body .elementor.elementor :is(.page-hero--program,[data-c~="page-hero--program"]) :is(.page-hero__subtitle,[data-c~="page-hero__subtitle"]) { margin-inline: auto; }
body .elementor.elementor :is(.program-photo-strip,[data-c~="program-photo-strip"]) {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 3.5vw, 2.5rem);
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
body .elementor.elementor :is(.program-photo-strip__item,[data-c~="program-photo-strip__item"]) {
  position: relative;
  margin: 0;
  width: clamp(10rem, 19vw, 14rem);
  aspect-ratio: 3 / 4;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--program-accent, var(--color-orange));
  background: var(--color-white);
}
body .elementor.elementor :is(.program-photo-strip__item,[data-c~="program-photo-strip__item"]) img { display: block; width: 100%; height: 100%; object-fit: cover; }
body .elementor.elementor :is(.program-photo-strip__item--a,[data-c~="program-photo-strip__item--a"]) { transform: rotate(-8deg); }
body .elementor.elementor :is(.program-photo-strip__item--d,[data-c~="program-photo-strip__item--d"]) { transform: rotate(5deg); }
body .elementor.elementor :is(.program-photo-strip__item--b,[data-c~="program-photo-strip__item--b"]) {
  width: clamp(12rem, 24vw, 18rem);
  transform: rotate(-2deg) translateY(-1rem);
  z-index: 1;
}
body .elementor.elementor :is(.program-photo-strip__item--e,[data-c~="program-photo-strip__item--e"]) { transform: rotate(4deg); }
body .elementor.elementor :is(.program-photo-strip__item--c,[data-c~="program-photo-strip__item--c"]) { transform: rotate(-5deg); }
body .elementor.elementor :is(.program-photo-strip__item,[data-c~="program-photo-strip__item"]) :is(.badge,[data-c~="badge"]) { top: -0.75rem; right: -0.75rem; transform: rotate(6deg); border: 2px solid var(--color-dark); font-weight: 700; }
body .elementor.elementor :is(.program-photo-strip__star,[data-c~="program-photo-strip__star"]) {
  position: absolute;
  top: -0.75rem;
  right: clamp(0.5rem, 8vw, 5rem);
  color: var(--program-accent, var(--color-orange));
}
@media (max-width: 900px) {
  body .elementor.elementor :is(.program-photo-strip__item--d,[data-c~="program-photo-strip__item--d"]),
body .elementor.elementor :is(.program-photo-strip__item--e,[data-c~="program-photo-strip__item--e"]) { display: none; }
}
@media (max-width: 640px) {
  /* Keep the playful fan on phones: three small overlapping photos in one row
     instead of a tall stack of full-size ones. */
  body .elementor.elementor :is(.program-photo-strip,[data-c~="program-photo-strip"]) { flex-wrap: nowrap; gap: 0; padding-inline: 0.5rem; }
  body .elementor.elementor :is(.program-photo-strip__item,[data-c~="program-photo-strip__item"]) {
    width: 29vw;
    margin-inline: -0.35rem;
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--program-accent, var(--color-orange));
  }
  body .elementor.elementor :is(.program-photo-strip__item--b,[data-c~="program-photo-strip__item--b"]) { width: 36vw; }
  body .elementor.elementor :is(.program-photo-strip__item,[data-c~="program-photo-strip__item"]) :is(.badge,[data-c~="badge"]) { font-size: 0.7rem; padding: 0.2rem 0.6rem; top: -0.6rem; right: -0.4rem; }
  body .elementor.elementor :is(.program-photo-strip__star,[data-c~="program-photo-strip__star"]) { display: none; }
}

/* Program rows: photo + text, alternating sides */
body .elementor.elementor :is(.program-rows,[data-c~="program-rows"]) { display: grid; gap: clamp(3.5rem, 8vw, 6.5rem); }
body .elementor.elementor :is(.program-row,[data-c~="program-row"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
body .elementor.elementor :is(.program-row--flip,[data-c~="program-row--flip"]) :is(.program-row__photo,[data-c~="program-row__photo"]) { order: 2; }
body .elementor.elementor :is(.program-row__photo,[data-c~="program-row__photo"]) {
  position: relative;
  display: block;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  box-shadow: 10px 10px 0 var(--program-accent);
  transform: rotate(-1.5deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body .elementor.elementor :is(.program-row--flip,[data-c~="program-row--flip"]) :is(.program-row__photo,[data-c~="program-row__photo"]) { transform: rotate(1.5deg); }
body .elementor.elementor :is(.program-row__photo,[data-c~="program-row__photo"]) img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}
body .elementor.elementor :is(.program-row,[data-c~="program-row"]):hover :is(.program-row__photo,[data-c~="program-row__photo"]) {
  transform: rotate(0deg) translate(-3px, -3px);
  box-shadow: 14px 14px 0 var(--program-accent);
}
body .elementor.elementor :is(.program-row__since,[data-c~="program-row__since"]) {
  position: absolute;
  top: -1rem;
  left: -0.75rem;
  padding: 0.4rem 1.1rem;
  background: var(--color-orange);
  color: var(--color-white);
  border: 2px solid var(--color-dark);
  border-radius: 28px;
  font-weight: 700;
  font-size: 0.95rem;
  transform: rotate(-4deg);
}
body .elementor.elementor :is(.program-row__body,[data-c~="program-row__body"]) { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
body .elementor.elementor :is(.program-row__body,[data-c~="program-row__body"]) p { font-size: var(--text-body); line-height: 1.55; max-width: 46ch; }
body .elementor.elementor :is(.program-row__body,[data-c~="program-row__body"]) :is(.tag,[data-c~="tag"]) { white-space: normal; }
body .elementor.elementor :is(.program-row__body,[data-c~="program-row__body"]) :is(.btn,[data-c~="btn"],.pf-btn) { white-space: normal; max-width: 100%; }

/* Two programs sharing one row: each card stacks photo-over-body instead of
   the alternating side-by-side layout the full-width rows use. */

body .elementor.elementor :is(.program-row--compact,[data-c~="program-row--compact"]) {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
body .elementor.elementor :is(.program-row--compact,[data-c~="program-row--compact"]) :is(.program-row__photo,[data-c~="program-row__photo"]) { transform: rotate(-1deg); }
body .elementor.elementor :is(.program-row--compact,[data-c~="program-row--compact"]) :is(.program-row__body,[data-c~="program-row__body"]) { gap: 1rem; }
body .elementor.elementor :is(.program-row--compact,[data-c~="program-row--compact"]) :is(.program-row__body,[data-c~="program-row__body"]) p { max-width: none; }
body .elementor.elementor :is(.program-row--compact,[data-c~="program-row--compact"]) :is(.program-row__body,[data-c~="program-row__body"]) :is(.section-title,[data-c~="section-title"]) { margin-top: 0.75rem; }
@media (max-width: 760px) {
  
}

/* Archive of finished programs (no links) */
body .elementor.elementor :is(.archive-grid,[data-c~="archive-grid"]) {list-style: none;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;}
body .elementor.elementor :is(.archive-grid,[data-c~="archive-grid"]) :is(li,[data-t="li"]) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--color-white);
  border: 2px solid var(--color-dark);
  border-radius: 12px;
}
body .elementor.elementor :is(.archive-grid,[data-c~="archive-grid"]) h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1.05rem; line-height: 1.35; }
body .elementor.elementor :is(.archive-grid,[data-c~="archive-grid"]) span {
  flex-shrink: 0;
  padding: 0.2rem 0.75rem;
  background: var(--color-cyan-tag);
  border-radius: 28px;
  font-weight: 700;
  font-size: 0.85rem;
}

/* Closing call-to-action banner */
body .elementor.elementor :is(.program-cta,[data-c~="program-cta"]) { background: var(--color-navy); color: var(--color-white); }
body .elementor.elementor :is(.program-cta__inner,[data-c~="program-cta__inner"]) { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; max-width: 52rem; }
body .elementor.elementor :is(.program-cta__inner,[data-c~="program-cta__inner"]) p { font-size: var(--text-body); line-height: 1.55; }
body .elementor.elementor :is(.program-cta__actions,[data-c~="program-cta__actions"]) { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 0.5rem; }
body .elementor.elementor :is(.program-cta,[data-c~="program-cta"]) :is(.btn,[data-c~="btn"],.pf-btn) { box-shadow: 8px 8px 0 var(--color-teal); }
body .elementor.elementor :is(.program-cta,[data-c~="program-cta"]) :is(.btn,[data-c~="btn"],.pf-btn):hover { box-shadow: 10px 10px 0 var(--color-teal); }
body .elementor.elementor :is(.btn--light,[data-c~="btn--light"]) { background: var(--color-white); color: var(--color-dark); }
body .elementor.elementor :is(.btn--light,[data-c~="btn--light"]):hover { transform: translate(-2px, -2px); }
body .elementor.elementor :is(.btn--light,[data-c~="btn--light"]):active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--color-teal); }

body .elementor.elementor :is(.program-detail,[data-c~="program-detail"]) {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
body .elementor.elementor :is(.program-detail__text,[data-c~="program-detail__text"]) { max-width: 68ch; }
body .elementor.elementor :is(.program-detail__text,[data-c~="program-detail__text"]) p {
  font-size: var(--text-body);
  line-height: 1.7;
  margin-top: 1.25rem;
}
body .elementor.elementor :is(.program-detail__text,[data-c~="program-detail__text"]) :is(.section-title,[data-c~="section-title"]) { margin-bottom: 0.5rem; }
body .elementor.elementor :is(.program-facts,[data-c~="program-facts"]) {
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 6px 6px 0 var(--program-accent);
}
body .elementor.elementor :is(.program-facts,[data-c~="program-facts"]) :is(dl,[data-t="dl"]) { margin: 0; display: grid; gap: 1.25rem; }
body .elementor.elementor :is(.program-facts,[data-c~="program-facts"]) :is(dt,[data-t="dt"]) {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-700);
}
body .elementor.elementor :is(.program-facts,[data-c~="program-facts"]) :is(dd,[data-t="dd"]) {
  margin: 0.25rem 0 0;
  font-size: 1.1rem;
  line-height: 1.4;
}

body .elementor.elementor :is(.program-quote,[data-c~="program-quote"]) {
  position: relative;
  max-width: 60rem;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  box-shadow: var(--shadow-hard);
}
body .elementor.elementor :is(.program-quote__mark,[data-c~="program-quote__mark"]) {
  display: block;
  width: 48px;
  height: 36px;
  margin-bottom: 1rem;
  color: var(--program-accent, var(--color-orange));
}
body .elementor.elementor :is(.program-quote,[data-c~="program-quote"]) p {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.6;
}
body .elementor.elementor :is(.program-quote,[data-c~="program-quote"]) footer {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
body .elementor.elementor :is(.program-quote,[data-c~="program-quote"]) :is(cite,[data-t="cite"]) { font-style: normal; font-weight: 700; font-size: 1.35rem; }
body .elementor.elementor :is(.program-quote,[data-c~="program-quote"]) footer span { color: var(--color-gray-700); font-size: 1rem; }

/* ============================================================
   Testimonial carousel: two quote cards side by side on program
   detail pages, paged with prev/next arrows (auto-advances too)
   ============================================================ */
body .elementor.elementor :is(.testimonial-carousel,[data-c~="testimonial-carousel"]) { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
body .elementor.elementor :is(.testimonial-carousel__track,[data-c~="testimonial-carousel__track"]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
body .elementor.elementor :is(.testimonial-carousel__slide,[data-c~="testimonial-carousel__slide"]) { display: none; margin: 0; max-width: none; height: 100%; }
body .elementor.elementor :is(.testimonial-carousel__slide,[data-c~="testimonial-carousel__slide"]).is-active {
  display: flex;
  flex-direction: column;
  animation: testimonial-fade 0.5s ease;
}
@keyframes testimonial-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 760px) {
  body .elementor.elementor :is(.testimonial-carousel__track,[data-c~="testimonial-carousel__track"]) { grid-template-columns: minmax(0, 1fr); }
}
body .elementor.elementor :is(.testimonial-carousel__nav-row,[data-c~="testimonial-carousel__nav-row"]) {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
body .elementor.elementor :is(.testimonial-carousel__nav,[data-c~="testimonial-carousel__nav"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: var(--border-w) solid var(--color-dark);
  background: var(--color-white);
  color: var(--color-dark);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body .elementor.elementor :is(.testimonial-carousel__nav,[data-c~="testimonial-carousel__nav"]):hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--color-dark); }
body .elementor.elementor :is(.testimonial-carousel__nav,[data-c~="testimonial-carousel__nav"]):active { transform: translate(1px, 1px); box-shadow: none; }
body .elementor.elementor :is(.testimonial-carousel__nav,[data-c~="testimonial-carousel__nav"]) svg { width: 20px; height: 20px; }

/* ============================================================
   Contact cards + form (Kontak)
   ============================================================ */
body .elementor.elementor :is(.contact-grid,[data-c~="contact-grid"]) {margin-top: clamp(2rem, 4vw, 3rem);}
body .elementor.elementor :is(.contact-card,[data-c~="contact-card"]) {
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
body .elementor.elementor :is(.contact-card__label,[data-c~="contact-card__label"]) {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-teal);
}
body .elementor.elementor :is(.contact-card,[data-c~="contact-card"]) h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.35;
}
body .elementor.elementor :is(.contact-card,[data-c~="contact-card"]) a {
  color: var(--color-blue-link);
  font-weight: 600;
}
body .elementor.elementor :is(.contact-card,[data-c~="contact-card"]) a:hover { text-decoration: underline; }

body .elementor.elementor :is(.contact-form,[data-c~="contact-form"]) {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
body .elementor.elementor :is(.form-field,[data-c~="form-field"]) { display: flex; flex-direction: column; gap: 0.5rem; }
body .elementor.elementor :is(.form-field,[data-c~="form-field"]) :is(label,[data-t="label"]) { font-weight: 700; font-size: 0.95rem; }
body .elementor.elementor :is(.form-field,[data-c~="form-field"]) input,
body .elementor.elementor :is(.form-field,[data-c~="form-field"]) textarea {
  border: 2px solid var(--color-dark);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font: inherit;
  background: var(--color-offwhite);
  resize: vertical;
}
body .elementor.elementor :is(.form-field,[data-c~="form-field"]) input:focus,
body .elementor.elementor :is(.form-field,[data-c~="form-field"]) textarea:focus {
  outline: 2px solid var(--color-blue-link);
  outline-offset: 1px;
}
body .elementor.elementor :is(.form-note,[data-c~="form-note"]) {
  font-size: 0.85rem;
  color: var(--color-dark);
  margin-top: -0.5rem;
}
body .elementor.elementor :is(.social-row,[data-c~="social-row"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 2.5rem);
}
body .elementor.elementor :is(.social-row,[data-c~="social-row"]) a {
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  padding: 0.65rem 1.5rem;
  font-weight: 600;
}
body .elementor.elementor :is(.social-row,[data-c~="social-row"]) a:hover { background: var(--color-dark); color: var(--color-white); }

/* ============================================================
   Article page (single post template)
   — Title and section headings use League Gothic (like all h1/h2); the running text (paragraphs
   and pull-quotes) uses Libre Baskerville for comfortable long-form
   reading. This is the only place the serif is used; everything else on
   the site is DM Sans. Body copy uses the site-wide --text-body size.
   ============================================================ */
body .elementor.elementor :is(.article-hero,[data-c~="article-hero"]) {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2rem);
}
body .elementor.elementor :is(.article-hero__meta,[data-c~="article-hero__meta"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  color: var(--color-gray-500);
  font-size: 0.9rem;
}
body .elementor.elementor :is(.article-hero__title,[data-c~="article-hero__title"]) {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
  line-height: 1.2em;
  letter-spacing: 0em;
  margin-block: 1rem 0;
  max-width: 100%;
  color: var(--color-dark);
}
body .elementor.elementor :is(.article-featured,[data-c~="article-featured"]) {
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow-hard-sm);
  aspect-ratio: 16 / 9;
  margin-top: clamp(2rem, 4vw, 3rem);
}
body .elementor.elementor :is(.article-featured,[data-c~="article-featured"]) img { width: 100%; height: 100%; object-fit: cover; }

body .elementor.elementor :is(.article-layout,[data-c~="article-layout"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
body .elementor.elementor :is(.article-body,[data-c~="article-body"]) { max-width: 68ch; }
@media (min-width: 1024px) {
  body .elementor.elementor :is(.article-body,[data-c~="article-body"]) { max-width: 82ch; }
}
body .elementor.elementor :is(.article-body,[data-c~="article-body"]) p {
  font-family: var(--font-article);
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--color-dark);
  margin-bottom: 1.5rem;
}
body .elementor.elementor :is(.article-body,[data-c~="article-body"]) h2 {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--color-dark);
  margin: 2.5rem 0 1rem;
}
body .elementor.elementor :is(.article-body,[data-c~="article-body"]) :is(blockquote,[data-t="blockquote"]) {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 4px solid var(--color-orange);
  font-family: var(--font-article);
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--color-dark);
}
body .elementor.elementor :is(.article-tags,[data-c~="article-tags"]) { margin-top: 2.5rem; }

body .elementor.elementor :is(.pdf-viewer,[data-c~="pdf-viewer"]) {
  margin: 2rem 0;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  overflow: hidden;
}
body .elementor.elementor :is(.pdf-viewer,[data-c~="pdf-viewer"]) iframe {
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 420px;
  border: none;
  background: var(--color-offwhite);
}
body .elementor.elementor :is(.pdf-viewer__fallback,[data-c~="pdf-viewer__fallback"]) {
  padding: 0.85rem 1.25rem;
  border-top: var(--border-w) solid var(--color-dark);
  background: var(--color-offwhite);
  font-size: 0.9rem;
}
body .elementor.elementor :is(.pdf-viewer__fallback,[data-c~="pdf-viewer__fallback"]) p { margin: 0; }
body .elementor.elementor :is(.pdf-viewer__fallback,[data-c~="pdf-viewer__fallback"]) a { color: var(--color-blue-link); font-weight: 600; }

body .elementor.elementor :is(.article-sidebar,[data-c~="article-sidebar"]) {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: sticky;
  top: 6rem;
}
body .elementor.elementor :is(.article-sidebar__box,[data-c~="article-sidebar__box"]) {
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  padding: 1.5rem;
}
body .elementor.elementor :is(.article-sidebar__box,[data-c~="article-sidebar__box"]) h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-blue-link);
  margin-bottom: 1rem;
}
body .elementor.elementor :is(.article-sidebar__box,[data-c~="article-sidebar__box"]) :is(ul,[data-t="ul"]) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
body .elementor.elementor :is(.article-sidebar__box,[data-c~="article-sidebar__box"]) a { font-size: 0.95rem; }
body .elementor.elementor :is(.article-sidebar__box,[data-c~="article-sidebar__box"]) a:hover { color: var(--color-orange); }

body .elementor.elementor :is(.download-card__stat,[data-c~="download-card__stat"]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--color-yellow-tag);
  border-radius: 15px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
body .elementor.elementor :is(.download-card__count,[data-c~="download-card__count"]) {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--color-dark);
  line-height: 1.1;
}
body .elementor.elementor :is(.download-card__label,[data-c~="download-card__label"]) {
  display: block;
  font-size: 0.95rem;
  color: var(--color-dark);
  margin-top: 0.15rem;
}
body .elementor.elementor :is(.download-card__icon,[data-c~="download-card__icon"]) { color: var(--color-dark); flex-shrink: 0; }
body .elementor.elementor :is(.download-card__btn,[data-c~="download-card__btn"]) {
  display: flex;
  width: 100%;
  background: var(--color-blue-link);
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
body .elementor.elementor :is(.download-card__facts,[data-c~="download-card__facts"]) { margin: 0; }
body .elementor.elementor :is(.download-card__fact,[data-c~="download-card__fact"]) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(0, 36, 91, 0.12);
}
body .elementor.elementor :is(.download-card__fact,[data-c~="download-card__fact"]):first-child { padding-top: 0; }
body .elementor.elementor :is(.download-card__fact,[data-c~="download-card__fact"]):last-of-type { border-bottom: none; padding-bottom: 0; }
body .elementor.elementor :is(.download-card__fact,[data-c~="download-card__fact"]) :is(dt,[data-t="dt"]) {
  font-size: 0.95rem;
  color: var(--color-gray-700);
  font-weight: 400;
}
body .elementor.elementor :is(.download-card__fact,[data-c~="download-card__fact"]) :is(dd,[data-t="dd"]) { margin: 0; font-weight: 700; color: var(--color-dark); text-align: right; }
body .elementor.elementor :is(.download-card__fact,[data-c~="download-card__fact"]) :is(dd,[data-t="dd"]) a { color: var(--color-blue-link); font-weight: 700; }
body .elementor.elementor :is(.download-card__note,[data-c~="download-card__note"]) {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-gray-500);
}

/* ============================================================
   Filter sidebar layout (Produk Pengetahuan / Blog listing pages)
   — pattern referenced from puskapa.org/publikasi/: search box,
   grouped checkbox filters with counts, result grid, pagination.
   ============================================================ */
body .elementor.elementor :is(.filter-layout,[data-c~="filter-layout"]) {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
body .elementor.elementor :is(.filter-sidebar,[data-c~="filter-sidebar"]) {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
body .elementor.elementor :is(.filter-search,[data-c~="filter-search"]) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  padding: 0.65rem 1.1rem;
}
body .elementor.elementor :is(.filter-search,[data-c~="filter-search"]) img { width: 18px; height: 18px; flex-shrink: 0; }
body .elementor.elementor :is(.filter-search,[data-c~="filter-search"]) input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--color-gray-700);
}
body .elementor.elementor :is(.filter-group,[data-c~="filter-group"]) {
  border-top: 1px solid rgba(20, 22, 24, 0.12);
  padding-top: 1.5rem;
}
body .elementor.elementor :is(.filter-group,[data-c~="filter-group"]):first-of-type {
  border-top: none;
  padding-top: 0;
}
body .elementor.elementor :is(.filter-group,[data-c~="filter-group"]) h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-blue-link);
  margin-bottom: 1rem;
}
body .elementor.elementor :is(.filter-toggle,[data-c~="filter-toggle"]) { display: none; }
body .elementor.elementor :is(.filter-panel,[data-c~="filter-panel"]) { display: flex; flex-direction: column; gap: 1.75rem; }
/* Groups now sit inside .filter-panel, so the first one is first-of-type;
   keep the divider under the search box that it always had on desktop. */
body .elementor.elementor :is(.filter-panel,[data-c~="filter-panel"]) > :is(.filter-group,[data-c~="filter-group"]):first-child {
  border-top: 1px solid rgba(20, 22, 24, 0.12);
  padding-top: 1.5rem;
}
@media (max-width: 960px) {
  /* Filters collapse behind a button once the sidebar stacks above the
     results, so phones don't scroll through every group to reach a product. */
  body .elementor.elementor :is(.filter-toggle,[data-c~="filter-toggle"]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.8rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
    background: var(--color-white);
    border: var(--border-w) solid var(--color-dark);
    border-radius: 15px;
    cursor: pointer;
  }
  body .elementor.elementor :is(.filter-toggle,[data-c~="filter-toggle"]) svg { transition: transform 0.2s ease; }
  body .elementor.elementor :is(.filter-toggle,[data-c~="filter-toggle"])[aria-expanded="true"] svg { transform: rotate(180deg); }
  body .elementor.elementor :is(.filter-panel,[data-c~="filter-panel"]) { display: none; }
  body .elementor.elementor :is(.filter-panel,[data-c~="filter-panel"]).is-open { display: flex; }
  body .elementor.elementor :is(.filter-panel,[data-c~="filter-panel"]) > :is(.filter-group,[data-c~="filter-group"]):first-child { border-top: none; padding-top: 0; }
}
body .elementor.elementor :is(.filter-option,[data-c~="filter-option"]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.45rem;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--color-gray-700);
}
body .elementor.elementor :is(.filter-option__label,[data-c~="filter-option__label"]) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
body .elementor.elementor :is(.filter-option,[data-c~="filter-option"]) input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-orange);
  cursor: pointer;
  flex-shrink: 0;
}
body .elementor.elementor :is(.filter-option__count,[data-c~="filter-option__count"]) {
  color: var(--color-gray-500);
  font-size: 0.82rem;
  flex-shrink: 0;
}
body .elementor.elementor :is(.filter-results__count,[data-c~="filter-results__count"]) {
  color: var(--color-dark);
  font-size: 0.95rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  body .elementor.elementor :is(.hero__inner,[data-c~="hero__inner"]) {
    grid-template-columns: 1fr;
  }
  body .elementor.elementor :is(.hero,[data-c~="hero"]) { --hero-pad: clamp(0.75rem, 2.5vh, 2rem); }
  body .elementor.elementor :is(.hero__inner,[data-c~="hero__inner"]) { gap: clamp(0.75rem, 2vh, 2rem); }
  body .elementor.elementor :is(.hero__media,[data-c~="hero__media"]) { order: -1; justify-content: flex-start; }
  body .elementor.elementor :is(.hero__photo,[data-c~="hero__photo"]) { max-height: 22vh; max-height: 22dvh; }
  body .elementor.elementor :is(.hero__title,[data-c~="hero__title"]) { font-size: clamp(2.6rem, 11vw, 4.5rem); }
  body .elementor.elementor :is(.partners__inner,[data-c~="partners__inner"]),
body .elementor.elementor :is(.article-layout,[data-c~="article-layout"]),
body .elementor.elementor :is(.filter-layout,[data-c~="filter-layout"]),
body .elementor.elementor :is(.impact-stats__inner,[data-c~="impact-stats__inner"]),
body .elementor.elementor :is(.why-split,[data-c~="why-split"]),
body .elementor.elementor :is(.about-intro,[data-c~="about-intro"]),
body .elementor.elementor :is(.program-detail,[data-c~="program-detail"]),
body .elementor.elementor :is(.page-hero--split,[data-c~="page-hero--split"]) :is(.page-hero__split,[data-c~="page-hero__split"]),
body .elementor.elementor :is(.program-row,[data-c~="program-row"]) {
    grid-template-columns: 1fr;
  }
  body .elementor.elementor :is(.program-row,[data-c~="program-row"]) { grid-template-columns: minmax(0, 1fr); }
  body .elementor.elementor :is(.program-row--flip,[data-c~="program-row--flip"]) :is(.program-row__photo,[data-c~="program-row__photo"]) { order: 0; }
  /* Extra breathing room between the (often two-line) hero title/subtitle
     and the bag illustration once they stack instead of sitting side by side. */
  body .elementor.elementor :is(.page-hero--split,[data-c~="page-hero--split"]) :is(.page-hero__split,[data-c~="page-hero__split"]) { row-gap: clamp(2.5rem, 8vw, 4rem); }
  body .elementor.elementor :is(.page-hero__photo,[data-c~="page-hero__photo"]),
body .elementor.elementor :is(.page-hero__art,[data-c~="page-hero__art"]) { max-width: 34rem; }
  body .elementor.elementor :is(.why-split__art,[data-c~="why-split__art"]) { position: static; }
  body .elementor.elementor :is(.why-split__art,[data-c~="why-split__art"]) img { max-width: 26rem; }
  /* Smaller and pulled closer in so the stickers stay inside the gutter
     instead of running off the edge of a narrow screen. */
  body .elementor.elementor :is(.why-split__art-sticker--bubble,[data-c~="why-split__art-sticker--bubble"]) { width: 4.5rem; top: -0.25rem; left: -0.5rem; }
  body .elementor.elementor :is(.why-split__art-sticker--dots,[data-c~="why-split__art-sticker--dots"]) { width: 3.5rem; top: -0.5rem; right: -0.25rem; }
  body .elementor.elementor :is(.why-split__art-sticker--note,[data-c~="why-split__art-sticker--note"]) { width: 6rem; bottom: 0.5rem; right: -0.75rem; }
  body .elementor.elementor :is(.why-split__art-sticker--sparkle-lg,[data-c~="why-split__art-sticker--sparkle-lg"]) { left: -0.25rem; }
  body .elementor.elementor :is(.pillars,[data-c~="pillars"]) {
    grid-template-columns: 1fr;
    grid-template-areas: "art" "activism" "studies" "movement";
  }
  body .elementor.elementor :is(.pillars__art,[data-c~="pillars__art"]) { max-width: 26rem; margin-inline: auto; }
  body .elementor.elementor :is(.article-sidebar,[data-c~="article-sidebar"]),
body .elementor.elementor :is(.filter-sidebar,[data-c~="filter-sidebar"]) { position: static; }
  body .elementor.elementor :is(.footer-top,[data-c~="footer-top"]) {
    grid-template-columns: 1fr 1fr;
  }
  body .elementor.elementor :is(.footer-brand,[data-c~="footer-brand"]) { grid-column: 1 / -1; }
  
}

@media (max-width: 640px) {
  
  body .elementor.elementor :is(.hero__actions,[data-c~="hero__actions"]) { gap: 0.75rem; }
  body .elementor.elementor :is(.hero__actions,[data-c~="hero__actions"]) :is(.btn,[data-c~="btn"],.pf-btn) { padding: 0.9rem 1.35rem; font-size: 1.05rem; }
  /* League Gothic is condensed, so page titles can stay large on phones. */
  body .elementor.elementor :is(.page-hero__title,[data-c~="page-hero__title"]) { font-size: clamp(3rem, 13vw, 4rem); }
  body .elementor.elementor :is(.article-hero__title,[data-c~="article-hero__title"]) { font-size: clamp(2.75rem, 11.5vw, 3.5rem); }
}

/* Short phones / small landscape: squeeze the hero further so it still
   fits in one screen together with the rolling-text strip. */
@media (max-width: 960px) and (max-height: 700px) {
  body .elementor.elementor :is(.hero__photo,[data-c~="hero__photo"]) { max-height: 14vh; max-height: 14dvh; }
  body .elementor.elementor :is(.hero__title,[data-c~="hero__title"]) { font-size: clamp(2.3rem, 10vw, 3.5rem); }
  body .elementor.elementor :is(.hero__text,[data-c~="hero__text"]) :is(.eyebrow,[data-c~="eyebrow"]) { margin-bottom: 0.5rem; }
  /* font-size stays var(--text-body), same as the paragraphs below the hero */
  body .elementor.elementor :is(.hero__desc,[data-c~="hero__desc"]) { margin-bottom: 0.75rem; }
}

/* Phones: bigger hero headline and a bigger house illustration (half the
   width of the column). Placed after the short-height rule above so it wins
   on phones whose browser bars leave under 700px of height. */
@media (max-width: 640px) {
  /* Three lines ("Dipimpin orang muda." / "Risetnya, programnya," / "advokasinya.")
     sized so the longest line (6.9em wide in League Gothic) fills about 90% of the column,
     leaving slack so it never wraps to a 4th line on real phones. */
  body .elementor.elementor :is(.hero__title,[data-c~="hero__title"]) { font-size: min(5rem, calc((100vw - 2 * var(--gutter)) / 7.6)); line-height: 1; }
  body .elementor.elementor :is(.hero__inner,[data-c~="hero__inner"]) { padding-bottom: 3.5rem; }
  body .elementor.elementor :is(.hero__desc,[data-c~="hero__desc"]) { margin-bottom: 2rem; }
  body .elementor.elementor :is(.hero__text,[data-c~="hero__text"]) :is(.eyebrow,[data-c~="eyebrow"]) { margin-bottom: 0.75rem; }
  /* More air between the border above and each section's heading, and bigger
     section titles. !important because several pages size the h2 inline. */
  /* Post / product card titles in the Blog and Produk Pengetahuan lists: larger on phones */
  body .elementor.elementor :is(.product-card__title,[data-c~="product-card__title"]),
body .elementor.elementor :is(.blog-card__body,[data-c~="blog-card__body"]) h3 { font-size: 1.5rem; line-height: 1.25; }
  body .elementor.elementor :is(.filter-strip,[data-c~="filter-strip"]) { margin-bottom: 1.75rem; }
  body .elementor.elementor :is(.list-cta,[data-c~="list-cta"]) :is(.btn,[data-c~="btn"],.pf-btn) { padding: 0.9rem 1.35rem; font-size: 1.05rem; }
  body .elementor.elementor :is(.section,[data-c~="section"]) { padding-top: 4.5rem; padding-bottom: 6.5rem; }
  body .elementor.elementor :is(.section-title,[data-c~="section-title"]) { font-size: clamp(2.5rem, 11.5vw, 3.2rem) !important; line-height: 1.1; }
  body .elementor.elementor :is(.hero-house,[data-c~="hero-house"]) { width: 75%; }
  /* no hover/tap video on phones: just the transparent still */
  body .elementor.elementor :is(.hero-house__canvas,[data-c~="hero-house__canvas"]),
body .elementor.elementor :is(.hero-house__zones,[data-c~="hero-house__zones"]),
body .elementor.elementor :is(.hero-house__video,[data-c~="hero-house__video"]) { display: none; }
  body .elementor.elementor :is(.hero__photo,[data-c~="hero__photo"]) { width: 100%; max-height: none; }
}

/* Tablets held vertically (iPad etc.): section headings were still desktop-sized
   (about 28px), smaller than on phones. !important because several pages size
   the h2 inline. */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  body .elementor.elementor :is(.section-title,[data-c~="section-title"]) { font-size: clamp(2.75rem, 6vw, 3.5rem) !important; line-height: 1.1; }
  /* more air above and below each section */
  body .elementor.elementor :is(.section,[data-c~="section"]) { padding-top: 5.5rem; padding-bottom: 7.5rem; }
}

@media (max-width: 1180px) {
  /* Mobile menu: slim top bar with the logo centred, a floating round button
     bottom-right, and a full-screen navy overlay with big left-aligned links. */
  /* On phones the top bar is just the logo, left-aligned, and scrolls away
     with the page (no sticky white bar). No transform: it would trap the fixed
     button/overlay inside the bar. */
  body .elementor.elementor :is(.navbar,[data-c~="navbar"]) {
    position: relative;
    height: 4.5rem;
    transform: none;
    transition: none;
    background: transparent;
    border-bottom: none;
  }
  body .elementor.elementor :is(.navbar,[data-c~="navbar"]).is-hidden { transform: none; top: auto; }
  body .elementor.elementor :is(.navbar__inner,[data-c~="navbar__inner"]) { justify-content: flex-start; padding-block: 0.5rem; }
  body .elementor.elementor :is(.nav-brand,[data-c~="nav-brand"]) img { height: 3.25rem; }

  body .elementor.elementor :is(.nav-toggle,[data-c~="nav-toggle"]) {
    display: block;
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 130;
    width: 3.375rem;
    height: 3.375rem;
    padding: 0;
    border-radius: 50%;
    background: var(--color-dark);
    /* white ring keeps the button visible over the navy footer */
    box-shadow: 0 0 0 2px var(--color-white), 0 5px 16px rgba(0, 36, 91, 0.35);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  }
  body .elementor.elementor :is(.nav-toggle,[data-c~="nav-toggle"]):active { transform: scale(0.94); }
  body .elementor.elementor :is(.nav-toggle,[data-c~="nav-toggle"]) span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.3125rem;
    height: 2.5px;
    margin: -1.25px 0 0 -0.65625rem;
    background: var(--color-white);
    border-radius: 2px;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
  }
  body .elementor.elementor :is(.nav-toggle,[data-c~="nav-toggle"]) span:nth-child(1) { transform: translateY(-4px); }
  body .elementor.elementor :is(.nav-toggle,[data-c~="nav-toggle"]) span:nth-child(2) { display: none; }
  body .elementor.elementor :is(.nav-toggle,[data-c~="nav-toggle"]) span:nth-child(3) { transform: translateY(4px); }
  body .elementor.elementor :is(.nav-toggle,[data-c~="nav-toggle"])[aria-expanded="true"] { background: var(--color-white); box-shadow: none; }
  body .elementor.elementor :is(.nav-toggle,[data-c~="nav-toggle"])[aria-expanded="true"] span { background: var(--color-dark); }
  body .elementor.elementor :is(.nav-toggle,[data-c~="nav-toggle"])[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
  body .elementor.elementor :is(.nav-toggle,[data-c~="nav-toggle"])[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 120;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5rem var(--gutter) 8rem;
    background: var(--color-dark);
    color: var(--color-white);
    font-size: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]).is-open { display: flex; }
  html:is(.nav-open,[data-c~="nav-open"]) { overflow: hidden; }
  /* keep the footer's last line clear of the floating menu button */
  body .elementor.elementor :is(.site-footer,[data-c~="site-footer"]) { padding-bottom: 6.5rem; }

  /* Big links, no boxes */
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) > a:not(:is(.btn,[data-c~="btn"],.pf-btn)),
body .elementor.elementor :is(.nav-item,[data-c~="nav-item"]) > a:not(:is(.btn,[data-c~="btn"],.pf-btn)),
body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) :is(.nav-contact,[data-c~="nav-contact"]) {
    display: block;
    width: auto;
    padding: 0.6rem 0;
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: clamp(1.4rem, 6.5vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: var(--color-white);
    white-space: normal;
  }
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) a:not(:is(.btn,[data-c~="btn"],.pf-btn)):hover,
body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) a:not(:is(.btn,[data-c~="btn"],.pf-btn)):focus-visible,
body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) a:not(:is(.btn,[data-c~="btn"],.pf-btn))[aria-current="page"] {
    background: transparent;
    color: var(--color-teal);
  }
  body .elementor.elementor :is(.nav-item,[data-c~="nav-item"]) > a:not(:is(.btn,[data-c~="btn"],.pf-btn))::after { content: none; }

  /* Kontak is a normal big link here, not a button */
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) :is(.nav-contact,[data-c~="nav-contact"]),
body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) :is(.nav-contact,[data-c~="nav-contact"]):hover,
body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) :is(.nav-contact,[data-c~="nav-contact"]):active {
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    transform: none;
    text-align: left;
    justify-content: flex-start;
    min-height: 0;
  }
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) :is(.nav-contact,[data-c~="nav-contact"]):hover,
body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) :is(.nav-contact,[data-c~="nav-contact"]):focus-visible { color: var(--color-teal); }

  /* Search and language sit below the links */
  body .elementor.elementor :is(.nav-search,[data-c~="nav-search"]) {
    order: 2;
    align-self: stretch;
    margin: 2rem 0 0;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
  }
  body .elementor.elementor :is(.nav-search__input,[data-c~="nav-search__input"]) {
    position: static;
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 0.75rem 0.25rem 0.75rem 1.25rem;
    border: none;
    box-shadow: none;
    background: transparent;
    color: var(--color-white);
    opacity: 1;
    visibility: visible;
    transform: none;
    font-size: 1.05rem;
  }
  body .elementor.elementor :is(.nav-search__input,[data-c~="nav-search__input"])::placeholder { color: rgba(255, 255, 255, 0.6); }
  body .elementor.elementor :is(.nav-search__btn,[data-c~="nav-search__btn"]) { color: var(--color-white); width: 3rem; height: 3rem; }
  body .elementor.elementor :is(.nav-search__btn,[data-c~="nav-search__btn"]):hover,
body .elementor.elementor :is(.nav-search__btn,[data-c~="nav-search__btn"]):focus-visible,
body .elementor.elementor :is(.nav-search,[data-c~="nav-search"]).is-open :is(.nav-search__btn,[data-c~="nav-search__btn"]) { background: rgba(255, 255, 255, 0.15); }
  body .elementor.elementor :is(.lang-switch,[data-c~="lang-switch"]) {
    order: 3;
    align-self: flex-start;
    margin: 1.25rem 0 0;
    border-color: rgba(255, 255, 255, 0.45);
    background: transparent;
  }
  body .elementor.elementor :is(.lang-switch__btn,[data-c~="lang-switch__btn"]) { color: var(--color-white); font-size: 0.85rem; padding: 0.5rem 0.8rem; }
  body .elementor.elementor :is(.lang-switch__btn,[data-c~="lang-switch__btn"]).is-active { background: var(--color-white); color: var(--color-dark); }

  /* Dropdowns collapse behind a chevron button next to the link (the button
     is added by js/main.js) and expand like an accordion. */
  body .elementor.elementor :is(.nav-item,[data-c~="nav-item"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
  }
  body .elementor.elementor :is(.nav-item__toggle,[data-c~="nav-item__toggle"]) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
  }
  body .elementor.elementor :is(.nav-item__toggle,[data-c~="nav-item__toggle"]) svg { width: 24px; height: 24px; transition: transform 0.25s ease; }
  body .elementor.elementor :is(.nav-item,[data-c~="nav-item"]).is-open :is(.nav-item__toggle,[data-c~="nav-item__toggle"]) svg { transform: rotate(180deg); }
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) :is(.nav-item,[data-c~="nav-item"]) :is(.nav-subnav,[data-c~="nav-subnav"]) {
    grid-column: 1 / -1;
    position: static;
    margin: 0;
    padding: 0;
    min-width: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    max-height: 0;
    opacity: 1;
    visibility: hidden;
    pointer-events: auto;
    transform: none;
    transition: max-height 0.35s ease, visibility 0s linear 0.35s;
  }
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) :is(.nav-item,[data-c~="nav-item"]).is-open :is(.nav-subnav,[data-c~="nav-subnav"]) {
    max-height: 24rem;
    padding: 0.25rem 0 0.75rem;
    visibility: visible;
    transition: max-height 0.35s ease, visibility 0s;
  }
  body .elementor.elementor :is(.nav-subnav,[data-c~="nav-subnav"])::before { content: none; }
  body .elementor.elementor :is(.nav-subnav,[data-c~="nav-subnav"]) a {
    padding: 0.45rem 0;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    white-space: normal;
  }
  body .elementor.elementor :is(.nav-subnav,[data-c~="nav-subnav"]) a:hover,
body .elementor.elementor :is(.nav-subnav,[data-c~="nav-subnav"]) a:focus-visible { background: transparent; color: var(--color-teal); }

  /* Entrance: the navy panel opens as a circle growing out of the button, then
     the rows rise in one after another. */
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]).is-open { animation: nav-overlay-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]).is-open > * { animation: nav-row-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]).is-open > :nth-child(1) { animation-delay: 0.12s; }
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]).is-open > :nth-child(2) { animation-delay: 0.17s; }
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]).is-open > :nth-child(3) { animation-delay: 0.22s; }
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]).is-open > :nth-child(4) { animation-delay: 0.27s; }
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]).is-open > :nth-child(5) { animation-delay: 0.32s; }
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]).is-open > :nth-child(8) { animation-delay: 0.37s; }
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]).is-open > :nth-child(6) { animation-delay: 0.42s; }
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]).is-open > :nth-child(7) { animation-delay: 0.47s; }
}
@keyframes nav-overlay-in {
  from { clip-path: circle(0 at calc(100% - 2.9375rem) calc(100% - 2.9375rem)); }
  to { clip-path: circle(150% at calc(100% - 2.9375rem) calc(100% - 2.9375rem)); }
}
@keyframes nav-row-in {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]).is-open,
body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]).is-open > * { animation: none; }
  body .elementor.elementor :is(.nav-links,[data-c~="nav-links"]) :is(.nav-item,[data-c~="nav-item"]) :is(.nav-subnav,[data-c~="nav-subnav"]) { transition: none; }
  body .elementor.elementor :is(.nav-toggle,[data-c~="nav-toggle"]),
body .elementor.elementor :is(.nav-toggle,[data-c~="nav-toggle"]) span { transition: none; }
}

@media (max-width: 760px) {
  body .elementor.elementor :is(.stat-grid,[data-c~="stat-grid"]) { grid-template-columns: 1fr; gap: 2.25rem; }
  body .elementor.elementor :is(.stat__number,[data-c~="stat__number"]) { font-size: clamp(3.5rem, 17vw, 5rem); }
  body .elementor.elementor :is(.stat__icon,[data-c~="stat__icon"]) { width: clamp(4.5rem, 20vw, 5.5rem); height: clamp(4.5rem, 20vw, 5.5rem); margin-right: -1rem; }
  
  body .elementor.elementor :is(.footer-top,[data-c~="footer-top"]) { grid-template-columns: 1fr; }
  body .elementor.elementor :is(.section-header,[data-c~="section-header"]) { flex-direction: column; align-items: flex-start; }

}


/* ============================================================
   About photo (Tentang Kami intro): one photo shown at a time,
   cycled with the prev/next arrows layered on top of it
   ============================================================ */
body .elementor.elementor :is(.about-intro__art,[data-c~="about-intro__art"]) { position: relative; aspect-ratio: 4 / 3; }
body .elementor.elementor :is(.about-intro__art,[data-c~="about-intro__art"]) img {
  position: absolute;
  inset: 1rem;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
body .elementor.elementor :is(.about-intro__art,[data-c~="about-intro__art"]) img.is-active { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  body .elementor.elementor :is(.about-intro__art,[data-c~="about-intro__art"]) img { transition: none; }
}
body .elementor.elementor :is(.about-intro__art-controls,[data-c~="about-intro__art-controls"]) {
  position: absolute;
  right: 0.5rem;
  bottom: -0.75rem;
  z-index: 2;
  display: flex;
  gap: 0.6rem;
}
/* e-svg icon wrappers: size the widget box (the svg fills it) */
body .elementor.elementor :is(.program-related__icon,[data-c~="program-related__icon"]) > .e-svg-base { width: 22px; height: 22px; }
body .elementor.elementor :is(.breadcrumb__home,[data-c~="breadcrumb__home"]) > .e-svg-base { display: block; width: 18px; height: 18px; }
body .elementor.elementor :is(.program-photo-strip__star,[data-c~="program-photo-strip__star"]) { width: 32px; height: 32px; }

/* ===== Prinsip Pamflet (Tentang Kami), ported 2026-10-13 ===== */
body .elementor.elementor :is(.principles-section,[data-c~="principles-section"]) > :is(.container,[data-c~="container"]) { position: relative; z-index: 1; }
body .elementor.elementor :is(.principles-grid,[data-c~="principles-grid"]) { gap: clamp(2rem, 4vw, 3rem); }
body .elementor.elementor :is(.principles-head,[data-c~="principles-head"]) { position: relative; }

body .elementor.elementor :is(.principles-knot,[data-c~="principles-knot"]) {
  position: absolute;
  right: 0;
  top: 2.25rem; 
  width: clamp(5.5rem, 26vw, 21rem);
  margin: 0;
  z-index: 2;
  pointer-events: none;
}
body .elementor.elementor :is(.principles-knot,[data-c~="principles-knot"]) img { display: block; width: 100%; height: auto; }
body .elementor.elementor :is(.principles-block,[data-c~="principles-block"]) p:where(:not(.pf-principle-text)) { color: var(--color-white); }
body .elementor.elementor :is(.principles-block,[data-c~="principles-block"]) :is(.value-block__label,[data-c~="value-block__label"]):where(:not(.pf-principle-label)) { font-size: clamp(2rem, 3vw, 2.75rem); }
body .elementor.elementor :is(.principles-block,[data-c~="principles-block"]) p:is(.principles-block__sub,[data-c~="principles-block__sub"]):where(:not(.pf-principle-sub)) {
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 600;
  opacity: 0.85;
  margin: -0.35rem 0 0.9rem;
}

body .elementor.elementor :is(.principles-block,[data-c~="principles-block"]) p:is(.principles-block__sub,[data-c~="principles-block__sub"]):where(.pf-principle-sub) { margin: -0.35rem 0 0.9rem; }
body .elementor.elementor :is(.principles-block--teal,[data-c~="principles-block--teal"]):where(:not(.pf-principle-teal)) { border-color: var(--color-teal); }
body .elementor.elementor :is(.principles-block--teal,[data-c~="principles-block--teal"]) :is(.value-block__label,[data-c~="value-block__label"]):where(:not(.pf-principle-label-teal)) { color: var(--color-teal); }
body .elementor.elementor :is(.principles-block--orange,[data-c~="principles-block--orange"]):where(:not(.pf-principle-orange)) { border-color: var(--color-orange); }
body .elementor.elementor :is(.principles-block--orange,[data-c~="principles-block--orange"]) :is(.value-block__label,[data-c~="value-block__label"]):where(:not(.pf-principle-label-orange)) { color: var(--color-orange); }
body .elementor.elementor :is(.principles-block--yellow,[data-c~="principles-block--yellow"]):where(:not(.pf-principle-yellow)) { border-color: var(--color-yellow-tag); }
body .elementor.elementor :is(.principles-block--yellow,[data-c~="principles-block--yellow"]) :is(.value-block__label,[data-c~="value-block__label"]):where(:not(.pf-principle-label-yellow)) { color: var(--color-yellow-tag); }
body .elementor.elementor :is(.impact-stats--dark,[data-c~="impact-stats--dark"])::before { background-size: auto 1460px; background-position: center top; background-repeat: repeat-y; }
body .elementor.elementor :is(.principles-knot,[data-c~="principles-knot"]) img { display: block; width: 100%; height: auto; }
body .elementor.elementor :is(.principles-grid,[data-c~="principles-grid"]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ===== Mitra loop (Tentang Kami / About Us), 2026-10-13 ===== */
body .elementor.elementor .partner-loop { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
body .elementor.elementor :is(.partner-logo,[data-c~="partner-logo"]):where(:not(.pf-partner)) {
  aspect-ratio: 1; display: grid; place-items: center; padding: 0.5rem; transition: transform 0.2s ease;
}

body .elementor.elementor :is(.partner-logo,[data-c~="partner-logo"]):where(.pf-partner) { padding: 0.5rem; }
body .elementor.elementor :is(.partner-logo,[data-c~="partner-logo"]):hover { transform: translateY(-4px); }
body .elementor.elementor :is(.partner-logo,[data-c~="partner-logo"]) img { width: 80%; height: 80%; object-fit: contain; }
@media (max-width: 767px) { body .elementor.elementor :is(.partner-logo,[data-c~="partner-logo"]) { padding: 0.25rem; } }
/* Partner without a logo yet: show its name in a dashed tile (same look as the prototype's placeholders) */
body .elementor.elementor [data-c~="partner-logo__name"] { display: none; }
body .elementor.elementor :is(.partner-logo,[data-c~="partner-logo"]):not(:has(img[src])) { border: 2px dashed rgba(0, 36, 91, 0.35); border-radius: 12px; padding: 0.75rem; }
body .elementor.elementor :is(.partner-logo,[data-c~="partner-logo"]):not(:has(img[src])) [data-c~="partner-logo__name"] { display: block; text-align: center; font-size: 0.85rem; line-height: 1.3; color: var(--color-gray-500, #6b7280); }
body .elementor.elementor :is(.partner-logo,[data-c~="partner-logo"]) img:not([src]) { display: none; }

/* ===== Tim & Divisi grouped by Divisi ([pamflet_team] shortcode), ported from site/css/style.css 2026-10-13 ===== */
body .elementor.elementor :is(.team-groups,[data-c~="team-groups"]) {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
body .elementor.elementor :is(.team-group__head,[data-c~="team-group__head"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin-bottom: 1.5rem;
}
body .elementor.elementor :is(.team-group__head,[data-c~="team-group__head"]) h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.1;
}
body .elementor.elementor :is(.team-group__head,[data-c~="team-group__head"]) p { font-size: 1rem; }
body .elementor.elementor :is(.team-people,[data-c~="team-people"]) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 2rem 1.75rem;
}

body .elementor.elementor :is(.team-tabs,[data-c~="team-tabs"]) { display: none; }
@media (max-width: 640px) {
  body .elementor.elementor :is(.team-tabs,[data-c~="team-tabs"]) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: clamp(1.5rem, 4vw, 2rem);
  }
  body .elementor.elementor :is(.team-tabs__tab,[data-c~="team-tabs__tab"]) {
    border: 2px solid var(--color-dark);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-dark);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.2;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  body .elementor.elementor :is(.team-tabs__tab,[data-c~="team-tabs__tab"]):is(.is-active,[data-c~="is-active"]) { background: var(--color-dark); color: var(--color-white); }
  body .elementor.elementor :is(.team-groups,[data-c~="team-groups"]):is(.has-tabs,[data-c~="has-tabs"]) { margin-top: 1.5rem; }
  body .elementor.elementor :is(.team-groups,[data-c~="team-groups"]):is(.has-tabs,[data-c~="has-tabs"]) :is(.team-group,[data-c~="team-group"]):not(:is(.is-active,[data-c~="is-active"])) { display: none; }
  body .elementor.elementor :is(.team-groups,[data-c~="team-groups"]):is(.has-tabs,[data-c~="has-tabs"]) :is(.team-group__head,[data-c~="team-group__head"]) { display: none; }
  body .elementor.elementor :is(.team-people,[data-c~="team-people"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
}
body .elementor.elementor :is(.team-person,[data-c~="team-person"]):where(:not(.pf-team)) { text-align: left; }
/* Oct 18 design: square-cornered frame (navy border, hard coloured offset shadow), tilted; accent + tilt cycle per position (below) */
body .elementor.elementor :is(.team-person__photo,[data-c~="team-person__photo"]):where(:not(.pf-team-photo)) {
  --frame-accent: var(--color-orange);
  --tilt: -2deg;
  aspect-ratio: 4 / 5;
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  overflow: hidden;
  background: var(--color-offwhite);
  box-shadow: 7px 7px 0 var(--frame-accent);
  transform: rotate(var(--tilt));
  margin: 0.5rem 0.5rem 1.4rem 0;
  transition: transform 0.25s ease;
}
/* kept here on purpose (class cannot carry them): var() box-shadow, rotation, margin, accent / tilt variables */
body .elementor.elementor :is(.team-person__photo,[data-c~="team-person__photo"]):where(.pf-team-photo) { --frame-accent: var(--color-orange); --tilt: -2deg; box-shadow: 7px 7px 0 var(--frame-accent); transform: rotate(var(--tilt)); margin: 0.5rem 0.5rem 1.4rem 0; transition: transform 0.25s ease; }
body .elementor.elementor :is(.team-person,[data-c~="team-person"]):hover :is(.team-person__photo,[data-c~="team-person__photo"]) { transform: rotate(0deg); }

body .elementor.elementor :is(.team-person__photo,[data-c~="team-person__photo"]) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body .elementor.elementor :is(.team-person,[data-c~="team-person"]):nth-child(6n + 1) :is(.team-person__photo,[data-c~="team-person__photo"]) { --frame-accent: var(--color-orange); }
body .elementor.elementor :is(.team-person,[data-c~="team-person"]):nth-child(6n + 2) :is(.team-person__photo,[data-c~="team-person__photo"]) { --frame-accent: var(--color-teal); }
body .elementor.elementor :is(.team-person,[data-c~="team-person"]):nth-child(6n + 3) :is(.team-person__photo,[data-c~="team-person__photo"]) { --frame-accent: var(--color-yellow-tag); }
body .elementor.elementor :is(.team-person,[data-c~="team-person"]):nth-child(6n + 4) :is(.team-person__photo,[data-c~="team-person__photo"]) { --frame-accent: var(--color-blue-link); }
body .elementor.elementor :is(.team-person,[data-c~="team-person"]):nth-child(6n + 5) :is(.team-person__photo,[data-c~="team-person__photo"]) { --frame-accent: #efc2f7; }
body .elementor.elementor :is(.team-person,[data-c~="team-person"]):nth-child(6n) :is(.team-person__photo,[data-c~="team-person__photo"]) { --frame-accent: var(--color-cyan-tag); }
body .elementor.elementor :is(.team-person,[data-c~="team-person"]):nth-child(4n + 1) :is(.team-person__photo,[data-c~="team-person__photo"]) { --tilt: -2.5deg; }
body .elementor.elementor :is(.team-person,[data-c~="team-person"]):nth-child(4n + 2) :is(.team-person__photo,[data-c~="team-person__photo"]) { --tilt: 1.5deg; }
body .elementor.elementor :is(.team-person,[data-c~="team-person"]):nth-child(4n + 3) :is(.team-person__photo,[data-c~="team-person__photo"]) { --tilt: -1deg; }
body .elementor.elementor :is(.team-person,[data-c~="team-person"]):nth-child(4n) :is(.team-person__photo,[data-c~="team-person__photo"]) { --tilt: 2.5deg; }
body .elementor.elementor :is(.team-person,[data-c~="team-person"]) h4:where(:not(.pf-team-name)) {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.3;
  /* /site leaves h4 at the browser default 1.33em top margin; Elementor resets it to 0. */
  margin-top: 1.33em;
  margin-bottom: 0.15rem;
}

body .elementor.elementor :is(.team-person,[data-c~="team-person"]) h4:where(.pf-team-name) { margin-top: 1.33em; margin-bottom: 0.15rem; }
body .elementor.elementor :is(.team-person,[data-c~="team-person"]) p:where(:not(.pf-team-role)) { font-size: 0.95rem; color: var(--color-orange); }

body .elementor.elementor :is(.team-person__bio,[data-c~="team-person__bio"]):where(:not(.pf-team-bio)) { margin-top: 0.4rem; font-size: 0.875rem; opacity: 0.8; }


body .elementor.elementor :is(.team-person__bio,[data-c~="team-person__bio"]):where(.pf-team-bio) { margin-top: 0.4rem; }

/* Tim & Divisi as Elementor Loop Grids (one per Divisi) */
body .elementor.elementor .team-loop .elementor-loop-container { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
body .elementor.elementor .team-loop .e-loop-item:nth-of-type(6n + 1) :is(.team-person__photo,[data-c~="team-person__photo"]) { --frame-accent: var(--color-orange); }
body .elementor.elementor .team-loop .e-loop-item:nth-of-type(6n + 2) :is(.team-person__photo,[data-c~="team-person__photo"]) { --frame-accent: var(--color-teal); }
body .elementor.elementor .team-loop .e-loop-item:nth-of-type(6n + 3) :is(.team-person__photo,[data-c~="team-person__photo"]) { --frame-accent: var(--color-yellow-tag); }
body .elementor.elementor .team-loop .e-loop-item:nth-of-type(6n + 4) :is(.team-person__photo,[data-c~="team-person__photo"]) { --frame-accent: var(--color-blue-link); }
body .elementor.elementor .team-loop .e-loop-item:nth-of-type(6n + 5) :is(.team-person__photo,[data-c~="team-person__photo"]) { --frame-accent: #efc2f7; }
body .elementor.elementor .team-loop .e-loop-item:nth-of-type(6n) :is(.team-person__photo,[data-c~="team-person__photo"]) { --frame-accent: var(--color-cyan-tag); }
body .elementor.elementor .team-loop .e-loop-item:nth-of-type(4n + 1) :is(.team-person__photo,[data-c~="team-person__photo"]) { --tilt: -2.5deg; }
body .elementor.elementor .team-loop .e-loop-item:nth-of-type(4n + 2) :is(.team-person__photo,[data-c~="team-person__photo"]) { --tilt: 1.5deg; }
body .elementor.elementor .team-loop .e-loop-item:nth-of-type(4n + 3) :is(.team-person__photo,[data-c~="team-person__photo"]) { --tilt: -1deg; }
body .elementor.elementor .team-loop .e-loop-item:nth-of-type(4n) :is(.team-person__photo,[data-c~="team-person__photo"]) { --tilt: 2.5deg; }
body .elementor.elementor :is(.team-person__bio,[data-c~="team-person__bio"]):empty { display: none; }

/* ===== site/ changes 2026-10-13: Beranda impact periods, Program rows/archive, font-weight 700 -> 500 (ported from site/css/style.css) ===== */
body .elementor.elementor :is(.section-title,[data-c~="section-title"]):where(:not(.pf-section-title)) { font-weight: 500; }

#apa-itu-pamflet, #cara-kerja, #prinsip-pamflet, #isu-pamflet, #perjalanan, #divisi, #mitra, #karir,
#suka-ria-remaja, #simpul, #urban-futures, #awarenest-cop, #program-selesai {
  scroll-margin-top: 6.5rem;
}
body .elementor.elementor :is(.hero__title,[data-c~="hero__title"]) { font-weight: 500; }
body .elementor.elementor :is(.hero__desc,[data-c~="hero__desc"]) { max-width: none; }
body .elementor.elementor :is(.why-point,[data-c~="why-point"]) h3:where(:not(.pf-point-title)) { font-weight: 500; }
body .elementor.elementor :is(.partner-grid,[data-c~="partner-grid"]) img {
  width: 80%;   
  height: 80%;
  object-fit: contain;
}

body .elementor.elementor :is(.impact-stats__data,[data-c~="impact-stats__data"]) { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem); }
body .elementor.elementor :is(.impact-period__year,[data-c~="impact-period__year"]) {
  
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-body);
  line-height: inherit;
  color: var(--color-orange);
  margin-bottom: 1.25rem; 
}
body .elementor.elementor :is(.impact-totals-block,[data-c~="impact-totals-block"]) { margin-top: clamp(3rem, 6vw, 5rem); }
body .elementor.elementor :is(.impact-totals,[data-c~="impact-totals"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem clamp(2rem, 4.5vw, 4rem);
  margin: 0;
}

body .elementor.elementor :is(.impact-total,[data-c~="impact-total"]) :is(dd,[data-t="dd"]) {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-teal);
  font-weight: 700;
  font-size: clamp(3rem, 5.5vw, 5rem);
  line-height: 1;
}
body .elementor.elementor :is(.impact-total,[data-c~="impact-total"]) :is(dt,[data-t="dt"]) {
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.9rem, 1.05vw, 1.1rem);
  line-height: 1.4;
}
body .elementor.elementor :is(.impact-total,[data-c~="impact-total"]) { display: flex; flex-direction: column-reverse; }

body .elementor.elementor :is(.stat-grid--small,[data-c~="stat-grid--small"]) { gap: 2rem 1.5rem; }
body .elementor.elementor :is(.stat-grid--small,[data-c~="stat-grid--small"]) :is(.stat__icon,[data-c~="stat__icon"]) { width: clamp(2.75rem, 4.5vw, 3.75rem); height: clamp(2.75rem, 4.5vw, 3.75rem); margin-right: -0.5rem; }
body .elementor.elementor :is(.stat-grid--small,[data-c~="stat-grid--small"]) :is(.stat__number,[data-c~="stat__number"]) { font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 700; }
body .elementor.elementor :is(.stat-grid--small,[data-c~="stat-grid--small"]) :is(.stat__percent,[data-c~="stat__percent"]) { font-weight: 400; }
body .elementor.elementor :is(.stat-grid--small,[data-c~="stat-grid--small"]) :is(.stat__label,[data-c~="stat__label"]) { font-size: clamp(0.9rem, 1.05vw, 1.1rem); margin-top: 0.5rem; }
body .elementor.elementor :is(.impact-map-block__title,[data-c~="impact-map-block__title"]) { font-weight: 500; }
body .elementor.elementor :is(.footer-col__title,[data-c~="footer-col__title"]) { font-weight: 500; }
body .elementor.elementor :is(.footer-newsletter__title,[data-c~="footer-newsletter__title"]) { font-weight: 500; }
body .elementor.elementor :is(.page-hero__title,[data-c~="page-hero__title"]):where(:not(.pf-h1)) { font-weight: 500; }
body .elementor.elementor :is(.activity-item,[data-c~="activity-item"]) h3 { font-weight: 500; }
body .elementor.elementor :is(.timeline__content,[data-c~="timeline__content"]) h3 { font-weight: 500; }
body .elementor.elementor :is(.program-row,[data-c~="program-row"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(1rem, 2.5vw, 2rem); 
}
body .elementor.elementor :is(.program-row--compact,[data-c~="program-row--compact"]) {
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem; 
}
body .elementor.elementor :is(.program-row--compact,[data-c~="program-row--compact"]) :is(.program-row__photo,[data-c~="program-row__photo"]) { transform: rotate(-1deg); width: 75%; }

body .elementor.elementor :is(.program-row,[data-c~="program-row"]):not(:is(.program-row--compact,[data-c~="program-row--compact"])) { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
body .elementor.elementor :is(.program-row--flip,[data-c~="program-row--flip"]):not(:is(.program-row--compact,[data-c~="program-row--compact"])) { grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); }
body .elementor.elementor :is(.program-row--compact,[data-c~="program-row--compact"]) :is(.program-row__body,[data-c~="program-row__body"]) :is(.section-title,[data-c~="section-title"]) { margin-top: 0; }

body .elementor.elementor :is(.archive-grid,[data-c~="archive-grid"]) {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 700px) { body .elementor.elementor :is(.archive-grid,[data-c~="archive-grid"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
body .elementor.elementor :is(.archive-grid,[data-c~="archive-grid"]) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
body .elementor.elementor :is(.archive-grid,[data-c~="archive-grid"]) :is(li,[data-t="li"]) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1rem 1.1rem 1.15rem;
  background: var(--color-white);
  border: 2px solid var(--color-dark);
  border-radius: 12px;
}
body .elementor.elementor :is(.archive-grid,[data-c~="archive-grid"]) h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1.05rem; line-height: 1.3; }
body .elementor.elementor :is(.archive-grid,[data-c~="archive-grid"]) :is(p,[data-c~="archive-grid__desc"]) { font-size: 0.95rem; line-height: 1.5; color: var(--color-gray-700); }
body .elementor.elementor :is(.article-hero__title,[data-c~="article-hero__title"]) { font-weight: 500; }
body .elementor.elementor :is(.article-body,[data-c~="article-body"]) h2 { font-weight: 500; }
body .elementor.elementor :is(.article-sidebar__box,[data-c~="article-sidebar__box"]) h3 { font-weight: 500; }
body .elementor.elementor :is(.filter-group,[data-c~="filter-group"]) h3 { font-weight: 500; }
@media (max-width: 960px) {
body .elementor.elementor :is(.program-row,[data-c~="program-row"]), body .elementor.elementor :is(.program-row,[data-c~="program-row"]):not(:is(.program-row--compact,[data-c~="program-row--compact"])), body .elementor.elementor :is(.program-row--flip,[data-c~="program-row--flip"]):not(:is(.program-row--compact,[data-c~="program-row--compact"])) { grid-template-columns: minmax(0, 1fr); }
body .elementor.elementor :is(.program-row__photo,[data-c~="program-row__photo"]) { width: 78%; }
}

@media (max-width: 640px) {
  
  body .elementor.elementor :is(.hero__title,[data-c~="hero__title"]) { font-size: min(5rem, calc((100vw - 2 * var(--gutter)) / 6.3)); line-height: 1; }
}
@media (max-width: 760px) {
body .elementor.elementor :is(.stat-grid--small,[data-c~="stat-grid--small"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
body .elementor.elementor :is(.stat-grid--small,[data-c~="stat-grid--small"]) :is(.stat__number,[data-c~="stat__number"]) { font-size: clamp(1.6rem, 7vw, 2.1rem); }
body .elementor.elementor :is(.stat-grid--small,[data-c~="stat-grid--small"]) :is(.stat__icon,[data-c~="stat__icon"]) { width: 2.75rem; height: 2.75rem; margin-right: -0.4rem; }
body .elementor.elementor :is(.stat-grid--small,[data-c~="stat-grid--small"]) :is(.stat__label,[data-c~="stat__label"]) { font-size: 0.95rem; }
body .elementor.elementor :is(.impact-totals,[data-c~="impact-totals"]) { gap: 1.25rem 2rem; }
body .elementor.elementor :is(.impact-total,[data-c~="impact-total"]) :is(dd,[data-t="dd"]) { font-size: clamp(2.6rem, 12vw, 3.25rem); }
}

/* WP-only: Program archive year pill is a paragraph, card title size for compact program rows */
body .elementor.elementor [data-c~="archive-grid__year"] { padding: 0.2rem 0.75rem; background: var(--color-cyan-tag); border-radius: 28px; font-weight: 700; font-size: 0.85rem; }
body .elementor.elementor :is(.program-row--compact,[data-c~="program-row--compact"]) :is(.section-title,[data-c~="section-title"]) { font-size: clamp(1.6rem, 3.2vw, 2.6rem); }
body .elementor.elementor :is(.impact-totals-block,[data-c~="impact-totals-block"]) { color: var(--color-white); position: relative; z-index: 1; }
body .elementor.elementor :is(.archive-grid,[data-c~="archive-grid"]) :is(li,[data-t="li"]) { justify-content: flex-start; }
@media (max-width: 767px) { body .elementor.elementor :is(.archive-grid,[data-c~="archive-grid"]) { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { body .elementor.elementor :is(.about-intro,[data-c~="about-intro"]) { grid-template-columns: minmax(0, 1fr); } }

/* ---- Kenapa section: why-intro / why-rows (ported from site/css/style.css, Oct 18) ---- */
/* title above the lead sentence, both centred */
body .elementor.elementor :is(.why-intro,[data-c~="why-intro"]):where(:not(.pf-why-intro)) { max-width: 52rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(1.25rem, 2.5vw, 2rem); }
body .elementor.elementor :is(.why-intro,[data-c~="why-intro"]):where(.pf-why-intro) { max-width: 52rem; margin-inline: auto; }
/* each pointer gets its own illustration: image and text side by side, alternating */
body .elementor.elementor :is(.why-rows,[data-c~="why-rows"]):where(:not(.pf-why-rows)) { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4rem); padding: 0; display: grid; gap: clamp(3rem, 6vw, 5.5rem); }
body .elementor.elementor :is(.why-rows,[data-c~="why-rows"]):where(.pf-why-rows) { margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4rem); padding: 0; }
body .elementor.elementor :is(.why-row,[data-c~="why-row"]):where(:not(.pf-why-row)) {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
body .elementor.elementor :is(.why-row--flip,[data-c~="why-row--flip"]) :is(.why-row__art,[data-c~="why-row__art"]) { order: 2; }
body .elementor.elementor :is(.why-row__art,[data-c~="why-row__art"]):where(:not(.pf-why-art)) {
  margin: 0;
  background: var(--color-white);
  border: var(--border-w) solid var(--color-dark);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--why-accent, var(--color-teal));
  transform: rotate(-1.5deg);
  justify-self: center;
  width: 100%;
}
body .elementor.elementor :is(.why-row__art,[data-c~="why-row__art"]):where(.pf-why-art) { margin: 0; box-shadow: 8px 8px 0 var(--why-accent, var(--color-teal)); transform: rotate(-1.5deg); width: 100%; }
body .elementor.elementor :is(.why-row--flip,[data-c~="why-row--flip"]) :is(.why-row__art,[data-c~="why-row__art"]) { transform: rotate(1.5deg); }
body .elementor.elementor :is(.why-row__art,[data-c~="why-row__art"]) img { display: block; width: 100%; height: auto; }
/* different illustration shapes: keep the visual weight of the three about equal */
body .elementor.elementor :is(.why-row__art--organisasi,[data-c~="why-row__art--organisasi"]):where(:not(.pf-why-art-organisasi)) { --why-accent: var(--color-teal); max-width: 30rem; }
body .elementor.elementor :is(.why-row__art--organisasi,[data-c~="why-row__art--organisasi"]):where(.pf-why-art-organisasi) { max-width: 30rem; }
body .elementor.elementor :is(.why-row__art--individu,[data-c~="why-row__art--individu"]):where(:not(.pf-why-art-individu)) { --why-accent: var(--color-orange); max-width: 22rem; }
body .elementor.elementor :is(.why-row__art--individu,[data-c~="why-row__art--individu"]):where(.pf-why-art-individu) { max-width: 22rem; }
body .elementor.elementor :is(.why-row__art--kelompok,[data-c~="why-row__art--kelompok"]):where(:not(.pf-why-art-kelompok)) { --why-accent: var(--color-yellow-tag); max-width: 20rem; }
body .elementor.elementor :is(.why-row__art--kelompok,[data-c~="why-row__art--kelompok"]):where(.pf-why-art-kelompok) { max-width: 20rem; }
body .elementor.elementor :is(.why-row__body,[data-c~="why-row__body"]):where(:not(.pf-why-body)) { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; max-width: 36rem; }
body .elementor.elementor :is(.why-row__body,[data-c~="why-row__body"]):where(.pf-why-body) { max-width: 36rem; }
body .elementor.elementor :is(.why-row__body,[data-c~="why-row__body"]) h3:where(:not(.pf-why-title)) {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.2;
}
body .elementor.elementor :is(.why-row__body,[data-c~="why-row__body"]) p:where(:not(.pf-why-text)) { font-size: var(--text-body); line-height: 1.6; }
/* desktop: the three pointers sit side by side, each with its illustration on top, so the
   section is short instead of three tall rows */
@media (min-width: 961px) {
  body .elementor.elementor :is(.why-rows,[data-c~="why-rows"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); align-items: start; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
  body .elementor.elementor :is(.why-row,[data-c~="why-row"]) { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  body .elementor.elementor :is(.why-row--flip,[data-c~="why-row--flip"]) :is(.why-row__art,[data-c~="why-row__art"]) { order: 0; }
  body .elementor.elementor :is(.why-row__art,[data-c~="why-row__art"]) { width: fit-content; max-width: 100%; justify-self: start; }
  body .elementor.elementor :is(.why-row__art--organisasi,[data-c~="why-row__art--organisasi"]),
  body .elementor.elementor :is(.why-row__art--individu,[data-c~="why-row__art--individu"]),
  body .elementor.elementor :is(.why-row__art--kelompok,[data-c~="why-row__art--kelompok"]) { max-width: 100%; }
  /* same height for all three; the width follows each illustration's own proportions */
  body .elementor.elementor :is(.why-row__art,[data-c~="why-row__art"]) img { width: auto; max-width: 100%; height: clamp(11rem, 16vw, 15rem); }
  body .elementor.elementor :is(.why-row__body,[data-c~="why-row__body"]) { gap: 0.7rem; max-width: none; }
  body .elementor.elementor :is(.why-row__body,[data-c~="why-row__body"]) h3 { font-size: clamp(1.25rem, 1.7vw, 1.55rem); }
  body .elementor.elementor :is(.why-row__body,[data-c~="why-row__body"]) p { font-size: 1.05rem; line-height: 1.55; }
}
/* tablets and phones: smaller illustrations, same height for all three */
@media (max-width: 960px) {
  body .elementor.elementor :is(.why-row__art,[data-c~="why-row__art"]) { width: fit-content; max-width: 100%; justify-self: start; }
  body .elementor.elementor :is(.why-row__art,[data-c~="why-row__art"]) img { width: auto; max-width: 100%; height: 12.5rem; }
  body .elementor.elementor :is(.why-row__body,[data-c~="why-row__body"]) p { font-size: 1.1rem; line-height: 1.55; }
  body .elementor.elementor :is(.why-row__body,[data-c~="why-row__body"]) h3 { font-size: 1.35rem; }
  body .elementor.elementor :is(.why-row__art--organisasi,[data-c~="why-row__art--organisasi"]),
  body .elementor.elementor :is(.why-row__art--individu,[data-c~="why-row__art--individu"]),
  body .elementor.elementor :is(.why-row__art--kelompok,[data-c~="why-row__art--kelompok"]) { max-width: 100%; }
}
/* tablets: one pointer per row, image beside the text */
@media (min-width: 641px) and (max-width: 960px) {
  body .elementor.elementor :is(.why-row,[data-c~="why-row"]) { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem; }
  body .elementor.elementor :is(.why-row--flip,[data-c~="why-row--flip"]) :is(.why-row__art,[data-c~="why-row__art"]) { order: 0; }
  body .elementor.elementor :is(.why-row__art--organisasi,[data-c~="why-row__art--organisasi"]),
  body .elementor.elementor :is(.why-row__art--individu,[data-c~="why-row__art--individu"]),
  body .elementor.elementor :is(.why-row__art--kelompok,[data-c~="why-row__art--kelompok"]) { max-width: 100%; }
}
/* phones: image above the text */
@media (max-width: 640px) {
  body .elementor.elementor :is(.why-row,[data-c~="why-row"]) { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  body .elementor.elementor :is(.why-row--flip,[data-c~="why-row--flip"]) :is(.why-row__art,[data-c~="why-row__art"]) { order: 0; }
}