/* =========================================================
   MC CAD Services — stylesheet
   Concept 02 / Palette C
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --charcoal:#25282A;
  --grid:#42474A;
  --copper:#B46A3C;
  --stone:#D7C4AE;
  --white:#FAF8F5;

  --grid-line: rgba(66,71,74,0.09);
  --grid-line-soft: rgba(66,71,74,0.055);
  --hairline: rgba(37,40,42,0.14);
  --hairline-inverse: rgba(250,248,245,0.16);

  --font-display:'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --font-body:'IBM Plex Sans', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;

  --sheet-margin: 22px;
  --max: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

html,body{ margin:0; padding:0; }

body{
  background:var(--charcoal);
  color:var(--charcoal);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  margin:0;
  color:var(--charcoal);
  letter-spacing:0.002em;
}

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

ul{ margin:0; padding:0; list-style:none; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ---------------------------------------------------------
   The "sheet": every page sits inside a bordered drawing
   sheet with corner registration marks.
   --------------------------------------------------------- */
.sheet{
  position:relative;
  background:var(--white);
  margin:var(--sheet-margin);
  min-height:calc(100vh - (var(--sheet-margin) * 2));
  border:1px solid var(--hairline);
  display:flex;
  flex-direction:column;
}

.sheet::before,.sheet::after,
.crop-tl,.crop-tr,.crop-bl,.crop-br{ pointer-events:none; }

.crop-tl,.crop-tr,.crop-bl,.crop-br{
  position:absolute; width:16px; height:16px; z-index:5;
}
.crop-tl{ top:-1px; left:-1px; border-top:2px solid var(--copper); border-left:2px solid var(--copper); }
.crop-tr{ top:-1px; right:-1px; border-top:2px solid var(--copper); border-right:2px solid var(--copper); }
.crop-bl{ bottom:-1px; left:-1px; border-bottom:2px solid var(--copper); border-left:2px solid var(--copper); }
.crop-br{ bottom:-1px; right:-1px; border-bottom:2px solid var(--copper); border-right:2px solid var(--copper); }

/* subtle drafting grid used behind hero / feature sections */
.grid-field{
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 64px);
}
.grid-field-soft{
  background-image:
    repeating-linear-gradient(to right, var(--grid-line-soft) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, var(--grid-line-soft) 0 1px, transparent 1px 48px);
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px;
  width:100%;
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.site-header{
  border-bottom:1px solid var(--hairline);
  background:var(--white);
  position:sticky; top:0; z-index:20;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:40px; height:40px; flex:none; }
.brand-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.18rem;
  line-height:1.1;
  color:var(--charcoal);
}
.brand-tag{
  display:block;
  font-family:var(--font-mono);
  font-size:0.66rem;
  color:var(--grid);
  letter-spacing:0.02em;
  margin-top:2px;
}

.main-nav ul{ display:flex; gap:2px; align-items:center; }
.main-nav a{
  font-family:var(--font-body);
  font-weight:500;
  font-size:0.94rem;
  color:var(--charcoal);
  padding:10px 14px;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.main-nav a:hover{ border-color:var(--stone); }
.main-nav a[aria-current="page"]{
  border-color:var(--copper);
  color:var(--copper);
}
.nav-cta{
  margin-left:8px;
  font-family:var(--font-body) !important;
}

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--hairline); border-radius:2px;
  width:42px; height:38px;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width:18px; height:2px; background:var(--charcoal);
  position:relative; transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.94rem;
  padding:13px 22px;
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{
  background:var(--copper);
  color:var(--white);
}
.btn-primary:hover{ background:#9c5a30; }
.btn-outline{
  background:transparent;
  color:var(--charcoal);
  border-color:var(--charcoal);
}
.btn-outline:hover{ border-color:var(--copper); color:var(--copper); }
.btn-outline-inverse{
  background:transparent;
  color:var(--white);
  border-color:var(--hairline-inverse);
}
.btn-outline-inverse:hover{ border-color:var(--stone); color:var(--stone); }

/* ---------------------------------------------------------
   Dimension-line divider — used sparingly between major
   blocks, mimicking a dimension line off a drawing.
   --------------------------------------------------------- */
.dim-divider{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 32px;
  max-width:var(--max);
  margin:0 auto;
}
.dim-divider .tick{ width:1px; height:14px; background:var(--grid); flex:none; }
.dim-divider .line{ flex:1; height:1px; background:var(--hairline); }
.dim-divider .label{
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--grid);
  white-space:nowrap;
}

