/* BellaFina Outdoors design system.
   Navy on cream, a single orange accent, gold eyebrows, 10px radius.
   Cormorant Garamond for h1/h2, Montserrat for sub-headings and UI,
   Roboto for body copy. Every colour, radius and font comes from a token
   below — nothing in this file or in a page should carry a raw hex. */
  :root{
    /* Brand */
    --navy:#0d1b2a;
    --navy-2:#14283c;
    --navy-deep:#081320;
    --orange:#e5672a;
    --gold:#c8a25b;
    --gold-light:#dcbc84;
    --cream:#fdf5ec;
    --cream-2:#f6e9d8;
    --blue:#3d7da8;
    --blue-pale:#b8d0e3;
    --orange-dark:#c9531c;

    /* Surfaces, type, lines */
    --white:#ffffff;
    --ink:#15202b;
    --muted:#55606b;
    --border:#e9dcc7;
    --border-soft:#f2e8d9;

    /* Derived — keeps the accent to one hue */
    --orange-deep:color-mix(in srgb, var(--orange) 82%, var(--navy));
    --on-navy:color-mix(in srgb, var(--cream) 86%, var(--navy));

    /* Shape */
    --radius:10px;
    --shadow-sm:0 1px 3px color-mix(in srgb, var(--navy) 8%, transparent);
    --shadow-md:0 18px 38px -16px color-mix(in srgb, var(--navy) 26%, transparent);
    --shadow-lg:0 30px 60px -22px color-mix(in srgb, var(--navy) 45%, transparent);

    /* Type */
    --font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-ui:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-body:'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--cream);line-height:1.65;}
  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(--font-display);font-weight:600;margin:0 0 16px;line-height:1.12;letter-spacing:-.005em;}
  h3,h4{font-family:var(--font-ui);font-weight:600;margin:0 0 14px;line-height:1.25;}
  .eyebrow{font-family:var(--font-ui);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:var(--gold);font-weight:600;}

  /* Buttons. .btn-primary is reserved for the one primary CTA — the quote
     modal. Outbound links use the quieter variants. */
  .btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:6px;
    font-family:var(--font-ui);font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    border:1px solid transparent;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease;}
  .btn-primary{background:var(--orange);color:var(--white);}
  .btn-primary:hover{background:var(--orange-deep);}
  .btn-outline{background:transparent;border-color:color-mix(in srgb, var(--cream) 55%, transparent);color:var(--white);}
  .btn-outline:hover{background:color-mix(in srgb, var(--cream) 14%, transparent);}
  .btn-navy{background:transparent;color:var(--navy);border-color:var(--navy);}
  .btn-navy:hover{background:var(--navy);color:var(--white);}
  .btn-arrow{display:inline-block;transition:transform .15s ease;}
  .btn:hover .btn-arrow{transform:translateX(3px);}
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}

  /* Header */
  header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--blue-pale);}
  .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:var(--white);border-radius:var(--radius);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(--font-ui);font-size:.88rem;color:var(--navy);font-weight:500;white-space:nowrap;}
  nav.links a:hover{color:var(--orange);}
  .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-primary:hover{background:var(--orange-dark);}
  .header-ctas .btn-ghost{background:var(--navy);color:var(--white);}
  .header-ctas .btn-ghost:hover{background:var(--navy-2);}
  @media (max-width:1100px){ nav.links{display:none;} }

  /* Hero. The base hero is a flat dark ground; a page with its own photograph
     adds .hero-photo and points --hero-image at the file in its own assets/
     dir. 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:120px 24px 104px;overflow:hidden;background:var(--navy-deep);}
  .hero-photo{background-image:var(--hero-image);background-size:cover;background-position:center 60%;}
  .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
    linear-gradient(100deg, color-mix(in srgb, var(--navy-deep) 72%, transparent) 0%,
                             color-mix(in srgb, var(--navy-deep) 50%, transparent) 32%,
                             transparent 72%);}
  .hero-ring{position:absolute;z-index:2;width:640px;height:640px;border:1px solid color-mix(in srgb, var(--gold) 20%, transparent);border-radius:50%;top:-260px;right:-160px;pointer-events:none;}
  .hero-ring::before{content:"";position:absolute;inset:60px;border:1px solid color-mix(in srgb, var(--gold) 13%, transparent);border-radius:50%;}
  .hero-grid{position:relative;z-index:3;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr .8fr;gap:56px;align-items:center;}
  .hero-inner{max-width:660px;}
  .hero .eyebrow{color:var(--gold-light);font-size:.8rem;}
  .hero h1{color:var(--white);font-size:clamp(2.3rem,4.2vw,3.4rem);margin-top:16px;}
  .hero p.sub{color:var(--on-navy);font-size:1.12rem;max-width:560px;margin:0 0 30px;}
  .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;}
  .hero-points{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:9px;}
  .hero-points li{position:relative;padding-left:22px;font-size:.94rem;color:var(--on-navy);}
  .hero-points li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--orange);}

  /* Lead capture card */
  .lead-card{position:relative;justify-self:end;width:100%;max-width:440px;background:var(--white);
    border-radius:var(--radius);padding:32px 30px;box-shadow:var(--shadow-lg);}
  .lead-card h3{font-family:var(--font-display);font-weight:600;font-size:1.5rem;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-family:var(--font-ui);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin-bottom:6px;}
  .lead-field{margin-bottom:15px;}
  .lead-card input,
  .lead-card select{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);
    font-size:.94rem;font-family:var(--font-body);background:var(--cream);color:var(--ink);}
  .lead-card input:focus,
  .lead-card select:focus{outline:2px solid var(--orange);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(--font-display);font-weight:600;font-size:1.3rem;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:var(--orange-deep);background:color-mix(in srgb, var(--orange) 10%, var(--white));
    border:1px solid color-mix(in srgb, var(--orange) 35%, var(--white));border-radius:var(--radius);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:var(--radius);display:block;background:var(--white);}

  /* 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:color-mix(in srgb, var(--navy-deep) 75%, transparent);}
  .modal-card{position:relative;background:var(--white);border-radius:var(--radius);width:100%;max-width:520px;max-height:90vh;
    overflow:auto;padding:30px 28px 24px;box-shadow:var(--shadow-lg);}
  .modal-card h3{font-family:var(--font-display);font-weight:600;font-size:1.5rem;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:var(--radius);border:1px solid var(--border);
    background:var(--cream);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(--cream);border-radius:var(--radius);}
  .modal-embed-wrap.is-loaded .modal-loading{display:none;}
  body.modal-open{overflow:hidden;}
  @media (max-width:980px){
    .hero{padding:80px 24px 72px;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-inner{max-width:100%;}
    .lead-card{justify-self:start;max-width:520px;}
  }

  /* Trust strip */
  .trust-strip{background:var(--navy);padding:15px 24px;}
  .trust-strip .wrap{display:flex;gap:12px 34px;justify-content:center;flex-wrap:wrap;font-family:var(--font-ui);
    font-size:.76rem;letter-spacing:.08em;color:var(--on-navy);text-transform:uppercase;font-weight:600;}
  .trust-strip span{display:flex;align-items:center;gap:8px;}
  .trust-strip svg{width:14px;height:14px;color:var(--orange);}

  /* Section scaffolding */
  .section{padding:92px 24px;}
  .section-cream{background:var(--cream);}
  .section-white{background:var(--white);}
  .section-tint{background:var(--cream-2);}
  .section-navy{background:var(--navy);color:var(--on-navy);}
  .section-navy h2,.section-navy h3{color:var(--white);}
  .section-navy .eyebrow{color:var(--gold-light);}
  .head{text-align:center;max-width:720px;margin:0 auto 48px;}
  .head h2{color:var(--navy);font-size:clamp(1.9rem,3.6vw,2.7rem);}
  .head p{color:var(--muted);margin:0;}
  .section-navy .head h2{color:var(--white);}
  .section-navy .head p{color:var(--on-navy);}

  /* Design centre band: a centred head over four icon cards, the partner
     strip, then the section's own CTA row — the same component the sibling
     BellaFina pages use, so the bands read as one system. */
  .design-center .head{text-align:center;max-width:760px;margin:0 auto 46px;}
  .design-center h2{font-size:clamp(1.9rem,3.4vw,2.5rem);}
  .design-center .head p{color:var(--muted);margin:14px 0 0;}
  .dc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1220px;margin:0 auto;}
  .dc-card{background:var(--white);border:1px solid var(--border);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;}
  /* .cta-row is only given a layout inside the hero and showroom on this
     page, so a button row anywhere else has to declare its own. */
  .dc-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:36px;}

  /* Partner logos. Each mark is a different shape and weight, so they are
     capped by height and knocked back to one tone — that keeps the strip
     reading as a band rather than five competing brands. This page carries
     five marks, so the row runs five-up on desktop with no orphan. */
  .brand-strip{max-width:1100px;margin:52px auto 0;padding-top:34px;border-top:1px solid var(--border);}
  .brand-strip-label{text-align:center;margin:0 0 22px;font-family:var(--font-ui);
    font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;}
  .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;}

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

  @media (max-width:1040px){ .dc-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:820px){ .brand-logos{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:620px){ .dc-grid{grid-template-columns:1fr;} }
  @media (max-width:560px){
    .brand-logos{grid-template-columns:repeat(2,1fr);gap:24px 20px;}
    .brand-logos li{height:44px;}
  }

  /* Lede / intro prose */
  .lede .wrap{max-width:900px;}
  .lede .eyebrow{display:block;text-align:center;margin-bottom:10px;}
  .lede h2{color:var(--navy);font-size:clamp(1.9rem,3.6vw,2.6rem);text-align:center;margin-bottom:32px;}
  .lede p{font-size:1.04rem;color:var(--muted);margin:0 0 20px;}
  .lede p.first::first-letter{font-family:var(--font-display);font-size:3.2rem;line-height:.9;float:left;padding:6px 12px 0 0;color:var(--orange);}
  .lede .pull{border-left:3px solid var(--gold);padding:6px 0 6px 22px;margin:30px 0;font-family:var(--font-display);
    font-size:1.35rem;line-height:1.4;color:var(--navy);}

  /* How it works */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1180px;margin:0 auto;}
  .step-card{background:var(--white);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius);padding:32px 26px;}
  .step-card .num{font-family:var(--font-display);font-size:2.2rem;font-weight:600;color:var(--orange);display:block;line-height:1;margin-bottom:12px;}
  .step-card h3{font-size:1.08rem;color:var(--navy);margin-bottom:10px;}
  .step-card p{font-size:.94rem;color:var(--muted);margin:0;}
  @media (max-width:820px){.steps{grid-template-columns:1fr;}}

  /* Product splits */
  .split{padding:92px 24px;}
  .split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  .split.reverse .wrap{direction:rtl;}
  .split.reverse .wrap > *{direction:ltr;}
  .split h2{font-size:clamp(1.9rem,3.4vw,2.5rem);color:var(--navy);}
  .split p{color:var(--muted);margin-bottom:16px;font-size:1.01rem;}
  .split ul{margin:0 0 22px;padding-left:20px;color:var(--muted);font-size:.98rem;}
  .split li{margin-bottom:8px;}
  .visual{border-radius:var(--radius);aspect-ratio:4/3;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
  .visual svg{width:38%;height:38%;color:color-mix(in srgb, var(--cream) 85%, transparent);}
  .visual-fire{background:linear-gradient(160deg, var(--orange), var(--orange-deep) 55%, var(--navy));}
  .visual-water{background:linear-gradient(160deg, var(--navy-2), var(--navy) 60%, var(--navy-deep));}
  /* Section photos fill the 4:3 slot edge to edge. */
  .visual-photo{background:var(--navy);}
  .visual-photo img{display:block;width:100%;height:100%;object-fit:cover;}
  @media (max-width:880px){ .split .wrap{grid-template-columns:1fr;} .split.reverse .wrap{direction:ltr;} }

  /* Product grid */
  .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1180px;margin:0 auto;}
  .cat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:30px 24px;box-shadow:var(--shadow-sm);
    transition:border-color .18s ease, box-shadow .18s ease;display:flex;flex-direction:column;}
  .cat-card:hover{border-color:var(--gold);box-shadow:var(--shadow-md);}
  .cat-card .icon{width:42px;height:42px;border-radius:var(--radius);background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .cat-card .icon svg{width:21px;height:21px;color:var(--gold-light);}
  .cat-card h3{font-size:1.02rem;margin-bottom:8px;color:var(--navy);}
  .cat-card p{font-size:.88rem;color:var(--muted);margin:0 0 16px;}
  .cat-card .link{font-family:var(--font-ui);font-size:.8rem;font-weight:700;color:var(--orange);margin-top:auto;}
  .cat-card .link:hover{color:var(--orange-deep);}
  .cat-card.is-navy{background:var(--navy);border-color:var(--navy);}
  .cat-card.is-navy h3{color:var(--white);}
  .cat-card.is-navy p{color:var(--on-navy);}
  .cat-card.is-navy .link{color:var(--gold-light);}
  @media (max-width:1000px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.cat-grid{grid-template-columns:1fr;}}

  /* Why BellaFina */
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1180px;margin:0 auto;}
  .why-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:30px 26px;}
  .why-card h3{font-size:1.02rem;color:var(--navy);margin-bottom:8px;}
  .why-card p{font-size:.93rem;color:var(--muted);margin:0;}
  .why-card .num{font-family:var(--font-ui);font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--gold);display:block;margin-bottom:12px;}
  @media (max-width:900px){.why-grid{grid-template-columns:1fr;}}

  /* Trade band */
  .trade .wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
  .trade h2{font-size:clamp(1.9rem,3.4vw,2.5rem);}
  .trade p{margin:0 0 22px;}
  .trade ul{list-style:none;padding:0;margin:0 0 26px;}
  .trade li{position:relative;padding-left:24px;margin-bottom:12px;font-size:.95rem;color:var(--on-navy);}
  .trade li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--orange);}
  @media (max-width:900px){.trade .wrap{grid-template-columns:1fr;}}

  /* Spec table */
  .spec-table{max-width:1000px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
  .spec-row{display:grid;grid-template-columns:240px 1fr;border-bottom:1px solid var(--border-soft);}
  .spec-row:last-child{border-bottom:none;}
  .spec-row dt{padding:20px 26px;font-family:var(--font-ui);font-weight:600;color:var(--navy);background:var(--cream);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;}}

  /* FAQ */
  .faq-list{max-width:860px;margin:0 auto;}
  .faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;background:var(--cream);overflow:hidden;}
  .faq-item summary{cursor:pointer;list-style:none;padding:20px 24px;font-family:var(--font-ui);font-weight:600;color:var(--navy);
    font-size:.98rem;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);font-size:1.4rem;line-height:1;flex-shrink:0;}
  .faq-item[open] summary::after{content:"\2013";}
  .faq-item p{margin:0;padding:0 24px 22px;color:var(--muted);font-size:.95rem;}

  /* Service areas */
  .area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1180px;margin:0 auto 32px;}
  .area-grid.area-grid-wide{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
  .area-col{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px;}
  .area-col h3{font-size:.98rem;color:var(--navy);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border-soft);}
  .area-col ul{list-style:none;padding:0;margin:0;}
  .area-col li{font-size:.89rem;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-county{font-family:var(--font-ui);margin:0 0 6px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;}
  .area-copy{max-width:1180px;margin:0 auto 28px;display:grid;grid-template-columns:1fr 1fr;gap:14px 44px;}
  .area-copy p{font-size:.94rem;color:var(--muted);margin:0;}
  .area-copy strong{color:var(--navy);}
  .area-note{max-width:1180px;margin:0 auto;text-align:center;font-size:.94rem;color:var(--muted);}
  @media (max-width:900px){.area-copy{grid-template-columns:1fr;}}
  @media (max-width:1000px){.area-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.area-grid{grid-template-columns:1fr;}}

  /* Showroom band */
  .showroom{padding:86px 24px;background:var(--navy-2);color:var(--on-navy);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(20,40,60,.9),rgba(20,40,60,.82));}
  .showroom-photo > *{position:relative;z-index:1;}
  .showroom .wrap{max-width:760px;}
  .showroom .eyebrow{color:var(--gold-light);}
  .showroom h2{color:var(--white);font-size:clamp(1.9rem,3.4vw,2.5rem);}
  .showroom p{font-size:1.03rem;margin-bottom:28px;}
  .showroom .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
  .showroom-facts{display:flex;gap:12px 36px;justify-content:center;flex-wrap:wrap;margin-top:28px;
    font-family:var(--font-ui);font-size:.82rem;letter-spacing:.04em;}

  /* Final CTA */
  .final-cta{padding:86px 24px;text-align:center;background:var(--cream-2);}
  .final-cta h2{color:var(--navy);font-size:clamp(2rem,3.8vw,2.8rem);max-width:660px;margin:0 auto 16px;}
  .final-cta p{color:var(--muted);max-width:540px;margin:0 auto 28px;}
  .final-cta .cta-note{font-size:.82rem;margin-top:18px;margin-bottom:0;}

  /* Footer */
  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:var(--white);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:var(--white);}
  .footer-about{font-size:.88rem;color:#9aa2b6;max-width:280px;margin:14px 0 0;}
  .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;}}

  /* Page heroes without photography of their own use the brand ground. */
  .hero-plain{background:var(--navy-deep);}
  .hero-oven{background:radial-gradient(85% 95% at 78% 8%, var(--orange-deep) 0%,
    color-mix(in srgb, var(--orange) 30%, var(--navy)) 26%, var(--navy) 62%, var(--navy-deep) 100%);}
  /* The heavy scrim exists to keep white type legible over a photograph. On a
     gradient hero it only muddies the colour, so soften it. */
  .hero:not(.hero-photo)::before{background:linear-gradient(100deg,
    color-mix(in srgb, var(--navy-deep) 55%, transparent) 0%,
    color-mix(in srgb, var(--navy-deep) 26%, transparent) 38%, transparent 70%);}

  /* The header is sticky, so anchored sections need room above them. */
  section[id],div[id]{scroll-margin-top:88px;}

  /* Header CTA keeps its full label where there is room and shortens on small
     screens, so the sticky bar stays one line high. */
  .cta-short{display:none;}
  @media (max-width:1120px){ .cta-long{display:none;} .cta-short{display:inline;} }

  /* Social links in the footer's brand column: circular icon-only buttons. */
  .footer-social{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px;}
  .footer-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
    border-radius:50%;color:#c7cede;background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);transition:background .2s,color .2s;}
  .footer-social a:hover{color:var(--white);background:rgba(255,255,255,.2);}