/* ==========================================================================
   SALASAR LAMINATES — Premium Website Demo
   Design system: architectural / editorial / material-first
   Typefaces: Fraunces (display serif) + Manrope (body/UI sans)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- Brand colour (derived from the Salasar logo red) ---- */
  --brand-red:        #A31E22;
  --brand-red-dark:   #7E1518;
  --brand-red-tint:   #F4E4E1;

  /* ---- Neutrals ---- */
  --near-black:  #14100E;
  --charcoal:    #262220;
  --taupe:       #8C8171;
  --stone:       #C9C1B4;
  --ivory:       #EFE9DF;
  --warm-white:  #F8F5EF;
  --line:        rgba(20,16,14,0.12);
  --line-soft:   rgba(248,245,239,0.18);

  /* ---- Type ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Layout ---- */
  --container: 1320px;
  --container-narrow: 860px;
  --gutter: clamp(1.5rem, 4vw, 4rem);
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.16,.8,.24,1);
  --dur: .7s;
}

/* ---------------------------------- Reset ---------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--near-black);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
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; }
input, select, textarea{ font-family:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }

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

::selection{ background: var(--brand-red); color:#fff; }

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

/* ---------------------------------- Utility ---------------------------------- */
.container{ max-width: var(--container); margin-inline:auto; padding-inline: var(--gutter); }
.container-narrow{ max-width: var(--container-narrow); margin-inline:auto; padding-inline: var(--gutter); }
.eyebrow{
  font-size: .8125rem;
  letter-spacing: .01em;
  color: var(--brand-red);
  font-weight: 600;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.eyebrow::before{
  content:'';
  width: 22px; height:1px;
  background: var(--brand-red);
  display:inline-block;
}
.section{ padding-block: clamp(4.5rem, 9vw, 8.5rem); position:relative; }
.section-dark{ background: var(--near-black); color: var(--warm-white); }
.section-tight{ padding-block: clamp(3rem, 6vw, 5rem); }
.reveal{ opacity:0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.hidden{ display:none !important; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding: .95rem 1.9rem;
  font-size: .95rem;
  font-weight:600;
  letter-spacing:.01em;
  border-radius: var(--radius-sm);
  border:1px solid currentColor;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .3s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}
.btn-primary:hover{ background: var(--brand-red-dark); border-color: var(--brand-red-dark); transform: translateY(-2px); }
.btn-outline-dark{ color: var(--near-black); border-color: var(--near-black); background:transparent; }
.btn-outline-dark:hover{ background: var(--near-black); color:#fff; transform: translateY(-2px); }
.btn-outline-light{ color:#fff; border-color: rgba(255,255,255,.55); background:transparent; }
.btn-outline-light:hover{ background:#fff; color: var(--near-black); border-color:#fff; transform: translateY(-2px); }
.btn-ghost{ border-color: transparent; padding-inline:0; color: var(--near-black); }
.btn-ghost .arrow{ transition: transform .35s var(--ease); }
.btn-ghost:hover .arrow{ transform: translateX(6px); }

.link-underline{
  position:relative;
  padding-bottom:.2rem;
  background-image: linear-gradient(currentColor,currentColor);
  background-position: 0 100%;
  background-repeat:no-repeat;
  background-size: 0% 1px;
  transition: background-size .45s var(--ease);
}
.link-underline:hover{ background-size:100% 1px; }

/* image with graceful fallback if the CDN photo cannot load */
.ph{
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg,var(--stone),var(--taupe));
}
.ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.ph.img-error{ background: linear-gradient(135deg, var(--charcoal), var(--near-black)); }
.ph.img-error img{ opacity:0; }

/* =============================== HEADER =============================== */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:200;
  padding-block: 1.6rem;
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header .container{
  position:relative;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  column-gap: 2rem;
}
.site-header.is-scrolled{
  background: rgba(248,245,239,.92);
  backdrop-filter: blur(14px);
  padding-block: 1.05rem;
  box-shadow: 0 1px 0 var(--line);
}
.brand-logo{ display:block; width: 168px; justify-self:center; }
.brand-logo img{ width:100%; height:auto; }
.logo-light{ display:none; }
.logo-dark{ display:block; }
.site-header.is-scrolled .logo-light,
body.page-inner .logo-light{ display:none; }
.site-header.is-scrolled .logo-dark,
body.page-inner .logo-dark{ display:block; }
.hero-white-header .logo-light{ display:block; }
.hero-white-header .logo-dark{ display:none; }
.hero-white-header.is-scrolled .logo-light{ display:none; }
.hero-white-header.is-scrolled .logo-dark{ display:block; }
.site-header.is-scrolled .header-actions .btn-outline-light{ color:var(--near-black); border-color:var(--near-black); }
.site-header.is-scrolled .header-actions .btn-outline-light:hover{ background:var(--near-black); color:#fff; }

/* split nav clusters */
.main-nav{ display:flex; align-items:center; gap:2.2rem; }
.main-nav-left{ justify-self:stretch; justify-content:flex-end; }
.main-nav-right{ justify-self:stretch; justify-content:flex-start; }
.nav-item{ position:static; } /* deliberately static — the mega-menu positions off the header row, not this item; see mega-menu note below */
.nav-link{
  background:none; border:none; padding:0; font-family:inherit;
  font-size:.92rem; font-weight:600; color: var(--near-black);
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  position:relative;
}
.hero-white-header:not(.is-scrolled) .nav-link,
.hero-white-header:not(.is-scrolled) .header-actions .icon-btn{ color:#fff; }
.nav-link::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-6px;
  height:1px; background: currentColor;
  transform: scaleX(0); transform-origin:right;
  transition: transform .4s var(--ease);
}
.nav-link:hover::after{ transform:scaleX(1); transform-origin:left; }
.mega-trigger .chev{ width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition: transform .3s var(--ease); margin-top:-3px; }
.nav-item.is-open .mega-trigger .chev{ transform:rotate(-135deg); margin-top:3px; }

/* mega menu — positioned off the header row (.site-header .container has position:relative),
   NOT off the .nav-item, so its width is never constrained by the trigger's own width. */
.mega-menu{
  position:absolute; top:calc(100% + 1.6rem); left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter));
  background: var(--warm-white);
  border-top:1px solid var(--line);
  box-shadow: 0 40px 70px -34px rgba(20,16,14,.4);
  padding: 2.6rem var(--gutter);
  display:grid; grid-template-columns: repeat(3, minmax(140px,1fr)) 1.3fr; gap: clamp(1.6rem,3vw,3rem);
  opacity:0; visibility:hidden; transform: translateY(-10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  z-index:250;
  color: var(--near-black);
}
@media (hover:hover){
  .nav-item:hover .mega-menu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
}
.nav-item.is-open .mega-menu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.mega-col{ display:flex; flex-direction:column; gap:.75rem; }
.mega-col-title{ font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--brand-red); margin-bottom:.3rem; }
.mega-col a{ font-size:.94rem; color: var(--near-black); }
.mega-col a:hover{ color: var(--brand-red); }
.mega-feature{ display:block; }
.mega-feature .ph{ aspect-ratio: 4/3; border-radius: var(--radius-sm); margin-bottom:.9rem; }
.mega-feature-label{ font-size:.85rem; font-weight:600; }

.header-actions{ display:flex; align-items:center; gap:1.4rem; }
.icon-btn{ background:none; border:none; padding:.3rem; color:inherit; display:flex; }
.icon-btn svg{ width:19px; height:19px; }
.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:.4rem; justify-self:end; }
.hamburger span{ width:22px; height:2px; background: currentColor; display:block; transition: transform .3s var(--ease), opacity .3s var(--ease); }

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:0; z-index:300;
  background: var(--near-black);
  color:#fff;
  display:flex; flex-direction:column;
  padding: 2rem var(--gutter) 3rem;
  transform: translateX(100%);
  transition: transform .55s var(--ease);
  overflow-y:auto;
}
.mobile-nav.is-open{ transform:none; }
.mobile-nav-top{ display:flex; justify-content:space-between; align-items:center; }
.mobile-nav-top .brand-logo{ width:140px; }
.mobile-nav-close{ background:none; border:none; color:#fff; font-size:1.8rem; line-height:1; }
.mobile-nav-links{ margin-top:3rem; display:flex; flex-direction:column; }
.mobile-nav-links > a{
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight:400;
  padding-block: .55rem;
  border-bottom: 1px solid var(--line-soft);
  color:#fff;
}
.mobile-accordion{ border-bottom: 1px solid var(--line-soft); }
.mobile-accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:none; border:none; color:#fff; padding-block:.55rem;
  font-family: var(--font-display); font-size:2.1rem; font-weight:400;
}
.mobile-accordion-trigger .chev{ width:11px; height:11px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); transition: transform .3s var(--ease); }
.mobile-accordion.is-open .mobile-accordion-trigger .chev{ transform:rotate(-135deg); }
.mobile-accordion-panel{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.mobile-accordion.is-open .mobile-accordion-panel{ max-height:640px; }
.m-sub-label{ font-family: var(--font-body); font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--stone); margin: 1.1rem 0 .5rem; }
.mobile-accordion-panel a{ display:block; padding-block:.5rem; font-size:1.05rem; color: var(--stone); }
.mobile-nav-foot{ margin-top:auto; display:flex; flex-direction:column; gap:1rem; }
.mobile-nav-foot a{ color: var(--stone); font-size:.9rem; }

