/* =========================================================
   Peka revamp.css (v2.0, "Riak × Layar")
   Loaded after theme.css and overrides it. Decisions come from the design review of 6 October 2026:
   Riak     = interaction language: buttons, links, focus, menu, transitions, the ripple field.
              The ripple is ALWAYS perfect concentric circles, evenly spaced.
   Layar    = depth from the work: film and case imagery under a halftone screen, framed cards.
   Glass    = dark glass between the work and the UI: header, mobile menu, bottom action bar.
   Greyscale UI. Coral is the only signal: focus, live state, active page, a field in focus.
   Two typefaces: 42dot Sans (headlines) and Asta Sans (everything else).
   ========================================================= */

:root {
  --ink: #0A0A0A; --ink-2: #121212; --ink-3: #1A1A1A;
  --light: #FFFFFF; --paper: #F4F2EC; --paper-2: #E6E4DE;
  --fg2: rgba(255,255,255,.72); --fg3: rgba(255,255,255,.5); --mute: rgba(255,255,255,.34);
  --muted: rgba(255,255,255,.5);
  --line-dark: #2A2A2A; --line2: rgba(255,255,255,.28);
  --line-paper: #E6E4DE; --ink-fg2: rgba(10,10,10,.7); --ink-fg3: rgba(10,10,10,.5);
  --coral: #FF5A3C; --signal: #FF5A3C;
  --amber: var(--fg2); --sky: var(--fg2);
  --display: "42dot Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Asta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: var(--sans); --serif: var(--display);
  --ease-notice: cubic-bezier(.2,.8,.2,1); --ease-settle: cubic-bezier(.65,0,.35,1); --ease-exit: cubic-bezier(.4,0,1,1);
  --ease-out: var(--ease-notice);
  --hdr: 104px;
}

body.peka { background: var(--ink); color: var(--light); font-family: var(--sans); }
::selection { background: var(--light); color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 0; }

/* ---------- Type: 42dot Sans for headlines, Asta Sans for the rest ---------- */
.peka h1, .peka h2, .peka h3, .peka .wp-block-post-title, .peka .wp-block-heading:not(.is-style-eyebrow) { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; }
.peka h1, .peka .peka-hero h1, .peka .wp-block-post-title { font-weight: 800; letter-spacing: -.04em; }
.peka h4.is-style-eyebrow, .peka h4 { font-family: var(--sans); }
/* the old italic serif phrases become the quiet half of the headline */
.peka-serif, .peka-serif--coral { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--fg3); }
h1 .peka-serif, h2 .peka-serif { font-size: 1em; }
.peka-band--paper .peka-serif { color: var(--ink-fg3); }
.peka-lede { color: var(--fg2); font-family: var(--sans); }
.peka-band--paper .peka-lede { color: var(--ink-fg2); }
.peka-mono, .peka-mono a { font-family: var(--sans); letter-spacing: .01em; font-variant-numeric: tabular-nums; }

/* eyebrows: tracked caps with a small ring (the riak), no ambient pulse */
.peka .is-style-eyebrow, .peka-eyebrow { font-family: var(--sans) !important; font-size: .6875rem !important; letter-spacing: .18em !important; color: var(--fg3); }
.peka .is-style-eyebrow::before, .peka-eyebrow::before { width: 7px; height: 7px; background: transparent; border: 1px solid currentColor; box-shadow: none; animation: none; }
.peka-band--paper .is-style-eyebrow, .peka-band--paper .peka-eyebrow { color: var(--ink-fg3); }

