/* ==========================================================================
   FLORA2DAY — merklaag op ofg-base.css (v1.1). Concept: "Fris exportplatform".
   Wit + mint, bladvorm uit het logo (asymmetrische radius), Sora-koppen, Figtree-tekst.
   Merkkleuren exact uit brand/logo.svg: #008D36 (FLORA) en #006633 (2DAY). Afgeleide tinten AA-veilig (zie STYLE.md §2).
   ========================================================================== */
@font-face{font-family:"Sora";src:url(/assets/sora-latin-wght.de6a428666.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(/assets/figtree-latin-wght.4ba7d3d096.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
:root{
  /* merk */
  --f2-green:#008D36;--f2-green-dark:#006633;
  /* afgeleid */
  --f2-green-700:#007A2F;--f2-green-900:#00401F;--f2-ink:#0E1A13;--f2-muted:#46524B;--f2-field:#7A857E;
  --f2-mint:#7FE0A0;--f2-mint-200:#C8F0D4;--f2-mint-100:#E9F6EE;--f2-mint-50:#F2FAF5;--f2-line:#DCE8E0;--f2-on-dark:#D6F5E0;--f2-white:#FFFFFF;
  /* semantisch (contract met ofg-base) */
  --c-bg:var(--f2-white);--c-ink:var(--f2-ink);--c-heading:var(--f2-ink);--c-muted:var(--f2-muted);
  --c-link:var(--f2-green-700);--c-link-hover:var(--f2-green-900);--c-eyebrow:var(--f2-green-700);--c-accent:var(--f2-green);
  --c-tint:var(--f2-mint-100);--c-line:var(--f2-line);--c-field:var(--f2-field);
  --c-btn-bg:var(--f2-green-dark);--c-btn-text:#fff;--c-btn-bg-hover:var(--f2-green-900);--c-btn-text-hover:#fff;
  --c-focus:var(--f2-green-900);--c-focus-on-dark:var(--f2-mint);
  --c-header-bg:var(--f2-white);--c-topbar-bg:var(--f2-green-900);--c-topbar-text:var(--f2-on-dark);
  --c-footer-bg:var(--f2-green-900);--c-on-dark:var(--f2-on-dark);--c-on-dark-accent:var(--f2-mint);--c-card-bg:var(--f2-mint-50);
  --c-ph-bg:#FFF1C7;--c-ph-text:#6B4500;--c-ph-border:#B7791F;
  --font-display:"Sora",system-ui,sans-serif;--font-body:"Figtree",system-ui,sans-serif;
  --radius-btn:var(--radius-pill);--logo-h:2.75rem;
  --leaf:2.75rem .5rem;           /* bladvorm: groot linksboven/rechtsonder, klein andersom */
  --leaf-s:1.5rem .375rem;
}
h1,h2,h3{font-weight:700;letter-spacing:-.03em}
h1{font-weight:700}
.eyebrow{display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:.75em;height:.75em;border-radius:.6em .1em;background:var(--f2-green);flex:none}
.on-dark .eyebrow{color:var(--f2-mint)}.on-dark .eyebrow::before{background:var(--f2-mint)}
@media (min-width:64em){.site-nav a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--f2-green)}}
.site-header__bar{min-height:4.75rem}
.topbar .container{min-height:2.75rem}
.topbar__ofg::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.55em;border-radius:.5em .1em;background:var(--f2-mint)}
/* hero */
.hero{position:relative;overflow:hidden;background:var(--f2-mint-50);padding-block:var(--s-8) var(--section)}
.hero::after{content:"";position:absolute;right:-12rem;top:-10rem;width:32rem;height:32rem;border-radius:50%;border:3.5rem solid var(--f2-mint-200);opacity:.7;pointer-events:none} /* boog uit het logo */
.hero__grid{position:relative;z-index:1;display:grid;gap:var(--s-7);align-items:center}
@media (min-width:56em){.hero__grid{grid-template-columns:1.05fr 1fr;gap:var(--s-9)}}
.hero h1{font-size:var(--fs-display);line-height:1.02;letter-spacing:-.04em;margin-bottom:var(--s-5)}
.hero h1 em{font-style:normal;color:var(--f2-green-dark);background:linear-gradient(transparent 70%,var(--f2-mint-200) 70%)}
.hero .lead{max-width:36rem;margin-bottom:var(--s-6)}
.hero__visual{position:relative}
.hero__media{border-radius:var(--leaf);overflow:hidden;aspect-ratio:4/3;background:var(--f2-mint-200)}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero__media picture{display:block;height:100%}
/* consolidatie-kaart: 4 inkopers → 1 assortiment */
.flow{position:relative;margin:calc(-1*var(--s-8)) var(--s-4) 0;padding:var(--s-5);border-radius:var(--leaf-s);background:#fff;box-shadow:var(--shadow);display:grid;gap:var(--s-3)}
@media (min-width:56em){.flow{position:absolute;left:calc(-1*var(--s-8));bottom:calc(-1*var(--s-7));margin:0;width:min(22rem,80%)}}
.flow__label{margin:0;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--f2-muted)}
.flow__chips{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;margin:0;padding:0}
.flow__chips li{padding:.3em .8em;border-radius:var(--radius-pill);background:var(--f2-mint-100);border:1px solid var(--f2-line);font-weight:700;font-size:var(--fs-small)}
.flow__out{display:flex;align-items:center;gap:.6em;margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--f2-green-dark)}
.flow__out svg{width:1.5rem;height:1.5rem;flex:none}
/* stappen (route) */
.section-head{display:grid;gap:var(--s-4);margin-bottom:var(--s-8)}
@media (min-width:56em){.section-head{grid-template-columns:1fr 1fr;align-items:end}}
.section-head h2,.section-head p{margin:0}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4);counter-reset:s}
@media (min-width:40em){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64em){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{position:relative;padding:var(--s-6) var(--s-5) var(--s-5);border-radius:var(--leaf-s);background:var(--f2-mint-50);border:1px solid var(--f2-line);counter-increment:s}
.step::before{content:"0" counter(s);display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin-bottom:var(--s-4);border-radius:1.4rem .3rem;background:var(--f2-green-dark);color:#fff;font-family:var(--font-display);font-weight:700}
.step h3{margin-bottom:var(--s-2)}.step p{margin:0;color:var(--f2-muted)}
/* bestel-opties */
.options{display:grid;gap:var(--s-5)}
@media (min-width:48em){.options{grid-template-columns:repeat(2,minmax(0,1fr))}}
.option{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-7) var(--s-6);border-radius:var(--leaf);border:2px solid var(--f2-line);background:#fff}
.option--dark{background:var(--f2-green-900);border-color:var(--f2-green-900);color:var(--f2-on-dark)}
.option--dark h3{color:#fff}
.option h3{font-size:var(--fs-h2);margin:0}.option p{margin:0}
.option .btn-row{margin-top:auto;padding-top:var(--s-4)}
.tags{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;margin:0;padding:0}
.tags li{padding:.25em .8em;border-radius:var(--radius-pill);background:var(--f2-mint-100);color:var(--f2-green-900);font-weight:700;font-size:var(--fs-small)}
.option--dark .tags li{background:rgb(255 255 255 / .1);color:var(--f2-on-dark)}
.on-dark .btn--primary{background:var(--f2-mint);color:var(--f2-green-900)}.on-dark .btn--primary:hover{background:#fff;color:var(--f2-green-900)}
/* foto-mozaïek */
.mosaic{display:grid;gap:var(--s-4);grid-template-columns:repeat(2,minmax(0,1fr))}
.mosaic .media{border-radius:var(--leaf-s);aspect-ratio:1}
.mosaic .media:first-child{grid-column:1/-1;aspect-ratio:3/2;border-radius:var(--leaf)}
@media (min-width:56em){.mosaic{grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr}.mosaic .media:first-child{grid-column:auto;grid-row:1/3;aspect-ratio:auto}.mosaic .media{aspect-ratio:4/3}}
.checks{list-style:none;padding:0;margin:var(--s-5) 0 var(--s-6);display:grid;gap:var(--s-3)}
.checks li{position:relative;padding-left:2.25rem}
.checks li::before{content:"";position:absolute;left:0;top:.2em;width:1.4rem;height:1.4rem;border-radius:.9rem .2rem;background:var(--f2-mint-200)}
.checks li::after{content:"";position:absolute;left:.5rem;top:.42em;width:.4rem;height:.72rem;border:solid var(--f2-green-dark);border-width:0 .17rem .17rem 0;transform:rotate(45deg)}
/* groepsband */
.group{background:var(--f2-green-900);color:var(--f2-on-dark);position:relative;overflow:hidden}
.group h2{color:#fff}
.group::before{content:"";position:absolute;left:-10rem;bottom:-14rem;width:30rem;height:30rem;border-radius:50%;border:3rem solid rgb(127 224 160 / .12)}
.group .container{position:relative}
.companies{display:grid;gap:var(--s-3);grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;padding:0;margin:var(--s-6) 0 0}
@media (min-width:56em){.companies{grid-template-columns:repeat(4,minmax(0,1fr))}}
.companies li{display:flex;align-items:center;justify-content:center;min-height:5rem;padding:var(--s-4);border-radius:var(--leaf-s);border:1px solid rgb(214 245 224 / .3);font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:#fff;text-align:center}
/* cta */
.cta{display:grid;gap:var(--s-5);padding:var(--s-7) var(--s-6);border-radius:var(--leaf);background:var(--f2-mint-200)}
@media (min-width:56em){.cta{grid-template-columns:1.3fr 1fr;align-items:center;padding:var(--s-8) var(--s-9)}}
.cta h2{margin-bottom:var(--s-3)}.cta p{margin:0}
.person{display:flex;align-items:center;gap:var(--s-4)}
.person__mark{display:inline-flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;flex:none;border-radius:1.8rem .4rem;background:var(--f2-green-dark);color:#fff;font-family:var(--font-display);font-weight:700}
.person p{margin:0}.person strong{display:block;font-family:var(--font-display);font-size:1.125rem}
/* page hero (binnenpagina) */
.page-hero{background:var(--f2-mint-50);padding-block:var(--s-6) var(--s-9);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-9rem;top:-9rem;width:24rem;height:24rem;border-radius:50%;border:2.5rem solid var(--f2-mint-200);opacity:.7}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{max-width:18ch}
/* contact */
.contact-grid{display:grid;gap:var(--s-7)}
@media (min-width:56em){.contact-grid{grid-template-columns:1fr 1.15fr;gap:var(--s-9);align-items:start}}
.info-card{padding:var(--s-6);border-radius:var(--leaf);background:var(--f2-mint-50);border:1px solid var(--f2-line)}
.info-card h2{font-size:var(--fs-h3)}
.info-card address{font-style:normal;margin-bottom:var(--s-5)}
.contact-list svg{color:var(--f2-green-dark)}
.map{border-radius:var(--leaf)}
.route-links a{border-color:var(--f2-green-dark);color:var(--f2-green-dark)}
.route-links a:hover{background:var(--f2-green-dark);color:#fff}
/* footer */
.footer-logo{border-radius:var(--leaf-s)}
.footer-logo img{height:2.5rem}
.on-dark .lead,.on-dark .small{color:var(--f2-on-dark)}.on-dark a:not(.btn){color:#fff}
.option{min-width:0}.option h3{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.5rem);hyphens:auto;-webkit-hyphens:auto}

.person__tel { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
/* One Flora Group-kaart (overgenomen van nicdenheijer) */
.ofg { display: grid; gap: var(--s-5); align-items: center; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-card-bg, #fff); }
.ofg__logo { width: 140px; height: auto; }
.ofg h2 { font-size: var(--fs-h3); margin-bottom: var(--s-2); color: var(--c-heading); }
.ofg p { margin-bottom: var(--s-2); color: var(--c-muted); }
@media (min-width: 48em) { .ofg { grid-template-columns: auto 1fr auto; gap: var(--s-7); } }