:root{--bg:#efebe3;--ink:#1d1f1c;--mute:#66685f;--line:#cfc9bb;--acc:#2f5a47;--acc-l:#9cc2ab;--dark:#1a221e;
--pad:clamp(1.25rem,5vw,4rem);--gap:clamp(1.5rem,4vw,3.5rem);--sec:clamp(4.5rem,10vw,8.5rem);
--serif:"Instrument Serif",Georgia,"Times New Roman",serif;--sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--ease:.25s ease}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font:400 1.0625rem/1.65 var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ol{list-style:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--pad)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.015em}
h1{font-size:clamp(3rem,7.4vw,6.5rem)}
h2{font-size:clamp(2.2rem,4.8vw,4rem)}
h3{font-size:1.75rem;line-height:1.1}
p+p{margin-top:1rem}
.label{font-size:.9rem;font-weight:500;color:var(--acc);margin-bottom:1.5rem}
.lead{font-size:1.25rem;color:var(--mute);max-width:34ch;margin-top:1.75rem}
.btn{display:inline-block;padding:.95rem 1.6rem;background:var(--ink);color:var(--bg);font:500 .95rem var(--sans);border:1px solid var(--ink);border-radius:2px;cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.btn:hover{background:var(--acc);border-color:var(--acc)}
.btn-sm{padding:.5rem 1rem;font-size:.85rem}
.link{border-bottom:1px solid currentColor;padding-bottom:2px;transition:color var(--ease)}
.link:hover{color:var(--acc)}

/* Header */
.site-header{position:fixed;inset:0 0 auto;z-index:10;padding:1.4rem 0;transition:padding var(--ease),background var(--ease),border-color var(--ease);border-bottom:1px solid transparent}
.site-header.compact{padding:.7rem 0;background:rgba(239,235,227,.96);border-color:var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--serif);font-size:1.5rem;letter-spacing:-.01em}
.logo b{font-weight:400;border-bottom:2px solid var(--acc);margin-right:.2rem}
#nav{display:flex;align-items:center;gap:2rem;font-size:.92rem}
#nav a:not(.btn){position:relative;padding:.2rem 0}
#nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform var(--ease)}
#nav a:not(.btn):hover::after{transform:scaleX(1)}
.burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;position:relative}
.burger span{position:absolute;left:8px;right:8px;height:2px;background:var(--ink);transition:transform var(--ease),top var(--ease)}
.burger span:first-child{top:15px}.burger span:last-child{top:23px}
.burger[aria-expanded="true"] span:first-child{top:19px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:19px;transform:rotate(-45deg)}

/* Hero */
.hero{display:grid;grid-template-columns:7fr 5fr;gap:var(--gap);align-items:center;min-height:100svh;padding-top:7rem;padding-bottom:4rem}
.actions{display:flex;align-items:center;gap:2rem;margin-top:2.25rem;flex-wrap:wrap}
.art{position:relative;aspect-ratio:4/5;max-height:640px;justify-self:end;width:100%}
.art i{position:absolute;display:block}
.art .a{inset:0 0 22% 18%;background:var(--acc)}
.art .a::after{content:"";position:absolute;right:12%;top:12%;width:34%;aspect-ratio:1;border-radius:50%;background:var(--bg)}
.art .b{left:0;bottom:0;width:48%;height:46%;background:var(--dark)}
.art .c{right:0;bottom:6%;width:38%;height:30%;border:1px solid var(--ink);background:repeating-linear-gradient(135deg,transparent 0 9px,var(--line) 9px 10px)}
.tag{position:absolute;left:52%;bottom:-1.5rem;font-size:.85rem;color:var(--mute);max-width:18ch}

