/* ==========================================================================
   TidyTrue Services — Design System
   Palette: Navy #102A43 · Sage #4F8A61 · Warm Off-White #FAF9F5
   Type: "Borax VF" (headings) + "Alexandria" (body)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100;200;300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

/* "Borax VF" is a licensed/custom variable font — host the .woff2 at
   /assets/fonts/borax-vf.woff2 and this @font-face will pick it up.
   A refined serif fallback keeps the premium feel if the file is absent. */
@font-face {
    font-family: 'Borax VF';
    src: url('../fonts/borax-vf.woff2') format('woff2-variations'),
         url('../fonts/borax-vf.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    /* Brand */
    --navy: #102A43;
    --navy-deep: #0B1D30;
    --sage: #4F8A61;
    --sage-light: #6FA97F;
    --sage-dim: #E8F0E9;
    --cream: #FAF9F5;
    --white: #FFFFFF;
    --gray: #374151;
    --gray-soft: #6B7280;
    --line: #E4E1D8;

    /* Type */
    --font-heading: 'Borax VF', 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-accent: 'Instrument Serif', 'Fraunces', Georgia, serif;
    --font-body: 'Alexandria', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --h1: clamp(2.625rem, 4.6vw + 1rem, 4.5rem);   /* 42px -> 72px */
    --h2: clamp(2.1rem, 3.2vw + 1rem, 3.125rem);   /* ~34px -> 50px */
    --h3: clamp(1.5rem, 1.6vw + 1rem, 2.25rem);    /* 24px -> 36px */
    --eyebrow-size: 0.8rem;
    --body: 1rem; /* 16px */

    /* Layout */
    --container: 1240px;
    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 28px;
    --shadow-soft: 0 20px 45px -20px rgba(16, 42, 67, 0.25);
    --shadow-card: 0 12px 30px -14px rgba(16, 42, 67, 0.18);
    --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@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; }
}
body:not(.admin-body) {
    overflow-x: hidden;
}
body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: var(--body);
    line-height: 1.6;
    color: var(--gray);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.15;
    color: var(--navy);
    margin: 0 0 0.5em;
    letter-spacing: -0.01em;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); font-weight: 700; }
p { margin: 0 0 1em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.skip-link {
    position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff;
    padding: 12px 20px; z-index: 999; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--sage); margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--sage); display: inline-block; }

.lede { font-size: 1.15rem; color: var(--gray-soft); max-width: 640px; font-weight: 300; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 30px; border-radius: 100px; font-weight: 500; font-size: 0.95rem;
    border: 1px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
    white-space: nowrap; position: relative; overflow: hidden; isolation: isolate;
}
.btn svg, .btn i { width: 18px; height: 18px; position: relative; z-index: 1; }
.btn span { position: relative; z-index: 1; }
.btn-primary, .btn-cta {
    background: var(--sage); color: #fff; box-shadow: 0 10px 24px -10px rgba(79,138,97,0.55);
}
.btn-primary::before, .btn-cta::before {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.32), transparent);
    transform: skewX(-20deg); transition: left .55s var(--ease); z-index: 0;
}
.btn-primary:hover::before, .btn-cta:hover::before { left: 130%; }
.btn-primary:hover, .btn-cta:hover { background: var(--sage-light); transform: translateY(-2px); box-shadow: 0 16px 28px -10px rgba(79,138,97,0.6); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--sage-dim); transform: translateY(-2px); }
.btn-block { display: flex; width: 100%; }

/* Icon + label buttons (e.g. "✨ Get a Free Quote"): a leading icon pulls
   the label off-center visually even though the whole group is centered.
   Give the icon its own fixed column plus a mirrored empty column on the
   other side, so the label text is the part that's truly centered. */
.btn-icon {
    display: inline-grid;
    grid-template-columns: 18px 1fr 18px;
    column-gap: 10px;
    align-items: center;
}
.btn-icon > svg, .btn-icon > i { grid-column: 1; justify-self: start; }
.btn-icon > span { grid-column: 2; justify-self: center; text-align: center; white-space: nowrap; }

@media (max-width: 480px) {
    /* Long CTA labels ("Request a Short-Term Rental Cleaning Quote") must
       be allowed to wrap on narrow phones — forcing nowrap here was pushing
       the button (and the whole page) wider than the viewport. */
    .btn-icon > span { white-space: normal; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
    position: sticky; top: 0; z-index: 200; background: rgba(250,249,245,0.92);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
    transition: padding .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled { box-shadow: 0 6px 24px -12px rgba(16,42,67,0.18); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; transition: padding .3s var(--ease); flex-wrap: nowrap; gap: 12px; }
.site-header.scrolled .header-inner { padding: 12px 24px; }

.logo { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 60%; transition: transform .3s var(--ease); }
.logo-image { display: block; max-height: 64px; width: auto; max-width: 220px; object-fit: contain; flex-shrink: 0; }
.logo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-header.scrolled .logo { transform: scale(0.85); transform-origin: left center; }
.logo-light .logo-image-fallback { background: rgba(255,255,255,0.94); padding: 6px 10px; border-radius: 8px; }
.logo-mark { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--navy); color: var(--sage-light); border-radius: 10px; }
.logo-mark svg, .logo-mark i { width: 20px; height: 20px; }
.logo-text { font-family: var(--font-heading); font-size: 1.3rem; color: var(--navy); letter-spacing: -0.01em; }
.logo-text em { font-style: normal; color: var(--sage); }
.logo-light .logo-text { color: #fff; }
.logo-light .logo-mark { background: var(--sage); color: var(--navy); }

.main-nav > ul { display: flex; align-items: center; gap: 34px; }
.main-nav > ul > li { position: relative; }
.main-nav a { font-size: 0.95rem; font-weight: 500; color: var(--navy); padding: 10px 0; }
.main-nav > ul > li > a { position: relative; }
.main-nav > ul > li > a::after {
    content: ''; position: absolute; left: 0; bottom: 4px; width: 0; height: 2px; background: var(--sage);
    transition: width .25s var(--ease);
}
.main-nav > ul > li:hover > a::after { width: 100%; }

.has-dropdown .dropdown {
    position: absolute; top: 100%; left: -16px; min-width: 230px; background: #fff;
    border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); padding: 10px;
    display: flex; flex-direction: column; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-dropdown.open > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.dropdown li a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 8px; font-weight: 400; font-size: 0.85rem; white-space: nowrap; }
.dropdown li a:hover { background: var(--sage-dim); color: var(--sage); }
.dropdown li a svg, .dropdown li a i { width: 16px; height: 16px; color: var(--sage); flex-shrink: 0; }

/* Third nav level: "Services" / "Service Areas" flyout their own list of
   individual service / city pages to the side. Open state is set explicitly
   via JS (see main.js) rather than :hover, so only one flyout is ever open
   at a time regardless of the exact path the mouse takes to reach it. */
.dropdown li.has-subdropdown { position: relative; }
.dropdown li.has-subdropdown > a::after {
    content: ''; margin-left: auto; width: 6px; height: 6px; flex-shrink: 0;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); opacity: 0.55;
}
.dropdown .sub-dropdown {
    position: absolute; top: -10px; left: 100%; margin-left: 6px; min-width: 240px; max-height: 360px;
    overflow-y: auto; background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-soft);
    padding: 10px; display: flex; flex-direction: column; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateX(8px); pointer-events: none;
    transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
}
.dropdown li.has-subdropdown.open > .sub-dropdown { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; }

