/* Forest Tall CNC -- shared site styles */

:root{
  --bg:        #FFFFFF;
  --bg-raised: #F1F5F2;
  --bg-sunk:   #E8EFEA;
  --ink:       #11241B;
  --ink-soft:  #4E5D55;
  --forest:    #1B4332;
  --forest-2:  #0F2C21;
  --forest-lt: #2D6A4F;
  --white:     #FFFFFF;
  --line:      rgba(17,36,27,0.14);
  --line-soft: rgba(17,36,27,0.08);
  --focus:     #2D6A4F;
  --font-display: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:        #0B1712;
    --bg-raised: #12211A;
    --bg-sunk:   #0E1B15;
    --ink:       #EAF1EC;
    --ink-soft:  #9FB3A8;
    --forest:    #4C9A75;
    --forest-2:  #6FBF95;
    --forest-lt: #6FBF95;
    --white:     #0B1712;
    --line:      rgba(234,241,236,0.16);
    --line-soft: rgba(234,241,236,0.08);
    --focus:     #6FBF95;
  }
}
:root[data-theme="dark"]{
  --bg:        #0B1712;
  --bg-raised: #12211A;
  --bg-sunk:   #0E1B15;
  --ink:       #EAF1EC;
  --ink-soft:  #9FB3A8;
  --forest:    #4C9A75;
  --forest-2:  #6FBF95;
  --forest-lt: #6FBF95;
  --white:     #0B1712;
  --line:      rgba(234,241,236,0.16);
  --line-soft: rgba(234,241,236,0.08);
  --focus:     #6FBF95;
}

