/* ==========================================================================
   TLC Concrete — Brand + Block Overrides
   Palette: Yellow #F2B705 / Charcoal #2E2E30 / Bone #F4F1EA
   Fonts:   Montserrat (headings) / Inter (body)
   ========================================================================== */

:root {
    --tlc-yellow: #F2B705;
    --tlc-yellow-dark: #d9a504;
    --tlc-charcoal: #2E2E30;
    --tlc-charcoal-soft: #3a3a3c;
    --tlc-bone: #F4F1EA;
    --tlc-bone-dark: #e8e3d6;
    --tlc-white: #ffffff;
}

/* --------------------------------------------------------------------------
   1. Brand fonts — override Kadence defaults
   -------------------------------------------------------------------------- */
body,
.entry-content,
.entry-content p,
.wp-block-paragraph {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: var(--tlc-charcoal);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.entry-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: var(--tlc-charcoal);
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   2. Kill default block spacing so sections sit flush
   -------------------------------------------------------------------------- */
.entry-content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}

/* --------------------------------------------------------------------------
   3. Full-width section helpers
   -------------------------------------------------------------------------- */
.entry-content > .wp-block-group.tlc-hero,
.entry-content > .wp-block-group.tlc-section,
.entry-content > .wp-block-group.tlc-cta,
.entry-content > .wp-block-group.tlc-services,
.entry-content > .wp-block-group.tlc-gallery,
.entry-content > .wp-block-group.tlc-contact,
.entry-content > .wp-block-group.tlc-about {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

/* Override WP layout max-width inside sections (covers both is-layout-flow
   and is-layout-constrained that WP may apply depending on block layout). */
.tlc-hero .is-layout-flow,
.tlc-hero .is-layout-constrained,
.tlc-section .is-layout-flow,
.tlc-section .is-layout-constrained,
.tlc-cta .is-layout-flow,
.tlc-cta .is-layout-constrained,
.tlc-services .is-layout-flow,
.tlc-services .is-layout-constrained,
.tlc-gallery .is-layout-flow,
.tlc-gallery .is-layout-constrained,
.tlc-contact .is-layout-flow,
.tlc-contact .is-layout-constrained,
.tlc-about .is-layout-flow,
.tlc-about .is-layout-constrained,
.tlc-testimonials .is-layout-flow,
.tlc-testimonials .is-layout-constrained,
.tlc-faq .is-layout-flow,
.tlc-faq .is-layout-constrained,
.tlc-inquiry .is-layout-flow,
.tlc-inquiry .is-layout-constrained {
    max-width: none !important;
}

/* Inner containers act as the centered content wrapper */
.tlc-hero > .wp-block-group__inner-container,
.tlc-section > .wp-block-group__inner-container,
.tlc-cta > .wp-block-group__inner-container,
.tlc-services > .wp-block-group__inner-container,
.tlc-gallery > .wp-block-group__inner-container,
.tlc-contact > .wp-block-group__inner-container,
.tlc-about > .wp-block-group__inner-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* --------------------------------------------------------------------------
   4. Buttons — brand style
   -------------------------------------------------------------------------- */
.wp-block-button__link {
    background-color: var(--tlc-yellow) !important;
    color: var(--tlc-charcoal) !important;
    border-radius: 2px !important;
    padding: 16px 32px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    transition: all 0.25s ease !important;
    border: 2px solid var(--tlc-yellow) !important;
    box-shadow: 0 2px 10px rgba(46, 46, 48, 0.08) !important;
}
.wp-block-button__link:hover {
    background-color: var(--tlc-charcoal) !important;
    color: var(--tlc-yellow) !important;
    border-color: var(--tlc-charcoal) !important;
    box-shadow: 0 4px 18px rgba(46, 46, 48, 0.22) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.tlc-btn-ghost .wp-block-button__link {
    background: transparent !important;
    color: var(--tlc-white) !important;
    border: 2px solid var(--tlc-white) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.tlc-btn-ghost .wp-block-button__link:hover {
    background: var(--tlc-yellow) !important;
    color: var(--tlc-charcoal) !important;
    border-color: var(--tlc-yellow) !important;
}

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
.tlc-hero {
    background:
        linear-gradient(135deg, rgba(46,46,48,0.82) 0%, rgba(46,46,48,0.62) 100%),
        image-set(url('../images/pic-11.webp') type('image/webp'), url('../images/pic-11.jpg') type('image/jpeg')) center/cover no-repeat;
    min-height: 88vh;
    display: flex !important;
    align-items: center !important;
    position: relative;
    padding: 120px 0 !important;
}
.tlc-hero > .wp-block-group__inner-container {
    text-align: center;
}
.tlc-hero .wp-block-image {
    display: flex;
    justify-content: center;
    margin-bottom: 28px !important;
}
.tlc-hero .wp-block-image img {
    max-width: 220px;
    height: auto;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.35));
}
.tlc-hero .wp-block-heading,
.tlc-hero h1 {
    color: var(--tlc-white) !important;
    font-size: clamp(36px, 5vw, 62px) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    margin-bottom: 36px !important;
    text-shadow: 0 2px 18px rgba(0,0,0,0.3);
}
.tlc-hero .wp-block-heading em,
.tlc-hero h1 em {
    color: var(--tlc-yellow) !important;
    font-style: normal;
}
.tlc-hero .wp-block-paragraph,
.tlc-hero p {
    color: var(--tlc-bone) !important;
    font-size: clamp(16px, 1.4vw, 20px) !important;
    line-height: 1.6 !important;
    max-width: 680px;
    margin: 0 auto 36px !important;
}
.tlc-hero .wp-block-buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

/* --------------------------------------------------------------------------
   6. ABOUT / INTRO
   -------------------------------------------------------------------------- */
.tlc-about {
    background: var(--tlc-bone);
    padding: 90px 0 !important;
}
.tlc-about .wp-block-columns {
    gap: 48px !important;
    align-items: center;
}
.tlc-about .tlc-eyebrow {
    color: var(--tlc-yellow) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}
.tlc-about h2 {
    font-size: clamp(28px, 3.2vw, 44px) !important;
    line-height: 1.1 !important;
    margin-bottom: 22px !important;
}
.tlc-about p {
    font-size: 17px !important;
    line-height: 1.75 !important;
    color: var(--tlc-charcoal-soft) !important;
    margin-bottom: 16px !important;
}
.tlc-about .tlc-stat-box {
    background: var(--tlc-charcoal);
    padding: 40px 32px;
    border-left: 4px solid var(--tlc-yellow);
}
.tlc-about .tlc-stat-box h3 {
    color: var(--tlc-yellow) !important;
    font-size: 48px !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
}
.tlc-about .tlc-stat-box p {
    color: var(--tlc-bone) !important;
    font-size: 14px !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   7. SERVICES
   -------------------------------------------------------------------------- */
.tlc-services {
    background: #BFBDB7;
    padding: 100px 0 !important;
}
.tlc-services h2 { color: #FFFFFF !important; }
.tlc-services .tlc-section-head p { color: #FFFFFF !important; }
.tlc-services .tlc-section-head {
    text-align: center;
    margin-bottom: 60px !important;
}
.tlc-services .tlc-eyebrow {
    color: var(--tlc-yellow) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}
.tlc-services h2 {
    font-size: clamp(28px, 3.2vw, 44px) !important;
    line-height: 1.1 !important;
    margin-bottom: 14px !important;
}
.tlc-services .tlc-section-head p {
    font-size: 17px !important;
    color: var(--tlc-charcoal-soft) !important;
    max-width: 620px;
    margin: 0 auto !important;
}
.tlc-services .wp-block-columns {
    gap: 24px !important;
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
}
.tlc-services .tlc-service-card {
    background: var(--tlc-bone);
    padding: 36px 30px !important;
    border-top: 3px solid var(--tlc-yellow);
    transition: all 0.3s ease;
}
.tlc-services .tlc-service-card:hover {
    background: var(--tlc-charcoal);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(46,46,48,0.18);
}
.tlc-services .tlc-service-card:hover h3,
.tlc-services .tlc-service-card:hover p {
    color: var(--tlc-bone) !important;
}
.tlc-services .tlc-service-card h3 {
    font-size: 21px !important;
    margin-bottom: 12px !important;
    transition: color 0.3s ease;
}
.tlc-services .tlc-service-card p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: var(--tlc-charcoal-soft) !important;
    margin: 0 !important;
    transition: color 0.3s ease;
}

/* --------------------------------------------------------------------------
   8. GALLERY
   -------------------------------------------------------------------------- */
.tlc-gallery {
    background: var(--tlc-bone);
    padding: 100px 0 !important;
}
.tlc-gallery .tlc-section-head {
    text-align: center;
    margin-bottom: 50px !important;
}
.tlc-gallery .tlc-eyebrow {
    color: var(--tlc-yellow) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}
.tlc-gallery h2 {
    font-size: clamp(28px, 3.2vw, 44px) !important;
    line-height: 1.1 !important;
    margin-bottom: 14px !important;
}
.tlc-gallery .tlc-section-head p {
    font-size: 17px !important;
    color: var(--tlc-charcoal-soft) !important;
    max-width: 620px;
    margin: 0 auto !important;
}
.tlc-gallery .wp-block-columns {
    gap: 18px !important;
    flex-wrap: wrap !important;
    margin-bottom: 18px !important;
}
.tlc-gallery .wp-block-image {
    margin: 0 !important;
    overflow: hidden;
    position: relative;
}
.tlc-gallery .wp-block-image img {
    width: 100% !important;
    height: 320px !important;
    object-fit: cover !important;
    display: block;
    transition: transform 0.5s ease;
}
.tlc-gallery .wp-block-image:hover img {
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   9. CTA STRIP
   -------------------------------------------------------------------------- */
.tlc-cta {
    background: var(--tlc-charcoal);
    padding: 70px 0 !important;
    position: relative;
    overflow: hidden;
}
.tlc-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--tlc-yellow);
}
.tlc-cta > .wp-block-group__inner-container {
    text-align: center;
}
.tlc-cta h2 {
    color: var(--tlc-white) !important;
    font-size: clamp(26px, 3vw, 40px) !important;
    margin-bottom: 14px !important;
}
.tlc-cta p {
    color: var(--tlc-bone) !important;
    font-size: 17px !important;
    margin-bottom: 30px !important;
    max-width: 620px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.tlc-cta .wp-block-buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

/* --------------------------------------------------------------------------
   10. CONTACT
   -------------------------------------------------------------------------- */
.tlc-contact {
    background: var(--tlc-bone);
    padding: 100px 0 !important;
}
.tlc-contact .tlc-section-head {
    text-align: center;
    margin-bottom: 60px !important;
}
.tlc-contact .tlc-eyebrow {
    color: var(--tlc-yellow) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}
.tlc-contact h2 {
    font-size: clamp(28px, 3.2vw, 44px) !important;
    line-height: 1.1 !important;
    margin-bottom: 14px !important;
}
.tlc-contact .tlc-section-head p {
    font-size: 17px !important;
    color: var(--tlc-charcoal-soft) !important;
    max-width: 620px;
    margin: 0 auto !important;
}
.tlc-contact .wp-block-columns {
    gap: 24px !important;
    flex-wrap: wrap !important;
}
.tlc-contact .tlc-contact-card {
    background: var(--tlc-white);
    padding: 40px 32px !important;
    text-align: center;
    border-bottom: 3px solid var(--tlc-yellow);
    transition: all 0.3s ease;
}
.tlc-contact .tlc-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(46,46,48,0.12);
}
.tlc-contact .tlc-contact-card h3 {
    font-size: 14px !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tlc-charcoal-soft) !important;
    margin-bottom: 14px !important;
    font-weight: 600 !important;
}
.tlc-contact .tlc-contact-card p {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--tlc-charcoal) !important;
    margin: 0 !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.tlc-contact .tlc-contact-card a {
    color: var(--tlc-charcoal) !important;
    text-decoration: none;
}
.tlc-contact .tlc-contact-card a:hover {
    color: var(--tlc-yellow) !important;
}

/* --------------------------------------------------------------------------
   11. Header / Nav tweaks (Kadence main header)
   Targets actual Kadence selectors so the WP site matches the preview's
   "logo flush top-to-bottom on the left" treatment.
   -------------------------------------------------------------------------- */
.site-header-wrap,
.site-header-inner-wrap,
.site-header-row-container,
.site-header-row-container-inner {
    background: var(--tlc-white);
}
.site-header-wrap { box-shadow: 0 1px 0 rgba(46,46,48,0.08); }

/* Hide the Kadence site-title text — the logo image already contains the brand name */
.site-branding .site-title,
.site-branding .site-description { display: none !important; }

/* Logo flush left, top-to-bottom */
.site-branding,
.site-header-section.site-header-section-left,
.site-header-section-inner-inner-left {
    padding: 0 !important;
    margin: 0 !important;
}
.site-branding a.brand,
.site-branding a.site-logo-link,
.site-branding .site-logo {
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 72px;
}
.site-branding img,
.site-logo img,
.custom-logo {
    height: 72px !important;
    width: auto !important;
    max-height: 72px !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Menu items styling matches the preview nav */
.header-navigation .menu-container > ul > li > a,
.header-menu-container ul li.menu-item a {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--tlc-charcoal) !important;
}
.header-navigation .menu-container > ul > li > a:hover,
.header-navigation .menu-container > ul > li.current-menu-item > a,
.header-menu-container ul li.menu-item a:hover { color: var(--tlc-yellow) !important; }

/* Hide Kadence's default footer — we render our own via wp_footer */
.site-footer,
.site-footer-wrap,
.site-footer-row-container,
.site-footer-section-inner { display: none !important; }

.tlc-nav-instagram > a {
    display: inline-flex !important;
    align-items: center !important;
    color: #000 !important;
    padding: 8px !important;
    transition: color 0.2s ease !important;
}
.tlc-nav-instagram > a:hover { color: var(--tlc-yellow) !important; }
.tlc-nav-instagram svg { display: block; width: 22px; height: 22px; }
.tlc-nav-instagram > a {
    display: inline-flex !important;
    align-items: center !important;
    color: #000 !important;
    padding: 8px !important;
    transition: color 0.2s ease !important;
}
.tlc-nav-instagram > a:hover { color: var(--tlc-yellow) !important; }
.tlc-nav-instagram svg { display: block; width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--tlc-charcoal) !important;
    color: var(--tlc-bone) !important;
}
.site-footer a { color: var(--tlc-bone) !important; }
.site-footer a:hover { color: var(--tlc-yellow) !important; }

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .tlc-hero { min-height: 72vh; padding: 90px 0 !important; }
    .tlc-about, .tlc-services, .tlc-gallery, .tlc-contact { padding: 72px 0 !important; }
}

