/*
* Description: Custom CSS Additions Go Here
* Template: twentyseventeen
* Version: 1.0
* Author: VDS
*/

/* vars vars vars vars vars vars vars vars vars vars vars vars vars vars  */

:root {

/* These vars do not require values as they get set automatically in options-page-stylesheet.php
 * They are mainly here so they show up as autocomplete suggestions in code editors if desired.
*/

@property --accent1 { syntax: '*'; inherits: true; }
@property --accent2 { syntax: '*'; inherits: true; }
@property --accent3 { syntax: '*'; inherits: true; }
@property --dark1   { syntax: '*'; inherits: true; }
@property --dark2   { syntax: '*'; inherits: true; }
@property --dark3   { syntax: '*'; inherits: true; }
@property --light1  { syntax: '*'; inherits: true; }
@property --light2  { syntax: '*'; inherits: true; }
@property --light3  { syntax: '*'; inherits: true; }
@property --uihover { syntax: '*'; inherits: true; }
@property --white   { syntax: '*'; inherits: true; }
@property --black   { syntax: '*'; inherits: true; }

/* font family vars */
/*--bodyfont:;*/
/*--headingfont:;*/
/* 	--DunbarMed: 'DunbarTall-Medium', sans-serif; */
/* 	--MontReg: 'Montserrat-Regular', sans-serif; */
/* 	--MontB: 'Montserrat-Bold', sans-serif; */

}

/* /vars /vars /vars /vars /vars /vars /vars /vars /vars /vars /vars  */

/* General */

@media (max-width: 979px) {
    .wpb_row.reverse .conatiner { flex-direction: column-reverse; display: flex; }
}

@media (min-width: 980px) {
    .vertical-align { align-items: center; display: flex; }
}

.pb0 { padding-bottom: 0; }
.pt0 { padding-top: 0;    }
.mt0 { margin-top: 0;     }

/* Top Anchor + Recaptcha */

a.topbutton {
    background-color: var(--accent1);
    transition: all 0.3s ease-in-out;
    border: 2px solid var(--light1);
    text-decoration: none;
    border-radius: 7px;
    bottom: 148px;
    right: 10px;
}
a.topbutton:hover {
	border-color: var(--accent2);
}
a.topbutton i.icon-angle-up {
	justify-content: center;
	align-items: center;
	display: flex;
}
a.topbutton i.icon-angle-up:before {
	transition: all 0.3s ease-in-out;
    margin: 0 !important;
    color: var(--light1);
    position: relative;
    font-size: 48px;
    line-height: 1;
    top: -4.5px;
}
a.topbutton:hover i:before {
	transition: all 0.3s ease-in-out;
	color: var(--accent2);
}
div.grecaptcha-badge {
    bottom: 70px !important;
}

/* END Top Anchor + Recaptcha */

.top-widget .widget a:link {
    color: var(--accent2);
}

/*
 * ============================================================
 * COMPONENT LIBRARY — Shared Reusable CSS
 * VDS 2025 Child Theme / WPBakery Builds
 *
 * This file contains CSS for components that repeat across
 * pages and builds. Add it once to custom.css per site.
 * Per-page CSS files should only contain page-unique styles.
 *
 * INDEX
 * 1.  Hero Section
 * 2.  Subpage Hero
 * 3.  Top CTA Bar
 * 4.  Fifty-Fifty (Background Image Column)
 * 5.  Inline Fifty-Fifty (Static Image Column)
 * 6.  Fifty Section (Multi-Row Inline Fifty Wrapper)
 * 7.  Three-Column Blurb / Services Row
 * 8.  Top Blurb (Full-Width Intro Row)
 * 9.  Testimonials Section
 * 10. Bottom CTA
 * 11. CTA Row (Solid Background, No Image)
 * 12. Gravity Forms — Global Field Styles
 * ============================================================
 */


/* ============================================================
   1. HERO SECTION
   Set background image on section.home-hero in Design Tab
   ============================================================ */

section#HomeHero,
section.home-hero {
    padding: 90px 0;
    display: flex;
    align-items: end;
    justify-content: start;
}
section.vc_section .wpb_row {
    width: 100%;
}
body #content .hero-banner .btn-bt {
    font-weight: 600;
}
.hero-banner h1,
.hero-banner h2,
.hero-banner h6 {
    color: var(--light1);
}
.hero-banner h6 {
    margin-bottom: 16px;
    margin-top: 10px;
}
.hero-banner h1 {
    margin-bottom: 24px;
    line-height: 1.1;
}
.hero-col .vc_column-inner {
    display: flex;
    align-items: flex-start;
}
.hero-col .vc_column-inner .wpb_wrapper {
    max-width: 700px;
}
.sbs-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
}

@media (max-width: 979px) {
    section#HomeHero,
    section.home-hero {
        padding: 40px 0;
    }
}


/* ============================================================
   2. SUBPAGE HERO
   Set background image on section.subpage-hero in Design Tab
   ============================================================ */

section.subpage-hero {
    padding: 0;
}
.subpage-hero-text-col {
    justify-content: center;
    align-items: center;
    display: flex;
}
.subpage-hero-text-col .vc_column-inner {
    justify-content: center;
    align-items: center;
    min-height: 320px;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    width: 90%;
}
.subpage-hero h1,
.subpage-hero h2,
.subpage-hero h6 {
    color: var(--light1);
}
.subpage-hero h1 {
    margin-bottom: 12px;
}
.subpage-hero h6 {
    margin-top: 10px;
}

@media (max-width: 979px) {
    .subpage-hero-text-col .vc_column-inner {
        min-height: 240px;
        padding: 40px 0;
    }
}


/* ============================================================
   3. TOP CTA BAR
   ============================================================ */

.top-cta-section {
    padding: 0;
}
.wpb_row.top-cta {
    padding: 16px 0;
}
.top-cta .wpb_text_column .wpb_wrapper {
    justify-content: center;
    align-items: center;
    column-gap: 16px;
    display: flex;
}
.top-cta h2 {
    margin-bottom: 0;
}

@media (max-width: 979px) {
    .wpb_row.top-cta {
        padding: 24px 0;
    }
    .top-cta .wpb_text_column .wpb_wrapper {
        flex-direction: column;
        column-gap: 0;
        row-gap: 12px;
    }
}


/* ============================================================
   4. FIFTY-FIFTY — BACKGROUND IMAGE COLUMN
   The .image-col is empty — set bg image in Design Tab
   The .fifty-fifty .container breaks out of max-width
   ============================================================ */

.bakery .fifty-fifty .container {
    max-width: unset;
    width: 100%;
}
@media (min-width: 980px) {
    .fifty-fifty .wpb_column:not(.image-col) {
        justify-content: center;
        align-items: center;
        min-height: 520px;
        display: flex;
    }
    .fifty-fifty .wpb_column:not(.image-col) .vc_column-inner {
        justify-content: center;
        align-items: center;
        max-width: 500px;
        margin: 0 auto;
        display: flex;
        width: 90%;
    }
    .fifty-fifty .wpb_column:not(.image-col) .vc_column-inner .wpb_wrapper {
        width: 100%;
    }
    .fifty-fifty .image-col .vc_column-inner {
        height: 100%;
    }
}
.fifty-fifty .btn-bt {
    margin-top: 20px;
}

@media (max-width: 979px) {
    .fifty-fifty.reverse .container {
        flex-direction: column-reverse;
        display: flex;
    }
    .fifty-fifty .wpb_column:not(.image-col) {
        max-width: 90%;
        margin: 0 auto;
        padding: 40px 0;
    }
    .fifty-fifty .image-col .vc_column-inner {
        height: 480px;
    }
}
@media (max-width: 768px) {
    .fifty-fifty .image-col .vc_column-inner {
        height: 380px;
    }
}
@media (max-width: 480px) {
    .fifty-fifty .image-col .vc_column-inner {
        height: 280px;
    }
}


