/* ============================================================
   MARBLE SUPPLIER UK — Global Stylesheet
   ============================================================
   1.  Custom Properties
   2.  Reset & Base
   3.  Typography
   4.  Layout Utilities
   5.  Buttons
   6.  Header & Navigation
   7.  Hero Section
   8.  Trust Bar
   9.  Intro Section
   10. Stone Cards (Home)
   11. Sample CTA Section
   12. Stone Types Page
   13. Blog Page
   14. Contact Page
   15. About Page
   16. Footer
   17. Utility / Misc
   18. Animations
   19. Media Queries
   ============================================================ */

/* ============================================================
   1. CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Colour Palette */
  --cream:         #F4F1EA;
  --cream-dark:    #EAE7DF;
  --grey-light:    #E0DDD6;
  --grey-mid:      #9B978F;
  --charcoal:      #1E1D1A;
  --charcoal-soft: #2C2B27;
  --gold:          #B8913A;
  --gold-hover:    #A07E2E;
  --white:         #FFFFFF;
  --text:          #3A3835;
  --text-light:    #6B6864;

  /* Typography */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, Helvetica, sans-serif;

  /* Layout */
  --max-width:     1200px;
  --nav-height:    76px;
  --section-y:     96px;
  --section-x:     24px;

  /* Transitions */
  --t:      0.25s ease;
  --t-slow: 0.45s ease;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background-color: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--charcoal);
  line-height: 1.15;
  font-weight: 600;
}

h1 { font-size: clamp(2.5rem,  5vw, 4rem);   letter-spacing: -0.01em; }
h2 { font-size: clamp(1.875rem, 3.5vw, 2.875rem); }
h3 { font-size: clamp(1.25rem,  2vw,  1.625rem); }
h4 { font-size: 1.0625rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--text-light);
}

/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--section-x);
}

.section {
  padding: var(--section-y) var(--section-x);
}