@media (max-width: 1024px) {
    .tlc-about .wp-block-columns,
    .tlc-services .wp-block-columns,
    .tlc-contact .wp-block-columns {
        gap: 20px !important;
    }
    .tlc-gallery .wp-block-image img { height: 260px !important; }
}

@media (max-width: 768px) {
    html, body { overflow-x: hidden; max-width: 100%; }
    .tlc-hero { padding: 70px 0 !important; min-height: 60vh; }
    .tlc-hero .wp-block-image img { max-width: 170px; }
    .tlc-hero .wp-block-heading,
    .tlc-hero h1,
    .tlc-hero--left .wp-block-heading,
    .tlc-hero--left h1 {
        font-size: 34px !important;
        line-height: 1.1 !important;
        max-width: 100% !important;
        overflow-wrap: break-word;
    }
    .tlc-hero p,
    .tlc-hero .wp-block-paragraph,
    .tlc-hero--left p {
        font-size: 15px !important;
        max-width: 100% !important;
    }
    .tlc-hero--left { min-height: 58vh !important; }
    .tlc-about, .tlc-services, .tlc-gallery, .tlc-contact { padding: 56px 0 !important; }
    .tlc-cta { padding: 48px 0 !important; }

    .tlc-about .wp-block-columns,
    .tlc-services .wp-block-columns,
    .tlc-gallery .wp-block-columns,
    .tlc-contact .wp-block-columns {
        flex-direction: column !important;
    }
    .tlc-about .wp-block-column,
    .tlc-services .wp-block-column,
    .tlc-gallery .wp-block-column,
    .tlc-contact .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }
    .tlc-gallery .wp-block-image img { height: 240px !important; }

    .wp-block-button__link {
        padding: 14px 26px !important;
        font-size: 14px !important;
    }

    .tlc-testimonials h2,
    .tlc-faq h2,
    .tlc-inquiry h2 {
        font-size: 28px !important;
    }
}

