/*
Theme Name:    GoDetail Theme
Theme URI:     https://example.com/godetail
Author:        Adam Ginsberg
Author URI:    https://example.com
Description:   A custom theme for GoDetail, refactored with CSS Custom Properties (root colors).
Version:       1.3
Text Domain:   godetail
*/

/* * 1. Root Color & Theme Variables
 * --------------------------------------------------------------------------
 *
 * This is your new centralized theme control panel.
 * Change any hex code or value here, and it will update
 * the entire website automatically.
 *
 * -------------------------------------------------------------------------- */

        /* ==========================================================================
           SECTION 1: YOUR GLOBAL THEME (PASTE style.css BELOW THIS LINE)
           ========================================================================== */
        
:root{
          /* == Brand Core (Melgoza logo) == */
          --color-brand-primary-start: #b00010;     /* deep red (not white) */
          --color-brand-primary-mid:   #e21b22;     /* logo red */
          --color-brand-primary-deep:  #8a0000;     /* darker red for depth */
          --color-brand-primary-end:   #1a1a1a;     /* logo black */

          /* Gradient like the badge rim: red → darker red → black */
          --color-brand-primary: linear-gradient(
              90deg,
              var(--color-brand-primary-start) 0%,
              var(--color-brand-primary-mid) 35%,
              var(--color-brand-primary-deep) 65%,
              var(--color-brand-primary-end) 100%
          );

          /* Solid fallbacks */
          --color-brand-accent-red:   var(--color-brand-primary-mid);
          --color-brand-primary-hover:#9a000b;      /* hover darken */

          /* Stars / ring accent (gold) + metallic silver for polisher */
          --color-brand-secondary:      #f5c518;      /* gold */
          --color-metal-silver:         #c7ccd1;      /* light metallic */
          --color-metal-gun:            #8b9096;      /* dark metallic */

          /* == Text == */
          --color-text-heading: #1a1a1a;
          --color-text-body:    #555;
          --color-text-body-dark:#333;
          --color-text-hero:    #ffffff; /* UPDATED: Was #222, now white for contrast */
          --color-text-muted:   #777;
          --color-text-inverted:#ffffff;
          --color-text-footer:  #adb5bd;
          --color-text-footer-heading:#ffffff;
          --color-text-link-hover: var(--color-brand-primary-mid);

          /* == Backgrounds == */
          --color-bg-body: #ffffff;
          --color-bg-light: #f8f9fa;
          --color-bg-dark:  #1a1a1a;
          --color-bg-brand: var(--color-brand-primary); /* gradient */
          --color-bg-brand-light: #fde9ea;          /* soft red tint */
          --color-bg-brand-swoosh: var(--color-metal-silver);
          --color-bg-danger-light: #fde9ea;
          --color-bg-white-hover: #f0f0f0;
          --color-bg-muted-hover: #ccc;

          /* == Borders == */
          --color-border-light: #eee;
          --color-border-medium:#e9ecef;
          --color-border-dark:  #333333;
          --color-border-brand: var(--color-brand-primary-mid);
          --color-border-danger: var(--color-metal-gun); /* UPDATED: Was --color-brand-primary-mid */

          /* == Utilities == */
          --color-white:#ffffff;
          --color-black:#000000;
          --color-transparent: transparent;

          /* == RGB Channels == */
          --rgb-brand-primary: 226, 27, 34; /* logo red */
          --rgb-white: 255,255,255;
          --rgb-black: 0,0,0;

          /* == Shadows & Overlays == */
          --shadow-faint:           0 4px 15px rgba(var(--rgb-black), .03);
          --shadow-light:           0 2px 10px rgba(var(--rgb-black), .05);
          --shadow-card:            0 8px 30px rgba(var(--rgb-black), .08);
          --shadow-card-hover:      0 12px 35px rgba(var(--rgb-black), .10);
          --shadow-hero-btn:        0 4px 15px rgba(var(--rgb-black), .10);
          --shadow-hero-btn-hover:0 6px 20px rgba(var(--rgb-black), .15);
          --shadow-brand-tabs:      0 5px 20px rgba(var(--rgb-brand-primary), .20);
          --shadow-brand-popular:0 10px 40px rgba(var(--rgb-brand-primary), .25);
          --shadow-brand-hero:      0 6px 20px rgba(var(--rgb-brand-primary), .40);
          --shadow-brand-cta-hover:0 12px 35px rgba(var(--rgb-brand-primary), .15);

          --overlay-dark:  rgba(var(--rgb-black), .60);
          --overlay-modal: rgba(var(--rgb-black), .85);

          /* UPDATED: Replaced white radial gradient with dark linear gradient */
          --hero-fade: linear-gradient(
              to bottom,
              rgba(0, 0, 0, 0.6) 0%, /* Darker top */
              rgba(0, 0, 0, 0.1) 25%, /* Lighter in the middle */
              rgba(0, 0, 0, 0.1) 75%, /* Lighter in the middle */
              rgba(0, 0, 0, 0.8) 100% /* Darker bottom */
          );
           
          --hero-text-shadow: 0 2px 4px rgba(var(--rgb-black), .5); /* Kept old one, but new shadows are applied below */

          /* Optional: gradient text helper */
          --brand-gradient-text: linear-gradient(
              90deg,
              var(--color-brand-primary-start),
              var(--color-brand-primary-mid) 45%,
              var(--color-brand-primary-deep) 70%,
              var(--color-brand-primary-end)
          );
           
          /* DEPRECATED from old theme - here for safety */
          --hero-btn-secondary-bg: rgba(var(--rgb-white), 0.8);
        }


          /* * 1. Global & Utility Styles
           * -------------------------------------------------------------------------- */

          /* Enables smooth scrolling when an anchor link is clicked */
          html {
              scroll-behavior: smooth;
          }

          body {
              /* UPDATED: Added Inter font */
              font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
              margin: 0;
              background-color: var(--color-bg-body); /* White background */
          }

          /* A simple container to center content */
          .container {
              max-width: 1100px;
              margin: 0 auto;
              /* UPDATED: Changed to 1rem for better mobile spacing */
              padding: 0 1rem;
          }

          /* -------------------------------------------------------
           * 2. Hero Section Styles
           * ----------------------------------------------------- */

          .hero-section {
              /* UPDATED: Set height to fill viewport MINUS header.
                  Using your new value of 94px. */
              height: calc(100svh - 109px);
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;
              box-sizing: border-box;
              color: var(--color-text-hero);
              text-align: center;
              /* UPDATED: Removed overflow hidden here, now on hero-main-text-wrapper */
              /* overflow: hidden; */
          }

          /* Background image layer */
          .hero-section::before {
              content: '';
              position: absolute;
              top: -5%;
              left: -5%;
              right: -5%;
              bottom: -5%;
              z-index: -2;
              background-image: url('https://melgozacardetailing.com/wp-content/uploads/2025/11/hero_image.png');
              background-size: cover;
              background-position: center center;
              animation: ignitionFocus 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
          }

          /* Dark fade overlay */
          .hero-section::after {
              content: '';
              position: absolute;
              inset: 0;
              z-index: -1;
              /* UPDATED: Added radial dimming effect */
              background: 
                  radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%),
                  var(--hero-fade);
          }

          /* ****************************************************** */
          /* == NEW: Subtle Background Shimmer == */
          /* ****************************************************** */
          .hero-shimmer {
              position: absolute;
              inset: 0;
              z-index: 0;
              background: linear-gradient(
                  110deg,
                  transparent 40%,
                  rgba(255, 255, 255, 0.05) 50%,
                  transparent 60%
              );
              background-size: 200% 100%;
              animation: shimmer 10s linear infinite;
          }

          @keyframes shimmer {
              0% {
                  background-position: 200% 0;
              }
              100% {
                  background-position: -200% 0;
              }
          }
          /* ****************************************************** */


          /* Background "ignition focus" */
          @keyframes ignitionFocus {
              0% {
                  transform: scale(1.15) rotate(1deg);
                  filter: blur(8px) brightness(0.7);
                  opacity: 0.8;
              }
              100% {
                  transform: scale(1) rotate(0deg);
                  filter: blur(0) brightness(1);
                  opacity: 1;
              }
          }

          /* Shared slide + fade up */
          @keyframes slideFadeUp {
              0% {
                  opacity: 0;
                  transform: translateY(40px);
              }
              100% {
                  opacity: 1;
                  transform: translateY(0);
              }
          }

          /* Headlight sweep (single, clean pass) */
          @keyframes headlightSweep {
              0% {
                  transform: translateX(-160%) skewX(-30deg);
                  opacity: 0;
              }
              10% {
                  opacity: 0.4;
              }
              50% {
                  transform: translateX(0%) skewX(-30deg);
                  opacity: 0.25;
              }
              90% {
                  transform: translateX(160%) skewX(-30deg);
                  opacity: 0;
              }
              100% {
                  transform: translateX(160%) skewX(-30deg);
                  opacity: 0;
              }
          }

          .hero-content {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              /* UPDATED: Flexible height and viewport-based padding */
              height: auto;
              padding: 8vh 0 10vh;
              box-sizing: border-box;
              position: relative;
              z-index: 1;
              /* Removed overflow hidden from here */
              /* overflow: hidden; */
              width: 100%; /* Ensures container widths are respected */
          }

          /* Single, subtle headlight sweep over the text */
          .hero-content::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 25%;
              height: 100%;
              background: linear-gradient(
                  to right,
                  rgba(255, 255, 255, 0) 0%,
                  rgba(255, 255, 255, 0.2) 50%,
                  rgba(255, 255, 255, 0) 100%
              );
              z-index: 2;
              pointer-events: none;
              animation: headlightSweep 1.3s ease-out 1.8s both; /* one clean pass */
          }

          .hero-text-group {
              position: relative;
          }

          /* Top line */
          .hero-top-text {
              opacity: 0;
              animation: slideFadeUp 0.7s ease-out 0.4s forwards;
          }

          .hero-top-text p {
              margin: 0;
              font-size: 1.1rem;
              font-weight: 500;
              text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
          }

          /* Main headline */
          .hero-main-text {
              opacity: 0;
              animation: slideFadeUp 0.7s ease-out 0.7s forwards;
              margin: 0.5rem 0 1.5rem;
              position: relative;
              /* UPDATED: Changed this to a wrapper for the overflow hidden */
              /* overflow: hidden; */
          }

          /* NEW: Wrapper for the main text to contain the glint animation */
          .hero-main-text-wrapper {
              position: relative;
              display: inline-block; /* Essential to wrap content */
              overflow: hidden; /* This now clips the glint animation properly */
              text-shadow: 0 0 10px rgba(0, 0, 0, 0.9); /* Kept text-shadow for readability */
              /* UPDATED: Add tiny vertical padding to prevent glint from clipping at top/bottom */
              padding: 0.1em 0;
          }

          .hero-main-text h1 {
              margin: 0;
              font-size: 3.5rem;
              font-weight: 800;
              line-height: 1.1;
              /* Text shadow moved to wrapper */
              /* text-shadow: 0 0 10px rgba(0, 0, 0, 0.9); */ 
              color: var(--color-text-hero);
          }

          /* ****************************************************** */
          /* == UPDATED: Clean "Glint" Animation == */
          /* ****************************************************** */
          .hero-main-text-wrapper::after { /* Applied to the new wrapper */
              content: '';
              position: absolute;
              /* UPDATED: Adjusted top position */
              top: -75%;
              left: -50%; /* Start further left */
              /* Adjusted width, height and gradient for a softer, longer glint */
              width: 80px; /* Wider glint */
              /* UPDATED: Adjusted height */
              height: 250%;
              background: linear-gradient(
                  to bottom,
                  transparent 0%,
                  rgba(255, 255, 255, 0.3) 30%, /* Softer start */
                  rgba(255, 255, 255, 0.8) 50%, /* Brighter in the middle */
                  rgba(255, 255, 255, 0.3) 70%, /* Softer end */
                  transparent 100%
              );
              /* Adjust rotation for better angle */
              transform: rotate(25deg) translateX(-100vw);
              /* Slower animation */
              animation: smoothGlint 5s ease-in-out 2.5s infinite; 
              pointer-events: none; /* Ensure text is clickable */
          }

          @keyframes smoothGlint {
              0% {
                  transform: rotate(25deg) translateX(-100vw);
              }
              80% { /* Extended travel time for smoother transition */
                  transform: rotate(25deg) translateX(100vw);
              }
              100% {
                  transform: rotate(25deg) translateX(100vw);
              }
          }
          /* ****************************************************** */


          /* Responsive heading sizing */
          @media (max-width: 768px) {
              .hero-main-text h1 {
                  font-size: 2.5rem;
              }
              .hero-top-text p {
                  font-size: 1rem;
              }
          }
          /* NEW: Smaller mobile specific font sizes */
          @media (max-width: 480px) {
              .hero-main-text h1 {
                  font-size: 2.2rem;
                  line-height: 1.2;
              }
              .hero-top-text p {
                  font-size: 0.9rem;
              }
              /* Adjusted Mobile Button Sizing */
              .hero-button {
                  padding: 0.9rem 1.5rem !important;
                  font-size: 1rem !important;
              }
              .hero-bottom-cta {
                  gap: 0.75rem;
              }
          }

          /* CTA buttons row */
          .hero-bottom-cta {
              display: flex;
              justify-content: center;
              gap: 1rem;
              flex-wrap: wrap;
              opacity: 0;
              animation: slideFadeUp 0.7s ease-out 0.9s forwards;
          }

          /* ======================================================
             BUTTON STYLING UPDATES
             Increased padding and font sizes for all buttons 
             ====================================================== */
          .hero-button {
              padding: 1rem 2.25rem;   /* UPDATED: Increased from 0.8rem 1.75rem */
              border-radius: 50px;
              text-decoration: none;
              font-weight: 700;
              font-size: 1.1rem;       /* UPDATED: Increased from 0.95rem */
              border: 2px solid transparent;
              transition: all 0.3s ease-in-out;
              box-sizing: border-box;
              display: inline-block;
              line-height: 1.2;
          }

          /* Neutralize theme defaults */
          .btn,
          .button,
          .wp-element-button,
          .wp-block-button__link,
          .hero-button {
              background-color: transparent;
              background-image: none;
          }

          /* Primary: gradient, always white text */
          .hero-button.primary,
          .wp-block-button__link:not(.is-style-outline),
          .wp-element-button {
              background-image: var(--color-brand-primary);
              background-color: var(--color-brand-primary-start);
              color: var(--color-text-inverted);
              border: 0;
              box-shadow: var(--shadow-hero-btn);
          }

          .hero-button.primary:hover,
          .wp-block-button__link:not(.is-style-outline):hover,
          .wp-element-button:hover {
              background-image: linear-gradient(
                  90deg,
                  #9a000b 0%,
                  #b00010 40%,
                  #5c0000 70%,
                  #111111 100%
              );
              color: var(--color-text-inverted);
              box-shadow: var(--shadow-hero-btn-hover);
              transform: translateY(-2px);
          }

          /* Secondary: solid white pill */
          .hero-button.secondary {
              background: #ffffff;
              color: var(--color-text-body-dark);
              border: 2px solid var(--color-border-light);
              box-shadow: var(--shadow-hero-btn);
          }

          .hero-button.secondary:hover {
              background: var(--color-bg-white-hover);
              color: var(--color-text-body-dark);
              border-color: var(--color-bg-muted-hover);
              box-shadow: var(--shadow-hero-btn-hover);
              transform: translateY(-2px);
          }

          /* -------------------------------------------------------
           * 3. Bouncing Chevron Styles
           * ----------------------------------------------------- */

          .scroll-chevron {
              position: absolute;
              bottom: 25px;
              left: 50%;
              transform: translateX(-50%);
              z-index: 10;
              cursor: pointer;
              opacity: 0;
              animation: slideFadeUp 0.7s ease-out 1.1s forwards;
          }

          .scroll-chevron span {
              display: block;
              width: 24px;
              height: 24px;
              border-bottom: 3px solid var(--color-text-hero);
              border-right: 3px solid var(--color-text-hero);
              transform: rotate(45deg);
              animation: bounce 2s infinite;
          }

          @keyframes bounce {
              0%, 20%, 50%, 80%, 100% {
                  transform: translateY(0) rotate(45deg);
                  opacity: 0.8;
              }
              40% {
                  transform: translateY(-15px) rotate(45deg);
                  opacity: 1;
              }
              60% {
                  transform: translateY(-7px) rotate(45deg);
                  opacity: 1;
              }
          }
           
          /* Optional: respect reduced-motion preferences */
          @media (prefers-reduced-motion: reduce) {
              * {
                  animation-duration: 0.001ms !important;
                  animation-iteration-count: 1 !important;
                  transition-duration: 0.001ms !important;
              }
              /* UPDATED: Disable new animations */
              .hero-main-text-wrapper::after { /* Changed to wrapper */
                  animation: none;
              }
              .hero-shimmer {
                  animation: none;
              }
          }

        /* ==========================================================================
           SECTION 2: HERO REDESIGN OVERRIDES
           (Do NOT delete this section. It powers the new animations)
           ========================================================================== */
        
        :root {
            /* Extra Easings for the redesign */
            --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
            --ease-power: cubic-bezier(0.22, 1, 0.36, 1);
            --color-brand-red: var(--color-brand-primary-mid); /* Map to your variable */
        }

        /* Override defaults from global CSS for the Hero */
        .hero-section {
            background-color: #000; /* Base color */
            overflow: hidden !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Disable the old pseudo-elements from Section 1 so they don't overlap */
        .hero-section::before,
        .hero-section::after {
            display: none !important;
        }

        /* New Background Layers */
        .hero-bg-image {
            position: absolute;
            inset: 0;
            background-image: url('https://melgozacardetailing.com/wp-content/uploads/2025/11/hero_image.png');
            background-size: cover;
            background-position: center;
            opacity: 0.6;
            /* UPDATED: Reduced initial scale from 1.2 to 1.1 to prevent excessive zooming */
            transform: scale(1.1); 
            animation: slowZoom 20s ease-out forwards;
            z-index: 0;
        }
        
        @media only screen and (max-width: 768px) {
    .hero-bg-image {
            background-image: url('https://melgozacardetailing.com/wp-content/uploads/2025/11/White-Lambo.png');
        
        /* Optional: Mobile screens are tall, so you might want to 
           center the car differently (e.g., 'center' or 'center top') */
        background-position: center; 
    }
}
        

        /* UPDATED: Mobile specific handling for the background image to prevent excessive cropping/zooming */
        @media (max-width: 768px) {
            .hero-bg-image {
                /* Ensure the image is centered */
                background-position: center center;
                /* Use a much gentler zoom for mobile so we don't lose the sides of the car */
                transform: scale(1.05);
                animation: slowZoomMobile 20s ease-out forwards;
            }
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            /*background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, #000000 90%);*/
            z-index: 1;
        }
        
        .hero-spotlight {
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            /* UPDATED: REMOVED RED TINT. Changed to a neutral dark shadow/vignette */
            background: radial-gradient(circle, rgba(0, 0, 0, 0.3) 0%, transparent 60%);
            animation: rotateSpotlight 15s linear infinite;
            z-index: 1;
            pointer-events: none;
        }

        /* Content container overrides */
        .hero-container {
            position: relative;
            z-index: 10;
            max-width: 1100px; /* Match your container */
            width: 100%;
            padding: 0 1rem;
            display: grid;
            grid-template-columns: 1fr;
            text-align: center;
        }

        /* Scanner Animation */
        .scanner-line {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #fff, var(--color-brand-red), #fff, transparent);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
            z-index: 20;
            opacity: 0;
            animation: scannerDrop 1.5s var(--ease-power) forwards;
        }

        /* Typography Overrides */
        .hero-super-title {
            font-size: 1rem;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--color-brand-red);
            font-weight: 700;
            margin-bottom: 1rem;
            opacity: 0;
            transform: translateY(20px);
            animation: snapUp 0.8s var(--ease-power) 0.5s forwards;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .hero-super-title::before, .hero-super-title::after {
            content: '';
            height: 1px;
            width: 40px;
            background: rgba(255,255,255,0.3);
        }

        .hero-title-wrapper {
            overflow: hidden;
            padding: 10px 0;
        }

        .hero-title {
            font-size: clamp(2.5rem, 6vw, 5.5rem);
            line-height: 1.1;
            font-weight: 900;
            text-transform: uppercase;
            font-style: italic;
            margin: 0;
            color: white;
            /* Gloss Effect */
            background: linear-gradient(
                110deg, 
                #fff 0%, 
                #b8b8b8 45%, 
                #fff 50%, 
                #b8b8b8 55%, 
                #fff 100%
            );
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            /* Animation */
            transform: translateY(120%); 
            animation: 
                revealText 0.8s var(--ease-power) 0.7s forwards,
                glossShine 4s ease-in-out infinite;
        }

        .hero-subtitle {
            font-size: clamp(1rem, 2vw, 1.25rem);
            color: #c7ccd1;
            max-width: 600px;
            margin: 1.5rem auto 2.5rem;
            opacity: 0;
            animation: fadeIn 1s ease-out 1.2s forwards;
        }

        /* Animation Keyframes for Redesign */
        @keyframes slowZoom {
            0% { transform: scale(1.1); } /* UPDATED: Less zoom */
            100% { transform: scale(1.0); }
        }
        /* NEW: Specific gentle zoom for mobile */
        @keyframes slowZoomMobile {
            0% { transform: scale(1.05); } /* Barely any zoom to keep edges visible */
            100% { transform: scale(1.0); }
        }

        @keyframes rotateSpotlight {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes scannerDrop {
            0% { top: 0; opacity: 0; }
            10% { opacity: 1; }
            100% { top: 100%; opacity: 0; }
        }
        @keyframes snapUp {
            to { opacity: 1; transform: translateY(0); }
        }
        /* Updated Text Reveal: No Skew, Clean vertical rise */
        @keyframes revealText {
            0% { transform: translateY(120%); opacity: 0;}
            100% { transform: translateY(0); opacity: 1;}
        }
        @keyframes glossShine {
            0% { background-position: 200% center; }
            100% { background-position: -200% center; }
        }
        @keyframes fadeIn {
            to { opacity: 1; }
        }
        @keyframes popIn {
            to { opacity: 1; transform: scale(1); }
        }
        
        /* Ensure buttons are visible */
        .hero-cta-group {
            display: flex;
            gap: 20px;
            justify-content: center;
            opacity: 0;
            transform: scale(0.9);
            animation: popIn 0.6s var(--ease-elastic) 1.4s forwards;
        }

        @media (max-width: 768px) {
            .hero-cta-group {
                flex-direction: column;
                width: 100%;
                align-items: center;
            }
            .hero-button {
                width: 100%;
                text-align: center;
                max-width: 300px;
            }
        }
/* * 4. Next Section Styles
 * -------------------------------------------------------------------------- */

.about-section {
    min-height: 80vh; 
    padding: 60px 0; /* UPDATED */
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border-medium);
}

.about-flex-container {
    display: flex;
    flex-wrap: wrap; 
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.about-column {
    flex: 1 1 45%; 
    min-width: 350px; 
}

/* --- Left Column: Text --- */
.about-text {
    padding-right: 1rem; 
}

.about-text h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--color-text-heading);
    margin-top: 0;
    line-height: 1.2;
}

