/* ===========================================================
   3MH TECHNOLOGIES — DESIGN SYSTEM
   Palette: white / black / gray / blue (#2563EB) only.
   Type: Geist (display), Inter (body), Geist Mono (utility/labels)
=========================================================== */

:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-alt:#F5F6F8;
  --surface-raised:#FAFAFB;
  --ink:#0A0A0B;
  --ink-muted:#5B5F66;
  --ink-faint:#9096A0;
  --accent:#2563EB;
  --accent-hover:#1D4ED8;
  --accent-ink:#FFFFFF;
  --line:#E5E7EB;
  --line-strong:#D1D5DB;
  --danger:#DC2626;
  --shadow: 0 1px 2px rgba(10,10,11,0.04), 0 10px 30px rgba(10,10,11,0.06);
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1180px;
  --header-h:76px;
}
html[data-theme="dark"]{
  --bg:#0A0A0B;
  --surface:#131417;
  --surface-alt:#18191D;
  --surface-raised:#0F1013;
  --ink:#F4F5F6;
  --ink-muted:#9CA3AE;
  --ink-faint:#6B7178;
  --accent:#4C7DFF;
  --accent-hover:#6B93FF;
  --accent-ink:#0A0A0B;
  --line:#232529;
  --line-strong:#2C2F35;
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 10px 34px rgba(0,0,0,0.4);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .4s var(--ease), color .4s var(--ease);
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font:inherit; cursor:pointer;}
input,select,textarea{font:inherit; color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 32px;}

h1,h2,h3,h4{
  font-family:'Geist','Space Grotesk',sans-serif;
  letter-spacing:-0.02em; line-height:1.08; font-weight:600; color:var(--ink);
}
p{color:var(--ink-muted); line-height:1.7;}
.mono{font-family:'Geist Mono','IBM Plex Mono',monospace;}

.eyebrow{
  font-family:'Geist Mono',monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:14px; height:1px; background:var(--accent); display:inline-block;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:500; font-size:14.5px; padding:13px 24px; border-radius:100px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  white-space:nowrap;
}
.btn svg{width:14px; height:14px;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-hover); transform:translateY(-2px);}
.btn-dark{background:var(--ink); color:var(--bg);}
.btn-dark:hover{transform:translateY(-2px);}
.btn-ghost{background:transparent; border-color:var(--line-strong); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none !important;}

/* ---------- HEADER / NAV ---------- */
header.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
header.site-header.scrolled{border-bottom:1px solid var(--line);}
nav.navbar{display:flex; align-items:center; justify-content:space-between; height:var(--header-h);}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:22px; width:auto;}
.brand-name{font-family:'Geist',sans-serif; font-weight:600; font-size:15px; letter-spacing:-0.01em;}
.nav-links{display:flex; align-items:center; gap:34px;}
.nav-links a{
  font-size:14px; color:var(--ink-muted); font-weight:500; position:relative; padding:4px 0;
  transition:color .25s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after,
.nav-links a.active::after{transform:scaleX(1); transform-origin:left;}
.nav-links a.active{color:var(--ink);}
.nav-right{display:flex; align-items:center; gap:16px;}
.theme-toggle{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background:transparent;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.theme-toggle:hover{border-color:var(--ink); transform:rotate(18deg);}
.theme-toggle svg{width:16px; height:16px;}
.icon-sun{display:none;}
html[data-theme="dark"] .icon-moon{display:none;}
html[data-theme="dark"] .icon-sun{display:block;}
.nav-burger{
  display:none; width:38px; height:38px; border-radius:8px; border:1px solid var(--line-strong);
  background:transparent; align-items:center; justify-content:center; color:var(--ink);
}
.nav-burger svg{width:18px; height:18px;}
.mobile-panel{
  display:none; position:fixed; inset:var(--header-h) 0 0 0; background:var(--bg); z-index:99;
  padding:28px 32px; overflow-y:auto;
}
.mobile-panel.open{display:block;}
.mobile-panel a{display:block; font-size:20px; font-family:'Geist',sans-serif; font-weight:600; padding:16px 0; border-bottom:1px solid var(--line);}
.mobile-panel .btn{margin-top:24px;}

/* ---------- HERO (generic page header) ---------- */
.page-hero{padding:calc(var(--header-h) + 96px) 0 72px;}
.page-hero h1{font-size:clamp(32px,4.4vw,54px); max-width:760px;}
.page-hero p.lead{font-size:17px; max-width:560px; margin-top:20px;}
.page-hero .eyebrow{margin-bottom:20px;}
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-faint); margin-bottom:22px;}
.breadcrumb a{color:var(--ink-faint); transition:color .2s;}
.breadcrumb a:hover{color:var(--ink);}

