/* GENTE ESSENCE company pages (Über uns, Store, Presse): shared design primitives.
   Same tokens as the home page (gente.css): --bg --bg2 --ink --ink2 --foil --warm --line --f-d --f-b --f-m --e1 --e2 --pad --nav-h.
   Logo principle everywhere: a bold word, then a hairline word (<b> and <i> inside headings).
   Page specific rules go into co-ueber.css, co-presse.css, co-store.css. Never inline <style> in a page. */

.co-page{background:var(--bg)}
.co-page main{display:block}
.co-page .wrap{max-width:1320px}
.co-page footer .wrap{max-width:calc(1296px + 2*var(--pad))}
.co-page ::selection{background:var(--warm);color:#14100c}

/* ---------- reveal system (only when JS is on; without JS everything is simply visible) ---------- */
.js [data-rv]{opacity:0;transform:translateY(32px);transition:opacity 1s var(--e1),transform 1.1s var(--e1);transition-delay:var(--d,0s);will-change:opacity,transform}
.js [data-rv].rv-in{opacity:1;transform:none}
.js [data-rv="fade"]{transform:none}
/* wipes clip the CONTENT, not the observed element: an element that is clipped away completely never counts as visible for IntersectionObserver */
.js [data-rv="wipe"],.js [data-rv="wipe-x"]{opacity:1;transform:none}
.js [data-rv="wipe"]>img,.js [data-rv="wipe"]>picture{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--e2);transition-delay:var(--d,0s)}
.js [data-rv="wipe-x"]>img,.js [data-rv="wipe-x"]>picture{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s var(--e2);transition-delay:var(--d,0s)}
.js [data-rv="wipe"].rv-in>img,.js [data-rv="wipe"].rv-in>picture,.js [data-rv="wipe-x"].rv-in>img,.js [data-rv="wipe-x"].rv-in>picture{clip-path:inset(0 0 0 0)}
.js [data-rv="scale"]{transform:scale(.94)}
.js [data-rv="scale"].rv-in{transform:none}
/* line masks: <h1 class="co-title"><span class="ln"><span>TEXT</span></span></h1> */
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block}
.js .ln>span{transform:translateY(112%);transition:transform 1.2s var(--e1);transition-delay:calc(var(--i,0)*.11s + .15s)}
.js .is-in .ln>span,.js .ln.rv-in>span{transform:none}

