/* ==========================================================================
   MyCabin About Page Pack — frontend.css
   Clean-room build from source-design/about-original.zip. Every rule is
   scoped under .pp-about-clean (Page Pack Spec §5). Single breakpoint,
   min-width: 900px, matching the source exactly (styles.css §15).
   ========================================================================== */

.pp-about-clean {
  --pp-ink:          #27272C;
  --pp-bone:         #FFFFFF;
  --pp-beige:        #FBF6F3;
  --pp-olive:        #6E5C3C;
  --pp-accent:       #917EBC;
  --pp-accent-soft:  #CDCBFF;
  --pp-tint:         #E6E6FF;
  --pp-surface:      var(--pp-beige);

  --pp-stone:    color-mix(in oklab, var(--pp-ink) 11%, var(--pp-bone));
  --pp-ink-hair: color-mix(in oklab, var(--pp-ink) 7%,  var(--pp-bone));
  --pp-ink-line: color-mix(in oklab, var(--pp-ink) 13%, var(--pp-bone));
  --pp-tint-line:        color-mix(in oklab, var(--pp-accent) 18%, var(--pp-tint));
  --pp-tint-line-strong: color-mix(in oklab, var(--pp-accent) 34%, var(--pp-tint));

  --pp-ink-72:   color-mix(in oklab, var(--pp-ink) 72%, transparent);
  --pp-ink-56:   color-mix(in oklab, var(--pp-ink) 65%, transparent);
  --pp-ink-28:   color-mix(in oklab, var(--pp-ink) 28%, transparent);
  --pp-bone-80:  color-mix(in oklab, var(--pp-bone) 80%, transparent);
  --pp-bone-60:  color-mix(in oklab, var(--pp-bone) 60%, transparent);
  --pp-bone-line: color-mix(in oklab, var(--pp-bone) 22%, transparent);
  --pp-scrim: var(--pp-ink);

  --pp-maxw:   1280px;
  --pp-gutter: clamp(18px, 4vw, 40px);
  --pp-sec-y-p: clamp(48px, 7vw, 104px);
  --pp-rail-pad: max(var(--pp-gutter), calc((100% - var(--pp-maxw)) / 2 + var(--pp-gutter)));
  /* This pack owns no header (a separate, fixed-position Site Part does —
     Page Pack Spec's header/footer exclusion), but the header still
     physically overlays the top of the real page regardless of which
     component renders it. Needed here so this page's own sticky
     "What we do differently" heading (below) can clear it, exactly as
     the source's own --hdr-h-aware sticky offset does. Same value as the
     source's shared :root token. */
  --pp-hdr-h:  clamp(58px, 7vw, 74px);

  --pp-r-pill: 999px;
  --pp-r-lg:   10px;

  --pp-ease:   cubic-bezier(.22, 1, .36, 1);
  --pp-t-slow: .35s;

  font-family: "Poppins", "Helvetica Neue", Helvetica, sans-serif;
  color: var(--pp-ink);
  background: var(--pp-bone);
  /* The source clips horizontal overflow with `overflow-x:hidden` on
     <body> itself — safe there only because <body> is the document's own
     root scroller, whose overflow the browser propagates to the viewport
     instead of turning <body> into an inner scroll container. This root
     is an ordinary nested <div> in WordPress's real template, not the
     root scroller, so the same single-axis `overflow-x:hidden` here
     would trigger a real CSS spec quirk: when one axis is non-visible
     and the other is left at its default `visible`, browsers silently
     resolve the visible axis's USED value to `auto` — invisible to a
     local static-HTML test (this div's height is never constrained by
     anything there, so nothing ever overflows it to reveal the
     scrollbar) but a real, confirmed bug once a real WordPress theme's
     own template CSS gives this element's flex/grid ancestor a
     constrained height, which makes it become an unwanted *vertical*
     scroll container of its own — breaking `position:sticky` for every
     descendant (the sticky containing block becomes this div instead of
     the real document) and producing the exact "nested/double
     scrolling" symptom real staging exposed. `overflow: clip` clips the
     same horizontal overflow without ever participating in that
     visible/auto pairing rule. */
  overflow-x: clip;
}

.pp-about-clean, .pp-about-clean *, .pp-about-clean ::before, .pp-about-clean ::after {
  box-sizing: border-box;
}

/* Fine paper grain over the whole page, matching the source's own
   body::after exactly (scoped to this pack's own root instead of
   literally touching <body>, which Page Packs never do — Page Pack Spec
   §5). Very low opacity — it stops large flat areas of bone/tint from
   looking like a flat screen; most noticeable against a flat colour
   band like Vision/Mission/Values' lavender tint, where its absence
   was flagged on real staging. position:fixed (matching source) so it
   covers the whole viewport regardless of scroll position, not just
   this element's own box. */
.pp-about-clean::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .05;
  background-image: radial-gradient(color-mix(in oklab, var(--pp-ink) 55%, transparent) .5px, transparent .5px);
  background-size: 3px 3px;
}

.pp-about-clean h1, .pp-about-clean h2, .pp-about-clean h3, .pp-about-clean p, .pp-about-clean blockquote, .pp-about-clean figure {
  margin: 0;
}
.pp-about-clean a { color: var(--pp-ink); text-decoration: none; }
.pp-about-clean a:hover { color: var(--pp-accent); }
.pp-about-clean img { max-width: 100%; }