.about-reviews {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.review-stars {
    color: var(--color-brand-secondary);
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.review-trust {
    color: var(--color-brand-accent-red); 
}

.about-text p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-text-body);
}

.service-select-link {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-body-dark);
    text-decoration: none;
    transition: color 0.3s;
    cursor: pointer; 
}

.service-select-link:hover {
    color: var(--color-text-link-hover);
}

.service-select-link span {
    display: inline-block;
    transition: transform 0.3s;
}

.service-select-link:hover span {
    transform: translateY(3px);
}


/* --- Right Column: Image --- */
.about-image {
    text-align: center;
}

.about-image-wrapper {
    position: relative;
    display: inline-block; 
    padding: 10px; 
}

.about-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    border: 3px solid var(--color-bg-brand-swoosh);
    border-radius: 40% 60% 60% 40% / 60% 40% 60% 50%; 
    
    z-index: 1;
    transform: rotate(-15deg); 
}

.about-image-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(var(--rgb-black), 0.1);
    position: relative;
    z-index: 2; 
}

.image-caption {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-body-dark); 
}

.caption-heart {
    color: var(--color-brand-accent-red);
    font-size: 1.3rem;
    margin-right: 0.25rem;
}

/* Responsive adjustments for columns */
@media (max-width: 992px) {
    .about-text {
        padding-right: 0;
        text-align: center;
    }
    .about-reviews {
        justify-content: center;
    }
    .about-text h2 {
        font-size: 2.2rem;
    }
}