.section--grey  { background-color: #bfb9af; }
.section--charcoal { background-color: #2a2a2a; }
.section--charcoal .section__title    { color: #ffffff; }
.section--charcoal .section__subtitle { color: #a0a0a0; }
.section--charcoal .about-value {
  background-color: #333333;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid var(--gold);
}
.section--charcoal .about-value__title { color: #ffffff; }
.section--charcoal .about-value__text  { color: #a0a0a0; }
.section--dark  { background-color: var(--charcoal); color: var(--white); }
.section--white { background-color: var(--white); }

.section__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 60px;
}

.section__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.section__title   { margin-bottom: 16px; }
.section__subtitle {
  font-size: 1.0625rem;
  color: var(--text-light);
  line-height: 1.7;
}

.text-center  { text-align: center; }
.text-gold    { color: var(--gold); }
.text-white   { color: var(--white); }
.text-charcoal { color: var(--charcoal); }

.divider {
  width: 44px;
  height: 2px;
  background-color: var(--gold);
  margin: 20px 0 28px;
}
.divider--center { margin-left: auto; margin-right: auto; }

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t);
  white-space: nowrap;
  line-height: 1;
}

.btn--primary {
  background-color: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}
.btn--primary:hover {
  background-color: var(--gold-hover);
  border-color: var(--gold-hover);
}

.btn--secondary {
  background-color: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}
.btn--secondary:hover {
  background-color: var(--charcoal);
  color: var(--white);
}

.btn--outline-white {
  background-color: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.55);
}
.btn--outline-white:hover {
  background-color: var(--white);
  color: var(--charcoal);
  border-color: var(--white);
}

.btn--lg { padding: 17px 44px; font-size: 0.875rem; }

/* ============================================================
   6. HEADER & NAVIGATION
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  transition: background-color var(--t), box-shadow var(--t);
  overflow: visible;
}

.site-header--transparent { background-color: transparent; }

.site-header--solid,
.site-header.scrolled {
  background-color: var(--white);
  box-shadow: 0 1px 0 var(--grey-light);
}

.site-header.scrolled {
  height: 70px;
}

.site-header.scrolled .site-header__inner {
  padding: 0 24px;
}

.page-stone-types .site-header__inner {
  padding: 12px 24px;
}


.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.site-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-header__logo-img {
  width: 280px;
  height: auto;
  display: block;
  transition: filter var(--t);
}

/* Logo white on transparent dark header */
.site-header--transparent .site-header__logo-img {
  filter: brightness(0) invert(1);
}

/* Logo black on scrolled light header */
.site-header.scrolled .site-header__logo-img {
  filter: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav__link {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--charcoal);
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.site-nav__link:hover,
.site-nav__link.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.site-header--transparent .site-nav__link { color: rgba(255,255,255,0.82); }
.site-header--transparent .site-nav__link:hover,
.site-header--transparent .site-nav__link.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.site-header__cta { margin-left: 8px; }

/* Mobile Menu Toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--charcoal);
}
.site-header--transparent .menu-toggle { color: var(--white); }

.menu-toggle__bar {
  width: 24px;
  height: 1.5px;
  background-color: currentColor;
  display: block;
  transition: transform var(--t), opacity var(--t);
}
.menu-toggle--open .menu-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle--open .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle--open .menu-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile Nav Drawer */
.mobile-nav {
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0;
  background-color: var(--white);
  padding: 16px 24px 32px;
  border-top: 1px solid var(--grey-light);
  z-index: 9998;
  /* Use visibility+opacity so the drawer is truly off-screen and invisible
     when closed — prevents any rendering bleed above the fixed header */
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  /* Delay visibility/opacity changes so they sync with the slide transition */
  transition: transform var(--t-slow),
              opacity  var(--t-slow),
              visibility 0s var(--t-slow);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}
.mobile-nav.is-open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  /* No delay when opening so it appears immediately as it slides in */
  transition: transform var(--t-slow),
              opacity  var(--t-slow),
              visibility 0s;
}

.mobile-nav__link {
  display: block;
  padding: 15px 16px;
  font-size: 1.0625rem;
  color: var(--charcoal);
  border-bottom: 1px solid var(--grey-light);
}
.mobile-nav__link:last-of-type { border-bottom: none; }
.mobile-nav__cta { margin-top: 20px; }
.mobile-nav__cta .btn { width: 100%; justify-content: center; }

/* ============================================================
   7. HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

/* CSS marble texture background */
.hero__bg {
  position: absolute;
  inset: 0;
  background-color: #c0bbb2;
  background-image:
    /* Primary veining lines */
    repeating-linear-gradient(
      109deg,
      transparent,
      transparent 94px,
      rgba(255,252,248,0.09) 94px,
      rgba(255,252,248,0.09) 96px,
      transparent 96px,
      transparent 192px
    ),
    repeating-linear-gradient(
      -20deg,
      transparent,
      transparent 138px,
      rgba(210,204,193,0.12) 138px,
      rgba(210,204,193,0.12) 141px,
      transparent 141px,
      transparent 280px
    ),
    repeating-linear-gradient(
      76deg,
      transparent,
      transparent 195px,
      rgba(195,189,178,0.07) 195px,
      rgba(195,189,178,0.07) 199px,
      transparent 199px,
      transparent 392px
    ),
    /* Cloudy marble variation */
    radial-gradient(ellipse 65% 45% at 22% 38%, rgba(238,234,225,0.28) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 75% 65%, rgba(205,200,190,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 55% 20%, rgba(220,216,207,0.15) 0%, transparent 55%),
    /* Base marble tone */
    linear-gradient(
      148deg,
      #ccc8bf 0%,
      #dddad2 16%,
      #c5c1b8 32%,
      #d9d5cc 48%,
      #c2beb5 64%,
      #d6d2c9 80%,
      #c8c4bb 100%
    );
}

/* Silk canvas animation layer */
.hero__silk-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
}

/* When canvas is present, fade out the static CSS background */
.hero:has(.hero__silk-canvas) .hero__bg {
  opacity: 0;
}

/* Branding domain — logo image in hero content, first element */
.hero__domain {
  display: block;
  width: 520px;
  height: auto;
  margin-bottom: -60px;
  filter: brightness(0) saturate(100%) invert(55%) sepia(70%) saturate(500%) hue-rotate(5deg) brightness(88%);
  animation: fadeUp 0.8s ease-out 0.0s both;
}

/* Dark overlay for text legibility */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    160deg,
    rgba(18,16,13,0.80) 0%,
    rgba(24,21,17,0.74) 50%,
    rgba(16,14,11,0.82) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding: 0 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hero__eyebrow {
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 36px;
  animation: fadeUp 0.8s ease-out 0.2s both;
}

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.08;
  margin-top: -30px;
  margin-bottom: 16px;
  letter-spacing: -0.015em;
  animation: fadeUp 0.8s ease-out 0.4s both;
}

.hero__subtitle {
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  color: rgba(255,255,255,0.78);
  line-height: 1.72;
  margin-bottom: 56px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  animation: fadeUp 0.8s ease-out 0.7s both;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-bottom: 44px;
  animation: fadeUp 0.8s ease-out 1.0s both;
}

.hero__phone {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  animation: fadeUp 0.8s ease-out 1.2s both;
}
.hero__phone a {
  color: rgba(255,255,255,0.8);
  font-weight: 500;
  transition: color var(--t);
}
.hero__phone a:hover { color: var(--gold); }

.hero__scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0.45;
}
.hero__scroll-hint span {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
}
.hero__scroll-line {
  width: 1px;
  height: 44px;
  background: var(--white);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); transform-origin: top; }
  50%       { opacity: 1;   transform: scaleY(0.65); transform-origin: top; }
}

/* ============================================================
   8. TRUST BAR
   ============================================================ */
.trust-bar {
  background-color: #2a2a2a;
  border-bottom: none;
  position: relative;
}
.trust-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, white 15%, white 85%, transparent);
}
.trust-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 1px;
  background: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
}

.trust-bar__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: var(--max-width);
  margin: 0 auto;
}

.trust-bar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 17px 36px;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  position: relative;
  transition: color var(--t);
}
.trust-bar__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background-color: var(--white);
  opacity: 0.35;
}
.trust-bar__item:hover { color: #ffffff; }

.trust-bar__icon {
  color: var(--gold);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* ============================================================
   9. INTRO SECTION
   ============================================================ */
.intro-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
}

.intro-section__text .section__eyebrow { text-align: left; }
.intro-section__text h2  { text-align: left; margin-bottom: 20px; }
.intro-section__text p   { font-size: 1.0625rem; line-height: 1.82; }

.intro-section__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background-color: var(--grey-light);
  border: 1px solid var(--grey-light);
}

