/* ===================================================================
   Volt Ripple Trek - style.css
   Elegant Classic Design — Mobile-First, Fully Responsive, Flexbox only
   =================================================================== */
/* -----------------------
   CSS RESET & NORMALIZE
------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
  box-sizing:border-box;
}
html { box-sizing: border-box; scroll-behavior: smooth; }
*, *:before, *:after { box-sizing: inherit; }
body { line-height:1.5; background: #F9F7F4; }
ul,ol { list-style:none; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; height:auto; border:0; }
table { border-collapse:collapse; border-spacing:0; }
button, input, select, textarea { font:inherit; background:none; border:none; outline:none; }

/* ----------------------------
  FONTS: Elegant Serif/Sans Pair
------------------------------ */
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lora:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');

:root {
  --color-primary: #1D393B;
  --color-secondary: #44705A;
  --color-accent: #F4EEDD;
  --color-background: #F9F7F4;
  --color-dark-text: #193024;
  --color-light-text: #6C7A74;
  --color-border: #E0DED7;
  --color-card-bg: #FCFBF8;
  --color-shadow: rgba(34, 36, 38, 0.05);
  --color-hover: #e9e5d2;
  --transition: 0.22s cubic-bezier(.44,.11,.53,.82);
  --radius-base: 12px;
  --radius-pill: 24px;
  --font-display: 'Roboto Slab', 'Montserrat', serif;
  --font-body: 'Lora', 'Lato', serif;
}

body {
  font-family: var(--font-body);
  color: var(--color-dark-text);
  background: var(--color-background);
  font-size: 16px;
  min-height: 100vh;
  letter-spacing:0.01em;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  color: var(--color-primary);
  font-weight:700;
  line-height: 1.18;
  margin-bottom: 18px;
  letter-spacing:0.01em;
}

h1 { font-size: 2.5rem; margin-bottom:28px; }
h2 { font-size: 2rem; }
h3 { font-size: 1.333rem; }
h4 { font-size: 1.125rem; font-weight:600; }

p, li {
  font-family: var(--font-body);
  color: var(--color-light-text);
  font-size: 1rem;
}
strong, b {
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing:0;
}


/* -------------------------------------------
  LAYOUT: Container, Section, Content Spacing
----------------------------------------------- */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 22px;
  padding-right: 22px;
  display: flex;
  flex-direction: column;
}

.section, section {
  margin-bottom: 60px;
  padding: 40px 20px;
  background: transparent;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.content-wrapper.testimonials,
.content-wrapper.contact,
.content-wrapper.legal,
.content-wrapper.confirmation,
.content-wrapper.cta-section,
.content-wrapper.team-section {
  background: var(--color-card-bg);
  border-radius: var(--radius-base);
  box-shadow: 0 3px 24px var(--color-shadow);
  padding: 36px 24px;
  margin-bottom:24px;
}

/* Make sure cards never overlap and always have breathing space */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}
.card {
  position: relative;
  background: var(--color-card-bg);
  border-radius: var(--radius-base);
  box-shadow: 0 2px 10px var(--color-shadow);
  margin-bottom: 20px;
  padding: 28px 22px;
  min-width: 260px;
  max-width: 370px;
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap:12px;
}

/* Generic grid layouts using Flexbox */
.content-grid,
.tour-teasers,
.feature-grid,
.featured-tours,
.tours-list,
.team-profiles,
.tips-list,
.safety-equipment,
.testimonial-slider,
.testimonial-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.text-image-section {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

/* Testimonials, Contact Info, etc */
.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  background: #FFF;
  border-radius: var(--radius-base);
  box-shadow: 0 1px 14px var(--color-shadow);
  padding: 20px 20px 20px 32px;
  min-width: 260px;
  max-width: 380px;
  margin-bottom: 20px;
  border-left: 4px solid var(--color-secondary);
  color: var(--color-dark-text);
}
.testimonial-meta {
  font-size: 1rem;
  color: var(--color-secondary);
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}
blockquote {
  font-style: italic;
  color: var(--color-primary);
}
cite {
  color: var(--color-secondary);
  font-size: 0.9rem;
  font-style: normal;
  margin-left: 8px;
}

