/* Home page: typography, colours, media and motion.
   Layout (sizes, grid, margins, sticky, entrance animations) is in
   layout-home.css, generated from Wix's own rules; tile positions are in
   gallery-home.css. Values here are from wix-clone/capture (STYLE.md,
   MOTION.md, layout/home-*.json) unless a comment says otherwise. */

/* The hero sits under the fixed header, as on Wix. */
.home-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: calc(-1 * var(--header-h));
}

/* ---------- Type (Wix theme styles, read from computed values) ---------- */
:where(.home-main) p, :where(.home-main) blockquote {
  font: 12px/1.6 var(--mono);
  letter-spacing: 0.05em;
  margin: 0;
}
:where(.home-main) h1, :where(.home-main) h2, :where(.home-main) h3, :where(.home-main) h5 { margin: 0; }
:where(.home-main) h5 { font: 700 14px/1.3 var(--sans); }

.hero { background: var(--cream); }
:where(.hero-2001, .hero-est) p { line-height: normal; letter-spacing: -0.01em; }
:where(.hero-h1) h1 { line-height: 0.9; letter-spacing: -0.04em; }
:where(.hero-scroll-label) h2 { font-family: var(--sans); font-weight: 400; line-height: 1; letter-spacing: -0.01em; }
.hero-chevron svg { display: block; width: 100%; height: 100%; color: #000; }
.hero-logo img, .cows-logo img { width: 100%; height: 100%; display: block; object-fit: cover; } /* Wix "fill", centred */

/* ---------- Video reveal ---------- */
.bgvideo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.reveal-video .bgvideo { position: absolute; inset: 0; }
.reveal-photo picture, .reveal-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.reveal-photo img { object-fit: cover; object-position: 48% 9%; } /* Wix focal point fp_0.48_0.09 */
.reveal-v, .reveal-p { transform-origin: 50% 50%; }

/* Scroll-linked scale (MOTION.md 4 and 5). Both are linear in scrollY and,
   like the sections above them, sized in vh, so the ranges are in vh:
   desktop video 0.2837 -> 1 over 0..148.1vh, photo 0.04 -> 1 over
   145.3..252.6vh; mobile 0.4297 -> 1 over 0..133.1vh and 0.04 -> 1 over
   148.2..239.2vh. 751-1000 px was not captured: scaled from the desktop
   ranges to Wix's 300vh band (see the build note). js/home.js does the same
   where scroll timelines are not supported. */
@keyframes jm-reveal-v { from { transform: translateY(-14.51vh) scale(0.2837); } to { transform: none; } }
@keyframes jm-reveal-p { from { transform: translateY(-16vh) scale(0.04); } to { transform: none; } }
@keyframes jm-reveal-v-m { from { transform: translateY(-15.73vh) scale(0.4297); } to { transform: none; } }
@supports (animation-timeline: scroll()) {
  .reveal-v { animation: jm-reveal-v linear both; animation-timeline: scroll(root); animation-range: 0vh 148.1vh; }
  .reveal-p { animation: jm-reveal-p linear both; animation-timeline: scroll(root); animation-range: 145.3vh 252.6vh; }
  @media (max-width: 1000px) {
    .reveal-v { animation-range: 0vh 138.4vh; }
    .reveal-p { animation-range: 141.6vh 241.9vh; }
  }
  @media (max-width: 750px) {
    .reveal-v { animation-name: jm-reveal-v-m; animation-range: 0vh 133.1vh; }
    .reveal-p { animation-range: 148.2vh 239.2vh; }
  }
}

/* ---------- Services ---------- */
.services { background: var(--cream); }
.card { border-radius: 22.5px; overflow: hidden; }
.card1 { background: var(--yellow); }
.card2 { background: #3ba735; }
.card3 { background: #fff; }
.card4 { background: #000; }
:where(.card4-p) p { color: var(--ink-cream); }
:where(.card1-num, .card2-num, .card3-num, .card4-num) p { font-family: var(--mono); font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: normal; }
:where(.card1-h, .card2-h, .card3-h, .card4-h) h3 { font-family: var(--mono); font-weight: 400; line-height: 1.3; }

/* ---------- "TO OUR CLIENTS..." ---------- */
.claim { background: radial-gradient(circle at 50% 0%, #ffa693 12.7746%, #eafa0c 53.9835%); }
:where(.claim) h2 { font-family: var(--sans); font-weight: 400; line-height: 1; color: var(--ink-cream); }
:where(.claim-l5-t) h2 { letter-spacing: -0.01em; }
/* Blur in and out (MOTION.md 7, measured at 1440 and 390): each line goes
   from blur 20px to sharp over the first 40% of its pass through the
   viewport, and back to 20px over the last 40%. */
@keyframes jm-blur-in { from { filter: blur(20px); } to { filter: blur(0); } }
@keyframes jm-blur-out { from { filter: blur(0); } to { filter: blur(20px); } }
@supports (animation-timeline: view()) {
  .claim-box > .c > div { animation: jm-blur-out linear both; animation-timeline: view(); animation-range: cover 60% cover 100%; }
  .claim-box > .c > div > .c > div { animation: jm-blur-in linear both; animation-timeline: view(); animation-range: cover 0% cover 40%; }
}

/* ---------- Photo strip (Wix Pro Gallery, horizontal collage) ---------- */
.strip { background: #f5f0e2; }
.strip-gallery { --gh: calc(0.55292 * var(--sf)); }
.gal { position: relative; height: var(--gh); overflow: hidden; align-self: start; }
.gal-track { display: flex; width: max-content; height: 100%; will-change: transform; }
.gal-set { position: relative; height: var(--gh); flex: none; }
.gal-tile { position: absolute; overflow: hidden; }
.gal-tile picture, .gal-tile img, .gal-tile video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Testimonials ---------- */
.reviews { background: var(--cream); }
:where(.reviews-label) h2 { font-size: 14px; line-height: 1.3; letter-spacing: normal; }
:where(.slide-who) h3 { font: 400 14px/1.3 var(--sans); }
.reviews-rep { position: relative; display: grid; overflow: hidden; }
.reviews-rep > .slide { grid-area: 1 / 1; transition: transform 1s ease-in-out; }
.reviews-rep > .slide:not(.is-current) { transform: translateX(100%); visibility: hidden; }
.reviews-rep > .slide.is-moving { visibility: visible; }
.reviews-prev button, .reviews-next button {
  width: 100%; height: 100%; border-radius: 999px; background: var(--yellow); color: #000;
  display: grid; place-items: center; transition: all 0.2s ease, visibility 0s;
}
.reviews-prev button:hover, .reviews-next button:hover { background: #3ba735; }
.reviews-prev svg, .reviews-next svg { width: 25px; height: 25px; }

/* ---------- Cow video band ---------- */
.cows { position: relative; }
.cows-video { position: absolute; inset: 0; z-index: 0; }
.cows > .c { position: relative; z-index: 1; }

/* ---------- Tablet and mobile (Wix's 1000 px and 750 px layouts) ---------- */
@media (max-width: 1000px) {
  .strip { background: var(--cream); }
  .strip-gallery { --gh: calc(0.7676 * var(--sf)); } /* not captured: fills the 1000 px row */
  .reviews-prev button:hover, .reviews-next button:hover { background: var(--ink-cream); }
}
@media (max-width: 750px) {
  .strip-gallery { --gh: calc(1.0769 * var(--sf)); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-v, .reveal-p { animation: none !important; transform: none !important; }
  .claim-box > .c > div, .claim-box > .c > div > .c > div { animation: none !important; filter: none !important; }
}