/*
* 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 */

/*header#header {
	display: none !important;
    color: var(--);
}*/

/* 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);
}

/* ============================================================
   SITEWIDE — MASCOT GRAPHICS (added 2026-08-25, internal QA batch)
   Reusable positioning classes for the mini-gator supporting
   graphics. Actual <img> placement lives in each page's own
   content — these just size/position whichever mascot appears.
   ============================================================ */
.mascot { display: block; height: auto; }

/* Hero wordmark art (Home hero swap — logo in place of the old photo) */
.hero-logo {
    display: block;
    max-width: 300px;
    width: 100%;
    margin: 0 auto 24px;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
}

/* Thumbs-up — "you're all set" cue above a bottom-CTA heading */
.mascot-thumbs-up {
    max-width: 110px;
    width: 100%;
    margin: 0 auto 16px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}

/* Peeking — bleeds over the top edge of the card it's anchored to */
.mascot-peeking {
    position: absolute;
    top: -90px;
    left: 18px;
    width: 120px;
    z-index: 6;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
}
@media (max-width: 767px) {
    .mascot-peeking { display: none; }
}

/* Pressure-washer — supporting visual beside service copy */
.mascot-pressure-washer {
    float: right;
    max-width: 200px;
    width: 40%;
    margin: 8px 0 16px 20px;
}
@media (max-width: 767px) {
    .mascot-pressure-washer {
        float: none;
        max-width: 160px;
        width: 100%;
        margin: 0 auto 20px;
    }
}

/* Pressure-washer — centered heading-topper variant (vs. the floated
   in-copy variant above) for use above a section heading */
.mascot-pressure-washer-heading {
    max-width: 140px;
    width: 100%;
    margin: 0 auto 16px;
}

/* Standing pose — larger decorative mascot */
.mascot-standing {
    max-width: 190px;
    width: 100%;
    margin: 0 auto 20px;
}

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

/* HERO SECTION — brand gradient + logo art (internal QA edit, 2026-08-25;
   was a photo bg, client asked to swap in the rectangular logo instead) */
.bakery .home-hero {
    position: relative;
    background-image: linear-gradient(135deg, #7a2f0c 0%, #D9531E 45%, #F0A73A 100%);
}
@media (min-width: 980px) {
    .bakery .home-hero {
        min-height: 620px;
    }
}
body #content .home-hero h1 {
    color: var(--white) !important;
    text-align: center !important;
}
body #content .home-hero .hero-subhead {
    color: var(--white) !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}
body #content .home-hero p:not(.hero-subhead) {
    color: var(--white) !important;
    text-align: center !important;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.bakery .home-hero .btn-bt {
    display: inline-block;
    margin-top: 12px;
}

/* TRUST BAR — floating gradient card overlapping the hero, not a flat band */
.bakery section#TrustBar {
    background: transparent !important;
    padding: 0 !important;
    margin-top: -85px;
    position: relative;
    z-index: 5;
}
.bakery .trust-bar-row {
    align-items: stretch;
    background-image: linear-gradient(115deg, #7a2f0c 0%, #D9531E 55%, #e8964f 100%);
    border-radius: 40px;
    padding: 20px 5% !important;
    box-shadow: 0 24px 44px rgba(29,26,22,0.35);
    margin: 0 !important;
}
.bakery .trust-bar-col {
    padding: 8px 28px !important;
    position: relative;
}
.bakery .trust-bar-col:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: rgba(255,255,255,0.35);
}
.bakery .trust-item { text-align: center; }
.bakery .trust-item i {
    display: block;
    font-size: 36px;
    margin-bottom: 12px;
}
body #content .trust-item i,
body #content .trust-item h4,
body #content .trust-item p {
    color: var(--white) !important;
}
body #content .trust-item h4 {
    text-align: center !important;
    font-size: 30px !important;
    margin-bottom: 2px !important;
    margin-top: 10px;
}
body #content .trust-item p {
    text-align: center !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    margin-bottom: 0 !important;
}

/* SERVICES TEASER background */
.bakery section#ServicesTeaser {
    background-image: linear-gradient(180deg, var(--light2), var(--light3)) !important;
}

