/*
Theme Name: Off-Road Lawn & Lights
Theme URI: https://lawn-and-lights.local
Author: Off-Road Lawn & Lights (built with Claude Code)
Author URI: https://lawn-and-lights.local
Description: Custom, hand-coded theme for Off-Road Lawn & Lights — a Lee's Summit, MO company offering Christmas light installation (lease model) and permanent year-round exterior lighting. Mobile-first, fast, and page-builder-free.
Version: 0.2.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: offroad
*/

/* =========================================================================
   OFF-ROAD LAWN & LIGHTS — DESIGN SYSTEM
   -------------------------------------------------------------------------
   This one file holds all of the site's styles, organized into sections so
   it's easy to find things. Think of it as the site's "look and feel" rules.

   TABLE OF CONTENTS
     1.  Design tokens (colors, fonts, spacing) .... :root variables
     2.  Reset & base
     3.  Typography (headings, body, links)
     4.  Layout (container, sections, grids)
     5.  Buttons
     6.  Cards
     7.  Badges, pills & eyebrows (small labels)
     8.  Hero band
     9.  Diagonal "off-road" section dividers
     10. Header (light bar + logo + nav + mobile menu)
     11. Footer
     12. Utilities (spacing, text, backgrounds)
     13. Accessibility (focus states, skip link, reduced motion)
     14. Style-guide preview page (temporary, for review)
   ========================================================================= */


/* =========================================================================
   1. DESIGN TOKENS
   "Tokens" = named values we reuse everywhere. Change one here and it
   updates across the whole site.
   ========================================================================= */
:root {

  /* --- LUXURY DARK + METALLIC BRONZE PALETTE ---
     The legacy variable NAMES are kept (so all components keep working), but
     the VALUES are now a premium black-and-bronze scheme:
       --green      -> antique bronze  (accent borders / secondary)
       --red        -> champagne gold  (primary CTAs / accents)
       --green-dark -> deepest near-black band
       --bg/surface -> near-black grounds and warm-dark panels
       --ink        -> warm off-white text */
  --green:        #8A6A3E;  /* Antique bronze */
  --green-dark:   #0A0806;  /* Deepest near-black */
  --red:          #C79A5A;  /* Champagne gold (primary accent / CTA) */
  --ink:          #ECE4D6;  /* Warm off-white body text */
  --bg:           #0C0B0A;  /* Rich near-black page background */
  --surface:      #16130E;  /* Warm-dark card / panel */

  /* --- Supporting tones --- */
  --green-tint:   #141009;  /* Subtly lifted dark (was a light wash) */
  --red-dark:     #A6793C;  /* Deeper gold for button hover */
  --line:         #2C251C;  /* Subtle warm hairline/border */
  --muted:        #A99B84;  /* Muted warm tan (captions, meta) */
  --on-dark:      #ECE4D6;  /* Text used on dark bands */

  /* --- Named metallics (for gradients & highlights) --- */
  --gold:         #a67a47;  /* Champagne gold */
  --gold-light:   #E6C888;  /* Highlight gold */
  --bronze:       #8A6A3E;  /* Antique bronze */
  --bronze-dark:  #3A2C1A;  /* Dark bronze */
  --black:        #0C0B0A;  /* Near-black */
  --gold-gradient: linear-gradient(135deg, #DDBE83 0%, #C79A5A 55%, #A6793C 100%);

  /* Fine matte-paper grain (reused on the body, hero, and page banners). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.18'/%3E%3C/svg%3E");

  /* --- Typefaces (classical engraved serif for a premium feel) --- */
  --font-display: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif; /* Headings/hero */
  --font-head:    "Cinzel", "Trajan Pro", Georgia, serif;                    /* Headings/labels/buttons */
  --font-body:    "EB Garamond", Georgia, "Times New Roman", serif;          /* Body copy */

  /* --- Type scale (mobile-first; clamp() grows sizes on bigger screens) ---
     clamp(MIN, PREFERRED, MAX): the font is at least MIN, ideally scales with
     the screen width, and never exceeds MAX. This is how we stay readable on
     a 375px phone AND a 1440px desktop with one line of code. */
  --fs-hero:  clamp(2.5rem, 7vw, 5rem);      /* Giant hero headline (Anton) */
  --fs-h1:    clamp(2rem, 5vw, 3.25rem);
  --fs-h2:    clamp(1.6rem, 4vw, 2.5rem);
  --fs-h3:    clamp(1.3rem, 2.6vw, 1.75rem);
  --fs-h4:    clamp(1.1rem, 2vw, 1.3rem);
  --fs-body:  clamp(1.1rem, 1.2vw, 1.25rem);  /* Base paragraph size (Garamond runs small) */
  --fs-small: 0.875rem;

  /* --- Spacing scale (consistent gaps everywhere) --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* --- Layout --- */
  --maxw:   1200px;                        /* Max content width */
  --maxw-narrow: 760px;                    /* For readable text blocks */
  --gutter: clamp(1rem, 4vw, 2rem);        /* Side padding that scales */

  /* --- Rounding & shadows --- */
  --radius:    10px;
  --radius-lg: 16px;
  --shadow:    0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);

  /* --- Motion --- */
  --transition: 180ms ease;
}


/* =========================================================================
   2. RESET & BASE
   Levels out browser defaults so our layout is predictable.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Textured, spotlit ground (matches the business-card look): a fine grain,
     a warm light glow from the top, and a soft vignette at the bottom. Fixed,
     so it reads as one consistent light source while you scroll. */
  background-color: var(--bg);
  background-image:
    var(--grain),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(135% 95% at 26% -12%, rgba(157,117,66,0.22) 0%, rgba(64,47,27,0.09) 30%, rgba(10,8,5,0) 60%),
    radial-gradient(120% 120% at 50% 130%, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0) 55%);
  background-attachment: fixed;
  background-size: 220px 220px, 500px 500px, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
}

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