/* * 5. Services Section Styles
 * -------------------------------------------------------------------------- */

.services-section {
    padding: 60px 0; /* UPDATED */
    text-align: center;
    background-color: var(--color-bg-body); /* ADDED */
}

.section-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--color-text-heading);
    margin-top: 0;
    margin-bottom: 2.5rem;
}

/* --- Tab Navigation --- */
.service-tabs {
    display: inline-flex;
    background: var(--color-brand-primary); 
    border-radius: 50px;
    padding: 6px;
    margin-bottom: 3rem;
    box-shadow: var(--shadow-brand-tabs);
}

.service-tab {
    padding: 0.75rem 1.75rem;
    color: var(--color-text-inverted);
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.service-tab.active {
    background-color: var(--color-white);
    color: var(--color-brand-accent-red); 
    box-shadow: 0 4px 10px rgba(var(--rgb-black), 0.1);
}

/* --- Tab Content --- */
.service-tab-content {
    display: none; /* Hide all panels by default */
    animation: fadeIn 0.5s;
}

.service-tab-content.active {
    display: block; /* Show only the active panel */
}

/* ADDED: Makes tabs skinnier on mobile to prevent overflow */
@media (max-width: 480px) {
    .service-tab {
        padding: 0.75rem 1rem; 
        font-size: 0.9rem; 
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Service Cards --- */
.service-cards-container{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: stretch; 
}

@media (max-width: 1024px){
  .service-cards-container{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .service-cards-container{
    grid-template-columns: 1fr;
  }
}


.service-card {
    background: var(--color-white);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-sizing: border-box;
    height: 100%; 
}

.service-card:hover {
    transform: translateY(-5px); 
    box-shadow: var(--shadow-card-hover);
}

.service-card.popular {
    border: 2px solid var(--color-border-brand); 
    box-shadow: var(--shadow-brand-popular);
}
.service-card.popular:hover {
    transform: translateY(-5px); 
}

.service-card h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-text-heading);
    margin-top: 0;
    margin-bottom: 0.5rem;
    min-height: 4.4rem; 
    line-height: 1.3; 
}

.tag {
    font-size: 0.9rem;
    font-weight: 700;
    font-style: italic;
    margin-left: 0; 
    display: block; 
    margin-top: 0.25rem; 
}
.tag-refresh { color: var(--color-brand-accent-red); }
.tag-popular { color: var(--color-brand-secondary); }
.tag-vip { color: var(--color-brand-primary-deep); }

.service-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;    
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 1rem;
}

.service-card p {
    color: var(--color-text-body);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    min-height: 4.5rem; 
}

.service-list {
    margin-bottom: 1.5rem;
}

.service-list h4 {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-bg-white-hover);
    padding-bottom: 0.5rem;
}

