/* ---------- Tokens ---------- */
:root{
  --bg:#f3eee5; --ink:#1c1a18; --mute:#6d675e; --line:#d8d0c2;
  --accent:#b0472a; --dark:#1c1a18;
  --sp:clamp(4rem,9vw,8rem);
  --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:72px}
body{font:400 1rem/1.65 var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:min(1200px,100% - 2.5rem);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.02em}
h1{font-size:clamp(2.7rem,6.4vw,5.2rem)}
h2{font-size:clamp(2.1rem,4.5vw,3.5rem)}
.eyebrow{display:flex;align-items:center;gap:.75rem;font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:2rem;height:1px;background:currentColor}

.btn{display:inline-block;padding:.9rem 1.6rem;background:var(--ink);color:var(--bg);border:1px solid var(--ink);font:500 .95rem var(--sans);cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.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(--accent)}

/* ---------- 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(243,238,229,.96);border-color:var(--line)}
.bar{display:flex;justify-content:space-between;align-items:center;padding-block:1.3rem;transition:padding var(--ease)}
.scrolled .bar{padding-block:.65rem}
.logo,.burger{position:relative;z-index:2}
.logo{display:flex;align-items:center;gap:.7rem;font-size:.68rem;line-height:1.25;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.logo b{font:600 1.7rem/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.logo b::after{content:".";color:var(--accent)}
.nav{display:flex;align-items:center;gap:1.8rem;font-size:.9rem}
.nav a:not(.btn){position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--ease)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.burger{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:flex-end;gap:7px;background:none;border:0;cursor:pointer}
.burger span{width:26px;height:2px;background:var(--ink);transition:transform var(--ease),width var(--ease)}
.burger span:last-child{width:18px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{width:26px;transform:translateY(-4.5px) rotate(-45deg)}

/* ---------- Placeholder visuals ---------- */
.ph{position:relative;overflow:hidden;background-color:var(--ink)}
.ph figcaption{position:absolute;left:.9rem;bottom:.8rem;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:#f3eee5;opacity:.8}
.ph-1{background:radial-gradient(circle at 66% 36%,var(--accent) 0 16%,transparent 16.3%),linear-gradient(transparent 62%,#f3eee5 62% 63.5%,transparent 63.5% 70%,#f3eee5 70% 71%,transparent 71% 78%,#f3eee5 78% 78.6%,transparent 78.6%),var(--ink)}
.ph-2{background:linear-gradient(90deg,transparent 0 22%,#f3eee52e 22% 22.4%,transparent 22.4% 55%,#f3eee52e 55% 55.4%,transparent 55.4%),radial-gradient(ellipse at 50% 100%,var(--accent) 0 40%,transparent 40.3%),#2a2724}
.ph-3{background:repeating-linear-gradient(135deg,#d8d0c2 0 14px,#cfc5b4 14px 28px)}
.ph-3 figcaption{color:var(--ink)}

/* ---------- Hero ---------- */
.hero{padding:9.5rem 0 var(--sp)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:end}
.hero h1{margin:1.5rem 0 0}
.hero em{font-style:italic;color:var(--accent)}
.lead{max-width:34rem;margin:1.75rem 0 2.25rem;color:var(--mute);font-size:1.1rem}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.75rem}
.hero-art{position:relative;aspect-ratio:4/5}
.hero-art .a{position:absolute;inset:0 0 14% 20%}
.hero-art .b{position:absolute;left:0;bottom:0;width:46%;aspect-ratio:1;display:flex;align-items:flex-end;padding:1rem;background:var(--accent);color:var(--bg);font:italic 1.3rem var(--serif)}
.hero-art .tag{position:absolute;right:0;bottom:0;width:48%;padding:.9rem 1rem;background:var(--bg);border:1px solid var(--ink);font-size:.78rem;line-height:1.4;color:var(--mute)}
.tag strong{display:block;color:var(--ink);font-size:.85rem}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,6vw,6rem);padding-block:var(--sp);border-top:1px solid var(--line)}
.about h2{max-width:14ch;margin:1.25rem 0 2.5rem}
.cols{columns:2;column-gap:2.5rem;color:var(--mute)}
.cols p{margin-bottom:1rem;break-inside:avoid}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:3rem;border-top:1px solid var(--ink)}
.facts div{padding:1.25rem 1rem 0 0}
.facts dt{font:400 2.6rem/1 var(--serif)}
.facts dd{margin-top:.4rem;font-size:.85rem;color:var(--mute)}
.about-art{padding-top:4rem}
.about-art .ph{aspect-ratio:3/4}
blockquote{position:relative;margin:-4rem 0 0 -3rem;padding:1.5rem;background:var(--bg);border-left:3px solid var(--accent);font:italic 1.35rem/1.35 var(--serif)}

/* ---------- Services ---------- */
.services{display:grid;grid-template-columns:4fr 7fr;gap:clamp(2rem,6vw,6rem);padding-block:var(--sp);border-top:1px solid var(--line)}
.svc-head{position:sticky;top:6rem;align-self:start}
.svc-head h2{margin:1.25rem 0 1rem}
.svc-head p{margin-bottom:2rem;color:var(--mute)}
.svc-head .ph{aspect-ratio:5/3}
.svc{display:grid;grid-template-columns:2.5rem 2rem 1fr;gap:1.25rem;padding:1.75rem 0;border-bottom:1px solid var(--line);transition:padding var(--ease)}
.svc:first-child{border-top:1px solid var(--ink)}
.svc:hover{padding-left:1rem}
.num{padding-top:.35rem;font-size:.8rem;font-weight:500;color:var(--mute);transition:color var(--ease)}
.svc:hover .num{color:var(--accent)}
.svc svg{width:28px;height:28px;margin-top:.2rem;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc h3{margin-bottom:.4rem;font-size:1.7rem}
.svc.big h3{font-size:2.4rem}
.svc p{max-width:36rem;color:var(--mute)}

/* ---------- Approach (dark) ---------- */
.approach{padding-block:var(--sp);background:var(--dark);color:var(--bg)}
.approach .eyebrow{color:#e08a6a}
.approach h2{max-width:16ch;margin:1.25rem 0 4rem}
.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.perk{padding-top:1.25rem;border-top:1px solid #f3eee54d}
.perk:nth-child(even){margin-top:3rem}
.perk b{display:block;margin-bottom:1rem;font:400 4.5rem/1 var(--serif);color:var(--accent)}
.perk h3{margin-bottom:.6rem;font-size:1.4rem}
.perk p{font-size:.95rem;color:#f3eee5b3}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,6rem);padding-block:var(--sp)}
.contact h2{margin:1.25rem 0 2rem}
.info{border-top:1px solid var(--ink)}
.info div{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.info dt{padding-top:.2rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
form{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 1.5rem;align-content:start}
.field{display:flex;flex-direction:column;gap:.35rem}
.field.full{grid-column:1/-1}
label{font-size:.8rem;font-weight:500}
label small{font-weight:400;color:var(--mute)}
input,textarea{padding:.8rem .9rem;background:#fbf8f2;border:1px solid var(--line);border-radius:0;font:inherit;color:var(--ink);transition:border-color var(--ease)}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
textarea{min-height:9rem;resize:vertical}
[aria-invalid="true"]{border-color:var(--accent)}
.err{min-height:1em;font-size:.78rem;color:var(--accent)}
.field .btn{align-self:flex-start}
.status{grid-column:1/-1;font-size:.9rem}
.status:not(:empty){padding:.9rem 1rem;border-left:3px solid}
.status.ok{border-color:#2f6b4f;background:#e4ebe3}
.status.bad{border-color:var(--accent);background:#f0dfd6}

/* ---------- Footer ---------- */
.footer{padding:4rem 0 2rem;background:var(--dark);color:#f3eee5b3;font-size:.9rem}
.foot{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:3rem}
.foot p{margin-bottom:.6rem}
.brand{font:400 1.35rem/1.2 var(--serif);color:var(--bg)}
.footer h4{margin-bottom:1rem;font:600 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#e08a6a}
.footer nav a{display:block;margin-bottom:.4rem}
.footer a{transition:color var(--ease)}
.footer a:hover{color:#fff}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid #f3eee52e;font-size:.8rem}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-grid,.about,.services,.contact{grid-template-columns:1fr}
  .hero-art{width:min(30rem,100%);aspect-ratio:1}
  .svc-head{position:static}
  blockquote{margin-left:0}
  .perks{grid-template-columns:1fr 1fr}
  .perk:nth-child(even){margin-top:0}
  .foot{grid-template-columns:1fr 1fr}
  .burger{display:flex}
  .nav{position:fixed;inset:0;z-index:1;flex-direction:column;justify-content:center;gap:1.5rem;background:var(--bg);font:400 1.6rem var(--serif);visibility:hidden;transform:translateX(100%);transition:transform .35s ease,visibility .35s}
  .nav.open{visibility:visible;transform:none}
  .nav .btn-sm{font:500 1rem var(--sans);padding:.8rem 1.4rem}
}
@media (max-width:600px){
  .cols{columns:1}
  form,.perks,.foot{grid-template-columns:1fr}
  .svc{grid-template-columns:2rem 1fr}
  .svc svg{display:none}
  .svc.big h3{font-size:2rem}
  .facts dt{font-size:2rem}
  .info div{grid-template-columns:1fr;gap:.2rem}
}