/* ===================== Biotrade — site styles (layered over Bootstrap) ===================== */
:root{
  --green:#72BF44;
  --green-dark:#5DA233;
  --green-deep:#3E7322;
  --green-tint:#EEF6E7;
  --green-glow:rgba(114,191,68,.35);
  --ink:#1C1A1B;
  --ink-soft:#5B5658;
  --gray:#636467;
  --paper:#F6F8F4;
  --paper-card:#FFFFFF;
  --line:rgba(35,31,32,.10);
  --glass-bg:rgba(255,255,255,.65);
  --glass-border:rgba(255,255,255,.7);
  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --radius-xl:36px;
  --shadow:0 18px 50px -12px rgba(35,55,30,.18);
  --shadow-sm:0 6px 20px -8px rgba(35,55,30,.16);
  --shadow-lg:0 30px 70px -20px rgba(35,55,30,.28);
  --grad-green:linear-gradient(135deg,#7fcb4e,#5DA233);
  --grad-hero:radial-gradient(1000px 500px at 85% -10%, rgba(114,191,68,.16), transparent 60%), radial-gradient(700px 480px at 0% 8%, rgba(93,162,51,.12), transparent 55%);
  --font-display:'Poppins',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

body{font-family:var(--font-body);color:var(--ink);background:var(--paper)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em}
a{text-decoration:none}
.skip-link{position:absolute;top:.5rem;left:.5rem;z-index:1000;background:#fff;padding:.5rem 1rem;border-radius:8px}

/* ---------- buttons ---------- */
.btn-brand{background:var(--grad-green);color:#fff;font-weight:700;border:none;border-radius:999px;padding:.7rem 1.5rem;box-shadow:0 10px 24px -8px var(--green-glow);transition:transform .2s ease,box-shadow .2s ease}
.btn-brand:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px -8px var(--green-glow)}
.btn-ghost{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--ink);border-radius:999px;padding:.7rem 1.5rem;backdrop-filter:blur(10px);transition:transform .2s ease,border-color .2s ease}
.btn-ghost:hover{color:var(--ink);border-color:var(--green);transform:translateY(-2px)}
.btn-cta{background:#fff;color:var(--green-deep);font-weight:700;border-radius:999px;padding:.8rem 1.7rem;flex-shrink:0}
.btn-cta:hover{color:var(--green-deep);transform:translateY(-2px)}

/* ---------- header ----------
   One glass pill: logo, links, actions. Plain flex rather than a Bootstrap
   navbar, so the spacing and the link underline match the design exactly. */
.site-header{position:sticky;top:0;z-index:1030;padding:.7rem 1rem 0}
.header-inner{max-width:1180px;margin:0 auto;padding:.7rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:999px;box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.logo{display:flex;align-items:center}
.logo-img{height:40px;width:auto;display:block}
.main-nav{display:flex;align-items:center;gap:1.7rem;flex-wrap:wrap}
.main-nav .nav-link{font-size:.92rem;font-weight:500;color:var(--ink);padding:.3rem 0;border-bottom:2px solid transparent;text-decoration:none}
.main-nav .nav-link:hover,.main-nav .nav-link.is-active{border-color:var(--green);color:var(--green)}
.header-actions{display:flex;align-items:center;gap:.6rem}
.header-cta{padding:.45rem 1.1rem;font-size:.85rem;box-shadow:none;white-space:nowrap}
.header-cta:hover{box-shadow:0 10px 24px -8px var(--green-glow)}

/* The language control is round like the design's action button, and widens
   to fit the language name rather than being clipped by it. */
.lang-switcher .lang-toggle{display:flex;align-items:center;gap:.4rem;min-height:36px;padding:0 .8rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--green);font-size:.85rem;font-weight:500;text-decoration:none;white-space:nowrap}
.lang-switcher .lang-toggle:hover{background:var(--paper-card);color:var(--green)}
.lang-switcher .dropdown-menu{border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}

/* Three bars, shown only where the design shows them. */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:0;background:none;border:none}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}

@media (max-width:760px){
  .nav-toggle{display:flex}
  .header-cta{display:none}
  .header-inner{padding:.8rem 1.2rem;position:relative}
  .main-nav{position:absolute;top:calc(100% + .5rem);left:0;right:0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:0;padding:0;max-height:0;overflow:hidden;transition:max-height .25s ease}
  .main-nav.is-open{max-height:600px;padding:.6rem 1.2rem 1rem}
  .main-nav .nav-link{display:block;padding:.7rem 0}
}

/* ---------- generic sections ---------- */
/* Sections alternate: white, then the pale green, then white again.
   Both are stated flat. The tint used to be a gradient fading to nothing
   over a page whose own background is the same off-white, so a "tinted"
   band and a plain one were all but the same colour and the alternation
   was invisible. A band now either is white or is not. */
.section{padding:3.8rem 0;background:var(--paper-card)}
.section.pt-0{padding-top:0}
.section-tinted{background:var(--green-tint)}
.section .container,.hero .container,.page-header .container,.stats-band .container,.home-cta .container,.trust-bar .container,.about-banner{max-width:1180px}
.section-eyebrow{font-family:var(--font-mono);font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:#1f3b22;margin-bottom:.6rem}
.section-title{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:1.8rem}
.section-lead{max-width:60ch;margin-bottom:2rem;color:var(--ink-soft)}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dark);margin-bottom:.9rem}
.text-link{font-family:var(--font-mono);font-size:.85rem;color:var(--green-deep);border-bottom:1px solid var(--green-deep);padding-bottom:1px}
.empty-note{color:var(--ink-soft);font-style:italic}

