:root{
  --paper:#EDF0ED;
  --paper-dim:#E3E7E1;
  --paper-hi:#F7F8F6;
  --navy:#16233D;
  --navy-soft:#243350;
  --navy-line: rgba(22,35,61,0.14);
  --slate:#5B6478;
  --stamp:#B23A2E;
  --stamp-dim:#963026;
  --brass:#A67C3D;
  --sage:#3F6F62;
  --r-sm:6px;
  --r-md:14px;
  --r-lg:30px;
  --font-d:'IBM Plex Serif', Georgia, serif;
  --font-b:'IBM Plex Sans', -apple-system, sans-serif;
  --font-m:'IBM Plex Mono', 'Courier New', monospace;
  --maxw:1180px;
  --pad: clamp(56px, 9vw, 120px);
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth;}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:var(--font-b);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
::selection{background:var(--stamp); color:var(--paper-hi);}

:focus-visible{
  outline:2.5px solid var(--stamp);
  outline-offset:3px;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:clamp(20px,5vw,48px);
  padding-right:clamp(20px,5vw,48px);
}
.section{padding-top:var(--pad); padding-bottom:var(--pad);}

.eyebrow{
  font-family:var(--font-m);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--stamp);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:20px; height:1.5px;
  background:var(--stamp);
  display:inline-block;
}
h1,h2,h3{
  font-family:var(--font-d);
  font-weight:600;
  line-height:1.12;
  margin:0;
  letter-spacing:-0.01em;
}
h2{font-size:clamp(28px,3.6vw,42px); margin-top:14px;}
h3{font-size:20px;}
p{color:var(--slate); margin:0;}
.lede{font-size:clamp(16px,1.6vw,18.5px); max-width:56ch;}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:0.035; mix-blend-mode:multiply;
}

/* -------- NAV -------- */
header.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(237,240,237,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--navy-line);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto;
  padding:14px clamp(20px,5vw,48px);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none;}
.brand-mark{width:36px; height:36px; flex-shrink:0;}
.brand-text{display:flex; flex-direction:column; line-height:1.1;}
.brand-text strong{
  font-family:var(--font-m); font-weight:600; font-size:14.5px;
  letter-spacing:0.06em; color:var(--navy);
}
.brand-text span{
  font-family:var(--font-m); font-size:9.5px; letter-spacing:0.1em;
  color:var(--slate); text-transform:uppercase; margin-top:2px;
}
nav.links{display:flex; align-items:center; gap:32px;}
nav.links a{
  font-family:var(--font-m); font-size:12.5px; letter-spacing:0.05em;
  text-transform:uppercase; text-decoration:none; color:var(--navy);
  opacity:0.75; transition:opacity .15s ease;
}
nav.links a:hover{opacity:1;}
.nav-cta{display:flex; align-items:center; gap:18px;}

.btn{
  font-family:var(--font-m); font-size:12.5px; letter-spacing:0.05em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  border-radius:999px; padding:12px 22px; display:inline-flex;
  align-items:center; gap:8px; font-weight:500; border:1.5px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--stamp); color:var(--paper-hi);}
.btn-primary:hover{background:var(--stamp-dim);}
.btn-ghost{border-color:var(--navy); color:var(--navy); background:transparent;}
.btn-ghost:hover{background:var(--navy); color:var(--paper-hi);}
.btn-on-dark{border-color:rgba(237,240,237,0.4); color:var(--paper);}
.btn-on-dark:hover{background:var(--paper); color:var(--navy);}

.hamburger{
  display:none; background:none; border:none; cursor:pointer;
  width:34px; height:34px; flex-direction:column; justify-content:center;
  align-items:center; gap:5px;
}
.hamburger span{width:22px; height:1.5px; background:var(--navy); display:block;}
.mobile-panel{
  display:none; flex-direction:column; gap:2px;
  background:var(--paper-hi); border-bottom:1px solid var(--navy-line);
  padding: 6px clamp(20px,5vw,48px) 20px;
}
.mobile-panel a{
  font-family:var(--font-m); font-size:13px; letter-spacing:0.05em;
  text-transform:uppercase; text-decoration:none; color:var(--navy);
  padding:13px 0; border-bottom:1px solid var(--navy-line);
}
.mobile-panel.open{display:flex;}

@media (max-width:860px){
  nav.links{display:none;}
  .nav-cta .btn-ghost{display:none;}
  .hamburger{display:flex;}
}

/* -------- HERO -------- */
.hero{
  padding-top:clamp(56px,8vw,96px);
  padding-bottom:clamp(56px,8vw,96px);
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;
}
.hero-tags{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:30px;
}
.tag{
  font-family:var(--font-m); font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; border:1px solid var(--navy-line);
  border-radius:999px; padding:7px 13px; color:var(--navy-soft);
  background:var(--paper-hi);
}
.hero-ctas{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
.hero-visual{position:relative; display:flex; justify-content:center;}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; text-align:left;}
  .hero-visual{order:-1; margin-bottom:8px;}
  .hero-visual .stamp-seal{width:180px;}
}

/* -------- STAMP SEAL -------- */
.stamp-seal{
  width:220px; height:220px; color:var(--stamp);
  transform:translateY(-34px) rotate(-9deg) scale(1.14);
  opacity:0; transition:transform .55s cubic-bezier(.22,1.3,.36,1), opacity .4s ease;
}
.stamp-seal.in-view{
  opacity:0.92; transform:translateY(0) rotate(-7deg) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .stamp-seal{transition:opacity .4s ease; transform:rotate(-7deg);}
}
.stamp-ring-outer, .stamp-ring-inner{fill:none; stroke:currentColor; stroke-width:2;}
.stamp-text{
  font-family:var(--font-m); font-size:11.5px; letter-spacing:0.14em;
  fill:currentColor; text-transform:uppercase;
}
.stamp-center{
  font-family:var(--font-m); font-weight:600; font-size:16px;
  fill:currentColor; text-anchor:middle; letter-spacing:0.05em;
}
.stamp-icon{fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}

