/*==================================================
    TAS Painting — Components
==================================================*/

/*==================================================
    Buttons
==================================================*/

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-sm);
    letter-spacing:.01em;
    padding:15px 28px;
    border-radius:var(--radius-pill);
    white-space:nowrap;
    transition:var(--transition-normal);
    cursor:pointer;
}

.btn svg{ flex-shrink:0; }

.btn-primary{
    background:var(--gradient-brand);
    color:#fff;
    box-shadow:var(--shadow-sm);
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-hover);
}

.btn-outline{
    background:transparent;
    color:var(--color-ink);
    border:1.5px solid var(--color-border);
}

.btn-outline:hover{
    border-color:var(--color-orange);
    color:var(--color-orange);
    transform:translateY(-2px);
}

.btn-dark{
    background:var(--color-ink);
    color:#fff;
}

.btn-dark:hover{
    transform:translateY(-2px);
    box-shadow:0 20px 46px rgba(0,0,0,.35);
}

.btn-ghost{
    background:rgba(255,255,255,.14);
    color:#fff;
    border:1.5px solid rgba(255,255,255,.5);
    backdrop-filter:blur(6px);
}

.btn-ghost:hover{
    background:rgba(255,255,255,.24);
    transform:translateY(-2px);
}

.btn-sm{ padding:11px 20px; font-size:var(--fs-xs); }
.btn-lg{ padding:18px 34px; font-size:var(--fs-md); }

/*==================================================
    Preloader
==================================================*/

.preloader{
    position:fixed;
    inset:0;
    z-index:var(--z-loader);
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--space-6);
}

.preloader-mark{
    width:64px;
    height:auto;
    animation:floatSlow 2.4s ease-in-out infinite;
}

.preloader-bar{
    width:min(220px, 60vw);
    height:4px;
    border-radius:var(--radius-pill);
    background:rgba(26,26,26,.08);
    overflow:hidden;
}

.preloader-bar-fill{
    display:block;
    height:100%;
    width:0%;
    background:var(--gradient-brand);
    border-radius:var(--radius-pill);
}

.preloader-count{
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-sm);
    color:var(--text-light);
    letter-spacing:.06em;
}

.scroll-progress-bar{
    position:fixed;
    top:0;
    left:0;
    width:0%;
    height:3px;
    background:var(--gradient-brand);
    z-index:1030;
}

/*==================================================
    Header
==================================================*/

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:var(--z-header);
    padding:18px 0;
    transition:background .35s ease, box-shadow .35s ease, padding .35s ease, border-color .35s ease;
    border-bottom:1px solid transparent;
}

.site-header.is-scrolled{
    background:rgba(251,247,240,.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:var(--shadow-sm);
    padding:12px 0;
    border-bottom-color:var(--color-border);
}

.site-header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-6);
}

.site-logo img{
    height:68px;
    width:auto;
    transition:height .3s ease;
}

.site-header.is-scrolled .site-logo img{
    height:56px;
}

.main-nav ul{
    display:flex;
    align-items:center;
    gap:var(--space-8);
}

.main-nav a{
    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-sm);
    color:var(--color-ink);
    position:relative;
    padding-bottom:4px;
}

.main-nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:2px;
    background:var(--gradient-brand);
    border-radius:2px;
    transition:width .3s var(--ease-out-soft);
}

.main-nav a:hover::after,
.main-nav a.is-active::after{
    width:100%;
}

.main-nav a.is-active{
    color:var(--color-orange);
}

.header-actions{
    display:flex;
    align-items:center;
    gap:var(--space-5);
}

.header-phone{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-sm);
    color:var(--color-ink);
}

.header-phone:hover{ color:var(--color-orange); }

.header-whatsapp{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--color-surface);
    color:var(--color-ink);
}

.header-whatsapp:hover{
    background:#25D366;
    color:#fff;
}

.mobile-nav-trigger{
    position:relative;
    z-index:calc(var(--z-nav-overlay) + 2);
    display:none;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:50%;
    border:0;
    background:var(--color-surface);
    color:var(--color-ink);
    cursor:pointer;
    transition:background .3s ease, transform .2s ease;
    -webkit-tap-highlight-color:transparent;
}

.mobile-nav-trigger:hover{ background:var(--gradient-brand); }
.mobile-nav-trigger:hover .mobile-nav-trigger-bars span{ background:#fff; }

.mobile-nav-trigger:active{ transform:scale(.94); }

.mobile-nav-trigger.is-active{
    background:var(--gradient-brand);
    box-shadow:0 8px 20px -8px rgba(242,118,30,.5);
}

.mobile-nav-trigger-bars{
    position:relative;
    width:19px;
    height:13px;
    display:block;
}

.mobile-nav-trigger-bars span{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    border-radius:var(--radius-pill);
    background:var(--color-ink);
    transition:transform .32s var(--ease-out-soft), opacity .2s ease, top .32s var(--ease-out-soft), width .25s ease;
}

.mobile-nav-trigger-bars span:nth-child(1){ top:0; }
.mobile-nav-trigger-bars span:nth-child(2){ top:5.5px; width:72%; }
.mobile-nav-trigger-bars span:nth-child(3){ top:11px; }

.mobile-nav-trigger.is-active .mobile-nav-trigger-bars span{ background:#fff; }

.mobile-nav-trigger.is-active .mobile-nav-trigger-bars span:nth-child(1){
    top:5.5px;
    transform:rotate(45deg);
}

.mobile-nav-trigger.is-active .mobile-nav-trigger-bars span:nth-child(2){
    opacity:0;
    width:0;
}

.mobile-nav-trigger.is-active .mobile-nav-trigger-bars span:nth-child(3){
    top:5.5px;
    width:100%;
    transform:rotate(-45deg);
}

/*==================================================
    Mobile Nav Panel
==================================================*/

.mobile-nav-backdrop{
    position:fixed;
    inset:0;
    background:rgba(20,17,14,.55);
    backdrop-filter:blur(2px);
    z-index:var(--z-nav-overlay);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
}

.mobile-nav{
    position:fixed;
    top:0;
    right:0;
    height:100%;
    width:min(360px, 86vw);
    background:var(--color-cream);
    z-index:calc(var(--z-nav-overlay) + 1);
    padding:var(--space-8) var(--space-6);
    display:flex;
    flex-direction:column;
    gap:var(--space-8);
    transform:translateX(100%);
    transition:transform .4s var(--ease-signature);
    box-shadow:-20px 0 60px rgba(0,0,0,.2);
}

body.mobile-nav-open .mobile-nav-backdrop{
    opacity:1;
    visibility:visible;
}

body.mobile-nav-open .mobile-nav{
    transform:translateX(0);
}

/* The header (and the hamburger trigger inside it) establishes its
   own stacking context via position:fixed + z-index. Without this,
   its z-index never escapes above the slide-in panel/backdrop
   (siblings with a higher z-index), which would silently block
   clicks on the trigger once the panel is open — bump the whole
   header above both while the panel is open so the same button
   can always open AND close the menu. */
body.mobile-nav-open .site-header{
    z-index:calc(var(--z-nav-overlay) + 3);
}

body.mobile-nav-open,
body.quote-open{
    overflow:hidden;
}

.mobile-nav-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.mobile-nav-close{
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--color-surface);
    display:flex;
    align-items:center;
    justify-content:center;
}

.mobile-nav ul{
    display:flex;
    flex-direction:column;
    gap:var(--space-1);
}

.mobile-nav ul a{
    display:block;
    padding:var(--space-3) 0;
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-lg);
    color:var(--color-ink);
    border-bottom:1px solid var(--color-border);
}

.mobile-nav-cta{
    margin-top:auto;
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
}

/*==================================================
    Desktop Mega Menu (Locations)
==================================================*/

.nav-has-mega{ position:relative; }

.nav-mega-trigger{
    display:flex;
    align-items:center;
    gap:5px;
    background:none;
    border:0;
    padding:0 0 4px;
    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-sm);
    color:var(--color-ink);
    cursor:pointer;
    position:relative;
}

.nav-mega-trigger::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:2px;
    background:var(--gradient-brand);
    border-radius:2px;
    transition:width .3s var(--ease-out-soft);
}

.nav-has-mega:hover .nav-mega-trigger::after,
.nav-has-mega.is-open .nav-mega-trigger::after{
    width:100%;
}

.nav-mega-caret{
    transform:rotate(-90deg);
    transition:transform .25s ease;
}

.nav-has-mega:hover .nav-mega-caret,
.nav-has-mega.is-open .nav-mega-caret{
    transform:rotate(90deg);
}

.mega-menu{
    position:absolute;
    top:100%;
    left:50%;
    width:520px;
    max-width:80vw;
    padding-top:18px;
    transform:translate(-50%, 6px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
    z-index:var(--z-dropdown);
}

.nav-has-mega:hover .mega-menu,
.nav-has-mega.is-open .mega-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%, 0);
}

.mega-menu-inner{
    background:#fff;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    padding:var(--space-6);
}

.mega-menu-heading{
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-xs);
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-light);
    margin-bottom:var(--space-4);
}

.mega-menu-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-2) var(--space-6);
}

