/*
Theme Name: Siding Innovations: Casing
Theme URI: https://sidinginnovations.com/
Author: Dependent Media
Author URI: https://dependentmedia.com/
Description: Clean, photo-led block theme for Siding Innovations, Inc. (Reno, NV). Built 2026-11 to the Sierra direction: light pages, the company's own job photos, one rotating home banner, a sticky header with phone and quote, a phone call bar. Details from the trade: lap-siding courses as the label mark, window-casing keylines around photos, a burgundy corner trim. No page builder.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: sdi-casing
*/

@font-face { font-family: Forum; src: url(assets/fonts/forum-latin-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url(assets/fonts/mona-sans-latin-text.woff2) format("woff2"); font-weight: 400 700; font-stretch: 82% 100%; font-style: normal; font-display: swap; }

:root {
	--ink: #1b1b1d;
	--text: #38383b;
	--mute: #5d5f64;
	--line: #dcd9d3;
	--keyline: #c9c5bd;
	--frame: #8c8f94;
	--primed: #f7f5f1;
	--white: #fff;
	--red: #8a1c2b;
	--red-dark: #6c1420;
	--gut: 16px;
	--wide: 1240px;
	--pad: max(var(--gut), calc((100% - var(--wide)) / 2));
	--sec: clamp(56px, 7vw, 104px);
	--display: Forum, "Iowan Old Style", Georgia, serif;
	--body: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--head-h: 64px;
}
@media (min-width: 600px) { :root { --gut: 24px; } }
@media (min-width: 1000px) { :root { --gut: 40px; --head-h: 80px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 16px); }
body { margin: 0; background: var(--white); color: var(--text); font: 400 1.0625rem/1.65 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (min-width: 1000px) { body { font-size: 1.125rem; } }
.wp-site-blocks { padding: 0; }
img { max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; color: var(--ink); line-height: 1.12; letter-spacing: .005em; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 1.6rem + 2.6vw, 3.6rem); }
h2 { font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.6rem); }
h3 { font-size: clamp(1.4rem, 1.25rem + .5vw, 1.65rem); }
h4 { font-family: var(--body); font-weight: 600; font-size: 1.05rem; letter-spacing: 0; }
p { margin: 0 0 1em; }
a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
strong { font-weight: 600; color: var(--ink); }
ul, ol { padding-left: 1.2em; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sdi-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; font-weight: 600; text-decoration: none; }
.sdi-skip:focus { top: 12px; color: #fff; outline-color: var(--white); }

/* The lap-siding mark: three courses, used before every small label. */
.sdi-kicker { font: 600 .8125rem/1.3 var(--body); font-stretch: 82%; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin: 0 0 1rem; display: flex; align-items: center; gap: 12px; }
.sdi-kicker::before { content: ""; flex: none; width: 24px; height: 11px; background:
	linear-gradient(var(--red), var(--red)) 0 0 / 100% 2px no-repeat,
	linear-gradient(var(--red), var(--red)) 0 4.5px / 100% 2px no-repeat,
	linear-gradient(var(--red), var(--red)) 0 9px / 100% 2px no-repeat; }
.sdi-lead { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3rem); line-height: 1.55; color: var(--text); max-width: 62ch; }
.sdi-mute { color: var(--mute); font-size: .95rem; }