.service-list ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.service-list li {
    display: flex;
    align-items: center;
    margin-bottom: 0.6rem;
    color: var(--color-text-body-dark);
    font-weight: 500;
}

.check {
    color: var(--color-brand-accent-red); 
    background-color: var(--color-bg-brand-light);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
    margin-right: 0.75rem;
    flex-shrink: 0; 
}

/* --- Card Button --- */
.btn-full {
    width: 100%;
    text-align: center;
    margin-top: auto; 
    padding: 1rem; /* UPDATED: Thicker padding */
    font-size: 1.1rem; /* UPDATED: Larger text */
}

/* * 6. How We Work (Video) Section
 * -------------------------------------------------------------------------- */

.how-we-work-section {
    position: relative;
    padding: 60px 0; /* UPDATED */
    text-align: center;
    color: var(--color-text-inverted);
    overflow: hidden; 
}

.how-we-work-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}

.how-we-work-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-dark);
    z-index: 2;
}

.how-we-work-section .container {
    position: relative;
    z-index: 3; 
}

.how-we-work-content h2 {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
}

.how-we-work-content h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-brand-secondary);
    letter-spacing: 2px;
    margin: 0.5rem 0;
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--color-brand-secondary);
}

.how-we-work-content .video-duration {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    margin-top: 1.5rem;
}

