/* ============================================================
   Bathi Farms — v7 "Evening Pasture"
   Deep-emerald drench. Golden-hour footage glows against a
   forest-green ground; ivory ink; gold rationed to prices,
   CTAs and datelines. Zodiak display serif + Archivo body.
   MOBILE-FIRST: base = 390px phone; desktop layered at 861px.
   Section grammar: serif headline first, dateline below it,
   documentary lower-thirds on footage. No eyebrow kickers.
   ============================================================ */

/* ---------- 1. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: clip;
}
img, video, canvas { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--gold); color: var(--ink-on-gold); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-sm); }

/* film grain, tuned for a dark ground */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 350; pointer-events: none;
  opacity: 0.3; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.82'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.skip-link {
  position: fixed; top: -100%; left: var(--space-4);
  background: var(--surface); color: var(--ink);
  padding: var(--space-3) var(--space-5); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600; z-index: var(--z-loader); transition: top var(--dur-fast) var(--ease-out-quart);
}
.skip-link:focus { top: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 2. Typography ---------- */
h1, h2, .h1, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  letter-spacing: var(--track-display);
  line-height: var(--leading-heading);
  color: var(--ink);
  text-wrap: balance;
}
h3, .h3 { font-weight: var(--weight-heading-sans); line-height: 1.25; color: var(--ink); text-wrap: balance; }
/* section-opener headings carry the gold accent so they stand apart from body copy */
.h1 { font-size: var(--type-h1); color: var(--gold); }
.h2 { font-size: var(--type-h2); }
.h3 { font-size: var(--type-h3); }
.story h2, .booking-lede h2 { color: var(--gold); }
.serif { font-family: var(--font-display); font-weight: var(--weight-heading); letter-spacing: var(--track-display); }
.lead { font-size: var(--type-lead); line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.prose-text { max-width: 62ch; text-wrap: pretty; color: var(--ink-soft); }

/* the dateline: documentary title-card locator, sits BELOW its headline */
.dateline, .cap {
  font-size: var(--type-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-caps);
  color: var(--gold);
}
.dateline { display: inline-flex; align-items: center; gap: 10px; }
.dateline::before { content: ''; width: 22px; height: 1px; background: var(--gold); opacity: 0.7; }

.gold-rule { width: 44px; height: 1px; border: 0; background: var(--line); margin-block: var(--space-5); }
.gold-rule.center { margin-inline: auto; }

/* ---------- 3. Container & sections ---------- */
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section-pad); }
/* a scene already fades to solid ground at its foot, so the section that
   follows doesn't need a full top pad — trim it to close the dead band */
