/* Portfolio page (SA Coder) - prefix .pf- . Motion lives in assets/js/portfolio-page.js; every state below is visible without it. */
.pf{background:var(--bg);color:var(--ink);overflow-x:clip}
.pf *{box-sizing:border-box}
.pf h1,.pf h2,.pf h3{font-family:var(--f-head);letter-spacing:-.03em;margin:0;color:inherit}
.pf p{margin:0}
.pf em{font-style:normal;color:var(--accent)}
.pf-kicker{display:inline-flex;align-items:center;gap:10px;font:600 11px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 18px}
.pf-kicker:before{content:'';width:24px;height:2px;background:var(--accent)}
.pf-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.pf-word>span{display:inline-block}

/* hero */
.pf-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(112px,12vw,148px) 0 clamp(40px,5vw,72px)}
.pf-hero__glow{position:absolute;inset:0;z-index:-1;pointer-events:none}
.pf-hero__glow span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.4}
.pf-hero__glow span:first-child{width:640px;height:640px;right:-200px;top:-240px;background:radial-gradient(circle,var(--accent),transparent 70%)}
.pf-hero__glow span:last-child{width:460px;height:460px;left:4%;bottom:-300px;background:radial-gradient(circle,var(--coral),transparent 70%)}
.pf-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center}
.pf-hero h1{font-size:clamp(2.4rem,4.4vw,4.5rem);line-height:1.02;font-weight:700;text-wrap:balance}
.pf-hero__lead{margin:22px 0 30px;max-width:44ch;color:var(--ink-soft);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.65}
.pf-hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.pf-hero__art{position:relative;justify-self:end;width:min(100%,540px);margin-right:calc(var(--gutter)*-.6)}
.pf-orbit{display:block;width:100%;height:auto;overflow:visible}
.pf-ring{fill:none;stroke:var(--ink);stroke-opacity:.22;stroke-width:1.5;stroke-dasharray:2 9;stroke-linecap:round}
.pf-link{stroke:var(--accent);stroke-opacity:.5;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1}
.pf-core__halo{fill:rgba(255,255,255,.7);stroke:#fff;stroke-width:1.5}
.pf-core .pf-core__ic{width:32px;height:32px;color:#fff}
.pf-node{filter:drop-shadow(0 12px 16px rgba(179,21,27,.28))}
.pf-node__bg{fill:#fff;stroke:#fff;stroke-width:1.5}
.pf-node .ico{width:26px;height:26px;color:var(--ink)}
.pf-node--hot .pf-node__bg{fill:var(--accent)}
.pf-node--hot .ico{color:#fff}
.pf-dot{fill:var(--coral)}
.pf-dot--a{fill:var(--accent)}

/* shared section head */
.pf-sechead{max-width:720px;margin-bottom:clamp(28px,4vw,52px)}
.pf-sechead h2,.pf-work__head h2{font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.05;font-weight:700}
.pf-sechead p,.pf-work__head p{margin-top:14px;max-width:56ch;color:var(--ink-soft);line-height:1.65}
.pf-sechead--inv p{color:rgba(255,255,255,.72)}

/* case study rail: stacked grid by default, pinned horizontal rail when JS turns on .is-rail */
.pf-work{position:relative;padding:clamp(48px,7vw,96px) 0 clamp(56px,8vw,112px)}
.pf-work__head{margin-bottom:clamp(24px,3vw,40px)}
.pf-work__bar{display:none;margin-top:22px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.pf-work__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--coral));transform:scaleX(0);transform-origin:left}
.pf-work__track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.pf-work.is-rail{display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:92px 0 24px;overflow:hidden}
.pf-work.is-rail .pf-work__bar{display:block}
.pf-work.is-rail .pf-work__track{display:flex;gap:24px;width:max-content;max-width:none;margin:0;padding-left:max(var(--gutter),calc((100vw - var(--wrap))/2));padding-right:max(var(--gutter),calc((100vw - var(--wrap))/2))}
.pf-work.is-rail .pf-wcard{flex:0 0 clamp(340px,29vw,420px)}

.pf-wcard{--a:var(--accent);--b:var(--coral);--c:#ECE6E1;--h:var(--accent);position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:var(--shadow);color:var(--ink);transition:box-shadow .4s}
.pf-wcard--dark{--a:var(--coral);--b:var(--accent);--c:rgba(255,255,255,.14);background:var(--dark);color:#fff;border-color:rgba(255,255,255,.08);box-shadow:inset 0 0 70px -20px rgba(229,37,42,.5),var(--shadow)}
.pf-wcard--tint{--a:var(--accent);--b:var(--ink);--c:#FFB9A5;background:#FFE2D8}
.pf-wcard--red{--a:#fff;--b:#FFE2D8;--c:rgba(255,255,255,.26);--h:#B3151B;background:linear-gradient(160deg,#B3151B 25%,#E5252A 140%);color:#fff;border-color:rgba(255,255,255,.2)}
.pf-wcard--note{justify-content:center;background:transparent;border:1px dashed rgba(20,11,12,.3);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.pf-wcard--note .pf-wcard__body{padding-top:clamp(22px,2.4vw,30px)}
.pf-wcard__art{height:clamp(150px,19vh,190px);display:grid;place-items:center;padding:20px 20px 0;overflow:hidden}
.pf-art{display:block;width:100%;height:100%;overflow:visible}
.pf-fa{fill:var(--a)}
.pf-fb{fill:var(--b)}
.pf-fc{fill:var(--c)}
.pf-fw{fill:#fff}
.pf-sa,.pf-sb,.pf-sc,.pf-sw,.pf-sh{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.pf-sa{stroke:var(--a)}
.pf-sb{stroke:var(--b)}
.pf-sc{stroke:var(--c)}
.pf-sw{stroke:#fff}
.pf-sh{stroke:var(--h);stroke-width:2.5}
.pf-thin{stroke-width:2.5}
.pf-bold{stroke-width:10}
.pf-d{stroke-dasharray:1}
.pf-p{transform-box:fill-box;transform-origin:center}
.pf-wcard__body{display:flex;flex-direction:column;gap:12px;padding:18px clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px);flex:1}
.pf-wcard__tag{align-self:flex-start;font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);padding:6px 12px;border-radius:var(--pill);background:rgba(20,11,12,.06)}
.pf-wcard--dark .pf-wcard__tag{color:var(--coral);background:rgba(255,255,255,.08)}
.pf-wcard--red .pf-wcard__tag{color:#fff;background:rgba(255,255,255,.18)}
.pf-wcard h3{font-size:clamp(1.3rem,1.8vw,1.65rem);line-height:1.1;font-weight:700}
.pf-wcard p{font-size:.95rem;line-height:1.6;opacity:.84}
.pf-wcard__pts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pf-wcard__pts li{padding:7px 12px;border-radius:var(--pill);border:1px solid currentColor;font-size:.78rem;line-height:1;opacity:.78}
.pf-wcard__more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:700 .98rem/1 var(--f-head);color:var(--accent-deep)}
.pf-wcard--dark .pf-wcard__more{color:var(--coral)}
.pf-wcard--red .pf-wcard__more{color:#fff}
.pf-wcard__more .ico{width:16px;height:16px;transition:transform .3s}
.pf-wcard:hover{box-shadow:0 30px 70px -28px rgba(179,21,27,.45)}
.pf-wcard--note:hover{box-shadow:none}
.pf-wcard:hover .pf-wcard__more .ico{transform:translateX(4px)}

/* what we build: ruled rows with line-art glyphs */
.pf-build{background:var(--surface);padding:clamp(64px,9vw,120px) 0}
.pf-rows{border-bottom:1px solid var(--line)}
.pf-row{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(26px,3.6vw,44px) 0;border-top:1px solid var(--line)}
.pf-row__art{width:132px;height:132px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pf-row:hover .pf-row__art{transform:rotate(-5deg) scale(1.05)}
.pf-glyph{display:block;width:100%;height:100%;overflow:visible}
.pf-line,.pf-line2{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pf-line{stroke:var(--accent)}
.pf-line2{stroke:var(--coral)}
.pf-dotf{fill:var(--accent)}
.pf-row h3{font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.05;font-weight:700;margin-bottom:10px}
.pf-row p{color:var(--ink-soft);line-height:1.65;max-width:56ch}
.pf-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.pf-tags li{padding:7px 13px;border-radius:var(--pill);border:1px solid var(--line);background:var(--bg);font-size:.84rem;line-height:1;color:var(--ink-soft)}

/* how we measure: dark, progress line fills on scroll */
.pf-measure{position:relative;overflow:hidden;isolation:isolate;background:var(--dark);color:#fff;padding:clamp(64px,9vw,120px) 0}
.pf-measure em{color:var(--coral)}
.pf-measure__rings{position:absolute;z-index:-1;right:-240px;top:-200px;width:700px;height:700px;fill:none;stroke:#fff;stroke-opacity:.1;stroke-width:1.5;stroke-dasharray:3 10;pointer-events:none}
.pf-pathwrap{position:relative}
.pf-path{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;margin:0;padding:0}
.pf-path__line{position:absolute;left:20px;top:19px;width:calc(75% + 15px);height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.pf-path__line i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--coral));transform-origin:left}
.gsap-ready .pf-path__line i{transform:scaleX(0)}
.pf-step{position:relative;padding-top:64px}
.pf-step__dot{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;border:2px solid var(--accent);background:var(--dark);display:grid;place-items:center;transition:border-color .4s,box-shadow .4s}
.pf-step__dot:after{content:'';width:12px;height:12px;border-radius:50%;background:var(--accent);transition:background .4s}
.gsap-ready .pf-step:not(.is-on) .pf-step__dot{border-color:rgba(255,255,255,.25)}
.gsap-ready .pf-step:not(.is-on) .pf-step__dot:after{background:rgba(255,255,255,.25)}
.pf-step.is-on .pf-step__dot{box-shadow:0 0 0 7px rgba(229,37,42,.22)}
.pf-step h3{font-size:1.3rem;font-weight:700;margin-bottom:10px}
.pf-step p{color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.6}

/* closing call to action */
.pf-cta{padding:clamp(56px,8vw,112px) 0}
.pf-cta__panel{position:relative;overflow:hidden;isolation:isolate;text-align:center;color:#fff;padding:clamp(40px,7vw,88px) clamp(24px,5vw,64px);border-radius:var(--r-lg);background:radial-gradient(circle at 78% 12%,#E5252A,transparent 55%),linear-gradient(135deg,#B3151B,#140B0C)}
.pf-cta__rings{position:absolute;z-index:-1;left:50%;top:50%;width:min(900px,170%);transform:translate(-50%,-50%);pointer-events:none}
.pf-cta__rings svg{display:block;width:100%;height:auto;fill:none;stroke:#fff;stroke-opacity:.2;stroke-width:1.5;stroke-dasharray:3 10}
.pf-cta__panel .pf-kicker{color:#fff}
.pf-cta__panel .pf-kicker:before{background:#fff}
.pf-cta__panel h2{font-size:clamp(2rem,4.4vw,3.8rem);line-height:1.04;font-weight:700;max-width:18ch;margin:0 auto 16px}
.pf-cta__panel h2 em{color:#FFE2D8}
.pf-cta__lead{max-width:48ch;margin:0 auto 28px;opacity:.9;line-height:1.7}

@media (max-width:900px){
 .pf-hero__grid{grid-template-columns:1fr}
 .pf-hero__art{justify-self:center;width:min(100%,420px);margin-right:0}
 .pf-work__track{grid-template-columns:1fr}
 .pf-row{grid-template-columns:96px minmax(0,1fr);gap:20px 24px}
 .pf-row__art{width:96px;height:96px}
 .pf-row__link{grid-column:1/-1;justify-self:start}
 .pf-path{grid-template-columns:1fr;gap:30px}
 .pf-path__line{display:none}
 .pf-step{padding:0 0 0 64px}
 .pf-step:not(:last-child):after{content:'';position:absolute;left:19px;top:44px;bottom:-26px;width:2px;background:rgba(255,255,255,.14)}
 .pf-step.is-on:not(:last-child):after{background:var(--accent)}
}
@media (max-width:560px){
 .pf-row{grid-template-columns:1fr}
 .pf-row__art{width:84px;height:84px}
}
@media (prefers-reduced-motion:reduce){
 .pf-row__art,.pf-wcard__more .ico,.pf-wcard,.pf-step__dot{transition:none}
}