/* Layout closer to a classic importer site: top bar, dropdown menu, full-width hero, photo tiles */
header{border:0;box-shadow:0 2px 14px -8px rgba(0,0,0,.4)}
.top{background:var(--g);color:var(--iv);font-size:.88rem}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:42px;gap:16px}
.top a{text-decoration:none;margin-inline-end:20px}.top a:hover{text-decoration:underline}
.top .lang{border-color:rgba(244,240,231,.6)}.top .lang button{color:var(--iv);padding:3px 10px}
.top .lang button+button{border-color:rgba(244,240,231,.6)}.top .lang button[aria-pressed=true]{background:var(--iv);color:var(--g)}
.bar{min-height:84px}.logo{font-size:1.7rem}
.dd{position:relative}.dd>a::after{content:" \25BE";font-size:.8em}
.dp{display:none;position:absolute;top:100%;inset-inline-start:-40px;background:var(--w);padding:22px 28px;box-shadow:0 18px 40px -18px rgba(0,0,0,.45);border-top:3px solid var(--g);grid-template-columns:1fr 1fr;gap:36px;min-width:560px}
.dd:hover .dp,.dd:focus-within .dp{display:grid}
.dp b{display:block;font-family:var(--hf);color:var(--g);margin-bottom:8px}.dp b a{border:0}
.dp a{display:block;border:0;padding:4px 0;font-weight:400}.dp a:hover{color:var(--g);text-decoration:underline}
/* hero */
.hero{position:relative;padding:0;background:var(--gd);color:var(--w);min-height:min(78vh,640px);display:flex;align-items:center;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero>img.noimg{background:radial-gradient(circle at 75% 20%,#27494f 0,var(--g) 45%,var(--gd) 100%)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,16,15,.82),rgba(6,16,15,.35))}
[dir=rtl] .hero::after{background:linear-gradient(270deg,rgba(6,16,15,.82),rgba(6,16,15,.35))}
.hero .wrap{position:relative;z-index:1;padding-top:80px;padding-bottom:80px}
.hero h1{color:#fff;max-width:14ch}.hero p.lead{color:#f1ece0;max-width:52ch}
.hero .btn.o{color:#fff;border-color:#fff}.hero .btn.o:hover{background:#fff;color:var(--g)}
.hero .btn:not(.o){background:var(--iv);color:var(--g);border-color:var(--iv)}
/* value cards */
.vals{margin-top:-56px;position:relative;z-index:2;padding-bottom:20px}
.vg{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.val{background:var(--w);padding:30px 28px;border-radius:var(--r);box-shadow:0 14px 34px -18px rgba(41,45,41,.5);border-top:4px solid var(--au)}
.val svg{width:42px;height:42px;stroke:var(--g);fill:none;stroke-width:1.6;margin-bottom:14px}
.val p{margin:0}
/* tiles */
.tile{position:relative;border-radius:var(--r);overflow:hidden;min-height:340px;display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.tile:hover>img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,16,15,.05) 25%,rgba(6,16,15,.9))}
.tile .tb{padding:26px;width:100%}.tile h3{color:#fff;font-size:1.5rem;margin-bottom:.3em}.tile p{color:#eee9dc;font-size:.97rem;margin-bottom:1em}
.tile.xl{min-height:440px}
.tile img.noimg{min-height:0;background:linear-gradient(135deg,#1d4047,#0D1D20)}
.tiles>.tile:nth-child(3n+2) img.noimg{background:linear-gradient(135deg,#8a6a2a,#33270f)}
.tiles>.tile:nth-child(3n+3) img.noimg{background:linear-gradient(135deg,#3a4a4d,#162022)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.tiles.two{grid-template-columns:repeat(2,1fr)}
.sec-h{text-align:center;margin-bottom:44px}.sec-h p{margin-inline:auto}
.band{position:relative}
/* footer */
.fg{grid-template-columns:1.4fr 1fr 1.2fr}
footer dl{margin:0}footer dd{margin:0 0 10px}
@media(max-width:860px){
 .vals{margin-top:-32px}.vg,.tiles.two{grid-template-columns:1fr}.hero{min-height:520px}
 .dp{display:grid;position:static;box-shadow:none;border:0;padding:4px 0 0 14px;min-width:0;grid-template-columns:1fr;gap:10px}
 .dd>a::after{content:""}.top .wrap{flex-wrap:wrap;padding-block:6px}
}

.logo img{height:58px;width:auto;display:block}.flogo{height:64px;width:auto;margin-bottom:14px}
nav a[aria-current]{border-color:var(--au)}.top{border-bottom:2px solid var(--au)}
.btn:not(.o):not(.l){background:var(--g)}.btn:hover{box-shadow:inset 0 -3px 0 var(--au)}
.band{border-top:4px solid var(--au)}.phead{border-bottom:4px solid var(--au)}
@media(max-width:860px){.logo img{height:46px}}

@media(max-width:860px){nav{top:100%}.logo{font-size:1.4rem}}
/* light orange accent */
:root{--or:#F6B26B;--orh:#EFA254}
header .bar>.btn.s:not(.o):not(.l),.hero .btn:not(.o):not(.l),.band .btn.l{background:var(--or);color:#13201f;border-color:var(--or)}
header .bar>.btn.s:not(.o):not(.l):hover,.hero .btn:not(.o):not(.l):hover,.band .btn.l:hover{background:var(--orh);border-color:var(--orh);box-shadow:none}
.val{border-top-color:var(--or)}
.val svg{stroke:var(--g)}
.top{border-bottom-color:var(--or)}
.sec-h::after,.phead h1::after{content:"";display:block;width:64px;height:4px;background:var(--or);margin:14px auto 0;border-radius:2px}
.phead h1::after{margin-inline:0}

.hero-logo{display:inline-block;background:var(--iv);padding:16px 30px;border-radius:var(--r);margin-bottom:30px;border-bottom:4px solid var(--or);box-shadow:0 14px 34px -14px rgba(0,0,0,.65)}
.hero-logo img{width:clamp(210px,26vw,330px);height:auto;display:block}
@media(max-width:860px){.hero .wrap{padding-top:56px}.hero-logo{padding:12px 20px;margin-bottom:22px}}

.hero p.lead{max-width:62ch}

.hero h1{max-width:19ch}

.vl{list-style:none;padding:0;margin:14px 0 0;font-size:.94rem;line-height:1.5}
.vl li{padding:10px 0;border-top:1px solid var(--bg)}
.vl b{display:block;color:var(--g);font-family:var(--hf);font-size:1.02rem;margin-bottom:2px}
.vl span{display:block}
.val{padding:26px 26px 18px}

.two-col img.wide{aspect-ratio:1024/559}

.solo{max-width:760px}

.two-col img.wide{aspect-ratio:16/9}

.about-top{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);display:block;margin-bottom:40px;box-shadow:0 18px 40px -22px rgba(0,0,0,.5)}
.about-txt{max-width:820px}
.about-txt p{font-size:1.1rem;max-width:none}

.two-col.steps{grid-template-columns:1.6fr 1fr}
.two-col.steps img.wide{aspect-ratio:auto;height:auto}
@media(max-width:860px){.two-col.steps{grid-template-columns:1fr}}

/* hero: dark background with the logo as the main visual */
.hero{background:radial-gradient(circle at 78% 30%,#27494f 0,#0D1D20 48%,#06100f 100%)}
.hero::after{display:none}
.hero .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.hero .hero-logo{margin:0;justify-self:center;padding:34px 44px;border-bottom-width:6px}
.hero .hero-logo img{width:clamp(260px,34vw,460px)}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:36px}.hero .hero-logo{justify-self:start;padding:22px 26px}.hero .hero-logo img{width:min(300px,70vw)}}

/* orange text on product tiles, with a darker fade so it stays readable over photos */
.tile::after{background:linear-gradient(180deg,rgba(6,16,15,0) 12%,rgba(6,16,15,.72) 52%,rgba(6,16,15,.94) 100%)}
.tile h3{color:#F6B26B;text-shadow:0 1px 4px rgba(0,0,0,.75)}
.tile p{color:#FBCB98;text-shadow:0 1px 3px rgba(0,0,0,.75)}

/* dark green text on an ivory panel at the bottom of each product card */
.tile::after{display:none}
.tile .tb{background:rgba(244,240,231,.96);padding:22px 26px 24px}
.tile h3{color:#1F3A2A;text-shadow:none}
.tile p{color:#1F3A2A;text-shadow:none}
.tile .btn.l{background:#1F3A2A;color:#fff;border-color:#1F3A2A}
.tile .btn.l:hover{background:#14291d;border-color:#14291d}

/* product cards: photo fully visible on top, black writing on a white panel underneath */
.tile{display:flex;flex-direction:column;align-items:stretch;min-height:0;background:#fff;color:#13201f;isolation:auto}
.tile.xl{min-height:0}
.tile::after{display:none}
.tile>img{position:static;inset:auto;z-index:auto;width:100%;height:auto;aspect-ratio:auto;object-fit:cover;display:block}
.tile>img.noimg{min-height:200px}
.tile .tb{background:#fff;padding:22px 24px 26px;width:100%;flex:1;display:flex;flex-direction:column;align-items:flex-start}
.tile h3{color:#0D1D20;text-shadow:none}
.tile p{color:#13201f;text-shadow:none;flex:1}
.tile .btn.l{background:#0D1D20;color:#fff;border-color:#0D1D20}
.tile .btn.l:hover{background:#000;border-color:#000}

/* product cards: black writing on the photo, over a soft light fade so the picture stays visible */
.tile{display:flex;flex-direction:row;align-items:flex-end;min-height:340px;background:#0D1D20;isolation:isolate;color:#0D1D20}
.tile.xl{min-height:440px}
.tile>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;display:block}
.tile>img.noimg{min-height:0}
.tile::after{display:block;content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.7) 64%,rgba(255,255,255,.92) 100%)}
.tile .tb{background:transparent;padding:24px 26px 26px;width:100%;flex:none;display:block}
.tile h3{color:#0D1D20;text-shadow:none}
.tile p{color:#0D1D20;text-shadow:none;font-weight:500}
.tile .btn.l{background:#0D1D20;color:#fff;border-color:#0D1D20}
.tile .btn.l:hover{background:#000;border-color:#000}

/* product cards: white writing on a dark translucent band over the photo, readable on any picture */
.tile::after{display:none}
.tile .tb{background:rgba(13,29,32,.8);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:22px 26px 24px}
.tile h3{color:#fff;text-shadow:none}
.tile p{color:#fff;text-shadow:none;font-weight:400}
.tile .btn.l{background:#F6B26B;color:#13201f;border-color:#F6B26B}
.tile .btn.l:hover{background:#EFA254;border-color:#EFA254}

/* product cards: no band; white bold writing with a strong outline shadow straight on the photo */
.tile{min-height:380px}
.tile.xl{min-height:480px}
.tile::after{display:block;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.42) 100%)}
.tile .tb{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding:22px 26px 26px}
.tile h3{color:#fff;font-weight:700;text-shadow:0 0 3px #000,0 1px 4px #000,0 2px 12px rgba(0,0,0,.9)}
.tile p{color:#fff;font-weight:600;text-shadow:0 0 3px #000,0 1px 4px #000,0 2px 10px rgba(0,0,0,.9)}