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

:root{
  --ink:#14213D;
  --ink-2:#1c2c52;
  --brass:#B08D57;
  --brass-light:#D4B583;
  --maroon:#7A1F2B;
  --paper:#EFE7D8;
  --paper-2:#E4D9C2;
  --charcoal:#1B1B1B;
  --line: rgba(176,141,87,0.35);
  --paper-line: rgba(27,27,27,0.15);
  --display: 'Space Grotesk', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --body: 'Inter', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  background:var(--ink);
  color:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}

/* ---------- Nav ---------- */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(20,33,61,0.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 28px; max-width:1120px; margin:0 auto;}
.brand{font-family:var(--display); font-weight:700; font-size:1.25rem; letter-spacing:0.01em; color:var(--paper); display:flex; align-items:baseline; gap:8px;}
.brand .ledger-no{font-family:var(--mono); font-size:0.7rem; color:var(--brass-light); border:1px solid var(--line); padding:2px 6px; border-radius:2px;}
nav.links{display:flex; gap:32px; font-size:0.92rem;}
nav.links a{position:relative; padding:4px 0; color:var(--paper); opacity:0.85;}
nav.links a:hover, nav.links a.active{opacity:1; color:var(--brass-light);}
nav.links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--brass);}
.nav-cta{font-family:var(--mono); font-size:0.82rem; border:1px solid var(--brass); color:var(--brass-light); padding:8px 16px; border-radius:2px; white-space:nowrap;}
.nav-cta:hover{background:var(--brass); color:var(--ink);}
.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--paper); font-family:var(--mono); padding:6px 10px; border-radius:2px;}

@media (max-width:820px){
  nav.links{position:fixed; top:64px; left:0; right:0; bottom:0; background:var(--ink); flex-direction:column; padding:32px 28px; gap:24px; font-size:1.05rem; transform:translateX(100%); transition:transform 0.3s ease; z-index:49;}
  nav.links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
}

/* ---------- Page header (ledger page style) ---------- */
.page-header{
  padding:64px 0 40px;
  border-bottom:1px solid var(--line);
}
.eyebrow{font-family:var(--mono); font-size:0.78rem; color:var(--brass-light); text-transform:uppercase; letter-spacing:0.12em; margin-bottom:14px; display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--brass);}
h1{font-family:var(--display); font-weight:700; font-size:clamp(2.1rem,4.5vw,3.4rem); line-height:1.08; letter-spacing:-0.01em;}
.page-header p.lede{margin-top:18px; max-width:560px; color:var(--paper); opacity:0.75; font-size:1.05rem;}

/* ---------- Ledger table (signature element) ---------- */
.ledger{
  background:var(--paper);
  color:var(--charcoal);
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
}
.ledger-head{
  display:grid;
  grid-template-columns:60px 1.4fr 1fr 1fr;
  gap:12px;
  padding:14px 24px;
  font-family:var(--mono);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--maroon);
  border-bottom:2px solid var(--charcoal);
}
.ledger-row{
  display:grid;
  grid-template-columns:60px 1.4fr 1fr 1fr;
  gap:12px;
  padding:16px 24px;
  border-bottom:1px solid var(--paper-line);
  font-size:0.92rem;
  align-items:center;
}
.ledger-row:last-child{border-bottom:none;}
.ledger-row .sl{font-family:var(--mono); color:var(--maroon); font-weight:600;}
.ledger-row .grow{font-family:var(--mono); font-weight:600; color:#1d6b3d;}
@media (max-width:640px){
  .ledger-head{display:none;}
  .ledger-row{grid-template-columns:1fr; gap:4px; padding:16px 20px;}
  .ledger-row .sl{font-size:0.75rem;}
}

/* ---------- Hero ---------- */
.hero{padding:88px 0 60px; position:relative;}
.hero-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center;}
.hero h1{margin-bottom:4px;}
.hero .lede{margin-top:20px; max-width:520px; font-size:1.08rem; color:var(--paper); opacity:0.78;}
.hero-cta-row{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;}
.btn-primary{font-family:var(--mono); background:var(--brass); color:var(--ink); padding:14px 26px; border-radius:2px; font-size:0.9rem; font-weight:600; letter-spacing:0.02em;}
.btn-primary:hover{background:var(--brass-light);}
.btn-ghost{font-family:var(--mono); border:1px solid var(--line); color:var(--paper); padding:14px 26px; border-radius:2px; font-size:0.9rem;}
.btn-ghost:hover{border-color:var(--brass);}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}}