.intro-section__stat {
  background-color: var(--cream);
  padding: 36px 30px;
}

.stat-number {
  font-family: var(--font-serif);
  font-size: 2.625rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-number span { font-size: 1.5rem; }

.stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grey-mid);
}

/* ============================================================
   10. STONE CARDS (HOME FEATURED SECTION)
   ============================================================ */
.stone-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.stone-card {
  position: relative;
  background-color: #333333;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.stone-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 56px rgba(0,0,0,0.45);
}

.stone-card__visual {
  height: 230px;
  position: relative;
  overflow: hidden;
}

/* Marble texture card */
.stone-card__visual--marble {
  background:
    repeating-linear-gradient(
      108deg,
      transparent, transparent 48px,
      rgba(175,170,162,0.28) 48px, rgba(175,170,162,0.28) 50px,
      transparent 50px, transparent 100px
    ),
    repeating-linear-gradient(
      -16deg,
      transparent, transparent 76px,
      rgba(155,150,142,0.18) 76px, rgba(155,150,142,0.18) 78px,
      transparent 78px, transparent 154px
    ),
    linear-gradient(155deg, #eeebe4 0%, #f5f2eb 25%, #e5e1d8 55%, #f0ede5 80%, #dedad1 100%);
}

/* Idocrase texture card */
.stone-card__visual--idocrase {
  background:
    repeating-linear-gradient(
      125deg,
      transparent, transparent 38px,
      rgba(90,110,55,0.22) 38px, rgba(90,110,55,0.22) 41px,
      transparent 41px, transparent 80px
    ),
    radial-gradient(ellipse at 40% 35%, rgba(130,155,80,0.3) 0%, transparent 55%),
    linear-gradient(145deg, #485732 0%, #5c7040 25%, #3e4f2a 52%, #667952 75%, #4d6136 100%);
}

/* Gemstone texture card */
.stone-card__visual--gemstone {
  background:
    radial-gradient(ellipse at 38% 38%, rgba(140,90,200,0.32) 0%, transparent 52%),
    radial-gradient(ellipse at 72% 68%, rgba(70,110,200,0.26) 0%, transparent 46%),
    radial-gradient(ellipse at 55% 80%, rgba(180,50,120,0.18) 0%, transparent 40%),
    linear-gradient(138deg, #1c1430 0%, #2a1d48 28%, #181026 55%, #331f52 78%, #1e1534 100%);
}

.stone-card__body { padding: 26px 28px 32px; }

.stone-card__tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.stone-card__title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 11px;
  line-height: 1.2;
}

.stone-card__text {
  font-size: 0.9375rem;
  color: #a0a0a0;
  line-height: 1.66;
  margin-bottom: 22px;
}

.stone-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.55);
  padding: 10px 20px;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.stone-card__link:hover {
  background-color: rgba(255,255,255,0.08);
  border-color: var(--white);
}

/* ============================================================
   11. SAMPLE CTA SECTION
   ============================================================ */
.sample-cta {
  background: linear-gradient(145deg, var(--charcoal) 0%, var(--charcoal-soft) 100%);
  text-align: center;
  padding: var(--section-y) var(--section-x);
  position: relative;
  overflow: hidden;
}
.sample-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(184,145,58,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 50%, rgba(184,145,58,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.sample-cta > * { position: relative; z-index: 1; }
.sample-cta h2  { color: var(--white); margin-bottom: 16px; }
.sample-cta p   { color: rgba(255,255,255,0.68); font-size: 1.0625rem; max-width: 560px; margin: 0 auto 40px; line-height: 1.72; }

.sample-cta__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   12. STONE TYPES PAGE
   ============================================================ */
.page-hero {
  padding: calc(var(--nav-height) + 76px) var(--section-x) 76px;
  text-align: center;
  background-color: var(--charcoal);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 50%, rgba(30,28,22,0.5) 0%, transparent 70%),
    linear-gradient(160deg, #1e1d1a 0%, #2a2925 40%, #1a1916 100%);
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1   { color: var(--white); margin-bottom: 16px; }
.page-hero p    { color: rgba(255,255,255,0.68); max-width: 580px; margin: 0 auto; font-size: 1.0625rem; }

#stone-cat-nav {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

#stone-cat-nav .cat-nav__link {
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  min-height: 52px !important;
}

.stone-section { padding: var(--section-y) var(--section-x); }
.stone-section--grey    { background-color: var(--cream-dark); }
.stone-section--white   { background-color: var(--white); }
.stone-section--dark {
  background-color: var(--charcoal);
}
.stone-section--dark h2,
.stone-section--dark h3,
.stone-section--dark h4,
.stone-section--dark p  { color: var(--white); }
.stone-section--dark .section__subtitle { color: rgba(255,255,255,0.68); }
.stone-section--dark .section__eyebrow  { color: var(--gold); }

.stone-section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Variety grid (Carrara / Calacatta / Statuario) */
.variety-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 52px;
}

.variety-card {
  background-color: var(--white);
  border: 1px solid var(--grey-light);
  overflow: hidden;
  transition: box-shadow var(--t);
}
.variety-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.08); }

.variety-card__swatch { height: 160px; position: relative; overflow: hidden; }

/* ── MARBLE SWATCHES ──────────────────────────────────────── */

