/* =======================================================================
   WEDDING GALLERY — PREMIUM DESIGN SYSTEM
   Generated by patch.js v2.0.0  |  raging-code/wedding-gallery

   Philosophy:
     Elevate what exists. Preserve the existing color story.
     Enhance typography, spacing, motion, and craft.
     Every rule is scoped to avoid breaking existing layout logic.

   Fonts injected via HTML:
     Display  → Fraunces           (300 / 400 / 500 / 600 / 700, normal + italic)
     Body     → Manrope            (200 / 300 / 400 / 500 / 600)
   ======================================================================= */


/* ─────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* Typography stacks */
  --pf-display : 'Fraunces', Georgia, serif;
  --pf-body    : 'Manrope', system-ui, sans-serif;

  /* Gold accent — harmonises with rose, champagne, blush palettes */
  --pf-gold        : #C4A35A;
  --pf-gold-light  : #E5D4A8;
  --pf-gold-muted  : rgba(196, 163, 90, 0.28);

  /* Easing curves */
  --pf-ease        : cubic-bezier(0.16, 1, 0.3, 1);
  --pf-ease-spring : cubic-bezier(0.34, 1.56, 0.64, 1);
  --pf-ease-in-out : cubic-bezier(0.45, 0, 0.55, 1);

  /* Elevation */
  --pf-shadow-subtle : 0 2px 12px rgba(0, 0, 0, 0.06);
  --pf-shadow-soft   : 0 6px 28px rgba(0, 0, 0, 0.09);
  --pf-shadow-float  : 0 18px 56px rgba(0, 0, 0, 0.14);
  --pf-shadow-deep   : 0 36px 80px rgba(0, 0, 0, 0.20);
}


/* ─────────────────────────────────────────────────────────────────────
   2. BASE RESET & RENDERING
   ───────────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family       : var(--pf-body) !important;
  font-weight       : 300 !important;
  line-height       : 1.85 !important;
  letter-spacing    : 0.01em !important;
  -webkit-font-smoothing  : antialiased !important;
  -moz-osx-font-smoothing : grayscale !important;
  text-rendering    : optimizeLegibility !important;
}

/* Thin, elegant scrollbar */
::-webkit-scrollbar              { width: 3px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--pf-gold-muted); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover  { background: var(--pf-gold); }


/* ─────────────────────────────────────────────────────────────────────
   3. TYPOGRAPHY SYSTEM
   ───────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family  : var(--pf-display) !important;
  font-weight  : 300 !important;
  line-height  : 1.15 !important;
  letter-spacing: 0.04em !important;
}

h1 { font-size: clamp(2.8rem,  7vw, 6.0rem) !important; }
h2 { font-size: clamp(2.0rem,  4vw, 3.4rem) !important; }
h3 { font-size: clamp(1.5rem,  3vw, 2.4rem) !important; }
h4 { font-size: clamp(1.2rem,  2vw, 1.7rem) !important; }
h5 { font-size: clamp(1.0rem, 1.5vw, 1.3rem)!important; }
h6 { font-size: clamp(0.9rem,  1vw, 1.1rem) !important; }

p {
  font-family  : var(--pf-body) !important;
  font-weight  : 300 !important;
  line-height  : 1.9 !important;
  letter-spacing: 0.01em !important;
}

a {
  transition: opacity 260ms ease, color 260ms ease !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}


/* ─────────────────────────────────────────────────────────────────────
   4. NAVIGATION
   Transparent → frosted-glass on scroll (class .pf-scrolled added by JS)
   ───────────────────────────────────────────────────────────────────── */
nav,
.navbar,
.navigation,
.nav-bar,
#navbar,
#nav,
header:not([class*="page"]):not([class*="content"]) {
  position   : fixed !important;
  top        : 0 !important;
  left       : 0 !important;
  right      : 0 !important;
  z-index    : 9900 !important;
  padding    : 1.8rem 4rem !important;
  background : transparent !important;
  border-bottom: none !important;
  transition :
    padding    500ms var(--pf-ease),
    background 500ms var(--pf-ease),
    box-shadow 500ms var(--pf-ease) !important;
}

