/* ==========================================================================
   EUROFOOD BV — stylesheet
   One file for the whole site. Edit colours in :root below.
   ========================================================================== */

:root{
  /* Shell — kept deliberately quiet so the six partner colours can do the talking */
  --ink:        #14261E;   /* near-black bottle green, all body text */
  --paper:      #E9EBE6;   /* page background, cool mineral grey-green */
  --card:       #F5F6F2;   /* card + panel background */
  --muted:      #5C6B62;   /* secondary text */
  --rule:       rgba(20,38,30,.16);

  /* The six houses. Each colour is pulled from the product itself. */
  --c-rizky:      #A8642A;  /* caramelised crust */
  --c-gastronello:#C4512F;  /* grey shrimp */
  --c-maisonie:   #5A3226;  /* dark chocolate */
  --c-altoni:     #C99414;  /* semolina */
  --c-gronn:      #4C7A2E;  /* chlorophyll */
  --c-olivos:     #7A8A2C;  /* early-harvest olive */

  /* Set per page; falls back to ink */
  --accent: var(--ink);

  --measure: 66ch;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --gap: clamp(1rem, 2.5vw, 1.75rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }

/* ---------- Type ------------------------------------------------------- */

h1,h2,h3{
  font-family:"Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  font-weight:600;
  font-variation-settings:"SOFT" 20, "WONK" 1, "opsz" 40;
  line-height:1.04;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.4rem, 1.4rem + 4.4vw, 5rem); }
h2{ font-size:clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem); }
h3{ font-size:clamp(1.15rem, 1rem + .6vw, 1.45rem); letter-spacing:-.005em; }

p{ margin:0 0 1.1em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

.lede{
  font-size:clamp(1.1rem, 1rem + .55vw, 1.4rem);
  line-height:1.5;
  color:var(--ink);
}

/* Small tracked label — used for section eyebrows and field labels */
.eyebrow{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.25rem;
  display:flex;
  align-items:center;
  gap:.75rem;
}
.eyebrow::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--rule);
}

/* ---------- Layout ----------------------------------------------------- */

.wrap{ width:min(1180px, 100% - (var(--pad) * 2)); margin-inline:auto; }
.section{ padding-block:clamp(3.5rem, 8vw, 7rem); }
.section--tight{ padding-block:clamp(2.5rem, 5vw, 4rem); }
.section + .section{ border-top:1px solid var(--rule); }

.skip{
  position:absolute; left:-9999px;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1rem; z-index:100;
}
.skip:focus{ left:1rem; top:1rem; }

:focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Header ----------------------------------------------------- */

.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:64px;
}

.wordmark{
  font-family:"Fraunces", serif;
  font-weight:600;
  font-variation-settings:"SOFT" 0, "WONK" 0, "opsz" 20;
  font-size:1.02rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}
.wordmark span{
  font-family:"Instrument Sans", sans-serif;
  font-weight:500;
  font-size:.62em;
  letter-spacing:.1em;
  color:var(--muted);
  margin-left:.5em;
  vertical-align:.15em;
}

.nav{ display:flex; align-items:center; gap:clamp(.9rem,2.5vw,1.9rem); }
.nav a{
  text-decoration:none;
  font-size:.875rem;
  font-weight:500;
  padding-block:.35rem;
  border-bottom:1.5px solid transparent;
  transition:border-color .18s ease;
}
.nav a:hover{ border-bottom-color:var(--ink); }
.nav a[aria-current="page"]{ border-bottom-color:var(--accent); }
.nav .nav__cta{
  background:var(--ink); color:var(--paper);
  padding:.5rem .9rem; border-radius:999px; border-bottom:0;
}
.nav .nav__cta:hover{ border-bottom-color:transparent; opacity:.86; }
@media (max-width:560px){
  .nav__hide-sm{ display:none; }
}

/* ---------- Hero: the line card ---------------------------------------- */

