/* ---------- Base / Theme ---------- */
:root{
  --navy: #0d1b2a;
  --navy-2: #14283c;
  --blue: #2b7fc4;
  --blue-light: #5aa9e6;
  --bg-light: #eef3f9;
  --bg-white: #ffffff;
  --text-dark: #16202c;
  --text-gray: #5c6b7a;
  --border: #dde5ee;
  --whatsapp: #25d366;
  --whatsapp-dark: #1ebe5b;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(13, 27, 42, 0.08);
  --container: 1180px;
}

*{ box-sizing: border-box; margin:0; padding:0; }

html{ scroll-behavior: smooth; }

body{
  font-family: 'Heebo', Arial, sans-serif;
  color: var(--text-dark);
  background: var(--bg-white) url('../images/ski13.jpeg') top center / cover no-repeat fixed;
  line-height: 1.6;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.accent{ color: var(--blue); }

/* ---------- Service card media ---------- */
.placeholder-media-sm{
  position: relative;
  height: 160px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.placeholder-media-sm img,
.placeholder-media-sm video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--navy);
}
.placeholder-media-portrait{
  height: 340px;
}
.placeholder-media-portrait video{
  object-fit: contain;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 15px 30px;
  border-radius: 8px;
  font-weight:600;
  font-size: 0.98rem;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--blue);
  color:#fff;
  box-shadow: 0 8px 20px rgba(43,127,196,0.35);
}
.btn-primary:hover{ background:#2469a8; transform: translateY(-1px); }
.btn-small{ padding: 10px 20px; font-size: 0.9rem; }

.btn-whatsapp{
  background: var(--whatsapp);
  color:#fff;
  box-shadow: 0 8px 24px rgba(37,211,102,0.4);
}
.btn-whatsapp:hover{ background: var(--whatsapp-dark); transform: translateY(-1px); }

/* ---------- Header ---------- */
.site-header{
  position: fixed;
  top:0; right:0; left:0;
  z-index: 100;
  padding: 18px 0;
  transition: padding .25s ease, box-shadow .25s ease;
}
/* Ski photo behind the header, kept translucent (via opacity, not a flat
   overlay) so the falling snow in the hero underneath still reads through it. */
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url('../images/ski-background.jpg');
  background-size: cover;
  background-position: center 20%;
  opacity: 0.3;
  z-index:0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.site-header.scrolled::before{
  opacity: 0.16;
}
.site-header.scrolled{
  background: rgba(13,27,42,0.82);
  backdrop-filter: blur(8px);
  padding: 12px 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.header-inner{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  gap: 28px;
}
.logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:1.15rem;
  color:#fff;
  margin-left: auto;
}
.logo-mark{ height: 24px; width: auto; }
.main-nav{
  display:flex;
  align-items:center;
  gap: 26px;
  margin-right: auto;
}
.main-nav a{
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
  padding: 4px 0;
}
.main-nav a::after{
  content:"";
  position:absolute; right:0; bottom:-2px;
  width:0; height:2px;
  background: var(--blue-light);
  transition: width .2s ease;
}
.main-nav a:hover::after{ width:100%; }
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding: 4px;
}
.nav-toggle span{
  width: 24px; height: 2px;
  background:#fff;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* ---------- Full-bleed parallax sections (hero / philosophy / contact) ----------
   Each section carries its own fixed-attachment background so it reads as a
   real photo behind the content, with real scroll parallax (not a shared canvas).
   Layer stack (top to bottom): dark overlay for text legibility, the real-photo
   hook (--bg-hero / --bg-philosophy / --bg-contact — still empty), three
   mountain-ridge silhouettes for depth, then a sky gradient at the base.
   To swap in a real photo: add url('images/xxx.jpg') to that section's --bg-*
   variable below — being opaque, it paints over the illustrated ridges
   automatically, no other change needed. */
.hero, .philosophy, .contact{
  position: relative;
  color:#fff;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position:
    center,            /* overlay */
    center,            /* real photo hook */
    bottom center,     /* near ridge */
    bottom center,     /* mid ridge */
    bottom center,     /* far ridge */
    center,            /* vignette glow */
    center;            /* sky */
  background-size:
    cover,
    cover,
    95% auto,
    115% auto,
    140% auto,
    cover,
    cover;
}
.hero{
  --bg-hero: url('../images/ski3.jpg');
  background-image:
    linear-gradient(180deg, rgba(8,16,26,0.22) 0%, rgba(8,16,26,0.4) 55%, rgba(8,16,26,0.78) 100%),
    var(--bg-hero, none),
    url('../images/mtn-near.svg?v=2'),
    url('../images/mtn-mid.svg?v=2'),
    url('../images/mtn-far.svg?v=2'),
    radial-gradient(circle at 30% 15%, rgba(90,169,230,0.3), transparent 55%),
    linear-gradient(180deg, #1c3550 0%, #0d1b2a 60%, #060d16 100%);
}
.philosophy{
  --bg-philosophy: url('../images/tomer-wave.jpeg');
  background-image:
    linear-gradient(180deg, rgba(8,16,26,0.32) 0%, rgba(8,16,26,0.72) 100%),
    var(--bg-philosophy, none),
    url('../images/mtn-near.svg?v=2'),
    url('../images/mtn-mid.svg?v=2'),
    url('../images/mtn-far.svg?v=2'),
    radial-gradient(circle at 75% 20%, rgba(90,169,230,0.22), transparent 55%),
    linear-gradient(180deg, #16344f 0%, #0d1b2a 60%, #060d16 100%);
  /* The wave photo is wide/short; plain "cover" zooms in hard on tall
     sections and crops it into an unrecognisable strip. Size that layer
     by width instead so the whole wave stays in frame and reads as sea. */
  background-size:
    cover,
    100% auto,
    95% auto,
    115% auto,
    140% auto,
    cover,
    cover;
}
.contact{
  --bg-contact: url('../images/ski14.jpeg');
  background-image:
    linear-gradient(180deg, rgba(8,16,26,0.28) 0%, rgba(8,16,26,0.72) 100%),
    var(--bg-contact, none),
    url('../images/mtn-near.svg?v=2'),
    url('../images/mtn-mid.svg?v=2'),
    url('../images/mtn-far.svg?v=2'),
    radial-gradient(circle at 50% 20%, rgba(90,169,230,0.22), transparent 55%),
    linear-gradient(180deg, #0d1b2a 0%, #16344f 60%, #060d16 100%);
}

/* iOS Safari doesn't support background-attachment:fixed well, and it's
   unnecessary overhead on small screens anyway */
@media (max-width: 760px){
  .hero, .philosophy, .contact, body{ background-attachment: scroll; }
}

/* ---------- Hero ---------- */
.hero{
  min-height: 100vh;
  display:flex;
  align-items:center;
  padding-top: 120px;
  padding-bottom: 80px;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  transition: opacity .7s ease;
}
.hero-poster.is-hidden{
  opacity:0;
  pointer-events:none;
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background-image: linear-gradient(180deg, rgba(8,16,26,0.32) 0%, rgba(8,16,26,0.58) 50%, rgba(8,16,26,0.85) 100%);
}
.hero-content{
  position:relative;
  z-index:3;
  max-width: 720px;
}
.eyebrow{
  color: var(--blue-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight:700;
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.eyebrow-dark{ color: var(--blue); }
.hero h1{
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 22px;
}
.hero h1 .line-light{ color:#fff; }
.hero h1 .line-accent{ color: var(--blue-light); }
.hero h1 span{ display:block; }
.hero-lead{
  font-size: 1.25rem;
  font-weight: 500;
  color:#fff;
  margin-bottom: 14px;
}
.hero-desc{
  color: rgba(255,255,255,0.75);
  font-size: 1.02rem;
  max-width: 620px;
  margin-bottom: 34px;
}
.hero-actions{
  display:flex;
  align-items:center;
  gap: 28px;
  flex-wrap: wrap;
}
.scroll-hint{
  display:flex;
  align-items:center;
  gap:8px;
  color: rgba(255,255,255,0.8);
  font-weight:600;
  font-size: 0.95rem;
}
.scroll-hint svg{ animation: bounce 1.8s infinite; }
@keyframes bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(4px); }
}

/* ---------- Sections generic ---------- */
.section{
  padding: 100px 0;
  position: relative;
  /* Without this, the fixed mountain photo behind the body shows through
     at full strength and washes out body text wherever it sits over
     bright snow (e.g. the About/Services sections). Longhand only: the
     `background` shorthand would reset background-image/position/size on
     .philosophy and .contact, which also carry the .section class and
     define their own full-bleed photo backgrounds further down. */
  background-color: rgba(255,255,255,0.94);
}
.section-alt{ background-color: rgba(238,243,249,0.88); }
.section-heading{
  text-align:center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.section-heading h2, .about-text h2{
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 800;
  color: var(--navy);
}

/* ---------- About ---------- */
.about-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 70px;
  align-items:start;
}
.about-text h2{ margin-bottom: 22px; }
.body-text{
  color: var(--text-gray);
  margin-bottom: 18px;
  font-size: 1.02rem;
}
.feature-list{
  margin-top: 30px;
  display:flex;
  flex-direction:column;
  gap: 20px;
}
.feature-list li{
  display:flex;
  gap: 16px;
  align-items:flex-start;
}
.feature-icon{
  flex-shrink:0;
  width: 46px; height:46px;
  border-radius: 10px;
  background: #e4f0fa;
  color: var(--blue);
  display:flex; align-items:center; justify-content:center;
}
.feature-icon-light{
  background: rgba(255,255,255,0.12);
  color: var(--blue-light);
}
.feature-list h3{
  font-size: 1.02rem;
  margin-bottom: 4px;
  color: var(--navy);
}
.feature-list p{ color: var(--text-gray); font-size: 0.95rem; }

.credentials{
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.credentials-title{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight:700;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.credentials-title::-webkit-details-marker{ display:none; }
.credentials-title::before{
  content:"";
  width: 8px; height: 8px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform .2s ease;
  flex-shrink:0;
}
.credentials[open] .credentials-title::before{
  transform: rotate(-135deg);
}
.credentials[open] .credentials-title{
  margin-bottom: 16px;
}
.credentials-list{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.credentials-list li{
  display:flex;
  gap: 14px;
  align-items:baseline;
  font-size: 0.92rem;
  color: var(--text-gray);
}
.cred-year{
  flex-shrink:0;
  min-width: 78px;
  font-weight:700;
  color: var(--blue);
  font-size: 0.88rem;
}

.about-media{ position:relative; }
.framed-media{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.framed-media img{
  width: 100%;
  height: auto;
}
.about-media::before{
  content:"";
  position:absolute;
  top:-16px; left:-16px;
  width: 70px; height:70px;
  border-top: 3px solid var(--blue);
  border-left: 3px solid var(--blue);
  border-radius: 6px 0 0 0;
  z-index:0;
}
.about-media::after{
  content:"";
  position:absolute;
  bottom:-16px; right:-16px;
  width: 70px; height:70px;
  border-bottom: 3px solid var(--blue);
  border-right: 3px solid var(--blue);
  border-radius: 0 0 6px 0;
  z-index:0;
}
.framed-media{ z-index:1; }

/* ---------- Philosophy ---------- */
.philosophy-content{
  position:relative; z-index:2;
  text-align:center;
  max-width: 900px;
  margin: 0 auto;
}
.philosophy h2{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  margin-bottom: 22px;
}
.philosophy-lead{
  color: rgba(255,255,255,0.8);
  font-size: 1.08rem;
  max-width: 720px;
  margin: 0 auto 50px;
}
.philosophy-cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.ph-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: right;
  backdrop-filter: blur(6px);
}
.ph-card .feature-icon{ margin-bottom: 16px; }
.ph-card h3{ font-size: 1rem; margin-bottom: 8px; }
.ph-card p{ font-size: 0.88rem; color: rgba(255,255,255,0.7); }
.philosophy-closing{
  color: rgba(255,255,255,0.65);
  font-size: 0.98rem;
  max-width: 760px;
  margin: 0 auto;
}

/* ---------- Services ---------- */
.services-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.service-card{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding-bottom: 30px;
}
.service-card h3{
  font-size: 1.25rem;
  color: var(--navy);
  margin: 24px 26px 10px;
}
.service-card > p{
  color: var(--text-gray);
  margin: 0 26px 18px;
  font-size: 0.96rem;
}
.badge{
  position:absolute;
  top:16px; left:16px;
  background: rgba(13,27,42,0.55);
  color:#fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight:600;
  backdrop-filter: blur(3px);
}
.badge-winter{ background: rgba(43,127,196,0.85); border-color: rgba(43,127,196,0.85); }
.check-list{
  margin: 0 26px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.check-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size: 0.92rem;
  color: var(--text-dark);
}
.check-list svg{ color: var(--blue); flex-shrink:0; margin-top:3px; }

.destinations{
  margin: 22px 26px 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.destinations-title{
  font-size: 0.85rem;
  font-weight:700;
  color: var(--navy);
  margin-bottom: 10px;
}
.destination-tags{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.destination-tags span{
  background: var(--bg-light);
  color: var(--text-dark);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
}

/* ---------- Video gallery ---------- */
.video-gallery-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.video-card{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--navy);
}
.video-card video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Testimonials ---------- */
.video-testimonials-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-bottom: 30px;
}
.video-testimonial-card{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--navy);
}
.video-testimonial-card video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.review-gallery{
  columns: 4 220px;
  column-gap: 18px;
}
.review-gallery-item{
  display:block;
  width:100%;
  border:none;
  padding:0;
  background:none;
  cursor: zoom-in;
  break-inside: avoid;
  margin-bottom: 18px;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.review-gallery-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0,0,0,0.16);
}
.review-gallery-item img{
  display:block;
  width:100%;
  height:auto;
}

/* ---------- Lightbox ---------- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 200;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(10,14,20,0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.lightbox.is-open{ opacity: 1; visibility: visible; }
.lightbox-img{
  max-width: min(90vw, 720px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.lightbox-close{
  position:absolute;
  top: 20px;
  left: 24px;
  width: 44px; height: 44px;
  border:none;
  border-radius:50%;
  background: rgba(255,255,255,0.12);
  color:#fff;
  font-size: 1.8rem;
  line-height:1;
  cursor:pointer;
  transition: background .2s ease;
}
.lightbox-close:hover{ background: rgba(255,255,255,0.22); }
.lightbox-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border:none;
  border-radius:50%;
  background: rgba(255,255,255,0.12);
  color:#fff;
  font-size: 2rem;
  line-height:1;
  cursor:pointer;
  transition: background .2s ease;
}
.lightbox-nav:hover{ background: rgba(255,255,255,0.22); }
.lightbox-prev{ left: 20px; }
.lightbox-next{ right: 20px; }

/* ---------- Contact ---------- */
.contact{ padding: 120px 0; text-align:center; }
.contact-content{ position:relative; z-index:2; max-width: 640px; margin: 0 auto; }
.contact h2{ font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight:800; margin-bottom: 18px; }
.contact-lead{ color: rgba(255,255,255,0.78); font-size: 1.05rem; margin-bottom: 36px; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--navy);
  color: rgba(255,255,255,0.7);
  padding: 34px 0;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.site-footer .logo{ color:#fff; margin-left:0; }
.footer-logo-mark{ height: 26px; width: auto; }
.footer-nav{ display:flex; gap: 22px; flex-wrap:wrap; }
.footer-nav a{ font-size: 0.9rem; color: rgba(255,255,255,0.7); }
.footer-nav a:hover{ color:#fff; }
.copyright{ font-size: 0.85rem; }

/* ---------- Floating WhatsApp ---------- */
.whatsapp-float{
  position: fixed;
  bottom: 26px;
  left: 26px;
  width: 58px; height: 58px;
  background: var(--whatsapp);
  color:#fff;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px rgba(37,211,102,0.45);
  z-index: 90;
  transition: transform .2s ease;
}
.whatsapp-float:hover{ transform: scale(1.08); }

/* ---------- Reveal animation ---------- */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in-view{
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-media{ order:-1; width: 100%; max-width: 420px; margin: 0 auto; }
  .philosophy-cards{ grid-template-columns: repeat(2, 1fr); }
  .services-grid{ grid-template-columns: 1fr; }
  .review-gallery{ columns: 3 180px; }
  .video-gallery-grid{ grid-template-columns: 1fr; }
  .video-testimonials-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .review-gallery{ columns: 2 140px; column-gap: 12px; }
  .review-gallery-item{ margin-bottom: 12px; }
  .lightbox-nav{ width: 42px; height: 42px; font-size: 1.6rem; }
  .lightbox-close{ width: 38px; height: 38px; font-size: 1.5rem; top: 12px; left: 12px; }
  .lightbox-prev{ left: 8px; }
  .lightbox-next{ right: 8px; }

  .site-header.nav-open .main-nav{
    display:flex;
    position:absolute;
    top: 100%; right:0; left:0;
    background: var(--navy);
    flex-direction:column;
    align-items:flex-start;
    padding: 20px 24px;
    gap: 16px;
    margin:0;
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
  }
  .site-header.nav-open .nav-cta{
    margin-top: 4px;
  }

  .hero{ padding-top: 140px; text-align:center; }
  .hero-content{ margin: 0 auto; }
  .hero-actions{ justify-content:center; }
  .section{ padding: 70px 0; }
  .philosophy-cards{ grid-template-columns: 1fr; }
}