/*
 * Our Story (/our-story/, page-our-story.php) — C2.2 R1, the Human-approved final design (2026-10-29). Loaded on that
 * template only (inc/assets.php). It is the ABOUT_US_Lab stylesheet (04_DESIGN_CONCEPTS/C22_OUR_STORY/our-story.css),
 * plus the photograph-free layouts of W1 and P1 and the plate's per-word line breaks (search "R-D").
 *
 * From C2.1:
 *  - Hero B is the one hero (D25). The deck of six real cans is dealt into a line-up that lands just above the hero's
 *    foot while the Navy plate draws back to just above it; Why PouchPick exists follows closely and rises in as the
 *    line-up completes. No artificial scroll length: the page scrolls natively and nothing is pinned.
 *  - No on-page links (D24).
 *  - C2's soft text entrance (a fade and a short rise, softly staggered) is restored at about a dozen moments; the
 *    sticky shipping sequence keeps its own active-state treatment and has none.
 *  - Everything else is C2.1's: the unnumbered layout, three shipping states, the carriers, Meet Sara, the letterhead.
 *
 * Motion is progressive enhancement: start states only under html.pp-os-motion (set by our-story.js when motion is
 * allowed); no scroll-jacking, no fixed elements, no loops in the hero. The one scroll-driven value is --os-p (0 → 1
 * over the hero's own range, --os-range-start → --os-range-end): a CSS scroll timeline where supported, otherwise one
 * passive scroll listener in our-story.js. Reduced motion, no JavaScript, print = the complete static page.
 */

@property --os-p { syntax: "<number>"; inherits: true; initial-value: 0; }

.pp-os {
	--os-ink-2: #2E333A;
	--os-rule: #E3E7EC;
	--os-sep: #B5BCC5;
	--os-on-navy: rgba(255, 255, 255, .84);
	--os-on-navy-2: rgba(255, 255, 255, .66);
	--os-gap: 80px;
	--os-rise: 14px;
	--os-stagger: 70ms;
	--os-late: 38;                       /* % above the viewport foot where Why PouchPick exists rises in (our-story.js) */
	display: block;
	color: var(--pp-ink);
}
@media (min-width: 768px) { .pp-os { --os-gap: 112px; --os-rise: 18px; --os-stagger: 80ms; } }
@media (min-width: 1025px) { .pp-os { --os-gap: 136px; --os-rise: 20px; --os-stagger: 90ms; --os-late: 30; } }

:where(.pp-os) p { margin: 0; font: 400 16px/1.65 var(--pp-font-body); color: var(--os-ink-2); }
@media (min-width: 768px) { :where(.pp-os) p { font-size: 17px; } }
:where(.pp-os) p a, :where(.pp-os) dd a {
	color: var(--pp-navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(20, 47, 81, .35);
	transition: text-decoration-color var(--pp-motion-micro) var(--pp-ease-out);
}
:where(.pp-os) p a:hover, :where(.pp-os) dd a:hover { text-decoration-color: currentColor; }

.pp-os-h2 { margin: 0; font: 600 40px/1.02 var(--pp-font-display); letter-spacing: -.03em; color: var(--pp-ink); text-wrap: balance; }
@media (min-width: 768px) { .pp-os-h2 { font-size: 60px; } }
@media (min-width: 1025px) { .pp-os-h2 { font-size: 72px; } }
.pp-os-h3 { margin: 0 0 10px; font: 600 24px/1.15 var(--pp-font-display); letter-spacing: -.02em; color: var(--pp-ink); }
@media (min-width: 768px) { .pp-os-h3 { font-size: 30px; } }
.pp-os .pp-os-lead { max-width: 30em; font-size: 19px; line-height: 1.5; color: var(--pp-ink); }
@media (min-width: 768px) { .pp-os .pp-os-lead { font-size: 22px; line-height: 1.46; } }
.pp-os-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 15px/1.4 var(--pp-font-body);
	color: var(--pp-navy);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(20, 47, 81, .35);
}
.pp-os-link::after { content: "→"; text-decoration: none; transition: transform var(--pp-motion-micro) var(--pp-ease-out); }
@media (hover: hover) { .pp-os-link:hover { text-decoration-color: currentColor; } .pp-os-link:hover::after { transform: translateX(var(--pp-dir-travel)); } }

/* =========================================================================================================
 * OUR STORY · the hero — Hero B (D25): the copy on the page; beside it, a fanned deck of six real cans on a Navy plate.
 * As the hero scrolls away the deck is dealt into a line-up of brands that lands just above the hero's foot, the plate
 * draws back to just above the line-up, and the next chapter begins: "a different label for every brand"
 * ======================================================================================================= */