/* ---------- Buttons (Riak) ---------- */
.peka .wp-block-button__link, .peka .wp-element-button, .peka-form__foot button {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 48px; padding: 0 1.1rem 0 1.25rem; border-radius: 0;
  font-family: var(--sans); font-size: .9375rem; font-weight: 500; letter-spacing: -.005em; line-height: 1.1;
  background: var(--light); color: var(--ink); border: 1px solid var(--light); box-shadow: none;
  transition: transform 120ms var(--ease-notice), color 160ms var(--ease-notice), border-color 160ms; will-change: auto;
}
.peka .wp-block-button__link:hover { transform: none; background: var(--light); color: var(--ink); }
.peka .wp-block-button__link:active, .peka-form__foot button:active { transform: scale(.98); }
.peka .wp-block-button__link span[aria-hidden]:not(.riak-fill):not(.riak-ring) { position: relative; z-index: 1; margin-left: 0; transition: transform 180ms var(--ease-notice); }
.peka .wp-block-button__link:hover span[aria-hidden] { transform: translateX(4px); }
/* secondary: hairline, filled by a circle from the cursor's entry point (riak.js); CSS hover is the fallback */
.peka .is-style-outline-light .wp-block-button__link { background: transparent; color: var(--light); border-color: var(--line2); box-shadow: none; }
.peka .is-style-outline-light .wp-block-button__link:hover { background: transparent; color: var(--light); border-color: var(--light); box-shadow: none; }
html:not(.riak) .peka .is-style-outline-light .wp-block-button__link:hover { background: var(--light); color: var(--ink); }
.peka .wp-block-button__link.is-filled { color: var(--ink) !important; border-color: var(--light) !important; }
.riak-fill { position: absolute; z-index: 0; border-radius: 50%; background: currentColor; transform: translate(-50%,-50%) scale(0); transition: transform 420ms var(--ease-notice); pointer-events: none; }
.riak-fill.on { transform: translate(-50%,-50%) scale(1); }
.riak-fill.off { transition: transform 260ms var(--ease-exit); }
.is-style-outline-light .riak-fill, .is-style-outline-dark .riak-fill { color: var(--light); }
.riak-ring { position: absolute; z-index: 0; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%) scale(.12); opacity: .5; animation: riak-ring 640ms var(--ease-notice) forwards; }
@keyframes riak-ring { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }
.peka .wp-block-button__link > :not(.riak-fill):not(.riak-ring), .peka-form__foot button > :not(.riak-fill):not(.riak-ring), .riak-lbl { position: relative; z-index: 1; }
/* on the work itself (hero, film bands): the secondary turns to glass */
.peka-hero .is-style-outline-light .wp-block-button__link, .peka-film .is-style-outline-light .wp-block-button__link { background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* paper bands invert */
.peka-band--paper .wp-block-button__link:not(.is-style-outline-dark *) { background: var(--ink); color: var(--light); border-color: var(--ink); }
.peka-band--paper .wp-block-button__link:hover { background: var(--ink); color: var(--light); }
.peka .is-style-outline-dark .wp-block-button__link { background: transparent; color: var(--ink); border-color: rgba(10,10,10,.34); }
.peka .is-style-outline-dark .riak-fill { color: var(--ink); }
.peka .is-style-outline-dark .wp-block-button__link.is-filled { color: var(--light) !important; border-color: var(--ink) !important; }
.peka .wp-block-buttons { gap: .75rem; }
/* text links inside prose: hairline at rest, 2px on hover */
.peka-prose a:not(.wp-block-button__link), .peka-problem__fix a, .peka-form__note a, .peka-cta__contact a, .peka-post__meta a {
  color: var(--light); text-decoration: none; padding-bottom: 2px;
  background: linear-gradient(currentColor,currentColor) 0 100% / 0 2px no-repeat, linear-gradient(var(--line2),var(--line2)) 0 100% / 100% 1px no-repeat;
  transition: background-size 300ms var(--ease-notice);
}
.peka-prose a:not(.wp-block-button__link):hover, .peka-problem__fix a:hover, .peka-form__note a:hover, .peka-cta__contact a:hover, .peka-post__meta a:hover { background-size: 100% 2px, 100% 1px; }
.peka-band--paper .peka-prose a:not(.wp-block-button__link) { color: var(--ink); }

/* ---------- Header: dark glass ---------- */
header.wp-block-template-part { top: 0; }
.peka-header { background: transparent; transition: background-color 300ms var(--ease-notice); }
.peka-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease-notice);
  background: radial-gradient(260px 120px at var(--lx, 30%) 0%, rgba(255,255,255,.10), transparent 70%), linear-gradient(180deg, rgba(34,34,34,.6), rgba(12,12,12,.5));
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.08); }
.peka-header.is-scrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.peka-header.is-scrolled::before { opacity: 1; }
.peka-nav { font-family: var(--sans); font-size: .9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.peka-nav .wp-block-navigation-item__content { color: var(--fg2); padding: .7rem 0; transition: color 160ms; }
.peka-nav .wp-block-navigation-item__content:hover, .peka-nav .current-menu-item > .wp-block-navigation-item__content, .peka-nav .wp-block-navigation-item__content[aria-current] { color: var(--light); }
.peka-nav .wp-block-navigation-item__content::after { left: 0; right: auto; bottom: .35rem; width: 0; height: 2px; background: var(--light); transition: width 300ms var(--ease-notice); }
.peka-nav .wp-block-navigation-item__content:hover::after { right: auto; width: 100%; }
.peka-nav .is-current .wp-block-navigation-item__content::after { width: 100%; }
.peka-nav .is-current .wp-block-navigation-item__content { color: var(--light); }
/* language switch reads "EN · ID", the current language in white */
.peka-nav .peka-lang .wp-block-navigation-item__content { border: 0; border-radius: 0; padding: .7rem 0; font-size: .875rem; color: var(--fg3); }
.peka-nav--en .peka-lang .wp-block-navigation-item__content::before { content: "EN"; color: var(--light); font-weight: 600; margin-right: .45em; }
.peka-nav--id .peka-lang .wp-block-navigation-item__content::before { content: "ID"; color: var(--light); font-weight: 600; margin-right: .45em; }
.peka-nav .peka-lang .wp-block-navigation-item__content > span::before { content: "· "; color: var(--mute); }
.peka-header__cta .wp-block-button__link { min-height: 40px; padding: 0 .9rem 0 1rem; font-size: .875rem; }
.peka-header .is-style-outline-light .wp-block-button__link { background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* mobile menu: dark glass, opens as a circle from the Menu button, links bottom-aligned for the thumb */
.peka-nav .wp-block-navigation__responsive-container-open { align-items: center; gap: .6rem; min-height: 44px; padding: 0 .4rem; color: var(--light); font: 500 .9375rem/1 var(--sans); }
.peka-nav .wp-block-navigation__responsive-container-open::before { content: "Menu"; }
.peka-lang-id .peka-nav .wp-block-navigation__responsive-container-open::before { content: "Menu"; }
.peka-nav .wp-block-navigation__responsive-container-open svg { width: 20px; height: 20px; }
.peka-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: rgba(10,10,10,.62) !important; color: var(--light); padding: 0 !important;
  -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%);
  animation: riak-menu-in 600ms var(--ease-settle) both;
}
@keyframes riak-menu-in { from { clip-path: circle(0px at var(--mx, calc(100% - 40px)) var(--my, 40px)); } to { clip-path: circle(160% at var(--mx, calc(100% - 40px)) var(--my, 40px)); } }
.peka-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { max-width: none; height: 100%; }
.peka-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { min-height: 100%; display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px)); }
.peka-nav .wp-block-navigation__responsive-container-close { color: var(--light); top: calc(16px + env(safe-area-inset-top,0px)); right: 16px; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font: 500 .9375rem/1 var(--sans); }
.peka-nav .wp-block-navigation__responsive-container-close::before { content: "Close"; }
.peka-nav .wp-block-navigation__responsive-container-close svg { width: 20px; height: 20px; }
.peka-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { flex: 1; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-end; padding-top: 3.5rem; }
.peka-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: flex-start !important; gap: .1rem; width: 100%; }
.peka-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--display); font-weight: 700; font-size: 2.125rem; line-height: 1.12; letter-spacing: -.025em; color: var(--light); padding: .2rem 0; text-transform: none; }
.peka-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { opacity: 0; transform: translateY(18px); animation: riak-item-in 460ms var(--ease-notice) forwards; }
.peka-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 220ms; }
.peka-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 260ms; }
.peka-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 300ms; }
.peka-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 340ms; }
.peka-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 380ms; }
.peka-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(n+6) { animation-delay: 420ms; }
@keyframes riak-item-in { to { opacity: 1; transform: none; } }
.peka-nav .wp-block-navigation__responsive-container.is-menu-open .peka-lang .wp-block-navigation-item__content { font-family: var(--sans); font-size: 1rem; font-weight: 500; margin-top: .6rem; }
.peka-menu-foot { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .peka-menu-foot { display: flex; flex-direction: column; gap: 1rem; width: 100%; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.14); opacity: 0; animation: riak-item-in 400ms var(--ease-notice) 420ms forwards; }
.peka-menu-foot .wp-block-button__link { width: 100%; min-height: 52px; }
.peka-menu-foot__row { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: .9375rem; }
.peka-menu-foot__row a { color: var(--light); text-decoration: none; padding: .6rem 0; background: linear-gradient(var(--line2),var(--line2)) 0 calc(100% - .4rem) / 100% 1px no-repeat; }

/* ---------- Hero: the work as background, five layers ---------- */
body.peka main:has(.peka-hero) { margin-block-start: 0; }
body.peka .peka-hero { margin-top: calc(var(--hdr) * -1) !important; padding-top: calc(var(--hdr) + clamp(3rem, 8vh, 6rem)); min-height: min(92vh, 900px); background: var(--ink); }
.peka-hero::after { height: 35%; background: linear-gradient(to bottom, transparent, var(--ink)); }
.peka-hero__film { position: absolute !important; inset: 0 !important; z-index: -3; max-width: none !important; margin: 0 !important; overflow: hidden; pointer-events: none; }
.peka-hero__film video, .peka-hero__film img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: saturate(.95) brightness(.74); }
.peka-hero__screen { position: absolute !important; inset: 0 !important; z-index: -2; max-width: none !important; margin: 0 !important; pointer-events: none;
  background: radial-gradient(circle, rgba(10,10,10,.9) 40%, transparent 44%) 0 0 / 5px 5px, linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.15) 78%), linear-gradient(0deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,0) 50%); }
