/* =========================================
   1. GLOBAL VARIABLES & BASE STYLES
========================================= */
:root {
  --bg-cream: #F2F1EB;
  /* The reviews "sheet": slightly darker than the page cream. The bee-trail
     divider blends from cream into it so the two meet without a visible edge. */
  --bg-paper: #ECEBE5;
  --bg-teal: #217074;
  --text-black: #000000;
  --accent-gold: #DBBD70;
  --accent-brown: #AA835F;
  --accent-sage: #8B9D77;
  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Playfair Display', serif;
  --font-script: 'Parisienne', cursive;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-cream);
  color: var(--text-black);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

::selection { background: var(--accent-gold); color: var(--text-black); }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-cream); }
::-webkit-scrollbar-thumb { background: var(--bg-teal); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-gold); }

/* Shared Page Headers (For About, Packages, FAQ, Inquire) */
.page-header {
  text-align: center;
  padding: 6rem 1.5rem 3rem 1.5rem;
}
.page-header h1 {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  color: var(--bg-teal);
  margin: 0 0 1rem 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.page-header p {
  font-size: 1.1rem;
  color: #555;
  max-width: 600px;
  margin: 0 auto;
}

/* Shared Buttons */
.btn-primary {
  display: inline-block;
  margin-top: 2.5rem;
  border: 1px solid var(--bg-cream);
  padding: 0.75rem 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background-color: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--text-black);
}
.btn-primary-gold-border {
  border-color: var(--accent-gold);
}

.btn-solid {
  display: inline-block;
  background-color: var(--bg-teal);
  color: var(--bg-cream);
  padding: 1rem 3rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.btn-solid:hover {
  background-color: var(--text-black);
}

/* =========================================
   2. NAVIGATION & FOOTER COMPONENTS
========================================= */
site-nav { display: block; width: 100%; }

.navbar {
  width: 100%;
  box-sizing: border-box;
  /* Page cream rather than white: against a cream body a white bar reads as a
     separate slab laid on the site instead of the top of it. */
  background-color: var(--bg-cream);
  padding: 1.4rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
  transition: padding 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

/* Past the trigger the bar condenses and lifts off the page: less height once
   the reader is reading, and a shadow to separate it from content now moving
   underneath it. */
.navbar.is-scrolled {
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
  box-shadow: 0 4px 20px rgba(33, 112, 116, 0.07);
}


/* The mark is transform-scaled, so it renders far taller than the 25px box it
   occupies; easing it down keeps it in proportion with the shorter bar. */
.navbar.is-scrolled .bee-logo {
  transform: scale(3) translateY(1px) translateX(3px);
}

.brand-logo-container { display: flex; align-items: center; gap: 0.75rem; }
.nav-brand { font-family: var(--font-serif); font-weight: 700; text-transform: uppercase; text-decoration: none; color: var(--bg-teal); letter-spacing: 0.05em; }
/* Source art is black on transparent, so it needs no filter on the white navbar */
.bee-logo {
  height: 25px;
  flex-shrink: 0;
  transform: scale(3.5) translateY(1px) translateX(3px);
  transition: transform 0.35s ease;
}

.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a {
  color: var(--text-black);
  text-decoration: none;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--bg-teal); }
.nav-links a.active { color: var(--accent-brown); font-weight: 600; border-bottom-color: var(--accent-gold); }

.nav-links a.nav-btn {
  background-color: var(--accent-gold);
  color: #fff;
  padding: 0.5rem 1.25rem;
  border-radius: 4px;
  font-weight: 600;
  border: none;
  box-shadow: 0 4px 10px rgba(219, 189, 112, 0.3);
  transition: all 0.3s ease;
}
.nav-links a.nav-btn:hover {
  background-color: var(--bg-teal);
  color: var(--bg-cream);
  box-shadow: 0 6px 15px rgba(33, 112, 116, 0.2);
  transform: translateY(-2px);
}

/* Transparent Navbar Overrides (Home Page)
   Left as it was: absolute, so it sits over the hero and scrolls away with it.
   The cream/condense treatment above is for the inner pages only. */
.navbar-transparent {
  position: absolute;
  background: transparent;
}
.navbar-transparent .nav-brand, .navbar-transparent .nav-links a { color: var(--bg-cream); }
.navbar-transparent .nav-links a:hover { color: var(--accent-gold); }
/* The home page moves the logo into the hero, so the links stand alone on the right */
.navbar-transparent { justify-content: flex-end; }

.dashed-gold-rule {
  color: var(--accent-gold);
  border-style: dashed;
}

/* Footer */
.footer, .site-footer {
  text-align: center;
  padding: 4rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bg-cream);
  background-color: var(--bg-teal);
  border-top: 1px solid rgba(242, 241, 235, 0.1);
}

/* =========================================
   3. HOME PAGE STYLES
========================================= */
.hero { position: relative; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #000; }
.hero-video { position: absolute; z-index: 10; min-width: 100%; min-height: 100%; width: auto; max-width: none; object-fit: cover; opacity: 0.5; filter: grayscale(100%) blur(10px); object-position: 0 450px; }
.hero-content { position: relative; z-index: 20; text-align: center; padding: 0 1rem; color: var(--bg-cream); }

/* --- Hero Brand Logo --- */
/* Pinned to the top of the hero and centered, overhanging the transparent navbar
   rather than sitting inside it, so the bar keeps its own height. top matches the
   navbar's 1.4rem vertical padding so the two align optically. */
.hero-logo-container {
  --logo-w: clamp(150px, 24vw, 300px);
  position: absolute;
  /* The source PNG carries 21.33% transparent padding above the artwork, so the
     box has to start negative for the visible logo to sit 5px off the top. Scales
     with --logo-w, which keeps that 5px true at every breakpoint. */
  top: calc(5px - 0.2133 * var(--logo-w));
  left: 50%;
  transform: translateX(-50%);
  justify-content: center;
  z-index: 30;
}
.hero-logo {
  display: block;
  width: var(--logo-w);
  height: auto;
  margin-top: 25px;
  /* The source art is black on transparent; flatten it to pure white */
  filter: brightness(0) invert(1) drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45));
  animation: heroLogoIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes heroLogoIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-logo { animation: none; } }
/* Keep the hero readable on short/landscape viewports */
@media (max-height: 700px) { .hero-logo-container { --logo-w: clamp(110px, 16vw, 180px); } }
/* The right-aligned nav links need ~548px. With the logo raised to the very top,
   its artwork reaches x = 50% + 31.9% of --logo-w, which crosses into them below
   ~1352px viewport width (measured: clear at 1366, 36px overlap at 1280). Below
   that, sit the logo under the bar instead — 92px puts its visible top 10px clear
   of the 82px navbar. */
@media (max-width: 1351px) {
  .hero-logo-container { top: calc(92px - 0.2133 * var(--logo-w)); }
}
.hero-title { font-family: var(--font-serif); font-size: 3rem; font-weight: 500; margin-bottom: 1.5rem; letter-spacing: -0.025em; line-height: 1.1; }
@media (min-width: 768px) { .hero-title { font-size: 6rem; } }
.hero-highlight { font-style: italic; font-weight: 400; color: var(--accent-gold); }
.hero-subtitle { font-size: 1.125rem; font-weight: 300; letter-spacing: 0.025em; max-width: 56rem; margin: 0 auto; opacity: 0.9; }

/* --- Vertical Reels Section --- */
.section-reels {
  position: relative;
  padding: 4rem 1.5rem 8rem 1.5rem; /* Cut the top padding from 8rem to 4rem to pull it up */
  max-width: 1536px;
  margin: 0 auto;
}

/* The texture sits on a pseudo-element so `filter` blurs only the background and
   never the reels or headings. It bleeds past the top and bottom so the blur
   samples real texture instead of transparency (which would fade those edges),
   then clip-path trims it back to the section box. clip-path is applied after
   filter, so this needs no overflow:hidden on the section — which matters here,
   since the reels' hover shadows are meant to spill outside it.

   The bleed is vertical only. clip-path hides the overhang but does not remove
   it from scrollable overflow, so bleeding sideways pushed the document 40px
   wider than the viewport and put a horizontal scrollbar on every page. Nothing
   is lost by squaring off the sides: the blur is 1px, so it had almost no
   texture to sample there anyway. */
.section-reels::before {
  content: "";
  position: absolute;
  inset: -40px 0;
  background-image: url('../images/handmade-flower-petal-paper-texture-FC071A_.jpg');
  /*background-size: 50px 50px;*/
  background-repeat: repeat;
  filter: blur(1px) opacity(0.1);
  clip-path: inset(40px 0);
  /* Dissolve the texture before it reaches the reviews section. The torn edge
     used to cover that join; without it, a texture that simply stops leaves a
     hard rule across the page. The 40px offset matches the inset above. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 190px), transparent calc(100% - 40px));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 190px), transparent calc(100% - 40px));
  z-index: 0;
}

/* Lift the content above the blurred layer (the pseudo-element is positioned, so
   it would otherwise paint over static in-flow children). */
.section-reels > * {
  position: relative;
  z-index: 1;
}

.reels-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 4rem auto; /* Gives beautiful breathing room between the text and the videos */
}

.reels-subtitle {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-brown);
  margin-bottom: 1rem;
  font-weight: 600;
}

.reels-title {
  font-family: var(--font-serif);
  font-size: 3rem;
  color: var(--bg-teal);
  margin: 0 0 1.5rem 0;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .reels-title { font-size: 4rem; }
}

.reels-description {
  font-weight: 300;
  color: #555;
  font-size: 1.15rem;
  line-height: 1.8;
  margin: 0;
}

/* --- Vertical Reels Grid --- */
.reels-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1200px; /* Constrains it so the videos don't get absurdly huge on big monitors */
  margin: 0 auto;
}

