.pf-index{--wrapw:calc(100vw - 32px);--gut:16px}@media (min-width:768px){.pf-index{--wrapw:min(1300px, 90vw);--gut:5vw}}.pf-index .sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.pf-index .top{--tg:var(--dark-green);background:var(--tg);color:var(--cream);padding-top:var(--bar-h)}.pf-index .title{gap:18px;padding:clamp(48px,7vw,104px) 0 clamp(40px,5vw,72px);display:grid}.pf-index .title h1{letter-spacing:-.03em;color:var(--cream);font-size:clamp(2.5rem,1.4rem + 4vw,5rem);line-height:1}.pf-index .title p{max-width:38ch;color:color-mix(in srgb, var(--cream) 84%, var(--tg));font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.4}.pf-index .k-wfd{--bg:#0f2636;--fg:#fbfaf7;--fg-soft:#c7cbcd;--accent:#c9a85f;--field:url(/images/portfolio/wc/WFD-building-watercolor.webp) center / cover;--bg-img:url(/images/portfolio/refs/brand/painted-navy.webp) center / cover}.pf-index .k-vc{--bg:#0d1b2a;--fg:#faf8f5;--fg-soft:#c1c3c4;--accent:#42d9f5;--field:#1e2a38;--bg-img:none}.pf-index .field{background:var(--field)}.pf-index .pair{aspect-ratio:100/62;--d-l:0%;--d-t:0%;--d-w:94%;--p-r:0%;--p-b:-10%;--p-w:22%;transition:transform .5s var(--ease-out);position:relative}.pf-index .pair .d{left:var(--d-l);top:var(--d-t);width:var(--d-w);background:var(--bg);border-radius:10px;margin:0;position:absolute;overflow:hidden;box-shadow:0 1px 2px #0000002e,0 24px 48px -18px #00000080}.pf-index .pair .p{right:var(--p-r);bottom:var(--p-b);width:var(--p-w);background:var(--bg);border-radius:16px;margin:0;position:absolute;overflow:hidden;box-shadow:0 1px 2px #0003,0 20px 40px -14px #0000008c}.pf-index .pair .d .bar{background-color:#eceae4;background-image:radial-gradient(circle at 12px,#b9b6ad 3px,#0000 3.5px),radial-gradient(circle at 26px,#b9b6ad 3px,#0000 3.5px);background-repeat:no-repeat;height:clamp(14px,1.9vw,24px)}.pf-index .pair .d img{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%;height:auto}.pf-index .pair .p img{aspect-ratio:585/1266;object-fit:cover;object-position:top;width:100%;height:auto}.pf-index .pair--recap{--p-w:27%;--p-r:1%;--p-b:-16%}.pf-index .pair .p.iph{box-shadow:none;background:0 0;border-radius:0;overflow:visible;container-type:inline-size}.pf-index .iph-frame{aspect-ratio:9/19.5;background:#0b0c0e;border-radius:15cqw;padding:3.4cqw;box-shadow:0 0 0 .6cqw #4a4d52,0 0 0 1cqw #1c1e21,0 2px 4px #0000004d,0 30px 60px -20px #000000b3}.pf-index .iph-screen{color:#000;background:#fff;border-radius:12cqw;flex-direction:column;height:100%;font-family:-apple-system,SF Pro Text,Helvetica Neue,system-ui,sans-serif;display:flex;overflow:hidden}.pf-index .iph-status{letter-spacing:-.01em;justify-content:space-between;align-items:center;height:13cqw;padding:4.6cqw 8cqw 0 10cqw;font-size:max(5px,4.6cqw);font-weight:600;display:flex;position:relative}.pf-index .iph-island{background:#000;border-radius:6cqw;width:30cqw;height:9cqw;margin-left:-15cqw;position:absolute;top:3.2cqw;left:50%}.pf-index .iph-bat{border:.45cqw solid #0006;border-radius:1.2cqw;width:7.4cqw;height:3.6cqw;padding:.4cqw}.pf-index .iph-bat:before{content:"";background:#000;border-radius:.5cqw;width:80%;height:100%;display:block}.pf-index .iph-head{background:#f7f7f9;border-bottom:1px solid #e5e5ea;justify-items:center;gap:1.4cqw;padding:2cqw 0 3.6cqw;display:grid}.pf-index .iph-av{color:#fff;background:linear-gradient(#a5aab4,#868b95);border-radius:50%;place-items:center;width:15cqw;height:15cqw;font-size:max(5px,5.6cqw);font-weight:600;display:grid}.pf-index .iph-head b{font-size:max(5px,3.8cqw);font-weight:500}.pf-index .iph-msgs{align-content:start;gap:2cqw;padding:3cqw 4.5cqw;display:grid}.pf-index .iph-when{color:#8e8e93;justify-self:center;font-size:max(5px,3.2cqw)}.pf-index .iph-when b{font-weight:600}.pf-index .iph-bub{letter-spacing:-.005em;background:#e9e9eb;border-radius:6cqw;justify-self:start;max-width:84%;padding:2.6cqw 3.8cqw;font-size:max(5px,4cqw);line-height:5.2cqw}.pf-index .iph-bub p+p{margin-top:2.4cqw}.pf-index .iph-bub .lk{color:#0a7cff;overflow-wrap:anywhere;text-decoration:underline;text-decoration-thickness:.3cqw}.pf-index .name{font:500 clamp(2.75rem, 1.2rem + 6vw, 6rem)/.98 var(--font-display);letter-spacing:-.03em;text-wrap:balance;margin:0}.pf-index .one{max-width:34ch;font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem);line-height:1.35}.pf-index .kind{font:500 .9375rem/1.3 var(--font-label);text-transform:uppercase;letter-spacing:.08em}.pf-index .go{width:fit-content;min-height:44px;font:600 1rem/1 var(--font-label);text-transform:uppercase;letter-spacing:.06em;text-underline-offset:7px;align-items:center;text-decoration:underline;text-decoration-thickness:2px;display:inline-flex}.pf-index .band{background:var(--bg-img,none), var(--bg);background-color:var(--bg);color:var(--fg);position:relative;overflow:hidden}.pf-index .band .wrap{grid-template-columns:1fr;grid-template-areas:"name""text""shots";row-gap:28px;padding-top:clamp(36px,5vw,64px);display:grid}.pf-index .band .name{color:var(--fg);grid-area:name}.pf-index .band .text{grid-area:text;align-content:end;gap:14px;display:grid}.pf-index .band .kind{color:var(--fg-soft)}.pf-index .band .go{color:var(--accent)}.pf-index .band .go:after{content:"";position:absolute;inset:0}.pf-index .band .go:focus-visible{outline:none}.pf-index .band .go:focus-visible:after{outline:3px solid var(--accent);outline-offset:-10px}.pf-index .band .shots{margin-inline:calc(-1 * var(--gut));padding:20px var(--gut) 0;grid-area:shots;overflow:hidden}.pf-index .band:hover .pair{transform:translateY(-8px)}.pf-index .band:active .pair{transform:translateY(-3px)}.pf-index .band:hover .go{text-decoration-thickness:3px}@media (min-width:960px){.pf-index .band .wrap{grid-template-columns:24% 1fr;grid-template-areas:"name name""text shots";gap:40px 0}.pf-index .band .text{padding:0 24px 56px 0}.pf-index .band .shots{margin-inline:0 calc((var(--wrapw) - 100vw) / 2);padding:clamp(24px, 3vw, 40px) calc((100vw - var(--wrapw)) / 2) 0 clamp(24px, 3vw, 40px);border-top-left-radius:20px}}@media (min-width:960px) and (max-width:1099px){.pf-index .band .wrap{grid-template-columns:30% 1fr}}@media (prefers-reduced-motion:reduce){.pf-index .pair{transition:none}.pf-index .band:hover .pair,.pf-index .band:active .pair{transform:none}}