/* ============================================================
   BRAND PALETTE — 5-shade grayscale ramp, dark mode, plus one
   champagne-gold accent. Darkest → lightest maps to: background,
   border, secondary text, body text, headings. Gold is reserved
   for CTAs, dividers, active states and the hover glow — it never
   touches body copy or headings, so it reads as a deliberate
   accent rather than a second competing "bright" color.
   ============================================================ */
:root{
  --brand-soft:    #181B1E;  /* Eerie black  — page background        */
  --brand-border:  #5F6266;  /* Dim gray     — borders, dividers      */
  --brand-primary: #A5A9AE;  /* Cadet gray   — secondary/eyebrow text */
  --brand-muted:   #CFD1D4;  /* Silver       — body text              */
  --brand-deep:    #F8F9FA;  /* Seasalt      — headings, bright text  */
  --brand-accent:  #CBAE82;  /* Champagne gold — CTA fill, rules      */
  --brand-surface: #202327;  /* elevated panel, blended from the ramp */
  --brand-glow:    #CBAE82;  /* neon hover glow — champagne gold      */
  --ease: cubic-bezier(.22,.61,.36,1);
}

html{ scroll-behavior:smooth; }
body{ background:var(--brand-soft); color:var(--brand-muted); }

/* Decorative icons must never intercept clicks meant for their parent
   button/link — without this, a tap landing exactly on an SVG path can
   miss the click handler on touch devices. */
svg[aria-hidden="true"]{ pointer-events:none; }

/* ============================================================
   HERO BACKGROUND PHOTO — the source photo is uniformly dark
   across its top strip and right edge; "top left" positioning
   keeps that dark band under the nav so the logo's black square
   blends into it. The scrim guarantees text contrast regardless
   of exactly how "cover" crops it at a given viewport width.
   The photo sits on its own layer (not the section background)
   so it can carry the same grayscale treatment as every other
   photo on the site without desaturating the scrim/text above it.
   ============================================================ */
.hero-bg-photo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url('hero-bg.jpg?v=1');
  background-size:cover;
  background-position:left top;
  background-repeat:no-repeat;
  filter:grayscale(1) contrast(1.1) brightness(.92);
}
.hero-bg-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(24,27,30,.82) 0%, rgba(24,27,30,.7) 40%, rgba(24,27,30,.88) 100%);
}
@media (min-width:1024px){
  .hero-bg-scrim{
    background:linear-gradient(100deg, rgba(24,27,30,.9) 0%, rgba(24,27,30,.78) 32%, rgba(24,27,30,.55) 62%, rgba(24,27,30,.75) 100%);
  }
}

/* Restrained glass — nav only, per the design system's performance note */
.glass{
  background:rgba(24,27,30,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* Every content photo (gallery, about slideshow, hero) shares this
   grayscale treatment so full-color source photography still reads
   as one cohesive monochrome system rather than clashing with it. */
.mono-photo{ filter:grayscale(1) contrast(1.1) brightness(.96); }

/* Image slots — swap the background for a real photo */
.photo{
  background:linear-gradient(135deg,var(--brand-border) 0%,var(--brand-surface) 55%,var(--brand-border) 100%);
  position:relative; overflow:hidden;
}
.photo::after{
  content:attr(data-label); position:absolute; inset:0; display:grid; place-items:center;
  font-family:Montserrat,sans-serif; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-muted); opacity:.65; text-align:center; padding:1rem;
}

/* Reveal is opt-in: only hidden once JS confirms it can un-hide it again.
   Without JS (or if the observer never fires) the page renders fully visible. */
.js .reveal{ opacity:0; transform:translateY(16px); }
.js .reveal.in{ opacity:1; transform:none; transition:opacity .45s var(--ease), transform .45s var(--ease); }

a:focus-visible, button:focus-visible{
  outline:2px solid var(--brand-glow); outline-offset:3px; border-radius:2px;
}

.rule{ width:56px; height:1px; background:var(--brand-accent); }
.rule-light{ background:rgba(248,249,250,.55); }

/* ============================================================
   NEON HOVER GLOW — applied only to real clickable elements
   (<a>, <button>). rgba values are hardcoded to match
   --brand-glow (#CBAE82 / 203,174,130) for broad browser support.
   ============================================================ */
.glow-box{ transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease; }
.glow-box:hover, .glow-box:focus-visible{
  border-color: var(--brand-glow);
  box-shadow:
    0 0 0 1px rgba(203,174,130,.9),
    0 0 8px 1px rgba(203,174,130,.55),
    0 0 20px 4px rgba(203,174,130,.35),
    0 0 40px 10px rgba(203,174,130,.15);
}

.glow-text{ transition: color .2s ease, text-shadow .25s ease; }
.glow-text:hover, .glow-text:focus-visible{
  color: var(--brand-glow);
  text-shadow:
    0 0 6px rgba(203,174,130,.85),
    0 0 16px rgba(203,174,130,.5),
    0 0 32px rgba(203,174,130,.25);
}

/* Price rows: dotted leader between service and price */
.price-row{ display:flex; align-items:baseline; gap:.5rem; padding:.45rem 0; }
.price-row .name{ flex:0 1 auto; }
.price-row .dots{ flex:1 1 auto; border-bottom:1px dotted var(--brand-border); transform:translateY(-.25rem); min-width:1rem; }
.price-row .amt{ flex:0 0 auto; font-variant-numeric:tabular-nums; color:var(--brand-deep); }

/* Two-price (Classic / Rica) rows */
.duo{ display:grid; grid-template-columns:1fr 4.5rem 4.5rem; gap:.5rem; padding:.45rem 0; align-items:baseline; }
.duo .amt{ text-align:right; font-variant-numeric:tabular-nums; color:var(--brand-deep); }

/* ============================================================
   PHOTO SLIDESHOW — crossfade, autoplay (paused on hover/focus,
   disabled under prefers-reduced-motion — manual controls still
   work either way). Container needs position:relative + overflow
   hidden, set via Tailwind utilities where it's used in the page.
   ============================================================ */
.slideshow-slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity .7s var(--ease);
}
.slideshow-slide.is-active{ opacity:1; z-index:1; }

.slideshow-arrow{
  position:absolute; top:50%; translate:0 -50%;
  display:flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border-radius:9999px;
  background:rgba(24,27,30,.55); color:var(--brand-deep);
  border:1px solid var(--brand-border);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  z-index:2; cursor:pointer;
}
.slideshow-prev{ left:.75rem; }
.slideshow-next{ right:.75rem; }

.slideshow-dots{
  position:absolute; left:0; right:0; bottom:.9rem; z-index:2;
  display:flex; justify-content:center; gap:.5rem;
}
.slideshow-dot{
  width:.5rem; height:.5rem; border-radius:9999px; cursor:pointer;
  background:rgba(248,249,250,.4); border:1px solid transparent;
  transition:background .2s ease, transform .2s ease;
}
.slideshow-dot.is-active{ background:var(--brand-glow); transform:scale(1.25); }

@media (prefers-reduced-motion: reduce){
  .slideshow-slide{ transition:none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal, .js .reveal.in{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}