:root{
    --ink:#17171A; --ink-soft:#22222A; --ink-2:#2C2C34;
    --concrete:#F1F0ED; --paper:#FFFFFF;
    --gold:#E3A311; --gold-bri:#F6C04A; --gold-deep:#C2870A;
    --brick:#9E2B25;
    --muted:#6E6E74; --muted-2:#9A9A9F;
    --line:#E2E0DB; --line-dk:rgba(255,255,255,.14);
    --maxw:1200px;
    --shadow:0 18px 50px -22px rgba(0,0,0,.35);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--concrete); color:var(--ink);
    font-family:'Inter',system-ui,sans-serif; font-size:17px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none}
  img{display:block; max-width:100%}
  h1,h2,h3{font-family:'Oswald',sans-serif; font-weight:600; line-height:1.04; margin:0; letter-spacing:.2px}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px}
  .mono{font-family:'IBM Plex Mono',monospace; font-weight:500; letter-spacing:.14em; text-transform:uppercase}

  /* ---- eyebrow / spec tag (signature) ---- */
  .eyebrow{
    display:inline-flex; align-items:center; gap:9px; font-size:12px;
    color:var(--gold-deep); font-family:'IBM Plex Mono',monospace; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase; margin-bottom:18px;
  }
  .eyebrow::before{content:""; width:26px; height:2px; background:var(--gold); display:inline-block}
  .eyebrow.on-dark{color:var(--gold-bri)}

  /* ---- buttons ---- */
  .btn{display:inline-flex; align-items:center; gap:10px; font-family:'Oswald',sans-serif;
    font-weight:600; font-size:15px; letter-spacing:.04em; text-transform:uppercase;
    padding:14px 24px; border-radius:2px; cursor:pointer; border:2px solid transparent;
    transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;}
  .btn:active{transform:translateY(1px)}
  .btn-gold{background:var(--gold); color:var(--ink); border-color:var(--gold)}
  .btn-gold:hover{background:var(--gold-bri); border-color:var(--gold-bri)}
  .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
  .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.08)}
  .btn-dark{background:var(--ink); color:#fff; border-color:var(--ink)}
  .btn-dark:hover{background:var(--ink-2)}
  .btn svg{width:18px;height:18px}

  /* ---- utility top strip ---- */
  .util{background:var(--ink); color:#C9C9CE; font-size:12.5px}
  .util .wrap{display:flex; justify-content:space-between; align-items:center; min-height:38px; gap:14px}
  .util a:hover{color:var(--gold-bri)}
  .util .r{display:flex; gap:22px; align-items:center}
  .util .dot{color:var(--gold)}

  /* ---- header ---- */
  header.site{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.93);
    backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line)}
  header.site .wrap{display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:20px}
  .logo img{height:58px; width:auto}
  nav.main{display:flex; align-items:center; gap:30px}
  nav.main a.nl{font-family:'Oswald',sans-serif; font-weight:500; font-size:15px; letter-spacing:.05em;
    text-transform:uppercase; color:var(--ink-soft); position:relative; padding:6px 0}
  nav.main a.nl::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--gold); transition:width .2s ease}
  nav.main a.nl:hover::after{width:100%}
  .nav-cta{display:flex; align-items:center; gap:16px}
  .burger{display:none; background:none; border:0; cursor:pointer; padding:6px}
  .burger span{display:block; width:26px; height:2.5px; background:var(--ink); margin:5px 0; transition:.25s}

  /* ---- hero ---- */
  .hero{position:relative; color:#fff; overflow:hidden; isolation:isolate}
  .hero .bg{position:absolute; inset:0; z-index:-2}
  .hero .bg img{width:100%; height:100%; object-fit:cover}
  .hero::after{content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(102deg, rgba(15,15,17,.93) 0%, rgba(15,15,17,.78) 42%, rgba(15,15,17,.28) 100%);}
  .hero .wrap{padding-top:96px; padding-bottom:104px}
  .hero-inner{max-width:680px}
  .hero h1{font-size:clamp(42px,6.4vw,78px); font-weight:700; letter-spacing:.4px; text-transform:uppercase}
  .hero h1 em{font-style:normal; color:var(--gold-bri); display:block}
  .hero p.lead{font-size:clamp(17px,2.1vw,20px); color:#D7D7DB; max-width:540px; margin:24px 0 34px}
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap}
  .chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:38px}
  .chip{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#EDEDF0;
    border:1px solid rgba(255,255,255,.22); padding:8px 14px; border-radius:2px; background:rgba(255,255,255,.05)}
  .chip b{color:var(--gold-bri); font-weight:700}
  .jobtag{position:absolute; right:26px; bottom:26px; z-index:1; display:flex; align-items:center; gap:9px;
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.16em; color:#EAEAEC;
    border:1px solid rgba(255,255,255,.3); padding:8px 13px; background:rgba(0,0,0,.4); backdrop-filter:blur(3px)}
  .jobtag .pulse{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(227,163,17,.6); animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(227,163,17,.55)}70%{box-shadow:0 0 0 9px rgba(227,163,17,0)}100%{box-shadow:0 0 0 0 rgba(227,163,17,0)}}

  /* ---- stat band ---- */
  .band{background:var(--ink); color:#fff}
  .band .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dk)}
  .stat{background:var(--ink); padding:30px 26px}
  .stat .k{font-family:'Oswald',sans-serif; font-weight:700; font-size:34px; color:var(--gold-bri); line-height:1}
  .stat .l{font-size:12.5px; color:#B7B7BD; margin-top:9px; letter-spacing:.12em; text-transform:uppercase; font-family:'IBM Plex Mono',monospace}

  /* ---- sections ---- */
  .section{padding:92px 0}
  .section.alt{background:var(--paper)}
  .sec-head{max-width:640px; margin-bottom:48px}
  .sec-head h2{font-size:clamp(32px,4.4vw,50px); text-transform:uppercase; letter-spacing:.4px}
  .sec-head p{color:var(--muted); margin:16px 0 0; font-size:18px}

  /* ---- services grid ---- */
  .svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
  .svc{background:var(--concrete); border:1px solid var(--line); padding:26px 22px 24px;
    border-radius:3px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; position:relative}
  .section.alt .svc{background:#FAFAF8}
  .svc:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:#D6D3CC}
  .svc .ic{width:44px;height:44px;border-radius:2px;background:var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
  .svc .ic svg{width:23px;height:23px;stroke:var(--gold-bri)}
  .svc h3{font-size:20px; text-transform:uppercase; letter-spacing:.3px}
  .svc p{font-size:14.5px; color:var(--muted); margin:9px 0 0; line-height:1.55}

  /* ---- projects ---- */
  .proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  .proj{background:var(--paper); border:1px solid var(--line); border-radius:3px; overflow:hidden;
    transition:transform .2s ease, box-shadow .2s ease}
  .section.alt .proj{background:var(--concrete)}
  .proj:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
  .proj .ph{aspect-ratio:4/3; overflow:hidden; position:relative}
  .proj .ph img{width:100%;height:100%;object-fit:cover; transition:transform .5s ease}
  .proj:hover .ph img{transform:scale(1.06)}
  .proj .tag{position:absolute; top:14px; left:14px; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
    letter-spacing:.16em; text-transform:uppercase; background:var(--gold); color:var(--ink); padding:5px 10px; font-weight:600}
  .proj .body{padding:22px 22px 24px}
  .proj h3{font-size:21px; text-transform:uppercase; letter-spacing:.3px}
  .proj p{font-size:14.5px; color:var(--muted); margin:9px 0 0}
  .proj-foot{margin-top:40px; display:flex; gap:20px; flex-wrap:wrap}
  .txtlink{font-family:'Oswald',sans-serif; font-weight:600; font-size:15px; letter-spacing:.05em;
    text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:8px; border-bottom:2px solid var(--gold); padding-bottom:3px}
  .txtlink:hover{color:var(--gold-deep)}

  /* ---- trust / credentials ---- */
  .trust{display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:center}
  .trust .copy h2{font-size:clamp(30px,4vw,46px); text-transform:uppercase; letter-spacing:.4px}
  .trust .copy p{color:var(--muted); margin:18px 0 0}
  .trust ul{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px}
  .trust ul li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px}
  .trust ul li svg{width:20px;height:20px;flex:none;stroke:var(--gold-deep);margin-top:2px}
  .cred{background:var(--ink); color:#fff; padding:36px 32px; border-radius:4px; box-shadow:var(--shadow)}
  .cred .badge{display:inline-flex; flex-direction:column; gap:3px; border:1.5px solid var(--gold); padding:14px 18px; border-radius:3px; margin-bottom:26px}
  .cred .badge .t{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.18em; color:var(--gold-bri)}
  .cred .badge .n{font-family:'Oswald',sans-serif; font-weight:700; font-size:24px; letter-spacing:1px}
  .stars{color:var(--gold-bri); font-size:20px; letter-spacing:3px}
  .cred blockquote{margin:14px 0 0; font-size:17px; line-height:1.6; color:#E6E6E9}
  .cred .by{margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.12em; color:var(--muted-2)}

  /* ---- quote / CTA band ---- */
  .cta{background:linear-gradient(135deg, var(--ink) 0%, #2A2118 120%); color:#fff; position:relative; overflow:hidden}
  .cta::before{content:""; position:absolute; right:-60px; top:-60px; width:280px; height:280px; border:30px solid rgba(227,163,17,.10); border-radius:50%}
  .cta .wrap{padding:74px 26px; position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
  .cta h2{font-size:clamp(30px,4vw,46px); text-transform:uppercase; letter-spacing:.4px}
  .cta p{color:#CFCFD4; margin:16px 0 0; max-width:440px}
  .cta-actions{display:flex; flex-direction:column; gap:14px}

  /* ---- quote form ---- */
  .form-card{background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:34px; box-shadow:var(--shadow)}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .field{margin-bottom:14px}
  .field label{display:block; font-size:12.5px; font-family:'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
  .field input,.field textarea{width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:2px;
    font-family:inherit; font-size:15px; background:var(--concrete); color:var(--ink)}
  .field input:focus,.field textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); background:#fff}
  .field textarea{min-height:108px; resize:vertical}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
  .contact-list{display:grid; gap:22px; margin-top:30px}
  .ci{display:flex; gap:15px; align-items:flex-start}
  .ci .ic{width:42px;height:42px;flex:none;background:var(--ink);border-radius:2px;display:flex;align-items:center;justify-content:center}
  .ci .ic svg{width:20px;height:20px;stroke:var(--gold-bri)}
  .ci .t{font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .ci .v{font-size:16px;margin-top:2px}
  .ci a.v:hover{color:var(--gold-deep)}

  /* ---- footer ---- */
  footer.site{background:var(--ink); color:#B7B7BD; padding:58px 0 26px}
  footer.site .top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:38px; border-bottom:1px solid var(--line-dk)}
  footer.site .logo-f img{height:54px; background:#fff; padding:8px 12px; border-radius:3px}
  footer.site p.blurb{margin:18px 0 0; font-size:14.5px; max-width:330px; line-height:1.6}
  footer.site .social{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
  footer.site .social a{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; font-size:13.5px; color:#fff;
    border:1px solid var(--line-dk); border-radius:3px; transition:border-color .2s, color .2s}
  footer.site .social a:hover{border-color:var(--gold); color:var(--gold-bri)}
  footer.site .social svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
  footer.site h4{font-family:'Oswald',sans-serif; color:#fff; font-size:14px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 16px}
  footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:14.5px}
  footer.site ul a:hover{color:var(--gold-bri)}
  footer.site .bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:12.5px; gap:14px; flex-wrap:wrap}
  footer.site .bottom .mono{color:var(--muted-2); font-size:11px}

  /* ---- responsive ---- */
  @media(max-width:960px){
    .svc-grid{grid-template-columns:repeat(2,1fr)}
    .proj-grid{grid-template-columns:1fr 1fr}
    .trust,.cta .wrap,.form-grid{grid-template-columns:1fr; gap:32px}
    .band .wrap{grid-template-columns:repeat(2,1fr)}
    nav.main{display:none}
    .burger{display:block}
    .util .r .hide-sm{display:none}
  }
  @media(max-width:560px){
    .svc-grid,.proj-grid,.form-row{grid-template-columns:1fr}
    .util .wrap .l{display:none}
    .hero .wrap{padding-top:70px;padding-bottom:78px}
    .section{padding:66px 0}
    .hero-cta .btn{flex:1; justify-content:center; white-space:nowrap}
  }
  @media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}
  :focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* ====== INNER PAGE ADDITIONS ====== */
.page-banner{position:relative; color:#fff; overflow:hidden; isolation:isolate; background:var(--ink)}
.page-banner .bg{position:absolute; inset:0; z-index:-2}
.page-banner .bg img{width:100%;height:100%;object-fit:cover; opacity:.5}
.page-banner::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(15,15,17,.95) 0%, rgba(15,15,17,.7) 60%, rgba(15,15,17,.45) 100%)}
.page-banner .wrap{padding:74px 26px 64px}
.page-banner h1{font-size:clamp(38px,5.4vw,62px); text-transform:uppercase; letter-spacing:.5px; font-weight:700}
.page-banner p{color:#D7D7DB; font-size:18px; max-width:560px; margin:18px 0 0}
.crumb{display:flex; gap:9px; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:#9A9A9F; margin-bottom:20px}
.crumb a:hover{color:var(--gold-bri)} .crumb .sep{color:var(--gold)}

.lead-narrow{max-width:720px; margin:0 auto 50px; text-align:center}
.lead-narrow .eyebrow{justify-content:center}
.lead-narrow h2{font-size:clamp(28px,3.6vw,40px); text-transform:uppercase}
.lead-narrow p{color:var(--muted); margin:16px 0 0; font-size:18px}

/* alternating project rows */
.work-row{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; margin-bottom:66px}
.work-row:last-child{margin-bottom:0}
.work-row .media{border-radius:4px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3}
.work-row .media img{width:100%;height:100%;object-fit:cover}
.work-row.reverse .media{order:2}
.work-row .txt .tag{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; background:var(--ink); color:var(--gold-bri); padding:5px 11px; margin-bottom:16px}
.work-row .txt h3{font-size:clamp(24px,3vw,32px); text-transform:uppercase; letter-spacing:.3px}
.work-row .txt p{color:var(--muted); margin:14px 0 0; font-size:16px}

/* gallery cards (commercial) */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.gcard{background:var(--paper); border:1px solid var(--line); border-radius:3px; overflow:hidden; transition:transform .2s, box-shadow .2s}
.section.alt .gcard{background:var(--concrete)}
.gcard:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.gcard .ph{aspect-ratio:4/3; overflow:hidden}
.gcard .ph img{width:100%;height:100%;object-fit:cover; transition:transform .5s}
.gcard:hover .ph img{transform:scale(1.06)}
.gcard .body{padding:22px}
.gcard .tag{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep)}
.gcard h3{font-size:20px; text-transform:uppercase; margin-top:8px}
.gcard p{font-size:14.5px; color:var(--muted); margin:9px 0 0}

/* promise / clients strip */
.promise{background:var(--ink); color:#fff; border-radius:4px; padding:44px 40px; box-shadow:var(--shadow)}
.promise .eyebrow{color:var(--gold-bri)}
.promise h3{font-size:clamp(24px,3vw,34px); text-transform:uppercase; letter-spacing:.3px}
.promise p{color:#CFCFD4; margin:16px 0 0; max-width:760px}
.clients{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
.clients span{font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.06em; border:1px solid var(--line);
  padding:10px 16px; border-radius:2px; background:var(--paper); color:var(--ink-soft)}

/* photo strip */
.photostrip{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.photostrip img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:3px}

/* map */
.map-embed{border-radius:4px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); min-height:340px; height:100%}
.map-embed iframe{width:100%; height:100%; min-height:340px; border:0; display:block}

@media(max-width:960px){
  .work-row{grid-template-columns:1fr; gap:24px; margin-bottom:46px}
  .work-row.reverse .media{order:0}
  .gallery{grid-template-columns:1fr 1fr}
  .photostrip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .gallery,.photostrip{grid-template-columns:1fr}
}

/* active nav state */
nav.main a.nl.active{color:var(--gold-deep)}
nav.main a.nl.active::after{width:100%}
.map-fallback{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);border-bottom:2px solid var(--gold);padding-bottom:2px}

/* ============ MOBILE FIXES ============ */
html, body { overflow-x: hidden; }

@media (max-width: 960px){
  /* footer columns must stack (was forcing page wider than viewport) */
  footer.site .top{ grid-template-columns: 1fr 1fr; gap:30px; }

  /* full-width dropdown menu instead of a desktop row spilling off-screen */
  nav.main{ display:none; }
  nav.main.open{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:#fff; padding:8px 26px 18px;
    border-bottom:1px solid var(--line);
    box-shadow:0 22px 44px -24px rgba(0,0,0,.4);
    z-index:60;
  }
  nav.main.open a.nl{ padding:14px 2px; font-size:17px; width:100%; border-bottom:1px solid var(--line); }
  nav.main.open a.nl:last-child{ border-bottom:0; }
  nav.main.open a.nl::after{ display:none; }
}
@media (max-width: 560px){
  footer.site .top{ grid-template-columns: 1fr; gap:26px; }
  .logo img{ height:50px; }
  /* keep the header quote button on one line next to the logo */
  .nav-cta{ gap:10px; }
  .nav-cta .btn{ padding:11px 14px; font-size:13.5px; white-space:nowrap; }
}