/* the hero's own scroll range for --os-p: phones and tablets start once the plate is on its way up the screen */
.pp-os-hero { position: relative; isolation: isolate; --os-range-start: 60px; --os-range-end: 420px; }
@media (min-width: 768px) and (max-width: 1024px) { .pp-os-hero { --os-range-start: 80px; --os-range-end: 500px; } }
@media (min-width: 1025px) { .pp-os-hero { --os-range-start: 0px; --os-range-end: 440px; } }
.pp-os-hero-in { position: relative; z-index: 3; }
.pp-os-hero-copy { padding-top: 20px; }
@media (min-width: 768px) { .pp-os-hero-copy { padding-top: 28px; } }
@media (min-width: 1025px) {
	/* the first screen: as tall as the window allows (header 150 px), never taller than 720 px */
	.pp-os-hero { display: flex; flex-direction: column; min-height: clamp(600px, calc(100svh - 150px), 720px); overflow: hidden; }
	.pp-os-hero-in { display: flex; flex: 1 0 auto; width: 100%; }
	.pp-os-hero-copy { display: flex; flex-direction: column; width: 48%; max-width: 620px; padding-bottom: var(--os-hero-foot); }
	.pp-os-hero-copy > .pp-os-h1 { margin-top: auto; padding-top: 40px; }
}
.pp-os-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 13px/1.2 var(--pp-font-body); color: var(--pp-secondary-text); }
.pp-os-crumb a { color: inherit; text-decoration: none; }
.pp-os-crumb a:hover { color: var(--pp-ink); text-decoration: underline; text-underline-offset: 3px; }
.pp-os-crumb span[aria-hidden] { color: var(--os-sep); }
@media (max-width: 760px) { .pp-os-crumb { display: none; } }
.pp-os-h1 { margin: 0; font: 600 64px/.9 var(--pp-font-display); letter-spacing: -.036em; color: var(--pp-ink); }
@media (min-width: 768px) { .pp-os-h1 { margin-top: 30px; font-size: clamp(92px, 9.2vw, 136px); } }
.pp-os .pp-os-lede { max-width: 33em; margin-top: 18px; font-size: 17.5px; line-height: 1.55; }
@media (min-width: 768px) { .pp-os .pp-os-lede { margin-top: 28px; font-size: 21px; line-height: 1.5; } }
/* desktop: the copy hangs from the hero's foot line, so the lede keeps the room Inter needs (6 lines below 1200 px,
   5 from 1200 px — measured; the fallback never needs more). Production loads its fonts with display=swap: without
   this, the late Inter swap adds a line and lifts the H1 31 px after the first paint (CLS 0.22). Re-measure if the
   lede's words change (check-c21 · cls). */
@media (min-width: 1025px) { .pp-os .pp-os-lede { min-height: calc(6 * 21px * 1.5); } }
@media (min-width: 1200px) { .pp-os .pp-os-lede { min-height: calc(5 * 21px * 1.5); } }
.pp-os .pp-os-operator { display: flex; align-items: baseline; gap: 12px; margin-top: 22px; font-size: 15px; line-height: 1.45; color: var(--pp-secondary-text); }
.pp-os-operator::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; transform: translateY(-.3em); }
.pp-os-operator strong { font-weight: 600; color: var(--pp-navy); }

/* ---- the stage: phones/tablets below the copy, desktop beside it and off the right edge --------------------- */
.pp-os-stage { position: relative; z-index: 1; height: 380px; margin-top: 8px; container-type: size; overflow: hidden; }
@media (min-width: 768px) and (max-width: 1024px) { .pp-os-stage { height: 480px; } }
/* desktop: from beside the copy to the window's right edge, ending above the hero's foot line (the operator line on
   the left, the caption on the right, one baseline) */
@media (min-width: 1025px) {
	.pp-os-hero { --os-hero-foot: 64px; }
	/* left = the copy column's right edge (the .pp-container + 48 % / 620 px rule above) + 24 px */
	.pp-os-stage { position: absolute; top: 0; right: 0; bottom: calc(var(--os-hero-foot) + 36px); left: calc(max(var(--pp-gutter), (100% - var(--pp-container-max)) / 2 + var(--pp-gutter)) + min(620px, .48 * (min(100%, var(--pp-container-max)) - 2 * var(--pp-gutter))) + 24px); width: auto; height: auto; margin: 0; overflow: visible; }
}
.pp-os-stage-bg, .pp-os-cluster { position: absolute; inset: 0; pointer-events: none; }
.pp-os-can { position: absolute; left: calc(var(--ox) + var(--x) * var(--u)); top: calc(50cqh + var(--y) * var(--u)); z-index: var(--z, 1); width: calc(var(--s) * var(--u)); aspect-ratio: 1; margin: calc(var(--s) * var(--u) * -.5) 0 0 calc(var(--s) * var(--u) * -.5); }
.pp-os-can-body { position: absolute; inset: 0; }
.pp-os-can-body img { display: block; width: 100%; height: 100%; }
/* a real contact shadow: a soft disc offset down-right (light from the top left), drawn without filters */
.pp-os-can-shadow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 6, 16, .5), rgba(0, 6, 16, .2) 58%, rgba(0, 6, 16, 0) 100%); transform: translate(7%, 11%) scale(1.06); }
.pp-os-stage-cap { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; padding-top: 10px; font: 400 13.5px/1.45 var(--pp-font-body); color: var(--pp-secondary-text); }
.pp-os-stage-cap a { color: var(--pp-navy); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(20, 47, 81, .35); }
@media (min-width: 1025px) { .pp-os-stage-cap { position: absolute; right: max(var(--pp-gutter), calc((100% - var(--pp-container-max)) / 2 + var(--pp-gutter))); bottom: var(--os-hero-foot); width: auto; max-width: none; justify-content: flex-end; padding: 0; } }

/* the cans are composed in one unit (--u) around one origin (--ox): --x/--y are a centre's offset and --s a diameter,
   in --u. --u is the stage's height (cqh) — on desktop capped by its width, so a narrow window shrinks the deck
   instead of pushing it into the copy; --ox centres the deck in the stage but never lets its left edge (--L) out.
   Desktop --L 56.5 puts the deck where C2.1 rendered the approved Hero B (48 % of the stage at 1440); the line-up's
   left end may pass the stage edge by up to ~2 --u at p = 1 and stays clear of the copy at every width.
   The line-up (p = 1) is slot × pitch at size --es, its foot 12 px above the stage's foot at every width */
.pp-os-stage { --u: 1cqh; --ox: 48cqw; --row0: -37; --pitch: 15.5; --es: 17; }
@media (min-width: 1025px) { .pp-os-stage { --u: min(1cqh, .9cqw); --L: 56.5; --R: 61; --ox: max(calc(var(--L) * var(--u)), calc(50cqw + (var(--L) - var(--R)) / 2 * var(--u))); --row0: -48; --pitch: 18.5; --es: 21; } }
/* the plate: Navy, floating clear of the copy on desktop and bleeding off the right edge. It draws back from the
   bottom by exactly the line-up's height + 22 px, so at p = 1 it ends 10 px above the row and the cans stand on the
   page itself, just above the caption and the next chapter */
.pp-os-stage-bg { background: radial-gradient(90% 80% at 62% 34%, #21477A 0%, var(--pp-navy) 58%, #10284A 100%); clip-path: inset(0 0 calc(var(--os-p) * (var(--es) * var(--u) + 22px)) 0); }
@media (min-width: 1025px) { .pp-os-stage-bg { inset: 24px 0 0 0; border-radius: 28px 0 0 28px; clip-path: inset(0 0 calc(var(--os-p) * (var(--es) * var(--u) + 22px)) 0 round 28px 0 0 28px); } }
.pp-os-can--helwit { --x: -31; --y: 6;  --s: 34; --r: -24deg; --dr: 18deg;  --slot: 0; --z: 1; }
.pp-os-can--loop   { --x: -18; --y: 0;  --s: 36; --r: -12deg; --dr: 16deg;  --slot: 1; --z: 2; }
.pp-os-can--zyn    { --x: 0;   --y: -4; --s: 50; --r: 0deg;   --dr: -3deg;  --slot: 2; --z: 6; }
.pp-os-can--velo   { --x: 18;  --y: 0;  --s: 36; --r: 12deg;  --dr: -7deg;  --slot: 3; --z: 5; }
.pp-os-can--fix    { --x: 32;  --y: 6;  --s: 33; --r: 24deg;  --dr: -28deg; --slot: 4; --z: 4; }
.pp-os-can--nordic { --x: 44;  --y: 14; --s: 26; --r: 34deg;  --dr: -26deg; --slot: 5; --z: 3; }
/* deck → line-up: x to its slot; y from the deck to the row (whose centre sits half a can + 12 px above the stage's
   foot); rotation towards upright; size to --es. Transform only */
.pp-os-can { translate: calc((var(--row0) + var(--slot) * var(--pitch) - var(--x)) * var(--os-p) * var(--u)) calc((50cqh - var(--es) * var(--u) * .5 - 12px - var(--y) * var(--u)) * var(--os-p)); }
.pp-os-can-body { transform: rotate(calc(var(--r) + var(--dr) * var(--os-p))) scale(calc(1 + (var(--es) / var(--s) - 1) * var(--os-p))); }

/* where the browser can drive --os-p itself, it does (no script involved) */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		:root:not([data-motion="reduce"]) .pp-os-hero { animation: pp-os-progress linear both; animation-timeline: scroll(root block); animation-range: var(--os-range-start) var(--os-range-end); }
	}
}
@keyframes pp-os-progress { from { --os-p: 0; } to { --os-p: 1; } }

/* =========================================================================================================
 * WHY POUCHPICK EXISTS — the statement is the chapter's voice; its heading stays quiet
 * ======================================================================================================= */
/* the hand-over from the hero: close enough that the chapter rises in as the line-up lands, never touching it */
.pp-os-why { margin-top: 40px; }
@media (min-width: 768px) { .pp-os-why { margin-top: 56px; } }
@media (min-width: 1025px) {
	.pp-os-why { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; margin-top: 64px; }
	.pp-os-why > .pp-os-h2 { grid-column: 1 / 8; }
	.pp-os-why > .pp-os-statement { grid-column: 1 / 12; }
	.pp-os-why-body { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
	.pp-os-why-text { grid-column: 1 / 6; }
	.pp-os-why-body > .pp-os-photo { grid-column: 7 / 13; }
}
.pp-os .pp-os-h2--quiet { font: 600 15px/1.3 var(--pp-font-body); letter-spacing: 0; color: var(--pp-secondary-text); }
.pp-os .pp-os-statement { max-width: 20em; margin-top: 14px; font: 600 32px/1.1 var(--pp-font-display); letter-spacing: -.024em; color: var(--pp-navy); text-wrap: balance; }
@media (min-width: 768px) { .pp-os .pp-os-statement { margin-top: 18px; font-size: 48px; } }
@media (min-width: 1025px) { .pp-os .pp-os-statement { font-size: 60px; line-height: 1.04; } }
.pp-os-mark { padding: 0 .05em; background-image: linear-gradient(var(--pp-lime), var(--pp-lime)); background-repeat: no-repeat; background-position: 0 86%; background-size: 100% .36em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pp-os-why-body { display: grid; gap: 30px; margin-top: 32px; }
@media (min-width: 768px) { .pp-os-why-body { gap: 40px; margin-top: 52px; } }
@media (min-width: 1025px) { .pp-os-why-body { margin-top: 72px; } }
/* R-D: W1 without its approved photograph — the text takes the row at a reading measure; nothing else changes */
@media (min-width: 1025px) { .pp-os-why-body--text .pp-os-why-text { grid-column: 1 / 8; max-width: 40rem; } }
.pp-os-why-text p + p { margin-top: 18px; }
.pp-os .pp-os-aside { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--os-rule); font-size: 15px; line-height: 1.6; color: var(--pp-secondary-text); }

/* photo slots: fixed ratios, so an approved photograph drops in without re-layout */
.pp-os-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--pp-radius-lg); background: var(--pp-secondary-surface); }
.pp-os-photo--3x2 { aspect-ratio: 3 / 2; }
.pp-os-photo--4x3 { aspect-ratio: 4 / 3; }
.pp-os-photo-in { position: absolute; inset: 0; }
.pp-os-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--os-focus, 50% 40%); }