.scene + .section { padding-block-start: var(--space-6); }
.hairline { border: 0; border-top: 1px solid var(--line); }
/* Raised, clearly-distinct band: lighter surface + defined hairline edges */
.band { background: var(--surface); border-block: 1px solid var(--line); }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 54px; padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-weight: 650; font-size: var(--type-micro);
  text-transform: uppercase; letter-spacing: var(--track-caps-tight);
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out-quart),
              background-color var(--dur-state), border-color var(--dur-state), color var(--dur-state);
}
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--btn-gold); color: var(--ink-on-gold); }
.btn-gold:hover { background: var(--gold-2); transform: translateY(-1px); }
.btn-emerald { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-emerald:hover { border-color: var(--ink-soft); }
.btn-line, .btn-line-light { border: 1.5px solid var(--line); color: var(--ink); }
.btn-line:hover, .btn-line-light:hover { border-color: var(--ink); background: rgba(242,235,218,0.06); }

/* ---------- 5. Nav ---------- */
.nav { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-nav); transition: background-color var(--dur-state), box-shadow var(--dur-state); }
/* legibility scrim behind the nav while it floats over the bright hero */
.nav::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 88px; pointer-events: none; z-index: -1; background: linear-gradient(180deg, rgba(6,20,14,0.5) 0%, var(--scrim-0, rgba(6,20,14,0)) 100%); opacity: 1; transition: opacity var(--dur-state); }
.nav.is-scrolled::before { opacity: 0; }
.nav-inner {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 58px; padding-block: var(--space-2); gap: var(--space-4);
}
.nav-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: 0; text-decoration: none; color: var(--ink); }
.nav-brand img { height: 30px; width: auto; }
.nav-links { display: none; }
.nav-call { display: none; }
.nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; align-items: center; border: 1.5px solid var(--line); border-radius: 50%; transition: border-color var(--dur-state); }
.nav-toggle span { display: block; width: 16px; height: 1.5px; background: var(--ink); transition: transform var(--dur-state) var(--ease-out-quart), opacity var(--dur-fast); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav.is-scrolled { background: rgba(11, 46, 33, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-2); }

/* mobile menu: full-screen emerald sheet, serif list rows */
.nav-menu {
  position: fixed; inset: 0; z-index: -1;
  background: var(--ground-2); color: var(--ink);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(84px + env(safe-area-inset-top, 0px)) var(--gutter) calc(var(--space-7) + env(safe-area-inset-bottom, 0px));
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-layout) var(--ease-out-quart), visibility 0s linear var(--dur-layout);
}
.nav-menu.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-layout) var(--ease-out-quart); }
.nav-menu .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; list-style: none; width: 100%; margin-block-start: clamp(var(--space-4), 4vh, var(--space-8)); }
.nav-menu .nav-links li { border-bottom: 1px solid var(--line-2); }
.nav-menu .nav-links li:first-child { border-top: 1px solid var(--line-2); }
.nav-menu .nav-links a { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 8.5vw, 2.6rem); font-weight: var(--weight-heading); letter-spacing: var(--track-display); color: var(--ink); text-decoration: none; line-height: 1; padding-block: clamp(var(--space-3), 2.2vh, var(--space-5)); transition: color var(--dur-fast), padding-inline-start var(--dur-state) var(--ease-out-quart); }
.nav-menu .nav-links a:hover, .nav-menu .nav-links a[aria-current="page"] { color: var(--gold); padding-inline-start: var(--space-3); }
.nav-menu .nav-call {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); margin-block-start: auto;
  min-height: 56px; padding: var(--space-3) var(--space-6);
  background: var(--btn-gold); color: var(--ink-on-gold);
  border-radius: var(--radius-pill); text-decoration: none; font-size: var(--type-micro); font-weight: 650;
  text-transform: uppercase; letter-spacing: var(--track-caps-tight); align-self: stretch;
}

@media (min-width: 861px) {
  .nav-toggle { display: none; }
  .nav-inner { padding-block: 0; min-height: 66px; }
  .nav-brand img { height: 32px; }
  /* menu becomes an inline row — fully reset from the mobile full-screen sheet */
  .nav-menu { position: static; inset: auto; z-index: auto; background: none; display: flex; flex-direction: row; align-items: center; gap: var(--space-6); padding: 0; margin: 0; opacity: 1; visibility: visible; }
  .nav-menu .nav-links { flex-direction: row; align-items: center; gap: var(--space-6); width: auto; margin: 0; }
  .nav-menu .nav-links li { border: 0; }
  .nav-menu .nav-links a { display: inline-flex; align-items: center; font-family: var(--font-body); font-size: var(--type-small); font-weight: 500; letter-spacing: 0; line-height: 1; color: var(--ink); position: relative; padding: var(--space-1) 0; transition: color var(--dur-state); }
  .nav-menu .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-state) var(--ease-out-expo); }
  .nav-menu .nav-links a:hover::after, .nav-menu .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
  .nav-menu .nav-call { margin: 0; align-self: center; height: 38px; min-height: 0; padding: 0 var(--space-5); font-size: var(--type-micro); white-space: nowrap; }
  .nav::before { height: 108px; }
}