/* minimal utility header (checkout / error pages) */
.site-header.header-minimal .container{ grid-template-columns: 1fr auto 1fr; }
.site-header.header-minimal .brand-logo{ justify-self:start; }
.minimal-help{ justify-self:end; font-size:.9rem; font-weight:600; color: var(--taupe); }
.minimal-help a{ color: var(--near-black); }

/* =============================== CART (hybrid: sample kit + quote cart) =============================== */
.cart-tabs{ display:flex; gap:.6rem; border-bottom:1px solid var(--line); margin-bottom:2rem; }
.cart-tab{ background:none; border:none; padding:1rem 1.6rem; font-weight:700; font-size:.95rem; color:var(--taupe); border-bottom:2px solid transparent; margin-bottom:-1px; }
.cart-tab.is-active{ color:var(--near-black); border-color:var(--brand-red); }
.cart-panel{ display:none; }
.cart-panel.is-active{ display:block; }
.cart-line{ display:grid; grid-template-columns: 80px 1fr auto auto auto; align-items:center; gap:1.2rem; padding:1.4rem 0; border-bottom:1px solid var(--line); }
.cart-line .ph{ width:80px; aspect-ratio:1; border-radius: var(--radius-sm); }
.cart-line h4{ font-family: var(--font-display); font-weight:400; font-size:1.1rem; }
.cart-line .meta{ font-size:.82rem; color:var(--taupe); margin-top:.2rem; }
.qty-control{ display:flex; align-items:center; border:1px solid var(--line); border-radius: var(--radius-sm); }
.qty-control button{ width:34px; height:34px; background:none; border:none; font-size:1.1rem; }
.qty-control span{ width:32px; text-align:center; font-weight:600; font-size:.9rem; }
.cart-price{ font-weight:700; }
.cart-remove{ background:none; border:none; color:var(--taupe); font-size:.8rem; text-decoration:underline; }
.cart-summary{ border:1px solid var(--line); border-radius: var(--radius-md); padding:1.8rem; height:fit-content; }
.cart-summary-row{ display:flex; justify-content:space-between; padding-block:.6rem; font-size:.92rem; }
.cart-summary-row.total{ border-top:1px solid var(--line); margin-top:.6rem; padding-top:1rem; font-weight:700; font-size:1.05rem; }
.quote-note{ background: var(--ivory); border:1px solid var(--line); border-radius: var(--radius-sm); padding:1rem 1.2rem; font-size:.86rem; color: var(--charcoal); margin-bottom:1.6rem; }
.empty-cart{ text-align:center; padding-block:4rem; color:var(--taupe); }

