/* ==========================================================================
   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 */
  /* Europ Foods distributes rather than produces, so it gets the one
     non-food colour on the site — taken from their own logo. */
  --c-europfoods: #27488F;  /* Europ Foods blue */

  /* 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; }
}


/* Europ Foods distributes rather than produces — a small gap sets it apart
   from the six makers above it without needing a second heading. */
.linecard__row--distributor{
  margin-top:.85rem;
  border-top:1px solid var(--rule);
}


/* The route band: Europ Foods is the distributor, so it gets its own
   full-width moment rather than a card competing with the six makers. */
.route{ align-items:center; }
.route h2{ color:var(--c-europfoods); }
.route__shot img{
  border-radius:3px;
  border-left:4px solid var(--c-europfoods);
}
.route .btn{ border-color:var(--c-europfoods); color:var(--c-europfoods); }
.route .btn:hover{ background:var(--c-europfoods); color:var(--paper); }
@media (min-width:760px){
  .route{ grid-template-columns:1.05fr 1fr; }
}


/* The slogan leads the hero; the positioning line sits above it as a label.
   Capped so the two halves of the slogan sit on two lines, not three. */
.hero__eyebrow{ margin-bottom:1.5rem; }
.hero h1{ max-width:none; font-size:clamp(2.1rem, 1.1rem + 3.6vw, 4.2rem); }

/* "Six houses. One route south." now labels the line card. */
.linecard__head{
  font-size:clamp(1.1rem, .95rem + .6vw, 1.4rem);
  font-weight:600;
  letter-spacing:-.01em;
  margin:clamp(3rem,7vw,5rem) 0 -1.75rem;
  color:var(--muted);
}
.linecard__head + .linecard{ margin-top:2.5rem; }

.footer__slogan{
  margin-top:1rem;
  font-family:"Fraunces", serif;
  font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 30;
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
}


/* ---------- Line card with photographs --------------------------------- */
/* A chef recognises a product faster than a brand name, so the list leads
   with the picture. The partner colour moves to a rule on the thumbnail. */

.linecard__thumb{
  width:clamp(64px, 6.5vw, 96px);
  aspect-ratio:1;
  object-fit:cover;
  border-radius:3px;
  border-left:3px solid var(--row);
  align-self:center;
  transition:transform .25s ease;
}
.linecard__row:hover .linecard__thumb{ transform:scale(1.06); }

/* Rows are taller now, so they need a little less vertical padding. */
.linecard__row{ padding-block:clamp(.7rem,1.5vw,1rem); }

@media (max-width:620px){
  .linecard__thumb{ width:64px; }
  .linecard__row{ align-items:center; }
  .linecard__what{ padding-bottom:.15rem; }
}


/* Europ Foods supplies its own logo — used where the brand needs to be
   recognised rather than described. */
.ph__logo{ width:150px; height:auto; margin-bottom:1.25rem; }
.route__logo{ width:132px; height:auto; margin-bottom:1rem; }


/* ---------- Partner page header --------------------------------------- */
/* The brand name is what a chef needs to remember, so it is the headline.
   The product line sits under it, large but clearly secondary. */

.ph__name{
  max-width:none;
  font-size:clamp(2.4rem, 1.3rem + 4.2vw, 4.6rem);
}
.ph__tagline{
  font-family:"Fraunces", ui-serif, Georgia, serif;
  font-weight:400;
  font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 40;
  font-size:clamp(1.25rem, 1rem + 1.1vw, 2rem);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--accent);
  margin:.7rem 0 0;
  max-width:24ch;
}
.ph .lede{ margin-top:1.5rem; }

/* Full-width photograph directly under the page header. Portrait and
   landscape sources both crop to the same band. */
.ph__band{ padding-bottom:clamp(1rem,3vw,2rem); }
.ph__figure{ margin:0; }
.ph__figure img{
  width:100%;
  max-height:min(62vh, 520px);
  object-fit:cover;
  object-position:center 45%;
  border-radius:3px;
}


/* ---------- Partner page, revised ------------------------------------- */
/* Every partner page must look identical in structure, so the two photo
   slots are locked to fixed ratios rather than following each source
   image's own shape. */

.ph{ padding-block:clamp(2rem,5vw,3.5rem) 0; }
.ph .lede{ margin-top:1.25rem; max-width:50ch; }
.ph__tagline{ margin-top:.5rem; }
.ph__rule{ margin-top:clamp(1.5rem,3vw,2.25rem); }

/* Slot 1 — the banner. Same shape on all seven pages. */
.ph__band{ padding-block:clamp(1.25rem,3vw,2rem) 0; }
.ph__figure img{
  width:100%;
  aspect-ratio:16/7;
  max-height:none;
  object-fit:cover;
  object-position:center 45%;
  border-radius:3px;
}
@media (max-width:700px){
  .ph__figure img{ aspect-ratio:3/2; }
}

/* Slot 2 — beside the story. Also identical everywhere. */
.split .figure img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:center 45%;
  border-radius:3px;
}
.split .figure{ position:sticky; top:96px; }
@media (max-width:759px){
  .split .figure{ position:static; }
}

/* Text column slightly wider than the photo column, so the story leads. */
@media (min-width:760px){
  .section .split{ grid-template-columns:1.15fr 1fr; }
  .section .panel.split{ grid-template-columns:1fr 1fr; }
  .site-footer .split{ grid-template-columns:1.4fr 1fr 1fr 1.1fr; }
  .route{ grid-template-columns:1.05fr 1fr; }
}


/* Partner-supplied logo sits with the link to that partner's own site. */
.panel__source{
  margin-top:1.5rem;
  display:flex; align-items:center; gap:.9rem;
  color:inherit; opacity:.8;
}
.panel__source img{
  width:86px; height:auto; flex:none;
  background:var(--paper);
  padding:.4rem .5rem;
  border-radius:3px;
}


/* ---------- Picture slots always hold their place --------------------- */
/* If a photo has not been uploaded, the slot shows a tinted block rather
   than collapsing — so a missing file looks like a missing file. */

.split .figure img,
.ph__figure img{
  background:color-mix(in srgb, var(--accent) 14%, var(--card));
  display:block;
}
.split .figure{ min-width:0; }

/* The story split keeps two columns even while an image is loading. */
@media (min-width:760px){
  .section .split{ grid-template-columns:1.15fr 1fr; align-items:start; }
}


/* Partner logo, now standing alone in the panel. */
.panel__source{ margin-top:1.75rem; }
.panel__source img{ width:104px; }

/* ======================================================================== */
/*  Movement and colour                                                     */
/*  The page was correct but inert. These add life without adding noise.    */
/* ======================================================================== */

/* ---------- The seven colours, declared at the top of every page -------- */