/* Make sure the site always fills the screen height, footer sits at bottom */
body { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; }


/* =========================================================================
   3. TYPOGRAPHY
   ========================================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  line-height: 1.18;
  margin: 0 0 var(--space-3);
  color: var(--ink);
  text-transform: uppercase;   /* Cinzel is engraved Roman caps — luxe */
  letter-spacing: 0.045em;
  font-weight: 600;
  text-wrap: balance;          /* no orphan words dangling off big headings */
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); text-transform: none; letter-spacing: 0; }

/* The .display class turns any heading into the huge Anton hero style. */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  /* Metallic sheen on the big hero wordmark, with a solid-gold fallback so it
     is never invisible if background-clip:text isn't supported. */
  color: var(--gold);
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

p { margin: 0 0 var(--space-3); max-width: 68ch; } /* ~68 chars = comfy reading */

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-light); }

strong, b { font-weight: 700; }

ul, ol { margin: 0 0 var(--space-3); padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }

/* "Lead" paragraph — slightly larger intro text under a heading */
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--muted); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-5) 0; }


/* =========================================================================
   4. LAYOUT
   ========================================================================= */

/* .container centers content and caps its width for readability. */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }

/* .section is our standard vertical spacing wrapper for page bands. */
.section { padding-block: var(--space-7); }
.section--sm { padding-block: var(--space-5); }

/* Background variants for sections */
.section--green      { background: rgba(199,154,90,0.05); color: var(--on-dark);
  border-top: 1px solid rgba(199,154,90,0.15);
  border-bottom: 1px solid rgba(199,154,90,0.15); }
.section--green-dark { background: rgba(0,0,0,0.35);  color: var(--on-dark); }
.section--tint       { background: rgba(255,255,255,0.02); }
.section--surface    { background: var(--surface); }

/* Keep headings readable on dark green sections */
.section--green h1, .section--green h2, .section--green h3,
.section--green-dark h1, .section--green-dark h2, .section--green-dark h3 { color: #fff; }
.section--green p, .section--green-dark p { color: var(--on-dark); }

/* Simple, responsive auto-grid: cards flow into as many columns as fit,
   then stack to 1 column on phones. minmax(min(100%, 300px)...) prevents
   overflow on very small screens. */
.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

/* Center-aligned intro block above a grid of cards */
.section-head { text-align: center; max-width: 720px; margin: 0 auto var(--space-5); }
.section-head p { margin-inline: auto; }


/* =========================================================================
   5. BUTTONS
   .btn is the base; add a modifier for color. Red = primary conversion CTA
   (used sparingly), green = secondary. All buttons are big & tappable for
   mobile (min 48px tall = accessible tap target).
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform var(--transition), background var(--transition),
              box-shadow var(--transition), color var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* PRIMARY — metallic champagne-gold fill with dark text (the main CTA). */
/* Solid gold background-color UNDER the gradient image: if the gradient ever
   fails to composite for a frame (a Chrome quirk when the button sits over the
   playing hero video and lifts on hover), the button stays gold instead of
   flashing dark/transparent. */
.btn--primary { background-color: #C79A5A; background-image: var(--gold-gradient); color: #17110A; border-color: rgba(230,200,136,0.55); box-shadow: 0 6px 20px rgba(0,0,0,0.45); transform: translateZ(0); }
.btn--primary:hover { background-color: #E6C888; background-image: linear-gradient(135deg,#F1D6A0 0%,#D6AC6A 50%,#B98C48 100%); color: #17110A; box-shadow: 0 10px 30px rgba(199,154,90,0.30); }

/* SECONDARY — refined gold outline that fills on hover. */
.btn--secondary { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn--secondary:hover { background: var(--gold); color: #17110A; }

/* OUTLINE — lighter gold outline (for the darkest backgrounds). */
.btn--outline { background: transparent; color: var(--gold-light); border-color: rgba(230,200,136,0.6); }
.btn--outline:hover { background: var(--gold); color: #17110A; border-color: var(--gold); }

/* OUTLINE-DARK — gold outline (kept as an alias; everything is dark now). */
.btn--outline-dark { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn--outline-dark:hover { background: var(--gold); color: #17110A; }

/* Size + width helpers */
.btn--lg    { font-size: 1.2rem; padding: 1.1rem 2rem; }
.btn--block { display: flex; width: 100%; }


/* =========================================================================
   6. CARDS
   Reusable content box. .card--service adds a colored top accent bar so each
   service can carry its own color (green / red / etc).
   ========================================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.card h3 { margin-bottom: var(--space-2); }
.card p  { color: var(--muted); }

/* Push a card's button to the bottom so cards in a row line up neatly. */
.card .btn, .card .card-cta { margin-top: auto; align-self: flex-start; }

/* Service cards: colored accent strip along the top. */
.card--service { border-top: 5px solid var(--green); }
.card--service.accent-red   { border-top-color: var(--red); }
.card--service.accent-green { border-top-color: var(--green); }

/* Simple round icon badge for the top of a service card. */
.card-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(199,154,90,0.10);
  color: var(--gold);
  margin-bottom: var(--space-2);
  font-size: 1.6rem;
  border: 1px solid rgba(199,154,90,0.30);
}
.card--service.accent-red .card-icon { background: rgba(230,200,136,0.12); color: var(--gold-light); }


/* =========================================================================
   7. BADGES, PILLS & EYEBROWS (small labels)
   ========================================================================= */

/* Eyebrow: the small uppercase label above a headline. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-small);
  color: var(--muted);
  margin-bottom: var(--space-2);
}
/* The hero eyebrows stay gold — the one place the accent is spent. */
.hero .eyebrow, .page-hero .eyebrow {
  color: var(--red);
}
.section--green .eyebrow, .section--green-dark .eyebrow { color: var(--muted); }

/* Trust badge/pill — e.g. "Fully Insured", "Locally Owned". */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(199,154,90,0.08);
  border: 1px solid rgba(199,154,90,0.35);
  color: var(--gold-light);
}
.section--green .badge, .section--green-dark .badge {
  background: rgba(199,154,90,0.10);
  border-color: rgba(199,154,90,0.35);
  color: var(--gold-light);
}

/* A horizontal strip that lays trust badges out evenly, wrapping on mobile. */
/* --- Proof strip: earned numbers, set large and quiet --- */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-7);
  margin-bottom: var(--space-4);
}
.stat { text-align: center; }
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--muted);
}

/* --- "Our Work" showcase video player --- */
.showcase-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: #000;
}

/* --- The "lights on" scroll moment (renders only once both photos exist) --- */
.lights-scene {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.lights-img {
  display: block;
  width: 100%;
  height: auto;
}
.lights-img--on {
  position: absolute;
  inset: 0;
  /* Lit by default — JS animates it from dark only when motion is allowed. */
  opacity: 1;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
}


/* =========================================================================
   8. HERO BAND
   The big top section on the Home page. Dark green base with room for a
   background image/video later. Text and CTAs sit on top.
   ========================================================================= */
/* The hero is LAYERED, back to front:
     1. .hero-media   — animated texture (also the fallback if no video)
     2. .hero-video   — the background video (only output when one exists)
     3. .hero-overlay — dark tint so text stays readable over ANY video
     4. .container    — the headline + CTAs, on top of everything */
.hero {
  position: relative;
  isolation: isolate;              /* keeps our z-index layers self-contained */
  background: var(--green-dark);   /* base color if everything else fails */
  color: #fff;
  overflow: hidden;
  padding-block: clamp(3.5rem, 10vw, 8rem);
}

/* 1. Animated texture / fallback: faint topographic lines that slowly drift. */
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  background:
    var(--grain),
    repeating-linear-gradient(115deg, rgba(199,154,90,0.06) 0 2px, transparent 2px 30px),
    radial-gradient(120% 55% at 50% 104%, rgba(214,166,94,0.20) 0%, rgba(199,154,90,0.07) 42%, rgba(199,154,90,0) 72%),
    linear-gradient(160deg, #16100A 0%, #0A0806 48%, #1B130A 100%);
  background-size: 220px 220px, 260px 260px, 100% 100%, 100% 100%;
  animation: hero-drift 40s linear infinite;
}
@keyframes hero-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 220px 110px, 260px 130px, 0 0, 0 0; }
}

/* 2. Background video — fills the hero, cropped to cover (no distortion). */
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* 3. Dark overlay for guaranteed text contrast over the video/texture. */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(8,6,4,0.68) 0%, rgba(10,8,6,0.52) 55%, rgba(6,5,3,0.86) 100%);
}

/* 4. Content on top. */
.hero > .container { position: relative; z-index: 2; }
.hero .display { margin-bottom: var(--space-3); }
.hero .lead { color: var(--on-dark); max-width: 48ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* Accessibility: users who prefer less motion get a still hero (no drift, no video). */
@media (prefers-reduced-motion: reduce) {
  .hero-media { animation: none; }
  .hero-video { display: none; }
}


/* =========================================================================
   9. DIAGONAL "OFF-ROAD" SECTION DIVIDERS
   A subtle angular edge between bands, echoing the rugged brand. Applied by
   adding .has-slant-bottom to a section.
   ========================================================================= */
.has-slant-bottom { position: relative; }
.has-slant-bottom::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 40px;
  background: inherit;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}


/* =========================================================================
   10. HEADER — light bar + logo + navigation + mobile menu
   ========================================================================= */
.site-header {
  background: rgba(12, 11, 10, 0.90);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(199, 154, 90, 0.35);
  position: sticky;      /* Stays visible as you scroll */
  top: 0;
  z-index: 100;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 0.6rem;
}

/* Logo */
.site-logo { display: flex; align-items: center; }
.site-logo img { max-height: 77px; width: auto; }         /* header logo size — raise/lower this number */
@media (max-width: 600px) { .site-logo img { max-height: 56px; } } /* smaller on phones so it fits beside the menu button */
.site-logo .text-fallback {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-decoration: none;
  text-transform: uppercase;
}