/* SERVICES TEASER — equal height card cascade */
.bakery .services-teaser-row { align-items: stretch; }
.bakery .services-teaser-col { display: flex; padding: 0 8px 16px !important; }
.bakery .services-teaser-col > .vc_column-inner { width: 100%; height: 100%; display: flex; flex-direction: column; }
.bakery .services-teaser-col > .vc_column-inner > .wpb_wrapper { flex: 1; display: flex; flex-direction: column; }
.bakery .service-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: 16px;
    padding: 40px 28px 32px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    border-top: 5px solid var(--accent1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bakery .service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}
.bakery .service-card.featured-card {
    border-top-color: var(--accent3);
    background-image: linear-gradient(160deg, #262119, var(--dark1));
}
.bakery .service-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-image: radial-gradient(circle at 30% 30%, #ea7c46, var(--accent1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}
.bakery .featured-card .service-icon { background-image: radial-gradient(circle at 30% 30%, #f5c46e, var(--accent3)); }
.bakery .service-icon i { font-size: 26px; }
body #content .service-icon i { color: var(--white) !important; }
body #content .service-card h3 {
    text-align: center !important;
}
body #content .featured-card h3,
body #content .featured-card p:not(.service-price) {
    color: var(--white) !important;
}
body #content .service-card .service-price {
    text-align: center !important;
    color: var(--accent1) !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}
body #content .featured-card .service-price {
    color: var(--accent3) !important;
}
.bakery .service-card p:not(.service-price) { flex: 1; text-align: center; }
.bakery .service-card .btn-bt { align-self: center; margin-top: 14px; }

/* HOME TRUST BLOCK — asymmetric photo + text row */
.bakery .home-trust { padding-top: 80px !important; }
.bakery .home-trust-img-col .img-col img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}
.bakery .home-trust-text-col { padding-left: 24px !important; }
body #content .home-trust-text-col h2 {
    text-align: left !important;
}
.bakery .trust-checklist {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}
.bakery .trust-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 18px;
}
.bakery .trust-checklist i {
    color: var(--accent2);
    font-size: 20px;
    margin-top: 3px;
    flex-shrink: 0;
}
body #content .trust-quote {
    text-align: left !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--accent1) !important;
    margin-top: 20px !important;
}

/* HOME GALLERY TEASER background */
.bakery section#HomeGallery {
    background-image: linear-gradient(180deg, var(--light3), var(--light2)) !important;
}
.bakery .home-gallery-row { margin: 0 -8px; }
.bakery .home-gallery-col { padding: 0 8px 16px !important; }
.bakery .img-col p { line-height: 0; }
.bakery .gallery-photo {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    display: block;
}
.bakery .gallery-photo img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.bakery .gallery-photo:hover img {
    transform: scale(1.05);
}
.bakery .gallery-label {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(29,26,22,0.78);
    border-radius: 50px;
    padding: 6px 16px;
}
body #content .gallery-label {
    color: var(--white) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}
.bakery .home-gallery-cta-row {
    margin-top: 24px !important;
}

/* BOTTOM CTA — real photo background */
.bakery .bottom-cta {
    background-image: linear-gradient(120deg, rgba(63,125,66,0.92) 0%, rgba(63,125,66,0.75) 100%), url('/wp-content/uploads/2026/08/hero/dg-IMG_5705-hero-candidate.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 980px) {
    .bakery .bottom-cta { min-height: 560px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
    .bakery .home-hero {
        padding-bottom: 60px !important;
    }
}
@media (max-width: 979px) {
    .bakery .services-teaser-col,
    .bakery .home-gallery-col {
        padding: 0 0 16px !important;
    }
    .bakery section#TrustBar {
        margin-top: -36px;
    }
    .bakery .trust-bar-row {
        padding: 28px 16px !important;
        border-radius: 16px;
    }
    .bakery .trust-bar-col {
        padding: 16px 12px !important;
    }
    .bakery .trust-bar-col:not(:last-child)::after {
        display: none;
    }
    .bakery .home-trust-text-col {
        padding-left: 0 !important;
    }
    body #content .home-trust-text-col h2,
    body #content .trust-quote {
        text-align: center !important;
    }
    .bakery .trust-checklist li {
        text-align: left;
    }
}


