/*
 * Custom Theme 11 — layout CSS (header, nav, banner, footer, widget areas).
 * All colours come from the :root tokens; no hardcoded brand colours.
 * New classes are prefixed default_ (ksm-prefix-replacer hook).
 */

/* ==========================================================================
   Header — sticky on desktop AND mobile, pure CSS (spec section 7).
   Toggleable from Site Settings via the default_sticky_header body class.
   ========================================================================== */

body.default_sticky_header .default_div_header {
    position: sticky;
    top: 0;
    z-index: 1000;
}
.bt0 {fill:#fff; }
.bt1 {fill:var(--primary); }
.bt3 {fill:var(--accent);}

.default_div_header {
    background-color: var(--light);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ONE compact bar (Stage 13 Correction 1): brand + CTAs adjacent on the
   left, nav links in the same bar pushed right. No wrap zone — the CTA
   cluster and widget area leave the bar below 993px (floating cluster
   carries Call + Quote), so the bar is a single fixed-height row at every
   viewport. */
.default_header_grid {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 0.8rem var(--space-s);
    flex-wrap: nowrap;
}

/* Branding: brand SVG + site name combined (tagline markup renders for
   crawlers; hidden at every viewport in the compact bar — CSS only). */
.default_div_branding {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
    flex-shrink: 0;
}
.default_brand_tagline {
    display: none;
}
.default_brand_link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: var(--dark);
    text-decoration: none;
    font-family: var(--t-heading-font-family, 'Bricolage Grotesque', 'Figtree', sans-serif);
    font-weight: 800;
    font-size: var(--text-m);
    letter-spacing: -0.015em;
    line-height: 1.1;
}
.default_brand_link:hover,
.default_brand_link:visited {
    color: var(--dark);
}
.default_brand_mark {
    display: inline-flex;
    flex-shrink: 0;
}
.default_brand_mark svg {
    /* Compact-bar logo scale (Correction 1). */
    width: 6rem;
    height: 6rem;
    display: block;
}
.default_brand_name {
    color: var(--primary);
}
.default_brand_tagline {
    color: var(--secondary);
}

/* Header widget area — desktop (>=993px) only; hidden below via CSS ONLY.
   PHP always renders the markup (crawlers render at any viewport). */
.default_div_widget_area_header_widgets {
    background-color: var(--header-left-bg);
    padding: 0.4rem 1rem;
    border-radius: 0.4rem;
    flex-shrink: 1;
    min-width: 0;
}
.default_div_widget_area_header_widgets .widget {
    margin-bottom: 0;
}

/* Header CTA cluster — flat (no boxed panel), immediately beside the
   branding cluster (Correction 1). Compact button scale; the quote CTA is
   btn--accent (dark on gorse gold, 8.11:1) so no typography-variable state
   can ever render its label tone-on-tone. */
.default_div_header_cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}
.default_div_header_cta .default_button {
    padding: 0.9rem 1.6rem;
    font-size: var(--text-s);
}
.default_header_phone {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.default_header_phone svg {
    flex-shrink: 0;
}

/* Nav slot — ksm-menu renders inside; pushed to the bar's right edge.
   Scoped layout overrides only (plugin behaviour untouched): the plugin's
   1400px centred nav becomes an auto-width right-aligned run of links, and
   the mega menu anchors to the slot's right edge so it can never overflow
   the viewport. */
.default_div_nav_slot {
    margin-left: auto;
    min-width: 0;
}
.default_div_nav_slot:empty {
    display: none;
}
.default_div_nav_slot .ksm-navigation--desktop {
    width: auto;
    margin: 0;
    padding: 0;
}
.default_div_nav_slot .ksm-menu {
    justify-content: flex-end;
    gap: 0.4rem;
}
.default_div_nav_slot .ksm-mega-menu {
    left: auto;
    right: 0;
    transform: none;
    width: min(64rem, calc(100vw - 4rem));
}

/* Centred-logo layout variant (Header Configuration): nav left, logo
   centred, CTAs right. */
body.default_header_logo_centre .default_div_nav_slot {
    order: 1;
    margin-left: 0;
    margin-right: auto;
}
body.default_header_logo_centre .default_div_branding {
    order: 2;
    margin-left: auto;
    margin-right: auto;
}
body.default_header_logo_centre .default_div_header_cta {
    order: 3;
}
body.default_header_logo_centre .default_div_widget_area_header_widgets {
    order: 4;
}

/* ==========================================================================
   Hamburger triggers — the JS button and the no-JS label are twins.
   Without JS the checkbox-hack label shows; with JS the button shows.
   ========================================================================== */

.default_menu_btn {
    display: none; /* Shown on mobile only, below. */
    align-items: center;
    gap: 0.8rem;
    background: none;
    border: 2px solid var(--secondary);
    border-radius: 0.4rem;
    padding: 0.8rem 1.2rem;
    cursor: pointer;
    color: var(--secondary);
    font-size: var(--text-s);
}
.default_menu_btn_icon {
    display: inline-flex;
    flex-direction: column;
    gap: 0.4rem;
}
.default_menu_btn_icon span {
    display: block;
    width: 2rem;
    height: 0.25rem;
    background-color: currentColor;
    border-radius: 0.2rem;
}

/* <=992px: the slim-bar pattern (mobile-approved discipline extended to the
   whole hamburger range so the bar never wraps): brand left, icon-only
   hamburger right. CTA cluster + widget area leave the bar via CSS ONLY —
   markup always renders (crawlers render at any viewport); the floating
   contact cluster carries Call + Quote. */
@media (max-width: 992px) {
    body:not(.ksm-js-enabled) .ksm-mobile-trigger-noscript {
        display: inline-flex;
    }
    body.ksm-js-enabled .ksm-mobile-trigger-js {
        display: inline-flex;
    }
    .default_menu_btn {
        margin-left: auto;
    }
    .default_div_header_cta,
    .default_div_widget_area_header_widgets {
        display: none;
    }
    /* The nav slot's desktop nav is hidden by the plugin at this width; the
       slot must not keep its auto margin or the hamburger loses its own. */
    .default_div_nav_slot {
        margin-left: 0;
    }
    .default_header_grid {
        padding: 0.7rem 1.2rem;
        gap: 1rem;
    }
    .default_brand_link {
        font-size: var(--text-s);
        gap: 0.8rem;
    }
    /* Icon-only hamburger, generous tap target (>=44px). The aria-label on
       the button/label keeps it accessible; the text hides visually. */
    .default_menu_btn {
        min-width: 4.4rem;
        min-height: 4.4rem;
        padding: 0.8rem;
        justify-content: center;
        border-width: 0;
    }
    .default_menu_btn_text {
        display: none;
    }
    /* Facebook-app economy: flat white bar, hairline bottom border. */
    .default_div_header {
        box-shadow: none;
        border-bottom: 1px solid rgba(22, 27, 24, 0.12);
    }
}

/* ==========================================================================
   Animated promo banner — pure CSS animation, no JS dependency.
   Colours flow from Site Settings via --banner-bg / --banner-colour.
   ========================================================================== */

.default_div_promo_banner {
    background-color: var(--banner-bg, var(--accent));
    overflow: hidden;
}
.default_promo_banner_content {
    display: block;
    text-align: center;
    /* ONE slim line at every viewport (Correction 1) — three stacked heavy
       bars are gone; the banner reads as a ticker strip. */
    padding: 1rem var(--space-s);
    font-size: var(--text-s);
    /* Dark on gorse gold (8.11:1) — light on gold fails contrast. */
    color: var(--banner-colour, var(--dark));
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    animation: default_banner_pulse 2.4s ease-in-out infinite;
}
a.default_promo_banner_content:hover,
a.default_promo_banner_content:visited {
    color: var(--banner-colour, var(--dark));
}
@keyframes default_banner_pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
    .default_promo_banner_content {
        animation: none;
    }
}