/* =============================== CHECKOUT =============================== */
.checkout-steps{ display:flex; gap:1.4rem; margin-bottom:2.4rem; flex-wrap:wrap; }
.checkout-step{ display:flex; align-items:center; gap:.6rem; font-size:.86rem; font-weight:700; color:var(--taupe); }
.checkout-step .num{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.checkout-step.is-active{ color:var(--near-black); }
.checkout-step.is-active .num{ background:var(--brand-red); border-color:var(--brand-red); color:#fff; }
.checkout-layout{ display:grid; grid-template-columns: 1.3fr .9fr; gap: clamp(2rem,4vw,3.5rem); }
.checkout-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.checkout-form-grid .full{ grid-column:1/-1; }
.checkout-form-grid label{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.02em; color: var(--taupe); margin-bottom:.5rem; }
.checkout-form-grid input, .checkout-form-grid select{ width:100%; border:1px solid var(--line); background: var(--warm-white); padding:.8rem 1rem; border-radius: var(--radius-sm); font-size:.92rem; }
.payment-option{ display:flex; align-items:center; gap:.8rem; border:1px solid var(--line); border-radius: var(--radius-sm); padding:1rem 1.2rem; margin-bottom:.8rem; }
.payment-option input{ width:auto; }

/* =============================== 404 =============================== */
.error-page{ min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; padding-block: clamp(4rem,8vw,7rem); }
.error-code{ font-family: var(--font-display); font-size: clamp(5rem,14vw,10rem); line-height:1; color: var(--brand-red); }
.error-search{ display:flex; max-width:420px; margin: 2rem auto 0; border:1px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; }
.error-search input{ flex:1; border:none; padding:.9rem 1.1rem; font-size:.95rem; background:var(--warm-white); }
.error-search button{ border:none; background: var(--brand-red); color:#fff; padding:0 1.4rem; font-weight:600; }

@media (max-width: 860px){
  .site-header .container{ display:flex; justify-content:space-between; align-items:center; }
  .main-nav-left, .main-nav-right{ display:none; }
  .brand-logo{ justify-self:auto; }
  .hamburger{ display:flex; }
  .checkout-layout, .cart-summary{ grid-template-columns: 1fr; }
  .cart-line{ grid-template-columns: 60px 1fr; grid-template-areas: "img title" "img qty" "img price"; row-gap:.5rem; }
}

/* =============================== HERO =============================== */
.hero{
  position:relative;
  min-height: 100vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background: var(--near-black);
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.12);
  animation: heroZoom 8s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform: scale(1); } }
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,16,14,.15) 0%, rgba(20,16,14,.25) 45%, rgba(20,16,14,.86) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  color:#fff;
  padding-bottom: clamp(3rem,7vw,6rem);
  width:100%;
}
.hero-kicker{
  font-size:.85rem; font-weight:600; letter-spacing:.02em;
  color: var(--stone);
  margin-bottom:1.4rem;
  display:flex; align-items:center; gap:.6rem;
  opacity:0; animation: heroFadeUp .9s var(--ease) .3s forwards;
}
.hero-kicker::before{ content:''; width:34px; height:1px; background: var(--brand-red); }
.hero-title{
  font-family: var(--font-display);
  font-weight:400;
  font-size: clamp(2.8rem, 7vw, 6.4rem);
  line-height: 1.02;
  max-width: 18ch;
  opacity:0; animation: heroFadeUp 1s var(--ease) .45s forwards;
}
.hero-title em{ font-style:italic; color: var(--brand-red); }
.hero-sub{
  margin-top: 1.6rem;
  font-size: clamp(1.05rem,1.6vw,1.25rem);
  color: var(--stone);
  max-width: 34ch;
  opacity:0; animation: heroFadeUp 1s var(--ease) .6s forwards;
}
.hero-actions{
  margin-top: 2.6rem;
  display:flex; gap:1rem; flex-wrap:wrap;
  opacity:0; animation: heroFadeUp 1s var(--ease) .75s forwards;
}
@keyframes heroFadeUp{ from{ opacity:0; transform: translateY(24px); } to{ opacity:1; transform:none; } }

