:root {
  /* Tells the browser to draw native widgets (select popups, scrollbars,
     date pickers, autofill) in the matching theme. Without this the dark-mode
     <select> list opens with a white background and unreadable light text. */
  color-scheme: light;
  --background: 40 33% 96%;
  --foreground: 30 20% 15%;
  --primary: 35 90% 45%;
  --secondary: 345 50% 35%;
  --accent: 345 50% 35%;
  --accent-foreground: 0 0% 100%;
  --card: 40 33% 98%;
  --border: 40 20% 85%;
  --muted: 30 15% 40%;          /* muted TEXT colour */
  --muted-bg: 40 20% 90%;       /* muted SECTION background */
  --primary-foreground: 0 0% 100%;
  --secondary-foreground: 0 0% 100%;
  --popover: 40 33% 98%;
  --popover-foreground: 30 20% 15%;
  --radius: 0.75rem;
}

html.dark {
  color-scheme: dark;
  --background: 30 20% 10%;
  --foreground: 40 33% 96%;
  --primary: 35 90% 55%;
  --secondary: 345 40% 45%;
  --accent: 345 40% 45%;
  --accent-foreground: 0 0% 100%;
  --card: 30 20% 13%;
  --border: 30 20% 20%;
  --muted: 40 20% 70%;
  --muted-bg: 30 20% 18%;
  --primary-foreground: 30 20% 10%;
  --secondary-foreground: 0 0% 100%;
  --popover: 30 20% 13%;
  --popover-foreground: 40 33% 96%;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'DM Sans', sans-serif;
  line-height: 1.6;
  transition: background .2s ease, color .2s ease;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin: 0 0 .5em;
  line-height: 1.2;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }

a { color: inherit; text-decoration: none; }

p { color: hsl(var(--muted)); }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
  .container { padding-left: 2rem; padding-right: 2rem; }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: hsl(var(--background) / .8);
  border-bottom: 1px solid hsl(var(--border));
  transition: background-color .3s ease, border-color .3s ease;
}

/* Where backdrop blur is supported, let the bar go more transparent so
   content shows through it while scrolling. */
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .site-header {
    background: hsl(var(--background) / .6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  /* "Amanukatz Maine Coons" is long: at a fixed 1.5rem it wrapped onto two
     lines on a phone and ran into the theme and menu buttons. Scaling with the
     viewport keeps it on one line down to the narrowest screens, and reaches
     the full 1.5rem from about 450px up. */
  font-size: clamp(1rem, 5.3vw, 1.5rem);
  color: hsl(var(--primary));
}

.nav-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  margin-left: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.main-nav > a, .nav-dropdown-toggle {
  font-weight: 500;
  padding: .5rem 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: .875rem;
  color: hsl(var(--foreground) / .8);
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .25rem;
  transition: color .2s ease;
}

.main-nav > a.active,
.nav-dropdown-toggle.active {
  color: hsl(var(--primary));
  font-weight: 600;
}

.main-nav > a:not(.active):hover,
.nav-dropdown-toggle:not(.active):hover {
  color: hsl(var(--foreground));
  text-decoration: none;
}

.caret { font-size: .75rem; line-height: 1; }

.nav-dropdown { position: relative; }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: .5rem;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  min-width: 12rem;
  padding: .25rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}

.nav-dropdown-menu.open { display: block; }

