/* ============================================================
   WORKLAB DIGITAL — SHARED DESIGN SYSTEM
   Ink    #14181C  primary dark surface
   Paper  #EFE9DC  primary light surface
   Brass  #B9812F  primary accent (workbench brass)
   Steel  #3E5C76  secondary accent
   Used by every page. Page-specific rules live in a small
   <style> block inside each HTML file.
   ============================================================ */
:root{
  --ink:#14181C; --ink-soft:#1D2227;
  --paper:#EFE9DC; --paper-soft:#E4DDCB;
  --brass:#B9812F; --brass-bright:#D6A24C;
  --steel:#3E5C76; --rust:#8A5A3B;
  --line:rgba(20,24,28,0.12); --line-on-ink:rgba(239,233,220,0.14);
  --muted:#6B6558; --muted-on-ink:#9BA3A9;
  --radius:3px; --max:1180px; --pad:clamp(20px,5vw,64px);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--sans); margin:0; font-weight:600; letter-spacing:-0.02em; }
.container{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
button{ font-family:inherit; cursor:pointer; }

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--brass); display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:""; width:16px; height:1px; background:var(--brass); display:inline-block; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:2px;
  font-size:14.5px; font-weight:600; letter-spacing:0.01em; border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--brass); color:var(--ink); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-on-ink.btn-primary{ background:var(--brass); color:var(--ink); }
.btn-on-ink.btn-primary:hover{ background:var(--brass-bright); }
.btn-on-ink.btn-ghost{ color:var(--paper); border-color:var(--line-on-ink); }
.btn-on-ink.btn-ghost:hover{ border-color:var(--paper); }

/* ============================================================
   NAV
   ============================================================ */
header.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(239,233,220,0.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px; }
.logo{ font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:0.03em; display:flex; align-items:center; gap:8px; }
.logo .mark{ width:9px; height:9px; background:var(--brass); display:inline-block; transform:rotate(45deg); }
nav.links{ display:flex; gap:34px; align-items:center; }
nav.links a{ font-size:14px; font-weight:500; color:var(--ink); position:relative; padding-bottom:2px; }
nav.links a.active{ color:var(--brass); }
nav.links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
nav.links a:hover::after, nav.links a.active::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:28px; }
.burger{ display:none; background:none; border:none; padding:11px; margin:-11px; }
.burger span{ display:block; width:22px; height:1.5px; background:var(--ink); margin:5px 0; }

@media (max-width:860px){
  nav.links{
    position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:min(78vw,320px);
    background:var(--ink); color:var(--paper);
    flex-direction:column; justify-content:center; align-items:flex-start;
    padding:0 40px; gap:26px; transform:translateX(100%); transition:transform .32s ease;
  }
  nav.links.open{ transform:translateX(0); }
  nav.links a{ color:var(--paper); font-size:20px; }
  nav.links a::after{ background:var(--brass-bright); }
  .nav-cta .btn-primary{ display:none; }
  .burger{ display:block; }
}
@media (max-width:380px){
  .logo{ font-size:12.5px; }
  .nav-inner{ padding-top:14px; padding-bottom:14px; }
}
.fab{ position:fixed; right:18px; bottom:18px; z-index:120; display:none; }
@media (max-width:860px){ .fab{ display:inline-flex; box-shadow:0 8px 24px rgba(0,0,0,0.25); } }

/* ============================================================
   PAGE HERO (secondary pages — smaller than homepage hero)
   ============================================================ */
.page-hero{ background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.page-hero-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line-on-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-on-ink) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 75% 30%, black 0%, transparent 70%);
  mask-image:radial-gradient(circle at 75% 30%, black 0%, transparent 70%);
  opacity:.9;
}
.page-hero-inner{ position:relative; z-index:2; padding:min(11vh,110px) 0 min(8vh,80px); max-width:760px; }
.page-hero h1{ font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.08; margin:18px 0 20px; color:var(--paper); }
.page-hero p.lead{ font-size:clamp(1rem,1.5vw,1.12rem); color:var(--muted-on-ink); max-width:560px; margin:0 0 30px; }
.page-hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
@media (max-width:480px){ .page-hero-ctas{ flex-direction:column; align-items:stretch; } .page-hero-ctas .btn{ justify-content:center; } }

