/* ==========================================================================
   JP Global Engineering / JPIoT
   Design direction: FIELD AT FIRST LIGHT.
   A warm bone ground, deep olive for ink and for the dark bands, sand and sage
   between them, and the company's own orange kept back for action alone.
   Headlines are set large and LIGHT, which is what stops a page reading as
   a template. Colours are the crop and the soil, not a tech palette.
   ========================================================================== */

:root{
  /* constants: the world's own colours */
  --bone:#F5EFE5;
  --bone-2:#EBE2D2;
  --paper:#FFFDF8;
  --forest:#36441D;
  --forest-2:#4A5C28;
  --forest-3:#2A3616;
  --sage:#7C914D;
  --sage-soft:#AEBE8C;
  --sand:#C9A96B;
  --olive-ink:#242818;

  /* action: sampled from the company mark, spent only on what you click */
  --accent:#E05616;
  --accent-hover:#F0752E;
  --accent-ink:#1A0A02;

  /* roles, light by default and overridden inside .dark */
  --bg:var(--bone);
  --bg-2:var(--bone-2);
  --panel:var(--paper);
  --text:var(--olive-ink);
  --text-2:#565C46;
  --text-3:#84896F;
  --line:#DCD2BF;
  --line-2:#C6B9A0;
  --line-strong:#A99B80;

  /* Fraunces has no capital J that sits on the baseline - its J drops below the line
     and hooks left, which reads as a mistake in "JPiOT". Source Serif 4 is requested
     as a single-glyph subset (text=J in the page head), so its unicode-range is U+4A:
     the browser takes the J from it and every other character from Fraunces, at the
     same widths. If that tiny file fails to load, the J simply falls back to Fraunces. */
  --display:"Source Serif 4","Fraunces",Georgia,"Times New Roman",serif;
  --body:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.16,.72,.24,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --tshadow:0 1px 2px rgba(14,18,8,.6),0 4px 18px rgba(14,18,8,.5),0 16px 56px rgba(14,18,8,.55);

  --pad:clamp(22px,5.2vw,88px);
  --maxw:1340px;
  --gap-sec:clamp(88px,13vh,180px);
  --nav-h:84px;
}

.dark{
  --bg:var(--forest);
  --bg-2:var(--forest-3);
  --panel:#3E4E23;
  --text:var(--bone);
  --text-2:#CFD6BC;
  --text-3:#9AA684;
  --line:#4E5F2C;
  --line-2:#5E7237;
  --line-strong:#7B9048;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.62;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
/* the light weight at large size is the whole point: bold headlines read cheap */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:400;font-optical-sizing:auto;
  line-height:1.05;letter-spacing:-.018em;margin:0;color:var(--text);
}
::selection{background:var(--sage);color:#12160A}

/* ------------------------------ environment ------------------------------ */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(54,68,29,.16) .5px,transparent .5px);
  background-size:3px 3px;
}

/* ------------------------------ skip ------------------------------ */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--accent);color:#fff;
  padding:13px 20px;border-radius:0 0 10px 0;font-weight:500;font-size:13px}
.skip:focus{left:0}

/* ------------------------------ nav ------------------------------ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:150;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(12px,2vw,26px);
  padding:14px var(--pad);min-height:var(--nav-h);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease),
             transform .42s var(--ease),opacity .3s var(--ease);
}
/* out of the way of a full bleed shot, and back on the way up */
.nav.tucked{transform:translateY(-104%);opacity:0;pointer-events:none}
.nav.solid{background:rgba(245,239,229,.92);border-bottom-color:var(--line);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15)}
.nav.over-dark{color:var(--bone)}
.nav.menu-open{background:var(--bone);border-bottom-color:var(--line);color:var(--olive-ink)}
.nav .brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.nav .brand img{height:clamp(40px,3.8vw,54px);width:auto;transition:filter .5s var(--ease)}
.nav.over-dark .brand img{filter:brightness(1.14)}
/* the page links sit dead centre; the language switch and the call to action
   hold the right edge on their own */
.nav .pages{display:flex;align-items:center;justify-content:center;gap:clamp(2px,.9vw,10px)}
.nav .acts{display:flex;align-items:center;justify-content:flex-end;gap:8px}

.nav .pg{
  font-family:var(--body);font-size:13.5px;font-weight:500;letter-spacing:.01em;
  color:inherit;opacity:.78;text-decoration:none;position:relative;white-space:nowrap;
  padding:10px clamp(10px,1.05vw,16px);border-radius:9px;display:inline-flex;align-items:center;
  min-height:44px;background:transparent;
  transition:opacity .35s var(--ease),background .35s var(--ease);
}
.nav .pg:hover,.nav .pg[aria-expanded="true"]{opacity:1;background:rgba(124,145,77,.14)}
.nav.over-dark .pg:hover,.nav.over-dark .pg[aria-expanded="true"]{background:rgba(245,239,229,.15)}
.nav .pg[aria-current="page"]{opacity:1}
.nav .pg[aria-current="page"]::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:6px;
  width:16px;height:2px;border-radius:2px;background:var(--accent)}
.nav .pg .car{display:inline-block;width:0;height:0;margin-left:7px;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.55;transition:transform .35s var(--ease)}
.nav .pg[aria-expanded="true"] .car{transform:rotate(180deg)}

.langbtn{
  font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.06em;
  background:transparent;border:1px solid currentColor;color:inherit;opacity:.72;
  border-radius:999px;padding:8px 13px;cursor:pointer;display:inline-flex;gap:5px;align-items:center;
  min-height:40px;transition:opacity .35s var(--ease);margin-left:8px}
.langbtn:hover{opacity:1}
.navcta{
  font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.01em;
  background:var(--accent);color:#fff;text-decoration:none;border-radius:999px;
  padding:12px 20px;white-space:nowrap;margin-left:8px;min-height:44px;
  display:inline-flex;align-items:center;
  transition:background .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.navcta:hover{background:var(--accent-hover);transform:translateY(-1px);
  box-shadow:0 12px 28px -14px rgba(224,86,22,.85)}

/* ------------------------------ mega menu ------------------------------ */
.mega{
  position:fixed;left:0;right:0;top:var(--nav-h);z-index:140;
  background:var(--bone);border-bottom:1px solid var(--line);
  padding:clamp(26px,3.4vw,48px) var(--pad) clamp(30px,3.8vw,54px);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s;
  color:var(--olive-ink);
}
.mega.open{opacity:1;visibility:visible;transform:none}
.megawrap{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:1fr auto;gap:clamp(24px,4vw,72px);align-items:start}
.megacards{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:clamp(12px,1.8vw,26px)}
.mcard{text-decoration:none;color:inherit;display:block;text-align:center;
  padding:12px 10px 18px;border-radius:16px;
  transition:background .4s var(--ease),transform .4s var(--ease)}
.mcard:hover{background:var(--paper);transform:translateY(-3px)}
.mcard .art{width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  background:linear-gradient(168deg,#E7E0CE,#DAD2BC);display:flex;align-items:center;justify-content:center}
.mcard .art svg{width:100%;height:100%;display:block}
.mcard .nm{display:block;font-family:var(--body);font-weight:600;font-size:14.5px;
  margin-top:14px;line-height:1.3}
.mcard .go{display:block;font-size:13px;color:var(--text-2);margin-top:6px;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line-2)}
.mcard:hover .go{color:var(--accent);text-decoration-color:var(--accent)}
.megaside{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,52px);
  display:grid;gap:14px;align-content:start;min-width:190px}
.megaside .hd{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:2px}
.megaside a{font-family:var(--body);font-size:15px;font-weight:500;text-decoration:none;
  color:var(--olive-ink);transition:color .3s var(--ease)}
.megaside a:hover{color:var(--accent)}
@media (max-width:1100px){
  .megawrap{grid-template-columns:1fr}
  .megaside{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:22px}
}
.megaveil{position:fixed;inset:0;z-index:130;background:rgba(20,24,12,.34);
  opacity:0;visibility:hidden;transition:opacity .38s var(--ease),visibility .38s}
.megaveil.open{opacity:1;visibility:visible}

/* ------------------------------ mobile sheet ------------------------------ */
.menubtn{display:none;background:transparent;border:1px solid currentColor;border-radius:999px;
  color:inherit;font-family:var(--body);font-size:12.5px;font-weight:500;letter-spacing:.04em;
  padding:11px 16px;cursor:pointer;margin-left:8px;min-height:44px;opacity:.85}
.menubtn:hover{opacity:1}
.sheet{position:fixed;inset:0;z-index:145;background:var(--bone);color:var(--olive-ink);
  overflow-y:auto;padding:calc(var(--nav-h) + 18px) var(--pad) 56px;
  opacity:0;pointer-events:none;transition:opacity .42s var(--ease)}
.sheet.open{opacity:1;pointer-events:auto}
.sheet .grp{border-bottom:1px solid var(--line);padding:6px 0}
.sheet a.top{display:flex;align-items:baseline;gap:14px;font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,8vw,2.8rem);letter-spacing:-.02em;text-decoration:none;
  padding:15px 0;color:var(--olive-ink);
  transform:translateY(14px);opacity:0;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.sheet.open a.top{opacity:1;transform:none}
.sheet.open .grp:nth-child(1) a.top{transition-delay:.05s}
.sheet.open .grp:nth-child(2) a.top{transition-delay:.1s}
.sheet.open .grp:nth-child(3) a.top{transition-delay:.15s}
.sheet.open .grp:nth-child(4) a.top{transition-delay:.2s}
.sheet.open .grp:nth-child(5) a.top{transition-delay:.25s}
.sheet a.top span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--sage)}
.sheet .subs{display:grid;gap:2px;padding:0 0 14px 34px}
.sheet .subs a{font-family:var(--body);font-size:15px;font-weight:500;text-decoration:none;
  color:var(--text-2);padding:8px 0}