/* Hide the default browser cursor only over the tiles themselves, where the
   custom "Play" bubble replaces it. Scoping this to the grid also blanked the
   cursor over the gaps between tiles, leaving no pointer at all there. */
.reel-item,
.reel-item * {
  cursor: none !important;
}

@media (min-width: 768px) {
  .reels-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

/* --- Vertical Reels Grid --- */
.reels-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .reels-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

/* NEW: Wrapper controls the z-index stacking to prevent overlap clipping */
.reel-wrapper {
  position: relative;
  z-index: 1;
  height: 100%;
}

.reel-wrapper:hover {
  z-index: 10;
}

.reel-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background-color: var(--bg-teal);
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(33, 112, 116, 0.15);
  height: 100%;
  /* UPDATED: Removed the buggy ', scale 0s' which causes transform jumping */
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Protect Hover Effects from Touchscreens --- */
@media (hover: hover) and (pointer: fine) {
  /* 1. Push ALL reels into the background, but only once a tile is actually
        under the pointer. Keying this off the grid dimmed everything whenever
        the pointer crossed a gap between tiles or an empty cell at the end of
        the last row, with nothing spotlit in return. */
  .reels-grid:has(.reel-wrapper:hover) .reel-item {
    opacity: 0.5;
    transform: scale(0.97);
    filter: grayscale(40%);
  }

  /* 2. Bring the specific hovered reel into the spotlight */
  /* UPDATED: Target the wrapper's hover state to manipulate the inner item */
  .reels-grid .reel-wrapper:hover .reel-item {
    opacity: 1;
    filter: grayscale(0%);
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 30px 60px rgba(33, 112, 116, 0.35);
  }
}

.reel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease, opacity 0.7s ease;
  opacity: 0.9;
}

.reel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 3rem 1.5rem 1.5rem 1.5rem;
  color: var(--bg-cream);
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
  width: 100%;
  box-sizing: border-box;
}

.reel-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin: 0 0 0.25rem 0;
  color: var(--accent-gold);
}

.reel-category {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0;
  opacity: 0.9;
}

/* --- Custom Floating Cursor --- */
.reel-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background-color: rgba(242, 241, 235, 0.5); /* Much more transparent now */
  backdrop-filter: blur(6px); /* Slightly bumped the blur to compensate for the transparency */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-cream); /* Switched to cream so it pops against the dark videos */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Glyph over label, both centred inside the circle. The padding is inside the
   80px, so the bubble itself is the size it always was. Pages whose cursor is
   a bare word (the home page's "View") are unaffected: a single child centres
   the same in a column, and the smaller size only applies to the span. */
.reel-cursor {
  box-sizing: border-box;
  flex-direction: column;
  gap: 2px;
  padding: 0 0.6rem;
  text-align: center;
  line-height: 1.2;
}

.reel-cursor svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  fill: currentColor;
}

.reel-cursor svg .wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Smaller than the bubble's base size to make room for the glyph above it. */
.reel-cursor span {
  font-size: 0.62rem;
}

.reel-cursor.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* The active click state (Frosted Gold) */
.reel-cursor.is-clicked {
  /* Using the RGB values of your --accent-gold (#DBBD70) with 60% opacity */
  background-color: rgba(219, 189, 112, 0.6);
  color: var(--text-black); /* Swapping text to black for readability against the gold */
  transform: translate(-50%, -50%) scale(0.85); /* Slightly shrinks the bubble to mimic a physical button press */
  transition: opacity 0.3s ease, transform 0.1s ease, background-color 0.1s ease; /* Faster transition for an instant click feel */
}


/* --- Realistic Torn Card Divider --- */
/* --- Bee Trail Divider ---
   The two sections it separates differ by only a few values of grey, so the
   join needs no hard edge of its own — the dashed trail carries it. */
.bee-trail-divider {
  width: 100%;
  position: relative;
  z-index: 10;
  overflow: hidden; /* clip the trail flush at both edges */
  /* Page cream at the top, the reviews sheet at the bottom. The two are only a
     few values apart, but stepping between them in one line is visible; spread
     across the band it disappears, and the trail flies through the blend. */
  background: linear-gradient(to bottom, var(--bg-cream), var(--bg-paper));
}

.bee-trail {
  display: block;
  width: 100%;
  height: auto; /* the viewBox aspect sets the height, so dashes scale evenly */
  /* Drawn on left to right as the divider comes into view, like something
     passing through. Sits on the SVG box rather than the path so the clip is a
     plain rectangle in CSS pixels. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 3.5s cubic-bezier(0.42, 1, 0.36, 1) 0.8s;
}

.bee-trail-divider.is-visible .bee-trail {
  clip-path: inset(0 0 0 0);
}

.bee-trail-path {
  fill: none;
  stroke: var(--accent-gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 11 13;
  /* The band scales with the viewport, so without this the dashes would thin
     out to hairlines on a phone. Keeping the stroke in screen units holds the
     weight and dash rhythm steady at every width; only the wave flattens. */
  vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: reduce) {
  .bee-trail {
    clip-path: none;
    transition: none;
  }
}

/* =========================================
   REVIEWS & TESTIMONIALS SECTION
========================================= */
/* Full-bleed so the darker sheet reaches the viewport edges and picks up exactly
   where the divider's blend ends; the 1200px column lives on the children. */
.section-reviews {
  padding: 4rem 1.5rem 4rem 1.5rem;
  background-color: var(--bg-paper);
}

.reviews-header,
.reviews-carousel,
.reviews-footer {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.reviews-header {
  text-align: center;
  margin-bottom: 4rem;
}

.reviews-subtitle {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-brown);
  margin-bottom: 1rem;
  font-weight: 600;
}

.reviews-title {
  font-family: var(--font-serif);
  font-size: 3rem;
  color: var(--bg-teal);
  margin: 0;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .reviews-title { font-size: 4rem; }
}

/* --- Review Carousel --- */
.reviews-carousel {
  position: relative;
  --autoplay-duration: 6.5s;
}

.carousel-viewport {
  overflow: hidden;
  /* Clipping happens at the padding box, so this padding gives the cards' hover
     lift and drop shadow room to breathe instead of being sliced off at the
     rail. The matching negative margin keeps the section's spacing unchanged. */
  padding: 1.25rem 0 2.5rem;
  margin: -1.25rem 0 -2.5rem;
  /* Let vertical page scrolling through the carousel win; we only claim the
     horizontal axis for dragging. */
  touch-action: pan-y;
}

.carousel-track {
  --card-gap: 2rem;
  display: flex;
  align-items: stretch;
  gap: var(--card-gap);
  will-change: transform;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Jumping from a cloned card back to its real twin has to be invisible. */
.carousel-track.is-instant { transition: none; }

/* border-box matters here: the card's 2rem padding would otherwise sit outside
   this width and push a row of three past the edge of the rail. */
.carousel-track > .review-card {
  --per-view: 1;
  box-sizing: border-box;
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--card-gap)) / var(--per-view));
  min-width: 0;
}

@media (min-width: 640px) {
  .carousel-track > .review-card { --per-view: 2; }
}

@media (min-width: 1000px) {
  .carousel-track { --card-gap: 2.5rem; }
  .carousel-track > .review-card { --per-view: 3; }
}

/* --- Carousel Controls --- */
.carousel-controls {
  position: relative; /* anchors the paused badge */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
}

/* --- Paused indicator ---
   A dash that stops filling is easy to miss, because nothing happens — you have
   to already be watching it. Something appearing is much harder to miss, so the
   paused state announces itself instead. Absolutely positioned so it can come
   and go without nudging the controls, and it sits in the gap that already
   exists above the "Read More" button. */
.carousel-status {
  position: absolute;
  /* Above the controls rather than below: pausing is usually triggered by
     hovering a card, so the badge belongs where the reader is already looking.
     It sits in the 3rem gap the controls already leave under the cards. */
  bottom: calc(100% + 0.6rem);
  left: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(33, 112, 116, 0.1);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-brown);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The two bars of a pause glyph, drawn as facing borders with a gap between. */
.carousel-status::before {
  content: '';
  box-sizing: border-box;
  width: 9px;
  height: 11px;
  border-left: 3px solid var(--accent-gold);
  border-right: 3px solid var(--accent-gold);
}

.reviews-carousel.is-paused .carousel-status {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Backs up the badge: the whole progress row reads as inactive, not just stalled. */
.carousel-dots {
  transition: opacity 0.35s ease;
}

.reviews-carousel.is-paused .carousel-dots {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-status { transition: opacity 0.35s ease; }
}

.carousel-arrow {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(33, 112, 116, 0.25);
  background: transparent;
  color: var(--bg-teal);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.4s ease, border-color 0.4s ease,
              color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carousel-arrow:hover {
  background: var(--bg-teal);
  border-color: var(--bg-teal);
  color: #fff;
  transform: scale(1.07);
}

.carousel-arrow:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.carousel-dot {
  position: relative;
  width: 30px;
  height: 2px;
  padding: 0;
  border: none;
  background: rgba(33, 112, 116, 0.2);
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.4s ease;
}

/* A 2px-tall bar is an unusable tap target, so extend the hit area vertically
   without changing how the dash looks. */
.carousel-dot::before {
  content: '';
  position: absolute;
  inset: -14px 0;
}

/* The gold fill doubles as the autoplay progress bar. */
.carousel-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--accent-gold);
}

.carousel-dot.is-active::after {
  animation: dashFill var(--autoplay-duration) linear forwards;
}

/* Hovering, focusing or dragging freezes the fill exactly where it is, so the
   timer visibly waits for the reader rather than silently restarting. */
.reviews-carousel.is-paused .carousel-dot.is-active::after {
  animation-play-state: paused;
}

.reviews-carousel.no-autoplay .carousel-dot.is-active::after {
  animation: none;
  width: 100%;
}

.carousel-dot:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 6px;
}

@keyframes dashFill {
  from { width: 0; }
  to   { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition-duration: 1ms; }
  .carousel-arrow { transition: none; }
}

