/* =====================================================================
   SHANEXWEBCO — Portfolio · Shanawaz · v2
   Dark editorial (black + red). Mobile-first.
   File: assets/css/portfolio.css
   00 Tokens · 01 Screens · 02 Hero · 03 Statement · 04 Marquee · 05 About
   06 What I do · 07 Difference · 08 Method · 09 Work · 10 Testimonials
   11 FAQ · 12 Finale · 13 Motion safety
   ===================================================================== */

/* 00 — Tokens */
.pf {
    --red: #D71F26;
    --ink: #0B0B0C;
    --ink-2: #131315;
    --ink-3: #1D1D20;
    --paper: #F3EEE6;
    --mute: #A29C94;
    --line: rgba(243, 238, 230, .12);
    --cond: 'Anton', 'Oswald', 'Arial Narrow', Impact, sans-serif;
    --oswald: 'Oswald', 'Arial Narrow', sans-serif;
    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --script: 'Mrs Saint Delafield', 'Brush Script MT', cursive;
    --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --hh: var(--sx-hh, 0px);
    --pad: clamp(18px, 5vw, 64px);
    position: relative;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
.pf img { display: block; max-width: 100%; }
.pf a { color: inherit; }
.pf h1, .pf h2, .pf h3, .pf p, .pf ol, .pf ul, .pf dl, .pf dd, .pf figure, .pf blockquote { margin: 0; padding: 0; }
.pf ol, .pf ul { list-style: none; }
.pf-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); }
.pf-ch { display: inline-block; will-change: transform; }