.peka-riak { position: absolute !important; inset: 0 !important; z-index: -1; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; }
.peka-hero h1 { font-size: clamp(2.75rem, 6.4vw, 5.9rem); line-height: .92; letter-spacing: -.045em; color: rgba(255,255,255,.55); }
.peka-hero h1 .peka-serif { color: var(--light); display: inline; }
.peka-hero__meta { font-family: var(--sans); font-size: .75rem; color: var(--fg3); letter-spacing: .02em; }
.peka-hero__credit { position: absolute; z-index: 2; right: max(clamp(1.25rem, 4vw, 3rem), calc((100% - 1280px) / 2)); top: calc(var(--hdr) + 1rem); display: inline-flex; align-items: center; gap: .6rem; font: 500 .6875rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); text-decoration: none; padding: .5rem 0; }
.peka-hero__credit::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.peka-hero__credit:hover { color: var(--light); }
.peka-status { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .8125rem; color: var(--fg2); font-variant-numeric: tabular-nums; }
.peka-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mute); flex: none; }
.peka-status.is-open::before { background: var(--signal); }
@media (max-width: 767px) {
  .peka-hero { min-height: 100svh; align-items: end; }
  .peka-hero__film video, .peka-hero__film img { object-position: 9% 40%; }
  .peka-hero__film { background-position: 9% 40% !important; }
  .peka-hero__screen { background: radial-gradient(circle, rgba(10,10,10,.9) 40%, transparent 44%) 0 0 / 5px 5px, linear-gradient(0deg, rgba(10,10,10,.96) 0%, rgba(10,10,10,.6) 50%, rgba(10,10,10,.3) 100%); }
  .peka-hero__credit { top: calc(var(--hdr) + .75rem); left: clamp(1.25rem, 4vw, 3rem); right: auto; }
  .peka-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
  .peka-hero .wp-block-button, .peka-hero .wp-block-button__link { width: 100%; }
}

/* ---------- Sections ---------- */
/* reveal: a hairline draws first, then the content rises */
html.js .peka-section__head.reveal { background: linear-gradient(var(--line-dark), var(--line-dark)) 0 0 / 0 1px no-repeat; padding-top: 1.5rem; transition: background-size 520ms var(--ease-notice); }
html.js .peka-section__head.reveal.is-in { background-size: 100% 1px; }
.peka-band--paper .peka-section__head.reveal { background-image: linear-gradient(var(--line-paper), var(--line-paper)); }
html.js .reveal { transform: translateY(14px); transition: opacity 520ms var(--ease-notice) 90ms, transform 520ms var(--ease-notice) 90ms, background-size 520ms var(--ease-notice); }
html.js .reveal.is-in { transform: none; }
.peka-band--paper { background: var(--paper); color: var(--ink); }
.peka-band--ink2 { background: var(--ink-2); }

/* problem: hairline cards, the number is just an index */
.peka-problem__card { border: 1px solid var(--line-dark); background: transparent; padding: 1.5rem; transition: border-color 300ms var(--ease-notice); }
.peka-problem__card:hover { transform: none; background: transparent; border-color: var(--line2); }
.peka-problem__card .peka-mono { color: var(--mute); font-size: .75rem; letter-spacing: .08em; }
.peka-problem__card h3 { font-size: 1.375rem; letter-spacing: -.02em; }
.peka-problem__card p { color: var(--fg2); }
.peka-problem__fix h3 { font-family: var(--display); }
.peka-problem__fix p { font-family: var(--sans); font-size: 1.0625rem; color: var(--fg2); border-left: 1px solid var(--line2); }

/* ---------- Problem diagrams ----------
   On screen, each card plays its problem on a loop (.is-live): budget keeps pouring into media,
   messages die at the broken link, every launch falls back to zero and its lesson with it.
   Hover, tap, or scrolling on toward the next section resolves it into the fix (.is-fix): the idea carries the weight,
   the link closes and messages cross, launches compound. */
.pk-ill { display: block; width: 100%; height: auto; overflow: visible; margin: 0 0 1.4rem; }
.pk-ill text { font-family: var(--sans); font-size: 11px; font-weight: 500; fill: var(--fg2); letter-spacing: .02em; }
.peka-problem__card { position: relative; }
.pk-track { fill: rgba(255,255,255,.06); }
.pk-bar { transform-box: fill-box; transform-origin: left center; transition: transform 900ms var(--ease-settle); }
.pk-bar--a { fill: var(--light); }
.pk-bar--b { fill: var(--signal); }
.pk-coin { fill: var(--light); opacity: 0; transform-box: fill-box; }
.pk-box { fill: none; stroke: var(--line2); stroke-width: 1; transition: stroke 420ms var(--ease-notice); }
.pk-link { stroke: var(--light); stroke-width: 1.5; stroke-dasharray: 1; transition: stroke-dashoffset 500ms var(--ease-notice) 250ms; }
.pk-bridge { stroke: var(--light); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 320ms var(--ease-notice); }
.pk-msg { fill: var(--light); opacity: 0; transform-box: fill-box; }
.pk-break { transform-box: fill-box; transform-origin: center; transition: opacity 320ms var(--ease-notice) 800ms, transform 320ms var(--ease-notice) 800ms; }
.pk-hit { transform-box: fill-box; transform-origin: center; }
.pk-break line { stroke: var(--signal); stroke-width: 2; }
.pk-axis { stroke: var(--line2); stroke-width: 1; }
.pk-rise { fill: none; stroke: var(--light); stroke-width: 1.5; stroke-dasharray: 1; transition: opacity 420ms var(--ease-notice); }
.pk-drop { stroke: var(--signal); stroke-width: 1.5; stroke-dasharray: 1; transition: opacity 420ms var(--ease-notice); }
.pk-lesson { fill: var(--light); opacity: 0; transform-box: fill-box; }
.pk-compound { fill: none; stroke: var(--light); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--ease-settle); }
.pk-peak { fill: var(--light); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3); transition: opacity 300ms var(--ease-notice), transform 300ms var(--ease-notice); }

/* arrival: drawn once */
html.js .peka-problem__card .pk-bar { transform: scaleX(0); }
html.js .peka-problem__card .pk-link { stroke-dashoffset: 1; }
html.js .peka-problem__card .pk-break { opacity: 0; transform: scale(.4); }
html.js .peka-problem__card .pk-rise, html.js .peka-problem__card .pk-drop { stroke-dashoffset: 1; }
html.js .peka-problem__card.is-in .pk-bar { transform: scaleX(1); }
html.js .peka-problem__card.is-in .pk-bar--b { transition-delay: 700ms; }
html.js .peka-problem__card.is-in .pk-link { stroke-dashoffset: 0; }
html.js .peka-problem__card.is-in .pk-break { opacity: 1; transform: none; }
html:not(.js) .pk-rise, html:not(.js) .pk-drop, html.js .peka-problem__card.is-in:not(.is-live) .pk-rise, html.js .peka-problem__card.is-in:not(.is-live) .pk-drop { stroke-dashoffset: 0; }

