/* ============================================================
   ApplicationLabs — Design System
   Blueprint / drafting-sheet aesthetic for an engineering studio
   ============================================================ */

:root{
  --ink: #12203A;
  --ink-2: #182A4B;
  --ink-3: #21365E;
  --paper: #F7F4EC;
  --paper-2: #EFEAD9;
  --brass: #C08B34;
  --brass-light: #E0AE5C;
  --teal: #2E8B82;
  --graphite: #3A4250;
  --text-onpaper: #1B2230;
  --text-ondark: #EDEAE0;
  --line-onpaper: rgba(27,34,48,0.14);
  --line-ondark: rgba(237,234,224,0.16);
  --muted-onpaper: rgba(27,34,48,0.62);
  --muted-ondark: rgba(237,234,224,0.64);

  --display: "Space Grotesk", "IBM Plex Sans", sans-serif;
  --body: "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;

  --max: 1180px;
  --radius: 2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--text-onpaper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1.1em;}
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 28px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

/* ---------- Eyebrow / sheet labels ---------- */
.sheet-label{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.sheet-label::before{
  content:"";
  width:22px;height:1px;
  background:var(--brass);
  display:inline-block;
}

/* ---------- Registration marks (corner crosshairs) ---------- */
.reg-mark{
  position:absolute;
  width:16px;height:16px;
  pointer-events:none;
  opacity:.5;
}
.reg-mark::before,.reg-mark::after{
  content:"";
  position:absolute;
  background:currentColor;
}
.reg-mark::before{ top:50%; left:0; width:100%; height:1px; transform:translateY(-50%);}
.reg-mark::after{ left:50%; top:0; height:100%; width:1px; transform:translateX(-50%);}
.reg-mark.tl{ top:14px; left:14px; }
.reg-mark.tr{ top:14px; right:14px; }
.reg-mark.bl{ bottom:14px; left:14px; }
.reg-mark.br{ bottom:14px; right:14px; }

/* ============================== HEADER ============================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(247,244,236,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-onpaper);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  max-width:var(--max); margin:0 auto;
}
.logo{
  font-family:var(--display);
  font-weight:700;
  font-size:19px;
  letter-spacing:-0.01em;
  text-decoration:none;
  color:var(--text-onpaper);
  display:flex; align-items:center; gap:8px;
}
.logo .mark{
  width:9px;height:9px;
  background:var(--brass);
  display:inline-block;
  border-radius:50%;
}
.main-nav{
  display:flex; align-items:center; gap:36px;
}
.main-nav a{
  font-family:var(--mono);
  font-size:13px;
  text-decoration:none;
  color:var(--text-onpaper);
  letter-spacing:.02em;
  position:relative;
  padding:4px 0;
}
.main-nav a[aria-current="page"]{ color:var(--brass); }
.main-nav a:not([aria-current]):hover{ color:var(--teal); }
.nav-cta{
  background:var(--ink);
  color:var(--text-ondark) !important;
  padding:10px 18px !important;
  border-radius:var(--radius);
}
.nav-cta:hover{ background:var(--teal) !important; }
.nav-toggle{ display:none; }

@media (max-width:840px){
  .main-nav{
    position:fixed; inset:64px 0 0 0;
    background:var(--paper);
    flex-direction:column;
    align-items:flex-start;
    padding:32px 28px;
    gap:26px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .main-nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .main-nav a{ font-size:16px; }
  .nav-toggle{
    display:block;
    background:none;border:1px solid var(--line-onpaper);
    width:40px;height:40px;
    border-radius:var(--radius);
    cursor:pointer;
  }
}

/* ============================== SECTIONS ============================== */
section{ padding:96px 0; position:relative; }
.section-dark{ background:var(--ink); color:var(--text-ondark); }
.section-dark .sheet-label{ color:var(--brass-light); }
.section-paper2{ background:var(--paper-2); }

.eyebrow-row{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:48px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(28px,3.6vw,42px); max-width:640px; }
.section-lede{
  max-width:520px;
  font-size:16.5px;
}
.section-dark .section-lede,.section-dark .muted{ color:var(--muted-ondark); }
.muted{ color:var(--muted-onpaper); }

/* ============================== HERO ============================== */
.hero{
  padding:76px 0 100px;
  background:var(--ink);
  color:var(--text-ondark);
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line-onpaper);
}
.hero .container{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:56px;
  align-items:center;
}
.hero-status{
  font-family:var(--mono);
  font-size:12px;
  color:var(--brass-light);
  letter-spacing:.1em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:22px;
  border:1px solid var(--line-ondark);
  padding:6px 12px;
  border-radius:20px;
}
.hero-status .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 3px rgba(46,139,130,0.25);
}
.hero h1{
  font-size:clamp(38px,5.4vw,64px);
  max-width:640px;
}
.hero h1 em{
  font-style:normal;
  color:var(--brass-light);
}
.hero p.lede{
  font-size:18px;
  max-width:480px;
  color:var(--muted-ondark);
  margin-bottom:30px;
}
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px;}
.hero-stats{
  display:flex; gap:36px; flex-wrap:wrap;
  border-top:1px solid var(--line-ondark);
  padding-top:26px;
}
.hero-stats .stat b{
  display:block;
  font-family:var(--mono);
  font-size:24px;
  color:var(--text-ondark);
}
.hero-stats .stat span{
  font-size:12px;
  color:var(--muted-ondark);
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* Blueprint schematic (signature element) */
.schematic-wrap{
  position:relative;
  border:1px solid var(--line-ondark);
  border-radius:var(--radius);
  background:
    linear-gradient(var(--line-ondark) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg, var(--line-ondark) 1px, transparent 1px) 0 0/32px 32px,
    var(--ink-2);
  aspect-ratio:1/1;
}
.schematic-wrap svg{ width:100%; height:100%; display:block; }
.schematic-line{
  fill:none; stroke:var(--brass-light); stroke-width:1.4;
  stroke-dasharray:400; stroke-dashoffset:400;
  animation:draw 2.2s ease forwards;
}
.schematic-line.teal{ stroke:var(--teal); }
.schematic-node rect{
  fill:var(--ink); stroke:var(--brass-light); stroke-width:1.2;
  opacity:0; animation:appear .5s ease forwards;
}
.schematic-node text{
  fill:var(--text-ondark); font-family:var(--mono); font-size:9px;
  opacity:0; animation:appear .5s ease forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes appear{ to{ opacity:1; } }

@media (max-width:900px){
  .hero .container{ grid-template-columns:1fr; }
  .schematic-wrap{ max-width:420px; margin:0 auto; }
}

/* ============================== CARDS / GRIDS ============================== */
.grid{ display:grid; gap:1px; background:var(--line-onpaper); border:1px solid var(--line-onpaper); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid-4,.grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--paper);
  padding:32px 28px;
  position:relative;
}
.section-dark .card{ background:var(--ink); }
.card .idx{
  font-family:var(--mono); font-size:12px; color:var(--brass);
  margin-bottom:16px; display:block;
}
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ font-size:14.5px; margin-bottom:0; }
.section-dark .card p{ color:var(--muted-ondark); }

