:root{
  --paper:#FFFFFF; --band:#EFEDE8; --ink:#1B1A18; --ink-2:#4A4844; --mute:#7A776F; --line:#CFCCC4;
  --steel:#33414F; --orange:#E4520B; --orange-deep:#BF4208;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55}
a{color:inherit} img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);line-height:1.02;margin:0;text-wrap:balance;letter-spacing:.005em;text-transform:uppercase}
h1{font-size:clamp(44px,7vw,84px);font-weight:800}
h2{font-size:clamp(32px,4.5vw,52px);font-weight:700}
h3{font-size:26px;font-weight:700}
p{margin:0}
.eyebrow{font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.03em;padding:14px 22px;border:2px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;cursor:pointer;border-radius:0}
.btn.orange{background:var(--orange);border-color:var(--orange)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.light{background:#fff;border-color:#fff;color:var(--ink)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.blade{height:6px;background:repeating-linear-gradient(90deg,var(--ink) 0 34px,transparent 34px 42px)}
.blade.orange{background:repeating-linear-gradient(90deg,var(--orange) 0 34px,transparent 34px 42px)}

.topbar{background:var(--ink);color:#fff;font-size:14px}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:8px;flex-wrap:wrap}
.topbar strong{font-weight:600}
header{position:sticky;top:env(safe-area-inset-top,0px);background:var(--paper);border-bottom:1px solid var(--line);z-index:5}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo .mark{width:44px;height:44px;background:var(--orange);position:relative;flex:none}
.logo .mark::after{content:"";position:absolute;inset:8px;border:3px solid #fff;border-radius:50%;border-right-color:transparent;transform:rotate(-35deg)}
.logo .word{font-family:var(--display);font-weight:800;font-size:26px;line-height:1;text-transform:uppercase}
.logo .word small{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--mute);font-family:var(--body);text-transform:uppercase}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;flex-wrap:wrap}
nav a{text-decoration:none;font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.06em;padding-bottom:4px;border-bottom:2px solid transparent}
nav a:hover{color:var(--orange)} nav a[aria-current=page]{border-bottom-color:var(--orange)}
.head-cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.phone{font-family:var(--display);font-size:24px;font-weight:700;text-decoration:none;white-space:nowrap}

.hero .wrap{padding-block:72px 64px;max-width:900px}
.hero h1 span{color:var(--orange)}
.hero .lede{font-size:21px;color:var(--ink-2);max-width:34em;margin-top:22px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.page-head .wrap{padding-block:56px 40px}
.page-head p{font-size:20px;color:var(--ink-2);margin-top:12px;max-width:36em}

section{padding-block:72px}
.band{background:var(--band)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.sec-head p{max-width:36em;color:var(--ink-2)}
.intro{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.intro p{color:var(--ink-2);margin-top:16px;max-width:36em}
.callbox{background:var(--ink);color:#fff;padding:32px}
.callbox h3{color:#fff} .callbox p{color:#D8D5CE;margin-top:10px}
.callbox .phone{color:#fff;font-size:34px;display:block;margin-top:18px}

.grid{display:grid;gap:2px;background:var(--line);border:1px solid var(--line)}
.grid.two{grid-template-columns:1fr 1fr} .grid.three{grid-template-columns:repeat(3,1fr)}
.cell{background:var(--paper);padding:32px 30px 30px;display:grid;gap:12px;align-content:start}
.cell .num{font-family:var(--display);font-size:40px;font-weight:800;line-height:1;color:var(--orange)}
.cell p{color:var(--ink-2)}
.cell ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:5px;font-size:15px}
.cell li::before{content:"";display:inline-block;width:10px;height:3px;background:var(--orange);margin-right:10px;vertical-align:middle}
.cell.dark{background:var(--steel);color:#fff} .cell.dark h3,.cell.dark p{color:#fff}

.cta{background:var(--orange);color:#fff;padding-block:64px}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta h2{color:#fff} .cta p{color:#FFE3D3;margin-top:8px;font-size:18px}
.cta .actions{display:flex;gap:12px;flex-wrap:wrap}

.projects{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.proj figure{margin:0;border:1px solid var(--line);background:var(--paper)}
.proj .photo{aspect-ratio:4/3;background:linear-gradient(135deg,var(--slab,#D9D6CF),var(--band));display:grid;place-items:center;color:var(--mute);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;max-width:100%}
.proj figcaption{padding:20px 22px 24px} .proj h3{font-size:22px} .proj p{color:var(--ink-2);margin-top:8px}

.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.contact .info{display:grid;gap:22px}
.contact .info b{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.contact .info span{font-size:20px;font-weight:500}
.quote{background:var(--band);padding:28px;border-top:6px solid var(--orange)}
.quote form{display:grid;gap:12px}
.quote label{display:grid;gap:5px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.quote input,.quote select,.quote textarea{font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:0;width:100%}
.quote textarea{min-height:110px;resize:vertical}
.quote .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quote .req{font-size:13px;color:var(--mute)}
.quote .ok{display:none;background:#fff;border-left:6px solid var(--orange);padding:14px 16px;font-weight:500}
.quote .ok.show{display:block}

.values dl{margin:0;display:grid;gap:22px} .values dt{font-family:var(--display);font-size:24px;font-weight:700;text-transform:uppercase} .values dd{margin:4px 0 0;color:var(--ink-2);max-width:60ch}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line)}
.mv > div{background:var(--paper);padding:36px 32px} .mv > div p{margin-top:12px;color:var(--ink-2)}

footer{background:var(--ink);color:#D8D5CE;padding-block:48px;font-size:15px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
footer .word{color:#fff} footer .word small{color:#9A968D}
footer h4{font-family:var(--display);color:#fff;font-size:18px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
footer a{text-decoration:none} footer a:hover{color:#fff}
.legal{grid-column:1/-1;border-top:1px solid #34322E;margin-top:12px;padding-top:18px;font-size:13px;color:#9A968D;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:860px){
  .intro,.contact,.mv,.projects{grid-template-columns:1fr}
  .grid.two,.grid.three{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr 1fr}
  nav{order:3;width:100%}
}
@media (max-width:520px){ .quote .row{grid-template-columns:1fr} footer .wrap{grid-template-columns:1fr} }
@media (prefers-reduced-motion:no-preference){ .btn{transition:transform .12s ease} .btn:hover{transform:translateY(-1px)} }