/* =========================================================
   G M PLASTERING - HIGH END EDITORIAL PROJECT GALLERY
========================================================= */

:root {
  --gm-paper: #fbf8f1;
  --gm-chalk: #f6f1e7;
  --gm-ink: #17241b;
  --gm-muted: #667067;
  --gm-forest: #26382b;
  --gm-forest-deep: #17241b;
  --gm-olive: #59664e;
  --gm-olive-dark: #46533f;
  --gm-clay: #a66143;
  --gm-clay-light: #bd7351;
  --gm-stone: #e9e2d6;
  --gm-line: rgba(23,36,27,.14);
}

* { box-sizing: border-box; }
html { scroll-behaviour: smooth; }
body { margin: 0; background: var(--gm-paper); color: var(--gm-ink); font-family: 'DM Sans', Arial, sans-serif; font-size: 17px; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { font-family: 'Spectral', Georgia, serif; font-style: normal; font-weight: 500; letter-spacing: -.03em; line-height: 1.08; }

.gm-container { width: min(92%, 1320px); }

/* =========================================================
   PROJECT GALLERY
========================================================= */

.gm-project-gallery { position: relative; overflow: hidden; padding: clamp(95px, 9vw, 145px) 0; background: var(--gm-paper); }
.gm-project-gallery::before { content: ''; position: absolute; top: 0; right: 10%; width: 1px; height: 100%; background: linear-gradient(180deg, transparent, rgba(28,41,33,.07) 18%, rgba(28,41,33,.07) 82%, transparent); pointer-events: none; }

/* =========================================================
   HEADING
========================================================= */

.gm-gallery-heading { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(50px, 8vw, 125px); align-items: end; margin: 0 auto clamp(52px, 6vw, 82px); }
.gm-gallery-heading-main { max-width: 760px; }
.gm-gallery-type { margin: 0 0 20px; color: var(--gm-clay); font-size: .72rem; font-weight: 700; line-height: 1.4; letter-spacing: .13em; text-transform: uppercase; }
.gm-gallery-heading h1 { margin: 0; font-size: clamp(2.9rem, 4.4vw, 4.9rem); }
.gm-gallery-heading h1 span { display: block; color: var(--gm-olive-dark); }
.gm-gallery-heading-copy { max-width: 510px; padding: 0 0 5px 32px; border-left: 1px solid var(--gm-line); }
.gm-gallery-heading-copy p { margin: 0; color: var(--gm-muted); font-size: 1rem; line-height: 1.85; }

/* =========================================================
   EDITORIAL GRID
========================================================= */

.gm-editorial-gallery { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; grid-auto-rows: 92px; gap: clamp(10px, 1.25vw, 18px); }
.gm-editorial-gallery > a { position: relative; display: block; grid-column: span 4; grid-row: span 4; overflow: hidden; background: var(--gm-stone); cursor: zoom-in; border-radius: 2px; }
.gm-editorial-gallery > a:nth-child(8n + 1) { grid-column: span 8; grid-row: span 7; }
.gm-editorial-gallery > a:nth-child(8n + 2) { grid-column: span 4; grid-row: span 4; }
.gm-editorial-gallery > a:nth-child(8n + 3) { grid-column: span 4; grid-row: span 3; }
.gm-editorial-gallery > a:nth-child(8n + 4) { grid-column: span 5; grid-row: span 5; }
.gm-editorial-gallery > a:nth-child(8n + 5) { grid-column: span 3; grid-row: span 5; }
.gm-editorial-gallery > a:nth-child(8n + 6) { grid-column: span 4; grid-row: span 5; }
.gm-editorial-gallery > a:nth-child(8n + 7) { grid-column: span 7; grid-row: span 5; }
.gm-editorial-gallery > a:nth-child(8n + 8) { grid-column: span 5; grid-row: span 5; }

.gm-editorial-gallery img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.015); transition: transform .65s cubic-bezier(.2,.6,.3,1), filter .45s ease; }
.gm-editorial-gallery > a:hover img { transform: scale(1.025); filter: saturate(.98) contrast(1.02); }

.gm-editorial-gallery > a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(23,36,27,.14) 100%); opacity: .7; pointer-events: none; transition: opacity .3s ease; }
.gm-editorial-gallery > a:hover::after { opacity: .35; }

.gm-editorial-gallery > a::before { content: '+'; position: absolute; right: 18px; bottom: 17px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.76); border-radius: 50%; color: #fff; font-size: 1rem; line-height: 1; opacity: 0; transform: translateY(5px); transition: opacity .3s ease, transform .3s ease, background .3s ease; }
.gm-editorial-gallery > a:hover::before { opacity: 1; transform: translateY(0); background: rgba(23,36,27,.24); }

/* =========================================================
   FOOTER
========================================================= */

.gm-gallery-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 35px; margin-top: 32px; padding-top: 27px; border-top: 1px solid var(--gm-line); }
.gm-gallery-footer p { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin: 0; color: var(--gm-muted); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.gm-gallery-footer p span { display: block; width: 18px; height: 1px; background: var(--gm-clay); }
.gm-gallery-contact { display: inline-flex; align-items: center; gap: 22px; font-size: .71rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: color .25s ease; }
.gm-gallery-contact span { color: var(--gm-clay); font-size: 1.05rem; transition: transform .25s ease; }
.gm-gallery-contact:hover { color: var(--gm-clay); }
.gm-gallery-contact:hover span { transform: translateX(4px); }

/* =========================================================
   DEMO CONTACT
========================================================= */

.gm-demo-contact { padding: 95px 0 105px; background: var(--gm-forest-deep); color: #fff; }
.gm-demo-contact h2 { margin-bottom: 15px; color: #fff; font-size: clamp(2.2rem, 3.5vw, 3.5rem); }
.gm-demo-contact p { margin: 0; color: rgba(255,255,255,.72); }

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
  .gm-gallery-heading { grid-template-columns: 1fr; gap: 32px; }
  .gm-gallery-heading-copy { max-width: 680px; }
  .gm-editorial-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 270px; }
  .gm-editorial-gallery > a, .gm-editorial-gallery > a:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .gm-editorial-gallery > a:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {
  .gm-project-gallery { padding: 76px 0; }
  .gm-gallery-heading { margin-bottom: 40px; }
  .gm-gallery-heading h1 { font-size: clamp(2.45rem, 11vw, 3.35rem); }
  .gm-gallery-heading-copy { padding: 25px 0 0; border-top: 1px solid var(--gm-line); border-left: 0; }
  .gm-editorial-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 188px; gap: 8px; }
  .gm-editorial-gallery > a, .gm-editorial-gallery > a:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .gm-editorial-gallery > a:nth-child(5n + 1) { grid-column: 1 / -1; grid-row: span 2; }
  .gm-editorial-gallery > a::before { right: 12px; bottom: 12px; width: 30px; height: 30px; opacity: .9; transform: none; }
  .gm-gallery-footer { align-items: flex-start; flex-direction: column; margin-top: 24px; }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 479.98px) {
  .gm-editorial-gallery { grid-template-columns: 1fr; grid-auto-rows: 300px; }
  .gm-editorial-gallery > a, .gm-editorial-gallery > a:nth-child(n), .gm-editorial-gallery > a:nth-child(5n + 1) { grid-column: 1; grid-row: span 1; }
  .gm-editorial-gallery > a:first-child { grid-row: span 2; }
}