/* style.css — Valley Mount AV design system + components */
/* Art direction: home theater = dark premium cinema hero + warm desert-amber accent.
   Body sections stay light/cream for trust + readability + conversion. */

:root,[data-theme='light']{
  /* Surfaces — warm cream */
  --color-bg:#f6f4f0;
  --color-surface:#fbfaf7;
  --color-surface-2:#ffffff;
  --color-surface-offset:#efebE4;
  --color-divider:#e3ddd3;
  --color-border:#d9d2c6;

  /* Text */
  --color-text:#211f1a;
  --color-text-muted:#6f6a5f;
  --color-text-faint:#a8a296;

  /* Accent — desert amber / cinema gold */
  --color-primary:#c9761a;
  --color-primary-hover:#a85f10;
  --color-primary-active:#874d0c;
  --color-primary-soft:#f4e4d2;
  --color-accent-ink:#0e0c08;

  /* Hero ink */
  --color-hero-bg:#0c0b09;
  --color-hero-text:#f4f1ea;

  --radius-sm:.375rem;--radius-md:.625rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-full:9999px;
  --transition-interactive:180ms cubic-bezier(0.16,1,0.3,1);
  --shadow-sm:0 1px 2px rgba(33,31,26,.06);
  --shadow-md:0 6px 18px rgba(33,31,26,.08);
  --shadow-lg:0 18px 40px rgba(33,31,26,.14);
  --content-narrow:680px;--content-default:1080px;--content-wide:1200px;

  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

[data-theme='dark']{
  --color-bg:#14130f;
  --color-surface:#1b1a16;
  --color-surface-2:#211f1a;
  --color-surface-offset:#1d1b16;
  --color-divider:#2a2720;
  --color-border:#363229;
  --color-text:#e7e2d8;
  --color-text-muted:#968f81;
  --color-text-faint:#6a655b;
  --color-primary:#e89a3c;
  --color-primary-hover:#f5b05c;
  --color-primary-active:#c97f22;
  --color-primary-soft:#2a2016;
  --color-accent-ink:#0e0c08;
  --color-hero-bg:#070605;
  --color-hero-text:#f4f1ea;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 18px rgba(0,0,0,.4);
  --shadow-lg:0 18px 40px rgba(0,0,0,.5);
}

/* Type scale */
:root{
  --text-xs:clamp(.75rem,.7rem+.25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem+.35vw,1rem);
  --text-base:clamp(1rem,.95rem+.25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem+.75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem+1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.3rem+2.6vw,3.5rem);
}
/* Spacing */
:root{
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --space-20:5rem;--space-24:6rem;--space-32:8rem;
}

html{scroll-padding-top:84px}
body{background:var(--color-bg)}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em}

.container{width:100%;max-width:var(--content-default);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.container--narrow{max-width:var(--content-narrow)}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--color-bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}
.header__inner{display:flex;align-items:center;gap:var(--space-4);min-height:64px}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--color-accent-ink);font-family:var(--font-display);font-weight:700;font-size:1.0625rem;text-decoration:none}
[data-theme='dark'] .brand{color:var(--color-hero-text)}
.brand__mark{color:var(--color-primary)}
.brand__text-accent{color:var(--color-primary)}
.nav{display:none;gap:var(--space-6);margin-inline-start:auto}
.nav a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;font-weight:500}
.nav a:hover{color:var(--color-primary)}
.header__actions{display:flex;align-items:center;gap:.625rem;margin-inline-start:auto}
.phone{display:none;align-items:center;gap:.4rem;font-size:var(--text-sm);font-weight:600;color:var(--color-accent-ink);text-decoration:none}
[data-theme='dark'] .phone{color:var(--color-hero-text)}
.phone:hover{color:var(--color-primary)}
.phone svg{color:var(--color-primary)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);padding:.7rem 1.1rem;border-radius:var(--radius-full);text-decoration:none;white-space:nowrap;line-height:1}
.btn--lg{padding:.95rem 1.6rem;font-size:var(--text-base)}
.btn--primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent;color:var(--color-text);border:1.5px solid var(--color-border)}
.btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn--block{width:100%}
[data-theme='light'] .hero .btn--ghost,[data-theme='dark'] .hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
[data-theme='light'] .hero .btn--ghost:hover,[data-theme='dark'] .hero .btn--ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}

