:root{
  --nile-950:#012E17;--nile-900:#01381D;--nile-800:#014625;--nile-700:#0A7038;
  --nile-600:#15884A;--nile-500:#2FA25F;--nile-400:#66C289;--nile-300:#9DDCB5;
  --nile-200:#C9EDD7;--nile-100:#E6F6EC;--nile-50:#F3FBF6;
  --leaf-700:#3F6B1A;--leaf-600:#4E8420;--leaf-500:#A6FB67;--leaf-400:#BCFD8D;
  --leaf-300:#D3FEB6;--leaf-100:#EEFFDF;
  --sun:#FCDE51;--sun-deep:#F2A63C;--brand:#014625;
  --ink:#0C2417;--ink-muted:#46614F;--ink-faint:#5A7663;--paper:#F4F9F3;
  --current:linear-gradient(90deg,var(--leaf-500) 0%,var(--sun) 55%,var(--sun-deep) 100%);
  --sec:clamp(4.5rem,9vw,9rem);
  --ease:cubic-bezier(.22,1,.36,1);
}
[dir=rtl]{--current:linear-gradient(270deg,var(--leaf-500) 0%,var(--sun) 55%,var(--sun-deep) 100%)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Archivo,system-ui,sans-serif;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased}
[lang=ar]{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;line-height:1.9}
[lang=ar] .d-xl,[lang=ar] .d-lg,[lang=ar] .d-md,[lang=ar] .d-sm{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0}
img{max-width:100%;display:block}
.afnd{background-image:url(images/omar-aboumoussa-founder-of-nillage.jpg)}
.asset{background-size:cover;background-position:center;background-repeat:no-repeat}
.logo.asset{background-size:contain;background-position:left center;width:88px;height:38px}
[dir=rtl] .logo.asset{background-position:right center}
.ftr .logo.asset{width:106px;height:46px}
.hero-bg img,.cta-bg img,.fig img,.pcard-img img,.tfig img{background:var(--nile-100)}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:500}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}

.banner{background:var(--nile-950);color:#cddff0;font-size:12.5px;line-height:1.6;
  padding:11px 20px;text-align:center;position:relative;z-index:60}