/* Imperial White: warm ivory, lustrous */
.variety-card__swatch--imperial-white {
  background: linear-gradient(148deg, #f2ece0 0%, #e8dece 35%, #ede5d5 65%, #e0d6c2 100%);
}
.variety-card__swatch--imperial-white::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(115deg,
      transparent, transparent 72px,
      rgba(180,165,140,0.18) 72px, rgba(180,165,140,0.18) 74px,
      transparent 74px, transparent 144px),
    repeating-linear-gradient(-18deg,
      transparent, transparent 100px,
      rgba(165,150,125,0.12) 100px, rgba(165,150,125,0.12) 102px,
      transparent 102px, transparent 200px);
}

/* Turang White: clean white, subtle movement */
.variety-card__swatch--turang-white {
  background: linear-gradient(148deg, #f6f5f2 0%, #efede8 30%, #f4f2ee 65%, #eae7e1 100%);
}
.variety-card__swatch--turang-white::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(108deg,
      transparent, transparent 88px,
      rgba(155,150,142,0.14) 88px, rgba(155,150,142,0.14) 90px,
      transparent 90px, transparent 176px),
    repeating-linear-gradient(-25deg,
      transparent, transparent 120px,
      rgba(145,140,132,0.10) 120px, rgba(145,140,132,0.10) 122px,
      transparent 122px, transparent 242px);
}

/* Turang White Extra: slightly denser, deeper ivory */
.variety-card__swatch--turang-white-extra {
  background: linear-gradient(148deg, #eae6de 0%, #e0dbd0 30%, #e6e1d8 65%, #d8d3c8 100%);
}
.variety-card__swatch--turang-white-extra::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(112deg,
      transparent, transparent 75px,
      rgba(148,142,130,0.18) 75px, rgba(148,142,130,0.18) 77px,
      transparent 77px, transparent 150px),
    repeating-linear-gradient(-20deg,
      transparent, transparent 105px,
      rgba(138,132,120,0.13) 105px, rgba(138,132,120,0.13) 107px,
      transparent 107px, transparent 212px);
}

/* Dior: white with grey pattern, high lustre */
.variety-card__swatch--dior {
  background: linear-gradient(148deg, #f3f1ee 0%, #eceae5 28%, #f1eeea 62%, #e4e0da 100%);
}
.variety-card__swatch--dior::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(105deg,
      transparent, transparent 62px,
      rgba(125,122,115,0.24) 62px, rgba(125,122,115,0.24) 65px,
      transparent 65px, transparent 126px),
    linear-gradient(-22deg,
      transparent 22%, rgba(110,108,102,0.20) 26%, rgba(120,118,112,0.14) 28%, transparent 32%,
      transparent 55%, rgba(105,103,97,0.18) 58%, transparent 62%);
}

/* Dior Extra: bold dramatic grey movement on white */
.variety-card__swatch--dior-extra {
  background: linear-gradient(148deg, #edebe7 0%, #e3e0da 28%, #eae7e2 62%, #d8d4cc 100%);
}
.variety-card__swatch--dior-extra::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(108deg,
      transparent, transparent 55px,
      rgba(105,102,95,0.30) 55px, rgba(105,102,95,0.30) 59px,
      transparent 59px, transparent 112px),
    linear-gradient(-18deg,
      transparent 15%, rgba(95,92,86,0.28) 20%, rgba(108,105,98,0.20) 24%, transparent 30%,
      transparent 48%, rgba(90,88,82,0.24) 52%, rgba(100,98,91,0.16) 56%, transparent 62%),
    linear-gradient(72deg,
      transparent 35%, rgba(98,95,88,0.14) 38%, transparent 42%);
}

/* Turang Grey: refined grey, artistic veining, high lustre */
.variety-card__swatch--turang-grey {
  background: linear-gradient(148deg, #a8a49e 0%, #9e9a94 28%, #a4a09a 62%, #96928c 100%);
}
.variety-card__swatch--turang-grey::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(110deg,
      transparent, transparent 60px,
      rgba(230,225,218,0.22) 60px, rgba(230,225,218,0.22) 63px,
      transparent 63px, transparent 122px),
    linear-gradient(-25deg,
      transparent 30%, rgba(220,215,208,0.20) 34%, transparent 38%,
      transparent 65%, rgba(215,210,203,0.18) 68%, transparent 72%);
}

/* Grey Spider: deep grey, bold spiderweb veining */
.variety-card__swatch--grey-spider {
  background: linear-gradient(148deg, #6e6b66 0%, #646260 28%, #6a6864 62%, #5e5c58 100%);
}
.variety-card__swatch--grey-spider::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(102deg,
      transparent, transparent 40px,
      rgba(240,235,228,0.28) 40px, rgba(240,235,228,0.28) 43px,
      transparent 43px, transparent 82px),
    repeating-linear-gradient(-38deg,
      transparent, transparent 55px,
      rgba(235,230,222,0.22) 55px, rgba(235,230,222,0.22) 57px,
      transparent 57px, transparent 112px),
    linear-gradient(68deg,
      transparent 18%, rgba(245,240,232,0.20) 21%, transparent 24%,
      transparent 50%, rgba(238,232,224,0.18) 53%, transparent 57%);
}