/* === Page: global-fixes === 2026-08-17 === */
/* ============================================================
   GLOBAL FIX: Alternate button contrast
   ============================================================ */
body #content a.btn-bt.alternate,
body #content a.btn-bt.alternate:hover {
    color: var(--white) !important;
}

/* ============================================================
   GLOBAL: Button gradients
   ============================================================ */
.bakery a.btn-bt.default {
    background-image: linear-gradient(135deg, #ea7c46, var(--accent1)) !important;
}
.bakery a.btn-bt.default:hover {
    background-image: linear-gradient(135deg, var(--accent1), #b8451c) !important;
}
.bakery a.btn-bt.alternate {
    background-image: linear-gradient(135deg, #4d9950, var(--accent2)) !important;
}
.bakery a.btn-bt.alternate:hover {
    background-image: linear-gradient(135deg, var(--accent2), #2c5c2e) !important;
}

/* ============================================================
   GLOBAL: vertical-align utility
   ============================================================ */
@media (min-width: 980px) {
    .vertical-align {
        align-items: center;
        display: flex;
    }
    .bakery section.vertical-align > .vc_row {
        width: 100%;
    }
}

/* ============================================================
   GLOBAL: top widget link/icon color
   ============================================================ */
.top-widget p,
.top-widget p a,
.top-widget p a:hover,
ul.social.top-widget-socials li a i {
    color: var(--white) !important;
}

/* ============================================================
   GLOBAL: Footer
   ============================================================ */
footer#footer {
    background-image: linear-gradient(160deg, var(--dark2), var(--dark1));
}
footer#footer .footer-col-1,
footer#footer .footer-col-2,
footer#footer .footer-col-3,
footer#footer .footer-col-4 {
    padding: 40px 24px;
}
footer#footer .footer-col-1 { padding-left: 0; }
footer#footer .footer-col-4 { padding-right: 0; }
footer#footer h2.widget-title,
footer#footer p,
footer#footer li,
footer#footer a {
    color: var(--white) !important;
}
footer#footer a:hover {
    color: var(--accent3) !important;
}
footer#footer h2.widget-title {
    font-size: 18px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 16px !important;
}
footer#footer ul.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
footer#footer ul.footer-links li {
    margin-bottom: 10px;
}
footer#footer .footer-logo {
    max-width: 220px;
    margin-bottom: 16px;
}
.row.copyright {
    background: var(--dark1);
    border-top: 1px solid rgba(255,255,255,0.12);
}
.row.copyright p,
.row.copyright a {
    color: var(--white) !important;
}

/* ============================================================
   GLOBAL: subtle H1 text-shadow sitewide (theme option is 0px/none
   by default).
   ============================================================ */
body #content h1 {
    text-shadow: 0 4px 18px rgba(0,0,0,0.35) !important;
}

/* ============================================================
   GLOBAL: Subpage hero — shared base for every subpage
   ============================================================ */
.bakery .sub-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 980px) {
    .bakery .sub-hero { min-height: 380px; }
}
body #content .sub-hero h1 {
    color: var(--white) !important;
    text-align: center !important;
}

/* Hero H1 responsive scaling — the theme options global h1 size (64px)
   overflows the viewport width on mobile in both the homepage hero and
   every subpage's sub-hero. Not page-specific, so fixed globally. */
@media (max-width: 767px) {
    body #content .home-hero h1,
    body #content .sub-hero h1 {
        font-size: 38px !important;
        line-height: 1.15 !important;
    }
}
@media (max-width: 767px) {
    body #content h2 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }
    body #content h3 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
}
@media (max-width: 480px) {
    body #content .home-hero h1,
    body #content .sub-hero h1 {
        font-size: 30px !important;
    }
    .bakery section.home-hero > .home-hero-row,
    .bakery section.sub-hero > .sub-hero-row {
        padding-left: 6% !important;
        padding-right: 6% !important;
    }
    body #content .home-hero .hero-subhead,
    body #content .home-hero p:not(.hero-subhead) {
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
    body #content .home-hero .hero-subhead {
        font-size: 17px !important;
    }
    body #content .home-hero p:not(.hero-subhead) {
        font-size: 15px !important;
    }
}

