/* TYPE VOICE - read off their own logo
   Archivo display - Source Sans 3 body - Archivo caps labels.
   Their logo is a log-framed hand-painted sign and the lettering on it is bold arched SANS caps, not a slab. Archivo is that signwriter's grotesque. The rustic comes from the palette and photography, not the type.
   Retyped Aug 13 2026: the shared Fraunces house stack was running on fourteen of
   these builds and was why they read as one template. Structure and palette stay
   house; the type is this company's alone. */

/* ==========================================================================
   Northwoods Stove & Fireplace — Hayward, WI
   Built by Crutchfield Marketing.

   Palette is sampled directly from the painted trail sign the Duffys have
   used since 2000: forest green field, log-brown frame, black hearth arch,
   one bright flame yellow. Nothing here is invented.

   Deliberately unlike the other hearth builds — green leads, brass sits out.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  /* Sampled from images/logo-northwoods.png */
  --forest:#086838;          /* the sign's green field   */
  --log:#984020;             /* the sign's log frame     */
  --flame:#F0E818;           /* the sign's flame         */
  --pine:#102010;            /* the sign's dark pines    */

  --pine-950:#071410;
  --pine-900:#0A1D14;
  --pine-850:#0D2618;
  --pine-800:#11301F;
  --pine-700:#1A422B;
  --pine-600:#255437;

  --forest-600:#0A7A41;
  --forest-400:#22A063;
  --log-400:#B85A32;
  --ember:#D9762B;
  --ember-300:#EFA05B;

  --birch:#FBF7EF;           /* warm paper */
  --birch-100:#F4EEE2;
  --birch-200:#E8DFCD;
  --birch-300:#D6C9B0;

  --ink:#16120E;
  --ink-2:#3B342B;
  --ink-3:#6B6053;

  --on-dark:#F2EDE2;
  --on-dark-2:#C3CFC2;
  --on-dark-3:#8FA292;

  --shadow-sm:0 1px 2px rgba(7,20,16,.10), 0 2px 8px rgba(7,20,16,.06);
  --shadow-md:0 2px 6px rgba(7,20,16,.10), 0 12px 32px rgba(7,20,16,.12);
  --shadow-lg:0 4px 12px rgba(7,20,16,.12), 0 28px 60px rgba(7,20,16,.20);

  --display:"Archivo","Segoe UI",system-ui,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;

  --wrap:74rem;
  --gut:clamp(1.15rem,4vw,2.5rem);
  --r:10px;
  --r-lg:16px;

  --tab-h:0px;               /* becomes real on mobile */
}

*,*::before,*::after{box-sizing:border-box}

/* No overflow rule on html or body (29 Oct 2026). One was here to hide the
   drawer parked off the right edge; on iOS a root overflow rule is also the
   trap that makes the fixed tab bar float. The drawer now hides in place
   (section 5), so nothing needs hiding. */
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

body{
  margin:0;
  background:var(--birch);
  color:var(--ink);
  font:400 clamp(1.02rem,.98rem + .18vw,1.115rem)/1.68 var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
  padding-bottom:var(--tab-h);
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.014em;
  margin:0 0 .5em;
  color:var(--pine-900);
  text-wrap:balance;
}
h1{font-size:clamp(2.35rem,1.65rem + 3.1vw,4.1rem);letter-spacing:-.026em}
h2{font-size:clamp(1.75rem,1.35rem + 1.85vw,2.75rem);letter-spacing:-.02em}
h3{font-size:clamp(1.2rem,1.08rem + .55vw,1.5rem)}
h4{font-size:1.05rem}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

a{color:var(--forest-600);text-underline-offset:.18em;text-decoration-thickness:from-font}
a:hover{color:var(--log)}

img,svg,video{max-width:100%;height:auto;display:block}
strong{font-weight:600;color:var(--pine-900)}

:focus-visible{outline:3px solid var(--ember);outline-offset:2px;border-radius:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:52rem;margin-inline:auto;padding-inline:var(--gut)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--pine-900);color:var(--on-dark);
  padding:.85rem 1.2rem;border-radius:0 0 var(--r) 0;font-weight:600;
}
.skip:focus{left:0}

.eyebrow{
  font:600 .715rem/1 var(--body);
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--log);margin:0 0 .95rem;display:block;
}
.eyebrow--light{color:var(--ember-300)}

