:root {
  --cream:    #F7F4EF;
  --parchment:#EDE8E0;
  --stone:    #D4CCC0;
  --white:    #FFFFFF;
  --charcoal: #1A1A18;
  --ink:      #0E0E0C;
  --mid:      #2C2C28;
  --warm:     #5C5850;
  --muted:    #9A9288;
  --gold:     #B8975A;
  --gold-l:   #D4B47A;
  --gold-d:   #9A7A3E;
  --line:     rgba(26,26,24,0.09);
  --line-dk:  rgba(255,255,255,0.09);
  --f-serif:  'Cormorant Garamond', Georgia, serif;
  --f-sans:   'DM Sans', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--f-sans);
  background: var(--cream);
  color: var(--charcoal);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  cursor: none;
}

/* Real Estate Gallery Section */
.res__gallery.realsect {
  background-color: var(--cream);
  padding: 10% 5%;
  font-family: var(--f-sans);
  color: var(--charcoal);
}

.res__gallery h1 {
    font-family: var(--f-serif);
    font-weight: 300;
    font-size: clamp(40px, 7.5vw, 80px);
    line-height: 0.95;
    letter-spacing: -2px;
    color: var(--ink);
    margin-bottom: 40px;
    animation: fadeUp .85s ease .4s both;
    position: relative;
    text-align: center;
    text-transform: capitalize;
}

.res__gallery p {
    font-size: 15px;
    font-weight: 300;
    color: var(--warm);
    line-height: 1.75;
    margin-bottom: 48px;
    animation: fadeUp .8s ease .55s both;
    text-align: center;
}

/* The Grid Layout matching the 4-column reference image */
.res__gallery .product {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 10px;
}

/* Individual Image Box Mockups */
.res__gallery .itembox {
  background-color: var(--parchment);
  border: 1px solid var(--stone);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1; /* Forces square layout like the reference image */
  box-shadow: 0 4px 12px rgba(26, 26, 24, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.res__gallery .itembox:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(184, 151, 90, 0.15); /* Subtly uses your gold token */
  border-color: var(--gold);
}

/* Image scaling & styling */
.res__gallery .itembox a {
  display: block;
  width: 100%;
  height: 100%;
}

.res__gallery .itembox img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Keeps the portfolio print mockup layouts pristine */
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.15)); /* emulates the paper mock shadow */
}

/* Keep hidden items cleanly removed from layout stream */
.res__gallery .itembox.d-none {
  display: none !important;
}

/* Responsive breakdowns */
@media (max-width: 992px) {
  .res__gallery .product {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .res__gallery .product {
    grid-template-columns: repeat(2, 1fr);
  }
  .res__gallery h1.just2 {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .res__gallery .product {
    grid-template-columns: 1fr;
  }
}