.header-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.header-phone { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.header-phone svg, .header-phone i { width: 18px; height: 18px; color: var(--sage); flex-shrink: 0; }

.mobile-menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; flex-shrink: 0; }
.mobile-menu-toggle span { width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s var(--ease), opacity .25s; }
.mobile-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Compact CTA shown only in the mobile header bar, centered between the
   logo and the hamburger button. Desktop keeps the full-size .btn-cta in
   .header-actions instead — this one stays hidden until the mobile grid
   layout below switches it on. */
.mobile-header-cta {
    display: none; background: var(--sage); color: #fff; font-weight: 700;
    font-size: 0.74rem; letter-spacing: 0.01em; white-space: nowrap;
    padding: 9px 14px; border-radius: 100px; box-shadow: 0 6px 16px -6px rgba(79,138,97,0.5);
}

.mobile-menu {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px); background: var(--navy); color: #fff;
    padding: 100px 30px 30px; z-index: 199; transform: translateX(100%);
    transition: transform .35s var(--ease); overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu ul { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.mobile-menu a { display: block; padding: 12px 4px; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-menu li.sub a { padding-left: 18px; font-size: 0.92rem; opacity: 0.8; }
.mobile-menu li.sub-sub a { padding-left: 34px; font-size: 0.85rem; opacity: 0.65; }

/* The "Get a Free Quote" pill is also an <a> inside .mobile-menu, so the
   generic link rule above (higher specificity than .btn) was collapsing it
   to a left-aligned block row instead of a centered button. */
.mobile-menu a.btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 15px 30px;
    border-bottom: none; font-size: 0.95rem;
}

.breadcrumbs { padding: 16px 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; color: var(--gray-soft); list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { list-style: none; display: flex; align-items: center; gap: 8px; }
.breadcrumbs li:not(:last-child)::after { content: '/'; color: var(--line); }
.breadcrumbs a { color: var(--gray-soft); }
.breadcrumbs a:hover { color: var(--sage); }

/* ==========================================================================
   HERO SLIDER (full-bleed, editorial)
   ========================================================================== */
.hero {
    position: relative; overflow: hidden; background: var(--navy-deep);
    min-height: 760px; display: flex; align-items: stretch;
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
    position: absolute; inset: 0; background: var(--navy-deep) center/cover no-repeat;
    opacity: 0; visibility: hidden; overflow: hidden; transition: opacity 1.1s var(--ease), visibility 1.1s;
}
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide.active img { animation: heroKenBurns 9s var(--ease) forwards; }
@keyframes heroKenBurns { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero-slide::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(100deg, rgba(11,29,48,0.96) 0%, rgba(16,42,67,0.88) 32%, rgba(16,42,67,0.55) 58%, rgba(16,42,67,0.28) 78%, rgba(16,42,67,0.15) 100%),
        linear-gradient(0deg, rgba(11,29,48,0.55) 0%, transparent 30%);
}
@media (prefers-reduced-motion: reduce) { .hero-slide.active img { animation: none; } }

.hero-inner { position: relative; z-index: 3; width: 100%; display: flex; align-items: center; padding-top: 150px; padding-bottom: 120px; }
.hero-content { max-width: 640px; color: #fff; }
.hero-content .eyebrow { color: var(--sage-light); }
.hero-content .eyebrow::before { background: var(--sage-light); }
.hero-content h1 { color: #fff; margin-bottom: 22px; }
.hero-content h1 em, .hero-classic-copy h1 em {
    font-style: normal; font-weight: 700; /* color and font-family are set inline, from Admin > Site Settings > Homepage Hero */
}
.hero-content .lede { color: rgba(255,255,255,0.82); margin-bottom: 34px; max-width: 560px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 38px; }

.hero-trust { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-trust li {
    display: flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 500; color: #fff;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(6px);
    padding: 9px 16px; border-radius: 100px;
}
.hero-trust i, .hero-trust svg { width: 16px; height: 16px; color: var(--sage-light); }

/* Slide navigation: vertical dots on the left edge */
.hero-nav {
    position: absolute; left: 30px; top: 50%; transform: translateY(-50%); z-index: 4;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.hero-nav-dot {
    width: 10px; height: 10px; border-radius: 50%; background: transparent;
    border: 1px solid rgba(255,255,255,0.5); padding: 0; position: relative; transition: all .3s var(--ease);
}
.hero-nav-dot::before {
    content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid transparent; transition: border-color .3s var(--ease);
}
.hero-nav-dot.active { background: var(--sage-light); border-color: var(--sage-light); }
.hero-nav-dot.active::before { border-color: rgba(111,169,127,0.5); }
.hero-nav-line { width: 1px; height: 40px; background: rgba(255,255,255,0.25); }

/* Slide counter + arrows, bottom-right */
.hero-controls {
    position: absolute; right: 30px; bottom: 34px; z-index: 4;
    display: flex; align-items: center; gap: 18px; color: rgba(255,255,255,0.8);
    font-family: var(--font-heading); font-size: 0.95rem;
}
.hero-counter strong { color: #fff; font-size: 1.1rem; }
.hero-arrows { display: flex; gap: 8px; }
.hero-arrow {
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.06);
    color: #fff; display: flex; align-items: center; justify-content: center; transition: all .25s var(--ease);
}
.hero-arrow:hover { background: var(--sage); border-color: var(--sage); }
.hero-arrow svg, .hero-arrow i { width: 17px; height: 17px; }

/* Floating card + rotating badge, restyled to sit on the photo */
.hero-visual-extras { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-float-card {
    position: absolute; right: 6%; bottom: 12%; background: rgba(255,255,255,0.97); backdrop-filter: blur(8px);
    border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 18px 22px; display: flex; align-items: center; gap: 14px;
    max-width: 250px; animation: floatY 5s ease-in-out infinite; pointer-events: auto;
}
.hero-float-card .icon-badge { width: 46px; height: 46px; border-radius: 12px; background: var(--sage); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero-float-card strong { display: block; color: var(--navy); font-size: 0.95rem; }
.hero-float-card span { font-size: 0.82rem; color: var(--gray-soft); }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.rotating-badge { position: absolute; top: 14%; right: 8%; width: 112px; height: 112px; pointer-events: auto; }
.rotating-badge-ring { width: 100%; height: 100%; animation: badgeSpin 22s linear infinite; }
.rotating-badge-ring text { fill: rgba(255,255,255,0.85); }
.rotating-badge-center {
    position: absolute; inset: 0; margin: auto; width: 42px; height: 42px; border-radius: 50%;
    background: var(--sage); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 18px -6px rgba(79,138,97,0.55);
}
.rotating-badge-center svg, .rotating-badge-center i { width: 18px; height: 18px; }
@keyframes badgeSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rotating-badge-ring { animation: none; } }
@media (max-width: 900px) {
    .hero-visual-extras { display: none; }
    .hero-nav { left: 16px; }
    .hero-controls { right: 16px; bottom: 20px; }
}
@media (max-width: 640px) { .rotating-badge { width: 84px; height: 84px; } .rotating-badge-center { width: 32px; height: 32px; } }

/* Location selector — glass panel over the slider */
.location-selector { margin-top: 8px; }
.location-selector-label { font-size: 0.85rem; font-weight: 600; color: #fff; margin-bottom: 10px; display: block; }
.location-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.location-pill {
    padding: 9px 20px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px); font-size: 0.88rem; font-weight: 500; color: #fff; transition: all .2s var(--ease);
}
.location-pill:hover { border-color: var(--sage-light); }
.location-pill.active { background: var(--sage); border-color: var(--sage); color: #fff; }

.dynamic-services-panel { margin-top: 22px; padding: 22px; background: rgba(255,255,255,0.97); border-radius: var(--radius); box-shadow: var(--shadow-card); display: none; }
.dynamic-services-panel.visible { display: block; animation: fadeUp .35s var(--ease); }
.dynamic-services-panel h4 { font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; color: var(--navy); margin-bottom: 12px; }
.dynamic-services-list { display: flex; flex-wrap: wrap; gap: 8px; }
.dynamic-services-list a { padding: 7px 14px; background: var(--sage-dim); color: var(--sage); border-radius: 100px; font-size: 0.82rem; font-weight: 500; }
.dynamic-services-list a:hover { background: var(--sage); color: #fff; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   HERO — CLASSIC (single image, split layout — alternate to the slider above)
   ========================================================================== */
.hero-classic {
    position: relative; padding: 70px 0 120px; overflow: hidden;
    background: linear-gradient(180deg, #FDFCF9 0%, var(--cream) 100%);
}
.hero-classic::before {
    content: ''; position: absolute; top: -180px; right: -180px; width: 520px; height: 520px;
    border-radius: 50%; background: radial-gradient(circle, var(--sage-dim) 0%, transparent 70%);
    z-index: 0;
}
.hero-classic-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; }
.hero-classic-copy h1 { margin-bottom: 22px; }
.hero-classic-copy .lede { margin-bottom: 34px; }

.hero-classic .hero-trust li { color: var(--navy); background: none; border: none; padding: 0; backdrop-filter: none; }
.hero-classic .hero-trust i, .hero-classic .hero-trust svg { color: var(--sage); }

.hero-classic .location-selector-label { color: var(--navy); }
.hero-classic .location-pill { background: #fff; color: var(--navy); border-color: var(--line); backdrop-filter: none; }
.hero-classic .location-pill:hover { border-color: var(--sage); }

.hero-classic-visual { position: relative; }
.hero-classic-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 4/5; }
.hero-classic-photo img { width: 100%; height: 100%; object-fit: cover; }

.hero-classic .hero-float-card { position: absolute; left: -30px; right: auto; top: auto; bottom: -26px; }
.hero-classic .rotating-badge { top: -18px; right: -18px; width: 108px; height: 108px; }
.hero-classic .rotating-badge-ring text { fill: var(--navy); }
@media (max-width: 640px) { .hero-classic .rotating-badge { width: 84px; height: 84px; top: -12px; right: -12px; } }

@media (max-width: 900px) {
    .hero-classic-grid { grid-template-columns: 1fr; }
    .hero-classic-visual { order: -1; max-width: 420px; margin: 0 auto 20px; }
}
@media (max-width: 640px) { .hero-classic { padding: 40px 0 80px; } .hero-classic .hero-float-card { left: 10px; bottom: -20px; padding: 14px 16px; } }

/* ==========================================================================
   MARQUEE TICKER
   ========================================================================== */
.marquee-strip { background: var(--navy); overflow: hidden; padding: 18px 0; white-space: nowrap; }
.marquee-track { display: inline-flex; animation: marqueeScroll 32s linear infinite; }
.marquee-item { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 0.95rem; font-weight: 500; padding: 0 32px; position: relative; }
.marquee-item::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--sage-light); }
.marquee-item svg, .marquee-item i { width: 17px; height: 17px; color: var(--sage-light); flex-shrink: 0; }
.marquee-strip:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ==========================================================================
   TRUST BAR
   ========================================================================== */
.trust-bar { background: var(--navy); padding: 34px 0; }
.trust-bar ul { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.trust-bar li { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 0.92rem; font-weight: 500; flex: 1 1 200px; }
.trust-bar i, .trust-bar svg { width: 22px; height: 22px; color: var(--sage-light); flex-shrink: 0; }

/* ==========================================================================
   SECTIONS (generic)
   ========================================================================== */
.section { padding: 100px 0; }
.section-sage { background: var(--sage-dim); }
.section-navy { background: var(--navy); color: #fff; }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-navy .lede { color: rgba(255,255,255,0.75); }
.section-header { max-width: 640px; margin-bottom: 56px; position: relative; }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header.center .eyebrow { justify-content: center; }
.section-header::before {
    content: ''; position: absolute; top: -6px; left: -34px; width: 8px; height: 8px;
    border-radius: 50%; border: 1px solid var(--sage); opacity: 0.6;
}
.section-header.center::before { left: 50%; top: -18px; transform: translateX(-90px); }
@media (max-width: 640px) { .section-header::before, .section-header.center::before { display: none; } }

/* ==========================================================================
   SERVICES GRID (editorial cards)
   ========================================================================== */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.service-card {
    position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy);
    aspect-ratio: 3/4; box-shadow: var(--shadow-card); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
    border: 1px solid rgba(16,42,67,0.06);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.service-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.service-card:hover img { transform: scale(1.08); }
.service-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(16,42,67,0.05) 22%, rgba(16,42,67,0.94) 100%);
}
.service-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; z-index: 2; color: #fff; }
.service-card-num {
    position: absolute; top: 20px; left: 20px; z-index: 2; font-family: var(--font-heading);
    font-size: 0.82rem; font-weight: 600; color: var(--navy); letter-spacing: 0.04em;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(4px); padding: 5px 12px; border-radius: 100px;
}
.service-card-icon {
    width: 46px; height: 46px; border-radius: 12px; background: var(--sage); color: #fff; box-shadow: 0 10px 22px -8px rgba(79,138,97,0.7);
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
    transform: translateY(0); transition: transform .3s var(--ease);
}
.service-card:hover .service-card-icon { transform: translateY(-4px) rotate(-6deg); }
.service-card h3 { color: #fff; font-size: 1.35rem; margin-bottom: 8px; }
.service-card p { font-size: 0.88rem; color: rgba(255,255,255,0.78); margin-bottom: 16px; max-width: 90%; }
.service-card-link {
    display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: #fff;
    opacity: 0; transform: translateY(6px); transition: all .3s var(--ease);
}
.service-card:hover .service-card-link { opacity: 1; transform: translateY(0); }

/* Compact service list card (used on service-areas & other listing pages) */
.services-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mini-card {
    background: #fff; border-radius: var(--radius-sm); padding: 24px; border: 1px solid var(--line);
    transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.mini-card:hover { border-color: var(--sage); transform: translateY(-3px); }
.mini-card .icon-badge { width: 44px; height: 44px; border-radius: 12px; background: var(--sage-dim); color: var(--sage); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.mini-card h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.mini-card p { font-size: 0.85rem; color: var(--gray-soft); margin-bottom: 0; }

/* ==========================================================================
   WHY TIDYTRUE
   ========================================================================== */
.benefits-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.benefit-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 16px; background: #fff;
    padding: 30px 28px; border-radius: var(--radius); box-shadow: var(--shadow-card);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    flex: 1 1 300px; max-width: 360px;
}
.benefit-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.benefit-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--sage); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.benefit-item h4 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--navy); margin-bottom: 6px; }
.benefit-item p { font-size: 0.9rem; color: var(--gray-soft); margin-bottom: 0; }

/* ==========================================================================
   PROCESS (How it works)
   ========================================================================== */
.process-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; }
.process-track::before {
    content: ''; position: absolute; z-index: 0; top: 55px; left: 12%; right: 12%; height: 1px; background: var(--line);
}
.process-track::after {
    content: ''; position: absolute; z-index: 0; top: 55px; left: 12%; width: 0; height: 1px; background: var(--sage);
    transition: width 1.4s var(--ease) .2s;
}
.process-track.in-view::after { width: 76%; }
.process-step { position: relative; z-index: 1; text-align: center; }

.process-icon-ring {
    width: 110px; height: 110px; border-radius: 50%; background: var(--cream);
    border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px; position: relative; transform: scale(0.6); opacity: 0;
    transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.process-icon {
    width: 76px; height: 76px; border-radius: 50%; background: var(--navy); color: var(--sage-light);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 28px -14px rgba(16,42,67,0.5);
}
.process-icon svg, .process-icon i { width: 30px; height: 30px; }

.process-num {
    width: 34px; height: 34px; border-radius: 50%; background: var(--sage); color: #fff;
    display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 0.9rem;
    margin: 0 auto 16px; box-shadow: 0 8px 18px -8px rgba(79,138,97,0.6);
}

.process-track.in-view .process-step:nth-child(1) .process-icon-ring { transition-delay: .15s; }
.process-track.in-view .process-step:nth-child(2) .process-icon-ring { transition-delay: .45s; }
.process-track.in-view .process-step:nth-child(3) .process-icon-ring { transition-delay: .75s; }
.process-track.in-view .process-step:nth-child(4) .process-icon-ring { transition-delay: 1.05s; }
.process-track.in-view .process-icon-ring { transform: scale(1); opacity: 1; }
.process-step h4 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--navy); margin-bottom: 8px; }
.process-step p { font-size: 0.88rem; color: var(--gray-soft); margin-bottom: 0; }

/* ==========================================================================
   LOCATIONS SECTION
   ========================================================================== */
.locations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.location-card { border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-card); transition: transform .3s var(--ease); }
.location-card:hover { transform: translateY(-5px); }
.location-card-img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.location-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.location-card:hover .location-card-img img { transform: scale(1.06); }
.location-card-img::after {
    content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(16,42,67,0.55) 100%);
    opacity: 0; transition: opacity .35s var(--ease);
}
.location-card:hover .location-card-img::after { opacity: 1; }
.location-card-pin {
    position: absolute; right: 16px; bottom: 16px; width: 42px; height: 42px; border-radius: 50%;
    background: var(--sage); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 22px -8px rgba(79,138,97,0.7); transform: translateY(10px) scale(0.85); opacity: 0;
    transition: all .35s var(--ease); z-index: 2;
}
.location-card-pin svg, .location-card-pin i { width: 18px; height: 18px; }
.location-card:hover .location-card-pin { transform: translateY(0) scale(1); opacity: 1; }
.location-card-body { padding: 26px; }
.location-card-body .eyebrow { margin-bottom: 8px; }
.location-card-body p { font-size: 0.9rem; color: var(--gray-soft); }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-group { max-width: 780px; margin: 0 auto 44px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; padding-bottom: 12px; border-bottom: 2px solid var(--sage); }
.faq-group-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--sage); white-space: nowrap; }
.faq-group-link:hover { text-decoration: underline; }
.faq-group-link svg, .faq-group-link i { width: 14px; height: 14px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;
    padding: 22px 0; background: none; border: none; text-align: left; font-family: var(--font-body);
    font-weight: 600; font-size: 1rem; color: var(--navy);
}
.faq-question .chevron { flex-shrink: 0; transition: transform .3s var(--ease); color: var(--sage); }
.faq-item.open .chevron { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-answer p { padding-bottom: 20px; color: var(--gray-soft); font-size: 0.92rem; margin: 0; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 44px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 20px; }
.form-group.full { grid-column: 1 / -1; }
label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
input, select, textarea {
    width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px;
    font-family: var(--font-body); font-size: 0.95rem; color: var(--gray); background: var(--cream);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 4px var(--sage-dim); background: #fff; }
textarea { resize: vertical; min-height: 120px; }
.form-error { color: #B3261E; font-size: 0.8rem; margin-top: 6px; }
.form-note { font-size: 0.8rem; color: var(--gray-soft); margin-top: 6px; }
.form-status { padding: 16px 20px; border-radius: 10px; margin-bottom: 22px; font-size: 0.92rem; display: none; }
.form-status.success { background: var(--sage-dim); color: #2f5a3c; display: block; }
.form-status.error { background: #FBEAEA; color: #B3261E; display: block; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.82); padding-top: 80px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.85fr 0.95fr 0.9fr 1.25fr; gap: 32px; padding-bottom: 50px; }
.footer-brand p { font-size: 0.88rem; color: rgba(255,255,255,0.55); margin: 16px 0 20px; max-width: 260px; }
.footer-col h4 { font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 0.9rem; color: rgba(255,255,255,0.62); transition: color .2s; }
.footer-col a:hover { color: var(--sage-light); }
.footer-contact li, .footer-contact li a {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 0.88rem; color: rgba(255,255,255,0.62); min-width: 0;
}
.footer-contact li a:hover { color: var(--sage-light); }
.footer-contact li span { min-width: 0; overflow-wrap: break-word; line-height: 1.45; }
.footer-contact i, .footer-contact svg { width: 16px; height: 16px; color: var(--sage-light); flex-shrink: 0; margin-top: 2px; }
.social-links { display: flex; gap: 10px; }
.social-links a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
.social-links a:hover { background: var(--sage); }
.social-links svg, .social-links i { width: 16px; height: 16px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 22px 0; }
.footer-bottom-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.82rem; color: rgba(255,255,255,0.45); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: rgba(255,255,255,0.45); }
.footer-legal a:hover { color: var(--sage-light); }

/* ==========================================================================
   FLOATING WHATSAPP + SCROLL-TOP + MOBILE BOTTOM BAR
   ========================================================================== */
.whatsapp-float {
    position: fixed; right: 26px; bottom: 26px; z-index: 150; display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
    box-shadow: 0 14px 30px -10px rgba(37,211,102,0.6); transition: transform .25s var(--ease);
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.06); }
.whatsapp-float svg, .whatsapp-float i { width: 26px; height: 26px; }

.scroll-top-btn {
    position: fixed; right: 26px; bottom: 96px; z-index: 149; display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--navy); border: 1px solid var(--line);
    box-shadow: var(--shadow-card); opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--sage); color: #fff; border-color: var(--sage); }
.scroll-top-btn svg, .scroll-top-btn i { width: 20px; height: 20px; }

/* App-style bottom tab bar (Home / Services / Contact) — mobile only */
.app-tab-bar {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
    background: rgba(250,249,245,0.97); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -12px rgba(16,42,67,0.22);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app-tab-bar-inner { display: flex; align-items: stretch; max-width: var(--container); margin: 0 auto; padding: 0 8px; }
.app-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 9px 4px 8px; min-width: 0; color: var(--gray-soft);
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em; position: relative;
    transition: color .2s var(--ease);
}
.app-tab span { white-space: nowrap; }
.app-tab svg, .app-tab i { width: 22px; height: 22px; transition: transform .2s var(--ease); }
.app-tab::before {
    content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%) scale(0);
    width: 4px; height: 4px; border-radius: 50%; background: var(--sage); transition: transform .2s var(--ease);
}
.app-tab.active { color: var(--sage); }
.app-tab.active::before { transform: translateX(-50%) scale(1); }
.app-tab.active svg { transform: translateY(-1px); }
.app-tab:active { color: var(--sage); }

/* Middle "Contact" tab reads as a raised, filled action button — the
   app-style call-to-action equivalent of the old floating CTA pill. */
.app-tab-cta .app-tab-fab {
    width: 44px; height: 44px; border-radius: 50%; background: var(--sage); color: #fff;
    display: flex; align-items: center; justify-content: center; margin-top: -24px;
    border: 4px solid var(--cream); box-shadow: 0 10px 22px -8px rgba(79,138,97,0.65);
    transition: transform .2s var(--ease);
}
.app-tab-cta.active .app-tab-fab, .app-tab-cta:active .app-tab-fab { transform: scale(1.06); }
.app-tab-cta.active, .app-tab-cta:active { color: var(--navy); }
.app-tab-cta.active::before, .app-tab-cta::before { display: none; }
.app-tab-cta span { color: var(--navy); font-weight: 700; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.text-sage { color: var(--sage); }

.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.testimonial-card { background: #fff; border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-card); transition: transform .3s var(--ease); }
.testimonial-card:hover { transform: translateY(-4px); }
.testimonial-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.testimonial-quote { color: var(--gray); font-size: 0.95rem; line-height: 1.6; margin-bottom: 24px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; flex-shrink: 0; }
.testimonial-author strong { display: block; color: var(--navy); font-size: 0.92rem; }
.testimonial-author span { display: block; font-size: 0.82rem; color: var(--gray-soft); }

.star-icon { width: 18px; height: 18px; fill: var(--line); stroke: none; }
.star-icon.filled { fill: var(--sage); }

.google-rating-badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 10px 20px; margin-top: 22px; font-size: 0.88rem; color: var(--gray-soft); }
.google-rating-badge .star-icon { width: 16px; height: 16px; }
.google-rating-badge strong { color: var(--navy); }

@media (max-width: 1080px) { .testimonials-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .testimonials-grid { grid-template-columns: 1fr; } }

.testimonial-marquee { overflow: hidden; padding: 8px 0 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.testimonial-track { display: inline-flex; gap: 28px; animation: testimonialScroll 46s linear infinite; padding: 0 14px; }
.testimonial-marquee:hover .testimonial-track { animation-play-state: paused; }
.testimonial-card-marquee { width: 360px; flex-shrink: 0; }
@keyframes testimonialScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .testimonial-track { animation: none; } }
@media (max-width: 640px) { .testimonial-card-marquee { width: 300px; } }

/* ==========================================================================
   PAGE HERO (interior pages: service/location/about/contact)
   ========================================================================== */
.page-hero { padding: 60px 0 80px; background: linear-gradient(180deg, #FDFCF9 0%, var(--cream) 100%); position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; top: -140px; left: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, var(--sage-dim) 0%, transparent 70%); }
.page-hero-inner { position: relative; z-index: 1; max-width: 760px; }
.page-hero-inner.wide { max-width: 620px; }
.page-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items: center; }
.page-hero-grid .page-hero-inner, .page-hero-grid .page-hero-inner.wide { max-width: none; }

/* Safety net: grid items default to a content-based minimum width, which
   lets a single long word/button/link silently blow out the whole layout
   on narrow screens. Force every grid container's direct children to be
   allowed to shrink below their content size instead. */
.services-grid > *, .services-mini-grid > *, .benefits-grid > *, .process-track > *,
.locations-grid > *, .form-grid > *, .footer-grid > *, .testimonials-grid > *,
.page-hero-grid > *, .related-grid > *, .contact-grid > * {
    min-width: 0;
}
.page-hero-photo { border-radius: var(--radius-lg); overflow: hidden; border: 3px solid var(--sage); box-shadow: var(--shadow-soft); aspect-ratio: 1 / 1; }
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Our History hero only: the lede is pulled out as its own grid item (instead
   of living inside the heading block) so mobile can reorder it to sit after
   the photo, without touching any other page that uses .page-hero-grid.
   Scoped via body.page-our-history so it reliably wins over the generic
   .page-hero-photo mobile rule regardless of stylesheet order. */
body.page-our-history .our-history-hero-grid {
    grid-template-areas: "heading photo" "lede photo";
    row-gap: 20px;
}
body.page-our-history .our-history-hero-grid .page-hero-inner { grid-area: heading; }
body.page-our-history .our-history-hero-grid .page-hero-photo { grid-area: photo; margin: 0; }
body.page-our-history .our-history-lede { grid-area: lede; align-self: start; margin: 0; }

@media (max-width: 900px) {
    body.page-our-history .our-history-hero-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "heading" "photo" "lede";
    }
    body.page-our-history .our-history-hero-grid .page-hero-photo {
        order: initial; max-width: none; margin: 0; aspect-ratio: 1 / 1;
    }
}

/* Services & Service Areas heroes: same heading → photo → description
   reorder on mobile, desktop keeps the standard two-column layout. Scoped
   via body class so it can't affect any other .page-hero-grid page. */
body.page-services .services-hero-grid,
body.page-service-areas .service-areas-hero-grid {
    grid-template-areas: "heading photo" "lede photo";
    row-gap: 20px;
}
body.page-services .services-hero-grid .page-hero-inner,
body.page-service-areas .service-areas-hero-grid .page-hero-inner { grid-area: heading; }
body.page-services .services-hero-grid .page-hero-photo,
body.page-service-areas .service-areas-hero-grid .page-hero-photo { grid-area: photo; margin: 0; }
body.page-services .services-hero-lede,
body.page-service-areas .service-areas-hero-lede { grid-area: lede; align-self: start; margin: 0; }

@media (max-width: 900px) {
    body.page-services .services-hero-grid,
    body.page-service-areas .service-areas-hero-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "heading" "photo" "lede";
    }
    body.page-services .services-hero-grid .page-hero-photo,
    body.page-service-areas .service-areas-hero-grid .page-hero-photo {
        order: initial; max-width: none; margin: 0; aspect-ratio: 1 / 1;
    }
}

/* Individual Service pages: same heading → photo → description reorder on mobile,
   desktop keeps the standard two-column layout. Scoped via body class so it can't
   affect any other .page-hero-grid page. */
body.page-service .service-hero-grid {
    grid-template-areas: "heading photo" "lede photo";
    row-gap: 20px;
}
body.page-service .service-hero-grid .page-hero-inner { grid-area: heading; }
body.page-service .service-hero-grid .page-hero-photo { grid-area: photo; margin: 0; }
body.page-service .service-hero-lede { grid-area: lede; align-self: start; margin: 0; }

@media (max-width: 900px) {
    body.page-service .service-hero-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "heading" "photo" "lede";
    }
    body.page-service .service-hero-grid .page-hero-photo {
        order: initial; max-width: none; margin: 0; aspect-ratio: 1 / 1;
    }
}