/* 01: the budget keeps pouring into media */
html.js .peka-problem__card.is-live .pk-coin { animation: pk-coin 1.5s var(--ease-settle) var(--d) infinite; }
@keyframes pk-coin { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 70% { opacity: 1; transform: translateY(26px); } 85%, 100% { opacity: 0; transform: translateY(28px); } }
/* 02: messages leave each side and die at the break */
html.js .peka-problem__card.is-live .pk-msg--l { animation: pk-msg-l 2s var(--ease-notice) infinite; }
html.js .peka-problem__card.is-live .pk-msg--r { animation: pk-msg-r 2s var(--ease-notice) 1s infinite; }
html.js .peka-problem__card.is-live .pk-hit { animation: pk-hit 1s var(--ease-notice) infinite; }
@keyframes pk-msg-l { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 55% { opacity: 1; transform: translateX(22px); } 70%, 100% { opacity: 0; transform: translateX(16px); } }
@keyframes pk-msg-r { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 55% { opacity: 1; transform: translateX(-22px); } 70%, 100% { opacity: 0; transform: translateX(-16px); } }
@keyframes pk-hit { 0%, 6% { transform: scale(1); } 12% { transform: scale(1.35); } 30%, 100% { transform: scale(1); } }
/* 03: rise, fall to zero, the lesson falls with it, start again */
html.js .peka-problem__card.is-live .pk-rise--1 { animation: pk-r1 6s linear infinite; }
html.js .peka-problem__card.is-live .pk-drop--1 { animation: pk-d1 6s linear infinite; }
html.js .peka-problem__card.is-live .pk-lesson--1 { animation: pk-l1 6s linear infinite; }
html.js .peka-problem__card.is-live .pk-rise--2 { animation: pk-r2 6s linear infinite; }
html.js .peka-problem__card.is-live .pk-drop--2 { animation: pk-d2 6s linear infinite; }
html.js .peka-problem__card.is-live .pk-lesson--2 { animation: pk-l2 6s linear infinite; }
html.js .peka-problem__card.is-live .pk-rise--3 { animation: pk-r3 6s linear infinite; }
html.js .peka-problem__card.is-live .pk-drop--3 { animation: pk-d3 6s linear infinite; }
html.js .peka-problem__card.is-live .pk-lesson--3 { animation: pk-l3 6s linear infinite; }
@keyframes pk-r1 { 0% { stroke-dashoffset: 1; opacity: 1; } 12% { stroke-dashoffset: 0; } 84% { opacity: 1; stroke-dashoffset: 0; } 94%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes pk-d1 { 0%, 12% { stroke-dashoffset: 1; opacity: 1; } 16% { stroke-dashoffset: 0; } 84% { opacity: 1; stroke-dashoffset: 0; } 94%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes pk-l1 { 0%, 11% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; transform: translateY(0); } 16% { opacity: 1; } 19%, 100% { opacity: 0; transform: translateY(56px); } }
@keyframes pk-r2 { 0%, 26% { stroke-dashoffset: 1; opacity: 1; } 38% { stroke-dashoffset: 0; } 84% { opacity: 1; stroke-dashoffset: 0; } 94%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes pk-d2 { 0%, 38% { stroke-dashoffset: 1; opacity: 1; } 42% { stroke-dashoffset: 0; } 84% { opacity: 1; stroke-dashoffset: 0; } 94%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes pk-l2 { 0%, 37% { opacity: 0; transform: translateY(0); } 38% { opacity: 1; transform: translateY(0); } 42% { opacity: 1; } 45%, 100% { opacity: 0; transform: translateY(56px); } }
@keyframes pk-r3 { 0%, 52% { stroke-dashoffset: 1; opacity: 1; } 64% { stroke-dashoffset: 0; } 84% { opacity: 1; stroke-dashoffset: 0; } 94%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes pk-d3 { 0%, 64% { stroke-dashoffset: 1; opacity: 1; } 68% { stroke-dashoffset: 0; } 84% { opacity: 1; stroke-dashoffset: 0; } 94%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes pk-l3 { 0%, 63% { opacity: 0; transform: translateY(0); } 64% { opacity: 1; transform: translateY(0); } 68% { opacity: 1; } 71%, 100% { opacity: 0; transform: translateY(56px); } }

/* the fix, on hover or tap */
html.js .peka-problem__card.is-fix .pk-bar--a { transform: scaleX(.3); transition-delay: 0ms; }
html.js .peka-problem__card.is-fix .pk-bar--b { transform: scaleX(8.4); transition-delay: 120ms; }
html.js .peka-problem__card.is-fix .pk-coin { animation: none; opacity: 0; }
html.js .peka-problem__card.is-fix .pk-box { stroke: var(--fg2); }
html.js .peka-problem__card.is-fix .pk-break { opacity: 0; transform: scale(.4); transition-delay: 0ms; }
html.js .peka-problem__card.is-fix .pk-hit { animation: none; }
html.js .peka-problem__card.is-fix .pk-bridge { stroke-dashoffset: 0; transition-delay: 200ms; }
html.js .peka-problem__card.is-fix .pk-msg--l { animation: pk-talk-l 1.6s var(--ease-settle) infinite; }
html.js .peka-problem__card.is-fix .pk-msg--r { animation: pk-talk-r 1.6s var(--ease-settle) .8s infinite; }
@keyframes pk-talk-l { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(64px); } }
@keyframes pk-talk-r { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(-64px); } }
html.js .peka-problem__card.is-fix .pk-rise, html.js .peka-problem__card.is-fix .pk-drop { animation: none; stroke-dashoffset: 0; opacity: .14; }
html.js .peka-problem__card.is-fix .pk-lesson { animation: none; opacity: 0; }
html.js .peka-problem__card.is-fix .pk-compound { stroke-dashoffset: 0; }
html.js .peka-problem__card.is-fix .pk-peak { opacity: 1; transform: none; transition-delay: 1000ms; }

/* the hint, top right; it turns into the label of the fix */
.pk-hint { position: absolute; top: 1.5rem; right: 1.5rem; margin: 0; display: grid; font: 500 .6875rem/1.3 var(--sans) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3) !important; }
.pk-hint span { grid-area: 1 / 1; justify-self: end; transition: opacity 300ms var(--ease-notice); }
.pk-hint__tap, .pk-hint__fix { opacity: 0; }
@media (hover: none) { .pk-hint__hover { opacity: 0; } .pk-hint__tap { opacity: 1; } }
.peka-problem__card.is-fix .pk-hint span { opacity: 0; }
.peka-problem__card.is-fix .pk-hint .pk-hint__fix { opacity: 1; color: var(--light); }
@media (max-width: 767px) { .pk-hint { top: 1.1rem; right: 1.1rem; } .peka .peka-problem__card { padding-top: 2.75rem; } }

/* problem and fix copy share one place; when the card resolves, the fix replaces the problem */
.pk-swap { display: grid; }
.pk-swap > .pk-v { grid-area: 1 / 1; transition: opacity 320ms var(--ease-exit), transform 320ms var(--ease-exit); }
.pk-swap > .pk-v--f { opacity: 0; transform: translateY(8px); }
.peka-problem__card.is-fix .pk-swap > .pk-v--p { opacity: 0; transform: translateY(-8px); }
.peka-problem__card.is-fix .pk-swap > .pk-v--f { opacity: 1; transform: none; transition: opacity 520ms var(--ease-notice) 160ms, transform 520ms var(--ease-notice) 160ms; }
/* the coral stroke marks the problem; once it is fixed the headline stands without it */
.peka-problem__card .pk-v--f .pk-mark { background: none; }

/* the headline gets a coral highlighter stroke once the card arrives */
.pk-mark { color: inherit; padding: 0 .08em; background: linear-gradient(var(--signal), var(--signal)) 0 92% / 100% .46em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html.js .peka-problem__card .pk-mark { background-size: 0 .46em; transition: background-size 700ms var(--ease-settle) 450ms; }
html.js .peka-problem__card.is-in .pk-mark { background-size: 100% .46em; }

@media (prefers-reduced-motion: reduce) {
  .peka-problem__card .pk-coin, .peka-problem__card .pk-msg, .peka-problem__card .pk-hit, .peka-problem__card .pk-lesson { animation: none !important; }
  .peka-problem__card .pk-rise, .peka-problem__card .pk-drop { animation: none !important; stroke-dashoffset: 0; }
}
/* the fix: one closed loop, a signal dot travels it and the start ripples each lap */
.pk-ill--loop { width: 316px; max-width: 100%; margin: 0; }
.pk-ill--loop text { font-size: 13px; fill: var(--fg2); }
.pk-ill--loop .pk-center { font-size: 11px; fill: var(--fg3); letter-spacing: .14em; text-transform: uppercase; }
.pk-ring { fill: none; stroke: var(--line2); stroke-width: 1; }
.pk-node { fill: var(--light); }
.pk-dot { fill: var(--signal); }
.pk-orbit { transform-box: view-box; transform-origin: 176px 112px; }
.pk-pulse { fill: none; stroke: var(--light); stroke-width: 1; transform-box: fill-box; transform-origin: center; opacity: 0; }
.peka-problem__fix.is-in .pk-orbit { animation: pk-spin 6s linear infinite; }
.peka-problem__fix.is-in .pk-pulse { animation: pk-pulse 6s var(--ease-notice) infinite; }
@keyframes pk-spin { to { transform: rotate(360deg); } }
@keyframes pk-pulse { 0% { opacity: .8; transform: scale(1); } 22% { opacity: 0; transform: scale(5); } 100% { opacity: 0; transform: scale(5); } }
@media (min-width: 900px) { .peka-problem__fix { grid-template-columns: 316px auto 1fr; gap: 3rem; } }
@media (max-width: 767px) {
  .peka-problem__card { grid-template-columns: 1fr; padding: 1.1rem 1.1rem 1.2rem; }
  .peka .peka-problem__card .peka-mono { display: none; }
  .pk-ill { max-width: 280px; margin-bottom: .9rem; }
  .pk-ill--loop { width: 280px; }
}

/* framework: the original stacked rings stay (owner's call, 6 Oct). They are perspective discs, not the riak. */
.peka-rings text { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .12em; }
.peka-steps li::before { font-family: var(--sans); font-size: .75rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.peka-steps strong { font-family: var(--display); font-weight: 700; font-size: 1.375rem; letter-spacing: -.02em; }
.peka-steps span { color: var(--fg2); }

/* services (paper band) */
.peka-services .peka-svc::before { font-family: var(--sans); color: var(--ink-fg3); font-size: .75rem; letter-spacing: .08em; }
.peka-services .peka-svc:hover::before { color: var(--ink); }
.peka-services .peka-svc h3 { font-family: var(--display); }
.peka-services .peka-svc p { font-family: var(--sans); font-size: .9375rem; color: var(--ink-fg2); }
/* 07 Cirya: a row like the other six, marked by a live signal and two links */
.peka-services .peka-svc--cirya::before { color: var(--ink); }
.peka-svc__tag { display: flex; align-items: center; gap: .6rem; margin-top: .65rem; font-family: var(--sans); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-fg2); }
.peka-svc__live { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.peka-svc__live::before, .peka-svc__live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--signal); animation: pk-live 2.4s var(--ease-notice) infinite; }
.peka-svc__live::after { animation-delay: 1.2s; }
@keyframes pk-live { from { transform: scale(1); opacity: .7; } to { transform: scale(3.4); opacity: 0; } }
.peka-services .peka-svc .peka-svc__links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1rem; }
.peka-svc__links a { color: var(--ink); font-weight: 600; text-decoration: none; padding-bottom: 2px; background: linear-gradient(currentColor,currentColor) 0 100% / 0 2px no-repeat, linear-gradient(var(--ink-fg3),var(--ink-fg3)) 0 100% / 100% 1px no-repeat; transition: background-size 300ms var(--ease-notice); }
.peka-svc__links a:hover { background-size: 100% 2px, 100% 1px; }
@media (min-width: 800px) { .peka-services .peka-svc--cirya .peka-svc__links { grid-column: 3; margin-top: 0; } }
@media (max-width: 799px) { .peka-services .peka-svc--cirya .peka-svc__links { grid-column: 2; margin-top: .5rem; } }
@media (prefers-reduced-motion: reduce) { .peka-svc__live::before, .peka-svc__live::after { animation: none; } }

/* client marquee: no skew */
html.js .peka-marquee { transform: none; }

/* ---------- Work: editorial grid, full-colour images, the result as a poster figure ----------
   The image "develops" once from a halftone screen when it first comes into view (cause: it arrived).
   Desktop rhythm: 1 feature across, then two halves, then thirds. */
.peka-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.peka-card__img { position: relative; grid-row: 1; grid-column: 1; border-radius: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink-3); }
.peka-card__img a { display: block; position: relative; height: 100%; }
.peka-card__img img { width: 100%; height: 100%; object-fit: cover; }
.peka-card__img a::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background-image: radial-gradient(circle, var(--ink) 40%, transparent 44%); background-size: 6px 6px; }
html.riak .peka-card:not(.is-dev) .peka-card__img a::after { opacity: .85; }
html.riak .peka-card:not(.is-dev) .peka-card__img img { filter: saturate(.15) brightness(.75); }
.peka-card.is-dev .peka-card__img a::after { animation: riak-develop 1100ms var(--ease-notice) both; }
.peka-card.is-dev .peka-card__img img { animation: riak-color 1100ms var(--ease-notice) both; }
@keyframes riak-develop { from { opacity: .85; background-size: 7px 7px; } to { opacity: 0; background-size: 2px 2px; } }
@keyframes riak-color { from { filter: saturate(.15) brightness(.75); } to { filter: none; } }
.peka-card__img .riak-ring { color: #fff; }
.peka-card__client, .peka-card__client a, .peka-card__date { font-family: var(--sans); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; color: var(--fg3); }
.peka .peka-card__title, .peka .peka-card__title a { font-family: var(--display); font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.02; letter-spacing: -.035em; }
.peka-card__title a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; padding-bottom: 3px; transition: background-size 320ms var(--ease-notice); }
.peka-card:hover .peka-card__title a { background-size: 100% 2px; }
.peka-card__metric p { font-family: var(--sans); font-style: normal; font-size: .9375rem; line-height: 1.4; color: var(--fg2); display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin: 0; }
.peka-card__num { font-family: var(--display); font-weight: 800; line-height: .85; letter-spacing: -.045em; color: var(--light); font-variant-numeric: tabular-nums; }
html.js .peka-px .peka-card__img img, html.js .peka-card__img.peka-px img { transform: translate3d(0, calc((var(--p, .5) - .5) * -30px), 0) scale(calc(1.1 * var(--hs))); }
html.js .peka-card:hover .peka-card__img img { --hs: 1.04; }
@media (min-width: 768px) {
  /* the result sits on the image like a film poster */
  .peka-card > .peka-card__metric { grid-row: 1; grid-column: 1; align-self: end; z-index: 2; pointer-events: none; padding: 4rem clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.4rem); background: linear-gradient(0deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.5) 55%, rgba(10,10,10,0) 100%); }
  .peka .peka-card__metric .peka-card__num { font-size: clamp(2.75rem, 4.6vw, 4.25rem); }
  .peka .peka-card__metric .peka-card__label, .peka-card__metric p { color: var(--light); }
  .peka .peka-card__metric .peka-card__label { max-width: 26ch; }
  .peka-work .wp-block-post-template > li:first-child .peka-card__img { aspect-ratio: 16 / 9; }
  .peka-work .wp-block-post-template > li:first-child .peka-card__img img { object-position: 50% 42%; }
  .peka .peka-work .wp-block-post-template > li:first-child .peka-card__title, .peka .peka-work .wp-block-post-template > li:first-child .peka-card__title a { font-size: clamp(2.25rem, 4.6vw, 4.25rem); }
  .peka .peka-work .wp-block-post-template > li:first-child .peka-card__metric .peka-card__num { font-size: clamp(3.5rem, 7vw, 6.5rem); }
  .peka-work .wp-block-post-template.is-layout-grid > li:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .peka-work .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; row-gap: clamp(2.5rem, 4vw, 4rem) !important; }
  .peka-work .wp-block-post-template.is-layout-grid > li { grid-column: span 2; }
  .peka-work .wp-block-post-template.is-layout-grid > li:nth-child(2), .peka-work .wp-block-post-template.is-layout-grid > li:nth-child(3) { grid-column: span 3; }
  .peka-work .wp-block-post-template.is-layout-grid > li:first-child { grid-column: 1 / -1; }
  .peka .peka-work .wp-block-post-template > li:nth-child(n+4) .peka-card__title, .peka .peka-work .wp-block-post-template > li:nth-child(n+4) .peka-card__title a { font-size: clamp(1.5rem, 2.1vw, 2rem); }
  .peka .peka-work .wp-block-post-template > li:nth-child(n+4) .peka-card__metric .peka-card__num { font-size: clamp(2.25rem, 3.2vw, 3rem); }
  .peka-work .wp-block-post-template > li:nth-child(n+4) .peka-card__img { aspect-ratio: 4 / 5; }
}
@media (max-width: 767px) {
  .peka .peka-work--compact .peka-card { border-top: 1px solid var(--line-dark); }
  .peka .peka-work--compact .peka-card__img { aspect-ratio: 1; }
  .peka .peka-work--compact .peka-card__short:not(:empty) { font-family: var(--sans); font-style: normal; font-size: .9375rem; color: var(--fg2); }
  .peka .peka-work--compact .peka-card__title, .peka .peka-work--compact .peka-card__title a { font-size: 1.125rem; letter-spacing: -.02em; }
  .peka .peka-work--compact .peka-card__metric .peka-card__num { font-size: 1.5rem; }
}


/* ---------- Proof reel (work lists): a sticky stage and the case list ----------
   Desktop: hovering or scrolling to a case opens its image as a circle from the list side, and the result
   counts up at poster size. Phones: swipeable poster cards with a progress line. Built by riak.js from the
   query loop, so the cases stay editable in WordPress. */
.pk-reel { display: none; }
@media (min-width: 1024px) {
  html.riak .peka-work.is-reel > .wp-block-post-template { display: none; }
  .pk-reel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .pk-reel__stage { position: sticky; top: calc(var(--hdr-s, 76px) + 1.5rem); height: min(74vh, 700px); overflow: hidden; background: var(--ink-3); isolation: isolate; }
  .pk-reel__frame { position: absolute; inset: 0; overflow: hidden; }
  .pk-reel__frame img { width: 100%; height: 100%; object-fit: cover; }
  .pk-reel__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background-image: radial-gradient(circle, var(--ink) 40%, transparent 44%); background-size: 6px 6px; }
  .pk-reel__frame.is-entering { animation: pk-reel-in 760ms var(--ease-settle) both; }
  .pk-reel__frame.is-entering img { animation: pk-reel-zoom 1600ms var(--ease-notice) both; }
  .pk-reel__frame.is-entering::after { animation: riak-develop 1100ms var(--ease-notice) both; }
  @keyframes pk-reel-in { from { clip-path: circle(0px at var(--rx, 100%) var(--ry, 50%)); } to { clip-path: circle(160% at var(--rx, 100%) var(--ry, 50%)); } }
  @keyframes pk-reel-zoom { from { transform: scale(1.14); } to { transform: scale(1.02); } }
  .pk-reel__shade { position: absolute; inset: 0; z-index: 50; pointer-events: none; background: linear-gradient(0deg, rgba(10,10,10,.96) 0%, rgba(10,10,10,.82) 30%, rgba(10,10,10,.3) 58%, rgba(10,10,10,0) 75%), linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,0) 22%); }
  .pk-reel__hud { position: absolute; inset: 0; z-index: 51; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.25rem, 2.4vw, 2.25rem); pointer-events: none; }
  .pk-reel__top { display: flex; justify-content: space-between; gap: 1rem; font: 500 .6875rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.78); font-variant-numeric: tabular-nums; }
  .pk-reel__top b { color: var(--light); font-weight: 600; }
  .pk-reel__num { display: block; font: 800 clamp(5rem, 9.5vw, 9.5rem)/.82 var(--display); letter-spacing: -.055em; color: var(--light); font-variant-numeric: tabular-nums; }
  .pk-reel__num.is-text { font-size: clamp(2.25rem, 3.6vw, 3.5rem); line-height: 1; letter-spacing: -.035em; max-width: 14ch; }
  .pk-reel__label { margin: .9rem 0 0; font-size: 1.125rem; line-height: 1.45; color: rgba(255,255,255,.82); max-width: 30ch; }
  .pk-reel__go { pointer-events: auto; margin-top: 1.4rem; height: 48px; min-height: 48px; align-items: center; flex: none; width: auto; }
  .pk-reel__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark); counter-reset: none; }
  .pk-reel__item a { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .35rem; align-items: baseline; padding: 2rem 0; border-bottom: 1px solid var(--line-dark); color: inherit; text-decoration: none; }
  .pk-reel__i { grid-row: 1 / span 2; font: 500 .75rem/1.9 var(--sans); letter-spacing: .08em; color: var(--mute); font-variant-numeric: tabular-nums; transition: color 300ms; }
  .pk-reel__c { grid-column: 2; font: 500 .6875rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--fg3); }
  .pk-reel__t { grid-column: 2; font: 700 clamp(1.5rem, 2.3vw, 2.25rem)/1.06 var(--display); letter-spacing: -.03em; color: rgba(255,255,255,.34); transition: color 300ms var(--ease-notice), transform 300ms var(--ease-notice); }
  .pk-reel__m { grid-column: 3; grid-row: 1 / span 2; align-self: center; font: 800 1.5rem/1 var(--display); letter-spacing: -.03em; color: rgba(255,255,255,.34); font-variant-numeric: tabular-nums; transition: color 300ms; }
  .pk-reel__item a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--light); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease-notice); }
  .pk-reel__item.is-active .pk-reel__t, .pk-reel__item.is-active .pk-reel__m { color: var(--light); }
  .pk-reel__item.is-active .pk-reel__t { transform: translateX(6px); }
  .pk-reel__item.is-active .pk-reel__i { color: var(--signal); }
  .pk-reel__item.is-active a::after { transform: scaleX(1); }
}
@media (max-width: 767px) {
  .peka .peka-work--compact .wp-block-post-template { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * clamp(1.25rem, 4vw, 3rem)); padding-inline: clamp(1.25rem, 4vw, 3rem); scroll-padding-inline: clamp(1.25rem, 4vw, 3rem); scrollbar-width: none; overscroll-behavior-x: contain; }
  .peka .peka-work--compact .wp-block-post-template::-webkit-scrollbar { display: none; }
  .peka .peka-work--compact .wp-block-post-template > li { flex: 0 0 84%; scroll-snap-align: start; }
  .peka .peka-work--compact .peka-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; padding: 0; border: 0; }
  .peka .peka-work--compact .peka-card > * { grid-column: 1; }
  .peka .peka-work--compact .peka-card__img { grid-row: 1; aspect-ratio: 4 / 5; padding: 0; }
  .peka .peka-work--compact .peka-card > .peka-card__metric { display: block !important; grid-row: 1; align-self: end; z-index: 2; pointer-events: none; padding: 3.5rem 1rem 1rem; background: linear-gradient(0deg, rgba(10,10,10,.9), rgba(10,10,10,0)); }
  .peka .peka-work--compact .peka-card__metric .peka-card__num { font-size: 3.5rem; }
  .peka .peka-work--compact .peka-card__metric p, .peka .peka-work--compact .peka-card__metric .peka-card__label { color: var(--light); font-size: .875rem; }
  .peka .peka-work--compact .peka-card__short { display: none !important; }
  .peka .peka-work--compact .peka-card__title, .peka .peka-work--compact .peka-card__title a { font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; }
  .peka .peka-work--compact li:last-child .peka-card { border: 0; }
  .pk-swipe { display: flex; align-items: center; gap: .9rem; margin-top: 1.1rem; font: 500 .75rem/1 var(--sans); letter-spacing: .08em; color: var(--fg3); font-variant-numeric: tabular-nums; }
  .pk-swipe__bar { flex: 1; height: 1px; background: var(--line-dark); position: relative; }
  .pk-swipe__bar i { position: absolute; left: 0; top: -.5px; height: 2px; background: var(--light); width: var(--w, 20%); transform: translateX(var(--x, 0%)); }
}
@media (min-width: 768px) { .pk-swipe { display: none; } }