/* ---------- 6. Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: clip; color: var(--ink); }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video, .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.hero-canvas { display: none; }
.hero-media.webgl-on .hero-canvas { display: block; }
.hero-media.webgl-on .hero-fallback { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .hero-media:not(.webgl-on) .hero-fallback { animation: kenburns 24s ease-in-out infinite alternate; transform-origin: 60% 45%; } }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.14); } }
/* grade the photo into the emerald ground: green-black, never brown */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 92% at 50% 6%, var(--scrim-0, rgba(6,20,14,0)) 36%, rgba(6,20,14,0.38) 82%, rgba(6,20,14,0.72) 100%),
    linear-gradient(180deg, rgba(6,20,14,0.40) 0%, var(--scrim-0, rgba(6,20,14,0)) 26%, var(--scrim-0, rgba(6,20,14,0)) 42%, rgba(6,20,14,0.78) 86%, var(--ground) 100%);
}
.hero-content { position: relative; z-index: 1; width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; padding-block-end: clamp(40px, 8vh, 110px); }
.hero h1 { font-size: var(--type-display); line-height: var(--leading-display); color: var(--ink); max-width: 16ch; letter-spacing: -0.022em; }
.hero h1 .g { color: var(--gold); }
.hero-sub { margin-block-start: var(--space-5); max-width: 42ch; font-size: var(--type-lead); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.hero-dateline { display: inline-flex; margin-block-start: var(--space-5); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
.hero-ctas .btn { flex: 1 1 100%; }
@media (min-width: 861px) { .hero-ctas .btn { flex: 0 0 auto; } }
.hero-cue { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 1; color: var(--ink-soft); animation: cue 2.4s var(--ease-out-quart) infinite; }
@keyframes cue { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* light sweep across the headline */
.hero h1 { position: relative; }
.hero .sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgba(242,201,121,0) 30%, rgba(242,201,121,0.28) 48%, rgba(242,201,121,0) 62%); transform: translateX(-120%); }
.hero.swept .sweep { transition: transform 1.1s var(--ease-out-quart); transform: translateX(120%); }

/* ---------- 7. Marquee: hairline strip ---------- */
.marquee { overflow: clip; border-block: 1px solid var(--line); padding-block: var(--space-4); }
.marquee-track { display: flex; gap: var(--space-6); width: max-content; will-change: transform; }
.marquee-track span { font-size: var(--type-small); font-weight: 550; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-6); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); }
.marquee-track .dot { color: var(--gold); font-style: normal; }

/* ---------- 8. Story ---------- */
.story .container { display: grid; gap: var(--space-6); align-items: center; }
.story-media { border-radius: var(--radius-md); overflow: clip; border: 1px solid var(--line-2); }
.story-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.story h2 { font-size: var(--type-h1); max-width: 15ch; }
.story p { margin-block-start: var(--space-4); }
.story .signoff { color: var(--gold); font-weight: 550; margin-block-start: var(--space-5); }
@media (min-width: 861px) { .story .container { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); } .story.flip .story-media { order: 2; } }

/* ---------- 9. Scenes: footage windows, lower-third captions ---------- */
.scene { position: relative; min-height: 80svh; display: flex; align-items: flex-end; overflow: clip; }
/* Oversized + centered so the parallax translate (yPercent -8..8) never brings
   a media edge into the clipped scene box. An exactly-sized image drifts its
   edge across the pixel grid during smooth-scroll, flashing a 1px seam that
   shimmers ("tweaks"). 125% height gives 12.5% bleed each side; max shift is
   ~10% of the scene, so an edge can never reach the viewport. */
.scene video, .scene img.scene-poster { position: absolute; left: 0; right: 0; top: -12.5%; width: 100%; height: 125%; object-fit: cover; z-index: 0; backface-visibility: hidden; }
/* feather footage out of and back into the ground; resolve to opaque ground
   before the very edge so the last band matches the next section seamlessly.
   Interpolate in oklab (smoother ramp, less 8-bit banding than sRGB). */
.scene::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  /* Darken the top feather with the near-black scrim, NOT the green ground:
     a warm (sunset) sky faded into green mixes through yellow/muddy hues and
     reads as an iridescent band. Fading warm->dark->black stays clean; only the
     very top edge (0-8%, where the image is fully covered) touches --ground so
     the section above still meets it seamlessly. */
  background: linear-gradient(180deg,
    var(--ground) 0%,
    rgba(6,20,14,0.94) 8%,
    rgba(6,20,14,0.4) 18%,
    var(--scrim-0, rgba(6,20,14,0)) 30%,
    var(--scrim-0, rgba(6,20,14,0)) 62%,
    rgba(6,20,14,0.62) 80%,
    var(--ground) 94%);
}
/* dither the feather: a smooth ground-to-footage fade over a bright sky bands
   into a visible line on 8-bit (esp. phone) displays — and because the scrim is
   green, the R/G/B channels band at slightly different heights, giving an
   iridescent/gold fringe. High-contrast 1px noise blended over the fade breaks
   the bands so no line can form. */
