/* ==========================================================================
   Jay's Creative Visuals — Main Stylesheet
   Photo & Video Production Portfolio Website
   ========================================================================== */

/* ---------- 1. CSS Custom Properties (Design Tokens) ---------- */
:root {
  --color-bg: #0c0c0e;
  --color-bg-alt: #141417;
  --color-surface: #1b1b20;
  --color-surface-light: #232329;
  --color-border: #2c2c33;
  --color-text: #f5f3ee;
  --color-text-muted: #b7b3ac;
  --color-text-faint: #85817b;
  --color-accent: #d4a24e;
  --color-accent-light: #e8c07a;
  --color-accent-dark: #a97f34;
  --color-overlay: rgba(10, 10, 12, 0.72);
  --color-overlay-light: rgba(10, 10, 12, 0.45);
  --color-success: #4caf7d;
  --color-error: #e0616b;

  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --fs-sm: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-md: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --fs-lg: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-xl: clamp(2rem, 1.6rem + 1.6vw, 3.2rem);
  --fs-xxl: clamp(2.6rem, 1.9rem + 3vw, 5rem);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-xxl: 7rem;

  --container-width: 1240px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --transition: 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  --header-height: 84px;
}

/* ---------- 2. Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-base);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* IMPORTANT: height:auto ensures images with HTML width/height attributes (used to
   prevent layout shift) still respect any CSS aspect-ratio / width:100% rules instead
   of the browser locking in the attribute's pixel height and distorting the image. */
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.15; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

section { position: relative; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

/* No-JS fallback: if JavaScript is disabled/blocked, reveal items must still show */
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- 3. Section Heading Pattern ---------- */
.section-heading { text-align: center; max-width: 680px; margin-inline: auto; margin-bottom: var(--space-xl); }
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}
.section-heading h2 { font-size: var(--fs-xl); margin-bottom: var(--space-sm); }
.section-heading p { color: var(--color-text-muted); font-size: var(--fs-md); }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2.1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
  border: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
  color: #1b1406;
  box-shadow: 0 8px 24px rgba(212, 162, 78, 0.28);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(212, 162, 78, 0.4); }
.btn-outline { border: 1.5px solid rgba(245, 243, 238, 0.4); color: var(--color-text); background: rgba(245, 243, 238, 0.04); }
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent-light); transform: translateY(-3px); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* ---------- 5. Header / Navigation ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition), height var(--transition);
}
.site-header.is-scrolled {
  background: rgba(12, 12, 14, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  height: 72px;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Guarantees a minimum breathing-room gap between the logo, nav links, and Book Now
     button even when justify-content: space-between has zero free space left to
     distribute (e.g. on very wide screens where the nav menu's own gaps have already
     maxed out) — without this, elements can end up rendering flush against each other. */
  gap: clamp(0.75rem, 2vw, 2rem);
}
.logo {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 0.85rem);
  /* flex-shrink: 0 is important here — the tagline uses white-space:nowrap, so if the
     browser's default flex-shrink tries to compress this box below its natural content
     width, the un-wrappable text visually overflows the box and collides with the nav
     menu next to it. Keeping the logo at its natural size and letting the nav links
     (which have room to compress their gaps) absorb any space pressure instead avoids
     that collision entirely. */
  flex-shrink: 0;
}
.logo-mark {
  height: clamp(30px, 5vw, 42px);
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(212, 162, 78, 0.3));
  transition: transform var(--transition);
}
.logo:hover .logo-mark { transform: scale(1.06); }
.logo-tagline {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
  border-left: 1px solid var(--color-border);
  padding-left: clamp(0.5rem, 1.5vw, 0.85rem);
  line-height: 1.3;
}

/* Hide the tagline on the smallest screens so the mark never gets cramped or overflows */
@media (max-width: 420px) {
  .logo-tagline { display: none; }
}