/* ============================================================
   5. INLINE FIFTY-FIFTY — STATIC IMAGE IN COLUMN
   The .img-col contains a standard <img> tag
   ============================================================ */

@media (min-width: 980px) {
    .inline-fifty .text-col {
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .inline-fifty .text-col .vc_column-inner {
        justify-content: center;
        align-items: center;
        max-width: 500px;
        margin: 0 auto;
        display: flex;
        width: 90%;
    }
    .inline-fifty .text-col .vc_column-inner .wpb_wrapper {
        width: 100%;
    }
    .inline-fifty .img-col {
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .inline-fifty .img-col .vc_column-inner {
        justify-content: center;
        align-items: center;
        max-width: 560px;
        display: flex;
        width: 90%;
    }
}
.inline-fifty .img-col img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}
.inline-fifty .btn-bt {
    margin-top: 20px;
}

/* The <img> in an .img-col is wrapped in a <p> by WPBakery's text block.
   That paragraph's default line-height creates phantom space below the image.
   This rule kills it globally — do NOT redeclare per page. */
.bakery .img-col p {
    line-height: 0 !important;
}

@media (max-width: 979px) {
    .inline-fifty .text-col,
    .inline-fifty .img-col {
        max-width: unset;
        margin: 0 auto;
        padding: 0;
    }
}


/* ============================================================
   6. FIFTY SECTION — MULTI-ROW INLINE FIFTY WRAPPER
   The base section class for any [vc_section] containing one or
   more .inline-fifty rows. Always include `fifty-section` as the
   base el_class on the section, even if a modifier class is added.
   Per-page CSS only needs to override values that differ from
   these defaults — do NOT redeclare the base pattern under a new
   section name.
   ============================================================ */

.bakery section.fifty-section {
    padding: 80px 0 !important;
}
section.fifty-section .inline-fifty {
    padding-top: 0;
}
/* When two or more inline-fifty rows exist, this adds the gap between them.
   With a single row, :not(:last-child) never fires — no double padding. */
section.fifty-section .inline-fifty:not(:last-child) {
    padding-bottom: 80px;
}

@media (min-width: 980px) {
    section.fifty-section .inline-fifty .wpb_column:not(:last-child) {
        padding-right: 2.5%;
    }
    section.fifty-section .inline-fifty .wpb_column:not(:first-child) {
        padding-left: 2.5%;
    }
}

@media (max-width: 979px) {
    .bakery section.fifty-section {
        padding: 32px 0 !important;
    }
    section.fifty-section .inline-fifty:not(:last-child) {
        padding-bottom: 40px;
    }
}


/* ============================================================
   7. THREE-COLUMN BLURB / SERVICES ROW
   ============================================================ */

.services-row .service-col {
    text-align: center;
    padding: 40px 20px;
}
.services-row .service-col img {
    margin-bottom: 16px;
    height: 64px;
    width: auto;
}
.services-row .service-col h3 {
    margin-bottom: 12px;
}
.services-row .service-col h4 {
    margin-bottom: 12px;
}
.services-row .service-col p:not(:last-child) {
    margin-bottom: 16px;
}
.services-row .service-col .btn-bt {
    margin-top: 16px;
}

@media (min-width: 980px) {
    .bakery .services-row .container {
        justify-content: space-between;
        display: flex;
    }
}

@media (max-width: 979px) {
    .services-row .service-col {
        padding: 32px 5%;
    }
}


/* ============================================================
   8. TOP BLURB — FULL-WIDTH INTRO ROW
   ============================================================ */

.bakery .wpb_row.top-blurb {
    text-align: center;
    padding: 60px 0;
}
.top-blurb h2 {
    margin-bottom: 16px;
}
.top-blurb p {
    max-width: 760px;
    margin: 0 auto;
}
.top-blurb a.btn-bt {
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 979px) {
    .bakery .wpb_row.top-blurb {
        padding: 40px 0;
    }
}


/* ============================================================
   9. TESTIMONIALS SECTION
   Set background image on section.testimonials-section in Design Tab
   ============================================================ */

.testimonials-row {
    text-align: center;
    padding-bottom: 0;
}
.testimonials-row h2 {
    margin-bottom: 8px;
}
.testimonials-inner-row {
    padding-top: 32px;
}
.testimonial-col {
    text-align: center;
    padding: 0 24px;
}
.testimonial-col p {
    margin-bottom: 16px;
    line-height: 1.8;
}
.testimonial-col h4 {
    text-transform: none;
}

@media (max-width: 979px) {
    .testimonial-col {
        padding: 24px 5%;
    }
    .testimonials-inner-row {
        padding-top: 0;
    }
}


/* ============================================================
   10. BOTTOM CTA
   Set background image on section.bottom-cta-section in Design Tab
   ============================================================ */

section.bottom-cta-section {
    padding: 0;
}
.wpb_row.bottom-cta {
    min-height: 440px;
    padding: 0;
}
.bottom-cta .wpb_column .vc_column-inner {
    justify-content: center;
    align-items: center;
    min-height: 440px;
    display: flex;
}
.bottom-cta .wpb_wrapper {
    text-align: center;
}
.bottom-cta h2 {
    /* margin-bottom: 18px already set in shell-styles.css */
    color: var(--light1);
    text-align: center;
}
.bottom-cta h6 {
    color: var(--light1);
    margin-bottom: 24px;
    text-align: center;
    margin-top: 16px;
}
.bottom-cta p {
    text-align: center;
}
/* Subpage CTA headings scale up — set font-size in per-build CSS */
body:not(.home) .bottom-cta h2,
body:not(.home) .bottom-cta h3 {
    line-height: 1;
}
.bottom-cta .btn-bt {
    margin: 0 6px;
}

@media (max-width: 979px) {
    .wpb_row.bottom-cta {
        min-height: 300px;
    }
    .bottom-cta .wpb_column .vc_column-inner {
        min-height: 300px;
        padding: 40px 0;
    }
}
@media (max-width: 480px) {
    .bottom-cta h2 {
        line-height: 1.2;
    }
    .bottom-cta .btn-bt {
        display: block;
        margin: 0 auto 12px auto;
        width: 90%;
    }
}


/* ============================================================
   11. CTA ROW — SOLID BACKGROUND, NO IMAGE
   Use cta-section + cta-row when CTA has a solid bg color (e.g. light2).
   Default layout: h2 and button side by side.
   Add flex-direction: column in per-page CSS only when comp shows stacked layout.
   ============================================================ */

section.cta-section {
    padding: 0;
}
.wpb_row.cta-row {
    min-height: 200px;
    padding: 60px 0;
}
.cta-row .wpb_column .vc_column-inner {
    justify-content: center;
    align-items: center;
    min-height: 200px;
    display: flex;
}
.cta-row .wpb_content_element .wpb_wrapper {
    justify-content: center;
    align-items: center;
    column-gap: 40px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    width: 100%;
}
.cta-row h2 {
    text-align: center;
    margin-bottom: 0;
}
.cta-row .wpb_content_element .wpb_wrapper a.btn-bt {
    max-width: unset;
    flex-shrink: 0;
}

@media (max-width: 979px) {
    .cta-row .wpb_content_element .wpb_wrapper {
        flex-direction: column;
    }
}


/* ============================================================
   12. GRAVITY FORMS — GLOBAL FIELD STYLES
   Based on real gravity-theme output. Selectors verified
   against gravity-forms-sample-output.html
   ============================================================ */

.gform_wrapper.gravity-theme .gform_heading {
    display: none;
}
.gform_wrapper.gravity-theme {
    max-width: 480px;
    margin: 0 auto;
    width: 90%;
}
.gform_wrapper.gravity-theme .gform_body {
    width: 100%;
}
.gform_wrapper.gravity-theme .gform_fields {
    display: flex !important;
    flex-direction: column;
    row-gap: 0;
    grid-row-gap: 0 !important;
}
.gform_wrapper.gravity-theme .gfield {
    margin-bottom: 0;
    padding: 0 !important;
}
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme .gform-field-label {
    margin-bottom: 4px;
}
.gform_wrapper.gravity-theme .ginput_container input[type="text"],
.gform_wrapper.gravity-theme .ginput_container input[type="email"],
.gform_wrapper.gravity-theme .ginput_container input[type="tel"],
.gform_wrapper.gravity-theme .ginput_container input[type="number"],
.gform_wrapper.gravity-theme .ginput_container select {
    height: 56px;
    width: 100%;
    margin: 0 0 14px 0 !important;
    padding: 0 12px !important;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid var(--light3);
    border-radius: 0;
    background: var(--light1);
    transition: border-color 0.3s ease-in-out;
}
.gform_wrapper.gravity-theme .ginput_container_textarea textarea {
    height: 120px;
    width: 100%;
    padding: 12px !important;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid var(--light3);
    border-radius: 0;
    background: var(--light1);
    transition: border-color 0.3s ease-in-out;
    resize: vertical;
}
.gform_wrapper.gravity-theme .ginput_container input:focus,
.gform_wrapper.gravity-theme .ginput_container input:hover,
.gform_wrapper.gravity-theme .ginput_container select:focus,
.gform_wrapper.gravity-theme .ginput_container select:hover,
.gform_wrapper.gravity-theme .ginput_container_textarea textarea:focus,
.gform_wrapper.gravity-theme .ginput_container_textarea textarea:hover {
    border-color: var(--accent1);
    outline: none;
    transition: border-color 0.3s ease-in-out;
}
.gform_wrapper.gravity-theme .ginput_container input:focus-visible,
.gform_wrapper.gravity-theme .ginput_container select:focus-visible,
.gform_wrapper.gravity-theme .ginput_container_textarea textarea:focus-visible {
    outline: none;
}
.gform_wrapper.gravity-theme .gform-footer,
.gform_wrapper.gravity-theme .gform_footer {
    margin-top: 14px;
    padding: 0;
}
.gform_wrapper.gravity-theme input[type="submit"].gform_button {
    cursor: pointer;
    width: 100%;
}

/* === Page: home === 2026-08-20 === */
/* ============================================================
   PAGE: Home
   ============================================================ */

/* GLOBAL TYPE + BUTTON FIXES (site-wide, not page-scoped —
   belongs here as the first page this build touches) */
body #content h1, body #content h2, body #content h3, body #content h4 {
    font-family: "Playfair Display", serif !important;
}
body #content h1 { font-weight: 600 !important; font-size: 56px !important; line-height: 66px !important; letter-spacing: 0 !important; text-transform: none !important; }
body #content h2 { font-weight: 600 !important; font-size: 36px !important; line-height: 46px !important; letter-spacing: 0 !important; text-transform: none !important; }
body #content h1, body #content h2, body #content h3, body #content h4 { color: var(--dark1) !important; }
body #content .hero-banner h1, body #content .hero-banner h2, body #content .hero-banner h6 { color: var(--light1) !important; }
.eyebrow-gray { color: #717171 !important; }
.inline-fifty h2 { margin-bottom: 16px; }
body #content p, body #content li, body #content a.promo-card-link {
    font-family: "DM Sans", sans-serif !important;
}
body #content .bakery p { color: #717171 !important; }
.eyebrow {
    font-family: "DM Sans", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    line-height: 18px;
    font-weight: 500;
    font-size: 16px;
    display: block;
}
body #content .bakery .eyebrow { color: var(--dark1) !important; margin-bottom: 5px; }
body #content .bakery .eyebrow-light { color: var(--light1) !important; }
.display-1 { font-family: "Playfair Display", serif; font-weight: 900; font-size: 90px; line-height: 90px; letter-spacing: 6px; display: block; }
.display-2 { font-family: "Playfair Display", serif; font-weight: 900; font-size: 72px; line-height: 80px; display: block; }
.display-3 { font-family: "Playfair Display", serif; font-weight: 900; font-size: 44px; line-height: 50px; display: block; }
.display-4 { font-family: "Playfair Display", serif; font-weight: 900; font-size: 27px; line-height: 36px; display: block; }
.h1-size { font-family: "Playfair Display", serif; font-weight: 600; font-size: 56px; line-height: 66px; display: block; }
.h2-size { font-family: "Playfair Display", serif; font-weight: 600; font-size: 36px; line-height: 46px; display: block; }