/* Travertine: warm tan, banded geological texture */
.variety-card__swatch--travertine {
  background: linear-gradient(148deg, #cbb080 0%, #c0a472 28%, #c9ae80 62%, #b89e6e 100%);
}
.variety-card__swatch--travertine::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg,
      rgba(105,80,50,0.12) 0px, rgba(105,80,50,0.12) 2px,
      transparent 2px, transparent 18px,
      rgba(85,65,38,0.08) 18px, rgba(85,65,38,0.08) 20px,
      transparent 20px, transparent 36px),
    repeating-linear-gradient(178deg,
      transparent, transparent 14px,
      rgba(100,75,45,0.06) 14px, rgba(100,75,45,0.06) 15px,
      transparent 15px, transparent 28px);
}

/* Olive Brown: chocolate brown, white & gold lines */
.variety-card__swatch--olive-brown {
  background: linear-gradient(148deg, #5e3d2c 0%, #543428 28%, #5a3a28 62%, #4e3020 100%);
}
.variety-card__swatch--olive-brown::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(115deg,
      transparent, transparent 52px,
      rgba(220,200,160,0.32) 52px, rgba(220,200,160,0.32) 55px,
      transparent 55px, transparent 106px),
    linear-gradient(-30deg,
      transparent 20%, rgba(240,220,180,0.28) 24%, rgba(200,170,120,0.20) 28%, transparent 32%),
    repeating-linear-gradient(88deg,
      transparent, transparent 85px,
      rgba(255,255,255,0.12) 85px, rgba(255,255,255,0.12) 87px,
      transparent 87px, transparent 172px);
}

/* Creama: clean beige */
.variety-card__swatch--creama {
  background: linear-gradient(148deg, #dfd0b4 0%, #d5c5a5 28%, #dcceb0 62%, #cfc0a0 100%);
}
.variety-card__swatch--creama::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(106deg,
      transparent, transparent 90px,
      rgba(160,140,108,0.14) 90px, rgba(160,140,108,0.14) 92px,
      transparent 92px, transparent 182px),
    repeating-linear-gradient(-22deg,
      transparent, transparent 115px,
      rgba(150,130,98,0.10) 115px, rgba(150,130,98,0.10) 117px,
      transparent 117px, transparent 232px);
}

/* Creama Mo: beige with distinct character */
.variety-card__swatch--creama-mo {
  background: linear-gradient(148deg, #d4bf9c 0%, #c8b08a 28%, #d0ba96 62%, #c2aa82 100%);
}
.variety-card__swatch--creama-mo::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(112deg,
      transparent, transparent 70px,
      rgba(145,120,88,0.20) 70px, rgba(145,120,88,0.20) 73px,
      transparent 73px, transparent 142px),
    linear-gradient(-28deg,
      transparent 25%, rgba(135,110,80,0.18) 29%, rgba(150,125,92,0.12) 32%, transparent 36%,
      transparent 60%, rgba(130,108,78,0.15) 63%, transparent 67%);
}

/* Indus Gold: warm golden, rich veining */
.variety-card__swatch--indus-gold {
  background: linear-gradient(148deg, #c8962a 0%, #bc8a22 28%, #c49228 62%, #b2801c 100%);
}
.variety-card__swatch--indus-gold::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(110deg,
      transparent, transparent 64px,
      rgba(80,50,10,0.28) 64px, rgba(80,50,10,0.28) 67px,
      transparent 67px, transparent 130px),
    linear-gradient(-20deg,
      transparent 22%, rgba(255,220,140,0.30) 26%, rgba(220,180,90,0.22) 30%, transparent 35%,
      transparent 58%, rgba(240,200,120,0.24) 62%, transparent 67%),
    repeating-linear-gradient(75deg,
      transparent, transparent 95px,
      rgba(60,38,8,0.18) 95px, rgba(60,38,8,0.18) 97px,
      transparent 97px, transparent 192px);
}

/* Black & Gold: deep black, bold gold veining */
.variety-card__swatch--black-and-gold {
  background: linear-gradient(148deg, #1a1510 0%, #15120e 28%, #1c1812 62%, #110e0a 100%);
}
.variety-card__swatch--black-and-gold::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(108deg,
      transparent, transparent 50px,
      rgba(200,158,50,0.38) 50px, rgba(200,158,50,0.38) 53px,
      transparent 53px, transparent 102px),
    linear-gradient(-25deg,
      transparent 18%, rgba(184,145,50,0.45) 22%, rgba(210,170,70,0.32) 26%, transparent 30%),
    repeating-linear-gradient(-38deg,
      transparent, transparent 75px,
      rgba(180,140,45,0.25) 75px, rgba(180,140,45,0.25) 77px,
      transparent 77px, transparent 152px);
}

/* ── ONYX SWATCHES ────────────────────────────────────────── */

/* Multi Green Onyx: rich green, bronze veins, white hints */
.variety-card__swatch--multi-green-onyx {
  background: linear-gradient(148deg, #2c5030 0%, #244428 28%, #2e5232 62%, #1e3c24 100%);
}
.variety-card__swatch--multi-green-onyx::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(112deg,
      transparent, transparent 58px,
      rgba(180,130,60,0.32) 58px, rgba(180,130,60,0.32) 61px,
      transparent 61px, transparent 118px),
    repeating-linear-gradient(-28deg,
      transparent, transparent 80px,
      rgba(200,150,70,0.22) 80px, rgba(200,150,70,0.22) 82px,
      transparent 82px, transparent 162px),
    linear-gradient(60deg,
      transparent 28%, rgba(255,255,255,0.14) 31%, transparent 34%,
      transparent 68%, rgba(255,255,255,0.10) 70%, transparent 73%);
}

