:root{
  --bg:#F5F1E6;
  --bg-soft:#EBE4D4;
  --surface:#FFFFFF;
  --text:#201B14;
  --muted:#5C5445;
  --line:#DCD2BB;
  --accent:#D98E1E;
  --accent-ink:#5C3A0C;
  --rust:#AE4A28;
  --dark-bg:#1B1712;
  --dark-surface:#241F18;
  --dark-text:#F3ECDD;
  --dark-muted:#B9AE97;
  --dark-line:#3A3226;
  --radius:2px;
  --shadow: 0 18px 40px -20px rgba(20,15,5,0.35);
  --container: 1200px;
}

html[data-theme="dark"]{
  --bg:var(--dark-bg);
  --bg-soft:#211C15;
  --surface:var(--dark-surface);
  --text:var(--dark-text);
  --muted:var(--dark-muted);
  --line:var(--dark-line);
  --accent:#E2A227;
  --accent-ink:#2A1B05;
  --shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease, color .3s ease;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:1.05;
  margin:0;
  text-transform:uppercase;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

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

.plate{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px 6px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--muted);
  position:relative;
}
.plate::before,
.plate::after{
  content:"";
  width:4px; height:4px; border-radius:50%;
  background:var(--line);
  flex:0 0 auto;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 26px;
  border-radius:var(--radius);
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(217,142,30,.6); }
.btn-ghost{ border-color:var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-light{ background:var(--dark-text); color:var(--dark-bg); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(0,0,0,.5); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}

/* ---------- HEADER ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
header.scrolled{ border-bottom-color:var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; max-width:var(--container); margin:0 auto; gap:14px;}
.brand{ display:flex; align-items:center; gap:10px; font-family:'Archivo Black',sans-serif; text-transform:uppercase; font-size:16px; letter-spacing:-0.01em; min-width:0; }
.brand-mark{ width:38px; height:38px; border-radius:6px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:19px; flex:0 0 auto;}
.brand-name{ line-height:1.05; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand-name small{ display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.16em; color:var(--muted); font-weight:600; margin-top:2px;}

nav.primary-nav{ display:flex; align-items:center; gap:26px; }
nav.primary-nav a{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:500; color:var(--muted); transition:color .2s; padding-bottom:3px; border-bottom:2px solid transparent;}
nav.primary-nav a:hover{ color:var(--text); }
nav.primary-nav a.active{ color:var(--text); border-bottom-color:var(--accent); }

.nav-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:transparent;
  display:flex; align-items:center; justify-content:center; color:var(--text); flex:0 0 auto;
}
.theme-toggle svg{ width:17px; height:17px; }
.hamburger{ display:none; width:38px; height:38px; border:1px solid var(--line); background:transparent; border-radius:6px; align-items:center; justify-content:center; flex-direction:column; gap:4px; flex:0 0 auto; position:relative; z-index:201;}
.hamburger span{ width:18px; height:2px; background:var(--text); display:block; transition:transform .25s ease, opacity .2s ease, background .2s ease;}
.hamburger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.call-header{ display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600;}

body.menu-open{ overflow:hidden; }

.mobile-panel{
  position:fixed;
  top:0; left:0; right:0;
  height:100vh; height:100dvh;
  background:var(--bg); z-index:150;
  display:flex; flex-direction:column;
  padding:100px 24px 32px;
  transform:translateY(-100%);
  transition:transform .3s ease;
  overflow-y:auto;
  visibility:hidden;
}
.mobile-panel.open{ transform:translateY(0); visibility:visible; }
.mobile-panel a{ font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.06em; padding:18px 4px; border-bottom:1px solid var(--line); font-size:15px; flex:0 0 auto;}
.mobile-panel .btn{ margin-top:18px; justify-content:center; flex:0 0 auto;}

@media (max-width:900px){
  nav.primary-nav, .call-header{ display:none; }
  .hamburger{ display:flex; }
}
@media (max-width:400px){
  .nav-inner{ padding:14px 16px; gap:10px; }
  .brand{ font-size:14.5px; }
  .brand-name small{ font-size:8.5px; }
  .brand-mark{ width:34px; height:34px; font-size:17px; }
  .theme-toggle, .hamburger{ width:34px; height:34px; }
  .mobile-panel{ padding-top:88px; }
}

/* ---------- HERO (home) ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  color:#F3ECDD;
  padding-top:96px;
}
.hero-media{ position:absolute; inset:0; overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,12,8,.55) 0%, rgba(15,12,8,.35) 30%, rgba(15,12,8,.55) 65%, rgba(13,10,7,.94) 100%);
}
.hero-content{ position:relative; z-index:2; padding:56px 24px 72px; max-width:var(--container); margin:0 auto; width:100%;}
.hero .plate{ border-color:rgba(243,236,221,.35); color:#E9DFC8; }
.hero .plate::before,.hero .plate::after{ background:var(--accent); }
.hero h1{
  font-size:clamp(38px, 6.4vw, 84px);
  margin:22px 0 20px;
  max-width:16ch;
}
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero p.lede{ font-family:'Inter'; font-size:clamp(16px,2vw,19px); color:#E9DFC8; max-width:46ch; line-height:1.55; margin:0 0 32px;}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-scroll{
  position:absolute; right:24px; bottom:22px; z-index:2;
  writing-mode:vertical-rl; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.2em;
  color:#cfc4a6; display:flex; align-items:center; gap:10px; text-transform:uppercase;
}
.hero-scroll .line{ width:1px; height:44px; background:#cfc4a6; }
@media (max-width:700px){ .hero-scroll{ display:none; } }

/* torn earth divider */
.torn{ position:relative; height:0; }
.torn svg{ display:block; width:100%; height:46px; }

/* ---------- PAGE HEADER (interior pages) ---------- */
.page-header{
  position:relative;
  min-height:56vh;
  display:flex;
  align-items:flex-end;
  color:#F3ECDD;
  padding-top:96px;
}
.page-header .hero-media img{ object-position:center 42%; }
.page-header-content{ position:relative; z-index:2; padding:48px 24px 64px; max-width:var(--container); margin:0 auto; width:100%;}
.page-header .plate{ border-color:rgba(243,236,221,.35); color:#E9DFC8; }
.page-header .plate::before,.page-header .plate::after{ background:var(--accent); }
.page-header h1{ font-size:clamp(32px,5.5vw,58px); margin:18px 0 12px; }
.page-header p{ color:#E9DFC8; font-size:16px; max-width:52ch; margin:0; }
.breadcrumb{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#CBBE9F; margin-top:14px; }
.breadcrumb a{ color:#CBBE9F; }
.breadcrumb a:hover{ color:var(--accent); }

/* ---------- TRUST BAR ---------- */
.trust{
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
  padding:26px 0;
}
.trust .wrap{ display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center; justify-content:space-between; }
.trust-item{ display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.trust-item svg{ width:18px; height:18px; color:var(--accent); flex:0 0 auto;}

/* ---------- SECTION SHELL ---------- */
section{ padding:100px 0; }
.section-head{ max-width:680px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(30px,4.2vw,48px); margin-top:16px; }
.section-head p{ color:var(--muted); font-size:16.5px; line-height:1.65; margin-top:16px; max-width:56ch; }
.eyebrow{ margin-bottom:0; }
.section-foot{ margin-top:44px; }

/* ---------- ABOUT ---------- */
.about{ background:var(--bg); }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about-media{ position:relative; }
.about-media img{ border-radius:4px; width:100%; height:520px; object-fit:cover; box-shadow:var(--shadow);}
.about-tag{
  position:absolute; left:-20px; bottom:-20px; background:var(--surface); border:1px solid var(--line);
  padding:18px 22px; border-radius:4px; box-shadow:var(--shadow);
}
.about-tag strong{ font-family:'Archivo Black'; font-size:30px; display:block; color:var(--accent); text-transform:none;}
.about-tag span{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.about-copy p{ color:var(--muted); font-size:16.5px; line-height:1.75; margin:0 0 20px; }
.about-copy strong{ color:var(--text); }
.about-list{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px; }
.about-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--text); }
.about-list svg{ width:18px; height:18px; color:var(--accent); flex:0 0 auto; margin-top:2px;}

@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; gap:56px; }
  .about-media img{ height:360px; }
  .about-tag{ left:16px; bottom:-24px; }
}

/* ---------- SERVICES ---------- */
.services{ background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.featured-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:24px; }
.feature-card{ position:relative; border-radius:4px; overflow:hidden; height:400px; box-shadow:var(--shadow); }
.feature-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.feature-card:hover img{ transform:scale(1.06); }
.feature-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,15,8,0) 35%, rgba(15,11,6,.92) 100%);}
.feature-body{ position:absolute; left:0; right:0; bottom:0; padding:24px; z-index:2; color:#F3ECDD;}
.feature-body .plate{ border-color:rgba(243,236,221,.35); color:#E9DFC8; margin-bottom:10px;}
.feature-body .plate::before,.feature-body .plate::after{ background:var(--accent); }
.feature-body h3{ font-size:22px; text-transform:none; font-family:'Archivo Black'; }

.grid-services{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden;}
.service-cell{ background:var(--surface); padding:26px 24px; display:flex; flex-direction:column; gap:14px; min-height:150px; transition:background .2s ease;}
.service-cell:hover{ background:var(--bg-soft); }
.service-cell svg{ width:26px; height:26px; color:var(--accent); }
.service-cell h4{ font-family:'Inter'; font-weight:700; font-size:15.5px; margin:0; text-transform:none; letter-spacing:0; }

@media (max-width:900px){
  .featured-grid{ grid-template-columns:1fr; }
  .grid-services{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .grid-services{ grid-template-columns:1fr; }
}

/* ---------- CAPABILITIES / EQUIPMENT ---------- */
.capabilities{
  position:relative; color:#F3ECDD; overflow:hidden;
}
.cap-media{ position:absolute; inset:0; }
.cap-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.85);}
.cap-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(14,11,7,.95) 0%, rgba(14,11,7,.88) 45%, rgba(14,11,7,.55) 100%);}
.cap-inner{ position:relative; z-index:2; }
.capabilities .section-head p{ color:#CBBE9F; }
.capabilities .plate{ border-color:rgba(243,236,221,.35); color:#E9DFC8; }
.capabilities .plate::before,.capabilities .plate::after{ background:var(--accent); }
.cap-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cap-card{ border:1px solid rgba(243,236,221,.22); border-radius:4px; padding:26px 20px; background:rgba(20,16,10,.35); }
.cap-card .num{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--accent); letter-spacing:.14em; }
.cap-card h4{ font-family:'Archivo Black'; font-size:19px; margin:12px 0 8px; text-transform:none;}
.cap-card p{ margin:0; font-size:13.5px; color:#CBBE9F; line-height:1.6; }

@media (max-width:900px){ .cap-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cap-grid{ grid-template-columns:1fr; } }

/* ---------- OUR WORK ---------- */
.work{ background:var(--bg); }
.work-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:14px;
}
.work-item{ position:relative; overflow:hidden; border-radius:4px; }
.work-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.work-item:hover img{ transform:scale(1.08); }
.work-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,11,6,0) 55%, rgba(15,11,6,.85) 100%); opacity:0; transition:opacity .25s ease;}
.work-item:hover::after, .work-item:focus-within::after{ opacity:1; }
.work-cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px; color:#F3ECDD; z-index:2;
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  transform:translateY(10px); opacity:0; transition:.25s ease;
}
.work-item:hover .work-cap, .work-item:focus-within .work-cap{ transform:translateY(0); opacity:1; }
.work-item.tall{ grid-row:span 2; }

