/*
Theme Name:   Demolition Masters
Theme URI:    https://www.demolitionmasters.com.au/
Author:       The Social Edit
Author URI:   https://www.thesocialedit.com.au/
Description:  The Demolition Masters site as a WordPress theme — a direct port of the hand-built design, including the award ribbon, the dark-mode toggle, the service/suburb page layouts, and the shop and bin-hire styling.
Version:      1.0.0
Requires PHP: 8.1
Requires at least: 6.5
Text Domain:  demolition-masters
Tags:         business, custom-menu, custom-logo, two-columns, right-sidebar
*/

/* ============================================================
   Demolition Masters - Main Stylesheet
   Design tokens and component styles for the entire site.
   ============================================================ */

:root {
    color-scheme: light;

    /* Dark palette */
    --ink:           #0a0a0a;
    --graphite:      #141414;
    --steel:         #1a1a1a;
    --ash:           #262626;
    --ash-2:         #383838;

    /* Light palette */
    --paper:         #ffffff;
    --bone:          #fafafa;
    --bone-2:        #f3f4f6;
    --mist:          #e7eaee;
    --mist-2:        #d1d5db;

    /* Accent */
    --green:         #016533;
    --green-bright:  #0d8546;
    --green-deep:    #013d22;
    --green-tint-d:  rgba(1,101,51,0.18);
    --green-tint-l:  rgba(1,101,51,0.08);

    /* Type colors */
    --ink-text:      #0b1220;
    --ink-muted:     #4b5563;
    --ink-faint:     #9ca3af;
    --paper-text:    #ffffff;
    --paper-muted:   #b0b0b0;
    --paper-faint:   #6b6b6b;

    /* Shadows */
    --shadow-soft:   0 8px 20px -8px rgba(15,23,42,0.12);
    --shadow-deep:   0 20px 40px -16px rgba(15,23,42,0.18);
    --shadow-glow:   0 14px 30px -10px rgba(1,101,51,0.45);
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*::selection { background: var(--green); color: #fff; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    color: var(--ink-text);
    background-color: var(--paper);
    font-weight: 400;
    line-height: 1.65;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink-text);
}
a { transition: color 0.25s ease; text-decoration: none; }
img { max-width: 100%; display: block; }
p { color: var(--ink-muted); }

/* Skip link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: var(--green);
    color: #fff;
    padding: 12px 18px;
    border-radius: 4px;
    z-index: 9999;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
}
.skip-link:focus { top: 12px; color: #fff; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.visually-hidden-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Display Titles & Eyebrows
   ============================================================ */
.display-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(2.6rem, 6vw, 4.8rem);
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin-bottom: 22px;
    color: inherit;
}
.display-title .lead { display: block; text-align: inherit; }
.display-title .accent { display: block; color: var(--green); text-align: inherit; }
.display-title.compact { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }

.on-dark .display-title .lead,
.display-title.on-dark .lead { color: #fff; }
.on-dark p { color: var(--paper-muted); }
.on-dark .display-title .accent,
.display-title.on-dark .accent { color: var(--green); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--green);
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin-bottom: 14px;
    white-space: nowrap;
}
.eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--green);
}

.section-pad { padding: 100px 0; position: relative; }
.section-head { margin-bottom: 60px; }
.section-lead { font-size: 16px; max-width: 640px; line-height: 1.7; }

/* ============================================================
   Buttons
   ============================================================ */
.btn-green {
    background: var(--green);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 14px 28px;
    border-radius: 4px;
    border: 2px solid var(--green);
    transition: all 0.25s ease;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.btn-green:hover {
    background: var(--green-deep);
    border-color: var(--green-deep);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow);
}

.btn-outline-light {
    background: transparent;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 14px 28px;
    border-radius: 4px;
    border: 2px solid var(--ash-2);
    transition: all 0.25s ease;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.btn-outline-light:hover { border-color: var(--green); color: var(--green); }

.btn-outline-dark {
    background: transparent;
    color: var(--ink-text);
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 14px 28px;
    border-radius: 4px;
    border: 2px solid var(--mist-2);
    transition: all 0.25s ease;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.btn-outline-dark:hover { border-color: var(--ink-text); background: var(--ink-text); color: #fff; }

/* ============================================================
   Top Bar (slim dark)
   ============================================================ */
.top-bar {
    background: var(--ink);
    color: var(--paper-muted);
    font-size: 12px;
    padding: 9px 0;
    font-weight: 500;
    border-bottom: 1px solid var(--ash);
}
.top-bar a {
    color: var(--paper-muted);
    margin-left: 22px;
    font-weight: 500;
}
.top-bar a:hover { color: #fff; }
.top-bar i { margin-right: 7px; color: var(--green); }
.top-bar .top-bar-divider {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: var(--ash-2);
    margin: 0 0 -1px 22px;
}

/* ============================================================
   Navbar (white, clean)
   ============================================================ */
.navbar {
    background: #ffffff;
    padding: 14px 0;
    border-bottom: 1px solid var(--mist);
    z-index: 1030;
}
.navbar-brand { display: inline-flex; align-items: center; gap: 14px; }
.navbar-brand img { height: 50px; display: block; width: auto; }
.brand-tagline {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--green);
    line-height: 1.2;
    padding-left: 14px;
    border-left: 2px solid var(--green);
    white-space: nowrap;
}
@media (max-width: 575px) {
    .brand-tagline { font-size: 9px; letter-spacing: 1.1px; padding-left: 10px; }
    .navbar-brand { gap: 10px; }
    .navbar-brand img { height: 42px; }
}
.nav-link {
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--ink-text) !important;
    text-transform: uppercase;
    margin: 0 14px;
    letter-spacing: 0.7px;
    transition: color 0.25s;
    position: relative;
    padding: 6px 0 !important;
}
.nav-link:hover { color: var(--green) !important; }
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.nav-link:hover::after { transform: scaleX(1); }
.navbar-toggler { border: none; box-shadow: none; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler i { color: var(--ink-text); }

/* ============================================================
   HERO - Split-screen
   ============================================================ */
.hero {
    background: var(--ink);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 88vh;
}
.hero-text-side {
    padding: 100px 50px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background: var(--ink);
}
.hero-text-inner {
    max-width: 600px;
    margin-left: auto;
    padding-right: 30px;
}
.hero-text-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(1,101,51,0.08), transparent 50%);
    pointer-events: none;
}
.hero-text-side > * { position: relative; z-index: 1; }
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--green);
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 22px;
}
.hero-eyebrow::before {
    content: '';
    width: 32px;
    height: 2px;
    background: var(--green);
}
.hero-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 7.6vw, 6rem);
    line-height: 0.88;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 26px;
    letter-spacing: 0.005em;
}
.hero-title .accent {
    color: var(--green);
    display: block;
}
.hero-text {
    color: #d0d0d0;
    font-size: 16px;
    margin-bottom: 36px;
    line-height: 1.65;
    max-width: 540px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-image-side {
    background-size: cover;
    background-position: 55% center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 400px;
}
.hero-image-side::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    background: var(--green);
}
.hero-image-tag {
    position: absolute;
    top: 32px;
    left: 32px;
    background: var(--green);
    color: #fff;
    padding: 10px 16px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 16px -4px rgba(0,0,0,0.3);
}
.hero-image-tag i { font-size: 12px; color: #fff; }

/* ============================================================
   Stats Ribbon
   ============================================================ */
.stats-ribbon {
    background: var(--paper);
    border-bottom: 1px solid var(--mist);
    padding: 50px 0;
}
.stats-ribbon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.stats-cell {
    padding: 0 30px;
    border-right: 1px solid var(--mist);
}
.stats-cell:last-child { border-right: none; }
.stats-cell:first-child { padding-left: 0; }
.stats-cell .num {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 4.5vw, 3.4rem);
    color: var(--green);
    line-height: 1;
    display: block;
    margin-bottom: 6px;
}
.stats-cell .label {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--ink-muted);
}

/* ============================================================
   SERVICES - Dark editorial rows
   ============================================================ */
.services {
    background: var(--ink);
    color: #fff;
}
.services .section-head {
    text-align: center;
    margin-bottom: 50px;
}
.services .eyebrow { color: var(--green); }
.services .section-lead {
    color: var(--paper-muted);
    margin: 0 auto;
}
.services .display-title { color: #fff; }

.service-rows { border-top: 1px solid var(--ash); }
.service-row {
    display: grid;
    grid-template-columns: 100px 1fr 280px;
    align-items: center;
    gap: 40px;
    padding: 40px 0;
    border-bottom: 1px solid var(--ash);
    position: relative;
    transition: padding 0.35s ease, background 0.35s ease;
}
.service-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--green);
    transition: width 0.35s ease;
}
.service-row:hover {
    padding-left: 32px;
    background: linear-gradient(90deg, rgba(1,101,51,0.04), transparent 60%);
}
.service-row:hover::before { width: 4px; }
.service-num {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: 4.4rem;
    color: var(--ash-2);
    line-height: 1;
    transition: color 0.35s ease;
}
.service-row:hover .service-num { color: var(--green); }
.service-content h3 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 8px;
    letter-spacing: 0.01em;
}
.service-content p {
    color: var(--paper-muted);
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 12px;
    max-width: 560px;
}
.service-link {
    color: var(--green);
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.25s, color 0.25s;
}
.service-link:hover { gap: 14px; color: var(--green-bright); }
.service-thumb {
    width: 100%;
    height: 130px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background: var(--graphite);
}
.service-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}
.service-row:hover .service-thumb img {
    transform: scale(1.04);
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
    background: var(--paper);
    position: relative;
}
.about-img-wrap {
    position: relative;
    padding: 30px 0 30px 30px;
}
.about-img-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 88%;
    height: 100%;
    background: var(--green);
    border-radius: 4px;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.10) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.10) 75%, transparent 75%);
    background-size: 14px 14px;
    z-index: 1;
}
.about-img-wrap img {
    position: relative;
    z-index: 2;
    border-radius: 4px;
    box-shadow: var(--shadow-deep);
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
}
.about-img-badge {
    position: absolute;
    bottom: 50px;
    right: -20px;
    background: var(--ink);
    color: #fff;
    padding: 22px 26px;
    border-radius: 4px;
    box-shadow: var(--shadow-deep);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 16px;
    border-left: 4px solid var(--green);
}
.about-img-badge .num {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: 2.6rem;
    color: var(--green);
    line-height: 1;
}
.about-img-badge .text {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    line-height: 1.3;
}

.about-content { padding-left: 30px; }
.about-content p {
    color: var(--ink-muted);
    font-size: 16px;
    line-height: 1.7;
}

.check-item {
    display: flex;
    align-items: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-text);
    margin-bottom: 12px;
}
.check-item i {
    color: var(--green);
    font-size: 14px;
    margin-right: 10px;
    background: var(--green-tint-l);
    border: 1px solid var(--green-tint-d);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 28px 0 32px;
}
.stat-tile {
    border: 1px solid var(--mist);
    border-radius: 4px;
    padding: 24px 22px;
    background: var(--paper);
    transition: all 0.25s;
}
.stat-tile:hover {
    border-color: var(--green);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}
.stat-tile.hero-tile {
    grid-column: 1 / -1;
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 32px 28px;
}
.stat-tile.hero-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.025) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.025) 50%, rgba(255,255,255,0.025) 75%, transparent 75%);
    background-size: 12px 12px;
    pointer-events: none;
}
.stat-tile .stat-num {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: 2.4rem;
    color: var(--green);
    line-height: 1;
    display: block;
    margin-bottom: 6px;
    position: relative;
}
.stat-tile.hero-tile .stat-num {
    color: var(--green);
    font-size: 3.2rem;
}
.stat-tile .stat-label {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--ink-muted);
    position: relative;
}
.stat-tile.hero-tile .stat-label {
    color: var(--paper-muted);
    font-size: 12px;
}

/* ============================================================
   PROCESS
   ============================================================ */
.process {
    background: var(--ink);
    color: #fff;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--ash);
    border-bottom: 1px solid var(--ash);
}
.process::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 20%, rgba(1,101,51,0.07), transparent 50%),
        radial-gradient(circle at 88% 80%, rgba(1,101,51,0.05), transparent 50%);
    pointer-events: none;
}
.process .container { position: relative; z-index: 1; }
.process .display-title { color: #fff; }
.process p { color: var(--paper-muted); }

.process-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 30px;
}
.process-timeline::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 7%;
    right: 7%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--ash-2) 8%, var(--ash-2) 92%, transparent 100%);
    z-index: 0;
}
.process-step {
    position: relative;
    padding-top: 80px;
}
.process-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 56px;
    background: var(--ink);
    border: 2px solid var(--green);
    border-radius: 50%;
    z-index: 1;
    transition: all 0.3s ease;
}
.process-step:hover::before {
    background: var(--green);
    box-shadow: 0 0 0 6px rgba(1,101,51,0.18);
}
.process-step .step-num {
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: 1.3rem;
    color: var(--green);
    z-index: 2;
    transition: color 0.3s ease;
}
.process-step:hover .step-num { color: #fff; }
.process-step h3 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: 1.45rem;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.01em;
}
.process-step p {
    font-size: 14px;
    color: var(--paper-muted);
    line-height: 1.65;
    margin: 0 auto;
    max-width: 250px;
}

