/* ============================================================
   Inter-Team Design Construction — Static Site Stylesheet
   Design language: "Site Drawing" — architectural blueprint
   annotation (corner ticks, dashed measurement lines, callout
   labels) layered over a warm paper/navy palette. Reflects a
   30-year carpentry-to-main-contractor heritage without
   leaning on generic "cream + terracotta" or "dark + neon" UI.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  /* --- color tokens --- */
  --navy: #14213D;
  --navy-2: #1C2C4C;
  --paper: #F5F2EA;
  --paper-2: #EDE8DA;
  --ink: #1C1F22;
  --oak: #B9803F;
  --oak-dark: #8F6127;
  --slate: #5C6570;
  --line: #DAD3C3;
  --line-dark: rgba(245,242,234,0.18);
  --white: #FFFFFF;

  /* --- type tokens --- */
  --f-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* --- layout tokens --- */
  --maxw: 1200px;
  --radius: 4px;
  --shadow-sm: 0 2px 10px rgba(20,33,61,0.06);
  --shadow-md: 0 10px 30px rgba(20,33,61,0.10);
}

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

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

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family: var(--f-display);
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 700; }
h3{ font-size: 1.25rem; font-weight: 600; }
p{ margin: 0 0 1em; color: var(--slate); max-width: 62ch; }

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

/* focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--oak);
  outline-offset: 3px;
}
.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--navy); color:#fff; padding:12px 18px; z-index:999; border-radius: var(--radius);
}
.skip-link:focus{ left:16px; top:16px; }

/* ---------- eyebrow / blueprint labels ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--oak-dark);
}
.eyebrow::before{ content:""; width:18px; height:1px; background: var(--oak); display:inline-block; }
.on-dark .eyebrow{ color: #E7B27A; }
.on-dark .eyebrow::before{ background:#E7B27A; }

/* ---------- header / nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(20,33,61,0.94);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 14px 24px; max-width: var(--maxw); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--f-display); font-weight:700; font-size:1.15rem; color: #fff; }
.brand-mark{ width:34px; height:34px; flex:none; }
.brand img.brand-logo{ height:52px; width:auto; display:block; }
.footer-logo-chip{
  display:inline-flex; align-items:center; background: var(--paper); padding:10px 16px;
  border-radius: var(--radius); margin-bottom:16px;
}
.footer-logo-chip img{ height:30px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-size:0.92rem; font-weight:500; color: rgba(255,255,255,0.82); position:relative; padding: 6px 0;
}
.nav-links a.active,.nav-links a:hover{ color: #E7B27A; }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--oak);
}
.nav-cta{
  background: var(--oak); color:#1C1207 !important; padding:10px 20px; border-radius: var(--radius);
  font-weight:600 !important; font-size:0.88rem !important; transition: transform .15s ease, background .2s ease;
}
.nav-cta:hover{ background:#CE9557; transform: translateY(-1px); }
.nav-toggle{
  display:none; background:none; border:1px solid rgba(255,255,255,0.3); border-radius: var(--radius);
  width:42px; height:38px; align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background: #fff; position:relative; transition: all .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform: rotate(-45deg); }

@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background: var(--navy);
    flex-direction:column; align-items:stretch; gap:0; border-bottom:1px solid rgba(255,255,255,0.1);
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  .nav-links.open{ max-height:420px; }
  .nav-links a{ padding:16px 24px; border-top:1px solid rgba(255,255,255,0.08); }
  .nav-links .nav-cta{ margin:16px 24px; text-align:center; }
}

/* ---------- blueprint frame (signature element) ---------- */
.blueprint-frame{ position:relative; }
.blueprint-frame::before, .blueprint-frame::after,
.blueprint-frame .tick-tl, .blueprint-frame .tick-br{
  content:""; position:absolute; width:22px; height:22px; border-color: var(--oak); border-style:solid; opacity:.85;
}
.blueprint-frame::before{ top:-1px; left:-1px; border-width:2px 0 0 2px; }
.blueprint-frame::after{ bottom:-1px; right:-1px; border-width:0 2px 2px 0; }

