/* ═══════════════════════════════════════════════════════════
   DEDULA COLOUR — STYLESHEET v7
   ─────────────────────────────────────────────────────────
   TABLE OF CONTENTS
   1.  Reset & Root Variables
   2.  Base Styles
   3.  Navigation
   4.  Nav Active Indicator
   5.  Hamburger & Mobile Menu
   6.  Portfolio Gallery (index.html)
   7.  Gallery Filter Tabs
   8.  Gallery Expand (View the Rest)
   9a. Gallery Overflow Modal (fullscreen grid)
   9b. Gallery Lightbox (individual image viewer)
   10. Shared Section Styles
   11. Showreel
   12. About
   13. Contact & Form
   14. Buttons
   15. Footer
   16. Cookie Consent Banner
   17. Scroll Reveal Animations
   18. Responsive Breakpoints
═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   1. RESET & ROOT VARIABLES
   ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Critical: ensure [hidden] attribute always wins over CSS display rules */
[hidden] { display: none !important; }

:root {
  --bg: #080808;
  --bg-2: #101010;
  --surface: #181818;
  --border: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.18);
  --text: #f0ece6;
  --text-muted: #7a7672;
  --accent: #c9a96e;
  --ff-display: "Cormorant Garamond", Georgia, serif;
  --ff-ui: "Syne", "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 64px;
  --max-w: 1280px;
  --pad-x: 2.5rem;
  --gallery-img-max: 840px;   /* reduced from 960 — more editorial breathing room */
}


/* ─────────────────────────────────────────────
   2. BASE STYLES
   ───────────────────────────────────────────── */
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-ui);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }


/* ─────────────────────────────────────────────
   3. NAVIGATION
   ───────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav.scrolled {
  background: rgba(8, 8, 8, 0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom-color: var(--border);
}
.nav-brand {
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: opacity 0.2s var(--ease);
  cursor: pointer;
}
.nav-brand:hover { opacity: 0.65; }
.nav-logo {
  font-family: var(--ff-ui);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.nav-logo span { color: var(--accent); }
.nav-slogan {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nav-links { display: flex; align-items: center; gap: 2.5rem; }
.nav-links a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-cta {
  padding: 0.5rem 1.2rem !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s !important;
}
.nav-cta:hover { background: var(--accent) !important; color: var(--bg) !important; }


/* ─────────────────────────────────────────────
   4. NAV ACTIVE LINK INDICATOR
   ───────────────────────────────────────────── */
.nav-links a:not(.nav-cta) { position: relative; padding-bottom: 2px; }
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-links a:not(.nav-cta).active { color: var(--text); }
.nav-links a:not(.nav-cta).active::after { transform: scaleX(1); }


/* ─────────────────────────────────────────────
   5. HAMBURGER & MOBILE MENU
   ───────────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 36px; height: 36px;
  background: none; border: none;
  cursor: pointer; padding: 4px; flex-shrink: 0;
}
.hamburger span {
  display: block;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.3s;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.hamburger.open span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 8, 8, 0.97);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-menu ul { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.mobile-menu a {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.mobile-menu a:hover { color: var(--text); }
.nav-spacer { height: var(--nav-h); }


/* ─────────────────────────────────────────────
   6. PORTFOLIO GALLERY (index.html)
   ─────────────────────────────────────────────
   Editorial single-column layout.
   Caption sits ABOVE each image as a header row.
   Images constrained to --gallery-img-max (840px).
   ───────────────────────────────────────────── */
.pg-gallery {
  padding-top: var(--nav-h);
  padding-bottom: 2rem;
}

/* Each image block — tighter top padding for better flow */
.gallery-item {
  padding: 4rem var(--pad-x) 0;
  margin: 0;
}

/* Image container — editorial width, 16:9 ratio */
.gallery-img-wrap {
  width: 100%;
  max-width: var(--gallery-img-max);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  position: relative;
}
.gallery-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.gallery-item:hover .gallery-img-wrap img { transform: scale(1.02); }

/* Caption ABOVE the image — editorial header for each piece */
.gallery-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  max-width: var(--gallery-img-max);
  margin: 0 auto 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--border);
}

.gallery-num {
  font-family: var(--ff-ui);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.gallery-title {
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.03em;
  color: var(--text);
  text-align: center;
  flex: 1;
  padding: 0 1.5rem;
}
.gallery-cat {
  font-family: var(--ff-ui);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}

/* Scroll-reveal: items start invisible and pop up */
.reveal-item {
  opacity: 0;
  transform: translateY(60px) scale(0.97);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal-item.in-view { opacity: 1; transform: translateY(0) scale(1); }


/* ─────────────────────────────────────────────
   7. GALLERY FILTER TABS
   ───────────────────────────────────────────── */
.gallery-filters {
  display: flex;
  align-items: center;
  padding: 1.25rem var(--pad-x) 0;
  border-bottom: 1px solid var(--border);
  gap: 0;
}
.filter-btn {
  background: none; border: none;
  font-family: var(--ff-ui);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  white-space: nowrap;
}
.filter-btn::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}
.filter-btn.active { color: var(--text); }
.filter-btn.active::after { transform: scaleX(1); }
.filter-btn:hover { color: var(--text); }


/* ─────────────────────────────────────────────
   8. GALLERY EXPAND — "VIEW THE REST"
   ─────────────────────────────────────────────
   The label text dynamically reflects the active
   filter: "stills" (All), "film" (Film), or
   "photos" (Photo) — set by script.js.
   ───────────────────────────────────────────── */
.gallery-expand {
  padding: 5rem var(--pad-x) 1.5rem;
  display: flex;
  justify-content: center;
}
.gallery-expand-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 3rem 4rem;
  border: 1px solid var(--border);
  max-width: 480px;
  width: 100%;
  transition: border-color 0.3s var(--ease);
}
.gallery-expand-inner:hover { border-color: var(--border-hover); }
.gallery-expand-label {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.gallery-expand-btn {
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--ff-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.85rem 2.5rem;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.gallery-expand-btn:hover { background: var(--accent); color: var(--bg); }


/* ─────────────────────────────────────────────
   9a. GALLERY OVERFLOW MODAL — Fullscreen grid
   ─────────────────────────────────────────────
   Opens full-screen when "View the Rest" is clicked.
   Shows all overflow images as a clickable grid.
   Each image click opens the lightbox viewer (9b).
   Close: X button or Escape key.
   ───────────────────────────────────────────── */
.gallery-modal {
  display: none;          /* shown via .open class */
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  flex-direction: column;
  overflow: hidden;
}
.gallery-modal.open { display: flex; }

/* Sticky header bar inside the modal */
.gallery-modal-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--pad-x);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.gallery-modal-head-left { display: flex; align-items: baseline; gap: 1rem; }
.gallery-modal-title {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
}
.gallery-modal-subtitle {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.gallery-modal-close {
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.4rem;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s;
  flex-shrink: 0;
}
.gallery-modal-close:hover { color: var(--text); }

/* Scrollable image grid — 3 columns desktop, 2 tablet, 1 small mobile */
.gallery-modal-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  align-content: start;
}

/* Individual thumbnail cell */
.gallery-modal-item {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  position: relative;
  cursor: pointer;
}
.gallery-modal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease-out);
}
.gallery-modal-item:hover img { transform: scale(1.04); }

/* Caption overlay — fades in on hover */
.gallery-modal-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(transparent, rgba(8, 8, 8, 0.82));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.gallery-modal-item:hover .gallery-modal-caption { opacity: 1; }
.gallery-modal-cap-num { font-size: 0.6rem; letter-spacing: 0.16em; color: var(--text-muted); }
.gallery-modal-cap-title { font-family: var(--ff-display); font-size: 0.85rem; font-style: italic; color: var(--text); }
.gallery-modal-cap-cat { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }


/* ─────────────────────────────────────────────
   9b. GALLERY LIGHTBOX — Individual image viewer
   ─────────────────────────────────────────────
   Appears on top of the gallery modal (z: 300).
   Opened when a grid thumbnail is clicked.
   Navigate: ← → buttons or keyboard arrow keys.
   Swipe left/right also works on touch devices.
   Close: X button returns to the grid view.
   ───────────────────────────────────────────── */
.gallery-lightbox {
  display: none;          /* shown via .open class */
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(4, 4, 4, 0.97);
  flex-direction: column;
  align-items: stretch;
}
.gallery-lightbox.open { display: flex; }

/* Top bar: image counter on left, close button on right */
.lightbox-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
}
.lightbox-counter {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lightbox-close {
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.4rem;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s;
}
.lightbox-close:hover { color: var(--text); }

/* Image display area — uses remaining viewport height */
.lightbox-img-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 5.5rem;   /* horizontal padding creates space for arrow buttons */
  min-height: 0;
  overflow: hidden;
}
.lightbox-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: opacity 0.22s var(--ease);
}

