/* JKL Home Design - shared styles
   Type: Century Gothic is Jill's blueprint + business-card face. It ships with
   MS Office, so on her own machine the real thing renders. Jost is the closest
   free geometric fallback for everyone else. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* Warm palette carried over from the bakery site Jill picked out of the
     three examples, pushed toward paper, graphite and drafting-pencil bronze. */
  --paper:#fcfaf7;
  --paper-2:#f4efe8;
  --ink:#2b2724;
  --ink-soft:#6d645c;
  --line:#e0d8cd;
  --bronze:#9a6f3f;
  --bronze-deep:#7d5930;
  --clay:#b5714f;
  --shadow:0 1px 2px rgba(43,39,36,.05),0 8px 24px -12px rgba(43,39,36,.18);
  --wrap:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Century Gothic','Jost','Questrial','Avant Garde',
    'Trebuchet MS',system-ui,sans-serif;
  color:var(--ink);background:var(--paper);
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ── review ribbon ─────────────────────────────────────────────── */
.ribbon{background:#2b2724;color:#f4efe8;font-size:.82rem;letter-spacing:.02em;
  padding:9px 28px;display:flex;gap:14px;align-items:center;justify-content:center;
  flex-wrap:wrap;text-align:center}
.ribbon b{color:#e0b980;font-weight:500}
.ribbon button{font:inherit;font-size:.78rem;background:transparent;color:#f4efe8;
  border:1px solid rgba(244,239,232,.4);border-radius:999px;padding:3px 12px;
  cursor:pointer}
.ribbon button:hover{background:rgba(244,239,232,.12)}

/* ── header ────────────────────────────────────────────────────── */
header.site{position:sticky;top:0;z-index:40;background:rgba(252,250,247,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.site .inner{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:16px 0}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.brand .mark{font-size:1.32rem;font-weight:600;letter-spacing:.14em}
.brand .mark em{font-style:normal;color:var(--bronze)}
.brand .sub{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft)}
nav.main{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
nav.main a{text-decoration:none;font-size:.92rem;color:var(--ink-soft);
  padding-bottom:2px;border-bottom:1px solid transparent}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--bronze)}
.callbtn{text-decoration:none;font-size:.9rem;border:1px solid var(--bronze);
  color:var(--bronze-deep);padding:8px 16px;border-radius:4px;white-space:nowrap}
.callbtn:hover{background:var(--bronze);color:#fff}

/* ── type ──────────────────────────────────────────────────────── */
h1,h2,h3{font-weight:500;line-height:1.18;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.6vw,3.35rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.05rem)}
h3{font-size:1.06rem;font-weight:600}
.eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:14px}
.lead{font-size:1.08rem;color:var(--ink-soft);max-width:60ch}
section{padding:76px 0}
section.tight{padding:52px 0}
.band{background:var(--paper-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}

/* ── hero ──────────────────────────────────────────────────────── */
.hero{position:relative;min-height:clamp(420px,62vh,600px);display:flex;
  align-items:flex-end;background:var(--paper-2);border-bottom:1px solid var(--line);
  overflow:hidden}
.hero .slot{position:absolute;inset:0}
.hero .inner{position:relative;padding:56px 0;width:100%}
.hero h1{max-width:17ch}
.hero .lead{margin-top:18px;color:var(--ink)}
.hero .actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;padding:13px 26px;border-radius:4px;
  font-size:.95rem;background:var(--bronze);color:#fff;border:1px solid var(--bronze)}
.btn:hover{background:var(--bronze-deep);border-color:var(--bronze-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:#fff;border-color:var(--ink-soft)}

/* ── grids ─────────────────────────────────────────────────────── */
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:26px}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px;
  box-shadow:var(--shadow)}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-soft);font-size:.97rem}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px}
.step .num{font-size:.72rem;letter-spacing:.2em;color:var(--bronze);
  border-top:2px solid var(--bronze);padding-top:12px;display:block;margin-bottom:10px}