/* Desktop navigation */
.primary-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0; padding: 0;
}
.primary-nav a {
  font-family: var(--font-head);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.98rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a { color: var(--gold); border-bottom-color: var(--gold); }

/* A "Quote" button can live in the menu — mark it with .nav-cta */
.primary-nav .nav-cta a,
.primary-nav a.nav-cta {
  background: var(--gold-gradient); color: #17110A; border-radius: var(--radius);
  padding: 0.5rem 1.1rem; border-bottom: none; letter-spacing: 0.06em;
}
.primary-nav .nav-cta a:hover { background: var(--gold-light); color: #17110A; }

/* Hamburger button — hidden on desktop, shown on mobile via media query */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px; height: 48px;
  background: transparent;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0 10px;
}
.nav-toggle span { display: block; height: 3px; background: var(--gold); border-radius: 2px; transition: var(--transition); }


/* =========================================================================
   11. FOOTER (basic — expanded in a later step)
   ========================================================================= */
.site-footer {
  background: var(--green-dark);
  color: var(--on-dark);
  padding-block: var(--space-5);
}
.site-footer a { color: #fff; }
.site-footer p { max-width: none; }

/* Top area: responsive columns (brand wider than the rest). */
.footer-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.footer-wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem; text-transform: uppercase; margin: 0 0 0.5rem;
}
.footer-logo img { max-height: 64px; width: auto; margin-bottom: 0.5rem; }
.footer-tagline { color: var(--on-dark); font-style: italic; margin-bottom: var(--space-2); }

.footer-heading {
  font-size: 1rem; color: #fff; margin-bottom: var(--space-2);
  letter-spacing: 0.05em;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { text-decoration: none; opacity: 0.9; }
.footer-links a:hover { opacity: 1; color: #fff; text-decoration: underline; }
.footer-col .btn { margin-top: var(--space-2); }

.footer-bottom {
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.15);
  text-align: center; font-size: 0.9rem;
}
.footer-bottom p { margin: 0; opacity: 0.85; }


/* =========================================================================
   12. UTILITIES
   Tiny single-purpose helper classes.
   ========================================================================= */
.text-center { text-align: center; }
.text-red    { color: var(--red); }
.text-green  { color: var(--green); }
.text-white  { color: #fff; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.stack > * + * { margin-top: var(--space-3); }  /* even vertical rhythm */
.flow-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* =========================================================================
   13. ACCESSIBILITY
   ========================================================================= */

/* Clear keyboard focus ring on all interactive elements. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

/* Skip-to-content link (hidden until focused). */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--red); color: #fff;
  padding: 0.75rem 1rem; z-index: 1000; border-radius: 0 0 6px 0;
  font-family: var(--font-head); text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}


/* =========================================================================
   14. STYLE-GUIDE PREVIEW PAGE (temporary)
   Just spacing helpers for the review page. Safe to remove later.
   ========================================================================= */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); }