/* New button treatment — white bg / navy text. Used across this build
   wherever the comp shows a plain white CTA button (hero, spotlight cards,
   card-grid CTAs). Not one of the theme's two default button classes. */
.bakery a.btn-bt.white { background: var(--light1); border: none; }
body #content a.btn-bt.white { color: var(--dark1) !important; }
.bakery a.btn-bt.white:hover { background: var(--light2); }

/* Contrast fix — .btn-bt.alternate is accent2(navy)/dark2 by shell default,
   which is unreadable navy-on-navy with this build's color choice. */
body #content a.btn-bt.alternate { color: var(--light1) !important; }

/* ============================================================
   HERO
   ============================================================ */
.bakery .home-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(65deg, rgba(15,27,43,.55) 20%, rgba(15,27,43,0) 70%);
}
.bakery .home-hero { position: relative; }
.hero-col .vc_column-inner { position: relative; z-index: 1; }
@media (min-width: 980px) { .bakery .home-hero { min-height: 780px; } }
.hero-heading { margin-bottom: 12px !important; }

/* ============================================================
   FAMILY TRADITION (inline-fifty)
   ============================================================ */
.stat-row { display: flex; gap: 48px; margin: 20px 0; }
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
body #content .stat .stat-label {
    font-family: "DM Sans", sans-serif !important;
    color: var(--dark1) !important;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    white-space: normal;
    line-height: 18px;
    font-weight: 500;
    margin-top: 12px;
    max-width: 120px;
    font-size: 16px;
}
.bakery .family-tradition-col a.btn-bt.white {
    border: 1px solid var(--dark1) !important;
}

/* ============================================================
   PROMO CARDS — shared by Products & Services / Featured Projects grids
   Background images are set inline (style="background-image:...") on
   each .promo-card div, not here — swapping a card's photo later is a
   one-line edit in the WPBakery text block, no CSS touch needed.
   ============================================================ */
.bakery .promo-grid-row .container { gap: 24px; }
.bakery .promo-grid-row .wpb_column { padding: 0 !important; }
.bakery .promo-stack-col, .bakery .promo-tall-col { display: flex; }
.bakery .promo-stack-col .vc_column-inner, .bakery .promo-tall-col .vc_column-inner { width: 100%; height: 100%; }
.promo-stack { display: flex; flex-direction: column; gap: 24px; height: 100%; }

.bakery .promo-card {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: flex-end;
    border-radius: 12px;
    position: relative;
    min-height: 284px;
    overflow: hidden;
    display: flex;
    flex: 1;
}
.bakery .promo-card.promo-card-tall {
    min-height: 593px;
    height: 100%;
}

.bakery .promo-card.promo-card-center { text-align: center; }
.promo-card-content { padding: 32px; width: 100%; }
.promo-card.promo-card-center .promo-card-content { max-width: 420px; margin: 0 auto; }
body #content .promo-card .eyebrow,
body #content .promo-card h4,
body #content .promo-card p,
body #content .promo-card .promo-card-link { color: var(--light1) !important; }
body #content .promo-card h4 { margin-bottom: 0px !important; }
body #content .promo-card .eyebrow { margin-bottom: 6px !important; }
.promo-card-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; margin-top: 12px; }

