/* ==========================================================================
   ON THE GO DETAILING - MOBILE-FIRST STYLESHEET
   Standard Tier Website

   RESPONSIVE BREAKPOINT SYSTEM - 4 BREAKPOINTS (Mobile-First):
   - Mobile (320-767px): Base styles (NO media query)
   - Tablet (768-1024px): @media (min-width: 768px)
   - Desktop (1025-1440px): @media (min-width: 1025px)
   - Large Desktop (1441px+): @media (min-width: 1441px)
   ========================================================================== */

/* ==========================================================================
   ON THE GO DETAILING - MASTER STYLESHEET
   Standard Tier Website
   ========================================================================== */

/* ==========================================================================
   1. CSS RESET & BASE STYLES
   ========================================================================== */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: #000000;
  overflow-x: hidden;
}

/* ==========================================================================
   2. CSS VARIABLES
   ========================================================================== */

:root {
  /* Colors */
  --color-primary-red: #dc2626;
  --color-primary-red-dark: #b91c1c;
  --color-primary-red-light: #ef4444;
  --color-dark-gray: #2C3539;
  --color-dark-navy: #1A1A2E;
  --color-light-gray: #F8F9FA;
  --color-cyan: #00d4ff;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-text-dark: #333333;
  --color-text-medium: #666666;
  --color-text-light: #e5e5e5;
  --color-footer-background: #333333;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 60px;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.05;
}

p, li {
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
  line-height: 1.85;
}

a {
  text-decoration: none;
  transition: all 0.3s ease;
}

/* ==========================================================================
   4. LAYOUT & GRID SYSTEMS
   ========================================================================== */

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 30px 0;
}

/* ==========================================================================
   5. HEADER STYLES
   ========================================================================== */

.otg-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--color-footer-background);
  z-index: 9999;
  padding: 0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  opacity: 1;
  height: 75px;
}

.otg-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary-red);
  z-index: 10000;
}

.otg-header.scrolled {
  background: rgba(0, 0, 0, 0.75);
  padding: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  height: 79px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.otg-header-container {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 40px;
  position: relative;
}

.otg-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-left: 0;
}

.otg-logo img {
  height: 75px;
  width: auto;
  transition: all 0.3s ease;
}

.otg-header.scrolled .otg-logo img {
  height: 75px;
}

.otg-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  grid-column: 2;
}

.otg-right-section {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-self: end;
  margin-right: 0;
}

.otg-nav-links {
  display: flex;
  gap: 45px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.otg-nav-links a {
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: var(--color-white);
  text-decoration: none;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.3s ease;
  cursor: pointer;
  line-height: 1.05;
}

.otg-nav-links a:hover {
  color: var(--color-cyan);
}

/* Dropdown Navigation */
.otg-dropdown {
  position: relative;
}

.otg-dropdown-toggle {
  position: relative;
  cursor: pointer;
}

.otg-dropdown-toggle::after {
  content: ' ▾';
  font-size: 14px;
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.otg-dropdown:hover .otg-dropdown-toggle::after {
  transform: rotate(180deg);
}

.otg-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 20px;
  background: var(--color-dark-gray);
  border: 2px solid var(--color-primary-red);
  border-radius: 5px;
  list-style: none;
  padding: 15px 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, margin-top 0.3s ease;
  z-index: 10001;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.otg-dropdown:hover .otg-dropdown-menu {
  opacity: 1;
  visibility: visible;
  margin-top: 15px;
}

.otg-dropdown-menu li {
  padding: 0;
}

.otg-dropdown-menu a {
  display: block;
  padding: 12px 25px;
  color: var(--color-white);
  text-decoration: none;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.otg-dropdown-menu a:hover {
  color: var(--color-cyan);
  background: rgba(220, 38, 38, 0.1);
  border-left-color: var(--color-primary-red);
  padding-left: 30px;
}

/* Social Media Icons */
.otg-social {
  display: flex;
  align-items: center;
  gap: 15px;
}

.otg-social a {
  color: var(--color-white);
  font-size: 21px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.otg-social a:hover {
  color: var(--color-primary-red);
  transform: scale(1.1);
}

/* Animated Book Online Button */
.otg-book-btn {
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(135deg, var(--color-primary-red) 0%, var(--color-primary-red-dark) 100%);
  color: var(--color-white);
  padding: 11px 32px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: var(--font-weight-regular);
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.4s ease;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.5);
  position: relative;
  overflow: hidden;
  animation: dramaticPulse 1.5s ease-in-out infinite;
  line-height: 1.05;
}

@keyframes dramaticPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.5);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.9), 0 0 10px rgba(220, 38, 38, 0.5);
  }
}

.otg-book-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
  transition: left 0.6s ease;
}

.otg-book-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  animation: ripple 1.5s ease-out infinite;
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

.otg-book-btn:hover::before {
  left: 100%;
}

.otg-book-btn:hover {
  transform: translateY(-4px) scale(1.12);
  box-shadow: 0 10px 20px rgba(220, 38, 38, 0.8), 0 0 15px rgba(220, 38, 38, 0.6);
  background: linear-gradient(135deg, var(--color-primary-red-light) 0%, var(--color-primary-red) 100%);
  animation: none;
}

/* Mobile Menu Toggle */
.otg-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 28px;
  cursor: pointer;
}

/* ==========================================================================
   6. HERO SECTION STYLES
   ========================================================================== */

.otg-hero-section {
  background: var(--color-black);
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  padding-top: 70px;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.otg-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/* Default: show desktop video */
.otg-hero-video-desktop {
  display: block;
}

.otg-hero-video-mobile {
  display: none;
}

/* Dark Overlay for Text Readability */
.otg-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.otg-hero-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
  padding: 0 40px;
  position: relative;
  z-index: 3;
}

.otg-hero-title {
  font-size: 36px;
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  margin-bottom: 25px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
}

.otg-hero-subtitle {
  font-size: 22px;
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  margin-bottom: 30px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
}

.otg-hero-description {
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  margin-bottom: 20px;
  line-height: 1.65;
  letter-spacing: 0.05em;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.otg-hero-booking-cta {
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-red);
  margin-bottom: 50px;
  line-height: 1.65;
  letter-spacing: 0.05em;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.02);
  }
}

.otg-hero-buttons {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Get A Quote Button - Outlined */
.otg-quote-button {
  display: inline-block;
  background: transparent;
  color: var(--color-primary-red);
  padding: 18px 50px;
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 3px solid var(--color-primary-red);
  border-radius: 5px;
  transition: all 0.3s ease;
  cursor: pointer;
  line-height: 1.05;
}

.otg-quote-button:hover {
  background: var(--color-primary-red);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
}

/* Call Now Button - Filled */
.otg-call-button {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-primary-red), var(--color-primary-red-dark));
  color: var(--color-white);
  padding: 18px 50px;
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4);
  cursor: pointer;
  border: none;
  line-height: 1.05;
}

.otg-call-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(220, 38, 38, 0.6);
  background: linear-gradient(135deg, var(--color-primary-red-light), var(--color-primary-red));
}

/* ==========================================================================
   7. FAQ SECTION STYLES
   ========================================================================== */

.otg-faq-section {
  background: var(--color-light-gray);
  padding: 40px 40px 80px 40px;
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

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

.otg-faq-title {
  text-align: center;
  font-size: 36px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  margin-bottom: 60px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
}

.otg-faq-item {
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 0;
}

.otg-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 0;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.otg-faq-question:hover {
  padding-left: 10px;
}

.otg-faq-question-text {
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  letter-spacing: 0.05em;
  flex: 1;
  padding-right: 20px;
  line-height: 1.05;
}

.otg-faq-icon {
  font-size: 28px;
  color: var(--color-primary-red);
  font-weight: var(--font-weight-regular);
  transition: transform 0.3s ease;
  min-width: 28px;
  text-align: center;
}

.otg-faq-item.active .otg-faq-icon {
  transform: rotate(45deg);
}

.otg-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 0 0 0;
}

.otg-faq-item.active .otg-faq-answer {
  max-height: none;
  padding: 0 0 25px 0;
  overflow: visible;
}

.otg-faq-answer-text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text-medium);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
}

/* ==========================================================================
   9. REVIEWS SECTION STYLES
   ========================================================================== */

.otg-reviews-section {
  background: var(--color-white);
  padding: 40px 40px 50px 40px;
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  min-height: 480px;
  box-sizing: border-box;
  overflow: visible;
}

.otg-reviews-container {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.otg-reviews-header {
  text-align: center;
  margin-bottom: 30px;
}

.otg-reviews-title {
  font-size: 36px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
}

.otg-reviews-subtitle {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.05;
}

.otg-google-icon {
  width: 20px;
  height: 20px;
}

.otg-reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  flex: 1;
}

/* Hide carousel controls on desktop/tablet */
.otg-carousel-wrapper {
  display: contents;
}

.otg-carousel-arrow,
.otg-carousel-dots {
  display: none;
}

.otg-review-card {
  background: var(--color-light-gray);
  border-radius: 8px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid transparent;
}

.otg-review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.15);
  border-color: var(--color-primary-red);
}

.otg-review-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.otg-review-name {
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  letter-spacing: 0.05em;
  line-height: 1.05;
}

.otg-review-stars {
  color: var(--color-primary-red);
  font-size: 16px;
  letter-spacing: 2px;
}

.otg-review-text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-text-medium);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

/* ==========================================================================
   10. SERVICES PAGE STYLES
   ========================================================================== */

.otg-services-wrapper {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 75px;
  position: relative;
}

/* Red Header Section */
.otg-services-header {
  background: var(--color-primary-red);
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 48px;
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
}

/* Service Subsection Container */
.otg-service-item {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 822px;
}

/* Section 1 - White Background - Image Left */
.otg-service-1 {
  background: var(--color-white);
}

.otg-service-1 .otg-service-image {
  order: 1;
}

.otg-service-1 .otg-service-content {
  order: 2;
}

/* Section 2 - Footer Grey Background - Image Right */
.otg-service-2 {
  background: var(--color-footer-background);
}