/* =========================================================================================================
 * WHAT WE DO — the role in one sentence, three plain claims, and the one piece of evidence no other page shows
 * ======================================================================================================= */
.pp-os-what { display: grid; gap: 32px; margin-top: var(--os-gap); }
@media (min-width: 1025px) {
	.pp-os-what { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
	.pp-os-what-copy { grid-column: 1 / 7; }
	.pp-os-what > .pp-os-label { grid-column: 8 / 13; margin-top: 12px; }
}
.pp-os-what .pp-os-lead { margin-top: 22px; }
.pp-os-roles { margin: 30px 0 0; }
.pp-os-roles > div { padding: 16px 0 17px; border-top: 1px solid var(--os-rule); }
.pp-os-roles dt { font: 600 19px/1.25 var(--pp-font-display); letter-spacing: -.01em; color: var(--pp-ink); }
@media (min-width: 768px) { .pp-os-roles dt { font-size: 22px; } }
.pp-os-roles dd { margin: 6px 0 0; font: 400 16px/1.6 var(--pp-font-body); color: var(--os-ink-2); }
.pp-os-roles dd a { white-space: nowrap; }
.pp-os-label { padding: 22px 22px 8px; border-radius: var(--pp-radius-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--os-rule), 0 24px 44px -26px rgba(20, 47, 81, .28); }
@media (min-width: 768px) { .pp-os-label { padding: 30px 32px 12px; } }
.pp-os .pp-os-label-k { margin-bottom: 14px; font: 600 12px/1.3 var(--pp-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--pp-secondary-text); }
.pp-os-label dl { margin: 0; }
.pp-os-label dl > div { display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--os-rule); align-items: baseline; }
@media (min-width: 560px) { .pp-os-label dl > div { grid-template-columns: 196px minmax(0, 1fr); gap: 16px; padding: 14px 0; } }
.pp-os-label dt { font: 600 14px/1.45 var(--pp-font-body); color: var(--pp-ink); }
.pp-os-label dd { margin: 0; font: 400 14px/1.5 var(--pp-font-body); color: var(--os-ink-2); }
@media (min-width: 560px) { .pp-os-label dt, .pp-os-label dd { font-size: 15px; } }
.pp-os-band { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: 1px; }
.pp-os-band i { width: 18px; height: 6px; border-radius: 3px; background: var(--pp-navy); }
.pp-os-band i:nth-child(1) { opacity: .16; } .pp-os-band i:nth-child(2) { opacity: .34; } .pp-os-band i:nth-child(3) { opacity: .54; } .pp-os-band i:nth-child(4) { opacity: .76; }

/* =========================================================================================================
 * WORLD WIDE SHIPPING — three states on a light band; on desktop one stage holds while they pass
 * ======================================================================================================= */
.pp-os-ship { margin-top: var(--os-gap); padding: 64px 0 56px; background: var(--pp-soft-surface); }
@media (min-width: 768px) { .pp-os-ship { padding: 96px 0 80px; } }
@media (min-width: 1025px) { .pp-os-ship { padding: 120px 0 96px; } }
.pp-os-ship-head { display: grid; gap: 20px; }
@media (min-width: 1025px) {
	.pp-os-ship-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; }
	.pp-os-ship-head > .pp-os-h2 { grid-column: 1 / 7; font-size: 88px; line-height: .98; letter-spacing: -.034em; }
	.pp-os-ship-intro { grid-column: 7 / 13; }
}
.pp-os .pp-os-policy { margin-top: 14px; font-size: 16.5px; line-height: 1.55; color: var(--os-ink-2); }
.pp-os-policy b { font-weight: 600; color: var(--pp-navy); }

.pp-os-seq { margin-top: 40px; }
@media (min-width: 768px) { .pp-os-seq { margin-top: 56px; } }
.pp-os-state { display: grid; gap: 18px; padding: 18px 0 26px; }
.pp-os-state + .pp-os-state { border-top: 1px solid var(--os-rule); padding-top: 28px; }
@media (min-width: 768px) {
	.pp-os-state { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; align-items: center; padding: 32px 0; }
	.pp-os-state + .pp-os-state { padding-top: 32px; }
}
/* R-D: a state without its visual (P1 before its approved photograph) keeps its words across the row on tablets and
   without JavaScript; on desktop the stage rules below still place it in the text column, and the stage carries on
   from state 2 */
@media (min-width: 768px) { .pp-os-state--text .pp-os-state-txt { grid-column: 1 / -1; } }
.pp-os-state-txt > p + p { margin-top: 12px; }
.pp-os .pp-os-local { font-size: 15px; color: var(--pp-navy); font-weight: 500; }
.pp-os .pp-os-note { padding-left: 14px; border-left: 3px solid var(--pp-lime); font-size: 15px; color: var(--os-ink-2); }
.pp-os-help { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.pp-os-help a { display: inline-flex; gap: 6px; font: 600 15px/1.4 var(--pp-font-body); color: var(--pp-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(20, 47, 81, .35); }
.pp-os-help a::after { content: "→"; text-decoration: none; }
.pp-os-help a:hover { text-decoration-color: currentColor; }
.pp-os .pp-os-ship-tail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--os-rule); font-size: 15px; color: var(--pp-secondary-text); }
.pp-os-ship-tail .pp-os-link { margin-left: auto; }
@media (max-width: 767px) { .pp-os-ship-tail .pp-os-link { margin-left: 0; } }

