/*
 * Guest Brothers Ltd - shared site chrome (v20261110)
 * Used by: services/*.html, services/index.html, privacy.html, terms.html, 404.html
 * (the homepage keeps its own inline CSS).
 *
 * 1. Tokens + base        4. Sticky mobile action bar
 * 2. Header + menu        5. Service-page layout
 * 3. Footer               6. Recent work, reviews, cross-links
 */

/* ── 1. Tokens + base ─────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --slate-950: #0a0f1a;
    --slate-900: #111827;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --slate-50: #f8fafc;
    --white: #ffffff;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;   /* backgrounds / buttons / icons only */
    --amber-600: #d97706;   /* decorative only - fails as text on white */
    --amber-text: #b45309;  /* amber TEXT on white / cream (5.0:1) */
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Instrument Serif', Georgia, serif;
    --section-padding: clamp(60px, 10vw, 100px);
    --container-padding: clamp(16px, 4vw, 24px);
    --max-width: 1200px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
    --radius: 12px;
    --radius-lg: 20px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --header-h: 72px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--slate-800);
    background: var(--white);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
[hidden] { display: none !important; }

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.2;
    color: var(--slate-900);
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 28px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius);
    transition: var(--transition);
    white-space: nowrap;
}
.btn-primary { background: var(--amber-500); color: var(--slate-950); }
.btn-primary:hover { background: var(--amber-400); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--white); color: var(--slate-900); border: 2px solid var(--slate-200); }
.btn-secondary:hover { border-color: var(--slate-900); background: var(--slate-50); }
.btn-whatsapp { background: #25d366; color: var(--slate-950); }
.btn-whatsapp:hover { background: #3fe07a; transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Amber as text on light backgrounds */
.text-link { color: var(--amber-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: var(--slate-900); }

/* Visible keyboard focus everywhere */
:focus-visible {
    outline: 3px solid var(--slate-900);
    outline-offset: 2px;
    border-radius: 4px;
    box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.9);
}
.site-footer :focus-visible,
.cta-section :focus-visible,
.mobile-cta-bar :focus-visible {
    outline-color: var(--white);
    box-shadow: 0 0 0 6px rgba(10, 15, 26, 0.9);
}

.skip-link {
    position: absolute;
    left: 8px;
    top: -100px;
    z-index: 2000;
    background: var(--slate-950);
    color: var(--white);
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: 600;
}
.skip-link:focus { top: 8px; }

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

@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;
    }
    .btn:hover { transform: none; }
}

/* ── 2. Header + menu ─────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--slate-100);
    transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

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

.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 44px; width: auto; border-radius: 6px; }

.site-nav { display: none; }
.site-nav a {
    position: relative;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--slate-600);
    padding: 8px 0;
    transition: color var(--transition);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--slate-900); }
.site-nav a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--amber-500);
    transition: width var(--transition);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { width: 100%; }

.site-header-cta { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.site-header-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 6px;
    font-weight: 600;
    color: var(--slate-900);
    white-space: nowrap;
}
.site-header-phone svg { color: var(--amber-600); flex-shrink: 0; }
.site-header-cta .btn { display: none; min-height: 44px; padding: 10px 22px; }

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--slate-900);
    border-radius: 2px;
    transition: var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu panel: sits above page content (z 990), directly under the header (z 1000). */
.nav-panel {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    background: var(--white);
    padding: 8px 24px 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.nav-panel a:not(.btn) {
    display: block;
    padding: 16px 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--slate-800);
    border-bottom: 1px solid var(--slate-100);
}
.nav-panel .btn { width: 100%; margin-top: 16px; }
.nav-panel .btn:first-of-type { margin-top: 24px; }

