/* ==========================================================================
   Royal Facility Services — brand stylesheet
   Tailwind (CDN, utility layer) + this file for brand tokens, type,
   and editorial components that don't map cleanly to utility classes.
   ========================================================================== */

:root {
  --navy: oklch(21.6% .037 233.6);
  --teal: oklch(32.3% .055 219.5);
  --gold: oklch(78.2% .148 84.5);
  --gold-bright: oklch(84.9% .129 87.6);
  --mint: oklch(95.1% .049 158.7);
  --aqua: oklch(76.2% .126 208.9);
  --background: var(--navy);
  --foreground: oklch(98% .005 160);
  --muted: oklch(75% .017 210);
  --hairline: oklch(100% 0 0 / .12);
}

html {
  scroll-behavior: smooth;
}

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

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

::selection {
  background: var(--gold);
  color: var(--navy);
}

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* ---------- layout helpers ---------- */

.bg-navy   { background-color: var(--navy); }
.bg-teal   { background-color: var(--teal); }
.bg-mint   { background-color: var(--mint); }
.text-gold        { color: var(--gold); }
.text-gold-bright { color: var(--gold-bright); }
.text-aqua        { color: var(--aqua); }
.text-muted       { color: var(--muted); }
.text-mint        { color: var(--mint); }
.border-hairline  { border-color: var(--hairline); }

/* ---------- eyebrow labels ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

/* ---------- gold underline accent ---------- */

.gold-rule {
  width: 3.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}

/* ---------- header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, padding 300ms ease;
  background-color: transparent;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background-color: oklch(21.6% .037 233.6 / .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 8px 30px oklch(0% 0 0 / .25);
}

.site-header .nav-link {
  position: relative;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--foreground);
  opacity: 0.85;
  transition: opacity 200ms ease;
}

.site-header .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 250ms ease;
}

.site-header .nav-link:hover,
.site-header .nav-link.is-active {
  opacity: 1;
}

.site-header .nav-link:hover::after,
.site-header .nav-link.is-active::after {
  width: 100%;
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--navy);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.75rem;
  border-radius: 2px;
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}

.btn-gold:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 30px oklch(78.2% .148 84.5 / .3);
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--hairline);
  color: var(--foreground);
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.85rem 1.75rem;
  border-radius: 2px;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.btn-outline:hover {
  border-color: var(--gold);
  background: oklch(100% 0 0 / .04);
}

/* mobile menu */

@media (max-width: 1023px) {
  .site-header,
  #mobile-menu {
    background-color: var(--navy);
  }
}

#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
}

#mobile-menu.is-open {
  max-height: 32rem;
}

/* ---------- hero ---------- */

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(21.6% .037 233.6 / .55) 0%, oklch(21.6% .037 233.6 / .35) 45%, oklch(21.6% .037 233.6 / .92) 100%);
}

/* ---------- fade-up reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1);
}

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

/* ---------- numbered rows ---------- */

.numbered {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.05em;
}

/* ---------- service card ---------- */

.service-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
}

.service-card .service-img {
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}

.service-card:hover .service-img {
  transform: scale(1.06);
}

.service-card .service-arrow {
  transition: transform 300ms ease, opacity 300ms ease;
  opacity: 0;
  transform: translateX(-6px);
}

.service-card:hover .service-arrow {
  opacity: 1;
  transform: translateX(0);
}

.service-card .card-line {
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 400ms ease;
}

.service-card:hover .card-line {
  width: 2.5rem;
}

/* ---------- gallery lightbox ---------- */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: oklch(10% 0 0 / .92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

#lightbox.is-open {
  display: flex;
}

#lightbox img {
  max-height: 88vh;
  max-width: 92vw;
  object-fit: contain;
  border: 1px solid var(--hairline);
}

.gallery-item {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}

.gallery-item img {
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(21.6% .037 233.6 / 0) 40%, oklch(21.6% .037 233.6 / .85) 100%);
  opacity: 0;
  transition: opacity 300ms ease;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* ---------- form ---------- */

.field-input {
  width: 100%;
  background: oklch(100% 0 0 / .04);
  border: 1px solid var(--hairline);
  color: var(--foreground);
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  border-radius: 2px;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.field-input::placeholder { color: var(--muted); }

select.field-input {
  color-scheme: dark;
  background-color: var(--navy);
}

select.field-input option {
  background-color: var(--navy);
  color: var(--foreground);
}

.field-input:focus {
  border-color: var(--gold);
  background: oklch(100% 0 0 / .06);
}

.field-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
  display: block;
}

/* ---------- misc ---------- */

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.lazy-fade {
  opacity: 0;
  transition: opacity 500ms ease;
}
.lazy-fade.is-loaded {
  opacity: 1;
}