/* ---------- buttons ---------- */
.sdi-btn, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; padding: .7rem 1.45rem; font: 600 1rem/1.2 var(--body); letter-spacing: .01em; text-decoration: none; border: 2px solid transparent; border-radius: 2px; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.sdi-btn--red, .wp-block-button__link { background: var(--red); color: #fff; }
.sdi-btn--red:hover, .wp-block-button__link:hover { background: var(--red-dark); color: #fff; }
.sdi-btn--line, .is-style-outline .wp-block-button__link { background: transparent; border-color: var(--ink); color: var(--ink); }
.sdi-btn--line:hover, .is-style-outline .wp-block-button__link:hover { background: var(--ink); color: #fff; }
.sdi-btn .sdi-ico { width: 20px; height: 20px; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6rem 0 0; }
.sdi-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sdi-ico--play { fill: currentColor; stroke: none; }

/* ---------- header (sticky) ---------- */
.sdi-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.sdi-header.is-scrolled { box-shadow: 0 6px 20px rgba(27, 27, 29, .07); }
.sdi-bar__in { display: flex; align-items: center; gap: 20px; max-width: calc(1440px + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); height: var(--head-h); }
.sdi-brand { display: block; flex: none; line-height: 0; }
.sdi-brand img { width: 168px; height: auto; }
@media (min-width: 1000px) { .sdi-brand img { width: 196px; } }
@media (min-width: 1440px) { .sdi-brand img { width: 210px; } }
.sdi-nav { display: none; margin-left: auto; }
.sdi-bar__cta { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.sdi-bar__tel { display: none; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; font-size: 1.0625rem; }
.sdi-bar__tel .sdi-ico { color: var(--red); width: 20px; height: 20px; }
.sdi-bar__tel:hover { color: var(--red); }
.sdi-bar__quote { display: none; min-height: 46px; padding: .6rem 1.15rem; white-space: nowrap; }
.sdi-bar__menu { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--frame); border-radius: 2px; background: var(--white); color: var(--ink); font: 600 .95rem var(--body); cursor: pointer; }
.sdi-bar__menu .sdi-ico--close, .sdi-bar__menu[aria-expanded="true"] .sdi-ico--menu { display: none; }
.sdi-bar__menu[aria-expanded="true"] .sdi-ico--close { display: block; }
@media (min-width: 768px) {
	.sdi-bar__tel, .sdi-bar__quote { display: inline-flex; }
}
@media (min-width: 1280px) {
	.sdi-nav { display: block; }
	.sdi-bar__cta { margin-left: 8px; }
	.sdi-bar__menu, .sdi-panel { display: none !important; }
}

.sdi-menu { list-style: none; margin: 0; padding: 0; }
.sdi-menu--bar { display: flex; align-items: center; }
.sdi-menu--bar > .sdi-menu__item { position: relative; display: flex; align-items: center; }
.sdi-menu--bar .sdi-menu__link { display: block; padding: 10px 8px; color: var(--ink); font-weight: 500; font-size: 1rem; text-decoration: none; white-space: nowrap; }
.sdi-menu--bar .has-sub > .sdi-menu__link { padding-right: 0; }
.sdi-menu--bar .sdi-menu__link:hover, .sdi-menu--bar .is-in > .sdi-menu__link { color: var(--red); }
.sdi-menu--bar .sdi-menu__link[aria-current="page"], .sdi-menu--bar .is-in > .sdi-menu__link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.sdi-menu__toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 32px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.sdi-menu__toggle .sdi-ico { width: 18px; height: 18px; transition: transform .15s; }
.sdi-menu__toggle[aria-expanded="true"] .sdi-ico { transform: rotate(180deg); }
.sdi-menu--bar .sdi-sub { position: absolute; top: calc(100% + 6px); left: -7px; min-width: 250px; padding: 10px 0; margin: 0; list-style: none; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--red); box-shadow: 0 14px 30px rgba(27, 27, 29, .1); display: none; }
.sdi-menu--bar .sdi-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 13px; } /* hover bridge */
.sdi-menu--bar .has-sub:hover > .sdi-sub, .sdi-menu--bar .has-sub.is-open > .sdi-sub { display: block; }
.sdi-menu--bar .sdi-sub a { display: block; padding: 8px 16px; color: var(--ink); text-decoration: none; font-size: .975rem; white-space: nowrap; }
.sdi-menu--bar .sdi-sub a:hover, .sdi-menu--bar .sdi-sub a[aria-current="page"] { color: var(--red); background: var(--primed); }
.sdi-sub .is-group a { font-weight: 600; margin-top: 4px; }
.sdi-sub .is-sub a { padding-left: 30px; font-size: .94rem; }

.sdi-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(27, 27, 29, .12); max-height: calc(100vh - var(--head-h)); overflow-y: auto; padding: 8px var(--gut) 24px; }
.sdi-menu--panel > .sdi-menu__item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }
.sdi-menu--panel .sdi-menu__link { flex: 1; display: block; padding: 14px 0; color: var(--ink); font-size: 1.125rem; font-weight: 500; text-decoration: none; }
.sdi-menu--panel .sdi-menu__link[aria-current="page"] { color: var(--red); }
.sdi-menu--panel .sdi-menu__toggle { width: 48px; height: 48px; }
.sdi-menu--panel .sdi-sub { flex-basis: 100%; list-style: none; margin: 0; padding: 0 0 12px; display: none; }
.sdi-menu--panel .is-open > .sdi-sub { display: block; }
.sdi-menu--panel .sdi-sub a { display: block; padding: 10px 0 10px 14px; color: var(--ink); text-decoration: none; }
.sdi-menu--panel .sdi-sub .is-sub a { padding-left: 32px; }
.sdi-panel__contact { display: flex; flex-direction: column; gap: 4px; margin: 18px 0 0; }
.sdi-panel__contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
.sdi-panel__contact .sdi-ico { color: var(--red); }