.sg-swatch { border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; font-family: var(--font-head); font-size: 0.8rem; }
.sg-swatch .chip { height: 84px; }
.sg-swatch .label { padding: 0.5rem 0.7rem; background: #fff; text-transform: none; }
.sg-swatch .label b { display: block; text-transform: uppercase; letter-spacing: 0.03em; }
.sg-swatch .label span { color: var(--muted); font-family: var(--font-body); }
.sg-block { margin-bottom: var(--space-6); }
.sg-block > h2 { border-bottom: 3px solid var(--red); display: inline-block; padding-bottom: 0.25rem; }


/* =========================================================================
   15. HOME-PAGE COMPONENTS
   ========================================================================= */

/* --- Process / "How it works" numbered steps --- */
.process-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.process-step { text-align: center; }
.step-num {
  width: 60px; height: 60px;
  margin: 0 auto var(--space-2);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1;
  color: var(--gold); background: transparent;
  border: 2px solid var(--gold);
  border-radius: 50%;
  box-shadow: var(--shadow);
}
/* One consistent marker — the numbers are wayfinding, not decoration. */
.process-step:hover .step-num { background: var(--gold-gradient); color: #17110A; border-color: transparent; }
.process-step h3 { font-size: var(--fs-h4); text-transform: uppercase; margin-bottom: var(--space-1); }
.process-step p { color: var(--muted); margin-inline: auto; }
.section--green .process-step h3 { color: #fff; }
.section--green .process-step p  { color: var(--on-dark); }
.section--green .step-num { border: 3px solid rgba(255,255,255,0.25); }

/* --- Seasonal urgency banner (ACF-toggleable later) --- */
.season-banner {
  background: #14100A;
  border-top: 1px solid rgba(199,154,90,0.30);
  border-bottom: 1px solid rgba(199,154,90,0.30);
  color: var(--gold-light);
}
.season-banner .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-2) var(--space-3); text-align: center;
  padding-block: var(--space-3);
}
.season-banner p {
  margin: 0; max-width: none; color: var(--gold-light);
  font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem;
}
.season-banner .btn { background: transparent; color: var(--gold); border: 2px solid var(--gold); }
.season-banner .btn:hover { background: var(--gold); color: #17110A; }

/* --- Service area teaser cards --- */
.area-split {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.area-card {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 6px solid var(--green);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.area-card.accent-red { border-left-color: var(--red); }
.area-scope {
  display: inline-block; margin-bottom: var(--space-1);
  font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.8rem; color: var(--muted);
}

/* --- Reviews / testimonials placeholder (no fake reviews) --- */
/* Brand statement — a restrained design line in place of absent reviews.
   Set large and quiet, centered, with a single gold hairline above it. */
.brand-statement {
  margin: var(--space-5) auto 0;
  max-width: 24ch;
  padding-top: var(--space-4);
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.brand-statement::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: var(--gold);
}

/* --- Photo placeholders (correct aspect ratio, swap for real ACF images) --- */
.photo-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.photo-ph {
  aspect-ratio: 4 / 3;                 /* keeps the real ratio before photos exist */
  border-radius: var(--radius);
  background: linear-gradient(160deg, #16130E 0%, #100D09 60%, #17120B 100%);
  border: 1px solid var(--line);
  display: grid; place-items: center; text-align: center;
  color: var(--muted); padding: 1rem;
  font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.72rem;
}

/* --- Sticky mobile "Get a Quote" bar (phones only; single conversion path) --- */
.mobile-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.45);
  padding: 0.6rem var(--gutter);
  display: none;                       /* shown only on small screens below */
  /* Stays tucked away until the visitor scrolls past the hero, so the
     hero's own CTA is the only gold button on screen. */
  transform: translateY(110%);
  transition: transform 300ms ease;
}
body.cta-bar-visible .mobile-cta-bar { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-bar { transition: none; }
}
.mobile-cta-bar .btn { width: 100%; }


/* =========================================================================
   16. INNER-PAGE COMPONENTS (service pages, about, contact, etc.)
   ========================================================================= */

/* Page banner — a compact hero for inner pages (no video). */
.page-hero {
  position: relative; overflow: hidden;
  background:
    var(--grain),
    radial-gradient(120% 100% at 25% -20%, rgba(157,117,66,0.20), rgba(10,8,5,0) 55%),
    var(--green-dark);
  background-size: 220px 220px, 100% 100%, 100% 100%;
  color: #fff;
  padding-block: clamp(2.5rem, 7vw, 5rem);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(199,154,90,0.06) 0 2px, transparent 2px 30px);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--gold); }
.page-hero .lead { color: var(--on-dark); max-width: 54ch; }
.page-hero .btn { margin-top: var(--space-3); }

/* Two-column layout: main content + aside. Stacks to 1 column on mobile. */
.cols { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .cols--aside { grid-template-columns: 1.6fr 1fr; align-items: start; }
}

/* Checkmark feature list (what's included). */
.feature-list { list-style: none; padding-left: 0; }
.feature-list li { position: relative; padding-left: 2.1rem; margin-bottom: 0.75rem; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 0.15em;
  width: 1.3rem; height: 1.3rem; border-radius: 50%; background-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317110A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 0.8rem; background-position: center; background-repeat: no-repeat;
}
.feature-list.accent-red li::before { background-color: var(--gold-light); }

/* Callout box — service-area notes, seasonal notes, etc. */
.callout {
  background: var(--green-tint); border-left: 5px solid var(--green);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.callout.accent-red { border-left-color: var(--gold); background: #1A130B; }
.callout h3, .callout h2 { margin-bottom: var(--space-1); font-size: var(--fs-h4); text-transform: uppercase; letter-spacing: 0.045em; }
.callout p:last-child { margin-bottom: 0; }
.callout p { max-width: none; }

/* Highlight box — the big "differentiator" panel (e.g. lease model). */
.highlight-box {
  background: var(--surface); border: 2px solid var(--green);
  border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow);
}
.highlight-box.accent-red { border-color: var(--red); }


/* =========================================================================
   17. FORMS, GALLERY FILTER, SERVICE-AREA LIST, CONTACT
   ========================================================================= */

/* --- Forms (also styles Contact Form 7 / WPForms output later) --- */
.form-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow);
}
.form-field { margin-bottom: var(--space-3); }
.form-field label {
  display: block; margin-bottom: 0.4rem; color: var(--gold-light);
  font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.8rem;
}
.form-field input[type="text"], .form-field input[type="email"],
.form-field input[type="tel"], .form-field textarea, .form-field select {
  width: 100%; padding: 0.8rem 0.9rem; font: inherit; color: var(--ink);
  background: #100E09; border: 1px solid var(--line); border-radius: var(--radius);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--gold); outline: none;
  box-shadow: 0 0 0 3px rgba(199, 154, 90, 0.25);
}
.checkbox-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.checkbox-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.6rem 0.9rem; cursor: pointer; font-weight: 500;
}
.checkbox-pill input { accent-color: var(--gold); width: 1.1rem; height: 1.1rem; }
.form-note { font-size: 0.85rem; color: var(--muted); }
.form-consent { margin-top: var(--space-3); font-size: 0.85rem; color: var(--muted); max-width: none; }
.footer-legal { margin-top: 0.5rem; font-size: 0.85rem; }
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--gold-light); }

/* Yellow "not live yet" note used on placeholder forms during the build. */
.placeholder-banner {
  background: #1A130B; border: 1px dashed rgba(199,154,90,0.5); color: var(--gold-light);
  border-radius: var(--radius); padding: 0.8rem 1rem;
  font-size: 0.9rem; margin-bottom: var(--space-3);
}