nav.pf-scrolled,
.navbar.pf-scrolled,
.navigation.pf-scrolled,
#navbar.pf-scrolled,
#nav.pf-scrolled,
header.pf-scrolled {
  padding    : 1.1rem 4rem !important;
  background : rgba(255, 255, 255, 0.84) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  box-shadow : 0 1px 0 rgba(0,0,0,0.07), 0 4px 20px rgba(0,0,0,0.05) !important;
}

/* Logo / brand */
nav .logo, nav .brand, nav .site-name,
.navbar-brand, .navbar .logo, nav > a:first-child {
  font-family  : var(--pf-display) !important;
  font-weight  : 400 !important;
  font-size    : 1.35rem !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
}

/* Nav links */
nav a:not(.logo):not(.brand):not([class*="btn"]),
nav ul li a,
.navbar-nav a,
.nav-links a {
  font-family   : var(--pf-body) !important;
  font-weight   : 400 !important;
  font-size     : 0.70rem !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding       : 0.3rem 0 !important;
  margin        : 0 1.4rem !important;
  position      : relative !important;
  opacity       : 0.80 !important;
  transition    : opacity 300ms ease, letter-spacing 300ms ease !important;
}

/* Underline slide-in */
nav a:not(.logo):not(.brand):not([class*="btn"])::after,
nav ul li a::after {
  content      : '' !important;
  position     : absolute !important;
  bottom       : -1px !important;
  left         : 0 !important;
  right        : 0 !important;
  height       : 1px !important;
  background   : var(--pf-gold) !important;
  transform    : scaleX(0) !important;
  transform-origin: left !important;
  transition   : transform 360ms var(--pf-ease) !important;
}

nav a:not(.logo):not(.brand):not([class*="btn"]):hover,
nav ul li a:hover {
  opacity       : 1 !important;
  letter-spacing: 0.25em !important;
}

nav a:not(.logo):not(.brand):not([class*="btn"]):hover::after,
nav ul li a:hover::after {
  transform: scaleX(1) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   5. HERO / BANNER
   ───────────────────────────────────────────────────────────────────── */
.hero,
#hero,
.banner,
.jumbotron,
.cover,
.intro,
.fullscreen,
.hero-section {
  min-height       : 100vh !important;
  display          : flex !important;
  align-items      : center !important;
  justify-content  : center !important;
  text-align       : center !important;
  position         : relative !important;
  overflow         : hidden !important;
  background-size  : cover !important;
  background-position: center center !important;
}

/* Atmospheric gradient veil */
.hero::before,
#hero::before,
.banner::before,
.jumbotron::before,
.cover::before {
  content  : '' !important;
  position : absolute !important;
  inset    : 0 !important;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.24) 0%,
    rgba(0, 0, 0, 0.06) 45%,
    rgba(0, 0, 0, 0.34) 100%
  ) !important;
  pointer-events: none !important;
  z-index  : 1 !important;
}

.hero > *,
#hero > *,
.banner > *,
.jumbotron > *,
.cover > * {
  position : relative !important;
  z-index  : 2 !important;
}

/* Hero headline */
.hero h1, #hero h1,
.banner h1, .jumbotron h1,
.cover h1, .hero-title,
.hero .title {
  font-family   : var(--pf-display) !important;
  font-size     : clamp(3.2rem, 9vw, 9rem) !important;
  font-weight   : 300 !important;
  font-style    : italic !important;
  letter-spacing: 0.04em !important;
  line-height   : 1.0 !important;
  color         : #fff !important;
  text-shadow   : 0 2px 48px rgba(0, 0, 0, 0.22) !important;
  margin-bottom : 1.5rem !important;
}

/* Hero sub-text */
.hero h2, .hero h3, #hero h2,
.banner .subtitle, .banner h2,
.hero p, .hero .lead,
.hero-subtitle {
  font-family   : var(--pf-body) !important;
  font-weight   : 200 !important;
  font-size     : clamp(0.7rem, 1.8vw, 0.9rem) !important;
  letter-spacing: 0.36em !important;
  text-transform: uppercase !important;
  color         : rgba(255, 255, 255, 0.88) !important;
  text-shadow   : 0 1px 16px rgba(0,0,0,0.28) !important;
  line-height   : 2.2 !important;
}

