:root {
--ds-forest: #1f4d2e;
--ds-forest-dark: #163a23;
--ds-leaf: #2b7e3f;
--ds-leaf-dark: #236c35;
--ds-mint: #9bd6a9;
--ds-ink: #26271f;
--ds-muted: #5c5d53;
--ds-sand: #f4f1e9;
--ds-sand-light: #faf8f2;
--ds-border: #e8e3d7;
--ds-white: #ffffff;
--ds-shadow: 0 20px 48px rgba(31, 77, 46, 0.12);
--ds-radius-sm: 12px;
--ds-radius: 20px;
--ds-radius-lg: 28px;
--ds-container: 1320px;
--ds-content: 760px;
} .front-page .home-section-tone--white {
background-color: var(--ds-white);
color: var(--ds-ink);
}
.front-page .home-section-tone--sand {
background-color: var(--ds-sand);
color: var(--ds-ink);
}
.front-page .home-section-tone--white h2,
.front-page .home-section-tone--white h3,
.front-page .home-section-tone--sand h2,
.front-page .home-section-tone--sand h3 {
color: var(--ds-ink);
}
.front-page .home-section-tone--white p,
.front-page .home-section-tone--sand p {
color: var(--ds-muted);
}
.front-page .home-section-tone--white .eyebrow,
.front-page .home-section-tone--sand .eyebrow {
color: var(--ds-leaf);
}
.front-page .home-section-tone--forest {
background-color: var(--ds-forest);
color: #d7e8d9;
}
.front-page .home-section-tone--forest h2,
.front-page .home-section-tone--forest h3,
.front-page .home-section-tone--forest strong {
color: var(--ds-white);
}
.front-page .home-section-tone--forest p {
color: #d7e8d9;
}
.front-page .home-section-tone--forest .eyebrow,
.front-page .home-section-tone--forest .text-link,
.front-page .home-section-tone--forest .forest-text-link {
color: var(--ds-mint);
}
.front-page .home-section-tone--white .button--outline-light,
.front-page .home-section-tone--sand .button--outline-light {
border-color: var(--ds-forest);
color: var(--ds-forest);
}
.home-store-cta.home-section-tone--white .home-store-cta__inner,
.home-store-cta.home-section-tone--sand .home-store-cta__inner {
background: transparent;
border: 1px solid var(--ds-border);
}
.home-store-cta.home-section-tone--white h2,
.home-store-cta.home-section-tone--white p,
.home-store-cta.home-section-tone--white .eyebrow,
.home-store-cta.home-section-tone--sand h2,
.home-store-cta.home-section-tone--sand p,
.home-store-cta.home-section-tone--sand .eyebrow {
color: inherit;
}
.home-store-cta.home-section-tone--forest .home-store-cta__inner {
background: var(--ds-leaf);
} .home-store-cta.home-section-tone--forest {
background: var(--ds-white);
}
.home-section-tone--forest .home-product-card,
.home-section-tone--forest .home-category-card,
.home-section-tone--forest .home-ordering__card,
.home-section-tone--forest .home-brand-grid article,
.home-section-tone--forest .home-value-grid > div,
.home-section-tone--forest .service-feature-grid article,
.home-section-tone--forest .review-link-card,
.home-section-tone--forest .home-service-area__details,
.home-section-tone--forest .faq-list details {
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.08);
}
.home-section-tone--forest .home-product-card p,
.home-section-tone--forest .home-category-card small,
.home-section-tone--forest .home-ordering__card p,
.home-section-tone--forest .home-brand-grid article p,
.home-section-tone--forest .home-value-grid > div p,
.home-section-tone--forest .service-feature-grid article p,
.home-section-tone--forest .review-link-card p,
.home-section-tone--forest .home-service-area__details p,
.home-section-tone--forest .faq-list details p {
color: #d7e8d9;
}
.home-stats.home-section-tone--white strong,
.home-stats.home-section-tone--sand strong {
color: var(--ds-ink);
}
.home-stats.home-section-tone--white span,
.home-stats.home-section-tone--sand span {
color: var(--ds-muted);
}
.home-stats.home-section-tone--white .home-stats__grid > div,
.home-stats.home-section-tone--sand .home-stats__grid > div {
border-color: var(--ds-border);
}
.home-custom-section__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
align-items: center;
gap: clamp(36px, 7vw, 96px);
}
.home-custom-section--image-left .home-custom-section__media {
order: -1;
}
.home-custom-section--text-only .home-custom-section__grid {
grid-template-columns: minmax(0, 820px);
}
.home-custom-section__body {
margin-bottom: 28px;
}
.home-custom-section__body > :last-child {
margin-bottom: 0;
}
.home-custom-section__media {
margin: 0;
}
.home-custom-section__media img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--ds-radius-lg);
box-shadow: var(--ds-shadow);
}
@media (max-width: 760px) {
.home-custom-section__grid {
grid-template-columns: 1fr;
}
.home-custom-section--image-left .home-custom-section__media {
order: 0;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--ds-white);
color: var(--ds-ink);
font-family: "Hanken Grotesk", sans-serif;
font-size: 17px;
line-height: 1.6;
text-rendering: optimizeLegibility;
}
body.menu-open {
overflow: hidden;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: var(--ds-forest);
text-underline-offset: 0.18em;
}
a:hover,
a:focus-visible {
color: var(--ds-leaf);
}
button,
input,
select,
textarea {
font: inherit;
}
h1,
h2,
h3,
h4 {
margin: 0 0 0.45em;
color: var(--ds-ink);
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.025em;
}
h1 {
font-size: clamp(2.8rem, 7vw, 5.8rem);
}
h2 {
font-size: clamp(2rem, 4vw, 3.4rem);
}
h3 {
font-size: clamp(1.4rem, 2vw, 2rem);
}
p {
margin: 0 0 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;
}
.screen-reader-text:focus {
z-index: 100000;
top: 8px;
left: 8px;
width: auto;
height: auto;
clip: auto;
padding: 12px 18px;
background: var(--ds-white);
color: var(--ds-forest);
border-radius: 8px;
box-shadow: var(--ds-shadow);
}
:focus-visible {
outline: 3px solid var(--ds-mint);
outline-offset: 3px;
}
.site-container {
width: min(calc(100% - 48px), var(--ds-container));
margin-inline: auto;
}
.content-narrow {
max-width: var(--ds-content);
}
.section {
padding-block: clamp(64px, 8vw, 112px);
}
.section--sand {
background: var(--ds-sand);
}
.eyebrow {
margin-bottom: 16px;
color: var(--ds-leaf);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.button-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.button {
display: inline-flex;
min-height: 52px;
align-items: center;
justify-content: center;
padding: 14px 28px;
border: 2px solid var(--ds-leaf);
border-radius: 999px;
background: var(--ds-leaf);
color: var(--ds-white);
font-weight: 800;
line-height: 1.2;
text-decoration: none;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.button:hover,
.button:focus-visible {
border-color: var(--ds-leaf-dark);
background: var(--ds-leaf-dark);
color: var(--ds-white);
transform: translateY(-1px);
}
.button--small {
min-height: 44px;
padding: 11px 21px;
font-size: 0.9rem;
}
.button--outline {
background: transparent;
color: var(--ds-forest);
}
.button--outline-light {
border-color: rgba(255, 255, 255, 0.62);
background: rgba(255, 255, 255, 0.08);
color: var(--ds-white);
}
.button--outline-light:hover,
.button--outline-light:focus-visible {
border-color: var(--ds-white);
background: rgba(255, 255, 255, 0.18);
}
.button--light {
border-color: var(--ds-white);
background: var(--ds-white);
color: var(--ds-forest);
}
.button--light:hover,
.button--light:focus-visible {
border-color: var(--ds-sand);
background: var(--ds-sand);
color: var(--ds-forest);
}
.button--soft {
border-color: #dcebdd;
background: #eef5ec;
color: var(--ds-forest);
}
.text-link {
color: var(--ds-forest);
font-weight: 800;
text-decoration: none;
}
[data-store-pending] {
cursor: not-allowed;
opacity: 0.58;
}
[data-store-pending]:hover,
[data-store-pending]:focus-visible {
transform: none;
}
.utility-bar {
background: var(--ds-forest);
color: #d7e8d9;
font-size: 0.8rem;
}
.utility-bar__inner {
display: flex;
min-height: 38px;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.utility-bar a {
color: var(--ds-white);
font-weight: 800;
text-decoration: none;
}
.utility-bar__contact {
display: flex;
align-items: center;
gap: 22px;
white-space: nowrap;
}
.utility-bar__contact a:first-child {
color: #d7e8d9;
font-weight: 600;
}
.site-header {
position: sticky;
z-index: 100;
top: 0;
border-bottom: 1px solid var(--ds-border);
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(12px);
}
.admin-bar .site-header {
top: 32px;
}
.site-header__inner {
display: grid;
min-height: 86px;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 30px;
}
.site-brand img,
.site-brand .custom-logo {
width: auto;
max-height: 60px;
}
.site-brand__fallback,
.custom-logo-link {
display: block;
line-height: 0;
}
.primary-navigation {
justify-self: center;
}
.menu {
padding: 0;
margin: 0;
list-style: none;
}
.primary-menu {
display: flex;
align-items: center;
gap: clamp(16px, 2vw, 32px);
}
.primary-menu a {
color: #37382f;
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
}
.primary-menu > .menu-item-has-children {
position: relative;
display: flex;
align-items: center;
}
.submenu-toggle {
display: none;
}
.primary-menu .sub-menu {
position: absolute;
z-index: 30;
top: calc(100% + 14px);
left: 50%;
display: block;
width: max-content;
min-width: 250px;
padding: 10px;
margin: 0;
list-style: none;
visibility: hidden;
opacity: 0;
transform: translate(-50%, -8px);
border: 1px solid var(--ds-border);
border-radius: 16px;
background: var(--ds-white);
box-shadow: 0 18px 40px rgba(18, 45, 27, 0.16);
transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}
.primary-menu .sub-menu::before {
position: absolute;
right: 0;
bottom: 100%;
left: 0;
height: 15px;
content: "";
}
.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu {
visibility: visible;
opacity: 1;
transform: translate(-50%, 0);
}
.primary-menu .sub-menu a {
display: block;
padding: 11px 13px;
border-radius: 10px;
white-space: nowrap;
}
.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible,
.primary-menu .sub-menu .current-menu-item > a {
background: var(--ds-mist);
}
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a,
.primary-menu .current-menu-ancestor > a,
.primary-menu .current_page_ancestor > a,
.primary-menu a:hover,
.primary-menu a:focus-visible {
color: var(--ds-leaf);
}
.site-header__actions {
display: flex;
align-items: center;
gap: 18px;
white-space: nowrap;
}
.menu-toggle {
display: none;
width: 46px;
height: 46px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--ds-ink);
cursor: pointer;
}
.menu-toggle > span:not(.screen-reader-text) {
width: 24px;
height: 2px;
border-radius: 2px;
background: currentcolor;
}
.hero {
position: relative;
display: grid;
min-height: min(760px, calc(100vh - 124px));
align-items: center;
overflow: hidden;
background:
radial-gradient(circle at 82% 18%, rgba(155, 214, 169, 0.25), transparent 30%),
linear-gradient(120deg, #102d1b 0%, var(--ds-forest) 58%, #2e6840 100%);
color: var(--ds-white);
}
.hero::after {
position: absolute;
right: -8vw;
bottom: -32%;
width: min(64vw, 840px);
aspect-ratio: 1;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
box-shadow: 0 0 0 80px rgba(255, 255, 255, 0.025), 0 0 0 160px rgba(255, 255, 255, 0.02);
content: "";
}
.hero__inner {
position: relative;
z-index: 1;
padding-block: 96px;
}
.hero__content {
max-width: 820px;
}
.hero--image {
background-position: center;
background-size: cover;
}
.hero h1 {
max-width: 10ch;
color: var(--ds-white);
}
.hero .eyebrow {
color: var(--ds-mint);
}
.hero__lead {
max-width: 620px;
margin-bottom: 32px;
color: #d5e6d8;
font-size: clamp(1.1rem, 2vw, 1.35rem);
}
.page-hero {
padding-block: clamp(72px, 10vw, 136px);
background: var(--ds-sand);
}
.page-hero--compact {
padding-block: clamp(56px, 8vw, 96px);
}
.page-hero h1 {
font-size: clamp(2.8rem, 6vw, 5.2rem);
}
.page-hero__lead {
max-width: 660px;
margin-bottom: 0;
color: var(--ds-muted);
font-size: clamp(1.08rem, 2vw, 1.3rem);
}
.page-hero--forest,
.section--forest {
background: var(--ds-forest);
color: #d7e8d9;
}
.page-hero--forest h1,
.page-hero--forest h2,
.section--forest h2,
.section--forest h3 {
color: var(--ds-white);
}
.page-hero--forest .page-hero__lead,
.section--forest p {
color: #d7e8d9;
}
.page-hero--forest .eyebrow,
.section--forest .eyebrow {
color: var(--ds-mint);
}
.page-hero--forest .breadcrumbs,
.page-hero--forest .breadcrumbs a,
.image-hero .breadcrumbs,
.image-hero .breadcrumbs a {
color: var(--ds-white);
}
.page-hero--forest .breadcrumbs li:not(:last-child)::after,
.image-hero .breadcrumbs li:not(:last-child)::after {
color: rgba(255, 255, 255, 0.65);
}
.image-hero {
display: grid;
min-height: clamp(500px, 68vw, 760px);
align-items: end;
padding-block: clamp(72px, 10vw, 130px);
background-color: var(--ds-forest);
background-position: center;
background-size: cover;
color: var(--ds-white);
}
.image-hero h1 {
max-width: 12ch;
color: var(--ds-white);
font-size: clamp(2.8rem, 6vw, 5.3rem);
}
.image-hero .eyebrow {
color: var(--ds-mint);
}
.image-hero__lead {
max-width: 680px;
margin-bottom: 0;
color: #e6efe7;
font-size: clamp(1.08rem, 2vw, 1.32rem);
}
.image-hero--service {
min-height: clamp(520px, 62vw, 720px);
background-position: center;
}
.breadcrumbs {
margin-bottom: 28px;
color: var(--ds-muted);
font-size: 0.9rem;
font-weight: 700;
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
padding: 0;
margin: 0;
list-style: none;
}
.breadcrumbs li {
display: inline-flex;
align-items: center;
min-width: 0;
}
.breadcrumbs li:not(:last-child)::after {
margin-left: 10px;
color: #9a927e;
content: "/";
}
.breadcrumbs a {
color: var(--ds-forest);
text-underline-offset: 3px;
}
.entry-content > *:first-child {
margin-top: 0;
}
.entry-content > *:last-child {
margin-bottom: 0;
}
.entry-content h2,
.entry-content h3 {
margin-top: 1.6em;
}
.entry-content a:not(.button) {
font-weight: 700;
}
.entry-content ul,
.entry-content ol {
padding-left: 1.25em;
}
.entry-content blockquote {
padding: 20px 24px;
margin: 32px 0;
border-left: 5px solid var(--ds-leaf);
background: var(--ds-sand);
}
.entry-content .wp-block-table {
overflow-x: auto;
margin: 32px 0;
border: 1px solid var(--ds-border);
border-radius: 16px;
background: var(--ds-white);
}
.entry-content .wp-block-table table {
width: 100%;
min-width: 560px;
border-collapse: collapse;
}
.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--ds-border);
text-align: left;
vertical-align: top;
}
.entry-content .wp-block-table th {
background: var(--ds-sand);
color: var(--ds-forest);
font-weight: 800;
}
.entry-content .wp-block-table tr:last-child td {
border-bottom: 0;
} .entry-content :is(
.dit-takeaways,
.dit-tip,
.dit-info-box,
.dit-note-box,
.dit-warning,
.dit-quick-box,
.dit-formula,
.dit-formula-box,
.dit-drainage,
.dit-decision,
.dit-verdict,
.dit-mechanism,
.dit-calculator-callout
) {
padding: clamp(22px, 4vw, 34px);
margin: 32px 0;
border: 1px solid var(--ds-border);
border-left: 5px solid var(--ds-leaf);
border-radius: 18px;
background: var(--ds-sand);
}
.entry-content :is(.dit-drainage, .dit-warning, .dit-verdict) {
background: var(--ds-forest);
color: var(--ds-sand);
}
.entry-content :is(.dit-drainage, .dit-warning, .dit-verdict) :is(h2, h3, h4, p, li, strong) {
color: inherit;
}
.entry-content :is(.dit-label, .qp-label, .bf-label, .f-label, .dq-label, .calc-label) {
display: inline-flex;
padding: 5px 11px;
margin-bottom: 14px;
border-radius: 999px;
background: var(--ds-leaf);
color: var(--ds-white);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.entry-content :is(
.dit-mat-grid,
.dit-rock-cards,
.dit-sand-grid,
.dit-soil-cards,
.dit-stone-grid,
.dit-type-grid,
.dit-why-grid,
.dit-zone-grid,
.dit-cost-compare,
.dit-cost-split,
.dit-compare,
.dit-base-steps,
.dit-steps,
.dit-signs
) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin: 30px 0;
}
.entry-content :is(
.dit-mat-card,
.dit-rock-card,
.dit-sand-card,
.dit-soil-card,
.dit-stone-card,
.dit-type-card,
.dit-why-card,
.dit-cost-card,
.dit-cost-panel,
.dit-compare-panel,
.dit-brand,
.dit-product,
.dit-zone,
.dit-step,
.dit-decision-step,
.dit-base-step,
.dit-sign
) {
min-width: 0;
padding: 22px;
border: 1px solid var(--ds-border);
border-radius: 16px;
background: var(--ds-white);
}
.entry-content :is(.dit-cta, .dit-cta-block) {
padding: clamp(28px, 5vw, 48px);
margin: 42px 0;
border-radius: 20px;
background: var(--ds-forest);
color: var(--ds-sand);
text-align: center;
}
.entry-content :is(.dit-cta, .dit-cta-block) :is(h2, h3, p) {
color: inherit;
}
.entry-content :is(.dit-cta-btn, .shop-button) {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 22px;
margin: 6px;
border: 2px solid var(--ds-sand);
border-radius: 999px;
background: var(--ds-sand);
color: var(--ds-forest);
font-weight: 800;
text-decoration: none;
}
.entry-content :is(.dit-cta-btn, .shop-button):hover {
border-color: var(--ds-leaf);
background: var(--ds-leaf);
color: var(--ds-white);
}
.entry-content :is(.dit-faq-item, .dit-size-block, .dit-material, .dit-layer) {
padding: 22px 0;
border-bottom: 1px solid var(--ds-border);
}
.entry-content :is(.dit-faq-q, .sand-name, .dit-step-num, .dit-base-num) {
color: var(--ds-forest);
font-weight: 800;
}
.entry-content :is(.dit-table, .dit-table2, .dit-cov-table) {
width: 100%;
min-width: 560px;
border-collapse: collapse;
}
.entry-content :is(.dit-table, .dit-table2, .dit-cov-table) :is(th, td) {
padding: 13px 15px;
border-bottom: 1px solid var(--ds-border);
text-align: left;
vertical-align: top;
}
.entry-content :is(.dit-table, .dit-table2, .dit-cov-table) th {
background: var(--ds-sand);
color: var(--ds-forest);
}
.entry-content .dit-calculator-callout .button {
margin-top: 8px;
}
@media (max-width: 700px) {
.entry-content :is(
.dit-mat-grid,
.dit-rock-cards,
.dit-sand-grid,
.dit-soil-cards,
.dit-stone-grid,
.dit-type-grid,
.dit-why-grid,
.dit-zone-grid,
.dit-cost-compare,
.dit-cost-split,
.dit-compare,
.dit-base-steps,
.dit-steps,
.dit-signs
) {
grid-template-columns: 1fr;
}
.entry-content :is(.dit-table, .dit-table2, .dit-cov-table) {
min-width: 520px;
}
}
.post-grid,
.product-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.product-grid--catalogue {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 36px;
}
.section-heading {
margin-bottom: 28px;
}
.section-heading h2 {
font-size: clamp(2rem, 4vw, 3.2rem);
}
.product-category-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 34px;
}
.product-category-card {
display: flex;
min-width: 0;
overflow: hidden;
flex-direction: column;
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius);
background: var(--ds-white);
box-shadow: 0 8px 24px rgba(31, 77, 46, 0.05);
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.product-category-card:hover {
border-color: #cddfcf;
box-shadow: var(--ds-shadow);
transform: translateY(-3px);
}
.product-category-card__media {
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--ds-sand);
}
.product-category-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 300ms ease;
}
.product-category-card:hover .product-category-card__media img {
transform: scale(1.035);
}
.product-category-card__body {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
padding: 28px;
}
.product-category-card h2 {
font-size: clamp(1.45rem, 2vw, 1.8rem);
}
.product-category-card h2 a {
color: var(--ds-ink);
text-decoration: none;
}
.product-category-card h3 a {
color: var(--ds-ink);
text-decoration: none;
}
.product-category-card--compact .product-category-card__body {
padding: 22px;
}
.product-category-card--compact h3 {
font-size: 1.45rem;
}
.product-category-card__includes {
color: var(--ds-muted);
font-size: 0.92rem;
line-height: 1.55;
}
.product-category-card .text-link {
margin-top: auto;
color: var(--ds-leaf);
font-weight: 800;
}
.post-card,
.product-card {
overflow: hidden;
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius);
background: var(--ds-white);
box-shadow: 0 8px 24px rgba(31, 77, 46, 0.05);
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.post-card:hover,
.product-card:hover {
border-color: #cddfcf;
box-shadow: var(--ds-shadow);
transform: translateY(-3px);
}
.post-card__media,
.product-card__media {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--ds-sand);
}
.post-card__media img,
.product-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 300ms ease;
}
.post-card:hover img,
.product-card:hover img {
transform: scale(1.035);
}
.post-card__body,
.product-card__body {
padding: 26px;
}
.product-card--catalogue {
display: flex;
min-width: 0;
flex-direction: column;
}
.product-card--catalogue .product-card__body {
display: flex;
flex: 1;
flex-direction: column;
}
.product-card__facts {
display: grid;
gap: 14px;
padding-top: 20px;
margin: 4px 0 24px;
border-top: 1px solid var(--ds-border);
}
.product-card__facts div {
display: grid;
gap: 4px;
}
.product-card__facts dt {
color: var(--ds-forest);
font-family: "Bricolage Grotesque", sans-serif;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.product-card__facts dd {
margin: 0;
color: var(--ds-muted);
font-size: 0.92rem;
line-height: 1.55;
}
.product-card__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 20px;
margin-top: auto;
}
.product-card__actions .text-link {
color: var(--ds-forest);
font-size: 0.92rem;
font-weight: 800;
text-underline-offset: 4px;
}
.post-card h2,
.product-card h2 {
font-size: 1.55rem;
}
.post-card h2 a,
.product-card h2 a {
color: var(--ds-ink);
text-decoration: none;
}
.entry-meta,
.product-card__category {
margin-bottom: 10px;
color: var(--ds-leaf);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.price-disclaimer {
margin-bottom: 34px;
padding: 18px 22px;
border: 1px solid #d9d1bf;
border-radius: var(--ds-radius-sm);
background: var(--ds-sand-light);
}
.price-disclaimer p {
margin: 0;
color: var(--ds-muted);
}
.product-price {
display: grid;
gap: 3px;
margin: 20px 0;
color: var(--ds-forest);
}
.product-price span {
font-family: "Bricolage Grotesque", sans-serif;
font-size: 1.28rem;
font-weight: 800;
}
.product-price small {
color: var(--ds-muted);
font-size: 0.78rem;
}
.product-price--label span {
color: var(--ds-muted);
font-size: 1rem;
}
.product-price--detail {
padding: 18px 20px;
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-sm);
background: var(--ds-white);
}
.product-price--detail span {
font-size: 1.65rem;
}
.bulk-pickup-notice {
display: grid;
grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.4fr) auto;
align-items: center;
gap: clamp(22px, 4vw, 52px);
margin-top: 36px;
padding: clamp(24px, 4vw, 40px);
border: 1px solid #d7caa9;
border-left: 6px solid var(--ds-leaf);
border-radius: var(--ds-radius);
background: var(--ds-sand-light);
}
.bulk-pickup-notice h2,
.bulk-pickup-notice p {
margin: 0;
}
.bulk-pickup-notice p {
color: var(--ds-muted);
}
.bulk-pickup-notice--product {
display: block;
margin: 20px 0;
padding: 20px;
border-left-width: 4px;
border-radius: var(--ds-radius-sm);
}
.bulk-pickup-notice--product h2 {
margin-bottom: 8px;
font-size: 1.15rem;
}
.bulk-pickup-notice--product a {
display: inline-block;
margin-top: 10px;
font-weight: 800;
}
.media-placeholder {
display: block;
width: 100%;
height: 100%;
min-height: 260px;
background:
linear-gradient(135deg, rgba(31, 77, 46, 0.06), rgba(43, 126, 63, 0.18)),
repeating-linear-gradient(135deg, transparent 0 24px, rgba(255, 255, 255, 0.36) 24px 26px);
}
.featured-media {
max-width: 1100px;
margin-top: -58px;
}
.featured-media img {
width: 100%;
max-height: 680px;
border-radius: var(--ds-radius-lg);
object-fit: cover;
box-shadow: var(--ds-shadow);
}
.product-detail__hero {
background: var(--ds-sand-light);
}
.product-detail__hero .breadcrumbs {
margin-bottom: clamp(34px, 5vw, 58px);
}
.product-detail__grid {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
align-items: center;
gap: clamp(40px, 7vw, 92px);
}
.product-detail__media {
overflow: hidden;
aspect-ratio: 4 / 3;
border-radius: var(--ds-radius-lg);
background: var(--ds-sand);
box-shadow: var(--ds-shadow);
}
.product-detail__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-detail__summary h1 {
font-size: clamp(2.8rem, 5vw, 5rem);
}
.product-detail__lead {
color: var(--ds-muted);
font-size: 1.2rem;
}
.product-content-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
align-items: start;
gap: clamp(36px, 6vw, 80px);
}
.product-facts {
display: grid;
gap: 14px;
margin: 0;
}
.product-facts__item {
padding: 22px;
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-sm);
background: var(--ds-white);
}
.product-facts dt {
margin-bottom: 6px;
color: var(--ds-forest);
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 800;
}
.product-facts dd {
margin: 0;
color: var(--ds-muted);
}
.product-qa {
padding-top: 8px;
}
.product-qa > h2 {
margin-bottom: 26px;
}
.product-qa__item {
padding: 24px 0;
border-top: 1px solid var(--ds-border);
}
.product-qa__item:last-child {
border-bottom: 1px solid var(--ds-border);
}
.product-qa__item h3 {
margin: 0 0 10px;
font-size: clamp(1.15rem, 2vw, 1.45rem);
}
.product-qa__item p {
margin: 0;
color: var(--ds-muted);
line-height: 1.7;
}
.contact-layout,
.calculator-layout {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
align-items: start;
gap: clamp(36px, 7vw, 88px);
}
.contact-card,
.calculator-card {
padding: clamp(28px, 4vw, 44px);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-lg);
background: var(--ds-sand);
}
.contact-card h2 {
font-size: 2rem;
}
.field-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.field-grid label span {
display: block;
margin-bottom: 7px;
color: var(--ds-muted);
font-size: 0.8rem;
font-weight: 800;
}
.field-grid input {
width: 100%;
padding: 13px 14px;
border: 1.5px solid #dad6ca;
border-radius: var(--ds-radius-sm);
background: var(--ds-white);
color: var(--ds-ink);
}
.field-grid input:focus {
border-color: var(--ds-leaf);
}
.calculator-result {
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
padding-top: 28px;
margin-top: 28px;
border-top: 1px solid #d8d4c8;
}
.calculator-result > span {
color: var(--ds-muted);
font-weight: 700;
}
.calculator-result strong {
color: var(--ds-forest);
font-family: "Bricolage Grotesque", sans-serif;
font-size: clamp(2.4rem, 5vw, 4.2rem);
line-height: 1;
}
.calculator-result sup {
font-size: 0.45em;
}
.fine-print {
margin: 24px 0 0;
color: var(--ds-muted);
font-size: 0.82rem;
}
.split-intro,
.two-column-info,
.visit-layout,
.faq-layout {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
align-items: start;
gap: clamp(36px, 7vw, 92px);
}
.prose-large {
color: var(--ds-muted);
font-size: clamp(1.08rem, 2vw, 1.3rem);
}
.value-grid,
.service-card-grid,
.step-card-grid,
.depth-guide-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.service-card-grid,
.step-card-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 36px;
}
.value-item,
.service-card-grid article,
.step-card-grid article,
.depth-guide-grid article {
padding: clamp(24px, 3vw, 34px);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius);
background: var(--ds-white);
}
.value-item > span,
.step-card-grid article > span,
.depth-guide-grid article > strong {
display: block;
margin-bottom: 22px;
color: var(--ds-leaf);
font-family: "Bricolage Grotesque", sans-serif;
font-size: 1.5rem;
font-weight: 800;
}
.value-item p,
.service-card-grid p,
.step-card-grid p,
.depth-guide-grid p {
margin-bottom: 0;
color: var(--ds-muted);
}
.calculator-referral-section {
display: flex;
align-items: center;
min-height: clamp(480px, 38vw, 640px);
padding-block: clamp(72px, 8vw, 120px);
}
.calculator-referral {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(28px, 6vw, 80px);
padding: clamp(30px, 5vw, 56px);
border-radius: var(--ds-radius-lg);
background: var(--ds-forest);
color: var(--ds-white);
}
.calculator-referral > div {
max-width: 760px;
}
.calculator-referral .eyebrow {
color: var(--ds-mint);
}
.calculator-referral h2 {
margin-bottom: 12px;
color: var(--ds-white);
font-size: clamp(2rem, 4vw, 3.4rem);
}
.calculator-referral p:last-child {
margin-bottom: 0;
color: var(--ds-mint);
font-size: 1.05rem;
}
.calculator-referral .button {
flex: 0 0 auto;
background: var(--ds-white);
color: var(--ds-forest);
}
.calculator-referral .button:hover,
.calculator-referral .button:focus-visible {
background: var(--ds-sand);
color: var(--ds-forest-dark);
}
.delivery-install-referral {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(24px, 5vw, 64px);
padding: clamp(24px, 4vw, 40px);
margin-top: clamp(40px, 6vw, 72px);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-lg);
background: var(--ds-white);
}
.delivery-install-referral > div {
max-width: 780px;
}
.delivery-install-referral h2 {
margin-bottom: 8px;
font-size: clamp(1.55rem, 2.5vw, 2.2rem);
}
.delivery-install-referral p:last-child {
margin-bottom: 0;
color: var(--ds-muted);
}
.delivery-install-referral .button {
flex: 0 0 auto;
}
.service-card-grid a {
display: inline-block;
margin-top: 20px;
font-weight: 800;
}
.visit-layout {
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
align-items: center;
}
.visit-layout__media {
overflow: hidden;
min-height: 360px;
border-radius: var(--ds-radius-lg);
background: var(--ds-forest-dark);
}
.visit-layout__media img {
width: 100%;
height: 100%;
min-height: 360px;
object-fit: cover;
}
.info-stack {
display: grid;
gap: 16px;
}
.info-stack > div {
padding: 22px;
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-sm);
background: var(--ds-white);
}
.info-stack h3 {
font-size: 1.25rem;
}
.info-stack p {
margin: 0;
color: var(--ds-muted);
}
.callout-row,
.review-link-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
border-radius: var(--ds-radius-lg);
}
.callout-row > div,
.review-link-card > div {
max-width: 780px;
}
.numbered-list {
padding-left: 1.3em;
margin: 0 0 30px;
color: var(--ds-muted);
}
.numbered-list li + li {
margin-top: 12px;
}
.quote-form-card {
padding: clamp(28px, 4vw, 46px);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-lg);
background: var(--ds-white);
box-shadow: var(--ds-shadow);
}
.quote-form,
.quote-form label {
display: grid;
gap: 8px;
}
.quote-form {
gap: 20px;
}
.quote-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.quote-form label > span {
color: var(--ds-muted);
font-size: 0.86rem;
font-weight: 800;
}
.quote-form input,
.quote-form textarea {
width: 100%;
padding: 13px 14px;
border: 1.5px solid #dad6ca;
border-radius: var(--ds-radius-sm);
background: var(--ds-white);
color: var(--ds-ink);
}
.quote-form textarea {
resize: vertical;
}
.quote-form input:focus,
.quote-form textarea:focus {
border-color: var(--ds-leaf);
outline: 3px solid rgba(155, 214, 169, 0.42);
outline-offset: 1px;
}
.quote-form__trap {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.form-notice {
padding: 14px 16px;
border-radius: var(--ds-radius-sm);
font-weight: 700;
}
.form-notice--success {
background: #e8f5e9;
color: var(--ds-forest-dark);
}
.form-notice--error {
background: #fff0ed;
color: #7d2f24;
}
.map-section {
padding-bottom: clamp(64px, 8vw, 112px);
}
.map-embed {
overflow: hidden;
min-height: 480px;
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-lg);
background: var(--ds-sand);
box-shadow: var(--ds-shadow);
}
.map-embed--compact {
min-height: 400px;
}
.map-embed iframe {
display: block;
width: 100%;
height: 480px;
border: 0;
}
.map-embed--compact iframe {
height: 400px;
}
.faq-list {
display: grid;
gap: 12px;
}
.faq-list details {
padding: 20px 22px;
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-sm);
background: var(--ds-white);
}
.faq-list summary {
color: var(--ds-ink);
font-family: "Bricolage Grotesque", sans-serif;
font-size: 1.1rem;
font-weight: 800;
cursor: pointer;
}
.faq-list p {
padding-top: 12px;
margin: 0;
color: var(--ds-muted);
}
.pagination-wrap {
margin-top: 48px;
}
.nav-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.page-numbers {
display: inline-flex;
min-width: 42px;
min-height: 42px;
align-items: center;
justify-content: center;
padding: 8px 12px;
border: 1px solid var(--ds-border);
border-radius: 10px;
text-decoration: none;
}
.page-numbers.current {
border-color: var(--ds-forest);
background: var(--ds-forest);
color: var(--ds-white);
}
.empty-state {
text-align: center;
}
.empty-state .button-row {
justify-content: center;
}
.site-footer {
padding: 72px 0 24px;
background: var(--ds-forest-dark);
color: #a9c2ad;
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.4fr 0.8fr 0.8fr 1.1fr;
gap: 48px;
}
.site-footer__brand img,
.site-footer__brand .custom-logo {
width: auto;
max-height: 58px;
padding: 10px 12px;
margin-bottom: 20px;
border-radius: 12px;
background: var(--ds-white);
}
.site-footer a {
color: #d7e8d9;
}
.site-footer .button--light {
border-color: var(--ds-sand);
background: var(--ds-sand);
color: var(--ds-forest);
}
.site-footer .button--light:hover,
.site-footer .button--light:focus-visible {
border-color: var(--ds-forest);
background: var(--ds-forest);
color: var(--ds-sand);
}
.site-footer__heading {
margin-bottom: 18px;
color: var(--ds-white);
font-family: "Hanken Grotesk", sans-serif;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.footer-menu {
display: flex;
flex-direction: column;
gap: 9px;
padding: 0;
margin: 0;
list-style: none;
}
.footer-menu a {
text-decoration: none;
}
.site-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 22px;
margin-top: 48px;
border-top: 1px solid #2c5839;
font-size: 0.8rem;
}
.site-footer__bottom p {
margin: 0;
}
.site-footer__partner-link a {
font-weight: 700;
text-decoration: none;
}
.site-footer__partner-link a:hover,
.site-footer__partner-link a:focus-visible {
color: var(--ds-white);
text-decoration: underline;
}
.mobile-action-bar {
display: none;
} .hero {
min-height: min(660px, calc(100vh - 124px));
}
.hero__inner {
padding-block: 88px;
}
.hero__content {
max-width: 760px;
}
.hero h1 {
max-width: 9.5ch;
font-size: clamp(3.5rem, 7vw, 5.25rem);
letter-spacing: -0.045em;
}
.hero__eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
color: var(--ds-mint);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.hero__eyebrow span {
width: 34px;
height: 2px;
background: currentcolor;
}
.page-hero {
padding-block: clamp(64px, 7vw, 88px);
}
.page-hero .site-container.content-narrow {
max-width: var(--ds-container);
}
.page-hero .content-narrow h1 {
max-width: 18ch;
}
.single-post .page-hero h1 {
max-width: 21ch;
font-size: clamp(2.6rem, 5vw, 4.5rem);
}
.page-hero .content-narrow .page-hero__lead {
max-width: 720px;
}
.home-stats {
background: var(--ds-forest);
color: var(--ds-white);
}
.home-stats__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home-stats__grid > div {
display: grid;
gap: 3px;
min-height: 122px;
align-content: center;
padding: 22px 28px;
border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.home-stats__grid > div:first-child {
border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.home-stats strong {
color: var(--ds-white);
font-family: "Bricolage Grotesque", sans-serif;
font-size: clamp(1.7rem, 3vw, 2.3rem);
line-height: 1;
}
.home-stats span {
color: #c9ddcd;
font-size: 0.9rem;
}
.home-section-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 28px;
margin-bottom: 36px;
}
.home-section-heading h2,
.home-why h2,
.home-service-area__intro h2 {
max-width: 18ch;
font-size: clamp(2.35rem, 4.4vw, 4rem);
}
.home-featured-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.home-product-card {
display: flex;
min-width: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--ds-border);
border-radius: 24px;
background: var(--ds-white);
}
.home-product-card__media {
display: block;
overflow: hidden;
aspect-ratio: 1.1;
background: #e7e2d7;
}
.home-product-card__media img,
.home-category-card__media img,
.home-product-card__media .media-placeholder,
.home-category-card__media .media-placeholder {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 220ms ease;
}
.home-product-card:hover .home-product-card__media img,
.home-category-card:hover .home-category-card__media img {
transform: scale(1.035);
}
.home-product-card__body {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
padding: 24px;
}
.home-product-card h3 {
margin-bottom: 10px;
font-size: 1.35rem;
}
.home-product-card h3 a,
.home-product-card__button {
color: var(--ds-ink);
text-decoration: none;
}
.home-product-card p {
margin-bottom: 22px;
color: var(--ds-muted);
font-size: 0.93rem;
}
.home-product-card__price {
margin-top: auto;
color: var(--ds-forest);
font-weight: 800;
}
.home-product-card__button {
padding-top: 16px;
color: var(--ds-leaf);
font-weight: 800;
}
.home-product-card__actions {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 12px;
}
.home-product-card__actions .home-product-card__button {
padding-top: 0;
}
.home-product-card__store {
color: var(--ds-forest);
font-size: 0.88rem;
font-weight: 800;
text-decoration: none;
}
.home-categories {
padding-top: 0;
}
.home-category-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.home-category-card {
display: grid;
min-width: 0;
overflow: hidden;
border: 1px solid var(--ds-border);
border-radius: 22px;
background: var(--ds-white);
color: var(--ds-ink);
text-decoration: none;
}
.home-category-card__media {
display: block;
overflow: hidden;
aspect-ratio: 1.8;
background: #e7e2d7;
}
.home-category-card__body {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 18px;
align-items: center;
padding: 22px 24px;
}
.home-category-card__body strong {
font-family: "Bricolage Grotesque", sans-serif;
font-size: 1.2rem;
}
.home-category-card__body small {
grid-column: 1 / -1;
color: var(--ds-muted);
}
.home-store-cta {
padding-block: 24px;
background: var(--ds-white);
color: var(--ds-white);
}
.home-store-cta__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: clamp(30px, 5vw, 54px);
border-radius: var(--ds-radius-lg);
background: var(--ds-leaf);
}
.home-store-cta h2,
.home-store-cta p,
.home-store-cta .eyebrow {
color: var(--ds-white);
}
.home-store-cta p {
max-width: 680px;
margin-bottom: 0;
}
.home-value-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px;
margin-top: 42px;
}
.home-ordering__heading,
.home-brands__heading {
margin-bottom: 38px;
}
.home-ordering__heading h2,
.home-brands__heading h2 {
max-width: 19ch;
font-size: clamp(2.4rem, 4.7vw, 4.2rem);
}
.home-ordering__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.home-ordering__card {
display: flex;
min-width: 0;
flex-direction: column;
align-items: flex-start;
padding: clamp(28px, 4vw, 42px);
border: 1px solid #d9e5d6;
border-radius: 24px;
background: #eef4ec;
}
.home-ordering__step {
margin-bottom: 24px;
color: var(--ds-leaf);
font-size: 0.84rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.home-ordering__card h3 {
font-size: clamp(1.55rem, 2.3vw, 2.15rem);
}
.home-ordering__card > p:not(.home-ordering__step) {
color: var(--ds-muted);
}
.home-ordering__card .text-link {
margin-top: auto;
}
.home-pickup-reminder {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 24px;
padding: 20px 24px;
border: 1px solid #d7caa9;
border-radius: var(--ds-radius-sm);
background: var(--ds-sand-light);
}
.home-pickup-reminder div {
display: grid;
gap: 3px;
}
.home-pickup-reminder span {
color: var(--ds-muted);
}
.home-value-grid > div {
padding-top: 22px;
border-top: 2px solid var(--ds-leaf);
}
.home-value-grid > div > span {
color: var(--ds-leaf);
font-weight: 800;
}
.home-value-grid h3 {
margin: 14px 0 10px;
font-size: 1.28rem;
}
.home-value-grid p {
color: var(--ds-muted);
}
.home-calculator__grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(48px, 8vw, 110px);
align-items: center;
}
.home-calculator__grid > div:first-child {
max-width: 530px;
}
.home-calculator h2 {
font-size: clamp(2.7rem, 5vw, 4.6rem);
}
.calculator-card--white {
padding: clamp(24px, 4vw, 42px);
border-radius: 24px;
background: var(--ds-white);
color: var(--ds-ink);
}
.calculator-result--soft {
overflow: hidden;
padding: 24px;
border-top: 0;
border-radius: 18px;
background: var(--ds-sand);
}
.calculator-result--soft strong {
flex: 0 0 auto;
white-space: nowrap;
}
.front-page .home-section-tone--forest .calculator-card--white .calculator-result--soft strong {
color: var(--ds-forest);
}
.calculator-unit-note {
padding: 16px 18px;
margin: 18px 0 0;
border: 1px solid var(--ds-border);
border-radius: 14px;
background: var(--ds-sand);
color: var(--ds-muted);
font-size: 0.94rem;
}
.section--forest .calculator-card--white .calculator-unit-note {
color: var(--ds-muted);
line-height: 1.55;
}
.section--forest .calculator-card--white .calculator-unit-note strong {
color: var(--ds-forest);
}
.calculator-unit-note strong {
color: var(--ds-forest);
}
.forest-text-link {
color: var(--ds-white);
font-weight: 800;
}
.home-calculator__button {
width: 100%;
margin-top: 18px;
}
.home-review-live {
display: grid;
gap: 2px;
padding: 12px 18px;
border-radius: 14px;
background: var(--ds-sand);
text-align: right;
}
.home-review-live strong {
color: var(--ds-forest);
}
.home-review-live span {
color: var(--ds-muted);
font-size: 0.82rem;
}
.review-link-card--sand {
padding: clamp(26px, 4vw, 40px);
border: 1px solid var(--ds-border);
background: var(--ds-sand);
}
.home-reviews__live-widget {
overflow: hidden;
padding: clamp(24px, 4vw, 40px);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-lg);
background: var(--ds-sand);
}
.home-service-area__intro {
max-width: var(--ds-container);
margin-bottom: 42px;
}
.home-service-area__intro p:last-child {
max-width: 760px;
}
.home-service-area__grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: clamp(34px, 6vw, 76px);
align-items: stretch;
}
.home-service-area__details {
display: flex;
flex-direction: column;
justify-content: center;
}
.home-service-area__details h3 {
font-size: clamp(2rem, 3.5vw, 3rem);
}
.business-hours {
display: grid;
gap: 8px;
padding: 22px 0;
margin: 10px 0 22px;
border-top: 1px solid var(--ds-border);
border-bottom: 1px solid var(--ds-border);
}
.business-hours > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 18px;
}
.business-hours dt {
font-weight: 700;
}
.business-hours dd {
margin: 0;
text-align: right;
white-space: nowrap;
}
.home-service-area__callout {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.home-brand-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.service-feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.service-feature-grid--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-feature-grid > article {
display: flex;
min-width: 0;
flex-direction: column;
align-items: flex-start;
padding: clamp(28px, 4vw, 42px);
border: 1px solid var(--ds-border);
border-radius: 24px;
background: var(--ds-white);
}
.service-feature-grid > article :is(.button, .text-link) {
margin-top: auto;
}
.service-request-grid {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: clamp(40px, 8vw, 110px);
align-items: start;
}
.check-list {
display: grid;
gap: 12px;
padding: 0;
margin: 0 0 28px;
list-style: none;
}
.check-list li {
position: relative;
padding-left: 30px;
color: #d7e8d9;
}
.check-list li::before {
position: absolute;
top: 0;
left: 0;
color: var(--ds-mint);
content: "\2713";
font-weight: 900;
}
.partner-callout,
.cta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(28px, 6vw, 80px);
}
.partner-callout > div,
.cta-row > div {
max-width: 760px;
}
.partner-callout .button,
.cta-row .button {
flex: 0 0 auto;
}
.related-advice__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.related-advice__grid article {
overflow: hidden;
border: 1px solid var(--ds-border);
border-radius: 22px;
background: var(--ds-white);
}
.related-advice__media {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.related-advice__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.related-advice__grid article > div {
padding: 24px;
}
.related-advice__grid h3 {
font-size: 1.3rem;
}
.related-advice__grid h3 a {
color: var(--ds-ink);
text-decoration: none;
}
.home-brands__label {
margin-bottom: 26px;
color: var(--ds-muted);
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.home-brand-grid article {
display: flex;
min-height: 330px;
flex-direction: column;
align-items: flex-start;
padding: clamp(28px, 3.5vw, 40px);
border: 1px solid var(--ds-border);
border-radius: 24px;
background: var(--ds-white);
box-shadow: 0 12px 32px rgba(31, 77, 46, 0.06);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.home-brand-grid article:hover {
transform: translateY(-3px);
box-shadow: 0 18px 38px rgba(31, 77, 46, 0.1);
}
.home-brand-grid article > .text-link {
margin-top: auto;
}
.brand-wordmark {
margin-bottom: 24px;
font-size: clamp(2rem, 3.4vw, 3rem);
}
.brand-wordmark--belgard {
color: #174980;
}
.brand-wordmark--barkman {
color: #2273b9;
}
.front-page .home-section-tone--white .brand-wordmark--belgard,
.front-page .home-section-tone--sand .brand-wordmark--belgard {
color: #174980;
}
.front-page .home-section-tone--white .brand-wordmark--barkman,
.front-page .home-section-tone--sand .brand-wordmark--barkman {
color: #2273b9;
}
.brand-wordmark--lazylawn {
color: var(--ds-leaf);
}
.brand-logo {
display: block;
width: min(100%, 240px);
height: 68px;
margin-bottom: 24px;
object-fit: contain;
object-position: left center;
}
@media (max-width: 782px) {
.home-brand-grid article {
min-height: 0;
}
}
.home-about__grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(42px, 8vw, 120px);
align-items: start;
}
.home-about h2 {
font-size: clamp(3rem, 6vw, 5rem);
}
.home-about__grid > div:last-child {
max-width: 630px;
}
.home-about__grid > div:last-child > p {
font-size: clamp(1.15rem, 2vw, 1.35rem);
}
.home-faq__inner {
display: grid;
grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
gap: clamp(42px, 8vw, 120px);
}
.home-faq__heading h2 {
font-size: clamp(2.6rem, 5vw, 4.3rem);
}
.faq-list--plain details {
padding-inline: 0;
border-width: 0 0 1px;
border-radius: 0;
background: transparent;
}
.site-footer .business-hours {
margin-top: 18px;
border-color: rgba(255, 255, 255, 0.16);
}
.site-footer .business-hours > div,
.site-footer .business-hours dt,
.site-footer .business-hours dd {
color: #d7e8d9;
}
.social-links {
display: flex;
gap: 10px;
margin-top: 20px;
}
.site-footer__email {
margin-top: -8px;
}
.site-footer__email a {
color: #d7e8d9;
}
.social-links a {
display: inline-flex;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: var(--ds-white);
transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.social-links a:hover,
.social-links a:focus-visible {
border-color: var(--ds-mint);
background: var(--ds-leaf);
color: var(--ds-white);
transform: translateY(-1px);
}
.social-links svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentcolor;
stroke-width: 1.8;
}
.social-links a:last-child svg {
fill: currentcolor;
stroke: none;
}
.fine-print--light {
color: #a9c2ad;
font-size: 0.8rem;
}
@media (max-width: 1120px) {
.site-header__inner {
grid-template-columns: auto auto 1fr;
}
.menu-toggle {
display: flex;
justify-self: end;
order: 2;
}
.site-header__actions {
justify-self: end;
order: 3;
}
.primary-navigation {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
width: 100%;
justify-self: stretch;
max-height: calc(100vh - 124px);
overflow-y: auto;
padding: 10px 24px 22px;
border-top: 1px solid var(--ds-border);
border-bottom: 1px solid var(--ds-border);
background: var(--ds-white);
box-shadow: 0 18px 36px rgba(18, 45, 27, 0.12);
}
.primary-navigation.is-open {
display: block;
}
.primary-menu {
width: min(100%, var(--ds-container));
flex-direction: column;
align-items: stretch;
gap: 0;
margin-inline: auto;
}
.primary-menu a {
display: block;
padding: 13px 0;
border-bottom: 1px solid var(--ds-border);
font-size: 1rem;
}
.primary-menu > .menu-item-has-children {
display: grid;
grid-template-columns: 1fr auto;
}
.submenu-toggle {
display: grid;
width: 44px;
height: 44px;
place-items: center;
padding: 0;
border: 0;
border-bottom: 1px solid var(--ds-border);
background: transparent;
color: var(--ds-forest);
cursor: pointer;
}
.submenu-toggle > span[aria-hidden="true"] {
width: 9px;
height: 9px;
transform: rotate(45deg) translate(-2px, -2px);
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transition: transform 160ms ease;
}
.menu-item-has-children.submenu-open > .submenu-toggle > span[aria-hidden="true"] {
transform: rotate(225deg) translate(-1px, -1px);
}
.primary-menu .sub-menu {
position: static;
grid-column: 1 / -1;
display: none;
width: auto;
min-width: 0;
padding: 4px 0 9px 18px;
visibility: visible;
opacity: 1;
transform: none;
border: 0;
border-radius: 0;
background: var(--ds-mist);
box-shadow: none;
transition: none;
}
.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu {
display: none;
transform: none;
}
.primary-menu .menu-item-has-children.submenu-open > .sub-menu {
display: block;
}
.primary-menu .sub-menu a {
padding: 11px 12px;
border-bottom: 0;
white-space: normal;
}
.post-grid,
.product-grid,
.product-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.value-grid,
.depth-guide-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-featured-grid,
.home-value-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-brand-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.product-category-intro {
max-width: 780px;
}
@media (max-width: 782px) {
.admin-bar .site-header {
top: 46px;
}
.utility-bar__inner span {
display: none;
}
.utility-bar__inner {
justify-content: center;
}
.utility-bar__contact {
width: 100%;
justify-content: space-between;
gap: 12px;
font-size: 0.72rem;
}
.site-header__inner {
min-height: 72px;
grid-template-columns: 1fr auto;
gap: 12px;
}
.site-brand img,
.site-brand .custom-logo {
max-height: 48px;
}
.site-header__actions {
display: none;
}
.menu-toggle {
order: initial;
}
.hero {
min-height: 580px;
}
.home-stats__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-stats__grid > div {
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.home-stats__grid > div:nth-child(2n) {
border-right: 0;
}
.home-stats__grid > div:nth-last-child(-n + 2) {
border-bottom: 0;
}
.home-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-calculator__grid,
.home-service-area__grid,
.home-about__grid,
.home-faq__inner,
.home-ordering__grid,
.home-brand-grid,
.bulk-pickup-notice {
grid-template-columns: 1fr;
}
.bulk-pickup-notice .button {
justify-self: start;
}
.home-pickup-reminder {
align-items: flex-start;
flex-direction: column;
}
.home-service-area__details,
.home-calculator__grid > div:first-child {
max-width: none;
}
.product-detail__grid,
.product-content-layout,
.contact-layout,
.calculator-layout,
.split-intro,
.two-column-info,
.visit-layout,
.faq-layout {
grid-template-columns: 1fr;
}
.service-card-grid,
.step-card-grid,
.service-feature-grid,
.service-feature-grid--three,
.service-request-grid,
.related-advice__grid {
grid-template-columns: 1fr;
}
.callout-row,
.review-link-card,
.partner-callout,
.calculator-referral,
.delivery-install-referral,
.cta-row {
align-items: flex-start;
flex-direction: column;
}
.calculator-referral-section {
min-height: 0;
padding-block: 64px;
}
.product-detail__summary {
order: -1;
}
.product-grid--catalogue {
grid-template-columns: 1fr;
}
.field-grid {
grid-template-columns: 1fr;
}
.mobile-action-bar {
position: fixed;
z-index: 110;
right: 0;
bottom: 0;
left: 0;
display: flex;
gap: 10px;
padding: 10px 14px;
border-top: 1px solid var(--ds-border);
background: var(--ds-white);
box-shadow: 0 -8px 26px rgba(18, 45, 27, 0.12);
}
.mobile-action-bar a {
flex: 1;
padding: 13px 10px;
border-radius: 999px;
background: var(--ds-sand);
color: var(--ds-forest);
font-weight: 800;
text-align: center;
text-decoration: none;
}
.mobile-action-bar .mobile-action-bar__primary {
background: var(--ds-leaf);
color: var(--ds-white);
}
.site-footer {
padding-bottom: 92px;
}
}
@media (max-width: 620px) {
.site-container {
width: min(calc(100% - 32px), var(--ds-container));
}
.site-footer__bottom {
align-items: flex-start;
flex-direction: column;
}
.post-grid,
.product-grid,
.product-category-grid,
.value-grid,
.depth-guide-grid,
.site-footer__grid {
grid-template-columns: 1fr;
}
.quote-form__grid {
grid-template-columns: 1fr;
}
.quote-form-card {
padding: 22px;
}
.map-embed,
.map-embed--compact {
min-height: 340px;
}
.map-embed iframe,
.map-embed--compact iframe {
height: 340px;
}
.hero__inner {
padding-block: 72px;
}
.hero h1 {
font-size: clamp(3rem, 15vw, 4.15rem);
}
.page-hero {
padding-block: 64px;
}
.image-hero--service {
min-height: 560px;
padding-block: 68px;
}
.single-post .page-hero h1 {
font-size: 2.35rem;
}
.breadcrumbs {
margin-bottom: 20px;
font-size: 0.82rem;
}
.product-category-card__body,
.product-card__body {
padding: 22px;
}
.product-card__actions {
align-items: stretch;
flex-direction: column;
}
.product-card__actions .button,
.product-card__actions .text-link {
width: 100%;
text-align: center;
}
.featured-media {
margin-top: -30px;
}
.product-detail__hero {
padding-block: 48px;
}
.product-detail__summary h1 {
overflow-wrap: anywhere;
font-size: clamp(2.35rem, 12vw, 3.25rem);
}
.product-detail__summary .button-row {
display: grid;
}
.product-detail__summary .button {
width: 100%;
}
.product-facts__item {
padding: 18px;
}
.calculator-result {
align-items: start;
flex-direction: column;
}
.calculator-result--soft {
padding: 20px;
}
.home-featured-grid,
.home-category-grid,
.home-value-grid,
.home-brand-grid {
grid-template-columns: 1fr;
}
.home-section-heading,
.home-store-cta__inner,
.home-service-area__callout {
align-items: flex-start;
flex-direction: column;
}
.home-review-live {
text-align: left;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}