/* ---------- page header ---------- */
.page-header{padding:3.5rem 0 1rem}
.page-header h1{font-size:clamp(2.2rem,4.4vw,3rem);max-width:22ch}
.page-sub{margin-top:.9rem;max-width:54ch;font-size:1.02rem;color:var(--ink-soft)}
.page-header-post h1{max-width:26ch}

/* ---------- hero ---------- */
.hero{padding:4rem 0 2rem;background:var(--grad-hero)}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:999px;background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(10px);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.4rem}
.hero-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 var(--green-glow);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--green-glow)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero-title{font-size:clamp(2.4rem,5vw,4rem);font-weight:800;line-height:1.05;max-width:16ch;letter-spacing:-.02em}
.hero-title .accent{background:var(--grad-green);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{max-width:46ch;margin:1.4rem 0 0;font-size:1.08rem;color:var(--ink-soft)}
.hero-actions{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:2rem;margin-top:2.4rem;flex-wrap:wrap}
.hero-stat{display:flex;flex-direction:column}
.hero-stat strong{font-family:var(--font-display);font-size:1.5rem;font-weight:800;line-height:1}
.hero-stat span{font-size:.78rem;color:var(--ink-soft)}

/* ---------- trust bar ---------- */
.trust-bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--glass-bg);backdrop-filter:blur(8px)}

/* ---------- stats band ---------- */
.stats-band{background:linear-gradient(135deg,#1f3b22,#2d5530);color:#fff;padding:3rem 0;margin:0}
.stat-block strong{display:block;font-family:var(--font-display);font-size:clamp(2rem,4vw,2.8rem);font-weight:800;line-height:1}
.stat-block span{font-size:.85rem;color:rgba(255,255,255,.8)}

/* A statistic is a number expression, so it keeps its own reading order.
 *
 * Arabic runs right to left, and a trailing "+" is a bidi-neutral character:
 * left to the paragraph it takes the paragraph's direction and lands on the
 * wrong side, so 35+ reads as +35 and 3,500+ as +3,500. Isolating the value
 * and giving it its own ltr direction keeps the sign attached to the digits
 * in every language. It changes nothing on an ltr page, which is already
 * reading this way.
 */
.hero-stat strong,
.stat-block strong{direction:ltr;unicode-bidi:isolate}

/* ---------- cards (values/services/process) ---------- */
.feature-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);backdrop-filter:blur(14px);box-shadow:var(--shadow-sm);padding:2rem;transition:transform .25s ease,box-shadow .25s ease}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feature-card h3{font-size:1.15rem;margin-bottom:.6rem}
.feature-card p{font-size:.92rem;color:var(--ink-soft);margin:0}
.icon-badge{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:rgba(114,191,68,.14);color:var(--green-dark);font-size:1.3rem;margin-bottom:1.1rem}
.process-step{position:relative;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);padding:1.8rem 1.4rem}
.process-num{position:absolute;top:1rem;right:1.2rem;font-family:var(--font-display);font-weight:800;font-size:1.8rem;color:var(--line)}
.process-step h3{font-size:1.05rem;margin-bottom:.5rem}
.process-step p{font-size:.88rem;color:var(--ink-soft);margin:0}

