/**
 * Kitchen Design Canterbury – Landing Page Styles
 *
 * Conversion-focused landing page for Google Ads / SEO traffic.
 * All classes prefixed with "k4-landing-" to avoid conflicts with
 * existing theme and template styles.
 *
 * Colours, fonts and button shapes follow the existing K4 Kitchens theme:
 *   Dark:   #231f20
 *   Accent: #f3af2e   Accent hover: #e2a027
 *   Body:   #333
 *
 * @package K4_Kitchens_New
 * @author  Steve Austen
 * @company The PCGP
 * @version 2.21.0
 */

/* ═══════════════════════════════════════════
   Layout primitives
   ═══════════════════════════════════════════ */

/* Page wrapper – pushed down to clear the theme's fixed header.
   This is a no-JS FALLBACK only: js/k4-new-scripts.js (initLandingOffset)
   measures the real header height on load/resize and overrides this inline,
   so it stays correct across breakpoints and header variants.

   The value is the header's OWN height — it intentionally does NOT add the
   admin-bar height. When logged in, WordPress adds `html { margin-top: 32/46px }`
   which already shifts this wrapper down to clear the admin bar; the header's
   matching `top` offset cancels out. Adding the admin-bar height here as well
   would double-count it and reopen a gap below the header. */
.k4-landing {
    color: #333;
    font-family: "Poppins", sans-serif;
    margin-top: 113px;
}

/* Centred content container – matches theme .container max width */
.k4-landing-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Standard vertical rhythm for each section */
.k4-landing-section {
    padding: 70px 0;
}

/* Alternating light-grey background for visual separation */
.k4-landing-section--alt {
    background: #f9f9f9;
}

/* Section heading block */
.k4-landing-section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 45px;
}

.k4-landing-section-head h2 {
    font-size: 34px;
    font-weight: 800;
    color: #231f20;
    margin: 0 0 16px;
    line-height: 1.25;
}

.k4-landing-section-head p {
    font-size: 17px;
    color: #555;
    margin: 0;
}

/* Generic intro paragraph */
.k4-landing-lead {
    font-size: 17px;
    line-height: 1.8;
    color: #444;
}

/* ═══════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════ */

.k4-landing-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}

/* Centre buttons when used inside a centred section */
.k4-landing-buttons--center {
    justify-content: center;
}