.nav-menu { display: flex; align-items: center; gap: clamp(1.1rem, 1.6vw, 2rem); }
.nav-menu a {
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  padding: 6px 0;
  color: var(--color-text);
  transition: color var(--transition);
}
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--color-accent);
  transition: width var(--transition);
}
.nav-menu a:hover, .nav-menu a.active { color: var(--color-accent-light); }
.nav-menu a:hover::after, .nav-menu a.active::after { width: 100%; }
.nav-cta { display: none; flex-shrink: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  z-index: 1100;
  width: 32px;
  padding: 8px 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition), background var(--transition);
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: linear-gradient(var(--color-overlay), var(--color-overlay)), url('../media/hero-photo.jpg') center 30%/cover no-repeat;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-bg) 0%, transparent 24%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  /* margin: auto 0 vertically centers this block WITHIN the column-flex .hero, while still
     allowing it to sit in normal document flow above the scroll indicator below — so the two
     can never overlap, no matter how tall the content gets on any given screen size/font scale. */
  margin: auto 0;
  padding-top: calc(var(--header-height) + var(--space-lg));
  padding-bottom: var(--space-lg);
}
.hero-content .eyebrow { color: var(--color-accent-light); }
.hero-content h1 { font-size: var(--fs-xxl); margin-bottom: var(--space-md); text-wrap: balance; }
.hero-content h1 em { font-style: italic; color: var(--color-accent-light); }
.hero-content p { font-size: var(--fs-md); color: var(--color-text-muted); max-width: 560px; margin-bottom: var(--space-lg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: flex-start; }
/* On phones, center these action buttons for a more balanced, touch-friendly layout
   (the left-aligned look is intentional on larger screens, matching the left-aligned
   headline above, but reads as awkwardly off-center on narrow phone widths). */
@media (max-width: 639px) {
  .hero-actions { justify-content: center; }
  .hero-actions .btn { flex: 1 1 auto; max-width: 280px; }
}
.hero-meta { margin-top: var(--space-xl); display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.hero-meta div { text-align: left; }
.hero-meta strong { display: block; font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--color-accent-light); }
.hero-meta span { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; }

.scroll-indicator {
  /* Sits in normal flow as the last child of the column-flex .hero, always safely below
     hero-content with guaranteed breathing room — never absolutely positioned on top of it. */
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-lg);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: floatY 2.4s ease-in-out infinite;
}
.scroll-indicator .line { width: 1px; height: 34px; background: linear-gradient(var(--color-accent), transparent); }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* ---------- 7. About ---------- */
.about { padding: var(--space-xxl) 0; background: var(--color-bg-alt); }
.about .container { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
.about-media { position: relative; }
.about-media img {
  border-radius: var(--radius-lg);
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center 30%;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}
.about-badge {
  position: absolute;
  bottom: -20px;
  right: -12px;
  background: var(--color-accent);
  color: #1b1406;
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: 0 16px 32px rgba(0,0,0,0.35);
}
.about-badge strong { display: block; font-family: var(--font-heading); font-size: var(--fs-lg); line-height: 1; }
.about-badge span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

.about-text h2 { font-size: var(--fs-xl); margin-bottom: var(--space-sm); }
.about-text p { color: var(--color-text-muted); margin-bottom: var(--space-sm); }
.about-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin: var(--space-md) 0 var(--space-lg); }
.about-cta { display: flex; justify-content: flex-start; }
/* Same phone-only centering treatment as the hero buttons, for visual consistency. */
@media (max-width: 639px) {
  .about-cta { justify-content: center; }
  .about-cta .btn { flex: 1 1 auto; max-width: 280px; }
}
.about-list li { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-sm); color: var(--color-text); }
.about-list li svg { flex-shrink: 0; color: var(--color-accent); width: 18px; height: 18px; }

/* ---------- 8. Portfolio ---------- */
.portfolio { padding: var(--space-xxl) 0; }
.filter-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--space-lg); }
.filter-btn {
  padding: 0.6rem 1.3rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: all var(--transition);
  background: transparent;
}
.filter-btn:hover { color: var(--color-text); border-color: var(--color-accent); }
.filter-btn.active { background: var(--color-accent); border-color: var(--color-accent); color: #1b1406; }

/* Fluid grid: automatically fits as many columns as comfortably fit (min 165px each),
   so this reflows smoothly at ANY viewport width — phones, foldables, tablets, ultrawide —
   instead of jumping abruptly at only a few hardcoded breakpoints. */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-md);
}
.portfolio-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/5;
  cursor: pointer;
  transition: transform 0.5s ease;
  background: var(--color-surface);
}
.portfolio-item.is-hidden { display: none; }
.portfolio-item img, .portfolio-item video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.portfolio-item:hover img, .portfolio-item:hover video { transform: scale(1.08); }