.otg-service-2 .otg-service-image {
  order: 2;
}

.otg-service-2 .otg-service-content {
  order: 1;
}

/* Section 3 - Light Gray Background - Image Left */
.otg-service-3 {
  background: var(--color-light-gray);
}

.otg-service-3 .otg-service-image {
  order: 1;
}

.otg-service-3 .otg-service-content {
  order: 2;
}

/* Section 4 - Dark Navy Background - Image Right */
.otg-service-4 {
  background: var(--color-dark-navy);
}

.otg-service-4 .otg-service-image {
  order: 2;
}

.otg-service-4 .otg-service-content {
  order: 1;
}

/* Image Placeholder */
.otg-service-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  overflow: hidden;
  position: relative;
}

.otg-service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* Content Placeholder */
.otg-service-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  box-sizing: border-box;
  min-height: 100%;
}

.otg-service-content-inner {
  width: 100%;
  max-width: 600px;
}

/* Service Content Styling */
.otg-service-title {
  font-size: 42px;
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 25px;
  line-height: 1.25;
}

.otg-service-description {
  font-size: 17px;
  line-height: 1.85;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
}

.otg-service-section-label {
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
  margin-bottom: 15px;
  margin-top: 25px;
}

.otg-service-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.otg-service-list li {
  font-size: 16px;
  line-height: 1.95;
  padding-left: 25px;
  position: relative;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.otg-service-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  font-size: 20px;
  font-weight: var(--font-weight-regular);
}

/* Color Themes for Each Service */
.otg-service-1 .otg-service-title {
  color: var(--color-primary-red);
}

.otg-service-1 .otg-service-description,
.otg-service-1 .otg-service-section-label,
.otg-service-1 .otg-service-list li {
  color: var(--color-text-dark);
}

.otg-service-1 .otg-service-list li::before {
  color: var(--color-primary-red);
}

.otg-service-2 .otg-service-title {
  color: var(--color-white);
}

.otg-service-2 .otg-service-description,
.otg-service-2 .otg-service-section-label,
.otg-service-2 .otg-service-list li {
  color: var(--color-text-light);
}

.otg-service-2 .otg-service-list li::before {
  color: var(--color-primary-red);
}

.otg-service-3 .otg-service-title {
  color: var(--color-dark-navy);
}

.otg-service-3 .otg-service-description,
.otg-service-3 .otg-service-section-label,
.otg-service-3 .otg-service-list li {
  color: var(--color-text-dark);
}

.otg-service-3 .otg-service-list li::before {
  color: var(--color-primary-red);
}

.otg-service-4 .otg-service-title {
  color: var(--color-primary-red);
}

.otg-service-4 .otg-service-description,
.otg-service-4 .otg-service-section-label,
.otg-service-4 .otg-service-list li {
  color: var(--color-text-light);
}

.otg-service-4 .otg-service-list li::before {
  color: var(--color-primary-red);
}

/* Book Now Button */
.otg-book-button {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-primary-red), var(--color-primary-red-dark));
  color: var(--color-white);
  padding: 19px 50px;
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
  cursor: pointer;
  border: none;
  animation: pulse 2s ease-in-out infinite;
  line-height: 1.05;
}

.otg-book-button:hover {
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.8), 0 0 40px rgba(220, 38, 38, 0.6);
  transform: translateY(-2px);
  animation: none;
}

.otg-book-button:active {
  transform: translateY(0);
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.5), 0 0 15px rgba(220, 38, 38, 0.3);
  }
}

/* ==========================================================================
   11. ABOUT SECTION STYLES
   ========================================================================== */

.otg-about-section {
  background: var(--color-white);
  padding: 80px 40px;
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  position: relative;
  overflow: hidden;
}

.otg-about-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(135deg, transparent 0%, rgba(220, 38, 38, 0.03) 50%, transparent 100%);
  transform: skewY(-2deg);
  pointer-events: none;
}

.otg-about-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.otg-about-title {
  text-align: center;
  font-size: 36px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  margin: 0 auto 15px auto;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
  position: relative;
  display: inline-block;
  width: 100%;
  padding-bottom: 15px;
}

.otg-about-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--color-primary-red);
}

/* Primary Section - Owner Featured */
.otg-about-primary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
  margin-top: 60px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.otg-about-primary.scroll-visible {
  opacity: 1;
  transform: translateY(0);
}

.otg-about-owner-image {
  width: 100%;
  height: 550px;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
  box-shadow: 0 15px 50px rgba(220, 38, 38, 0.2);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s ease;
  position: relative;
}

.otg-about-owner-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.6s ease;
  border-radius: 12px;
}

.otg-about-owner-image:hover {
  transform: scale(1.02) translateY(-10px);
  box-shadow: 0 25px 60px rgba(220, 38, 38, 0.3);
}

.otg-about-owner-image:hover::after {
  opacity: 1;
}

.otg-about-owner-content h3 {
  font-size: 32px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  margin-bottom: 25px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.05;
}

.otg-about-owner-content p {
  font-size: 18px;
  line-height: 1.85;
  color: var(--color-text-dark);
  margin-bottom: 20px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
}

/* Secondary Section - Process Images */
.otg-about-secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.2s;
}

.otg-about-secondary.scroll-visible {
  opacity: 1;
  transform: translateY(0);
}

.otg-about-process-images {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
}

.otg-about-process-image {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.15);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.otg-about-process-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.otg-about-process-image:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 20px 40px rgba(220, 38, 38, 0.3);
}

.otg-about-process-image:hover::before {
  opacity: 1;
}

.otg-about-process-image:nth-child(1) {
  animation-delay: 0.1s;
}

.otg-about-process-image:nth-child(2) {
  animation-delay: 0.2s;
}

.otg-about-process-content h3 {
  font-size: 28px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  margin-bottom: 25px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.05;
}

.otg-about-process-content p {
  font-size: 18px;
  line-height: 1.85;
  color: var(--color-text-dark);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
}

/* ==========================================================================
   12. GALLERY/OUR WORK SECTION STYLES
   ========================================================================== */

.otg-work-section {
  background: var(--color-dark-gray);
  padding: 30px 0 40px 0;
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  overflow: hidden;
}

.otg-work-title {
  text-align: center;
  font-size: 48px;
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
}

.otg-work-subtitle {
  text-align: center;
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  margin-bottom: 50px;
  letter-spacing: 0.05em;
  opacity: 0.9;
  line-height: 1.05;
}

.otg-work-gallery {
  display: flex;
  gap: 30px;
  animation: scrollLeft 50s linear infinite;
  width: fit-content;
}

.otg-work-gallery:hover {
  animation-play-state: paused;
}

.otg-work-item {
  width: 400px;
  height: 300px;
  background: #1a1f22;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-primary-red);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.otg-work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.otg-work-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(220, 38, 38, 0.4);
}

.otg-work-placeholder {
  font-size: 24px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  letter-spacing: 0.05em;
  line-height: 1.05;
}

/* ==========================================================================
   13. CONTACT SECTION STYLES
   ========================================================================== */

.otg-contact-text {
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: var(--color-text-dark);
  background: var(--color-white);
  padding: 30px 30px 0 30px;
  max-width: 594px;
  height: auto;
  box-sizing: border-box;
}

.otg-contact-title {
  font-size: 48.4px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  margin-bottom: 40px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.otg-contact-intro {
  font-size: 24.2px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  margin-bottom: 35px;
  line-height: 1.95;
  letter-spacing: 0.05em;
}

.otg-contact-phone {
  font-size: 26.4px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  text-decoration: none;
  transition: color 0.3s ease;
  letter-spacing: 0.05em;
  line-height: 1.05;
}

.otg-contact-phone:hover {
  color: var(--color-primary-red-dark);
}

.otg-contact-response {
  font-size: 22px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  margin-bottom: 45px;
  line-height: 1.95;
  letter-spacing: 0.05em;
}

.otg-contact-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.otg-contact-features li {
  font-size: 22px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  margin-bottom: 28px;
  padding-left: 30px;
  position: relative;
  line-height: 1.85;
  letter-spacing: 0.05em;
}

.otg-contact-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary-red);
  font-weight: var(--font-weight-regular);
  font-size: 24.2px;
}

/* ==========================================================================
   14. SERVICE AREA BANNER STYLES
   ========================================================================== */

.otg-service-area {
  background: var(--color-footer-background);
  color: var(--color-white);
  padding: 14.7px 0;
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  margin-top: 0;
  display: flex;
  align-items: center;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-top: 2px solid var(--color-primary-red);
}

.otg-service-area-wrapper {
  display: inline-block;
  animation: scrollLeft 25s linear infinite;
}

.otg-service-area-text {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-block;
  padding-right: 100px;
  line-height: 1.05;
}

.otg-service-area-text span {
  display: inline-block;
}

/* Only towns blink red */
.otg-service-area-text .town {
  animation: redBlink 5s ease-in-out infinite;
}

/* Stagger each town's blink separately */
.otg-service-area-text .town-1 { animation-delay: 0s; }
.otg-service-area-text .town-2 { animation-delay: 1s; }
.otg-service-area-text .town-3 { animation-delay: 2s; }
.otg-service-area-text .town-4 { animation-delay: 3s; }
.otg-service-area-text .town-5 { animation-delay: 4s; }

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-25%);
  }
}

@keyframes redBlink {
  0%, 80% {
    color: var(--color-white);
  }
  85%, 90% {
    color: var(--color-primary-red);
  }
  95%, 100% {
    color: var(--color-white);
  }
}

/* ==========================================================================
   15. FOOTER STYLES
   ========================================================================== */

.otg-footer {
  background: var(--color-footer-background);
  color: var(--color-white);
  padding: 0;
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  position: relative;
}

.otg-footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 40px 15px 40px;
  overflow-x: hidden;
}

.otg-footer-top {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 120px;
  margin-bottom: 35px;
  margin-top: 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 35px;
  border-bottom: 1px solid var(--color-primary-red);
  position: relative;
}

.otg-footer-left {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: flex-start;
  margin-left: 50px;
}

.otg-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
}