.sheet .subs a:hover{color:var(--accent)}
@media (max-width:1080px){
  .nav{grid-template-columns:auto 1fr}
  .nav .pages{display:none}
  .menubtn{display:inline-flex;align-items:center}
}
@media (max-width:520px){ .navcta{display:none} }

/* ------------------------------ buttons ------------------------------ */
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:.005em;
  padding:15px 28px;border-radius:999px;text-decoration:none;border:1px solid transparent;
  min-height:50px;
  transition:background .4s var(--ease),border-color .4s var(--ease),
             transform .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.btn-1{background:var(--accent);color:#fff}
.btn-1:hover{background:var(--accent-hover);transform:translateY(-2px);
  box-shadow:0 16px 34px -16px rgba(224,86,22,.85)}
.btn-2{border-color:var(--line-strong);color:var(--text)}
.btn-2:hover{border-color:var(--text);transform:translateY(-2px)}
.dark .btn-2{border-color:rgba(245,239,229,.4);color:var(--bone)}
.dark .btn-2:hover{border-color:var(--bone)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ------------------------------ section shell ------------------------------ */
main{position:relative;z-index:2;background:var(--bg)}
.sec{padding:var(--gap-sec) var(--pad);position:relative;overflow:hidden;
  background:var(--bg);color:var(--text)}
.sec.alt{background:var(--bg-2)}
.sec.dark{background:var(--forest)}
.sec.dark.alt{background:var(--forest-3)}
.wrap{max-width:var(--maxw);margin:0 auto;position:relative}

.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sage);display:flex;align-items:center;gap:12px;margin-bottom:24px}
.dark .kicker{color:var(--sage-soft)}
.kicker::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6;flex:0 0 auto}
.h1{font-size:clamp(2.7rem,6.6vw,5.4rem);letter-spacing:-.024em;max-width:17ch}
.h2{font-size:clamp(2.1rem,4.4vw,3.7rem);max-width:19ch}
.h3{font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.014em}
.lede{margin-top:24px;color:var(--text-2);font-size:clamp(1.04rem,1.32vw,1.24rem);max-width:56ch}
.rule{height:1px;background:var(--line);margin:clamp(40px,6vh,68px) 0}
/* the JPIoT lockup is drawn with pale outlines for a dark ground, so on the bone
   page it sits on its own forest chip instead of floating unreadably */
.prodmark{height:clamp(46px,4.2vw,62px);width:auto;background:var(--forest);
  border-radius:16px;padding:14px 20px;margin-bottom:30px;box-sizing:content-box}

/* entrances */
.rise{opacity:0;transform:translateY(28px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.in .rise,.rise.in{opacity:1;transform:none}
.stag>*{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(1){transition-delay:.02s}
.stag.in>*:nth-child(2){transition-delay:.09s}
.stag.in>*:nth-child(3){transition-delay:.16s}
.stag.in>*:nth-child(4){transition-delay:.23s}
.stag.in>*:nth-child(5){transition-delay:.3s}
.stag.in>*:nth-child(6){transition-delay:.37s}
.stag.in>*:nth-child(7){transition-delay:.44s}
.stag.in>*:nth-child(8){transition-delay:.51s}
.stag.in>*:nth-child(9){transition-delay:.58s}
.stag.in>*:nth-child(10){transition-delay:.65s}
.stag.done>*:nth-child(n){transition-delay:0s!important}

/* ------------------------------ page hero ------------------------------ */
.phero{position:relative;padding:calc(var(--gap-sec) + var(--nav-h)) var(--pad) var(--gap-sec);
  overflow:hidden;background:var(--bg);color:var(--text)}
.phero.dark{background:var(--forest)}
.phero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 44% at 88% 0%,rgba(124,145,77,.20),transparent 64%)}
.phero .wrap{z-index:1}
.phero .lede{max-width:60ch;font-size:clamp(1.08rem,1.5vw,1.36rem)}
.pmeta{display:flex;flex-wrap:wrap;gap:clamp(26px,5vw,76px);margin-top:clamp(42px,6vh,72px);
  padding-top:32px;border-top:1px solid var(--line)}
.pmeta div{min-width:106px}
.pmeta .n{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.6vw,3rem);
  letter-spacing:-.026em;line-height:1;color:var(--forest);font-variant-numeric:tabular-nums}
.dark .pmeta .n,.phero.dark .pmeta .n{color:var(--bone)}
.pmeta .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);margin-top:11px}

/* ------------------------------ client logo wall ------------------------------
   Two tracks drifting opposite ways. Each track is duplicated so the loop point
   never opens a gap on a wide screen, and hovering holds it still to read. */
.lfield{position:relative;margin-top:clamp(44px,6vh,72px);
  height:clamp(330px,38vw,440px);
  perspective:1300px;perspective-origin:50% 46%}
/* a soft pool of light under the field, so the plates read as suspended
   over something rather than floating on a flat sheet */
.lfield::before{content:"";position:absolute;inset:6% 2% 4%;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 46%,
    rgba(124,145,77,.16) 0%,rgba(124,145,77,.07) 46%,rgba(124,145,77,0) 78%)}
.lspace{position:absolute;inset:0;transform-style:preserve-3d;
  /* no transition here on purpose: the script eases --px/--py itself, and a
     transition on top of that turns the lean to syrup */
  transform:rotateX(calc(var(--py,0) * -7deg)) rotateY(calc(var(--px,0) * 12deg))}
.lfield{--gx:clamp(116px,14.8vw,216px);--gy:clamp(104px,11.2vw,158px)}

.lcard{position:absolute;left:50%;top:50%;
  /* deliberately narrower than --gx: the plates sit at different depths, so
     perspective drags them sideways, and without slack they collide */
  width:clamp(120px,12vw,168px);height:clamp(84px,8.3vw,116px);
  /* --near runs 0 at the back of the field to 1 at the front, and it is the one
     number that drives size, haze and dimming together */
  --near:calc((var(--z) + 220) / 320);
  transform:translate3d(calc(var(--x) * var(--gx)),calc(var(--y) * var(--gy)),calc(var(--z) * 1px))
            translate(-50%,-50%);
  filter:blur(calc((1 - var(--near)) * 1.1px));
  opacity:calc(.66 + .34 * var(--near));
  transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .45s var(--ease),opacity .45s var(--ease);
  cursor:default}
.lface{position:absolute;inset:0;border-radius:16px;background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 22px 44px -26px rgba(36,40,24,.55),0 3px 8px -4px rgba(36,40,24,.2);
  display:flex;align-items:center;justify-content:center;padding:clamp(9px,1vw,15px);
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease)}
.lface img{width:100%;height:100%;object-fit:contain;
  filter:saturate(.8) contrast(.97);transition:filter .45s var(--ease)}