.hero-scroll{
  position:absolute; right: var(--gutter); bottom: 2.2rem; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color: rgba(255,255,255,.75); font-size:.72rem; letter-spacing:.08em;
}
.hero-scroll .line{ width:1px; height:46px; background: rgba(255,255,255,.35); position:relative; overflow:hidden; }
.hero-scroll .line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: #fff; animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* =============================== BRAND INTRO (editorial) =============================== */
.intro{ display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.intro-media{ position:relative; }
.intro-media .ph{ aspect-ratio: 4/5; border-radius: var(--radius-md); }
.intro-media .ph-tag{
  position:absolute; left:-1.5rem; bottom:-1.5rem;
  background: var(--warm-white);
  border:1px solid var(--line);
  padding: 1.3rem 1.6rem;
  max-width:220px;
  box-shadow: 0 24px 48px -24px rgba(20,16,14,.35);
}
.ph-tag .num{ font-family: var(--font-display); font-size:2.2rem; }
.ph-tag .lbl{ font-size:.8rem; color: var(--charcoal); margin-top:.2rem; }
.intro-title{
  font-family: var(--font-display);
  font-weight:400;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height:1.14;
}
.intro-title .accent{ color: var(--brand-red); font-style:italic; }
.intro-copy{ margin-top:1.6rem; font-size:1.05rem; line-height:1.75; color: var(--charcoal); max-width:52ch; }
.intro-foot{ margin-top:2.2rem; display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }

/* =============================== PRODUCT RANGE (asymmetric) =============================== */
.range-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom: clamp(2rem,4vw,3.5rem); flex-wrap:wrap; }
.range-title{ font-family: var(--font-display); font-weight:400; font-size: clamp(2rem,4vw,3rem); max-width:14ch; }
.range-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 80px;
  gap: 1.1rem;
}
.range-card{
  position:relative; overflow:hidden; border-radius: var(--radius-md);
  color:#fff; display:flex; align-items:flex-end;
}
.range-card .ph{ position:absolute; inset:0; }
.range-card::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,16,14,0) 40%, rgba(20,16,14,.82) 100%); }
.range-card-body{ position:relative; z-index:2; padding: 1.6rem; width:100%; }
.range-card-body h3{ font-family:var(--font-display); font-weight:400; font-size:1.5rem; }
.range-card-body p{ font-size:.88rem; color: var(--stone); margin-top:.4rem; max-width:26ch; }
.range-card-body .link-underline{ display:inline-block; margin-top:.9rem; font-size:.82rem; font-weight:600; }
.range-card img, .range-card .ph{ transition: transform 1.1s var(--ease); }
.range-card:hover .ph{ transform: scale(1.06); }

.rc-1{ grid-column: span 3; grid-row: span 5; }
.rc-2{ grid-column: span 3; grid-row: span 3; }
.rc-3{ grid-column: span 3; grid-row: span 2; }
.rc-4{ grid-column: span 2; grid-row: span 4; }
.rc-5{ grid-column: span 4; grid-row: span 4; }

/* =============================== MATERIAL EXPERIENCE =============================== */
.material-lab{ display:grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.material-stage{ position:relative; aspect-ratio: 5/6; border-radius: var(--radius-md); overflow:hidden; background: var(--charcoal); }
.material-stage .ph{ position:absolute; inset:0; opacity:0; transition: opacity .6s var(--ease); }
.material-stage .ph.is-active{ opacity:1; }
.material-stage-label{
  position:absolute; left:1.6rem; bottom:1.6rem; z-index:3;
  color:#fff;
}
.material-stage-label .tag{ font-size:.78rem; letter-spacing:.03em; color: var(--stone); }
.material-stage-label h3{ font-family:var(--font-display); font-weight:400; font-size:1.9rem; margin-top:.2rem; }
.material-swatches{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:2.4rem; }
.swatch{
  border:1px solid var(--line); background:transparent; border-radius: var(--radius-sm);
  padding: .9rem; text-align:left; display:flex; flex-direction:column; gap:.7rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.swatch-chip{ width:100%; aspect-ratio:1; border-radius:2px; }
.swatch span{ font-size:.85rem; font-weight:600; }
.swatch:hover{ border-color: var(--near-black); }
.swatch.is-active{ border-color: var(--brand-red); background: var(--brand-red-tint); }

/* =============================== APPLICATIONS (scroll strip) =============================== */
.apps-title-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2.4rem; flex-wrap:wrap; }
.apps-strip{ display:flex; gap:1.2rem; overflow-x:auto; padding-bottom:1rem; scroll-snap-type:x mandatory; scrollbar-width:none; }
.apps-strip::-webkit-scrollbar{ display:none; }
.app-card{ position:relative; flex: 0 0 auto; width: min(70vw,420px); aspect-ratio: 3/4; border-radius: var(--radius-md); overflow:hidden; scroll-snap-align:start; color:#fff; }
.app-card .ph{ position:absolute; inset:0; transition: transform .9s var(--ease); }
.app-card:hover .ph{ transform: scale(1.05); }
.app-card::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(20,16,14,.85) 100%); }
.app-card-body{ position:absolute; left:1.4rem; bottom:1.4rem; right:1.4rem; z-index:2; }
.app-card-body .idx{ font-size:.75rem; color: var(--stone); }
.app-card-body h3{ font-family: var(--font-display); font-weight:400; font-size:1.6rem; margin-top:.3rem; }
.apps-nav{ display:flex; gap:.8rem; }
.apps-nav button{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:transparent; display:flex; align-items:center; justify-content:center; transition: background .3s, color .3s; }
.apps-nav button:hover{ background: var(--near-black); color:#fff; border-color: var(--near-black); }

/* =============================== COLLECTIONS =============================== */
.collections-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; }
.collection-card{ position:relative; overflow:hidden; border-radius: var(--radius-md); aspect-ratio: 3/4; color:#fff; }
.collection-card .ph{ position:absolute; inset:0; transition: transform 1s var(--ease); }
.collection-card:hover .ph{ transform: scale(1.07); }
.collection-card::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,16,14,.05) 30%, rgba(20,16,14,.88) 100%); }
.collection-card-body{ position:absolute; left:1.5rem; right:1.5rem; bottom:1.5rem; z-index:2; }
.collection-card-body .est{ font-size:.75rem; color: var(--stone); }
.collection-card-body h3{ font-family: var(--font-display); font-weight:400; font-size:2rem; margin-top:.3rem; }
.collection-card-body p{ font-size:.85rem; color: var(--stone); margin-top:.5rem; max-width:26ch; opacity:0; max-height:0; transition: opacity .4s var(--ease), max-height .4s var(--ease); }
.collection-card:hover .collection-card-body p{ opacity:1; max-height:6rem; margin-top:.6rem; }
.collection-card-body .link-underline{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; margin-top:.9rem; }

