/* LWR Outdoor Kitchens — brand layer
   The LWR Outdoor Living design system (lwroutdoorliving.com), applied on top of each page's own styles.
   Loaded last in every page's <head>. Page wording and layout live in the pages; this file only sets the look.
   Sections: 1 Tokens · 2 Base & type · 3 Buttons · 4 Header · 5 Hero · 6 Section details · 7 Cards
             8 Stats band · 9 Forms · 10 Footer · 11 Phone call bar */

/* ---------- 1. Tokens (same values as LWR Outdoor Living) ---------- */
:root {
  --lwr-black: #0E0E0F;
  --lwr-graphite: #1A1A1C;
  --lwr-graphite-2: #242427;
  --lwr-cream: #F7F3EC;
  --lwr-limestone: #EEE7DB;
  --lwr-ink: #17171A;
  --lwr-ink-soft: #4A463F;
  --lwr-on-dark: #F7F3EC;
  --lwr-on-dark-soft: #BDB6AA;
  --lwr-line-dark: rgba(247, 243, 236, 0.12);
  --lwr-line-light: rgba(23, 23, 26, 0.12);
  --lwr-copper-deep: #CB884E;
  --lwr-copper: #E39C5D;
  --lwr-copper-peach: #FBCD9A;
  --lwr-copper-pale: #FCE1B6;
  --lwr-bronze: #8A5328;
  --lwr-gradient: linear-gradient(110deg, #CB884E 0%, #E39C5D 18%, #FBCD9A 36%, #FCE1B6 50%, #FBB876 64%, #DB9252 82%, #CB884E 100%);
  --lwr-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --lwr-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lwr-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* the pages' own colour names, pointed at the LWR palette */
  --gold: var(--lwr-copper);
  --gold-dark: var(--lwr-copper-deep);
  --navy: var(--lwr-black);
  --navy-deep: #0A0A0B;
  --off-white: var(--lwr-cream);
  --dark: var(--lwr-ink);
  --muted: #6B655B;
  --border: var(--lwr-line-light);
}

/* ---------- 2. Base & type ---------- */
html body { font-family: var(--lwr-body); color: var(--lwr-ink); -webkit-font-smoothing: antialiased; }
::selection { background: var(--lwr-copper-pale); color: var(--lwr-ink); }
:focus-visible { outline: 2px solid var(--lwr-copper); outline-offset: 3px; }
body h1, body h2 { font-family: var(--lwr-display); font-weight: 500; letter-spacing: -0.005em; }
body h1 { line-height: 1.04; }
/* Cormorant titles sit tight, as on Outdoor Living (the old spacing was set for a heavier sans) */
body h2 { line-height: 1.12 !important; }
body h3 { line-height: 1.22 !important; }

/* Accent words in titles: italic bronze on light, copper gradient on dark (the Outdoor Living signature) */
body h1 em, body h2 em, body .lwr-accent { font-style: italic; font-weight: 500; color: var(--lwr-bronze); }
body h1 em.lwr-em-dark, body h2 em.lwr-em-dark, #hero h1 em {
  color: transparent; background: var(--lwr-gradient); -webkit-background-clip: text; background-clip: text; padding-right: 0.06em;
}
.copper-text { color: transparent; background: var(--lwr-gradient); -webkit-background-clip: text; background-clip: text; }

/* Eyebrow labels: small, wide-tracked Montserrat caps — bronze on light, copper on dark */
body .eyebrow, body [class$="-eyebrow"], body [class*="-eyebrow "], body .section-label, body .section-tag {
  font-family: var(--lwr-body) !important; font-style: normal !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important;
  color: var(--lwr-bronze) !important;
}
body .lwr-on-dark.eyebrow, body .lwr-on-dark[class$="-eyebrow"], body .lwr-on-dark[class*="-eyebrow "],
body .lwr-on-dark.section-label, body .lwr-on-dark.section-tag { color: var(--lwr-copper) !important; }
#cta-banner .cta-sub { color: var(--lwr-on-dark-soft); }

/* ---------- 3. Buttons ---------- */
body .btn {
  font-family: var(--lwr-body); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; line-height: 1.2;
  border-radius: 4px; border-width: 1px;
  transition: background-color .25s var(--lwr-ease), color .25s var(--lwr-ease), border-color .25s var(--lwr-ease), transform .25s var(--lwr-ease);
}
body .btn-lg { font-size: 15px; padding: 17px 30px; }
body .btn-gold, body .btn-copper { background: var(--lwr-copper); border-color: var(--lwr-copper); color: var(--lwr-black); }
body .btn-gold:hover, body .btn-copper:hover { background: var(--lwr-copper-peach); border-color: var(--lwr-copper-peach); color: var(--lwr-black); }
body .btn-navy-white, body .btn-outline-white, body .btn-white-outline, body .btn-ghost {
  background: rgba(14, 14, 15, 0.2); border-color: rgba(247, 243, 236, 0.45); color: var(--lwr-on-dark);
}
body .btn-navy-white:hover, body .btn-outline-white:hover, body .btn-white-outline:hover, body .btn-ghost:hover {
  background: rgba(14, 14, 15, 0.35); border-color: var(--lwr-copper-peach); color: var(--lwr-copper-peach);
}
body .btn-navy, body .btn-outline { border-color: var(--lwr-ink); color: var(--lwr-ink); background: transparent; }
body .btn-navy:hover, body .btn-outline:hover { background: var(--lwr-ink); color: var(--lwr-cream); }