@keyframes drift{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(18px,-22px); } }
@media (prefers-reduced-motion:reduce){ .hero-node{ animation:none !important; } }

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
section{ padding:min(11vh,110px) 0; }
@media (max-width:480px){ section{ padding:64px 0; } }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin-top:14px; max-width:560px; }
.on-ink{ background:var(--ink); color:var(--paper); }
.on-ink .muted{ color:var(--muted-on-ink); }
.muted{ color:var(--muted); }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* ============================================================
   REUSABLE: numbered step list
   ============================================================ */
.step-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:980px){ .step-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .step-grid{ grid-template-columns:1fr; } }
.step-card{ background:var(--paper); padding:32px 26px; position:relative; }
.step-card .step-num{ font-family:var(--mono); font-size:12px; color:var(--brass); letter-spacing:.08em; }
.step-card h3{ font-size:1.05rem; margin:14px 0 10px; }
.step-card p{ color:var(--muted); font-size:14px; margin:0; }

/* ============================================================
   REUSABLE: tagged workbench cards (capability / service cards)
   ============================================================ */
.tag-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:980px){ .tag-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tag-grid{ grid-template-columns:1fr; } }
.tag-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .tag-grid.cols-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tag-grid.cols-3{ grid-template-columns:1fr; } }

.tag-card{ background:var(--paper); padding:36px 28px 30px; position:relative; min-height:230px; display:flex; flex-direction:column; transition:background .25s ease; }
.tag-card:hover{ background:var(--paper-soft); }
.tag-label{
  position:absolute; top:0; right:22px; background:var(--brass); color:var(--ink);
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:5px 9px 6px; transform:rotate(3deg); box-shadow:0 3px 6px rgba(0,0,0,0.18);
}
.tag-label::after{ content:""; position:absolute; left:50%; top:100%; width:1px; height:9px; background:var(--ink); opacity:.35; transform:translateX(-50%); }
.tag-card h3{ font-size:1.1rem; margin-top:26px; }
.tag-card p{ color:var(--muted); font-size:14.5px; margin:14px 0 20px; flex-grow:1; }
.tag-card .more{ font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ink); display:inline-flex; gap:6px; align-items:center; }
.tag-card .more::after{ content:"→"; transition:transform .2s ease; }
.tag-card:hover .more::after{ transform:translateX(4px); }

/* ============================================================
   REUSABLE: 4-up plain stat/why grid (on-ink)
   ============================================================ */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; }
@media (max-width:980px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }
.why-item .idx{ font-family:var(--mono); font-size:12px; color:var(--muted-on-ink); letter-spacing:.08em; }
.why-item h3{ font-size:1.05rem; margin:10px 0 10px; }
.why-item p{ font-size:14.5px; }
.on-ink .why-item h3{ color:var(--paper); }
body:not(.on-ink) .why-item h3{ color:var(--ink); }
.why-item p{ color:var(--muted); }
.on-ink .why-item p{ color:var(--muted-on-ink); }

/* ============================================================
   REUSABLE: card grid (industries / testimonials / resources)
   ============================================================ */