/* ============================================================
   GALLERY (bento)
   ============================================================ */
.gallery { background: var(--bone); }
.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px;
    gap: 24px;
    flex-wrap: wrap;
}
.gallery-link {
    color: var(--ink-text);
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--ink-text);
    padding-bottom: 4px;
    letter-spacing: 0.8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}
.gallery-link:hover {
    color: var(--green);
    border-bottom-color: var(--green);
    gap: 14px;
}
.gallery-link i { transition: transform 0.25s ease; }

.bento {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: 230px 230px;
    gap: 16px;
}
.bento-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    display: block;
    background: var(--ink);
}
.bento-item.feature { grid-row: 1 / -1; }
.bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s ease;
}
.bento-item:hover img { transform: scale(1.06); }
.bento-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 22px;
    background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,0.92) 100%);
    color: #fff;
}
.bento-item.feature .bento-overlay { padding: 30px 32px; }
.bento-tag {
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--green-bright);
    margin-bottom: 6px;
}
.bento-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    letter-spacing: 0.01em;
}
.bento-item.feature .bento-title { font-size: 1.7rem; }
.bento-corner {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.92);
    color: var(--ink-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.bento-item:hover .bento-corner {
    opacity: 1;
    transform: scale(1);
    background: var(--green);
    color: #fff;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials {
    background: var(--paper);
    position: relative;
}
.testimonials .section-head {
    text-align: center;
    margin-bottom: 50px;
}
.testimonials .eyebrow { display: inline-flex; }

.quote-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.quote-card {
    background: var(--paper);
    border: 1px solid var(--mist);
    border-radius: 6px;
    padding: 38px 32px 32px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}
.quote-card::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    left: 26px;
    font-family: 'Big Shoulders Display', serif;
    font-size: 5rem;
    color: var(--green);
    line-height: 1;
    font-weight: 900;
}
.quote-card:hover {
    border-color: var(--green);
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
}
.quote-stars {
    color: var(--green);
    margin-bottom: 16px;
    font-size: 14px;
    letter-spacing: 3px;
}
.quote-text {
    font-size: 15px;
    color: var(--ink-text);
    line-height: 1.65;
    margin-bottom: 28px;
    font-style: italic;
    flex-grow: 1;
}
.quote-attribution {
    border-top: 1px solid var(--mist);
    padding-top: 18px;
}
.quote-author {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--ink-text);
    text-transform: uppercase;
    margin: 0 0 4px;
    letter-spacing: 0.02em;
}
.quote-meta {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================================
   CONTACT - split full-width
   ============================================================ */
.contact-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
}
.contact-info-side {
    background: var(--ink);
    color: #fff;
    padding: 90px 60px 90px 0;
    position: relative;
    overflow: hidden;
}
.contact-info-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 80% 20%, rgba(1,101,51,0.08), transparent 50%);
    pointer-events: none;
}
.contact-info-inner {
    max-width: 540px;
    margin-left: auto;
    padding-left: 30px;
    position: relative;
    z-index: 1;
}
.contact-info-side .display-title { color: #fff; }
.contact-info-side p { color: var(--paper-muted); }

.contact-row {
    display: flex;
    align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid var(--ash);
    transition: padding-left 0.25s;
}
.contact-row:hover { padding-left: 8px; }
.contact-row:last-of-type { border-bottom: none; }
.contact-row-icon {
    width: 46px;
    height: 46px;
    background: var(--green-tint-d);
    border: 1px solid var(--green-tint-d);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-right: 18px;
    font-size: 16px;
    flex-shrink: 0;
}
.contact-row-detail h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--paper-muted);
    margin: 0 0 6px;
}
.contact-row-detail a,
.contact-row-detail p {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 1.3rem;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0;
    transition: color 0.25s;
}
.contact-row-detail a:hover { color: var(--green); }
.contact-row-detail a.email-style {
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem;
    text-transform: none;
    font-weight: 600;
    color: var(--green);
    letter-spacing: 0;
}
.contact-row-detail a.email-style:hover { color: var(--green-bright); }

.hours-block {
    margin-top: 26px;
    padding: 20px 22px;
    background: var(--graphite);
    border: 1px solid var(--ash);
    border-left: 3px solid var(--green);
    border-radius: 4px;
}
.hours-block h6 {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--paper-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hours-block h6 i { color: var(--green); }
.hours-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: 13px;
    color: var(--paper-muted);
    border-bottom: 1px solid var(--ash);
}
.hours-row:last-child { border-bottom: none; }
.hours-row span:last-child { color: #fff; font-weight: 600; }
.hours-row.emergency span:last-child {
    color: var(--green);
    font-weight: 700;
}

.contact-form-side {
    background: var(--paper);
    padding: 90px 0 90px 60px;
}
.contact-form-inner {
    max-width: 580px;
    padding-right: 30px;
}
.contact-form-inner h3 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: var(--ink-text);
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.contact-form-inner .form-sub {
    font-size: 14px;
    color: var(--ink-muted);
    margin-bottom: 28px;
}
.form-control,
.form-select {
    background: var(--bone);
    border: 1px solid var(--mist);
    border-radius: 4px;
    padding: 13px 16px;
    font-size: 14px;
    color: var(--ink-text);
    transition: all 0.25s;
    font-family: 'Manrope', sans-serif;
}
.form-control::placeholder { color: var(--ink-faint); }
.form-select { color: var(--ink-faint); }
.form-select option {
    color: var(--ink-text);
    background: var(--paper);
}
.form-select[data-filled="true"] { color: var(--ink-text); }
.form-control:focus,
.form-select:focus {
    background: #fff;
    border-color: var(--green);
    box-shadow: 0 0 0 0.2rem rgba(1,101,51,0.12);
    color: var(--ink-text);
}
textarea.form-control {
    resize: vertical;
    min-height: 130px;
}
.form-note {
    font-size: 12px;
    color: var(--ink-faint);
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-note i { color: var(--green); }

/* ============================================================
   CTA STRIP
   ============================================================ */
.cta-strip {
    background: var(--green);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}
.cta-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(135deg, rgba(0,0,0,0.07) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.07) 50%, rgba(0,0,0,0.07) 75%, transparent 75%);
    background-size: 18px 18px;
    opacity: 0.5;
    pointer-events: none;
}
.cta-strip-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(4.5rem, 11vw, 9rem);
    line-height: 0.9;
    color: rgba(0,0,0,0.14);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    z-index: 0;
}
.cta-strip .container {
    position: relative;
    z-index: 2;
}
.cta-headline {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    color: #fff;
    text-transform: uppercase;
    line-height: 0.95;
    margin: 0;
    letter-spacing: 0.005em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.cta-strip .cta-phone {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    font-weight: 900;
    color: #fff;
    display: block;
    margin-bottom: 14px;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.cta-strip .cta-phone:hover { color: #0a0a0a; text-shadow: none; }
.btn-cta-dark {
    background: var(--ink);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 32px;
    border-radius: 4px;
    border: 2px solid var(--ink);
    transition: all 0.25s;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.btn-cta-dark:hover {
    background: #fff;
    color: var(--ink);
    border-color: #fff;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    background: var(--ink);
    padding: 80px 0 26px;
    color: var(--paper-muted);
    font-size: 14px;
    position: relative;
}
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green) 0%, var(--green) 33%, transparent 33%, transparent 50%, var(--green) 50%, var(--green) 75%, transparent 75%);
}
.footer-logo-wrapper { margin-bottom: 22px; }
.footer-logo { height: 50px; display: block; width: auto; }
.footer-about {
    line-height: 1.7;
    margin-bottom: 14px;
    max-width: 320px;
    color: var(--paper-muted);
}
.footer-tagline {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--green);
    letter-spacing: 0.02em;
    margin-bottom: 18px;
}
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    background: var(--graphite);
    border: 1px solid var(--ash);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}
.footer-social a:hover {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    transform: translateY(-2px);
}

.footer-heading {
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    margin-bottom: 22px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-weight: 700;
    position: relative;
    padding-bottom: 12px;
}
.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--green);
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li { margin-bottom: 11px; }
.footer-links a {
    color: var(--paper-muted);
    font-size: 14px;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.footer-links a:hover {
    color: var(--green);
    transform: translateX(4px);
}
.footer-links i {
    color: var(--green);
    width: 14px;
    text-align: center;
    font-size: 11px;
}
.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--paper-muted);
}
.footer-contact-list i {
    color: var(--green);
    margin-top: 4px;
    flex-shrink: 0;
}
.footer-contact-list a { color: var(--paper-muted); }
.footer-contact-list a:hover { color: var(--green); }

.footer-bottom {
    border-top: 1px solid var(--ash);
    padding-top: 22px;
    margin-top: 50px;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--paper-faint);
}
.footer-bottom p {
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.footer-bottom .legal a {
    color: var(--paper-faint);
    margin-left: 18px;
}
.footer-bottom .legal a:hover { color: #fff; }
.footer-credit {
    margin: 0;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--paper-faint);
    font-weight: 500;
}
.footer-credit a {
    color: var(--paper-muted);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    margin-left: 4px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-credit a:hover {
    color: var(--green-bright);
    border-bottom-color: var(--green-bright);
}

/* Business credentials in footer (VBA licence, ABN) */
.footer-credentials {
    list-style: none;
    padding: 0;
    margin: 18px 0 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}
.footer-credentials li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    border-left: 2px solid var(--green-bright);
}
.footer-credentials .cred-label {
    font-size: 9.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--paper-faint);
    font-weight: 600;
}
.footer-credentials .cred-value {
    font-size: 12.5px;
    color: var(--paper-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}

/* Footer legal links (Privacy / FAQ) */
.footer-legal {
    margin: 0;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--paper-faint);
    font-weight: 500;
}
.footer-legal a {
    color: var(--paper-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-legal a:hover {
    color: var(--green-bright);
    border-bottom-color: var(--green-bright);
}
.footer-legal span { margin: 0 8px; color: var(--paper-faint); }

/* ============================================================
   Centering rules — applied where centred reads cleaner than
   left-aligned. Section heads, sub-page heroes, process steps,
   stats and trust strips, founder pull-quote and CTA. Editorial
   layouts (homepage hero, service rows, about-next-to-photo,
   article prose, quote cards, contact-info-list, footer brand)
   stay left-aligned intentionally.
   ============================================================ */

/* Symmetric right-dash on the eyebrow ONLY when it's inside a
   centred context. Left-aligned eyebrows keep the original
   single-dash-on-the-left design. */
.section-head .eyebrow::after,
.page-hero .eyebrow::after,
.cta-strip .eyebrow::after {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--green);
}

/* Section heads default to centred (eyebrow + h2 + lead) */
.section-head { text-align: center; }
.section-head .display-title .lead,
.section-head .display-title .accent { text-align: center; }
.section-head .section-lead,
.section-head p {
    margin-left: auto;
    margin-right: auto;
}

/* Sub-page heroes (services, gallery, contact, etc.) */
.page-hero .container {
    text-align: center;
    position: relative;
    z-index: 1;
}
.page-hero .display-title .lead,
.page-hero .display-title .accent { text-align: center; }
.page-hero .breadcrumb-list { justify-content: center; }

/* Process timeline - each step centred under its connector dot */
.process-step { text-align: center; }
.process-step::before { left: 50%; transform: translateX(-50%); }
.process-step .step-num { left: 50%; transform: translateX(-50%); }
.process-step p,
.process-step h3 { margin-left: auto; margin-right: auto; }

/* ============================================================
   CENTERING SAFETY NET
   When a parent is text-align: center, any block-level child with
   max-width must also have auto horizontal margins or it hugs the
   left edge on mobile (where the parent column is wider than max-width).
   These rules guarantee centering for every known centered context.
   ============================================================ */
.section-head p,
.section-head .section-lead,
.section-head .display-title,
.page-hero p,
.page-hero .display-title,
.page-hero .breadcrumb-list,
.related-posts-head p,
.related-posts-head .display-title,
.cta-strip p,
.cta-strip h2,
.our-work-cta-text > p,
.process-step p,
.process-step h3,
.trust-item p,
.trust-item h3,
.values-item p,
.about-stat p,
.review-stat p,
.testimonials-page .intro-text,
.gallery-page .intro-text,
.founder-section .section-head .founder-quote,
.instagram-feed-head p {
    margin-left: auto;
    margin-right: auto;
}

/* Trust strip + values + about-stats already use text-align center */
.trust-grid { justify-items: center; }
.trust-item { text-align: center; }

/* Founder section: keep the bio + portrait 2-column layout BUT
   centre the pull-quote and the Talk-to-Jim CTA panel inside it,
   because those two elements deserve to feel deliberate. The bio
   paragraphs themselves stay left-aligned because long-form
   reading needs left-alignment. */
.founder-quote {
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    border-left: none;
    position: relative;
}
.founder-quote::before,
.founder-quote::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--green);
    margin: 0 auto 18px;
}
.founder-quote::after { margin: 18px auto 0; }
.founder-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    justify-content: center;
    margin: 36px auto 0;
    padding: 28px 32px;
    background: rgba(1, 101, 51, 0.08);
    border: 1px solid rgba(1, 101, 51, 0.35);
    border-radius: 8px;
    max-width: 480px;
    text-align: center;
}
.founder-actions .btn-call-jim { padding: 18px 34px; font-size: 14px; }
.founder-actions .signature-line {
    font-style: normal;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 600;
    color: var(--paper-muted);
}