.review-card {
  background: #fff;
  padding: 2.5rem 2rem;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  border-top: 4px solid var(--accent-gold);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(33, 112, 116, 0.1);
}

/* --- Signed Attribution Row --- */
.review-attribution {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto; /* Pins the signature to the bottom of equal-height cards */
  padding-top: 1.75rem;
}

/* --- Oval Portrait --- */
.review-avatar {
  width: 170px;
  height: 230px;
  flex-shrink: 0;
  margin: 0 auto 2rem auto; /* Centered above the quote */
  border-radius: 50%; /* Unequal width/height makes this a true oval */
  overflow: hidden;
  background-color: var(--bg-cream);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--accent-gold), 0 14px 30px rgba(33, 112, 116, 0.14);
}

.review-avatar video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.review-author {
  font-family: var(--font-script);
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--bg-teal);
  margin-bottom: 0.15rem;
}

.review-author::before {
  content: '— ';
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--accent-brown);
}

.review-stars {
  color: #fbbc04;
  font-size: 0.95rem;
  letter-spacing: 2px;
}

.review-text {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
  margin: 0;
  /* This creates the automatic truncation with an ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Read More Button & Expansion --- */
.review-text.is-expanded {
  -webkit-line-clamp: unset; /* Removes the 6-line limit */
}

.read-more-btn {
  background: none;
  border: none;
  color: var(--bg-teal);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0;
  margin-top: 0.5rem;
  cursor: pointer;
  display: none; /* Hidden by default; JS handles showing it */
  align-self: flex-start; /* Keeps it at its natural width inside the flex column */
  transition: color 0.3s ease;
}

.read-more-btn:hover {
  color: var(--accent-gold);
}

/* --- White Awards Plaque --- */
.awards-wrapper {
  background-color: #ffffff;
  border: 2px dashed #aa835f26;
  border-radius: 50%;
  padding: 3rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  display: inline-block;
  margin: 1rem 0;
  position: relative;
  overflow: hidden;
}

#confetti-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let the mouse click/hover pass right through it to the container */
  z-index: 1;
}

.awards-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem; /* Slightly widened the gap to match the new white box */
  flex-wrap: wrap;
  filter: grayscale(1);
  opacity: 0.7;
  position: relative; /* Lifts the awards above the falling confetti */
  z-index: 0;
}

.awards-container:hover {
  filter: none;
  opacity: 1;
}

/* --- Footer & Awards --- */
.reviews-footer {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.award-badge {
  height: 90px;
  width: auto;
  object-fit: contain;
}

/* --- Contact Section --- */

.section-contact { padding: 8rem 1rem; background-color: var(--bg-teal); color: var(--bg-cream); text-align: center; border-top: 5px solid var(--accent-gold); }
.contact-title { font-family: var(--font-serif); font-size: 2.25rem; margin: 0 0 2rem 0; }
@media (min-width: 768px) { .contact-title { font-size: 3.75rem; } }
.contact-text { margin: 0 auto 3rem auto; max-width: 36rem; font-weight: 300; opacity: 0.9; }

/* =========================================
   4. ABOUT PAGE STYLES
========================================= */
.container { max-width: 1200px; margin: 4rem auto; padding: 2rem 2.5rem; }
.about-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
@media (min-width: 850px) { .about-grid { grid-template-columns: 1fr 1.2fr; gap: 6rem; } }

.profile-frame { position: relative; overflow: hidden; border-radius: 500px 500px 8px 8px; border-bottom: 8px solid var(--accent-gold); box-shadow: 0 20px 40px rgba(33, 112, 116, 0.08); }
.profile-image { width: 100%; height: 575px; object-fit: cover; display: block; animation: slowZoomIn 4s ease-out forwards; }
@keyframes slowZoomIn { 0% { transform: scale(1.0); } 100% { transform: scale(1.10); } }

.about-content h1 { font-family: var(--font-serif); font-size: 4rem; margin-top: 0; margin-bottom: 1.5rem; color: var(--bg-teal); line-height: 1.1; letter-spacing: -0.02em; }
.about-content p { margin-bottom: 1.5rem; font-weight: 300; font-size: 1.1rem; color: #333; line-height: 1.8; }
.about-content strong { color: var(--accent-sage); font-weight: 500; }

.quote-banner { position: relative; width: 100%; min-height: 140px; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #000; padding: 2rem 1rem; box-sizing: border-box; }
.quote-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); opacity: 0.4; z-index: 1; }
.quote-text { position: relative; z-index: 2; max-width: 900px; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 1.7rem; color: var(--bg-cream); line-height: 1.5; text-shadow: 0px 2px 4px rgba(0,0,0,0.8); }

.lifestyle-section { background-color: var(--bg-teal); color: var(--bg-cream); padding: 2rem 0; }
.lifestyle-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; background: var(--bg-cream); border-radius: 8px; }
@media (min-width: 850px) { .lifestyle-grid { grid-template-columns: 1fr 1fr; gap: 6rem; } }
.lifestyle-image-wrapper { position: relative; overflow: hidden; border-radius: 4px; border-bottom: 8px solid var(--accent-brown); }
/* The bio clip is portrait 9:16 in a landscape box, so cover crops it hard; 35%
   biases the visible band upward to keep Bianca's head in frame at every breakpoint. */
.lifestyle-image { width: 100%; height: 400px; object-fit: cover; object-position: center 20%; display: block; opacity: 0.95; }
.lifestyle-image-wrapper:hover .lifestyle-image { animation: slowZoomIn 4s ease-out forwards; opacity: 1; }
.lifestyle-text { padding-right: 2rem; }
.lifestyle-heading { font-family: var(--font-serif); font-size: 2.5rem; color: var(--accent-brown); margin-top: 0; margin-bottom: 2.5rem; font-weight: 400; }
.lifestyle-text p { color: #000; font-weight: 300; font-size: 1.15rem; margin-bottom: 2rem; line-height: 1.8; opacity: 0.9; }
.lifestyle-text strong { color: var(--accent-gold); font-weight: 400; }

/* --- Wand sparks ---
   inline-block so the word has a box of its own for the sparks to be positioned
   against; an inline box can be split across lines and would scatter them. */
.magic-word {
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: text-shadow 0.35s ease, color 0.35s ease;
}

.magic-word.is-casting,
.magic-word.is-still {
  color: #f0d68a;
  text-shadow:
    0 0 8px rgba(219, 189, 112, 0.85),
    0 0 20px rgba(219, 189, 112, 0.45);
}

.magic-spark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2);
  pointer-events: none;
  /* Gold, not white. The page behind this word is cream, so a pale spark is
     invisible against it — the sparkle has to be darker than its background
     here, which is the opposite of the usual instinct. */
  background: #c8a032;
  /* The four-point glint of a wand spark rather than a round dot. */
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  box-shadow: 0 0 7px rgba(200, 160, 50, 0.55);
  opacity: 0;
  animation: magicSpark 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes magicSpark {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  55% {
    transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--spin));
    opacity: 1;
  }
  100% {
    /* Carries on drifting as it dies, so the sparks fade out mid-flight rather
       than stopping and then disappearing. */
    transform: translate(calc(var(--dx) * 1.5), calc(var(--dy) * 1.9)) scale(0.15)
               rotate(calc(var(--spin) * 1.6));
    opacity: 0;
  }
}

/* =========================================
   5. PACKAGES PAGE STYLES
========================================= */
/* =========================================
   PACKAGES STAGE (video backdrop)
   Same idea as the home page hero: black ground, the clip desaturated and
   blurred over it at half opacity. Here it runs the length of the header and
   the pricing grid rather than a fixed viewport height.
========================================= */
.packages-stage {
  position: relative;
  overflow: hidden;
  background-color: #000;
}

/* Oversized on purpose. A blur samples past the element's edge, so a video sized
   exactly to the box feathers out along all four sides and the black ground
   shows through as a soft border. Pushing it 2% beyond on every side keeps that
   falloff outside the frame. */
.packages-stage-media {
  position: absolute;
  top: -34%;
  left: -24%;
  /* Deliberately larger than the stage on both axes. Wider: overshooting brings
     the picture up to a readable scale instead of leaving it small in a wide
     frame. Taller: the parallax translates this element downward, and the top
     edge has to stay clear of the stage for the whole travel or the black
     ground shows along the top. At top:-34% and height:140% that allows 571px
     of drift — the value BACKDROP_TRAVEL in packages.html is checked against.
     The excess is clipped by the stage on every side.

     object-position is centred and left alone: this photograph is landscape
     against a nearly square box, so it covers by height and the stage takes a
     horizontal slice through the middle. On a very wide window the box turns
     wider than the picture and it covers by width instead, at which point the
     second value takes over — 50% keeps it sensible either way. js only sets
     the parallax transform. */
  width: 150%;
  /* 140 rather than 128: at top:-34% a 128% box stops 101px short of the
     stage's lower edge, leaving a bare strip of the black ground there before
     the parallax has drifted anything down. The extra height is added below,
     which would push the picture down with it — object-position pulls it back
     up by the same amount, so the framing above is unchanged and only the
     coverage improves. */
  height: 140%;
  object-fit: cover;
  object-position: 50% 50%;
  /* The parallax writes the `translate` property from js; this animation owns
     `transform`. They are separate properties, so the two compose instead of
     one overwriting the other — which is what would happen if both wrote
     `transform`. */
  animation: stageDrift 12s ease-in-out infinite alternate;
  will-change: transform, translate;
  opacity: 0.5;
  filter: grayscale(100%) blur(4px);
  pointer-events: none;
  z-index: 0;
}

.packages-stage-inner {
  position: relative;
  z-index: 1;
}

/* A slow breath on the still, so the section is not entirely inert. Scaling up
   only ever adds coverage, and the sideways travel is a few pixels against ~398px
   of horizontal overhang, so neither end of the cycle can pull the black ground
   into view. `alternate` eases it back rather than snapping to the start. */
