/* ---------- home: project cards ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px}
.card{position:relative;display:flex;flex-direction:column;border-radius:32px;overflow:hidden;background:var(--c-bg);color:var(--c-ink,#141416);isolation:isolate;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
a.card:hover{transform:translateY(-8px);box-shadow:0 40px 70px -34px rgba(20,12,45,.45)}
.card .media{position:relative;height:440px;overflow:hidden}
.card .media .glow{position:absolute}
.card .media .phone,.card .media .win{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card .hv{transition:translate .8s cubic-bezier(.2,.7,.2,1)!important}
a.card:hover .hv{translate:0 -14px}
a.card:hover .hv.b{translate:0 -6px}
.card .media .glow{inset:0;background:var(--c-glow,none);z-index:-1}
.card .body{padding:0 40px 38px;position:relative;z-index:9}
.card .body h3{font-size:32px;letter-spacing:-.03em;margin-bottom:8px}
.card .body p{font-size:18px;color:var(--c-sub,#5b5b63);max-width:460px;line-height:1.45}
.card .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;padding-right:64px} /* room for the round arrow */
.card .tags span{font-size:12px;font-weight:600;letter-spacing:.04em;padding:6px 12px;border-radius:999px;background:var(--c-tag,rgba(0,0,0,.06));color:var(--c-sub,#5b5b63)}
.card .go{position:absolute;right:30px;bottom:34px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--c-btn,var(--c-ink,#141416));color:var(--c-btn-ink,#fff);font-size:22px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
a.card:hover .go{transform:rotate(-45deg) scale(1.08)}
.card .soon{position:absolute;right:30px;bottom:40px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-sub)}
.card.wide{grid-column:span 2}
.card.wide .media{height:520px}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.step{border:1px solid var(--line);border-radius:26px;padding:28px;transition:transform .35s,border-color .35s,box-shadow .35s;background:#fff}
.step:hover{transform:translateY(-6px);border-color:#dcdce3;box-shadow:0 24px 40px -28px rgba(0,0,0,.25)}
.step b{display:block;font-size:14px;color:var(--red);margin-bottom:20px;letter-spacing:.06em}
.step h3{font-size:21px}
.step p{color:var(--muted);font-size:15.5px}
.tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.tools span{padding:10px 18px;border-radius:999px;border:1px solid var(--line);font-weight:600;font-size:14px;transition:all .25s;background:#fff}
.tools span:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* ---------- carousels block ---------- */
.carousel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:28px;flex-wrap:wrap}
.carousel-head p{max-width:480px;color:var(--muted);font-size:17px}
.carousel-head h3{font-size:30px;margin:0}
/* funnel projects (make_funnels.py): a square in the project's colour, its logo, a small link to the live site */
.fun-logo{flex:none;width:220px;height:220px;border-radius:26px;background:var(--bg);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 0 0 1px rgba(20,20,30,.06);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.fun-logo img{height:calc(220px * var(--lh));width:auto;max-width:76%;object-fit:contain;margin-top:-16px}
.fun-logo span{position:absolute;left:10px;right:10px;bottom:18px;text-align:center;font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fun-logo span i{font-style:normal;display:inline-block;transition:transform .25s}
a.fun-logo:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(20,20,30,.06),0 22px 40px -26px rgba(20,12,45,.45)}
a.fun-logo:hover span i{transform:translate(2px,-2px)}
@media (max-width:900px){.fun-logo{width:170px;height:170px;border-radius:22px}.fun-logo img{height:calc(170px * var(--lh));margin-top:-12px}.fun-logo span{bottom:13px;font-size:11.5px}}

/* ---------- contact ---------- */
.contact{border-radius:40px;padding:90px 70px;position:relative;overflow:hidden}
.contact h2{font-size:clamp(40px,6vw,80px);max-width:900px}
.contact .rows{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}
.contact .chip{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:999px;font-weight:600;font-size:17px;transition:all .25s}

@media (max-width:900px){
  .grid{grid-template-columns:1fr;gap:20px}
  .card.wide{grid-column:auto}
  .card .media,.card.wide .media{height:360px}
  .card .body{padding:0 24px 28px}
  .card .body h3{font-size:26px}
  .card .go{right:20px;bottom:24px;width:46px;height:46px}
  .steps{grid-template-columns:1fr 1fr}
  .contact{padding:56px 24px;border-radius:28px}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .card .media{height:330px}
}