:root{
  --paper:#EDEDE5; --paper2:#F5F4EE; --ink:#1C1F1D; --ink-soft:#4A4E48;
  --pine:#2F5D50; --pine-dark:#234840; --brass:#C98A2B; --card:#FFFFFF;
  --line:#D9D4C4; --serif:'Fraunces',serif; --sans:'IBM Plex Sans',sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#181A17; --paper2:#1F221D; --ink:#EFEEE7; --ink-soft:#B8BAB3; --card:#22251F; --line:#33362D; }
}
:root[data-theme="dark"]{ --paper:#181A17; --paper2:#1F221D; --ink:#EFEEE7; --ink-soft:#B8BAB3; --card:#22251F; --line:#33362D; }
html{scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth;}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.5;}
img{max-width:100%;}
.wrap{max-width:1040px; margin:0 auto; padding:0 28px;}
header{position:sticky; top:0; top:env(safe-area-inset-top,0px); background:var(--paper); z-index:10; border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 28px; max-width:1040px; margin:0 auto;}
.brand{font-family:var(--serif); font-size:1.25rem; font-weight:600; letter-spacing:.01em;}
.brand span{color:var(--pine);}
nav ul{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
nav a{color:var(--ink-soft); text-decoration:none; font-size:.95rem;}
nav a:hover, nav a:focus-visible{color:var(--pine);}
.navlinks{display:flex;}
@media (max-width:640px){ .navlinks{display:none;} }

.hero{padding:76px 0 60px; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
@media (max-width:800px){ .hero{grid-template-columns:1fr; padding:48px 0 40px;} }
.hero h1{font-family:var(--serif); font-weight:500; font-size:clamp(2.1rem,4.4vw,3.1rem); line-height:1.12; margin:0 0 20px; max-width:22ch;}
.hero p{color:var(--ink-soft); font-size:1.08rem; max-width:46ch; margin:0 0 28px;}
.hero .kicker{color:var(--pine); font-weight:600; font-size:.9rem; margin:0 0 12px;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn{font-family:var(--sans); font-weight:600; font-size:.95rem; padding:13px 24px; border-radius:3px; text-decoration:none; display:inline-block; border:1px solid transparent; cursor:pointer;}
.btn-primary{background:var(--pine); color:#fff;}
.btn-primary:hover{background:var(--pine-dark);}
.btn-ghost{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}

.mock{background:var(--card); border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:0 1px 0 var(--line);}
.mock-bar{display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid var(--line);}
.mock-bar i{width:9px; height:9px; border-radius:50%; background:var(--line);}
.mock-body{padding:22px;}
.mock-row{display:flex; justify-content:space-between; align-items:baseline; padding:11px 0; border-bottom:1px dashed var(--line); font-size:.92rem;}
.mock-row:last-child{border-bottom:none;}
.mock-row .old{color:var(--ink-soft); text-decoration:line-through; font-size:.85rem;}
.mock-row .new{color:var(--pine); font-weight:600; font-family:var(--serif); font-size:1.15rem;}

section{padding:56px 0; border-top:1px solid var(--line);}
h2{font-family:var(--serif); font-weight:500; font-size:1.8rem; margin:0 0 8px;}
.lede{color:var(--ink-soft); max-width:54ch; margin:0 0 34px;}

.services{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:640px){ .services{grid-template-columns:1fr;} }
.svc{background:var(--paper2); padding:26px 24px;}
.svc h3{font-family:var(--serif); font-weight:500; font-size:1.15rem; margin:0 0 8px;}
.svc p{color:var(--ink-soft); margin:0; font-size:.94rem;}

.why{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
@media (max-width:720px){ .why{grid-template-columns:1fr;} }
.why-list{list-style:none; margin:0; padding:0;}
.why-list li{padding:14px 0; border-bottom:1px solid var(--line); display:flex; gap:14px;}
.why-list li:first-child{padding-top:0;}
.why-list b{font-family:var(--serif); font-weight:500; display:block;}
.why-mark{color:var(--brass); font-family:var(--serif); font-size:1.1rem; flex-shrink:0;}

.folio{border:1px solid var(--line); border-radius:6px; background:var(--card); padding:28px; display:flex; gap:22px; align-items:center; flex-wrap:wrap;}
.folio-tag{font-size:.75rem; color:var(--pine); font-weight:600; margin-bottom:6px;}
.folio h3{font-family:var(--serif); font-weight:500; margin:0 0 6px; font-size:1.3rem;}
.folio p{color:var(--ink-soft); margin:0 0 14px; max-width:44ch; font-size:.95rem;}
.folio a{color:var(--pine); font-weight:600; text-decoration:none;}
.folio a:hover{text-decoration:underline;}
.folio-side{margin-left:auto; text-align:right; font-family:var(--serif); color:var(--ink-soft); font-size:.9rem;}
@media (max-width:560px){ .folio-side{margin-left:0; text-align:left;} }

form{display:grid; gap:14px; max-width:480px;}
label{font-size:.85rem; color:var(--ink-soft); display:block; margin-bottom:5px;}
input,textarea{width:100%; font-family:var(--sans); font-size:.95rem; padding:11px 13px; border:1px solid var(--line); border-radius:3px; background:var(--card); color:var(--ink);}
input:focus,textarea:focus,a:focus-visible,button:focus-visible{outline:2px solid var(--pine); outline-offset:2px;}
textarea{min-height:110px; resize:vertical;}
.form-msg{font-size:.9rem; margin-top:6px;}
.form-msg.ok{color:var(--pine);}
.form-msg.err{color:#a33;}

footer{border-top:1px solid var(--line); padding:30px 0; color:var(--ink-soft); font-size:.88rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }