/* ============================================
   CAPITAL MOVES LONDON - SHARED STYLESHEET
   Removals & Cleaning Services
   ============================================ */

/* Inter, self-hosted. One variable font covers weights 400-800, so there is no
   render-blocking request to Google Fonts and no extra connection to its font
   host. The latin file is preloaded in each page's <head>; latin-ext only
   downloads if a page actually uses one of its characters. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext-var.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --navy: #0f1f3d;
    --navy-light: #1a3357;
    --navy-dark: #0a1530;
    --orange: #e85d2b;
    --orange-dark: #c44a1e;
    --orange-light: #fff0eb;
    --white: #ffffff;
    --gray: #f5f7fa;
    --gray-light: #f0f2f5;
    --gray-dark: #6b7280;
    --text: #1f2937;
    --text-light: #4b5563;
    --border: #e5e7eb;
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --radius: 12px;
    --radius-lg: 16px;
    --transition: all 0.3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* Stops iOS Safari inflating body text when a phone is turned to landscape. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    background: var(--white);
    /* The default grey flash on tap reads as a rendering glitch on dark panels. */
    -webkit-tap-highlight-color: rgba(15, 31, 61, 0.12);
}

/* A sticky header plus in-page anchors means targets land under the navbar. */
:target { scroll-margin-top: 96px; }

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    text-align: center;
}

.btn-primary {
    background: var(--orange);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(232, 93, 43, 0.4);
}

.btn-primary:hover {
    background: var(--orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232, 93, 43, 0.5);
}

.btn-secondary {
    background: var(--white);
    color: var(--navy);
    border: 2px solid var(--white);
}

.btn-secondary:hover {
    background: transparent;
    color: var(--white);
}

.btn-outline {
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(255,255,255,0.3);
}

.btn-outline:hover {
    background: var(--white);
    color: var(--navy);
    border-color: var(--white);
}

.btn-navy {
    background: var(--navy);
    color: var(--white);
}

.btn-navy:hover {
    background: var(--navy-light);
    transform: translateY(-2px);
}

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

.btn-outline-navy:hover {
    background: var(--navy);
    color: var(--white);
}

/* Section Titles */
.section-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--navy);
    text-align: center;
    margin-bottom: 12px;
    line-height: 1.2;
}

.section-subtitle {
    text-align: center;
    color: var(--gray-dark);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 48px;
}

.section-title-white { color: var(--white); }
.section-subtitle-white { color: rgba(255,255,255,0.7); }

/* Page Header */
.page-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    padding: 120px 0 80px;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.1;
}

.page-header .container { position: relative; z-index: 1; }

.page-header h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.page-header p {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.85);
    max-width: 600px;
    margin: 0 auto;
}

.breadcrumbs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
}

.breadcrumbs a:hover { color: var(--orange); text-decoration: underline; }
.breadcrumbs span { color: var(--orange); }

/* Top Bar */
.top-bar {
    background: var(--navy-dark);
    color: rgba(255,255,255,0.9);
    padding: 10px 0;
    font-size: 0.9rem;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.top-bar a { color: var(--orange); font-weight: 600; }
.top-bar a:hover { text-decoration: underline; }

/* Navbar */
.navbar {
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
}

/* Applied by the scroll listener once the page has moved off the top. Doing this
   with a class instead of an inline style keeps scrolling off the main thread. */
.navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72px;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo i { color: var(--orange); font-size: 1.75rem; }
.logo span { color: var(--orange); }
.logo-full { color: #000; white-space: nowrap; margin-right: 40px; }

.nav-links {
    display: flex;
    gap: 28px;
    align-items: center;
}

.nav-links > li { position: relative; }

.nav-links a {
    font-weight: 500;
    color: var(--text);
    transition: color 0.2s;
    font-size: 0.95rem;
}

.nav-links a:hover, .nav-links a.active { color: var(--orange); }

/* Dropdown */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    z-index: 100;
}

.nav-links > li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.dropdown-menu a:hover {
    background: var(--gray);
    color: var(--orange);
}

.dropdown-menu a i {
    width: 20px;
    color: var(--orange);
    margin-right: 8px;
}

.dropdown-heading {
    display: block;
    margin-top: 8px;
    padding: 10px 20px 6px;
    border-top: 1px solid var(--border);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-dark);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--navy);
    cursor: pointer;
    /* A bare glyph gives roughly a 24px target; phones need at least 44px. */
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-right: -10px;
}

/* Drawn in CSS rather than with an icon font. Font Awesome now loads off the
   critical path, and this is the only control that opens the navigation — it
   must never be an invisible button while the icon font is still in flight. */