.k4-landing-btn {
    display: inline-block;
    padding: 15px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    line-height: 1.3;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

/* Primary CTA – yellow accent */
.k4-landing-btn-primary {
    background: #f3af2e;
    color: #231f20;
    border-color: #f3af2e;
}

.k4-landing-btn-primary:hover {
    background: #e2a027;
    border-color: #e2a027;
    color: #231f20;
    transform: translateY(-2px);
}

/* Secondary CTA – outline that adapts to background */
.k4-landing-btn-secondary {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.k4-landing-btn-secondary:hover {
    background: #fff;
    color: #231f20;
    transform: translateY(-2px);
}

/* Secondary CTA on light backgrounds */
.k4-landing-btn-secondary-dark {
    background: transparent;
    color: #231f20;
    border-color: #231f20;
}

.k4-landing-btn-secondary-dark:hover {
    background: #231f20;
    color: #fff;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════
   Call modal
   Light-card modal shown on desktop when one of the secondary
   "Call K4 Kitchens Today" buttons is clicked.  On touch-primary
   devices the click falls through to the underlying tel: link
   so the dialer opens normally; this CSS only applies when JS
   has decided to render the modal.
   ═══════════════════════════════════════════ */
.k4-call-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.78);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* The [hidden] attribute removes the modal from layout entirely
   while it's not in use — saves a hit-test layer behind the page. */
.k4-call-modal[hidden] {
    display: none;
}

.k4-call-modal.is-open {
    opacity: 1;
    visibility: visible;
}

/*
 * Light card panel.  Gold top border ties it to the brand
 * accent used elsewhere on the page (trust strip, CTA section).
 * Subtle entry transform lifts the panel into place — small
 * touch but adds polish.
 */
.k4-call-modal__panel {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    border-top: 4px solid #f3af2e;
    padding: 40px 36px 32px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    transform: translateY(16px);
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

.k4-call-modal.is-open .k4-call-modal__panel {
    transform: translateY(0);
}

/* Close × — small, top-right */
.k4-call-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 6px 10px;
    transition: color 0.2s ease;
}

.k4-call-modal__close:hover {
    color: #231f20;
}

/* Gold-filled phone icon at the top of the panel */
.k4-call-modal__icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #f3af2e;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 22px;
    box-shadow: 0 6px 16px rgba(243, 175, 46, 0.40);
}

.k4-call-modal__title {
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #231f20;
    margin: 0 0 6px;
    line-height: 1.25;
}

.k4-call-modal__subtitle {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #666;
    margin: 0 0 22px;
    line-height: 1.5;
}

/*
 * Large prominent phone number.
 * Clickable too — on desktop most browsers will try to launch a
 * tel: handler (FaceTime, Skype, system default) which is a useful
 * extra path on top of the visible number.
 */
.k4-call-modal__number {
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #231f20;
    letter-spacing: 0.5px;
    text-decoration: none;
    margin: 0;
}

.k4-call-modal__number:hover {
    color: #231f20;
    text-decoration: none;
}

.k4-call-modal__actions {
    margin-top: 12px;
}

/*
 * Copy-to-clipboard pill button.
 * Subtle gold tint background and outline so it reads as a
 * secondary action — the number itself is the primary focus.
 */
.k4-call-modal__copy {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(243, 175, 46, 0.12);
    border: 1px solid rgba(243, 175, 46, 0.55);
    border-radius: 50px;
    padding: 7px 16px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #231f20;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.k4-call-modal__copy:hover {
    background: rgba(243, 175, 46, 0.22);
}

/* Confirmation state — flashes briefly after a successful copy */
.k4-call-modal__copy.is-copied {
    background: #f3af2e;
    border-color: #f3af2e;
    color: #ffffff;
}

/* Opening hours line — small, muted, separated by a hairline rule */
.k4-call-modal__hours {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #555;
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid #eee;
}

.k4-call-modal__hours i {
    color: #f3af2e;
}

/* Prevent background scroll while the modal is open */
body.k4-call-modal-open {
    overflow: hidden;
}

/* Mobile: tighten the panel padding for narrow phones if the
   modal does happen to appear (e.g. desktop browser in mobile size) */
@media (max-width: 480px) {
    .k4-call-modal__panel {
        padding: 32px 24px 24px;
    }

    .k4-call-modal__number {
        font-size: 28px;
    }
}

/* Inline text link styled as a prompt */
.k4-landing-textlink {
    display: inline-block;
    margin-top: 22px;
    font-weight: 600;
    font-size: 16px;
    color: #231f20;
    text-decoration: none;
    border-bottom: 2px solid #f3af2e;
    padding-bottom: 2px;
    transition: color 0.3s ease;
}

.k4-landing-textlink:hover {
    color: #e2a027;
}

/* ═══════════════════════════════════════════
   1. Hero
   ═══════════════════════════════════════════ */

/*
 * Hero section doubles as the carousel container.
 * The slide track fills the section absolutely; the text content
 * floats above via position: relative and z-index.
 */
.k4-landing-hero {
    position: relative;
    overflow: hidden;
    background-color: #231f20; /* Shown while images load / if none uploaded */
    color: #fff;
    /* Bottom padding gives the upward-pointing arrow on the trust bar
       room to overlap into the hero without obscuring any content.
       Now that the wedge is only 17 px tall, far less clearance is
       needed below the buttons, so the bottom padding is reduced
       (55→28) to lift the trust strip higher and reveal more of it
       on full-size screens. */
    padding: 45px 0 28px;
}

/* ── Carousel background layer ── */

/* Track fills the entire hero section */
.k4-landing-hero .hero-carousel__track {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Each slide covers the full track area */
.k4-landing-hero .hero-carousel__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #231f20;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.k4-landing-hero .hero-carousel__slide.is-active {
    opacity: 1;
}

/* Text content sits above the slide layer */
.k4-landing-hero-content {
    position: relative;
    z-index: 2;
}

/* Arrows and dots not shown on the geo landing hero.
   The upward arrow chevron on the trust bar provides the
   visual continuity cue instead. */
.k4-landing-hero .hero-carousel__dots,
.k4-landing-hero .hero-carousel__arrow {
    display: none;
}

.k4-landing-hero-inner {
    max-width: 820px;
}

.k4-landing-hero h1 {
    font-size: 46px;
    font-weight: 800;
    /*
     * Increased line-height gives visual breathing room between the
     * per-line highlight strips on the inner span when the heading wraps.
     */
    line-height: 1.65;
    color: #fff;
    margin: 0 0 14px;
}

/*
 * Per-line dark highlight behind the H1 text.
 * display:inline + box-decoration-break:clone means each wrapped line
 * gets its own separate background fragment that hugs the text tightly,
 * rather than a single rectangle covering the whole block.
 *
 * Vertical padding is expressed in *em* so it scales automatically with
 * font-size across every responsive breakpoint (46px / 38px / 30px).
 *
 *   Formula:  padding-y = (line-height − font-extent) ÷ 2  em
 *
 * font-extent is the rendered glyph height including ascenders and
 * descenders — for Poppins this is roughly 1.13em (NOT 1em — the CSS
 * font-size only defines the em-box, but the painted text extends
 * further). Using 1em in the formula causes the strips to overlap and
 * the rgba background to darken visibly at line joins.
 *
 *   Empirically determined value for Poppins at all breakpoints: 0.124em.
 *   (Pure maths gives ~0.26em but real painted glyph extent sits higher
 *   than theory predicts, leaving the strips overlapping at larger values.)
 */
.k4-landing-h1-highlight {
    display: inline;
    background: rgba(0, 0, 0, 0.50);
    padding: 0.124em 16px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.k4-landing-hero-sub {
    font-size: 21px;
    font-weight: 500;
    color: #f3af2e;
    margin: 0 0 22px;
    /* Dark shadow lifts the gold text off the background photo without
       dulling the colour the way a background box would. */
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 0, 0, 0.50);
}

/*
 * Consolidated hero body text rule. line-height set to 1.9 to give the
 * per-line highlight strips a bit of breathing space without feeling
 * loose. Em-based highlight padding (below) is calculated against this.
 */
.k4-landing-hero-text {
    font-size: 17px;
    line-height: 1.9;
    color: #f0f0f0;
    margin: 0;
}

/*
 * Per-line dark highlight behind the hero body text paragraph.
 * Same em-based technique as .k4-landing-h1-highlight so it scales
 * cleanly with any responsive font-size override.
 *
 *   Empirically determined value for Poppins at body text size: 0.24em.
 *   Same principle as h1-highlight — theoretical value overshoots because
 *   of how browsers paint ascenders/descenders beyond the em-box.
 */
.k4-landing-text-highlight {
    display: inline;
    background: rgba(0, 0, 0, 0.50);
    padding: 0.24em 14px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/*
 * Hero tick-points list — punchy gold-accent pills on dark glass backdrop.
 * Replaces the older body-text paragraph. Designed to read clearly against
 * the hero kitchen photo background. 2-column grid on desktop, single
 * column on narrow screens.
 */
.k4-hero-ticks {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 14px;
}

.k4-hero-ticks li {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.55);
    /*
     * backdrop-filter softens the photo behind each pill — increases
     * text legibility on busy areas of the kitchen image. Falls back
     * gracefully on browsers that don't support it.
     */
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-left: 4px solid #f3af2e;
    border-radius: 8px;
    padding: 13px 18px 13px 14px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    /* Subtle drop shadow lifts the pill off the photo */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/*
 * Gold circle tick mark — same SVG technique as the CTA trust row so
 * the brand language is consistent across the page.
 */
.k4-hero-ticks li::before {
    content: '';
    flex-shrink: 0;
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f3af2e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
}

/*
 * Centre the list inside the full-width video-layout bottom row,
 * capped so very long lines don't stretch awkwardly across the screen.
 */
.k4-landing-hero-bottom .k4-hero-ticks {
    max-width: 760px;
    margin: 0 auto 20px;
}

/* Small reassurance line below hero body text */
.k4-landing-hero-trust {
    font-size: 14px;
    color: #f3af2e;
    letter-spacing: 0.3px;
    margin: 0 0 20px;
}

/*
 * Full-width bottom block that holds the trust line and CTA buttons.
 * Lives outside .k4-landing-hero-inner (which is max-width: 820px and
 * left-aligned) so it can stretch the full container width and truly
 * centre its contents regardless of the text block width above.
 */
.k4-landing-hero-bottom {
    margin-top: 36px;
    text-align: center;
}

.k4-landing-hero-bottom .k4-landing-buttons {
    justify-content: center;
    margin-top: 0;
}

/*
 * Gold arrow pointing at the secondary CTA button from the right.
 * Desktop only (min-width: 992px) — no space at smaller widths.
 *
 * The ::after is on the secondary button itself so position is always
 * relative to that button, regardless of hero layout variant.
 *
 * SVG design (viewBox 0 0 100 110):
 *   Body   — single cubic bezier: starts upper-right (90,12), control
 *            points (98,45) and (55,82) create a simple downward sweep
 *            (no loop), tip lands at (15,90).
 *   Barb 1 — M 15 90 L 27 72  (back along the arrow, going up-right)
 *   Barb 2 — M 15 90 L 33 102 (opposite barb, going down-right)
 *
 *   The two separate barbs form a clear V/arrowhead at the tip. They are
 *   drawn as individual <path> elements rather than a connected polyline
 *   so there is no join artefact at the tip.
 *
 * Positioning:
 *   right: -114px → SVG left sits ~19px clear of button right edge
 *   top:   -58px  → arrow start is ~46px above the button, tip aligns
 *                   with the vertical centre of the button (~26px from top)
 */
@media (min-width: 992px) {
    .k4-landing-hero-bottom .k4-landing-btn-secondary {
        position: relative;
    }

    .k4-landing-hero-bottom .k4-landing-btn-secondary::after {
        content: '';
        position: absolute;
        right: -114px;
        top: -58px;
        width: 95px;
        height: 105px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' fill='none'%3E%3Cpath d='M 90 12 C 98 45 55 82 15 90' stroke='%23f3af2e' stroke-width='3.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M 15 90 L 27 72' stroke='%23f3af2e' stroke-width='3.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M 15 90 L 33 102' stroke='%23f3af2e' stroke-width='3.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
        /* Ensure the arrow doesn't animate with the button's hover lift. */
        transition: transform 0.3s ease;
    }

    /*
     * The button moves up 2px on hover (transform: translateY(-2px)).
     * Counter that here so the arrow stays visually fixed in place.
     */
    .k4-landing-hero-bottom .k4-landing-btn-secondary:hover::after {
        transform: translateY(2px);
    }
}

/*
 * Two-column hero layout — active when a YouTube video URL is saved.
 * The H1 and subheading share a top row (.k4-landing-hero-top) with
 * the video. Body text, trust line, and CTAs span the full width below
 * (.k4-landing-hero-bottom) so nothing on the left is squeezed.
 */

/* Top row: headings left | video right */
.k4-landing-hero-top {
    display: flex;
    align-items: flex-start;
    gap: 50px;
    margin-bottom: 30px;
}

/* Heading column — grows to fill the space left of the video */
.k4-landing-hero-top .k4-landing-hero-inner {
    flex: 1 1 0;
    min-width: 0; /* Prevents flex children from overflowing */
    max-width: none; /* Override the 820 px cap; parent flex handles width */
}

/* Video column — fixed at 420 px; comfortable without overwhelming the headings */
.k4-landing-hero-video {
    flex: 0 0 420px;
    width: 420px;
}

/* 16:9 aspect-ratio wrapper using the padding-bottom trick for broad browser support */
.k4-landing-hero-video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16 ÷ 9 = 0.5625 */
    border-radius: 10px;
    overflow: hidden;
    /* Layered shadow gives the video a lifted, premium feel */
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Iframe fills its wrapper absolutely */
.k4-landing-hero-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Click-to-play facade ──
 * Shown until the visitor presses play, when JS swaps in the iframe.
 * Fills the 16:9 wrapper; the chosen thumbnail covers it with a play badge. */
.k4-hero-video-facade {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: #000;
    cursor: pointer;
    overflow: hidden;
}

.k4-hero-video-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* YouTube-style play badge, gold on interaction */
.k4-hero-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    z-index: 2;
    transition: transform 0.25s ease;
}

.k4-hero-video-play svg {
    display: block;
    width: 100%;
    height: 100%;
}

.k4-hero-video-play-bg {
    fill: #212121;
    fill-opacity: 0.85;
    transition: fill 0.25s ease, fill-opacity 0.25s ease;
}

.k4-hero-video-play-arrow {
    fill: #fff;
}

.k4-hero-video-facade:hover .k4-hero-video-thumb,
.k4-hero-video-facade:focus-visible .k4-hero-video-thumb {
    transform: scale(1.05);
}

.k4-hero-video-facade:hover .k4-hero-video-play,
.k4-hero-video-facade:focus-visible .k4-hero-video-play {
    transform: translate(-50%, -50%) scale(1.08);
}

.k4-hero-video-facade:hover .k4-hero-video-play-bg,
.k4-hero-video-facade:focus-visible .k4-hero-video-play-bg {
    fill: #f3af2e;
    fill-opacity: 1;
}

.k4-hero-video-facade:hover .k4-hero-video-play-arrow,
.k4-hero-video-facade:focus-visible .k4-hero-video-play-arrow {
    fill: #231f20;
}

.k4-hero-video-facade:focus-visible {
    outline: 3px solid #f3af2e;
    outline-offset: 2px;
}

/* Body text sits in the full-width bottom row; space it from the trust line / buttons below */
.k4-landing-hero-content--has-video .k4-landing-hero-text {
    margin-bottom: 20px;
}

/* Bottom row in video layout — no extra top margin; the hero-top margin-bottom provides it */
.k4-landing-hero-content--has-video .k4-landing-hero-bottom {
    margin-top: 0;
}

/* ═══════════════════════════════════════════
 * Hero "years established" badge.
 * An alternative to the video in the right-hand
 * hero slot: an inline-SVG gold seal (scalloped
 * edge + navy centre) with real text layered over.
 * Shares the two-column hero layout above.
 * ═══════════════════════════════════════════ */

/* Badge column — narrower than the video; the seal is centred within it */
.k4-landing-hero-badge {
    flex: 0 0 300px;
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The seal itself — fixed square; drop-shadow lifts it off the hero photo */
.k4-hero-badge {
    position: relative;
    width: 270px;
    height: 270px;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.45));
}