/* CTA STRIP - the green strip above the footer, stack stacked centred */
.cta-strip .row {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cta-strip .row > [class*="col-"] {
    width: 100%;
    text-align: center !important;
}
.cta-strip .row > [class*="col-"].text-lg-end { text-align: center !important; }
.cta-headline { text-align: center; }
.cta-strip .col-lg-5 {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Footer-bottom (just the copyright) centred */
.footer-bottom {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Gallery section header: the homepage gallery has title + "See
   Full Gallery" link; stack so title centres */
.gallery-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.gallery-header > div { text-align: center; }
.gallery-link { justify-content: center; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991px) {
    .hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .hero-text-side { padding: 80px 30px 60px; }
    .hero-text-inner {
        padding-right: 0;
        max-width: 100%;
    }
    .hero-image-side { min-height: 360px; }
    .hero-image-side::after { display: none; }
    .hero-title { font-size: clamp(2.6rem, 8vw, 3.6rem); }
    .stats-ribbon-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 0;
    }
    .stats-cell { padding: 0 16px; }
    .stats-cell:nth-child(2) { border-right: none; }
    .stats-cell:nth-child(3) { padding-left: 0; }
    .service-row {
        grid-template-columns: 60px 1fr;
        gap: 20px;
        padding: 30px 0;
    }
    .service-thumb { display: none; }
    .service-num { font-size: 3rem; }
    .service-content h3 { font-size: 1.6rem; }
    .about-img-wrap {
        padding: 0;
        margin-bottom: 50px;
    }
    .about-img-bg { display: none; }
    .about-img-badge {
        bottom: 16px;
        right: 16px;
    }
    .about-content { padding-left: 0; }
    .process-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 40px 24px;
    }
    .process-timeline::before { display: none; }
    .bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 220px 220px 220px;
    }
    .bento-item.feature {
        grid-row: 1;
        grid-column: 1 / -1;
    }
    .quote-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .contact-split { grid-template-columns: 1fr; }
    .contact-info-side { padding: 70px 30px; }
    .contact-info-inner {
        max-width: 100%;
        padding-left: 0;
    }
    .contact-form-side { padding: 70px 30px; }
    .contact-form-inner {
        max-width: 100%;
        padding-right: 0;
    }
    .nav-link {
        margin: 8px 0 !important;
        padding: 8px 0 !important;
    }
    .nav-link::after { display: none; }
    .navbar-collapse {
        background: var(--bone);
        margin-top: 16px;
        padding: 20px;
        border-radius: 4px;
        border: 1px solid var(--mist);
    }
    .section-pad { padding: 70px 0; }
    .cta-strip .text-lg-end {
        text-align: center !important;
        margin-top: 30px;
    }
}

@media (max-width: 575px) {
    .stats-ribbon-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .stats-cell {
        border-right: none;
        padding-left: 0;
        padding-right: 0;
    }
    .hero-ctas {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-ctas a { justify-content: center; }
    .stat-grid { grid-template-columns: 1fr; }
    .process-timeline { grid-template-columns: 1fr; }
    .bento {
        grid-template-columns: 1fr;
        grid-template-rows: 240px 200px 200px 200px 200px;
    }
    .bento-item.feature { grid-column: 1; }
    .footer-bottom {
        justify-content: center;
        text-align: center;
    }
    .footer-bottom .legal a { margin: 0 8px; }
    .service-row { padding-left: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

/* ============================================================
   Mobile sticky bottom bar (Call + Quote)
   ============================================================ */
.mobile-sticky-bar { display: none; }

@media (max-width: 991px) {
    .mobile-sticky-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        background: var(--ink);
        border-top: 2px solid var(--green);
        box-shadow: 0 -8px 20px rgba(0,0,0,0.3);
    }
    .msb-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px 12px;
        font-family: 'Manrope', sans-serif;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        text-decoration: none;
        min-height: 56px;
        transition: background 0.2s, color 0.2s;
    }
    .msb-btn i { font-size: 14px; }
    .msb-call { background: var(--green); color: #fff; }
    .msb-call:hover, .msb-call:focus, .msb-call:active {
        background: var(--green-deep); color: #fff;
    }
    .msb-quote { background: var(--ink); color: #fff; border-left: 1px solid var(--ash); }
    .msb-quote:hover, .msb-quote:focus, .msb-quote:active {
        background: var(--graphite); color: var(--green);
    }

    /* Push body content above the sticky bar */
    body { padding-bottom: 60px; }

    /* iOS Safari: inputs with font-size < 16px trigger auto-zoom */
    .form-control, .form-select {
        font-size: 16px;
        padding: 14px 16px;
        min-height: 50px;
    }
    textarea.form-control { min-height: 140px; }

    /* Larger touch targets - meet WCAG 2.5.5 (44x44 min, 48 better) */
    .btn-green, .btn-outline-light, .btn-outline-dark, .btn-cta-dark {
        min-height: 50px;
        padding: 14px 24px;
        font-size: 13px;
    }
    .nav-link {
        min-height: 44px;
        display: flex !important;
        align-items: center;
    }
    .navbar-toggler {
        padding: 8px 12px;
        min-width: 48px;
        min-height: 48px;
    }
    .footer-social a {
        width: 44px;
        height: 44px;
    }
    .contact-row { padding: 14px 0; min-height: 60px; }

    /* Tighter section padding - was 70px, now 56px */
    .section-pad { padding: 56px 0; }

    /* Hero tweaks for portrait phones */
    .hero-text-side { padding: 56px 22px 44px; }
    .hero-image-side { min-height: 260px; }
    .hero-text { font-size: 15px; margin-bottom: 26px; }
    .hero-eyebrow { margin-bottom: 16px; font-size: 11px; }

    /* Stats ribbon: tighter on mobile */
    .stats-ribbon { padding: 32px 0; }
    .stats-cell .num { font-size: 1.9rem; }
    .stats-cell .label { font-size: 10px; }

    /* Service rows */
    .service-row { padding: 26px 0 !important; gap: 14px; }
    .service-num { font-size: 2.6rem; }
    .service-content h3 { font-size: 1.4rem; margin-bottom: 8px; }
    .service-content p { font-size: 14px; }

    /* About section image badge - prevent overflow */
    .about-img-badge {
        bottom: 14px;
        right: 14px;
        padding: 14px 16px;
        gap: 12px;
    }
    .about-img-badge .num { font-size: 2rem; }
    .about-img-badge .text { font-size: 10px; }

    /* Process steps tighter */
    .process-step { padding-top: 70px; }
    .process-step::before, .process-step .step-num {
        width: 48px; height: 48px;
    }
    .process-step .step-num { font-size: 1.1rem; }
    .process-step h3 { font-size: 1.2rem; margin-bottom: 8px; }
    .process-step p { font-size: 13px; }

    /* Gallery */
    .bento { gap: 12px; }
    .gallery-header { margin-bottom: 32px; }
    .bento-overlay { padding: 16px 18px; }
    .bento-item.feature .bento-overlay { padding: 20px 22px; }
    .bento-title { font-size: 1.05rem; }
    .bento-item.feature .bento-title { font-size: 1.4rem; }

    /* Quote cards */
    .quote-card { padding: 32px 22px 24px; }
    .quote-card::before { font-size: 4rem; top: -8px; }
    .quote-text { font-size: 14px; margin-bottom: 22px; }
    .quote-author { font-size: 1.05rem; }

    /* CTA strip mobile */
    .cta-strip { padding: 56px 0; }
    .cta-headline { text-align: center; }
    .cta-strip-ghost { font-size: clamp(3.5rem, 18vw, 7rem); }

    /* Contact section */
    .contact-info-side { padding: 56px 22px; }
    .contact-form-side { padding: 56px 22px; }
    .contact-row-detail h3 { font-size: 10px; }
    .contact-row-detail a, .contact-row-detail p { font-size: 1.15rem; }

    /* Footer mobile */
    footer { padding: 60px 0 24px; }
    .footer-heading { margin-bottom: 16px; padding-bottom: 10px; }
    .footer-about { font-size: 14px; }

    /* Logo sizing on mobile - slightly smaller */
    .navbar-brand img { height: 42px; }
    .footer-logo { height: 44px; }

    /* Display titles tighter on mobile */
    .display-title {
        font-size: clamp(2rem, 8vw, 2.8rem);
        margin-bottom: 18px;
    }
    .display-title.compact { font-size: clamp(1.8rem, 6.5vw, 2.4rem); }

    /* Section heads tighter */
    .section-head { margin-bottom: 36px; }
    .section-lead { font-size: 15px; }
}

@media (max-width: 575px) {
    /* Even tighter on small phones */
    .hero-text-side { padding: 44px 18px 38px; }
    .hero-title { font-size: clamp(2.2rem, 9vw, 3rem); }
    .stats-ribbon-grid { gap: 22px; }
    .stats-cell { padding: 0; text-align: center; }
    .stats-cell .num { font-size: 2.2rem; }
    .section-pad { padding: 48px 0; }
    .quote-card { padding: 28px 20px 22px; }
    .form-card { padding: 24px 18px; }
    .contact-info-side, .contact-form-side { padding: 44px 18px; }

    /* Make sure sticky bar buttons remain readable on tiny screens */
    .msb-btn { font-size: 12px; padding: 14px 8px; gap: 8px; }
    .msb-btn span { white-space: nowrap; }
}

/* iPhone safe-area support (notch / home indicator) */
@supports (padding: max(0px)) {
    @media (max-width: 991px) {
        .mobile-sticky-bar {
            padding-bottom: max(0px, env(safe-area-inset-bottom));
        }
        body {
            padding-bottom: calc(60px + env(safe-area-inset-bottom));
        }
    }
}


/* ============================================================
   PAGE-LEVEL ADDITIONS
   (extends the homepage component library above)
   ============================================================ */

/* ============================================================
   PAGE HERO - substantial, on-brand, consistent across all subpages
   ============================================================ */
.page-hero {
    background: var(--ink);
    color: #fff;
    padding: clamp(80px, 14vw, 140px) 0 clamp(64px, 10vw, 110px);
    position: relative;
    overflow: hidden;
    border-bottom: 4px solid var(--green);
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 82% 28%, rgba(1,101,51,0.20), transparent 50%),
        radial-gradient(circle at 12% 80%, rgba(1,101,51,0.12), transparent 45%);
    pointer-events: none;
}
/* Subtle diagonal accent stripe top right */
.page-hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 28px,
        rgba(1,101,51,0.06) 28px,
        rgba(1,101,51,0.06) 30px
    );
    pointer-events: none;
    opacity: 0.7;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .eyebrow {
    color: var(--green);
    margin-bottom: 22px;
    font-size: 13px;
    letter-spacing: 2.5px;
}
.page-hero .display-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 7vw, 5.2rem);
    line-height: 0.95;
    color: #fff;
    margin: 0 auto 28px;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    max-width: 900px;
}
.page-hero .display-title .lead {
    display: block;
    color: rgba(255,255,255,0.96);
}
.page-hero .display-title .accent {
    display: block;
    color: var(--green);
}

/* Breadcrumbs */
.breadcrumb-list {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--paper-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.breadcrumb-list a { color: var(--paper-muted); transition: color 0.2s; }
.breadcrumb-list a:hover { color: var(--green); }
.breadcrumb-list .sep { color: var(--ash-2); font-size: 10px; }
.breadcrumb-list .current { color: var(--green); }

/* ============================================================
   SERVICE DETAIL PAGE: prose, sidebar, related
   ============================================================ */
.service-body {
    background: var(--paper);
    padding: 80px 0;
}
.service-thumb-large {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 36px;
    box-shadow: var(--shadow-deep);
}
.prose {
    color: var(--ink-text);
    font-size: 16px;
    line-height: 1.75;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    color: var(--ink-text);
    line-height: 1.05;
}
.prose h1 { font-size: 2.4rem; margin: 0 0 24px; }
.prose h2 {
    font-size: 1.9rem;
    margin: 44px 0 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--mist);
    position: relative;
}
.prose h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 60px;
    height: 2px;
    background: var(--green);
}
.prose h3 { font-size: 1.45rem; margin: 32px 0 14px; }
.prose p { color: var(--ink-muted); margin: 0 0 18px; }
.prose strong { color: var(--ink-text); font-weight: 700; }
.prose ul, .prose ol { padding-left: 0; list-style: none; margin: 0 0 24px; }
.prose ul li, .prose ol li {
    position: relative;
    padding: 10px 0 10px 36px;
    color: var(--ink-muted);
    border-bottom: 1px solid var(--mist);
}
.prose ul li:last-child, .prose ol li:last-child { border-bottom: none; }
/* When a list item starts with <strong>Title.</strong> followed by descriptive
   text, stack the title above the description for clearer scanning. */