.nav-dropdown-menu a {
  display: block;
  padding: .375rem .5rem;
  border-radius: calc(var(--radius) - 4px);
  font-size: .875rem;
  transition: background-color .15s ease, color .15s ease;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.header-actions { display: flex; align-items: center; gap: .5rem; }

.theme-toggle, .mobile-nav-toggle {
  width: 36px; height: 36px;
  border-radius: .625rem;
  border: none;
  background: transparent;
  color: hsl(var(--foreground));
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  transition: background-color .15s ease, color .15s ease;
}

.theme-toggle:hover, .mobile-nav-toggle:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* The toggle shows the theme you would switch TO, not the one you are in:
   a moon while the site is light, a sun while it is dark. */
.icon-sun { display: none; }
html.dark .icon-moon { display: none; }
html.dark .icon-sun { display: flex; }

.mobile-nav-toggle { display: none; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 52px;               /* border-box keeps bordered + unbordered buttons identical */
  padding: 0 2rem;
  border-radius: .625rem;
  font-weight: 500;
  font-size: 1.125rem;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { background: hsl(var(--primary) / .9); }

/* Bordered secondary button — translucent page background, matches theme in light + dark */
.btn-outline {
  background: hsl(var(--background) / .5);
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}
.btn-outline:hover { background: hsl(var(--background) / .8); }

.btn-arrow { display: inline-flex; transition: transform .2s ease; }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* Smaller in-form button (matches the reference's h-9 submit) */
.btn-compact { height: 36px; padding: 0 1rem; font-size: .875rem; border-width: 1px; }
.btn-block { width: 100%; }

/* Hero */
.hero {
  position: relative;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Tinted with the theme background, so the hero reads light in light mode
   and dark in dark mode (the photo shows through on the right). */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    hsl(var(--background) / .95) 0%,
    hsl(var(--background) / .8) 50%,
    hsl(var(--background) / .4) 100%
  );
}

.hero-inner { position: relative; z-index: 1; width: 100%; }

.hero-content {
  max-width: 620px;
  animation: heroRise .8s ease both;
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero h1 {
  color: hsl(var(--foreground));
  font-size: 3.75rem;
  line-height: 1;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.hero p {
  color: hsl(var(--muted));
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 2rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Simple text-only page header (About, Contact, Cattery pages, etc.) */
.page-hero {
  padding: 6rem 0;
  text-align: center;
}
/* Content block is centred within max-w-3xl, as in the reference */
.page-hero h1 {
  max-width: 768px;
  margin: 0 auto 1.5rem;
  font-size: 3.75rem;
  line-height: 1;
}
.page-hero p {
  max-width: 768px;
  margin: 0 auto;
  font-size: 1.25rem;
  line-height: 1.625;
}

/* Sections */
.section { padding: 6rem 0; }
.section-alt { background: hsl(var(--card)); }
.section-header { text-align: center; max-width: 700px; margin: 0 auto 3rem; }

.grid {
  display: grid;
  gap: 1.75rem;
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 2rem;
}

.card h3 { margin-bottom: .5rem; }

.icon-badge {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: hsl(var(--primary) / .12);
  color: hsl(var(--primary));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/* Two-column text + photo layout (homepage "gentle giants" section) */
.section-muted { background: hsl(var(--muted-bg) / .3); }

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* The About page pairs text with a photo at a slightly tighter gap than the
   homepage does — both match their respective reference layouts. */
.split-layout.split-tight { gap: 3rem; }

.split-text h2 { font-size: 2.25rem; margin-bottom: 1.5rem; }
.split-text > p {
  font-size: 1.125rem;
  line-height: 1.625;
  color: hsl(var(--muted));
  margin: 0 0 1.5rem;
}
.split-text > p:last-of-type { margin-bottom: 2rem; }

.feature-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.feature-list li { display: flex; align-items: center; gap: 1rem; }
.feature-icon {
  display: flex;
  padding: .5rem;
  border-radius: .75rem;
  background: hsl(var(--primary) / .1);
  color: hsl(var(--primary));
}
.feature-label { font-size: 1.125rem; font-weight: 500; }

.split-media { position: relative; }
.split-photo {
  aspect-ratio: 4 / 5;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}
.split-photo picture { display: contents; }
.split-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.floating-quote {
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  max-width: 20rem;
  background: hsl(var(--card));
  padding: 1.5rem;
  border-radius: .75rem;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.15), 0 8px 10px -6px rgba(0,0,0,.1);
}
.quote-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(var(--primary));
  margin: 0 0 .5rem;
}
.quote-text { font-size: .875rem; color: hsl(var(--muted)); margin: 0; }

/* Maroon call-to-action panel */
.cta-panel {
  position: relative;
  overflow: hidden;
  background: hsl(var(--secondary));
  border-radius: 1.5rem;
  padding: 4rem 3rem;
  text-align: center;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.15);
}
.cta-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.1), transparent 70%);
}
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel h2 { color: hsl(var(--secondary-foreground)); margin-bottom: 1rem; }
.cta-panel p {
  font-size: 1.125rem;
  color: hsl(var(--secondary-foreground) / .9);
  max-width: 42rem;
  margin: 0 auto 2rem;
}