/* ==========================================================================
   WordPress block-gap / flow-margin protection
   --------------------------------------------------------------------------
   Every container below owns its own child spacing entirely through flex
   `gap` (never margin) — a stray WordPress-injected margin-block-start on
   any non-first child here is never legitimate design spacing, so it is
   safe and correct to zero it unconditionally. Verified against a local
   WordPress Flow/blockGap simulation harness before this pack's first
   staging ZIP (see docs/CLAUDE-DESIGN-TO-GUTENBERG-MASTER-WORKFLOW.md §18).
   ========================================================================== */
.pp-about-clean > *,
.pp-about-clean .pp-marquee__track > *,
.pp-about-clean .pp-marquee__group > *,
.pp-about-clean .pp-stats > *,
.pp-about-clean .pp-stat > *,
.pp-about-clean .pp-usp-row > *,
.pp-about-clean .pp-usp-list > *,
.pp-about-clean .pp-usp-item__top > *,
.pp-about-clean .pp-vmv > *,
.pp-about-clean .pp-vmv-card > *,
.pp-about-clean .pp-timeline-row > *,
.pp-about-clean .pp-founder > *,
.pp-about-clean .pp-founder__body > *,
.pp-about-clean .pp-production__head > *,
.pp-about-clean .pp-production__copy > *,
.pp-about-clean .pp-people-head .pp-wrap > *,
.pp-about-clean .pp-timeline .pp-wrap > *,
.pp-about-clean .pp-rail > *,
.pp-about-clean .pp-lead-card > *,
.pp-about-clean .pp-local-row > *,
.pp-about-clean .pp-local-cards > *,
.pp-about-clean .pp-local-card > *,
.pp-about-clean .pp-dark-cta > *,
.pp-about-clean .pp-dark-cta__copy > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
.pp-about-clean .wp-block-buttons > .wp-block-button {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.pp-about-clean .pp-wrap {
  max-width: var(--pp-maxw);
  margin: 0 auto;
  padding-inline: var(--pp-gutter);
}
.pp-about-clean .pp-bg-paper { background: var(--pp-bone); }
.pp-about-clean .pp-clip { overflow: hidden; }
.pp-about-clean .pp-no-bar { scrollbar-width: none; -ms-overflow-style: none; }
.pp-about-clean .pp-no-bar::-webkit-scrollbar { display: none; }

.pp-about-clean .pp-h1 {
  font-size: clamp(34px, 8.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -.026em;
  font-weight: 500;
}
.pp-about-clean .pp-h2 { font-size: clamp(30px, 6.4vw, 58px); line-height: 1.04; letter-spacing: -.022em; font-weight: 500; }
.pp-about-clean .pp-h2--p { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.06; }
.pp-about-clean .pp-mw-16 { max-width: 16ch; }

.pp-about-clean .pp-eyebrow {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pp-ink-56);
}
.pp-about-clean .pp-eyebrow--plain {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 300;
  font-size: clamp(15px, 3.4vw, 17px);
}

/* --- Links ---------------------------------------------------------------
   .pp-inline-link is a plain static underline (border-bottom), NOT the
   animated hover-fill wipe-in underline used elsewhere on the wider
   MyCabin site (that component was verified NOT to exist on this page's
   own source and is intentionally not ported here). */
.pp-about-clean .pp-inline-link a {
  display: inline-block;
  border-bottom: 1.5px solid var(--pp-ink);
  padding-bottom: 1px;
}
.pp-about-clean .pp-founder-section--olive .pp-inline-link a {
  color: var(--pp-bone);
  border-bottom-color: var(--pp-bone-line);
}

/* --- Buttons ---------------------------------------------------------------
   Reproduces .btn / .btn--light / .btn--ghost / .btn--48 from the source. */
.pp-about-clean .wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 38px;
  padding: 0 19px;
  border: 0;
  border-radius: var(--pp-r-pill);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--pp-t-slow), color var(--pp-t-slow), border-color var(--pp-t-slow);
}
.pp-about-clean .pp-btn-light .wp-block-button__link { background: var(--pp-bone); color: var(--pp-ink); }
.pp-about-clean .pp-btn-light .wp-block-button__link:hover { background: var(--pp-accent-soft); color: var(--pp-ink); }
.pp-about-clean .pp-btn-ghost .wp-block-button__link {
  background: color-mix(in oklab, var(--pp-scrim) 30%, transparent);
  color: var(--pp-bone);
  border: 1px solid var(--pp-bone-60);
}
.pp-about-clean .pp-btn-ghost .wp-block-button__link:hover {
  background: color-mix(in oklab, var(--pp-bone) 14%, transparent);
  border-color: var(--pp-bone);
  color: var(--pp-bone);
}

/* --- Round icon buttons (leadership rail arrows) --------------------------- */
.pp-about-clean .pp-iconbtn {
  position: relative;
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  border-radius: var(--pp-r-pill);
  border: 1px solid var(--pp-ink-line);
  background: transparent;
  color: var(--pp-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--pp-t-slow), color var(--pp-t-slow), border-color var(--pp-t-slow);
}
.pp-about-clean .pp-iconbtn:hover { background: var(--pp-ink); color: var(--pp-bone); border-color: var(--pp-ink); }
.pp-about-clean .pp-iconbtn:disabled { opacity: .35; cursor: default; }
.pp-about-clean .pp-iconbtn:disabled:hover { background: transparent; color: var(--pp-ink); border-color: var(--pp-ink-line); }
.pp-about-clean .pp-iconbtn--44 { width: 35px; height: 35px; }