.prose ul li > strong:first-child,
.prose ol li > strong:first-child {
    display: block;
    margin-bottom: 4px;
    color: var(--ink-text);
    font-weight: 700;
}
.prose ul li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    background: var(--green); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.prose ol { counter-reset: ol-counter; }
.prose ol li { counter-increment: ol-counter; padding-left: 44px; }
.prose ol li::before {
    content: counter(ol-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    background: var(--green); color: #fff;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 14px; font-weight: 900;
}
.prose hr { border: none; height: 2px; background: var(--mist); margin: 40px 0; }
.prose .lead-paragraph { font-size: 17px; line-height: 1.7; color: var(--ink-text); font-weight: 500; }

/* Sidebar */
.sidebar { padding-left: 20px; }
.sidebar-card {
    background: var(--bone);
    border: 1px solid var(--mist);
    border-radius: 6px;
    padding: 26px;
    margin-bottom: 20px;
}
.sidebar-card-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
    text-transform: uppercase;
    color: var(--ink-text);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--mist);
    position: relative;
}
.sidebar-card-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 40px; height: 2px;
    background: var(--green);
}
.sidebar-services-list { list-style: none; padding: 0; margin: 0; }
.sidebar-services-list li { border-bottom: 1px solid var(--mist); }
.sidebar-services-list li:last-child { border-bottom: none; }
.sidebar-services-list a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0;
    color: var(--ink-text);
    font-family: 'Manrope', sans-serif;
    font-weight: 600; font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.6px;
    transition: all 0.2s;
}
.sidebar-services-list a:hover { color: var(--green); padding-left: 6px; }
.sidebar-services-list a i { color: var(--green); font-size: 12px; transition: transform 0.2s; }
.sidebar-services-list a:hover i { transform: translateX(4px); }
.sidebar-services-list a.current { color: var(--green); cursor: default; }
.sidebar-services-list a.current::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--green);
    border-radius: 50%;
    margin-right: 12px;
}

/* Sidebar quote-CTA card */
.sidebar-cta {
    background: var(--ink);
    color: #fff;
    border-radius: 6px;
    padding: 32px 26px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.sidebar-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 80% 20%, rgba(1,101,51,0.20), transparent 60%);
    pointer-events: none;
}
.sidebar-cta > * { position: relative; z-index: 1; }
.sidebar-cta .icon-circle {
    width: 56px; height: 56px;
    margin: 0 auto 18px;
    background: var(--green);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px;
}
.sidebar-cta h4 {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--paper-muted);
    margin: 0 0 8px;
    font-weight: 700;
}
.sidebar-cta .phone-number {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 1.9rem; font-weight: 900;
    color: var(--green);
    text-decoration: none;
    display: block;
    letter-spacing: 0.01em;
    margin-bottom: 18px;
    transition: color 0.2s;
}
.sidebar-cta .phone-number:hover { color: #fff; }
.sidebar-cta p { color: var(--paper-muted); font-size: 14px; margin: 0 0 18px; line-height: 1.5; }
.sidebar-cta .btn-quote {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    background: var(--green); color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s;
}
.sidebar-cta .btn-quote:hover { background: var(--green-deep); transform: translateY(-1px); }

/* Related services strip */
.related-services {
    background: var(--bone);
    padding: 80px 0;
    border-top: 1px solid var(--mist);
}
.related-services .section-head { text-align: center; margin-bottom: 48px; }
.related-card {
    background: var(--paper);
    border: 1px solid var(--mist);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex; flex-direction: column;
}
.related-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-deep);
    border-color: var(--green);
}
.related-card-img { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.related-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.related-card:hover .related-card-img img { transform: scale(1.05); }
.related-card-body { padding: 26px 26px 28px; flex-grow: 1; display: flex; flex-direction: column; }
.related-card-body h3 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900; font-size: 1.5rem;
    color: var(--ink-text);
    text-transform: uppercase;
    margin: 0 0 12px;
    letter-spacing: 0.01em;
}
.related-card-body p { color: var(--ink-muted); font-size: 14px; line-height: 1.65; margin: 0 0 18px; flex-grow: 1; }
.related-card-link {
    color: var(--green);
    font-family: 'Manrope', sans-serif;
    font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: 1px;
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none;
    transition: gap 0.2s;
}
.related-card-link:hover { gap: 14px; }

/* Trust strip on services landing */
.trust-strip {
    background: var(--ink);
    color: #fff;
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}
.trust-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 50%, rgba(1,101,51,0.10), transparent 60%);
    pointer-events: none;
}
.trust-strip .container { position: relative; z-index: 1; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.trust-item { text-align: center; padding: 0 16px; }
.trust-item .icon {
    width: 60px; height: 60px;
    margin: 0 auto 18px;
    background: var(--green); color: #fff;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.trust-item h4 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900; font-size: 1.3rem;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: 0.01em;
}
.trust-item p { color: var(--paper-muted); font-size: 13px; line-height: 1.55; margin: 0; }

/* ============================================================
   TESTIMONIALS PAGE
   ============================================================ */
.testimonials-page { background: var(--paper); padding: 80px 0 60px; }
.testimonials-page .intro-text {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
    color: var(--ink-muted);
    font-size: 16px; line-height: 1.7;
}
.testimonials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.review-stats {
    background: var(--ink); color: #fff;
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}
.review-stats::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 80% 50%, rgba(1,101,51,0.10), transparent 60%);
    pointer-events: none;
}
.review-stats .container { position: relative; z-index: 1; }
.review-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.review-stat .num {
    display: block;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    color: var(--green);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: 0.005em;
}
.review-stat .num .small { font-size: 0.55em; color: var(--paper-muted); }
.review-stat .label {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 1.4px;
    color: var(--paper-muted);
}
.review-stat .stars { color: var(--green); margin-bottom: 10px; font-size: 14px; letter-spacing: 2px; }

/* ============================================================
   GALLERY PAGE
   ============================================================ */
.gallery-page { background: var(--paper); padding: 80px 0; }
.gallery-page .intro-text {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
    color: var(--ink-muted);
    font-size: 16px; line-height: 1.7;
}

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    background: var(--mist);
    border: none; padding: 0;
    width: 100%; display: block;
}
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.gallery-tile:hover img { transform: scale(1.06); }
.gallery-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}
.gallery-tile:hover .gallery-tile-overlay,
.gallery-tile:focus-visible .gallery-tile-overlay { opacity: 1; }
.gallery-tile-tag {
    font-family: 'Manrope', sans-serif;
    font-weight: 700; font-size: 10px;
    text-transform: uppercase; letter-spacing: 1.6px;
    color: var(--green);
    margin-bottom: 6px;
}
.gallery-tile-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900; font-size: 1.25rem;
    color: #fff;
    text-transform: uppercase;
    margin: 0; line-height: 1.1;
}
.gallery-tile-zoom {
    position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px;
    background: rgba(0,0,0,0.7); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s, transform 0.3s;
}
.gallery-tile:hover .gallery-tile-zoom,
.gallery-tile:focus-visible .gallery-tile-zoom { opacity: 1; transform: scale(1); }

.lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.92);
    display: none;
    align-items: center; justify-content: center;
    z-index: 9999;
    padding: 20px;
}
.lightbox.open { display: flex; }
.lightbox img {
    max-width: 100%; max-height: 90vh;
    width: auto; height: auto;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close {
    position: absolute; top: 20px; right: 20px;
    width: 48px; height: 48px;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.lightbox-close:hover { background: var(--green); border-color: var(--green); }
.lightbox-caption {
    position: absolute;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    text-align: center;
    background: rgba(0,0,0,0.6);
    padding: 8px 18px;
    border-radius: 100px;
    backdrop-filter: blur(4px);
}

/* ============================================================
   ABOUT PAGE - including the FOUNDER FEATURE SECTION
   ============================================================ */

/* Founder section - the centerpiece. Editorial dark feature.
   Big portrait left, story right, stats + CTA. */
.founder-section {
    background: var(--ink);
    color: #fff;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--green);
    border-bottom: 4px solid var(--green);
}
.founder-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(1,101,51,0.20), transparent 50%),
        radial-gradient(circle at 85% 75%, rgba(1,101,51,0.15), transparent 50%);
    pointer-events: none;
}
.founder-section .container { position: relative; z-index: 1; }

/* Section heading */
.founder-section .section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}
.founder-section .section-head .eyebrow { color: var(--green); margin-bottom: 18px; }
.founder-section .section-head h2 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(2.8rem, 6vw, 4.4rem);
    line-height: 0.98;
    color: #fff;
    margin: 0 0 18px;
    letter-spacing: 0.005em;
}
.founder-section .section-head h2 .accent { color: var(--green); }
.founder-section .section-head .section-tagline {
    font-family: 'Manrope', sans-serif;
    font-style: italic;
    font-size: 17px;
    color: var(--paper-muted);
    line-height: 1.55;
    margin: 0;
}

/* Two-column body */
.founder-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 60px;
    align-items: stretch;
}

/* Portrait */
.founder-portrait {
    position: relative;
    align-self: start;
}
.founder-portrait .frame {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.founder-portrait .frame img {
    width: 100%;
    height: auto;
    display: block;
}
.founder-portrait::before {
    content: '';
    position: absolute;
    inset: 22px -22px -22px 22px;
    border: 3px solid var(--green);
    border-radius: 8px;
    z-index: -1;
}
.founder-portrait .name-tag {
    position: absolute;
    bottom: -10px;
    left: -10px;
    background: var(--green);
    color: #fff;
    padding: 14px 22px;
    border-radius: 4px;
    z-index: 2;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.founder-portrait .name-tag .nm {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: 1.3rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.015em;
    line-height: 1;
}
.founder-portrait .name-tag .role {
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: rgba(255,255,255,0.85);
    margin-top: 4px;
    display: block;
}

/* Story column */
.founder-story { padding-top: 8px; }
.founder-story .small-eyebrow {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--green);
    margin: 0 0 22px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.founder-story .small-eyebrow::before {
    content: '';
    width: 30px; height: 2px;
    background: var(--green);
}

/* Pull quote */
.founder-quote {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.18;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 0 0 28px;
    padding-left: 28px;
    border-left: 4px solid var(--green);
    position: relative;
}
.founder-quote .quote-mark {
    color: var(--green);
    font-size: 1.4em;
    line-height: 0;
    position: relative;
    top: 0.18em;
    margin-right: 6px;
}

/* Body paragraphs */
.founder-body p {
    color: var(--paper-muted);
    font-size: 16px;
    line-height: 1.78;
    margin: 0 0 18px;
}
.founder-body p strong {
    color: #fff;
    font-weight: 700;
}

/* Founder stats */
.founder-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 36px 0 36px;
    padding: 28px 0;
    border-top: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.founder-stat .num {
    display: block;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    color: var(--green);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: 0.005em;
}
.founder-stat .num .small { font-size: 0.55em; color: var(--paper-muted); }
.founder-stat .label {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--paper-muted);
    line-height: 1.4;
}

/* Founder CTA actions */
.founder-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.founder-actions .btn-call-jim {
    background: var(--green);
    color: #fff;
    border: none;
    padding: 16px 28px;
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}
.founder-actions .btn-call-jim:hover {
    background: var(--green-deep);
    transform: translateY(-2px);
    color: #fff;
}
.founder-actions .signature-line {
    font-family: 'Big Shoulders Display', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 15px;
    color: var(--paper-muted);
    letter-spacing: 0.01em;
}

/* About intro (the company story section, comes after founder) */
.about-intro {
    background: var(--paper);
    padding: 80px 0;
}
.about-intro .image-col { position: relative; }
.about-intro .image-wrap {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-deep);
}
.about-intro .image-wrap img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}
.about-intro .image-tile {
    position: absolute;
    bottom: -28px;
    right: -28px;
    background: var(--green);
    color: #fff;
    padding: 26px 30px;
    border-radius: 6px;
    z-index: 2;
    box-shadow: var(--shadow-deep);
}
.about-intro .image-tile .num {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: 3rem;
    line-height: 1;
    color: #fff;
}
.about-intro .image-tile .label {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,0.85);
    margin-top: 6px;
    display: block;
}
.about-intro .content-col { padding-left: 30px; }
.about-intro .content-col h2 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    line-height: 1.05;
    color: var(--ink-text);
    margin: 0 0 22px;
}
.about-intro .content-col h2 .accent { color: var(--green); }
.about-intro .content-col p {
    color: var(--ink-muted);
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 18px;
}
.about-intro .content-col p.lead-paragraph {
    color: var(--ink-text);
    font-size: 17px;
    font-weight: 500;
}

