/* The Finish Gallery section (finish-guides.php): Finishes 101, the finish guides and the Finish Gallery page — Simone's
   drafts of 2026-10-29 on the journal's post layout and type scale (bhf-journal.css): one 760px column (680 of text), eyebrows
   14/700/.12em #8A8477, Noto Serif 400 headings in ink, body Montserrat 17/400, captions 13–14px, square pictures.
   Everything sits inside main.bj.bfg, so nothing here reaches the rest of the site. */
.bfg{--mut:#6F6A5E;padding-bottom:96px}
.bfg p,.bfg ul,.bfg ol,.bfg figure,.bfg h4,.bfg dl,.bfg dd,.bfg blockquote{margin:0;padding:0}
.bfg figcaption,.bfg figcaption *,.bfg blockquote,.bfg cite{font-style:normal}
.bfg figcaption a,.bfg .bfg-credit a{color:inherit;border-bottom:1px solid currentColor}
.bfg h4{font-family:var(--serif);font-weight:400;line-height:1.2;color:var(--ink);letter-spacing:normal;text-transform:none}
.bfg .bfg-wrap{max-width:1200px;margin:0 auto;padding-inline:40px}
@media(max-width:640px){.bfg .bfg-wrap{padding-inline:20px}}

/* ---------- cover (the journal's: label, title, then picture beside the subtitle and links) ---------- */
.bfg .bj-cover .bj-cover-grid>img{background:#f3f2ef}
.bfg .bj-cover .bj-links{flex-direction:column;align-items:flex-start;gap:16px;margin-top:28px}
.bfg .bfg-meta{margin-top:20px;font-size:14px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:var(--mut)}
@media(max-width:700px){.bfg .bj-cover{padding-top:48px}.bfg .bj-cover-h1{margin:14px 0 28px}}

/* ---------- running text ---------- */
.bfg .bfg-lede{margin-top:72px;font-size:clamp(19px,1.5vw,21px);line-height:1.5;letter-spacing:-.01em;color:var(--ink)}
.bfg .bfg-sec{margin-top:96px}
.bfg .bfg-sec>.bj-eyebrow+h2{margin-top:14px}
.bfg .bfg-sec h2,.bfg .bfg-h2{font-size:clamp(30px,2.6vw,38px);line-height:1.1;letter-spacing:-.01em;margin:0 0 22px}
.bfg .bfg-sec h3,.bfg .bfg-h3{font-size:clamp(21px,1.6vw,24px);line-height:1.2;margin:56px 0 12px}
.bfg .bfg-sec h4{font-size:21px;margin:0 0 6px}
.bfg .bfg-sec p,.bfg .bfg-sec li,.bfg .bfg-lede+p{font-size:17px;line-height:1.5;color:var(--body)}
.bfg .bfg-sec p+p,.bfg .bfg-sec p+ul,.bfg .bfg-sec ul+p{margin-top:16px}
.bfg .bfg-sec ul.bfg-list{padding-left:1.2em;margin-top:16px}
.bfg .bfg-sec ul.bfg-list li+li{margin-top:8px}
.bfg .bfg-sec strong,.bfg .bfg-sec b{color:var(--ink);font-weight:600}
.bfg .bfg-sec p a:not(.bj-tl),.bfg .bfg-sec li a:not(.bj-tl),.bfg .bj-a a:not(.bj-tl),.bfg .bfg-note a{color:var(--ink);border-bottom:1px solid var(--ink)}
/* labels written as <p> must not take the running-text size above */
.bfg .bfg-sec .bj-eyebrow,.bfg .bfg-sec .bfg-cat,.bfg .bfg-sec .bfg-sw-l,.bfg .bfg-sec .bfg-spec-end,.bfg .bfg-sec .bfg-n{font-size:14px;font-weight:700;letter-spacing:.12em;line-height:1.2;text-transform:uppercase;color:#8a8477}
.bfg .bfg-sec .bfg-scale{font-size:13px;line-height:1.3;color:var(--mut)}
.bfg .bfg-sec .bfg-comp{font-size:14px;line-height:1.3;color:var(--ink)}
.bfg .bfg-sec .bfg-gap{margin-top:32px}
.bfg .bfg-sec .bfg-step{margin-top:56px}
.bfg .bfg-sec .bfg-step+h3{margin-top:8px}
.bfg .bj-cover-grid>figure img{width:100%;aspect-ratio:1/1;object-fit:cover}
.bfg .bfg-cards.bfg-knobs img{object-fit:contain;background:#fff}
.bfg .bfg-sec .bfg-care4 h3,.bfg .bfg-sec .bfg-steps h3{margin:0 0 6px;font-size:21px}
.bfg .bfg-go{margin-top:22px}
.bfg .bfg-go+p,.bfg .bfg-go+.bfg-go{margin-top:16px}
.bfg .bfg-sec p.bfg-note,.bfg .bfg-note{font-size:15px;line-height:1.5;color:var(--mut)}
.bfg .bfg-sec .bfg-note{margin-top:16px}
.bfg .bfg-cat{display:block;font-size:14px;font-weight:700;letter-spacing:.12em;line-height:1.2;text-transform:uppercase;color:#8a8477}
.bfg .bfg-credit{display:block;font-size:13px;line-height:1.4;color:var(--mut);margin-top:6px}

/* ---------- picture cards: 3, 4 or 5 across (phones: picture beside the words) ---------- */
.bfg .bfg-cards{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:24px;margin-top:36px}
.bfg .bfg-cards.bfg-c4{--n:4;gap:20px}
.bfg .bfg-cards.bfg-c5{--n:5;gap:16px}
.bfg .bfg-cards figure{min-width:0}
.bfg .bfg-cards img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#f3f2ef}
.bfg .bfg-cards .bfg-cat{margin:16px 0 6px}
.bfg .bfg-sec .bfg-cards h3,.bfg .bfg-sec .bfg-cards h4{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;margin:14px 0 0;color:var(--ink)}
.bfg .bfg-sec .bfg-cards .bfg-cat+h3,.bfg .bfg-sec .bfg-cards .bfg-cat+h4{margin-top:0}
.bfg .bfg-sec .bfg-cards p{font-size:15px;line-height:1.45;margin-top:8px}
.bfg .bfg-sec .bfg-c5 p{font-size:14px}
@media(max-width:900px){.bfg .bfg-cards.bfg-c5{--n:3;row-gap:28px}}
@media(max-width:600px){
	.bfg .bfg-cards,.bfg .bfg-cards.bfg-c4,.bfg .bfg-cards.bfg-c5{grid-template-columns:1fr;gap:20px}
	.bfg .bfg-cards figure{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:18px;align-items:center}
	.bfg .bfg-cards figcaption{min-width:0}
	.bfg .bfg-cards .bfg-cat{margin-top:0}
	.bfg .bfg-sec .bfg-cards h3,.bfg .bfg-sec .bfg-cards h4{margin-top:0}
}

/* ---------- product stages (knobs, pulls): picture, serif label, one short line; stays 3 across on phones ---------- */
.bfg .bfg-stages{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:24px;margin-top:36px;text-align:center}
.bfg .bfg-stages.bfg-c2{--n:2;gap:32px}
.bfg .bfg-stages img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff}
.bfg .bfg-stages.bfg-wide img{aspect-ratio:2/1;object-fit:cover}
.bfg .bfg-stages figcaption{margin-top:14px}
.bfg .bfg-stages b{display:block;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;color:var(--ink)}
.bfg .bfg-stages span{display:block;font-size:14px;line-height:1.4;color:var(--mut);margin-top:4px}
.bfg .bfg-sec p.bfg-cap,.bfg .bfg-cap{font-size:14px;line-height:1.45;color:var(--mut);margin-top:14px}
@media(max-width:600px){.bfg .bfg-stages{gap:12px}.bfg .bfg-stages b{font-size:17px}.bfg .bfg-stages span{font-size:13px}}

/* ---------- swatches: finish discs with their names; a click opens the bigger disc (bhf-finish.js) ---------- */
.bfg .bfg-sw{display:flex;flex-wrap:wrap;gap:18px 8px;margin-top:20px;list-style:none;padding:0}
.bfg .bfg-sw figure{width:calc(var(--d,96px) + 20px);text-align:center}
.bfg .bfg-sw img{display:block;width:var(--d,96px);height:var(--d,96px);margin:0 auto;object-fit:contain;cursor:zoom-in;border-radius:50%}
.bfg .bfg-sw img:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
.bfg .bfg-sw figcaption{margin-top:8px;font-size:13px;line-height:1.3;color:var(--body)}
.bfg .bfg-sw figcaption b{display:block;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:2px}
.bfg .bfg-sw.bfg-spread{justify-content:space-around}
.bfg .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bfg .bfg-sw.bfg-sm{--d:72px;gap:16px 6px}
.bfg .bfg-sw.bfg-sm figure{width:calc(var(--d) + 14px)}
.bfg .bfg-sw.bfg-md{--d:112px;gap:22px 16px}
.bfg .bfg-sw.bfg-lg{--d:150px;gap:24px 28px}
.bfg .bfg-sw-l{margin-top:28px;font-size:14px;font-weight:700;letter-spacing:.12em;line-height:1.2;text-transform:uppercase;color:#8a8477}
.bfg .bfg-sw-l+.bfg-sw{margin-top:14px}
.bfg .bfg-scale{display:flex;justify-content:space-between;margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
@media(max-width:600px){.bfg .bfg-sw{--d:72px}.bfg .bfg-sw.bfg-sm{--d:60px}.bfg .bfg-sw.bfg-md{--d:72px;gap:18px 10px}.bfg .bfg-sw.bfg-lg{--d:96px;gap:20px 12px}}

/* the spectrum (Finishes 101): every finish from most changing to most lasting, a line down the left */
.bfg .bfg-spec{margin-top:36px;border-left:1px solid var(--line);padding-left:24px}
.bfg .bfg-spec-end{font-size:14px;font-weight:700;letter-spacing:.12em;line-height:1.2;text-transform:uppercase;color:#8a8477}
.bfg .bfg-grp{padding:28px 0;border-bottom:1px solid var(--line)}
.bfg .bfg-spec-end+.bfg-grp{margin-top:16px;border-top:1px solid var(--line)}
.bfg .bfg-grp+.bfg-spec-end{margin-top:20px}
.bfg .bfg-sec .bfg-grp h3{margin:0 0 6px;font-size:22px}
.bfg .bfg-sec .bfg-grp>p{font-size:15px;line-height:1.45}
.bfg .bfg-row{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;padding-top:18px}
.bfg .bfg-row+.bfg-row{margin-top:18px;border-top:1px dashed var(--line)}
.bfg .bfg-row .bfg-sw-l{margin-top:22px}
.bfg .bfg-row .bfg-sw{margin-top:0}
@media(max-width:600px){.bfg .bfg-spec{padding-left:14px}.bfg .bfg-row{grid-template-columns:1fr;gap:0}.bfg .bfg-row .bfg-sw-l{margin-top:0}.bfg .bfg-row .bfg-sw{margin-top:12px}}

/* two alloys side by side (Solid Bronze) */
.bfg .bfg-alloys{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:32px 0 28px}
.bfg .bfg-alloys>div{border-top:1px solid var(--line);padding-top:20px}
.bfg .bfg-sec .bfg-alloys h3{margin:8px 0 10px}
.bfg .bfg-sec .bfg-alloys p:not(.bfg-cat){font-size:15px;line-height:1.45}
@media(max-width:600px){.bfg .bfg-alloys{grid-template-columns:1fr}}

/* ---------- picture beside words, one per line (Finishes 101 "The colour") ---------- */
.bfg .bfg-media{margin-top:24px;border-top:1px solid var(--line)}
.bfg .bfg-media>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.bfg .bfg-media img{width:100%;aspect-ratio:1/1;object-fit:cover}
.bfg .bfg-sec .bfg-media p{font-size:15px;line-height:1.45}
@media(max-width:600px){.bfg .bfg-media>div{grid-template-columns:88px minmax(0,1fr);gap:16px}}

/* ---------- numbered steps ---------- */
.bfg .bfg-steps{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:28px;margin-top:32px;list-style:none;padding:0}
.bfg .bfg-steps.bfg-c4{--n:4;gap:24px}
.bfg .bfg-steps.bfg-line{border-top:1px solid var(--line);padding-top:24px}
.bfg .bfg-steps li{min-width:0}
.bfg .bfg-n{display:block;font-size:14px;font-weight:700;letter-spacing:.12em;line-height:1.2;color:#8a8477;margin-bottom:12px}
.bfg .bfg-sec .bfg-steps p{font-size:15px;line-height:1.45}
@media(max-width:760px){.bfg .bfg-steps.bfg-c4{--n:2;row-gap:28px}}
@media(max-width:600px){.bfg .bfg-steps{grid-template-columns:1fr;gap:22px}.bfg .bfg-steps.bfg-c4{grid-template-columns:1fr 1fr}}

/* ---------- tables: where it changes most, where the colour comes from ---------- */
/* Hello's reset.css boxes every cell, greys odd rows and shades rows on hover: all switched off here, so only the rules below show */
.bfg .bfg-table{width:100%;border-collapse:collapse;border-spacing:0;margin:20px 0 0;border:0;border-top:1.5px solid var(--ink);table-layout:fixed;font-size:inherit;background:none}
.bfg .bfg-table th,.bfg .bfg-table td{padding:18px 12px;text-align:left;vertical-align:top;border:0;border-bottom:1px solid var(--line);background:none;font-size:15px;line-height:1.5;color:var(--body);font-weight:400}
.bfg .bfg-table thead tr:first-child>*{border-top:0}   /* beats Hello's header-cell top border, which otherwise wins over the ink rule */
.bfg .bfg-table tr>:first-child{padding-left:0;width:24%}   /* first column on the text's left edge; widths go on every row because table-layout:fixed reads the first one */
.bfg .bfg-table tr>:last-child{padding-right:0}
.bfg .bfg-table thead th,.bfg .bfg-table thead td{padding-block:14px}
.bfg .bfg-table thead th{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a8477}
.bfg .bfg-table tbody th{font-family:var(--serif);font-size:19px;line-height:1.25;color:var(--ink)}
.bfg .bfg-table td b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.25;color:var(--ink);margin-bottom:6px}
.bfg .bfg-table.bfg-t3 tr>:first-child{width:22%}
.bfg .bfg-table.bfg-t3 tr>:nth-child(2){width:28%}
@media(max-width:600px){
	.bfg .bfg-table th,.bfg .bfg-table td{padding:14px 8px;font-size:14px}
	.bfg .bfg-table tbody th,.bfg .bfg-table td b{font-size:17px}
	.bfg .bfg-table.bfg-t3 thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
	.bfg .bfg-table.bfg-t3,.bfg .bfg-table.bfg-t3 tbody,.bfg .bfg-table.bfg-t3 tr,.bfg .bfg-table.bfg-t3 th,.bfg .bfg-table.bfg-t3 td{display:block;width:auto!important}
	.bfg .bfg-table.bfg-t3 tr{padding:16px 0;border-bottom:1px solid var(--line)}
	.bfg .bfg-table.bfg-t3 th,.bfg .bfg-table.bfg-t3 td{border:0;padding:0}
	.bfg .bfg-table.bfg-t3 td{margin-top:6px}
	.bfg .bfg-table.bfg-t3 td[data-l]::before{content:attr(data-l) " ";font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a8477}
}

/* the same knob, new and after heavy use (Lacquered Finishes) */
.bfg .bfg-vs{display:grid;grid-template-columns:150px repeat(2,minmax(0,1fr));gap:0 20px;align-items:center;margin-top:36px}
.bfg .bfg-vs>.bfg-vs-h{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a8477;text-align:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.bfg .bfg-vs img{width:100%;max-width:240px;margin:12px auto;aspect-ratio:1/1;object-fit:contain}
.bfg .bfg-vs b{display:block;font-family:var(--serif);font-weight:400;font-size:21px;color:var(--ink)}
.bfg .bfg-vs span{font-size:14px;color:var(--mut)}
@media(max-width:600px){.bfg .bfg-vs{grid-template-columns:96px repeat(2,minmax(0,1fr));gap:0 10px}.bfg .bfg-vs b{font-size:17px}.bfg .bfg-vs>.bfg-vs-h{font-size:13px;letter-spacing:.06em}}

/* ---------- two pictures with captions ---------- */
.bfg .bfg-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.bfg .bfg-pair img{width:100%;aspect-ratio:1/1;object-fit:cover}
.bfg .bfg-pair figcaption{font-size:14px;line-height:1.45;color:var(--mut);margin-top:12px}
.bfg .bfg-pair figcaption b{color:var(--ink);font-weight:600}
@media(max-width:600px){.bfg .bfg-pair{grid-template-columns:1fr;gap:28px}}

/* ---------- picture beside a short text (verdigris, care) ---------- */
.bfg .bfg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center;margin-top:48px}
.bfg .bfg-split>figure img{width:100%;aspect-ratio:1/1;object-fit:cover}
.bfg .bfg-split figcaption{font-size:13px;color:var(--mut);margin-top:10px}
.bfg .bfg-sec .bfg-split h2,.bfg .bfg-sec .bfg-split h3{margin-top:14px}
@media(max-width:700px){.bfg .bfg-split{grid-template-columns:1fr;gap:28px}.bfg .bfg-split>figure{order:2}}

/* ---------- a quote with its speaker ---------- */
.bfg .bfg-quote{margin:72px auto;text-align:center;max-width:600px}
.bfg .bfg-quote blockquote p{font-family:var(--serif);font-size:clamp(23px,2vw,27px);line-height:1.35;color:var(--ink)}
.bfg .bfg-quote figcaption{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a8477}
.bfg .bfg-quote figcaption img{width:40px;height:40px;border-radius:50%;object-fit:cover}

/* ---------- "Try it": one picture, three states, a slider (bhf-finish.js) ---------- */
.bfg .bfg-try{margin-top:20px;border:1px solid var(--line);padding:28px 32px}
.bfg .bfg-try-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.bfg .bfg-sec .bfg-try-head h4{margin:0;font-size:21px}
.bfg .bfg-try-head span{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a8477}
.bfg .bfg-try figure{margin-top:14px;text-align:center}
.bfg .bfg-try.is-js figure:not(.is-on){display:none}
.bfg .bfg-try img{width:100%;max-width:520px;margin:0 auto;aspect-ratio:2/1;object-fit:cover}
.bfg .bfg-try figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;color:var(--ink);margin-top:10px}
.bfg .bfg-try figcaption span{display:block;font-size:15px;line-height:1.45;color:var(--body);max-width:44ch;margin:6px auto 0}
.bfg .bfg-try-ctl{margin-top:20px}
.bfg .bfg-try-ctl label{display:flex;justify-content:space-between;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.bfg .bfg-try-ctl output{color:#8a8477}
.bfg .bfg-try input[type=range]{display:block;width:100%;margin:12px 0 6px;accent-color:#171717;cursor:pointer}
.bfg .bfg-try-ends{display:flex;justify-content:space-between;font-size:13px;color:var(--mut)}
.bfg .bfg-try:not(.is-js) .bfg-try-ctl,.bfg .bfg-try:not(.is-js) .bfg-try-ends{display:none}
@media(max-width:600px){.bfg .bfg-try{padding:20px 16px}.bfg .bfg-try figcaption b{font-size:22px}}

/* ---------- Metals: one card per metal ---------- */
.bfg .bfg-metal{padding-top:44px;margin-top:44px;border-top:1px solid var(--line)}
.bfg .bfg-metal:first-of-type{border-top:0;padding-top:0}
.bfg .bfg-metal-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.bfg .bfg-metal-top>img{width:100%;aspect-ratio:1/1;object-fit:cover}
.bfg .bfg-sec .bfg-metal h3{margin:0;font-size:clamp(26px,2.2vw,32px)}
.bfg .bfg-comp{margin-top:6px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.bfg .bfg-sec .bfg-metal-top p:not(.bfg-comp){margin-top:14px}
.bfg .bfg-facts{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 14px;margin-top:20px}
.bfg .bfg-facts dt{font-size:13px;font-weight:700;letter-spacing:.1em;line-height:1.5;text-transform:uppercase;color:#8a8477}
.bfg .bfg-facts dd{font-size:15px;line-height:1.45;color:var(--body)}
@media(max-width:600px){.bfg .bfg-metal-top{grid-template-columns:1fr;gap:20px}.bfg .bfg-metal-top>img{max-width:320px}}

/* ---------- Finishes 101: the four ways to care, in cards ---------- */
.bfg .bfg-care4{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.bfg .bfg-care4>div{border:1px solid var(--line);padding:24px}
.bfg .bfg-care4 img{width:96px;height:96px;object-fit:contain}
.bfg .bfg-care4 .bfg-cat{margin:14px 0 6px;font-size:13px}
.bfg .bfg-sec .bfg-care4 ul{padding-left:1.1em;margin-top:10px}
.bfg .bfg-sec .bfg-care4 li{font-size:15px;line-height:1.45}
.bfg .bfg-sec .bfg-care4 li+li{margin-top:6px}
@media(max-width:600px){.bfg .bfg-care4{grid-template-columns:1fr}}

/* ---------- next guide + questions ---------- */
.bfg .bfg-next{display:block;margin-top:96px;padding:28px 0;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line)}
.bfg .bfg-next .bfg-cat{color:#8a8477}
.bfg .bfg-next-t{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:10px;font-family:var(--serif);font-size:clamp(26px,2.2vw,32px);line-height:1.15;color:var(--ink)}
.bfg .bfg-next-t i{font-style:normal;font-family:var(--sans);font-size:22px;transition:transform .2s}
.bfg .bfg-next:hover .bfg-next-t i{transform:translateX(4px)}
.bfg .bj-faqs{margin-top:72px}

/* ---------- the Finish Gallery page: one 1120px column, the brand swatches (gallery plugin) on the same left edge ---------- */
.bfg-gallery .bj-cover,.bfg-gallery .bfg-sec,.bfg-gallery .bj-faqs{max-width:1200px;margin-inline:auto;padding-inline:40px}
.bfg-gallery .bj-cover-grid{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:56px}
.bfg-gallery .bfg-intro{max-width:62ch}
.bfg-gallery .bj-faq{max-width:760px}
.bfg-gallery .bfg-steps{max-width:none}
.bfg-gallery .bgm-fg{margin:0;padding:0}
.bfg-gallery .bgm-fg .bgm-fg-wrap{max-width:none;margin:0;padding:0}
.bfg-gallery .bgm-fg .bgm-fg-head,.bfg-gallery .bgm-fg .bgm-fg-head .bgm-fg-eyebrow,.bfg-gallery .bgm-fg .bgm-fg-head .bgm-fg-h2,.bfg-gallery .bgm-fg .bgm-fg-head .bgm-fg-sub{text-align:left;margin-left:0;max-width:none}
.bfg-gallery .bgm-fg .bgm-fg-head .bgm-fg-sub{margin-left:0;max-width:62ch}
.bfg-gallery .bgm-fg .bgm-fg-dlwrap{justify-content:flex-start;text-align:left}
.bfg-gallery .bgm-fg .bgm-fg-tabs{justify-content:flex-start}
.bfg-gallery .bgm-fg .bgm-fg-tabs button,.bfg-gallery .bgm-fg .bgm-fg-grouphead{font-size:13px}
@media(max-width:640px){.bfg-gallery .bj-cover,.bfg-gallery .bfg-sec,.bfg-gallery .bj-faqs{padding-inline:20px}}
@media(max-width:700px){.bfg-gallery .bj-cover-grid{grid-template-columns:1fr;gap:28px}}

/* ---------- the swatch viewer (bhf-finish.js, moved to <body>) ---------- */
.bfg-lb{position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center;background:rgba(23,23,23,.55);padding:20px;font-family:'Montserrat',system-ui,sans-serif}
.bfg-lb.on{display:flex}
.bfg-lb-box{position:relative;background:#fff;padding:44px 48px 32px;max-width:440px;width:100%;text-align:center}
.bfg-lb-box img{display:block;width:100%;max-width:320px;height:auto;margin:0 auto;aspect-ratio:1/1;object-fit:contain}
.bfg-lb-box p{margin:16px 0 0;font-family:'Noto Serif',Georgia,serif;font-size:22px;line-height:1.3;color:#171717}
.bfg-lb-box small{display:block;margin-top:6px;font-size:13px;color:#6F6A5E}
.bfg-lb button{position:absolute;border:0;background:none;color:#171717;cursor:pointer;padding:0;font:400 26px/1 'Montserrat',sans-serif;width:40px;height:40px}
.bfg-lb button:hover,.bfg-lb button:focus{background:none;color:#171717}
.bfg-lb button:focus-visible{outline:1.5px solid #171717;outline-offset:2px}
.bfg-lb .bfg-lb-x{top:8px;right:8px}
.bfg-lb .bfg-lb-p{left:8px;top:50%;transform:translateY(-50%)}
.bfg-lb .bfg-lb-n{right:8px;top:50%;transform:translateY(-50%)}
@media(max-width:600px){.bfg-lb-box{padding:44px 40px 24px}}