/* ==========================================================================
   JB COUNTERTOPS, LLC — site stylesheet
   Palette, type scale and section rhythm extracted from the original Duda build.
   ========================================================================== */

:root {
  --orange:        #f37a1f;   /* rgba(243,122,31,1)  - CTA band + buttons */
  --orange-dark:   #d9660f;
  --slate:         #494f55;   /* rgba(73,79,85,1)    - dark band          */
  --cream:         #edeade;   /* rgba(237,234,222,1) - warm section bg    */
  --cream-soft:    #f6f4ee;
  --platinum:      #e5e4e2;   /* rgba(229,228,226,1) - cool section bg    */
  --platinum-soft: #f2f2f1;

  --heading:       #3a3a3a;   /* rgb(58,58,58)                           */
  --body:          #666666;
  --link:          #364957;   /* rgba(54,73,87,1)                        */
  --white:         #ffffff;

  --font-head: "Kumbh Sans", "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, sans-serif;

  --h1: 50px;
  --h2: 30px;
  --h3: 24px;
  --h4: 18px;

  --container: 1180px;
  --section-y: 120px;
  --radius: 2px;
  --shadow: 0 3px 11px rgba(0, 0, 0, 0.25);
  --transition: 0.25s ease;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--heading);
  font-weight: 700;
  margin: 0 0 0.6em;
  line-height: 1.25;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }

p { margin: 0 0 1.4em; }
a { color: var(--link); text-decoration: underline; }
a:hover { color: var(--orange); }
img { max-width: 100%; height: auto; display: block; }

.skip-link { position: absolute; left: -9999px; background: var(--orange); color: #fff; padding: 12px 20px; z-index: 999; text-decoration: none; }
.skip-link:focus { left: 12px; top: 12px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------- layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 40px; }
.section { padding: var(--section-y) 0; }
.center { text-align: center; }
.section-title { text-align: center; margin-bottom: 56px; }
.bg-cream { background: var(--cream-soft); }
.bg-platinum { background: var(--platinum-soft); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 16px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none;
  padding: 15px 38px;
  border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn-primary { background: var(--orange); border-color: var(--orange); color: var(--white); }
.btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: var(--white); transform: translateY(-2px); }
.btn-on-orange { background: var(--white); border-color: var(--white); color: var(--orange); }
.btn-on-orange:hover { background: transparent; color: var(--white); transform: translateY(-2px); }
.btn-lg { font-size: 18px; padding: 18px 46px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--white); box-shadow: 0 1px 6px rgba(0,0,0,0.09); }
/* wider than the content container so the nav never crowds the CTA */
.header-inner {
  max-width: 1400px; display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 2.6vw, 40px); padding: 11.5px clamp(24px, 3.6vw, 50px);
}
.logo { display: block; flex: 0 0 auto; }
.logo img { height: clamp(50px, 4.6vw, 66px); width: auto; }

.primary-nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 44px); }
.primary-nav ul {
  display: flex; align-items: center; gap: clamp(15px, 1.9vw, 30px);
  list-style: none; margin: 0; padding: 0;
}
.primary-nav a {
  font-family: var(--font-body); font-size: clamp(13.5px, 1.05vw, 15px); font-weight: 500;
  color: var(--heading); text-decoration: none; letter-spacing: 0.02em;
  padding: 6px 0; position: relative; white-space: nowrap;
}
.primary-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--orange); transition: width var(--transition); }
.primary-nav a:hover::after, .primary-nav a.is-active::after { width: 100%; }
.primary-nav a:hover, .primary-nav a.is-active { color: var(--orange); }
.nav-cta {
  padding: clamp(9px, 1vw, 12px) clamp(15px, 1.9vw, 26px);
  font-size: clamp(12.5px, 1vw, 14px); white-space: nowrap;
}

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; width: 26px; background: var(--heading); transition: transform var(--transition), opacity var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO (home)
   ========================================================================== */