.contact-info, .contact-info-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  flex-direction: column;
  margin-bottom: 16px;
  font-size: 1rem;
}
.contact-info div, .contact-info-summary div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
}

.opening-hours {
  font-size: 1rem;
  margin-top: 14px;
  color: var(--color-secondary);
}

/* --------------------------------
   HEADER + NAVIGATION
----------------------------------- */
header {
  background: var(--color-card-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 0;
  margin-bottom: 0;
  position: relative;
  z-index: 13;
}
header .container {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding-top: 8px;
  padding-bottom: 8px;
}
header img {
  height: 52px;
  width: auto;
  margin-right: 24px;
}
header nav {
  display: flex;
  gap: 22px;
  align-items: center;
}
header nav a {
  font-family: var(--font-display);
  font-size: 1rem;
  padding: 8px 0;
  color: var(--color-primary);
  transition: color var(--transition);
  position: relative;
  letter-spacing:0.01em;
}
header nav a::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--color-accent);
  width: 0%;
  transition: width var(--transition);
  margin-top: 2px;
}
header nav a:hover,header nav a:focus {
  color: var(--color-secondary);
}
header nav a:hover::after,header nav a:focus::after {
  width: 55%;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  padding: 13px 36px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 1rem;
  letter-spacing:0.01em;
  box-shadow: 0 1px 6px var(--color-shadow);
  margin-left: 22px;
  border: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
  outline: none;
}
.cta.primary {
  background: var(--color-secondary);
  color: #FFF;
}
.cta:hover, .cta:focus {
  background: var(--color-hover);
  color: var(--color-secondary);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 16px var(--color-shadow);
}
.cta.primary:hover, .cta.primary:focus {
  background: var(--color-primary);
  color: #fff;
}

/* Burger menu toggle */
.mobile-menu-toggle {
  display: none;
  font-size: 2.1rem;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 20px;
  z-index: 25;
  transition: background var(--transition), color var(--transition);
  padding: 0 8px;
}
.mobile-menu-toggle:focus { outline: 2px solid var(--color-primary); }

/* -----------
   MOBILE MENU
-------------- */
.mobile-menu {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(29,57,59,0.96);
  transform: translateX(-100vw);
  transition: transform .42s cubic-bezier(.54,.2,.42,1.18);
  z-index: 101;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 0;
  pointer-events: none;
}
.mobile-menu.open {
  transform: translateX(0);
  pointer-events: all;
}
.mobile-menu-close {
  align-self: flex-end;
  margin: 22px 32px 0 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.8rem;
  cursor: pointer;
  z-index: 102;
  transition: color var(--transition);
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
  color: var(--color-accent);
}
.mobile-nav {
  width: 100%;
  display:flex;
  flex-direction: column;
  gap:16px;
  margin-top: 56px;
  align-items: flex-start;
  padding-left: 12vw;
}
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #fff;
  padding: 13px 0;
  transition: color var(--transition), letter-spacing var(--transition);
  letter-spacing:0.02em;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  color: var(--color-accent);
  letter-spacing:0.11em;
}

/* Only show on <1024px */
@media (max-width: 1024px) {
  header nav,
  .cta.primary {
    display: none !important;
  }
  .mobile-menu-toggle {
    display: block;
    background: none;
  }
}

@media (min-width: 1025px) {
  .mobile-menu {
    display: none !important;
  }
}

