@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Fraunces:opsz,wght,SOFT@9..144,500..700,50..100&display=swap";:root{--forest:#102c25;--forest-deep:#081b17;--milk:#f4f3e9;--fog:#c8d2cc;--hay:#e4b744;--slate:#7e98a2;--rust:#873f2d;--hero-p:0;--sky-y:0%;--ground-y:0%;--near-x:0%;--near-y:0%;--copy-y:0vh;--gutter:clamp(1.25rem,4vw,4.5rem);--display:"Fraunces",Georgia,serif;--body:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--forest-deep)}
body{margin:0;color:var(--milk);background:var(--forest);font-family:var(--body);line-height:1.55;overflow-x:hidden}
a{color:inherit}
.skip{position:fixed;z-index:100;top:1rem;left:1rem;transform:translateY(-180%);padding:.75rem 1rem;background:var(--hay);color:var(--forest-deep)}
.skip:focus{transform:none}
:focus-visible{outline:3px solid var(--hay);outline-offset:4px}
.site-head{position:fixed;z-index:50;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:1rem var(--gutter);mix-blend-mode:difference;color:#fff}
.brand{display:flex;align-items:center;gap:.65rem;font-size:.73rem;line-height:1.05;font-weight:600;letter-spacing:.03em;text-decoration:none;text-transform:uppercase}
.brand svg{width:2.5rem;fill:none;stroke:currentColor;stroke-width:1.7}
nav{display:flex;align-items:center;gap:2rem;font-size:.82rem}
nav a{text-decoration:none}
.nav-cta{border:1px solid currentColor;padding:.7rem 1rem}
.menu-toggle{display:none;background:none;color:inherit;border:0;font:inherit}
.hero{height:170vh;background:#b4bd98}
.hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;background:#b4bd98 url(/hero-montagne.webp) center/cover no-repeat}
.hero-scene,.hero-scene>div{position:absolute;inset:0}
.hero-scene>div{background-position:center;background-size:cover;background-repeat:no-repeat;will-change:transform}
.hero-sky{z-index:0;background-image:url(/hero-montagne.webp);transform:scale(1.16) translate3d(0,var(--sky-y),0);filter:saturate(.88) contrast(1.03)}
.hero-ground{z-index:1;background-image:url(/hero-pascolo.webp);transform:scale(1.22) translate3d(0,var(--ground-y),0)}
.hero-near{z-index:3;background-image:url(/hero-animali.webp);transform:scale(1.28) translate3d(var(--near-x),0,0);transform-origin:center bottom;filter:contrast(1.03)}
.hero-scene:after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(0deg,rgba(230,218,174,.18) 0%,transparent 42%),radial-gradient(circle at 18% 65%,rgba(255,248,220,.18),transparent 34%);pointer-events:none}
.hero-copy{position:absolute;z-index:4;left:calc(var(--gutter) + clamp(1rem,4vw,4rem));bottom:clamp(5rem,11vh,8rem);max-width:54rem;padding:clamp(1.15rem,2.2vw,1.8rem) clamp(1.2rem,2.7vw,2.2rem);transform:translateY(var(--copy-y));color:var(--forest-deep);background:linear-gradient(102deg,rgba(248,245,225,.62),rgba(248,245,225,.48) 76%,rgba(248,245,225,.08));border-left:3px solid var(--hay);border-radius:0 .45rem .45rem 0;box-shadow:0 1.25rem 3.5rem rgba(30,48,31,.12);text-shadow:none;backdrop-filter:blur(7px)}
.kicker{margin:0 0 1.2rem;font-size:.72rem;letter-spacing:.16em;font-weight:600;text-transform:uppercase}
h1,h2,h3,p{text-wrap:pretty}
h1,h2{font-family:var(--display);font-weight:580;letter-spacing:-.045em;line-height:.93;margin:0}
h1{font-size:clamp(4.3rem,9.5vw,10rem);max-width:9ch}
h1 em,h2 em{color:var(--hay);font-weight:520}
.hero-copy h1 em{color:var(--rust)}
.hero-lede{max-width:41rem;margin:1.8rem 0 0;font-size:clamp(1rem,1.4vw,1.25rem);color:var(--forest-deep);font-weight:500}
.place-note{position:absolute;z-index:4;right:calc(var(--gutter) + 2rem);bottom:6rem;max-width:16rem;margin:0;padding:.65rem .8rem;color:var(--forest-deep);font-size:.78rem;font-weight:600;text-align:right;background:rgba(248,245,225,.78);border-radius:.25rem;box-shadow:0 .7rem 2rem rgba(30,48,31,.12);backdrop-filter:blur(5px)}
.manifesto{display:grid;grid-template-columns:minmax(10rem,1fr) 3fr;gap:4rem;padding:clamp(7rem,14vw,13rem) var(--gutter);background:var(--milk);color:var(--forest-deep)}
.side-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;writing-mode:vertical-rl}
.manifesto h2,.section-intro h2,.product-copy h2,.visit h2{font-size:clamp(3.3rem,7vw,7.5rem)}
.manifesto>div>p{max-width:44rem;margin:2.5rem 0 0 auto;font-size:clamp(1.05rem,1.6vw,1.35rem)}
.reveal-on-scroll{opacity:0;transform:translateY(2rem);transition:opacity .8s ease-out,transform .8s cubic-bezier(.23,1,.32,1)}
.reveal-on-scroll.is-visible{opacity:1;transform:none}
.herds{padding:clamp(6rem,10vw,10rem) var(--gutter);background:#9db0b4;color:var(--forest-deep)}
.section-intro{display:grid;grid-template-columns:1fr 2fr;gap:2rem;align-items:start;margin-bottom:5rem}
.section-intro h2{max-width:11ch}
.herd-rail{display:grid;grid-template-columns:1.15fr .85fr 1fr;border-top:1px solid rgba(8,27,23,.4)}
.herd{position:relative;min-height:32rem;padding:2rem;border-right:1px solid rgba(8,27,23,.35);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.herd:last-child{border:0}
.herd-mark{position:absolute;top:-2.5rem;right:-.4rem;font:600 16rem/1 var(--display);color:#102c2514}
.animal-line{position:absolute;inset:7rem 1rem auto;transform:translateY(0);transition:transform .6s cubic-bezier(.23,1,.32,1)}
.animal-line svg{width:100%;fill:none;stroke:var(--forest-deep);stroke-width:2.5}
.herd-copy h3{font:600 clamp(2rem,4vw,4rem)/1 var(--display);margin:0 0 1rem}
.herd-copy p{max-width:22rem;margin:0}
@media(hover:hover)and (pointer:fine){.herd:hover .animal-line{transform:translateY(-1rem) rotate(-2deg)}
}
.making{--milk-p:0;--milk-clip:100%;--milk-surface-y:0%;--milk-bubble-y:0vh;--milk-alpha:0;--milk-line:.1;height:260vh;background:linear-gradient(to bottom,var(--forest-deep) 0 calc(100% - 100svh),var(--milk) calc(100% - 100svh) 100%)}
.making-sticky{position:sticky;top:0;min-height:100vh;display:grid;align-content:center;padding:7rem var(--gutter);overflow:hidden;isolation:isolate}
.making-content{position:relative;z-index:2;display:grid;align-content:center;min-height:calc(100vh - 14rem);color:#f4f3e9;mix-blend-mode:difference}
.milk-rise{position:absolute;z-index:1;inset:-5rem -4% -5rem;overflow:hidden;pointer-events:none;background:transparent}
.milk-wave{position:absolute;inset:0;width:100%;height:100%;will-change:contents}
.milk-rise i{position:absolute;border:1px solid rgba(8,27,23,.18);border-radius:50%;opacity:var(--milk-alpha);transform:translateY(var(--milk-bubble-y))}
.milk-rise i:nth-child(1){left:12%;bottom:13%;width:1.2rem;height:1.2rem}.milk-rise i:nth-child(2){left:72%;bottom:28%;width:2.4rem;height:2.4rem}.milk-rise i:nth-child(3){left:43%;bottom:8%;width:.75rem;height:.75rem}.milk-rise i:nth-child(4){left:87%;bottom:9%;width:1.5rem;height:1.5rem}
.making h2{max-width:12ch;font-size:clamp(3.3rem,7.5vw,8.5rem)}
.process{display:flex;align-items:center;gap:1rem;margin:4rem 0 2rem;color:var(--hay);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}
.process i{height:1px;flex:1;background:linear-gradient(90deg,currentColor,transparent);transform:scaleX(var(--milk-line));transform-origin:left}
.making-copy{max-width:37rem;margin:0 0 0 auto;color:var(--fog);font-size:1.1rem}
.products{position:relative;z-index:3;margin-top:-2px;background:var(--milk);box-shadow:0 -3px 0 var(--milk);color:var(--forest-deep);padding:clamp(4rem,8vw,8rem) var(--gutter) clamp(8rem,14vw,14rem);isolation:isolate}
.product-window{--open:0;--open-out:0%;--open-in:0%;--product-scale:1.08;position:relative;z-index:1;height:min(72vw,52rem);overflow:hidden;background:var(--milk)}
.product-window img{width:100%;height:100%;object-fit:cover;transform:scale(var(--product-scale))}
.shutters span{position:absolute;background:var(--milk);transition:transform .08s linear}
.shutters span:nth-child(1),.shutters span:nth-child(2){left:0;width:100%;height:51%}
.shutters span:nth-child(1){top:0;transform:translateY(var(--open-in))}
.shutters span:nth-child(2){bottom:0;transform:translateY(var(--open-out))}
.shutters span:nth-child(3),.shutters span:nth-child(4){top:0;height:100%;width:51%}
.shutters span:nth-child(3){left:0;transform:translate(var(--open-in))}
.shutters span:nth-child(4){right:0;transform:translate(var(--open-out))}
.product-copy{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;margin-top:5rem}
.product-copy .kicker{grid-column:1/-1}
.product-copy h2 em{color:var(--rust)}
.product-notes{align-self:end;border-top:1px solid currentColor}
.product-notes p{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:1.2rem 0;margin:0;border-bottom:1px solid rgba(8,27,23,.25)}
.promise{overflow:hidden;padding:6rem 0 8rem;background:var(--rust)}
.promise-track{display:flex;width:max-content;font:600 clamp(5rem,15vw,15rem)/.9 var(--display);color:#f4f3e91f;animation:track 28s linear infinite;white-space:nowrap}
@keyframes track{to{transform:translate(-50%)}
}
.promise>p{max-width:65rem;padding:0 var(--gutter);margin:5rem auto 0;font:500 clamp(2rem,4.5vw,4.6rem)/1.05 var(--display)}
.visit{min-height:100vh;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(7rem,12vw,11rem) var(--gutter) 2rem;background:var(--hay);color:var(--forest-deep);overflow:hidden}
.visit-mark{position:absolute;right:-8vw;top:7vh;width:45vw;aspect-ratio:1;border:1px solid rgba(8,27,23,.3);border-radius:50%}
.visit-mark span{position:absolute;background:#081b1740}
.visit-mark span:first-child{width:1px;height:120%;left:50%;top:-10%}
.visit-mark span:last-child{height:1px;width:120%;top:50%;left:-10%}
.visit-copy{position:relative;max-width:70rem}
.visit-copy>p:not(.kicker,.contact-note){max-width:35rem;font-size:1.15rem}
.main-cta{display:inline-flex;gap:3rem;align-items:center;margin-top:2rem;padding:1.1rem 0;border-bottom:2px solid currentColor;font-weight:600;text-decoration:none}
.main-cta span{transition:transform .15s ease-out}
.main-cta:hover span{transform:translate(4px,-4px)}
.contact-note{max-width:33rem;margin-top:1.25rem;font-size:.72rem;opacity:.7}
footer{position:relative;display:flex;justify-content:space-between;gap:2rem;padding-top:2rem;border-top:1px solid rgba(8,27,23,.4);font-size:.75rem}
@media(max-width:760px){.site-head{mix-blend-mode:normal;background:#081b17e0;backdrop-filter:blur(14px)}
.menu-toggle{display:block}
nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:1rem var(--gutter) 1.5rem;background:var(--forest-deep)}
nav.is-open{display:flex}
nav a{padding:.8rem 0}
.nav-cta{border:0}
.hero{height:145vh}
.hero-sky{background-position:58% center}
.hero-ground{background-position:60% center}
.hero-near{background-position:72% center;transform:scale(1.34) translate3d(var(--near-x),0,0);transform-origin:center bottom}
.hero-scene:after{background:linear-gradient(0deg,rgba(234,222,178,.24) 0%,transparent 52%)}
.hero-copy{left:calc(var(--gutter) + .35rem);right:calc(var(--gutter) + .35rem);bottom:4.5rem;padding:1rem 1rem 1.15rem;background:rgba(248,245,225,.6);box-shadow:0 1rem 3rem rgba(30,48,31,.13);backdrop-filter:blur(8px)}
.hero-copy h1{font-size:clamp(3.35rem,16vw,5.8rem)}
.hero-lede{font-size:.98rem}
.place-note{display:none}
.manifesto{grid-template-columns:1fr;gap:2rem}
.side-label{writing-mode:horizontal-tb}
.manifesto h2,.section-intro h2,.product-copy h2,.visit h2{font-size:clamp(3rem,13vw,5rem)}
.section-intro,.product-copy{grid-template-columns:1fr}
.herd-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(var(--gutter)*-1)}
.herd{flex:0 0 84vw;min-height:29rem;scroll-snap-align:start}
.making{height:210vh}
.process{display:grid;grid-template-columns:auto 1fr}
.process i{min-width:3rem}
.making-copy{margin-top:2rem}
.product-window{height:78vh;margin-inline:calc(var(--gutter)*-1)}
.product-window img{object-position:40% center}
.product-copy{gap:2rem}
.product-copy .kicker{grid-column:auto}
.product-notes p{grid-template-columns:1fr;gap:.25rem}
.promise{padding-block:5rem}
.visit-mark{width:85vw;right:-35vw}
.visit{min-height:92vh}
footer{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.hero{height:100vh}
.hero-scene>div,.hero-copy{transform:none!important}
.making{height:auto}
.making-sticky{position:relative}
.making-content{min-height:0;mix-blend-mode:normal;color:var(--milk)}
.milk-rise{display:block;opacity:.72}
.shutters{display:none}
.reveal-on-scroll{opacity:1;transform:none}
}

/* Responsive art direction: desktop, tablet, portrait and short landscape */
html{-webkit-text-size-adjust:100%}
img,svg{max-width:100%}
.site-head{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.hero-sticky,.making-sticky{height:100vh;height:100svh}
.manifesto,.herds,.products,.visit{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}

@media(min-width:1440px){
:root{--gutter:clamp(4.5rem,6vw,8rem)}
.site-head{max-width:1920px;left:50%;transform:translateX(-50%)}
.hero-copy{left:max(var(--gutter),calc((100vw - 1760px)/2));max-width:min(52rem,48vw)}
.place-note{right:max(var(--gutter),calc((100vw - 1760px)/2))}
.manifesto,.herds,.products,.visit{padding-left:max(var(--gutter),calc((100vw - 1760px)/2));padding-right:max(var(--gutter),calc((100vw - 1760px)/2))}
.herd{min-height:clamp(32rem,38vw,43rem)}
.product-window{height:min(62vw,56rem)}
.product-copy{grid-template-columns:minmax(0,1.15fr) minmax(24rem,.85fr)}
}

@media(min-width:761px) and (max-width:1100px){
.site-head{mix-blend-mode:normal;background:rgba(8,27,23,.9);backdrop-filter:blur(14px)}
nav{gap:1.1rem}
.hero-copy{left:var(--gutter);max-width:min(42rem,72vw)}
.place-note{right:var(--gutter);bottom:2rem}
.manifesto{grid-template-columns:8rem minmax(0,1fr);gap:2rem}
.section-intro{grid-template-columns:minmax(9rem,.65fr) 2fr}
.herd-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
.herd{min-height:28rem;padding:1.5rem}
.animal-line{inset:7rem .5rem auto}
.product-copy{gap:2.5rem}
}

@media(max-width:760px){
:root{--gutter:clamp(1rem,5vw,1.5rem)}
.site-head{padding-top:max(.75rem,env(safe-area-inset-top));padding-bottom:.75rem}
.brand svg{width:2.15rem}.brand{font-size:.66rem}
.menu-toggle{min-width:2.75rem;min-height:2.75rem;padding:.55rem}
nav{max-height:calc(100svh - 4.5rem);overflow:auto;padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}
nav a{min-height:2.75rem;display:flex;align-items:center}
.hero{height:145svh;min-height:46rem}
.hero-sticky{min-height:32rem}
.hero-copy{bottom:max(2.5rem,calc(env(safe-area-inset-bottom) + 1.5rem));max-height:calc(100svh - 7rem);overflow:auto}
.hero-copy h1{font-size:clamp(2.85rem,15vw,5.5rem);line-height:.88}
.hero-lede{margin-top:1rem;line-height:1.42}
.hero-copy .kicker{margin-bottom:.7rem}
.manifesto,.herds,.products{padding-top:clamp(4.5rem,16vw,7rem);padding-bottom:clamp(5rem,18vw,8rem)}
.manifesto{gap:1.4rem}.manifesto>div>p{margin-top:1.75rem}
.section-intro{gap:1.25rem;margin-bottom:3rem}
.herd-rail{padding-right:var(--gutter);scroll-padding-left:0;overscroll-behavior-inline:contain}
.herd{flex-basis:min(84vw,26rem);min-height:26rem;padding:1.5rem}
.herd-mark{font-size:12rem}.animal-line{inset:5.5rem .75rem auto}
.making-sticky{padding:6rem var(--gutter) 4rem;min-height:100svh}
.making h2{font-size:clamp(2.85rem,13vw,5rem)}
.process{margin:2.75rem 0 1.5rem;row-gap:.55rem}
.product-window{height:auto;aspect-ratio:4/5;max-height:78svh}
.product-copy{margin-top:3rem}
.promise>p{margin-top:3.5rem}
.visit{min-height:100svh;padding-top:clamp(6rem,18vw,8rem);padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}
.main-cta{gap:clamp(1.5rem,10vw,3rem);min-height:3rem}
}

@media(max-width:420px){
.hero-copy{left:1rem;right:1rem;padding:.85rem .9rem 1rem}
.hero-copy h1{font-size:clamp(2.7rem,14.5vw,4rem)}
.hero-lede{font-size:.9rem}
.manifesto h2,.section-intro h2,.product-copy h2,.visit h2{font-size:clamp(2.6rem,12.5vw,4.2rem)}
.herd{flex-basis:88vw}
.promise>p{font-size:clamp(1.75rem,9vw,2.8rem)}
footer{gap:.75rem}
}

@media(orientation:landscape) and (max-height:600px){
.site-head{padding-top:.45rem;padding-bottom:.45rem}
.brand svg{width:1.9rem}.brand{font-size:.62rem}
.hero{height:150svh;min-height:42rem}
.hero-sticky{min-height:100svh}
.hero-sky{background-position:center 44%}
.hero-ground{background-position:center 52%}
.hero-near{background-position:center 58%;transform:scale(1.22) translate3d(var(--near-x),0,0)}
.hero-copy{left:var(--gutter);right:auto;bottom:1rem;width:min(58vw,38rem);max-height:calc(100svh - 4.6rem);padding:.75rem 1rem}
.hero-copy .kicker{margin-bottom:.35rem;font-size:.62rem}
.hero-copy h1{font-size:clamp(2.5rem,9vh,4.2rem);line-height:.88}
.hero-lede{margin-top:.55rem;font-size:clamp(.78rem,2.2vh,.95rem);line-height:1.35}
.place-note{display:none}
.manifesto,.herds,.products{padding-top:4rem;padding-bottom:4rem}
.manifesto{grid-template-columns:7rem minmax(0,1fr)}
.manifesto h2,.section-intro h2,.product-copy h2,.visit h2{font-size:clamp(2.7rem,9vh,4.5rem)}
.herd-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin-right:0;padding-right:0}
.herd{min-height:20rem;padding:1.25rem}
.animal-line{inset:3.5rem .5rem auto}.herd-mark{font-size:9rem}
.making{height:190vh}.making-sticky{min-height:100svh;padding:4rem var(--gutter) 2rem}
.making h2{font-size:clamp(2.6rem,10vh,4.8rem)}
.process{margin:1.5rem 0 1rem}.making-copy{font-size:.95rem}
.product-window{height:min(88svh,34rem);aspect-ratio:auto;margin-inline:0}
.product-copy{grid-template-columns:1fr 1fr;margin-top:3rem}
.visit{min-height:100svh;padding-top:4.5rem}
}

@media(orientation:portrait) and (min-width:600px) and (max-width:900px){
.hero{height:140svh}
.hero-copy{left:var(--gutter);right:var(--gutter);max-width:42rem}
.hero-copy h1{font-size:clamp(4.8rem,12vw,7rem)}
.herd-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(var(--gutter)*-1)}
.herd{flex:0 0 min(72vw,31rem);scroll-snap-align:start}
.product-window{height:auto;aspect-ratio:4/3}
.product-copy{grid-template-columns:1fr}
}