/* =========================================================
   home.css — homepage-specific styles (clean, fixed carousel)
   ========================================================= */

/* Layout frame */
.base, .wrapper {
  position: relative;
  max-width: 100%;
  padding: 2.5vw;
  margin: auto;
  box-sizing: border-box;
}
.base{ padding-top:0; }
.wrapper{ margin:121px auto; padding-top:0; }

/* Minimal helpers */
section{ margin:0; padding:0; }
img{ max-width:100%; height:auto; display:block; } /* global default */
h1, h2, h3{ line-height:1.2; }
h2, h3{ margin:.5em 0; }
blockquote{ margin:0; padding:0; }
*{ font-family:"Montserrat", sans-serif; }

/* Palette + rhythm */
:root{
  --brand:#4c5c39; --brand-2:#3c492d;
  --ink:#222; --ink-2:#444;
  --paper:#fff; --paper-2:#f7f7f7;
  --shadow:0 10px 24px rgba(0,0,0,.12);
  --radius:14px;

  --space-xl:4.5rem; --space-lg:3rem; --space-md:2rem; --space-sm:1rem;

  /* Carousel controls */
  --carousel-arrow-size:48px;
  --carousel-arrow-icon:24px;
  --carousel-arrow-color:#fff;
  --carousel-arrow-bg:rgba(76,92,57,.85);
  --carousel-arrow-bg-hover:rgba(60,73,45,.95);
  --carousel-arrow-radius:999px;
  --carousel-arrow-offset:10px;
  --carousel-pagination-color:rgba(255,255,255,.45);
  --carousel-pagination-active:#fff;
}

