/* Self-hosted fonts (SIL Open Font License 1.1, see fonts/FONTS-LICENSE.txt). Only Latin and Latin Extended are
   included; the browser downloads a file only when the page uses characters in its unicode-range. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/geist-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/geist-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --ink:#0E0E0C; --on-accent:#0E0E0C; --on-accent-soft:#2B2A26; --bg:#0E0E0C; --panel:#171715; --line:#2A2A26; --line2:#45443E;
  --text:#F2F0EA; --muted:#A3A097; --soft:#C9C6BD; --accent:#FF5A1F;
  --chip:#3A3934; --chip2:#2E2D29; --chip3:#24231F; --chip4:#D9D6CC;
  --dim:#8A877E; --dim2:#55534C; --faint:#6E6C64; --code-text:#E6E3DA; --code-str:#B8D98A;
  --nav-bg:rgba(14,14,12,.92); --shadow:0 18px 50px rgba(0,0,0,.45);
  --display:'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Geist','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#F6F4EE; --panel:#FFFFFF; --line:#E2DFD5; --line2:#CFCBBE;
  --text:#1A1A17; --muted:#5F5C54; --soft:#3D3B35; --accent:#BB3D0A; --on-accent:#FFFFFF; --on-accent-soft:#FFF1EA;
  --chip:#CFCBBE; --chip2:#D8D4C8; --chip3:#E4E1D6; --chip4:#3A3934;
  --dim:#6C6960; --dim2:#A3A097; --faint:#9B978B; --code-text:#2B2A26; --code-str:#3E7A12;
  --nav-bg:rgba(246,244,238,.92); --shadow:0 18px 50px rgba(60,50,30,.14);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--accent)}
img,svg{max-width:100%}
.wrap{max-width:1320px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);margin:0}
.kicker{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:16px}
.h2{font-weight:800;font-size:clamp(42px,9vw,96px);line-height:.92;letter-spacing:-.04em}

/* nav */
header.nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--nav-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;max-width:1320px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.logo{width:40px;height:40px;border-radius:10px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px}
.links{display:flex;align-items:center;gap:26px;font-size:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;font:inherit;font-weight:600;border:1px solid transparent;cursor:pointer;transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{color:var(--on-accent);filter:brightness(1.08)}
.btn-light{background:var(--text);color:var(--bg)}
.btn-light:hover{color:var(--bg)}
.btn-ghost{background:transparent;border-color:var(--line2);color:var(--text)}
.btn-lg{min-height:54px;padding:0 30px}
.menu-btn{display:none}

/* hero */
.hero{padding:72px 0 64px}
.status{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:32px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
.hero-grid{display:flex;flex-wrap:wrap;align-items:flex-end;gap:48px}
.hero-l{flex:999 1 620px;min-width:0}
.hero h1{font-weight:800;font-size:clamp(60px,15vw,176px);line-height:.88;letter-spacing:-.045em}
.hero h1 span{color:var(--accent)}
.lead{font-size:clamp(17px,2.4vw,20px);color:var(--soft);max-width:560px;margin:36px 0 0}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.code{flex:1 1 360px;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;font-family:var(--mono);font-size:14px;line-height:1.8}
.code-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--dim);font-size:12px}
.lights{display:flex;gap:7px}.lights i{width:11px;height:11px;border-radius:50%;background:var(--chip);display:block}
.code pre{margin:0;padding:20px 22px 24px;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--code-text);font:inherit}
.c-n{color:var(--dim)}.c-s{color:var(--code-str)}.c-k{color:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:80px;border-top:1px solid var(--line)}
.stat{padding:26px 16px 0 0}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(40px,7vw,56px);letter-spacing:-.04em;line-height:1}
.stat span{display:block;color:var(--muted);font-size:15px;margin-top:8px}
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .wrap{padding-top:20px;padding-bottom:20px;display:flex;flex-wrap:wrap;gap:10px 32px;font-family:var(--display);font-weight:600;font-size:clamp(18px,3vw,24px);letter-spacing:-.02em;color:var(--dim)}
.strip em{color:var(--accent);font-style:normal}

section.block{padding-top:110px;padding-bottom:20px}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
.head-row p{margin:0;max-width:380px;color:var(--muted)}