.otg-footer-nav {
  display: grid;
  grid-template-columns: auto auto;
  gap: 25px 30px;
  justify-content: end;
  margin-left: 0;
  margin-right: 50px;
}

.otg-footer-nav a {
  color: var(--color-white);
  text-decoration: none;
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.3s ease;
  line-height: 1.05;
}

.otg-footer-nav a:hover {
  color: var(--color-primary-red);
}

.otg-footer-contact a {
  color: var(--color-white);
  text-decoration: none;
  font-size: 18px;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.05;
}

.otg-footer-contact a:hover {
  color: var(--color-primary-red);
}

.otg-footer-location {
  color: var(--color-white);
  font-size: 18px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.05;
}

.otg-footer-social {
  display: flex;
  justify-content: flex-start;
  gap: 15px;
  margin-top: 8px;
}

.otg-footer-social a {
  color: var(--color-primary-red);
  font-size: 20px;
  transition: all 0.3s ease;
}

.otg-footer-social a:hover {
  color: var(--color-white);
  transform: scale(1.1);
}

.otg-footer-legal {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 8px;
  margin-top: 10px;
}

.otg-footer-legal a:first-child {
  margin-right: 10px;
}

.otg-footer-legal a:last-child {
  margin-left: 10px;
}

.otg-footer-legal a {
  color: var(--color-white);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.3s ease;
  line-height: 1.05;
}

.otg-footer-legal a:hover {
  color: var(--color-primary-red);
}

.otg-footer-bottom {
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.85;
  margin-bottom: 10px;
  margin-top: 0;
}

.otg-footer-bottom a {
  color: var(--color-white);
  text-decoration: none;
  transition: color 0.3s ease;
}

.otg-footer-bottom a:hover {
  color: var(--color-primary-red);
}

.otg-footer-attribution {
  white-space: nowrap;
}

/* ==========================================================================
   15. PRIVACY POLICY PAGE STYLES
   ========================================================================== */

.otg-privacy-page {
  background: var(--color-light-gray);
  padding: 0;
  min-height: auto;
}

.otg-privacy-container {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--color-light-gray);
  padding: 40px 50px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.otg-privacy-header {
  text-align: center;
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 3px solid var(--color-primary-red);
}

.otg-privacy-title {
  font-size: 48px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
}

.otg-privacy-subtitle {
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  letter-spacing: 0.05em;
  line-height: 1.05;
}

.otg-privacy-last-updated {
  font-size: 14px;
  color: var(--color-text-medium);
  margin-top: 10px;
  font-weight: var(--font-weight-regular);
}

.otg-privacy-intro {
  font-size: 18px;
  line-height: 1.85;
  color: var(--color-text-dark);
  margin-bottom: 40px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
}

.otg-privacy-section {
  margin-bottom: 40px;
}

.otg-privacy-section-title {
  font-size: 28px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-left: 5px solid var(--color-primary-red);
  padding-left: 20px;
  line-height: 1.05;
}

.otg-privacy-section p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text-dark);
  margin-bottom: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
}

.otg-privacy-section ul {
  margin: 20px 0;
  padding-left: 40px;
}

.otg-privacy-section li {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-dark);
  margin-bottom: 12px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.03em;
}

.otg-privacy-contact {
  background: #333333;
  color: var(--color-white);
  padding: 30px;
  border-radius: 8px;
  margin-top: 50px;
  text-align: center;
}

.otg-privacy-contact h3 {
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-red);
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.otg-privacy-contact p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}

.otg-privacy-contact a {
  color: var(--color-primary-red);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: color 0.3s ease;
}

.otg-privacy-contact a:hover {
  color: var(--color-white);
}

/* ==========================================================================
   16. TERMS OF SERVICE PAGE STYLES
   ========================================================================== */

.otg-terms-page {
  background: var(--color-light-gray);
  padding: 0;
  min-height: auto;
}

.otg-terms-container {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--color-light-gray);
  padding: 40px 50px 80px 50px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.otg-terms-header {
  text-align: center;
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 3px solid var(--color-primary-red);
}

.otg-terms-title {
  font-size: 48px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
}

.otg-terms-subtitle {
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  letter-spacing: 0.05em;
  line-height: 1.05;
}

.otg-terms-last-updated {
  font-size: 14px;
  color: var(--color-text-medium);
  margin-top: 10px;
  font-weight: var(--font-weight-regular);
}

.otg-terms-intro {
  font-size: 18px;
  line-height: 1.85;
  color: var(--color-text-dark);
  margin-bottom: 40px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
}

.otg-terms-section {
  margin-bottom: 40px;
}

.otg-terms-section-title {
  font-size: 28px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-left: 5px solid var(--color-primary-red);
  padding-left: 20px;
  line-height: 1.05;
}

.otg-terms-section p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text-dark);
  margin-bottom: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
}

.otg-terms-section ul {
  margin: 20px 0;
  padding-left: 40px;
}

.otg-terms-section li {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-dark);
  margin-bottom: 12px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.03em;
}

.otg-terms-section strong {
  color: var(--color-primary-red);
  font-weight: var(--font-weight-semibold);
}

.otg-terms-highlight {
  background: #fff3f3;
  border-left: 4px solid var(--color-primary-red);
  padding: 20px;
  margin: 25px 0;
  border-radius: 4px;
}

.otg-terms-contact {
  background: #333333;
  color: var(--color-white);
  padding: 30px;
  border-radius: 8px;
  margin-top: 50px;
  text-align: center;
}

.otg-terms-contact h3 {
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-red);
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.otg-terms-contact p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}

.otg-terms-contact a {
  color: var(--color-primary-red);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: color 0.3s ease;
}

.otg-terms-contact a:hover {
  color: var(--color-white);
}

/* ==========================================================================
   17. UTILITY CLASSES
   ========================================================================== */

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

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.hidden {
  display: none;
}

.visible {
  display: block;
}

/* ==========================================================================
   18. RESPONSIVE BREAKPOINT SYSTEM - 6 BREAKPOINTS
   ========================================================================== */

/* ==========================================================================
   BASE STYLES - LARGE DESKTOP (1441px and above)
   ========================================================================== */
/* Base styles are already defined above - no media query needed */
/* All default styles serve the largest screens by default */

/* ==========================================================================
   BREAKPOINT 6 - MEDIUM DESKTOP (1201px to 1440px)
   ========================================================================== */

/* ==========================================================================
   MOBILE-SPECIFIC ADDITIONS (from BP1, BP2, BP3)
   ========================================================================== */

/* Mobile Header Adjustments */
.otg-header {
  height: 75px;
}

.otg-header.scrolled {
  height: 79px;
}

.otg-header::after {
  z-index: 998;
}

.otg-header-container {
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
}

.otg-logo {
  margin-left: -12px;
  margin-top: -5px;
}

.otg-logo img {
  height: 75px;
}

.otg-header.scrolled .otg-logo img {
  height: 75px;
}

/* Mobile Hero */
.otg-hero-section {
  height: 600px;
  padding-top: 85px;
}

.otg-hero-container {
  padding: 0 20px;
}

.otg-hero-content {
  padding-top: 20px;
}

.otg-hero-title {
  font-size: 32px;
  margin-bottom: 15px;
  line-height: 1.1;
}

.otg-hero-subtitle {
  font-size: 20px;
  margin-bottom: 20px;
  line-height: 1.2;
}

.otg-hero-description {
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.otg-hero-booking-cta {
  font-size: 16px;
  margin-bottom: 30px;
}

.otg-hero-buttons {
  flex-direction: column;
  gap: 12px;
}

/* Mobile Service Area Banner */
.otg-service-area-text {
  font-size: 14px !important;
}

/* Mobile Navigation - Hidden by default, shown via hamburger */
.otg-nav {
  display: none;
}

.otg-right-section {
  position: static;
  margin-right: -20px;
  gap: 6px;
}

.otg-social {
  gap: 6px;
  margin-right: 0;
  margin-left: auto;
}

.otg-social a svg {
  width: 18px;
  height: 18px;
}

.otg-mobile-toggle {
  margin-right: -3px;
  padding: 5px 0;
  font-size: 32px;
}

/* Mobile Reviews - Carousel Mode */
.otg-reviews-grid {
  display: block;
  position: relative;
  overflow: hidden;
}

.otg-carousel-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
}

.otg-review-card {
  min-width: 100%;
  min-height: 280px;
  padding: 16px 14px 14px 14px;
}

.otg-review-header {
  gap: 2px !important;
  margin-bottom: 2px !important;
}

.otg-review-name {
  margin-bottom: 0 !important;
  line-height: 1 !important;
}

.otg-review-stars {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
}

.otg-review-text {
  font-size: 12px;
  line-height: 1.5;
  -webkit-line-clamp: 6;
  margin-top: 0 !important;
}

/* Show carousel controls on mobile */
.otg-carousel-arrow,
.otg-carousel-dots {
  display: flex;
}

.otg-carousel-arrow {
  position: absolute;
  bottom: 5px;
  background: rgba(220, 38, 38, 0.9);
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.3s ease;
}

.otg-carousel-arrow:hover {
  background: rgba(220, 38, 38, 1);
}

.otg-carousel-arrow-left {
  left: 50%;
  transform: translateX(calc(-100% - 75px));
}

.otg-carousel-arrow-right {
  right: 50%;
  transform: translateX(calc(100% + 75px));
}

.otg-carousel-dots {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  gap: 8px;
  z-index: 10;
}

.otg-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.4);
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.otg-carousel-dot.active {
  background: rgba(220, 38, 38, 1);
}

/* Mobile Services Page */
.otg-service-item {
  grid-template-columns: 1fr;
}

/* Mobile About Section */
.otg-about-primary {
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 60px;
}

.otg-about-secondary {
  grid-template-columns: 1fr;
  gap: 24px;
}

.otg-about-process-images {
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Mobile Homepage Sections - ALL SINGLE COLUMN */
.otg-how-steps {
  grid-template-columns: 1fr !important;
  gap: 24px;
}

.otg-credentials-grid {
  grid-template-columns: 1fr !important;
  gap: 24px;
}

.otg-pricing-grid {
  grid-template-columns: 1fr !important;
  gap: 24px;
}

.otg-tips-grid {
  grid-template-columns: 1fr !important;
  gap: 24px;
}

.otg-service-map-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px;
}