/* Phones: exactly two buttons fixed at the bottom. Nothing else floats. */
.sdi-callbar { display: none; }
@media (max-width: 767px) {
	.sdi-callbar { display: grid; grid-template-columns: 1fr 1.7fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding-bottom: env(safe-area-inset-bottom); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(27, 27, 29, .08); }
	.sdi-callbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; font: 600 1.0625rem var(--body); text-decoration: none; }
	.sdi-foot .sdi-callbar__call { color: var(--ink); background: var(--white); }
	.sdi-foot .sdi-callbar__call .sdi-ico { color: var(--red); }
	.sdi-foot .sdi-callbar__quote { color: #fff; background: var(--red); }
	.sdi-foot .sdi-callbar a:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
	.sdi-foot .sdi-callbar__quote:focus-visible { outline-color: #fff; }
	body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* ---------- sections ---------- */
.sdi-main { display: block; }
.sdi-sec { padding: var(--sec) var(--pad); }
.sdi-sec--tight { padding-top: calc(var(--sec) * .55); padding-bottom: calc(var(--sec) * .55); }
.sdi-sec--primed { background: var(--primed); }
.sdi-sec--rule { border-top: 1px solid var(--line); }
.sdi-sec > h2 { max-width: 24ch; }
.sdi-sec__intro { display: grid; gap: 8px 64px; margin-bottom: clamp(28px, 4vw, 48px); }
.sdi-sec__intro > * { margin: 0; }
@media (min-width: 1000px) {
	.sdi-sec__intro { grid-template-columns: 1fr 1fr; align-items: end; }
	.sdi-sec__intro .sdi-kicker { grid-column: 1 / -1; }
}
.sdi-prose > * { max-width: 70ch; }
.sdi-prose > h2, .sdi-prose > h3 { margin-top: 1.6em; }
.sdi-prose > h2:first-child, .sdi-prose > h3:first-child, .sdi-prose > .sdi-kicker + h2 { margin-top: 0; }
.sdi-prose li { margin-bottom: .35em; }

.sdi-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 72px; align-items: center; }
@media (min-width: 900px) {
	.sdi-split { grid-template-columns: 1fr 1fr; }
	.sdi-split--flip > :first-child { order: 2; }
	.sdi-split--top { align-items: start; }
}
.sdi-split > .wp-block-group > :last-child { margin-bottom: 0; }

/* Page head */
.sdi-head { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(24px, 3vw, 40px); }
.sdi-head + .sdi-sec:not(.sdi-sec--primed) { padding-top: clamp(16px, 2.5vw, 40px); }
.sdi-head h1 { max-width: 20ch; }
.sdi-head .sdi-lead { margin-bottom: 0; }
.sdi-crumbs ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .9rem; color: var(--mute); }
.sdi-crumbs li + li::before { content: "/"; margin: 0 .55em; color: var(--frame); }
.sdi-crumbs a { color: var(--mute); }
.sdi-crumbs a:hover { color: var(--red); }