.lede{
  font-size:clamp(1.1rem,1.02rem + .4vw,1.28rem);
  line-height:1.6;color:var(--ink-2);max-width:44ch;
}

/* --- 2. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font:600 1rem/1 var(--body);letter-spacing:.005em;
  padding:.95rem 1.6rem;border-radius:var(--r);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn svg{height:1.1em;width:auto;flex:none}

.btn-primary{background:var(--log);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:#83371B;color:#fff;box-shadow:var(--shadow-md)}

.btn-forest{background:var(--forest);color:#fff;box-shadow:var(--shadow-sm)}
.btn-forest:hover{background:#066030;color:#fff;box-shadow:var(--shadow-md)}

.btn-ghost{background:transparent;color:var(--pine-900);border-color:var(--birch-300)}
.btn-ghost:hover{background:var(--birch-100);border-color:var(--pine-600);color:var(--pine-900)}

.btn-ghost-light{background:transparent;color:var(--on-dark);border-color:rgba(242,237,226,.34)}
.btn-ghost-light:hover{background:rgba(242,237,226,.10);border-color:rgba(242,237,226,.6);color:#fff}

.btn-lg{padding:1.08rem 1.9rem;font-size:1.06rem}
.btn-block{width:100%}

/* --- 3. Utility bar ----------------------------------------------------- */
.utility{
  background:var(--pine-950);color:var(--on-dark-2);
  font-size:.82rem;line-height:1;
}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.6rem}
.utility a{color:var(--on-dark-2);text-decoration:none;display:inline-flex;align-items:center;gap:.4em}
.utility a:hover{color:#fff}
.utility svg{height:.95em;width:auto;opacity:.8}
.utility-left{display:flex;gap:1.5rem;align-items:center}
.utility-status{display:inline-flex;align-items:center;gap:.45em;font-weight:600;color:var(--on-dark)}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--forest-400);flex:none}
.dot--shut{background:var(--ember-300)}
@media (max-width:860px){ .utility{display:none} }

/* --- 4. Header ---------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(251,247,239,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--birch-200);
}
.site-header .wrap{display:flex;align-items:center;gap:1.4rem;min-height:4.9rem}

.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;flex:none;margin-right:auto}
.brand img{height:3.05rem;width:auto}
.brand-text{display:flex;flex-direction:column;gap:.16rem}
.brand-name{
  font-family:var(--display);font-weight:600;font-size:1.09rem;line-height:1;
  color:var(--pine-900);letter-spacing:-.012em;
}
.brand-sub{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);line-height:1}
/* Phones keep the name in type (29 Oct 2026). Their logo is an arched sign
   whose own lettering is about 5px tall at header size, so with the text
   hidden nothing readable said whose site this is on most iPhones. The town
   line goes instead, and the name may wrap to two lines. */
@media (max-width:420px){
  .brand{flex:0 1 auto;min-width:0;gap:.6rem}
  .brand img{height:2.9rem}
  .brand-sub{display:none}
  .brand-name{font-size:1rem;line-height:1.15}
}

.nav{display:flex;align-items:center;gap:.1rem}
.nav a{
  font-size:.89rem;font-weight:500;color:var(--ink-2);text-decoration:none;
  white-space:nowrap;
  padding:.6rem .5rem;border-radius:8px;transition:color .16s,background-color .16s;
}
.nav a:hover{color:var(--pine-900);background:var(--birch-100)}
.nav a[aria-current="page"]{color:var(--forest);font-weight:600}
.header-cta{display:flex;align-items:center;gap:.6rem;flex:none}
.header-phone{
  display:inline-flex;align-items:center;gap:.5em;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--pine-900);
  white-space:nowrap;
}
.header-phone:hover{color:var(--log)}
.header-phone svg{height:1.05em;width:auto;color:var(--log)}
/* The three product tabs are long labels (Holly's wording, Oct 2026). The
   header row stops growing at 1184px (the 74rem wrap), and from there up it
   holds the logo, all five tabs and the button with room to spare, measured
   29 Oct 2026. Below that the drawer takes over. It was 1280px, which gave
   Alex's own desktop (150% scaling, about 1270px) the hamburger and no
   button. */
@media (max-width:1183px){ .nav,.header-cta{display:none} }