/* ==========================================================================
   Page-section-separator lines (source: various section-container
   border-top/border-bottom, migrated to real core/separator siblings —
   see docs/CLAUDE-DESIGN-TO-GUTENBERG-MASTER-WORKFLOW.md §21). All render
   at their real, full-bleed width (the shared blanket rule below, since
   this pack has no editor.css-only variant, is applied here directly). */
.pp-about-clean .pp-section-rule {
  border: none;
  border-top: 1px solid var(--pp-ink-hair);
  height: 0;
  margin: 0 !important;
}
/* The source's .vmv-section itself declares border-block:1px solid
   var(--tint-line) (its own top AND bottom edge), a distinct, more
   saturated accent color from the plain --ink-hair used by every other
   section boundary on this page. Since a shared boundary only needs one
   native separator (the previous section's bottom edge and the next
   section's top edge occupy the same visual position), the two
   separators immediately adjacent to VMV -- USP/VMV and VMV/Timeline --
   get this modifier to carry VMV's own border color instead of the
   default ink-hair the other four section-rule separators correctly use. */
.pp-about-clean .pp-section-rule--tint {
  border-top-color: var(--pp-tint-line);
}
/* Maximally explicit, not just width/opacity: real WordPress core CSS for
   `.wp-block-separator` (never loaded by this pack's own local test
   harnesses, so none of this is verifiable there — Master Workflow §21)
   sets more than just a centered 100px width and .4 opacity on the
   default/no-custom-color style — real staging on this pack specifically
   raised a "some dividers read as missing" report that no local
   measurement could reproduce or rule out a specific cause for. Every
   property below is redundant with each separator's own more specific
   rule in ordinary circumstances; declared again here, on the blanket
   selector, with !important, so no single missed property or specificity
   edge case on any one of this pack's 15 separators can let a real
   WordPress default win. */
.pp-about-clean .wp-block-separator {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  opacity: 1 !important;
  border-style: solid !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  float: none !important;
}

/* ==========================================================================
   Scroll-reveal (fade up once, first time in view) + count-up numbers
   Toggled by frontend.js via IntersectionObserver; .pp-in-view is the only
   state it ever adds, never removed, so a reveal never re-triggers.
   ========================================================================== */
.pp-about-clean .pp-io-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--pp-ease), transform .8s var(--pp-ease);
}
.pp-about-clean .pp-io-fade.pp-in-view { opacity: 1; transform: none; }
/* The stats section sits directly on the same olive block as the founder
   story above it, so its own fade-up would visibly double-flash on the
   same colour — kept in .pp-io-fade only so the shared observer still
   triggers the number count-up; the fade itself is neutralised. */
.pp-about-clean .pp-stats-section.pp-io-fade { opacity: 1; transform: none; transition: none; }


/* ==========================================================================
   Hero
   ========================================================================== */
.pp-about-clean .pp-page-hero {
  position: relative;
  overflow: hidden;
  height: clamp(420px, 60vw, 500px);
}
.pp-about-clean .pp-hero-photo,
.pp-about-clean .pp-hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
.pp-about-clean .pp-hero-photo img { object-position: 50% 62%; }
/* Source defines a generic light/bone .page-hero__scrim, then overrides it
   specifically for .page-hero--about/--how with a dark/ink one instead —
   "both hero photos are bright... the light-scrim-under-dark-text pattern
   doesn't reliably read on either. Dark scrim + light text is the more
   robust pairing." This page has only the --about variant, so the dark
   override is reproduced directly (the light base rule doesn't apply to
   any hero on this page and is intentionally not ported). Real staging
   caught the bug: an earlier build here ported the generic light gradient
   instead of this override, washing the white heading/subtitle out to
   near-illegibility against a light fade instead of a dark one. */
.pp-about-clean .pp-page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  margin-block: 0 !important;
  background: linear-gradient(180deg, transparent 25%, color-mix(in oklab, var(--pp-ink) 82%, transparent) 88%);
}
.pp-about-clean .pp-page-hero__inner {
  position: relative;
  z-index: 3;
  height: 100%;
  max-width: var(--pp-maxw);
  margin: 0 auto;
  padding: clamp(28px, 8vw, 64px) var(--pp-gutter);
  display: flex;
  align-items: flex-end;
  /* This wrapper's own box spans the hero's full height/width (needed to
     max-width-constrain and bottom-align its actual content), but has no
     visible styling of its own -- .pp-page-hero__text is what's visually
     present, sized to its own content, not to this box. With no
     pointer-events restriction, this box was silently intercepting every
     click across the ENTIRE hero (verified: document.elementFromPoint()
     over the photo, well outside the visible text's own bounds, resolved
     to this element, not the photo underneath), making the real editor's
     core/image hero photo behind it unclickable/unselectable anywhere
     except accidentally missing this box. Neither this wrapper nor
     .pp-page-hero__text has any click-driven behavior of its own
     (confirmed: no frontend.js interaction targets the hero), so passing
     pointer events through the empty area and re-enabling them only on
     the actual visible text is a pure hit-testing change with zero visual
     or frontend-behavior effect. */
  pointer-events: none;
}
.pp-about-clean .pp-page-hero__text { display: flex; flex-direction: column; gap: clamp(16px, 4vw, 24px); pointer-events: auto; }
/* The source's hero heading is NOT built from the shared .h1 utility class
   (that's a distinct, smaller, generically-reused heading style — used
   correctly elsewhere on this page) — it's its own dedicated rule
   (.page-hero h1), with its own larger size, tighter tracking, and a
   16ch max-width so the heading wraps onto 2-3 short lines instead of
   running nearly the full hero width. Real staging caught the bug: an
   earlier build applied the shared .pp-h1 utility here instead, capping
   the heading at 46px and losing the 16ch wrap constraint entirely. */
