:root{
  --canvas:        #f7f4ee;
  --card:          #ffffff;
  --card-line:     rgba(20,20,19,0.12);
  --steel:         #e7e2d5;
  --steel-light:   #d8d2c2;
  --gold:          #dc9d2e;
  --gold-bright:   #b97e1a;
  --paper:         #141310;
  --ink:           #16150f;
  --ink-dim:       #5a5648;

  --font-display: 'Oswald', 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;

  --stripe: repeating-linear-gradient(45deg, var(--gold) 0 14px, #141310 14px 28px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:
    linear-gradient(var(--canvas), var(--canvas)),
    repeating-linear-gradient(0deg, rgba(20,20,19,0.035) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(20,20,19,0.035) 0 1px, transparent 1px 42px);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--gold); color:#101010; }

.wrap{ max-width:1140px; margin:0 auto; padding:0 24px; }

/* ---------- Hazard stripe bar ---------- */
.hazard{ height:10px; background:var(--stripe); }

/* ---------- Header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(247,244,238,0.92);
  border-bottom:1px solid var(--card-line);
  backdrop-filter:blur(4px);
}
.nav-row{
  max-width:1140px; margin:0 auto; padding:0 24px;
  height:78px; display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:52px; width:auto; }
.brand-text{ font-family:var(--font-display); font-weight:600; letter-spacing:0.04em; font-size:15px; line-height:1.15; text-transform:uppercase; color:var(--ink); }
.brand-text span{ display:block; color:var(--gold-bright); font-size:11px; letter-spacing:0.18em; font-weight:500; }

nav ul{ display:flex; list-style:none; gap:34px; }
nav ul li a{
  font-family:var(--font-display); font-size:13px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-dim);
  padding-bottom:4px; border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
nav ul li a:hover{ color:var(--gold-bright); border-color:var(--gold); }
nav ul li a.active{ color:var(--gold-bright); border-color:var(--gold-bright); }

.menu-toggle{ display:none; }
@media (max-width:760px){
  nav ul{ display:none; }
  .menu-toggle{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border:1px solid var(--card-line); background:var(--card);
    cursor:pointer;
  }
  .menu-toggle svg{ width:20px; height:20px; stroke:var(--ink); }
  nav.open ul{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:78px; left:0; right:0; background:var(--canvas);
    border-bottom:1px solid var(--card-line); padding:6px 24px 18px;
  }
  nav.open ul li{ border-bottom:1px solid var(--card-line); }
  nav.open ul li:last-child{ border-bottom:none; }
  nav.open ul li a{ display:block; padding:14px 0; border-bottom:none; }
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  padding:150px 0 60px;
  position:relative; overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(220,157,46,0.14), transparent 70%);
  pointer-events:none;
}
.page-hero .wrap{ position:relative; }

.plate-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:12px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-bright);
  border:1px solid var(--card-line); padding:7px 14px 7px 8px;
  margin-bottom:22px; background:var(--card);
}
.plate-tag .dot{ width:8px; height:8px; background:var(--gold); }

.page-hero h1{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(34px,4.6vw,56px); line-height:1.04; letter-spacing:0.01em;
  margin-bottom:16px; color:var(--ink); max-width:20ch;
}
.page-hero h1 .accent{ color:var(--gold-bright); }
.page-hero p.lede{ font-size:17px; color:var(--ink-dim); max-width:56ch; }

.crumb{
  font-family:var(--font-display); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:18px;
}
.crumb b{ color:var(--gold-bright); }

/* ---------- Home hero ---------- */
.hero{
  padding:170px 0 90px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(220,157,46,0.14), transparent 70%);
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
  position:relative;
}
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; text-align:center; } }

.hero h1{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(38px,5.2vw,64px); line-height:1.02; letter-spacing:0.01em;
  margin-bottom:20px; color:var(--ink);
}
.hero h1 .accent{ color:var(--gold-bright); }

.hero p{ font-size:17px; color:var(--ink-dim); max-width:46ch; margin-bottom:32px; }
@media (max-width:860px){ .hero p{ margin-left:auto; margin-right:auto; } }