/* Film grain */
.pf-grain { position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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: pfGrain 1.2s steps(6) infinite; }
@keyframes pfGrain { 0%{transform:translate(0,0)} 25%{transform:translate(-4%,3%)} 50%{transform:translate(3%,-4%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(0,0)} }

/* Scroll progress */
.pf-progress { position: fixed; left: 0; right: 0; top: var(--sx-hh, 0px); height: 3px; z-index: 70; pointer-events: none; }
.pf-progress span { display: block; height: 100%; background: #D71F26; transform: scaleX(0); transform-origin: 0 50%; }

/* Red cursor (desktop, GSAP only) */
.pf-cursor { display: none; }
.pf-has-cursor .pf-cursor { display: block; position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; }
.pf-cursor span { display: block; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #D71F26; transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s, opacity .3s; }
.pf-cursor.is-link span { transform: scale(3.6); background: rgba(215,31,38,.35); }

/* Kicker */
.pf-kicker { display: inline-flex; gap: 8px; align-items: baseline; font: 600 12px/1 var(--oswald); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin-bottom: clamp(18px, 3vw, 30px); }
.pf-kicker b { color: var(--red); font-weight: 700; }

/* Buttons */
.pf-btn { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; padding: 15px 26px; border-radius: 999px; background: var(--red); color: #fff !important; font: 600 14px/1 var(--oswald); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; box-shadow: 0 14px 40px -12px rgba(215,31,38,.7); transition: background .3s, box-shadow .3s; will-change: transform; }
.pf-btn span { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pf-btn:hover { background: #ef2a31; box-shadow: 0 18px 50px -10px rgba(215,31,38,.9); }
.pf-btn:hover span { transform: translateX(5px); }
.pf-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.pf-btn--sm { padding: 12px 20px; font-size: 13px; }
.pf-btn--light { background: var(--paper); color: var(--ink) !important; box-shadow: 0 14px 40px -14px rgba(0,0,0,.6); }
.pf-btn--light:hover { background: #fff; box-shadow: 0 18px 50px -12px rgba(0,0,0,.7); }

/* Shared type */
.pf-serif { font: 700 clamp(44px, 11vw, 104px)/.95 var(--serif); color: var(--red); text-transform: uppercase; letter-spacing: -.01em; }
.pf-serif span { display: block; }
.pf-tags { font: 500 13px/1.5 var(--oswald); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-top: 18px; }
.pf-quote { font: italic 500 clamp(22px, 3.4vw, 36px)/1.3 var(--serif); color: var(--paper); }
.pf-quote em { color: var(--red); }
.pf-sign { margin-top: 28px; }
.pf-sign span { display: block; font: 400 clamp(54px, 8vw, 84px)/1 var(--script); color: var(--red); transform: rotate(-4deg); transform-origin: left; }
.pf-sign small { display: block; margin-top: 8px; font: 600 11px/1.4 var(--oswald); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.pf-mono { display: grid; place-items: center; width: 100%; height: 100%; font: 700 clamp(120px, 30vw, 300px)/1 var(--serif); color: var(--red); background: radial-gradient(circle at 50% 35%, #2a0d0f, var(--ink-2) 70%); }

/* =====================================================================
   01 — Screens: full-height rounded cards that stack over each other
   ===================================================================== */
.pf-screen { position: relative; min-height: calc(100svh - var(--hh)); padding: clamp(64px, 10vw, 120px) 0; background: var(--ink-2); display: flex; align-items: center; border-radius: 26px 26px 0 0; box-shadow: 0 -30px 60px -20px rgba(0,0,0,.85); }
.pf-screen > .pf-wrap { position: relative; }
.pf-about, .pf-diff { background: var(--ink); }
.pf-gsap .pf-screen { will-change: transform; }

/* =====================================================================
   02 — Hero
   ===================================================================== */
.pf-hero { height: calc(100svh - var(--hh)); min-height: 560px; padding: 0; overflow: hidden; display: block; border-radius: 0; box-shadow: none; background: radial-gradient(ellipse 70% 60% at 50% 75%, #1c0709 0%, var(--ink) 70%); }
.pf-hero__glow { position: absolute; left: 50%; top: 60%; width: min(100vw, 900px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(215,31,38,.42), rgba(215,31,38,0) 65%); pointer-events: none; }
.pf-gsap .pf-hero__glow { transform: none; margin: calc(min(100vw, 900px) / -2) 0 0 calc(min(100vw, 900px) / -2); }
.pf-crumb { position: absolute; top: 22px; left: var(--pad); z-index: 5; font: 500 11px/1 var(--oswald); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.pf-crumb ol { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-crumb li + li::before { content: '/'; margin-right: 8px; opacity: .5; }
.pf-crumb a { text-decoration: none; }
.pf-crumb a:hover { color: var(--red); }
.pf-crumb [aria-current] { color: var(--paper); }

.pf-hero__name { position: absolute; left: 0; right: 0; top: 21%; z-index: 1; text-align: center; white-space: nowrap; font: 700 min(15.2vw, 270px)/.82 var(--serif); letter-spacing: -.02em; color: var(--red); pointer-events: none; }
.pf-hero__name .pf-ch { background: linear-gradient(180deg, #ff444b 0%, #D71F26 45%, #861014 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pf-hero__figure { position: absolute; left: 50%; bottom: 0; z-index: 2; width: min(92vw, 560px); height: 70%; margin-left: calc(min(92vw, 560px) / -2); display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.pf-hero__figure img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 30px 60px rgba(0,0,0,.65)) contrast(1.05); }
.pf-hero__figure::after { content: ''; position: absolute; left: -30%; right: -30%; bottom: 0; height: 30%; background: linear-gradient(0deg, var(--ink) 10%, rgba(11,11,12,0)); }
.pf-hero__ghost { width: 70%; height: 92%; border-radius: 48% 48% 0 0; background: linear-gradient(180deg, #24191a, #0f0d0e); }
.pf-hero__tag { position: absolute; z-index: 3; left: var(--pad); bottom: 104px; font: 400 clamp(24px, 6.4vw, 40px)/1.02 var(--cond); text-transform: uppercase; letter-spacing: .02em; }
.pf-hero__tag li.is-red { color: var(--red); }
.pf-hero__sign { position: absolute; z-index: 3; right: var(--pad); bottom: 120px; font: 400 clamp(46px, 11vw, 96px)/1 var(--script); color: var(--paper); transform: rotate(-8deg); }
.pf-hero__side { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); bottom: 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pf-hero__side p { text-align: right; font: 500 11px/1.5 var(--oswald); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.pf-hero__side strong { display: block; color: var(--paper); font-weight: 600; }
.pf-hero__scroll { display: none; }

@media (min-width: 900px) {
    .pf-hero__name { top: 12%; }
    .pf-hero__figure { height: 84%; width: min(46vw, 660px); margin-left: calc(min(46vw, 660px) / -2); }
    .pf-hero__tag { bottom: auto; top: 46%; font-size: clamp(36px, 3.6vw, 58px); }
    .pf-hero__sign { bottom: auto; top: 50%; }
    .pf-hero__side { left: auto; right: var(--pad); bottom: 44px; flex-direction: column; align-items: flex-end; }
    .pf-hero__scroll { display: block; position: absolute; left: var(--pad); bottom: 50px; z-index: 3; font: 600 11px/1 var(--oswald); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); padding-left: 52px; }
    .pf-hero__scroll::before { content: ''; position: absolute; left: 0; top: 50%; width: 40px; height: 1px; background: var(--red); transform-origin: left; animation: pfLine 2s ease-in-out infinite; }
}
@keyframes pfLine { 0%{transform:scaleX(0)} 50%{transform:scaleX(1)} 100%{transform:scaleX(0)} }

/* =====================================================================
   03 — Statement
   ===================================================================== */
.pf-statement__title { font: 400 clamp(50px, 13vw, 150px)/.92 var(--cond); text-transform: uppercase; }
.pf-line { display: block; }
.pf-statement__big { display: block; margin-top: .04em; font-size: 1.75em; line-height: .86; white-space: nowrap; }
.pf-statement__big .pf-ch { color: var(--red);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .02  0 0 0 0 .04  0 0 0 1.6 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E"), linear-gradient(180deg, #ff3a41, #D71F26 55%, #9e1218);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pf-statement__row { margin-top: clamp(28px, 5vw, 56px); display: grid; gap: 22px; }
.pf-statement__small { font: italic 500 clamp(26px, 4vw, 44px)/1.15 var(--serif); }
.pf-statement__small em { color: var(--red); }
.pf-statement__foot { max-width: 420px; font-size: 16px; line-height: 1.6; color: var(--mute); }
.pf-statement__foot b { color: var(--paper); }
@media (min-width: 900px) { .pf-statement__row { grid-template-columns: 1fr auto; align-items: end; } }

/* =====================================================================
   04 — Red marquee
   ===================================================================== */
.pf-marquee { position: relative; overflow: hidden; background: var(--red); color: #fff; padding: 16px 0; margin: -10px 0; transform: rotate(-2deg) scale(1.05); box-shadow: 0 20px 60px -20px rgba(215,31,38,.6); }
.pf-marquee__track { display: flex; width: max-content; will-change: transform; }
.pf-marquee__track span { display: inline-flex; align-items: center; gap: 30px; padding-right: 30px; font: 400 clamp(32px, 6vw, 72px)/1 var(--cond); text-transform: uppercase; white-space: nowrap; }
.pf-marquee__track span::after { content: '✦'; font-size: .45em; color: var(--ink); }
html:not(.pf-gsap) .pf-marquee__track { animation: pfMarq 40s linear infinite; }
@keyframes pfMarq { to { transform: translateX(-50%); } }

/* =====================================================================
   05 — About + six skills
   ===================================================================== */
.pf-about__grid { display: grid; gap: clamp(36px, 6vw, 80px); }
.pf-about__title { font: 700 clamp(28px, 4.4vw, 56px)/1.14 var(--serif); letter-spacing: -.01em; }
.pf-about__title em { color: var(--red); }
.pf-about__lead { margin-top: 24px; max-width: 560px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.7; color: var(--mute); }
.pf-skills { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.pf-skill { position: relative; padding: 22px 22px 24px; background: var(--ink-2); overflow: hidden; }
.pf-skill::before { content: ''; position: absolute; inset: 0; background: var(--red); transform: translateY(101%); transition: transform .5s cubic-bezier(.7,0,.2,1); z-index: 0; }
.pf-skill > * { position: relative; z-index: 1; }
.pf-skill__no { font: 600 12px/1 var(--oswald); letter-spacing: .2em; color: var(--red); transition: color .4s; }
.pf-skill h3 { margin: 10px 0 6px; font: 600 clamp(19px, 2vw, 23px)/1.15 var(--oswald); text-transform: uppercase; letter-spacing: .02em; }
.pf-skill p { font-size: 14.5px; line-height: 1.55; color: var(--mute); transition: color .4s; }
.pf-skill:hover::before { transform: translateY(0); }
.pf-skill:hover .pf-skill__no, .pf-skill:hover p { color: #fff; }
@media (min-width: 640px) { .pf-skills { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pf-about__grid { grid-template-columns: 1.05fr 1fr; align-items: center; } }

/* =====================================================================
   06 — What I do
   ===================================================================== */
.pf-do__grid { display: grid; gap: 32px; }
.pf-do__dont { font: 400 clamp(38px, 6vw, 62px)/1 var(--cond); text-transform: uppercase; margin-bottom: 22px; }
.pf-do__photo { position: relative; aspect-ratio: 4 / 5; max-height: 70svh; border-radius: 18px; overflow: hidden; background: var(--ink-3); }
.pf-do__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(.25) contrast(1.05); }
.pf-do__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(215,31,38,.28), transparent 50%); mix-blend-mode: multiply; pointer-events: none; }
.pf-do__list { margin-top: 28px; }
.pf-do__list li { position: relative; display: grid; grid-template-columns: 44px 1fr 24px; gap: 4px 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.pf-do__list li::after { content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.7,0,.2,1); }
.pf-do__list.is-drawn li::after, html:not(.pf-gsap) .pf-do__list li::after { transform: scaleX(1); }
.pf-do__list.is-drawn li:nth-child(2)::after { transition-delay: .12s; }
.pf-do__list.is-drawn li:nth-child(3)::after { transition-delay: .24s; }
.pf-do__list.is-drawn li:nth-child(4)::after { transition-delay: .36s; }
.pf-do__no { grid-row: span 2; font: 600 14px/1.4 var(--oswald); color: var(--red); letter-spacing: .1em; }
.pf-do__list h3 { font: 600 clamp(18px, 1.8vw, 22px)/1.25 var(--oswald); text-transform: uppercase; letter-spacing: .03em; }
.pf-do__list p { grid-column: 2; font-size: 14.5px; line-height: 1.55; color: var(--mute); }
.pf-do__arrow { grid-column: 3; grid-row: 1; color: var(--red); font-size: 20px; transition: transform .35s; }
.pf-do__list li:hover .pf-do__arrow { transform: translateX(4px) rotate(-45deg); }
@media (min-width: 1000px) {
    .pf-do__grid { grid-template-columns: .75fr 1fr 1.25fr; align-items: center; gap: clamp(28px, 3.5vw, 56px); }
    .pf-do__photo { max-height: 76svh; }
    .pf-do .pf-serif { font-size: clamp(48px, 5.2vw, 92px); }
}

/* =====================================================================
   07 — The difference
   ===================================================================== */
.pf-diff__grid { display: grid; gap: 48px; }
.pf-diff__title { display: block; }
.pf-diff__pre, .pf-diff__now { display: block; font: 400 clamp(32px, 5.5vw, 64px)/1.02 var(--cond); text-transform: uppercase; }
.pf-diff__good { display: block; margin: .04em 0; font: 400 clamp(110px, 27vw, 290px)/.86 var(--cond); color: var(--red); transform-origin: 20% 60%; text-shadow: 0 20px 80px rgba(215,31,38,.3); }
.pf-stats { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pf-stats > div { padding-top: 14px; border-top: 2px solid var(--red); }
.pf-stats dt { font: 400 clamp(46px, 7vw, 78px)/1 var(--cond); }
.pf-stats dd { margin-top: 6px; font: 500 11.5px/1.4 var(--oswald); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.pf-diff__note { margin-top: 20px; font-size: 15px; color: var(--mute); }
@media (min-width: 1000px) { .pf-diff__grid { grid-template-columns: 1.25fr 1fr; align-items: center; gap: 80px; } }

/* =====================================================================
   08 — Method
   ===================================================================== */
.pf-process__grid { display: grid; gap: 40px; }
.pf-process__grid > div:first-child { position: relative; }
.pf-process__title { font: 400 clamp(42px, 6vw, 74px)/1 var(--cond); text-transform: uppercase; margin-bottom: 32px; }
.pf-process__title em { font-style: normal; color: var(--red); }
.pf-steps { position: relative; display: grid; gap: 26px; }
.pf-step { position: relative; z-index: 1; display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: start; opacity: .5; transition: opacity .5s; }
.pf-step.is-on, html:not(.pf-gsap) .pf-step { opacity: 1; }
.pf-step__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid rgba(243,238,230,.25); font: 600 15px/1 var(--oswald); color: var(--mute); background: var(--ink-2); transition: background .5s, border-color .5s, color .5s, transform .5s cubic-bezier(.3,1.6,.5,1); }
.pf-step.is-on .pf-step__icon { background: var(--red); border-color: var(--red); color: #fff; transform: scale(1.08); }
.pf-step h3 { font: 600 22px/1.2 var(--oswald); text-transform: uppercase; letter-spacing: .04em; }
.pf-step p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--mute); }
.pf-steps__line { position: absolute; left: 26px; bottom: 40px; width: 2px; height: calc(100% - 160px); background: var(--line); }
.pf-steps__line i { display: block; width: 100%; height: 100%; background: var(--red); transform-origin: top; }
.pf-gsap .pf-steps__line i { transform: scaleY(0); }
.pf-process__photo { position: relative; aspect-ratio: 4 / 5; max-height: 72svh; border-radius: 18px; overflow: hidden; background: var(--ink-3); }
.pf-process__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: grayscale(.2) contrast(1.05); }
.pf-process__quote { font: italic 500 clamp(26px, 3vw, 38px)/1.25 var(--serif); }
.pf-process__quote span { display: block; font: 700 90px/.6 var(--serif); color: var(--red); margin-bottom: 8px; }
.pf-process__quote em { color: var(--red); }
@media (min-width: 1000px) { .pf-process__grid { grid-template-columns: 1.1fr .9fr .8fr; align-items: center; gap: 48px; } }

/* =====================================================================
   09 — Selected work (pinned sideways gallery)
   ===================================================================== */
.pf-work { position: relative; background: var(--ink); border-radius: 26px 26px 0 0; box-shadow: 0 -30px 60px -20px rgba(0,0,0,.85); }
.pf-work__pin { min-height: calc(100svh - var(--hh)); display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3vw, 36px); padding: clamp(40px, 6vw, 72px) 0; overflow: hidden; background: var(--ink); border-radius: 26px 26px 0 0; }
.pf-work__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.pf-work__title { font: 400 clamp(38px, 6vw, 82px)/.95 var(--cond); text-transform: uppercase; }
.pf-work__title span { display: block; }
.pf-work__title em { display: block; font: italic 500 .78em/1.15 var(--serif); text-transform: none; color: var(--red); }
.pf-work__count { font: 600 14px/1 var(--oswald); letter-spacing: .15em; color: var(--mute); white-space: nowrap; }
.pf-work__count b { font: 400 34px/1 var(--cond); color: var(--paper); }
.pf-work__track { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); padding: 0 var(--pad); width: max-content; }
.pf-gsap .pf-work__track { will-change: transform; }
html:not(.pf-gsap) .pf-work__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.pf-work__item { flex: 0 0 auto; width: min(80vw, 640px); scroll-snap-align: start; }
.pf-work__screen { border-radius: 14px; overflow: hidden; background: #1b1b1e; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 6px #121214; }
.pf-work__bar { display: flex; gap: 6px; padding: 10px 12px; background: #222226; }
.pf-work__bar i { width: 9px; height: 9px; border-radius: 50%; background: #444; }
.pf-work__bar i:first-child { background: var(--red); }
.pf-work__view { aspect-ratio: 16 / 10; overflow: hidden; background: #0f0f10; }
.pf-work__view img { width: 100%; height: auto; }
.pf-work__info { padding: 14px 4px 0; }
.pf-work__info span { font: 500 11.5px/1.3 var(--oswald); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.pf-work__info h3 { margin-top: 6px; font: 600 clamp(20px, 2.2vw, 28px)/1.15 var(--oswald); text-transform: uppercase; }
.pf-work__info a { display: inline-block; margin-top: 8px; font-size: 14px; color: var(--mute); }
.pf-work__more { display: flex; flex-direction: column; justify-content: center; gap: 12px; width: min(70vw, 360px); min-height: 260px; padding: 32px; border-radius: 18px; background: var(--red); color: #fff !important; text-decoration: none; transition: background .3s; }
.pf-work__more span { font: 600 12px/1 var(--oswald); letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
.pf-work__more b { font: 400 clamp(30px, 3vw, 44px)/1.05 var(--cond); text-transform: uppercase; }
.pf-work__more:hover { background: #ef2a31; }
.pf-work__foot { display: flex; align-items: center; gap: 16px; }
.pf-work__bar2 { flex: 1; height: 2px; background: var(--line); }
.pf-work__bar2 i { display: block; height: 100%; background: var(--red); transform: scaleX(.04); transform-origin: left; }
.pf-work__foot small { font: 600 11px/1 var(--oswald); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
html:not(.pf-gsap) .pf-work__foot { display: none; }
@media (min-width: 900px) { .pf-work__item { width: min(50vw, 740px, calc((100svh - var(--hh) - 400px) * 1.6)); } }

/* =====================================================================
   10 — Testimonials (only shown once real ones are added)
   ===================================================================== */
.pf-cards { margin-top: 40px; display: grid; gap: 18px; }
.pf-card { padding: 26px; border-radius: 18px; background: var(--ink-3); border: 1px solid var(--line); }
.pf-card blockquote { font: italic 500 18px/1.5 var(--serif); }
.pf-card figcaption { margin-top: 18px; font-size: 13px; color: var(--mute); }
.pf-card strong { display: block; color: var(--paper); font: 600 15px/1.3 var(--oswald); text-transform: uppercase; letter-spacing: .05em; }
@media (min-width: 800px) { .pf-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .pf-cards { grid-template-columns: repeat(4, 1fr); } }

/* =====================================================================
   11 — FAQ
   ===================================================================== */
.pf-faq { position: relative; background: var(--ink); padding: clamp(70px, 10vw, 130px) 0; }
.pf-faq__grid { display: grid; gap: 32px; }
.pf-faq__title { font: 400 clamp(48px, 7vw, 96px)/.95 var(--cond); text-transform: uppercase; }
.pf-faq__title em { display: block; font: italic 500 .8em/1.15 var(--serif); text-transform: none; color: var(--red); }
.pf-faq__item { border-top: 1px solid var(--line); }
.pf-faq__item:last-child { border-bottom: 1px solid var(--line); }
.pf-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 0; }
.pf-faq__item summary::-webkit-details-marker { display: none; }
.pf-faq__item h3 { font: 600 clamp(18px, 2vw, 24px)/1.3 var(--oswald); text-transform: uppercase; letter-spacing: .03em; transition: color .3s; }
.pf-faq__item summary:hover h3, .pf-faq__item[open] h3 { color: var(--red); }
.pf-faq__item i { position: relative; flex: 0 0 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(243,238,230,.25); transition: background .3s, border-color .3s; }
.pf-faq__item i::before, .pf-faq__item i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; }
.pf-faq__item i::after { transform: rotate(90deg); transition: transform .4s; }
.pf-faq__item[open] i { background: var(--red); border-color: var(--red); }
.pf-faq__item[open] i::after { transform: rotate(0deg); }
.pf-faq__a { overflow: hidden; }
.pf-faq__a p { padding: 0 0 24px; max-width: 760px; font-size: 16px; line-height: 1.7; color: var(--mute); }
@media (min-width: 1000px) { .pf-faq__grid { grid-template-columns: .8fr 1.2fr; gap: 80px; } }

/* =====================================================================
   12 — Red finale + mini footer
   ===================================================================== */
.pf-final { position: relative; color: #fff; overflow: hidden; padding-top: clamp(70px, 10vw, 130px);
    background: radial-gradient(ellipse 80% 60% at 80% 0%, rgba(255,255,255,.14), transparent 60%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(0,0,0,.25), transparent 60%), var(--red); }
.pf-final__top { display: grid; gap: 32px; }
.pf-final__cta { font: 400 clamp(46px, 8vw, 112px)/.94 var(--cond); text-transform: uppercase; }
.pf-final__cta em { font: italic 600 1em/1 var(--serif); text-transform: none; color: var(--ink); }
.pf-final__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.pf-final__links a:not(.pf-btn) { font: 500 14px/1.3 var(--oswald); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 3px; transition: border-color .3s; }
.pf-final__links a:not(.pf-btn):hover { border-color: #fff; }
.pf-final__name { margin-top: clamp(40px, 6vw, 70px); overflow: hidden; text-align: center; white-space: nowrap; font: 700 min(15.2vw, 330px)/.8 var(--serif); letter-spacing: -.03em; color: var(--ink); padding-bottom: .03em; }
.pf-final__foot { background: var(--ink); color: var(--mute); padding: 20px 0; }
.pf-final__foot .pf-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font: 500 12px/1.4 var(--oswald); letter-spacing: .12em; text-transform: uppercase; }
.pf-final__foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pf-final__foot a { text-decoration: none; }
.pf-final__foot a:hover { color: var(--red); }
@media (min-width: 1000px) { .pf-final__top { grid-template-columns: 1.4fr 1fr; align-items: end; } .pf-final__links { justify-content: flex-end; } }

/* =====================================================================
   13 — Motion safety: hide hero bits only until GSAP runs (fallback after 3.5s)
   ===================================================================== */
.shx-js:not(.pf-safe):not(.pf-run) .pf-hero__name .pf-ch,
.shx-js:not(.pf-safe):not(.pf-run) [data-pf-figure],
.shx-js:not(.pf-safe):not(.pf-run) .pf-hero [data-pf-in] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .pf-grain, .pf-hero__scroll::before, .pf-marquee__track { animation: none !important; }
    .pf-step { opacity: 1; }
    .pf-steps__line i { transform: none !important; }
    .pf-do__list li::after { transform: scaleX(1); }
}

/* =====================================================================
   14 — A note from the founder
   ===================================================================== */
.pf-note { position: relative; padding: clamp(80px, 11vw, 150px) 0; background: radial-gradient(ellipse 60% 50% at 85% 20%, rgba(215,31,38,.14), transparent 60%), var(--ink); }
.pf-note__grid { display: grid; gap: 40px; }
.pf-note__side { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.pf-note__card { width: min(100%, 340px); padding: 14px 14px 18px; border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06); transform-origin: 50% 100%; }
.pf-note__photo { display: block; aspect-ratio: 4 / 4.4; border-radius: 14px; overflow: hidden; background: var(--ink-3); }
.pf-note__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.pf-note__card figcaption { margin-top: 14px; padding: 0 6px; }
.pf-note__card strong { display: block; font: 700 22px/1.15 var(--serif); }
.pf-note__card span { display: block; margin-top: 4px; font: 600 11px/1.4 var(--oswald); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.pf-note__title { font: 400 clamp(46px, 8vw, 96px)/.92 var(--cond); text-transform: uppercase; margin-bottom: 30px; }
.pf-note__title em { display: block; font: italic 500 .74em/1.15 var(--serif); text-transform: none; color: var(--red); }
.pf-note__hello { font: italic 500 clamp(20px, 2.4vw, 26px)/1.4 var(--serif); color: var(--paper); margin-bottom: 18px; }
.pf-note__p { max-width: 720px; margin-bottom: 18px; font: 500 clamp(18px, 2vw, 23px)/1.6 var(--serif); color: var(--paper); }
.pf-note__p--big { font: 700 clamp(26px, 3.6vw, 42px)/1.2 var(--serif); color: var(--red); margin-top: 10px; }
.pf-note__sign { margin-top: 30px; }
.pf-note__sign span { display: inline-block; font: 400 clamp(60px, 9vw, 104px)/1 var(--script); color: var(--paper); transform: rotate(-4deg); transform-origin: left; padding-right: .2em; }
.pf-note__sign small { display: block; margin-top: 6px; font: 600 11px/1.4 var(--oswald); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
@media (min-width: 1000px) {
    .pf-note__grid { grid-template-columns: 360px 1fr; gap: 80px; align-items: start; }
    .pf-note__side { position: sticky; top: calc(var(--hh) + 60px); }
}

/* =====================================================================
   15 — Things I tell every client (pinned)
   ===================================================================== */
.pf-thoughts { position: relative; background: var(--red); color: #fff; overflow: hidden; }
.pf-thoughts__pin { min-height: calc(100svh - var(--hh)); display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3vw, 34px); padding: clamp(50px, 7vw, 80px) 0; position: relative; }
.pf-thoughts .pf-kicker { color: rgba(255,255,255,.75); }
.pf-thoughts .pf-kicker b { color: var(--ink); }
.pf-thoughts__title { font: 400 clamp(38px, 6vw, 76px)/.95 var(--cond); text-transform: uppercase; }
.pf-thoughts__title em { font: italic 500 .8em/1.1 var(--serif); text-transform: none; color: var(--ink); }
.pf-thoughts__stage { position: relative; }
.pf-thoughts__quote { position: absolute; right: var(--pad); top: -40px; font: 700 clamp(180px, 30vw, 420px)/.7 var(--serif); color: rgba(0,0,0,.14); pointer-events: none; }
.pf-thoughts__list { position: relative; display: grid; }
.pf-thought { grid-area: 1 / 1; max-width: 980px; }
.pf-thought__no { display: inline-block; margin-bottom: 14px; padding: 6px 12px; border-radius: 999px; background: var(--ink); font: 600 12px/1 var(--oswald); letter-spacing: .2em; }
.pf-thought h3 { font: 700 clamp(34px, 6.4vw, 84px)/1.02 var(--serif); letter-spacing: -.01em; }
.pf-thought p { margin-top: 18px; max-width: 640px; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6; color: rgba(255,255,255,.88); }
.pf-thoughts__nav { display: flex; gap: 8px; margin-top: 28px; }
.pf-thoughts__nav i { width: 28px; height: 4px; border-radius: 4px; background: rgba(0,0,0,.25); transition: background .4s, width .4s; }
.pf-thoughts__nav i.is-on { width: 56px; background: var(--ink); }
.pf-thoughts__by { font: 400 clamp(40px, 5vw, 64px)/1 var(--script); color: var(--ink); }
html:not(.pf-gsap) .pf-thoughts__list { gap: 40px; }
html:not(.pf-gsap) .pf-thought { grid-area: auto; }
html:not(.pf-gsap) .pf-thoughts__nav { display: none; }

/* =====================================================================
   16 — Screenshot wall
   ===================================================================== */
.pf-wall { position: relative; padding: clamp(70px, 10vw, 130px) 0; background: var(--ink); overflow: hidden; }
.pf-wall__head { display: grid; gap: 14px; margin-bottom: clamp(30px, 5vw, 56px); }
.pf-wall__title { font: 400 clamp(42px, 7vw, 90px)/.95 var(--cond); text-transform: uppercase; }
.pf-wall__title em { display: block; font: italic 500 .78em/1.1 var(--serif); text-transform: none; color: var(--red); }
.pf-wall__head p { max-width: 520px; color: var(--mute); font-size: 16px; line-height: 1.6; }
@media (min-width: 900px) { .pf-wall__head { grid-template-columns: 1fr auto; align-items: end; } }
.pf-wall__row { padding: 12px 0; }
.pf-wall__track { display: flex; gap: clamp(14px, 2vw, 24px); width: max-content; will-change: transform; }
html:not(.pf-gsap) .pf-wall__track { animation: pfMarq 70s linear infinite; }
html:not(.pf-gsap) .pf-wall__row--rev .pf-wall__track { animation-direction: reverse; }
.pf-shot { flex: 0 0 auto; width: clamp(240px, 30vw, 420px); padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; background: #1b1b1e; cursor: zoom-in; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.pf-shot:hover, .pf-shot:focus-visible { transform: translateY(-8px) scale(1.03); border-color: var(--red); outline: none; }
.pf-shot__bar { display: flex; gap: 5px; padding: 8px 10px; background: #222226; }
.pf-shot__bar i { width: 8px; height: 8px; border-radius: 50%; background: #444; }
.pf-shot__bar i:first-child { background: var(--red); }
.pf-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }

/* =====================================================================
   17 — Results + reviews (screenshots)
   ===================================================================== */
.pf-results, .pf-reviews { position: relative; padding: clamp(70px, 10vw, 130px) 0; background: var(--ink-2); }
.pf-reviews { background: var(--ink); }
.pf-results__head { display: grid; gap: 18px; margin-bottom: clamp(30px, 5vw, 56px); }
.pf-results__head p { max-width: 460px; color: var(--mute); font-size: 16px; line-height: 1.6; }
@media (min-width: 900px) { .pf-results__head { grid-template-columns: 1fr auto; align-items: end; } }
.pf-results__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) { .pf-results__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pf-results__grid { grid-template-columns: repeat(4, 1fr); } }
.pf-res { position: relative; }
.pf-res__img { display: block; width: 100%; padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.pf-res__img img { width: 100%; height: auto; }
.pf-res__img:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -30px rgba(215,31,38,.5); }
.pf-res figcaption { display: flex; gap: 10px; margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--paper); }
.pf-res figcaption span { font: 600 12px/1.6 var(--oswald); letter-spacing: .14em; color: var(--red); }
.pf-reviews__cols { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 600px) { .pf-reviews__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pf-reviews__cols { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.pf-reviews__col { display: grid; gap: 16px; }
.pf-review { display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.9); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.pf-review:nth-child(odd) { transform: rotate(-1.2deg); }
.pf-review:nth-child(even) { transform: rotate(1.2deg); }
.pf-review:hover { transform: rotate(0) scale(1.03); }
.pf-review img { width: 100%; height: auto; }
.pf-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 220px; padding: 16px; text-align: center; background: repeating-linear-gradient(45deg, #1b1b1e, #1b1b1e 10px, #222226 10px, #222226 20px); border: 2px dashed rgba(215,31,38,.6); color: var(--paper); cursor: default; }
.pf-ph b { font: 400 22px/1 var(--cond); text-transform: uppercase; color: var(--red); }
.pf-ph code { max-width: 100%; padding: 4px 8px; border-radius: 6px; background: #000; font: 500 11px/1.4 ui-monospace, Menlo, monospace; word-break: break-all; }
.pf-ph small { font-size: 11px; color: var(--mute); }

/* Lightbox */
.pf-lb { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5,5,6,.94); }
.pf-lb[hidden] { display: none; }
.pf-lb img { max-width: 100%; max-height: 88svh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.8); }
.pf-lb__close { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--red); color: #fff; font: 400 28px/1 var(--sans); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pf-wall__track { animation: none !important; } }