/* ---------- Film bands ---------- */
.peka-film h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.04em; }
.peka-film__meta { font-family: var(--sans); font-size: .875rem; letter-spacing: .01em; color: var(--fg2); }
.peka-film .is-style-eyebrow::before { border: 0; background: var(--signal); }
.peka-film__play { position: absolute; z-index: 3; right: clamp(1.25rem, 4vw, 3rem); bottom: 1.25rem; display: none; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border: 1px solid rgba(255,255,255,.28); background: rgba(10,10,10,.4); color: var(--light); font: 500 .875rem/1 var(--sans); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; }
.peka-film.is-poster .peka-film__play { display: inline-flex; }

/* ---------- Case study ---------- */
.peka-case__hero .wp-block-post-terms, .peka-case__hero .wp-block-post-terms a { font-family: var(--sans); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; color: var(--fg3); }
.peka-case__hero .wp-block-post-terms.peka-case__client, .peka-case__hero .wp-block-post-terms.peka-case__client a { color: var(--light); }
.peka-case__hero .wp-block-post-excerpt { font-family: var(--sans); font-style: normal; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.4; color: var(--fg2); max-width: 36ch; }
.peka-case__cover { border-radius: 0; padding: 8px; border: 1px solid var(--line-dark); aspect-ratio: auto; }
.peka-case__cover img { aspect-ratio: 16 / 9; }
.peka-case__body h3, .peka-case__col h3 { font-family: var(--sans); font-size: .6875rem; font-weight: 500; letter-spacing: .18em; color: var(--fg3); }
.peka-metrics h3, .peka-metric { font-family: var(--display); font-style: normal; font-weight: 800; letter-spacing: -.04em; color: var(--light); font-variant-numeric: tabular-nums; }
.peka-metrics h3 em, .peka-metric em { color: var(--light); font-style: normal; }
.peka-metrics p { font-family: var(--sans); font-size: .875rem; color: var(--fg2); }
.peka-case .peka-metrics::before { font-family: var(--sans); font-size: .6875rem; letter-spacing: .18em; color: var(--fg3); }
.peka-case__gallery .wp-block-image { border-radius: 0; }