.cta-row{ display:flex; gap:16px; flex-wrap:wrap; }
@media (max-width:860px){ .cta-row{ justify-content:center; } }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:14px;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:16px 30px; border:2px solid var(--gold-bright); cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .12s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-solid{ background:var(--gold-bright); color:#fff; }
.btn-solid:hover{ background:var(--gold); border-color:var(--gold); }
.btn-outline{ background:transparent; color:var(--gold-bright); }
.btn-outline:hover{ background:rgba(220,157,46,0.1); }

/* hero logo plate */
.logo-plate{
  position:relative; background:var(--card);
  border:1px solid var(--card-line);
  padding:40px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 32px rgba(20,20,19,0.06);
}
.logo-plate::before, .logo-plate::after,
.logo-plate .rivet{
  content:""; position:absolute; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffffff, #a8a294 70%);
  box-shadow:0 0 0 1px rgba(0,0,0,0.15);
}
.logo-plate::before{ top:14px; left:14px; }
.logo-plate::after{ top:14px; right:14px; }
.rivet.br{ bottom:14px; right:14px; }
.rivet.bl{ bottom:14px; left:14px; }
.logo-plate img{ width:min(100%, 280px); }

/* ---------- Section shell ---------- */
section{ padding:90px 0; position:relative; }
section.tight{ padding-top:0; }
.sheet-label{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-display); font-size:13px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-bright);
  margin-bottom:18px;
}
.sheet-label .line{ flex:1; height:1px; background:var(--card-line); }
.sheet-label .num{ color:var(--ink-dim); font-weight:500; }

h2.section-title{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(28px,3.4vw,42px); letter-spacing:0.01em; margin-bottom:24px;
  color:var(--ink);
}
h2.section-title .accent{ color:var(--gold-bright); }

/* ---------- About ---------- */
.about-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:start;
}
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }
.about p{ color:var(--ink-dim); font-size:16px; max-width:60ch; margin-bottom:16px; }

.stat-plate{
  background:var(--card); border:1px solid var(--card-line);
  padding:26px 28px; display:grid; grid-template-columns:1fr 1fr; gap:24px;
  box-shadow:0 8px 24px rgba(20,20,19,0.05);
}
.stat b{
  display:block; font-family:var(--font-display); font-size:32px; font-weight:700;
  color:var(--gold-bright); line-height:1;
}
.stat span{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); }

/* ---------- Crew bios ---------- */
.crew-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px;
  margin-top:56px;
}
.crew-card{
  display:flex; gap:20px; align-items:flex-start;
  background:var(--card); border:1px solid var(--card-line);
  padding:24px; box-shadow:0 8px 24px rgba(20,20,19,0.05);
}
@media (max-width:520px){ .crew-card{ flex-direction:column; align-items:center; text-align:center; } }
.crew-photo{
  flex:0 0 auto; width:96px; height:96px; border:2px solid var(--gold-bright);
  background:var(--steel); overflow:hidden;
}
.crew-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.crew-copy .tag{
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:0.12em; color:var(--gold-bright); display:block; margin-bottom:6px;
}
.crew-copy h3{
  font-family:var(--font-display); font-size:19px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.01em; margin-bottom:8px; color:var(--ink);
}
.crew-copy p{ font-size:14px; color:var(--ink-dim); max-width:42ch; }