.step p{color:var(--ink-soft);font-size:.97rem}

.project{border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:#fff;box-shadow:var(--shadow)}
.project .body{padding:22px 24px 26px}
.project h3{margin-bottom:6px}
.project .meta{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:10px}
.project p{color:var(--ink-soft);font-size:.96rem}

/* ── content slots (the part Jill fills in) ────────────────────── */
.slot{position:relative;background:
    repeating-linear-gradient(45deg,#f4efe8,#f4efe8 12px,#efe8de 12px,#efe8de 24px);
  border:1px dashed #c9bdac;border-radius:6px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:22px;min-height:150px}
.slot .tag{max-width:34ch}
.slot .tag b{display:block;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bronze-deep);margin-bottom:6px}
.slot .tag span{font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.slot.wide{min-height:220px}
.slot.tall{aspect-ratio:4/5}
.slot.ratio{aspect-ratio:4/3;min-height:0}

/* text Jill still owes us, inline */
.fill{border-bottom:1px dashed var(--clay);color:var(--clay);
  background:rgba(181,113,79,.07);padding:0 3px;border-radius:2px}

/* markers off */
body.clean .slot{background:var(--paper-2);border-style:solid;border-color:var(--line)}
body.clean .slot .tag b{display:none}
body.clean .slot .tag span{color:#b8ad9f;font-size:.8rem}
body.clean .fill{border-bottom:none;background:transparent;color:inherit}
body.clean .ribbon{display:none}

/* ── contact ───────────────────────────────────────────────────── */
.contactgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:44px;align-items:start}
.detail{margin-bottom:22px}
.detail b{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:5px}
.detail a{font-size:1.12rem;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line)}
.detail a:hover{border-bottom-color:var(--bronze)}
.detail p{font-size:1.02rem}

/* ── footer ────────────────────────────────────────────────────── */
footer.site{background:#2b2724;color:#d9d1c7;padding:56px 0 40px;font-size:.93rem}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:34px;margin-bottom:34px}
footer.site .mark{font-size:1.2rem;letter-spacing:.14em;color:#fcfaf7;
  display:block;margin-bottom:10px}
footer.site .mark em{font-style:normal;color:#e0b980}
footer.site a{color:#d9d1c7;text-decoration:none}
footer.site a:hover{color:#fff}
footer.site nav a{display:block;margin-bottom:7px}
footer.site .fine{border-top:1px solid rgba(217,209,199,.18);padding-top:20px;
  font-size:.8rem;color:#a99f93;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap}

@media (max-width:720px){
  header.site .inner{flex-wrap:wrap}
  nav.main{order:3;width:100%;gap:18px}
  section{padding:56px 0}
}

/* ── checklist tables (site plan page) ─────────────────────────── */
table{border-collapse:collapse}
table td{padding:13px 14px 13px 0;border-top:1px solid var(--line);
  vertical-align:top}
table td:first-child{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  padding-top:16px;width:1%}
table td:nth-child(2){width:26%;padding-right:22px}
table tr:first-child td{border-top:none}
@media (max-width:640px){
  table,table tbody,table tr,table td{display:block;width:auto}
  table td{border-top:none;padding:2px 0}
  table tr{border-top:1px solid var(--line);padding:14px 0;display:block}
}

/* Hero: the photo slot fills the band, so its label has to get out of the
   headline's way. Park it bottom-right and lighten the ground under the text. */
.hero .slot{border:none;border-radius:0;padding:0}
.hero .slot .tag{position:absolute;right:26px;bottom:22px;text-align:right;
  max-width:30ch;background:rgba(252,250,247,.82);padding:12px 14px;
  border-radius:6px;border:1px dashed #c9bdac}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(252,250,247,.92) 0%,
    rgba(252,250,247,.72) 46%,rgba(252,250,247,0) 78%)}
.hero .inner{z-index:2}
body.clean .hero .slot .tag{background:transparent;border:none}