/* Granite Built 2.0. Quarried granite + one blasting-cap orange. Archivo variable (width 62-125). */
@font-face{font-family:Archivo;font-style:normal;font-weight:300 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin-var.woff2) format("woff2")}
:root{
  --s950:#0C0F12;--s900:#0F1316;--s850:#14181B;--s800:#1A1F24;--s700:#232A30;--s600:#333C44;--edge:#2B343B;--edge2:#3A444D;
  --ink:#EDF0F2;--ink2:#A8B3BC;--ink3:#8592A0;
  --sig:#FF4D1F;--sig-ink:#1A0A04;--sig-text:#FF7A52;
  --ok:#6FCF97;
  --r:6px;--max:76rem;--gut:clamp(1rem,4.5vw,3rem);--ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:4.5rem}
body{margin:0;background:var(--s850);color:var(--ink);font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--sig);color:var(--sig-ink)}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
h1,h2,h3,h4,p{margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* type */
.d1{font-weight:850;font-stretch:72%;letter-spacing:-.025em;line-height:.95;font-size:clamp(2.6rem,7.2vw,5.6rem);text-wrap:balance}
.d2{font-weight:820;font-stretch:76%;letter-spacing:-.02em;line-height:1;font-size:clamp(2rem,4.6vw,3.4rem);text-wrap:balance}
.d3{font-weight:800;font-stretch:84%;letter-spacing:-.012em;line-height:1.08;font-size:clamp(1.35rem,2.4vw,1.75rem)}
.lede{color:var(--ink2);font-size:clamp(1.05rem,1.6vw,1.22rem);max-width:40rem;margin-top:1rem}
.muted{color:var(--ink2)}.dim{color:var(--ink3)}
.sig{color:var(--sig-text)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.7rem 1.15rem;border-radius:var(--r);border:1px solid var(--edge2);background:transparent;color:var(--ink);font:inherit;font-weight:750;font-size:1rem;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,transform .1s}
.btn:hover{border-color:var(--ink3)}
.btn:active{transform:translateY(1px)}
.btn.go{background:var(--sig);border-color:var(--sig);color:var(--sig-ink)}
.btn.go:hover{background:#ff6236;border-color:#ff6236}
.btn.sm{min-height:2.5rem;padding:.45rem .85rem;font-size:.92rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

/* header */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--s850) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--edge)}
.top .wrap{display:flex;align-items:center;gap:1.25rem;height:4rem}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:880;font-stretch:108%;letter-spacing:-.02em;font-size:1.06rem;white-space:nowrap}
.mark svg{width:1.55rem;height:1.55rem}
.nav{display:none;gap:.2rem;margin-left:.5rem}
.nav a{padding:.5rem .7rem;border-radius:var(--r);text-decoration:none;color:var(--ink2);font-weight:650;font-size:.96rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);background:var(--s800)}
.top .right{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.top .acct{color:var(--ink2);text-decoration:none;font-weight:650;font-size:.95rem;padding:.5rem .6rem}
.top .acct:hover{color:var(--ink)}
.menu-btn{all:unset;cursor:pointer;width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:var(--r);border:1px solid var(--edge)}
.mnav{display:none;border-top:1px solid var(--edge);padding:.5rem var(--gut) 1rem}
.mnav.open{display:grid}
.mnav a{padding:.8rem 0;border-bottom:1px solid var(--edge);text-decoration:none;font-weight:700;font-size:1.05rem}
@media (min-width:62rem){.nav{display:flex}.menu-btn,.mnav{display:none!important}}
@media (max-width:30rem){.top .acct{display:none}}

/* sections */
.sec{padding-block:clamp(3.5rem,8vw,6.5rem)}
.sec.tight{padding-block:clamp(2.5rem,5vw,4rem)}
.band{background:var(--s900);border-block:1px solid var(--edge)}
.head{display:grid;gap:.4rem;margin-bottom:clamp(1.75rem,3.5vw,2.75rem);max-width:46rem}

/* hero */
.hero{padding-block:clamp(3rem,8vw,6.5rem) clamp(2.5rem,6vw,4.5rem)}
.hero .row{margin-top:1.8rem}
.hero-grid{display:grid;gap:2.5rem;align-items:end}
@media (min-width:62rem){.hero-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.steps3{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--edge)}
.steps3 li{display:grid;grid-template-columns:2.4rem 1fr;gap:.2rem .8rem;padding:1rem 0;border-bottom:1px solid var(--edge)}
.steps3 .n{font-weight:850;font-stretch:72%;font-size:1.5rem;color:var(--sig-text);line-height:1.1}
.steps3 b{display:block;font-size:1.05rem}
.steps3 span{color:var(--ink2);font-size:.95rem}

/* price list (the catalog) */
.plist{border-top:1px solid var(--edge2)}
.pitem{display:grid;gap:.6rem 2rem;padding:1.5rem 0;border-bottom:1px solid var(--edge);align-items:center;text-decoration:none}
@media (min-width:52rem){.pitem{grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto auto}}
.pitem h3{font-weight:820;font-stretch:80%;font-size:1.55rem;line-height:1.05;letter-spacing:-.015em}
.pitem p{color:var(--ink2)}
.pitem .price{font-weight:800;white-space:nowrap;text-align:left}
.pitem .price small{display:block;color:var(--ink3);font-weight:600;font-size:.82rem}
@media (min-width:52rem){.pitem .price{text-align:right}}
.pitem:hover h3{color:var(--sig-text)}
.tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:.15rem .45rem;border-radius:4px;border:1px solid var(--edge2);color:var(--ink2);vertical-align:.35em;margin-left:.45rem}
.tag.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}

/* feature product (home) */
.feature{display:grid;gap:2rem;align-items:center;background:var(--s800);border:1px solid var(--edge);border-radius:var(--r);padding:clamp(1.25rem,3vw,2.5rem)}
@media (min-width:62rem){.feature{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.ticks{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem}
.ticks li{display:grid;grid-template-columns:1.2rem 1fr;gap:.6rem;color:var(--ink)}
.ticks li::before{content:"";width:.55rem;height:.95rem;border:solid var(--sig);border-width:0 2.5px 2.5px 0;transform:translate(.25rem,.05rem) rotate(45deg)}
.pricebox{border:1px solid var(--edge2);border-radius:var(--r);padding:1.25rem;display:grid;gap:.35rem;background:var(--s850)}
.pricebox .big{font-weight:850;font-stretch:76%;font-size:2.6rem;line-height:1;letter-spacing:-.02em}
.pricebox .big small{font-size:1rem;font-weight:700;color:var(--ink2);letter-spacing:0;font-stretch:100%}
.pricebox .plus{color:var(--ink2);font-weight:650}
.pricebox .note{color:var(--ink3);font-size:.9rem;margin-top:.3rem}
.pricebox .btn{margin-top:.8rem;width:100%}

/* browser frame for client work */
.shot{border:1px solid var(--edge2);border-radius:var(--r);overflow:hidden;background:var(--s950)}
.shot .bar{display:flex;gap:.35rem;align-items:center;padding:.5rem .7rem;border-bottom:1px solid var(--edge);font-size:.78rem;color:var(--ink3)}
.shot .bar i{width:.5rem;height:.5rem;border-radius:50%;background:var(--s600)}
.shot .bar span{margin-left:.5rem}

/* work */
.work{display:grid;gap:1.5rem}
@media (min-width:52rem){.work{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wk{display:grid;gap:.8rem}
.wk .k{font-size:.85rem;font-weight:750;color:var(--sig-text)}
.wk h3{font-weight:820;font-stretch:84%;font-size:1.4rem}
.wk p{color:var(--ink2)}

/* custom row */
.custom{display:grid;gap:0;border-top:1px solid var(--edge2)}
.citem{display:grid;gap:.4rem 2rem;padding:1.3rem 0;border-bottom:1px solid var(--edge);align-items:center}
@media (min-width:52rem){.citem{grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto}}
.citem h3{font-weight:820;font-stretch:80%;font-size:1.4rem}
.citem p{color:var(--ink2)}

/* tiers */
.tiers{display:grid;gap:1rem}
@media (min-width:62rem){.tiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tier{border:1px solid var(--edge);border-radius:var(--r);padding:1.4rem;display:grid;gap:.5rem;align-content:start;background:var(--s850)}
.tier.pick{border-color:var(--sig)}
.tier .amt{font-weight:850;font-stretch:76%;font-size:2.4rem;line-height:1}
.tier h3{font-size:1.1rem;font-weight:800}
.tier p{color:var(--ink2);font-size:.97rem}
.tier .flag{font-size:.8rem;font-weight:800;color:var(--sig-text)}

/* people */
.people{display:grid;gap:1.25rem}
@media (min-width:52rem){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
.person{border-top:2px solid var(--sig);padding-top:1rem;display:grid;gap:.35rem}
.person h3{font-weight:820;font-stretch:84%;font-size:1.35rem}
.person .role{color:var(--ink3);font-weight:650;font-size:.92rem}
.person p{color:var(--ink2)}
.person a{font-weight:750}

/* faq */
.faq{border-top:1px solid var(--edge2);max-width:52rem}
.faq details{border-bottom:1px solid var(--edge)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 2rem 1.1rem 0;font-weight:750;font-size:1.06rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.95rem;font-size:1.4rem;color:var(--ink3);font-weight:500}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 1.1rem;color:var(--ink2);max-width:46rem}

/* product page */
.pp{display:grid;gap:2.5rem;align-items:start}
@media (min-width:62rem){.pp{grid-template-columns:minmax(0,1fr) 23rem}.pp aside{position:sticky;top:5.5rem}}
.howlist{list-style:none;margin:0;padding:0;counter-reset:s;border-top:1px solid var(--edge)}
.howlist li{counter-increment:s;display:grid;grid-template-columns:2.2rem 1fr;gap:.15rem .7rem;padding:1rem 0;border-bottom:1px solid var(--edge)}
.howlist li::before{content:counter(s);font-weight:850;font-stretch:72%;font-size:1.4rem;color:var(--sig-text);line-height:1.15;grid-row:span 2}
.howlist b{font-size:1.04rem}
.howlist span{color:var(--ink2);font-size:.96rem}
.crumb{font-size:.9rem;color:var(--ink3);margin-bottom:1rem}
.crumb a{color:var(--ink2)}

/* forms */
.field{display:grid;gap:.35rem;font-weight:700;font-size:.95rem}
.field small{color:var(--ink3);font-weight:550}
.input,select.input,textarea.input{width:100%;min-height:3rem;padding:.7rem .85rem;border-radius:var(--r);border:1px solid var(--edge2);background:var(--s950);color:var(--ink);font:inherit;font-size:16px}
textarea.input{min-height:6rem;resize:vertical}
.input::placeholder{color:var(--ink3)}
.input:focus{outline:none;border-color:var(--sig)}
.form{display:grid;gap:1rem}
.card{background:var(--s800);border:1px solid var(--edge);border-radius:var(--r);padding:clamp(1.1rem,3vw,1.75rem)}
.err{color:#FF9B80;font-weight:650;font-size:.92rem}
.okmsg{color:var(--ok);font-weight:700}

/* domain search */
.dsearch{display:grid;gap:.6rem}
.dsearch .in{display:flex;gap:.5rem}
.dsearch .in .input{flex:1;min-width:0}
.dres{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.4rem}
.dres li{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.6rem .75rem;border:1px solid var(--edge);border-radius:var(--r);font-weight:650}
.dres li.taken{color:var(--ink3)}
.dres li.pick{border-color:var(--sig)}

/* status steps */
.ssteps{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--edge)}
.ssteps li{display:grid;grid-template-columns:1.6rem 1fr;gap:.8rem;padding:1rem 0;border-bottom:1px solid var(--edge);color:var(--ink3)}
.ssteps li .dot{width:1rem;height:1rem;border-radius:50%;border:2px solid var(--edge2);margin-top:.25rem}
.ssteps li.done{color:var(--ink)}
.ssteps li.done .dot{background:var(--sig);border-color:var(--sig)}
.ssteps li.now{color:var(--ink)}
.ssteps li.now .dot{border-color:var(--sig)}
@media (prefers-reduced-motion:no-preference){.ssteps li.now .dot{animation:p 1.2s ease-in-out infinite}@keyframes p{50%{background:color-mix(in srgb,var(--sig) 40%,transparent)}}}

/* footer */
.foot{border-top:1px solid var(--edge);padding-block:2.5rem 6rem;color:var(--ink3);font-size:.93rem;background:var(--s900)}
.foot .cols{display:grid;gap:1.5rem}
@media (min-width:52rem){.foot .cols{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}}
.foot h4{color:var(--ink);font-size:.95rem;margin-bottom:.5rem}
.foot a{color:var(--ink2);text-decoration:none;display:block;padding:.2rem 0}
.foot a:hover{color:var(--ink)}
@media (min-width:62rem){.foot{padding-bottom:2.5rem}}

/* mobile bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));background:var(--s900);border-top:1px solid var(--edge)}
.mbar .btn{min-height:2.8rem}
@media (min-width:62rem){.mbar{display:none}}

/* staging notice */
.stage{background:#2A1A10;color:#FFD9C9;font-size:.86rem;padding:.5rem var(--gut);text-align:center;border-bottom:1px solid #4A2A18}