/* Business Solution Agency facelift (Nov 4, 2026)
   Loaded after bsa.css on every page. Bolder brand colors, larger and darker text,
   tighter spacing, 3D buttons with slowly turning rims, larger icons in their bubbles,
   and the gold eyebrow bars, gradient titles and line shines used on futuredesignslights.com. */

@property --bf-spin{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --bf-x{syntax:'<percentage>';inherits:false;initial-value:-60%}

:root{
  --ink:#0A1438;--ink2:#14215A;--ink3:#1F2F78;
  --indigo:#3B2BFF;--indigo-d:#2716E0;--sky:#E6E2FF;
  --mango:#FFAE1A;--mango-d:#DB8A00;
  --mute:#3A4466;--soft:#5E688A;--line:#D2D9EA;--paper:#EFF2FA;
  --sec:clamp(20px,2.4vw,32px);
  --gold-grad:linear-gradient(90deg,#FFE29A 0%,#FFB52E 45%,#E08A00 100%);
  --title-grad:linear-gradient(100deg,#0A1438 0%,#1B2A86 55%,#3B2BFF 100%);
}

/* ---------- type: larger, darker, easier to read ---------- */
body{font-size:17px;line-height:1.58;color:var(--ink)}
small{font-size:max(13.5px,.9em)}
h1{letter-spacing:-.022em}
h2{font-size:clamp(28px,3.3vw,44px);letter-spacing:-.006em;line-height:1.08}
h3{font-size:20px;letter-spacing:0}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:#26305A;font-weight:500;max-width:64ch}
.hero .lead{color:#DCE2F5}
/* paragraphs right under a title */
.shead p,.shead h2+p,section:not(.legal):not(.locs) .wrap>h2+p,.story h2+p,.careers h2+p,.locs h2+p,.sgroup h2+p{font-size:clamp(17.5px,1.45vw,20px);line-height:1.5;color:#26305A;font-weight:500;max-width:64ch}
section.locs h2+p,section.locs p{color:#D7DDF2}
main section:not(.legal) h2+p{font-size:clamp(17.5px,1.45vw,20px);line-height:1.5}
.qside h2+p,.book h2+p,.contact h2+p,.tryit h2+p,.more h2+p{color:#26305A;font-weight:500}
.bb-copy h2+p{color:#DCE2F5}
.tdesc,.rbody small,.sdesc,.xtabs small,.area span,.way span{font-size:15px;color:var(--mute);line-height:1.45}
.tname{font-size:18px}
.rbody b{font-size:17.5px}
.feat p,.wcell p,.svc>p,.story p,.careers p,.legal p,.faqs details p{font-size:16.5px;color:var(--mute)}
.famc small{font-size:15.5px;color:var(--mute)}
.city small{font-size:13.5px}
.hint{font-size:14.5px}
.hfacts{font-size:15.5px;color:#DCE2F5}
.chip span{font-size:14.5px;font-weight:600}
.gfilter button{font-size:15px}
.pcount{font-size:16px;color:var(--mute)}
footer.site{font-size:15.5px;color:#D3DAF0}
footer h3{font-size:16.5px}
.fbase{font-size:14px}
.topbar{font-size:14px}
nav.main a,.dropbtn{font-size:16px;font-weight:600}
.q label,.q legend{font-size:15.5px}
.q input:not([type=checkbox]):not([type=radio]),.q textarea,.q select{font-size:16px}

/* ---------- titles: gradient ink, a little letter spacing, gold highlight ---------- */
.shead h2,.phead h1,.lhero h1,.story h2,.careers h2,.sgroup h2,.faq h2,.process h2,.tryit h2,.more h2,.book h2,.contact h2,.quote h2,.fam h2,.gal h2,.pick h2,.explore h2,.lighting h2{
  background:var(--title-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.phead h1,.lhero h1{letter-spacing:-.012em}
.hl-gold{background:linear-gradient(100deg,#F5A300 0%,#FFB52E 40%,#D97F00 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.locs h2{color:#fff}

/* eyebrow label with a shining gold bar, as on futuredesignslights.com */
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:800 13.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--indigo)}
.eyebrow::before{content:"";flex:none;width:38px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 100%) no-repeat,var(--gold-grad);
  background-size:40% 100%,100% 100%;background-position:var(--bf-x) 0,0 0;animation:bf-bar 4.5s ease-in-out infinite}
.locs .eyebrow,.hero .eyebrow{color:#B9B2FF}
@keyframes bf-bar{0%{--bf-x:-60%}55%,100%{--bf-x:160%}}

/* shining gold line under page titles */
.phead h1::after,.lhero h1::after{content:"";display:block;width:84px;height:4px;margin-top:14px;border-radius:4px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 100%) no-repeat,var(--gold-grad);
  background-size:40% 100%,100% 100%;background-position:var(--bf-x) 0,0 0;animation:bf-bar 5s ease-in-out infinite}

/* ---------- spacing: about half of what it was ---------- */
section{padding:var(--sec) 0}
.shead{margin-bottom:12px;gap:10px 24px}
.shead p{margin-top:6px}
.phead{padding:clamp(16px,2.2vw,26px) 0 clamp(14px,1.8vw,20px)}
.phead .lead,.lhero .lead{margin-top:10px}
.lhero{padding:clamp(16px,2.2vw,28px) 0}
.ctas{margin-top:14px}
.marquee{padding:9px 0}
.sgroup{padding:clamp(14px,1.8vw,22px) 0}
.sgroup h2{margin-bottom:10px}
.fam{padding:clamp(18px,2.2vw,28px) 0}
footer.site{padding-top:clamp(20px,2.4vw,30px)}
.fbase{margin-top:18px}
.tiles,.rtiles,.famgrid,.morerow,.areas,.cways{gap:10px}
.wgrid{gap:16px}
.feat{padding:16px}
.tile{padding:14px 14px 15px}
.svc{padding:16px}
.faqs summary{padding:12px 0}
.legal h2{margin:16px 0 4px}
@media(min-width:901px){.hfull .hstage{min-height:clamp(380px,32vw,540px);padding:clamp(20px,2.4vw,34px) 0}}
.board.wide{margin-top:clamp(10px,1.4vw,16px)}
.why{padding:clamp(16px,2vw,26px) 0}
.studio{padding:0}

/* ---------- bolder brand color on surfaces ---------- */
.pick,.lighting,.feats,.careers,.contact{background:linear-gradient(180deg,#EDF0FB 0%,#E7EBFA 100%)}
.quote{background:radial-gradient(60% 80% at 100% 0%,rgba(59,43,255,.10),transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(255,174,26,.14),transparent 60%),linear-gradient(180deg,#EEF1FB,#E5E9F7)}
.phead{background:radial-gradient(60% 120% at 100% 0%,rgba(59,43,255,.20),transparent 60%),radial-gradient(40% 90% at 0% 100%,rgba(255,174,26,.24),transparent 60%),#fff}
.tile,.feat,.svc,.famc,.area,.way,.rtile{border-color:#CDD4EA;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 24px -20px rgba(10,20,56,.55)}
.tile::before,.feat::before,.svc::before{content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--indigo),#7A6CFF 55%,var(--mango))}
.feat,.svc{position:relative}
.tile:hover,.feat:hover,.svc:hover,.area:hover,.way:hover{border-color:var(--indigo);box-shadow:0 18px 36px -22px rgba(59,43,255,.6)}
.marquee{background:linear-gradient(90deg,#0E1A52,#1F2F78 50%,#0E1A52)}

/* ---------- 3D buttons with slowly turning rims ---------- */
.btn{border:1.5px solid transparent;font-weight:700;letter-spacing:.005em;min-height:48px;padding:0 22px;
  animation:bf-spin 9s steps(180) infinite;transition:filter .2s,box-shadow .2s,transform .15s}
.btn.sm{min-height:42px;padding:0 17px;font-size:15px}
.btn .ic{width:20px;height:20px}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06) saturate(1.05)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.primary{color:#fff;text-shadow:0 1px 0 rgba(10,8,90,.35);
  background:linear-gradient(180deg,#7468FF 0%,#4433FF 48%,#2A18E0 100%) padding-box,
    conic-gradient(from var(--bf-spin),#C9C2FF,#2716E0,#FFD27A,#3B2BFF,#EDEBFF,#2716E0,#C9C2FF) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 6px rgba(18,6,140,.35),0 2px 0 #1D10B0,0 12px 24px -12px rgba(59,43,255,.8)}
.btn.primary:hover{background:linear-gradient(180deg,#8378FF 0%,#5243FF 48%,#3322EA 100%) padding-box,
    conic-gradient(from var(--bf-spin),#C9C2FF,#2716E0,#FFD27A,#3B2BFF,#EDEBFF,#2716E0,#C9C2FF) border-box}
.btn.mango{color:#1A1405;text-shadow:0 1px 0 rgba(255,255,255,.45);
  background:linear-gradient(180deg,#FFE39A 0%,#FFB52E 52%,#EB9300 100%) padding-box,
    conic-gradient(from var(--bf-spin),#FFF3CF,#C77A00,#FFE08A,#B36A00,#FFF6DA,#D98A00,#FFF3CF) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 6px rgba(160,90,0,.3),0 2px 0 #B97400,0 12px 24px -12px rgba(235,147,0,.85)}
.btn.mango:hover{background:linear-gradient(180deg,#FFEAB0 0%,#FFC04A 52%,#F29C00 100%) padding-box,
    conic-gradient(from var(--bf-spin),#FFF3CF,#C77A00,#FFE08A,#B36A00,#FFF6DA,#D98A00,#FFF3CF) border-box}
.btn.ghost{color:var(--ink);
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F5FD 55%,#E6E9F8 100%) padding-box,
    conic-gradient(from var(--bf-spin),#D7D2FF,#3B2BFF,#FFD27A,#9C92FF,#F1EFFF,#3B2BFF,#D7D2FF) border-box;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 5px rgba(10,20,56,.08),0 2px 0 #C8CFE6,0 10px 20px -14px rgba(10,20,56,.45)}
.btn.ghost:hover{color:var(--indigo-d)}
.btn.ghost-l,.locs .btn.ghost,.btn.ghost-d{color:#fff;
  background:linear-gradient(180deg,#2A3A86 0%,#18245E 55%,#0F1846 100%) padding-box,
    conic-gradient(from var(--bf-spin),rgba(255,255,255,.9),rgba(155,145,255,.75),#FFD27A,rgba(255,255,255,.4),rgba(255,255,255,.95),rgba(155,145,255,.75),rgba(255,255,255,.9)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 20px -14px rgba(0,0,0,.6)}
.btn.addq{animation:none}
@keyframes bf-spin{to{--bf-spin:360deg}}

/* chips, filters and pills: a light 3D look */
.chip span,.gfilter button,.slot span{background:linear-gradient(180deg,#fff,#F1F3FB);border-color:#CDD4EA;box-shadow:inset 0 1px 0 #fff,0 2px 4px -2px rgba(10,20,56,.25)}
.chip input:checked+span,.gfilter button[aria-pressed=true],.slot input:checked+span{background:linear-gradient(180deg,#24347E,#0A1438);border-color:#0A1438;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 10px -6px rgba(10,20,56,.7)}

/* ---------- icons: bigger glyphs, same bubble size ---------- */
.tic{background:radial-gradient(circle at 32% 26%,#FFFFFF 0%,#EFECFF 34%,#D9D3FF 72%,#C3BAFF 100%);color:var(--indigo-d);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 5px rgba(59,43,255,.2),0 4px 10px -6px rgba(59,43,255,.7);border:1px solid rgba(59,43,255,.22)}
.tic .ic{width:29px;height:29px;stroke-width:1.9}
.acc-ic .ic{width:28px;height:28px}
.chead .av .ic,.chead .av svg{width:24px;height:24px}
.lb-x .ic{width:26px;height:26px}
.burger .ic,.burger svg{width:26px;height:26px}
.steps b{font-size:16px}
.mini b{font-size:17px}
.sw{box-shadow:inset 0 1px 3px rgba(10,20,56,.25)}
/* plain icons in cards get a 3D bubble of their own */
.feat>.ic,.area>.ic,.wcell>.ic,.way>.ic{box-sizing:content-box;width:30px;height:30px;padding:9px;border-radius:14px;color:var(--indigo-d);
  background:radial-gradient(circle at 32% 26%,#FFFFFF 0%,#EFECFF 34%,#D9D3FF 72%,#C3BAFF 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 5px rgba(59,43,255,.2),0 4px 10px -6px rgba(59,43,255,.7);border:1px solid rgba(59,43,255,.22)}

/* ---------- logos: bigger at the top and in the footer ---------- */
.hbar{min-height:76px}
.logo .lbsa{width:138px;height:auto}
@media(min-width:901px){.hfull .hlogo{transform:translate(23%,0) scale(.66)}.hfull.intro .hlogo{transform:none}}
@media(min-width:901px) and (max-width:1200px){.hfull .hlogo{transform:translate(24%,0) scale(.6)}}

/* ---------- new: family work section ---------- */
.fdw{background:linear-gradient(180deg,#FFFDF7 0%,#FBF3E2 100%);border-top:1px solid #EFDDB6;border-bottom:1px solid #EFDDB6}
.fdw .eyebrow{color:#B26B00}
.fdw .shead h2{background:linear-gradient(100deg,#3B2A05 0%,#8A5A00 45%,#D98A00 100%);-webkit-background-clip:text;background-clip:text}
.fdw-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.fdw-facts li{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;font-weight:600;font-size:15px;color:#3B2A05;
  background:linear-gradient(180deg,#FFF6DD,#F7E3B4);border:1px solid #E7C77E;box-shadow:inset 0 1px 0 #fff}
.fdw-facts .ic{width:18px;height:18px;color:#B26B00}
.fdw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fdw-card{position:relative;display:block;border-radius:16px;overflow:hidden;text-decoration:none;color:#fff;background:#120C02;
  border:1.5px solid transparent;
  background:linear-gradient(#120C02,#120C02) padding-box,conic-gradient(from var(--bf-spin),#FFF3CF,#C77A00,#FFE08A,#B36A00,#FFF6DA,#D98A00,#FFF3CF) border-box;
  animation:bf-spin 9s steps(180) infinite;box-shadow:0 14px 28px -20px rgba(80,50,0,.8)}
.fdw-card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .3s;opacity:.92}
.fdw-card:hover img{transform:scale(1.05);opacity:1}
.fdw-card>span{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font:700 16.5px/1.2 var(--display);
  background:linear-gradient(180deg,rgba(10,7,0,0),rgba(10,7,0,.82))}
.fdw-card>span small{display:block;font:500 13.5px/1.3 var(--body);color:#F4E3BC;margin-top:2px}
.fdw .ctas{margin-top:14px}
@media(max-width:900px){.fdw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- phones ---------- */
@media(max-width:760px){
  body{font-size:16.5px}
  h2{font-size:clamp(26px,7vw,34px)}
  .lead{font-size:17.5px}
  .shead p,.shead h2+p,section .wrap>h2+p{font-size:17px}
  .tdesc,.rbody small{font-size:14px}
  .tname{font-size:16px}
  .rbody b{font-size:15.5px}
  .logo .lbsa{width:112px}
  .hbar{min-height:66px}
  .btn{min-height:46px;padding:0 18px}
  .eyebrow{font-size:12.5px;letter-spacing:.14em}
  .fdw-card span{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .btn,.fdw-card,.eyebrow::before,.phead h1::after,.lhero h1::after{animation:none}
}
/* footer headings in gold, tighter fact chips on phones */
footer h3{background:linear-gradient(100deg,#FFE29A 0%,#FFB52E 50%,#F0A010 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media(max-width:760px){.fdw-facts{gap:6px}.fdw-facts li{padding:5px 11px;font-size:14px}}

/* Nov 5: bigger, clearer header logo; larger hero buttons and logo; hero highlights as pills */
.logo .lbsa{width:176px;filter:drop-shadow(0 1px 1px rgba(10,20,56,.28)) contrast(1.1) saturate(1.15);transition:width .25s}
header.site.scrolled .logo .lbsa{width:132px}
.hero .ctas .btn{font-size:17.5px;min-height:54px;padding:0 26px}
.hero .ctas .btn .ic{width:21px;height:21px}
@media(min-width:1201px){.hfull .hlogo{transform:translate(25%,0) scale(.76)}}
@media(min-width:901px) and (max-width:1200px){.hfull .hlogo{transform:translate(26%,0) scale(.68)}}
.hero .hfacts{gap:8px;margin-top:18px;max-width:640px}
.hero .hfacts li{gap:8px;padding:7px 14px 7px 8px;border-radius:99px;font-size:16.5px;font-weight:600;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 14px -10px rgba(0,0,0,.7)}
.hero .hfacts .ic{width:22px;height:22px;padding:3px;box-sizing:border-box;border-radius:50%;color:#0A1438;background:radial-gradient(circle at 35% 30%,#B9FFE9,#3BE3B4 55%,#17B890);stroke-width:3}
@media(max-width:760px){.logo .lbsa{width:134px}header.site.scrolled .logo .lbsa{width:118px}.hero .ctas .btn{font-size:16.5px;min-height:50px;padding:0 20px}.hero .hfacts li{font-size:15px;padding:6px 12px 6px 7px}}

/* Nov 5: pearl 'See how we help' on the dark hero, champagne highlight pills, sky blue Future Designs Lights shop buttons */
.hero .btn.ghost-l{color:#1F12C9;text-shadow:0 1px 0 #fff;background:linear-gradient(180deg,#FFFFFF 0%,#F1F0FF 50%,#D8D5FF 100%) padding-box,conic-gradient(from var(--bf-spin),#FFE08A,#3B2BFF,#FFFFFF,#9C92FF,#FFD27A,#3B2BFF,#FFE08A) border-box;box-shadow:inset 0 1px 0 #fff,inset 0 -3px 6px rgba(59,43,255,.18),0 2px 0 #A9A2F0,0 0 0 4px rgba(155,145,255,.2),0 14px 28px -12px rgba(155,145,255,.9)}
.hero .btn.ghost-l:hover{color:#2716E0}
.hero .hfacts li{color:#241A05;font-weight:700;background:linear-gradient(180deg,#FFFBF1 0%,#F8EBCD 55%,#EFD9A6 100%);border:1px solid #E2BD6B;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(160,110,20,.18),0 8px 18px -12px rgba(0,0,0,.8)}
.hero .hfacts .ic{color:#fff;background:radial-gradient(circle at 35% 30%,#8C82FF,#3B2BFF 60%,#2716E0)}
a.btn[href*="futuredesignslights.com"]{color:#fff;text-shadow:0 1px 0 rgba(0,40,90,.4);background:linear-gradient(180deg,#6BD6FF 0%,#1FA3EE 50%,#0B72C6 100%) padding-box,conic-gradient(from var(--bf-spin),#E6F8FF,#0B72C6,#FFD27A,#36B8F5,#FFFFFF,#0B72C6,#E6F8FF) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,60,120,.3),0 2px 0 #0A5EA3,0 12px 24px -12px rgba(11,114,198,.85)}
a.btn[href*="futuredesignslights.com"]:hover{color:#fff}

/* Nov 5: turning rainbow rim on the Future Designs Lights buttons, as on the futuredesignslights.com Light Lab button */
a.btn[href*="futuredesignslights.com"]{border-width:2px;background:linear-gradient(180deg,#6BD6FF 0%,#1FA3EE 50%,#0B72C6 100%) padding-box,conic-gradient(from var(--bf-spin),#FF2929,#FFB13B,#29FF4A,#29D9FF,#2E5BFF,#C040FF,#FF2929) border-box;animation:bf-spin 6s linear infinite}
@media(prefers-reduced-motion:reduce){a.btn[href*="futuredesignslights.com"]{animation:none}}

/* Nov 5: header menu as 3D pills; current page in indigo with a gold bar */
nav.main ul{gap:6px}
nav.main a,.dropbtn{white-space:nowrap;font-size:16.5px;font-weight:700;color:#0A1438;padding:9px 14px;border-radius:12px;background:linear-gradient(180deg,#FFFFFF,#F1F3FC);border:1px solid #D6DCEE;box-shadow:inset 0 1px 0 #fff,0 2px 5px -2px rgba(10,20,56,.22)}
nav.main a:hover,.dropbtn:hover,.has-drop.open .dropbtn{color:#2716E0;border-color:#A9A2FF;background:linear-gradient(180deg,#FFFFFF,#ECEAFF)}
nav.main a[aria-current],.has-drop.cur .dropbtn{color:#fff;text-shadow:0 1px 0 rgba(10,8,90,.35);border-color:#2716E0;background:linear-gradient(180deg,#6A5DFF 0%,#3B2BFF 55%,#2716E0 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -8px rgba(59,43,255,.8)}
nav.main a[aria-current]::after,.has-drop.cur .dropbtn::after{left:16px;right:16px;bottom:-6px;height:3px;background:var(--gold-grad)}
.drop a{border:0;box-shadow:none;background:none}
@media(max-width:1280px){nav.main ul{gap:4px}nav.main a,.dropbtn{padding:8px 10px;font-size:15.5px}.logo .lbsa{width:150px}}

/* Nov 5: no bottom shadows on buttons; a soft even glow instead */
.btn.primary,.btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 2px rgba(91,77,255,.55),0 0 14px rgba(91,77,255,.5)}
.btn.mango,.btn.mango:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 2px rgba(255,176,40,.6),0 0 14px rgba(255,176,40,.55)}
.btn.ghost{box-shadow:inset 0 1px 0 #fff,0 0 2px rgba(122,108,255,.35),0 0 12px rgba(122,108,255,.3)}
.btn.ghost-l,.locs .btn.ghost,.btn.ghost-d{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 2px rgba(185,178,255,.45),0 0 14px rgba(155,145,255,.45)}
.hero .btn.ghost-l{box-shadow:inset 0 1px 0 #fff,0 0 2px rgba(205,200,255,.7),0 0 18px rgba(185,178,255,.6)}
a.btn[href*="futuredesignslights.com"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 2px rgba(31,163,238,.6),0 0 14px rgba(31,163,238,.55)}
nav.main a,.dropbtn{box-shadow:inset 0 1px 0 #fff,0 0 8px rgba(122,108,255,.16)}
nav.main a[aria-current],.has-drop.cur .dropbtn{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 12px rgba(91,77,255,.5)}
.chip span,.gfilter button,.slot span{box-shadow:inset 0 1px 0 #fff,0 0 6px rgba(122,108,255,.14)}
.chip input:checked+span,.gfilter button[aria-pressed=true],.slot input:checked+span{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 10px rgba(36,52,126,.45)}
.hero .hfacts li{box-shadow:inset 0 1px 0 #fff,0 0 10px rgba(255,214,140,.32)}

/* Nov 5: header logo on the footer's navy, as a badge */
.hbar .logo{padding:4px 12px;border-radius:14px;background:radial-gradient(120% 140% at 25% 15%,#1C2A66 0%,#0B1430 62%);border:1px solid rgba(255,210,122,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 12px rgba(59,43,255,.28)}
.hbar .logo .lbsa{filter:none;width:150px}
header.site.scrolled .hbar .logo .lbsa{width:120px}
@media(max-width:760px){.hbar .logo{padding:3px 9px;border-radius:12px}.hbar .logo .lbsa{width:118px}header.site.scrolled .hbar .logo .lbsa{width:104px}}

/* Nov 5: Built by Business Solution Agency band, 3D and classier; website cards that invite a click */
.bsa-built .bb-card{position:relative;overflow:hidden;isolation:isolate;border:1.5px solid transparent;background:radial-gradient(120% 140% at 0% 0%,#26388A 0%,#111C52 45%,#0A1230 100%) padding-box,conic-gradient(from var(--bf-spin),#FFE29A,#B36A00,#FFF6DA,#6A5DFF,#FFD27A,#B36A00,#FFE29A) border-box;animation:bf-spin 12s steps(240) infinite;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -30px 60px -30px rgba(0,0,0,.55),0 0 34px rgba(59,43,255,.28)}
.bsa-built .bb-card::before{content:"";position:absolute;z-index:-1;right:-12%;top:-30%;width:60%;height:120%;background:radial-gradient(closest-side,rgba(255,190,70,.22),transparent);pointer-events:none}
.bsa-built .bb-card::after{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(80% 90% at 70% 40%,#000,transparent);mask-image:radial-gradient(80% 90% at 70% 40%,#000,transparent);pointer-events:none}
.bsa-built .bb-kicker{padding:7px 15px;font-size:13px;letter-spacing:.14em;color:#3B2A05;background:linear-gradient(180deg,#FFF6DD 0%,#F7E1A8 55%,#EBC874 100%);border:1px solid #E7C77E;box-shadow:inset 0 1px 0 #fff,0 0 14px rgba(255,200,90,.4)}
.bsa-built .bb-card h2{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.008em;text-shadow:0 2px 18px rgba(91,77,255,.45)}
.bsa-built .bb-card h2 .hl-gold{text-shadow:none}
.bsa-built .bb-card p{color:#D6DCF3;font-size:clamp(17px,1.4vw,19px)}
.bsa-built .bb-cta .btn.ghost-d{border-color:transparent;background:linear-gradient(180deg,#2A3A86 0%,#18245E 55%,#0F1846 100%) padding-box,conic-gradient(from var(--bf-spin),rgba(255,255,255,.9),rgba(155,145,255,.75),#FFD27A,rgba(255,255,255,.4),rgba(255,255,255,.95),rgba(155,145,255,.75),rgba(255,255,255,.9)) border-box}
.bsa-built .bb-sites{gap:12px}
.bsa-built .bb-sites .bb-site{position:relative;overflow:hidden;display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;padding:12px 14px 12px 12px;border-radius:18px;border:1.5px solid transparent;background:linear-gradient(180deg,#24357F 0%,#15205A 100%) padding-box,conic-gradient(from var(--bf-spin),#FFE29A,#6A5DFF,#FFFFFF,#B36A00,#FFD27A,#6A5DFF,#FFE29A) border-box;animation:bf-spin 9s steps(180) infinite;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 18px rgba(155,145,255,.3);transition:transform .25s,box-shadow .25s}
.bsa-built .bb-sites .bb-site:hover,.bsa-built .bb-sites .bb-site:focus-visible{transform:translateY(-3px);background:linear-gradient(180deg,#2A3C8C 0%,#18245F 100%) padding-box,conic-gradient(from var(--bf-spin),#FFE29A,#6A5DFF,#FFFFFF,#B36A00,#FFD27A,#6A5DFF,#FFE29A) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 26px rgba(255,200,90,.45)}
.bsa-built .bb-sites .bb-site::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.2),rgba(255,255,255,0));transform:skewX(-20deg);transition:left .8s ease;pointer-events:none}
.bsa-built .bb-sites .bb-site:hover::after{left:130%}
.bb-shot{display:block;border-radius:10px;overflow:hidden;background:#0A1230;border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 20px -12px rgba(0,0,0,.9)}
.bb-shot::before{content:"";display:block;height:14px;background:radial-gradient(circle at 9px 7px,#FF5F57 2.6px,transparent 3px),radial-gradient(circle at 19px 7px,#FEBC2E 2.6px,transparent 3px),radial-gradient(circle at 29px 7px,#28C840 2.6px,transparent 3px),linear-gradient(180deg,#F3F5FB,#DCE1EE)}
.bb-shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s}
.bb-site:hover .bb-shot img{transform:scale(1.07)}
.bb-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.bsa-built .bb-sites .bb-site b{font:800 clamp(18px,1.5vw,21px)/1.15 var(--display);color:#fff;overflow-wrap:anywhere}
.bsa-built .bb-sites .bb-site b::after{content:none}
.bsa-built .bb-sites .bb-site small{color:#CBD3EE;font-size:15px;line-height:1.4}
.bb-go{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:99px;font-weight:800;font-size:14.5px;color:#1A1405;background:linear-gradient(180deg,#FFE39A 0%,#FFB52E 55%,#EB9300 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 12px rgba(255,176,40,.55);transition:filter .2s}
.bb-site.fdl .bb-go{color:#fff;text-shadow:0 1px 0 rgba(0,40,90,.4);background:linear-gradient(180deg,#6BD6FF 0%,#1FA3EE 50%,#0B72C6 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 12px rgba(31,163,238,.6)}
.bb-go .ic{width:17px;height:17px;stroke-width:2.4}
.bb-site:hover .bb-go{filter:brightness(1.08)}
.bsa-built .bb-sites .bb-more{display:inline-flex;align-items:center;gap:6px;padding:4px 2px;color:#FFD27A;font-weight:700;font-size:15px;text-decoration:none}
.bsa-built .bb-sites .bb-more:hover{color:#FFE7A8;text-decoration:underline}
.bsa-built .bb-more .ic{width:17px;height:17px}
@media(max-width:560px){.bsa-built .bb-sites .bb-site{grid-template-columns:108px minmax(0,1fr);gap:12px;padding:10px}}
@media(prefers-reduced-motion:reduce){.bsa-built .bb-card,.bsa-built .bb-sites .bb-site{animation:none}}

/* Nov 5: Add to my quote, a bold emerald 3D button; On your list in navy */
.btn.addq{min-height:46px;padding:0 18px 0 8px;font-size:15.5px;font-weight:800;color:#fff;text-shadow:0 1px 0 rgba(0,70,50,.35);border:1.5px solid transparent;background:linear-gradient(180deg,#4BE0B6 0%,#17B890 50%,#0E9473 100%) padding-box,conic-gradient(from var(--bf-spin),#E6FFF6,#0E9473,#FFD27A,#2FD3A2,#FFFFFF,#0E9473,#E6FFF6) border-box;animation:bf-spin 9s steps(180) infinite;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 2px rgba(23,184,144,.6),0 0 14px rgba(23,184,144,.5)}
.btn.addq:hover{color:#fff;filter:brightness(1.07) saturate(1.05)}
.btn.addq .ic{width:26px;height:26px;padding:5px;box-sizing:border-box;border-radius:50%;background:#fff;color:#0E9473;stroke-width:3;box-shadow:0 0 0 1px rgba(255,255,255,.6),0 2px 6px -2px rgba(0,70,50,.5)}
.btn.addq.on{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3);background:linear-gradient(180deg,#2A3A86 0%,#14205A 55%,#0A1438 100%) padding-box,conic-gradient(from var(--bf-spin),#B9FFE9,#17B890,#FFD27A,#3BE3B4,#FFFFFF,#17B890,#B9FFE9) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 2px rgba(59,227,180,.6),0 0 14px rgba(59,227,180,.45)}
.btn.addq.on .ic{background:radial-gradient(circle at 35% 30%,#B9FFE9,#3BE3B4 55%,#17B890);color:#0A1438}
@media(prefers-reduced-motion:reduce){.btn.addq{animation:none}}

/* Nov 5: keep each website name on one line */
.bsa-built .bb-sites .bb-site{grid-template-columns:136px minmax(0,1fr)}
.bsa-built .bb-sites .bb-site b{white-space:nowrap;overflow-wrap:normal;font-size:clamp(16px,1.2vw,19px)}
@media(max-width:560px){.bsa-built .bb-sites .bb-site{grid-template-columns:96px minmax(0,1fr)}.bsa-built .bb-sites .bb-site b{font-size:15.5px}}

/* Nov 5: richer, less saturated brand colors (deeper indigo, warmer gold, softer azure and jade) */
:root{--indigo:#4338E0;--indigo-d:#2F25B8;--mango:#F4AE36;--mango-d:#D18A12;--title-grad:linear-gradient(100deg,#0A1438 0%,#1D2A80 55%,#4338E0 100%);--gold-grad:linear-gradient(90deg,#FFE2A0 0%,#F2B04A 45%,#D18A12 100%)}
.hl-gold{background:linear-gradient(100deg,#E39A14 0%,#F2B04A 45%,#C98112 100%);-webkit-background-clip:text;background-clip:text}
.btn.primary{background:linear-gradient(180deg,#6E66F0 0%,#4A40E2 50%,#3329C2 100%) padding-box,conic-gradient(from var(--bf-spin),#CFCBFA,#2F25B8,#F6D58E,#4A40E2,#EEEDFF,#2F25B8,#CFCBFA) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 0 2px rgba(74,64,226,.5),0 0 14px rgba(74,64,226,.42)}
.btn.primary:hover{background:linear-gradient(180deg,#7A72F3 0%,#554BE6 50%,#3A30CB 100%) padding-box,conic-gradient(from var(--bf-spin),#CFCBFA,#2F25B8,#F6D58E,#4A40E2,#EEEDFF,#2F25B8,#CFCBFA) border-box}
.btn.mango{background:linear-gradient(180deg,#FFE6A8 0%,#F6B544 52%,#DB9118 100%) padding-box,conic-gradient(from var(--bf-spin),#FFF3D6,#B97808,#FFE3A0,#A86A06,#FFF6E0,#C98112,#FFF3D6) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 2px rgba(240,170,60,.55),0 0 14px rgba(240,170,60,.45)}
.btn.mango:hover{background:linear-gradient(180deg,#FFEBB8 0%,#F8BE58 52%,#E39A22 100%) padding-box,conic-gradient(from var(--bf-spin),#FFF3D6,#B97808,#FFE3A0,#A86A06,#FFF6E0,#C98112,#FFF3D6) border-box}
a.btn[href*="futuredesignslights.com"]{background:linear-gradient(180deg,#6CC6EE 0%,#2E93D3 52%,#1B6AA8 100%) padding-box,conic-gradient(from var(--bf-spin),#FF2929,#FFB13B,#29FF4A,#29D9FF,#2E5BFF,#C040FF,#FF2929) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 2px rgba(46,147,211,.55),0 0 14px rgba(46,147,211,.45)}
.bb-site.fdl .bb-go{background:linear-gradient(180deg,#6CC6EE 0%,#2E93D3 52%,#1B6AA8 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 12px rgba(46,147,211,.5)}
.bb-go{background:linear-gradient(180deg,#FFE6A8 0%,#F6B544 52%,#DB9118 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 12px rgba(240,170,60,.45)}
.btn.addq{background:linear-gradient(180deg,#4CCFA9 0%,#1EA582 52%,#127F64 100%) padding-box,conic-gradient(from var(--bf-spin),#E3F8F0,#127F64,#F6D58E,#34BF97,#FFFFFF,#127F64,#E3F8F0) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 2px rgba(30,165,130,.55),0 0 14px rgba(30,165,130,.42)}
.btn.addq .ic{color:#127F64}
.hero .btn.ghost-l{color:#3329C2}
.hero .hfacts .ic{background:radial-gradient(circle at 35% 30%,#8F88F2,#4A40E2 60%,#3329C2)}
nav.main a[aria-current],.has-drop.cur .dropbtn{border-color:#2F25B8;background:linear-gradient(180deg,#6E66F0 0%,#4A40E2 55%,#3329C2 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 12px rgba(74,64,226,.42)}
nav.main a:hover,.dropbtn:hover,.has-drop.open .dropbtn{color:#3329C2;border-color:#B4AEF2;background:linear-gradient(180deg,#FFFFFF,#EEEDFD)}
.tic,.feat>.ic,.area>.ic,.wcell>.ic,.way>.ic{color:#3329C2;background:radial-gradient(circle at 32% 26%,#FFFFFF 0%,#F0EFFD 34%,#DCD9F8 72%,#C7C2F2 100%);border-color:rgba(74,64,226,.24)}
.pick,.lighting,.feats,.careers,.contact{background:linear-gradient(180deg,#EAEEF9 0%,#E3E8F6 100%)}

/* Nov 5: no background behind the header logo; transparent header bar (frosted only after scrolling) */
.hbar .logo{padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.hbar .logo .lbsa{width:170px;filter:drop-shadow(0 1px 1px rgba(10,20,56,.28)) contrast(1.1) saturate(1.15)}
header.site.scrolled .hbar .logo .lbsa{width:128px}
header.site{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;box-shadow:none}
header.site.scrolled{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 6px 24px -18px rgba(10,20,56,.45)}
@media(max-width:1280px){.hbar .logo .lbsa{width:150px}}
@media(max-width:760px){.hbar .logo{padding:0}.hbar .logo .lbsa{width:132px}header.site.scrolled .hbar .logo .lbsa{width:116px}}

/* Nov 5: header buttons in navy and gold (no violet); icon bubbles in one smooth blue */
nav.main a,.dropbtn{color:#0A1438;background:linear-gradient(180deg,#FFFFFF,#F2F4F8);border-color:#D9DEEA;box-shadow:inset 0 1px 0 #fff,0 0 8px rgba(10,20,56,.08)}
nav.main a:hover,.dropbtn:hover,.has-drop.open .dropbtn{color:#0A1438;border-color:#E2BD6B;background:linear-gradient(180deg,#FFFFFF,#FBF4E3);box-shadow:inset 0 1px 0 #fff,0 0 10px rgba(226,189,107,.35)}
nav.main a[aria-current],.has-drop.cur .dropbtn{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3);border-color:#0A1438;background:linear-gradient(180deg,#2C3D86 0%,#18265E 55%,#0A1438 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 12px rgba(20,33,90,.35)}
header.site .btn.primary{color:#1A1405;text-shadow:0 1px 0 rgba(255,255,255,.45);background:linear-gradient(180deg,#FFE6A8 0%,#F6B544 52%,#DB9118 100%) padding-box,conic-gradient(from var(--bf-spin),#FFF3D6,#B97808,#FFE3A0,#A86A06,#FFF6E0,#C98112,#FFF3D6) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 2px rgba(240,170,60,.55),0 0 14px rgba(240,170,60,.45)}
header.site .btn.primary:hover{background:linear-gradient(180deg,#FFEBB8 0%,#F8BE58 52%,#E39A22 100%) padding-box,conic-gradient(from var(--bf-spin),#FFF3D6,#B97808,#FFE3A0,#A86A06,#FFF6E0,#C98112,#FFF3D6) border-box}
.tic,.feat>.ic,.area>.ic,.wcell>.ic,.way>.ic{color:#1A5DB4;background:radial-gradient(circle at 32% 26%,#FFFFFF 0%,#EEF5FD 32%,#D6E7F9 68%,#BCD6F3 100%);border-color:rgba(26,93,180,.22);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 5px rgba(26,93,180,.16),0 4px 10px -6px rgba(26,93,180,.55)}

/* Nov 5: checkmarks as FDL gold bubbles (glossy gold orb, white ring, gold rim, white check outlined in bronze, pop + glow on hover) */
.ticks .ic,.hero .hfacts .ic,.btn.addq .on .ic{
  padding:0;box-sizing:border-box;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.8l4.4 4.4 9.6-9.8' stroke='%238A4B00' stroke-width='5.8'/%3E%3Cpath d='M5 12.8l4.4 4.4 9.6-9.8' stroke='%23FFFFFF' stroke-width='3.3'/%3E%3C/g%3E%3C/svg%3E") center/84% 84% no-repeat,radial-gradient(circle at 35% 28%,#FFF0C9 0%,#F7C872 42%,#E3A146 78%,#C98A33 100%);
  box-shadow:0 0 0 1.5px #fff,0 0 0 2.75px #E3A146,0 0 7px rgba(227,161,70,.45);
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s
}
.ticks .ic path,.hero .hfacts .ic path,.btn.addq .on .ic path{stroke:transparent}
.ticks li{gap:12px}
.ticks .ic{width:22px;height:22px;flex:0 0 22px;margin-top:2px}
.hero .hfacts li{gap:10px;padding-left:9px}
.hero .hfacts .ic{width:22px;height:22px}
.btn.addq .on .ic{width:26px;height:26px}
.ticks li:hover .ic,.hero .hfacts li:hover .ic,.btn.addq:hover .on .ic{transform:scale(1.12) rotate(-8deg);box-shadow:0 0 0 1.5px #fff,0 0 0 2.75px #E3A146,0 0 12px rgba(240,184,96,.75)}
@media(prefers-reduced-motion:reduce){.ticks .ic,.hero .hfacts .ic,.btn.addq .on .ic{transition:none}.ticks li:hover .ic,.hero .hfacts li:hover .ic,.btn.addq:hover .on .ic{transform:none}}
/* Nov 5: bigger section labels with tighter label spacing, footer icon bubbles, brighter BSA logo, larger service-card text */
.eyebrow{font-size:clamp(15.5px,1.15vw,17px);line-height:1.15;letter-spacing:.06em;gap:10px}
.eyebrow::before{width:32px}
@media(max-width:760px){.eyebrow{font-size:15px;letter-spacing:.05em}}
.bsa-built .bb-kicker{font-size:14.5px;letter-spacing:.06em}
.svc h3{font-size:clamp(22px,1.7vw,25px)}
.svc-t{font-size:clamp(16px,1.2vw,17.5px)}
.svc>p{font-size:clamp(16.5px,1.25vw,18px);line-height:1.55}
.svc .ticks li{font-size:clamp(17px,1.25vw,18px)}
.fcontact li,.fcontact a{gap:12px}
.fcontact .ic{
  width:34px;height:34px;flex:0 0 34px;padding:8px;box-sizing:border-box;border-radius:50%;
  color:#FFD866;stroke-width:2.1;
  background:radial-gradient(circle at 35% 28%,#4462C8 0%,#22358A 42%,#131F55 78%,#0A1236 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.45),0 0 0 1.5px rgba(255,255,255,.16),0 0 0 3px rgba(226,189,107,.9),0 0 12px rgba(255,200,90,.3);
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,color .3s
}
.fcontact li:hover .ic,.fcontact a:hover .ic{color:#FFE48F;transform:scale(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.45),0 0 0 1.5px rgba(255,255,255,.22),0 0 0 3px #F2C96E,0 0 18px rgba(255,200,90,.55)}
@media(prefers-reduced-motion:reduce){.fcontact .ic{transition:none}.fcontact li:hover .ic,.fcontact a:hover .ic{transform:none}}
/* Nov 5: brighter BSA logo (approved) in header and footer */
.hbar .logo .lbsa{filter:drop-shadow(0 1px 1px rgba(10,20,56,.3)) brightness(1.2) saturate(1.35) contrast(1.04)}
.logo.foot img{filter:brightness(1.2) saturate(1.35) contrast(1.04) drop-shadow(0 0 14px rgba(90,170,255,.22))}
/* Nov 5: menu buttons glossy 3D, current page in bright logo blue (no dark navy) */
nav.main>ul>li>a,.dropbtn{
  color:#0A1438;border:1.5px solid transparent;
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F9FF 46%,#E1E9F8 100%) padding-box,linear-gradient(180deg,#FFFFFF 0%,#C4D2EE 55%,#97ACD9 100%) border-box;
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 5px rgba(40,80,170,.14),0 0 0 1px rgba(255,255,255,.6),0 0 12px rgba(42,120,230,.18);
  transition:transform .2s ease,box-shadow .25s ease,color .2s ease
}
nav.main>ul>li>a:hover,.dropbtn:hover,.has-drop.open .dropbtn{
  color:#0A1438;transform:translateY(-1px);
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF8E8 50%,#F7E2AE 100%) padding-box,conic-gradient(from var(--bf-spin),#FFF3D6,#C98112,#FFE3A0,#A86A06,#FFF6E0,#C98112,#FFF3D6) border-box;
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 5px rgba(170,110,20,.18),0 0 0 1px rgba(255,255,255,.6),0 0 16px rgba(240,180,70,.45);
  animation:bf-spin 9s steps(180) infinite
}
nav.main>ul>li>a[aria-current],.has-drop.cur .dropbtn{
  color:#fff;text-shadow:0 1px 1px rgba(6,40,110,.55);
  background:linear-gradient(180deg,#86CBFF 0%,#43A2F5 40%,#1E77DD 76%,#1563C6 100%) padding-box,conic-gradient(from var(--bf-spin),#EAF6FF,#1563C6,#FFD27A,#62B6FF,#FFFFFF,#1563C6,#EAF6FF) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -4px 8px rgba(8,45,130,.38),0 0 0 1px rgba(255,255,255,.4),0 0 18px rgba(42,139,234,.55);
  animation:bf-spin 9s steps(180) infinite
}
nav.main>ul>li>a[aria-current]:hover,.has-drop.cur .dropbtn:hover{color:#fff;transform:translateY(-1px);filter:brightness(1.07)}
@media(prefers-reduced-motion:reduce){nav.main>ul>li>a,.dropbtn{transition:none;animation:none}nav.main>ul>li>a:hover,.dropbtn:hover{transform:none}}
/* Nov 5: white contact info in the top bar; hero on the same navy as the office clocks; white clock labels */
.topbar a:not(.tb-cta),.topbar a:not(.tb-cta) .ic{color:#fff}
.hstage{background:#0A1438}
.hplate{background:#0A1438}
.hshade{background:linear-gradient(90deg,rgba(10,20,56,.94) 0%,rgba(10,20,56,.84) 38%,rgba(10,20,56,.3) 64%,rgba(10,20,56,0) 100%)}
.hlogo{mix-blend-mode:lighten}
@media(max-width:900px){.hlogo{background:transparent}}
.city small{color:#fff}
.board .st{color:rgba(255,255,255,.9)}
.board .on .st{color:#3BE3B4}
.board .bfoot{color:#DCE2F4}
/* Nov 5: mouse glow across the whole hero (logo stage + clock panel), centered on the pointer; bigger static hero logo */
.hero{--gx:55.7143%;--gy:15.7143%}
.hero::before{background:radial-gradient(420px 320px at calc(var(--gx) + 14.2857%) calc(var(--gy) + 14.2857%),rgba(74,58,255,.55),transparent 70%),radial-gradient(380px 300px at 12% 110%,rgba(255,181,46,.32),transparent 70%),radial-gradient(500px 360px at 95% 100%,rgba(23,184,144,.18),transparent 70%)}
.hstage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(420px 320px at var(--gx) var(--gy),rgba(74,58,255,.55),transparent 70%);opacity:0;transition:opacity .35s ease}
.hero.glow-on .hstage::after{opacity:1}
@media(min-width:1201px){.hfull .hlogo{transform:translate(26%,0) scale(.86)}}
@media(min-width:901px) and (max-width:1200px){.hfull .hlogo{transform:translate(27%,0) scale(.76)}}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){.hfull.intro .hlogo{transform:none}}