:root{
  --bg:#FFFFFF;
  --bg2:#111418;
  --card:#ffffff;
  --text:#111827;
  --muted:#475569;
  --green:#2C9D68;
  --copper:#AD6C3E;
  --line:#e2e8f0;
  --shadow: 0 10px 30px rgba(2,6,23,.12);
  --radius: 18px;
  --max: 1120px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.tm{
  font-size:.55em;
  vertical-align:super;
  margin-left:.12em;
}

/* Sticky header (all devices) */
.header{
  position: sticky;
  top: 0;
  z-index: 1000;
}
@supports not (position: sticky){
  .header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  body{ padding-top: 96px; }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color: #195526;line-height:1.0}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.95em}

.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.srOnly{position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.badge{display:inline-flex; align-items:center; gap:8px; background:rgba(44,157,104,.12); color:var(--green); border:1px solid rgba(44,157,104,.35); padding:6px 10px; border-radius:999px; font-weight:650; font-size:.92rem}
.muted{color:var(--muted)}
.dot{opacity:.6; margin:0 6px}

.header{padding:6px 0; background:#ffffff; border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.5px}
.logoMark{width:14px; height:14px; border-radius:4px; background:linear-gradient(135deg,var(--green),var(--copper))}
.logoText{font-size:1rem}
.siteLogo{height:72px; width:auto; display:block}
.navMenu{padding: 0; display:flex; align-items:center; gap:10px}
.navCall{display:none !important}

.navEmail{display:none !important}
.header .navMenu a{opacity:.92; font-family:"Arial Narrow","Roboto Condensed","Segoe UI",var(--font); text-transform:uppercase; letter-spacing:.08em; font-weight:600}
.navMenu a:hover{opacity:1}
.navToggle{display:none; border:1px solid rgba(255,255,255,.25); background:rgba(17,24,39,.04); color:rgba(246,248,250,.92); border-radius:12px; padding:10px 12px}
.burger{display:inline-block; width:18px; height:2px; background:var(--text); position:relative;}
.burger:before,.burger:after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--text)}
.burger:before{top:-6px}
.burger:after{top:6px}

.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:14px; font-weight:750; border:1px solid transparent; background:linear-gradient(135deg,var(--green),#2bb17b); color:#06110b; box-shadow: 0 10px 22px rgba(44,157,104,.40);}

/* Hero-only Copper Plate Buttons (engraved black) */
.btnHero{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:12px 18px;
  border-radius:22px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5a2c12;
  background:
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 100%),
    radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 55%),
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.10) 0px,
      rgba(255,255,255,0) 2px,
      rgba(0,0,0,.06) 4px
    ),
    linear-gradient(180deg,#E2A26D 0%, #C57C47 38%, #B56A38 62%, #D18B57 100%);
  border:2px solid rgba(100,55,28,.35);
  box-shadow:
    0  6px 12px rgba(44,157,104,.40),
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -10px 18px rgba(0,0,0,.20);
  text-shadow:
    0 1px 0 rgba(255,255,255,.28),
    0 -1px 0 rgba(0,0,0,.55),
    0 2px 3px rgba(0,0,0,.18);
  transition: transform 160ms ease, filter 200ms ease, box-shadow 200ms ease;
  filter: brightness(1.3);
  font-size: 15px;
}
.btnHero:hover{
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow:
    0 18px 34px rgba(44,157,104,.14),
    inset 0 2px 0 rgba(255,255,255,.40),
    inset 0 -10px 18px rgba(0,0,0,.22);
}
.btnHero:active{
  transform: translateY(0);
  filter: brightness(1.05);
}

.header .btn,.header .btn2{font-family:"Arial Narrow","Roboto Condensed","Segoe UI",var(--font); text-transform:uppercase; letter-spacing:.08em}

.btn:hover{filter:brightness(1.55)}
.btnOutline{background:transparent; color:var(--copper); border-color: var(--copper)}
.btnOutline:hover{background:rgba(44,157,104,.08)}
.btnGhost{background:rgba(17,24,39,.04); color:var(--text); border-color:rgba(2,6,23,.10); box-shadow:none}
.btnGhost:hover{background:rgba(17,24,39,.06)}
.btnSmall{padding:10px 12px; border-radius:12px; font-size:.95rem}

.hero{padding:28px 0 10px}
.heroGrid{display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:center}
.heroCopy h1{font-size: clamp(2rem, 3vw, 3rem); line-height:1.1; margin:0 0 12px; text-shadow: 0 4px 8px rgba(0,0,0,.35);}
.lead{font-size:1.12rem; color:var(--muted); margin:0 0 18px}
.ctaRow{display:flex; gap:10px; flex-wrap:wrap}
/* Hero cross-fade slider (no libraries) */
.heroSlider{
  position:relative;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid rgba(2,6,23,.08);
  overflow:hidden;
  background: rgba(0,0,0,.03);
  aspect-ratio: 16 / 10;
}

/* Background layer: same active slide, blurred + faded */
.heroBg{
  position:absolute;
  inset:-24px;
  background-size: cover;
  background-position: center;
  filter: blur(26px);
  transform: scale(1.1);
  opacity:0;
  transition: opacity 1900ms linear;
  z-index:1;
}
.heroBg.isActive{opacity:.55}
.heroSlide{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  opacity:0;
  transition: opacity 1900ms linear;
}
.heroSlide.isActive{opacity:1}
.heroNav{
  position:absolute;
  top:0;
  bottom:0;
  width:22%;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  opacity:0;
  z-index:5;
}
.heroPrev{left:0}
.heroNext{right:0}
.heroNav:focus-visible{
  opacity:.06; /* subtle focus indicator */
}

@media (orientation: portrait){  
  .heroSingleSlider{  
    aspect-ratio: 3 / 4;  /* taller */  
  }  
}  
  
.heroOverlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:18px;
  padding-bottom: 14%; /* try 10%–18% */
  z-index:3;
  pointer-events:none;
}
.heroOverlay::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.62));
  z-index:-1;
}
.heroOverlay h1{
  margin:0;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#f6f8fa;
  text-shadow: 0 4px 8px rgba(0,0,0,.35);
}
.heroSub,.heroLine{margin:0; color: rgba(246,248,250,.92)}
.heroLine{color: rgba(246,248,250,.90)}
.heroPrimary{width:fit-content}

@media@media (max-width: 480px){
  .heroOverlay{padding:14px}
}

@media (prefers-reduced-motion: reduce){
  .heroSlide{transition:none}
}

.heroMedia img{border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid rgba(2,6,23,.08)}
.note{margin-top:10px; font-size:.95rem; color:var(--muted)}
.heroMeta{display:grid; gap:10px; margin-top:18px}
.metaItem{display:flex; gap:10px; align-items:flex-start; color:var(--muted)}
.metaItem strong{color:var(--text)}
.icon{display:inline-flex; width:22px; height:22px; color:var(--green)}
.icon svg{width:22px; height:22px}
.quickLinks{margin-top:14px; color:var(--muted)}
.quickLinks a{color:var(--text); opacity:.92}
.quickLinks a:hover{opacity:1}

.section{padding:24px 0}
.sectionHead{margin-bottom:18px}
.sectionHead h2{margin:0 0 8px; font-size:1.7rem}

.cards3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{margin:10px 0 8px}
.cardIcon{width:34px; height:34px; color:var(--copper)}
.cardIcon svg{width:34px; height:34px}
.textLink{display:inline-block; margin-top:10px; color:var(--copper)}
.textLink:hover{text-decoration:underline}

.checklist{padding-left:18px; color:var(--muted)}
.checklist li{margin:8px 0}
.gallery{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px}
.galleryCard{margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.galleryCard figcaption{padding:6px 6px; color:var(--muted)}


.pageHero{padding:34px 0 10px}
.pageHero h1{margin:0 0 8px; font-size:2.2rem}
.twoCol{display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:center; margin-top:22px}
.rounded{border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow)}
.bullets{padding-left:18px; color:var(--muted)}
.bullets li{margin:8px 0}


