/*
Theme Name: BRISK Solar
Theme URI: https://brisk-solar.com/
Template: brisk
Author: BRISK Technology
Description: Child theme of BRISK (wearebrisk.com) for brisk-solar.com. Colours, fonts and spacing live in theme.json; every page is built from editable core blocks, patterns and synced patterns. Built from the approved brisk-solar.com preview v25 (October 2026). Requires the parent theme brisk 1.0.4 or later.
Version: 1.0.10
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brisk-solar
*/

/* Component styles. Colours and type come from theme.json presets, so a change in Styles updates everything.
   Breakpoints: 1100 hamburger menu, 1000 tablet grids, 860 single column and mobile action bar, 600 phone, 400 small phone. */

:root {
	--ink: var(--wp--preset--color--ink); --muted: var(--wp--preset--color--muted); --line: var(--wp--preset--color--line);
	--bg: var(--wp--preset--color--bg); --surface: var(--wp--preset--color--surface); --hero-bg: var(--wp--preset--color--hero-bg);
	--foot-bg: var(--wp--preset--color--foot-bg); --sun: var(--wp--preset--color--sun); --red: var(--wp--preset--color--red);
	--tick: var(--wp--preset--color--green, #1f8a4c);
	--sky: var(--wp--preset--color--sky); --solar: var(--wp--preset--color--solar); --solar-deep: var(--wp--preset--color--solar-deep); --brisk: var(--wp--preset--color--brisk);
	--display: var(--wp--preset--font-family--display); --body: var(--wp--preset--font-family--body); --mono: var(--wp--preset--font-family--mono);
	--t-brisk: #F1202B; --t-brisk-r: #C8101B; --t-epos: #F8DB40; --t-epos-r: #9A7400; --t-solar: #F59E0B; --t-solar-r: #B45F00;
	--t-bm: #FF528F; --t-bm-r: #C9245F; --t-itni: #2F86C8; --t-itni-r: #1F6FAE;
	--r-card: 18px; --r-btn: 999px;
}
html { scroll-padding-top: 96px; }
body { overflow-x: clip; }
img { max-width: 100%; height: auto; }
.wp-block-image { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { max-width: 70ch; }
.is-hidden, [hidden] { display: none !important; }
main.wp-block-group { margin-block-start: 0; }
.is-layout-constrained > .alignfull { margin-block: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
sup a { font-family: var(--mono); font-size: .68em; text-decoration: none; color: var(--muted); }
sup + sup::before { content: ","; font-family: var(--mono); font-size: .68em; color: var(--muted); margin-right: 1px; }
.is-card sup a { position: relative; z-index: 2; }
a[href^="tel:"] { white-space: nowrap; }

/* grids: children of layout grids carry no flow margins */
:is(.why, .tiles2, .split, .picks, .pk-top, .case-grid, .case-stats, .tracks, .brands, .limits, .steps, .next3, .op-grid, .op-brands, .op-top, .op-how,
    .op-t-in, .op-t-tiles, .ct-grid, .areas, .cost-facts, .qstart, .hero, .fgrid, .op-group-top, .guide-grid, .bphotos, .docs, .op-shop, .hdr-row, .brisk-band, .cta-band, .row) > * { margin-block: 0; }

/* ---------- labels and section heads ---------- */
.label, .brands-label, .ft-k, .op-brand, .case-tag, .checked, .dtype { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.checked, .dtype { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.head > * { margin: 0; }
.more { margin-top: 14px; font-weight: 600; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #cfe0ee; }
.eyebrow::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--solar); margin-right: 8px; vertical-align: middle; }

/* ---------- bands ---------- */
.band { padding-block: 56px; border-top: 1px solid var(--line); }
.band.b-hero, .band.b-proof2, .band.b-cta-band, .band.b-op-stats, .band.b-bphotos, .band.b-op-jump, .band.b-brisk-band, .band.b-hero + .band, .band.b-proof2 + .band,
.band.b-cta-band + .band, .band.b-op-stats + .band, .band.b-bphotos + .band { border-top: 0; }
.band.b-hero { background: var(--hero-bg); color: #fff; padding-block: clamp(40px, 7vw, 88px); }
.band.b-hero h1, .band.b-hero h2, .band.b-hero h3 { color: #fff; }
.band.b-picker { padding-block: clamp(36px, 5vw, 64px) clamp(40px, 5vw, 72px); }

/* ---------- buttons ---------- */
.wp-block-button__link { border-radius: var(--r-btn); }
.wp-block-buttons { gap: 12px; }
.hdr-cta .wp-block-button__link { background: var(--solar); color: var(--ink); padding: 11px 20px; }
.hdr-cta .wp-block-button__link:hover { background: #b5141f; }
.pill .wp-block-button__link, .wp-block-button.pill > a { background: var(--sun); color: var(--hero-bg); padding: 14px 24px; font-weight: 700; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.hdr-row { display: flex; align-items: center; gap: 12px 20px; padding-block: 10px; }
.lockup { display: flex; align-items: center; gap: 14px; flex: none; }
.lockup > * { margin: 0 !important; }
/* the logo carries its own class: the battery cards' .brand rule once boxed it in a white bordered card (review 5 Oct 2026) */
.lockup .site-brand { line-height: 0; }
/* 1.0.3: logo up from 40px (Paul, 5 Oct: too small). The PNG is about 2.76:1, so 56px tall is about 155px wide. */
.lockup .site-brand img { height: 56px; width: auto; display: block; }
@media (max-width: 1100px) { .lockup .site-brand img { height: 48px; } }
.mainnav { margin-left: auto; font-weight: 600; }
.mainnav .wp-block-navigation__submenu-container { border-radius: 12px; border: 1px solid var(--line) !important; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .35); padding: 8px; min-width: 240px !important; }
.mainnav .wp-block-navigation__submenu-container a { padding: 8px 10px !important; border-radius: 8px; }
.mainnav .wp-block-navigation-item__content:hover { color: var(--solar-deep); }
.hdr-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.hdr-actions > * { margin: 0 !important; }
.hdr-ph a { font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--solar); text-underline-offset: 4px; }
@media (max-width: 1280px) {
	.hdr-ph a { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; font-size: 0; text-decoration: none;
		background: no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314202b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
}
/* hamburger from 1100px down (core shows it below 600px; this widens that) */
@media (max-width: 1100px) {
	.mainnav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.mainnav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.mainnav { order: 3; margin-left: 0; }
	.hdr-actions { margin-left: auto; }
}
.mainnav .wp-block-navigation__responsive-container-open { width: 46px; height: 46px; border: 2px solid var(--ink); border-radius: 12px; align-items: center; justify-content: center; }
.mainnav .wp-block-navigation__responsive-container.is-menu-open { padding: 20px 20px 40px; background: var(--bg) !important; }
.mainnav .is-menu-open .wp-block-navigation__responsive-container-content { gap: 4px; }
.mainnav .is-menu-open .wp-block-navigation-item { font-size: 1.1rem; }
.mainnav .is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none; padding: 4px 0 8px 12px !important; }
.mainnav .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mainnav .is-menu-open .wp-block-navigation__responsive-container-content,
.mainnav .is-menu-open .wp-block-navigation__container,
.mainnav .is-menu-open .wp-block-navigation-item,
.mainnav .is-menu-open .wp-block-navigation__submenu-container { align-items: flex-start !important; text-align: left; justify-content: flex-start !important; }
.mainnav .is-menu-open .wp-block-navigation__container { gap: 6px !important; width: 100%; max-width: 520px; }
.mainnav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; padding: 6px 0; border-bottom: 1px solid var(--line); }
.mainnav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child { border-bottom: 0; }
.mainnav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 6px 0; }
@media (max-width: 520px) { .lockup .site-brand img { height: 42px; } }
@media (max-width: 860px) { .hdr-actions .hdr-cta, .hdr-actions .hdr-ph { display: none; } }

/* ---------- homepage picker hero ---------- */
.hero.picker > * + * { margin-top: 0; }
.pk-top { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.pk-head h1 { font-size: clamp(36px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -.02em; margin-top: 14px; }
.hero h1 em, .b-hero h1 em { font-style: normal; display: inline-block; white-space: nowrap; background: var(--sun); color: var(--hero-bg); padding: .04em .22em .1em; margin: .1em 0 0; border-radius: .22em; line-height: 1.04; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pk-head h1 { line-height: 1.1; }
.hero-ticks { list-style: none; margin: 18px 0 0 !important; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: #dbe6ef; font-size: 15px; }
.hero-ticks li { display: flex; align-items: center; gap: 8px; margin: 0; }
.hero-ticks li::before { content: "\2713"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--tick); color: #fff; font: 800 12px/1 var(--body); flex: none; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px !important; }
.hero-acts .wp-block-button__link { box-sizing: border-box; padding: 15px 26px; border-radius: 999px; font-weight: 800; font-size: 17px; }
.hero-acts .ha-quote .wp-block-button__link { background: var(--sun); color: var(--hero-bg); }
.hero-acts .ha-call .wp-block-button__link { background: transparent; border: 2px solid rgba(255, 255, 255, .7); color: #fff; }
.pk-ask .pk-q { font-size: clamp(22px, 2.4vw, 30px); }
.hero .lead { font-size: clamp(17px, 1.6vw, 20px); color: #dbe6ef; margin-top: 18px; max-width: 40ch; font-weight: 500; }
.pk-photo { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 3/2; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.pk-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-photo figcaption { position: absolute; left: 14px; bottom: 14px; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: rgba(10, 26, 40, .72); backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 600; padding: 9px 13px; border-radius: 12px; max-width: calc(100% - 28px); }
.pk-photo figcaption img { height: 13px; width: auto; }
.pk-ask { margin-top: clamp(36px, 5vw, 60px) !important; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pk-ask > * { margin: 0; }
.pk-step { display: inline-flex; align-items: center; gap: 8px; background: var(--sun); color: var(--hero-bg); font: 800 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; }
.pk-step::after { content: ""; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--hero-bg); }
h2.pk-q { font-size: clamp(26px, 3.2vw, 40px); color: #fff; }
.welcome { color: #dbe6ef; background: rgba(242, 169, 0, .14); border: 1px solid rgba(242, 169, 0, .5); border-radius: 12px; padding: 10px 14px; }
.welcome a { color: var(--sun); font-weight: 700; }
.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: 22px !important; }
.is-card { position: relative; }
.is-card .card-title a, .is-card .t-label a { color: inherit; text-decoration: none; }
.is-card .card-title a::after, .is-card .t-label a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pick { display: flex; flex-direction: column; background: #fff; color: #14202b; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .65); outline: 3px solid transparent; outline-offset: 3px; transition: transform .18s, outline-color .18s; }
.pick:hover, .pick:focus-within { transform: translateY(-4px); outline-color: var(--sun); }
.pick > * { margin: 0 !important; }
.pick .card-img { aspect-ratio: 400/260; overflow: hidden; background: #cfe9f8; }
.pick .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick .card-title { font-size: clamp(24px, 2.4vw, 30px); color: #0f2a40 !important; padding: 20px 22px 0; }
.pick > p { padding: 8px 22px 0; color: #4a5764; font-size: 15.5px; line-height: 1.45; }
.pick > p.go { margin: auto 22px 22px !important; padding: 15px 20px; background: var(--sun); border-radius: 999px; text-align: center; font-weight: 700; color: #0f2a40; }
.pick > p.go::before { content: "See "; }
.pick > p.go::after { content: " →"; }
.pick:hover > p.go { background: #ffbf1f; }
.pick.is-current { outline-color: var(--sun); }
.hero-foot { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: center; margin-top: 26px !important; }
.hero-foot > * { margin: 0 !important; }
.hero-foot a { color: #fff; font-weight: 600; }
.callme a, .callme { font-family: var(--display); font-weight: 800; font-size: 20px; color: #fff; text-decoration-color: var(--solar); }
.callme-sub { font-size: 13px; color: #b9cbdb; margin-top: 0 !important; }
.b-proof2 { background: var(--surface); padding-block: 18px; border-bottom: 1px solid var(--line); }
.proof2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.proof2 > * { margin: 0; }
.proof2 ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; font-weight: 600; font-size: 15px; }
.proof2 li { display: flex; align-items: center; gap: 9px; }
.proof2 li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2a40' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.brands-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.brands-row > * { margin: 0 !important; }
.brands-row img { display: block; width: auto; }

/* ---------- hub hero ---------- */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.hero.hub { grid-template-columns: 1.1fr .9fr; }
.hero.picker { display: block; }
.hero > * { min-width: 0; }
.hero h1 { font-size: clamp(36px, 5.2vw, 64px); margin-top: 14px; }
.ctas { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center; margin-top: 22px !important; }
.ctas > * { margin: 0 !important; }
.ctas .callme-sub { flex-basis: 100%; order: 3; }
.facts { background: var(--surface); color: var(--ink); border-radius: 20px; padding: 14px 14px 18px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); display: grid; gap: 4px; }
.facts > * { margin: 0 !important; }
.fphoto { border-radius: 14px; overflow: hidden; aspect-ratio: 16/10; background: #cfe9f8; margin-bottom: 10px !important; }
.fphoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.facts .row { display: flex; justify-content: space-between; gap: 14px; border-top: 1px dashed var(--line); padding: 8px 6px 0; font-size: 14px; }
.facts .row > p { margin: 0; }
.facts .row > p:first-child { font-weight: 600; white-space: nowrap; }
.facts .row > p:last-child { text-align: right; color: var(--muted); }
.visit { background: var(--hero-bg); color: #fff; border-radius: 22px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; }
.visit > * { margin: 0 !important; }
.hero .visit { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.v-k { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sun); }
.v-addr { font-size: 17px; line-height: 1.5; color: #dbe6ef; }
.v-addr strong { display: block; color: #fff; font: 800 22px var(--display); }
.v-addr a, .v-sub a { color: var(--sun); }
.v-tel a { color: #fff; font: 800 clamp(28px, 3vw, 36px) var(--display); text-decoration-color: var(--solar); }
.v-sub { color: #b9cbdb; font-size: 14px; }

/* ---------- content blocks ---------- */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 28px; }
.why > * { min-width: 0; border-top: 2px solid var(--line); padding-top: 12px; display: grid; gap: 6px; align-content: start; }
.why > * > * { margin: 0; }
.why p { color: var(--muted); font-size: .95rem; }
.tiles2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.split > * { min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.panel > * + * { margin-top: 8px; }
.photo, .wp-block-image.fphoto, .op-photo { border-radius: 20px; overflow: hidden; position: relative; }
.wp-block-image.photo img, .wp-block-image.op-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wp-block-image.photo figcaption { position: absolute; left: 12px; bottom: 12px; margin: 0; background: rgba(10, 26, 40, .72); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 11px; border-radius: 10px; }
.bphotos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.b-bhero { background: var(--hero-bg); color: #fff; padding-block: 44px 32px; }
.bhero > * + * { margin-top: 28px !important; }
.bh-t > * { margin: 0; }
.bh-t h1 { color: #fff; font-size: clamp(34px, 4.6vw, 58px); margin-top: 14px; }
.bh-t h1 em { font-style: normal; display: inline-block; white-space: nowrap; background: var(--sun); color: var(--hero-bg); padding: .04em .22em .1em; margin-top: .1em; border-radius: .22em; line-height: 1.04; }
.bh-t .lead { font-size: clamp(17px, 1.6vw, 20px); color: #dbe6ef; margin-top: 16px; max-width: 52ch; font-weight: 500; }
.b-bhero + .band { border-top: 0; }
h3.cmp-h { margin: 44px auto 14px !important; }
.pick > p:has(+ p.go) { padding-bottom: 20px; }
.b-bphotos { background: var(--hero-bg); padding-block: 28px; }
.bphotos .photo { height: clamp(220px, 30vw, 380px); }
.sunpath { background: var(--surface); border-radius: 24px; padding: 18px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35); }
.sunpath figcaption { font-size: .8rem; color: var(--muted); margin: 8px 0 0; }

/* battery tiles */
.btile2 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-auto-rows: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; color: var(--ink); transition: transform .18s, box-shadow .18s; }
.btile2:hover, .btile2:focus-within { transform: translateY(-3px); box-shadow: 0 30px 50px -30px rgba(15, 42, 64, .45); border-color: var(--ink); }
.btile2 > * { margin: 0 !important; grid-column: 2; padding-inline: 24px; }
.btile2 > .bt-vis { grid-column: 1; grid-row: 1 / span 6; padding: 22px; min-height: 240px; display: grid; place-items: center; }
.btile2 > .bt-vis img { max-height: 230px; width: auto; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .25)); }
.bt-vis.ef { background: radial-gradient(120% 90% at 50% 100%, #fff 0, #e9eef3 60%, #dfe6ed 100%); }
.bt-vis.el { background: radial-gradient(120% 90% at 50% 100%, #2b3d4f 0, #16293a 70%); }
.btile2 > .bt-logo { padding-top: 24px; }
.btile2 > .bt-logo img { height: 22px; width: auto; }
.btile2 .card-title { font-size: clamp(21px, 2vw, 26px); padding-top: 8px; }
.btile2 > p { color: var(--muted); font-size: 15.5px; padding-top: 8px; }
.btile2 > p.go { color: var(--sky); font-weight: 700; padding-bottom: 26px; }
/* 1.0.4: worked-example links on the home page, so the examples are easy to find (Paul, 5 Oct) */
.ex-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px !important; }
.ex-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 8px; transition: transform .18s, box-shadow .18s; }
.ex-card > * { margin: 0 !important; }
.ex-card:hover, .ex-card:focus-within { transform: translateY(-3px); box-shadow: 0 30px 50px -30px rgba(15, 42, 64, .45); border-color: var(--ink); }
.ex-card .card-title { font-size: clamp(21px, 2vw, 26px); }
.ex-card p { color: var(--muted); }
.ex-card p.go { color: var(--sky); font-weight: 700; margin-top: auto !important; }
@media (max-width: 860px) { .ex-links { grid-template-columns: 1fr; } }
.brands { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.brands .brand { padding: 24px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.brands .brand > * + * { margin-top: 12px; }
.brands .brand .chem { font-family: var(--mono); font-size: .8rem; color: var(--sky); }
/* 1.0.3: "Coming soon" badge on the Eleven Energy card, tiles and section (Paul, 5 Oct). On tiles it sits over the battery photo. */
.soon { display: inline-block; width: fit-content; background: var(--sun); color: var(--hero-bg); font: 800 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; }
.btile2 > .soon { grid-column: 1; grid-row: 1; align-self: start; position: absolute; top: 14px; left: 14px; z-index: 2; padding: 7px 12px; pointer-events: none; }

/* tables */
.wp-block-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin: 0; }
.wp-block-table table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .92rem; }
.wp-block-table :is(th, td) { text-align: left; vertical-align: top; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); }
.wp-block-table thead { border: 0; }
.wp-block-table thead th { font-family: var(--display); font-size: 1rem; background: var(--bg); }
.wp-block-table tbody th { font-weight: 600; color: var(--muted); width: 24%; }
.wp-block-table tr:last-child :is(th, td) { border-bottom: 0; }

/* funding by market */
.tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.track { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--sun); border-radius: 10px; padding: 24px; }
.track.biz { border-top-color: var(--solar); } .track.farm { border-top-color: var(--sky); }
.track ul { margin: 10px 0 0; padding-left: 1.1rem; display: grid; gap: 6px; font-size: .95rem; }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; counter-reset: s; }
.steps > * { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; min-width: 0; }
.steps > *::before { counter-increment: s; content: counter(s); font-family: var(--mono); font-size: .8rem; color: var(--solar-deep); display: block; margin-bottom: 6px; }
.steps > * > * { margin: 0; } .steps p { font-size: .88rem; color: var(--muted); margin-top: 4px; }
.limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.limit { border-left: 3px solid var(--sun); padding: 4px 0 4px 14px; }
.limit > * { margin: 0; }
.limit .k { font-family: var(--mono); font-size: 1.4rem; font-weight: 700; }
.limit .v { font-size: .88rem; color: var(--muted); }

/* details: FAQs, worked-example method, datasheets */
.wp-block-details { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; }
.wp-block-details + .wp-block-details { margin-top: 8px; }
.wp-block-details summary { cursor: pointer; font-weight: 600; }
.wp-block-details > :not(summary) { margin-top: 8px; color: var(--muted); }
.docs { display: grid; gap: 8px; }
.doclist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.doclist li { border-top: 1px solid var(--line); padding-top: 6px; font-size: .92rem; overflow-wrap: anywhere; }

/* worked examples */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.case-grid:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
.case-note { font-size: 13.5px; color: var(--muted); border-left: 3px solid var(--solar); padding-left: 10px; }
.case { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.case > * { margin: 0 !important; }
.case-tag { align-self: flex-start; background: #fff4cc; color: #5a4300; padding: 4px 8px; border-radius: 6px; font-size: 11px; }
.case h3 { font-size: 21px; line-height: 1.15; }
.case-who { color: var(--muted); }
.case-stats { margin: 8px 0 4px !important; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.case-stats > * { background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.case-stats > * > * { margin: 0; }
.case-stats .dt { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.case-stats .dd { font: 800 17px var(--display); }
.case-stats > :last-child { grid-column: 1 / -1; background: var(--hero-bg); color: #fff; }
.case-stats > :last-child .dt { color: #b9cbdb; }
.case-stats > :last-child .dd { font-size: 22px; color: var(--sun); }
.case .wp-block-details { border: 0; border-top: 1px dashed var(--line); border-radius: 0; padding: 8px 0 0; background: none; }
.case summary { color: var(--sky); font-weight: 700; }
.case .wp-block-details ul { padding-left: 1.1rem; font-size: 14.5px; display: grid; gap: 6px; }
.cost-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.cost-facts > * { background: var(--hero-bg); color: #fff; border-radius: 16px; padding: 16px; }
.cost-facts .k { font: 800 26px var(--display); color: var(--sun); margin: 0; }
.cost-facts .v { font-size: 14px; color: #dbe6ef; margin: 4px 0 0; }
.cost-facts sup a { color: var(--sun); }
.answer { font-size: 18px; }
.method { display: grid; gap: 8px; }

/* call to action band */
.b-cta-band { background: var(--sun); color: #0f2a40; padding-block: 30px; }
.cta-band { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.cta-t > * { margin: 0; } .cta-t p { color: #20384d; margin-top: 4px; }
.cta-band h2 { font-size: clamp(22px, 2.8vw, 32px); color: #0f2a40; }
.acts { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.acts > * { margin: 0 !important; }
.cta-btn .wp-block-button__link { background: #0f2a40; color: #fff; padding: 14px 26px; }
.cta-tel a { color: #0f2a40; font: 800 20px var(--display); text-decoration-color: #0f2a40; }

/* call-back and forms */
.qstart { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; }
.qstart .head { margin: 0; }
form.short, .op-form, .qform { display: grid; gap: 14px; }
form.short { background: var(--hero-bg); color: #fff; border-radius: 22px; padding: clamp(22px, 3vw, 34px); }
form.short a { color: #fff; }
form label { font-size: .9rem; font-weight: 600; display: grid; gap: 4px; }
form input:not([type=checkbox]):not([type=radio]), form select, form textarea { box-sizing: border-box; font: inherit; font-size: 16px; padding: .7rem .75rem; border: 1.5px solid #c8d0d8; border-radius: 10px; background: #fff; color: var(--ink); width: 100%; min-height: 46px; }
form textarea { min-height: 90px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label.check, label.chk { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
label.check > span, label.chk > span { flex: 1; min-width: 0; }
label.check input, label.chk input { width: 20px; height: 20px; flex: none; margin-top: 2px; }
form .btn, .op-bar .btn { display: inline-block; font: inherit; font-weight: 700; padding: 14px 24px; border: 0; border-radius: 999px; background: var(--sun); color: var(--hero-bg); cursor: pointer; text-decoration: none; text-align: center; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.err { color: var(--red); font-size: .9rem; font-weight: 600; }
.talk { margin-top: 12px; color: var(--muted); }
/* quote steps */
.qwrap { max-width: 720px; }
.qbar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 14px 0 6px; }
.qbar i { display: block; height: 100%; background: var(--sun); width: 20%; transition: width .25s; }
.qform fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; min-width: 0; }
.qform legend { font: 700 1.4rem var(--display); margin-bottom: 14px; padding: 0; }
.js .qform .qstep { display: none; } .js .qform .qstep.on { display: grid; }
.js .qform [data-for] { display: none; } .js .qform [data-for].on { display: grid; gap: 12px; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt { position: relative; flex: 1 1 140px; }
.opt input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }   /* the label takes every tap, so a tap can only ever pick its own option */
.opt span { box-sizing: border-box; display: block; font: 600 16px var(--body); background: var(--surface); border: 2px solid var(--line); border-radius: 12px; padding: 14px 18px; min-height: 52px; cursor: pointer; }
.opt:hover span { border-color: var(--ink); }
.opt input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.opt input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
/* 1.0.4: pick-as-many questions are a ticked list with green ticks, like the other BRISK sites (Paul, 5 Oct). Single-choice questions keep the tiles. */
.opts:has(input[type="checkbox"]) { flex-direction: column; flex-wrap: nowrap; gap: 8px; max-width: 520px; }
.opts:has(input[type="checkbox"]) .opt { flex: none; }
.opt input[type="checkbox"] + span { display: flex; align-items: center; gap: 12px; }
.opt input[type="checkbox"] + span::before { content: ""; flex: none; width: 24px; height: 24px; box-sizing: border-box; border: 2px solid var(--line); border-radius: 6px; background: var(--surface); display: grid; place-items: center; font: 800 15px/1 var(--body); color: #fff; }
.opt input[type="checkbox"]:checked + span { border-color: var(--tick); background: color-mix(in srgb, var(--tick) 8%, var(--surface)); color: var(--ink); }
.opt input[type="checkbox"]:checked + span::before { content: "\2713"; background: var(--tick); border-color: var(--tick); }
.qnav { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: 8px; }
.qnav .back { background: none; border: 0; font: 600 15px var(--body); color: var(--muted); cursor: pointer; padding: 10px 0; }
.js .qnav .send { display: none; } .js .qform.last .qnav .send { display: inline-block; } .js .qform.last .qnav .next { display: none; }
.qnav .back.is-off { visibility: hidden; }
.resume { background: #fff4cc; color: #5a4300; border-radius: 10px; padding: 10px 14px; }
.resume button { font: 600 14px var(--body); background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; }
.next3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: n; }
.next3 > * { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.next3 > *::before { counter-increment: n; content: counter(n); font-family: var(--mono); color: var(--solar-deep); display: block; }
.next3 > * > * { margin: 0; }

/* about, contact, areas, guides */
.ct-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: start; }
.ct-grid .band { padding: 0; border: 0; }
.ct-grid .qstart { grid-template-columns: 1fr; }
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.areas > * { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 4px; }
.areas > * > * { margin: 0; } .areas .k { font: 800 17px var(--display); } .areas .v { color: var(--muted); font-size: 14.5px; }
.about-brands, .op-brands.mini { background: #fff; border-radius: 16px; padding: 22px; border: 1px solid var(--line); display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; }
.op-brands.mini img { max-height: 48px; width: auto; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.guide-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; }
.guide-card > * { margin: 0; } .guide-card p { color: var(--muted); margin-top: 6px; }
.sources { font-size: .85rem; color: var(--muted); columns: 2; column-gap: 28px; }
.sources p { break-inside: avoid; margin: 0 0 4px; overflow-wrap: anywhere; }
.guide-meta { font-family: var(--mono); font-size: .8rem; color: var(--muted); padding-block: 14px; }

/* legal pages */
:is(.page-legal, .page-template-page-legal) .band h3 { margin: 30px 0 8px; font-size: 1.25rem; }
.contents { columns: 2; font-size: .95rem; }

/* ---------- One partner ---------- */
.op-stripe { height: 5px; background: linear-gradient(90deg, var(--t-brisk) 0 20%, var(--t-epos) 20% 40%, var(--t-solar) 40% 60%, var(--t-bm) 60% 80%, var(--t-itni) 80%); }
.op-hero { position: relative; display: block; }
.op-hero > .op-stripe { position: absolute; left: 0; right: 0; top: calc(-1 * clamp(40px, 7vw, 88px)); }
.op-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.op-hero h1 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.04; }
.op-how { counter-reset: oh; margin-top: clamp(28px, 4vw, 48px) !important; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.op-how > * { counter-increment: oh; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; padding: 14px 16px; }
.op-how > *::before { content: counter(oh); grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; background: var(--sun); color: #0f2a40; display: grid; place-items: center; font: 800 20px var(--display); }
.op-how > * > * { margin: 0; } .op-how .k { font: 800 17px var(--display); } .op-how .v { color: #b9cbdb; font-size: 14px; }
.b-op-stats { background: var(--sun); color: #0f2a40; padding-block: 16px; }
.op-stats ul, .op-stats.is-list, .op-stats > .is-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 48px; }
.op-stats .is-list > * { display: flex; align-items: baseline; gap: 8px; margin: 0 !important; }   /* 1.0.4: the block layout gave items 2 and 3 a top margin, so "1,200+" sat higher (Paul, 5 Oct) */
.op-stats .is-list > * > * { margin: 0; }
.op-stats .k { font: 800 28px var(--display); } .op-stats .v { font-weight: 600; }
.op-group-top { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center; margin-bottom: 22px; }
.op-group-top .head { margin: 0; }
.op-badge img { width: 100%; max-width: 420px; height: auto; }
.op-badge a, .op-badge-foot a { display: inline-block; border-radius: 12px; }
.op-badge.sm img { width: 280px; }
.op-visit { display: flex; flex-wrap: wrap; gap: 10px 18px; font-weight: 700; }
.op-brands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.op-brands:not(.mini) > * { background: #fff; border: 1px solid var(--line); border-radius: 16px; display: grid !important; place-items: center; padding: 18px; min-height: 96px; }
.op-brands img { max-height: 56px; width: auto; }
/* The jump chips sit in the page flow. They were sticky until 1.0.3, but on desktop they wrap to two rows and covered the content while scrolling. */
.b-op-jump { background: var(--surface); padding-block: 10px; border-bottom: 1px solid var(--line); }
p.op-jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: none; margin: 0; }
@media (min-width: 1101px) { p.op-jump { flex-wrap: wrap; justify-content: center; overflow: visible; max-width: var(--wp--style--global--wide-size) !important; margin-inline: auto !important; } p.op-jump a { padding: 7px 12px; font-size: 13.5px; } }
p.op-jump a { flex: none; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 14px; border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 14px; background: var(--bg); }
.b-op-cat, .b-op-list { scroll-margin-top: 96px; }
.op-cat-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 20px; }
.op-cat-head > * { margin: 0; } .op-cat-head p { color: var(--muted); margin-top: 6px; }
.b-t-brisk .op-cat-head { border-left: 6px solid var(--t-brisk); padding-left: 16px; }
.b-t-epos .op-cat-head { border-left: 6px solid var(--t-epos); padding-left: 16px; }
.b-t-solar .op-cat-head { border-left: 6px solid var(--t-solar); padding-left: 16px; }
.b-t-bm .op-cat-head { border-left: 6px solid var(--t-bm); padding-left: 16px; }
.b-t-itni .op-cat-head { border-left: 6px solid var(--t-itni); padding-left: 16px; }
p.op-by { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #53606d; }
p.op-by img { height: 24px; width: auto; vertical-align: middle; }
p.op-by a { text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 14px; font-weight: 700; }
.op-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.op-grid > .op-photo { grid-row: span 2; min-height: 260px; }
.op-item { background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, box-shadow .15s; }
.op-item > * { margin: 0 !important; }
.op-item.on { border-color: var(--sun); box-shadow: 0 0 0 3px rgba(242, 169, 0, .25); }
.b-t-brisk .op-brand { color: var(--t-brisk-r); } .b-t-epos .op-brand { color: var(--t-epos-r); } .b-t-solar .op-brand { color: var(--t-solar-r); }
.b-t-bm .op-brand { color: var(--t-bm-r); } .b-t-itni .op-brand { color: var(--t-itni-r); }
.op-item h3 { font-size: 19px; }
.op-item p:not(.op-brand) { color: var(--muted); font-size: 15px; flex: 1; }
.op-item .wp-block-buttons { margin-top: 10px !important; }
.op-add.wp-block-button { width: 100%; }
.op-add .wp-block-button__link { width: 100%; background: transparent; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 12px; padding: 11px; font-size: 15px; font-weight: 700; }
.op-add .wp-block-button__link[aria-pressed="true"] { background: #0f2a40; border-color: #0f2a40; color: #fff; }
p.op-shop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: none; }
p.op-shop a { background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 18px; font-weight: 700; color: var(--ink); text-decoration: none; }
.op-partners .label { text-align: center; margin-bottom: 16px; }
.op-partners .is-list, .op-partners > .wp-block-group:last-child { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 36px; }
.op-partners img { max-height: 32px; width: auto; filter: grayscale(1) brightness(.35); opacity: .7; }
.op-partners .wp-block-image:hover img { filter: none; opacity: 1; }
.op-list-in { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; background: var(--hero-bg); color: #fff; border-radius: 24px; padding: clamp(22px, 3vw, 36px); }
.op-list-in h2 { color: #fff; }
.op-list-in .label { color: #b9cbdb; }
.op-items { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.op-items li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; background: rgba(255, 255, 255, .08); border-radius: 12px; padding: 10px 12px; }
.op-items small { color: #b9cbdb; font-size: 12px; }
.op-items button { background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; width: 32px; height: 32px; }
.op-empty { color: #b9cbdb; } .op-empty b { color: #fff; }
.op-form { background: #fff; color: #14202b; border-radius: 18px; padding: 22px; }
.op-form h3 { margin: 0; font-size: 22px; }
.op-form .btn { width: 100%; }
.op-legal { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.op-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px; background: #0f2a40; color: #fff; border-radius: 999px; padding: 8px 8px 8px 20px; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .5); font-weight: 700; }
/* homepage teaser */
.op-teaser { position: relative; padding-top: 20px; }
.op-teaser > .op-stripe { position: absolute; left: 0; right: 0; top: -1px; margin: 0; border-radius: 3px; }
.op-t-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center; }
.op-t-in > div:first-child > * + * { margin-top: 12px; }
.op-t-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.op-t-tiles > :last-child { grid-column: span 2; }
.op-t-tiles > * { display: flex; flex-direction: column; justify-content: flex-end; min-height: 130px; border-radius: 16px; overflow: hidden; background: var(--hero-bg); color: #fff; padding: 14px; font: 800 1rem var(--display); }
.op-t-tiles > * > * { margin: 0 !important; position: relative; z-index: 1; }
.op-t-tiles .t-ico img { width: 30px; height: 30px; margin-bottom: 8px; }
.op-t-tiles .t-photo { position: absolute !important; inset: 0; z-index: 0 !important; }
.op-t-tiles .t-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.op-t-tiles .t-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(10, 26, 40, .85)); }
.op-t-tiles .t-label a { color: #fff; }
.op-t-tiles .t-by { font: 600 12px var(--body); opacity: .85; }
.op-t-tiles .t-itni { box-shadow: inset 0 4px 0 var(--t-itni); } .op-t-tiles .t-brisk { box-shadow: inset 0 4px 0 var(--t-brisk); }
.op-t-tiles .t-bm { box-shadow: inset 0 4px 0 var(--t-bm); } .op-t-tiles .t-epos { box-shadow: inset 0 4px 0 var(--t-epos); }
.op-t-tiles > *:hover, .op-t-tiles > *:focus-within { outline: 3px solid var(--sun); }

/* ---------- part of BRISK band ---------- */
.b-brisk-band { background: #14202b; color: #fff; border-top: 6px solid var(--brisk) !important; padding-block: 36px; }
.brisk-band { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
.brisk-band .bb-logo img { height: 52px; width: auto; }
.bb-t > * { margin: 0; } .bb-t h2 { font-size: clamp(22px, 2.6vw, 32px); color: #fff; } .bb-t p { color: #c9d2da; margin-top: 6px; }
.bb-btn .wp-block-button__link { background: transparent; border: 2px solid var(--brisk); color: #fff; padding: 12px 22px; }
.bb-btn .wp-block-button__link:hover { background: var(--brisk); }

/* ---------- footer ---------- */
.site-footer { background: var(--foot-bg); color: #c3ccd4; font-size: 15px; }
.site-footer > * { margin-block: 0; }
.site-footer a { color: #e6ebef; text-decoration: none; }
.site-footer a:hover { color: var(--sun); text-decoration: underline; }
.fgrid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px 28px; padding-block: 52px 36px; }
.fcol { min-width: 0; }
.fcol h2 { font: 800 17px var(--display); color: var(--sun); margin: 0 0 14px; }
.fcol h2 a { color: inherit; }
.fcol .fh2 { margin-top: 22px; }
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fcontact { display: grid; gap: 12px; align-content: start; }
.fcontact > * { margin: 0; }
.fc-grp { display: grid; gap: 8px; } .fc-grp > * { margin: 0; }
.fphone a { font: 800 22px var(--display); color: #fff; }
.fsub, .site-footer .address { font-size: 14px; color: #93a1ad; }
.op-badge-foot img { width: 220px; margin-top: 16px; }
.ftrust { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; border-top: 1px solid #26333f; padding-block: 18px; font-size: 13px; }
.ftrust > * { margin: 0 !important; } .ftrust .ft-k { color: #93a1ad; }
.ftrust img { display: block; height: 14px; width: auto; opacity: .9; } .ftrust .ft-el img { height: 24px; }
.ftrust > .soon { margin-left: -12px !important; padding: 5px 9px; font-size: 11px; }
.flegal { border-top: 1px solid #26333f; font-size: 13px; color: #93a1ad; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: center; padding-block: 20px 28px; }
.flegal > * { margin: 0; } .flegal p { max-width: 80ch; }
.flegal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.flegal a { color: #c3ccd4 !important; text-decoration: underline; }
.mbar { display: none !important; }
@media (max-width: 860px) {
	.mbar { display: flex !important; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0 !important; background: var(--hero-bg); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); flex-wrap: nowrap; }
	.mbar .wp-block-button { flex: 1; }
	.mbar .wp-block-button__link { width: 100%; padding: 12px 8px; font-weight: 700; }
	.mbar .m-call .wp-block-button__link { background: transparent; border: 2px solid #fff; color: #fff; }
	.mbar .m-quote .wp-block-button__link { background: var(--sun); color: #0f2a40; }
	.site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
	body.page-id-9612 .mbar .m-quote, body.page-id-9613 .mbar .m-quote { display: none; }
	.op-bar { bottom: 84px; }
	body.has-hero-acts:not(.mbar-on) .mbar { display: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
	.case-grid:has(> :nth-child(3)) { grid-template-columns: 1fr 1fr; } .case-grid:has(> :nth-child(3)) > :nth-child(3) { grid-column: 1 / -1; }
	.guide-grid { grid-template-columns: 1fr 1fr; }
	.pk-top, .op-top { grid-template-columns: 1fr; }
	.pk-photo { aspect-ratio: 21/8; }
	.why, .limits { grid-template-columns: 1fr 1fr; }
	.steps { grid-template-columns: repeat(3, 1fr); }
	.next3 { grid-template-columns: 1fr 1fr; }
	.fgrid { grid-template-columns: repeat(3, 1fr); } .fcontact { grid-column: 1 / -1; }
	.op-brands { grid-template-columns: repeat(3, 1fr); } .op-grid, p.op-shop, .areas { grid-template-columns: 1fr 1fr; }
	.op-t-in { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
	.case-grid:has(> :nth-child(3)) { grid-template-columns: 1fr; }
	.hero, .hero.hub, .split, .qstart, .tiles2, .tracks, .brands, .case-grid, .ct-grid, .op-list-in, .op-how, .op-group-top { grid-template-columns: 1fr; }
	.picks { grid-template-columns: 1fr; }
	.pick { flex-direction: row; }
	.pick .card-img { width: 38%; flex: none; aspect-ratio: auto; }
	.pick > :not(.card-img) { margin-left: 0 !important; }
	.pick { display: grid; grid-template-columns: 38% 1fr; }
	.pick .card-img { grid-row: 1 / span 4; width: auto; }
	.pick .card-title { padding: 16px 18px 0; } .pick > p { padding: 6px 18px 0; } .pick > p.go { margin: 12px 18px 16px !important; padding: 12px 16px; }
	.btile2 { grid-template-columns: 1fr; } .btile2 > * { grid-column: 1; } .btile2 > .bt-vis { grid-row: auto; min-height: 200px; }
	.cost-facts { grid-template-columns: 1fr 1fr; }
	.brisk-band { grid-template-columns: 1fr; }
	.op-hero .pk-photo { display: none; }
	.bphotos { grid-template-columns: 1fr; } .bphotos .photo { height: 240px; }
}
@media (max-width: 600px) {
	.guide-grid { grid-template-columns: 1fr; }
	.band { padding-block: 40px; }
	.why, .steps, .limits, .next3, .grid2, .op-grid, p.op-shop, .areas, .sources, .contents { grid-template-columns: 1fr; columns: 1; }
	.op-grid > .op-photo { grid-row: auto; min-height: 200px; }
	.op-brands { grid-template-columns: 1fr 1fr; } .op-brands:not(.mini) > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
	.op-t-tiles { grid-template-columns: 1fr 1fr; } .op-t-tiles > * { min-height: 96px; }
	.pick { grid-template-columns: 1fr; } .pick .card-img { grid-row: auto; aspect-ratio: 400/180; }
	.pk-photo { display: none; }
	.pk-head h1 { font-size: 38px; }
	.pk-head h1 em { display: table; margin-top: .14em; }
	.hero-ticks { flex-direction: column; gap: 8px; }
	.ctas .wp-block-buttons, .ctas .wp-block-button, .ctas .wp-block-button__link { width: 100%; text-align: center; }
	.hero-acts, .hero-acts .wp-block-button, .hero-acts .wp-block-button__link { width: 100%; text-align: center; }
	.acts, .acts .wp-block-buttons, .cta-btn, .cta-btn .wp-block-button__link { width: 100%; text-align: center; }
	.fgrid { grid-template-columns: 1fr 1fr; }
	.wp-block-table table { min-width: 560px; }
	.wp-block-table table:not(:has(th:nth-child(4), td:nth-child(4))) { min-width: 0; font-size: .86rem; }
	.wp-block-table table:not(:has(th:nth-child(4), td:nth-child(4))) :is(th, td) { padding: 10px 8px; }
	.wp-block-table table:not(:has(th:nth-child(4), td:nth-child(4))) tbody th { width: 29%; font-size: .8rem; }
}
@media (max-width: 420px) { .case-stats, .cost-facts { grid-template-columns: 1fr; } .fgrid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
	.fareas ul { display: none; } .fcol.fareas h2 { margin-bottom: 0; }
	.fareas h2 a::after { content: " →"; }
	/* battery photos side by side and shorter, so the page heading shows on the first screen */
	.bphotos { grid-template-columns: 1fr 1fr; gap: 10px; } .bphotos .photo { height: 170px; }
	.bphotos .photo figcaption { left: 8px; right: 8px; bottom: 8px; font-size: 11.5px; padding: 5px 8px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* last reviewed / last updated strip (guide and legal templates): part of the footer, not a stray light band */
.b-reviewed { background: var(--foot-bg); border-top: 0 !important; margin-block-start: 0 !important; padding-block: 16px; color: #93a1ad; }
.b-reviewed .reviewed { gap: 4px 12px; align-items: baseline; font-size: 13px; }
.b-reviewed .reviewed > * { margin: 0; } .b-reviewed .label { color: #93a1ad; }
.b-reviewed .wp-block-post-date { color: #c3ccd4; }

/* launch fixes */
.wp-block-post-content > * + *, .wp-block-post-content > .alignfull { margin-block: 0; }
@media (min-width: 1101px) {
	.mainnav .wp-block-navigation__container { flex-wrap: nowrap; gap: 18px; }
	.mainnav .wp-block-navigation-item__content { white-space: nowrap; }
}

/* Logos sized by equal visual area (generated by build.py from each trimmed logo's aspect ratio). */
.brands-row img[src$="/brisk-technology-white.webp"] { height: 30.7px; max-height: none; width: auto; }
.brands-row img[src$="/ecoflow-logo-white.svg"] { height: 12.2px; max-height: none; width: auto; }
.brands-row img[src$="/ecoflow-logo.svg"] { height: 12.2px; max-height: none; width: auto; }
.brands-row img[src$="/eleven-logo-white.svg"] { height: 26.8px; max-height: none; width: auto; }
.brands-row img[src$="/eleven-logo.svg"] { height: 26.8px; max-height: none; width: auto; }
.brands-row img[src$="/logo-bluemonkee.png"] { height: 16.7px; max-height: none; width: auto; }
.brands-row img[src$="/logo-brisk-solar-orange.png"] { height: 30.7px; max-height: none; width: auto; }
.brands-row img[src$="/logo-brisk-tech.png"] { height: 30.7px; max-height: none; width: auto; }
.brands-row img[src$="/logo-eposni.png"] { height: 25.4px; max-height: none; width: auto; }
.brands-row img[src$="/logo-itni.png"] { height: 29.1px; max-height: none; width: auto; }
.brands-row img[src$="/p-dojo.svg"] { height: 25.9px; max-height: none; width: auto; }
.brands-row img[src$="/p-google.svg"] { height: 29.0px; max-height: none; width: auto; }
.brands-row img[src$="/p-icrtouch.webp"] { height: 21.6px; max-height: none; width: auto; }
.brands-row img[src$="/p-microsoft.webp"] { height: 23.5px; max-height: none; width: auto; }
.brands-row img[src$="/p-myepos.webp"] { height: 25.6px; max-height: none; width: auto; }
.brands-row img[src$="/p-teya.svg"] { height: 30.2px; max-height: none; width: auto; }
.brands-row img[src$="/p-unifi.svg"] { height: 28.0px; max-height: none; width: auto; }
.brands-row img[src$="/p-wordpress.svg"] { height: 51.0px; max-height: none; width: auto; }
.brands-row img[src$="/p-yessensei.svg"] { height: 26.8px; max-height: none; width: auto; }
.ftrust img[src$="/brisk-technology-white.webp"] { height: 24.8px; max-height: none; width: auto; }
.ftrust img[src$="/ecoflow-logo-white.svg"] { height: 9.8px; max-height: none; width: auto; }
.ftrust img[src$="/ecoflow-logo.svg"] { height: 9.8px; max-height: none; width: auto; }
.ftrust img[src$="/eleven-logo-white.svg"] { height: 21.7px; max-height: none; width: auto; }
.ftrust img[src$="/eleven-logo.svg"] { height: 21.7px; max-height: none; width: auto; }
.ftrust img[src$="/logo-bluemonkee.png"] { height: 13.5px; max-height: none; width: auto; }
.ftrust img[src$="/logo-brisk-solar-orange.png"] { height: 24.8px; max-height: none; width: auto; }
.ftrust img[src$="/logo-brisk-tech.png"] { height: 24.8px; max-height: none; width: auto; }
.ftrust img[src$="/logo-eposni.png"] { height: 20.6px; max-height: none; width: auto; }
.ftrust img[src$="/logo-itni.png"] { height: 23.5px; max-height: none; width: auto; }
.ftrust img[src$="/p-dojo.svg"] { height: 20.9px; max-height: none; width: auto; }
.ftrust img[src$="/p-google.svg"] { height: 23.5px; max-height: none; width: auto; }
.ftrust img[src$="/p-icrtouch.webp"] { height: 17.5px; max-height: none; width: auto; }
.ftrust img[src$="/p-microsoft.webp"] { height: 19.0px; max-height: none; width: auto; }
.ftrust img[src$="/p-myepos.webp"] { height: 20.7px; max-height: none; width: auto; }
.ftrust img[src$="/p-teya.svg"] { height: 24.4px; max-height: none; width: auto; }
.ftrust img[src$="/p-unifi.svg"] { height: 22.7px; max-height: none; width: auto; }
.ftrust img[src$="/p-wordpress.svg"] { height: 41.2px; max-height: none; width: auto; }
.ftrust img[src$="/p-yessensei.svg"] { height: 21.7px; max-height: none; width: auto; }
.op-brands img[src$="/brisk-technology-white.webp"] { height: 39.0px; max-height: none; width: auto; }
.op-brands img[src$="/ecoflow-logo-white.svg"] { height: 15.4px; max-height: none; width: auto; }
.op-brands img[src$="/ecoflow-logo.svg"] { height: 15.4px; max-height: none; width: auto; }
.op-brands img[src$="/eleven-logo-white.svg"] { height: 34.1px; max-height: none; width: auto; }
.op-brands img[src$="/eleven-logo.svg"] { height: 34.1px; max-height: none; width: auto; }
.op-brands img[src$="/logo-bluemonkee.png"] { height: 21.2px; max-height: none; width: auto; }
.op-brands img[src$="/logo-brisk-solar-orange.png"] { height: 39.0px; max-height: none; width: auto; }
.op-brands img[src$="/logo-brisk-tech.png"] { height: 39.0px; max-height: none; width: auto; }
.op-brands img[src$="/logo-eposni.png"] { height: 32.3px; max-height: none; width: auto; }
.op-brands img[src$="/logo-itni.png"] { height: 36.9px; max-height: none; width: auto; }
.op-brands img[src$="/p-dojo.svg"] { height: 32.9px; max-height: none; width: auto; }
.op-brands img[src$="/p-google.svg"] { height: 36.9px; max-height: none; width: auto; }
.op-brands img[src$="/p-icrtouch.webp"] { height: 27.5px; max-height: none; width: auto; }
.op-brands img[src$="/p-microsoft.webp"] { height: 29.9px; max-height: none; width: auto; }
.op-brands img[src$="/p-myepos.webp"] { height: 32.5px; max-height: none; width: auto; }
.op-brands img[src$="/p-teya.svg"] { height: 38.4px; max-height: none; width: auto; }
.op-brands img[src$="/p-unifi.svg"] { height: 35.6px; max-height: none; width: auto; }
.op-brands img[src$="/p-wordpress.svg"] { height: 64.8px; max-height: none; width: auto; }
.op-brands img[src$="/p-yessensei.svg"] { height: 34.1px; max-height: none; width: auto; }
.op-brands.mini img[src$="/brisk-technology-white.webp"] { height: 26.9px; max-height: none; width: auto; }
.op-brands.mini img[src$="/ecoflow-logo-white.svg"] { height: 10.7px; max-height: none; width: auto; }
.op-brands.mini img[src$="/ecoflow-logo.svg"] { height: 10.7px; max-height: none; width: auto; }
.op-brands.mini img[src$="/eleven-logo-white.svg"] { height: 23.5px; max-height: none; width: auto; }
.op-brands.mini img[src$="/eleven-logo.svg"] { height: 23.5px; max-height: none; width: auto; }
.op-brands.mini img[src$="/logo-bluemonkee.png"] { height: 14.6px; max-height: none; width: auto; }
.op-brands.mini img[src$="/logo-brisk-solar-orange.png"] { height: 26.9px; max-height: none; width: auto; }
.op-brands.mini img[src$="/logo-brisk-tech.png"] { height: 26.9px; max-height: none; width: auto; }
.op-brands.mini img[src$="/logo-eposni.png"] { height: 22.3px; max-height: none; width: auto; }
.op-brands.mini img[src$="/logo-itni.png"] { height: 25.5px; max-height: none; width: auto; }
.op-brands.mini img[src$="/p-dojo.svg"] { height: 22.7px; max-height: none; width: auto; }
.op-brands.mini img[src$="/p-google.svg"] { height: 25.5px; max-height: none; width: auto; }
.op-brands.mini img[src$="/p-icrtouch.webp"] { height: 19.0px; max-height: none; width: auto; }
.op-brands.mini img[src$="/p-microsoft.webp"] { height: 20.6px; max-height: none; width: auto; }
.op-brands.mini img[src$="/p-myepos.webp"] { height: 22.4px; max-height: none; width: auto; }
.op-brands.mini img[src$="/p-teya.svg"] { height: 26.5px; max-height: none; width: auto; }
.op-brands.mini img[src$="/p-unifi.svg"] { height: 24.6px; max-height: none; width: auto; }
.op-brands.mini img[src$="/p-wordpress.svg"] { height: 44.7px; max-height: none; width: auto; }
.op-brands.mini img[src$="/p-yessensei.svg"] { height: 23.5px; max-height: none; width: auto; }
.op-partners img[src$="/brisk-technology-white.webp"] { height: 26.9px; max-height: none; width: auto; }
.op-partners img[src$="/ecoflow-logo-white.svg"] { height: 10.7px; max-height: none; width: auto; }
.op-partners img[src$="/ecoflow-logo.svg"] { height: 10.7px; max-height: none; width: auto; }
.op-partners img[src$="/eleven-logo-white.svg"] { height: 23.5px; max-height: none; width: auto; }
.op-partners img[src$="/eleven-logo.svg"] { height: 23.5px; max-height: none; width: auto; }
.op-partners img[src$="/logo-bluemonkee.png"] { height: 14.6px; max-height: none; width: auto; }
.op-partners img[src$="/logo-brisk-solar-orange.png"] { height: 26.9px; max-height: none; width: auto; }
.op-partners img[src$="/logo-brisk-tech.png"] { height: 26.9px; max-height: none; width: auto; }
.op-partners img[src$="/logo-eposni.png"] { height: 22.3px; max-height: none; width: auto; }
.op-partners img[src$="/logo-itni.png"] { height: 25.5px; max-height: none; width: auto; }
.op-partners img[src$="/p-dojo.svg"] { height: 22.7px; max-height: none; width: auto; }
.op-partners img[src$="/p-google.svg"] { height: 25.5px; max-height: none; width: auto; }
.op-partners img[src$="/p-icrtouch.webp"] { height: 19.0px; max-height: none; width: auto; }
.op-partners img[src$="/p-microsoft.webp"] { height: 20.6px; max-height: none; width: auto; }
.op-partners img[src$="/p-myepos.webp"] { height: 22.4px; max-height: none; width: auto; }
.op-partners img[src$="/p-teya.svg"] { height: 26.5px; max-height: none; width: auto; }
.op-partners img[src$="/p-unifi.svg"] { height: 24.6px; max-height: none; width: auto; }
.op-partners img[src$="/p-wordpress.svg"] { height: 44.7px; max-height: none; width: auto; }
.op-partners img[src$="/p-yessensei.svg"] { height: 23.5px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/brisk-technology-white.webp"] { height: 25.5px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/ecoflow-logo-white.svg"] { height: 10.1px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/ecoflow-logo.svg"] { height: 10.1px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/eleven-logo-white.svg"] { height: 22.3px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/eleven-logo.svg"] { height: 22.3px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/logo-bluemonkee.png"] { height: 13.9px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/logo-brisk-solar-orange.png"] { height: 25.5px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/logo-brisk-tech.png"] { height: 25.5px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/logo-eposni.png"] { height: 21.2px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/logo-itni.png"] { height: 24.2px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/p-dojo.svg"] { height: 21.5px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/p-google.svg"] { height: 24.2px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/p-icrtouch.webp"] { height: 18.0px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/p-microsoft.webp"] { height: 19.6px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/p-myepos.webp"] { height: 21.3px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/p-teya.svg"] { height: 25.1px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/p-unifi.svg"] { height: 23.3px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/p-wordpress.svg"] { height: 42.4px; max-height: none; width: auto; }
.btile2 > .bt-logo img[src$="/p-yessensei.svg"] { height: 22.3px; max-height: none; width: auto; }
.case-tag img[src$="/brisk-technology-white.webp"] { height: 18.0px; max-height: none; width: auto; }
.case-tag img[src$="/ecoflow-logo-white.svg"] { height: 7.2px; max-height: none; width: auto; }
.case-tag img[src$="/ecoflow-logo.svg"] { height: 7.2px; max-height: none; width: auto; }
.case-tag img[src$="/eleven-logo-white.svg"] { height: 15.8px; max-height: none; width: auto; }
.case-tag img[src$="/eleven-logo.svg"] { height: 15.8px; max-height: none; width: auto; }
.case-tag img[src$="/logo-bluemonkee.png"] { height: 9.8px; max-height: none; width: auto; }
.case-tag img[src$="/logo-brisk-solar-orange.png"] { height: 18.0px; max-height: none; width: auto; }
.case-tag img[src$="/logo-brisk-tech.png"] { height: 18.0px; max-height: none; width: auto; }
.case-tag img[src$="/logo-eposni.png"] { height: 15.0px; max-height: none; width: auto; }
.case-tag img[src$="/logo-itni.png"] { height: 17.1px; max-height: none; width: auto; }
.case-tag img[src$="/p-dojo.svg"] { height: 15.2px; max-height: none; width: auto; }
.case-tag img[src$="/p-google.svg"] { height: 17.1px; max-height: none; width: auto; }
.case-tag img[src$="/p-icrtouch.webp"] { height: 12.7px; max-height: none; width: auto; }
.case-tag img[src$="/p-microsoft.webp"] { height: 13.8px; max-height: none; width: auto; }
.case-tag img[src$="/p-myepos.webp"] { height: 15.1px; max-height: none; width: auto; }
.case-tag img[src$="/p-teya.svg"] { height: 17.8px; max-height: none; width: auto; }
.case-tag img[src$="/p-unifi.svg"] { height: 16.5px; max-height: none; width: auto; }
.case-tag img[src$="/p-wordpress.svg"] { height: 30.0px; max-height: none; width: auto; }
.case-tag img[src$="/p-yessensei.svg"] { height: 15.8px; max-height: none; width: auto; }

/* 1.0.7: logos keep their shape when a tile is narrower than the logo (Blue Monkee on phones) */
.op-brands img, .brands-row img, .ftrust img, .op-partners img, .btile2 > .bt-logo img, .case-tag img { object-fit: contain; max-width: 100%; }

/* 1.0.8: One partner splits our brands from partners; Eleven marked coming soon in the partner band */
.op-sets { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; }
.op-set { display: grid; gap: 10px; align-content: start; }
.op-set-label { margin: 0; font: 800 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #5b6470); }
.op-brands.b3 { grid-template-columns: repeat(3, 1fr); }
.op-brands.b2 { grid-template-columns: repeat(2, 1fr); }
.op-partners .is-soon { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; }
.op-partners .is-soon figcaption { margin: 0; background: var(--sun); color: var(--hero-bg); font: 800 10px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }
@media (max-width: 1000px) { .op-sets { grid-template-columns: 1fr; } .op-brands.b3 { grid-template-columns: repeat(3, 1fr); } .op-brands.b2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .op-brands.b3 { grid-template-columns: 1fr 1fr; } }
/* 1.0.9: both sets line up across the top */
.op-sets > * { margin-block: 0 !important; }