/* ==========================================================================
   Content + sidebar arrangement
   ========================================================================== */

.default_div_site_content {
    display: block;
}
/* Grid engages only when the sidebar actually rendered (the per-post /
   Layout Defaults gate can suppress it even while the widget area is
   active, so body.has-sidebar alone is not enough). */
.default_div_main_content_wrapper:has(> .default_div_widget_area_sidebar_primary) {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    /* Row gap 0 (Stage 16 Part 0): every full-span band carries its own
       vertical padding, and a row gap opened a stray 40px seam between the
       badges strip and the enquiry band. Column gap keeps the
       content/sidebar separation. */
    gap: 0 var(--space-m);
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}
/* Full-span discipline INVERTED (Stage 19): EVERY wrapper child spans both
   tracks by default — only the content section and the sidebar share a row.
   Sections registered later (via the Stage 19 section registry or anything
   else) inherit the discipline structurally, with no list to maintain.
   Supersedes the Stage 15v explicit class list. */
.default_div_main_content_wrapper:has(> .default_div_widget_area_sidebar_primary) > * {
    grid-column: 1 / -1;
}
.default_div_main_content_wrapper:has(> .default_div_widget_area_sidebar_primary) > .default_div_content,
.default_div_main_content_wrapper:has(> .default_div_widget_area_sidebar_primary) > .default_div_widget_area_sidebar_primary {
    grid-column: auto;
}

/* Sticky sidebar (Stage 19 Part 2, Shane's addendum) — pure CSS. Rides
   beside the longer content column while the fixed content+sidebar group
   is in view, then the whole group scrolls away and the orderable sections
   follow. Desktop grid only (>992px — the grid itself collapses below);
   stacked/mobile stays a normal block. Top offset derivation: the sticky
   header stack measured ~88px @1440 (Stage 13 single compact bar + slim
   banner; scroll-padding-top is 115px WITH anchor margin) — 88px + 16px
   breathing = 104px. align-self:start is REQUIRED (a stretched grid item
   cannot stick); taller-than-viewport sidebars stay reachable via
   max-height + their own scrollbar (simplest correct behaviour). */