/* Hairline gold separator in hero */
.hero .separator,
.hero hr,
#hero hr {
  width       : 60px !important;
  border      : none !important;
  border-top  : 1px solid var(--pf-gold) !important;
  margin      : 1.8rem auto !important;
  opacity     : 0.7 !important;
}


/* ─────────────────────────────────────────────────────────────────────
   6. SECTION LAYOUT & ORNAMENTAL HEADINGS
   ───────────────────────────────────────────────────────────────────── */
section,
.section {
  padding: 8rem 5rem !important;
}

/* Centered section h2 with ornament */
section h2,
.section h2,
.section-title,
.gallery-section h2 {
  font-family   : var(--pf-display) !important;
  font-weight   : 300 !important;
  text-align    : center !important;
  margin-bottom : 0 !important;
  position      : relative !important;
}

/* Gold ornamental divider beneath headings */
section h2::after,
.section h2::after,
.section-title::after {
  content     : '— ◆ —' !important;
  display     : block !important;
  font-size   : 0.58rem !important;
  letter-spacing: 0.55em !important;
  color       : var(--pf-gold) !important;
  margin-top  : 1.3rem !important;
  margin-bottom: 3rem !important;
  font-family : var(--pf-body) !important;
  font-weight : 300 !important;
  font-style  : normal !important;
}

/* Eyebrow / pre-label */
.eyebrow, .pre-title, .section-label, .kicker, .overline {
  font-family   : var(--pf-body) !important;
  font-weight   : 400 !important;
  font-size     : 0.65rem !important;
  letter-spacing: 0.40em !important;
  text-transform: uppercase !important;
  opacity       : 0.45 !important;
  display       : block !important;
  text-align    : center !important;
  margin-bottom : 1rem !important;
}

/* Lead paragraph */
.lead, .intro-text {
  font-family   : var(--pf-display) !important;
  font-weight   : 300 !important;
  font-style    : italic !important;
  font-size     : clamp(1.1rem, 2.5vw, 1.5rem) !important;
  line-height   : 1.7 !important;
  text-align    : center !important;
  max-width     : 680px !important;
  margin        : 0 auto 2.5rem !important;
}

/* Thin divider rule between sections */
section + section::before,
.section + .section::before {
  content     : '' !important;
  display     : block !important;
  width       : 1px !important;
  height      : 60px !important;
  background  : var(--pf-gold-muted) !important;
  margin      : 0 auto !important;
}


/* ─────────────────────────────────────────────────────────────────────
   7. PREMIUM GALLERY GRID
   Masonry-style columns, elegant hover states, reveal circle
   ───────────────────────────────────────────────────────────────────── */

/* Grid container */
.gallery,
#gallery,
.photos,
.photo-grid,
.image-gallery,
.image-grid,
[class*="gallery-container"],
[class*="gallery-grid"] {
  column-count : 3 !important;
  column-gap   : 1.2rem !important;
  padding      : 1rem 5rem 5rem !important;
  display      : block !important;
  width        : 100% !important;
}

/* Individual item */
.gallery a,
.gallery-item,
.gallery > div,
.gallery figure,
.photo-item,
.photo-card,
[id*="gallery"] > a,
[class*="gallery"] > a {
  break-inside : avoid !important;
  display      : block !important;
  margin-bottom: 1.2rem !important;
  position     : relative !important;
  overflow     : hidden !important;
  border-radius: 1px !important;
  cursor       : pointer !important;
  /* Force GPU compositing layer for silky transitions */
  transform    : translateZ(0) !important;
  will-change  : transform !important;
}

/* The image itself */
.gallery img,
.gallery-item img,
.photo-item img,
[id*="gallery"] img,
[class*="gallery"] img {
  width      : 100% !important;
  height     : auto !important;
  display    : block !important;
  transition :
    transform 900ms var(--pf-ease),
    filter    500ms ease !important;
  filter     : brightness(0.95) saturate(1.06) !important;
  will-change: transform !important;
}