/* ---------- 4. Header ---------- */
body #nav { padding: 0 clamp(16px, 4vw, 40px); height: 84px; }
body #nav.scrolled, body.lwr-solid-nav #nav {
  height: 76px; padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(14, 14, 15, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--lwr-line-dark);
}
body .nav-logo-img { height: 46px; width: auto; }
body .nav-links { gap: 4px; }
body .nav-links a:not(.btn) {
  font-family: var(--lwr-body); font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
  padding: 10px 11px; color: var(--lwr-on-dark) !important; opacity: 1;
}
body .nav-links a:not(.btn):hover, body .nav-links a[aria-current] { color: var(--lwr-copper-peach) !important; }
body .nav-links .nav-cta { margin-left: 12px; font-size: 13px !important; padding: 12px 20px !important; min-height: 44px; }
body .nav-burger span { background: var(--lwr-on-dark); height: 1.5px; }
body .nav-drawer { background: var(--lwr-black); align-items: flex-start; justify-content: center; padding: 0 clamp(24px, 8vw, 64px); gap: 4px; }
body .nav-drawer a:not(.btn), body .drawer-link {
  font-family: var(--lwr-display) !important; font-weight: 500 !important; font-size: 30px !important; line-height: 1.25;
  padding: 6px 0; color: var(--lwr-on-dark) !important;
}
body .nav-drawer a:not(.btn):hover { color: var(--lwr-copper-peach) !important; }
body .nav-drawer .btn { margin-top: 24px !important; align-self: stretch; }
body .nav-drawer-close { color: var(--lwr-on-dark); font-weight: 300; }
@media (max-width: 1240px) and (min-width: 1025px) {
  body .nav-links a:not(.btn) { padding: 10px 7px; font-size: 12.5px; letter-spacing: 0.04em; }
}
@media (max-width: 768px) {
  body #nav, body #nav.scrolled { height: 68px; }
  body .nav-logo-img { height: 36px; }
}

/* ---------- 5. Hero (homepage and page heroes) ---------- */
#hero .hero-overlay {
  background:
    linear-gradient(90deg, rgba(14, 14, 15, 0.86) 0%, rgba(14, 14, 15, 0.6) 40%, rgba(14, 14, 15, 0.12) 75%),
    linear-gradient(0deg, rgba(14, 14, 15, 0.9) 0%, rgba(14, 14, 15, 0) 45%),
    linear-gradient(180deg, rgba(14, 14, 15, 0.55) 0%, rgba(14, 14, 15, 0) 22%) !important;
}
#hero { align-items: flex-end; }
#hero .hero-content { padding-bottom: clamp(56px, 10vh, 110px); }
@media (max-width: 768px) { #hero .hero-btns { align-items: stretch; } #hero .hero-btns .btn { width: 100%; } }
#hero .hero-content { text-align: left; align-items: flex-start; max-width: 1240px; margin-left: auto; margin-right: auto; width: 100%; padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px); }
#hero .hero-content .eyebrow.lwr-tagline {
  font-family: var(--lwr-display) !important; font-style: italic !important; font-weight: 400 !important;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: transparent; background: var(--lwr-gradient); -webkit-background-clip: text; background-clip: text; display: inline-block;
}
#hero .hero-h1 { font-weight: 500; font-size: clamp(2.6rem, 5.6vw, 4.9rem); line-height: 1.04; max-width: none; text-align: left; }
#hero .hero-h1 em { display: block; }
#hero .hero-sub { text-align: left; margin-left: 0; max-width: 36em; color: #DCD5CA; font-size: clamp(15px, 1.4vw, 17px); }
#hero .hero-btns { justify-content: flex-start; }
.brand-line { margin: 28px 0 0; font-family: var(--lwr-body); font-size: 12px; font-weight: 500; letter-spacing: 0.34em; color: var(--lwr-copper); }
.brand-line span { margin: 0 0.4em; color: var(--lwr-on-dark-soft); }

