/* 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;
  /* Jill 9/11: "I like the warmth of the color you chose but maybe a little
     closer to a warm grayish tan." Her logo's rules are a cool #a7a9ac and her
     business card is black with taupe house lines, so the accent moved off
     bronze onto taupe. Two weights of it: --tan is decorative only (rules,
     borders) because it does not carry enough contrast for small text, --taupe
     is the one text and buttons use. */
  --tan:#b3a48f;
  --bronze:#7d6f5e;
  --bronze-deep:#5f5548;
  --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-top:16px;padding-bottom:16px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand img{height:34px;width:auto}
.brand .sub{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-soft);padding-left:13px;border-left:1px solid var(--line);
  line-height:1.1}
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(--tan)}
.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-top:56px;padding-bottom:56px;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(--tan);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 .logo{width:132px;margin-bottom:16px}
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}

/* ── real photos (2026-10-05) ──────────────────────────────────── */
.hero.has-photo{background:#1b1a18}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Darker wash so the cream text reads (Matt 10/6): a left-to-right shade behind the
   text plus the bottom fade, and no cream wash from the placeholder hero. */
.hero.has-photo::after{display:none}
.hero.has-photo::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(20,18,16,.8) 0%,rgba(20,18,16,.62) 45%,rgba(20,18,16,.22) 80%),
    linear-gradient(180deg,rgba(20,18,16,.1) 0%,rgba(20,18,16,.3) 50%,rgba(20,18,16,.75) 100%)}