/* Dark Green Onyx: deep lush green, dramatic patterning */
.variety-card__swatch--dark-green-onyx {
  background: linear-gradient(148deg, #1a3c20 0%, #143018 28%, #1c4022 62%, #102a14 100%);
}
.variety-card__swatch--dark-green-onyx::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(108deg,
      transparent, transparent 48px,
      rgba(80,160,80,0.22) 48px, rgba(80,160,80,0.22) 51px,
      transparent 51px, transparent 98px),
    linear-gradient(-22deg,
      transparent 20%, rgba(60,140,60,0.20) 24%, rgba(90,170,90,0.14) 28%, transparent 33%,
      transparent 58%, rgba(50,130,55,0.18) 62%, transparent 67%),
    repeating-linear-gradient(68deg,
      transparent, transparent 85px,
      rgba(100,185,100,0.12) 85px, rgba(100,185,100,0.12) 87px,
      transparent 87px, transparent 172px);
}

/* Travor Onyx: dark earthen, wood-like texture */
.variety-card__swatch--travor-onyx {
  background: linear-gradient(148deg, #3e2c1c 0%, #342418 28%, #3c2a1a 62%, #2c1e12 100%);
}
.variety-card__swatch--travor-onyx::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(175deg,
      rgba(80,55,30,0.35) 0px, rgba(80,55,30,0.35) 3px,
      transparent 3px, transparent 20px,
      rgba(100,70,40,0.22) 20px, rgba(100,70,40,0.22) 22px,
      transparent 22px, transparent 40px),
    repeating-linear-gradient(172deg,
      transparent, transparent 12px,
      rgba(120,85,50,0.16) 12px, rgba(120,85,50,0.16) 14px,
      transparent 14px, transparent 28px),
    linear-gradient(160deg,
      transparent 25%, rgba(140,100,60,0.20) 30%, transparent 36%,
      transparent 65%, rgba(130,90,52,0.18) 70%, transparent 76%);
}

.variety-card__body  { padding: 22px 24px 26px; }
.variety-card__name  {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 8px;
}
.variety-card__origin {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  display: block;
}
.variety-card__desc  {
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.62;
  margin-bottom: 18px;
}

.variety-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--charcoal);
  border-bottom: 1px solid var(--charcoal);
  padding-bottom: 1px;
  transition: color var(--t), border-color var(--t);
}
.variety-card__link:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* Stone info layout (text + specs panel) */
.stone-info {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 56px;
  align-items: start;
}

.stone-info__text h2    { margin-bottom: 18px; }
.stone-info__text p     { font-size: 1.0625rem; line-height: 1.82; color: var(--text-light); margin-bottom: 18px; }

.stone-info__specs {
  background-color: var(--cream);
  border: 1px solid var(--grey-light);
  padding: 32px;
}
.stone-info__specs h4 {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  font-family: var(--font-sans);
}

.spec-list { display: flex; flex-direction: column; }
.spec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--grey-light);
  font-size: 0.875rem;
}
.spec-item:last-child { border-bottom: none; }
.spec-item__label { color: var(--text-light); }
.spec-item__value { color: var(--charcoal); font-weight: 500; text-align: right; }

/* ============================================================
   13. BLOG PAGE
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.blog-card {
  background-color: var(--white);
  border: 1px solid var(--grey-light);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.09);
}

.blog-card__image { height: 210px; }

.blog-card__image--1 {
  background:
    repeating-linear-gradient(109deg, transparent, transparent 46px, rgba(175,170,162,0.24) 46px, rgba(175,170,162,0.24) 48px, transparent 48px, transparent 96px),
    linear-gradient(148deg, #d8d4cb 0%, #e8e4dc 50%, #ccc8bf 100%);
}
.blog-card__image--2 {
  background:
    repeating-linear-gradient(-20deg, transparent, transparent 68px, rgba(195,188,178,0.2) 68px, rgba(195,188,178,0.2) 71px, transparent 71px, transparent 140px),
    linear-gradient(148deg, #c8c3ba 0%, #dad6cd 50%, #bebab1 100%);
}
.blog-card__image--3 {
  background:
    repeating-linear-gradient(78deg, transparent, transparent 88px, rgba(180,174,164,0.18) 88px, rgba(180,174,164,0.18) 92px, transparent 92px, transparent 178px),
    linear-gradient(148deg, #dedad2 0%, #eeeae2 50%, #d2cec5 100%);
}

.blog-card__body  { padding: 26px 28px 32px; }

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.blog-card__date {
  font-size: 0.8125rem;
  color: var(--grey-mid);
  letter-spacing: 0.03em;
}
.blog-card__category {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.blog-card__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.28;
  margin-bottom: 12px;
}
.blog-card__excerpt {
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.66;
  margin-bottom: 22px;
}
.blog-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--charcoal);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--t);
}
.blog-card__read-more:hover { color: var(--gold); }

/* ============================================================
   14. CONTACT PAGE
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  max-width: var(--max-width);
  margin: 0 auto;
  align-items: start;
}

.form-section-title {
  font-size: 1.25rem;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--grey-light);
}

.form-group { margin-bottom: 22px; }

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  margin-bottom: 7px;
}
.form-label .req { color: var(--gold); margin-left: 2px; }

.form-control {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--charcoal);
  background-color: var(--white);
  border: 1.5px solid var(--grey-light);
  outline: none;
  transition: border-color var(--t);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  line-height: 1.5;
}
.form-control:focus { border-color: var(--charcoal); }
.form-control::placeholder { color: var(--grey-mid); }

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B978F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

textarea.form-control { resize: vertical; min-height: 140px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-submit { margin-top: 8px; }
.form-submit .btn { width: 100%; justify-content: center; padding: 16px; }

#formSuccess {
  display: none;
  text-align: center;
  padding: 48px 32px;
  background-color: var(--cream-dark);
  border: 1px solid var(--grey-light);
}
#formSuccess h3 { margin-bottom: 12px; }
#formSuccess p  { color: var(--text-light); }

.contact-aside {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}

.contact-info-card {
  background-color: var(--charcoal);
  color: var(--white);
  padding: 36px 32px;
  margin-bottom: 20px;
}
.contact-info-card h3 {
  color: var(--white);
  font-size: 1.125rem;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.contact-info-item { margin-bottom: 24px; }
.contact-info-item:last-child { margin-bottom: 0; }
.contact-info-item__label {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
  display: block;
}
.contact-info-item__value {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
}
.contact-info-item__value a {
  color: var(--white);
  font-weight: 500;
  transition: color var(--t);
}
.contact-info-item__value a:hover { color: var(--gold); }

.contact-note {
  background-color: var(--cream-dark);
  border: 1px solid var(--grey-light);
  border-left: 3px solid var(--gold);
  padding: 20px 22px;
  font-size: 0.875rem;
  color: var(--text-light);
  line-height: 1.65;
}

/* ============================================================
   15. ABOUT PAGE
   ============================================================ */