.lname{position:absolute;left:50%;top:calc(100% + 11px);transform:translateX(-50%) translateY(4px);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--forest);white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}

/* the lift: the plate comes forward out of the field and sharpens as it arrives */
.lcard:hover{
  transform:translate3d(calc(var(--x) * var(--gx)),calc(var(--y) * var(--gy)),calc((var(--z) + 210) * 1px))
            translate(-50%,-50%);
  filter:blur(0);opacity:1;z-index:6}
.lcard:hover .lface{border-color:var(--sage);
  box-shadow:0 40px 70px -30px rgba(36,40,24,.6),0 6px 14px -6px rgba(36,40,24,.26)}
.lcard:hover .lface img{filter:none}
.lcard:hover .lname{opacity:.8;transform:translateX(-50%) translateY(0)}

/* the arrival: plates fly in from the back of the field, nearest first */
.lfield:not(.in) .lcard{opacity:0;
  transform:translate3d(calc(var(--x) * var(--gx)),calc(var(--y) * var(--gy)),-760px)
            translate(-50%,-50%)}
.lfield.in .lcard{transition-delay:calc(var(--i) * 70ms)}
.lfield.in .lcard:hover{transition-delay:0ms}

.walknote{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);margin-top:26px;text-align:center}

/* Depth needs room. Under the breakpoint the field flattens to an ordinary grid,
   which is more legible on a phone than a perspective nobody can lean into. */
@media (max-width:780px){
  .lfield{height:auto;perspective:none;--gx:0;--gy:0}
  .lfield::before{display:none}
  .lspace{position:static;transform:none;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lcard{position:static;width:auto;height:auto;aspect-ratio:3/2;
    transform:none;filter:none;opacity:1}
  .lfield:not(.in) .lcard{transform:translateY(16px)}
  .lcard:hover{transform:none}
  .lname{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lspace{transition:none}
  .lcard{transition:none;filter:none;opacity:1}
  .lfield:not(.in) .lcard{opacity:1;
    transform:translate3d(calc(var(--x) * var(--gx)),calc(var(--y) * var(--gy)),calc(var(--z) * 1px))
              translate(-50%,-50%)}
}

/* ------------------------------ soil reading cards ------------------------------ */
.soil7{margin-top:clamp(46px,6vh,76px);display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.5vw,20px)}
.soil7 .sc:last-child{grid-column:span 2}
@media (max-width:1000px){.soil7{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.soil7{grid-template-columns:1fr}.soil7 .sc:last-child{grid-column:span 1}}
.sc{background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:12px;
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.sc:hover{border-color:var(--sage);transform:translateY(-3px)}
.sc .no{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--sage)}
.sc h3{font-size:clamp(1.08rem,1.7vw,1.34rem);letter-spacing:-.014em}
.sc h3 em{font-style:normal;font-family:var(--mono);font-size:.62em;color:var(--text-3);
  letter-spacing:.1em;margin-left:8px}
.sc p{color:var(--text-2);font-size:.94rem;line-height:1.62}
.sc .gauge{height:4px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:auto}
.sc .gauge i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(to right,var(--sage),var(--sand));
  transition:width 1.5s var(--ease)}
.soil7.in .sc .gauge i{width:var(--fill,60%)}
@media (prefers-reduced-motion:reduce){.sc .gauge i{width:var(--fill,60%)}}

/* ------------------------------ product cards ------------------------------ */
.pcards{margin-top:clamp(46px,7vh,84px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2.2vw,30px)}
.pc{background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease)}
.pc:hover{transform:translateY(-6px);border-color:var(--line-2);
  box-shadow:0 26px 54px -30px rgba(36,40,24,.5)}
.dark .pc{background:var(--forest-2);border-color:var(--line)}
.pc .art{aspect-ratio:4/3;background:linear-gradient(168deg,#E9E2D0,#DBD2BB);overflow:hidden}
.dark .pc .art{background:linear-gradient(168deg,#415223,#2F3C19)}
.pc .art svg{width:100%;height:100%;display:block;transition:transform 1.1s var(--ease)}
.pc:hover .art svg{transform:scale(1.04)}
.pc .body{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:11px;flex:1}
.pc .tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.pc h3{font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:-.016em}
.pc p{color:var(--text-2);font-size:.97rem;line-height:1.6}
.svclist{list-style:none;padding:0;margin:16px 0 0}
.svclist li{font-size:.92rem;color:var(--text-2);padding:9px 0;border-top:1px solid var(--line);
  display:flex;gap:11px;align-items:baseline}
.svclist li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:var(--sage);transform:translateY(-2px)}
.pc .go{margin-top:auto;padding-top:12px;font-weight:600;font-size:14px;color:var(--accent);
  display:inline-flex;align-items:center;gap:8px}
.pc .go::after{content:"";width:14px;height:1px;background:currentColor;
  transition:width .45s var(--ease)}
.pc:hover .go::after{width:26px}

/* ------------------------------ spec list ------------------------------ */
.specs{margin-top:clamp(40px,6vh,64px);border-top:1px solid var(--line)}
.spec{display:grid;grid-template-columns:minmax(170px,.72fr) 1.28fr;gap:clamp(16px,3vw,52px);
  padding:clamp(19px,2.4vh,28px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.spec .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.spec .v{font-size:1.02rem;color:var(--text)}
@media (max-width:760px){.spec{grid-template-columns:1fr;gap:8px}}

/* ------------------------------ ledger ------------------------------ */
.ledger{margin-top:clamp(42px,6vh,70px);border-top:1px solid var(--line)}
.lrow{display:grid;grid-template-columns:1fr auto auto;gap:clamp(14px,3vw,38px);align-items:baseline;
  padding:clamp(19px,2.6vh,30px) 0;border-bottom:1px solid var(--line);position:relative}
.lrow .who{font-family:var(--display);font-weight:400;font-size:clamp(1.12rem,2.1vw,1.82rem);
  letter-spacing:-.016em}
.lrow .what{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);text-align:right}
.lrow .num{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.9vw,2.5rem);
  letter-spacing:-.024em;min-width:2.8ch;text-align:right;color:var(--text);
  font-variant-numeric:tabular-nums;transition:color .8s var(--ease)}
.lrow .num i{font-style:normal;font-family:var(--mono);font-size:.34em;letter-spacing:.16em;
  color:var(--text-3);margin-left:10px;text-transform:uppercase}
.lrow::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:var(--fill,0%);
  background:linear-gradient(to right,var(--sage),transparent);transition:width 1.2s var(--ease)}
.lrow.lit::after{--fill:100%}
.lrow.lit .num{color:var(--sage)}
.dark .lrow.lit .num{color:var(--sage-soft)}
.ltotal{display:flex;justify-content:space-between;align-items:baseline;padding-top:34px;gap:20px;flex-wrap:wrap}
.ltotal .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3)}
.ltotal .big{font-family:var(--display);font-weight:400;font-size:clamp(3rem,7.6vw,5.8rem);
  letter-spacing:-.032em;line-height:1;font-variant-numeric:tabular-nums;color:var(--forest)}
.dark .ltotal .big{color:var(--bone)}
@media (max-width:660px){.lrow{grid-template-columns:1fr auto}.lrow .what{display:none}}

/* ------------------------------ chain ------------------------------ */
.chain{margin-top:clamp(46px,7vh,84px);position:relative}
.chainsvg{position:absolute;left:0;top:36px;width:100%;height:2px;overflow:visible}
.chainsvg line{stroke:var(--line);stroke-width:1}
.chainsvg .draw{stroke:var(--sage);stroke-width:1.4;
  stroke-dasharray:var(--len,1000);stroke-dashoffset:calc(var(--len,1000) * (1 - var(--d,0)))}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.4vw,34px);position:relative}
.step .dot{width:13px;height:13px;border-radius:50%;background:var(--bg);
  border:1.5px solid var(--line-2);margin:30px 0 24px;position:relative;
  transition:border-color .7s var(--ease)}