/* Scroll reveal — only hidden when JS is present to reveal it again */
.js .reveal { opacity: 0; transition: opacity .7s ease, transform .7s ease; }
.js .reveal-left { transform: translateX(-20px); }
.js .reveal-right { transform: translateX(20px); }
.js .reveal:not(.reveal-left):not(.reveal-right) { transform: translateY(20px); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Cat / kitten cards */
.cat-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cat-card .photo {
  aspect-ratio: 4/3;
  background: hsl(var(--border));
  display: flex; align-items: center; justify-content: center;
  color: hsl(var(--muted));
  overflow: hidden;
}
.cat-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.cat-card .body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.cat-card .name-row { display: flex; justify-content: space-between; align-items: center; }
.badge {
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: hsl(var(--primary) / .15);
  color: hsl(var(--primary));
  text-transform: uppercase;
  letter-spacing: .03em;
}
.badge.sold, .badge.not_available { background: hsl(var(--muted) / .2); color: hsl(var(--muted)); }
.badge.reserved { background: hsl(35 90% 55% / .2); color: hsl(35 70% 40%); }
.price { font-weight: 700; color: hsl(var(--primary)); font-size: 1.1rem; }

.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  background: hsl(var(--card));
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius);
}

/* Forms */
.form-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-weight: 600; font-size: .9rem; }
.field input, .field select, .field textarea {
  padding: .75rem 1rem;
  border-radius: calc(var(--radius) - .25rem);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: inherit;
  font-size: 1rem;
}
.field textarea { resize: vertical; min-height: 120px; }
.field.full { grid-column: 1 / -1; }

/* Stacked, full-width form fields (contact page) */
.stacked-form { display: flex; flex-direction: column; gap: 1.5rem; }

/* Two or three fields sharing a line — name, address, city/zip. Collapses to
   one per line on a phone. */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }

/* Section headings inside a long form, matching the reference layout. */
.form-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  margin: .5rem 0 0;
  padding-bottom: .5rem;
  border-bottom: 1px solid hsl(var(--border));
}

/* Yes/No and Male/Female choices sitting on one line. */
.choice-row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.choice-row label {
  display: flex; align-items: center; gap: .4rem;
  font-weight: 400; cursor: pointer;
}
.choice-row input[type="radio"] { width: auto; margin: 0; }

.required-note { color: hsl(var(--muted)); font-size: .875rem; margin: 0 0 .5rem; }
.form-field { display: flex; flex-direction: column; gap: .25rem; }
.form-field label { font-size: .875rem; font-weight: 500; line-height: 1; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 36px;
  padding: .25rem .75rem;
  border: 1px solid hsl(var(--border));
  border-radius: .625rem;
  background: transparent;
  color: hsl(var(--foreground));
  font-family: inherit;
  font-size: .875rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field textarea { min-height: 120px; padding-top: .5rem; padding-bottom: .5rem; resize: vertical; }

/* A transparent <select> inherits the page text colour, which the native popup
   then draws on its own light background. Pin both explicitly. */
.form-field select { background: hsl(var(--background)); }
.form-field select option,
.field select option {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: hsl(var(--muted) / .7); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 1px hsl(var(--primary));
}

/* Contact page layout: form 2/3, sidebar 1/3 */
.contact-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  align-items: start;
}
.contact-form-col { grid-column: span 2; }
.contact-aside { display: flex; flex-direction: column; gap: 1.5rem; }

/* Generic surface panel */
.panel {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / .5);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.panel > h2 { font-size: 2.25rem; margin-bottom: 1.5rem; }
.panel-muted {
  background: hsl(var(--muted-bg));
  border-radius: .75rem;
  padding: 1.5rem;
  box-shadow: none;
}
.panel-accent {
  background: hsl(var(--primary) / .1);
  border-color: hsl(var(--primary) / .2);
  border-radius: .75rem;
  padding: 1.5rem;
  box-shadow: none;
}
.panel-muted h3, .panel-accent h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.panel-accent h3 { margin-bottom: .75rem; }
.panel-accent p { line-height: 1.625; margin: 0; }