/* =============================== QUALITY (triptych) =============================== */
.triptych{ display:grid; grid-template-columns: repeat(3,1fr); }
.triptych > div{ padding: clamp(1.6rem,3vw,2.6rem) clamp(1.4rem,3vw,2.4rem); border-left:1px solid var(--line-soft); }
.triptych > div:first-child{ border-left:none; padding-left:0; }
.triptych h4{ font-family: var(--font-display); font-weight:400; font-size:1.5rem; color: var(--brand-red); }
.triptych p{ margin-top:.9rem; font-size:.98rem; line-height:1.7; color: var(--stone); }

.quality-layout{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.quality-media .ph{ aspect-ratio: 4/3; border-radius: var(--radius-md); }

/* =============================== STATS =============================== */
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1.5rem; }
.stat{ text-align:center; }
.stat .figure{ font-family: var(--font-display); font-weight:300; font-size: clamp(2.6rem,5vw,4.6rem); line-height:1; color: var(--warm-white); }
.stat .figure .accent{ color: var(--brand-red); }
.stat .label{ margin-top: .9rem; font-size:.86rem; color: var(--stone); }

/* =============================== VISUALIZER =============================== */
.viz-layout{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.viz-frame{ border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--line); background: var(--ivory); box-shadow: 0 40px 90px -50px rgba(20,16,14,.5); }
.viz-toolbar{ display:flex; align-items:center; gap:.5rem; padding: .8rem 1rem; background: var(--near-black); }
.viz-toolbar span{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.25); }
.viz-stage{ position:relative; aspect-ratio: 16/10; }
.viz-stage .ph{ position:absolute; inset:0; }
.viz-panel{ padding: 1.4rem 1.6rem 1.6rem; }
.viz-panel-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.viz-panel-row span{ font-size:.82rem; font-weight:600; color: var(--taupe); }
.viz-swatch-row{ display:flex; gap:.6rem; margin-bottom:1.3rem; }
.viz-swatch{ width:34px; height:34px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.viz-swatch.is-active{ border-color: var(--near-black); transform: scale(1.12); }
.viz-actions{ display:flex; gap:.8rem; }
.viz-actions button{ flex:1; }

/* =============================== CATALOGUE =============================== */
.catalogue-layout{ display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.catalogue-cover{ position:relative; aspect-ratio: 3/4.1; border-radius:2px; overflow:hidden; box-shadow: 0 46px 90px -46px rgba(20,16,14,.55); }
.catalogue-cover .ph{ position:absolute; inset:0; }
.catalogue-cover-body{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:space-between; padding:2rem; color:#fff; background:linear-gradient(180deg, rgba(20,16,14,.15), rgba(20,16,14,.7)); }
.catalogue-cover-body .brandmark{ font-family: var(--font-display); font-size:1.05rem; letter-spacing:.02em; }
.catalogue-cover-body .cat-title{ font-family: var(--font-display); font-size:2.2rem; line-height:1.1; }

/* =============================== DEALER CTA =============================== */
.dealer-cta{ position:relative; background: var(--near-black); color:#fff; overflow:hidden; }
.dealer-cta .ph{ position:absolute; inset:0; opacity:.34; }
.dealer-cta-inner{ position:relative; z-index:2; text-align:center; max-width:760px; margin-inline:auto; }
.dealer-cta-inner h2{ font-family: var(--font-display); font-weight:400; font-size: clamp(2.3rem,5vw,4rem); line-height:1.1; }
.dealer-cta-inner p{ margin-top:1.3rem; color: var(--stone); font-size:1.05rem; }
.dealer-cta-actions{ margin-top:2.4rem; display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* =============================== INSIGHTS =============================== */
.insights-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem,4vw,3rem); }
.insight-feature{ position:relative; }
.insight-feature .ph{ aspect-ratio: 16/11; border-radius: var(--radius-md); }
.insight-feature .cat{ margin-top:1.4rem; }
.insight-feature h3{ font-family: var(--font-display); font-weight:400; font-size: clamp(1.6rem,2.6vw,2.2rem); margin-top:.6rem; max-width:22ch; }
.insight-feature p{ margin-top:.8rem; color: var(--charcoal); max-width:52ch; line-height:1.7; }
.insight-list{ display:flex; flex-direction:column; }
.insight-row{ display:flex; gap:1.2rem; padding-block:1.4rem; border-top:1px solid var(--line); }
.insight-row:last-child{ border-bottom:1px solid var(--line); }
.insight-row .ph{ width:110px; aspect-ratio:1; border-radius: var(--radius-sm); flex-shrink:0; }
.insight-row .cat{ font-size:.72rem; color: var(--brand-red); font-weight:600; }
.insight-row h4{ font-family: var(--font-display); font-weight:400; font-size:1.15rem; margin-top:.3rem; }

/* =============================== FOOTER =============================== */
.site-footer{ background: var(--near-black); color: var(--stone); }
.footer-top{ display:grid; grid-template-columns: 1.4fr repeat(4, .8fr); gap:2.5rem; padding-block: clamp(3rem,6vw,5rem); border-bottom:1px solid var(--line-soft); }
.footer-brand .brand-logo{ width:190px; }
.footer-brand p{ margin-top:1.4rem; max-width:32ch; font-size:.92rem; line-height:1.7; }
.footer-social{ display:flex; gap:1rem; margin-top:1.6rem; }
.footer-social a{ width:38px; height:38px; border:1px solid var(--line-soft); border-radius:50%; display:flex; align-items:center; justify-content:center; transition: background .3s, border-color .3s; }
.footer-social a:hover{ background: var(--brand-red); border-color: var(--brand-red); }
.footer-social svg{ width:16px; height:16px; }
.footer-col h5{ color:#fff; font-size:.85rem; font-weight:700; letter-spacing:.02em; margin-bottom:1.2rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.75rem; }
.footer-col a{ font-size:.92rem; transition: color .25s; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-block:1.6rem; font-size:.82rem; flex-wrap:wrap; gap:.8rem; }

/* back to top */
.back-to-top{
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:150;
  width:48px; height:48px; border-radius:50%;
  background: var(--near-black); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.back-to-top.is-visible{ opacity:1; pointer-events:auto; transform:none; }

/* count-up helper */
[data-countup]{ font-variant-numeric: tabular-nums; }

/* =============================== INNER PAGE HERO (products/about/contact/etc.) =============================== */
.page-hero{
  position:relative; min-height: 62vh; display:flex; align-items:flex-end;
  background: var(--near-black); color:#fff; overflow:hidden;
}
.page-hero .ph{ position:absolute; inset:0; opacity:.55; }
.page-hero-inner{ position:relative; z-index:2; padding-block: clamp(3rem,7vw,5.5rem); width:100%; }
.page-hero .eyebrow{ color: var(--stone); }
.page-hero .eyebrow::before{ background: var(--brand-red); }
.page-hero h1{ font-family: var(--font-display); font-weight:400; font-size: clamp(2.6rem,6vw,5rem); margin-top:1rem; max-width:20ch; }
.page-hero p{ margin-top:1.2rem; max-width:48ch; color: var(--stone); font-size:1.05rem; }
.breadcrumb{ font-size:.82rem; color: var(--stone); display:flex; gap:.5rem; }
.breadcrumb a:hover{ color:#fff; }

/* =============================== PRODUCTS LISTING =============================== */
.products-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-block:1.6rem; border-bottom:1px solid var(--line); margin-bottom:2.6rem; }
.products-count{ font-size:.9rem; color: var(--taupe); }
.filters-bar{ display:flex; gap:.9rem; flex-wrap:wrap; }
.filter-select{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--line); background: var(--warm-white);
  padding:.7rem 2.2rem .7rem 1rem; font-size:.86rem; font-weight:600; border-radius: var(--radius-sm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314100E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right .7rem center; background-size:14px;
  cursor:pointer;
}
.search-input{ border:1px solid var(--line); background: var(--warm-white); padding:.7rem 1rem; font-size:.86rem; border-radius: var(--radius-sm); min-width:220px; }

.products-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.6rem; }
.product-card{ display:block; }
.product-card-media{ position:relative; aspect-ratio: 4/5; overflow:hidden; border-radius: var(--radius-md); background: var(--ivory); }
.product-card-media .ph{ position:absolute; inset:0; transition: transform .8s var(--ease); }
.product-card:hover .product-card-media .ph{ transform: scale(1.06); }
.product-card-tag{ position:absolute; top:1rem; left:1rem; z-index:2; background: rgba(248,245,239,.92); font-size:.72rem; font-weight:700; padding:.35rem .7rem; border-radius:2px; letter-spacing:.02em; }
.product-card-body{ padding-top:1.1rem; display:flex; justify-content:space-between; gap:1rem; }
.product-card-body h3{ font-family: var(--font-display); font-weight:400; font-size:1.2rem; }
.product-card-meta{ font-size:.82rem; color: var(--taupe); margin-top:.35rem; }
.product-card-view{ font-size:.8rem; font-weight:600; white-space:nowrap; align-self:flex-start; margin-top:.3rem; }
.no-results{ grid-column: 1/-1; text-align:center; padding-block:4rem; color: var(--taupe); }

/* =============================== PRODUCT DETAIL =============================== */
.pd-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); }
.pd-gallery-main{ position:relative; aspect-ratio: 4/5; border-radius: var(--radius-md); overflow:hidden; }
.pd-gallery-main .ph{ position:absolute; inset:0; }
.pd-gallery-thumbs{ display:grid; grid-template-columns: repeat(4,1fr); gap:.8rem; margin-top:.8rem; }
.pd-gallery-thumbs .ph{ aspect-ratio:1; border-radius: var(--radius-sm); cursor:pointer; border:2px solid transparent; }
.pd-gallery-thumbs .ph.is-active{ border-color: var(--brand-red); }
.pd-code{ font-size:.85rem; color: var(--taupe); font-weight:600; }
.pd-title{ font-family: var(--font-display); font-weight:400; font-size: clamp(2rem,3.4vw,2.8rem); margin-top:.5rem; }
.pd-collection{ margin-top:.6rem; font-size:.95rem; }
.pd-collection a{ color: var(--brand-red); font-weight:600; }
.pd-desc{ margin-top:1.4rem; color: var(--charcoal); line-height:1.75; max-width:52ch; }
.pd-specs{ margin-top:1.8rem; border-top:1px solid var(--line); }
.pd-spec-row{ display:flex; justify-content:space-between; padding:.9rem 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.pd-spec-row span:first-child{ color: var(--taupe); }
.pd-spec-row span:last-child{ font-weight:600; }
.pd-swatches{ display:flex; gap:.7rem; margin-top:1.6rem; }
.pd-swatches .swatch-chip{ width:38px; height:38px; border-radius:50%; cursor:pointer; border:2px solid transparent; }
.pd-swatches .swatch-chip.is-active{ border-color: var(--near-black); }
.pd-actions{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }
.related-title{ font-family: var(--font-display); font-weight:400; font-size:1.8rem; margin-bottom:1.6rem; }
.related-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1.4rem; }

/* =============================== COLLECTION PAGE =============================== */
.coll-story{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.coll-gallery{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
.coll-gallery .ph{ aspect-ratio: 3/4; border-radius: var(--radius-md); }
.coll-gallery .ph:nth-child(2){ margin-top:2.4rem; }
.coll-finish-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap:1rem; }
.coll-finish-grid .swatch{ align-items:center; text-align:center; }

/* =============================== LOUVERS PAGE =============================== */
.louver-styles{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; }
.louver-style-card{ position:relative; aspect-ratio: 3/4; border-radius: var(--radius-md); overflow:hidden; color:#fff; }
.louver-style-card .ph{ position:absolute; inset:0; }
.louver-style-card::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 50%, rgba(20,16,14,.85)); }
.louver-style-card-body{ position:absolute; left:1.3rem; bottom:1.3rem; z-index:2; }
.louver-style-card-body h4{ font-family: var(--font-display); font-weight:400; font-size:1.3rem; }

/* =============================== DEALER LOCATOR =============================== */
.locator-layout{ display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,4vw,3rem); }
.locator-panel{ border:1px solid var(--line); border-radius: var(--radius-md); padding: 1.8rem; height:fit-content; }
.locator-panel .field{ margin-bottom:1.2rem; }
.locator-panel label{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.02em; color: var(--taupe); margin-bottom:.5rem; }
.locator-panel input, .locator-panel select{ width:100%; border:1px solid var(--line); background: var(--warm-white); padding:.8rem 1rem; border-radius: var(--radius-sm); font-size:.92rem; }
.dealer-map-placeholder{ position:relative; border-radius: var(--radius-md); overflow:hidden; min-height:340px; background: var(--ivory); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.dealer-map-placeholder svg{ width:64px; height:64px; opacity:.35; }
.dealer-results{ display:flex; flex-direction:column; gap:1rem; margin-top:1.4rem; }
.dealer-result-card{ display:flex; justify-content:space-between; gap:1rem; padding:1.2rem 1.4rem; border:1px solid var(--line); border-radius: var(--radius-sm); }
.dealer-result-card h4{ font-family: var(--font-display); font-weight:400; font-size:1.15rem; }
.dealer-result-card p{ font-size:.86rem; color: var(--taupe); margin-top:.35rem; }
.dealer-result-card .btn{ align-self:center; }

/* =============================== CONTACT PAGE =============================== */
.contact-layout{ display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,5vw,4rem); }
.contact-info-block{ display:flex; gap:1rem; padding-block:1.4rem; border-top:1px solid var(--line); }
.contact-info-block:last-child{ border-bottom:1px solid var(--line); }
.contact-info-block h5{ font-size:.85rem; font-weight:700; }
.contact-info-block p{ font-size:.92rem; color: var(--taupe); margin-top:.3rem; }
.contact-form{ display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; }
.contact-form .full{ grid-column: 1/-1; }
.contact-form label{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.02em; color: var(--taupe); margin-bottom:.5rem; }
.contact-form input, .contact-form textarea{ width:100%; border:none; border-bottom:1px solid var(--line); background:transparent; padding:.7rem 0; font-size:1rem; }
.contact-form input:focus, .contact-form textarea:focus{ border-color: var(--brand-red); }
.form-status{ margin-top:1rem; font-size:.9rem; color: var(--brand-red); font-weight:600; }

/* =============================== ABOUT PAGE =============================== */
.about-timeline{ display:flex; flex-direction:column; }
.timeline-row{ display:grid; grid-template-columns: 120px 1fr; gap:2rem; padding-block:2rem; border-top:1px solid var(--line); }
.timeline-row:last-child{ border-bottom:1px solid var(--line); }
.timeline-row .yr{ font-family: var(--font-display); font-size:1.5rem; color: var(--brand-red); }
.timeline-row h4{ font-family: var(--font-display); font-weight:400; font-size:1.3rem; }
.timeline-row p{ margin-top:.5rem; color: var(--charcoal); max-width:56ch; line-height:1.7; }

/* =============================== FAQ =============================== */
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.5rem 0; background:none; border:none; text-align:left; }
.faq-q h4{ font-family: var(--font-display); font-weight:400; font-size:1.2rem; }
.faq-q .plus{ position:relative; width:20px; height:20px; flex-shrink:0; }
.faq-q .plus::before, .faq-q .plus::after{ content:''; position:absolute; background: var(--near-black); }
.faq-q .plus::before{ top:9px; left:0; width:20px; height:2px; }
.faq-q .plus::after{ left:9px; top:0; width:2px; height:20px; transition: transform .3s var(--ease); }
.faq-item.is-open .plus::after{ transform: rotate(90deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .45s var(--ease); }
.faq-a p{ padding-bottom:1.6rem; color: var(--charcoal); line-height:1.7; max-width:60ch; }

/* =============================== GLOBAL NETWORK (dealer map) =============================== */
.network-layout{ display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,4vw,3.5rem); align-items:center; }
.network-map{
  position:relative; aspect-ratio: 4/3.1; border-radius: var(--radius-md); overflow:hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(163,30,34,.08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(163,30,34,.06), transparent 45%),
    var(--near-black);
}
.network-map::before{
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(248,245,239,.16) 1px, transparent 1px);
  background-size: 16px 16px;
}
.network-pin{
  position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; background: var(--brand-red);
  border:2px solid var(--warm-white);
  cursor:pointer; z-index:2;
}
.network-pin::after{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:1.5px solid var(--brand-red); opacity:.6;
  animation: pinPulse 2.4s ease-out infinite;
}
.network-pin:nth-child(3n)::after{ animation-delay:.5s; }
.network-pin:nth-child(3n+1)::after{ animation-delay:1s; }
@keyframes pinPulse{ 0%{ transform:scale(.6); opacity:.7; } 100%{ transform:scale(1.9); opacity:0; } }
.network-tip{
  position:absolute; bottom: calc(100% + 10px); left:50%; transform: translateX(-50%) translateY(6px);
  background: var(--warm-white); color: var(--near-black);
  padding:.55rem .9rem; border-radius: var(--radius-sm); white-space:nowrap;
  font-size:.78rem; font-weight:700; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events:none;
}
.network-tip::after{ content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color: var(--warm-white); }
.network-pin:hover .network-tip, .network-pin.is-open .network-tip{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.network-legend{ display:flex; align-items:center; gap:.6rem; margin-top:1rem; font-size:.8rem; color: var(--stone); }
.network-legend .dot{ width:9px; height:9px; border-radius:50%; background: var(--brand-red); display:inline-block; }

/* =============================== SHOP THE SURFACE (hotspot → catalogue reveal) =============================== */
.surface-stage{ position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 16/10; }
.surface-stage .ph{ position:absolute; inset:0; }
.hotspot{
  position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:50%; background: rgba(248,245,239,.92); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:3;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.5);
}
.hotspot::before{ content:''; width:8px; height:8px; border-radius:50%; background: var(--brand-red); }
.hotspot::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid rgba(248,245,239,.85); animation: pinPulse 2.4s ease-out infinite; }
.hotspot-tip{
  position:absolute; bottom: calc(100% + 14px); left:50%; transform: translateX(-50%) translateY(8px);
  width:180px; background: var(--warm-white); border-radius: var(--radius-md); overflow:hidden;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none; z-index:4;
}
.hotspot-tip .ph{ position:relative; aspect-ratio: 4/3; }
.hotspot-tip-body{ padding:.8rem .9rem; }
.hotspot-tip-body .brand{ font-size:.68rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: var(--brand-red); }
.hotspot-tip-body h4{ font-family: var(--font-display); font-weight:400; font-size:1rem; margin-top:.2rem; color: var(--near-black); }
.hotspot:hover .hotspot-tip, .hotspot.is-open .hotspot-tip{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); pointer-events:auto; }
.hotspot[data-align="right"] .hotspot-tip{ left:auto; right:-10px; transform: translateY(8px); }
.hotspot[data-align="right"]:hover .hotspot-tip, .hotspot[data-align="right"].is-open .hotspot-tip{ transform: translateY(0); }