/* Home hero (classic variant): same heading → photo → description reorder on
   mobile, desktop keeps the standard two-column layout. The slider hero variant
   is untouched — it's full-bleed with no separate photo column to reorder. */
body.page-home .home-hero-classic-grid {
    grid-template-areas: "heading photo" "lede photo";
    row-gap: 20px;
}
body.page-home .home-hero-classic-grid .home-hero-classic-heading { grid-area: heading; }
body.page-home .home-hero-classic-grid .hero-classic-visual { grid-area: photo; margin: 0; }
body.page-home .home-hero-classic-grid .home-hero-classic-lede { grid-area: lede; align-self: start; }
body.page-home .home-hero-classic-grid .home-hero-classic-heading h1,
body.page-home .home-hero-classic-grid .home-hero-classic-lede .lede { margin-bottom: 0; }

@media (max-width: 900px) {
    body.page-home .home-hero-classic-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "heading" "photo" "lede";
    }
    body.page-home .home-hero-classic-grid .hero-classic-visual {
        order: initial; max-width: 420px; margin: 0 auto;
    }
    body.page-home .home-hero-classic-grid .home-hero-classic-lede .lede { margin-bottom: 20px; }
}

.content-block { max-width: 780px; }
/* Preserves the line breaks and blank lines an admin types into a plain-text field
   (Problems We Solve, What's Included, Benefits, Process, Ideal For on Service pages)
   without needing them to manually add <br> tags — single newline = line break,
   blank line = paragraph spacing. */