/* Hamburger */
.burger{
  display:none;margin-left:auto;flex:none;
  width:2.9rem;height:2.9rem;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--birch-200);border-radius:9px;
  cursor:pointer;color:var(--pine-900);
}
.burger:hover{background:var(--birch-100)}
.burger svg{height:1.35rem;width:auto}
@media (max-width:1183px){ .burger{display:inline-flex} }

/* --- 5. Drawer ---------------------------------------------------------- */
.scrim{
  position:fixed;inset:0;z-index:98;background:rgba(7,20,16,.55);
  opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.scrim.open{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:99;
  width:min(21.5rem,88vw);
  background:var(--pine-900);color:var(--on-dark);
  /* Closed, it stays where it is: invisible and unfocusable, not parked past
     the right edge (which iOS can scroll to, and which needed an overflow
     rule on html to hide). visibility waits for the fade on close and flips
     at once on open, so focus can land in it immediately. */
  opacity:0;visibility:hidden;
  transform:scale(.97);transform-origin:100% 50%;
  transition:opacity .22s ease,transform .26s cubic-bezier(.4,0,.2,1),visibility 0s linear .26s;
  display:flex;flex-direction:column;
  box-shadow:-18px 0 50px rgba(7,20,16,.4);
  overscroll-behavior:contain;
}
.drawer.open{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .22s ease,transform .26s cubic-bezier(.4,0,.2,1),visibility 0s;
}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.35rem;border-bottom:1px solid var(--pine-700);flex:none;
}
.drawer-head .brand-name{color:var(--on-dark)}
.drawer-head .brand-sub{color:var(--on-dark-3)}
.drawer-close{
  width:2.6rem;height:2.6rem;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--pine-700);border-radius:9px;
  color:var(--on-dark);cursor:pointer;flex:none;
}
.drawer-close:hover{background:var(--pine-800)}
.drawer-close svg{height:1.2rem;width:auto}
.drawer-nav{padding:.7rem 0;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.drawer-nav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:.92rem 1.35rem;color:var(--on-dark);text-decoration:none;
  font-size:1.03rem;border-bottom:1px solid rgba(37,84,55,.4);
}
.drawer-nav a:hover{background:var(--pine-800);color:#fff}
.drawer-nav a[aria-current="page"]{color:var(--flame);font-weight:600}
.drawer-nav a svg{height:.85em;width:auto;opacity:.45}
.drawer-sub{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-3);padding:1.3rem 1.35rem .45rem;
}
.drawer-foot{padding:1.15rem 1.35rem;border-top:1px solid var(--pine-700);flex:none;display:grid;gap:.6rem}
.drawer-foot .btn{width:100%}
.drawer-foot p{font-size:.83rem;color:var(--on-dark-3);margin:.35rem 0 0;line-height:1.5}

/* --- 6. Mobile tab bar -------------------------------------------------- */
.tabbar{display:none}
@media (max-width:760px){
  :root{ --tab-h:calc(4.15rem + env(safe-area-inset-bottom,0px)) }
  .tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    display:grid;grid-template-columns:repeat(5,1fr);
    background:rgba(10,29,20,.97);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--pine-700);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .tabbar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.24rem;
    padding:.62rem .2rem .55rem;text-decoration:none;color:var(--on-dark-3);
    font-size:.66rem;letter-spacing:.02em;font-weight:600;
  }
  .tabbar a svg{height:1.28rem;width:auto;stroke-width:1.7}
  .tabbar a:hover,.tabbar a[aria-current="page"]{color:var(--flame)}
  .tabbar .tab-cta{color:var(--birch)}
  .tabbar .tab-cta-btn{
    display:flex;align-items:center;justify-content:center;
    width:2.55rem;height:2.55rem;margin-top:-1.3rem;border-radius:50%;
    background:var(--log);color:#fff;
    box-shadow:0 5px 16px rgba(152,64,32,.5);
    border:2.5px solid var(--pine-900);
  }
  .tabbar .tab-cta-btn svg{height:1.2rem}
  .tabbar .tab-cta span:last-child{margin-top:-.1rem}
}