/* Photos: a window-casing keyline around each, a burgundy corner trim on the feature ones. */
.sdi-frame, .sdi-fig { position: relative; margin: 0; }
.sdi-frame img, .sdi-fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; outline: 1px solid var(--keyline); outline-offset: 7px; background: #ebe8e2; }
.sdi-fig--whole img { aspect-ratio: auto; object-fit: contain; }
.sdi-fig figcaption, .sdi-frame figcaption { margin-top: 16px; font-size: .9rem; color: var(--mute); }
.sdi-trim { position: relative; }
.sdi-trim::after { content: ""; position: absolute; left: -14px; bottom: -14px; width: 64px; height: 64px; border-left: 3px solid var(--red); border-bottom: 3px solid var(--red); pointer-events: none; }
.sdi-trio { display: grid; gap: 28px; margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 600px) { .sdi-trio { grid-template-columns: repeat(3, 1fr); } }
.sdi-trio .wp-block-image { margin: 0; }

/* ---------- home banner: the photo as a window (full width, casing keyline, corner trim), headline row beneath ---------- */
.sdi-hero { display: block; padding: 0 0 8px; }
.sdi-hero__text { padding: 28px var(--gut) 0; }
.sdi-hero__text h1 { font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.7rem); max-width: 17ch; margin-bottom: 0; }
.sdi-hero__intro { margin-top: 20px; }
.sdi-hero__intro .sdi-lead { max-width: 48ch; }
.sdi-hero__facts { margin: 22px 0 0; font-size: .95rem; line-height: 1.7; color: var(--mute); }
@media (min-width: 1000px) {
	.sdi-hero { padding: 28px var(--pad) 0; }
	.sdi-hero__text { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 72px; align-items: start; padding: 44px 0 0; }
	.sdi-hero__intro { margin-top: 0; padding-top: 40px; }
}
.sdi-banner { position: relative; }
.sdi-banner__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #e7e4de; }
.sdi-banner__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s ease; }
.sdi-banner__slide.is-on { opacity: 1; }
.sdi-banner__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; }
@media (min-width: 1000px) {
	.sdi-banner__stage { aspect-ratio: auto; height: clamp(340px, 50vh, 600px); outline: 1px solid var(--keyline); outline-offset: 9px; }
	.sdi-banner::before { content: ""; position: absolute; z-index: 2; left: -16px; top: -16px; width: 76px; height: 76px; border-left: 3px solid var(--red); border-top: 3px solid var(--red); pointer-events: none; }
}
.sdi-banner__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--gut) 0; }
@media (min-width: 1000px) { .sdi-banner__bar { padding: 18px 0 0; } }
.sdi-banner__cap { margin: 0; font-size: .9rem; color: var(--mute); }
.sdi-banner__ctl { display: flex; align-items: center; gap: 2px; flex: none; }
.sdi-banner__dot { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sdi-banner__dot::before { content: ""; width: 11px; height: 11px; border: 1.5px solid var(--frame); background: transparent; }
.sdi-banner__dot[aria-current="true"]::before { background: var(--red); border-color: var(--red); }
.sdi-banner__pause { margin-left: 8px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--frame); border-radius: 2px; background: var(--white); color: var(--ink); cursor: pointer; }
.sdi-banner__pause .sdi-ico--play, .sdi-banner__pause.is-paused .sdi-ico--pause { display: none; }
.sdi-banner__pause.is-paused .sdi-ico--play { display: block; }
.sdi-banner__pause:hover { border-color: var(--ink); }

/* ---------- cards ---------- */
.sdi-svc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px 48px; }
@media (min-width: 900px) { .sdi-svc { grid-template-columns: 1fr 1fr; } }
.sdi-svc__h { margin: 28px 0 10px; }
.sdi-svc__h a, .sdi-aud__h a { color: var(--ink); text-decoration: none; }
.sdi-svc__h a:hover { color: var(--red); text-decoration: underline; }
.sdi-svc__card > p { max-width: 52ch; }
.sdi-svc__for { margin: 0; font-weight: 500; }
.sdi-svc__for span:first-child { font: 600 .8125rem var(--body); font-stretch: 82%; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-right: .35em; }
.sdi-svc__for span[aria-hidden] { color: var(--frame); }