/* ============================================================
   SPOTLIGHT — Grato brand + Why Choose Us (same structure,
   content just floats to opposite sides via spotlight-right/-left)
   ============================================================ */
.bakery section#GratoSpotlight {
    background-image: url('/wp-content/uploads/2026/08/home-grato-spotlight-bg-v2.jpg');
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.bakery section#WhyChooseUs {
    background-image: url('/wp-content/uploads/2026/09/home-parallax-2.jpg');
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
@media (min-width: 980px) {
    .bakery .spotlight-section { min-height: 650px; display: flex; align-items: center; }
    .bakery .spotlight-section > .vc_row { width: 100%; }
}
.spotlight-card {
    box-shadow: 0 32px 72px rgba(20, 20, 43, .3);
    padding: 36px 36px 48px 48px;
    background: var(--dark1);
    border-radius: 12px;
    max-width: 607px;
}
.spotlight-card-col { padding: 0 !important; }
.spotlight-card-col .vc_column-inner { padding: 0 !important; }
.spotlight-right .spotlight-card-col { display: flex; justify-content: flex-start; }
.spotlight-left .spotlight-card-col { display: flex; justify-content: flex-end; }
body #content .spotlight-card p,
body #content .spotlight-card li,
body #content .spotlight-heading { color: var(--light1) !important; }
.spotlight-list { list-style: disc; padding-left: 24px; margin: 20px 0; }
.spotlight-list li { line-height: 30px; }
#GratoSpotlight .eyebrow { font-size: 18px; }

.spotlight-card a.btn-bt {
    display: inline-flex;
    align-items: center;
    margin-top: 14px;
}
.spotlight-card a.btn-bt::after {
    /*content: "\f178";*/
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9.4043 2.65442L15.7499 9.00007L9.4043 15.3457' stroke='%231E3A56' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M15.7499 9L2.25 9' stroke='%231E3A56' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
    /*font-family: 'fontello';*/
    margin-left: 8px;
    font-size: 14px;
}

@media (max-width: 979px) {
    .bakery .spotlight-spacer-col { display: none; }
    .spotlight-card { max-width: 100%; }
}

/* ============================================================
   REVIEWS
   ============================================================ */
.bakery .reviews-widget-row { padding-top: 20px; }

/* ============================================================
   GALLERY — 2x2 mosaic, every tile the same height per row so
   nothing reads taller/shorter than its neighbor
   ============================================================ */

@media (min-width: 980px) {
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 340px 340px;
        gap: 28px;
    }
}

.gallery-tile { border-radius: 12px; overflow: hidden; }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Row 1 wide-left/narrow-right, row 2 mirrored narrow-left/wide-right — matches comp alternation */
.gallery-tile-a { grid-column: 1 / 3; grid-row: 1; }
.gallery-tile-b { grid-column: 3 / 4; grid-row: 1; }
.gallery-tile-c { grid-column: 1 / 2; grid-row: 2; }
.gallery-tile-d { grid-column: 2 / 4; grid-row: 2; }
@media (max-width: 979px) {
    .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px; }
    .gallery-tile-a, .gallery-tile-b, .gallery-tile-c, .gallery-tile-d { grid-column: span 1; }
}
@media (max-width: 480px) {
    .gallery-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 240px); }
    .gallery-tile-a { grid-column: 1; grid-row: 1; }
    .gallery-tile-b { grid-column: 1; grid-row: 2; }
    .gallery-tile-c { grid-column: 1; grid-row: 3; }
    .gallery-tile-d { grid-column: 1; grid-row: 4; }
}

/* ============================================================
   LOGO STRIP (Slick carousel, raw block per dev call)
   ============================================================ */
.logo-strip-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.logo-strip-slick {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    justify-content: center;
    margin-top: 40px;
}
.logo-strip-slick.slick-initialized { display: block; flex-wrap: nowrap; }
.logo-strip-slick .slick-track { align-items: center; display: flex; }
.logo-strip-slick .slick-list { margin: 0 -30px; }
.logo-slide { height: 120px; margin: 0 30px; display: flex !important; align-items: center; justify-content: center; }
.logo-slide img { max-height: 120px; width: auto; transition: all .3s ease-in-out; }
/* .logo-slide img:hover { opacity: 1; } */
.logo-slide { overflow: hidden; }
.logo-strip-slick .slick-slide { overflow: hidden; }
.logo-slide img { width: auto; max-width: 100%; object-fit: contain; }
.logo-strip-slick .slick-prev,
.logo-strip-slick .slick-next {
    transition: all 0.3s ease-in-out;
    width: 40px;
    height: 40px;
    /*background: var(--dark1);*/
    border-radius: 50%;
    z-index: 2;
}
.logo-strip-slick .slick-prev:hover,
.logo-strip-slick .slick-next:hover {
    transition: all 0.3s ease-in-out;
    background: var(--dark1);
}
.logo-strip-slick .slick-prev:before,
.logo-strip-slick .slick-next:before {
    transition: all 0.3s ease-in-out;
    font-family: 'fontello';
    color: var(--dark1);
    font-size: 24px;
    opacity: 1;
}
.logo-strip-slick .slick-prev:hover:before,
.logo-strip-slick .slick-next:hover:before {
    transition: all 0.3s ease-in-out;
    color: var(--light1);
}
.logo-strip-slick .slick-prev:before { content: "\e89f"; }
.logo-strip-slick .slick-next:before { content: "\e8a0"; }
.logo-strip-slick .slick-prev { left: -50px; }
.logo-strip-slick .slick-next { right: -50px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-form-col .gform_wrapper.gravity-theme { margin: 0; width: 100%; max-width: 620px; }
.contact-form-col .gform_wrapper.gravity-theme .gform_fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 32px;
}
.contact-form-col .gform_wrapper.gravity-theme #field_1_1 { grid-column: 1; grid-row: 1; }
.contact-form-col .gform_wrapper.gravity-theme #field_1_4 { grid-column: 1; grid-row: 2; margin-top: 14px; }
.contact-form-col .gform_wrapper.gravity-theme #field_1_3 { grid-column: 2; grid-row: 1; }
.contact-form-col .gform_wrapper.gravity-theme #field_1_2 { grid-column: 2; grid-row: 2; margin-top: 14px; }
.contact-form-col .gform_wrapper.gravity-theme #field_1_5 { grid-column: 1 / -1; grid-row: 3; }
.contact-form-col .gform_wrapper.gravity-theme .gfield--type-honeypot { display: none; }

