/**
 * Gorilla Land Preservation — main stylesheet
 * Tailwind-like utilities + brand tokens matching the React site.
 */

/* ==========================================================================
   1. CSS Variables
   ========================================================================== */

:root {
  --radius: 0.25rem;

  --forest: #2A4E2C;
  --forest-deep: #152117;
  --dirt: #5A381E;
  --gold: #D4A020;
  --gold-bright: #E8B838;
  --coal: #0E1A0F;
  --bone: #F0EAD6;
  --nav: #0A1209;

  --background: var(--coal);
  --foreground: var(--bone);
  --card: #1C2E1E;
  --card-foreground: var(--bone);
  --popover: #152117;
  --popover-foreground: var(--bone);
  --primary: var(--gold);
  --primary-foreground: #0A1209;
  --secondary: var(--forest);
  --secondary-foreground: var(--bone);
  --muted: #1C2E1E;
  --muted-foreground: #A89F7A;
  --accent: var(--forest);
  --accent-foreground: var(--bone);
  --destructive: #c23b2e;
  --destructive-foreground: var(--bone);
  --border: #2E4A30;
  --input: #1C2E1E;
  --ring: var(--gold);

  --font-display: "Oswald", "Impact", sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;

  --grad-hero: linear-gradient(
    180deg,
    rgb(10 18 9 / 0.2) 0%,
    rgb(10 18 9 / 0.55) 50%,
    rgb(10 18 9 / 0.95) 100%
  );
  --grad-gold: linear-gradient(135deg, var(--gold-bright), var(--gold));
  --grad-forest: linear-gradient(180deg, var(--forest-deep), var(--coal));
  --shadow-gold: 0 0 40px -8px rgb(212 160 32 / 0.5);
  --shadow-hard: 0 20px 60px -20px rgb(0 0 0 / 0.8);

  --ease-out-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dark {
  color-scheme: dark;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--coal);
  color: var(--bone);
  overflow-x: hidden;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100%;
  line-height: 1.5;
  background-image: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    rgba(58, 90, 55, 0.18),
    transparent 70%
  );
  background-attachment: fixed;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
.display,
.font-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}

p {
  margin: 0;
}