@keyframes stageDrift {
  from { transform: translate3d(-8px, 0, 0) scale(1); }
  to   { transform: translate3d(8px, 0, 0) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .packages-stage-media { animation: none; }
}

/* --- Type reset for the dark ground ---
   The header was written for cream: teal heading, grey body copy. Both vanish
   against the video, so the stage restates them in the hero's colours. */
.packages-stage .page-header h1 {
  color: var(--bg-cream);
}

.packages-stage .page-header p {
  color: var(--bg-cream);
  opacity: 0.88;
}

.packages-stage .starting-price {
  color: var(--accent-gold);
  border-color: var(--accent-gold);
  background-color: rgba(219, 189, 112, 0.12);
}

.packages-stage .event-jump-link {
  color: var(--accent-gold);
}

.packages-stage .event-jump-link:hover {
  color: var(--bg-cream);
}

/* The banner's text was inheriting near-black from the body. The gold wash it
   had is not enough on its own here — the backdrop drifts between light and
   dark as the clip loops, so the fill is darkened to hold the cream text at a
   steady contrast wherever the video happens to be. */
.packages-stage .travel-banner {
  color: var(--bg-cream);
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.packages-container { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem 6rem 1.5rem; }
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 850px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
/* --- Fix for equal height wrappers --- */
.package-wrapper {
  display: flex;
  height: 100%;
}
.package-card { background: #fff; border-radius: 8px; overflow: hidden; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border-top: 6px solid var(--bg-teal); transition: transform 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s ease; width: 100%; flex: 1; display: flex; flex-direction: column; }

/* --- The card photograph ---
   The tier is a mood before it is a list of deliverables, so each card opens on
   a frame from that kind of day. 4:5 rather than a letterbox: the sources are
   portrait, and a wide banner would throw away most of the picture to keep a
   strip of it. Fixed ratio across the three so the lists below start on the
   same line whatever the card heights do. */
.package-photo {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--bg-teal);
}

.package-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The photo answers the card's lift with a slow push in of its own. */
.package-card:hover .package-photo img {
  transform: scale(1.05);
}

/* The name sits on the picture rather than under it, which is what keeps the
   card reading as one composed thing instead of an image glued above a list.
   The scrim is what makes that safe: it holds a consistent floor of contrast
   under the text no matter how bright that corner of the photograph is. */
.package-heading {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 1.5rem 1.35rem;
  text-align: center;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.78),
    rgba(0, 0, 0, 0.45) 42%,
    rgba(0, 0, 0, 0));
}

.package-heading .package-title {
  color: var(--bg-cream);
  margin: 0 0 0.3rem;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

/* Loses the divider rule and the block of spacing it carried: over the photo
   the scrim already separates it from the list below. */
.package-heading .package-hours {
  color: var(--accent-gold);
  font-size: 0.78rem;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}
.package-card.featured { border-top: 6px solid var(--accent-gold); transform: scale(1.03); box-shadow: 0 20px 50px rgba(33, 112, 116, 0.15); z-index: 10; }

/* --- Emphasis follows attention ---
   .featured is where the emphasis rests: the tier being recommended. Pointing
   at any card — or tabbing into it, which the old click version never allowed —
   lends that card the same treatment and stands the recommendation down for as
   long as the reader is looking elsewhere. The selection feel survives without
   costing a click, and because nothing is stored, the emphasis returns to the
   recommended tier the moment attention leaves. */
.package-card:hover,
.package-card:focus-within {
  border-top-color: var(--accent-gold);
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 20px 50px rgba(33, 112, 116, 0.15);
  z-index: 10;
}

.package-card:hover .package-cta,
.package-card:focus-within .package-cta {
  background-color: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--text-black);
}

/* Two classes deeper than the promotion above, so it wins for the resting card
   while a different one is being looked at — and :not() keeps it from firing
   when the recommended card is itself the one under the cursor. */
.pricing-grid:hover .package-card.featured:not(:hover),
.pricing-grid:focus-within .package-card.featured:not(:focus-within) {
  border-top-color: var(--bg-teal);
  transform: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  z-index: auto;
}

.pricing-grid:hover .package-card.featured:not(:hover) .package-cta,
.pricing-grid:focus-within .package-card.featured:not(:focus-within) .package-cta {
  background-color: transparent;
  border-color: var(--bg-teal);
  color: var(--bg-teal);
}
.package-title { font-family: var(--font-serif); font-size: 1.8rem; color: var(--text-black); margin: 0 0 0.5rem 0; text-align: center; }
.package-hours { font-weight: 600; color: var(--accent-brown); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9rem; text-align: center; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(0,0,0,0.08); }
/* Padding here matches the card's old `padding: 3rem 2rem` as the list saw
   it: 2rem at the sides, 3rem below. The 2rem on top is the gap the
   divider rule used to leave under the hours, now that the photo has
   taken over the top of the card. */
.package-features { list-style: none; padding: 2rem 2rem 1rem; margin: 0; flex-grow: 1; }
/* Pinned to the foot of the card: .package-features grows, so this always sits
   on the bottom edge whatever the list length — which also gives the shorter
   tiers something to close on rather than trailing off into white space.
   Margins stay on the card's own 2rem/3rem grid, so the list's spacing is
   untouched and the button lines up with the bullets above it. */
.package-cta {
  margin: 0 2rem 3rem;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--bg-teal);
  border-radius: 4px;
  color: var(--bg-teal);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.package-cta:hover,
.package-cta:focus-visible {
  background-color: var(--bg-teal);
  color: var(--bg-cream);
}

/* Ranked above the card-level promotion, which is also two classes deep, so
   the button still answers to its own hover rather than staying gold. */
.package-card .package-cta:hover,
.package-card .package-cta:focus-visible {
  background-color: var(--bg-teal);
  border-color: var(--bg-teal);
  color: var(--bg-cream);
}

.package-cta-arrow { transition: transform 0.3s ease; }
.package-cta:hover .package-cta-arrow { transform: translateX(3px); }

/* The highlighted tier carries the filled button so the eye lands on its call
   to action first. It follows the card, since clicking one moves .featured. */
.package-card.featured .package-cta {
  background-color: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--text-black);
}

.package-card.featured .package-cta:hover,
.package-card.featured .package-cta:focus-visible {
  background-color: var(--bg-teal);
  border-color: var(--bg-teal);
  color: var(--bg-cream);
}

.package-features li { font-size: 0.95rem; color: #444; margin-bottom: 1rem; display: flex; align-items: center; }
.package-features li::before { content: '✦'; color: var(--accent-gold); margin-right: 12px; font-size: 1.1rem; line-height: 1; }

.travel-banner { text-align: center; padding: 1.5rem; background: rgba(219, 189, 112, 0.15); border: 1px dotted var(--accent-gold); border-radius: 4px; margin: 4rem auto 0 auto; max-width: 800px; font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; }
.starting-price { display: inline-block; margin-top: 1.5rem; padding: 0.5rem 1.5rem; border: 1px solid var(--accent-gold); color: var(--accent-brown); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.85rem; font-weight: 600; border-radius: 4px; background-color: rgba(219, 189, 112, 0.1); }
/* --- Subtle Jump Link --- */
/* --- Subtle Jump Link --- */
.event-jump-link {
  display: block;               /* Forces it to a new line */
  width: fit-content;           /* Keeps the hover area tight to the text */
  margin: 1.5rem auto 0 auto;   /* Centers it horizontally */
  font-size: 0.8rem;
  color: var(--accent-brown);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  transition: color 0.3s ease, transform 0.3s ease;
}

.event-jump-link:hover {
  color: var(--bg-teal);
  transform: translateY(3px);
}

/* =========================================
   EXPERIENCE TIMELINE
========================================= */
.section-timeline {
  /* Vertical gap between cards; the connecting line reuses it */
  --timeline-gap: 1.25rem;
  padding: 0 1.5rem 4.5rem;
  /* Wider than the 800px the rail alone needed, to seat the media column
     beside it; the header's own max-widths keep it centred and narrow. */
  max-width: 1180px;
  margin: 3.5rem auto 0;
  position: relative;
}

/* --- Media beside the rail ---
   One column on phones, with the media stacked above the steps. From wide
   enough to hold both, the media takes a fixed column on the left and the rail
   keeps the rest. */
.timeline-layout {
  display: grid;
  gap: 2.5rem;
}

/* The reel sits alone in the left column; the flat lay is the section's
   backdrop (see .section-timeline::before). */
.timeline-media {
  position: relative;
  max-width: 320px;
  margin: 0 auto;
  width: 100%;
}

/* Placed after the base rule above, not before it: a media query carries no
   extra specificity, so `position: relative` there would otherwise win on
   source order and the sticky would silently never engage. */
@media (min-width: 1000px) {
  .timeline-layout {
    grid-template-columns: 380px 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }

  /* The rail is far taller than the media, so the media would otherwise sit in
     a mostly empty column. Sticking it holds the picture alongside the steps
     for the whole scroll instead of letting it slide away at the first one. */
  .timeline-media {
    position: sticky;
    top: 110px;
  }
}

.timeline-media-reel {
  width: 100%;
  /* A white edge and a deeper shadow lift the reel off the faint backdrop. */
  padding: 6px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(33, 112, 116, 0.18);
}

.timeline-media-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 5px;
  background-color: var(--bg-teal);
}

/* --- Flat lay as a soft backdrop ---
   The photo bleeds off the viewport's left edge, fades out toward the steps,
   the top and the bottom, and is washed to a low opacity so the cream page
   stays the subject. */
.section-timeline::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 9rem;
  bottom: 2rem;
  left: calc(50% - 50vw);
  width: calc(50vw + 26%);
  background: url("../images/packages/flatlay-stationery.jpg") center / cover no-repeat;
  opacity: 0.17;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 35%, transparent 100%),
                      linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 0%, #000 35%, transparent 100%),
              linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-composite: intersect;
}