.otg-service-city-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px;
}

/* Mobile Footer */
.otg-footer-container {
  padding: 40px 20px 15px 20px;
}

.otg-footer-top {
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.otg-footer-left {
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0;
  gap: 24px;
}

.otg-footer-nav {
  grid-template-columns: 1fr 1fr;
  gap: 15px 20px;
  justify-content: start;
  margin-right: 0;
}

.otg-footer-nav a {
  font-size: clamp(14px, 0.875rem + 0.5vw, 18px) !important;
}

.otg-footer-contact a,
.otg-footer-location {
  font-size: clamp(14px, 0.875rem + 0.5vw, 18px) !important;
}

/* Floating Book Now Button - Mobile Only */
.otg-floating-book {
  position: fixed;
  right: 15px;
  top: 100px;
  z-index: 1000;
  display: block;
}

/* Hide on book-online page */
body.otg-booking-page .otg-floating-book {
  display: none;
}

.otg-floating-book-btn {
  width: 63px;
  height: 63px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-red) 0%, var(--color-primary-red-dark) 100%);
  color: var(--color-white);
  border: none;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  animation: pulse-float 2s ease-in-out infinite;
}

@keyframes pulse-float {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 6px 25px rgba(220, 38, 38, 0.6);
  }
}

.otg-floating-book-btn:hover {
  animation: none;
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.6);
}

.otg-floating-book-menu {
  position: absolute;
  right: 0;
  top: 80px;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 12px;
  min-width: 140px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.otg-floating-book-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.otg-floating-book-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  color: var(--color-text-dark);
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 6px;
  transition: all 0.3s ease;
  margin-bottom: 8px;
}

.otg-floating-book-menu a:last-child {
  margin-bottom: 0;
}

.otg-floating-book-menu a:hover {
  background: var(--color-light-gray);
  color: var(--color-primary-red);
}

.otg-floating-book-menu svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Mobile Service Pages */
.otg-service-page {
  padding-top: 75px;
}

.otg-service-page-content {
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 40px 20px;
}

.otg-service-columns {
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Mobile Packages Page */
.otg-packages-page {
  padding-top: 75px;
}

.otg-package-content {
  grid-template-columns: 1fr;
  gap: 24px;
  justify-items: center;
  text-align: center;
}

.otg-package-reverse {
  direction: ltr;
}

.otg-package-details {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.otg-service-details-container {
  text-align: center;
}

.otg-service-list {
  text-align: left;
  max-width: 100%;
}

/* Luxury Detailing, Ceramic Coating, Paint Corrections - Single Column */
.otg-package-content {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  justify-items: center !important;
  text-align: center !important;
}

.otg-package-image-box {
  width: 100%;
  max-width: 100%;
}

.otg-service-image-wrapper {
  max-width: 350px;
  width: 100%;
  aspect-ratio: 1 / 1 !important;
}

/* Page Main Title - Mobile */
.otg-page-main-title {
  font-size: 38px !important;
  letter-spacing: 0.1em !important;
  padding: 0 10px;
  word-wrap: break-word;
}

/* Service Package Titles - Mobile */
.otg-package-title {
  font-size: 28px !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2;
}

/* Mobile Add-ons Page */
.otg-addons-page {
  padding-top: 75px;
}

.otg-addons-grid {
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 0 20px;
}

/* Mobile Booking Page */
.otg-booking-section {
  padding: 24px 20px 48px 20px;
}

.otg-booking-title {
  font-size: 28px;
}

.otg-booking-subtitle {
  font-size: 14px;
}

/* Mobile Coming Soon Page */
.otg-coming-soon-page {
  padding-top: 75px;
}

.otg-coming-soon-container {
  padding: 0 20px;
}

.otg-coming-soon-content {
  padding: 30px 20px;
  border-width: 2px;
}

.otg-coming-soon-title {
  font-size: 28px;
}

.otg-coming-soon-badge {
  font-size: 18px;
  padding: 10px 25px;
}

/* Mobile Section Titles */
/* Mobile - All main section titles stay at 36px */
.otg-how-title,
.otg-pricing-title,
.otg-tips-title,
.otg-service-map-title,
.otg-credentials-title,
.otg-about-title {
  font-size: 36px !important;
}

/* Mobile Section Subtitles */
.otg-how-subtitle,
.otg-pricing-subtitle,
.otg-tips-subtitle,
.otg-service-map-subtitle {
  font-size: 16px;
  margin-bottom: 40px;
}

/* Mobile Section Padding - Standardized to 24px top/bottom */
.otg-how-it-works-section,
.otg-about-section,
.otg-pricing-section,
.otg-tips-section,
.otg-service-map-section {
  padding: 24px 20px !important;
}

/* Mobile Card Padding */
.otg-how-step,
.otg-pricing-card,
.otg-tip-content,
.otg-addon-card,
.otg-about-credentials {
  padding: 30px 20px;
}

/* Mobile Buttons */
.otg-how-button,
.otg-tips-button,
.otg-service-map-button {
  padding: 16px 30px;
  font-size: 16px;
}

/* Mobile City Items */
.otg-service-city-item {
  padding: 15px;
}

/* Container max-width for mobile */
.container {
  max-width: 100%;
  padding: 0 20px;
}

/* Mobile FAQ */
.otg-faq-section {
  padding: 24px 20px;
}

.otg-faq-title {
  font-size: 36px !important;
  margin-bottom: 40px;
}

/* Mobile Work/Gallery */
.otg-work-title {
  font-size: 28px;
}

/* Mobile Contact */
.otg-contact-text {
  padding: 25px 20px 0 20px;
}

.otg-contact-title {
  font-size: 28px;
}

/* Mobile Privacy/Terms */
.otg-privacy-container,
.otg-terms-container {
  padding: 24px 20px;
}

.otg-privacy-title,
.otg-terms-title {
  font-size: 28px;
}

/* Mobile Navigation Positioning */
.otg-nav {
  top: 75px;
}


/* ==========================================================================
   BOOKING PAGE STYLES (for Urable iframe integration)
   ========================================================================== */

.otg-booking-section {
  background: var(--color-light-gray);
  padding: 60px 40px 100px 40px;
  min-height: 80vh;
}

.otg-booking-container {
  max-width: 1400px;
  margin: 0 auto;
}

.otg-booking-title {
  text-align: center;
  font-size: 48px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
}

.otg-booking-subtitle {
  text-align: center;
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-medium);
  margin-bottom: 50px;
  letter-spacing: 0.05em;
  line-height: 1.05;
}

.otg-booking-iframe-container {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 2px solid var(--color-primary-red);
}

.otg-booking-iframe-container iframe {
  display: block;
  border: none;
}

.otg-booking-cta {
  max-width: 600px;
  margin: 40px auto;
  text-align: center;
  padding: 40px;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.otg-booking-cta p {
  font-size: 18px;
  color: var(--color-text-dark);
  margin-bottom: 25px;
  line-height: 1.6;
}

/* Custom Booking Placeholder Styles */
.otg-custom-booking-placeholder {
  max-width: 900px;
  margin: 40px auto;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--color-cyan);
  overflow: hidden;
}

.otg-placeholder-content {
  padding: 60px 50px;
  text-align: center;
}

.otg-placeholder-content h2 {
  font-size: 36px;
  font-weight: var(--font-weight-regular);
  color: var(--color-cyan);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.25;
}

.otg-placeholder-content p {
  font-size: 18px;
  line-height: 1.85;
  color: var(--color-text-dark);
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}

.otg-placeholder-content ul {
  list-style: none;
  padding: 0;
  margin: 30px 0;
  text-align: left;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.otg-placeholder-content li {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text-dark);
  padding-left: 30px;
  position: relative;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.otg-placeholder-content li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--color-cyan);
  font-weight: var(--font-weight-bold);
  font-size: 18px;
}

/* Mobile responsive - CONSOLIDATED INTO BREAKPOINT 2 & 3 ABOVE */

/* ==========================================================================
   SERVICE PAGE ANIMATIONS & ENHANCED STYLES
   ========================================================================== */

/* Page-level fade in animation */
.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Slide in from left (for image) */
.slide-in-left {
  animation: slideInLeft 1s ease-out forwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in from right (for content) */
.slide-in-right {
  animation: slideInRight 1s ease-out forwards;
  animation-delay: 0.2s;
  opacity: 0;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Enhanced image wrapper for service pages */
.otg-service-page-image-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  padding: 40px;
}

.otg-service-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 1;
}

.otg-service-image-wrapper:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(220, 38, 38, 0.3);
}

/* Image zoom effect on hover */
.otg-service-image-animated {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease;
  display: block;
}

.otg-service-image-wrapper:hover .otg-service-image-animated {
  transform: scale(1.1);
}

/* Image overlay effect */
.otg-service-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.85), rgba(44, 53, 57, 0.85));
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.otg-service-image-wrapper:hover .otg-service-image-overlay {
  opacity: 1;
}

.overlay-text {
  color: var(--color-white);
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  padding: 0 20px;
}

/* Section label fade animation */
.animate-fade {
  animation: fadeIn 0.6s ease-out forwards;
  animation-delay: 0.4s;
  opacity: 0;
}

/* Stagger animation for list items */
.stagger-animation {
  opacity: 1;
}

.stagger-animation .animate-item {
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
}

.stagger-animation .animate-item:nth-child(1) { animation-delay: 0.5s; }
.stagger-animation .animate-item:nth-child(2) { animation-delay: 0.6s; }
.stagger-animation .animate-item:nth-child(3) { animation-delay: 0.7s; }
.stagger-animation .animate-item:nth-child(4) { animation-delay: 0.8s; }
.stagger-animation .animate-item:nth-child(5) { animation-delay: 0.9s; }
.stagger-animation .animate-item:nth-child(6) { animation-delay: 1.0s; }
.stagger-animation .animate-item:nth-child(7) { animation-delay: 1.1s; }
.stagger-animation .animate-item:nth-child(8) { animation-delay: 1.2s; }
.stagger-animation .animate-item:nth-child(9) { animation-delay: 1.3s; }