/* Prev / Next navigation arrows */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(8, 8, 8, 0.55);
  border: 1px solid var(--border-hover);
  color: var(--text-muted);
  cursor: pointer;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  z-index: 2;
}
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-prev:hover { background: rgba(201,169,110,0.12); border-color: var(--accent); color: var(--accent); transform: translateY(-50%) translateX(-2px); }
.lightbox-next:hover { background: rgba(201,169,110,0.12); border-color: var(--accent); color: var(--accent); transform: translateY(-50%) translateX(2px); }
.lightbox-prev:disabled,
.lightbox-next:disabled { opacity: 0.18; cursor: default; pointer-events: none; }

/* Caption bar at the bottom */
.lightbox-footer {
  flex-shrink: 0;
  padding: 1rem 1.5rem 1.75rem;
  border-top: 1px solid var(--border);
}
.lightbox-caption {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.lightbox-cap-num { font-size: 0.6rem; letter-spacing: 0.18em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lightbox-cap-title { font-family: var(--ff-display); font-size: 1.05rem; font-style: italic; color: var(--text); }
.lightbox-cap-cat { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }


/* ─────────────────────────────────────────────
   10. SHARED SECTION STYLES
   ───────────────────────────────────────────── */
.section-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.section-header {
  max-width: var(--max-w);
  margin: 0 auto 2.5rem; /* was 3.5rem — tighter for better content proximity */
}
.section-header h2 {
  font-family: var(--ff-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1.15;
}
.section-header h2 em { font-style: italic; }


/* ─────────────────────────────────────────────
   11. SHOWREEL (work.html)
   ───────────────────────────────────────────── */
.showreel { padding: 2.5rem var(--pad-x); } /* was 3rem */
.showreel-player { max-width: var(--max-w); margin: 0 auto; display: flex; justify-content: center; }
.video-wrap {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ─────────────────────────────────────────────
   12. ABOUT (work.html)
   ───────────────────────────────────────────── */
.about {
  padding: 2.5rem var(--pad-x); /* was 3rem */
  border-top: 1px solid var(--border);
}
.about-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.7fr;
  gap: 5rem; /* was 6rem */
  align-items: start;
}
.about-text h2 {
  font-family: var(--ff-display);
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  font-weight: 300;
  line-height: 1.12;
  margin-bottom: 1.5rem;
}
.about-text h2 em { font-style: italic; }
.about-text p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.85;
  max-width: 460px;
  margin-bottom: 2.5rem;
}
.about-visual {
  aspect-ratio: 2/3;
  max-height: 560px;
  overflow: hidden;
  position: relative;
}
.about-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }


/* ─────────────────────────────────────────────
   13. CONTACT & FORM (work.html)
   ───────────────────────────────────────────── */
.contact {
  padding: 2.5rem var(--pad-x); /* was 3rem */
  border-top: 1px solid var(--border);
}
.contact-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 7rem;
  align-items: start;
}
.contact-text h2 {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 300;
  line-height: 1.12;
  margin-bottom: 0.5rem;
}
.contact-text h2 em { font-style: italic; }
.contact-text p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 2rem; }
.contact-meta { display: flex; flex-direction: column; gap: 0.4rem; }
.contact-email { font-size: 0.85rem; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.2s; }
.contact-email:hover { opacity: 0.75; }
.contact-location { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text);
  font-family: var(--ff-ui);
  font-size: 0.9rem;
  padding: 0.85rem 1rem;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); opacity: 0.6; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--accent); }
.form-group textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237a7672' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.form-group select option { background: #1c1c1c; color: var(--text); }
.contact-links { display: flex; gap: 1.75rem; margin-top: 1.5rem; flex-wrap: wrap; }


/* ─────────────────────────────────────────────
   14. BUTTONS
   ───────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 2rem;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--ff-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.form-success { display: none; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1rem; gap: 1rem; }
.form-success.visible { display: flex; }
.success-icon { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--accent); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.2rem; }
.form-success h4 { font-family: var(--ff-display); font-size: 1.6rem; font-weight: 400; }
.form-success p { font-size: 0.9rem; color: var(--text-muted); }


/* ─────────────────────────────────────────────
   15. FOOTER
   ───────────────────────────────────────────── */