/* ---------- audience ---------- */
.audience-card{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3.4;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease}
.audience-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.audience-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.audience-card:hover img{transform:scale(1.05)}
.audience-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.4rem;background:linear-gradient(0deg,rgba(20,30,20,.82),rgba(20,30,20,.05) 60%);color:#fff}
.audience-overlay h3{color:#fff;font-size:1.2rem;margin:0}
.audience-overlay span{font-size:.85rem;color:rgba(255,255,255,.82)}

/* ---------- products ---------- */
.product-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem;padding:1rem;border-radius:var(--radius-lg);background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm)}
.search-box{display:flex;align-items:center;gap:.6rem;flex:1;min-width:220px;padding:.55rem 1rem;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:999px}
.search-box i{color:var(--gray)}
.search-box input{flex:1;border:none;background:transparent;outline:none;font-size:.95rem}
.filter-selects{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.pf-select{width:auto;border-radius:999px !important;font-size:.85rem;border:1px solid var(--line)}
.result-count{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-soft);margin-bottom:1.4rem}
.cat-chip-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.4rem}
.cat-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1.1rem;border-radius:999px;border:1px solid var(--glass-border);font-size:.82rem;font-weight:500;background:var(--glass-bg);backdrop-filter:blur(10px);color:var(--ink);transition:transform .2s ease,box-shadow .2s ease}
.cat-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);color:var(--ink)}
.cat-chip.is-active{background:var(--cap,var(--green));color:#fff;border-color:var(--cap,var(--green))}
.product-card{display:block;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden;backdrop-filter:blur(14px);box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease;color:var(--ink)}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);color:var(--ink)}
.product-card-media{aspect-ratio:4/2.6;overflow:hidden}
.product-card-media img{width:100%;height:100%;object-fit:cover}
.product-card-body{padding:1.4rem}
.product-form{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.product-card-body h3{font-size:1.05rem;margin:.5rem 0}
.product-card-body p{font-size:.88rem;color:var(--ink-soft)}
.cap-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--cap,#999)}
.product-card-cat{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft)}
.product-card-link{display:block;margin-top:.7rem;font-family:var(--font-mono);font-size:.78rem;color:var(--green-dark);font-weight:500}
.no-results{text-align:center;padding:3.5rem 1.5rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg)}
.no-results i{font-size:2.5rem;color:var(--green)}
.no-results h3{font-size:1.2rem;margin:.8rem 0 .4rem}
.no-results p{color:var(--ink-soft);max-width:40ch;margin:0 auto 1rem}

/* ---------- product detail ---------- */
.product-detail-media{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3.4}
.product-detail-media img{width:100%;height:100%;object-fit:cover}
.product-detail-cap{position:absolute;top:1rem;left:1rem;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:999px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);font-family:var(--font-mono);font-size:.78rem}
.product-detail-title{font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.02em;margin:.5rem 0 1rem}
.product-detail-desc{font-size:1.08rem;line-height:1.65;color:var(--ink-soft)}
/* The short line beside the photographs: slightly larger than body copy
   so it reads as a standfirst rather than as the first paragraph. */
