/* Concept 06 — "Field Notes" · the build journal.
   Display: Archivo 700/800. Labels/annotations: JetBrains Mono.
   Dark charcoal with a faint blueprint-grid background; green used sparingly
   for annotations, callouts and chips (~10-15%). */

:root{
  --ff-display: Archivo, system-ui, sans-serif;
  --ff-body: Archivo, system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --grid-line: rgba(34,179,58,.07);
  --grid-line-soft: rgba(255,255,255,.035);
}

#main, body{ background: var(--js-black); color: #E7E7E3; font-family: var(--ff-body); }
body{
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 31px, var(--grid-line-soft) 32px),
    repeating-linear-gradient(90deg, transparent, transparent 31px, var(--grid-line-soft) 32px);
  background-attachment: fixed;
}
h1,h2,h3{ font-family: var(--ff-display); font-weight: 800; letter-spacing: -0.01em; line-height: var(--lh-tight); color: #fff; }

/* ---- mono utility ---- */
.mono, .stamp, .job-id, .job-sample-tag, .chip, .tl-note-label, .phase-num,
.bid-sheet, .job-top, .topbar, .crew-ico, .tl-label, .tl-callout-label{ font-family: var(--ff-mono); }

/* ---- topbar ---- */
.topbar{ background: var(--js-ink); border-bottom: 1px solid #262626; font-size: .78rem; letter-spacing: .02em; }
.topbar-in{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding-block:7px; color: var(--js-gray-light); }
.topbar-lic{ color:#fff; font-weight:600; }
.topbar-lic strong{ color: var(--js-green-glow); }
.topbar-live{ display:flex; align-items:center; gap:7px; }
.live-dot{ width:7px; height:7px; border-radius:50%; background: var(--js-green-glow); box-shadow:0 0 0 0 rgba(34,179,58,.6); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(34,179,58,.55);} 70%{ box-shadow:0 0 0 7px rgba(34,179,58,0);} 100%{ box-shadow:0 0 0 0 rgba(34,179,58,0);} }
@media (max-width:620px){ .topbar-live{ display:none; } }

/* ---- header ---- */
.site-header{ position:sticky; top:0; z-index:var(--z-header); background:rgba(10,10,10,.92); backdrop-filter:blur(10px); border-bottom:1px solid #1d1d1d; }
.header-in{ display:flex; align-items:center; gap:20px; padding-block:12px; }
.brand img{ width: clamp(140px, 18vw, 180px); height:auto; }
.mainnav{ display:flex; gap: clamp(14px,2vw,24px); margin-left:auto; }
.mainnav a{ font-weight:600; font-size:.95rem; color:#d6d6d6; padding:6px 2px; position:relative; }
.mainnav a:hover{ color:#fff; }
.mainnav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--js-green-logo); transition:right var(--dur) var(--ease); }
.mainnav a:hover::after{ right:0; }
.header-actions .header-cta span:first-child{ display:inline-flex; width:16px; height:16px; }
@media (max-width:900px){ .mainnav{ display:none; } }
@media (max-width:440px){ .header-cta span:last-child{ display:none; } }

/* ---- hero ---- */
.hero{ position:relative; overflow:hidden; padding-block: clamp(42px,7vw,96px);
  background: radial-gradient(900px 480px at 85% 10%, rgba(34,179,58,.10), transparent 60%), linear-gradient(180deg,#0c0c0c,var(--js-black)); }
.hero-in{ position:relative; display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px,4vw,56px); align-items:center; }
.stamp{ display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--js-green-logo); color: var(--js-green-glow);
  padding:7px 14px; border-radius: var(--r-sm); font-size:.82rem; font-weight:700; letter-spacing:.06em; transform: rotate(-1.5deg); margin-bottom:18px; }
.stamp span{ width:16px; height:16px; }
.hero h1{ font-size: var(--fs-h1); font-weight:800; margin-bottom:18px; }
.hero-lead{ color:#cfcfcf; font-size: var(--fs-lg); max-width:52ch; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:18px; margin:24px 0; }
.hero-tags li{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.98rem; color:#e3e3e3; }
.hero-tags li span{ width:20px; height:20px; color: var(--js-green-glow); flex:none; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; }
.btn-lg{ padding:17px 26px; font-size:1.02rem; }
.hero-cta .btn-ghost{ color:#fff; }

.hero-panel{ position:relative; display:grid; place-items:center; }
.hero-grid-card{ width:100%; max-width:360px; background: var(--js-charcoal); border:1px solid #2a2a2a; border-radius: var(--r-lg);
  padding:22px; box-shadow: var(--sh-dark); position:relative; }
.hero-grid-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: repeating-linear-gradient(0deg, transparent, transparent 17px, var(--grid-line) 18px), repeating-linear-gradient(90deg, transparent, transparent 17px, var(--grid-line) 18px); }
.hgc-label{ font-family: var(--ff-mono); font-size:.76rem; letter-spacing:.06em; color: var(--js-green-glow); margin-bottom:12px; }
.hgc-bar{ height:10px; border-radius: var(--r-pill); background:#2a2a2a; overflow:hidden; margin-bottom:14px; }
.hgc-bar span{ display:block; height:100%; background: var(--js-green-logo); border-radius: var(--r-pill); }
.hgc-note{ font-size:.92rem; color:#cfcfcf; font-style:italic; }
@media (max-width:860px){ .hero-in{ grid-template-columns:1fr; } .hero-panel{ order:-1; } .hero-grid-card{ max-width:320px; } }

/* ---- section furniture ---- */
.section-eyebrow{ color: var(--js-green-glow); margin-bottom:12px; }
.section-title{ font-size: var(--fs-h2); margin-bottom:10px; }
.section-sub{ color: var(--js-gray-light); max-width:66ch; margin-bottom:30px; }

/* ---- services ---- */
.services{ background: linear-gradient(180deg, var(--js-black), #0d0d0d); }
.services-grid{ grid-template-columns: repeat(3,1fr); }
@media (max-width:860px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .services-grid{ grid-template-columns:1fr; } }
.svc-card{ display:block; background: var(--js-charcoal); border:1px solid #2a2a2a; border-radius: var(--r-lg); padding:26px 24px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.svc-card:hover{ transform:translateY(-4px); border-color: var(--js-green-logo); box-shadow: var(--sh-dark); }
.svc-ico{ display:grid; place-items:center; width:50px; height:50px; border-radius: var(--r-md); background: rgba(34,179,58,.14); color: var(--js-green-glow); margin-bottom:16px; }
.svc-ico svg{ width:26px; height:26px; }
.svc-card h3{ font-size:1.2rem; margin-bottom:8px; }
.svc-card p{ color: var(--js-gray-light); font-size:.96rem; }
.svc-link{ display:inline-block; margin-top:14px; color: var(--js-green-glow); font-weight:700; font-size:.92rem; font-family: var(--ff-mono); }

/* ---- now building ---- */
.now-building{ background:#0d0d0d; }
.jobs-grid{ grid-template-columns: repeat(3,1fr); }
@media (max-width:900px){ .jobs-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
.job-card{ position:relative; background: var(--js-charcoal); border:1px solid #2a2a2a; border-radius: var(--r-lg); padding:22px; padding-top:30px; }
.job-sample-tag{ position:absolute; top:-11px; left:18px; background: var(--js-amber); color:#fff; font-size:.68rem; font-weight:700;
  letter-spacing:.05em; padding:3px 9px; border-radius: var(--r-pill); }
.job-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-size:.78rem; }
.chip{ display:inline-flex; align-items:center; padding:4px 10px; border-radius: var(--r-pill); font-weight:700; letter-spacing:.04em; font-size:.72rem; text-transform:uppercase; }
.chip-framing{ background: rgba(34,179,58,.16); color: var(--js-green-glow); }
.chip-roofing{ background: rgba(217,119,6,.18); color:#e3a350; }
.chip-finish{ background: rgba(255,255,255,.12); color:#e9e9e6; }
.job-id{ color: var(--js-gray-light); }
.job-town{ font-weight:700; font-size:1.05rem; margin-bottom:12px; }
.job-progress{ margin-bottom:14px; }
.job-progress-bar{ height:8px; border-radius: var(--r-pill); background:#2a2a2a; overflow:hidden; margin-bottom:6px; }
.job-progress-bar span{ display:block; height:100%; background: var(--js-green-logo); border-radius: var(--r-pill); }
.job-pct{ font-size:.78rem; color: var(--js-gray-light); font-family: var(--ff-mono); }
.job-note{ color:#cfcfcf; font-size:.92rem; font-style:italic; }

/* ---- project timeline (signature) ---- */
.timeline-section{ background: linear-gradient(180deg,#0d0d0d, var(--js-black)); }
.js-timeline{ display:grid; gap: 22px; }
.tl-stage{ display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(20px,3vw,36px); align-items:stretch; }
.tl-photo-wrap{ position:relative; }
.tl-photo{ min-height: 300px; border-radius: var(--r-lg); }
.tl-callouts{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.tl-callout-label{ position:absolute; font-size:.72rem; color: var(--js-green-glow); background: rgba(10,10,10,.72); padding:3px 8px; border-radius: var(--r-sm); font-weight:600; letter-spacing:.02em; }
.tl-callout-a{ left: 6%; top: 10%; }
.tl-callout-b{ right: 5%; bottom: 10%; }
.tl-note{ background: var(--js-charcoal); border:1px solid #2a2a2a; border-left:3px solid var(--js-green-logo); border-radius: var(--r-lg); padding: 24px; display:flex; flex-direction:column; justify-content:center; }
.tl-note-label{ font-size:.74rem; letter-spacing:.1em; color: var(--js-green-glow); font-weight:700; margin-bottom:10px; }
.tl-note-phase{ font-size: 1.5rem; margin-bottom:10px; }
.tl-note-text{ color:#cfcfcf; font-size:1rem; }
@media (max-width:820px){ .tl-stage{ grid-template-columns:1fr; } .tl-photo{ min-height:220px; } }

.tl-scrubber{ position:relative; display:flex; justify-content:space-between; gap:4px; padding-top:10px; }
.tl-track{ position:absolute; left:4%; right:4%; top:19px; height:3px; background:#2a2a2a; border-radius: var(--r-pill); z-index:0; }
.tl-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background: var(--js-green-logo); border-radius: var(--r-pill);
  transition: width var(--dur) var(--ease); }
@media (prefers-reduced-motion: reduce){ .tl-fill{ transition:none; } }
.tl-stop{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:4px; min-height:48px; }
.tl-dot{ width:17px; height:17px; border-radius:50%; background: var(--js-charcoal); border:3px solid #3a3a3a; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.tl-label{ font-size:.76rem; font-weight:600; color: var(--js-gray-light); text-align:center; }
.tl-stop[aria-selected="true"] .tl-dot{ border-color: var(--js-green-logo); background: var(--js-green-logo); box-shadow: 0 0 0 4px rgba(34,179,58,.18); }
.tl-stop[aria-selected="true"] .tl-label{ color:#fff; }
.tl-stop:hover .tl-dot{ border-color: var(--js-green-glow); }
@media (max-width:620px){ .tl-label{ font-size:.66rem; } }

/* ---- process ---- */
.process{ background:#0d0d0d; }
.phase-grid{ grid-template-columns: repeat(3,1fr); }
@media (max-width:860px){ .phase-grid{ grid-template-columns:1fr; } }
.phase-card{ background: var(--js-charcoal); border:1px solid #2a2a2a; border-radius: var(--r-lg); padding:26px; }
.phase-num{ color: var(--js-green-glow); font-size:.76rem; letter-spacing:.08em; font-weight:700; margin-bottom:10px; }
.phase-card h3{ font-size:1.3rem; margin-bottom:16px; }
.phase-list{ display:grid; gap:12px; }
.phase-list li{ display:flex; align-items:flex-start; gap:10px; font-size:.95rem; color:#d6d6d6; }
.phase-list .pc{ width:18px; height:18px; flex:none; margin-top:2px; border-radius:4px; border:2px solid var(--js-green-logo); position:relative; }
.phase-list .pc::after{ content:""; position:absolute; left:3px; top:1px; width:5px; height:9px; border:solid var(--js-green-glow); border-width:0 2px 2px 0; transform:rotate(45deg); }

/* ---- bid ---- */
.bid{ background: linear-gradient(180deg, var(--js-black), #0d0d0d); }
.bid-sheet{ background: var(--js-charcoal); border:1px solid #2a2a2a; border-radius: var(--r-lg); overflow:hidden; font-size:.92rem; }
.bid-row{ display:grid; grid-template-columns: 1fr 70px 140px; gap:10px; padding:13px 20px; border-bottom:1px solid #2a2a2a; align-items:center; }
.bid-row:last-child{ border-bottom:0; }
.bid-row span:nth-child(2){ text-align:center; color: var(--js-gray-light); }
.bid-row span:nth-child(3){ text-align:right; }
.bid-head{ background:#191919; color: var(--js-green-glow); font-weight:700; letter-spacing:.04em; font-size:.78rem; }
.bid-total{ background:#191919; font-weight:700; color:#fff; }
.blur-val{ filter: blur(5px); user-select:none; }
@media (prefers-reduced-motion: reduce){ .blur-val{ filter: blur(5px); } }
.bid-foot{ margin-top:16px; color: var(--js-gray-light); font-size:.85rem; font-style:italic; }
@media (max-width:620px){ .bid-row{ grid-template-columns: 1fr 50px 100px; padding:12px 14px; font-size:.84rem; } }

/* ---- crew ---- */
.crew{ background:#0d0d0d; }
.crew-grid{ grid-template-columns: repeat(3,1fr); }
@media (max-width:860px){ .crew-grid{ grid-template-columns:1fr; } }
.crew-card{ background: var(--js-charcoal); border:1px solid #2a2a2a; border-radius: var(--r-lg); padding:26px; }
.crew-ico{ display:grid; place-items:center; width:48px; height:48px; border-radius: var(--r-md); background: rgba(34,179,58,.14); color: var(--js-green-glow); margin-bottom:14px; }
.crew-ico svg{ width:24px; height:24px; }
.crew-card h3{ font-size:1.1rem; margin-bottom:8px; font-family: var(--ff-display); }
.crew-card p{ color: var(--js-gray-light); font-size:.94rem; }

/* ---- projects/photos ---- */
.projects{ background: linear-gradient(180deg,#0d0d0d, var(--js-black)); }
.photo-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
.photo-grid .ph-photo{ min-height:170px; border-radius: var(--r-md); }
@media (max-width:860px){ .photo-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---- reviews ---- */
.reviews{ background:#0d0d0d; }
.reviews-grid{ grid-template-columns: repeat(3,1fr); }
@media (max-width:860px){ .reviews-grid{ grid-template-columns:1fr; } }
.review-card{ background: var(--js-charcoal); border:1px solid #2a2a2a; border-left:3px solid var(--js-green-logo); border-radius: var(--r-md); padding:22px; }
.review-card .stars{ display:flex; gap:3px; margin-bottom:12px; }
.review-card .stars::before{ content:"★★★★★"; color: var(--js-green-glow); letter-spacing:3px; font-size:1.05rem; }
.review-card p{ color:#d6d6d6; font-style:italic; }
.review-card footer{ margin-top:14px; color: var(--js-gray-light); font-size:.85rem; font-style:normal; }

/* ---- about ---- */
.about{ background: linear-gradient(180deg, var(--js-black), #0d0d0d); }
.about-in{ display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px,4vw,56px); align-items:center; }
.about-photo{ min-height:340px; border-radius: var(--r-lg); }
.about-copy p{ color:#cfcfcf; margin-top:14px; }
.about-lic{ color:#fff !important; font-weight:600; margin-top:18px; }
.about-lic strong{ color: var(--js-green-glow); }
@media (max-width:760px){ .about-in{ grid-template-columns:1fr; } .about-photo{ min-height:240px; } }

/* ---- service area ---- */
.area{ background:#0d0d0d; }
.area-cols{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.area-cols strong{ color: var(--js-green-glow); display:block; margin-bottom:6px; font-family: var(--ff-mono); font-size:.85rem; letter-spacing:.04em; }
.area-cols p{ color: var(--js-gray-light); font-size:.92rem; }
@media (max-width:760px){ .area-cols{ grid-template-columns:1fr; } }

/* ---- estimate ---- */
.estimate-section{ background: linear-gradient(180deg, var(--js-black), #0d0d0d); }
.estimate-in{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,4vw,56px); align-items:start; }
.estimate-promise{ color: var(--js-green-glow); font-weight:600; margin-bottom:20px; }
.contact-list{ display:grid; gap:14px; }
.contact-list li{ display:flex; align-items:center; gap:12px; font-size:1.02rem; }
.contact-list .ci{ display:grid; place-items:center; width:38px; height:38px; border-radius: var(--r-md); background: rgba(34,179,58,.14); color: var(--js-green-glow); flex:none; }
.contact-list .ci svg{ width:19px; height:19px; }
.contact-list a:hover{ color: var(--js-green-glow); }
.estimate-form{ background: var(--js-charcoal); border:1px solid #2a2a2a; border-radius: var(--r-lg); padding: clamp(20px,3vw,32px); }
.estimate-form .jsform-field label{ color:#e6e6e6; }
.estimate-form .jsform-input, .estimate-form .jsform-select, .estimate-form .jsform-textarea{ background: var(--js-ink); border-color:#333; color:#fff; }
.estimate-form .jsform-hint{ color: var(--js-gray-light); }
@media (max-width:760px){ .estimate-in{ grid-template-columns:1fr; } }

/* ---- footer ---- */
.site-footer{ background: var(--js-ink); border-top:1px solid #262626; padding-block:44px; }
.footer-in{ display:grid; grid-template-columns: 1.4fr 1fr auto; gap:28px; align-items:start; }
.footer-brand img{ width:150px; margin-bottom:12px; }
.footer-brand p, .footer-meta p{ color: var(--js-gray-light); font-size:.92rem; margin-top:6px; }
.footer-meta strong{ color: var(--js-green-glow); }
.footer-meta a:hover{ color: var(--js-green-glow); }
.footer-legal{ text-align:right; color: var(--js-gray-light); font-size:.88rem; }
.footer-legal a{ display:inline-block; margin-top:8px; text-decoration:underline; }
@media (max-width:760px){ .footer-in{ grid-template-columns:1fr; } .footer-legal{ text-align:left; } }