/* Rogue Epoxy — standalone. No framework, no build step. */
:root{
  --obsidian:#05060a; --slate:#0e1117; --raise:#161b24;
  --chrome:#e9edf3; --ash:#8b94a4;
  --line:rgb(233 237 243 / .10); --soft:rgb(233 237 243 / .06);
  --cyan:#22d3ee; --gold:#e5b155;
  --iris:linear-gradient(100deg,#22d3ee 0%,#7c5cff 36%,#e0409c 66%,#e5b155 100%);
  --display:"Archivo",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--obsidian);color:var(--chrome);font-family:var(--body);overflow-x:hidden;overscroll-behavior-y:none}
img{max-width:100%;display:block}
a,button,summary,input,select,textarea{-webkit-tap-highlight-color:rgb(34 211 238 / .18)}
.shell{width:100%;max-width:1180px;margin-inline:auto;padding-inline:24px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);margin:0 0 18px}
.h1{font-family:var(--display);font-weight:800;font-size:clamp(38px,6.2vw,86px);line-height:.98;letter-spacing:-.025em;text-transform:uppercase;margin:0}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.4vw,52px);line-height:1.04;letter-spacing:-.02em;text-transform:uppercase;margin:0}
.h3{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.02em;text-transform:uppercase;margin:0}
.lede{margin:18px 0 0;font-size:17px;line-height:1.6;color:var(--ash);max-width:52ch}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.section{padding-block:108px;border-top:1px solid var(--soft);position:relative}
.head{max-width:660px;margin-bottom:54px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgb(5 6 10 / .82);backdrop-filter:blur(14px);border-bottom:1px solid var(--soft)}
.nav-inner{display:flex;align-items:center;gap:24px;height:112px}
.nav-brand{display:block;line-height:0}
.nav-logo{height:84px;width:auto}
.nav-links{display:none;gap:26px;margin-left:auto}
.nav-link{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);text-decoration:none;padding-block:6px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav-link:hover{color:var(--chrome);border-bottom-color:var(--cyan)}
.nav-cta{margin-left:auto}
@media(min-width:940px){.nav-links{display:flex}.nav-cta{margin-left:0}}

/* CTAs — four distinct treatments */
.cta-primary{position:relative;z-index:0;display:inline-flex;align-items:center;padding:14px 26px;border-radius:2px;background:var(--slate);color:var(--chrome);font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.cta-primary::before{content:"";position:absolute;inset:-1px;border-radius:3px;background:var(--iris);z-index:-1;opacity:.82;transition:opacity .25s}
.cta-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgb(34 211 238 / .16)}
.cta-primary:hover::before{opacity:1}
.cta-ghost{position:relative;overflow:hidden;display:inline-flex;align-items:center;padding:14px 26px;border-radius:2px;border:1px solid var(--line);color:var(--chrome);font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:border-color .3s}
.cta-ghost>span{position:relative;z-index:1}
.cta-ghost::after{content:"";position:absolute;inset:0;background:var(--iris);opacity:0;transform:translateX(-100%);transition:transform .7s cubic-bezier(.2,.7,.3,1),opacity .4s}
.cta-ghost:hover{border-color:transparent}
.cta-ghost:hover::after{opacity:.16;transform:translateX(0)}
.cta-call{display:inline-flex;align-items:baseline;gap:10px;padding:12px 20px;border-radius:2px;border:1px solid rgb(229 177 85 / .35);background:rgb(229 177 85 / .06);color:var(--chrome);font-family:var(--mono);font-size:14px;text-decoration:none;transition:background .25s,border-color .25s}
.cta-call:hover{background:rgb(229 177 85 / .13);border-color:rgb(229 177 85 / .7)}
.cta-call em{font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.cta-submit{position:relative;overflow:hidden;width:100%;padding:18px 28px;border-radius:2px;border:1px solid var(--line);background:var(--raise);color:var(--chrome);font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color .3s}
.cta-submit::after{content:"";position:absolute;inset:0;background:var(--iris);opacity:0;transform:translateX(-101%);transition:transform .55s cubic-bezier(.2,.7,.3,1),opacity .3s}
.cta-submit>span{position:relative;z-index:1}
.cta-submit:hover:not(:disabled){border-color:transparent}
.cta-submit:hover:not(:disabled)::after{opacity:.22;transform:translateX(0)}
.cta-submit:disabled{opacity:.5;cursor:progress}

/* journey: film pinned behind the whole page */
.journey{position:relative}
.stage{position:fixed;inset:0;z-index:0;pointer-events:none}
.film{width:100%;height:100%;object-fit:cover;object-position:center}
.stage-veil{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,rgb(5 6 10 / .18) 0%,rgb(5 6 10 / .62) 70%,rgb(5 6 10 / .86) 100%)}
.hero{position:relative;z-index:2;min-height:100svh;display:flex;align-items:center;padding-block:120px 80px}
.hero-inner{max-width:1180px}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0;padding:0}
.trust li{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);border:1px solid var(--soft);padding:9px 14px}
.overlay{position:relative;z-index:2;background:linear-gradient(to bottom,rgb(5 6 10 / 0) 0,rgb(5 6 10 / .72) 8dvh,rgb(5 6 10 / .86) 40dvh,rgb(5 6 10 / .92) 100%)}

/* services */
.grid3{display:grid;gap:1px;background:var(--soft);grid-template-columns:1fr}
@media(min-width:720px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.grid3{grid-template-columns:repeat(3,1fr)}}
.cell{background:rgb(5 6 10 / .62);backdrop-filter:blur(2px);padding:34px 30px;display:flex;flex-direction:column;gap:12px;transition:background .3s}
.cell:hover{background:rgb(14 17 23 / .82)}
.idx{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ash);margin:0}
.cell p{font-size:15px;line-height:1.62;color:var(--ash);margin:0}
.tag{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}

