:root{
    --ink:#10141b;
    --panel:#171c25;
    --panel-2:#1e2530;
    --line: rgba(255,255,255,0.09);
    --line-soft: rgba(16,20,27,0.10);
    --paper:#eef0ee;
    --paper-2:#e3e6e2;
    --text:#12151a;
    --text-dim:#5b6470;
    --text-inv:#f3f4f2;
    --text-inv-dim:#a7aeb8;
    --teal:#18b6a6;
    --teal-dim:#0e8a7e;
    --mech:#5b8def;
    --elec:#f2b705;
    --plumb:#18b6a6;
    --fire:#e4572e;
    --radius:2px;
    --maxw:1240px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--paper); color:var(--text);
    font-family:'Inter',sans-serif; font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{ font-family:'Space Grotesk',sans-serif; font-weight:600; line-height:1.08; margin:0; letter-spacing:-0.01em;}
  p{margin:0;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  section{position:relative;}
  .eyebrow{
    font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--teal-dim); display:flex; align-items:center; gap:10px; margin-bottom:18px; font-weight:500;
  }
  .eyebrow::before{content:""; width:24px; height:1px; background:var(--teal-dim);}
  .on-dark .eyebrow{color:var(--teal);}
  .on-dark .eyebrow::before{background:var(--teal);}

  /* discipline legend chip system — signature element */
  .legend{ display:flex; gap:6px; flex-wrap:wrap; }
  .chip{
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.06em; font-weight:500;
    padding:4px 9px 4px 8px; border-radius:20px; display:inline-flex; align-items:center; gap:6px;
    border:1px solid var(--line-soft); color:var(--text-dim);
  }
  .on-dark .chip{ border-color:var(--line); color:var(--text-inv-dim); }
  .chip .dot{width:7px; height:7px; border-radius:50%; flex:none;}
  .chip.m .dot{background:var(--mech);} .chip.e .dot{background:var(--elec);}
  .chip.p .dot{background:var(--plumb);} .chip.f .dot{background:var(--fire);}

  /* header */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(16,20,27,0.72); backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.06);
    transition:background .3s;
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:var(--maxw); margin:0 auto;}
  .logo{ display:flex; align-items:center; }
  .logo-img{ height:52px; width:auto; display:block; }
  nav.links{ display:flex; gap:34px; }
  nav.links a{ font-size:14.5px; color:var(--text-inv-dim); font-weight:500; transition:color .2s;}
  nav.links a:hover{color:var(--text-inv);}
  .nav-cta{
    font-size:14px; font-weight:600; color:var(--ink); background:var(--teal);
    padding:10px 20px; border-radius:2px; transition:background .2s, transform .2s;
    white-space:nowrap;
  }
  .nav-cta:hover{ background:#20cdbb; transform:translateY(-1px);}
  .burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
  .burger span{width:22px; height:2px; background:var(--text-inv);}
  .mobile-menu{display:none;}

  /* hero */
  .hero{
    min-height:100vh; display:flex; align-items:flex-end; position:relative;
    background:var(--ink); overflow:hidden;
  }
  .hero-bg{ position:absolute; inset:0; }
  .hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:0.55; }
  .hero-bg::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(16,20,27,0.35) 0%, rgba(16,20,27,0.55) 45%, rgba(16,20,27,0.97) 92%),
                linear-gradient(90deg, rgba(16,20,27,0.9) 0%, rgba(16,20,27,0.15) 55%);
  }
  .hero-content{ position:relative; z-index:2; padding:180px 0 76px; width:100%;}
  .hero-tags{ display:flex; gap:8px; margin-bottom:26px; flex-wrap:wrap;}
  .hero-tag{
    font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.06em; color:var(--text-inv-dim);
    border:1px solid var(--line); padding:5px 12px; border-radius:20px;
  }
  .hero h1{
    font-size:clamp(38px, 5.6vw, 74px); color:var(--text-inv); max-width:16ch; margin-bottom:26px;
  }
  .hero h1 em{ font-style:normal; color:var(--teal); }
  .hero-sub{ font-size:18px; color:var(--text-inv-dim); max-width:46ch; margin-bottom:38px; }
  .cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:64px; }
  .btn{
    font-size:15px; font-weight:600; padding:14px 26px; border-radius:2px; display:inline-flex; align-items:center; gap:10px;
    transition:transform .2s, background .2s, border-color .2s;
  }
  .btn-primary{ background:var(--teal); color:var(--ink); }
  .btn-primary:hover{ background:#20cdbb; transform:translateY(-2px); }
  .btn-ghost{ border:1px solid var(--line); color:var(--text-inv); }
  .btn-ghost:hover{ border-color:var(--text-inv-dim); transform:translateY(-2px); }

  .hero-stats{
    display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); padding-top:28px; gap:24px;
  }
  .stat-num{ font-family:'Space Grotesk',sans-serif; font-size:28px; color:var(--text-inv); font-weight:600; }
  .stat-label{ font-size:12.5px; color:var(--text-inv-dim); margin-top:4px; }

  /* sections generic */
  .section{ padding:110px 0; }
  .section.tight{padding:90px 0;}
  .on-dark{ background:var(--panel); color:var(--text-inv); }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap;}
  .section-head h2{ font-size:clamp(28px,3.4vw,42px); max-width:16ch; }
  .section-head .desc{ max-width:38ch; color:var(--text-dim); font-size:15.5px; }
  .on-dark .section-head .desc{ color:var(--text-inv-dim); }

  /* services grid */
  .svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);}
  .svc-card{ background:var(--paper); padding:34px 30px; border-left:3px solid transparent; transition:background .2s;}
  .svc-card:hover{ background:var(--paper-2); }
  .svc-card.m{border-left-color:var(--mech);} .svc-card.e{border-left-color:var(--elec);}
  .svc-card.p{border-left-color:var(--plumb);} .svc-card.f{border-left-color:var(--fire);}
  .svc-card h3{ font-size:19px; margin:14px 0 10px; }
  .svc-card p{ font-size:14.5px; color:var(--text-dim); }
  .svc-tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-dim); letter-spacing:0.08em;}

  /* approach / process */
  .approach-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:10px;}
  .ap-card{ padding-top:18px; border-top:1px solid var(--line);}
  .ap-card .chip{margin-bottom:18px;}
  .ap-card h4{ font-size:18px; color:var(--text-inv); margin-bottom:10px;}
  .ap-card p{ font-size:14px; color:var(--text-inv-dim); }

  /* toolchain strip */
  .tool-strip{ display:flex; gap:14px; flex-wrap:wrap; padding:26px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
  .tool-pill{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:7px 14px; border:1px solid var(--line-soft); border-radius:20px; color:var(--text-dim);}

  /* gallery */
  .gallery{ display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:auto auto; gap:18px; }
  .gallery figure{ margin:0; position:relative; overflow:hidden; border-radius:2px; background:var(--panel-2);}
  .gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
  .gallery figure:hover img{ transform:scale(1.045); }
  .g-cap{ position:absolute; left:0; right:0; bottom:0; padding:18px 20px; background:linear-gradient(0deg, rgba(16,20,27,0.88), rgba(16,20,27,0)); }
  .g-cap .name{ color:#fff; font-size:14.5px; font-weight:600; font-family:'Space Grotesk',sans-serif;}
  .g-cap .sub{ color:var(--text-inv-dim); font-size:12px; margin-top:2px;}
  .g-tall{ grid-row: span 2; aspect-ratio:3/4; }
  .g-wide{ aspect-ratio:16/10; }

  /* industries */
  .ind-list{ display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line-soft); }
  .ind-item{ padding:26px 6px 26px 0; border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft);}
  .ind-item:last-child{border-right:none;}
  .ind-item .n{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-dim);}
  .ind-item h4{ font-size:16.5px; margin-top:10px;}

  /* why grid */
  .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
  .why-card{ background:var(--panel); padding:32px 28px; }
  .why-card h4{ color:var(--text-inv); font-size:17px; margin:14px 0 8px;}
  .why-card p{ color:var(--text-inv-dim); font-size:14px; }
  .why-num{ font-family:'IBM Plex Mono',monospace; color:var(--teal); font-size:13px; }

  /* faq */
  .faq-item{ border-bottom:1px solid var(--line-soft); }
  .faq-q{ display:flex; justify-content:space-between; align-items:center; padding:24px 0; cursor:pointer; gap:20px;}
  .faq-q h4{ font-size:16.5px; font-weight:500; }
  .faq-plus{ font-family:'IBM Plex Mono',monospace; font-size:20px; color:var(--teal-dim); transition:transform .25s; flex:none;}
  .faq-item.open .faq-plus{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease;}
  .faq-a p{ padding-bottom:24px; color:var(--text-dim); font-size:14.5px; max-width:60ch;}

  /* cta banner */
  .cta-banner{ background:var(--ink); position:relative; overflow:hidden; }
  .cta-banner .wrap{ padding:100px 32px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:26px;}
  .cta-banner h2{ color:var(--text-inv); font-size:clamp(28px,4vw,46px); max-width:20ch;}
  .cta-banner .eyebrow{justify-content:center;}

  /* footer */
  footer{ background:var(--ink); border-top:1px solid var(--line); padding:64px 0 28px; }
  .foot-grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; padding-bottom:48px;}
  .foot-logo-img{ height:72px; width:auto; margin-bottom:16px; display:block; }
  .foot-desc{ color:var(--text-inv-dim); font-size:14px; max-width:32ch; margin-bottom:22px;}
  .foot-col h5{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-inv-dim); margin-bottom:16px;}
  .foot-col a{ display:block; color:var(--text-inv-dim); font-size:14px; margin-bottom:11px; transition:color .2s;}
  .foot-col a:hover{ color:var(--teal); }
  .foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--line); color:var(--text-inv-dim); font-size:12.5px; flex-wrap:wrap; gap:12px;}

  /* reveal animation */
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{ opacity:1; transform:translateY(0); }

  @media (max-width: 980px){
    nav.links, .nav-cta{ display:none; }
    .burger{ display:flex; }
    .mobile-menu.open{ display:flex; }
    .mobile-menu{
      flex-direction:column; position:fixed; top:64px; left:0; right:0; bottom:0; background:var(--ink);
      padding:30px 32px; gap:6px; z-index:99; overflow-y:auto;
    }
    .mobile-menu a{ color:var(--text-inv); font-size:20px; padding:14px 0; border-bottom:1px solid var(--line); font-family:'Space Grotesk',sans-serif;}
    .mobile-menu .btn{ margin-top:20px; justify-content:center;}
    .hero-stats{ grid-template-columns:repeat(2,1fr); row-gap:26px;}
    .svc-grid{ grid-template-columns:repeat(2,1fr); }
    .approach-grid{ grid-template-columns:repeat(2,1fr); row-gap:36px;}
    .gallery{ grid-template-columns:1fr; }
    .g-tall{ aspect-ratio:16/10; grid-row:auto;}
    .ind-list{ grid-template-columns:repeat(2,1fr); }
    .why-grid{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr 1fr; row-gap:36px;}
  }
  @media (max-width:600px){
    .wrap{padding:0 20px;}
    .nav{padding:16px 20px;}
    .svc-grid{ grid-template-columns:1fr; }
    .ind-list{ grid-template-columns:1fr; }
    .hero-content{padding:150px 0 56px;}
    .section{padding:76px 0;}
    .foot-grid{grid-template-columns:1fr;}
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1; transform:none; transition:none;}
    .gallery img{transition:none;}
  }