/* Pulse animation for buttons */
.pulse-animation {
  animation: pulseButton 2s ease-in-out infinite;
}

@keyframes pulseButton {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(220, 38, 38, 0.6), 0 0 15px rgba(220, 38, 38, 0.4);
  }
}

.pulse-animation:hover {
  animation: none;
}

/* Service page wrapper */
.otg-service-page {
  background: var(--color-white);
  padding-top: 120px;
}

.otg-service-page-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  align-items: center;
  padding: 80px 40px;
}

.otg-service-page-details {
  display: flex;
  align-items: center;
  justify-content: center;
}

.otg-service-details-container {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
}

/* Two-column layout for service sections */
.otg-service-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 30px;
}

.otg-service-column {
  display: flex;
  flex-direction: column;
}

.otg-service-page-title {
  font-size: 42px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 30px;
  line-height: 1.25;
}

.otg-service-details-container .otg-service-description {
  font-size: 17px;
  line-height: 1.85;
  color: var(--color-text-dark);
  margin-bottom: 30px;
  letter-spacing: 0.05em;
}

.otg-service-details-container .otg-service-section-label {
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
  margin-bottom: 15px;
  margin-top: 25px;
}

.otg-service-details-container .otg-service-section-label:first-of-type {
  margin-top: 0;
}

.otg-service-details-container .otg-service-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.otg-service-details-container .otg-service-list li {
  font-size: 16px;
  line-height: 1.95;
  color: var(--color-text-dark);
  padding-left: 25px;
  position: relative;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.otg-service-details-container .otg-service-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  font-size: 20px;
  color: var(--color-primary-red);
  font-weight: var(--font-weight-regular);
}

.otg-service-details-container .otg-book-button {
  margin-top: 30px;
  align-self: flex-start;
}

.otg-service-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-medium);
  font-style: italic;
  margin-top: 20px;
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}

.otg-cure-notice {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-red);
  font-style: normal;
  background: #fff3f3;
  padding: 15px 20px;
  border-left: 4px solid var(--color-primary-red);
  border-radius: 4px;
  margin-top: 25px;
}

.otg-package-dark .otg-cure-notice {
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-cyan);
  border-left-color: var(--color-cyan);
}

.otg-package-duration {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-red);
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  line-height: 1.05;
}

/* Responsive adjustments for service pages - CONSOLIDATED INTO BREAKPOINT 2 & 3 ABOVE */

/* ==========================================================================
   INSIDE & OUT PACKAGES PAGE (TWO-SECTION LAYOUT)
   ========================================================================== */

.otg-packages-page {
  background: #F8F9FA;
  padding-top: 120px;
}

.otg-page-title-section {
  text-align: center;
  padding: 60px 40px 20px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.otg-page-main-title {
  font-size: 48px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  margin: 0 auto 15px auto;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
}

.otg-page-main-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--color-primary-red);
  transition: width 0.4s ease, transform 0.4s ease;
}

.otg-page-title-section:hover .otg-page-main-title::after {
  width: 120px;
}

.otg-package-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 40px 80px 40px;
}

.otg-package-light {
  background: #F8F9FA;
}

.otg-package-dark {
  background: var(--color-footer-background);
}

.otg-package-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1400px;
  width: 100%;
  align-items: center;
}

.otg-package-reverse {
  direction: rtl;
}

.otg-package-reverse > * {
  direction: ltr;
}

.otg-package-image-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.otg-package-details {
  display: flex;
  align-items: center;
  justify-content: center;
}

.otg-package-title {
  font-size: 42px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  line-height: 1.25;
}

.otg-package-dark .otg-package-title {
  color: var(--color-white);
}

.otg-package-duration {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-red);
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  line-height: 1.05;
}

.otg-package-dark .otg-package-duration {
  color: var(--color-cyan);
}

.otg-package-dark .otg-service-description,
.otg-package-dark .otg-service-section-label,
.otg-package-dark .otg-service-list li {
  color: var(--color-text-light);
}

.otg-benefits-list li::before {
  content: '';
  color: transparent;
}

/* ==========================================================================
   ADD-ONS PAGE STYLES
   ========================================================================== */

.otg-addons-page {
  background: var(--color-light-gray);
  padding-top: 120px;
  padding-bottom: 60px;
}

.otg-addons-header {
  text-align: center;
  padding: 60px 40px 40px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.otg-addons-header h1 {
  font-size: 48px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
}

.otg-addons-header p {
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  letter-spacing: 0.05em;
  line-height: 1.65;
}

.otg-addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.otg-addon-card {
  background: var(--color-white);
  border-radius: 8px;
  padding: 40px 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 2px solid transparent;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.otg-addon-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(220, 38, 38, 0.2);
  border-color: var(--color-primary-red);
}

.otg-addon-title {
  font-size: 28px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  line-height: 1.25;
}

.otg-addon-duration {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  letter-spacing: 0.05em;
  line-height: 1.05;
  margin-bottom: 10px;
}

.otg-addon-description {
  font-size: 17px;
  line-height: 1.85;
  color: var(--color-text-dark);
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  flex-grow: 1;
}

.otg-addon-card .otg-book-button {
  margin-top: auto;
  align-self: flex-start;
}

/* Responsive for add-ons page - CONSOLIDATED INTO BREAKPOINT 2 & 3 ABOVE */

/* ==========================================================================
   COMING SOON PAGE STYLES
   ========================================================================== */

.otg-coming-soon-page {
  background: linear-gradient(135deg, var(--color-light-gray) 0%, var(--color-white) 100%);
  padding-top: 180px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 60px;
}

.otg-coming-soon-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;
}

.otg-coming-soon-content {
  background: var(--color-white);
  border-radius: 12px;
  padding: 60px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border: 3px solid var(--color-primary-red);
  text-align: center;
}

.otg-coming-soon-title {
  font-size: 48px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.25;
}

.otg-coming-soon-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-primary-red), var(--color-primary-red-dark));
  color: var(--color-white);
  padding: 15px 40px;
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 50px;
  margin-bottom: 40px;
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

.otg-coming-soon-description {
  font-size: 20px;
  line-height: 1.85;
  color: var(--color-text-dark);
  margin-bottom: 50px;
  letter-spacing: 0.05em;
}

.otg-coming-soon-features {
  text-align: left;
  max-width: 600px;
  margin: 0 auto 50px auto;
  padding: 40px;
  background: var(--color-light-gray);
  border-radius: 8px;
  border-left: 5px solid var(--color-primary-red);
}

.otg-coming-soon-features h2 {
  font-size: 28px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
}

.otg-coming-soon-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.otg-coming-soon-features li {
  font-size: 18px;
  line-height: 2;
  color: var(--color-text-dark);
  padding-left: 30px;
  position: relative;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

.otg-coming-soon-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary-red);
  font-weight: var(--font-weight-bold);
  font-size: 22px;
}

.otg-coming-soon-cta {
  margin-top: 40px;
}

.otg-coming-soon-cta p {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  margin-bottom: 25px;
  letter-spacing: 0.05em;
}

/* Responsive for coming soon page - CONSOLIDATED INTO BREAKPOINT 2 & 3 ABOVE */

/* ==========================================================================
   NEW HOMEPAGE SECTIONS - HOW IT WORKS, CREDENTIALS, PRICING, TIPS, MAP
   ========================================================================== */

/* HOW IT WORKS SECTION */
.otg-how-it-works-section {
  background: #F8F9FA;
  padding: 80px 40px;
  position: relative;
}

.otg-how-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.otg-how-title {
  font-size: 36px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  margin: 0 auto 15px auto;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
}

.otg-how-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--color-primary-red);
}

.otg-how-subtitle {
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  letter-spacing: 0.05em;
  margin-bottom: 60px;
  line-height: 1.65;
}

.otg-how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}

.otg-how-step {
  background: var(--color-white);
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.6s ease forwards;
}

.otg-how-step:nth-child(1) { animation-delay: 0.1s; }
.otg-how-step:nth-child(2) { animation-delay: 0.2s; }
.otg-how-step:nth-child(3) { animation-delay: 0.3s; }
.otg-how-step:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.otg-how-step:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(220, 38, 38, 0.2);
}

.otg-how-step-number {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background: var(--color-primary-red);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  font-family: 'Oswald', sans-serif;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.otg-how-step-icon {
  color: var(--color-primary-red);
  margin: 20px auto 20px;
  width: 48px;
  height: 48px;
}

.otg-how-step-title {
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
}

.otg-how-step-description {
  font-size: 16px;
  color: #4B5563;
  line-height: 1.7;
  font-weight: var(--font-weight-regular);
}

.otg-how-cta {
  text-align: center;
}

.otg-how-button {
  display: inline-block;
  padding: 18px 40px;
  background: var(--color-primary-red);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 50px;
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.otg-how-button:hover {
  background: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

/* CREDENTIALS SECTION (within About) */
.otg-about-credentials {
  margin-top: 60px;
  padding: 60px 40px;
  background: #F8F9FA;
  border-radius: 12px;
}

.otg-credentials-title {
  font-size: 36px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  display: inline-block;
  width: 100%;
}

.otg-credentials-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--color-primary-red);
}

.otg-credentials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 30px;
}

.otg-credential-item {
  text-align: center;
  padding: 30px 20px;
  background: var(--color-white);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.otg-credential-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.15);
}

.otg-credential-icon {
  color: var(--color-primary-red);
  margin-bottom: 20px;
}

.otg-credential-item h4 {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.otg-credential-item p {
  font-size: 15px;
  color: #4B5563;
  line-height: 1.6;
}

/* PRICING COMPARISON SECTION */
.otg-pricing-section {
  background: var(--color-white);
  padding: 80px 40px;
  position: relative;
}

.otg-pricing-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.otg-pricing-title {
  font-size: 36px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  margin: 0 auto 15px auto;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
}

.otg-pricing-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--color-primary-red);
}