.plain-text-block { white-space: pre-line; }
.content-block h2 { margin-top: 1.7em; }
.content-block ul.check-list { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }

/* Rich text from admin-editable content (Our History, etc.) that should look like the rest of
   the site's body copy — headings keep the normal large serif style (var(--h2)/(--h3)), this
   only adds support for the tags clean_html() allows that aren't already styled: lists, links,
   blockquotes. Unlike .legal-page-content, headings are NOT shrunk down here. */
.rich-text-content ul, .rich-text-content ol { margin: 0 0 1.2em 1.3em; color: var(--gray-soft); line-height: 1.75; }
.rich-text-content ul { list-style: disc; }
.rich-text-content ol { list-style: decimal; }
.rich-text-content li { margin-bottom: 0.4em; }
.rich-text-content a { color: var(--sage); text-decoration: underline; }
.rich-text-content blockquote { border-left: 3px solid var(--sage); padding-left: 16px; margin: 1.2em 0; color: var(--navy); font-style: italic; }
.rich-text-content hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; }
.check-list li i, .check-list li svg { width: 20px; height: 20px; color: var(--sage); flex-shrink: 0; margin-top: 2px; }

.stat-strip { display: flex; gap: 40px; flex-wrap: wrap; padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 40px 0; }
.stat-strip div strong { display: block; font-family: var(--font-heading); font-size: 1.6rem; color: var(--navy); }
.stat-strip div span { font-size: 0.82rem; color: var(--gray-soft); }