.pp-about-clean .pp-page-hero__title {
  font-size: clamp(32px, 9vw, 76px);
  line-height: 1.06;
  letter-spacing: -.04em;
  font-weight: 500;
  max-width: 16ch;
  color: var(--pp-bone);
}
.pp-about-clean .pp-page-hero__text p { font-size: clamp(14px, 2.4vw, 18px); line-height: 1.65; color: var(--pp-ink-72); font-weight: 300; max-width: 480px; color: var(--pp-bone-80); }


/* ==========================================================================
   Press marquee
   ========================================================================== */
.pp-about-clean .pp-press-head { padding-top: clamp(28px, 6vw, 44px); }
.pp-about-clean .pp-marquee { position: relative; padding: clamp(28px, 6vw, 44px) 0; margin-block: 0 !important; }
.pp-about-clean .pp-marquee__track {
  display: flex;
  width: max-content;
  animation: pp-about-marquee 32s linear infinite;
}
.pp-about-clean .pp-marquee:hover .pp-marquee__track { animation-play-state: paused; }
@keyframes pp-about-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pp-about-clean .pp-marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(40px, 10vw, 88px);
  padding-right: clamp(40px, 10vw, 88px);
  flex: 0 0 auto;
}
.pp-about-clean .pp-press-logo,
.pp-about-clean .pp-press-logo img {
  height: clamp(20px, 4.2vw, 30px);
  width: auto;
  display: block;
  flex: 0 0 auto;
  opacity: .55;
}
.pp-about-clean .wp-block-image.pp-press-logo { margin: 0; }
.pp-about-clean .pp-press-logo--dwell,
.pp-about-clean .pp-press-logo--dwell img           { height: calc(clamp(20px, 4.2vw, 30px) * 2.0); }
.pp-about-clean .pp-press-logo--designboom,
.pp-about-clean .pp-press-logo--designboom img       { height: calc(clamp(20px, 4.2vw, 30px) * 1.52); }
.pp-about-clean .pp-press-logo--house-beautiful,
.pp-about-clean .pp-press-logo--house-beautiful img  { height: calc(clamp(20px, 4.2vw, 30px) * 1.74); }
.pp-about-clean .pp-press-logo--yanko-design,
.pp-about-clean .pp-press-logo--yanko-design img     { height: calc(clamp(20px, 4.2vw, 30px) * 1.03); }
.pp-about-clean .pp-press-logo--delfi,
.pp-about-clean .pp-press-logo--delfi img            { height: calc(clamp(20px, 4.2vw, 30px) * 1.72); }
.pp-about-clean .pp-press-logo--dienas-bizness,
.pp-about-clean .pp-press-logo--dienas-bizness img   { height: calc(clamp(20px, 4.2vw, 30px) * 2.2); }


/* ==========================================================================
   Founder's story
   ========================================================================== */
.pp-about-clean .pp-founder-section { padding: var(--pp-sec-y-p) 0; background: var(--pp-bone); }
.pp-about-clean .pp-founder-section--olive { background: var(--pp-olive); }
.pp-about-clean .pp-founder-section--olive .pp-founder__body blockquote { color: var(--pp-bone); }
.pp-about-clean .pp-founder-section--olive .pp-founder__attr { color: var(--pp-bone-60); }
.pp-about-clean .pp-founder-section--olive .pp-founder__copy p { color: var(--pp-bone-80); }

.pp-about-clean .pp-founder { display: flex; flex-wrap: wrap; gap: clamp(28px, 10vw, 80px); }
.pp-about-clean .pp-founder__photo { position: relative; flex: 1 1 300px; aspect-ratio: 3 / 4; border-radius: var(--pp-r-lg); overflow: hidden; }
.pp-about-clean .pp-founder__photo .wp-block-image,
.pp-about-clean .pp-founder__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
.pp-about-clean .pp-founder__body { flex: 2 1 400px; min-width: 0; display: flex; flex-direction: column; gap: clamp(16px, 4vw, 24px); }
.pp-about-clean .pp-founder__body blockquote {
  margin: 0;
  border: none;
  padding: 0;
}
/* Targets the quote's own inner <p> (core/quote's standard nested RichText
   format) directly — needs to outrank .pp-founder__body p below (the two
   regular body-copy paragraphs), which shares its specificity and would
   otherwise win by source order and silently overwrite the quote's own
   font-size/line-height with the body-copy's. max-width:19ch is declared
   here too (not on the blockquote itself) so the `ch` unit resolves
   against this rule's own 30px font-size, not an inherited smaller one —
   a mismatch that first shipped this exact bug: the two properties were
   split across selectors with different effective font-sizes. */
