/* ==========================================================================
   WHITE MATTE — Stone & Surface Catalog
   Design system matched to whitematte.com's live typography:
   Headings/body: Roboto | Sidebar nav: Poppins
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root{
  /* palette — matched to whitematte.com's live site */
  --stone-50:  #f7f5f2;
  --stone-100: #eeebe4;
  --stone-200: #ddd7cb;
  --stone-400: #a9a196;
  --stone-600: #6b6459;
  --ink:       #1b1b1b;
  --ink-soft:  #1a1a1b;
  --brass:     #c8143f;
  --brass-light:#e9204f;
  --nav-active:#ff6b87;
  --white:     #ffffff;

  --font-display: 'Roboto', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --font-mono: 'Roboto', sans-serif;
  --font-nav: 'Poppins', sans-serif;

  --container: 1240px;
  --radius: 2px;
  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:500; margin:0 0 .5em; line-height:1.15; letter-spacing:normal; }
h1{ font-size:50px; font-weight:700; }
h2{ font-size:36px; font-weight:700; }
h3{ font-size:28px; }
h4{ font-size:20px; }
h5{ font-size:16px; }
h6{ font-size:14px; }
p{ margin:0 0 1em; color:var(--stone-600); }
.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }

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

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:16px;
  font-weight:500;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--brass);
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--brass); display:inline-block; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600;
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  padding:15px 40px;
  border:1px solid var(--ink);
  border-radius:5px;
  color:var(--ink);
  background:transparent;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:var(--ink); color:var(--stone-50); }
