/* ============================================================
   OPEIM PARTNERS INC. — DESIGN SYSTEM
   Tokens: color, type, spacing, layout
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=Archivo+Expanded:wght@700;800&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Color */
  --navy-950:#0A1A2E;
  --navy-900:#0E2138;
  --navy-800:#14304F;
  --navy-700:#1D4269;
  --navy-100:#E8EDF3;
  --orange-500:#E8632C;
  --orange-600:#CC4F1E;
  --orange-100:#FDE9DF;
  --paper:#F6F5F1;
  --paper-2:#FFFFFF;
  --steel-700:#3A4653;
  --steel-500:#5B6774;
  --steel-300:#93A0AC;
  --line-200:#DDE1E6;
  --line-100:#EAEDF0;

  /* Type */
  --f-display:'Archivo Expanded', 'Archivo', sans-serif;
  --f-head:'Archivo', sans-serif;
  --f-body:'IBM Plex Sans', sans-serif;
  --f-mono:'IBM Plex Mono', monospace;

  /* Layout */
  --maxw:1200px;
  --gutter:clamp(20px, 5vw, 64px);
  --radius:2px;
  --dur:420ms;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

body{
  margin:0;
  font-family:var(--f-body);
  color:var(--steel-700);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  font-size:16px;
}

h1,h2,h3,h4{
  font-family:var(--f-head);
  color:var(--navy-950);
  margin:0 0 .5em;
  line-height:1.08;
  letter-spacing:-0.01em;
}
h1{font-family:var(--f-display); font-weight:800; font-size:clamp(2.4rem, 5vw, 4.2rem); letter-spacing:-0.015em;}
h2{font-family:var(--f-display); font-weight:700; font-size:clamp(1.8rem, 3.4vw, 2.6rem);}
h3{font-size:clamp(1.15rem, 2vw, 1.5rem); font-weight:700;}
p{margin:0 0 1.1em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0;}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter);}

/* ---------- Eyebrow / mono labels ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange-600);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1.1em;
  font-weight:500;
}
.eyebrow::before{content:"//"; color:var(--steel-300);}

/* ---------- Signature: Readiness Bar (Ξ motif) ---------- */
.readiness-bar{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:46px;
}
.readiness-bar span{
  display:block; height:4px; background:var(--navy-900); border-radius:1px;
}
.readiness-bar span:nth-child(2){
  background:var(--orange-500);
  position:relative;
  overflow:hidden;
}
.readiness-bar span:nth-child(2)::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation:sweep 2.6s var(--ease) infinite;
}
@keyframes sweep{
  0%{transform:translateX(-120%);}
  60%,100%{transform:translateX(120%);}
}

.section-divider{
  display:flex; align-items:center; gap:18px; margin:0 0 2.4rem;
}
.section-divider .readiness-bar{width:34px;}
.section-divider .line{flex:1; height:1px; background:var(--line-200);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.95em 1.6em;
  border:1px solid var(--navy-950);
  border-radius:var(--radius);
  cursor:pointer;
  transition:all var(--dur) var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--navy-950); color:#fff;}