/* Custom uploaded badge — keep the width but let the image's own aspect
   ratio drive the height so non-square graphics aren't distorted. The
   drop-shadow inherited above hugs a transparent PNG's outline. */
.k4-hero-badge--image {
    height: auto;
}

.k4-hero-badge--image img {
    display: block;
    width: 70%;          /* smaller than the slot — reads better at this scale */
    height: auto;
    margin: 0 auto;      /* keep it centred within the slot */
}

.k4-hero-badge-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Text overlay, centred over the navy core of the seal */
.k4-hero-badge-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "Poppins", sans-serif;
    color: #f3af2e;
    line-height: 1;
    pointer-events: none; /* clicks pass through; badge is non-interactive */
}

.k4-hero-badge-years {
    font-size: 66px;
    font-weight: 800;
    letter-spacing: -1px;
}

.k4-hero-badge-label {
    margin-top: 5px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* Thin gold rule separating the years block from the established line */
.k4-hero-badge-divider {
    width: 62px;
    height: 2px;
    margin: 9px 0 7px;
    background: #f3af2e;
    opacity: 0.75;
}

.k4-hero-badge-est {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.k4-hero-badge-stars {
    margin-top: 5px;
    font-size: 11px;
    letter-spacing: 3px;
}

/* ═══════════════════════════════════════════
   2. Trust bar
   Bold pill-badge layout on a pure white strip. Background must stay
   white because the CSS chevron arrow above uses the same colour to
   visually "cut" upward into the dark hero section.
   homepage.css is not loaded here so rules are kept in this file.
   ═══════════════════════════════════════════ */

.trust-strip {
    position: relative;
    background: #ffffff;
    padding: 22px 0 20px;
    margin: 0;
    /*
     * Downward shadow separates the strip from the section below and
     * gives it a sense of elevation — reinforcing it as an important
     * section rather than an afterthought.
     */
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    z-index: 5;
}

/*
 * Upward-pointing chevron arrow at the top of the trust bar.
 * Significantly enlarged so the visual cue is unmissable — it draws the
 * eye from the hero CTA buttons down into the trust credentials.
 * Uses the strip's own background colour so it appears to punch up into
 * the hero photo seamlessly. translateY(-100%) lifts it above the strip.
 * The trust-strip renders on top of the hero (later in the DOM) so this
 * overlap is safe and intentional.
 */
.trust-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    width: 0;
    height: 0;
    /* 54 px wide × 17 px tall — reduced by a further 50% from the
       previous 110×34 wedge for a more subtle, refined visual cue. */
    border-left: 27px solid transparent;
    border-right: 27px solid transparent;
    border-bottom: 17px solid #ffffff;
    z-index: 10;
}

.trust-strip__container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 18px;
    padding: 0 24px;
}