.step.lit .dot{border-color:var(--sage)}
.step.lit .dot::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--sage)}
.step h3{font-size:clamp(1.1rem,1.8vw,1.42rem)}
.step .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--sage);
  display:block;margin-bottom:10px}
.step p{margin-top:12px;color:var(--text-2);font-size:.95rem;line-height:1.6}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:0}
  .chainsvg{left:6px;top:0;width:2px;height:100%}
  .step{display:grid;grid-template-columns:auto 1fr;gap:0 24px;padding-bottom:28px}
  .step .dot{margin:6px 0 0}
  .step .txt,.step .n{grid-column:2}
}

/* ------------------------------ measure grid ------------------------------ */
.mgrid{margin-top:clamp(42px,6vh,66px);display:grid;gap:1px;background:transparent;
  border:1px solid transparent;grid-template-columns:repeat(5,1fr);
  transition:background .7s var(--ease),border-color .7s var(--ease)}
.mgrid.in,.mgrid:not(.stag){background:var(--line);border-color:var(--line)}
.mgrid.pests{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.mgrid,.mgrid.pests{grid-template-columns:repeat(2,1fr)}}
.mcell{background:var(--bg);padding:clamp(18px,2.4vw,28px);min-height:124px;
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  transition:background .5s var(--ease)}
.sec.alt .mcell{background:var(--bg-2)}
.mcell:hover{background:var(--panel)}
.mcell .u{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--sage);text-transform:uppercase}
.mcell .t{font-family:var(--display);font-weight:400;font-size:clamp(1.02rem,1.5vw,1.24rem);
  letter-spacing:-.012em}
.mcell.pest .u{color:var(--accent)}

/* ------------------------------ device / readouts ------------------------------ */
.devgrid{margin-top:clamp(46px,7vh,80px);display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(26px,4vw,66px);align-items:center}
@media (max-width:940px){.devgrid{grid-template-columns:1fr}}
.screenframe{border:1px solid var(--line);border-radius:22px;background:var(--forest);
  padding:13px;position:relative;overflow:hidden}
.screenframe .inner{border-radius:14px;overflow:hidden;background:var(--forest-3);
  display:flex;align-items:center;justify-content:center;position:relative}
.screenframe .inner:has(img){aspect-ratio:16/10}
.screenframe img{width:100%;height:100%;object-fit:cover}
.readouts{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:11px;padding:20px}
.ro{border:1px solid #4E5F2C;border-radius:13px;padding:15px 16px;background:rgba(78,95,44,.35)}
.ro .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#9AA684}
.ro .v{font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,2.4vw,1.7rem);
  letter-spacing:-.022em;margin-top:7px;color:var(--bone);font-variant-numeric:tabular-nums}
.ro .v em{font-style:normal;font-size:.44em;color:#9AA684;margin-left:5px;font-family:var(--mono)}
.ro.ok .v{color:var(--sage-soft)}
.ro .bar{height:2px;background:#4E5F2C;margin-top:11px;border-radius:2px;overflow:hidden}
.ro .bar i{display:block;height:100%;background:var(--sage-soft);width:var(--p,50%);border-radius:2px}
.devlist{list-style:none;padding:0;margin:28px 0 0}
.devlist li{display:flex;gap:16px;align-items:flex-start;padding:17px 0;border-top:1px solid var(--line);
  color:var(--text-2);font-size:.99rem}
.devlist li b{color:var(--text);font-weight:400;font-family:var(--display);
  display:block;margin-bottom:6px;font-size:1.16rem;letter-spacing:-.014em}
.devlist li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--sage);margin-top:11px}

/* ------------------------------ deployment map + hold ------------------------------ */
.deploywrap{display:grid;grid-template-columns:1fr minmax(300px,420px);
  gap:clamp(28px,4vw,66px);align-items:center;margin-top:clamp(46px,6vh,76px)}
@media (max-width:1000px){.deploywrap{grid-template-columns:1fr}}
.mapbox{position:relative;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:var(--forest);width:100%;aspect-ratio:2.15/1}
@media (max-width:620px){.mapbox{aspect-ratio:1.55/1}}
#mymap{width:100%;height:100%;display:block}
#mymap .st{fill:#2E3A18;stroke:#4A5C28;stroke-width:.8;
  transition:fill .85s var(--ease),stroke .85s var(--ease)}
#mymap .st.on{fill:#7C914D;stroke:#C7DA9C}
#mymap .mk{fill:var(--accent);opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease);
  transform-box:fill-box;transform-origin:center;transform:scale(.2)}
#mymap .mk.on{opacity:1;transform:scale(1)}
.mapcount{position:absolute;left:26px;top:22px;pointer-events:none}
.mapcount .n{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,5.6vw,3.9rem);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--bone)}
.mapcount .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage-soft);margin-top:8px}
.holdbtn{position:relative;width:100%;margin-top:24px;border:1px solid var(--line-strong);
  background:var(--panel);color:var(--text);border-radius:16px;padding:21px 26px;
  cursor:pointer;overflow:hidden;font-family:var(--body);font-size:14px;font-weight:600;
  letter-spacing:.02em;transition:border-color .5s var(--ease);
  touch-action:none;-webkit-user-select:none;user-select:none}
.holdbtn:hover{border-color:var(--sage)}
.holdbtn .fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--h,0)*100%);
  background:linear-gradient(to right,rgba(124,145,77,.32),rgba(224,86,22,.22));pointer-events:none}
.holdbtn .lab{position:relative}
.holdbtn.done{border-color:var(--sage)}
.dcount{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin-top:16px;display:block}
.note{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-3);
  margin-top:18px;line-height:1.85}

/* ------------------------------ objections ------------------------------ */
.obj{margin-top:clamp(44px,6vh,74px);display:grid;gap:1px;background:transparent;
  border:1px solid transparent;transition:background .7s var(--ease),border-color .7s var(--ease)}
.obj.in,.obj:not(.stag){background:var(--line);border-color:var(--line)}
.ob{background:var(--bg);padding:clamp(26px,3.6vw,52px);display:grid;
  grid-template-columns:minmax(210px,.72fr) 1.28fr;gap:clamp(18px,3vw,52px);align-items:start}
.sec.alt .ob{background:var(--bg-2)}
@media (max-width:860px){.ob{grid-template-columns:1fr;gap:18px}}
.ob .qn{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage);margin-bottom:14px}
.ob .q{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2.5vw,1.95rem);
  letter-spacing:-.018em;line-height:1.18;color:var(--text)}
.ob .a{color:var(--text-2);font-size:1.03rem;line-height:1.78}
.ob .a b{color:var(--text);font-weight:600}

/* ------------------------------ mosaic ------------------------------ */
.mosaic{margin-top:clamp(44px,6vh,74px);display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(9px,1.2vw,18px)}
.mo{position:relative;overflow:hidden;border-radius:18px;background:var(--panel);
  border:1px solid var(--line);margin:0}
.mo img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease)}
.mo:hover img{transform:scale(1.05)}
.mo figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;
  background:linear-gradient(to top,rgba(20,26,10,.92),transparent);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#F5EFE5;line-height:1.55}
.mo.a,.mo.b{grid-column:span 3;aspect-ratio:16/10}
.mo.c,.mo.d,.mo.e{grid-column:span 2;aspect-ratio:4/3}
@media (max-width:780px){.mosaic{grid-template-columns:repeat(2,1fr)}
  .mo.a,.mo.b,.mo.c,.mo.d,.mo.e{grid-column:span 2;aspect-ratio:16/10}}

/* ------------------------------ division rows ------------------------------ */
.dlist{margin-top:clamp(44px,6vh,72px);border-top:1px solid var(--line)}
.drow{display:grid;grid-template-columns:auto minmax(190px,.85fr) 1.5fr;
  gap:clamp(16px,3vw,54px);padding:clamp(26px,3.2vh,42px) 0;
  border-bottom:1px solid var(--line);align-items:start;position:relative;
  text-decoration:none;color:inherit}