/* ── Hover: image scale ── */
.gallery a:hover img,
.gallery-item:hover img,
.photo-item:hover img,
[id*="gallery"] a:hover img {
  transform : scale(1.065) !important;
  filter    : brightness(1.00) saturate(1.10) !important;
}

/* ── Hover: dark veil overlay (::after) ── */
.gallery a::after,
.gallery-item::after,
.photo-item::after,
[id*="gallery"] a::after {
  content    : '' !important;
  position   : absolute !important;
  inset      : 0 !important;
  background : rgba(15, 12, 10, 0) !important;
  transition : background 450ms ease !important;
  pointer-events: none !important;
  z-index    : 1 !important;
}

.gallery a:hover::after,
.gallery-item:hover::after,
.photo-item:hover::after,
[id*="gallery"] a:hover::after {
  background: rgba(15, 12, 10, 0.20) !important;
}

/* ── Hover: frosted-glass circle (::before) ── */
.gallery a::before,
.gallery-item::before,
[id*="gallery"] a::before {
  content      : '' !important;
  position     : absolute !important;
  top          : 50% !important;
  left         : 50% !important;
  width        : 54px !important;
  height       : 54px !important;
  border       : 1.5px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 50% !important;
  z-index      : 2 !important;
  transform    : translate(-50%, -50%) scale(0) !important;
  transition   : transform 420ms var(--pf-ease-spring) !important;
  background   : rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.gallery a:hover::before,
.gallery-item:hover::before,
[id*="gallery"] a:hover::before {
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Caption on gallery items */
.gallery figcaption,
.gallery-item figcaption,
.gallery-caption,
.photo-caption {
  font-family   : var(--pf-body) !important;
  font-weight   : 300 !important;
  font-size     : 0.72rem !important;
  letter-spacing: 0.08em !important;
  padding       : 0.8rem 0.6rem 0.5rem !important;
  opacity       : 0.6 !important;
  transition    : opacity 300ms ease !important;
  text-align    : center !important;
}

.gallery a:hover figcaption,
.gallery-item:hover figcaption {
  opacity: 0.9 !important;
}


/* ─────────────────────────────────────────────────────────────────────
   8. LIGHTBOX ENHANCEMENTS
   Compatible with: Lightcase · Lightbox2 · Fancybox · custom modals
   ───────────────────────────────────────────────────────────────────── */

/* — Lightcase — */
#lightcase-overlay {
  background: rgba(8, 6, 5, 0.94) !important;
  backdrop-filter: blur(6px) !important;
}
#lightcase-case {
  border-radius: 1px !important;
  box-shadow   : var(--pf-shadow-deep) !important;
}
#lightcase-info #lightcase-caption {
  font-family   : var(--pf-body) !important;
  font-weight   : 300 !important;
  font-size     : 0.78rem !important;
  letter-spacing: 0.08em !important;
  color         : rgba(255, 255, 255, 0.60) !important;
}
#lightcase-nav a span {
  border-color : rgba(255, 255, 255, 0.50) !important;
  transition   : border-color 260ms ease !important;
}
#lightcase-nav a:hover span {
  border-color : var(--pf-gold) !important;
}
#lightcase-close span {
  border-color: rgba(255,255,255,0.45) !important;
}

/* — Lightbox2 — */
.lb-overlay {
  background: rgba(8, 6, 5, 0.94) !important;
}
.lb-container  { border-radius: 1px !important; }
.lb-caption {
  font-family : var(--pf-body) !important;
  font-weight : 300 !important;
  font-size   : 0.80rem !important;
  letter-spacing: 0.05em !important;
  color       : rgba(255,255,255,0.65) !important;
}

/* — Fancybox — */
.fancybox__backdrop {
  background: rgba(8, 6, 5, 0.96) !important;
}
.fancybox__caption {
  font-family   : var(--pf-body) !important;
  font-weight   : 300 !important;
  letter-spacing: 0.06em !important;
}