/* ---------- hero ---------- */
.hero{
  background: var(--navy); color: #fff; position:relative; overflow:hidden;
  padding: 96px 0 70px;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 70% 30%, black 40%, transparent 85%);
  opacity:.6;
}
.hero-inner{ position:relative; max-width: 720px; }
.hero p.lead{ color: rgba(255,255,255,0.82); font-size:1.15rem; max-width:56ch; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 28px; }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding: 13px 26px; border-radius: var(--radius);
  font-weight:600; font-size:0.95rem; border:1px solid transparent; transition: all .18s ease;
}
.btn-primary{ background: var(--oak); color:#1C1207; }
.btn-primary:hover{ background:#CE9557; transform: translateY(-1px); }
.btn-outline{ border-color: rgba(255,255,255,0.4); color:#fff; }
.btn-outline:hover{ border-color:#fff; background: rgba(255,255,255,0.08); }
.on-paper .btn-outline{ border-color: var(--navy); color: var(--navy); }
.on-paper .btn-outline:hover{ background: var(--navy); color:#fff; }

/* ---------- stat strip ---------- */
.stat-strip{ background: var(--navy-2); color:#fff; }
.stat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; padding: 30px 0; }
.stat-grid div{ font-family: var(--f-mono); text-align:center; border-left:1px solid var(--line-dark); }
.stat-grid div:first-child{ border-left:none; }
.stat-num{ font-family: var(--f-display); font-size:1.9rem; font-weight:700; color:#E7B27A; display:block; }
.stat-label{ font-size:0.75rem; text-transform:uppercase; letter-spacing:.08em; color: rgba(255,255,255,0.7); }
@media (max-width:700px){ .stat-grid{ grid-template-columns: repeat(2,1fr); gap:26px 10px; } .stat-grid div:nth-child(3){ border-left:none;} }

/* ---------- section shell ---------- */
.section{ padding: 80px 0; }
.section-head{ max-width: 680px; margin-bottom: 44px; }
.section-head h2{ margin-top:10px; }
.section-alt{ background: var(--paper-2); }
.section-dark{ background: var(--navy); color:#fff; }
.section-dark p{ color: rgba(255,255,255,0.75); }

/* ---------- cards ---------- */
.grid{ display:grid; gap: 26px; }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; } }

.card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card .icon{ width:40px; height:40px; color: var(--oak-dark); margin-bottom:16px; }
.card h3{ margin-bottom:8px; }
.card p{ margin-bottom:0; font-size:0.95rem; }

/* ---------- placeholder media block (client swaps real photography in) ---------- */
.media-block{
  position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio: 4/3;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  display:flex; align-items:flex-end; color:#fff;
}
.media-block.tone-oak{ background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--oak-dark) 0%, var(--oak) 100%); }
.media-block .cap{
  width:100%; padding: 16px 18px; font-family: var(--f-mono); font-size:0.72rem; letter-spacing:.04em;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
}

/* ---------- project filter + grid ---------- */
.filter-bar{ display:flex; gap:10px; margin-bottom: 34px; flex-wrap:wrap; }
.filter-btn{
  background:transparent; border:1px solid var(--line); border-radius: 999px; padding:9px 20px;
  font-size:0.86rem; font-weight:600; color: var(--slate); transition: all .15s ease;
}
.filter-btn.active, .filter-btn:hover{ background: var(--navy); border-color: var(--navy); color:#fff; }

.project-card{ cursor:pointer; }
.project-card .cat-tag{
  display:inline-block; font-family: var(--f-mono); font-size:0.68rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--oak-dark); margin-top:14px;
}
.project-card h3{ margin: 4px 0 0; }

/* ---------- modal (project detail) ---------- */
.modal-backdrop{
  position:fixed; inset:0; background: rgba(20,33,61,0.6); display:none; align-items:center; justify-content:center;
  padding:24px; z-index:200;
}
.modal-backdrop.open{ display:flex; }
.modal{
  background:#fff; max-width:640px; width:100%; border-radius: var(--radius); overflow:hidden; max-height:88vh; overflow-y:auto;
  box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}
.modal-close{
  position:absolute; top:16px; right:16px; background: rgba(20,33,61,0.5); color:#fff; border:none;
  width:34px; height:34px; border-radius:50%; font-size:1.1rem;
}
.modal-body{ padding: 28px; }
.modal-body .cat-tag{ display:inline-block; font-family: var(--f-mono); font-size:0.7rem; color: var(--oak-dark); margin-bottom:8px;}

/* ---------- timeline (About Us — genuine chronological history) ---------- */
.timeline{ position:relative; padding-left: 40px; }
.timeline::before{ content:""; position:absolute; left:9px; top:6px; bottom:6px; width:1px; background: var(--line); border-left: 1px dashed var(--oak); }
.timeline-item{ position:relative; padding-bottom: 40px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-40px; top:4px; width:14px; height:14px; border-radius:50%;
  background: var(--paper); border:2px solid var(--oak);
}
.timeline-year{ font-family: var(--f-mono); font-size:0.85rem; color: var(--oak-dark); font-weight:600; letter-spacing:.03em; }
.timeline-item h3{ margin:4px 0 8px; }
.timeline-item ul{ margin-top:8px; }
.timeline-item li{ position:relative; padding-left:18px; margin-bottom:6px; color: var(--slate); font-size:0.95rem; }
.timeline-item li::before{ content:"—"; position:absolute; left:0; color: var(--oak); }

/* ---------- CTA band ---------- */
.cta-band{ background: var(--oak); color:#1C1207; text-align:center; padding: 60px 0; }
.cta-band h2{ margin-bottom: 8px; }
.cta-band p{ color: rgba(28,18,7,0.75); margin: 0 auto 26px; }
.cta-band .btn-primary{ background: var(--navy); color:#fff; }
.cta-band .btn-primary:hover{ background:#0E1730; }

/* ---------- forms ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.form-grid .full{ grid-column: 1/-1; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px; color: var(--navy); }
input, textarea, select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius: var(--radius);
  font-family: var(--f-body); font-size:0.95rem; background:#fff; color: var(--ink);
}
textarea{ resize:vertical; min-height:120px; }
.field-hint{ font-size:0.78rem; color: var(--slate); margin-top:4px; }
.form-note{
  background: var(--paper-2); border:1px dashed var(--line); border-radius: var(--radius);
  padding:14px 18px; font-size:0.85rem; color: var(--slate); margin-bottom:26px;
}

/* ---------- contact info list ---------- */
.info-list{ list-style:none; padding:0; margin:0; }
.info-list li{ display:flex; gap:14px; padding: 16px 0; border-bottom:1px solid var(--line); }
.info-list .icon{ width:22px; height:22px; flex:none; color: var(--oak-dark); margin-top:2px; }
.info-list strong{ display:block; font-family: var(--f-display); font-size:0.95rem; color: var(--navy); }
.info-list span, .info-list a{ color: var(--slate); font-size:0.92rem; }

/* ---------- footer ---------- */
.site-footer{ background: var(--navy); color: rgba(255,255,255,0.8); padding: 60px 0 24px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer-grid h4{ color:#fff; font-size:0.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; font-family: var(--f-mono); }
.footer-grid a{ display:block; padding:5px 0; font-size:0.9rem; }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid var(--line-dark); padding-top:22px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; font-size:0.8rem; color: rgba(255,255,255,0.55);
}
@media (max-width:860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* ---------- breadcrumb / page header ---------- */
.page-header{ background: var(--navy); color:#fff; padding: 54px 0 40px; }
.breadcrumb{ font-family: var(--f-mono); font-size:0.78rem; color: rgba(255,255,255,0.6); margin-bottom:14px; }
.breadcrumb a{ color: rgba(255,255,255,0.85); }
.breadcrumb a:hover{ color:#fff; }

/* ---------- utilities ---------- */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-center{ text-align:center; }
.badge{
  display:inline-flex; align-items:center; gap:8px; background: rgba(185,128,63,0.12); color: var(--oak-dark);
  border:1px solid rgba(185,128,63,0.3); padding:6px 14px; border-radius:999px; font-size:0.8rem; font-weight:600;
}