.scene::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.1; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%3E%3Cfilter%20id='sd'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='1'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type='discrete'%20tableValues='0%201'/%3E%3CfeFuncG%20type='discrete'%20tableValues='0%201'/%3E%3CfeFuncB%20type='discrete'%20tableValues='0%201'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23sd)'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  /* confine the dither to the two fade zones (top + bottom feather) where the
     banding forms; leave the clear middle of the footage grain-free */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 20%, transparent 33%, transparent 71%, #000 84%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 20%, transparent 33%, transparent 71%, #000 84%, #000 100%);
}
.scene-caption { position: relative; z-index: 3; width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; padding-block-end: clamp(40px, 7vh, 88px); color: var(--ink); }
.scene-caption h2 { font-size: var(--type-h2); max-width: 24ch; }
.scene-caption .dateline, .scene-caption .cap { display: inline-flex; margin-block-start: var(--space-3); }
.scene-caption a { color: var(--gold); }

/* ---------- 10. Products: the farm shop (contained cards) ---------- */
.piece { position: relative; overflow: clip; }
.products-head { margin-block-end: clamp(36px, 6vw, 64px); }
.products-head .lead { margin-block-start: var(--space-4); max-width: 54ch; }
/* desktop: heading left, supporting lead right — fills the width instead of
   stranding the block in the left third */
@media (min-width: 861px) {
  .products-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); align-items: end; }
  .products-head .lead { margin-block-start: 0; }
}