@media (max-width: 640px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

.inset-0 { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.inset-y-0 { top: 0; bottom: 0; }

.top-0 { top: 0; }
.top-1\/2 { top: 50%; }
.top-5 { top: 1.25rem; }
.top-6 { top: 1.5rem; }
.-top-4 { top: -1rem; }
.bottom-0 { bottom: 0; }
.bottom-3 { bottom: 0.75rem; }
.bottom-4 { bottom: 1rem; }
.bottom-6 { bottom: 1.5rem; }
.left-0 { left: 0; }
.left-1\/2 { left: 50%; }
.left-3 { left: 0.75rem; }
.left-4 { left: 1rem; }
.left-5 { left: 1.25rem; }
.-left-2 { left: -0.5rem; }
.right-0 { right: 0; }
.right-3 { right: 0.75rem; }
.right-4 { right: 1rem; }
.right-5 { right: 1.25rem; }
.right-6 { right: 1.5rem; }

.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-\[60\] { z-index: 60; }

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

.overflow-hidden { overflow: hidden; }
.overflow { overflow: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto { overflow-y: auto; }

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.select-none { user-select: none; }
.touch-none { touch-action: none; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-ew-resize { cursor: ew-resize; }
.resize-none { resize: none; }

.place-items-center { place-items: center; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-start { align-items: flex-start; }
.items-stretch { align-items: stretch; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.shrink-0 { flex-shrink: 0; }
.grow { flex-grow: 1; }

.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-px { gap: 1px; }

.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }

/* ==========================================================================
   4. Sizing
   ========================================================================== */

.w-full { width: 100%; }
.w-auto { width: auto; }
.w-max { width: max-content; }
.w-px { width: 1px; }
.w-0 { width: 0; }
.w-0\.5 { width: 0.125rem; }
.w-1 { width: 0.25rem; }
.w-1\.5 { width: 0.375rem; }
.w-3 { width: 0.75rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-9 { width: 2.25rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-24 { width: 6rem; }
.w-32 { width: 8rem; }

.h-full { height: 100%; }
.h-auto { height: auto; }
.h-px { height: 1px; }
.h-0 { height: 0; }
.h-0\.5 { height: 0.125rem; }
.h-1 { height: 0.25rem; }
.h-1\.5 { height: 0.375rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-32 { height: 8rem; }
.h-\[88px\] { height: 88px; }

.min-h-screen { min-height: 100vh; }
.min-h-\[100svh\] { min-height: 100svh; }
.min-h-\[220px\] { min-height: 220px; }
.min-h-\[260px\] { min-height: 260px; }

.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-\[95vw\] { max-width: 95vw; }
.max-h-\[85vh\] { max-height: 85vh; }

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }

.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ==========================================================================
   5. Spacing
   ========================================================================== */

.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }

.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-28 { padding-top: 7rem; padding-bottom: 7rem; }

.pt-6 { padding-top: 1.5rem; }
.pt-28 { padding-top: 7rem; }
.pt-40 { padding-top: 10rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-16 { padding-bottom: 4rem; }

.m-0 { margin: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2rem; }
.mt-24 { margin-top: 6rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-10 { margin-bottom: 2.5rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-6 { margin-left: 1.5rem; }
.mr-1 { margin-right: 0.25rem; }

/* ==========================================================================
   6. Typography
   ========================================================================== */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-\[10px\] { font-size: 10px; line-height: 1.4; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.text-7xl { font-size: 4.5rem; line-height: 1; }
.text-8xl { font-size: 6rem; line-height: 1; }
.text-\[2\.5rem\] { font-size: 2.5rem; }

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-sans { font-family: var(--font-sans); }

.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.tracking-\[0\.3em\] { letter-spacing: 0.3em; }

.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.leading-\[0\.95\] { line-height: 0.95; }
.leading-\[1\.02\] { line-height: 1.02; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.normal-case { text-transform: none; }
.whitespace-nowrap { white-space: nowrap; }
.break-words { overflow-wrap: break-word; word-break: break-word; }
.break-all { word-break: break-all; }

/* ==========================================================================
   7. Colors — text
   ========================================================================== */

.text-bone { color: var(--bone); }
.text-gold { color: var(--gold); }
.text-coal { color: var(--coal); }
.text-forest { color: var(--forest); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-destructive { color: var(--destructive); }
.text-foreground { color: var(--foreground); }

.text-bone\/40 { color: color-mix(in srgb, var(--bone) 40%, transparent); }
.text-bone\/50 { color: color-mix(in srgb, var(--bone) 50%, transparent); }
.text-bone\/60 { color: color-mix(in srgb, var(--bone) 60%, transparent); }
.text-bone\/65 { color: color-mix(in srgb, var(--bone) 65%, transparent); }
.text-bone\/70 { color: color-mix(in srgb, var(--bone) 70%, transparent); }
.text-bone\/75 { color: color-mix(in srgb, var(--bone) 75%, transparent); }
.text-bone\/80 { color: color-mix(in srgb, var(--bone) 80%, transparent); }
.text-bone\/85 { color: color-mix(in srgb, var(--bone) 85%, transparent); }
.text-bone\/90 { color: color-mix(in srgb, var(--bone) 90%, transparent); }

.text-gold\/0 { color: color-mix(in srgb, var(--gold) 0%, transparent); }
.text-gold\/10 { color: color-mix(in srgb, var(--gold) 10%, transparent); }
.text-gold\/70 { color: color-mix(in srgb, var(--gold) 70%, transparent); }
.text-gold\/80 { color: color-mix(in srgb, var(--gold) 80%, transparent); }

.fill-gold { fill: var(--gold); }
.fill-current { fill: currentColor; }

/* ==========================================================================
   8. Colors — backgrounds
   ========================================================================== */

.bg-coal { background-color: var(--coal); }
.bg-nav { background-color: var(--nav); }
.bg-card { background-color: var(--card); }
.bg-forest { background-color: var(--forest); }
.bg-forest-deep { background-color: var(--forest-deep); }
.bg-gold { background-color: var(--gold); }
.bg-border { background-color: var(--border); }
.bg-background { background-color: var(--background); }
.bg-transparent { background-color: transparent; }

.bg-coal\/30 { background-color: color-mix(in srgb, var(--coal) 30%, transparent); }
.bg-coal\/40 { background-color: color-mix(in srgb, var(--coal) 40%, transparent); }
.bg-coal\/70 { background-color: color-mix(in srgb, var(--coal) 70%, transparent); }
.bg-coal\/80 { background-color: color-mix(in srgb, var(--coal) 80%, transparent); }
.bg-coal\/95 { background-color: color-mix(in srgb, var(--coal) 95%, transparent); }
.bg-nav\/70 { background-color: color-mix(in srgb, var(--nav) 70%, transparent); }
.bg-nav\/95 { background-color: color-mix(in srgb, var(--nav) 95%, transparent); }
.bg-gold\/50 { background-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.bg-gold\/60 { background-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.bg-dirt\/60 { background-color: color-mix(in srgb, var(--dirt) 60%, transparent); }

/* ==========================================================================
   9. Borders & radius
   ========================================================================== */

.border { border-width: 1px; border-style: solid; }
.border-0 { border-width: 0; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
}
.border-border { border-color: var(--border); }
.border-gold { border-color: var(--gold); }
.border-bone { border-color: var(--bone); }
.border-destructive { border-color: var(--destructive); }

.border-border\/50 { border-color: color-mix(in srgb, var(--border) 50%, transparent); }
.border-gold\/15 { border-color: color-mix(in srgb, var(--gold) 15%, transparent); }
.border-gold\/20 { border-color: color-mix(in srgb, var(--gold) 20%, transparent); }
.border-gold\/30 { border-color: color-mix(in srgb, var(--gold) 30%, transparent); }
.border-gold\/40 { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.border-gold\/50 { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.border-bone\/20 { border-color: color-mix(in srgb, var(--bone) 20%, transparent); }
.border-bone\/30 { border-color: color-mix(in srgb, var(--bone) 30%, transparent); }
.border-destructive\/40 { border-color: color-mix(in srgb, var(--destructive) 40%, transparent); }

.rounded-sm { border-radius: var(--radius); }
.rounded-md { border-radius: calc(var(--radius) + 2px); }
.rounded-full { border-radius: 9999px; }
.rounded-none { border-radius: 0; }

/* ==========================================================================
   10. Effects
   ========================================================================== */

.opacity-0 { opacity: 0; }
.opacity-40 { opacity: 0.4; }
.opacity-60 { opacity: 0.6; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }

.shadow-hard { box-shadow: var(--shadow-hard); }
.shadow-gold { box-shadow: var(--shadow-gold); }
.shadow-none { box-shadow: none; }

.backdrop-blur { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.backdrop-blur-sm { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.backdrop-blur-md { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

.outline-none { outline: none; }
.outline-none:focus { outline: none; }

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }

.group { /* marker for group-hover children */ }

.hover\:scale-\[1\.01\]:hover { transform: scale(1.01); }
.hover\:scale-\[1\.02\]:hover { transform: scale(1.02); }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.hover\:text-gold:hover { color: var(--gold); }
.hover\:border-gold:hover { border-color: var(--gold); }
.hover\:border-gold\/40:hover { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.hover\:border-gold\/50:hover { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.hover\:bg-card:hover { background-color: var(--card); }
.hover\:shadow-gold:hover { box-shadow: var(--shadow-gold); }
.hover\:opacity-90:hover { opacity: 0.9; }

.active\:scale-95:active { transform: scale(0.95); }

.disabled\:opacity-60:disabled { opacity: 0.6; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:rotate-6 { transform: rotate(6deg); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }
.group:hover .group-hover\:translate-y-0 { transform: translateY(0); }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:opacity-90 { opacity: 0.9; }
.group:hover .group-hover\:text-gold { color: var(--gold); }
.group:hover .group-hover\:w-full { width: 100%; }

.translate-y-2 { transform: translateY(0.5rem); }
.translate-y-0 { transform: translateY(0); }
.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.-translate-x-1\/2.-translate-y-1\/2,
.top-1\/2.left-1\/2.-translate-x-1\/2.-translate-y-1\/2 {
  transform: translate(-50%, -50%);
}

/* Combined absolute handle centering */
.absolute.top-1\/2.-translate-y-1\/2.-translate-x-1\/2 {
  transform: translate(-50%, -50%);
}

/* ==========================================================================
   11. Gradients
   ========================================================================== */

.bg-grad-gold { background-image: var(--grad-gold); }
.bg-grad-forest { background-image: var(--grad-forest); }
.bg-grad-hero { background-image: var(--grad-hero); }

.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops, transparent, transparent)); }
.bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops, transparent, transparent)); }
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops, transparent, transparent)); }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops, transparent, transparent)); }

.from-coal { --tw-gradient-from: var(--coal); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-forest-deep { --tw-gradient-from: var(--forest-deep); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-bone\/40 { --tw-gradient-from: color-mix(in srgb, var(--bone) 40%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }

.via-coal\/20 { --tw-gradient-via: color-mix(in srgb, var(--coal) 20%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, transparent); }
.via-coal\/80 { --tw-gradient-via: color-mix(in srgb, var(--coal) 80%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, transparent); }

.to-transparent { --tw-gradient-to: transparent; }
.to-coal\/30 { --tw-gradient-to: color-mix(in srgb, var(--coal) 30%, transparent); }
.to-coal\/40 { --tw-gradient-to: color-mix(in srgb, var(--coal) 40%, transparent); }

/* Explicit common gradient combos used in templates */
.bg-gradient-to-r.from-coal.via-coal\/80.to-coal\/30 {
  background-image: linear-gradient(
    to right,
    var(--coal),
    color-mix(in srgb, var(--coal) 80%, transparent),
    color-mix(in srgb, var(--coal) 30%, transparent)
  );
}
.bg-gradient-to-r.from-coal.via-coal\/80.to-coal\/40 {
  background-image: linear-gradient(
    to right,
    var(--coal),
    color-mix(in srgb, var(--coal) 80%, transparent),
    color-mix(in srgb, var(--coal) 40%, transparent)
  );
}
.bg-gradient-to-r.from-forest-deep.to-transparent {
  background-image: linear-gradient(to right, var(--forest-deep), transparent);
}
.bg-gradient-to-l.from-forest-deep.to-transparent {
  background-image: linear-gradient(to left, var(--forest-deep), transparent);
}
.bg-gradient-to-t.from-coal.via-coal\/20.to-transparent {
  background-image: linear-gradient(
    to top,
    var(--coal),
    color-mix(in srgb, var(--coal) 20%, transparent),
    transparent
  );
}
.bg-gradient-to-b.from-bone\/40.to-transparent {
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bone) 40%, transparent),
    transparent
  );
}

/* ==========================================================================
   12. Grid
   ========================================================================== */

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }

.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
.col-start-1 { grid-column-start: 1; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.row-start-2 { grid-row-start: 2; }
.row-start-4 { grid-row-start: 4; }

/* ==========================================================================
   13. Brand specials
   ========================================================================== */

.text-stroke-gold {
  -webkit-text-stroke: 1px var(--gold);
  color: transparent;
}

.noise {
  position: relative;
}
.noise::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity: 0.08;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

.ticker {
  animation: ticker 40s linear infinite;
}
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.slow-zoom {
  animation: slowzoom 20s ease-out infinite alternate;
  will-change: transform;
}
@keyframes slowzoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.12); }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.8s var(--ease-out-soft);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Intersection Observer helpers */
.motion-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out-soft), transform 0.8s var(--ease-out-soft);
}
.motion-fade-up.in {
  opacity: 1;
  transform: none;
}

.motion-fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s var(--ease-out-soft), transform 0.8s var(--ease-out-soft);
}
.motion-fade-left.in {
  opacity: 1;
  transform: none;
}

.motion-fade-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s var(--ease-out-soft), transform 0.8s var(--ease-out-soft);
}
.motion-fade-right.in {
  opacity: 1;
  transform: none;
}

[data-animate][data-delay="1"] { transition-delay: 0.1s; }
[data-animate][data-delay="2"] { transition-delay: 0.2s; }
[data-animate][data-delay="3"] { transition-delay: 0.3s; }
[data-animate][data-delay="4"] { transition-delay: 0.4s; }
[data-animate][data-delay="5"] { transition-delay: 0.5s; }
[data-animate][data-delay="6"] { transition-delay: 0.6s; }
[data-animate][data-delay="7"] { transition-delay: 0.7s; }
[data-animate][data-delay="8"] { transition-delay: 0.8s; }

/* Floating particles (JS-generated) */
.js-particles .particle {
  position: absolute;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--gold) 60%, transparent);
  pointer-events: none;
  animation-name: particle-float;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
.js-particles .particle.is-dirt {
  background-color: color-mix(in srgb, var(--dirt) 60%, transparent);
}
@keyframes particle-float {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 0.6; }
  100% {
    transform: translateY(-110vh) scale(0.6);
    opacity: 0;
  }
}

/* ==========================================================================
   14. Component helpers (WP markup hooks)
   ========================================================================== */

/* Navbar scrolled state */
.site-header {
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.is-scrolled,
.site-header[data-scrolled="true"] {
  background-color: color-mix(in srgb, var(--nav) 95%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-hard);
}

/* Mobile menu */
.js-mobile-menu.is-open {
  display: block !important;
}
body.menu-open {
  overflow: hidden;
}

/* Before / After slider */
.js-ba-slider {
  --ba-pos: 50%;
  position: relative;
}
.js-ba-slider .js-ba-before {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: var(--ba-pos);
}
.js-ba-slider .js-ba-before img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: calc(100% / (var(--ba-pos) / 100));
  max-width: none;
  object-fit: cover;
}
.js-ba-slider .js-ba-handle {
  position: absolute;
  inset-block: 0;
  left: var(--ba-pos);
  width: 2px;
  background: var(--gold);
  box-shadow: var(--shadow-gold);
  pointer-events: none;
  transform: translateX(-50%);
}
.js-ba-slider .js-ba-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background-image: var(--grad-gold);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-gold);
  transform: translate(-50%, -50%);
}

/* Gallery lightbox */
.js-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background-color: color-mix(in srgb, var(--coal) 95%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  place-items: center;
  padding: 1.5rem;
}
.js-lightbox.is-open {
  display: grid;
}
.js-lightbox img {
  max-height: 85vh;
  max-width: 95vw;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
}

/* Testimonials carousel */
.js-testimonial-slide {
  display: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.js-testimonial-slide.is-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.js-testimonial-dot {
  height: 0.25rem;
  width: 1rem;
  border-radius: 9999px;
  background-color: var(--border);
  transition: all 0.2s ease;
  border: none;
  padding: 0;
  cursor: pointer;
}
.js-testimonial-dot.is-active {
  width: 2.5rem;
  background-color: var(--gold);
}

/* Contact form feedback */
.js-form-success,
.js-form-error {
  display: none;
}
.js-form-success.is-visible,
.js-form-error.is-visible {
  display: flex;
}

/* ==========================================================================
   15. Forms
   ========================================================================== */

.form-label,
label.form-label {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--gold) 80%, transparent);
  font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
select,
textarea,
.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  background-color: var(--coal);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  color: var(--bone);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--gold);
}

select,
.form-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23D4A020' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

textarea,
.form-textarea {
  resize: none;
  min-height: 8rem;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--bone) 40%, transparent);
}