/*
 * Each trust item is rendered as a gold-bordered pill badge.
 * The gold outline gives each credential visual authority and ties
 * into the brand accent colour without requiring a coloured background.
 * A subtle ambient shadow adds a gentle tactile quality.
 */
.trust-strip__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    border: 2px solid #f3af2e;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(243, 175, 46, 0.18);
    white-space: nowrap;
}

.trust-strip__icon {
    color: #f3af2e;
    font-size: 20px;
    flex-shrink: 0;
}

/* Image icon variant — sized to match the larger FA icon. */
.trust-strip__icon--img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}

.trust-strip__text {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #231f20;
}

/* ═══════════════════════════════════════════
   Section 2b: What Sets Us Apart
   Dark-background feature-point grid sitting
   directly below the trust strip.  Uses the
   same #1a1a1a as the reviews carousel so the
   two dark sections frame the lighter content
   between them.
   ═══════════════════════════════════════════ */

.k4-landing-differentiators {
    background: #1a1a1a;
    padding: 70px 0;
}

/*
 * Section heading — white, centred, with a short
 * gold rule below to anchor it visually.
 */
.k4-diff-heading {
    font-family: "Poppins", sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    margin: 0 0 48px;
    line-height: 1.25;
}

.k4-diff-heading::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: #f3af2e;
    border-radius: 2px;
    margin: 14px auto 0;
}

/*
 * 3-column card grid on desktop.
 * Gaps and column counts are adjusted at each
 * responsive breakpoint below.
 */
.k4-diff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/*
 * Each feature card — dark card on dark background.
 * Gold top border is the primary accent and the
 * first thing the eye lands on when scanning.
 * A hover lift reinforces that the cards are
 * interactive / noteworthy content.
 */
.k4-diff-item {
    background: #2a2a2a;
    border-radius: 12px;
    border-top: 3px solid #f3af2e;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.k4-diff-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(243, 175, 46, 0.12);
}

/* Gold circle containing the Font Awesome icon */
.k4-diff-icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f3af2e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.k4-diff-icon-wrap i {
    font-size: 20px;
    color: #1a1a1a;
    line-height: 1;
}

/* Feature heading */
.k4-diff-title {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 7px;
    line-height: 1.35;
}

/* Supporting sentence */
.k4-diff-body {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #aaaaaa;
    margin: 0;
}

/* ─────────────────────────────────────────────
   Video-centre layout  (used when a YouTube URL
   is saved on the page).

   Three named grid areas side by side on desktop:
     [features-left]  [video]  [features-right]
   The video column is fixed at 460 px max; the
   feature columns share the remaining space equally.
   ───────────────────────────────────────────── */
.k4-diff-layout {
    display: grid;
    grid-template-columns: 1fr minmax(0, 460px) 1fr;
    grid-template-areas: "left video right";
    gap: 44px;
    align-items: center;
}

.k4-diff-features--left  { grid-area: left;  }
.k4-diff-features--right { grid-area: right; }
.k4-diff-video           { grid-area: video; }

/* Each side column stacks its items vertically */
.k4-diff-features {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/*
 * Within the video layout the feature items become
 * compact horizontal rows (icon left, text right) —
 * no card chrome, just a slim gold left-border accent.
 * The overrides below replace the card defaults.
 */
.k4-diff-layout .k4-diff-item {
    background: none;
    border-top: none;
    border-radius: 0;
    padding: 0 0 0 18px;
    border-left: 3px solid #f3af2e;
    flex-direction: row;
    gap: 14px;
    transition: none;
}

.k4-diff-layout .k4-diff-item:hover {
    transform: none;
    box-shadow: none;
}

/* Smaller icon circle in the compact layout */
.k4-diff-layout .k4-diff-icon-wrap {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.k4-diff-layout .k4-diff-icon-wrap i {
    font-size: 17px;
}

/* Text block fills remaining width */
.k4-diff-layout .k4-diff-text {
    flex: 1;
    min-width: 0;
}

.k4-diff-layout .k4-diff-title {
    font-size: 15px;
    margin-bottom: 5px;
}

.k4-diff-layout .k4-diff-body {
    font-size: 13px;
}

/*
 * YouTube embed — 16:9 aspect ratio via the
 * padding-bottom trick; border-radius clips the
 * iframe corners cleanly.
 */
.k4-diff-video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.55);
}

.k4-diff-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ═══════════════════════════════════════════
   Generic card grid (used by several sections)
   ═══════════════════════════════════════════ */

.k4-landing-grid {
    display: grid;
    gap: 28px;
}

.k4-landing-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.k4-landing-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.k4-landing-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 30px 26px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.k4-landing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}

.k4-landing-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f3af2e;
    color: #231f20;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
}

.k4-landing-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: #231f20;
    margin: 0 0 10px;
}

.k4-landing-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

/* ═══════════════════════════════════════════
   3. Intro
   ═══════════════════════════════════════════ */

.k4-landing-intro-inner {
    max-width: 840px;
    margin: 0 auto;
    text-align: center;
}

.k4-landing-intro-inner h2 {
    font-size: 34px;
    font-weight: 800;
    color: #231f20;
    margin: 0 0 20px;
}

.k4-landing-intro-inner p {
    margin: 0 0 16px;
}

/* ═══════════════════════════════════════════
   5. Services list
   ═══════════════════════════════════════════ */

/* Two-column grouped service cards — communicates full project scope */
.k4-landing-service-groups {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-bottom: 36px;
}

.k4-landing-service-group {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-top: 4px solid #f3af2e;
    border-radius: 10px;
    overflow: hidden;
}

/* Group header: dark band with icon and heading */
.k4-landing-service-group__header {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #231f20;
    padding: 20px 24px;
}

/* SVG icon badge — color: #f3af2e makes fill="currentColor" resolve to gold */
.k4-landing-service-group__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(243, 175, 46, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #f3af2e;
}

