/* ========================================================================
   RESPONSIVE.CSS
   Mobile-only responsive overrides for the Luxe Travelware website.
   This file is designed to work with the existing desktop styles in style.css
   without changing the desktop layout.

   Recommended viewport tag for each HTML file:
   <meta name="viewport" content="width=device-width, initial-scale=1">
   ======================================================================== */

/* ╔════════════════════════════════════════════════════════════════════════╗
   ║ TABLE OF CONTENTS:
   ║ 1. GLOBAL SAFETY RULES
   ║ 2. FEATURED SECTION (HOME PAGE)
   ║ 3. NAVIGATION, HEADER, AND LOGO
   ║ 4. PAGE CONTAINERS, HERO SECTIONS, AND TYPOGRAPHY
   ║ 5. GRID AND LAYOUT ADJUSTMENTS
   ║ 6. FORMS, SEARCH BARS, AND CTA AREAS
   ║ 7. CARDS, MEDIA, AND SECTION-SPECIFIC ELEMENTS
   ║ 8. TABLES
   ║ 9. FOOTER
   ║ 10. ACCESSIBILITY AND FOCUS
   ╚════════════════════════════════════════════════════════════════════════╝ */

/* ------------------------------------------------------------------------
   GLOBAL SAFETY RULES
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: 16px;
    line-height: 1.6;
  }

  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  :where(
    a,
    button,
    input,
    select,
    textarea,
    .nav-btn,
    .slide-cta,
    .pkg-btn,
    .spa-submit,
    .wb-cta,
    .offer-link,
    .view-all,
    .rm,
    .cs-btn,
    .prod-heart,
    .spa-bk
  ) {
    min-height: 24px;
  }

  :where(input, select, textarea) {
    width: 100%;
    font-size: 16px;
  }

  .terms-modal-overlay,
  .offer-modal-overlay {
    align-items: flex-start;
    padding: 12px 10px;
  }

  .terms-modal,
  .offer-modal {
    width: min(100%, 640px);
    max-height: calc(100dvh - 24px);
    padding: 22px 16px;
  }

  .terms-box {
    max-height: calc(100dvh - 170px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   HERO SLIDER SECTION (HOME PAGE) - PRIMARY FOCUS FOR MOBILE
   ════════════════════════════════════════════════════════════════════════════ */

/* Tablet (1024px - 768px): Hero slider adjustments */
@media (max-width: 1024px) {
  .hero-slider {
    height: 420px;
  }

  .slide-body {
    padding: 0 42px;
  }

  .slide-body h1 {
    font-size: 2.4rem;
    max-width: 520px;
  }

  .slide-body p {
    font-size: 0.92rem;
    max-width: 400px;
  }

  .s-arrow {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }

  .s-arrow.prev {
    left: 16px;
  }

  .s-arrow.next {
    right: 16px;
  }
}

/* Mobile (768px and below): Full hero slider responsive redesign */
@media (max-width: 768px) {
  /* ─── Hero Container ─── */
  .hero-slider {
    position: relative;
    height: 320px;
    overflow: hidden;
  }

  .slides-track {
    display: flex;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.18, 1);
  }

  .slide {
    min-width: 100%;
    position: relative;
    height: 100%;
  }

  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ─── Slide Overlay & Gradient ─── */
  .slide-ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(12, 7, 3, 0.78) 0%,
      rgba(12, 7, 3, 0.45) 50%,
      rgba(12, 7, 3, 0.12) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ─── Slide Body Container ─── */
  .slide-body {
    width: 100%;
    padding: 0 18px;
    max-width: 100%;
    text-align: center;
  }

  /* ─── Category Label ─── */
  .slide-cat {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .slide-cat::before {
    content: "";
    width: 18px;
    height: 1.5px;
    background: var(--gold);
  }

  /* ─── Hero Heading ─── */
  .slide-body h1 {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.4rem, 6vw, 2rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 10px;
    max-width: 100%;
  }

  /* ─── Hero Description ─── */
  .slide-body p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 100%;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ─── Call-to-Action Button ─── */
  .slide-cta {
    background: var(--accent);
    color: #fff;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    min-height: 44px;
    border: none;
    cursor: pointer;
  }

  .slide-cta:hover,
  .slide-cta:focus {
    background: var(--accent2);
  }

  .slide-cta:active {
    transform: scale(0.98);
  }

  /* ─── Navigation Arrows ─── */
  .s-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 0.95rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
  }

  .s-arrow:hover,
  .s-arrow:focus {
    background: var(--accent);
    border-color: var(--accent);
  }

  .s-arrow.prev {
    left: 10px;
  }

  .s-arrow.next {
    right: 10px;
  }

  /* ─── Navigation Dots ─── */
  .s-dots {
    display: none;
  }

  .s-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
  }

  .s-dot:hover {
    background: rgba(255, 255, 255, 0.7);
  }

  .s-dot.on {
    background: var(--gold);
    transform: scale(1.2);
  }

  /* ─── Slide Counter ─── */
  .slide-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 10;
  }
}

/* Mobile Extra Small (480px and below): Further optimizations */
@media (max-width: 480px) {
  .hero-slider {
    height: 280px;
  }

  .slide-body {
    padding: 0 16px;
  }

  .slide-body h1 {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
    margin-bottom: 8px;
  }

  .slide-body p {
    font-size: 0.8rem;
    margin-bottom: 10px;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }

  .slide-cat {
    margin-bottom: 6px;
    font-size: 0.55rem;
  }

  .slide-cat::before {
    width: 14px;
    height: 1px;
  }

  .slide-cta {
    padding: 10px 16px;
    font-size: 0.7rem;
    min-height: 40px;
  }

  .s-arrow {
    width: 40px;
    height: 40px;
    font-size: 0.85rem;
  }

  .s-arrow.prev {
    left: 8px;
  }

  .s-arrow.next {
    right: 8px;
  }

  .s-dots {
    display: none;
  }

  .s-dot {
    width: 6px;
    height: 6px;
  }

  .slide-counter {
    font-size: 0.65rem;
    bottom: 10px;
    right: 10px;
  }

  .terms-modal-overlay,
  .offer-modal-overlay {
    padding: 8px;
  }

  .terms-modal,
  .offer-modal {
    max-height: calc(100dvh - 16px);
    padding: 18px 14px;
    border-radius: 12px;
  }

  .terms-modal h3,
  .offer-modal h3 {
    font-size: 1.2rem;
  }

  .terms-summary,
  .offer-summary,
  #termsModalContent,
  .offer-message {
    font-size: 0.84rem;
    line-height: 1.65;
  }

  .terms-box {
    max-height: calc(100dvh - 156px);
    padding: 14px;
  }
}

/* ─── HERO SECTION COMPLETE ─── */



/* Mobile (768px and below): Featured cards fully responsive */
@media (max-width: 768px) {
  /* ─── Section Title Area ─── */
  .section .sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }

  .section .sec-ttl {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .section .sec-bar {
    width: 4px;
    height: 24px;
    flex-shrink: 0;
  }

  .section .sec-ttl h2 {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
    line-height: 1.2;
    margin: 0;
  }

  .section .sec-ttl h2 em {
    font-style: normal;
    font-weight: 700;
  }

  .section .view-all {
    font-size: 12px;
    padding: 8px 14px;
    min-height: 40px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ─── Featured Cards Grid ─── */
  .section .g4 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* ─── Featured Card Styling ─── */
  .section .card {
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: none;
  }

  /* Remove hover effects on mobile for better performance */
  .section .card:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-color: inherit;
  }

  /* ─── Card Image ─── */
  .section .card-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #f5f5f5;
  }

  /* ─── Card Body ─── */
  .section .card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    flex: 1;
  }

  /* ─── Tag Styling ─── */
  .section .tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    width: fit-content;
  }

  /* ─── Card Heading ─── */
  .section .card-body h2 {
    font-family: "Playfair Display", serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
  }

  /* ─── Card Description ─── */
  .section .card-body p {
    font-size: 15px;
    color: var(--ink-light);
    line-height: 1.55;
    margin: 0;
  }

  /* ─── Meta Information ─── */
  .section .art-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #999;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }

  .section .art-meta .dot {
    width: 3px;
    height: 3px;
    background: #ccc;
    border-radius: 50%;
  }

  .section .art-meta .views {
    color: var(--gold);
    font-weight: 800;
    letter-spacing: 0.01em;
  }

  /* ─── Call-to-Action Button ─── */
  .section .ritual-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    padding: 11px 16px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.2s ease;
    min-height: 44px;
    width: 100%;
    margin-top: 8px;
  }

  .section .ritual-link:hover,
  .section .ritual-link:focus {
    background: var(--accent2);
  }

  .section .ritual-link:active {
    transform: scale(0.98);
  }
}