.btn-solid{ background:var(--ink); color:var(--stone-50); }
.btn-solid:hover{ background:var(--brass); border-color:var(--brass); color:var(--ink); }
.btn-brass{ border-color:var(--brass); background:var(--brass); color:#fff; }
.btn-brass:hover{ background:var(--brass-light); border-color:var(--brass-light); color:#fff; }
.btn-ghost-light{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn-ghost-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
#preloader{
  position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.98);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.done{ opacity:0; visibility:hidden; }
.pre-mark{ position:relative; width:32px; height:50px; }
.pre-mark img{
  position:absolute; left:50%; top:-130px; transform:translateX(-50%);
  width:100px; height:auto; max-width:none;
}
.pre-mark .cube1, .pre-mark .cube2{
  width:10px; height:10px; background:var(--brass); position:absolute; top:0; left:0;
  animation:cubemove 1.8s ease-in-out infinite;
}
.pre-mark .cube2{ animation-delay:-.9s; }
@keyframes cubemove{
  25%{ transform:translateX(42px) rotate(-90deg) scale(.5); }
  50%{ transform:translateX(42px) translateY(42px) rotate(-179deg); }
  50.1%{ transform:translateX(42px) translateY(42px) rotate(-180deg); }
  75%{ transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5); }
  100%{ transform:rotate(-360deg); }
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(28,27,25,0);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .3s var(--ease);
  padding:26px 0;
}
.site-header.scrolled{
  background:rgba(28,27,25,.96);
  box-shadow:0 8px 30px rgba(0,0,0,.2);
  padding:14px 0;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); color:#fff; }
.brand-sidebar img{ width:190px; max-width:100%; height:auto; }
.brand-topbar img{ width:150px; max-width:100%; height:auto; }
.footer-logo{ width:220px; max-width:100%; height:auto; }
.brand-mark{ width:34px; height:34px; border:1px solid var(--brass); position:relative; flex-shrink:0; }
.brand-mark::before, .brand-mark::after{ content:''; position:absolute; background:var(--brass); }
.brand-mark::before{ inset:8px 8px 8px 8px; border:1px solid var(--brass-light); transform:rotate(45deg); background:none; }
.brand-name{ font-size:19px; letter-spacing:.06em; line-height:1; }
.brand-name b{ color:var(--brass-light); font-weight:500; }
.brand-sub{ display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.25em; color:var(--stone-400); margin-top:3px; }

.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav > ul{ display:flex; align-items:center; gap:2px; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a{
  display:block; padding:10px 14px; color:#eee9e0;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  white-space:nowrap;
  transition:color .25s;
}
.main-nav > ul > li:hover > a, .main-nav a.active{ color:var(--brass-light); }
.main-nav .dropdown{
  position:absolute; top:100%; left:0; min-width:220px;
  background:var(--ink-soft); border-top:2px solid var(--brass);
  padding:10px 0; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:all .25s var(--ease); box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.main-nav li:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.main-nav .dropdown a{ display:block; padding:10px 22px; font-size:13px; color:var(--stone-200); text-transform:none; letter-spacing:.02em; }
.main-nav .dropdown a:hover{ background:rgba(176,141,87,.12); color:var(--brass-light); padding-left:26px; }

/* ==========================================================================
   HERO — whitematte.com's hero animation rebuilt as separate layers so the
   kitchen photo stays SHARP. Their single MP4 bakes the blur, the birds and the
   lockup into the same pixels, so it cannot be shown without blurring the photo.
   See the block comment above <section class="hero-banner"> in
   resources/views/home.blade.php for the layer breakdown and measured timings.
   ========================================================================== */
.hero-banner{ position:relative; height:100vh; min-height:560px; max-height:900px; overflow:hidden; background:#000; }

/* Layer 1 — the sharp photo. No filter, no transform, no animation of any kind:
   this layer must never blur or move, which is the entire point of the rebuild. */
.hero-banner-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}

/* Layer 2 — birds. hero-birds.webm is padded to the photo's own 1280x614 aspect
   ratio, so cover-cropping it here lands the birds exactly where they sat in the
   original footage. Cropping a 1280x220 strip with `cover` instead would scale it
   ~2.8x wider than the photo and throw the birds off-frame entirely. */
.hero-birds{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:2; pointer-events:none;
}

/* Layers 3+4 — the lockup. Sized as one group so the wordmark/tagline proportions
   and their gap stay locked to the ratios measured off the original frames:
   tagline width = 86.8% of wordmark width, gap = 8.8% of it (both are percentages
   of THIS element's width, since a percentage margin resolves against the
   containing block's inline size). */
.hero-lockup{
  position:absolute; left:50%; top:47%; transform:translate(-50%,-50%);
  width:clamp(200px, 26vw, 420px);
  display:flex; flex-direction:column; align-items:center;
  z-index:3; pointer-events:none;
}
/* The original made this white lockup readable by dimming the whole photo behind it.
   With the photo left sharp and bright, a drop-shadow does the same job while touching
   only the lockup's own pixels — the alpha-aware shadow hugs the glyphs themselves, so
   there is no visible box and nothing is laid over the photo. */
.hero-wordmark, .hero-tagline{
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.45))
    drop-shadow(0 6px 22px rgba(0,0,0,.35));
}
.hero-wordmark{
  display:block; width:100%; height:auto;
  opacity:0; animation:hero-wordmark-in 12.2s linear infinite;
}
.hero-tagline{
  display:block; width:86.8%; height:auto; margin-top:8.8%;
  opacity:0; animation:hero-tagline-in 12.2s linear infinite;
}

/* 12.2s to match hero-birds.webm's own duration — a 12.033s loop (the source clip's
   length) would drift ~0.17s per cycle against the video and desync within a minute.
   Percentages are the measured timings converted against 12.2s. */
@keyframes hero-wordmark-in{
  0%,   17% { opacity:0; transform:translateX(7%) scale(.86); }
  30%,  74% { opacity:1; transform:translateX(0)   scale(1);  }
  80%, 100% { opacity:0; transform:translateX(0)   scale(1);  }
}
@keyframes hero-tagline-in{
  0%,   41% { opacity:0; }
  57%,  74% { opacity:1; }
  80%, 100% { opacity:0; }
}

/* Reduced motion: hold the finished lockup instead of cycling it. Pausing the bird
   video itself needs JS (the inline handler below the hero in home.blade.php). */
@media (prefers-reduced-motion: reduce){
  .hero-wordmark, .hero-tagline{ animation:none; opacity:1; transform:none; }
}

.hero-banner::before{
  content:''; position:absolute; top:0; left:0; right:0; height:140px; z-index:4;
  background:linear-gradient(180deg, rgba(0,0,0,.6), transparent); pointer-events:none;
}
@media (min-width:901px){ .hero-banner::before{ display:none; } }

/* Narrow screens crop the photo hard, so the lockup needs a bigger share of the
   width to stay legible against it. */
@media (max-width:640px){
  .hero-lockup{ width:min(64vw, 300px); }
}

.btn-divider{ display:inline-block; width:1px; height:14px; background:currentColor; opacity:.5; margin:0 2px; }

.catalog-mockups{ position:relative; height:340px; }
.catalog-mockup{
  position:absolute; top:0; width:56%; aspect-ratio:3/4; background:#fff; border-radius:4px;
  box-shadow:0 30px 60px rgba(0,0,0,.4); overflow:hidden;
}
.catalog-mockup:first-child{ left:2%; transform:rotate(-6deg); z-index:1; }
.catalog-mockup:last-child{ left:34%; top:24px; transform:rotate(6deg); z-index:2; }
.catalog-mockup .swatch{ width:100%; height:100%; background-size:cover; background-position:center; }
.catalog-mockup .catalog-star{
  position:absolute; top:14px; left:14px; width:30px; height:30px; border-radius:50%;
  background:var(--brass); color:#fff; display:grid; place-items:center; font-size:14px;
}
.catalog-mockup .catalog-vert{
  position:absolute; top:16px; right:10px; writing-mode:vertical-rl; font-family:var(--font-mono);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.catalog-mockup .catalog-brand{ position:absolute; bottom:14px; left:14px; color:#fff; font-family:var(--font-display); font-size:15px; text-shadow:0 1px 3px rgba(0,0,0,.6); }
@media (max-width:900px){ .catalog-mockups{ height:260px; } }

/* ---------- left sidebar nav (desktop) ---------- */
.site-sidebar{
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; width:260px; z-index:1000;
  background:var(--ink-soft); padding:44px 30px 30px; overflow-y:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.site-sidebar::-webkit-scrollbar{ display:none; width:0; height:0; }
.site-sidebar .brand{ margin-bottom:48px; }
.site-sidebar-nav{ display:flex; flex-direction:column; }
.site-sidebar-nav a, .site-sidebar-nav a:link, .site-sidebar-nav a:visited{
  padding:10px; color:#eee9e0; font-size:14px; letter-spacing:normal; font-family:var(--font-nav);
  text-transform:uppercase; font-weight:600; line-height:25px; transition:color .25s;
}
.site-sidebar-nav a:hover, .site-sidebar-nav a.active, .site-sidebar-nav a.active:visited{ color:var(--nav-active); }
.live-blink{ display:block; color:rgb(102,204,255); animation:navFlash 2.5s infinite; }
@keyframes navFlash{ 0%,50%,100%{ opacity:1; } 25%,75%{ opacity:0; } }
.site-sidebar-nav .nav-group{ border:0; }
.site-sidebar-nav .nav-group summary{
  padding:10px; color:#eee9e0; font-size:14px; letter-spacing:normal; font-family:var(--font-nav);
  text-transform:uppercase; font-weight:600; line-height:25px; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; transition:color .25s;
}
.site-sidebar-nav .nav-group summary::-webkit-details-marker{ display:none; }
.site-sidebar-nav .nav-group summary:hover, .site-sidebar-nav .nav-group summary.active{ color:var(--nav-active); }
.site-sidebar-nav .nav-submenu{ display:flex; flex-direction:column; padding:2px 0 10px 14px; }
.site-sidebar-nav .nav-submenu a{
  padding:10px 24px 10px 13px; font-size:12px; text-transform:uppercase; font-weight:600; font-family:var(--font-nav);
  letter-spacing:0; color:var(--stone-400);
}
.site-sidebar-nav .nav-submenu a:hover{ color:var(--nav-active); }
.site-sidebar-search{ display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.2); margin-top:26px; padding-bottom:10px; }
.site-sidebar-search input{ background:none; border:0; color:#eee; font-size:13px; flex:1; padding:6px 0; font-family:inherit; }
.site-sidebar-search input::placeholder{ color:var(--stone-400); }
.site-sidebar-search button{ background:none; border:0; color:#eee9e0; font-size:14px; }
.icon-search-btn{ display:flex; align-items:center; justify-content:center; padding:0; transition:color .25s; }
.icon-search-btn:hover{ color:var(--nav-active); }
.site-sidebar-cart{ margin-top:20px; }
.site-sidebar-cart a{ color:var(--nav-active); font-size:13px; letter-spacing:.04em; text-transform:uppercase; font-family:var(--font-nav); font-weight:600; }
.site-sidebar-social{ display:flex; gap:12px; margin-top:auto; padding-top:30px; }
.site-sidebar-social a{
  width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:grid; place-items:center; color:#eee9e0; font-size:13px; font-weight:600; transition:border-color .25s, color .25s;
}
.site-sidebar-social a:hover{ border-color:var(--brass); color:var(--brass-light); }
@media (max-width:900px){ .site-sidebar{ display:none; } }
@media (max-width:900px){ .site-header{ background:rgba(28,27,25,.96); } }
@media (min-width:901px){
  .site-header{ display:none; }
  .site-main{ margin-left:260px; }
  .hero{ padding-top:0; min-height:100vh; }
}

.header-actions{ display:flex; align-items:center; gap:14px; }
.icon-btn{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:50%; transition:border-color .25s, color .25s; }
.icon-btn:hover{ border-color:var(--brass); color:var(--brass-light); }
.burger{ display:none; flex-direction:column; gap:5px; width:30px; background:none; border:0; padding:8px; }
.burger span{ height:2px; background:#fff; display:block; transition:.3s; }

.search-panel{
  position:fixed; inset:0; background:rgba(28,27,25,.98); z-index:1250;
  display:flex; align-items:flex-start; justify-content:center;
  opacity:0; visibility:hidden; transition:.3s; overflow-y:auto; padding:100px 24px 60px;
}
.search-panel.open{ opacity:1; visibility:visible; }
.search-inner{ width:min(640px,90vw); }
.search-panel form{ border-bottom:1px solid var(--brass); display:flex; gap:16px; padding-bottom:14px; }
.search-panel input{ flex:1; background:none; border:0; color:#fff; font-family:var(--font-display); font-size:28px; }
.search-panel input::placeholder{ color:var(--stone-600); }
.search-panel button[type="submit"]{ background:none; border:0; color:var(--brass-light); font-size:20px; }
.search-close{ position:fixed; top:32px; right:40px; color:#fff; font-size:26px; background:none; border:0; z-index:1101; }
.search-results{ margin-top:24px; display:grid; gap:2px; }
.search-result{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 4px; border-bottom:1px solid rgba(255,255,255,.08); color:#eee; }
.search-result:hover{ background:rgba(176,141,87,.08); }
.search-result .sr-title{ font-family:var(--font-display); font-size:17px; color:#fff; }
.search-result .sr-meta{ font-family:var(--font-mono); font-size:11px; color:var(--stone-400); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
.search-result .sr-type{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--brass-light); border:1px solid var(--brass); padding:4px 10px; flex-shrink:0; }
.search-empty{ color:var(--stone-600); font-family:var(--font-mono); font-size:13px; margin-top:24px; }
.search-hint{ color:var(--stone-600); font-family:var(--font-mono); font-size:12px; margin-top:24px; letter-spacing:.04em; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  background:linear-gradient(155deg,#232019 0%, #1c1b19 55%, #171614 100%);
  overflow:hidden; padding-top:140px;
}
.hero::before{
  content:''; position:absolute; inset:0; opacity:.5;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(176,141,87,.18), transparent 45%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 26px);
}
.hero-vein{ position:absolute; inset:0; }
.hero-vein svg{ width:100%; height:100%; opacity:.35; }
.hero-inner{ position:relative; z-index:2; width:100%; padding-bottom:90px; }
.hero-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:end; }
.hero h1{ color:#fff; font-size:clamp(42px,6vw,76px); font-weight:400; }
.hero h1 em{ font-style:normal; color:var(--brass-light); }
.hero-lede{ color:var(--stone-200); font-size:17px; max-width:480px; margin-bottom:32px; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-specs{ font-family:var(--font-mono); color:var(--stone-400); font-size:12px; display:grid; gap:18px; border-left:1px solid rgba(255,255,255,.15); padding-left:24px; }
.hero-specs strong{ display:block; color:var(--brass-light); font-size:26px; font-family:var(--font-display); margin-bottom:2px; }
.scroll-cue{ position:absolute; right:32px; bottom:34px; writing-mode:vertical-rl; color:var(--stone-400); font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; display:flex; align-items:center; gap:14px; }
.scroll-cue::after{ content:''; width:1px; height:50px; background:linear-gradient(var(--brass), transparent); }

/* page hero (interior pages)
   NOTE: this used to be padding:200px 0 90px, which silently overrode the
   @media(min-width:901px) .page-hero{padding-top:70px} rule above (same
   selector, later in source order wins) — every interior page had 200px of
   dead space above the breadcrumb on desktop even though the sidebar layout
   never needed header clearance there. 110px/50px works for both the fixed
   mobile header (~90px tall) and the desktop sidebar (no overlap to clear). */
.page-hero{
  position:relative; padding:110px 0 50px; background:var(--ink);
  overflow:hidden;
}
.page-hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 80% 0%, rgba(176,141,87,.16), transparent 55%); }
.page-hero .container{ position:relative; z-index:1; }
.breadcrumb{ font-family:var(--font-mono); font-size:12px; color:var(--stone-400); letter-spacing:.08em; margin-bottom:18px; }
.breadcrumb a:hover{ color:var(--brass-light); }
.page-hero h1{ color:#fff; font-size:clamp(34px,5vw,56px); }
.page-hero p{ color:var(--stone-200); max-width:620px; }

.photo-hero{ position:relative; background-size:cover; background-position:center; padding:100px 0; }
.photo-hero-overlay{ position:absolute; inset:0; background:rgba(31,40,47,.9); }
.photo-hero-inner{ position:relative; z-index:1; text-align:center; }
.photo-hero h1{ color:#fff; font-size:36px; font-weight:700; font-family:var(--font-body); margin:0 0 10px; }
.photo-hero-breadcrumb{ color:#fff; font-size:18px; font-family:var(--font-body); margin-bottom:14px; }
.photo-hero-breadcrumb a{ color:#fff; }
.photo-hero-breadcrumb a:hover{ color:var(--brass-light); }
.photo-hero-sub{ color:#fff; font-size:20px; font-weight:500; font-family:var(--font-body); margin:14px 0 0; }
.photo-hero-inner .accent-bar, .gallery-hero-inner .accent-bar{ margin:14px auto; }
.about-intro{ padding-top:150px; }
@media (min-width:901px){ .about-intro{ padding-top:130px; } }

.photo-hero.light-overlay .photo-hero-overlay{ background:rgba(255,255,255,.9); }
.photo-hero.light-overlay h1{ color:#2b2b2b; }
.photo-hero.light-overlay .photo-hero-breadcrumb{ color:#2b2b2b; }
.photo-hero.light-overlay .photo-hero-breadcrumb a{ color:#2b2b2b; }
.photo-hero.light-overlay .photo-hero-sub{ color:#2b2b2b; }

.faq-hero{ position:relative; background:#fff; padding-top:130px; overflow:hidden; }
@media (min-width:901px){ .faq-hero{ padding-top:0; } }
.faq-hero-inner{ display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:340px; }
.faq-hero-text{ padding:60px 40px 60px 0; }
.faq-hero-text h1{ font-size:36px; font-weight:700; color:var(--ink-soft); margin:0 0 10px; }
.faq-hero-text .photo-hero-breadcrumb{ color:var(--ink-soft); font-size:18px; margin:0; }
.faq-hero-text .photo-hero-breadcrumb a{ color:var(--ink-soft); }
.faq-hero-text .photo-hero-breadcrumb a:hover{ color:var(--brass); }
.faq-hero-photo{ height:100%; min-height:340px; background-size:cover; background-position:center; }
.faq-feature-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--stone-200); }
.faq-feature-card{ text-align:center; padding:40px 20px; border-right:1px solid var(--stone-200); transition:box-shadow .3s var(--ease); }
.faq-feature-card:last-child{ border-right:0; }
.faq-feature-card:hover{ box-shadow:0 20px 40px rgba(28,27,25,.1); }
.faq-feature-card img{ height:70px; width:auto; margin:0 auto 18px; }
.faq-feature-card h3{ font-size:19px; margin-bottom:2px; }
.faq-feature-card p{ font-size:13px; color:var(--stone-400); margin:0; }
@media (max-width:700px){ .faq-feature-row{ grid-template-columns:1fr; } .faq-feature-card{ border-right:0; border-bottom:1px solid var(--stone-200); } .faq-feature-card:last-child{ border-bottom:0; } }
@media (max-width:900px){
  .faq-hero-inner{ grid-template-columns:1fr; }
  .faq-hero-photo{ min-height:200px; }
  .faq-hero-text{ padding:40px 24px; }
}

.gallery-hero{
  position:relative; background-size:cover; background-position:center; min-height:685px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.gallery-hero-inner{ position:relative; z-index:1; text-align:center; }
.gallery-hero h1{ color:#fff; font-size:50px; font-weight:700; margin:0 0 14px; }
.gallery-hero .photo-hero-breadcrumb{ color:#fff; font-size:18px; margin-bottom:10px; }
.gallery-hero .photo-hero-breadcrumb a{ color:#fff; }
.gallery-hero .photo-hero-breadcrumb a:hover{ color:var(--brass-light); }
.gallery-hero-sub{ color:#fff; font-size:20px; font-weight:500; margin:0; }
.gallery-hero-chevron{
  position:absolute; left:50%; bottom:36px; transform:translateX(-50%); color:rgba(255,255,255,.7);
  font-size:22px; animation:heroFlash 1.6s ease-in-out infinite;
}
@keyframes heroFlash{ 0%,50%,100%{ opacity:1; } 25%,75%{ opacity:.25; } }
@media (max-width:900px){ .gallery-hero{ min-height:420px; } .gallery-hero h1{ font-size:34px; } }

.portfolio-grid{ display:flex; flex-wrap:wrap; }
.portfolio-item{ position:relative; width:33.3333%; aspect-ratio:4/3; overflow:hidden; }
.portfolio-media{ position:absolute; inset:0; background-size:cover; background-position:center; filter:grayscale(100%); transition:filter .3s ease-in-out; }
.portfolio-item:hover .portfolio-media{ filter:grayscale(0%); }
.portfolio-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px 26px; background:linear-gradient(0deg, rgba(20,20,20,.85) 0%, rgba(20,20,20,.05) 65%, rgba(20,20,20,0) 100%);
  opacity:0; transition:opacity .35s var(--ease);
}
.portfolio-item:hover .portfolio-overlay{ opacity:1; }
.portfolio-overlay h5{ color:#fff; font-size:20px; font-weight:600; margin:0 0 2px; }
.portfolio-overlay span{ color:var(--stone-300); font-size:13px; text-transform:uppercase; letter-spacing:1px; margin-bottom:14px; }
.portfolio-actions{ display:flex; gap:10px; }
.portfolio-btn{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.4); transition:background .25s, color .25s;
}
.portfolio-btn:hover{ background:var(--nav-active); border-color:var(--nav-active); color:#fff; }
@media (max-width:900px){ .portfolio-item{ width:50%; } }
@media (max-width:560px){ .portfolio-item{ width:100%; } }

/* ==========================================================================
   SECTION SCAFFOLDING
   ========================================================================== */
.section{ padding:110px 0; }
.section-tight{ padding:70px 0; }
.section-dark{ background:var(--ink); color:var(--stone-200); }
.section-dark p{ color:var(--stone-400); }
.section-dark h2{ color:#fff; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
.accent-bar{ display:block; width:62px; height:3px; background:var(--brass); margin:10px 0 22px; }
.section-head h2{ font-size:clamp(28px,3.6vw,44px); max-width:640px; }
.section-head p{ max-width:420px; margin:0; }
.stripe{ background:var(--stone-100); }

/* ==========================================================================
   HOME — CATEGORY TILES
   ========================================================================== */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--ink); }
.cat-tile{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.cat-tile .swatch{ position:absolute; inset:0; transition:transform .7s var(--ease); }
.cat-tile:hover .swatch{ transform:scale(1.08); }
.cat-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,.05) 55%); }
.cat-tile-content{ position:absolute; left:28px; right:28px; bottom:28px; z-index:2; color:#fff; }
.cat-tile-content .eyebrow{ color:var(--brass-light); }
.cat-tile-content .eyebrow::before{ background:var(--brass-light); }
.cat-tile-content h3{ color:#fff; font-size:26px; margin-bottom:6px; }
.cat-tile-content .cat-tile-link{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--brass-light); color:var(--brass-light); padding-bottom:2px; }

/* stone swatch generator - no external imagery, pure css veining */
.swatch{ background-size:cover; background-position:center; width:100%; height:100%; display:block; }
.sw-1{ background: linear-gradient(120deg,#e9e4da,#d8d0c1 40%,#efe9de 60%,#c9bfa9), radial-gradient(circle at 30% 70%, rgba(176,141,87,.35), transparent 40%); }
.sw-2{ background: linear-gradient(135deg,#2b2926,#100f0e 55%,#242220), radial-gradient(circle at 70% 30%, rgba(176,141,87,.25), transparent 45%); }
.sw-3{ background: linear-gradient(125deg,#f4f1ec,#e3ddd0 45%,#f7f4ee), radial-gradient(circle at 60% 40%, rgba(176,141,87,.2), transparent 50%); }
.sw-4{ background: linear-gradient(130deg,#c8b79a,#e8dcc4 50%,#b39d76); }
.sw-5{ background: linear-gradient(140deg,#3d3a35,#1c1b19 60%,#4a453d); }
.sw-6{ background: linear-gradient(120deg,#ded7c8,#f2eee5 40%,#c7bda9 70%); }
.sw-7{ background: linear-gradient(130deg,#eae3d6,#d3c6ac 55%); }
.sw-8{ background: linear-gradient(135deg,#e5e0d6,#f8f6f1 45%,#cbbfa5 80%); }

/* ==========================================================================
   ABOUT / SPLIT
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.split-media{ position:relative; aspect-ratio:1/1.05; }
.split-media .swatch{ position:absolute; inset:0; transform:translateZ(0); backface-visibility:hidden; }
.split-media .frame{ position:absolute; inset:-18px; border:1px solid var(--brass); z-index:-1; }
.split-badge{ position:absolute; bottom:-24px; left:-24px; background:var(--ink); color:#fff; padding:26px; width:150px; text-align:center; }
.split-badge strong{ display:block; font-family:var(--font-display); font-size:32px; color:var(--brass-light); }
.split-badge span{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-400); }
.value-list{ display:grid; gap:26px; margin-top:36px; }
.value-item{ display:flex; gap:20px; }
.value-num{ font-family:var(--font-mono); color:var(--brass); font-size:13px; padding-top:4px; }
.value-item h4{ font-size:18px; margin-bottom:4px; }
.value-item p{ margin:0; font-size:15px; }

.badge-icon{
  flex-shrink:0; width:64px; height:64px; border-radius:50%;
  background:var(--brass); border:2px solid var(--brass-light); display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(200,20,63,.3);
}
.badge-icon svg{ width:28px; height:28px; stroke:#fff; fill:none; }
.feature-badges{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; }
.feature-badge{ display:flex; align-items:flex-start; gap:18px; }
.feature-badge h4{ font-size:20px; font-weight:500; margin:0 0 6px; color:var(--ink); }
.feature-badge p{ margin:0; font-size:14px; color:var(--stone-400); line-height:1.5; }
@media (max-width:900px){ .feature-badges{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .feature-badges{ grid-template-columns:1fr; } }

/* ==========================================================================
   STATS
   ========================================================================== */
.cert-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }
.cert-badge{ display:flex; align-items:center; gap:8px; border:1px solid var(--stone-200); border-radius:30px; padding:10px 18px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone-600); }
.cert-badge strong{ color:var(--ink); }

.section-photo-wash{ position:relative; background-size:cover; background-position:center; }
.section-photo-wash-overlay{ position:absolute; inset:0; background:rgba(255,255,255,.9); }

.testimonial-band{
  position:relative; background:var(--ink) url('../img/materials/black-noir.jpg') center/cover;
  color:#fff; padding:90px 0 70px; text-align:center;
}
.testimonial-band::before{ content:''; position:absolute; inset:0; background:rgba(27,27,27,.9); }
.testimonial-band .container{ position:relative; z-index:1; }
.testimonial-avatar{ width:72px; height:72px; border-radius:50%; background:var(--brass); color:var(--ink); display:grid; place-items:center; margin:0 auto 26px; font-family:var(--font-display); font-size:24px; }
.testimonial-band blockquote{ max-width:760px; margin:0 auto 20px; font-family:var(--font-display); font-size:clamp(18px,2.2vw,24px); line-height:1.5; color:#f4f1ec; }
.testimonial-band cite{ font-style:normal; color:var(--stone-400); font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }

.stats-bar{ background:var(--ink); color:#fff; padding:64px 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center; }
.stat{ border:1px solid rgba(255,255,255,.2); padding:26px 16px; }
.stat strong{ display:block; font-family:var(--font-display); font-size:clamp(34px,4vw,54px); color:var(--brass-light); }
.stat span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone-400); }
.stat.highlight{ background:var(--brass); border-color:var(--brass); }
.stat.highlight strong, .stat.highlight span{ color:#fff; }

/* ==========================================================================
   CATALOG DOWNLOAD CARDS
   ========================================================================== */
.catalog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.catalog-card{ position:relative; background:var(--ink); overflow:hidden; }
.catalog-card .swatch{ height:340px; opacity:.85; }
.catalog-card-body{ padding:26px 30px 32px; color:#fff; }
.catalog-card-body h3{ color:#fff; font-size:22px; margin-bottom:14px; }

/* ==========================================================================
   PORTFOLIO / GALLERY GRID
   ========================================================================== */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px; }
.filter-btn{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:10px 20px; border:1px solid var(--stone-200); background:#fff; color:var(--stone-600); transition:.25s; }
.filter-btn:hover, .filter-btn.active{ background:var(--ink); border-color:var(--ink); color:#fff; }

.material-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.material-card{ background:#fff; border:1px solid var(--stone-200); transition:transform .35s var(--ease), box-shadow .35s var(--ease); display:block; }
.material-card:hover{ transform:translateY(-6px); box-shadow:0 24px 44px rgba(28,27,25,.12); }
.material-swatch{ aspect-ratio:1/1; position:relative; overflow:hidden; }
.material-swatch .swatch{ position:absolute; inset:0; transition:transform .6s var(--ease); transform:translateZ(0); backface-visibility:hidden; }
.material-card:hover .material-swatch .swatch{ transform:scale(1.06); }
.material-tag{ position:absolute; top:12px; left:12px; background:rgba(28,27,25,.85); color:var(--brass-light); font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; }
.material-info{ padding:18px 18px 22px; }
.inspiration-caption{
  position:absolute; left:16px; bottom:16px; background:rgba(27,27,27,.9); color:#fff;
  padding:16px 20px; display:flex; flex-direction:column; gap:4px; font-family:var(--font-display); font-size:17px;
}
.inspiration-caption small{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-light); }
.material-info h4{ font-size:16px; margin-bottom:4px; }
.material-info span{ font-family:var(--font-mono); font-size:11px; color:var(--stone-600); }

.product-cat-head{ padding-top:20px; margin-bottom:36px; }
.product-cat-head:first-child{ padding-top:0; }
.product-cat-head h2{ margin-bottom:0; }
.product-cat-head .accent-bar{ margin-top:14px; }
.product-tile-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin-bottom:70px; }
.product-tile{
  flex:0 1 calc(33.333% - 20px);
  background:#fff; border:1px solid var(--stone-200); transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.product-tile:hover{ box-shadow:0 20px 40px rgba(28,27,25,.12); transform:translateY(-4px); }
.product-tile-media{ display:block; aspect-ratio:3/2; overflow:hidden; }
.product-tile-media .swatch{ transition:transform .6s var(--ease); }
.product-tile:hover .product-tile-media .swatch{ transform:scale(1.06); }
.product-tile-info{ padding:20px 20px 22px; text-align:center; }
.product-tile-title{ display:block; font-family:var(--font-body); font-size:21px; font-weight:400; color:var(--ink); margin-bottom:4px; }
.product-tile-title:hover{ color:var(--brass); }
.product-tile-cat{ display:block; font-family:var(--font-body); font-size:12px; letter-spacing:1px; color:var(--stone-600); margin-bottom:14px; }
.product-tile-price{ display:block; font-family:var(--font-body); font-size:13px; color:var(--stone-400); margin-bottom:16px; }
.product-tile-btn{ width:100%; justify-content:center; }
@media (max-width:1080px){ .product-tile{ flex-basis:calc(50% - 15px); } }
@media (max-width:560px){ .product-tile{ flex-basis:100%; } }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:56px; }
.pagination a{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--stone-200); font-family:var(--font-mono); font-size:13px; }

/* ==========================================================================
   Cabinet door cards — every door renders at an IDENTICAL footprint.

   The card, media box and label were always uniform in height; what made the
   doors look mismatched was width. The 75 cabinet photos are all portrait but
   their aspect ratios range 0.509–0.643, and object-fit:contain fits each one
   inside the box on its own ratio: against the old 2/3 (0.667) box every image
   was height-constrained, so all filled the full 377px height but rendered
   anywhere from 192px to 242px wide — a 26% spread, which reads as "one is big,
   one is small" even though the heights matched exactly.

   Fixed by sizing the box to 20/33 (0.606) — the dominant door ratio, shared by
   50 of the 75 photos — and switching to object-fit:cover so the artwork fills
   it in BOTH dimensions. Every door now paints the same width and the same
   height. Because the ratio spread is narrow and centred on the box ratio, the
   crop is small: the 50 doors at 0.606 are untouched, 0.571–0.643 lose ~6% off
   one axis, and only a single 0.509 outlier loses ~16% of its height.
   ========================================================================== */
.door-card{ background:#fff; border:1px solid var(--stone-200); transition:box-shadow .3s var(--ease), transform .3s var(--ease); display:flex; flex-direction:column; }
.door-card:hover{ box-shadow:0 20px 40px rgba(28,27,25,.12); transform:translateY(-4px); }
/* No padding: it would inset the image by a fixed 14px while the box height
   scales with column width, so the artwork's share of the tile — and therefore
   its apparent size — would drift between breakpoints. */
.door-card-media{ aspect-ratio:20/33; background:#f3f0ea; display:block; overflow:hidden; }
.door-card-media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .5s var(--ease); }
.door-card:hover .door-card-media img{ transform:scale(1.04); }
.door-card-label{ background:var(--ink); color:#fff; text-align:center; font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:14px 12px; display:flex; align-items:center; justify-content:center; gap:8px; }
.door-card-info{ padding:16px 18px 4px; text-align:center; }

/* ==========================================================================
   Category hero — Quartz / Porcelain / Cabinets landing pages. A dark,
   editorial split panel (not a stretched photo) so it stays sharp at any
   screen size and reads as a premium catalog cover rather than a generic
   banner.
   ========================================================================== */
.category-hero{
  background:var(--ink); position:relative; overflow:hidden;
  padding:110px 0 50px;
}
.category-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(1100px 500px at 85% -10%, rgba(200,20,63,.22), transparent 60%);
  pointer-events:none;
}
.category-hero-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:start; position:relative; z-index:1; }
@media (max-width:900px){ .category-hero-grid{ grid-template-columns:1fr; gap:40px; } }
.category-hero-breadcrumb{ color:rgba(255,255,255,.55); font-size:14px; margin-bottom:22px; }
.category-hero-breadcrumb a{ color:rgba(255,255,255,.75); }
.category-hero-breadcrumb a:hover{ color:var(--brass-light); }
.category-hero h1{ color:#fff; font-size:56px; line-height:1.05; font-weight:700; margin:16px 0 0; }
@media (max-width:640px){ .category-hero h1{ font-size:38px; } }
.category-hero .eyebrow{ color:var(--brass-light); }
.category-hero-sub{ color:rgba(255,255,255,.65); font-size:16px; max-width:460px; margin:20px 0 0; line-height:1.6; }
.category-hero-stats{ display:flex; gap:36px; margin-top:34px; flex-wrap:wrap; }
.category-hero-stat b{ display:block; color:#fff; font-size:26px; font-weight:700; }
.category-hero-stat span{ display:block; color:rgba(255,255,255,.5); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }
.category-hero-media{ position:relative; aspect-ratio:4/5; max-height:420px; }
.category-hero-media .frame{ position:absolute; inset:-16px; border:1px solid var(--brass); z-index:-1; }
.category-hero-media .swatch{ width:100%; height:100%; background-size:cover; background-position:center; box-shadow:0 40px 80px rgba(0,0,0,.5); }
@media (max-width:900px){ .category-hero-media{ max-width:320px; margin:0 auto; } }

/* ==========================================================================
   Key features — product detail page
   ========================================================================== */
.key-features-card{ background:#faf9f7; border:1px solid var(--stone-200); border-left:3px solid var(--brass); padding:26px 28px; }
.key-features-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; list-style:none; margin:0; padding:0; }
@media (max-width:640px){ .key-features-grid{ grid-template-columns:1fr; } }
.key-feature-item{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--stone-600); line-height:1.5; }
.key-feature-check{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%; margin-top:1px;
  background:var(--brass); color:#fff; display:flex; align-items:center; justify-content:center;
}
.key-feature-check svg{ width:12px; height:12px; }

/* ==========================================================================
   Product detail image zoom lens — hover to magnify. Pointer-hover devices
   only (a touch tap would otherwise trap the user under the lens).
   ========================================================================== */
.zoom-frame{ position:relative; overflow:hidden; cursor:zoom-in; }
.zoom-lens{
  position:absolute; display:none; pointer-events:none;
  border:2px solid var(--brass); background-repeat:no-repeat;
  width:180px; height:180px; border-radius:50%;
  box-shadow:0 8px 24px rgba(0,0,0,.25); z-index:5;
}
@media (hover:hover) and (pointer:fine){
  .zoom-frame:hover .zoom-lens{ display:block; }
}
.pagination a.active, .pagination a:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ==========================================================================
   PRODUCT SHOWCASE CAROUSEL
   ========================================================================== */
.product-carousel{ position:relative; margin-top:40px; }
.product-track{
  display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory;
  padding-bottom:6px; -ms-overflow-style:none; scrollbar-width:none;
}
.product-track::-webkit-scrollbar{ display:none; }
.product-chip{
  flex:0 0 200px; scroll-snap-align:start; display:block; background:#fff;
  border:1px solid var(--stone-200); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.product-chip:hover{ transform:translateY(-4px); box-shadow:0 20px 36px rgba(28,27,25,.12); }
.product-chip-media{ aspect-ratio:1/1; background-size:cover; background-position:center; }
.product-chip-cat{ display:block; margin:14px 16px 2px; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); }
.product-chip-name{ display:block; margin:0 16px 16px; font-size:14px; font-weight:600; color:var(--ink); }
.carousel-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px;
  border:1px solid var(--stone-200); background:#fff; color:var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:16px; transition:.25s;
}
.carousel-nav:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.carousel-nav.prev{ left:-22px; }
.carousel-nav.next{ right:-22px; }
@media (max-width:900px){
  .carousel-nav{ display:none; }
  .product-chip{ flex-basis:160px; }
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testi-wrap{ position:relative; max-width:760px; margin:0 auto; text-align:center; }
.testi-slide{ display:none; }
.testi-slide.active{ display:block; animation:fadeUp .6s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.testi-quote{ font-family:var(--font-display); font-size:clamp(20px,2.4vw,28px); font-weight:400; color:var(--ink); line-height:1.5; margin-bottom:28px; }
.testi-quote::before{ content:'“'; color:var(--brass); }
.testi-person{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--stone-600); }
.testi-dots{ display:flex; justify-content:center; gap:10px; margin-top:36px; }
.testi-dots button{ width:8px; height:8px; border-radius:50%; border:1px solid var(--brass); background:transparent; padding:0; }
.testi-dots button.active{ background:var(--brass); }

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.post-card{ background:#fff; border:1px solid var(--stone-200); display:flex; flex-direction:column; }
.post-media{ aspect-ratio:16/10; }
.post-body{ padding:26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.post-meta{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--brass); display:flex; gap:14px; }
.post-body h3{ font-size:19px; }
.post-body a.read{ margin-top:auto; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.post-body a.read::after{ content:' →'; }

.post-single{ display:grid; grid-template-columns:2.1fr 1fr; gap:60px; align-items:start; }
.post-content h2{ font-size:28px; margin-top:1.6em; }
.post-content p{ color:var(--ink-soft); }
.post-content blockquote{ border-left:2px solid var(--brass); margin:30px 0; padding:6px 0 6px 26px; font-family:var(--font-display); font-size:20px; color:var(--ink); }
.sidebar-block{ border:1px solid var(--stone-200); padding:26px; margin-bottom:24px; background:#fff; }
.sidebar-block h4{ font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-family:var(--font-body); margin-bottom:16px; }
.sidebar-block li{ padding:10px 0; border-bottom:1px solid var(--stone-100); font-size:14px; }
.sidebar-block li a:hover{ color:var(--brass); }
.category-list{ max-height:640px; overflow-y:auto; }
.category-list li{ padding:8px 0; border-bottom:0; font-size:13px; }
.category-list li a{ color:#6b6b6b; font-weight:400; font-family:var(--font-body); }
.category-list li a:hover{ color:var(--brass); }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq-cats{ display:flex; gap:12px; margin-bottom:40px; flex-wrap:wrap; }
.accordion{ border-top:1px solid var(--stone-200); }
.acc-item{ border-bottom:1px solid var(--stone-200); }
.acc-q{ width:100%; text-align:left; background:none; border:0; padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--font-display); font-size:18px; color:var(--ink); }
.acc-q .plus{ font-family:var(--font-mono); font-size:20px; color:var(--brass); transition:transform .3s; flex-shrink:0; }
.acc-item.open .acc-q .plus{ transform:rotate(45deg); }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.acc-a-inner{ padding-bottom:26px; padding-right:60px; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; }
.info-card{ display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--stone-200); }
.info-card .ic{ width:44px; height:44px; border:1px solid var(--brass); color:var(--brass); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--font-mono); }
.info-card h4{ font-size:15px; margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em; font-family:var(--font-mono); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--stone-600); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--stone-200); background:#fff; padding:14px 16px; font-family:var(--font-body); font-size:14px; color:var(--ink);
  transition:border-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--brass); }
.form-note{ font-size:13px; color:var(--stone-400); margin-top:10px; }
.map-frame{ height:100%; min-height:340px; border:1px solid var(--stone-200); position:relative; overflow:hidden; }
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.4) contrast(1.05); }

.contact-hero{ background:var(--ink); padding:150px 0 46px; }
@media (min-width:901px){ .contact-hero{ padding-top:150px; } }
.contact-hero-inner{ display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; }
.contact-hero h2{ color:#fff; font-size:clamp(22px,3.2vw,36px); font-weight:500; margin:0; }
.map-frame-full{ height:420px; border:0; }
.map-frame-full iframe{ filter:none; }
.contact-icon-row{ background:var(--ink); padding:56px 0; }
.icon-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.icon-row-item{ display:flex; align-items:center; gap:24px; }
.icon-row-circle{
  flex-shrink:0; width:80px; height:80px; border-radius:50%; background:#fff; color:#41484e;
  display:flex; align-items:center; justify-content:center; font-size:32px;
}
@keyframes iconVertical{
  0%{ transform:translate(0,-3px); } 4%{ transform:translate(0,3px); } 8%{ transform:translate(0,-3px); }
  12%{ transform:translate(0,3px); } 16%{ transform:translate(0,-3px); } 20%{ transform:translate(0,3px); } 22%,100%{ transform:translate(0,0); }
}
@keyframes iconRing{
  0%{ transform:rotate(-15deg); } 2%{ transform:rotate(15deg); } 4%{ transform:rotate(-18deg); } 6%{ transform:rotate(18deg); }
  8%{ transform:rotate(-22deg); } 10%{ transform:rotate(22deg); } 12%{ transform:rotate(-18deg); } 14%{ transform:rotate(18deg); }
  16%{ transform:rotate(-12deg); } 18%{ transform:rotate(12deg); } 20%,100%{ transform:rotate(0deg); }
}
.icon-anim-vertical:hover svg{ animation:iconVertical 2s ease infinite; }
.icon-anim-ring:hover svg{ animation:iconRing 2s ease infinite; }
.icon-row-item h4{ color:#fff; font-size:20px; font-weight:500; margin:0 0 4px; }
.icon-row-item p{ color:#ccc; margin:0; }
.icon-row-item p a{ color:#ccc; }
.icon-row-item p a:hover{ color:var(--brass-light); }
.form-row-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.field-pill{ margin-bottom:20px; }
.field-pill input, .field-pill textarea{
  width:100%; border:1px solid #dfe2e2; background:#fff; border-radius:5px; padding:15px 20px;
  font-family:var(--font-body); font-size:15px; color:var(--ink); transition:border-color .25s;
}
.field-pill textarea{ resize:vertical; }
.field-pill input:focus, .field-pill textarea:focus{ border-color:var(--brass); outline:none; }
@media (max-width:900px){
  .icon-row{ grid-template-columns:1fr; gap:26px; }
  .form-row-3{ grid-template-columns:1fr; }
}

/* ==========================================================================
   LIVE INVENTORY
   ========================================================================== */
.inv-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.inv-search{ display:flex; align-items:center; border:1px solid var(--stone-200); background:#fff; padding:0 16px; min-width:280px; }
.inv-search input{ border:0; padding:12px 8px; flex:1; font-family:var(--font-body); }
table.inv-table{ width:100%; border-collapse:collapse; background:#fff; min-width:600px; }
.inv-scroll-hint{ display:none; }
@media (max-width:700px){
  .inv-scroll-hint{ display:block; text-align:right; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone-400); margin-bottom:8px; }
}
.inv-table th{ text-align:left; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--stone-600); border-bottom:2px solid var(--ink); padding:14px 16px; }
.inv-table td{ padding:16px; border-bottom:1px solid var(--stone-100); font-size:14px; }
.inv-swatch{ width:44px; height:44px; display:inline-block; vertical-align:middle; margin-right:14px; }
.stock-pill{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; padding:5px 10px; border-radius:20px; }
.stock-in{ background:#e7f0e6; color:#3e6b3a; }
.stock-low{ background:#f7ecd9; color:#96731f; }
.stock-out{ background:#f4e2e1; color:#a13f3a; }

/* ==========================================================================
   WARRANTY
   ========================================================================== */
.timeline{ position:relative; padding-left:40px; border-left:1px solid var(--stone-200); display:grid; gap:44px; }
.timeline-item{ position:relative; }
.timeline-item::before{ content:''; position:absolute; left:-45px; top:2px; width:10px; height:10px; background:var(--brass); border-radius:50%; }
.timeline-item h4{ font-size:18px; margin-bottom:6px; }

/* ==========================================================================
   CTA BANNER
   ========================================================================== */
.cta-banner{ background:var(--ink); position:relative; overflow:hidden; padding:70px 0; text-align:center; }
.cta-banner::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 120%, rgba(176,141,87,.25), transparent 60%); }
.cta-banner .container{ position:relative; z-index:1; }
.cta-banner h2{ color:#fff; font-weight:500; font-size:clamp(28px,4vw,36px); max-width:720px; margin:0 auto 10px; }
.cta-banner p{ color:var(--stone-400); max-width:520px; margin:0 auto 32px; }
.cta-banner-inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; text-align:left; flex-wrap:wrap; }
.cta-banner-inner h2{ margin:0 0 8px; text-align:left; }
.cta-banner-inner p{ margin:0; text-align:left; }
.live-inventory-embed{ background:#000; line-height:0; }
.live-inventory-embed iframe{ display:block; border:0; }
@media (max-width:700px){ .cta-banner-inner{ flex-direction:column; text-align:center; } .cta-banner-inner h2, .cta-banner-inner p{ text-align:center; } }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:#000; color:#ebebeb; padding:70px 0 0; }
.footer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding-bottom:50px; }
.footer-brand{ grid-column:1; }
.footer-brand p{ color:#ebebeb; font-size:14px; max-width:280px; }
.footer-social{ display:flex; gap:12px; margin-top:20px; }
.footer-col{ grid-column:3; }
.footer-col h5{ font-family:'Roboto',var(--font-body); font-size:15px; letter-spacing:2px; text-transform:uppercase; color:#fff; font-weight:400; margin-bottom:20px; }
.footer-col li{ line-height:33px; font-size:16px; }
.footer-col li a{ display:flex; align-items:center; gap:10px; color:#ebebeb; }
.footer-col li a::before{ content:'\2296'; color:var(--brass-light); font-size:15px; flex-shrink:0; }
.footer-col a:hover{ color:var(--brass-light); }
.footer-seo{ padding:14px 0 20px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#ebebeb; text-align:center; }
.footer-seo a{ color:#ebebeb; }
.footer-seo a:hover{ color:var(--brass-light); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; flex-wrap:wrap; gap:14px; font-size:14px; color:#fff; }
.footer-links{ display:flex; flex-wrap:wrap; }
.footer-links a{ padding:0 30px; border-right:1px solid rgba(255,255,255,.41); color:#fff; font-size:14px; }
.footer-links a:last-child{ border-right:0; padding-right:0; }
@media (max-width:1080px){ .footer-brand{ grid-column:1 / span 2; } .footer-col{ grid-column:3 / span 2; } }
@media (max-width:900px){ .footer-brand, .footer-col{ grid-column:1 / -1; } }

.back-to-top{
  position:fixed; right:26px; bottom:26px; width:46px; height:46px; background:var(--ink); color:var(--brass-light);
  display:flex; align-items:center; justify-content:center; z-index:500; opacity:0; visibility:hidden; transition:.3s;
  border:1px solid var(--brass);
}
.back-to-top.show{ opacity:1; visibility:visible; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .material-grid{ grid-template-columns:repeat(3,1fr); }
  .post-single{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .burger{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-specs{ border-left:0; padding-left:0; grid-auto-flow:column; border-top:1px solid rgba(255,255,255,.15); padding-top:20px; }
  .split, .contact-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:34px; }
  .material-grid{ grid-template-columns:repeat(2,1fr); }
  .blog-grid{ grid-template-columns:1fr; }
  .catalog-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .cat-grid{ grid-template-columns:1fr; }
  .material-grid{ grid-template-columns:1fr 1fr; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .section{ padding:70px 0; }
}

/* responsive grid modifiers — used instead of inline grid-template-columns
   overrides so breakpoints always apply */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:900px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-3{ grid-template-columns:1fr; } }
.mobile-nav{
  position:fixed; top:0; left:-100%; width:min(300px,86vw); height:100%; background:var(--ink-soft); z-index:1200;
  transition:left .4s var(--ease); padding:80px 28px 30px; overflow-y:auto;
  display:flex; flex-direction:column;
}
.mobile-nav.open{ left:0; }
.mobile-nav a, .mobile-nav a:link, .mobile-nav a:visited{ display:block; padding:12px 0; color:#eee; font-family:var(--font-mono); font-size:14px; letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.08); transition:color .25s; }
.mobile-nav a.active, .mobile-nav a.active:visited{ color:var(--nav-active); }
.mobile-nav .sub a{ padding-left:16px; font-size:12px; color:var(--stone-400); text-transform:none; border-bottom:0; }
.mobile-nav .nav-group{ border-bottom:1px solid rgba(255,255,255,.08); }
.mobile-nav .nav-group summary{
  display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none;
  padding:12px 0; color:#eee; font-family:var(--font-mono); font-size:14px; letter-spacing:.05em; text-transform:uppercase;
}
.mobile-nav .nav-group summary::-webkit-details-marker{ display:none; }
.mobile-nav .nav-group summary::after{ content:'+'; color:var(--stone-400); }
.mobile-nav .nav-group[open] summary::after{ content:'\2212'; }
.mobile-nav .nav-group .sub{ padding-bottom:8px; }
.mobile-nav .nav-group .sub a{ border-bottom:0; }
.nav-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1150; opacity:0; visibility:hidden; transition:.3s; }
.nav-scrim.show{ opacity:1; visibility:visible; }
.mobile-close{ position:absolute; top:26px; right:26px; background:none; border:0; color:#fff; font-size:22px; }

/* ==========================================================================
   DOOR DETAIL — SIZES & SPECIFICATIONS
   ========================================================================== */
.pill-nav{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:34px; }
.pill-nav-item{
  font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink);
  background:#fff; border:1px solid var(--stone-200); border-radius:999px; padding:12px 24px;
  transition:.25s;
}
.pill-nav-item:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.size-category{ padding-top:36px; border-top:1px solid var(--stone-200); scroll-margin-top:110px; }
.size-category:first-of-type{ padding-top:0; border-top:0; }
.size-category-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.size-category-head h2{ margin-bottom:0; }
.size-count{ font-family:var(--font-body); font-size:22px; font-weight:400; color:var(--stone-400); margin-left:10px; }
.size-type-block{ border:1px solid var(--stone-200); padding:24px 24px 26px; margin-top:20px; }
.size-type-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.size-type-head h3{ font-size:19px; margin:0; }
.size-type-height{ font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--brass); }
.size-type-body{ display:grid; grid-template-columns:320px 1fr; gap:34px; align-items:start; }
@media (max-width:820px){ .size-type-body{ grid-template-columns:1fr; } }
.cabinet-diagram{ background:var(--stone-50); border:1px solid var(--stone-200); min-height:380px; position:relative; cursor:zoom-in; }
@media (min-width:721px){ .cabinet-diagram{ min-height:460px; } }
.cabinet-diagram-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:14px; box-sizing:border-box; }
.cabinet-diagram-zoom-hint{
  position:absolute; bottom:8px; right:8px; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid var(--stone-200); color:var(--ink);
  display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.cabinet-diagram-zoom-hint svg{ width:13px; height:13px; }
.cabinet-diagram-svg{ width:100%; height:100%; }
.cabinet-diagram-svg .cd-line{ stroke:var(--stone-600); stroke-width:1.2; fill:none; }
.cabinet-diagram-svg .cd-dim{ stroke:var(--stone-400); stroke-width:1; fill:none; stroke-dasharray:3 2; }
.cabinet-diagram-svg .cd-label{ font-family:var(--font-mono); font-size:8px; fill:var(--stone-600); }
.sku-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:18px; }
.sku-card{ background:var(--stone-50); border:1px solid var(--stone-200); padding:16px 18px; }
.sku-code{ font-family:var(--font-mono); font-size:14px; font-weight:600; letter-spacing:.01em; color:var(--ink); margin-bottom:12px; }
.sku-code-accent{ color:var(--brass); }
.sku-row{ display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:6px 0; border-top:1px solid var(--stone-200); }
.sku-row:first-of-type{ border-top:0; }
.sku-row span{ color:var(--stone-600); }
.sku-row b{ font-weight:600; color:var(--ink); text-align:right; }

/* ==========================================================================
   CABINETS — DOOR STYLE GRID (reference: cabinet catalog style-swatch grid)
   ========================================================================== */
.style-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:24px; margin-bottom:70px; }
.style-card{
  display:block; background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 10px rgba(28,27,25,.08);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.style-card:hover{ transform:translateY(-5px); box-shadow:0 16px 28px rgba(28,27,25,.14); }
.style-card-media{ position:relative; aspect-ratio:3/5; overflow:hidden; background:var(--stone-50); }
.style-card-media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.style-card-name{ padding:16px 18px 18px; font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--ink); }
.style-card-badge{
  position:absolute; top:12px; left:-30px; width:110px; padding:3px 0; text-align:center;
  background:var(--brass); color:#fff; font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; transform:rotate(-45deg); box-shadow:0 2px 6px rgba(0,0,0,.2);
}
@media (max-width:1200px){ .style-grid{ grid-template-columns:repeat(5, 1fr); } }
@media (max-width:860px){ .style-grid{ grid-template-columns:repeat(3, 1fr); gap:18px; } }
@media (max-width:560px){ .style-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; } }

/* ==========================================================================
   DIAGRAM IMAGE LIGHTBOX (full-screen preview for cabinet diagram images)
   ========================================================================== */
.diagram-lightbox{
  position:fixed; inset:0; z-index:2000; background:rgba(20,19,18,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s var(--ease);
  padding:60px 24px;
}
.diagram-lightbox.show{ opacity:1; visibility:visible; }
.diagram-lightbox-img{ max-width:min(900px,100%); max-height:100%; object-fit:contain; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.diagram-lightbox-close{
  position:absolute; top:22px; right:26px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s;
}
.diagram-lightbox-close:hover{ background:rgba(255,255,255,.18); }
.diagram-lightbox-close svg{ width:18px; height:18px; }