/* finishes */
.finishes{display:grid;gap:20px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.finishes{grid-template-columns:repeat(3,1fr)}}
@media(max-width:460px){.finishes{grid-template-columns:1fr}}
.finish{border:1px solid var(--soft);background:rgb(14 17 23 / .66);backdrop-filter:blur(3px);overflow:hidden;margin:0}
.finish img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.finish:hover img{transform:scale(1.05)}
.finish figcaption{padding:16px 18px 18px}
.finish-name{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.09em;text-transform:uppercase;margin:0}
.finish-note{margin:6px 0 0;font-size:13px;color:var(--ash);line-height:1.5}
.note{margin-top:30px;font-size:13px;line-height:1.62;color:var(--ash);border-left:1px solid var(--line);padding-left:16px;max-width:640px}

/* process */
.process{display:grid;gap:1px;background:var(--soft);grid-template-columns:1fr}
@media(min-width:620px){.process{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.process{grid-template-columns:repeat(5,1fr)}}
.step{background:rgb(5 6 10 / .62);backdrop-filter:blur(2px);padding:30px 22px}
.bar{height:2px;width:34px;margin:14px 0 18px;background:var(--iris)}
.step p{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--ash)}

/* areas + faq + reviews */
.areas{display:flex;flex-wrap:wrap;gap:10px}
.area{font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding:9px 15px;border:1px solid var(--soft);background:rgb(5 6 10 / .45);color:var(--ash)}
.faq{border-top:1px solid var(--soft);max-width:840px}
.faq details{border-bottom:1px solid var(--soft)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;font-family:var(--display);font-weight:600;font-size:16px;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--cyan)}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding-bottom:24px;margin:0;font-size:15px;line-height:1.68;color:var(--ash);max-width:70ch}
.reviews{border:1px solid var(--soft);background:rgb(14 17 23 / .7);backdrop-filter:blur(4px);padding:46px 32px;text-align:center}
.reviews p{margin:0;font-size:15px;line-height:1.62;color:var(--ash);max-width:54ch;margin-inline:auto}

/* quote form */
.estimate{display:grid;gap:44px;grid-template-columns:1fr;align-items:start}
@media(min-width:980px){.estimate{grid-template-columns:1.35fr .65fr;gap:64px}}
.form-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:640px){.form-grid{grid-template-columns:repeat(2,1fr)}.span2{grid-column:1/-1}}
.label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);margin-bottom:8px}
.input{width:100%;background:rgb(5 6 10 / .78);border:1px solid var(--line);color:var(--chrome);font-family:var(--body);font-size:15px;padding:13px 14px;border-radius:2px;outline:none;transition:border-color .2s,box-shadow .2s}
.input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgb(34 211 238 / .12)}
.input::placeholder{color:rgb(139 148 164 / .55)}
textarea.input{min-height:118px;resize:vertical}
.rail{border:1px solid var(--soft);background:rgb(14 17 23 / .7);backdrop-filter:blur(4px);padding:26px 24px}
.rail dl{margin:0}
.spec{padding-block:14px;border-bottom:1px solid var(--soft)}
.spec:last-child{border-bottom:0}
.spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.spec dd{margin:6px 0 0;font-size:14px;color:var(--chrome);line-height:1.5}
.status{margin-top:16px;font-size:14px;line-height:1.55;min-height:1.2em}
.status.ok{color:var(--cyan)}
.status.err{color:var(--gold)}

/* footer */
.footer{border-top:1px solid var(--soft);background:rgb(5 6 10 / .78);padding-block:56px 72px}
.footer-grid{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
.footer-logo{height:116px;width:auto}
.meta{font-family:var(--mono);font-size:12px;line-height:1.9;color:var(--ash)}
.meta a{color:var(--ash);text-decoration:none}
.meta a:hover{color:var(--chrome)}
.legal{margin-top:34px;font-family:var(--mono);font-size:11px;color:rgb(139 148 164 / .6)}

/* mobile call bar */
.callbar{display:none}
@media(max-width:860px){
  .callbar{position:fixed;z-index:60;inset:auto 0 0 0;display:grid;grid-template-columns:1fr 1fr;gap:1px;padding-bottom:env(safe-area-inset-bottom,0px);background:rgb(233 237 243 / .1);backdrop-filter:blur(16px)}
  .callbar a{display:flex;align-items:center;justify-content:center;min-height:56px;background:rgb(5 6 10 / .94);color:var(--chrome);font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none}
  .callbar a:last-child{color:var(--obsidian);background-image:var(--iris)}
  .overlay{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
}

/* responsive ladder */
@media(min-width:1600px){.nav-logo{height:96px}}
@media(max-width:1024px){.nav-inner{height:96px}.nav-logo{height:70px}.footer-logo{height:92px}}
@media(max-width:860px){.section{padding-block:76px}.nav-link{padding-block:14px}.cta-primary,.cta-ghost{padding:16px 24px}.faq summary{min-height:56px;align-items:center}.input{font-size:16px;padding:15px 14px}.area{padding:12px 16px}.shell{padding-inline:20px}}
@media(max-width:620px){.nav-inner{height:78px}.nav-logo{height:56px}.footer-logo{height:72px}.hero{padding-block:100px 60px}}
@media(max-height:560px) and (orientation:landscape){.nav-inner{height:64px}.nav-logo{height:46px}.hero{min-height:auto;padding-block:90px 50px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage{position:absolute;height:100svh}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}