/* Mobile Extra Small (480px and below): Further optimizations */
@media (max-width: 480px) {
  .section .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .section .view-all {
    display: none;
  }

  .section .card-body {
    padding: 14px;
    gap: 8px;
  }

  .section .card-img {
    height: 198px;
  }

  .section .card-body h2 {
    font-size: 0.98rem;
  }

  .section .card-body p {
    font-size: 14px;
  }

  .section .art-meta {
    font-size: 12px;
  }
}

/* ─── FEATURED SECTION COMPLETE ─── */

/* ------------------------------------------------------------------------
   NAVIGATION, HEADER, AND LOGO
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  .topbar,
  .topbar-ticker {
    display: none;
  }

  nav,
  .nav-inner {
    width: 100%;
  }

  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    flex-wrap: wrap;
  }

  .logo,
  .logo-img,
  .logo-sm {
    max-width: 140px;
    height: auto;
  }

  .nav-links {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
  }

  .nav-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 14px;
    text-align: center;
    border-radius: 8px;
  }

  .nav-btn {
    min-height: 44px;
    padding: 10px 16px;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .nav-inner {
    padding: 10px 14px;
  }

  .logo,
  .logo-img,
  .logo-sm {
    max-width: 124px;
  }
}

/* ------------------------------------------------------------------------
   PAGE CONTAINERS, HERO SECTIONS, AND TYPOGRAPHY
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  .section,
  .page-hero,
  .hero,
  .nl-band,
  .nl,
  .stats-strip,
  footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-hero {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .slide-body h1,
  .tour-hero-ov h1,
  .hero-ov h1,
  .hslide-body h1,
  .hero-content h1,
  .page-hero-body h1 {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    line-height: 1.15;
  }

  p,
  li,
  .card-body p,
  .art-body p,
  .ritual-body p,
  .spa-body p,
  .ft-desc,
  .promo-text p {
    font-size: 16px;
    line-height: 1.65;
  }
}

@media (max-width: 480px) {
  .section {
    margin-top: 6px;
  }
}

/* ------------------------------------------------------------------------
   GRID AND LAYOUT ADJUSTMENTS
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .g5,
  .g4,
  .stats-inner,
  .stats-in,
  .why-in,
  .ingr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pkg-grid,
  .dest-grid,
  .route-grid,
  .info-grid,
  .bpass-grid,
  .checklist-grid,
  .flight-fields,
  .hotel-fields,
  .contact-form-layout,
  .legal-layout,
  .info-cards-grid {
    grid-template-columns: 1fr;
  }

  .ft-in {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .g5,
  .g4,
  .g3,
  .g2,
  .split,
  .pkg-grid,
  .dest-grid,
  .route-grid,
  .info-grid,
  .bpass-grid,
  .checklist-grid,
  .stats-inner,
  .stats-in,
  .why-in,
  .ingr-grid,
  .testi-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hcard {
    grid-template-columns: 1fr;
  }

  .hcard img {
    height: 91px;
  }

  .ft-in {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 480px) {
  .card-body,
  .pkg-body,
  .prod-info,
  .art-body,
  .ritual-body,
  .spa-body {
    padding: 14px;
  }

  .card-img,
  .pkg-img img,
  .prod-img img,
  .art-card img,
  .ritual-img img,
  .spa-img img {
    height: 190px;
  }
}

/* ------------------------------------------------------------------------
   FORMS, SEARCH BARS, AND CTA AREAS
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  .nl-form,
  .spa-form,
  .search-box,
  .ferry-search,
  .ab-form,
  .form-row,
  .contact-form,
  .cta-strip-inner,
  .alert-banner,
  .wellness-banner,
  .promo-banner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    text-align: center;
  }

  .form-card,
  .spa-search-box,
  .sb-box,
  .promo-banner,
  .wellness-banner {
    padding: 18px 16px;
  }

  .sf,
  .form-group,
  .form-field {
    width: 100%;
    min-width: 0;
  }

  input,
  select,
  textarea {
    min-height: 44px;
    padding: 12px 14px;
  }

  label {
    font-size: 14px;
    line-height: 1.4;
  }

  .slide-body,
  .hslide-body {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ------------------------------------------------------------------------
   CARDS, MEDIA, AND SECTION-SPECIFIC ELEMENTS
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  .card,
  .pkg-card,
  .prod-card,
  .art-card,
  .ritual-card,
  .spa-card,
  .hcard,
  .sb-box {
    border-radius: 10px;
  }

  .card:hover,
  .pkg-card:hover,
  .prod-card:hover,
  .art-card:hover,
  .ritual-card:hover,
  .spa-card:hover,
  .hcard:hover {
    transform: none;
    box-shadow: none;
  }

  .testi-grid,
  .ingr-grid,
  .stats-inner,
  .stats-in {
    grid-template-columns: 1fr;
  }

  .wellness-banner::before {
    right: 12px;
    font-size: 4rem;
  }

  .ritual-img img,
  .spa-img img,
  .pkg-img img,
  .art-card img,
  .prod-img img {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .ritual-img img,
  .spa-img img,
  .pkg-img img,
  .art-card img,
  .prod-img img {
    height: 293px;
  }
}

/* ------------------------------------------------------------------------
   TABLES
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  .table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 600px;
  }

  th,
  td {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* ------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  .ft-social {
    flex-wrap: wrap;
    gap: 8px;
  }

  .ft-social a {
    width: 44px;
    height: 44px;
  }

  .ft-bot {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .ft-bot a {
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------------
   ACCESSIBILITY AND FOCUS
   ------------------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ------------------------------------------------------------------------
   SUBTLE LOAD ANIMATION
   ------------------------------------------------------------------------ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.fade {
  animation: fadeUp 0.6s ease both;
}

.fade-d1 {
  animation-delay: 0.1s;
}

.fade-d2 {
  animation-delay: 0.2s;
}

.fade-d3 {
  animation-delay: 0.3s;
}
@media (max-width: 1100px) {
  .pkg-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dest-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ft-in {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .nav-links,
  .topbar {
    display: none;
  }

  .testi-grid {
    grid-template-columns: 1fr;
  }

  .nl-form {
    flex-direction: column;
  }
  .search-box {
    flex-direction: column;
  }
  .tour-hero-ov h1 {
    font-size: 2rem;
  }
  .flight-hero {
    height: auto;
    min-height: unset;
  }
  .flight-hero img {
    position: absolute;
    inset: 0;
  }
  .flight-hero-ov {
    position: relative;
    padding: 60px 20px;
  }
  .flight-hero-ov h1 {
    font-size: 2rem;
  }
}

@media (max-width: 1100px) {
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ingr-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ft-in {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .why-in {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .g3,
  .g2,
  .split,
  .ingr-grid {
    grid-template-columns: 1fr;
  }

  .hcard {
    grid-template-columns: 120px 1fr;
  }

  .nav-links,
  .topbar {
    display: none;
  }

  .stats-in {
    grid-template-columns: repeat(2, 1fr);
  }

  .nl-form {
    flex-direction: column;
  }

  .slide-body h1 {
    font-size: 1.9rem;
  }

  .slide-body {
    padding: 0 28px;
  }
}

@media (max-width: 1100px) {
  .route-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ft-in {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .nav-links,
  .topbar {
    display: none;
  }

  .ferry-search {
    flex-direction: column;
  }

  .list-row {
    grid-template-columns: 1fr 1fr;
  }

  .nl-form {
    flex-direction: column;
  }

  .hero-ov h1 {
    font-size: 2rem;
  }
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ingr-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ft-in {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nav-links,
  .topbar {
    display: none;
  }

  .g3,
  .g2,
  .split {
    grid-template-columns: 1fr;
  }

  .hcard {
    grid-template-columns: 120px 1fr;
  }

  .nl-form {
    flex-direction: column;
  }

  .wellness-banner {
    flex-direction: column;
  }

  .hslide-body h1 {
    font-size: 2.1rem;
  }

  .hslide-body {
    padding: 0 28px;
  }

  .spa-form {
    flex-direction: column;
  }

  .ingr-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* FADE-IN ON LOAD */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.fade {
  animation: fadeUp 0.6s ease both;
}

.fade-d1 {
  animation-delay: 0.1s;
}

.fade-d2 {
  animation-delay: 0.2s;
}

.fade-d3 {
  animation-delay: 0.3s;
}

/* FADE-IN ON LOAD */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.fade {
  animation: fadeUp 0.6s ease both;
}

.fade-d1 {
  animation-delay: 0.1s;
}

.fade-d2 {
  animation-delay: 0.2s;
}

