/* Brand tokens taken from the current bellafinaoutdoors.com theme:
     deep navy foreground, warm cream ground, the orange accent, the gold, and
     the blue family that sits between them. Type is the same three families
     the main site uses — Cormorant Garamond for display, Montserrat for
     headings and UI, Roboto for body copy. */
  :root{
    --navy:#0d1b2a;
    --navy-2:#114a73;
    --blue:#3d7da8;
    --blue-pale:#b8d0e3;
    --gold:#c8a25b;
    --gold-light:#dcbc84;
    --orange:#e5672a;
    --orange-light:#ea8555;
    --orange-dark:#c9531c;
    --cream:#fdf5ec;
    --cream-2:#fbebda;
    --paper:#fdf5ec;
    --ink:#0d1b2a;
    --muted:#114a73;
    --radius:10px;
    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', Times, serif;
    --heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;}
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
  h1,h2{font-family:var(--serif);font-weight:600;margin:0 0 16px;line-height:1.15;}
  h3{font-family:var(--heading);font-weight:600;margin:0 0 16px;line-height:1.25;letter-spacing:-.01em;}
  .eyebrow{font-family:var(--heading);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:var(--gold);font-weight:600;}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:6px;font-family:var(--heading);font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;}
  .btn:hover{transform:translateY(-2px);opacity:.96;}
  .btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 26px -10px rgba(229,103,42,.6);}
  .btn-primary:hover{background:var(--orange-dark);}
  .btn-outline{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(2px);}
  .btn-navy{background:var(--navy);color:#fff;box-shadow:0 10px 26px -10px rgba(13,27,42,.6);}
  .btn-arrow{display:inline-block;transition:transform .15s ease;}
  .btn:hover .btn-arrow{transform:translateX(3px);}

  /* Header */
  header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--blue-pale);}
  .cta-row{display:flex;gap:16px;flex-wrap:wrap;}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 24px;max-width:1280px;margin:0 auto;}
  .logo{display:flex;align-items:center;gap:10px;}
  .logo img{height:60px;width:auto;flex-shrink:0;}
  .logo.footer-logo{background:#fff;border-radius:10px;padding:10px 16px;display:inline-flex;}
  .logo.footer-logo img{height:44px;}
  nav.links{display:flex;align-items:center;gap:18px;}
  nav.links a{font-family:var(--heading);font-size:.88rem;color:var(--navy);font-weight:500;white-space:nowrap;}
  nav.links a:hover{color:var(--orange);}
  /* Header buttons follow the sibling pages: two short uppercase labels, navy
     for the shop and accent for the quote. Short labels are what let the nav
     carry seven items without the buttons wrapping over them. */
  .header-ctas{display:flex;gap:10px;align-items:center;}
  .header-ctas .btn{padding:14px 26px;font-size:.78rem;letter-spacing:.08em;
    border-radius:8px;text-transform:uppercase;font-weight:700;white-space:nowrap;}
  .header-ctas .btn-primary{background:var(--orange);}
  .header-ctas .btn-ghost{background:var(--navy);color:#fff;}
  .header-ctas .btn-ghost:hover{background:var(--navy-2);}
  @media (max-width:1100px){ nav.links{display:none;} }

  /* Hero */
  /* Base hero is a flat dark ground. A site with its own hero photograph adds
     .hero-photo and points --hero-image at the file in its own assets/ dir;
     without that no image is requested at all. Use a root-relative path there
     (/assets/...) — a relative url() inside a custom property resolves against
     this stylesheet, not the page. */
  .hero{position:relative;padding:150px 24px 130px;text-align:center;overflow:hidden;
    background:var(--navy);
  }
  .hero-photo{
    background-image:var(--hero-image);
    background-size:cover;
    background-position:center 60%;
  }
  .hero::before{content:"";position:absolute;inset:0;z-index:1;background:
    linear-gradient(100deg, rgba(10,16,26,.72) 0%, rgba(10,16,26,.5) 32%, rgba(10,16,26,.12) 58%, transparent 72%);
    pointer-events:none;}
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:1;
    background:linear-gradient(to bottom, transparent, rgba(0,0,0,.35));pointer-events:none;}
  .hero-ring{position:absolute;z-index:2;width:640px;height:640px;border:1px solid rgba(216,181,126,.18);border-radius:50%;top:-260px;right:-160px;pointer-events:none;}
  .hero-ring::before{content:"";position:absolute;inset:60px;border:1px solid rgba(216,181,126,.12);border-radius:50%;}
  .hero-grid{position:relative;z-index:3;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr .85fr;gap:60px;align-items:center;text-align:left;}
  .hero-inner{max-width:660px;}
  .lead-card{justify-self:end;width:100%;max-width:440px;}
  .hero .eyebrow{color:var(--gold-light);font-size:.8rem;}
  .hero h1{color:#fff;font-family:var(--serif);font-weight:600;font-size:clamp(2.3rem,4.2vw,3.4rem);line-height:1.12;letter-spacing:-.005em;margin-top:16px;text-shadow:0 2px 30px rgba(0,0,0,.25);}
  .hero p.sub{color:#dfe3ec;font-size:1.22rem;max-width:580px;margin:0 0 34px;}
  .hero .cta-row{display:flex;gap:16px;justify-content:flex-start;flex-wrap:wrap;}

  /* Lead capture card */
  .lead-card{position:relative;background:#fff;border-radius:18px;padding:34px 32px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);}
  .lead-card::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;background:linear-gradient(140deg, var(--gold-light), transparent 40%);-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
  .lead-card h3{font-family:var(--serif);font-size:1.35rem;color:var(--navy);margin-bottom:6px;}
  .lead-card .lead-sub{font-size:.88rem;color:var(--muted);margin-bottom:22px;}
  .lead-card label{display:block;font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);margin-bottom:6px;}
  .lead-field{margin-bottom:16px;}
  .lead-card input,
  .lead-card select{width:100%;padding:12px 14px;border:1px solid var(--blue-pale);border-radius:var(--radius);font-size:.94rem;font-family:var(--sans);background:var(--paper);color:var(--ink);}
  .lead-card input:focus,
  .lead-card select:focus{outline:2px solid var(--gold);outline-offset:1px;}
  .lead-card .btn{width:100%;justify-content:center;margin-top:6px;}
  .lead-note{font-size:.74rem;color:var(--muted);text-align:center;margin-top:14px;}
  .lead-status{display:none;text-align:center;padding:26px 4px 10px;}
  .lead-status.is-visible{display:block;}
  .lead-status .tick{width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--gold-light);
    display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.3rem;}
  .lead-status h4{font-family:var(--serif);font-weight:400;font-size:1.25rem;color:var(--navy);margin:0 0 8px;}
  .lead-status p{font-size:.9rem;color:var(--muted);margin:0;}
  .lead-error{display:none;font-size:.82rem;color:#a3341c;background:#fdeee9;border:1px solid #f3c9bd;
    border-radius:8px;padding:10px 12px;margin-bottom:14px;}
  .lead-error.is-visible{display:block;}
  .lead-card.is-sent .lead-fields{display:none;}
  .lead-embed{width:100%;min-height:560px;border:none;border-radius:10px;display:block;background:#fff;}

  /* Quote modal */
  .modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;}
  .modal.is-open{display:flex;}
  .modal-backdrop{position:absolute;inset:0;background:rgba(10,16,26,.72);backdrop-filter:blur(2px);}
  .modal-card{position:relative;background:#fff;border-radius:18px;width:100%;max-width:520px;max-height:90vh;
    overflow:auto;padding:30px 28px 24px;box-shadow:0 40px 80px -24px rgba(0,0,0,.55);}
  .modal-card h3{font-family:var(--serif);font-size:1.4rem;color:var(--navy);margin-bottom:6px;}
  .modal-card .modal-sub{font-size:.9rem;color:var(--muted);margin:0 0 20px;}
  .modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid #e6ddc9;
    background:var(--paper);color:var(--navy);font-size:1.15rem;line-height:1;cursor:pointer;display:flex;
    align-items:center;justify-content:center;}
  .modal-close:hover{background:var(--cream-2);}
  .modal-embed-wrap{position:relative;min-height:560px;}
  .modal-loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center;
    font-size:.88rem;color:var(--muted);background:var(--paper);border-radius:10px;}
  .modal-embed-wrap.is-loaded .modal-loading{display:none;}
  body.modal-open{overflow:hidden;}
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} .hero-inner{max-width:100%;text-align:center;} .hero .cta-row{justify-content:center;} .lead-card{max-width:460px;margin:0 auto;} }

  .trust-strip{background:var(--cream-2);padding:16px 24px;}
  .trust-strip .wrap{display:flex;gap:14px 36px;justify-content:center;flex-wrap:wrap;font-size:.82rem;letter-spacing:.04em;color:var(--navy);text-transform:uppercase;font-weight:600;}
  .trust-strip span{display:flex;align-items:center;gap:8px;}
  .trust-strip svg{width:16px;height:16px;color:var(--orange);}

  /* Design center intro — the "who we are" block that runs directly under the
     hero, before any product copy. */
  .design-center{background:var(--paper);padding:96px 24px 88px;}
  .design-center .head{text-align:center;max-width:760px;margin:0 auto 46px;}
  .design-center h2{color:var(--navy);font-size:clamp(1.8rem,3.4vw,2.5rem);}
  .design-center .head p{color:var(--muted);margin-top:14px;}
  .dc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1220px;margin:0 auto;}
  .dc-card{background:#fff;border:1px solid var(--blue-pale);border-radius:16px;padding:30px 26px;}
  .dc-card .icon{width:44px;height:44px;border-radius:12px;background:var(--navy);
    display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .dc-card .icon svg{width:24px;height:24px;}
  .dc-card h3{color:var(--navy);font-size:1.12rem;margin-bottom:10px;line-height:1.35;}
  .dc-card p{color:var(--muted);font-size:.94rem;margin:0;}
  .dc-cta{justify-content:center;margin-top:36px;}

  /* Partner logos. Each mark is a different shape and weight, so they are
     capped by height rather than width and knocked back to a single navy tone
     — that stops the loudest logo from dominating the row and keeps the strip
     reading as one band rather than eight competing brands. */
  .brand-strip{max-width:1100px;margin:52px auto 0;padding-top:34px;
    border-top:1px solid var(--blue-pale);}
  .brand-strip-label{text-align:center;margin:0 0 22px;font-family:var(--heading);
    font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;}
  /* A grid rather than a wrapped flex row, so eight marks sit as even rows
     instead of leaving an orphan on the second line. Each logo is boxed to the
     same slot and capped on both axes, which keeps a wide wordmark and a round
     badge reading at the same optical weight. */
  .brand-logos{list-style:none;margin:0;padding:0;display:grid;
    grid-template-columns:repeat(3,1fr);gap:30px 36px;align-items:center;}
  .brand-logos li{display:flex;align-items:center;justify-content:center;height:52px;}
  .brand-logos img{max-height:100%;max-width:160px;width:auto;object-fit:contain;
    filter:grayscale(1) contrast(1.15);opacity:.8;transition:filter .2s ease,opacity .2s ease;}
  .brand-logos img:hover{filter:none;opacity:1;}
  @media (max-width:820px){ .brand-logos{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:560px){
    .brand-logos{grid-template-columns:repeat(2,1fr);gap:24px 20px;}
    .brand-logos li{height:44px;}
  }
  @media (max-width:1040px){ .dc-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:620px){ .dc-grid{grid-template-columns:1fr;} }

  /* A navy-outlined button for use on the light sections. */
  .btn-outline-navy{background:transparent;color:var(--navy);border:1px solid var(--navy);}
  .btn-outline-navy:hover{background:var(--navy);color:#fff;}

  /* Trade block: deliberately quiet and late, after the homeowner journey. */
  /* Trade block: the two-card treatment used on the sibling pages. It stays
     after the homeowner journey, and reuses the navy .aud-card.pro styling
     rather than inventing a second dark card. */
  .trade{background:var(--cream-2);padding:80px 24px;}
  .trade .head{text-align:center;max-width:720px;margin:0 auto 40px;}
  .trade h2{color:var(--navy);font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:14px;}
  .trade .head p{color:var(--muted);font-size:.98rem;margin:0;}
  .trade .aud-grid{max-width:1180px;}
  .trade-cta{justify-content:center;margin-top:40px;}
  /* These cards carry no button of their own, so drop the list's trailing gap. */
  .trade .aud-card ul{margin-bottom:0;}
  .trade .btn-outline{color:var(--navy);border-color:var(--navy);}
  .trade .btn-outline:hover{background:var(--navy);color:#fff;}

  /* Step cards carry their own link into the next stage of the journey. */
  .step-card .link{display:inline-block;margin-top:14px;font-size:.82rem;font-weight:700;
    letter-spacing:.03em;text-transform:uppercase;color:var(--orange-dark);}

  /* Lede / intro prose */
  .lede{background:var(--paper);padding:96px 24px 84px;}
  .lede .wrap{max-width:920px;}
  .lede .eyebrow{display:block;text-align:center;margin-bottom:10px;}
  .lede h2{color:var(--navy);font-size:clamp(1.8rem,3.4vw,2.5rem);text-align:center;margin-bottom:34px;}
  .lede p{font-size:1.06rem;color:var(--muted);margin:0 0 20px;}
  .lede p.first::first-letter{font-family:var(--serif);font-size:3.2rem;line-height:.9;float:left;padding:6px 12px 0 0;color:var(--orange-dark);}
  .lede .pull{border-left:3px solid var(--gold);padding:6px 0 6px 22px;margin:30px 0;font-family:var(--serif);font-size:1.3rem;line-height:1.45;color:var(--navy);}

  /* Process section */
  .process{background:var(--navy);color:#fff;padding:90px 24px;}
  .process h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.6rem);max-width:780px;margin:0 auto 50px;text-align:center;}
  .process .eyebrow{text-align:center;display:block;margin-bottom:10px;}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1180px;margin:0 auto;}
  .step-card{background:var(--cream-2);color:var(--ink);border-radius:14px;padding:34px 28px;}
  .step-card .num{font-family:var(--serif);font-size:2.4rem;color:var(--orange-dark);display:block;margin-bottom:10px;}
  .step-card h3{font-size:1.25rem;margin-bottom:10px;}
  .step-card p{font-size:.94rem;color:var(--muted);margin:0;}
  @media (max-width:820px){.steps{grid-template-columns:1fr;}}

  /* Split sections */
  .split{padding:100px 24px;}
  .split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
  .split.reverse .wrap{direction:rtl;}
  .split.reverse .wrap > *{direction:ltr;}
  .split h2{font-size:clamp(1.8rem,3.4vw,2.5rem);color:var(--navy);}
  .split p{color:var(--muted);margin-bottom:16px;font-size:1.02rem;}
  .split .btn{margin-top:8px;}
  .split ul{margin:0 0 20px;padding-left:20px;color:var(--muted);font-size:1rem;}
  .split li{margin-bottom:8px;}
  .visual{border-radius:18px;aspect-ratio:4/3;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
  .visual svg{width:40%;height:40%;opacity:.9;}
  .visual-fire{background:linear-gradient(160deg,var(--orange-light),var(--orange) 60%,var(--orange-dark));}
  .visual-water{background:linear-gradient(160deg,var(--blue),var(--navy) 65%);}
  /* Section photos fill the 4:3 slot edge to edge. */
  .visual-photo{background:#0e1929;box-shadow:0 18px 44px rgba(11,18,32,.22);}
  .visual-photo img{display:block;width:100%;height:100%;object-fit:cover;}
  @media (max-width:860px){ .split .wrap{grid-template-columns:1fr;} .split.reverse .wrap{direction:ltr;} }

  /* Categories */
  .categories{background:var(--cream);padding:100px 24px;}
  .categories .head{text-align:center;max-width:700px;margin:0 auto 50px;}
  .categories h2{color:var(--navy);font-size:clamp(1.8rem,3.4vw,2.5rem);}
  .categories .head p{color:var(--muted);}
  /* The second path through this section — buying one component rather than a
     whole kitchen — is set apart so a component shopper spots it at a glance. */
  .head-note{margin-top:18px;padding:14px 20px;border-left:3px solid var(--gold-light);
    background:rgba(216,181,126,.09);border-radius:0 10px 10px 0;text-align:left;font-size:.98rem;}
  .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1180px;margin:0 auto;}
  .cat-card{background:#fff;border-radius:16px;padding:32px 24px;text-align:left;border:1px solid var(--blue-pale);box-shadow:0 1px 3px rgba(21,34,56,.04);transition:transform .18s ease, box-shadow .18s ease;}
  .cat-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px -14px rgba(21,34,56,.16);}
  .cat-card .icon{width:44px;height:44px;border-radius:10px;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .cat-card .icon svg{width:22px;height:22px;color:var(--gold-light);}
  .cat-card h3{font-size:1.08rem;margin-bottom:8px;color:var(--navy);}
  .cat-card p{font-size:.88rem;color:var(--muted);margin:0 0 14px;}
  .cat-card .link{font-size:.82rem;font-weight:700;color:var(--orange-dark);}
  @media (max-width:1000px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.cat-grid{grid-template-columns:1fr;}}

  /* Audience band */
  .audience{background:var(--paper);padding:100px 24px;}
  .audience .head{text-align:center;max-width:700px;margin:0 auto 50px;}
  .audience h2{color:var(--navy);font-size:clamp(1.8rem,3.4vw,2.5rem);}
  .audience .head p{color:var(--muted);}
  .aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1180px;margin:0 auto;}
  .aud-card{border-radius:18px;padding:40px 36px;border:1px solid var(--blue-pale);background:#fff;}
  .aud-card.pro{background:var(--navy);border-color:var(--navy);color:#c7cede;}
  .aud-card.pro h3, .aud-card.pro strong{color:#fff;}
  .aud-card.pro .eyebrow{color:var(--gold-light);}
  .aud-card h3{color:var(--navy);font-size:1.5rem;margin-top:10px;}
  .aud-card ul{list-style:none;padding:0;margin:0 0 24px;}
  .aud-card li{position:relative;padding-left:26px;margin-bottom:12px;font-size:.95rem;color:var(--muted);}
  .aud-card.pro li{color:#c7cede;}
  .aud-card li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;background:var(--orange);}
  @media (max-width:860px){.aud-grid{grid-template-columns:1fr;}}

  /* Spec table */
  .specs{background:var(--cream);padding:100px 24px;}
  .specs .head{text-align:center;max-width:700px;margin:0 auto 44px;}
  .specs h2{color:var(--navy);font-size:clamp(1.8rem,3.4vw,2.5rem);}
  .specs .head p{color:var(--muted);}
  .spec-table{max-width:1000px;margin:0 auto;background:#fff;border:1px solid var(--blue-pale);border-radius:16px;overflow:hidden;}
  .spec-row{display:grid;grid-template-columns:230px 1fr;gap:0;border-bottom:1px solid #f0e7d5;}
  .spec-row:last-child{border-bottom:none;}
  .spec-row dt{padding:20px 26px;font-weight:700;color:var(--navy);background:var(--paper);font-size:.92rem;}
  .spec-row dd{padding:20px 26px;margin:0;color:var(--muted);font-size:.95rem;}
  @media (max-width:700px){.spec-row{grid-template-columns:1fr;} .spec-row dd{padding-top:0;}}

  /* Testimonials */
  .testimonials{background:var(--paper);padding:100px 24px;}
  .testimonials .head{text-align:center;max-width:640px;margin:0 auto 50px;}
  .testimonials h2{color:var(--navy);font-size:clamp(1.8rem,3.4vw,2.5rem);}
  .sample-note{font-size:.78rem;color:var(--gold);background:var(--cream-2);border:1px dashed var(--gold-light);display:inline-block;padding:6px 14px;border-radius:999px;margin-top:6px;}
  .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1180px;margin:0 auto;}
  .testi-card{background:#fff;border:1px solid var(--blue-pale);border-radius:16px;padding:32px 28px;box-shadow:0 1px 3px rgba(21,34,56,.04);}
  .testi-card .stars{color:var(--gold);letter-spacing:2px;margin-bottom:14px;font-size:.95rem;}
  .testi-card p{font-size:.96rem;color:var(--ink);font-style:italic;margin:0 0 22px;line-height:1.65;}
  .testi-author{display:flex;align-items:center;gap:12px;}
  .testi-author .avatar{width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--gold-light);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0;}
  .testi-author div:last-child{display:flex;flex-direction:column;font-size:.85rem;}
  .testi-author strong{color:var(--navy);}
  .testi-author span{color:var(--muted);font-size:.8rem;}
  @media (max-width:860px){.testi-grid{grid-template-columns:1fr;}}

  /* FAQ */
  .faq{background:#fff;padding:100px 24px;}
  .faq .head{text-align:center;max-width:640px;margin:0 auto 44px;}
  .faq h2{color:var(--navy);font-size:clamp(1.8rem,3.4vw,2.5rem);}
  .faq-list{max-width:860px;margin:0 auto;}
  .faq-item{border:1px solid var(--blue-pale);border-radius:12px;margin-bottom:14px;background:var(--paper);overflow:hidden;}
  .faq-item summary{cursor:pointer;list-style:none;padding:22px 26px;font-weight:600;color:var(--navy);font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:16px;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:"+";color:var(--orange-dark);font-size:1.4rem;line-height:1;flex-shrink:0;}
  .faq-item[open] summary::after{content:"\2013";}
  .faq-item p{margin:0;padding:0 26px 24px;color:var(--muted);font-size:.96rem;}

  /* Service areas */
  .areas{background:var(--cream);padding:100px 24px;}
  .areas .head{text-align:center;max-width:720px;margin:0 auto 46px;}
  .areas h2{color:var(--navy);font-size:clamp(1.8rem,3.4vw,2.5rem);}
  .areas .head p{color:var(--muted);}
  .area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1180px;margin:0 auto 34px;}
  .area-col{background:#fff;border:1px solid var(--blue-pale);border-radius:16px;padding:28px 24px;}
  .area-col h3{font-size:1.02rem;color:var(--navy);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #f0e7d5;}
  .area-col ul{list-style:none;padding:0;margin:0;}
  .area-col li{font-size:.9rem;color:var(--muted);margin-bottom:9px;display:flex;gap:9px;align-items:baseline;}
  .area-col li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0;}
  .area-copy{max-width:1180px;margin:0 auto 30px;display:grid;grid-template-columns:1fr 1fr;gap:14px 44px;}
  .area-copy p{font-size:.95rem;color:var(--muted);margin:0;}
  .area-copy strong{color:var(--navy);font-weight:700;}
  @media (max-width:860px){.area-copy{grid-template-columns:1fr;}}
  .area-note{max-width:1180px;margin:0 auto;text-align:center;font-size:.95rem;color:var(--muted);}
  @media (max-width:1000px){.area-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.area-grid{grid-template-columns:1fr;}}

  /* Showroom banner */
  .showroom{padding:90px 24px;background:var(--navy);color:#fff;text-align:center;}
  /* The design center section runs over a photograph of the actual showroom,
     with a navy scrim heavy enough to keep the type readable over it. */
  .showroom-photo{position:relative;background-image:var(--showroom-image);
    background-size:cover;background-position:center;}
  .showroom-photo::before{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(13,27,42,.9),rgba(13,27,42,.82));}
  .showroom-photo > *{position:relative;z-index:1;}
  .showroom .wrap{max-width:760px;}
  .showroom h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.5rem);}
  .showroom p{color:#dbe0ea;font-size:1.05rem;margin-bottom:30px;}
  .showroom .cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

  /* Final CTA */
  .final-cta{padding:90px 24px;text-align:center;background:var(--cream-2);}
  .final-cta h2{color:var(--navy);font-size:clamp(1.9rem,3.8vw,2.7rem);max-width:640px;margin:0 auto 16px;}
  .final-cta p{color:var(--muted);max-width:520px;margin:0 auto 30px;}
  /* This section is light, so the outline button needs the navy treatment
     rather than the white-on-photo one the hero uses. */
  .final-cta .btn-outline{background:transparent;color:var(--navy);border-color:var(--navy);}
  .final-cta .btn-outline:hover{background:var(--navy);color:#fff;}

  footer{background:var(--navy);color:#c7cede;padding:60px 24px 30px;}
  .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;max-width:1180px;margin:0 auto;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1);}
  .footer-grid h4{color:#fff;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;}
  .footer-grid ul{list-style:none;padding:0;margin:0;}
  .footer-grid li{margin-bottom:10px;font-size:.9rem;}
  .footer-grid a:hover{color:#fff;}
  /* Social icons sit under the footer blurb, in the brand column. */
  .social-links{list-style:none;display:flex;gap:10px;padding:0;margin:16px 0 0;}
  .social-links a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
    border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#c7cede;
    transition:background .18s ease,color .18s ease,border-color .18s ease;}
  .social-links a:hover{background:var(--orange);border-color:var(--orange);color:#fff;}
  .social-links svg{width:18px;height:18px;}
  .footer-bottom{max-width:1180px;margin:24px auto 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;color:#8b93a9;}
  @media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}

  /* ---------------------------------------------------------------
     Per-site additions
     Each site is standalone: its nav is on-page anchors only, and it
     never links to the other sites.
     --------------------------------------------------------------- */

  /* Category pages have no photography of their own yet, so their heroes
     use the brand gradient instead of a background image. Drop a photo in
     assets/ and add a per-page background rule to switch one over. */
  .hero-plain{background:var(--navy);}
  .hero-fire{background:radial-gradient(90% 90% at 15% 105%,var(--orange) 0%,#8a3f14 28%,#2a1b12 62%,var(--navy) 100%);}
  .hero-kitchen{background:radial-gradient(95% 95% at 85% -10%,var(--blue) 0%,var(--navy-2) 32%,#0f2c46 66%,var(--navy) 100%);}
  .hero-oven{background:radial-gradient(85% 95% at 78% 10%,var(--orange) 0%,#8a4a1a 26%,#38261a 62%,var(--navy) 100%);}

  /* The theme rules above use the `background` shorthand, which resets the
     image .hero-photo set earlier in the cascade — so a page that does carry a
     photograph has to restate it here, after them. The theme gradient stays
     underneath as the colour shown while the image loads. */
  .hero-photo{
    background-image:var(--hero-image);
    background-color:var(--navy);
    background-size:cover;
    background-position:center 60%;
    background-repeat:no-repeat;
  }

  /* The heavy scrim exists to keep white type legible over a photograph. On a
     gradient hero it only muddies the colour, so soften it and drop the
     bottom fade unless the hero actually carries an image. */
  .hero:not(.hero-photo)::before{
    background:linear-gradient(100deg, rgba(10,16,26,.55) 0%, rgba(10,16,26,.28) 38%, transparent 70%);}
  .hero:not(.hero-photo)::after{display:none;}

  /* Wider service-area block for the three-county pages. */
  .area-grid.area-grid-wide{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
  .area-county{margin:0 0 6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;}