.hero {
  position: relative; min-height: 82vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: #000 url("assets/hero.jpg") center 30% / cover no-repeat;
  box-shadow: var(--shadow);
}
.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); }
.hero-content { position: relative; z-index: 1; padding: 120px 40px; }
.hero h1 { color: var(--white); font-size: clamp(34px, 6vw, 62px); letter-spacing: 0.02em; margin-bottom: 18px; text-shadow: 0 2px 14px rgba(0,0,0,0.45); }
.hero-sub { color: var(--white); font-size: clamp(16px, 2.2vw, 26px); font-weight: 600; letter-spacing: 0.16em; margin-bottom: 30px; text-shadow: 0 2px 10px rgba(0,0,0,0.45); }
.hero-lead { color: var(--white); font-size: clamp(16px, 2vw, 21px); margin-bottom: 36px; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }

/* ==========================================================================
   PAGE BANNER (inner pages)
   ========================================================================== */
.page-banner {
  position: relative;
  background: var(--slate) center / cover no-repeat;
  padding: 88px 0;
  text-align: center;
}
.page-banner::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.page-banner .container { position: relative; z-index: 1; }
.page-banner h1 { color: var(--white); margin: 0; font-size: clamp(30px, 5vw, 50px); text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.page-banner p { color: rgba(255,255,255,0.9); margin: 14px auto 0; max-width: 760px; }

/* the banner already supplies generous padding — don't stack a full section on top */
.page-banner + .section { padding-top: 72px; }

/* ==========================================================================
   SPLIT CONTENT
   ========================================================================== */
.split { padding: var(--section-y) 0; }
.split-cream { background: var(--cream-soft); }
.split-platinum { background: var(--platinum-soft); }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-reverse .split-text { order: 2; }
.split-reverse .split-media { order: 1; }
.split-text h2 { margin-bottom: 24px; }
.split-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 4 / 3; }

/* ==========================================================================
   GALLERY (home teaser)
   ========================================================================== */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 56px; }
.gallery-grid figure { margin: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.gallery-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 0.45s ease; }
.gallery-grid figure:hover img { transform: scale(1.06); }

/* ==========================================================================
   CARD GRIDS
   ========================================================================== */
.spec-section { background: var(--platinum-soft); }
.materials-section { background: var(--cream-soft); }

.card-grid { display: grid; gap: 30px; margin-bottom: 56px; }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }

.card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.12); text-align: center; transition: transform var(--transition), box-shadow var(--transition); }
.card:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card h4 { margin: 0; padding: 22px 16px; font-size: var(--h4); letter-spacing: 0.03em; }

/* ==========================================================================
   WHY US
   ========================================================================== */
.why-section { background: var(--slate); }
.why-section .section-title { color: var(--white); }
.stats { display: flex; justify-content: center; gap: 100px; flex-wrap: wrap; margin-bottom: 56px; }
.stat { text-align: center; }
.stat-number { display: block; font-family: var(--font-head); font-size: var(--h1); font-weight: 700; line-height: 1.1; color: var(--orange); }
.stat h4 { color: var(--white); font-weight: 500; margin: 8px 0 0; }
.trust-badges { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; margin-top: 64px; }
.trust-badges img { height: 84px; width: auto; background: var(--white); padding: 10px 16px; border-radius: var(--radius); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials-section { background: var(--cream); }
.testimonials-section .card-grid { margin-bottom: 0; }
.testimonial { position: relative; margin: 0; background: var(--white); border-radius: var(--radius); padding: 56px 34px 34px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.quote-mark { position: absolute; top: 6px; left: 26px; font-family: Georgia, serif; font-size: 84px; line-height: 1; color: var(--orange); opacity: 0.55; }
.testimonial p { font-size: 15px; line-height: 1.8; margin-bottom: 22px; }
.testimonial footer { border-top: 1px solid var(--platinum); padding-top: 16px; }
.testimonial h4 { margin: 0; }
.testimonial-company { display: block; font-size: 13px; color: var(--body); margin-top: 2px; }

/* ==========================================================================
   SERVICES PAGE
   ========================================================================== */
.service-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 64px 0; }
.service-row:nth-child(even) .service-media { order: 2; }
.service-row:nth-child(even) .service-text { order: 1; }
.service-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.service-text h3 { margin-bottom: 16px; }
.service-list { border-top: 1px solid var(--platinum); }
.service-list .service-row { border-bottom: 1px solid var(--platinum); }

/* ==========================================================================
   PROJECTS PAGE
   ========================================================================== */
.projects-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.projects-grid button {
  padding: 0; border: 0; margin: 0; background: none; cursor: pointer;
  overflow: hidden; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: block; width: 100%;
}
.projects-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.45s ease; }
.projects-grid button:hover img { transform: scale(1.07); }

/* lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; z-index: 500; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: var(--radius); }
.lightbox-caption { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: #fff; font-size: 14px; padding: 0 20px; }
.lightbox-btn {
  position: absolute; background: rgba(255,255,255,0.12); color: #fff; border: 0;
  width: 52px; height: 52px; font-size: 26px; line-height: 1; cursor: pointer;
  border-radius: 50%; transition: background var(--transition);
}
.lightbox-btn:hover { background: rgba(255,255,255,0.28); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-close { top: 20px; right: 20px; }

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.blog-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.12); display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); }
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.blog-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.blog-card-body { padding: 26px 24px 30px; display: flex; flex-direction: column; flex: 1; }
.blog-card h3 { font-size: 20px; margin-bottom: 10px; line-height: 1.35; }
.blog-card h3 a { color: var(--heading); text-decoration: none; }
.blog-card h3 a:hover { color: var(--orange); }
.blog-meta { font-size: 13px; color: #8b8b8b; margin-bottom: 14px; letter-spacing: 0.02em; }
.blog-excerpt { font-size: 15px; margin-bottom: 20px; flex: 1; }
.blog-more { font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--orange); text-decoration: none; }
.blog-more:hover { text-decoration: underline; }

/* single post */
.post { max-width: 820px; margin: 0 auto; padding: var(--section-y) 0; }
.post-hero img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 40px; }
.post h1 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 12px; }
.post .blog-meta { margin-bottom: 34px; }
.post h3 { font-size: 21px; margin-top: 38px; margin-bottom: 12px; }
.post ul { padding-left: 22px; margin: 0 0 1.4em; }
.post li { margin-bottom: 8px; }
.post-back { display: inline-block; margin-top: 44px; font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 0.05em; color: var(--orange); text-decoration: none; }
.post-back:hover { text-decoration: underline; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; }
.contact-form label { display: block; font-weight: 600; font-size: 14px; color: var(--heading); margin-bottom: 7px; letter-spacing: 0.02em; }
.contact-form .field { margin-bottom: 22px; }
.contact-form input, .contact-form textarea {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--heading);
  padding: 13px 15px; border: 1px solid #d3d3d1; border-radius: var(--radius);
  background: var(--white); transition: border-color var(--transition);
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--orange); outline: none; }
.contact-form textarea { min-height: 150px; resize: vertical; }
.form-note { font-size: 13px; color: #8b8b8b; margin-top: 16px; }

.contact-details { background: var(--cream-soft); padding: 34px 30px; border-radius: var(--radius); }
.contact-details h3 { margin-bottom: 18px; }
.contact-details dt { font-weight: 600; color: var(--heading); font-size: 14px; margin-top: 16px; }
.contact-details dd { margin: 3px 0 0; }
.contact-details dl { margin: 0; }

.map-embed { width: 100%; height: 420px; border: 0; display: block; filter: grayscale(0.15); }

/* ==========================================================================
   MATERIALS / STONE SLABS
   ========================================================================== */
.section-lead { text-align: center; max-width: 700px; margin: -34px auto 48px; font-size: 15px; }

.stone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.stone-card {
  position: relative;
  margin: 0;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  transition: transform var(--transition), box-shadow var(--transition);
}
.stone-card:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0,0,0,0.2); }

.stone-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

.stone-card figcaption {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 3px;
}
.stone-name {
  font-family: var(--font-head); font-weight: 700;
  color: var(--heading); font-size: 15px; line-height: 1.35;
}
.stone-type {
  font-size: 11px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--orange);
}