@media (max-width: 860px){
  .network-layout{ grid-template-columns: 1fr; }
}

/* =============================== CERTIFICATIONS =============================== */
.cert-grid{ display:grid; grid-template-columns: repeat(8,1fr); gap:1.2rem; align-items:center; }
.cert-chip{ aspect-ratio:1; border:1px solid var(--line); border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center; padding:1rem; background: var(--surface, var(--warm-white)); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.cert-chip:hover{ border-color: var(--brand-red); transform: translateY(-3px); }
.cert-chip img{ width:100%; height:100%; object-fit:contain; }
.cert-strip-label{ text-align:center; margin-top:1.6rem; color: var(--taupe); font-size:.85rem; }

/* brand logo badge shown on collection cards / collection hero */
.brand-badge{
  width:56px; height:56px; border-radius:50%; overflow:hidden;
  border:2px solid rgba(255,255,255,.85); background:#fff;
  box-shadow: 0 8px 20px -8px rgba(20,16,14,.5);
  flex-shrink:0;
}
.brand-badge img{ width:100%; height:100%; object-fit:cover; }
.collection-card-badge{ position:absolute; top:1.2rem; right:1.2rem; z-index:3; }
.page-hero-badge{ display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; }
.page-hero-badge .brand-badge{ width:64px; height:64px; }

@media (max-width: 860px){
  .cert-grid{ grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 620px){
  .cert-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 1080px){
  .range-grid{ grid-template-columns: repeat(4,1fr); }
  .rc-1{ grid-column: span 4; grid-row: span 4; }
  .rc-2{ grid-column: span 2; grid-row: span 3; }
  .rc-3{ grid-column: span 2; grid-row: span 3; }
  .rc-4{ grid-column: span 2; grid-row: span 3; }
  .rc-5{ grid-column: span 2; grid-row: span 3; }
  .collections-grid{ grid-template-columns: repeat(2,1fr); }
  .products-grid{ grid-template-columns: repeat(2,1fr); }
  .related-grid{ grid-template-columns: repeat(2,1fr); }
  .stats-grid{ grid-template-columns: repeat(2,1fr); row-gap:2.5rem; }
  .footer-top{ grid-template-columns: 1fr 1fr 1fr; row-gap:2.4rem; }
}

@media (max-width: 860px){
  .main-nav{ display:none; }
  .hamburger{ display:flex; }
  .intro, .material-lab, .quality-layout, .viz-layout, .catalogue-layout, .coll-story, .locator-layout, .contact-layout{ grid-template-columns: 1fr; }
  .intro-media .ph-tag{ position:static; margin-top:1rem; max-width:none; }
  .triptych{ grid-template-columns: 1fr; }
  .triptych > div{ border-left:none; border-top:1px solid var(--line-soft); padding-left:0; padding-block: 1.8rem; }
  .triptych > div:first-child{ border-top:none; }
  .insights-grid{ grid-template-columns: 1fr; }
  .pd-layout{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1/-1; }
}

@media (max-width: 620px){
  .range-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 120px; }
  .rc-1,.rc-2,.rc-3,.rc-4,.rc-5{ grid-column: span 2; grid-row: span 3; }
  .collections-grid{ grid-template-columns: 1fr; }
  .products-grid{ grid-template-columns: 1fr; }
  .related-grid{ grid-template-columns: 1fr 1fr; }
  .stats-grid{ grid-template-columns: 1fr 1fr; }
  .footer-top{ grid-template-columns: 1fr; }
  .contact-form{ grid-template-columns: 1fr; }
  .app-card{ width: 82vw; }
  .coll-gallery{ grid-template-columns: 1fr 1fr; }
  .coll-finish-grid{ grid-template-columns: repeat(3,1fr); }
  .locator-panel{ order:2; }
}