/* Benecke 2026, version 0.2.0: the design Morne approved on 20 Oct 2026.
Loads ONLY on pages using the "Benecke 2026" template (body.bt26), after Shapely's own stylesheet.
His palette, measured from his own logo files, 17 Oct 2026. Nothing outside it.
Shapely sets the root font size to 10px, so every size here is in px on purpose (the 31 Aug form lesson).
Selectors start body.bt26 so they win over Shapely and over the site-wide form snippet 3017. */
body.bt26 {
--bt-yellow: #ffdd00;
--bt-grey: #666666;
--bt-ink: #111111;
--bt-white: #ffffff;
--bt-paper: #f6f6f4;
--bt-head: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
--bt-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
margin: 0;
padding: 0;
background: var(--bt-white);
color: var(--bt-ink);
font-family: var(--bt-body);
font-size: 18px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
body.bt26 *,
body.bt26 *::before,
body.bt26 *::after {
box-sizing: border-box;
}
body.bt26 img {
max-width: 100%;
height: auto;
}
body.bt26 a {
color: var(--bt-ink);
text-decoration-color: var(--bt-grey);
text-underline-offset: 3px;
}
body.bt26 a:hover {
text-decoration-color: var(--bt-ink);
}
body.bt26 :focus-visible {
outline: 3px solid var(--bt-ink);
outline-offset: 2px;
}
.bt26-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 0 48px;
}
.bt26-skip {
position: absolute;
left: -9999px;
}
.bt26-skip:focus {
left: 16px;
top: 16px;
z-index: 1000;
background: var(--bt-yellow);
color: var(--bt-ink);
padding: 10px 16px;
}
/* ---------- HEADER ---------- */
.bt26-header {
background: var(--bt-white);
position: relative;
z-index: 20;
}
.bt26-header-in {
height: 88px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.bt26-logo {
display: flex;
}
.bt26-logo,
.bt26-logo picture {
display: flex;
align-items: center;
}
body.bt26 .bt26-logo img {
display: block;
height: 67px;
width: auto;
max-width: none;
}
body.bt26 .bt26-call {
height: 56px;
padding: 0 24px;
display: inline-flex;
align-items: center;
background: var(--bt-yellow);
color: var(--bt-ink);
border-radius: 2px;
font-family: var(--bt-head);
font-weight: 700;
font-size: 20px;
text-decoration: none;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
body.bt26 .bt26-call:hover {
background: var(--bt-ink);
color: var(--bt-yellow);
}
.bt26-menu-btn {
display: none;
height: 48px;
padding: 0 12px;
align-items: center;
gap: 10px;
font-family: var(--bt-head);
font-weight: 700;
font-size: 18px;
border: 2px solid var(--bt-ink);
border-radius: 2px;
background: var(--bt-white);
color: var(--bt-ink);
cursor: pointer;
}
.bt26-burger {
display: flex;
flex-direction: column;
gap: 4px;
}
.bt26-burger span {
width: 20px;
height: 2px;
background: var(--bt-ink);
}
.bt26-nav {
background: var(--bt-paper);
border-top: 1px solid var(--bt-grey);
border-bottom: 1px solid var(--bt-grey);
}
body.bt26 .bt26-menu {
list-style: none;
margin: 0;
padding: 0;
min-height: 52px;
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 0 28px;
}
body.bt26 .bt26-menu > li {
position: relative;
display: flex;
}
body.bt26 .bt26-menu a {
display: flex;
align-items: center;
padding: 13px 0;
color: var(--bt-ink);
font-family: var(--bt-head);
font-weight: 600;
font-size: 18px;
text-decoration: none;
}
body.bt26 .bt26-menu a:hover,
body.bt26 .bt26-menu .current-menu-item > a {
box-shadow: inset 0 -4px 0 var(--bt-yellow);
}
body.bt26 .bt26-menu ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 50;
min-width: 280px;
margin: 0;
padding: 8px 16px;
list-style: none;
background: var(--bt-white);
border-top: 4px solid var(--bt-yellow);
box-shadow: 0 8px 20px rgba(17, 17, 17, 0.1);
}
body.bt26 .bt26-menu ul a {
padding: 10px 0;
font-size: 17px;
}
body.bt26 .bt26-menu li:hover > ul,
body.bt26 .bt26-menu li:focus-within > ul {
display: block;
}
/* ---------- TYPE INSIDE THE PAGE'S OWN CONTENT ---------- */
body.bt26 .bt26-content h1,
body.bt26 .bt26-title {
margin: 0 0 14px;
font-family: var(--bt-head);
font-weight: 800;
font-size: 60px;
line-height: 1;
color: var(--bt-ink);
text-wrap: balance;
font-variant-numeric: tabular-nums;
}
body.bt26 .bt26-content h2 {
margin: 0 0 24px;
font-family: var(--bt-head);
font-weight: 800;
font-size: 44px;
line-height: 1.05;
color: var(--bt-ink);
text-wrap: balance;
max-width: 900px;
}
body.bt26 .bt26-content h3 {
margin: 32px 0 10px;
font-family: var(--bt-head);
font-weight: 700;
font-size: 28px;
line-height: 1.15;
color: var(--bt-ink);
}
body.bt26 .bt26-content h4,
body.bt26 .bt26-content h5,
body.bt26 .bt26-content h6 {
margin: 24px 0 8px;
font-family: var(--bt-head);
font-weight: 700;
font-size: 22px;
line-height: 1.2;
color: var(--bt-ink);
}
body.bt26 .bt26-content p,
body.bt26 .bt26-content li {
font-size: 20px;
line-height: 1.55;
text-wrap: pretty;
}
body.bt26 .bt26-content p {
margin: 0 0 18px;
max-width: 820px;
}
body.bt26 .bt26-content ul,
body.bt26 .bt26-content ol {
margin: 0 0 20px;
padding-left: 0;
max-width: 820px;
}
body.bt26 .bt26-content ul {
list-style: none;
}
body.bt26 .bt26-content ul > li {
position: relative;
padding: 6px 0 6px 26px;
border-bottom: 1px solid #d9d9d6;
}
body.bt26 .bt26-content ul > li::before {
content: "";
position: absolute;
left: 0;
top: 16px;
width: 10px;
height: 10px;
background: var(--bt-yellow);
outline: 1px solid var(--bt-ink);
}
body.bt26 .bt26-content ol {
padding-left: 26px;
}
body.bt26 .bt26-content img {
display: block;
margin: 8px 0 24px;
}
body.bt26 .bt26-content figure {
width: auto !important;
max-width: 100%;
margin: 8px 0 28px;
padding: 0;
border: 0;
background: none;
}
body.bt26 .bt26-content figure img {
margin: 0 0 8px;
}
body.bt26 .bt26-content figcaption {
padding: 0;
font-size: 16px;
line-height: 1.4;
text-align: left;
color: var(--bt-grey);
}
body.bt26 .bt26-content table {
width: 100%;
max-width: 900px;
border-collapse: collapse;
margin: 0 0 24px;
font-size: 18px;
}
body.bt26 .bt26-content th,
body.bt26 .bt26-content td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--bt-grey);
vertical-align: top;
}
body.bt26 .bt26-content th {
font-family: var(--bt-head);
font-weight: 700;
background: var(--bt-paper);
}
body.bt26 .bt26-content blockquote {
margin: 0 0 24px;
padding: 4px 0 4px 20px;
border-left: 4px solid var(--bt-yellow);
}
body.bt26 .bt26-content iframe {
max-width: 100%;
}
body.bt26 .bt26-content > :last-child {
margin-bottom: 0;
}
/* ---------- HERO ---------- */
.bt26-hero {
padding: 48px 0;
}
.bt26-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 440px;
gap: 48px;
align-items: stretch;
}
.bt26-hero-form {
align-self: start;
}
.bt26-hero--solo .bt26-hero-grid {
grid-template-columns: minmax(0, 1fr);
}
.bt26-hero-main {
display: flex;
flex-direction: column;
gap: 20px;
}
.bt26-hero-bar {
display: block;
width: 56px;
height: 6px;
background: var(--bt-yellow);
}
body.bt26 .bt26-hero-copy p {
font-size: 20px;
}
body.bt26 .bt26-hero-copy h2 {
margin: 0 0 12px;
font-size: 28px;
font-weight: 700;
line-height: 1.15;
color: var(--bt-grey);
}
body.bt26 .bt26-hero-copy img {
width: 100%;
max-height: 460px;
object-fit: cover;
margin: 4px 0 0;
}
/* Trust strip: four facts, two by two on a computer, stacked on a phone */
body.bt26 .bt26-trust {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--bt-grey);
}
body.bt26 .bt26-trust li {
position: relative;
margin: 0;
padding: 16px 16px 16px 20px;
font-size: 18px;
font-weight: 600;
line-height: 1.35;
font-variant-numeric: tabular-nums;
border-bottom: 1px solid var(--bt-grey);
}
body.bt26 .bt26-trust li::before {
content: "";
position: absolute;
left: 0;
top: 23px;
width: 10px;
height: 10px;
background: var(--bt-yellow);
outline: 1px solid var(--bt-ink);
}
body.bt26 .bt26-trust li:nth-child(odd) {
border-right: 1px solid var(--bt-grey);
padding-left: 20px;
}
body.bt26 .bt26-trust li:nth-child(even) {
padding-left: 40px;
}
body.bt26 .bt26-trust li:nth-child(even)::before {
left: 20px;
}
body.bt26 .bt26-trust li:nth-last-child(-n+2) {
border-bottom: 0;
}
/* Rating badge */
body.bt26 .bt26-rating {
align-self: flex-start;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
border: 1px solid var(--bt-grey);
border-radius: 2px;
padding: 10px 16px;
font-size: 18px;
font-variant-numeric: tabular-nums;
text-decoration: none;
color: var(--bt-ink);
}
body.bt26 .bt26-rating strong {
font-weight: 700;
}
body.bt26 .bt26-rating:hover {
border-color: var(--bt-ink);
}
.bt26-hero-photo {
position: relative;
flex: 1 1 auto;
min-height: 300px;
overflow: hidden;
background: var(--bt-paper);
}
body.bt26 .bt26-hero-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
margin: 0;
}
/* ---------- QUOTE PANEL (the same form 3014) ---------- */
.bt26-quote {
background: var(--bt-paper);
border-top: 6px solid var(--bt-yellow);
padding: 28px 24px;
scroll-margin-top: 16px;
}
body.bt26 .bt26-eyebrow {
margin: 0 0 8px;
font-family: var(--bt-head);
font-weight: 700;
font-size: 16px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bt-grey);
}
body.bt26 .bt26-quote-h {
margin: 0 0 8px;
font-family: var(--bt-head);
font-weight: 800;
font-size: 32px;
line-height: 1.05;
color: var(--bt-ink);
}
body.bt26 .bt26-quote-sub {
margin: 0 0 24px;
font-size: 18px;
line-height: 1.5;
}
body.bt26 .bt26-quote .bt-q,
body.bt26 .bt26-quote .bt26-step1,
body.bt26 .bt26-quote .bt26-step2 {
display: flex;
flex-direction: column;
gap: 20px;
}
body.bt26 .bt26-quote .bt26-step2 {
padding-top: 20px;
border-top: 1px solid var(--bt-grey);
}
body.bt26 .bt26-quote .bt-q-row,
body.bt26 .bt26-quote .bt-q-half,
body.bt26 .bt26-quote .bt-q-send {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
float: none;
font-size: 18px;
}
body.bt26 .bt26-quote label {
display: block;
margin: 0;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
color: var(--bt-ink);
}
body.bt26 .bt26-quote label br {
display: none;
}
body.bt26 .bt26-quote .bt-hint {
display: block;
margin-top: 4px;
font-size: 16px;
font-weight: 400;
color: var(--bt-grey);
}
body.bt26 .bt26-quote .bt-req {
display: inline;
color: var(--bt-ink);
}
body.bt26 .bt26-quote .wpcf7-form-control-wrap {
display: block;
margin-top: 6px;
}
body.bt26 .bt26-quote .wpcf7-response-output:empty {
display: none;
}
body.bt26 .bt26-quote input[type="text"],
body.bt26 .bt26-quote input[type="tel"],
body.bt26 .bt26-quote input[type="email"],
body.bt26 .bt26-quote select,
body.bt26 .bt26-quote textarea {
width: 100%;
height: 56px;
margin: 2px 0 0;
padding: 0 16px;
border: 2px solid var(--bt-grey);
border-radius: 2px;
background: var(--bt-white);
color: var(--bt-ink);
font-family: var(--bt-body);
font-size: 18px;
font-weight: 400;
box-shadow: none;
}
body.bt26 .bt26-quote textarea {
height: auto;
min-height: 104px;
padding: 12px 16px;
line-height: 1.45;
}
body.bt26 .bt26-quote select {
appearance: none;
-webkit-appearance: none;
padding-right: 44px;
background-image: linear-gradient(45deg, transparent 50%, var(--bt-ink) 50%), linear-gradient(135deg, var(--bt-ink) 50%, transparent 50%);
background-position: calc(100% - 22px) 24px, calc(100% - 15px) 24px;
background-size: 7px 7px, 7px 7px;
background-repeat: no-repeat;
}
body.bt26 .bt26-quote input[type="tel"] {
font-variant-numeric: tabular-nums;
}
body.bt26 .bt26-quote input:focus,
body.bt26 .bt26-quote select:focus,
body.bt26 .bt26-quote textarea:focus {
border-color: var(--bt-ink);
outline: 3px solid var(--bt-yellow);
outline-offset: 0;
}
body.bt26 .bt26-quote input[type="file"] {
font-size: 16px;
font-weight: 400;
}
body.bt26 .bt26-quote .bt-q-rule {
display: none;
}
body.bt26 .bt26-quote .bt26-go,
body.bt26 .bt26-quote .bt-q-send {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 4px;
}
body.bt26 .bt26-quote [hidden] {
display: none !important;
}
body.bt26 .bt26-quote .bt26-go-btn,
body.bt26 .bt26-quote input[type="submit"],
body.bt26 .bt26-quote .bt-submit {
width: 100%;
height: 60px;
border: 0;
border-radius: 2px;
background: var(--bt-yellow);
color: var(--bt-ink);
font-family: var(--bt-head);
font-weight: 800;
font-size: 24px;
cursor: pointer;
box-shadow: none;
text-transform: none;
letter-spacing: 0;
}
body.bt26 .bt26-quote .bt26-go-btn:hover,
body.bt26 .bt26-quote input[type="submit"]:hover {
background: var(--bt-ink);
color: var(--bt-yellow);
}
body.bt26 .bt26-quote .bt26-skip-btn {
width: 100%;
height: 52px;
border: 2px solid var(--bt-ink);
border-radius: 2px;
background: transparent;
color: var(--bt-ink);
font-family: var(--bt-head);
font-weight: 700;
font-size: 20px;
cursor: pointer;
}
body.bt26 .bt26-quote .bt26-go-note,
body.bt26 .bt26-quote .bt-q-note {
display: block;
margin: 0;
font-size: 16px;
font-weight: 400;
text-align: center;
font-variant-numeric: tabular-nums;
}
body.bt26 .bt26-quote .bt26-go-note a,
body.bt26 .bt26-quote .bt-q-note a {
font-weight: 700;
}
body.bt26 .bt26-quote .bt26-step2-h {
margin: 0;
font-size: 17px;
font-weight: 600;
}
body.bt26 .bt26-quote .bt26-missing input,
body.bt26 .bt26-quote .bt26-missing select,
body.bt26 .bt26-quote .bt26-missing textarea {
border-color: #b00020;
}
body.bt26 .bt26-quote .bt26-missing label::after {
content: "Please fill this in";
display: block;
margin-top: 4px;
font-size: 16px;
font-weight: 600;
color: #b00020;
}
body.bt26 .bt26-quote .wpcf7-not-valid-tip {
font-size: 16px;
font-weight: 600;
color: #b00020;
}
body.bt26 .bt26-quote .wpcf7-response-output {
margin: 16px 0 0;
padding: 12px 16px;
font-size: 17px;
border: 2px solid var(--bt-ink);
}
body.bt26 .bt26-quote .wpcf7-spinner {
margin: 0 auto;
}
/* ---------- SECTIONS ---------- */
.bt26-sec {
padding: 72px 0;
}
.bt26-sec--paper {
background: var(--bt-paper);
}
/* ---------- CALL BAND ---------- */
.bt26-call-band {
background: var(--bt-yellow);
color: var(--bt-ink);
padding: 72px 0;
}
.bt26-call-band-in {
display: flex;
justify-content: space-between;
align-items: center;
gap: 48px;
}
body.bt26 .bt26-call-band-h {
margin: 0;
max-width: 520px;
font-family: var(--bt-head);
font-weight: 800;
font-size: 44px;
line-height: 1.05;
color: var(--bt-ink);
}
body.bt26 .bt26-call-band-num {
font-family: var(--bt-head);
font-weight: 800;
font-size: 96px;
line-height: 1;
color: var(--bt-ink);
text-decoration: none;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ---------- SECOND FORM, FULL WIDTH ---------- */
.bt26-quote-band {
padding: 96px 0;
}
.bt26-quote-band .bt26-quote {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
grid-template-rows: auto auto 1fr;
align-items: start;
column-gap: 48px;
padding: 36px 40px;
}
.bt26-quote-band .bt26-quote > .bt26-eyebrow,
.bt26-quote-band .bt26-quote > .bt26-quote-h,
.bt26-quote-band .bt26-quote > .bt26-quote-sub {
grid-column: 1;
}
body.bt26 .bt26-quote-band .bt26-quote-h {
font-size: 44px;
}
.bt26-quote-band .bt26-quote > .wpcf7 {
grid-column: 2;
grid-row: 1 / span 3;
}
/* ---------- KEEP LAYOUT (pages still in SiteOrigin) ---------- */
.bt26-keep {
padding-top: 40px;
padding-bottom: 72px;
}
/* ---------- FOOTER ---------- */
.bt26-footer {
background: var(--bt-ink);
color: var(--bt-white);
padding: 64px 0 48px;
}
.bt26-footer-grid {
display: grid;
grid-template-columns: 1.3fr 1fr 1.4fr 0.6fr;
gap: 48px;
}
.bt26-footer-id {
display: flex;
flex-direction: column;
gap: 20px;
}
.bt26-mark {
display: block;
width: 80px;
height: 80px;
}
body.bt26 .bt26-footer-addr {
margin: 0;
font-size: 18px;
line-height: 1.5;
}
body.bt26 .bt26-footer-tel {
display: flex;
flex-direction: column;
gap: 2px;
color: var(--bt-white);
text-decoration: none;
}
body.bt26 .bt26-footer-tel span {
font-size: 16px;
}
body.bt26 .bt26-footer-tel strong {
font-family: var(--bt-head);
font-weight: 800;
font-size: 36px;
line-height: 1;
color: var(--bt-yellow);
font-variant-numeric: tabular-nums;
}
body.bt26 .bt26-footer-h {
margin: 0 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--bt-grey);
font-family: var(--bt-head);
font-weight: 700;
font-size: 16px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bt-white);
}
body.bt26 .bt26-footer ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
body.bt26 .bt26-footer .bt26-footer-areas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
}
body.bt26 .bt26-footer li {
margin: 0;
font-size: 17px;
}
body.bt26 .bt26-footer a {
color: var(--bt-white);
text-decoration: none;
}
body.bt26 .bt26-footer a:hover,
body.bt26 .bt26-footer a:focus-visible {
color: var(--bt-yellow);
text-decoration: underline;
}
/* ---------- STICKY PHONE BAR ---------- */
.bt26-sticky {
display: none;
}
/* ---------- TABLET ---------- */
@media (max-width: 1100px) {
.bt26-wrap {
padding: 0 32px;
}
.bt26-hero-grid {
grid-template-columns: minmax(0, 1fr) 380px;
gap: 32px;
}
body.bt26 .bt26-call-band-num {
font-size: 64px;
}
.bt26-footer-grid {
grid-template-columns: 1fr 1fr;
}
}
/* ---------- PHONE AND SMALL TABLET ---------- */
@media (max-width: 860px) {
.bt26-wrap {
padding: 0 20px;
}
.bt26-header {
border-bottom: 1px solid var(--bt-grey);
}
.bt26-header-in {
height: 64px;
}
body.bt26 .bt26-logo img {
height: 44px;
}
body.bt26 .bt26-call {
display: none;
}
.bt26-menu-btn {
display: flex;
}
/* Without scripts the menu stays visible; with scripts it opens from the Menu button */
.bt26-js .bt26-nav {
display: none;
}
.bt26-js .bt26-nav.is-open {
display: block;
}
.bt26-nav {
border-top: 0;
}
body.bt26 .bt26-menu {
flex-direction: column;
gap: 0;
padding: 8px 0;
}
body.bt26 .bt26-menu > li {
display: block;
border-bottom: 1px solid #d9d9d6;
}
body.bt26 .bt26-menu a {
min-height: 48px;
padding: 12px 0;
font-size: 19px;
}
body.bt26 .bt26-menu ul {
display: block;
position: static;
min-width: 0;
padding: 0 0 8px 16px;
border: 0;
box-shadow: none;
background: transparent;
}
.bt26-hero {
padding: 24px 0 8px;
}
.bt26-hero-grid {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.bt26-hero-bar {
width: 48px;
}
body.bt26 .bt26-content h1,
body.bt26 .bt26-title {
font-size: 38px;
line-height: 1.02;
}
body.bt26 .bt26-content h2,
body.bt26 .bt26-call-band-h {
font-size: 32px;
}
body.bt26 .bt26-content h3 {
font-size: 24px;
}
body.bt26 .bt26-hero-copy h2 {
font-size: 24px;
}
body.bt26 .bt26-content p,
body.bt26 .bt26-content li,
body.bt26 .bt26-hero-copy p {
font-size: 18px;
line-height: 1.5;
}
body.bt26 .bt26-trust {
grid-template-columns: 1fr;
border-top: 2px solid var(--bt-ink);
}
body.bt26 .bt26-trust li,
body.bt26 .bt26-trust li:nth-child(odd),
body.bt26 .bt26-trust li:nth-child(even) {
min-height: 48px;
padding: 12px 0 12px 22px;
border-right: 0;
border-bottom: 1px solid var(--bt-grey);
font-size: 17px;
}
body.bt26 .bt26-trust li::before,
body.bt26 .bt26-trust li:nth-child(even)::before {
left: 0;
top: 19px;
}
body.bt26 .bt26-trust li:nth-last-child(-n+2) {
border-bottom: 1px solid var(--bt-grey);
}
.bt26-hero-photo {
min-height: 220px;
order: -1;
margin: 0 -20px;
}
.bt26-quote {
margin: 0 -20px;
padding: 24px 20px;
}
.bt26-sec {
padding: 48px 0;
}
.bt26-call-band {
padding: 40px 0;
}
.bt26-call-band-in {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
body.bt26 .bt26-call-band-num {
font-size: 48px;
}
.bt26-quote-band {
padding: 48px 0;
}
.bt26-quote-band .bt26-quote {
display: block;
padding: 24px 20px;
}
body.bt26 .bt26-quote-band .bt26-quote-h {
font-size: 32px;
}
.bt26-footer {
padding: 40px 0 120px;
}
.bt26-footer-grid {
grid-template-columns: 1fr;
gap: 32px;
}
/* The bar fixed to the bottom of a phone screen */
.bt26-sticky {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
background: var(--bt-white);
border-top: 1px solid var(--bt-grey);
}
body.bt26 .bt26-sticky a {
height: 64px;
border-radius: 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
text-align: center;
text-decoration: none;
font-family: var(--bt-head);
line-height: 1.05;
}
body.bt26 .bt26-sticky-call {
background: var(--bt-yellow);
color: var(--bt-ink);
}
.bt26-sticky-big {
font-weight: 800;
font-size: 20px;
}
.bt26-sticky-small {
font-family: var(--bt-body);
font-weight: 600;
font-size: 16px;
font-variant-numeric: tabular-nums;
}
body.bt26 .bt26-sticky-wa {
background: var(--bt-ink);
color: var(--bt-white);
padding: 0 8px;
font-weight: 700;
font-size: 18px;
}
}
/* ---------- HIS OLD "ADDITIONAL CSS" ON SMALL PHONES ----------
The Customizer CSS carried over from Shapely forces, at 414px and below, every to 12px, every
to 24px and
the body line height to 13px, all with !important (read 20 Oct 2026). It still applies to his old pages, which is
left alone. On new-template pages it is out-ranked here, the only way an !important rule can be: !important again
with a more specific selector. */
@media only screen and (max-width: 414px) {
body.bt26 {
line-height: 1.55 !important;
}
body.bt26 .bt26-content h1,
body.bt26 .bt26-title {
font-size: 34px !important;
line-height: 1.05 !important;
}
body.bt26 .bt26-content p,
body.bt26 .bt26-hero-copy p {
font-size: 17px !important;
line-height: 1.5 !important;
}
body.bt26 .bt26-quote-sub,
body.bt26 .bt26-footer-addr {
font-size: 17px !important;
line-height: 1.5 !important;
}
body.bt26 .bt26-eyebrow,
body.bt26 .bt26-footer-h,
body.bt26 .bt26-quote .bt26-go-note,
body.bt26 .bt26-quote .bt26-step2-h {
font-size: 15px !important;
line-height: 1.4 !important;
}
body.bt26 .bt26-quote .bt-q-row,
body.bt26 .bt26-quote .bt-q-half,
body.bt26 .bt26-quote .bt-q-send {
font-size: 17px !important;
line-height: 1.4 !important;
}
}
/* The WhatsApp plugin's floating button (QuadLayers, class .qlwapp) would sit on top of the phone bar, which already
carries WhatsApp to the same number. Hidden on phones on new-template pages only; computers keep it. */
@media (max-width: 860px) {
body.bt26 .qlwapp {
display: none !important;
}
}
/* ---------- PHOTO GRID (pictures from the old sliders, grouped by the conversion) ---------- */
body.bt26 .bt26-content .bt26-photos {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 8px 0 28px;
}
body.bt26 .bt26-content .bt26-photos p {
margin: 0;
max-width: none;
}
body.bt26 .bt26-content .bt26-photos img {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
margin: 0;
}
@media (max-width: 860px) {
body.bt26 .bt26-content .bt26-photos {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
}