.product-detail-short{font-size:1.08rem;line-height:1.65;color:var(--ink-soft);margin-bottom:1.5rem}
/* The long copy, under the images and across the full width. */
.product-detail-body{margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.product-detail-body h2{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-bottom:1rem}
.product-detail-body .bt-richtext{max-width:70ch;color:var(--ink-soft);line-height:1.7}
.product-specs{margin:1.8rem 0;border:1px solid var(--glass-border);border-radius:var(--radius-md);overflow:hidden;background:var(--glass-bg);backdrop-filter:blur(10px)}
.spec-row{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1.2rem;border-bottom:1px solid var(--line)}
.spec-row:last-child{border-bottom:none}
.spec-label{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.spec-value{font-weight:600;font-size:.92rem}
.product-usage h2{font-size:1.15rem;margin-bottom:.5rem}
.product-usage p{color:var(--ink-soft);line-height:1.6}
.product-related{margin-top:4rem}

/* ---------- team ---------- */
/* The photograph runs the full width of the card, so the padding moves off
   the card and onto the text below it - padding on the card itself would
   have left a margin the picture could not cross. */
.team-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);backdrop-filter:blur(14px);box-shadow:var(--shadow-sm);padding:0;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.team-card-body{padding:1.4rem 1.6rem 1.8rem}
.team-photo{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;margin:0}
/* No photograph: the initials fill the same footprint, so a card with one and
   a card without still line up in the row. */
.team-avatar{width:100%;aspect-ratio:1/1;height:auto;border-radius:0;margin:0;font-size:2rem}
.team-group-title{margin-bottom:1.8rem}
.team-avatar{background:var(--grad-green);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono)}
.team-card h3{font-size:1.08rem}
.team-role{font-family:var(--font-mono);font-size:.76rem;color:var(--gray);margin:.35rem 0 .8rem;text-transform:uppercase;letter-spacing:.04em}
.team-bio{font-size:.9rem;color:var(--ink-soft)}

/* ---------- stories ---------- */
.story-card{display:block;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden;backdrop-filter:blur(14px);box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease;color:var(--ink)}
.story-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);color:var(--ink)}
.story-card-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.story-card-media img{width:100%;height:100%;object-fit:cover}
.story-metric{position:absolute;left:1rem;bottom:1rem;padding:.5rem .9rem;border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);font-family:var(--font-mono);font-size:.74rem;font-weight:500;color:var(--green-deep)}
.story-card-body{padding:1.4rem}
.story-farm{font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gray)}
.story-card-body p{font-size:.9rem;color:var(--ink-soft);margin:.5rem 0 .8rem}
.story-detail{max-width:680px;display:flex;flex-direction:column;gap:2rem}
.story-detail-metric{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font-family:var(--font-mono);font-size:.9rem;color:var(--green-deep)}
.story-step{padding-left:1.4rem;border-left:3px solid var(--green)}
.story-step h2{font-size:1.15rem;margin-bottom:.5rem}
.story-step p{color:var(--ink-soft);line-height:1.65}
.story-cta{text-align:center;padding:2rem;border-radius:var(--radius-lg);background:var(--green-tint);border:1px solid var(--glass-border)}
.story-cta p{font-family:var(--font-display);font-weight:600;font-size:1.2rem;margin-bottom:1rem}

/* ---------- partners ---------- */
.partner-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;text-align:center;padding:1.6rem 1rem;border-radius:var(--radius-md);background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(10px);min-height:120px;transition:transform .2s ease,box-shadow .2s ease}
.partner-logo:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.partner-logo img{max-height:44px;width:auto}

/* ---------- news ---------- */
.news-card{display:block;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden;backdrop-filter:blur(14px);box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease;color:var(--ink)}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);color:var(--ink)}
.news-card-media{aspect-ratio:16/9;overflow:hidden}
.news-card-media img{width:100%;height:100%;object-fit:cover}
.news-card-body{padding:1.4rem}
.news-date{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-soft)}
.news-card-body h3{font-size:1.05rem;margin:.4rem 0}
.news-card-body p{font-size:.9rem;color:var(--ink-soft);margin:0}