/* ============================================================
   GLOBAL: mobile column padding. This theme zeroes WPBakery's
   default column gutters entirely (confirmed in conventions) — for
   multi-column rows I've been adding explicit padding between
   siblings all session, but single full-width (1/1) columns (hero
   text, body paragraphs, etc.) never got ANY horizontal padding,
   so their content runs flush to the viewport edge on mobile. This
   is the real cause of the "text overflow" I chased for a long time
   under home-hero specifically — it's actually a sitewide missing-
   padding issue, not a wrapping bug.
   ============================================================ */
@media (max-width: 767px) {
    body #content .wpb_column[class*="vc_col-sm-"] {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ============================================================
   GLOBAL: reverse utility — column-reverse on mobile only, so an
   inline-fifty row's visual order can differ from its DOM order
   without JS. Documented in conventions as a shell class but not
   actually present in this site's shell CSS (same situation as
   vertical-align above).
   ============================================================ */
@media (max-width: 979px) {
    .bakery .vc_row.reverse {
        flex-direction: column-reverse;
    }
}

/* ============================================================
   GLOBAL: accordion panel-heading hover state — background goes
   accent2 on hover (options-page-stylesheet.php default) but text
   stays dark2, same as the resting state — unreadable on the green
   hover background. Match the active-state white text on hover too.
   ============================================================ */
body #content div.vc_tta-panel-heading:hover h4.vc_tta-panel-title a,
body #content div.vc_tta-panel-heading:hover h4.vc_tta-panel-title a span.vc_tta-title-text,
body #content li.vc_tta-tab:hover a {
    color: var(--white) !important;
}

/* ============================================================
   GLOBAL: secondary "or text us" link under primary CTA buttons —
   brief explicitly calls out "Call or text" as the top visitor
   action; every primary tel: CTA gets this small sms: companion.
   ============================================================ */
.bakery .text-us-link {
    margin-top: 8px !important;
}
body #content .text-us-link a,
body #content .text-us-link a:hover {
    color: var(--white) !important;
    text-decoration: underline !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* === Page: about-us === 2026-08-17 === */
/* ============================================================
   PAGE: About Us
   ============================================================ */

/* SUB-HERO */
.bakery .about-hero {
    background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('/wp-content/uploads/2026/08/hero/dg-IMG_5335-hero-candidate.jpg');
}

/* ABOUT STORY — asymmetric text + photo row */
.bakery .about-story { padding: 80px 0; }
.bakery .about-story-text-col .wpb_text_column { max-width: 560px; }
.bakery .about-story-img-col .img-col img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

/* ABOUT QUOTE — accent2 pull-quote band */
.bakery .about-quote {
    padding: 70px 0;
    background-image: linear-gradient(120deg, rgba(58, 20, 7, 0.88) 0%, rgba(217, 83, 30, 0.72) 60%, rgba(63, 125, 66, 0.5) 100%) !important;
    background: var(--accent1);
}
.bakery .about-quote-col .wpb_text_column { margin: 0 auto; }
body #content .about-quote h2 {
    text-align: center !important;
    font-size: 32px !important;
    margin-bottom: 10px !important;
}
body #content .about-quote p {
    text-align: center !important;
    font-size: 18px !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 979px) {
    .bakery .about-story-img-col .img-col img {
        height: 320px;
    }
}

/* === Page: our-services === 2026-08-17 === */
/* ============================================================
   PAGE: Our Services
   ============================================================ */

/* SUB-HERO */
.bakery .services-hero {
    background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('/wp-content/uploads/2026/08/hero/dg-IMG_5647-hero-candidate.jpg');
}