.theme-toggle{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-full);color:var(--color-text-muted);border:1px solid var(--color-border)}
.theme-toggle:hover{color:var(--color-primary);border-color:var(--color-primary)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--color-hero-bg);color:var(--color-hero-text);overflow:hidden;padding-block:clamp(3.5rem,9vw,7rem)}
.hero__glow{position:absolute;inset:0;background:
  radial-gradient(60% 80% at 78% 18%,rgba(201,118,26,.55),transparent 60%),
  radial-gradient(50% 70% at 12% 90%,rgba(201,118,26,.18),transparent 65%);
  pointer-events:none}
.hero__inner{position:relative;max-width:780px}
.hero__eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:1rem}
.hero__title{font-size:var(--text-2xl);font-weight:700;line-height:1.05;max-width:18ch}
.hero__title .accent{color:var(--color-primary)}
.hero__sub{margin-top:1.25rem;font-size:var(--text-lg);color:rgba(244,241,234,.82);max-width:52ch}
.hero__cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero__badges{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem 1.75rem;list-style:none;padding:0}
.hero__badges li{position:relative;font-size:var(--text-sm);color:rgba(244,241,234,.78);padding-left:1.5rem}
.hero__badges li::before{content:"✓";position:absolute;left:0;color:var(--color-primary);font-weight:700}

/* ---------- Trust bar ---------- */
.trustbar{background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.trustbar__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;padding-block:1.75rem}
.trustbar__item{display:flex;flex-direction:column}
.trustbar__item strong{font-family:var(--font-display);font-size:1.5rem;color:var(--color-primary);line-height:1}
.trustbar__item span{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:.25rem}

/* ---------- Sections ---------- */
.section{padding-block:clamp(2.5rem,7vw,5rem)}
.section--alt{background:var(--color-surface)}
.section__head{max-width:680px;margin-bottom:2.5rem}
.section__eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:.6rem}
.section__title{font-size:var(--text-xl);font-weight:700;line-height:1.1}
.section__lead{margin-top:.9rem;color:var(--color-text-muted);font-size:var(--text-base)}

/* ---------- Services grid ---------- */
.services-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.5rem}
.card__icon{font-size:1.75rem;line-height:1;margin-bottom:.85rem}
.card__title{font-size:var(--text-lg);margin-bottom:.5rem}
.card__text{color:var(--color-text-muted);font-size:var(--text-sm);max-width:none}
.card--highlight{grid-column:1/-1;border-color:var(--color-primary);display:flex;align-items:center;gap:1.25rem}
.card--highlight .card__icon{margin-bottom:0;font-size:2rem}
.card--highlight .card__title{margin-bottom:.25rem}
@media(max-width:559px){.card--highlight{flex-direction:column;align-items:flex-start;gap:.5rem}}

/* ---------- Two column ---------- */
.two-col{display:grid;gap:2.5rem;align-items:start}
.two-col--cta{gap:3rem;align-items:center}
.checklist{list-style:none;padding:0;margin-top:1.5rem;display:grid;gap:.75rem}
.checklist li{padding-left:1.75rem;position:relative;color:var(--color-text);max-width:none}
.checklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--color-primary);font-weight:700}
.checklist--compact{margin-top:1rem;gap:.5rem}
.checklist--compact li{font-size:var(--text-sm);color:var(--color-text-muted)}

