/* Panel Upgrade Kitchener — "warm workshop" design system
   Palette: deep forest green + warm graphite + cream
   Type: Figtree (headings/UI) + Zilla Slab (article body accents) */

:root{
  --green:#1e4d3b;
  --green-deep:#123527;
  --green-soft:#2c6a52;
  --graphite:#33302a;
  --ink:#25221c;
  --cream:#f7f1e2;
  --cream-2:#efe6cf;
  --paper:#fdfaf1;
  --brass:#a97a24;
  --line:#d9cdaf;
  --rule:#c9bd9d;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Figtree",system-ui,sans-serif;
  background:var(--cream);
  color:var(--graphite);
  line-height:1.6;
  font-size:17px;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
a{color:var(--green);}
img{max-width:100%;height:auto}

/* ---- top utility bar ---- */
.utility{
  background:var(--green-deep);
  color:var(--cream);
  font-size:.85rem;
  padding:.45rem 0;
}
.utility .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
.utility a{color:#ffe9b8;text-decoration:none;font-weight:700;letter-spacing:.02em}
.utility span{opacity:.85}

/* ---- masthead ---- */
.mast{background:var(--paper);border-bottom:3px solid var(--green);padding:1rem 0 .8rem}
.mast .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.brand{text-decoration:none;color:var(--ink)}
.brand strong{
  font-size:1.5rem;font-weight:800;letter-spacing:-.01em;display:block;line-height:1.15;
}
.brand strong em{font-style:normal;color:var(--green)}
.brand small{font-family:"Zilla Slab",serif;font-size:.85rem;color:var(--brass);display:block}
.mast-cta{text-align:right}
.mast-cta .call{
  display:inline-block;background:var(--green);color:#fff;text-decoration:none;
  font-weight:800;font-size:1.05rem;padding:.5rem 1.1rem;border-radius:4px;
}
.mast-cta .call:hover{background:var(--green-soft)}
.mast-cta p{font-size:.78rem;color:var(--graphite);margin-top:.25rem}

/* ---- nav ---- */
.rail{background:var(--paper);border-bottom:1px solid var(--line);font-size:.88rem}
.rail .wrap{display:flex;flex-wrap:wrap;gap:.1rem .2rem;padding-top:.35rem;padding-bottom:.35rem}
.rail a{
  color:var(--graphite);text-decoration:none;padding:.3rem .55rem;border-radius:3px;font-weight:600;
}
.rail a:hover{background:var(--cream-2);color:var(--green)}
.rail a.here{color:var(--green);border-bottom:2px solid var(--brass);border-radius:0}

/* ---- hero ---- */
.hero{background:linear-gradient(180deg,var(--paper) 0%,var(--cream) 100%);padding:2.4rem 0 1.6rem;border-bottom:1px solid var(--line)}
.hero h1{
  font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;color:var(--ink);
  line-height:1.15;letter-spacing:-.015em;max-width:60ch;
}
.hero .lede{
  font-family:"Zilla Slab",serif;font-size:1.12rem;color:var(--graphite);
  margin-top:.9rem;max-width:72ch;
}
.hero .lede a{color:var(--green);font-weight:600}
.hero-acts{margin-top:1.2rem;display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-block;text-decoration:none;font-weight:800;border-radius:4px;
  padding:.7rem 1.3rem;font-size:1rem;
}
.btn-solid{background:var(--green);color:#fff}
.btn-solid:hover{background:var(--green-soft)}
.btn-line{border:2px solid var(--green);color:var(--green)}
.btn-line:hover{background:var(--cream-2)}
.btn-brass{background:var(--brass);color:#fff}

/* ---- quote strip (horizontal bench form) ---- */
.bench{
  background:var(--green);color:var(--cream);padding:1.3rem 0 1.5rem;
}
.bench h2{font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:.15rem}
.bench .sub{font-family:"Zilla Slab",serif;font-size:.92rem;color:#dbe9dd;margin-bottom:.9rem}
.bench form{
  display:grid;grid-template-columns:1fr 1fr 1fr 1.4fr auto;gap:.6rem;align-items:end;
}
.bench label{display:block;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#cfe0d2;margin-bottom:.2rem}
.bench input,.bench select{
  width:100%;padding:.55rem .6rem;border:none;border-radius:3px;font-family:inherit;font-size:.95rem;background:var(--paper);color:var(--ink);
}
.bench button{
  background:var(--brass);border:none;color:#fff;font-weight:800;font-size:.95rem;
  padding:.65rem 1.2rem;border-radius:3px;cursor:pointer;font-family:inherit;
}
.bench button:hover{filter:brightness(1.08)}
.bench .fine{grid-column:1/-1;font-size:.74rem;color:#b7ccba;margin-top:.1rem}
.bench .sent{display:none;font-weight:700;color:#ffe9b8;padding:.6rem 0}
@media(max-width:860px){.bench form{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.bench form{grid-template-columns:1fr}}

/* ---- sections ---- */
section.blk{padding:2.4rem 0}
section.blk-tint{background:var(--cream-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.blk h2{
  font-size:1.55rem;font-weight:800;color:var(--green-deep);letter-spacing:-.01em;
  margin-bottom:.4rem;line-height:1.2;
}
.blk h3{font-size:1.12rem;font-weight:700;color:var(--ink);margin:1.4rem 0 .4rem}
.kick{
  font-family:"Zilla Slab",serif;font-size:.85rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);margin-bottom:.3rem;
}
.article{max-width:76ch}
.article p{margin:.75rem 0}
.article ul,.article ol{margin:.75rem 0 .75rem 1.4rem}
.article li{margin:.35rem 0}
.article strong{color:var(--ink)}

/* ---- tables (the workshop ledger) ---- */
.ledger{width:100%;border-collapse:collapse;margin:1.1rem 0;background:var(--paper);font-size:.92rem}
.ledger caption{
  caption-side:top;text-align:left;font-family:"Zilla Slab",serif;font-size:.85rem;
  color:var(--brass);padding-bottom:.4rem;font-weight:600;
}
.ledger th{
  background:var(--green);color:#fff;text-align:left;font-weight:700;font-size:.83rem;
  letter-spacing:.03em;padding:.6rem .7rem;
}
.ledger td{
  padding:.65rem .7rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--graphite);
}
.ledger tr:nth-child(even) td{background:var(--cream)}
.ledger td:first-child{font-weight:700;color:var(--ink)}
.ledger .num{font-family:"Zilla Slab",serif;font-weight:600;white-space:nowrap}
.tbl-scroll{overflow-x:auto}

/* ---- callouts ---- */
.plank{
  background:var(--paper);border-left:5px solid var(--brass);padding:.9rem 1.1rem;margin:1.2rem 0;
  font-family:"Zilla Slab",serif;font-size:1rem;
}
.plank strong{color:var(--green-deep)}
.tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.tag-row span,.tag-row a{
  background:var(--paper);border:1px solid var(--rule);padding:.3rem .8rem;border-radius:20px;
  font-size:.85rem;color:var(--graphite);text-decoration:none;font-weight:600;
}
.tag-row a:hover{border-color:var(--green);color:var(--green)}

/* ---- directory (two-column ruled list) ---- */
.dir{display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem;margin-top:1rem}
.dir a{
  display:flex;justify-content:space-between;gap:1rem;text-decoration:none;color:var(--ink);
  padding:.7rem .2rem;border-bottom:1px dashed var(--rule);
}
.dir a b{font-weight:700}
.dir a span{font-family:"Zilla Slab",serif;font-size:.85rem;color:var(--graphite);text-align:right}
.dir a:hover b{color:var(--green)}
@media(max-width:700px){.dir{grid-template-columns:1fr}}

/* ---- timeline ledger rows ---- */
.steps{margin-top:1rem;counter-reset:step}
.steps>div{
  display:grid;grid-template-columns:52px 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line);
  counter-increment:step;
}
.steps>div::before{
  content:counter(step,decimal-leading-zero);
  font-family:"Zilla Slab",serif;font-size:1.4rem;font-weight:700;color:var(--brass);
}
.steps h3{margin:0 0 .2rem;font-size:1.02rem}
.steps p{font-size:.93rem;margin:0}

/* ---- FAQ ---- */
.faq details{
  background:var(--paper);border:1px solid var(--line);border-radius:4px;margin:.55rem 0;
}
.faq summary{
  cursor:pointer;font-weight:700;color:var(--ink);padding:.8rem 1rem;font-size:.98rem;
  list-style-position:inside;
}
.faq summary:hover{color:var(--green)}
.faq details div{padding:0 1rem .9rem;font-size:.94rem}
.faq details div p{margin:.4rem 0}

/* ---- closer ---- */
.closer{background:var(--green-deep);color:var(--cream);padding:2.4rem 0;text-align:center}
.closer h2{color:#fff;font-size:1.5rem;font-weight:800;margin-bottom:.4rem}
.closer p{font-family:"Zilla Slab",serif;max-width:60ch;margin:0 auto 1.1rem;color:#d7e4d8}

/* ---- footer ---- */
footer{background:var(--graphite);color:#d8d2c4;padding:2.2rem 0 1.4rem;font-size:.88rem}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1.6rem;margin-bottom:1.6rem}
.fgrid h4{color:#fff;font-size:.95rem;margin-bottom:.5rem}
.fgrid a{display:block;color:#cfc7b4;text-decoration:none;padding:.14rem 0}
.fgrid a:hover{color:#ffe9b8}
.fgrid p{color:#bdb6a4}
.legalline{border-top:1px solid #4a463e;padding-top:1rem;color:#a8a190;font-size:.8rem}
.legalline p{margin:.3rem 0}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}

/* ---- sticky mobile call bar ---- */
.stickycall{
  display:none;position:fixed;bottom:0;left:0;right:0;background:var(--green-deep);
  padding:.6rem .8rem;z-index:50;gap:.6rem;
}
.stickycall a{flex:1;text-align:center;padding:.65rem 0;font-size:.95rem}
@media(max-width:700px){
  .stickycall{display:flex}
  body{padding-bottom:64px}
  .hero h1{font-size:1.55rem}
}

/* ---- mobile overflow guard (2026-08-22): stop horizontal panning on phones ---- */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,iframe{max-width:100%;height:auto}
@media(max-width:760px){
  *{min-width:0}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  h1,h2,h3,p,li,td,th{overflow-wrap:break-word}
}