.contact-form-col .gform_wrapper.gravity-theme .gfield_label,
.contact-form-col .gform_wrapper.gravity-theme .gform-field-label,
.contact-form-col .gform_wrapper.gravity-theme .gform-field-label span.gform-field-label__text {
    font-family: "DM Sans", sans-serif;
    margin-bottom: 8px;
    color: var(--dark1);
    font-weight: 700;
    font-size: 18px;
}
.contact-form-col .gform_wrapper.gravity-theme .ginput_container input[type="text"],
.contact-form-col .gform_wrapper.gravity-theme .ginput_container input[type="email"],
.contact-form-col .gform_wrapper.gravity-theme .ginput_container input[type="tel"],
.contact-form-col .gform_wrapper.gravity-theme .ginput_container select {
    height: 72px;
    border: none;
	width: 100%;
    border-radius: 4px;
    background: var(--light3);
    padding: 0 24px !important;
    font-size: 18px;
    margin: 0 !important;
}
.contact-form-col .gform_wrapper.gravity-theme .ginput_container_textarea textarea {
    min-height: 118px;
    border: none;
    border-radius: 4px;
    background: var(--light3);
    padding: 24px !important;
    font-size: 18px;
}
.contact-form-col .gform_wrapper.gravity-theme .ginput_container input::placeholder,
.contact-form-col .gform_wrapper.gravity-theme .ginput_container_textarea textarea::placeholder {
    color: var(--accent3);
}
.contact-form-col .gform_wrapper.gravity-theme .ginput_container input:focus,
.contact-form-col .gform_wrapper.gravity-theme .ginput_container select:focus,
.contact-form-col .gform_wrapper.gravity-theme .ginput_container_textarea textarea:focus {
    border-color: transparent;
    outline: 2px solid var(--accent1);
}
.contact-form-col .gform_wrapper.gravity-theme .gform-footer,
.contact-form-col .gform_wrapper.gravity-theme .gform_footer {
    margin-top: 0;
}
.contact-form-col .gform_wrapper.gravity-theme input[type="submit"].gform_button,
.contact-form-col .gform_wrapper.gravity-theme button.gform_button {
    width: auto;
    background: var(--dark1) !important;
    color: var(--light1) !important;
    border: none;
    border-radius: 4px;
    padding: 24px 36px;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
}
body #content .contact-heading-row h2 { font-size: 72px !important; line-height: 80px !important; font-weight: 900 !important; }

body #content .contact-heading-row .eyebrow {
    color: #717171 !important;
    margin-top: 16px;
}

/* ============================================================
   HEADER — top widget hide, nav button/text corrections
   ============================================================ */
.top-widget { display: none !important; }
.header-button .btn-bt {
    background: var(--dark1) !important;
    color: var(--light1) !important;
    border: none !important;
    border-radius: 4px;
    padding: 18px 24px;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
}
#site-navigation,
.primary-menu-container,
.primary-menu-container a {
    font-family: "DM Sans", sans-serif !important;
    color: var(--dark1) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}
.primary-menu-container a:hover {
    color: var(--accent1) !important;
}


/* ============================================================
   FOOTER REBUILD 2026-08-20 — logo+NAP col1, 3 link columns
   ============================================================ */
.footer-col-1 .footer-logo { max-width: 219px; margin-bottom: 5px; }
.footer-col-1 .footer-nap { color: var(--dark1); line-height: 24px; font-size: 14px; }
.footer-col-1 .footer-nap a { color: var(--dark1); text-decoration: none; }
.footer-col-1 .footer-directions { text-decoration: underline !important; }
.footer-col-2 .widget-title,
.footer-col-3 .widget-title,
.footer-col-4 .widget-title {
    color: var(--dark1) !important;
    font-weight: 700;
    margin-bottom: 20px;
}

.footer-col-2,
.footer-col-3,
.footer-col-4 {
	padding-top: 40px;
}

.footer-link-list { list-style: none; margin: 0; padding: 0; }
.footer-link-list li { margin-bottom: 10px; }
.footer-link-list li:last-child { margin-bottom: 0px; }
.footer-link-list a { color: var(--dark1); text-decoration: none; }
.footer-link-list a:hover { text-decoration: underline; }

.row.copyright {
	background: transparent;
	padding: 0 0 24px 0;
}
.row.copyright .container {
	border-top: 1px solid var(--light2);
	padding-top: 24px;
}

.row.copyright #copyright-p { color: var(--accent1); display: inline; }
.row.copyright .copyright-links { color: var(--accent1); display: inline; }
.row.copyright .copyright-links a { color: var(--accent1); }

/* === Page: home === 2026-08-20 (patch) === */
body #content .hero-col p { color: var(--light1) !important; }
body #content .stat .display-3 { color: var(--dark1) !important; }

/* Dev Fixes 8/21/26 */
body a.btn-bt {
    font-family: "DM Sans" !important;
    border-radius: 4px !important;
    padding: 24px 36px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    justify-content: center;
    align-items: center;
    font-style: normal;
    font-size: 18px;
    display: flex;
    gap: 10px;
}
body #content .bakery a.btn-bt.border-btn {
    border: 2px solid var(--accent1) !important;
    padding: 28px 56px !important;
    display: inline-block;
    color: var(--dark1);
}
body #content .bakery a.btn-bt.border-btn:hover {
    box-shadow: 0px 24px 48px rgba(0, 0, 0, 0.24);
    border-color: var(--light1) !important;
    background: var(--dark1) !important;
    color: var(--light1);
}
.home-hero .eyebrow {
    letter-spacing: 2px;
    margin-bottom: 12px;
    line-height: 22px;
    font-size: 20px;
}
.home-hero .sbs-buttons {
    margin-top: 24px;
}
.promo-card-link svg {
    height: 20px;
    width: 20px;
}
.promo-card-link svg path {
    stroke: var(--light1) !important;
}
.projects-cta-row a.btn-bt {
    margin: 0 auto;
    width: 200px;
}
h2.spotlight-heading {
    margin-bottom: 16px;
}
.display-2 {
    margin-bottom: 5px;
}
body #content .services-grid-row .promo-card h4 {
    margin-bottom: 10px !important;
}
#WhyChooseUs span.h2-size {
    margin-bottom: -8px;
}
.gform-footer.gform_footer.top_label {
    padding-bottom: 0;
}
body .bakery .gform_wrapper.gravity-theme .gfield textarea {
    font-family: "DM Sans", sans-serif !important;
    height: 142px;
}
span.gfield_required {
    display: none !important;
}
a.btn-bt.white {
    border: 2px solid var(--light1) !important;
}
body #content a.btn-bt.white:hover {
    border: 2px solid var(--light1) !important;
    background: var(--accent1) !important;
    color: var(--light1) !important;
}
a.btn-bt.default {
    border: 2px solid var(--accent1);
}
body #content a.btn-bt.default:hover {
    border: 2px solid var(--light1) !important;
    background: var(--accent1) !important;
}
body #content a.btn-bt.white svg path {
    transition: all 0.3s ease-in-out;
}
body #content a.btn-bt.white:hover svg path {
    transition: all 0.3s ease-in-out;
    stroke: var(--light1) !important;
}
body #content a.btn-bt.white:hover::after {
    filter: brightness(10);
}

@media (max-width: 979px) {
    .logo-strip-row .container {
        max-width: 768px;
    }
}
/* ============================================================
   MOBILE — reviewed against Figma "HOME - Mobile" artboard
   (fileKey yBItBxEWhHiJ1sh6Q3XHxY, node 7430:94) 2026-08-21.
   Values below are pulled directly from Figma node metadata/type
   styles (get_design_context), not eyeballed off a screenshot.
   ============================================================ */

/* BUGFIX: typo in the general reverse-row rule meant it never
   matched — the contact row's mobile stacking order never flipped.
   DOM order is image-col then form-col; comp shows form above image
   on mobile, hence the "reverse" el_class Cody already added. */
@media (max-width: 979px) {
    .wpb_row.reverse .container {
        flex-direction: column-reverse;
        display: flex;
    }
}