.pp-about-clean .pp-founder__body blockquote p {
  margin: 0;
  font-size: clamp(19px, 4.6vw, 30px);
  line-height: 1.45;
  letter-spacing: -.01em;
  font-weight: 500;
  max-width: 19ch;
}
.pp-about-clean .pp-founder__attr { font: 500 12.5px "Poppins", sans-serif; color: var(--pp-ink-56); letter-spacing: .04em; text-transform: uppercase; }
.pp-about-clean .pp-founder__copy { display: flex; flex-direction: column; }
.pp-about-clean .pp-founder__copy p { font-size: clamp(13.5px, 2.6vw, 16px); line-height: 1.85; font-weight: 300; color: var(--pp-ink-72); max-width: 52ch; }
.pp-about-clean .pp-founder__copy p + p { margin-top: 1.85em !important; }
.pp-about-clean .pp-founder__body .pp-inline-link { font-size: 16px; }


/* ==========================================================================
   Stats
   ========================================================================== */
.pp-about-clean .pp-stats-section { padding: 0 0 var(--pp-sec-y-p); background: var(--pp-bone); }
.pp-about-clean .pp-stats-section--olive { background: var(--pp-olive); }
.pp-about-clean .pp-stats-section--olive .pp-stat__rule { border-top-color: var(--pp-bone-line); }
.pp-about-clean .pp-stats-section--olive .pp-stat svg { color: var(--pp-bone-60); }
.pp-about-clean .pp-stats-section--olive .pp-stat__num { color: var(--pp-bone); }
.pp-about-clean .pp-stats-section--olive .pp-stat__lbl { color: var(--pp-bone-60); }

.pp-about-clean .pp-stats { display: flex; flex-wrap: nowrap; gap: clamp(10px, 3vw, 20px); }
.pp-about-clean .pp-stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* Migrated from a CSS-owned .pp-stat border-top to a real, nested,
   independently-editable core/separator (same structural idea already
   proven for Vision/Mission/Values — nested as each stat's own first
   child, not a flex-row sibling, so removing one doesn't touch the
   3-column row layout). The separator's own margin-bottom reproduces the
   source's former padding-top gap between the rule and the icon below
   it; the border-top itself carries the source's exact 1px/ink-line
   treatment. */
.pp-about-clean .pp-stat__rule {
  border: none;
  border-top: 1px solid var(--pp-ink-line);
  height: 0;
  margin: 0 !important;
  /* .pp-stat is itself a flex column with gap:10px, and this separator is
     now that flex row's own first child -- the 10px gap lands between the
     separator and the icon below it in addition to this margin, same as
     the VMV card fix. Each clamp bound has 10px subtracted so
     margin-bottom + the 10px gap reproduces the source's original
     clamp(20px, 5vw, 32px) padding-top exactly. */
  margin-bottom: clamp(10px, calc(5vw - 10px), 22px) !important;
}
.pp-about-clean .pp-stat svg { color: var(--pp-ink-56); width: 26px; height: 26px; }
.pp-about-clean .pp-stat__num { font: 500 clamp(34px, 9vw, 62px) "Poppins", sans-serif; letter-spacing: -.035em; line-height: 1; color: var(--pp-ink); font-variant-numeric: tabular-nums; }
.pp-about-clean .pp-stat__lbl { font: 400 11px "Poppins", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-ink-56); }


/* ==========================================================================
   USPs
   ========================================================================== */