.drow.has4{grid-template-columns:auto minmax(180px,.78fr) 1.1fr .82fr}
.drow::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--sage);transition:width .9s var(--ease)}
.drow:hover::after{width:100%}
.drow .n{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--sage);padding-top:9px}
.drow h3{font-size:clamp(1.24rem,2.1vw,1.78rem);letter-spacing:-.016em}
.drow p{color:var(--text-2);font-size:1rem;line-height:1.7}
.drow ul{margin:0;padding:0;list-style:none}
.drow ul li{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--text-3);
  padding:7px 0;border-top:1px solid var(--line)}
.drow ul li:first-child{border-top:0;padding-top:0}
@media (max-width:920px){
  .drow,.drow.has4{grid-template-columns:auto 1fr;gap:4px 22px}
  .drow h3,.drow p,.drow ul{grid-column:2}
  .drow p{margin-top:11px}
  .drow ul{margin-top:16px}
}

/* ------------------------------ recognition ------------------------------ */
.recog{margin-top:clamp(42px,6vh,66px);border-top:1px solid var(--line)}
.rr{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,54px);
  padding:clamp(21px,2.6vh,34px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.rr .when{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--sage);
  text-transform:uppercase;white-space:nowrap}
.rr .what{font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,1.9vw,1.5rem);
  letter-spacing:-.014em}
.rr .what small{display:block;font-family:var(--body);font-size:.92rem;
  color:var(--text-2);margin-top:10px;letter-spacing:0;line-height:1.65}
.mou{margin-top:clamp(38px,5vh,58px);display:flex;flex-wrap:wrap;gap:11px;align-items:center}
.mou .tag{font-family:var(--body);font-size:13.5px;font-weight:500;
  border:1px solid var(--line-2);border-radius:999px;padding:11px 19px;color:var(--text-2);
  transition:border-color .45s var(--ease),color .45s var(--ease)}
.mou .tag:hover{border-color:var(--sage);color:var(--text)}
.mou .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-3);margin-right:8px}

/* ------------------------------ founder ------------------------------ */
.founder{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,76px);align-items:center}
@media (max-width:920px){.founder{grid-template-columns:1fr}}
.fquote{font-family:var(--display);font-weight:400;font-size:clamp(1.65rem,3.4vw,2.95rem);
  letter-spacing:-.02em;line-height:1.2;margin:0;color:var(--text)}
.fquote em{font-style:italic;color:var(--sage)}
.dark .fquote em{color:var(--sage-soft)}
.fname{margin-top:34px;font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text)}
.frole{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--text-3);margin-top:9px}
.fcreds{list-style:none;padding:0;margin:0}
.fcreds li{padding:18px 0;border-top:1px solid var(--line);color:var(--text-2);font-size:.99rem}
.fcreds li b{display:block;color:var(--text);font-family:var(--display);font-weight:400;
  font-size:1.18rem;letter-spacing:-.014em;margin-bottom:6px}

/* ------------------------------ values ------------------------------ */
.vals{margin-top:clamp(42px,6vh,66px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:transparent;
  border:1px solid transparent;transition:background .7s var(--ease),border-color .7s var(--ease)}
.vals.in,.vals:not(.stag){background:var(--line);border-color:var(--line)}
.val{background:var(--bg);padding:clamp(22px,2.6vw,34px)}
.sec.alt .val{background:var(--bg-2)}
.val .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--sage)}
.val h3{font-size:clamp(1.1rem,1.7vw,1.34rem);margin:16px 0 12px}
.val p{color:var(--text-2);font-size:.94rem;line-height:1.62}

/* ------------------------------ contact ------------------------------ */
.talkgrid{margin-top:clamp(42px,6vh,66px);display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,76px)}
@media (max-width:940px){.talkgrid{grid-template-columns:1fr}}
.phones{display:grid;gap:13px}
.pcard{display:flex;align-items:center;gap:20px;border:1px solid var(--line);
  border-radius:18px;padding:21px 25px;text-decoration:none;background:var(--panel);
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.pcard:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 20px 40px -26px rgba(36,40,24,.55)}
.pcard .num{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.7vw,2rem);
  letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.pcard .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);margin-top:7px}
.pcard .go{margin-left:auto;font-family:var(--body);font-size:13.5px;font-weight:600;
  color:var(--accent);white-space:nowrap}
.deets{list-style:none;padding:0;margin:0}
.deets li{padding:20px 0;border-top:1px solid var(--line)}
.deets .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3)}
.deets .v{margin-top:10px;color:var(--text);line-height:1.7}
.deets a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease)}
.deets a:hover{border-bottom-color:var(--accent)}

