:root {
  --primary: #ff751f;
  --bg: #0b0b0d;
  --panel: #16161a;
  --text: #f7f7fb;
  --muted: #b9bcc6;
  --line: rgba(255,255,255,.08);
  --shadow: 0 14px 40px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 28px;
  --max: 1160px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
color: var(--text);
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(11,11,13,.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
}

.mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,117,31,1), rgba(255,117,31,.4)),
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.25), transparent 55%);
  box-shadow: 0 18px 40px rgba(255,117,31,.18);
  border: 1px solid rgba(255,255,255,.12);
}

.brand-text { display: grid; }
.brand-name {
  font-weight: 800;
  letter-spacing: .2px;
}
.brand-tag {
  font-size: 12px;
  color: var(--muted);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-links a { font-weight: 550; color: rgba(247,247,251,.92); }
.nav-links a.btn { text-decoration: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  gap: 10px;
  font-weight: 650;
  letter-spacing: .1px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0px); }

.btn-primary {
  background: linear-gradient(135deg, rgba(255,117,31,1), rgba(255,117,31,.7));
  border-color: rgba(255,117,31,.7);
  color: #111;
}
.btn-ghost {
  background: rgba(255,255,255,.06);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(247,247,251,.92);
  margin: 4px 0;
  border-radius: 2px;
}

.hero {
  padding: 64px 0 18px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items: stretch;
}

.hero-card {
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
  background:
    radial-gradient(800px 420px at 20% 15%, rgba(255,117,31,.22), transparent 60%),
    rgba(255,255,255,.03);
}

.hero-media {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,13,.1), rgba(11,11,13,.95)),
    url("/assets/hero.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
}

.hero-content {
  position: relative;
  padding: 44px 40px 40px;
}
.kicker {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: rgba(247,247,251,.92);
  font-weight: 650;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.kicker .dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 6px rgba(255,117,31,.18);
}
h1 {
  margin: 14px 0 10px;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -.02em;
}
.lead {
  margin: 0 0 18px;
  color: rgba(247,247,251,.88);
  font-size: 16px;
  max-width: 54ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
}

.hero-side {
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 28px;
  display: grid;
  gap: 16px;
}
.side-title {
  font-weight: 800;
  font-size: 18px;
}
.side-list {
  display: grid;
  gap: 10px;
}
.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.check svg { flex: 0 0 auto; margin-top: 3px; }
.small { font-size: 13px; }
.muted { color: var(--muted); }

.section {
  padding: 52px 0;
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.section h2 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -.02em;
}
.section p.sub {
  margin: 8px 0 0;
  color: rgba(247,247,251,.82);
  max-width: 70ch;
}
.grid {
  display: grid;
  gap: 14px;
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  padding: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.card h3 {
  margin: 10px 0 6px;
  font-size: 18px;
}
.card p { margin: 0; color: rgba(247,247,251,.82); }
.icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,117,31,.12);
  border: 1px solid rgba(255,117,31,.26);
  display: grid;
  place-items: center;
}
.icon svg { opacity: .95; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.media {
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(11,11,13,.2), rgba(11,11,13,.9)),
    url("/assets/feature.jpg");
  background-size: cover;
  background-position: center;
  min-height: 360px;
  box-shadow: var(--shadow);
}
.steps {
  display: grid;
  gap: 12px;
}
.step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(0,0,0,.22);
}
.step .num {
  width: 42px; height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,117,31,.16);
  border: 1px solid rgba(255,117,31,.30);
  font-weight: 800;
}


.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.gimg {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: 0 12px 28px rgba(0,0,0,.26);
  position: relative;
}

.gvid .recent-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

.gimg::before { content: none; }
.gimg span { display: none; }
/* Recent Work (Homepage) - real installs */
.g1 { background-image: url("/assets/recent/backyard-lawn-1.jpg"); background-size: cover; background-position: center; }
.g2 { background-image: url("/assets/recent/deck-build-1.jpg"); background-size: cover; background-position: center; }
.g3 { background-image: url("/assets/recent/deck-stain-1.jpg"); background-size: cover; background-position: center; }
.g4 { background-image: url("/assets/recent/front-lawn-1.jpg"); background-size: cover; background-position: center; }
.g5 {
  background-image: none;
  display: block;
}

.quote {
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: radial-gradient(800px 500px at 20% 10%, rgba(255,117,31,.16), transparent 55%),
              rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 28px;
}
form {
  display: grid;
  gap: 12px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: rgba(247,247,251,.86);
}
input, select, textarea {
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline: none;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: rgba(255,117,31,.6);
  box-shadow: 0 0 0 4px rgba(255,117,31,.15);
}

/* Quote form: service category tabs */
.service-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0 12px;
}
.service-tab{
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:rgba(247,247,251,.92);
  padding:10px 12px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.service-tab:hover{ transform:translateY(-1px); }
.service-tab.is-active{
  background:rgba(255,117,31,.20);
  border-color:rgba(255,117,31,.55);
  box-shadow:0 0 0 3px rgba(255,117,31,.12);
}
.service-tab:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.18), 0 0 0 6px rgba(255,117,31,.16);
}