.sdi-aud { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 36px; }
@media (min-width: 800px) { .sdi-aud:not(.sdi-aud--rows) { grid-template-columns: repeat(3, 1fr); } }
.sdi-aud__h { margin: 26px 0 10px; }
.sdi-aud .sdi-frame img { aspect-ratio: 4 / 3; }
.sdi-aud--rows { gap: clamp(56px, 7vw, 96px); }
@media (min-width: 900px) {
	.sdi-aud--rows .sdi-aud__item { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
	.sdi-aud--rows .sdi-aud__item:nth-child(even) .sdi-frame { order: 2; }
	.sdi-aud--rows .sdi-aud__h { margin-top: 0; }
}
.sdi-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sdi-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-weight: 600; text-decoration: none; }
.sdi-links a:hover { text-decoration: underline; }
.sdi-links .sdi-ico { width: 18px; height: 18px; }
.sdi-links--big a { font-size: 1.15rem; }

.sdi-creds { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sdi-creds li { padding: 4px 22px; border-left: 1px solid var(--keyline); display: flex; flex-direction: column; gap: 6px; }
.sdi-creds strong { font: 400 1.6rem/1.15 var(--display); color: var(--ink); }
.sdi-creds span { font-size: .95rem; color: var(--mute); line-height: 1.5; }

.sdi-reviews { display: grid; gap: 36px 56px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) { .sdi-reviews { grid-template-columns: 1fr 1fr; } }
.sdi-review { margin: 0; padding-top: 22px; border-top: 1px solid var(--keyline); }
.sdi-review blockquote { margin: 0; }
.sdi-review blockquote p { font: 400 clamp(1.25rem, 1.15rem + .4vw, 1.45rem)/1.45 var(--display); color: var(--ink); margin: 0 0 14px; }
.sdi-review blockquote p::before { content: "“"; color: var(--red); margin-right: .05em; }
.sdi-review blockquote p::after { content: "”"; color: var(--red); }
.sdi-review figcaption { font-size: .95rem; color: var(--mute); }
.sdi-reviews__more { margin: 28px 0 0; font-weight: 600; }
.sdi-reviews__more span { color: var(--frame); margin: 0 .5em; }

.sdi-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .sdi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .sdi-strip { grid-template-columns: repeat(6, 1fr); } }
.sdi-strip a { display: block; line-height: 0; }
.sdi-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity .2s; }
.sdi-strip a:hover img { opacity: .85; }
.sdi-strip a:focus-visible { outline-offset: 2px; }

.sdi-map-fig { margin: 0; }
.sdi-map { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.sdi-map-fig figcaption { margin-top: 12px; font-size: .9rem; color: var(--mute); }
.sdi-towns { display: grid; gap: 28px 48px; }
@media (min-width: 700px) { .sdi-towns { grid-template-columns: 2fr 1fr; } }
.sdi-towns__h { font-size: 1.5rem; margin-bottom: .6em; }
.sdi-towns__h span { font: 400 1rem var(--body); color: var(--mute); }
.sdi-towns__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
@media (min-width: 1000px) { .sdi-towns > div:first-child .sdi-towns__list { columns: 3; } }
.sdi-towns__list li { padding: 5px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }

.sdi-types { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; }
@media (min-width: 800px) { .sdi-types { grid-template-columns: repeat(4, 1fr); } }
.sdi-types li { padding: 9px 0 9px 22px; border-bottom: 1px solid var(--line); position: relative; }
.sdi-types li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 6px; margin-top: -3px; background: linear-gradient(var(--red), var(--red)) 0 0 / 100% 1.5px no-repeat, linear-gradient(var(--red), var(--red)) 0 4.5px / 100% 1.5px no-repeat; }

.sdi-brands { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sdi-brands__item { border: 1px solid var(--line); background: var(--white); padding: 22px 22px 18px; }
.sdi-brands__item > a { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); }
.sdi-brands__logo { display: flex; align-items: center; height: 64px; }
.sdi-brands__logo img { max-height: 64px; max-width: 170px; width: auto; height: auto; object-fit: contain; }
.sdi-brands__name { font: 400 1.4rem var(--display); }
.sdi-brands__item > a:hover .sdi-brands__name { color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
.sdi-brands__item p { margin: 10px 0 0; font-size: .95rem; color: var(--mute); }
.sdi-brand-logo img { max-height: 90px; width: auto; }
.sdi-badges { display: flex; gap: 20px; align-items: center; margin: 24px 0 0; }
.sdi-badges img { width: 96px; height: auto; }

.sdi-cta { display: grid; gap: 24px 56px; align-items: center; padding-top: 36px; border-top: 3px solid var(--red); }
@media (min-width: 900px) { .sdi-cta { grid-template-columns: 1.3fr 1fr; } .sdi-cta__btns { justify-content: flex-end; } }
.sdi-cta h2 { margin-bottom: .3em; }
.sdi-cta p { margin: 0; max-width: 52ch; }
.sdi-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }


/* Columns of short text (consultations, building types), forms, notes */
.sdi-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 48px; }
@media (min-width: 800px) { .sdi-cols--3 { grid-template-columns: repeat(3, 1fr); } .sdi-cols--2 { grid-template-columns: repeat(2, 1fr); } }
.sdi-cols > .wp-block-group { border-top: 1px solid var(--keyline); padding-top: 22px; }
.sdi-cols > .wp-block-group > :last-child { margin-bottom: 0; }
.sdi-cols h3 { margin-bottom: .4em; }
.sdi-cols--links h3 a { color: var(--ink); text-decoration: none; }
.sdi-cols--links h3 a::after { content: " \2192"; color: var(--red); }
.sdi-cols--links h3 a:hover { color: var(--red); text-decoration: underline; }
.sdi-ticks { list-style: none; padding: 0; margin: 0 0 1em; }
.sdi-ticks li { position: relative; padding: 8px 0 8px 24px; border-bottom: 1px solid var(--line); margin: 0; }
.sdi-ticks li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 6px; margin-top: -3px; background: linear-gradient(var(--red), var(--red)) 0 0 / 100% 1.5px no-repeat, linear-gradient(var(--red), var(--red)) 0 4.5px / 100% 1.5px no-repeat; }
.sdi-formbox > h2 { margin-bottom: .6em; }
.sdi-mapbox { max-width: 980px; }
.sdi-note { margin: 28px 0 0; max-width: 70ch; }
.sdi-sec--work { padding-top: 0; }