/* Locations mega menu — a genuine 3x3 grid (9 Location pages), wider than
   the default 2-column mega menu above so three columns of suburb names
   never wrap. */
.mega-menu--locations{ width:640px; }
.mega-menu-cols--3{ grid-template-columns:repeat(3, 1fr); }
.mega-menu-viewall{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    margin-top:var(--space-4);
    padding-top:var(--space-4);
    border-top:1px solid var(--color-border);
    color:var(--color-orange);
}

.mega-menu-col{
    display:flex;
    flex-direction:column;
    gap:var(--space-1);
}

.mega-menu-link{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    padding:var(--space-2) var(--space-3);
    border-radius:var(--radius-sm);
    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-sm);
    color:var(--color-ink);
    transition:background .2s ease, color .2s ease;
}

.mega-menu-link svg{ color:var(--color-orange); flex-shrink:0; }

/* .main-nav a::after (the underline-on-hover effect used by the top
   level nav links) is inherited here too since these links live inside
   .main-nav — explicitly kill it so mega menu items only ever get the
   background highlight below, never an underline. */
.mega-menu-link::after,
.mega-menu-link:hover::after{
    content:none;
    display:none;
    width:0;
}

.mega-menu-link:hover,
.mega-menu-link:focus-visible{
    background:var(--color-surface);
    color:var(--color-orange);
    text-decoration:none;
}

/*==================================================
    Mobile Nav — Locations Accordion
==================================================*/

.mobile-nav-accordion-item{
    border-bottom:1px solid var(--color-border);
}

.mobile-nav-accordion-trigger{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:none;
    border:0;
    padding:var(--space-3) 0;
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-lg);
    color:var(--color-ink);
    cursor:pointer;
}

.mobile-nav-accordion-icon{
    flex-shrink:0;
    color:var(--color-orange);
    transform:rotate(-90deg);
    transition:transform .3s ease;
}

.mobile-nav-accordion-trigger[aria-expanded="true"] .mobile-nav-accordion-icon{
    transform:rotate(90deg);
}

.mobile-nav-accordion-panel{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s var(--ease-out-soft);
}

.mobile-nav .mobile-nav-accordion-panel a{
    display:block;
    padding:var(--space-2) 0 var(--space-2) var(--space-3);
    font-family:var(--font-body);
    font-weight:var(--fw-medium);
    font-size:var(--fs-sm);
    color:var(--text-body);
    border-bottom:0;
}

/*==================================================
    Hero
==================================================*/

.hero{
    position:relative;
    padding:calc(var(--header-height) + 64px) 0 var(--space-20);
    overflow:hidden;
    background:var(--color-cream);
}

.hero-glow{
    position:absolute;
    top:-12%;
    right:-8%;
    width:640px;
    height:640px;
    background:radial-gradient(circle, rgba(242,118,30,.22), rgba(245,178,56,0) 70%);
    filter:blur(10px);
    pointer-events:none;
    animation:floatSlow 9s ease-in-out infinite;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:var(--space-16);
    align-items:center;
    position:relative;
}

.hero-content h1{ margin-bottom:var(--space-5); }

.hero-content .reveal-line{
    display:block;
    overflow:hidden;
}

.hero-content .reveal-line span{
    display:block;
}

.hero-content .eyebrow{ margin-bottom:var(--space-5); }

.hero-tagline{
    font-size:var(--fs-md);
    color:var(--text-body);
    max-width:520px;
    margin-bottom:var(--space-8);
    font-style:italic;
}

.hero-cta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-4);
    margin-bottom:var(--space-10);
}

.hero-trust-strip{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-6);
}

.hero-trust-strip li{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-xs);
    color:var(--text-body);
}

.hero-trust-strip svg{ color:var(--color-orange); flex-shrink:0; }

.hero-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-visual-ring{
    position:absolute;
    top:50%;
    left:50%;
    height:118%;
    width:auto;
    aspect-ratio:1/1;
    transform:translate(-50%,-50%);
    border:1.5px dashed rgba(170,111,67,.35);
    border-radius:50%;
    animation:spinSlow 40s linear infinite;
    pointer-events:none;
}

.hero-image-frame{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    max-width:440px;
    border-radius:var(--radius-xl);
    overflow:hidden;
    box-shadow:var(--shadow-lg);
}

.hero-visual-panel{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient-ink);
    overflow:hidden;
}

.hero-visual-mark{
    width:52%;
    filter:drop-shadow(0 20px 30px rgba(0,0,0,.4));
    position:relative;
    z-index:2;
    transform:translateY(var(--py, 0px));
}

.hero-visual-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 30%;
    position:relative;
    z-index:2;
}

.hero-visual-panel::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    background:linear-gradient(180deg, rgba(20,19,18,0) 55%, rgba(20,19,18,.55) 100%);
    pointer-events:none;
}

.hero-brushstroke{
    position:absolute;
    inset:-10% -30%;
    background:var(--gradient-brand);
    opacity:.5;
    filter:blur(60px);
    z-index:1;
}

.hero-rating-chip{
    position:absolute;
    left:-8%;
    bottom:6%;
    display:flex;
    align-items:center;
    gap:var(--space-3);
    background:#fff;
    padding:14px 20px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
}

.hero-rating-chip svg{ color:var(--color-yellow); }

.hero-rating-chip strong{
    display:block;
    font-family:var(--font-heading);
    font-size:var(--fs-md);
    color:var(--text-heading);
    line-height:1.1;
}

.hero-rating-chip span{
    font-size:var(--fs-xs);
    color:var(--text-light);
}

/*==================================================
    Trust Marquee
==================================================*/

.trust-marquee{
    background:var(--color-ink);
    padding:18px 0;
    overflow:hidden;
    max-width:100%;
}

.trust-marquee-track{
    display:flex;
    width:max-content;
    gap:var(--space-16);
    animation:marqueeX 26s linear infinite;
    will-change:transform;
}

.trust-marquee-track span{
    display:flex;
    flex-shrink:0;
    align-items:center;
    gap:var(--space-3);
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-sm);
    color:var(--text-white-muted);
    white-space:nowrap;
}

.trust-marquee-track svg{ color:var(--color-yellow); }

/*==================================================
    Section Head Row (title + slider arrows)
==================================================*/

.section-head-row{
    margin-bottom:var(--space-10);
    gap:var(--space-6);
    flex-wrap:wrap;
}

.testimonials-google-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:var(--space-5);
}

.testimonials-google-btn svg:first-child{ color:var(--color-yellow, #F5B238); }

.mb-0{ margin-bottom:0 !important; }

.slider-arrows{
    display:flex;
    gap:var(--space-3);
    flex-shrink:0;
}

.slider-arrow{
    width:46px;
    height:46px;
    border-radius:50%;
    border:1.5px solid var(--color-border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color-ink);
    transition:var(--transition-fast);
}

.slider-arrow:hover{
    background:var(--gradient-brand);
    border-color:transparent;
    color:#fff;
}

.slider-arrow.swiper-button-disabled{
    opacity:.35;
    pointer-events:none;
}

/*==================================================
    Services
==================================================*/

.services-section{ background:var(--color-cream); }

.services-swiper{ overflow:hidden; padding:10px 2px var(--space-10); }

.service-card{
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:var(--radius-lg);
    overflow:hidden;
    height:100%;
    box-shadow:0 1px 3px rgba(26,26,26,.06);
    transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}

.service-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 40px -18px rgba(26,26,26,.22);
}

.service-card-media{
    position:relative;
    aspect-ratio:5/4;
    overflow:hidden;
    background:var(--color-cream);
}

.service-card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .7s cubic-bezier(.16,1,.3,1);
}

.service-card:hover .service-card-media img{
    transform:scale(1.06);
}

.service-card-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(26,26,26,0) 60%, rgba(26,26,26,.28) 100%);
    pointer-events:none;
}

.service-card-icon{
    position:absolute;
    top:var(--space-4);
    left:var(--space-4);
    z-index:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(4px);
    color:var(--color-orange);
    box-shadow:0 4px 14px rgba(26,26,26,.14);
}

.service-card-body{
    position:relative;
    display:flex;
    flex-direction:column;
    flex:1;
    padding:var(--space-6);
}

.service-card h3{
    font-size:var(--fs-lg);
    margin-bottom:var(--space-2);
}

.service-card p{
    color:var(--text-light);
    font-size:var(--fs-sm);
    margin-bottom:var(--space-5);
    flex:1;
}

/* Homepage Services (slider) cards only: clamp the description to a fixed
   3-line block (with an ellipsis on overflow) so every card lines up at the
   same height regardless of how long each service's blurb is. Scoped to
   .services-section so the separate Services archive/landing grid (which
   uses the same .service-card component via .service-card--landing) is left
   exactly as approved. */
.services-section .service-card p{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.6;
    height:calc(1.6em * 3);
    flex:0 0 auto;
}

.service-card-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-xs);
    color:var(--color-ink);
    text-transform:uppercase;
    letter-spacing:.05em;
    align-self:flex-start;
}

.service-card-link svg{ transition:transform .25s ease; color:var(--color-orange); }
.service-card-link:hover svg{ transform:translate(2px,-2px); }

/*==================================================
    Services landing page grid
==================================================*/

.services-landing-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:var(--space-6);
}