/* phones: the same three states, packed tighter — the order-preparation photo crops to 16:10, the week to its rows */
@media (max-width: 767px) {
	.pp-os-ship { padding: 56px 0 48px; }
	.pp-os-state { gap: 16px; padding: 14px 0 22px; }
	.pp-os-state + .pp-os-state { padding-top: 24px; }
	.pp-os-state-vis.pp-os-photo--4x3 { aspect-ratio: 16 / 10; }
	.pp-os-week { padding: 20px 18px 14px; }
	.pp-os-week ol { gap: 7px; margin-top: 14px; }
	.pp-os .pp-os-week-axis { margin-top: 10px; }
}

/* desktop, wherever JavaScript runs: the three visuals share one sticky stage beside the three texts. The template
   prints one inline line in <head> — document.documentElement.classList.add('pp-os-js') — so this layout is there from
   the first paint (no layout shift when our-story.js arrives); .is-live, set by our-story.js, is the fallback. The
   server marks state 1 active, so the stage is never empty. Without JavaScript: the static arrangement above. */
@media (min-width: 1025px) {
	.pp-os-seq:is(.is-live, .pp-os-js *) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr); }
	.pp-os-seq:is(.is-live, .pp-os-js *) .pp-os-state { display: contents; }
	.pp-os-seq:is(.is-live, .pp-os-js *) .pp-os-state-vis { grid-column: 1; grid-row: 1 / span 3; align-self: start; position: sticky; top: calc(var(--pp-sticky-top, 149px) + 44px); opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .5s var(--pp-ease-out), transform .7s var(--pp-ease-enter); pointer-events: none; }
	.pp-os-seq:is(.is-live, .pp-os-js *)[data-active="1"] [data-state="1"] .pp-os-state-vis,
	.pp-os-seq:is(.is-live, .pp-os-js *)[data-active="2"] [data-state="2"] .pp-os-state-vis,
	.pp-os-seq:is(.is-live, .pp-os-js *)[data-active="3"] [data-state="3"] .pp-os-state-vis { opacity: 1; transform: none; pointer-events: auto; }
	.pp-os-seq:is(.is-live, .pp-os-js *) .pp-os-state-txt { grid-column: 3; padding: 48px 0 56px 26px; border-left: 3px solid transparent; transition: border-color .4s var(--pp-ease-out); }
	.pp-os-seq:is(.is-live, .pp-os-js *) [data-state="1"] .pp-os-state-txt { grid-row: 1; padding-top: 24px; }
	.pp-os-seq:is(.is-live, .pp-os-js *) [data-state="2"] .pp-os-state-txt { grid-row: 2; }
	.pp-os-seq:is(.is-live, .pp-os-js *) [data-state="3"] .pp-os-state-txt { grid-row: 3; padding-bottom: 120px; }
	.pp-os-seq:is(.is-live, .pp-os-js *) .pp-os-state + .pp-os-state .pp-os-state-txt { border-top: 0; }
	.pp-os-seq:is(.is-live, .pp-os-js *) .pp-os-state-txt .pp-os-h3 { transition: color .4s var(--pp-ease-out); }
	.pp-os-seq:is(.is-live, .pp-os-js *):not([data-active="1"]) [data-state="1"] .pp-os-h3,
	.pp-os-seq:is(.is-live, .pp-os-js *):not([data-active="2"]) [data-state="2"] .pp-os-h3,
	.pp-os-seq:is(.is-live, .pp-os-js *):not([data-active="3"]) [data-state="3"] .pp-os-h3 { color: #7C8592; }
	.pp-os-seq:is(.is-live, .pp-os-js *)[data-active="1"] [data-state="1"] .pp-os-state-txt,
	.pp-os-seq:is(.is-live, .pp-os-js *)[data-active="2"] [data-state="2"] .pp-os-state-txt,
	.pp-os-seq:is(.is-live, .pp-os-js *)[data-active="3"] [data-state="3"] .pp-os-state-txt { border-left-color: var(--pp-lime); }
}