/* ---------------------------------------------------------
   Section rhythm
   --------------------------------------------------------- */
.section{ padding:76px 0; }
.section-tight{ padding:52px 0; }
.section-head{
  max-width:640px;
  margin-bottom:44px;
}
.section-head .kicker{
  display:inline-block;
  width:26px; height:2px; background:var(--copper);
  margin-bottom:16px;
}
.section-head h2{
  font-size:clamp(1.7rem, 2.6vw, 2.35rem);
  margin-bottom:14px;
}
.section-head p{ color:#4b4f51; font-size:1.02rem; max-width:56ch; }

.on-dark{ background:var(--charcoal); }
.on-dark h2, .on-dark h3, .on-dark p, .on-dark .brand-name{ color:var(--white); }
.on-dark .section-head p{ color:#c9c3ba; }
.on-stone{ background:var(--stone); }

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{
  position:relative;
  padding:88px 0 72px;
  overflow:hidden;
}
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:56px;
  align-items:center;
}
.hero-eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--copper);
  margin-bottom:20px;
}
.hero h1{
  font-size:clamp(2.3rem, 4.6vw, 3.6rem);
  line-height:1.06;
  margin-bottom:22px;
}
.hero p.lede{
  font-size:1.12rem;
  color:#3d4143;
  max-width:52ch;
  margin-bottom:32px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }
.hero-meta{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--grid);
  border-top:1px solid var(--hairline);
  padding-top:18px;
}
.hero-meta strong{
  display:block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.98rem;
  color:var(--charcoal);
}

.hero-figure{
  position:relative;
  aspect-ratio:4/5;
  min-height:420px;
  border:1px solid var(--hairline);
  background:var(--charcoal);
}
.hero-figure svg{ width:100%; height:100%; }
.hero-figure .draw-line{
  stroke-dasharray:640;
  stroke-dashoffset:640;
  animation:draw-in 1.2s cubic-bezier(.4,0,.2,1) .1s forwards;
}
.hero-figure .fade-in{
  opacity:0;
  animation:fade-up .7s ease .5s forwards;
}
@keyframes draw-in{ to{ stroke-dashoffset:0; } }
@keyframes fade-up{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------------------------------------------------------
   Service cards / icon tiles
   --------------------------------------------------------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }

.svc-card{
  background:var(--white);
  padding:34px 30px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.svc-card .icon{ width:46px; height:46px; color:var(--copper); }
.svc-card .icon svg{ width:100%; height:100%; display:block; }
.svc-card h3{ font-size:1.18rem; }
.svc-card p{ color:#4b4f51; font-size:0.96rem; }
.svc-card .num{
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--grid);
}
.svc-card a.more{
  margin-top:auto;
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--copper);
  border-bottom:1px solid transparent;
  align-self:flex-start;
}
.svc-card a.more:hover{ border-color:var(--copper); }

/* ---------------------------------------------------------
   Process / steps
   --------------------------------------------------------- */
.process{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--hairline);
}
.process li{
  padding:26px 26px 26px 0;
  border-right:1px solid var(--hairline);
  position:relative;
}
.process li:last-child{ border-right:none; }
.process .step-no{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--copper);
  display:block;
  margin-bottom:10px;
}
.process h4{ font-size:1.02rem; margin-bottom:8px; }
.process p{ font-size:0.9rem; color:#4b4f51; }

/* ---------------------------------------------------------
   Coverage / stats strip
   --------------------------------------------------------- */
.stat-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hairline-inverse);
  border-bottom:1px solid var(--hairline-inverse);
}
.stat-strip div{
  padding:28px 24px;
  border-right:1px solid var(--hairline-inverse);
}
.stat-strip div:last-child{ border-right:none; }
.stat-num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:2.1rem;
  color:var(--stone);
  display:block;
}
.stat-label{
  font-family:var(--font-mono);
  font-size:0.76rem;
  color:#bdb6ac;
}

