/* =================================================================
   Al-Hafiz — LUXURY LAYER
   Glassmorphism · animated SVG service icons · refined motion
   Loaded after style.css; overrides where needed.
   ================================================================= */

:root {
  --glass-bg:     rgba(255, 255, 255, 0.55);
  --glass-bg-2:   rgba(255, 255, 255, 0.40);
  --glass-brd:    rgba(255, 255, 255, 0.75);
  --glass-hi:     inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(44, 43, 112,0.04);
  --glow-gold:    0 0 0 1px rgba(216,185,103,.35), 0 24px 60px -28px rgba(189,149,66,.55);
  --glow-forest:  0 30px 70px -34px rgba(44, 43, 112,.5);
  --grad-gold:    linear-gradient(105deg, #B8893D 0%, #D8B967 45%, #F0DDA6 60%, #B8893D 100%);
  --grad-forest:  linear-gradient(150deg, #4B4AB5, #2C2B70);
}

/* =================================================================
   1 · ATMOSPHERIC BACKGROUND (gives glass something to refract)
   ================================================================= */
body { position: relative; background: var(--ivory); }
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -10; pointer-events: none;
  background:
    radial-gradient(38rem 38rem at 10% 6%,  rgba(189,149,66,.18), transparent 60%),
    radial-gradient(44rem 44rem at 92% 14%, rgba(75,74,181,.14),  transparent 62%),
    radial-gradient(40rem 40rem at 82% 96%, rgba(216,185,103,.16),transparent 60%),
    radial-gradient(34rem 34rem at 4% 92%,  rgba(44, 43, 112,.10),   transparent 60%);
}
/* slow drifting luminous orbs */
body::after {
  content: "";
  position: fixed; inset: -20%; z-index: -9; pointer-events: none;
  background:
    radial-gradient(22rem 22rem at 20% 30%, rgba(216,185,103,.16), transparent 60%),
    radial-gradient(26rem 26rem at 78% 64%, rgba(75,74,181,.12), transparent 62%);
  filter: blur(8px);
  animation: orb-drift 26s ease-in-out infinite alternate;
}
@keyframes orb-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

/* =================================================================
   2 · GLASSMORPHISM — applied to all cards & surfaces
   ================================================================= */
.product-card,
.process-card,
.value-card,
.contact-card,
.form-card,
.hero-tag,
.hero-badge {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-hi), 0 22px 50px -30px rgba(44, 43, 112,.35);
}

.product-card:hover,
.process-card:hover,
.value-card:hover,
.contact-card:hover {
  border-color: rgba(216,185,103,.55);
  box-shadow: var(--glass-hi), var(--glow-gold);
}

/* product media glass cap — taller frame + minimal padding so bags read big */
.product-media.is-bag {
  aspect-ratio: 5 / 6;
  background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(242,235,218,.5));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-brd);
}
.product-media.is-bag img { padding: 6px; }
.product-card:hover .product-media.is-bag img { transform: scale(1.06); }

/* photo product (e.g. Silage) — same framed white cap & height as bags,
   but the photo fills the frame (cover) with rounded corners for a uniform card. */
.product-media.is-photo {
  aspect-ratio: 5 / 6;
  background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(242,235,218,.5));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-brd);
}
.product-media.is-photo img {
  box-sizing: border-box;
  padding: 6px;
  border-radius: 16px;
  object-fit: cover;
}
.product-card:hover .product-media.is-photo img { transform: scale(1.06); }

/* 6-product grid → 3 columns on desktop (tidy 2 rows) */
@media (min-width: 1081px) { .products-grid.pg-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* glassy feature rows */
.feature-item {
  border: 1px solid transparent;
}
.feature-item:hover {
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-color: var(--glass-brd);
  box-shadow: var(--glass-hi), 0 18px 40px -26px rgba(44, 43, 112,.3);
}

/* header turns to crystal on scroll */
.site-header.scrolled {
  background: rgba(250,246,236,0.6);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), 0 10px 40px -24px rgba(44, 43, 112,.4);
}
/* The mobile menu drawer (.nav-links) is position:fixed inside the header.
   A backdrop-filter on the scrolled header makes it a containing block, which
   misplaces the drawer when the menu is opened while scrolled down. Drop the
   filter (and any clipping) while the menu is open so the drawer pins to the
   viewport — full height — exactly like at the top of the page. */