/* ---------- hero ---------- */
.co-hero{position:relative;isolation:isolate;min-height:100svh;display:grid;align-content:end;overflow:hidden;background:#14100c;color:#F1ECE1;padding:calc(var(--nav-h) + 56px) 0 clamp(44px,7vw,96px);--ink:#F1ECE1;--ink2:rgba(241,236,225,.78);--line:rgba(241,236,225,.28)}
.co-hero__bg{position:absolute;inset:-6% 0 -6% 0;z-index:-2;margin:0;will-change:transform}
.co-hero__bg img,.co-hero__bg video{width:100%;height:100%;object-fit:cover;display:block;animation:co-kb 28s var(--e1) both}
@keyframes co-kb{from{transform:scale(1.12)}to{transform:scale(1.02)}}
.co-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,16,12,.55) 0%,rgba(20,16,12,.05) 22%,rgba(20,16,12,.25) 46%,rgba(20,16,12,.88) 82%,rgba(20,16,12,.97) 100%)}
.co-hero .wrap{width:100%}
.co-eyebrow{font:500 11px/1.4 var(--f-d);letter-spacing:.26em;text-transform:uppercase;color:#F1ECE1;display:block}
.co-title{font:200 clamp(46px,11.2vw,200px)/.9 var(--f-d);text-transform:uppercase;letter-spacing:-.025em;margin:20px 0 0;overflow-wrap:anywhere}
.co-title b{font-weight:800}
.co-title i{font-style:normal;font-weight:200;color:var(--warm)}
.co-title.is-md{font-size:clamp(40px,8.6vw,150px)}
.co-sub{font:300 clamp(20px,2.6vw,40px)/1.2 var(--f-d);letter-spacing:-.015em;color:var(--warm);margin-top:18px}
.co-herotext{max-width:50ch;margin-top:26px;font-size:clamp(17px,1.5vw + 8px,22px);line-height:1.55;color:rgba(241,236,225,.88)}
.co-cue{position:absolute;right:var(--pad);bottom:clamp(28px,4vw,56px);display:none;align-items:center;gap:14px;font:500 10px/1 var(--f-d);letter-spacing:.3em;text-transform:uppercase;color:rgba(241,236,225,.7)}
.co-cue::after{content:"";display:block;width:1px;height:56px;background:linear-gradient(rgba(241,236,225,.8),rgba(241,236,225,0));transform-origin:top;animation:co-cue 2.4s var(--e2) 2 forwards}
@keyframes co-cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (min-width:900px){.co-cue{display:flex;writing-mode:vertical-rl}}

/* hero variant for photos with the product in the middle: title in the sky zone, one slim line below the product */
.co-hero.is-split{display:flex;flex-direction:column;padding-bottom:clamp(22px,2.6vw,36px)}
.co-hero.is-split>.wrap{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,8vh,96px)}
.co-title.is-line{display:flex;flex-wrap:wrap;column-gap:.24em;font-size:clamp(46px,8.6vw,150px);margin-top:14px}
.co-hero__bot{display:grid;gap:12px 48px;align-items:end}
/* short laptops (1366x650): the hero grows with the width instead of squeezing title, product and sign into one screen */
@media (min-width:761px){.co-hero{min-height:max(100svh,min(56vw,820px))}}
@media (max-width:760px) and (max-height:600px){.co-hero.is-split .co-hero__bot{gap:6px}.co-hero__bot .co-herotext{font-size:15px}}
.co-hero__bot .co-sub,.co-hero__bot .co-herotext{margin:0}
@media (min-width:900px){.co-hero__bot{grid-template-columns:auto minmax(0,62ch);justify-content:space-between}.co-hero__bot .co-herotext{font-size:clamp(15px,1.1vw + 6px,19px);line-height:1.5}}
@media (max-width:760px){.co-title.is-line{font-size:clamp(50px,16.5vw,92px)}}