.about-lead {
  max-width: 760px;
  margin: 0 auto;
}
.about-lead p {
  font-size: 1.0625rem;
  line-height: 1.84;
  color: var(--text);
  margin-bottom: 22px;
}
.about-lead p:first-child {
  font-size: 1.1875rem;
  color: var(--charcoal);
}

.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.about-value {
  padding: 36px 28px 38px;
  background-color: var(--white);
  border: 1px solid var(--grey-light);
  border-top: 3px solid var(--gold);
}
.about-value__icon {
  margin-bottom: 18px;
  color: var(--gold);
  width: 28px;
  height: 28px;
}
.about-value__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 12px;
}
.about-value__text {
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.65;
}

/* ============================================================
   16. FOOTER
   ============================================================ */
.site-footer {
  background-color: #2a2a2a;
  padding: 72px var(--section-x) 0;
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-brand {
  display: flex;
  flex-direction: column;
}
.footer-brand__logo {
  display: block;
  width: 600px;
  height: auto;
  margin: 0 auto;
  filter: brightness(0) invert(1);
}
.footer-brand__desc {
  font-size: 0.875rem;
  line-height: 1.72;
  color: rgba(255,255,255,0.48);
  margin: 6px 0 24px;
}
.footer-contact__phone {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 4px;
}
.footer-contact__hours {
  display: block;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.48);
}

.footer-col__title {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  font-family: var(--font-sans);
}

.footer-col__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.footer-col__link {
  font-size: 1rem;
  color: rgba(255,255,255,0.48);
  transition: color var(--t);
}
.footer-col__link:hover { color: rgba(255,255,255,0.82); }

.footer-contact-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.55);
  font-size: 1rem;
  line-height: 1.4;
  transition: color var(--t);
}
a.footer-contact-item:hover { color: rgba(255,255,255,0.9); }
.footer-contact-item__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--gold);
}
.footer-contact-divider {
  height: 1px;
  background-color: var(--gold);
  opacity: 0.35;
  margin-bottom: 24px;
}
.footer-cta-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}
.site-footer__copyright { font-size: 0.8125rem; color: rgba(255,255,255,0.32); }

/* ============================================================
   17. FEATURED MARBLE COLLECTION (homepage dark cards)
   ============================================================ */
.marble-collection {
  background-color: #2a2a2a;
  padding: var(--section-y) 0;
}

.marble-collection .section__title   { color: var(--white); }
.marble-collection .section__subtitle { color: #a0a0a0; }

.marble-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}

.marble-collection__cta {
  text-align: center;
  margin-top: 44px;
  padding-top: 8px;
}

.btn--gold {
  background-color: var(--gold);
  color: var(--white);
  border: 2px solid var(--gold);
}
.btn--gold:hover {
  background-color: transparent;
  color: var(--gold);
}

.marble-feature-card {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-decoration: none;
  background-color: #333333;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform var(--t), box-shadow var(--t);
}
.marble-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 56px rgba(0,0,0,0.45);
}

/* Stone preview bar at top of each card */
.marble-feature-card__preview {
  display: block;
  width: 100%;
  height: 120px;
  flex-shrink: 0;
}