/* ---------- Sections ---------- */
section{padding:72px 0;}
.section-head{margin-bottom:40px; max-width:620px;}
.section-head h2{font-family:var(--display); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:600; letter-spacing:-0.01em;}
.section-head p{margin-top:12px; opacity:0.75;}
.rule{border:none; border-top:1px solid var(--line); margin:0;}

/* ---------- Service cards ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden;}
@media (max-width:820px){.grid-3{grid-template-columns:1fr;}}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden;}
@media (max-width:700px){.grid-2{grid-template-columns:1fr;}}
.card{background:var(--ink-2); padding:32px 28px;}
.card .num{font-family:var(--mono); color:var(--brass-light); font-size:0.78rem; margin-bottom:16px; display:block;}
.card h3{font-family:var(--display); font-size:1.15rem; font-weight:600; margin-bottom:10px;}
.card p{opacity:0.72; font-size:0.94rem;}
.card ul{margin-top:14px; padding-left:0; list-style:none; font-size:0.88rem; opacity:0.68;}
.card ul li{padding:4px 0 4px 16px; position:relative;}
.card ul li::before{content:"—"; position:absolute; left:0; color:var(--brass);}

/* ---------- Stats strip ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat{padding:32px 20px; border-right:1px solid var(--line); text-align:center;}
.stat:last-child{border-right:none;}
.stat .n{font-family:var(--mono); font-size:2rem; font-weight:600; color:var(--brass-light);}
.stat .l{font-size:0.8rem; opacity:0.65; margin-top:6px;}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,1fr);} .stat:nth-child(2){border-right:none;}}

/* ---------- Testimonial / quote block ---------- */
.quote-block{background:var(--paper); color:var(--charcoal); padding:44px 40px; border-radius:3px; position:relative;}
.quote-block .mark{font-family:var(--display); font-size:3rem; color:var(--maroon); line-height:0.5; display:block; margin-bottom:16px;}
.quote-block p.q{font-size:1.15rem; font-family:var(--display); font-weight:500; max-width:640px;}
.quote-block .attr{margin-top:20px; font-family:var(--mono); font-size:0.8rem; color:var(--maroon);}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); padding:48px 0 32px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr; gap:28px;}}
footer h4{font-family:var(--mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--brass-light); margin-bottom:14px;}
footer ul{list-style:none;}
footer li{margin-bottom:8px; font-size:0.9rem; opacity:0.75;}
footer li a:hover{opacity:1; color:var(--brass-light);}
.footer-bottom{margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-family:var(--mono); font-size:0.75rem; opacity:0.55; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

/* ---------- Forms ---------- */
.form-panel{background:var(--paper); color:var(--charcoal); padding:40px; border-radius:3px;}
.form-row{margin-bottom:20px;}
.form-row label{display:block; font-family:var(--mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; color:var(--maroon);}
.form-row input, .form-row select, .form-row textarea{
  width:100%; border:none; border-bottom:1.5px solid var(--charcoal); background:transparent; padding:10px 4px; font-family:var(--body); font-size:0.98rem; color:var(--charcoal);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{outline:none; border-color:var(--maroon);}
.form-row textarea{resize:vertical; min-height:90px;}
.submit-btn{font-family:var(--mono); background:var(--charcoal); color:var(--paper); padding:14px 28px; border-radius:2px; border:none; font-size:0.9rem; font-weight:600; cursor:pointer;}
.submit-btn:hover{background:var(--maroon);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px;
}

/* portfolio */
.portfolio-item{padding:24px 28px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:40px 90px 1fr 1fr; gap:20px; align-items:center;}
.portfolio-item .thumb{width:90px; height:70px; object-fit:cover; border-radius:2px; display:block;}
.portfolio-item:first-child{border-top:1px solid var(--line);}
@media (max-width:700px){.portfolio-item{grid-template-columns:1fr; gap:8px;}}
.portfolio-item .sl{font-family:var(--mono); color:var(--brass-light); font-size:0.85rem;}
.portfolio-item h3{font-family:var(--display); font-size:1.1rem; margin-bottom:6px;}
.portfolio-item .tag{font-family:var(--mono); font-size:0.72rem; color:var(--brass-light); opacity:0.9; text-transform:uppercase; letter-spacing:0.06em;}
.portfolio-item .result{font-family:var(--mono); font-size:0.92rem; color:#8fce9f;}