/* ============================================================
   Draft Design Build — site stylesheet
   Palette: ink navy / brand navy / gold (Architectural)
            steel blue (Workspace) / bone
   Type:    Archivo (display) · IBM Plex Sans (body)
            IBM Plex Mono (spec labels)
   ============================================================ */

:root{
  --ink:#1B191A;
  --navy:#231F20;
  --navy-2:#332F30;
  --gold:#9FB9DF;
  --gold-soft:#C1D1EA;
  --steel:#5E86A8;
  --steel-soft:#C1D1EA;
  --bone:#F2F0EA;
  --bone-2:#E9E6DD;
  --white:#FFFFFF;
  --line-dark:rgba(255,255,255,.16);
  --line-light:#D8D4C9;
  --text-dark:#1C2534;
  --text-mute:#5C6575;
  --max:1200px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
}

body{
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  color:var(--text-dark);
  background:var(--bone);
  line-height:1.65;
  font-size:1.0rem;
}

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

h1,h2,h3,.display{
  font-family:"Archivo",sans-serif;
  line-height:1.08;
  letter-spacing:-.01em;
  font-weight:800;
}

.mono{
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

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

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

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--ink);
  color:var(--white);
  border-bottom:1px solid var(--line-dark);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.logo{
  font-family:"Archivo",sans-serif;font-weight:900;
  font-size:1.35rem;letter-spacing:.02em;
  text-decoration:none;display:flex;align-items:center;gap:.7rem;
}
.logo img{height:38px;width:auto;display:block;}
.logo .tag{
  font-family:"IBM Plex Mono",monospace;font-weight:400;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);
}
nav.main-nav{display:flex;gap:1.6rem;align-items:center;}
nav.main-nav a{
  text-decoration:none;font-size:.9rem;font-weight:500;
  color:rgba(255,255,255,.85);
  padding:.35rem 0;border-bottom:2px solid transparent;
}
nav.main-nav a:hover{color:var(--white);}
nav.main-nav a.active{border-bottom-color:var(--gold);color:var(--white);}
nav.main-nav a.btn-quote{
  border:1px solid var(--gold);color:var(--gold);
  padding:.45rem 1rem;border-radius:2px;
}
nav.main-nav a.btn-quote:hover{background:var(--gold);color:var(--ink);}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line-dark);
  color:var(--white);font-family:"IBM Plex Mono",monospace;
  font-size:.7rem;letter-spacing:.15em;padding:.5rem .8rem;cursor:pointer;
}

/* ---------- split hero (homepage signature) ---------- */
.split-hero{
  display:flex;min-height:calc(100vh - 64px);
}
.split-panel{
  position:relative;flex:1;display:flex;flex-direction:column;
  justify-content:flex-end;
  padding:3.5rem 3rem;
  color:var(--white);text-decoration:none;
  overflow:hidden;
  transition:flex .45s ease;
}
.split-hero:hover .split-panel{flex:.85;}
.split-hero .split-panel:hover{flex:1.35;}
.split-panel .panel-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .6s ease;
}
.split-panel:hover .panel-bg{transform:scale(1.04);}
.split-panel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(27,25,26,.92) 0%, rgba(27,25,26,.35) 55%, rgba(27,25,26,.25) 100%);
}
.split-panel.arch .panel-bg{
  background-image:url('../images/hero-architectural.jpg');
}
.split-panel.work .panel-bg{
  background-image:url('../images/hero-workspace.jpg');
}
.split-panel .panel-inner{position:relative;z-index:2;max-width:34rem;}
.split-panel .ref{
  display:inline-block;margin-bottom:1rem;
  padding:.3rem .6rem;border:1px solid currentColor;border-radius:2px;
}
.split-panel.arch .ref{color:var(--gold-soft);}
.split-panel.work .ref{color:var(--steel-soft);}
.split-panel h1,.split-panel .h1{
  font-size:clamp(1.9rem,3.2vw,3rem);
  text-transform:uppercase;margin-bottom:.8rem;
}
.split-panel p{color:rgba(255,255,255,.88);max-width:30rem;margin-bottom:1.4rem;}
.split-panel .go{
  font-family:"IBM Plex Mono",monospace;font-size:.75rem;
  letter-spacing:.18em;text-transform:uppercase;
}
.split-panel.arch .go{color:var(--gold);}
.split-panel.work .go{color:var(--steel-soft);}
.split-panel .go::after{content:"  →";}
/* title-block corner detail */
.split-panel .corner{
  position:absolute;top:1.4rem;left:1.6rem;right:1.6rem;z-index:2;
  display:flex;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.35);
  padding-top:.55rem;
  color:rgba(255,255,255,.65);
}

/* ---------- capabilities strip ---------- */
.cap-strip{
  background:var(--ink);color:var(--white);
  border-top:1px solid var(--line-dark);
  padding:1.1rem 0;
}
.cap-strip .wrap{
  display:flex;flex-wrap:wrap;gap:.8rem 2.4rem;
  justify-content:center;
}
.cap-strip span{color:rgba(255,255,255,.8);}
.cap-strip span b{color:var(--gold);font-weight:400;margin-right:2.4rem;}

/* ---------- generic sections ---------- */
section{padding:5rem 0;}
.eyebrow{
  color:var(--text-mute);margin-bottom:1rem;display:block;
}
.eyebrow::before{
  content:"";display:inline-block;width:2.2rem;height:1px;
  background:var(--gold);vertical-align:middle;margin-right:.8rem;
}
h2{font-size:clamp(1.7rem,2.6vw,2.4rem);text-transform:uppercase;margin-bottom:1.4rem;color:var(--navy);}
.lead{font-size:1.12rem;max-width:46rem;}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:start;}

/* ---------- cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.4rem;margin-top:2.5rem;}
.card{
  background:var(--white);border:1px solid var(--line-light);
  border-top:3px solid var(--gold);
  padding:1.6rem 1.5rem;border-radius:2px;
}
.card.steel{border-top-color:var(--steel);}
.card h3{font-size:1.05rem;text-transform:uppercase;margin:.7rem 0 .6rem;color:var(--navy);}
.card p{font-size:.93rem;color:var(--text-mute);}
.card .mono{color:var(--text-mute);}

/* ---------- dark feature band (case study) ---------- */
.feature-dark{background:var(--navy);color:var(--white);}
.feature-dark h2{color:var(--white);}
.feature-dark .eyebrow{color:rgba(255,255,255,.6);}
.feature-dark p{color:rgba(255,255,255,.85);}
.feature-dark .img-slot{min-height:340px;}
.btn{
  display:inline-block;margin-top:1.6rem;text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--gold);color:var(--gold);
  padding:.8rem 1.5rem;border-radius:2px;
}
.btn:hover{background:var(--gold);color:var(--ink);}
.btn.on-light{border-color:var(--navy);color:var(--navy);}
.btn.on-light:hover{background:var(--navy);color:var(--white);}