.pshop { display: grid; gap: var(--space-4); }
.pfeat, .ptile { position: relative; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-md); overflow: clip; }
.pmedia { position: relative; overflow: clip; }
.pmedia img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--ease-out-quart); }
.pfeat:hover .pmedia img, .ptile:hover .pmedia img { transform: scale(1.05); }
.ptag { position: absolute; z-index: 2; top: var(--space-4); left: var(--space-4); padding: 6px 13px; border-radius: var(--radius-pill); background: rgba(6,20,14,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: var(--type-micro); font-weight: 650; text-transform: uppercase; letter-spacing: var(--track-caps-tight); color: var(--gold); }

.pprice { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 5px; font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 560; line-height: 1; }
.pprice .cur { font-size: 0.5em; align-self: flex-start; margin-block-start: 0.14em; }
.pprice .unit { flex: 1 0 100%; font-family: var(--font-body); font-size: var(--type-small); font-weight: 400; color: var(--faint); letter-spacing: 0; margin-block-start: var(--space-2); }

/* featured product */
.pfeat .pmedia img { aspect-ratio: 16/11; }
.pfeat-body { padding: clamp(24px, 6vw, 44px); }
.pfeat h3 { font-family: var(--font-display); font-weight: var(--weight-heading); letter-spacing: var(--track-display); font-size: var(--type-h1); line-height: var(--leading-heading); color: var(--ink); }
.pfeat .pprice { margin-block-start: var(--space-3); font-size: clamp(2.4rem, 1.7rem + 2.6vw, 3.4rem); }
.pfeat p { margin-block-start: var(--space-4); max-width: 46ch; color: var(--ink-soft); }
.pfeat-specs { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin-block-start: var(--space-5); }
.pfeat-specs li { font-size: var(--type-micro); text-transform: uppercase; letter-spacing: var(--track-caps-tight); color: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 7px 13px; }
.pfeat-cta { margin-block-start: var(--space-6); display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* trio of tiles */
.ptiles { display: grid; gap: var(--space-4); }
.ptile { display: flex; flex-direction: column; }
.ptile .pmedia img { aspect-ratio: 4/3; }
.ptile-body { padding: clamp(20px, 5vw, 28px); display: flex; flex-direction: column; flex: 1; }
.ptile h3 { font-family: var(--font-display); font-weight: var(--weight-heading); letter-spacing: var(--track-display); font-size: var(--type-h3); color: var(--ink); }
.ptile .pprice { margin-block-start: var(--space-2); font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.3rem); }
.ptile p { margin-block: var(--space-3) var(--space-5); color: var(--ink-soft); font-size: var(--type-small); text-wrap: pretty; }
.ptile .btn { margin-block-start: auto; width: 100%; }

@media (min-width: 861px) {
  .pshop { gap: var(--space-5); }
  .pfeat { display: grid; grid-template-columns: 1.08fr 1fr; align-items: stretch; }
  .pfeat .pmedia img { height: 100%; aspect-ratio: auto; min-height: 340px; }
  .pfeat-body { align-self: center; }
  .ptiles { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}

/* ---------- 11. Difference list ---------- */
.breeds-list { list-style: none; border-top: 1px solid var(--line); margin-block-start: var(--space-6); }
.breed-row { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-bottom: 1px solid var(--line); transition: padding-inline-start var(--dur-state) var(--ease-out-quart); }
.breed-row:hover { padding-inline-start: var(--space-3); }
.breed-row b { font-size: var(--type-h3); font-weight: 600; }
.breed-row span { color: var(--ink-soft); }
@media (min-width: 861px) { .breed-row { grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: var(--space-6); align-items: baseline; } }

/* ---------- 12. Video reel: horizontal snap strip ---------- */
/* mobile mosaic — no horizontal scroll: first clip is a full-width feature,
   the other two sit side by side beneath it */
.reel {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  margin-block-start: var(--space-6);
}
.reel figure:first-child { grid-column: 1 / -1; }
.reel figure { position: relative; border-radius: var(--radius-md); overflow: clip; border: 1px solid var(--line-2); }
.reel figure:first-child video { aspect-ratio: 4/5; }
.reel video { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: var(--well); }
.reel figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: var(--space-5) var(--space-4) var(--space-3); background: linear-gradient(180deg, var(--scrim-0, rgba(6,20,14,0)), rgba(6,20,14,0.85)); color: var(--ink); font-size: var(--type-micro); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caps-tight); }
@media (min-width: 861px) {
  .reel { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-block-start: var(--space-6); }
  .reel figure:first-child { grid-column: auto; }
  .reel figure:first-child video { aspect-ratio: 3/4; }
}

/* ---------- 13. Qurbani steps: the one true sequence ---------- */
.rite-head .h1 { max-width: 18ch; }
.rite-head p { margin-block-start: var(--space-4); max-width: 46ch; }
.rite-steps { list-style: none; margin-block-start: var(--space-8); display: grid; gap: var(--space-8); }
.rite-step { display: grid; gap: var(--space-4); }
.rite-num { font-family: var(--font-display); font-size: var(--type-h2); font-weight: 480; color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; }
.rite-step h3 { font-family: var(--font-display); font-weight: var(--weight-heading); letter-spacing: var(--track-display); font-size: var(--type-h2); }
.rite-step .rite-price { color: var(--gold); font-weight: 600; margin-block: var(--space-2) var(--space-3); }
.rite-step p { color: var(--ink-soft); max-width: 50ch; text-wrap: pretty; }
.rite-step .reveal-media { border-radius: var(--radius-md); overflow: clip; border: 1px solid var(--line-2); }
.rite-step img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.rite-cta { text-align: center; margin-block-start: var(--space-8); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
@media (min-width: 861px) {
  .rite-step { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,5vw,72px); align-items: center; }
  .rite-step:nth-child(even) .reveal-media { order: 2; }
}