.ribbon{
  display:flex;
  height:4px;
  position:sticky; top:0; z-index:60;
}
.ribbon span{
  flex:1;
  background:var(--seg);
  transform-origin:left;
  animation:ribbon-in .7s cubic-bezier(.2,.8,.3,1) backwards;
}
.ribbon span:nth-child(1){ animation-delay:.02s }
.ribbon span:nth-child(2){ animation-delay:.07s }
.ribbon span:nth-child(3){ animation-delay:.12s }
.ribbon span:nth-child(4){ animation-delay:.17s }
.ribbon span:nth-child(5){ animation-delay:.22s }
.ribbon span:nth-child(6){ animation-delay:.27s }
.ribbon span:nth-child(7){ animation-delay:.32s }
@keyframes ribbon-in{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.site-header{ top:4px; }

/* ---------- Hero: text left, product photographs right ----------------- */

.hero__grid{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (min-width:940px){
  .hero__grid{ grid-template-columns:1.08fr .92fr; }
}

.hero__stack{ display:none; }
@media (min-width:940px){
  .hero__stack{
    display:block;
    position:relative;
    /* width must be explicit: the children are all absolutely positioned,
       so the box has no content to size itself from. */
    width:100%;
    aspect-ratio:1;
    max-width:440px;
    margin-inline:auto;
    justify-self:center;
  }
}
.hero__stack-img{
  position:absolute;
  width:62%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:4px;
  box-shadow:0 22px 44px -26px rgba(20,38,30,.65);
  opacity:0;
  transition:transform .9s cubic-bezier(.2,.8,.3,1), opacity .7s ease;
}
.hero__stack-img--a{ top:2%;  left:0;    rotate:-7deg;  transform:translateY(26px); transition-delay:.30s; }
.hero__stack-img--b{ top:27%; right:2%;  rotate:5deg;   transform:translateY(26px); transition-delay:.42s; z-index:2; }
.hero__stack-img--c{ bottom:1%; left:14%; rotate:-2deg;  transform:translateY(26px); transition-delay:.54s; }
.is-loaded .hero__stack-img{ opacity:1; transform:translateY(0); }

/* A slow drift, so the stack is never quite still. */
@media (min-width:940px){
  .is-loaded .hero__stack-img--a{ animation:drift 11s ease-in-out 1.4s infinite; }
  .is-loaded .hero__stack-img--b{ animation:drift 13s ease-in-out 1.9s infinite reverse; }
  .is-loaded .hero__stack-img--c{ animation:drift 15s ease-in-out 2.4s infinite; }
}
@keyframes drift{
  0%,100%{ translate:0 0 }
  50%    { translate:0 -10px }
}

/* ---------- Hero text arrives in sequence ------------------------------ */

.hero__text > *{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .7s cubic-bezier(.2,.8,.3,1);
}
.is-loaded .hero__text > *{ opacity:1; transform:none; }
.hero__text > *:nth-child(1){ transition-delay:.05s }
.hero__text > *:nth-child(2){ transition-delay:.13s }
.hero__text > *:nth-child(3){ transition-delay:.21s }
.hero__text > *:nth-child(4){ transition-delay:.29s }

/* ---------- Sections rise into view ------------------------------------ */

.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .65s ease, transform .75s cubic-bezier(.2,.8,.3,1);
}
.reveal.is-in{ opacity:1; transform:none; }
.no-reveal .reveal,
.no-reveal .hero__text > *,
.no-reveal .hero__stack-img{ opacity:1 !important; transform:none !important; }

/* ---------- Partner list: colour washes in on hover -------------------- */

.linecard__row::before{ inset:0 -1.25rem; z-index:0; border-radius:4px; }
.linecard__row:hover::before{ opacity:.07; }
.linecard__row > *{ position:relative; z-index:1; }
.linecard__row{ transition:padding-left .3s cubic-bezier(.2,.8,.3,1); }
.linecard__row:hover{ padding-left:.75rem; }
.linecard__name{ transition:color .25s ease; }

/* ---------- The floating preview --------------------------------------- */

.peek{
  position:fixed; top:0; left:0; z-index:80;
  width:300px; height:225px;
  pointer-events:none;
  opacity:0; scale:.94;
  transition:opacity .22s ease, scale .28s cubic-bezier(.2,.8,.3,1);
  will-change:transform;
}
.peek.is-on{ opacity:1; scale:1; }
.peek img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:4px;
  border-left:4px solid var(--peek-accent, var(--ink));
  box-shadow:0 26px 50px -22px rgba(20,38,30,.7);
}

/* ---------- Cards: the photograph moves, the frame does not ------------ */

.card{ overflow:hidden; }
.card__shot{ transition:transform .5s cubic-bezier(.2,.8,.3,1); }
.card:hover .card__shot{ transform:scale(1.05); }
.card__more{ transition:gap .2s ease; }
.card:hover .card__more{ letter-spacing:.01em; }

/* ---------- Buttons get a little more spring --------------------------- */