/* SERVICE TIER ROWS */
.bakery .service-tier { padding: 70px 0; }
.bakery .service-tier-intro-col .wpb_text_column { max-width: 520px; }
.bakery .service-tier-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-image: radial-gradient(circle at 30% 30%, #ea7c46, var(--accent1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.bakery .service-tier-icon.featured {
    background-image: radial-gradient(circle at 30% 30%, #f5c46e, var(--accent3));
}
.bakery .service-tier-icon i { font-size: 28px; }
body #content .service-tier-icon i { color: var(--white) !important; }
body #content .tier-price {
    color: var(--accent1) !important;
    font-weight: 700 !important;
    font-size: 19px !important;
}
body #content .tier-price.featured { color: var(--accent3) !important; }
body #content .tier-closer {
    font-weight: 700 !important;
    color: var(--dark1) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* TIER CARD (checklist side) */
.bakery .tier-card {
    background: var(--white);
    border-radius: 16px;
    padding: 36px 32px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    border-left: 5px solid var(--accent1);
}
.bakery .tier-card.featured-card {
    border-left-color: var(--accent3);
    background-image: linear-gradient(160deg, #262119, var(--dark1));
}
body #content .tier-card.featured-card h3,
body #content .tier-card.featured-card h4,
body #content .tier-card.featured-card li,
body #content .tier-card.featured-card p {
    color: var(--white) !important;
}
.bakery .tier-checklist {
    list-style: none !important;
    padding: 0 !important;
    margin: 16px 0;
}
.bakery .tier-checklist li {
    background: var(--light2);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
}
.bakery .tier-checklist li:last-child { margin-bottom: 0; }
.bakery .tier-card.featured-card .tier-checklist li {
    background: rgba(255,255,255,0.07);
}
.bakery .tier-check-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bakery .tier-check-desc {
    display: block;
    margin-left: 26px;
    margin-top: 4px;
    font-size: 14px;
    opacity: 0.85;
}
.bakery .tier-checklist i {
    color: var(--accent2);
    font-size: 16px;
    flex-shrink: 0;
}
.bakery .tier-card.featured-card .tier-checklist i {
    color: var(--accent3);
}
body #content .tier-time {
    font-weight: 700 !important;
    margin-top: 14px !important;
}
body #content .tier-note {
    font-size: 14px !important;
    font-style: italic;
    opacity: 0.8;
}
body #content .tier-result {
    font-weight: 700 !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 979px) {
    .bakery .service-tier { padding: 40px 0; }
}

/* === Page: gallery === 2026-08-17 === */
/* ============================================================
   PAGE: Gallery
   ============================================================ */

/* SUB-HERO */
.bakery .gallery-hero {
    background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('/wp-content/uploads/2026/08/hero/dg-IMG_5705-hero-candidate.jpg');
}

/* INTRO BLURB */
.bakery .gallery-intro { padding: 60px 0 20px; }
.bakery .gallery-intro-col .wpb_text_column {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

/* GROUP SECTIONS */
.bakery .gallery-group { padding: 60px 0; }

/* GRID */
/* .gallery-grid is the outer .wpb_text_column — WPBakery nests the
   actual rendered content one level deeper inside .wpb_wrapper, which
   is the real direct parent of the .gallery-photo divs. Flex has to
   go there, not on .gallery-grid itself. */
body #content .gallery-grid > .wpb_wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px;
}
.bakery .gallery-photo {
    border-radius: 16px;
    overflow: hidden;
    display: block;
    flex: 0 0 calc(25% - 12px);
}
.bakery .gallery-photo img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.bakery .gallery-photo:hover img {
    transform: scale(1.06);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 979px) {
    .bakery .gallery-photo {
        flex-basis: calc(50% - 8px);
    }
    .bakery .gallery-group { padding: 36px 0; }
}
@media (max-width: 480px) {
    .bakery .gallery-photo {
        flex-basis: 100%;
    }
}

/* === Page: faq === 2026-08-17 === */
/* ============================================================
   PAGE: FAQ
   ============================================================ */

/* SUB-HERO */
.bakery .faq-hero {
    background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('/wp-content/uploads/2026/08/gallery/dg-IMG_5561.jpg');
}

/* INTRO */
.bakery .faq-intro { padding: 60px 0 20px; }
.bakery .faq-intro-col .wpb_text_column {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
body #content .faq-callout {
    margin-bottom: 30px !important;
    font-weight: 700 !important;
    color: var(--accent1) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 20px !important;
}