.pp-about-clean .pp-usp-section { padding: var(--pp-sec-y-p) 0; background: var(--pp-surface); }
.pp-about-clean .pp-usp-row { display: flex; flex-wrap: wrap; gap: clamp(28px, 8vw, 64px); }
.pp-about-clean .pp-usp-heading { flex: 1 1 200px; font-size: clamp(23px, 5.4vw, 36px); line-height: 1.18; letter-spacing: -.03em; font-weight: 500; }
.pp-about-clean .pp-usp-list { flex: 2 1 420px; min-width: 0; display: flex; flex-direction: column; gap: clamp(32px, 8vw, 56px); }
.pp-about-clean .pp-usp-item__top { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.pp-about-clean .pp-usp-item__title { font: 500 clamp(13px, 3vw, 15px) "Poppins", sans-serif; color: var(--pp-accent); }
.pp-about-clean .pp-usp-item__tag { font: 400 clamp(11px, 2.4vw, 13px) "Poppins", sans-serif; color: var(--pp-ink-56); }
.pp-about-clean .pp-usp-item__body { margin-top: 14px !important; font-size: clamp(18px, 5vw, 26px); line-height: 1.45; letter-spacing: -.02em; font-weight: 500; max-width: 26ch; color: var(--pp-ink); }


/* ==========================================================================
   Vision / Mission / Values
   ========================================================================== */
.pp-about-clean .pp-vmv-section { padding: var(--pp-sec-y-p) 0; background: var(--pp-tint); }
.pp-about-clean .pp-vmv { display: flex; flex-wrap: wrap; gap: clamp(20px, 5vw, 40px); }
.pp-about-clean .pp-vmv-card { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* Per-card top rule — source: .vmv-card's own border-top (mobile: on
   every card except the first, reading as a divider between stacked
   cards; desktop: on every card including the first, reading as one
   line above the whole row — see the desktop override below). Migrated
   to a real, editable, removable core/separator nested as each card's
   own first child (not a sibling in .pp-vmv's flex row, which would
   turn a 3-column layout into 6 competing flex items) — same visual
   result, still a genuine 3-flex-item row. The extra margin-bottom
   below restores the source's own padding-top (24-34px) on top of the
   12px flex `gap` already spacing every other child pair in this card. */
.pp-about-clean .pp-vmv-card__rule {
  border: none;
  border-top: 1px solid var(--pp-tint-line-strong);
  height: 0;
  margin: 0 !important;
  margin-bottom: clamp(12px, calc(5vw - 12px), 22px) !important;
}
.pp-about-clean .pp-vmv-card__rule--first { display: none; }
.pp-about-clean .pp-vmv-card svg { color: var(--pp-ink-56); width: 26px; height: 26px; }
.pp-about-clean .pp-vmv-card__label { font-size: clamp(15px, 3vw, 17px); font-weight: 400; color: var(--pp-ink-56); }
.pp-about-clean .pp-vmv-card h3 { font: 500 clamp(18px, 4vw, 23px) "Poppins", sans-serif; line-height: 1.3; letter-spacing: -.02em; color: var(--pp-ink); }
.pp-about-clean .pp-vmv-card p { font-size: clamp(12.5px, 2.6vw, 14px); line-height: 1.6; font-weight: 300; color: var(--pp-ink-72); }


/* ==========================================================================
   Continuous growth (timeline)
   ========================================================================== */
.pp-about-clean .pp-timeline-head { padding: var(--pp-sec-y-p) 0 clamp(20px, 5vw, 32px); background: var(--pp-bone); }
.pp-about-clean .pp-timeline { padding: 0 0 var(--pp-sec-y-p); background: var(--pp-bone); }

.pp-about-clean .pp-timeline-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 8vw, 40px); padding: clamp(12px, 3.5vw, 20px) 0; transition: border-bottom-color var(--pp-t-slow) var(--pp-ease); }
.pp-about-clean .pp-timeline-row__year { flex: none; width: 4ch; line-height: 1; font: 500 clamp(30px, 11vw, 70px) "Poppins", sans-serif; letter-spacing: -.035em; color: var(--pp-ink); }
.pp-about-clean .pp-timeline-row__body { flex: 1; min-width: 0; }
.pp-about-clean .pp-timeline-row__body h3 { font: 500 clamp(14px, 3vw, 16px) "Poppins", sans-serif; line-height: 1.3; color: var(--pp-ink); }
.pp-about-clean .pp-timeline-row__body p { margin-top: 5px !important; font-size: clamp(12.5px, 2.6vw, 14px); line-height: 1.55; font-weight: 300; color: var(--pp-ink-72); max-width: 46ch; }

