/* =========================================================
   FERMES ALI SFAR — "Liquid Heritage"
   Palette, type & system
   ========================================================= */
:root{
  --ink:      #0d1408;   /* near-black olive */
  --grove:    #14261a;   /* deep forest green */
  --olive:    #3a4a2b;   /* mid olive */
  --sage:     #7d8a5f;   /* dusty sage */
  --gold:     #c69a44;   /* liquid gold */
  --gold-lt:  #e2c079;   /* light gold */
  --bone:     #f2ede1;   /* eggshell */
  --bone-2:   #e8e1d0;   /* warm paper */
  --azulejo:  #2e6e8e;   /* Tunisian heritage blue (accent only) */
  --line:     rgba(13,20,8,.14);
  --line-lt:  rgba(242,237,225,.18);

  --ff-disp: "Fraunces", Georgia, serif;
  --ff-body: "Manrope", -apple-system, system-ui, sans-serif;
  --ff-ar:   "Noto Kufi Arabic", serif;

  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1400px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--ink); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--ff-body);
  background:transparent;
  color:var(--bone);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* =========================================================
   GLOBAL SCROLL-SCRUBBED BACKGROUND FILM
   Fixed behind the whole page; JS maps total scroll → currentTime
   ========================================================= */
.bgfilm{ position:fixed; inset:0; z-index:-2; background:var(--ink); }
.bgfilm__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.9;
}
.bgfilm__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(13,20,8,.35), rgba(13,20,8,.72) 70%, rgba(13,20,8,.9) 100%),
    linear-gradient(180deg, rgba(13,20,8,.55), rgba(20,38,26,.35) 40%, rgba(13,20,8,.7));
}
.bgfilm__grain{
  position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main{ position:relative; z-index:1; }
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:var(--ink); }

.section{ padding: clamp(4.5rem, 11vh, 10rem) var(--pad); }

.eyebrow{
  display:inline-block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
}
.eyebrow--light{ color:var(--gold-lt); }

/* =========================================================
   PRELOADER
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:999;
  background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader__inner{ text-align:center; }

/* --- Brand logo (single white webp, recolored via CSS mask) --- */
.brand-logo{
  display:inline-block;
  aspect-ratio:1782 / 1238;
  background-color:currentColor;
  -webkit-mask:url("Logo-FAS-White.webp") center/contain no-repeat;
  mask:url("Logo-FAS-White.webp") center/contain no-repeat;
}
.loader__logo{ height:clamp(88px,20vw,130px); color:var(--bone); margin:0 auto; }

.loader__bar{
  display:block; width:min(46vw,220px); height:1px;
  background:var(--line-lt); margin:1.4rem auto 0; overflow:hidden;
}
.loader__bar i{
  display:block; height:100%; width:0; background:var(--gold);
  animation:load 1.4s var(--ease) forwards;
}
@keyframes load{ to{ width:100%; } }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding: 1.15rem var(--pad);
  color:var(--bone);
  transition:background .5s var(--ease), color .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.solid{
  background:rgba(13,20,8,.72);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:var(--bone);
  padding-top:.8rem; padding-bottom:.8rem;
  box-shadow:0 1px 0 var(--line-lt);
}
.nav__brand{ display:flex; align-items:center; line-height:1; }
.nav__logo{ height:58px; transition:height .5s var(--ease); }
.nav.solid .nav__logo{ height:48px; }
.nav__links{ display:flex; gap:2.1rem; margin-left:auto; }
.nav__links a{
  font-size:.82rem; font-weight:500; letter-spacing:.02em; position:relative; padding:.3rem 0;
  opacity:.85; transition:opacity .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:currentColor; transition:width .35s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  border:1px solid currentColor; border-radius:100px;
  padding:.55rem 1.15rem; font-size:.78rem; font-weight:600; letter-spacing:.02em;
  transition:background .3s, color .3s;
}
.nav.solid .nav__cta:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.nav:not(.solid) .nav__cta:hover{ background:var(--bone); color:var(--ink); }
.nav__burger{ display:none; background:none; border:0; cursor:pointer; width:34px; height:34px; position:relative; }
.nav__burger span{ position:absolute; left:6px; right:6px; height:1.5px; background:currentColor; transition:transform .35s var(--ease), opacity .3s; }
.nav__burger span:nth-child(1){ top:13px; }
.nav__burger span:nth-child(2){ top:20px; }
.nav__burger.open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:90;
  background:var(--grove); color:var(--bone);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:none; }
.mobile-menu a{ font-family:var(--ff-disp); font-size:2rem; }
.mobile-menu__cta{ font-family:var(--ff-body)!important; font-size:.9rem!important; letter-spacing:.2em; text-transform:uppercase; border:1px solid var(--gold); color:var(--gold-lt); padding:.7rem 1.6rem; border-radius:100px; margin-top:1rem; }

/* =========================================================
   HERO — SCROLL SCRUBBED FILM
   ========================================================= */
.hero{ position:relative; min-height:100vh; display:grid; place-items:center; overflow:hidden; padding:6rem 1.25rem; }
.hero__content{
  position:relative; z-index:2; text-align:center; color:var(--bone);
}
.hero__title{
  font-family:var(--ff-disp); font-weight:300;
  font-size:clamp(3rem, 12vw, 10.5rem);
  line-height:.92; letter-spacing:-.02em;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line--italic{ font-style:italic; color:var(--gold-lt); font-weight:400; }
.hero__ar{ font-family:var(--ff-ar); font-size:clamp(1rem,2.5vw,1.5rem); color:var(--gold-lt); margin-top:1.6rem; letter-spacing:.05em; }

.hero__cue{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:2;
  color:var(--bone); text-align:center;
  font-size:.68rem; letter-spacing:.34em; text-transform:uppercase;
}
.hero__cue-line{ display:block; width:1px; height:52px; background:var(--line-lt); margin:.9rem auto 0; overflow:hidden; }
.hero__cue-line i{ display:block; width:100%; height:40%; background:var(--gold); animation:cue 2s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(250%);} }

.hero__meta{
  position:absolute; bottom:2.6rem; z-index:2; color:var(--bone);
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; opacity:.72;
}
.hero__meta--l{ left:var(--pad); }
.hero__meta--r{ right:var(--pad); text-align:right; }

/* hero animated-in state */
[data-hero]{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.hero.ready [data-hero]{ opacity:1; transform:none; }
.hero.ready [data-hero="1"]{ transition-delay:.15s; }
.hero.ready [data-hero="2"]{ transition-delay:.28s; }
.hero.ready [data-hero="3"]{ transition-delay:.41s; }
.hero.ready [data-hero="4"]{ transition-delay:.6s; }
.hero.ready [data-hero="5"]{ transition-delay:.85s; }
.hero.ready [data-hero="6"]{ transition-delay:1s; }

/* =========================================================
   STORY
   ========================================================= */
.story{ background:rgba(13,20,8,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); border-top:1px solid var(--line-lt); border-bottom:1px solid var(--line-lt); }
.story__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:minmax(0,.32fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); }
.story__label{ display:flex; flex-direction:column; gap:1rem; align-self:start; position:sticky; top:120px; }
.story__est{ font-family:var(--ff-disp); font-size:clamp(1.6rem,3vw,2.4rem); color:var(--gold-lt); }
.story__est b{ color:var(--gold); font-weight:500; }
.story__head{
  font-family:var(--ff-disp); font-weight:300;
  font-size:clamp(1.9rem, 4.4vw, 3.6rem); line-height:1.08; letter-spacing:-.01em;
  margin-bottom:2rem; max-width:20ch;
}
.story__head em{ font-style:italic; color:var(--gold-lt); }
.story__body p{ max-width:56ch; color:rgba(242,237,225,.8); font-size:1.06rem; margin-bottom:1.15rem; }
.story__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; border-top:1px solid var(--line-lt); padding-top:2.4rem; }
.stat__num{ font-family:var(--ff-disp); font-size:clamp(2.4rem,5vw,3.6rem); font-weight:400; color:var(--bone); display:block; line-height:1; }
.stat__num i{ font-style:normal; }
.stat__suffix{ font-size:.5em; color:var(--gold); vertical-align:top; margin-left:.02em; }
.stat__suffix--pre{ margin-left:0; margin-right:.02em; }
.stat__lbl{ display:block; margin-top:.7rem; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); }

/* =========================================================
   TERROIR — PARALLAX
   ========================================================= */
.terroir{ position:relative; overflow:hidden; color:var(--bone); isolation:isolate; }
.terroir__bg{
  position:absolute; inset:-12% 0; z-index:-2;
  background:var(--grove) url("assets/grove.jpg") center/cover no-repeat;
  will-change:transform;
}
.terroir__veil{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(13,20,8,.72), rgba(20,38,26,.6) 50%, rgba(13,20,8,.85));
}
.terroir__inner{ max-width:var(--maxw); margin:0 auto; min-height:82vh; display:flex; flex-direction:column; justify-content:center; }
.terroir__quote{
  font-family:var(--ff-disp); font-weight:300;
  font-size:clamp(2rem,5.2vw,4.6rem); line-height:1.05; letter-spacing:-.01em;
  margin:1.4rem 0 2.6rem; max-width:16ch;
}
.terroir__quote span{ display:block; color:var(--gold-lt); font-style:italic; }
.terroir__row{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,5vw,5rem); max-width:900px; }
.terroir__row p{ color:rgba(242,237,225,.82); font-size:1.05rem; }

/* =========================================================
   THE OIL — NOTES
   ========================================================= */
.oil{ background:rgba(20,38,26,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); color:var(--bone); border-top:1px solid var(--line-lt); }
.oil__head{ max-width:var(--maxw); margin:0 auto 3.5rem; }
.oil__title{ font-family:var(--ff-disp); font-weight:300; font-size:clamp(2.2rem,6vw,5rem); line-height:1; letter-spacing:-.01em; margin-top:1rem; }
.oil__title em{ font-style:italic; color:var(--gold-lt); }
.oil__notes{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-lt); border-top:1px solid var(--line-lt); border-bottom:1px solid var(--line-lt); }
.note{ background:rgba(13,20,8,.34); padding:2.6rem clamp(1.2rem,2.4vw,2.4rem); }
.note__idx{ font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
.note h3{ font-family:var(--ff-disp); font-weight:400; font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.1; margin:1.4rem 0 1rem; }
.note p{ color:rgba(242,237,225,.72); font-size:.98rem; }

/* =========================================================
   INTERLUDE — OLIVE MACRO BAND
   ========================================================= */
.interlude{ position:relative; height:78vh; min-height:440px; overflow:hidden; display:grid; place-items:center; text-align:center; color:var(--bone); isolation:isolate; }
.interlude__bg{
  position:absolute; inset:-14% 0; z-index:-2;
  background:var(--ink) url("assets/olives.jpg") center/cover no-repeat;
  will-change:transform;
}
.interlude__veil{ position:absolute; inset:0; z-index:-1; background:radial-gradient(90% 90% at 50% 50%, rgba(13,20,8,.35), rgba(13,20,8,.78)); }
.interlude__ar{ font-family:var(--ff-ar); font-size:clamp(1.4rem,4vw,2.6rem); color:var(--gold-lt); letter-spacing:.04em; }
.interlude__en{ font-family:var(--ff-disp); font-style:italic; font-weight:300; font-size:clamp(1.6rem,5vw,3.4rem); margin-top:.6rem; }

/* =========================================================
   RANGE — PRODUCTS
   ========================================================= */
.range{ background:rgba(13,20,8,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); border-top:1px solid var(--line-lt); }
.range__head{ max-width:var(--maxw); margin:0 auto 3.5rem; }
.range__title{ font-family:var(--ff-disp); font-weight:300; font-size:clamp(2rem,5vw,4rem); line-height:1.02; letter-spacing:-.01em; margin:1rem 0 1.2rem; max-width:20ch; }
.range__title em{ font-style:italic; color:var(--gold-lt); }
.range__lede{ max-width:52ch; color:rgba(242,237,225,.8); font-size:1.05rem; }
.range__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:1.5rem; }
.product{ border:1px solid var(--line-lt); border-radius:14px; overflow:hidden; background:rgba(13,20,8,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.product:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -28px rgba(0,0,0,.6); border-color:rgba(226,192,121,.4); }
.product--hero{ grid-row:span 1; }
.product__media{ aspect-ratio:4/5; background:var(--grove); overflow:hidden; position:relative; }
.product--hero .product__media{ aspect-ratio:4/4.4; }
.product__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.product:hover .product__media img{ transform:scale(1.05); }
.product__media--tin{ display:grid; place-items:center; }
.product__media--tin::before{
  content:""; width:52%; height:64%;
  background:linear-gradient(150deg,#5a6a3f,#2c3820 60%);
  border-radius:8px 8px 6px 6px;
  box-shadow:inset 0 0 0 2px rgba(226,192,121,.35), 0 20px 40px -20px rgba(0,0,0,.6);
  position:relative;
}
.product__media--tin::after{
  content:attr(data-cap); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:var(--gold-lt); font-family:var(--ff-disp); font-size:1.6rem; letter-spacing:.1em;
}
.product__media--3l::after{ content:"3L"; }
.product__media--5l::after{ content:"5L"; }
.product__media--3l::before{ content:""; }
.product__media--5l::before{ content:""; }
.product__media--3l, .product__media--5l{ position:relative; }
.product__media--3l .cap, .product__media--5l .cap{ }
.product__info{ padding:1.8rem clamp(1.2rem,1.8vw,1.8rem) 2rem; display:flex; flex-direction:column; flex:1; }
.product__tag{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.product__name{ font-family:var(--ff-disp); font-weight:400; font-size:clamp(1.5rem,2.4vw,2rem); margin:.7rem 0 .8rem; }
.product__desc{ color:rgba(242,237,225,.72); font-size:.96rem; margin-bottom:1.4rem; }
.product__spec{ list-style:none; margin-top:auto; border-top:1px solid var(--line-lt); }
.product__spec li{ display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; font-size:.86rem; border-bottom:1px solid var(--line-lt); color:var(--gold-lt); }
.product__spec li span{ color:var(--sage); letter-spacing:.02em; }

/* tin caption via ::after uses content; give real labels */
.product__media--3l{ }

/* =========================================================
   SEALS
   ========================================================= */
.seals{ background:rgba(13,20,8,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); color:var(--bone); border-top:1px solid var(--line-lt); }
.seals__head{ max-width:var(--maxw); margin:0 auto 3rem; }
.seals__title{ font-family:var(--ff-disp); font-weight:300; font-size:clamp(2rem,5vw,4rem); line-height:1; letter-spacing:-.01em; margin:1rem 0 1.2rem; }
.seals__title em{ font-style:italic; color:var(--gold-lt); }
.seals__lede{ max-width:52ch; color:rgba(242,237,225,.7); font-size:1.05rem; }
.seals__wall{ max-width:var(--maxw); margin:0 auto; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-lt); border-left:1px solid var(--line-lt); }
.seals__wall li{
  border-right:1px solid var(--line-lt); border-bottom:1px solid var(--line-lt);
  padding:2.4rem 1.6rem; min-height:150px; display:flex; flex-direction:column; justify-content:flex-end;
  font-family:var(--ff-disp); font-size:clamp(1.5rem,2.6vw,2.2rem); font-weight:400;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.seals__wall li span{ display:block; font-family:var(--ff-body); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-top:.5rem; }
.seals__wall li:hover{ background:var(--gold); color:var(--ink); }
.seals__wall li:hover span{ color:var(--grove); }

/* =========================================================
   EXPORT
   ========================================================= */
.export{ background:rgba(13,20,8,.64); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); border-top:1px solid var(--line-lt); }
.export__inner{ max-width:1050px; margin:0 auto; text-align:center; }
.export__title{ font-family:var(--ff-disp); font-weight:300; font-size:clamp(2.2rem,6vw,4.6rem); line-height:1.02; letter-spacing:-.01em; margin:1.2rem 0 1.4rem; }
.export__title em{ font-style:italic; color:var(--gold-lt); }
.export__lede{ max-width:56ch; margin:0 auto 3rem; color:rgba(242,237,225,.8); font-size:1.08rem; }
.export__contacts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:3rem; }
.contact{ border:1px solid var(--line-lt); border-radius:12px; padding:1.6rem 1.4rem; text-align:left; background:rgba(13,20,8,.4); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:border-color .4s, transform .4s var(--ease); }
.contact:hover{ border-color:var(--gold); transform:translateY(-4px); }
.contact__k{ display:block; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--sage); margin-bottom:.7rem; }
.contact__v{ display:block; font-family:var(--ff-disp); font-size:1.12rem; color:var(--bone); word-break:break-word; }
.contact__sub{ display:block; font-size:.82rem; color:var(--gold-lt); margin-top:.5rem; }
.export__btn{
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--gold); color:var(--ink);
  padding:1.05rem 2rem; border-radius:100px; font-weight:700; font-size:.95rem;
  transition:background .35s, gap .35s var(--ease), box-shadow .35s;
  box-shadow:0 10px 30px -12px rgba(198,154,68,.5);
}
.export__btn:hover{ background:var(--gold-lt); gap:1.1rem; }
.export__btn svg{ transition:transform .35s var(--ease); }
.export__btn:hover svg{ transform:translateX(3px); }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{ background:var(--ink); color:var(--bone); padding:clamp(3rem,7vh,6rem) var(--pad) 2rem; }
.foot__top{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line-lt); padding-bottom:2rem; }
.foot__logo{ height:clamp(74px,12vw,104px); color:var(--bone); }
.foot__ar{ font-family:var(--ff-ar); font-size:clamp(1.2rem,3vw,1.8rem); color:var(--gold-lt); }
.foot__cols{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; padding:2.6rem 0; }
.foot__k{ display:block; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.foot__col p{ color:rgba(242,237,225,.72); font-size:.95rem; line-height:1.8; }
.foot__col a:hover{ color:var(--gold-lt); }
.foot__base{ max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--line-lt); padding-top:1.6rem; font-size:.78rem; color:rgba(242,237,225,.5); }

/* =========================================================
   REVEAL
   ========================================================= */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal]:nth-child(2){ transition-delay:.1s; }
[data-reveal]:nth-child(3){ transition-delay:.2s; }

.reveal-up{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-up.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:block; }
  .nav__logo{ height:46px; }
  .nav.solid .nav__logo{ height:42px; }
  .story__grid{ grid-template-columns:1fr; gap:2rem; }
  .story__label{ position:static; flex-direction:row; align-items:baseline; gap:1.5rem; }
  .range__grid{ grid-template-columns:1fr 1fr; }
  .product--hero{ grid-column:span 2; }
  .product--hero .product__media{ aspect-ratio:16/10; }
  .oil__notes{ grid-template-columns:1fr; }
  .export__contacts{ grid-template-columns:1fr; }
  .foot__cols{ grid-template-columns:1fr; gap:1.6rem; }
}
@media (max-width: 620px){
  .hero{ height:300vh; }
  .story__stats{ grid-template-columns:1fr; gap:1.2rem; }
  .terroir__row{ grid-template-columns:1fr; }
  .range__grid{ grid-template-columns:1fr; }
  .product--hero{ grid-column:span 1; }
  .seals__wall{ grid-template-columns:1fr 1fr; }
  .hero__meta{ display:none; }
  .foot__base{ flex-direction:column; gap:.4rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  [data-hero],[data-reveal],.reveal-up{ opacity:1!important; transform:none!important; }
}