@font-face{font-family:"Inter";src:url("assets/fonts/Inter.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("assets/fonts/InterTight.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url("assets/fonts/ChivoMono.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
:root{--ink:#000;--paper:#fff;--grey-light:#F1F1F1;--grey-dark:#5A5A5A;--label:#888;--rule:rgba(0,0,0,.12);--fd:'Inter Tight','Helvetica Neue',system-ui,sans-serif;--fb:'Inter','Helvetica Neue',system-ui,sans-serif;--fm:'Chivo Mono',ui-monospace,monospace;--gut:96px}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink)}
body{font-family:var(--fb);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--paper)}
img{max-width:100%}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .4s cubic-bezier(.2,.7,.2,1)}
a:hover{color:var(--grey-dark)}
h1,h2,h3{font-family:var(--fd);font-weight:500;letter-spacing:-.02em;line-height:1.08;margin:0}
p{margin:0;text-wrap:pretty}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gut)}
.lb{font-family:var(--fm);font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--label);margin:0}
.lb-ink{color:var(--ink)}
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.sec{padding:128px 0}
section{scroll-margin-top:88px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fd);font-size:15px;font-weight:500;letter-spacing:-.01em;padding:14px 28px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;transition:background .4s cubic-bezier(.2,.7,.2,1),color .4s,border-color .4s}
.pill:hover{background:var(--grey-dark);border-color:var(--grey-dark);color:var(--paper)}
.pill-o{background:transparent;color:var(--ink)}
.pill-o:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pill:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hd{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--rule)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:32px;height:72px}
.wm{font-family:var(--fm);font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.nav{display:flex;align-items:center;gap:32px}
.nav a{font-family:var(--fd);font-size:14px;font-weight:500;text-decoration:none;color:var(--grey-dark);white-space:nowrap}
.nav a:hover{color:var(--ink)}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:96px 0 128px}
.hero h1{font-size:clamp(38px,4.6vw,68px)}
.hero .lead{font-family:var(--fd);font-size:21px;font-weight:400;line-height:1.45;color:var(--grey-dark);margin-top:32px;max-width:34ch}
.hero .frame{width:min(100%,calc(min(74vh,760px) * 3 / 4));margin-left:auto;margin-right:auto}
.price{font-family:var(--fd);font-size:17px;font-weight:500;letter-spacing:-.01em;margin-top:32px}
.cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.frame{position:relative;background:var(--grey-light);border-radius:10px;overflow:hidden}
.frame img{display:block;width:100%;height:100%;object-fit:contain;background:var(--grey-light)}
.r169{aspect-ratio:16/9}.r43{aspect-ratio:4/3}.r11{aspect-ratio:1/1}.r34{aspect-ratio:3/4}.r916{aspect-ratio:9/16}
.cap{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;margin-top:16px}
.two{display:grid;grid-template-columns:220px 1fr;gap:32px}
.works{display:grid;grid-template-columns:repeat(12,1fr);gap:96px 32px;align-items:start}
.s12{grid-column:span 12}.s7{grid-column:span 7}.s5{grid-column:span 5}.s4{grid-column:span 4}
.w-t{font-family:var(--fd);font-size:24px;font-weight:500;letter-spacing:-.02em;margin:20px 0 0}
.w-m{font-size:15px;color:var(--grey-dark);margin-top:8px}
.w-c{margin-top:12px}
.w-b{margin-top:20px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.step{border-top:1px solid var(--ink);padding-top:20px}
.step h3{font-size:21px;margin:12px 0 8px}
.step p{font-size:15px;color:var(--grey-dark)}
.bud{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.bud-i{border-top:1px solid var(--ink);padding-top:20px}
.bud-i .n{font-family:var(--fd);font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.02em;margin-top:12px}
.note{font-size:15px;color:var(--grey-dark);margin-top:48px;max-width:70ch}
.form{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.f-row{display:flex;flex-direction:column;gap:8px}
.f-full{grid-column:span 2}
label{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
input,select,textarea{font-family:var(--fb);font-size:16px;color:var(--ink);background:var(--grey-light);border:1px solid transparent;border-radius:10px;padding:14px 16px;width:100%}
textarea{min-height:140px;resize:vertical}
.sel-wrap{grid-column:span 2}
.sel-wrap:empty{display:none}
.sel{display:flex;flex-wrap:wrap;align-items:center;gap:12px;border:1px solid var(--rule);border-radius:10px;padding:14px 16px}
.sel-n{font-family:var(--fd);font-size:16px;font-weight:500}
.lnk{background:none;border:0;padding:0;font-family:var(--fb);font-size:14px;color:var(--grey-dark);text-decoration:underline;cursor:pointer}
.priv{grid-column:span 2;font-size:14px;color:var(--grey-dark);margin:0}
.status{grid-column:span 2;font-size:15px;margin:0;min-height:1px}
.status-note,.status-ok{border-top:1px solid var(--ink);padding-top:16px;color:var(--grey-dark)}
.ft{background:var(--ink);color:var(--paper);padding:96px 0 48px;margin-top:128px}
.ft a{color:var(--paper)}
.ft .lb{color:rgba(255,255,255,.6)}
.ft-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:48px}
.ft-b{margin-top:96px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2)}
@media(max-width:1180px){.nav{gap:24px}}
@media(max-width:1024px){:root{--gut:48px}.hero{grid-template-columns:1fr;gap:48px;padding:64px 0 96px}.steps{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr;gap:16px}.nav{display:none}}
@media(max-width:760px){:root{--gut:24px}.sec{padding:80px 0}.works{gap:64px 24px}.s12,.s7,.s5,.s4{grid-column:span 12}.steps,.bud{grid-template-columns:1fr}.form{grid-template-columns:1fr}.f-full,.sel-wrap,.priv,.status{grid-column:span 1}.ft{margin-top:80px}.ft-b{margin-top:64px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Production integration: preserve Design gutters and readable labels. */
:root{--label:#686868}
[hidden]{display:none!important}
#top{scroll-margin-top:72px}
.wrap.sec{padding:128px var(--gut)}
.wrap.hero{padding:96px var(--gut) 128px}
.wm{font-family:var(--fd);font-weight:600;letter-spacing:.03em}
.r-comrades{aspect-ratio:1440/1298}
.selected-work{font:inherit;border:1px solid var(--rule);border-radius:999px;background:#fff;padding:8px 14px;cursor:pointer}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.privacy{margin:0;font-size:13px}
.inquiry-reference{display:block;margin-top:10px;overflow-wrap:anywhere;font-family:var(--fm);font-size:11px}
.status:not(:empty){padding-top:16px;border-top:1px solid var(--rule)}
.status[data-state=error]{font-weight:500}
.pill:disabled{opacity:.6;cursor:wait}
.skip-link{position:fixed;left:16px;top:-100px;background:#fff;padding:12px;z-index:200}
.skip-link:focus{top:8px}
.ft a:focus-visible{outline-color:#fff}
@media(max-width:1024px){.wrap.hero{padding:64px var(--gut) 96px}}
@media(max-width:760px){.wrap.sec{padding:80px var(--gut)}.hd-in{gap:12px}.hd .wm{max-width:150px;font-size:12px}.hd .pill{padding:10px 14px;font-size:13px}.wrap.hero{padding-top:32px;gap:28px}.hero h1{margin-top:20px!important}.hero .lead{margin-top:20px;font-size:18px}.hero .cta{gap:10px;margin-top:24px}.hero .cta .pill{font-size:13px;padding:12px 18px}}