.pp-about-clean .pp-timeline-row__media {
  order: 3;
  flex: 1 1 100%;
  margin-inline: calc(-1 * var(--pp-gutter));
  margin-top: 0 !important;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transition: grid-template-rows var(--pp-t-slow) var(--pp-ease), opacity var(--pp-t-slow) var(--pp-ease), margin-top var(--pp-t-slow) var(--pp-ease);
}
.pp-about-clean .pp-ratio-box { position: relative; min-height: 0; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.pp-about-clean .pp-ratio-box .wp-block-image,
.pp-about-clean .pp-ratio-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
.pp-about-clean .pp-timeline-row:hover .pp-timeline-row__media,
.pp-about-clean .pp-timeline-row:focus-within .pp-timeline-row__media,
.pp-about-clean .pp-timeline-row.pp-in-view .pp-timeline-row__media {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 14px !important;
}
/* The row's own bottom rule (now a real core/separator sibling, not a
   border on the row itself — see the section comment on
   .pp-timeline-row__rule below) sits right where the photo below it
   would otherwise cut across — hide it while that row's photo is open. */
.pp-about-clean .pp-timeline-row:hover + .pp-timeline-row__rule,
.pp-about-clean .pp-timeline-row:focus-within + .pp-timeline-row__rule,
.pp-about-clean .pp-timeline-row.pp-in-view + .pp-timeline-row__rule {
  border-top-color: transparent;
}
/* Per-row divider — source: .timeline-row's own border-bottom (last row
   has none). Migrated to a real, editable, removable core/separator
   sibling between rows — see docs/CLAUDE-DESIGN-TO-GUTENBERG-MASTER-WORKFLOW.md
   §21 (visible decorative divider between repeated content items, same
   treatment as the FAQ pattern established on the Homepage reference). */
.pp-about-clean .pp-timeline-row__rule {
  border: none;
  border-top: 1px solid var(--pp-ink-line);
  height: 0;
  margin: 0 !important;
  transition: border-top-color var(--pp-t-slow) var(--pp-ease);
}


/* ==========================================================================
   Factory / Production (the .pp-production class is intentionally shared
   by both instances, matching the source exactly)
   ========================================================================== */
.pp-about-clean .pp-production { padding: var(--pp-sec-y-p) 0 0; background: var(--pp-surface); }
.pp-about-clean .pp-production__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.pp-about-clean .pp-production__copy { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.pp-about-clean .pp-production__copy h2 { font-size: clamp(25px, 7vw, 42px); line-height: 1.16; letter-spacing: -.03em; font-weight: 500; color: var(--pp-ink); }
.pp-about-clean .pp-production__copy p { font-size: clamp(13.5px, 2.8vw, 15px); line-height: 1.7; font-weight: 300; color: var(--pp-ink-72); }
.pp-about-clean .pp-production__head .pp-inline-link { white-space: nowrap; }
.pp-about-clean .pp-production__photo { position: relative; width: 100%; height: clamp(240px, 70vw, 480px); overflow: hidden; margin-top: clamp(28px, 8vw, 48px); }
.pp-about-clean .pp-production__photo .wp-block-image,
.pp-about-clean .pp-production__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}


/* ==========================================================================
   Leadership + local team
   ========================================================================== */
.pp-about-clean .pp-people-head { padding: var(--pp-sec-y-p) 0 clamp(24px, 6vw, 40px); background: var(--pp-surface); }
.pp-about-clean .pp-people-head h2 { font-size: clamp(25px, 7vw, 42px); line-height: 1.16; letter-spacing: -.03em; font-weight: 500; max-width: 18ch; color: var(--pp-ink); }

.pp-about-clean .pp-lead-grid-section { padding: 0 0 clamp(56px, 8vw, 90px); background: var(--pp-surface); }
.pp-about-clean .pp-rail {
  display: flex;
  gap: clamp(12px, 2vw, 20px);
  overflow-x: auto;
  /* Explicit, not left to default: without this, the same single-axis
     overflow-x/visible-overflow-y pairing quirk documented on the root
     above would silently resolve this rail's vertical overflow to
     `auto` too. Intentional here either way (rail content never needs
     vertical scroll), stated explicitly so it can't surprise anyone. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 var(--pp-rail-pad) 6px;
  scroll-padding-left: var(--pp-rail-pad);
  margin: 0;
}
.pp-about-clean .pp-rail > * { scroll-snap-align: start; }
.pp-about-clean .pp-lead-card { flex: 0 0 min(46vw, 200px); display: flex; flex-direction: column; }
.pp-about-clean .pp-lead-card__photo { position: relative; overflow: hidden; width: min(37vw, 148px); aspect-ratio: 1; border-radius: var(--pp-r-pill); margin: 0 0 14px !important; }
.pp-about-clean .pp-lead-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-about-clean .pp-lead-card h3 { font: 500 clamp(15px, 3.4vw, 18px) "Poppins", sans-serif; line-height: 1.15; letter-spacing: -.025em; color: var(--pp-ink); }
.pp-about-clean .pp-lead-card p { margin-top: 5px !important; font-size: clamp(11.5px, 2.4vw, 13.5px); font-weight: 400; color: var(--pp-ink-56); }

.pp-about-clean .pp-rail__controls {
  max-width: var(--pp-maxw);
  margin: clamp(20px, 3vw, 26px) auto 0;
  padding-inline: var(--pp-gutter);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.pp-about-clean .pp-rail__progress { flex: 1 1 auto; max-width: 220px; height: 3px; border-radius: var(--pp-r-pill); background: var(--pp-ink-line); overflow: hidden; }
.pp-about-clean .pp-rail__thumb { height: 100%; border-radius: var(--pp-r-pill); background: var(--pp-ink); width: 25%; margin-left: 0; transition: width .3s ease, margin-left var(--pp-t-slow) var(--pp-ease); }
.pp-about-clean .pp-rail__count { font-size: 13px; color: var(--pp-ink-56); font-variant-numeric: tabular-nums; }
.pp-about-clean .pp-rail__arrows { margin-left: auto; display: flex; gap: 8px; }

.pp-about-clean .pp-local-section { padding: clamp(48px, 8vw, 80px) 0 clamp(56px, 8vw, 90px); background: var(--pp-surface); }
.pp-about-clean .pp-local-row { display: flex; flex-direction: column; gap: clamp(24px, 5vw, 36px); }
.pp-about-clean .pp-local-row__title { font-size: clamp(21px, 5.4vw, 29px); line-height: 1.22; letter-spacing: -.025em; font-weight: 500; max-width: 22ch; color: var(--pp-ink); }
.pp-about-clean .pp-local-cards { display: flex; flex-direction: column; gap: 24px; }
.pp-about-clean .pp-local-card { display: flex; align-items: center; gap: 18px; min-width: 0; }
.pp-about-clean .pp-local-card__photo { position: relative; overflow: hidden; flex: none; width: clamp(68px, 19vw, 92px); height: clamp(68px, 19vw, 92px); border-radius: var(--pp-r-pill); margin: 0 !important; }
.pp-about-clean .pp-local-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-about-clean .pp-local-card__text { min-width: 0; }
.pp-about-clean .pp-local-card h3 { font: 500 clamp(18px, 4.6vw, 21px) "Poppins", sans-serif; color: var(--pp-ink); white-space: nowrap; }
.pp-about-clean .pp-local-card p { margin-top: 4px !important; font-size: clamp(13.5px, 3.2vw, 15.5px); font-weight: 400; color: var(--pp-ink-56); }


/* ==========================================================================
   Closing CTA
   ========================================================================== */
.pp-about-clean .pp-dark-cta-section { padding: var(--pp-sec-y-p) 0; background: var(--pp-ink); }
.pp-about-clean .pp-dark-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.pp-about-clean .pp-dark-cta__copy { display: flex; flex-direction: column; gap: 12px; flex: 1 1 300px; min-width: 0; }
.pp-about-clean .pp-dark-cta__copy h2 { font-size: clamp(25px, 7vw, 42px); line-height: 1.16; letter-spacing: -.03em; font-weight: 500; color: var(--pp-bone); }
.pp-about-clean .pp-dark-cta__copy p { font-size: clamp(13px, 2.8vw, 15px); line-height: 1.65; font-weight: 300; color: var(--pp-bone-60); }
.pp-about-clean .pp-dark-cta__btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0 !important;
}
.pp-about-clean .pp-dark-cta__btns .wp-block-button { width: 100%; margin: 0 !important; }
.pp-about-clean .pp-dark-cta__btns .wp-block-button__link { width: 100%; }


/* ==========================================================================
   Desktop layer — the design's single breakpoint (min-width: 900px)
   ========================================================================== */
@media (min-width: 900px) {
  .pp-about-clean .pp-page-hero { height: clamp(480px, 36vw, 680px); }

  .pp-about-clean .pp-founder__photo { flex: 1 1 0; }
  .pp-about-clean .pp-founder__body { flex: 1 1 0; }

  .pp-about-clean .pp-vmv-card__rule--first { display: block; }

  /* top: calc(--hdr-h + 24px), not just 24px — matches the source's own
     .usp-heading exactly. This page pack owns no header of its own (a
     separate Site Part does, position:fixed, --hdr-h tall), but that
     header still visually overlays the top of the real page regardless —
     a plain 24px offset would stick this heading right underneath it,
     letting the fixed header cover its own top ~50-70px.

     + var(--wp-admin--admin-bar--height, 0px), added in v1.0.7: a
     `position:sticky` element's own stuck position ignores ancestor
     margins exactly like `position:fixed` does, so when WordPress's real
     admin bar pushes the fixed Header Site Part down via its own real
     `html{margin-top}` mechanism (see Header v1.1.2's own admin-bar fix),
     this heading's un-adjusted `top` no longer clears the header's own,
     now-lower bottom edge — confirmed live on real WordPress staging: a
     real, measured 9px negative gap (the heading rendering partially
     behind the header) with the admin bar visible, at desktop widths
     where this rule is active. The `0px` fallback (the property is
     undefined when logged out) reproduces the source's own bare
     `calc(var(--pp-hdr-h) + 24px)` exactly for every real visitor — this
     pack's own hero, unlike Homepage's, uses a width-based `clamp()`
     height with no viewport-height dependency, so it was proven
     unaffected by the admin bar and needed no change; see
     docs/ABOUT-CLEAN-PAGE-PACK-HANDOFF.md's "Staging correction 1.0.7"
     section. */
  .pp-about-clean .pp-usp-heading { position: sticky; top: calc(var(--pp-hdr-h) + 24px + var(--wp-admin--admin-bar--height, 0px)); align-self: flex-start; }

  .pp-about-clean .pp-lead-card { flex: 0 0 min(21vw, 260px); }
  .pp-about-clean .pp-lead-card__photo { width: min(15vw, 160px); }

  .pp-about-clean .pp-local-row { flex-direction: row; align-items: center; gap: clamp(28px, 4vw, 56px); }
  .pp-about-clean .pp-local-row__title { flex: 0 1 480px; max-width: 30ch; min-width: 0; }
  .pp-about-clean .pp-local-cards { flex-direction: row; gap: 72px; }
  .pp-about-clean .pp-local-card { gap: 16px; }
  .pp-about-clean .pp-local-card__photo { width: 80px; height: 80px; }
  .pp-about-clean .pp-local-card h3 { font-size: 18px; line-height: 1.2; }
  .pp-about-clean .pp-local-card p { font-size: 13.5px; white-space: nowrap; }

  .pp-about-clean .pp-timeline-row { flex-wrap: nowrap; }
  .pp-about-clean .pp-timeline-row__media {
    position: relative;
    z-index: 2;
    order: initial;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 0px;
    margin-inline: 0;
    margin-top: 0 !important;
    display: block;
    overflow: visible;
    transition: flex-basis var(--pp-t-slow) var(--pp-ease), opacity var(--pp-t-slow) var(--pp-ease);
  }
  .pp-about-clean .pp-ratio-box { width: 340px; aspect-ratio: 4 / 3; margin-block: -56px; overflow: hidden; border-radius: var(--pp-r-lg); }
  .pp-about-clean .pp-timeline-row:hover .pp-timeline-row__media,
  .pp-about-clean .pp-timeline-row:focus-within .pp-timeline-row__media {
    flex-basis: 340px;
    opacity: 1;
    /* The mobile/base reveal rule above (line ~544) sets margin-top:14px
       !important on hover/focus-within/.pp-in-view with equal (0,4,0)
       specificity and is NOT media-scoped, so it still matches here and
       would out-cascade the desktop base rule's margin-top:0 !important
       (only (0,2,0)) via specificity, adding an unwanted 14px to row
       height on desktop hover even though this reveal is a pure
       horizontal flex-basis expansion with no vertical gap of its own.
       Re-declare margin-top:0 here (same specificity, later in source)
       to win the tie and keep row height stable during hover. */
    margin-top: 0 !important;
  }
  .pp-about-clean .pp-timeline-row:hover + .pp-timeline-row__rule,
  .pp-about-clean .pp-timeline-row:focus-within + .pp-timeline-row__rule {
    border-top-color: var(--pp-ink-line);
  }

  .pp-about-clean .pp-dark-cta__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: auto; }
  .pp-about-clean .pp-dark-cta__btns .wp-block-button { width: auto; }
  .pp-about-clean .pp-dark-cta__btns .wp-block-button__link { width: auto; }
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pp-about-clean, .pp-about-clean *, .pp-about-clean ::before, .pp-about-clean ::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}