.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: #fff; border-radius: 14px; border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.related-card:hover { border-color: var(--sage); transform: translateY(-3px); }
.related-card .icon-badge { width: 40px; height: 40px; border-radius: 10px; background: var(--sage-dim); color: var(--sage); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.related-card span { font-weight: 600; font-size: 0.92rem; color: var(--navy); }

.areas-chip-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
.areas-chip { padding: 10px 20px; border-radius: 100px; background: #fff; border: 1px solid var(--line); font-size: 0.88rem; font-weight: 500; color: var(--navy); }
.areas-chip:hover { border-color: var(--sage); color: var(--sage); }

/* ==========================================================================
   SERVICE PHOTO GALLERY + LIGHTBOX
   ========================================================================== */
.service-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.service-gallery-item {
    position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
    border: none; padding: 0; cursor: zoom-in; background: var(--sage-dim);
}
.service-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.service-gallery-item::after {
    content: ''; position: absolute; inset: 0; background: rgba(16,42,67,0.12); opacity: 0; transition: opacity .25s;
}
.service-gallery-item:hover img { transform: scale(1.06); }
.service-gallery-item:hover::after { opacity: 1; }

/* Before & After galleries — two labeled columns, each its own mini photo grid + lightbox */
.before-after-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.before-after-col .before-after-label {
    text-align: center; font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; padding: 8px 0;
    border-radius: 100px; color: #fff;
}
.before-after-col.is-before .before-after-label { background: var(--navy); }
.before-after-col.is-after .before-after-label { background: var(--sage); }
.before-after-photos { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) { .before-after-grid { grid-template-columns: 1fr; gap: 32px; } }

.lightbox-overlay {
    position: fixed; inset: 0; z-index: 500; background: rgba(10,20,30,0.94);
    display: flex; align-items: center; justify-content: center; padding: 60px 24px;
    opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s;
}
.lightbox-overlay.open { opacity: 1; visibility: visible; }
.lightbox-overlay img { max-width: min(90vw, 1100px); max-height: 82vh; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); }
.lightbox-close, .lightbox-prev, .lightbox-next {
    position: fixed; display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff;
    border: none; cursor: pointer; transition: background .2s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.24); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg { width: 22px; height: 22px; }
.lightbox-counter { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.75); font-size: 0.85rem; font-weight: 500; }