@media (max-width: 480px) {
    .tlc-hero > .wp-block-group__inner-container,
    .tlc-about > .wp-block-group__inner-container,
    .tlc-services > .wp-block-group__inner-container,
    .tlc-gallery > .wp-block-group__inner-container,
    .tlc-contact > .wp-block-group__inner-container,
    .tlc-cta > .wp-block-group__inner-container {
        padding: 0 18px !important;
    }
    .tlc-hero h1,
    .tlc-hero--left h1 { font-size: 28px !important; }
    .tlc-hero p, .tlc-hero--left p { font-size: 14px !important; }
    .tlc-contact .tlc-contact-card { padding: 30px 22px !important; }
    .tlc-contact .tlc-contact-card p { font-size: 17px !important; }
    .tlc-gallery .wp-block-image img { height: 200px !important; }
}

/* ==========================================================================
   14. Top bar (above main header)
   ========================================================================== */
.tlc-topbar {
    background: var(--tlc-charcoal);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}
.tlc-topbar__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.tlc-topbar__info { display: flex; gap: 24px; flex-wrap: wrap; }
.tlc-topbar__info a { color: #fff; text-decoration: none; transition: color 0.2s ease; }
.tlc-topbar__info a:hover { color: var(--tlc-yellow); }
.tlc-topbar__social { display: flex; gap: 12px; align-items: center; }
.tlc-topbar__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: color 0.2s ease;
}
.tlc-topbar__social a:hover { color: var(--tlc-yellow); }
.tlc-topbar__social svg { display: block; width: 18px; height: 18px; }