/* state 2's visual — the week, drawn: five dispatch days filled up to the cut-off, the weekend left empty */
.pp-os-week { margin: 0; padding: 24px 22px 18px; border-radius: var(--pp-radius-lg); background: var(--pp-navy); color: #fff; --os-cut: 14; }
@media (min-width: 768px) { .pp-os-week { padding: 30px 30px 22px; } }
.pp-os .pp-os-week-k { display: flex; justify-content: space-between; font: 600 12px/1.3 var(--pp-font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.pp-os-week-key { display: inline-block; width: 18px; height: 8px; margin-right: 9px; border-radius: 4px; background: var(--pp-lime); vertical-align: 1px; }
.pp-os-week ol { position: relative; display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.pp-os-week li { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; font: 600 13px/1 var(--pp-font-body); color: #fff; }
.pp-os-week li.is-off { color: rgba(255, 255, 255, .42); }
.pp-os-week li i { position: relative; height: 12px; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, .1); }
.pp-os-week li.is-off i { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 6px, rgba(255, 255, 255, 0) 6px 11px); }
.pp-os-week li.is-day i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--os-cut) / 24 * 100%); border-radius: 6px; background: var(--pp-lime); transform-origin: left; transform: scaleX(1); }
.pp-os-week ol::after { content: ""; position: absolute; top: -6px; bottom: -6px; left: calc(46px + (100% - 46px) * var(--os-cut) / 24); width: 2px; border-radius: 1px; background: #fff; }
.pp-os .pp-os-week-axis { position: relative; height: 18px; margin: 12px 0 0 46px; font: 500 12px/1 var(--pp-font-body); color: rgba(255, 255, 255, .6); }
.pp-os-week-axis span { position: absolute; top: 0; }
.pp-os-week-axis span:first-child { left: 0; }
.pp-os-week-axis span:last-child { right: 0; }
.pp-os-week-axis .pp-os-week-cut { left: calc(100% * var(--os-cut) / 24); transform: translateX(-50%); color: #fff; font-weight: 700; }

/* state 3's visual — the approved delivery presentation (the PDP's carrier set, official artwork unmodified) */
.pp-os-carriers { margin: 0; padding: 24px 22px 20px; border-radius: var(--pp-radius-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--os-rule), 0 26px 50px -30px rgba(20, 47, 81, .3); }
@media (min-width: 768px) { .pp-os-carriers { padding: 30px 30px 24px; } }
.pp-os .pp-os-carriers-k { font: 600 12px/1.3 var(--pp-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--pp-secondary-text); }
/* the PDP's own chips (assets/css/pdp.css .pp-carrier-mark: 22 px tiles, marks 10 / DHL 9 / UPS 15 px) at ~2.3× */
.pp-os-carriers ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.pp-os-carrier { display: inline-grid; place-items: center; height: 40px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--pp-border); background: #fff; }
.pp-os-carrier img { display: block; width: auto; height: 17px; }
.pp-os-carrier--dhl { background: #FECC00; border-color: #FECC00; }
.pp-os-carrier--dhl img { height: 15px; }
.pp-os-carrier--ups img { height: 26px; }
@media (min-width: 768px) { .pp-os-carrier { height: 52px; padding: 0 18px; border-radius: 9px; } .pp-os-carrier img { height: 23px; } .pp-os-carrier--dhl img { height: 21px; } .pp-os-carrier--ups img { height: 34px; } }
.pp-os-carriers figcaption { margin-top: 14px; font: 400 14px/1.5 var(--pp-font-body); color: var(--pp-secondary-text); }
.pp-os-carriers-fig { margin: 0; }
/* the Human-proposed delivery estimates (2026-10-29): three compact fields below the carriers, in the same card.
   Delivery starts after dispatch, so they sit in state 3, never beside the 14:00 rule; no motion, no numbering.
   Phones and tablets list them as rows; desktop always shows three equal fields, a size smaller on a card under
   400 px (about 1025–1179 px wide), so the sticky stage still holds the whole card to the end of state 3. */
.pp-os-eta { margin-top: 14px; container-type: inline-size; }
.pp-os-eta dl { margin: 0; }
.pp-os-eta dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; padding: 9px 0; border-top: 1px solid var(--os-rule); }
.pp-os .pp-os-eta dt { font: 600 11px/1.35 var(--pp-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--pp-secondary-text); }
.pp-os .pp-os-eta dd { flex: none; margin: 0; font: 600 18px/1.2 var(--pp-font-display); letter-spacing: -.005em; color: var(--pp-navy); white-space: nowrap; }
.pp-os .pp-os-eta-note { margin: 12px 0 0; font: 400 13px/1.5 var(--pp-font-body); color: var(--pp-secondary-text); }
@container (min-width: 400px) {
	.pp-os-eta dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
	.pp-os-eta dl > div { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 14px 13px; border: 1px solid var(--pp-border); border-radius: 9px; }
	.pp-os .pp-os-eta dd { font-size: 22px; }
}
/* small desktops: rows would make the card about 24 px taller than the stage can hold, and it would start to scroll
   away before state 3 ends (check-c22 shipping.desktop-1100). The fields keep the stage steady with ~15 px to spare. */
@media (min-width: 1025px) {
	@container (max-width: 399.98px) {
		.pp-os-eta dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
		.pp-os-eta dl > div { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 9px 10px 10px; border: 1px solid var(--pp-border); border-radius: 9px; }
		.pp-os .pp-os-eta dt { font-size: 10.5px; letter-spacing: .06em; }
		.pp-os .pp-os-eta dd { font-size: 19px; }
		.pp-os .pp-os-eta-note { margin-top: 10px; }
	}
}

/* =========================================================================================================
 * MEET SARA — the page's strongest surface: full-bleed Navy, the largest image, white type
 * ======================================================================================================= */
.pp-os-people { display: grid; margin-top: var(--os-gap); background: var(--pp-navy); color: #fff; }
.pp-os-ship + .pp-os-people { margin-top: 0; } /* two full-bleed bands meet; no white strip between them */
.pp-os-people > .pp-os-photo { aspect-ratio: 1 / 1; border-radius: 0; }
.pp-os-people-copy { padding: 44px var(--pp-gutter-mobile) 56px; }
@media (min-width: 768px) {
	.pp-os-people > .pp-os-photo { aspect-ratio: 16 / 11; }
	.pp-os-people-copy { padding: 64px var(--pp-gutter) 72px; }
}
@media (min-width: 1025px) {
	.pp-os-people { grid-template-columns: minmax(0, 47%) minmax(0, 1fr); min-height: 760px; }
	.pp-os-people > .pp-os-photo { aspect-ratio: auto; height: 100%; min-height: 760px; }
	.pp-os-people-copy { align-self: center; max-width: 640px; padding: 96px 32px 96px 76px; }
}
/* Before Sara's approved photograph (D17; Human 2026-10-29: the section is always shown) the frame holds a typographic
   plate: the PouchPick mark and "Customer service" in the display face, never a placeholder label or a stand-in
   portrait. The photograph later takes the plate's place in the same frame and the --empty modifier goes. Until then
   phones and tablets give the plate a shorter band; desktop keeps the full-height column. */
.pp-os-photo--sara.pp-os-photo--empty { background: #1A365B; }
@media (max-width: 767px) { .pp-os-people > .pp-os-photo--empty { aspect-ratio: 2 / 1; } }
@media (min-width: 768px) and (max-width: 1024px) { .pp-os-people > .pp-os-photo--empty { aspect-ratio: 16 / 7; } }
.pp-os-plate { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 24px var(--pp-gutter-mobile) 22px; }
.pp-os-plate-mark { display: block; width: 34px; height: auto; fill: var(--pp-lime); }
.pp-os-plate-t { display: block; width: min-content; font: 600 clamp(40px, 12.4vw, 64px)/.9 var(--pp-font-display); letter-spacing: -.04em; color: rgba(255, 255, 255, .14); } /* R-D: min-content = one word per line, in any language */
@media (min-width: 768px) { .pp-os-plate { padding: 36px var(--pp-gutter) 34px; } .pp-os-plate-mark { width: 44px; } .pp-os-plate-t { font-size: 104px; } }
@media (min-width: 1025px) { .pp-os-plate { padding: 56px 56px 54px; } .pp-os-plate-mark { width: 56px; } .pp-os-plate-t { font-size: clamp(84px, 8.4vw, 132px); } }
.pp-os-people .pp-os-h2 { color: #fff; font-size: 54px; letter-spacing: -.034em; }
@media (min-width: 768px) { .pp-os-people .pp-os-h2 { font-size: 84px; } }
@media (min-width: 1025px) { .pp-os-people .pp-os-h2 { font-size: 104px; line-height: .94; } }
.pp-os-people .pp-os-lead { margin-top: 24px; color: #fff; }
.pp-os-people-copy > p:not(.pp-os-lead) { margin-top: 14px; color: var(--os-on-navy); }
.pp-os-care { margin-top: 36px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .16); }
.pp-os .pp-os-care-k { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font: 600 22px/1.2 var(--pp-font-display); letter-spacing: -.01em; color: #fff; }
.pp-os-care p { color: var(--os-on-navy); }
.pp-os-live { position: relative; flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--pp-lime); }
.pp-os-live::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(215, 255, 0, .45); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduce"]) .pp-os-live::after { animation: pp-os-pulse 2.6s var(--pp-ease-out) infinite; } }
@keyframes pp-os-pulse { 0% { transform: scale(.55); opacity: .9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.pp-os-care-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.pp-os-care-cta .pp-btn { text-decoration: none; }
.pp-os-mail { font: 600 15px/1.4 var(--pp-font-body); color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45); overflow-wrap: anywhere; }
.pp-os-mail:hover { text-decoration-color: #fff; }

/* =========================================================================================================
 * NORDIC ORIGIN AB — the operator sentence, then a letterhead (name, register, contact, legal), not a table
 * ======================================================================================================= */
.pp-os-company { display: grid; gap: 36px; margin-top: var(--os-gap); }
@media (min-width: 1025px) {
	.pp-os-company { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; }
	.pp-os-company-text { grid-column: 1 / 8; }
	.pp-os-letterhead { grid-column: 9 / 13; }
}
.pp-os-company .pp-os-h2 { font-size: 40px; }
@media (min-width: 768px) { .pp-os-company .pp-os-h2 { font-size: 56px; } }
.pp-os .pp-os-company-statement { margin-top: 20px; font: 600 26px/1.15 var(--pp-font-display); letter-spacing: -.02em; color: var(--pp-navy); }
@media (min-width: 768px) { .pp-os .pp-os-company-statement { font-size: 36px; } }
.pp-os-company-text > p:not(.pp-os-company-statement) { max-width: 34em; margin-top: 16px; }
.pp-os .pp-os-adult { margin-top: 22px; font-size: 14px; line-height: 1.6; color: var(--pp-secondary-text); }
.pp-os-letterhead { display: grid; gap: 6px; padding-top: 26px; border-top: 3px solid var(--pp-navy); font: 400 15px/1.6 var(--pp-font-body); font-style: normal; color: var(--os-ink-2); }
.pp-os-letterhead-plate { justify-self: start; display: inline-flex; margin-bottom: 12px; padding: 12px 16px; border-radius: 8px; background: var(--pp-navy); }
.pp-os-letterhead-plate img { display: block; width: 124px; height: auto; }
.pp-os-letterhead-name { font: 600 21px/1.25 var(--pp-font-display); letter-spacing: -.01em; color: var(--pp-ink); }
.pp-os-letterhead a { color: var(--pp-navy); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(20, 47, 81, .35); }
.pp-os-letterhead a:hover { text-decoration-color: currentColor; }
.pp-os-letterhead-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 14px; }

/* =========================================================================================================
 * EXPLORE POUCHPICK — four routes, set large; no cards
 * ======================================================================================================= */
.pp-os-explore { margin-top: 96px; }
@media (min-width: 1025px) { .pp-os-explore { margin-top: 128px; } }
.pp-os-explore ul { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--pp-ink); }
@media (min-width: 768px) { .pp-os-explore ul { margin-top: 36px; } }
.pp-os-explore li { border-bottom: 1px solid var(--os-rule); }
.pp-os-explore a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; padding: 16px 0 18px; color: var(--pp-ink); text-decoration: none; }
@media (min-width: 768px) { .pp-os-explore a { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: 24px; padding: 28px 0; } }
.pp-os-explore-t { font: 600 24px/1.1 var(--pp-font-display); letter-spacing: -.02em; }
@media (min-width: 768px) { .pp-os-explore-t { font-size: 38px; } }
@media (min-width: 1025px) { .pp-os-explore-t { font-size: 44px; } }
.pp-os-explore small { grid-column: 1; font: 400 14.5px/1.5 var(--pp-font-body); color: var(--pp-secondary-text); }
@media (min-width: 768px) { .pp-os-explore small { grid-column: 2; font-size: 16px; } }
.pp-os-explore a::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; font: 500 24px/1 var(--pp-font-body); color: var(--pp-navy); transition: transform var(--pp-motion-micro) var(--pp-ease-out); }
@media (min-width: 768px) { .pp-os-explore a::after { grid-column: 3; grid-row: 1; font-size: 28px; } }
@media (hover: hover) {
	.pp-os-explore a:hover .pp-os-explore-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
	.pp-os-explore a:hover::after { transform: translateX(calc(var(--pp-dir-travel) * 3)); }
}
.pp-os-explore a:focus-visible { outline: 2px solid var(--pp-navy); outline-offset: 4px; border-radius: 2px; }

/* =========================================================================================================
 * REVEALS — C2's soft entrance, restored at about a dozen moments. Start states exist only under html.pp-os-motion
 * (our-story.js adds it after its observers run, never under reduced motion); content on screen at load is never
 * hidden; each element is revealed once, as it reaches the reading area, and stays.
 *   ""       a fade and a short rise (14 / 18 / 20 px); what enters together is staggered in --os-d steps of
 *            70 / 80 / 90 ms (our-story.js numbers each batch in reading order)
 *   "marker" the same, then the statement's highlighter is drawn       "photo"  the frame fades in and opens
 *   "wipe"   the Sara portrait is uncovered from the left               the week diagram fills when its state is reached
 * ======================================================================================================= */
/* for the first frames after our-story.js adds .pp-os-motion the start states apply instantly (no load-time
   transition into hiding); .pp-os-ready then enables the entrances */
html.pp-os-motion:not(.pp-os-ready) .pp-os *, html.pp-os-motion:not(.pp-os-ready) .pp-os *::before { transition: none !important; }
.pp-os-motion .pp-os [data-os-reveal=""],
.pp-os-motion .pp-os [data-os-reveal="marker"] { transition: opacity .8s var(--pp-ease-out), transform .9s var(--pp-ease-enter); transition-delay: calc(var(--os-d, 0) * var(--os-stagger)); }
.pp-os-motion .pp-os [data-os-reveal=""]:not(.is-in),
.pp-os-motion .pp-os [data-os-reveal="marker"]:not(.is-in) { opacity: 0; transform: translate3d(0, var(--os-rise), 0); }
.pp-os-motion .pp-os [data-os-reveal="marker"] .pp-os-mark { transition: background-size 1s var(--pp-ease-out) calc(.45s + var(--os-d, 0) * var(--os-stagger)); }
.pp-os-motion .pp-os [data-os-reveal="marker"]:not(.is-in) .pp-os-mark { background-size: 0% .36em; }
.pp-os-motion .pp-os [data-os-reveal="photo"] { clip-path: inset(0 round var(--pp-radius-lg)); transition: clip-path 1.15s var(--pp-ease-enter) calc(var(--os-d, 0) * var(--os-stagger)), opacity .7s var(--pp-ease-out) calc(var(--os-d, 0) * var(--os-stagger)); }
.pp-os-motion .pp-os [data-os-reveal="photo"]:not(.is-in) { clip-path: inset(9% 7% 9% 7% round var(--pp-radius-lg)); opacity: 0; }
.pp-os-motion .pp-os [data-os-reveal="photo"] > .pp-os-photo-in { transition: transform 1.5s var(--pp-ease-enter) calc(var(--os-d, 0) * var(--os-stagger)); }
.pp-os-motion .pp-os [data-os-reveal="photo"]:not(.is-in) > .pp-os-photo-in { transform: scale(1.08); }
/* the wipe clips the inner layer, never the observed element: an element clipped to nothing never reports itself as
   visible to an IntersectionObserver (Chromium), so it would never be revealed */
.pp-os-motion .pp-os [data-os-reveal="wipe"] > .pp-os-photo-in { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--pp-ease-enter); }
.pp-os-motion .pp-os [data-os-reveal="wipe"]:not(.is-in) > .pp-os-photo-in { clip-path: inset(0 100% 0 0); }
.pp-os-motion .pp-os .pp-os-week li.is-day i::before { transition: transform .9s var(--pp-ease-enter); }
.pp-os-motion .pp-os .pp-os-week:not(.is-on) li.is-day i::before { transform: scaleX(0); }
.pp-os-motion .pp-os .pp-os-week li:nth-child(2) i::before { transition-delay: 70ms; }
.pp-os-motion .pp-os .pp-os-week li:nth-child(3) i::before { transition-delay: 140ms; }
.pp-os-motion .pp-os .pp-os-week li:nth-child(4) i::before { transition-delay: 210ms; }
.pp-os-motion .pp-os .pp-os-week li:nth-child(5) i::before { transition-delay: 280ms; }

html.pp-os-motion .pp-os [data-os-reveal]:focus-within { opacity: 1; transform: none; clip-path: none; }
@media print {
	.pp-os [data-os-reveal], .pp-os [data-os-reveal] * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.pp-os-seq .pp-os-state-vis { position: static !important; opacity: 1 !important; }
	.pp-os-stage { position: relative !important; width: 100% !important; height: 360px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.pp-os-link::after, .pp-os-explore a::after { transition: none; }
	.pp-os-seq:is(.is-live, .pp-os-js *) .pp-os-state-vis, .pp-os-seq:is(.is-live, .pp-os-js *) .pp-os-state-txt, .pp-os-seq:is(.is-live, .pp-os-js *) .pp-os-h3 { transition: none !important; }
}
/* the lab's ?motion=reduce hook behaves exactly like the setting (lab only; a port keeps the media query) */
:root[data-motion="reduce"] .pp-os-link::after, :root[data-motion="reduce"] .pp-os-explore a::after { transition: none; }
:root[data-motion="reduce"] .pp-os-seq:is(.is-live, .pp-os-js *) .pp-os-state-vis, :root[data-motion="reduce"] .pp-os-seq:is(.is-live, .pp-os-js *) .pp-os-state-txt, :root[data-motion="reduce"] .pp-os-seq:is(.is-live, .pp-os-js *) .pp-os-h3 { transition: none !important; }