/* ---------- HERO VIDEO (unchanged) ---------- */
.hero-video{ position:relative; width:100%; aspect-ratio:16/9; height:auto; overflow:hidden; }
.hero-video .hero-embed{ position:relative; width:100%; height:100%; overflow:hidden; background:#eee; }
/*.hero-video .hero-embed::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.18)); pointer-events:none; } */
.hero-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; transform:translateZ(0); }
/* Sound toggle */
.sound-toggle{ position:absolute; right:16px; top:16px; width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.85); background:rgba(0,0,0,.6); color:#fff; display:grid; place-items:center; cursor:pointer; transition:background .2s, border-color .2s; z-index:3; box-shadow:0 6px 16px rgba(0,0,0,.35); backdrop-filter:saturate(120%) blur(2px);opacity:.6;transition:opacity .3s; }
.sound-toggle:hover{ background:rgba(0,0,0,.72); border-color:rgba(255,255,255,.95); opacity:1; }
.sound-toggle .icon{ width:30px; height:30px; fill:#fff; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.65)); }

/* ---------- SERVICES (unchanged from your last good state) ---------- */
.services{
  --bg:#6f7f42; --caption-bg:#485020; --gap:2.5%; --title:#fff;
  background:var(--bg); border-radius:2vw;
  font-family:"new-spirit","Times New Roman",Times,serif;
  padding-block:clamp(24px,4vw,55px);
  margin:clamp(24px,2vw,55px);
  overflow:hidden;
  --fade-duration:500ms; --stagger:140ms;
}
#services-heading{ font-family:"new-spirit",serif !important; }
.services__inner{ padding-inline:var(--gap); }
.services__title{text-transform: uppercase;color:var(--title); font-weight:500; text-align:center; margin:0 0 clamp(16px,3vw,28px); font-size:36px; }
.services__grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(3, minmax(0,1fr)); align-items:stretch; }
.service-card{ display:flex; flex-direction:column; text-decoration:none !important; color:inherit; outline-offset:3px; height:auto; overflow:visible; margin:0; }
.service-card__media{ position:relative; overflow:hidden; aspect-ratio:8/9;border-radius: 1vw 1vw 0 0; }
.service-card__img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; will-change:transform; }
.services .service-card:hover .service-card__img,
.services .service-card:focus-visible .service-card__img{ transform:scale(1.06); }
.service-card__caption{ background:var(--caption-bg); color:#fff; text-transform:uppercase; font-weight:500; text-align:center; padding-block:22px; padding-inline:10px; line-height:1.2; margin:0; font-size:22px; border-radius: 0 0 1vw 1vw;}

a.service-card:hover .service-card__caption{ text-decoration-line:none !important; }
.service-card:focus-visible .service-card__caption, .service-card:hover .service-card__caption{ filter:brightness(1.06); }
.services .service-card{ opacity:0;border-radius:2vw;  }
.services.is-inview .service-card{ animation:servicesFade var(--fade-duration) ease forwards; }
.services.is-inview .service-card:nth-child(1){ animation-delay:0ms; }
.services.is-inview .service-card:nth-child(2){ animation-delay:var(--stagger); }
.services.is-inview .service-card:nth-child(3){ animation-delay:calc(var(--stagger)*2); }
@media (max-width:780px){
.service-card__media{ border-radius: 2vw 2vw 0 0; }
.service-card__caption{ border-radius: 0 0 2vw 2vw;}
   .services{background-color:transparent;padding:0;}
   .services__inner{padding:0;}
   .services__title{color:var(--caption-bg);}
   .services .services__grid{ grid-template-columns:1fr; } 
   .services__grid{ padding-bottom:120px; } 
}
@keyframes servicesFade{ from{opacity:0;} to{opacity:1;} }
@media (prefers-reduced-motion:reduce){ .services .service-card{ opacity:1 !important; animation:none !important; } .services .service-card__img{ transition:none; } }

/* ---------- STATS (unchanged) ---------- */
.stats{ display:flex; flex-wrap:wrap; justify-content:space-around; align-items:flex-start; background:var(--brand); color:#fff; padding:var(--space-lg) var(--space-sm); text-align:center; margin:5vw auto; border-radius:2vw; }
.stat{ flex:1 1 220px; margin:.5rem 0; font-size:clamp(2.2rem,5vw,5.2rem); font-weight:600; }
.stat i{ font-size:2rem; margin-bottom:.35rem; display:block; }
.stat .count{ font-size:clamp(2.2rem,5vw,5.2rem); font-weight:600; display:inline-block; margin:.25rem 0; }
.stat p{ margin:0; opacity:.95; font-size:15px; font-weight:400; }

/* =========================================================
   HERO / IMAGE CAROUSEL — mock-accurate (tablet/desktop)
   ========================================================= */
.hero-carousel{
  /* Height follows viewport width (adjust the middle value to taste) */
  --hero-h: clamp(420px, 47vw, 7800px);

  /* Pill (green bar) */
  --pill-h: 64px;
  --pill-bg: #4c5c39;   /* deep brand green */
  --pill-fg: #ffffff;
  --pill-accent: #cfe08a; /* SEE MORE */

  /* Arrows (mock) */
  --arrow-size: 56px;
  --arrow-bg: #6b7a46;        /* olive/brand green */
  --arrow-bg-hover: #5a6b2e;  /* darker hover */
  --arrow-fg: #ffffff;
  --arrow-edge-offset: 14px;

  position: relative;

  /* Reserve space so the pill can hang outside without getting cut off */
  padding-bottom: calc(var(--pill-h) * 0.6 + 12px);
  margin-bottom: 1rem;
}

/* The inner frame has the fixed height; we’ll mask the image corners inside it */
.hero-carousel__inner{
  position: relative;
  height: var(--hero-h);
  overflow: visible; /* absolutely required so the pill can overhang */
}

/* Swiper container fills the frame */
.hero-swiper{
  position: absolute; inset: 0;
  height: 100%;
  overflow: visible;
}

/* Each slide fills the full height */
.swiper-slide{ height: 100%; }

/* Figure holds two layers:
   1) an .image-mask that clips rounded corners
   2) the pill that overhangs */
.slide-figure{
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0;
}

/* Rounded-corner image mask that does the clipping, but does NOT clip the pill */
.slide-figure::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  /* create a stacking context for the image under the pill */
  z-index: 0;
}

/* Make the image truly cover the full area, regardless of aspect */
.slide-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* <-- matches the Photoshop look */
  border-radius: 18px;         /* matches the mask edge */
  z-index: 0;
}

/* Pill — sits on the bottom edge of the image and hangs by 50% */
.slide-badge{
  position: absolute;
  left: 50%;
  bottom: 0;                   /* anchor to image bottom */
  transform: translate(-50%, 50%); /* hang half outside */
  height: var(--pill-h);
  background: var(--pill-bg);
  color: var(--pill-fg);
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  z-index: 2;                  /* above the image */
}
.slide-badge .see-more{
  color: var(--pill-accent);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Arrows — centered on the IMAGE height (not the pill overhang) */
.hero-nav{
  position: absolute;
  top: calc(var(--hero-h) / 2);
  transform: translateY(-50%);
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-radius: 999px;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--arrow-bg);
  color: var(--arrow-fg);
  cursor: pointer;
  z-index: 3;
}
.hero-prev{ left: var(--arrow-edge-offset); }
.hero-next{ right: var(--arrow-edge-offset); }
.hero-nav:hover{ background: var(--arrow-bg-hover); }
.hero-nav:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.hero-nav-icon{ font-size: 24px; line-height: 1; }

