/* ==========================================================
   HAMMERCRAFT — token system
   ========================================================== */
:root{
  --ink:        #17181A;   /* background, near-black warm charcoal */
  --ink-2:      #1F2123;   /* raised surface */
  --paper:      #EDE8DE;   /* primary text / light surface */
  --paper-dim:  #B7B2A6;   /* secondary text on dark */
  --brass:      #BE8A3E;   /* primary accent — brass hardware */
  --brass-light:#D9AE6C;
  --steel:      #3E5563;   /* secondary accent — subway steel blue */
  --rust:       #8B4A3C;   /* tertiary — small use only */
  --line:       #37393B;   /* hairline borders on dark */
  --line-light: #D8D2C4;   /* hairline borders on light */

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --wrap: 1180px;
  --radius: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.01em;
  margin:0;
  color:var(--paper);
}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--brass-light);
  outline-offset:3px;
}

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:15px 28px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{
  background:var(--brass);
  color:var(--ink);
}
.btn-primary:hover{ background:var(--brass-light); }
.btn-ghost{
  background:transparent;
  color:var(--paper);
  border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass-light); }
.btn-small{ padding:11px 18px; font-size:12px; }
.btn-full{ width:100%; padding:16px 28px; }

/* ==========================================================
   HEADER
   ========================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(23,24,26,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:76px;
}
.logo{
  display:flex;
  align-items:center;
  gap:9px;
  flex-shrink:0;
}
.logo-mark{ width:24px; height:24px; color:var(--brass); }
.logo-text{
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  letter-spacing:0.02em;
  color:var(--paper);
}
.logo-accent{ color:var(--brass); }

.main-nav{
  display:flex;
  gap:32px;
  margin:0 auto;
}
.main-nav a{
  font-size:14px;
  font-weight:500;
  color:var(--paper-dim);
  transition:color .15s ease;
}
.main-nav a:hover{ color:var(--paper); }

.header-actions{
  display:flex;
  align-items:center;
  gap:20px;
}
.phone-link{ display:flex; flex-direction:column; line-height:1.2; text-align:right; }
.phone-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; color:var(--paper-dim); }
.phone-number{ font-family:var(--font-mono); font-size:15px; font-weight:600; color:var(--paper); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px; height:32px;
  background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{ width:100%; height:2px; background:var(--paper); }

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  position:relative;
  overflow:hidden;
  padding:88px 0 96px;
  border-bottom:1px solid var(--line);
}
.blueprint-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:0.35;
  mask-image:radial-gradient(ellipse 70% 60% at 30% 20%, black 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 20%, black 0%, transparent 75%);
}
.hero-row{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:64px;
  align-items:start;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--brass-light);
  margin:0 0 20px;
}
.hero-title{
  font-size:clamp(2.2rem, 4.4vw, 3.6rem);
  line-height:1.08;
}
.hero-accent{ color:var(--brass); }
.hero-sub{
  max-width:520px;
  margin:26px 0 36px;
  color:var(--paper-dim);
  font-size:17px;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

/* --- work order card, signature element --- */
.work-order{
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 28px 26px;
  margin-top:8px;
}
.work-order-hole{
  position:absolute;
  top:-1px; right:24px;
  width:22px; height:22px;
  background:var(--ink);
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 50% 50%;
}
.wo-kicker{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  color:var(--brass-light);
  margin:0;
}
.wo-id{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--paper-dim);
  margin:4px 0 22px;
  padding-bottom:18px;
  border-bottom:1px dashed var(--line);
}
.wo-list{ margin:0; }
.wo-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.wo-row:last-child{ border-bottom:none; }
.wo-row dt{ color:var(--paper-dim); }
.wo-row dd{ margin:0; font-weight:600; text-align:right; }
.wo-stamp{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.18em;
  color:var(--brass);
  border:1px solid var(--brass);
  border-radius:2px;
  display:inline-block;
  padding:6px 14px;
  margin-top:22px;
  transform:rotate(-3deg);
}

/* ==========================================================
   MARQUEE
   ========================================================== */
.marquee-strip{
  background:var(--brass);
  color:var(--ink);
  overflow:hidden;
  white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.marquee-track{
  display:inline-flex;
  gap:14px;
  padding:13px 0;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.06em;
  animation:scroll-left 42s linear infinite;
}
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ==========================================================
   SECTION HEADERS (shared)
   ========================================================== */
.section-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--brass-light);
  margin:0 0 12px;
}
.section-title{
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom:20px;
}

