/* FanBound v8.6: real client work (home). Real clients come before fictional examples, labelled as real,
   with a big picture of the site, facts about what was built, and a way to open it. No invented quotes or results. */
.work{background:#fff;padding-block:88px}
.work .wrap{display:block}
.work-head{max-width:760px}
.work-kick{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.work-kick .dot{width:10px;height:10px;border-radius:50%;background:#2DB57A;box-shadow:0 0 0 4px rgba(45,181,122,.18)}
.work-case{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;margin-top:40px}
.work-vis{position:relative;display:block;padding:0 7% 34px 0;text-decoration:none}
.work-vis .lap{transition:transform .5s var(--ease-out)}
.work-vis:hover .lap{transform:translateY(-4px)}
.work-ph{position:absolute;right:0;bottom:0;width:24%;background:#0D1416;border-radius:26px;padding:6px;box-shadow:0 24px 50px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.1) inset}
.work-ph .scr{overflow:hidden;border-radius:21px;aspect-ratio:390/844}
.work-ph img{width:100%;height:100%;object-fit:cover}
.work-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.work-tags .t{font-weight:700;font-size:13px;padding:5px 11px;border-radius:999px;background:var(--teal-tint);color:var(--teal-ink)}
.work-tags .t.prem{background:var(--gold);color:var(--teal-ink)}
.work-info h3{font-size:clamp(1.6rem,2.6vw,2.1rem);font-stretch:118%;font-variation-settings:"wdth" 118}
.work-quote-none{margin:12px 0 18px;color:var(--muted)}
.work-built{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.work-built li{position:relative;padding-left:32px;line-height:1.45}
.work-built li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%230A3238' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.work-built b{color:var(--teal-ink)}
.work-acts{display:flex;flex-wrap:wrap;gap:12px}
.work-fine{font-size:13px;color:var(--muted);margin:14px 0 0}
/* small real-client card under the landscaping examples */
.ex-real{display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:center;margin-top:18px;padding:12px 18px 12px 12px;border-radius:14px;border:1.5px solid rgba(45,181,122,.55);background:rgba(45,181,122,.08);text-decoration:none;color:inherit}
.ex-real img{width:150px;height:94px;object-fit:cover;border-radius:8px}
.ex-real b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#2DB57A;margin-bottom:2px}
.ex-real .go{font-size:24px;font-weight:800;color:var(--gold)}
@media (max-width:1000px){.work-case{grid-template-columns:1fr;gap:36px}}
@media (max-width:640px){.work{padding-block:60px}.ex-real{grid-template-columns:96px 1fr;padding-right:12px}.ex-real img{width:96px;height:64px}.ex-real .go{display:none}}
.work-case+.work-case{margin-top:88px}@media (max-width:1000px){.work-case+.work-case{margin-top:64px}}
/* v8.6.3: "these are showrooms, not finished client sites" note in each examples block */
.ex-demo{margin:4px 0 22px;padding:14px 18px;border-radius:12px;border:1px dashed rgba(246,192,95,.55);background:rgba(246,192,95,.08);font-size:15px;line-height:1.5;color:#D9E8E7}
.ex-demo b{color:var(--gold)}.ex-demo a{color:var(--gold);font-weight:700}