/* Agro Krusha · direction "C · Call-outs": one real jar, annotated like a trade flyer.
   Shared by /de/ /en/ /sq/. Tokens are recorded in DESIGN.md. */

/* Self-hosted subsets (latin, latin-ext) of Google Fonts' Bricolage Grotesque 800 and Alegreya Sans 400/700, OFL. */
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/AlegreyaSans-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/AlegreyaSans-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/AlegreyaSans-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/AlegreyaSans-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/BricolageGrotesque-800-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/BricolageGrotesque-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --yellow:#f6d44a; --red:#c0201a; --red-ink:#b3140f; --white:#fff; --ink:#14301c;
  --ink-soft:#3b5a43;        /* secondary text on white/yellow, tinted from ink */
  --white-soft:#ffe9a8;      /* secondary text on red/green, tinted from yellow */
  --display:"Bricolage Grotesque",sans-serif; --body:"Alegreya Sans",sans-serif;
  --ease:cubic-bezier(.2,.9,.2,1);
  --gutter:clamp(1rem,4vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--yellow);color:var(--ink);font:400 1.125rem/1.5 var(--body);
  scrollbar-color:var(--ink) var(--yellow)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,address{margin:0;padding:0}
ul,ol{list-style:none}
address{font-style:normal}
h1,h2{text-wrap:balance}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:2px}
h1,h2,h3,.btn,.note b,.proof b,.chip{font-family:var(--display);font-weight:800;letter-spacing:-.025em}
::selection{background:var(--ink);color:var(--yellow)}
.red ::selection,.green ::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:.2rem}

.wrap{max-width:74rem;margin-inline:auto;padding-inline:var(--gutter)}
.jar{filter:drop-shadow(0 18px 14px rgba(20,48,28,.28))}

.skip{position:absolute;left:1rem;top:-4rem;background:var(--ink);color:var(--white);padding:.6rem 1rem;border-radius:999px;z-index:10;text-decoration:none}
.skip:focus{top:1rem}

/* ---- header ---- */
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem;padding-block:.9rem;font-weight:700}
.top img{width:4.6rem}
.top nav{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.3rem;margin-left:auto}
.top nav a{text-decoration:none}
.top nav a:hover{text-decoration:underline;text-decoration-thickness:3px}
.lang{display:flex;gap:.15rem;margin-left:.4rem}
.lang a{padding:.15rem .55rem;border-radius:999px;font-family:var(--display);font-size:.9rem;letter-spacing:0}
.lang a[aria-current]{background:var(--ink);color:var(--yellow)}
@media (max-width:40rem){.top nav>a{display:none}.lang{margin-left:0}}

/* ---- hero ---- */
.hero{display:grid;gap:2rem;padding-block:clamp(1rem,3vw,2.5rem) clamp(2.5rem,6vw,5rem);align-items:center}
@media (min-width:62rem){.hero{grid-template-columns:minmax(0,1.25fr) auto minmax(0,.85fr);gap:1.5rem}}
h1{font-size:clamp(2.9rem,6.3vw,5.6rem);line-height:.92}
h1 em{font-style:normal;color:var(--red-ink)}
.hero .lede{max-width:33rem;margin-top:1.3rem}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem;align-items:center}
.btn{display:inline-block;text-decoration:none;font-size:1.05rem;letter-spacing:-.01em;padding:.85rem 1.3rem;border-radius:999px;
  background:var(--ink);color:var(--white);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn.alt{background:var(--white);color:var(--ink)}
.btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 10px 14px -6px rgba(20,48,28,.45)}
.btn:active{transform:translateY(0)}

.pinned{position:relative;width:min(19rem,66vw);margin-inline:auto}
@media (min-width:62rem){.pinned{width:auto;height:min(70vh,40rem);aspect-ratio:900/1507}.pinned .jar{height:100%;width:auto}}
.pin{position:absolute;width:2rem;height:2rem;margin:-1rem 0 0 -1rem;border-radius:50%;background:var(--red-ink);color:var(--white);
  border:3px solid var(--white);display:grid;place-items:center;font:800 .95rem var(--display);box-shadow:0 3px 6px rgba(0,0,0,.35)}