/* ---------- 14. FAQ ---------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-5); cursor: pointer; list-style: none; font-size: var(--type-h3); font-weight: 600; line-height: 1.3; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 50%; color: var(--ink-soft); transition: transform var(--dur-state) var(--ease-out-quart), background-color var(--dur-state), border-color var(--dur-state), color var(--dur-state); }
.faq-item[open] summary .faq-icon { transform: rotate(45deg); background: var(--btn-gold); color: var(--ink-on-gold); border-color: var(--btn-gold); }
.faq-item .faq-answer { padding-block: 0 var(--space-5); color: var(--ink-soft); max-width: 64ch; text-wrap: pretty; }

/* ---------- 15. Booking ---------- */
.booking { background: var(--ground-2); }
.booking .container { display: grid; gap: var(--space-7); }
.booking-lede h2 { font-size: var(--type-h1); max-width: 16ch; }
.booking-lede .phone-line { display: inline-block; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: var(--type-h2); font-weight: 580; color: var(--gold); text-decoration: none; margin-block: var(--space-5); }
.booking-lede .phone-line:hover { text-decoration: underline; text-underline-offset: 6px; }
.booking-lede p { max-width: 44ch; color: var(--ink-soft); }
.booking-lede p a { color: var(--gold); }
.booking-hours { margin-block-start: var(--space-5); font-size: var(--type-small); color: var(--faint); }
.form-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-md); padding: clamp(22px, 4vw, 42px); }
.form { display: grid; gap: var(--space-5); }
.form-row { display: grid; gap: var(--space-2); }
.form-row label { font-size: var(--type-micro); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caps-tight); color: var(--ink-soft); }
.form-row input, .form-row textarea { background: var(--well); border: 1.5px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); caret-color: var(--gold); font: inherit; font-size: 16px; padding: 14px 16px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.form-row input:hover, .form-row textarea:hover { border-color: var(--ink-soft); }
.form-row input:focus-visible, .form-row textarea:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(229,182,95,0.22); }
.form-row textarea { min-height: 120px; resize: vertical; }
::placeholder { color: var(--ink-soft); opacity: 0.8; }
.form-success { text-align: center; padding: var(--space-7) var(--space-4); }
.form-success svg { color: var(--gold); margin-inline: auto; margin-block-end: var(--space-4); }
.form-success h3 { font-size: var(--type-h3); margin-block-end: var(--space-2); }
.form-success p { color: var(--ink-soft); }
.form-success a { color: var(--gold); font-weight: 600; }
.map-wrap { margin-block-start: var(--space-6); border-radius: var(--radius-md); overflow: clip; border: 1px solid var(--line); }
.map-wrap iframe { display: block; width: 100%; height: 280px; border: 0; }
@media (min-width: 861px) {
  .booking .container { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(40px,6vw,96px); align-items: start; }
  .booking .form-card { grid-column: 2; grid-row: 1 / span 2; }
  .booking .map-wrap { grid-column: 1; margin-block-start: 0; }
}

/* ---------- 16. Closing CTA: the last frame ---------- */
.cta-band { position: relative; min-height: 92svh; display: flex; align-items: flex-end; overflow: clip; }
.cta-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* filmic bottom-anchored scrim that dissolves into the ground */
.cta-band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--ground) 0%, rgba(6,20,14,0.3) 12%, var(--scrim-0, rgba(6,20,14,0)) 34%, rgba(6,20,14,0.55) 60%, rgba(6,20,14,0.9) 84%, var(--ground) 100%);
}
.cta-band .in { position: relative; z-index: 1; width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; padding-block-end: clamp(48px, 12vh, 120px); }
.cta-band .dateline { display: inline-flex; margin-block-end: var(--space-4); }
.cta-band h2 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.3rem); line-height: var(--leading-display); letter-spacing: var(--track-display); color: var(--ink); text-wrap: balance; }
.cta-copy { max-width: 22ch; }
.cta-band p { color: var(--ink-soft); margin-block-start: var(--space-5); max-width: 42ch; }
.cta-act { margin-block-start: var(--space-7); }
.cta-act-label { display: block; font-size: var(--type-micro); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caps-tight); color: var(--faint); margin-block-end: var(--space-3); }
/* the phone number is the hero of the closing frame */
.cta-phone { display: block; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: clamp(2rem, 1.3rem + 3.4vw, 3.2rem); font-weight: 580; letter-spacing: var(--track-display); color: var(--gold); text-decoration: none; line-height: 1; margin-block-end: var(--space-5); }
.cta-phone:hover { text-decoration: underline; text-underline-offset: 8px; }
.cta-band .btns { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cta-band .btns .btn { flex: 1 1 auto; }
@media (min-width: 861px) {
  .cta-band .in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(48px, 6vw, 112px); align-items: end; }
  .cta-copy { max-width: none; }
  .cta-band p { margin-block-start: var(--space-6); }
  .cta-act { margin-block-start: 0; justify-self: start; }
  .cta-band .btns .btn { flex: 0 0 auto; }
}

/* ---------- 17. Footer ---------- */
.footer { padding-block: var(--space-9) var(--space-5); border-top: 1px solid var(--line-2); }
.footer-word { font-family: var(--font-display); font-size: clamp(2.6rem, 11vw, 5.5rem); font-weight: var(--weight-heading); letter-spacing: var(--track-display); line-height: 1; margin-block-end: var(--space-8); color: var(--ink); }
.footer-word .dot { color: var(--gold); }
.footer-grid { display: grid; gap: var(--space-6); }
.footer-brand { display: flex; align-items: center; gap: var(--space-4); }
.footer-brand img { height: 46px; width: auto; }
.footer-brand p { color: var(--ink-soft); font-size: var(--type-small); max-width: 30ch; }
.footer h4 { font-size: var(--type-micro); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caps-tight); color: var(--gold); margin-block-end: var(--space-4); }
.footer ul { list-style: none; display: grid; gap: var(--space-3); }
.footer a { color: var(--ink-soft); text-decoration: none; font-size: var(--type-small); transition: color var(--dur-fast); }
.footer a:hover { color: var(--gold); }
.footer address { font-style: normal; display: grid; gap: var(--space-3); font-size: var(--type-small); color: var(--ink-soft); }
.footer-bottom { margin-block-start: var(--space-8); padding-block-start: var(--space-5); border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; font-size: var(--type-micro); color: var(--faint); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
@media (min-width: 861px) { .footer-grid { grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap: var(--space-7); } }

/* ---------- 18. Gallery page ---------- */
.page-head { padding-block: calc(var(--space-9) + 40px) var(--space-7); }
.page-head .h1 { max-width: 18ch; }
.page-head p { color: var(--ink-soft); margin-block-start: var(--space-4); max-width: 52ch; font-size: var(--type-lead); line-height: 1.55; }
.gallery-filters { display: flex; gap: var(--space-2); margin-block-end: var(--space-6); flex-wrap: wrap; }
.filter-btn { min-height: 44px; padding: var(--space-2) var(--space-5); border: 1.5px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font-weight: 600; font-size: var(--type-micro); text-transform: uppercase; letter-spacing: var(--track-caps-tight); transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast); }
.filter-btn:hover { border-color: var(--ink); }
.filter-btn[aria-pressed="true"] { background: var(--btn-gold); border-color: var(--btn-gold); color: var(--ink-on-gold); }
.film-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3); grid-auto-flow: dense; }
.film-cell { position: relative; overflow: clip; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line-2); }
.film-cell img, .film-cell video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform 600ms var(--ease-out-quart); }
.film-cell:hover img { transform: scale(1.05); }
.film-cell.tall img, .film-cell.tall video { aspect-ratio: auto; min-height: 100%; }
.film-cell figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: var(--space-5) var(--space-4) var(--space-3); background: linear-gradient(180deg, var(--scrim-0, rgba(6,20,14,0)), rgba(6,20,14,0.88)); color: var(--ink); font-size: var(--type-micro); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caps-tight); opacity: 0; transition: opacity var(--dur-state); }
.film-cell:hover figcaption, .film-cell:focus-within figcaption { opacity: 1; }
.video-cell .play-badge { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-on-gold); }
.video-cell .play-badge span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--btn-gold); box-shadow: var(--shadow-1); transition: transform var(--dur-fast); }
.video-cell .play-badge:hover span { transform: scale(1.08); }
.video-cell.is-playing .play-badge { opacity: 0; pointer-events: none; }
@media (min-width: 861px) {
  .film-grid { grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--space-4); }
  .film-cell { grid-column: span 2; }
  .film-cell.wide { grid-column: span 4; }
  .film-cell.tall { grid-row: span 2; }
}