.banner b{color:#fff}
.wrap{width:100%;max-width:1220px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.sec{padding-block:var(--sec)}
.narrow{max-width:760px}
.maxw{max-width:62ch}
.center{text-align:center;margin-inline:auto}

/* type ---------------------------------------------------------------- */
.d-xl,.d-lg,.d-md,.d-sm{font-family:Outfit,system-ui,sans-serif;font-weight:600}
.d-xl{font-size:clamp(2.6rem,6.2vw,5.5rem);line-height:.98;letter-spacing:-.036em}
.d-lg{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.04;letter-spacing:-.03em}
.d-md{font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1.12;letter-spacing:-.024em}
.d-sm{font-size:clamp(1.35rem,2.1vw,1.75rem);line-height:1.22;letter-spacing:-.018em}
.lede{font-size:clamp(1.06rem,1.35vw,1.28rem);line-height:1.62;color:var(--ink-muted);margin-top:1.4rem}
.lede.on-dark{color:rgba(255,255,255,.82)}
.prose{margin-top:1.5rem;color:var(--ink-muted);display:grid;gap:1.1rem;max-width:62ch}
.hint{color:var(--ink-faint);font-size:.9rem;margin-top:.5rem}

.eyebrow{display:flex;align-items:center;gap:.65rem;font-size:.78rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--leaf-700)}
.eyebrow.on-dark{color:var(--leaf-300)}
.tick{width:30px;height:3px;background:var(--current);flex:none}
.eyebrow+.d-lg,.eyebrow+.d-xl{margin-top:1.1rem}

.rule{display:block;height:3px;width:104px;background:var(--current)}
.rule-hero{margin-block:1.9rem}
.rule-full{width:100%;height:2px}

.ulink{display:inline-block;margin-top:2rem;font-weight:500;color:var(--nile-700);
  text-decoration:none;background-image:var(--current);background-size:100% 2px;
  background-repeat:no-repeat;background-position:0 100%;padding-bottom:3px;
  transition:background-size .4s var(--ease)}
.ulink:hover{background-size:100% 3px}
.ulink.sm{font-size:.85rem;margin-top:.85rem}

.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:.92rem 1.7rem;font-size:.94rem;font-weight:500;text-decoration:none;
  border-radius:2px;border:1px solid transparent;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn-solid{background:var(--nile-700);color:#fff}
.btn-solid:hover{background:var(--leaf-600)}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--nile-900)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

/* header -------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:50;transition:background .35s var(--ease),
  border-color .35s var(--ease),backdrop-filter .35s}
.hdr{border-bottom:1px solid transparent}
.hdr-in{display:flex;align-items:center;gap:2rem;min-height:76px}
.brand{flex:none;display:block}
.brand img{height:38px;width:auto}
.brand .logo{height:38px;width:auto}
.hdr nav{display:flex;gap:1.6rem;margin-inline-start:auto;font-size:.92rem}
.hdr nav a{text-decoration:none;color:rgba(255,255,255,.78);padding-bottom:4px;
  background-image:var(--current);background-size:0 2px;background-repeat:no-repeat;
  background-position:0 100%;transition:background-size .35s var(--ease),color .3s}
[dir=rtl] .hdr nav a{background-position:100% 100%}
.hdr nav a:hover,.hdr nav a.on{background-size:100% 2px}
.hdr.solid nav a{color:var(--ink-muted)}
.hdr.solid nav a.on{color:var(--nile-700)}
.hdr-act{display:flex;align-items:center;gap:1rem}
.hdr-act .btn{padding:.62rem 1.15rem;font-size:.85rem}
.lang{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;
  font:inherit;font-size:.82rem;padding:.45rem .8rem;border-radius:2px;cursor:pointer}
.hdr.solid .lang{border-color:rgba(2,60,115,.25);color:var(--nile-700)}
.hdr.solid{background:rgba(243,246,249,.92);backdrop-filter:blur(10px);
  border-bottom-color:rgba(2,60,115,.12)}
.hdr.solid .btn-solid{background:var(--nile-700)}

/* hero ---------------------------------------------------------------- */
.hero,.phero,.cta{position:relative;color:#fff;isolation:isolate}
.hero{margin-top:-76px;padding-top:76px;min-height:min(92vh,860px);display:flex;align-items:center}
.phero{margin-top:-76px;padding-top:calc(76px + 5rem);padding-bottom:5rem}
.hero-bg,.cta-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-bg img,.cta-bg img{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(1,30,60,.88),rgba(1,30,60,.72) 45%,rgba(1,30,60,.55))}
.hero-in{padding-block:6rem;max-width:900px}
.phero-in{max-width:820px}
.facts{display:flex;flex-wrap:wrap;gap:2.6rem;margin-top:4rem;
  border-top:1px solid rgba(163,198,96,.38);padding-top:1.8rem}
.fact{display:grid;gap:.2rem}
.fact-v{font-family:Outfit,system-ui,sans-serif;font-size:1.9rem;line-height:1}
.fact-l{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.cta{margin-top:0}
.cta-in{max-width:760px}

/* sections ------------------------------------------------------------ */
.band{background:#fff}
.dark{background:var(--nile-900);color:#fff}
.dark .d-lg,.dark .d-md{color:#fff}
.grid-2{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-2.flip>div:first-child{order:2}
.fig{overflow:hidden}
.fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.fig-lift{margin-top:-3rem}
.sec-head{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:end;margin-bottom:3.2rem}
.sec-head .lede{margin-top:0}
.statband{display:flex;flex-direction:column;gap:1.4rem;padding-block:3.5rem}
.stat{display:flex;align-items:baseline;gap:1rem}
.stat-v{font-family:Outfit,system-ui,sans-serif;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;color:var(--leaf-700)}
.stat-l{color:var(--ink-muted);font-size:.95rem}

/* products ------------------------------------------------------------ */
.pgrid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.pcard{display:block;text-decoration:none}
.pcard-img{overflow:hidden;background:var(--nile-100)}
.pcard-img img{aspect-ratio:4/5;object-fit:cover;width:100%;
  transition:transform .7s var(--ease)}
.pcard:hover .pcard-img img{transform:scale(1.045)}
.pcard-meta{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;margin-top:1rem;border-top:2px solid rgba(136,178,56,.45);padding-top:.85rem;
  transition:border-color .35s var(--ease)}
.pcard:hover .pcard-meta{border-top-color:var(--leaf-500)}
.pcard-meta h3{font-family:Outfit,system-ui,sans-serif;font-size:1.22rem}
.origin{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--leaf-700)}
.pcard-desc{margin-top:.6rem;font-size:.9rem;color:var(--ink-muted)}

/* lists --------------------------------------------------------------- */
.olist{margin-top:2.6rem;display:grid;gap:1.6rem}
.olist li{padding-top:1.4rem;border-top:1px solid rgba(163,198,96,.34)}
.olist h3{font-family:Outfit,system-ui,sans-serif;font-size:1.2rem}
.olist p{color:rgba(255,255,255,.72);margin-top:.4rem}
.scope{margin-top:2.6rem;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.scope li{padding:1.1rem 0 1.1rem 1.5rem;border-top:1px solid rgba(136,178,56,.34);
  padding-inline-end:2rem;font-size:.98rem;position:relative}
.scope li::before{content:"";position:absolute;inset-inline-start:0;top:1.55rem;
  width:7px;height:7px;background:var(--leaf-500)}
.qlist{margin-top:1.8rem;display:grid;gap:.9rem}
.qlist li{padding-inline-start:1.4rem;position:relative;color:var(--ink-muted)}
.qlist li::before{content:"";position:absolute;inset-inline-start:0;top:.72em;
  width:8px;height:2px;background:var(--current)}
.alist{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.alist li{border-top:2px solid rgba(136,178,56,.4);padding-top:1.3rem}
.alist h3{font-family:Outfit,system-ui,sans-serif;font-size:1.15rem}
.alist p{margin-top:.5rem;color:var(--ink-muted);font-size:.95rem}
.psteps{margin-top:1rem;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.pstep{display:flex;gap:1.1rem;padding:1.5rem 2rem 1.5rem 0;
  border-top:1px solid rgba(136,178,56,.34)}
.pnum{font-family:Outfit,system-ui,sans-serif;font-size:.95rem;color:var(--leaf-600);flex:none;padding-top:.15rem}
.pstep h3{font-family:Outfit,system-ui,sans-serif;font-size:1.12rem}
.pstep p{color:var(--ink-muted);font-size:.92rem;margin-top:.35rem}

/* process timeline ---------------------------------------------------- */
.timeline{position:relative;padding-inline-start:0}
.spine{position:absolute;inset-block:0;inset-inline-start:31px;
  width:2px;background:rgba(2,60,115,.15);overflow:hidden}
.spine-fill{display:block;width:100%;height:0;background:var(--current);
  background-size:100% 100vh}
.tlist{display:grid;gap:clamp(3rem,6vw,5.5rem)}
.tstage{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:start}
.tmark{position:relative;padding-top:.4rem}
.tnum{font-family:Outfit,system-ui,sans-serif;font-size:1.05rem;color:var(--leaf-600)}
.tbody p{color:var(--ink-muted);margin-top:.9rem;max-width:56ch}
.tfig img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* contact ------------------------------------------------------------- */
.contact-grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(240px,.62fr) minmax(0,1fr)}
.direct dl{margin-top:1.8rem;display:grid;gap:1.3rem}
.direct dt{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.direct dd{margin:.3rem 0 0}
.direct a{text-decoration:none;color:var(--nile-700);border-bottom:2px solid rgba(136,178,56,.5)}
.direct .hint{display:block;font-size:.85rem;margin-top:.35rem}
.direct .rule{margin-bottom:1.6rem}
.form{margin-top:2rem;display:grid;gap:1.3rem}
.frow{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.field{display:grid;gap:.45rem}
.field label{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.req{color:var(--leaf-600)}
.opt{text-transform:none;letter-spacing:0;color:var(--ink-faint);font-size:.78rem}
.field input,.field textarea{font:inherit;font-size:.95rem;color:var(--ink);
  background:#fff;border:1px solid rgba(2,60,115,.22);border-radius:2px;
  padding:.8rem .9rem;width:100%;transition:border-color .25s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--leaf-500);
  box-shadow:0 0 0 3px rgba(136,178,56,.22)}
.form .btn{justify-self:start}
.demo-note{background:var(--leaf-100);border-inline-start:3px solid var(--leaf-500);
  padding:.9rem 1.1rem;font-size:.92rem;color:var(--nile-800)}

/* footer -------------------------------------------------------------- */
.ftr{background:var(--nile-950);color:#fff;margin-top:0}
.ftr-in{display:grid;gap:2.6rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding-block:clamp(3.5rem,6vw,5.5rem)}
.ftr h3{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--leaf-300);margin-bottom:1rem}
.ftr-tag{font-family:Outfit,system-ui,sans-serif;font-size:1.25rem;margin-top:1.2rem;color:var(--leaf-300)}
.ftr-blurb{color:rgba(255,255,255,.68);font-size:.92rem;margin-top:.7rem;max-width:34ch}
.plain{display:grid;gap:.6rem;font-size:.94rem}
.plain a{text-decoration:none;color:rgba(255,255,255,.78)}
.plain a:hover{color:#fff}
.ftr-base{border-top:1px solid rgba(255,255,255,.12);padding-block:1.4rem;
  color:rgba(255,255,255,.5);font-size:.82rem}

@media (max-width:900px){
  .hdr-in{flex-wrap:wrap;gap:.9rem;padding-top:.7rem;min-height:0}
  .hdr nav{order:3;width:100%;gap:1.25rem;font-size:.85rem;
    overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.55rem;
    scrollbar-width:none}
  .hdr nav::-webkit-scrollbar{display:none}
  .hdr nav a{white-space:nowrap}
  .hdr-act{margin-inline-start:auto}
  .hdr-act .btn{padding:.5rem .9rem;font-size:.8rem}
  .hero{margin-top:0;padding-top:0}
  .phero{margin-top:0;padding-top:3.5rem}
  .tstage{grid-template-columns:44px minmax(0,1fr)}
  .spine{inset-inline-start:21px}
  .tfig{grid-column:2}
  .contact-grid{grid-template-columns:1fr}
  .grid-2.flip>div:first-child{order:0}
  .fig-lift{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* Photographs are painted as backgrounds on these elements, so they need the
   same sizing the <img> rules above provide. */
.hero-bg .asset,.cta-bg .asset{width:100%;height:100%}
.fig .asset{width:100%;aspect-ratio:4/5}
.fig .asset.wide{aspect-ratio:3/2}
.pcard-img .asset{width:100%;aspect-ratio:4/5;transition:transform .7s var(--ease)}
.pcard:hover .pcard-img .asset{transform:scale(1.045)}
.tfig .asset{width:100%;aspect-ratio:4/3}
.brand .logo.asset{display:block}

.brand .logo.asset,.ftr .logo.asset{
  background-size:contain;background-position:left center;background-repeat:no-repeat}
.brand .logo.asset{width:88px;height:38px}
.ftr .logo.asset{width:106px;height:46px}
[dir=rtl] .brand .logo.asset,[dir=rtl] .ftr .logo.asset{background-position:right center}

/* Baseline: every page is a section in one scroll and the header sits above
   the content. The `js` class restores the tabbed, overlaid behaviour. */
.hdr{position:sticky;top:0;z-index:50;background:rgba(1,30,60,.94);
  border-bottom-color:rgba(163,198,96,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hdr nav a{color:rgba(255,255,255,.8)}
.hdr nav a.on{color:#fff}
.hdr .lang{border-color:rgba(255,255,255,.35);color:#fff;
  text-decoration:none;display:inline-flex;align-items:center}
.hdr .btn-solid{background:var(--nile-600)}
.hero,.phero{margin-top:0;padding-top:3rem}
.page{scroll-margin-top:1rem}
.js .hdr{position:sticky}
.js .hdr:not(.solid){background:transparent;border-bottom-color:transparent}
.js .hdr:not(.solid) nav a{color:rgba(255,255,255,.78)}
.js .hdr:not(.solid) .lang{border-color:rgba(255,255,255,.35);color:#fff}
.js .hero{margin-top:-76px;padding-top:76px}
.js .phero{margin-top:-76px;padding-top:calc(76px + 5rem)}

/* ===================================================================
   Phone layout. The desktop grid is not just narrower on a phone — the
   rhythm, type scale and image proportions all need to change, or the
   page reads as a shrunken desktop site.
   =================================================================== */
@media (max-width:900px){
  :root{--sec:clamp(3.25rem,8vw,5rem)}
  .grid-2{gap:2.25rem}
  .sec-head{gap:1rem;margin-bottom:2.25rem}
  .fig .asset,.fig img{aspect-ratio:3/2}
  .fig-lift{margin-top:0}
}

@media (max-width:620px){
  body{font-size:16px}
  .banner{font-size:11.5px;padding:9px 14px;line-height:1.5}
  .wrap{padding-inline:1.25rem}

  /* type: tighter leading, smaller caps, headings that fit a narrow column */
  .d-xl{font-size:clamp(2.1rem,9.5vw,3rem);letter-spacing:-.015em}
  .d-lg{font-size:clamp(1.75rem,7.5vw,2.4rem);letter-spacing:-.012em}
  .d-md{font-size:clamp(1.45rem,6vw,1.9rem)}
  .d-sm{font-size:1.2rem}
  .lede{font-size:1.02rem;margin-top:1.1rem}
  .eyebrow{font-size:.7rem;letter-spacing:.12em}
  .rule-hero{margin-block:1.4rem}

  /* header: compact bar, logo scaled down */
  .hdr-in{min-height:62px}
  .brand .logo.asset{width:74px;height:32px}
  .hdr-act .btn{padding:.45rem .8rem;font-size:.78rem}

  /* hero: no forced viewport height, buttons full width and stacked */
  .hero{min-height:0}
  .hero-in{padding-block:3.25rem;max-width:none}
  .phero-in{max-width:none}
  .js .phero{padding-top:calc(62px + 2.75rem)}
  .btn-row{gap:.65rem;margin-top:1.75rem}
  .btn-row .btn{flex:1 1 100%;justify-content:center}
  .facts{gap:1.25rem 2rem;margin-top:2.5rem;padding-top:1.25rem}
  .fact-v{font-size:1.5rem}
  .fact-l{font-size:.72rem}

  /* products: two to a row, description hidden to keep cards scannable */
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
  .pcard-meta{margin-top:.7rem;padding-top:.6rem;flex-direction:column;gap:.15rem}
  .pcard-meta h3{font-size:1rem}
  .origin{font-size:.62rem}
  .pcard-desc{display:none}
  .ulink.sm{font-size:.78rem;margin-top:.6rem}

  /* lists stack rather than sitting in columns */
  .scope,.alist,.psteps{grid-template-columns:1fr}
  .pstep{padding:1.1rem 0}
  .olist{gap:1.2rem;margin-top:2rem}
  .qlist{margin-top:1.4rem}

  /* process timeline: narrow gutter, shorter figures */
  .timeline{padding-inline-start:0}
  .spine{inset-inline-start:15px}
  .tstage{grid-template-columns:34px minmax(0,1fr);gap:.9rem}
  .tfig{grid-column:2}
  .tfig .asset,.tfig img{aspect-ratio:3/2}
  .tlist{gap:2.75rem}

  /* stat, contact, footer */
  .statband{padding-block:2.5rem}
  .stat{flex-direction:column;gap:.35rem}
  .contact-grid{gap:2.5rem}
  .frow{grid-template-columns:1fr;gap:1rem}
  .form{gap:1rem}
  .form .btn{justify-self:stretch}
  .ftr-in{grid-template-columns:1fr;gap:2rem;padding-block:3rem}
  .ftr-blurb{max-width:none}
}

@media (max-width:420px){
  .pgrid{grid-template-columns:1fr;gap:1.5rem}
  .pcard-desc{display:block}
  .pcard-meta{flex-direction:row;align-items:baseline;gap:1rem}
}

/* ===================================================================
   Navigation, in CSS rather than script, so a phone and a laptop behave
   identically: one page at a time, home by default, language switched by
   the same mechanism. Home sits last in the markup and is pulled back to
   the top with `order`, which lets a sibling rule hide it when another
   page is selected.
   =================================================================== */
.app main{display:flex;flex-direction:column}
.page{display:block}

/* ===================================================================
   New identity. Deep forest green surfaces, lime as the active colour,
   warm yellow carried through from the arc over the wordmark.
   =================================================================== */

/* The logo's counters and its two leaves are cut out of its own green
   field, so anything showing through them has to BE that green. Header
   and footer are therefore solid #014625, never translucent, never
   over a photograph. */
.hdr,.js .hdr,.js .hdr:not(.solid),.hdr.solid{
  background:#014625;border-bottom:1px solid rgba(166,251,103,.22);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.ftr{background:#014625}
.banner{background:#012E17;color:var(--leaf-300)}

.hdr nav a,.js .hdr:not(.solid) nav a,.hdr.solid nav a{color:rgba(255,255,255,.8)}
.hdr nav a:hover,.hdr nav a.on,.hdr.solid nav a.on{color:#fff}
.hdr .lang,.js .hdr:not(.solid) .lang,.hdr.solid .lang{
  border-color:rgba(166,251,103,.45);color:#A6FB67}
.hdr .lang:hover{background:rgba(166,251,103,.14)}

/* Buttons: lime field, deep green type. The pill shape answers the
   rounded terminals in the wordmark. */
.btn{border-radius:999px;font-weight:600;letter-spacing:.005em}
.btn-solid,.hdr .btn-solid,.hdr.solid .btn-solid{
  background:#A6FB67;color:#013A1E;border-color:#A6FB67}
.btn-solid:hover,.hdr .btn-solid:hover{background:#FCDE51;border-color:#FCDE51;color:#0C2417}
.btn-ghost{border-color:rgba(166,251,103,.5);color:#fff}
.btn-ghost:hover{background:#A6FB67;color:#013A1E;border-color:#A6FB67}

/* Softened geometry to match the mark. */
.fig .asset,.pcard-img .asset,.tfig .asset,.fig img,.tfig img{border-radius:16px}
.pcard-img{border-radius:16px;overflow:hidden}
.hero-bg,.cta-bg{border-radius:0}
.lang{border-radius:999px}

/* Scrims follow the green rather than the old navy. */
.hero-scrim{background:linear-gradient(180deg,rgba(1,34,17,.86),
  rgba(1,44,23,.70) 45%,rgba(1,50,26,.58))}

/* The rule and tick now run lime into the arc's yellow, which is the one
   gesture the logo itself makes. */
.rule,.tick,.spine-fill{border-radius:999px}

.stat-v{color:var(--leaf-700)}
.ftr-tag{color:#A6FB67}

/* ===================================================================
   Founder-led home page. The person answering the enquiry opens the
   site, and his commitments are stated before the range is shown.
   =================================================================== */
.hero-in.wide{max-width:none}
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) 270px;
  gap:4rem;align-items:center}
[dir=rtl] .hero-split{grid-template-columns:minmax(0,1fr) 270px}
.hero-portrait .asset{width:100%;aspect-ratio:4/5;border-radius:18px}
.hero-portrait-by{margin-top:.95rem;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.hero-portrait-by strong{color:rgba(255,255,255,.9);font-weight:500}
.hero-split .facts{margin-top:0}

.promises-grid{display:grid;grid-template-columns:5fr 6fr;gap:4.5rem}
.promise-list{display:block}
.promise-item{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.45rem 1.25rem;padding:1.9rem 0;border-top:1px solid rgba(255,255,255,.15)}
.promise-item:first-child{border-top:0;padding-top:0}
.promise-n{font-family:Outfit,system-ui,sans-serif;font-size:.95rem;
  line-height:1.6;color:var(--leaf-500)}
.promise-item h3{font-family:Outfit,system-ui,sans-serif;font-size:1.12rem;
  font-weight:600;line-height:1.35;color:#fff}
.promise-item p{grid-column:2;max-width:52ch;font-size:.97rem;line-height:1.65;
  color:rgba(255,255,255,.74)}

@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:2rem}
  /* The RTL override above is more specific than the single-column rule
     beside it, so on Arabic the two-column desktop grid survived down to
     phone width and the portrait sat on top of the text. Same specificity,
     stated later and inside this query, so it wins below 900px only. */
  [dir=rtl] .hero-split{grid-template-columns:1fr}
  .hero-portrait{width:172px;order:-1}
  .promises-grid{grid-template-columns:1fr;gap:2.4rem}
}

.promises-grid .rule{margin-block:1.7rem}
.promises-grid h2{margin-top:1.1rem}
/* Deeper scrim: the hero now carries a portrait and three paragraphs of text
   over the photograph rather than a single line. */
.hero-scrim{background:linear-gradient(180deg,rgba(1,32,16,.90),
  rgba(1,42,22,.80) 45%,rgba(1,48,25,.74))}
@media (max-width:900px){
  /* The kicker directly beneath already names him; the caption would repeat it. */
  .hero-portrait-by{display:none}
}

/* The leaf in the logo sits on the i of the wordmark; the headline points at it. */
.hl-i{color:var(--leaf-500)}
.a25{background-image:url(images/drip-irrigation-running-along-rows-of-young-plan.jpg)}.a26{background-image:url(images/carrots-one-halved-to-show-the-core.jpg)}
.farmfacts{display:flex;flex-wrap:wrap;gap:1.4rem 4rem;
  margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid rgba(12,36,23,.14)}
.farmfacts dt{font-family:Outfit,system-ui,sans-serif;font-size:1.3rem;
  font-weight:600;line-height:1;color:var(--nile-800)}
.farmfacts dd{margin-top:.5rem;font-size:.9rem;color:var(--ink-muted)}
@media (max-width:620px){.farmfacts{gap:1.1rem 2rem}}
.a27{background-image:url(images/rows-of-aubergine-plants-under-drip-irrigation-o.jpg)}
/* The farm photograph sits under the heading, so the column that was holding
   only two words now carries its own weight. */
.farm-fig,.bov-fig{margin-top:2.2rem}
.farm-fig .asset,.bov-fig .asset{width:100%;border-radius:16px}
/* The portrait frame is capped so it cannot tower over the text beside it.
   The landscape frame is not: at the same width it would be a third of the
   height, which reads as an afterthought rather than a picture. */
.farm-fig{max-width:24rem}
.farm-fig .asset{aspect-ratio:3/4}
.bov-fig .asset{aspect-ratio:4/3}
@media (max-width:900px){.farm-fig{max-width:20rem}.farm-fig,.bov-fig{margin-top:1.6rem}}

/* A lone button following a prose block is an inline-flex element with no
   margin of its own, so it lands hard against the last line of text. */
.prose + .btn,.lede + .btn,.prose + .btn-row{margin-top:2.6rem}
.sec > .btn:last-child{margin-bottom:.25rem}
.a28{background-image:url(images/buffalo-under-shade-housing-at-the-feed-rail.jpg)}
/* The livestock pair sits under the claim rather than beside it: these are
   wide frames and they lose their depth squeezed into a half column. */

/* Six pillars, two columns, each a short scannable list. */
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:4rem;row-gap:0}
.pillar{border-top:1px solid rgba(12,36,23,.14);padding-block:3rem}
.pillar-n{font-family:Outfit,system-ui,sans-serif;font-size:.95rem;
  line-height:1;color:var(--leaf-600)}
.pillar h3{margin-top:1rem;font-family:Outfit,system-ui,sans-serif;
  font-size:clamp(1.35rem,2.1vw,1.75rem);font-weight:600;line-height:1.22;
  letter-spacing:-.018em}
.pillar .rule{margin-top:1.25rem;width:80px}
.pillar-body{margin-top:1.5rem;max-width:50ch;font-size:.98rem;
  line-height:1.68;color:var(--ink-muted)}
@media (max-width:900px){
  .pillars{grid-template-columns:1fr;column-gap:0}
  .pillar{padding-block:2.4rem}
}

.a0{background-image:url(images/drip-irrigation-running-along-rows-of-young-plan-2.jpg)}
.a1{background-image:url(images/a1.jpg)}
.a2{background-image:url(images/a2.jpg)}
.a3{background-image:url(images/a3.jpg)}
.a4{background-image:url(images/sweet-potatoes-one-cut-to-show-the-flesh.jpg)}
.a5{background-image:url(images/golden-onions-one-halved-to-show-the-flesh.jpg)}
.a6{background-image:url(images/garlic-bulbs-one-opened-to-show-the-cloves.jpg)}
.a7{background-image:url(images/crisp-lettuce-heads-packed-close-together.jpg)}
.a8{background-image:url(images/red-cabbage-one-halved-to-show-the-layers.jpg)}
.a9{background-image:url(images/mangoes-one-cut-to-show-the-flesh.jpg)}
.a10{background-image:url(images/oranges-two-cut-to-show-the-flesh.jpg)}
.a11{background-image:url(images/freshly-picked-pears-packed-close-together.jpg)}
.a12{background-image:url(images/dates-one-opened-to-show-the-flesh.jpg)}
.a13{background-image:url(images/mandarins-two-halved-to-show-the-segments.jpg)}
.a14{background-image:url(images/growing.jpg)}
.a15{background-image:url(images/harvesting.jpg)}
.a16{background-image:url(images/carrots-being-sorted-by-hand-on-a-grading-line.jpg)}
.a17{background-image:url(images/graded-carrots-being-packed-into-a-carton.jpg)}
.a18{background-image:url(images/a-carrot-checked-by-hand-beside-a-thermometer-an.jpg)}
.a19{background-image:url(images/a-wrapped-pallet-of-cartons-being-labelled-for-s.jpg)}
.a20{background-image:url(images/shipping.jpg)}
.a21{background-image:url(images/mixed-fruit-and-vegetables-packed-together-after.jpg)}
.a22{background-image:url(images/a22.jpg)}
.a23{background-image:url(images/sprayers-moving-in-line-across-a-field-of-young-.jpg)}
.a24{background-image:url(images/nillage-logo.png)}
/* In my own words. The portrait's own backdrop matches --paper, so it is
   left to blend into the page rather than being boxed in. */
.founder-fig .asset{width:100%;aspect-ratio:4/5;background-position:top center}
.founder-name{margin-top:1rem}
.founder-role{margin-top:.55rem;font-size:.78rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}
.founder-quote{position:relative;margin:2.25rem 0 0;padding-inline-start:1.5rem;
  font-family:Outfit,system-ui,sans-serif;font-size:clamp(1.08rem,1.7vw,1.3rem);
  line-height:1.5;color:var(--nile-800)}
[lang=ar] .founder-quote{font-family:'IBM Plex Sans Arabic',sans-serif;line-height:1.85}
.founder-quote::before{content:"";position:absolute;inset-block:.15rem;
  inset-inline-start:0;width:3px;background:var(--current)}
@media (max-width:620px){
  .founder-fig{max-width:300px}
  .founder-quote{margin-top:1.75rem;padding-inline-start:1.1rem}
}

/* Compact founder note, low on the home page: a named person vouching for the
   company immediately before the enquiry ask. The full bio lives on About. */
.founder-note{display:flex;align-items:center;gap:clamp(1.5rem,4vw,3.25rem);flex-wrap:wrap}
.founder-note-fig{flex:none;width:clamp(116px,17vw,168px)}
.founder-note-fig .asset{width:100%;aspect-ratio:1/1;background-position:top center}
.founder-note-body{flex:1 1 320px;min-width:0}
.founder-note-body .rule{margin-bottom:1.5rem}
.founder-note-quote{margin:0;font-family:Outfit,system-ui,sans-serif;letter-spacing:-.01em;
  font-size:clamp(1.22rem,2.3vw,1.8rem);line-height:1.35;color:var(--nile-900)}
[lang=ar] .founder-note-quote{font-family:'IBM Plex Sans Arabic',sans-serif;
  line-height:1.7;letter-spacing:0}
.founder-note-by{margin-top:1.15rem;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint)}
.founder-note-by strong{font-weight:500;color:var(--ink-muted)}
.founder-note .ulink{margin-top:1.25rem}
@media (max-width:620px){
  .founder-note{gap:1.4rem}
  .founder-note-body{flex-basis:100%}
  .founder-note-body .rule{margin-bottom:1.1rem}
}

/* Contact: who the enquiry actually reaches, above the form so a phone reads
   it before the aside, which falls below. */
.contact-founder{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding-top:var(--sec);padding-bottom:2.5rem;
  border-bottom:1px solid rgba(136,178,56,.34)}
.contact-founder .cf-fig{flex:none;width:76px;aspect-ratio:1/1;background-position:top center}
.cf-body{flex:1 1 260px;min-width:0}
.cf-line{font-size:1.02rem;line-height:1.65;color:var(--nile-900);max-width:54ch}
.cf-by{margin-top:.75rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint)}
.cf-by strong{font-weight:500;color:var(--ink-muted)}
@media (min-width:640px){.contact-founder .cf-fig{width:92px}}

.page{display:block}
.app{display:block}

/* Status line under the enquiry form on the static build. */
.form-status{margin-top:1rem;font-size:.95rem;color:var(--nile-700);font-weight:500}
.form-status.is-error{color:#B4462A}

/* Active page in the navigation, now that there is no :target to key off. */
.hdr nav a[aria-current="page"]{background-size:100% 2px;color:#fff}
.ftr a[aria-current="page"]{color:var(--leaf-500)}

/* Arabic RTL alignment fixes only: keep decorative markers clear of text. */
[dir=rtl] .scope li{
  padding-inline-start:1.5rem;
}

@media (max-width:900px){
  /* On RTL phone/tablet layouts, keep the process spine outside the stage number. */
  [dir=rtl] .timeline .spine{inset-inline-start:0}
  [dir=rtl] .timeline .tmark{padding-inline-start:.6rem}
}

@media (max-width:620px){
  /* Give Arabic product-link descenders a little more clearance above the underline. */
  [dir=rtl] .ulink.sm{padding-bottom:7px}
}

/* ===================================================================
   Product enquiry underline refinements — narrowly scoped only.
   English desktop: the final (Mandarins & clementines) link wraps, so
   shorten its decorative line instead of letting it span the full card.
   Arabic mobile: add a little extra clearance between Arabic glyphs and
   the decorative underline. No desktop Arabic or mobile English changes.
   =================================================================== */
@media (min-width:901px){
  /* Only the final fruit card (Mandarins & clementines) needs a shorter line.
     Leave the final vegetable card (Carrots) at the normal full text width. */
  [dir=ltr] section.band .pgrid > div:last-child > .ulink.sm{
    background-size:80% 2px;
  }
}

@media (max-width:620px){
  [dir=rtl] .pgrid .ulink.sm{
    padding-bottom:18px;
  }
}
/* English phone-only process timeline: keep the spine clear of 01–07. */
@media (max-width:620px){
  [dir=ltr] .timeline .spine{inset-inline-start:0}
  [dir=ltr] .timeline .tmark{padding-inline-start:.6rem}
}


/* Arabic Products phone-only: keep the decorative section rule clear of
   the heading's upper Arabic glyphs/diacritics. This section structure is
   unique to the Products page. */
@media (max-width:620px){
  [dir=rtl] main > .wrap.sec.narrow > .rule{margin-bottom:2.25rem}
}