/* inner-page heroes clear the fixed header, like Outdoor Living's page heroes */
#about-hero, #aws-hero, #br-hero, #contact-hero, #lr-hero, #ok-hero, #sr-hero { padding-top: 84px; box-sizing: border-box; }
#aws-hero, #contact-hero { height: auto !important; min-height: 500px; }
.lrh-content, .brh-content, .srh-content, .okh-content { max-width: 780px !important; }
@media (max-width: 768px) {
  #about-hero, #aws-hero, #br-hero, #contact-hero, #lr-hero, #ok-hero, #sr-hero { padding-top: 68px; }
  #aws-hero, #contact-hero { min-height: 420px; }
}

/* ---------- 6. Section details ---------- */
/* thin copper-gradient rule on top of dark feature cards, like Outdoor Living's contact card */
#trust-strip { background: var(--lwr-black) !important; border-top: 1px solid var(--lwr-line-dark); border-bottom: 1px solid var(--lwr-line-dark); }
#trust-strip .mi { font-family: var(--lwr-body); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lwr-on-dark); }
#trust-strip .md { background: var(--lwr-copper) !important; }

/* ---------- 7. Cards ---------- */
body .svc-card, body .spot-card, body .stack-card, body .flip-front, body .flip-back { border-radius: 6px; }
body .svc-card, body .stack-card { border-top-width: 2px; }
body .svc-card h3, body .spot-card h3, body .stack-card h3, body .flip-front h3,
body .cat-card-body h3, body .feature-item-text h4 { font-family: var(--lwr-display) !important; font-weight: 500 !important; letter-spacing: -0.005em; }
body .stack-num, body .step-num, body .acc-num {
  font-family: var(--lwr-display) !important;
  color: transparent !important; background: var(--lwr-gradient); -webkit-background-clip: text; background-clip: text;
}
body .flip-stars { color: var(--lwr-copper); }
body .internal-card .ic-title { font-size: 21px !important; }

/* ---------- 8. Stats bands: black with copper-gradient numbers (were solid gold bands) ---------- */
#stats, #ok-stats { background: var(--lwr-black) !important; color: var(--lwr-on-dark); border-top: 1px solid var(--lwr-line-dark); border-bottom: 1px solid var(--lwr-line-dark); }
#stats .odometer, #stats .odo-strip span, #stats .stat-suffix, #stats [class*="stat-num"], #ok-stats .stat-num {
  font-family: var(--lwr-display) !important; font-weight: 500 !important;
  color: transparent !important; background: var(--lwr-gradient); -webkit-background-clip: text; background-clip: text;
}
#stats [class*="stat-num"] *, #ok-stats .stat-num * { color: inherit !important; }
#stats .stat-label, #ok-stats .stat-label { color: var(--lwr-on-dark-soft) !important; font-family: var(--lwr-body); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
#stats .stat-item, #ok-stats .stat-item { border-color: var(--lwr-line-dark) !important; }
#fin-stats { background: var(--lwr-black) !important; border-top: 1px solid var(--lwr-line-dark); border-bottom: 1px solid var(--lwr-line-dark); }
#fin-stats .fin-stat-num, #fin-stats .fin-odometer, #fin-stats .fin-stat-num * { font-family: var(--lwr-display) !important; font-weight: 500 !important; color: var(--lwr-copper) !important; }
#fin-stats .fin-stat-sub { color: var(--lwr-on-dark-soft) !important; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.6; }

/* ---------- 9. Forms ---------- */
body input:focus, body select:focus, body textarea:focus { border-color: var(--lwr-copper) !important; box-shadow: 0 0 0 3px rgba(227, 156, 93, 0.18); outline: none; }

/* ---------- 10. Footer ---------- */
body #footer { background: var(--lwr-black); color: var(--lwr-on-dark-soft); }
#footer .footer-logo { display: inline-block; margin-bottom: 18px; }
#footer .footer-logo img { height: 52px; width: auto; }
#footer .footer-line { margin: 0 0 16px; font-family: var(--lwr-body); font-size: 11px; font-weight: 500; letter-spacing: 0.32em; color: var(--lwr-copper); }
#footer .footer-line span { margin: 0 0.35em; color: var(--lwr-on-dark-soft); }
#footer .footer-tagline { font-family: var(--lwr-display); font-style: italic; font-size: 1.2rem; line-height: 1.45; color: var(--lwr-on-dark); }
#footer .footer-family { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--lwr-copper); text-decoration: none; }
#footer .footer-family:hover { color: var(--lwr-copper-peach); }
#footer .footer-col h4 { font-family: var(--lwr-body); font-size: 11px; font-weight: 600; letter-spacing: 0.24em; color: var(--lwr-on-dark); }
#footer .footer-col a { color: var(--lwr-on-dark-soft); }
#footer .footer-col a:hover { color: var(--lwr-copper-peach); }
#footer .footer-areas, #footer .footer-bottom { border-color: var(--lwr-line-dark) !important; }
#footer .footer-bottom a:hover { color: var(--lwr-copper-peach); }