.menu-bars,
.menu-bars::before,
.menu-bars::after {
    display: block;
    width: 24px;
    height: 2.5px;
    border-radius: 2px;
    background: currentColor;
}

.menu-bars {
    position: relative;
}

.menu-bars::before,
.menu-bars::after {
    content: '';
    position: absolute;
    left: 0;
}

.menu-bars::before { top: -7px; }
.menu-bars::after  { top: 7px; }

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--navy);
    /* Must clear the sticky navbar (1000) and the WhatsApp button (999), or both
       paint over the overlay and the close button becomes unreachable. */
    z-index: 1100;
    flex-direction: column;
    align-items: center;
    /* Not 'center': a centred column taller than the box overflows upwards, past
       the scroll origin, so the top entries could never be scrolled into view.
       The auto margins below centre it instead, and collapse to zero once the
       menu is taller than the screen, letting it scroll from the top. */
    justify-content: flex-start;
    /* Capped to the visible viewport (dvh tracks mobile browser toolbars;
       vh is the fallback for browsers without dvh). */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    gap: 24px;
    padding: 80px 24px;
    padding-top: max(80px, calc(env(safe-area-inset-top) + 72px));
    padding-bottom: max(80px, calc(env(safe-area-inset-bottom) + 32px));
    overflow-y: auto;
    /* Keeps a flick at the end of the menu from scrolling the page behind it. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu.active { display: flex; }

/* Vertical centring that stays scrollable (see justify-content above). The close
   button is absolutely positioned, so the first flow item is the Home link. */
.mobile-menu > a:first-of-type { margin-top: auto; }
.mobile-menu > a:last-child { margin-bottom: auto; }
.mobile-menu > * { flex-shrink: 0; }

.mobile-menu a {
    color: var(--white);
    font-size: 1.3rem;
    font-weight: 600;
    /* Full-width rows with real height, so a thumb tap cannot fall between links. */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
    max-width: 320px;
}

.mobile-menu .mobile-dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.mobile-menu .mobile-dropdown a {
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255,255,255,0.8);
}

.close-menu {
    /* Fixed, not absolute, so the × stays in the top corner while the links
       scroll underneath it. The menu has no transform, so 'fixed' resolves
       against the viewport, which the full-screen menu exactly covers. */
    position: fixed;
    top: max(24px, env(safe-area-inset-top));
    right: 16px;
    z-index: 1;
    /* The menu's own navy, so a link scrolling beneath can't show through the ×. */
    background: var(--navy);
    border-radius: 50%;
    border: none;
    color: var(--white);
    font-size: 2rem;
    cursor: pointer;
    /* 48px square so the × is comfortably tappable rather than pixel-hunted. */
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* A plain × glyph, so closing the menu never depends on the icon font. */
    line-height: 1;
    font-size: 2.25rem;
}

/* Hero (Homepage) */
.hero {
    position: relative;
    min-height: 90vh;
    /* On phones `vh` is measured against the viewport with the URL bar retracted,
       so 90vh overshoots the visible area and the hero jumps as the bar hides.
       `svh` is the small (bar-visible) viewport, which stays put while scrolling. */
    min-height: 90svh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.15;
}

/* The faint photo behind the hero and page headers is desktop-only. Below the
   desktop breakpoint the plain navy gradient is shown instead, and because the
   url() lives inside this media query, phones and tablets never download it.
   On desktop it comes through Image CDN, which serves AVIF/WebP at a quality
   that suits an image shown at 10-15% opacity. */
@media (min-width: 1025px) {
    .hero::before,
    .page-header::before {
        background: url('/.netlify/images?url=/assets/img/hero-bg-1920.jpg&w=1600&q=45') center/cover;
    }
}

.hero .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero-content h1 span { color: var(--orange); }

/* Home page: keep the headline clear of the white navbar */
.hero-home { padding-top: 48px; }

.hero-content p {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 32px;
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-trust {
    display: flex;
    gap: 24px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.hero-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
}

.hero-trust-item i { color: var(--orange); }

.hero-image { position: relative; }
.hero-image picture { display: block; }

.hero-image img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.hero-badge {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: var(--orange);
    color: var(--white);
    padding: 20px 28px;
    border-radius: var(--radius);
    font-weight: 700;
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.hero-badge .big { font-size: 2rem; display: block; line-height: 1; }

/* Trust Strip */
.trust-strip {
    background: var(--white);
    padding: 40px 0;
    border-bottom: 1px solid var(--border);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
}

.trust-item i {
    font-size: 2rem;
    color: var(--orange);
    width: 48px;
    text-align: center;
}

.trust-item h4 { font-weight: 700; color: var(--navy); font-size: 1rem; }
.trust-item p { font-size: 0.85rem; color: var(--gray-dark); }

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-align: center;
    transition: var(--transition);
    border: 1px solid transparent;
    box-shadow: var(--shadow);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--orange);
}

.service-card .card-img {
    height: 180px;
    overflow: hidden;
}

.service-card .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.service-card .card-body {
    padding: 32px 28px 28px;
}

.service-card i {
    font-size: 2.5rem;
    color: var(--orange);
    margin-bottom: 16px;
    display: inline-block;
}

.service-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 12px;
}

.service-card p {
    color: var(--gray-dark);
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.service-card .link {
    color: var(--orange);
    font-weight: 600;
    font-size: 0.9rem;
}

.service-card .link:hover { text-decoration: underline; }

/* Service Detail Page */
.service-detail {
    padding: 80px 0;
}

.service-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
}

.service-detail-grid.reverse { direction: rtl; }
.service-detail-grid.reverse > * { direction: ltr; }

.service-detail-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.service-detail-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-detail-image:hover img {
    transform: scale(1.03);
}

.service-detail-content h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 16px;
}

.service-detail-content h2 span { color: var(--orange); }

.service-detail-content p {
    color: var(--text-light);
    margin-bottom: 16px;
    font-size: 1.05rem;
}

.service-detail-content ul {
    margin: 20px 0;
}

.service-detail-content ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-weight: 500;
}

.service-detail-content ul li i {
    color: var(--orange);
    font-size: 1rem;
}

/* Image Gallery */
.img-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.img-gallery-item {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
    height: 220px;
}

.img-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.img-gallery-item:hover img {
    transform: scale(1.08);
}

.img-gallery-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 16px 16px;
    background: linear-gradient(transparent, rgba(15,31,61,0.8));
    color: var(--white);
    font-weight: 600;
    font-size: 0.95rem;
    opacity: 0;
    transition: opacity 0.3s;
}

.img-gallery-item:hover .overlay {
    opacity: 1;
}

/* Before & After */
.before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.before-after-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    height: 350px;
}

.before-after-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.before-after-item .label {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--orange);
    color: var(--white);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Equipment / Feature Cards with Images */
.equip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.equip-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

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

.equip-card .equip-img {
    height: 200px;
    overflow: hidden;
}

.equip-card .equip-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.equip-card:hover .equip-img img {
    transform: scale(1.08);
}

.equip-card .equip-body {
    padding: 24px;
}

.equip-card .equip-body h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px;
}

.equip-card .equip-body p {
    color: var(--gray-dark);
    font-size: 0.9rem;
}

/* Team Cards */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}

.team-card {
    text-align: center;
}

.team-card .team-img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    border: 4px solid var(--orange);
    box-shadow: var(--shadow-lg);
}

.team-card .team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 4px;
}

.team-card p {
    color: var(--orange);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.team-card .bio {
    color: var(--gray-dark);
    font-size: 0.9rem;
    max-width: 280px;
    margin: 0 auto;
}

/* Pricing Cards */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.pricing-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    text-align: center;
    box-shadow: var(--shadow);
    border: 2px solid transparent;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.pricing-card.featured {
    border-color: var(--orange);
    transform: scale(1.05);
}

.pricing-card.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--orange);
    color: var(--white);
    padding: 5px 18px;
    border-radius: 0 0 20px 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.pricing-card:hover {
    box-shadow: var(--shadow-lg);
}

.pricing-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px;
}

.pricing-card .price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--orange);
    margin-bottom: 4px;
}

.pricing-card .price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--gray-dark);
}

.pricing-card .desc {
    color: var(--gray-dark);
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.pricing-card ul {
    text-align: left;
    margin-bottom: 24px;
}

.pricing-card ul li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pricing-card ul li i {
    color: var(--orange);
    font-size: 0.8rem;
}

/* About Page */
.about-section {
    padding: 80px 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-image {
    position: relative;
}

.about-image img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    height: 450px;
    object-fit: cover;
}

.about-image::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: -20px;
    bottom: -20px;
    border: 3px solid var(--orange);
    border-radius: var(--radius-lg);
    z-index: -1;
}

.about-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 20px;
    line-height: 1.2;
}

.about-content h2 span { color: var(--orange); }

.about-content p {
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 1.05rem;
}

.about-features {
    list-style: none;
    margin: 24px 0;
}

.about-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-weight: 500;
}

.about-features li i {
    color: var(--orange);
    font-size: 1.1rem;
}

/* Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.stat-item {
    text-align: center;
    padding: 32px 20px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.stat-item .number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--orange);
    line-height: 1;
}

.stat-item .label {
    font-size: 0.9rem;
    color: var(--gray-dark);
    margin-top: 8px;
    font-weight: 500;
}

/* Process */
.process {
    padding: 100px 0;
    background: var(--navy);
    color: var(--white);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
}

.process-grid::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: rgba(255,255,255,0.2);
    z-index: 0;
}

.process-step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.step-number {
    width: 80px;
    height: 80px;
    background: var(--orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 auto 24px;
    box-shadow: 0 0 0 8px rgba(232, 93, 43, 0.2);
}

.process-step h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.process-step p {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
}

/* Quote Form */
.quote-section {
    padding: 80px 0;
    background: var(--gray);
}

.quote-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 20px;
    padding: 48px;
    box-shadow: var(--shadow-lg);
}

.quote-container h2 {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 8px;
}

.quote-container > p {
    text-align: center;
    color: var(--gray-dark);
    margin-bottom: 32px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full { grid-column: 1 / -1; }

.form-group label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: var(--navy);
}

.form-group label span { color: var(--orange); }

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.2s;
    background: var(--white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--orange);
}

.form-group textarea { resize: vertical; min-height: 100px; }

/* Address suggestions on the quote form (assets/js/address-autocomplete.js). */
.addr-group { position: relative; }
.addr-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 31, 61, 0.12);
    max-height: 260px;
    overflow-y: auto;
}
.addr-suggest[hidden] { display: none; }
.addr-suggest li {
    padding: 10px 16px;
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--navy);
    cursor: pointer;
}
.addr-suggest li:hover,
.addr-suggest li[aria-selected="true"] { background: rgba(232, 93, 43, 0.08); }

.form-submit {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 8px;
}

.form-submit .btn {
    padding: 16px 48px;
    font-size: 1.1rem;
}

.form-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--gray-dark);
    margin-top: 16px;
}

/* Areas */
.areas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.area-item {
    background: var(--gray);
    padding: 14px 20px;
    border-radius: var(--radius);
    text-align: center;
    font-weight: 600;
    color: var(--navy);
    transition: var(--transition);
}

.area-item:hover {
    background: var(--navy);
    color: var(--white);
}

/* FAQ */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--white);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.faq-question {
    width: 100%;
    padding: 20px 24px;
    background: none;
    border: none;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.faq-question:hover { background: #fafafa; }

.faq-question i {
    color: var(--orange);
    transition: transform 0.3s;
}

.faq-item.active .faq-question i { transform: rotate(180deg); }

/* A fixed max-height clipped long answers once a phone's narrow column made them
   taller than the cap. Animating a grid row from 0fr to 1fr expands to whatever
   the content actually needs, at any width. Browsers too old to interpolate
   `fr` still open and close correctly, just without the slide. */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.3s ease, padding 0.3s ease;
}

.faq-answer > * { min-height: 0; }

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
    padding: 0 24px 20px;
}

.faq-answer p {
    color: var(--text-light);
    line-height: 1.7;
}

/* Contact Page */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.contact-info h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 20px;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.contact-info-item i {
    font-size: 1.25rem;
    color: var(--orange);
    margin-top: 4px;
    width: 24px;
}

.contact-info-item h4 {
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 4px;
}

.contact-info-item p, .contact-info-item a {
    color: var(--text-light);
    font-size: 0.95rem;
}

.contact-info-item a:hover { color: var(--orange); }

.contact-hours {
    background: var(--gray);
    border-radius: var(--radius);
    padding: 24px;
    margin-top: 32px;
}

.contact-hours h4 {
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 12px;
}

.contact-hours table {
    width: 100%;
    font-size: 0.95rem;
}

.contact-hours td {
    padding: 6px 0;
    color: var(--text-light);
}

.contact-hours td:first-child {
    font-weight: 500;
    color: var(--navy);
}

/* Testimonials */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testimonial-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

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

.testimonial-card .stars {
    color: #fbbf24;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.testimonial-card p {
    color: var(--text-light);
    font-style: italic;
    margin-bottom: 20px;
    line-height: 1.7;
}

.testimonial-card .author {
    font-weight: 700;
    color: var(--navy);
}

.testimonial-card .location {
    font-size: 0.85rem;
    color: var(--gray-dark);
}

/* CTA Banner */
.cta-banner {
    background: var(--orange);
    padding: 80px 0;
    text-align: center;
    color: var(--white);
}

.cta-banner h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.cta-banner p {
    font-size: 1.2rem;
    opacity: 0.95;
    margin-bottom: 32px;
}

.cta-banner .btn-secondary {
    background: var(--white);
    color: var(--orange);
    border-color: var(--white);
}