/* Values cards */
.values-section {
    background: var(--bone);
    padding: 80px 0;
    border-top: 1px solid var(--mist);
    border-bottom: 1px solid var(--mist);
}
.values-section .section-head { text-align: center; margin-bottom: 50px; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.value-card {
    background: var(--paper);
    border: 1px solid var(--mist);
    border-radius: 6px;
    padding: 32px 26px;
    text-align: center;
    transition: all 0.3s;
}
.value-card:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: var(--shadow-deep); }
.value-card .icon {
    width: 64px; height: 64px;
    margin: 0 auto 22px;
    background: var(--green); color: #fff;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
}
.value-card h3 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: 1.3rem;
    text-transform: uppercase;
    color: var(--ink-text);
    margin: 0 0 12px;
    letter-spacing: 0.01em;
}
.value-card p { color: var(--ink-muted); font-size: 14px; line-height: 1.6; margin: 0; }

/* About stats strip */
.about-stats {
    background: var(--ink); color: #fff;
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}
.about-stats::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 20% 50%, rgba(1,101,51,0.10), transparent 60%);
    pointer-events: none;
}
.about-stats .container { position: relative; z-index: 1; }
.about-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.about-stat .num {
    display: block;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    color: var(--green);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: 0.005em;
}
.about-stat .num .small { font-size: 0.55em; color: var(--paper-muted); }
.about-stat .label {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--paper-muted);
}

/* Why us section */
.why-section { background: var(--paper); padding: 80px 0; }
.why-section .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.why-section .content h2 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    line-height: 1.05;
    color: var(--ink-text);
    margin: 0 0 22px;
}
.why-section .content h2 .accent { color: var(--green); }
.why-section .content > p { color: var(--ink-muted); font-size: 16px; line-height: 1.75; margin-bottom: 24px; }
.why-list { list-style: none; padding: 0; margin: 0; }
.why-list li {
    display: flex; align-items: flex-start; gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--mist);
}
.why-list li:last-child { border-bottom: none; }
.why-list .check {
    flex-shrink: 0;
    width: 36px; height: 36px;
    background: var(--green); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
}
.why-list .text strong {
    display: block;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: var(--ink-text);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
.why-list .text span { color: var(--ink-muted); font-size: 14px; line-height: 1.6; }
.why-section .image-side { position: relative; }
.why-section .image-side img {
    width: 100%; height: auto;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: var(--shadow-deep);
}
.why-section .image-side::before {
    content: '';
    position: absolute;
    inset: 24px -24px -24px 24px;
    border: 3px solid var(--green);
    border-radius: 6px;
    z-index: -1;
}

/* Placeholder banner - for content the user will swap in later */
.placeholder-banner {
    background: linear-gradient(135deg, rgba(1,101,51,0.08), rgba(1,101,51,0.03));
    border: 1.5px dashed var(--green);
    border-radius: 6px;
    padding: 18px 22px;
    margin-bottom: 36px;
    color: var(--ink-muted);
    font-size: 13px; line-height: 1.6;
}
.placeholder-banner strong { color: var(--green); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page-section { background: var(--paper); padding: 0; }
.contact-split { display: grid; grid-template-columns: 5fr 7fr; min-height: 540px; }

.contact-info-pane {
    background: var(--ink); color: #fff;
    padding: 64px 56px 64px clamp(20px, 5vw, 80px);
    position: relative; overflow: hidden;
}
.contact-info-pane::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(1,101,51,0.20), transparent 55%);
    pointer-events: none;
}
.contact-info-pane > * { position: relative; z-index: 1; }
.contact-info-pane .eyebrow { color: var(--green); margin-bottom: 14px; }
.contact-info-pane h2 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    line-height: 1.05;
    color: #fff;
    margin: 0 0 22px;
}
.contact-info-pane h2 .accent { color: var(--green); }
.contact-info-pane > p {
    color: var(--paper-muted);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 36px;
}
.contact-info-list { list-style: none; padding: 0; margin: 0; }
.contact-info-list li {
    display: flex; align-items: flex-start; gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.contact-info-list li:last-child { border-bottom: none; }
.contact-info-list .icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    background: var(--green); color: #fff;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.contact-info-list .info-text { flex-grow: 1; }
.contact-info-list .info-text h4 {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--paper-muted);
    margin: 0 0 4px;
}
.contact-info-list .info-text p,
.contact-info-list .info-text a {
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s;
}
.contact-info-list .info-text a:hover { color: var(--green); }
.contact-info-list .info-text small {
    color: var(--paper-muted);
    font-size: 12px;
    display: block;
    margin-top: 3px;
}

.contact-info-social {
    margin-top: 36px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.10);
    display: flex; align-items: center; gap: 14px;
}
.contact-info-social .label {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--paper-muted);
    margin-right: 4px;
}
.contact-info-social a {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.contact-info-social a:hover {
    background: var(--green);
    border-color: var(--green);
    transform: translateY(-2px);
}

.contact-form-pane {
    background: var(--paper);
    padding: 64px 56px 64px clamp(20px, 5vw, 80px);
}
.contact-form-pane h3 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.7rem;
    color: var(--ink-text);
    margin: 0 0 8px;
    letter-spacing: 0.005em;
}
.contact-form-pane .form-sub { color: var(--ink-muted); font-size: 14px; line-height: 1.6; margin: 0 0 28px; }
.contact-form-pane label {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--ink-muted);
    margin-bottom: 8px;
}
.contact-form-pane label .req { color: var(--green); }
.contact-form-pane .form-control,
.contact-form-pane .form-select {
    background: var(--bone);
    border: 1.5px solid var(--mist);
    border-radius: 4px;
    padding: 14px 16px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    color: var(--ink-text);
    width: 100%;
    transition: all 0.2s;
    min-height: 50px;
}
.contact-form-pane textarea.form-control { min-height: 130px; resize: vertical; }
.contact-form-pane .form-control:focus,
.contact-form-pane .form-select:focus {
    background: #fff;
    border-color: var(--green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(1,101,51,0.12);
}
.contact-form-pane .form-control.is-invalid {
    border-color: #c0392b;
    background: rgba(192,57,43,0.04);
}
.contact-form-pane .invalid-feedback-msg {
    color: #c0392b;
    font-size: 12px;
    margin-top: 6px;
    display: none;
}
.contact-form-pane .form-control.is-invalid + .invalid-feedback-msg { display: block; }
.contact-form-pane .btn-submit {
    background: var(--green);
    color: #fff;
    border: none;
    padding: 16px 32px;
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
}
.contact-form-pane .btn-submit:hover { background: var(--green-deep); transform: translateY(-1px); }
.contact-form-pane .form-footnote { color: var(--ink-muted); font-size: 12px; margin-top: 18px; line-height: 1.55; }

/* Honeypot */
.hpot-field {
    position: absolute;
    left: -9999px; top: -9999px;
    visibility: hidden;
    pointer-events: none;
}

/* Form alerts */
.form-alert {
    padding: 18px 22px;
    border-radius: 6px;
    margin-bottom: 26px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    display: flex; align-items: flex-start; gap: 14px;
}
.form-alert .alert-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.form-alert.success {
    background: rgba(1,101,51,0.08);
    border: 1.5px solid var(--green);
    color: var(--ink-text);
}
.form-alert.success .alert-icon { background: var(--green); color: #fff; }
.form-alert.error {
    background: rgba(192,57,43,0.06);
    border: 1.5px solid #c0392b;
    color: var(--ink-text);
}
.form-alert.error .alert-icon { background: #c0392b; color: #fff; }
.form-alert h4 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.05rem;
    margin: 0 0 4px;
    color: var(--ink-text);
}
.form-alert p { margin: 0; color: var(--ink-muted); font-size: 14px; }

/* Map */
.map-section { padding: 0; background: var(--paper); border-top: 1px solid var(--mist); }
.map-wrap {
    position: relative;
    height: 460px;
    width: 100%;
    background: var(--bone);
    overflow: hidden;
}
.map-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: grayscale(0.4);
}

/* ============================================================
   MOBILE RESPONSIVE - page-level
   ============================================================ */
@media (max-width: 991px) {
    .page-hero { padding: 70px 0 56px; }
    .page-hero .display-title { font-size: clamp(2.4rem, 7vw, 3rem); }
    .page-hero::after { width: 140px; }
    .service-body { padding: 56px 0; }
    .sidebar { padding-left: 0; margin-top: 40px; }
    .related-services { padding: 56px 0; }
    .trust-strip { padding: 56px 0; }
    .trust-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
    .prose h1 { font-size: 2rem; }
    .prose h2 { font-size: 1.55rem; margin: 32px 0 14px; }
    .prose h3 { font-size: 1.25rem; margin: 24px 0 10px; }

    .testimonials-page { padding: 56px 0 36px; }
    .testimonials-grid { grid-template-columns: 1fr; gap: 22px; }
    .gallery-page { padding: 56px 0; }
    .gallery-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .review-stats { padding: 56px 0; }
    .review-stats-grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; }

    /* Founder section mobile */
    .founder-section { padding: 70px 0; }
    .founder-grid { grid-template-columns: 1fr; gap: 50px; }
    .founder-portrait { max-width: 480px; margin: 0 auto; }
    .founder-portrait::before { inset: 16px -16px -16px 16px; }
    .founder-stats { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

    .about-intro { padding: 56px 0; }
    .about-intro .content-col { padding-left: 0; padding-top: 50px; }
    .about-intro .image-tile { bottom: -22px; right: 16px; padding: 20px 24px; }
    .about-intro .image-tile .num { font-size: 2.3rem; }
    .values-section { padding: 56px 0; }
    .values-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
    .about-stats { padding: 56px 0; }
    .about-stats-grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
    .why-section { padding: 56px 0; }
    .why-section .why-grid { grid-template-columns: 1fr; gap: 50px; }
    .why-section .image-side { order: -1; max-width: 480px; margin: 0 auto; }
    .why-section .image-side::before { inset: 16px -16px -16px 16px; }

    .contact-split { grid-template-columns: 1fr; min-height: 0; }
    .contact-info-pane,
    .contact-form-pane { padding: 50px 24px; }
    .map-wrap { height: 360px; }
}

@media (max-width: 575px) {
    .page-hero { padding: 56px 0 44px; }
    .page-hero .display-title { font-size: 2rem; margin-bottom: 22px; }
    .page-hero::after { display: none; }
    .testimonials-page { padding: 44px 0 24px; }
    .gallery-page { padding: 44px 0; }
    .gallery-grid { grid-template-columns: 1fr; gap: 14px; }
    .review-stats { padding: 44px 0; }
    .review-stats-grid { grid-template-columns: 1fr 1fr; gap: 26px 14px; }

    /* Founder section small mobile */
    .founder-section { padding: 56px 0; }
    .founder-section .section-head { margin-bottom: 44px; }
    .founder-portrait::before { inset: 12px -12px -12px 12px; }
    .founder-portrait .name-tag { padding: 12px 18px; }
    .founder-portrait .name-tag .nm { font-size: 1.1rem; }
    .founder-quote { font-size: 1.2rem; padding-left: 20px; }
    .founder-stats { grid-template-columns: 1fr; gap: 18px; padding: 22px 0; }

    .about-intro { padding: 44px 0; }
    .about-intro .image-tile { right: 12px; bottom: -18px; padding: 16px 20px; }
    .about-intro .image-tile .num { font-size: 2rem; }
    .values-section { padding: 44px 0; }
    .values-grid { grid-template-columns: 1fr; gap: 14px; }
    .about-stats { padding: 44px 0; }
    .about-stats-grid { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
    .about-stat .num { font-size: 2.4rem; }
    .why-section { padding: 44px 0; }

    .contact-info-pane,
    .contact-form-pane { padding: 40px 18px; }
    .map-wrap { height: 280px; }
}

/* ============================================================
   VIDEO COMPONENTS - reusable video-card + video-showcase
   Drop MP4s into the /videos/ folder. If a video is missing,
   the poster image + play button still display cleanly.
   ============================================================ */

/* Featured video showcase section (used on homepage) */
.video-showcase {
    background: var(--ink);
    color: #fff;
    padding: 90px 0 100px;
    position: relative;
    overflow: hidden;
}
.video-showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 18% 30%, rgba(1,101,51,0.18), transparent 50%),
        radial-gradient(circle at 82% 70%, rgba(1,101,51,0.10), transparent 50%);
    pointer-events: none;
}
.video-showcase .container { position: relative; z-index: 1; }
.video-showcase .section-head { text-align: center; margin-bottom: 50px; }

/* Reusable video card */
.video-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
    border: 1.5px solid rgba(255,255,255,0.08);
    display: block;
    transition: all 0.3s ease;
}
.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 40px 100px rgba(0,0,0,0.6);
    border-color: var(--green);
}
.video-card .poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease, filter 0.3s ease;
}
.video-card:hover .poster {
    transform: scale(1.04);
    filter: brightness(0.7);
}
.video-card .video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, transparent 30%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    transition: background 0.3s ease;
}
.video-card:hover .video-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.30) 50%, rgba(0,0,0,0.65) 100%);
}
.video-card .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 12px 40px rgba(1,101,51,0.5);
    padding-left: 6px;
    z-index: 2;
}
.video-card .play-button::before {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px solid rgba(255,255,255,0.30);
    border-radius: 50%;
    animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0; }
}
.video-card:hover .play-button {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--green-bright);
    box-shadow: 0 16px 50px rgba(13,133,70,0.6);
}
.video-card .video-meta {
    position: absolute;
    left: 24px;
    bottom: 22px;
    z-index: 2;
}
.video-card .video-meta .tag {
    display: inline-block;
    background: var(--green);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 3px;
    margin-bottom: 8px;
}
.video-card .video-meta .title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
    margin: 0;
    text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.video-card .duration {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 3px;
    z-index: 2;
}
/* When playing: hide overlay/button, show video */
.video-card.is-playing .play-button,
.video-card.is-playing .video-overlay,
.video-card.is-playing .poster,
.video-card.is-playing .video-meta,
.video-card.is-playing .duration { display: none; }
.video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Inline service-page video panel (smaller, no section wrap) */
.service-video-panel {
    margin: 0 0 36px;
}
.service-video-panel .video-card {
    aspect-ratio: 16/9;
}

/* Founder video tile (square-ish, alongside portrait) */
.founder-video-tile {
    margin-top: 32px;
}
.founder-video-tile .video-card {
    aspect-ratio: 16/10;
    border: 1px solid rgba(255,255,255,0.10);
}
.founder-video-tile .video-card .video-meta .title {
    font-size: 1.1rem;
}

/* Gallery video tile (matches gallery-tile dimensions) */
.gallery-tile.is-video::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(1,101,51,0.95);
    z-index: 2;
    pointer-events: none;
}
.gallery-tile.is-video::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateX(2px);
    border-style: solid;
    border-width: 9px 0 9px 14px;
    border-color: transparent transparent transparent #fff;
    z-index: 3;
    pointer-events: none;
}
/* Hide play-button graphic + caption overlay once a gallery video starts */
.gallery-tile.is-video.is-playing::before,
.gallery-tile.is-video.is-playing::after,
.gallery-tile.is-video.is-playing .gallery-tile-overlay { display: none; }

/* Mobile responsive */
@media (max-width: 991px) {
    .video-showcase { padding: 70px 0 80px; }
    .video-card .play-button { width: 72px; height: 72px; font-size: 22px; }
}
@media (max-width: 575px) {
    .video-showcase { padding: 56px 0 64px; }
    .video-card .play-button { width: 64px; height: 64px; font-size: 18px; }
    .video-card .video-meta { left: 16px; bottom: 14px; }
}

/* ============================================================
   OUR WORK / PROJECT SECTIONS
   - Home page "Our Work" CTA box
   - Project cards with addresses (home page replacement for bento)
   - Our Work hub (residential/commercial chooser)
   - Per-project sections on residential.php / commercial.php
   ============================================================ */

/* --- Home: Our Work CTA box --- */
.our-work-cta {
    background: var(--ink);
    color: #fff;
    padding: clamp(70px, 10vw, 110px) 0;
    position: relative;
    overflow: hidden;
}
.our-work-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 80% 20%, rgba(1,101,51,0.18), transparent 55%),
        radial-gradient(circle at 15% 85%, rgba(1,101,51,0.10), transparent 50%);
    pointer-events: none;
}
.our-work-cta .container { position: relative; z-index: 1; }
.our-work-cta-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    overflow: hidden;
    background: var(--graphite);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
    color: inherit;
}
.our-work-cta-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
    border-color: var(--green);
    color: inherit;
}
.our-work-cta-text {
    padding: clamp(30px, 5vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.our-work-cta-text .eyebrow { color: var(--green); margin-bottom: 16px; }
.our-work-cta-text h2 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 0.95;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: #fff;
}
.our-work-cta-text h2 .accent { color: var(--green); display: block; }
.our-work-cta-text p {
    color: var(--paper-muted);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 22px;
    max-width: 460px;
}
.our-work-cta-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--green);
}
.our-work-cta-card:hover .our-work-cta-arrow i { transform: translateX(6px); }
.our-work-cta-arrow i { transition: transform 0.25s; }
.our-work-cta-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 320px;
    position: relative;
}
.our-work-cta-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.3));
}
@media (max-width: 767px) {
    .our-work-cta-card { grid-template-columns: 1fr; }
    .our-work-cta-image { order: -1; min-height: 220px; }
}

/* --- Home: Recent Projects with addresses (replaces bento) --- */
.projects-with-address { padding: clamp(70px, 10vw, 110px) 0; background: var(--paper); }
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 26px;
    margin-top: 48px;
}
.project-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.project-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-deep);
    color: inherit;
}
.project-card-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--bone-2);
}
.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.project-card:hover .project-card-image img { transform: scale(1.06); }
.project-card-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--green);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 3px;
    z-index: 2;
}
.project-card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.project-card-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: 1.35rem;
    text-transform: uppercase;
    color: var(--ink-text);
    margin: 0 0 8px;
    line-height: 1.1;
}
.project-card-address {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--ink-muted);
    margin-bottom: 12px;
}
.project-card-address i { color: var(--green); }
.project-card-meta {
    margin-top: auto;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    color: var(--ink-faint);
    letter-spacing: 0.5px;
}

/* --- Our Work hub: 2 large category cards --- */
.work-categories { padding: clamp(70px, 9vw, 110px) 0; background: var(--bone); }
.work-categories-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 48px;
}
.work-category-card {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    box-shadow: var(--shadow-deep);
    isolation: isolate;
}
.work-category-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    z-index: 1;
}
.work-category-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.40) 50%, rgba(0,0,0,0.85) 100%);
    z-index: 2;
}
.work-category-card:hover img { transform: scale(1.06); }
.work-category-card:hover { color: #fff; }
.work-category-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(28px, 4vw, 44px);
}
.work-category-content .label {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--green-bright);
    margin-bottom: 12px;
}
.work-category-content h3 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3.2rem);
    text-transform: uppercase;
    margin: 0 0 12px;
    color: #fff;
    line-height: 0.95;
}
.work-category-content p {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 18px;
    max-width: 420px;
}
.work-category-content .arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #fff;
}
.work-category-card:hover .arrow i { transform: translateX(6px); }
.work-category-content .arrow i { transition: transform 0.25s; }
@media (max-width: 767px) {
    .work-categories-grid { grid-template-columns: 1fr; gap: 22px; }
    .work-category-card { aspect-ratio: 3/2; }
}

/* --- Per-project section (residential.php / commercial.php) --- */
.projects-page-intro { padding: clamp(60px, 8vw, 100px) 0 30px; background: var(--paper); }
.projects-page-intro .intro-text {
    max-width: 720px;
    color: var(--ink-muted);
    font-size: 16px;
    line-height: 1.7;
}
.project-section {
    padding: clamp(50px, 7vw, 90px) 0;
    border-top: 1px solid var(--mist);
}
.project-section:nth-child(even) { background: var(--bone); }
.project-section .container { max-width: 1100px; }
.project-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 36px;
}
.project-section-head .label {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 8px;
    display: block;
}
.project-section-head h2 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    text-transform: uppercase;
    color: var(--ink-text);
    margin: 0 0 8px;
    line-height: 1.05;
}
.project-section-head .address {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-muted);
}
.project-section-head .address i { color: var(--green); }
.project-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}
.project-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--mist);
    padding: 8px 14px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-text);
}
.project-section:nth-child(even) .project-meta-pill { background: var(--paper); }
.project-meta-pill i { color: var(--green); }
.project-meta-pill .label-text { color: var(--ink-faint); margin-right: 2px; font-weight: 500; }
.project-description {
    color: var(--ink-text);
    font-size: 15px;
    line-height: 1.75;
    max-width: 820px;
    margin: 0 0 36px;
}
.project-description strong { color: var(--green); }
.project-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.project-photos .photo {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: var(--shadow-soft);
    background: var(--bone-2);
}
.project-photos .photo img,
.project-photos .photo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.project-photos .photo.feature { grid-column: span 2; aspect-ratio: 16/9; }
@media (max-width: 575px) {
    .project-photos .photo.feature { grid-column: auto; aspect-ratio: 4/3; }
}

/* ============================================================
   HERO - page variant
   Use .hero.hero-page on internal pages for the same 50/50
   text + image layout as the home hero, but shorter and with
   breadcrumbs in place of CTAs.
   ============================================================ */
.hero.hero-page .hero-grid { min-height: 480px; }
.hero.hero-page .hero-text-side { padding: 80px 50px 70px; }
.hero.hero-page .hero-image-side { min-height: 380px; }
.hero.hero-page .hero-title {
    font-size: clamp(2.4rem, 5.6vw, 4.6rem);
    margin-bottom: 22px;
}
.hero.hero-page .hero-text {
    margin-bottom: 24px;
    color: #cfd0d2;
}
.hero.hero-page .breadcrumb-list {
    margin-top: 4px;
    color: var(--paper-muted);
}
.hero.hero-page .breadcrumb-list a { color: var(--paper-muted); }
.hero.hero-page .breadcrumb-list a:hover { color: var(--green-bright); }
.hero.hero-page .breadcrumb-list .current { color: var(--green-bright); }

@media (max-width: 991px) {
    .hero.hero-page .hero-grid { min-height: auto; }
    .hero.hero-page .hero-text-side { padding: 70px 26px 56px; }
    .hero.hero-page .hero-image-side { min-height: 280px; }
    .hero.hero-page .hero-title { font-size: clamp(2rem, 7vw, 3rem); }
}
@media (max-width: 575px) {
    .hero.hero-page .hero-text-side { padding: 56px 18px 44px; }
    .hero.hero-page .hero-image-side { min-height: 220px; }
}

/* ============================================================
   FORM INPUT THEME INHERITANCE
   Inputs follow whatever color-scheme the page declares
   (light by default, dark when [data-theme="dark"]).
   Autofill stays styled correctly in either mode.
   ============================================================ */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--ink-text);
    -webkit-box-shadow: 0 0 0 1000px var(--bone) inset;
    box-shadow: 0 0 0 1000px var(--bone) inset;
    caret-color: var(--ink-text);
    transition: background-color 5000s ease-in-out 0s;
}

/* ============================================================
   THEME TOGGLE BUTTON
   Sun/moon swap. Sits in the top right of the navbar,
   outside the mobile collapse so it's always visible.
   ============================================================ */
.navbar-end-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--mist);
    background: transparent;
    color: var(--ink-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    transition: border-color 0.25s, color 0.25s, background 0.25s, transform 0.2s;
    flex-shrink: 0;
}
.theme-toggle:hover {
    border-color: var(--green);
    color: var(--green);
    transform: rotate(-12deg);
}
.theme-toggle:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}
/* show moon in light, sun in dark; hide the other one */
.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline-block; }
[data-theme="dark"] .theme-icon-light { display: none; }

@media (max-width: 991px) {
    .navbar-end-controls { gap: 6px; }
}

/* ============================================================
   DARK THEME
   Activated by [data-theme="dark"] on <html>.
   Strategy: redefine the "light palette" CSS variables so all
   variable-driven styling flips automatically. Then patch the
   handful of components that use hardcoded #fff backgrounds.
   The site's intentional dark sections (hero, footer, on-dark
   sections) keep their own --ink/--graphite colours untouched.
   ============================================================ */
[data-theme="dark"] {
    color-scheme: dark;

    /* Light palette → dark equivalents */
    --paper:         #0e0f10;
    --bone:          #161718;
    --bone-2:        #1d1e1f;
    --mist:          #2a2b2c;
    --mist-2:        #3a3b3d;

    /* Text: dark text → light text */
    --ink-text:      #e8e8ea;
    --ink-muted:     #a8a9ab;
    --ink-faint:     #6e6f72;

    /* Shadows need to be heavier on dark to stay visible */
    --shadow-soft:   0 8px 20px -8px rgba(0,0,0,0.6);
    --shadow-deep:   0 20px 40px -16px rgba(0,0,0,0.7);
    --shadow-glow:   0 14px 30px -10px rgba(13,133,70,0.50);
}

/* Smooth transition when switching, but not on initial load */
html { transition: background-color 0.25s ease, color 0.25s ease; }
body { transition: background-color 0.25s ease, color 0.25s ease; }