/* About */
.about{padding-block:var(--sec)}
.about h2{max-width:18ch;margin-bottom:var(--gap)}
.about-grid{display:grid;grid-template-columns:6fr 5fr;gap:var(--gap);align-items:start}
.about-grid>div{max-width:56ch}
.facts{margin-top:2rem;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.facts dt{font-weight:600}.facts dd{color:var(--mute)}
.statement{background:var(--dark);color:var(--bg);padding:clamp(2rem,5vw,3.5rem);margin-top:3rem;margin-left:-3rem;font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15;border-left:6px solid var(--acc)}

/* Services */
.services{border-block:1px solid var(--line);padding-block:var(--sec)}
.svc{display:grid;grid-template-columns:4fr 7fr;gap:var(--gap);align-items:start}
.svc-intro{position:sticky;top:6rem}
.svc-intro p{color:var(--mute);margin-top:1.25rem;max-width:32ch}
.rows{counter-reset:s;border-top:1px solid var(--ink)}
.row{counter-increment:s;display:grid;grid-template-columns:3rem 1fr;gap:1.25rem;padding:1.9rem 0;border-bottom:1px solid var(--line);position:relative;transition:padding var(--ease)}
.row::before{content:counter(s,decimal-leading-zero);position:absolute;right:0;top:1.9rem;font-family:var(--serif);font-size:1.4rem;color:var(--line);transition:color var(--ease)}
.row svg{width:32px;height:32px;fill:none;stroke:var(--acc);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-top:.2rem}
.row p{color:var(--mute);margin-top:.6rem;max-width:50ch}
.row:hover{padding-left:.75rem}
.row:hover::before{color:var(--acc)}

/* Approach */
.dark{background:var(--dark);color:var(--bg);padding-block:var(--sec)}
.dark h2{margin-bottom:clamp(2.5rem,6vw,5rem)}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #3b4640}
.benefits article{padding:2rem 1.5rem 0 0;margin-right:1.5rem;border-right:1px solid #3b4640}
.benefits article:last-child{border:0;margin:0}
.benefits span{display:block;font-family:var(--serif);font-size:clamp(3.5rem,6vw,5.5rem);line-height:1;color:var(--acc-l)}
.benefits h3{margin:1.25rem 0 .6rem}
.benefits p{color:#b4b9b0;font-size:.98rem}

/* Contact */
.contact{display:grid;grid-template-columns:5fr 6fr;gap:calc(var(--gap)*1.5);padding-block:var(--sec)}
.contact-info p{color:var(--mute);margin:1.5rem 0 2.5rem;max-width:36ch}
.contact dl{border-top:1px solid var(--ink)}
.contact dt{font-size:.85rem;color:var(--mute);margin-top:1.1rem}
.contact dd{padding-bottom:1.1rem;border-bottom:1px solid var(--line);font-size:1.1rem}
form{display:grid;gap:1.4rem;align-content:start}
label{display:grid;gap:.3rem;font-size:.88rem;font-weight:500}
input,textarea{font:400 1.05rem var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:.6rem 0;border-radius:0;resize:vertical;transition:border-color var(--ease)}
input:focus,textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 1px 0 var(--acc)}
label.err input,label.err textarea{border-color:#a3321f}
small{color:#a3321f;font-weight:400;min-height:1.1em}
form .btn{justify-self:start;padding-inline:2.2rem}
#status{font-size:.95rem;font-weight:500}
#status.ok{color:var(--acc)}#status.bad{color:#a3321f}

/* Footer */
footer{border-top:1px solid var(--ink);padding-top:3.5rem;font-size:.95rem}
.foot{display:grid;grid-template-columns:2fr 1fr 1.4fr 1.2fr;gap:var(--gap)}
.foot p{color:var(--mute);margin-top:1rem;max-width:36ch}
.foot nav{display:flex;flex-direction:column;gap:.4rem}
.foot h4{font-size:.85rem;font-weight:600;margin-bottom:.8rem}
.foot a:not(.logo){color:var(--mute);transition:color var(--ease)}
.foot a:not(.logo):hover{color:var(--acc)}
.foot div p{margin-top:0}
.copy{margin-top:3rem;padding-block:1.5rem;border-top:1px solid var(--line);color:var(--mute);font-size:.85rem}

/* Reveal */
.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:1000px){
  .benefits{grid-template-columns:1fr 1fr;row-gap:2.5rem}
  .benefits article:nth-child(2){border:0;margin:0}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .burger{display:block}
  #nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:1rem;padding:1.5rem var(--pad);background:var(--bg);border-bottom:1px solid var(--line);display:none}
  #nav.open{display:flex}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:7rem}
  .art{max-width:440px;justify-self:start;margin-bottom:2rem}
  .about-grid,.svc,.contact{grid-template-columns:1fr}
  .statement{margin-left:0}
  .svc-intro{position:static}
}
@media(max-width:560px){
  .benefits{grid-template-columns:1fr}
  .benefits article{border:0;margin:0;padding-right:0;border-bottom:1px solid #3b4640;padding-bottom:2rem}
  .foot{grid-template-columns:1fr}
  .facts div{grid-template-columns:1fr;gap:.1rem}
  .row{grid-template-columns:2.4rem 1fr}.row::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .js .reveal{opacity:1;transform:none}
}