/* ---------- SECTION SHELL ---------- */
section{padding:100px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px;}
.section-head h2{font-size:clamp(26px,3vw,36px); max-width:560px;}
.section-head p{max-width:360px; font-size:15px; padding-bottom:4px;}
.reveal-el{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal-el.in{opacity:1; transform:translateY(0);}
.divider{height:1px; background:var(--line); border:none;}

/* ---------- CARD GRIDS ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}

.tile{background:var(--surface); padding:36px 30px; transition:background .3s var(--ease);}
.tile:hover{background:var(--surface-alt);}
.tile-icon{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-alt); color:var(--ink); margin-bottom:20px;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
html[data-theme="dark"] .tile-icon{background:var(--surface);}
.tile:hover .tile-icon{background:var(--accent); color:#fff; transform:translateY(-3px);}
.tile-icon svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5;}
.tile h3{font-size:17.5px; margin-bottom:8px;}
.tile p{font-size:14.5px;}
.tile a.tile-link{font-size:13.5px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:6px; margin-top:14px;}
.tile a.tile-link svg{width:13px; height:13px; transition:transform .25s var(--ease);}
.tile a.tile-link:hover svg{transform:translateX(3px);}

/* ---------- SERVICE DETAIL BLOCKS ---------- */
.service-block{padding:88px 0; border-bottom:1px solid var(--line);}
.service-block:last-of-type{border-bottom:none;}
.service-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center;}
.service-grid.reverse .service-art{order:2;}
.service-art{
  aspect-ratio:1/0.82; border-radius:var(--radius-lg); border:1px solid var(--line);
  background:var(--surface-alt); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.service-art svg{width:78%; height:78%;}
.service-copy .eyebrow{margin-bottom:16px;}
.service-copy h2{font-size:clamp(24px,2.6vw,32px); margin-bottom:16px;}
.service-copy p.desc{font-size:15.5px; margin-bottom:28px; max-width:520px;}
.tag-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;}
.tag{
  font-family:'Geist Mono',monospace; font-size:11.5px; padding:6px 12px; border-radius:100px;
  border:1px solid var(--line-strong); color:var(--ink-muted);
}
.benefit-list{display:flex; flex-direction:column; gap:10px; margin:22px 0 28px;}
.benefit-list li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink-muted);}
.benefit-list svg{width:16px; height:16px; stroke:var(--accent); stroke-width:2; fill:none; flex-shrink:0; margin-top:2px;}
.field-label{
  font-family:'Geist Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-faint); margin-bottom:8px; display:block;
}

/* ---------- PROCESS STEPS ---------- */
.process-list{border-top:1px solid var(--line);}
.process-row{
  display:grid; grid-template-columns:70px 220px 1fr; gap:28px; padding:30px 0;
  border-bottom:1px solid var(--line); align-items:flex-start;
}
.process-num{font-family:'Geist Mono',monospace; font-size:14px; color:var(--accent);}
.process-row h3{font-size:18px;}
.process-row p{font-size:14.5px; margin:0; max-width:520px;}

/* ---------- WHY LIST ---------- */
.why-list{border-top:1px solid var(--line);}
.why-row{display:grid; grid-template-columns:280px 1fr; gap:40px; padding:28px 0; border-bottom:1px solid var(--line); align-items:center;}
.why-row .why-title{font-family:'Geist',sans-serif; font-weight:600; font-size:18.5px; display:flex; align-items:center; gap:14px;}
.why-row .why-title svg{width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:1.6; flex-shrink:0;}
.why-row p{font-size:14.5px; max-width:560px; margin:0;}

/* ---------- FAQ ACCORDION ---------- */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; background:none; border:none; text-align:left; padding:24px 0;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:'Geist',sans-serif; font-weight:600; font-size:16.5px; color:var(--ink);
}
.faq-q svg{width:18px; height:18px; stroke:var(--ink-muted); stroke-width:1.6; fill:none; flex-shrink:0; transition:transform .3s var(--ease);}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);}
.faq-a p{padding-bottom:24px; font-size:14.5px; max-width:680px;}

/* ---------- PROJECTS ---------- */
.projects-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.project-card{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);}
.project-card:hover{transform:translateY(-6px); border-color:var(--line-strong); box-shadow:var(--shadow);}
.project-thumb{height:220px; position:relative; overflow:hidden; background:var(--surface-alt); display:flex; align-items:center; justify-content:center;}
.project-thumb svg{width:100%; height:100%; transition:transform .6s var(--ease);}
.project-card:hover .project-thumb svg{transform:scale(1.06);}
.project-body{padding:26px 28px 30px;}
.project-cat{font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; display:block;}
.project-body h3{font-size:19px; margin-bottom:8px;}
.project-body p{font-size:14.5px;}
.badge{
  display:inline-block; font-family:'Geist Mono',monospace; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 10px; border-radius:100px; border:1px solid var(--line-strong);
  color:var(--ink-faint); margin-left:8px;
}
.empty-state{
  grid-column:1/-1; text-align:center; padding:80px 40px; border:1px dashed var(--line-strong);
  border-radius:var(--radius-lg); background:var(--surface-alt);
}
.empty-state svg{width:44px; height:44px; stroke:var(--ink-faint); fill:none; stroke-width:1.4; margin:0 auto 20px;}
.empty-state h3{font-size:19px; margin-bottom:10px;}
.empty-state p{max-width:420px; margin:0 auto; font-size:14.5px;}
.empty-state code{font-family:'Geist Mono',monospace; font-size:12.5px; background:var(--surface); border:1px solid var(--line-strong); padding:2px 7px; border-radius:5px;}