/* Generic modal/overlay */
[class*="modal-backdrop"],
[class*="overlay"]:not(.hero):not(.cover) {
  background: rgba(8, 6, 5, 0.88) !important;
  backdrop-filter: blur(4px) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   9. BUTTONS & CALL-TO-ACTION
   ───────────────────────────────────────────────────────────────────── */
.btn,
.button,
a.btn,
a.button,
input[type="submit"],
input[type="button"],
button:not([class*="close"]):not([class*="dismiss"]):not([class*="toggle"]):not([class*="lux-"]) {
  font-family   : var(--pf-body) !important;
  font-weight   : 500 !important;
  font-size     : 0.68rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  border-radius : 0 !important;
  padding       : 0.95rem 2.6rem !important;
  transition    :
    background    300ms ease,
    color         300ms ease,
    border-color  300ms ease,
    transform     260ms ease,
    box-shadow    300ms ease !important;
  cursor        : pointer !important;
}

.btn:hover,
a.btn:hover,
.button:hover,
input[type="submit"]:hover {
  transform  : translateY(-2px) !important;
  box-shadow : var(--pf-shadow-soft) !important;
}

.btn:active,
a.btn:active {
  transform: translateY(0) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   10. FORMS
   ───────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
  font-family  : var(--pf-body) !important;
  font-weight  : 300 !important;
  font-size    : 0.9rem !important;
  letter-spacing: 0.03em !important;
  border-radius: 0 !important;
  transition   : border-color 300ms ease, box-shadow 300ms ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline    : none !important;
  box-shadow : 0 2px 0 var(--pf-gold) !important;
}

label {
  font-family   : var(--pf-body) !important;
  font-weight   : 500 !important;
  font-size     : 0.68rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}


/* ─────────────────────────────────────────────────────────────────────
   11. FOOTER
   ───────────────────────────────────────────────────────────────────── */
footer,
.footer,
#footer {
  padding    : 6rem 5rem 3.5rem !important;
  text-align : center !important;
  position   : relative !important;
}

/* Gold diamond ornament above footer content */
footer::before,
.footer::before {
  content      : '\25C6' !important;  /* ◆ */
  display      : block !important;
  font-size    : 0.55rem !important;
  color        : var(--pf-gold) !important;
  letter-spacing: 0.3em !important;
  margin-bottom: 3rem !important;
  opacity      : 0.60 !important;
}

footer p,
.footer p,
.footer-text {
  font-family   : var(--pf-body) !important;
  font-weight   : 300 !important;
  font-size     : 0.73rem !important;
  letter-spacing: 0.12em !important;
  opacity       : 0.45 !important;
  margin-bottom : 0.5rem !important;
}

footer a,
.footer a,
.footer-nav a {
  font-family   : var(--pf-body) !important;
  font-weight   : 400 !important;
  font-size     : 0.68rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  margin        : 0 1.2rem !important;
  opacity       : 0.55 !important;
  transition    : opacity 250ms ease !important;
}

footer a:hover,
.footer a:hover {
  opacity: 1 !important;
}


/* ─────────────────────────────────────────────────────────────────────
   12. SCROLL REVEAL ANIMATIONS
   Classes added dynamically by premium.js IntersectionObserver
   ───────────────────────────────────────────────────────────────────── */
.pf-reveal {
  opacity   : 0;
  transform : translateY(22px);
  transition:
    opacity   750ms var(--pf-ease),
    transform 750ms var(--pf-ease);
}

.pf-reveal.pf-visible {
  opacity   : 1;
  transform : translateY(0);
}

/* Stagger gallery items (0–8 repeat) */
.pf-reveal:nth-child(9n+1) { transition-delay: 40ms;  }
.pf-reveal:nth-child(9n+2) { transition-delay: 80ms;  }
.pf-reveal:nth-child(9n+3) { transition-delay: 120ms; }
.pf-reveal:nth-child(9n+4) { transition-delay: 160ms; }
.pf-reveal:nth-child(9n+5) { transition-delay: 200ms; }
.pf-reveal:nth-child(9n+6) { transition-delay: 240ms; }
.pf-reveal:nth-child(9n+7) { transition-delay: 280ms; }
.pf-reveal:nth-child(9n+8) { transition-delay: 320ms; }
.pf-reveal:nth-child(9n)   { transition-delay: 360ms; }