.hero{ padding-block:clamp(3rem, 9vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.hero h1{ max-width:15ch; }
.hero .lede{ margin-top:1.6rem; max-width:52ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }

/* The signature element: a broker's line card. Six houses, one column,
   each with its own colour. Doubles as the page index. */
.linecard{
  margin-top:clamp(3rem,7vw,5rem);
  border-top:1px solid var(--rule);
}
.linecard__row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:clamp(.85rem,3vw,2rem);
  padding:clamp(.9rem,2vw,1.35rem) 0;
  border-bottom:1px solid var(--rule);
  text-decoration:none;
  position:relative;
  opacity:0;
  animation:linecard-in .55s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes linecard-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .linecard__row{ opacity:1; animation:none; } }
.linecard__row:nth-child(1){ animation-delay:.05s }
.linecard__row:nth-child(2){ animation-delay:.11s }
.linecard__row:nth-child(3){ animation-delay:.17s }
.linecard__row:nth-child(4){ animation-delay:.23s }
.linecard__row:nth-child(5){ animation-delay:.29s }
.linecard__row:nth-child(6){ animation-delay:.35s }

.linecard__dot{
  width:.7rem; height:.7rem; border-radius:50%;
  background:var(--row);
  align-self:center;
  flex:none;
  transition:transform .25s ease;
}
.linecard__name{
  font-family:"Fraunces", serif;
  font-weight:600;
  font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 40;
  font-size:clamp(1.3rem, .95rem + 1.7vw, 2.35rem);
  line-height:1.1;
  letter-spacing:-.015em;
}
.linecard__what{
  font-size:clamp(.78rem,.72rem + .3vw,.95rem);
  color:var(--muted);
  text-align:right;
  line-height:1.3;
}
.linecard__row::before{
  content:"";
  position:absolute; inset:0 -1rem;
  background:var(--row);
  opacity:0;
  transition:opacity .22s ease;
  z-index:-1;
  border-radius:4px;
}
.linecard__row:hover .linecard__dot{ transform:scale(1.55); }
.linecard__row:hover .linecard__name{ color:var(--row); }
@media (max-width:620px){
  .linecard__row{ grid-template-columns:auto 1fr; row-gap:.15rem; }
  .linecard__what{ grid-column:2; text-align:left; }
}

/* ---------- Buttons ---------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font:inherit; font-size:.9rem; font-weight:600;
  padding:.8rem 1.35rem;
  border-radius:999px;
  text-decoration:none;
  border:1.5px solid var(--ink);
  background:transparent; color:var(--ink);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--accent); border-color:var(--accent); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--wa{ border-color:#25874f; color:#1d6b3e; }
.btn--wa:hover{ background:#25874f; border-color:#25874f; color:#fff; }

/* ---------- Partner grid ----------------------------------------------- */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap:var(--gap);
}
.card{
  background:var(--card);
  border:1px solid var(--rule);
  border-top:3px solid var(--row, var(--ink));
  border-radius:3px;
  padding:clamp(1.25rem,2.5vw,1.75rem);
  display:flex; flex-direction:column; gap:.7rem;
  text-decoration:none;
  transition:transform .22s ease, box-shadow .22s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(20,38,30,.5); }
.card__origin{
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--row, var(--muted));
}
.card p{ font-size:.94rem; color:var(--muted); margin:0; }
.card__more{
  margin-top:auto; padding-top:.6rem;
  font-size:.85rem; font-weight:600; color:var(--row, var(--ink));
}
.card__shot{
  aspect-ratio:4/3; border-radius:2px; margin-bottom:.3rem;
  object-fit:cover; width:100%;
  background:color-mix(in srgb, var(--row, var(--ink)) 12%, var(--card));
}

/* ---------- Steps (a real sequence, so numbered) ----------------------- */

.steps{ counter-reset:step; display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }
.step{ border-top:1px solid var(--rule); padding-top:1.1rem; }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:"Fraunces",serif; font-size:.95rem; font-weight:600;
  color:var(--accent); display:block; margin-bottom:.6rem;
}
.step h3{ margin-bottom:.45rem; }
.step p{ font-size:.94rem; color:var(--muted); }

/* ---------- Panels ----------------------------------------------------- */

.panel{
  background:var(--ink); color:var(--paper);
  border-radius:4px;
  padding:clamp(1.75rem,5vw,3.5rem);
}
.panel h2{ color:var(--paper); }
.panel p{ color:color-mix(in srgb, var(--paper) 78%, transparent); }
.panel .eyebrow{ color:color-mix(in srgb, var(--paper) 62%, transparent); }
.panel .eyebrow::after{ background:color-mix(in srgb, var(--paper) 26%, transparent); }
.panel .btn{ border-color:var(--paper); color:var(--paper); }
.panel .btn:hover{ background:var(--paper); color:var(--ink); }