/* work */
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:32px}
.card-work{display:flex;flex-direction:column;gap:18px;color:var(--text)}
.shot{aspect-ratio:16/11;border:1px solid var(--line);border-radius:20px;padding:22px;display:flex}
.win{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;transition:transform .3s}
.card-work:hover .win{transform:translateY(-4px)}
.win-top{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line)}
.win-top i{width:8px;height:8px;border-radius:50%;background:var(--chip);display:block}
.win-top u{margin-left:10px;height:8px;width:38%;border-radius:4px;background:var(--chip3)}
.win-body{flex:1;display:flex;gap:14px;padding:16px}
.side{width:22%;display:flex;flex-direction:column;gap:8px}
.side i{height:8px;border-radius:4px;background:var(--chip2);display:block}
.main{flex:1;display:flex;flex-direction:column;gap:12px}
.main .t{height:14px;width:45%;border-radius:4px;background:var(--chip)}
.bars{flex:1;display:flex;align-items:flex-end;gap:6%;border-bottom:1px solid var(--line);padding-top:8px}
.bars i{flex:1;border-radius:4px 4px 0 0;background:var(--chip);display:block}
.bars i.hi{background:var(--accent)}
.meta{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.meta h3{font-weight:700;font-size:28px;letter-spacing:-.03em}
.meta .n{font-family:var(--mono);font-size:13px;color:var(--dim);margin-right:12px}
.meta p{margin:6px 0 0;color:var(--muted);font-size:16px}
.tag{flex-shrink:0;font-family:var(--mono);font-size:12px;color:var(--soft);border:1px solid var(--line2);border-radius:999px;padding:6px 12px}

/* services */
.svc{border-top:1px solid var(--line)}
.svc-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 40px;padding:32px 0;border-bottom:1px solid var(--line)}
.svc-row .n{width:56px;font-family:var(--mono);font-size:14px;color:var(--dim)}
.svc-row h3{flex:1 1 320px;font-weight:700;font-size:clamp(30px,5vw,48px);letter-spacing:-.035em;line-height:1}
.svc-row p{flex:1 1 360px;margin:0;color:var(--muted)}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;border-bottom:2px solid var(--accent);padding-bottom:4px;margin-top:36px}

/* process */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:44px;min-height:260px}
.step b{font-family:var(--display);font-weight:800;font-size:60px;line-height:1;color:var(--accent);letter-spacing:-.04em}
.step h3{font-weight:700;font-size:26px;letter-spacing:-.02em;margin-bottom:10px}
.step p{margin:0;color:var(--muted);font-size:16px}

/* testimonial */
.quote{background:var(--text);color:var(--bg);border-radius:28px;padding:clamp(30px,6vw,84px);display:flex;flex-direction:column;gap:34px}
.quote p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(26px,4vw,52px);line-height:1.1;letter-spacing:-.03em;max-width:1000px}
.who{display:flex;align-items:center;gap:16px}
.who i{width:54px;height:54px;border-radius:50%;background:var(--chip4);display:block}
.who small{display:block;color:var(--dim2);font-size:15px}

/* cta */
.big-cta{padding-top:120px;padding-bottom:100px}
.big-cta h2{font-weight:800;font-size:clamp(52px,12vw,160px);line-height:.88;letter-spacing:-.045em}
.big-cta h2 span{color:var(--accent)}
.mail{font-family:var(--display);font-weight:600;font-size:clamp(22px,4vw,40px);letter-spacing:-.02em;border-bottom:2px solid var(--line2);word-break:break-all}
footer.foot{border-top:1px solid var(--line)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;padding:28px 24px;max-width:1320px;margin:0 auto;font-size:14px;color:var(--muted)}
.foot-in div{display:flex;flex-wrap:wrap;gap:22px}