/* ---------- Insights ---------- */
.peka-prose blockquote { font-family: var(--display); font-style: normal; font-weight: 700; font-size: 1.375rem; letter-spacing: -.015em; border-left: 1px solid var(--line2); }
.peka-prose .wp-block-image { border-radius: 0; }
.peka-page__head .peka-eyebrow, .peka-page__head .wp-block-post-date, .peka-post__meta, .peka .peka-prose .wp-block-table thead th { font-family: var(--sans); }
.peka-progress { display: none; background: var(--light); }
.single-post .peka-progress { display: block; }

/* ---------- Page heads: one hard left edge ---------- */
.peka .peka-page__head > .peka-lede { margin-left: max(0px, calc((100% - 1280px) / 2)) !important; margin-right: auto !important; }
.peka main > .wp-block-group.peka-prose, .peka .entry-content > .wp-block-group.peka-prose, .peka .wp-block-post-content > .wp-block-group.peka-prose { max-width: none; }
.peka .wp-block-group.peka-prose.is-layout-constrained > * { max-width: 66ch; margin-left: max(0px, calc((100% - 1280px) / 2)) !important; margin-right: auto !important; }

/* ---------- CTA ---------- */
.peka-cta .peka-riak { z-index: -1; }
.peka .peka-cta h2 { font-size: clamp(2.75rem, 6.4vw, 6rem); line-height: .95; letter-spacing: -.045em; }
.peka-cta__contact .peka-status { margin-top: .5rem; }
.peka-cta__riak { position: absolute !important; z-index: -1; right: -12%; top: 50%; width: min(760px, 90vw) !important; max-width: none !important; aspect-ratio: 1; transform: translateY(-50%); margin: 0 !important; color: var(--light); opacity: .09; pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%); mask-image: linear-gradient(to right, transparent 0%, #000 45%); }
.peka-cta__contact { font-family: var(--sans); font-size: .9375rem; color: var(--fg3); }
@media (max-width: 767px) {
  .peka .peka-cta__btns .is-style-outline-light .wp-block-button__link { background: transparent; color: var(--light); border: 1px solid var(--line2); font-weight: 500; }
  .peka .peka-cta__btns .wp-block-button:not(.is-style-outline-light) .wp-block-button__link { background: var(--light); color: var(--ink); border: 1px solid var(--light); }
  .peka-cta__btns .wp-block-button.is-style-outline-light { order: 0; }
}

/* ---------- Contact form: underline fields, circle meter ---------- */
.peka-form { background: transparent; border: 1px solid var(--line-dark); border-radius: 0; gap: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); }
.peka-form *, .peka-form *::before, .peka-form *::after { box-sizing: border-box; }
.peka-form__row { gap: 1.5rem; }
.peka-form__row > label, .peka-form > label { min-width: 0; }
.peka-form label { font-family: var(--sans); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; color: var(--fg3); gap: .25rem; transition: color 160ms; }
.peka-form label:focus-within { color: var(--light); }
.peka-form input, .peka-form select, .peka-form textarea { font-family: var(--sans); font-size: 1.0625rem; color: var(--light); background: transparent; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; padding: .75rem 0; min-width: 0; max-width: 100%; }
.peka-form input::placeholder, .peka-form textarea::placeholder { color: var(--mute); }
.peka-form input:focus, .peka-form select:focus, .peka-form textarea:focus { border-color: var(--signal); box-shadow: 0 1px 0 0 var(--signal); outline: none; }
.peka-form select { background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%; padding-right: 1.5rem; }
.peka-form select option { background: var(--ink-2); color: var(--light); }
.peka-form textarea { min-height: 120px; }
.peka-form__meter { display: flex; align-items: center; gap: .9rem; color: var(--fg2); font-size: .875rem; min-height: 44px; }
.peka-form__meter svg { width: 40px; height: 40px; flex: none; overflow: visible; }
.peka-form__meter circle { fill: none; stroke: var(--light); stroke-width: 1.2; opacity: .18; transition: opacity 300ms var(--ease-notice); }
.peka-form__meter circle.on { opacity: 1; animation: riak-draw 600ms var(--ease-notice); }
@keyframes riak-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.peka-form__foot button { margin: 0; }
.peka-form__status { font-family: var(--sans); font-size: .875rem; }
.peka-form__status.is-ok { color: var(--light); }
.peka-form__status.is-err { color: var(--signal); }

