.topbar {
  height: 104px;
  grid-template-columns: 210px minmax(0, 1fr) 194px;
  padding: 0 3vw;
  background: linear-gradient(180deg, rgba(10,15,14,.98), rgba(6,11,10,.96));
  border-bottom-color: rgba(187,159,115,.2);
  box-shadow: 0 12px 32px rgba(0,0,0,.25), inset 0 -1px rgba(218,183,130,.04);
}
.topbar .nav { gap: 18px; height: 100%; min-width: 0; }
.topbar .brand { position: relative; isolation: isolate; height: 100%; justify-content: center; padding-bottom: 22px; }
.topbar .brand img { position: relative; z-index: 2; width: 164px; filter: none; transition: filter 380ms ease; }
.shell:has(#home.active) .topbar .brand img { filter: brightness(1.22) drop-shadow(0 0 7px rgba(255,217,155,.16)); }
.shell:has(#home.active) .topbar[data-lighting="uplight"] .brand img { filter: brightness(1.65) drop-shadow(0 0 10px rgba(255,226,183,.08)); }
.topbar .nav button {
  isolation: isolate;
  flex: 0 1 122px;
  min-width: 84px;
  height: 100%;
  padding: 0;
  border-radius: 0;
  font-family: "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  opacity: 1;
  color: #e1dfd7;
  background: transparent;
  text-shadow: none;
  transition: color 360ms ease, text-shadow 360ms ease;
}
.topbar .nav button::after { content: none; }
.topbar .nav-label { position: relative; z-index: 2; display: block; padding-top: 4px; }
.topbar .nav button.active, .topbar .nav button:focus-visible {
  color: #fff4e1;
  background: transparent;
  text-shadow: 0 1px 8px rgba(239,177,95,.35);
}
.nav-light, .nav-light * { position: absolute; pointer-events: none; }
.nav-light { inset: 0; z-index: 1; }
.nav-strip {
  bottom: 25px; left: 14%; width: 72%; height: 2px; border-radius: 50%;
  background: linear-gradient(90deg, #715735, #d5a65e 16%, #e3bb7a 50%, #d5a65e 84%, #715735);
  opacity: 0;
  transition: opacity 360ms ease;
}
.nav-strip::before, .nav-strip::after { content: ""; position: absolute; pointer-events: none; opacity: 0; transition: opacity 380ms ease; }
.nav-strip::before {
  inset: -1px 0; border-radius: 50%;
  background: linear-gradient(90deg, rgba(245,165,72,.2), #ffdb9b 12%, #fff6df 38%, #fff6df 62%, #ffdb9b 88%, rgba(245,165,72,.2));
  box-shadow: 0 0 3px 1px rgba(255,211,145,.9), 0 0 9px 2px rgba(246,159,57,.55), 0 4px 18px 4px rgba(217,120,26,.22);
}
.nav-strip::after {
  left: -30%; width: 160%; height: 64px; bottom: -22px;
  background: radial-gradient(ellipse at 50% 65%, rgba(248,163,67,.24), rgba(214,120,30,.1) 35%, rgba(173,100,36,.025) 60%, transparent 75%);
}
.nav-uplight { inset: 0; opacity: 0; transition: opacity 380ms ease; }
.light-fixture {
  width: 13px; height: 22px; bottom: 6px; left: calc(50% - 6.5px); border-radius: 2px 2px 1px 1px;
  background: linear-gradient(90deg, #020403, #151b18 19%, #222823 29%, #0a0e0c 49%, #050706 79%, #171c18);
  border: 1px solid rgba(132,136,118,.22);
  box-shadow: 2px 2px 3px rgba(0,0,0,.7), inset -2px 0 3px rgba(0,0,0,.8);
}
.light-fixture::after {
  content: ""; position: absolute; top: -2px; left: -1px; right: -1px; height: 3px;
  border-radius: 50%; background: linear-gradient(180deg,#776748,#1c2018);
}
.light-lens {
  width: 11px; height: 3px; bottom: 26px; left: calc(50% - 5.5px); border-radius: 50%;
  background: #fff1cf; opacity: 0;
  box-shadow: 0 -2px 5px 2px rgba(255,219,157,.85), 0 -4px 11px 4px rgba(255,175,74,.65);
  transition: opacity 360ms ease;
}
.light-wash {
  width: 136px; height: 90px; bottom: 25px; left: calc(50% - 68px);
  background:
    radial-gradient(ellipse 17px 20px at 50% 100%, rgba(255,239,193,.94), rgba(255,201,116,.54) 48%, transparent 100%),
    radial-gradient(ellipse 33px 51px at 50% 100%, rgba(255,182,83,.68), rgba(230,145,49,.26) 62%, transparent 100%),
    radial-gradient(ellipse 62px 77px at 50% 100%, rgba(233,155,70,.35), rgba(159,93,31,.075) 66%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent, #000 15%, #000 76%, transparent);
  opacity: 0;
  transition: opacity 380ms ease;
}
.light-pool {
  width: 58px; height: 9px; left: calc(50% - 29px); bottom: 2px;
  background: radial-gradient(ellipse, rgba(217,156,81,.24), rgba(164,101,39,.08) 48%, transparent 75%);
  opacity: 0; transition: opacity 380ms ease;
}
.topbar[data-lighting="uplight"] .nav-strip { opacity: 0; }
.topbar[data-lighting="uplight"] .nav-uplight { opacity: 1; }
.brand-light .nav-strip { top: calc(50% - 5px); bottom: auto; left: 12%; width: 76%; background: transparent; }
.brand-light .nav-strip::before,
.brand-light .nav-strip::after {
  top: 0; bottom: auto; width: 37%; height: 2px; border-radius: 50%;
  background: linear-gradient(90deg, rgba(129,190,156,.2), #b4dfc0 15%, #e1f0d2 50%, #b4dfc0 85%, rgba(129,190,156,.2));
  box-shadow: 0 0 3px rgba(197,232,189,.8), 0 0 8px 2px rgba(125,185,140,.35), 0 0 18px 4px rgba(113,163,124,.12);
}
.brand-light .nav-strip::before { left: 0; right: auto; }
.brand-light .nav-strip::after { left: auto; right: 0; }
.brand-light .light-fixture { height: 15px; bottom: 3px; }
.brand-light .light-lens {
  bottom: 16px; background: #e8d3ac;
  box-shadow: 0 -1px 3px 1px rgba(255,223,174,.4), 0 -3px 7px 2px rgba(224,172,102,.18);
}
.brand-light .light-wash {
  bottom: 16px; width: 100%; left: 0; height: 86px;
  background:
    radial-gradient(ellipse 20px 15px at 50% 100%, rgba(242,212,167,.24), transparent 100%),
    radial-gradient(ellipse 72px 65px at 50% 74%, rgba(224,183,125,.12), rgba(188,144,89,.06) 54%, transparent 100%),
    radial-gradient(ellipse 90px 42px at 50% 34%, rgba(234,206,167,.09), transparent 100%);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 88%, transparent);
}
.brand-light .light-pool { bottom: 0; background: radial-gradient(ellipse, rgba(217,175,114,.13), transparent 75%); }
.shell:has(#home.active) .topbar[data-lighting="strip"] .brand-light .nav-strip,
.shell:has(#home.active) .topbar[data-lighting="strip"] .brand-light .nav-strip::before,
.shell:has(#home.active) .topbar[data-lighting="strip"] .brand-light .nav-strip::after,
.shell:has(#home.active) .topbar[data-lighting="uplight"] .brand-light :is(.light-lens,.light-wash,.light-pool) { opacity: 1; }
.topbar[data-lighting="strip"] .nav button:is(.active,:focus-visible) .nav-strip { opacity: 1; }
.topbar[data-lighting="strip"] .nav button:is(.active,:focus-visible) .nav-strip::before,
.topbar[data-lighting="strip"] .nav button:is(.active,:focus-visible) .nav-strip::after,
.topbar[data-lighting="uplight"] .nav button:is(.active,:focus-visible) :is(.light-lens,.light-wash,.light-pool) { opacity: 1; }
@media (hover: hover) {
  .topbar .nav button:hover { color: #fff4e1; background: transparent; text-shadow: 0 1px 8px rgba(239,177,95,.35); }
  .topbar[data-lighting="strip"] .nav button:hover .nav-strip,
  .topbar[data-lighting="strip"] .nav button:hover .nav-strip::before,
  .topbar[data-lighting="strip"] .nav button:hover .nav-strip::after,
  .topbar[data-lighting="uplight"] .nav button:hover :is(.light-lens,.light-wash,.light-pool) { opacity: 1; }
}
.header-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.header-tools .quote { padding: 12px 17px; }
.lighting-toggle { display: flex; gap: 2px; padding: 2px; margin: 0; border: 1px solid rgba(184,177,154,.18); border-radius: 4px; }
.lighting-toggle label { position: relative; cursor: pointer; }
.lighting-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lighting-toggle span { display: flex; align-items: center; min-height: 26px; padding: 5px 8px; border-radius: 2px; font-size: 10px; line-height: 1.2; color: #9dada5; transition: color 300ms ease, background 300ms ease; }
.lighting-toggle input:checked + span { color: #ead3ad; background: rgba(190,143,70,.13); }
.lighting-toggle input:focus-visible + span { outline: 2px solid #dcc49c; outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1100px) and (min-width: 981px) {
  .topbar { grid-template-columns: 180px minmax(0,1fr) 176px; padding: 0 18px; }
  .topbar .nav { gap: 3px; }
  .topbar .nav button { font-size: 13px; }
}
@media (max-width: 980px) {
  .topbar { height: 142px; grid-template-columns: 1fr 178px; grid-template-rows: 76px 66px; padding: 0 16px; }
  .topbar .nav { display: flex; grid-column: 1 / -1; grid-row: 2; gap: 4px; justify-content: space-between; }
  .topbar .nav button { flex: 1; min-width: 0; font-size: 12px; }
  .topbar .nav-label { padding-top: 0; margin-top: -15px; }
  .nav-strip { bottom: 15px; left: 12%; width: 76%; }
  .light-fixture { height: 16px; width: 10px; left: calc(50% - 5px); bottom: 3px; }
  .light-lens { width: 8px; left: calc(50% - 4px); bottom: 18px; }
  .light-wash { bottom: 18px; height: 59px; width: 86px; left: calc(50% - 43px); }
  .light-pool { bottom: 0; width: 46px; left: calc(50% - 23px); }
  .header-tools { grid-column: 2; grid-row: 1; gap: 6px; }
  .header-tools .quote { padding: 9px 13px; }
  .lighting-toggle span { font-size: 10px; padding: 5px 7px; }
  .topbar .brand { width: 145px; padding-bottom: 18px; }
  .topbar .brand img { width: 120px; }
  .brand-light .nav-strip { left: 15%; width: 70%; }
  .brand-light .light-fixture { height: 11px; }
  .brand-light .light-lens { bottom: 13px; }
  .brand-light .light-wash {
    bottom: 13px; height: 61px;
    background:
      radial-gradient(ellipse 15px 12px at 50% 100%, rgba(242,212,167,.24), transparent 100%),
      radial-gradient(ellipse 55px 46px at 50% 74%, rgba(224,183,125,.12), rgba(188,144,89,.06) 54%, transparent 100%),
      radial-gradient(ellipse 66px 30px at 50% 34%, rgba(234,206,167,.09), transparent 100%);
  }
}
@media (max-width: 360px) {
  .topbar { padding: 0 10px; grid-template-columns: 1fr 165px; }
  .topbar .brand { width: 125px; }
  .topbar .brand img { width: 115px; }
  .brand-light .nav-strip { left: 11%; width: 78%; }
  .topbar .nav button { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar *, .topbar *::before, .topbar *::after { transition: none !important; }
}