.section-timeline > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 999px) {
  .section-timeline::before { opacity: 0.12; width: 100%; left: 0; }
}

.timeline-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.timeline-subtitle {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-brown);
  margin-bottom: 0.6rem;
  font-weight: 600;
}

.timeline-title {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--bg-teal);
  margin: 0 0 0.75rem 0;
  line-height: 1.1;
}

.timeline-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  font-weight: 300;
  max-width: 560px;
  margin: 0 auto;
}

/* --- The Vertical Track --- */
.timeline-container {
  position: relative;
  padding-left: 32px;
  margin-left: 0.5rem;
}

@media (min-width: 768px) {
  .timeline-container {
    padding-left: 48px;
  }
}

.timeline-item {
  position: relative;
  margin-bottom: var(--timeline-gap);
}

.timeline-item:last-child {
  margin-bottom: 0;
}

/* We draw the line segments on each individual item now */
.timeline-item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: calc(var(--timeline-gap) * -1); /* Extends through the margin to connect to the next item */
  left: -23px; /* Centers the 2px line exactly behind the 20px dot */
  width: 2px;
  background: rgba(219, 189, 112, 0.4);
  z-index: 1;
}

/* Cap the top of the line at the middle of the first dot */
.timeline-item:first-child::before {
  top: 50%;
}

/* Cap the bottom of the line at the middle of the last dot */
.timeline-item:last-child::before {
  bottom: 50%;
}

/* --- The Dots --- */
.timeline-dot {
  position: absolute;
  left: -32px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-color: var(--bg-teal);
  border: 3px solid var(--bg-cream);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--accent-gold);
  z-index: 2;
}

@media (min-width: 768px) {
  .timeline-item::before {
    left: -39px; /* Adjusts the line to center on the new desktop padding */
  }
  .timeline-dot {
    left: -48px;
  }
}

/* --- The Content Cards --- */
.timeline-content {
  background: #fff;
  padding: 1.15rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.03);
  border-top: 3px solid transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-content:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(33, 112, 116, 0.08);
}

/* The one card that gets a burst. The canvas fills it and sits between the
   card's own background and its text, so the confetti reads as thrown behind
   the words rather than over them — legibility wins over spectacle on a card
   that still has something to say. overflow keeps the pieces inside the
   rounded corners instead of spraying across the rail. */
.timeline-celebrate {
  position: relative;
  overflow: hidden;
}

.timeline-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.timeline-celebrate > :not(.timeline-confetti) {
  position: relative;
  z-index: 1;
}

/* --- Step one, made actionable ---
   The card is an anchor rather than carrying one, so the whole thing is the
   target. It borrows the gold edge the delivery card uses: the first and last
   steps are the two that lead somewhere, and they now look like a pair. */
.timeline-content-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-top-color: var(--accent-gold);
  background: linear-gradient(to bottom right, #fff, rgba(219, 189, 112, 0.05));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-content-link:hover,
.timeline-content-link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(33, 112, 116, 0.12);
}

.timeline-content-link:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
}

/* Sits on the same line as the sentence it belongs to, so the card keeps its
   height and the rail's rhythm is unchanged. */
.timeline-link-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.6rem;
  color: var(--accent-brown);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.timeline-link-arrow {
  transition: transform 0.3s ease;
}

.timeline-content-link:hover .timeline-link-arrow,
.timeline-content-link:focus-visible .timeline-link-arrow {
  transform: translateX(3px);
}

.timeline-content.final-delivery {
  border-top-color: var(--accent-gold);
  background: linear-gradient(to bottom right, #fff, rgba(219, 189, 112, 0.05));
}

/* --- Delivery gallery motif ---
   Six gold tiles that fill in one after another as the card arrives, like a
   gallery populating. Everything keys off .is-visible, the class animations.js
   puts on the item when it reveals, so the tiles are tied to the card's own
   entrance without any JavaScript of their own. */
.delivery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

/* The heading's own bottom margin now belongs to the row that holds it. */
.delivery-head .timeline-deliverable {
  margin-bottom: 0;
}

.delivery-gallery {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(3, 15px);
  grid-template-rows: repeat(2, 15px);
  gap: 4px;
}

.delivery-tile {
  border-radius: 2px;
  background: var(--accent-gold);
  /* Held at nothing until the card reveals; the animation below brings each
     one up to its own resting opacity, which is what gives the block of tiles
     some depth instead of reading as one flat gold rectangle. */
  opacity: 0;
}

.delivery-tile:nth-child(1) { --tile-opacity: 0.9; }
.delivery-tile:nth-child(2) { --tile-opacity: 0.55; }
.delivery-tile:nth-child(3) { --tile-opacity: 0.75; }
.delivery-tile:nth-child(4) { --tile-opacity: 0.5; }
.delivery-tile:nth-child(5) { --tile-opacity: 0.85; }
.delivery-tile:nth-child(6) { --tile-opacity: 0.65; }

/* The card waits out its 550ms delay class and then travels; the easing puts
   most of that movement in the first 400ms. Starting here lets the tiles land
   as the card settles rather than while it is still sliding. */
.timeline-item.is-visible .delivery-tile {
  animation: deliveryTileIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.timeline-item.is-visible .delivery-tile:nth-child(1) { animation-delay: 0.95s; }
.timeline-item.is-visible .delivery-tile:nth-child(2) { animation-delay: 1.03s; }
.timeline-item.is-visible .delivery-tile:nth-child(3) { animation-delay: 1.11s; }
.timeline-item.is-visible .delivery-tile:nth-child(4) { animation-delay: 1.19s; }
.timeline-item.is-visible .delivery-tile:nth-child(5) { animation-delay: 1.27s; }
.timeline-item.is-visible .delivery-tile:nth-child(6) { animation-delay: 1.35s; }

@keyframes deliveryTileIn {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: var(--tile-opacity); transform: scale(1); }
}

/* A slow highlight crossing the tiles once the set is complete. White over
   gold reads as light passing over photographs, and it is invisible in the
   gaps between tiles, where it is white on an almost-white card. */
.delivery-gallery::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(-120%);
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.75) 50%, transparent 60%);
}

.timeline-item.is-visible .delivery-gallery::after {
  animation: deliverySheen 6s ease-in-out 1.9s infinite;
}

/* The sweep itself is over in the first third; the rest of the cycle is the
   pause before it comes round again. */
@keyframes deliverySheen {
  0%   { transform: translateX(-120%); }
  32%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .delivery-tile { opacity: var(--tile-opacity); }
  .timeline-item.is-visible .delivery-tile,
  .timeline-item.is-visible .delivery-gallery::after { animation: none; }
}

.timeline-phase {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-brown);
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}

.timeline-deliverable {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--text-black);
  margin: 0 0 0.4rem 0;
  line-height: 1.3;
}

.timeline-content p {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  font-weight: 300;
}

.timeline-list {
  margin: 0;
  padding-left: 1.2rem;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.8;
  font-weight: 300;
}

.timeline-list li {
  margin-bottom: 0.5rem;
}

.timeline-list strong {
  color: var(--text-black);
  font-weight: 500;
}

/* --- Inline Portfolio Link --- */
.inline-portfolio-link {
  display: inline-block;
  margin-top: 0.8rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-brown);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

.inline-portfolio-link:hover {
  color: var(--bg-teal);
  border-bottom-color: var(--bg-teal);
  /* A tiny nudge to the right on hover for a tactile feel */
  transform: translateX(4px);
}

.addons-section { background-color: var(--bg-teal); color: var(--bg-cream); padding: 3rem 1.5rem 4rem 1.5rem; }
.addons-container { max-width: 900px; margin: 0 auto; }
.addons-title { font-family: var(--font-serif); font-size: 2.5rem; color: var(--accent-gold); text-align: center; margin-bottom: 0.5rem; margin-top: 0.5rem; }
.addons-lede { text-align: center; font-weight: 300; opacity: 0.9; font-size: 1.05rem; margin: 0 0 1.75rem; }
.addons-subtitle { text-align: center; font-weight: 300; opacity: 0.9; margin-bottom: 2rem; font-size: 1rem; }
/* Update your existing addon-item class slightly */
.addon-item {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 8px;
  /*border-bottom: 1px solid rgba(242, 241, 235, 0.1);*/
  position: relative; /* <-- ADD THIS */
  overflow: hidden;   /* Keeps the drone from overflowing before it appears */
}

.addon-item:hover {
  background-color: #258184;
}

/* --- Drone Animations ---
   The drone is the play control for the aerial sample clip, so like the
   camcorder's recording light it reports what the clip is doing: propellers
   spinning and body floating while it plays, everything still when paused. */
.drone-addon .addon-sample:not(.is-paused) .propeller {
  animation: spinProps 0.2s linear infinite;
}

.drone-addon .addon-sample:not(.is-paused) .drone-body-group {
  animation: droneFloat 3s ease-in-out infinite;
}

.drone-addon .addon-sample:not(.is-paused) .drone-shadow {
  animation: shadowPulse 3s ease-in-out infinite;
}

/* Keyframes */
@keyframes spinProps {
  100% { transform: rotate(360deg); }
}

@keyframes droneFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes shadowPulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(0.8); opacity: 0.1; }
}

/* --- Recording light ---
   The stationary camera and the camcorder share this blink. */
/* Keyframes */
@keyframes blinkRed {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* --- Sample footage in the row ---
   This row carries a clip instead of a hover icon: the whole selling point is
   how the footage looks, and no drawing conveys that. It sits in the flow as a
   third flex child rather than absolutely positioned like the icons, so the
   text and price make room for it instead of it floating over them. */
.addon-sample {
  position: relative;   /* the play control is pinned inside it */
  margin: 1.25rem 0 0;
  width: 100%;
  flex-shrink: 0;
}

/* The camcorder icon as the clip's play/pause control. Out of sight until the
   row is hovered, so the footage is unobstructed at rest — but it also appears
   on keyboard focus, or it would be a control no one tabbing could ever see. */
.addon-sample-toggle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 56px;
  height: 56px;
  padding: 7px;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background-color 0.25s ease;
}

