:root {
  --graphite: #1B2430;
  --graphite-2: #141B24;
  --steel: #3D5A73;
  --leaf: #4C8C4A;
  --ember: #D9772E;
  --paper: #F6F5F1;
  --ink: #1B2430;
  --line: #D8D4C8;
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
h1, h2, h3 {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
}
p { margin: 0 0 1em; max-width: 62ch; }
a { color: var(--steel); text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* Header — merged into the same dark tone as the hero/banner below it,
   so there is no separate "white strip" at the top of any page. */
header.site {
  position: sticky; top: 0; z-index: 200;
  background: var(--graphite-2);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 62px;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.brand img { height: 35px; width: auto; } /* +10% */
.brand span { font-family: 'Space Grotesk', Arial, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .2px; }

nav.main-nav ul {
  list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; align-items: center;
}
nav.main-nav > ul > li { position: relative; }
nav.main-nav a {
  color: #C9CFD6; font-weight: 500; font-size: 15px;
  padding: 8px 2px; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 5px;
}
nav.main-nav a:hover, nav.main-nav a.active {
  color: #fff; border-bottom-color: var(--leaf);
}
.nav-toggle { display: none; background: none; border: none; font-size: 24px; cursor: pointer; color: #fff; }
.caret { font-size: 10px; transition: transform .2s ease; display: inline-block; }
.has-dropdown details[open] .caret { transform: rotate(180deg); }

/* Dropdown menu — built on the native <details>/<summary> disclosure
   element rather than custom JS state. The browser owns the open/closed
   state directly, so there is no CSS :hover and no JS class to fall out of
   sync — it cannot get "stuck" the way a hand-rolled toggle can on touch
   devices. */
.has-dropdown details { position: relative; }
.has-dropdown summary {
  cursor: pointer; list-style: none;
  color: #C9CFD6; font-weight: 500; font-size: 15px;
  padding: 8px 2px; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 5px;
}
.has-dropdown summary::-webkit-details-marker { display: none; }
.has-dropdown summary::marker { content: ""; }
.has-dropdown summary:hover, .has-dropdown details[open] summary {
  color: #fff; border-bottom-color: var(--leaf);
}
.has-dropdown summary.active { color: #fff; border-bottom-color: var(--leaf); }

.dropdown {
  list-style: none; margin: 0; padding: 8px; display: flex; gap: 2px; flex-direction: column;
  position: absolute; top: 100%; left: -12px; min-width: 250px;
  background: var(--graphite-2);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(0,0,0,0.40);
}
.dropdown li { list-style: none; }
.dropdown a {
  display: block; width: 100%; padding: 10px 12px; font-size: 14px;
  color: #C9CFD6; border-bottom: none; border-radius: 6px;
}
.dropdown a:hover, .dropdown a.active { background: rgba(255,255,255,0.08); color: #fff; }

@media (max-width: 860px) {
  nav.main-nav ul.top-level { display: none; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: 62px; left: 0; right: 0; background: var(--graphite-2); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 10px 20px 18px; max-height: calc(100vh - 62px); overflow-y: auto; }
  nav.main-nav ul.top-level.open { display: flex; }
  nav.main-nav > ul > li { width: 100%; }
  nav.main-nav a, .has-dropdown summary { width: 100%; padding: 12px 4px; justify-content: space-between; }
  .nav-toggle { display: block; }
  .dropdown { position: static; box-shadow: none; border: none; background: rgba(255,255,255,0.04); margin: 2px 0 4px; left: 0; }
}

/* Hero — background image layer (faded/desaturated) + gradient layer, both
   behind the content, so the busy collage photo no longer overwhelms the tiles */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--graphite-2);
  color: var(--paper);
  padding: 56px 0 64px;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: url('../images/Background.webp') center / cover no-repeat;
  filter: saturate(0.55) brightness(0.75) contrast(1.05);
  opacity: 0.85;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(10,14,20,0.88) 0%, rgba(10,14,20,0.78) 42%, rgba(10,14,20,0.68) 100%);
}
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: start; }
.hero h1 { font-size: clamp(23px, 3.6vw, 38px); color: #fff; font-family: 'Times New Roman', Times, serif; }
.hero .lede { color: #C9CFD6; font-size: 18px; max-width: 46ch; }
.hero .cta-row { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 4px;
  font-weight: 600; font-size: 15px; border: 1px solid transparent;
}
.btn.primary { background: var(--leaf); color: #fff; }
.btn.primary:hover { background: #427a41; }
.btn.ghost { border-color: #5C6773; color: var(--paper); }
.btn.ghost:hover { border-color: var(--paper); }

/* Logo above the headline, left side of the hero */
.hero-logo-left { width: 100%; max-width: 330px; height: auto; margin-bottom: 20px; }

/* Product tile panel — a "glass" card that sits on the faded background so
   the product boxes read as clearly elevated, high-contrast elements */
.hero-whatwedo { align-self: start; }
.hero-whatwedo .highlight-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  gap: 14px;
  backdrop-filter: blur(3px);
}
.hero-whatwedo .highlight-grid a {
  padding: 0; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 10px 22px rgba(0,0,0,0.45), 0 3px 8px rgba(0,0,0,0.30);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hero-whatwedo .highlight-grid a:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px rgba(0,0,0,0.50), 0 4px 10px rgba(0,0,0,0.32);
}
.hero-whatwedo .highlight-grid .tile-img { display: block; aspect-ratio: 4 / 3; background: #E7E4DC; overflow: hidden; position: relative; }
.hero-whatwedo .highlight-grid .tile-img::after { content:""; position:absolute; inset:0 0 auto 0; height:3px; background: var(--leaf); }
.hero-whatwedo .highlight-grid .tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.08) contrast(1.05); transition: transform .3s ease; }
.hero-whatwedo .highlight-grid a:hover .tile-img img { transform: scale(1.06); }
.hero-whatwedo .highlight-grid .tile-body { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 8px 14px 9px; background: var(--graphite); }
.hero-whatwedo .highlight-grid strong { font-size: 14.5px; color: #fff; margin-bottom: 1px; }
.hero-whatwedo .highlight-grid span.desc { font-size: 12.5px; color: #C9CFD6; }
@media (max-width: 720px) {
  .hero-whatwedo .highlight-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-logo-left { max-width: 253px; }
}
@media (max-width: 720px) {
  .hero .wrap { grid-template-columns: 1fr; }
}

/* Section basics */
.section { padding: 64px 0; border-bottom: 1px solid var(--line); }
.section:last-of-type { border-bottom: none; }
.section .kicker { color: var(--steel); font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.section h2 { font-size: clamp(24px, 3vw, 32px); }
.section .section-intro { color: #4A4F58; }

/* Category block (still used if you want to list several categories on one page) */
.category {
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.category:first-of-type { border-top: none; padding-top: 8px; }
.category-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.category-head h3 { font-size: 22px; margin: 0; }
.category-head .cat-intro { color: #4A4F58; margin: 0; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(27,36,48,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(27,36,48,0.12); }
.card .img-wrap { aspect-ratio: 4 / 3; overflow: hidden; background: #E7E4DC; }
.card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.card .card-body { padding: 14px 16px 18px; }
.card h4 { margin: 0 0 6px; font-family: 'Space Grotesk', Arial, sans-serif; font-size: 16px; }
.card p { margin: 0; font-size: 14px; color: #4A4F58; }

/* Home highlight grid (legacy — unused now that tiles live in the hero panel) */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}
.highlight-grid a { background: #fff; padding: 22px 20px; color: var(--ink); display: block; }
.highlight-grid a:hover { background: var(--paper); }
.highlight-grid strong { font-family: 'Space Grotesk', Arial, sans-serif; font-size: 17px; display: block; margin-bottom: 4px; }
.highlight-grid span.desc { color: #4A4F58; font-size: 14px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-card { border: 1px solid var(--line); border-radius: 10px; padding: 24px; background: #fff; }
.contact-card h3 { font-size: 17px; }
.contact-card a { color: var(--steel); font-weight: 500; }
@media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } }

/* About */
.about-lead { font-size: 19px; max-width: 60ch; }
.stat-row { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 24px; }
.stat-row .stat strong { display: block; font-family: 'Space Grotesk', Arial, sans-serif; font-size: 28px; color: var(--graphite); }
.stat-row .stat span { color: #4A4F58; font-size: 14px; }

/* Footer — company info + a Products column so every category is still
   reachable from the footer now that the Products hub page is gone */
footer.site { background: var(--graphite-2); color: #C9CFD6; padding: 48px 0 26px; }
footer.site .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
footer.site .foot-brand img { width: 160px; height: auto; margin-bottom: 10px; }
footer.site .foot-brand .foot-partner { display: inline-block; margin-top: 12px; }
footer.site .foot-brand .foot-partner img { width: 160px; height: auto; margin: 0; display: block; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.35); transition: transform .15s; }
footer.site .foot-brand .foot-partner:hover img { transform: translateY(-2px); }
footer.site .foot-brand p { color: #8A93A0; font-size: 14px; max-width: 42ch; }
footer.site h5 { color: #fff; font-family: 'Space Grotesk', Arial, sans-serif; font-size: 14px; letter-spacing: .3px; text-transform: uppercase; margin: 0 0 12px; }
footer.site .foot-links { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
footer.site a { color: #C9CFD6; }
footer.site a:hover { color: #fff; }
footer.site .foot-bottom { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 28px; padding-top: 18px; }
footer.site small { display: block; color: #7C8794; font-size: 13px; }
@media (max-width: 720px) { footer.site .wrap { grid-template-columns: 1fr 1fr; } footer.site .foot-brand { grid-column: 1 / -1; } }

/* Standalone category page banner (used by the 8 product/service pages) —
   same faded background/gradient treatment as the home hero for a seamless look */
.category-hero {
  position: relative;
  background: var(--graphite-2);
  color: #fff;
  overflow: hidden;
}
.category-hero .bg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(0.6) brightness(0.7);
  opacity: 0.9;
}
.category-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(10,14,20,0.85) 0%, rgba(10,14,20,0.74) 45%, rgba(10,14,20,0.58) 100%);
}
.category-hero .wrap { position: relative; padding: 48px 24px 40px; z-index: 1; }
.category-hero .kicker-link { color: #C9CFD6; font-weight: 600; font-size: 14px; text-decoration: none; }
.category-hero .kicker-link:hover { color: #fff; }
.category-hero h1 { font-size: clamp(26px, 3.6vw, 38px); color: #fff; margin-top: 6px; }
.category-hero .lede { color: #C9CFD6; font-size: 17px; max-width: 60ch; margin-bottom: 0; }

/* Image cube grid — kept for any page that wants a quick visual index of all categories */
.cube-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 18px;
}
.cube {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(27,36,48,0.14), 0 2px 5px rgba(27,36,48,0.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cube-face { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #E7E4DC; }
.cube-face img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.cube-label { display: block; padding: 12px 14px; font-family: 'Space Grotesk', Arial, sans-serif; font-weight: 600; font-size: 14.5px; }
.cube:hover { transform: translateY(-4px) rotateX(3deg); box-shadow: 0 16px 28px rgba(27,36,48,0.22), 0 4px 10px rgba(27,36,48,0.14); }
.cube:hover .cube-face img { transform: scale(1.07); }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* EV Care page — service blocks, hero quote button, quote band */
.category-hero .lede { max-width: 78ch; }
.hero-cta { margin: 24px 0 0; }
.ev-heading { text-align: center; font-size: clamp(24px, 3vw, 32px); margin-bottom: 28px; }
.ev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.ev-card { background: #EFEFEE; padding: 32px 26px 34px; text-align: center; transition: transform .2s ease, box-shadow .2s ease; }
.ev-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(27,36,48,0.14); }
.ev-card-top { display: flex; justify-content: center; align-items: flex-start; gap: 34px; margin-bottom: 22px; padding-left: 60px; }
.ev-icon { width: 90px; height: 78px; border-radius: 14px; background: #0E0E0E; display: flex; align-items: center; justify-content: center; font-size: 38px; line-height: 1; }
.ev-bars { display: flex; gap: 6px; height: 100px; }
.ev-bars i { display: block; width: 8px; background: #111; }
.ev-bars i:last-child { background: #C0301F; }
.ev-card h3 { font-size: 21px; text-transform: uppercase; color: #0B0B0B; margin: 0 0 16px; }
.ev-cardh3 { text-decoration: none; }
.ev-card:not(:first-child) h3 { text-decoration: underline; text-underline-offset: 3px; }
.ev-card p { color: #55595F; font-size: 15.5px; line-height: 1.6; margin: 0 auto; max-width: 34ch; }
.ev-quote { margin-top: 40px; background: var(--graphite-2); color: #fff; border-radius: 12px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ev-quote h3 { color: #fff; font-size: 22px; margin: 0 0 6px; }
.ev-quote p { color: #C9CFD6; margin: 0; }
@media (max-width: 900px) { .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ev-grid { grid-template-columns: 1fr; } .ev-card-top { padding-left: 40px; } }
.ev-hero::before { background: linear-gradient(110deg, rgba(10,14,20,0.94) 0%, rgba(10,14,20,0.88) 55%, rgba(10,14,20,0.72) 100%); }
.ev-hero .lede { color: #E4E8EC; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

/* Wider home tiles: allow longer descriptions to wrap cleanly */
.hero-whatwedo .highlight-grid { gap: 12px; }
.hero-whatwedo .highlight-grid span.desc { line-height: 1.4; }
@media (max-width: 720px) { .hero-whatwedo .highlight-grid { grid-template-columns: 1fr; } }

/* Floating WhatsApp button (all pages) */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  background: #25D366; color: #fff; font-weight: 700; font-size: 15px;
  padding: 12px 18px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.wa-float:hover { background: #1EBE5A; color: #fff; }
@media (max-width: 480px) { .wa-float { right: 12px; bottom: 12px; font-size: 14px; padding: 10px 14px; } }

/* ===== Refreshed theme: clean navy/green, single font, products grid ===== */
:root{--graphite:#0F2740;--graphite-2:#0B1F33;--steel:#1D5C8C;--leaf:#2E9A62;--ember:#E5791F;--paper:#F3F6F9;--ink:#13202E;--line:#D6DFE7;--max:1180px}
body,h1,h2,h3,h4,h5,.btn,.highlight-grid strong{font-family:'Manrope',Arial,sans-serif}
h1,h2,h3{letter-spacing:-0.01em}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
.hero{padding:64px 0 72px}
.hero::after{background:linear-gradient(110deg,rgba(11,31,51,.94) 0%,rgba(11,31,51,.84) 100%)}
.hero .wrap{grid-template-columns:1fr}
.hero h1{font-size:clamp(28px,4.2vw,44px);color:#fff;max-width:22ch;margin:0 0 16px}
.hero .lede{font-size:18px;max-width:58ch;color:#D5DCE4}
.main-nav .dropdown{min-width:340px}
.home-products{padding:64px 0;background:#fff}
.home-products h2{font-size:clamp(24px,3vw,32px);margin-bottom:8px}
.home-products .sub{color:#4A5563;margin-bottom:28px}
.home-products .highlight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;background:none;border:0;padding:0}
.home-products .highlight-grid a{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;padding:0;transition:box-shadow .2s,border-color .2s}
.home-products .highlight-grid a:hover{border-color:var(--leaf);box-shadow:0 6px 18px rgba(15,39,64,.12)}
.home-products .tile-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#E7ECF1}
.home-products .tile-img img{width:100%;height:100%;object-fit:cover}
.home-products .tile-body{display:flex;flex-direction:column;gap:6px;padding:16px}
.home-products .highlight-grid strong{font-size:16px;color:var(--graphite);margin:0}
.home-products .highlight-grid span.desc{font-size:14px;color:#4A5563;line-height:1.5}
@media(max-width:1000px){.home-products .highlight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.home-products .highlight-grid{grid-template-columns:1fr}}

/* ===== Home hero: tighter top spacing + scrolling services text on the right ===== */
.hero{padding:20px 0 48px}
.hero .wrap{grid-template-columns:0.78fr 1fr;gap:40px;align-items:center} /* wider right column: image ~10% larger */
.hero-logo-left{margin-bottom:14px}
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center}
.hero-showcase{width:100%;max-width:700px;perspective:1200px;animation:showcaseIn .9s cubic-bezier(.2,.7,.2,1) both}
.showcase-frame{
  position:relative;overflow:hidden;border-radius:16px;
  background:transparent;border:0;
  /* soft feathered edges so the picture melts into the hero background */
  -webkit-mask-image:radial-gradient(ellipse 98% 96% at 50% 50%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 98% 96% at 50% 50%,#000 62%,transparent 100%);
  animation:showcaseFloat 6s ease-in-out infinite;
  transition:transform .4s ease;
}
.showcase-frame img{display:block;width:100%;height:auto;opacity:.82;mix-blend-mode:normal;animation:showcaseZoom 14s ease-in-out infinite alternate;transform-origin:center}
.showcase-frame:hover{animation-play-state:paused;transform:rotateX(2deg) rotateY(-3deg) scale(1.02)}
.showcase-shine{
  position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.4) 50%,transparent 100%);
  transform:skewX(-20deg);animation:showcaseShine 5s ease-in-out 1.2s infinite;
}
@keyframes showcaseIn{from{opacity:0;transform:translateX(40px) scale(.96)}to{opacity:1;transform:none}}
@keyframes showcaseFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes showcaseZoom{from{transform:scale(1)}to{transform:scale(1.05)}}
@keyframes showcaseShine{0%{left:-60%}35%,100%{left:140%}}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:28px}
  .hero-showcase{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-showcase,.showcase-frame,.showcase-frame img,.showcase-shine{animation:none}
}

/* ===== Product pages: clearer, more readable intro text in the top banner ===== */
.category-hero::before,
.category-hero.ev-hero::before{background:linear-gradient(110deg,rgba(8,14,22,.93) 0%,rgba(8,14,22,.86) 55%,rgba(8,14,22,.76) 100%)}
.category-hero .lede,
.category-hero.ev-hero .lede{
  display:block;max-width:72ch;margin-top:18px;padding:14px 20px;
  font-size:clamp(17px,1.9vw,20px);line-height:1.75;font-weight:500;color:#fff;
  background:rgba(8,14,22,.55);border-left:4px solid var(--leaf);border-radius:0 8px 8px 0;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}
.category-hero h1{text-shadow:0 2px 6px rgba(0,0,0,.55)}

/* ===== Products dropdown fix =====
   `nav.main-nav ul` (flex, centered, 26px gap) was also hitting the nested
   .dropdown list, centering the links and spreading them far apart, and the
   wider menu ran off the right edge of the screen. Override with higher
   specificity and anchor the menu to the right edge of the Products item. */
nav.main-nav ul.dropdown{align-items:stretch;gap:2px;left:auto;right:0;min-width:300px;max-width:min(380px,92vw)}
nav.main-nav .dropdown li{width:100%}
nav.main-nav .dropdown a{display:block;width:100%;padding:10px 12px;border-bottom:0;white-space:normal;text-align:left}
@media (max-width:860px){
  nav.main-nav ul.dropdown{left:0;right:auto;min-width:0;max-width:none}
}