/* ==========================================================================
   gd.css: the Agro-IoT Garden Site page (sol-garden.html) only.

   The same family as the other JPiOT product pages: deep emerald, warm ivory and
   charcoal, with the company orange kept for what you click. Everything is scoped
   to body.gd or to gd- / fl- classes, so site.css and every other page are
   untouched. Built on site.css: nav, mega menu, sheet, footer, buttons, language
   switch and entrances all come from there.
   ========================================================================== */



.gd{
  --em-950:#071A15; --em-900:#0B241E; --em-850:#0E2C25; --em-800:#12372E; --em-700:#184237;
  --em-600:#1F5A47; --em-500:#2D6E57; --em-400:#4F8C71; --em-300:#86B39A; --em-200:#BCD5C5; --em-100:#E1ECE4;
  --iv:#F6F3EA; --iv-2:#EEE9DC; --iv-3:#E5DECC; --paper:#FCFAF5;
  --ink:#13211C; --ch:#2A312D; --ch-2:#525D56; --ch-3:#5F6A63;
  --hair:#DDD6C5; --hair-2:#CCC4B0;
  --or:var(--accent,#E05616); --or-hi:var(--accent-hover,#F0752E); --or-ink:#B84510;
  --c-water:#4F9EC4; --c-sol:#2C7A5A; --c-mix:#3A8A7E;
  --gd-subnav:0px;                  /* the page menu was removed; kept so the
                                       shared farm-pulse.css has its variable */
  --page-subnav:var(--gd-subnav);   /* read by farm-pulse.css */
  --gd-gap:clamp(72px,10.5vh,132px);
  background:var(--iv);
}
.gd main{background:var(--iv)}
.gd-sprite{position:absolute;width:0;height:0;overflow:hidden}
.gd main [id]{scroll-margin-top:calc(var(--nav-h) + 18px)}
/* over the dark bands that scroll as ordinary page, the bar keeps a dark ground */
.nav.over-flat:not(.menu-open){background:rgba(9,30,24,.86);border-bottom-color:rgba(246,243,234,.12);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}

/* ------------------------------ shared type ------------------------------ */
.gd-sec{position:relative;padding:var(--gd-gap) var(--pad);color:var(--ch)}
.gd-wrap{max-width:var(--maxw);margin:0 auto;position:relative}
.gd-k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--em-500);display:flex;align-items:center;gap:12px;margin:0 0 22px}
.gd-k::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6;flex:0 0 auto}
.gd-h2{font-family:var(--display);font-weight:300;font-size:clamp(2.15rem,4.4vw,3.8rem);
  line-height:1.03;letter-spacing:-.024em;color:var(--ink);max-width:17ch;text-wrap:balance}
.gd-h3{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,2.6vw,2.3rem);
  line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.gd-lede{margin-top:22px;color:var(--ch-2);font-size:clamp(1.02rem,1.22vw,1.18rem);line-height:1.62;max-width:56ch}
.gd-head{margin-bottom:clamp(40px,6vh,64px)}
.gd-head.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px clamp(32px,5vw,96px);align-items:end}
.gd-head.split .gd-lede{margin-top:0;max-width:46ch;justify-self:end;padding-bottom:.35em}
@media (max-width:900px){
  .gd-head.split{grid-template-columns:1fr}
  .gd-head.split .gd-lede{justify-self:start;padding-bottom:0}
}
.gd-mini{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--em-500);margin:0 0 10px}
.gd-fine{margin:10px 0 0;font-size:.86rem;color:var(--ch-3);line-height:1.5}
.gd-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase}
.gd-tag::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid currentColor}
.gd-link{display:inline-flex;align-items:center;gap:8px;color:var(--em-600);font-weight:600;text-decoration:none;
  font-size:.97rem;min-height:44px}
.gd-link svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.gd-link:hover svg{transform:translateY(2px)}
.gd-link:hover span{text-decoration:underline;text-underline-offset:4px}

/* ================================ 01 HERO ================================ */
.gd-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(50vw,880px));
  min-height:clamp(640px,92svh,900px);background:var(--em-950);color:var(--iv);overflow:hidden;isolation:isolate}
.gd-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(55% 60% at 16% 34%,rgba(45,110,87,.30),transparent 70%),
  radial-gradient(38% 46% at 60% 100%,rgba(224,86,22,.09),transparent 70%)}
.gd-hero-copy{align-self:center;min-width:0;
  padding:calc(var(--nav-h) + clamp(28px,6vh,72px)) clamp(28px,4vw,72px) clamp(40px,7vh,84px) max(var(--pad),calc((100vw - var(--maxw)) / 2))}
.gd-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sand);display:flex;align-items:center;gap:12px;margin:0 0 clamp(18px,2.6vh,28px)}
.gd-eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.gd-h1{font-family:var(--display);font-weight:300;color:var(--iv);margin:0;text-wrap:balance;
  font-size:clamp(2.6rem,4.6vw,4.6rem);line-height:1.02;letter-spacing:-.026em}
.gd-h1 span{display:block;color:var(--em-200)}
.gd-hero-lede{margin-top:clamp(18px,2.8vh,28px);max-width:50ch;color:rgba(246,243,234,.86);
  font-size:clamp(1.03rem,1.3vw,1.22rem);line-height:1.6}