/* ACCORDION SECTION */
.bakery .faq-accordion-section { padding: 60px 0; }
.bakery .faq-accordion-col .wpb_text_column,
.bakery .faq-accordion-col { max-width: 860px; margin: 0 auto; }

/* Accordion panels don't ship an explicit border-color of their own,
   so the border falls back to CSS's default (currentColor) and picks
   up whatever `color` is inherited on body — which WP core's global-
   styles stylesheet sets to a pink preset var, not a theme color.
   Pin it explicitly so it can never inherit that again. */
body #content .vc_tta-panel-heading,
body #content .vc_tta-panel-body,
body #content .vc_tta-panel-body:before,
body #content .vc_tta-panel-body:after {
    border-color: rgba(29, 26, 22, 0.12) !important;
}



/* === Page: home-2 === 2026-08-17 === */
/* ============================================================
   PAGE: Home 2 — new sections only (hero/trust-bar/service-card/
   gallery/bottom-cta styling is inherited globally from the Home
   page block, since those class/ID selectors aren't page-scoped).
   ============================================================ */

/* HOW IT WORKS */
.bakery .how-it-works { padding: 70px 0; }
.bakery .how-it-works-col { padding: 0 12px 16px !important; }
.bakery .step-card {
    text-align: center;
    background: var(--white);
    border-radius: 16px;
    padding: 40px 28px 32px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    height: 100%;
}
.bakery .step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-image: radial-gradient(circle at 30% 30%, #ea7c46, var(--accent1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-weight: 700;
    font-size: 22px;
}
body #content .step-number { color: var(--white) !important; }
body #content .step-card h3 { text-align: center !important; }
.bakery .step-card p { text-align: center; }

/* MINI FAQ */
.bakery .mini-faq { padding: 70px 0 60px; }
.bakery .mini-faq-col { max-width: 800px; margin: 0 auto; }
.bakery .mini-faq-link-row { margin-top: 20px; }

/* STICKY MOBILE CALL/TEXT BAR — mobile only, fixed to bottom */
.bakery section#StickyMobileBar {
    display: none;
}
@media (max-width: 979px) {
    .bakery section#StickyMobileBar {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        padding: 0 !important;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.2);
    }
    body #content .sticky-mobile-bar-row {
        display: flex !important;
    }
    .bakery .sticky-mobile-col {
        padding: 0 !important;
        flex: 1;
    }
    .bakery .sticky-btn {
        display: block;
        text-align: center;
        padding: 16px 8px;
        font-weight: 700;
        text-decoration: none;
    }
    body #content .sticky-btn { color: var(--white) !important; }
    .bakery .sticky-call { background: var(--accent1); }
    .bakery .sticky-text { background: var(--accent2); }
}

/* Push footer up so the sticky bar never covers it on mobile — scoped
   to this page's body class only (page-id-2714) so it doesn't affect
   pages without the sticky bar. */
@media (max-width: 979px) {
    body.page-id-2714 footer#footer {
        padding-bottom: 56px;
    }
}

/* === Page: home-3 === 2026-08-17 === */
/* ============================================================
   PAGE: Home 3 — maximalist / high-energy creative direction
   ============================================================ */

@keyframes h3-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217,83,30,0.55); }
    50% { box-shadow: 0 0 0 16px rgba(217,83,30,0); }
}
@keyframes h3-blob-float {
    0%, 100% { transform: translate(0,0) rotate(0deg); }
    50% { transform: translate(20px,-20px) rotate(15deg); }
}

