/* =========================================================
   CedarForge Print Works — Unified Styles (v1)
   - Brand palette (contrast-safe)
   - Matches current index.html structure
   - Minimal, fast, no path changes
   ========================================================= */

/* 🎨 Tokens */
:root{
  /* Brand + accessibility */
  --ink:#1A1A1A;      /* Charcoal (text) */
  --paper:#F5F5F2;    /* Off-White (page bg) */
  --accent:#A1693D;   /* Darkened Forge Bronze (AA on white) */
  --link:#007F99;     /* Darkened Spectral Blue (AA on white) */
  --cedar:#446B4C;    /* Cedar Green */

  /* Surfaces */
  --card:#ffffff;
  --card-weak:#f8f8f8;
  --shadow:0 8px 20px rgba(0,0,0,.1);

  /* Radii / Motion */
  --round:12px;
  --pill:999px;
  --t:0.25s ease;
}

/* Base / Typography */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--cedar)}

/* Layout shells (match index.html) */
header,main,footer{max-width:1080px;margin:auto;padding:16px}

/* Header */
header{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid #eee;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:12px;padding:12px 0;}
.brand img{height:48px;width:auto;display:block}
nav a{color:var(--ink);font-weight:500;transition:color var(--t)}
nav a:hover{color:var(--accent)}

/* Buttons */
.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:10px 16px;
  border-radius:var(--pill);
  font-weight:700;
  transition:transform var(--t), box-shadow var(--t), filter var(--t);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.15);filter:brightness(1.03)}

/* Hero */
.hero{position:relative;overflow:hidden;border-radius:var(--round);margin:8px 0 20px;box-shadow:var(--shadow)}
.hero picture,.hero img{display:block;width:100%;height:auto;border-radius:var(--round)}
.hero .copy{
  position:absolute;inset:auto 16px 16px 16px;
  padding:14px;border-radius:10px;color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,.65) 70%);
}
h1{font-size:clamp(22px,4vw,34px);margin:10px 0}
.muted{opacity:.85}
.small{font-size:.85rem;opacity:.85}

/* Trust strip */
.strip{
  margin:8px 0 22px;color:#fff;
  background:linear-gradient(90deg,var(--cedar),var(--link));
  padding:10px 14px;border-radius:10px
}

/* Sections / Cards / Grid */
h2{
  font-size:1.8rem;
  margin:20px 0 10px;
  border-bottom:3px solid var(--accent);
  display:inline-block;
  padding-bottom:4px
}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:var(--card);
  padding:18px;border-radius:var(--round);
  border:1px solid #e6e6e6;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  transition:transform var(--t), box-shadow var(--t)
}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.12)}
.thumb,img{display:block;width:100%;height:auto;border-radius:10px}

/* Quote section tweak (centered CTA) */
#quote{text-align:center;margin-top:40px}
#quote h2{border:none}
#quote .btn{font-size:1.05rem}

/* Contact cards */
#contact .card h3{margin-top:0}

/* Footer */
footer{
  text-align:center;color:#273043;
  border-top:1px solid #eee;
  padding:20px;
}
footer .small{display:block;margin-top:6px}

/* Forms (future Tally/native forms ready) */
input,textarea{
  width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid #dcdcdc;background:#fff;color:var(--ink)
}
label{font-size:.9rem;color:#565e6a}
form{display:grid;gap:12px}

/* Mobile */
@media (max-width:720px){
  header{gap:10px}
  nav{display:flex;gap:12px;flex-wrap:wrap}
  .hero .copy{padding:16px}
}