.portfolio-item.is-video .play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(12,12,14,0.55);
  border: 2px solid rgba(245,243,238,0.85);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), background var(--transition);
  z-index: 2;
}
.portfolio-item.is-video .play-icon svg { width: 20px; height: 20px; color: var(--color-text); margin-left: 3px; }
.portfolio-item.is-video:hover .play-icon { background: var(--color-accent); transform: translate(-50%, -50%) scale(1.1); }
.portfolio-item.is-video:hover .play-icon svg { color: #1b1406; }

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.05) 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-overlay .cat { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent-light); margin-bottom: 4px; }
.portfolio-overlay h4 { font-size: var(--fs-md); }
.portfolio-overlay .zoom-icon {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(245,243,238,0.14);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.portfolio-overlay .zoom-icon svg { width: 18px; height: 18px; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(6,6,7,0.95);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition);
  padding: var(--space-md);
}
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox-content { max-width: 900px; width: 100%; text-align: center; }
.lightbox-content img, .lightbox-content video { max-height: 78vh; margin-inline: auto; border-radius: var(--radius-sm); width: auto; max-width: 100%; }
.lightbox-caption { margin-top: var(--space-sm); color: var(--color-text-muted); }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  color: var(--color-text);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(245,243,238,0.1);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: var(--color-accent); color: #1b1406; }
.lightbox-close { top: var(--space-md); right: var(--space-md); }
.lightbox-prev { left: var(--space-md); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--space-md); top: 50%; transform: translateY(-50%); }

/* ---------- 9. Services ---------- */
.services { padding: var(--space-xxl) 0; background: var(--color-bg-alt); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}
.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  position: relative;
}
.service-card:hover { transform: translateY(-8px); border-color: var(--color-accent); box-shadow: 0 24px 48px -20px rgba(0,0,0,0.5); }
.service-card.featured { border-color: var(--color-accent); background: linear-gradient(180deg, rgba(212,162,78,0.08), var(--color-surface) 40%); }
.badge-popular {
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--color-accent);
  color: #1b1406;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 1rem;
  border-radius: 999px;
}
.service-icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  background: rgba(212,162,78,0.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent);
}
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: var(--fs-lg); margin-bottom: 0.3rem; }
.service-price { font-size: var(--fs-xl); font-family: var(--font-heading); color: var(--color-accent-light); margin-bottom: var(--space-sm); }
.service-price span { font-size: var(--fs-sm); color: var(--color-text-muted); font-family: var(--font-body); }
.service-card ul { text-align: left; margin: var(--space-sm) 0 var(--space-lg); display: flex; flex-direction: column; gap: 0.65rem; }
.service-card ul li { display: flex; gap: 0.6rem; font-size: var(--fs-sm); color: var(--color-text-muted); }
.service-card ul li svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--color-accent); margin-top: 3px; }

.addons {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-sm);
}
.addon-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.addon-card .service-icon { margin: 0; flex-shrink: 0; width: 46px; height: 46px; }
.addon-card .service-icon svg { width: 22px; height: 22px; }
.addon-card h4 { font-size: var(--fs-md); margin-bottom: 2px; }
.addon-card p { font-size: var(--fs-sm); color: var(--color-text-muted); }
.addon-card .price { margin-left: auto; color: var(--color-accent-light); font-weight: 700; white-space: nowrap; }

/* ---------- 10. Testimonials ---------- */
.testimonials { padding: var(--space-xxl) 0; text-align: center; }
.testimonial-slider { max-width: 760px; margin-inline: auto; position: relative; min-height: 260px; }
.testimonial-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease; }
.testimonial-slide.active { opacity: 1; visibility: visible; position: relative; }
.testimonial-quote-icon { color: var(--color-accent); width: 40px; height: 40px; margin: 0 auto var(--space-sm); opacity: 0.8; }
.testimonial-slide p.quote { font-family: var(--font-heading); font-size: var(--fs-lg); line-height: 1.5; color: var(--color-text); margin-bottom: var(--space-md); }
.testimonial-stars { color: var(--color-accent); margin-bottom: var(--space-sm); letter-spacing: 3px; }
.testimonial-author strong { display: block; font-size: var(--fs-base); }
.testimonial-author span { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.testimonial-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--space-lg); }
.testimonial-dots button { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); transition: background var(--transition), transform var(--transition); }
.testimonial-dots button.active { background: var(--color-accent); transform: scale(1.3); }