@media (max-width: 767px) {

    /* --- Type scale: mobile-specific tokens from Figma
       ("Text Single Uppercase Medium Mobile", "H1 - Mobile",
       "DIsplay 4 Mobile") — desktop sizes are too large on phone --- */
    .eyebrow {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 1.2px;
    }
    .home-hero .eyebrow {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 1.2px;
        margin-bottom: 6px;
    }
    #GratoSpotlight .eyebrow {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 1.2px;
    }
    .display-1 {
        font-size: 44px;
        line-height: 50px;
        letter-spacing: 0;
    }
    .h1-size {
        font-size: 32px;
        line-height: 32px;
    }
    .display-4 {
        font-size: 18px;
        line-height: 20px;
    }
    body #content .promo-card h4 {
        font-size: 18px !important;
        line-height: 20px !important;
    }

    /* --- Hero --- */
    .hero-heading {
        margin-bottom: 8px !important;
    }
    .home-hero .hero-col .wpb_wrapper p:not(.eyebrow) {
        font-size: 14px;
        line-height: 24px;
    }
    .home-hero .sbs-buttons {
        gap: 16px;
    }
    .home-hero .sbs-buttons .btn-bt {
        padding: 18px 12px !important;
        font-size: 16px !important;
        width: 50%;
    }
    /* the wpb_wrapper must be allowed to shrink below its children's
       intrinsic content width, or a flex child with nowrap content
       forces the whole column (and page) wider than the viewport */
    .hero-col .vc_column-inner .wpb_wrapper {
        min-width: 0;
        max-width: 100%;
    }
    /* Comp's mobile hero shows the secondary CTA filled accent1/white text,
       not the outline treatment used everywhere else this button appears —
       scoped to the hero only, matching what the mobile artboard actually shows. */
    .home-hero .sbs-buttons a.btn-bt.default {
        background: var(--accent1) !important;
        border-color: var(--accent1) !important;
        color: var(--light1) !important;
    }

    /* --- Family tradition stats --- */
    .stat-row {
        gap: 57px;
    }

    /* --- Spotlight cards (Grato / Why Choose Us) — comp shows a
       tighter card inset on phone than the desktop 36/36/48/50 --- */
    .spotlight-card {
        padding: 24px 24px 32px 24px;
    }

    /* --- Contact form: comp stacks every field full-width, single
       column — the desktop 2-col grid squeezes fields on phone --- */
    .contact-form-col .gform_wrapper.gravity-theme .gform_fields {
        grid-template-columns: 1fr;
    }
    .contact-form-col .gform_wrapper.gravity-theme #field_1_1 { grid-column: 1; grid-row: 1; margin-top: 0; }
    .contact-form-col .gform_wrapper.gravity-theme #field_1_3 { grid-column: 1; grid-row: 2; margin-top: 0; }
    .contact-form-col .gform_wrapper.gravity-theme #field_1_4 { grid-column: 1; grid-row: 3; margin-top: 0; }
    .contact-form-col .gform_wrapper.gravity-theme #field_1_2 { grid-column: 1; grid-row: 4; margin-top: 0; }
    .contact-form-col .gform_wrapper.gravity-theme #field_1_5 { grid-column: 1; grid-row: 5; margin-top: 0; }
    body #content .contact-heading-row h2 {
        font-size: 28px !important;
        line-height: 38px !important;
    }

    /* --- Logo strip slick arrows: -50px offset pushes them fully
       off-canvas on a phone viewport (comp shows them flush to the
       content edge, not outside it) --- */
    .logo-strip-slick .slick-prev {
        left: 0;
    }
    .logo-strip-slick .slick-next {
        right: 0;
    }

    /* --- Header: comp shows the logo scaled down (67px tall vs the
       114px desktop height). The theme already swaps in a separate
       .display-small-desktop logo image on mobile, but both images
       inherit the same page-level `.logo a img{height:114px}` inline
       rule — this overrides it for the mobile-only image specifically. */
    .logo a.display-small-desktop img {
        max-height: 67px !important;
        height: 67px !important;
        width: auto !important;
    }
}

/* === Mobile pass 2 (2026-08-21) — fixes to the mobile pass above,
   verified against computed styles + overflow audit, not eyeballed === */
@media (max-width: 767px) {

    /* Hero text is centered on the mobile comp, not left-aligned like desktop */
    .home-hero .hero-col .wpb_wrapper {
        text-align: center;
    }
    .home-hero .sbs-buttons {
        justify-content: center;
    }

    /* Generic h2 was still rendering at the desktop 36px/46 size with no
       mobile override anywhere — comp's mobile heading token is 24px/34
       (Headings/H3) across Products & Services / Featured Projects /
       Our Reviews / Featured Brands / family-tradition heading. */
    body #content h2 {
        font-size: 24px !important;
        line-height: 34px !important;
    }
    /* Spotlight sub-line ("Why should you" / "Premium European Hardwood") */
    .h2-size {
        font-size: 24px;
        line-height: 26px;
    }
    /* Spotlight big word ("choose us?" / "Grato") — same mobile size as
       display-1, not the desktop 72px/80 */
    .display-2 {
        font-size: 44px;
        line-height: 50px;
    }

    /* Copyright text was rendering at the global 18px body size — comp
       shows this specific line at 14px, and at 18px the two inline spans
       (Copyright text + Privacy/Accessibility links) leave near-zero
       margin before wrapping awkwardly at the container edge. */
    .row.copyright #copyright-p,
    .row.copyright .copyright-links {
        font-size: 14px;
        line-height: 24px;
    }

    /* Slick's -30px bleed margin (used to peek adjacent slides at
       slidesToShow > 1) has no purpose now that mobile shows 1 slide —
       left unfixed it pushes the whole page 15px wider than the viewport. */
    .logo-strip-slick .slick-list {
        margin: 0;
    }

    /* Family-tradition text block: comp (Figma node 7431:1974/1975/
       7432:1989) shows heading, paragraph, stats, and the Our Story
       button all centered on mobile, not left-aligned like desktop. */
    .family-tradition-col {
        text-align: center;
    }
    .family-tradition-col .stat-row {
        justify-content: center;
    }
    .family-tradition-col a.btn-bt {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        text-align: center;
    }

    /* Contact submit button was inheriting the desktop 24/36 padding +
       18px font — comp's mobile button scale here is 18/24 + 16px,
       same as the hero buttons. */
    .contact-form-col .gform_wrapper.gravity-theme input[type="submit"].gform_button,
    .contact-form-col .gform_wrapper.gravity-theme button.gform_button {
        padding: 18px 24px !important;
        font-size: 16px !important;
    }

    /* Same padding-too-big issue on the spotlight-card buttons (Explore
       Grato / Get an Estimate) and the Featured-Projects "Our Work"
       outline button — comp's mobile scale for these is 18/24 + 16px,
       not the desktop 24/36 (white) or 28/56 (border-btn) values. */
    .spotlight-card a.btn-bt.white {
        padding: 18px 24px !important;
        font-size: 16px !important;
    }
    body #content .bakery .projects-cta-row a.btn-bt.border-btn {
        padding: 18px 24px !important;
        font-size: 16px !important;
    }
    /* "Our Story" is the one deliberate exception in the comp — it keeps
       the bigger desktop-scale padding even on mobile, it just also goes
       full-width (see the width:100% rule above). Explicit even though it
       matches the un-overridden desktop value, so it's not accidentally
       caught by a future generic .border-btn mobile rule. */
    body #content .bakery .family-tradition-col a.btn-bt.border-btn {
        padding: 24px 36px !important;
        font-size: 18px !important;
    }

    /* Grato spotlight card text is centered on mobile per the Figma node
       (explicit text-center on the eyebrow/heading/paragraph) — the other
       spotlight instance, Why Choose Us, uses absolute-positioned
       left-aligned text in the comp, so this is scoped to Grato only. */
    #GratoSpotlight .spotlight-card {
        text-align: center;
    }
    #GratoSpotlight .spotlight-card a.btn-bt {
        margin-left: auto;
        margin-right: auto;
    }

    /* Double-padding adjacency (see conventions doc) — every section
       boundary on this page currently stacks the outgoing section's
       bottom padding with the next section's top padding (measured
       60-80px combined), where the Figma mobile frames sit edge-to-edge
       with zero gap between them. Zero out bottom padding everywhere
       except the last content section (contact), which still needs its
       own breathing room before the footer. */
    .bakery section.home-hero,
    .bakery section.fifty-section.family-tradition-section,
    .bakery section.reviews-section,
    .bakery section.logo-strip-section {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 979px) {
    .gallery-grid {
        flex-direction: column;
        flex-wrap: wrap;
        display: flex;
        gap: 24px;
    }
    .gallery-grid .gallery-tile {
        width: 100%;
    }
    .copyright-text.centered {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .promo-card-content {
        text-align: center;
        padding: 20px;
    }
    body #content .promo-card-content p {
        line-height: 24px;
        font-size: 14px;
    }
    .promo-stack .promo-card {
        min-height: 200px;
    }
    .bakery .promo-card.promo-card-tall {
        min-height: 358px;
    }
    .bakery section.spotlight-section {
        padding: 60px 0 !important;
    }
    body #content .spotlight-card p,
    body #content .spotlight-card li {
        line-height: 24px;
        font-size: 14px;
    }
    .bakery .spotlight-card {
        padding: 17px 22px;
    }
    h2.spotlight-heading {
        margin-bottom: 7px;
    }
    #GratoSpotlight .eyebrow {
        line-height: 16px !important;
        font-size: 12px !important;
    }
    .bakery .promo-grid-row.projects-grid-row .wpb_raw_html.mb0-desktop {
        margin-bottom: 24px !important;
    }
    .spotlight-card a.btn-bt {
        margin-top: 0px;
    }
    #WhyChooseUs span.h2-size {
        margin-bottom: -4px;
    }
    .spotlight-list {
        padding-left: 20px !important;
        margin: 10px 0 18px 0;
    }
    .contact-form-col .gform_wrapper.gravity-theme .ginput_container input[type="text"],
    .contact-form-col .gform_wrapper.gravity-theme .ginput_container input[type="email"],
    .contact-form-col .gform_wrapper.gravity-theme .ginput_container input[type="tel"],
    .contact-form-col .gform_wrapper.gravity-theme .ginput_container select {
        background: var(--light2) !important;
        padding: 0 22px !important;
        height: 60px;
    }
    .contact-form-col .gform_wrapper.gravity-theme .ginput_container textarea {
        background: var(--light2) !important;
    }
    label.gfield_label.gform-field-label {
        margin-bottom: 4px !important;
        margin-top: 14px;
    }
    footer .container {
        flex-direction: column;
        display: flex;
    }
    .footer-col-1 .footer-nap {
        color: var(--dark1);
        text-align: center;
        line-height: 30px;
        font-size: 18px;
    }
    .footer-col-1 .textwidget {
        text-align: center;
    }
    .footer-col-1 {
        margin-bottom: 14px !important;
        padding: 0 !important;
    }
    .footer-col-2,
    .footer-col-3,
    .footer-col-4 {
        margin: 0 auto 24px auto;
        float: unset !important;
        padding: 0 !important;
        display: inline-block;
        max-width: 270px;
    }
    .footer-col-4 {
        margin-bottom: 0 !important;
    }
    .footer-col-2 .widget-title,
    .footer-col-3 .widget-title,
    .footer-col-4 .widget-title {
        margin-bottom: 24px !important;
    }
    .widget h2.widget-title {
        font-size: 20px !important;
        line-height: 1 !important;
    }
    footer .row .widget li {
        margin-bottom: 20px !important;
    }
    footer .row .widget li:last-child {
        margin-bottom: 0 !important;
    }
    footer .row .widget li,
    footer .row .widget li a {
        font-size: 18px;
        line-height: 1;
    }
}
/* ============================================================
   13. PAGE HERO — SPLIT (level2/hero) & COMPACT (level3/hero)
   Added for subpage build 2026-08-24. White bg, no image needed
   on Design Tab — these are plain content sections, not bg-image
   heroes like #1/#2 above.
   - .page-hero-split: top-level nav pages (About Us, Flooring hub,
     Grato, Hunter Douglas hub, Services, Our Work) — heading +
     paragraph + CTA button left, image placeholder/photo right.
   - .page-hero-compact: level-2 subpages (Hardwood, Carpet, Blinds,
     Shades, Shutters, Laminate & Luxury Vinyl, Flooring Installation,
     Window Covering Installation, Custom Area Rugs, FAQ) — centered
     heading + paragraph only, no image, no button.
   ============================================================ */