.how-we-work-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 450px;
    margin: 0.5rem auto 2rem auto;
}

.how-we-work-content .watch-button {
    background-color: var(--color-white);
    color: var(--color-text-hero);
    border-color: var(--color-white);
}

.how-we-work-content .watch-button:hover {
    background-color: var(--color-bg-white-hover);
    border-color: var(--color-bg-white-hover);
}

.how-we-work-content .watch-button span {
    margin-left: 0.5rem;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .how-we-work-content h2 {
        font-size: 2.5rem;
    }
    .how-we-work-content p {
        font-size: 1rem;
    }
}


/* * 7. Video Modal Styles
 * -------------------------------------------------------------------------- */

.video-modal {
    display: none; 
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-modal);
    
    align-items: center;
    justify-content: center;
    
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-modal.active {
    display: flex;
    opacity: 1;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    aspect-ratio: 16 / 9; 
    background: var(--color-black);
}

.video-modal-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.close-modal {
    position: absolute;
    top: -35px;
    right: 0;
    color: var(--color-white);
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal:hover {
    color: var(--color-bg-muted-hover);
}

/* * 8. Gallery Section Styles (v2)
 * -------------------------------------------------------------------------- */

.gallery-section {
    padding: 60px 0; /* UPDATED */
    background-color: var(--color-bg-light);
    text-align: center;
}

.gallery-section .section-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text-body);
    max-width: 700px;
    margin: -1rem auto 2.5rem auto;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 300px;
    gap: 1rem; 
}

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

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    transition: transform 0.4s ease-in-out;
}

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

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

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

@media (max-width: 640px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 250px;
    }
    
    .gallery-item.item-wide {
        grid-column: span 1;
    }
}

/* * 9. Quick CTA Section
 * -------------------------------------------------------------------------- */

.quick-cta-section {
    padding: 60px 0; /* UPDATED */
    background-color: var(--color-bg-body); /* UPDATED */
    text-align: center;
}

.quick-cta-section .section-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text-body);
    max-width: 600px;
    margin: -1rem auto 2.5rem auto;
}

.cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.cta-card {
    background: var(--color-bg-light);
    padding: 2rem; 
    border-radius: 20px;
    text-decoration: none;
    color: var(--color-text-heading);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-card);
    transition: all 0.3s ease-in-out;
}

.cta-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-brand-cta-hover);
    background: var(--color-brand-primary); 
    color: var(--color-text-inverted);
}

.cta-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 15px; 
    margin-bottom: 1.5rem;
}

.cta-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.cta-card p {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-body);
    margin-bottom: 1.5rem;
    transition: color 0.3s ease-in-out;
}

.cta-card:hover p {
    color: var(--color-text-inverted);
}

