@font-face{font-family:"Archivo X";font-style:normal;font-weight:600 800;font-display:swap;src:url(fonts/archivo-x.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-latin.woff2) format("woff2")}
:root{--bg:#FAFAF7;--ink:#111;--mute:#555;--red:#E3221B;--acc:#1f7a3a;--acc-dk:#165c2b;--acc-lt:#3fbf68;--yel:#FFE600;--line:#e4e4df}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:0 14px;min-height:44px;display:inline-flex;align-items:center;z-index:9}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.hidden{display:none}
.top{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:12px 24px;z-index:2}
.mark{font-size:13px;font-weight:600;letter-spacing:.14em;text-decoration:none}
.top nav{display:flex;gap:4px}
.top nav a,.foot nav a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;color:var(--mute)}
.top nav a:hover,.foot nav a:hover{color:var(--ink)}
.top .mark{min-height:44px;display:inline-flex;align-items:center}
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px 48px}
.line{font-size:16px;font-weight:400;margin:28px 0 20px;max-width:30ch;letter-spacing:.01em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border:1px solid var(--ink);background:var(--ink);color:#fff;font:500 13px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:0;cursor:pointer}
.btn:hover{background:var(--acc-dk);border-color:var(--acc-dk)}
.sec{max-width:640px;margin:0 auto;padding:72px 24px;border-top:1px solid var(--line)}
.lbl{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:0 0 24px;color:var(--mute)}
.work img{border:1px solid var(--line)}
.sec p{margin:16px 0}
.lnk{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px}
.pk{list-style:none;margin:0;padding:0}
.pk li{display:grid;grid-template-columns:110px 1fr auto;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.pn{font-weight:600}.pi{color:var(--mute)}.pp{font-weight:600}
.note{color:var(--mute)}
.dt{border-bottom:1px solid var(--line)}
.dt summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:500}
.dt p{color:var(--mute)}
.steps{list-style:none;margin:0;padding:0}
.steps li{padding:12px 0}.steps span{font-size:12px;font-weight:600;margin-right:10px;color:var(--acc)}
.todo{font-size:12px;background:var(--yel);padding:2px 6px}
.form{display:grid;gap:16px;margin-top:24px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:grid;gap:6px;font-size:13px;font-weight:500}
input,select,textarea{font:16px Inter,sans-serif;padding:10px 12px;min-height:44px;border:1px solid #8a8a85;background:#fff;color:var(--ink);border-radius:0;width:100%}
[aria-invalid=true]{border-color:#B31A14}
.err{color:#B31A14;font-size:13px}
.more summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;color:var(--mute)}
.more>div{display:grid;gap:16px}
.btn-full{width:100%}
.foot{text-align:center;padding:36px 24px;border-top:1px solid var(--line)}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;column-gap:12px}
.foot .mark{display:block;margin-top:8px;color:var(--mute)}
@media (max-width:600px){.top nav a:not(:last-child){display:none}.row{grid-template-columns:1fr}.pk li{grid-template-columns:1fr auto}.pi{grid-column:1/-1;grid-row:2}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}


/* graffiti wall hero */
.top .mark,.top nav a{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.top nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.top{background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,0))}
.hero{position:relative;min-height:100svh;display:block;padding:0;text-align:left;overflow:hidden;
 background:#090907 url(img/wall-1920.jpg) center/cover no-repeat;
 background-image:image-set(url(img/wall-1920.webp) type("image/webp"),url(img/wall-1920.jpg) type("image/jpeg"))}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55));pointer-events:none}
.panel{position:absolute;z-index:2;left:24px;bottom:24px;max-width:360px;background:#111;color:#fff;padding:20px 22px 22px}
.wm{margin:0;font-size:13px;font-weight:600;letter-spacing:.16em}
.panel .line{margin:8px 0 16px;font-size:16px}
.btn-lt{background:#FAFAF7;color:#111;border-color:#FAFAF7}
.btn-lt:hover{background:var(--acc-dk);border-color:var(--acc-dk);color:#fff}
@media (max-width:600px){
 .hero{background:#090907;background-image:linear-gradient(rgba(9,9,7,0) 0,#090907 100%),url(img/wall-900.jpg);background-image:linear-gradient(rgba(9,9,7,0) 30vw,#090907 73vw),image-set(url(img/wall-900.webp) type("image/webp"),url(img/wall-900.jpg) type("image/jpeg"));background-size:100% 75vw,100% auto;background-position:0 52px,0 52px;background-repeat:no-repeat}
 .hero::after{content:none}
 .panel{left:16px;right:16px;bottom:16px;max-width:none}
}
.tyhero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px}
@media (max-width:600px){
 .hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:20px;padding:calc(52px + 75vw - 44px) 16px 16px}
 .hero picture{display:block}
 .panel{position:relative;left:auto;right:auto;bottom:auto;width:100%;max-width:none}
}

/* mobile polish */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,summary,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,.08)}
.form label small{font-size:12px;font-weight:400;color:var(--mute)}
[id]{scroll-margin-top:16px}
/* floating CTA (phones) */
.fab{display:none}
@media (max-width:600px){
 .fab{display:flex;position:fixed;z-index:5;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));min-height:52px;align-items:center;justify-content:space-between;padding:0 18px;background:#111;color:#fff;border-left:4px solid var(--acc-lt);font:600 13px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.25);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s,transform .25s}
 .fab span{color:var(--acc-lt);font-size:18px}
 .fab.on{opacity:1;transform:none;pointer-events:auto}
 .foot{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}
