/* ============================================================
   Nordfjordeid Kayak — Static Site Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Brand colors (oklch from the original design system) */
  --background: oklch(0.975 0.005 220);
  --foreground: oklch(0.2 0.03 240);
  --card: oklch(0.96 0.004 220);
  --card-foreground: oklch(0.2 0.03 240);
  --primary: oklch(0.38 0.08 230);
  --primary-foreground: oklch(0.975 0.005 220);
  --secondary: oklch(0.78 0.08 70);
  --muted: oklch(0.93 0.005 220);
  --muted-foreground: oklch(0.5 0.02 240);
  --accent: oklch(0.52 0.08 175);
  --border: oklch(0.88 0.01 220);

  --radius: 0.5rem;
  --font-heading: 'DM Serif Display', serif;
  --font-body: 'DM Sans', sans-serif;

  --container: 1200px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; line-height: 1.1; }

/* Layout helpers */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1rem; }
.section { padding: 2.5rem 0; }
@media (min-width: 768px) { .section { padding: 42px 0; } }

.muted-bg { background: color-mix(in oklab, var(--muted) 40%, transparent); }

/* ============ Header / Nav ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--background) 80%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: .5rem; color: var(--primary); font-weight: 600; font-family: var(--font-heading); font-size: 1.125rem; }
.nav-links { display: none; align-items: center; gap: 2rem; }
.nav-links a { font-size: .875rem; font-weight: 500; color: var(--muted-foreground); transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--primary); }
.nav-links a.btn, .mobile-nav a.btn { color: var(--primary-foreground); }
.nav-links a.btn:hover, .mobile-nav a.btn:hover { color: var(--primary-foreground); }
.menu-btn { display: block; color: var(--foreground); }
@media (min-width: 768px) {
  .nav-links { display: flex; }
  .menu-btn { display: none; }
}
.mobile-nav { display: none; border-top: 1px solid var(--border); background: var(--background); padding: .5rem 1rem 1rem; flex-direction: column; gap: .75rem; }
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: .5rem 0; font-size: .875rem; font-weight: 500; color: var(--muted-foreground); }
.mobile-nav a.active { color: var(--primary); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .625rem 1.5rem; border-radius: 9999px;
  font-size: .875rem; font-weight: 500;
  background: var(--primary); color: var(--primary-foreground);
  transition: background .2s, transform .2s;
  white-space: nowrap;
}
.btn:hover { background: color-mix(in oklab, var(--primary) 88%, white); }
.btn-lg { padding: .85rem 2rem; font-size: 1rem; }
.btn-sm { padding: .5rem 1.25rem; font-size: .8rem; }
.btn-secondary { background: var(--secondary); color: var(--primary-foreground); }
.btn-secondary:hover { background: color-mix(in oklab, var(--secondary) 88%, black); }
.btn-outline {
  background: transparent; color: var(--foreground);
  border: 1px solid var(--border);
}
.btn-outline:hover { background: var(--muted); }

/* ============ Hero ============ */
.hero { position: relative; overflow: hidden; min-height: 60vh; display: flex; align-items: center; }
@media (min-width: 768px) { .hero { min-height: 70vh; } }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, color-mix(in oklab, var(--foreground) 70%, transparent), color-mix(in oklab, var(--foreground) 40%, transparent), transparent); }
.hero-content { position: relative; z-index: 1; padding: 4rem 0; max-width: 640px; }
@media (min-width: 768px) { .hero-content { padding: 9rem 0; } }
.hero h1 { font-size: clamp(2rem, 6vw, 4.5rem); color: var(--background); margin-bottom: 1.5rem; letter-spacing: -.02em; }
.hero h1 .accent { color: var(--secondary); }
.hero p { color: color-mix(in oklab, var(--background) 85%, transparent); font-size: 1.05rem; margin-bottom: 2rem; max-width: 32rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: color-mix(in oklab, var(--background) 20%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in oklab, var(--background) 20%, transparent);
  color: var(--background);
  padding: .375rem .85rem;
  border-radius: 9999px;
  font-size: .75rem; font-weight: 500;
}
.chip svg { width: 14px; height: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.location-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem 1rem; border-radius: 9999px; background: color-mix(in oklab, var(--background) 20%, transparent); backdrop-filter: blur(6px); border: 1px solid color-mix(in oklab, var(--background) 20%, transparent); color: var(--background); font-size: .75rem; font-weight: 500; margin-bottom: 1.5rem; }

/* ============ Quick Facts Bar ============ */
.facts-bar { background: var(--primary); color: var(--primary-foreground); }
.facts-bar .row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; padding: 1rem 0; font-size: .8rem; }
@media (min-width: 768px) { .facts-bar .row { padding: 1.25rem 0; gap: .5rem 2.5rem; font-size: .9rem; } }
.facts-bar .row span { display: inline-flex; align-items: center; gap: .5rem; }
.facts-bar svg { width: 16px; height: 16px; }
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: inline-flex; } }