.btn-primary:hover{background:var(--orange-500); border-color:var(--orange-500); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--navy-950);}
.btn-ghost:hover{background:var(--navy-950); color:#fff; transform:translateY(-2px);}
.btn-onDark{border-color:rgba(255,255,255,.5); color:#fff;}
.btn-onDark.btn-primary{background:var(--orange-500); border-color:var(--orange-500);}
.btn-onDark.btn-primary:hover{background:#fff; color:var(--navy-950); border-color:#fff;}
.btn-onDark.btn-ghost:hover{background:#fff; color:var(--navy-950);}
.btn-arrow{transition:transform var(--dur) var(--ease);}
.btn:hover .btn-arrow{transform:translateX(4px);}

/* ---------- Header / Nav ---------- */
header.site{
  position:sticky; top:0; z-index:100;
  background:rgba(246,245,241,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-200);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gutter);
  max-width:var(--maxw); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--f-display); font-weight:800; font-size:1.28rem; color:var(--navy-950);}
.brand .mark{display:flex; flex-direction:column; gap:3px; width:22px;}
.brand .mark span{height:3px; background:var(--navy-950); border-radius:1px;}
.brand .mark span:nth-child(2){background:var(--orange-500); width:100%;}

.nav-links{display:flex; align-items:center; gap:2.1rem; list-style:none;}
.nav-links a{
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--steel-700); position:relative; padding:6px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--orange-500);
  transition:width var(--dur) var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-links a.active{color:var(--navy-950); font-weight:600;}
.nav-cta{display:flex; align-items:center; gap:1.4rem;}
.nav-cta .btn{padding:.7em 1.3em;}

.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.burger span{width:24px; height:2px; background:var(--navy-950);}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--navy-950); color:#fff;
  padding:clamp(70px,12vw,140px) 0 clamp(50px,8vw,90px);
}
.hero .topo{position:absolute; inset:0; opacity:.35; pointer-events:none;}
.hero-inner{position:relative; z-index:2; max-width:820px;}
.hero h1{color:#fff;}
.hero .eyebrow{color:var(--orange-500);}
.hero .eyebrow::before{color:rgba(255,255,255,.35);}
.hero p.lede{color:var(--navy-100); font-size:1.18rem; max-width:640px; margin-bottom:2.2rem;}
.hero-ctas{display:flex; gap:1rem; flex-wrap:wrap;}

/* Stat strip */
.stat-strip{
  background:var(--navy-900); color:#fff; border-top:1px solid rgba(255,255,255,.08);
}
.stat-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  max-width:var(--maxw); margin:0 auto; padding:2.4rem var(--gutter);
  gap:1.6rem;
}
.stat{border-left:2px solid var(--orange-500); padding-left:1rem;}
.stat .num{font-family:var(--f-mono); font-size:2rem; font-weight:600; color:#fff; display:block;}
.stat .label{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-300);}