@media (max-width: 768px) {
    .nav-panel { padding-bottom: 96px; } /* clear the sticky action bar */
}
@media (max-width: 479px) {
    .site-header-inner { gap: 8px; }
    .site-logo img { height: 36px; }
    .site-header-cta { gap: 4px; }
    .site-header-phone { font-size: 0.9375rem; padding: 0 2px; gap: 6px; }
}
@media (max-width: 379px) {
    /* very narrow phones: icon-only call button (the link keeps its aria-label) */
    .site-header-phone-text { display: none; }
    .site-header-phone { width: 44px; justify-content: center; border: 2px solid var(--slate-200); border-radius: 8px; }
}
@media (min-width: 768px) {
    .site-header-cta { gap: 16px; }
    .site-header-cta .btn { display: inline-flex; }
}
@media (min-width: 1024px) {
    .site-nav { display: flex; align-items: center; gap: 28px; margin-left: 32px; }
    .nav-toggle { display: none; }
    .nav-panel { display: none !important; }
}

/* ── 3. Footer ────────────────────────────────────────────────── */
.site-footer {
    background: var(--slate-950);
    color: var(--slate-400);
    padding: 60px 0 24px;
}
.site-footer .footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
@media (min-width: 600px) {
    .site-footer .footer-inner { grid-template-columns: 1fr 1fr; }
    .site-footer .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
    .site-footer .footer-inner { grid-template-columns: 2fr 1fr 1fr 1.3fr; }
    .site-footer .footer-brand { grid-column: auto; }
}
.site-footer .footer-brand-text { display: flex; flex-direction: column; gap: 4px; }
.site-footer .logo-name { color: var(--white); font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.1; }
.site-footer .logo-tag { color: var(--amber-500); font-size: 0.875rem; }
.site-footer .footer-description { margin-top: 16px; font-size: 0.9375rem; line-height: 1.6; max-width: 46ch; }
.site-footer .footer-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}
.site-footer .footer-links { list-style: none; display: grid; gap: 12px; }
.site-footer .footer-links a { font-size: 0.9375rem; transition: color var(--transition); }
.site-footer .footer-links a:hover { color: var(--amber-400); }
.site-footer .footer-contact { font-style: normal; font-size: 0.9375rem; display: grid; gap: 12px; }
.site-footer .footer-contact a { color: var(--slate-300); transition: color var(--transition); }
.site-footer .footer-contact a:hover { color: var(--amber-400); }
.site-footer .footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--slate-800);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.875rem;
}
.site-footer .footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer .footer-legal a { transition: color var(--transition); }
.site-footer .footer-legal a:hover { color: var(--white); }

/* ── 4. Sticky mobile action bar ──────────────────────────────── */
.mobile-cta-bar { display: none; }
@media (max-width: 768px) {
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
    .mobile-cta-bar {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 1200;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--slate-950);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.28);
    }
    .mobile-cta-bar a {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 58px;
        padding: 8px 4px;
        color: #fff;
        text-decoration: none;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.1;
    }
    .mobile-cta-bar a svg { width: 20px; height: 20px; }
    .mobile-cta-bar .cta-call { background: #1f6feb; }
    .mobile-cta-bar .cta-whatsapp { background: #25d366; color: #0a0f1a; }
    .mobile-cta-bar .cta-quote { background: #f59e0b; color: #0a0f1a; }
    .mobile-cta-bar a:focus-visible { outline-offset: -4px; box-shadow: none; }
}

/* ── 5. Service-page layout ───────────────────────────────────── */
.service-hero {
    padding: 56px 0 72px;
    background: linear-gradient(135deg, var(--slate-50) 0%, var(--white) 100%);
}
.service-hero-inner { max-width: 800px; }

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--slate-600);
    margin-bottom: 20px;
}
.breadcrumb a { color: var(--amber-text); font-weight: 500; }
.breadcrumb a:hover { text-decoration: underline; }

.service-hero h1 { margin-bottom: 24px; }
.service-hero p { font-size: 1.125rem; color: var(--slate-600); margin-bottom: 32px; line-height: 1.7; }

.cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
/* Hero buttons follow the left-aligned hero text */
.service-hero .cta-buttons { justify-content: flex-start; }
@media (max-width: 767px) {
    .service-hero .cta-buttons .btn { flex: 1 1 100%; }
}