/* --- Hardcoded #fff overrides --- */
[data-theme="dark"] .navbar {
    background: #14151a;
    border-bottom-color: var(--mist);
}
[data-theme="dark"] .navbar-toggler i,
[data-theme="dark"] .nav-link { color: var(--ink-text) !important; }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .contact-form-pane .form-control:focus,
[data-theme="dark"] .contact-form-pane .form-select:focus {
    background: var(--bone-2);
}
[data-theme="dark"] .btn-cta-dark:hover {
    background: var(--paper);
    color: var(--ink-text);
}
[data-theme="dark"] .project-card { background: #1a1b1d; }
[data-theme="dark"] .project-meta-pill { background: #1a1b1d; color: var(--ink-text); }
[data-theme="dark"] .project-section:nth-child(even) .project-meta-pill { background: #14151a; }

/* --- Dropdown menus --- */
[data-theme="dark"] .dropdown-menu {
    background: #1a1b1d;
    border-color: var(--mist);
}
[data-theme="dark"] .dropdown-item { color: var(--ink-text); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background: #2a2b2c;
    color: var(--green-bright);
}

/* --- Sticky mobile bar (already dark-friendly, but tighten contrast) --- */
[data-theme="dark"] .mobile-sticky-bar { border-top-color: var(--mist); }

/* --- Logo: light variant works on either theme; if a dedicated dark
   logo exists at images/logo-dark.png, drop it in and uncomment:
[data-theme="dark"] .brand-logo { content: url('images/logo-dark.png'); }
*/

/* --- Hero / Footer / on-dark sections stay dark in both themes
   (no override needed - they hardcode --ink/--graphite which we
    deliberately do not change). --- */

/* ============================================================
   INSTAGRAM FEED SECTION (Elfsight)
   ============================================================ */
.instagram-feed-section {
    padding: clamp(64px, 9vw, 110px) 0;
    background: var(--bone);
    border-top: 1px solid var(--mist);
}
.instagram-feed-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 44px;
}
.instagram-feed-head .eyebrow { margin-bottom: 14px; }
.instagram-feed-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--ink-text);
    margin: 0 0 18px;
}
.instagram-feed-title .lead { color: var(--ink-text); display: block; }
.instagram-feed-title .accent { color: var(--green); display: block; }
.instagram-feed-sub {
    color: var(--ink-muted);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}
@media (max-width: 575px) {
    .instagram-feed-section { padding: 56px 0 64px; }
    .instagram-feed-head { margin-bottom: 30px; }
}

/* ============================================================
   WHATSAPP FLOATING BUTTON
   Bottom right corner. On mobile, sits above the sticky CTA
   bar so it doesn't overlap.
   ============================================================ */
.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 14px 18px;
    background: #25D366;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.4px;
    border-radius: 999px;
    box-shadow: 0 14px 32px -10px rgba(37,211,102,0.55), 0 4px 12px rgba(0,0,0,0.18);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.whatsapp-float i {
    font-size: 22px;
    line-height: 1;
}
.whatsapp-float:hover,
.whatsapp-float:focus {
    color: #fff;
    background: #1ebd5b;
    transform: translateY(-2px);
    box-shadow: 0 18px 38px -10px rgba(37,211,102,0.65), 0 6px 14px rgba(0,0,0,0.22);
}
.whatsapp-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* On mobile, lift above the sticky bottom CTA bar and shrink to icon-only */
@media (max-width: 991px) {
    .whatsapp-float {
        bottom: 84px;          /* clear of sticky CTA bar */
        right: 16px;
        padding: 14px;
        width: 56px;
        height: 56px;
        justify-content: center;
    }
    .whatsapp-float-label { display: none; }
    .whatsapp-float i { font-size: 26px; }
}

/* Dark theme tweak */
[data-theme="dark"] .instagram-feed-section { border-top-color: var(--mist); }

/* ============================================================
   BLOG INDEX + ARTICLE PAGES
   ============================================================ */

/* --- Featured (first post) --- */
.blog-featured { padding: clamp(48px, 6vw, 80px) 0 0; background: var(--paper); }
.blog-featured-card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: var(--bone);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s, box-shadow 0.3s;
}
.blog-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-deep);
    color: inherit;
}
.blog-featured-image {
    background-size: cover;
    background-position: center;
    min-height: 360px;
}
.blog-featured-body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; }
.blog-featured-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--ink-text);
    margin: 14px 0 14px;
}
.blog-featured-excerpt { color: var(--ink-muted); font-size: 15px; line-height: 1.7; margin-bottom: 18px; }
.blog-featured-meta {
    color: var(--ink-faint);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 22px;
}
.blog-featured-meta .dot { opacity: 0.5; }
.blog-featured-arrow {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--green);
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
.blog-featured-card:hover .blog-featured-arrow i { transform: translateX(6px); }
.blog-featured-arrow i { transition: transform 0.25s; }
@media (max-width: 767px) {
    .blog-featured-card { grid-template-columns: 1fr; }
    .blog-featured-image { min-height: 220px; }
}

/* --- Listing grid + cards --- */
.blog-listing { padding: clamp(56px, 8vw, 100px) 0; background: var(--paper); }
.blog-listing-head { margin-bottom: 44px; }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 26px;
}
.blog-card {
    background: var(--paper);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--mist);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-deep);
    border-color: var(--green);
    color: inherit;
}
.blog-card-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--bone-2);
}
.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.blog-card:hover .blog-card-image img { transform: scale(1.06); }
.blog-card-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--green);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 3px;
    z-index: 2;
}
.blog-card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.blog-card-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: 1.25rem;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--ink-text);
    margin: 0 0 12px;
}
.blog-card-excerpt {
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 14px;
}
.blog-card-meta {
    margin-top: auto;
    color: var(--ink-faint);
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

/* --- Article (single post) --- */
.blog-article { padding: clamp(50px, 7vw, 90px) 0; background: var(--paper); }
.blog-article .container { max-width: 820px; }
.blog-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: var(--ink-faint);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--mist);
}
.blog-article-meta i { color: var(--green); margin-right: 6px; }
.blog-article-content { color: var(--ink-text); font-size: 17px; line-height: 1.85; }
.blog-article-content p { margin: 0 0 22px; color: var(--ink-text); }
.blog-article-content p.lead {
    font-size: 19px;
    line-height: 1.7;
    color: var(--ink-text);
    font-weight: 500;
    margin-bottom: 30px;
}
.blog-article-content h2 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(1.6rem, 3.2vw, 2rem);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--ink-text);
    margin: 48px 0 18px;
}
.blog-article-content h3 {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--ink-text);
    margin: 30px 0 14px;
}
.blog-article-content ul,
.blog-article-content ol { margin: 0 0 24px 0; padding-left: 22px; }
.blog-article-content li { margin-bottom: 8px; }
.blog-article-content strong { color: var(--ink-text); font-weight: 700; }
.blog-article-content a {
    color: var(--green);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.blog-article-content a:hover { color: var(--green-bright); }
.blog-article-content blockquote {
    border-left: 4px solid var(--green);
    margin: 30px 0;
    padding: 6px 0 6px 22px;
    font-style: italic;
    color: var(--ink-muted);
    font-size: 18px;
    line-height: 1.7;
}
.blog-article-content figure {
    margin: 36px 0;
}
.blog-article-content figure img {
    width: 100%;
    border-radius: 6px;
    box-shadow: var(--shadow-soft);
}
.blog-article-content figcaption {
    margin-top: 10px;
    color: var(--ink-faint);
    font-size: 13px;
    text-align: center;
    font-style: italic;
}
.blog-callout {
    background: var(--bone);
    border-left: 4px solid var(--green);
    padding: 22px 26px;
    margin: 30px 0;
    border-radius: 4px;
}
.blog-callout strong { color: var(--green); display: block; margin-bottom: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.blog-callout p { margin: 0; color: var(--ink-text); }

/* Related posts wrapper */
.blog-related { padding: clamp(60px, 8vw, 100px) 0; background: var(--bone); }
.blog-related-head { margin-bottom: 44px; text-align: center; }
.blog-related .blog-card { background: var(--paper); }

/* --- Dark theme tweaks --- */
[data-theme="dark"] .blog-card { background: #1a1b1d; border-color: var(--mist); }
[data-theme="dark"] .blog-featured-card { background: #1a1b1d; }
[data-theme="dark"] .blog-callout { background: #1a1b1d; }

/* ============================================================
   BLOG
   ============================================================ */
.hero-blog .hero-grid { min-height: 520px; }
.hero-title-blog { font-size: clamp(1.8rem, 4.6vw, 3.6rem) !important; line-height: 1.05 !important; }

.post-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 22px 0 28px;
    color: var(--paper-muted);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
}
.post-byline-item { display: inline-flex; align-items: center; gap: 6px; }
.post-byline-item i { color: var(--green-bright); font-size: 13px; }

/* Blog filter bar */
.blog-filter-section {
    padding: 32px 0 0;
    background: var(--paper);
}
.blog-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.blog-filter-pill {
    background: transparent;
    border: 1px solid var(--mist);
    color: var(--ink-text);
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.6px;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.blog-filter-pill:hover { border-color: var(--green-bright); color: var(--green); }
.blog-filter-pill.is-active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.blog-filter-pill .count {
    background: rgba(0,0,0,0.10);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.blog-filter-pill.is-active .count { background: rgba(255,255,255,0.25); }

/* Blog grid */
.blog-grid-section { padding: clamp(40px, 6vw, 80px) 0 clamp(70px, 10vw, 110px); background: var(--paper); }
.blog-card .project-card-title { font-size: 1.2rem; line-height: 1.15; }
.blog-card-excerpt {
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 8px 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Post body typography */
.post-body-section { padding: clamp(50px, 7vw, 90px) 0; background: var(--paper); }
.post-body { max-width: 760px; margin: 0 auto; }
.post-body > p:first-of-type::first-letter {
    font-size: 3.6rem;
    font-weight: 900;
    float: left;
    line-height: 0.9;
    margin: 4px 14px 0 0;
    color: var(--green);
    font-family: 'Big Shoulders Display', sans-serif;
}
.post-body p {
    color: var(--ink-text);
    font-size: 17px;
    line-height: 1.78;
    margin: 0 0 22px;
}
.post-body h2 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    color: var(--ink-text);
    margin: 48px 0 18px;
    padding-top: 14px;
    border-top: 2px solid var(--green);
    display: inline-block;
    padding-right: 30px;
}
.post-body h3 {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--ink-text);
    margin: 32px 0 12px;
}
.post-body ul, .post-body ol {
    margin: 0 0 24px;
    padding-left: 22px;
    color: var(--ink-text);
    font-size: 17px;
    line-height: 1.78;
}
.post-body ul li, .post-body ol li { margin-bottom: 8px; }
.post-body ul li::marker { color: var(--green); }
.post-body ol li::marker { color: var(--green); font-weight: 700; }
.post-body a {
    color: var(--green);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.post-body a:hover { color: var(--green-bright); }
.post-body blockquote {
    border-left: 4px solid var(--green);
    padding: 6px 0 6px 22px;
    margin: 28px 0;
    font-style: italic;
    color: var(--ink-text);
    font-size: 18px;
    line-height: 1.6;
}
.post-body strong { color: var(--ink-text); font-weight: 700; }
.post-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
}
.post-body table th,
.post-body table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mist);
}
.post-body table th {
    background: var(--bone);
    font-weight: 700;
    color: var(--ink-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
}
.post-body table td { color: var(--ink-text); }
.post-body figure {
    margin: 30px 0;
}
.post-body figure img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: var(--shadow-soft);
}
.post-body figure figcaption {
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink-muted);
    font-style: italic;
    text-align: center;
}
.post-callout {
    background: var(--bone);
    border-left: 4px solid var(--green);
    padding: 20px 24px;
    border-radius: 0 6px 6px 0;
    margin: 28px 0;
}
.post-callout strong { display: block; margin-bottom: 6px; color: var(--green); text-transform: uppercase; font-size: 12px; letter-spacing: 1.4px; }
.post-callout p { font-size: 15px; margin: 0; }

/* Related posts section */
.related-posts { padding: clamp(60px, 8vw, 90px) 0; background: var(--bone); border-top: 1px solid var(--mist); }
.related-posts-head { text-align: center; margin-bottom: 36px; }
.related-posts-head .eyebrow { margin-bottom: 12px; }

@media (max-width: 575px) {
    .post-body p, .post-body ul, .post-body ol { font-size: 16px; }
    .post-body > p:first-of-type::first-letter { font-size: 3rem; }
}

/* Dark mode for blog */
[data-theme="dark"] .blog-filter-pill { color: var(--ink-text); }
[data-theme="dark"] .blog-filter-pill .count { background: rgba(255,255,255,0.10); }
[data-theme="dark"] .post-callout { background: #1a1b1d; }
[data-theme="dark"] .related-posts { border-top-color: var(--mist); }

/* ============================================================
   SERVICE AREAS PAGE
   ============================================================ */
.suburb-grid-section { padding: clamp(50px, 7vw, 90px) 0; background: var(--paper); }

.suburb-region-card {
    background: var(--bone);
    border: 1px solid var(--mist);
    border-radius: 8px;
    padding: 28px 32px;
    margin-bottom: 22px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.suburb-region-card:hover { border-color: var(--green); box-shadow: var(--shadow-soft); }

.suburb-region-head { margin-bottom: 18px; }
.suburb-region-head h3 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    text-transform: uppercase;
    color: var(--green);
    margin: 0 0 8px;
    letter-spacing: 0.01em;
}
.suburb-region-desc {
    color: var(--ink-muted);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
    max-width: 760px;
}

.suburb-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.suburb-chip {
    display: inline-block;
    background: var(--paper);
    border: 1px solid var(--mist);
    color: var(--ink-text);
    padding: 6px 14px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2px;
    transition: border-color 0.2s, color 0.2s;
}
.suburb-chip:hover { border-color: var(--green-bright); color: var(--green); }

/* Footer service areas section */
.footer-service-areas {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-service-areas h2 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: rgba(255,255,255,0.95);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--green);
    display: inline-block;
}
.footer-suburb-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.footer-suburb-list a {
    display: inline-block;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
    padding: 5px 12px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.footer-suburb-list a:hover {
    background: var(--green);
    color: #fff;
}

/* Dark mode */
[data-theme="dark"] .suburb-region-card { background: #181a1c; }
[data-theme="dark"] .suburb-chip { background: #1f2123; color: var(--ink-text); }

/* ============================================================
   GENERIC CONTENT SECTION (used on service-areas + others)
   ============================================================ */
.content-section { padding: clamp(50px, 7vw, 90px) 0; background: var(--paper); }
.content-section-light { background: var(--bone); }
.content-section .section-lead { color: var(--ink-text); }

.content-image-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    aspect-ratio: 4 / 3;
}
.content-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.content-image-wrap:hover img { transform: scale(1.03); }

[data-theme="dark"] .content-section-light { background: #181a1c; }

/* ============================================================
   FAQ page - accordion list with details/summary
   ============================================================ */
.faq-group-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-text);
    margin: 48px 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--green);
}
.faq-group-title:first-of-type { margin-top: 0; }
.faq-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 8px; }

.faq-item {
    border-bottom: 1px solid var(--mist);
    background: transparent;
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-weight: 600;
    color: var(--ink-text);
    transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--green); }