.addon-item:hover .addon-sample-toggle,
.addon-sample-toggle:focus-visible {
  opacity: 1;
}

.addon-sample-toggle:hover {
  background: rgba(0, 0, 0, 0.65);
}

.addon-sample-toggle svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The light reports what the clip is doing: blinking while it runs, dark when
   it is stopped. Same keyframes the tripod camera uses. */
.addon-sample:not(.is-paused) .addon-sample-toggle .rec-dot {
  animation: blinkRed 1s ease-in-out infinite;
}

.addon-sample.is-paused .addon-sample-toggle .rec-dot {
  opacity: 0.25;
}

.addon-sample-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.25);
}

/* From tablet up the row runs horizontally, so the clip becomes a fixed column
   between the copy and the price. The description gives up some width to make
   room — at 600px the three would not fit the 900px container. */
@media (min-width: 768px) {
  .camera-addon, .snap-8-addon { gap: 1.75rem; }
  .camera-addon .addon-desc,
  .snap-8-addon .addon-desc { max-width: 390px; }
  .addon-sample { width: 300px; margin: 0; }
}

/* Portrait clips (the drone reel) keep their 9:16 frame and a narrower column
   so the row does not grow as tall as the clip is wide. */
.addon-sample--portrait .addon-sample-video { aspect-ratio: 9 / 16; }
.addon-sample--portrait { max-width: 240px; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) {
  .drone-addon { gap: 1.75rem; }
  .drone-addon .addon-desc { max-width: 390px; }
  .addon-sample--portrait { width: 200px; margin: 0; }
}

.addon-item:last-child { border-bottom: none; margin-bottom: 0; }
@media (min-width: 768px) { .addon-item { flex-direction: row; justify-content: space-between; align-items: center; } }
.addon-name { font-family: var(--font-serif); font-size: 1.3rem; margin: 0 0 0.25rem 0; }
.addon-desc { font-size: 0.9rem; opacity: 0.8; max-width: 600px; font-weight: 300; margin: 0; }
.addon-price { font-family: var(--font-serif); font-size: 1.5rem; color: var(--accent-gold); margin-top: 0.5rem; white-space: nowrap; }

.event-section { padding: 5rem 1.5rem; background-color: #fff; }

/* Copy and proof side by side, stacking to one column on phones. The heading
   keeps the lead position either way; the reel reads as the evidence for it. */
.event-split {
  display: grid;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
  justify-items: center;
  text-align: center;
}

@media (min-width: 900px) {
  .event-split {
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(3rem, 6vw, 6rem);
    text-align: left;
    justify-items: stretch;
  }
}

/* --- Vendor Branding: the same split, mirrored ---
   Only the column assignment changes. The copy stays first in the source so the
   heading is what a screen reader and a no-CSS render meet first, and so the
   single-column phone layout still leads with the heading rather than the reel;
   the swap is purely visual and only above the breakpoint where two columns
   exist to swap. The proportions are reversed too, keeping the wider column
   with the text as in the section above. */
@media (min-width: 900px) {
  .vendor-split {
    grid-template-columns: 0.85fr 1.15fr;
  }

  .vendor-split .event-content {
    grid-column: 2;
    grid-row: 1;
  }

  .vendor-split .event-showcase {
    grid-column: 1;
    grid-row: 1;
  }
}

/* Alternating grounds so the two sections read as a pair rather than one long
   white run; the cream is the page's own background. */
.vendor-section {
  background-color: var(--bg-cream);
}

.event-content { max-width: 34rem; }

.event-eyebrow {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-brown);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.event-title { font-family: var(--font-serif); font-size: 2.5rem; color: var(--bg-teal); margin: 0 0 1.25rem; line-height: 1.15; }
.event-text { font-size: 1.15rem; color: #555; margin-bottom: 2.25rem; line-height: 1.8; }

/* --- The Showcase Reel --- */
.event-showcase {
  margin: 0;
  width: 100%;
  max-width: 320px;
}

/* The gold rule sits a few pixels off the card on two sides — enough to read as
   a deliberate frame rather than a border that failed to line up. */
.event-video-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--bg-teal);
  /* A hairline of gold held off the video by a ring of the section's own white.
     Spread grows the corner radius along with it, so both rings stay concentric
     with the 16px corners without either being told a radius of its own. */
  box-shadow:
    0 0 0 10px #fff,
    0 0 0 11px var(--accent-gold),
    0 18px 45px rgba(33, 112, 116, 0.18);
}

.event-video-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

.event-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-caption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1.5rem;
  text-align: center;
}

@media (min-width: 900px) {
  .event-caption { text-align: left; }
}

/* The reel is narrower than its column; centring gives the offset gold rule
   room on the right instead of running it into the section edge. */
@media (min-width: 900px) {
  .event-showcase { justify-self: center; }
}

.event-caption-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--text-black);
}

.event-caption-meta {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-brown);
  font-weight: 600;
}

/* =========================================
   6. FAQ PAGE STYLES (HIGH-END EDITORIAL)
========================================= */
.faq-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem 6rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}

@media (min-width: 900px) {
  .faq-container {
    grid-template-columns: 1fr 1.2fr;
    gap: 6rem;
    align-items: start;
  }
}

/* --- FAQ Media Layout (Refined) --- */
.faq-media-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 10;
}

@media (min-width: 900px) {
  .faq-media-wrapper { position: sticky; top: 150px; }
}

.faq-video-container {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 9 / 16;
  background-color: #ddd;
  border-radius: 4px; /* Sharper corners look more premium */
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(33, 112, 116, 0.15); /* Deeper, softer shadow */
  border: 1px solid rgba(255,255,255,0.4); /* Softer highlight border */
  position: relative;
  z-index: 1;
}

.faq-video { width: 100%; height: 100%; object-fit: cover; }

/* --- Editorial Accordion Layout --- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

details {
  background: #ffffff;
  border-radius: 8px;
  /* A much softer, wider shadow for a premium 'floating' effect */
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);
  border-left: 4px solid transparent;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle lift effect on hover */
details:hover {
  box-shadow: 0 10px 35px rgba(33, 112, 116, 0.08);
  transform: translateY(-2px);
}

details[open] {
  border-left: 4px solid var(--accent-gold);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

summary {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--bg-teal);
  padding: 1.75rem 2rem; /* Increased padding for elegance */
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: color 0.3s ease;
}

summary:hover {
  color: var(--accent-gold);
}
summary::-webkit-details-marker {
  display: none;
}

/* Elegant + and - icons */
/* Elegant + and - icons */
summary::after {
  content: '+';
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.8rem;
  color: var(--accent-gold);
  line-height: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

details[open] summary::after {
  content: '−';
  transform: rotate(180deg);
}

details[open] summary {
  padding-bottom: 1.25rem;
}

/* --- Answer Text Styling --- */
.faq-answer {
  padding: 0 2rem 2rem 2rem;
  font-size: 1.05rem;
  color: #555;
  font-weight: 300;
  line-height: 1.8;
}

.faq-answer p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer strong {
  color: var(--text-black);
  font-weight: 500;
}

/* Graceful fade-in animation when the accordion opens */
details[open] .faq-answer {
  animation: slideDownFade 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideDownFade {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   7. INQUIRE PAGE STYLES
========================================= */
.page-header.inquire-header {
  background-color: var(--bg-teal);
  color: var(--bg-cream);
  padding-bottom: 6rem; /* Adds the necessary breathing room back */
}
.page-header.inquire-header h1 { color: var(--accent-gold); }
.page-header.inquire-header p { color: var(--bg-cream); }
.urgency-badge { display: inline-block; margin-top: 1.5rem; padding: 0.5rem 1.5rem; background-color: rgba(219, 189, 112, 0.15); border: 1px dotted var(--accent-gold); color: var(--accent-gold); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.85rem; font-weight: 600; border-radius: 4px; }
.form-section { padding: 0 1.5rem 6rem 1.5rem; max-width: 800px; margin: -3rem auto 0 auto; position: relative; z-index: 10; }
.form-card { background: #fff; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); border-top: 6px solid var(--accent-gold); overflow: hidden; padding: 0; }
.form-iframe { width: 100%; height: 1300px; border: none; display: block; }

/* =========================================
   8. ANIMATIONS & UTILITIES
========================================= */
.reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: 275ms; }
.delay-200 { transition-delay: 550ms; }
.delay-300 { transition-delay: 825ms; }

/* =========================================
   9. INSTAGRAM FOOTER FEED
========================================= */
.insta-feed-section {
  background-color: var(--bg-cream);
  padding: 4rem 0 2rem 0;
  overflow: hidden;
}

.insta-header {
  text-align: center;
  margin-bottom: 2rem;
}

.insta-header h3 {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--bg-teal);
  margin: 0 0 0.5rem 0;
}

.social-handle-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--accent-brown);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.social-icon-link {
  color: var(--accent-brown);
  transition: color 0.3s ease;
  display: flex; /* Ensures the SVG baselines don't shift */
}

.social-icon-link:hover {
  color: var(--accent-gold);
}

.social-handle-text {
  margin-left: 0.2rem; /* Just a tiny extra bump separating the text from the icons */
}

.insta-marquee-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* The track needs to be wide enough to hold two identical sets of images for a seamless loop */
.insta-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: scrollFeed 40s linear infinite;
}

/* Pause the scrolling when the user hovers over it */
.insta-marquee-track:hover {
  animation-play-state: paused;
}

.insta-item {
  width: 250px;
  height: 250px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  position: relative;
}

.insta-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.insta-item:hover img {
  transform: scale(1.05);
}