@media (min-width: 993px) {
    /* The sticky lives on the INNER wrapper: the aside itself keeps the
       default stretch so it spans the full content+sidebar row, giving the
       inner div the whole row as its sticky range — it releases exactly
       when the group scrolls away. (Sticky directly on the grid-item aside
       anchored to the whole grid CONTAINER in Chromium and overlaid the
       sections below the group.) */
    .default_div_main_content_wrapper:has(> .default_div_widget_area_sidebar_primary) > .default_div_widget_area_sidebar_primary > .default_sidebar_sticky {
        position: sticky;
        top: 104px;
        max-height: calc(100vh - 104px - 1.6rem);
        overflow-y: auto;
    }
}
@media (max-width: 992px) {
    .default_div_main_content_wrapper:has(> .default_div_widget_area_sidebar_primary) {
        /* minmax(0,1fr) matches the desktop tracks above — a bare 1fr has an
           AUTO minimum, which let wide content force the track (and the page)
           past the viewport. */
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Footer — three widget columns, stacking on mobile
   ========================================================================== */

.default_footer_grid {
    display: grid;
    /* minmax(0,1fr) — a bare 1fr track has an AUTO minimum, letting wide
       widget content force the track past the viewport (Stage 4 lesson). */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-s);
    padding: var(--space-s);
}
@media (max-width: 768px) {
    .default_footer_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.default_div_footer .widget-title {
    color: var(--light);
    border-bottom-color: var(--accent);
}
.default_div_footer_copyright p {
    text-align: center;
    font-size: var(--text-s);
}

/* ==========================================================================
   Hero system (template-parts/hero/) — flagstone / standard / contact /
   breadcrumb. The featured image IS the hero image, eager + fetchpriority
   on the current singular only.
   ========================================================================== */

.default_hero {
    position: relative;
}
.default_hero_media img {
    display: block;
    width: 100%;
    height: clamp(32rem, 55vh, 56rem);
    object-fit: cover;
}
.default_hero_title,
.default_hero_description {
    color: var(--light);
}
.default_hero_description {
    margin-top: var(--space-xs);
    max-width: 58ch;
}
.default_hero_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: var(--space-s);
    align-items: center;
}

/* --- Flagstone (front-page signature) ------------------------------------
   Deep-pine panel overlapping the image bottom, CENTRED and widened
   (Stage 13 Correction 2 — no dead whitespace beside the title at 1440).
   Stepped clip-path top edge echoes paving joints (pure CSS, no images);
   the steps rise towards the middle so the centred composition stays
   balanced. */

.default_hero_flagstone {
    overflow: clip;
}
.default_hero_flagstone .default_hero_panel {
    position: relative;
    z-index: 2;
    width: min(96rem, calc(100% - 2 * var(--space-s)));
    margin: -8rem auto 0;
    background-color: var(--primary);
    color: var(--light);
    padding: calc(var(--space-m) + 3.6rem) var(--space-m) var(--space-m);
    text-align: center;
    clip-path: polygon(
        0 3.6rem,
        22% 3.6rem,
        22% 1.8rem,
        42% 1.8rem,
        42% 0,
        78% 0,
        78% 1.8rem,
        100% 1.8rem,
        100% 100%,
        0 100%
    );
}
.default_hero_flagstone .default_hero_description {
    margin-left: auto;
    margin-right: auto;
}
.default_hero_flagstone .default_hero_actions {
    justify-content: center;
}

/* Containment first: full-width panel below the image, no overlap, at
   small viewports. */
@media (max-width: 767px) {
    .default_hero_flagstone .default_hero_panel {
        width: 100%;
        margin: 0;
    }
    .default_hero_flagstone .default_hero_media img {
        height: clamp(22rem, 45vw, 32rem);
    }
}

/* --- Standard + Contact (image background, overlaid copy) ---------------- */

.default_hero_standard,
.default_hero_contact {
    display: grid;
}
.default_hero_standard .default_hero_media,
.default_hero_contact .default_hero_media {
    grid-area: 1 / 1;
}
.default_hero_standard .default_hero_media img,
.default_hero_contact .default_hero_media img {
    height: 100%;
    min-height: 34rem;
}
.default_hero_standard .default_hero_overlay,
.default_hero_contact .default_hero_overlay {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--space-xl) var(--space-s);
    /* Legibility scrim over photography — keeps light text past 4.5:1. */
    background: linear-gradient(rgba(22, 27, 24, 0.5), rgba(22, 27, 24, 0.66));
}
.default_hero--no-image .default_hero_overlay {
    background: var(--primary);
}
/* The theme-built wa.me link (entries helper href, "WhatsApp" label) reads
   as a ghost button beside the phone CTA (contact details visually
   prominent, never bare digits). */
.default_hero_whatsapp a {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--light);
    border-radius: 0.4rem;
    padding: 1rem 2rem;
    color: var(--light);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.default_hero_whatsapp a:hover,
.default_hero_whatsapp a:focus-visible {
    background-color: rgba(247, 245, 240, 0.12);
    color: var(--light);
}

/* --- Breadcrumb (minimal, no image) -------------------------------------- */