/* ============ Testimonials marquee ============ */
.marquee-section { padding: 3rem 0; overflow: hidden; background: color-mix(in oklab, var(--muted) 40%, transparent); }
@media (min-width: 768px) { .marquee-section { padding: 5rem 0; } }
.marquee-header { text-align: center; margin-bottom: 2rem; }
.stars { display: inline-flex; gap: .25rem; margin-bottom: .5rem; color: var(--secondary); }
.stars svg { width: 18px; height: 18px; fill: currentColor; }
.marquee-track {
  display: flex; gap: 1.25rem; width: max-content;
  animation: marquee 40s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.testimonial {
  width: 320px; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.5rem;
}
.testimonial .stars { margin-bottom: 1rem; }
.testimonial-text { font-size: .9rem; color: var(--muted-foreground); font-style: italic; margin-bottom: 1.25rem; }
.testimonial-name { font-size: .875rem; font-weight: 600; }
.testimonial-loc { font-size: .75rem; color: var(--muted-foreground); }

/* ============ Panoramic photo ============ */
.wallImg {
  padding: 20px;
  
}
@media (min-width: 768px) {
  .wallImg { 
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 20px;
    
    
  } 
}
.wallImg img { 
  border-radius: 15px;
  height: 100%;
  width: 100%;
  object-fit:cover;
}
@media (min-width: 768px) { 
  .wallImg img { 
    border-radius: 15px;
    height: 60vh;
    width: 60vw;
    object-fit:cover;

    
    
  } 
}

/* ============ Generic two-col block ============ */
.two-col { display: grid; grid-template-columns: 1fr; gap: 2.5rem; max-width: 64rem; margin: 0 auto; align-items: center; }
@media (min-width: 768px) { .two-col { grid-template-columns: 1fr 1fr; } }
.two-col h2 { font-size: 2rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .two-col h2 { font-size: 2.5rem; } }
.tour-text { color: var(--muted-foreground); font-size: .95rem; line-height: 1.7; }
.read-more {
  display: inline-flex; align-items: center; gap: .25rem;
  color: var(--primary); font-size: .875rem; font-weight: 500;
  margin: .75rem 0 1.5rem; cursor: pointer;
}
.read-more:hover { color: color-mix(in oklab, var(--primary) 80%, white); }
.more-content { display: none; margin-top: 1rem; }
.more-content.open { display: block; }
.more-content p { margin-bottom: .75rem; font-size: .95rem; color: var(--muted-foreground); }
.more-content p.bold { color: var(--foreground); font-weight: 500; }

.tag {
  display: inline-flex; align-items: center; gap: .35rem;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  padding: .25rem .85rem; border-radius: 9999px;
  font-size: .75rem; font-weight: 500;
}
.tag svg { width: 14px; height: 14px; }
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }

.price { font-size: 2rem; font-weight: 600; margin-bottom: .5rem; }
.free-cancel { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--accent); margin-bottom: 1.5rem; }
.free-cancel svg { width: 16px; height: 16px; flex-shrink: 0; }

.included-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.included-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px) { .included-grid { grid-template-columns: 1fr 1fr; } }
.included-item {
  display: flex; align-items: center; gap: .5rem;
  background: var(--background); padding: .75rem 1rem;
  border-radius: 8px; font-size: .875rem;
}
.included-item svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* ============ About ============ */
.about { padding: 2.5rem 0; }
@media (min-width: 768px) { .about { padding: 42px 0; } }
.about p { max-width: 48rem; margin: 0 auto; text-align: center; font-size: 1.05rem; line-height: 1.7; }

/* ============ Why Paddle With Us ============ */
.section-title { text-align: center; font-size: 2rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .section-title { font-size: 2.5rem; } }

.cards-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .cards-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cards-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.feature-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.5rem;
  transition: box-shadow .2s;
}
.feature-card:hover { box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--foreground) 15%, transparent); }
.icon-box {
  height: 44px; width: 44px; border-radius: 10px;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); margin-bottom: 1rem;
}
.icon-box svg { width: 20px; height: 20px; }
.feature-card h3 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; margin-bottom: .5rem; }
.feature-card p { font-size: .875rem; color: var(--muted-foreground); line-height: 1.6; }

.center { display: flex; justify-content: center; }
.mt-8 { margin-top: 2rem; }

/* ============ Timeline (What to Expect) ============ */
.timeline { max-width: 28rem; margin: 0 auto; position: relative; }
.timeline::before { content: ""; position: absolute; left: 23px; top: 1rem; bottom: 1rem; width: 1px; background: var(--border); }
.timeline-item { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem; position: relative; }
.timeline-icon {
  height: 48px; width: 48px; border-radius: 50%;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  border: 2px solid color-mix(in oklab, var(--primary) 20%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); flex-shrink: 0; z-index: 1;
  position: relative;
}
.timeline-icon svg { width: 20px; height: 20px; }
.timeline-step { font-size: .7rem; font-weight: 500; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .1em; }
.timeline-title { font-family: var(--font-body); font-size: .95rem; font-weight: 600; }

/* ============ Where to meet ============ */
.meet-info-item { display: flex; align-items: center; gap: .75rem; font-size: .875rem; margin-bottom: 1rem; }
.meet-info-item svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }
.meet-img { border-radius: 12px; overflow: hidden; }
.meet-img img { width: 100%; height: 260px; object-fit: cover; }
@media (min-width: 768px) { .meet-img img { height: 360px; } }