option {
  background-color: var(--coal);
  color: var(--bone);
}

/* ==========================================================================
   16. Responsive — sm (640px)
   ========================================================================== */

@media (min-width: 640px) {
  .sm\:inline-flex { display: inline-flex; }
  .sm\:flex { display: flex; }
  .sm\:hidden { display: none; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }

  .sm\:h-16 { height: 4rem; }
  .sm\:gap-3 { gap: 0.75rem; }
  .sm\:gap-4 { gap: 1rem; }
  .sm\:gap-12 { gap: 3rem; }

  .sm\:p-6 { padding: 1.5rem; }
  .sm\:p-7 { padding: 1.75rem; }
  .sm\:p-8 { padding: 2rem; }
  .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .sm\:px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
  .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .sm\:py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
  .sm\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .sm\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
  .sm\:pt-32 { padding-top: 8rem; }
  .sm\:pb-20 { padding-bottom: 5rem; }

  .sm\:mt-5 { margin-top: 1.25rem; }
  .sm\:mt-6 { margin-top: 1.5rem; }
  .sm\:mt-9 { margin-top: 2.25rem; }
  .sm\:mb-12 { margin-bottom: 3rem; }
  .sm\:mb-14 { margin-bottom: 3.5rem; }
  .sm\:mb-16 { margin-bottom: 4rem; }

  .sm\:text-xs { font-size: 0.75rem; line-height: 1rem; }
  .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:text-5xl { font-size: 3rem; line-height: 1; }
  .sm\:text-6xl { font-size: 3.75rem; line-height: 1; }
  .sm\:leading-\[0\.95\] { line-height: 0.95; }

  .sm\:aspect-\[16\/10\] { aspect-ratio: 16 / 10; }
  .sm\:min-h-\[220px\] { min-height: 220px; }
}