.trust-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--slate-200);
}
.trust-item { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; font-weight: 500; color: var(--slate-700); }
.trust-item svg { color: var(--amber-600); flex-shrink: 0; }

.service-content { padding: var(--section-padding) 0; }
.service-grid { display: grid; gap: 60px; }
.service-grid > * { min-width: 0; }
@media (min-width: 900px) { .service-grid { grid-template-columns: 1fr 380px; } }

.service-main h2 { margin-bottom: 20px; margin-top: 40px; }
.service-main h2:first-child { margin-top: 0; }
.service-main p { margin-bottom: 16px; color: var(--slate-600); }
.service-main ul { margin: 20px 0; padding-left: 24px; }
.service-main li { margin-bottom: 10px; color: var(--slate-600); }

.service-sidebar { display: flex; flex-direction: column; gap: 24px; }
.sidebar-card {
    background: var(--slate-50);
    border-radius: var(--radius-lg);
    padding: 28px;
    border: 1px solid var(--slate-100);
}
.sidebar-card h3 { font-size: 1.125rem; margin-bottom: 16px; }
.sidebar-card p { font-size: 0.9375rem; color: var(--slate-600); margin-bottom: 20px; }

.contact-info { display: flex; flex-direction: column; gap: 16px; }
.contact-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.contact-row svg { color: var(--amber-600); flex-shrink: 0; }
.contact-row a { font-weight: 600; color: var(--slate-900); overflow-wrap: anywhere; }
.contact-row a:hover { color: var(--amber-text); }

.credentials-list { display: flex; flex-direction: column; gap: 12px; }
.credential { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--slate-700); }
.credential svg { color: var(--amber-600); flex-shrink: 0; }

.faq-section summary { min-height: 28px; }

.cta-section { background: var(--slate-900); color: var(--white); padding: var(--section-padding) 0; }
.cta-inner { text-align: center; max-width: 640px; margin: 0 auto; }
.cta-section h2 { color: var(--white); margin-bottom: 16px; }
.cta-section p { color: var(--slate-300); margin-bottom: 32px; }
.cta-section .btn-secondary { border-color: var(--white); }

/* ── 6. Recent work, reviews, cross-links ─────────────────────── */
.recent-work { padding: var(--section-padding) 0; background: var(--white); }
.recent-work h2, .customer-reviews h2 { text-align: center; margin-bottom: 32px; }
.recent-work-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.work-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--slate-200); background: var(--white); }
.work-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--slate-100); }
.work-card-body { padding: 12px 14px 14px; }
.work-card-title { font-weight: 600; color: var(--slate-900); overflow-wrap: anywhere; }
.work-card-location { font-size: 0.875rem; color: var(--slate-600); margin-top: 2px; }
.work-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; list-style: none; }
.work-card-tags li { font-size: 0.75rem; font-weight: 600; color: var(--slate-700); background: var(--slate-100); border-radius: 999px; padding: 3px 10px; }

.customer-reviews { padding: var(--section-padding) 0; background: var(--white); }
.customer-reviews .container { max-width: 980px; }
.review-cards { display: grid; gap: 20px; }
@media (min-width: 768px) { .review-cards { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
.review-card {
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.review-stars { display: flex; gap: 2px; color: var(--amber-500); }
.review-stars svg { width: 18px; height: 18px; }
.review-text { color: var(--slate-700); white-space: pre-line; overflow-wrap: anywhere; }
.review-author { font-weight: 600; color: var(--slate-900); margin-top: auto; }
.reviews-more { text-align: center; margin-top: 28px; }

.related-links { padding: 60px 0; background: var(--white); }
.related-links .container { max-width: 900px; display: grid; gap: 28px; }
.related-links h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: 10px; }
.related-links p { color: var(--slate-600); }
.related-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.related-links li a { display: inline-block; padding: 6px 0; }