.k4-landing-service-group__icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.k4-landing-service-group__header h3 {
    font-family: "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

/* Service item list within the card */
.k4-landing-service-group__list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.k4-landing-service-group__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 24px;
    border-bottom: 1px solid #f5f5f5;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.k4-landing-service-group__list li:last-child {
    border-bottom: none;
}

.k4-landing-service-group__list li i {
    color: #f3af2e;
    font-size: 13px;
    flex-shrink: 0;
}

.k4-landing-services-note {
    text-align: center;
    font-size: 16px;
    color: #555;
    max-width: 720px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════
   6. Process / Journey
   ═══════════════════════════════════════════ */

/* Dark background — visually separates this section from the
   surrounding light sections and gives the yellow accents impact */
.k4-landing-section--process {
    background: #231f20;
}

/* Invert the section heading text for the dark background */
.k4-landing-section--process .k4-landing-section-head h2 {
    color: #fff;
}

.k4-landing-section--process .k4-landing-section-head p {
    color: rgba(255, 255, 255, 0.65);
}

/* Five-step horizontal journey container.
   The ::before pseudo-element draws a single golden line that runs
   from the centre of the first bubble to the centre of the last.
   10% = half the width of one equal flex child (100% / 5 / 2). */
.k4-landing-journey {
    display: flex;
    gap: 0;
    margin-bottom: 48px;
    position: relative;
}

.k4-landing-journey::before {
    content: '';
    position: absolute;
    top: 29px; /* vertical centre of the 58 px bubble */
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(
        to right,
        rgba(243, 175, 46, 0.15),
        rgba(243, 175, 46, 0.55) 20%,
        rgba(243, 175, 46, 0.55) 80%,
        rgba(243, 175, 46, 0.15)
    );
    z-index: 0;
}

/* ── Each step ──────────────────────────────────────────────────── */
.k4-landing-journey-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 8px;
}

/* ── Numbered bubble ────────────────────────────────────────────── */
.k4-landing-journey-node {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #f3af2e;
    color: #231f20;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    flex-shrink: 0;
    position: relative;
    z-index: 1; /* sits above the connecting line */
    box-shadow:
        0 0 0 4px rgba(243, 175, 46, 0.18),
        0 6px 20px rgba(243, 175, 46, 0.28);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* ── White card below the bubble ───────────────────────────────── */
.k4-landing-journey-card {
    background: #fff;
    border-radius: 14px;
    padding: 26px 18px 22px;
    text-align: center;
    width: 100%;
    flex: 1;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Kitchen-door SVG icon inside each card.
   fill="currentColor" in the SVG means 'color' drives the render colour. */
.k4-landing-journey-icon {
    display: block;
    width: 36px;
    height: 36px;
    color: #f3af2e;
    flex-shrink: 0;
}

.k4-landing-journey-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.k4-landing-journey-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: #231f20;
    margin: 0;
    line-height: 1.35;
}

.k4-landing-journey-card p {
    font-size: 13px;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

/* Hover: lift the card and brighten the bubble */
.k4-landing-journey-step:hover .k4-landing-journey-card {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.k4-landing-journey-step:hover .k4-landing-journey-node {
    transform: scale(1.08);
    box-shadow:
        0 0 0 6px rgba(243, 175, 46, 0.28),
        0 8px 26px rgba(243, 175, 46, 0.38);
}

/* ═══════════════════════════════════════════
   7. Pricing cards
   ═══════════════════════════════════════════ */

.k4-landing-price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 30px;
}

/* Cards are <a> elements — reset link styles so they look like cards */
.k4-landing-price-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 2px solid #ececec;
    border-radius: 12px;
    padding: 34px 26px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.k4-landing-price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
}

/* Middle / featured pricing card */
.k4-landing-price-card--featured {
    border-color: #f3af2e;
}

.k4-landing-price-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #231f20;
    margin: 0 0 14px;
    min-height: 48px;
}

.k4-landing-price-amount {
    font-size: 30px;
    font-weight: 800;
    color: #f3af2e;
    display: block;
}

.k4-landing-price-from {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 4px;
}

/* Subtle call-to-action line that appears at the bottom of each card */
.k4-landing-price-cta {
    display: block;
    margin-top: auto;
    padding-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #f3af2e;
    letter-spacing: 0.3px;
}

.k4-landing-price-note {
    background: #fff8e9;
    border-left: 4px solid #f3af2e;
    padding: 18px 22px;
    border-radius: 6px;
    font-size: 15px;
    color: #555;
    margin: 0 auto 26px;
    max-width: 820px;
}

/* ═══════════════════════════════════════════
   8. Local area
   ═══════════════════════════════════════════ */