.default_hero_breadcrumb {
    padding: var(--space-m) var(--space-s) var(--space-s);
}
.default_hero_breadcrumb .default_hero_title {
    color: var(--dark);
}
.default_breadcrumbs {
    margin-top: 1rem;
}
.default_breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0;
    margin: 0;
    font-size: var(--text-s);
}
.default_breadcrumbs li + li::before {
    content: "\203A";
    margin-right: 0.8rem;
    color: var(--secondary);
}

/* ==========================================================================
   Section framework — headings, reveal targets, rhythm
   ========================================================================== */

.default_section_title {
    position: relative;
    padding-bottom: 1.2rem;
    margin-bottom: var(--space-s);
}
.default_section_title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 6rem;
    height: 0.4rem;
    background-color: var(--primary);
}
.default_section_intro {
    max-width: 68ch;
    margin-bottom: var(--space-s);
}

/* ==========================================================================
   USP strip
   ========================================================================== */

.default_div_usp_strip {
    padding: var(--space-m) var(--space-s);
}
.default_div_content {padding:1rem; }
.default_usp_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-s);
	margin-top:5rem;
}
@media (max-width: 767px) {
    .default_usp_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.default_div_widget_area_sidebar_primary {padding:1rem; margin-top:1rem;}
.default_usp_item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1rem;
    background-color: #e1e1e1; /* Structural neutral (Correction 11) — not a brand token. */
}
.default_usp_icon {
    display: inline-flex;
    flex-shrink: 0;
    padding: 1rem;
    border-radius: 0.6rem;
    color: var(--primary);
    background-color: rgba(31, 69, 50, 0.08);
}
.default_usp_title {
    margin-bottom: 0.4rem;
}
.default_usp_text {
    color: var(--secondary);
}

/* ==========================================================================
   Service/related cards — image-led, hover lift + gorse underline growing
   on hover/focus (accent = CTA/hover only). Rendered by the picker part,
   the query-builder part and the archives.
   ========================================================================== */

.default_service_card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid rgba(22, 27, 24, 0.08);
    border-radius: 0.6rem;
    overflow: hidden;
    text-decoration: none;
    color: var(--dark);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.default_service_card:hover,
.default_service_card:focus-visible {
    color: var(--dark);
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(22, 27, 24, 0.14);
}
.default_service_card_media img {
    display: block;
    width: 100%;
    height: 20rem;
    object-fit: cover;
}
.default_service_card_body {
    display: block;
    padding: var(--space-s);
}
.default_service_card_title {
    display: inline-block;
    position: relative;
    padding-bottom: 0.6rem;
    color: var(--primary);
}
.default_service_card_title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0.3rem;
    width: 2.4rem;
    background-color: var(--accent);
    transition: width 0.3s ease;
}
.default_service_card:hover .default_service_card_title::after,
.default_service_card:focus-visible .default_service_card_title::after {
    width: 100%;
}
.default_service_card_lead {
    display: block; /* Leads are spans inside the card <a> (archives) — block them. */
    margin-top: 0.8rem;
    color: var(--secondary);
}

/* ==========================================================================
   Front-page editorial section (Correction 3 — the page's own content,
   composed by Shane in the editor; no baked band) + built-in [gallery]
   styling: maximum 4 per row, 1 column on mobile (site-wide rule)
   ========================================================================== */

.default_div_front_content {
    padding: var(--space-l) var(--space-s);
}

/* Built-in WordPress galleries — global styling, capped at 4 per row. */
.entry-content .gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
    margin: var(--space-s) 0 0;
}
.entry-content .gallery.gallery-columns-1 { grid-template-columns: minmax(0, 1fr); }
.entry-content .gallery.gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.entry-content .gallery.gallery-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.entry-content .gallery .gallery-item {
    margin: 0;
}
.entry-content .gallery .gallery-item img {
    display: block;
    width: 100%;
    height: 22rem;
    object-fit: cover;
    border: none;
    border-radius: 0.4rem;
}
.entry-content .gallery .gallery-caption {
    font-size: var(--text-s);
    margin-top: 0.4rem;
}
@media (max-width: 767px) {
    .entry-content .gallery,
    .entry-content .gallery.gallery-columns-2,
    .entry-content .gallery.gallery-columns-3 {
        grid-template-columns: minmax(0, 1fr);
    }
    .entry-content .gallery .gallery-item img {
        height: auto;
    }
}

/* ==========================================================================
   Sidebar galleries (Stage 24, Shane item 26): built-in [gallery] / core
   Gallery widget INSIDE the primary sidebar get their OWN rules, separate
   from the .entry-content grid above (which is untouched). 3- and 4-column
   sidebar galleries render as ONE row of FIXED-PX square thumbnails that do
   NOT scale with the viewport (Shane: "they should be in one row and not
   resize as the screen resizes"). Other column counts (1, 2, 5+) keep the
   defaults, per Shane. The lightbox never applies here — it is enqueued on
   gallery singles only.

   Sizing maths (measured live on the served page):
     widget content width = 400px @1440 (420px sidebar track − 2×10px aside
     padding) and 370px @390 when the sidebar stacks full-width — 370px is
     the binding constraint, so:
       4 columns: 4 × 86px + 3 × 8px gap = 368px ≤ 370px
       3 columns: 3 × 116px + 2 × 8px gap = 364px ≤ 370px
   No media queries in this block by design — identical px at every
   viewport; the row simply centres in whatever space the sidebar has.
   ========================================================================== */