.services-category{ margin-top:var(--space-16); }
.services-category:first-child{ margin-top:0; }

.services-intro{ padding-bottom:0; }
.services-landing-section{ padding-top:var(--space-10); }

.services-category-head{
    display:flex;
    align-items:baseline;
    gap:var(--space-4);
    margin-bottom:var(--space-6);
}

.services-category-head h2{
    font-size:var(--fs-xl);
    margin-bottom:0;
}

.services-category-head span{
    font-size:var(--fs-sm);
    color:var(--text-light);
}

.service-card--landing .service-card-body{ gap:0; }
.service-card--landing .btn{ margin-top:auto; align-self:flex-start; }

/* Services landing grid cards: clamp the description to 4 lines with an
   ellipsis so a long service blurb never pushes the card taller than its
   neighbours or spills text outside the card. The grid's default
   align-items:stretch already keeps every card in a row the same height;
   this just keeps the *content* from growing unpredictably in the first
   place. The "View Details" button (already in service-card.php) stays
   pinned to the bottom via margin-top:auto above. */
.service-card--landing p{
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.6;
    max-height:calc(1.6em * 4);
    word-break:break-word;
    margin-bottom:var(--space-5);
}

@media (max-width:991px){
    .services-landing-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:575px){
    .services-landing-grid{ grid-template-columns:1fr; }
    .services-category{ margin-top:var(--space-10); }
}

/*==================================================
    Swiper pagination (shared)
==================================================*/

.slider-pagination{
    position:relative;
    margin-top:var(--space-8);
    display:flex;
    justify-content:center;
}

.slider-pagination .swiper-pagination-bullet{
    width:9px;
    height:9px;
    background:var(--color-border);
    opacity:1;
    margin:0 5px !important;
    transition:var(--transition-fast);
}

.slider-pagination .swiper-pagination-bullet-active{
    width:26px;
    border-radius:var(--radius-pill);
    background:var(--gradient-brand);
}

/*==================================================
    Promise / Why Choose Us (dark band)
==================================================*/

.promise-section{
    position:relative;
    background:var(--gradient-ink);
    color:var(--text-white-muted);
    overflow:hidden;
}

.promise-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(ellipse 60% 50% at 12% 8%, rgba(245,178,56,.10), transparent 60%),
        radial-gradient(ellipse 55% 45% at 92% 96%, rgba(239,65,54,.10), transparent 60%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 26px);
    pointer-events:none;
    z-index:0;
}

.promise-section > .container{
    position:relative;
    z-index:1;
}

.promise-section h2{ margin-bottom:0; }

.promise-grid{ margin-top:var(--space-4); }

.promise-card{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:var(--radius-lg);
    padding:var(--space-8) var(--space-6);
    text-align:left;
    transition:var(--transition-normal);
}

.promise-card:hover{
    background:rgba(255,255,255,.08);
    transform:translateY(-4px);
}

.promise-card-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--gradient-brand);
    color:#fff;
    margin-bottom:var(--space-5);
}

.promise-card h3{
    color:#fff;
    font-size:var(--fs-lg);
    margin-bottom:var(--space-3);
}

.promise-card p{
    color:var(--text-white-muted);
    font-size:var(--fs-sm);
}

/*==================================================
    About Teaser
==================================================*/

.about-teaser{ background:var(--color-cream); }

.about-teaser-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:var(--space-16);
    align-items:center;
}

.about-visual-panel{
    position:relative;
    aspect-ratio:4/3.6;
    border-radius:var(--radius-xl);
    background:var(--color-surface);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    box-shadow:var(--shadow-md);
}

.about-visual-glow{
    position:absolute;
    inset:-20%;
    background:var(--gradient-brand);
    opacity:.16;
    filter:blur(50px);
}

.about-visual-mark{
    width:44%;
    position:relative;
    z-index:1;
    transform:translateY(var(--py, 0px));
    filter:drop-shadow(0 16px 24px rgba(26,26,26,.18));
}

.about-visual-photo{
    width:100%;
    height:100%;
    position:relative;
    z-index:1;
    object-fit:cover;
    object-position:center;
    display:block;
}

.about-teaser-content .lead{
    font-size:var(--fs-md);
    color:var(--text-body);
    margin:var(--space-5) 0 var(--space-6);
    max-width:560px;
}

.about-badge-row{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-3) var(--space-6);
    margin-bottom:var(--space-8);
}

.about-badge-row li{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-xs);
    color:var(--text-body);
}

.about-badge-row svg{ color:var(--color-orange); }

.about-badge-row--dark li{ color:var(--text-white-muted); }
.about-badge-row--dark svg{ color:var(--color-yellow); }

/*==================================================
    Projects (placeholder gallery)
==================================================*/

.projects-section{ background:var(--color-surface); }

.projects-grid{ margin-top:var(--space-4); }

.project-tile{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:4/3;
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:0;
    padding:0;
    margin:0;
    font:inherit;
    background:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .35s ease, box-shadow .35s ease;
}

.project-tile:hover,
.project-tile:focus-visible{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
}

.project-tile:focus-visible{
    outline:2px solid var(--color-orange);
    outline-offset:3px;
}

.project-tile-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s cubic-bezier(.16,1,.3,1);
}

.project-tile:hover .project-tile-img,
.project-tile:focus-visible .project-tile-img{
    transform:scale(1.08);
}

.project-tile::after{
    content:"";
    position:absolute;
    inset:0;
    /* Darkened + extended vs. the original .72/55% stops — lighter photos
       (a pale hallway, bare timber) were leaving the title low-contrast
       even though the text itself is already pure white; a deeper, taller
       gradient keeps the title readable over any photo without touching
       the rest of the tile's look. */
    background:linear-gradient(to top, rgba(15,12,9,.82) 0%, rgba(15,12,9,.08) 65%);
    transition:opacity .3s ease;
}

.project-tile:hover::after,
.project-tile:focus-visible::after{
    opacity:.9;
}

.project-tile-inner{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    gap:var(--space-2);
    padding:var(--space-6);
    color:#fff;
}

.project-tile-inner strong{
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-md);
    color:#fff;
    /* Belt-and-suspenders on top of the darkened overlay above: guarantees
       a clean, readable white title even over a very light-toned photo. */
    text-shadow:0 2px 6px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.5);
    z-index: 1;
}

.section-cta-row{
    display:flex;
    justify-content:center;
    margin-top:var(--space-10);
}

/*==================================================
    Process
==================================================*/

.process-track{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--space-8);
    margin-top:var(--space-10);
}

.process-step{
    position:relative;
    z-index:2;
    padding:var(--space-6) var(--space-5) var(--space-5);
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
}

.process-track.js-reveal-ready .process-step{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .6s cubic-bezier(0.16,0.77,0.18,1), transform .6s cubic-bezier(0.16,0.77,0.18,1);
}

.process-track.js-reveal-ready .process-step.is-visible{
    opacity:1;
    transform:translateY(0);
}

.process-step-top{
    display:flex;
    align-items:center;
    gap:var(--space-4);
    margin-bottom:var(--space-4);
}

.process-step-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--gradient-brand-soft);
    color:var(--color-orange);
}

.process-step-number{
    font-family:var(--font-heading);
    font-weight:var(--fw-extra-bold);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-border);
}

.process-step h3{
    font-size:var(--fs-md);
    margin-bottom:var(--space-2);
}

.process-step p{
    font-size:var(--fs-sm);
    color:var(--text-light);
}

/*==================================================
    Testimonials
==================================================*/

.testimonials-section{ background:var(--color-cream); }

.testimonials-swiper{ overflow:hidden; padding:10px 2px var(--space-10); }

.testimonial-card{
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-8);
    height:100%;
    display:flex;
    flex-direction:column;
}

.testimonial-quote-icon{ color:var(--color-yellow); margin-bottom:var(--space-3); }

.testimonial-stars{
    display:flex;
    gap:3px;
    color:var(--color-yellow);
    margin-bottom:var(--space-4);
}

.testimonial-card p{
    color:var(--text-body);
    font-size:var(--fs-md);
    line-height:1.6;
    margin-bottom:var(--space-6);
    flex-grow:1;
}

.testimonial-author{
    display:flex;
    align-items:center;
    gap:var(--space-3);
}

.testimonial-avatar{
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--gradient-brand);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-sm);
    flex-shrink:0;
}

.testimonial-author strong{
    display:block;
    font-family:var(--font-heading);
    font-size:var(--fs-sm);
    color:var(--text-heading);
}

.testimonial-author span:not(.testimonial-avatar){
    font-size:var(--fs-xs);
    color:var(--text-light);
}

/*==================================================
    Service Areas
==================================================*/

.areas-section{ background:var(--color-surface); }

.area-card{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:var(--space-6);
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-md);
    color:var(--text-heading);
    transition:var(--transition-normal);
}

.area-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-sm);
}

.area-card svg{ color:var(--color-orange); flex-shrink:0; }

/*==================================================
    FAQ
==================================================*/

.faq-section{ background:var(--color-cream); }

.faq-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:var(--space-16);
    align-items:start;
}

.faq-section .section-head h2{
    font-size:clamp(1.9rem, 2.6vw, 2.75rem);
    max-width:22ch;
    line-height:1.16;
    text-wrap:balance;
}

.faq-item{
    border-bottom:1px solid var(--color-border);
}

.faq-item:first-child{ border-top:1px solid var(--color-border); }

.faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    text-align:left;
    padding:var(--space-6) 0;
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-md);
    color:var(--text-heading);
}

.faq-icon{
    flex-shrink:0;
    color:var(--color-orange);
    transform:rotate(90deg);
    transition:transform .3s ease;
}

.faq-item.is-open .faq-icon{
    transform:rotate(-90deg);
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s var(--ease-out-soft);
}

.faq-answer p{
    padding-bottom:var(--space-6);
    color:var(--text-light);
    font-size:var(--fs-md);
    max-width:560px;
}

/*==================================================
    Final CTA
==================================================*/

.final-cta{
    padding:var(--space-20) 0;
}

.final-cta-card{
    position:relative;
    display:grid;
    grid-template-columns:1.3fr 1fr;
    align-items:center;
    gap:var(--space-10);
    background:var(--gradient-ink);
    border-radius:var(--radius-xl);
    padding:clamp(2.4rem, 4vw, 4rem);
    overflow:hidden;
    isolation:isolate;
}

.final-cta-card-glow{
    position:absolute;
    width:440px;
    height:440px;
    right:-130px;
    top:-160px;
    background:var(--gradient-brand);
    opacity:.22;
    filter:blur(100px);
    border-radius:50%;
    pointer-events:none;
    z-index:0;
}

.final-cta-card-left,
.final-cta-card-right{
    position:relative;
    z-index:1;
}

.final-cta-card-left h2{ margin-bottom:var(--space-3); }

.final-cta-card-left p:not(.eyebrow){
    color:var(--text-white-muted);
    font-size:var(--fs-md);
    max-width:460px;
}

.final-cta-card-right{
    display:flex;
    flex-direction:column;
    gap:var(--space-4);
}

.final-cta-phone{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--radius-md);
    padding:var(--space-4) var(--space-5);
    transition:var(--transition-fast);
}

.final-cta-phone:hover{
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.26);
}

.final-cta-phone-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:50%;
    background:var(--gradient-brand);
    color:#fff;
    flex-shrink:0;
}

.final-cta-phone-text{
    display:flex;
    flex-direction:column;
}

.final-cta-phone-text small{
    display:block;
    font-size:var(--fs-xs);
    color:var(--text-white-muted);
}

.final-cta-phone-text strong{
    display:block;
    font-family:var(--font-heading);
    font-size:var(--fs-lg);
    color:#fff;
}

.final-cta-card-right .btn{ width:100%; }

/*==================================================
    Footer
==================================================*/

.site-footer{
    position:relative;
    background:var(--color-ink);
    color:var(--text-white-muted);
    padding-top:var(--space-24);
    /* Extra clear space at the very bottom of the document so the
       permanently fixed WhatsApp/Call FABs and the Back to Top
       button never sit on top of the copyright row once the page
       is scrolled all the way down. */
    padding-bottom:0;
    overflow:hidden;
}

.site-footer::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(ellipse 50% 60% at 100% 0%, rgba(245,178,56,.08), transparent 60%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 26px);
    pointer-events:none;
    z-index:0;
}

.site-footer > .container{
    position:relative;
    z-index:1;
}

.footer-top{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1.1fr;
    gap:var(--space-10);
    padding-bottom:var(--space-16);
    border-bottom:1px solid rgba(255,255,255,.1);
}

.footer-logo-link{
    display:inline-flex;
    align-items:center;
    margin-bottom:var(--space-5);
    padding:var(--space-3) var(--space-4);
    background:#fff;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    transition:transform .25s ease, box-shadow .25s ease;
}

.footer-logo-link:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.footer-logo-link:focus-visible{
    outline:2px solid var(--color-orange);
    outline-offset:4px;
}

.footer-logo{
    display:block;
    height:56px;
    width:auto;
    margin-bottom:0;
}

.footer-brand p{
    font-size:var(--fs-sm);
    line-height:1.7;
    margin-bottom:var(--space-5);
    max-width:320px;
}

.footer-col h4{
    color:#fff;
    font-size:var(--fs-base);
    margin-bottom:var(--space-5);
}

.footer-links li,
.footer-contact li{
    margin-bottom:var(--space-3);
    font-size:var(--fs-sm);
}

.footer-links a{ color:var(--text-white-muted); }
.footer-links a:hover{ color:var(--color-yellow); }

.footer-view-more{
    display:inline-flex !important;
    align-items:center;
    gap:6px;
    color:var(--color-yellow) !important;
    font-weight:var(--fw-semibold);
    margin-top:var(--space-1);
}

.footer-view-more svg{
    transition:transform .25s ease;
}

.footer-view-more:hover svg{
    transform:translate(2px,-2px);
}

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:var(--space-2);
}

.footer-contact svg{ color:var(--color-orange); flex-shrink:0; margin-top:3px; }

.footer-contact a{
    display:flex;
    align-items:flex-start;
    gap:var(--space-2);
    color:var(--text-white-muted);
}

.footer-contact a:hover{ color:var(--color-yellow); }

.footer-hours span{ display:block; line-height:1.6; }

.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    padding:var(--space-6) 0;
    font-size:var(--fs-xs);
}

.footer-credit span{
    color:var(--color-yellow);
    font-weight:var(--fw-semibold);
}

.getpro-credit-link{
    color:var(--color-yellow);
    font-weight:var(--fw-semibold);
    text-decoration:underline;
    text-decoration-color:rgba(245,178,56,.4);
    text-underline-offset:2px;
    transition:color .2s ease;
}

.getpro-credit-link:hover{ color:#fff; }

/*==================================================
    Floating Action Buttons
    (permanently position:fixed — never docks/undocks
    based on scroll or footer proximity)

    Stacked bottom-to-top as Phone, then WhatsApp, on every
    viewport (desktop used to sit these side-by-side, mobile
    stacked them — now both match). Markup order in fabs.php
    is Phone first, then WhatsApp; flex-direction:column-reverse
    puts the first DOM item at the bottom of the stack and each
    item after it above, so a future third item would land on
    top automatically. --fab-stack-clear (below) is how much
    clearance the chat widget above this stack gets.
==================================================*/

.contact-fabs{
    position:fixed;
    right:20px;
    bottom:calc(24px + env(safe-area-inset-bottom, 0px));
    z-index:var(--z-fab);
    display:flex;
    flex-direction:column-reverse;
    gap:var(--space-3);
}

/*==================================================
    Back to Top — independent fixed LEFT-side button,
    shown/hidden via JS based on scroll position, never
    tied to the footer's layout.
==================================================*/

.back-to-top-fab{
    position:fixed;
    left:20px;
    bottom:calc(24px + env(safe-area-inset-bottom, 0px));
    z-index:var(--z-fab);
    width:48px;
    height:48px;
    border-radius:50%;
    border:0;
    background:var(--color-ink);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-lg);
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background .25s ease;
    cursor:pointer;
}

.back-to-top-fab.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-to-top-fab:hover{
    background:var(--gradient-brand);
}

.back-to-top-fab:focus-visible{
    outline:2px solid var(--color-orange);
    outline-offset:3px;
}

.fab{
    position:relative;
    width:56px;
    height:56px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-lg);
    transition:var(--transition-fast);
}

.fab:hover{ transform:translateY(-3px); }

.fab-whatsapp{
    background:#25D366;
    color:#fff;
}

.fab-pulse{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:#25D366;
    animation:pulseRing 2.6s ease-out infinite;
}

.fab-call{
    background:var(--color-ink);
    color:#fff;
}

/* Chatbot: the live chat launcher is the Tidio plugin (Plugins → Tidio
   Chat), which injects its own bubble (#tidio-chat-iframe) directly into
   the page — it isn't part of this template, so it can't join the
   flex stack above. Tidio's own dashboard (Channels > Live Chat >
   Appearance > Position) lets you set a vertical offset for the bubble;
   set that to clear the WhatsApp/Call stack below (roughly the height
   of both buttons plus the gap between them and the page edge — about
   150px on desktop, 132px on mobile, given the sizes/gaps above). The
   rule below is a CSS-side safety net so the bubble still clears the
   stack even if that dashboard offset is left at its default. */
#tidio-chat-iframe{
    bottom:calc(150px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width:575px){
    .contact-fabs{ right:16px; }
    .fab{ width:50px; height:50px; }
    #tidio-chat-iframe{
        bottom:calc(132px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/*==================================================
    Gallery Lightbox
==================================================*/

.lightbox{
    position:fixed;
    inset:0;
    z-index:var(--z-modal);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--space-6);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
}

body.lightbox-open .lightbox{
    opacity:1;
    visibility:visible;
}

body.lightbox-open{ overflow:hidden; }

.lightbox-backdrop{
    position:fixed;
    inset:0;
    background:rgba(10,9,8,.92);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

.lightbox-stage{
    position:relative;
    z-index:1;
    width:min(880px, 90vw);
    max-height:82vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--space-4);
    transform:scale(.96);
    transition:transform .35s var(--ease-out-soft);
}

body.lightbox-open .lightbox-stage{
    transform:scale(1);
}

.lightbox-media{
    position:relative;
    width:100%;
    aspect-ratio:4/3;
    max-height:70vh;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient-ink);
}

.lightbox-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.lightbox-media-fallback{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.lightbox-media-fallback svg{
    width:72px;
    height:72px;
    color:#fff;
    opacity:.92;
}

.lightbox-caption{
    color:#fff;
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-md);
    text-align:center;
    letter-spacing:.01em;
}

.lightbox-close{
    position:fixed;
    top:22px;
    right:22px;
    z-index:2;
    width:44px;
    height:44px;
    border-radius:50%;
    border:0;
    background:rgba(255,255,255,.1);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease, transform .2s ease;
    cursor:pointer;
}

.lightbox-close:hover{ background:rgba(255,255,255,.2); }

.lightbox-nav{
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    width:48px;
    height:48px;
    border-radius:50%;
    border:0;
    background:rgba(255,255,255,.1);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease, transform .2s ease;
    cursor:pointer;
}

.lightbox-nav:hover{ background:rgba(255,255,255,.2); }

.lightbox-prev{ left:22px; }
.lightbox-next{ right:22px; }

/*==================================================
    Get A Quote Modal
==================================================*/

.quote-modal{
    position:fixed;
    inset:0;
    z-index:var(--z-modal);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--space-6);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
}

body.quote-open .quote-modal{
    opacity:1;
    visibility:visible;
}

.quote-modal-backdrop{
    position:fixed;
    inset:0;
    background:rgba(20,17,14,.6);
    backdrop-filter:blur(4px);
}

.quote-modal-panel{
    position:relative;
    z-index:1;
    width:100%;
    max-width:560px;
    max-height:88vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
    background:var(--color-cream);
    border-radius:var(--radius-xl);
    padding:var(--space-10);
    transform:translateY(24px) scale(.97);
    transition:transform .35s var(--ease-out-soft);
    box-shadow:var(--shadow-lg);
}

.quote-modal-panel::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
}

body.quote-open .quote-modal-panel{
    transform:translateY(0) scale(1);
}

.quote-modal-close{
    position:absolute;
    top:var(--space-6);
    right:var(--space-6);
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--color-surface);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color-ink);
}

.quote-modal-panel h3{
    font-size:var(--fs-2xl);
    margin-bottom:var(--space-2);
}

.quote-modal-sub{
    color:var(--text-light);
    margin-bottom:var(--space-8);
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-4);
}

.form-field{
    display:block;
    margin-bottom:var(--space-4);
}

.form-field span{
    display:block;
    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-xs);
    color:var(--text-heading);
    margin-bottom:var(--space-2);
}

.form-field input,
.form-field select,
.form-field textarea{
    width:100%;
    background:#fff;
    border:1.5px solid var(--color-border);
    border-radius:var(--radius-sm);
    padding:13px 16px;
    font-size:var(--fs-sm);
    font-family:inherit;
    color:var(--text-heading);
    transition:var(--transition-fast);
}

.form-field input::placeholder,
.form-field textarea::placeholder{ color:var(--text-light); opacity:.8; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
    border-color:var(--color-orange);
    outline:none;
    box-shadow:0 0 0 3px rgba(242,118,30,.14);
}

.form-field textarea{ resize:vertical; min-height:120px; }

.form-field select{
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1A1A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    padding-right:40px;
    cursor:pointer;
}

/* Contact Form 7 date fields (wpcf7-date) get the same treatment as
   every other control — no separate rule needed since [date] tags
   already render a plain <input type="date">, already covered above. */

/*==================================================
    Contact Form 7 — validation, error & success states
    (applies to both the header "Get a Free Quote" modal and the
    Contact page, since both render the same Quote Request form)
==================================================*/

.form-field input.wpcf7-not-valid,
.form-field select.wpcf7-not-valid,
.form-field textarea.wpcf7-not-valid{
    border-color:var(--color-red);
    background:rgba(239,65,54,.04);
}

.form-field input.wpcf7-not-valid:focus,
.form-field select.wpcf7-not-valid:focus,
.form-field textarea.wpcf7-not-valid:focus{
    box-shadow:0 0 0 3px rgba(239,65,54,.14);
}

.form-field .wpcf7-not-valid-tip{
    display:block;
    color:var(--color-red);
    font-size:var(--fs-xs);
    font-weight:var(--fw-medium, 500);
    margin-top:var(--space-2);
}

.wpcf7-form .screen-reader-response{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

.wpcf7-form .wpcf7-response-output{
    display:block;
    margin:var(--space-5) 0 0;
    padding:var(--space-3) var(--space-4);
    border-radius:var(--radius-sm);
    border:1.5px solid var(--color-border);
    font-size:var(--fs-sm);
    line-height:1.5;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output{
    border-color:var(--color-red);
    background:rgba(239,65,54,.08);
    color:var(--color-red);
}

.wpcf7-form.sent .wpcf7-response-output{
    border-color:var(--color-success);
    background:rgba(47,167,102,.1);
    color:var(--color-success);
}

.wpcf7-form.unaccepted .wpcf7-response-output{
    border-color:var(--color-orange);
    background:rgba(242,118,30,.08);
    color:var(--text-heading);
}

.form-submit-row{ margin-top:var(--space-2); }

.form-submit-row input[type="submit"]{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-sm);
    letter-spacing:.01em;
    padding:15px 28px;
    border:0;
    border-radius:var(--radius-pill);
    background:var(--gradient-brand);
    color:#fff;
    box-shadow:var(--shadow-sm);
    cursor:pointer;
    transition:var(--transition-normal);
}

.form-submit-row input[type="submit"]:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-hover);
}

.form-submit-row input[type="submit"]:focus-visible{
    outline:2px solid var(--color-orange);
    outline-offset:3px;
}

.wpcf7-form.submitting .form-submit-row input[type="submit"]{
    opacity:.65;
    pointer-events:none;
    transform:none;
}

.wpcf7-spinner{
    margin:0 0 0 var(--space-3);
    width:20px;
    height:20px;
    vertical-align:middle;
}

.quote-form-note{
    text-align:center;
    font-size:var(--fs-xs);
    color:var(--text-light);
    margin-top:var(--space-5);
}

.quote-form-note a{
    color:var(--color-orange);
    font-weight:var(--fw-semibold);
}

.quote-form-success{
    text-align:center;
    padding:var(--space-10) 0;
}

.quote-form-success-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    border-radius:50%;
    background:var(--gradient-brand-soft);
    color:var(--color-success);
    margin-bottom:var(--space-5);
}

.quote-form-success h4{
    font-size:var(--fs-xl);
    margin-bottom:var(--space-2);
}

/*==================================================
    INNER PAGES — shared components used across
    gallery.html, about.html, contact.html,
    service.html (+ individual service pages) and
    blog.html. Built to sit on top of the same
    navbar / footer / CTA / button system as the
    homepage so every page feels like one site.
==================================================*/

/*==============================
    Page Hero (compact banner used
    at the top of every inner page)
==============================*/

.page-hero{
    position:relative;
    padding:calc(var(--header-height) + 44px) 0 var(--space-12, 48px);
    overflow:hidden;
    background:var(--color-cream);
    text-align:center;
    isolation:isolate;
}

/* Layer 0 — a fine architectural line grid, almost invisible,
   for premium texture without competing with the heading. */
.page-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background-image:
        linear-gradient(90deg, rgba(26,26,26,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(26,26,26,.035) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(ellipse 70% 100% at 50% 0%, #000 40%, transparent 100%);
    mask-image:radial-gradient(ellipse 70% 100% at 50% 0%, #000 40%, transparent 100%);
}

/* Layer 1 — a real project photo, held at very low opacity and
   faded to the cream ground top/bottom, so it reads as soft
   atmosphere rather than a photographic hero banner. */
.page-hero-media{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
}

.page-hero-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 35%;
    opacity:0;
    transform:translateY(var(--py,0px)) scale(1.1);
    animation:pageHeroMediaIn 1.3s var(--ease-out-soft) .1s forwards;
}

.page-hero-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, var(--color-cream) 0%, rgba(251,247,240,.72) 32%, rgba(251,247,240,.72) 68%, var(--color-cream) 100%),
        linear-gradient(90deg, var(--color-cream) 0%, rgba(251,247,240,.35) 18%, rgba(251,247,240,.35) 82%, var(--color-cream) 100%);
}

@keyframes pageHeroMediaIn{
    from{ opacity:0; }
    to{ opacity:.14; }
}

/* Layer 2 — a single soft brand-gradient glow for depth */
.page-hero-glow{
    position:absolute;
    top:-38%;
    left:50%;
    transform:translateX(-50%);
    width:720px;
    height:400px;
    background:radial-gradient(ellipse, rgba(242,118,30,.13), rgba(245,178,56,0) 70%);
    filter:blur(10px);
    pointer-events:none;
    z-index:1;
}

.page-hero-glow--secondary{ display:none; }

/* Layer 3 — a thin elegant arc accent (architectural, not a
   thick paint swoosh) sitting quietly in one corner. */
.page-hero-brushstroke{
    position:absolute;
    top:-6%;
    right:-6%;
    width:380px;
    height:auto;
    opacity:.16;
    z-index:1;
    pointer-events:none;
}

.page-hero-inner{
    position:relative;
    z-index:2;
    max-width:1180px;
    margin-inline:auto;
}

.page-hero .eyebrow{ justify-content:center; margin-bottom:var(--space-4); }

.page-hero h1{
    font-size:clamp(1.9rem, 1.7vw + 1.4rem, 2.75rem);
    letter-spacing:-.02em;
    line-height:1.15;
    margin-bottom:var(--space-5);
    white-space:normal;
}

.page-hero h1 .reveal-line{
    display:block;
    overflow:hidden;
}

.page-hero h1 .reveal-line span{
    display:block;
}

.page-hero p{
    max-width:660px;
    margin-inline:auto;
    font-size:var(--fs-md);
    color:var(--text-light);
}

.page-hero-crumbs{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    margin-top:var(--space-6);
    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-xs);
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--text-light);
}

.page-hero-crumbs a{ color:var(--text-body); }
.page-hero-crumbs a:hover{ color:var(--color-orange); }
.page-hero-crumbs svg{ width:11px; height:11px; opacity:.6; }

@media (max-width:767px){
    .page-hero-brushstroke{ width:320px; opacity:.08; }
    .page-hero-glow{ width:560px; height:320px; }
}

/*==============================
    Gallery page — filter tabs +
    masonry-style grid
==============================*/

.gallery-filters{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--space-3);
    margin-bottom:var(--space-10);
}

.gallery-filter-btn{
    padding:10px 22px;
    border-radius:var(--radius-pill);
    border:1px solid var(--color-border);
    background:#fff;
    color:var(--text-heading);
    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-sm);
    cursor:pointer;
    transition:var(--transition-fast);
    flex-shrink:0;
}

.gallery-filter-btn:hover{
    border-color:var(--color-orange);
    background:rgba(242,118,30,.08);
    color:var(--color-orange);
}

.gallery-filter-btn.is-active{
    background:var(--color-orange);
    border-color:var(--color-orange);
    color:#fff;
    box-shadow:var(--shadow-sm);
}

.gallery-filter-btn:focus-visible{
    outline:2px solid var(--color-orange);
    outline-offset:2px;
}

@media (max-width:575px){
    .gallery-filters{
        flex-wrap:nowrap;
        justify-content:flex-start;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;
        padding-bottom:var(--space-2);
        margin-bottom:var(--space-6);
        margin-inline:-18px;
        padding-inline:18px;
        scrollbar-width:none;
    }

    .gallery-filters::-webkit-scrollbar{ display:none; }

    .gallery-filter-btn{
        scroll-snap-align:start;
        white-space:nowrap;
    }
}

.gallery-masonry{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:170px;
    grid-auto-flow:dense;
    gap:var(--space-5);
}

.gallery-masonry .project-tile{
    aspect-ratio:auto;
    height:100%;
}

.gallery-masonry .gallery-item--tall{ grid-row:span 2; }
.gallery-masonry .gallery-item--wide{ grid-column:span 2; }

.gallery-item.is-hidden{ display:none; }

@media (max-width:991px){
    .gallery-masonry{ grid-template-columns:repeat(2,1fr); grid-auto-rows:190px; }
    .gallery-masonry .gallery-item--wide{ grid-column:span 2; }
}

@media (max-width:575px){
    .gallery-masonry{ grid-template-columns:1fr; grid-auto-rows:220px; }
    .gallery-masonry .gallery-item--tall{ grid-row:span 1; }
    .gallery-masonry .gallery-item--wide{ grid-column:span 1; }
}

/*==============================
    About page
==============================*/

.about-hero-split{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:var(--space-16);
    align-items:center;
}

.about-hero-split .lead{
    font-size:var(--fs-md);
    color:var(--text-body);
    margin:var(--space-5) 0 var(--space-6);
    max-width:560px;
}

.stats-strip{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:1fr;
    gap:var(--space-5);
    padding:var(--space-10) 0;
}

.stats-strip--inline{
    padding:0;
    margin-top:var(--space-8);
}

.stat-card{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
    gap:var(--space-4);
    padding:var(--space-5);
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    height:100%;
}

.stat-card-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:48px;
    height:48px;
    border-radius:50%;
    background:rgba(242,118,30,.1);
    color:var(--color-orange);
}

.stat-card-label{
    display:block;
    font-size:var(--fs-sm);
    color:var(--text-heading);
    font-weight:var(--fw-semibold);
    line-height:1.35;
}

.approach-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-6);
}

.approach-card{
    padding:var(--space-8);
    background:var(--color-cream);
    border-radius:var(--radius-lg);
    border:1px solid var(--color-border);
}

.approach-card-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    border-radius:var(--radius-md);
    background:var(--gradient-brand-soft);
    color:var(--color-orange);
    margin-bottom:var(--space-5);
}

.approach-card h3{
    font-size:var(--fs-lg);
    margin-bottom:var(--space-3);
}

.approach-card p{
    color:var(--text-light);
    font-size:var(--fs-sm);
}

.standards-section{ background:var(--gradient-ink); color:#fff; }

.standards-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-5) var(--space-10);
    margin-top:var(--space-10);
}

.standards-list li{
    display:flex;
    align-items:flex-start;
    gap:var(--space-4);
    padding-bottom:var(--space-5);
    border-bottom:1px solid var(--color-border-dark);
}

.standards-list li svg{
    flex-shrink:0;
    color:var(--color-yellow);
    margin-top:3px;
}

.standards-list strong{
    display:block;
    font-family:var(--font-heading);
    margin-bottom:var(--space-1);
}

.standards-list p{
    color:var(--text-white-muted);
    font-size:var(--fs-sm);
    margin:0;
}

.team-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-6);
}

.team-card{
    text-align:center;
    padding:var(--space-8) var(--space-6);
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
}

.team-card-avatar{
    width:64px;
    height:64px;
    border-radius:50%;
    margin-inline:auto var(--space-5);
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient-brand);
    color:#fff;
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-lg);
}

.team-card h3{ font-size:var(--fs-md); margin-bottom:var(--space-1); }
.team-card span:not(.team-card-avatar){ display:block; font-size:var(--fs-xs); color:var(--color-orange); font-weight:var(--fw-semibold); margin-bottom:var(--space-3); text-transform:uppercase; letter-spacing:.04em; }
.team-card p{ font-size:var(--fs-sm); color:var(--text-light); }

/*==============================
    Contact page
==============================*/

.contact-layout{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:var(--space-16);
    align-items:start;
}

.contact-info-list{
    display:flex;
    flex-direction:column;
    gap:var(--space-5);
    margin-top:var(--space-8);
}

.contact-info-card{
    display:flex;
    align-items:flex-start;
    gap:var(--space-4);
    padding:var(--space-6);
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
}

.contact-info-card-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border-radius:var(--radius-md);
    background:var(--gradient-brand-soft);
    color:var(--color-orange);
    flex-shrink:0;
}

.contact-info-card h3{ font-size:var(--fs-md); margin-bottom:var(--space-1); }
.contact-info-card p{ font-size:var(--fs-sm); color:var(--text-light); }
.contact-info-card a{ color:var(--text-body); }
.contact-info-card a:hover{ color:var(--color-orange); }

.contact-form-panel{
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    padding:var(--space-10);
    box-shadow:var(--shadow-sm);
}

.contact-form-panel h2{ margin-bottom:var(--space-3); }
.contact-form-panel > p{ color:var(--text-light); margin-bottom:var(--space-8); }

.contact-map-wrap{
    margin-top:var(--space-16);
}

.contact-map-frame{
    position:relative;
    border-radius:var(--radius-xl);
    overflow:hidden;
    box-shadow:var(--shadow-md);
    aspect-ratio:16/6;
}

.contact-map-frame iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
    filter:grayscale(.15) contrast(1.02);
}

.contact-map-note{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    margin-top:var(--space-5);
    padding:var(--space-4) var(--space-6);
    background:var(--color-surface);
    border-radius:var(--radius-md);
    font-size:var(--fs-sm);
    color:var(--text-body);
}

.contact-map-note svg{ color:var(--color-orange); flex-shrink:0; }

@media (max-width:991px){
    .about-hero-split,
    .contact-layout{ grid-template-columns:1fr; }
    .approach-grid,
    .team-grid{ grid-template-columns:repeat(2,1fr); }
    .standards-list{ grid-template-columns:1fr; }
}

@media (max-width:575px){
    .stats-strip{ grid-template-columns:1fr; gap:var(--space-3); }
    .approach-grid,
    .team-grid{ grid-template-columns:1fr; }
    .contact-form-panel{ padding:var(--space-6); }
}

/*==============================
    Service template pages
==============================*/

.service-hero{
    position:relative;
    padding:calc(var(--header-height) + 48px) 0 0;
    overflow:hidden;
    background:var(--color-cream);
}

.service-hero-glow{
    position:absolute;
    top:-18%;
    right:-10%;
    width:560px;
    height:560px;
    background:radial-gradient(circle, rgba(242,118,30,.18), rgba(245,178,56,0) 70%);
    filter:blur(10px);
    pointer-events:none;
    animation:floatSlow 9s ease-in-out infinite;
}

.service-hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-16);
    align-items:center;
    padding-bottom:var(--space-20);
    position:relative;
}

.service-hero-content h1{
    font-size:clamp(2rem, 3vw, 2.9rem);
    line-height:1.15;
    margin-bottom:var(--space-5);
}

.service-hero-content .lead{
    font-size:var(--fs-md);
    color:var(--text-body);
    line-height:1.65;
    margin:var(--space-5) 0 var(--space-8);
    max-width:520px;
}

.service-hero-media{
    position:relative;
    border-radius:var(--radius-xl);
    overflow:hidden;
    aspect-ratio:4/3.4;
    box-shadow:var(--shadow-lg);
}

.service-hero-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(26,26,26,0) 65%, rgba(26,26,26,.22) 100%);
    pointer-events:none;
}

.service-hero-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.service-benefits-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-5);
    margin-top:var(--space-8);
}

.service-benefit{
    display:flex;
    align-items:flex-start;
    gap:var(--space-3);
    padding:var(--space-5);
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
}

.service-benefit svg{ color:var(--color-orange); flex-shrink:0; margin-top:2px; }
.service-benefit span{ font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--text-body); }

.service-gallery-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-5);
}

.service-gallery-strip img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:var(--radius-lg);
}

.service-other-list{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-3);
    margin-top:var(--space-8);
}

.service-other-list a{
    padding:10px 20px;
    border-radius:var(--radius-pill);
    border:1px solid var(--color-border);
    background:#fff;
    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-sm);
    color:var(--text-body);
    transition:var(--transition-fast);
}

.service-other-list a:hover,
.service-other-list a.is-current{
    background:var(--color-orange);
    border-color:var(--color-orange);
    color:#fff;
}

@media (max-width:991px){
    .service-hero-grid{ grid-template-columns:1fr; padding-bottom:var(--space-12); }
    .service-hero-media{ order:-1; max-width:480px; margin-inline:auto; }
    .service-benefits-grid{ grid-template-columns:1fr; }
    .service-gallery-strip{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:575px){
    .service-gallery-strip{ grid-template-columns:1fr; }
}

/*==============================
    Service template — editorial
    content sections (mixed layout:
    full-width intro, alternating
    text/image splits, a full-width
    approach band with pull-quote,
    and a full-width benefits grid)
==============================*/

.service-intro-section{ padding-bottom:var(--space-16); }

.service-intro{
    max-width:760px;
    margin-inline:auto;
    text-align:center;
}

.service-intro .eyebrow{ margin-bottom:var(--space-4); }

.service-intro h2{ margin-bottom:var(--space-6); line-height:1.25; }

.service-intro-body p{
    color:var(--text-body);
    font-size:var(--fs-md);
    line-height:1.75;
}

.service-intro-body p + p{ margin-top:var(--space-5); }

@media (max-width:575px){
    .service-intro-section{ padding-bottom:var(--space-12); }
}

.service-split{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--space-16);
    align-items:center;
}

/* Grid items default to min-width:auto, which lets a long heading or word
   demand more than its 1fr share and squeeze the image column down to a
   sliver — minmax(0,1fr) above removes that floor. Belt-and-braces here
   too, since these two elements are the ones that visibly break first. */
.service-split-content,
.service-split-media{ min-width:0; }

.service-split-content h2{ overflow-wrap:break-word; }

.service-split--reverse .service-split-media{ order:-1; }

.service-split-content h2{ margin-bottom:var(--space-4); }

.service-split-lead{
    font-size:var(--fs-md);
    color:var(--text-body);
    margin-bottom:var(--space-5);
}

.service-split-body p{
    color:var(--text-body);
    font-size:var(--fs-md);
    line-height:1.75;
}

.service-split-body p + p{ margin-top:var(--space-4); }

.service-includes-list{
    display:grid;
    gap:var(--space-3);
    margin-top:var(--space-2);
}

.service-includes-list li{
    position:relative;
    padding-left:30px;
    font-size:var(--fs-sm);
    color:var(--text-body);
    line-height:1.5;
    min-height:20px;
    display:flex;
    align-items:center;
}

.service-includes-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:1px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:rgba(242,118,30,.12);
}

.service-includes-list li::after{
    content:"";
    position:absolute;
    left:6px;
    top:5px;
    width:6px;
    height:10px;
    border-right:2px solid var(--color-orange);
    border-bottom:2px solid var(--color-orange);
    transform:rotate(45deg);
}

.service-split-media{
    position:relative;
    border-radius:var(--radius-xl);
    overflow:hidden;
    aspect-ratio:4/3.3;
    box-shadow:var(--shadow-md);
}

.service-split-media img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.service-approach{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:var(--space-16);
    align-items:center;
}

.service-approach-text,
.service-approach-quote{ min-width:0; }

.service-approach-text h2{ margin-bottom:var(--space-4); overflow-wrap:break-word; }

.service-approach-body p{
    color:var(--text-body);
    font-size:var(--fs-md);
    line-height:1.75;
}

.service-approach-quote{
    position:relative;
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    padding:var(--space-8);
    margin:0;
}

.service-approach-quote svg{ color:rgba(242,118,30,.35); margin-bottom:var(--space-4); }

.service-approach-quote p{
    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-lg);
    color:var(--text-heading);
    line-height:1.45;
    margin:0;
}

.service-benefits-full-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:var(--space-5);
}

/* Location pages always pass exactly 3 highlights (see inc/locations.php),
   which used to render inside the 5-column grid above — 3 cards left-aligned
   into a 5-track grid, leaving two empty tracks of dead space on the right
   instead of a balanced row. This modifier gives the same card styling a
   grid sized to match its actual content instead of borrowing the
   Service-page (5-item) grid it was never designed to share. */
.service-benefits-full-grid--3{
    grid-template-columns:repeat(3,1fr);
}

.service-benefit-card{
    padding:var(--space-6) var(--space-5);
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    text-align:left;
}

.service-benefit-card-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:var(--radius-md);
    background:rgba(242,118,30,.1);
    color:var(--color-orange);
    margin-bottom:var(--space-4);
}

.service-benefit-card h3{
    font-size:var(--fs-md);
    margin-bottom:var(--space-2);
}

.service-benefit-card p{
    font-size:var(--fs-sm);
    color:var(--text-body);
    line-height:1.55;
    margin:0;
}

@media (max-width:991px){
    .service-split,
    .service-approach{ grid-template-columns:1fr; gap:var(--space-10); }
    .service-split--reverse .service-split-media{ order:0; }
    .service-split-media{ max-width:520px; margin-inline:auto; width:100%; margin-bottom:var(--space-2); }
    .service-approach-quote{ margin-top:var(--space-2); }
    .service-benefits-full-grid{ grid-template-columns:repeat(2,1fr); }
    /* The 3-item location-page variant goes straight to a single column
       here rather than 2-then-1 like the 5-item grid above — 3 cards in 2
       columns leaves one dangling on its own row, which is the same
       unbalanced look this modifier exists to avoid in the first place. */
    .service-benefits-full-grid--3{ grid-template-columns:1fr; }
}

@media (max-width:575px){
    .service-split,
    .service-approach{ gap:var(--space-8); }
}

@media (max-width:575px){
    .service-benefits-full-grid{ grid-template-columns:1fr; }
}

/*==============================
    Blog page
==============================*/

.blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-8);
}

.blog-card{
    display:block;
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:var(--transition-normal);
    color:inherit;
    text-decoration:none;
}

.blog-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
}

.blog-card-media{
    position:relative;
    aspect-ratio:16/10;
    overflow:hidden;
    background:var(--color-surface);
}

.blog-card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s cubic-bezier(.16,1,.3,1);
}

.blog-card:hover .blog-card-media img{ transform:scale(1.06); }

.blog-card-tag{
    position:absolute;
    top:var(--space-4);
    left:var(--space-4);
    padding:6px 14px;
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.92);
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--color-orange);
}

.blog-card-body{ padding:var(--space-6); }

.blog-card-meta{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    font-size:var(--fs-xs);
    color:var(--text-light);
    margin-bottom:var(--space-3);
}

.blog-card h3{ font-size:var(--fs-lg); margin-bottom:var(--space-3); }
.blog-card p{ font-size:var(--fs-sm); color:var(--text-light); margin-bottom:var(--space-5); }

@media (max-width:991px){
    .blog-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:575px){
    .blog-grid{ grid-template-columns:1fr; }
}

/*==============================
    Blog template — single
    article page (editorial
    styling: comfortable reading
    width, clear heading
    hierarchy, generous spacing)
==============================*/

.article-hero{
    position:relative;
    padding:calc(var(--header-height) + 44px) 0 0;
    background:var(--color-cream);
    overflow:hidden;
}

.article-hero-head{
    max-width:760px;
    margin-inline:auto;
    text-align:center;
    padding-bottom:var(--space-10);
}

.article-category{
    display:inline-block;
    padding:6px 16px;
    border-radius:var(--radius-pill);
    background:rgba(242,118,30,.1);
    color:var(--color-orange);
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:var(--space-5);
}