.card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .card-grid{ grid-template-columns:1fr; } }
.plain-card{ border:1px solid var(--line); background:#fff; padding:22px; border-radius:var(--radius); }
.on-ink .plain-card{ background:var(--ink-soft); border-color:var(--line-on-ink); }
.plain-card h3{ font-size:1rem; margin-bottom:8px; }
.plain-card p{ font-size:13.5px; color:var(--muted); margin:0; }
.on-ink .plain-card p{ color:var(--muted-on-ink); }

/* ============================================================
   REUSABLE: pill / filter buttons
   ============================================================ */
.pill-row{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; padding:9px 16px;
  border:1px solid var(--line); border-radius:20px; background:transparent; color:var(--ink);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.pill:hover{ border-color:var(--ink); }
.pill.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ============================================================
   REUSABLE: FAQ accordion
   ============================================================ */
.faq-list{ border-top:1px solid var(--line); max-width:760px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:22px 0;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-size:15.5px; font-weight:600; color:var(--ink);
}
.faq-q .plus{ font-family:var(--mono); font-size:18px; color:var(--brass); transition:transform .2s ease; flex-shrink:0; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.open .faq-a{ max-height:240px; }
.faq-a p{ margin:0 0 20px; color:var(--muted); font-size:14.5px; max-width:640px; }

/* ============================================================
   REUSABLE: testimonial
   ============================================================ */
.testimonial{ border:1px solid var(--line-on-ink); background:var(--ink-soft); padding:28px; border-radius:var(--radius); }
.testimonial .stars{ color:var(--brass-bright); letter-spacing:2px; font-size:14px; margin-bottom:14px; }
.testimonial p.quote{ font-size:15px; line-height:1.6; margin:0 0 18px; }
.testimonial .author{ font-family:var(--mono); font-size:12px; color:var(--muted-on-ink); }

/* ============================================================
   REUSABLE: forms
   ============================================================ */
.form-panel{ background:var(--ink-soft); border:1px solid var(--line-on-ink); padding:32px; border-radius:var(--radius); }
@media (max-width:520px){ .form-panel{ padding:20px; } }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-panel label, .field-block label{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted-on-ink); margin-bottom:6px;
}
.form-panel input, .form-panel select, .form-panel textarea{
  width:100%; background:var(--ink); border:1px solid var(--line-on-ink); color:var(--paper);
  padding:12px 13px; font-family:var(--sans); border-radius:2px; font-size:16px;
}
@media (min-width:561px){ .form-panel input, .form-panel select, .form-panel textarea{ font-size:14.5px; } }
.form-panel input:focus, .form-panel select:focus, .form-panel textarea:focus{ outline:none; border-color:var(--brass); }
.form-panel textarea{ resize:vertical; min-height:90px; }
.field-block{ margin-bottom:14px; }
.checkbox-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin-bottom:6px; }
@media (max-width:560px){ .checkbox-grid{ grid-template-columns:1fr; } }
.checkbox-item{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--paper); }
.checkbox-item input{ width:16px; height:16px; accent-color:var(--brass); flex-shrink:0; }
.form-panel button[type="submit"]{
  width:100%; margin-top:6px; justify-content:center; background:var(--brass); color:var(--ink);
  border:none; padding:15px; font-weight:700; border-radius:2px; font-size:14.5px; display:flex; align-items:center; gap:10px;
}
.form-panel button[type="submit"]:hover{ background:var(--brass-bright); }
.form-note{ font-size:12.5px; color:var(--muted-on-ink); margin-top:12px; text-align:center; }
.form-status{ font-size:13.5px; margin-top:14px; display:none; padding:10px 12px; border-radius:2px; }
.form-status.ok{ display:block; background:rgba(182,143,50,0.16); color:var(--brass-bright); }
.form-status.err{ display:block; background:rgba(180,70,60,0.16); color:#e08e83; }

/* ============================================================
   REUSABLE: work / case-study cards
   ============================================================ */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
@media (max-width:980px){ .work-grid{ grid-template-columns:1fr; } }
@media (max-width:480px){ .work-grid{ gap:20px; } }
.work-card{ display:block; }
.work-thumb{ aspect-ratio:4/3; border-radius:var(--radius); position:relative; overflow:hidden; background:linear-gradient(135deg, var(--steel), var(--ink) 68%); }
.work-thumb::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line-on-ink) 1px, transparent 1px), linear-gradient(90deg, var(--line-on-ink) 1px, transparent 1px);
  background-size:34px 34px; opacity:.5;
}
.work-thumb .wnum{ position:absolute; bottom:16px; left:18px; font-family:var(--mono); color:var(--paper); font-size:12px; letter-spacing:.08em; opacity:.85; }
.work-meta{ margin-top:18px; }
.work-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); }
.work-card h3{ font-size:1.15rem; margin:8px 0 8px; }
.work-card p{ color:var(--muted); font-size:14px; margin:0 0 12px; }
.work-card .view{ font-family:var(--mono); font-size:12.5px; font-weight:600; display:inline-flex; gap:6px; }

