/* Quant Leaf Labs home page blocks */
/* Divi 4: let the four blocks run edge to edge */
.et_pb_section.qll-sec { padding: 0 !important; background: transparent !important; }
.et_pb_section.qll-sec .et_pb_row.qll-row { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
.et_pb_section.qll-sec .et_pb_column { margin: 0 !important; padding: 0 !important; } .et_pb_section.qll-sec .et_pb_code { margin: 0 !important; }

/* hero, light */
html[data-theme="light"] .qll-hero { background: #F6F8FA; }
html[data-theme="light"] .qll-hero .qll-kick { color: #36708F; } html[data-theme="light"] .qll-hero h1 { color: #2F4659; }
html[data-theme="light"] .qll-hero p { color: #5B6664; } html[data-theme="light"] .qll-hero a.qll-btn { background: #2F4659; color: #FFFFFF; }
/* services, dark */
html[data-theme="dark"] .qll-services { background: #1B2838; }
html[data-theme="dark"] .qll-services .qll-card { background: #2F4659; border-color: #3A5568; }
html[data-theme="dark"] .qll-services h2, html[data-theme="dark"] .qll-services h3 { color: #E6FBFB; }
html[data-theme="dark"] .qll-services p { color: #B8C7D3; } html[data-theme="dark"] .qll-services .qll-k { color: #77F2F2; }
/* clients, dark */
html[data-theme="dark"] .qll-clients .qll-panel { background: #2F4659; } html[data-theme="dark"] .qll-clients .qll-panel.dark { background: #1B2838; }
html[data-theme="dark"] .qll-clients h2 { color: #E6FBFB; } html[data-theme="dark"] .qll-clients p { color: #B8C7D3; }
html[data-theme="dark"] .qll-clients .qll-k { color: #77F2F2; } html[data-theme="dark"] .qll-clients a.qll-btn { background: #77F2F2; color: #1B2838; }
/* site header and page, dark (Divi) */
html[data-theme="dark"] body, html[data-theme="dark"] #page-container, html[data-theme="dark"] #et-main-area { background: #1B2838 !important; }
html[data-theme="dark"] #main-header, html[data-theme="dark"] .pv-head { background: #1B2838 !important; box-shadow: 0 1px 0 rgba(255,255,255,0.08) !important; }
html[data-theme="dark"] #top-menu a, html[data-theme="dark"] .pv-menu { color: #E6FBFB !important; }
html[data-theme="dark"] .mobile_menu_bar:before { color: #E6FBFB !important; } html[data-theme="dark"] .pv-burger i { background: #E6FBFB; }
html[data-theme="dark"] #logo, html[data-theme="dark"] .pv-head img { content: url("https://quantleaflabs.com/wp-content/uploads/2026/10/QLL-Logo-Mist-1200.png"); }
/* the switch: same 44px circle as the accessibility button, stacked right above it (that button sits 24px from the corner) */
.qll-theme-btn { position: fixed; right: 24px; bottom: 80px; z-index: 99998; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: #2F4659; color: #E6FBFB; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  box-shadow: 0 4px 14px rgba(27,40,56,0.25); }
.qll-theme-btn svg { width: 20px; height: 20px; } .qll-theme-btn .qll-sun { display: none; }
html[data-theme="dark"] .qll-theme-btn { box-shadow: 0 0 0 1.5px #6FA9C4, 0 4px 14px rgba(0,0,0,0.35); }
html[data-theme="dark"] .qll-theme-btn .qll-sun { display: block; } html[data-theme="dark"] .qll-theme-btn .qll-moon { display: none; }
.qll-theme-btn:focus-visible { outline: 3px solid #77F2F2; outline-offset: 2px; }


.qll-hero { position: relative; overflow: hidden; min-height: 600px; display: flex; align-items: center; background: #2F4659; font-family: 'Jost', sans-serif; }
.qll-hero svg.qll-dots { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.qll-hero .qll-inner { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 70px 60px; }
.qll-hero .qll-txt { max-width: 560px; display: flex; flex-direction: column; gap: 18px; }
.qll-hero .qll-kick { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: #77F2F2; line-height: 1.5; }
.qll-hero h1 { margin: 0; padding: 0; font-family: 'Jost', sans-serif; font-size: 62px; line-height: 1.06; font-weight: 600; color: #E6FBFB; }
.qll-hero p { margin: 0; padding: 0; font-size: 19px; line-height: 1.55; color: #B8C7D3; max-width: 500px; }
.qll-hero a.qll-btn { align-self: flex-start; margin-top: 8px; font-size: 16px; font-weight: 600; padding: 14px 28px; border-radius: 28px; text-decoration: none;
  background: #77F2F2; color: #1B2838; transition: background 0.2s; }
.qll-hero a.qll-btn:hover { background: #E6FBFB; }
.qll-hero a.qll-btn:focus-visible { outline: 3px solid #E6FBFB; outline-offset: 3px; }
/* below 1100px the dots move under the text, so they never cross the headline */
@media (max-width: 1099px) {
  .qll-hero { min-height: 0; display: block; }
  .qll-hero .qll-inner { padding: 56px 40px 230px; }
}
@media (max-width: 767px) {
  .qll-hero .qll-inner { padding: 40px 20px 170px; }
  .qll-hero h1 { font-size: 40px; } .qll-hero p { font-size: 16px; } .qll-hero .qll-kick { font-size: 12.5px; }
}


.qll-services { font-family: 'Jost', sans-serif; background: #F6F8FA; padding: 80px 24px 90px; }
.qll-services .qll-wrap { max-width: 1180px; margin: 0 auto; }
.qll-services .qll-k { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #36708F; text-align: center; font-weight: 500; }
.qll-services h2 { font-family: 'Jost', sans-serif; text-align: center; font-weight: 500; font-size: 30px; line-height: 1.3; color: #2F4659; margin: 10px auto 44px; padding: 0; max-width: 760px; }
.qll-services .qll-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.qll-services .qll-card { background: #FFFFFF; border: 1px solid #D9DDE3; border-radius: 18px; padding: 30px 28px 32px; }
.qll-services .qll-icon { width: 96px; height: 96px; border-radius: 22px; background: #E6FBFB; margin-bottom: 20px; }
.qll-services .qll-icon svg { width: 96px; height: 96px; display: block; overflow: visible; }
.qll-services h3 { font-family: 'Jost', sans-serif; margin: 0 0 10px; padding: 0; font-size: 22px; font-weight: 600; color: #2F4659; }
.qll-services p { margin: 0; padding: 0; font-size: 15.5px; line-height: 1.65; color: #5B6664; }
.qll-services .qll-well { fill: #FFFFFF; stroke: #3F7FA0; stroke-width: 1.6; transition: fill 0.25s; }
.qll-services .qll-well.on { fill: #2F4659; stroke: #2F4659; }
@media (max-width: 980px) { .qll-services .qll-cards { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }


.qll-brk { font-family: 'Jost', sans-serif; }
.qll-brk-trust { background: #1B2838; padding: 30px 24px; }
.qll-brk-trust ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(4, 1fr); }
.qll-brk-trust li { text-align: center; padding: 6px 16px; border-left: 1px solid #3A5568; }
.qll-brk-trust li:first-child { border-left: 0; }
.qll-brk-trust b { display: block; color: #E6FBFB; font-size: 17px; font-weight: 600; } .qll-brk-trust span { color: #77F2F2; font-size: 13px; letter-spacing: 0.06em; }
.qll-brk-inst { background: #F6F8FA; padding: 34px 24px 30px; text-align: center; }
.qll-brk-inst .k { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #36708F; font-weight: 500; }
.qll-brk-inst .row { margin: 12px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; font-size: 21px; font-weight: 600; color: #2F4659; }
.qll-brk-inst .row i { font-style: normal; color: #B8C7D3; font-weight: 400; }
.qll-brk-chrom { background: #2F4659; padding: 26px 0 22px; } .qll-brk-chrom svg { display: block; width: 100%; height: 110px; }
.qll-brk-steps { background: #FFFFFF; padding: 46px 24px 40px; }
.qll-brk-steps .k { text-align: center; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #36708F; font-weight: 500; margin-bottom: 26px; }
.qll-brk-steps ol { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.qll-brk-steps ol::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 17px; height: 4px; border-radius: 2px; background: #D9DDE3; }
.qll-brk-steps .fill { position: absolute; left: 12.5%; top: 17px; height: 4px; border-radius: 2px; background: #2F4659; width: 0; }
.qll-brk-steps li { position: relative; text-align: center; padding: 0 8px; }
.qll-brk-steps .dot { width: 38px; height: 38px; margin: 0 auto 12px; border-radius: 50%; background: #FFFFFF; border: 3px solid #D9DDE3; display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: #5B6664; transition: all 0.25s; }
.qll-brk-steps li.on .dot { background: #2F4659; border-color: #2F4659; color: #FFFFFF; } .qll-brk-steps li.last.on .dot { background: #77F2F2; color: #1B2838; }
.qll-brk-steps b { display: block; color: #2F4659; font-size: 17px; } .qll-brk-steps span { color: #5B6664; font-size: 14px; }
html[data-theme="dark"] .qll-brk-inst, html[data-theme="dark"] .qll-brk-steps { background: #1B2838; }
html[data-theme="dark"] .qll-brk-inst .row, html[data-theme="dark"] .qll-brk-steps b { color: #E6FBFB; } html[data-theme="dark"] .qll-brk-steps span { color: #B8C7D3; }
html[data-theme="dark"] .qll-brk-steps .dot { background: #1B2838; border-color: #3A5568; color: #B8C7D3; }
@media (max-width: 760px) { .qll-brk-trust ul, .qll-brk-steps ol { grid-template-columns: 1fr 1fr; gap: 18px 0; } .qll-brk-trust li:nth-child(3) { border-left: 0; }
  .qll-brk-steps ol::before, .qll-brk-steps .fill { display: none; } }

.qll-brk-steps li span { display: block; max-width: 230px; margin: 4px auto 0; line-height: 1.5; }
.qll-brk-steps b { font-size: 18px; }
html[data-theme="dark"] .qll-brk-inst .k, html[data-theme="dark"] .qll-brk-steps .k { color: #77F2F2; }
.qll-steps-wrap { position: relative; max-width: 1000px; margin: 0 auto; }
html[data-theme="dark"] .qll-brk-steps ol::before { background: #3A5568; } html[data-theme="dark"] .qll-brk-steps .fill { background: #77F2F2; }
html[data-theme="dark"] .qll-brk-steps li.on .dot { background: #2F4659; border-color: #77F2F2; color: #E6FBFB; }
html[data-theme="dark"] .qll-brk-steps li.last.on .dot { background: #77F2F2; color: #1B2838; }


.qll-clients { font-family: 'Jost', sans-serif; background: #FFFFFF; }
.qll-clients .qll-wrap { display: grid; grid-template-columns: 1fr 1fr; }
.qll-clients .qll-panel { padding: 80px clamp(24px, 6vw, 96px) 88px; display: flex; background: #FFFFFF; }
.qll-clients .qll-panel.dark { background: #2F4659; }
.qll-clients .qll-in { width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 12px; }
.qll-clients .qll-panel:first-child .qll-in { margin-left: auto; } .qll-clients .qll-panel.dark .qll-in { margin-right: auto; }
.qll-clients .qll-icon { width: 96px; height: 96px; border-radius: 22px; background: #E6FBFB; margin-bottom: 8px; }
.qll-clients .qll-icon svg { width: 96px; height: 96px; display: block; }
.qll-clients .qll-k { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #36708F; font-weight: 500; }
.qll-clients .dark .qll-k { color: #77F2F2; }
.qll-clients h2 { font-family: 'Jost', sans-serif; margin: 0; padding: 0; font-size: 30px; font-weight: 600; color: #2F4659; }
.qll-clients .dark h2 { color: #E6FBFB; }
.qll-clients p { margin: 0; padding: 0; font-size: 15.5px; line-height: 1.65; color: #5B6664; flex-grow: 1; }
.qll-clients .dark p { color: #B8C7D3; }
.qll-clients a.qll-btn { align-self: flex-start; margin-top: 10px; font-size: 16px; font-weight: 600; padding: 13px 26px; border-radius: 28px; text-decoration: none; background: #2F4659; color: #FFFFFF; }
.qll-clients .dark a.qll-btn { background: #77F2F2; color: #1B2838; }
.qll-clients a.qll-btn:focus-visible { outline: 3px solid #77F2F2; outline-offset: 3px; }
.qll-clients .qll-step circle { fill: #FFFFFF; stroke: #3F7FA0; stroke-width: 1.6; transition: fill 0.25s; }
.qll-clients .qll-step path { stroke: #B8C7D3; stroke-width: 3; stroke-linecap: round; transition: stroke 0.25s; }
.qll-clients .qll-step.on circle { fill: #2F4659; stroke: #2F4659; } .qll-clients .qll-step.on path { stroke: #2F4659; }
.qll-clients .qll-stop { fill: #FFFFFF; stroke: #D9DDE3; stroke-width: 2.5; transition: fill 0.25s, stroke 0.25s; }
.qll-clients .qll-stop.on { fill: #2F4659; stroke: #2F4659; } .qll-clients .qll-stop.last.on { fill: #77F2F2; stroke: #2F4659; }
@media (max-width: 699px) { .qll-clients .qll-wrap { grid-template-columns: 1fr; } .qll-clients .qll-panel { padding: 56px 20px 60px; } .qll-clients .qll-in { margin: 0 !important; } }