:root{--ink:#14181c;--ink2:#1d2329;--stone:#eceae3;--paper:#f8f7f3;--hv:#d6f000;--hvd:#8a9a00;--mute:#5a626a;--line:rgba(20,24,28,.16)}
img{max-width:100%;height:auto}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{font-family:'Barlow',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:1.06rem;line-height:1.65}
h1,h2,h3,h4,.disp{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;text-transform:uppercase;line-height:1;letter-spacing:.01em}
h2{font-size:clamp(2.4rem,5.2vw,4rem);margin-bottom:1rem}
h3{font-size:1.55rem}
.mono{font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.eyebrow{display:inline-block;color:var(--hvd);margin-bottom:.9rem}
.dark .eyebrow,.hero .eyebrow{color:var(--hv)}
section{padding:clamp(4rem,8vw,6.5rem) 0;position:relative}
.dark{background:var(--ink);color:#e9ece6}.dark h2,.dark h3{color:#fff}
.stone{background:var(--stone)}
.btn-hv{background:var(--hv);color:var(--ink);font-weight:700;border:2px solid var(--hv);border-radius:2px;padding:.85rem 1.7rem;letter-spacing:.04em;text-transform:uppercase;font-family:'Barlow Condensed',sans-serif;font-size:1.15rem;transition:.2s}
.btn-hv:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.4);border-radius:2px;padding:.85rem 1.7rem;text-transform:uppercase;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.04em}
.btn-ghost:hover{border-color:var(--hv);color:var(--hv)}
.btn-dk{background:var(--ink);color:var(--hv);border:2px solid var(--ink);border-radius:2px;padding:.85rem 1.7rem;text-transform:uppercase;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.04em}
.btn-dk:hover{background:var(--hv);color:var(--ink)}
/* signature: tape-measure ruler */
.ruler{height:26px;background:
 repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 16px) 0 0/100% 100% no-repeat,
 repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 32px) 0 0/100% 100% no-repeat;
 background-color:var(--hv);position:relative;
 -webkit-mask:none}
.ruler{background-image:
 repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 8px),
 repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 32px);
 background-size:100% 9px,100% 18px;background-repeat:no-repeat;background-position:0 0,0 0}
.ruler.thin{height:18px;background-size:100% 6px,100% 12px}
/* utility + nav */
.util{background:var(--hv);color:var(--ink);font-size:.82rem;font-weight:600;padding:.4rem 0}
.util a{color:var(--ink);text-decoration:none;font-weight:700}
.navbar{background:rgba(20,24,28,.97);padding:.7rem 0}
.navbar-brand{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;color:#fff!important;font-size:1.45rem;letter-spacing:.03em;line-height:1}
.navbar-brand small{display:block;font:500 .62rem 'IBM Plex Mono',monospace;letter-spacing:.18em;color:var(--hv)}
.nav-link{color:#d8dcd4!important;font-weight:600;text-transform:uppercase;font-size:.85rem;letter-spacing:.1em}
.nav-link:hover{color:var(--hv)!important}
.navbar-toggler{border-color:rgba(255,255,255,.35)}
.navbar-toggler-icon{filter:invert(1)}
/* hero */
.hero{background:var(--ink);color:#fff;padding:clamp(2.2rem,5vw,4rem) 0 clamp(2.5rem,5vw,4.5rem);overflow:hidden}
.hero h1{font-size:clamp(2.9rem,7.2vw,5.8rem);color:#fff;margin-bottom:1rem}
.hero h1 span{color:var(--hv)}
.hero p.lead{color:#d6dad2;max-width:34rem;font-size:1.15rem}
.hero .ph{width:100%;max-height:min(66vh,480px);aspect-ratio:1/1;object-fit:cover;object-position:center 60%;border-radius:3px;border:1px solid rgba(214,240,0,.4)}
.hero .badge-y{position:absolute;left:-14px;bottom:20px;background:var(--hv);color:var(--ink);padding:.5rem .9rem;transform:rotate(-2deg)}
.hero .badge-y b{font:700 2rem 'Barlow Condensed',sans-serif;display:block;line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.chips span{border:1px solid rgba(255,255,255,.28);padding:.3rem .7rem;color:#e6eadd}
/* services */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;border-top:2px solid var(--ink);border-left:1px solid var(--line)}
.svc div{padding:1.5rem 1.4rem 1.7rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.svc .n{color:var(--hvd)}
.svc h3{margin:.4rem 0 .4rem}
.svc p{margin:0;color:var(--mute);font-size:.98rem}
/* advantage */
.adv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem}
.adv div{border-top:3px solid var(--hv);padding-top:1rem}
.adv h3{font-size:1.5rem}
.adv p{color:#b9bfb4;margin:0;font-size:.97rem}
/* about timeline */
.tl{display:flex;gap:0;margin:1.8rem 0}
.tl div{flex:1;border-top:4px solid var(--ink);padding-top:.7rem;position:relative}
.tl div:before{content:"";position:absolute;top:-10px;left:0;width:16px;height:16px;background:var(--hv);border:3px solid var(--ink);border-radius:50%}
.tl b{font:700 2.2rem 'Barlow Condensed',sans-serif;display:block;line-height:1}
.tl span{font-size:.9rem;color:var(--mute);display:block;line-height:1.35;padding-right:.5rem}
.about-img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center;border-radius:3px}
/* gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;display:block}
.gal .tall{grid-row:span 2;height:100%;aspect-ratio:auto}
/* reviews */
.quote{border-left:4px solid var(--hv);padding:.2rem 0 .2rem 1.3rem;height:100%}
.quote p{font-size:1.1rem;margin-bottom:.7rem}
.quote cite{font-style:normal}
/* contact */
.contact a{color:inherit}
.map{border:0;width:100%;height:100%;min-height:340px;border-radius:3px}
footer{background:#0c0f12;color:#9aa19a;padding:1.8rem 0;font-size:.92rem}
footer a{color:var(--hv)}
@media(max-width:767px){
 .gal{grid-template-columns:1fr 1fr}.gal .tall{grid-row:auto;aspect-ratio:4/3}
 .tl{flex-direction:column;gap:1.4rem;border-left:0}
 .hero .badge-y{left:8px}
 .hero .ph{aspect-ratio:4/3;max-height:260px}
}
@media(max-width:575px){
 .navbar-brand{font-size:1.1rem;white-space:normal;max-width:calc(100% - 64px)}
 .hero h1{font-size:2.6rem}
 .btn-hv,.btn-ghost{font-size:1.05rem;padding:.75rem 1.2rem}
 body{overflow-x:hidden}
}