.otg-pricing-subtitle {
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  letter-spacing: 0.05em;
  margin-bottom: 60px;
  line-height: 1.65;
}

.otg-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}

.otg-pricing-card {
  background: var(--color-white);
  border: 2px solid #E5E7EB;
  border-radius: 16px;
  padding: 40px 30px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
}

.otg-pricing-card:hover {
  transform: translateY(-10px);
  border-color: var(--color-primary-red);
  box-shadow: 0 15px 40px rgba(220, 38, 38, 0.2);
}

.otg-pricing-card-featured {
  border-color: var(--color-primary-red);
  border-width: 3px;
  transform: scale(1.05);
  box-shadow: 0 10px 40px rgba(220, 38, 38, 0.15);
}

.otg-pricing-card-featured:hover {
  transform: translateY(-10px) scale(1.05);
}

.otg-pricing-card-title {
  font-size: 28px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
}

.otg-pricing-card-badge {
  display: inline-block;
  padding: 8px 20px;
  background: #F3F4F6;
  color: var(--color-text-dark);
  border-radius: 50px;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}

.otg-pricing-card-badge-featured {
  background: var(--color-primary-red);
  color: var(--color-white);
}

.otg-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.otg-pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  font-size: 16px;
  color: var(--color-text-dark);
  line-height: 1.6;
}

.otg-pricing-features li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary-red);
}

.otg-pricing-feature-disabled {
  opacity: 0.4;
}

.otg-pricing-feature-disabled svg {
  color: #9CA3AF;
}

.otg-pricing-button {
  display: block;
  width: 100%;
  padding: 16px 30px;
  background: var(--color-text-dark);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  transition: all 0.3s ease;
}

.otg-pricing-button:hover {
  background: #1F2937;
  transform: translateY(-2px);
}

.otg-pricing-button-featured {
  background: var(--color-primary-red);
}

.otg-pricing-button-featured:hover {
  background: #b91c1c;
}

.otg-pricing-note {
  text-align: center;
  margin-top: 40px;
  padding: 20px;
  background: #F9FAFB;
  border-radius: 8px;
}

.otg-pricing-note p {
  font-size: 16px;
  color: #6B7280;
  margin: 0;
  line-height: 1.6;
}

/* CAR CARE TIPS SECTION */
.otg-tips-section {
  background: #F8F9FA;
  padding: 80px 40px;
  position: relative;
}

.otg-tips-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.otg-tips-title {
  font-size: 36px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  margin: 0 auto 15px auto;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
}

.otg-tips-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--color-primary-red);
}

.otg-tips-subtitle {
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  letter-spacing: 0.05em;
  margin-bottom: 60px;
  line-height: 1.65;
}

.otg-tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}

.otg-tip-card {
  background: var(--color-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
}

.otg-tip-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(220, 38, 38, 0.2);
}

.otg-tip-image {
  position: relative;
  overflow: hidden;
  height: 250px;
}

.otg-tip-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.otg-tip-card:hover .otg-tip-image img {
  transform: scale(1.1);
}

.otg-tip-content {
  padding: 30px;
}

.otg-tip-category {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-primary-red);
  border-radius: 50px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
}

.otg-tip-card-title {
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  font-family: 'Oswald', sans-serif;
  line-height: 1.3;
  margin-bottom: 15px;
}

.otg-tip-excerpt {
  font-size: 15px;
  color: #4B5563;
  line-height: 1.7;
  margin-bottom: 20px;
}

.otg-tip-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary-red);
  text-decoration: none;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  transition: all 0.3s ease;
}

.otg-tip-link:hover {
  gap: 12px;
  color: #b91c1c;
}

.otg-tips-cta {
  text-align: center;
}

.otg-tips-button {
  display: inline-block;
  padding: 18px 40px;
  background: var(--color-primary-red);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 50px;
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.otg-tips-button:hover {
  background: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

/* SERVICE AREA MAP SECTION */
.otg-service-map-section {
  background: var(--color-white);
  padding: 80px 40px;
  position: relative;
}

.otg-service-map-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.otg-service-map-title {
  font-size: 36px;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-red);
  margin: 0 auto 15px auto;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
}

.otg-service-map-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--color-primary-red);
}

.otg-service-map-subtitle {
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  letter-spacing: 0.05em;
  margin-bottom: 60px;
  line-height: 1.65;
}

.otg-service-map-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
  text-align: left;
}

.otg-service-map-image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.otg-service-map-image img {
  width: 100%;
  height: auto;
  display: block;
}

.otg-service-map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.otg-service-pin {
  position: absolute;
  color: var(--color-primary-red);
  animation: pulse 2s ease-in-out infinite;
  cursor: pointer;
  pointer-events: all;
}

.otg-service-pin-bluffton {
  top: 50%;
  left: 50%;
}

.otg-service-pin-beaufort {
  top: 40%;
  left: 30%;
}

.otg-service-pin-hiltonhead {
  top: 60%;
  left: 70%;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

.otg-service-cities-title {
  font-size: 32px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}

.otg-service-city-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.otg-service-city-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  background: #F8F9FA;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.otg-service-city-item:hover {
  background: var(--color-white);
  box-shadow: 0 5px 20px rgba(220, 38, 38, 0.1);
  transform: translateX(5px);
}

.otg-service-city-item svg {
  flex-shrink: 0;
  color: var(--color-primary-red);
  margin-top: 2px;
}

.otg-service-city-info h4 {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

.otg-service-city-info p {
  font-size: 15px;
  color: #4B5563;
  line-height: 1.6;
  margin: 0;
}

.otg-service-coverage-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  background: rgba(220, 38, 38, 0.05);
  border-left: 4px solid var(--color-primary-red);
  border-radius: 8px;
  margin-top: 30px;
}

.otg-service-coverage-note svg {
  flex-shrink: 0;
  color: var(--color-primary-red);
  margin-top: 2px;
}

.otg-service-coverage-note p {
  font-size: 15px;
  color: #4B5563;
  line-height: 1.6;
  margin: 0;
}

.otg-service-map-cta {
  text-align: center;
}

.otg-service-map-button {
  display: inline-block;
  padding: 18px 40px;
  background: var(--color-primary-red);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 50px;
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.otg-service-map-button:hover {
  background: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

/* RESPONSIVE STYLES FOR NEW SECTIONS - CONSOLIDATED INTO BREAKPOINT 2, 3 & 5 ABOVE */

/* Responsive for packages page - CONSOLIDATED INTO BREAKPOINT 2, 3 & 4 ABOVE */

/* ==========================================================================
   MOBILE MENU SYSTEM
   ========================================================================== */

/*
 * NOTE: The @media query below intentionally has NO min-width boundary.
 * This allows it to apply to ALL screens 1000px and below (Breakpoints 1-4).
 * This is correct behavior for the mobile menu system, which activates at 1000px.
 * All recent mobile header changes (logo positioning, hamburger size, social spacing)
 * are preserved in this block.
 */

/* Hide mobile toggle by default (desktop) */
.otg-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-primary-red);
  font-size: 28px;
  cursor: pointer;
  padding: 5px 10px;
  transition: color 0.3s ease;
}

.otg-mobile-toggle:hover {
  color: var(--color-primary-red-light);
}

/* Hide mobile book link on desktop */
.otg-mobile-book-link {
  display: none;
}

/* Show mobile toggle and modify nav at 1000px and below */

/* ==========================================================================
   MOBILE MENU SYSTEM (Below 1025px)
   ========================================================================== */

/* Hide mobile toggle by default (desktop) */
.otg-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-primary-red);
  font-size: 28px;
  cursor: pointer;
  padding: 5px 10px;
  transition: color 0.3s ease;
}

.otg-mobile-toggle:hover {
  color: var(--color-primary-red-light);
}

/* Hide mobile book link on desktop */
.otg-mobile-book-link {
  display: none;
}