.article-hero-head h1{
    font-size:clamp(1.9rem, 1.7vw + 1.4rem, 2.75rem);
    letter-spacing:-.02em;
    line-height:1.18;
    margin-bottom:var(--space-4);
}

.article-meta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    font-size:var(--fs-sm);
    color:var(--text-light);
}

.article-meta-dot{ opacity:.5; }

.article-hero-media{
    max-width:920px;
    margin-inline:auto;
    border-radius:var(--radius-xl);
    overflow:hidden;
    aspect-ratio:16/8.5;
    box-shadow:var(--shadow-lg);
}

.article-hero-media img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.article-section{ padding-top:var(--space-16); }

.article-wrap{
    max-width:720px;
    margin-inline:auto;
}

.article-intro{
    font-size:var(--fs-lg);
    line-height:1.6;
    color:var(--text-heading);
    font-weight:var(--fw-medium);
    margin-bottom:var(--space-8);
}

.article-figure{
    margin:0 0 var(--space-10);
    border-radius:var(--radius-lg);
    overflow:hidden;
}

.article-figure img{
    width:100%;
    height:auto;
    display:block;
    aspect-ratio:16/9.5;
    object-fit:cover;
}

.article-body h2{
    font-size:var(--fs-xl);
    line-height:1.3;
    margin:var(--space-10) 0 var(--space-4);
}

.article-body h2:first-child{ margin-top:0; }

.article-body p{
    font-size:var(--fs-md);
    line-height:1.8;
    color:var(--text-body);
    margin-bottom:var(--space-5);
}

.article-quote{
    position:relative;
    margin:var(--space-8) 0;
    padding:var(--space-8) var(--space-8);
    background:var(--color-surface);
    border-left:3px solid var(--color-orange);
    border-radius:0 var(--radius-lg) var(--radius-lg) 0;
}

.article-quote p{
    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-lg);
    line-height:1.5;
    color:var(--text-heading);
    margin:0;
}

@media (max-width:575px){
    .article-hero-media{ aspect-ratio:4/3.6; border-radius:var(--radius-lg); }
    .article-intro{ font-size:var(--fs-md); }
    .article-quote{ padding:var(--space-5) var(--space-6); }
}

.quote-form-success p{ color:var(--text-light); }

/*==================================================
    Footer — legal links row
==================================================*/

.footer-bottom-row{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    flex-wrap:wrap;
}

.footer-legal-links{
    display:flex;
    align-items:center;
    gap:var(--space-4);
}

.footer-legal-links a{
    color:var(--text-white-muted);
    font-size:var(--fs-xs);
    white-space:nowrap;
}

.footer-legal-links a:hover{ color:var(--color-yellow); }

/* ABN/QBCC licence line — kept small and muted, sitting quietly next to the
   copyright line rather than as its own attention-grabbing block, per the
   "don't overcrowd the design" instruction for credibility info. */
.footer-credentials{
    color:var(--text-white-muted);
    font-size:var(--fs-xs);
    opacity:.75;
}

@media (max-width:767px){
    .footer-bottom-row{ justify-content:center; }
}

/*==================================================
    Confirmation / Thank You page
==================================================*/

.confirmation-section{
    padding:var(--space-16) 0 var(--space-24);
}

.confirmation-card{
    max-width:760px;
    margin-inline:auto;
    text-align:center;
}

.confirmation-icon{
    width:84px;
    height:84px;
    border-radius:50%;
    background:var(--gradient-brand);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto var(--space-6);
    box-shadow:var(--shadow-hover);
}

.confirmation-card .lead{ max-width:560px; margin-inline:auto; }

.confirmation-ref{
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-pill);
    padding:var(--space-2) var(--space-5);
    font-size:var(--fs-sm);
    color:var(--text-body);
    margin-top:var(--space-5);
}

.confirmation-ref strong{ color:var(--text-heading); font-family:var(--font-heading); }

.confirmation-steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-5);
    margin:var(--space-12) 0;
    text-align:left;
}

.confirmation-step{
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-6);
}

.confirmation-step-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--gradient-brand-soft);
    color:var(--color-orange);
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    font-size:var(--fs-sm);
    margin-bottom:var(--space-4);
}

.confirmation-step h3{ font-size:var(--fs-md); margin-bottom:var(--space-2); }
.confirmation-step p{ font-size:var(--fs-sm); color:var(--text-body); }

.confirmation-cta{
    display:flex;
    gap:var(--space-4);
    justify-content:center;
    flex-wrap:wrap;
    margin-top:var(--space-2);
}

@media (max-width:767px){
    .confirmation-steps{ grid-template-columns:1fr; text-align:center; }
    .confirmation-step{ text-align:left; }
}

/*==================================================
    404 — Page Not Found
==================================================*/

.notfound-section{
    padding:var(--space-12) 0 var(--space-24);
    text-align:center;
}

.notfound-numeral{
    font-family:var(--font-heading);
    font-weight:var(--fw-extra-bold);
    font-size:clamp(5rem, 14vw, 9rem);
    line-height:1;
    background:var(--gradient-brand);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    margin-bottom:var(--space-2);
}

.notfound-section .lead{ max-width:520px; margin-inline:auto; }

.notfound-cta{
    display:flex;
    gap:var(--space-4);
    justify-content:center;
    flex-wrap:wrap;
    margin-top:var(--space-8);
}

.notfound-links{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--space-4);
    max-width:860px;
    margin:var(--space-12) auto 0;
    text-align:left;
}

.notfound-link-card{
    display:block;
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:var(--space-5) var(--space-4);
    text-align:center;
    color:var(--text-heading);
    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-sm);
    transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.notfound-link-card svg{
    color:var(--color-orange);
    display:block;
    margin:0 auto var(--space-3);
}

.notfound-link-card:hover{
    border-color:var(--color-orange);
    transform:translateY(-3px);
    box-shadow:var(--shadow-md);
}

@media (max-width:767px){
    .notfound-links{ grid-template-columns:repeat(2,1fr); }
}

/*==================================================
    Legal pages — Privacy Policy / Terms & Conditions
==================================================*/

.legal-section-wrap{
    padding:var(--space-16) 0 var(--space-24);
}

.legal-updated{
    color:var(--text-light);
    font-size:var(--fs-sm);
    margin-bottom:var(--space-2);
}

.legal-intro{
    font-size:var(--fs-md);
    color:var(--text-body);
    max-width:760px;
    margin-bottom:var(--space-10);
}

.legal-grid{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:var(--space-12);
    align-items:start;
}

.legal-toc{
    position:sticky;
    top:calc(var(--header-height) + 24px);
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-5);
}

.legal-toc p{
    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-xs);
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--text-light);
    margin-bottom:var(--space-3);
}

.legal-toc ul{ display:flex; flex-direction:column; gap:var(--space-1); }

.legal-toc a{
    display:block;
    font-size:var(--fs-sm);
    color:var(--text-body);
    padding:var(--space-2) 0 var(--space-2) var(--space-3);
    border-left:2px solid var(--color-border);
    transition:color .2s ease, border-color .2s ease;
}

.legal-toc a:hover{ color:var(--color-orange); border-color:var(--color-orange); }

.legal-body section{ padding:0; }
.legal-body section + section{ margin-top:var(--space-10); }

.legal-body h2{
    font-size:var(--fs-2xl);
    margin-bottom:var(--space-4);
    scroll-margin-top:calc(var(--header-height) + 24px);
}

.legal-body h3{
    font-size:var(--fs-md);
    margin:var(--space-5) 0 var(--space-2);
}

.legal-body p{ color:var(--text-body); margin-bottom:var(--space-4); }

.legal-body ul{
    margin:0 0 var(--space-4);
    padding-left:var(--space-5);
    color:var(--text-body);
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
}

.legal-body ul li{ list-style:disc; }

.legal-body a{ color:var(--color-orange); text-decoration:underline; text-decoration-color:rgba(242,118,30,.35); text-underline-offset:2px; }
.legal-body a:hover{ text-decoration-color:currentColor; }

@media (max-width:991px){
    .legal-grid{ grid-template-columns:1fr; }
    .legal-toc{ position:static; }
    .legal-toc ul{ flex-direction:row; flex-wrap:wrap; gap:var(--space-3); }
    .legal-toc a{ border-left:none; border-bottom:2px solid var(--color-border); padding:var(--space-1) 0; }
}

/*==================================================
    Blog / search pagination (the_posts_pagination()) —
    used on the Blog index (home.php) and search results
    (index.php) once there's more than one page of posts.
==================================================*/

.pagination{
    margin-top:var(--space-12);
    display:flex;
    justify-content:center;
}

.pagination .nav-links{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--space-2);
}

.pagination .page-numbers{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    height:44px;
    padding:0 var(--space-3);
    border-radius:var(--radius-pill);
    border:1.5px solid var(--color-border);
    background:#fff;
    color:var(--text-heading);
    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-sm);
    transition:var(--transition-fast);
}

.pagination .page-numbers.dots{
    border-color:transparent;
    background:transparent;
}

.pagination a.page-numbers:hover{
    border-color:var(--color-orange);
    color:var(--color-orange);
}

.pagination .page-numbers.current{
    background:var(--gradient-brand);
    border-color:transparent;
    color:#fff;
}