/* coming-soon slabs: image only, dimmed, with a ribbon */
.stone-card.is-soon img { filter: grayscale(0.35) brightness(0.92); }
.stone-card.is-soon:hover img { filter: none; }

.stone-badge {
  position: absolute; left: 0; bottom: 0; right: 0;
  background: rgba(73, 79, 85, 0.92); color: var(--white);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center;
  padding: 9px 6px;
}

/* ---------- areas we serve ---------- */
.areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.area-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 30px 36px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  border-top: 4px solid var(--orange);
  transition: transform var(--transition), box-shadow var(--transition);
}
.area-card:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.area-card h3 { margin-bottom: 12px; font-size: 21px; }
.area-card p { font-size: 15px; margin: 0; }

/* footer contact block */
.footer-locations {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 18px 56px; margin-bottom: 26px;
  font-size: 14px; line-height: 1.7;
}
.footer-locations div { max-width: 320px; }
.footer-locations strong {
  display: block; color: var(--white); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px;
  margin-bottom: 2px;
}
.footer-locations a { color: rgba(255,255,255,0.8); text-decoration: none; }
.footer-locations a:hover { color: var(--orange); }

/* ==========================================================================
   CTA BAND + FOOTER
   ========================================================================== */
.cta-section { background: var(--orange); padding: var(--section-y) 0; }
.cta-section h2 { color: var(--white); margin-bottom: 34px; font-size: clamp(24px, 3.4vw, 38px); }
.cta-phone { margin: 26px 0 0; }
.cta-phone a { color: var(--white); font-family: var(--font-head); font-size: 24px; font-weight: 700; text-decoration: none; letter-spacing: 0.04em; }
.cta-phone a:hover { text-decoration: underline; }

.site-footer { background: var(--slate); color: rgba(255,255,255,0.75); padding: 60px 0 40px; text-align: center; }
.footer-nav ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; list-style: none; margin: 0 0 26px; padding: 0; }
.footer-nav a { color: var(--white); text-decoration: none; font-size: 15px; font-weight: 500; }
.footer-nav a:hover { color: var(--orange); }

.social-links { display: flex; justify-content: center; gap: 16px; margin-bottom: 28px; }
.social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.12); color: var(--white); transition: background var(--transition); }
.social-links a:hover { background: var(--orange); }
.social-links svg { width: 18px; height: 18px; fill: currentColor; }

.footer-legal { margin: 0; font-size: 13px; letter-spacing: 0.02em; color: rgba(255,255,255,0.65); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --section-y: 84px; --h1: 40px; --h2: 27px; }
  .container { padding: 0 28px; }
  .header-inner { padding-left: 28px; padding-right: 28px; }
  .card-grid-4, .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .split-grid { gap: 44px; }
  .stats { gap: 64px; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .areas-grid { grid-template-columns: 1fr; }
  .stone-grid { grid-template-columns: repeat(3, 1fr); }
}

/* The bar carries all seven tabs plus the CTA down to 900px because the gaps,
   type and logo scale with the viewport (see the clamps above). Below 900px
   there is genuinely no room left, so switch to the drawer. */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); box-shadow: 0 12px 20px rgba(0,0,0,0.12);
    padding: 12px 28px 24px; display: none;
  }
  .primary-nav.is-open { display: flex; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav li { border-bottom: 1px solid var(--platinum); }
  .primary-nav a { display: block; padding: 14px 0; }
  .primary-nav a::after { display: none; }
  /* full-width in the drawer — stretching reads as deliberate, a shrink-wrapped
     button just looks stuck to the left edge */
  .nav-cta { margin-top: 18px; text-align: center; }
}

@media (max-width: 820px) {
  .split-grid, .service-row { grid-template-columns: 1fr; }
  .split-reverse .split-text, .service-row:nth-child(even) .service-text { order: 1; }
  .split-reverse .split-media, .service-row:nth-child(even) .service-media { order: 2; }

  .card-grid-3 { grid-template-columns: 1fr; }
  .hero { min-height: 70vh; }
}