.footer { padding: 1.5rem var(--pad-x); border-top: 1px solid var(--border); }
.footer-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.footer-logo { font-family: var(--ff-ui); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.2em; text-transform: uppercase; }
.footer-logo em { font-style: normal; color: var(--accent); }
.footer-brand p { font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.35rem; }
.footer-links { display: flex; gap: 2rem; }
.footer-links a { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s; }
.footer-links a:hover { color: var(--text); }
.social-link { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s; }
.social-link:hover { color: var(--text); }
.social-link:hover .social-icon { stroke: var(--accent); }
.social-icon { width: 15px; height: 15px; flex-shrink: 0; transition: stroke 0.2s; }
.footer-bottom { max-width: var(--max-w); margin: 0 auto; border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.footer-copy-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.footer-copy-row p { font-size: 0.65rem; color: var(--text-muted); letter-spacing: 0.08em; }
.footer-copy-row a { color: var(--text-muted); transition: color 0.2s; }
.footer-copy-row a:hover { color: var(--text); }
.footer-legal { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.footer-legal a { font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s; }
.footer-legal a:hover { color: var(--text); }


/* ─────────────────────────────────────────────
   16. COOKIE CONSENT BANNER
   ───────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 400;             /* above lightbox */
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 1.25rem var(--pad-x);
  transform: translateY(100%);
  transition: transform 0.45s var(--ease-out);
  pointer-events: none;
}
.cookie-banner.visible { transform: translateY(0); pointer-events: all; }
.cookie-banner-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; }
.cookie-banner-text p:first-child { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); margin-bottom: 0.3rem; }
.cookie-banner-text p:last-child { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; max-width: 540px; }
.cookie-banner-actions { display: flex; gap: 0.75rem; flex-shrink: 0; }
.cookie-btn { font-family: var(--ff-ui); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.65rem 1.35rem; border-radius: 2px; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s, opacity 0.2s; white-space: nowrap; }
.cookie-btn-secondary { background: none; border: 1px solid var(--border-hover); color: var(--text-muted); }
.cookie-btn-secondary:hover { border-color: var(--text-muted); color: var(--text); }
.cookie-btn-primary { background: var(--accent); border: 1px solid var(--accent); color: var(--bg); }
.cookie-btn-primary:hover { opacity: 0.85; }


/* ─────────────────────────────────────────────
   17. SCROLL REVEAL ANIMATIONS
   ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .reveal-item { opacity: 1; transform: none; }
  .gallery-modal { transition: none; }
  .gallery-lightbox { transition: none; }
  .cookie-banner { transition: none; }
}


/* ═══════════════════════════════════════════════
   18. RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════ */

/* ── Large ≥ 1440px ── */
@media (min-width: 1440px) {
  :root { --pad-x: 3.5rem; --gallery-img-max: 940px; }
}