.fade-d3 {
  animation-delay: 0.3s;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ingr-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ft-in {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nav-links,
  .topbar {
    display: none;
  }

  .g3,
  .g2,
  .split {
    grid-template-columns: 1fr;
  }

  .hcard {
    grid-template-columns: 120px 1fr;
  }

  .nl-form {
    flex-direction: column;
  }

  .wellness-banner {
    flex-direction: column;
  }

  .hslide-body h1 {
    font-size: 2.1rem;
  }

  .hslide-body {
    padding: 0 28px;
  }

  .spa-form {
    flex-direction: column;
  }

  .ingr-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── 14. RESPONSIVE ────────────────────────────────── */

/* Tablet ≤ 1024px */
@media (max-width: 900px) {
  .contact-form-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .faq-layout {
    grid-template-columns: 1fr;
  }
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .faq-sidebar,
  .legal-sidebar {
    position: static;
  }

  .faq-cat-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .faq-cat-link {
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .faq-cat-link:hover,
  .faq-cat-link.active {
    border-left: none;
    border-bottom-color: var(--site-orange);
  }

  .ft-in {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* Mobile ≤ 720px */
@media (max-width: 720px) {
  .fashion-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }

  .fashion-slider .cs-track {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    padding: 0 16px;
    scroll-padding: 0 16px;
  }
  .page-hero {
    padding: 3rem 1.25rem;
  }
  .info-cards-grid {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .form-card {
    padding: 1.75rem 1.25rem;
  }
  .map-section {
    height: 260px;
  }
  .cta-strip-inner {
    flex-direction: column;
    text-align: center;
  }
  .ft-in {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .ft-bot {
    flex-direction: column;
    text-align: center;
  }
  .ft-bot a {
    margin-left: 0.5rem;
  }
}

/* ─── 14. RESPONSIVE ────────────────────────────────── */

/* Tablet ≤ 900px */
@media (max-width: 900px) {
  .contact-form-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .faq-layout {
    grid-template-columns: 1fr;
  }
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .faq-sidebar,
  .legal-sidebar {
    position: static;
  }

  .faq-cat-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .faq-cat-link {
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .faq-cat-link:hover,
  .faq-cat-link.active {
    border-left: none;
    border-bottom-color: var(--site-orange);
  }

  .ft-in {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* Mobile ≤ 720px */
@media (max-width: 720px) {
  .nav-links {
    display: none;
  }
  .page-hero {
    position: relative;
    height: 200px;
    overflow: hidden;
    padding: 3rem 1.25rem;
  }

  .page-hero-ov {
    background: linear-gradient(
      to bottom,
      rgba(80, 0, 80, 0.72) 0%,
      rgba(40, 0, 40, 0.5) 100%
    );
    align-items: flex-end;
  }

  .page-hero-body {
    padding: 0 2px 4px;
    max-width: 100%;
  }

  .breadcrumb {
    font-size: 0.68rem;
    margin-bottom: 8px;
  }

  .page-hero-body h1 {
    font-size: clamp(1.7rem, 8vw, 2.15rem);
    line-height: 1.08;
    margin-bottom: 10px;
  }

  .page-hero-body p {
    font-size: 0.9rem;
    max-width: 100%;
    line-height: 1.55;
  }

  .page-hero img {
    object-position: center top;
  }
  .info-cards-grid {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .form-card {
    padding: 1.75rem 1.25rem;
  }
  .map-section {
    height: 260px;
  }
  .cta-strip-inner {
    flex-direction: column;
    text-align: center;
  }
  .ft-in {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .ft-bot {
    flex-direction: column;
    text-align: center;
  }
  .ft-bot a {
    margin-left: 0.5rem;
  }
}

/* ─── 14. RESPONSIVE ────────────────────────────────── */

/* Tablet ≤ 900px */
@media (max-width: 900px) {
  .contact-form-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .faq-layout {
    grid-template-columns: 1fr;
  }

  .legal-layout {
    grid-template-columns: 1fr;
  }

  .faq-sidebar,
  .legal-sidebar {
    position: static;
    margin: -10px;
  }

  .faq-cat-list {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .faq-cat-link {
    border-left: none;
    border-bottom: 2px solid transparent;
  }

  .faq-cat-link:hover,
  .faq-cat-link.active {
    border-left: none;
    border-bottom-color: var(--site-orange);
  }

  .ft-in {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* Mobile ≤ 720px */
@media (max-width: 720px) {
  .nav-links {
    display: none;
  }

  .page-hero {
    padding: 3rem 1.25rem;
  }

  .info-cards-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-card {
    padding: 1.75rem 1.25rem;
  }

  .map-section {
    height: 260px;
  }

  .cta-strip-inner {
    flex-direction: column;
    text-align: center;
  }

  .ft-in {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .ft-bot {
    flex-direction: column;
    text-align: center;
  }

  .ft-bot a {
    margin-left: 0.5rem;
  }
}

/* FADE ANIMATIONS */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade {
  animation: fadeUp 0.65s ease both;
}
.fd1 {
  animation-delay: 0.1s;
}
.fd2 {
  animation-delay: 0.2s;
}
.fd3 {
  animation-delay: 0.3s;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .g4,
  .bpass-grid,
  .dest-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .stats-in {
    grid-template-columns: repeat(3, 1fr);
  }
  .flight-fields,
  .hotel-fields {
    grid-template-columns: 1fr 1fr;
  }
  .ft-in {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .nav-links,
  .topbar-ticker {
    display: none;
  }
  .g3,
  .g2,
  .split,
  .checklist-grid {
    grid-template-columns: 1fr;
  }
  .hcard {
    grid-template-columns: 110px 1fr;
    height: 100%;
    width: auto;
  }
  .nl-form,
  .ab-form {
    flex-direction: column;
  }
  .alert-banner {
    flex-direction: column;
  }
  .hero-content h1 {
    font-size: 2.3rem;
  }
  .stats-in {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero {
    padding: 44px 20px 0;
  }
  .flight-fields,
  .hotel-fields {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   FASHION & ACCESSORIES SECTION (HOME PAGE) - CAROUSEL RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */

/* Tablet (1024px and below): Show 4-5 products */
@media (max-width: 1024px) {
  .cs-track {
    gap: 14px;
  }

  .cs-track .prod-card-1 {
    min-width: calc(20% - 11px) !important;
  }

  .cs-btn.prev {
    left: -25px;
  }

  .cs-btn.next {
    right: -25px;
  }
}

/* Mobile (768px and below): Fashion carousel fully responsive */
@media (max-width: 768px) {
  /* ─── Section Title Area ─── */
  .section:has(> .sec-head .sec-ttl h2:contains("Fashion")) .sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }

  /* ─── Carousel Wrapper ─── */
  .cs-wrap {
    position: relative;
    padding: 0 48px;
  }

  /* ─── Track Container ─── */
  .cs-track {
    gap: 10px;
    scroll-behavior: smooth;
  }

  /* ─── Product Cards - Mobile Carousel View ─── */
  .cs-track .prod-card-1 {
    min-width: calc(50% - 5px) !important;
  }

  /* ─── Navigation Buttons ─── */
  .cs-btn {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
    background: var(--white);
    border: 1.5px solid var(--border);
    color: var(--ink);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    /* min-height: 44px; */
    /* display: none; */
  }

  .cs-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }

  .cs-btn.prev {
    left: 8px;
  }

  .cs-btn.next {
    right: 8px;
  }

  /* ─── Product Card Styling ─── */
  .prod-card-1 {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
  }

  /* Remove hover effects on mobile */
  .prod-card-1:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  /* ─── Product Image ─── */
  .prod-img {
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  .prod-img img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #f5f5f5;
  }

  /* ─── Product Badge ─── */
  .prod-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    z-index: 2;
  }

  /* ─── Product Heart Button ─── */
  .prod-heart {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
  }

  .prod-heart:hover {
    background: #fee;
    border-color: var(--accent);
  }

  /* ─── Product Info ─── */
  .prod-info {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }

  /* ─── Product Brand ─── */
  .prod-brand {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #aaa;
  }

  /* ─── Product Title ─── */
  .prod-info h3 {
    font-family: "Playfair Display", serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ─── Product Price ─── */
  .prod-price {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
  }

  .prod-price .now {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
  }

  .prod-price .was {
    font-size: 0.78rem;
    color: #bbb;
    text-decoration: line-through;
  }
}

/* Mobile Extra Small (480px and below): Further optimizations */
@media (max-width: 480px) {
  /* ─── Carousel Wrapper ─── */
  .cs-wrap {
    padding: 0 42px;
  }

  /* ─── Product Cards - Mostly single card view ─── */
  .cs-track .prod-card-1 {
    min-width: calc(80% - 2px) !important;
  }

  /* ─── Navigation Buttons - Smaller ─── */
  /* .cs-btn {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
  } */

  .cs-btn.prev {
    left: 4px;
  }

  .cs-btn.next {
    right: 4px;
  }

  /* ─── Track Gap ─── */
  .cs-track {
    gap: 8px;
  }

  /* ─── Product Info - Tighter ─── */
  .prod-info {
    padding: 10px;
    gap: 4px;
  }

  /* ─── Product Title - Smaller ─── */
  .prod-info h3 {
    font-size: 0.88rem;
    line-clamp: 1;
    -webkit-line-clamp: 1;
  }

  /* ─── Product Brand - Smaller ─── */
  .prod-brand {
    font-size: 0.62rem;
  }

  /* ─── Product Price - Smaller ─── */
  .prod-price .now {
    font-size: 0.85rem;
  }

  .prod-price .was {
    font-size: 0.74rem;
  }

  /* ─── Badge sizing ─── */
  .prod-badge {
    font-size: 0.56rem;
    padding: 2px 7px;
    top: 8px;
    left: 8px;
  }

  /* ─── Heart button sizing ─── */
  .prod-heart {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
    top: 8px;
    right: 8px;
  }
}

/* ─── FASHION & ACCESSORIES SECTION COMPLETE ─── */

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER - MOBILE-FIRST RESPONSIVE DESIGN
   ════════════════════════════════════════════════════════════════════════════
   
   CSS-Only Footer Component optimized for mobile screens
   - Mobile-first approach (base styles apply to small screens)
   - Stacked vertical layout for mobile devices
   - Touch-friendly interactive elements (min 44px height)
   - Media query breakpoint at 768px for larger screens
   - Semantic HTML with meaningful class names
   ════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   BASE FOOTER STYLES (Mobile-First - applies to all devices by default)
   ───────────────────────────────────────────────────────────────────────── */

footer {
  /* Container styling - compact padding for mobile to save screen space */
  background-color: var(--white);
  border-top: 1px solid var(--border);
  padding: 16px 12px 12px;

  /* Ensure footer stays within viewport */
  width: 100%;
  box-sizing: border-box;

  /* Center align footer content on mobile */
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER INNER WRAPPER (.ft-in) - Main Content Container
   ───────────────────────────────────────────────────────────────────────── */

.ft-in {
  /* Mobile-first: stack all sections vertically in a single column */
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;

  /* Center align all footer sections on mobile */
  align-items: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER LOGO & BRANDING SECTION
   ───────────────────────────────────────────────────────────────────────── */

.ft-logo {
  /* Brand name - compact size for mobile */
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  margin: 0;
  margin-bottom: 2px;
  color: var(--ink);
}

.ft-logo span {
  /* Accent color for brand highlight */
  color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER DESCRIPTION TEXT
   ───────────────────────────────────────────────────────────────────────── */

.ft-desc {
  /* Company tagline/description - readable but compact */
  font-size: 0.7rem;
  color: var(--ink-light);
  line-height: 1.3;
  margin: 0;
  margin-top: 2px;
  padding: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER SOCIAL MEDIA ICONS
   ───────────────────────────────────────────────────────────────────────── */

.ft-social {
  /* Icon container - flexible row layout for social icons */
  display: flex;
  gap: 5px;
  margin-top: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.ft-social a {
  /* Individual social media icon button */
  width: 32px;
  height: 32px;
  background-color: var(--ink);
  color: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  text-decoration: none;
  transition: background-color 0.2s ease;

  /* Touch-friendly minimum height for mobile */
  min-height: 40px;
  min-width: 40px;

  /* Center icon content */
  cursor: pointer;
}

.ft-social a:hover,
.ft-social a:focus {
  /* Interactive feedback - change color on hover/focus */
  background-color: var(--accent);
  outline: 2px solid rgba(168, 78, 35, 0.3);
  outline-offset: 2px;
}

.ft-social a:active {
  /* Tactile feedback - slight scale down on click */
  transform: scale(0.95);
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER COLUMN SECTIONS (.ft-col) - Link Groups
   ───────────────────────────────────────────────────────────────────────── */

.ft-col {
  /* Individual footer column - each contains a link group */
  padding: 0;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.ft-col:last-of-type {
  /* Remove border from last column to avoid bottom clutter */
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER COLUMN HEADING (.ft-col h4)
   ───────────────────────────────────────────────────────────────────────── */

.ft-col h4 {
  /* Section heading - uppercase, small, prominent */
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  margin-bottom: 4px;
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER COLUMN LINK LIST (.ft-col ul, .ft-col li)
   ───────────────────────────────────────────────────────────────────────── */

.ft-col ul {
  /* List container - reset default list styles */
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ft-col li {
  /* List item - compact margin */
  margin: 0;
  margin-bottom: 2px;
}

.ft-col li:last-child {
  /* Remove margin from last item */
  margin-bottom: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   HAMBURGER MENU - MOBILE NAVIGATION
   ════════════════════════════════════════════════════════════════════════════ */

/* Mobile (768px and below): Show hamburger menu */
@media (max-width: 768px) {
  .nav-inner {
    position: relative;
    overflow: visible;
  }

  /* ─── Hamburger Button Styles ─── */
  .hamburger-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000;
    gap: 6px;
  }

  .hamburger-line {
    width: 24px;
    height: 2.5px;
    background-color: var(--ink);
    transition: all 0.3s ease;
    transform-origin: center;
  }

  /* Hamburger to X animation */
  .hamburger-toggle.active .hamburger-line-top {
    transform: rotate(45deg) translateY(11px);
  }

  .hamburger-toggle.active .hamburger-line-middle {
    opacity: 0;
    transform: translateX(-10px);
  }

  .hamburger-toggle.active .hamburger-line-bottom {
    transform: rotate(-45deg) translateY(-11px);
  }

  /* ─── Mobile Menu Styles ─── */
  .nav-links {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background-color: var(--white);
    flex-direction: column !important;
    display: flex !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height 0.3s ease,
      opacity 0.3s ease;
    z-index: 999;
    border-bottom: 1px solid var(--border);
  }

  .hamburger-toggle.active ~ .nav-links {
    max-height: 500px;
    opacity: 1;
  }

  .nav-links li {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    margin: 0;
  }

  .nav-links li:last-child {
    border-bottom: none;
  }

  .nav-links a {
    display: block;
    padding: 8px 0;
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent; /* Remove mobile tap highlight */
  }

  .nav-links a:hover,
  .nav-links a:active,
  .nav-links a.act {
    color: var(--accent);
    background: transparent !important;
  }
}

/* Desktop (769px and above): Hide hamburger, show normal nav */
@media (min-width: 769px) {
  .hamburger-toggle {
    display: none !important;
  }

  .nav-links {
    position: static !important;
    display: flex !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    border-bottom: none !important;
  }

  .nav-links li {
    padding: 0 !important;
    border-bottom: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER COLUMN LINKS (.ft-col a)
   ───────────────────────────────────────────────────────────────────────── */

.ft-col a {
  /* Footer link styling - readable, interactive */
  font-size: 0.72rem;
  color: var(--ink-light);
  text-decoration: none;
  transition: color 0.2s ease;

  /* Touch-friendly minimum height and padding */
  display: inline-block;
  min-height: 36px;
  padding: 3px 0;
  line-height: 1.5;

  /* Ensure clickable area meets accessibility requirements */
  cursor: pointer;
}

.ft-col a:hover,
.ft-col a:focus {
  /* Interactive state - highlight on hover/focus */
  color: var(--accent);
}

.ft-col a:focus-visible {
  /* Keyboard accessibility - show outline for keyboard navigation */
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ft-col a:active {
  /* Tactile feedback - slight color change on click */
  color: var(--accent2);
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER BOTTOM BAR (.ft-bot) - Copyright & Legal Links
   ───────────────────────────────────────────────────────────────────────── */

.ft-bot {
  /* Bottom footer section - copyright and legal links */
  max-width: 100%;
  margin: 0 auto;
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;

  /* Flex column layout - stack items vertically on mobile */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;

  /* Typography - small, muted color */
  font-size: 0.68rem;
  color: #999;
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER BOTTOM BAR LINKS (.ft-bot a)
   ───────────────────────────────────────────────────────────────────────── */

.ft-bot a {
  /* Legal/copyright links - small but accessible */
  color: #999;
  text-decoration: none;
  margin-left: 0;
  transition: color 0.2s ease;

  /* Touch-friendly minimum sizing */
  display: inline-block;
  min-height: 32px;
  padding: 3px 0;
  font-size: 0.68rem;
  line-height: 1.4;
}

.ft-bot a:hover,
.ft-bot a:focus {
  /* Interactive state - highlight on interaction */
  color: var(--accent);
}

.ft-bot a:focus-visible {
  /* Keyboard accessibility outline */
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   SEPARATOR ELEMENTS (.ft-bot .dot)
   ───────────────────────────────────────────────────────────────────────── */

.ft-bot .dot {
  /* Hide separator dots on mobile for cleaner appearance */
  display: none;
}

/* ═════════════════════════════════════════════════════════════════════════
   TABLET/DESKTOP MEDIA QUERY BREAKPOINT (768px and above)
   ═════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  /* ─────────────────────────────────────────────────────────────────────
     TABLET+ FOOTER CONTAINER
     ───────────────────────────────────────────────────────────────────── */

  footer {
    /* Increase padding for larger screens */
    padding: 20px 16px 16px;

    /* Reset text alignment for tablet+ */
    text-align: left;
  }

  /* ─────────────────────────────────────────────────────────────────────
     TABLET+ FOOTER INNER GRID - Multi-column layout
     ───────────────────────────────────────────────────────────────────── */

  .ft-in {
    /* Switch to multi-column grid layout for tablet/desktop */
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 24px;
    margin-bottom: 20px;
    align-items: start;

    /* Reset center alignment from mobile */
    text-align: left;
  }

  /* ─────────────────────────────────────────────────────────────────────
     TABLET+ FOOTER LOGO - Larger size
     ───────────────────────────────────────────────────────────────────── */

  .ft-logo {
    /* Larger logo for desktop */
    font-size: 1.4rem;
    margin-bottom: 8px;
  }

  /* ─────────────────────────────────────────────────────────────────────
     TABLET+ FOOTER DESCRIPTION
     ───────────────────────────────────────────────────────────────────── */

  .ft-desc {
    /* More readable font size on larger screens */
    font-size: 0.78rem;
    line-height: 1.55;
    margin-top: 6px;
  }

  /* ─────────────────────────────────────────────────────────────────────
     TABLET+ SOCIAL ICONS
     ───────────────────────────────────────────────────────────────────── */

  .ft-social {
    /* Slightly larger spacing on tablet/desktop */
    gap: 8px;
    margin-top: 10px;
  }

  .ft-social a {
    /* Larger social icons for desktop */
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
    min-height: 44px;
    min-width: 44px;
  }

  /* ─────────────────────────────────────────────────────────────────────
     TABLET+ FOOTER COLUMNS - Remove bottom borders, add spacing
     ───────────────────────────────────────────────────────────────────── */

  .ft-col {
    /* Remove borders on desktop - cleaner look with grid columns */
    border-bottom: none;
    padding: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* ─────────────────────────────────────────────────────────────────────
     TABLET+ COLUMN HEADINGS - Larger text
     ───────────────────────────────────────────────────────────────────── */

  .ft-col h4 {
    /* More prominent headings on desktop */
    font-size: 0.68rem;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
  }

  /* ─────────────────────────────────────────────────────────────────────
     TABLET+ COLUMN LINKS - Larger, more readable
     ───────────────────────────────────────────────────────────────────── */

  .ft-col a {
    /* More readable link text on desktop */
    font-size: 0.82rem;
    min-height: 40px;
    padding: 8px 0;
  }

  .ft-col li {
    /* More spacing between items on desktop */
    margin-bottom: 8px;
  }

  /* ─────────────────────────────────────────────────────────────────────
     TABLET+ FOOTER BOTTOM BAR - Horizontal layout
     ───────────────────────────────────────────────────────────────────── */

  .ft-bot {
    /* Switch to horizontal layout for copyright/legal links */
    flex-direction: row;
    justify-content: center;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    gap: 16px;
    font-size: 0.76rem;
  }

  /* ─────────────────────────────────────────────────────────────────────
     TABLET+ FOOTER BOTTOM LINKS - Horizontal spacing
     ───────────────────────────────────────────────────────────────────── */

  .ft-bot a {
    /* Horizontal spacing for desktop links */
    margin-left: 12px;
    font-size: 0.76rem;
    min-height: 40px;
    padding: 8px 0;
  }

  .ft-bot a:first-child {
    /* Remove left margin from first link */
    margin-left: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   LARGER DESKTOP BREAKPOINT (1024px and above)
   ───────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  footer {
    /* Additional padding for very large screens */
    padding: 28px 24px 20px;
  }

  .ft-in {
    /* Wider gap between columns on large screens */
    grid-template-columns: 2.5fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 28px;
    max-width: 1320px;
  }

  .ft-logo {
    /* Larger logo for desktop */
    font-size: 1.55rem;
    margin-bottom: 14px;
  }

  .ft-desc {
    /* Better readability on large screens */
    font-size: 0.83rem;
    line-height: 1.78;
    padding-top: 20px;
  }

  .ft-social {
    margin-top: 18px;
  }

  .ft-col h4 {
    /* Consistent sizing with original design */
    font-size: 0.72rem;
    margin-bottom: 16px;
  }

  .ft-col a {
    /* Desktop-ready link sizing */
    font-size: 0.95rem;
    min-height: 44px;
    padding: 10px 0;
  }

  .ft-col li {
    margin-bottom: 9px;
  }

  .ft-bot {
    /* Large screen bottom bar styling */
    max-width: 1320px;
    margin: 0 auto;
    padding-top: 22px;
    gap: 10px;
    font-size: 1rem;
  }

  .ft-bot a {
    min-height: 44px;
    padding: 10px 0;
    font-size: 1rem;
  }
}

/* ─── FOOTER SECTION COMPLETE ─── */

/* ------------------------------------------------------------------------
   MISSING GRIDS RESPONSIVE (FASHION & ACCESSORIES)
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .prod-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* Style Grid (Style Guides & Lookbooks) */
  .style-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .style-card img {
    height: 240px;
  }

  /* Products Grid */
  .prod-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Editor Accessory Picks */
  .acc-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .acc-card img {
    height: 220px;
  }

  /* Tour & Packages Hero Section */
  .tour-hero {
    height: auto;
    min-height: unset;
  }
  .tour-hero img {
    position: absolute;
    inset: 0;
  }
  .tour-hero-ov {
    position: relative;
    padding: 60px 20px;
  }
  .tour-hero-ov h1 {
    font-size: 2.2rem;
  }

  /* Tour Search Box Stack */
  .search-box {
    align-items: stretch;
    padding: 20px;
    gap: 12px;
  }
  .search-btn,
  .sbtn {
    width: 100%;
    margin-top: 8px;
  }
}

@media (max-width: 480px) {
  .style-card img {
    height: 200px;
  }
  .acc-card img {
    height: 190px;
  }

  /* Small Mobile Adjustments for Tour Hero */
  .tour-hero-ov h1 {
    font-size: 1.8rem;
  }
  .search-box {
    padding: 16px;
  }

  .flight-hero-ov h1 {
    font-size: 1.8rem;
  }
  .flight-hero .search-box {
    padding: 16px;
  }

  .brand-content-area .hcard img {
    height: 80px;
    width: auto;
  }

  .brand-content-area .art-body {
    padding: 14px;
  }

  .brand-content-area .art-body h3 {
    font-size: 0.98rem !important;
  }

  .brand-content-area .art-body p {
    font-size: 13px !important;
  }
}

/* ------------------------------------------------------------------------
   FERRIES HERO RESPONSIVE
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Specifically targeting single-image heroes to prevent breaking sliders */
  .hero:not(:has(.hero-slides)) {
    height: auto;
  }

  /* ─── Hero Container Mobile Optimization ─── */
  .hero {
    height: 340px;
    overflow: hidden;
  }

  .hero > img {
    position: absolute;
    inset: 0;
  }

  /* Health & Beauty Slider Fix for Mobile */
  .hero-slides {
    height: 340px;
  }

  .hero-dots {
    display: none !important;
  }

  /* Health & Beauty Slider Responsive Adjustments */
  .hslide-body {
    padding: 0 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .hslide-eyebrow {
    justify-content: center;
    margin-bottom: 10px;
    font-size: 0.64rem;
  }
  .hslide-body h1 {
    font-size: clamp(1.6rem, 5.5vw, 2rem);
    max-width: 100%;
    margin-inline: auto;
    margin-bottom: 10px;
    line-height: 1.1;
  }
  .hslide-body p {
    font-size: 0.82rem;
    max-width: 100%;
    margin-inline: auto;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero-cta {
    padding: 12px 22px;
    font-size: 0.8rem;
    width: 100%;
    max-width: 220px;
    display: inline-block;
  }
  .hero-arrow {
    width: 42px;
    height: 42px;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.2);
  }
  .hero-arrow.prev {
    left: 10px;
  }
  .hero-arrow.next {
    right: 10px;
  }
  .hero-ov {
    position: relative;
    padding: 50px 20px;
  }
  .hero-ov h1 {
    font-size: 2rem;
  }
  .hero-ov p {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  /* Ferry Search Box Stack */
  .ferry-search {
    align-items: stretch;
    padding: 16px;
    gap: 10px;
  }
  .ferry-search .sf {
    width: 100%;
  }

  /* Unified Grid Stack for Featured Stories & Popular Routes */
  .g4,
  .route-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Synchronize Card Views on Mobile */
  .card,
  .route-card {
    border-radius: 10px;
  }

  .card img,
  .route-card img {
    height: 220px;
  }
  .card-body,
  .route-body {
    padding: 20px;
  }
  .card-body h2,
  .route-body h3 {
    font-size: 1.25rem;
    font-family: "Playfair Display", serif;
  }
}

@media (max-width: 480px) {
  .hero-ov h1 {
    font-size: 1.6rem;
  }
  .hero-ov {
    padding: 40px 16px;
  }
  .ferry-search {
    padding: 12px;
    gap: 8px;
  }

  /* Health & Beauty Extra-Small Mobile Optimization */
  .hero,
  .hero-slides {
    height: 300px;
  }

  .hslide {
    height: 100%;
  }

  .hslide img {
    height: 100%;
    object-fit: cover;
  }

  .hero-dots {
    display: none !important;
  }

  .hslide-body {
    padding: 0 16px;
  }

  .hslide-eyebrow {
    margin-bottom: 8px;
    font-size: 0.6rem;
  }

  .hslide-body h1 {
    font-size: clamp(1.4rem, 5vw, 1.6rem);
    margin-bottom: 6px;
  }

  .hslide-body p {
    font-size: 0.78rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
  }

  .hero-cta {
    padding: 10px 20px;
    font-size: 0.75rem;
    max-width: 200px;
  }

  /* Small Mobile Unified Card View */
  .card img,
  .route-card img {
    height: 190px;
  }
  .card-body,
  .route-body {
    padding: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   TICKER RESPONSIVE - Mobile (768px and below)
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .ticker-wrap {
    padding: 9px 16px;
    gap: 14px;
    justify-content: flex-start;
    align-items: center; /* Force vertical center */
  }

  .ticker-label {
    display: inline-block; /* Show label like laptop view */
    font-size: 0.62rem;
    padding: 2px 8px;
    letter-spacing: 0.1em;
  }

  .ticker-track {
    display: flex;
    align-items: center; /* Center items vertically within the track */
    gap: 32px;
    animation: tick 30s linear infinite;
    width: auto;
    justify-content: flex-start;
  }

  .ticker-track a {
    font-size: 0.78rem;
    font-weight: 500;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   TICKER RESPONSIVE - Extra Small Mobile (480px and below)
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .ticker-wrap {
    padding: 8px 12px;
    gap: 10px;
    justify-content: flex-start;
    align-items: center; /* Force vertical center */
  }

  .ticker-label {
    font-size: 0.58rem;
    padding: 2px 6px;
    letter-spacing: 0.08em;
  }

  .ticker-track {
    display: flex;
    align-items: center; /* Center items vertically within the track */
    gap: 24px;
    animation: tick 32s linear infinite;
    width: auto;
    justify-content: flex-start;
  }

  .ticker-track a {
    font-size: 0.74rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   PRIVACY POLICY PAGE - RESPONSIVE STYLING FOR ALL DEVICES
   ════════════════════════════════════════════════════════════════════════════ */

/* Desktop (1024px and above): Privacy Policy full layout */
@media (min-width: 1025px) {
  /* ─── PAGE HERO SECTION ─── */
  .page-hero--legal {
    padding: 120px 40px !important;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
  }

  .page-hero--legal h1 {
    font-size: 3rem !important;
    max-width: 100%;
  }

  /* ─── LEGAL LAYOUT - SIDE-BY-SIDE ─── */
  .legal-layout {
    display: grid !important;
    grid-template-columns: minmax(min-content, 500px) minmax(1, 1fr) !important;
    gap: 1px;
    align-items: start;
  }

  .legal-sidebar {
    position: sticky;
    top: calc(68px + 20px);
    width: 200px;
  }

  .legal-body {
    width: 100%;
  }
}

/* Tablet (768px - 1024px): Privacy Policy tablet layout */
@media (max-width: 1024px) and (min-width: 769px) {
  /* ─── PAGE HERO SECTION ─── */
  .page-hero--legal {
    padding: 100px 32px !important;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
  }

  .page-hero--legal h1 {
    font-size: 2.4rem !important;
    max-width: 100%;
  }

  /* ─── LEGAL LAYOUT - STACK BUT WITH BETTER SPACING ─── */
  .legal-layout {
    display: block !important;
    margin: 0;
    padding: 0;
  }

  .legal-sidebar {
    position: relative;
    width: auto;
    margin-bottom: 40px;
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    order: -1;
  }

  .legal-body {
    width: auto;
  }

  .legal-section-block h2 {
    font-size: 1.5rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   CONTACT US PAGE - RESPONSIVE STYLING FOR ALL DEVICES
   ════════════════════════════════════════════════════════════════════════════ */

/* Desktop (1024px and above): Contact Us full layout */
@media (min-width: 1025px) {
  /* ─── PAGE HERO SECTION ─── */
  .page-hero-1 {
    padding: 120px 40px !important;
    min-height: 400px;
    text-align: center;
    background: var(--cream) !important;
  }

  .page-hero-inner-1 {
    max-width: 1000px !important;
    margin: 0 auto !important;
  }

  .page-hero-title-1 {
    font-size: 3.2rem !important;
    margin-bottom: 16px;
  }

  .page-hero-sub-1 {
    font-size: 1.2rem !important;
  }

  /* ─── INFO CARDS SECTION ─── */
  .info-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
  }

  .info-card-1 {
    padding: 32px 24px !important;
    border-radius: 12px;
    transition: all 0.3s ease;
  }

  .info-card-1:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  }

  .info-card-icon {
    font-size: 2.4rem;
    margin-bottom: 16px;
  }

  .info-card-1 h3 {
    font-size: 1.2rem;
  }

  /* ─── CONTACT FORM LAYOUT ─── */
  .contact-form-layout {
    display: grid !important;
    grid-template-columns: 1fr 1.5fr !important;
    gap: 50px !important;
    align-items: start;
  }

  .form-editorial {
    padding-top: 0;
  }

  .form-editorial-title {
    font-size: 2.2rem !important;
    margin-bottom: 16px;
  }

  .form-card {
    padding: 40px !important;
  }

  .form-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Tablet (768px - 1024px): Contact Us tablet layout */
@media (max-width: 1024px) and (min-width: 769px) {
  /* ─── PAGE HERO SECTION ─── */
  .page-hero-1 {
    padding: 100px 32px !important;
    min-height: 360px;
  }

  .page-hero-inner-1 {
    max-width: 900px !important;
  }

  .page-hero-title-1 {
    font-size: 2.6rem !important;
    margin-bottom: 14px;
  }

  .page-hero-sub-1 {
    font-size: 1.1rem !important;
  }

  /* ─── INFO CARDS SECTION ─── */
  .info-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
  }

  .info-card-1 {
    padding: 28px 22px !important;
    border-radius: 10px;
  }

  .info-card-icon {
    font-size: 2.2rem;
    margin-bottom: 14px;
  }

  .info-card-1 h3 {
    font-size: 1.15rem;
  }

  /* ─── CONTACT FORM LAYOUT ─── */
  .contact-form-layout {
    display: grid !important;
    grid-template-columns: 1fr 1.2fr !important;
    gap: 40px !important;
    align-items: start;
  }

  .form-editorial-title {
    font-size: 1.9rem !important;
    margin-bottom: 14px;
  }

  .form-card {
    padding: 32px !important;
  }

  .form-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   PRIVACY POLICY PAGE - COMPREHENSIVE MOBILE RESPONSIVENESS (768px & below)
   ════════════════════════════════════════════════════════════════════════════ */

/* Mobile (768px and below): Privacy-Policy full responsive redesign */
@media (max-width: 768px) {
  /* ─── PAGE HERO SECTION ─── */
  .page-hero--legal {
    padding: 40px 16px 35px;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
    position: relative;
    overflow: hidden;
  }

  .page-hero--legal h1 {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.8rem, 6vw, 2.2rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin: 0;
    max-width: 90%;
  }

  /* ─── LEGAL LAYOUT - STACK ON MOBILE ─── */
  .legal-layout {
    display: block;
    margin: 0;
    padding: 0;
  }

  /* ─── LEGAL SIDEBAR (Table of Contents) ─── */
  .legal-sidebar {
    position: relative;
    width: 100%;
    margin-bottom: 24px;
    padding: 16px;
    background: #f9f9f9;
    border: 1px solid var(--border);
    border-radius: 8px;
    order: -1;
  }

  .legal-sidebar h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: "Playfair Display", serif;
  }

  /* ─── TABLE OF CONTENTS LIST ─── */
  .legal-toc {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .legal-toc li {
    margin: 0;
  }

  .legal-toc a {
    display: block;
    font-size: 0.8rem;
    padding: 8px 12px;
    color: var(--accent);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .legal-toc a:hover,
  .legal-toc a:focus {
    background: rgba(168, 78, 35, 0.08);
    border-left-color: var(--accent);
    padding-left: 16px;
  }

  .legal-toc a.active {
    background: rgba(168, 78, 35, 0.15);
    border-left-color: var(--accent);
    color: var(--ink);
    font-weight: 600;
  }

  /* ─── LEGAL BODY CONTENT ─── */
  .legal-body {
    width: 100%;
    padding: 0;
  }

  .legal-intro-box {
    margin-bottom: 22px;
    padding: 18px 16px;
  }

  .legal-section-block {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
  }

  .legal-section-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* ─── LEGAL SECTION HEADINGS ─── */
  .legal-section-block h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.3rem, 5vw, 1.7rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 14px 0;
    line-height: 1.2;
    padding-top: 16px;
  }

  .legal-section-block h3 {
    font-family: "Playfair Display", serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink-light);
    margin: 16px 0 10px 0;
    line-height: 1.2;
  }

  /* ─── LEGAL SECTION BODY TEXT ─── */
  .legal-section-block p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-light);
    margin: 0 0 14px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .legal-section-block p:last-child {
    margin-bottom: 0;
  }

  /* ─── LEGAL SECTION LISTS ─── */
  .legal-section-block ul,
  .legal-section-block ol {
    margin: 12px 0 16px 0;
    padding-left: 24px;
    list-style-position: outside;
  }

  .legal-section-block ul li,
  .legal-section-block ol li {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-light);
  }

  .legal-section-block ul li:last-child,
  .legal-section-block ol li:last-child {
    margin-bottom: 0;
  }

  .legal-section-block ul ul,
  .legal-section-block ol ol {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  /* ─── LEGAL SECTION BLOCKQUOTES ─── */
  .legal-section-block blockquote {
    margin: 16px 0;
    padding: 14px 16px;
    border-left: 4px solid var(--accent);
    background: rgba(168, 78, 35, 0.05);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-light);
  }

  .legal-section-block blockquote p {
    margin: 0;
  }

  /* ─── LEGAL SECTION EMPHASIS ─── */
  .legal-section-block strong {
    font-weight: 700;
    color: var(--ink);
  }

  .legal-section-block em {
    font-style: italic;
    color: var(--accent);
  }

  /* ─── LEGAL TABLES ─── */
  .legal-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
  }

  .legal-section-block table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
    font-size: 0.9rem;
  }

  .legal-section-block thead {
    background: var(--accent);
    color: #fff;
  }

  .legal-section-block th {
    padding: 12px;
    text-align: left;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--border);
  }

  .legal-section-block td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    color: var(--ink-light);
    line-height: 1.5;
  }

  .legal-section-block tbody tr:last-child td {
    border-bottom: none;
  }

  .legal-section-block tbody tr:hover {
    background: rgba(168, 78, 35, 0.03);
  }

  /* ─── CONTACT CARD ─── */
  .legal-contact-card {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px;
    margin: 20px 0;
    text-align: center;
  }

  .legal-contact-card h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px 0;
  }

  .legal-contact-card p {
    font-size: 15px;
    color: var(--ink);
    margin: 0 0 8px 0;
    line-height: 1.5;
  }

  .legal-contact-card a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
  }

  .legal-contact-card a:hover {
    color: var(--accent2);
    text-decoration: underline;
  }

  /* ─── CTA STRIP SECTION ─── */
  .cta-strip {
    background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
    padding: 32px 16px;
    margin: 40px -16px -16px -16px;
    text-align: center;
  }

  .cta-strip-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-content: center;
    max-width: 100%;
  }

  .cta-strip h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.4rem, 5vw, 1.8rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px 0;
    line-height: 1.2;
  }

  .cta-strip p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 12px 0;
    line-height: 1.5;
  }

  .cta-strip-btn {
    background: var(--white);
    color: var(--accent);
    padding: 13px 28px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .cta-strip-btn:hover,
  .cta-strip-btn:focus {
    background: var(--cream);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .cta-strip-btn:active {
    transform: translateY(0);
  }

  /* ─── SECTION ANCHOR LINKS ─── */
  .legal-section-block a:not(.cta-strip-btn) {
    color: var(--accent);
    text-decoration: underline;
    transition: color 0.2s ease;
  }

  .legal-section-block a:not(.cta-strip-btn):hover,
  .legal-section-block a:not(.cta-strip-btn):focus {
    color: var(--accent2);
  }
}

/* Mobile Extra Small (480px and below): Further optimizations */
@media (max-width: 480px) {
  /* ─── PAGE HERO ─── */
  .page-hero--legal {
    padding: 32px 14px 28px;
    min-height: 240px;
  }

  .page-hero--legal h1 {
    font-size: clamp(1.5rem, 5vw, 1.8rem);
  }

  /* ─── LEGAL SIDEBAR ─── */
  .legal-sidebar {
    padding: 14px;
    margin-bottom: 20px;
  }

  .legal-sidebar h3 {
    font-size: 0.85rem;
    margin-bottom: 10px;
  }

  .legal-toc {
    gap: 6px;
  }

  .legal-toc a {
    font-size: 0.75rem;
    padding: 6px 10px;
  }

  /* ─── LEGAL BODY ─── */
  .legal-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
  }

  .legal-intro-box {
    margin-bottom: 18px;
    padding: 16px;
  }

  .legal-section-block {
    margin-bottom: 20px;
    padding-bottom: 16px;
  }

  .legal-section-block h2 {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    margin: 0 0 12px 0;
    padding-top: 12px;
  }

  .legal-section-block h3 {
    font-size: 0.95rem;
    margin: 12px 0 8px 0;
  }

  .legal-section-block p {
    font-size: 15px;
    margin: 0 0 12px 0;
  }

  .legal-section-block ul,
  .legal-section-block ol {
    margin: 10px 0 12px 0;
    padding-left: 20px;
  }

  .legal-section-block ul li,
  .legal-section-block ol li {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .legal-section blockquote {
    margin: 12px 0;
    padding: 12px 14px;
    font-size: 0.9rem;
  }

  /* ─── LEGAL TABLES ─── */
  .legal-table-wrap {
    margin: 12px 0;
  }

  .legal-section-block table {
    font-size: 0.8rem;
    min-width: 450px;
  }

  .legal-section-block th {
    padding: 10px;
  }

  .legal-section-block td {
    padding: 10px;
  }

  /* ─── CONTACT CARD ─── */
  .legal-contact-card {
    padding: 14px;
    margin: 16px 0;
  }

  .legal-contact-card h4 {
    font-size: 0.8rem;
    margin-bottom: 8px;
  }

  .legal-contact-card p {
    font-size: 14px;
    margin-bottom: 6px;
  }

  /* ─── CTA STRIP ─── */
  .cta-strip {
    padding: 24px 14px;
    margin: 32px -14px -14px -14px;
  }

  .cta-strip h2 {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    margin-bottom: 8px;
  }

  .cta-strip p {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .cta-strip-btn {
    padding: 11px 22px;
    font-size: 0.75rem;
    min-height: 40px;
  }
}

/* ─── PRIVACY POLICY PAGE COMPLETE ─── */

/* ════════════════════════════════════════════════════════════════════════════
   REGION CAROUSEL (FERRIES PAGE) - MOBILE RESPONSIVENESS
   ════════════════════════════════════════════════════════════════════════════ */

/* Tablet (1024px and below): Region carousel adjustments */
@media (max-width: 1024px) {
  .region-card {
    min-width: 180px !important;
  }

  .cs-btn.prev {
    left: -20px;
    display: none;
  }

  .cs-btn.next {
    right: -20px;
    display: none;
  }
}

/* Mobile (768px and below): Region carousel fully responsive */
@media (max-width: 768px) {
  /* ─── Carousel Wrapper - Remove Padding for Fullwidth ─── */
  .cs-wrap {
    padding: 0 !important;
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    overflow: hidden;
  }

  /* ─── Region Cards - Full Viewport Width on Mobile ─── */
  .region-card {
    min-width: 100vw !important;
    height: 240px;
    margin: 0;
  }

  /* ─── Track - Full Width Scrolling ─── */
  #regCS {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  .region-card {
    scroll-snap-align: center;
  }
}

/* Mobile Extra Small (480px and below): Further optimizations */
@media (max-width: 480px) {
  /* ─── Region Cards - Reduce Height on Small Mobile ─── */
  .region-card {
    min-width: 100vw !important;
    height: 220px;
  }

  /* ─── Region Label - Smaller ─── */
  .region-ov span {
    font-size: 0.9rem;
  }
}

/* ─── REGION CAROUSEL COMPLETE ─── */

/* ════════════════════════════════════════════════════════════════════════════
   ABOUT US PAGE - RESPONSIVE STYLING FOR ALL DEVICES
   ════════════════════════════════════════════════════════════════════════════ */

/* Desktop (1024px and above): About page full layout */
@media (min-width: 1025px) {
  /* ─── About Page Hero ─── */
  .page-hero--about {
    padding: 120px 40px !important;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .page-hero-inner {
    max-width: 800px !important;
  }

  .hero-eyebrow-2 {
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .page-hero-title {
    font-size: 3.2rem !important;
    margin: 16px 0 20px 0;
    line-height: 1.1;
  }

  .page-hero-sub {
    font-size: 1.1rem !important;
    line-height: 1.6;
    margin: 0;
  }

  .hero-bg-pattern {
    opacity: 0.4 !important;
  }

  /* ─── About Description Section ─── */
  .about-desc {
    padding: 60px 40px !important;
  }

  .container {
    /* display: flex; */
    /* flex-direction: row ; */
    /* gap: 50px; */
    align-items: flex-start;
    position: relative;
  }

  .left-image {
    width: 45% !important;
    flex-shrink: 0;
  }

  .left-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }

  .right-desc {
    width: 55% !important;
  }

  .right-desc p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 16px;
    color: var(--ink-light);
  }

  /* Scope layout tightening to About section only (desktop) */
  .about-section .about-desc {
    max-width: 1320px;
    margin: 0 auto;
  }

  .about-section .container {
    display: flex !important;
    align-items: stretch;
    gap: 48px;
  }

  .about-section .left-image {
    width: 44% !important;
    min-height: 520px;
    border-radius: 14px;
    overflow: hidden;
  }

  .about-section .left-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .about-section .right-desc {
    width: 56% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .about-section .why-grid {
    margin: 22px 0 10px;
  }

  /* ─── Why Choose Us Section ─── */
  .why-choose-us {
    text-align: center;
    margin: 50px 0 40px 0;
  }

  .why-choose-us h2 {
    font-size: 2rem;
    margin-bottom: 16px;
  }

  /* ─── Why Grid Cards ─── */
  .why-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin-bottom: 40px;
  }

  .why-card {
    background: var(--white);
    padding: 32px 24px;
    border-radius: 12px;
    border: 1px solid var(--border);
    text-align: center;
    transition: all 0.3s ease;
  }

  .why-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    transform: translateY(-6px);
    border-color: var(--accent);
  }

  .why-card h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: var(--accent);
    font-weight: 700;
  }

  .why-card p {
    font-size: 0.95rem;
    color: var(--ink-light);
    margin: 0;
    line-height: 1.6;
  }

  /* ─── Stats Section ─── */
  .stats-section {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 28px !important;
    padding: 60px 40px !important;
  }

  .stat-box {
    background: linear-gradient(135deg, var(--gold-lt) 0%, var(--blush) 100%);
    padding: 40px 24px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
  }

  .stat-box:hover {
    box-shadow: 0 16px 40px rgba(201, 98, 47, 0.15);
    transform: translateY(-8px);
  }

  .stat-box h2 {
    font-size: 2.8rem;
    color: var(--accent);
    margin-bottom: 12px;
    font-weight: 900;
  }

  .stat-box p {
    font-size: 1rem;
    color: var(--ink-light);
    margin: 0;
  }
}

/* Tablet (768px - 1024px): About page tablet layout */
@media (max-width: 1024px) and (min-width: 769px) {
  /* ─── About Page Hero ─── */
  .page-hero--about {
    padding: 100px 30px !important;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .page-hero-inner {
    max-width: 650px !important;
  }

  .hero-eyebrow-2 {
    font-size: 0.88rem;
    letter-spacing: 1.8px;
  }

  .page-hero-title {
    font-size: 2.8rem !important;
    margin: 14px 0 18px 0;
    line-height: 1.15;
  }

  .page-hero-sub {
    font-size: 1.02rem !important;
    line-height: 1.55;
    margin: 0;
  }

  .hero-bg-pattern {
    opacity: 0.35 !important;
  }

  /* ─── About Description Section ─── */
  .about-desc {
    padding: 50px 32px !important;
  }

  .container {
    display: flex !important;
    flex-direction: row !important;
    gap: 40px;
    align-items: flex-start;
  }

  .left-image {
    width: 48% !important;
    flex-shrink: 0;
  }

  .left-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  }

  .right-desc {
    width: 52% !important;
  }

  .right-desc p {
    font-size: 0.98rem;
    line-height: 1.66;
    margin-bottom: 15px;
    color: var(--ink-light);
  }

  /* ─── Why Choose Us Section ─── */
  .why-choose-us {
    text-align: center;
    margin: 45px 0 35px 0;
  }

  .why-choose-us h2 {
    font-size: 1.8rem;
    margin-bottom: 14px;
  }

  /* ─── Why Grid Cards ─── */
  .why-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 35px;
  }

  .why-card {
    background: var(--white);
    padding: 28px 22px;
    border-radius: 10px;
    border: 1px solid var(--border);
    text-align: center;
    transition: all 0.3s ease;
  }

  .why-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
    transform: translateY(-4px);
  }

  .why-card h3 {
    font-size: 1.15rem;
    margin-bottom: 10px;
    color: var(--accent);
  }

  .why-card p {
    font-size: 0.92rem;
    color: var(--ink-light);
    margin: 0;
    line-height: 1.55;
  }

  /* ─── Stats Section ─── */
  .stats-section {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px !important;
    padding: 50px 32px !important;
  }

  .stat-box {
    background: linear-gradient(135deg, var(--gold-lt) 0%, var(--blush) 100%);
    padding: 35px 20px;
    border-radius: 14px;
    text-align: center;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
  }

  .stat-box:hover {
    box-shadow: 0 12px 32px rgba(201, 98, 47, 0.12);
    transform: translateY(-6px);
  }

  .stat-box h2 {
    font-size: 2.4rem;
    color: var(--accent);
    margin-bottom: 10px;
    font-weight: 900;
  }

  .stat-box p {
    font-size: 0.98rem;
    color: var(--ink-light);
    margin: 0;
  }
}

/* Tablet & Mobile (768px and below): About page styles */
@media (max-width: 768px) {
  /* ─── About Page Hero ─── */
  .page-hero--about {
    padding: 80px 20px !important;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .page-hero-inner {
    max-width: 100% !important;
  }

  .hero-eyebrow-2 {
    font-size: 0.85rem;
    letter-spacing: 1.5px;
  }

  .page-hero-title {
    font-size: 2.2rem !important;
    margin: 12px 0 16px 0;
    line-height: 1.2;
  }

  .page-hero-title em {
    display: block;
  }

  .page-hero-sub {
    font-size: 0.95rem !important;
    line-height: 1.5;
    margin: 0;
  }

  .hero-bg-pattern {
    opacity: 0.3 !important;
  }

  /* ─── About Description Section ─── */
  .about-desc {
    padding: 40px 20px !important;
  }

  .container {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .left-image {
    width: 100% !important;
    order: 2;
  }

  .left-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

  .right-desc {
    width: 100% !important;
    order: 1;
  }

  .right-desc p {
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 14px;
    color: var(--ink-light);
  }

  .right-desc p:first-child {
    margin-top: 0;
  }

  .right-desc p br {
    display: none;
  }

  /* ─── Why Choose Us Section ─── */
  .why-choose-us {
    text-align: center;
    margin: 40px 0 30px 0;
  }

  .why-choose-us h2 {
    font-size: 1.6rem;
    margin-bottom: 12px;
  }

  /* ─── Why Grid Cards ─── */
  .why-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-bottom: 30px;
  }

  .why-card {
    background: var(--white);
    padding: 24px 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
    text-align: center;
    transition: all 0.3s ease;
  }

  .why-card:active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
  }

  .why-card h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: var(--accent);
  }

  .why-card p {
    font-size: 0.9rem;
    color: var(--ink-light);
    margin: 0;
    line-height: 1.5;
  }

  /* ─── Stats Section ─── */
  .stats-section {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding: 40px 20px !important;
  }

  .stat-box {
    background: linear-gradient(135deg, var(--gold-lt) 0%, var(--blush) 100%);
    padding: 30px 16px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--border);
  }

  .stat-box h2 {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 8px;
    font-weight: 900;
  }

  .stat-box p {
    font-size: 0.9rem;
    color: var(--ink-light);
    margin: 0;
  }
}

/* Mobile Extra Small (480px and below): Further optimizations */
@media (max-width: 480px) {
  /* ─── About Page Hero - Smaller ─── */
  .page-hero--about {
    padding: 60px 16px !important;
    min-height: 280px;
  }

  .page-hero-title {
    font-size: 1.8rem !important;
    margin: 10px 0 14px 0;
  }

  .page-hero-sub {
    font-size: 0.85rem !important;
  }

  /* ─── About Description ─── */
  .about-desc {
    padding: 30px 16px !important;
  }

  .container {
    gap: 24px !important;
  }

  .right-desc p {
    font-size: 0.9rem;
    margin-bottom: 12px;
  }

  /* ─── Why Section - Stack Vertically ─── */
  .why-choose-us h2 {
    font-size: 1.4rem;
  }

  .why-grid {
    gap: 14px !important;
  }

  .why-card {
    padding: 20px 16px;
  }

  .why-card h3 {
    font-size: 1rem;
  }

  .why-card p {
    font-size: 0.85rem;
  }

  /* ─── Stats - 2 Column Grid ─── */
  .stats-section {
    gap: 12px !important;
    padding: 30px 16px !important;
  }

  .stat-box {
    padding: 24px 12px;
  }

  .stat-box h2 {
    font-size: 1.6rem;
  }

  .stat-box p {
    font-size: 0.8rem;
  }
}

/* ─── ABOUT US PAGE COMPLETE ─── */