body.menu-open .site-header,
body.menu-open .site-header.scrolled {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* form fields frosted */
.field input, .field textarea, .field select {
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: var(--glass-brd);
}

/* glass map */
.map-frame { border-color: var(--glass-brd); box-shadow: var(--glass-hi), 0 30px 70px -40px rgba(44, 43, 112,.5); }

/* =================================================================
   3 · LUXURY TYPOGRAPHY ACCENTS
   ================================================================= */
.serif-accent {
  display: inline-block;
  padding: 0.05em 0.14em 0.18em;
  margin: -0.05em -0.08em -0.18em;
  font-weight: 500;
  background: linear-gradient(100deg, #8A5E12 0%, #C2922B 45%, #9C6B16 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gold-shimmer 5s linear infinite;
}
@keyframes gold-shimmer { to { background-position: 200% center; } }

.eyebrow { position: relative; }

/* gilded hairline under section titles */
.sec-head.center .section-title::after {
  content: "";
  display: block;
  width: 64px; height: 3px; margin: 22px auto 0;
  border-radius: 3px;
  background: var(--grad-gold);
  background-size: 200% auto;
  animation: gold-shimmer 4s linear infinite;
}

/* =================================================================
   4 · ANIMATED SVG SERVICE ICONS
   ================================================================= */
/* the glass tile holding each animated icon */
.process-card .ico,
.feature-item .ico,
.value-card .ico,
.contact-card .ico,
.svc-ico {
  position: relative;
  border-radius: 18px;
  display: grid; place-items: center;
  color: var(--forest);
  background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(239,227,196,.62));
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-hi), 0 14px 30px -16px rgba(189,149,66,.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .5s;
}
.process-card .ico::after,
.feature-item .ico::after,
.value-card .ico::after,
.contact-card .ico::after,
.svc-ico::after { /* sheen sweep */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .8s var(--ease);
}
.process-card:hover .ico,
.feature-item:hover .ico,
.value-card:hover .ico,
.contact-card:hover .ico {
  transform: translateY(-4px) scale(1.07) rotate(-3deg);
  background: var(--grad-forest);
  box-shadow: 0 18px 40px -16px rgba(44, 43, 112,.7);
}
.process-card:hover .ico::after,
.feature-item:hover .ico::after,
.value-card:hover .ico::after,
.contact-card:hover .ico::after { transform: translateX(130%); }

.ico .ai, .svc-ico .ai { width: 35px; height: 35px; position: relative; z-index: 1; display: block; }
.ai * { transform-box: fill-box; transform-origin: center; }
/* stroke icon defaults */
.ai .s { fill: none; stroke: var(--forest); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.ai .g { fill: var(--gold); transition: fill .5s; }
.ai .gs { fill: none; stroke: var(--gold); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
/* invert colours when tile goes forest on hover */
.process-card:hover .ai .s,
.feature-item:hover .ai .s,
.value-card:hover .ai .s,
.contact-card:hover .ai .s { stroke: #FBF6E9; }
.process-card:hover .ai .gs,
.feature-item:hover .ai .gs,
.value-card:hover .ai .gs,
.contact-card:hover .ai .gs { stroke: var(--gold-soft); }
.process-card:hover .ai .g,
.feature-item:hover .ai .g,
.value-card:hover .ai .g,
.contact-card:hover .ai .g { fill: var(--gold-soft); }

/* ---- continuous idle motions (subtle) ---- */
.a-spin     { animation: ai-spin 9s linear infinite; transform-origin: center; }
.a-spin-rev { animation: ai-spin 7s linear infinite reverse; transform-origin: center; }
.a-bob      { animation: ai-bob 3.2s ease-in-out infinite; }
.a-pulse    { animation: ai-pulse 2.6s ease-in-out infinite; transform-origin: center; }
.a-sway     { animation: ai-sway 3.4s ease-in-out infinite; transform-origin: bottom center; }
.a-roll     { animation: ai-spin 2.4s linear infinite; transform-origin: center; }
.a-ring     { animation: ai-ring 3s ease-out infinite; transform-origin: center; }
.a-twinkle  { animation: ai-twinkle 2.2s ease-in-out infinite; transform-origin: center; }
.a-scan     { animation: ai-scan 3s ease-in-out infinite; }
.a-fall1    { animation: ai-fall 2.2s ease-in infinite; }
.a-fall2    { animation: ai-fall 2.2s ease-in .55s infinite; }
.a-fall3    { animation: ai-fall 2.2s ease-in 1.1s infinite; }
.a-bub1     { animation: ai-bubble 2.4s ease-in infinite; }
.a-bub2     { animation: ai-bubble 2.4s ease-in .6s infinite; }
.a-bub3     { animation: ai-bubble 2.4s ease-in 1.3s infinite; }
.a-orbit    { animation: ai-orbit 4.5s linear infinite; transform-box: view-box; transform-origin: center; }
.a-draw     { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ai-draw 2.4s var(--ease) infinite; }
.a-wave1    { animation: ai-wave 1.8s ease-out infinite; transform-origin: left center; }
.a-wave2    { animation: ai-wave 1.8s ease-out .3s infinite; transform-origin: left center; }

/* ---- BOLD hover motions (card-triggered) ---- */
.process-card:hover .a-spin     { animation-duration: 1.6s; }
.process-card:hover .a-spin-rev { animation-duration: 1.3s; }
.process-card:hover .a-roll     { animation-duration: .7s; }
.process-card:hover .a-bob,
.feature-item:hover .a-bob,
.value-card:hover  .a-bob       { animation-duration: 1s; }
.feature-item:hover .a-pulse,
.value-card:hover   .a-pulse    { animation-duration: 1s; }
.process-card:hover .a-sway     { animation-duration: 1.1s; }
.contact-card:hover .a-ring     { animation-duration: 1s; }
.value-card:hover   .a-orbit    { animation-duration: 1.8s; }
.feature-item:hover .a-orbit    { animation-duration: 1.8s; }
.value-card:hover   .a-scan     { animation-duration: 1.2s; }
.contact-card:hover .a-wave1,
.contact-card:hover .a-wave2    { animation-duration: .9s; }

@keyframes ai-spin   { to { transform: rotate(360deg); } }
@keyframes ai-bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ai-pulse  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes ai-sway   { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes ai-ring   { 0% { transform: scale(.6); opacity: .9; } 80%,100% { transform: scale(1.5); opacity: 0; } }
@keyframes ai-twinkle{ 0%,100% { transform: scale(.7); opacity: .4; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes ai-scan   { 0%,100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes ai-fall   { 0% { transform: translateY(-7px); opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(9px); opacity: 0; } }
@keyframes ai-bubble { 0% { transform: translateY(4px) scale(.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-9px) scale(1); opacity: 0; } }
@keyframes ai-orbit  { to { transform: rotate(360deg); } }
@keyframes ai-draw   { 0% { stroke-dashoffset: 1; } 55%,100% { stroke-dashoffset: 0; } }
@keyframes ai-wave   { 0% { transform: scaleX(.3); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* =================================================================
   5 · HERO & CTA POLISH
   ================================================================= */
.hero-frame {
  border: none;                          /* border-image broke the rounded corners */
  padding: 8px;
  background: var(--grad-gold);
  background-size: 200% auto;
  box-shadow: var(--glow-forest), 0 0 0 1px rgba(216,185,103,.3);
  animation: hero-float 7s ease-in-out infinite, gold-shimmer 6s linear infinite;
}
.hero-frame img { border-radius: calc(var(--r-lg) - 8px); object-position: 68% center; }
/* hero image carousel — crossfade through farm images */
.hero-carousel { position: relative; width: 100%; height: 100%; }
.hero-carousel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  border-radius: calc(var(--r-lg) - 8px);
  opacity: 0; transition: opacity 1.1s var(--ease);
}
.hero-carousel img.active { opacity: 1; }
@media (prefers-reduced-motion: reduce){ .hero-carousel img { transition: none; } }
.hero-frame::after { inset: 8px; border-radius: calc(var(--r-lg) - 8px); }
@keyframes hero-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero-chip { box-shadow: 0 16px 36px -16px rgba(44, 43, 112,.7); }
.hero-badge { animation: hero-float 7s ease-in-out infinite .8s; }

/* button shine sweep */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-180%) skewX(-18deg);
  transition: transform .7s var(--ease);
}
.btn:hover::before { transform: translateX(320%) skewX(-18deg); }
.btn-gold { background: var(--grad-gold); background-size: 200% auto; animation: gold-shimmer 5s linear infinite; }

/* =================================================================
   6 · STATS BAND — frosted dark glass + gilded numbers
   ================================================================= */
.stats {
  box-shadow: var(--glow-forest);
  border: 1px solid rgba(216,185,103,.18);
}
.stat-num {
  background: var(--grad-gold);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gold-shimmer 6s linear infinite;
}
.stat-num .u { -webkit-text-fill-color: initial; color: var(--gold-soft); }

/* product tag chip → glass */
.product-media .tag {
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--glass-brd);
}

/* timeline year gilded */
.tl-year {
  background: var(--grad-gold); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gold-shimmer 6s linear infinite;
}
.tl-item { transition: padding-left .4s var(--ease); }
.tl-item:hover { padding-left: 14px; }

/* ---- Leadership / team cards ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  gap: 30px;
  justify-content: center;
}
.leader-card {
  margin: 0;
  text-align: center;
  padding: 30px 28px 34px;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-hi), 0 22px 50px -30px rgba(44, 43, 112,.35);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.leader-card:hover {
  transform: translateY(-8px);
  border-color: rgba(216,185,103,.55);
  box-shadow: var(--glass-hi), var(--glow-gold);
}
.leader-photo {
  width: 190px;
  aspect-ratio: 175 / 219;
  margin: 0 auto 22px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 5px solid var(--paper);
  box-shadow: var(--shadow-md);
  background: var(--ivory-deep);
}
.leader-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.leader-card:hover .leader-photo img { transform: scale(1.05); }
.leader-card h3 { font-size: 1.45rem; }
.leader-role {
  display: inline-block;
  margin-top: 8px;
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  background: var(--grad-gold);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gold-shimmer 6s linear infinite;
}
@media (max-width: 620px) { .team-grid { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; } }

/* =================================================================
   6b · BRAND LOGO MARK
   ================================================================= */
.brand-mark { background: none !important; box-shadow: none; overflow: visible; }
.brand-mark::after { display: none; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.site-header .brand-mark { width: 68px; height: 68px; }
.site-footer .brand-mark {
  width: 76px; height: 76px;
  background: #fff !important;
  border-radius: 16px;
  padding: 7px;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.45);
}

/* =================================================================
   6c · ON-THE-FARM GALLERY
   ================================================================= */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gallery-item {
  margin: 0;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-hi), 0 24px 55px -32px rgba(44,43,112,.45);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gallery-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(44,43,112,.34));
  opacity: 0; transition: opacity .5s;
}
.gallery-item:hover { transform: translateY(-6px); box-shadow: var(--glass-hi), var(--glow-gold); }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item:hover::after { opacity: 1; }
@media (max-width: 860px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
/* phones: swipeable horizontal carousel instead of a tall stack */
@media (max-width: 560px) {
  .gallery-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin: 0 -20px;              /* bleed to the screen edges */
    padding: 4px 20px 12px;      /* edge gutters + room for card shadow */
    scrollbar-width: none;
  }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gallery-item {
    flex: 0 0 84%;               /* shows a peek of the next image */
    scroll-snap-align: center;
  }
  /* disable the desktop hover-lift inside a scroller */
  .gallery-item:hover { transform: none; }
}

/* =================================================================
   6d · CART + PRODUCT CTA BUTTONS
   ================================================================= */
.prod-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* google maps link */
.map-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: .85rem; font-weight: 600; color: var(--gold); }
.map-link svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.map-link:hover { color: var(--forest); }
.map-link:hover svg { transform: translateX(3px); }
.map-actions { text-align: center; margin-top: 24px; }

/* product-card add-to-cart actions */
.card-actions { margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.card-add { font-size: .85rem; padding: 11px 20px; }
.product-card .card-actions .product-link { margin-top: 0; }
.prod-cta .btn { font-size: .92rem; padding: 13px 24px; }
.prod-cta .btn-ghost svg { width: 17px; height: 17px; }

/* header cart button */
.cart-btn {
  position: relative; width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--forest); display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--glass-hi);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.cart-btn svg { width: 20px; height: 20px; }
.cart-btn:hover { transform: translateY(-2px); border-color: rgba(189,149,66,.6); box-shadow: var(--glass-hi), 0 12px 26px -14px rgba(189,149,66,.6); }
.cart-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--gold); color: var(--forest);
  font-size: .7rem; font-weight: 700; line-height: 1;
  display: none; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.cart-badge.show { display: grid; }
.cart-btn.bump { animation: cart-bump .45s var(--ease); }
@keyframes cart-bump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.22); } }

