/* Clarté — shared stylesheet
   Palette & type reconstructed from clartecommerce.com */
:root{
  --paper:#FBF9F5; --bone:#F4F1EA; --white:#FFFFFF;
  --brass:#B08D57; --brass-deep:#9A7945;
  --char:#222530; --ink:#16263F; --ink-soft:#26384F; --greige:#8A8178;
  --line:#E7E1D6; --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--char);
  font-family:Inter,system-ui,sans-serif; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:Fraunces,Georgia,serif; color:var(--ink); font-weight:400; line-height:1.08; margin:0}
h1{font-size:clamp(2.6rem,6vw,4.5rem); letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem); letter-spacing:-.01em}
h3{font-size:clamp(1.3rem,2vw,1.7rem)}
em{font-style:italic}
p{margin:0 0 1.1em}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
.eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass); font-weight:600; margin:0 0 1.3rem; display:inline-flex; gap:.6em; align-items:center;
}
.eyebrow::before{content:"↗"; font-size:.9em; color:var(--brass)}
.lede{font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--ink-soft); max-width:46ch}
.muted{color:var(--greige)}

/* buttons */
.btn{
  display:inline-block; font-family:Inter,sans-serif; font-size:.86rem; font-weight:600;
  letter-spacing:.04em; padding:15px 30px; border:1px solid var(--ink); color:var(--ink);
  background:transparent; border-radius:2px; text-decoration:none; cursor:pointer;
  transition:all .35s var(--ease);
}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn-solid{background:var(--ink); color:var(--paper)}
.btn-solid:hover{background:var(--ink-soft); border-color:var(--ink-soft)}
.btn-ghost{border-color:var(--line); color:var(--ink)}

/* header */
header.site{
  position:sticky; top:0; z-index:50; background:rgba(251,249,245,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
header.site .bar{display:flex; align-items:center; justify-content:space-between; height:78px}
.logo{font-family:Fraunces,serif; font-size:1.9rem; color:var(--ink); text-decoration:none; letter-spacing:.01em}
.logo em{color:var(--brass); font-style:italic}
nav.main{display:flex; gap:34px; align-items:center}
nav.main a{font-size:.92rem; color:var(--ink); text-decoration:none; letter-spacing:.01em; transition:color .3s}
nav.main a:hover{color:var(--brass)}
.nav-cta{margin-left:8px}
.menu-toggle{display:none;background:none;border:0;font-size:1.4rem;color:var(--ink);cursor:pointer}

/* layout helpers */
section{padding:clamp(64px,9vw,120px) 0}
.section-sm{padding:clamp(48px,6vw,84px) 0}
.grid2{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,6vw,80px); align-items:center}
.narrow{max-width:56ch}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* editorial image panels */
.panel{
  position:relative; background:var(--bone); border:1px solid var(--line); border-radius:4px;
  overflow:hidden; aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;
}
.panel.wide{aspect-ratio:16/11}
.panel svg{width:100%; height:100%; display:block}
.panel .tagline{position:absolute; left:20px; bottom:16px; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--greige)}

/* hero */
.hero{padding-top:clamp(48px,7vw,90px)}
.hero .kpis{display:flex; gap:34px; margin-top:34px; flex-wrap:wrap}
.hero .kpis div{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--greige); max-width:15ch}
.hero-cta{display:flex; gap:16px; align-items:center; margin-top:34px; flex-wrap:wrap}
.hero-cta a.text-link{font-size:.92rem; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--brass); padding-bottom:2px}

/* services / cards */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:4px; overflow:hidden}
.card{padding:clamp(28px,3.5vw,48px); background:var(--white)}
.card + .card{border-left:1px solid var(--line)}
.card .kicker{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); font-weight:600}
.card h3{margin:14px 0 10px}
.card a.more{display:inline-block; margin-top:12px; font-size:.9rem; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--brass); padding-bottom:2px}

/* why grid */
.four{display:grid; grid-template-columns:repeat(4,1fr); gap:36px; margin-top:48px}
.four h4{font-family:Inter,sans-serif; font-size:1rem; color:var(--ink); font-weight:600; margin:0 0 8px}
.four p{font-size:.95rem; color:var(--ink-soft); margin:0}

/* steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:34px; margin-top:48px}
.step .n{font-family:Fraunces,serif; font-size:2.4rem; color:var(--brass); line-height:1}
.step h4{font-family:Inter,sans-serif; font-size:1rem; margin:12px 0 6px; color:var(--ink)}
.step p{font-size:.92rem; color:var(--ink-soft); margin:0}

/* band */
.band{background:var(--ink); color:#EDE7DC}
.band h2{color:var(--white)}
.band .eyebrow{color:var(--brass)}
.band .lede{color:#C9C2B4}
.band .panel{background:#1B2C46; border-color:#28405f}
.band .panel .tagline{color:#8ea0b8}

/* checklist */
.checks{list-style:none; padding:0; margin:24px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:14px 32px}
.checks li{position:relative; padding-left:28px; font-size:.98rem; color:var(--ink-soft)}
.checks li::before{content:"—"; position:absolute; left:0; color:var(--brass); font-weight:600}

/* closing */
.closing{text-align:center}
.closing .lede{margin:18px auto 30px}

/* form */
.form-section{background:var(--bone); border-top:1px solid var(--line)}
.form-card{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:clamp(28px,4vw,52px); max-width:720px; margin:0 auto}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1 / -1}
.field label{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--greige); font-weight:600}
.field input,.field select,.field textarea{
  font-family:Inter,sans-serif; font-size:1rem; color:var(--char); padding:13px 14px;
  border:1px solid var(--line); border-radius:3px; background:var(--paper); transition:border-color .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--brass)}
.field textarea{resize:vertical; min-height:120px}
.form-note{font-size:.82rem; color:var(--greige); margin-top:14px}
.form-msg{display:none; margin-top:18px; padding:14px 16px; border-radius:4px; font-size:.95rem}
.form-msg.ok{display:block; background:#EEF3EC; color:#2C5E33; border:1px solid #CFE2CB}
.form-msg.err{display:block; background:#FBEDE9; color:#8A3B27; border:1px solid #F0D2C8}

/* footer */
footer.site{background:var(--ink); color:#C9C2B4; padding:64px 0 40px}
footer.site .cols{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start}
footer.site .logo{color:var(--white)}
footer.site nav{display:flex; gap:26px; flex-wrap:wrap}
footer.site a{color:#C9C2B4; text-decoration:none; font-size:.92rem}
footer.site a:hover{color:var(--brass)}
footer.site .fine{margin-top:40px; padding-top:22px; border-top:1px solid #2a3d57; font-size:.82rem; color:#8ea0b8; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* reveal — only hides when JS is active (fails visible) */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js .reveal.in{opacity:1; transform:none}

@media(max-width:860px){
  nav.main{display:none}
  nav.main.open{display:flex; position:absolute; top:78px; left:0; right:0; flex-direction:column; background:var(--paper); border-bottom:1px solid var(--line); padding:20px 32px; gap:18px}
  .menu-toggle{display:block}
  .grid2{grid-template-columns:1fr; gap:36px}
  .cards{grid-template-columns:1fr}
  .card + .card{border-left:0; border-top:1px solid var(--line)}
  .four{grid-template-columns:1fr 1fr; gap:28px}
  .steps{grid-template-columns:1fr 1fr; gap:28px}
  .checks{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:520px){ .four,.steps{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} }