:root {
    /* Colors */
    --primary: #111111;       /* Jet Black */
    --primary-light: #333333; /* Dark Gray */
    --primary-dark: #000000;  /* Pure Black */
    --secondary: #E0E0E0;     /* Metallic Silver */
    --tertiary: #D4AF37;      /* Luxury Gold Accent */
    --tertiary-light: #ddc062;
    --tertiary-dark: #af8f25;
    --quaternary: #d70000;    /* Vivid Red Accent */
    --quaternary-light: #ff0202;
    --quaternary-dark: #ac0000;
    --text-clr: #000000;
    --dark-gray: #333333;
    --gray: #B0B0B0;
    --light-gray: #F2F2F2;
/* Font */
    --ff:'Figtree', sans-serif;
    --h1: bold 4rem/1em var(--ff);
    --h2: bold 3rem/1.2em var(--ff);
    --h3: bold 2.25rem/1.2em var(--ff);
    --h4: bold 1.5rem/1.6em var(--ff);
    --big: 1.25rem/1.6em var(--ff);
    --p: 1rem/1.6em var(--ff);
    --small: 0.75rem/2em var(--ff);

    /* Spacing */
    font-size: 16px;
    --margin-xxs: .25rem;
    --margin-xs: .5rem;
    --margin-s: .75rem;
    --margin-m: 1rem;
    --margin-l: 1.25rem;
    --margin-xl: 1.75rem;
    --margin-xxl: 2.5rem;
}
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
main {
    padding-top: 0;
}
body {
    font-family: var(--ff);
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
main { 
    flex: 1;
}
/* Hero image */
.background-image {
    width:100%;
    margin-top:5rem;
}
.background-image img {
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
    object-position:center;
}
/* Gallery Page */

.galleryHero {
    padding:5.2rem 1.5rem 3.2rem;
    background:linear-gradient(135deg,#0c0c0c 0%,#050505 65%);
    border-bottom:1px solid #171717;
    text-align:center;
}
.galleryHero-inner { max-width:1050px; margin:0 auto; }
.galleryHero h1 {
    font-size:clamp(2.4rem,6vw,3.4rem);
    margin:0 0 1rem;
    color:var(--secondary);
    letter-spacing:.5px;
}
.galleryHero-lead {
    max-width:780px;
    margin:0 auto;
    font-size:1rem;
    line-height:1.55;
    opacity:.85;
    color:var(--secondary);
}

.gallerySection {
    padding:3.2rem 1.5rem 3.6rem;
    background:#090909;
    border-bottom:1px solid #161616;
}

.galleryPairs {
    max-width:1250px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:2.3rem;
}

.pair {
    display:grid;
    gap:1.6rem;
    grid-template-columns:repeat(2,1fr);
    align-items:start;
}

figure {
    margin:0;
    background:#141414;
    border:1px solid #232323;
    border-radius:16px;
    overflow:hidden;
    position:relative;
    display:flex;
    flex-direction:column;
    transition:border-color .4s ease,transform .4s ease;
}
figure:hover { border-color:var(--tertiary); transform:translateY(-6px); }

figure img {
    width:100%;
    aspect-ratio: 4/3;
    object-fit:cover;
    display:block;
}

figcaption {
    font-size:.7rem;
    letter-spacing:.5px;
    text-transform:uppercase;
    opacity:.55;
    padding:.65rem .85rem .75rem;
    color:var(--secondary);
}

.badge {
    position:absolute;
    top:.55rem;
    left:.55rem;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    padding:.35rem .6rem .3rem;
    font-size:.55rem;
    letter-spacing:1px;
    text-transform:uppercase;
    font-weight:600;
    border:1px solid rgba(255,255,255,.08);
    border-radius:6px;
    color:var(--secondary);
}
.badge-after {
    background:linear-gradient(135deg,var(--tertiary) 0%,var(--tertiary-dark) 70%);
    color:var(--primary-dark);
    border:none;
}

/* CTA */
.galleryCTA {
    padding:3.4rem 1.5rem 4rem;
    background:#060606;
    text-align:center;
}
.galleryCTA h2 {
    font-size:clamp(2rem,5vw,2.6rem);
    margin:0 0 .9rem;
    color:var(--secondary);
}
.galleryCTA p {
    margin:0 0 1.6rem;
    font-size:1rem;
    opacity:.85;
    color:var(--secondary);
}
.galleryCTA-btn {
    display:inline-block;
    font-weight:700;
    letter-spacing:.5px;
    padding:.9rem 2.2rem;
    border-radius:40px;
    font-size:1rem;
    text-decoration:none;
    background:linear-gradient(135deg,var(--tertiary) 0%,var(--tertiary-dark) 55%,#7a6015 100%);
    color:var(--primary-dark);
    border:1px solid var(--tertiary-dark);
    box-shadow:0 10px 30px -14px rgba(0,0,0,.7);
    position:relative;
    background-size:140% 140%;
    background-position:0 50%;
    transition:background-position .6s ease,transform .4s ease,box-shadow .4s ease;
}
.galleryCTA-btn:hover {
    background-position:100% 50%;
    transform:translateY(-4px);
    box-shadow:0 18px 46px -18px rgba(0,0,0,.8);
    color:var(--secondary);
}
.galleryCTA-btn::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 35%,rgba(255,255,255,0) 70%);
    mix-blend-mode:overlay;
    opacity:0;
    transition:opacity .45s ease;
}
.galleryCTA-btn:hover::after { opacity:.7; }

/* Accessibility helper */
.visually-hidden {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
}

/* Mobile: stack each pair as Before then After */
@media (max-width:760px){
    .pair { grid-template-columns:1fr; }
    figure img { aspect-ratio: 16/10; }
    .galleryPairs { gap:2rem; }
    .galleryHero { padding:4.6rem 1.2rem 3rem; }
    .galleryCTA { padding:3.2rem 1.2rem 3.6rem; }
    .galleryCTA-btn { width:100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
    * { transition:none !important; animation:none !important; }
    .galleryCTA-btn,
    figure { transform:none !important; }
}

/* Fade utility (reuse if not global) */
.fade-in { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.fade-in.in-view { opacity:1; transform:translateY(0); }