/* ===== mock devices ===== */
.browser{width:88%;max-width:560px;background:#fff;border-radius:12px 12px 0 0;box-shadow:0 -8px 30px -12px rgba(0,0,0,.25);overflow:hidden}
.browser .bar{height:26px;background:#F1ECE4;display:flex;align-items:center;gap:5px;padding:0 10px}
.browser .bar i{width:8px;height:8px;border-radius:50%;background:#D8CFC3}
.browser .bar .url{margin-left:10px;flex:1;height:14px;border-radius:7px;background:#fff;font:500 9px var(--mono);color:var(--ink-3);display:flex;align-items:center;padding:0 8px;white-space:nowrap;overflow:hidden}
.browser .scr{height:170px;padding:12px;display:grid;gap:8px}
.phone{width:120px;height:200px;background:#1E1A17;border-radius:22px 22px 0 0;padding:8px 8px 0;box-shadow:0 -8px 30px -12px rgba(0,0,0,.35);position:relative}
.phone .scr{background:#fff;border-radius:15px 15px 0 0;height:100%;padding:18px 9px 0;display:grid;gap:6px;align-content:start;overflow:hidden}
.phone::after{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);width:34px;height:8px;border-radius:5px;background:#1E1A17}
.duo{display:flex;align-items:flex-end;gap:14px}
.sk{border-radius:6px;background:#EEE8DF}
.sk.c{background:var(--c)}
.sk.c2{background:var(--c2)}

/* ===== case study ===== */
.case-hero{padding:34px 0 10px}
.back{display:inline-flex;align-items:center;gap:8px;font:500 14px var(--sans);text-decoration:none;color:var(--ink-2);padding:8px 14px 8px 10px;border-radius:999px;border:1px solid var(--line);background:var(--paper)}
.back:hover{color:var(--ink);border-color:var(--ink)}
.case-hero h1{margin-top:26px;font-size:clamp(38px,7.5vw,60px)}
.case-hero .lead{font-size:19px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:28px}
.fact{background:var(--paper);padding:14px 16px}
.fact small{display:block;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.fact div{font-size:15px;font-weight:500}
.fact a{color:var(--accent)}
@media(min-width:720px){.facts{grid-template-columns:repeat(4,1fr)}}
.cover{margin-top:26px;border-radius:22px;height:300px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding-top:30px}
@media(min-width:720px){.cover{height:400px}.cover .browser .scr{height:290px}.cover .phone{width:160px;height:290px}}

.next{display:block;text-decoration:none;margin:56px 0 0;border-radius:22px;padding:26px;color:#fff;position:relative;overflow:hidden}
.next small{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.next h3{font-family:var(--display);font-size:32px;font-weight:800;letter-spacing:-.02em;margin-top:6px}
.next p{opacity:.85;margin-top:4px;font-size:15.5px}
.view{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(min-width:960px){
  main .hero{max-width:none;flex-direction:row;align-items:center;justify-content:space-between;gap:56px;text-align:left}
  main .hero-id{flex:1;min-width:0}
  main .hero .name{align-items:flex-start;font-size:clamp(84px,9vw,150px)}
  main .hero .role{font-size:26px;margin-top:22px}
  main .hero .kb{margin-top:0;flex:none;zoom:1.12}
}

/* ===== open-website button ===== */
.kc.visit{--base:#8E2A0F;--side:#6E1F09;--top1:#F27A47;--top2:#D2481E;--ink-k:#fff;width:200px;height:56px;margin-top:24px;border-radius:14px}
.kc.visit>.cap{gap:9px;font:600 15.5px var(--sans);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 3px rgba(90,20,0,.2)}
.kc.visit svg{width:15px;height:15px}

/* ===== image gallery ===== */
.gal{margin-top:26px;position:relative}
.gal-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:22px;-webkit-overflow-scrolling:touch}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:16/10;border:0;padding:0;cursor:zoom-in;display:grid;place-items:center;overflow:hidden;-webkit-tap-highlight-color:transparent}
.gal-slide img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
@media(max-width:600px){.gal-slide{aspect-ratio:4/3}}
.gal-bar{position:absolute;left:0;right:0;bottom:18px;display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:none}
.gal-bar>*{pointer-events:auto}
.gal-count{font:500 13px var(--mono);color:var(--ink-2);min-width:58px;text-align:center;background:rgba(255,253,249,.88);border-radius:999px;padding:7px 0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gal-count b{color:var(--ink);font-weight:600}
.kc.gal-btn{width:56px;height:50px;border-radius:13px}
.kc.gal-btn>.cap{color:var(--ink)}

/* ===== full-screen viewer ===== */
.lb{position:fixed;inset:0;z-index:200;background:rgba(30,26,23,.94);display:grid;place-items:center;animation:fade .2s ease}
.lb[hidden]{display:none}
.lb-img{max-width:min(92vw,1500px);max-height:calc(100vh - 120px);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:var(--paper);object-fit:contain;user-select:none}
.lb-x{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center}
.lb-x:hover{background:rgba(255,255,255,.18)}
.lb .gal-btn{position:absolute;bottom:22px}
.lb-prev{left:calc(50% - 104px)}.lb-next{right:calc(50% - 104px)}
.lb.single .gal-btn{display:none}
.lb-count{position:absolute;bottom:37px;left:0;right:0;text-align:center;font:500 14px var(--mono);color:rgba(255,255,255,.7)}
.lb.single .lb-count{display:none}
html.lb-open,html.lb-open body{overflow:hidden}
@media(max-width:600px){.lb-img{max-height:76vh}}