/* ---------- founder quote ---------- */
.founder-quote{max-width:760px;text-align:center;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-xl);backdrop-filter:blur(14px);box-shadow:var(--shadow-sm);padding:3rem 2.4rem 2.4rem}
.founder-quote > i{font-size:2rem;color:var(--green)}
.founder-quote p{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.4;margin:1rem 0}
.founder-quote footer{display:flex;flex-direction:column;gap:.15rem}
.founder-quote footer strong{font-size:1rem}
.founder-quote footer span{font-family:var(--font-mono);font-size:.78rem;color:var(--gray);text-transform:uppercase;letter-spacing:.05em}

/* ---------- timeline ---------- */
.timeline{position:relative;margin-top:1rem}
.timeline::before{content:"";position:absolute;left:34px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--green),var(--line))}
.timeline-item{position:relative;display:flex;gap:1.4rem;padding-bottom:1.8rem}
.timeline-item:last-child{padding-bottom:0}
.timeline-marker{position:relative;z-index:1;flex-shrink:0;width:70px;height:70px;border-radius:50%;background:var(--grad-green);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:500;font-size:.82rem;box-shadow:0 8px 20px -8px var(--green-glow)}
.timeline-card{flex:1;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);backdrop-filter:blur(10px);padding:1.2rem 1.4rem;box-shadow:var(--shadow-sm)}
.timeline-card h3{font-size:1.08rem;margin-bottom:.4rem}
.timeline-card p{font-size:.92rem;color:var(--ink-soft);margin:0}

/* ---------- careers / jobs ---------- */
.job-list{display:flex;flex-direction:column;gap:1rem}
.job-card{display:flex;align-items:center;gap:1.5rem;justify-content:space-between;flex-wrap:wrap;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);padding:1.6rem 1.8rem}
.job-card-main{flex:1;min-width:260px}
.job-card-main h3{font-size:1.2rem;margin-bottom:.6rem}
.job-meta{display:flex;gap:1.2rem;flex-wrap:wrap;margin-bottom:.7rem}
.job-meta span{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-soft)}
.job-card-main p{font-size:.92rem;color:var(--ink-soft);margin:0}

/* ---------- about / banners / body ---------- */
.about-banner{margin:2.5rem auto 0}
.about-banner img{width:100%;height:320px;object-fit:cover;border-radius:var(--radius-lg)}
.about-body{max-width:680px}
.about-body p{margin-bottom:1.2rem;font-size:1.02rem;color:var(--ink-soft);line-height:1.7}

/* ---------- contact ---------- */
.contact-info{display:flex;flex-direction:column;gap:1.4rem}
.contact-row h4{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:.3rem}
.site-form{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);backdrop-filter:blur(14px);box-shadow:var(--shadow-sm);padding:2rem}
.site-form .form-control{border-radius:var(--radius-sm);padding:.7rem .9rem}
.site-form .form-control:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-glow)}
.form-narrow{max-width:680px}

/* ---------- terms ---------- */
.terms-body{max-width:720px;display:flex;flex-direction:column;gap:1.8rem}
.terms-section h2{font-size:1.15rem;margin-bottom:.5rem}
.terms-section p{color:var(--ink-soft);line-height:1.65;margin:0}

/* ---------- big CTA ---------- */
.home-cta{padding:1rem 0 3.5rem}
.home-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;background:linear-gradient(135deg,#1f3b22,#2d5530);color:#fff;border-radius:var(--radius-xl);padding:2.6rem 2.8rem;position:relative;overflow:hidden}
.home-cta-inner::before{content:"";position:absolute;right:-40px;top:-40px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(114,191,68,.4),transparent 70%)}
.home-cta-inner > div{position:relative;z-index:1;max-width:36ch}
.home-cta-inner h2{color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:.6rem}
.home-cta-inner p{color:rgba(255,255,255,.85);margin:0}

