:root{
--color-green:#056839;
--color-black:#000;
--color-blue:#262364;
--color-red:#aa1e22;
--color-charcoal:#111;
--color-off-white:#fafaf5;
--color-muted:#62645f;
--color-line:#deded5;
--shadow:0 18px 55px rgba(17,17,17,.08);
--serif:Georgia,'Times New Roman',serif;
--sans:Arial,Helvetica,sans-serif;
--max:1180px
}
*{
box-sizing:border-box
}
html{
scroll-behavior:smooth
}
body{
margin:0;
background:var(--color-off-white);
color:var(--color-charcoal);
font-family:var(--sans);
line-height:1.65
}
img{
display:block;
max-width:100%;
height:auto
}
a{
color:inherit;
text-decoration-thickness:.08em;
text-underline-offset:.2em
}
button,select{
font:inherit
}
.container{
width:min(calc(100% - 2rem),var(--max));
margin-inline:auto
}
.skip-link{
position:fixed;
z-index:100;
top:.5rem;
left:.5rem;
padding:.75rem 1rem;
background:#fff;
transform:translateY(-150%)
}
.skip-link:focus{
transform:none
}
.site-header{
position:relative;
z-index:20;
background:rgba(250,250,245,.96);
border-bottom:1px solid var(--color-line)
}
.header-inner{
min-height:5.5rem;
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem
}
.brand img{
width:154px;
height:auto
}
.menu-toggle{
border:1px solid var(--color-charcoal);
background:transparent;
border-radius:999px;
width:3.25rem;
height:3.25rem;
padding:.7rem;
display:grid;
place-items:center;
cursor:pointer
}
.menu-icon{
width:100%;
display:grid;
gap:.28rem
}
.menu-icon-row{
position:relative;
display:block;
height:.22rem;
margin-right:.48rem;
border-radius:999px;
background:currentColor
}
.menu-icon-row::after{
content:"";
position:absolute;
top:50%;
left:calc(100% + .25rem);
width:.42rem;
height:.42rem;
border-radius:50%;
background:currentColor;
transform:translateY(-50%)
}
.menu-icon-row-green{
color:var(--color-green)
}
.menu-icon-row-blue{
color:var(--color-blue)
}
.menu-icon-row-red{
color:var(--color-red)
}
.site-nav{
display:none;
position:absolute;
inset:100% 0 auto;
background:var(--color-off-white);
padding:1rem;
border-bottom:1px solid var(--color-line)
}
.site-nav.is-open{
display:block
}
.nav-list{
list-style:none;
margin:0;
padding:0;
display:grid;
gap:.3rem
}
.nav-list a{
display:block;
padding:.65rem;
text-decoration:none
}
.nav-list a[aria-current=page]{
color:var(--color-green);
font-weight:700
}
.nav-actions{
display:grid;
gap:.75rem;
margin-top:1rem
}
.language-bar{
background:var(--color-off-white);
border-bottom:1px solid var(--color-line)
}
.language-bar-inner{
min-height:2.45rem;
display:flex;
align-items:center;
justify-content:flex-end;
gap:.42rem;
font-size:.9rem
}
.language-link{
color:var(--color-charcoal);
text-decoration:none
}
a.language-link:hover{
color:var(--color-green)
}
.language-link.is-current{
font-weight:700
}
.language-separator{
color:#777
}
.button{
display:inline-flex;
justify-content:center;
align-items:center;
min-height:3rem;
padding:.65rem 1.15rem;
border:1px solid var(--color-green);
border-radius:.45rem;
background:var(--color-green);
color:#fff;
font-weight:700;
text-decoration:none
}
.button.secondary{
background:transparent;
color:var(--color-green)
}
.button.dark{
background:var(--color-charcoal);
border-color:var(--color-charcoal)
}
:focus-visible{
outline:3px solid #ffbf47;
outline-offset:3px
}
.hero{
padding:4.5rem 0 3.5rem;
overflow:hidden
}
.eyebrow{
margin:0 0 1rem;
color:var(--color-green);
font-size:.78rem;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase
}
.hero h1,.page-hero h1{
max-width:900px;
margin:0;
font:700 clamp(2.7rem,8vw,6.7rem)/.96 var(--serif);
letter-spacing:-.045em
}
.hero h1 span{
color:var(--color-green)
}
.hero-copy{
max-width:650px;
margin:1.5rem 0 0;
font-size:1.12rem
}
.hero-actions{
display:flex;
flex-wrap:wrap;
gap:.8rem;
margin-top:1.75rem
}
.route-panel{
position:relative;
margin-top:3rem;
min-height:290px;
border-radius:1rem;
background:var(--color-blue);
color:#fff;
box-shadow:var(--shadow);
overflow:hidden;
padding:2rem
}
.route-panel:before{
content:'';
position:absolute;
width:380px;
height:180px;
border:2px dashed rgba(255,255,255,.6);
border-color:rgba(255,255,255,.65) transparent transparent;
border-radius:50%;
left:18%;
top:35%
}
.route-label{
position:absolute;
max-width:9rem;
font-weight:700
}
.route-label.brazil{
left:1.5rem;
bottom:2rem
}
.route-label.europe{
right:1.5rem;
top:2rem
}
.route-dot{
position:absolute;
width:18px;
height:18px;
border:4px solid #fff;
border-radius:50%;
background:var(--color-red)
}
.route-dot.one{
left:22%;
bottom:30%
}
.route-dot.two{
right:18%;
top:30%
}
.route-mark{
position:absolute;
right:-2rem;
bottom:-4rem;
font:700 14rem/1 var(--serif);
color:rgba(255,255,255,.07)
}
.section{
padding:4.5rem 0
}
.section.alt{
background:#fff
}
.section h2{
max-width:760px;
margin:.2rem 0 1rem;
font:700 clamp(2rem,5vw,3.8rem)/1.05 var(--serif);
letter-spacing:-.025em
}
.section-lead{
max-width:720px;
color:var(--color-muted);
font-size:1.08rem
}
.experience-copy{
color:var(--color-charcoal)
}
.grid{
display:grid;
gap:1rem;
margin-top:2rem
}
.card{
background:#fff;
border:1px solid var(--color-line);
border-radius:.75rem;
padding:1.5rem;
box-shadow:0 10px 30px rgba(17,17,17,.04)
}
.alt .card{
background:var(--color-off-white)
}
.card-number{
display:inline-grid;
place-items:center;
width:2.5rem;
height:2.5rem;
border-radius:50%;
background:#e4efe9;
color:var(--color-green);
font-weight:800
}
.card h3{
margin:1rem 0 .5rem;
font:700 1.45rem/1.15 var(--serif)
}
.text-link{
color:var(--color-green);
font-weight:700
}
.split{
display:grid;
gap:2rem;
align-items:center
}
.stat{
border-left:4px solid var(--color-red);
padding-left:1.2rem
}
.stat strong{
display:block;
font:700 3.5rem/1 var(--serif);
color:var(--color-blue)
}
.quote{
font:700 clamp(1.7rem,4vw,3rem)/1.2 var(--serif)
}
.band{
background:var(--color-green);
color:#fff
}
.band .button{
background:#fff;
border-color:#fff;
color:var(--color-green)
}
.page-hero{
padding:4rem 0 3rem;
border-bottom:1px solid var(--color-line)
}
.page-hero p{
max-width:720px;
font-size:1.15rem
}
.prose{
max-width:780px
}
.prose h2{
margin-top:2.5rem
}
.prose h3{
margin-top:2rem
}
.check-list{
padding-left:1.25rem
}
.contact-list{
list-style:none;
padding:0
}
.contact-list li{
margin:.7rem 0
}
.site-footer{
background:var(--color-charcoal);
color:#fff;
padding:3rem 0
}
.footer-grid{
display:grid;
gap:2rem
}
.footer-brand img{
width:100px;
filter:brightness(0) invert(1)
}
.footer-nav{
list-style:none;
margin:0;
padding:0;
display:grid;
gap:.4rem
}
.footer-contact-list li{
display:flex;
align-items:flex-start;
gap:.65rem
}
.footer-contact-list svg{
flex:0 0 1rem;
width:1rem;
height:1rem;
margin-top:.18rem;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round
}
.legal{
margin-top:2rem;
padding-top:1.25rem;
border-top:1px solid rgba(255,255,255,.2);
color:#cfcfc9;
font-size:.86rem
}
.brand-strip{
display:flex;
flex-wrap:wrap;
gap:.7rem;
margin-top:2rem
}
.brand-strip span{
border:1px solid var(--color-line);
border-radius:999px;
padding:.5rem .8rem;
color:var(--color-muted)
}
.experience-collage{
margin:2rem 0 0;
max-width:none;
width:100%
}
.experience-collage img{
width:100%;
border-radius:.75rem;
background:transparent;
border:0
}
.card-number.service-icon{
width:clamp(2.5rem,4vw,3rem);
height:clamp(2.5rem,4vw,3rem);
padding:0;
background:#f0f4ec;
color:#056839;
overflow:hidden
}
.card-number.service-icon img{
display:block;
width:100%;
height:100%;
object-fit:contain;
border-radius:50%
}
.section.alt .split>div:nth-child(2)>p:first-child strong:first-of-type{
color:var(--color-blue)
}
.section.alt .split>div:nth-child(2)>p:first-child strong:nth-of-type(2){
color:var(--color-red)
}
@media(min-width:760px){
.grid.three{
grid-template-columns:repeat(3,1fr)
}
.grid.two,.split{
grid-template-columns:repeat(2,1fr)
}
.footer-grid{
grid-template-columns:2fr 1fr 1fr
}
.route-panel{
min-height:380px
}
.container{
width:min(calc(100% - 4rem),var(--max))
}
}
@media(min-width:1040px){
.menu-toggle{
display:none
}
.site-nav{
display:flex;
position:static;
align-items:center;
gap:1.2rem;
padding:0;
border:0;
background:transparent
}
.nav-list{
display:flex;
gap:.15rem
}
.nav-actions{
display:flex;
align-items:center;
margin:0
}
.hero-layout{
display:grid;
grid-template-columns:1.02fr .98fr;
align-items:center;
gap:3rem
}
.route-panel{
margin-top:0;
min-height:480px
}
.brand img{
width:180px
}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto
}
*,*:before,*:after{
animation-duration:.01ms!important;
transition-duration:.01ms!important
}
}
/* Editorial homepage hero with responsive photographic storytelling. */
.hero{
position:relative;
isolation:isolate;
padding:0;
background:var(--color-off-white)
}
.hero .hero-layout{
position:relative;
z-index:2;
display:block!important;
padding-block:3.5rem
}
.hero-content{
position:relative;
max-width:900px
}
.hero h1 span:first-child{
color:var(--color-green)
}
.hero h1 span:nth-child(2){
color:var(--color-blue)
}
.hero h1:after{
content:"";
display:block;
width:5.75rem;
height:3px;
margin-top:1.5rem;
background:var(--color-red)
}
.hero-media{
position:relative;
z-index:0;
display:block;
width:100%;
aspect-ratio:1672/941;
margin-top:.25rem;
overflow:hidden;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.72) 18%,#000 32%,#000 94%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.72) 18%,#000 32%,#000 94%,transparent 100%)
}
.hero-media img{
width:100%;
height:100%;
object-fit:cover;
object-position:58% 50%
}
@media(min-width:760px){
.hero .hero-layout{
min-height:36rem;
display:flex!important;
align-items:center;
padding-block:4rem
}
.hero-content{
width:48%;
max-width:34rem
}
.hero h1{
font-size:clamp(3rem,5.3vw,3.9rem)
}
.hero-copy{
max-width:34rem;
font-size:1.02rem
}
.hero-media{
position:absolute;
inset:50% 0 auto auto;
width:66%;
height:auto;
margin:0;
transform:translateY(-50%);
-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.28) 18%,#000 48%);
mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.28) 18%,#000 48%)
}
}
@media(min-width:760px) and (max-width:1199px){
.hero-media:after{
content:"";
position:absolute;
z-index:1;
inset:-1px 0;
pointer-events:none;
background:linear-gradient(to bottom,var(--color-off-white),transparent 22%,transparent 78%,var(--color-off-white))
}
}
@media(min-width:1040px){
.hero .hero-layout{
min-height:36rem
}
.hero-content{
width:min(48%,36rem)
}
.hero h1{
font-size:clamp(3.9rem,5vw,4.4rem)
}
.hero-copy{
font-size:1.05rem
}
.hero-media{
width:68%
}
.hero-media img{
object-position:60% 50%
}
}
@media(min-width:1200px){
.hero-media{
inset:0 0 0 auto;
height:100%;
transform:none
}
}
@media(min-width:1440px){
.hero .hero-layout{
min-height:38rem
}
.hero-content{
width:48%
}
.hero h1{
font-size:4.4rem
}
.hero-media{
width:66%;
-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.2) 16%,#000 46%);
mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.2) 16%,#000 46%)
}
.hero-media img{
object-position:57% 50%
}
}
@supports not ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
@media(min-width:760px){
.hero:before{
content:"";
position:absolute;
z-index:1;
inset:0 auto 0 28%;
width:42%;
pointer-events:none;
background:linear-gradient(to right,var(--color-off-white),rgba(250,250,245,.72),transparent)
}
}
}
/* Services hero: photographic international wine-business narrative. */
.services-hero{
position:relative;
isolation:isolate;
padding:0;
overflow:hidden;
background:var(--color-off-white);
border-bottom:0
}
.services-hero-layout{
position:relative;
z-index:2;
padding-block:3.5rem 1.25rem
}
.services-hero-content{
max-width:46rem
}
.services-hero h1{
max-width:12ch;
font-size:clamp(2.7rem,12vw,4rem)
}
.services-hero-content>p:last-child{
max-width:43rem;
margin-bottom:0;
font-size:1.08rem
}
.services-hero-media{
position:relative;
z-index:0;
display:block;
width:100%;
aspect-ratio:16/9;
overflow:hidden;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.78) 16%,#000 28%,#000 96%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.78) 16%,#000 28%,#000 96%,transparent 100%)
}
.services-hero-media:after{
content:"";
position:absolute;
z-index:1;
inset:-1px;
pointer-events:none;
background:linear-gradient(to bottom,var(--color-off-white),transparent 19%,transparent 92%,var(--color-off-white))
}
.services-hero-media img{
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%
}
@media(min-width:760px) and (max-width:1023px){
.services-hero-layout{
padding-block:4rem 1.5rem
}
.services-hero-content{
width:76%;
max-width:40rem
}
.services-hero h1{
font-size:clamp(3.5rem,7vw,4.15rem)
}
.services-hero-media{
aspect-ratio:1916/821;
margin-top:-1rem;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.8) 14%,#000 28%,#000 96%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.8) 14%,#000 28%,#000 96%,transparent 100%)
}
}
@media(min-width:1024px){
.services-hero{
min-height:31rem
}
.services-hero-layout{
display:flex;
align-items:center;
min-height:31rem;
padding-block:4rem
}
.services-hero-content{
width:45%;
max-width:32rem
}
.services-hero h1{
font-size:clamp(3.65rem,4.8vw,4.35rem)
}
.services-hero-content>p:last-child{
max-width:31rem;
font-size:1.02rem
}
.services-hero-media{
position:absolute;
inset:0 0 0 auto;
width:68%;
height:100%;
aspect-ratio:auto;
margin:0;
-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.25) 19%,#000 46%);
mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.25) 19%,#000 46%)
}
.services-hero-media:after{
background:linear-gradient(to right,var(--color-off-white) 0%,rgba(250,250,245,.68) 20%,transparent 48%),linear-gradient(to bottom,transparent 84%,var(--color-off-white) 100%)
}
.services-hero-media img{
object-position:100% 50%
}
}
@media(min-width:1200px){
.services-hero-media img{
object-position:92% 50%
}
}
@media(min-width:1440px){
.services-hero,
.services-hero-layout{
min-height:35rem
}
.services-hero-content{
width:42%;
max-width:35rem
}
.services-hero h1{
font-size:4.4rem
}
.services-hero-media{
width:66%;
-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.2) 17%,#000 44%);
mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.2) 17%,#000 44%)
}
.services-hero-media img{
object-position:88% 50%
}
}
@supports not ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
.services-hero-media{
-webkit-mask-image:none;
mask-image:none
}
}
.gateway-route-media{
display:block;
width:100%;
min-width:0;
aspect-ratio:1436/1095;
overflow:hidden;
border-radius:.75rem;
background:#ecebe5
}
.gateway-route-media img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%
}
.why-choose-us{
background:var(--color-off-white)
}
.why-choose-us-layout{
display:grid;
gap:2rem
}
.why-choose-us-intro{
border-left:3px solid var(--color-green);
padding-left:1.5rem
}
.why-choose-us-intro h2{
margin-bottom:0;
font-size:clamp(2.25rem,5vw,4.4rem)
}
.why-choose-us-copy{
max-width:650px;
font-size:1.05rem;
line-height:1.75
}
.why-choose-us-copy p{
margin:0 0 1.35rem
}
.why-choose-us-copy p:last-child{
margin-bottom:0
}
.news-hero h1{
max-width:760px;
font-size:clamp(2.7rem,6vw,5.4rem)
}
.news-hero h1:after{
content:"";
display:block;
width:4.5rem;
height:3px;
margin-top:1.35rem;
background:var(--color-red)
}
.news-listing{
padding:1rem 0 4.5rem
}
.news-card{
display:grid;
gap:1.5rem;
padding:2rem 0;
border-bottom:1px solid var(--color-line)
}
.news-card:first-child{
padding-top:0
}
.news-card-image,.news-lead-image{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
border-radius:.7rem;
background:#f0f4ec
}
.news-card-image[src$="wine-for-a-cause.jpg"],.news-lead-image[src$="wine-for-a-cause.jpg"]{
object-fit:contain;
background:#fff
}
.news-card-content time,.news-article-header time{
display:block;
color:var(--color-red);
font-size:.78rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase
}
.news-card h2{
margin:.35rem 0 .7rem;
font:700 clamp(1.65rem,3vw,2.35rem)/1.08 var(--serif)
}
.news-card-content>p:not(.news-meta){
max-width:610px
}
.news-meta{
display:flex;
align-items:center;
gap:.55rem;
margin:.35rem 0;
color:var(--color-muted)
}
.news-meta svg{
flex:0 0 1.25rem;
width:1.25rem;
height:1.25rem;
fill:none;
stroke:var(--color-red);
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round
}
.news-card .button{
margin-top:1rem
}
.news-article-header{
padding:4rem 0 2.5rem
}
.news-back{
display:inline-block;
margin-bottom:1.5rem;
color:var(--color-green);
font-weight:700
}
.news-article-header h1{
max-width:980px;
margin:.55rem 0 1rem;
font:700 clamp(2.5rem,6vw,5rem)/1.02 var(--serif);
letter-spacing:-.035em
}
.news-article-header>div>p:not(.news-meta){
max-width:780px;
font-size:1.1rem
}
.news-article-layout{
display:grid;
gap:2.5rem;
padding-bottom:4.5rem
}
.article-body{
font-size:1.05rem
}
.article-body p{
margin:0 0 1.35rem
}
@media(min-width:760px){
.why-choose-us-layout{
grid-template-columns:minmax(0,2fr) minmax(0,2.65fr);
gap:clamp(3rem,8vw,7rem);
align-items:start
}
.news-card{
grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
gap:clamp(2rem,5vw,4rem);
align-items:center
}
.news-article-layout{
grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
align-items:start
}
}