/* ---------- 19. Gallery preview: bento wall ---------- */
.gwall { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(140px, 42vw, 210px); gap: var(--space-3); margin-block-start: var(--space-6); }
.gwall figure { position: relative; overflow: clip; border-radius: var(--radius-md); border: 1px solid var(--line-2); }
.gwall img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--ease-out-quart); }
.gwall figure:hover img { transform: scale(1.05); }
.gwall .gw-a, .gwall .gw-f { grid-column: span 2; }
.gallery-cta { text-align: center; margin-block-start: var(--space-6); }
@media (min-width: 861px) {
  .gwall { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(170px, 15vw, 210px); gap: var(--space-4); }
  .gwall .gw-a { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .gwall .gw-b { grid-column: 3 / span 2; grid-row: 1; }
  .gwall .gw-c { grid-column: 3; grid-row: 2; }
  .gwall .gw-d { grid-column: 4; grid-row: 2; }
  .gwall .gw-e { grid-column: 1 / span 2; grid-row: 3; }
  .gwall .gw-f { grid-column: 3 / span 2; grid-row: 3; }
}

/* ---------- 20. Prose (legal) ---------- */
.prose { max-width: 70ch; }
.prose h1 { font-size: var(--type-h1); margin-block-end: var(--space-3); }
.prose .updated { color: var(--faint); font-size: var(--type-small); margin-block-end: var(--space-7); }
.prose h2 { font-size: var(--type-h3); margin-block: var(--space-7) var(--space-3); padding-block-start: var(--space-5); border-top: 1px solid var(--line); color: var(--ink); }
.prose p, .prose li { color: var(--ink-soft); text-wrap: pretty; }
.prose p + p { margin-block-start: var(--space-3); }
.prose ul { padding-inline-start: 1.2em; margin-block: var(--space-3); display: grid; gap: var(--space-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--gold); font-weight: 600; }

/* ---------- 22. Custom cursor ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); translate: -50% -50%; transition: width 0.3s var(--ease-out-quart), height 0.3s var(--ease-out-quart); display: none; }
.cursor-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-on-gold); opacity: 0; white-space: nowrap; }
.cursor.is-active { width: 66px; height: 66px; }
.cursor.is-active .cursor-label { opacity: 1; }
body.has-cursor { cursor: none; }
body.has-cursor a, body.has-cursor button, body.has-cursor summary, body.has-cursor [data-cursor] { cursor: none; }
body.has-cursor input, body.has-cursor textarea { cursor: text; }
@media (hover: none), (pointer: coarse) { .cursor { display: none !important; } body.has-cursor { cursor: auto; } }

/* ---------- 23. Conversion: sticky bar (phone) + FAB (desktop) ---------- */
.action-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-bar);
  display: flex; gap: var(--space-2);
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + var(--safe-b));
  background: rgba(16, 56, 40, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-2);
  transition: transform var(--dur-layout) var(--ease-out-expo);
}
.action-bar.is-hidden { transform: translateY(130%); }
body.menu-open .action-bar { transform: translateY(130%); }
.action-bar a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; border-radius: var(--radius-pill); font-size: var(--type-micro); font-weight: 650; text-transform: uppercase; letter-spacing: var(--track-caps-tight); text-decoration: none; }
.action-bar .ab-call { border: 1.5px solid var(--line); color: var(--ink); }
.action-bar .ab-wa { background: var(--wa); color: var(--ink-on-wa); }
body { padding-bottom: calc(var(--bar-h) + var(--safe-b)); }
.whatsapp-fab { display: none; }
@media (min-width: 861px) {
  .action-bar { display: none; }
  body { padding-bottom: 0; }
  .whatsapp-fab { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-overlay); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--wa); color: var(--ink-on-wa); text-decoration: none; box-shadow: var(--shadow-2); transition: transform var(--dur-state) var(--ease-out-quart); }
  .whatsapp-fab:hover { transform: scale(1.07); }
}

/* ---------- 24. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hero-cue, .hero-fallback, .marquee-track { animation: none !important; }
}