/* ============================================================
   Marcus Traianus — Self-hosted Font
   ============================================================ */
@font-face {
    font-family: 'Marcus Traianus';
    src: url('assets/fonts/MarcusTraianus.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marcus Traianus';
    src: url('assets/fonts/MarcusTraianus-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marcus Traianus';
    src: url('assets/fonts/MarcusTraianus-ExtraBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marcus Traianus';
    src: url('assets/fonts/MarcusTraianus-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ============================================================
   Green Seasons — Global Stylesheet
   Brand Palette (5-colour system — no exceptions):
     #668e78  Forest Green  — primary brand, nav, buttons, accents
     #ffffff  White         — main page backgrounds
     #ffffff  Warm Cream    — secondary backgrounds, light panels
     #1a3528  Dark Green    — footer, CTA sections, body text
     #db9f1b  Gold          — hover states, accent touches only

   PURPOSE: This file defines the global Tailwind v4 theme,
   as well as custom classes and CSS variables.
   ============================================================ */

@theme {
    --color-brand-dark:   #668e78;   /* Forest Green — primary */
    --color-brand-ocean:  #668e78;   /* Forest Green — alias */
    --color-brand-bronze: #db9f1b;   /* Gold — hover & accent */
    --color-brand-alice:  #ffffff;   /* Warm Cream — light bg */
    --color-brand-beige:  #ffffff;   /* Warm Cream — alias */
    --color-brand-text:   #1a3528;   /* Dark Green — text & dark sections */
    --font-heading: 'Marcus Traianus', 'Cinzel', Georgia, serif;
    --font-body:    'DM Sans', sans-serif;
}

body  { font-family: var(--font-body); background-color: #ffffff; color: #1a3528; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); }
/* Global Image Filters - Overridable via inline style e.g. style="--img-saturate: 1.5;" */
img { 
    --img-saturate: 1.05;
    --img-contrast: 1.05;
    --img-brightness: 1.05;
    filter: saturate(var(--img-saturate)) contrast(var(--img-contrast)) brightness(var(--img-brightness));
}

/* --CSS Custom Properties (available globally) --------------------------------------------------*/
:root {
  /* === Core 5-Colour Palette === */
  --forest:       #668e78;   /* Forest Green — primary */
  --cream:        #ffffff;   /* Warm Cream   — light bg */
  --dark:         #1a3528;   /* Dark Green   — footer/CTA/text */
  --gold:         #db9f1b;   /* Gold         — hover & accent */
  --white:        #ffffff;   /* Pure White   — main bg */

  /* Forest tints (internal use only) */
  --forest-light: #82ab97;
  --forest-dark:  #4e7060;

  /* Legacy aliases — do not add new references to these */
  --midnight:     #668e78;
  --ocean:        #668e78;
  --ocean-light:  #82ab97;
  --ocean-dark:   #4e7060;
  --bronze:       #db9f1b;
  --alice:        #ffffff;
}

/* ============================================================
   GREEN SEASONS — DESIGN TOKEN SYSTEM
   
   HOW IT WORKS:
   - All semantic tokens are defined on :root (light mode defaults)
   - Adding class="section-dark" to any <section> or wrapper
     overrides the tokens automatically — no per-element changes needed.
   
   LIGHT sections (white/cream bg):  use as-is, no extra class
   DARK sections (dark green bg):    add class="section-dark" to the <section>
   
   BUTTONS:
   - .btn-adaptive  resolves to gold-solid on light, ghost on dark automatically
   - .btn-primary   always gold solid (explicit override)
   - .btn-ghost     always transparent white (explicit override)
   ============================================================ */

/* ─── Semantic tokens: LIGHT mode (default) ───────────────── */
:root {
  /* Foreground */
  --gs-fg:           #1a3528;                  /* headings, taglines */
  --gs-fg-muted:     rgba(26, 53, 40, 0.80);   /* body text */
  --gs-fg-subtle:    rgba(26, 53, 40, 0.60);   /* stat labels, captions */

  /* Background */
  --gs-bg:           #ffffff;

  /* Brand constants (never change between light/dark) */
  --gs-accent:       #db9f1b;   /* gold — hover target */
  --gs-accent-alt:   #668e78;   /* forest green — secondary hover */

  /* Button (light mode = gold solid) */
  --gs-btn-bg:       #db9f1b;
  --gs-btn-fg:       #ffffff;
  --gs-btn-border:   transparent;
  --gs-btn-bg-hover: #668e78;
  --gs-btn-border-hover: transparent;
}

/* ─── Semantic tokens: DARK mode override ─────────────────── */
.section-dark {
  /* Foreground */
  --gs-fg:           #ffffff;
  --gs-fg-muted:     rgba(255, 255, 255, 0.90);
  --gs-fg-subtle:    rgba(255, 255, 255, 0.60);

  /* Background */
  --gs-bg:           #1a3528;

  /* Button (dark mode = ghost/outline) */
  --gs-btn-bg:       transparent;
  --gs-btn-fg:       #ffffff;
  --gs-btn-border:   #ffffff;
  --gs-btn-bg-hover: #db9f1b;
  --gs-btn-border-hover: #db9f1b;
}

/* ─── Utility classes that consume the tokens ─────────────── */

/* Tagline / eyebrow — works on both light and dark */
.gs-tagline {
  display: inline-block;
  font-family: var(--font-body), sans-serif;
  font-weight: 800;
  font-size: 1.25rem;       /* text-xl */
  letter-spacing: 0.1em;    /* tracking-widest */
  text-transform: uppercase;
  color: var(--gs-fg);
  cursor: default;
  margin-bottom: 2rem;
  transition: color 300ms ease;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 0.125rem;
}
.gs-tagline:hover { color: var(--gs-accent); }

/* Section heading (h2) — works on both */
.gs-heading {
  font-family: var(--font-heading), serif;
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 3rem);  /* text-4xl → text-5xl */
  line-height: 1.15;
  color: var(--gs-fg);
  cursor: default;
  transition: color 500ms ease;
}
.gs-heading:hover { color: var(--gs-accent); }

/* Body / subtitle text — works on both */
.gs-body {
  font-family: var(--font-body), sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.125rem);  /* text-base → text-lg */
  line-height: 1.75;
  color: var(--gs-fg-muted);
}

/* Global heading hover — gold on all h1/h2/h3 */
h1, h2, h3 {
  cursor: default;
  transition: color 500ms ease;
}
h1:hover, h2:hover, h3:hover { color: #db9f1b; }

/* Stat label (About section) */
.gs-stat-label {
  font-family: var(--font-body), sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--gs-fg-subtle);
}

/* Adaptive button — automatically gold on light, ghost on dark */
.btn-adaptive {
  display: inline-block;
  border-width: 1.5px;
  border-style: solid;
  padding: 0.75rem 2rem;
  font-family: var(--font-body), sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  border-radius: 1px;
  width: auto;
  align-self: flex-start;
  background-color: var(--gs-btn-bg);
  color: var(--gs-btn-fg);
  border-color: var(--gs-btn-border);
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}
.btn-adaptive:hover {
  background-color: var(--gs-btn-bg-hover);
  border-color: var(--gs-btn-border-hover);
  color: #ffffff;
}
.btn-location-hero:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}

/* --Global Button Component --------------------------------------------------
   RULE — choose the class based on the section background:
   
   .btn-primary  → GOLD solid button
                   Use on: white, cream (#ffffff), pale green (#f5fef8), any LIGHT bg
                   Resting:  gold fill (#db9f1b), white text
                   Hover:    forest green (#668e78)

   .btn-ghost    → TRANSPARENT / WHITE OUTLINE button
                   Use on: dark green (#1a3528), image/photo backgrounds, frosted glass
                   Resting:  transparent bg, white border, white text
                   Hover:    gold fill (#db9f1b), gold border

   .btn-primary-white → LEGACY alias for .btn-ghost (kept for compatibility)
   --------------------------------------------------------------------------*/
.btn-primary, .btn-primary-white, .btn-ghost {
    display: inline-block;
    border-width: 1.5px;
    border-style: solid;
    background-color: transparent;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-family: var(--font-body), sans-serif;
    font-size: 1rem;
    font-weight: 800; /* extrabold */
    letter-spacing: 0.025em; /* tracking-wide */
    border-radius: 1px;
    width: auto;
    align-self: flex-start;
}

.btn-primary {
    border-color: #1a3528;
    color: #1a3528;
}

.btn-primary:hover {
    border-color: #db9f1b;
    background-color: #db9f1b;
    color: #ffffff;
}

.btn-primary-white, .btn-ghost {
    border-color: #ffffff;
    color: #ffffff;
}

.btn-primary-white:hover, .btn-ghost:hover {
    border-color: #db9f1b;
    background-color: #db9f1b;
    color: #ffffff;
}

/* -- Green CTA button (default green, gold on hover) --------------------------*/
.btn-green-cta {
    background-color: #668e78 !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
.btn-green-cta:hover {
    background-color: #db9f1b !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* --Scroll Reveal Animations --------------------------------------------------*/
.reveal {
    opacity: 0;
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(0.92); }

.reveal.active {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Stagger delay helpers */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* --Scrolling Banner --------------------------------------------------*/
.scrolling-wrapper {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    width: 100%;
    cursor: default;
}
.scrolling-track {
    display: flex;
    width: max-content;
    animation: scrollBanner 25s linear infinite;
}
.scrolling-wrapper:hover .scrolling-track,
.scrolling-track:hover {
    animation-play-state: running !important;
}
@keyframes scrollBanner {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.hover-item { transition: opacity 0.3s ease; }
.scrolling-wrapper:hover .hover-item { opacity: 0.5; }
.scrolling-wrapper .hover-item:hover  { opacity: 1; }

/* --Review Marquee --------------------------------------------------*/
.rv-scroll-outer {
    overflow: hidden;
    display: flex;
    width: 100%;
}
.rv-scroll-track {
    display: flex;
    width: max-content;
    animation: scrollReviews 28s linear infinite;
    gap: 1.5rem;
    padding: 0 1.5rem;
}
.rv-scroll-outer:hover .rv-scroll-track {
    animation-play-state: running !important;
}
@keyframes scrollReviews {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --Before / After Slider --------------------------------------------------*/
.ba-slider {
    position: relative;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
}

/* --FAQ Accordion Animation --------------------------------------------------*/
details > div {
    animation-name: slideDown;
    animation-duration: 350ms;
    animation-timing-function: ease-out;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
details > summary::-webkit-details-marker { display: none; }



/* --Custom Checkbox (form tick) --------------------------------------------------*/
.custom-tick {
    -webkit-appearance: none;
    appearance: none;
    background-color: #F5F3EE;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.custom-tick:checked {
    background-color: #db9f1b !important;
    border-color: #db9f1b !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}



/* --Tagline / Section Label Pills --------------------------------------------------*/
/*
   Scoped to <span> elements ONLY — not <div> or <a> —
   so carousel cards and buttons are never affected.

   Bronze pill  →  hover to Ocean Deep
   Ocean pill   →  hover to Golden Bronze
*/
span[style*="background:#db9f1b"] {
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}
span[style*="background:#db9f1b"]:hover {
    background: #668e78 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(102, 142, 120, 0.30);
}

span[style*="background:#668e78"] {
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}
span[style*="background:#668e78"]:hover {
    background: #db9f1b !important;
    color: #1a3528 !important;
    box-shadow: 0 4px 16px rgba(219, 159, 27, 0.30);
}

/* --Dark Background Pills --------------------------------------------------*/
span.pill-dark-bg {
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}
span.pill-dark-bg:hover {
    background: #ffffff !important;
    color: #1a3528 !important;
    box-shadow: 0 4px 16px rgba(255, 247, 230, 0.30);
}

/* --Carousel card background transition --------------------------------------------------*/
/*
   Smooths the onmouseenter background swap on commitment
   cards (about.html). Scoped to div only, never affects pills.
*/
div[onmouseenter][style*="background:#1a3528"] {
    transition: background 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --Hide scrollbar utility --------------------------------------------------*/
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }




/* 
   GLOBAL MOBILE OVERRIDES (max-width: 768px)
 */
@media (max-width: 768px) {
    /* 1. Component Scaling: Logos */
    /* Target the logo container in the header specifically */
    #site-header a.group\/logo > div {
        transform: scale(0.85) !important;
        transform-origin: left center !important;
    }


    /* 3. Alignment & Layout: Centralization */
    /* Force-center text, headlines, and paragraphs within main content sections */
    main section h1,
    main section h2,
    main section h3,
    main section h4,
    main section p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Center the decorative underlines on headings */
    main section h1 > .section-underline,
    main section h2 > .section-underline,
    main section h3 > .section-underline {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* --Critical: ensure headings stretch full width so left:50%
       resolves to page centre, not the heading's shrunk content width.
       h2 can shrink to max-content when its parent uses flex items-center. */
    main section h1:has(> .section-underline),
    main section h2:has(> .section-underline),
    main section h3:has(> .section-underline) {
        width: 100% !important;
    }

    /* Center tagline pills */
    main section span.rounded-full[style*="background"] {
        display: inline-block !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Force vertical flex containers to center items (e.g., text blocks, lists) */
    main section .flex-col {
        align-items: center !important;
        text-align: center !important;
    }


    /* 3. Alignment & Layout: Spacing */
    /* Implement consistent horizontal section padding to ensure text never hits the edge */
    main section > div[class*="max-w-"],
    main section > div.container {
        padding-left: 1.5rem !important; /* px-6 equivalent */
        padding-right: 1.5rem !important;
    }

    /* --FAQ Section: Restore left-aligned question text --------------------------------------------------       The global .flex-col rule above centres everything, but FAQ
       <summary> rows are flex-row items that must stay left-aligned.
       We surgically undo centering only inside <details> rows.
    --------------------------------------------------*/
    #faq details summary {
        align-items: center !important;
        text-align: left !important;
    }
    #faq details summary span:first-child {
        text-align: left !important;
        flex: 1 1 auto !important;
    }
    /* Keep the chevron icon anchored to the right */
    #faq details summary span.flex-shrink-0 {
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    /* FAQ answer body — left-align for readability */
    #faq details > div {
        text-align: left !important;
    }
    /* FAQ left column (title, description, button) — keep centred */
    #faq .lg\\:sticky {
        align-items: center !important;
        text-align: center !important;
    }

    /* --"JB Standard" Bullet Points: Fix icon + text alignment --       Each bullet row is a flex row. On mobile the global .flex-col
       rule would collapse it. We preserve the horizontal flex layout
       and add top-alignment so text wraps neatly from the start of
       the sentence, never bleeding under the icon.
    --------------------------------------------------*/
    .jb-bullet-row,
    /* target by structure: flex rows inside the checklist block */
    main section div.space-y-4 > div.flex {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;  /* top-align icon + text */
        text-align: left !important;
        gap: 0.75rem !important;
    }
    /* The golden circle icon — keep it fixed size and top-aligned */
    main section div.space-y-4 > div.flex > div.rounded-none {
        flex-shrink: 0 !important;
        margin-top: 0.15rem !important;      /* optical alignment with first text line */
    }
    /* The text node — allow it to fill the remaining width */
    main section div.space-y-4 > div.flex > div.rounded-full ~ *,
    main section div.space-y-4 > div.flex:not(:has(> p)) {
        flex: 1 1 auto !important;
    }

    /* Underline centring is handled by the rules above (lines 414-430). */

    /* --Buttons: centre on mobile (override align-self: flex-start from base styles) */
    .btn-primary, .btn-primary-white, .btn-ghost, .btn-adaptive {
        align-self: center !important;
        display: block !important;
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* --Who-We-Serve panels that have explicit items-start / text-left on desktop */
    #who-we-serve-section .flex-col {
        align-items: center !important;
        text-align: center !important;
    }

    /* --Hero CTA button row: ensure both stacked items are centred */
    .flex-col .btn-ghost {
        align-self: center !important;
    }

    /* --Review QR block: centre on mobile */
    #testimonials .flex-col {
        align-items: center !important;
        text-align: center !important;
    }

    /* --Bottom CTA: centre text block */
    .section-dark .flex-col {
        align-items: center !important;
        text-align: center !important;
    }
}


/* 
   DESKTOP SAFEGUARD (min-width: 1024px)
 */
@media (min-width: 1024px) {
    /* Explicitly preserve desktop behavior */
    #site-header a.group\/logo > div {
        transform: scale(1) !important;
    }

}

/* --- Extracted from about.html --- */
/* Carousel infinite scroll */
        .animate-infinite-scroll {
            animation: infinite-scroll 22s linear infinite;
            width: max-content;
        }
        @keyframes infinite-scroll {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

/* --- Extracted from gallery.html --- */
/* --Masonry grid (All Projects) --*/
        #all-projects-grid {
            column-count: 1;
            column-gap: 1rem;
        }
        @media (min-width: 480px)  { #all-projects-grid { column-count: 2; } }
        @media (min-width: 1024px) { #all-projects-grid { column-count: 3; } }
        @media (min-width: 1280px) { #all-projects-grid { column-count: 4; } }

        .masonry-item {
            break-inside: avoid;
            margin-bottom: 1rem;
            position: relative;
            border-radius: 0;
            overflow: hidden;
            cursor: zoom-in;
            box-shadow: 0 8px 32px rgba(26, 53, 40,0.12);
            border: 1px solid rgba(0,0,0,0.05);
        }
        .masonry-item img {
            width: 100%;
            height: 100%;
            max-width: 100%;
            display: block;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1), filter 0.4s ease-in-out;
            --img-saturate: 1.35;
        }
        @media (hover: hover) {
            .masonry-item:hover img {
                transform: scale(1.06);
                --img-saturate: 1.5;
            }
        }
        .masonry-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(26, 53, 40,0.88) 0%, transparent 55%);
            opacity: 0;
            transition: opacity 0.4s ease-in-out;
            display: flex;
            align-items: flex-end;
            padding: 1rem;
        }
        @media (hover: hover) {
            .masonry-item:hover .masonry-overlay { opacity: 1; }
        }

        /* --Category gallery cards --*/
        .gallery-item {
            display: block;
            width: 100%;
            position: relative;
            overflow: hidden;
            border-radius: 0;
        }
        .gallery-item img {
            width: 100%;
            height: 100%;
            max-width: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1);
        }
        /* Only scale on real hover devices — avoids sticky hover on mobile */
        @media (hover: hover) {
            .gallery-item:hover img { transform: scale(1.06); }
        }

        /* --Category grid — tighter gap on mobile --*/
        .category-grid {
            gap: 1.25rem;
        }
        @media (min-width: 768px) {
            .category-grid { gap: 2rem; }
        }

        /* --Category heading accent bar (section-title-accent) --*/
        .section-title-accent {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .section-title-accent::after {
            content: '';
            display: block;
            height: 2px;
            width: 3rem;
            border-radius: 9999px;
            background-color: #db9f1b;
            margin: 0.75rem auto 0;
            transition: width 0.3s ease-in-out;
        }
        .section-title-accent:hover::after {
            width: 5rem;
        }
        /* hide-scrollbar */
        .hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
        .hide-scrollbar::-webkit-scrollbar { display: none; }

/* --- Extracted from index.html --- */
#site-header nav a {
            @apply transition-all duration-150 inline-flex items-center;
        }
        #site-header nav a:hover {
            color: #ffffff;
            transform: scale(1.08);
        }
        #site-header.scrolled nav a:hover {
            color: #ffffff;
        }
    
        .font-signature { font-family: var(--font-signature); }
        .bg-noise {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            opacity: 0.04;
            mix-blend-mode: multiply;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .animate-float { animation: float 6s ease-in-out infinite; }
        
        .char-reveal {
            display: inline-block;
            opacity: 0;
            transform: translateY(20px);
            animation: textReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        }
        @keyframes textReveal {
            to { opacity: 1; transform: translateY(0); }
        }

/* --- Extracted from privacy-policy.html --- */
.custom-tick {
            -webkit-appearance: none;
            appearance: none;
            background-color: #F5F3EE;
            border: 1px solid #d1d5db;
            border-radius: 0.25rem;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }
        .custom-tick:checked {
            background-color: #db9f1b !important;
            border-color: #db9f1b !important;
            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
        }

        #site-header nav a {
            @apply transition-all duration-150 inline-flex items-center;
        }
        #site-header nav a:hover {
            color: #ffffff;
            transform: scale(1.10);
        }

        #site-header.scrolled nav a:hover {
            color: #ffffff;
            transform: scale(1.10);
        }

        #site-header.scrolled #menuBtn:hover {
            color: #ffffff;
        }

        /* --- LOGO SWAP LOGIC --- */
        .logo-white { display: block; }
        .logo-dark { display: none; }

        #site-header.gallery-dark-nav .logo-white { display: none; }
        #site-header.gallery-dark-nav .logo-dark { display: block; }