.not-found { text-align: center; padding: 120px 0; }
.not-found-actions { display: flex; gap: 16px; justify-content: center; margin-top: 30px; }

.legal-page { padding: 90px 0; max-width: 760px; }
.legal-page h1 { margin-bottom: 30px; }
.legal-page-content p { margin-bottom: 1.1em; color: var(--gray-soft); line-height: 1.75; }
.legal-page-content h2 { font-family: var(--font-body); font-weight: 700; font-size: 1.3rem; color: var(--navy); margin: 1.9em 0 0.6em; }
.legal-page-content h2:first-child { margin-top: 0; }
.legal-page-content h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; color: var(--navy); margin: 1.6em 0 0.5em; }
.legal-page-content h4 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: var(--navy); margin: 1.4em 0 0.4em; }
.legal-page-content ul, .legal-page-content ol { margin: 0 0 1.2em 1.3em; color: var(--gray-soft); line-height: 1.75; }
.legal-page-content li { margin-bottom: 0.4em; }
.legal-page-content a { color: var(--sage); text-decoration: underline; }
.legal-page-content strong, .legal-page-content b { color: var(--navy); }
.legal-page-content blockquote { border-left: 3px solid var(--sage); padding-left: 16px; margin: 1.2em 0; color: var(--navy); font-style: italic; }
.legal-page-content hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }

.contact-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 50px; align-items: flex-start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info-card {
    background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 40px 34px;
    box-shadow: var(--shadow-soft); position: relative; overflow: hidden;
}
.contact-info-card::before {
    content: ''; position: absolute; top: -90px; right: -90px; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(79,138,97,0.35) 0%, transparent 70%);
}
.contact-info-card h3 { color: #fff; position: relative; z-index: 1; }
.contact-info-card .footer-contact { position: relative; z-index: 1; }
.contact-info-card .footer-contact li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.contact-info-card .footer-contact a,
.contact-info-card .footer-contact li { color: rgba(255,255,255,0.88) !important; }
.contact-info-card .footer-contact i, .contact-info-card .footer-contact svg { color: var(--sage-light); }
.contact-info-card .areas-chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; }
.contact-info-card .areas-chip:hover { border-color: var(--sage-light); color: var(--sage-light); }

.quick-contact-divider { display: flex; align-items: center; gap: 16px; margin: 10px 0 34px; }
.quick-contact-divider::before, .quick-contact-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.quick-contact-divider span { font-size: 0.85rem; color: var(--gray-soft); white-space: nowrap; }

.form-card-compact { max-width: 640px; margin: 0 auto; padding: 36px 44px; }
@media (max-width: 640px) { .form-card-compact { padding: 26px; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .services-mini-grid { grid-template-columns: repeat(2, 1fr); }
    .locations-grid { grid-template-columns: repeat(2, 1fr); }
    .process-track { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
    .process-track::before { display: none; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .footer-brand { grid-column: 1 / -1; }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .service-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .main-nav, .header-phone { display: none; }
    .mobile-menu-toggle { display: flex; }
    .hero { min-height: 620px; }
    .hero-inner { padding-top: 130px; padding-bottom: 100px; }
    .hero-nav { display: none; }
    .hero-controls { right: 16px; bottom: 16px; gap: 12px; font-size: 0.85rem; }
    .hero-arrow { width: 36px; height: 36px; }
    .page-hero-grid { grid-template-columns: 1fr; }
    .page-hero-photo { order: -1; max-width: 420px; margin: 0 auto; aspect-ratio: 4 / 3; }
    .form-grid { grid-template-columns: 1fr; }

    /* Two mobile widget modes, switchable from Admin → Site Settings.
       Default ("App bar"): app-style bottom tab bar, WhatsApp floats above it.
       Alternate ("Floating"): classic floating WhatsApp + scroll-top stack
       (same as desktop), no bottom tab bar. */
    body.mobile-nav-appbar .app-tab-bar { display: block; }
    body.mobile-nav-appbar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    body.mobile-nav-appbar .scroll-top-btn {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px);
        right: 16px; width: 42px; height: 42px;
    }
    body.mobile-nav-appbar .whatsapp-float {
        right: 16px;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px);
        width: 50px; height: 50px;
    }
    body.mobile-nav-appbar .whatsapp-float svg, body.mobile-nav-appbar .whatsapp-float i { width: 22px; height: 22px; }
    /* If both WhatsApp and the scroll-top button are visible at once, stack them */
    body.mobile-nav-appbar .whatsapp-float ~ .scroll-top-btn.visible { bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 78px); }

    body.mobile-nav-floating .app-tab-bar { display: none; }
    body.mobile-nav-floating .whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
    body.mobile-nav-floating .whatsapp-float svg, body.mobile-nav-floating .whatsapp-float i { width: 24px; height: 24px; }
    body.mobile-nav-floating .scroll-top-btn { right: 16px; bottom: 82px; width: 44px; height: 44px; }
}