.gd-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3.4vh,34px)}
.gd-btn-ghost{border-color:rgba(246,243,234,.46);color:var(--iv)}
.gd-btn-ghost:hover{border-color:var(--iv);transform:translateY(-2px)}
.gd-opts{margin-top:clamp(26px,4vh,40px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:640px}
.gd-opts-k{grid-column:1/-1;margin:0 0 2px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(246,243,234,.6)}
.gd-opt{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px 12px 14px;border-radius:16px;
  border:1px solid rgba(246,243,234,.18);background:rgba(246,243,234,.05);color:var(--iv);text-decoration:none;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.gd-opt:hover{background:rgba(246,243,234,.1);border-color:rgba(246,243,234,.4)}
.gd-opt>svg:first-child{width:30px;height:30px;flex:0 0 auto;color:var(--em-300)}
.gd-opt b{display:block;font-weight:600;font-size:15px;line-height:1.25}
.gd-opt small{display:block;font-size:12.5px;line-height:1.35;color:rgba(246,243,234,.7);margin-top:3px}
.gd-opt-go{width:18px;height:18px;margin-left:auto;flex:0 0 auto;color:rgba(246,243,234,.6);transition:transform .3s var(--ease)}
.gd-opt:hover .gd-opt-go{transform:translateY(2px)}
.gd-hero-media{position:relative;margin:0;min-height:100%;overflow:hidden;background:#0A1712}
.gd-hero-media img,.gd-hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.gd-hero-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,var(--em-950) 0%,rgba(7,26,21,.35) 9%,rgba(7,26,21,0) 22%),
  linear-gradient(180deg,rgba(7,26,21,.78) 0%,rgba(7,26,21,0) 17%),
  linear-gradient(0deg,rgba(7,26,21,.72) 0%,rgba(7,26,21,0) 26%)}
.gd-hero-media figcaption{position:absolute;left:clamp(20px,2.6vw,36px);right:clamp(20px,2.6vw,36px);bottom:clamp(18px,3vh,30px);
  z-index:2;display:grid;gap:6px;color:rgba(246,243,234,.84);font-size:13px;line-height:1.45;max-width:46ch}
.gd-hero-media .gd-tag{color:var(--sand)}
.gd-vbtn{position:absolute;z-index:3;right:clamp(16px,2vw,28px);top:calc(var(--nav-h) + 12px);width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(246,243,234,.4);background:rgba(7,26,21,.55);color:var(--iv);display:grid;place-items:center;cursor:pointer}
.gd-vbtn svg{width:18px;height:18px}
.gd-vbtn .i-pl{display:none}
.gd-vbtn[aria-pressed="false"] .i-pl{display:block}
.gd-vbtn[aria-pressed="false"] .i-pa{display:none}
@media (max-width:900px){
  .gd-hero{grid-template-columns:1fr;min-height:0}
  .gd-hero-media{order:-1;height:min(64vw,520px);min-height:0}
  .gd-hero-media::before{background:
    linear-gradient(180deg,rgba(7,26,21,.7) 0%,rgba(7,26,21,0) 26%),
    linear-gradient(0deg,var(--em-950) 0%,rgba(7,26,21,0) 30%)}
  .gd-hero-media figcaption{font-size:12px}
  .gd-hero-copy{padding:10px var(--pad) 48px}
  .gd-h1{font-size:clamp(2.2rem,8.6vw,3.4rem)}
}
@media (max-width:760px){
  .gd-hero-media{height:74vw}
  .gd-hero-media figcaption span:last-child{display:none}
  .gd-cta .btn{flex:1 1 100%}
  .gd-opts{grid-template-columns:1fr}
}

/* ------------------------------ strip ------------------------------ */
.gd-strip{background:var(--em-900);color:var(--iv);border-top:1px solid rgba(246,243,234,.08);padding:0 var(--pad)}
.gd-strip ul{list-style:none;margin:0 auto;padding:0;max-width:var(--maxw);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.gd-strip li{display:flex;align-items:center;gap:14px;padding:22px 18px;font-size:14.5px;font-weight:500;line-height:1.3;
  border-left:1px solid rgba(246,243,234,.1)}
.gd-strip li:first-child{border-left:0;padding-left:0}
.gd-strip svg{width:28px;height:28px;flex:0 0 auto;color:var(--em-300)}
@media (max-width:900px){
  .gd-strip ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gd-strip li{padding:16px 12px;font-size:13.5px}
  .gd-strip li:nth-child(odd){border-left:0;padding-left:0}
  .gd-strip li:nth-child(n+3){border-top:1px solid rgba(246,243,234,.1)}
}

/* ============================== 04 HOW IT WORKS ============================== */
.gd-loop-sec{background:var(--em-900);color:var(--iv);overflow:hidden}
.gd-loop-sec::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(46% 40% at 12% 8%,rgba(134,179,154,.14),transparent 70%),
  radial-gradient(40% 40% at 94% 96%,rgba(224,86,22,.08),transparent 70%)}
.gd-loop-sec .gd-k{color:var(--em-300)}
.gd-loop-sec .gd-h2{color:var(--iv)}
.gd-loop-sec .gd-lede{color:rgba(246,243,234,.78)}
.gd-loop-sec-bar{display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;margin-bottom:22px}
.gd-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:999px;max-width:100%;overflow-x:auto;scrollbar-width:none;
  background:rgba(246,243,234,.08);border:1px solid rgba(246,243,234,.14)}
.gd-tabs::-webkit-scrollbar{display:none}
.gd-tabs [role="tab"]{appearance:none;border:0;cursor:pointer;white-space:nowrap;min-height:46px;padding:0 22px;border-radius:999px;
  background:transparent;color:rgba(246,243,234,.8);font-family:var(--body);font-size:15px;font-weight:600;
  transition:background .3s var(--ease),color .3s var(--ease)}
.gd-tabs [role="tab"]:hover{color:var(--iv);background:rgba(246,243,234,.08)}
.gd-tabs [role="tab"][aria-selected="true"]{background:var(--iv);color:var(--em-900)}
.gd-tabs [role="tab"]:focus-visible{outline:2px solid var(--or-hi);outline-offset:2px;border-radius:999px}
.gd-play{appearance:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;
  border:1px solid rgba(246,243,234,.32);background:transparent;color:var(--iv);font-family:var(--body);font-size:14px;font-weight:600;
  cursor:pointer;transition:border-color .3s var(--ease),background .3s var(--ease)}
.gd-play:hover{border-color:var(--iv);background:rgba(246,243,234,.06)}
.gd-play:focus-visible{outline:2px solid var(--or-hi);outline-offset:3px}
.gd-play svg{width:16px;height:16px;flex:0 0 auto}
.gd-play .i-pa,.gd-play .gd-play-off{display:none}
.gd-play[aria-pressed="true"] .i-pl,.gd-play[aria-pressed="true"] .gd-play-on{display:none}
.gd-play[aria-pressed="true"] .i-pa{display:block}
.gd-play[aria-pressed="true"] .gd-play-off{display:inline}
html:not(.js) .gd-play,html:not(.js) .gd-tabs,html:not(.js) .gd-steps{display:none}