/* Mobile menu activates below 1025px (mobile + tablet) */
@media (max-width: 1024px) {
  /* Position hamburger on the right */
  .otg-mobile-toggle {
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 36px;
  }

  /* Position social icons to left of hamburger */
  .otg-right-section {
    position: absolute;
    right: 90px;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0;
  }

  .otg-social {
    gap: 20px;
  }

  /* Move logo to the left */
  .otg-logo {
    margin-left: 20px !important;
  }

  /* Hide desktop Book Online button */
  .otg-book-btn {
    display: none !important;
  }

  /* Mobile navigation overlay */
  .otg-nav {
    position: fixed !important;
    top: 105px;
    left: 0;
    width: 100%;
    background: var(--color-footer-background);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    display: block !important;
  }

  .otg-nav.active {
    transform: translateX(0);
  }

  .otg-nav-links {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 20px 0;
  }

  .otg-nav-links li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .otg-nav-links a {
    display: block;
    padding: 15px 30px;
    font-size: 16px !important;
  }

  .otg-nav-links a:hover {
    background: rgba(0, 212, 255, 0.1);
  }

  /* Show Book Online in mobile menu */
  .otg-mobile-book-link {
    display: block;
  }

  .otg-mobile-book-link a {
    background: var(--color-primary-red);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    text-align: center;
  }

  .otg-mobile-book-link a:hover {
    background: var(--color-primary-red-dark);
  }

  /* Dropdown adjustments for mobile */
  .otg-dropdown-menu {
    position: static;
    background: rgba(0,0,0,0.2);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .otg-dropdown.active .otg-dropdown-menu {
    max-height: 500px;
  }

  .otg-dropdown-menu li a {
    padding-left: 50px;
    font-size: 14px;
  }

  .otg-dropdown-toggle::after {
    content: ' ▼';
    font-size: 10px;
    margin-left: 8px;
  }

  .otg-dropdown.active .otg-dropdown-toggle::after {
    content: ' ▲';
  }
}

/* Adjust nav top position for mobile (75px header) */
@media (max-width: 767px) {
  .otg-nav {
    top: 75px !important;
  }

  /* 320px Header Positioning */
  .otg-logo {
    margin-left: 5px !important;
  }

  .otg-logo img {
    /* Fluid scaling: 75px at 320px → 95px at 767px */
    height: clamp(75px, 4.6875rem + 2.5vw, 95px) !important;
  }

  .otg-header.scrolled .otg-logo img {
    /* Fluid scaling: 75px at 320px → 95px at 767px */
    height: clamp(75px, 4.6875rem + 2.5vw, 95px) !important;
  }

  .otg-mobile-toggle {
    right: 5px !important;
    /* Fluid scaling: 38px at 320px → 48px at 767px (scales with header proportionally) */
    font-size: clamp(38px, 2.375rem + 1.25vw, 48px) !important;
  }

  .otg-right-section {
    /* Fluid scaling: move further right as viewport grows */
    right: clamp(57px, 3.5625rem + 3vw, 75px) !important;
    /* Fluid gap: increase spacing as viewport grows */
    gap: clamp(15px, 0.9375rem + 1.5vw, 25px) !important;
    top: calc(50% + 3px) !important;
  }

  .otg-social {
    /* Fluid gap between social icons */
    gap: clamp(15px, 0.9375rem + 1.5vw, 25px);
    /* Scale social icon size */
    font-size: clamp(20px, 1.25rem + 0.5vw, 24px);
  }

  .otg-social a {
    font-size: inherit !important;
  }

  /* Review Box Spacing - Move text closer to name */
  .otg-review-card {
    justify-content: flex-start !important;
  }

  .otg-review-header {
    gap: 2px !important;
    margin-bottom: 8px !important;
  }

  .otg-review-name {
    margin-bottom: 0 !important;
    line-height: 1 !important;
  }

  .otg-review-stars {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
  }

  .otg-review-text {
    margin-top: 0 !important;
    padding-top: 0 !important;
    -webkit-line-clamp: 9 !important;
    /* Fluid scaling within mobile breakpoint: 14px at 320px → 16px at 767px */
    font-size: clamp(14px, 0.875rem + 0.5vw, 16px) !important;
    line-height: 1.5 !important;
  }

  /* FAQ Section Spacing for 320px */
  .otg-faq-section {
    padding: 24px 20px 48px 20px !important;
  }

  /* Reviews Section Spacing for 320px */
  .otg-reviews-section {
    padding: 24px 20px 32px 20px !important;
  }

  /* Footer Spacing for 320px */
  .otg-footer-container {
    padding: 24px 20px 15px 20px !important;
  }

  /* Booking/Contact Page Spacing for 320px */
  .otg-booking-section {
    padding: 24px 20px 48px 20px !important;
  }

  /* Service Page Content Spacing for 320px */
  .otg-service-page-content {
    padding: 24px 20px !important;
    gap: 24px !important;
  }

  /* Tips and Service Map Sections Spacing for 320px */
  .otg-tips-section,
  .otg-service-map-section {
    padding: 24px 20px !important;
  }

  /* How It Works Steps Gap for 320px */
  .otg-how-steps {
    gap: 24px !important;
  }

  /* Pricing Grid Gap for 320px */
  .otg-pricing-grid {
    gap: 24px !important;
  }

  /* Tips Grid Gap for 320px */
  .otg-tips-grid {
    gap: 24px !important;
  }

  /* Service Map Content Gap for 320px */
  .otg-service-map-content {
    gap: 24px !important;
  }

  /* Footer Top Gap for 320px */
  .otg-footer-top {
    gap: 24px !important;
  }

  /* About Sections Gap for 320px */
  .otg-about-primary,
  .otg-about-secondary {
    gap: 24px !important;
  }

  /* About Credentials Section Spacing for 320px */
  .otg-about-credentials {
    padding: 24px 20px !important;
  }

  /* FAQ Section Additional Title Spacing for 320px */
  .otg-faq-title {
    margin-bottom: 24px !important;
  }

  /* Section Subtitle Spacing for 320px */
  .otg-how-subtitle,
  .otg-pricing-subtitle,
  .otg-tips-subtitle,
  .otg-service-map-subtitle {
    margin-bottom: 24px !important;
  }

  /* Coming Soon Content Spacing for 320px */
  .otg-coming-soon-content {
    padding: 24px 20px !important;
  }

  /* Privacy/Terms Container Spacing for 320px */
  .otg-privacy-container,
  .otg-terms-container {
    padding: 24px 20px !important;
  }

  /* Privacy/Terms Page Top Spacing for 320px */
  .otg-privacy-page,
  .otg-terms-page {
    padding-top: 75px !important;
  }

  /* Privacy/Terms Title Spacing for 320px */
  .otg-privacy-title,
  .otg-terms-title {
    font-size: 32px !important;
    margin-bottom: 12px !important;
  }

  /* Privacy/Terms Subtitle Spacing for 320px */
  .otg-privacy-subtitle,
  .otg-terms-subtitle {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  /* Privacy/Terms Section Title Spacing for 320px */
  .otg-privacy-section-title,
  .otg-terms-section-title {
    font-size: 22px !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
  }

  /* Privacy/Terms Intro/Section Spacing for 320px */
  .otg-privacy-intro,
  .otg-terms-intro,
  .otg-privacy-section,
  .otg-terms-section {
    margin-bottom: 24px !important;
  }

  /* Privacy/Terms Paragraph Spacing for 320px */
  .otg-privacy-intro p,
  .otg-terms-intro p,
  .otg-privacy-section p,
  .otg-terms-section p {
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
  }

  /* === Mobile Cart Notification System === */

  /* Notification Toast */
  .otg-cart-notification {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: var(--color-white);
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  .otg-cart-notification.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .otg-cart-notification svg {
    flex-shrink: 0;
  }

  /* Sticky View Cart Button */
  .otg-view-cart-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: linear-gradient(135deg, var(--color-primary-red) 0%, var(--color-primary-red-dark) 100%);
    color: var(--color-white);
    padding: 14px 28px;
    border-radius: 25px;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4);
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  .otg-view-cart-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .otg-view-cart-btn:hover {
    transform: translateX(-50%) translateY(0) scale(1.05);
    box-shadow: 0 6px 25px rgba(220, 38, 38, 0.6);
  }

  .otg-view-cart-btn:active {
    transform: translateX(-50%) translateY(0) scale(0.98);
  }
}


/* ==========================================================================
   TABLET BREAKPOINT (768px - 1024px)
   ========================================================================== */
@media (min-width: 768px) {
  /* Hide mobile-only elements on tablet and desktop */
  .otg-cart-notification,
  .otg-view-cart-btn {
    display: none !important;
  }

  /* Show floating book button on tablet */
  .otg-floating-book {
    display: block !important;
  }

  /* Container */
  .container {
    max-width: 768px;
    padding: 0 25px;
  }

  /* Header */
  .otg-header {
    height: 90px;
  }

  .otg-logo img {
    height: 99px;
  }

  /* Services Wrapper */
  .otg-services-wrapper {
    margin-top: 90px;
  }

  .otg-header.scrolled .otg-logo img {
    height: 97px;
  }

  /* Hero */
  .otg-hero-section {
    height: 600px;
    padding-top: 90px;
  }

  .otg-hero-container {
    padding: 0 25px;
  }

  .otg-hero-title {
    font-size: 52px;
  }

  .otg-hero-subtitle {
    font-size: 30px;
  }

  .otg-hero-description {
    font-size: 17px;
  }

  /* Reviews: 2 columns */
  .otg-reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  /* Review Box Alignment - Text at top */
  .otg-review-card {
    justify-content: flex-start !important;
  }

  .otg-review-header {
    margin-bottom: 12px !important;
  }

  /* Review Text Size for Tablet */
  .otg-review-text {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* Hide carousel controls on tablet+ */
  .otg-carousel-wrapper {
    display: contents;
  }

  .otg-carousel-arrow,
  .otg-carousel-dots {
    display: none;
  }

  /* About: 2 columns */
  .otg-about-primary {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .otg-about-secondary {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .otg-about-process-images {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  /* Homepage Sections */
  .otg-how-steps {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px;
  }

  .otg-credentials-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px;
  }

  .otg-pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px;
  }

  .otg-tips-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px;
  }

  .otg-service-map-content {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 40px;
  }

  .otg-service-city-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px;
  }

  /* Footer */
  .otg-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .otg-footer-left {
    flex-direction: row;
    align-items: center;
    margin-left: 20px;
  }

  .otg-footer-nav {
    grid-template-columns: auto auto;
    gap: 24px;
    justify-content: end;
    margin-right: 20px;
  }

  /* Services */
  .otg-service-item {
    grid-template-columns: 1fr 1fr;
  }

  .otg-service-page-content {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 60px 40px;
  }

  .otg-service-columns {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  /* Packages */
  .otg-package-content {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .otg-package-reverse {
    direction: rtl;
  }

  /* Service Image Wrapper - Tablet */
  .otg-service-image-wrapper {
    max-width: 600px !important;
    aspect-ratio: 1.5 / 1 !important;
  }

  /* Terms & Privacy Pages - Tablet */
  .otg-privacy-page,
  .otg-terms-page {
    padding-top: 75px !important;
  }

  .otg-privacy-title,
  .otg-terms-title {
    font-size: 48px !important;
  }

  /* Add-ons */
  .otg-addons-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  /* Section Titles - All at 36px */
  .otg-how-title,
  .otg-pricing-title,
  .otg-tips-title,
  .otg-service-map-title,
  .otg-about-title,
  .otg-credentials-title,
  .otg-reviews-title,
  .otg-faq-title {
    font-size: 36px;
  }

  /* Section Padding */
  .otg-how-it-works-section,
  .otg-pricing-section,
  .otg-tips-section,
  .otg-service-map-section {
    padding: 60px 40px;
  }

  /* Service page */
  .otg-service-page {
    padding-top: 105px;
  }

  .otg-packages-page,
  .otg-addons-page,
  .otg-coming-soon-page {
    padding-top: 105px;
  }

  /* Privacy/Terms Pages */
  .otg-privacy-container,
  .otg-terms-container {
    padding: 60px 40px;
  }
}


/* ==========================================================================
   DESKTOP BREAKPOINT (1025px - 1440px)
   ========================================================================== */
@media (min-width: 1025px) {
  /* Container */
  .container {
    max-width: 1200px;
    padding: 0 30px;
  }

  /* Service Area - Full width breakout on desktop */
  .otg-service-area {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }

  /* Header */
  .otg-header {
    height: 105px;
  }

  .otg-header-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  /* Services Wrapper */
  .otg-services-wrapper {
    margin-top: 105px;
  }

  .otg-logo {
    margin-left: 10px;
  }

  .otg-logo img {
    height: 103px;
  }

  .otg-header.scrolled .otg-logo img {
    height: 87px;
  }

  /* Hide floating book button on desktop */
  .otg-floating-book {
    display: none !important;
  }

  /* Navigation visible on desktop */
  .otg-nav {
    display: flex;
    grid-column: 2;
  }

  .otg-nav-links {
    flex-direction: row;
    gap: 18px;
  }

  .otg-nav-links a {
    font-size: 14px;
  }

  .otg-book-btn {
    display: inline-block;
    padding: 10px 16px;
    font-size: 14px;
  }

  .otg-right-section {
    margin-right: 20px;
    gap: 15px;
  }

  .otg-social {
    margin-right: 5px;
    gap: 15px;
  }

  /* Hero */
  .otg-hero-section {
    height: 700px;
    padding-top: 110px;
  }

  .otg-hero-container {
    padding: 0 30px;
  }

  .otg-hero-title {
    font-size: 64px;
  }

  .otg-hero-subtitle {
    font-size: 38px;
  }

  .otg-hero-description {
    font-size: 18px;
  }

  /* Reviews: 3 columns */
  .otg-reviews-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }

  /* About */
  .otg-about-primary {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }

  .otg-about-secondary {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }

  /* Homepage Sections - Multi-column */
  .otg-how-steps {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 48px;
  }

  .otg-credentials-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 48px;
  }

  .otg-pricing-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 48px;
  }

  .otg-pricing-card-featured {
    transform: scale(1);
  }

  .otg-pricing-card-featured:hover {
    transform: translateY(-10px) scale(1);
  }

  .otg-tips-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 48px;
  }

  .otg-service-map-content {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .otg-service-map-image {
    max-width: 1025px;
    margin: 0 auto;
  }

  /* Footer */
  .otg-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: 1200px;
  }

  .otg-footer-left {
    margin-left: 50px;
  }

  .otg-footer-nav {
    margin-right: 50px;
    gap: 30px;
  }

  /* Section Titles */
  /* Section Titles - All at 42px */
  .otg-how-title,
  .otg-pricing-title,
  .otg-tips-title,
  .otg-service-map-title,
  .otg-about-title,
  .otg-credentials-title,
  .otg-reviews-title,
  .otg-faq-title {
    font-size: 42px;
  }

  /* Section Padding */
  .otg-how-it-works-section,
  .otg-pricing-section,
  .otg-tips-section,
  .otg-service-map-section {
    padding: 80px 60px;
  }

  /* Service page */
  .otg-service-page {
    padding-top: 120px;
  }

  .otg-packages-page,
  .otg-addons-page {
    padding-top: 120px;
  }

  .otg-coming-soon-page {
    padding-top: 180px;
  }

  .otg-service-page-content {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding: 80px 60px;
  }

  /* Package Pages - Side-by-Side Layout with Fluid Scaling */
  .otg-package-content {
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(40px, 2.5rem + 1.5vw, 60px) !important; /* 40px at 1025px → 60px at 1440px */
    align-items: center !important;
    justify-items: start !important;
    text-align: left !important;
  }

  .otg-package-reverse {
    direction: rtl !important;
  }

  .otg-package-reverse > * {
    direction: ltr !important;
  }

  /* Package Title Scaling */
  .otg-package-title {
    font-size: clamp(36px, 2.25rem + 0.8vw, 42px) !important; /* 36px at 1025px → 42px at 1440px */
  }

  /* Package Duration Scaling */
  .otg-package-duration {
    font-size: clamp(16px, 1rem + 0.3vw, 18px) !important; /* 16px at 1025px → 18px at 1440px */
  }

  /* Service Description Scaling */
  .otg-service-description {
    font-size: clamp(15px, 0.9375rem + 0.3vw, 17px) !important; /* 15px at 1025px → 17px at 1440px */
    margin-bottom: clamp(25px, 1.5625rem + 0.5vw, 30px) !important; /* 25px → 30px */
  }

  /* Service List Scaling */
  .otg-service-list li {
    font-size: clamp(15px, 0.9375rem + 0.2vw, 16px) !important; /* 15px at 1025px → 16px at 1440px */
    line-height: 1.8 !important;
    margin-bottom: clamp(8px, 0.5rem + 0.3vw, 12px) !important; /* 8px → 12px */
  }

  /* Package Section Padding Scaling */
  .otg-package-section {
    padding: clamp(60px, 3.75rem + 1.5vw, 80px) clamp(30px, 1.875rem + 1vw, 40px) !important; /* Vertical: 60px → 80px, Horizontal: 30px → 40px */
  }

  /* Cities We Serve Title - Center */
  .otg-service-cities-title {
    text-align: center !important;
  }

  /* Cities We Serve - Equal width boxes with alignment */
  .otg-service-city-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important;
  }

  .otg-service-city-item {
    width: 450px; /* Fixed equal width for all boxes */
  }

  .otg-service-city-item:nth-child(odd) {
    justify-self: end; /* Right align 1st, 3rd, 5th items */
  }

  .otg-service-city-item:nth-child(even) {
    justify-self: start; /* Left align 2nd, 4th, 6th items */
  }

  /* Review Boxes - Lock size at 1025px width */
  .otg-review-card {
    max-width: 350px; /* Locks to perfect size at 1025px, prevents stretching */
    justify-content: flex-start !important; /* Text at top of box */
  }

  /* Review Text Size for Desktop - Fluid Scaling */
  .otg-review-text {
    font-size: clamp(15px, 0.9375rem + 0.2vw, 16px) !important; /* 15px at 1025px → 16px at 1440px */
    line-height: 1.7 !important;
  }

  .otg-review-header {
    margin-bottom: 12px !important;
  }

  /* Privacy/Terms Pages */
  .otg-privacy-page,
  .otg-terms-page {
    padding-top: 95px !important;
  }

  .otg-privacy-title,
  .otg-terms-title {
    font-size: 48px !important;
  }

  .otg-privacy-container,
  .otg-terms-container {
    padding: 80px 60px;
  }
}