@media (max-width: 768px) {
    .tlc-topbar { font-size: 12px; }
    .tlc-topbar__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 12px;
        text-align: left;
    }
    .tlc-topbar__info {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }
    .tlc-topbar__social {
        flex-shrink: 0;
        gap: 10px;
    }
    .tlc-topbar__social svg { width: 16px; height: 16px; }
}
@media (max-width: 420px) {
    .tlc-topbar { font-size: 11px; }
    .tlc-topbar__info { gap: 8px; }
    .tlc-topbar__inner { padding: 8px 10px; gap: 8px; }
}

/* ==========================================================================
   15. Left-aligned hero variant (ozy-style)
   ========================================================================== */
.tlc-hero--left {
    align-items: stretch !important;
    min-height: 72vh !important;
    padding: 70px 0 70px 0 !important;
}
.tlc-hero--left > .wp-block-group__inner-container {
    text-align: left !important;
    max-width: 1200px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
}
.tlc-hero--left > .wp-block-group__inner-container > p:not(.tlc-eyebrow),
.tlc-hero--left > .wp-block-group__inner-container > .wp-block-paragraph:not(.tlc-eyebrow) {
    margin-top: auto !important;
}
.tlc-hero--left .wp-block-buttons {
    justify-content: flex-start !important;
}
.tlc-hero--left .wp-block-heading,
.tlc-hero--left h1 {
    max-width: 820px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.tlc-hero--left p,
.tlc-hero--left .wp-block-paragraph {
    max-width: 620px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.tlc-hero--left .tlc-eyebrow {
    color: var(--tlc-yellow) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
}
.tlc-hero--left .wp-block-image { display: none; }

/* ==========================================================================
   16. About section — image + check list
   ========================================================================== */
.tlc-about__image img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 30px rgba(46,46,48,0.15);
}
.tlc-about__duo,
.wp-block-group.tlc-about__duo {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
    max-width: 100%;
    margin: 0;
    padding: 4px 4px 16px 4px;
    list-style: none;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.tlc-about__duo figure,
.tlc-about__duo .wp-block-image {
    flex: 0 0 190px;
    margin: 0;
    padding: 0;
    border: 3px solid var(--tlc-charcoal);
    box-shadow: 0 6px 18px rgba(46,46,48,0.12);
    background: var(--tlc-white);
    overflow: hidden;
    scroll-snap-align: start;
}
.tlc-about__duo img {
    display: block;
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
}
@media (max-width: 768px) {
    .tlc-about__duo figure,
    .tlc-about__duo .wp-block-image { flex-basis: 150px; }
}
.tlc-about .tlc-check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0 !important;
}
.tlc-about .tlc-check-list li {
    padding-left: 34px;
    position: relative;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--tlc-charcoal);
}
.tlc-about .tlc-check-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 3px;
    width: 24px; height: 20px;
    background: url('../images/trowel.png') no-repeat left center / contain;
}

/* ==========================================================================
   17. Service card with image on top
   ========================================================================== */
.tlc-service-card--image {
    padding: 0 !important;
    background: var(--tlc-white) !important;
    border-top: none !important;
    box-shadow: 0 2px 14px rgba(46,46,48,0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tlc-service-card--image:hover {
    background: var(--tlc-white) !important;
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(46,46,48,0.16);
}
.tlc-service-card--image:hover h3,
.tlc-service-card--image:hover p { color: var(--tlc-charcoal) !important; }
.tlc-service-card--image .wp-block-image { margin: 0 !important; }
.tlc-service-card--image .wp-block-image img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}
.tlc-service-card--image-content {
    padding: 26px 26px 30px;
    border-top: 3px solid var(--tlc-yellow);
}
.tlc-service-card--image h3 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
    color: var(--tlc-charcoal) !important;
}
.tlc-service-card--image p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: var(--tlc-charcoal-soft) !important;
    margin: 0 !important;
}

/* ==========================================================================
   18. Testimonials
   ========================================================================== */
.tlc-testimonials {
    background: var(--tlc-white);
    padding: 100px 0 !important;
}
.entry-content > .wp-block-group.tlc-testimonials {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}
.tlc-testimonials .is-layout-flow { max-width: none !important; }
.tlc-testimonials > .wp-block-group__inner-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}
.tlc-testimonials .tlc-section-head {
    text-align: center;
    margin-bottom: 50px !important;
}
.tlc-testimonials .tlc-section-head .tlc-eyebrow {
    color: var(--tlc-yellow) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}
.tlc-testimonials h2 {
    font-size: clamp(28px, 3.2vw, 44px) !important;
    line-height: 1.1 !important;
}
.tlc-testimonials .wp-block-columns {
    gap: 24px !important;
    flex-wrap: wrap !important;
}
.tlc-testimonial {
    background: var(--tlc-bone) !important;
    padding: 36px 32px !important;
    border-left: 4px solid var(--tlc-yellow);
    text-align: left;
}
.tlc-testimonial p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--tlc-charcoal) !important;
    margin-bottom: 16px !important;
}
.tlc-testimonial .tlc-testimonial-author {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--tlc-charcoal-soft) !important;
    margin: 0 !important;
}

/* ==========================================================================
   19. FAQ (native <details> accordion)
   ========================================================================== */