.gd-panel-loop{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(20px,2.4vw,34px);align-items:start}
.gd-panel-loop[hidden]{display:none}
.gd-panel-loop+.gd-panel-loop{margin-top:0}
.gd-panel-loop-h{display:none}
html:not(.js) .gd-panel-loop-h{display:block;grid-column:1/-1;font-family:var(--display);font-weight:400;font-size:1.6rem;color:var(--iv);margin:12px 0 4px}
html:not(.js) .gd-panel-loop+.gd-panel-loop{margin-top:40px}
.gd-steps-box{position:sticky;top:calc(var(--nav-h) + 24px)}
body.gd:has(.nav:not(.tucked)) .gd-steps-box{top:calc(var(--nav-h) + 16px)}
.gd-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.gd-steps button{appearance:none;width:100%;display:flex;align-items:center;gap:14px;min-height:50px;padding:9px 14px 9px 10px;
  border-radius:14px;border:1px solid rgba(246,243,234,.14);background:rgba(246,243,234,.03);color:rgba(246,243,234,.84);
  font-family:var(--body);font-size:15px;font-weight:500;text-align:left;cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.gd-steps button:hover{border-color:rgba(246,243,234,.34);color:var(--iv)}
.gd-steps button b{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);
  font-weight:400;font-size:12px;background:rgba(246,243,234,.1);color:var(--iv);transition:background .3s var(--ease)}