.default_div_widget_area_sidebar_primary .gallery.gallery-columns-3,
.default_div_widget_area_sidebar_primary .gallery.gallery-columns-4 {
    display: flex;
    flex-wrap: nowrap;
  
    gap: 8px;
    margin: 0.8rem 0 0;
}
.default_div_widget_area_sidebar_primary .gallery-icon.landscape {
  background-color: #fff;
}
.default_div_widget_area_sidebar_primary .gallery.gallery-columns-3 .gallery-item,
.default_div_widget_area_sidebar_primary .gallery.gallery-columns-4 .gallery-item {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}
.default_div_widget_area_sidebar_primary .gallery.gallery-columns-3 .gallery-item img,
.default_div_widget_area_sidebar_primary .gallery.gallery-columns-4 .gallery-item img {
    display: block;
    object-fit: cover;
    border: none;
    border-radius: 0.4rem;
}
.default_div_widget_area_sidebar_primary .gallery.gallery-columns-4 .gallery-item img {
    width: 86px;
    height: 86px;
}
.default_div_widget_area_sidebar_primary .gallery.gallery-columns-3 .gallery-item img {
    width: 116px;
    height: 116px;
}
/* Captions (if enabled on a sidebar gallery) stay within their thumbnail. */
.default_div_widget_area_sidebar_primary .gallery.gallery-columns-4 .gallery-caption {
    max-width: 86px;
    font-size: var(--text-s);
}
.default_div_widget_area_sidebar_primary .gallery.gallery-columns-3 .gallery-caption {
    max-width: 116px;
    font-size: var(--text-s);
}

/* ==========================================================================
   Archive + related-posts card grids (Correction 9 density): 4 per row on
   desktop, collapsing 4 -> 2 -> 1 down the viewports — consistent with the
   gallery 4-across rule. minmax(0,1fr) tracks (containment discipline — no
   auto-minimum blowouts). The picker mechanism renders through this grid
   too.
   ========================================================================== */

.default_archive_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-s);
}
@media (max-width: 1199px) {
    .default_archive_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .default_archive_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.default_div_archive {
    padding: var(--space-m) var(--space-s) var(--space-l);
}
.default_div_related_posts {
    padding: var(--space-l) var(--space-s);
}
.default_related_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}
.default_related_list li {
    background-color: rgba(31, 69, 50, 0.08);
    border-radius: 2rem;
}
.default_related_list a {
    display: inline-block;
    padding: 0.5rem 1.4rem;
    font-weight: 600;
}

/* Child locations block (hierarchical location CPT) + ksm-near sentence */
.default_div_child_locations {
    margin-top: var(--space-m);
}
.default_near_areas {
    margin-top: var(--space-m);
    color: var(--secondary);
}

/* In-content CTA under singles content — always anchors the enquiry form */
.default_content_cta {
    margin-top: var(--space-m);
}

/* Gallery single content sits on the wide measure */
.default_div_gallery_single {
    padding: 0 var(--space-s);
}

/* ==========================================================================
   Local badge — the visible schema block (mirrors the JSON-LD data).
   Correction 8: a CONTRASTING deep-pine band (section-rhythm discipline —
   it must never blend into the limestone content around it), with the
   text/map columns vertically centre-aligned. Limestone on pine 9.86:1;
   gorse-gold hover on pine 4.99:1.
   ========================================================================== */