/* --- Extracted from services.html --- */
/* --Service image slideshow --*/
        .svc-slideshow {
            position: relative;
            overflow: hidden;
        }
        /* ALL slides sit absolutely inside the fixed-height container */
        .svc-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 700ms ease-in-out, transform 700ms ease-in-out;
            transform: scale(1.04);
        }
        .svc-slide.active {
            opacity: 1;
            transform: scale(1);
            position: absolute; /* stays absolute — height comes from the container */
        }
        /* Images always fill the slide div completely */
        .svc-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            transition: transform 600ms ease-in-out;
        }
        /* Subtle zoom-in on hover */
        .svc-slideshow:hover .svc-slide.active img {
            transform: scale(1.04);
        }
        /* Frosted-glass shimmer overlay on hover */
        .svc-slideshow::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 60%);
            opacity: 0;
            transition: opacity 500ms ease-in-out;
            pointer-events: none;
            z-index: 2;
        }
        .svc-slideshow:hover::after {
            opacity: 1;
        }
        /* Dot navigation */
        .svc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
        .svc-dot {
            width: 8px; height: 8px; border-radius: 9999px;
            background: rgba(102,142,120,0.20); border: none; cursor: pointer;
            transition: background 0.3s ease-in-out, width 0.3s ease-in-out, transform 0.2s ease-in-out;
        }
        .svc-dot:hover { transform: scale(1.3); }
        .svc-dot.active { background: #db9f1b; width: 24px; }

/* Card button rows: full-width on mobile, inset on sm+ */
@media (max-width: 639px) {
    .card-btn-row {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }
}
@media (min-width: 640px) {
    .card-btn-row {
        margin-left: 0;
        margin-right: 0;
    }
}