/* Optional dots; keep hidden unless you want them */
.hero-pagination{ display: none; }

/* Mobile: allow the pill to wrap and scale down slightly */
@media (max-width: 640px){
  .hero-carousel{ --pill-h: 56px; }
  .slide-badge{ padding: 10px 18px; font-size: 16px; white-space: normal; }
}



.swiper-wrapper{max-height:none;}
.swiper-wrapper img{max-height:calc(100% - 50px);}


/* ---------- LOWER SPLIT / FEATURE CARD ---------- */
.feature-card{ padding:clamp(16px,2.5vw,40px); }

/* ---------- INSTAGRAM (3 columns) ---------- */
.instagram-feed{ padding:5vw 0 0 0; text-align:center; }
.instagram-feed h2{ font-size:clamp(1.6rem,2.5vw,2rem); margin-bottom:.25rem; }
.insta-grid{ margin-top:var(--space-md); display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .insta-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .insta-grid{ grid-template-columns:1fr; } }
.insta-item{ background:#d8d8d8; border-radius:10px; aspect-ratio:1/1; position:relative; overflow:hidden; }
.insta-item::after{
  content:"\f16d"; font-family:"Font Awesome 5 Brands"; font-weight:400;
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:2rem; color:rgba(255,255,255,.9);
  opacity:0; background:rgba(0,0,0,.38); transition:opacity .25s;
}
.insta-item:hover::after{ opacity:1; }

/* =========================
   MOSAIC GRID (unchanged)
   ========================= */
.mosaic{ padding:0; margin:5vw auto; }
.mosaic-grid{ --gap:1rem; --img-ratio:9/7; display:grid; gap:var(--gap); }
.mosaic-tile{ position:relative; width:100%; aspect-ratio:var(--img-ratio); border-radius:.5vw; overflow:hidden; box-shadow:var(--shadow); background:#eaeaea; }
.mosaic-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mosaic-tile--text{
  background:transparent !important; box-shadow:none !important; border-radius:0 !important;
  aspect-ratio:auto; height:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 clamp(1rem,3vw,2rem); color:var(--ink,#222);
}
.mosaic-tile--text h2{ font-size:clamp(2.3rem,3vw,36px); margin-top:1rem;margin-bottom:.5rem; color:#485020; font-family:"new-spirit","Times New Roman",Times,serif;font-weight:500; }
.mosaic-tile--text p{ font-size:16px; line-height:1.55; margin-bottom:.75rem; color:#485020; }
.mosaic-tile--text p a{ color:#a0b635; text-decoration:none !important;font-weight:700; }
@media (min-width:1350px){ .mosaic-tile--text{ height:100%; } }
.i1{grid-area:i1;} .i2{grid-area:i2;} .i3{grid-area:i3;} .i4{grid-area:i4;} .i5{grid-area:i5;}
.i6{grid-area:i6;} .i7{grid-area:i7;} .i8{grid-area:i8;} .i9{grid-area:i9;} .i10{grid-area:i10;}
.t{grid-area:t;}
.mosaic-grid{
  grid-template-columns:repeat(6,1fr);
  grid-template-areas:
    "i1  i1  i2  i2  i3  i3"
    "i4  i4  i4  i5  i5  i5"
    "t   t   t   t   t   t"
    "i6  i6  i6  i7  i7  i7"
    "i8  i8  i9  i9  i10 i10";
}
@media (min-width:768px) and (max-width:1349.98px){
  .mosaic-grid{
    grid-template-columns:repeat(5,1fr);
    grid-template-areas:
      "i1 i2 i3 i4 i5"
      "t  t  t  t  t"
      "i6 i7 i8 i9 i10";
  }
}
@media (min-width:1350px){
  .mosaic-grid{
    grid-template-columns:repeat(4,1fr);
    grid-template-areas:
      "i1 i2 i3 i4"
      "i5 t  t  i6"
      "i7 i8 i9 i10";
  }
   .mosaic-tile--text h2{ margin-top:0; }
   
}

/* ---------- Reveal utilities ---------- */
.reveal{ opacity:0; transform:translateY(8px);
  transition: opacity var(--reveal-dur,600ms) ease var(--reveal-delay,0ms),
              transform var(--reveal-dur,600ms) ease var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.reveal.reveal-zoom{ transform:scale(.96); }
.reveal.inview{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
}

/* ===== HARD OVERRIDES vs app.css (scoped) ===== */

/* Kill app.css max-heights inside the hero only */
.hero-carousel .swiper,
.hero-carousel .swiper-wrapper,
.hero-carousel .swiper-slide{
  height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Ensure the image really fills vertically and isn’t capped by any global img rule */
.hero-carousel .slide-figure{ height: 100% !important; overflow: hidden !important; }
.hero-carousel .slide-img{
  height: 100% !important;
  width: 100% !important;       /* cover layout */
  max-height: none !important;
  max-width: none !important;
  object-fit: cover !important; /* Photoshop look */
  object-position: center center;
  border-radius: 18px;          /* match mock corners if used */
}

/* Pill never clips: reserve room below and allow overhang */
.hero-carousel{
  --pill-h: 64px;               /* tune to your mock */
  padding-bottom: calc(var(--pill-h) * .6 + 12px) !important;
}
.hero-carousel .slide-badge{
  position: absolute;
  left: 50%; bottom: 0;
  transform: translate(-50%, 50%);
  height: var(--pill-h);
  padding: 0 28px;
  background: #4c5c39; color: #fff;
  border-radius: 999px;
  font-weight: 700; font-size: 19px; line-height: 1;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 14px;
  z-index: 3;
}
.hero-carousel .slide-badge .see-more{
  color: #cfe08a; text-decoration: none; font-weight: 800; letter-spacing: .02em;
}

/* Arrows: brand green, circular, centered on image height */
.hero-carousel{
  --hero-h: clamp(420px, 34vw, 780px); /* height driven by vw; adjust middle to match mock */
  --arrow-size: 56px; --arrow-edge: 14px;
}
.hero-carousel .hero-nav{
  position: absolute;
  top: calc(var(--hero-h) / 2);
  transform: translateY(-50%);
  width: var(--arrow-size); height: var(--arrow-size);
  border: 0; border-radius: 999px;
  background: #6b7a46; color: #fff;
  display: grid; place-items: center; cursor: pointer; z-index: 4;
}
.hero-carousel .hero-prev{ left: var(--arrow-edge); }
.hero-carousel .hero-next{ right: var(--arrow-edge); }
.hero-carousel .hero-nav:hover{ background: #5a6b2e; }
.hero-carousel .hero-nav:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.hero-carousel .hero-nav-icon{ font-size: 24px; line-height: 1; }

/* Pagination hidden unless you want it */
.hero-carousel .hero-pagination{ display: none !important; }

/* Mobile: pill can wrap and gets a touch smaller */
@media (max-width: 640px){
  .hero-carousel{ --pill-h: 56px; }
  .hero-carousel .slide-badge{ padding: 10px 18px; font-size: 16px; white-space: normal; }
}

/* ===== No shadows anywhere (client request) ===== */
*{ box-shadow: none !important; filter: none !important; }
.mosaic-tile, .insta-item, .feature-card, .stats{ box-shadow: none !important; }

/* ===== Restore/top-up animations (Services + Mosaic) ===== */
/* You already had .reveal styles; we ensure presence + defaults here */
.reveal{
  opacity: 0; transform: translateY(8px);
  transition:
    opacity var(--reveal-dur, 600ms) ease var(--reveal-delay, 0ms),
    transform var(--reveal-dur, 600ms) ease var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.reveal-zoom{ transform: scale(.96); }
.reveal.inview{ opacity: 1; transform: none; }

.services .service-card{ opacity: 0; }
.services.is-inview .service-card{ animation: servicesFade 700ms ease forwards; }
.services.is-inview .service-card:nth-child(2){ animation-delay: 120ms; }
.services.is-inview .service-card:nth-child(3){ animation-delay: 240ms; }
@keyframes servicesFade{ from{opacity:0} to{opacity:1} }

@media (prefers-reduced-motion: reduce){
  .reveal, .services .service-card{ opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}



/* override */

/* ===== Wonderland Carousel — final hard overrides ===== */

/* Reserve space for the pill's 50px overhang so it never overlaps next section */
.hero-carousel{
  position: relative;
  padding-bottom: 50px; /* equals pill overhang */
  overflow: visible;    /* section can show pill; inner viewport clips slides */
}

/* Viewport: handles aspect ratio + horizontal clipping (no side peeking) */
.carousel-viewport{
  --slide-radius: 30px;
  --pill-height: 100px;
  --pill-overhang: 50px;           /* pill sits half outside */
  --brand: #4c5c39;
  --brand-light: #90a172;

  position: relative;
  width: 100%;
  /* Keep a constant ratio driven by width. Adjust to your mock; 21/9 feels right,
     but you can change to 16/9, 2/1, etc. */
  aspect-ratio: 21 / 9;

  overflow: hidden;                 /* this hides neighboring slides */
  border-radius: 32px;              /* outer soft rounding of the whole stage */
}

/* Kill any stray max-heights from app.css/Swiper */
.carousel-viewport, 
.carousel-viewport .swiper-wrapper, 
.carousel-viewport .swiper-slide, 
.carousel-viewport img{
  max-height: none !important;
}

/* Each slide is a frame containing the image + pill */
.slide-frame{
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Image: exactly 50px shorter than the slide space; rounded corners 30px */
.slide-frame > img{
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: calc(100% - var(--pill-overhang));
  object-fit: cover;
  border-radius: var(--slide-radius);
  display: block;
  /* No shadows anywhere */
  box-shadow: none !important;
}

/* Pill: 100px tall, centered, hangs 50px below the image */
.slide-pill{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(-1 * var(--pill-overhang));
  height: var(--pill-height);
  min-width: min(860px, 92%);
  background: var(--brand);
  color: #fff;
  border-radius: 999px; /* "pill" */
  display: grid;
  place-items: center;
  padding: 0 28px;
  z-index: 5;
}

/* Text inside the pill */
.slide-pill .pill-inner{
  text-align: center;
  line-height: 1.2;
}
.slide-pill h3{
  margin: 0 0 .15em 0;
  font-weight: 700;
  font-size: clamp(18px, 2.0vw, 28px);
}
.slide-pill p{
  margin: 0;
  font-size: clamp(13px, 1.4vw, 18px);
}
.slide-pill a{
  color: var(--brand-light);
  text-decoration: none;
  font-weight: 700;
}
.slide-pill a:hover{ text-decoration: underline; }

/* Swiper slide should take full width; no partials shown */
.carousel-viewport .swiper-slide{
  width: 100% !important;
}

/* Navigation buttons — match the mockup ring + chevron */
.carousel-viewport .swiper-button-prev,
.carousel-viewport .swiper-button-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 2px solid var(--brand);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(4px);
  box-shadow: none !important;
}

.carousel-viewport .swiper-button-prev{ left: 22px; }
.carousel-viewport .swiper-button-next{ right: 22px; }

/* Hide Swiper's default arrow glyph and draw our chevrons */
.carousel-viewport .swiper-button-prev::after,
.carousel-viewport .swiper-button-next::after{
  content: "";
  display: block;
  width: 12px; height: 12px;
  margin: auto;
  border-top: 3px solid var(--brand);
  border-right: 3px solid var(--brand);
}
.carousel-viewport .swiper-button-next::after{ transform: rotate(45deg); }
.carousel-viewport .swiper-button-prev::after{ transform: rotate(-135deg); }

/* (Optional) Pagination dots beneath the slide (will sit above pill area) */
.carousel-viewport .swiper-pagination{
  bottom: 10px !important;
}
.carousel-viewport .swiper-pagination-bullet{
  background: #cfd6c9;
  opacity: 1;
}
.carousel-viewport .swiper-pagination-bullet-active{
  background: var(--brand);
}

#instaframe{width:100%;aspect-ratio:30/21;}
/* Tablet + mobile refinements */
@media (max-width: 1024px){
  .carousel-viewport{
    aspect-ratio: 16 / 9; /* slightly taller feel on tablets */
  }
  .carousel-viewport .swiper-button-prev,
  .carousel-viewport .swiper-button-next{
    width: 44px; height: 44px;
  }
   
#instaframe{width:100%;aspect-ratio:30/22;}
}
@media (max-width: 720px){
  .carousel-viewport{
    aspect-ratio: 4 / 3; /* mobile: keep the same look while giving text room */
  }
  .slide-pill{
    height: 84px;
    min-width: min(640px, 94%);
  }
  .slide-frame > img{
    height: calc(100% - var(--pill-overhang)); /* still 50px shorter */
  }
  .carousel-viewport .swiper-button-prev,
  .carousel-viewport .swiper-button-next{
    width: 40px; height: 40px;
  }
}