.tlc-faq {
    background:
        linear-gradient(rgba(244,241,234,0.5) 0%, rgba(244,241,234,0.6) 100%),
        url('../images/faq-bg.jpg') center/cover no-repeat;
    padding: 60px 0 80px 0 !important;
}
.entry-content > .wp-block-group.tlc-faq {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}
.tlc-faq .is-layout-flow { max-width: none !important; }
.tlc-faq > .wp-block-group__inner-container {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}
.tlc-faq .tlc-section-head {
    text-align: center;
    margin-bottom: 40px !important;
}
.tlc-faq .tlc-section-head .tlc-eyebrow {
    color: var(--tlc-charcoal) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}
.tlc-faq h2 {
    font-size: clamp(28px, 3.2vw, 44px) !important;
    line-height: 1.1 !important;
    margin-bottom: 14px !important;
}
.tlc-faq .tlc-section-head p:not(.tlc-eyebrow) {
    font-size: 16px !important;
    color: var(--tlc-charcoal-soft) !important;
    line-height: 1.6 !important;
    max-width: 620px;
    margin: 0 auto !important;
}
.tlc-faq-list { margin-top: 0; }
.tlc-faq-cta {
    margin-top: 36px !important;
    text-align: center;
    display: flex !important;
    justify-content: center !important;
}
.tlc-faq-cta .wp-block-buttons {
    justify-content: center !important;
}
.tlc-faq details {
    background: var(--tlc-white);
    margin-bottom: 12px;
    border-left: 3px solid var(--tlc-yellow);
    transition: box-shadow 0.2s ease;
}
.tlc-faq details[open] {
    box-shadow: 0 6px 20px rgba(46,46,48,0.08);
}
.tlc-faq summary {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--tlc-charcoal);
    padding: 20px 28px 20px 64px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    user-select: none;
    position: relative;
}
.tlc-faq summary::-webkit-details-marker { display: none; }
.tlc-faq summary::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 22px;
    background: url('../images/trowel.png') no-repeat left center / contain;
    flex-shrink: 0;
}
.tlc-faq summary::after {
    content: '+';
    font-size: 28px;
    font-weight: 300;
    color: var(--tlc-yellow);
    transition: transform 0.25s ease;
    line-height: 1;
    flex-shrink: 0;
}
.tlc-faq details[open] summary::after {
    transform: rotate(45deg);
}
.tlc-faq details p {
    padding: 0 28px 22px 28px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--tlc-charcoal-soft);
    margin: 0;
}

/* ==========================================================================
   20. 3-column dark footer (ozy-style)
   ========================================================================== */
.tlc-footer-main {
    background:
        linear-gradient(rgba(46,46,48,0.82) 0%, rgba(46,46,48,0.92) 100%),
        url('../images/watermark.jpg') center/cover no-repeat;
    color: var(--tlc-bone);
    padding: 70px 0 40px 0;
    position: relative;
}
.tlc-footer-main::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--tlc-yellow);
}
.tlc-footer-main__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
}
.tlc-footer-col h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tlc-yellow);
    margin: 0 0 16px 0;
}
.tlc-footer-col p { font-size: 14px; line-height: 1.7; margin: 0 0 10px 0; color: var(--tlc-bone); }
.tlc-footer-col a { color: var(--tlc-bone); text-decoration: none; }
.tlc-footer-col a:hover { color: var(--tlc-yellow); }
.tlc-footer-brand img { max-width: 140px; margin-bottom: 18px; height: auto; }
.tlc-footer-brand p { max-width: 420px; }
.tlc-footer-social {
    display: flex;
    gap: 14px;
    margin-top: 18px;
}
.tlc-footer-social a {
    display: inline-flex;
    color: var(--tlc-bone);
    transition: color 0.2s ease;
}
.tlc-footer-social a:hover { color: var(--tlc-yellow); }
.tlc-footer-social svg { width: 20px; height: 20px; display: block; }
.tlc-footer-bottom {
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 20px 24px 0;
    border-top: 1px solid rgba(244,241,234,0.1);
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(244,241,234,0.5);
}

