/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden}
#bg{position:absolute;inset:0;width:100%;height:100%}
.hero-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 34%,color-mix(in srgb,var(--bg) 20%,transparent) 62%,transparent 100%),linear-gradient(0deg,var(--bg) 0%,transparent 22%)}
.hero-in{position:relative;z-index:2;width:100%;padding-top:90px;padding-bottom:60px}
.hero h1{font-size:clamp(42px,6.4vw,88px);line-height:.98;letter-spacing:-.045em;font-weight:600;margin-top:20px;max-width:14ch}
.hero h1 .s{color:var(--accent);letter-spacing:-.02em}
.hero .sub{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:50ch;margin-top:22px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.trust{display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:40px;font-size:14px;color:var(--muted)}
.trust span{display:flex;align-items:center;gap:8px}
.trust b{color:var(--ink);font-weight:600}
.trust span::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232F4BD8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat}
.hero-in>*{opacity:.01;transform:translateY(16px);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero-in>*:nth-child(2){animation-delay:.08s}.hero-in>*:nth-child(3){animation-delay:.16s}.hero-in>*:nth-child(4){animation-delay:.24s}.hero-in>*:nth-child(5){animation-delay:.32s}
@keyframes rise{to{opacity:1;transform:none}}


/* why me */
.why{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,80px);align-items:center}
.photo{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:var(--s2)}
.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
/* brand tint: same soft blue wash on the portrait and the work thumbnail */
.tint{position:relative;isolation:isolate}
.tint img{filter:saturate(.82) contrast(.98)}
.tint::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 30%,transparent) 0%,color-mix(in srgb,var(--accent) 14%,transparent) 100%);mix-blend-mode:multiply}
[data-theme="dark"] .tint img{filter:saturate(.75) brightness(.88)}
[data-theme="dark"] .tint::after{mix-blend-mode:soft-light;background:color-mix(in srgb,var(--accent) 45%,transparent)}
.photo .badge{z-index:4}
.photo .badge{position:absolute;left:14px;bottom:14px;background:var(--s1);color:var(--ink);border-radius:12px;padding:10px 14px;font-size:13px;box-shadow:0 10px 30px -12px #0005}
.photo .badge b{display:block;font-size:15px}
.proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;border-top:1px solid var(--line)}
.proofs div{padding:18px 16px 0 0}
.proofs strong{display:block;font-size:clamp(30px,3.2vw,42px);font-weight:600;letter-spacing:-.04em;line-height:1}
.proofs p{font-size:14px;color:var(--muted);margin-top:6px}
.creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.creds span{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:var(--s1)}

/* work */
.case{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--s1);margin-top:36px;transition:transform .3s,box-shadow .3s}
.case:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px #0007}
.case-vis{background:radial-gradient(120% 90% at 80% 10%,color-mix(in srgb,var(--accent) 38%,var(--bg)) 0%,color-mix(in srgb,var(--accent) 12%,var(--bg)) 70%);display:flex;align-items:center;justify-content:center;padding:32px;min-height:300px}
.win{position:relative;width:100%;max-width:460px;aspect-ratio:1320/1026;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -24px #000b;color:#004b87;font-family:'Helvetica Neue',Arial,sans-serif;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.case:hover .win{transform:scale(1.02)}
.win .bb{height:24px;background:#eef1f6;display:flex;gap:6px;align-items:center;padding:0 10px}.win .bb i{width:8px;height:8px;border-radius:50%;background:#cfd6e2}
.win .in{padding:20px}.win .k{font-size:10.5px;letter-spacing:.14em;color:#ed3341;font-weight:700}
.win .h{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.05;margin:8px 0 12px}
.win .r{display:flex;gap:8px}.win .r span{flex:1;height:48px;border-radius:6px;background:#eaf0f7}.win .r span:first-child{background:#ed3341}
.win img.real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;z-index:2}
.win.tint::after{border-radius:inherit}
.case-body{padding:32px;display:flex;flex-direction:column}
.case-body h3{font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.03em;margin-top:8px}
.case-body p{color:var(--muted);margin-top:10px}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.pills span{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.pills span.hl{background:var(--accent-soft);border-color:transparent;color:var(--accent);font-weight:600}
.more{margin-top:auto;padding-top:20px;font-weight:500;color:var(--accent)}
.more-link{display:inline-flex;margin-top:28px;font-weight:500;color:var(--accent);gap:8px}

/* services grid */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.svc-card{position:relative;overflow:hidden;background:var(--s1);border:1px solid var(--line);border-radius:24px;padding:34px 34px 30px;display:flex;flex-direction:column;min-height:360px;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
.svc-card::before{content:"";position:absolute;right:-30%;top:-40%;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 65%);opacity:.5;transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1)}
.svc-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:0 34px 60px -40px color-mix(in srgb,var(--accent) 60%,#000)}
.svc-card:hover::before{opacity:1;transform:translate(-8%,8%) scale(1.1)}
.svc-card>*{position:relative}
.svc-card .no{position:absolute;top:30px;right:34px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.06em}
.svc-card .ic{width:54px;height:54px;border-radius:16px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;transition:background .3s,color .3s,transform .4s}
.svc-card:hover .ic{background:var(--accent);color:#fff;transform:rotate(-6deg)}
.svc-card .tag{margin-top:26px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.svc-card h3{font-size:clamp(26px,2.4vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-top:6px}
.svc-card p{color:var(--muted);margin-top:10px;max-width:44ch}
.svc-card ul{list-style:none;margin:18px 0 22px;display:grid;gap:8px}
.svc-card li{display:flex;gap:10px;align-items:center;font-size:15px}
.svc-card li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232F4BD8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat}
.svc-card .go{margin-top:auto;font-weight:500;color:var(--accent)}
.svc-card .go b{display:inline-block;transition:transform .25s}.svc-card:hover .go b{transform:translateX(4px)}
@media (max-width:760px){.svc{grid-template-columns:1fr}.svc-card{min-height:0;padding:26px}.svc-card .no{top:24px;right:26px}}

.work-h{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}.work-h .more-link{margin-top:0}
.ai-strip{display:flex;align-items:center;gap:16px;margin-top:16px;padding:18px 22px;border-radius:18px;background:var(--ink);color:var(--bg);transition:transform .3s}
.ai-strip:hover{transform:translateY(-3px)}
.ai-strip .new{flex:none;font-size:12px;font-weight:600;background:var(--accent);color:#fff;border-radius:999px;padding:4px 10px}
.ai-strip .t{flex:1;color:color-mix(in srgb,var(--bg) 75%,transparent);font-size:15.5px}.ai-strip .t b{color:var(--bg);font-weight:600}
.ai-strip .go{flex:none;font-weight:500}
@media (max-width:640px){.ai-strip{flex-wrap:wrap}.ai-strip .t{flex-basis:100%;order:2}.ai-strip .go{order:3}}
/* cta */
.cta{text-align:center}
.cta h2{margin:12px auto 0;max-width:16ch}
.cta p{color:var(--muted);max-width:46ch;margin:14px auto 0}
.cta .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

@media (prefers-reduced-motion:reduce){.hero-in>*{animation:none;opacity:1;transform:none}}
@media (max-width:900px){.why,.case{grid-template-columns:1fr}.photo{max-width:380px}.hero-fade{background:linear-gradient(0deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 55%,color-mix(in srgb,var(--bg) 30%,transparent) 100%)}}
@media (max-width:560px){.proofs{grid-template-columns:1fr 1fr 1fr}.proofs strong{font-size:26px}}