/* Jinzai SoSkills — POSH page
   Black · grey · white · red on warm paper. Photos always show in full (natural
   aspect ratio): on desktop they sit full-width behind the copy, on phones they
   stack above it. Motion: brush-wipe reveals, slow zooms, parallax, kinetic word
   band, handwritten notes, drawn hearts/underlines/ticks, film grain, card tilt. */

@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.page-posh2 {
  --ps-red: #E3262B; --ps-ink: #0B0A0C; --ps-paper: #F4E9DB; --ps-grey: #8C8A90;
  --ps-line: rgba(255,255,255,.12);
  --ps-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ps-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  --ps-pad: clamp(4.5rem, 8vw, 7.5rem);
  background: var(--ps-ink);
}
.page-posh2 .h-foot .ft__h { color: var(--ps-red); }
.ps-red { color: var(--ps-red); }

/* ---------- shells + smooth joins ---------- */
.ps { position: relative; isolation: isolate; overflow: hidden; padding: var(--ps-pad) 0; }
.ps > .wrap { position: relative; z-index: 2; }
.ps-dark { background: var(--ps-ink); color: #fff; }
.ps-paper { background: var(--ps-paper); color: var(--ps-ink); }
.ps .h-seam { z-index: 1; }
.ps.h-join::before { z-index: 1; }

.ps-mission { --exit: #0B0A0C; }
.ps-law     { --join: #0B0A0C; --exit: #F4E9DB; }
.ps-areas   { --join: #F4E9DB; --exit: #0B0A0C; }
.ps-signs   { --join: #0B0A0C; --exit: #F4E9DB; }
.ps-speak   { --join: #F4E9DB; --exit: #0B0A0C; }
.ps-prog    { --join: #0B0A0C; --exit: #F4E9DB; }
.ps-impact  { --join: #F4E9DB; --exit: #140507; }
.ps-support { --join: #140507; --exit: #0B0A0C; color: #fff;
  background: radial-gradient(60% 120% at 50% 0%, rgba(227,38,43,.22), transparent 70%), #140507; }
.ps-final   { --join: #0B0A0C; background: var(--ps-ink); color: #fff; }

/* film grain on dark sections */
.ps-grain { position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: ps-grain 1.2s steps(6) infinite; }
@keyframes ps-grain { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); } 40% { transform: translate(3%,-5%); } 60% { transform: translate(-6%,-2%); } 80% { transform: translate(5%,4%); } }

/* ---------- type ---------- */
.ps-eyebrow { display: flex; align-items: center; gap: .7rem; font: 700 .74rem/1.2 var(--sans, 'Manrope', sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--ps-red); margin: 0 0 1rem; }
.ps-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.ps-eyebrow.reveal-line::before { display: none; }
.ps-h2 { font-family: var(--ps-serif); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 1.25rem; text-wrap: balance; }
.ps-h2--serif { text-transform: none; font-weight: 800; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; }
.ps-h2--light { color: #fff; }
.ps-text { font-size: 1.04rem; line-height: 1.7; color: #3B393E; max-width: 54ch; margin: 0 0 1.6rem; }
.ps-ic { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn--white { background: #fff; color: var(--ps-ink); }
.btn--white::before { background: var(--ps-red); }
.btn--white:hover { color: #fff; }
.ps-ghost::before { background: rgba(227,38,43,.18) !important; }
.ps-ghost:hover { border-color: var(--ps-red) !important; }

/* ---------- full-width photo backdrops (never cropped) ---------- */
.ps-bg { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; }
.ps-bg__in { transform: translate3d(0, var(--py, 0px), 0); }
.ps-bg picture, .ps-bg img { display: block; width: 100%; height: auto; }
.ps-bg img { transform: scale(1.06); transition: transform 2.6s cubic-bezier(.2,.8,.2,1); }
.ps.in-view .ps-bg img, .is-loaded .ps-bg--hero img { transform: scale(1); }
/* each section is at least as tall as its photo, so the whole image shows */
.ps-hero  { min-height: max(calc(100vw * 758 / 2000 + 4rem), 640px); }
.ps-law   { min-height: calc(100vw * 792 / 1986); }
.ps-areas { min-height: calc(100vw * 793 / 1983); }
.ps-signs { min-height: calc(100vw * 941 / 1672); }
.ps-speak { min-height: calc(100vw * 793 / 1983); }

/* ---------- handwritten notes ---------- */
.ps-script { position: absolute; margin: 0; font: 700 clamp(1.7rem, 2.4vw, 2.3rem)/.95 var(--ps-hand); color: var(--ps-ink); transform: rotate(-7deg); z-index: 3; pointer-events: none; }
.ps-script.reveal { opacity: 1; transform: rotate(-7deg); }
.ps-script__l { display: block; clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.6,0,.3,1); transition-delay: calc(.6s + var(--i) * .32s); }
.ps-script.in .ps-script__l, .is-loaded .ps-script--hero .ps-script__l { clip-path: inset(0 -10% 0 0); }
.ps-heart { display: block; width: 46px; height: 42px; margin: .5rem 0 0 30%; }
.ps-heart path { fill: none; stroke: var(--ps-red); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease 2s; }
.ps-script.in .ps-heart path, .is-loaded .ps-script--hero .ps-heart path { stroke-dashoffset: 0; }

/* ---------- brush-wipe photo reveal (inline photos) ---------- */
.ps-wipe { position: relative; margin: 0; }
.ps-wipe.reveal { opacity: 1; transform: none; }
.ps-wipe picture { position: relative; display: block; overflow: hidden; border-radius: 10px; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path 1.3s cubic-bezier(.7,0,.2,1); box-shadow: 0 40px 80px -40px rgba(11,10,12,.55); }
.ps-wipe.in picture { clip-path: polygon(0 0, 115% 0, 100% 100%, 0 100%); }
.ps-wipe picture::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -30%; width: 22%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, var(--ps-red) 30%, #ff5a5e 60%, transparent); opacity: 0; }
.ps-wipe.in picture::after { animation: ps-brush 1.3s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes ps-brush { 0% { left: -30%; opacity: 1; } 85% { opacity: 1; } 100% { left: 115%; opacity: 0; } }
.ps-wipe img { display: block; width: 100%; height: auto; transform: scale(1.12); transition: transform 2.2s cubic-bezier(.2,.8,.2,1); }
.ps-wipe.in img { transform: scale(1); }
.ps-wipe:hover img { transform: scale(1.03); transition-duration: 1s; }

/* ================= 01 HERO ================= */
.ps-hero { background: var(--ps-ink); color: #fff; display: flex; align-items: center; padding: clamp(7rem, 10vw, 8.5rem) 0 clamp(4rem, 6vw, 5rem); }
.ps-bg--hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11,10,12,.92) 0%, rgba(11,10,12,.7) 30%, rgba(11,10,12,.15) 52%, transparent 65%), linear-gradient(180deg, var(--ps-ink) 0%, transparent 18%); }
.ps-hero__sweep { position: absolute; top: -20%; bottom: -20%; width: 26%; left: -40%; z-index: 1; pointer-events: none; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(227,38,43,.2), rgba(255,255,255,.07), transparent); animation: ps-sweep 8s cubic-bezier(.6,0,.3,1) 1.5s infinite; }
@keyframes ps-sweep { 0% { left: -40%; } 45%, 100% { left: 130%; } }
.ps-hero__grid { position: relative; }
.ps-hero__copy { max-width: 620px; }
.ps-hero__title { font-family: var(--ps-serif); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 7vw, 6.4rem); line-height: .94; letter-spacing: -.015em; margin: 0 0 1.6rem; }
.ps-hero__title .line:nth-child(1) > span { transition-delay: .15s; }
.ps-hero__title .line:nth-child(2) > span { transition-delay: .3s; }
.ps-hero__title .line:nth-child(3) > span { transition-delay: .45s; }
.ps-hero__title .ps-red { text-shadow: 0 0 50px rgba(227,38,43,.45); }
.ps-hero__sub { max-width: 44ch; color: rgba(255,255,255,.8); font-size: 1.06rem; line-height: 1.65; margin: 0 0 2rem; }
.ps-hero__sub > span { transition-delay: .6s; }
.ps-hero__cta > span { display: flex !important; flex-wrap: wrap; gap: .8rem; transition-delay: .75s; padding: 4px; }
.ps-script--hero { right: 0; top: -1rem; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.ps-scroll { position: absolute; left: 50%; bottom: 1.6rem; z-index: 3; width: 26px; height: 42px; margin-left: -13px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 14px; }
.ps-scroll span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--ps-red); animation: ps-wheel 1.8s ease-in-out infinite; }
@keyframes ps-wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- kinetic word band ---------- */
.ps-marquee { position: relative; z-index: 3; overflow: hidden; padding: 1.4rem 0; background: linear-gradient(180deg, var(--ps-ink) 50%, var(--ps-paper) 50%); }
.ps-marquee__track { display: flex; width: max-content; align-items: center; gap: 1.6rem; padding: 1rem 0; background: var(--ps-red); color: #fff; transform: rotate(-1.6deg) scale(1.04); box-shadow: 0 20px 40px -20px rgba(227,38,43,.6); animation: ps-mq 38s linear infinite; }
.ps-marquee__track span { font: italic 800 clamp(1.1rem, 2vw, 1.6rem)/1 var(--ps-serif); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ps-marquee__track i { font-style: normal; color: rgba(255,255,255,.6); font-size: .9rem; }
.ps-marquee:hover .ps-marquee__track { animation-play-state: paused; }
@keyframes ps-mq { from { translate: 0 0; } to { translate: -50% 0; } }

/* ================= 02 MISSION ================= */
.ps-mission { padding-top: clamp(3rem, 6vw, 5rem); }
.ps-mission__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ps-trio { list-style: none; margin: 2rem 0 0; padding: 1.6rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(11,10,12,.14); }
.ps-trio li { display: flex; flex-direction: column; gap: .7rem; padding-right: 1rem; font: 800 .74rem/1.3 var(--sans, 'Manrope', sans-serif); letter-spacing: .1em; text-transform: uppercase; }
.ps-trio li + li { border-left: 1px solid rgba(11,10,12,.14); padding-left: 1.2rem; }
.ps-trio .ps-ic { color: var(--ps-red); width: 36px; height: 36px; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.ps-trio li:hover .ps-ic { transform: translateY(-4px) rotate(-6deg); }

/* ================= 03 LAW ================= */
.ps-bg--law::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11,10,12,.75) 0%, rgba(11,10,12,.35) 45%, transparent 60%); }
.ps-law { display: flex; align-items: center; }
.ps-law__inner > * { max-width: min(760px, 56vw); }
.ps-law__aside { color: rgba(255,255,255,.75); line-height: 1.7; margin: 0 0 2.4rem; }
.ps-ul { position: relative; white-space: nowrap; }
.ps-ul svg { position: absolute; left: 0; right: 0; bottom: -.32em; width: 100%; height: .4em; overflow: visible; }
.ps-ul path { fill: none; stroke: var(--ps-red); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1) .5s; }
.reveal.in .ps-ul path { stroke-dashoffset: 0; }
.ps-law .ps-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); max-width: min(900px, 60vw); }
.ps-step { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; padding: 0 1.3rem; border-left: 1px solid var(--ps-line); }
.ps-step:first-child { border-left: 0; padding-left: 0; }
.ps-step__n { font: 800 2.2rem/1 var(--ps-serif); color: var(--ps-red); }
.ps-step .ps-ic { width: 30px; height: 30px; color: #fff; align-self: center; transition: transform .5s, color .4s; }
.ps-step:hover .ps-ic { transform: scale(1.15); color: var(--ps-red); }
.ps-step h3 { grid-column: 1 / -1; font: 800 .8rem/1.3 var(--sans, 'Manrope', sans-serif); letter-spacing: .1em; text-transform: uppercase; margin: 1.2rem 0 .5rem; }
.ps-step p { grid-column: 1 / -1; margin: 0; font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.65); }

/* ================= 04 AREAS ================= */
.ps-areas { display: flex; align-items: center; }
.ps-areas__inner { position: relative; }
.ps-areas__copy { max-width: min(700px, 52vw); }
.ps-areas__list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.ps-area { display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; padding: 0 1.1rem; border-left: 1px solid rgba(11,10,12,.14); }
.ps-area:first-child { border-left: 0; padding-left: 0; }
.ps-area__n { font: 800 2rem/1 var(--ps-serif); color: var(--ps-red); }
.ps-area .ps-ic { color: var(--ps-red); width: 30px; height: 30px; align-self: center; }
.ps-area h3 { grid-column: 1 / -1; font: 800 .78rem/1.3 var(--sans, 'Manrope', sans-serif); letter-spacing: .08em; text-transform: uppercase; margin: 1.2rem 0 .5rem; }
.ps-area p { grid-column: 1 / -1; margin: 0; font-size: .9rem; line-height: 1.55; color: #4A484D; }
.ps-note { margin: 2.2rem 0 0; font-size: .86rem; color: #66646A; border-left: 3px solid var(--ps-red); padding-left: 1rem; max-width: 70ch; }
.ps-script--areas { left: min(700px, 52vw); margin-left: 1rem; top: 0; }

/* ================= 05 SIGNS ================= */
.ps-bg--signs::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(270deg, rgba(11,10,12,.92) 0%, rgba(11,10,12,.7) 38%, transparent 58%); }
.ps-signs { display: flex; align-items: center; }
.ps-signs__inner > * { margin-left: auto; max-width: min(660px, 48vw); }
.ps-signs .ps-h2 { font-size: clamp(1.9rem, 2.9vw, 2.8rem); }
.ps-signlist { list-style: none; margin-top: 1.6rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ps-line); border: 1px solid var(--ps-line); border-radius: 14px; overflow: hidden; backdrop-filter: blur(6px); }
.ps-signlist li { display: flex; gap: .9rem; padding: 1.2rem; background: rgba(15,13,16,.82); transition: background .4s; }
.ps-signlist li:hover { background: rgba(60,10,14,.85); }
.ps-signlist__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(227,38,43,.5); color: var(--ps-red); flex: none; transition: background .4s, color .4s, transform .4s; }
.ps-signlist li:hover .ps-signlist__ic { background: var(--ps-red); color: #fff; transform: rotate(-10deg) scale(1.08); }
.ps-signlist .ps-ic { width: 20px; height: 20px; }
.ps-signlist h3 { margin: .1rem 0 .3rem; font: 700 .96rem/1.3 var(--sans, 'Manrope', sans-serif); color: #fff; }
.ps-signlist p { margin: 0; font-size: .86rem; line-height: 1.5; color: rgba(255,255,255,.62); }
.ps-pill { margin-top: 1.6rem; }
.ps-pill span { display: inline-block; padding: .8rem 1.4rem; border-radius: 999px; border: 1px solid rgba(227,38,43,.45); background: rgba(227,38,43,.12); color: #fff; font-weight: 600; font-size: .92rem; }

/* ================= 06 SPEAK ================= */
.ps-speak { display: flex; align-items: center; }
.ps-speak__copy { max-width: min(560px, 40vw); }
.ps-respond { list-style: none; margin: 0 0 1.8rem; padding: .4rem 1.3rem; background: rgba(255,255,255,.75); backdrop-filter: blur(8px); border-radius: 16px; box-shadow: 0 30px 60px -34px rgba(11,10,12,.4), 0 0 0 1px rgba(11,10,12,.06); }
.ps-respond.reveal { opacity: 1; transform: none; }
.ps-respond li { display: flex; align-items: center; gap: .9rem; padding: .72rem 0; font-weight: 600; font-size: .94rem; opacity: 0; transform: translateX(-16px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(.3s + var(--d) * 120ms); }
.ps-respond li + li { border-top: 1px solid rgba(11,10,12,.08); }
.ps-respond.in li { opacity: 1; transform: none; }
.ps-respond .ps-ic { color: var(--ps-red); width: 22px; height: 22px; }
.ps-script--speak { right: 0; top: -2rem; }

/* ================= 07 PROGRAMMES ================= */
.ps-prog__head { max-width: 760px; margin-bottom: 2.6rem; }
.ps-prog__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; perspective: 1200px; }
.ps-pcard { position: relative; padding: clamp(1.8rem, 3vw, 2.6rem); border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, #19161B, #0E0C0F); border: 1px solid rgba(255,255,255,.1); transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s, opacity 1s; transform-style: preserve-3d; }
.ps-pcard.reveal.in { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.ps-pcard.is-tilting { transition: transform .1s linear, box-shadow .6s; }
.ps-pcard::before { content: ""; position: absolute; width: 380px; height: 380px; right: -140px; top: -160px; border-radius: 50%; filter: blur(30px); opacity: .5; transition: transform 1s; }
.ps-pcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 62%, var(--ps-c, var(--ps-red)) 80%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ps-spin 6s linear infinite; }
@keyframes ps-spin { to { --ang: 360deg; } }
.ps-pcard:hover::before { transform: scale(1.25); }
.ps-pcard .tilt-glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.14), transparent 50%); }
.ps-pcard.is-tilting .tilt-glare { opacity: 1; }
.ps-pcard--red::before { background: radial-gradient(circle, rgba(227,38,43,.6), transparent 65%); }
.ps-pcard--red:hover { box-shadow: 0 30px 70px -30px rgba(227,38,43,.55); }
.ps-pcard--grey { --ps-c: #fff; }
.ps-pcard--grey::before { background: radial-gradient(circle, rgba(200,198,204,.35), transparent 65%); }
.ps-pcard--grey:hover { box-shadow: 0 30px 70px -30px rgba(255,255,255,.25); }
.ps-pcard > * { position: relative; }
.ps-pcard__tag { font: 700 .72rem/1 var(--sans, 'Manrope', sans-serif); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1rem; color: var(--ps-red); }
.ps-pcard--grey .ps-pcard__tag { color: #C9C7CC; }
.ps-pcard h3 { font: 900 clamp(1.5rem, 2.3vw, 2rem)/1.08 var(--ps-serif); text-transform: uppercase; margin: 0 0 1.4rem; color: #fff; max-width: 20ch; }
.ps-pcard ul { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .8rem; }
.ps-pcard li { display: flex; align-items: center; gap: .8rem; color: rgba(255,255,255,.85); }
.ps-pcard li i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ps-red); flex: none; }
.ps-pcard--grey li i { background: #fff; }
.ps-pcard li svg { width: 14px; height: 14px; }
.ps-pcard .tk { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease; }
.ps-pcard--grey .tk { stroke: var(--ps-ink); }
.ps-pcard li:nth-child(1) .tk { transition-delay: .5s; } .ps-pcard li:nth-child(2) .tk { transition-delay: .7s; }
.ps-pcard li:nth-child(3) .tk { transition-delay: .9s; } .ps-pcard li:nth-child(4) .tk { transition-delay: 1.1s; }
.ps-pcard.in .tk { stroke-dashoffset: 0; }

/* ================= 08 IMPACT ================= */
.ps-impact__img { margin-bottom: clamp(2rem, 4vw, 3rem); }
.ps-script--impact { left: 4%; top: 8%; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.ps-impact__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }

/* ================= 09 SUPPORT ================= */
.ps-support { padding: clamp(3.5rem, 6vw, 5rem) 0; }
.ps-support__t { font: 900 clamp(1.4rem, 2.4vw, 2rem)/1.1 var(--ps-serif); text-transform: uppercase; margin: 0 0 1.8rem; text-align: center; }
.ps-help { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ps-help a, .ps-help li > div { display: grid; gap: .35rem; height: 100%; padding: 1.5rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); color: #fff; text-decoration: none; transition: border-color .4s, transform .4s, background .4s; box-sizing: border-box; }
.ps-help a:hover { border-color: var(--ps-red); background: rgba(227,38,43,.1); transform: translateY(-4px); }
.ps-help__n { font: 900 2.1rem/1 var(--ps-serif); color: var(--ps-red); }
.ps-help__n--ic .ps-ic { width: 36px; height: 36px; }
.ps-help__t { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .82rem; }
.ps-help__d { color: rgba(255,255,255,.65); font-size: .9rem; line-height: 1.5; }

/* ================= 10 FINAL ================= */
.ps-final { padding: clamp(4rem, 7vw, 6rem) 0; }
.ps-final::after { content: ""; position: absolute; inset: auto -10% -60% 40%; height: 120%; z-index: 0; background: radial-gradient(closest-side, rgba(227,38,43,.28), transparent); animation: ps-glow 10s ease-in-out infinite alternate; }
@keyframes ps-glow { to { transform: scale(1.15) translateX(-4%); opacity: .75; } }
.ps-final__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.ps-final__t { font: 900 clamp(2rem, 3.6vw, 3.2rem)/1.04 var(--ps-serif); text-transform: uppercase; margin: 0; }
.ps-final__side p { color: rgba(255,255,255,.75); font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.5rem; }
.ps-final__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.ps [class*="__grid"] > *, .ps-steps > *, .ps-areas__list > *, .ps-impact__row > * { min-width: 0; }

/* ================= tablet + phone: photo stacks above the copy, shown in full ================= */
@media (max-width: 1000px) {
  .ps-hero, .ps-law, .ps-areas, .ps-signs, .ps-speak { min-height: 0; display: block; padding-top: 0; }
  .ps-bg { position: relative; margin-bottom: 1.6rem; }
  .ps-bg__in { transform: none; }
  .ps-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 30%; z-index: 1; background: linear-gradient(0deg, var(--fade, var(--ps-paper)), transparent); }
  .ps-hero .ps-bg, .ps-law .ps-bg, .ps-signs .ps-bg { --fade: var(--ps-ink); }
  .ps-bg--hero::before, .ps-bg--law::before, .ps-bg--signs::before { background: linear-gradient(180deg, var(--ps-ink) 0, transparent 22%); }
  .ps-hero .ps-bg { margin-top: 64px; }
  .ps-hero { padding-bottom: 4.5rem; }
  .ps-scroll { display: none; }
  .ps-law__inner > *, .ps-law .ps-steps, .ps-areas__copy, .ps-signs__inner > *, .ps-speak__copy { max-width: none; }
  .ps-steps, .ps-areas__list { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .ps-step:nth-child(3), .ps-area:nth-child(3) { border-left: 0; padding-left: 0; }
  .ps-mission__grid, .ps-final__grid, .ps-impact__row { grid-template-columns: 1fr; }
  .ps-script--hero { top: auto; bottom: -3.5rem; right: 2%; }
  .ps-hero .ps-script--hero { position: absolute; }
  .ps-script--areas, .ps-script--speak { position: relative; left: auto; right: auto; top: auto; margin: 1.8rem 0 0 auto; width: max-content; }
  .ps-signs .ps-bg { margin-bottom: 0; }
}
@media (max-width: 700px) {
  .ps-hero__title { font-size: clamp(2.8rem, 14vw, 4rem); }
  .ps-script { font-size: 1.5rem; }
  .ps-trio { grid-template-columns: 1fr; gap: 1rem; }
  .ps-trio li { flex-direction: row; align-items: center; }
  .ps-trio li + li { border-left: 0; padding-left: 0; }
  .ps-steps, .ps-areas__list { grid-template-columns: 1fr; }
  .ps-step, .ps-area { border-left: 0 !important; padding: 0 0 1.4rem !important; border-bottom: 1px solid var(--ps-line); }
  .ps-area { border-bottom-color: rgba(11,10,12,.12); }
  .ps-signlist, .ps-prog__grid, .ps-help { grid-template-columns: 1fr; }
  .ps-script--impact { font-size: 1.2rem; top: 6%; }
  .ps-hero { padding-bottom: 6rem; }
  .ps-script--hero { bottom: -5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-script__l { clip-path: none !important; transition: none !important; }
  .ps-heart path, .ps-ul path, .ps-pcard .tk { stroke-dashoffset: 0 !important; transition: none !important; }
  .ps-wipe picture { clip-path: none !important; transition: none !important; }
  .ps-wipe picture::after, .ps-hero__sweep, .ps-scroll span { display: none; }
  .ps-wipe img, .ps-bg img { transform: none !important; }
  .ps-respond li { opacity: 1 !important; transform: none !important; }
  .ps-grain, .ps-marquee__track, .ps-pcard::after, .ps-final::after { animation: none !important; }
}
/* fine-tuning: keep copy clear of faces */
@media (min-width: 1001px) {
  .ps-law .ps-steps { max-width: min(820px, 52vw); }
  .ps-areas__copy { max-width: min(640px, 45vw); }
  .ps-areas__list { grid-template-columns: repeat(2, 1fr); row-gap: 1.6rem; }
  .ps-area:nth-child(3) { border-left: 0; padding-left: 0; }
  .ps-script--areas { left: auto; right: 0; top: -3.5rem; }
  .ps-signs__inner > * { max-width: min(620px, 44vw); }
  .ps-speak__copy { max-width: min(540px, 38vw); }
}
@media (max-width: 1000px) {
  .ps-law .ps-steps { grid-template-columns: 1fr 1fr; max-width: none; }
  .ps-signs .ps-bg { margin-bottom: 1.6rem; }
  /* teddy + hug: the left 40% is empty paper, so trim only that on small screens */
  .ps-bg--areas, .ps-bg--speak { overflow: hidden; }
  .ps-bg--areas .ps-bg__in, .ps-bg--speak .ps-bg__in { width: 165%; margin-left: -65%; }
}
@media (max-width: 700px) { .ps-law .ps-steps { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .ps-signs .ps-bg::after { height: 50%; bottom: -2px; } }

/* =====================================================================
   ULTRA-MODERN LAYER
   ===================================================================== */
.ps-prog  { --exit: #0B0A0C; }
.ps-stats { background: var(--ps-ink); color: #fff; padding: clamp(4rem, 7vw, 6rem) 0 clamp(6rem, 9vw, 8rem); }
.ps-stats::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(60px, 7vw, 110px); z-index: 1; background: linear-gradient(180deg, transparent, var(--ps-paper)); pointer-events: none; }

/* --- intro curtain --- */
.ps-curtain { position: fixed; inset: 0; z-index: 400; pointer-events: none; display: grid; place-items: center; }
.ps-curtain__a, .ps-curtain__b { position: absolute; inset: 0; }
.ps-curtain__a { background: var(--ps-red); }
.ps-curtain__b { background: var(--ps-ink); }
.ps-curtain__w { position: relative; margin: 0; font: 900 clamp(3rem, 9vw, 8rem)/1 var(--ps-serif); text-transform: uppercase; color: #fff; letter-spacing: -.02em; clip-path: inset(0 100% 0 0); animation: ps-cw 1s cubic-bezier(.7,0,.2,1) .05s forwards; }
.ps-curtain__w b { color: var(--ps-red); }
@keyframes ps-cw { to { clip-path: inset(0 0 0 0); } }
.ps-curtain.go .ps-curtain__b { animation: ps-up 1s cubic-bezier(.8,0,.2,1) .9s forwards; }
.ps-curtain.go .ps-curtain__a { animation: ps-up 1s cubic-bezier(.8,0,.2,1) 1.05s forwards; }
.ps-curtain.go .ps-curtain__w { animation: ps-cw 1s cubic-bezier(.7,0,.2,1) .05s forwards, ps-wout .5s ease .85s forwards; }
@keyframes ps-up { to { transform: translateY(-101%); } }
@keyframes ps-wout { to { opacity: 0; transform: translateY(-30px); } }

/* --- hero depth + pointer spotlight --- */
.ps-hero { --hx: 0; --hy: 0; }
.ps-bg--hero .ps-bg__in { transform: translate3d(calc(var(--hx) * -22px), calc(var(--hy) * -14px), 0); }
.ps-hero__copy { transform: translate3d(calc(var(--hx) * 10px), calc(var(--hy) * 8px), 0); }
.ps-script--hero { translate: calc(var(--hx) * 26px) calc(var(--hy) * 20px); }
.ps-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(227,38,43,.18), transparent 60%); }
.ps-hero.spot-on::after { opacity: 1; }
/* animated sheen across "Empower." */
.ps-hero__title .ps-red { background: linear-gradient(100deg, var(--ps-red) 0 40%, #ff9a9c 50%, var(--ps-red) 60% 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ps-sheen 5s ease-in-out 2s infinite; }
@keyframes ps-sheen { 0% { background-position: 100% 0; } 40%, 100% { background-position: -50% 0; } }

/* --- buttons: light streak + glow --- */
.page-posh2 .btn--red { box-shadow: 0 10px 30px -12px rgba(227,38,43,.7); }
.page-posh2 .btn--red > span:first-child { position: relative; }
.page-posh2 .btn--red { background-image: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); background-size: 260% 100%; background-position: 130% 0; animation: ps-btn 4.5s ease-in-out infinite; }
@keyframes ps-btn { 0%, 60% { background-position: 130% 0; } 100% { background-position: -40% 0; } }

/* --- marquee leans with scroll speed --- */
.ps-marquee__track { transform: rotate(-1.6deg) skewX(var(--sk, 0deg)) scale(1.04); transition: transform .2s linear; }

/* --- pointer spotlight on cards --- */
.ps-spot { position: relative; }
.ps-spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(227,38,43,.22), transparent 65%); }
.ps-spot:hover::before { opacity: 1; }
.ps-spot > * { position: relative; z-index: 1; }
.ps-respond.ps-spot::before { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(227,38,43,.1), transparent 65%); }
.ps-pcard.ps-spot::before { width: auto; height: auto; right: 0; top: 0; filter: none; border-radius: inherit; }

/* --- photos lean toward the pointer + red duotone flash on hover --- */
.ps-wipe { perspective: 900px; }
.ps-wipe picture { transform: rotateY(calc(var(--wx, 0) * 6deg)) rotateX(calc(var(--wy, 0) * -6deg)); transition: clip-path 1.3s cubic-bezier(.7,0,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); }
.ps-wipe picture::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(227,38,43,.35), transparent 55%); mix-blend-mode: multiply; opacity: 0; transition: opacity .5s; }
.ps-wipe:hover picture::before { opacity: 1; }

/* --- cursor: red, blend, "view" over photos --- */
.page-posh2 .cur-ring.ps-ring { border-color: rgba(227,38,43,.7); }
.page-posh2 .cur-ring.ps-ring.is-link { background: rgba(227,38,43,.14); border-color: var(--ps-red); }
.page-posh2 .cur-ring.ps-ring::after { content: "View"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 .62rem/1 var(--sans, 'Manrope', sans-serif); letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .3s; }
.page-posh2 .cur-ring.ps-ring.is-view { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--ps-red); border-color: var(--ps-red); }
.page-posh2 .cur-ring.ps-ring.is-view::after { opacity: 1; }
.page-posh2 .progress span { background: linear-gradient(90deg, var(--ps-red), #ff8a8d); height: 3px; }

/* --- giant outline words drifting with scroll --- */
.ps-giant { position: absolute; left: -10%; top: 50%; margin: -0.5em 0 0; z-index: 0; white-space: nowrap; pointer-events: none;
  font: italic 900 clamp(6rem, 16vw, 15rem)/1 var(--ps-serif); text-transform: uppercase; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.09); will-change: transform; }
.ps-giant--final { top: auto; bottom: -.15em; margin: 0; -webkit-text-stroke-color: rgba(227,38,43,.22); }

/* --- the law in numbers --- */
.ps-stats__t { font: 900 clamp(1.8rem, 3.2vw, 2.8rem)/1.05 var(--ps-serif); text-transform: uppercase; margin: 0 0 2.4rem; }
.ps-statlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ps-stat { display: grid; gap: .8rem; align-content: start; padding: 1.8rem 1.5rem; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s; }
.ps-stat:hover { transform: translateY(-6px); border-color: rgba(227,38,43,.6); }
.ps-stat__n { display: flex; align-items: baseline; gap: .35rem; font: 900 clamp(2.6rem, 4.6vw, 4.2rem)/1 var(--ps-serif); color: #fff; font-variant-numeric: tabular-nums; }
.ps-stat__n i { font: italic 700 1rem/1 var(--ps-serif); color: var(--ps-red); }
.ps-stat__n .ps-stat__pre { font: 900 .55em/1 var(--ps-serif); font-style: normal; color: var(--ps-red); }
.ps-stat__d { color: rgba(255,255,255,.68); font-size: .92rem; line-height: 1.5; }
.ps-stat::after { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 2px; background: var(--ps-red); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.7,0,.2,1) .3s; z-index: 2; }
.ps-stat.in::after { transform: scaleX(1); }
.ps-stats__src { margin: 1.6rem 0 0; font-size: .8rem; color: rgba(255,255,255,.45); }

/* --- section headings: red bar draws in under eyebrows --- */
.ps-eyebrow.reveal::before { transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.7,0,.2,1) .2s; }
.ps-eyebrow.reveal.in::before { transform: scaleX(1); }

@media (max-width: 1000px) { .ps-statlist { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ps-statlist { grid-template-columns: 1fr; } .ps-giant { font-size: 7rem; } }
@media (prefers-reduced-motion: reduce) {
  .ps-curtain { display: none; }
  .ps-hero__title .ps-red, .page-posh2 .btn--red { animation: none !important; }
  .ps-giant { transform: none !important; }
}