/* ---------- Services ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px;
  background:var(--card-line);
  border:1px solid var(--card-line);
}
.service-card{
  background:var(--card); padding:36px 30px 32px; position:relative;
}
.service-card .tag{
  font-family:var(--font-display); font-size:12px; font-weight:600;
  letter-spacing:0.12em; color:var(--ink-dim); margin-bottom:14px; display:block;
}
.service-card h3{
  font-family:var(--font-display); font-size:21px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.01em; margin-bottom:12px; color:var(--ink);
}
.service-card p{ color:var(--ink-dim); font-size:14.5px; }
.service-card .mark{
  position:absolute; top:32px; right:28px; width:34px; height:34px;
  border:2px solid var(--gold-bright); display:flex; align-items:center; justify-content:center;
}
.service-card .mark svg{ width:18px; height:18px; stroke:var(--gold-bright); }
.service-card a.more{
  display:inline-block; margin-top:16px; font-family:var(--font-display); font-size:12px;
  font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-bright);
  border-bottom:2px solid var(--gold-bright);
}

/* ---------- Process strip ---------- */
.process{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--card-line); border-bottom:1px solid var(--card-line);
  margin-top:70px;
}
.process-step{
  flex:1 1 180px; padding:26px 24px; border-left:1px solid var(--card-line);
}
.process-step:first-child{ border-left:none; }
.process-step .n{ font-family:var(--font-display); font-size:34px; font-weight:700; color:var(--gold-bright); line-height:1; margin-bottom:8px; }
.process-step h4{ font-family:var(--font-display); font-size:14px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px; color:var(--ink); }
.process-step p{ font-size:13px; color:var(--ink-dim); }

/* ---------- Home page teaser sections ---------- */
.teaser-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px;
  background:var(--card-line); border:1px solid var(--card-line); margin-top:8px;
}
.teaser-card{ background:var(--card); padding:32px 28px; }
.teaser-card .tag{
  font-family:var(--font-display); font-size:12px; font-weight:600;
  letter-spacing:0.12em; color:var(--ink-dim); margin-bottom:10px; display:block;
}
.teaser-card h3{
  font-family:var(--font-display); font-size:19px; font-weight:600; text-transform:uppercase;
  margin-bottom:10px; color:var(--ink);
}
.teaser-card p{ color:var(--ink-dim); font-size:14.5px; margin-bottom:14px; }
.teaser-card a{
  font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--gold-bright); border-bottom:2px solid var(--gold-bright);
}

.band{
  background:var(--paper); color:#f2ede0; padding:64px 0;
}
.band .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.band h2{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(24px,3vw,34px); letter-spacing:0.01em; }
.band h2 .accent{ color:var(--gold); }
.band p{ color:#c9c3b3; max-width:44ch; margin-top:8px; }
.band .btn-solid{ background:var(--gold); border-color:var(--gold); color:#141310; }
.band .btn-solid:hover{ background:#eab454; border-color:#eab454; }

/* ---------- Contact / work order ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:60px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-info p{ color:var(--ink-dim); font-size:15px; margin-bottom:14px; }
.contact-info strong{ color:var(--ink); font-family:var(--font-display); font-weight:600; letter-spacing:0.02em; }

.permit-box{
  border:1px dashed var(--card-line); padding:20px 22px; margin-top:26px; font-size:13px; color:var(--ink-dim);
  background:var(--card);
}
.permit-box b{ color:var(--gold-bright); font-family:var(--font-display); letter-spacing:0.05em; }

.hours-plate{
  background:var(--card); border:1px solid var(--card-line); padding:22px 24px; margin-top:26px;
}
.hours-plate .row{ display:flex; justify-content:space-between; font-size:14px; padding:6px 0; border-bottom:1px solid var(--card-line); color:var(--ink-dim); }
.hours-plate .row:last-child{ border-bottom:none; }
.hours-plate .row span:first-child{ color:var(--ink); font-family:var(--font-display); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; }

.work-order{
  background:var(--card); border:1px solid var(--card-line); padding:36px;
  box-shadow:0 8px 24px rgba(20,20,19,0.05);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; grid-column: span 1; }
.field.full{ grid-column:1 / -1; }
.field label{
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-bright);
}
.field input, .field select, .field textarea{
  background:#fbfaf6; border:1px solid var(--steel-light); color:var(--ink);
  font-family:var(--font-body); font-size:15px; padding:12px 13px; resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold-bright); }
.field input::placeholder, .field textarea::placeholder{ color:#9c9686; }

.work-order .btn{ width:100%; justify-content:center; margin-top:6px; }

/* ---------- Footer / title block ---------- */
footer{ border-top:1px solid var(--card-line); padding:34px 0; }
.title-block{
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center;
  font-family:var(--font-display); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-dim);
}
.title-block b{ color:var(--gold-bright); }

:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }