/* ============================================================
   1. DESIGN TOKENS — derived from the official round badge logo
      (deep green field, harvest-gold lettering, cream cow)
============================================================ */
:root{
  /* Colour */
  --green-950:#0F241A;      /* deepest green — hero overlay, footer      */
  --green-900:#15301F;      /* dark surfaces                              */
  --green-800:#1C3A2A;      /* primary forest green (logo background)     */
  --green-700:#2A4F38;      /* hover / secondary green                    */
  --gold-500:#C2953C;       /* muted harvest gold (logo lettering)        */
  --gold-400:#D3AC5C;       /* gold hover                                 */
  --gold-200:#EAD6A4;       /* soft gold text on dark green               */
  --cream-50:#F8F4E9;       /* page background — warm cream               */
  --cream-100:#F1EAD8;      /* alternating section background             */
  --sand-300:#E2D8BE;       /* card borders, dividers                     */
  --brown-700:#6F5433;      /* natural brown accent                       */
  --ink-900:#211F1A;        /* near-black charcoal text                   */
  --ink-600:#59554A;        /* muted body text                            */
  --white:#FFFFFF;

  /* Type */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Archivo","Segoe UI",Arial,sans-serif;
  --fs-h1:clamp(2.35rem,5.4vw,4.15rem);
  --fs-h2:clamp(1.85rem,3.4vw,2.75rem);
  --fs-h3:clamp(1.2rem,1.8vw,1.45rem);
  --fs-body:clamp(0.98rem,1.05vw,1.06rem);

  /* Layout */
  --container:1200px;
  --gutter:clamp(1.1rem,4vw,2.5rem);
  --radius:14px;
  --radius-lg:22px;
  --shadow-soft:0 10px 30px rgba(21,48,31,.10);
  --shadow-lift:0 18px 44px rgba(21,48,31,.16);
  --header-h:78px;
  --ease:cubic-bezier(.33,1,.36,1);
}

/* ============================================================
   2. BASE / RESET
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 14px)}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink-900);
  background:var(--cream-50);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3{font-family:var(--font-display);line-height:1.14;color:var(--ink-900);font-weight:600}
strong{font-weight:600}

/* Accessible keyboard focus */
:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;border-radius:4px}

/* Skip link for screen-reader / keyboard users */
.skip-link{
  position:absolute;left:1rem;top:-100px;z-index:200;
  background:var(--green-800);color:var(--cream-50);
  padding:.7rem 1.2rem;border-radius:0 0 10px 10px;transition:top .25s var(--ease);
}
.skip-link:focus{top:0}

/* ============================================================
   3. SHARED COMPONENTS
============================================================ */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(4rem,8.5vw,6.75rem)}
.section--alt{background:var(--cream-100)}
.section--dark{background:var(--green-900);color:var(--cream-50)}
.section--dark h2,.section--dark h3{color:var(--cream-50)}

.section-head{max-width:640px;margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{margin-top:.9rem;color:var(--ink-600)}
.section--dark .section-head p{color:var(--gold-200)}

/* Section eyebrow — refined gold rule + tracked label.
   (The ear-tag shape lives on where it reads naturally: stock-card
   number tags, process step numbers, and the founder badge.) */
.eartag{
  display:inline-flex;align-items:center;gap:.65rem;
  font-size:.75rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-500);margin-bottom:1.1rem;
}
.eartag::before{
  content:"";width:28px;height:2px;border-radius:2px;
  background:currentColor;flex:none;
}
.hero-slide__content .eartag,
.section--dark .eartag,
.map-panel__info .eartag,
.team-feature .eartag,
.cta .eartag{color:var(--gold-400)}
.hero-slide__content .eartag{text-shadow:0 1px 10px rgba(15,36,26,.5)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:600;font-size:.95rem;letter-spacing:.02em;
  padding:.95rem 1.7rem;border-radius:10px;
  transition:transform .22s var(--ease),background .22s var(--ease),
             color .22s var(--ease),box-shadow .22s var(--ease);
}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--gold{background:var(--gold-500);color:var(--green-950);box-shadow:0 8px 22px rgba(194,149,60,.35)}
.btn--gold:hover{background:var(--gold-400)}
.btn--green{background:var(--green-800);color:var(--cream-50);box-shadow:0 8px 22px rgba(21,48,31,.28)}
.btn--green:hover{background:var(--green-700)}
.btn--outline-light{border:1.5px solid rgba(248,244,233,.65);color:var(--cream-50)}
.btn--outline-light:hover{background:rgba(248,244,233,.12);border-color:var(--cream-50)}
.btn--outline-dark{border:1.5px solid var(--green-800);color:var(--green-800)}
.btn--outline-dark:hover{background:var(--green-800);color:var(--cream-50)}

/* Scroll-reveal animation (JS adds .is-visible; see script) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   4. TOP INFORMATION BAR
============================================================ */
.topbar{background:var(--green-950);color:var(--gold-200);font-size:.82rem}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:42px;padding-block:.35rem;
}
.topbar__group{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem}
.topbar__item{display:inline-flex;align-items:center;gap:.45rem;color:var(--gold-200)}
.topbar__item svg{width:14px;height:14px;opacity:.85;flex:none}
.topbar__item:hover{color:var(--cream-50)}
.topbar__social{display:flex;align-items:center;gap:.35rem}
.topbar__social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;color:var(--gold-200);
  transition:background .2s,color .2s;
}
.topbar__social a:hover{background:rgba(194,149,60,.22);color:var(--cream-50)}
.topbar__social svg{width:15px;height:15px;display:block}

/* ============================================================
   5. STICKY HEADER + NAVIGATION
============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(248,244,233,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.site-header.is-scrolled{border-color:var(--sand-300);box-shadow:0 6px 24px rgba(21,48,31,.08)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--header-h)}

.brand{display:inline-flex;align-items:center;gap:.8rem;min-width:0}
.brand__logo{
  width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--gold-500);background:var(--green-800);
}
.brand__text{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:1.16rem;color:var(--green-900);white-space:nowrap}
.brand__tag{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brown-700);font-weight:600}

.nav-desktop{display:flex;align-items:center;gap:1.6rem}
.nav-desktop a{
  font-weight:500;font-size:.93rem;color:var(--ink-900);
  padding:.4rem 0;position:relative;
}
.nav-desktop a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--gold-500);transition:width .25s var(--ease);
}
.nav-desktop a:hover::after,.nav-desktop a[aria-current="page"]::after{width:100%}
.header-cta{display:flex;align-items:center;gap:.9rem}
.header-cta .btn{padding:.72rem 1.3rem;font-size:.88rem}

/* Hamburger (mobile) */
.nav-toggle{
  display:none;width:46px;height:46px;border-radius:10px;
  align-items:center;justify-content:center;
  border:1.5px solid var(--sand-300);background:var(--white);
}
.nav-toggle span{
  position:relative;display:block;width:20px;height:2px;background:var(--green-900);
  transition:background .2s;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--green-900);
  transition:transform .3s var(--ease),top .3s var(--ease);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* Mobile slide-in menu */
.nav-mobile{
  position:fixed;inset:0 0 0 auto;width:min(340px,88vw);z-index:120;
  background:var(--green-950);color:var(--cream-50);
  padding:1.4rem 1.6rem 2.2rem;display:flex;flex-direction:column;
  transform:translateX(105%);transition:transform .38s var(--ease);
  overflow-y:auto;
}
.nav-mobile.is-open{transform:none;box-shadow:-20px 0 60px rgba(0,0,0,.35)}
.nav-mobile__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem}
.nav-mobile__close{
  width:42px;height:42px;border-radius:10px;color:var(--gold-200);
  border:1.5px solid rgba(234,214,164,.35);font-size:1.5rem;line-height:1;
}
.nav-mobile__close:hover{background:rgba(234,214,164,.14)}
.nav-mobile nav{display:flex;flex-direction:column}
.nav-mobile nav a{
  padding:.95rem .2rem;font-size:1.06rem;font-weight:500;color:var(--cream-50);
  border-bottom:1px solid rgba(234,214,164,.16);
  display:flex;justify-content:space-between;align-items:center;
}
.nav-mobile nav a:hover{color:var(--gold-400)}
.nav-mobile .btn{margin-top:1.6rem;width:100%}
.nav-mobile__contact{margin-top:1.5rem;font-size:.9rem;color:var(--gold-200);display:grid;gap:.55rem}
.nav-mobile__contact a{display:inline-flex;gap:.5rem;align-items:center}
.nav-mobile__contact svg{width:15px;height:15px}
.nav-backdrop{
  position:fixed;inset:0;z-index:110;background:rgba(15,36,26,.55);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.nav-backdrop.is-open{opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}

/* ============================================================
   6. HERO — split: animated headline on deep green | the farm's own photo, untouched
   The photo gets NO dark overlay: it is never behind text. On load the text rises in
   word by word, the photo is uncovered by a gold curtain, the gold phrase rotates and
   a round farm badge spins on the seam. Everything is still for prefers-reduced-motion.
============================================================ */
.hero{
  position:relative;background:var(--green-950);color:var(--cream-50);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:min(calc(100vh - var(--header-h) - 40px),820px);
}
.hero::before,.hero::after{                                /* slow moving glow behind the text */
  content:"";position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(10px);
}
.hero::before{width:620px;height:620px;left:-180px;top:-220px;background:radial-gradient(circle,rgba(194,149,60,.20),transparent 62%)}
.hero::after{width:520px;height:520px;left:24%;bottom:-260px;background:radial-gradient(circle,rgba(42,79,56,.75),transparent 65%)}
.hero__panel{
  position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3rem,6vw,5.5rem) clamp(5.6rem,7vw,7rem) clamp(3rem,6vw,5.5rem) max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter)));   /* right: room for the badge on the seam */
  background-image:radial-gradient(rgba(234,214,164,.09) 1px,transparent 1.2px);background-size:22px 22px;
}
.hero__panel .eartag{color:var(--gold-400)}
.hero__inner{position:relative;container-type:inline-size;max-width:600px}
.hero__title{
  font-family:var(--font-display);font-weight:600;line-height:1.06;letter-spacing:-.02em;
  font-size:clamp(2.2rem,4.2vw,4.4rem);color:var(--cream-50);margin:.35rem 0 1.25rem;
}
@supports (font-size:1cqi){                                   /* the headline fills its column: never wider, never lost */
  .hero__title{font-size:clamp(1.9rem,8.2cqi,4.2rem)}
}
.hero__line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero__word{display:inline-block}
.hero__rotator{display:inline-grid;vertical-align:bottom;color:var(--gold-400);font-style:italic}
.hero__rotator > span{grid-area:1/1;white-space:nowrap}
.hero__rotator > span:not(:first-child){visibility:hidden}
.hero__title-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero__underline{display:block;height:4px;width:clamp(120px,14vw,190px);border-radius:4px;margin-top:.55rem;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-200),var(--gold-500));background-size:200% 100%}
.hero__lede{max-width:560px;font-size:clamp(.96rem,1.15vw,1.06rem);color:rgba(248,244,233,.86);margin-bottom:1rem}
.hero__lede--2{margin-bottom:1.9rem;color:rgba(234,214,164,.9)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem}
.hero__facts{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;margin-top:2.1rem;padding-top:1.4rem;border-top:1px solid rgba(234,214,164,.18);list-style:none}
.hero__facts li{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--gold-200)}
.hero__facts svg{width:17px;height:17px;flex:none;color:var(--gold-500)}
.hero__scroll{
  position:absolute;left:max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter)));bottom:1.3rem;
  display:flex;align-items:center;gap:.7rem;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(234,214,164,.7);
}
.hero__scroll i{position:relative;width:1px;height:34px;background:rgba(234,214,164,.25);overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--gold-400)}
.hero__media{position:relative;z-index:1;min-height:100%;clip-path:polygon(7% 0,100% 0,100% 100%,0 100%)}
.hero__media picture{position:absolute;inset:0;display:block}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:88% 60%}
.hero__curtain{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--gold-500);transform:scaleX(0);transform-origin:right}
.hero__tag{
  position:absolute;right:clamp(1rem,2.5vw,2rem);top:clamp(1rem,2.5vw,2rem);z-index:3;
  display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem;border-radius:99px;
  background:rgba(15,36,26,.72);color:var(--cream-50);font-size:.8rem;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(234,214,164,.3);
}
.hero__tag svg{width:15px;height:15px;color:var(--gold-400)}
.hero__badge{                                               /* round badge on the seam */
  position:absolute;z-index:4;left:50%;top:56%;width:132px;height:132px;margin:-66px 0 0 -66px;
  border-radius:50%;background:var(--green-950);border:1px solid rgba(234,214,164,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.35);display:grid;place-items:center;
}
.hero__badge svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
.hero__badge text{font:600 10.5px var(--font-body);letter-spacing:.32em;fill:var(--gold-200);text-transform:uppercase}
.hero__badge img{width:58px;height:58px;border-radius:50%;background:var(--cream-50);padding:3px}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__panel{padding:clamp(2.6rem,8vw,3.6rem) var(--gutter) 3.4rem}
  .hero__media{min-height:0;aspect-ratio:16/11;clip-path:polygon(0 7%,100% 0,100% 100%,0 100%)}
  .hero__badge{left:auto;right:var(--gutter);top:auto;bottom:calc(100% - 7vw);width:104px;height:104px;margin:0;transform:translateY(50%)}
  .hero__badge img{width:46px;height:46px}
  .hero__badge text{font-size:9.5px}
  .hero__scroll{display:none}
  .hero__tag{top:auto;right:auto;left:var(--gutter);bottom:1rem}
  .hero__media-wrap{position:relative}
}
@media (max-width:720px){
  .hero__actions .btn{flex:1 1 100%;justify-content:center}
  .hero__media{aspect-ratio:4/3}
  .hero__media img{object-position:80% 60%}
  .hero__tag{font-size:.74rem;padding:.45rem .8rem}
}

@media (prefers-reduced-motion: no-preference){
  .hero__word{transform:translateY(110%);animation:heroRise .95s var(--ease) forwards;animation-delay:calc(.15s + var(--w) * 90ms)}
  @keyframes heroRise{to{transform:none}}
  .hero__panel .eartag,.hero__lede,.hero__actions{opacity:0;transform:translateY(18px);animation:heroFade .8s var(--ease) forwards}
  .hero__panel .eartag{animation-delay:.05s}
  .hero__lede{animation-delay:.85s}
  .hero__actions{animation-delay:1s}
  .hero__facts{animation-delay:1.15s}
  @keyframes heroFade{to{opacity:1;transform:none}}
  .hero__underline{transform-origin:left;transform:scaleX(0);animation:heroLine .9s var(--ease) .75s forwards,heroShine 3.5s linear 1.7s infinite}
  @keyframes heroLine{to{transform:scaleX(1)}}
  @keyframes heroShine{to{background-position:-200% 0}}
  /* the photo: a gold curtain sweeps across and uncovers it, then it settles */
  .hero__curtain{animation:heroCurtain 1.25s cubic-bezier(.77,0,.18,1) .1s both}
  @keyframes heroCurtain{0%{transform:scaleX(0);transform-origin:right}45%{transform:scaleX(1);transform-origin:right}55%{transform:scaleX(1);transform-origin:left}100%{transform:scaleX(0);transform-origin:left}}
  .hero__media img{animation:heroSettle 1.8s var(--ease) .55s both}
  @keyframes heroSettle{from{transform:scale(1.14);opacity:0}to{transform:none;opacity:1}}
  .hero__tag{opacity:0;animation:heroFade .7s var(--ease) 1.5s forwards;transform:translateY(12px)}
  .hero__badge{animation:heroPop .8s cubic-bezier(.34,1.56,.64,1) 1.2s both}
  @keyframes heroPop{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
  .hero__badge svg{animation:heroSpin 22s linear infinite}
  @keyframes heroSpin{to{transform:rotate(360deg)}}
  .hero::before{animation:heroGlow 14s ease-in-out infinite alternate}
  .hero::after{animation:heroGlow 18s ease-in-out infinite alternate-reverse}
  @keyframes heroGlow{to{translate:90px 60px}}
  .hero__scroll i::after{animation:heroDrop 1.8s ease-in-out infinite}
  @keyframes heroDrop{to{top:110%}}
  /* the rotating gold phrase (JS adds .is-on to the one showing) */
  .hero__rotator.is-live > span{visibility:visible;opacity:0;transform:translateY(70%) rotateX(-70deg);transform-origin:50% 100%;transition:opacity .55s var(--ease),transform .7s var(--ease)}
  .hero__rotator.is-live > span.is-on{opacity:1;transform:none}
  .hero__rotator.is-live > span.is-out{opacity:0;transform:translateY(-60%) rotateX(70deg)}
}
/* ============================================================
   7. SHARED SECTION LANGUAGE (matches the hero)
   dark sections = deep green + gold dot texture + slow glow;
   headings carry one italic gold word (<em>).
============================================================ */
h2{font-size:var(--fs-h2);letter-spacing:-.015em}
h2 em{font-style:italic;font-weight:600;color:var(--gold-500)}
.dark{position:relative;background:var(--green-950);color:var(--cream-50);overflow:hidden;isolation:isolate}
.dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(234,214,164,.09) 1px,transparent 1.2px);background-size:22px 22px}
.dark::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:560px;height:560px;right:-180px;top:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(194,149,60,.17),transparent 62%)}
.dark h2,.dark h3{color:var(--cream-50)}
.dark h2 em{color:var(--gold-400)}
.dark .eartag{color:var(--gold-400)}
.dark .section-head p{color:rgba(248,244,233,.78)}
.section-head--split{max-width:none;display:grid;grid-template-columns:1.1fr .9fr;gap:1rem clamp(2rem,6vw,5rem);align-items:end}
.section-head--split p{margin:0;padding-bottom:.4rem}

/* ============================================================
   8. TRUST — floating ribbon that overlaps the bottom of the hero
============================================================ */
.trust{position:relative;z-index:5;margin-top:-3.1rem}
.trust__grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--cream-50);border:1px solid var(--sand-300);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 26px 60px rgba(15,36,26,.24);
}
.trust__card{position:relative;padding:1.5rem 1.35rem 1.6rem;display:flex;flex-direction:column;gap:.75rem;border-left:1px solid var(--sand-300);transition:background .3s var(--ease)}
.trust__card:first-child{border-left:0}
.trust__card:hover{background:var(--white)}
.trust__card::after{content:"";position:absolute;left:1.35rem;right:1.35rem;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--gold-500);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.trust__card:hover::after{transform:scaleX(1)}
.trust__ico{width:46px;height:46px;border-radius:50%;background:var(--green-900);color:var(--gold-400);display:grid;place-items:center;box-shadow:0 0 0 4px rgba(194,149,60,.16)}
.trust__ico svg{width:21px;height:21px}
.trust__card h3{font-family:var(--font-body);font-weight:700;font-size:.95rem;line-height:1.3;color:var(--green-900)}
.trust__card p{font-size:.82rem;color:var(--ink-600);line-height:1.55}

/* ============================================================
   9. ABOUT — arched photo with a gold offset frame + large lead
============================================================ */
.about{padding-top:clamp(4.5rem,9vw,7rem)}
.about__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.about__media{position:relative;padding:0 0 2.2rem 2.2rem}
.about__media::before{content:"";position:absolute;left:0;bottom:0;width:74%;height:80%;border-radius:var(--radius-lg);border:2px solid var(--gold-500)}
.about__media img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-lift)}
.about__badge{
  position:absolute;right:-1.1rem;bottom:.3rem;max-width:250px;
  background:var(--green-900);color:var(--cream-50);border-radius:var(--radius);
  padding:1rem 1.25rem;box-shadow:var(--shadow-lift);border-left:4px solid var(--gold-500);
}
.about__badge strong{display:block;font-family:var(--font-display);font-size:1.05rem;color:var(--gold-200);margin-bottom:.15rem}
.about__badge span{font-size:.8rem;color:rgba(248,244,233,.85)}
.about__copy h2{margin-bottom:1.3rem}
.about__lead{font-family:var(--font-display);font-size:clamp(1.12rem,1.7vw,1.32rem);line-height:1.55;color:var(--green-900);margin-bottom:1.1rem;
  padding-left:1.1rem;border-left:3px solid var(--gold-500)}
.about__copy p{color:var(--ink-600);margin-bottom:1rem}
.about__points{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.5rem 0 2rem}
.about__points li{
  display:flex;gap:.7rem;align-items:center;font-size:.9rem;font-weight:600;color:var(--green-900);
  background:var(--white);border:1px solid var(--sand-300);border-radius:12px;padding:.8rem .9rem;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.about__points li:hover{border-color:var(--gold-500);transform:translateY(-2px)}
.about__points svg{width:30px;height:30px;padding:7px;border-radius:50%;background:var(--green-900);color:var(--gold-400);flex:none}

/* ============================================================
   10. TEAM — founder card with a photo that breaks out of it,
   then the four sons as arched portraits
============================================================ */
.founder{
  position:relative;display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  background:linear-gradient(150deg,var(--green-900),var(--green-950));color:var(--cream-50);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lift);
  margin:clamp(3.5rem,6vw,5rem) 0 clamp(3rem,5vw,4rem);padding:clamp(1.8rem,4vw,3rem) clamp(1.6rem,4vw,3.4rem) clamp(1.8rem,4vw,3rem) 0;
}
.founder::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:radial-gradient(rgba(234,214,164,.09) 1px,transparent 1.2px);background-size:22px 22px}
.founder__media{position:relative;margin:calc(clamp(3.5rem,6vw,5rem) * -.55) 0 calc(clamp(1.8rem,4vw,3rem) * -1) clamp(1.4rem,3vw,2.6rem);align-self:stretch}
.founder__media img{width:100%;height:100%;min-height:380px;object-fit:cover;object-position:center 18%;border-radius:999px 999px var(--radius-lg) var(--radius-lg);border:4px solid var(--gold-500);box-shadow:0 26px 60px rgba(0,0,0,.4)}
.founder__body{position:relative;display:flex;flex-direction:column;gap:1rem}
.founder__body .eartag{color:var(--gold-400);margin-bottom:0}
.founder__body h3{font-size:clamp(1.9rem,3.2vw,2.7rem);color:var(--cream-50);line-height:1.05}
.founder__story{font-family:var(--font-display);font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.65;color:rgba(248,244,233,.9);max-width:560px}
.founder__values{display:flex;flex-wrap:wrap;gap:.55rem}
.founder__values li{display:inline-flex;align-items:center;gap:.45rem;background:rgba(194,149,60,.14);border:1px solid rgba(194,149,60,.42);color:var(--gold-200);font-size:.78rem;font-weight:600;padding:.42rem .8rem;border-radius:999px}
.founder__values svg{width:14px;height:14px;color:var(--gold-400)}
.founder__cta{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:.3rem}
.founder__cta > span{font-size:.8rem;color:rgba(248,244,233,.65)}
.crew{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.crew-card{text-align:center;transition:transform .35s var(--ease)}
.crew-card:hover{transform:translateY(-6px)}
.crew-card__photo{position:relative;aspect-ratio:3/3.7;border-radius:999px 999px var(--radius) var(--radius);overflow:hidden;border:3px solid var(--white);box-shadow:var(--shadow-soft);outline:1px solid var(--sand-300);background:var(--green-800)}
.crew-card__photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.crew-card:hover .crew-card__photo img{transform:scale(1.07)}
.crew-card__num{position:absolute;left:50%;bottom:.7rem;transform:translateX(-50%);z-index:2;background:var(--gold-500);color:var(--green-950);font-size:.62rem;font-weight:700;letter-spacing:.14em;padding:.3rem .6rem;border-radius:6px 6px 9px 9px;box-shadow:0 3px 10px rgba(15,36,26,.3)}
.crew-card h3{font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:var(--green-900);margin-top:1rem}
.crew-card small{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brown-700);font-weight:700;margin:.25rem 0 .55rem}
.crew-card p{font-size:.85rem;color:var(--ink-600);line-height:1.55;max-width:250px;margin-inline:auto}

/* ============================================================
   11. LIVESTOCK — dark bento of full-photo cards
============================================================ */
.lv{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(270px,310px));gap:1.1rem}
.lv-card{
  position:relative;display:flex;align-items:flex-end;min-height:270px;isolation:isolate;overflow:hidden;
  border-radius:var(--radius-lg);border:1px solid rgba(234,214,164,.18);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.lv-card:nth-child(1){grid-row:1/3}
.lv-card:nth-child(2){grid-column:2/4}
.lv-card:hover{transform:translateY(-5px);border-color:var(--gold-500);box-shadow:0 26px 50px rgba(0,0,0,.4)}
.lv-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s var(--ease)}
.lv-card:hover img{transform:scale(1.07)}
.lv-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,36,26,0) 32%,rgba(15,36,26,.94))}
.lv-card__body{padding:1.5rem;width:100%}
.lv-card__no{display:inline-block;background:var(--gold-500);color:var(--green-950);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.32rem .58rem;border-radius:6px 6px 9px 9px;margin-bottom:.7rem}
.lv-card h3{font-size:clamp(1.3rem,2vw,1.75rem);color:var(--cream-50);margin-bottom:.35rem}
.lv-card p{font-size:.9rem;color:rgba(248,244,233,.82);max-width:420px}
.lv-card__go{position:absolute;top:1rem;right:1rem;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(15,36,26,.55);border:1px solid rgba(234,214,164,.4);color:var(--gold-200);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.lv-card__go svg{width:18px;height:18px;transform:rotate(-45deg);transition:transform .3s var(--ease)}
.lv-card:hover .lv-card__go{background:var(--gold-500);color:var(--green-950)}
.lv-card:hover .lv-card__go svg{transform:rotate(0)}
.lv-note{margin-top:1.6rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.4rem;border:1px dashed rgba(234,214,164,.35);border-radius:var(--radius);color:var(--gold-200);font-size:.92rem}

/* ============================================================
   12. PROCESS — sticky intro + a vertical timeline
============================================================ */
.process__inner{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.process__aside{position:sticky;top:calc(var(--header-h) + 2rem)}
.process__aside p{margin:1rem 0 1.8rem;color:var(--ink-600)}
.tl{position:relative}
.tl::before{content:"";position:absolute;left:27px;top:14px;bottom:26px;width:2px;background:linear-gradient(var(--gold-500),var(--sand-300))}
.tl__item{position:relative;display:grid;grid-template-columns:56px 1fr;gap:1.2rem;padding-bottom:1.3rem}
.tl__num{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--green-900);color:var(--gold-400);font:600 1.08rem var(--font-display);border:4px solid var(--cream-50);box-shadow:0 0 0 1px var(--gold-500);transition:background .3s var(--ease),color .3s var(--ease)}
.tl__item:hover .tl__num{background:var(--gold-500);color:var(--green-950)}
.tl__body{background:var(--white);border:1px solid var(--sand-300);border-radius:var(--radius);padding:1.1rem 1.35rem;box-shadow:0 6px 18px rgba(21,48,31,.05);transition:transform .3s var(--ease),border-color .3s var(--ease)}
.tl__item:hover .tl__body{transform:translateX(6px);border-color:var(--gold-500)}
.tl__body h3{font-family:var(--font-body);font-weight:700;font-size:1.02rem;color:var(--green-900);margin-bottom:.25rem}
.tl__body p{font-size:.9rem;color:var(--ink-600)}

/* ============================================================
   13. WHY CHOOSE — mirrored hero: slanted photo | dark panel
============================================================ */
.why{display:grid;grid-template-columns:.9fr 1.1fr;padding:0}
.why__media{position:relative;min-height:100%;clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}
.why__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.why__media .hero__tag{right:auto;left:clamp(1rem,2.5vw,2rem)}
.why__panel{padding:clamp(3.5rem,7vw,6rem) max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter))) clamp(3.5rem,7vw,6rem) clamp(1.5rem,3vw,3rem)}
.why__list{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:2rem}
.why__list li{
  display:flex;flex-direction:column;gap:.35rem;
  background:rgba(248,244,233,.06);border:1px solid rgba(234,214,164,.18);
  padding:1.05rem 1.15rem;border-radius:14px;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.why__list li:hover{background:rgba(248,244,233,.11);border-color:rgba(234,214,164,.45);transform:translateY(-3px)}
.why__n{font:600 .74rem/1 var(--font-body);letter-spacing:.18em;color:var(--gold-400)}
.why__list strong{color:var(--cream-50);font-size:.95rem;line-height:1.35}
.why__list span{font-size:.83rem;color:rgba(248,244,233,.72);line-height:1.5}
/* ============================================================
   12. FARM GALLERY — the farm's own photos
   Bento grid (desktop) / swipe carousel (phone). Motion: tiles wipe
   in one after another, photos drift slowly, cards tilt toward the
   cursor with a soft light, and a full-screen viewer opens from the
   tile itself. Everything calms down for prefers-reduced-motion.
============================================================ */
.fg__grid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(170px,17vw,232px);
}
.fg__item:nth-child(1){grid-column:1/3;grid-row:1/3}
.fg__item:nth-child(4){grid-column:3/5}
.fg__item:nth-child(5){grid-column:1/3}
.fg__item:nth-child(6){grid-column:3/5}
.fg__item{position:relative;margin:0;min-width:0}
.fg__card{
  position:relative;height:100%;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(135deg,var(--green-800),var(--green-700));
  box-shadow:var(--shadow-soft);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  isolation:isolate;
}
.fg__btn{
  all:unset;position:absolute;inset:0;cursor:zoom-in;display:block;
  border-radius:inherit;
}
.fg__btn:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px}
.fg__pic{position:absolute;inset:-6% 0;display:block;transform:translate3d(0,var(--py,0px),0) scale(1.08)}
.fg__pic img{width:100%;height:100%;object-fit:cover;display:block}
/* light that follows the cursor + a gold sheen on hover */
.fg__card::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,240,205,.22),transparent 55%);
  transition:opacity .4s var(--ease);
}
.fg__card::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(15,36,26,.18) 62%,rgba(15,36,26,.82));
}
.fg__shine{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(234,214,164,.35) 50%,transparent 65%);
  transform:translateX(-120%);
}
.fg__cap{
  position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;z-index:4;pointer-events:none;
  color:var(--cream-50);display:grid;gap:.1rem;
}
.fg__no{
  font:600 .72rem/1 var(--font-body);letter-spacing:.18em;color:var(--gold-400);
  display:flex;align-items:center;gap:.5rem;
}
.fg__no::after{content:"";height:1px;width:26px;background:currentColor;transition:width .5s var(--ease)}
.fg__cap b{font:600 clamp(1.02rem,1.45vw,1.3rem)/1.2 var(--font-display);text-shadow:0 2px 12px rgba(15,36,26,.45)}
.fg__cap small{
  font-size:.84rem;color:rgba(248,244,233,.82);
  max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity .45s var(--ease);
}
.fg__item:nth-child(1) .fg__cap b{font-size:clamp(1.3rem,2.3vw,1.85rem)}
.fg__item:hover .fg__card,.fg__item:focus-within .fg__card{box-shadow:var(--shadow-lift)}
.fg__item:hover .fg__card::before{opacity:1}
.fg__item:hover .fg__cap small,.fg__item:focus-within .fg__cap small,.fg__item:nth-child(1) .fg__cap small{max-height:3em;opacity:1}
.fg__item:hover .fg__no::after{width:44px}
.fg__zoom{
  position:absolute;top:.9rem;right:.9rem;z-index:4;pointer-events:none;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(248,244,233,.16);border:1px solid rgba(248,244,233,.35);color:var(--cream-50);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:scale(.7);transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.fg__zoom svg{width:18px;height:18px}
.fg__item:hover .fg__zoom,.fg__item:focus-within .fg__zoom{opacity:1;transform:none}

/* running line under the photos */
.fg__ticker{
  margin-top:1.6rem;overflow:hidden;border-block:1px solid var(--sand-300);padding-block:.7rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.fg__ticker-track{display:flex;width:max-content;gap:1.6rem;align-items:center;white-space:nowrap}
.fg__ticker-track span{font:600 .95rem/1 var(--font-display);color:var(--green-800);letter-spacing:.02em}
.fg__ticker-track i{font-style:normal;color:var(--gold-500)}
.fg__bar{display:none}
.gallery__more{text-align:center;margin-top:2rem}

/* tablet: two columns, the first photo stays large */
@media (max-width:1000px){
  .fg__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(180px,30vw,260px)}
  .fg__item:nth-child(n){grid-column:auto;grid-row:auto}
  .fg__item:nth-child(1),.fg__item:nth-child(4){grid-column:1/-1}
  .fg__item:nth-child(1){grid-row:span 2}
}
/* phone: a swipe carousel that peeks at the next photo */
@media (max-width:720px){
  .fg__grid{
    display:flex;gap:.8rem;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    margin-inline:calc(var(--gutter) * -1);padding:.4rem var(--gutter) 1rem;
    scrollbar-width:none;
  }
  .fg__grid::-webkit-scrollbar{display:none}
  .fg__item:nth-child(n){flex:0 0 84%;height:auto;aspect-ratio:4/4.6;scroll-snap-align:start;grid-column:auto;grid-row:auto}
  .fg__card{transition:transform .45s var(--ease),box-shadow .45s var(--ease),filter .45s var(--ease)}
  .fg__item:not(.is-current) .fg__card{transform:scale(.94);filter:saturate(.8) brightness(.92)}
  .fg__cap small{max-height:3em;opacity:1}
  .fg__zoom{opacity:1;transform:none;width:34px;height:34px}
  .fg__bar{display:block;height:3px;border-radius:3px;background:var(--sand-300);overflow:hidden;margin-top:.2rem}
  .fg__bar span{display:block;height:100%;width:var(--p,16.66%);background:linear-gradient(90deg,var(--gold-500),var(--green-700));border-radius:inherit;transition:width .2s linear}
}

/* full-screen viewer */
.fg-lb{position:fixed;inset:0;z-index:1200;display:grid;grid-template-rows:auto 1fr auto;color:var(--cream-50)}
.fg-lb[hidden]{display:none}
.fg-lb__bg{position:absolute;inset:0;background:rgba(12,28,20,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .35s var(--ease)}
.fg-lb.is-open .fg-lb__bg{opacity:1}
.fg-lb__top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem clamp(.9rem,3vw,1.6rem)}
.fg-lb__count{font:600 .8rem/1 var(--font-body);letter-spacing:.2em;color:var(--gold-200)}
.fg-lb__tools{display:flex;gap:.5rem}
.fg-lb__btn{
  all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(248,244,233,.1);border:1px solid rgba(248,244,233,.25);color:var(--cream-50);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.fg-lb__btn:hover{background:rgba(194,149,60,.35)}
.fg-lb__btn:focus-visible{outline:3px solid var(--gold-400);outline-offset:2px}
.fg-lb__btn svg{width:20px;height:20px}
.fg-lb__stage{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;padding:0 clamp(.5rem,6vw,5.5rem);touch-action:pan-y}
.fg-lb__img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.45);user-select:none;-webkit-user-drag:none;
}
.fg-lb__nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%)}
.fg-lb__nav--prev{left:clamp(.4rem,1.6vw,1.4rem)}
.fg-lb__nav--next{right:clamp(.4rem,1.6vw,1.4rem)}
.fg-lb__foot{position:relative;z-index:2;padding:.9rem clamp(.9rem,3vw,1.6rem) 1.1rem;display:grid;gap:.8rem;justify-items:center;text-align:center}
.fg-lb__cap b{display:block;font:600 clamp(1.1rem,2.2vw,1.45rem)/1.25 var(--font-display)}
.fg-lb__cap small{color:rgba(248,244,233,.75);font-size:.9rem}
.fg-lb__thumbs{display:flex;gap:.5rem;max-width:100%;overflow-x:auto;padding:.2rem;scrollbar-width:none}
.fg-lb__thumbs::-webkit-scrollbar{display:none}
.fg-lb__thumb{
  all:unset;cursor:pointer;flex:0 0 auto;width:66px;height:48px;border-radius:8px;overflow:hidden;
  opacity:.45;outline:2px solid transparent;outline-offset:2px;transition:opacity .25s var(--ease),outline-color .25s var(--ease);
}
.fg-lb__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fg-lb__thumb:hover{opacity:.8}
.fg-lb__thumb[aria-current="true"]{opacity:1;outline-color:var(--gold-500)}
.fg-lb__thumb:focus-visible{outline-color:var(--gold-200)}
.fg-lb__progress{position:absolute;left:0;right:0;top:0;height:3px;z-index:3;background:transparent}
.fg-lb__progress span{display:block;height:100%;width:0;background:var(--gold-500)}
@media (max-width:720px){
  .fg-lb__nav{display:none}
  .fg-lb__thumb{width:54px;height:40px}
}

@media (prefers-reduced-motion: no-preference){
  /* tiles wipe in one after another (JS adds .is-in when the grid comes into view) */
  .fg--js .fg__card{clip-path:inset(100% 0 0 0 round var(--radius-lg));transition:clip-path 1s var(--ease) calc(var(--i) * 110ms),transform .5s var(--ease),box-shadow .5s var(--ease)}
  .fg--js .fg__pic{transform:translate3d(0,var(--py,0px),0) scale(1.32);transition:transform 1.4s var(--ease) calc(var(--i) * 110ms)}
  .fg--js .fg__cap{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease) calc(var(--i) * 110ms + .45s),transform .7s var(--ease) calc(var(--i) * 110ms + .45s)}
  .fg--js.is-in .fg__card{clip-path:inset(0 0 0 0 round var(--radius-lg))}
  .fg--js.is-in .fg__pic{transform:translate3d(0,var(--py,0px),0) scale(1.08)}
  .fg--js.is-in .fg__cap{opacity:1;transform:none}
  .fg--js.is-settled .fg__pic{transition:transform .12s linear}
  /* slow drift on every photo; it pauses while you look at one */
  .fg__pic img{animation:fgDrift 16s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -2.7s)}
  .fg__item:hover .fg__pic img{animation-play-state:paused}
  @keyframes fgDrift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.07) translate(-1.5%,-1%)}}
  .fg__item:hover .fg__shine{transform:translateX(120%);transition:transform 1s var(--ease)}
  .fg__ticker-track{animation:fgTicker 38s linear infinite}
  .fg__ticker:hover .fg__ticker-track{animation-play-state:paused}
  @keyframes fgTicker{to{transform:translateX(-50%)}}
  .fg-lb__img.is-swap{animation:fgIn .45s var(--ease) both}
  .fg-lb__img.is-swap-back{animation:fgInBack .45s var(--ease) both}
  @keyframes fgIn{from{opacity:0;transform:translateX(46px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes fgInBack{from{opacity:0;transform:translateX(-46px) scale(.97)}to{opacity:1;transform:none}}
}

/* ============================================================
   15. SOCIAL — link rows + photo mosaic
============================================================ */
.social__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.social__list{margin-top:1.8rem;border-top:1px solid var(--sand-300)}
.social-row{display:flex;align-items:center;gap:1rem;padding:1.05rem .3rem;border-bottom:1px solid var(--sand-300);transition:padding .3s var(--ease),background .3s var(--ease)}
.social-row:hover{padding-inline:1rem;background:var(--white)}
.social-row__icon{width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff}
.social-row__icon svg{width:22px;height:22px}
.social-row--yt .social-row__icon{background:#E52D27}
.social-row--ig .social-row__icon{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.social-row--tt .social-row__icon{background:#161616}
.social-row--li .social-row__icon{background:#0A66C2}
.social-row__text strong{display:block;font-size:1rem;color:var(--green-900)}
.social-row__text span{font-size:.84rem;color:var(--ink-600)}
.social-row__arrow{margin-left:auto;width:18px;height:18px;color:var(--gold-500);transition:transform .3s var(--ease)}
.social-row:hover .social-row__arrow{transform:translateX(5px)}
.mosaic{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1rem;height:clamp(420px,46vw,560px)}
.mosaic figure{position:relative;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}
.mosaic figure:nth-child(1){grid-row:1/3;border-radius:999px 999px var(--radius-lg) var(--radius-lg)}
.mosaic figure:nth-child(3){border-radius:var(--radius-lg) var(--radius-lg) 110px var(--radius-lg)}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mosaic figure:hover img{transform:scale(1.06)}
.mosaic__badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:98px;height:98px;border-radius:50%;display:grid;place-items:center;background:var(--green-950);border:4px solid var(--cream-50);box-shadow:0 14px 34px rgba(15,36,26,.35);color:var(--gold-400)}
.mosaic__badge svg{width:34px;height:34px}

/* ============================================================
   16. CONTACT — map beside a stack of direct channels
============================================================ */
.contact{display:grid;grid-template-columns:1.3fr 1fr;gap:1.3rem;align-items:stretch}
.map-card{position:relative;min-height:560px;border-radius:var(--radius-lg);overflow:hidden;border:6px solid var(--white);box-shadow:var(--shadow-lift);background:var(--green-900)}
.map-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.contact__side{display:flex;flex-direction:column;gap:1rem}
.channel-card{
  position:relative;display:flex;align-items:center;gap:.95rem;
  background:var(--white);border:1px solid var(--sand-300);border-radius:var(--radius-lg);padding:1.1rem 1.2rem;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.channel-card:hover{transform:translateX(5px);box-shadow:var(--shadow-soft);border-color:var(--gold-500)}
.channel-card__icon{width:48px;height:48px;border-radius:50%;flex:none;background:var(--green-900);color:var(--gold-400);display:flex;align-items:center;justify-content:center;transition:background .28s var(--ease),color .28s var(--ease)}
.channel-card:hover .channel-card__icon{background:var(--gold-500);color:var(--green-950)}
.channel-card__icon svg{width:21px;height:21px;display:block}
.channel-card__text strong{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brown-700);margin-bottom:.15rem}
.channel-card__text span{font-size:.98rem;font-weight:600;color:var(--green-900);word-break:break-word}
.channel-card__arrow{margin-left:auto;width:16px;height:16px;flex:none;color:var(--gold-500)}
.channel-card--primary{background:linear-gradient(150deg,var(--green-800),var(--green-950));border-color:var(--green-800)}
.channel-card--primary .channel-card__text strong{color:var(--gold-400)}
.channel-card--primary .channel-card__text span{color:var(--cream-50)}
.channel-card--primary .channel-card__icon{background:var(--gold-500);color:var(--green-950)}
.channel-card__badge{position:absolute;top:-10px;right:1rem;background:var(--gold-500);color:var(--green-950);font-size:.58rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:.3rem .55rem;border-radius:6px 6px 9px 9px;box-shadow:0 3px 10px rgba(15,36,26,.3)}
.visit{position:relative;flex:1;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:1rem;padding:clamp(1.5rem,3vw,2rem);border-radius:var(--radius-lg);background:var(--green-950);color:var(--cream-50)}
.visit::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(234,214,164,.09) 1px,transparent 1.2px);background-size:22px 22px}
.visit .eartag{color:var(--gold-400);margin-bottom:0}
.visit h3{font-size:1.45rem;color:var(--cream-50)}
.visit ul{display:grid;gap:.8rem}
.visit li{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:rgba(248,244,233,.88);line-height:1.55}
.visit li svg{width:17px;height:17px;flex:none;color:var(--gold-400);margin-top:.15rem}
.visit .btn{align-self:flex-start}
.visit__social{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;margin-top:auto;padding-top:1rem;border-top:1px solid rgba(234,214,164,.2)}
.visit__social > span{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-400);font-weight:700;margin-right:.35rem}
.visit__social a{width:36px;height:36px;border:1px solid rgba(234,214,164,.4);border-radius:50%;color:var(--gold-200);display:inline-flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s,color .25s}
.visit__social a:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--green-950)}
.visit__social svg{width:16px;height:16px;display:block}

/* ============================================================
   17. FINAL CALL-TO-ACTION — photo band, left-aligned
============================================================ */
.cta{position:relative;color:var(--cream-50);overflow:hidden;background:var(--green-950);isolation:isolate}
.cta__media{position:absolute;inset:0;z-index:-1}
.cta__media img{width:100%;height:100%;object-fit:cover}
.cta__media::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(15,36,26,.96) 30%,rgba(15,36,26,.6) 70%,rgba(15,36,26,.35))}
.cta__inner{display:grid;grid-template-columns:1fr auto;gap:2rem 3rem;align-items:center}
.cta h2{color:var(--cream-50);margin-bottom:1rem;font-size:clamp(2rem,4.2vw,3.4rem);max-width:640px}
.cta h2 em{color:var(--gold-400)}
.cta p{color:rgba(248,244,233,.86);max-width:520px}
.cta__actions{display:flex;flex-direction:column;gap:.9rem;min-width:250px}
/* ============================================================
   18. FOOTER
============================================================ */
.footer{background:var(--green-950);color:rgba(248,244,233,.82);font-size:.92rem}
.footer__main{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:2.6rem;padding-block:clamp(3rem,6vw,4.5rem) 2.6rem;
}
.footer__brand .brand__name{color:var(--cream-50)}
.footer__brand .brand__tag{color:var(--gold-400)}
.footer__brand p{margin:1.1rem 0 1.4rem;font-size:.88rem;line-height:1.7;color:rgba(248,244,233,.72)}
.footer__social{display:flex;gap:.55rem}
.footer__social a{
  width:38px;height:38px;border-radius:10px;
  border:1px solid rgba(234,214,164,.45);color:var(--gold-200);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .25s,border-color .25s,color .25s;
}
.footer__social a:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--green-950)}
.footer__social svg{width:18px;height:18px;display:block}
.footer h3{
  font-family:var(--font-body);font-size:.8rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400);margin-bottom:1.15rem;
}
.footer__links{display:grid;gap:.6rem}
.footer__links a{color:rgba(248,244,233,.82);transition:color .2s;display:inline-flex;gap:.45rem;align-items:center}
.footer__links a:hover{color:var(--gold-400)}
.footer__contact{display:grid;gap:.85rem}
.footer__contact li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.55}
.footer__contact svg{width:16px;height:16px;color:var(--gold-400);flex:none;margin-top:.25rem}
.footer__contact a:hover{color:var(--gold-400)}
.footer .btn{margin-top:1.3rem}
.footer__bottom{
  border-top:1px solid rgba(234,214,164,.18);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem;
  padding-block:1.4rem;font-size:.8rem;color:rgba(248,244,233,.55);
}
.footer__legal{display:flex;gap:1.4rem}
.footer__legal a:hover{color:var(--gold-400)}
.footer__tagline{margin:.9rem 0 0!important;font-size:.72rem!important;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400)!important;font-weight:700}
.footer__credit{flex-basis:100%;font-size:.72rem;color:rgba(248,244,233,.4)}

/* ============================================================
   18a. FLOATING QUICK-CONTACT WIDGET
============================================================ */
.chat-widget{
  position:fixed;right:clamp(.9rem,2.2vw,1.4rem);bottom:clamp(.9rem,2.2vw,1.4rem);
  z-index:999;display:flex;flex-direction:column;align-items:flex-end;gap:.85rem;
}
.chat-fab{
  position:relative;width:58px;height:58px;border-radius:50%;
  background:var(--gold-500);color:var(--green-950);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(15,36,26,.35);
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.chat-fab:hover{transform:scale(1.07)}
.chat-fab__icon{width:26px;height:26px;transition:opacity .25s var(--ease),transform .3s var(--ease)}
.chat-fab__x{
  position:absolute;font-size:1.8rem;line-height:1;font-weight:500;
  opacity:0;transform:rotate(-90deg) scale(.4);
  transition:opacity .25s var(--ease),transform .3s var(--ease);
}
.chat-widget.is-open .chat-fab__icon{opacity:0;transform:rotate(90deg) scale(.4)}
.chat-widget.is-open .chat-fab__x{opacity:1;transform:none}
.chat-fab__badge{
  position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 4px;
  border-radius:999px;background:#C0392B;color:#fff;
  font-size:.66rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--cream-50);
}
.chat-panel{
  width:min(340px,calc(100vw - 2rem));
  background:var(--cream-100);border:1px solid var(--sand-300);border-radius:18px;
  overflow:hidden;box-shadow:0 26px 64px rgba(15,36,26,.38);
  transform-origin:100% 100%;
}
.chat-panel__head{
  display:flex;align-items:center;gap:.75rem;
  background:linear-gradient(150deg,var(--green-800),var(--green-950));
  padding:.9rem 1rem;
}
.chat-panel__head img{width:40px;height:40px;border-radius:50%;border:2px solid var(--gold-500);background:var(--green-950)}
.chat-panel__id strong{display:block;color:var(--cream-50);font-size:.9rem}
.chat-panel__id span{display:flex;align-items:center;gap:.4rem;color:var(--gold-200);font-size:.72rem;margin-top:.15rem}
.chat-dot{width:8px;height:8px;border-radius:50%;background:#3AC06B;box-shadow:0 0 0 3px rgba(58,192,107,.22)}
.chat-panel__close{
  margin-left:auto;width:30px;height:30px;border-radius:8px;
  color:rgba(248,244,233,.85);font-size:1.35rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease);
}
.chat-panel__close:hover{background:rgba(248,244,233,.14)}
.chat-panel__body{padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.chat-typing{
  display:none;gap:4px;align-items:center;width:max-content;
  background:var(--white);border:1px solid var(--sand-300);
  border-radius:14px 14px 14px 4px;padding:.62rem .7rem;
}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--brown-700);opacity:.45}
.chat-bubble{
  width:max-content;max-width:100%;
  background:var(--white);border:1px solid var(--sand-300);
  border-radius:14px 14px 14px 4px;padding:.7rem .95rem;
  font-size:.88rem;color:var(--ink-900);line-height:1.55;
  box-shadow:0 2px 8px rgba(15,36,26,.06);
}
.chat-options{display:flex;flex-direction:column;gap:.5rem;margin-top:.1rem}
.chat-option{
  display:flex;align-items:center;gap:.65rem;
  background:var(--white);border:1px solid var(--sand-300);border-radius:12px;
  padding:.68rem .85rem;font-size:.86rem;font-weight:600;color:var(--green-900);
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.chat-option:hover{border-color:var(--gold-500);transform:translateX(4px);box-shadow:0 4px 12px rgba(15,36,26,.08)}
.chat-option svg:first-child{width:17px;height:17px;flex:none;color:var(--gold-500)}
.chat-option__arrow{margin-left:auto;width:14px;height:14px;flex:none;color:var(--gold-500);opacity:.6}
.chat-option--wa{background:var(--green-800);border-color:var(--green-800);color:var(--cream-50)}
.chat-option--wa svg:first-child{color:#3AC06B}
.chat-option--wa:hover{border-color:var(--gold-500)}
.chat-panel__foot{
  display:flex;align-items:center;gap:.5rem;
  padding:.7rem 1rem;background:var(--cream-100);border-top:1px solid var(--sand-300);
  font-size:.76rem;color:var(--ink-600);
}
.chat-panel__foot svg{width:14px;height:14px;color:var(--gold-500);flex:none}

/* ============================================================
   18b. MOTION — tasteful animations (disabled for reduced-motion)
============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* staggered reveal for card rows */
  .stock__grid .reveal:nth-child(2),.process__grid .reveal:nth-child(2),
  .team__grid .reveal:nth-child(2),.channels .reveal:nth-child(2),
  .social__grid .reveal:nth-child(2),.trust__grid .reveal:nth-child(2){transition-delay:.08s}
  .stock__grid .reveal:nth-child(3),.process__grid .reveal:nth-child(3),
  .team__grid .reveal:nth-child(3),.channels .reveal:nth-child(3),
  .social__grid .reveal:nth-child(3),.trust__grid .reveal:nth-child(3){transition-delay:.16s}
  .stock__grid .reveal:nth-child(4),.process__grid .reveal:nth-child(4),
  .team__grid .reveal:nth-child(4),
  .social__grid .reveal:nth-child(4),.trust__grid .reveal:nth-child(4){transition-delay:.24s}
  .process__grid .reveal:nth-child(5),.trust__grid .reveal:nth-child(5){transition-delay:.32s}
  .process__grid .reveal:nth-child(6){transition-delay:.4s}
  /* quick-contact widget: pulse, spring-in, typing, message cascade */
  .chat-fab::before{
    content:"";position:absolute;inset:0;border-radius:50%;
    box-shadow:0 0 0 0 rgba(194,149,60,.55);animation:fabPulse 2.6s infinite;
  }
  .chat-widget.is-open .chat-fab::before{animation:none}
  @keyframes fabPulse{to{box-shadow:0 0 0 22px rgba(194,149,60,0)}}
  .chat-panel.is-in{animation:panelIn .45s var(--ease) both}
  @keyframes panelIn{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
  .chat-panel.play .chat-typing{display:inline-flex;animation:typingAway 1.15s var(--ease) forwards}
  .chat-panel.play .chat-typing span{animation:typingDot 1s infinite}
  .chat-panel.play .chat-typing span:nth-child(2){animation-delay:.15s}
  .chat-panel.play .chat-typing span:nth-child(3){animation-delay:.3s}
  @keyframes typingDot{0%,100%{transform:none;opacity:.4}50%{transform:translateY(-4px);opacity:1}}
  @keyframes typingAway{0%,82%{opacity:1}100%{opacity:0;height:0;padding:0;border-width:0;overflow:hidden}}
  .chat-panel.play .chat-bubble{opacity:0;animation:msgIn .4s var(--ease) 1.05s forwards}
  .chat-panel.play .chat-option{opacity:0;animation:msgIn .38s var(--ease) forwards}
  .chat-panel.play .chat-option:nth-child(1){animation-delay:1.35s}
  .chat-panel.play .chat-option:nth-child(2){animation-delay:1.5s}
  .chat-panel.play .chat-option:nth-child(3){animation-delay:1.65s}
  .chat-panel.play .chat-option:nth-child(4){animation-delay:1.8s}
  @keyframes msgIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
  /* gold button sheen sweep */
  .btn--gold{position:relative;overflow:hidden}
  .btn--gold::after{
    content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
    transform:skewX(-18deg);transition:left .55s var(--ease);
  }
  .btn--gold:hover::after{left:130%}
}

/* ============================================================
   19. RESPONSIVE BREAKPOINTS
============================================================ */
@media (max-width:1120px){
  .trust__grid{grid-template-columns:repeat(3,1fr)}
  .trust__card:nth-child(4){border-left:0}
  .trust__card:nth-child(n+4){border-top:1px solid var(--sand-300)}
  .lv{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:280px}
  .lv-card:nth-child(1){grid-row:auto;grid-column:1/-1}
  .lv-card:nth-child(2){grid-column:auto}
  .crew{grid-template-columns:repeat(2,1fr);row-gap:2.4rem;max-width:640px;margin-inline:auto}
  .footer__main{grid-template-columns:1.4fr 1fr 1fr;row-gap:2.2rem}
  .footer__col--contact{grid-column:1/-1;max-width:520px}
}
@media (max-width:980px){
  .nav-desktop{display:none}
  .header-cta .btn{display:none}          /* CTA moves into the mobile menu */
  .nav-toggle{display:inline-flex}
  .section-head--split{grid-template-columns:1fr}
  .about__grid,.wholesale__inner,.process__inner,.social__inner,.contact{grid-template-columns:1fr}
  .about__media{max-width:520px}
  .process__aside{position:static}
  .why{grid-template-columns:1fr}
  .why__media{min-height:0;aspect-ratio:16/11;clip-path:polygon(0 0,100% 0,100% 93%,0 100%)}
  .why__panel{padding:2.4rem var(--gutter) 3.6rem}
  .founder{grid-template-columns:1fr;padding:1.6rem var(--gutter) 2rem;margin-top:3rem}
  .founder__media{margin:-3.6rem auto 0;width:min(320px,80%)}
  .founder__media img{min-height:0;aspect-ratio:3/3.7}
  .cta__inner{grid-template-columns:1fr}
  .cta__actions{flex-direction:row;flex-wrap:wrap;min-width:0}
  .map-card{min-height:380px}
}
@media (max-width:720px){
  :root{--header-h:70px}
  .topbar__group--info .topbar__item--hours,
  .topbar__group--info .topbar__item--mail{display:none}
  .brand__logo{width:44px;height:44px}
  .brand__name{font-size:1.02rem}
  .trust{margin-top:-2rem}
  .trust__grid{grid-template-columns:1fr 1fr}
  .trust__card:nth-child(n){border-left:0;border-top:1px solid var(--sand-300)}
  .trust__card:nth-child(-n+2){border-top:0}
  .trust__card:nth-child(even){border-left:1px solid var(--sand-300)}
  .trust__card:last-child{grid-column:1/-1;border-left:0}
  .about__media{padding:0 0 1.6rem 1.4rem}
  .about__badge{right:.5rem}
  .about__points{grid-template-columns:1fr}
  .lv{grid-template-columns:1fr;grid-auto-rows:300px}
  .lv-card:nth-child(n){grid-column:auto}
  .lv-note{flex-direction:column;align-items:flex-start}
  .tl::before{left:21px}
  .tl__item{grid-template-columns:44px 1fr;gap:.9rem}
  .tl__num{width:44px;height:44px;font-size:.92rem}
  .why__list{grid-template-columns:1fr}
  .crew{gap:1.6rem 1rem}
  .mosaic{height:400px;gap:.7rem}
  .mosaic__badge{width:76px;height:76px}
  .mosaic__badge svg{width:26px;height:26px}
  .footer__main{grid-template-columns:1fr;gap:2rem}
  .footer__bottom{flex-direction:column;text-align:center}
}
@media (max-width:420px){
  .topbar__inner{justify-content:center;flex-wrap:wrap;row-gap:.1rem}
  .crew{grid-template-columns:1fr;max-width:300px}
  .cta__actions .btn{width:100%}
}

/* ============================================================
   20. CONTENT-RESTRUCTURE ADDITIONS
============================================================ */
.hero__gold{color:var(--gold-400);font-style:italic}
.about__points li:last-child:nth-child(odd){grid-column:1/-1}

/* trust ribbon: four points */
.trust__grid{grid-template-columns:repeat(4,1fr)}
.trust__card{flex-direction:row;align-items:center;gap:1rem;padding:1.35rem 1.4rem}
.trust__card h3{font-size:.98rem}

/* process flow line (SOURCE → FARM → …) */
.flow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.55rem .2rem;margin-top:clamp(2rem,4vw,3rem);list-style:none}
.flow li{background:var(--green-900);color:var(--gold-200);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.6rem 1.05rem;border-radius:999px}
.flow li:not(:last-child)::after{content:"\2192";margin-left:.85rem;color:var(--gold-400);letter-spacing:0;font-size:.95rem}

/* business model cards */
.bm{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.bm-card{position:relative;background:var(--white);border:1px solid var(--sand-300);border-radius:var(--radius-lg);padding:1.7rem 1.5rem 1.6rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.bm-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft);border-color:var(--gold-500)}
.bm-card:not(:last-child)::after{content:"\2192";position:absolute;right:-1.05rem;top:2.1rem;z-index:2;width:30px;height:30px;border-radius:50%;background:var(--gold-500);color:var(--green-950);display:grid;place-items:center;font-size:.9rem;box-shadow:0 4px 12px rgba(15,36,26,.2)}
.bm-card__ico{width:52px;height:52px;border-radius:50%;background:var(--green-900);color:var(--gold-400);display:grid;place-items:center;margin-bottom:1.1rem;box-shadow:0 0 0 5px rgba(194,149,60,.16)}
.bm-card__ico svg{width:23px;height:23px}
.bm-card small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brown-700);margin-bottom:.3rem}
.bm-card h3{font-size:1.6rem;color:var(--green-900);margin-bottom:.55rem}
.bm-card p{font-size:.9rem;color:var(--ink-600);line-height:1.6}

/* daily operations (dark) */
.dm{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.dm-card{background:rgba(248,244,233,.06);border:1px solid rgba(234,214,164,.18);border-radius:var(--radius-lg);padding:1.6rem 1.5rem;transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.dm-card:hover{background:rgba(248,244,233,.1);border-color:rgba(234,214,164,.45);transform:translateY(-4px)}
.dm-card__ico{width:48px;height:48px;border-radius:14px;background:rgba(194,149,60,.16);border:1px solid rgba(194,149,60,.42);color:var(--gold-400);display:grid;place-items:center;margin-bottom:1rem}
.dm-card__ico svg{width:22px;height:22px}
.dm-card h3{font-family:var(--font-body);font-weight:700;font-size:1.05rem;color:var(--cream-50);margin-bottom:.4rem}
.dm-card p{font-size:.9rem;color:rgba(248,244,233,.78);line-height:1.6}

/* monitoring */
.mon{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:start}
.mon__copy h2{margin-bottom:1.2rem}
.mon__copy p{color:var(--ink-600);margin-bottom:1rem}
.mon__copy p:first-of-type{font-family:var(--font-display);font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--green-900);padding-left:1.1rem;border-left:3px solid var(--gold-500)}
.mon__cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mon-card{background:var(--white);border:1px solid var(--sand-300);border-radius:var(--radius-lg);padding:1.4rem 1.3rem;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.mon-card:hover{transform:translateY(-4px);border-color:var(--gold-500)}
.mon-card__n{display:inline-block;font:600 .72rem/1 var(--font-body);letter-spacing:.18em;color:var(--gold-500);margin-bottom:.7rem}
.mon-card h3{font-family:var(--font-body);font-weight:700;font-size:1rem;color:var(--green-900);margin-bottom:.35rem}
.mon-card p{font-size:.87rem;color:var(--ink-600);line-height:1.6}
.mon-banner{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(2rem,4vw,3rem);text-align:center;background:var(--green-950);color:var(--cream-50);border-radius:var(--radius-lg);padding:clamp(2rem,4vw,3rem) clamp(1.4rem,4vw,3rem)}
.mon-banner::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(234,214,164,.09) 1px,transparent 1.2px);background-size:22px 22px}
.mon-banner h3{font-size:clamp(1.4rem,2.6vw,2rem);color:var(--cream-50);margin-bottom:.6rem}
.mon-banner h3 em{color:var(--gold-400)}
.mon-banner p{max-width:640px;margin-inline:auto;color:rgba(248,244,233,.82)}

/* why: intro line */
.why__lede{margin-top:1rem;color:rgba(248,244,233,.82);max-width:600px}

/* transparency */
.tr{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
.tr__p{color:var(--ink-600);margin-top:1rem}
.tr__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.tr__list{display:grid;gap:.8rem;list-style:none}
.tr__list li{display:flex;align-items:center;gap:1rem;background:var(--white);border:1px solid var(--sand-300);border-radius:var(--radius);padding:1rem 1.2rem;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.tr__list li:hover{transform:translateX(6px);border-color:var(--gold-500)}
.tr__ico{width:44px;height:44px;border-radius:50%;flex:none;background:var(--green-900);color:var(--gold-400);display:grid;place-items:center}
.tr__ico svg{width:20px;height:20px}
.tr__list strong{color:var(--green-900);font-size:1rem}

/* gallery category chips */
.fg__cats{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:-1.4rem 0 2.4rem;list-style:none}
.fg__cats li{font-size:.76rem;font-weight:600;letter-spacing:.06em;color:var(--green-900);border:1px solid var(--sand-300);background:var(--white);padding:.4rem .85rem;border-radius:999px}
.gallery__more{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}

/* FAQ */
.faq{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:start}
.faq__aside{position:sticky;top:calc(var(--header-h) + 2rem)}
.faq__aside p{margin:1rem 0 1.6rem;color:var(--ink-600)}
.faq__list{display:grid;gap:.7rem}
.faq-item{background:var(--white);border:1px solid var(--sand-300);border-radius:var(--radius);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.faq-item[open]{border-color:var(--gold-500);box-shadow:var(--shadow-soft)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.3rem;font-weight:600;color:var(--green-900)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--green-900);color:var(--gold-400);display:grid;place-items:center;font-size:1.2rem;line-height:1;transition:transform .3s var(--ease),background .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg);background:var(--gold-500);color:var(--green-950)}
.faq-item p{padding:0 1.3rem 1.2rem;color:var(--ink-600);font-size:.95rem}
.faq-item p a{color:var(--green-800);font-weight:600;text-decoration:underline}

/* longer social descriptions */
.social-row__text span{display:block;max-width:420px}

@media (min-width:721px) and (max-width:1120px){
  .trust__grid{grid-template-columns:1fr 1fr}
  .trust__card:nth-child(n){border-left:0;border-top:0}
  .trust__card:nth-child(even){border-left:1px solid var(--sand-300)}
  .trust__card:nth-child(n+3){border-top:1px solid var(--sand-300)}
  .bm{grid-template-columns:1fr 1fr}
  .bm-card:nth-child(2)::after{display:none}
  .dm{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .mon,.tr,.faq{grid-template-columns:1fr}
  .faq__aside{position:static}
}
@media (max-width:720px){
  .trust__card:nth-child(n){grid-column:auto;flex-direction:column;align-items:flex-start;gap:.7rem}
  .trust__card:nth-child(even),.trust__card:last-child{border-left:1px solid var(--sand-300)}
  .trust__card:nth-child(n+3){border-top:1px solid var(--sand-300)}
  .bm{grid-template-columns:1fr}
  .bm-card:not(:last-child)::after{right:auto;left:2.3rem;top:auto;bottom:-1.05rem;transform:rotate(90deg)}
  .dm,.mon__cards{grid-template-columns:1fr}
  .flow li{font-size:.66rem;padding:.5rem .8rem}
}
/* ============================================================
   14. COMMERCIAL BUYERS — dark tiles + running topic strip
============================================================ */
.wholesale{position:relative;overflow:hidden}
.buyers{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.buyer-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:300px;
  background:var(--green-950);color:var(--cream-50);border-radius:22px;padding:1.7rem 1.5rem 1.6rem;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.buyer-card::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(234,214,164,.09) 1px,transparent 1.2px);background-size:22px 22px}
.buyer-card::after{content:"";position:absolute;z-index:-1;width:240px;height:240px;right:-90px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(194,149,60,.32),transparent 65%);transition:transform .8s var(--ease)}
.buyer-card:hover{transform:translateY(-8px);box-shadow:0 28px 54px rgba(15,36,26,.32)}
.buyer-card:hover::after{transform:scale(1.5) translate(-10px,10px)}
.buyer-card__n{position:absolute;right:1rem;bottom:-.6rem;z-index:-1;font:600 6.4rem/1 var(--font-display);color:rgba(234,214,164,.07)}
.buyer-card__ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--gold-500);color:var(--green-950);margin-bottom:auto;box-shadow:0 0 0 6px rgba(194,149,60,.2);transition:transform .5s var(--ease)}
.buyer-card:hover .buyer-card__ico{transform:rotate(-8deg) scale(1.08)}
.buyer-card__ico svg{width:25px;height:25px}
.buyer-card h3{margin:2.2rem 0 .5rem;font-size:1.4rem;color:var(--cream-50)}
.buyer-card p{font-size:.88rem;line-height:1.6;color:rgba(248,244,233,.78)}
.discuss{margin-top:clamp(2.2rem,4vw,3rem);text-align:center}
.discuss__label{font-family:var(--font-body);font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brown-700);margin-bottom:1rem}
.chip-run{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.chip-run__track{display:flex;width:max-content;list-style:none}
.chip-run__track li{flex:none;margin-right:.65rem;padding:.6rem 1.15rem;border-radius:999px;background:var(--white);border:1px solid var(--sand-300);color:var(--green-900);font-weight:600;font-size:.88rem;white-space:nowrap}
.chip-run__track li::before{content:"\2726";color:var(--gold-500);margin-right:.55rem;font-size:.75rem}
.wholesale__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:2rem}
@media (prefers-reduced-motion:no-preference){
  .chip-run__track{animation:chipRun 36s linear infinite}
  .chip-run:hover .chip-run__track{animation-play-state:paused}
  @keyframes chipRun{to{transform:translateX(-50%)}}
}
@media (prefers-reduced-motion:reduce){
  .chip-run__track{width:auto;flex-wrap:wrap;justify-content:center;gap:.6rem 0}
  .chip-run__dup{display:none}
}
@media (max-width:1120px){.buyers{grid-template-columns:1fr 1fr}.buyer-card{min-height:260px}}
@media (max-width:720px){
  .buyers{grid-template-columns:1fr}.buyer-card{min-height:0}.buyer-card h3{margin-top:1.4rem}
  .fam{flex-direction:column;height:auto}
  .fam-card{flex:none;height:86px;transition:height .7s var(--ease),border-color .4s var(--ease)}
  .fam-card.is-active{height:360px}
  .fam-card__info{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .7rem}
  .fam-card__info h3{margin-top:0}
}


/* ============================================================
   21. MOTION + FRESH-LAYOUT LAYER
============================================================ */
/* soft animated colour blobs behind the light sections */
.model,.about,#process,#monitoring,#transparency,#faq,#social,#contact,#wholesale,#team{position:relative;overflow:clip}
.model>.container,.about>.container,#process>.container,#monitoring>.container,#transparency>.container,#faq>.container,#social>.container,#contact>.container,#wholesale>.container,#team>.container{position:relative;z-index:1}
.model::before,.about::before,#process::before,#monitoring::before,#transparency::before,#faq::before,#social::before,#contact::before,#wholesale::before,#team::before{
  content:"";position:absolute;z-index:0;pointer-events:none;width:520px;height:520px;right:-190px;top:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(194,149,60,.17),transparent 65%)}
.model::after,.about::after,#process::after,#monitoring::after,#transparency::after,#faq::after,#social::after,#contact::after,#wholesale::after,#team::after{
  content:"";position:absolute;z-index:0;pointer-events:none;width:460px;height:460px;left:-200px;bottom:-190px;border-radius:50%;
  background:radial-gradient(circle,rgba(42,79,56,.13),transparent 65%)}

/* gold shimmer on the italic heading word */
h2 em,.mon-banner h3 em{
  background-image:linear-gradient(100deg,var(--gold-500) 20%,#E7CB86 46%,var(--gold-500) 72%);background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.dark h2 em,.cta h2 em,.mon-banner h3 em{background-image:linear-gradient(100deg,var(--gold-400) 20%,#F7E6B4 46%,var(--gold-400) 72%)}

/* moving gold band before the final call-to-action */
.strip{background:var(--gold-500);color:var(--green-950);overflow:hidden;padding:1rem 0;border-block:1px solid rgba(15,36,26,.25)}
.strip__track{display:flex;width:max-content;align-items:center;white-space:nowrap}
.strip__track span{font:italic 600 clamp(1.15rem,2.2vw,1.6rem)/1 var(--font-display);padding-inline:1.4rem}
.strip__track i{font-style:normal;font-size:.9rem;opacity:.7}

/* Model: staggered "journey" cards */
.bm{align-items:start}
.bm-card:nth-child(even){margin-top:2.6rem}

/* Daily operations: bento */
.dm{grid-template-columns:repeat(4,1fr)}
.dm-card:nth-child(1),.dm-card:nth-child(6){grid-column:span 2}
.dm-card:nth-child(1){background-image:linear-gradient(140deg,rgba(194,149,60,.22),rgba(248,244,233,.04))}
.dm-card:nth-child(6){background-image:linear-gradient(220deg,rgba(194,149,60,.22),rgba(248,244,233,.04))}
.dm-card:nth-child(1) h3,.dm-card:nth-child(6) h3{font-family:var(--font-display);font-size:1.5rem}
.dm-card:nth-child(1) .dm-card__ico,.dm-card:nth-child(6) .dm-card__ico{width:58px;height:58px}

/* cursor spotlight on cards */
.spot{background-image:radial-gradient(340px circle at var(--mx,-999px) var(--my,-999px),rgba(194,149,60,.17),transparent 62%)}

/* timeline: line fills while you scroll; numbers light up */
.tl::after{content:"";position:absolute;left:27px;top:14px;width:2px;height:calc((100% - 40px) * var(--p,0));background:var(--gold-500);box-shadow:0 0 14px rgba(194,149,60,.7);border-radius:2px}
.tl__item.is-visible .tl__num{background:var(--gold-500);color:var(--green-950)}
@media (max-width:720px){.tl::after{left:21px}}

/* why photo drifts slightly */
.why__media img{transform:translate3d(0,var(--py,0px),0) scale(1.12)}

/* directional reveals + a proper transition on every reveal (cards used to just pop in) */
.reveal[data-anim="left"]{transform:translateX(-56px)}
.reveal[data-anim="right"]{transform:translateX(56px)}
.reveal[data-anim="zoom"]{transform:translateY(30px) scale(.9)}
.reveal.reveal.is-visible{transform:none}
.reveal.reveal{transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s),box-shadow .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease)}
.reveal.reveal.done{transition:opacity .4s var(--ease),transform .45s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease)}

/* eyebrow line draws in */
@media (prefers-reduced-motion:no-preference){
  h2 em{animation:emShine 6s linear infinite}
  @keyframes emShine{to{background-position:-230% 0}}
  .reveal .eartag::before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .25s}
  .reveal.is-visible .eartag::before{transform:none}
  .strip__track{animation:stripRun 34s linear infinite}
  @keyframes stripRun{to{transform:translateX(-50%)}}
  .bm-card__ico,.dm-card__ico,.tr__ico,.trust__ico{animation:icoFloat 4.5s ease-in-out infinite}
  .bm-card:nth-child(2) .bm-card__ico,.dm-card:nth-child(even) .dm-card__ico,.tr__list li:nth-child(even) .tr__ico,.trust__card:nth-child(even) .trust__ico{animation-delay:-2.2s}
  @keyframes icoFloat{50%{transform:translateY(-5px)}}
  .about__media::before{animation:frameGlow 5s ease-in-out infinite}
  @keyframes frameGlow{50%{transform:translate(-8px,8px);border-color:var(--gold-400)}}
  .lv-card__no,.fam-card__tag{animation:none}
}
@media (max-width:1120px){
  .dm{grid-template-columns:1fr 1fr}
  .bm-card:nth-child(even){margin-top:0}
}
@media (max-width:720px){
  .dm{grid-template-columns:1fr}
  .dm-card:nth-child(n){grid-column:auto}
}

/* ============================================================
   22. MOBILE FIXES
============================================================ */
@media (max-width:720px){
  .trust__grid{grid-template-columns:1fr 1fr}
  .trust__card{padding:1.1rem 1rem}
  .trust__card h3{font-size:.9rem}
  .hero__tag{bottom:3.6rem}
}
.channel-card--primary.spot{background-image:radial-gradient(340px circle at var(--mx,-999px) var(--my,-999px),rgba(194,149,60,.22),transparent 62%),linear-gradient(150deg,var(--green-800),var(--green-950))}
.dm-card:nth-child(1).spot{background-image:radial-gradient(340px circle at var(--mx,-999px) var(--my,-999px),rgba(194,149,60,.2),transparent 62%),linear-gradient(140deg,rgba(194,149,60,.22),rgba(248,244,233,.04))}
.dm-card:nth-child(6).spot{background-image:radial-gradient(340px circle at var(--mx,-999px) var(--my,-999px),rgba(194,149,60,.2),transparent 62%),linear-gradient(220deg,rgba(194,149,60,.22),rgba(248,244,233,.04))}
h2 em,.mon-banner h3 em{padding:0 .16em 0 .05em;margin:0 -.16em 0 -.05em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* richer gold on light backgrounds */
h2 em{background-image:linear-gradient(100deg,#B4832A 20%,#D9AE52 46%,#B4832A 72%)}
.dark h2 em,.cta h2 em,.mon-banner h3 em{background-image:linear-gradient(100deg,var(--gold-400) 20%,#F7E6B4 46%,var(--gold-400) 72%)}
/* team portraits: two per row on phones */
@media (max-width:420px){
  .crew{grid-template-columns:1fr 1fr;max-width:none;gap:1.6rem .8rem}
  .crew-card h3{font-size:1.02rem}
  .crew-card small{font-size:.6rem;letter-spacing:.08em}
  .crew-card p{font-size:.78rem}
}

/* ============================================================
   23. INNER PAGES — page banner, legal prose, contact form, gallery notes
============================================================ */
.page-hero{padding-block:clamp(3.2rem,7vw,5.5rem) clamp(3rem,6vw,4.6rem)}
.page-hero .container{position:relative;z-index:1}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.8rem;color:rgba(248,244,233,.7);margin-bottom:1.4rem}
.crumbs a{color:var(--gold-200)}
.crumbs a:hover{color:var(--cream-50)}
.crumbs span:not(:last-child){opacity:.5}
.page-hero h1{font-size:clamp(2.1rem,4.8vw,3.7rem);color:var(--cream-50);letter-spacing:-.02em;line-height:1.08;max-width:820px;margin-bottom:1.1rem}
.page-hero h1 em{font-style:italic;font-weight:600;background-image:linear-gradient(100deg,var(--gold-400) 20%,#F7E6B4 46%,var(--gold-400) 72%);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding:0 .16em 0 .05em;margin:0 -.16em 0 -.05em}
.page-hero p{max-width:640px;font-size:clamp(1rem,1.3vw,1.14rem);color:rgba(248,244,233,.86)}
.page-hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
@media (prefers-reduced-motion:no-preference){
  .page-hero h1 em{animation:emShine 6s linear infinite}
  .page-hero .crumbs,.page-hero .eartag,.page-hero h1,.page-hero p,.page-hero__actions{opacity:0;transform:translateY(18px);animation:heroFade .8s var(--ease) forwards}
  .page-hero .crumbs{animation-delay:.05s}.page-hero .eartag{animation-delay:.15s}.page-hero h1{animation-delay:.25s}.page-hero p{animation-delay:.4s}.page-hero__actions{animation-delay:.55s}
}

/* legal pages */
.legal{max-width:800px;margin-inline:auto}
.legal__meta{font-size:.85rem;color:var(--ink-600);margin-bottom:2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--sand-300)}
.legal h2{font-size:clamp(1.25rem,2vw,1.55rem);margin:2.2rem 0 .7rem;color:var(--green-900)}
.legal p,.legal li{color:var(--ink-600);margin-bottom:.8rem}
.legal ul{list-style:disc;padding-left:1.3rem;margin-bottom:1rem}
.legal a{color:var(--green-800);font-weight:600;text-decoration:underline}
.legal__note{margin-top:2.4rem;padding:1.1rem 1.3rem;border-left:4px solid var(--gold-500);background:var(--white);border-radius:0 var(--radius) var(--radius) 0;font-size:.92rem;color:var(--ink-600)}

/* contact page */
.cp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:start}
.form-card{background:var(--white);border:1px solid var(--sand-300);border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--shadow-soft)}
.form-card h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin-bottom:.4rem}
.form-card > p{color:var(--ink-600);font-size:.94rem;margin-bottom:1.3rem}
.field{display:grid;gap:.35rem;margin-bottom:1rem}
.field label{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brown-700)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:.96rem;color:var(--ink-900);background:var(--cream-50);border:1.5px solid var(--sand-300);border-radius:10px;padding:.8rem .9rem;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 4px rgba(194,149,60,.18)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.form-card .btn{width:100%;margin-top:.3rem}
.form-card small{display:block;margin-top:.8rem;font-size:.78rem;color:var(--ink-600)}
.cp__side{display:grid;gap:1.3rem}
.info-card{background:var(--green-950);color:var(--cream-50);border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2rem);position:relative;isolation:isolate;overflow:hidden}
.info-card::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(234,214,164,.09) 1px,transparent 1.2px);background-size:22px 22px}
.info-card h3{font-size:1.35rem;color:var(--cream-50);margin-bottom:1rem}
.info-card ul{display:grid;gap:.7rem;list-style:none}
.info-card li{display:flex;gap:.7rem;align-items:flex-start;font-size:.93rem;color:rgba(248,244,233,.9)}
.info-card li svg{width:16px;height:16px;flex:none;color:var(--gold-400);margin-top:.25rem}
.visit-steps{counter-reset:vs;display:grid;gap:.9rem;list-style:none}
.visit-steps li{counter-increment:vs;display:flex;gap:.9rem;align-items:flex-start;color:rgba(248,244,233,.9);font-size:.93rem}
.visit-steps li::before{content:counter(vs);flex:none;width:30px;height:30px;border-radius:50%;background:var(--gold-500);color:var(--green-950);font-weight:700;font-size:.85rem;display:grid;place-items:center}
.faq--narrow{display:block;max-width:820px;margin-inline:auto}

/* about page */
.bm--3{grid-template-columns:repeat(3,1fr)}
.bm--3 .bm-card:nth-child(even){margin-top:0}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}

/* gallery page */
.gal-notes{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.6rem}
.gal-follow{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:2rem}

@media (max-width:1120px){.values,.gal-notes{grid-template-columns:1fr 1fr}.bm--3{grid-template-columns:1fr 1fr}.bm--3 .bm-card:nth-child(2)::after{display:none}}
@media (max-width:980px){.cp{grid-template-columns:1fr}}
@media (max-width:720px){.values,.gal-notes,.bm--3{grid-template-columns:1fr}.field-row{grid-template-columns:1fr}.bm--3 .bm-card:not(:last-child)::after{right:auto;left:2.3rem;top:auto;bottom:-1.05rem;transform:rotate(90deg)}}