/* ---------- Tokens ---------- */
:root{
  --paper:#f1ece2; --ink:#181a17; --mute:#67645b; --line:#d8d1c2; --sand:#ddd3bf;
  --green:#1e4d3a; --green-dk:#12261c; --green-lt:#9fd0b2; --error:#9b1c1c;
  --pad:clamp(1.25rem,5vw,4rem); --max:1240px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:.3s ease;
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font:400 1rem/1.65 var(--sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(5rem,10vw,9rem) 0}
.muted{color:var(--mute)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(2.7rem,6.6vw,5.6rem);line-height:1.02}
h2{font-size:clamp(2.1rem,4.4vw,3.6rem)}

/* ---------- Buttons & links ---------- */
.btn{display:inline-block;padding:.95rem 1.6rem;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:2px;font:500 .95rem var(--sans);cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.btn:hover{background:var(--green);border-color:var(--green)}
.btn-sm{padding:.5rem 1.05rem;font-size:.85rem;background:transparent;color:var(--ink)}
.btn-sm:hover{color:var(--paper)}
.link{padding-bottom:2px;border-bottom:1px solid currentColor;transition:color var(--ease)}
.link:hover{color:var(--green)}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;border-bottom:1px solid transparent;transition:background var(--ease),border-color var(--ease)}
.site-header.scrolled{background:rgba(241,236,226,.95);border-color:var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:84px;transition:height var(--ease)}
.scrolled .bar{height:60px}
.logo{position:relative;z-index:2;display:flex;align-items:center;gap:.6rem;font:500 1.15rem var(--serif)}
.logo small{margin-left:.15rem;font:500 .7rem var(--sans);color:var(--mute)}
.dot{fill:var(--green)}
.nav{display:flex;align-items:center;gap:2rem;font-size:.9rem}
.nav a:not(.btn){position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform var(--ease)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.burger{display:none;position:relative;z-index:2;width:44px;height:44px;background:none;border:0;cursor:pointer}
.burger span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:transform var(--ease)}
.burger span:first-child{top:18px}
.burger span:last-child{top:26px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{padding-top:9rem}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,6rem);align-items:end}
.lead{max-width:34rem;margin:1.75rem 0 2.25rem;font-size:1.125rem;color:var(--mute)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem}
.hero-art{position:relative}
.hero-art svg{width:100%;height:auto}
.g{fill:var(--green)} .k{fill:var(--ink)} .s{fill:var(--sand)}
.ln{fill:none;stroke:var(--paper);stroke-width:1.5}
.ln.soft{stroke-opacity:.25}
.ln.dk{stroke:var(--ink)}
.tag{position:absolute;top:1.25rem;left:-1rem;padding:.45rem .85rem;background:var(--paper);border:1px solid var(--ink);font-size:.8rem}
.note{position:absolute;left:1.25rem;bottom:1.25rem;max-width:10.5rem;color:var(--paper);font-size:.85rem;line-height:1.4}
.note b{display:block;font:400 3.2rem/1 var(--serif)}
.areas{display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;margin-top:4rem;padding:1.25rem 0;border-top:1px solid var(--ink);font-size:.9rem}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem}
.about h2{grid-column:1/8}
.about-text{grid-column:8/13;align-self:end;color:var(--mute)}
.about-text p+p{margin-top:1rem}
.about-art{grid-column:1/8;position:relative;margin-top:2rem}
.about-art svg{width:100%;height:auto}
.statement{position:absolute;right:-3rem;bottom:-2.5rem;max-width:20rem;padding:1.5rem;background:var(--ink);color:var(--paper);font:400 1.3rem/1.3 var(--serif)}
.facts{grid-column:8/13;align-self:center}
.facts li{display:flex;gap:1.25rem;align-items:baseline;padding:1.1rem 0;border-top:1px solid var(--line);color:var(--mute);font-size:.95rem;line-height:1.45}
.facts li:last-child{border-bottom:1px solid var(--line)}
.facts b{min-width:3rem;font:400 2.6rem/1 var(--serif);color:var(--green)}