.cta-banner .btn-secondary:hover {
    background: transparent;
    color: var(--white);
}

/* Footer */
.footer {
    background: var(--navy);
    color: rgba(255,255,255,0.8);
    padding: 60px 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
    text-align: center;
}

.footer-brand .logo {
    color: var(--white);
    margin-bottom: 16px;
    justify-content: center;
}

.footer-brand p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 auto 20px;
    max-width: 380px;
}

.social-links {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--orange);
    transform: translateY(-2px);
}

.footer h4 {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.footer-links li { margin-bottom: 12px; }

.footer-links a {
    font-size: 0.95rem;
    transition: color 0.2s;
}

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

.footer-contact li {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.footer-contact i {
    color: var(--orange);
    margin-top: 4px;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 24px;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
}

/* Every line in the bottom bar — copyright, registered-office disclosure and the
   Terms / Privacy links — is centred on the page, with the block itself centred
   too so a capped line length still sits in the middle of the screen. */
.footer-bottom > p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* WhatsApp Float */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    /* Clears the iOS home indicator / Android gesture bar, which otherwise sits
       on top of the button and swallows the tap. */
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
    right: 24px;
    right: max(24px, calc(env(safe-area-inset-right) + 16px));
    width: 60px;
    height: 60px;
    background: #25d366;
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    box-shadow: var(--shadow-lg);
    z-index: 999;
    transition: transform 0.2s;
}

.whatsapp-float:hover { transform: scale(1.1); }

/* Sections Padding */
.section-padding { padding: 100px 0; }
.section-padding-sm { padding: 60px 0; }
.bg-gray { background: var(--gray); }
.bg-white { background: var(--white); }

/* Two Service Cards (Homepage) */
.two-service-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}

.two-service-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.two-service-card:hover {
    transform: translateY(-8px);
}

.two-service-card .card-image {
    height: 220px;
    overflow: hidden;
}

.two-service-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.two-service-card:hover .card-image img {
    transform: scale(1.05);
}

.two-service-card .card-body {
    padding: 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.two-service-card .card-body h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 12px;
}

.two-service-card .card-body p {
    color: var(--text-light);
    margin-bottom: 20px;
    flex: 1;
}

/* Visual Break / Banner Image */
.visual-break {
    position: relative;
    height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-break img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visual-break::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 31, 61, 0.7);
}

.visual-break .container {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--white);
}

.visual-break h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.visual-break p {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 24px;
}

/* Side-by-side with image */
.side-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.side-image-grid .side-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.side-image-grid .side-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 400px;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero .container { grid-template-columns: 1fr; text-align: center; }
    .hero-content p { margin: 0 auto 32px; }
    .hero-buttons { justify-content: center; }
    .hero-trust { justify-content: center; }
    .hero-image { display: none; }
    .about-grid { grid-template-columns: 1fr; }
    .about-image { order: -1; }
    .service-detail-grid { grid-template-columns: 1fr; gap: 40px; }
    .service-detail-grid.reverse { direction: ltr; }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
    .pricing-card.featured { transform: scale(1); }
    .two-service-cards { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .img-gallery { grid-template-columns: repeat(2, 1fr); }
    .equip-grid { grid-template-columns: repeat(2, 1fr); }
    .team-grid { grid-template-columns: 1fr; }
    .before-after { grid-template-columns: 1fr; }
    .side-image-grid { grid-template-columns: 1fr; }
    .visual-break h2 { font-size: 2rem; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: inline-flex; }
    .hero-content h1 { font-size: 2.5rem; }
    .services-grid { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: 1fr 1fr; }
    .process-grid { grid-template-columns: 1fr; }
    .process-grid::before { display: none; }
    .areas-grid { grid-template-columns: 1fr 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .quote-container { padding: 32px 24px; }
    .footer-grid { grid-template-columns: 1fr; }
    .section-title { font-size: 1.75rem; }
    .cta-banner h2 { font-size: 1.75rem; }
    .page-header { padding: 100px 0 60px; }
    .page-header h1 { font-size: 2rem; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .img-gallery { grid-template-columns: 1fr 1fr; }
    .equip-grid { grid-template-columns: 1fr; }
    .visual-break { height: 300px; }
    .visual-break h2 { font-size: 1.75rem; }
}

@media (max-width: 480px) {
    .trust-grid { grid-template-columns: 1fr; }
    .hero-content h1 { font-size: 2rem; }
    .areas-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .img-gallery { grid-template-columns: 1fr; }
}

/* ---- Footer legal disclosure (Companies Act 2006 s.82) ---- */
.footer-legal {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    margin: 8px auto 0;
    max-width: 760px;
    text-align: center;
}
.footer-legal a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
}
.footer-legal a:hover { color: #fff; }

/* ---- Secondary navy outline button (used on 404, thank-you, terms) ---- */
.btn-outline-navy {
    background: transparent;
    border: 2px solid var(--navy);
    color: var(--navy);
}
.btn-outline-navy:hover {
    background: var(--navy);
    color: #fff;
}

/* ============================================
   DISCOUNT BANNER / NOTICE STRIP
   ============================================ */
.discount-banner {
    background: linear-gradient(135deg, var(--navy) 0%, #1a3560 100%);
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    display: flex;
    align-items: center;
    gap: 28px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.discount-banner::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--orange);
}

.discount-banner .discount-icon {
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(232, 93, 43, 0.16);
    border: 2px solid var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--orange);
}

.discount-banner .discount-body {
    flex: 1 1 auto;
}

.discount-banner .discount-tag {
    display: inline-block;
    background: var(--orange);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 100px;
    margin-bottom: 10px;
}

.discount-banner h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--white);
}

.discount-banner p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.discount-banner .btn {
    flex: 0 0 auto;
}

.notice-strip {
    background: #fff7f3;
    border: 1px solid rgba(232, 93, 43, 0.35);
    border-left: 4px solid var(--orange);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-top: 32px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.notice-strip i {
    color: var(--orange);
    font-size: 1.1rem;
    margin-top: 3px;
    flex: 0 0 auto;
}

.notice-strip p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--gray-dark);
}

.notice-strip strong {
    color: var(--navy);
}

@media (max-width: 768px) {
    .discount-banner {
        flex-direction: column;
        text-align: center;
        padding: 28px 22px;
        gap: 18px;
    }

    .discount-banner .btn {
        width: 100%;
    }

    .discount-banner::before {
        inset: 0 0 auto 0;
        width: auto;
        height: 5px;
    }
}

/* ============================================
   FORM CHECKBOX (student discount opt-in)
   ============================================ */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff7f3;
    border: 1px solid rgba(232, 93, 43, 0.35);
    border-radius: var(--radius);
    padding: 16px 18px;
}

.form-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--orange);
    flex: 0 0 auto;
    cursor: pointer;
}

.form-check label {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    font-weight: 500;
    color: var(--gray-dark);
    cursor: pointer;
}

.form-check label strong {
    color: var(--navy);
    font-weight: 700;
}

/* ============================================
   Google Reviews - continuous swipe carousel
   ============================================ */
.g-reviews {
    --g-card: 340px;
    margin-top: 48px;
}

.g-reviews-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 20px;
}

.g-reviews-head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.g-reviews-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 22px;
    box-shadow: var(--shadow);
}

.g-reviews-badge .g-logo { width: 30px; height: 30px; flex: 0 0 auto; }

.g-reviews-score {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--navy);
}

.g-reviews-score span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-dark);
}

.g-reviews-meta {
    font-size: 0.82rem;
    color: var(--gray-dark);
    font-weight: 500;
    margin-left: 8px;
}

.g-stars { color: #fbbf24; font-size: 0.85rem; letter-spacing: 1px; }

/* A real scroll container, so touch and trackpad swiping always work */
.g-reviews-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    cursor: grab;
    /* fade the edges so cards enter and leave instead of being clipped */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.g-reviews-viewport::-webkit-scrollbar { display: none; }
.g-reviews-viewport.is-dragging { cursor: grabbing; }
.g-reviews-viewport:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

.g-reviews-track {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: max-content;
    padding: 6px 2px 14px;
}

.g-review {
    flex: 0 0 var(--g-card);
    width: var(--g-card);
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.g-review:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.g-review-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.g-review-top .g-logo {
    width: 20px;
    height: 20px;
    margin-left: auto;
    flex: 0 0 auto;
    opacity: 0.85;
}

.g-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--white);
    background: var(--navy-light);
    user-select: none;
}

img.g-avatar { object-fit: cover; display: block; }

.g-review-who { min-width: 0; }

.g-review-name {
    font-weight: 700;
    color: var(--navy);
    font-size: 0.98rem;
    line-height: 1.3;
}

.g-review-when {
    font-size: 0.78rem;
    color: var(--gray-dark);
    font-weight: 500;
}

.g-review-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.g-review-rating time {
    font-size: 0.78rem;
    color: var(--gray-dark);
    font-weight: 500;
}

.g-review-chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gray-light);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
}

.g-review-chip i { color: #188038; font-size: 0.72rem; }

.g-review-body {
    color: var(--text-light);
    font-size: 0.94rem;
    line-height: 1.7;
    margin: 0 0 14px;
    flex: 1 1 auto;
}

.g-review-services {
    font-size: 0.78rem;
    color: var(--gray-dark);
    margin: 0 0 16px;
}

.g-review-services strong { color: var(--navy); font-weight: 700; }

.g-review-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--gray-dark);
    font-weight: 500;
}

.g-review-foot .g-logo { width: 14px; height: 14px; flex: 0 0 auto; }

.g-reviews-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 28px;
}

.g-reviews-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--navy);
    font-size: 0.94rem;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}

.g-reviews-link .g-logo { width: 16px; height: 16px; flex: 0 0 auto; }
.g-reviews-link:hover { color: var(--orange); border-bottom-color: var(--orange); }

.g-reviews-hint {
    text-align: center;
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--gray-dark);
}

@media (max-width: 768px) {
    .g-reviews { --g-card: 290px; }
    .g-reviews-title { font-size: 1.35rem; }
    .g-reviews-track { gap: 16px; }
    .g-review { padding: 20px; }
    .g-reviews-badge { padding: 12px 18px; }
    .g-reviews-viewport {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .g-review:hover { transform: none; }
}

/* Coloured circle instead of a broken-image box if a Google photo fails to load */
img.g-avatar { background: var(--navy-light); }

/* ============================================
   Service landing pages - two-column checklist
   ============================================ */
.checklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 40px;
    max-width: 900px;
    margin: 32px auto 0;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-weight: 500;
    color: var(--text-light);
    line-height: 1.55;
}

.checklist li i {
    color: var(--orange);
    font-size: 1rem;
    margin-top: 4px;
    flex: 0 0 auto;
}

/* Section intro copy on the landing pages */
.local-copy {
    max-width: 780px;
    margin: 0 auto;
}

.local-copy p {
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 18px;
}

.local-copy p:last-child { margin-bottom: 0; }

.price-note {
    max-width: 720px;
    margin: 28px auto 0;
    text-align: center;
    color: var(--text-light);
    line-height: 1.7;
}

/* Cross-links between service pages */
.related-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 40px auto 0;
}

.related-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--navy);
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    transition: var(--transition);
}

.related-link i {
    font-size: 1.6rem;
    color: var(--orange);
    transition: var(--transition);
}