@media (max-width: 520px) {
  :root { --section-y: 64px; }
  .container { padding: 0 20px; }
  .header-inner { padding-left: 20px; padding-right: 20px; }
  .logo img { height: 52px; }
  .card-grid-4, .gallery-grid, .blog-grid { grid-template-columns: 1fr; }
  .projects-grid, .stone-grid { grid-template-columns: repeat(2, 1fr); }
  .section-lead { margin-top: -24px; }
  .stats { gap: 40px; }
  .btn { width: 100%; text-align: center; }
  .trust-badges img { height: 66px; }
  .lightbox-btn { width: 42px; height: 42px; font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   VISUALIZER  (Design Your Kitchen)
   Two columns on desktop: the scene on the left, the controls on the right.
   ========================================================================== */
.viz-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.viz-canvas { position: sticky; top: 100px; }
.viz-summary { margin: 16px 0 0; font-size: 14px; color: var(--body); text-align: center; letter-spacing: 0.02em; }

/* --- the composite ------------------------------------------------------ */
/* isolate so the blend modes below only ever see the layers in this stack,
   never the page behind it. */
.vz-stage { position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; }
.vz-base { display: block; width: 100%; height: auto; }
.vz-l { position: absolute; inset: 0; background-position: center; background-size: cover; }

/* cabinets and walls: multiply a colour over the photo's white joinery, which
   keeps every door panel, shadow and handle instead of flattening them. */
.vz-tint { mix-blend-mode: multiply; }

/* repainted surfaces: opaque fill, with the room's own lighting laid back on
   top by the shade child. Each isolates so its overlay stays contained. */
.vz-paint { isolation: isolate; }
.vz-shade { position: absolute; inset: 0; display: block;
  background: url(assets/viz/kitchen-shade.png) center / 100% 100% no-repeat;
  mix-blend-mode: overlay; }

/* --- controls ----------------------------------------------------------- */
.viz-panel { background: var(--platinum-soft); padding: 28px 24px; border-radius: var(--radius); }
.viz-group { margin-bottom: 28px; }
.viz-group h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 14px; color: var(--heading); }
.viz-hint { font-size: 12.5px; color: var(--body); margin: 10px 0 0; line-height: 1.6; }

.viz-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.viz-sw { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: center; }
.viz-chip { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius);
  background-size: cover; background-position: center; border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16); transition: var(--transition); }
.viz-sw:hover .viz-chip { transform: translateY(-2px); }
.viz-sw.is-on .viz-chip { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.viz-label { display: block; margin-top: 5px; font-size: 10.5px; line-height: 1.3; color: var(--body); }

.viz-seg { display: flex; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: var(--radius); overflow: hidden; }
.viz-seg button { flex: 1; background: var(--white); border: 0; border-right: 1px solid rgba(0, 0, 0, 0.12);
  padding: 11px 6px; font: 600 12.5px var(--font-body); color: var(--body); cursor: pointer; transition: var(--transition); }
.viz-seg button:last-child { border-right: 0; }
.viz-seg button:hover { background: var(--cream-soft); }
.viz-seg button.is-on { background: var(--orange); color: var(--white); }

.viz-actions { display: grid; gap: 10px; margin-top: 4px; }
.viz-actions .btn { width: 100%; text-align: center; }
.btn-ghost { background: transparent; border-color: rgba(0, 0, 0, 0.3); color: var(--heading); }
.btn-ghost:hover { background: var(--heading); border-color: var(--heading); color: var(--white); }
.viz-disclaimer { font-size: 11.5px; color: var(--body); line-height: 1.6; margin: 16px 0 0; }

@media (max-width: 1080px) {
  .viz-wrap { grid-template-columns: 1fr; }
  .viz-canvas { position: static; }
  .viz-swatches { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 560px) {
  .viz-swatches { grid-template-columns: repeat(4, 1fr); }
  .viz-panel { padding: 22px 16px; }
}

/* Netlify Forms honeypot — never shown to humans */
.hp-field { position: absolute; left: -9999px; opacity: 0; }