/* Teal overlay on hover */
.insta-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(33, 112, 116, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.insta-item:hover .insta-overlay {
  opacity: 1;
}

/* CSS-drawn Instagram Icon */
.insta-icon {
  width: 40px; height: 40px;
  border: 3px solid #fff;
  border-radius: 10px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.insta-icon::before {
  content: '';
  width: 16px; height: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
}
.insta-icon::after {
  content: '';
  width: 4px; height: 4px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 6px; right: 6px;
}

/* The Animation Math: Scrolls exactly half the track so the duplicate set loops perfectly */
@keyframes scrollFeed {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 0.5rem)); }
}

/* =========================================
   10. FEATURED IN / LOGO BAR
========================================= */
.featured-section {
  padding: 3rem 1.5rem;
  background-color: var(--bg-cream);
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.featured-text {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-brown);
  margin-bottom: 2rem;
  font-weight: 600;
}

.featured-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* Row gap first: with six logos the set now wraps, and reusing the wide
     column spacing vertically would leave the rows reading as two groups. */
  gap: 2rem 3rem;
  max-width: 1000px;
  margin: 0 auto;
}

.featured-logo {
  height: 30px; /* Adjust this value if the logos look too big or too small */
  width: auto;
  object-fit: contain;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}

/* Badges and stacked marks rather than wide wordmarks. Matching their height to
   the wordmarks would leave them a fraction of the visual weight, since almost
   all of a wordmark's presence is width. Must stay below .featured-logo — same
   specificity, so source order is what decides. */
.featured-logo-tall {
  height: 90px;
}

/* The Knot's wordmark carries more ink per pixel of height than the other
   marks, so it reads a size larger at a matched height. Roughly 85% pulls it
   back into line with its neighbours. */
.featured-logo-knot {
  height: 26px;
}

/* Supplied with a baked-in white background rather than transparency. Multiply
   drops that white into the cream and keeps the dark artwork, so it sits on the
   page like the transparent logos instead of showing as a white box. Survives
   the 0.5 opacity above: multiplying white against the backdrop returns the
   backdrop at any opacity. */
.featured-logo-on-white {
  mix-blend-mode: multiply;
}

/* Restores full color and slightly lifts the logo on hover */
.featured-logos a:hover .featured-logo,
.featured-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: translateY(-2px);
}

/* One row from tablet up. The heights are fluid rather than fixed so the six
   marks always fit on a single line instead of wrapping into a lopsided second
   row; they give up a few pixels on narrower screens and reach full size on
   wide ones. flex-shrink is off on the children (the two linked logos are
   wrapped in anchors, so the rule has to target the flex items, not the imgs) —
   these have a fixed height and auto width, so letting flex squeeze them would
   distort the artwork instead of scaling it. */
@media (min-width: 768px) {
  .featured-logos {
    flex-wrap: nowrap;
    gap: clamp(1.25rem, 2.6vw, 3rem);
    max-width: 1360px;
  }
  .featured-logos > * { flex-shrink: 0; }
  .featured-logo { height: clamp(22px, 2.55vw, 40px); }
  .featured-logo-tall { height: clamp(62px, 7.2vw, 125px); }
  .featured-logo-knot { height: clamp(19px, 2.15vw, 34px); }
}

/* --- Logo Marquee ---
   Runs to the right — the mirror of the Instagram feed's leftward drift in the
   footer. Four identical sets sit on the track and the animation travels exactly
   one set's width (a quarter of the track), so the frame at the end of a cycle
   is identical to the frame at the start and the reset is invisible. That
   exactness is why each set carries its own trailing padding instead of the
   track using a flex gap: a gap between the sets would not belong to any one of
   them, and the loop would jump by that much every pass.

   Four sets and not two: a cycle starts with the track pushed one set's width
   to the left, which leaves the last set's width hanging off the right of the
   screen. With two sets that means bare cream to the right of the last logo on
   any viewport wider than one set (~1470px here), and whatever sat at the right
   edge vanishing the instant the loop restarts. Copies are cheap — the six
   images are already cached — so there are enough to overrun any screen. */
.featured-marquee {
  --logo-gap: clamp(3rem, 5.5vw, 6rem);
  --marquee-duration: 55s;
  position: relative;
  overflow: hidden;
  /* Out past the section's own padding so the fades meet the viewport edges */
  margin: 0 -1.5rem;
  background-color: var(--bg-cream);
  /* Logos enter and leave rather than being cut off at a hard edge */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

.featured-marquee-track {
  display: flex;
  width: max-content;
  animation: featuredDrift var(--marquee-duration) linear infinite;
  /* The rail is written every frame by js/featured-marquee.js, so it earns a
     layer of its own rather than being promoted and demoted around each write. */
  will-change: transform;
}

/* Hovering anywhere on the strip holds it, so a logo can be read or clicked
   without chasing it across the page. */
.featured-marquee:hover .featured-marquee-track,
.featured-marquee:focus-within .featured-marquee-track {
  animation-play-state: paused;
}

/* Once the script is driving, it owns the transform outright. The keyframes
   below stay for the no-JS case, where the rail still runs and still pauses on
   hover — just on the CSS clock that made the first hover jump. */
.featured-marquee.is-js .featured-marquee-track {
  animation: none;
}

/* The script pauses on pointerenter, so the CSS pause would only duplicate it
   — and re-introduce the animation-play-state swap this moved away from. */
.featured-marquee.is-js:hover .featured-marquee-track,
.featured-marquee.is-js:focus-within .featured-marquee-track {
  animation-play-state: running;
}

/* The sets are laid out by the marquee now, not centred in a max-width row.
   Two classes deep, so this outranks the plain .featured-logos rules above
   regardless of which media query they sit in.

   The background is the Junebug logo's, not the set's: that PNG comes with a
   baked-in white background and leans on mix-blend-mode: multiply to drop the
   white into the page. Blending only reaches the nearest ancestor that
   isolates, and both the mask above and the track's own transform isolate — so
   the cream it multiplies into has to be painted inside the track, not merely
   behind it, or the logo reads as a white box. Same cream as the section, so it
   is invisible to everything except the blend. */
.featured-marquee .featured-logos {
  flex-wrap: nowrap;
  max-width: none;
  margin: 0;
  gap: var(--logo-gap);
  padding-right: var(--logo-gap);
  background-color: var(--bg-cream);
}

@keyframes featuredDrift {
  from { transform: translate3d(-25%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Static and centred when motion is unwelcome: the filler sets would just be
   duplicates sitting in plain sight once nothing is moving. */
@media (prefers-reduced-motion: reduce) {
  .featured-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .featured-marquee-track {
    animation: none;
    transform: none;
    width: 100%;
    justify-content: center;
  }
  .featured-marquee .featured-logos[aria-hidden="true"] { display: none; }
  .featured-marquee .featured-logos { flex-wrap: wrap; padding-right: 0; }
}

/* =========================================
   11. GALLERY PAGE STYLES
========================================= */
.gallery-container {
  /* Widened from 1200 to carry five columns without the tiles getting cramped,
     and matched to .full-package-showcase below it so the two line up. */
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem 0 1.5rem;
}

/* --- Gallery Carousel ---
   One clip plays at a time in the centre, with the previous and next sitting
   either side, smaller and dimmed back but fully in view. This replaces the
   five-wide grid: five videos decoding at once was the thing that needed fixing. */
.gallery-carousel {
  /* Sized so the whole trio fits the container: the centre card plus a scaled
     neighbour either side is just under three card widths. The ceiling stops
     the card growing past a comfortable phone-shaped video on a wide monitor. */
  --card-w: clamp(120px, calc((100vw - 3rem) / 3), 330px);
  --card-h: calc(var(--card-w) * 16 / 9);
  --side-scale: 0.82;
  /* Distance between neighbouring card centres. It has to clear half the centre
     card (0.5) plus half a scaled neighbour (0.41); the remainder is the
     breathing gap between the two. */
  --step: calc(var(--card-w) * 1.0);
  position: relative;
}

.carousel-stage {
  position: relative;
  /* Wide enough for the centre card and a whole neighbour either side: two steps
     between the outer centres, plus one neighbour's width to cover both outer
     halves. Nothing is cropped, so there is no edge to soften. */
  width: calc(var(--step) * 2 + var(--card-w) * var(--side-scale));
  /* Taller than a card so the drop shadow is not sliced off top and bottom. */
  height: calc(var(--card-h) + 5rem);
  max-width: 100%; /* never push a scrollbar onto a very narrow screen */
  margin: 0 auto;
  /* Cards beyond the neighbours wait off to the side at zero opacity and fade
     in as they arrive; the clip keeps them from widening the page. */
  overflow: hidden;
}

/* On a phone three cards side by side would each be tiny, so the neighbours tuck
   in behind the centre card instead, still whole and still tappable. */
@media (max-width: 639px) {
  .gallery-carousel {
    --card-w: min(calc((100vw - 3rem) / 2.1), 240px);
    --side-scale: 0.78;
    --step: calc(var(--card-w) * 0.62);
  }
}

.carousel-stage .gallery-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--card-w);
  height: var(--card-h);
  margin-left: calc(var(--card-w) / -2);
  /* --rel is the card's signed offset from centre, written by the script.
     Translate happens in the parent's space, so the step is unaffected by the
     scale that follows it. */
  transform: translate(calc(var(--rel, 0) * var(--step)), -50%) scale(var(--side-scale));
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.5s ease, filter 0.5s ease;
}

/* The neighbours: dimmed back so the centre clearly owns the stage, and
   clickable to step that way. */
.carousel-stage .gallery-item.is-side {
  opacity: 1;
  filter: brightness(0.7) saturate(0.8);
  pointer-events: auto;
  z-index: 2;
}

.carousel-stage .gallery-item.is-side .reel-item,
.carousel-stage .gallery-item.is-side .reel-item * {
  /* The custom bubble reads "Play", which is wrong for a card that navigates. */
  cursor: pointer !important;
}

/* Scaling a neighbour down shrinks its corner radius with it, leaving the
   neighbours squarer than the centre. Dividing by the scale cancels that, so
   every card carries the same rendered radius. The drop shadow goes: offset
   below the card and clipped to a strip by the stage, it read as a stray
   gradient hanging under each neighbour. */
.carousel-stage .gallery-item.is-side .reel-item {
  border-radius: calc(16px / var(--side-scale));
  box-shadow: none;
}

.carousel-stage .gallery-item.is-center {
  transform: translate(0, -50%) scale(1);
  opacity: 1;
  filter: none;
  pointer-events: auto;
  z-index: 3;
}

.carousel-stage .gallery-item.is-side:hover {
  filter: brightness(0.85) saturate(0.95);
}

/* --- "Sound off" badge ---
   A play button only says "this is a video". A struck-through speaker says
   there is audio here that you are not hearing, which is the thing worth
   knowing. Top-right because the bottom of the card is the caption gradient,
   and pointer-events are off so the whole card stays one click target. */
.reel-sound-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Even on every side. With the icon as the only content that makes the
     bubble a circle rather than a pill, and leaves no dead space where the
     label used to sit. */
  /* Whole pixels: 13px icon + 7px each side = 27px exactly, so the circle and
     the glyph inside it never straddle a half pixel. */
  padding: 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--bg-cream);
  pointer-events: none;
  /* Shown by default, which covers the always-on grid (the home page reels).
     The carousel opts its own cards out below. */
  opacity: 0.8;
  transition: opacity 0.25s ease;
}

