/* ==========================================================================
   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;

  --display:"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}
.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}

/* ------------------------------ Farm Pulse ------------------------------ */
.tgpair{margin-top:clamp(38px,5vw,58px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);
  align-items:start}
/* the bot is a real dark chat surface, so it is drawn as one rather than
   restyled into the page palette and made unrecognisable */
.tgphone{background:#17212B;border:1px solid #24313D;border-radius:18px;
  padding:clamp(14px,1.6vw,20px);color:#E9EEF2;
  box-shadow:0 30px 60px -40px rgba(20,26,14,.6)}
.tgsent{margin:0 0 12px auto;width:max-content;max-width:70%;
  background:#7A5CFF;color:#fff;border-radius:14px 14px 4px 14px;
  padding:7px 13px;font-size:.86rem;font-weight:500}
.tgcard{background:#212C39;border-radius:14px 14px 14px 4px;
  padding:clamp(14px,1.5vw,18px);font-size:.88rem;line-height:1.5}
.tgtitle{font-weight:600;font-size:.98rem;margin-bottom:10px}
.tglead{margin:0 0 10px;color:#CFE0B8}
.tgcard p{margin:0 0 9px}
.tgcard p:last-child{margin-bottom:0}
.tgrule{height:1px;background:#3A4756;margin:14px 0}
.tgsub{font-weight:600;margin-bottom:9px}
.tgpick{color:#B9C6D2}
.tgkv{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 12px}
.tgkv dt{color:#B9C6D2;white-space:nowrap}
.tgkv dd{margin:0;color:#E9EEF2}
.tgrow{display:flex;gap:8px;margin-top:8px}
.tgb{flex:1;text-align:center;background:#2B3A4A;border:1px solid #35485A;
  border-radius:9px;padding:11px 8px;font-size:.85rem;color:#E9EEF2}
@media (max-width:760px){
  .tgpair{grid-template-columns:1fr}
}

/* 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:520px;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}
}

/* 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}}