:root{
  --navy:#0b2545; --navy-soft:#12365f; --ink:#0f172a; --muted:#5b6b80;
  --line:#e3e8ef; --bg:#ffffff; --bg-soft:#f6f8fb; --accent:#e8752b; --accent-soft:#fdf1e8;
  --radius:12px; --maxw:960px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
a{color:var(--navy); text-decoration:none}
a:hover{text-decoration:underline}

/* header */
header.site{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; color:var(--navy)}
.brand svg{display:block}
.brand small{display:block; font-weight:500; font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
nav.main{display:flex; gap:22px; font-size:15px}
nav.main a{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--accent); font-weight:600}

/* hero */
.hero{padding:72px 0 56px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-soft),#fff)}
.hero h1{margin:0 0 14px; font-size:clamp(30px,5vw,46px); line-height:1.12; letter-spacing:-.02em; color:var(--navy)}
.hero p.lede{margin:0 0 26px; font-size:19px; color:var(--muted); max-width:44em}
.eyebrow{display:inline-block; margin-bottom:16px; padding:5px 12px; border-radius:999px;
  background:var(--accent-soft); color:#9a4a10; font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase}
.cta{display:flex; flex-wrap:wrap; gap:12px}
.btn{display:inline-block; padding:12px 22px; border-radius:999px; font-weight:600; font-size:15px}
.btn.primary{background:var(--navy); color:#fff}
.btn.primary:hover{background:var(--navy-soft); text-decoration:none}
.btn.ghost{border:1.5px solid var(--line); color:var(--navy)}
.btn.ghost:hover{border-color:var(--navy); text-decoration:none}

/* sections */
section{padding:60px 0}
section.alt{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
h2{margin:0 0 8px; font-size:clamp(22px,3.2vw,30px); color:var(--navy); letter-spacing:-.01em}
h3{margin:0 0 6px; font-size:18px; color:var(--navy)}
.sub{margin:0 0 34px; color:var(--muted); max-width:46em}
.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.card p{margin:0; color:var(--muted); font-size:15px}
.card .tag{display:inline-block; margin-bottom:10px; font-size:11.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.card:hover{border-color:#c9d4e2}
ul.clean{margin:10px 0 0; padding-left:18px; color:var(--muted); font-size:15px}
ul.clean li{margin:4px 0}

/* portfolio */
.work{border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:#fff}
.work + .work{margin-top:18px}
.work .meta{font-size:13px; color:var(--muted); margin:0 0 10px}
.work .outcome{margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); font-size:14.5px}
.work .outcome strong{color:var(--navy)}

/* credentials strip */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.chip{border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13.5px; color:var(--navy); background:#fff}

/* contact */
.contact{border:1px solid var(--line); border-radius:var(--radius); padding:28px; background:#fff}
.contact a.mail{font-size:19px; font-weight:600}

/* footer */
footer.site{padding:34px 0 46px; border-top:1px solid var(--line); color:var(--muted); font-size:14px}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between}

/* placeholder marker — remove once copy is final */
.ph{background:#fff8e6; border-bottom:1px dashed #e0b96a; padding:0 3px}
.note{border-left:3px solid var(--accent); background:var(--accent-soft); padding:12px 16px;
  border-radius:0 var(--radius) var(--radius) 0; font-size:14.5px; color:#7a3a0c; margin:0 0 30px}

@media (max-width:640px){
  nav.main{gap:14px; font-size:14px}
  .brand small{display:none}
  section{padding:44px 0}
}
@media print{
  header.site,footer.site,.cta{display:none}
}