/* Socktopus loyalty project: shared by the portfolio card and case study. */
.project-image.loyalty-preview{aspect-ratio:1.35;display:grid;place-items:center;padding:64px 24px 70px;color:var(--paper);background:radial-gradient(ellipse at 85% 15%,#a9c47a20,transparent 65%),#202b25}
.loyalty-preview .project-credit{color:var(--lime);background:#202b25ed;border-color:#d8fb7855}
.loyalty-preview-inner{width:min(760px,100%)}
.loyalty-preview-title{font-family:Manrope,sans-serif;font-size:clamp(26px,3.2vw,46px);line-height:1.08;letter-spacing:-.055em;margin:0 0 24px}
.loyalty-mini-flow{display:grid;grid-template-columns:1fr auto 1.4fr auto 1fr;align-items:center;gap:12px;font-size:14px;text-align:center}
.loyalty-mini-flow>span{padding:18px 10px;border:1px solid #ffffff35;border-radius:8px}
.loyalty-mini-flow>b{color:var(--lime);font-size:22px;font-weight:400}
.loyalty-mini-flow .loyalty-mini-bridge{background:var(--lime);color:var(--ink);border-color:var(--lime);font-weight:600}
.loyalty-page .header nav{display:flex;position:static;align-items:center;gap:28px;padding:0;background:none;border:0}
.loyalty-hero{padding-top:50px;padding-bottom:64px}
.loyalty-client{display:flex;align-items:center;justify-content:space-between;gap:24px}
.loyalty-client .eyebrow{margin:0}
.loyalty-client img{width:180px;height:auto;display:block}
.loyalty-hero h1{font-size:clamp(52px,6.3vw,96px);line-height:1.07;letter-spacing:-.065em;margin:42px 0 28px;max-width:1180px}
.loyalty-lead{font-size:clamp(18px,1.65vw,23px);line-height:1.65;max-width:790px;color:#52554c;margin-bottom:28px}
.loyalty-tags{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;gap:8px}
.loyalty-tags li{border:1px solid var(--line);border-radius:30px;padding:7px 14px;font-size:12px}
.loyalty-jump{margin-top:24px}
.loyalty-system-section{background:#202b25;color:var(--paper);padding:68px 0}
.loyalty-system-section .eyebrow{color:var(--lime)}
.loyalty-system-section h2{max-width:760px}
.loyalty-figure{margin:38px 0 0}
.loyalty-flow{display:grid;grid-template-columns:1fr auto 1.2fr auto 1fr;gap:20px;align-items:center}
.loyalty-account,.loyalty-bridge-node{min-width:0;border:1px solid #ffffff35;border-radius:14px;padding:30px 24px}
.loyalty-account>span,.loyalty-bridge-node>span{display:block;font-size:10px;letter-spacing:1.3px;margin-bottom:22px}
.loyalty-account h3{font-size:clamp(22px,2vw,30px);line-height:1.2;letter-spacing:-1px;font-weight:500;margin-bottom:22px}
.loyalty-account p{display:table;background:#ffffff10;border-radius:30px;font-size:12px;padding:6px 12px;margin-bottom:12px}
.loyalty-account small{font-size:12px;color:#c0c8bf}
.loyalty-flow-arrow{font-size:30px;color:var(--lime)}
.loyalty-bridge-node{background:var(--lime);border-color:var(--lime);color:var(--ink);text-align:center;padding:36px 24px}
.loyalty-bridge-node strong{font-family:Manrope,sans-serif;font-size:clamp(24px,2.3vw,34px);font-weight:500;line-height:1.2;letter-spacing:-1.2px;display:block}
.loyalty-bridge-node p{font-size:12px;margin:24px 0 0}
.loyalty-figure figcaption{max-width:780px;margin:26px 0 0;color:#c0c8bf;font-size:15px;line-height:1.7}
.loyalty-benefits{padding-top:82px;padding-bottom:82px}
.loyalty-overview{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;margin-bottom:44px}
.loyalty-overview>p{font-size:18px;color:var(--muted);line-height:1.8;margin:0}
.loyalty-benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 48px}
.loyalty-benefit-grid article{border-top:1px solid var(--line);padding-top:20px}
.loyalty-benefit-grid .eyebrow{color:var(--muted);margin-bottom:14px}
.loyalty-benefit-grid h3{font-size:24px;font-weight:500;letter-spacing:-.7px;margin-bottom:10px}
.loyalty-benefit-grid p{max-width:520px;margin:0;color:var(--muted);line-height:1.8}
.loyalty-record{margin-top:44px;padding:24px 28px;border-left:3px solid #687e2d;background:#e9ecdf;font-size:16px;line-height:1.8}
.loyalty-record p{margin:0}
.loyalty-cta{padding:58px 0;background:var(--lime)}
.loyalty-cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px}
.loyalty-cta h2{max-width:760px}
.loyalty-cta p{margin:16px 0 0}
.loyalty-page footer .group-credit{grid-column:1/-1}
@media(max-width:1100px){.loyalty-flow{gap:12px}.loyalty-account,.loyalty-bridge-node{padding:24px 18px}.loyalty-overview{gap:40px}}
@media(max-width:900px){.loyalty-mini-flow{font-size:11px;gap:5px}.loyalty-mini-flow>span{padding:12px 5px}.loyalty-mini-flow>b{font-size:18px}.loyalty-preview-title{margin-bottom:16px}.project-image.loyalty-preview{padding:58px 16px 62px}.loyalty-flow{grid-template-columns:1fr;gap:12px;max-width:560px;margin:auto}.loyalty-flow-arrow{text-align:center;line-height:1;rotate:90deg}.loyalty-account{text-align:center}.loyalty-account h3 br{display:none}.loyalty-account p{margin-left:auto;margin-right:auto}.loyalty-account>span,.loyalty-bridge-node>span{margin-bottom:14px}.loyalty-account h3{margin-bottom:14px}}
@media(max-width:760px){.loyalty-page .header nav{gap:16px;font-size:12px}.loyalty-page .header .button.small{padding:10px 16px}.loyalty-page .logo{font-size:23px}.loyalty-page .logo small{font-size:7px;letter-spacing:1px}.loyalty-hero{padding-top:32px;padding-bottom:38px}.loyalty-client{display:block}.loyalty-client img{width:145px;margin-top:24px}.loyalty-hero h1{margin:28px 0 22px}.loyalty-system-section{padding:42px 0}.loyalty-system-section h2{font-size:32px}.loyalty-figure{margin-top:28px}.loyalty-benefits{padding-top:48px;padding-bottom:48px}.loyalty-overview{grid-template-columns:1fr;gap:22px;margin-bottom:30px}.loyalty-overview>p{font-size:17px}.loyalty-benefit-grid{grid-template-columns:1fr;gap:26px}.loyalty-benefit-grid h3{font-size:22px}.loyalty-record{padding:20px;margin-top:30px}.loyalty-cta{padding:42px 0}.loyalty-cta .wrap{display:block}.loyalty-cta .button{margin-top:24px}.loyalty-page footer{display:flex;align-items:center;flex-wrap:wrap}.loyalty-page footer>span{line-height:1.6}}