*{box-sizing:border-box;}
html{overflow-x:hidden;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.01em;
  margin:0;
  text-wrap:balance;
  color:var(--ink);
}
p{margin:0; color:var(--ink-soft);}
a{color:inherit;}
img,svg{max-width:100%;}
::selection{background:var(--forest); color:#fff;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--focus); outline-offset:3px;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--forest-lt);
  font-weight:500;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media (max-width:720px){ .wrap{padding:0 20px;} }

/* ---------- top utility bar ---------- */
.util-bar{
  background:var(--forest); color:#fff; font-size:0.78rem;
}
.util-bar .wrap{
  display:flex; justify-content:space-between; align-items:center; padding:8px 32px; gap:16px; flex-wrap:wrap;
}
.util-bar a{color:#fff; text-decoration:none; opacity:0.92;}
.util-bar a:hover{opacity:1; text-decoration:underline;}
.util-bar .util-links{display:flex; gap:20px; flex-wrap:wrap;}

/* ---------- nav ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px; max-width:1180px; margin:0 auto; gap:24px;
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none;}
.brand svg{width:36px; height:36px; flex:none;}
.brand-word{
  font-family:var(--font-display); font-weight:700; font-size:1.16rem;
  letter-spacing:-0.01em; color:var(--ink); white-space:nowrap; line-height:1.1;
}
.brand-sub{
  display:block; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.1em;
  color:var(--ink-soft); text-transform:uppercase; font-weight:500;
}
nav.links{display:flex; gap:26px; align-items:center;}
nav.links a{
  font-size:0.87rem; font-weight:500; text-decoration:none; color:var(--ink-soft);
  transition:color .15s ease;
}
nav.links a:hover, nav.links a[aria-current="page"]{color:var(--forest);}
:root:not([data-theme="light"]) nav.links a:hover, :root:not([data-theme="light"]) nav.links a[aria-current="page"]{color:var(--forest-2);}
:root[data-theme="dark"] nav.links a:hover, :root[data-theme="dark"] nav.links a[aria-current="page"]{color:var(--forest-2);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:0.86rem;
  padding:11px 22px; border-radius:2px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
}
.btn-primary{background:var(--forest); color:#fff;}
.btn-primary:hover{background:var(--forest-2);}
:root:not([data-theme="light"]) .btn-primary{color:#08130E;}
:root[data-theme="dark"] .btn-primary{color:#08130E;}
.btn-ghost{border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--forest); color:var(--forest);}
.nav-mobile-hide{display:flex;}
@media (max-width:900px){ .nav-mobile-hide{display:none;} }

/* ---------- page header (non-home pages) ---------- */
.page-header{
  border-bottom:1px solid var(--line-soft);
  padding:52px 0 38px;
  background:var(--bg-raised);
}
.page-header h1{font-size:clamp(2rem, 4.4vw, 3rem);}
.page-header p.lead{margin-top:16px; font-size:1.04rem; max-width:62ch; line-height:1.6;}
.breadcrumb{
  font-family:var(--font-mono); font-size:0.76rem; color:var(--ink-soft);
  margin-bottom:18px;
}
.breadcrumb a{color:var(--ink-soft); text-decoration:none;}
.breadcrumb a:hover{color:var(--forest);}

/* ---------- hero (home) ---------- */
.hero{position:relative; border-bottom:1px solid var(--line-soft); overflow:hidden;}
.hero-grid{
  max-width:1180px; margin:0 auto; padding:68px 32px 56px;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
  position:relative; z-index:2;
}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; padding:44px 20px 32px;} }
.hero h1{font-size:clamp(2.3rem, 5vw, 3.6rem);}
.hero h1 span{color:var(--forest-lt);}
.hero p.lead{font-size:1.08rem; line-height:1.6; max-width:48ch; margin-top:18px;}
.hero-ctas{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.hero-art svg{width:100%; height:auto; display:block;}
.blueprint-bg{position:absolute; inset:0; z-index:1; opacity:0.5; pointer-events:none;}
:root:not([data-theme="light"]) .blueprint-bg{opacity:0.18;}
:root[data-theme="dark"] .blueprint-bg{opacity:0.18;}
.trust-row{
  display:flex; gap:26px; flex-wrap:wrap; margin-top:32px; padding-top:22px;
  border-top:1px solid var(--line-soft);
}
.trust-item{font-size:0.82rem; color:var(--ink-soft); display:flex; align-items:center; gap:8px;}
.trust-item svg{width:15px; height:15px; color:var(--forest); flex:none;}

/* ---------- stats strip ---------- */
.stats{border-bottom:1px solid var(--line-soft); background:var(--forest); color:#fff;}
.stats-grid{max-width:1180px; margin:0 auto; padding:28px 32px; display:grid; grid-template-columns:repeat(4,1fr);}
@media (max-width:720px){ .stats-grid{grid-template-columns:repeat(2,1fr); gap:22px 0;} }
.stat{padding:0 24px; border-left:1px solid rgba(255,255,255,0.18);}
.stat:first-child{border-left:none;}
@media (max-width:720px){ .stat{border-left:1px solid rgba(255,255,255,0.18);} .stat:nth-child(odd){border-left:none;} }
.stat .num{font-family:var(--font-mono); font-size:1.5rem; font-weight:600; color:#fff; font-variant-numeric:tabular-nums;}
.stat .lbl{font-size:0.78rem; color:rgba(255,255,255,0.78); margin-top:4px;}

/* ---------- section shell ---------- */
section{padding:78px 0;}
@media (max-width:720px){ section{padding:50px 0;} }
.section-head{max-width:660px; margin-bottom:44px;}
.section-head h2{font-size:clamp(1.7rem, 3.2vw, 2.3rem); margin-top:10px;}
.section-head p{margin-top:14px; font-size:1rem; line-height:1.6;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-raised{background:var(--bg-raised);}

/* ---------- capability / service cards ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
@media (max-width:900px){ .services-grid{grid-template-columns:1fr 1fr;} }
/* Three cards must not leave an empty fourth cell at tablet widths. */
.services-grid:has(> .service:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:760px){
  .services-grid:has(> .service:nth-child(3):last-child){grid-template-columns:minmax(0,1fr);}
}
@media (max-width:560px){ .services-grid{grid-template-columns:1fr;} }
.service{background:var(--bg); padding:30px 26px; display:flex; flex-direction:column; gap:12px;}
.service svg{width:30px; height:30px; color:var(--forest);}
.service h3{font-size:1.1rem; font-weight:600;}
.service p{font-size:0.92rem; line-height:1.55;}
.service .more{margin-top:6px; font-size:0.82rem; font-weight:600; color:var(--forest); text-decoration:none;}
.service .more:hover{text-decoration:underline;}

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr; row-gap:36px;} }
@media (max-width:520px){ .steps{grid-template-columns:1fr;} }
.step{position:relative; padding-top:20px;}
.step .idx{font-family:var(--font-mono); font-size:0.78rem; color:var(--forest); letter-spacing:0.06em; font-weight:500;}
.step h3{font-size:1.08rem; font-weight:600; margin-top:10px;}
.step p{font-size:0.9rem; line-height:1.55; margin-top:8px;}
.step-bar{height:2px; background:var(--line-soft); width:100%; position:relative; margin-bottom:2px;}
.step-bar::before{content:""; position:absolute; left:0; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--forest);}

/* ---------- tags / chips ---------- */
.chip-row{display:flex; flex-wrap:wrap; gap:10px;}
.chip{
  font-family:var(--font-mono); font-size:0.8rem; padding:8px 15px;
  border:1px solid var(--line); border-radius:999px; color:var(--ink-soft);
}

/* ---------- data table ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:4px;}
table{width:100%; border-collapse:collapse; font-size:0.92rem; min-width:560px;}
thead th{
  text-align:left; font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--ink-soft); padding:12px 16px; background:var(--bg-raised);
  border-bottom:1px solid var(--line);
}
tbody td{padding:12px 16px; border-bottom:1px solid var(--line-soft); color:var(--ink);}
tbody tr:last-child td{border-bottom:none;}
tbody td.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}

/* ---------- industry grid ---------- */
.industry-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);}
@media (max-width:900px){ .industry-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .industry-grid{grid-template-columns:repeat(2,1fr);} }
.industry{background:var(--bg); padding:26px 16px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;}
.industry svg{width:28px; height:28px; color:var(--forest);}
.industry span{font-size:0.84rem; font-weight:600;}