/* ------------------------------ closing band ------------------------------ */
.closer{background:var(--forest);color:var(--bone);position:relative;overflow:hidden}
.closer::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 52% at 84% 108%,rgba(224,86,22,.26),transparent 62%)}
.closer .wrap{position:relative;z-index:1}
.closer .h2,.closer .kicker{color:var(--bone)}
.closer .kicker{color:var(--sage-soft)}
.closer .lede{color:#CFD6BC}
.closer .btn-2{border-color:rgba(245,239,229,.42);color:var(--bone)}
.closer .btn-2:hover{border-color:var(--bone)}

/* ------------------------------ footer ------------------------------ */
footer{background:var(--forest-3);color:var(--bone);
  padding:clamp(54px,7vh,90px) var(--pad) clamp(34px,5vh,56px);position:relative;z-index:2}
.frow{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.35fr 1fr;
  gap:clamp(28px,4vw,76px);align-items:start}
@media (max-width:820px){.frow{grid-template-columns:1fr}}
footer .logo{height:48px;width:auto;margin-bottom:26px;filter:brightness(1.14)}
footer p{color:#CFD6BC;font-size:.96rem;line-height:1.75;max-width:46ch}
.fmeta{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#9AA684;
  margin-top:22px;line-height:2.1}
.fnav{display:grid;gap:13px;justify-items:start}
.fnav a{font-family:var(--body);font-size:14px;font-weight:500;
  color:#CFD6BC;text-decoration:none;transition:color .4s var(--ease)}
.fnav a:hover{color:var(--bone)}
.fhd{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:#8B9877;margin-bottom:2px}
.fhd+.fhd,.fnav .fhd:not(:first-child){margin-top:20px}
/* both numbers read as one line, the way you would say them out loud */
.fphones{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
.fphones a{font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.28rem);
  letter-spacing:-.012em;color:var(--bone);font-variant-numeric:tabular-nums}
.fphones a:hover{color:var(--sage-soft)}
.fphones span{color:#7E8B6A}
/* follow us: four round marks in the bar's own outline style; each link names its
   account for a screen reader, and a pointer gets the same as a tooltip */
.fsocial{display:flex;flex-wrap:wrap;gap:10px}
.fnav .fsocial a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(245,239,229,.3);color:var(--bone);
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)}
.fnav .fsocial a:hover{border-color:var(--sage-soft);background:rgba(174,190,140,.12);transform:translateY(-2px)}
.fnav .fsocial a:focus-visible{outline:2px solid var(--sage-soft);outline-offset:3px}
.fsocial svg{width:18px;height:18px;display:block}
.fbot{max-width:var(--maxw);margin:clamp(40px,5vh,64px) auto 0;padding-top:28px;
  border-top:1px solid #4E5F2C;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#9AA684}


/* ------------------------------ product page hero ------------------------------ */
.phero .wrap:has(.prodhero){display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(30px,4vw,76px);align-items:center}
@media (max-width:900px){.phero .wrap:has(.prodhero){grid-template-columns:1fr}}
.prodhero{border-radius:26px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(168deg,#E9E2D0,#DBD2BB)}
.prodhero img{width:100%;height:auto;display:block}

/* seven readings divide exactly at both breakpoints, so no cell is left stranded */
.mgrid.seven{grid-template-columns:repeat(7,1fr)}
@media (max-width:1000px){.mgrid.seven{grid-template-columns:1fr}}

/* the mega-menu art fills its tile */
.mcard .art img{width:100%;height:100%;object-fit:cover;display:block}
.pc .art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.pc:hover .art img{transform:scale(1.04)}
a.go{text-decoration:none}

/* anchored sections must clear the fixed bar */
[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------ reduced motion ------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rise,.stag>*{opacity:1!important;transform:none!important}
  .lrow::after{width:100%}
  .lrow .num{color:var(--sage)}
  .step .dot{border-color:var(--sage)}
  .chainsvg .draw{stroke-dashoffset:0}
  #mymap .st{fill:#7C914D;stroke:#C7DA9C}
  #mymap .mk{opacity:1;transform:none}
  .mo img{transform:none!important}
  .mega,.sheet{transition:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ==========================================================================
   JPIoT system pages: the seven sub systems, the working loop, and the bot.
   Everything here is additive. Nothing above this line is touched.
   ========================================================================== */

/* ------------------------------ the seven cards ------------------------------ */
.solgrid{margin-top:clamp(38px,5vw,60px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.solcard{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.solcard:hover{border-color:var(--sage);transform:translateY(-4px);
  box-shadow:0 26px 46px -30px rgba(36,40,24,.5)}
.solart{aspect-ratio:16/10;overflow:hidden;background:var(--bone-2)}
.solart img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.solcard:hover .solart img{transform:scale(1.045)}
.soltx{padding:clamp(16px,1.8vw,24px);display:flex;flex-direction:column;flex:1}
.soltx h3{font-family:var(--display);font-weight:400;color:var(--text);
  font-size:clamp(1.08rem,1.5vw,1.32rem);line-height:1.2;margin:0}
.soltx p{margin:7px 0 0;color:var(--text-2);font-size:.92rem;line-height:1.45}
.sollearn{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.sollearn::after{content:" \2192"}
@media (max-width:920px){.solgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.solgrid{grid-template-columns:1fr}}

/* ------------------------------ page with a rail ------------------------------ */
.prodlayout{max-width:min(1220px,100%);margin:0 auto;padding:0 var(--pad)}
.prodmain{min-width:0}
.psec{padding:clamp(48px,7vh,84px) 0;border-top:1px solid var(--line)}
.psec:first-child{border-top:0}
/* Contained rather than full bleed on purpose: this section sits in a column
   beside a rail, and a band that escapes the column would either run under the
   rail or push the page sideways. */
.psec.alt{background:var(--bone-2);border-radius:20px;border-top:0;
  margin:clamp(12px,1.6vh,20px) 0;
  padding:clamp(40px,5.5vh,68px) clamp(20px,2.4vw,36px)}
.psec.alt + .psec{border-top:0}
.prail{position:sticky;top:calc(var(--nav-h) + 26px);padding-top:clamp(48px,7vh,84px)}
.prail-in{border-left:1px solid var(--line);padding-left:20px}
.prail .kicker{margin-bottom:16px}
.prail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.prail a{display:block;padding:9px 0;color:var(--text-2);text-decoration:none;
  font-size:.95rem;line-height:1.35;transition:color .35s var(--ease)}
.prail a:hover{color:var(--accent)}
@media (max-width:900px){
  .prodlayout{grid-template-columns:1fr}
  .prail{position:static;padding-top:0;padding-bottom:clamp(40px,6vh,64px)}
  .prail-in{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:24px}
  .prail ul{flex-direction:row;flex-wrap:wrap;gap:8px 22px}
}

/* ------------------------------ page furniture ------------------------------ */
.psub{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--forest);margin:clamp(30px,4vh,44px) 0 16px}
.psub:first-of-type{margin-top:clamp(24px,3vh,34px)}
.pbody{margin:clamp(18px,2.4vh,26px) 0 0;color:var(--text-2);line-height:1.62;max-width:62ch}
.pshot{margin-top:clamp(26px,3.4vw,40px);border-radius:16px;overflow:hidden;
  border:1px solid var(--line)}
.pshot img{width:100%;height:auto;display:block}
.shotframe{border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:var(--bone-2)}
.shotframe img{width:100%;height:auto;display:block}

.pstep{list-style:none;margin:clamp(22px,3vh,32px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:0;counter-reset:s}
.pstep li{display:flex;gap:clamp(14px,1.6vw,22px);align-items:baseline;
  padding:15px 0;border-top:1px solid var(--line);color:var(--text);line-height:1.5}
.pstep li:first-child{border-top:0}
.pstep .sn{flex:0 0 auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--sage);padding-top:2px}

.ptags{margin-top:clamp(22px,3vh,32px);display:flex;flex-wrap:wrap;gap:9px}
.ptags span{border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;font-size:.88rem;color:var(--text-2);background:var(--paper)}

.pnote{border:1px solid var(--sage-soft);border-radius:16px;
  background:rgba(124,145,77,.09);padding:clamp(20px,2.4vw,30px)}
.pnote b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--forest);margin-bottom:12px}
.pnote p{margin:0;color:var(--text);line-height:1.6;max-width:60ch}
.pnote a{display:inline-block;margin-top:14px;color:var(--accent);font-weight:500;
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

.ptable{margin-top:clamp(22px,3vh,32px);overflow-x:auto}
.ptable table{width:100%;border-collapse:collapse;min-width:420px}
.ptable th,.ptable td{text-align:left;padding:14px 16px;border-top:1px solid var(--line)}
.ptable thead th{border-top:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3);font-weight:400}
.ptable tbody td{color:var(--text-2)}
.ptable tbody td:first-child{color:var(--text)}
.ptable tbody td:last-child{color:var(--forest);font-weight:500}

.parch{margin-top:clamp(22px,3vh,32px);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.parch span{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;font-size:.9rem;color:var(--text)}
.parch span+span::before{content:"\2192";display:inline-block;margin-right:12px;
  color:var(--sage);font-size:1.05em}

/* ------------------------------ the working loop ------------------------------ */
.flow{list-style:none;margin:clamp(38px,5vw,58px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:clamp(12px,1.5vw,18px);counter-reset:f}
.fstep{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:clamp(16px,1.7vw,22px)}
/* the arrow between steps, drawn only where two cards actually sit side by side */
.fstep::after{content:"";position:absolute;top:50%;left:100%;width:clamp(12px,1.5vw,18px);
  height:1px;background:var(--sage-soft);opacity:.7}
.fstep:last-child::after{display:none}
.fico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(124,145,77,.14);color:var(--forest);margin-bottom:14px}
.fico svg{width:19px;height:19px}
.fno{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--sand)}
.fttl{font-family:var(--display);font-weight:400;color:var(--text);
  font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.2;margin-top:5px}
.fsay{margin-top:7px;color:var(--text-2);font-size:.83rem;line-height:1.45}
.floop{background:var(--forest);border-color:var(--forest)}
.floop .fico{background:rgba(245,239,229,.16);color:var(--bone)}
.floop .fno,.floop .fttl{color:var(--bone)}
.floop .fsay{color:rgba(245,239,229,.78)}
.floop::after{display:none}

/* (the hand-drawn Farm Pulse mock-up that used to live here was replaced on
   2026-09-28 by the real interactive component, assets/farm-pulse.css. Its
   .tg* rules are gone because no page referenced them any more. Removing rules
   nothing selects cannot change how a page renders, so site.css keeps its
   ?v=m5 and no page needs re-uploading for this.) */

/* the seven systems sit one level down from the three products in the phone
   sheet, so they are indented rather than reading as peers */
.sheet .subs a.deep{padding-left:18px;opacity:.82;font-size:.94em}
.sheet .subs a.deep::before{content:"\2014";margin-right:10px;color:var(--sage);opacity:.7}

/* ==========================================================================
   Scroll driven depth scenes. The canvas does the work; this only holds it in
   place and paces the words over it.
   ========================================================================== */
.scenesec{position:relative;height:230vh}
.scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:#12180C;isolation:isolate;
  --in:clamp(0,(var(--sp,0) - .10)/.20,1);
  --out:clamp(0,(var(--sp,0) - .74)/.18,1);
  --show:calc(var(--in) * (1 - var(--out)))}
.scene canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
/* the field is busiest in the middle of the frame, which is where the words go */
.scene .veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 68% 54% at 50% 50%,rgba(8,10,5,.82) 0%,
    rgba(8,10,5,.55) 46%,rgba(8,10,5,.12) 78%,rgba(8,10,5,0) 100%)}
.scenetx{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
  padding:0 var(--pad);color:var(--bone);text-shadow:var(--tshadow);
  opacity:var(--show);transition:opacity .18s linear}
.scenetx .kicker{color:var(--sand);margin-bottom:clamp(16px,2.2vh,26px)}
.sceneline{margin:0;max-width:20ch;font-family:var(--display);font-weight:400;
  font-size:clamp(1.8rem,4.6vw,3.7rem);line-height:1.04;letter-spacing:-.024em;
  transform:translateY(calc((1 - var(--show)) * 16px))}
.scenesub{margin:clamp(16px,2.4vh,26px) 0 0;max-width:44ch;
  font-size:clamp(.98rem,1.35vw,1.16rem);line-height:1.55;opacity:.85}
/* a thin depth gauge, so the reader can see how far through the field they are */
.scenebar{position:absolute;left:50%;bottom:clamp(26px,4vh,44px);transform:translateX(-50%);
  width:min(190px,42vw);height:1px;background:rgba(245,239,229,.22);overflow:hidden}
.scenebar i{position:absolute;inset:0;transform-origin:left center;
  transform:scaleX(var(--sp,0));background:var(--sand)}

.scenestatic{display:none}
@media (prefers-reduced-motion:reduce){
  .scenesec{height:auto}
  .scene{display:none}
  .scenestatic{display:block;background:var(--forest);color:var(--bone);
    padding:clamp(60px,9vh,110px) 0;text-align:center}
  .scenestatic .kicker{color:var(--sand)}
  .scenestatic h2{font-family:var(--display);font-weight:400;margin:14px auto 0;
    max-width:20ch;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.1;color:var(--bone)}
  .scenestatic p{margin:16px auto 0;max-width:46ch;opacity:.86;line-height:1.6}
}
@media (max-width:700px){
  .scenesec{height:200vh}
}


/* ------------------------------ readings deck ------------------------------
   The old grid was a wall of hairline cells: correct, and completely flat. This
   is the same information given the instrument treatment the dashboard further
   down the page already uses, and set on a plane that tilts as it passes.

   The tilt lives on the deck rather than on every tile, so a scroll moves one
   transform instead of sixty-seven. Tiles only carry a static per-row translateZ,
   which is what separates them in depth once the plane is turned. */
.rdeck{margin-top:clamp(38px,5.5vh,60px);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(9px,1vw,14px);
  perspective:1250px;perspective-origin:50% 42%;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg));
  will-change:transform}
@media (max-width:1080px){.rdeck{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.rdeck{grid-template-columns:repeat(2,minmax(0,1fr))}}

.rtile{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:15px;padding:clamp(13px,1.4vw,19px);min-height:128px;
  display:flex;flex-direction:column;
  transform:translateZ(var(--rz,0px));
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),
             background .4s var(--ease)}
.psec.alt .rtile,.sec.alt .rtile{background:var(--paper)}
.dark .rtile{background:var(--panel);border-color:var(--line)}
.rtile:hover{border-color:var(--sage);box-shadow:0 16px 38px rgba(36,40,24,.11)}

.rtile .u{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sage)}
.rtile .v{font-family:var(--display);font-weight:400;line-height:1;
  font-size:clamp(1.24rem,2vw,1.66rem);color:var(--text);margin-top:7px;
  white-space:nowrap}
.rtile .v em{font-style:normal;font-family:var(--mono);font-size:.36em;
  color:var(--text-3);margin-left:5px;letter-spacing:.06em}
.rtile .t{margin-top:auto;padding-top:12px;font-size:.88rem;line-height:1.34;
  color:var(--text-2)}
.rtile .bar{height:2px;background:var(--line);border-radius:2px;
  overflow:hidden;margin-top:11px}
.rtile .bar i{display:block;height:100%;width:0;background:var(--sage);
  border-radius:2px;transition:width 1.2s var(--ease)}
.rdeck.in .rtile .bar i{width:var(--p,50%)}

/* the values are specimens, and the page says so rather than implying a feed */
.rnote{margin-top:18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3)}

@media (prefers-reduced-motion:reduce){
  .rdeck{transform:none!important;perspective:none}
  .rtile{transform:none!important}
  .rtile .bar i{transition:none;width:var(--p,50%)}
}


/* ------------------------- the product showcase ---------------------------
   Three cards became three objects on a turntable. The section is taller than
   the viewport and the stage sticks to it, so the scrollbar turns the orbit:
   ordinary page scrolling, no hijack, and a reader who flicks past simply sees
   the carousel spin by.

   Every product is one <a> carrying one image. Depth comes from the orbit maths
   in showcase.js writing three custom properties per slot, so the browser only
   ever composites three transforms. There is no WebGL here on purpose: these are
   photographs of real hardware, and mapping them onto planes in a 3D context
   would cost a library and a canvas to arrive at the same picture. */
/* Three viewports of travel: one per product, so each takes its turn at the
   front on the way past. The stage is sticky inside that, which is what lets the
   scrollbar drive the orbit without taking the scroll away from the reader. */
/* The stage runs full bleed so the orbit can actually centre in it. Left inside
   the section's normal side padding, a 1180px orbit in a ~1130px content box
   overflows to one side and the "front" product sits off centre. The heading
   keeps its own .wrap padding. */
.showsec{position:relative;background:var(--bg-2);min-height:300svh;
  padding-left:0;padding-right:0;padding-bottom:0;
  overflow:visible}   /* .sec sets overflow:hidden, and that stops the stage sticking */
@supports not (height:100svh){.showsec{min-height:300vh}}
/* The section opens centred, which the rest of the page does not: this is the
   one place the products themselves are the subject, so the type gets out of
   their way and points down the middle at them. */
.showhead{position:relative;z-index:3;text-align:center;
  padding-top:clamp(56px,9vh,110px)}
.showhead .prodmark{display:block;margin:0 auto clamp(26px,3.4vh,40px);
  background:none;border-radius:0;padding:0;
  height:auto;width:clamp(190px,21vw,286px)}
.showhead .kicker{justify-content:center}
.showhead .h2{margin-left:auto;margin-right:auto;max-width:17ch}
.showhead .h2::after{content:"";display:block;width:54px;height:1px;
  background:var(--line-2);margin:clamp(24px,3.2vh,38px) auto 0}
/* Orbit, caption and indicator are grid rows, not three things pinned to the
   same bottom edge. Absolutely positioning all three against the floor put the
   caption straight through the counter at ordinary viewport heights; as rows
   they cannot overlap whatever the stage is worth. */
.showstage{position:sticky;top:0;height:100svh;min-height:min(520px,100svh);overflow:hidden;
  display:grid;grid-template-rows:minmax(0,1fr) auto auto;
  justify-items:center;align-items:center;
  padding:clamp(14px,3vh,34px) 0 clamp(12px,2.6vh,26px)}

/* the plinth: a soft pool of light the objects sit above */
.showstage::after{content:"";position:absolute;left:50%;top:64%;
  width:min(1000px,86vw);height:min(300px,34vh);transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(124,145,77,.13),transparent 68%);
  pointer-events:none}

.showorbit{position:relative;width:min(1180px,92vw);height:100%;align-self:stretch;
  transform-style:preserve-3d;perspective:1500px;perspective-origin:50% 46%}

.showitem{position:absolute;left:50%;top:50%;width:clamp(230px,30vw,430px);
  margin:0;text-decoration:none;color:inherit;
  transform:translate(-50%,-50%)
            translate3d(var(--x,0px),var(--y,0px),var(--z,0px))
            rotateY(var(--ry,0deg)) scale(var(--s,1));
  opacity:var(--o,1);z-index:var(--zi,1);
  transition:opacity .5s var(--ease);
  will-change:transform}
.showitem img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 34px rgba(36,40,24,calc(.10 * var(--near,1))));
  transition:filter .45s var(--ease),transform .45s var(--ease)}