section.page-hero-split,
section.page-hero-compact {
    background: var(--light1);
    padding: 100px 0;
}
.page-hero-split .hero-text-col h1 {
    color: var(--dark1);
}
.page-hero-split .hero-text-col .btn-bt {
    margin-top: 24px;
}
.page-hero-split .hero-image-col {
    justify-content: center;
    align-items: center;
    display: flex;
}
.page-hero-split .hero-image-col img,
.page-hero-split .hero-image-placeholder {
    border-radius: 12px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-hero-split .hero-image-placeholder {
    background: var(--light3);
    min-height: 460px;
    display: block;
}
.page-hero-compact {
    text-align: center;
}
.page-hero-compact h1 {
    color: var(--dark1);
    margin-bottom: 16px;
}
.page-hero-compact p {
    color: var(--uihover, #717171);
    max-width: 574px;
    margin: 0 auto;
}

@media (max-width: 979px) {
    section.page-hero-split,
    section.page-hero-compact {
        padding: 40px 0;
    }
    .page-hero-split .hero-text-col {
        text-align: center;
        margin-bottom: 24px;
    }
    .page-hero-split .hero-text-col p {
        color: #717171;
    }
    .page-hero-split .hero-text-col .btn-bt {
        margin-left: auto;
        margin-right: auto;
    }
    .page-hero-split .hero-image-placeholder {
        min-height: 382px;
    }
}

/* Filled steel-blue primary button — Figma "Master Primary Button",
   distinct from the existing outline .btn-bt.default */
.bakery a.btn-bt.primary {
    background: var(--accent1);
    border: none !important;
    color: var(--light1) !important;
    display: inline-flex;
}
.bakery a.btn-bt.primary:hover {
    background: var(--dark1);
}
.bakery a.btn-bt.primary svg path {
    stroke: var(--light1) !important;
}

/* ============================================================
   14. ACCORDION (FAQ page)
   ============================================================ */

.faq-section .faq-col { max-width: 1012px; margin: 0 auto; float: none; }
.faq-item {
    background: var(--light3);
    border-radius: 24px;
    padding: 38px 50px;
    margin-bottom: 24px !important;
    transition: background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out;
}
.faq-item.open {
    background: var(--light2);
    border-radius: 30px;
}
.faq-question {
    font-family: "Playfair Display", serif;
    justify-content: space-between;
    color: var(--dark1);
    align-items: center;
    font-weight: 600;
    line-height: 28px;
    font-size: 22px;
    display: flex;
    cursor: pointer;
    margin: 0;
    gap: 24px;
}
.faq-question .faq-icon {
    background: var(--light2);
    border-radius: 50%;
    color: var(--dark1);
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-size: 24px;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-shrink: 0;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.faq-item.open .faq-question .faq-icon {
    background: var(--dark1);
    color: var(--light1);
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-in-out;
}
.faq-item.open .faq-answer {
    max-height: 400px;
}
.faq-answer p {
    font-family: "DM Sans", sans-serif;
    padding-top: 16px;
    line-height: 30px;
    color: var(--uihover, #717171);
    font-size: 18px;
    margin: 0;
}

@media (max-width: 979px) {
    .faq-item { padding: 24px 28px; border-radius: 30px; }
    .faq-item.open { border-radius: 30px; }
    .faq-question { font-size: 18px; line-height: 24px; gap: 16px; }
    .faq-question .faq-icon { width: 32px; height: 32px; font-size: 18px; }
    .faq-answer p { font-size: 16px; line-height: 28px; }
}

/* ============================================================
   15. GENERIC IMAGE PLACEHOLDER
   Reusable wherever a subpage needs a photo but no real client
   asset exists yet. This is a REAL uploaded WP image (media id
   2810, /wp-content/uploads/2026/08/placeholder-image-slot.png) —
   not a CSS background box — so it's a normal, clickable,
   directly-replaceable <img> in WPBakery/Media Library, and it
   visually reads as an obvious "photo goes here" slot (same
   mountain-icon convention Figma itself uses for placeholders).
   Usage: <img class="img-placeholder" src="/wp-content/uploads/2026/08/placeholder-image-slot.png" alt="Add photo here" />
   ============================================================ */

img.img-placeholder {
    border-radius: 12px;
    display: block;
    width: 100%;
    height: auto;
}
.hero-image-col img.img-placeholder,
.fifty-section .img-col img.img-placeholder {
    height: 100%;
    object-fit: cover;
    min-height: 320px;
}

/* ============================================================
   16. CTA BAR 1 (Figma "cta-bar1"/"mobile/cta-bar1", id 117:2725)
   Compact full-bleed navy banner — heading + small caption left,
   button right (desktop); stacked centered (mobile). Used as the
   standard closing/mid-page CTA on subpages instead of a full
   white contact-section, so pages don't run white-on-white.
   ============================================================ */

section.cta-bar1 {
    background: var(--dark1);
    padding: 43px 0;
}
.cta-bar1-row .container {
    justify-content: space-between;
    align-items: center;
    display: flex;
    gap: 24px;
}
.cta-bar1-row .wpb_column { width: auto; }
body #content .cta-bar1-row h2 {
    font-family: "Playfair Display", serif;
    font-weight: 900;
    color: var(--light1) !important;
    font-size: 44px;
    line-height: 50px;
    margin: 0;
}
body #content .bakery .cta-bar1-row .cta-bar1-caption {
    font-family: "DM Sans", sans-serif;
    color: var(--light1) !important;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin: 8px 0 0 0;
}
.cta-bar1-row .btn-bt {
    background: var(--light1) !important;
    color: var(--dark1) !important;
    border: none !important;
    flex-shrink: 0;
}
.cta-bar1-row .btn-bt:hover {
    background: var(--light2) !important;
}
.cta-bar1-row .btn-bt svg path {
    stroke: var(--dark1) !important;
}

@media (max-width: 979px) {
    section.cta-bar1 { padding: 32px 0; text-align: center; }
    .cta-bar1-row .container {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .cta-bar1-row .wpb_column { width: 100%; }
    .cta-bar1-row h2 { font-size: 32px; line-height: 40px; }
    .cta-bar1-row .cta-bar1-caption { margin-top: 4px; }
    .cta-bar1-row .btn-bt { width: 100%; margin-top: 8px; }
}

/* ============================================================
   17. STATS ROW SECTION (Figma "Stats V5", id 15:2532)
   Heading + up to 4 stat items: icon, big Playfair number with a
   lighter-weight suffix (%, +, M), title below.
   ============================================================ */

.stats-row-grid {
    justify-content: center;
    flex-wrap: wrap;
    display: flex;
    gap: 48px;
    margin-top: 48px;
}
.stats-row-grid .stat-item {
    text-align: center;
    width: 240px;
}
/* Base icon-circle utility — standalone, not dependent on the
   .stats-row-grid ancestor, so it also works dropped in on its
   own (e.g. Contact page's 3-icon NAP row). */
.stat-icon {
    background: var(--light3);
    border-radius: 20px;
    width: 72px;
    height: 72px;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    line-height: 1;
    display: flex;
    margin: 0 auto 16px auto;
    color: var(--dark1);
}
.stats-row-grid .stat-number {
    font-family: "Playfair Display", serif;
    font-weight: 900;
    color: var(--dark1);
    font-size: 44px;
    line-height: 50px;
    display: block;
}
.stats-row-grid .stat-number .stat-suffix {
    color: var(--dark1);
}
.stats-row-grid .stat-title {
    font-family: "Playfair Display", serif;
    font-weight: 600;
    color: var(--dark1);
    font-size: 24px;
    line-height: 34px;
    display: block;
}

@media (max-width: 979px) {
    .stats-row-grid { gap: 32px; margin-top: 32px; }
    .stats-row-grid .stat-item { width: 45%; }
}

/* ============================================================
   18. TEAM MEMBERS SECTION (Figma "Team Members V5", id 127:1958)
   Heading + intro, 3-col cards (photo + name + bio), centered.
   ============================================================ */

.team-members-grid {
    justify-content: center;
    flex-wrap: wrap;
    display: flex;
    gap: 32px;
    margin-top: 48px;
}
.team-members-grid .team-member {
    text-align: center;
    width: 320px;
}
.team-members-grid .team-member img {
    border-radius: 20px;
    width: 100%;
    aspect-ratio: 388 / 462;
    object-fit: cover;
    display: block;
    margin-bottom: 24px;
}
.team-members-grid .team-member h3 {
    font-family: "Playfair Display", serif;
    font-weight: 600;
    color: var(--dark1);
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 8px;
}
.team-members-grid .team-member p {
    color: #717171;
    font-size: 16px;
    line-height: 26px;
    margin: 0;
}

@media (max-width: 979px) {
    .team-members-grid { gap: 32px; margin-top: 32px; }
    .team-members-grid .team-member { width: 100%; max-width: 382px; }
}

/* ============================================================
   19. MISC FIXES — background-tint utility + CTA button spacing
   ============================================================ */

.tint-section { background: var(--light3); }

.contact-heading-row .btn-bt,
.top-blurb .btn-bt {
    margin-top: 24px;
}

/* Icon boxes need contrast against a tint-section's own light3 bg —
   light1 (white) was too close to light3, bump to light2 for the
   stat-icon circle. Team photos keep a white card (still enough
   edge contrast since they're photos, not another block of flat
   color) but add a border to make the edge visible. */
.tint-section .stat-icon {
    background: var(--light2);
}
.tint-section .team-member img.img-placeholder {
    background: var(--light1);
    border: 1px solid var(--light2);
}

/* ============================================================
   20. GRATO PARALLAX + GALLERY TRIO — reusable fixed-bg banner
   section and a 3-tile gallery variant (subset of the 4-tile
   gallery-grid pattern) for pages with only 3 project photos
   ============================================================ */
.bakery section.add-parallax {
    background-image: url('/wp-content/uploads/2026/08/placeholder-image-slot-v2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.add-parallax .parallax-caption {
    background: rgba(15, 27, 43, .72);
    color: var(--light1);
    padding: 32px 48px;
    border-radius: 12px;
    text-align: center;
    max-width: 560px;
}
body #content .bakery .add-parallax .parallax-caption h2,
body #content .bakery .add-parallax .parallax-caption p { color: var(--light1) !important; }
@media (max-width: 979px) {
    /* background-attachment:fixed is unreliable on iOS Safari — fall back to scroll */
    .bakery section.add-parallax { background-attachment: scroll; min-height: 320px; }
    .add-parallax .parallax-caption { padding: 24px 28px; max-width: 90%; }
}

.gallery-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}
.gallery-trio .gallery-tile { aspect-ratio: 1 / 1; }
.gallery-trio .gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 979px) {
    .gallery-trio { grid-template-columns: 1fr; }
}

/* ============================================================
   21. OUR WORK — 6-tile gallery variant
   ============================================================ */
.gallery-six {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 280px);
    gap: 20px;
    margin-top: 32px;
}
.gallery-six .gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 979px) {
    .gallery-six { grid-template-columns: 1fr; grid-template-rows: repeat(6, 240px); }
}

.bakery section.our-work-parallax {
    background-image: url('/wp-content/uploads/2026/08/mid-parallax-bg.jpg');
}