/* overlay + drawer */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(23,30,80,.45);
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; z-index: 300;
}
body.cart-open .cart-overlay { opacity: 1; visibility: visible; }
.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(92vw, 400px);
  background: var(--ivory);
  box-shadow: -30px 0 80px -30px rgba(23,30,80,.5);
  transform: translateX(100%);
  transition: transform .5s var(--ease);
  z-index: 301; display: flex; flex-direction: column;
}
.lang-ur .cart-drawer { right: auto; left: 0; transform: translateX(-100%); box-shadow: 30px 0 80px -30px rgba(23,30,80,.5); }
body.cart-open .cart-drawer { transform: none; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.cart-head h3 { font-size: 1.3rem; color: var(--forest); }
.cart-close { width: 38px; height: 38px; border: none; background: transparent; font-size: 1.7rem; line-height: 1; color: var(--ink-soft); cursor: pointer; border-radius: 50%; }
.cart-close:hover { background: rgba(0,0,0,.05); color: var(--forest); }
.cart-body { flex: 1; overflow-y: auto; padding: 16px; }
.cart-item { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); margin-bottom: 10px; }
.cart-item-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cart-item-info strong { font-size: .94rem; color: var(--forest); font-weight: 600; line-height: 1.25; }
.cart-item-info span { font-size: .76rem; color: var(--ink-soft); }
.cart-qty { display: flex; align-items: center; gap: 6px; background: var(--ivory); border: 1px solid var(--line); border-radius: 100px; padding: 3px; }
.cart-qty button { width: 26px; height: 26px; border: none; background: var(--paper); border-radius: 50%; color: var(--forest); font-size: 1rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; }
.cart-qty button:hover { background: var(--forest); color: #fff; }
.cart-qty span { min-width: 16px; text-align: center; font-weight: 600; font-size: .88rem; }
.cart-remove { width: 28px; height: 28px; border: none; background: transparent; color: var(--ink-soft); font-size: 1.25rem; line-height: 1; cursor: pointer; border-radius: 50%; flex-shrink: 0; }
.cart-remove:hover { color: #c0392b; background: rgba(192,57,43,.08); }
.cart-empty { text-align: center; padding: 64px 24px; color: var(--ink-soft); }
.cart-empty svg { width: 52px; height: 52px; color: var(--line); margin-bottom: 16px; }
.cart-empty p { font-weight: 600; color: var(--forest); margin-bottom: 6px; }
.cart-empty span { font-size: .9rem; }
.cart-foot { padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--ivory); }
.cart-checkout { width: 100%; justify-content: center; gap: 10px; background: #1FA855; }
.cart-checkout::before { display: none; }
.cart-checkout:hover { background: #1c9a4e; transform: translateY(-2px); }
.cart-note { font-size: .8rem; color: var(--ink-soft); text-align: center; margin-top: 10px; }

/* =================================================================
   7 · FLOATING WHATSAPP BUTTON
   ================================================================= */
.wa-float {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  height: 60px;
  border-radius: 100px;
  background: linear-gradient(150deg, #2BD46E, #1FA855);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 16px 38px -10px rgba(31,168,85,.65), 0 6px 16px rgba(0,0,0,.18);
  transition: box-shadow .4s var(--ease), transform .35s var(--ease);
}
.wa-float::before { /* breathing pulse halo */
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 60px; height: 60px; border-radius: 50%;
  background: #2BD46E; z-index: -1;
  animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { opacity: 0; }
}
.wa-float .wa-ico {
  width: 60px; height: 60px; flex: 0 0 60px;
  display: grid; place-items: center;
}
.wa-float .wa-ico svg { width: 32px; height: 32px; display: block; }
.wa-float .wa-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600; font-size: .96rem; letter-spacing: -.01em;
  opacity: 0;
  transition: max-width .5s var(--ease), opacity .4s var(--ease), padding .5s var(--ease);
}
.wa-float:hover, .wa-float:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -10px rgba(31,168,85,.8), 0 8px 20px rgba(0,0,0,.22);
}
.wa-float:hover .wa-label, .wa-float:focus-visible .wa-label {
  max-width: 200px; opacity: 1; padding-right: 24px;
}
@media (max-width: 620px) {
  .wa-float { right: 16px; bottom: 16px; height: 56px; }
  .wa-float::before, .wa-float .wa-ico { width: 56px; height: 56px; }
  .wa-float .wa-ico { flex-basis: 56px; }
}

/* =================================================================
   8 · LANGUAGE TOGGLE + URDU (RTL) MODE
   ================================================================= */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 600;
  color: var(--forest);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 9px 16px;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: var(--glass-hi);
  transition: transform .35s var(--ease), border-color .3s, box-shadow .3s;
}
.lang-toggle svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; }
.lang-toggle .lang-label { line-height: 1; }
.lang-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(189,149,66,.6);
  box-shadow: var(--glass-hi), 0 12px 26px -14px rgba(189,149,66,.6);
}

/* ---- Urdu / RTL ---- */
.lang-ur body { font-family: 'Noto Naskh Arabic', var(--font); }
.lang-ur .display,
.lang-ur h1, .lang-ur h2, .lang-ur h3, .lang-ur h4,
.lang-ur .section-title,
.lang-ur .brand-name,
.lang-ur .stat-num,
.lang-ur .tl-year {
  font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;
  line-height: 1.9;
}
.lang-ur .lead, .lang-ur p, .lang-ur li,
.lang-ur .nav-links a, .lang-ur .btn, .lang-ur .eyebrow,
.lang-ur .field label, .lang-ur input, .lang-ur textarea, .lang-ur select,
.lang-ur .lang-toggle {
  font-family: 'Noto Naskh Arabic', var(--font);
}
.lang-ur .lead, .lang-ur p { line-height: 2; }
.lang-ur .display { line-height: 1.7; }

/* keep Latin/number runs upright inside RTL */
.lang-ur .nav-phone, .lang-ur a[href^="tel"], .lang-ur a[href^="mailto"] { direction: ltr; unicode-bidi: isolate; }

/* RTL fixes for asymmetric bits */
.lang-ur .eyebrow::before { background: linear-gradient(270deg, transparent, var(--gold)); }
.lang-ur .nav-links a.active::after { left: 16px; right: 16px; }
.lang-ur .product-link svg,
.lang-ur .btn svg.arrow { transform: scaleX(-1); }
.lang-ur .hero-badge { left: auto; right: -26px; }
.lang-ur .hero-chip { right: auto; left: -22px; }
.lang-ur .product-media .tag { left: auto; right: 14px; }
.lang-ur .prod-media-wrap .badge { left: auto; right: 18px; }
.lang-ur .wa-float { right: auto; left: 24px; }
.lang-ur .wa-float::before { right: auto; left: 0; }
@media (max-width: 620px) { .lang-ur .wa-float { left: 16px; } }

/* =================================================================
   9 · ACCESSIBILITY
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, .ai * { animation: none !important; }
  .a-draw { stroke-dashoffset: 0; }
  body::after, .hero-frame, .hero-badge { animation: none !important; }
}

/* =================================================================
   10 · MOBILE OPTIMIZATION
   ================================================================= */
.nav-menu-cta { display: none; }            /* hidden on desktop */

@media (max-width: 920px) {
  .site-header { padding: 12px 0; }
  .site-header.scrolled { padding: 10px 0; }
  .site-header .brand-mark { width: 46px; height: 46px; }
  .brand { gap: 11px; }
  .brand-text { line-height: 1.1; }
  .brand-name { font-size: 1rem; white-space: nowrap; }
  .brand-sub { font-size: .56rem; letter-spacing: .16em; white-space: nowrap; }
  .nav { gap: 10px; }
  .nav-cta { gap: 10px; }
  .nav-cta .btn-primary { display: none; }  /* primary CTA relocates into the menu */
  .lang-toggle { padding: 8px 13px; font-size: .85rem; }

  /* CTA shown inside the slide-out menu */
  .nav-links .nav-menu-cta {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 20px;
    color: #fff;
    font-weight: 500;
  }
  .nav-links .nav-menu-cta:hover { color: #fff; }
  .nav-links .nav-menu-cta::after { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .container { padding: 0 18px; }
  .section { padding: 58px 0; }
  .sec-head { margin-bottom: 38px; }
  .section-title { font-size: clamp(1.65rem, 7.4vw, 2.3rem); }
  .lead { font-size: 1.01rem; }

  /* hero */
  .hero { padding: 112px 0 54px; }
  .display { font-size: clamp(2.25rem, 10vw, 3rem); letter-spacing: -0.03em; }
  .hero h1 { margin: 18px 0 22px; }
  .hero-tag { font-size: .76rem; }
  .hero-actions { margin-top: 26px; gap: 12px; }
  .hero-meta { gap: 18px 26px; margin-top: 38px; padding-top: 24px; }
  .hero-meta .num { font-size: 1.65rem; }
  .hero-meta .lbl { font-size: .76rem; }
  .hero-visual { max-width: 330px; margin-inline: auto; }
  .hero-frame { padding: 6px; }
  .hero-badge { left: 0; padding: 13px 16px; }
  .hero-badge .ring { width: 38px; height: 38px; }
  .hero-chip { right: 0; padding: 9px 14px; font-size: .78rem; }

  /* page hero */
  .page-hero { padding: 108px 0 44px; }
  .page-hero h1 { font-size: clamp(2rem, 8.6vw, 3rem); }
  .page-hero .lead { margin-top: 18px; }

  /* products */
  .product-media.is-bag,
  .product-media.is-photo { aspect-ratio: 1 / 1; }
  .product-body { padding: 20px 20px 24px; }
  .product-body h3 { font-size: 1.18rem; }
  .prod-media-wrap.is-bag { max-width: 300px; margin: 0 auto; }
  .prod-copy h3 { font-size: clamp(1.5rem, 6.5vw, 2rem); }

  /* stats / cta bands */
  .stats { padding: 40px 22px; border-radius: 22px; }
  .stat-num { font-size: clamp(2.3rem, 12vw, 3.2rem); }
  .stat-lbl { font-size: .84rem; }
  .cta-band { padding: 46px 22px; border-radius: 22px; }

  /* process / cards spacing */
  .process-card { padding: 26px 22px; }
  .value-card { padding: 30px 24px; }
  .feature-item { padding: 16px; }

  /* contact */
  .contact-card { padding: 22px 20px; gap: 16px; }
  .form-card { padding: 26px 20px; }
  .map-frame { height: 320px; }

  /* leadership */
  .leader-photo { width: 164px; }

  /* footer */
  .footer-grid { gap: 30px; padding-bottom: 40px; }
  .site-footer { padding: 60px 0 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* whatsapp */
  .wa-float { height: 54px; }
  .wa-float::before, .wa-float .wa-ico { width: 54px; height: 54px; }
  .wa-float .wa-ico { flex-basis: 54px; }
  .wa-float .wa-ico svg { width: 28px; height: 28px; }
}

@media (max-width: 380px) {
  .brand-sub { display: none; }              /* save space on very small screens */
  .display { font-size: clamp(2rem, 9.4vw, 2.6rem); }
}

/* =================================================================
   11 · MOBILE UX POLISH
   ================================================================= */
* { -webkit-tap-highlight-color: transparent; }
a, button, .btn, .cart-qty button, .nav-toggle, .cart-btn, .lang-toggle, label[for], summary {
  touch-action: manipulation;                 /* kill 300ms tap delay */
}
.cart-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* lock background scroll while cart / menu is open */
body.cart-open, body.menu-open { overflow: hidden; }

@media (max-width: 620px) {
  /* bigger, thumb-friendly touch targets */
  .cart-qty button { width: 32px; height: 32px; font-size: 1.05rem; }
  .cart-qty span { min-width: 20px; }
  .cart-remove { width: 34px; height: 34px; }
  .cart-close { width: 42px; height: 42px; }
  .cart-item { padding: 14px 12px; gap: 10px; }
  .product-link { padding: 6px 0; }            /* easier to tap */
  .map-link { padding: 8px 0; }
  .footer-col a, .footer-contact a { padding: 4px 0; display: inline-block; }
  /* tidy section rhythm */
  .sec-head { margin-bottom: 34px; }
  .gallery-grid { gap: 16px; }
  .leader-card { padding: 26px 22px 30px; }
  /* hero image sits a touch smaller and centered */
  .hero-visual { max-width: 320px; }
  .hero-frame { padding: 6px; }
}

/* =================================================================
   12 · PRELOADER (branded loading animation)
   ================================================================= */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(40rem 40rem at 12% 8%, rgba(189,149,66,.14), transparent 60%),
    radial-gradient(44rem 44rem at 90% 92%, rgba(44,43,112,.10), transparent 62%),
    var(--ivory);
  display: grid; place-items: center;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader-inner { display: flex; flex-direction: column; align-items: center; }
.preloader-logo {
  position: relative; width: 116px; height: 116px;
  display: grid; place-items: center;
  animation: pre-rise .7s var(--ease) both;
}
.preloader-logo img { width: 80px; height: 80px; object-fit: contain; animation: pre-pulse 1.7s ease-in-out infinite; }
.preloader-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(189,149,66,.18);
  border-top-color: var(--gold);
  border-right-color: var(--gold);
  animation: pre-spin 1s linear infinite;
}
.preloader-name {
  margin-top: 22px; font-family: var(--font);
  font-weight: 600; font-size: .8rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--forest);
  animation: pre-rise .7s var(--ease) .1s both;
}
.preloader-bar {
  width: 150px; height: 4px; border-radius: 4px;
  background: rgba(44,43,112,.12); margin-top: 16px; overflow: hidden;
  animation: pre-rise .7s var(--ease) .15s both;
}
.preloader-bar span {
  display: block; height: 100%; width: 40%; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--forest));
  animation: pre-load 1.15s ease-in-out infinite;
}
@keyframes pre-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes pre-spin  { to { transform: rotate(360deg); } }
@keyframes pre-load  { 0% { transform: translateX(-130%); } 100% { transform: translateX(340%); } }
@keyframes pre-rise  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .preloader-logo img, .preloader-ring, .preloader-bar span { animation: none !important; }
}

/* =================================================================
   13 · HERO — full-bleed rotating image background + overlaid text
   ================================================================= */
.hero { min-height: 88vh; display: flex; align-items: center; padding-top: 134px; padding-bottom: 64px; }
.hero-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.hero-media img.active { opacity: 1; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -2;
  /* lighter overlay so the cattle photo stays clearly visible;
     a touch darker top & bottom keeps the headline and stats legible */
  background: linear-gradient(180deg,
    rgba(16,14,40,.50) 0%, rgba(16,14,40,.30) 32%,
    rgba(16,14,40,.30) 62%, rgba(16,14,40,.56) 100%);
}
/* single-column copy, light text over the image */
.hero-inner { grid-template-columns: 1fr; }
.hero-copy { max-width: 680px; }
.hero h1, .hero .display { color: #fff; }
.hero .lead { color: rgba(255,255,255,.88); }
.hero .serif-accent {
  background: linear-gradient(100deg, #E8C766 0%, #F4DE9A 50%, #D8A93E 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-tag {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: none;
}
.hero-tag b { color: var(--gold-soft); }
.hero-meta { border-top-color: rgba(255,255,255,.2); }
.hero-meta .num { color: #fff; }
.hero-meta .lbl { color: rgba(255,255,255,.74); }
/* CTAs that pop on the dark hero */
.hero .btn-primary { background: #fff; color: var(--forest); border-color: #fff; }
.hero .btn-primary:hover { background: var(--ivory); transform: translateY(-2px); }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
.hero .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
@media (max-width: 860px) {
  .hero { min-height: 78vh; padding-top: 120px; }
  .hero-scrim {
    background: linear-gradient(180deg, rgba(22,21,55,.9) 0%, rgba(22,21,55,.72) 50%, rgba(22,21,55,.84) 100%);
  }
}

/* Home header sits over the dark hero image — keep logo + nav readable until scrolled */
.site-header.over-hero:not(.scrolled) .brand-mark {
  background: #fff !important;
  border-radius: 14px;
  padding: 5px;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.45);
}
.site-header.over-hero:not(.scrolled) .brand-name { color: #fff; }
.site-header.over-hero:not(.scrolled) .brand-sub { color: var(--gold-soft); }
.site-header.over-hero:not(.scrolled) .nav-links a { color: rgba(255,255,255,.82); }
.site-header.over-hero:not(.scrolled) .nav-links a:hover,
.site-header.over-hero:not(.scrolled) .nav-links a.active { color: #fff; }
.site-header.over-hero:not(.scrolled) .nav-links a.active::after { background: var(--gold-soft); }
.site-header.over-hero:not(.scrolled) .nav-phone { color: #fff; }

/* ============================================================
   Permanent SOLID header — white nav bar on all pages
   (no longer transparent at the top; dark text/logo throughout)
   ============================================================ */
.site-header {
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(44,43,112,.06), 0 10px 30px -26px rgba(44,43,112,.45);
}
.site-header.scrolled {
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), 0 10px 40px -24px rgba(44,43,112,.4);
}

/* ============================================================
   Hero content centered within the banner (headline, lead,
   eyebrow, CTAs and stats all centered)
   ============================================================ */
.hero-inner { justify-items: center; }
.hero-copy {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.hero-copy .hero-tag { margin-inline: auto; }
.hero-actions { justify-content: center; }
.hero-meta { justify-content: center; }

/* ============================================================
   Hero headline forced to TWO lines
   line 1: "The feed behind more milk"
   line 2: "& stronger cattle."
   ============================================================ */
.hero h1 .hl { display: block; }
@media (min-width: 861px){
  .hero-copy { max-width: 1100px; }
  .hero h1 { font-size: clamp(2.8rem, 4.4vw, 4.4rem); }
}

/* Hero CTA buttons slightly smaller */
.hero .hero-actions .btn { padding: 12px 26px; font-size: .9rem; }

/* Slightly more compact nav bar on desktop (load + scrolled) */
@media (min-width: 861px){
  .site-header { padding: 14px 0; }
  .site-header.scrolled { padding: 10px 0; }
  .site-header .brand-mark { width: 58px; height: 58px; }
}

/* Hero fills the viewport down to the trust ticker (no empty gap below) */
@media (min-width: 861px){
  .hero { min-height: calc(100vh - 58px); padding-top: 96px; padding-bottom: 40px; }
  .hero h1 { margin: 16px 0 20px; }
  .hero-actions { margin-top: 26px; }
  .hero-meta { margin-top: 34px; padding-top: 26px; }
}

/* Keep hero text legible now that the photo shows through more */
.hero h1, .hero .display { text-shadow: 0 2px 22px rgba(8,6,26,.55); }
.hero .lead { text-shadow: 0 1px 14px rgba(8,6,26,.6); }
.hero-meta .num, .hero-meta .lbl { text-shadow: 0 1px 12px rgba(8,6,26,.55); }

/* Hero lead paragraph — plain white */
.hero .lead {
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 14px rgba(8,6,26,.6);
}

/* Hero lead on one line (desktop): drop the 56ch readability cap */
@media (min-width: 861px){
  .hero .lead { max-width: none; white-space: nowrap; }
}

/* Move the hero stats down to the lower part of the banner (desktop) */
@media (min-width: 861px){
  .hero { position: relative; }
  .hero-meta {
    position: absolute;
    left: 0; right: 0; bottom: 52px;
    margin: 0 auto;
    width: min(760px, 86%);
    justify-content: center;
  }
}

/* Remove the divider line above the hero stats */
.hero-meta { border-top: none !important; }
@media (min-width: 861px){ .hero-meta { padding-top: 0; } }

/* Urdu (RTL): the taller text overlaps the bottom-pinned stats — keep the
   stats in normal flow (below the buttons) instead of absolute-positioned. */
@media (min-width: 861px){
  .lang-ur .hero-meta {
    position: static;
    width: auto;
    margin: 36px auto 0;
  }
}