.split{
  display:grid; gap:clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  align-items:start;
}

/* ---------- Partner page ----------------------------------------------- */

.ph{ padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,2.5rem); }
.ph__back{
  font-size:.82rem; font-weight:600; color:var(--muted);
  text-decoration:none; display:inline-block; margin-bottom:1.75rem;
}
.ph__back:hover{ color:var(--accent); }
.ph__origin{
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.9rem;
}
.ph h1{ max-width:14ch; }
.ph .lede{ margin-top:1.35rem; max-width:54ch; }
.ph__rule{ height:4px; background:var(--accent); margin-top:clamp(2rem,4vw,3rem); border-radius:2px; }

.range{ list-style:none; padding:0; margin:0; display:grid; gap:.1rem;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); }
.range li{ padding:.9rem 0; border-bottom:1px solid var(--rule); font-size:.95rem; }
.range li strong{ display:block; font-weight:600; }
.range li span{ color:var(--muted); font-size:.88rem; }

.figure{ margin:0; }
.figure img{ border-radius:3px; }
.figure figcaption{ font-size:.8rem; color:var(--muted); margin-top:.6rem; }

/* ---------- Form ------------------------------------------------------- */

.form{ display:grid; gap:1.1rem; max-width:38rem; }
.field{ display:grid; gap:.4rem; }
.field label{
  font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.field input, .field textarea, .field select{
  font:inherit; font-size:1rem;
  padding:.75rem .9rem;
  border:1.5px solid var(--rule);
  border-radius:3px;
  background:var(--card);
  color:var(--ink);
  width:100%;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--ink); outline:none;
}
.field textarea{ min-height:9rem; resize:vertical; }
.form__row{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.form__note{ font-size:.82rem; color:var(--muted); max-width:38rem; }
.hp{ position:absolute; left:-9999px; }  /* honeypot */

.contact-list{ list-style:none; padding:0; margin:0; display:grid; gap:1.25rem; }
.contact-list dt, .contact-list .k{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.15rem;
}
.contact-list a{ text-decoration:none; border-bottom:1.5px solid var(--rule); }
.contact-list a:hover{ border-bottom-color:var(--accent); color:var(--accent); }

.notice{
  border-left:3px solid var(--accent);
  background:var(--card);
  padding:1rem 1.15rem;
  border-radius:0 3px 3px 0;
  font-size:.94rem;
}

/* ---------- Long-form legal text --------------------------------------- */

.prose{ max-width:72ch; }
.prose h2{ font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem); margin:2.5rem 0 .85rem; }
.prose h3{ font-size:1.05rem; margin:1.75rem 0 .5rem; }
.prose ul{ padding-left:1.15rem; margin:0 0 1.1em; }
.prose li{ margin-bottom:.35rem; }
.prose .meta{ font-size:.85rem; color:var(--muted); }

/* ---------- Footer ----------------------------------------------------- */

.site-footer{
  border-top:1px solid var(--rule);
  padding-block:clamp(2.5rem,5vw,4rem) 2rem;
  font-size:.88rem;
}
.site-footer .split{ gap:2rem clamp(1.5rem,4vw,3rem); }
.site-footer h4{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .85rem;
}
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.site-footer a{ text-decoration:none; color:var(--muted); }
.site-footer a:hover{ color:var(--ink); }
.site-footer__base{
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.25rem;
  border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-size:.8rem; color:var(--muted);
}


/* ---------- Late corrections ------------------------------------------- */

/* Six cards should read as two rows of three, not four-plus-two. */
@media (min-width:980px){
  .grid{ grid-template-columns:repeat(3, 1fr); }
}

/* When a partner photo is missing, the story column takes the full width
   instead of leaving an empty half. */
.split--solo{ grid-template-columns:1fr; }

/* Product ranges read better in three columns than five. */
@media (min-width:760px){
  .range{ grid-template-columns:repeat(3, 1fr); column-gap:2.5rem; }
}

/* Footer: four columns that actually fit side by side. */
@media (min-width:860px){
  .site-footer .split{ grid-template-columns:1.4fr 1fr 1fr 1.1fr; }
}