/* ---------- 11. Contact ---------- */
.contact { padding: var(--space-xxl) 0; background: var(--color-bg-alt); }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
.contact-info h2 { font-size: var(--fs-xl); margin-bottom: var(--space-sm); }
.contact-info > p { color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.contact-detail { display: flex; gap: var(--space-sm); align-items: flex-start; margin-bottom: var(--space-md); }
.contact-detail .service-icon { flex-shrink: 0; }
.contact-detail h4 { font-size: var(--fs-base); margin-bottom: 2px; }
.contact-detail p, .contact-detail a { color: var(--color-text-muted); font-size: var(--fs-sm); }
.contact-detail a:hover { color: var(--color-accent-light); }

.social-row { display: flex; gap: 0.8rem; margin-top: var(--space-lg); }
.social-row a {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.social-row a:hover { background: var(--color-accent); border-color: var(--color-accent); color: #1b1406; transform: translateY(-3px); }
.social-row svg { width: 18px; height: 18px; }

.contact-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-md); }
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
.form-group { margin-bottom: var(--space-sm); text-align: left; }
.form-group label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 0.4rem; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: border-color var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent); }
.form-group textarea { resize: vertical; min-height: 120px; }

.form-group input.is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid {
  border-color: var(--color-error);
  background-color: rgba(224, 97, 107, 0.06);
}
.field-error {
  display: none;
  margin-top: 0.4rem;
  font-size: var(--fs-xs);
  color: var(--color-error);
}
.field-error.show { display: block; }
.form-status { margin-top: var(--space-sm); padding: 0.85rem 1rem; border-radius: var(--radius-sm); font-size: var(--fs-sm); display: none; }
.form-status.show { display: block; }
.form-status.success { background: rgba(76,175,125,0.15); color: var(--color-success); border: 1px solid rgba(76,175,125,0.35); }
.form-status.error { background: rgba(224,97,107,0.15); color: var(--color-error); border: 1px solid rgba(224,97,107,0.35); }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(27,20,6,0.3); border-top-color: #1b1406; border-radius: 50%; animation: spin 0.7s linear infinite; display: none; }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .btn-label { opacity: 0.7; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 12. Footer ---------- */
.site-footer { background: var(--color-bg); border-top: 1px solid var(--color-border); padding: var(--space-xl) 0 var(--space-md); }
.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .footer-brand { grid-column: auto; }
}
.footer-brand .logo { margin-bottom: var(--space-sm); }
.footer-brand p { color: var(--color-text-muted); max-width: 320px; font-size: var(--fs-sm); }
.footer-col h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-sm); color: var(--color-accent-light); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a, .footer-col p { color: var(--color-text-muted); font-size: var(--fs-sm); transition: color var(--transition); }
.footer-col a:hover { color: var(--color-accent-light); }
.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
}

/* ---------- 13. Back to top ---------- */
.back-to-top {
  position: fixed;
  bottom: 26px; right: 26px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #1b1406;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: all var(--transition);
  z-index: 900;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top svg { width: 20px; height: 20px; }

/* ---------- 14. Responsive breakpoints ---------- */
@media (min-width: 480px) { .about-list { grid-template-columns: 1fr 1fr; } }

@media (min-width: 560px) {
  .form-row.two-col { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .hero-content h1 { max-width: 640px; }
}

/* Asymmetric 2-column sections (About, Contact): only switch to side-by-side once
   there is genuinely enough room for BOTH minimum column widths to fit comfortably.
   minmax() means neither column can be squeezed smaller than its readable minimum,
   so this never produces the "squished/lopsided" look on in-between tablet widths. */
@media (min-width: 860px) {
  .about .container { grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr); }
}
@media (min-width: 820px) {
  .contact-grid { grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1.1fr); }
}

/* This breakpoint is intentionally 1240px (matching --container-width) rather than a
   more typical 900-1024px: the 6 nav links + logo + "Book Now" button genuinely do not
   fit on one line at narrower widths without the un-wrappable text overlapping/
   overflowing the fixed header — verified empirically, with real overflow persisting
   all the way up to ~1160px. 1240px was bisection-tested to confirm a comfortable
   ~40px safety margin at and above this width, across every measured breakpoint. */
@media (min-width: 1240px) {
  .nav-menu { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

@media (max-width: 1239px) {
  .nav-menu {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 340px);
    background: var(--color-bg-alt);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-xl) var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--transition);
    box-shadow: -20px 0 60px rgba(0,0,0,0.5);
  }
  .nav-menu.active { transform: translateX(0); }
  .nav-menu a { font-size: var(--fs-md); }
  .nav-toggle { display: flex; }
}

@media (min-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { :root { --header-height: 96px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print { .site-header, .back-to-top, .lightbox, .nav-toggle { display: none !important; } }