/* Green / farm theme. Loaded after app.css and only overrides colours and surfaces. */
:root{
  --ink:#16261c; --ink-2:#3c4a40; --muted:#6c786f; --line:#dde2d2; --bg:#f4f3ea; --card:#fffefb;
  --green:#2f8f3e; --green-d:#1f6b2d; --green-l:#e4f1dc; --forest:#143d26; --forest-d:#0d2a1a; --wheat:#e3b23c;
}
.top{background:var(--forest-d);color:#cfdccf}
header.main{border-bottom:3px solid var(--green)}
nav.primary a:hover{color:var(--green-d)}
.quote-btn{background:var(--forest)}
.quote-btn i{background:var(--wheat);color:var(--forest-d);font-weight:800}
.gsearch input{background:#f1f3e8}

/* field-row heroes */
.home-hero,.page-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 88% -20%, rgba(227,178,60,.42), transparent 46%),
    repeating-linear-gradient(104deg, rgba(255,255,255,.045) 0 3px, transparent 3px 30px),
    linear-gradient(165deg,#1f6336 0%,#14472a 55%,#0d2a1a 100%);
}
.home-hero::after,.page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background:repeating-linear-gradient(90deg,var(--wheat) 0 26px,transparent 26px 34px);opacity:.85;
}
.home-hero .eyebrow,.page-hero .eyebrow{color:var(--wheat)}
.home-hero p,.page-hero p{color:#d5e3d3}
.stats{color:#cfe0cc}
.stats b{color:var(--wheat)}
.bigsearch{box-shadow:0 10px 30px rgba(0,0,0,.25)}

.card{border-radius:14px}
.seg button.on{background:var(--forest)}
.chips button.on{background:var(--green);border-color:var(--green);color:#fff}
.btn{border-color:var(--forest);color:var(--forest)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.primary:hover{background:var(--green-d)}
.pcard{border-top:4px solid transparent}
.pcard:hover{border-top-color:var(--green)}
.pcard .ph{background:#fff}
.pcard small{color:var(--green-d)}
.eyebrow{color:var(--green-d)}
.notes li::before{color:var(--green)}
.legend b{background:var(--forest)}
.facts,.keyfacts{border-color:var(--line)}
.facts div,.keyfacts div{background:var(--card)}
.keyfacts dd{color:var(--forest)}
main h2{color:var(--forest)}
.sec-head h2::before,.section>h2::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px 8px;background:var(--green);margin-right:10px}

/* tables */
th{background:#eef2e4;color:#55634f}
tbody tr:hover{background:#f7faf0}
tr.hl{background:var(--green-l)!important}
.pn{color:var(--forest)}
.add button{border-color:var(--forest);color:var(--forest)}
.add button.in{background:var(--green);border-color:var(--green);color:#fff}
.bar{position:relative;display:block;width:130px;height:8px;background:#e3e7d6;border-radius:4px}
.bar i{position:absolute;top:0;bottom:0;min-width:4px;background:linear-gradient(90deg,#5fb04a,var(--green-d));border-radius:4px}
.bar u{position:absolute;top:-5px;width:2px;height:18px;background:#b45309;border-radius:1px}

.avatar{background:var(--green-l);color:var(--green-d)}
.pin-f{background:var(--green)}
.mapdot.f{background:var(--green)}
.cta-band{background:var(--green-l);border-color:#cfe3c4}
footer.site{background:var(--forest-d);border-top:6px solid var(--green)}
.drawer header{background:var(--forest);color:#fff}
.drawer header button{color:#fff}

/* ---- home page inspired by agriwellspares.no: photo hero, benefit band, category cards ---- */
:root{--font:"Manrope",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--display:"Sora","Manrope",system-ui,sans-serif}
h1,h2,h3,.pcard strong,.catcard strong,.rcard strong{font-family:var(--display)}
.home-hero.photo{
  padding:92px 0 84px;
  background:
    linear-gradient(90deg, rgba(10,32,20,.94) 0%, rgba(10,32,20,.78) 38%, rgba(10,32,20,.18) 72%, rgba(10,32,20,0) 100%),
    url("img/field.jpg") center/cover no-repeat,
    linear-gradient(165deg,#1f6336,#0d2a1a);
}
.home-hero.photo .eyebrow{color:#fff;display:flex;align-items:center;gap:12px}
.home-hero.photo .eyebrow span{width:34px;height:2px;background:var(--green)}
.home-hero.photo h1{max-width:none;font-size:clamp(34px,5.4vw,60px)}
.home-hero.photo p{max-width:46ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.benefits{background:#e9efe2;border-bottom:1px solid var(--line)}
.benefits .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-top:22px;padding-bottom:22px}
.benefits div{display:grid;gap:2px;padding-left:14px;border-left:3px solid var(--green)}
.benefits b{font-size:14.5px}.benefits span{font-size:13px;color:var(--muted)}
.headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:6px 0 18px}
.headrow h2{font-size:clamp(24px,3vw,34px);margin:0}
.headrow h2::before{display:none!important}
.headrow a{font-weight:700;color:var(--green-d);text-decoration:none}
.catgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.catcard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:.15s}
.catcard:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(13,42,26,.12);border-color:var(--green)}
.catcard img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#dfe7d6;display:block}
.catcard div{padding:18px 20px 20px;display:grid;gap:6px}
.catcard strong{font-size:18px}.catcard span{font-size:14.5px;color:var(--ink-2)}
.catcard em{font-style:normal;font-weight:700;color:var(--green-d);font-size:14px;margin-top:4px}
.rotary{margin-top:44px;padding:52px 0;color:#fff;
  background:repeating-linear-gradient(104deg, rgba(255,255,255,.04) 0 3px, transparent 3px 30px),linear-gradient(165deg,#1f6336,#0d2a1a)}
.rotary .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:36px;align-items:center}
.rotary .eyebrow{color:var(--wheat)}
.rotary h2{font-size:clamp(24px,3vw,34px);margin:8px 0 12px;color:#fff}
.rotary p{color:#d5e3d3;margin:0 0 20px;max-width:46ch}
.rotary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.rcard{background:#fff;color:var(--ink);border-radius:12px;padding:12px;text-decoration:none;display:grid;gap:4px;transition:.15s}
.rcard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.rcard span{aspect-ratio:4/3;display:grid;place-items:center}
.rcard img{max-height:100%;object-fit:contain}
.rcard strong{font-size:13.5px;line-height:1.25}.rcard em{font-style:normal;font-size:12px;color:var(--muted)}
.helpband{background:var(--green-l);border-top:1px solid #cfe3c4;padding:38px 0}
.helpband .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.helpband h2{margin:0 0 4px;font-size:24px}.helpband p{margin:0;color:var(--ink-2)}
#products .toolbar{margin-top:0}
footer.site{margin-top:0}
@media (max-width:900px){.benefits .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.catgrid,.rotary .wrap{grid-template-columns:minmax(0,1fr)}
  .home-hero.photo{padding:56px 0;background:linear-gradient(180deg, rgba(10,32,20,.9), rgba(10,32,20,.72)),url("img/field.jpg") center/cover no-repeat}}
/* hero slideshow */
.home-hero.photo{background:linear-gradient(165deg,#1f6336,#0d2a1a);padding:84px 0 0}
.home-hero.photo::after{display:none}
.slides,.slide{position:absolute;inset:0}
.slide{background:center/cover no-repeat;opacity:0;transition:opacity 1.2s ease}
.slide.on{opacity:1}
.slides::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(10,32,20,.94) 0%, rgba(10,32,20,.8) 36%, rgba(10,32,20,.25) 70%, rgba(10,32,20,.1) 100%),linear-gradient(0deg, rgba(10,32,20,.75) 0%, rgba(10,32,20,0) 34%)}
.home-hero.photo .wrap{position:relative;z-index:1}
.uses{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid rgba(255,255,255,.25)}
.uses button{all:unset;cursor:pointer;padding:16px 14px 20px;display:grid;gap:2px;color:#d5e3d3;border-top:3px solid transparent;margin-top:-2px;transition:.2s}
.uses button b{font-family:var(--display);font-size:14.5px;color:#fff}
.uses button span{font-size:12.5px;opacity:.85}
.uses button.on,.uses button:hover{border-top-color:var(--wheat);background:rgba(255,255,255,.08)}
.uses button:focus-visible{outline:2px solid var(--wheat)}
.credit{position:absolute;right:24px;top:-64px;font-size:11px;color:rgba(255,255,255,.7)}
@media (max-width:900px){.home-hero.photo{padding-top:52px;background:linear-gradient(165deg,#1f6336,#0d2a1a)}.uses{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px}.credit{position:static;padding:0 0 10px}}@media (max-width:900px){.slides::after{background:linear-gradient(180deg, rgba(10,32,20,.78) 0%, rgba(10,32,20,.5) 45%, rgba(10,32,20,.92) 100%)}}
/* footer, catalogue reader, maps, people links */
.top a{color:inherit;text-decoration:none}
footer.site{padding:36px 0 22px}
footer.site .wrap{display:block}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.fcols div{display:grid;gap:5px;align-content:start}
.fcols b{color:#fff;font-family:var(--display);font-size:14.5px;margin-bottom:4px}
.fcols a{color:#cfe0cc}
.fcols a:hover{color:#fff}
.fnote{margin:26px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-size:13px;color:#b7c9b5}
.fnote a{color:var(--wheat)!important;font-weight:700}
.catpick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.catbook{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:18px;align-items:center;border:2px solid var(--line)}
.catbook.on{border-color:var(--green)}
.catbook img{width:150px;border-radius:6px;box-shadow:0 6px 18px rgba(13,42,26,.25);display:block}
.catbook small{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-d)}
.catbook h2{margin:4px 0 14px}
.catbook h2::before{display:none!important}
.reader{padding:0;margin-bottom:60px;overflow:hidden;background:#e9ebe0}
.reader:fullscreen{overflow:auto;border-radius:0}
.rbar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 18px;background:var(--card);border-bottom:1px solid var(--line)}
.rbar strong{font-family:var(--display);font-size:17px;color:var(--forest)}
.rnav,.ract{display:flex;gap:10px;align-items:center}
.rnav button,.ract button{height:40px;min-width:44px;padding:0 14px;border:1px solid var(--forest);border-radius:8px;background:#fff;color:var(--forest);font-weight:700;cursor:pointer}
.rnav button:hover,.ract button:hover{background:var(--green-l)}
.rnav label{font-size:14px;color:var(--ink-2)}
.rnav input{width:64px;height:40px;border:1px solid var(--line);border-radius:8px;text-align:center}
.ract .btn{height:40px}
.stagewrap{padding:26px 16px;display:flex;justify-content:center;min-height:420px}
#book{margin:0 auto}
#book .page{background:#fff}
#book .page img{width:100%;height:100%;display:block;object-fit:contain;background:#fff}
#book.plain img{max-width:min(100%,760px);display:block;margin:0 auto;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.reader .hint{text-align:center;margin:0;padding:0 16px 16px}
.maps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
.maps iframe{width:100%;height:340px;border:0;display:block;background:#dfe7d6}
.links a.in{display:inline-flex;align-items:center;gap:6px}
.links a.in::before{content:"in";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:4px;background:#0a66c2;color:#fff;font-size:12px;font-weight:800}
.person .big{font-size:18px;font-weight:800;color:var(--forest)}
@media (max-width:900px){.fcols,.catpick,.maps{grid-template-columns:minmax(0,1fr)}.catbook{grid-template-columns:100px minmax(0,1fr)}.catbook img{width:100px}}
/* language picker and static route map */
#lang{height:40px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:0 12px;font-weight:600;font-size:13.5px;color:var(--forest);cursor:pointer;max-width:130px}
.worldmap{background:linear-gradient(180deg,#eef3e6,#e3ecd9);padding:10px}
.worldmap svg{display:block;width:100%;max-height:520px}
.wm-land circle{fill:#b9cfa9}
.wm-route{fill:none;stroke:var(--forest);stroke-width:3;stroke-dasharray:3 9;stroke-linecap:round}
.wm-plane{fill:var(--forest)}
.wm-f{fill:var(--green);stroke:#fff;stroke-width:3}
.wm-h{fill:#dc2626;stroke:#fff;stroke-width:3}
.wm-ring{fill:rgba(47,143,62,.22)}
.wm-ring.h{fill:rgba(220,38,38,.2)}
.wm-label text{font-family:var(--display);font-size:16px;font-weight:700;fill:var(--forest);paint-order:stroke;stroke:#eef3e6;stroke-width:5px;stroke-linejoin:round}
.wm-label text.k{font-family:var(--font);font-size:11px;letter-spacing:.1em;text-transform:uppercase;fill:var(--green-d)}
@media (max-width:560px){#lang{max-width:96px;padding:0 6px}.wm-label text{font-size:20px}.wm-label text.k{font-size:14px}}
/* ---- smoother hero: slow zoom, cross-fade, words fade with the picture, progress on the active tab ---- */
.slide{transition:opacity 1.8s cubic-bezier(.4,0,.2,1),transform 9s linear;transform:scale(1.09);will-change:opacity,transform}
.slide.on{transform:scale(1)}
.home-hero.photo h1,.home-hero.photo .wrap>p{transition:opacity .42s ease,transform .42s ease}
.home-hero.photo .wrap>p{transition-delay:.06s}
.home-hero.photo.swap h1,.home-hero.photo.swap .wrap>p{opacity:0;transform:translateY(14px)}
.home-hero.photo h1{min-height:2.15em}
.home-hero.photo .wrap>p{min-height:3.1em}
.uses button{position:relative;border-top-color:transparent!important}
.uses button.on::after{content:"";position:absolute;left:0;top:-3px;height:3px;width:100%;background:var(--wheat);transform-origin:left;animation:useprog var(--dwell,7000ms) linear forwards}
@keyframes useprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.slide{transition:opacity .01s;transform:none}.uses button.on::after{animation:none}}

/* ---- network map on the About page ---- */
.netcard{overflow:hidden}
.netmap{background:radial-gradient(ellipse at 78% 62%,#1c5a34 0%,#123a25 45%,#0b2416 100%);padding:14px 10px 6px}
.netmap svg{display:block;width:100%;height:auto}
.nm-land circle{fill:rgba(255,255,255,.13)}
.nm-line path{fill:none;stroke-linecap:round}
.nm-line .base{stroke:rgba(255,255,255,.14);stroke-width:1.2}
.nm-line .flow{stroke:#7ddc6a;stroke-width:1.8;stroke-dasharray:5 13;animation:nmflow 2.6s linear infinite}
.nm-line.no .base{stroke:rgba(227,178,60,.35);stroke-width:2}
.nm-line.no .flow{stroke:var(--wheat);stroke-width:2.6;stroke-dasharray:2 9;animation-duration:1.8s}
.nm-line .spark{fill:#eaffd8;filter:drop-shadow(0 0 5px #9cff7a)}
@keyframes nmflow{to{stroke-dashoffset:-36}}
.nm-node .dot{stroke:#0b2416;stroke-width:2.5}
.nm-node.cu .dot{fill:#fff}
.nm-node.no .dot{fill:var(--wheat)}
.nm-node.hq .dot{fill:#57d163}
.nm-node .pulse{fill:none;stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:nmpulse 2.6s ease-out infinite}
.nm-node.cu .pulse{stroke:#fff}.nm-node.no .pulse{stroke:var(--wheat)}.nm-node.hq .pulse{stroke:#57d163}
@keyframes nmpulse{from{transform:scale(1);opacity:.9}to{transform:scale(3.4);opacity:0}}
.nm-node text{font-family:var(--font);font-size:11.5px;font-weight:700;fill:#fff;paint-order:stroke;stroke:#0b2416;stroke-width:3.5px;stroke-linejoin:round}
.nm-node text.big{font-family:var(--display);font-size:14px}
.nm-node text.k{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;fill:#cfe6c8}
.nm-node.no text.k{fill:var(--wheat)}
.nm-line,.nm-node{transition:opacity .25s}
.netmap[data-hl="hq"] .nm-node:not(.hq),.netmap[data-hl="no"] .nm-node:not(.no),.netmap[data-hl="no"] .nm-line:not(.no),
.netmap[data-hl="cu"] .nm-node.no,.netmap[data-hl="cu"] .nm-line.no{opacity:.22}
.netlegend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.netlegend article{background:var(--card);padding:20px 22px;transition:background .2s}
.netlegend article:hover{background:#f3f8ec}
.netlegend h3{margin:8px 0 6px;font-size:18px}
.netlegend p{margin:0 0 8px;font-size:14.5px}
.pin-h{background:#b7791f}
.pin-c{background:var(--forest)}
.keyfacts dd.small{font-size:15px}
@media (prefers-reduced-motion:reduce){.nm-line .flow,.nm-node .pulse{animation:none}.nm-line .spark{display:none}}
@media (max-width:900px){.netlegend{grid-template-columns:minmax(0,1fr)}.nm-node text{font-size:15px}.nm-node text.big{font-size:18px}.nm-node text.k{font-size:12px}}

/* ---- catalogue shelf with three books ---- */
.catpick{grid-template-columns:repeat(3,minmax(0,1fr))}
.catbook{grid-template-columns:110px minmax(0,1fr);gap:16px}
.catbook img{width:110px}
.catbook h2{font-size:19px}
.catbook .cta .btn{height:40px;padding:0 14px;font-size:13px}
@media (max-width:1000px){.catpick{grid-template-columns:minmax(0,1fr)}}

/* ---- gallery ---- */
.gal{display:flex;flex-wrap:wrap;gap:10px}
.gal button{all:unset;cursor:zoom-in;flex:calc(var(--r)*200) 1 calc(var(--r)*190px);height:190px;border-radius:10px;overflow:hidden;background:#dfe5d5;position:relative}
.gal button img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gal button:hover img{transform:scale(1.06)}
.gal button:focus-visible{outline:3px solid var(--green)}
.gal.wide button{height:340px;flex-basis:calc(var(--r)*300px)}
.gal::after{content:"";flex:10 1 0}
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(8,22,14,.94);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:20px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:calc(100vh - 40px);margin:0 auto;display:block;border-radius:8px}
.lightbox button{border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;width:46px;height:46px;border-radius:50%;font-size:20px;cursor:pointer}
.lightbox button:hover{background:rgba(255,255,255,.2)}
.lb-close{position:absolute;top:16px;right:16px}
@media (max-width:560px){.gal button{height:130px;flex-basis:calc(var(--r)*130px)}.gal.wide button{height:200px}}

/* header with five menu items */
nav.primary{gap:18px}
nav.primary a{white-space:nowrap}
header.main .wrap{gap:18px}
@media (max-width:1180px){.gsearch{display:none}#lang{margin-left:auto}}

/* benefit band: one stripe per item only; photo credit on category cards */
.benefits .wrap{border-left:0;padding-left:24px}
.catcard{position:relative}
.catcard .cr{position:absolute;top:8px;right:10px;font-style:normal;font-size:10px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.catcard img{object-position:center 60%}

/* category cards: numbered, soft green body, lift on hover; quicker hero for the 3.5 s rhythm */
.catgrid{gap:28px;align-items:start}
.catcard{background:#eef7ec;border-color:#d5e6cf;border-radius:10px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.catcard:hover{transform:translateY(-8px);border-color:var(--green);box-shadow:0 18px 40px rgba(13,42,26,.16)}
.catcard img{aspect-ratio:16/9.4;object-position:center}
.catcard div{padding:30px 30px 28px;gap:0}
.catcard small{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:800;color:var(--green-d);letter-spacing:.04em}
.catcard small i{font-style:normal;font-size:22px;line-height:1;color:var(--green)}
.catcard strong{font-size:23px;line-height:1.25;margin:18px 0 14px;color:var(--forest)}
.catcard span{font-size:15px;color:var(--ink-2);min-height:3em}
.catcard em{display:flex;justify-content:space-between;align-items:center;margin-top:26px;padding-top:22px;border-top:1px solid #cfe0c8;font-size:15px}
.catcard em u{text-decoration:none}
.catcard em i{font-style:normal;font-size:20px;transition:transform .25s ease}
.catcard:hover em i{transform:translateX(6px)}
.slide{transition:opacity 1.1s cubic-bezier(.4,0,.2,1),transform 5s linear}
.home-hero.photo h1,.home-hero.photo .wrap>p{transition-duration:.3s}

/* category cards back on the plain card background */
.catcard{background:var(--card);border-color:var(--line)}
.catcard em{border-top-color:var(--line)}

/* category cards: equal height, link row pinned to the bottom */
.catgrid{align-items:stretch}
.catcard div{display:flex;flex-direction:column;flex:1}
.catcard span{min-height:0}
.catcard em{margin-top:auto}
.catcard span{margin-bottom:26px}

/* ---- product cards on one line: fixed picture box, text block of equal height ---- */
.grid{align-items:stretch}
.pcard{height:100%}
.pcard .ph{aspect-ratio:auto;height:0;padding:0 0 78%;position:relative;display:block}
.pcard .ph img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);max-height:none;object-fit:contain}
.pcard .bd{flex:1;align-content:start}
.center{text-align:center;margin:6px 0 50px}
.bigsearch button{border:0;background:none;padding:0 16px;color:var(--muted);font-size:13px;cursor:pointer;white-space:nowrap}
.bigsearch button:hover{color:var(--green-d)}
.page-hero .bigsearch{margin-top:22px}
h2.quiet{display:none}
#products .headrow{justify-content:flex-end;margin:22px 0 0}
#featured{margin-bottom:26px}
.photostrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.photostrip a{display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:#dfe5d5}
.photostrip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.photostrip a:hover img{transform:scale(1.06)}
.gal.mid button{height:230px;flex-basis:calc(var(--r)*220px)}
@media (max-width:900px){.photostrip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* product page: the whole picture always fits its box; related products; footer tagline */
.gallery .stage{position:relative;display:block;aspect-ratio:4/3}
.gallery .stage img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.drawing img{max-width:100%;height:auto;max-height:340px;object-fit:contain}
.cat-img img{max-width:100%;height:auto}
.grid.rel{margin-bottom:10px}
.ftag{margin:26px 0 0;font-family:var(--display);font-size:16px;color:#fff}
.ftag+.fnote{margin-top:10px}

/* quote list rows with picture and link */
.drawer li.linked{grid-template-columns:56px 1fr auto auto}
.qimg{width:56px;height:56px;border:1px solid var(--line);border-radius:8px;background:#fff;display:grid;place-items:center;overflow:hidden}
.qimg img{max-width:100%;max-height:100%;object-fit:contain}
.drawer li a.pn{text-decoration:none;color:var(--forest)}
.drawer li a.pn:hover{text-decoration:underline}
/* catalogue on top of the product page */
.bookbox{position:fixed;inset:0;z-index:70;background:rgba(8,22,14,.8);display:flex;flex-direction:column;padding:18px}
.bookbox[hidden]{display:none}
.bookbar{display:flex;justify-content:space-between;align-items:center;background:var(--forest);color:#fff;border-radius:12px 12px 0 0;padding:8px 10px 8px 18px;max-width:1500px;width:100%;margin:0 auto}
.bookbar a{color:#fff;font-weight:700;text-decoration:none;font-size:14px}
.bookbar button{border:0;background:rgba(255,255,255,.14);color:#fff;width:38px;height:38px;border-radius:50%;font-size:22px;cursor:pointer}
.bookbox iframe{flex:1;border:0;background:#e9ebe0;border-radius:0 0 12px 12px;max-width:1500px;width:100%;margin:0 auto}
html.embed .top,html.embed header.main,html.embed .page-hero,html.embed #pick,html.embed footer.site{display:none!important}
html.embed body{background:#e9ebe0}
html.embed main.wrap{max-width:none;padding:0}
html.embed .reader{margin:0;border:0;border-radius:0}
html.embed .reader .hint{display:none}

/* enquiry forms */
.qform{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qform input{height:40px;border:1px solid var(--line);border-radius:8px;padding:0 12px;min-width:0;font:inherit}
.qform>.btn,.qform>.note,.qform>.qrow{grid-column:1/-1}
.qform .btn{justify-content:center;height:42px}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.note.ok{color:var(--green-d);font-weight:700}
.note.err{color:#b42318;font-weight:600}
.enquiry .note{margin:0;min-height:1.2em}
.enquiry .note a{font-weight:700}

/* phone menu */
.menu-btn{display:none;width:42px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;padding:0;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:var(--forest);transition:transform .2s,opacity .2s}
body.navopen .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.navopen .menu-btn span:nth-child(2){opacity:0}
body.navopen .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:900px){
  .menu-btn{display:flex;order:5}
  header.main .wrap{gap:10px}
  #lang{margin-left:auto}
  nav.primary{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:3px solid var(--green);box-shadow:0 14px 30px rgba(13,42,26,.16);flex-direction:column;gap:0;padding:6px 0}
  body.navopen nav.primary{display:flex}
  nav.primary a{padding:15px 22px;font-size:15px;border-top:1px solid var(--line)}
  nav.primary a:first-child{border-top:0}
}
@media (max-width:420px){.quote-btn{padding:0 10px;font-size:0}.quote-btn i{font-size:12px}.quote-btn::before{content:"\1F4CB";font-size:16px}#lang{max-width:84px}.logo img{height:36px}}
#recent .grid.rel{margin-bottom:26px}

/* product picture zoom viewer */
.stage{cursor:zoom-in}
.zoomtip{position:absolute;right:10px;bottom:10px;font-size:12px;background:rgba(20,61,38,.78);color:#fff;padding:4px 9px;border-radius:999px;pointer-events:none;opacity:.85}
.drawing img{cursor:zoom-in}
.zoombox{position:fixed;inset:0;z-index:200;background:rgba(10,22,14,.94);display:flex;flex-direction:column;animation:zfade .18s ease}
@keyframes zfade{from{opacity:0}to{opacity:1}}
.zbar{display:flex;align-items:center;gap:8px;padding:10px 14px;color:#dfe8dc;font-size:14px}
.zcount{font-weight:600;min-width:48px}
.zhint{flex:1;opacity:.7;font-size:13px}
.zbtn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:20px;cursor:pointer}
.zbtn:hover{background:rgba(255,255,255,.2)}
.zview{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;padding:8px 16px 24px}
.zview img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;border-radius:6px;transition:transform .15s ease;cursor:zoom-in;user-select:none;touch-action:none;transform-origin:center center}
.zoombox.zoomed .zview img{cursor:grab;transition:none}
.znav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.znav:hover{background:rgba(255,255,255,.28)}
.znav.prev{left:12px}.znav.next{right:12px}
@media (max-width:640px){.zhint{display:none}.znav{width:40px;height:40px;font-size:24px}}

/* LinkedIn links */
.li-ic{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
a.li{white-space:nowrap}
footer.site .fcols a.iso{color:#cfe6c4}
.linkbtn{background:none;border:0;padding:0;color:#fff;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.licard{display:block;text-decoration:none;color:inherit;border-left:4px solid #0a66c2}
.licard:hover{box-shadow:0 6px 20px rgba(20,61,38,.12)}
.licard .btn{margin-top:6px}

/* ISO certificate on About us */
.isocard{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start;padding:24px}
.isothumb{border:1px solid var(--line);background:#fff;padding:0;border-radius:8px;overflow:hidden;cursor:zoom-in;box-shadow:0 8px 24px rgba(20,61,38,.12);transition:transform .2s}
.isothumb:hover{transform:translateY(-2px) rotate(-.5deg)}
.isothumb img{display:block;width:100%;height:auto}
.isobadge{display:inline-block;background:var(--wheat);color:var(--forest-d);font-weight:800;font-size:13px;letter-spacing:.06em;padding:4px 10px;border-radius:999px}
.isocard h3{margin:10px 0 8px;font-size:22px}
.isofacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin:16px 0}
.isofacts dt{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.isofacts dd{margin:2px 0 0;font-weight:600}
.isobtns{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:700px){.isocard{grid-template-columns:1fr}.isothumb{max-width:220px}.isofacts{grid-template-columns:1fr}}

/* cookie bar */
.cookiebar{position:fixed;left:16px;right:16px;bottom:16px;z-index:150;max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--green);border-radius:12px;box-shadow:0 14px 40px rgba(13,42,26,.25);padding:16px 18px;display:flex;gap:18px;align-items:center;animation:zfade .25s ease}
.cookiebar p{margin:4px 0;font-size:14px;color:var(--ink-2)}
.cookiebar a{font-size:13.5px;color:var(--green-d)}
.cb-btns{display:flex;gap:8px;flex-shrink:0}
@media (max-width:640px){.cookiebar{flex-direction:column;align-items:stretch}.cb-btns .btn{flex:1;justify-content:center}}

/* privacy page */
.prose{max-width:820px}
.prose p{line-height:1.65}

/* gallery pictures with captions: the figure takes the flex sizing, the caption sits under the picture */
.gal figure{margin:0;flex:calc(var(--r)*200) 1 calc(var(--r)*190px);min-width:0}
.gal figure button{display:block;width:100%;flex:none}
.gal.wide figure{flex-basis:calc(var(--r)*300px)}
.gal.mid figure{flex-basis:calc(var(--r)*220px)}
.gal figcaption{font-size:12.5px;line-height:1.35;color:var(--ink-2);padding:6px 2px 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:560px){.gal figure{flex-basis:calc(var(--r)*130px)}}
.zcap{flex:1;font-size:14px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zcap:empty{display:none}
.zcap:not(:empty)+.zhint{display:none}

/* product list: end of the list */
.morebar{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px}
.endnote{color:var(--muted);font-size:14px;margin:0}
.endnote::before{content:"✓ ";color:var(--green)}

/* product page before the script has drawn it (what search engines read first) */
.static-product{padding:24px 0 40px}
.static-product h1{font-size:34px;margin:8px 0 12px}
.static-product figure{display:inline-block;margin:0 12px 12px 0;width:220px;vertical-align:top}
.static-product figure img{width:100%;height:160px;object-fit:contain;background:#fff;border-radius:8px}
.static-product figcaption{font-size:12px;color:var(--muted)}
.stagecap{margin:8px 2px 0;font-size:13px;color:var(--muted);text-align:center}

/* gallery captions laid over the picture: a dark fade at the foot, the text rises on hover */
.gal figure{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(13,42,26,.10);transition:box-shadow .3s ease,transform .3s ease}
.gal figure:hover{box-shadow:0 14px 34px rgba(13,42,26,.22);transform:translateY(-2px)}
.gal figure button{border-radius:0}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:34px 14px 12px;pointer-events:none;
  color:#fff;font-size:13px;font-weight:500;line-height:1.4;letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,.35);
  background:linear-gradient(to top,rgba(10,30,18,.88) 0%,rgba(10,30,18,.55) 55%,rgba(10,30,18,0) 100%);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;transition:padding .3s ease}
.gal figcaption::before{content:"";display:block;width:26px;height:3px;border-radius:2px;background:var(--wheat);margin-bottom:7px;
  opacity:0;transform:scaleX(.3);transform-origin:left;transition:opacity .3s ease,transform .35s ease}
.gal figure:hover figcaption,.gal figure:focus-within figcaption{-webkit-line-clamp:6;padding-top:48px}
.gal figure:hover figcaption::before,.gal figure:focus-within figcaption::before{opacity:1;transform:scaleX(1)}
/* phones and tablets have no hover: show the whole caption, smaller */
@media (hover:none){.gal figcaption{font-size:12px;padding:26px 10px 9px}}

/* contact page: e-mail and phone icons in front of the addresses and numbers */
.contactpage .page-hero a[href^="mailto:"],.contactpage .page-hero a[href^="tel:"],
.contactpage .links a,.contactpage .office a[href^="mailto:"],.contactpage .office a[href^="tel:"]{display:inline-flex;align-items:center;gap:8px}
.contactpage .page-hero a[href^="mailto:"]::before,.contactpage .page-hero a[href^="tel:"]::before,
.contactpage .links a[href^="mailto:"]::before,.contactpage .links a[href^="tel:"]::before,
.contactpage .office a[href^="mailto:"]::before,.contactpage .office a[href^="tel:"]::before{
  content:"";flex:none;width:16px;height:16px;background:currentColor;opacity:.85;
  -webkit-mask:var(--ic) no-repeat center/contain;mask:var(--ic) no-repeat center/contain}
.contactpage a[href^="mailto:"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
.contactpage a[href^="tel:"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
.contactpage .page-hero p a{margin:0 4px}
/* LinkedIn card: the LinkedIn logo instead of a label, no coloured edge */
.licard{border-left:0}
.li-logo{width:34px;height:34px;display:block;margin-bottom:4px}