.contact-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.contact-info li { display: flex; align-items: flex-start; gap: .75rem; }
.contact-info svg { color: hsl(var(--primary)); margin-top: .25rem; flex-shrink: 0; }
.contact-info .info-label { font-weight: 500; margin: 0 0 .25rem; color: hsl(var(--foreground)); }
.contact-info .info-value { margin: 0; color: hsl(var(--muted)); }
.contact-info a { color: hsl(var(--muted)); transition: color .2s ease; }
.contact-info a:hover { color: hsl(var(--primary)); }

/* About page: mission photo + values cards */
.about-photo {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 10px 25px hsl(var(--foreground) / .12);
  display: block;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.value-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / .5);
  border-radius: .75rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px hsl(var(--foreground) / .08);
}
.value-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem;
  border-radius: .75rem;
  background: hsl(var(--primary) / .1);
  color: hsl(var(--primary));
}
.value-card h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.value-card p { line-height: 1.625; margin: 0; }

@media (max-width: 900px) {
  .value-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Long-form CMS page content (privacy policy, terms, custom pages) */
.page-content { font-size: 1rem; line-height: 1.75; }
.page-content h2 {
  font-size: 1.5rem;
  margin: 2.5rem 0 .75rem;
  padding-top: .5rem;
  border-top: 1px solid hsl(var(--border));
}
.page-content h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.page-content h3 { font-size: 1.2rem; margin: 1.75rem 0 .5rem; }
.page-content p { margin: 0 0 1rem; }
.page-content ul, .page-content ol { margin: 0 0 1.25rem; padding-left: 1.25rem; color: hsl(var(--muted)); }
.page-content li { margin-bottom: .5rem; }
.page-content a { color: hsl(var(--primary)); text-decoration: underline; }
.page-content a:hover { text-decoration: none; }
.page-content em { color: hsl(var(--muted)); }
.page-content strong { color: hsl(var(--foreground)); }
.page-updated {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid hsl(var(--border));
  font-size: .875rem;
  color: hsl(var(--muted));
}

/* FAQ cards */
.container-narrow { max-width: 896px; }
.section-title-center { text-align: center; margin-bottom: 3rem; }
.faq-list { display: flex; flex-direction: column; gap: 1.5rem; }
.faq-card { border-radius: .75rem; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.faq-card h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.faq-card p { line-height: 1.625; margin: 0; }

.alert { padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.5rem; }
.alert-success { background: hsl(140 50% 45% / .15); color: hsl(140 50% 30%); }
.alert-error { background: hsl(0 60% 50% / .15); color: hsl(0 60% 40%); }

/* Footer — maroon panel, same in light and dark */
.site-footer {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-top: 1px solid hsl(var(--secondary-foreground) / .1);
}
/* padding-block only — a `padding: x 0` shorthand would cancel .container's side padding */
.footer-inner { padding-top: 6rem; padding-bottom: 6rem; }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.footer-brand-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.footer-brand-head h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(var(--primary));
  margin: 0;
}
.footer-brand p {
  font-size: .875rem;
  line-height: 1.625;
  color: hsl(var(--secondary-foreground) / .9);
  margin: 0;
}

.footer-col h4 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 1rem;
  color: hsl(var(--secondary-foreground));
}
.footer-col nav { display: flex; flex-direction: column; gap: .5rem; }
.footer-col a {
  font-size: .875rem;
  color: hsl(var(--secondary-foreground) / .8);
  transition: color .2s ease;
}
.footer-col a:hover { color: hsl(var(--primary)); }

.footer-contact { display: flex; flex-direction: column; gap: .75rem; }
.footer-contact > a { display: flex; align-items: center; gap: .5rem; }
.footer-social { display: flex; gap: 1rem; padding-top: .5rem; }
.footer-social a { display: flex; }

.footer-bottom {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--secondary-foreground) / .2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom p {
  font-size: .875rem;
  color: hsl(var(--secondary-foreground) / .8);
  margin: 0;
}
.footer-legal { display: flex; gap: 1.5rem; font-size: .875rem; }
.footer-legal a { color: hsl(var(--secondary-foreground) / .8); transition: color .2s ease; }
.footer-legal a:hover { color: hsl(var(--primary)); }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.gallery-grid .photo {
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  position: relative;
  background: hsl(var(--muted-bg));
}
.gallery-grid .photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.gallery-grid a.photo:hover img { transform: scale(1.05); }
.gallery-grid a.photo::after {
  content: '';
  position: absolute; inset: 0;
  background: hsl(var(--foreground) / 0);
  transition: background-color .25s ease;
}
.gallery-grid a.photo:hover::after { background: hsl(var(--foreground) / .12); }