/* ============ Tour Highlights list ============ */
.highlights-list { display: flex; flex-direction: column; gap: .65rem; max-width: 48rem; margin: 0 auto; }
.highlight-row {
  display: flex; align-items: center; gap: .75rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: .75rem 1rem;
}
.highlight-row .icon-box-sm {
  height: 32px; width: 32px; border-radius: 50%;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.highlight-row .icon-box-sm svg { width: 16px; height: 16px; }
.highlight-row p { font-size: .95rem; font-weight: 700; }

/* ============ Feature image band ============ */
.feature-band {
  padding: 1.5rem 1rem;
  max-width: 80vw;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

@media (min-width: 768px){
  .feature-band { 
    padding: 2rem 1rem; 
    max-width: 60vw;
    height: 60vh;
  } 
}

.feature-band img {
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 16px;
}
@media (min-width: 768px) {
  .feature-band img {
    
  }
}

/* ============ FAQ ============ */
.faq-wrap { max-width: 42rem; margin: 0 auto; }
.faq-intro { text-align: center; color: var(--muted-foreground); margin-bottom: 2rem; font-size: .95rem; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; text-align: left;
  padding: 1rem 0; font-size: .95rem; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-q .chev { transition: transform .2s; flex-shrink: 0; }
.faq-q .chev svg { width: 16px; height: 16px; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; color: var(--muted-foreground); font-size: .9rem; }
.faq-item.open .faq-a { max-height: 400px; padding-bottom: 1rem; }

/* ============ CTA "Ready for the adventure" ============ */
.cta { position: relative; padding: 4rem 0; overflow: hidden; }
@media (min-width: 768px) { .cta { padding: 6rem 0; } }
.cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-overlay { position: absolute; inset: 0; background: color-mix(in oklab, var(--primary) 80%, transparent); }
.cta-content { position: relative; z-index: 1; text-align: center; color: var(--primary-foreground); }
.cta-content h2 { font-size: 2rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .cta-content h2 { font-size: 2.5rem; } }
.cta-content p { color: color-mix(in oklab, var(--primary-foreground) 85%, transparent); max-width: 32rem; margin: 0 auto 2rem; font-size: .95rem; }

/* ============ Sticky mobile book bar ============ */
.sticky-book {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: color-mix(in oklab, var(--background) 95%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: .75rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
}
.sticky-book .price-sm { font-size: 1.1rem; font-weight: 600; }
@media (min-width: 768px) { .sticky-book { display: none; } }

/* ============ Footer ============ */
.site-footer { border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 50%, transparent); margin-top: 2rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-brand { display: flex; align-items: center; gap: .5rem; color: var(--primary); margin-bottom: .75rem; font-weight: 600; font-family: var(--font-heading); }
.footer p, .footer li { font-size: .875rem; color: var(--muted-foreground); }
.footer h4 { font-family: var(--font-body); font-size: .875rem; font-weight: 600; color: var(--foreground); margin-bottom: .75rem; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer ul a:hover { color: var(--primary); }
.footer-bottom { border-top: 1px solid var(--border); text-align: center; font-size: .75rem; color: var(--muted-foreground); padding: 1.5rem 0; }

main { padding-bottom: 4rem; }
@media (min-width: 768px) { main { padding-bottom: 0; } }

/* ============ Guides + Contact pages ============ */
.page-section { padding: 5rem 0; }
.page-header { text-align: center; max-width: 36rem; margin: 0 auto 3.5rem; }
.page-header h1 { font-size: 2.5rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .page-header h1 { font-size: 3rem; } }
.page-header p { color: var(--muted-foreground); font-size: 1.05rem; }

.guides-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .guides-grid { grid-template-columns: 1fr 1fr; } }
.guide-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: box-shadow .2s; }
.guide-card:hover { box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--foreground) 15%, transparent); }
.guide-photo { aspect-ratio: 4 / 5; background: var(--muted); overflow: hidden; }
.guide-photo img { width: 100%; height: 100%; object-fit: cover; }
.guide-body { padding: 2rem; text-align: center; }
.guide-body h3 { font-size: 1.3rem; margin-bottom: .25rem; }
.guide-role { display: block; font-size: .75rem; font-weight: 500; color: var(--primary); margin-bottom: .75rem; }
.guide-bio { font-size: .9rem; color: var(--muted-foreground); line-height: 1.7; }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; max-width: 64rem; margin: 0 auto; align-items: center; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.contact-item .icon-box { margin-bottom: 0; }
.contact-item h3 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; margin-bottom: .25rem; }
.contact-item a { font-size: .9rem; color: var(--muted-foreground); }
.contact-item a:hover { color: var(--primary); }
.info-box { background: color-mix(in oklab, var(--muted) 40%, transparent); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; margin-top: 1rem; }
.info-box .label { font-size: .875rem; font-weight: 600; margin-bottom: .5rem; }
.info-box ul { list-style: none; font-size: .875rem; color: var(--muted-foreground); display: flex; flex-direction: column; gap: .35rem; }
.contact-photo { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.contact-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }