/* RESET & BASE TYPOGRAPHY ------------------------------ */
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,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,main,section,article,aside,footer,header,nav,figure,figcaption {border:0; font-size:100%; font:inherit; margin:0; padding:0; vertical-align:baseline; box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,main,nav,section {display:block;}
html {font-size:16px;}
body {line-height:1.5; font-family:'Roboto', Arial, Helvetica, sans-serif; color:#F4F6F6; background-color:#181B1E; -webkit-font-smoothing:antialiased; min-height:100vh;}

/* BRAND COLORS & CUSTOM PROPERTIES -------------------- */
:root {
  --color-primary:#205072; /* deep steel blue */
  --color-secondary:#88BDBC; /* muted aqua */
  --color-accent:#F4F6F6; /* foggy white */
  --color-dark:#181B1E; /* almost black */
  --color-metal:#718693; /* medium industrial gray-blue */
  --color-highlight:#C8C8C8; /* metallic light gray */
  --color-danger:#D32F2F;
  --color-shadow:rgba(32,50,60,0.2);
  --radius:10px;
  --font-display:'Montserrat', 'Arial Black', Arial, Helvetica, sans-serif;
  --font-body:'Roboto', Arial, Helvetica, sans-serif;
}

/* GENERAL UTILS & BASIC SPACING ------------------------ */
.container {
  width:100%;
  max-width:1200px;
  margin:auto;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  gap:0;
}
.content-wrapper {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:32px;
}
img {max-width:100%; height:auto; display:block;}
a {color:var(--color-secondary); text-decoration:none; transition:color .2s;}
a:hover,a:focus {color:var(--color-accent);}

/* TYPOGRAPHY ------------------------------------------- */
h1, h2, h3 {font-family:var(--font-display); text-transform:uppercase; font-weight:700; letter-spacing:1px;}
h1 {font-size:2.5rem; line-height:1.15; color:var(--color-accent); margin-bottom:18px;}
h2 {font-size:2rem; color:var(--color-accent); margin-bottom:12px;}
h3 {font-size:1.35rem; color:var(--color-secondary); margin-bottom:10px;}
p, ul, li, blockquote {font-family:var(--font-body); font-size:1rem; line-height:1.7; color:var(--color-accent);}
strong {font-weight:700; color:var(--color-highlight);}
blockquote {
  font-family:var(--font-display);
  color:var(--color-primary);
  font-size:1.1rem;
  border-left:4px solid var(--color-secondary);
  padding-left:18px;
  margin-bottom:12px;
  background:var(--color-accent);
  color:var(--color-dark);
}

/* SECTION & CARD SPACING ------------------------------- */
.section {margin-bottom:60px; padding:40px 20px; width:100%;}
.card-container {display:flex; flex-wrap:wrap; gap:24px;}
.card {margin-bottom:20px; position:relative; background:var(--color-metal); border-radius:var(--radius); box-shadow:0 2px 16px var(--color-shadow); padding:20px;}
.content-grid {display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; width:100%;}
.text-image-section {display:flex; align-items:center; gap:30px; flex-wrap:wrap;}
.testimonial-card {display:flex; align-items:center; gap:20px; padding:20px; background:var(--color-accent); border-radius:var(--radius); box-shadow:0 1px 8px var(--color-shadow); flex-direction:row; margin-bottom:24px;}
.feature-item {display:flex; flex-direction:column; align-items:flex-start; gap:15px;}

/* INDUSTRIAL MODERN HERO ------------------------------- */
.hero {
  background:linear-gradient(120deg,rgba(32,80,114,0.94) 60%,rgba(32,40,48,0.85)),url('../assets/hero-bg.jpg') center/cover no-repeat;
  min-height:340px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:0;
}
.hero h1 {color:var(--color-accent); margin-bottom:18px;}
.hero p {font-size:1.15rem; color:#E3E4E4; max-width:600px;}
.hero .cta-primary {margin-top:28px;}

/* BUTTONS ---------------------------------------------- */
.cta-primary {
  display:inline-block;
  font-family:var(--font-display);
  background:var(--color-secondary);
  color:var(--color-dark);
  border:none;
  border-radius:var(--radius);
  padding:15px 36px;
  font-size:1.1rem;
  letter-spacing:1px;
  font-weight:700;
  text-transform:uppercase;
  box-shadow:0 4px 18px var(--color-shadow);
  transition:background .22s, transform .18s;
  position:relative;
  cursor:pointer;
  margin-top:14px;
  margin-bottom:8px;
}
.cta-primary:hover, .cta-primary:focus {
  background:var(--color-primary);
  color:var(--color-accent);
  transform:translateY(-2px) scale(1.03);
}

/* HEADER & NAVIGATION ---------------------------------- */
header {
  width:100%;
  background:var(--color-dark);
  box-shadow:0 4px 24px rgba(32,80,114,0.12);
  border-bottom:2px solid var(--color-metal);
  position:relative; z-index:50;
}
header .container {
  display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:16px; min-height:80px; position:relative;
}
header img {height:44px; width:auto;}
.main-nav {
  display:flex;
  flex-direction:row;
  gap:30px;
  align-items:center;
}
.main-nav a {
  color:var(--color-highlight);
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.08rem;
  letter-spacing:.7px;
  padding:8px 2px;
  border-bottom:2px solid transparent;
  transition:border-color .22s, color .18s;
  text-transform:uppercase;
}
.main-nav a:hover, .main-nav a:focus {
  color:var(--color-secondary);
  border-bottom:2px solid var(--color-secondary);
}
.mobile-menu-toggle {
  display:none; /* Shown on mobile */
  background:var(--color-secondary);
  color:var(--color-dark);
  font-size:2rem;
  border:none;
  border-radius:var(--radius);
  width:48px;height:48px;
  align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 12px var(--color-shadow);
  transition:background .18s;
  margin-left:12px;
}
.mobile-menu-toggle:focus,.mobile-menu-toggle:hover {outline:none; background:var(--color-primary); color:var(--color-accent);}

/* MOBILE MENU ------------------------------------------ */
.mobile-menu {
  position:fixed;
  top:0; left:0; height:100vh; width:100vw;
  background:rgba(24,27,30,0.98);
  z-index:300;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  padding:30px 24px 0 24px;
  transform:translateX(-100vw);
  transition:transform .36s cubic-bezier(.7,.1,.7,1);
  box-shadow:4px 0 30px rgba(32,50,60,0.24);
}
.mobile-menu.open {transform:translateX(0);}
.mobile-menu-close {
  background:none;
  border:none;
  color:var(--color-secondary);
  font-size:2.4rem;
  align-self:flex-end;
  margin-bottom:38px;
  cursor:pointer;
  transition:color .18s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {color:var(--color-accent);}
.mobile-nav {display:flex; flex-direction:column; gap:26px; width:100%;}
.mobile-nav a {
  color:var(--color-accent);
  font-size:1.33rem;
  font-family:var(--font-display);
  padding:15px 0;
  border-bottom:1px solid var(--color-metal);
  text-transform:uppercase;
  transition:color .18s;
}
.mobile-nav a:hover, .mobile-nav a:focus {color:var(--color-secondary);}

/* Hide desktop nav on mobile, show burger */
@media (max-width: 900px) {
  .main-nav {display:none;}
  .mobile-menu-toggle {display:flex;}
  .cta-primary {padding:12px 24px; font-size:1rem;}
  header .container {gap:5px;}
}
@media (max-width: 900px) {
  .mobile-menu {padding-top:40px;}
}

/* -- BASIC FLEX LAYOUTS MANDATORY PATTERNS ------------- */
.features ul,
section.features ul,
section.adventure ul,
section.about ul,
section.values ul,
section.details ul,
section.plan ul,
section.legal ul,
.timeline ul,
.experience-cards {
  list-style:none;
  display:flex; flex-wrap:wrap; gap:24px;
  flex-direction:row;
  margin-bottom:0;
}
.features ul li,
section.features ul li,
.experience-cards li,
.feature-grid > div {
  flex:1 1 230px;
  min-width:220px;
  background:var(--color-metal);
  border-radius:var(--radius);
  box-shadow:0 1px 10px var(--color-shadow);
  display:flex; flex-direction:column; align-items:flex-start;
  gap:10px;
  padding:26px 20px 20px 20px;
  margin-bottom:0;
  border-top:4px solid var(--color-primary);
  transition:box-shadow .18s, transform .14s;
}
.features ul li:hover,
.experience-cards li:hover,
.feature-grid > div:hover {
  box-shadow:0 6px 20px var(--color-shadow);
  transform:translateY(-4px) scale(1.04);
}
.feature-grid {display:flex; flex-wrap:wrap; gap:24px; width:100%;}

/* GRID-LIKE FLEX UTILS */
.card-container {display:flex; flex-wrap:wrap; gap:24px;}
.content-grid {display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between;}
.text-image-section {display:flex; align-items:center; gap:30px; flex-wrap:wrap;}

/* TESTIMONIALS ----------------------------------------- */
.testimonials .testimonial-card {
  background:var(--color-accent);
  color:var(--color-dark);
  border-left:6px solid var(--color-primary);
  box-shadow:0 2px 12px var(--color-shadow);
  min-width:240px; max-width:700px;
  margin-bottom:20px;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  transition:box-shadow .16s;
}
.testimonial-card blockquote {margin-bottom:10px; color:var(--color-dark); background:none; border:0; padding:0; font-size:1.06rem;}
.testimonial-card p {color:var(--color-primary); font-size:0.96rem; font-weight:600; opacity:.88;}

/* ABOUT / LEGAL / BASIC LAYOUTS ------------------------ */
.about, .about-brief, .legal, .plan, .thankyou, .contact, .help, .adventure, .protection, .details, .values, .experiences {
  background:var(--color-dark);
  margin-bottom:60px;
  border-radius:var(--radius);
  box-shadow:0 2px 12px var(--color-shadow);
}
.about-brief p, .content-wrapper p, .legal ul, .contact-cta ul {margin-bottom:12px;}

/* FOOTER ------------------------------------------------ */
footer {
  background:var(--color-metal);
  color:var(--color-accent);
  padding:40px 0 18px 0;
  box-shadow:0 -2px 12px var(--color-shadow);
  width:100%;
  margin-top:48px;
}
footer .container {
  display:flex; flex-direction:row; flex-wrap:wrap; gap:46px;
  align-items:flex-start; justify-content:center;
  font-size:.97rem;
}
.footer-navigation {
  display:flex; flex-direction:column; gap:8px; min-width:190px; margin-bottom:8px;
}
.footer-navigation a {
  color:var(--color-accent); text-transform:uppercase; letter-spacing:.9px; font-weight:600;
  transition:color .16s;
}
.footer-navigation a:hover, .footer-navigation a:focus {color:var(--color-secondary);}
.brand-info {display:flex; flex-direction:column; align-items:center; gap:10px; min-width:200px;}
.brand-info img {height:42px;}
.contact-summary ul {
  list-style:none; display:flex; flex-direction:column; gap:10px; min-width:210px;
}
.contact-summary li {display:flex; align-items:center; gap:10px; color:var(--color-accent);}
.social-links {display:flex; gap:22px; align-items:center;}
.social-links a img {height:24px;width:24px;opacity:0.87;transition:opacity .15s;}
.social-links a:hover img {opacity:1;}

/* CONTACT INFO SNIPPET --------------------------------- */
.contact-info-snippet ul, .map-snippet, .map-embed {
  display:flex; flex-direction:row; flex-wrap:wrap; gap:18px;
  align-items:center;
  list-style:none;
  margin-bottom:8px;
}
.contact-info-snippet li, .map-snippet, .map-embed {font-size:1rem; color:var(--color-accent);}
.contact-info-snippet img, .map-snippet img, .map-embed img {height:22px;margin-right:7px;vertical-align:middle;}

/* CTA SECTIONS ----------------------------------------- */
.cta {
  background:var(--color-primary);
  color:var(--color-accent);
  text-align:center;
  box-shadow:0 2px 14px var(--color-shadow);
  min-height:120px; margin-bottom:60px;
  border-radius:var(--radius);
}
.cta h2 {margin-bottom:16px;}
.cta .cta-primary {margin:auto;}

/* TIMELINE FLEX (BERGE) -------------------------------- */
.timeline ul {gap:14px; margin-left:0;}
.timeline li {
  background:var(--color-dark);
  color:var(--color-accent);
  border-left:4px solid var(--color-primary);
  border-radius:var(--radius);
  padding:12px 18px;
  min-width:180px; flex:1 1 160px;
  margin-bottom:0;
}

/* ACTIVITY OVERVIEW ------------------------------------ */
.activity-overview ul, .planning-tips ul {
  display:flex; flex-direction:column; gap:12px; list-style:none;
  background:var(--color-metal);
  border-radius:var(--radius);
  box-shadow:0 1px 8px var(--color-shadow);
  padding:24px 16px;
}

/* MAP SNIPPET ------------------------------------------ */
.map-snippet, .map-embed {
  background:var(--color-metal);
  border-radius:var(--radius);
  padding:12px 20px;
  display:flex; flex-direction:row; gap:10px; align-items:center;
  margin-bottom:0;
  box-shadow:0 1px 6px var(--color-shadow);
  font-size:.99rem; color:var(--color-accent);
}
.map-snippet img, .map-embed img {min-width:20px; height:20px;}

/* FACT HIGHLIGHTS -------------------------------------- */
.fact-highlights ul {display:flex; flex-direction:row; gap:18px; flex-wrap:wrap;}
.fact-highlights li {
  background:var(--color-highlight);
  color:var(--color-primary);
  border-radius:var(--radius);
  padding:13px 18px;
  min-width:170px;
  box-shadow:0 1px 8px var(--color-shadow);
  font-weight:600;
}

/* RESPONSIVE ADAPTATION (MOBILE-FIRST) ----------------- */
@media (max-width: 1100px) {
  .container {padding:0 12px;}
}
@media (max-width: 900px) {
  .container {max-width:100vw;}
  .footer-navigation, .contact-summary, .brand-info, .social-links, footer .container {gap:24px;}
}
@media (max-width: 768px) {
  .container {padding:0 7px;}
  .content-wrapper {gap:24px;}
  h1 {font-size:2rem; margin-bottom:10px;}
  h2 {font-size:1.33rem;}
  .main-nav {display:none;}
  .footer-navigation {min-width:160px;}

  .card-container, .content-grid, .features ul, .feature-grid, .experience-cards, .testimonial-container, .fact-highlights ul {
    flex-direction:column; align-items:stretch; gap:16px;
  }

  .footer-navigation, .contact-summary, .brand-info, .social-links {
    align-items:flex-start;
    text-align:left;
  }
  .section, .about, .values, .about-brief, .legal, .plan, .thankyou, .contact, .help, .adventure, .protection, .features, .testimonials, .details, .experiences {
    padding:28px 10px;
    margin-bottom:40px;
  }
  .hero {min-height:180px;}
  .features ul li,.feature-grid > div,.experience-cards li {
    min-width:0; width:100%;
    flex:1 1 100%;
    padding:18px 10px 9px 10px;
  }
  .testimonial-card {padding:12px;}
  .content-grid,.text-image-section {gap:12px;}
  .text-image-section {flex-direction:column; align-items:flex-start;}
  .mobile-menu-toggle {display:flex;}
  .footer-navigation {gap:4px;}
}

/* INDUSTRIAL ACCENTS & MICRO-INTERACTIONS ------------- */
div.card, .testimonial-card, .feature-grid > div, .features ul li, .experience-cards li {
  box-shadow:0 1.5px 10px var(--color-shadow), 0 0 0 0.5px var(--color-highlight) inset;
  border:1.5px solid var(--color-metal);
  transition:box-shadow .21s, border-color .16s, transform .18s;
}
div.card:hover, .testimonial-card:hover, .feature-grid > div:hover, .features ul li:hover, .experience-cards li:hover {
  border-color:var(--color-secondary);
  box-shadow:0 6px 32px var(--color-shadow), 0 0 0 0.5px var(--color-secondary) inset;
  transform:translateY(-3px) scale(1.02);
}

hr {border:0; height:1.5px; background:var(--color-metal); border-radius:2px; margin:20px 0;}

/* FORM ELEMENTS --------------------------------------- */
input,textarea,select {
  font-family:var(--font-body);
  font-size:1rem;
  background:var(--color-dark);
  color:var(--color-accent);
  border:2px solid var(--color-secondary);
  border-radius:var(--radius);
  padding:12px 10px;
  margin-bottom:16px;
  outline:none;
  transition:border-color .19s;
  width:100%;
}
input:focus,textarea:focus,select:focus {
  border-color:var(--color-primary);
}

/* COOKIE CONSENT BANNER & MODAL --------------------------- */
.cookie-banner {
  position:fixed;
  left:0; right:0; bottom:0;
  background:var(--color-dark);
  color:var(--color-accent);
  display:flex; flex-direction:row; align-items:center;
  justify-content:center;
  padding:20px 32px;
  box-shadow:0 -4px 20px var(--color-shadow);
  gap:22px;
  z-index:401;
  font-size:1rem;
  opacity:1; visibility:visible; pointer-events:auto;
  animation:slideInBanner .6s cubic-bezier(.7,.1,.7,1);
}
@keyframes slideInBanner {
  from {transform:translateY(80px); opacity:0;}
  to {transform:translateY(0); opacity:1;}
}
.cookie-banner.hide {
  opacity:0; pointer-events:none; visibility:hidden; transition:opacity .28s;
}
.cookie-banner .cookie-btn {
  background:var(--color-secondary);
  color:var(--color-dark);
  border:0;
  border-radius:8px;
  padding:8px 18px;
  font-size:1rem; font-family:var(--font-display);
  font-weight:600;
  margin-left:11px;
  cursor:pointer;
  transition:background .16s, color .13s, transform .13s;
  box-shadow:0 1px 8px var(--color-shadow);
}
.cookie-banner .cookie-btn:hover, .cookie-banner .cookie-btn:focus {
  background:var(--color-primary); color:var(--color-accent); transform:translateY(-1px) scale(1.04);
}
.cookie-banner .cookie-settings {
  background:transparent;
  border:1.5px solid var(--color-metal);
  color:var(--color-accent);
}
.cookie-banner .cookie-settings:hover, .cookie-banner .cookie-settings:focus {
  background:var(--color-metal);
  border-color:var(--color-secondary);
}

@media (max-width: 768px) {
  .cookie-banner {
    flex-direction:column;
    gap:12px;
    padding:16px 5px;
    font-size:.98rem;
    bottom:0;
  }
  .cookie-banner .cookie-btn {margin-left:0;}
}

/* COOKIE CONSENT MODAL ---------------------------------- */
.cookie-modal {
  position:fixed; left:0; top:0; width:100vw; height:100vh; z-index:500;
  background:rgba(24,27,30,0.95);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.cookie-modal.show {opacity:1; pointer-events:auto;}
.cookie-modal .modal-content {
  background:var(--color-metal);
  color:var(--color-dark);
  min-width:340px; max-width:98vw; padding:32px 28px;
  border-radius:var(--radius);
  box-shadow:0 4px 30px var(--color-shadow);
  display:flex; flex-direction:column; gap:22px;
  position:relative;
  animation:modalPop .42s;
}
@keyframes modalPop {
  0% {transform:translateY(100px) scale(.98); opacity:0;}
  100% {transform:translateY(0) scale(1); opacity:1;}
}
.cookie-modal .modal-header {
  display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:10px;
}
.cookie-modal .modal-close {
  background:none; border:none; font-size:2.1rem; color:var(--color-primary); cursor:pointer;
  position:absolute; top:14px; right:18px;
}
.cookie-modal .cookie-category {
  display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:8px;
}
.cookie-modal label {
  font-family:var(--font-display); font-size:1.06rem; text-transform:uppercase; color:var(--color-primary); font-weight:600;
}
.cookie-modal input[type=checkbox] {accent-color:var(--color-secondary); width:22px; height:22px;}
.cookie-modal .cookie-btn {margin-right:10px;}

@media (max-width: 500px) {
  .cookie-modal .modal-content {padding:17px 5px;}
}

/* ACCESSIBILITY ---------------------------------------- */
:focus-visible {outline:2px solid var(--color-secondary);}

/* UTILS ------------------------------------ */
.mt-16 {margin-top:16px !important;}
.mt-32 {margin-top:32px !important;}
.mb-16 {margin-bottom:16px !important;}
.mb-32 {margin-bottom:32px !important;}
.text-center {text-align:center;}

/* PRINT ------------------------------------------------ */
@media print {
  header,footer,.mobile-menu,.cookie-banner,.cookie-modal {display:none;}
  body {background:#fff;color:#000;}
}