.quote-card{background:var(--color-accent-ink);color:var(--color-hero-text);border-radius:var(--radius-xl);padding:2rem;box-shadow:var(--shadow-lg)}
.quote-card__text{font-size:var(--text-lg);font-family:var(--font-display);line-height:1.4}
.quote-card__attr{margin-top:1.25rem;font-size:var(--text-sm);color:rgba(244,241,234,.7)}
.quote-card__stars{margin-top:.5rem;color:var(--color-primary);letter-spacing:.15em}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:stretch}
.price-card{position:relative;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.75rem;display:flex;flex-direction:column}
.price-card--featured{border-color:var(--color-primary);box-shadow:var(--shadow-md)}
.price-card__badge{position:absolute;top:-.75rem;left:1.75rem;background:var(--color-primary);color:#fff;font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .75rem;border-radius:var(--radius-full)}
.price-card__name{font-size:var(--text-lg);margin-bottom:.5rem}
.price-card__price{font-family:var(--font-display);font-size:2.25rem;font-weight:700;color:var(--color-text);line-height:1}
.price-card__unit{font-size:1rem;color:var(--color-text-muted);font-weight:500}
.price-card__list{list-style:none;padding:0;margin:1.25rem 0;display:grid;gap:.6rem}
.price-card__list li{padding-left:1.5rem;position:relative;font-size:var(--text-sm);color:var(--color-text-muted);max-width:none}
.price-card__list li::before{content:"✓";position:absolute;left:0;color:var(--color-primary)}
.price-card .btn{margin-top:auto}
.pricing-note{margin-top:1.5rem;font-size:var(--text-sm);color:var(--color-text-faint)}

/* ---------- Mount add-on ---------- */
.mount-addon{display:flex;gap:1.25rem;align-items:flex-start;margin-top:2rem;padding:1.5rem 1.75rem;background:var(--color-surface-2);border:1px solid var(--color-primary);border-radius:var(--radius-lg)}
.mount-addon__icon{font-size:2rem;line-height:1;flex-shrink:0}
.mount-addon__title{font-size:var(--text-lg);margin-bottom:.4rem}
.mount-addon__text{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:1rem;max-width:none}
.mount-addon__list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.mount-addon__list li{font-size:var(--text-sm);color:var(--color-text-muted);padding-left:0}
.mount-addon__price{color:var(--color-primary);font-weight:600}
@media(max-width:559px){.mount-addon{flex-direction:column;gap:.75rem}}

/* ---------- Areas ---------- */
.areas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;list-style:none;padding:0}
.areas-grid li{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.7rem 1rem;text-align:center;font-size:var(--text-sm);font-weight:500}
.areas-note{margin-top:1.5rem;font-size:var(--text-sm);color:var(--color-text-muted)}
.areas-note a{color:var(--color-primary);font-weight:600}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.6rem}
.faq__item{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.25rem 1.1rem}
.faq__item summary{cursor:pointer;padding:.85rem 0;font-weight:600;font-family:var(--font-display);font-size:var(--text-base);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";color:var(--color-primary);font-size:1.25rem;font-weight:700}
.faq__item[open] summary::after{content:"–"}
.faq__item p{padding-bottom:1rem;color:var(--color-text-muted);font-size:var(--text-sm);max-width:none}

/* ---------- Quote / lead form ---------- */
.quote-section{background:var(--color-surface)}
.quote-section__pitch .section__title{color:var(--color-text)}
.quote-section__pitch a{color:var(--color-primary);font-weight:600}

.lead-form{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--shadow-md);display:grid;gap:1rem}
.lead-form__row{display:grid;grid-template-columns:1fr;gap:1rem}
.field{display:grid;gap:.4rem}
.field__label{font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;color:var(--color-text-muted);text-transform:uppercase}
.field input,.field select,.field textarea{width:100%;padding:.8rem .9rem;border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:var(--text-base)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}
.field textarea{resize:vertical}
.lead-form__fineprint{font-size:var(--text-xs);color:var(--color-text-faint);text-align:center}
.lead-form__success{background:var(--color-primary-soft);color:var(--color-primary-active);border:1px solid var(--color-primary);padding:1rem;border-radius:var(--radius-md);font-weight:600;text-align:center}

/* ---------- Footer ---------- */
.footer{background:var(--color-accent-ink);color:rgba(244,241,234,.85);padding-block:3rem 1.5rem}
.footer__inner{display:grid;gap:1.5rem}
.footer__brand{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:700;color:#fff}
.footer__brand .brand__mark{color:var(--color-primary)}
.footer__nap p{font-size:var(--text-sm);color:rgba(244,241,234,.7)}
.footer__nap a{color:var(--color-primary);text-decoration:none}
.footer__nav{display:flex;flex-wrap:wrap;gap:1rem}
.footer__nav a{font-size:var(--text-sm);color:rgba(244,241,234,.7);text-decoration:none}
.footer__nav a:hover{color:var(--color-primary)}
.footer__legal{margin-top:2rem;text-align:center;font-size:var(--text-xs);color:rgba(244,241,234,.4)}

/* ---------- Responsive ---------- */
@media(min-width:560px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .areas-grid{grid-template-columns:repeat(3,1fr)}
  .lead-form__row{grid-template-columns:1fr 1fr}
}
@media(min-width:820px){
  .nav{display:flex}
  .phone{display:inline-flex}
  .services-grid{grid-template-columns:repeat(3,1fr)}
  .price-grid{grid-template-columns:repeat(3,1fr)}
  .areas-grid{grid-template-columns:repeat(5,1fr)}
  .two-col{grid-template-columns:1.1fr .9fr}
  .two-col--cta{grid-template-columns:1fr 1fr}
  .footer__inner{grid-template-columns:1.2fr 1.5fr 1fr;align-items:start}
}
@media(min-width:1100px){
  .price-grid--four{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:820px){
  .header__inner{min-height:72px}
}