/* ==========================================================================
   LARGE DESKTOP BREAKPOINT (1441px+)
   ========================================================================== */
@media (min-width: 1441px) {
  /* Container */
  .container {
    max-width: 1400px;
    padding: 0 40px;
  }

  /* Header */
  .otg-header {
    height: 105px;
  }

  /* Services Wrapper */
  .otg-services-wrapper {
    margin-top: 105px;
  }

  .otg-logo {
    margin-left: 10px;
  }

  .otg-logo img {
    height: 110px;
  }

  .otg-header.scrolled .otg-logo img {
    height: 94px;
  }

  .otg-nav-links {
    gap: 45px;
  }

  .otg-nav-links a {
    font-size: 16px;
  }

  .otg-book-btn {
    padding: 11px 32px;
    font-size: 16px;
  }

  .otg-right-section {
    margin-right: 20px;
    gap: 15px;
  }

  .otg-social {
    margin-right: 5px;
    gap: 15px;
  }

  /* Hero */
  .otg-hero-section {
    height: 900px;
    padding-top: 120px;
  }

  .otg-hero-container {
    padding: 0 40px;
  }

  .otg-hero-title {
    font-size: 72px;
  }

  .otg-hero-subtitle {
    font-size: 42px;
  }

  .otg-hero-description {
    font-size: 20px;
  }

  /* Reviews: 6 columns */
  .otg-reviews-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 60px;
  }

  /* Homepage Sections - Full multi-column */
  .otg-how-steps {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 60px;
  }

  .otg-credentials-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 60px;
  }

  .otg-pricing-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 60px;
  }

  .otg-pricing-card-featured {
    transform: scale(1.05);
  }

  .otg-pricing-card-featured:hover {
    transform: translateY(-10px) scale(1.05);
  }

  .otg-tips-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 60px;
  }

  .otg-service-map-content {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }

  .otg-service-city-list {
    flex-direction: column;
  }

  /* Section Titles - All at 48px */
  .otg-how-title,
  .otg-pricing-title,
  .otg-tips-title,
  .otg-service-map-title,
  .otg-about-title,
  .otg-credentials-title,
  .otg-reviews-title,
  .otg-faq-title {
    font-size: 48px;
  }

  /* Section Padding */
  .otg-how-it-works-section,
  .otg-pricing-section,
  .otg-tips-section,
  .otg-service-map-section {
    padding: 100px 0;
  }

  .otg-about-section {
    padding: 100px 0;
  }

  .otg-faq-section {
    padding: 100px 0 120px 0;
  }

  /* Services Page - Full width sections with centered content */
  .otg-service-item {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr minmax(auto, 650px) minmax(auto, 750px) 1fr;
    gap: 0;
    padding: 0;
  }

  .otg-service-1 .otg-service-image,
  .otg-service-3 .otg-service-image {
    grid-column: 2;
  }

  .otg-service-1 .otg-service-content,
  .otg-service-3 .otg-service-content {
    grid-column: 3;
  }

  .otg-service-2 .otg-service-image {
    grid-column: 3;
  }

  .otg-service-2 .otg-service-content {
    grid-column: 2;
  }

  .otg-service-image {
    max-width: 650px;
    justify-self: center;
    width: 100%;
  }

  .otg-service-content {
    max-width: 750px;
    justify-self: center;
    padding: 80px 40px;
    width: 100%;
  }

  .otg-service-content-inner {
    max-width: 600px;
  }

  /* Privacy/Terms Pages */
  .otg-privacy-container,
  .otg-terms-container {
    padding: 100px 0;
  }
}