/* ── Tablet ≤ 1024px ── */
@media (max-width: 1024px) {
  :root { --pad-x: 2rem; }
  .about-inner { grid-template-columns: 1fr; gap: 3.5rem; max-width: 640px; }
  .about-text p { max-width: 100%; }
  .about-visual { aspect-ratio: 2/3; max-height: none; order: 1; }
  .contact-inner { grid-template-columns: 1fr; gap: 3.5rem; max-width: 640px; }
  /* Gallery modal: 2-column grid on tablet */
  .gallery-modal-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile ≤ 768px ── */
@media (max-width: 768px) {
  :root { --nav-h: 56px; --pad-x: 1.5rem; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }
  .gallery-item { padding-top: 3rem; }
  .gallery-title { font-size: 0.88rem; padding: 0 0.75rem; }
  .gallery-filters { overflow-x: auto; padding-top: 1rem; }
  .gallery-expand { padding: 3rem var(--pad-x) 2rem; }
  .gallery-expand-inner { padding: 2rem 2rem; }
  .contact-links { gap: 1.25rem; }
  .about-visual { aspect-ratio: 2/3; max-height: 380px; width: 78%; margin: 0 auto; order: 1; }
  .about { padding: 2rem var(--pad-x); }
  .showreel { padding: 2rem var(--pad-x); }
  .contact { padding: 2rem var(--pad-x); }
  .footer { padding: 1rem var(--pad-x); }
  .form-row { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .cookie-banner-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  /* Lightbox arrows tighter on mobile */
  .lightbox-img-wrap { padding: 0.5rem 3.5rem; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; }
}

/* ── Small mobile ≤ 480px ── */
@media (max-width: 480px) {
  .about-text h2 { font-size: 2.25rem; }
  .contact-text h2 { font-size: 2.25rem; }
  .gallery-expand-inner { padding: 2rem 1.5rem; }
  .filter-btn { padding: 0.75rem 0.9rem; font-size: 0.62rem; }
  .about-visual { max-height: 320px; width: 88%; }
  .footer-legal { gap: 1.25rem; }
  /* Gallery modal: single column on small phones */
  .gallery-modal-grid { grid-template-columns: 1fr; }
  /* Lightbox arrows closer to edge */
  .lightbox-img-wrap { padding: 0.5rem 2.75rem; }
  .lightbox-prev { left: 0.25rem; }
  .lightbox-next { right: 0.25rem; }
  .lightbox-prev, .lightbox-next { width: 34px; height: 34px; }
}


/* ═══════════════════════════════════════════════════════════
   v8 ADDITIONS
   ─────────────────────────────────────────────────────────
   • Nav mobile-only Inquire CTA (centered between logo/hamburger)
   • Footer logo as clickable link
   • Smaller gallery images on small mobile
   • Mobile/touch hover effects for gallery items & modal grid
   • Send Inquiry button centered on mobile
═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   v9 ADDITIONS — 2-column pair gallery layout
   ─────────────────────────────────────────────────────────
   • gallery-grid: 2-column CSS grid, 2 cols on ALL screen sizes
   • gallery-section-divider: category headers in "All" filter view
   • Responsive: gaps shrink on smaller screens, never 1-column
═══════════════════════════════════════════════════════════ */

/* ── Gallery grid — 2-column pair layout ─────────────────────
   Wraps all gallery-item figures in a 2-column grid.
   Row spacing handled by row-gap; col spacing by column-gap.
   To add more breathing room between rows:  increase row-gap.
   To tighten images side-by-side:           decrease column-gap.
──────────────────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2.5rem;
  row-gap: 4rem;
  padding: 2rem var(--pad-x) 0;
}

/* Items inside the grid no longer need their own side padding
   (the grid container handles all spacing) */
.gallery-grid .gallery-item {
  padding: 0;
}

/* Remove editorial centering max-width — images fill the column */
.gallery-grid .gallery-img-wrap {
  max-width: 100%;
  margin: 0;
  cursor: pointer; /* images are clickable — opens lightbox */
}
.gallery-grid .gallery-caption {
  max-width: 100%;
  margin-bottom: 0.875rem;
  margin-left: 0;
  margin-right: 0;
}

/* Subtle darkening overlay on hover to signal the image is clickable.
   The ::after pseudo-element sits above the image but below captions. */
.gallery-grid .gallery-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0);
  transition: background 0.35s var(--ease);
  pointer-events: none; /* let clicks pass through to the image */
}
.gallery-grid .gallery-item:hover .gallery-img-wrap::after {
  background: rgba(8, 8, 8, 0.22);
}
/* Touch: show the overlay on press too */
@media (hover: none) and (pointer: coarse) {
  .gallery-grid .gallery-item:active .gallery-img-wrap::after {
    background: rgba(8, 8, 8, 0.28);
    transition: none;
  }
}

/* ── Category section dividers (visible only in "All" filter) ──
   Span both columns. JS shows/hides them.
   Border-bottom acts as a visual rule between section label
   and the images below. Row-gap above provides breathing room.
──────────────────────────────────────────────────────────── */
.gallery-section-divider {
  grid-column: 1 / -1;     /* span full width of the 2-column grid */
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.gallery-section-label {
  font-family: var(--ff-ui);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── All screen sizes: keep 2 columns, tighten spacing ──────
   2-column layout is maintained everywhere — images shrink to
   fit, gaps tighten. Never collapses to 1 column.
──────────────────────────────────────────────────────────── */

/* Tablet / small laptop ≤ 900px */
@media (max-width: 900px) {
  .gallery-grid {
    column-gap: 1.5rem;
    row-gap: 3rem;
    padding: 1.5rem var(--pad-x) 0;
  }
}

/* Mobile ≤ 768px — single column, normal font sizes */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr;   /* ← back to single column */
    column-gap: 0;
    row-gap: 2.5rem;
    padding: 1.25rem var(--pad-x) 0;
  }
}

/* Small mobile ≤ 480px */
@media (max-width: 480px) {
  .gallery-grid {
    row-gap: 2rem;
    padding: 1rem var(--pad-x) 0;
  }
}