.k4-landing-areas {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.k4-landing-areas li {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 50px;
    padding: 9px 22px;
    font-weight: 600;
    font-size: 15px;
    color: #231f20;
}

.k4-landing-areas li i {
    color: #f3af2e;
    margin-right: 7px;
    font-size: 13px;
}

.k4-landing-areas-note {
    text-align: center;
    font-size: 15px;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════
   8. Local Area – map background
   The map image is applied via a ::before pseudo-element so the
   CSS filter (greyscale + very low opacity) touches the image only
   and has zero effect on the section content above it.
   The image URL is injected as the CSS custom property --k4-map-bg
   from PHP, keeping the path portable across environments.
   ═══════════════════════════════════════════ */

.k4-landing-section--map-bg {
    position: relative;
    background: #f9f9f9; /* visible fallback if the image file is missing */
}

/* Map layer — sits beneath all section content */
.k4-landing-section--map-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var( --k4-map-bg );
    background-size: cover;
    /* Position Canterbury towards the centre of the visible area */
    background-position: center 42%;
    /* Greyscale removes distracting colour; 0.13 opacity keeps it as a
       subtle watermark without competing with the content */
    filter: grayscale(100%) opacity(0.13);
    pointer-events: none;
    z-index: 0;
}

/* All direct children that carry content must sit above the map layer */
.k4-landing-section--map-bg > .k4-landing-container {
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════
   9. Gallery
   ═══════════════════════════════════════════ */

.k4-landing-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.k4-landing-gallery-item {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    background: #fff;
}

.k4-landing-gallery-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

/* Placeholder block shown when no real image is supplied */
.k4-landing-gallery-placeholder {
    width: 100%;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #231f20;
    color: #f3af2e;
    font-size: 40px;
}

.k4-landing-gallery-caption {
    padding: 16px 18px;
    font-weight: 600;
    font-size: 15px;
    color: #231f20;
    text-align: center;
}


/* ═══════════════════════════════════════════
   11. FAQ
   Single-column accordion with warm background, badge pill,
   decorative rule, and a yellow left-border open state.
   Reuses the theme's k4-faq-* accordion behaviour.
   ═══════════════════════════════════════════ */

/* Warm off-white background separates this section from plain white neighbours */
.k4-landing-section--faq {
    background: #f8f6f2;
}

/* Yellow pill badge displayed above the section heading */
.k4-landing-badge {
    display: inline-block;
    background: #f3af2e;
    color: #231f20;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 14px;
}

/* Short golden rule rendered as an inline element between heading and subtitle */
.k4-landing-section-rule {
    display: block;
    width: 48px;
    height: 3px;
    background: #f3af2e;
    border-radius: 2px;
    margin: 0 auto 20px;
}

/* Accordion container — centred with comfortable reading width */
.k4-landing-faq {
    max-width: 860px;
    margin: 0 auto;
}

/* Each FAQ item starts with a transparent left border that becomes yellow on open */
.k4-landing-faq .k4-faq-item {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-left: 3px solid transparent;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-left-color 0.25s ease, box-shadow 0.25s ease;
}

/* Open state: yellow left accent, lifted shadow */
.k4-landing-faq .k4-faq-item:has(.k4-faq-question[aria-expanded="true"]) {
    border-left-color: #f3af2e;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.k4-landing-faq .k4-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 22px 26px;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #231f20;
    gap: 16px;
}

.k4-landing-faq .k4-faq-question:hover {
    color: #e2a027;
}

.k4-landing-faq .k4-faq-question:focus-visible {
    outline: 2px solid #f3af2e;
    outline-offset: -2px;
}

.k4-landing-faq .k4-faq-icon {
    flex-shrink: 0;
    color: #f3af2e;
    transition: transform 0.3s ease;
}

.k4-landing-faq .k4-faq-question[aria-expanded="true"] .k4-faq-icon {
    transform: rotate(45deg);
}

.k4-landing-faq .k4-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

/* Subtle warm tint behind the expanded answer text */
.k4-landing-faq .k4-faq-answer-content {
    padding: 0 26px 24px;
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    background: rgba(243, 175, 46, 0.04);
}

/* ═══════════════════════════════════════════
   12. Final CTA
   ═══════════════════════════════════════════ */

/*
 * Final CTA — light section sitting immediately after the dark reviews
 * carousel.  Pure white background gives maximum contrast; a gold top
 * border bridges the transition visually.  A radial gradient wash
 * spreads soft brand warmth across the upper half of the section.
 */
.k4-landing-final-cta {
    background: #ffffff;
    text-align: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    /* Gold stripe: visual bridge from the dark carousel above */
    border-top: 4px solid #f3af2e;
}

/*
 * Radial gold wash — emanates from the top-centre, fades to white.
 * This warms the white background and ties it to the brand palette
 * without competing with the content.
 */
.k4-landing-final-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 65%;
    background: radial-gradient(ellipse at 50% 0%, rgba(243, 175, 46, 0.08) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

/*
 * Small gold overline label — "YOUR NEXT STEP".
 * Sets context and gives the heading more visual hierarchy.
 */
.k4-cta-overline {
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #f3af2e;
    margin: 0 0 14px;
}

.k4-landing-final-cta h2 {
    font-size: 40px;
    font-weight: 800;
    color: #231f20;
    margin: 0 0 14px;
    line-height: 1.18;
}

/*
 * Short gold rule beneath the heading — visually anchors it and
 * creates separation before the paragraph.
 */
.k4-landing-final-cta h2::after {
    content: '';
    display: block;
    width: 52px;
    height: 3px;
    background: #f3af2e;
    border-radius: 2px;
    margin: 16px auto 0;
}

.k4-landing-final-cta p {
    font-size: 17px;
    color: #555;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
}

/*
 * On a light background the secondary button (normally white-outline
 * for dark sections) would be invisible.  Override it here to use the
 * dark-outline variant without changing the template class.
 */
.k4-landing-final-cta .k4-landing-btn-secondary {
    color: #231f20;
    border-color: #231f20;
}

.k4-landing-final-cta .k4-landing-btn-secondary:hover {
    background: #231f20;
    color: #ffffff;
}

/*
 * Micro-trust row — three short reassurances below the buttons.
 * Gold tick pseudo-element on each item.  Wraps gracefully on mobile.
 */
.k4-cta-trust-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 28px;
    margin-top: 22px;
}

.k4-cta-trust-row span {
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 6px;
}

.k4-cta-trust-row span::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f3af2e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/*
 * Hand-drawn arrow on the CTA secondary button — desktop only.
 * Same SVG and counter-lift technique as the hero section arrow.
 * Scoped to the final CTA so it doesn't affect secondary buttons elsewhere.
 * Positioning: the arrow curves in from the right and points left towards
 * the button. right: -114px keeps the left edge ~19px clear of the button;
 * top: -58px places the start of the curve above and to the right.
 * On hover the button lifts 2px; translateY(2px) on the ::after cancels
 * that so the arrow appears stationary.
 */
@media (min-width: 992px) {
    .k4-landing-final-cta .k4-landing-btn-secondary {
        position: relative;
    }

    .k4-landing-final-cta .k4-landing-btn-secondary::after {
        content: '';
        position: absolute;
        right: -114px;
        top: -58px;
        width: 95px;
        height: 105px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' fill='none'%3E%3Cpath d='M 90 12 C 98 45 55 82 15 90' stroke='%23f3af2e' stroke-width='3.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M 15 90 L 27 72' stroke='%23f3af2e' stroke-width='3.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M 15 90 L 33 102' stroke='%23f3af2e' stroke-width='3.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
        transition: transform 0.3s ease;
    }

    .k4-landing-final-cta .k4-landing-btn-secondary:hover::after {
        transform: translateY(2px);
    }
}

/* Ensure main content floats above the gradient and icon layers */
.k4-landing-final-cta .k4-landing-container {
    position: relative;
    z-index: 1;
}

/* ── Decorative background icons ────────────────────────────────────
   Same kitchen SVG icons as before but at higher opacity — on white
   they need more presence to read at all.  The mid-field icons remain
   slightly more faded to preserve the depth effect.                  */
.k4-landing-cta-bg-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.k4-landing-cta-icon {
    position: absolute;
    display: block;
    /* Gold on white — raised from 0.065 to be actually visible */
    color: rgba(243, 175, 46, 0.16);
}

.k4-landing-cta-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Individual icon positions ──────────────────────────────────────
   12 instances across 6 icon types. Sizes are roughly 50% of the
   original six. Two passes (-1 and -2) of each type are scattered at
   different corners, edges and mid-field positions so the decoration
   feels organic rather than grid-like. Icons that bleed off the edge
   create depth without crowding the central content.                 */

/* ── First pass: corners and edges ─────────────────────────────── */

/* Cabinet — top-left, leaning left */
.k4-landing-cta-icon--cabinet-1 {
    width: 105px;
    height: 105px;
    top: -28px;
    left: -15px;
    transform: rotate(-22deg);
}

/* Stove — top-right, tilted right */
.k4-landing-cta-icon--stove-1 {
    width: 78px;
    height: 78px;
    top: -9px;
    right: 3%;
    transform: rotate(19deg);
}

/* Table — bottom-left, angled outward */
.k4-landing-cta-icon--table-1 {
    width: 88px;
    height: 88px;
    bottom: -22px;
    left: 7%;
    transform: rotate(24deg);
}

/* Kitchen layout — bottom-right corner */
.k4-landing-cta-icon--kitchens-1 {
    width: 113px;
    height: 113px;
    bottom: -28px;
    right: -11px;
    transform: rotate(-17deg);
}

/* Appliances — mid-left, steeply rotated */
.k4-landing-cta-icon--appliances-1 {
    width: 53px;
    height: 53px;
    top: 36%;
    left: 17%;
    transform: rotate(38deg);
    color: rgba(243, 175, 46, 0.10); /* slightly more faded — middle-depth */
}

/* Overhead layout — mid-right, counter-rotated */
.k4-landing-cta-icon--layout-1 {
    width: 68px;
    height: 68px;
    top: 18%;
    right: 17%;
    transform: rotate(-32deg);
    color: rgba(243, 175, 46, 0.10);
}

/* ── Second pass: fill midfield gaps ───────────────────────────── */

/* Cabinet — bottom-centre-left, angled right */
.k4-landing-cta-icon--cabinet-2 {
    width: 90px;
    height: 90px;
    bottom: 8%;
    left: 32%;
    transform: rotate(28deg);
    color: rgba(243, 175, 46, 0.11);
}

/* Stove — upper-centre, slight tilt */
.k4-landing-cta-icon--stove-2 {
    width: 68px;
    height: 68px;
    top: 10%;
    left: 40%;
    transform: rotate(-14deg);
    color: rgba(243, 175, 46, 0.11);
}

/* Layout — top-left mid-field, steep angle */
.k4-landing-cta-icon--layout-2 {
    width: 58px;
    height: 58px;
    top: 18%;
    left: 6%;
    transform: rotate(44deg);
    color: rgba(243, 175, 46, 0.09);
}

/* Table — bottom-right mid-field */
.k4-landing-cta-icon--table-2 {
    width: 75px;
    height: 75px;
    bottom: 14%;
    right: 18%;
    transform: rotate(-35deg);
    color: rgba(243, 175, 46, 0.10);
}

/* Appliances — right-edge mid-height */
.k4-landing-cta-icon--appliances-2 {
    width: 60px;
    height: 60px;
    top: 42%;
    right: 6%;
    transform: rotate(15deg);
    color: rgba(243, 175, 46, 0.09);
}

/* Kitchens — bottom-centre, almost flat */
.k4-landing-cta-icon--kitchens-2 {
    width: 88px;
    height: 88px;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%) rotate(8deg);
    color: rgba(243, 175, 46, 0.10);
}


/* ═══════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════ */

@media (max-width: 991px) {
    /* Stack the top row on tablets — video drops below the headings */
    .k4-landing-hero-top {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 20px;
    }

    /* Let the video expand to full container width when stacked */
    .k4-landing-hero-video {
        flex: 0 0 auto;
        width: 100%;
        max-width: 560px; /* Cap to a comfortable viewing width */
        margin: 0 auto;
    }

    /* Badge drops below the headings and centres when stacked */
    .k4-landing-hero-badge {
        flex: 0 0 auto;
        width: 100%;
        margin: 0 auto;
    }

    /* Hide low-priority trust items on tablets */
    .trust-strip__item--low {
        display: none;
    }

    /* Scale arrow down proportionally — half the previous tablet size */
    .trust-strip::before {
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 25px solid #ffffff;
    }

    .trust-strip {
        padding: 28px 0 26px;
    }

    .trust-strip__item {
        padding: 9px 18px;
    }

    .trust-strip__container {
        gap: 12px 14px;
    }

    .trust-strip__text {
        font-size: 14px;
    }

    .trust-strip__icon {
        font-size: 17px;
    }

    /* Card grid (no-video fallback): 2 columns on tablets */
    .k4-diff-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /*
     * Video layout: video spans full width at the top, the two
     * feature columns sit side by side beneath it.
     */
    .k4-diff-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "video video"
            "left  right";
        gap: 28px;
    }

    .k4-landing-grid--3,
    .k4-landing-price-grid,
    .k4-landing-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Journey: switch to a vertical timeline at tablet widths.
       The connecting pseudo-element on each step is changed from a
       horizontal bar (desktop) to a vertical bar running down between
       consecutive step bubbles. */
    .k4-landing-journey {
        flex-direction: column;
        gap: 0;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Hide the desktop horizontal line (drawn on the parent) */
    .k4-landing-journey::before {
        display: none;
    }

    /* Each step becomes a horizontal row: bubble left, card right */
    .k4-landing-journey-step {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
        padding: 0 0 20px;
        position: relative;
    }

    /* Vertical connector from bottom of one bubble to top of the next */
    .k4-landing-journey-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 58px;       /* sits directly below the 58px bubble */
        left: 37px;      /* horizontal centre of bubble (8px step padding + 29px radius) */
        right: auto;
        width: 2px;
        bottom: 0;       /* reaches to the bottom of the step's padding */
        height: auto;
        background: linear-gradient(
            to bottom,
            rgba(243, 175, 46, 0.5),
            rgba(243, 175, 46, 0.1)
        );
    }

    .k4-landing-journey-node {
        flex-shrink: 0;
    }

    /* Left-align text in the horizontal card layout */
    .k4-landing-journey-card {
        align-items: flex-start;
        text-align: left;
        padding: 18px 20px;
        flex: 1;
    }

    .k4-landing-hero h1 {
        font-size: 38px;
    }

    /* Final CTA heading: step down from 40px at mid-widths */
    .k4-landing-final-cta h2 {
        font-size: 34px;
    }
}