/* shop */
.shop-head{padding-top:72px;padding-bottom:24px}
.shop-head h1{font-weight:800;font-size:clamp(52px,12vw,136px);line-height:.88;letter-spacing:-.045em}
.shop-head h1 span{color:var(--accent)}
.tabs{display:flex;gap:10px;margin-top:48px;padding-bottom:20px;border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex-shrink:0;height:48px;padding:0 22px;border-radius:999px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;background:transparent;color:var(--text);border:1px solid var(--line2)}
.tab.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.panel{display:none;padding:28px 0 0}
.panel.on{display:block}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.tier{display:flex;flex-direction:column;gap:20px;border-radius:24px;padding:32px;background:var(--panel);border:1px solid var(--line)}
.tier.feat{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tier .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tier .k{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.tier.feat .k{color:var(--on-accent)}
.pop{font-size:12px;font-weight:700;background:var(--ink);color:#F2F0EA;border-radius:999px;padding:5px 10px}
.tier h3{font-weight:800;font-size:44px;letter-spacing:-.04em;line-height:1}
.tier .d{margin:0;color:var(--muted);font-size:16px}
.tier.feat .d,.tier.feat .u{color:var(--on-accent-soft)}
.price{display:flex;align-items:baseline;gap:8px}
.price b{font-family:var(--display);font-weight:700;font-size:46px;letter-spacing:-.04em;line-height:1}
.price span{font-size:15px;color:var(--muted)}
.feats{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--line);flex:1;margin:0;list-style:none;padding-left:0}
.tier.feat .feats{border-color:rgba(14,14,12,.25)}
.feats li{display:flex;gap:12px;font-size:15px}
.feats svg{flex-shrink:0;width:18px;height:18px;margin-top:3px}
.add{height:56px;border-radius:999px;font:inherit;font-weight:700;font-size:16px;cursor:pointer;background:var(--text);color:var(--bg);border:0}
.tier.feat .add{background:var(--ink);color:#F2F0EA}
.add.in{background:transparent;color:var(--text);border:1px solid var(--accent)}
.prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:18px}
.prod{background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.prod-art{aspect-ratio:4/3;padding:20px;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--mono);font-size:13px;color:var(--soft)}
.prod-art .f{align-self:flex-start;border:1px solid var(--line2);border-radius:999px;padding:4px 10px;font-size:12px}
.prod-art .cmd{color:var(--accent)}
.prod-art i{display:block;height:7px;border-radius:4px;background:var(--chip);margin-top:6px}
.prod-b{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.prod-b h3{font-weight:700;font-size:25px;letter-spacing:-.02em}
.prod-b p{margin:0;color:var(--muted);font-size:15px;flex:1}
.prod-f{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
.prod-f b{font-family:var(--display);font-size:25px;font-weight:700}
.add-s{height:44px;padding:0 18px;border-radius:999px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;background:var(--text);color:var(--bg);border:0}
.add-s.in{background:transparent;color:var(--text);border:1px solid var(--accent)}
.quote-wrap{display:flex;flex-wrap:wrap;gap:44px}
.quote-l{flex:1 1 300px}
.quote-l h2{font-weight:800;font-size:clamp(40px,8vw,72px);line-height:.92;letter-spacing:-.04em;margin-bottom:18px}
.quote-l p{color:var(--muted);margin:0 0 28px;max-width:420px}
.quote-l li{list-style:none;display:flex;gap:12px;color:var(--soft);font-size:15px;margin-bottom:14px}
.quote-l ul{padding:0;margin:0}
.quote-l li b{color:var(--accent);font-family:var(--mono);font-weight:500}
.form{flex:999 1 500px;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,4vw,44px)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:18px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld.full{grid-column:1/-1}
.fld label{font-size:14px;color:var(--soft)}
.fld input,.fld select,.fld textarea{background:var(--bg);border:1px solid var(--line2);border-radius:12px;color:var(--text);padding:0 16px;font:inherit;font-size:16px;height:52px;width:100%}
.fld textarea{padding:14px 16px;height:auto;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.sent{display:none;flex-direction:column;gap:14px;align-items:flex-start;padding:30px 0}
.sent .ok{width:62px;height:62px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center}
.sent h3{font-weight:800;font-size:38px;letter-spacing:-.03em}
.sent p{margin:0;color:var(--muted)}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px;margin-top:88px;padding-top:36px;border-top:1px solid var(--line)}
.trust b{display:block;font-family:var(--display);font-size:21px;margin-bottom:6px}
.trust span{color:var(--muted);font-size:15px}

/* cart */
.cart-btn{display:inline-flex;align-items:center;gap:10px;background:var(--text);color:var(--bg);border:0;height:44px;padding:0 18px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer}
.cart-btn span{min-width:22px;height:22px;border-radius:999px;background:var(--accent);font-size:13px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.cart-btn span[hidden]{display:none}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;justify-content:flex-end;z-index:50}
.overlay.on{display:flex}
.drawer{width:min(100%,460px);height:100%;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column}
.drawer-h{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}
.drawer-h h2{font-weight:800;font-size:30px;letter-spacing:-.03em}
.x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}
.drawer-b{flex:1;overflow-y:auto;padding:8px 24px}
.citem{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.citem small{display:block;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.citem b{display:block;font-family:var(--display);font-size:21px}
.citem span{color:var(--soft);font-size:15px}
.rm{background:transparent;border:0;color:var(--muted);text-decoration:underline;font:inherit;font-size:14px;cursor:pointer;min-height:44px}
.drawer-f{padding:20px 24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px;padding-bottom:max(20px,env(safe-area-inset-bottom))}
.empty{color:var(--muted);padding:36px 0}

/* mobile */
@media (max-width:720px){
  body{font-size:16px}
  .wrap,.nav-in,.foot-in{padding-left:18px;padding-right:18px}
  .links .hide-m{display:none}
  .links{gap:14px}
  .hero{padding:48px 0 48px}
  .stats{margin-top:56px}
  section.block{padding-top:80px}
  .big-cta{padding-top:90px;padding-bottom:70px}
  .tier{padding:26px}
  .cta-row .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.view{display:none}.view.on{display:block}
section.block,.big-cta{scroll-margin-top:72px}

/* ---------- v2 additions ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn .sun{display:none}
:root[data-theme=light] .icon-btn .sun{display:block}
:root[data-theme=light] .icon-btn .moon{display:none}
.links{flex-wrap:nowrap}
.links a.cur{color:var(--accent)}
.hero-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid var(--line2);margin-bottom:24px;display:block}

/* scroll reveal (only when JS is on, so no-JS visitors still see everything) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
.card-work .shot img{transition:transform .35s}
.card-work:hover .shot img{transform:scale(1.03)}
.shot img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.shot.has-img{padding:0;overflow:hidden}
.shot.has-img img{border-radius:20px}

/* about + timeline */
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px 64px;align-items:start}
.about-grid p{color:var(--soft);font-size:clamp(18px,2.2vw,22px);line-height:1.5;margin:0 0 20px}
.tl{margin:0;padding:0;list-style:none;border-left:1px solid var(--line2)}
.tl li{position:relative;padding:0 0 30px 28px}
.tl li::before{content:"";position:absolute;left:-5px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.tl small{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.tl b{display:block;font-family:var(--display);font-size:22px;letter-spacing:-.02em;margin:4px 0 2px}
.tl span{display:block;color:var(--muted);font-size:15px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* testimonials carousel */
.car{position:relative}
.car-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car-track::-webkit-scrollbar{display:none}
.car-item{flex:0 0 100%;scroll-snap-align:start}
.car-item .quote{height:100%}
.car-ctl{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:12px}
.dots{display:flex;gap:8px;align-items:center}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:var(--chip);cursor:pointer;padding:0;transition:width .25s}
.dots button.on{background:var(--accent);width:26px;border-radius:6px}
.car-arrows{display:flex;gap:10px}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.6vw,28px);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:28px;color:var(--accent);transition:transform .25s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 26px;color:var(--muted);max-width:760px}

/* blog */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:22px}
.post-card{display:flex;flex-direction:column;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:28px;color:var(--text);transition:transform .25s,border-color .25s}
.post-card:hover{transform:translateY(-4px);border-color:var(--accent);color:var(--text)}
.post-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin-bottom:6px}
.post-card h3{font-weight:700;font-size:26px;letter-spacing:-.025em;line-height:1.1}
.post-card p{margin:0;color:var(--muted);font-size:16px;flex:1}
.post-meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.page-head{padding-top:72px;padding-bottom:28px}
.page-head h1{font-weight:800;font-size:clamp(44px,10vw,112px);line-height:.9;letter-spacing:-.045em}
.page-head h1 span{color:var(--accent)}
.page-head p.sub{color:var(--muted);max-width:560px;margin:24px 0 0}
.prose{max-width:760px;font-size:19px;line-height:1.7;color:var(--soft)}
.prose h2,.prose h3,.prose h4{font-family:var(--display);color:var(--text);letter-spacing:-.025em;line-height:1.1;margin:2em 0 .5em}
.prose h2{font-size:28px}.prose h3{font-size:22px}.prose h4{font-size:21px}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}.prose li{margin-bottom:.4em}
.prose a{color:var(--accent);text-decoration:underline}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.prose pre{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;overflow-x:auto}
.prose pre code{background:none;border:0;padding:0}
.prose blockquote{margin:1.5em 0;padding:4px 0 4px 22px;border-left:3px solid var(--accent);font-family:var(--display);font-size:24px;line-height:1.3;color:var(--text)}
.crumb{font-family:var(--mono);font-size:13px;color:var(--dim);margin-bottom:22px;display:flex;gap:8px;flex-wrap:wrap}
.crumb a{color:var(--muted)}
.cover{width:100%;max-height:460px;object-fit:cover;border-radius:24px;margin:36px 0;border:1px solid var(--line)}

/* project detail */
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px;margin:44px 0}
.case-box{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:28px}
.case-box h2,.case-box h3{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:14px;font-weight:500}
.case-box p,.case-box li{color:var(--soft);font-size:16px}
.case-box p{margin:0 0 10px}
.case-box ul{margin:0;padding-left:1.1em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chips span{font-family:var(--mono);font-size:12px;border:1px solid var(--line2);border-radius:999px;padding:6px 12px;color:var(--soft)}
.pager{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid var(--line);margin-top:70px;padding-top:28px}
.pager a{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em}

/* booking */
.book-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:28px;align-items:start}
.panel-box{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,4vw,40px)}
.days{display:flex;gap:10px;overflow-x:auto;padding-bottom:12px;scrollbar-width:thin}
.day{flex:0 0 auto;min-width:76px;border:1px solid var(--line2);border-radius:16px;background:transparent;color:var(--text);padding:12px 8px;cursor:pointer;font:inherit;text-align:center}
.day small{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.day b{display:block;font-family:var(--display);font-size:26px;line-height:1.1}
.day.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.day.on small{color:var(--on-accent)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:10px;margin-top:18px}
.slot{height:46px;border-radius:12px;border:1px solid var(--line2);background:transparent;color:var(--text);font:inherit;font-family:var(--mono);font-size:14px;cursor:pointer}
.slot:hover{border-color:var(--accent)}
.slot.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.note{font-size:14px;color:var(--dim);margin:14px 0 0}
.chosen{font-family:var(--display);font-weight:700;font-size:24px;margin:0 0 18px;letter-spacing:-.02em}

/* forms extras */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.err{color:#ff8a66;font-size:14px;margin:0}
:root[data-theme=light] .err{color:#B3320A}
.co-email{background:var(--bg);border:1px solid var(--line2);border-radius:12px;color:var(--text);padding:0 16px;font:inherit;font-size:16px;height:52px;width:100%}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;background:var(--text);color:var(--bg);padding:12px 20px;border-radius:999px;font-weight:600;z-index:90;transition:.3s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.big-num{font-family:var(--display);font-weight:800;font-size:clamp(60px,12vw,140px);line-height:.9;letter-spacing:-.045em}
.order-box{max-width:640px}
.order-box dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:28px 0}
.order-box dt{color:var(--dim);font-family:var(--mono);font-size:13px;text-transform:uppercase}
.order-box dd{margin:0}
.nolist{list-style:none;padding:0;margin:0}
.nav-actions{display:flex;gap:10px;align-items:center}
.menu-btn{display:none}

@media (max-width:720px){
  .menu-btn{display:inline-flex}
  .links{position:fixed;left:0;right:0;top:69px;background:var(--bg);flex-direction:column;align-items:stretch;gap:0;padding:8px 18px 20px;border-bottom:1px solid var(--line);display:none}
  .links.open{display:flex}
  .links a:not(.btn){padding:15px 0;border-bottom:1px solid var(--line);font-size:18px}
  .links .hide-m{display:block!important}
  .links .btn{margin-top:14px}
  .page-head{padding-top:48px;padding-bottom:20px}
}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

/* ---------- v3: motion + extras (all disabled by prefers-reduced-motion) ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mq{to{transform:translateX(-50%)}}
.hero .status,.hero h1,.hero .lead,.hero .cta-row,.hero .code,.hero .hero-photo{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both}
.hero .status{animation-delay:.05s}.hero h1{animation-delay:.15s}.hero .lead{animation-delay:.3s}.hero .cta-row{animation-delay:.42s}.hero .code{animation-delay:.5s}
.page-head>*{animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) both}
.page-head>*:nth-child(2){animation-delay:.08s}.page-head>*:nth-child(3){animation-delay:.16s}.page-head>*:nth-child(n+4){animation-delay:.24s}
.btn,.add,.add-s,.tab,.chip,.day,.slot{transition:transform .18s ease,background-color .18s,border-color .18s,color .18s,filter .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active,.add:active,.add-s:active{transform:scale(.97)}
.link-arrow svg{transition:transform .2s}.link-arrow:hover svg,.btn:hover svg{transform:translateX(4px)}
.tier,.prod,.case-box,.step{transition:transform .25s ease,border-color .25s}
.tier:hover,.prod:hover,.step:hover{transform:translateY(-4px)}
.svc-row{transition:background-color .2s,padding .2s}.svc-row:hover{background:var(--chip3)}
header.nav{transition:box-shadow .25s,background-color .25s}header.nav.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.22)}
.dot{box-shadow:0 0 0 0 rgba(255,90,31,.6);animation:ring 2s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,90,31,.55)}70%,100%{box-shadow:0 0 0 10px rgba(255,90,31,0)}}
.panel.on{animation:fadeUp .4s ease both}
.drawer{transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.overlay{display:flex;visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s}
.overlay.on{visibility:visible;opacity:1}.overlay.on .drawer{transform:none}
.toast{transition:opacity .3s,transform .3s}

#progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;z-index:60;pointer-events:none}
.to-top{position:fixed;right:18px;bottom:18px;z-index:40;background:var(--panel);box-shadow:var(--shadow);transition:opacity .25s,transform .25s}
.to-top[hidden]{display:inline-flex;opacity:0;transform:translateY(12px);pointer-events:none}

/* skills marquee */
.strip{overflow:hidden}
.marquee{padding:20px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 32s linear infinite;font-family:var(--display);font-weight:600;font-size:clamp(18px,3vw,24px);letter-spacing:-.02em;color:var(--dim)}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-set{display:flex;align-items:center;gap:32px;padding-right:32px;white-space:nowrap}
.mq-set em{color:var(--accent);font-style:normal}

/* filter chips */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.chip{border:1px solid var(--line2);background:transparent;color:var(--text);border-radius:999px;padding:8px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.chip small{color:var(--dim);font-weight:500}
.chip:hover{border-color:var(--accent);color:var(--text)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.chip.on small{color:var(--on-accent)}
.card-work[hidden]{display:none}
.card-work.pop-in{animation:fadeUp .45s ease both}

/* blog search + newsletter */
.blog-search{display:flex;gap:10px;margin-top:28px;max-width:520px}
.blog-search input,.news input[type=email]{flex:1;min-width:0;height:48px;background:var(--panel);border:1px solid var(--line2);border-radius:999px;color:var(--text);padding:0 20px;font:inherit;font-size:16px}
.post-card h2{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.025em;line-height:1.1;margin:0}
.news{padding-top:90px}
.news-in{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:clamp(26px,5vw,52px)}
.news-in>div{flex:1 1 320px}.news-in form{flex:1 1 340px}
.news h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,4vw,40px);letter-spacing:-.03em;line-height:1;margin:0 0 10px}
.news p{margin:0;color:var(--muted)}.news form p.note{margin:10px 0 0;min-height:1.4em}
.news-row{display:flex;gap:10px}
.news-row .btn{min-height:48px}
@media (max-width:560px){.news-row,.blog-search{flex-direction:column}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.marquee{overflow-x:auto}.drawer{transition:none}}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- desktop polish: side margins, a hero heading that fits the first screen, slim modern scrollbar ---- */
@media (min-width:900px){
  .wrap,.nav-in,.foot-in{padding-left:clamp(32px,5vw,72px);padding-right:clamp(32px,5vw,72px)}
  /* sized by the screen's width AND height, so "Software built to last." fits above the fold on laptops */
  .hero h1{font-size:clamp(72px,min(10vw,17vh),150px)}
}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line2);border:3px solid var(--bg);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::-webkit-scrollbar-corner{background:var(--bg)}
@supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:var(--line2) var(--bg)}}