@media (max-width:1000px){ .work-grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:180px; } }
@media (max-width:680px){ .work-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; } .work-item.tall{ grid-row:span 1; } .work-cap{ opacity:1; transform:none; background:linear-gradient(180deg, rgba(15,11,6,0), rgba(15,11,6,.75)); } }

/* ---------- WHY / SERVICE AREA ---------- */
.why{ background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.why-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; }
.why-list{ display:grid; gap:22px; }
.why-row{ display:flex; gap:18px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.why-row:last-child{ border-bottom:none; padding-bottom:0;}
.why-row .plate{ height:fit-content; }
.why-row p{ margin:0; color:var(--muted); font-size:15px; line-height:1.6; }
.why-row h4{ font-family:'Inter'; font-weight:700; font-size:16px; margin:0 0 6px; text-transform:none;}

.area-card{ background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:34px; box-shadow:var(--shadow); height:fit-content;}
.area-card h3{ font-size:24px; margin-bottom:16px; }
.area-card p{ color:var(--muted); font-size:15px; line-height:1.7; margin:0 0 22px;}
.area-card .plate{ margin-bottom:18px; }

@media (max-width:900px){ .why-grid{ grid-template-columns:1fr; gap:48px; } }

/* ---------- CTA BAND ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--rust), #8C3A20);
  color:#FBF3E4; text-align:center;
}
.cta-band h2{ font-size:clamp(30px,5vw,54px); max-width:18ch; margin:0 auto 18px;}
.cta-band p{ color:#F3DEC3; max-width:52ch; margin:0 auto 34px; font-size:16.5px;}
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-band .btn-ghost{ border-color:rgba(251,243,228,.4); color:#FBF3E4; }
.cta-band .btn-ghost:hover{ border-color:#FBF3E4; }

/* ---------- CONTACT / ESTIMATES ---------- */
.contact{ background:var(--bg); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
form.quote{ background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:36px; box-shadow:var(--shadow); }
.field{ margin-bottom:20px; display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.field input, .field textarea{
  padding:13px 14px; border:1px solid var(--line); border-radius:4px; background:var(--bg); color:var(--text);
  font-family:'Inter'; font-size:14.5px; width:100%;
}
.field textarea{ resize:vertical; min-height:100px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
form.quote .btn{ width:100%; justify-content:center; margin-top:6px; }
.form-note{ font-size:12.5px; color:var(--muted); margin-top:14px; text-align:center; }

.contact-info{ display:flex; flex-direction:column; gap:22px; }
.info-card{ background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:26px; display:flex; gap:16px; align-items:flex-start; }
.info-card svg{ width:22px; height:22px; color:var(--accent); flex:0 0 auto; margin-top:2px;}
.info-card h4{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; font-weight:600;}
.info-card p, .info-card a{ margin:0; font-size:15.5px; color:var(--text); line-height:1.5; }
.map-frame{ border:1px solid var(--line); border-radius:4px; overflow:hidden; height:220px; box-shadow:var(--shadow);}
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(0.3) contrast(1.05); }

@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } .field-row{ grid-template-columns:1fr; } }

/* ---------- FOOTER ---------- */
footer{ background:var(--dark-bg); color:var(--dark-text); padding:64px 0 28px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-bottom:44px; border-bottom:1px solid var(--dark-line); }
.footer-brand .brand{ color:var(--dark-text); }
.footer-brand p{ color:var(--dark-muted); font-size:14.5px; line-height:1.7; margin:18px 0 0; max-width:38ch;}
footer h5{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dark-muted); margin:0 0 16px; font-weight:600;}
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.footer-links a{ color:var(--dark-text); font-size:14.5px; opacity:.9; }
.footer-links a:hover{ color:var(--accent); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:26px; font-size:12.5px; color:var(--dark-muted); font-family:'IBM Plex Mono',monospace; }

@media (max-width:800px){ .footer-top{ grid-template-columns:1fr; gap:32px; } }

::selection{ background:var(--accent); color:#1B1712; }

[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].in{ opacity:1; transform:none; }