/* ---------- multi-page additions ---------- */
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--panel-2); border:1px solid var(--line); border-radius:2px; padding:10px;
  min-width:230px; opacity:0; visibility:hidden; transition:opacity .18s, transform .18s;
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
}
.has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown a{ display:block; padding:9px 12px; font-size:13.5px; color:var(--text-inv-dim); border-radius:2px; }
.dropdown a:hover{ background:rgba(255,255,255,0.06); color:var(--text-inv); }
.dropdown .drop-all{ border-top:1px solid var(--line); margin-top:6px; padding-top:12px; color:var(--teal); font-weight:600; }

.mob-group{ width:100%; }
.mob-group-label{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); font-size:20px; font-family:'Space Grotesk',sans-serif; color:var(--text-inv); cursor:pointer;}
.mob-sub{ max-height:0; overflow:hidden; transition:max-height .3s ease; padding-left:14px;}
.mob-sub a{ font-size:15px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.05); color:var(--text-inv-dim);}
.mob-group.open .mob-sub{ max-height:600px; }
.mob-group.open .mob-group-label .faq-plus{ transform:rotate(45deg); }

/* interior page hero */
.page-hero{ background:var(--ink); padding:150px 0 64px; position:relative; overflow:hidden;}
.page-hero .wrap{ position:relative; z-index:2; }
.breadcrumb{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-inv-dim); margin-bottom:22px; display:flex; gap:8px; align-items:center;}
.breadcrumb a{ color:var(--text-inv-dim); } .breadcrumb a:hover{ color:var(--teal); }
.page-hero h1{ color:var(--text-inv); font-size:clamp(32px,5vw,56px); max-width:20ch; margin-bottom:18px;}
.page-hero .sub{ color:var(--text-inv-dim); font-size:17px; max-width:56ch; }
.page-hero-img{ position:absolute; inset:0; z-index:1; }
.page-hero-img img{ width:100%; height:100%; object-fit:cover; opacity:0.28;}
.page-hero-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,20,27,0.55), rgba(16,20,27,0.98)); }