/* ---------- Services ---------- */
.services{border-top:1px solid var(--line)}
.svc-grid{display:grid;grid-template-columns:4fr 8fr;gap:clamp(2rem,6vw,6rem)}
.svc-intro{position:sticky;top:110px;align-self:start}
.svc-intro p{max-width:24rem;margin-top:1.25rem;color:var(--mute)}
.svc{display:grid;grid-template-columns:3rem 3rem 1fr;gap:1.25rem;padding:2rem 0;border-top:1px solid var(--ink);transition:padding var(--ease),background var(--ease)}
.svc:last-child{border-bottom:1px solid var(--ink)}
.svc:hover{padding-left:1rem;background:rgba(30,77,58,.07)}
.svc .n{font:italic 1.3rem var(--serif);color:var(--green)}
.svc svg{width:32px;height:32px;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.svc h3{margin-bottom:.4rem;font-size:1.6rem}
.svc p{max-width:36rem;color:var(--mute)}
.svc.feat{padding:2.75rem 0;border-top:3px solid var(--green)}
.svc.feat h3{font-size:2.3rem}

/* ---------- Approach (dark) ---------- */
.dark{background:var(--green-dk);color:var(--paper)}
.why-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.5rem 3rem;margin-bottom:4.5rem}
.why-head p{max-width:26rem;color:#b8c4bb}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.why-grid article{padding:0 1.5rem 2rem;border-left:1px solid #3c5446}
.why-grid article:nth-child(even){margin-top:3.5rem}
.why-grid article:first-child{padding-left:0;border-left:0}
.num{display:block;margin-bottom:1.5rem;font:400 clamp(3.4rem,6vw,5.4rem)/1 var(--serif);color:var(--green-lt)}
.why-grid h3{margin-bottom:.6rem;font-size:1.45rem}
.why-grid p{color:#b8c4bb;font-size:.95rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,6rem)}
.info p{max-width:26rem;margin-top:1.25rem;color:var(--mute)}
.info dl{display:grid;gap:1.6rem;margin-top:2.5rem}
.info dt{margin-bottom:.2rem;font-size:.8rem;font-weight:600;color:var(--green)}
.info dd{font:400 1.3rem/1.4 var(--serif)}
.info a{border-bottom:1px solid var(--ink);transition:color var(--ease),border-color var(--ease)}
.info a:hover{color:var(--green);border-color:var(--green)}
form{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 1.75rem;padding:clamp(1.5rem,4vw,3rem);border:1px solid var(--ink)}
.field{display:flex;flex-direction:column;gap:.3rem}
.field.full,.status{grid-column:1/-1}
label{font-size:.85rem;font-weight:500}
label small{font-weight:400;color:var(--mute)}
input,textarea{padding:.7rem 0;font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;outline:0;transition:border-color var(--ease),box-shadow var(--ease)}
input:focus,textarea:focus{border-color:var(--green);box-shadow:0 1px 0 var(--green)}
textarea{min-height:7rem;resize:vertical}
[aria-invalid="true"]{border-color:var(--error)}
.err{min-height:1.2em;font-size:.8rem;color:var(--error)}
.field .btn{align-self:flex-start}
.status{padding:.9rem 1rem;font-size:.95rem;border-left:3px solid}
.status:empty{display:none}
.status.ok{border-color:var(--green);background:rgba(30,77,58,.08)}
.status.bad{border-color:var(--error);background:rgba(155,28,28,.07)}

/* ---------- Footer ---------- */
footer{padding:4rem 0 2rem;border-top:1px solid var(--ink)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:2.5rem}
.foot-brand{margin-bottom:.6rem;font:500 1.3rem var(--serif)}
footer h4{margin-bottom:.8rem;font-size:.85rem;font-weight:600;color:var(--green)}
footer ul{display:grid;gap:.45rem;font-size:.95rem}
footer ul a{transition:color var(--ease)}
footer ul a:hover{color:var(--green)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3.5rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--mute)}
.legal a:hover{color:var(--green)}

/* ---------- Reveal on scroll ---------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .burger{display:block}
  .nav{position:fixed;inset:0;flex-direction:column;align-items:flex-start;gap:1.4rem;padding:7rem var(--pad) 2rem;background:var(--paper);font:400 1.8rem var(--serif);visibility:hidden;transform:translateY(-100%);transition:transform var(--ease),visibility var(--ease)}
  .nav.open{visibility:visible;transform:none}
  .nav .btn-sm{margin-top:1rem;padding:.8rem 1.4rem;font:500 .95rem var(--sans)}
  .hero{padding-top:7rem}
  .hero-grid,.svc-grid,.contact-grid{grid-template-columns:1fr}
  .about h2,.about-text,.about-art,.facts{grid-column:1/-1}
  .statement{position:static;max-width:none}
  .svc-intro{position:static}
  .why-grid{grid-template-columns:1fr 1fr;row-gap:2rem}
  .why-grid article:nth-child(even){margin-top:0}
  .why-grid article:nth-child(3){padding-left:0;border-left:0}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .why-grid,.foot-grid,form{grid-template-columns:1fr}
  .why-grid article{padding-left:0;border-left:0}
  .svc{grid-template-columns:2.5rem 1fr;gap:.75rem 1rem}
  .svc>div{grid-column:1/-1}
  .svc.feat h3{font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .js .reveal{opacity:1;transform:none}
}