@media (max-width: 768px) {
    /* Hide medium and low priority trust items on small tablets */
    .trust-strip__item--medium,
    .trust-strip__item--low {
        display: none;
    }

    .trust-strip::before {
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 19px solid #ffffff;
    }

    .trust-strip {
        padding: 24px 0 22px;
    }

    .trust-strip__item {
        padding: 8px 16px;
    }

    .trust-strip__container {
        gap: 10px 12px;
    }

    .trust-strip__text {
        font-size: 13px;
    }
}

@media (max-width: 600px) {
    /* Further reduce trust strip on mobile */
    .trust-strip::before {
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 13px solid #ffffff;
    }

    /* Scale the years badge down on small phones so it never dominates */
    .k4-hero-badge {
        width: 220px;
        height: 220px;
    }

    /* Custom image keeps its natural aspect ratio at this size too */
    .k4-hero-badge--image {
        height: auto;
    }

    .k4-hero-badge-years {
        font-size: 54px;
    }

    .k4-hero-badge-label,
    .k4-hero-badge-est {
        font-size: 14px;
    }

    .trust-strip {
        padding: 22px 0 18px;
    }

    .trust-strip__item {
        padding: 7px 14px;
    }

    .trust-strip__container {
        gap: 8px 10px;
        padding: 0 16px;
    }

    .trust-strip__text {
        font-size: 12px;
    }

    .trust-strip__icon {
        font-size: 15px;
    }

    /* Scale image icons to match the reduced FA icon size. */
    .trust-strip__icon--img {
        width: 15px;
        height: 15px;
    }

    /* Hero tick list — single column on small screens */
    .k4-hero-ticks {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .k4-hero-ticks li {
        font-size: 14px;
        padding: 11px 14px 11px 12px;
        gap: 10px;
    }

    .k4-hero-ticks li::before {
        width: 22px;
        height: 22px;
        background-size: 13px 13px;
    }

    /* Differentiators — single column on mobile */
    .k4-landing-differentiators {
        padding: 50px 0;
    }

    .k4-diff-heading {
        font-size: 26px;
        margin-bottom: 36px;
    }

    /* Card grid (no-video fallback): single column */
    .k4-diff-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Video layout: fully stacked on mobile */
    .k4-diff-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "video"
            "left"
            "right";
        gap: 24px;
    }

    /* Restore slightly larger text on single-column compact items */
    .k4-diff-layout .k4-diff-title {
        font-size: 15px;
    }

    .k4-landing-section {
        padding: 50px 0;
    }

    .k4-landing-hero {
        padding: 35px 0;
    }

    .k4-landing-hero h1 {
        font-size: 30px;
    }

    .k4-landing-hero-sub {
        font-size: 17px;
    }

    .k4-landing-section-head h2,
    .k4-landing-intro-inner h2 {
        font-size: 26px;
    }

    /* Final CTA starts at 40px on desktop; scale down more gradually */
    .k4-landing-final-cta h2 {
        font-size: 30px;
    }

    .k4-landing-grid--3,
    .k4-landing-grid--2,
    .k4-landing-price-grid,
    .k4-landing-gallery,
    .k4-landing-service-groups {
        grid-template-columns: 1fr;
    }

    /* Compact journey on small screens */
    .k4-landing-journey-step {
        gap: 14px;
    }

    .k4-landing-journey-card {
        padding: 14px 16px;
    }

    .k4-landing-journey-card h3 {
        font-size: 14px;
    }

    .k4-landing-journey-icon {
        width: 28px;
        height: 28px;
    }

    /* Buttons go full width and stack for easy tapping on mobile */
    .k4-landing-buttons {
        flex-direction: column;
    }

    .k4-landing-btn {
        width: 100%;
    }

    /* Scale down the corner CTA icons and hide mid-field ones on small screens */
    .k4-landing-cta-icon--cabinet-1  { width: 65px;  height: 65px;  }
    .k4-landing-cta-icon--stove-1    { width: 50px;  height: 50px;  }
    .k4-landing-cta-icon--table-1    { width: 55px;  height: 55px;  }
    .k4-landing-cta-icon--kitchens-1 { width: 70px;  height: 70px;  }
    .k4-landing-cta-icon--cabinet-2  { width: 56px;  height: 56px;  }
    .k4-landing-cta-icon--kitchens-2 { width: 55px;  height: 55px;  }
    /* Hide the small mid-field icons on mobile — too cluttered at narrow widths */
    .k4-landing-cta-icon--appliances-1,
    .k4-landing-cta-icon--appliances-2,
    .k4-landing-cta-icon--layout-1,
    .k4-landing-cta-icon--layout-2,
    .k4-landing-cta-icon--stove-2,
    .k4-landing-cta-icon--table-2 { display: none; }
}