/* ---------- Sections ---------- */
section{padding:clamp(60px,9vw,110px) 0;}
.section-head{max-width:680px; margin-bottom:3rem;}
.bg-white{background:var(--paper-2);}
.bg-navy{background:var(--navy-950); color:#fff;}
.bg-navy h2, .bg-navy h3{color:#fff;}
.bg-navy .steel{color:var(--navy-100);}

/* Cards */
.grid{display:grid; gap:1.6rem;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--paper-2); border:1px solid var(--line-200); padding:2rem;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover{border-color:var(--orange-500); transform:translateY(-4px);}
.card .index{font-family:var(--f-mono); color:var(--orange-600); font-size:.82rem; margin-bottom:1rem; display:block;}
.card h3{margin-bottom:.6rem;}
.card p{color:var(--steel-500); margin-bottom:0; font-size:.96rem;}

/* Blueprint frame (image placeholder) */
.frame{
  position:relative; border:1px dashed var(--steel-300); background:var(--navy-100);
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.frame .corner{position:absolute; width:14px; height:14px;}
.frame .corner::before,.frame .corner::after{content:""; position:absolute; background:var(--navy-700);}
.frame .corner.tl{top:8px; left:8px;} .frame .corner.tr{top:8px; right:8px;} .frame .corner.bl{bottom:8px; left:8px;} .frame .corner.br{bottom:8px; right:8px;}
.frame .corner::before{width:14px; height:2px; top:0; left:0;}
.frame .corner.tr::before,.frame .corner.br::before{left:auto; right:0;}
.frame .corner::after{width:2px; height:14px; top:0; left:0;}
.frame .corner.bl::after,.frame .corner.br::after{top:auto; bottom:0;}
.frame .ph-label{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em; color:var(--steel-500);
  text-align:center; padding:0 1.6rem; text-transform:uppercase;
}
.frame .ph-label b{display:block; color:var(--navy-800); font-size:.8rem; margin-bottom:.3em; text-transform:none; letter-spacing:0;}
.frame.square{aspect-ratio:1/1;}
.frame.wide{aspect-ratio:16/9;}

/* Topographic SVG pattern (utility) */
.topo-pattern{width:100%; height:100%;}

/* Approach steps */
.steps{list-style:none; counter-reset:step;}
.step{
  display:grid; grid-template-columns:90px 1fr; gap:1.6rem; padding:2.2rem 0;
  border-top:1px solid var(--line-200);
}
.step:last-child{border-bottom:1px solid var(--line-200);}
.step .n{font-family:var(--f-mono); font-size:1rem; color:var(--orange-600); padding-top:.2rem;}
@media (max-width:700px){.step{grid-template-columns:1fr;}}

/* Quote / pull */
.pull{
  border-left:3px solid var(--orange-500); padding-left:1.6rem; font-family:var(--f-head);
  font-size:1.3rem; color:var(--navy-950); font-weight:500; max-width:760px;
}

/* Table-like list */
.spec-list{border-top:1px solid var(--line-200);}
.spec-row{display:flex; justify-content:space-between; gap:2rem; padding:1rem 0; border-bottom:1px solid var(--line-200); font-family:var(--f-mono); font-size:.9rem;}
.spec-row span:first-child{color:var(--steel-500);}
.spec-row span:last-child{color:var(--navy-950); font-weight:500; text-align:right;}

/* Two column layout */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center;}
@media (max-width:860px){.split{grid-template-columns:1fr;}}

/* Footer */
footer.site{background:var(--navy-950); color:var(--navy-100); padding:4rem 0 2rem;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:3rem;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
footer.site h4{color:#fff; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.2rem;}
footer.site ul{list-style:none; display:flex; flex-direction:column; gap:.7rem;}
footer.site a{color:var(--navy-100); font-size:.92rem; transition:color var(--dur);}
footer.site a:hover{color:var(--orange-500);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-top:1.6rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-family:var(--f-mono); font-size:.76rem; color:var(--steel-300);
}

/* Forms */
.form-field{margin-bottom:1.4rem;}
.form-field label{display:block; font-family:var(--f-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--steel-500); margin-bottom:.5em;}
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:.85em 1em; border:1px solid var(--line-200); background:var(--paper-2);
  font-family:var(--f-body); font-size:.98rem; color:var(--navy-950); border-radius:var(--radius);
  transition:border-color var(--dur);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline:none; border-color:var(--orange-500);
}
.form-field textarea{resize:vertical; min-height:140px;}

/* Utility */
.text-center{text-align:center;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.tag{
  display:inline-block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--orange-600); background:var(--orange-100); padding:.3em .7em; border-radius:2px; margin-bottom:.6rem;
}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* Mobile nav */
@media (max-width:900px){
  .nav-links, .nav-cta .btn{display:none;}
  .burger{display:flex;}
  .nav-cta{gap:0;}
  header.site.open .nav-links{
    display:flex; position:absolute; top:100%; left:0; right:0; background:var(--paper-2);
    flex-direction:column; padding:1.5rem var(--gutter); gap:1.4rem; border-bottom:1px solid var(--line-200);
  }
  .stat-grid{grid-template-columns:repeat(2,1fr);}
}

/* CTA band */
.cta-band{
  background:var(--navy-950); color:#fff; padding:4rem 0; text-align:center;
}
.cta-band h2{color:#fff;}
.cta-band .lede{color:var(--navy-100); max-width:560px; margin:0 auto 2rem;}
.cta-band .ctas{display:flex; justify-content:center; gap:1rem; flex-wrap:wrap;}

/* Page hero (interior pages, shorter) */
.page-hero{background:var(--navy-950); color:#fff; padding:clamp(60px,10vw,100px) 0 clamp(40px,6vw,60px); position:relative; overflow:hidden;}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.2rem); color:#fff;}
.page-hero p.lede{color:var(--navy-100); max-width:640px; font-size:1.05rem;}

/* Insights */
.article-card{border-bottom:1px solid var(--line-200); padding:2.4rem 0; display:grid; grid-template-columns:140px 1fr; gap:2rem;}
@media (max-width:700px){.article-card{grid-template-columns:1fr;}}
.article-meta{font-family:var(--f-mono); font-size:.78rem; color:var(--steel-500); text-transform:uppercase; letter-spacing:.04em;}
.article-card h3 a:hover{color:var(--orange-600);}

.prose h2{margin-top:2.2em;}
.prose p{color:var(--steel-700);}
.prose ul{margin:0 0 1.4em 1.2em; padding:0;}
.prose li{margin-bottom:.5em; color:var(--steel-700);}