.default_div_local_badge {
    padding: var(--space-l) var(--space-s);
    background-color: var(--primary);
    color: var(--light);
}
.default_div_local_badge .default_section_title {
    color: var(--light);
}
.default_div_local_badge .default_section_title::after {
    background-color: var(--accent);
}
.default_div_local_badge a {
    color: var(--light);
    text-decoration: underline;
}
.default_div_local_badge a:hover,
.default_div_local_badge a:focus-visible {
    color: var(--accent);
}
.default_local_badge_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-m);
    align-items: center;
}
@media (max-width: 767px) {
    .default_local_badge_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.default_local_badge_intro {
    font-size: var(--text-m);
    font-weight: 600;
}
.default_local_badge_address {
    font-style: normal;
    margin-top: var(--space-xs);
}
.default_local_badge_address span {
    display: block;
}
.default_local_badge_contact {
    margin-top: var(--space-xs);
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    align-items: center;
    font-weight: 600;
}
.default_local_badge_mentions {
    list-style: none;
    padding: 0;
    margin-top: var(--space-xs);
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}
.default_local_badge_mentions li {
    background-color: rgba(247, 245, 240, 0.14);
    border-radius: 2rem;
    padding: 0.3rem 1.2rem;
    font-size: var(--text-s);
}
.default_local_badge_map {
    /* Reserve space so the late-rendering map cannot shift layout (CLS). */
    min-height: 30rem;
}

/* ==========================================================================
   Reviews section
   ========================================================================== */

.default_div_reviews {
    padding: var(--space-l) var(--space-s);
}

/* ==========================================================================
   Enquiry band — the #enquiry-form target of every call-out.
   Correction 4: a COMPOSED band — heading and intro centred above a
   margin-centred form panel — everywhere it renders (front, singles,
   contact large variant). Nothing hugs the left edge.
   ========================================================================== */

.default_div_enquiry {
    background-color: var(--primary);
    color: var(--light);
    padding: var(--space-l) var(--space-s);
}
.default_div_enquiry .default_section_title {
    color: var(--light);
    text-align: center;
}
.default_div_enquiry .default_section_title::after {
    background-color: var(--accent);
    left: 50%;
    transform: translateX(-50%);
}
.default_enquiry_text {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.default_enquiry_panel {
    background-color: #ffffff;
    color: var(--dark);
    border-radius: 0.6rem;
    padding: var(--space-m);
    margin-top: var(--space-s);
    max-width: 86rem;
    margin-left: auto;
    margin-right: auto;
}
.default_enquiry_fallback a {
    font-weight: 700;
}

/* GDPR-relevant structural reset: the enquiry card is a LIGHT panel sitting
   on the deep-pine band. Plugin-rendered form text must never render light
   on light — ksm-forms ships .ksm-contact-form__privacy-text { color:#fff }
   (built for dark-form sites) and the band itself carries --light text.
   This is a card-level reset over every text-bearing element, so ANY
   present or future plugin markup inside the card reads dark; it is not a
   per-class patch. Specificity (0,2,1) outranks the plugin's single-class
   rules regardless of stylesheet order. Deliberate colours survive: the
   required marker stays red (excluded), links keep their own rules, the
   submit button and success/error messages are divs/buttons outside the
   element list and keep their background+colour pairs. */
.default_enquiry_panel {
    color: var(--dark);
}
.default_enquiry_panel :is(label, legend, p, li, small, span):not(.ksm-contact-form__required) {
    color: var(--dark);
}

/* Footer widgets carrying the reviews badge (Correction 6: Shane places
   [ksm_reviews_summary] in a footer widget himself). */
.default_div_footer .widget .ksm-reviews-summary {
    margin-bottom: 0;
}

/* ==========================================================================
   Motion — restrained, all behind prefers-reduced-motion.
   One orchestrated hero load; scroll-reveal on section headings only
   (no-JS: everything visible — the hidden state needs body.ksm-js-enabled).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .default_hero_flagstone .default_hero_panel {
        animation: default_hero_panel_in 0.6s ease-out both;
    }
    .default_hero_flagstone .default_hero_media img {
        animation: default_hero_media_in 0.6s ease-out both;
    }

    body.ksm-js-enabled .default_reveal {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    body.ksm-js-enabled .default_reveal.default_reveal--visible {
        opacity: 1;
        transform: none;
    }
}

@keyframes default_hero_panel_in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes default_hero_media_in {
    from {
        transform: scale(1.02);
    }
    to {
        transform: none;
    }
}

/* ==========================================================================
   Floating contact cluster (design addendum) — two stacked circular
   buttons pinned to the right edge, all viewports. Pure anchors, no JS.
   right is safe-area aware; fixed positioning is out of flow so it can
   never widen the page (containment). z-index 900 ON PURPOSE: the ksm-menu
   drawer/overlay (z 9999/10000) live INSIDE the sticky header's stacking
   context (header z 1000), so against the page they resolve at 1000 — the
   cluster must sit BELOW 1000 for the open nav drawer to cover it cleanly
   (verified with elementFromPoint). The header and cluster never overlap
   spatially, so 900 costs nothing elsewhere.
   ========================================================================== */

.default_div_floating_contact {
    position: fixed;
    right: calc(env(safe-area-inset-right, 0px) + 1.2rem);
    bottom: max(18vh, 9rem);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    z-index: 900;
}
.default_floating_btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.2rem;   /* 52px — comfortably over the 44px tap-target floor */
    height: 5.2rem;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(16, 20, 17, 0.28);
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.default_floating_btn:hover,
.default_floating_btn:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.06);
}
/* Gorse gold carries dark iconography (8.11:1); pine carries light (9.86:1).
   Literal fallbacks in the var() calls (Correction 2 hardening): even with
   the token layer absent the icons can never paint tone-on-tone. */
.default_floating_btn--call,
.default_floating_btn--call:visited {
    /* :visited included (Correction 14): (0,2,0) outranks the global
       a:visited (0,1,1) so history state can never recolour the button. */
    background-color: var(--accent, #E8A421);
    color: var(--dark, #161B18);
}
.default_floating_btn--call:hover,
.default_floating_btn--call:focus-visible {
    color: var(--dark);
}
.default_floating_btn--quote,
.default_floating_btn--quote:visited {
    /* Always light-on-pine, visited or not (Correction 14). */
    background-color: var(--primary, #1F4532);
    color: var(--light, #F7F5F0);
}
.default_floating_btn--quote:hover,
.default_floating_btn--quote:focus-visible {
    color: var(--light);
}
.default_floating_btn svg {
    width: 2.2rem;
    height: 2.2rem;
}
/* Small text label appears to the LEFT on hover/focus (desktop polish).
   Absolutely positioned inside the button — never part of layout flow, so
   no horizontal scroll can result. */
.default_floating_btn_label {
    position: absolute;
    right: calc(100% + 1rem);
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--contrast);
    color: var(--light);
    font-size: var(--text-s);
    font-weight: 600;
    padding: 0.4rem 1.2rem;
    border-radius: 0.4rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.default_floating_btn:focus-visible .default_floating_btn_label {
    opacity: 1;
}
@media (hover: hover) {
    .default_floating_btn:hover .default_floating_btn_label {
        opacity: 1;
    }
}

/* ==========================================================================
   Contact page — direct channels grid (entries-driven; template
   page-templates/contact.php)
   ========================================================================== */

.default_div_contact_channels {
    padding: var(--space-l) var(--space-s);
}
.default_contact_channels_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-s);
}
@media (max-width: 767px) {
    .default_contact_channels_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.default_contact_channel {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background-color: #ffffff;
    border: 1px solid rgba(22, 27, 24, 0.08);
    border-radius: 0.6rem;
    padding: var(--space-s);
    color: var(--dark);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    min-width: 0; /* Long values truncate inside the track, never widen it. */
}
a.default_contact_channel:hover,
a.default_contact_channel:focus-visible {
    color: var(--dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(22, 27, 24, 0.12);
}
.default_contact_channel_icon {
    display: inline-flex;
    flex-shrink: 0;
    padding: 1.1rem;
    border-radius: 50%;
    color: var(--primary);
    background-color: rgba(31, 69, 50, 0.08);
}
.default_contact_channel_body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.default_contact_channel_title {
    font-size: var(--text-s);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--secondary);
}
.default_contact_channel_value {
    font-weight: 700;
    overflow-wrap: anywhere;
}
.default_contact_channel_value a {
    color: var(--primary);
}

/* Larger contact-page version of the enquiry band (Principle 5): full-width
   panel, roomier controls. Element-level selectors so present or future
   plugin form markup scales without per-class patches. */
.default_enquiry--contact .default_enquiry_panel {
    /* Larger contact variant stays a composed, margin-centred panel
       (Correction 4) rather than a full-bleed block. */
    max-width: 110rem;
    padding: var(--space-m) var(--space-m) var(--space-l);
}
.default_enquiry--contact .default_enquiry_panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea, select) {
    font-size: var(--text-m);
    padding: 1.3rem 1.5rem;
}
.default_enquiry--contact .default_enquiry_panel textarea {
    min-height: 16rem;
}

/* ==========================================================================
   Search form (searchform.php) + results header
   ========================================================================== */

.default_search_form {
    max-width: 56rem;
}
.default_search_label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.6rem;
}
.default_search_controls {
    display: flex;
    gap: 0.8rem;
}
.default_search_input {
    flex: 1 1 auto;
    min-width: 0; /* Flex item must be shrinkable — containment. */
    padding: 1rem 1.4rem;
    border: 1px solid rgba(22, 27, 24, 0.25);
    border-radius: 0.4rem;
    font-size: inherit;
    font-family: inherit;
    background-color: #ffffff;
    color: var(--dark);
}
.default_search_submit {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}
.default_search_query {
    color: var(--primary);
}
.default_search_again {
    margin-bottom: var(--space-s);
}

/* ==========================================================================
   404 — helpful, branded
   ========================================================================== */

.default_div_error404 {
    padding: var(--space-l) var(--space-s);
}
.default_error404_code {
    font-family: var(--t-heading-font-family, 'Bricolage Grotesque', 'Figtree', sans-serif);
    font-size: var(--text-xxl);
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
}
.default_error404_links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin: var(--space-s) 0 var(--space-m);
}

/* Card date / type eyebrow on blog + search cards */
.default_card_date {
    display: block;
    font-size: var(--text-s);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--secondary);
    margin-bottom: 0.6rem;
}

/* ==========================================================================
   Why Choose Us (Stage 15, item 16) — trust grid directly under the content.
   Boxes echo the USP card family: defined light card, icon in a pine-tinted
   accent circle, reason text beneath. 4 across -> 2 -> 1.
   ========================================================================== */

.default_div_whychoose {
    padding: var(--space-m) var(--space-s);
}
.default_whychoose_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-s);
    margin-top: var(--space-s);
}
@media (max-width: 1199px) {
    .default_whychoose_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .default_whychoose_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.default_whychoose_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.2rem;
    padding: var(--space-s) 1.5rem;
    background-color: #e1e1e1; /* Structural neutral — the USP card family. */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
	border:1px solid var(--accent);
}
.default_whychoose_item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(16, 20, 17, 0.12);
}
@media (prefers-reduced-motion: reduce) {
    .default_whychoose_item,
    .default_whychoose_item:hover {
        transform: none;
        transition: none;
    }
}
.default_whychoose_icon {
    display: inline-flex;
    padding: 1.2rem;
    border-radius: 50%;
    color: var(--primary);
    background-color: rgba(31, 69, 50, 0.08);
}
.default_whychoose_reason {
    font-weight: 600;
    color: var(--dark);
    margin: 0;
}