/* ---------- image slots (replace with real photos) ---------- */
.img-slot{
  position:relative;min-height:280px;border-radius:2px;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 12px,transparent 12px 24px),
    linear-gradient(150deg,var(--navy-2),var(--ink));
  border:1px solid var(--line-dark);
  background-size:cover;background-position:center;
}
.img-slot.light{
  background:
    repeating-linear-gradient(45deg,rgba(27,42,74,.05) 0 12px,transparent 12px 24px),
    linear-gradient(150deg,var(--bone-2),#DDD8CC);
  border:1px solid var(--line-light);
}
.img-slot .slot-label{
  position:absolute;bottom:.8rem;left:.9rem;
  font-family:"IBM Plex Mono",monospace;font-size:.65rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  border:1px dashed rgba(255,255,255,.35);
  padding:.3rem .55rem;border-radius:2px;
}
.img-slot.light .slot-label{color:rgba(28,37,52,.55);border-color:rgba(28,37,52,.3);}

.img-slot.fit{
  background-size:contain!important;background-repeat:no-repeat;background-position:center;
  background-color:#ECEAE3;
}
.img-slot.fit.dark{background-color:#232628;}

/* ---------- page hero (inner pages) ---------- */
.page-hero{
  background:var(--ink);color:var(--white);
  padding:5.5rem 0 4rem;position:relative;
}
.page-hero.arch{
  border-bottom:4px solid var(--gold);
  background-image:linear-gradient(rgba(27,25,26,.82),rgba(27,25,26,.82)),url('../images/hero-architectural.jpg');
  background-size:cover;background-position:center 30%;
}
.page-hero.work{
  border-bottom:4px solid var(--steel);
  background-image:linear-gradient(rgba(27,25,26,.85),rgba(27,25,26,.85)),url('../images/desk-lshape.jpg');
  background-size:cover;background-position:center;
}
.page-hero h1{font-size:clamp(2rem,4vw,3.2rem);text-transform:uppercase;margin:.9rem 0 1rem;}
.page-hero p{max-width:44rem;color:rgba(255,255,255,.85);font-size:1.1rem;}
.page-hero .mono{color:var(--gold);}
.page-hero.work .mono{color:var(--steel-soft);}

/* ---------- process / numbered rows ---------- */
.process{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;margin-top:2.5rem;}
.step{border-top:1px solid var(--line-light);padding-top:1.1rem;}
.step .mono{color:var(--steel);}
.step h3{font-size:1rem;text-transform:uppercase;margin:.5rem 0;color:var(--navy);}
.step p{font-size:.92rem;color:var(--text-mute);}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:2.4rem;}
.gallery .img-slot{min-height:220px;}

/* ---------- stats / trust ---------- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.4rem;margin-top:2.4rem;}
.trust .t{border-left:2px solid var(--gold);padding-left:1.1rem;}
.trust .t.steel{border-left-color:var(--steel);}
.trust .t strong{font-family:"Archivo",sans-serif;font-size:1.5rem;display:block;color:var(--navy);}
.trust .t span{font-size:.88rem;color:var(--text-mute);}

/* ---------- CTA band ---------- */
.cta-band{background:var(--gold);color:var(--ink);padding:3.6rem 0;}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;}
.cta-band h2{color:var(--ink);margin-bottom:.4rem;font-size:1.6rem;}
.cta-band p{max-width:34rem;}
.cta-band .btn{border-color:var(--ink);color:var(--ink);margin-top:0;}
.cta-band .btn:hover{background:var(--ink);color:var(--gold);}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2rem;}
.contact-grid .block h3{font-size:1rem;text-transform:uppercase;color:var(--navy);margin-bottom:.5rem;}
.contact-grid .block p{color:var(--text-mute);font-size:.95rem;}
.contact-grid a{color:var(--navy);}

/* ---------- footer ---------- */
.site-footer{
  background:var(--ink);color:rgba(255,255,255,.75);
  padding:3.2rem 0 2rem;font-size:.88rem;
}
.site-footer .cols{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;margin-bottom:2.2rem;
}
.site-footer h4{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin-bottom:.9rem;font-weight:400;
}
.site-footer a{color:rgba(255,255,255,.75);text-decoration:none;}
.site-footer a:hover{color:var(--white);}
.site-footer ul{list-style:none;}
.site-footer li{margin-bottom:.45rem;}
.legal{
  border-top:1px solid var(--line-dark);padding-top:1.4rem;
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;
  letter-spacing:.06em;color:rgba(255,255,255,.5);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .split-hero{flex-direction:column;min-height:0;}
  .split-panel{min-height:56vh;padding:2.4rem 1.6rem;}
  .split-hero:hover .split-panel,.split-hero .split-panel:hover{flex:1;}
  .two-col{grid-template-columns:1fr;gap:2rem;}
  .contact-grid{grid-template-columns:1fr;}
  .site-footer .cols{grid-template-columns:1fr;}
  nav.main-nav{
    position:absolute;top:64px;left:0;right:0;
    background:var(--ink);flex-direction:column;align-items:flex-start;
    padding:1rem 24px 1.4rem;gap:1rem;display:none;
    border-bottom:1px solid var(--line-dark);
  }
  nav.main-nav.open{display:flex;}
  .nav-toggle{display:block;}
}