/* ---------- sections ---------- */
.co-sec{position:relative;padding:clamp(84px,12vw,176px) 0;overflow:hidden;overflow:clip}  /* clip, not hidden: hidden would break position:sticky inside the section */
.co-sec.is-tint{background:var(--bg2)}
.co-sec.is-dark{background:#14100c;color:#F1ECE1;--ink:#F1ECE1;--ink2:rgba(241,236,225,.74);--line:rgba(241,236,225,.22);--foil:#C9A25B}
.co-sec.is-night{background:#1B0E13;color:#F3E7E2;--ink:#F3E7E2;--ink2:#C7B0AA;--line:rgba(243,231,226,.26);--foil:#C9A25B}
.co-sec>.wrap{position:relative;z-index:1}
.co-num{position:absolute;right:var(--pad);top:clamp(28px,5vw,72px);font:200 clamp(96px,17vw,260px)/.8 var(--f-d);color:color-mix(in srgb,var(--ink) 7%,transparent);pointer-events:none;user-select:none;z-index:0;letter-spacing:-.04em}
.co-k{font:500 11px/1.4 var(--f-d);letter-spacing:.26em;text-transform:uppercase;color:var(--ink2);display:flex;align-items:center;gap:14px}
.co-k::before{content:"";width:34px;height:1px;background:var(--foil)}
.co-h2{font:200 clamp(36px,6.2vw,96px)/.98 var(--f-d);letter-spacing:-.018em;margin:20px 0 0;text-wrap:balance}
.co-h2 b{font-weight:700}
.co-h2[id]{scroll-margin-top:calc(var(--nav-h,64px) + 80px)}
.co-h2 i{font-style:normal;font-weight:200;color:var(--foil)}
.co-h3{font:600 clamp(24px,2.6vw,38px)/1.08 var(--f-d);letter-spacing:-.02em}
.co-lead{font:300 clamp(19px,1.7vw,26px)/1.5 var(--f-b);color:var(--ink);max-width:56ch;margin:0 0 1.1em;text-wrap:pretty}
.co-p{font-size:clamp(16px,1.1vw + 3px,19px);line-height:1.7;color:var(--ink2);max-width:62ch;margin:0 0 1.1em;text-wrap:pretty}
.co-p a,.co-lead a{color:var(--ink);text-underline-offset:4px}
.co-split{display:grid;gap:clamp(32px,6vw,104px);grid-template-columns:1fr;align-items:start;margin-top:clamp(40px,6vw,88px)}
@media (min-width:900px){.co-split{grid-template-columns:5fr 7fr}.co-split.is-r{grid-template-columns:7fr 5fr}.co-split.is-eq{grid-template-columns:1fr 1fr}}
.co-sticky{position:sticky;top:calc(var(--nav-h) + 32px)}
@media (max-width:899px){.co-sticky{position:static}}
.co-fig{margin:0;position:relative;overflow:hidden;background:var(--bg2)}
.co-fig img{width:100%;height:100%;object-fit:cover;display:block}
.co-fig.r45{aspect-ratio:4/5}.co-fig.r54{aspect-ratio:5/4}.co-fig.r169{aspect-ratio:16/9}.co-fig.r1610{aspect-ratio:16/10}.co-fig.r11{aspect-ratio:1/1}
.co-fig[data-par] img{height:118%;margin-top:-9%}
.co-cap{font:500 10px/1.5 var(--f-d);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);margin-top:14px}
.co-rule{height:1px;background:var(--line);border:0;margin:0}
.co-link{font:500 11px/1 var(--f-d);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding:6px 0;display:inline-block;transition:color .3s var(--e1)}
.co-link:hover{color:var(--foil)}
.co-row{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;margin-top:clamp(28px,4vw,48px)}
.co-sec.is-dark .btn:not(.ghost),.co-sec.is-night .btn:not(.ghost),.co-hero .btn:not(.ghost){background:#F4EEE2;color:#2B2820}
@media (hover:hover){.co-sec.is-dark .btn:not(.ghost):hover,.co-sec.is-night .btn:not(.ghost):hover,.co-hero .btn:not(.ghost):hover{background:#fff;box-shadow:inset 0 0 0 1px var(--warm)}}
.co-hero .btn.ghost,.co-sec.is-dark .btn.ghost,.co-sec.is-night .btn.ghost{color:#F1ECE1}

/* ---------- manifesto: words light up while you scroll (co.js splits .co-scrub into words) ---------- */
.co-scrub{font:200 clamp(30px,5.2vw,82px)/1.08 var(--f-d);letter-spacing:-.02em;max-width:24ch;text-wrap:balance}
.co-scrub b{font-weight:700}
.co-scrub .w{opacity:.16;transition:opacity .35s linear}
.co-scrub .w.on{opacity:1}
.no-motion .co-scrub .w,.co-scrub.is-static .w{opacity:1}

/* ---------- marquee ---------- */
.co-marq{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;white-space:nowrap}
.co-marq__t{display:inline-flex;gap:0;animation:co-marq 46s linear infinite;will-change:transform}
.co-marq span{font:500 12px/1 var(--f-d);letter-spacing:.3em;text-transform:uppercase;padding:0 28px;color:var(--ink2);display:inline-flex;align-items:center;gap:56px}
.co-marq span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--foil)}
@keyframes co-marq{to{transform:translateX(-50%)}}

/* ---------- stats ---------- */
.co-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px)}
.co-stat{padding:26px 20px 26px 0;border-bottom:1px solid var(--line)}
.co-stat b{display:block;font:200 clamp(44px,7vw,112px)/1 var(--f-d);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.co-stat span{display:block;margin-top:10px;font:500 10px/1.5 var(--f-d);letter-spacing:.22em;text-transform:uppercase;color:var(--ink2)}
@media (min-width:900px){.co-stats{grid-template-columns:repeat(4,1fr)}.co-stat{border-bottom:0;padding-right:28px}.co-stat+.co-stat{border-left:1px solid var(--line);padding-left:28px}}

/* ---------- pinned horizontal track (desktop), plain vertical stack on phones ----------
   <div class="co-h" data-h="N"><div class="co-h__stick"><div class="co-h__track"><article class="co-h__i">…</article>…</div></div></div> */
.co-h{position:relative}
.co-h__track{display:grid;gap:clamp(20px,3vw,40px)}
@media (min-width:900px){
  .js .co-h{height:calc(var(--hn,4)*72vh + 100vh)}
  .js .co-h__stick{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
  .js .co-h__track{display:flex;gap:clamp(24px,3vw,48px);padding:0 var(--pad);will-change:transform;transform:translate3d(var(--tx,0px),0,0)}
  .js .co-h__i{flex:0 0 min(46vw,640px)}
}
.co-h__prog{display:none}
@media (min-width:900px){.js .co-h__prog{display:block;position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(28px,5vh,56px);height:1px;background:var(--line)}.js .co-h__prog i{display:block;height:1px;background:var(--foil);transform-origin:left;transform:scaleX(var(--p,0))}}

/* ---------- call to action band ---------- */
.co-cta{text-align:center}
.co-cta .co-h2{margin-inline:auto;max-width:16ch}
.co-cta .co-p{margin-inline:auto}
.co-cta .co-row{justify-content:center}

/* ---------- reduced motion: show final states, no loops ---------- */
@media (prefers-reduced-motion:reduce){
  .js [data-rv],.js [data-rv="wipe"],.js [data-rv="wipe-x"],.js .ln>span,.js [data-rv="wipe"]>img,.js [data-rv="wipe"]>picture,.js [data-rv="wipe-x"]>img,.js [data-rv="wipe-x"]>picture{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .co-hero__bg img,.co-hero__bg video,.co-marq__t,.co-cue::after{animation:none!important}
  .co-scrub .w{opacity:1!important}
  .js .co-h{height:auto}.js .co-h__stick{position:static;height:auto;overflow:visible}.js .co-h__track{display:grid;transform:none;padding:0}.js .co-h__i{flex:none}.js .co-h__prog{display:none}
}

/* ---------- review fixes ---------- */
/* gold on sand/tint is too pale for text: darker bronze on light sections, small text darker still (AA) */
.co-sec:not(.is-dark):not(.is-night){--foil:#8C6D2C;--foil-s:#6F5520}
.co-link{padding:15px 0 13px;min-height:44px;display:inline-flex;align-items:center;border-bottom:0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 12px)/100% 1px no-repeat}
.co-cap{font-size:11px;line-height:1.6}
.co-hero .co-eyebrow{text-shadow:0 1px 14px rgba(0,0,0,.65)}
@media (max-width:380px){.co-eyebrow{letter-spacing:.16em}}
.co-page footer{border-top:1px solid rgba(241,236,225,.14)}
.js .co-fig[data-rv^="wipe"]:not(.rv-in){background:transparent}
/* tablets: the long intro line would run over the bottles, the sub line alone is enough */
@media (min-width:761px) and (max-width:1099px){.co-hero.is-split .co-herotext{display:none}.co-hero.is-split .co-hero__bot{grid-template-columns:1fr}}

.co-sec.is-dark :focus-visible,.co-sec.is-night :focus-visible,.co-hero :focus-visible{outline-color:#F3E7E2}

@supports not (color:color-mix(in srgb,red,blue)){.co-num{color:var(--ink);opacity:.07}}