.faq-q {
    font-size: 16px;
    line-height: 1.4;
    flex: 1;
}
.faq-toggle {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: transform 0.25s ease, background 0.2s ease;
}
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
.faq-a {
    padding: 0 0 22px;
    color: var(--ink-muted);
    line-height: 1.7;
    font-size: 15px;
}
.faq-a p { margin: 0 0 12px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a ul { padding-left: 22px; margin: 0 0 12px; }
.faq-a a { color: var(--green); font-weight: 600; }
.faq-a a:hover { text-decoration: underline; }

@media (max-width: 575px) {
    .faq-q { font-size: 15px; }
    .faq-group-title { margin: 36px 0 12px; }
}

/* ============================================================
   Privacy page - prose lead paragraph and contact block
   ============================================================ */
.prose .lead-paragraph {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-text);
    border-left: 3px solid var(--green);
    padding-left: 18px;
    margin: 0 0 30px;
}
.prose .contact-block {
    background: var(--mist);
    border-left: 3px solid var(--green);
    padding: 24px 28px;
    border-radius: 4px;
    margin: 24px 0;
}
.prose .contact-block p { margin: 0; line-height: 1.9; }

/* ============================================================
   Suburb landing pages - chip grid for nearby suburbs
   ============================================================ */
a.suburb-chip { text-decoration: none; }
.suburb-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}
.suburb-chip-grid .suburb-chip { font-size: 14px; padding: 8px 16px; }

/* Suburb landing - hero CTA row */
.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px 0 24px;
}

/* ============================================================
   Contact form expectations - "what happens after you send"
   ============================================================ */
.form-expectations {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--mist);
    border-left: 3px solid var(--green);
    padding: 16px 18px;
    border-radius: 4px;
}
.form-expectations li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-muted);
}
.form-expectations li i {
    color: var(--green);
    font-size: 14px;
    width: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}
.form-expectations li strong { color: var(--ink-text); font-weight: 700; }

/* ============================================================
   Google verification badges + rating banner on testimonial cards
   ============================================================ */
.quote-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--ink-faint, #888);
    letter-spacing: 0.3px;
    font-weight: 500;
}
.quote-source i.fa-google {
    color: #4285F4;
    font-size: 12px;
}
.quote-attribution { display: flex; flex-direction: column; gap: 2px; }

/* Google rating banner at the top of testimonials page */
.google-rating-banner {
    display: flex;
    align-items: center;
    gap: 22px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
    border: 1px solid var(--mist);
    border-left: 4px solid #4285F4;
    border-radius: 6px;
    padding: 22px 26px;
    margin: 0 auto 36px;
    max-width: 720px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}
.grb-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 22px;
    border-right: 1px solid var(--mist);
}
.grb-num {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 800;
    font-size: 42px;
    line-height: 1;
    color: var(--ink-text);
}
.grb-stars {
    color: #FFB400;
    font-size: 12px;
    margin-top: 4px;
    letter-spacing: 1px;
}
.grb-body { flex: 1; }
.grb-label {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--ink-text);
    font-weight: 500;
}
.grb-label i.fa-google { color: #4285F4; margin-right: 4px; }
.grb-label strong { font-weight: 700; }
.grb-sub {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-muted);
    line-height: 1.5;
}

/* "See all reviews on Google" CTA below testimonials grid */
.testimonials-cta {
    text-align: center;
    margin-top: 42px;
    padding: 24px;
    border-top: 1px solid var(--mist);
}
.testimonials-cta p { margin: 0; font-size: 15px; color: var(--ink-muted); }
.testimonials-cta a {
    color: var(--green);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}
.testimonials-cta a:hover { border-bottom-color: var(--green); }
.testimonials-cta a i.fa-google { color: #4285F4; margin-right: 4px; }

@media (max-width: 575px) {
    .google-rating-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 18px 20px;
    }
    .grb-score {
        flex-direction: row;
        gap: 12px;
        padding-right: 0;
        border-right: 0;
        border-bottom: 1px solid var(--mist);
        padding-bottom: 12px;
        width: 100%;
        align-items: center;
    }
}

/* ============================================================
   Award Ribbon (moving announcement bar, top of every page)
   Links to the 2026 Quality Business Award page.
   Rendered by header.php; toggled via $AWARD_SHOW in config.php.
   ============================================================ */
.award-ribbon {
    display: block;
    position: relative;
    background: linear-gradient(90deg, var(--green-deep) 0%, var(--green) 48%, var(--green-bright) 100%);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,0.18);
    -webkit-tap-highlight-color: transparent;
}
.award-ribbon:hover,
.award-ribbon:focus-visible { color: #fff; text-decoration: none; }
.award-ribbon:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* Soft edge fade so text appears / disappears cleanly at the sides */
.award-ribbon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(1,61,34,0.55) 0%, rgba(1,61,34,0) 9%,
        rgba(1,61,34,0) 91%, rgba(1,61,34,0.55) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ---- Scrolling viewport + track ---- */
.award-ribbon__viewport {
    display: flex;
    overflow: hidden;
    width: 100%;
    padding: 8px 0;
}
.award-ribbon__track {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    will-change: transform;
    animation: award-scroll 80s linear infinite;
}
.award-ribbon:hover .award-ribbon__track,
.award-ribbon:focus-visible .award-ribbon__track { animation-play-state: paused; }

@keyframes award-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* halfway = start of the duplicate half */
}

/* ---- One repeated message ---- */
.award-ribbon__item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.2;
}
/* gold diamond separator preceding each message */
.award-ribbon__item::before {
    content: '';
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    margin: 0 22px;
    background: #ffd25a;
    transform: rotate(45deg);
    opacity: 0.85;
}

.award-ribbon__icon { color: #ffd25a; font-size: 13px; }
.award-ribbon__badge {
    color: #ffd25a;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
.award-ribbon__title { color: #ffffff; }
.award-ribbon__by {
    color: rgba(255,255,255,0.72);
    font-size: 11px;
    font-weight: 500;
}
.award-ribbon__by::before {
    content: '\2022';               /* middot */
    margin-right: 8px;
    color: rgba(255,255,255,0.45);
}

/* ---- Persistent "View award" CTA pinned right (desktop/tablet) ---- */
.award-ribbon__cta {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    z-index: 2;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 0 18px 0 40px;
    font-family: 'Manrope', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #fff;
    white-space: nowrap;
    background: linear-gradient(90deg, rgba(1,61,34,0) 0%, var(--green-deep) 32%);
}
.award-ribbon__cta i { transition: transform 0.25s ease; }
.award-ribbon:hover .award-ribbon__cta i { transform: translateX(3px); }
@media (min-width: 768px) {
    .award-ribbon__cta { display: inline-flex; }
}

/* ---- Static fallback (shown only under reduced-motion) ---- */
.award-ribbon__static {
    display: none;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: 8px 16px;
    text-align: center;
    font-family: 'Manrope', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
    .award-ribbon__viewport { display: none; }
    .award-ribbon__cta      { display: none; }
    .award-ribbon__static   { display: flex; }
}

/* ---- Dark mode: deepen the gradient to sit with the darker navbar ---- */
[data-theme="dark"] .award-ribbon {
    background: linear-gradient(90deg, #012e19 0%, var(--green-deep) 48%, var(--green) 100%);
    border-bottom-color: rgba(0,0,0,0.45);
}
[data-theme="dark"] .award-ribbon::after {
    background: linear-gradient(90deg,
        rgba(1,25,13,0.6) 0%, rgba(1,25,13,0) 9%,
        rgba(1,25,13,0) 91%, rgba(1,25,13,0.6) 100%);
}
[data-theme="dark"] .award-ribbon__cta {
    background: linear-gradient(90deg, rgba(1,46,25,0) 0%, #012e19 32%);
}

/* Tighten spacing on very small screens */
@media (max-width: 575px) {
    .award-ribbon__viewport { padding: 7px 0; }
    .award-ribbon__item     { font-size: 12px; }
    .award-ribbon__item::before { margin: 0 16px; }
}

/* ============================================================
   Hero CTA buttons

   .btn-primary and .btn-ghost are used by every hero that carries a call/quote
   pair — the hundred suburb pages among them — but the original stylesheet
   never defined either. Bootstrap owns .btn-primary and contributes only its
   custom properties without the .btn base class, so the "Call" button rendered
   as bare inline text in the site's link colour and .btn-ghost rendered as
   nothing at all. These rules give them the same shape as .btn-green and
   .btn-outline-light, which is what the markup was clearly written for.

   They sit at the end of the file deliberately: Bootstrap loads first, and the
   .btn-primary custom properties above would otherwise still be in play.
   ============================================================ */

.hero .btn-primary,
.hero .btn-ghost,
.content-section .btn-primary,
.content-section .btn-ghost,
a.btn-primary,
a.btn-ghost {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 12px;
    padding: 14px 28px;
    border-radius: 4px;
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
}

a.btn-primary,
.hero .btn-primary,
.content-section .btn-primary {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
a.btn-primary:hover,
a.btn-primary:focus-visible,
.hero .btn-primary:hover,
.content-section .btn-primary:hover {
    background: var(--green-deep);
    border-color: var(--green-deep);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow);
}

/* The ghost variant sits on the dark hero panel, so it borrows the light
   outline treatment rather than the ink one. */
a.btn-ghost,
.hero .btn-ghost,
.content-section .btn-ghost {
    background: transparent;
    border-color: var(--ash-2);
    color: #fff;
}
a.btn-ghost:hover,
a.btn-ghost:focus-visible,
.hero .btn-ghost:hover,
.content-section .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--green-bright);
    color: #fff;
    transform: translateY(-1px);
}

/* On a light section the ghost button needs ink, not white, or it disappears. */
.content-section-light a.btn-ghost,
.content-section-light .btn-ghost {
    border-color: var(--mist-2);
    color: var(--ink-text);
}
.content-section-light a.btn-ghost:hover,
.content-section-light .btn-ghost:hover {
    background: var(--green-tint-l);
    border-color: var(--green);
    color: var(--green);
}

/* ============================================================
   Navbar cart link
   
   Rendered by the header on every page, not just shop pages, so it
   cannot live in shop.css — that sheet only loads on WooCommerce
   routes, and the cart button came out unstyled everywhere else,
   overlapping the brand tagline.
   ============================================================ */

/* ------------------------------------------------------------
   Navbar cart link — sits beside .theme-toggle in .navbar-end-controls
   ------------------------------------------------------------ */
.dm-cart-link {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--mist);
    background: transparent;
    color: var(--ink-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.dm-cart-link:hover,
.dm-cart-link:focus {
    border-color: var(--green);
    color: var(--green);
}
.dm-cart-link:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}
.dm-cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--paper);
}
.dm-cart-count.is-empty { display: none; }
[data-theme="dark"] .dm-cart-count { box-shadow: 0 0 0 2px #14151a; }

/* ------------------------------------------------------------
   Navbar crowding

   The original navbar fitted the brand, the tagline, ten links, the quote
   button and one 40px control into the 1320px xxl container with almost
   nothing to spare. The cart button adds fifty more pixels, and since
   .brand-tagline is `white-space: nowrap` the surplus ran out of the brand and
   underneath the controls rather than wrapping.

   Bootstrap caps the container at 1320px at every desktop width, so this is not
   something a breakpoint fixes — the row is simply 30-odd pixels over budget at
   all sizes. The ten links each carry 14px of margin on both sides; taking that
   to 9px reclaims 100px, which is more than enough and reads as slightly
   tighter nav spacing rather than a missing tagline.
   ------------------------------------------------------------ */
@media (min-width: 992px) {
    .nav-link { margin: 0 9px; }
}
.navbar-end-controls { flex-shrink: 0; }