/* ---- project cards: compact, designed previews (inc/mock/<project-slug>.html), 3 per row on desktop ---- */
.work-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:28px}
.shot{aspect-ratio:16/10}
.shot.mk{padding:0;overflow:hidden;container-type:inline-size;position:relative}
.mk-in{width:100%;height:100%;font-size:2.0833cqw;line-height:1.25;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;pointer-events:none;user-select:none}
.mk-in *{box-sizing:border-box;margin:0;padding:0}
.mk-in b{font-weight:600}.mk-in small{font-size:.9em}.mk-in i,.mk-in em,.mk-in u{font-style:normal;text-decoration:none;display:block}
/* SharePoint-style intranet */
.mk-sp{height:100%;background:#faf9f8;color:#323130;display:flex;flex-direction:column}
.mk-sp-bar{height:3.6em;background:#036c70;color:#fff;display:flex;align-items:center;gap:1.2em;padding:0 1.4em;flex:none}
.mk-sp-bar b{font-size:1.25em}.mk-sp-bar .wf{display:grid;grid-template-columns:repeat(3,.35em);gap:.25em}.mk-sp-bar .wf i{width:.35em;height:.35em;background:#fff;border-radius:50%}
.mk-sp-bar .srch{margin-left:auto;background:rgba(255,255,255,.18);border-radius:.4em;padding:.5em 1em;width:13em;color:rgba(255,255,255,.85);font-size:.9em}
.mk-sp-bar .av{width:2.2em;height:2.2em;border-radius:50%;background:#fff;color:#036c70;display:flex;align-items:center;justify-content:center;font-weight:700}
.mk-sp-nav{display:flex;gap:2em;padding:.9em 1.6em;background:#fff;border-bottom:1px solid #edebe9;color:#605e5c;flex:none}
.mk-sp-nav .on{color:#036c70;font-weight:600;box-shadow:0 .3em 0 -.05em #036c70}
.mk-sp-body{padding:1.4em 1.6em;display:flex;flex-direction:column;gap:1.2em;flex:1;min-height:0}
.mk-sp-hero{display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:1fr 1fr;gap:.9em;height:10.5em;flex:none}
.mk-sp-hero>div{border-radius:.5em;color:#fff;padding:1em 1.1em;display:flex;flex-direction:column;justify-content:flex-end;gap:.25em}
.mk-sp-hero small{font-size:.8em;letter-spacing:.1em;opacity:.85}
.mk-sp-hero .big{grid-row:1/3;background:linear-gradient(135deg,#036c70,#0b9aa0 60%,#2fb7a4)}.mk-sp-hero .big b{font-size:1.5em;line-height:1.2}
.mk-sp-hero .s1{background:linear-gradient(135deg,#8764b8,#5c2e91)}.mk-sp-hero .s2{background:linear-gradient(135deg,#0078d4,#004e8c)}
.mk-sp-row{display:grid;grid-template-columns:1.1fr 1.2fr 1.2fr;gap:.9em;flex:1;min-height:0}
.mk-sp-card{background:#fff;border:1px solid #edebe9;border-radius:.5em;padding:.9em 1em;overflow:hidden}
.mk-sp-card h4{font-size:1em;font-weight:600;margin-bottom:.7em}
.mk-sp-card .ql{display:grid;grid-template-columns:1fr 1fr;gap:.7em;font-size:.85em;color:#605e5c}.mk-sp-card .ql span{display:flex;align-items:center;gap:.5em}
.mk-sp-card .ql i{width:1.9em;height:1.9em;border-radius:.4em}.ql .a{background:#038387}.ql .b{background:#0078d4}.ql .c{background:#8764b8}.ql .d{background:#ca5010}
.mk-sp-card p{margin-bottom:.65em;display:flex;flex-direction:column;font-size:.95em}.mk-sp-card p small{color:#8a8886}
.mk-sp-card p.f{flex-direction:row;align-items:center;gap:.6em;font-size:.9em}.mk-sp-card p.f i{width:1.5em;height:1.7em;border-radius:.25em}.f .w{background:#2b579a}.f .x{background:#217346}.f .p{background:#d13438}
/* Power Apps-style canvas app */
.mk-pa{height:100%;background:#f3f2f1;color:#323130;display:flex;flex-direction:column}
.mk-pa-bar{height:3.6em;background:#742774;color:#fff;display:flex;align-items:center;gap:.9em;padding:0 1.4em;flex:none}
.mk-pa-bar i{width:1.7em;height:1.7em;border-radius:.4em;background:rgba(255,255,255,.9)}.mk-pa-bar b{font-size:1.25em}.mk-pa-bar span{margin-left:auto;font-size:.9em;opacity:.85}
.mk-pa-body{display:grid;grid-template-columns:15em 1fr;gap:1.2em;padding:1.4em;flex:1;min-height:0}
.mk-pa h4{font-size:1em;font-weight:600;margin-bottom:.7em;display:flex;align-items:center;gap:.6em}.mk-pa h4 em{background:#742774;color:#fff;border-radius:99px;padding:.05em .6em;font-size:.85em}
.mk-pa-l{background:#fff;border-radius:.6em;padding:1.1em;display:flex;flex-direction:column;gap:.8em;box-shadow:0 1px 2px rgba(0,0,0,.08)}.mk-pa-l h4{margin:0}
.mk-pa .bal>div{display:flex;align-items:baseline;gap:.5em}.mk-pa .bal b{font-size:1.9em;color:#742774}.mk-pa .bal small{color:#605e5c}
.mk-pa .bal u{display:block;height:.45em;background:#edebe9;border-radius:99px;margin-top:.25em;overflow:hidden}.mk-pa .bal u i{height:100%;background:#b146c2;border-radius:99px}
.mk-pa .newreq{margin-top:auto;background:#742774;color:#fff;text-align:center;border-radius:.4em;padding:.7em;font-weight:600}
.mk-pa-r{background:#fff;border-radius:.6em;padding:1.1em;box-shadow:0 1px 2px rgba(0,0,0,.08);overflow:hidden}
.mk-pa .req{display:flex;align-items:center;gap:.8em;padding:.55em 0;border-bottom:1px solid #f3f2f1}
.mk-pa .req>div{flex:1;display:flex;flex-direction:column}.mk-pa .req small{color:#605e5c;font-size:.82em}
.mk-pa .pic{width:2.3em;height:2.3em;border-radius:50%;background:#e8d0ee;color:#742774;display:flex;align-items:center;justify-content:center;font-size:.8em;font-weight:700}.mk-pa .pic.c2{background:#cfe4f6;color:#0b5a9c}.mk-pa .pic.c3{background:#d4efdc;color:#0b6a2f}
.mk-pa .ok,.mk-pa .no{padding:.35em .9em;border-radius:.35em;font-size:.85em;font-weight:600}.mk-pa .ok{background:#742774;color:#fff}.mk-pa .no{border:1px solid #c8c6c4;color:#605e5c}
.mk-pa .rec{display:flex;justify-content:space-between;align-items:center;padding:.4em 0;font-size:.9em;color:#605e5c}
.mk-pa .pill{border-radius:99px;padding:.15em .8em;font-size:.82em;font-weight:600;display:block}.mk-pa .pill.g{background:#dff6dd;color:#0e700e}.mk-pa .pill.a{background:#fff4ce;color:#835b00}
/* custom mobile expense app */
.mk-ex{height:100%;position:relative;overflow:hidden;background:#12110f}
.mk-ex-glow{position:absolute;inset:0;background:radial-gradient(circle at 52% 42%,rgba(255,90,31,.28),transparent 58%)}
.mk-ph{position:absolute;background:#171715;border:.4em solid #34332e;border-radius:2.8em;color:#f2f0ea;padding:2.4em 1.5em 0;box-shadow:0 2em 4em rgba(0,0,0,.55);overflow:hidden}
.mk-ph-a{left:9em;top:3.4em;width:18em;height:40em;z-index:2}
.mk-ph-b{left:26em;top:6.4em;width:15.5em;height:40em;transform:rotate(5deg);background:#1d1c19;opacity:.95}
.mk-notch{position:absolute;top:.7em;left:50%;width:5em;height:1.1em;margin-left:-2.5em;background:#0a0a09;border-radius:99px}
.mk-ph-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:1em}.mk-ph-h small{color:#a3a097;display:block;font-size:.85em}.mk-ph-h b{font-size:1.5em;letter-spacing:-.01em}
.mk-ph .av{width:2.4em;height:2.4em;border-radius:50%;background:#ff5a1f;color:#0e0e0c;display:flex;align-items:center;justify-content:center;font-weight:700}
.mk-sum{background:linear-gradient(145deg,#ff5a1f,#ff8a3d);color:#1a0d05;border-radius:1.4em;padding:1.1em 1.2em;margin-bottom:1em}
.mk-sum small{display:block;opacity:.8;font-size:.82em}.mk-sum b{font-size:2.4em;letter-spacing:-.03em;display:block;line-height:1.15}.mk-sum sup{font-size:.45em;opacity:.7}
.mk-sum .bar{height:.5em;background:rgba(26,13,5,.22);border-radius:99px;margin:.6em 0 .4em;overflow:hidden}.mk-sum .bar i{width:62%;height:100%;background:#1a0d05;border-radius:99px}
.mk-chips{display:flex;gap:.5em;margin-bottom:.9em;font-size:.85em}.mk-chips span{padding:.3em .9em;border-radius:99px;background:#26251f;color:#a3a097}.mk-chips .on{background:#f2f0ea;color:#0e0e0c;font-weight:600}
.mk-li{list-style:none;display:flex;flex-direction:column;gap:.7em}.mk-li li{display:flex;align-items:center;gap:.8em}.mk-li li>div{flex:1;display:flex;flex-direction:column}
.mk-li .ic{width:2.6em;height:2.6em;border-radius:.9em;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9em}.ic.c1{background:#3b2a52;color:#c9a8ff}.ic.c2{background:#4a3318;color:#ffc27a}.ic.c3{background:#173d33;color:#7be0bc}
.mk-li small{font-size:.8em}.mk-li small.ok{color:#6fcf7f}.mk-li small.wt{color:#e0b341}.mk-li em{font-size:.95em;font-weight:600}
.mk-fab{position:absolute;right:1.4em;bottom:3.2em;width:3.4em;height:3.4em;border-radius:50%;background:#ff5a1f;color:#0e0e0c;display:flex;align-items:center;justify-content:center;font-size:1.6em;font-weight:500;box-shadow:0 .6em 1.4em rgba(255,90,31,.45)}
.mk-f{margin-bottom:.8em}.mk-f label{display:block;font-size:.8em;color:#a3a097;margin-bottom:.3em}
.mk-f .box{background:#26251f;border-radius:.8em;padding:.7em .9em;font-size:.95em;display:flex;justify-content:space-between}.mk-f .box.big{font-size:1.6em;font-weight:600;letter-spacing:-.02em}.mk-f .box.up{border:1px dashed #5a5951;background:transparent;color:#a3a097;justify-content:center}
.mk-btn{margin-top:1em;background:#f2f0ea;color:#0e0e0c;border-radius:99px;padding:.8em;text-align:center;font-weight:600;font-size:.95em}
:root[data-theme=light] .mk-ex{background:#ece8dd}
@media (prefers-reduced-motion:no-preference){.mk-in{transition:transform .35s}.card-work:hover .shot.mk .mk-in{transform:scale(1.02)}}
.card-work .meta{flex-direction:column;gap:12px}
.card-work .meta h3{font-size:clamp(22px,2vw,26px)}
.card-work .meta .tag{order:-1;align-self:flex-start}