/* ==========================================================================
   17. Responsive — md (768px)
   ========================================================================== */

@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
  .md\:flex-row { flex-direction: row; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:col-auto { grid-column: auto; }
  .md\:mt-0 { margin-top: 0; }
}

/* ==========================================================================
   18. Responsive — lg (1024px)
   ========================================================================== */

@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:flex-row { flex-direction: row; }
  .lg\:items-end { align-items: flex-end; }
  .lg\:justify-between { justify-content: space-between; }

  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }

  .lg\:h-\[88px\] { height: 88px; }
  .lg\:gap-20 { gap: 5rem; }

  .lg\:p-10 { padding: 2.5rem; }
  .lg\:p-14 { padding: 3.5rem; }
  .lg\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .lg\:py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .lg\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
  .lg\:py-44 { padding-top: 11rem; padding-bottom: 11rem; }
  .lg\:pb-32 { padding-bottom: 8rem; }

  .lg\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .lg\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
  .lg\:text-7xl { font-size: 4.5rem; line-height: 1; }
  .lg\:text-8xl { font-size: 6rem; line-height: 1; }
}

/* ==========================================================================
   19. SVG icon sizing helpers
   ========================================================================== */

svg.w-3 { width: 0.75rem; height: 0.75rem; }
svg.w-4 { width: 1rem; height: 1rem; }
svg.w-5 { width: 1.25rem; height: 1.25rem; }
svg.w-6 { width: 1.5rem; height: 1.5rem; }
svg.w-9 { width: 2.25rem; height: 2.25rem; }
svg.w-10 { width: 2.5rem; height: 2.5rem; }
svg.w-32 { width: 8rem; height: 8rem; }

/* ==========================================================================
   20. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ticker,
  .slow-zoom,
  .animate-pulse,
  .js-particles .particle {
    animation: none !important;
  }
  .reveal,
  .motion-fade-up,
  .motion-fade-left,
  .motion-fade-right,
  .js-testimonial-slide {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}