.showitem:hover img{transform:translateY(-10px) scale(1.035);
  filter:drop-shadow(0 40px 52px rgba(36,40,24,.22))}

/* the caption belongs to the object in front, so it is not repeated three times */
.showcap{width:min(560px,88vw);text-align:center;z-index:6;pointer-events:none;
  padding-top:clamp(6px,1.6vh,18px)}
.showcap .tag{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sage)}
.showcap h3{font-family:var(--display);font-weight:400;margin:8px 0 0;
  font-size:clamp(1.35rem,2.6vw,2rem);letter-spacing:-.018em;line-height:1.12}
.showcap p{margin:9px auto 0;max-width:44ch;color:var(--text-2);
  font-size:.97rem;line-height:1.55}
.showcap .go{display:inline-block;margin-top:14px;font-weight:600;font-size:14px;
  color:var(--accent);pointer-events:auto}
.showcap .go::after{content:" →";transition:margin-left .35s var(--ease)}
.showcap:hover .go::after{margin-left:5px}
.showcap>*{transition:opacity .34s var(--ease),transform .34s var(--ease)}
.showcap.swap>*{opacity:0;transform:translateY(7px)}

/* scroll indicator and counter */
/* the counter sits with the dots in the flow; only the scroll cue is parked in
   the corner, where nothing else wants to be */