.btn{ transition:background .2s ease, color .2s ease, transform .18s cubic-bezier(.2,.8,.3,1), border-color .2s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

/* ---------- Respect the setting ---------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .ribbon span{ animation:none; }
  .hero__stack-img{ opacity:1 !important; transform:none !important; animation:none !important; }
  .hero__text > *{ opacity:1 !important; transform:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .linecard__row:hover{ padding-left:0; }
}

/* ======================================================================== */
/*  Performance                                                             */
/* ======================================================================== */

/* Hero photographs as backgrounds inside the desktop media query, so a
   phone never downloads images it was only going to hide. */
@media (min-width:940px){
  .hero__stack-img{
    background-size:cover;
    background-position:center 45%;
    background-repeat:no-repeat;
    background-color:var(--card);
  }
  .hero__stack-img--a{ background-image:url("images/gronn-card.jpg"); }
  .hero__stack-img--b{ background-image:url("images/rizky-card.jpg"); }
  .hero__stack-img--c{ background-image:url("images/altoni-hero.jpg"); background-position:center 40%; }
}

/* Fallback face metrics close to Instrument Sans, so the swap when the
   web font arrives barely moves the text. */
body{
  font-family:"Instrument Sans", ui-sans-serif, system-ui, -apple-system,
              "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ======================================================================== */
/*  Light and dark rhythm                                                   */
/*  A dark band flips the palette tokens rather than restyling components,   */
/*  so every element inside adapts on its own.                              */
/* ======================================================================== */

.section--dark,
.site-footer--dark{
  --ink:   #F1F3EE;          /* text */
  --paper: #14261E;          /* ground */
  --card:  #1E332A;          /* raised surfaces */
  --muted: #9DB0A4;
  --rule:  rgba(241,243,238,.16);
  background:var(--paper);
  color:var(--ink);
}

/* Bands butt straight against each other — no dividing rule needed. */
.section--dark,
.section--dark + .section,
.section--dark + .site-footer{ border-top:0; }

/* Partner colours are chosen for a pale ground, so on dark they are mixed
   toward the light to keep them legible. */
.section--dark .card{
  --row-lit:color-mix(in srgb, var(--row) 62%, #F1F3EE);
  border-top-color:var(--row-lit);
  background:var(--card);
  border-color:rgba(241,243,238,.14);
  border-top-width:3px;
}
.section--dark .card__origin,
.section--dark .card__more{ color:var(--row-lit); }
.section--dark .card:hover{ box-shadow:0 18px 38px -20px rgba(0,0,0,.75); }

/* Buttons invert automatically: --ink is now light, so a solid button is a
   pale button with dark text. */
.section--dark .btn--solid{ background:var(--ink); color:#14261E; }
.section--dark .btn--solid:hover{ background:#fff; border-color:#fff; }

/* The dark producers band no longer needs the old inset panel treatment. */
#producers .split{ align-items:start; }
#producers h2{ max-width:16ch; }

/* Footer: give the dark ground a little breathing room. */
.site-footer--dark{ padding-block:clamp(3rem,6vw,4.5rem) 2.25rem; margin-top:0; }
.site-footer--dark a:hover{ color:#fff; }
.site-footer--dark .footer__slogan{ color:var(--ink); }

/* The colour ribbon reads as the seam between the page and the dark footer. */
.site-footer--dark::before{
  content:"";
  display:block;
  height:3px;
  margin:-3px 0 clamp(3rem,6vw,4.5rem);
  background:linear-gradient(to right,
    var(--c-rizky) 0 14.28%, var(--c-gastronello) 14.28% 28.56%,
    var(--c-maisonie) 28.56% 42.84%, var(--c-altoni) 42.84% 57.12%,
    var(--c-gronn) 57.12% 71.4%, var(--c-olivos) 71.4% 85.68%,
    var(--c-europfoods) 85.68% 100%);
}

/* The page ground is a touch deeper, so the light bands are not stark. */
:root{ --paper:#E7E9E3; }

/* ======================================================================== */
/*  "How working with us goes"                                              */
/*  It was the only section with no headline, no photograph and no colour,   */
/*  so it disappeared. Bigger numerals, a headline, and real weight.         */
/* ======================================================================== */

.how__head{
  display:grid;
  gap:.25rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.how__head h2{ max-width:14ch; }

.steps{
  gap:clamp(1.5rem,3vw,2.75rem);
  counter-reset:step;
}
.step{
  border-top:3px solid var(--ink);
  padding-top:1.25rem;
  position:relative;
}
.step::before{
  counter-increment:step;
  content:counter(step,decimal-leading-zero);
  font-family:"Fraunces", ui-serif, Georgia, serif;
  font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 60;
  font-weight:600;
  font-size:clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem);
  line-height:.95;
  letter-spacing:-.03em;
  color:var(--ink);
  display:block;
  margin-bottom:.65rem;
}
.step h3{
  margin-bottom:.55rem;
  font-size:clamp(1.2rem, 1.05rem + .55vw, 1.5rem);
}
.step p{
  font-size:clamp(.95rem,.92rem + .15vw,1.02rem);
  color:var(--muted);
  max-width:34ch;
}

/* On wide screens the headline sits beside the steps rather than above,
   which stops the section reading as a thin strip of small text. */
@media (min-width:1000px){
  #how > .wrap,
  #how{ display:block; }
  .how__head{ margin-bottom:clamp(2.25rem,4vw,3.25rem); }
  .how__head h2{ max-width:20ch; }
}

/* The three steps take three colours from the ribbon, so the sequence
   reads as a progression rather than three identical grey columns. */
.step:nth-child(1){ --step: var(--c-rizky); }
.step:nth-child(2){ --step: var(--c-altoni); }
.step:nth-child(3){ --step: var(--c-gronn); }
.step{ border-top-color:var(--step, var(--ink)); }
.step::before{ color:var(--step, var(--ink)); }

/* A quiet hover, since the whole page responds to the cursor elsewhere. */
.step{ transition:border-top-width .2s ease; }
.steps:hover .step{ opacity:.55; transition:opacity .3s ease; }
.steps:hover .step:hover{ opacity:1; }