:root{--ink:#0b1530;--ink2:#14224a;--blue:#1f4fc4;--blue-d:#163a96;--gold:#e3b94c;--paper:#f4f6fa;--line:rgba(11,21,48,.14);--mute:#4a5570}
img{max-width:100%;height:auto}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:'Public Sans',system-ui,sans-serif;font-size:1.05rem;line-height:1.6;color:var(--ink);background:var(--paper);overflow-x:hidden}
h1,h2,h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;line-height:1.04;letter-spacing:-.02em}
h2{font-size:clamp(2rem,4.2vw,3.2rem);margin-bottom:1rem}
.py-section{padding:92px 0}
.eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;color:var(--gold);margin-bottom:.9rem}
.eyebrow.dark{color:var(--blue)}
.muted{color:var(--mute)}
.btn{font-weight:700;letter-spacing:.02em;border-radius:6px;padding:.8rem 1.4rem;transition:background .2s,color .2s,border-color .2s}
.btn-gold{background:var(--gold);border:2px solid var(--gold);color:#1a1405}
.btn-gold:hover{background:#f0cb6a;border-color:#f0cb6a;color:#1a1405}
.btn-ghost{border:2px solid rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}

/* top bar: name + phone always visible */
.topbar{background:var(--ink);color:#d5dcf2;font-size:.85rem;padding:7px 0}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.topbar strong{color:#fff;font-weight:700}
.topbar a{color:#fff;text-decoration:none;font-weight:600}.topbar a:hover{color:var(--gold)}

/* nav (b): sign-shaped logo hangs over the hero's top edge */
.mainbar{background:#fff;border-bottom:1px solid var(--line);padding:.55rem 0;position:sticky;top:0;z-index:30}
.mainbar .container{position:relative}
.navbar-brand{margin:0;padding:0}
.navbar-brand img{width:78px;display:block}
.navbar .nav-link{font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink);padding:.6rem 1rem}
.navbar .nav-link:hover{color:var(--blue)}
@media(min-width:992px){
  .mainbar{padding:.35rem 0}
  .mainbar .container{min-height:62px}
  .navbar-brand{position:absolute;left:50%;top:-4px;transform:translateX(-50%);background:#fff;padding:.5rem .8rem .35rem;border-bottom:4px solid var(--blue);border-radius:0 0 10px 10px;box-shadow:0 10px 24px rgba(11,21,48,.18);z-index:5}
  .navbar-brand img{width:148px}
  .navbar-collapse{justify-content:space-between}
  .nav-l,.nav-r{display:flex;align-items:center}
}
@media(max-width:991px){.navbar-collapse{padding:.6rem 0 .8rem}.nav-r .btn{margin:.5rem 1rem 0}}

/* hero: split panel */
.hero{display:grid;grid-template-columns:1fr;background:var(--ink);color:#fff}
.hero-copy{padding:64px 12px 56px}
.hero h1{font-size:clamp(2.7rem,6vw,5rem);margin-bottom:1.2rem}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{font-size:1.18rem;max-width:36ch;color:#dbe2f6;margin-bottom:1.8rem}
.motto{margin:1.8rem 0 0;font-style:italic;color:#c3cdea;border-left:3px solid var(--gold);padding-left:.9rem;max-width:34ch}
.hero-photo{margin:0;position:relative;min-height:320px}
.hero-photo img{display:block;width:100%;height:100%;min-height:320px;aspect-ratio:6/5;object-fit:cover;object-position:30% 50%}
@media(min-width:992px){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:min(78vh,640px)}
  .hero-copy{padding:88px 56px 72px max(12px,calc((100vw - 1320px)/2 + 12px))}
  .hero-photo img{position:absolute;inset:0;aspect-ratio:auto}
}

/* services: bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2.2rem}
.card-s{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.6rem 1.5rem;transition:border-color .2s,transform .2s}
.card-s:hover{border-color:var(--blue);transform:translateY(-3px)}
.card-s i{font-size:1.6rem;color:var(--blue);display:block;margin-bottom:1rem}
.card-s h3{font-size:1.45rem;margin-bottom:.4rem}
.card-s p{margin:0;color:var(--mute);font-size:.98rem}
.card-s.feat{grid-column:span 2;background:var(--blue);border-color:var(--blue);color:#fff}
.card-s.feat i{color:var(--gold)}
.card-s.feat p{color:#dbe5ff;font-size:1.05rem;max-width:44ch}
.mats{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.mats span{border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:.25rem .8rem;font-size:.85rem;font-weight:600}
@media(max-width:991px){.bento{grid-template-columns:repeat(2,1fr)}.card-s.feat{grid-column:span 2}}
@media(max-width:575px){.bento{grid-template-columns:1fr}.card-s.feat{grid-column:auto}}
.intro{max-width:60ch}

/* siding */
.band-ink{background:var(--ink);color:#fff}
.band-ink h2{color:#fff}
.band-ink p{color:#cfd7ee}
.pic{margin:0}
.pic img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 0;border-radius:6px}
.pic figcaption{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;margin-top:.8rem;color:var(--mute)}
.band-ink .pic figcaption{color:#aebbe0}
.brands{list-style:none;margin:1.6rem 0 0;padding:0;border-top:1px solid rgba(255,255,255,.2)}
.brands li{padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.2);font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.01em}

/* projects */
.jobs{list-style:none;margin:2rem 0 0;padding:0;border-top:2px solid var(--ink)}
.jobs li{display:grid;grid-template-columns:190px 1fr;gap:1.2rem;padding:1.15rem 0;border-bottom:1px solid var(--line);align-items:baseline;font-size:1.15rem}
.jobs b{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:var(--blue)}
.dot{display:inline-block;width:.8em;height:.8em;border-radius:50%;background:var(--c);margin-right:.35em;border:1px solid rgba(0,0,0,.25);vertical-align:-.05em}
@media(max-width:575px){.jobs li{grid-template-columns:1fr;gap:.2rem}}

/* signature: the showroom shingle wall */
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:2rem}
.tile{position:relative;aspect-ratio:3/4;border-radius:4px;background-color:var(--c);overflow:hidden;display:flex;align-items:flex-end}
.tile::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.1) 0 2px,transparent 2px 22px),radial-gradient(circle at 50% 100%,rgba(0,0,0,.28) 0 28%,transparent 30%) 0 0/34px 22px;opacity:.55}
.tile span{position:relative;width:100%;background:#fff;color:var(--ink);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;padding:.45rem .5rem;text-align:center}
@media(max-width:767px){.wall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.wall{grid-template-columns:repeat(2,1fr)}}

/* areas */
.towns{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.towns li{background:#fff;border:1px solid var(--line);border-radius:99px;padding:.45rem 1.05rem;font-weight:600;font-size:1rem}

/* contact */
.contact-list{list-style:none;margin:1.5rem 0;padding:0}
.contact-list li{display:flex;gap:1rem;margin-bottom:1.1rem;align-items:flex-start}
.contact-list i{color:var(--gold);font-size:1.3rem}
.contact-list a{color:#fff;font-weight:700;font-size:1.3rem;text-decoration:none}.contact-list a:hover{color:var(--gold)}
.contact-list small{display:block;color:#aebbe0}
.social a{color:var(--gold);font-size:1.6rem}
.map{height:100%;min-height:380px;border-radius:8px;overflow:hidden;background:#0d1a3f}
.map iframe{width:100%;height:100%;min-height:380px;border:0;display:block}

footer{background:#070e22;color:#b9c4e4;padding:22px 0 26px;font-size:.92rem}
footer a{color:var(--gold)}