@media (max-width: 640px) {
    .container { padding: 0 28px; }
    .section { padding: 64px 0; }
    .services-grid, .services-mini-grid, .locations-grid, .process-track, .related-grid { grid-template-columns: 1fr; }
    .service-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .lightbox-prev, .lightbox-next { width: 40px; height: 40px; }
    .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; }
    .lightbox-close { top: 12px; right: 12px; }
    .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 32px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-contact li, .footer-contact li a { font-size: 0.82rem; }
    .trust-bar { display: none; }
    .content-block h2 { margin-top: 1.1em; }
    .content-block p { margin-bottom: 0.85em; }
    .hero { min-height: 560px; }
    .hero-inner { padding-top: 110px; padding-bottom: 80px; }
    .hero-content .lede { max-width: none; }
    .form-card { padding: 26px; }
    .hero-float-card { left: 10px; bottom: -20px; padding: 14px 16px; }
    .faq-group-heading { flex-wrap: wrap; row-gap: 8px; }
    .stat-strip { gap: 24px 32px; }

    /* On a narrow, tall phone viewport, a wide landscape hero photo needs
       heavy cropping to fill the box; the Ken Burns zoom-in on top of that
       made it look oversized/blown-up. Disable the zoom on mobile and bias
       the crop toward the upper-middle of the frame (where the subject
       usually is) instead of a plain center crop. */
    .hero-slide.active img { animation: none; object-position: 50% 32%; }
}

@media (max-width: 560px) {
    /* Logo + "Get a Free Quote" pill + hamburger no longer fit on one row
       at phone widths — the mobile drawer and bottom tab bar already offer
       the quote CTA, so the full-size header button gets hidden... */
    .header-actions .btn-cta { display: none; }
    .logo-image { max-height: 42px !important; max-width: 120px !important; }
    .logo-text { font-size: 1.05rem; }

    /* ...and replaced with this compact pill, laid out in its own grid
       column so it sits truly centered between the logo and the hamburger
       regardless of how wide either of those end up being. */
    .header-inner {
        display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
        padding: 16px 20px;
    }
    .site-header.scrolled .header-inner { padding: 10px 20px; }
    .logo { grid-column: 1; justify-self: start; }
    .mobile-header-cta { display: inline-flex; grid-column: 2; justify-self: center; }
    .header-actions { grid-column: 3; justify-self: end; }
}