.showmeta{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);z-index:6;
  margin-top:clamp(10px,2vh,20px);font-family:var(--mono);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);
  pointer-events:none}
.showcue{position:absolute;left:clamp(16px,4vw,54px);bottom:clamp(12px,2.6vh,26px);
  z-index:6;font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-3);pointer-events:none;
  display:flex;align-items:center;gap:9px}
@media (max-width:900px){.showcue{display:none}}
.showcue i{font-style:normal;animation:shownudge 2.4s var(--ease) infinite}
@keyframes shownudge{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(4px);opacity:1}}
.showmeta .count b{color:var(--text);font-weight:400}
.showdots{display:flex;gap:7px}
.showdots span{width:20px;height:2px;background:var(--line-2);border-radius:2px;
  transition:background .4s var(--ease),width .4s var(--ease)}
.showdots span.on{background:var(--sage);width:34px}

@media (max-width:760px){
  .showstage{height:88svh}
  .showorbit{height:min(430px,52vh)}
  .showitem{width:clamp(190px,52vw,300px)}
  .showcap p{display:none}
}
/* October 2026: with the turntable sized to the screen (showcase.js), the object in
   front can be larger, and the pool of light moves up to sit under it */
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .showitem{width:clamp(200px,60vw,320px)}
  .showstage::after{top:52%;height:min(240px,28vh)}
}

/* Without motion the turntable is meaningless, so it becomes what it always was
   underneath: three products, side by side, each one a link. */
@media (prefers-reduced-motion:reduce){
  .showstage{position:static;height:auto;padding:clamp(30px,5vh,56px) 0}
  .showorbit{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,34px);
    width:100%;height:auto;perspective:none}
  .showitem{position:static;transform:none!important;opacity:1!important;width:auto}
  .showcap,.showmeta,.showdots,.showstage::after{display:none}
  .showsec .showfallback{display:block}
}
/* ---- the second turntable: the services ----------------------------------
   Same mechanism, three differences. It stands on the page ground rather than
   the tinted band, because the products' turntable is directly above it and
   two tinted bands in a row read as one very long section. It carries four
   things rather than three, so it gets a fourth viewport of travel and a
   fourth column in both fallbacks. And a service is a photograph rather than a
   cut out object, so its items are cards with an edge instead of things
   floating on a shadow. */
.showsec.plain{background:var(--bg)}
.showsec.four{min-height:400svh}
@supports not (height:100svh){.showsec.four{min-height:400vh}}
.showsec.plain .showhead .h2{max-width:24ch}
.showsec.cards .showitem img{border-radius:14px;
  box-shadow:0 34px 60px -30px rgba(36,40,24,calc(.55 * var(--near,1)))}
.showsec.cards .showitem:hover img{box-shadow:0 46px 70px -30px rgba(36,40,24,.6)}
@media (prefers-reduced-motion:reduce){
  .showsec.four .showorbit{grid-template-columns:repeat(4,1fr)}
  .showsec.four .showfallback ul{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:760px){
  .showsec.four .showorbit,.showsec.four .showfallback ul{grid-template-columns:repeat(2,1fr)}
}

.showfallback{display:none;margin-top:26px}
.showfallback ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,34px);text-align:center}
.showfallback h3{font-size:1.1rem;margin:0 0 6px}
.showfallback a{color:var(--accent);font-weight:600;text-decoration:none;font-size:14px}
@media (max-width:760px){.showfallback ul{grid-template-columns:1fr}}


/* ==========================================================================
   Phones and small tablets.

   Everything below sits inside a width query, so the desktop page is untouched.
   It is here rather than beside each component because it is one idea: a line of
   text a mouse can hit exactly is not a target a thumb can, and a layout drawn
   for a wide frame has to give way at the edges.
   ========================================================================== */
@media (max-width:820px), (pointer:coarse){
  /* A footer link is a line of text on a desktop and a target on a phone. The gap
     shrinks by as much as the links grow, so the footer keeps its height. A phone
     held sideways is 844 wide, so this asks about the pointer as well as the width. */
  .fnav{gap:2px}
  .fnav a,.fphones a{min-height:44px;display:inline-flex;align-items:center}
  .fnav .fhd,.fhd+.fhd,.fnav .fhd:not(:first-child){margin-top:16px}
  /* the small links that stand on their own, rather than inside a sentence */
  .deets a,.showcap .go,.showfallback a,.pc .go,.pnote a,.psec > a{min-height:44px;display:inline-flex;align-items:center}
  /* the bar's own controls: the logo link and the language switch are drawn 40px tall.
     The switch keeps its drawn size and gains a few pixels of reach around it. */
  .nav .brand{min-height:44px}
  /* the round marks keep their shape where every other footer link becomes a 44px row */
  .fnav .fsocial a{display:grid;width:44px;height:44px}
  .langbtn{position:relative}
  .langbtn::after{content:"";position:absolute;inset:-3px -2px}
  .fnav a{min-width:44px}
}

/* Phones, October 2026.
   Over a photograph or a film the bar is clear, and its light outline buttons could
   vanish into a bright sky, a white wall or a sunlit house (the pest film, the
   hydroponic and poultry pictures). On a narrow screen the clear bar takes a soft
   shade from the top edge instead; over the dark scenes it is invisible. */
@media (max-width:820px){
  /* no-repeat from the border box: tiled from the padding box, the shade's dark first
     row repeated into the bar's 1px bottom border as a line across the photograph */
  .nav.over-dark:not(.over-flat):not(.menu-open){
    background:linear-gradient(180deg,rgba(9,12,7,.62) 0%,rgba(9,12,7,.36) 58%,rgba(9,12,7,0) 100%)
      border-box no-repeat}
}

/* A floor for the smallest type on a phone. The site's small labels are set in 10 to 11px
   mono on purpose, and those stay; what is lifted here is the type under 10px, and the
   notes set in that mono that are sentences someone is meant to read (what is illustrative,
   what is example data). It lives here, once, rather than in each page's stylesheet, so a
   regenerated page stylesheet cannot lose it; !important because each page sets these
   sizes with its own selectors, after this file. */
@media (max-width:820px){
  /* about */
  .fj-tags span,.ahp figcaption,.am-cap div,.acore-node span,.bn-shot figcaption,.aintl-pt small,
  .apart-tabs .apart-node,
  /* Smart Agriculture */
  .pf-block dt,
  /* AI pest detection */
  .pchip,.pcount .sub,.pdata .hd,.pdata .axis span,.puicell .k,
  /* service pages */
  .svlist .k,.svsrc,.svframe figcaption,.layer .lb i,
  /* product pages */
  .gd-shot figcaption b,.mu-shot figcaption b,.hy-proof figcaption b,
  .mu-dash-pill,.pl-figs dt,.sms-hero-note,.sms-tag,.sms-w-read span,
  .sms-inc-fig figcaption,.sms-use figcaption{font-size:10.5px!important}
  .band .stat .big em{font-size:max(.2em,10.5px)!important}
  .cbody em sub{font-size:8.5px!important}
  /* notes that are sentences */
  .pf-note,.fl-foot,.ms-src,.sms-demo-note,
  .aq-schem,.fg-schem,.gd-schem,.hy-schem,.mu-schem,.pl-schem{font-size:11px!important;line-height:1.6}
}

/* The narrowest phones: a reading like 145·32·110ppm is wider than half of a
   320px screen, and the tile does not clip, so it would run into its neighbour.
   The figure gives way instead — smaller, and free to take a second line. */
@media (max-width:380px){
  .rtile .v{font-size:clamp(1rem,4.4vw,1.24rem);white-space:normal}
}