/* ==========================================================
   SERVICES
   ========================================================== */
.services{ padding:100px 0; border-bottom:1px solid var(--line); }
.service-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:48px;
}
.service-card{
  position:relative;
  background:var(--ink);
  padding:32px 26px 30px;
}
.corner{
  position:absolute;
  width:14px; height:14px;
  border:2px solid var(--brass);
  opacity:0.7;
}
.corner-tl{ top:14px; left:14px; border-right:none; border-bottom:none; }
.corner-br{ bottom:14px; right:14px; border-left:none; border-top:none; }
.service-icon{ color:var(--brass); width:40px; height:40px; margin-bottom:22px; }
.service-icon svg{ width:100%; height:100%; }
.service-tag{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--paper-dim);
  margin:0 0 6px;
}
.service-card h3{ font-size:22px; margin-bottom:12px; }
.service-desc{ color:var(--paper-dim); font-size:14.5px; margin:0 0 20px; }
.service-specs{
  list-style:none;
  margin:0; padding:16px 0 0;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--paper-dim);
}
.service-specs li{ padding:4px 0; }
.service-specs li::before{ content:"— "; color:var(--brass); }

/* ==========================================================
   WHY US
   ========================================================== */
.why{ padding:100px 0; border-bottom:1px solid var(--line); background:var(--ink-2); }
.why-row{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start; }
.why-lede{ color:var(--paper-dim); max-width:360px; font-size:16px; }
.why-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px 40px;
}
.why-num{
  font-family:var(--font-mono);
  color:var(--brass);
  font-size:13px;
  margin:0 0 10px;
}
.why-item h3{ font-size:18px; margin-bottom:10px; text-transform:none; }
.why-item p{ color:var(--paper-dim); font-size:14.5px; margin:0; }

/* ==========================================================
   CONTACT
   ========================================================== */
.contact{ padding:100px 0; }
.contact-row{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:72px; }
.contact-lede{ color:var(--paper-dim); max-width:380px; margin-bottom:36px; }
.info-block{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px 0;
  border-top:1px solid var(--line);
  font-size:15px;
}
.info-block:last-child{ border-bottom:1px solid var(--line); }
.info-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--paper-dim);
}
.info-block a:hover{ color:var(--brass-light); }

.quote-form{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px;
}
.form-row{ margin-bottom:18px; display:flex; flex-direction:column; gap:8px; }
.form-row-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:18px;
}
.form-row-split > div{ display:flex; flex-direction:column; gap:8px; }
label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--paper-dim);
}
input, textarea, select{
  font-family:var(--font-body);
  font-size:15px;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--paper);
  padding:12px 14px;
  width:100%;
}
input::placeholder, textarea::placeholder{ color:#6B6864; }
textarea{ resize:vertical; min-height:100px; }
select{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23BE8A3E' stroke-width='2' fill='none' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; }
input:focus, textarea:focus, select:focus{ border-color:var(--brass); }

.form-status{
  min-height:20px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--brass-light);
  margin:14px 0 0;
}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{ border-top:1px solid var(--line); padding:32px 0; }
.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.logo-footer .logo-mark{ width:20px; height:20px; }
.logo-footer .logo-text{ font-size:15px; }
.footer-note, .footer-copy{ color:var(--paper-dim); font-size:13px; margin:0; }

/* ==========================================================
   SCROLL REVEAL
   ========================================================== */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 980px){
  .hero-row{ grid-template-columns:1fr; }
  .why-row{ grid-template-columns:1fr; }
  .contact-row{ grid-template-columns:1fr; gap:48px; }
  .service-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .phone-link{ display:none; }
  .header-row{ height:66px; }
  .hero{ padding:56px 0 64px; }
  .service-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .form-row-split{ grid-template-columns:1fr; }
  .btn-small{ display:none; }

  .main-nav.is-open{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:66px; left:0; right:0;
    background:var(--ink);
    border-bottom:1px solid var(--line);
    padding:12px 24px 20px;
    gap:0;
  }
  .main-nav.is-open a{ padding:12px 0; border-bottom:1px solid var(--line); }
}

@media (max-width: 480px){
  .hero-title{ font-size:2rem; }
  .work-order{ padding:26px 20px 22px; }
}