/* Clean Bee Consulting — shared presentation styles. Page content lives in each page's HTML. */
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}
.cb-skip{position:absolute;left:12px;top:-60px;z-index:100;background:#FDBE10;color:#0E0D0B;font:600 15px Poppins,Arial,sans-serif;padding:10px 16px;border-radius:999px;text-decoration:none}
.cb-skip:focus{top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #FDBE10;outline-offset:3px}
.cb-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
nav[aria-label="On this page"] a[aria-current="true"]{color:#FDBE10!important}
/* Motion (added only when the script runs; content is visible without it) */
.cb-js .cb-up{opacity:0;transform:translateY(22px)}
.cb-js .cb-up.cb-in{opacity:1;transform:none;transition:opacity .6s ease var(--d,0ms),transform .6s ease var(--d,0ms)}
.cb-js .cb-pop{opacity:0;transform:scale(.45)}
.cb-js .cb-pop.cb-in{opacity:1;transform:none;transition:opacity .4s ease var(--d,0ms),transform .6s cubic-bezier(.34,1.56,.64,1) var(--d,0ms)}
.cb-js .cb-hub.cb-in{animation:cbPulse 1.4s ease calc(var(--d,0ms) + 500ms) 2}
@keyframes cbPulse{0%,100%{filter:none}50%{filter:drop-shadow(0 0 14px rgba(253,190,16,.85)) brightness(1.15)}}
.cb-js .cb-line{transform:scaleX(0);transform-origin:left center}
.cb-js .cb-line.cb-in{transform:none;transition:transform .55s ease var(--d,0ms)}
.cb-strike{background:linear-gradient(#C8961A,#C8961A) no-repeat 0 60%/0% 2px;transition:background-size .45s ease var(--d,0ms)}
.cb-strike.cb-in{background-size:100% 2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.cb-js .cb-up,.cb-js .cb-pop{opacity:1;transform:none}.cb-js .cb-line{transform:none}}
/* Small screens: let wide flex columns shrink, and scale the honeycomb diagram to fit. */
main [style*="flex: 1 1"]{min-width:0}
@media (max-width:640px){
  main [style*="flex: 1 1 5"],main [style*="flex: 1 1 6"],main [style*="flex: 1 1 4"]{flex-basis:100%!important}
  [role="img"][aria-label^="A honeycomb"]{zoom:.62}
}

/* Header logo: the Clean Bee bee mark on a transparent background, so it blends into the dark header */
.cb-logo{display:block;height:80px;width:auto}
@media (max-width:640px){.cb-logo{height:60px}}

/* Main menu: larger, bolder, gold, so it reads as the primary navigation */
nav[aria-label="Main"] > div{font-size:16.5px!important;gap:8px 30px!important}
nav[aria-label="Main"] > div > a:not([style*="background"]){color:#FDBE10!important;font-weight:600!important;letter-spacing:.01em;position:relative;padding:6px 0!important;border-bottom:0!important}
nav[aria-label="Main"] > div > a:not([style*="background"])::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#FDBE10;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
nav[aria-label="Main"] > div > a:not([style*="background"]):hover{color:#FBF6EC!important}
nav[aria-label="Main"] > div > a:not([style*="background"]):hover::after,nav[aria-label="Main"] > div > a[aria-current="page"]::after{transform:scaleX(1)}
nav[aria-label="Main"] > div > a[style*="background"]{font-size:15.5px!important;font-weight:700!important}
/* "On this page" bar: quieter and on a lighter panel, so it reads as a secondary menu */
div:has(> div > nav[aria-label="On this page"]){background:rgba(31,27,21,.97)!important;border-bottom:1px solid #3A3328!important}
nav[aria-label="On this page"]{font-size:13px!important}
nav[aria-label="On this page"] a{color:#CFC6B3!important;font-weight:500}
nav[aria-label="On this page"] a:hover{color:#FBF6EC!important}
nav[aria-label="On this page"] a[aria-current="true"]{color:#FDBE10!important;font-weight:600}
@media (max-width:640px){nav[aria-label="Main"] > div{font-size:15.5px!important;gap:6px 20px!important}}

/* "3 ways to work with us" arrow */
.cb-bounce{display:inline-block}
@media (prefers-reduced-motion:no-preference){.cb-bounce{animation:cbBounce 1.8s ease-in-out infinite}}
@keyframes cbBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- Where the hive works: state hexagon map ---------- */
.cb-where{display:flex;flex-direction:column;gap:22px}
.cb-where-row{display:flex;flex-wrap:wrap;gap:32px;align-items:center}
.cb-map-col{flex:3 1 520px;min-width:0;display:flex;flex-direction:column;gap:16px}
.cb-map{position:relative;width:100%;aspect-ratio:12.5/7.217}
.cb-st{position:absolute;left:calc((var(--c) + var(--s)*.5)*8% + .25%);top:calc(var(--r)*12% + .45%);width:7.5%;height:15.1%;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:Poppins,Arial,sans-serif;line-height:1.15;text-align:center}
.cb-st b{font-size:clamp(7px,1.05vw,12px);font-weight:700;letter-spacing:.03em}
.cb-st span{font-size:clamp(6px,.9vw,10.5px);font-weight:600}
.cb-st.t0{background:#E6DCC8;color:#8A7E68}.cb-st.t0 b{font-weight:600}
.cb-st.t1{background:#F6E7A6;color:#2A1F12}
.cb-st.t2{background:#F2D262;color:#2A1F12}
.cb-st.t5{background:#EBBC33;color:#1A1712}
.cb-st.t10{background:#0E0D0B;color:#FDBE10}
.cb-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;color:#5E5444}
.cb-legend span{display:inline-flex;align-items:center;gap:7px}
.cb-legend i{width:13px;height:15px;display:inline-block;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.cb-legend i.t0{background:#E6DCC8}.cb-legend i.t1{background:#F6E7A6}.cb-legend i.t2{background:#F2D262}.cb-legend i.t5{background:#EBBC33}.cb-legend i.t10{background:#0E0D0B}
.cb-top{flex:1 1 220px;max-width:340px;background:#FFFFFF;border:1px solid #E2D6BF;border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.cb-top-label{font-size:11px;font-weight:700;letter-spacing:.2em;color:#7A5A12}
.cb-top-row{display:grid;grid-template-columns:1fr auto;row-gap:6px;font-size:14px}
.cb-top-name{font-weight:600}.cb-top-num{font-weight:700}
.cb-top-track{grid-column:1/-1;height:7px;background:#EFE6D3;border-radius:999px;overflow:hidden}
.cb-bar{display:block;height:100%;border-radius:999px}.cb-bar.dark{background:#0E0D0B}.cb-bar.gold{background:#EBBC33}
.cb-top-note{margin:4px 0 0;font-size:12px;line-height:1.5;color:#5E5444}
@media (max-width:640px){.cb-top{max-width:none}}

/* ---------- Who's in the hive: industry honeycomb ---------- */
.cb-ind-comb{--hw:min(124px,calc((100vw - 72px)/4.6));display:flex;flex-direction:column;align-items:center;min-width:0}
.cb-ind-row{display:flex;gap:6px}
.cb-ind-row + .cb-ind-row{margin-top:calc(var(--hw)/.866*-.22)}
.cb-ind-row.shift{transform:translateX(calc(var(--hw)/2 + 3px))}
.cb-ind{width:var(--hw);aspect-ratio:.866;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;box-sizing:border-box;gap:3px;font-family:Poppins,Arial,sans-serif}
.cb-ind b{font-size:calc(var(--hw)*.22);font-weight:800;line-height:1}
.cb-ind span{font-size:clamp(8px,calc(var(--hw)*.085),11px);font-weight:600;line-height:1.25}
.cb-ind.t10{background:#0E0D0B;color:#FDBE10}
.cb-ind.t5{background:#EBBC33;color:#1A1712}
.cb-ind.t2.t3{background:#F2D262;color:#1A1712}
.cb-ind.t2:not(.t3),.cb-ind.t1{background:#F6E7A6;color:#1A1712}

/* About timeline: swipeable year cards (added by the script; the vertical timeline shows without it) */
#evolution.cb-yr-on > div{flex-direction:column;flex-wrap:nowrap;gap:28px}
#evolution.cb-yr-on > div > div:first-child{position:static!important;flex:0 0 auto!important;max-width:760px}
#evolution.cb-yr-on .cb-tl-marker{display:none!important}
.cb-yr-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;width:100%}
.cb-yr-tabs{display:flex;flex-wrap:wrap;gap:8px 18px}
.cb-yr-tab{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:9px;font-family:Poppins,Arial,sans-serif;opacity:.5;transition:opacity .25s ease}
.cb-yr-tab:hover,.cb-yr-tab.done{opacity:.8}
.cb-yr-tab[aria-current="step"]{opacity:1}
.cb-yr-tab:focus-visible{outline:3px solid #FDBE10;outline-offset:3px}
.cb-yr-hex{width:30px;height:34px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.cb-yr-name{font-size:12px;font-weight:700;letter-spacing:.14em;color:#7A5A12;text-transform:uppercase}
.cb-yr-tab[aria-current="step"] .cb-yr-name{color:#1A1712}
.cb-yr-arrows{display:flex;gap:10px}
.cb-yr-arrow{all:unset;cursor:pointer;width:44px;height:44px;border-radius:999px;background:#0E0D0B;color:#FDBE10;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;transition:opacity .2s ease,transform .2s ease}
.cb-yr-arrow:hover{transform:scale(1.06)}
.cb-yr-arrow:disabled{opacity:.25;cursor:default;transform:none}
.cb-yr-arrow:focus-visible{outline:3px solid #FDBE10;outline-offset:3px}
.cb-yr-track{display:flex!important;flex-direction:row!important;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;width:100%;flex:0 0 auto!important;padding:4px 2px 8px;scroll-padding-left:2px}
.cb-yr-track::-webkit-scrollbar{display:none}
.cb-yr-track:focus-visible{outline:3px solid #FDBE10;outline-offset:6px;border-radius:18px}
.cb-yr-track::after{content:"";flex:0 0 1px}
.cb-yr-card{flex:0 0 min(640px,86%)!important;scroll-snap-align:start;background:#FBF6EC;border:1px solid #E2D6BF;border-radius:18px;padding:clamp(22px,3vw,34px);box-sizing:border-box;opacity:.38;transition:opacity .35s ease}
.cb-yr-card.cb-tl-current{opacity:1}
.cb-yr-card > div:last-child{padding-bottom:0!important;max-width:none!important}
.cb-yr-hint{margin:-8px 0 0;font-size:13px;color:#6B5F4B}
@media (prefers-reduced-motion:reduce){.cb-yr-card{transition:none}}
@media (max-width:640px){
  .cb-yr-nav{flex-wrap:nowrap;align-items:center}
  .cb-yr-tabs{gap:6px 8px;flex-wrap:nowrap}
  .cb-yr-name{display:none}
  .cb-yr-arrow{width:40px;height:40px;font-size:18px}
}