/* ---------- Our Work: core Gallery block + filters + lightbox ---------- */
.sdi-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.sdi-filters button { min-height: 44px; padding: 0 18px; border: 1px solid var(--frame); border-radius: 2px; background: var(--white); color: var(--ink); font: 500 1rem var(--body); cursor: pointer; }
.sdi-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.sdi-filters button:hover { border-color: var(--ink); }
.sdi-filters__count { font-size: .9rem; color: var(--mute); margin: 0 0 24px; min-height: 1.5em; }
.wp-block-gallery.has-nested-images.sdi-work { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 10px !important; margin: 0; }
@media (min-width: 768px) { .wp-block-gallery.has-nested-images.sdi-work { grid-template-columns: repeat(3, 1fr); gap: 14px !important; } }
@media (min-width: 1280px) { .wp-block-gallery.has-nested-images.sdi-work { grid-template-columns: repeat(4, 1fr); gap: 16px !important; } }
.wp-block-gallery.has-nested-images.sdi-work figure.wp-block-image { width: auto !important; margin: 0 !important; flex: none; }
.wp-block-gallery.has-nested-images.sdi-work figure.wp-block-image[hidden] { display: none !important; }
.wp-block-gallery.has-nested-images.sdi-work figure.wp-block-image a { display: block; line-height: 0; }
.wp-block-gallery.has-nested-images.sdi-work figure.wp-block-image img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity .2s; }
.wp-block-gallery.has-nested-images.sdi-work figure.wp-block-image a:hover img { opacity: .86; }
.wp-block-gallery.has-nested-images.sdi-work figure.wp-block-image figcaption { display: none; }
.wp-block-gallery.has-nested-images.sdi-work figure.wp-block-image a:focus-visible { outline-offset: 2px; }
.sdi-lb { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(18, 18, 20, .96); color: #fff; }
.sdi-lb::backdrop { background: rgba(18, 18, 20, .6); }
.sdi-lb[open] { display: flex; align-items: center; justify-content: center; }
.sdi-lb__fig { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(1400px, 92vw); }
.sdi-lb__fig img { max-width: 100%; max-height: calc(100dvh - 160px); width: auto; height: auto; object-fit: contain; }
.sdi-lb__cap { margin: 0; text-align: center; color: #eceae6; font-size: .98rem; }
.sdi-lb__n { color: #b8b6b1; margin-left: .6em; }
.sdi-lb__btn { position: absolute; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .55); border-radius: 2px; background: rgba(18, 18, 20, .5); color: #fff; cursor: pointer; }
.sdi-lb__btn:hover { background: #fff; color: var(--ink); }
.sdi-lb__btn:focus-visible { outline-color: #fff; }
.sdi-lb__close { top: 16px; right: 16px; }
.sdi-lb__prev { left: 16px; top: 50%; margin-top: -26px; }
.sdi-lb__next { right: 16px; top: 50%; margin-top: -26px; }
@media (max-width: 767px) {
	.sdi-lb__prev, .sdi-lb__next { top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); margin: 0; }
	.sdi-lb__prev { left: calc(50% - 64px); }
	.sdi-lb__next { right: calc(50% - 64px); }
	.sdi-lb__fig img { max-height: calc(100dvh - 220px); }
}

/* ---------- contact + forms (Ninja Forms, opinionated styles off) ---------- */
.sdi-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 72px; align-items: start; }
.sdi-form, .sdi-form .nf-form-cont, .sdi-form nf-field, .sdi-form .nf-field-element { min-width: 0; max-width: 100%; }
@media (min-width: 1000px) { .sdi-contact { grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); } }
.sdi-ccard { background: var(--primed); padding: 24px 20px 20px; border-top: 3px solid var(--red); }
@media (min-width: 600px) { .sdi-ccard { padding: 30px 30px 26px; } }
.sdi-ccard a, .sdi-foot__facts a, .sdi-panel__contact a { overflow-wrap: anywhere; }
.sdi-ccard__big { display: flex; align-items: center; gap: 12px; font: 400 1.9rem/1.1 var(--display); margin: 0 0 18px; }
.sdi-ccard__big a { color: var(--ink); text-decoration: none; }
.sdi-ccard__big a:hover { color: var(--red); }
.sdi-ccard__big .sdi-ico { color: var(--red); }
.sdi-ccard__list { list-style: none; margin: 0; padding: 0; }
.sdi-ccard__list li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.sdi-ccard__list .sdi-ico { color: var(--red); margin-top: 2px; }
.sdi-form .nf-form-content { padding: 0; max-width: none; }
.sdi-form .nf-form-fields-required { font-size: .95rem; color: var(--mute); margin-bottom: 18px; }
.sdi-form nf-fields-wrap { display: flex; flex-wrap: wrap; gap: 0 20px; }
.sdi-form nf-field { flex: 1 1 100%; }
@media (min-width: 700px) { .sdi-form nf-field:has(.sdi-half) { flex: 1 1 calc(50% - 10px); } }
.sdi-form .nf-field-container { margin-bottom: 22px; }
.sdi-form .nf-field-label { margin-bottom: 6px; }
.sdi-form .nf-field-label label, .sdi-form .nf-field-label .nf-label-span { font-weight: 600; color: var(--ink); font-size: 1rem; }
.sdi-form .ninja-forms-req-symbol { color: var(--red); }
.sdi-form input.ninja-forms-field:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]), .sdi-form textarea.ninja-forms-field, .sdi-form select.ninja-forms-field {
	width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--frame); border-radius: 2px; background: var(--white); color: var(--ink); font: 400 1.0625rem/1.4 var(--body); }