.contactGrid{display:grid; grid-template-columns: 1fr; gap:16px; align-items:start}
.contactCard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.form{display:grid; gap:12px; margin-top:12px}
.form label{display:grid; gap:8px; color:var(--muted); font-weight:650}
input, select, textarea{
  padding:12px 12px; border-radius:14px; border:1px solid var(--line);
  background:#fff; color:var(--text); outline:none;
}
input:focus, select:focus, textarea:focus{border-color: rgba(44,157,104,.7)}
.formRow{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.fineprint{margin:0; color:var(--muted); font-size:.95rem}

.footer{margin-top:40px; padding:34px 0 18px; background:#195526; color:rgba(255,255,255,.92);}
.footer a{color:rgba(255,255,255,.92);}
.footerGrid{display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:16px}
.footerBrand{font-weight:900; letter-spacing:.6px; display:flex; align-items:center; gap:12px}
.footerLogo{width:40px; height:40px; object-fit:contain; flex:0 0 auto}
.footerBrandText{display:inline-block}
.footerTitle{font-weight:850; margin-bottom:10px}
.footerLinks{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footerLinks a{opacity:.9}
.footerLinks a:hover{opacity:1; text-decoration:underline}
.footerCtas{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
.footerBottom{margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.25); display:flex; justify-content:center; flex-wrap:wrap; text-align:center;}

@media (max-width: 480px){
.heroGrid{grid-template-columns:1fr}
  .cards3{grid-template-columns:1fr}
  .gallery{grid-template-columns: 1fr 1fr}
  .twoCol{grid-template-columns:1fr}
  .miniGrid{grid-template-columns:1fr}
  .contactGrid{grid-template-columns:1fr}
  .footerGrid{grid-template-columns:1fr}
  .navToggle{display:inline-flex}
  .navMenu{
    display:none; position:absolute; right:18px; top:50px; 
    background:#d8efd8; border:1px solid var(--line);
    border-radius:16px; padding:12px; flex-direction:column; align-items:stretch; min-width:200px;
    box-shadow:var(--shadow)
  }
  .navMenu.show{display:flex}
  .header .container{position:relative}
}

@media (min-width: 481px) and (max-width: 980px){
.heroGrid{grid-template-columns:1fr}
  .cards3{grid-template-columns:1fr}
  .gallery{grid-template-columns: 1fr 1fr}
  .twoCol{grid-template-columns:1fr}
  .miniGrid{grid-template-columns:1fr}
  .contactGrid{grid-template-columns:1fr}
  .footerGrid{grid-template-columns:1fr}
  .navToggle{display:inline-flex}
  .navMenu{
    display:none; position:absolute; right:18px; top:80px; 
    background:#ffffff; border:1px solid var(--line);
    border-radius:16px; padding:12px; flex-direction:column; align-items:stretch; min-width:220px;
    box-shadow:var(--shadow)
  }
  .navMenu.show{display:flex}
  .header .container{position:relative}

  .navCall{display:inline-flex !important; margin-left:auto; }
  .navToggle{ margin-left:6px; }

  .navEmail{display:inline-flex !important; margin-left:auto; }
  .navCall{margin-left:6px;}

  .navEmail, .navCall{ font-size:14px; font-weight:900; color: var(--copper); }

  .header .navMenu a.btnOutline,
  .header .navMenu a.btnOutline2{
    padding: 6px 6px !important;
  }

  .header .navMenu a.btnOutline:hover, .header .navMenu a.btnOutline2:hover{ background: rgba(44,157,104,.08) !important; }

  .nav{ gap: 0 !important; }

  .btnSmall{padding: 6px 6px;border-radius:12px}

  .header .btn, .header .btn2{ box-shadow: 0 10px 22px rgba(44,157,104,.40); }
}

/* Tablet ONLY (481–980px) */
@media (min-width: 481px) and (max-width: 980px){
  .header{ padding-left: 12px; padding-right: 12px; }
  .header .logo img, .header .logo .siteLogo{ height: 72px; }
  .navToggle{ width: 38px; height: 30px; }
  .navMenu{ right: 12px; left: auto; min-width: 260px; }
  .navMenu a{ font-size: 14px; }
}

/* Mobile ONLY (0–480px) */
@media (max-width: 480px){
  .header{ padding-left: 8px; padding-right: 8px; }
  .header .logo img, .header .logo .siteLogo{ height: 44px; }
  .navToggle{ width: 44px; height: 44px; }
  .navMenu{ right: 8px; }
 .navMenu a{ font-size: 13px;  }
}

/* Desktop ONLY (>=981px) */
@media (min-width: 981px){
  /* Hero single-slider overlay (desktop only) */
  .heroSingle{padding:22px 0 10px}
  .heroSingleSlider{
    aspect-ratio: 16 / 7;
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .navToggle{ display:none !important; }
  .navMenu{ display:flex !important; position:static !important; box-shadow:none !important; background:transparent !important; padding:0 !important; gap:14px !important; align-items:center !important; }
  .navMenu a{ font-size:14px !important; padding:12px 0 !important; background:transparent !important; color: var(--copper) !important; font-weight:900 !important; }
  .header .logo img, .header .logo .siteLogo{ height: 96px !important; }

  .header .btn, .header .btn2{ box-shadow: 0 10px 22px rgba(44,157,104,.40); }

  .header .navMenu a.btnOutline:hover, .header .navMenu a.btnOutline2:hover{ background: rgba(44,157,104,.08) !important; }

  .header .navMenu a.btnOutline,
  .header .navMenu a.btnOutline2{
    padding: 6px 6px !important;
  }

  .navCall{display:none !important;}

  .navEmail{display:none !important;}
  .navTextUs{display:none !important;}
}

.footer .muted{color:rgba(255,255,255,.78);}
/* Header burger button: match btnOutline shape (scoped, does not affect .btn/.btnOutline) */
.header .navToggle{
  border:1px solid var(--copper);
  background:transparent;
  border-radius:12px;
  padding:6px 6px;
  box-shadow: 0 10px 22px rgba(44,157,104,.40);!important;
}
.header .navToggle:hover{filter:brightness(1.55);}
.header .burger,
.header .burger:before,
.header .burger:after{
  background: var(--copper);
}

.header .navToggle{
  display:flex;
  align-items:center;
  justify-content:center;
}
.header .burger{
  display:block;
  margin:0 auto;
}

/* Desktop nav links (Services–About): brighten on hover (text only, not buttons) */
@media (min-width: 981px){
  .header .navMenu a:not(.btn):not(.btn2):hover{
    filter: brightness(1.55);
  }
}

/* Logo brighter on hover */
.header .logo:hover img,
.header .logo:hover .siteLogo{
  filter: brightness(1.3);
}
.header .logo img,
.header .logo .siteLogo{
  filter: brightness(1);
  transition: filter 200ms ease;
}

/* Burger menu (open) – match header background + desktop nav styling */
@media (max-width: 980px){
  .navMenu{
    background:#ffffff;
  }
  .navMenu a:not(.btn):not(.btn2){
    color: var(--copper);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: "Arial Narrow","Roboto Condensed","Segoe UI",var(--font);
  }
  .navMenu a:not(.btn):not(.btn2):hover{
    filter: brightness(1.55);
  }
}
.btnOutline:hover{filter:brightness(1.55)}
@media (max-width: 980px){
}
@media (max-width: 980px){
  .heroGrid{grid-template-columns:1fr; }

.heroCopy .ctaRow a.btnHero{
  background-blend-mode: screen, normal, normal;
}

.heroCopy .btnHero{ line-height: .1; }

/* Force hero headline shadow */
.heroCopy h1{ text-shadow: 0 4px 8px rgba(0,0,0,.35); }

.heroTiles .tileOverlay{ padding: 14px; }
}

/* Hero background layer (fills container) */
.heroBg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition: opacity 1900ms linear;
  transform: scale(1.08);
  filter: blur(8px);
  z-index:1;
}
.heroBg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.10);
}
.heroBg.isActive{opacity:.75}

/* Foreground slide stays above bg */
.heroSlide{ z-index:2 }

.heroOverlay a{pointer-events:auto}

/* Footer refined typography */
footer, .footer {
  font-family: var(--font);           /* or whatever your header uses */
  font-weight: 400;                   /* slightly stronger than body */
  font-size:12px;   
      letter-spacing: 0.05em;              /* subtle refinement */
}
footer .footerBrand {
  font-weight: 900;                   /* brand pops */
  letter-spacing: 0.2em;
  text-transform: uppercase;          /* optional */
}
footer .footerMeta, footer .footerBottom {
  font-size: 12px;
  opacity: 0.92;                      /* softer on dark green */
}


/* Burger dropdown slide-down effect (mobile/tablet) */
@media (max-width: 979px){
  /* CLOSED state (default) */
  .navMenu{
    display: flex ;          /* override display:none */
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
      max-height 760ms ease,
      opacity 480ms ease,
      transform 760ms ease;
  }
  /* OPEN state (when JS adds .show) */
  .navMenu.show{
    max-height: 240px;                 /* set high enough for your menu */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}


/* Services page: small icons next to section titles */
.serviceTitle{display:flex; align-items:center; gap:10px}
/* Match homepage card icon size */
.serviceTitle .hIcon{display:inline-flex; width:34px; height:34px; color:var(--copper); flex:0 0 auto}
.serviceTitle .hIcon svg{width:34px; height:34px}
.galleryCard figcaption{ font-size: 14px; }


/* Contact page quick info */
.contactHeroGrid{display:grid; grid-template-columns: 1fr auto; gap:18px; align-items:start}
.contactHeroLeft .ctaRow{margin-top:10px}
/* 50% bigger than the prior 12px quick info */
.contactQuick{max-width:340px; font-size:14px; line-height:1.35; letter-spacing:0.05em}
.contactQuickTitle{font-weight:900; letter-spacing:0.2em; text-transform:uppercase; margin-bottom:8px}
.contactQuick a{color:inherit; text-decoration:none}
.contactQuick a:hover{text-decoration:underline}
@media (max-width: 800px){
  .contactHeroGrid{grid-template-columns:1fr}
  .contactQuick{max-width:none}
}

/* Contact form anchor offset for fixed header */
#quote{scroll-margin-top: 90px;}
.contactCard h2{margin:0 0 10px;}

/* Anchor offset for fixed header (desktop + mobile) */
#quote, #contactForm, #requestQuote {
  scroll-margin-top: 136px; /* desktop header offset */
}

@media (max-width: 979px){
  #quote, #contactForm, #requestQuote {
    scroll-margin-top: 110px; /* mobile header offset */
  }
}