/* Tiny phones ≤ 360px */
@media (max-width: 360px) {
  .gallery-grid {
    padding: 0.875rem var(--pad-x) 0;
  }
}


/* ── Nav mobile Inquire CTA ──────────────────────────────────
   Hidden on desktop (nav-links Inquire shows instead).
   Visible on ≤768px, sits centered between logo and hamburger.
   justify-content: space-between on the nav auto-centres it.
─────────────────────────────────────────────────────────── */
.nav-mobile-cta {
  display: none;
}

@media (max-width: 768px) {
  .nav-mobile-cta {
    display: inline-flex;
    align-items: center;
    font-family: var(--ff-ui);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 0.42rem 0.85rem;
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
    margin-left: auto;       /* absorbs all leftover space — shoves button right */
    margin-right: 0.75rem;   /* breathing room between button and hamburger */
  }
   .nav-mobile-cta:hover {
    background: var(--accent);
    color: var(--bg);
  }
  .nav-mobile-cta:active {
    background: var(--accent);
    color: var(--bg);
  }
}


/* ── Footer logo as a link ───────────────────────────────────
   The footer brand name is now an <a href="index.html">.
   Override default link styles so it looks identical to before
   but responds to hover/tap.
─────────────────────────────────────────────────────────── */
a.footer-logo {
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s;
}
a.footer-logo:hover { opacity: 0.75; }
a.footer-logo:active { opacity: 0.6; }


/* ── Gallery images smaller on small mobile ──────────────────
   Increases horizontal padding at ≤480px so images sit with
   more breathing room on either side, making them feel smaller
   and less overwhelming on phone screens.
   Note: .gallery-grid .gallery-item has padding: 0 (grid handles spacing),
   so we only target standalone gallery-items (outside the grid) here.
─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .gallery-grid {
    padding: 2.5rem 1.5rem 0;  /* tighter side padding on small phones */
    row-gap: 2.5rem;
  }
  /* Match the caption max-width to the now-narrower image */
  .gallery-caption {
    max-width: 100%;
  }
}


/* ── Mobile / touch hover effects ───────────────────────────
   On touch-primary devices (phones/tablets), CSS :hover doesn't
   fire reliably. These rules replace hover with:
     • :active — immediate press feedback (scale, opacity)
     • Persistent captions in the gallery modal grid
       (since there's no mouse to hover over thumbnails)
─────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {

  /* Main gallery: tap to flash the zoom effect */
  .gallery-item:active .gallery-img-wrap img {
    transform: scale(1.025);
    opacity: 0.9;
    transition: transform 0.18s var(--ease), opacity 0.18s;
  }

  /* Gallery expand button: immediate tap fill */
  .gallery-expand-btn:active {
    background: var(--accent);
    color: var(--bg);
    transition: none;
  }

  /* Filter tabs: visible tap highlight */
  .filter-btn:active {
    color: var(--text);
    background: rgba(201, 169, 110, 0.08);
    transition: none;
  }

  /* Gallery modal grid:
     Captions are ALWAYS visible at 85% opacity (no hover available).
     On tap/active they go full opacity with a zoom flash.       */
  .gallery-modal-caption {
    opacity: 0.85;
    background: linear-gradient(transparent 20%, rgba(8, 8, 8, 0.85));
  }
  .gallery-modal-item:active img {
    transform: scale(1.03);
    opacity: 0.88;
    transition: transform 0.15s var(--ease), opacity 0.15s;
  }
  .gallery-modal-item:active .gallery-modal-caption {
    opacity: 1;
    transition: none;
  }

  /* Lightbox nav arrows: larger tap targets on touch */
  .lightbox-prev,
  .lightbox-next {
    width: 52px;
    height: 52px;
  }
  .lightbox-prev:active,
  .lightbox-next:active {
    background: rgba(201, 169, 110, 0.18);
    border-color: var(--accent);
    color: var(--accent);
    transition: none;
  }

  /* Lightbox close: easy to tap */
  .lightbox-close:active,
  .gallery-modal-close:active {
    color: var(--text);
    transition: none;
  }
}


/* ── Send Inquiry button centered on mobile ──────────────────
   The contact form is a flex column; the button defaults to
   stretching full-width. Centering it on mobile gives a more
   considered, focused CTA layout.
─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #contactForm .btn-primary {
    align-self: center;
    min-width: 200px;
  }
}