/* RBP Systems website -- the ONE stylesheet of the shell (header, menu, footer,
   page bands). The generated blocks (home, store, product pages) carry their own
   styles, as they did on the live site. System fonts only: nothing is loaded
   from anywhere else. Colours taken from the live site's look. */
:root{
  --head-top:#41e77e; --head-bot:#d5dfd2; --head-line:#2d6b44;
  --page:#e1dfd9; --white:#ffffff; --ink:#151515; --green:#209d50;
  --green-dark:#14482e; --card:#98e6ac;
}
*{box-sizing:border-box;}
html{overflow-x:hidden;}
body{margin:0;background:var(--page);color:var(--ink);
  font:17px/1.55 Georgia,"Times New Roman",Times,serif;}
img{max-width:100%;height:auto;}
a{color:var(--green-dark);}

/* header: the RBP logo and the site title go home; the site's menu on the right */
.site-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:10px 24px;padding:14px clamp(16px,4vw,51px);
  background:linear-gradient(180deg,var(--head-top),var(--head-bot));
  border:4px solid var(--head-line);}
.site-brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;
  font-size:24px;letter-spacing:-.01em;line-height:1.1;}
.site-brand img{width:44px;height:44px;border-radius:6px;flex:none;}
.site-nav{display:flex;flex-wrap:wrap;gap:6px 26px;}
.site-nav a{color:var(--ink);text-decoration:none;font-size:17px;padding:2px 0;}
.site-nav a:hover,.site-nav a[aria-current="page"]{text-decoration:underline;
  text-underline-offset:6px;}

/* page bands */
main{display:block;}
.band{padding:40px 0;}
.band-grey{background:var(--page);}
.band-white{background:var(--white);}
.band-green{background:var(--green);padding:64px 0;}
.wrap{max-width:1600px;margin:0 auto;padding:0 clamp(16px,4vw,51px);}
.wrap.narrow{max-width:820px;}
.bleed{background:#070b17;}

/* the generated blocks were made to stretch a hosted page section (min-width:92vw);
   here the page itself is the section */
.rbph,.rbps,.p2h,.p2z{min-width:0 !important;width:auto !important;}
.rbps{padding-bottom:28px;}

/* product page: the panels, four across, then two, then one */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 22px;}
.cell{margin:0;}
.cell img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;}
.cell figcaption{padding:.6rem 0 0;font-size:15px;line-height:1.4;color:var(--green);}
.cell figcaption b,.cell figcaption span{display:block;}
.cell figcaption b{color:#1a7f40;}
@media(max-width:900px){.strip{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.strip{grid-template-columns:1fr;}}

/* About: Gerald's own words on a light green card */
.card{background:var(--card);padding:clamp(20px,5vw,44px);}
.prose{overflow-wrap:break-word;}
.prose h4{font-size:20px;font-weight:400;line-height:1.5;margin:0 0 1.1rem;}
.prose h4 strong{font-weight:700;}
.prose p{margin:0 0 1rem;}
.portrait{float:right;width:180px;margin:0 0 16px 20px;border:1px solid #2d6b44;}
@media(max-width:560px){.portrait{float:none;display:block;width:160px;margin:0 0 16px;}}

/* Contact */
.contact{max-width:640px;}
.contact-mail{margin-top:1.6rem;}
.contact-mail p{margin:.3rem 0;}
.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;
  padding:.7em 1.3em;letter-spacing:.02em;overflow-wrap:anywhere;}
.btn:hover{background:#1a7f40;}

/* footer: the live site's two columns */
.site-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px 40px;
  padding:40px clamp(16px,4vw,51px) 56px;background:var(--page);font-size:15px;
  text-align:center;border-top:1px solid #cfccc4;}
.foot-col p{margin:0 0 .7rem;}
.site-foot a{color:var(--ink);}
@media(max-width:560px){.site-foot{justify-content:center;}
  .site-brand{font-size:20px;}}