/* two-col content blocks */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.split h2{ margin-bottom:18px; }
.split p{ color:var(--text-dim); font-size:15.5px; margin-bottom:14px; }
.on-dark .split p{ color:var(--text-inv-dim); }
.check-list{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:12px;}
.check-list li{ display:flex; gap:12px; font-size:15px; color:var(--text-dim); align-items:flex-start;}
.on-dark .check-list li{ color:var(--text-inv-dim); }
.check-list li::before{ content:"—"; color:var(--teal); flex:none; font-weight:600;}

/* workflow steps (vertical) */
.steps{ display:flex; flex-direction:column; }
.step{ display:grid; grid-template-columns:70px 1fr; gap:20px; padding:26px 0; border-top:1px solid var(--line-soft);}
.on-dark .step{ border-color:var(--line); }
.step:last-child{ border-bottom:1px solid var(--line-soft); }
.on-dark .step:last-child{ border-color:var(--line); }
.step-n{ font-family:'IBM Plex Mono',monospace; color:var(--teal-dim); font-size:14px; }
.on-dark .step-n{ color:var(--teal); }
.step h4{ font-size:17px; margin-bottom:6px; }
.step p{ font-size:14.5px; color:var(--text-dim); }
.on-dark .step p{ color:var(--text-inv-dim); }