/* ---------- footer ---------- */
.site-footer{background:linear-gradient(180deg,#1f3b22,#141f15);color:rgba(255,255,255,.82);border-radius:var(--radius-xl) var(--radius-xl) 0 0;margin-top:2rem}
/* The design's grid: the brand column takes the wider share, the other three
   split the rest evenly. Collapses to two columns, then one. */
.footer-inner{max-width:1180px;margin:0 auto;padding:3.5rem 1.5rem 2.5rem;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.footer-col{display:flex;flex-direction:column;gap:.6rem}
.footer-col--brand p{color:rgba(255,255,255,.7);font-size:.88rem;margin-top:.4rem}
/* The uploaded footer logo. Height only, so a wide mark and a square one
   both sit on the same baseline as the wordmark it replaces. */
.footer-logo-img{height:44px;width:auto;max-width:100%;display:block;object-fit:contain;align-self:flex-start}
.footer-brand{font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:var(--green)}
.footer-brand span{color:#fff}
.footer-tagline{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;color:var(--gray)}
.site-footer h4{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--green);margin-bottom:.3rem;font-weight:500}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.footer-links a{color:rgba(255,255,255,.82);font-size:.88rem}
.footer-links a:hover{color:#fff}
.footer-address{color:rgba(255,255,255,.7);font-size:.88rem}
.footer-bottom{max-width:1180px;margin:0 auto;padding:1.2rem 1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);font-size:.78rem;color:rgba(255,255,255,.55)}
.footer-bottom-links a{color:rgba(255,255,255,.6);margin-left:1.2rem}
.footer-bottom-links a:hover{color:#fff}
@media (max-width:980px){.footer-inner{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-inner{grid-template-columns:1fr}}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-badge-dot{animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:991px){
  .hero-slider{margin-top:2rem;aspect-ratio:16/9}
}
@media (max-width:767px){
  .product-toolbar{flex-direction:column;align-items:stretch}
  .filter-selects{justify-content:space-between}
  .pf-select{flex:1}
  .job-card{flex-direction:column;align-items:flex-start}
  .home-cta-inner{flex-direction:column;align-items:flex-start}
  .about-banner img{height:200px}
}

/* ---------------------------------------------------------------------------
 * Hero photo slider
 *
 * The design's slider: the photos sit side by side on one track and the track
 * slides. Images only - a slide carries no caption and its alt is empty,
 * because the hero's words are already beside it and a screen reader should
 * not hear them twice.
 *
 * Offsets are logical (inset-inline-*), so the arrows sit correctly in Arabic
 * without a [dir="rtl"] rule.
 * ------------------------------------------------------------------------- */
.hero-slider {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4/3.2;
    box-shadow: var(--shadow-lg);
    background: var(--green-tint);
    border: 1px solid var(--glass-border);
    animation: bt-hero-float 7s ease-in-out infinite alternate;
}

.hero-slider::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

@keyframes bt-hero-float {
    0% { transform: translateY(0); }
    100% { transform: translateY(-12px); }
}

.hero-slide-track {
    display: flex;
    height: 100%;
    transition: transform .7s cubic-bezier(.65, 0, .35, 1);
}

.hero-slide { flex: 0 0 100%; height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slide-link { display: block; height: 100%; }

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--glass-border);
    color: var(--ink);
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.slider-nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.slider-nav--prev { inset-inline-start: .8rem; }
.slider-nav--next { inset-inline-end: .8rem; }

.slider-dots {
    position: absolute;
    bottom: .9rem;
    inset-inline: 0;
    display: flex;
    justify-content: center;
    gap: .4rem;
}

.slider-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width .2s ease;
}

.slider-dot.is-active { background: #fff; width: 18px; border-radius: 4px; }

/* Someone who asked for less movement gets a still photo: no drift, no
   sliding. The JS stops advancing it on its own for them too. */
@media (prefers-reduced-motion: reduce) {
    .hero-slider { animation: none; }
    .hero-slide-track { transition: none; }
}

/* ---------------------------------------------------------------------------
 * Partner strip
 *
 * One horizontal lane. The logos never wrap: the track is a flex row that is
 * wider than the viewport, and it slides. The animation is CSS only - no
 * library, and no JavaScript is needed for it to work.
 *
 * Without motion (a reduced-motion preference, or no CSS animation) the strip
 * is still a horizontal scroller the visitor can swipe or drag.
 * ------------------------------------------------------------------------- */
.partner-strip {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.partner-strip::-webkit-scrollbar { display: none; }

.partner-track {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2.5rem;
    padding-block: .5rem;
    animation: bt-partner-marquee 45s linear infinite;
}

.partner-strip:hover .partner-track,
.partner-strip:focus-within .partner-track { animation-play-state: paused; }

/* Inside the lane a logo is just a logo, not the card the grid uses. The card
   chrome - the glass panel, the border, the 1.6rem padding and the 120px
   floor - is what pushed the strip past one screen and made it read as a wall
   of boxes rather than a single row. */
/* The box is given a height, not left to take one from the picture.
   A lazy image has no intrinsic size until it loads, so height:auto
   resolved to 0, the box had no area, the browser therefore never counted
   it as on screen, and loading="lazy" never fired - an image that cannot
   load because it has no size, and has no size because it cannot load.
   Fixing the box breaks the loop; the trust tile never had it because it
   states a height. */
.partner-strip .partner-logo {
    flex: 0 0 auto;
    width: 132px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.partner-strip .partner-logo:hover { transform: none; box-shadow: none; }

.partner-strip .partner-logo img {
    max-height: 40px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}



/* Too few logos to fill the lane: stand still and centre, exactly as the
   trust bar does. A marquee needs more content than viewport to read as one -
   a single mark sliding across empty space reads as a fault. The class is set
   by site.js, which is the only place the two widths can be compared. */
.partner-strip.is-static { justify-content: center; overflow-x: visible; mask-image: none; }
.partner-strip.is-static .partner-track { animation: none; }
.partner-strip.is-static [data-bt-partner-clone] { display: none; }
@keyframes bt-partner-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% - 2.5rem)); }
}

/* In Arabic the lane lays out right to left: the clone sits to the LEFT of
   the original, so the run has to travel right for the clone to follow the
   original into view. Sliding left there just empties the lane. */
@keyframes bt-partner-marquee-rtl {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100% + 2.5rem)); }
}