.sdi-form textarea.ninja-forms-field { min-height: 150px; height: 150px; }
.sdi-form .ninja-forms-field:focus { outline: 3px solid var(--red); outline-offset: 1px; border-color: var(--ink); }
.sdi-form .nf-field-description { font-size: .92rem; color: var(--mute); margin-top: 6px; }
.sdi-form .list-radio-wrap ul, .sdi-form .list-checkbox-wrap ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.sdi-form .list-radio-wrap li, .sdi-form .list-checkbox-wrap li { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.sdi-form .list-radio-wrap .nf-field-element li input, .sdi-form .list-checkbox-wrap .nf-field-element li input { width: 20px !important; height: 20px; margin: 0 !important; flex: none; accent-color: var(--red); }
.sdi-form .list-radio-wrap .nf-field-element li label, .sdi-form .list-checkbox-wrap .nf-field-element li label { font-weight: 400 !important; margin: 0 !important; padding: 0; width: auto; }
.sdi-form .list-radio-wrap .nf-field-element li, .sdi-form .list-checkbox-wrap .nf-field-element li { margin: 0 !important; padding: 0; }
.sdi-form .nf-error-msg, .sdi-form .nf-error .nf-error-msg { color: #a3142a; font-size: .95rem; font-weight: 500; margin-top: 6px; }
.sdi-form .nf-error .ninja-forms-field { border-color: #a3142a !important; border-width: 2px !important; }
.sdi-form .nf-form-errors .nf-error-msg { margin: 0 0 12px; }
.sdi-form .nf-pass .ninja-forms-field { border-color: var(--frame); }
.sdi-form input[type=submit], .sdi-form input[type=button].ninja-forms-field { min-height: 52px; padding: 0 30px; border: 0; border-radius: 2px; background: var(--red); color: #fff; font: 600 1.05rem var(--body); cursor: pointer; }
.sdi-form input[type=submit]:hover, .sdi-form input[type=button].ninja-forms-field:hover { background: var(--red-dark); }
.sdi-form .nf-after-field .nf-input-limit { display: none; }
.sdi-thanks { padding: 32px 0 8px; outline: none; }
.sdi-thanks__check { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--red); color: #fff; margin-bottom: 18px; }
.sdi-thanks__check .sdi-ico { width: 32px; height: 32px; stroke-width: 2.2; }
.sdi-thanks h2 { margin-bottom: .35em; }
.sdi-thanks ol { margin: 14px 0 22px; padding-left: 1.3em; }
.sdi-thanks ol li { margin-bottom: 6px; }
.sdi-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

/* ---------- footer (the one dark band) ---------- */
.sdi-foot { background: var(--ink); color: #d6d3cd; font-size: 1rem; }
.sdi-foot a { color: #fff; }
.sdi-foot a:hover { color: #f2d4d8; }
.sdi-foot :focus-visible { outline-color: #fff; }
.sdi-foot__in { display: grid; gap: 40px 48px; padding: clamp(56px, 6vw, 88px) var(--pad) 44px; }
@media (min-width: 700px) { .sdi-foot__in { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .sdi-foot__in { grid-template-columns: 1.35fr 1fr 1fr 1.2fr; } }
.sdi-foot__name { font: 400 2rem/1.1 var(--display); color: #fff; margin: 0 0 22px; }
.sdi-foot__name span { display: block; margin-top: 8px; font: 600 .78rem var(--body); font-stretch: 82%; letter-spacing: .2em; text-transform: uppercase; color: #bdb9b2; }
.sdi-foot__facts { list-style: none; margin: 0; padding: 0; }
.sdi-foot__facts li { display: flex; gap: 12px; padding: 6px 0; }
.sdi-foot__facts .sdi-ico { color: #c9a3a9; width: 20px; height: 20px; margin-top: 3px; }
.sdi-foot__facts a { text-decoration: none; }
.sdi-foot__facts a:hover { text-decoration: underline; }
.sdi-foot__h { font: 600 .8rem var(--body); font-stretch: 82%; letter-spacing: .18em; text-transform: uppercase; color: #bdb9b2; margin: 6px 0 16px; }
.sdi-foot__col ul { list-style: none; margin: 0; padding: 0; }
.sdi-foot__col li { padding: 4px 0; }
.sdi-foot__col a { text-decoration: none; }
.sdi-foot__col a:hover { text-decoration: underline; }
.sdi-foot__col p { margin: 0 0 14px; }
.sdi-foot__col p a { text-decoration: underline; text-underline-offset: 3px; }
.sdi-foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 18px var(--pad) 22px; border-top: 1px solid #3b3b3f; font-size: .9rem; color: #bdb9b2; }
.sdi-foot__base p { margin: 0; }
.sdi-credit a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the one quiet fade-in (site.js adds .sdi-rise only when motion is allowed) ---------- */
.sdi-rise { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.sdi-rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.sdi-rise { opacity: 1; transform: none; transition: none; }
	.sdi-banner__slide { transition: none; }
	html { scroll-behavior: auto; }
}

@media print {
	.sdi-header, .sdi-callbar, .sdi-banner__bar, .sdi-foot__in { display: none !important; }
	.sdi-header { position: static; }
}