/* deliverables / software pill grid */
.pill-grid{ display:flex; flex-wrap:wrap; gap:10px; }

/* related grid (services/industries cross links) */
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);}
.related-card{ background:var(--paper); padding:26px 24px; transition:background .2s;}
.related-card:hover{ background:var(--paper-2); }
.related-card .tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-dim); letter-spacing:0.06em;}
.related-card h4{ font-size:16.5px; margin:10px 0 8px;}
.related-card p{ font-size:13.5px; color:var(--text-dim); margin-bottom:12px;}
.related-card .go{ font-size:13px; font-weight:600; color:var(--teal-dim); }

/* services/industries hub index grid */
.hub-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);}
.hub-card{ background:var(--paper); padding:32px 30px; display:flex; flex-direction:column; gap:10px; border-left:3px solid transparent; transition:background .2s;}
.hub-card:hover{ background:var(--paper-2); }
.hub-card.m{border-left-color:var(--mech);} .hub-card.e{border-left-color:var(--elec);}
.hub-card.p{border-left-color:var(--plumb);} .hub-card.f{border-left-color:var(--fire);}
.hub-card h3{ font-size:20px; }
.hub-card p{ font-size:14.5px; color:var(--text-dim); }
.hub-card .go{ font-size:13.5px; font-weight:600; color:var(--teal-dim); margin-top:6px;}

/* contact page */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.form-field label{ font-size:13px; font-family:'IBM Plex Mono',monospace; color:var(--text-inv-dim); letter-spacing:0.04em;}
.form-field input, .form-field select, .form-field textarea{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text-inv); padding:13px 14px; border-radius:2px;
  font-family:'Inter',sans-serif; font-size:14.5px;
}
.form-field textarea{ resize:vertical; min-height:120px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:1px solid var(--teal); border-color:var(--teal); }
.office-block{ padding:22px 0; border-top:1px solid var(--line); }
.office-block h5{ color:var(--text-inv); font-size:15.5px; margin-bottom:8px; }
.office-block p{ color:var(--text-inv-dim); font-size:14px; }

@media (max-width:980px){
  .split{ grid-template-columns:1fr; gap:32px; }
  .related-grid, .hub-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:40px;}
  .step{ grid-template-columns:50px 1fr; }
}