.notes{display:grid;gap:.9rem;counter-reset:n}
.note{display:grid;grid-template-columns:2rem 1fr;gap:.7rem;align-items:start;background:var(--white);padding:.7rem .9rem;border-radius:.6rem;
  box-shadow:0 6px 10px -6px rgba(20,48,28,.35)}
.note:nth-child(odd){transform:rotate(-.6deg)}
.note:nth-child(even){transform:rotate(.5deg)}
.note::before{counter-increment:n;content:counter(n);width:2rem;height:2rem;border-radius:50%;background:var(--red-ink);color:var(--white);
  display:grid;place-items:center;font:800 .95rem var(--display)}
.note b{display:block;font-size:1.1rem;line-height:1.15}
.note span{font-size:1rem;color:var(--ink-soft)}
/* the one authored moment: the sticker notes settle onto the sheet, from a visible start */
@media (prefers-reduced-motion:no-preference){
  .note{animation:settle .7s var(--ease) both}
  .note:nth-child(2){animation-delay:.08s}.note:nth-child(3){animation-delay:.16s}.note:nth-child(4){animation-delay:.24s}.note:nth-child(5){animation-delay:.32s}
  @keyframes settle{from{translate:0 .8rem;scale:1.03;box-shadow:0 18px 20px -10px rgba(20,48,28,.45)}}
}

/* ---- proof strip ---- */
.proof{background:var(--white)}
.proof ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1rem 1.5rem;padding-block:1.6rem}
.proof b{display:block;font-size:1.35rem;line-height:1.1;letter-spacing:-.02em}
.proof li{color:var(--ink-soft)}

/* ---- sections ---- */
section{padding-block:clamp(3rem,8vw,6rem)}
h2{font-size:clamp(2.1rem,4.8vw,3.8rem);line-height:.98;max-width:18ch}
h2+p{max-width:65ch;margin-top:1rem}
.red{background:var(--red);color:var(--white);scrollbar-color:var(--white) transparent}
.white{background:var(--white)}
.green{background:var(--ink);color:var(--white)}
.green h2{color:var(--yellow)}
.green p{max-width:66ch;margin-top:1.2rem}

/* ---- products: seven jars shoulder to shoulder ---- */
.crowd{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(8.6rem,1fr);margin:2.5rem calc(-1 * var(--gutter)) 0;padding:1rem var(--gutter) 1.5rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain}
.crowd::-webkit-scrollbar{height:.5rem}
.crowd::-webkit-scrollbar-thumb{background:var(--white);border-radius:999px}
.crowd li{scroll-snap-align:start;padding-inline:.4rem}
.crowd a{display:block;text-decoration:none;transition:transform .3s var(--ease)}
.crowd a:hover,.crowd a:focus-visible{transform:translateY(-.8rem)}
.crowd a:focus-visible{outline-color:var(--white)}
.crowd .jar{width:118%;max-width:none;margin-left:-9%;aspect-ratio:9/16;object-fit:contain;object-position:bottom}
.tag{background:var(--white);color:var(--ink);border-radius:.5rem;padding:.6rem .7rem;margin-top:-1.2rem;position:relative;transform:rotate(-1.2deg)}
.crowd li:nth-child(even) .tag{transform:rotate(1deg)}
.tag h3{font-size:1.15rem;line-height:1.1}
.tag p{font-size:.95rem;line-height:1.35;margin-top:.3rem;color:var(--ink-soft)}
.chip{display:inline-block;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;background:var(--yellow);color:var(--ink);border-radius:999px;padding:.1rem .6rem;margin-top:.3rem}
.chip.hot{background:var(--red-ink);color:var(--white)}
.after{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* ---- why: ruled statement rows ---- */
.why{margin-top:2rem}
.why li{display:grid;gap:.3rem 2rem;padding:1.3rem 0;border-top:3px solid var(--ink)}
@media (min-width:48rem){.why li{grid-template-columns:1fr 1.2fr;align-items:baseline}}
.why h3{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.05}
.why p{max-width:34rem}

/* ---- inquiry + company details ---- */
.ask address{margin-top:2.5rem;font-size:1rem;color:var(--ink-soft);line-height:1.6}
.ask address a{color:var(--ink)}