/* ============================================================
   REUSABLE: insight / article rows + cards
   ============================================================ */
.insights-list{ border-top:1px solid var(--line); }
.insight-row{ display:flex; align-items:center; justify-content:space-between; padding:22px 0; border-bottom:1px solid var(--line); gap:20px; flex-wrap:wrap; }
@media (max-width:480px){ .insight-row{ flex-direction:column; align-items:flex-start; gap:8px; padding:18px 0; } }
.insight-row h3{ font-size:1.02rem; font-weight:600; }
.insight-row .read{ font-family:var(--mono); font-size:12.5px; color:var(--brass); white-space:nowrap; }
.insight-row:hover h3{ color:var(--brass); }

.article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
@media (max-width:980px){ .article-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .article-grid{ grid-template-columns:1fr; } }
.article-card{ display:block; }
.article-thumb{
  aspect-ratio:16/10; border-radius:var(--radius); position:relative; overflow:hidden; margin-bottom:16px;
  background:linear-gradient(135deg, var(--rust), var(--ink) 70%);
}
.article-thumb::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line-on-ink) 1px, transparent 1px), linear-gradient(90deg, var(--line-on-ink) 1px, transparent 1px);
  background-size:30px 30px; opacity:.4;
}
.article-meta-row{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.article-card h3{ font-size:1.05rem; margin-bottom:8px; line-height:1.3; }
.article-card p{ color:var(--muted); font-size:13.5px; margin:0; }
.article-card:hover h3{ color:var(--brass); }
.read-time{ font-family:var(--mono); font-size:11px; color:var(--muted); }
/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--ink); color:var(--muted-on-ink); border-top:1px solid var(--line-on-ink); }
.footer-inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding:70px 0 40px; }
@media (max-width:820px){ .footer-inner{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:520px){ .footer-inner{ grid-template-columns:1fr; gap:30px; padding:50px 0 30px; } .news-form{ flex-direction:column; } .news-form button{ padding:12px; } }
.footer-inner h4{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper); margin-bottom:16px; }
.footer-inner ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-inner a:hover{ color:var(--paper); }
.footer-logo{ font-family:var(--mono); color:var(--paper); font-size:15px; margin-bottom:14px; display:flex; gap:8px; align-items:center; }
.footer-logo .mark{ width:9px; height:9px; background:var(--brass); transform:rotate(45deg); display:inline-block; }
.footer-inner p.blurb{ font-size:13.5px; max-width:280px; line-height:1.6; }
.news-form{ display:flex; gap:8px; margin-top:6px; }
.news-form input{ flex:1; background:var(--ink-soft); border:1px solid var(--line-on-ink); color:var(--paper); padding:11px 12px; font-size:16px; border-radius:2px; }
@media (min-width:521px){ .news-form input{ font-size:13.5px; } }
.news-form button{ background:var(--brass); color:var(--ink); border:none; padding:0 16px; font-weight:700; border-radius:2px; font-size:13px; }
.news-form button:hover{ background:var(--brass-bright); }
.footer-bottom{ border-top:1px solid var(--line-on-ink); padding:22px 0; display:flex; justify-content:space-between; font-size:12.5px; flex-wrap:wrap; gap:10px; }
@media (max-width:480px){ .footer-bottom{ flex-direction:column; gap:6px; } }