/* HERO */
.bakery .h3-hero {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(120deg, #3a1407 0%, #D9531E 45%, #F0A73A 75%, #ffce6b 100%);
    padding: 100px 0;
}
.bakery .h3-hero-col { position: relative; z-index: 2; text-align: center; }
.bakery .h3-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.35;
    animation: h3-blob-float 8s ease-in-out infinite;
    z-index: 1;
}
.bakery .h3-blob-1 { width: 280px; height: 280px; background: var(--accent2); top: -60px; left: -60px; }
.bakery .h3-blob-2 { width: 220px; height: 220px; background: var(--accent3); bottom: -80px; right: -40px; animation-delay: -3s; }
.bakery .h3-blob-3 { width: 320px; height: 320px; background: var(--accent2); top: -100px; left: 50%; margin-left: -160px; opacity: 0.25; }
.bakery .h3-dots {
    position: absolute;
    top: 20px; right: 20px;
    width: 140px; height: 140px;
    background-image: radial-gradient(rgba(255,255,255,0.4) 2px, transparent 2px);
    background-size: 16px 16px;
    z-index: 1;
}
body #content .h3-display {
    color: var(--white) !important;
    font-size: 96px !important;
    line-height: 0.95 !important;
    text-align: center !important;
    text-transform: uppercase;
    margin-bottom: 16px !important;
}
body #content .h3-hero-tagline {
    color: var(--white) !important;
    text-align: center !important;
    font-size: 26px !important;
    font-weight: 700 !important;
}
body #content .h3-hero-body {
    color: var(--white) !important;
    text-align: center !important;
    max-width: 520px;
    margin: 0 auto 24px !important;
}
.bakery .h3-btn-pulse {
    display: inline-block;
    background-image: linear-gradient(135deg, #ea7c46, var(--accent1));
    border-radius: 50px;
    padding: 18px 42px;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    animation: h3-pulse 2s infinite;
}
body #content .h3-btn-pulse { color: var(--white) !important; }

/* STATS STRIP */
.bakery .h3-stats {
    background-image: linear-gradient(100deg, var(--dark1), #2b2318);
    padding: 56px 0;
}
.bakery .h3-stats-col { text-align: center; padding: 12px !important; }
body #content .h3-stat-number {
    font-family: 'BarlowCondensed-Bold', sans-serif !important;
    font-size: 56px !important;
    font-weight: 700 !important;
    color: var(--accent3) !important;
    line-height: 1 !important;
}
body #content .h3-stat-label {
    font-family: 'OpenSans-Regular', sans-serif !important;
    color: var(--white) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px !important;
    margin-top: 8px !important;
}

/* HEADINGS */
body #content .h3-heading { text-align: center !important; }