.banner {
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,117,31,.18), rgba(255,255,255,.03));
  padding: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 34px 0 22px;
  margin-top: 40px;
  background: rgba(0,0,0,.16);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 18px;
}
.footer-brand {
  display: flex;
  gap: 12px;
  align-items: center;
}
.footer-title { font-weight: 850; }
.footer-sub { color: var(--muted); font-size: 13px; }
.footer-head { font-weight: 800; margin-bottom: 10px; }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-list a { color: rgba(247,247,251,.88); }
.footer-bottom {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.page-hero {
  padding: 46px 0 0;
}
.page-hero .wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 30px;
}
.breadcrumbs {
  font-size: 13px;
  color: var(--muted);
}
.page-hero h1 {
  margin: 10px 0 6px;
  font-size: clamp(30px, 4vw, 46px);
}
.page-hero p {
  margin: 0;
  color: rgba(247,247,251,.84);
  max-width: 70ch;
}

@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(6, 1fr); }
  .g1 { background-image: url("/assets/recent/backyard-lawn-1.jpg"); background-size: cover; background-position: center; }
  .g2 { background-image: url("/assets/recent/deck-build-1.jpg"); background-size: cover; background-position: center; }
  .g3,.g4,.g5 { grid-column: span 6; }
}

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: 66px;
    right: 20px;
    left: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(11,11,13,.92);
    backdrop-filter: blur(16px);
    padding: 14px;
    display: none;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-links.open { display: flex; }
  .form-grid { grid-template-columns: 1fr; }
}

/* v2: black service select styling */
select {
  background: #000 !important;
  color: #fff !important;
}
option {
  background: #000;
  color: #fff;
}
select:focus {
  border-color: #ff751f !important;
  box-shadow: 0 0 0 3px rgba(255,117,31,.4);
}


/* v3: solid black top bar + lion emblem logo sizing */
.site-header{
  background: #000 !important;
  backdrop-filter: none !important;
}
.nav{ padding: 12px 0 !important; }
.brand{ gap: 12px; }
.brand-logo{
  height: 56px;
  width: auto;
  display: block;
}

/* v3: luxury heading font */
h1, h2, .brand-name{
  font-family: "Playfair Display", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: -0.01em;
}


/* v4: bigger header logo */
.brand-logo{
  height: 72px !important;
  width: auto;
}

/* v4: revert headings to Inter (remove Playfair) */
h1, h2, .brand-name{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* v4: much larger footer logo */
.footer .brand-logo,
footer .brand-logo{
  height: 110px !important;
  width: auto;
}


/* v5: pure black footer */
footer,
.site-footer,
.footer {
  background: #000 !important;
  background-image: none !important;
}


/* v6: orange section separators */
section + section {
  border-top: 4px solid #ff751f;
}

/* also handle generic containers used as sections */
.block + .block,
.panel + .panel,
.card + .card,
.section + .section {
  border-top: 4px solid #ff751f;
}

/* ensure full-width visual */
section {
  position: relative;
}

/* optional thicker line on dark backgrounds */
section.dark + section,
.dark + .dark {
  border-top-width: 5px;
}


/* v7: larger phone bubble, single-line number */
.call-pill,
.phone-pill,
.nav-phone,
.header-phone {
  padding: 16px 26px !important;
  font-size: 18px !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ensure container allows enough width */
.nav-cta,
.header-cta {
  gap: 14px !important;
}


/* v8: header CTA layout fix — single-line phone + shift quote button */
.nav-cta,
.header-cta,
.cta-group {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
}

/* phone bubble: prevent wrapping */
.nav-cta a[href^="tel"],
.header-cta a[href^="tel"] {
  white-space: nowrap !important;
  padding: 16px 26px !important;
  font-size: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* push quote button slightly right */
.nav-cta .btn,
.header-cta .btn {
  margin-left: 8px !important;
}


/* v9: DEFINITIVE header phone + quote layout fix (targets real markup) */
.site-header .nav-links{
  flex-wrap: nowrap !important;          /* keep CTA row on one line */
  gap: 16px !important;
}

/* Phone "Call +1..." button: force single line and give it room */
.site-header .nav-links a[href^="tel:"]{
  white-space: nowrap !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  min-width: 230px !important;           /* enough for +1 (647) 459-7775 */
  justify-content: center !important;
  text-align: center !important;
}

/* Move quote button slightly right and prevent wrapping */
.site-header .nav-links a.btn-primary{
  white-space: nowrap !important;
  margin-left: 10px !important;
}

/* If the nav is squeezing, reduce link spacing a bit before buttons */
@media (max-width: 980px){
  .site-header .nav-links{
    gap: 12px !important;
  }
  .site-header .nav-links a[href^="tel:"]{
    min-width: 215px !important;
    font-size: 16px !important;
  }
}

/* On mobile menu (stacked), allow normal wrapping again */
@media (max-width: 720px){
  .site-header .nav-links{
    flex-wrap: wrap !important;
  }
  .site-header .nav-links a[href^="tel:"]{
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
  }
  .site-header .nav-links a.btn-primary{
    margin-left: 0 !important;
    width: 100% !important;
  }
}


/* v10: nav separator (white + orange vertical lines) */
.site-header .nav-sep{
  width: 10px;
  height: 26px;
  display: inline-block;
  position: relative;
  margin: 0 6px;
  opacity: .95;
}
.site-header .nav-sep::before,
.site-header .nav-sep::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
}
.site-header .nav-sep::before{
  left: 2px;
  background: #ffffff;
}
.site-header .nav-sep::after{
  left: 6px;
  background: #ff751f;
}

/* hide separator in mobile stacked menu */
@media (max-width: 720px){
  .site-header .nav-sep{ display:none; }
}


/* v12: replace gradient background section with full image background */
.hero,
.hero-section,
.section-hero {
  background: url('/assets/hero.jpg') center center / cover no-repeat !important;
}

/* remove any previous gradient overlays */
.hero::before,
.hero-section::before,
.section-hero::before {
  background: none !important;
}

/* ensure text remains readable */
.hero,
.hero-section,
.section-hero {
  position: relative;
}

.hero::after,
.hero-section::after,
.section-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55); /* subtle dark overlay for readability */
  pointer-events: none;
}


/* v13: make hero content cards pure black for readability */
.hero .card,
.hero-section .card,
.section-hero .card,
.hero .panel,
.hero-section .panel,
.section-hero .panel {
  background: #000 !important;
  backdrop-filter: none !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
}

/* ensure text contrast */
.hero .card *,
.hero-section .card *,
.section-hero .card *,
.hero .panel *,
.hero-section .panel *,
.section-hero .panel * {
  color: #ffffff !important;
}


/* v14: correct selectors — make hero-card and hero-side pure black for readability */
.hero .hero-card,
.hero .hero-side{
  background: #000 !important;
  background-image: none !important;
  backdrop-filter: none !important;
}

/* ensure inner media doesn't create light overlay */
.hero .hero-media{
  background: none !important;
}

/* improve contrast in right card */
.hero .hero-side .muted,
.hero .hero-side .small{
  color: rgba(255,255,255,0.78) !important;
}


/* v15: revert hero text colors to original (remove forced white overrides) */
.hero .hero-card *,
.hero .hero-side *{
  color: unset !important;
}

/* restore proper readable hierarchy similar to v11 */
.hero .hero-card h1,
.hero .hero-card h2,
.hero .hero-side h1,
.hero .hero-side h2{
  color: #ffffff !important;
}

.hero .hero-card p,
.hero .hero-side p,
.hero .hero-side li{
  color: rgba(255,255,255,0.88) !important;
}

.hero .hero-side .muted,
.hero .hero-side .small{
  color: rgba(255,255,255,0.65) !important;
}


/* v16: force correct hero text colors with higher specificity */

.hero .hero-card h1,
.hero .hero-card h2,
.hero .hero-card h3,
.hero .hero-side h1,
.hero .hero-side h2,
.hero .hero-side h3{
  color: #ffffff !important;
}

.hero .hero-card p,
.hero .hero-side p,
.hero .hero-side li{
  color: rgba(255,255,255,0.92) !important;
}

.hero .hero-side .muted,
.hero .hero-side .small{
  color: rgba(255,255,255,0.70) !important;
}

/* remove any inherited dark color from previous versions */
.hero .hero-card,
.hero .hero-side{
  color: #ffffff !important;
}



/* v17: FIX readability — remove section overlay that was dimming ALL hero content */
.hero::after,
.hero-section::after,
.section-hero::after{
  display: none !important;
}

/* ensure any overlay pseudo-elements sit behind content if present */
.hero,
.hero-section,
.section-hero{
  position: relative;
}
.hero-grid{
  position: relative;
  z-index: 1;
}



/* v18: keep orange glow only at very top and bottom (remove mid-page section glow) */
body::before,
body::after{
  content:"";
  position: fixed;
  left: 0;
  right: 0;
  height: 360px;
  pointer-events: none;
  z-index: -1;
}
body::before{
  top: 0;
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(255,117,31,.22), transparent 55%),
    radial-gradient(900px 700px at 85% 0%, rgba(255,255,255,.06), transparent 55%);
}
body::after{
  bottom: 0;
  background:
    radial-gradient(1200px 800px at 85% 100%, rgba(255,117,31,.18), transparent 55%),
    radial-gradient(900px 700px at 15% 100%, rgba(255,255,255,.05), transparent 60%);
}

/* ensure main content sits above background glows */
main{ position: relative; z-index: 0; }


/* v19: Fix background gradients (stop weird scrolling) and keep glow only top/bottom */
body::before, body::after{ display:none !important; }

html{
  background:#000;
}
html::before,
html::after{
  content:"";
  position: fixed;
  left: 0;
  right: 0;
  height: 280px;
  pointer-events: none;
  z-index: 0;
}
html::before{
  top: 0;
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(255,117,31,.20), transparent 60%),
    radial-gradient(900px 700px at 85% 0%, rgba(255,255,255,.06), transparent 60%);
}
html::after{
  bottom: 0;
  background:
    radial-gradient(1200px 800px at 85% 100%, rgba(255,117,31,.18), transparent 60%),
    radial-gradient(900px 700px at 15% 100%, rgba(255,255,255,.05), transparent 60%);
}

/* keep page content above the fixed glow */
body{
  position: relative;
  z-index: 1;
  background: transparent !important;
}


/* v20: revert overall background styling back to v17 (global radial gradients) */
html{ background: transparent !important; }
html::before, html::after{ display:none !important; }

body{
  background: radial-gradient(1200px 800px at 15% 10%, rgba(255,117,31,.22), transparent 55%),
              radial-gradient(900px 700px at 85% 0%, rgba(255,255,255,.06), transparent 55%),
              var(--bg) !important;
}


/* v23: Top/Bottom circular glows only, NO mid-page gradient, keep original bg color (#0b0b0d) */
body{
  background: var(--bg) !important; /* keep the lighter original dark */
  position: relative;
}

/* Remove any prior global gradient layers added in previous versions */
html::before, html::after, body::before, body::after{
  pointer-events: none;
}

/* Top circular glow */
body::before{
  content:"";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 420px;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 18% 35%, rgba(255,117,31,.28), transparent 60%),
    radial-gradient(750px 480px at 82% 10%, rgba(255,255,255,.08), transparent 62%);
}

/* Bottom circular glow */
body::after{
  content:"";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 420px;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 82% 65%, rgba(255,117,31,.22), transparent 60%),
    radial-gradient(750px 480px at 18% 95%, rgba(255,255,255,.06), transparent 62%);
}

/* Ensure page content sits above the glow layers */
.site-header, main, .site-footer{
  position: relative;
  z-index: 1;
}


/* v24: single circular top-left gradient only */
body{
  background:
    radial-gradient(900px 700px at 0% 0%, rgba(255,117,31,0.25), transparent 60%),
    #0b0b0d !important;
}

/* remove any bottom glow */
html::after{
  display:none !important;
}



/* v25: revert global background (no site-wide glow) */
body{
  background: #0b0b0d !important;
}

/* v25: exact circular glow ONLY on internal page hero sections */
.internal-hero{
  position: relative;
  overflow: hidden;
}
.internal-hero::before{
  content: "";
  position: absolute;
  top: -300px;
  left: -300px;
  width: 900px;
  height: 900px;
  background: radial-gradient(circle at center,
    rgba(255,115,0,0.35) 0%,
    rgba(255,115,0,0.15) 30%,
    rgba(255,115,0,0.05) 55%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.internal-hero > *{
  position: relative;
  z-index: 1;
}


/* v27: use VERSION 17 style gradient (orange + subtle white) BUT ONLY on internal hero sections */
body{
  background: #0b0b0d !important; /* keep lighter dark base */
}

.internal-hero{
  position: relative;
  overflow: hidden;
}

/* Replace any prior hero glow with v17-style radials */
.internal-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Big canvas so the radials look circular and soft, like v17 */
  transform: translateZ(0);
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(255,117,31,.22), transparent 55%),
    radial-gradient(900px 700px at 85% 0%, rgba(255,255,255,.06), transparent 55%);
}

.internal-hero > *{
  position: relative;
  z-index: 1;
}


/* v28: match v17 glow across full page width, but ONLY at the very top of specified internal pages */
body.internal-topglow{
  position: relative;
  background: #0b0b0d !important;
}

/* remove any hero-only glow from prior versions */
body.internal-topglow .internal-hero::before{
  background: none !important;
  display:none !important;
}

/* full-width top glow (scrolls away with page; no mid-page glow) */
body.internal-topglow::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:520px; /* top-only */
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(255,117,31,.22), transparent 55%),
    radial-gradient(900px 700px at 85% 0%, rgba(255,255,255,.06), transparent 55%);
}

/* keep all content above the glow */
body.internal-topglow header,
body.internal-topglow main,
body.internal-topglow footer,
body.internal-topglow .section,
body.internal-topglow .hero,
body.internal-topglow .page-hero,
body.internal-topglow .container{
  position: relative;
  z-index: 1;
}


/* v36: modern haze + accents (global polish) */
:root{
  --aps-accent: #ff751f;
  --aps-bg: #0b0b0d;
  --aps-panel: #000000;
  --aps-text: rgba(255,255,255,0.92);
  --aps-muted: rgba(255,255,255,0.70);
}