/* ---------- Footer ---------- */
.peka-footer__links a { color: var(--fg2); text-decoration: none; display: inline-block; padding: .35rem 0; transition: color 160ms; }
.peka-footer__links a:hover { color: var(--light); }
.peka-footer__base .peka-mono { color: var(--fg3); }
@media (max-width: 767px) { .peka-footer__links { gap: 0; } .peka-footer__links a { padding: .7rem 0; } }

/* ---------- Bottom action bar (phones): one brief button plus WhatsApp, after the hero ---------- */
.peka-actbar { display: none; }
@media (max-width: 767px) {
  .peka-actbar--en { display: grid; }
  .peka-lang-id .peka-actbar--en { display: none; }
  .peka-lang-id .peka-actbar--id { display: grid; }
  .peka-actbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; grid-template-columns: 1fr 52px; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(34,34,34,.6), rgba(12,12,12,.55)); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    transform: translateY(110%); transition: transform 260ms var(--ease-exit); }
  .peka-wa-on .peka-actbar { transform: none; transition: transform 380ms var(--ease-notice); }
  .peka-actbar__brief { min-height: 52px; width: 100%; }
  .peka-actbar__wa { display: grid; place-items: center; min-height: 52px; border: 1px solid var(--line2); color: var(--light); }
  .peka-actbar__wa svg { width: 22px; height: 22px; }
}

/* ---------- Cirya page: token alignment ---------- */
.peka-cirya__principle { border-radius: 0; }
.peka-cirya__principle:hover { border-color: var(--line2); }
.peka-cirya__next { font-family: var(--sans); border-left: 1px solid var(--line2); }
.peka-cirya__next strong { color: var(--light); }
.peka-cirya__facts p { font-family: var(--sans); }
.peka-bento__tile { border-radius: 2px; background: #121212; border-color: rgba(255,255,255,.08); }
.peka-bento__tile::before { display: none; }
.peka .peka-bento__tile > .is-style-eyebrow::before { background: transparent; }
.peka-bento__live-num, .peka-bento__formula-res { font-family: var(--display); font-weight: 800; }
.peka-bento__spark .line { stroke: var(--light); }
.peka-bento__formula b { color: var(--light); }
.peka-bento__bar { background: var(--light); border-radius: 0; }
.peka-bento__note-icon { background: var(--light); }
.peka-bento__pulse { animation: none; }
.peka-bento__formula, .peka-bento__key, .peka-bento__note { border-radius: 2px; }

/* ---------- Page transition: a circle opens from the click point (View Transitions, Chromium) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: riak-vt 600ms var(--ease-settle) both; }
@keyframes riak-vt { from { clip-path: circle(0px at var(--vtx, 50%) var(--vty, 50%)); } to { clip-path: circle(150% at var(--vtx, 50%) var(--vty, 50%)); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root) { animation: none; }
  .peka-nav .wp-block-navigation__responsive-container.is-menu-open, .peka-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item, .wp-block-navigation__responsive-container.is-menu-open .peka-menu-foot { animation: none; opacity: 1; transform: none; }
  .peka-hero__film video { display: none; }
  .riak-ring { display: none; }
}