/* In the carousel, only the centre card wears one: a neighbour is half
   off-stage and would carry a sliced badge, and it is navigation rather than
   something to open. */
.carousel-stage .gallery-item:not(.is-center) .reel-sound-badge {
  opacity: 0;
}

/* Held back until the card has finished gliding. The badge is anchored inside
   the card, so it rides the 0.82 -> 1 scale up with it and is re-rasterised
   when that lands — which showed as the icon twitching a pixel at the end of
   every slide. Appearing after the card has settled, it is simply already in
   place. The delay clears the 0.65s glide. */
.carousel-stage .gallery-item.is-center .reel-sound-badge {
  transition: opacity 0.3s ease 0.7s;
}

.reel-sound-badge svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: currentColor;
}

.reel-sound-badge svg line {
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* A neighbour is half outside the stage, so its caption would be sliced down
   the middle. Only the centre is titled. */
.carousel-stage .gallery-item .reel-overlay {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.carousel-stage .gallery-item.is-center .reel-overlay {
  opacity: 1;
}

/* Only one category is ever shown, so the filter bar already names it. */
.gallery-carousel.is-single-category .reel-category {
  display: none;
}

.carousel-stage .reel-overlay {
  padding: 2.5rem 1.1rem 1.1rem 1.1rem;
}

.carousel-stage .reel-title {
  font-size: 1.15rem;
  line-height: 1.25;
}

/* --- Countdown to the next clip ---
   One segment per clip in the filter, so the bar doubles as a position
   indicator: how far through the set you are, and how long this one has left. */
.carousel-progress {
  display: flex;
  gap: 4px;
  width: var(--card-w);
  margin: 0.9rem auto 0 auto;
}

/* Hidden when there is nothing to advance to. */
.gallery-carousel.is-static .carousel-progress {
  visibility: hidden;
}

.carousel-progress-seg {
  flex: 1 1 0;
  height: 2px;
  background: rgba(33, 112, 116, 0.18);
  overflow: hidden;
}

.carousel-progress-seg span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent-gold);
}

/* Clips already played stay filled; the one playing fills in real time. */
.carousel-progress-seg.is-done span {
  width: 100%;
}

.gallery-carousel.is-counting .carousel-progress-seg.is-current span {
  animation: carouselCountdown var(--dwell, 10s) linear forwards;
}

/* Hovering holds the countdown where it is, so a clip being looked at is not
   snatched away mid-watch. */
.gallery-carousel.is-held .carousel-progress-seg.is-current span {
  animation-play-state: paused;
}

@keyframes carouselCountdown {
  from { width: 0; }
  to   { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-stage .gallery-item { transition: none; }
}

/* --- Filter Navigation Bar --- */
.filter-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.filter-btn {
  background: transparent;
  border: 1px solid var(--accent-brown);
  color: var(--text-black);
  padding: 0.6rem 1.5rem;
  border-radius: 50px; /* Pill shape */
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  border-color: var(--bg-teal);
  color: var(--bg-teal);
}

.filter-btn.is-active {
  background-color: var(--bg-teal);
  border-color: var(--bg-teal);
  color: var(--bg-cream);
  box-shadow: 0 4px 15px rgba(33, 112, 116, 0.2);
}

/* --- Filtering Animation --- */
/* The class JS will apply to hide elements */
.gallery-item.is-hidden {
  display: none;
}

/* The pop-in animation that used to play here set its own transform, which
   fought the carousel's positioning. The carousel transitions cards itself. */

/* --- Featured Package Showcase --- */
.full-package-showcase {
  max-width: 1400px; /* Slightly wider to accommodate 4 columns beautifully */
  margin: 2rem auto 4rem auto;
  padding: 0 1.5rem;
}

.showcase-header {
  text-align: center;
  margin-bottom: 3rem;
}

/* --- Mobile Native Swipe Carousel --- */
@media (max-width: 767px) {
  .reels-grid {
    display: flex; /* Overrides the vertical grid */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory; /* Snaps the videos to the center as you swipe */
    padding-bottom: 2rem; /* Room for the box shadow */
    margin: 0 -1.5rem; /* Pushes the scroll area to the edge of the screen */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    -webkit-overflow-scrolling: touch;
    /* Hides the ugly scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .reels-grid::-webkit-scrollbar {
    display: none;
  }

  .reel-wrapper {
    /* Makes each video take up 85% of the screen so they can see the next one peeking out */
    flex: 0 0 85%;
    scroll-snap-align: center;
  }
}

/* =========================================
   VIDEO LIGHTBOX MODAL
========================================= */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95); /* Deep cinematic black */
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(10px);
}

.video-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  width: 95%;
  max-width: 1200px;
  max-height: 90vh;
  position: relative;
}

.modal-content video {
  width: 100%;
  max-height: 90vh;
  object-fit: contain; /* Ensures tall vertical videos don't get cropped */
  border-radius: 8px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
  outline: none;
}

.modal-mute-note {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
}

.modal-mute-note[hidden] {
  display: none;
}

.modal-close {
  position: absolute;
  top: 25px;
  right: 35px;
  color: #ffffff;
  font-size: 3rem;
  font-family: var(--font-sans);
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  z-index: 100000;
  transition: color 0.3s ease, transform 0.3s ease;
}

.modal-close:hover {
  color: var(--accent-gold);
  transform: scale(1.1);
}

/* =========================================
   MOBILE SPACING & COMPONENT FIXES
========================================= */
@media (max-width: 767px) {

  /* 1. Global Safety Net: Strictly prevent the page from breaking its width */
  html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }

  /* 2. Fix the Navbar Layout */
  .navbar {
    padding: 1rem 1.5rem;
    flex-direction: column;
    align-items: center; /* Centers the logo */
    gap: 1.25rem;
  }

  /* 3. Turn the links into a swipeable carousel */
  .nav-links {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap; /* Allows links to naturally flow to a second centered row */
    gap: 1rem 1.5rem; /* Vertical gap 1rem, horizontal gap 1.5rem */
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  /* 4. Disable reveal animations inside mobile carousels so they peek correctly */
  .reels-grid .reel-wrapper {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* --- Mobile Native Swipe Carousel --- */
  .reels-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding-bottom: 2rem;
    margin: 0 -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .reels-grid::-webkit-scrollbar {
    display: none;
  }

  .reel-wrapper {
    flex: 0 0 85%;
    scroll-snap-align: center;
  }

  /* Tighten up massive sections */
  .section-reels, .section-reviews, .packages-container, .faq-container {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
  }

  .section-contact { padding: 4rem 1.5rem; }
  .page-header { padding-top: 4rem; padding-bottom: 2rem; }

  /* 2. Fix the Awards Plaque */
  /*.awards-wrapper {*/
  /*  border-radius: 16px; !* Swaps from a circle to a modern rounded box *!*/
  /*  padding: 2rem 1rem;*/
  /*  width: 100%;*/
  /*  box-sizing: border-box;*/
  /*}*/

  /*.awards-container {*/
  /*  gap: 1.5rem;*/
  /*}*/

  /*.award-badge {*/
  /*  height: 70px; !* Scales the badges down slightly to fit *!*/
  /*}*/

  /*!* 3. Adjust Featured Logos *!*/
  /*.featured-logos {*/
  /*  gap: 2rem;*/
  /*}*/
  /*.featured-logo {*/
  /*  height: 25px;*/
  /*}*/
}

/* Package deliverables that are not videos, under the Complete Delivery
   carousel. Two cards, side by side from tablet width up. */
.delivery-extras {
  list-style: none;
  display: grid;
  gap: 1rem;
  max-width: 760px;
  margin: 2.5rem auto 0;
  padding: 0 1.5rem;
}

@media (min-width: 640px) {
  .delivery-extras { grid-template-columns: 1fr 1fr; }
}

.delivery-extra {
  text-align: center;
  padding: 1.6rem 1.4rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-top: 3px solid var(--accent-gold);
  border-radius: 8px;
}

.delivery-extra-icon {
  width: 34px;
  height: 34px;
  color: var(--bg-teal);
  margin-bottom: 0.7rem;
}

.delivery-extra-title {
  font-family: var(--font-serif, inherit);
  font-size: 1.1rem;
  margin: 0 0 0.35rem;
}

.delivery-extra-text {
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.75;
  margin: 0;
}