/* --- 7. Hero ------------------------------------------------------------ */
.hero{
  position:relative;isolation:isolate;
  background:var(--pine-950);color:var(--on-dark);
  overflow:hidden;
}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* <picture> is inline: without this the img's height:100% stops resolving
   and the hero grows (Bromwell's went from 2035px to nearly 3000px). */
.hero-media picture{display:block;width:100%;height:100%}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 85% at 78% 34%, rgba(217,118,43,.20), transparent 58%),
    linear-gradient(102deg, rgba(7,20,16,.95) 0%, rgba(7,20,16,.88) 42%, rgba(7,20,16,.62) 70%, rgba(7,20,16,.55) 100%);
}
.hero-inner{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:center;
  padding-block:clamp(3.4rem,6.5vw,6rem);
}
/* Two columns: the copy lines up with the TOP of the quote card instead of
   centering on it. The card grew a photo row (29 Oct 2026) and centering slid
   the copy down with it; top-aligned, the headline and the lede both clear
   the fold on Alex's desktop (150% scaling, about 1270x640). Same fix as
   Grass Roots, 26 Oct 2026. */
@media (min-width:941px){ .hero-inner{align-items:start} .hero-inner > div:first-child{padding-top:1.4rem} }
.hero h1{color:#fff;margin-bottom:.42em}
.hero h1 em{
  font-style:italic;font-weight:400;
  color:var(--ember-300);
}
.hero .lede{color:var(--on-dark-2);max-width:38ch}
.hero-points{list-style:none;margin:1.7rem 0 0;padding:0;display:grid;gap:.72rem}
.hero-points li{position:relative;padding-left:1.35rem;font-size:.98rem;line-height:1.55;color:var(--on-dark-2)}
.hero-points li::before{content:"";position:absolute;left:.12rem;top:.6em;width:.4rem;height:.4rem;
  background:var(--ember-300);border-radius:1px;transform:rotate(45deg)}
@media (max-width:940px){
  .hero-inner{grid-template-columns:1fr;gap:2.3rem}
  .hero .lede{max-width:52ch}
  /* Stacked, the hero runs 1,500px+ with the quote card in it. Cap the
     photograph to the first screen, where the headline is, and fade it into
     the hero's own color so there is no seam. The cut puts the firebox about
     45-70% down, behind the lede, as a warm glow under a heavy wash. */
  .hero-media{inset:0 0 auto 0;height:62vh;min-height:25rem;max-height:40rem}
  .hero-media img{object-position:50% 60%}
  .hero-media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(7,20,16,.72) 0%,rgba(7,20,16,.58) 42%,rgba(7,20,16,.66) 72%,var(--pine-950) 100%);
  }
  .hero::after{background:none}
}

/* --- 8. Lead form ------------------------------------------------------- */
.lead-card{
  background:var(--birch);color:var(--ink);
  border-radius:var(--r-lg);padding:clamp(1.4rem,2.4vw,2rem);
  box-shadow:var(--shadow-lg);
  border-top:4px solid var(--log);
}
/* The Plan buttons jump here on a page with its own form; clear the sticky header. */
#quote{scroll-margin-top:calc(4.9rem + 1rem)}
.lead-card h2{font-size:clamp(1.32rem,1.15rem + .7vw,1.62rem);margin-bottom:.28em}
.lead-card > p{font-size:.94rem;color:var(--ink-3);margin-bottom:1.2rem;line-height:1.55}