/* ==========================================================================
   Trust badges strip (Stage 15, item 17) — full-page-width band directly
   above the enquiry section. 8 across -> 4 (tablet) -> 2 (mobile).
   ========================================================================== */

.default_div_badges_strip {
    width: 100%;
    background-color: var(--light);
    border-top: 1px solid rgba(22, 27, 24, 0.08);
    padding: var(--space-s);
}
/* Stage 18 (item 21): 4 slots, CENTRED — fixed-max tracks with
   justify-content centre the cluster inside the full-width band instead of
   stretching it edge-to-edge. 4 across desktop AND tablet (4 × ≤160px
   tracks still balance comfortably at 768); 2×2 on mobile. */
.default_badges_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 160px));
    justify-content: center;
    gap: var(--space-s) var(--space-m);
    align-items: center;
}
@media (max-width: 767px) {
    .default_badges_grid {
        grid-template-columns: repeat(2, minmax(0, 160px));
    }
}
.default_badge_slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.default_badge_slot img.default_badge_img {
    max-width: 100%;
    max-height: 84px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.default_badge_link {
    display: inline-flex;
    transition: transform 0.2s ease;
}
.default_badge_link:hover,
.default_badge_link:focus-visible {
    transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
    .default_badge_link,
    .default_badge_link:hover {
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   Breadcrumb bar (Stage 15, item 18) — quiet slim band above the hero on
   every route except the homepage. Trail styling is shared with the
   breadcrumb hero variant (.default_breadcrumbs).
   ========================================================================== */

.default_div_breadcrumb_bar {
    background-color: var(--light);
    padding: 0.8rem var(--space-s);
    border-bottom: 1px solid rgba(22, 27, 24, 0.06);
}
.default_div_breadcrumb_bar .default_breadcrumbs {
    margin-top: 0;
}
.default_breadcrumbs a {
    color: var(--secondary);
    text-decoration: none;
}
.default_breadcrumbs a:hover,
.default_breadcrumbs a:focus-visible {
    color: var(--primary);
    text-decoration: underline;
}
.default_breadcrumbs li[aria-current="page"] {
    color: var(--dark);
    font-weight: 600;
}

/* ==========================================================================
   FAQ accordion (Stage 16, item 19) — native <details>/<summary>, flagstone
   card styling. No-JS interactive by nature; JS only adds one-at-a-time.
   ========================================================================== */

.default_div_faq {
    padding: var(--space-m) var(--space-s);
}
.default_faq_list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: var(--space-s);
}
.default_faq_item {
    background-color: #e1e1e1; /* Structural neutral — the USP/whychoose card family. */
    border-left: 3px solid var(--primary);
}
.default_faq_question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.4rem 1.8rem;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    list-style: none; /* Hide the default disclosure triangle... */
}
.default_faq_question::-webkit-details-marker {
    display: none; /* ...and the WebKit one. */
}
.default_faq_question:hover,
.default_faq_question:focus-visible {
    color: var(--primary);
}
/* Custom +/− marker — pure CSS, driven by the details open state. */
.default_faq_marker {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background-color: rgba(31, 69, 50, 0.08);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.default_faq_marker::before {
    content: "+";
}
.default_faq_item[open] > .default_faq_question .default_faq_marker::before {
    content: "\2212";
}
.default_faq_item[open] > .default_faq_question {
    color: var(--primary);
}
.default_faq_answer {
    padding: 0 1.8rem 1.6rem;
    color: var(--secondary);
}
.default_faq_answer > * + * {
    margin-top: 0.8em;
}

/* ==========================================================================
   Breadcrumbs INSIDE the hero (Stage 21, item 24) — the trail sits above
   the hero title as part of the same component on every title-bearing
   variant. Dark-panel contexts (image-overlay heroes + the flagstone pine
   panel) restyle to light; the limestone breadcrumb-variant hero keeps the
   default dark trail. Contrast on pine #1F4532: current crumb light
   #F7F5F0 = 9.86:1; links 82%-alpha light (blends to #D0D5CE) = 7.21:1;
   gorse separator (decorative) = 4.99:1.
   ========================================================================== */

.default_hero .default_breadcrumbs {
    margin-top: 0;
    margin-bottom: 1.2rem;
}
.default_hero_overlay .default_breadcrumbs a,
.default_hero_panel .default_breadcrumbs a {
    color: rgba(247, 245, 240, 0.82);
}
.default_hero_overlay .default_breadcrumbs a:hover,
.default_hero_overlay .default_breadcrumbs a:focus-visible,
.default_hero_panel .default_breadcrumbs a:hover,
.default_hero_panel .default_breadcrumbs a:focus-visible {
    color: var(--light);
}
.default_hero_overlay .default_breadcrumbs li[aria-current="page"],
.default_hero_panel .default_breadcrumbs li[aria-current="page"] {
    color: var(--light);
}
.default_hero_overlay .default_breadcrumbs li + li::before,
.default_hero_panel .default_breadcrumbs li + li::before {
    color: var(--accent);
}