/* BENTO SERVICES GRID */
.bakery .h3-services { padding: 80px 0; }
.bakery .h3-bento-row { align-items: stretch; flex-wrap: wrap; }
.bakery .h3-bento-col { padding: 8px !important; display: flex; }
.bakery .h3-bento-card {
    background: var(--white);
    border-radius: 24px;
    padding: 36px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    width: 100%;
    transition: transform 0.25s ease;
}
.bakery .h3-bento-card:hover { transform: translateY(-8px) rotate(-1deg); }
.bakery .h3-bento-featured {
    background-image: linear-gradient(160deg, #262119, var(--dark1));
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
body #content .h3-bento-featured h3,
body #content .h3-bento-featured p { color: var(--white) !important; }
.bakery .h3-bento-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    background-image: radial-gradient(circle at 30% 30%, #ea7c46, var(--accent1));
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    transform: rotate(-8deg);
}
.bakery .h3-bento-featured .h3-bento-icon { background-image: radial-gradient(circle at 30% 30%, #f5c46e, var(--accent3)); }
body #content .h3-bento-icon i { color: var(--white) !important; font-size: 24px; }
body #content .h3-bento-price { color: var(--accent1) !important; font-weight: 700 !important; }
.bakery .h3-bento-featured .h3-bento-price { color: var(--accent3) !important; }
.bakery .h3-btn-outline {
    display: inline-block;
    border: 2px solid var(--accent1);
    border-radius: 50px;
    padding: 10px 24px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 12px;
    transition: all 0.2s ease;
}
body #content .h3-btn-outline { color: var(--accent1) !important; }
.bakery .h3-btn-outline:hover { background: var(--accent1); }
body #content .h3-btn-outline:hover { color: var(--white) !important; }

/* TRUST TILT CARDS */
.bakery .h3-trust { padding: 80px 0 40px; }
.bakery .h3-trust-col { padding: 10px !important; }
.bakery .h3-tilt-card {
    background: var(--light2);
    border-radius: 20px;
    padding: 30px 24px;
    text-align: center;
    transition: transform 0.25s ease;
}
.bakery .h3-tilt-card:hover { transform: scale(1.03); }
.bakery .h3-tilt-card i { color: var(--accent2); font-size: 30px; display: block; margin-bottom: 10px; }
.bakery .h3-quote-row { margin-top: 20px; }
body #content .h3-quote {
    text-align: center !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--accent1) !important;
    max-width: 760px;
    margin: 0 auto !important;
}

/* GALLERY */
.bakery .h3-gallery { padding: 70px 0; }
.bakery .h3-gallery-col { padding: 0 10px 16px !important; }
.bakery .h3-photo-tilt { transition: transform 0.25s ease; }
.bakery .h3-photo-tilt:hover { transform: scale(1.04); }

/* BOTTOM CTA */
.bakery .h3-cta {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(120deg, #3a1407 0%, #D9531E 50%, #3F7D42 100%);
    text-align: center;
    padding: 90px 0;
}
body #content .h3-cta-heading {
    color: var(--white) !important;
    text-align: center !important;
    margin-bottom: 24px !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
    body #content .h3-display { font-size: 56px !important; }
    body #content .h3-hero-tagline { font-size: 20px !important; }
    body #content .h3-stat-number { font-size: 40px !important; }
    .bakery .h3-bento-tall { order: -1; }
}

/* Conatct Us - CL */

@media (min-width: 980px) {
	.contact-nap-row .wpb_column:nth-child(1) { padding-right: 2.5%; }
	.contact-nap-row .wpb_column:nth-child(2) { padding-left: 2.5%;  }
	.contact-nap-col {
		position: sticky !important;
		height: 100%;
		top: 60px;
	}
}

.contact-nap-row h2 {
	margin-bottom: 24px !important;
}
.contact-nap-row h5 {
	margin-bottom: 5px !important;
}
body #content .contact-nap-col ul.social li a,
body #content .contact-nap-col ul.social li a i {
	color: var(--accent1) !important;
}
body #content .contact-nap-col ul.social li a:hover,
body #content .contact-nap-col ul.social li a:hover i {
	color: var(--accent2) !important;
}
body #content .contact-nap-col ul.social li a i {
	font-size: 24px;
}

/* Gravity Forms cleanup - CL */

p.gform_required_legend {
    display: none;
}
.gform_wrapper {
    background-image: linear-gradient(135deg, #7a2f0c 0%, #D9531E 45%, #F0A73A 100%);
    border-radius: 24px;
    padding: 24px;
}
.gform_wrapper .gfield label {
	font-family: 'BarlowCondensed-Bold', sans-serif !important;
	color: var(--light1);
}
.gform_wrapper .gfield .ginput_container > * {
    font-family: 'OpenSans-Regular', sans-serif !important;
	transition: all 0.3s ease-in-out;
	border: 2px solid var(--dark1);
	color: var(--black);
	border-radius: 4px;
}
.gform_wrapper .gfield .ginput_container > *:hover,
.gform_wrapper .gfield .ginput_container > *:active,
.gform_wrapper .gfield .ginput_container > *:focus,
.gform_wrapper .gfield .ginput_container > *:focus-within {
    font-family: 'OpenSans-Regular', sans-serif !important;
	transition: all 0.3s ease-in-out;
	border: 2px solid var(--accent2);
	outline: unset !important;
	color: var(--black);
}

.gform-footer button.gform_button {
	transition: all 0.3s ease-in-out;
	background-image: linear-gradient(135deg, #4d9950, var(--accent2)) !important;
	color: var(--light1);
	border-radius: 14px;
	letter-spacing: 0px;
	text-align: center;
    padding: 14px 28px;
	font-size: 16px;
    line-height: 1;
	border: none;
}
.gform-footer button.gform_button:hover {
	background-image: linear-gradient(135deg, var(--accent2), #2c5c2e) !important;
	transition: all 0.3s ease-in-out;
}

/* Home Hero */

@media (min-width: 980px) {
	.bakery #HomeHero {
		padding-bottom: 140px;
	}
}