.related-link:hover {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.related-link:hover i { color: var(--white); }

.related-links.three-up { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 992px) {
    .related-links,
    .related-links.three-up { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .checklist { grid-template-columns: 1fr; gap: 12px; }
    .related-links { gap: 14px; }
    .related-link { padding: 22px 12px; font-size: 0.95rem; }
}

/* ---------- "What It Costs" price card: roomier, larger, fully readable ---------- */
.price-single { grid-template-columns: 1fr; max-width: 580px; margin: 0 auto; }
.price-single .pricing-card { padding: 52px 48px 44px; transform: none; text-align: center; }
.price-single .pricing-card.featured { transform: none; }
.price-single .pricing-card.featured::before { content: none; }
.price-single .pricing-card h3 { font-size: 1.6rem; line-height: 1.3; margin-bottom: 10px; }
.price-single .pricing-card .price { font-size: 3.2rem; line-height: 1.1; margin-bottom: 8px; }
.price-single .pricing-card .price span { font-size: 1.15rem; }
.price-single .pricing-card .desc { font-size: 1.05rem; line-height: 1.5; margin-bottom: 32px; }
.price-single .pricing-card ul { margin-bottom: 32px; max-width: 420px; margin-left: auto; margin-right: auto; }
.price-single .pricing-card ul li { font-size: 1rem; line-height: 1.55; padding: 13px 4px; gap: 12px; }
.price-single .pricing-card ul li i { margin-top: 5px; }
.price-single .pricing-card .btn { font-size: 1.05rem; padding: 16px 24px; }

/* Wrapping-safe list rows in every pricing card */
.pricing-card ul li { align-items: flex-start; }
.pricing-card ul li i { flex: 0 0 auto; }

/* Word prices ("Speak with us") where a figure would normally sit */
.price.price-text { font-size: 2rem; line-height: 1.25; letter-spacing: -0.01em; }
.price-single .pricing-card .price.price-text { font-size: 2.4rem; }

/* Four-card pricing guides stay roomy by wrapping to a 2x2 grid */
.pricing-grid.four-up { grid-template-columns: repeat(2, 1fr); max-width: 760px; gap: 28px; }
.pricing-grid.four-up .pricing-card { padding: 40px 34px; }
.pricing-grid.four-up .pricing-card.featured { transform: none; }

@media (max-width: 768px) {
    .price-single { max-width: 420px; }
    .price-single .pricing-card { padding: 44px 24px 36px; }
    .price-single .pricing-card h3 { font-size: 1.4rem; }
    .price-single .pricing-card .price { font-size: 2.6rem; }
    .price-single .pricing-card .price.price-text { font-size: 1.9rem; }
    .price-single .pricing-card .desc { font-size: 1rem; }
    .price-single .pricing-card ul li { font-size: 0.98rem; }
    .pricing-grid.four-up { grid-template-columns: 1fr; max-width: 420px; }
}

/* ============================================
   MOBILE BROWSER OPTIMISATIONS
   Touch input, viewport-relative sizing and the small-screen reading
   experience. Kept at the end so it layers over the base rules above.
   ============================================ */

/* ---- Hover states on touch screens ----
   A tap on a phone fires :hover and then leaves it applied, so a card the
   visitor merely touched stays lifted and outlined until they tap elsewhere.
   Pointer-based devices keep the effects; touch-only devices opt out. */
@media (hover: none) {
    .btn-primary:hover,
    .btn-navy:hover,
    .service-card:hover,
    .equip-card:hover,
    .testimonial-card:hover,
    .two-service-card:hover,
    .social-links a:hover,
    .whatsapp-float:hover,
    .g-review:hover,
    .related-link:hover {
        transform: none;
    }

    .service-card:hover .card-img img,
    .two-service-card:hover .card-image img,
    .service-detail-image:hover img,
    .img-gallery-item:hover img,
    .equip-card:hover .equip-img img {
        transform: none;
    }

    .service-card:hover {
        box-shadow: var(--shadow);
        border-color: transparent;
    }

    .faq-question:hover { background: none; }

    .g-review:hover { box-shadow: var(--shadow); }

    .related-link:hover {
        background: var(--white);
        color: var(--navy);
        border-color: var(--border);
        box-shadow: none;
    }

    .related-link:hover i { color: var(--orange); }

    /* The desktop nav is hidden on touch layouts anyway, but a hover-opened
       dropdown is unreachable by tap, so make sure it never latches open. */
    .nav-links > li:hover .dropdown-menu {
        opacity: 0;
        visibility: hidden;
    }
}

/* Give every control a thumb-sized target regardless of its glyph size. */
@media (max-width: 1024px) {
    .faq-question { min-height: 56px; }
    .footer-links a,
    .footer-contact a,
    .top-bar a { display: inline-block; padding: 4px 0; }
    .social-links a { width: 44px; height: 44px; }
    .area-item { min-height: 48px; display: flex; align-items: center; justify-content: center; }
    /* Inline CTAs inside cards read as links but are the main action on mobile. */
    .service-card .link { display: inline-block; padding: 8px 0; }
}

/* ---- Small-screen chrome and rhythm ---- */
@media (max-width: 768px) {
    /* The contact strip wrapped into three ragged rows under space-between,
       pushing the hero below the fold. Centred and compact keeps all three
       links while giving back vertical space. */
    .top-bar { padding: 8px 0; font-size: 0.82rem; }
    .top-bar .container {
        justify-content: center;
        text-align: center;
        gap: 2px 14px;
        line-height: 1.5;
    }

    /* 100px of padding either side of every section is a lot of scrolling on a
       phone; the sections still read as separated at this spacing. */
    .section-padding { padding: 56px 0; }
    .section-padding-sm { padding: 40px 0; }
    .section-subtitle { margin-bottom: 32px; }
    .service-detail { padding: 48px 0; }
    .service-detail-grid { margin-bottom: 48px; }

    /* Full-width buttons in the hero and CTAs: easier to hit, and they stop the
       two actions sitting on one cramped line. */
    .hero-buttons { flex-direction: column; align-items: stretch; width: 100%; }
    .hero-buttons .btn { width: 100%; }
    .hero-trust { gap: 12px 20px; margin-top: 28px; }

    /* Long words and email addresses should wrap rather than force a sideways
       scroll, which `overflow-x: hidden` on body would silently clip. */
    body { overflow-wrap: break-word; }
}

@media (max-width: 480px) {
    .container { padding: 0 18px; }
    .page-header { padding: 84px 0 48px; }
    .page-header h1 { font-size: 1.65rem; }
    .section-title { font-size: 1.55rem; }
    .hero { min-height: auto; padding: 48px 0 56px; }
    .hero-home { padding-top: 64px; }
    .service-card .card-body { padding: 24px 20px; }
    .quote-container { padding: 24px 18px; }
    .whatsapp-float { width: 54px; height: 54px; font-size: 1.5rem; }
}

/* ---- Reduced motion ----
   Respects the OS-level setting, and incidentally removes the smooth-scroll and
   transform work that costs the most on low-end phones. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}