/* ---------- CONTACT / FORM ---------- */
.contact-layout{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:flex-start;}
.contact-info-list{display:flex; flex-direction:column; margin-top:32px;}
.contact-item{display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line);}
.contact-item:first-child{padding-top:0;}
.contact-item .label{font-family:'Geist Mono',monospace; font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em;}
.contact-item .value{font-size:14.5px; font-weight:500; display:flex; align-items:center; gap:8px; transition:color .25s var(--ease), gap .25s var(--ease);}
.contact-item a.value:hover{color:var(--accent); gap:12px;}
.contact-item .value svg{width:13px; height:13px; opacity:.5;}

.form-card{border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px; background:var(--surface);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
.form-group{margin-bottom:18px; display:flex; flex-direction:column;}
.form-group label{font-size:13px; font-weight:600; margin-bottom:8px; color:var(--ink);}
.form-group .req{color:var(--accent);}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea,
.form-group select{
  border:1px solid var(--line-strong); background:var(--bg); color:var(--ink);
  border-radius:var(--radius-sm); padding:12px 14px; font-size:14.5px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
  width:100%; appearance:none;
}
.form-group select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5F66' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:36px;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.form-group textarea{min-height:120px; resize:vertical;}
.pill-group{display:flex; flex-wrap:wrap; gap:8px;}
.pill{
  border:1px solid var(--line-strong); border-radius:100px; padding:9px 16px; font-size:13.5px;
  color:var(--ink-muted); background:transparent; transition:all .25s var(--ease);
}
.pill.active{background:var(--ink); border-color:var(--ink); color:var(--bg);}
.pill:hover{border-color:var(--ink);}
.form-note{font-size:13px; color:var(--ink-faint); margin-top:16px;}
.form-success{
  display:none; text-align:center; padding:50px 20px;
}
.form-success.show{display:block;}
.form-success svg{width:44px; height:44px; stroke:var(--accent); fill:none; stroke-width:1.6; margin:0 auto 18px;}

/* ---------- FINAL CTA BANNER ---------- */
.cta-banner{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:72px 60px; text-align:center;
  background:var(--surface-alt);
}
.cta-banner h2{font-size:clamp(26px,3.4vw,38px); max-width:640px; margin:0 auto 16px;}
.cta-banner p{max-width:480px; margin:0 auto 30px; font-size:15.5px;}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- LEGAL PAGES ---------- */
.legal-body h2{font-size:20px; margin:40px 0 14px;}
.legal-body h2:first-child{margin-top:0;}
.legal-body p{font-size:15px; margin-bottom:14px;}
.legal-body ul{margin:0 0 14px 0; display:flex; flex-direction:column; gap:8px;}
.legal-body li{font-size:15px; color:var(--ink-muted); padding-left:18px; position:relative;}
.legal-body li::before{content:"—"; position:absolute; left:0; color:var(--ink-faint);}
.legal-meta{font-size:13px; color:var(--ink-faint); margin-bottom:40px;}

/* ---------- 404 ---------- */
.error-page{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 24px 60px;
}
.error-code{font-family:'Geist',sans-serif; font-size:clamp(72px,14vw,140px); font-weight:700; color:var(--surface-alt); -webkit-text-stroke:1.5px var(--line-strong); line-height:1;}
.error-page h1{font-size:clamp(24px,3vw,32px); margin-top:8px;}
.error-page p{margin:14px 0 30px; max-width:420px;}

/* ---------- FOOTER ---------- */
footer.site-footer{border-top:1px solid var(--line); padding:56px 0 40px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line); margin-bottom:28px;}
.footer-col h4{font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-family:'Geist Mono',monospace; margin-bottom:16px; font-weight:500;}
.footer-col ul{display:flex; flex-direction:column; gap:11px;}
.footer-col a{font-size:14px; color:var(--ink-muted); transition:color .25s var(--ease);}
.footer-col a:hover{color:var(--ink);}
.footer-col p{font-size:14px; max-width:280px; margin-top:14px;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-bottom p{font-size:13px; color:var(--ink-faint);}
.socials{display:flex; gap:14px;}
.socials a{width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--ink-muted); transition:all .3s var(--ease);}
.socials a:hover{border-color:var(--ink); color:var(--ink); transform:translateY(-3px);}
.socials svg{width:15px; height:15px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .service-grid{grid-template-columns:1fr; gap:36px;}
  .service-grid.reverse .service-art{order:0;}
  .contact-layout{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .process-row{grid-template-columns:50px 1fr; grid-template-areas:"num title" "num desc";}
}
@media (max-width:860px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .projects-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .wrap, .wrap-narrow{padding:0 20px;}
  .grid-3, .grid-4{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .section-head{flex-direction:column; align-items:flex-start; gap:14px;}
  .footer-grid{grid-template-columns:1fr;}
  .cta-banner{padding:48px 24px;}
  .form-card{padding:26px 22px;}
  section{padding:72px 0;}
  .page-hero{padding-top:calc(var(--header-h) + 56px);}
}