/* Imperial White: warm ivory tones, gentle diagonal */
.marble-feature-card--carrara .marble-feature-card__preview {
  background:
    repeating-linear-gradient(118deg,
      transparent 0, transparent 85px,
      rgba(140,125,105,0.18) 85px, rgba(140,125,105,0.18) 87px,
      transparent 87px, transparent 172px),
    repeating-linear-gradient(-20deg,
      transparent 0, transparent 110px,
      rgba(120,108,88,0.12) 110px, rgba(120,108,88,0.12) 112px,
      transparent 112px, transparent 222px),
    linear-gradient(135deg, #f5f0e8 0%, #ede8dd 55%, #c8c0b0 100%);
}

/* Turang White: clean white, more visible grey movement */
.marble-feature-card--calacatta .marble-feature-card__preview {
  background:
    repeating-linear-gradient(108deg,
      transparent 0, transparent 70px,
      rgba(120,120,120,0.22) 70px, rgba(120,120,120,0.22) 72px,
      transparent 72px, transparent 142px),
    repeating-linear-gradient(-18deg,
      transparent 0, transparent 95px,
      rgba(100,100,100,0.15) 95px, rgba(100,100,100,0.15) 97px,
      transparent 97px, transparent 192px),
    linear-gradient(135deg, #e8e8e8 0%, #d4d4d4 55%, #a0a0a0 100%);
}

/* Olive Brown: warm chocolate and gold diagonal */
.marble-feature-card--statuario .marble-feature-card__preview {
  background:
    repeating-linear-gradient(115deg,
      transparent 0, transparent 60px,
      rgba(220,190,120,0.32) 60px, rgba(220,190,120,0.32) 63px,
      transparent 63px, transparent 122px),
    linear-gradient(-28deg,
      transparent 15%, rgba(232,213,176,0.38) 20%, rgba(196,145,42,0.28) 25%, transparent 32%),
    linear-gradient(135deg, #5c3d2a 0%, #8b5e3c 40%, #c4912a 75%, #e8d5b0 100%);
}

/* Card content */
.marble-feature-card__content {
  padding: 32px;
}

.marble-feature-card__origin {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.marble-feature-card__name {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.25;
}

.marble-feature-card__desc {
  font-size: 0.9375rem;
  color: #a0a0a0;
  line-height: 1.6;
  margin-bottom: 24px;
}

.marble-feature-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.55);
  padding: 10px 20px;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.marble-feature-card:hover .marble-feature-card__btn {
  background-color: rgba(255,255,255,0.08);
  border-color: var(--white);
}

/* ============================================================
   18. TECHNICAL SPECIFICATIONS TABLE
   ============================================================ */
.tech-specs {
  background-color: var(--charcoal);
  padding: var(--section-y) 0;
}
.tech-specs__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--section-x);
}
.tech-specs__header {
  margin-bottom: 32px;
}
.tech-specs__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tech-specs__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
.tech-specs__table thead th {
  background-color: rgba(255,255,255,0.05);
  color: var(--gold);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  white-space: nowrap;
}
.tech-specs__table tbody td {
  color: rgba(255,255,255,0.85);
  font-size: 0.9375rem;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: top;
  line-height: 1.5;
}
.tech-specs__table tbody tr:last-child td {
  border-bottom: none;
}
.tech-specs__note {
  margin-top: 28px;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.45);
  font-style: italic;
  line-height: 1.7;
  max-width: 800px;
}

/* ============================================================
   19. FINISHES PAGE
   ============================================================ */
.finishes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 52px;
}
.finish-card {
  background-color: var(--white);
  border: 1px solid var(--grey-light);
  padding: 32px;
}
.finish-card__name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 12px;
}
.finish-card__desc {
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   20. UTILITY / MISC
   ============================================================ */
.page-content { padding-top: var(--nav-height); }

.gold-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.4;
  margin: 0;
  border: none;
}

/* ============================================================
   18. ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   19. MEDIA QUERIES
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  :root { --section-y: 72px; }

  .intro-section__inner { gap: 56px; }
  .stone-info { grid-template-columns: 1fr; gap: 36px; }
  .stone-info__specs { position: static; }
  .site-footer__grid { gap: 36px; }
}

@media (max-width: 900px) {
  .site-nav__links    { display: none; }
  .site-header__cta   { display: none; }
  .menu-toggle        { display: flex; }

  .intro-section__inner { grid-template-columns: 1fr; gap: 48px; }
  .stone-cards          { grid-template-columns: 1fr 1fr; }
  .variety-grid         { grid-template-columns: 1fr 1fr; }
  .marble-feature-grid  { grid-template-columns: 1fr 1fr; }
  .blog-grid            { grid-template-columns: 1fr 1fr; }
  .contact-layout       { grid-template-columns: 1fr; }
  .about-values         { grid-template-columns: 1fr 1fr; }
  .contact-aside        { position: static; }
}

/* Mobile */
@media (max-width: 600px) {
  :root { --section-y: 56px; --section-x: 20px; }

  .stone-cards          { grid-template-columns: 1fr; }
  .variety-grid         { grid-template-columns: 1fr; }
  .marble-feature-grid  { grid-template-columns: 1fr; }
  .blog-grid            { grid-template-columns: 1fr; }
  .about-values         { grid-template-columns: 1fr; }
  .intro-section__stats { grid-template-columns: 1fr 1fr; }
  .form-grid            { grid-template-columns: 1fr; }
  .site-footer__grid    { grid-template-columns: 1fr; gap: 32px; }

  .trust-bar__item {
    padding: 14px 18px;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }

  .hero__actions { flex-direction: column; align-items: center; }
  .sample-cta__actions { flex-direction: column; align-items: center; }
  .hero__scroll-hint { display: none; }
}