/* -------- PROBLEM / SOLUTION -------- */
.compare{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:52px;
  background:var(--navy-line); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--navy-line);
}
.compare-col{background:var(--paper-hi); padding:clamp(28px,4vw,44px);}
.compare-col h4{
  font-family:var(--font-m); text-transform:uppercase; font-size:12px;
  letter-spacing:0.08em; margin:0 0 22px; font-weight:600;
}
.compare-col.bad h4{color:var(--stamp);}
.compare-col.good h4{color:var(--sage);}
.compare ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.compare li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--navy-soft);}
.compare li svg{flex-shrink:0; margin-top:3px; width:18px; height:18px;}
.compare-col.bad svg{stroke:var(--stamp);}
.compare-col.good svg{stroke:var(--sage);}
@media (max-width:760px){ .compare{grid-template-columns:1fr;} }

/* -------- PROCESS (dark panel) -------- */
.process{background:var(--navy); color:var(--paper);}
.process .eyebrow{color:var(--brass);}
.process .eyebrow::before{background:var(--brass);}
.process h2{color:var(--paper);}
.process .lede{color:rgba(237,240,237,0.68);}
.steps{
  margin-top:56px; display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:rgba(237,240,237,0.14); border-radius:var(--r-lg); overflow:hidden;
}
.step{background:var(--navy-soft); padding:30px 22px; display:flex; flex-direction:column; gap:16px; min-height:230px;}
.step-num{font-family:var(--font-m); font-size:13px; color:var(--brass); letter-spacing:0.08em;}
.step h3{color:var(--paper); font-size:17.5px;}
.step p{color:rgba(237,240,237,0.62); font-size:14px;}
@media (max-width:980px){
  .steps{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .steps{grid-template-columns:1fr;}
}
.process-stamp-row{display:flex; justify-content:center; margin-top:56px;}
.process .stamp-seal{width:150px; height:150px; color:var(--brass);}

/* -------- CATEGORIES -------- */
.cat-grid{
  margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.cat-card{
  background:var(--paper-hi); border:1px solid var(--navy-line); border-radius:var(--r-md);
  padding:30px 26px; display:flex; flex-direction:column; gap:16px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.cat-card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(22,35,61,0.08);}
.cat-icon{width:38px; height:38px; stroke:var(--stamp); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;}
.cat-card h3{font-size:18px;}
.cat-card p{font-size:14.5px;}
@media (max-width:900px){ .cat-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .cat-grid{grid-template-columns:1fr;} }

/* -------- WHY US -------- */
.pillars{margin-top:52px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--navy-line); border:1px solid var(--navy-line); border-radius:var(--r-lg); overflow:hidden;}
.pillar{background:var(--paper-hi); padding:30px 24px; display:flex; flex-direction:column; gap:14px;}
.pillar-num{font-family:var(--font-m); font-size:11.5px; color:var(--sage); letter-spacing:0.08em;}
.pillar h3{font-size:16.5px;}
.pillar p{font-size:14px;}
@media (max-width:900px){ .pillars{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .pillars{grid-template-columns:1fr;} }

/* -------- CONTACT -------- */
.contact-grid{margin-top:52px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.contact-side{display:flex; flex-direction:column; gap:26px;}
.contact-side .stamp-seal{width:150px;}
.info-line{display:flex; flex-direction:column; gap:4px;}
.info-line span.label{font-family:var(--font-m); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate);}
.info-line span.value{font-size:16px; color:var(--navy);}

form{display:flex; flex-direction:column; gap:16px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
label{
  font-family:var(--font-m); font-size:11px; text-transform:uppercase;
  letter-spacing:0.07em; color:var(--slate); display:block; margin-bottom:7px;
}
input, select, textarea{
  width:100%; font-family:var(--font-b); font-size:15px; color:var(--navy);
  background:var(--paper-hi); border:1.5px solid var(--navy-line); border-radius:var(--r-sm);
  padding:12px 14px; font-size:14.5px;
}
textarea{resize:vertical; min-height:100px;}
input:focus, select:focus, textarea:focus{border-color:var(--stamp);}
.field{display:flex; flex-direction:column;}
.submit-row{display:flex; align-items:center; gap:16px; margin-top:6px;}
.form-note{font-family:var(--font-m); font-size:11.5px; color:var(--slate);}
.confirm-msg{
  display:none; font-family:var(--font-m); font-size:13px; color:var(--sage);
  border:1px dashed var(--sage); border-radius:var(--r-sm); padding:12px 16px; margin-top:6px;
}
.confirm-msg.show{display:block;}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} }

/* -------- FOOTER -------- */
footer{background:var(--navy); color:rgba(237,240,237,0.65); padding:44px 0 30px;}
.footer-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,48px);
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
}
footer .brand-text strong{color:var(--paper);}
footer .brand-text span{color:rgba(237,240,237,0.5);}
.footer-links{display:flex; gap:22px; flex-wrap:wrap;}
.footer-links a{font-family:var(--font-m); font-size:12px; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; opacity:0.75;}
.footer-links a:hover{opacity:1;}
.footer-bottom{
  max-width:var(--maxw); margin:22px auto 0; padding:18px clamp(20px,5vw,48px) 0;
  border-top:1px solid rgba(237,240,237,0.14);
  font-family:var(--font-m); font-size:11.5px; color:rgba(237,240,237,0.45);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* reveal-on-scroll (generic) */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{transition:opacity .3s ease; transform:none;}
}