/* ---------- project / case cards ---------- */
.project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:900px){ .project-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .project-grid{grid-template-columns:1fr;} }
.project-card{border:1px solid var(--line); background:var(--bg-raised); border-radius:4px; overflow:hidden;}
.project-card svg{width:100%; height:auto; display:block; border-bottom:1px solid var(--line);}
.project-meta{padding:18px 20px;}
.project-meta .tagline{
  font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--forest-lt); font-weight:600;
}
.project-meta .name{font-weight:700; font-size:1rem; margin-top:6px;}
.project-meta .spec{font-family:var(--font-mono); font-size:0.76rem; color:var(--ink-soft); margin-top:8px;}
.placeholder-note{
  font-size:0.82rem; color:var(--ink-soft); margin-top:22px; font-style:italic;
}

/* ---------- two-col ---------- */
.two-col{display:grid; grid-template-columns:0.95fr 1.05fr; gap:56px; align-items:start;}
@media (max-width:900px){ .two-col{grid-template-columns:1fr; gap:32px;} }
.two-col p{margin-top:16px; font-size:1.02rem; line-height:1.7;}
.two-col p:first-of-type{margin-top:10px;}
.figure-box{border:1px solid var(--line); border-radius:4px; background:var(--bg-raised); padding:28px;}
.figure-box svg{width:100%; height:auto;}

/* value list */
.value-list{display:grid; grid-template-columns:repeat(2,1fr); gap:20px 32px; margin-top:24px;}
@media (max-width:640px){ .value-list{grid-template-columns:1fr;} }
.value-item{display:flex; gap:14px;}
.value-item svg{width:22px; height:22px; color:var(--forest); flex:none; margin-top:2px;}
.value-item h4{font-size:0.98rem; font-weight:600; color:var(--ink);}
.value-item p{font-size:0.88rem; margin-top:4px; line-height:1.5;}

/* ---------- CTA banner ---------- */
.cta-banner{background:var(--forest); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.cta-banner .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:44px 32px;}
.cta-banner h2{color:#fff; font-size:clamp(1.5rem,3vw,2rem);}
.cta-banner p{color:rgba(255,255,255,0.82); margin-top:6px;}
.cta-banner .btn-primary{background:#fff; color:var(--forest);}
.cta-banner .btn-primary:hover{background:rgba(255,255,255,0.88);}

/* ---------- contact / forms ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr; gap:36px;} }
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}
.field label{font-size:0.78rem; font-weight:600; letter-spacing:0.02em; color:var(--ink-soft); text-transform:uppercase;}
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:0.95rem; padding:11px 13px;
  border:1px solid var(--line); border-radius:2px; background:var(--bg); color:var(--ink);
}
.field textarea{resize:vertical; min-height:96px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:480px){ .field-row{grid-template-columns:1fr;} }
.contact-info dl{display:grid; grid-template-columns:auto 1fr; gap:12px 16px; margin-top:22px;}
.contact-info dt{font-family:var(--font-mono); font-size:0.74rem; color:var(--forest-lt); text-transform:uppercase; letter-spacing:0.05em; padding-top:2px; font-weight:600;}
.contact-info dd{margin:0; font-size:0.96rem;}
.contact-info dd.placeholder{color:var(--ink-soft); font-style:italic;}

footer.site{border-top:1px solid var(--line-soft); padding:44px 0 26px; background:var(--bg-raised);}
.footer-grid{display:flex; flex-wrap:wrap; gap:36px 32px; justify-content:space-between;}
.footer-col{flex:1 1 150px; min-width:150px;}
.footer-col.brand-col{flex:2 1 260px; min-width:220px;}
.footer-col h4{font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-soft); margin-bottom:12px;}
.footer-col a{display:block; font-size:0.87rem; text-decoration:none; color:var(--ink); padding:4px 0;}
.footer-col a:hover{color:var(--forest);}
.footer-col p.addr{font-size:0.86rem; line-height:1.6; font-style:italic; color:var(--ink-soft);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:32px; padding-top:20px; border-top:1px solid var(--line-soft);
}
.footer-bottom small{color:var(--ink-soft); font-size:0.8rem;}

@media (prefers-reduced-motion:no-preference){ .reveal{animation:rise .6s ease both;} }
@keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}