.cta-button {
    display: inline-block;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-brand-accent-red); 
    background: var(--color-white);
    
    /* UPDATED: Much larger padding and font size */
    padding: 1rem 2rem;
    font-size: 1.1rem;
    
    border-radius: 50px;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease-in-out;
}

.cta-card:hover .cta-button {
    background: var(--color-white);
    color: var(--color-brand-accent-red); 
    transform: scale(1.05);
}

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

/* * 10. Comparison Section
 * -------------------------------------------------------------------------- */

.comparison-section {
    padding: 60px 0; /* UPDATED */
    background-color: var(--color-bg-light);
}

.comparison-section .section-title {
    text-align: center;
}

.comparison-section .section-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text-body);
    max-width: 600px;
    margin: -1rem auto 2.5rem auto;
    text-align: center;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.comparison-card {
    background: var(--color-white);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-light);
}

.comparison-card.us {
    border-left: 5px solid var(--color-border-brand); 
}

.comparison-card.them {
    border-left: 5px solid var(--color-border-danger); /* Uses new gray color */
}

.comparison-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.comparison-card ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.comparison-card li {
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-text-body-dark);
    margin-bottom: 1rem;
}

.compare-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.9rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.compare-icon.check {
    background: var(--color-bg-brand-light);
    color: var(--color-brand-accent-red); 
}

.compare-icon.cross {
    background: #f4f4f4; /* Using a neutral light gray */
    color: var(--color-metal-gun); /* Using the dark gray */
}

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

/* * 11. FAQ Section
 * -------------------------------------------------------------------------- */

.faq-section {
    padding: 60px 0; /* UPDATED */
    background-color: var(--color-bg-body); /* UPDATED */
}

.faq-section .section-title {
    text-align: center;
}

.faq-section .section-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text-body);
    max-width: 600px;
    margin: -1rem auto 2.5rem auto;
    text-align: center;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--color-white);
    border-radius: 15px;
    border: 1px solid var(--color-border-light);
    margin-bottom: 1rem;
    overflow: hidden; 
    box-shadow: var(--shadow-faint);
}

.faq-question {
    background: transparent;
    border: none;
    text-align: left;
    
    width: 100%;
    
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text-heading);
    cursor: pointer;
    transition: background-color 0.2s ease;
    
    /* Layout for icon alignment */
    display: block !important;   
    position: relative;
    padding: 24px 64px 24px 24px; 
    line-height: 1.35;
}

.faq-question:hover {
    background-color: var(--color-bg-light);
}

.faq-question span {
    display: block;  
    margin: 0;
}

.faq-icon {
    position: absolute;
    top: 50%;
    right: 28px;  
    width: 24px;
    height: 24px;
    transform: translateY(-50%); 
    margin: 0; 
    pointer-events: none; 
}

/* Create the '+' icon */
.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%; 
    left: 50%;
    width: 16px;
    height: 2px;
    background-color: var(--color-brand-accent-red); 
    transition: transform 0.3s ease-in-out;
}

.faq-icon::before {
    transform: translate(-50%, -50%);
}
.faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* Change icon to '-' when active */
.faq-item.active .faq-icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}
.faq-item.active .faq-question {
    color: var(--color-brand-accent-red); 
}

.faq-answer {
    max-height: 0px; 
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.faq-answer p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-body);
    padding: 0 1.5rem 1.5rem 1.5rem;
    margin: 0;
}


/* * 14. Header Styles
 * -------------------------------------------------------------------------- */

.site-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border-medium);
    position: sticky; 
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-light);
    
    /* This transition is for the show/hide effect */
    transition: transform 0.3s ease-in-out;
}

.site-header.is-hidden {
    transform: translateY(-100%);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Ensure minimum height for header */
    min-height: 80px; 
}

.site-branding .site-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-heading);
    text-decoration: none;
}
.site-branding a {
    text-decoration: none;
    display: inline-block;
    line-height: 1;
}

.site-branding .site-logo {
   height: 110px;
   width: auto; 
   max-width: 100%;
   display: block; 
}


/* --- Main Navigation --- */
.main-navigation ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li {
    margin-left: 1.5rem;
}

.main-navigation a {
    text-decoration: none;
    color: var(--color-text-body-dark);
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: var(--color-text-link-hover);
}

/* UPDATED: Increased padding and font size for header CTA */
.header-cta-button {
    padding: 0.85rem 1.75rem; 
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

/* --- Mobile Menu Toggle --- */
.menu-toggle {
    display: none; 
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 18px;
    position: relative;
    z-index: 1010;
}

.menu-toggle .line {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-text-body-dark);
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}
.menu-toggle .line:nth-child(1) { top: 0; }
.menu-toggle .line:nth-child(2) { top: 8px; }
.menu-toggle .line:nth-child(3) { top: 16px; }

/* Mobile Menu Toggle Animation (X) */
.menu-toggle.is-active .line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.menu-toggle.is-active .line:nth-child(2) {
    opacity: 0;
}
.menu-toggle.is-active .line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}


/* * 15. Footer Styles
 * -------------------------------------------------------------------------- */

.site-footer {
    background-color: var(--color-bg-dark);
    color: var(--color-text-footer);
    padding: 60px 0 0 0;
    font-size: 0.95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-column h4 {
    font-size: 1.1rem;
    color: var(--color-text-footer-heading);
    margin-top: 0;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.footer-column .site-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-footer-heading);
    text-decoration: none;
    margin-bottom: 1rem;
    display: block;
}

.footer-column p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 0.75rem;
}

.footer-column a {
    color: var(--color-text-footer);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-column a:hover {
    color: var(--color-white);
    text-decoration: underline;
}

.footer-bottom-bar {
    border-top: 1px solid var(--color-border-dark);
    padding: 1.5rem 0;
    text-align: center;
}

.footer-bottom-bar p {
    margin: 0;
    font-size: 0.9rem;
}


/* * 16. Header & Footer Responsive
 * -------------------------------------------------------------------------- */

@media (max-width: 992px) {
    /* Mobile header layout fix */
    .header-content {
        min-height: 70px;
        gap: 12px;
    }

    .site-branding .site-logo {
        height: 80px;
    }

    .main-navigation {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: var(--color-white);
        box-shadow: 0 10px 10px rgba(var(--rgb-black), 0.05);
        border-top: 1px solid var(--color-border-medium);
    }

    .main-navigation.is-active {
        display: block;
    }

    .main-navigation ul {
        flex-direction: column;
    }

    .main-navigation li {
        margin: 0;
    }

    .main-navigation a {
        display: block;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--color-bg-light);
    }

    .menu-toggle {
        display: block;
        order: 3; /* Move hamburger to far right */
    }

    .mobile-header-book-btn {
        order: 2; /* Book button before hamburger */
        margin-left: auto; /* Push to the right */
    }

    .header-cta {
        display: none;
    }
}

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

    .footer-column {
        text-align: center; 
    }
}