/* ------
 HERO
------- */
.hero {
  background: linear-gradient(117deg,#FCFBF8 60%,#e9efe6 140%);
  padding-top: 48px;
  padding-bottom: 48px;
}
.hero .content-wrapper {
  align-items: flex-start;
  gap: 16px;
}
.hero h1 {
  font-size: 2.8rem;
  color: var(--color-primary);
}
@media (min-width:700px){
  .hero h1 { font-size: 3.1rem; }
}

/* -------------
  CARDS & TEASERS
--------------- */
.tour-teasers, .featured-tours, .tour-box {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.tour-box {
  background: var(--color-accent);
  border-radius: var(--radius-base);
  padding: 24px 22px;
  box-shadow: 0 1px 7px var(--color-shadow);
  min-width: 230px;
  max-width: 340px;
  flex: 1 1 260px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 3px solid var(--color-secondary);
  color: var(--color-primary);
  transition: box-shadow .29s cubic-bezier(.44,.11,.53,.82),transform .22s;
}
.tour-box h3 { color: var(--color-secondary); font-size:1.2rem; margin-bottom: 4px; }
.tour-box:hover, .tour-box:focus {
  box-shadow: 0 5px 22px var(--color-shadow);
  transform: translateY(-3px) scale(1.01);
}

/* ------
FEATURES
-------- */
.feature-grid, .feature {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.feature {
  background: #FFF;
  border-radius: var(--radius-base);
  box-shadow: 0 1px 9px var(--color-shadow);
  padding: 28px 18px 24px 20px;
  min-width: 210px;
  max-width: 290px;
  flex: 1 1 220px;
  margin-bottom: 20px;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-primary);
  transition: box-shadow .27s var(--transition);
}
.feature img {
  height: 38px; width:38px;
  margin-bottom: 7px;
  opacity:0.95;
}
.feature h3 {
  font-size:1.08rem;
  color: var(--color-secondary);
  margin-bottom: 7px;
}
.feature p {
  font-size:0.97rem;
  color: var(--color-light-text);
}
.feature:hover, .feature:focus {
  box-shadow: 0 6px 18px var(--color-shadow);
}

/* ---------------
  BRAND VALUES
----------------- */
.brand-values {
  margin-top:10px;
  margin-bottom: 4px;
  color:var(--color-secondary);
  font-size:1.06rem;
  display: flex; flex-direction:column; gap: 12px;
}
.brand-values li {margin-bottom: 0;}

/* -----------
  TEAM PROFILES
-------------- */
.team-profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.team-member {
  background: var(--color-card-bg);
  border-radius: var(--radius-base);
  box-shadow: 0 1px 10px var(--color-shadow);
  flex: 1 1 240px;
  min-width: 200px;
  max-width:360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 16px 20px 22px;
  gap: 8px;
  margin-bottom:20px;
}
.team-member img { height:34px; width:auto; margin-top: 10px; }
.team-member h3 { color:var(--color-primary); }
.team-member span { color:var(--color-secondary); font-size:1.02rem; margin-bottom:3px; }

.certifications {
  background: #fff8ee;
  border-radius: var(--radius-base);
  padding: 24px 18px;
  font-size:1.02rem;
  box-shadow: 0 1px 8px var(--color-shadow);
  margin-top: 26px;
}
.certifications h3 { margin-bottom: 0; color:var(--color-secondary); }

/* PRICING TABLE */
.pricing-table {
  width: 100%;
  background: #fff;
  border-radius: var(--radius-base);
  margin-bottom: 24px;
  box-shadow: 0 1px 8px var(--color-shadow);
  border-collapse: separate;
  border-spacing:0;
}
.pricing-table th, .pricing-table td {
  padding: 14px 18px;
  text-align: left;
  font-size: 1rem;
  color: var(--color-dark-text);
  border-bottom:1px solid var(--color-border);
}
.pricing-table thead th {
  background: var(--color-accent);
  color: var(--color-primary);
}
.pricing-table tr:last-child td { border-bottom: none; }

/* -------
 CHECKLISTS/INFO
---------- */
.checklists, .discounts-info, .what-included, .calendar-view {
  margin-top: 18px;
  background: #faf8f2;
  border-radius: var(--radius-base);
  padding:14px 20px;
  margin-bottom: 14px;
  font-size:1.00rem;
}
.checklists ul, .discounts-info ul, .what-included ul {
  list-style: disc inside;
  margin-top: 5px;
  color: var(--color-secondary);
}

/* -------------
  LEGAL PAGES
------------- */
.content-wrapper.legal {
  background: #fff;
  padding: 33px 20px;
  border-left: 5px solid var(--color-secondary);
}
.terms-of-service, .booking-policies, .gdpr-statement, .user-rights, .cookie-policy-details, .how-to-disable-cookies {
  margin-bottom: 22px;
}

/* -------------
  FOOTER
------------- */
footer {
  background: var(--color-card-bg);
  border-top: 1px solid var(--color-border);
  padding: 0;
  margin-top: 0;
}
footer .container {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-top:26px; padding-bottom:26px;
}
footer nav {
  display: flex;
  flex-direction: row;
  gap: 24px;
}
footer nav a {
  font-size: 1rem;
  color: var(--color-secondary);
  transition: color var(--transition);
  padding: 2px 0;
}
footer nav a:hover, footer nav a:focus { color: var(--color-primary); }
.footer-contact {
  color: var(--color-light-text);
  font-size: 0.97rem;
}

/* -------------
  COOKIE CONSENT BANNER
---------------- */
.cookie-banner {
  position: fixed;
  left: 0; right:0; bottom:0;
  width:100vw;
  padding: 28px 12px 18px 12px;
  background: #f8f7f2;
  color: var(--color-dark-text);
  box-shadow: 0 -2px 18px var(--color-shadow);
  border-top: 2px solid var(--color-secondary);
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  animation: slideInBottomBanner .6s cubic-bezier(.61,-0.04,.47,.98);
}
@keyframes slideInBottomBanner {
  0%{transform:translateY(100%);opacity:0;}100%{transform:translateY(0);opacity:1;}
}
.cookie-banner p {
  font-size: 1rem;
  color: var(--color-dark-text);
  margin-bottom: 0;
  letter-spacing:0.01em;
}
.cookie-banner .cookie-btn {
  padding: 11px 22px;
  margin: 1px 8px;
  border-radius: var(--radius-pill);
  font-size:1rem;
  font-family: var(--font-display);
  font-weight:600;
  cursor: pointer;
  border: none;
  outline: none;
  transition: background var(--transition),box-shadow var(--transition),color var(--transition);
}
.cookie-banner .cookie-btn.accept {
  background: var(--color-secondary);
  color: #fff;
}
.cookie-banner .cookie-btn.reject {
  background: #fff;
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
}
.cookie-banner .cookie-btn.settings {
  background: var(--color-accent);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}
.cookie-banner .cookie-btn:hover, .cookie-banner .cookie-btn:focus {
  box-shadow: 0 4px 14px var(--color-shadow);
  background: var(--color-hover);
  color: var(--color-primary);
}

/* Cookie preference modal */
.cookie-modal {
  position: fixed;
  left: 50%; top:50%;
  transform: translate(-50%,-50%) scale(1);
  background: #fff;
  z-index: 12000;
  min-width: 290px;
  max-width: 94vw;
  width: 420px;
  border-radius: var(--radius-base);
  box-shadow: 0 8px 44px rgba(44,56,58,0.18);
  padding: 34px 28px 24px 28px;
  display: flex;
  flex-direction:column;
  gap:18px;
  animation: fadeInCookieModal .37s cubic-bezier(.44,.08,.65,.90);
}
@keyframes fadeInCookieModal {
  from{opacity:0;transform:translate(-50%,-60%) scale(.98);} to {opacity:1;transform:translate(-50%,-50%) scale(1);}
}
.cookie-modal h2 {
  color: var(--color-primary); font-size:1.35rem; margin-bottom:10px;
}
.cookie-modal .cookie-category {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 11px;
}
.cookie-modal label {
  font-size:1rem;
  color: var(--color-secondary);
}
.cookie-modal input[type=checkbox] {
  accent-color: var(--color-secondary);
  width: 18px; height:18px;
}
.cookie-modal .modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  justify-content: flex-end;
}
.cookie-modal .cookie-btn { width: unset; }
.cookie-modal .close-modal {
  position: absolute;
  top: 15px; right: 15px;
  font-size:1.88rem;
  background:none;
  border:none;
  color:var(--color-primary);
  opacity:0.7;
  cursor:pointer;
  z-index:99999;
}
.cookie-modal .close-modal:hover,.cookie-modal .close-modal:focus{opacity:1; color:var(--color-secondary);}

/* ---------------
  FORM TABLES, LISTS ETC
----------------- */
ul.upcoming-trips {
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:1.05rem;
  color:var(--color-secondary);
  margin-bottom:10px;
}
.table,
.calendar-view,
.tips-list,
.safety-tips,
.equipment-guides,
.next-steps {
  margin-bottom:18px;
}

.next-steps ul {
  margin-left:12px;
  color:var(--color-secondary);
}

.guest-quotes {
  margin-top: 14px;
  padding-left: 2px;
}

/* -----------
  RESPONSIVENESS
------------- */
@media (max-width: 768px) {
  h1 { font-size:2rem; }
  h2 { font-size:1.45rem; }
  .container { padding-left:8px; padding-right:8px; }
  .section, section { padding:29px 2px; }
  .content-wrapper.legal, .content-wrapper.testimonials, .content-wrapper.contact, .content-wrapper.confirmation, .content-wrapper.cta-section, .content-wrapper.team-section {
    padding: 19px 5px;
  }
  .footer-contact { text-align:center; margin-top:13px; }
  .tour-box,.team-member,.feature {
    min-width: 90vw;
    max-width: 99vw;
    padding-left:10px; padding-right:10px;
  }
  .feature-grid, .tour-teasers, .featured-tours, .card-container, .team-profiles, .testimonial-slider, .testimonial-list {
    flex-direction: column;
    gap: 18px;
  }
  .testimonial-card { padding:19px 13px 17px 13px; }
  .text-image-section {flex-direction:column;gap:15px;}
  footer .container {flex-direction:column;gap:14px;align-items:flex-start;}
  footer nav {gap:11px;flex-direction:column;}
}
@media (max-width: 500px) {
  .container {padding-left:3px;padding-right:3px;}
  .section, section {padding:18px 0;}
  .footer-contact{margin-bottom:12px;}
}

/* Prevent overflow of modal on very small screens */
@media (max-width:480px){ .cookie-modal{min-width:99vw;width:99vw;left:0;transform:translateY(-50%);padding:22px 7px;} }

/* -----------
   MISC CLASSES
------------- */
.map-embed {margin-top:8px;margin-bottom:8px;}
.highlighted-experiences ul {
  font-size:1rem; color:var(--color-secondary); list-style:circle;margin-top:3px;margin-bottom:6px;
  padding-left:14px;
  display: flex; flex-direction:column; gap:2px;
}
.feature-points li {
  font-size:1.05rem;
  line-height:1.4; margin-bottom:7px; color:var(--color-secondary);
}

/* Micro-interactions */
a, .cta, .tour-box, .feature, .testimonial-card {
  transition: box-shadow .19s, color .16s, background .16s, transform .18s;
}
.tour-box:active, .feature:active, .cta:active {
  transform: scale(0.98);
}

/* Selection Styling */
::selection { background: var(--color-accent); color: var(--color-primary); }

/* ---------
 Accessibility (Focus Rings)
---------- */
a:focus, button:focus, .cta:focus {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Hide visually but remain accessible */
.sr-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
}