.gd-steps button[aria-current="step"]{background:var(--iv);border-color:var(--iv);color:var(--em-900)}
.gd-steps button[aria-current="step"] b{background:var(--em-600);color:var(--iv)}
.gd-steps button:focus-visible{outline:2px solid var(--or-hi);outline-offset:2px}
.gd-say{margin-top:14px;padding:18px 18px 20px;border-radius:16px;background:rgba(7,26,21,.55);border:1px solid rgba(246,243,234,.12);min-height:9.6em}
.gd-say p{margin:0;color:rgba(246,243,234,.92);font-size:1rem;line-height:1.62}
.gd-say p>b{display:block;margin-bottom:8px;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--em-300)}
.js .gd-say p:not(.on){display:none}
html:not(.js) .gd-say p+p{margin-top:16px}
.gd-loop{margin:0;border-radius:24px;padding:clamp(10px,1.6vw,22px);background-color:var(--iv);
  background-image:linear-gradient(rgba(31,90,71,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(31,90,71,.055) 1px,transparent 1px);
  background-size:36px 36px;box-shadow:0 44px 90px -54px rgba(0,0,0,.7)}
.gd-loop svg{display:block;width:100%;height:auto;overflow:visible}
.gd-loop .fl-v{display:none}
.gd-key{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 28px}
.gd-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:rgba(246,243,234,.82)}
.gd-legend li{display:inline-flex;align-items:center;gap:8px}
.gd-legend i{display:block;width:22px;height:5px;border-radius:3px;background:var(--c)}
.gd-legend i.two{background:linear-gradient(90deg,#2E9C94 50%,#B6507B 50%)}
.gd-legend i.dash{height:0;border-radius:0;background:none;border-top:2px dashed var(--c)}
.gd-schem{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;line-height:1.6;text-transform:uppercase;color:rgba(246,243,234,.56)}
@media (max-width:1239px){
  .gd-panel-loop{grid-template-columns:minmax(0,1fr)}
  .gd-steps-box{position:static}
  .gd-steps{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
  .gd-steps::-webkit-scrollbar{display:none}
  .gd-steps li{flex:0 0 auto}
  .gd-steps button{width:auto;min-height:44px;padding:6px 16px 6px 7px;font-size:14px}
  .gd-say{min-height:0;margin-top:12px}
}
@media (max-width:820px){
  .gd-loop .fl-h{display:none}
  .gd-loop .fl-v{display:block;max-width:440px;margin:0 auto}
  /* on phones the step controls stay in view while the diagram scrolls under them */
  .gd-steps-box{position:sticky;top:calc(var(--nav-h) - 1px);z-index:5;margin:0 calc(-1 * var(--pad)) 14px;
    padding:10px var(--pad) 12px;background:rgba(11,36,30,.96);border-bottom:1px solid rgba(246,243,234,.12);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  body.gd:has(.nav:not(.tucked)) .gd-steps-box{top:calc(var(--nav-h) - 2px)}
  .gd-say{padding:12px 14px;min-height:7.9em;font-size:.95rem;background:rgba(7,26,21,.6)}
  .gd-say p{font-size:.95rem;line-height:1.55}
  .gd-say p>b{margin-bottom:5px}
  .gd-tabs{display:flex;width:100%}
  .gd-tabs [role="tab"]{flex:1 1 auto;padding:0 12px;font-size:14px}
  .gd-play{width:100%;justify-content:center}
}

/* ---------------------------- the schematics ---------------------------- */
.fl text{font-family:var(--body);text-anchor:middle}
.fl text.ts{text-anchor:start}
.fl text.te{text-anchor:end}
.fl .lb{font-size:16px;font-weight:600;fill:#23302A}
.fl .lb.sm{font-size:13.5px;font-weight:500;fill:#46554D}
.fl .lb.note{font-size:12.5px;font-weight:500;font-style:italic;fill:#5F6A63}
.fl .pp-o{fill:none;stroke:#D0D9D3;stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
.fl .pp-i{fill:none;stroke:var(--c);stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round}
.fl .pp.thin .pp-o{stroke-width:8}
.fl .pp.thin .pp-i{stroke-width:3.4}
.fl .pp.standby .pp-i{stroke-dasharray:5 4;stroke-linecap:butt}
.fl .pp-f{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:.1 12;opacity:0}
.fl .pp.thin .pp-f{stroke-width:1.9;stroke-dasharray:.1 9}
.fl .fa{fill:var(--c);stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
.fl .tube{fill:none;stroke:var(--c);stroke-width:3;stroke-linecap:round;opacity:.85}
.fl .tk-b{fill:#FBFAF6;stroke:#8FA398;stroke-width:1.6}
.fl .tk-r{stroke:#B7C5BD;stroke-width:1.4}
.fl .tk-lg{stroke:#8FA398;stroke-width:3;stroke-linecap:round}
.fl .tk-sf{stroke:#fff;stroke-width:1.6;opacity:.8}
.fl .lq-w{fill:var(--c-water);opacity:.34}
.fl .mx-liq{fill:var(--c-sol);opacity:.32;transition:fill .6s var(--ease)}
.fl .ct-b{fill:#FBFAF6;stroke:#8FA398;stroke-width:1.4}
.fl .ct-c{fill:#8FA398}
.fl .ct-l{fill:var(--c)}
.fl .ct-t{font-size:15px;font-weight:700;fill:#fff}
.fl .pu-b{fill:#fff;stroke:#2F3B35;stroke-width:1.8}
.fl .pu-a{fill:#2F3B35}
.fl .va-b{fill:#fff;stroke:#2F3B35;stroke-width:1.6;stroke-linejoin:round}
.fl .va-s{stroke:#2F3B35;stroke-width:1.6;stroke-linecap:round}
.fl .dp-b{fill:#E9EEEA;stroke:#5E6E66;stroke-width:1.5}
.fl .dp-h{fill:#fff;stroke:#5E6E66;stroke-width:1.4}
.fl .dp-r{fill:#5E6E66}
.fl .dp-d{fill:#1E2A25}
.fl .inj{fill:var(--c);stroke:#fff;stroke-width:2}
.fl .sn-t{fill:#fff;stroke:var(--em-500);stroke-width:1.5}
.fl .sn-l{font-size:13px;font-weight:700;fill:var(--em-600)}
.fl .sn-r{fill:none;stroke:#6B7A72;stroke-width:2.4;stroke-linecap:round}
.fl .sn-tp{fill:#4A5852}
.fl .sn-fl{fill:#F2C46A;stroke:#8A6A2A;stroke-width:1.2}
.fl .sg{fill:none;stroke:#2D6E57;stroke-width:1.8;stroke-dasharray:6 5}
.fl .cl{fill:none;stroke:#C0692B;stroke-width:1.8;stroke-dasharray:6 5}
.fl .jd{fill:#2D6E57}
.fl .co-b{fill:var(--em-700)}
.fl .co-t{font-size:15px;font-weight:600;fill:#F6F3EA}
.fl .co-s{fill:#0B241E}
.fl .co-l{font-size:9.5px;font-weight:600;fill:#9FC2AF}
.fl .co-tr{fill:#284C40}
.fl .co-bd{fill:#4F8C71;opacity:.55;transition:fill .4s,opacity .4s}
.fl .co-m{fill:#F6F3EA}
.fl .mx-sw{opacity:0;transition:opacity .4s var(--ease)}
.fl .mx-sw path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fl .mx-sw-in{transform-box:fill-box;transform-origin:center}
.fl .sm-b{fill:#E4ECE7;stroke:#5E6E66;stroke-width:1.5}
.fl .sm-z{fill:none;stroke:var(--c-sol);stroke-width:2.6;stroke-linejoin:round;stroke-dasharray:14 5}
.fl .drp{fill:var(--c-sol);opacity:.8}
.fl .gr{fill:#CDB894}

/* step state: the parts not in the chosen step fade back */
.gd-loop[data-step] [data-s]{opacity:.24;transition:opacity .45s var(--ease)}
.gd-loop[data-step="capture"] [data-s~="capture"],.gd-loop[data-step="prepare"] [data-s~="prepare"],
.gd-loop[data-step="circulate"] [data-s~="circulate"],.gd-loop[data-step="return"] [data-s~="return"]{opacity:1}
/* movement, only while the section is on screen (gd.js adds .play) */
@keyframes fl-run{to{stroke-dashoffset:-12.1}}
@keyframes fl-run-t{to{stroke-dashoffset:-9.1}}
@keyframes fl-dash{to{stroke-dashoffset:-11}}
.gd-loop[data-step="circulate"] .pp-f[data-f~="circulate"],.gd-loop[data-step="return"] .pp-f[data-f~="return"],
.gd-loop[data-step="prepare"] .pp-f[data-f~="prepare"]{opacity:.95}
.gd-loop-sec.play .gd-loop[data-step="circulate"] .pp-f[data-f~="circulate"],
.gd-loop-sec.play .gd-loop[data-step="return"] .pp-f[data-f~="return"],
.gd-loop-sec.play .gd-loop[data-step="prepare"] .pp-f[data-f~="prepare"]{animation:fl-run .75s linear infinite}
.gd-loop-sec.play .gd-loop .pp.thin .pp-f{animation-name:fl-run-t}
.gd-loop-sec.play .gd-loop[data-step="return"] .sg[data-f~="return"],
.gd-loop-sec.play .gd-loop[data-step="capture"] .pw[data-f~="capture"],
.gd-loop-sec.play .gd-loop[data-step="prepare"] .pw[data-f~="prepare"],
.gd-loop-sec.play .gd-loop[data-step="circulate"] .pw[data-f~="circulate"]{animation:fl-dash .7s linear infinite}

/* ============================== 06 TELEGRAM NOTE ============================== */
/* sits directly under the supplied component, on its ground colour, so it reads as
   part of that section without touching anything inside it */
.gd-fpnote{position:relative;z-index:1;background:#f5f2e9;padding:0 max(24px,calc((100% - 1240px) / 2)) 64px;margin:-24px 0 0}
.gd-fpnote p{margin:0;max-width:80ch;padding:14px 18px;border-radius:12px;border:1px solid #d9dfd3;background:#ebeee3;
  font-size:13.5px;line-height:1.6;color:#3f5247}
@media (min-width:901px){.gd-fpnote{padding-left:max(var(--pad),calc((100% - var(--maxw)) / 2));padding-right:max(var(--pad),calc((100% - var(--maxw)) / 2))}}
@media (max-width:900px){.gd-fpnote{padding:0 24px 48px;margin-top:-12px}}
@media (max-width:680px){.gd-fpnote{padding:0 18px 42px;margin-top:-10px}}

/* =============================== 11 ENQUIRE =============================== */
.gd-enq{padding-top:calc(var(--gd-gap) * .35);padding-bottom:calc(var(--gd-gap) * .8)}
.gd-enq-card{position:relative;overflow:hidden;border-radius:34px;background:var(--em-850);color:var(--iv);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4.4vw,72px);padding:clamp(28px,5vw,72px)}
.gd-enq-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60% 70% at 100% 100%,rgba(224,86,22,.2),transparent 62%),
  radial-gradient(50% 60% at 0% 0%,rgba(134,179,154,.16),transparent 64%)}
.gd-enq-card>*{position:relative}
.gd-enq .gd-k{color:var(--em-300)}
.gd-enq .gd-h2{color:var(--iv);max-width:13ch}
.gd-enq .gd-lede{color:rgba(246,243,234,.8)}
.gd-enq-call{margin-top:clamp(24px,4vh,40px);display:grid;gap:6px}
.gd-enq-call span{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--em-300)}
.gd-enq-call a{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,2.8vw,2.3rem);letter-spacing:-.015em;color:var(--iv);
  text-decoration:none;font-variant-numeric:tabular-nums;width:max-content;border-bottom:1px solid rgba(246,243,234,.3);
  min-height:44px;display:inline-flex;align-items:center}
.gd-enq-call a:hover{border-color:var(--iv)}
.gd-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start}
.gd-field{display:grid;gap:8px;min-width:0}
.gd-field.full{grid-column:1/-1}
.gd-field label{font-size:13px;font-weight:600;color:var(--em-200);letter-spacing:.01em}
.gd-field input,.gd-field select{width:100%;min-height:52px;border-radius:14px;border:1px solid rgba(246,243,234,.22);
  background:rgba(7,26,21,.45);color:var(--iv);font-family:var(--body);font-size:16px;padding:0 16px;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.gd-field input::placeholder{color:rgba(246,243,234,.42)}
.gd-field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--em-200) 50%),linear-gradient(135deg,var(--em-200) 50%,transparent 50%);
  background-position:calc(100% - 22px) 23px,calc(100% - 16px) 23px;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.gd-field select option{color:#13211C;background:#fff}
.gd-field input:hover,.gd-field select:hover{border-color:rgba(246,243,234,.4)}
.gd-field input:focus,.gd-field select:focus{outline:none;border-color:var(--or-hi);background:rgba(7,26,21,.65);box-shadow:0 0 0 3px rgba(240,117,46,.25)}
.gd-form-act{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.gd-form-act .btn{flex:1 1 auto;white-space:nowrap}
.gd-form-act .btn svg{width:20px;height:20px;flex:0 0 auto}
.gd-btn-line{border-color:rgba(246,243,234,.46);color:var(--iv)}
.gd-btn-line:hover{border-color:var(--iv);transform:translateY(-2px)}
.gd-form-note{grid-column:1/-1;margin:2px 0 0;font-size:.86rem;color:rgba(246,243,234,.66);line-height:1.55}
@media (max-width:900px){.gd-enq-card{grid-template-columns:1fr}}
@media (max-width:560px){
  .gd-form{grid-template-columns:1fr}
  .gd-enq-card{border-radius:26px}
}
@media (max-width:420px){.gd-form-act .btn{white-space:normal;flex-basis:100%;text-align:center}}

/* ============================ phone enquiry button ============================ */
.gd-float{display:none}
@media (max-width:760px){
  .gd-float{position:fixed;z-index:110;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));
    display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 13px;border-radius:999px;
    background:var(--em-800);color:var(--iv);font-family:var(--body);font-size:13.5px;font-weight:600;text-decoration:none;
    box-shadow:0 16px 34px -14px rgba(7,26,21,.7),0 0 0 1px rgba(246,243,234,.14);
    opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
  .gd-float svg{width:18px;height:18px}
  .gd-float.on{opacity:1;visibility:visible;transform:none}
}

/* ============================== touch targets ============================== */
@media (max-width:820px),(pointer:coarse){
  .gd-ov-end .gd-link{min-height:44px;display:inline-flex;align-items:center}
}

/* ============================== reduced motion ============================== */
@media (prefers-reduced-motion:reduce){
  .gd-loop .pp-f{animation:none!important}
}


/* ============================== 04 the flow bar ============================== */
.gd-loop-bar{display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;margin-bottom:20px}
.gd-loop-label{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(246,243,234,.6)}
@media (max-width:820px){.gd-loop-bar .gd-play{width:100%;justify-content:center}}

/* ============================== 05 EQUIPMENT ============================== */
.gd-parts{background:var(--iv-2)}
.gd-parts-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(20px,3vw,48px);align-items:start}
.gd-parts-fig{min-width:0}
.gd-parts-art{border-radius:24px;background:var(--paper);border:1px solid var(--hair);padding:clamp(10px,1.6vw,20px)}
.gd-parts-inner{position:relative}
.gd-parts-art svg{display:block;width:100%;height:auto}
/* the touch target is 44px; the mark itself is small, so it never hides the part */
.gd-hs{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border:0;border-radius:50%;
  background:transparent;padding:0;cursor:pointer;display:grid;place-items:center}
.gd-hs::before{content:"";width:22px;height:22px;border-radius:50%;border:2px solid var(--em-600);
  background:rgba(252,250,245,.92);box-shadow:0 2px 8px -3px rgba(7,26,21,.5);
  transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.gd-hs:hover::before{transform:scale(1.18);background:var(--iv)}
.gd-hs:focus-visible{outline:2px solid var(--or);outline-offset:0;border-radius:50%}
.gd-hs[aria-pressed="true"]::before{background:var(--em-600);border-color:var(--em-600);
  box-shadow:0 0 0 6px rgba(45,110,87,.18)}
/* choosing a part brings it forward and quietens the rest of the drawing */
.gd-parts-art[data-part] .fl [data-s]{opacity:.24;transition:opacity .4s var(--ease)}
.gd-parts-art[data-part="panel"] .fl [data-s~="panel"],
.gd-parts-art[data-part="charge"] .fl [data-s~="charge"],
.gd-parts-art[data-part="battery"] .fl [data-s~="battery"],
.gd-parts-art[data-part="rack"] .fl [data-s~="rack"],
.gd-parts-art[data-part="tank"] .fl [data-s~="tank"],
.gd-parts-art[data-part="pump"] .fl [data-s~="pump"],
.gd-parts-art[data-part="dosing"] .fl [data-s~="dosing"],
.gd-parts-art[data-part="sensors"] .fl [data-s~="sensors"],
.gd-parts-art[data-part="power"] .fl [data-s~="power"]{opacity:1}
.gd-parts-detail{position:sticky;top:calc(var(--nav-h) + 20px);border-radius:22px;background:var(--paper);
  border:1px solid var(--hair);padding:clamp(20px,2.4vw,30px);min-height:210px}
.gd-parts-hint{margin:0;color:var(--ch-3);font-size:.95rem;line-height:1.6}
.gd-part-item h3{margin:0 0 10px;font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,1.7vw,1.5rem);
  letter-spacing:-.012em;color:var(--ink)}
.gd-part-item p{margin:0;color:var(--ch);font-size:1rem;line-height:1.66}
.gd-parts-screen{margin-top:clamp(28px,4vh,48px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,3vw,48px);align-items:center}
.gd-parts-screen figure{margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--hair);background:#fff}
.gd-parts-screen img{display:block;width:100%;height:auto}
.gd-parts-screen figcaption{padding:14px 18px;background:var(--paper);color:var(--ch-3);font-size:.86rem;line-height:1.55}
.gd-parts-notes{display:grid;gap:14px}
.gd-parts-notes p{margin:0;color:var(--ch);font-size:.98rem;line-height:1.62}
.gd-parts-notes b{color:var(--ink);font-weight:600}
.gd-schem.dark{color:var(--ch-3);margin-top:12px}
@media (max-width:980px){
  .gd-parts-grid,.gd-parts-screen{grid-template-columns:1fr}
  .gd-parts-detail{position:static;min-height:0}
}

/* ---------------- the garden drawings: panel, boxes, rack, router, power ---------------- */
.fl .lq-s{fill:var(--c-sol);opacity:.3}
.fl .gr{fill:#CDB894}
.fl .pw{fill:none;stroke:#C0692B;stroke-width:1.8;stroke-dasharray:6 5}
.fl .sp-b{fill:#2B4763}
.fl .sp-c{stroke:#8FA9C4;stroke-width:1.4;opacity:.8}
.fl .sp-r{stroke:#E8B04B;stroke-width:2.2;stroke-linecap:round;opacity:.75}
.fl .bx-b{fill:#EDF1EE;stroke:#5E6E66;stroke-width:1.5}
.fl .bx-s{fill:#FBFAF6;stroke:#8FA398;stroke-width:1.3}
.fl .bx-t{font-size:12.5px;font-weight:600;fill:#3A4A43}
.fl .rk-p,.fl .rk-f{fill:#3C4A44}
.fl .rk-s{fill:#E7EDE8;stroke:#9FB0A6;stroke-width:1.2}
.fl .rk-c{fill:#5E6E66}
.fl .rk-w{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:.1 9;opacity:0}
.fl .rt-b{fill:#EDF1EE;stroke:#5E6E66;stroke-width:1.5}
.fl .rt-d{fill:var(--em-500)}
.fl .rt-l{stroke:#9FB0A6;stroke-width:2;stroke-linecap:round}
.fl .rt-a{fill:none;stroke:var(--em-400);stroke-width:2;stroke-linecap:round;opacity:.75}
.gd-loop-sec.play .gd-loop[data-step="circulate"] .rk-w{opacity:.9;animation:fl-run .75s linear infinite}

/* ============================== 02 OVERVIEW ============================== */
/* Three jobs as cards on paper, each with the emerald mark used across the site,
   beside a photograph of a garden that is actually standing somewhere. */
.gd-ov{background:var(--iv-2)}
.gd-ov-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(18px,2.6vw,34px);align-items:stretch}
.gd-jobs{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.6vw,18px);counter-reset:none}
.gd-jobs li{position:relative;background:var(--paper);border:1px solid var(--hair);border-radius:22px;
  padding:clamp(20px,2.2vw,26px) clamp(20px,2.4vw,28px);display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:18px;row-gap:4px;align-items:start;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.gd-jobs li:hover{border-color:var(--em-200);box-shadow:0 24px 46px -40px rgba(19,33,28,.5)}
.gd-job-ic{grid-row:1/4;width:46px;height:46px;border-radius:14px;background:var(--em-100);color:var(--em-600);
  display:grid;place-items:center}
.gd-job-ic svg{width:24px;height:24px}
.gd-job-n{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--em-500)}
.gd-jobs h3{margin:2px 0 6px;font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,1.9vw,1.6rem);
  line-height:1.15;letter-spacing:-.014em;color:var(--ink)}
.gd-jobs li>p:last-child{margin:0;color:var(--ch-2);font-size:.97rem;line-height:1.62}
.gd-ov-ph{margin:0;border-radius:22px;overflow:hidden;border:1px solid var(--hair);background:var(--paper);
  display:flex;flex-direction:column}
.gd-ov-ph img{display:block;width:100%;height:100%;object-fit:cover;flex:1 1 auto;min-height:280px}
.gd-ov-ph figcaption{display:grid;gap:5px;padding:14px 18px 16px;color:var(--ch-3);font-size:.86rem;line-height:1.5;
  background:var(--iv)}
.gd-ov-ph .gd-tag{color:var(--em-500)}
@media (max-width:980px){.gd-ov-grid{grid-template-columns:1fr}.gd-ov-ph{max-width:520px}}
@media (max-width:620px){.gd-jobs li{grid-template-columns:1fr;row-gap:8px}.gd-job-ic{grid-row:auto}}

/* ============================== 04 MONITORING ============================== */
.gd-mon{background:var(--iv-2)}
.gd-mon-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.gd-dash{border-radius:24px;background:var(--em-900);color:var(--iv);padding:clamp(18px,2.2vw,26px);
  box-shadow:0 40px 80px -52px rgba(7,26,21,.8)}
.gd-dash-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:14px;
  border-bottom:1px solid rgba(246,243,234,.14)}
.gd-dash-top p{margin:0;display:grid;gap:2px}
.gd-dash-top b{font-weight:600;font-size:1rem;letter-spacing:.01em}
.gd-dash-top span{font-size:12px;color:rgba(246,243,234,.6)}
.gd-dash-pill{flex:0 0 auto;padding:5px 10px;border-radius:999px;border:1px solid rgba(246,243,234,.28);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--em-200)}
.gd-dash-rows{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(14px,2vw,28px)}
.gd-dash-rows>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;
  border-bottom:1px solid rgba(246,243,234,.1)}
.gd-dash-rows dt{display:flex;align-items:center;gap:10px;font-size:.92rem;color:rgba(246,243,234,.82)}
.gd-dash-rows dt svg{width:19px;height:19px;flex:0 0 auto;color:var(--em-300)}
.gd-dash-rows dd{margin:0;font-weight:600;font-size:1.02rem;font-variant-numeric:tabular-nums;color:var(--iv)}
.gd-dash-note{margin:16px 0 0;font-size:.82rem;line-height:1.55;color:rgba(246,243,234,.62)}
.gd-mon-tx p{margin:0 0 14px;color:var(--ch);font-size:1.02rem;line-height:1.68}
@media (max-width:900px){
  .gd-mon-grid{grid-template-columns:1fr}
  .gd-dash-rows{grid-template-columns:1fr}
}

/* ============================== 06 THE NINE PARTS ============================== */
.gd-parts{background:var(--iv)}
.gd-hs::before{display:none}
.gd-hs b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:2px solid var(--em-600);background:rgba(252,250,245,.94);box-shadow:0 2px 8px -3px rgba(7,26,21,.5);
  font-family:var(--mono);font-size:11px;font-weight:400;line-height:1;color:var(--em-600);
  transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.gd-hs:hover b{transform:scale(1.14);background:var(--iv)}
.gd-hs[aria-pressed="true"] b{background:var(--em-600);border-color:var(--em-600);color:var(--iv);
  box-shadow:0 0 0 6px rgba(45,110,87,.18)}
.gd-part-item h3{display:flex;align-items:baseline;gap:10px}
.gd-part-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--em-500)}
.gd-parts-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;
  margin-top:clamp(24px,3vh,36px);padding-top:20px;border-top:1px solid var(--hair)}
.gd-parts-foot p{margin:0;max-width:70ch;color:var(--ch-2);font-size:.97rem;line-height:1.62}

/* ============================== 07 CROPS AND SETTINGS ============================== */
.gd-grow{background:var(--paper)}
/* the crop list as a band: what the materials say on the left, the crops on the right */
.gd-crops{background:var(--iv);border:1px solid var(--hair);border-radius:22px;
  padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,32px);margin-bottom:clamp(16px,2vw,22px);
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(16px,2.4vw,40px);align-items:center}
.gd-crops-say{display:grid;gap:8px}
.gd-crops-k{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--em-500)}
.gd-crops ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.gd-crops li{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 16px 8px 12px;border-radius:999px;
  background:var(--paper);border:1px solid var(--hair);color:var(--ink);font-size:.97rem;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.gd-crops li:hover{border-color:var(--em-200)}
.gd-crops li svg{width:20px;height:20px;color:var(--em-500)}
.gd-crops-note{margin:0;color:var(--ch-3);font-size:.88rem;line-height:1.55}

/* the photographs: caption inside the frame, over the picture's own foot */
.gd-shot{margin:0;position:relative;height:100%;border-radius:22px;overflow:hidden;
  background:var(--iv-3);border:1px solid var(--hair)}
.gd-shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;min-height:clamp(230px,28vh,300px);
  transition:transform 1.2s var(--ease)}
.gd-shot:hover img{transform:scale(1.03)}
.gd-shot figcaption{position:absolute;left:0;right:0;bottom:0;display:grid;gap:4px;
  padding:clamp(34px,5vw,54px) clamp(15px,1.4vw,19px) clamp(13px,1.5vw,17px);
  background:linear-gradient(0deg,rgba(7,26,21,.92) 0%,rgba(7,26,21,.6) 52%,rgba(7,26,21,0) 100%);
  color:rgba(246,243,234,.92)}
.gd-shot figcaption b{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#E3C88E;font-weight:400}
.gd-shot figcaption span{font-size:.92rem;line-height:1.45}
/* three across: at the page's widest each frame is about 420 px, so the supplied
   photographs are never asked to stretch past their own resolution */
.gd-shots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px)}
.gd-shots>li{margin:0}
.gd-grow .gd-fine{margin:clamp(14px,1.8vh,20px) 0 clamp(34px,4.6vh,54px)}

.gd-uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,30px)}
.gd-uses article{padding:clamp(22px,2.6vw,32px);border-radius:22px;background:var(--iv);border:1px solid var(--hair);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.gd-uses article:hover{border-color:var(--em-200);box-shadow:0 24px 46px -40px rgba(19,33,28,.5)}
.gd-uses article>svg{width:26px;height:26px;color:var(--em-600);padding:10px;box-sizing:content-box;
  border-radius:14px;background:var(--em-100);display:block}
.gd-uses h3{margin:16px 0 8px;font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,1.8vw,1.5rem);
  letter-spacing:-.012em;color:var(--ink)}
.gd-uses p{margin:0;color:var(--ch-2);font-size:.97rem;line-height:1.6}
@media (max-width:860px){.gd-uses{grid-template-columns:1fr}}
@media (max-width:980px){.gd-shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.gd-crops{grid-template-columns:1fr;gap:14px;align-items:start}}
@media (max-width:620px){.gd-shots{grid-template-columns:1fr}.gd-shot img{aspect-ratio:3/2}}

/* ================================== print ================================== */
@media print{
  @page{margin:14mm 12mm}
  .gd{background:#fff!important;color:#111}
  .gd main{background:#fff!important}
  .nav,.mega,.megaveil,.sheet,.skip,.env,.gd-float,.gd-play,.gd-steps,.gd-vbtn,.gd-cta,.gd-hs,
  .fp-reset,.fp-primary,.fp-caption,.fp-weight,footer .fnav{display:none!important}
  .rise,.stag>*{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important;box-shadow:none!important}
  .gd-sec{padding:10mm 0!important}
  .gd-wrap{max-width:none}
  .gd-h2{font-size:24pt;color:#111!important}
  .gd-lede,.gd-sec p,.gd-sec li,.gd-sec dd,.gd-sec dt{color:#222!important}
  .gd-k,.gd-job-n,.gd-crops-k,.gd-part-n{color:#2D6E57!important}
  .gd-hero{display:block;min-height:0!important;background:#fff!important;color:#111!important}
  .gd-hero::before,.gd-hero-media::before{display:none!important}
  .gd-hero-media{position:relative;height:auto!important;max-width:120mm;border-radius:8px}
  .gd-hero-media img{position:static!important;height:auto!important}
  .gd-hero-media figcaption{position:static;color:#333!important;padding:3mm 0}
  .gd-hero-copy{padding:6mm 0 0!important}
  .gd-h1,.gd-h1 span{color:#111!important;font-size:30pt}
  .gd-hero-lede,.gd-eyebrow{color:#333!important}
  .gd-strip{background:#fff!important;color:#111!important;padding:0}
  .gd-strip li{border-color:#ccc!important}
  .gd-strip svg{color:#2D6E57!important}
  .gd-jobs li,.gd-uses article,.gd-dash,.gd-ov-ph,.gd-shot{break-inside:avoid}
  /* the cards and the site photographs: plain frames, captions under the picture */
  .gd-ov,.gd-crops{background:#fff!important}
  .gd-ov-grid,.gd-crops{display:block}
  .gd-jobs li,.gd-uses article,.gd-crops{border:1px solid #ccc;border-radius:0}
  .gd-job-ic,.gd-uses article>svg{background:none!important;color:#2D6E57!important;
    width:auto;height:auto;padding:0}
  .gd-ov-ph img{max-height:60mm}
  .gd-shots{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3mm}
  .gd-shot{border:1px solid #ccc;border-radius:0}
  .gd-shot img{min-height:0!important;max-height:55mm}
  .gd-shot figcaption{position:static;background:none!important;color:#222!important;padding:2mm 3mm}
  .gd-shot figcaption b{color:#2D6E57!important}
  .gd-crops-note{color:#333!important}
  .gd-loop-sec{background:#fff!important;color:#111!important}
  .gd-loop-sec::before{display:none}
  .gd-loop-sec .gd-h2,.gd-loop-sec .gd-k{color:#111!important}
  .gd-loop-sec .gd-lede,.gd-say p,.gd-legend,.gd-schem{color:#222!important}
  .gd-panel-loop{display:block!important}
  .gd-steps-box{position:static!important;background:none!important;margin:0!important;padding:0!important;border:0!important}
  .gd-say{background:none!important;border:0;padding:0;min-height:0}
  .gd-say p,.js .gd-say p:not(.on){display:block!important;margin-top:2mm}
  .gd-say p>b{color:#2D6E57!important}
  .gd-loop .fl-h,.gd-parts-art .fl{display:block!important}
  .gd-loop .fl-v{display:none!important}
  .gd-loop,.gd-parts-art{margin-top:4mm;background:#fff!important;border:1px solid #ccc}
  .gd-loop [data-s],.gd-parts-art[data-part] .fl [data-s]{opacity:1!important}
  .gd-legend i,.fl{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .gd-parts-detail{position:static}
  .gd-part-item[hidden]{display:block!important;margin-bottom:3mm}
  .gd-parts-hint{display:none}
  .gd-dash{background:#fff!important;color:#111!important;border:1px solid #bbb}
  .gd-dash-top b,.gd-dash-rows dd{color:#111!important}
  .gd-dash-top span,.gd-dash-note,.gd-dash-rows dt{color:#333!important}
  .gd-dash-rows dt svg{color:#2D6E57!important}
  .gd-form{display:none!important}
  .gd-enq-card{background:#fff!important;color:#111!important;padding:0!important}
  .gd-enq-card::before{display:none}
  .gd-enq .gd-h2,.gd-enq-call a{color:#111!important}
  #jp-farm-pulse{padding:10mm 0!important;break-inside:avoid}
  .gd-fpnote{padding:0 0 6mm!important;margin:0!important;background:#fff!important}
  footer{background:#fff!important;color:#111!important}
  footer p,footer .fmeta,footer .fbot{color:#333!important}
  footer .logo{filter:none!important}
}

/* On phones the drawing runs edge to edge and its labels are sized for that scale.
   At that size its words would either be unreadable or run into each other, so the
   numbered markers carry the naming on phones and the detail panel has the words;
   only the A / B / pH bottles keep their marks. */
@media (max-width:760px){
  .gd-parts-art{margin-inline:calc(-1 * var(--pad));border-radius:0;border-left:0;border-right:0;padding:14px 8px}
  .gd-parts-svg .lb,.gd-parts-svg .lb.sm,.gd-parts-svg .sn-l,.gd-parts-svg .bx-t{display:none}
  .gd-parts-svg .ct-t{font-size:20px}
  .gd-parts-fig .gd-schem{padding:0 2px}
}

/* Five points in the strip, not the four the shared block assumes, so they sit on one
   line on a laptop instead of leaving a single item stranded on a second row. */
@media (min-width:901px){.gd-strip ul{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* two columns below that, where an odd last point takes the whole row rather than half */
@media (max-width:900px){.gd-strip li:last-child:nth-child(odd){grid-column:1 / -1}}

/* The shared hero block drops the caption's second line on phones. Here that line is
   the disclosure that the picture is a product visual and not a photograph of an
   installation, so it stays on every screen. */
@media (max-width:760px){
  .gd-hero-media figcaption span:last-child{display:block}
  .gd-hero-media figcaption{font-size:11.5px;line-height:1.4;gap:4px}
  /* and the picture darkens a little further up so both lines sit on a readable base */
  .gd-hero-media::before{background:
    linear-gradient(180deg,rgba(7,26,21,.7) 0%,rgba(7,26,21,0) 26%),
    linear-gradient(0deg,var(--em-950) 0%,rgba(7,26,21,.6) 16%,rgba(7,26,21,0) 40%)}
}