@media (max-width: 900px) {
    .tlc-footer-main__inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .tlc-testimonials .wp-block-columns,
    .tlc-about .wp-block-columns {
        flex-direction: column !important;
    }
    .tlc-testimonials .wp-block-column,
    .tlc-about .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   22. Inquiry form (contact page)
   ========================================================================== */
.tlc-inquiry {
    background:
        linear-gradient(rgba(244,241,234,0.6) 0%, rgba(244,241,234,0.7) 100%),
        url('../images/inquiry-bg.jpg') center/cover no-repeat;
    padding: 50px 0 100px 0 !important;
    scroll-margin-top: 120px;
}
.entry-content > .wp-block-group.tlc-inquiry {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}
.tlc-inquiry .is-layout-flow { max-width: none !important; }
.tlc-inquiry > .wp-block-group__inner-container {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}
.tlc-inquiry .tlc-section-head {
    text-align: center;
    margin-bottom: 40px !important;
}
.tlc-inquiry .tlc-eyebrow {
    color: var(--tlc-yellow) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}
.tlc-inquiry h2 {
    font-size: clamp(28px, 3.2vw, 44px) !important;
    line-height: 1.1 !important;
    margin-bottom: 14px !important;
}
.tlc-inquiry .tlc-section-head p {
    font-size: 17px !important;
    color: var(--tlc-charcoal-soft) !important;
    max-width: 620px;
    margin: 0 auto !important;
}
.tlc-inquiry-form {
    max-width: 540px;
    margin: 0 auto;
    background: var(--tlc-white);
    padding: 32px 30px;
    border: 3px solid var(--tlc-charcoal);
    border-top: 3px solid var(--tlc-yellow);
    box-shadow: 0 4px 20px rgba(46,46,48,0.08);
}
.tlc-inquiry-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.tlc-inquiry-form label {
    display: block;
}
.tlc-inquiry-form label > span {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tlc-charcoal-soft);
    margin-bottom: 6px;
}
.tlc-inquiry-form input,
.tlc-inquiry-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid rgba(46,46,48,0.15);
    background: var(--tlc-bone);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--tlc-charcoal);
    transition: border-color 0.2s ease, background 0.2s ease;
    border-radius: 2px;
}
.tlc-inquiry-form input:focus,
.tlc-inquiry-form textarea:focus {
    outline: none;
    border-color: var(--tlc-yellow);
    background: var(--tlc-white);
}
.tlc-inquiry-form textarea {
    resize: vertical;
    min-height: 100px;
    font-family: 'Inter', sans-serif;
}
.tlc-inquiry-full {
    margin-bottom: 18px;
}
.tlc-inquiry-form button {
    background: var(--tlc-yellow);
    color: var(--tlc-charcoal);
    border: 2px solid var(--tlc-yellow);
    padding: 12px 28px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 2px;
    margin-top: 4px;
}
.tlc-inquiry-form button:hover {
    background: var(--tlc-charcoal);
    color: var(--tlc-yellow);
    border-color: var(--tlc-charcoal);
}
.tlc-inquiry-form .tlc-inquiry-note {
    font-size: 13px;
    color: var(--tlc-charcoal-soft);
    margin: 14px 0 0 0;
}
@media (max-width: 768px) {
    .tlc-inquiry-row { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
    .tlc-inquiry-form { padding: 30px 22px; }
}

/* ==========================================================================
   23. Primary nav — "Request a Quote" CTA (appended via functions.php)
   ========================================================================== */
.header-navigation .tlc-nav-cta > a {
    background: var(--tlc-yellow) !important;
    color: var(--tlc-charcoal) !important;
    padding: 12px 22px !important;
    border: 2px solid var(--tlc-yellow) !important;
    margin-left: 12px !important;
    transition: all 0.2s ease !important;
}
.header-navigation .tlc-nav-cta > a:hover {
    background: var(--tlc-charcoal) !important;
    color: var(--tlc-yellow) !important;
    border-color: var(--tlc-charcoal) !important;
}

/* Social icons kept available if ever placed in nav */
.tlc-nav-facebook > a,
.tlc-nav-instagram > a {
    display: inline-flex !important;
    align-items: center !important;
    color: #000 !important;
    padding: 8px !important;
    transition: color 0.2s ease !important;
}
.tlc-nav-facebook > a:hover,
.tlc-nav-instagram > a:hover { color: var(--tlc-yellow) !important; }
.tlc-nav-facebook svg,
.tlc-nav-instagram svg { display: block; width: 22px; height: 22px; }

/* ==========================================================================
   26. Services list (full 12-item list on home page, charcoal bg)
   ========================================================================== */
.tlc-service-list,
.wp-block-group.tlc-service-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 38px !important;
    max-width: 780px;
    margin: 0 auto !important;
}
.tlc-service-item,
.wp-block-group.tlc-service-item {
    background: #FFFFFF;
    border: 3px solid var(--tlc-charcoal);
    border-left: 2px solid var(--tlc-yellow);
    padding: 14px 16px !important;
    margin: 0 !important;
    box-shadow: 0 2px 8px rgba(46,46,48,0.10);
    border-radius: 2px;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
.tlc-service-item__thumb,
.wp-block-image.tlc-service-item__thumb {
    flex: 0 0 120px !important;
    width: 120px !important;
    height: 120px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 2px;
}
.tlc-service-item__thumb img {
    width: 120px !important;
    height: 120px !important;
    object-fit: cover !important;
    display: block;
    border-radius: 2px;
}
@media (max-width: 768px) {
    .tlc-service-item__thumb,
    .wp-block-image.tlc-service-item__thumb {
        flex: 0 0 88px !important;
        width: 88px !important;
        height: 88px !important;
    }
    .tlc-service-item__thumb img {
        width: 88px !important;
        height: 88px !important;
    }
}
.tlc-service-item__body {
    flex: 1 1 auto;
    min-width: 0;
}
.tlc-service-item h3,
.wp-block-group.tlc-service-item h3.wp-block-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--tlc-charcoal) !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: 0.02em;
}
.tlc-service-item p,
.wp-block-group.tlc-service-item p {
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: var(--tlc-charcoal-soft) !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .tlc-service-list,
    .wp-block-group.tlc-service-list {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

/* ==========================================================================
   24. Gallery — per-job blocks with horizontal slider for multi-image jobs
   ========================================================================== */
.tlc-gallery-job {
    margin-bottom: 64px !important;
}
.tlc-gallery-job:last-child { margin-bottom: 0 !important; }
.tlc-gallery-job__title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--tlc-charcoal) !important;
    margin: 0 0 18px 0 !important;
}
.tlc-gallery-job__viewport {
    position: relative;
}
.tlc-gallery-slides,
.wp-block-group.tlc-gallery-slides {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.tlc-gallery-slides .wp-block-image,
.tlc-gallery-slides figure {
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start;
}
.tlc-gallery-slides img {
    width: 100% !important;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
    border: 3px solid var(--tlc-charcoal);
    box-shadow: 0 6px 18px rgba(46,46,48,0.12);
}
/* Single-image jobs (no slider): make the image not stretch full width oddly */
.tlc-gallery-job--single .tlc-gallery-slides {
    overflow-x: visible;
    scroll-snap-type: none;
}

/* Slider arrows — injected by scripts.js on multi-image sliders */
.tlc-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(46,46,48,0.85);
    color: #fff;
    border: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    font-family: 'Inter', sans-serif;
    padding: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.tlc-gallery-arrow:hover {
    background: var(--tlc-yellow);
    color: var(--tlc-charcoal);
}
.tlc-gallery-arrow--prev { left: 12px; }
.tlc-gallery-arrow--next { right: 12px; }
.tlc-gallery-arrow span {
    transform: translateY(-2px);
    display: block;
}

@media (max-width: 768px) {
    .tlc-gallery-job { margin-bottom: 44px !important; }
    .tlc-gallery-job__title { font-size: 18px !important; }
    .tlc-gallery-arrow { width: 40px; height: 40px; font-size: 22px; }
    .tlc-gallery-arrow--prev { left: 8px; }
    .tlc-gallery-arrow--next { right: 8px; }
}

/* ==========================================================================
   25. Gallery grid (paginated 6-jobs-at-a-time on the home page)
   ========================================================================== */
.tlc-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
    margin: 0 !important;
    align-items: start;
}
.tlc-gallery-grid > .tlc-gallery-job,
.tlc-gallery-grid > .wp-block-group.tlc-gallery-job {
    margin-bottom: 0 !important;
}
.tlc-gallery-grid .tlc-gallery-job__title {
    font-size: 16px !important;
    margin: 0 0 12px 0 !important;
    letter-spacing: 0.06em !important;
    min-height: 2.6em;
}
.tlc-gallery-grid .tlc-gallery-arrow {
    width: 36px;
    height: 36px;
    font-size: 22px;
}
.tlc-gallery-grid .tlc-gallery-arrow--prev { left: 8px; }
.tlc-gallery-grid .tlc-gallery-arrow--next { right: 8px; }

.tlc-gallery-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 36px 0 0 0;
    flex-wrap: wrap;
}
.tlc-gallery-pager__btn {
    background: var(--tlc-charcoal);
    color: #fff;
    border: 2px solid var(--tlc-charcoal);
    padding: 12px 22px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 2px;
}
.tlc-gallery-pager__btn:hover:not(:disabled) {
    background: var(--tlc-yellow);
    color: var(--tlc-charcoal);
    border-color: var(--tlc-yellow);
}
.tlc-gallery-pager__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.tlc-gallery-pager__btn span {
    font-size: 20px;
    line-height: 1;
    display: inline-block;
    transform: translateY(-1px);
}
.tlc-gallery-pager__page {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tlc-charcoal);
    min-width: 90px;
    text-align: center;
}

@media (max-width: 1024px) {
    .tlc-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; }
}
@media (max-width: 600px) {
    .tlc-gallery-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
    .tlc-gallery-pager { gap: 12px; }
    .tlc-gallery-pager__btn { padding: 10px 16px; font-size: 12px; }
}