.field{margin-bottom:.92rem}
.field label{
  display:block;font-size:.79rem;font-weight:600;letter-spacing:.055em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:.38rem;
}
.field .req{color:var(--log);margin-left:.15em}
.field input,.field select,.field textarea{
  width:100%;font:400 1rem/1.5 var(--body);color:var(--ink);
  background:#fff;border:1.5px solid var(--birch-300);border-radius:9px;
  padding:.76rem .88rem;transition:border-color .16s,box-shadow .16s;
}
.field textarea{min-height:5.4rem;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B6053' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:.72rem;padding-right:2.4rem}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(8,104,56,.16);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:#B4402B;box-shadow:0 0 0 3px rgba(180,64,43,.14);
}
.field-err{display:none;font-size:.82rem;color:#9C3624;margin-top:.32rem;font-weight:600}
.field-err.show{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.72rem}
@media (max-width:520px){ .field-row{grid-template-columns:1fr} }
.form-note{font-size:.79rem;color:var(--ink-3);margin:.85rem 0 0;line-height:1.5}

/* A label only a screen reader needs (the second and third photo inputs). */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Photos on the lead form (29 Oct 2026, ported from Grass Roots). Without
   JavaScript the three bare file inputs show. js/site.js marks the box
   .is-live, hides them and draws one button plus thumbnails. */
.photos-raw input{padding:.45rem .6rem;font-size:.9rem}
.photos-raw input + input,.photos-raw .vh + input{margin-top:.4rem}
.photos.is-live .photos-raw{display:none}
.photo-add{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;min-height:48px;padding:.6rem .85rem;
  background:#fff;color:var(--ink);
  border:1.5px dashed var(--birch-300);border-radius:9px;
  font:500 1rem/1.3 var(--body);cursor:pointer;
  transition:border-color .16s,box-shadow .16s;
}
.photo-add svg{width:1.15rem;height:1.15rem;flex:none;color:var(--log)}
.photo-add:hover,.photos[data-over] .photo-add{border-color:var(--forest);color:var(--forest)}
.photo-add:focus-visible{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(8,104,56,.16)}
.photo-add[disabled]{cursor:progress;color:var(--ink-3)}
.photo-list{display:flex;flex-wrap:wrap;gap:.55rem;margin:0;padding:0;list-style:none}
.photo-list:not(:empty){margin-bottom:.6rem}
.photo-list li{position:relative;width:4.5rem;height:4.5rem}
.photo-list canvas{
  display:block;width:100%;height:100%;
  border:1px solid var(--birch-300);border-radius:9px;background:var(--birch-100);
}
.photo-x{
  position:absolute;top:-.55rem;right:-.55rem;
  width:2rem;height:2rem;border-radius:50%;
  display:grid;place-items:center;padding:0;
  background:var(--ink);color:#fff;border:2px solid var(--birch);
  font:600 1.15rem/1 var(--body);cursor:pointer;
}
.photo-x:hover,.photo-x:focus-visible{background:var(--log);outline:none}
.photo-msg{font-size:.85rem;color:#9C3624;margin:.45rem 0 0;font-weight:600}
.photo-msg:empty{display:none}

/* --- 9. Trust strip ----------------------------------------------------- */
.strip{background:var(--pine-900);color:var(--on-dark-2);border-top:1px solid var(--pine-700)}
.strip .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;
  padding-block:1.7rem;text-align:center;
}
.strip .n{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);color:var(--flame);line-height:1.05;
  letter-spacing:-.02em;
}
.strip .l{display:block;font-size:.79rem;margin-top:.35rem;line-height:1.4;color:var(--on-dark-3)}
@media (max-width:760px){ .strip .wrap{grid-template-columns:repeat(2,1fr);gap:1.35rem} }

/* --- 10. Sections ------------------------------------------------------- */
.section{padding-block:clamp(3.2rem,6vw,5.6rem)}
.section--tint{background:var(--birch-100)}
.section--pine{background:var(--pine-900);color:var(--on-dark-2)}
.section--pine h2,.section--pine h3,.section--pine strong{color:#fff}
.section--pine .lede{color:var(--on-dark-2)}

.section-head{max-width:46rem;margin-bottom:clamp(2rem,3.4vw,3rem)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .lede{margin-inline:auto}

/* --- 11. Product cards -------------------------------------------------- */
.cards{display:grid;gap:1.35rem;grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr))}
.card{
  background:var(--birch);border:1px solid var(--birch-200);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
a.card{text-decoration:none;color:inherit}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--birch-300)}
.card-img{aspect-ratio:4/3;background:var(--birch-200);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
/* The padded variant holds a cut-out product shot. It used to size the image
   with height:100% inside a grid cell whose height came from aspect-ratio.
   That percentage does not resolve the same way in every browser: Chrome let
   the image overflow and cropped it, and Safari could drop it altogether.
   Pinning the image to the box takes the guesswork out. */
.card-img--pad{position:relative;background:var(--birch-100)}
.card-img--pad img{position:absolute;inset:1.2rem;width:calc(100% - 2.4rem);height:calc(100% - 2.4rem);object-fit:contain}
.card-body{padding:1.3rem 1.35rem 1.45rem;display:flex;flex-direction:column;flex:1}
.card-body h3{margin-bottom:.35em}
.card-body p{font-size:.945rem;color:var(--ink-2);line-height:1.6;margin-bottom:1rem}
.card-more{
  margin-top:auto;font-weight:600;font-size:.92rem;color:var(--log);
  display:inline-flex;align-items:center;gap:.4em;
}
.card-more svg{height:.8em;width:auto;transition:transform .18s}
a.card:hover .card-more svg{transform:translateX(3px)}

/* --- 12. Split ---------------------------------------------------------- */
.split{
  /* min(...,100%): a bare 19rem (304px) column is wider than a 320px phone's
     content box and pushed every split page 2px sideways (found 29 Oct 2026). */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));
  gap:clamp(2rem,4vw,4rem);align-items:center;
}
.split-media img{border-radius:var(--r-lg);box-shadow:var(--shadow-md);width:100%}
.split--flip .split-media{order:2}
@media (max-width:820px){ .split--flip .split-media{order:0} }

.tick{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.75rem}
.tick li{position:relative;padding-left:1.4rem;line-height:1.6}
.tick li::before{content:"";position:absolute;left:.12rem;top:.66em;width:.42rem;height:.42rem;
  background:var(--log);border-radius:1px;transform:rotate(45deg)}
.section--pine .tick li::before{background:var(--ember-300)}

/* --- 13. Brand grid ----------------------------------------------------- */
.brand-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr))}
.brand-tile{
  display:flex;flex-direction:column;gap:.22rem;
  background:var(--birch);border:1px solid var(--birch-200);border-radius:var(--r);
  padding:.85rem .9rem 1rem;text-decoration:none;color:var(--ink);
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
a.brand-tile:hover{border-color:var(--forest);transform:translateY(-2px);box-shadow:var(--shadow-sm);color:var(--ink)}
.brand-tile--static{cursor:default}
/* Supplier logos arrive on assorted baked-in backgrounds (some white, some
   black, some green). A white plate with contain-fit is the only treatment
   that keeps every one of them legible and the row looking deliberate. */
.brand-tile-logo{
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--birch-200);border-radius:7px;
  height:4.3rem;margin-bottom:.6rem;padding:.5rem;overflow:hidden;
}
.brand-tile-logo img{max-width:100%;height:auto}
.brand-tile b{font-family:var(--display);font-weight:600;font-size:.99rem;letter-spacing:-.01em;line-height:1.2}
.brand-tile span{font-size:.78rem;color:var(--ink-3);line-height:1.35}

/* Logo lockup at the top of a brand page. It sits straight on the page, at
   a size build.py sets per logo; multiply lets the white around a supplier's
   PNG drop into the paper instead of showing as a box. */
img.brand-mark{max-width:100%;height:auto;margin-bottom:1.6rem;mix-blend-mode:multiply}
.brand-mark{margin-bottom:1.6rem}
/* Fallback when a supplier logo does not exist. Set the name rather than
   ship an empty box. */
.brand-mark--type{
  display:inline-block;height:auto;font-family:var(--display);font-weight:600;
  font-size:1.4rem;color:var(--pine-900);letter-spacing:-.015em;padding:.55rem 1rem;
}
.brand-tile-logo--type,.logo-fill--type{
  font-family:var(--display);font-weight:600;font-size:1.05rem;
  color:var(--pine-900);text-align:center;letter-spacing:-.01em;line-height:1.25;
}

/* Brand card on the brands index */
.card-img--logo{
  aspect-ratio:auto;height:7.5rem;display:grid;place-items:center;
  background:#fff;padding:1.1rem;border-bottom:1px solid var(--birch-200);
}
.logo-fill{display:grid;place-items:center;width:100%;height:100%}
.card-img--logo img{max-width:100%;height:auto;object-fit:contain}
/* An explicit cap, not max-height:100%: the percentage did not resolve inside
   the grid cell and tall logos (Lopi, Napoleon, Forge & Flame) were cut off. */
.logo-fill img{max-height:5.3rem;width:auto;max-width:100%;object-fit:contain}
.logo-fill--type{font-size:1.3rem}
.card--brand .card-body{padding-top:1.1rem}

/* --- 13b. Feature photos ------------------------------------------------ */
.feature-photo{margin:0}
.feature-photo img{
  width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-md);
  max-height:32rem;object-fit:cover;object-position:center 42%;
}
.feature-photo figcaption{
  font-size:.89rem;color:var(--ink-3);margin-top:.75rem;line-height:1.5;
  text-align:center;max-width:46rem;margin-inline:auto;
}
/* The storefront shot is portrait off an iPhone. Left to fill a wide figure it
   crops to a strip, so inline placements cap the width instead. */