.alt-links{display:flex;flex-wrap:wrap;gap:0 18px}
.pop{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-left:8px;white-space:nowrap}
.care{margin:0 0 16px;padding-left:18px;color:var(--mute)}.care li{margin:4px 0}
.mark{text-transform:uppercase}
.panel .line{margin-top:0;font-size:17px;font-weight:500}
.btn{background:var(--acc);border-color:var(--acc);color:#fff}
.btn-lt{background:var(--acc);border-color:var(--acc);color:#fff}
.hero :focus-visible,.fab:focus-visible{outline-color:var(--acc-lt)}
.panel{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
@media (max-width:600px){.hero{min-height:0;justify-content:flex-start;gap:0;padding:calc(52px + 73vw + 4px) 16px 24px}}
@media (min-width:601px){.panel{left:clamp(24px,4vw,56px);bottom:clamp(24px,5vh,56px)}}
.priv{margin:0;font-size:13px;color:var(--mute)}
/* display face: Archivo (expanded, bold) for brand + UI labels; Inter stays for body */
.mark,.top nav a,.foot nav a,.btn,.fab,.lbl,.pop,.pn,.pp,.steps span,h1,.panel .line{font-family:"Archivo X",Inter,system-ui,sans-serif}
.mark{font-weight:800;letter-spacing:.1em}
.top nav a,.foot nav a{font-weight:700;letter-spacing:.1em}
.btn,.fab{font-weight:700;letter-spacing:.1em}
.lbl{font-weight:800;letter-spacing:.14em}
.panel .line{font-weight:700;font-size:19px;line-height:1.3;letter-spacing:0}
.pn,.pp{font-weight:700}
.pay{margin:20px 0;padding:16px 18px;border-left:4px solid var(--acc);background:#fff;box-shadow:0 0 0 1px var(--line)}
.pay strong{display:block;font-family:"Archivo X",Inter,sans-serif;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.pay p{margin:6px 0 0;font-weight:500}
.fp summary{font-family:"Archivo X",Inter,sans-serif;font-weight:700;letter-spacing:.04em;color:var(--acc)}
.fpl{margin:0 0 16px;padding-left:0;list-style:none}.fpl li{padding:8px 0 8px 14px;border-left:3px solid var(--acc);margin:8px 0;color:var(--mute)}.fpl strong{color:var(--ink);font-family:"Archivo X",Inter,sans-serif;font-weight:700}
.pi b{color:var(--ink);font-weight:600}
.steps li b{font-family:"Archivo X",Inter,sans-serif;font-weight:700}
.sec p.wtag{margin:14px 0 -8px;font-family:"Archivo X",Inter,sans-serif;font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.quote{margin:28px 0 8px;padding:0}.quote blockquote{margin:0;position:relative;padding-top:30px}.quote blockquote::before{content:"\201C";position:absolute;top:-14px;left:-4px;font:800 64px/1 "Archivo X",Georgia,serif;color:var(--acc)}.quote blockquote p{margin:0;font-size:17px;line-height:1.55;color:var(--ink)}.quote figcaption{margin-top:12px;font-family:"Archivo X",Inter,sans-serif;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.sec p.guide{margin:0 0 8px;font-family:"Archivo X",Inter,sans-serif;font-weight:700;font-size:15px;line-height:1.45;color:var(--acc)}
/* contact: dark premium panel */
.todo{display:none!important}
#contact{max-width:none;margin:0;padding:72px 24px 96px;background:#0f0f0d;color:#f2f2ee;border-top:0}
#contact>*{max-width:640px;margin-left:auto;margin-right:auto}
#contact .lbl{color:var(--acc-lt);margin-bottom:12px}
#contact p.c-head{margin-top:0;margin-bottom:8px;font:800 26px/1.2 "Archivo X",Inter,sans-serif;letter-spacing:0}
#contact p.c-sub{margin:0 auto 24px;color:#a9a9a2}
.c-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.c-way{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:64px;padding:10px 14px;border:1px solid #2c2c28;background:#171714;text-decoration:none;transition:border-color .2s,background .2s}
.c-way span{font:700 11px "Archivo X",Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-lt)}
.c-way b{font-weight:500;font-size:14px;overflow-wrap:anywhere}
.c-way:hover{border-color:var(--acc);background:#1a2219}
#contact .form{gap:20px;margin-top:40px;padding-top:32px;border-top:1px solid #26261f}
#contact .row{gap:20px}
#contact .form label{gap:8px;color:#d8d8d2}
#contact .form label small,#contact .priv,#contact .more summary{color:#9a9a93}
#contact input,#contact select,#contact textarea{background:#171714;color:#f2f2ee;border:1px solid #33332e;border-radius:6px;transition:border-color .15s,box-shadow .15s}
#contact select{color-scheme:dark}
#contact ::placeholder{color:#6d6d66}
#contact input:focus,#contact select:focus,#contact textarea:focus{outline:none;border-color:var(--acc-lt);box-shadow:0 0 0 3px rgba(31,122,58,.45)}
#contact [aria-invalid=true]{border-color:#e0605a}
#contact .err{color:#ff8a84}#contact .err:empty{display:none}
#contact .more>div{padding-top:8px}
#contact .btn-full{min-height:52px;border-radius:6px}
#contact .btn-full:hover{background:var(--acc-dk)}
#contact :focus-visible{outline-color:var(--acc-lt)}
@media (max-width:600px){#contact{padding:56px 16px 120px}.c-ways{grid-template-columns:1fr}.c-way{flex-direction:row;align-items:center;justify-content:space-between;min-height:52px}#contact p.c-head{font-size:23px}}
/* contact v2: minimal phone + pills */
.c-ways{display:block}
.c-phone{display:inline-block;font:800 32px/1.15 "Archivo X",Inter,sans-serif;letter-spacing:.01em;color:#f2f2ee;text-decoration:none;padding:4px 0}
.c-phone:hover{color:var(--acc-lt)}
.c-pills{display:flex;gap:10px;margin:14px 0 18px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:96px;padding:0 22px;border-radius:999px;background:var(--acc);color:#fff;font:700 12px "Archivo X",Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background .2s}
.pill:hover{background:var(--acc-dk)}
.c-mail{display:inline-flex;align-items:center;min-height:44px;color:#d8d8d2;text-decoration:underline;text-decoration-color:var(--acc-lt);text-underline-offset:5px}
.c-mail:hover{color:var(--acc-lt)}
@media (max-width:600px){.c-phone{font-size:30px}}
/* contact v3: smaller phone */
.c-phone,.c-phone:is(*){font:500 18px/1.4 Inter,system-ui,sans-serif;letter-spacing:0;min-height:44px;display:inline-flex;align-items:center;padding:0}
@media (max-width:600px){.c-phone{font-size:18px}}
/* go-live a11y: stronger field borders + placeholder contrast in dark contact */
#contact input,#contact select,#contact textarea{border-color:#5a5a53}
#contact ::placeholder{color:#8f8f88}
.sec p.wlink{margin:20px 0 0}
/* expanders as clear tappable cards */
.dt{border:1px solid #d9d9d2;border-radius:10px;background:#fff;margin:10px 0;transition:border-color .15s,background .15s}
.dt summary{list-style:none;min-height:48px;padding:12px 52px 12px 16px;position:relative;cursor:pointer;font-weight:500;border-radius:10px;-webkit-user-select:none;user-select:none}
.dt summary::-webkit-details-marker{display:none}
.dt summary::after{content:"";position:absolute;right:16px;top:50%;width:22px;height:22px;margin-top:-11px;background:linear-gradient(var(--acc),var(--acc)) center/14px 2px no-repeat,linear-gradient(var(--acc),var(--acc)) center/2px 14px no-repeat;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(31,122,58,.35);transition:transform .2s}
.dt[open] summary::after{transform:rotate(45deg)}
.dt:hover,.dt summary:active{border-color:var(--acc)}
.dt:hover{background:#f3f8f4}
.dt[open]{border-color:rgba(31,122,58,.55)}
.dt summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.dt>:not(summary){margin-left:16px;margin-right:16px}
.dt>:last-child:not(summary){margin-bottom:16px}
.dt .care{padding-left:18px}
.fp summary{color:var(--acc)}