/* ─────────────────────────────────────────────────────────────────────
   13. BACK-TO-TOP BUTTON (injected by premium.js)
   ───────────────────────────────────────────────────────────────────── */
.pf-backtop {
  position    : fixed !important;
  bottom      : 2.5rem !important;
  right       : 2.5rem !important;
  width       : 46px !important;
  height      : 46px !important;
  border-radius: 50% !important;
  background  : rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border      : 1px solid rgba(0, 0, 0, 0.09) !important;
  cursor      : pointer !important;
  display     : flex !important;
  align-items : center !important;
  justify-content: center !important;
  z-index     : 9999 !important;
  opacity     : 0 !important;
  transform   : translateY(10px) !important;
  transition  :
    opacity   400ms ease,
    transform 400ms ease,
    box-shadow 300ms ease !important;
  box-shadow  : var(--pf-shadow-soft) !important;
  color       : rgba(0, 0, 0, 0.55) !important;
  font-size   : 1.05rem !important;
  line-height : 1 !important;
  font-family : var(--pf-body) !important;
  font-weight : 200 !important;
}

.pf-backtop.pf-visible {
  opacity  : 1 !important;
  transform: translateY(0) !important;
}

.pf-backtop:hover {
  box-shadow: var(--pf-shadow-float) !important;
  transform : translateY(-3px) !important;
  color     : rgba(0, 0, 0, 0.88) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   14. PAGE ENTRANCE
   ───────────────────────────────────────────────────────────────────── */
@keyframes pf-pagein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; }
  /* NOTE: no transform in the "to" state on purpose.
     If the to-keyframe includes transform:translateY(0), the animation
     fill-mode:"both" leaves a computed transform on <body> after the
     animation completes.  Any non-none transform on an ancestor breaks
     position:fixed for ALL descendants (CSS spec §9.7) — so the lightbox
     and reels would be positioned relative to the body top instead of the
     viewport.  Keeping only opacity in "to" means the final fill state
     has no transform, and position:fixed children work correctly. */
}

.pf-pagein {
  animation: pf-pagein 700ms var(--pf-ease) both;
}


/* ─────────────────────────────────────────────────────────────────────
   15. RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  nav, .navbar, .navigation { padding: 1.6rem 3rem !important; }
  nav.pf-scrolled, .navbar.pf-scrolled { padding: 1.0rem 3rem !important; }
  section, .section { padding: 7rem 3.5rem !important; }
  .gallery, #gallery, .photos { padding: 1rem 3rem 4rem !important; }
  footer, .footer { padding: 5rem 3.5rem 3rem !important; }
}

@media (max-width: 1024px) {
  nav, .navbar { padding: 1.4rem 2.5rem !important; }
  nav.pf-scrolled, .navbar.pf-scrolled { padding: 0.9rem 2.5rem !important; }
  .gallery, #gallery, .photos {
    column-count: 2 !important;
    padding: 1rem 2.5rem 3.5rem !important;
  }
}

@media (max-width: 768px) {
  nav, .navbar { padding: 1.2rem 1.5rem !important; }
  nav.pf-scrolled, .navbar.pf-scrolled { padding: 0.8rem 1.5rem !important; }
  section, .section { padding: 5rem 1.5rem !important; }
  .gallery, #gallery, .photos {
    column-count: 2 !important;
    column-gap: 0.75rem !important;
    padding: 0.75rem 1rem 2.5rem !important;
  }
  footer, .footer { padding: 4rem 1.5rem 2.5rem !important; }
}

@media (max-width: 520px) {
  .gallery, #gallery, .photos {
    column-count: 1 !important;
    padding: 0.5rem 0.75rem 2rem !important;
  }
  section, .section { padding: 4rem 1.2rem !important; }
  .pf-backtop { bottom: 1.5rem !important; right: 1.5rem !important; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration    : 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration   : 0.01ms !important;
  }
  .pf-reveal { opacity: 1 !important; transform: none !important; }
}