/* ═══════════════════════════════════════════
   MINIMAL FOOTER (site-footer--minimal)
   Used on landing pages when "Minimal" footer style is selected.
   Three columns on desktop: logo | contact | checkatrade.
   Stacks vertically and centres on mobile.
   ═══════════════════════════════════════════ */

.site-footer--minimal {
    background: #231f20;
    color: #c8c2c2;
    font-family: "Poppins", sans-serif;
    font-size: 0.875rem;
}

/* ── Main row ── */
.footer-minimal-inner {
    display: flex;
    align-items: center;
    gap: 56px;
    padding: 52px 24px 44px;
}

/* ── Logo column ── */
.footer-minimal-logo {
    flex: 0 0 auto;
}

.footer-minimal-logo img {
    display: block;
    /* Invert the dark logo so it shows clearly on the dark footer background */
    filter: brightness(0) invert(1);
    height: 64px;
    width: auto;
}

/* ── Contact column ── */
.footer-minimal-contact {
    flex: 1 1 0;
    min-width: 0;
}

.footer-minimal-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-minimal-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    line-height: 1.45;
}

.footer-minimal-contact-list i {
    /* Gold icon to match brand colour */
    color: #f3af2e;
    font-size: 0.85rem;
    /* Nudge down 1 px so the icon sits on the cap-height of the text */
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.footer-minimal-contact-list a {
    color: #c8c2c2;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-minimal-contact-list a:hover,
.footer-minimal-contact-list a:focus-visible {
    color: #f3af2e;
    outline: none;
}

/* ── Checkatrade column ── */
.footer-minimal-checkatrade {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.footer-minimal-checkatrade img {
    display: block;
    height: 60px;
    width: auto;
    /* The checkatrade PNG has a transparent background — white tint for legibility */
    filter: brightness(0) invert(1);
    opacity: 0.90;
    transition: opacity 0.2s ease;
}

.footer-minimal-checkatrade a:hover .footer-minimal-checkatrade img,
.footer-minimal-checkatrade a:focus-visible img {
    opacity: 1;
}

/* ── Bottom copyright bar ── */
.footer-minimal-bar {
    background: #f3af2e;
}

.footer-minimal-bar .container {
    padding-top: 12px;
    padding-bottom: 12px;
}

.footer-minimal-copyright {
    margin: 0;
    font-size: 0.8rem;
    color: #231f20;
    text-align: center;
    font-family: "Poppins", sans-serif;
}

/* ── Responsive: tablet (≤900px) — shrink gap, reduce logo size ── */
@media (max-width: 900px) {
    .footer-minimal-inner {
        gap: 36px;
    }

    .footer-minimal-logo img {
        height: 52px;
    }

    .footer-minimal-checkatrade img {
        height: 50px;
    }
}

/* ── Responsive: mobile (≤640px) — stack vertically ── */
@media (max-width: 640px) {
    .footer-minimal-inner {
        flex-direction: column;
        align-items: center; /* Centre logo and Checkatrade badge */
        gap: 28px;
        padding: 40px 20px 36px;
    }

    /* The contact column stretches to full width so the list has room
       to left-align its items cleanly */
    .footer-minimal-contact {
        width: 100%;
    }

    /* Keep items left-aligned — centering icon+text pairs looks odd
       when values wrap (especially the address line) */
    .footer-minimal-contact-list {
        align-items: flex-start;
    }

    .footer-minimal-contact-list li {
        justify-content: flex-start;
    }
}