/* * 17. Booking & Misc Styles
 * -------------------------------------------------------------------------- */

.booking-section {
    background-color: var(--color-bg-light);
    padding: 60px 0; /* UPDATED */
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

#book-detail .container{
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem;
  text-align: center;
}

#book-detail .section-title{
  margin: 0 0 .5rem;
}

#book-detail .section-description{
  margin: 0 auto;
  max-width: 60ch;
}

#book-detail{
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
---------------------------------------------------------------------
 18. Add-On Services Styles
 (REFACTORED & IMPROVED)
---------------------------------------------------------------------
*/

/* Container for the Add-Ons tab content */
.add-ons-container {
    width: 100%;
    text-align: center;
    margin-top: 2.5rem; /* Add some space from the tabs */
}

/* Title inside the Add-Ons tab */
.add-ons-title {
    font-size: 2.2rem;
    font-weight: 800; /* Match other section titles */
    margin-bottom: 1.5rem;
    color: var(--color-text-heading);
}

/* The Grid Container */
.add-ons-grid {
    display: grid;
    /* Creates 3 equal-width columns */
    grid-template-columns: repeat(3, 1fr);
    /* Sets the spacing between the cards */
    gap: 2rem; /* Consistent with .service-cards-container */
}

/* The Add-On Card */
.add-on-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 15px; /* Consistent with gallery */
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: all 0.3s ease; /* Consistent with service-card */
    overflow: hidden; /* To keep the image corners rounded */
    
    /* Ensures cards are same height in a row */
    display: flex;
    flex-direction: column;
}

/* Lifts the card up slightly on hover */
.add-on-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

/* Image inside the add-on card */
.add-on-image {
    width: 100%;
    height: 180px; /* Fixed height for all images */
    object-fit: cover; /* Ensures image covers the area, crops if needed */
    display: block;
}

/* Text content wrapper */
.add-on-text {
    padding: 1.5rem;
    /* Ensures text area grows */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the text vertically */
}

/* Styling for the text inside the card */
.add-on-card h4 {
    font-size: 1.2rem; /* Slightly larger */
    font-weight: 700; /* Bolder */
    color: var(--color-text-heading);
    margin: 0;
    line-height: 1.4;
}

/*
---------------------------------------------------------------------
 19. Add-On Services Responsive
---------------------------------------------------------------------
*/

/* Tablet - 2 Columns */
@media (max-width: 1024px) {
    .add-ons-grid {
        /* Switches to 2 columns */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile - 1 Column */
@media (max-width: 767px) {
    .add-ons-grid {
        /* Stacks to 1 column */
        grid-template-columns: 1fr;
    }

    .add-ons-title {
        font-size: 1.8rem;
    }
    
    .add-on-image {
        height: 160px; /* Slightly shorter on mobile */
    }
    
    .add-on-card h4 {
        font-size: 1.1rem;
    }
    
    .add-on-text {
        padding: 1.25rem;
    }
}

/* --------------------------------------------
   IMAGE COMPARISON SLIDER STYLES 
--------------------------------------------
*/

.comparison-container {
    position: relative;
    width: 100%;
    height: 180px; /* Matches your .add-on-image height */
    overflow: hidden;
    --position: 50%;
}

/* Background Image (After) */
.comp-img-back {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Foreground Wrapper (Before) */
.comp-img-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%; /* Initial position */
    overflow: hidden;
    border-right: 2px solid #fff; /* The white cut line */
    z-index: 2;
}

/* Foreground Image (Before) */
.comp-img-front {
    height: 100%;
    /* IMPORTANT: object-fit cover requires width to be the container width, not the wrapper width */
    width: 100%; 
    max-width: unset; /* Override standard responsive img styles */
    object-fit: cover;
    display: block;
}

/* Handle Circle (The Arrows) */
.comp-slider-handle {
    position: absolute;
    top: 50%;
    left: 50%; /* Initial position */
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none; /* Allows click to pass through to input */
}

.comp-slider-arrow {
    font-size: 10px;
    font-weight: bold;
    color: #333;
    line-height: 1;
}

/* Invisible Input Range (The actual controller) */
.comp-range-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Invisible */
    margin: 0;
    z-index: 10; /* Top layer to catch clicks/drags */
    cursor: ew-resize; /* Shows the left-right cursor */
    -webkit-appearance: none; /* Remove default styling */
}

/* Mobile adjustment for height */
@media (max-width: 767px) {
    .comparison-container {
        height: 160px; /* Matches your mobile .add-on-image height */
    }
}

/* Add this to your CSS if the image looks weird */
.comp-img-front {
    height: 100%;
    width: 100%; 
    max-width: unset; /* Critical for the anti-squish math to work */
    object-fit: cover;
    display: block;
}
/*


---------------------------------------------------------------------
 20. Locations Section
 ---------------------------------------------------------------------
*/
.locations-section {
    padding: 60px 0; /* UPDATED */
    background-color: var(--color-bg-body); /* UPDATED */
    border-top: 1px solid var(--color-border-medium);
}

.locations-section .section-title,
.locations-section .section-description {
    text-align: center;
}

.locations-section .section-description {
    max-width: 600px;
    margin: -1rem auto 2.5rem auto;
}

.locations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.locations-map iframe {
    width: 100%;
    height: 400px; /* Good default height */
    border-radius: 15px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
}

.locations-list h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-heading);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.locations-list ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    /* Create a 2-column list */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.locations-list li {
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-text-body-dark);
}

/* Re-using the .check style from services */
.locations-list .check {
    margin-right: 0.75rem;
}

.locations-note {
    font-size: 0.95rem;
    color: var(--color-text-body);
    line-height: 1.6;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-light);
}

/*
---------------------------------------------------------------------
 21. Locations Responsive
---------------------------------------------------------------------
*/

@media (max-width: 992px) {
    .locations-list ul {
        grid-template-columns: 1fr; /* Stack to 1 column list sooner */
    }
}