.feature-photo--inline{max-width:22rem;margin:1.8rem auto}
.feature-photo--inline img{max-height:none}
/* These carry isolated product shots as well as room shots, and several are
   square or portrait. A full-bleed cover crop cut a 650x650 stove down to a
   band, so these size to the image instead and never upscale past native. */
.feature-photo--wide{max-width:52rem;margin-inline:auto;text-align:center}
.feature-photo--wide img{
  max-height:none;object-fit:contain;width:auto;max-width:100%;margin-inline:auto;
}

/* Never crop people. The family photo is the point of the page, so it is shown
   whole at its own aspect ratio rather than cover-cropped to a band. */
.feature-photo--nocrop{max-width:47rem;margin-inline:auto}
.feature-photo--nocrop img{max-height:none;object-fit:contain;height:auto}

/* --- 13c. FAQ ----------------------------------------------------------- */
.faq{
  border:1px solid var(--birch-200);border-radius:var(--r);
  background:var(--birch);margin-bottom:.7rem;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:1rem 3rem 1rem 1.2rem;position:relative;
  font-family:var(--display);font-weight:600;font-size:1.03rem;color:var(--pine-900);
  line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.25rem;top:1.35rem;
  width:.6rem;height:.6rem;border-right:2px solid var(--log);border-bottom:2px solid var(--log);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{background:var(--birch-100)}
.faq-a{padding:0 1.2rem 1.15rem;color:var(--ink-2);font-size:.98rem;line-height:1.62}
.section--tint .faq{background:#fff}

/* --- 14. Quote / review ------------------------------------------------- */
.quotes{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.quote{
  background:var(--pine-850);border:1px solid var(--pine-700);
  border-radius:var(--r-lg);padding:1.5rem 1.6rem;
}
.quote p{font-size:1.01rem;line-height:1.62;color:var(--on-dark);margin-bottom:1rem}
.quote cite{font-style:normal;font-size:.86rem;color:var(--on-dark-3);font-weight:600}
.stars{display:flex;gap:.14rem;margin-bottom:.9rem}
.stars svg{height:1rem;width:auto;color:var(--flame)}

/* --- 15. CTA band ------------------------------------------------------- */
.cta-band{
  background:linear-gradient(120deg,var(--forest) 0%,#065A2F 55%,var(--pine-800) 100%);
  color:#fff;
}
.cta-band .wrap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.8rem;padding-block:clamp(2.4rem,4vw,3.4rem);
}
.cta-band h2{color:#fff;margin-bottom:.3em;max-width:22ch}
.cta-band p{color:rgba(255,255,255,.86);max-width:44ch;margin:0}
.cta-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.cta-band .btn-primary{background:var(--birch);color:var(--pine-900)}
.cta-band .btn-primary:hover{background:#fff;color:var(--pine-900)}

/* --- 16. Prose ---------------------------------------------------------- */
.prose h2{margin-top:2.2em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.7em}
.prose ul,.prose ol{padding-left:1.25rem;margin:0 0 1.05em}
.prose li{margin-bottom:.5rem}

.callout{
  background:var(--birch-100);border-left:3px solid var(--log);
  border-radius:0 var(--r) var(--r) 0;padding:1.2rem 1.4rem;margin:1.6rem 0;
}
.callout p:last-child{margin-bottom:0}
.callout h4{margin-bottom:.4em;color:var(--log)}

/* --- 17. Info blocks ---------------------------------------------------- */
.info-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.info{
  background:var(--birch);border:1px solid var(--birch-200);
  border-radius:var(--r-lg);padding:1.4rem 1.45rem;
}
.info h3{font-size:1.06rem;margin-bottom:.5em}
.info p,.info address{font-size:.95rem;color:var(--ink-2);font-style:normal;line-height:1.65;margin:0}

/* Dark variant, so the buying-guidance cards do not need inline styles */
.info-grid--dark .info{background:var(--pine-850);border-color:var(--pine-700)}
.info-grid--dark .info h3{color:#fff}
.info-grid--dark .info p{color:var(--on-dark-2)}
.info-grid--dark .info address{color:var(--on-dark-2)}
.info-grid--dark .info a{color:var(--ember-300)}
.info a{color:var(--forest-600);font-weight:600;text-decoration:none}
.info a:hover{text-decoration:underline}

.hours{width:100%;border-collapse:collapse;font-size:.95rem}
.hours th,.hours td{text-align:left;padding:.44rem 0;border-bottom:1px solid var(--birch-200);font-weight:400;color:var(--ink-2)}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}
.hours td{text-align:right;font-variant-numeric:tabular-nums}
.hours tr.today th,.hours tr.today td{font-weight:700;color:var(--pine-900)}

/* --- 18. Footer --------------------------------------------------------- */
.site-footer{background:var(--pine-950);color:var(--on-dark-3);padding-block:clamp(2.8rem,5vw,4rem) 0}
.footer-grid{
  display:grid;gap:2.2rem;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  padding-bottom:2.4rem;
}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;gap:1.9rem} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr} }
.footer-brand img{height:4.6rem;width:auto;margin-bottom:1rem}
.footer-brand p{font-size:.92rem;line-height:1.65;max-width:32ch;color:var(--on-dark-3)}
.site-footer h4{
  font-family:var(--body);font-size:.71rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark);margin-bottom:1rem;
}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.site-footer a{color:var(--on-dark-3);text-decoration:none;font-size:.93rem}
.site-footer a:hover{color:var(--flame)}
.site-footer address{font-style:normal;font-size:.93rem;line-height:1.7;color:var(--on-dark-3)}
.footer-bar{
  border-top:1px solid var(--pine-800);
  padding-block:1.25rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;
  font-size:.82rem;color:var(--on-dark-3);
}
.footer-bar p{margin:0}

/* Crutchfield Marketing credit — inherits the footer's own color. */
.cm-credit{
  display:inline-flex;align-items:center;gap:.42em;font-size:.75rem;line-height:1;
  letter-spacing:.01em;text-decoration:none;color:inherit;
  padding:.5em .85em;border-radius:999px;white-space:nowrap;
  border:1px solid currentColor;
  border-color:color-mix(in srgb, currentColor 32%, transparent);
}
.cm-credit svg{height:1.35em;width:auto;flex:none;display:block}
.cm-credit b{font-weight:600}
.cm-credit:hover{color:inherit}
.cm-credit:focus-visible b{text-decoration:underline;text-underline-offset:.25em}
.cm-credit:focus-visible{border-color:color-mix(in srgb, currentColor 60%, transparent)}

/* --- 19. Page header (interior) ----------------------------------------- */
.page-head{
  background:var(--pine-900);color:var(--on-dark-2);
  padding-block:clamp(2.6rem,5vw,4.2rem);
  border-bottom:1px solid var(--pine-700);
}
.page-head h1{color:#fff;font-size:clamp(2rem,1.55rem + 2.2vw,3.1rem)}
.page-head .lede{color:var(--on-dark-2);max-width:50ch}
.crumbs{font-size:.83rem;color:var(--on-dark-3);margin-bottom:1rem}
.crumbs a{color:var(--on-dark-3);text-decoration:none}
.crumbs a:hover{color:var(--flame)}
.crumbs span{margin-inline:.45em;opacity:.5}

/* --- 20. Misc ----------------------------------------------------------- */
.center{text-align:center}
.mt-lg{margin-top:2rem}
/* Two buttons side by side; when they wrap on a phone they stay left-aligned. */
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem}
.notice{
  background:var(--birch-100);border:1px solid var(--birch-200);
  border-radius:var(--r-lg);padding:1.5rem 1.6rem;
}
.notice p:last-child{margin-bottom:0}

/* --- Motion (29 Oct 2026) ------------------------------------------------
   The house scroll treatment. js/site.js adds .rv only to blocks below the
   first screen and only when it runs, so with JavaScript off nothing is ever
   hidden. Its sweep on scroll means a jump to the bottom cannot leave a block
   at opacity 0. */
.rv{
  opacity:0;transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
             transform .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
  will-change:opacity,transform;
}
.rv.is-in{opacity:1;transform:none}
.rv.is-done{will-change:auto;transition:none}
/* Hero parallax: overscanned 6% so the drift (clamped in site.js from the
   rendered height) can never show an edge; .hero-media clips the overscan. */
.hero-media img{transform:scale(1.06);will-change:transform}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero-media img{transform:none}
}

@media print{
  .rv{opacity:1!important;transform:none!important}
  .utility,.site-header,.tabbar,.drawer,.scrim,.cta-band{display:none!important}
  body{padding-bottom:0}
}