/* --- Fluent Forms: dark-theme overrides (the live quote/contact forms) --- */
.frm-fluent-form .ff-el-input--label label,
.frm-fluent-form .ff-el-form-check-label,
.frm-fluent-form legend {
  color: var(--gold-light) !important;
  font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.8rem;
}
.frm-fluent-form .ff-el-form-control {
  background: #100E09 !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; border-radius: var(--radius) !important;
  padding: 0.8rem 0.9rem !important;
}
.frm-fluent-form .ff-el-form-control:focus {
  border-color: var(--gold) !important; box-shadow: none !important;
}
.frm-fluent-form .ff-el-form-control::placeholder { color: #7C7360 !important; }
.frm-fluent-form select.ff-el-form-control option { color: #17110A; }
.frm-fluent-form .ff-el-help-message { color: var(--muted) !important; }
.frm-fluent-form .ff-el-is-required.asterisk-left label:before,
.frm-fluent-form .ff-el-is-required label:after { color: var(--gold) !important; }
.frm-fluent-form input[type="checkbox"], .frm-fluent-form input[type="radio"] { accent-color: var(--gold); }
.frm-fluent-form .ff-btn-submit {
  background: var(--gold-gradient) !important; color: #17110A !important;
  border: none !important; font-family: var(--font-head) !important;
  text-transform: uppercase !important; letter-spacing: 0.08em !important;
  font-weight: 600 !important; padding: 0.95rem 1.7rem !important;
  border-radius: var(--radius) !important; min-height: 48px;
}
.frm-fluent-form .ff-btn-submit:hover { filter: brightness(1.06); }
.ff-message-success {
  background: #14100A !important; border: 1px solid rgba(199,154,90,0.35) !important;
  color: var(--ink) !important; border-radius: var(--radius) !important; padding: 1rem 1.2rem !important;
}

/* --- Gallery filter tabs --- */
.gallery-tabs {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  justify-content: center; margin-bottom: var(--space-4);
}
.gallery-tab {
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 0.9rem; padding: 0.55rem 1.15rem; cursor: pointer;
  border: 1px solid var(--gold); background: transparent; color: var(--gold);
  border-radius: 999px; transition: var(--transition);
}
.gallery-tab:hover { background: rgba(199,154,90,0.10); }
.gallery-tab[aria-selected="true"] { background: var(--gold-gradient); color: #17110A; border-color: transparent; }
.gallery-item.is-hidden { display: none; }

/* Real gallery photo tiles (used once Projects have images). */
.photo-tile {
  position: relative; margin: 0;
  aspect-ratio: 4 / 3; border-radius: var(--radius);
  overflow: hidden; background: var(--green-tint);
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.7rem 0.9rem; color: var(--gold-light);
  background: linear-gradient(transparent, rgba(6,5,3,0.92));
  font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: 0.03em; font-size: 0.82rem;
}

/* --- Service-area city list --- */
.city-list { columns: 2; column-gap: var(--space-4); list-style: none; padding-left: 0; margin: 0; }
.city-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
@media (min-width: 720px) { .city-list { columns: 3; } }

/* --- Contact details + social icons --- */
.contact-lines { list-style: none; padding-left: 0; margin: 0; }
.contact-lines li { margin-bottom: var(--space-2); }
.contact-lines .label {
  display: block; font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 0.78rem; color: var(--muted);
}
.social-icons { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.social-icons a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: var(--green); color: #fff;
}
.social-icons a:hover { background: var(--red); }
.social-icons.on-dark a { background: rgba(255,255,255,0.14); }
.social-icons.on-dark a:hover { background: var(--red); }


/* =========================================================================
   RESPONSIVE — MOBILE MENU
   Below 900px we hide the desktop menu and show the hamburger. The menu
   opens as a full-width dropdown when toggled (navigation.js flips the
   data-open attribute).
   ========================================================================= */
@media (max-width: 900px) {

  .nav-toggle { display: flex; }

  .primary-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--surface);
    border-bottom: 4px solid var(--green);
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .primary-nav[data-open="true"] { display: block; }

  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) var(--gutter); }
  .primary-nav li { margin: 0; border-bottom: 1px solid var(--line); }
  .primary-nav li:last-child { border-bottom: 0; }
  .primary-nav a { display: block; padding: 0.9rem 0; font-size: 1.1rem; border-bottom: none; }
  .primary-nav .nav-cta a { text-align: center; margin: 0.6rem 0; }

  /* When the menu is open, morph the hamburger into an X. */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* Sticky mobile quote bar: show on phones, and reserve space so it never
   covers the footer. */
@media (max-width: 720px) {
  .mobile-cta-bar { display: block; }
  body { padding-bottom: 76px; }
}


/* =========================================================================
   17. FAQ ACCORDION (service pages)
   ------------------------------------------------------------------------- */
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-family: var(--font-head);
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: var(--green, #17351b);
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item > p { padding: 0 1.25rem 1.1rem; margin: 0; }
.faq-item summary:focus-visible { outline: 2px solid var(--green, #17351b); outline-offset: -2px; }


/* =========================================================================
   18. CINEMATIC LUXURY LAYER
   -------------------------------------------------------------------------
   Motion, depth, and interaction polish. The .lux class is added to <html>
   by an inline head script ONLY when motion is allowed; luxury.js then runs
   the choreography (GSAP + ScrollTrigger + Lenis). Without JS or with
   reduced motion, none of the hiding below ever applies.
   ========================================================================= */

/* Lenis smooth-scroll housekeeping (recommended by the library). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* --- Pre-hide reveal targets before first paint (mirrors luxury.js list).
       luxury.js immediately replaces this with inline styles; a safety timer
       in the head strips .lux if the script never arrives. --- */
.lux .section-head, .lux .card, .lux .process-step, .lux .callout,
.lux .photo-tile, .lux .photo-ph, .lux .form-card, .lux .faq-item,
.lux .trust-strip .badge, .lux .city-list li, .lux .contact-lines li,
.lux .season-banner .container, .lux .section > .container--narrow,
.lux .footer-grid > *, .lux .stat,
.lux .hero .eyebrow, .lux .hero .display, .lux .hero .lead,
.lux .hero-actions, .lux .hero-scroll-cue,
.lux .page-hero .eyebrow, .lux .page-hero h1, .lux .page-hero .lead,
.lux .page-hero .btn {
  opacity: 0;
}

/* --- FULLSCREEN CINEMATIC HERO (home) --- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.hero > .container { will-change: transform; }
.hero-media, .hero-video { will-change: transform; }

/* Scroll cue: a slim gold thread that breathes at the base of the hero. */
.hero-scroll-cue {
  position: absolute; left: 50%; bottom: 2.2rem; z-index: 2;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: var(--gold-light);
  font-family: var(--font-head);
  font-size: 0.65rem; letter-spacing: 0.34em; text-transform: uppercase;
}
.hero-scroll-cue span {
  display: block; width: 1px; height: 58px;
  background: linear-gradient(180deg, var(--gold-light), rgba(230,200,136,0));
  animation: cue-drop 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cue-drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll-cue span { animation: none; } }

/* --- HEADER: condenses after the first scroll --- */
.site-header { transition: box-shadow 0.6s ease, background 0.6s ease; }
.site-header .site-logo img { transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.site-header.is-scrolled { background: rgba(10, 9, 8, 0.97); box-shadow: 0 10px 40px rgba(0,0,0,0.55); }
.site-header.is-scrolled .site-logo img { max-height: 54px; }

/* --- PREMIUM TYPOGRAPHY REFINEMENTS --- */
.eyebrow { letter-spacing: 0.3em; }
.hero .lead, .page-hero .lead { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.65; }
::selection { background: rgba(199, 154, 90, 0.35); color: #fff; }

/* --- SLOW, WEIGHTED HOVER PHYSICS --- */
.btn {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(199, 154, 90, 0.28); }
.btn:active { transform: translateY(0); }

.card, .callout {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.5s ease, box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover { transform: translateY(-8px); border-color: rgba(199, 154, 90, 0.55); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }

.photo-tile { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s ease; }
.photo-tile:hover { transform: translateY(-6px); box-shadow: 0 22px 55px rgba(0, 0, 0, 0.55); }

/* Nav links: a gold underline that sweeps in from the left. */
.primary-nav a {
  background-image: linear-gradient(90deg, var(--gold-light), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a { background-size: 100% 1px; }

/* FAQ accordion breathes open */
.faq-item { transition: border-color 0.4s ease; }
.faq-item[open], .faq-item:hover { border-color: rgba(199, 154, 90, 0.45); }

/* --- CUSTOM CURSOR (desktop pointers; created by luxury.js) --- */
.lux-cursor-dot, .lux-cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.lux-cursor-on .lux-cursor-dot, .lux-cursor-on .lux-cursor-ring { opacity: 1; }
.lux-cursor-dot {
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  background: var(--gold-light);
  transition: opacity 0.4s ease, transform 0.3s ease;
}
.lux-cursor-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid rgba(230, 200, 136, 0.55);
  transition: opacity 0.4s ease, width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.45s cubic-bezier(0.22, 1, 0.36, 1), margin 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}
.lux-cursor-hover .lux-cursor-ring {
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-color: rgba(230, 200, 136, 0.9);
}
.lux-cursor-hover .lux-cursor-dot { transform: scale(0); }
@media (pointer: coarse) { .lux-cursor-dot, .lux-cursor-ring { display: none; } }


/* =========================================================================
   19. INTERACTIVE LIGHTING DEMO
   The "tap a scene" house visualizer (template-parts/lighting-demo.php).
   ========================================================================= */
.lighting-demo { max-width: 900px; margin-inline: auto; }
.ld-stage {
  border: 1px solid rgba(199, 154, 90, 0.35);
  border-radius: var(--radius, 10px);
  overflow: hidden;
  background: #07090F;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.ld-stage svg { display: block; width: 100%; height: auto; }

/* Bulb cores + halos: colors are set inline by JS and glide between scenes. */
.ld-core { fill: #FFD9A3; transition: fill 0.9s ease; }
.ld-glow { fill: #FFD9A3; opacity: 0.32; transition: fill 0.9s ease; }
#ld-ambient { transition: fill 1.2s ease; }

/* Twinkle (only on festive scenes; disabled for reduced motion). */
@keyframes ld-twinkle { 50% { opacity: 0.45; } }
.ld-twinkle .ld-core { animation: ld-twinkle 1.9s ease-in-out infinite; }
.ld-twinkle .ld-glow { animation: ld-twinkle 1.9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ld-twinkle .ld-core, .ld-twinkle .ld-glow { animation: none; }
}

/* Scene chips */
.ld-controls {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem; margin-top: var(--space-3);
}
.ld-chip {
  font-family: var(--font-head);
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-light);
  background: transparent;
  border: 1px solid rgba(199, 154, 90, 0.45);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease,
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ld-chip:hover { border-color: var(--gold-light); transform: translateY(-2px); }
.ld-chip.is-active {
  background: var(--gold-gradient);
  color: #17110A;
  border-color: rgba(230, 200, 136, 0.6);
}
.ld-note {
  text-align: center; color: var(--muted);
  margin-top: var(--space-2); font-size: 0.95rem;
}


/* =========================================================================
   19b. LIGHTING DEMO — PRO CONTROLS, ZONES & DAY MODE
   ========================================================================= */

/* Day/night cross-fade: every scenic element transitions its fill/opacity. */
.ld-skyday { opacity: 0; }
.ld-sun    { opacity: 0; }
.ld-skyday, .ld-sun, .ld-stars, .ld-moon, .ld-window, .ld-pathlight,
.ld-wall-a, .ld-wall-b, .ld-wall-c, .ld-roof-a, .ld-roof-b, .ld-roof-c,
.ld-door, .ld-garage, .ld-ground, .ld-ground2 {
  transition: opacity 1.1s ease, fill 1.1s ease;
}
.is-day .ld-skyday { opacity: 1; }
.is-day .ld-sun    { opacity: 1; }
.is-day .ld-stars, .is-day .ld-moon { opacity: 0; }
.is-day .ld-window { fill: #D9E4EF; opacity: 0.9; }
.is-day .ld-pathlight { opacity: 0.25; }
.is-day .ld-wall-a { fill: #97A2B2; }
.is-day .ld-wall-b { fill: #8C97A8; }
.is-day .ld-wall-c { fill: #84909F; }
.is-day .ld-roof-a { fill: #5C6A7A; }
.is-day .ld-roof-b { fill: #566373; }
.is-day .ld-roof-c { fill: #616F7F; }
.is-day .ld-door   { fill: #3C4652; }
.is-day .ld-garage { fill: #6A7787; stroke: #97A2B2; }
.is-day .ld-ground { fill: #77836D; }
.is-day .ld-ground2 { fill: #6B775F; }
#ld-ambient, #ld-groundglow { transition: fill 1.2s ease, opacity 1.2s ease; }

/* LED opacity is driven per-frame by JS, so no opacity transition here —
   only the color glide between scenes. */
.ld-core, .ld-glow { transition: fill 0.9s ease; }

/* Zone hit-targets: invisible fat strokes along each roofline. */
#ld-zones path {
  fill: none;
  stroke: rgba(255, 255, 255, 0);
  stroke-width: 30;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
  outline: none;
}
#ld-zones path:focus-visible { stroke: rgba(230, 200, 136, 0.18); }

/* --- Control panel: framed like the real app remote --- */
.ld-panel {
  margin-top: var(--space-3);
  background: var(--surface);
  border: 1px solid rgba(199, 154, 90, 0.3);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
.ld-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
.ld-row--split { justify-content: space-between; align-items: center; gap: 0.9rem; }
.ld-row--dim { align-items: center; gap: 0.9rem; flex-wrap: nowrap; }

.ld-label {
  font-family: var(--font-head);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}

/* Segmented effect control */
.ld-seg {
  display: inline-flex;
  border: 1px solid rgba(199, 154, 90, 0.35);
  border-radius: 999px;
  overflow: hidden;
}
.ld-seg-btn {
  font-family: var(--font-head);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  background: transparent; border: 0;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease;
}
.ld-seg-btn + .ld-seg-btn { border-left: 1px solid rgba(199, 154, 90, 0.2); }
.ld-seg-btn:hover { color: var(--gold-light); }
.ld-seg-btn.is-active { background: rgba(199, 154, 90, 0.16); color: var(--gold-light); }

/* Day/night pill */
.ld-daynight {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-head);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-light);
  background: transparent;
  border: 1px solid rgba(199, 154, 90, 0.45);
  border-radius: 999px;
  padding: 0.45rem 0.9rem 0.45rem 0.5rem;
  cursor: pointer;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.ld-daynight:hover { border-color: var(--gold-light); }
.ld-daynight-knob {
  width: 22px; height: 22px; border-radius: 50%;
  background: #131A28 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12a6 6 0 1 1-7.6-5.8A7 7 0 1 0 17 12z' fill='%23E6C888'/%3E%3C/svg%3E") center/13px no-repeat;
  border: 1px solid rgba(230, 200, 136, 0.5);
  transition: background 0.5s ease;
}
.ld-daynight.is-day .ld-daynight-knob {
  background: #DDE8F1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23B8860B'/%3E%3Cg stroke='%23B8860B' stroke-width='2'%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.5 4.5l2 2M17.5 17.5l2 2M19.5 4.5l-2 2M6.5 17.5l-2 2'/%3E%3C/g%3E%3C/svg%3E") center/13px no-repeat;
}

/* Brightness slider */
#ld-dim {
  flex: 1; max-width: 340px;
  accent-color: #C79A5A;
  cursor: pointer;
}

/* Custom color pickers */
.ld-custom {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0.7rem;
}
.ld-custom[hidden] { display: none; }
.ld-custom input[type="color"] {
  width: 44px; height: 34px;
  border: 1px solid rgba(199, 154, 90, 0.45);
  border-radius: 8px;
  background: transparent;
  padding: 2px;
  cursor: pointer;
}

.ld-hint {
  text-align: center; color: var(--muted);
  font-size: 0.85rem; margin-top: 0.4rem;
  font-style: italic;
}

@media (max-width: 640px) {
  .ld-row--split { justify-content: center; }
  .ld-row--dim { flex-wrap: wrap; justify-content: center; }
}


/* =========================================================================
   19c. LIGHTING VISUALIZER — REAL PHOTO BASE
   The stage is now a photorealistic dusk home with an SVG overlay carrying
   the LEDs. (Earlier illustrated-house rules above are inert.)
   ========================================================================= */
.ld-stage { position: relative; }
.ld-photo {
  display: block; width: 100%; height: auto;
  transition: filter 1.4s ease;
}
.ld-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.ld-veil { opacity: 0.22; transition: opacity 1.4s ease; }

/* Day mode: the photo brightens toward daylight, the veil lifts,
   and the JS swaps bulbs for fascia-colored track dots. */
.is-day .ld-photo { filter: brightness(2.05) saturate(0.85) contrast(0.92); }
.is-day .ld-veil { opacity: 0; }

#ld-zones path { stroke-width: 44; }


/* =========================================================================
   19d. 3D VISUALIZER HOST
   Reserves space while the lazy-loaded WebGL bundle arrives, so the page
   never jumps. The component's own scoped styles take over once mounted.
   ========================================================================= */
.ld-3d-host {
  min-height: 660px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(199, 154, 90, 0.3);
  border-radius: var(--radius-lg, 16px);
  background: #071628;
}
.ld-3d-loading {
  color: var(--muted);
  font-family: var(--font-head);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0;
}
@media (max-width: 720px) {
  .ld-3d-host { min-height: 520px; }
}