/* ===== Artesano — design tokens (from brand/design-system.md) ===== */
:root{
  --ink:#1A1A1A; --graphite:#5A574F; --bone:#F6F3EE; --paper:#FFFFFF;
  --line:#E4DED3; --copper:#B87333; --copper-dk:#97591F;
  --font-display:"Jost","Futura","Avenir Next",sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --maxw:1100px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); color:var(--ink); background:var(--bone);
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--copper-dk)}

/* ===== Reveal animation ===== */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

/* ===== Shared ===== */
.eyebrow,.card__eyebrow,.footer__fine{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.2em;color:var(--graphite);
}
.btn{
  display:inline-block;font-family:var(--font-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;
  background:var(--ink);color:var(--bone);padding:14px 30px;border:1px solid var(--ink);
  border-radius:2px;transition:background .25s,color .25s,border-color .25s;cursor:pointer;
}
.btn:hover{background:var(--copper);border-color:var(--copper);color:#fff}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn--sm{padding:10px 20px;font-size:.74rem}

/* Rule-label motif: —  LABEL  — */
.rule-label{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:18px}
.rule-label::before,.rule-label::after{content:"";height:1px;width:64px;background:var(--copper)}
.rule-label span{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.28em;
  font-size:.8rem;color:var(--graphite);
}
.rule-label--light span{color:var(--bone)}
.rule-label--light::before,.rule-label--light::after{background:var(--copper)}

/* ===== Nav ===== */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);background:rgba(246,243,238,.85);
  backdrop-filter:saturate(140%) blur(10px);transition:box-shadow .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{box-shadow:0 1px 0 var(--line);border-color:var(--line)}
.nav__brand{display:flex;align-items:center;gap:12px}
.nav__mark{height:34px;width:34px;display:inline-flex}
.nav__mark svg,.cta__mark svg{width:100%;height:100%;display:block}
.nav__word{font-family:var(--font-display);font-weight:400;letter-spacing:.32em;font-size:1.05rem}
.nav__links{display:flex;align-items:center;gap:clamp(16px,3vw,38px)}
.nav__links a{font-family:var(--font-display);letter-spacing:.1em;font-size:.9rem;text-transform:uppercase}
.nav__links a:not(.btn):hover{color:var(--copper-dk)}

/* ===== Hero ===== */
.hero{
  max-width:var(--maxw);margin:0 auto;padding:clamp(80px,14vh,170px) clamp(20px,5vw,40px) clamp(60px,10vh,120px);
  text-align:center;
}
.hero .eyebrow{margin-bottom:26px}
.hero__title{
  font-family:var(--font-display);font-weight:300;letter-spacing:.04em;
  font-size:clamp(2.8rem,7vw,5rem);line-height:1.05;margin-bottom:30px;
}
.hero__lead{
  max-width:60ch;margin:0 auto 40px;font-size:clamp(1.05rem,2vw,1.3rem);color:var(--graphite);
}
.hero__lead strong{color:var(--ink);font-weight:600}
.hero__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ===== Sections ===== */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(72px,12vh,140px) clamp(20px,5vw,40px)}
.section--dark{
  max-width:none;background:var(--ink);color:var(--bone);
  padding-left:clamp(20px,5vw,40px);padding-right:clamp(20px,5vw,40px);
}
.section--dark .section__title{color:var(--bone)}
.section--dark .section__intro{color:#bdb7ab}
.section__title{
  font-family:var(--font-display);font-weight:300;text-align:center;
  font-size:clamp(2rem,4.5vw,3rem);letter-spacing:.05em;margin-bottom:16px;
}
.section__intro{text-align:center;max-width:58ch;margin:0 auto 60px;color:var(--graphite)}

/* ===== Service cards ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:var(--maxw);margin:0 auto}
.card{
  background:var(--paper);border:1px solid var(--line);padding:38px 34px;border-radius:3px;
  position:relative;transition:transform .25s,box-shadow .25s;overflow:hidden;
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(26,26,26,.07)}
.card:hover::before{transform:scaleX(1)}
.card__eyebrow{margin-bottom:16px}
.card__title{font-family:var(--font-display);font-weight:400;font-size:1.4rem;letter-spacing:.02em;margin-bottom:12px}
.card__body{color:var(--graphite);font-size:1rem}

/* ===== Work / proof ===== */
.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px 48px;max-width:var(--maxw);margin:0 auto}
.work__item{border-top:1px solid #3a3a37;padding-top:22px}
.work__metric{font-family:var(--font-display);font-weight:300;font-size:1.7rem;letter-spacing:.02em;color:var(--copper);margin-bottom:10px}
.work__desc{color:#cfc9bd;font-size:.98rem}

/* ===== About ===== */
.about{max-width:760px;margin:0 auto;text-align:center}
.about__body{margin-top:10px}
.about__body p{margin-bottom:20px;font-size:1.1rem;color:var(--graphite)}
.about__body p:first-child::first-letter{} /* hook for drop cap if desired */

/* ===== CTA ===== */
.cta{text-align:center;padding:clamp(80px,14vh,150px) clamp(20px,5vw,40px);background:var(--bone)}
.cta__mark{height:70px;width:70px;display:inline-flex;margin-bottom:30px;opacity:.95}
.cta__title{font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,5vw,3.2rem);letter-spacing:.03em;margin-bottom:18px}
.cta__lead{max-width:48ch;margin:0 auto 34px;color:var(--graphite);font-size:1.15rem}
.cta__email{margin-top:24px;font-size:.95rem}
.cta__email a{color:var(--copper-dk);letter-spacing:.04em}
.cta__email a:hover{text-decoration:underline}

/* ===== Footer ===== */
.footer{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:34px clamp(20px,5vw,56px);background:var(--ink);color:var(--bone);
}
.footer__word{font-family:var(--font-display);letter-spacing:.32em;font-size:.95rem}
.footer__fine{color:#9a948a}

/* ===== Responsive ===== */
@media (max-width:640px){
  .nav__links a:not(.btn){display:none}
  .hero__cta{flex-direction:column;align-items:center}
}