@media (max-width: 767px) {
    .locations-grid {
        grid-template-columns: 1fr; /* Stack map and list */
    }
    
    .locations-map {
        /* Ensure map is on top on mobile */
        order: 1;
    }
    .locations-list {
        order: 2;
        margin-top: 2rem; /* Add space between map and text */
    }
    
    .locations-list h4 {
        text-align: center;
    }
    
    .locations-list ul {
        grid-template-columns: 1fr 1fr; /* Go back to 2 columns for the list on mobile */
    }
}

@media (max-width: 480px) {
    .locations-list ul {
        grid-template-columns: 1fr; /* Finally stack list on small screens */
    }
}

/* ---------------------------------------------------------------------
 22. FLOATING ACTION INTERFACE
---------------------------------------------------------------------
*/

.floating-interface {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    pointer-events: none; /* Allows clicking through the area around buttons */
}

.float-btn {
    pointer-events: auto; /* Re-enable clicks on buttons */
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    color: #fff;
}

.float-btn:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

.float-btn svg {
    width: 24px;
    height: 24px;
}

/* --- 1. Scroll Top Button --- */
.scroll-btn {
    background-color: var(--color-text-heading); /* Dark Grey/Black */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    /* Overwrite standard transition for scroll effect */
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    width: 45px; /* Slightly smaller */
    height: 45px;
}

.scroll-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* --- 2. Call Button (Mobile) --- */
.call-btn {
    background: var(--color-brand-primary); /* Standard "Phone/WhatApp" Green, or use var(--color-brand-secondary) */
    color: #fff;
}

/* --- 3. Book Button (Primary) --- */
.book-btn {
    background: var(--color-brand-primary);
    width: 65px; /* Largest button */
    height: 65px;
    border: 3px solid rgba(255,255,255,0.2);
}

/* Tooltip for Book Button */
.btn-tooltip {
    position: absolute;
    right: 80px;
    background: var(--color-text-heading);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Arrow for tooltip */
.btn-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent var(--color-text-heading);
}

.book-btn:hover .btn-tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* --- Responsive Visibility --- */

/* Desktop: Hide Call Button */
@media (min-width: 769px) {
    .call-btn {
        display: none;
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .floating-interface {
        bottom: 20px;
        right: 20px;
        gap: 10px;
    }
    
    /* On mobile, maybe hide the tooltip to keep it clean, 
       or keep it if you want extra CTA pressure */
    .btn-tooltip {
        display: none;
    }
}

/* --- Integrated Reviews Styles (Infinite & Auto) --- */

.integrated-reviews-container {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(0,0,0,0.1);
    width: 100%;
    max-width: 100%; /* Prevents container from overflowing viewport */
}

.reviews-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text-heading);
    margin-bottom: 0.5rem;
}

.reviews-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 2rem;
    font-weight: 600;
}

/* Carousel Container */
.reviews-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden; /* Critical: Hides slides off screen */
    padding: 20px 0; 
    touch-action: pan-y; 
}

/* The Track */
.reviews-track {
    display: flex;
    gap: 20px; 
    width: max-content; 
    cursor: grab;
    padding-left: 10px; /* Tiny buffer for the first card */
}

.reviews-track:active {
    cursor: grabbing;
}

/* Review Card Styling */
.review-card {
    width: 300px; /* Desktop Fixed Width */
    flex-shrink: 0; 
    background: var(--color-white);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid var(--color-border-light);
    user-select: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* CRITICAL: Keeps padding inside the width */
}

/* Inner Content Styling */
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.reviewer-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-heading);
}

.review-stars {
    color: #FFD700;
    letter-spacing: 1px;
}

.review-date {
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 1rem;
}

.review-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-body);
    font-style: italic;
    flex-grow: 1;
}

.google-badge {
    margin-top: 1.5rem;
    opacity: 0.6;
    text-align: right;
}

/* Navigation Buttons */
.review-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    z-index: 10;
    font-size: 1.2rem;
    color: var(--color-brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.review-nav:hover {
    background: var(--color-brand-primary);
    color: white;
}

.review-nav.prev { left: 10px; }
.review-nav.next { right: 10px; }

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    /* 1. Hide Arrows */
    .review-nav {
        display: none; 
    }

    /* 2. Fix Card Width & Padding */
    .review-card {
        /* Slightly tighter width to ensure it doesn't push screen edges */
        width: 80vw; 
        max-width: 350px; /* Stop it getting too big on large phones */
        padding: 1.5rem; /* Reduce padding to make content fit better */
    }

    .integrated-reviews-container {
        margin-top: 2rem;
        padding-top: 2rem;
    }
    
    /* Ensure the container doesn't push width */
    .reviews-carousel-wrapper {
        width: 100%;
        padding: 10px 0; /* Less shadow space needed on mobile */
    }
}

/* This targets the container specifically inside your booking section */
#booking-section .container {
  text-align: center;
}

/* ===========================
   MOBILE HEADER "BOOK NOW" BTN
   =========================== */
.mobile-header-book-btn{
  display: none;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  /* Match hero-button.primary styling */
  background-image: var(--color-brand-primary);
  background-color: var(--color-brand-primary-start);
  color: var(--color-text-inverted);
  border: none;
  box-shadow: var(--shadow-hero-btn);
  transition: all 0.3s ease-in-out;
}

.mobile-header-book-btn:hover {
  background-image: linear-gradient(
    90deg,
    #9a000b 0%,
    #b00010 40%,
    #5c0000 70%,
    #111111 100%
  );
  box-shadow: var(--shadow-hero-btn-hover);
  transform: translateY(-2px);
}

@media (max-width: 992px){
  .mobile-header-book-btn{
    display: inline-flex;
  }
}

@media (max-width: 600px){
  .mobile-header-book-btn{
    padding: 0 14px;
    height: 38px;
    font-size: 13px;
  }

  .header-content {
    min-height: 60px;
    padding: 8px 0;
  }

  .site-branding .site-logo {
    height: 60px;
  }

  .main-navigation {
    top: 60px;
  }
}

@media (max-width: 380px){
  .mobile-header-book-btn{
    padding: 0 10px;
    height: 34px;
    font-size: 12px;
  }

  .site-branding .site-logo {
    height: 50px;
  }
}

/* ===========================
   📞 EMOJI NEXT TO CALENDAR ICON
   =========================== */
.book-call-emoji{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  font-size: 18px;
  line-height: 1;
}