/* Subtle top glow on all pages (kept very light) */
body{
  background-color: var(--aps-bg) !important;
  color: var(--aps-text);
}

/* Premium section heading accent: orange line + soft glow */
.section h2,
.section h3{
  position: relative;
}
.section h2::after,
.section h3::after{
  content:"";
  display:block;
  width: 72px;
  height: 2px;
  margin-top: 10px;
  background: var(--aps-accent);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(255,117,31,0.25);
}

/* Cards / service bubbles: modern border + hover lift */
.card, .service-card, .bubble, .pill, .tile, .quote-card, .form-card{
  background: rgba(0,0,0,0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover, .service-card:hover, .bubble:hover, .pill:hover, .tile:hover, .quote-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,117,31,0.28);
  box-shadow: 0 22px 60px rgba(0,0,0,0.45);
}

/* Tiny accent corner on cards (subtle) */
.card::before, .service-card::before, .bubble::before, .tile::before, .quote-card::before, .form-card::before{
  content:"";
  position:absolute;
  inset:auto auto 0 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at 0% 100%, rgba(255,117,31,0.18), transparent 62%);
  pointer-events:none;
  border-bottom-left-radius: 18px;
  opacity: .9;
}
.card, .service-card, .bubble, .tile, .quote-card, .form-card{
  position: relative;
  overflow: hidden;
}

/* Buttons: modern glow + crisp hover */
a.btn, button.btn, .btn-primary, .btn{
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary{
  box-shadow: 0 12px 26px rgba(255,117,31,0.22);
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(255,117,31,0.28);
  filter: brightness(1.02);
}

/* Links hover accent */
a:hover{
  text-decoration: none;
}
.nav a:hover, .nav-links a:hover{
  color: #fff;
  text-shadow: 0 0 12px rgba(255,117,31,0.22);
}

/* Forms: focus ring + cleaner selects */
input, textarea, select{
  border-radius: 14px;
}
input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: rgba(255,117,31,0.55) !important;
  box-shadow: 0 0 0 4px rgba(255,117,31,0.14) !important;
}

/* Orange separators: slight glow for depth */
.section-sep, .separator, hr{
  box-shadow: 0 0 18px rgba(255,117,31,0.18);
}

/* Footer polish */
footer{
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Mobile: reduce hover lift (touch) */
@media (max-width: 720px){
  .card:hover, .service-card:hover, .bubble:hover, .tile:hover, .quote-card:hover{
    transform: none;
  }
}

/* v41: center Christmas Lighting card on its own row */
.card-xmas{
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 420px;
}


/* v64: How it works logo tile — rounded + modern glow */
#process .media{
  border-radius: 26px !important;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 40px rgba(255,117,31,.14);
  transform: translateZ(0);
}
#process .media::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(520px 420px at 18% 18%, rgba(255,117,31,.22), transparent 60%),
    radial-gradient(520px 420px at 82% 18%, rgba(255,255,255,.08), transparent 62%),
    radial-gradient(520px 420px at 70% 90%, rgba(255,117,31,.12), transparent 65%);
  opacity: .95;
}
@media (hover:hover){
  #process .media{
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  #process .media:hover{
    transform: translateY(-2px);
    box-shadow:
      0 26px 78px rgba(0,0,0,.60),
      0 0 0 1px rgba(255,255,255,.12) inset,
      0 0 60px rgba(255,117,31,.18);
    filter: saturate(1.02);
  }
}


/* v65: circular logo (no dead space) + edge glow on container (not on the image) */
#process .media-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  background: transparent !important;
  border-radius: 999px !important; /* perfect circle */
  width: min(460px, 92vw);
  aspect-ratio: 1 / 1;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 22px 70px rgba(0,0,0,.60),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 70px rgba(255,117,31,.22);
  position: relative;
  overflow: hidden;
}
#process .media-logo::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  pointer-events:none;
  /* edge glow ring */
  background: radial-gradient(circle at 50% 50%, transparent 62%, rgba(255,117,31,.18) 72%, transparent 82%);
  opacity: .95;
}
#process .process-logo{
  width: 84%;
  height: 84%;
  object-fit: contain;
  border-radius: 999px; /* keep the png circle crisp */
  display:block;
}

/* Hover pop */
@media (hover:hover){
  #process .media-logo{
    transition: transform .18s ease, box-shadow .18s ease;
  }
  #process .media-logo:hover{
    transform: translateY(-2px);
    box-shadow:
      0 30px 90px rgba(0,0,0,.62),
      0 0 0 1px rgba(255,255,255,.12) inset,
      0 0 90px rgba(255,117,31,.26);
  }
}


/* v68: remove thin grey line at top of homepage (header border) */
body.home .site-header{
  border-bottom: none !important;
  box-shadow: none !important;
}


/* v69: remove the thin top strip by pushing the top glow above the viewport */
body::before{
  top: -140px !important;
  height: 520px !important;
}


/* v71: kill the thin top strip by disabling ALL fixed glow pseudo-elements */
html::before, html::after,
body::before, body::after{
  display: none !important;
}


/* v72: Top announcement banner (replaces the thin strip) */
body{
  padding-top: 38px !important; /* make room for banner */
}
/* keep other glow pseudos off */
html::before, html::after,
body::after{
  display: none !important;
}
/* use body::before as the orange banner */
body::before{
  content: "NOW BOOKING seasonal lawn maintenance and spring clean-ups; LIMITED slots!";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 38px;
  z-index: 999999;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  background: #ff751f;
  color: #000;
  font: 800 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .2px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
@media (max-width: 520px){
  body::before{
    font-size: 12px;
    height: 44px;
    padding: 0 10px;
  }
  body{ padding-top: 44px !important; }
}



/* v73: FIX banner height (force override any prior glow pseudo sizing) */
body{
  padding-top: 38px !important;
}
body::before{
  content: "NOW BOOKING seasonal lawn maintenance and spring clean-ups; LIMITED slots!" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;

  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 14px !important;
  margin: 0 !important;

  background: #ff751f !important;
  background-image: none !important;

  color: #000 !important;
  font: 800 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  letter-spacing: .2px !important;
  text-align: center !important;

  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  z-index: 999999 !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}
/* keep other glow pseudos off */
html::before, html::after,
body::after{
  display: none !important;
  content: "" !important;
}
@media (max-width: 520px){
  body{ padding-top: 44px !important; }
  body::before{
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
  }
}


/* v74: remove ultra-thin grey line at very top (force clean edge) */
html, body{
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--aps-bg) !important;
}
body::before{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important; /* no top hairline */
}


/* v76: increase black header background above nav (without shifting nav text) */
:root{ --navTopExtra: 10px; }

.site-header{
  padding-top: var(--navTopExtra) !important;
}

/* pull the nav content back up so text stays in the same place */
.site-header > .container,
.site-header .nav{
  position: relative;
  top: calc(var(--navTopExtra) * -1);
}



/* v78: force NOW BOOKING banner to stay fixed at the very top */
body::before{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000000 !important;
}


/* v79: banner at top of page (scrolls away; does NOT stay visible) */
body::before{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}
/* keep initial spacing so it doesn't overlap content at page load */
body{
  padding-top: 38px !important;
}
@media (max-width: 520px){
  body{ padding-top: 44px !important; }
}


/* v80: keep banner scrolling away AND permanently remove grey top strip */
html, body{
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--aps-bg) !important;
}

/* banner: top-of-page only (scrolls away) */
body::before{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  /* ensure no hairline above */
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}

/* remove any accidental 1px borders at the very top */
.site-header{
  border-top: none !important;
}


/* v82: shift black navigation bar down more (all pages) */
.site-header{
  margin-top: 14px !important;
}

/* v82: enforce header offset everywhere (prevents page-specific overrides) */
body .site-header{ margin-top: 14px !important; }


/* v84: show orange NOW BOOKING banner ONLY on homepage */
body{
  padding-top: 0 !important; /* default: no banner spacing */
}

/* Disable banner on all pages by default */
body::before{
  content: "" !important;
  display: none !important;
}

/* Enable banner ONLY on homepage */
body.home-banner{
  padding-top: 38px !important;
}
@media (max-width: 520px){
  body.home-banner{ padding-top: 44px !important; }
}

body.home-banner::before{
  content: "NOW BOOKING seasonal lawn maintenance and spring clean-ups; LIMITED slots!" !important;
  display: flex !important;
  position: absolute !important; /* scrolls away */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;

  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  align-items: center !important;
  justify-content: center !important;

  padding: 0 14px !important;
  margin: 0 !important;

  background: #ff751f !important;
  background-image: none !important;

  color: #000 !important;
  font: 800 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  letter-spacing: .2px !important;
  text-align: center !important;

  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  z-index: 999999 !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}
@media (max-width: 520px){
  body.home-banner::before{
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
  }
}


/* v95: put the black navigation bar ON TOP of the grey seam (home page) */
body.home-banner .site-header{
  z-index: 1000000 !important;      /* above any seams */
  background: #000 !important;      /* solid black cover */
  backdrop-filter: none !important; /* avoid translucent edge */
  -webkit-backdrop-filter: none !important;
  margin-top: -14px !important;      /* overlap the seam so it's hidden */
  border-top: none !important;
  box-shadow: none !important;
}

/* v104: center quote button on gallery page */
body.gallery-page .cta, body.gallery-page .callout, body.gallery-page .quote-cta, body.gallery-page .cta-actions, body.gallery-page .actions{
  justify-content: center !important;
  text-align: center !important;
}
body.gallery-page .btn{ margin-left:auto !important; margin-right:auto !important; }


/* v106: Mobile optimization only (desktop unchanged) */
@media (max-width: 980px){
  .container{ padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 820px){
  /* Header/nav */
  .site-header .container{ gap: 10px; }
  .site-header .brand{ gap: 10px; }
  .site-header .brand img{ width: 42px; height: 42px; }
  .site-header nav ul{ gap: 14px; }
  .site-header .cta{ gap: 10px; }
  .site-header .cta .pill{ padding: 10px 14px; }
  .site-header .cta .btn{ padding: 10px 14px; }

  /* Hero */
  .hero{ padding-top: 28px; padding-bottom: 28px; }
  .hero .grid{ grid-template-columns: 1fr; gap: 16px; }
  .hero .card{ border-radius: 22px; }
  .hero h1{ font-size: clamp(36px, 8vw, 54px); line-height: 1.02; }
  .hero .sub{ font-size: 15px; }
  .hero .actions{ flex-wrap: wrap; gap: 10px; }
  .hero .actions .btn, .hero .actions .pill{ width: 100%; justify-content: center; }
  .hero .chips{ flex-wrap: wrap; gap: 8px; }
  .hero .chips .chip{ width: auto; }

  /* Section spacing */
  .section{ padding-top: 38px; padding-bottom: 38px; }
  .section h2{ font-size: 30px; }
  .section p.lead{ font-size: 15px; }

  /* Service cards + grids */
  .cards, .grid-3, .grid-2{ grid-template-columns: 1fr !important; }
  .cards{ gap: 14px; }
  .card{ border-radius: 18px; }

  /* Recent work tiles */
  .recent-work-grid{ grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .recent-work-grid .tile{ border-radius: 14px !important; }
}

@media (max-width: 520px){
  /* Tighter header */
  .site-header{ padding-top: 10px; padding-bottom: 10px; }
  .site-header nav{ display: none; } /* keep clean on small phones */
  .site-header .cta{ width: 100%; justify-content: space-between; }
  .site-header .cta .pill{ flex: 1; justify-content:center; }
  .site-header .cta .btn{ flex: 1; justify-content:center; }

  /* Typography */
  h1{ letter-spacing: -0.4px; }
  .section h2{ font-size: 28px; }
  .section h3{ font-size: 18px; }

  /* Forms */
  form .row{ grid-template-columns: 1fr !important; gap: 10px !important; }
  form input, form select, form textarea{ font-size: 16px; } /* iOS zoom prevention */

  /* Recent work: single column for very small screens */
  .recent-work-grid{ grid-template-columns: 1fr !important; }
}

/* Keep desktop unchanged: all rules above are within max-width queries */


/* ===== v107 Mobile fixes (no desktop changes) ===== */
@media (max-width: 820px) {
  /* 1) Stop horizontal scrolling */
  html, body { overflow-x: hidden !important; }
  * { max-width: 100%; }

  /* Media should never overflow */
  img, video, iframe { max-width: 100%; height: auto; }

  /* If any banner/strip uses 100vw, force 100% on mobile */
  .booking-banner,
  .top-banner,
  .announcement,
  .banner,
  [class*="banner"],
  [id*="banner"] {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* 2) Fix squished header logo */
  .brand img,
  .site-header .brand img,
  .mark img {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
  }

  /* 3) Make hamburger clearly visible (3 separate bars) */
  .nav-toggle,
  .menu-toggle,
  .hamburger {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
  }

  .nav-toggle span,
  .menu-toggle span,
  .hamburger span {
    display: block !important;
    width: 24px !important;
    height: 3px !important;
    background: #fff !important;
    border-radius: 3px !important;
    margin: 3px 0 !important;
    opacity: 1 !important;
  }
}

@media (max-width: 520px) {
  .brand img,
  .site-header .brand img {
    width: 48px !important;
    height: 48px !important;
  }
}

/* ===== v112 Mobile-only polish (desktop unchanged) ===== */
@media (max-width: 820px){

  /* Slightly lighter dark grey background (mobile only) */
  html, body{ background: #121316 !important; overflow-x:hidden !important; }

  /* Prevent any horizontal scroll */
  *{ max-width:100%; }
  img, video, iframe{ max-width:100%; height:auto; display:block; }

  /* Header logo: never squish */
  .brand-logo{ width:48px !important; height:48px !important; object-fit:contain !important; }

  /* Mobile menu: solid overlay panel above everything */
  .site-header{ position: relative; z-index: 10010; }
  .nav-toggle{ z-index: 10050; }
  .nav-links{ display:none; }
  .nav-toggle[aria-expanded="true"] + .nav-links{
    display:flex !important;
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:74px !important;
    flex-direction:column !important;
    gap:10px !important;
    padding:14px !important;
    border-radius:18px !important;
    background:#0b0b0d !important; /* solid */
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 24px 80px rgba(0,0,0,.65) !important;
    max-height:calc(100vh - 92px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    z-index: 10040 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .nav-toggle[aria-expanded="true"] + .nav-links a{
    width:100% !important;
    padding:12px 12px !important;
    border-radius:12px !important;
  }
  .nav-toggle span{
    width:24px !important;
    height:3px !important;
    margin:3px 0 !important;
    background:#fff !important;
    border-radius:3px !important;
    display:block !important;
    opacity:1 !important;
  }

  /* Recent work: your homepage uses .gallery and .gimg tiles */
  .gallery{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:10px !important;
    justify-items:center !important;
    align-items:stretch !important;
  }
  .gallery .gimg{
    width:100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius:14px !important;
    overflow:hidden !important;
    background-size: cover !important;
    background-position: center !important;
  }
  .gallery .gvid{
    width:100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius:14px !important;
    overflow:hidden !important;
  }
  .gallery .recent-video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }

  /* How it works/process: center section so it isn't pushed right */
  #process .container{ text-align:center !important; }
  #process .grid{ grid-template-columns: 1fr !important; justify-items:center !important; }
  #process .media, 
  #process .media-logo,
  #process .process-visual,
  #process .process-media{ margin-left:auto !important; margin-right:auto !important; }

  /* Footer: clean single column, nothing sticks off-screen, bigger logo */
  .site-footer{ overflow-x:hidden !important; }
  .footer-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
    justify-items:center !important;
    text-align:center !important;
  }
  .footer-brand{
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
  }
  .site-footer .footer-brand img.brand-logo{
    width:72px !important;
    height:72px !important;
  }
  .footer-list{ padding-left:0 !important; }
  .footer-cta{ justify-content:center !important; }
}

@media (max-width: 520px){
  .gallery{ grid-template-columns: 1fr !important; }
  .nav-toggle[aria-expanded="true"] + .nav-links{ left:10px !important; right:10px !important; top:70px !important; }
}

/* ===== v114 Mobile nav menu: solid, clickable, non-sticky (desktop unchanged) ===== */
@media (max-width: 820px){

  /* Header should scroll away (not sticky/fixed) */
  .site-header{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }
  body{ padding-top: 0 !important; }

  /* Default: hide links until hamburger is opened */
  .nav-links{ display: none; }

  /* Open menu: NOT fixed to viewport (so it scrolls away with header),
     but overlays content right under header and is fully opaque/clickable */
  .nav-toggle[aria-expanded="true"] + .nav-links{
    display: flex !important;
    position: absolute !important;
    top: 100% !important;
    left: 12px !important;
    right: 12px !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: #0b0b0d !important;          /* SOLID (no transparency) */
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 20px 70px rgba(0,0,0,.65) !important;
    z-index: 10080 !important;               /* above everything */
    pointer-events: auto !important;
  }

  /* Ensure each link is easy to tap */
  .nav-toggle[aria-expanded="true"] + .nav-links a{
    width: 100% !important;
    padding: 12px 12px !important;
    border-radius: 12px !important;
  }

  /* Separators inside menu */
  .nav-toggle[aria-expanded="true"] + .nav-links .nav-sep{
    width: 100% !important;
    height: 1px !important;
    background: rgba(255,255,255,.10) !important;
    margin: 6px 0 !important;
  }

  /* Hamburger bars clearly visible */
  .nav-toggle span{
    width: 24px !important;
    height: 3px !important;
    margin: 3px 0 !important;
    background: #fff !important;
    border-radius: 3px !important;
    display: block !important;
    opacity: 1 !important;
  }
}

@media (max-width: 520px){
  .nav-toggle[aria-expanded="true"] + .nav-links{
    left: 10px !important;
    right: 10px !important;
  }
}

/* ===== v115 Mobile nav dropdown: force SOLID background (fix transparency on all pages) ===== */
@media (max-width: 820px){
  /* Force the dropdown panel to be fully opaque even before/after open toggles */
  .nav-links{
    background: #0b0b0d !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* When open, keep it above content and fully interactive */
  .nav-links.open{
    background: #0b0b0d !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto !important;
    z-index: 10090 !important;
  }
}

/* ===== v116 Mobile nav dropdown layering: match home page across ALL pages ===== */
@media (max-width: 820px){

  /* Ensure header sits above page content */
  .site-header{
    position: relative !important;
    z-index: 20000 !important;
  }
  .nav-toggle{ z-index: 20010 !important; }

  /* Force dropdown to be a fixed overlay above everything (same behavior everywhere) */
  .nav-links.open{
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 76px !important;
    z-index: 30000 !important;

    display: flex !important;
    flex-direction: column !important;

    background: #0b0b0d !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 20px 70px rgba(0,0,0,.65) !important;

    max-height: calc(100vh - 92px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    pointer-events: auto !important;
  }

  /* Make sure no page section can overlap the open menu */
  .hero, .section, main, .page-hero, .internal-hero{
    position: relative !important;
    z-index: 1 !important;
  }
}

@media (max-width: 520px){
  .nav-links.open{
    left: 10px !important;
    right: 10px !important;
    top: 70px !important;
    max-height: calc(100vh - 86px) !important;
  }
}