/* Gallery index cards */
.gallery-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.75rem; }
.gallery-card {
  display: block;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px hsl(var(--foreground) / .12); }
.gallery-card .cover { aspect-ratio: 4/3; background: hsl(var(--muted-bg)); overflow: hidden; }
.gallery-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.gallery-card .cover.empty { display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.gallery-card .body { padding: 1.25rem; }
.gallery-card h3 { margin-bottom: .35rem; font-size: 1.25rem; }
.gallery-card .count { color: hsl(var(--muted)); font-size: .875rem; }

/* Lightbox */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background: hsl(30 20% 6% / .92);
  backdrop-filter: blur(4px);
  animation: lbFade .18s ease;
}
.lightbox[hidden] { display: none; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }

.lightbox .lb-stage {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  object-fit: contain;
  border-radius: .5rem;
  box-shadow: 0 20px 60px hsl(0 0% 0% / .5);
}
.lightbox figcaption {
  color: hsl(0 0% 100% / .85);
  font-size: .9rem;
  text-align: center;
  max-width: 60ch;
}

.lightbox button {
  border: none;
  background: hsl(0 0% 100% / .1);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
  flex-shrink: 0;
}
.lightbox button:hover { background: hsl(0 0% 100% / .22); }
.lightbox .lb-prev, .lightbox .lb-next { width: 48px; height: 48px; font-size: 1.9rem; line-height: 1; }
.lightbox .lb-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 42px; height: 42px; font-size: 1.6rem; line-height: 1;
}
.lightbox .lb-count {
  position: absolute; bottom: 1.25rem; left: 50%;
  transform: translateX(-50%);
  color: hsl(0 0% 100% / .7);
  font-size: .85rem;
  letter-spacing: .05em;
}

@media (max-width: 640px) {
  .lightbox { padding: .75rem; gap: .35rem; }
  .lightbox .lb-prev, .lightbox .lb-next { width: 40px; height: 40px; font-size: 1.5rem; }
  .lightbox img { max-height: calc(100vh - 7rem); }
}

/* Detail page */
.detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.detail-gallery-main { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: hsl(var(--border)); margin-bottom: 1rem; }
.detail-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery-main a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.detail-thumbs { display: flex; gap: .75rem; flex-wrap: wrap; }
.detail-thumbs img { width: 80px; height: 80px; object-fit: cover; border-radius: calc(var(--radius) - .25rem); border: 2px solid transparent; cursor: pointer; }
.detail-thumbs img.active { border-color: hsl(var(--primary)); }
.spec-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0; }
.spec-item { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1rem; }
.spec-item .label { font-size: .8rem; text-transform: uppercase; color: hsl(var(--muted)); letter-spacing: .03em; }
.spec-item .value { font-weight: 700; font-size: 1.1rem; }

@media (max-width: 900px) {
  .main-nav { position: fixed; top: 72px; left: 0; right: 0; background: hsl(var(--background)); flex-direction: column; align-items: stretch; padding: 1rem 1.5rem; border-bottom: 1px solid hsl(var(--border)); display: none; gap: .5rem; }
  .main-nav.open { display: flex; }
  .mobile-nav-toggle { display: flex; }
  .nav-dropdown-menu { position: static; box-shadow: none; margin-top: .25rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-inner { padding-top: 4rem; padding-bottom: 4rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .contact-layout, .detail-layout { grid-template-columns: 1fr; }
  .contact-form-col { grid-column: auto; }
  .panel { padding: 1.5rem; }
  .panel > h2 { font-size: 1.75rem; }
  h1 { font-size: 2.25rem; }
  .hero h1, .page-hero h1 { font-size: 2.75rem; }
  .hero p, .page-hero p { font-size: 1.25rem; line-height: 1.75rem; }

  .split-layout { grid-template-columns: 1fr; gap: 3rem; }
  .floating-quote { display: none; }
  .cta-panel { padding: 3rem 1.5rem; }
}