/* ---------- Case study cards ---------- */
.case-card{
  background:var(--paper);
  border:1px solid var(--line-onpaper);
  padding:36px;
  display:grid;
  grid-template-columns:180px 1fr;
  gap:32px;
  margin-bottom:1px;
}
.case-card .tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.tag{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  border:1px solid var(--line-onpaper); padding:4px 9px; border-radius:20px; color:var(--graphite);
}
.case-metric{
  font-family:var(--mono);
}
.case-metric b{ display:block; font-size:30px; color:var(--brass); line-height:1; }
.case-metric span{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-onpaper); }
@media (max-width:760px){ .case-card{ grid-template-columns:1fr; } }

/* ============================== BUTTONS ============================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13.5px; letter-spacing:.02em;
  padding:13px 24px;
  border-radius:var(--radius);
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{ background:var(--brass); color:var(--ink); }
.btn-primary:hover{ background:var(--brass-light); }
.btn-ghost{ border-color:var(--line-ondark); color:var(--text-ondark); }
.btn-ghost:hover{ border-color:var(--brass-light); color:var(--brass-light); }
.btn-ghost-paper{ border-color:var(--line-onpaper); color:var(--text-onpaper); }
.btn-ghost-paper:hover{ border-color:var(--teal); color:var(--teal); }

/* ============================== FAQ (AI-answer friendly) ============================== */
.faq-item{
  border-bottom:1px solid var(--line-onpaper);
  padding:22px 0;
}
.faq-q{
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; font-family:var(--display); font-weight:600; font-size:17px;
  gap:16px;
}
.faq-q .plus{ font-family:var(--mono); color:var(--brass); flex:none; }
.faq-a{
  max-height:0; overflow:hidden;
  transition:max-height .3s ease;
  font-size:15px; color:var(--muted-onpaper);
}
.faq-item.open .faq-a{ max-height:400px; padding-top:12px; }
.faq-item.open .plus{ transform:rotate(45deg); }

/* ============================== FORM ============================== */
.field{ margin-bottom:22px; }
.field label{
  display:block; font-family:var(--mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:8px; color:var(--graphite);
}
.field input,.field select,.field textarea{
  width:100%; padding:13px 14px; font-family:var(--body); font-size:15px;
  border:1px solid var(--line-onpaper); border-radius:var(--radius);
  background:var(--paper); color:var(--text-onpaper);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--teal); }

/* ============================== FOOTER ============================== */
footer{
  background:var(--ink); color:var(--muted-ondark);
  padding:64px 0 32px;
  font-size:14px;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px; margin-bottom:48px;
}
.footer-grid h4{
  font-family:var(--mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-ondark); margin-bottom:16px;
}
.footer-grid a{ display:block; text-decoration:none; color:var(--muted-ondark); margin-bottom:10px; }
.footer-grid a:hover{ color:var(--brass-light); }
.footer-bottom{
  border-top:1px solid var(--line-ondark);
  padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--mono); font-size:12px;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ============================== PAGE HERO (interior pages) ============================== */
.page-hero{
  background:var(--ink); color:var(--text-ondark);
  padding:64px 0 72px;
  border-bottom:1px solid var(--line-onpaper);
}
.page-hero h1{ font-size:clamp(32px,4.4vw,52px); max-width:760px; }
.page-hero .section-lede{ max-width:620px; }
.breadcrumb{
  font-family:var(--mono); font-size:12px; color:var(--muted-ondark);
  margin-bottom:18px;
}
.breadcrumb a{ text-decoration:none; color:var(--muted-ondark); }
.breadcrumb a:hover{ color:var(--brass-light); }