@media (prefers-reduced-motion: reduce) {
    .partner-track { animation: none; }
    /* The duplicate track is decoration; with no motion it is only noise. */
    [data-bt-partner-clone] { display: none; }
}

/* The uploaded mark inside the existing badge frame. */
.icon-badge .icon-image {
    width: 60%;
    height: 60%;
    object-fit: contain;
    display: block;
}

/* Trust logos: the mark on its own.
 *
 * No frame - no border, no ground, no rounding. The tile the product gallery
 * puts round a thumbnail is what makes a photo read as one of a set; a
 * certification mark needs no such help, and a box round it only competes
 * with the logo's own shape. The box that remains is a sizing box: it keeps
 * every mark to the same footprint however wide or tall the artwork is. */
.trust-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
}

.trust-logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
 * Rich text
 *
 * Copy written in the dashboard editor. The HTML is sanitised on save, so the
 * only job here is to make editor output sit inside the existing type scale
 * instead of falling back to browser defaults. A new class: no existing rule
 * is touched.
 * ------------------------------------------------------------------------- */
.bt-richtext > :first-child { margin-block-start: 0; }
.bt-richtext > :last-child { margin-block-end: 0; }

.bt-richtext p { margin-block-end: 1rem; line-height: 1.75; }

.bt-richtext h2,
.bt-richtext h3,
.bt-richtext h4 { margin-block: 1.75rem .75rem; line-height: 1.3; color: var(--ink, #1C1A1B); }

.bt-richtext h2 { font-size: 1.4rem; }
.bt-richtext h3 { font-size: 1.2rem; }
.bt-richtext h4 { font-size: 1.05rem; }

.bt-richtext ul,
.bt-richtext ol { margin-block-end: 1rem; padding-inline-start: 1.4rem; }
.bt-richtext li { margin-block-end: .4rem; line-height: 1.7; }

.bt-richtext a { color: var(--green-dark, #5DA233); text-decoration: underline; }
.bt-richtext a:hover { color: var(--green-deep, #3E7322); }

.bt-richtext img { max-width: 100%; height: auto; border-radius: 10px; margin-block: .5rem; }

.bt-richtext blockquote {
    margin: 1.25rem 0;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--green, #72BF44);
    color: #4A4547;
}

.bt-richtext table { width: 100%; margin-block-end: 1rem; border-collapse: collapse; }
.bt-richtext th,
.bt-richtext td { padding: .55rem .7rem; border: 1px solid #E4E7E2; text-align: start; }
.bt-richtext th { background: #F6F8F4; font-weight: 600; }

/* Product gallery thumbnails under the main image. */
.product-detail-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-block-start: .85rem;
}

.product-detail-thumb {
    width: 74px;
    height: 74px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #E4E7E2;
    background: #fff;
    padding: 0;
    cursor: pointer;
}

.product-detail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-detail-thumb.is-active { border-color: var(--green, #72BF44); box-shadow: 0 0 0 2px rgba(114, 191, 68, .25); }


/* ============================================================
   RIGHT-TO-LEFT (Arabic)
   ------------------------------------------------------------
   Appended, not woven in: every rule above is untouched, and
   none of this applies unless the document carries dir="rtl".

   Bootstrap's own RTL build mirrors the grid, spacing utilities
   and dropdowns, and the layouts here are flexbox with `gap`,
   which mirrors on its own. What is left are the handful of
   physical offsets and one typographic problem.
   ============================================================ */

/* Absolute offsets: reset the physical side, then set the logical one. */
[dir="rtl"] .skip-link{left:auto;inset-inline-start:.5rem}
[dir="rtl"] .process-num{right:auto;inset-inline-end:1.2rem}
[dir="rtl"] .product-detail-cap{left:auto;inset-inline-start:1rem}
[dir="rtl"] .story-metric{left:auto;inset-inline-start:1rem}
[dir="rtl"] .timeline::before{left:auto;inset-inline-start:34px}
[dir="rtl"] .home-cta-inner::before{right:auto;inset-inline-end:-40px}

/* Borders and spacing that lean on one side. */
[dir="rtl"] .story-step{padding-left:0;border-left:0;padding-inline-start:1.4rem;border-inline-start:3px solid var(--green)}
[dir="rtl"] .footer-bottom-links a{margin-left:0;margin-inline-start:1.2rem}

/*
 * Arabic is a cursive script: letters join, and letter-spacing pulls those
 * joins apart into something close to unreadable. The Latin-oriented tracking
 * used on eyebrows, badges and labels is therefore dropped for Arabic only.
 * uppercase is left in place - it is simply inert on Arabic glyphs.
 */
[dir="rtl"] .section-eyebrow,
[dir="rtl"] .eyebrow,
[dir="rtl"] .hero-badge,
[dir="rtl"] .hero-title,
[dir="rtl"] .trust-item,
[dir="rtl"] .product-form,
[dir="rtl"] .product-detail-title,
[dir="rtl"] .spec-label,
[dir="rtl"] .team-role,
[dir="rtl"] .story-farm,
[dir="rtl"] .founder-quote footer span,
[dir="rtl"] .contact-row h4,
[dir="rtl"] .news-date,
[dir="rtl"] .footer-tagline,
[dir="rtl"] .stat-block strong{letter-spacing:normal}

/*
 * The monospace stack has no Arabic coverage, so numerals and labels using it
 * fall back to whatever the system picks - usually a mismatched face. Body
 * font first for Arabic; the Latin fallbacks stay for mixed content.
 */
[dir="rtl"] .hero-badge,
[dir="rtl"] .section-eyebrow,
[dir="rtl"] .eyebrow,
[dir="rtl"] .product-form,
[dir="rtl"] .spec-label,
[dir="rtl"] .story-metric,
[dir="rtl"] .timeline-marker,
[dir="rtl"] .contact-row h4{font-family:var(--font-body)}

[dir="rtl"] .partner-track { animation-name: bt-partner-marquee-rtl; }