.hero.has-photo h1,.hero.has-photo .lead{text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hero.has-photo .inner{z-index:2}
.hero.has-photo h1,.hero.has-photo .lead{color:#fbf8f3}
.hero.has-photo .eyebrow{color:#e8dccb}
.hero.has-photo .btn.ghost{color:#fbf8f3;border-color:rgba(251,248,243,.7)}
a.cover{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
a.cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
a.cover:hover img{transform:scale(1.03)}
.projects-list{display:grid;gap:34px}
.project.wide{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.project.wide a.cover{aspect-ratio:auto;min-height:100%}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:18px}
.gallery a.g{display:block;aspect-ratio:1;overflow:hidden;border-radius:4px;background:var(--paper-2)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){.project.wide{grid-template-columns:1fr}.project.wide a.cover{aspect-ratio:4/3}}
.hero.has-photo .btn.ghost:hover{background:#fbf8f3;color:var(--ink);border-color:#fbf8f3}

/* Project slideshow (assets/slideshow.js). Jill 10/5: wanted to click through
   a project's photos without backing out to the page each time. */
.slides-open{overflow:hidden}
.slides{position:fixed;inset:0;z-index:100;background:rgba(24,21,19,.94);
  display:flex;align-items:center;justify-content:center;padding:56px 72px}
.slides[hidden]{display:none}
.slides figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center}
.slides img{max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;display:block;border-radius:3px}
.slides figcaption{display:flex;gap:18px;justify-content:space-between;width:100%;
  color:#e9e3db;font-size:.92rem;padding-top:12px}
.slides .s-count{color:#a79e94;white-space:nowrap}
.slides button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font:inherit;line-height:1;opacity:.8;padding:10px}
.slides button:hover,.slides button:focus-visible{opacity:1}
.slides .s-close{top:10px;right:16px;font-size:2.4rem}
.slides .s-prev,.slides .s-next{top:50%;transform:translateY(-50%);font-size:3.4rem}
.slides .s-prev{left:12px}
.slides .s-next{right:12px}
.slides.single .s-prev,.slides.single .s-next,.slides.single .s-count{display:none}
@media (max-width:640px){
  .slides{padding:56px 8px 24px}
  .slides .s-prev,.slides .s-next{top:auto;bottom:6px;transform:none;font-size:2.8rem}
  .slides figcaption{padding:12px 48px 0}
}
/* Jill 10/6: her business-card line under the footer logo, trial run */
footer.site .tagline{color:#e8dccb;font-size:1.02rem;letter-spacing:.03em;margin:-4px 0 12px}
/* Jill 10/7: builder, supplier and association links. Quiet underline, same color as the text. */
a.ext{color:inherit;text-decoration:underline;text-decoration-color:rgba(125,111,94,.45);text-underline-offset:2px}
a.ext:hover,a.ext:focus-visible{text-decoration-color:currentColor}

/* ── Jill 10/14: final content pass ────────────────────────────── */
/* bigger logo in the header */
.brand img{height:50px}
.brand .sub{font-size:.86rem;padding-left:15px}
header.site .inner{padding-top:13px;padding-bottom:13px}
/* home hero: same photo, but on wider screens it sits in the right ~70% and fades in from
   the dark ground, so the words cover less of the house */
.hero.has-photo .lead{max-width:46ch}
@media (min-width:900px){
  .hero.has-photo h1{font-size:clamp(2.1rem,4.1vw,3rem)}
  .hero.has-photo .hero-img{left:auto;right:0;width:63%;object-position:50% 40%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);
            mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
  .hero.has-photo::before{background:linear-gradient(90deg,rgba(20,18,16,.35) 0%,rgba(20,18,16,.18) 42%,rgba(20,18,16,0) 64%),
      linear-gradient(180deg,rgba(20,18,16,0) 55%,rgba(20,18,16,.38) 100%)}
}
/* "Recent Projects" heading goes to the Projects page */
.sec-link{margin-bottom:34px}
.sec-link a{text-decoration:none}
.sec-link a span{display:inline-block;color:var(--bronze);transition:transform .2s}
.sec-link a:hover span,.sec-link a:focus-visible span{transform:translateX(5px)}
.project.mini .body{padding:16px 22px 18px}
.project.mini h3{margin:0}
/* page heads with no intro paragraph under them */
section.pagehead{padding-bottom:40px}
/* no captions under the slideshow photos, just the count */
.slides .s-cap{display:none}
.slides figcaption{justify-content:center}
/* services: one full-width card, then two side by side */
.svc-feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);margin-top:34px;
  background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}
.svc-feature a.cover{aspect-ratio:auto;min-height:330px}
.svc-feature .body{padding:40px 44px;display:flex;flex-direction:column;justify-content:center}
.svc-feature h3,.svc-pair h3{font-size:1.35rem;font-weight:500;margin-bottom:10px}
.svc-feature p{color:var(--ink-soft);font-size:1.05rem}
.svc-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:26px}
.steps.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 48px;margin-top:34px}
.steps.two h3{margin-bottom:8px}
.after-steps{margin-top:36px;color:var(--ink-soft);max-width:72ch}
/* about: photo beside the name, title and the rest */
.about{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:56px;align-items:start;margin-top:34px}
.about .portrait{position:sticky;top:112px}
.about .portrait img{width:100%;height:auto;border-radius:8px;box-shadow:var(--shadow)}
.about .who h3{font-size:1.55rem;font-weight:500}
.about .who .title{color:var(--bronze-deep);margin-top:4px}
.about .who .traits{color:var(--ink-soft);font-size:.95rem;margin-top:10px;font-style:italic}
.about .bio{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.about .bio p{color:var(--ink-soft);margin-top:14px;max-width:64ch}
.about .bio p:first-child{margin-top:0}
.about .bio .signoff{color:var(--ink);margin-top:26px}
.about .bio .signoff span{color:var(--bronze-deep)}
.affil h3{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);
  font-weight:500;margin-bottom:12px}
.affil p{color:var(--ink-soft);font-size:.95rem;max-width:84ch;margin-top:8px}
/* contact */
.contact-intro p{color:var(--ink-soft);margin-top:16px;max-width:60ch}
.contact-intro .lead{color:var(--ink);margin-top:0}
.contact-card .detail:last-child{margin-bottom:0}
@media (max-width:820px){
  .svc-feature,.svc-pair,.steps.two{grid-template-columns:1fr}
  .svc-feature a.cover{min-height:0;aspect-ratio:4/3}
  .svc-feature .body{padding:26px}
  .about{grid-template-columns:1fr;gap:30px}
  .about .portrait{position:static;max-width:340px}
}
@media (max-width:720px){
  .brand img{height:42px}
  .brand .sub{font-size:.78rem}
  .hero.has-photo .lead{font-size:1rem}
}

/* ── Jill 10/15 ────────────────────────────────────────────────── */
/* less peach, more greige in the band color (and borders to match) */
:root{--paper-2:#e8e5df;--line:#d7d2c9}
/* headline breaks before "How" on wider screens, and the paragraph takes the
   headline's width so the two line up */
.hero h1 br.hb{display:none}
@media (min-width:900px){
  .hero h1 br.hb{display:inline}
  .hero.has-photo h1{max-width:none;font-size:clamp(2rem,3.8vw,2.8rem)}
  .hero-text{width:fit-content;max-width:100%}
  .hero-text .lead{width:0;min-width:100%;max-width:none}
  .hero.has-photo .hero-img{width:60%}
}
/* her drawings behind the text, fading into the photo (title block and names cropped out).
   ?v= is the image's md5 prefix: Pages caches assets 4 h, so bump it whenever the image changes */
@media (min-width:900px){
  .hero.has-photo.drawings{background:#1b1a18 url(/assets/hero-drawings.jpg?v=efce8020) left center/auto 100% no-repeat}
}
/* Jill 10/15: no one-word last line under the headline */
.hero.has-photo .lead{text-wrap:pretty}
/* Jill 10/16: no street address in the footer; phone and email sit at the bottom of the
   row so they line up with the tagline on the left */
footer.site .cols>div:last-child{align-self:end}
footer.site .tagline{margin-bottom:0}