/* ---------------------------------------------------------
   Footer — title block
   --------------------------------------------------------- */
.title-block{
  margin-top:auto;
  background:var(--charcoal);
  color:var(--white);
  border-top:2px solid var(--copper);
}
.tb-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding:56px 0 40px;
}
.tb-col h4{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:0.76rem;
  color:var(--stone);
  margin-bottom:16px;
}
.tb-col p, .tb-col li{ color:#d8d2c8; font-size:0.92rem; }
.tb-col ul li{ margin-bottom:9px; }
.tb-col a:hover{ color:var(--stone); }
.tb-brand img{ width:auto; height:40px; margin-bottom:14px; }
.tb-brand p{ max-width:32ch; color:#b8b1a6; }

.tb-strip{
  border-top:1px solid var(--hairline-inverse);
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:#9a9389;
}
.tb-strip .legal-links{ display:flex; gap:18px; }
.tb-strip a:hover{ color:var(--stone); }

/* ---------------------------------------------------------
   Placeholder / callout box (used for images not yet supplied)
   --------------------------------------------------------- */
.placeholder-fig{
  position:relative;
  border:1px dashed var(--grid);
  background:
    repeating-linear-gradient(45deg, rgba(66,71,74,0.05) 0 10px, transparent 10px 20px);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
  color:var(--grid);
  font-family:var(--font-mono);
  font-size:0.76rem;
  text-align:center;
  padding:20px;
}
.placeholder-fig span{ max-width:22ch; line-height:1.5; }

/* ---------------------------------------------------------
   Page intro banner (used on inner pages instead of full hero)
   --------------------------------------------------------- */
.page-intro{ padding:56px 0 44px; border-bottom:1px solid var(--hairline); }
.page-intro .sheet-ref{
  font-family:var(--font-mono);
  font-size:0.76rem;
  color:var(--copper);
  margin-bottom:14px;
}
.page-intro h1{ font-size:clamp(2rem,3.6vw,2.8rem); margin-bottom:14px; }
.page-intro p{ max-width:60ch; color:#4b4f51; font-size:1.04rem; }

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.form-card{
  border:1px solid var(--hairline);
  background:var(--white);
  padding:44px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:22px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.field.full{ grid-column:1 / -1; }
.field label{
  font-family:var(--font-mono);
  font-size:0.76rem;
  color:var(--grid);
}
.field input, .field select, .field textarea{
  font-family:var(--font-body);
  font-size:0.98rem;
  padding:12px 14px;
  border:1px solid var(--hairline);
  border-radius:2px;
  background:var(--white);
  color:var(--charcoal);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--copper);
  outline-offset:1px;
}
.field-hint{ font-size:0.82rem; color:#7a746b; }
.form-note{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--grid);
  border-top:1px dashed var(--hairline);
  margin-top:8px;
  padding-top:18px;
}
.form-status{
  margin-top:18px;
  padding:14px 16px;
  border:1px solid var(--stone);
  background:#F3ECE3;
  font-size:0.92rem;
  display:none;
}
.form-status.is-visible{ display:block; }

.file-drop{
  border:1px dashed var(--grid);
  padding:22px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:0.82rem;
  color:var(--grid);
  cursor:pointer;
}
.file-drop input{ display:none; }

/* ---------------------------------------------------------
   Info / contact tiles
   --------------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--hairline); }
.contact-grid > div{ padding:40px; }
.contact-grid > div + div{ border-left:1px solid var(--hairline); }
.info-row{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--hairline); }
.info-row:last-child{ border-bottom:none; }
.info-row .k{
  width:120px; flex:none;
  font-family:var(--font-mono); font-size:0.76rem; color:var(--grid);
  padding-top:2px;
}
.info-row .v{ font-size:0.98rem; }
.location-panel{
  border:1px solid var(--hairline);
  background:var(--white);
  display:flex;
  gap:28px;
  align-items:flex-start;
  padding:36px 40px;
}
.location-icon{ width:44px; height:44px; color:var(--copper); flex:none; }
.location-icon svg{ width:100%; height:100%; display:block; }
@media (max-width:600px){
  .location-panel{ flex-direction:column; padding:28px; }
}

/* ---------------------------------------------------------
   Portfolio filters + grid
   --------------------------------------------------------- */
.filter-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px; }
.filter-row button{
  font-family:var(--font-mono);
  font-size:0.78rem;
  padding:9px 16px;
  border:1px solid var(--hairline);
  background:transparent;
  color:var(--charcoal);
  cursor:pointer;
  border-radius:2px;
}
.filter-row button.is-active{ background:var(--charcoal); color:var(--white); border-color:var(--charcoal); }

.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.p-card{ display:flex; flex-direction:column; gap:14px; }
.p-card .placeholder-fig{ aspect-ratio:4/3; min-height:200px; }
.p-card h3{ font-size:1.05rem; }
.p-card .meta{
  font-family:var(--font-mono);
  font-size:0.74rem;
  color:var(--grid);
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* ---------------------------------------------------------
   Values grid (about page)
   --------------------------------------------------------- */
.values-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:36px 48px; }
.value-item{ display:flex; gap:18px; }
.value-item .mark{
  font-family:var(--font-mono);
  color:var(--copper);
  font-size:0.9rem;
  flex:none;
  padding-top:4px;
}
.value-item h4{ font-size:1.05rem; margin-bottom:6px; }
.value-item p{ font-size:0.94rem; color:#4b4f51; }

/* ---------------------------------------------------------
   Utility
   --------------------------------------------------------- */
.text-center{ text-align:center; }
.mt-40{ margin-top:40px; }
.cta-banner{
  padding:64px 0;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.cta-banner h2{ font-size:clamp(1.5rem,2.6vw,2rem); max-width:24ch; }
.cta-banner .actions{ display:flex; gap:14px; }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-figure{ order:-1; aspect-ratio:16/9; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .process{ grid-template-columns:1fr 1fr; }
  .process li{ border-bottom:1px solid var(--hairline); padding:22px 22px 22px 0; }
  .stat-strip{ grid-template-columns:1fr 1fr; }
  .stat-strip div{ border-bottom:1px solid var(--hairline-inverse); }
  .tb-top{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .contact-grid > div + div{ border-left:none; border-top:1px solid var(--hairline); }
  .portfolio-grid{ grid-template-columns:1fr 1fr; }
  .values-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

@media (max-width: 680px){
  :root{ --sheet-margin:10px; }
  .wrap{ padding:0 20px; }
  .main-nav{
    position:fixed; inset:78px 0 0 0; background:var(--white);
    transform:translateX(100%);
    transition:transform .25s ease;
    z-index:30;
    border-top:1px solid var(--hairline);
    padding:20px 0;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:stretch; padding:0 20px; }
  .main-nav a{ padding:16px 4px; border-bottom:1px solid var(--hairline); }
  .nav-cta{ margin-left:0; margin-top:12px; text-align:center; justify-content:center; }
  .nav-toggle{ display:flex; }
  .grid-3{ grid-template-columns:1fr; }
  .process{ grid-template-columns:1fr; }
  .stat-strip{ grid-template-columns:1fr; }
  .stat-strip div{ border-right:none; }
  .tb-top{ grid-template-columns:1fr; padding:44px 0 30px; }
  .portfolio-grid{ grid-template-columns:1fr; }
  .dim-divider{ padding:0 20px; }
  .form-card{ padding:26px; }
}

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