/* ==========================================================================
   Pioneer Smart Innovate — site stylesheet
   Built to the v9.1 messaging standard palette.

   ACCESSIBILITY NOTE ON THE PALETTE
   Measured against white, the brand colours give:
     deep olive  #1E3A12   15.6:1  safe for any text
     muted       #5A6150    6.4:1  safe for body text
     PSI green   #6F8C22    3.9:1  LARGE TEXT AND RULES ONLY — fails AA at body size
     orange      #EA7811    2.9:1  NON-TEXT ONLY — fails AA at every size on white
   So --green-text and --orange-text are darkened variants for small text.
   Never set body copy in --green or --orange.
   ========================================================================== */

:root{
  /* brand, unchanged */
  --deep:#1E3A12;
  --green:#6F8C22;
  --bright:#95AB29;
  --orange:#EA7811;
  --band:#E4EDCB;
  --pale:#F2F6E7;
  --rule:#D3DEB6;
  --paper:#FFFFFF;

  /* accessible text variants */
  --ink:#24291D;
  --muted:#5A6150;
  --green-text:#4F6318;     /* 6.7:1 on white */
  --orange-text:#9A4A00;    /* 6.1:1 on white */

  --maxw:1140px;
  --gut:clamp(16px,4vw,32px);
  --r:10px;
  --shadow:0 1px 2px rgba(30,58,18,.06),0 8px 24px rgba(30,58,18,.06);
}

@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-500.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-700.woff2)format("woff2");font-weight:700;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 clamp(16px,1.02rem,17px)/1.62 Poppins,"Segoe UI",system-ui,-apple-system,sans-serif;
  text-rendering:optimizeLegibility;
}

/* ---------- skip link and focus ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--deep);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:500}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--deep);outline-offset:2px;border-radius:3px}
.band :focus-visible,.foot :focus-visible{outline-color:var(--bright)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(44px,6vw,76px)}
.sec--pale{background:var(--pale)}
.sec--band{background:var(--band)}
.sec--deep{background:var(--deep);color:var(--band)}
.sec--deep h2,.sec--deep h3{color:#fff}
.sec--deep .lede,.sec--deep p,.sec--deep li{color:var(--band)}
.sec--deep .btn--pri{background:#fff;color:var(--deep)}
.sec--deep .btn--pri:hover{background:var(--band);color:var(--deep)}
.sec--deep a{color:var(--bright)}
.grid{display:grid;gap:clamp(16px,2.4vw,26px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* Exactly two columns, never three: four equal options read as a 2x2 set. */
.g2x{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.g2x{grid-template-columns:1fr}}
/* Footer sits on the deep band; the logo is dark, so it needs its own light plate. */
.foot__plate{display:inline-block;background:#fff;padding:10px 14px;border-radius:8px;line-height:0}
.g3{grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.split{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1fr}
@media(min-width:900px){.split{grid-template-columns:1.25fr .9fr}}
.split>aside,.split>.card{align-self:start}

/* ---------- type ---------- */
h1,h2,h3,h4{color:var(--deep);font-weight:700;line-height:1.14;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(30px,4.6vw,50px)}
h2{font-size:clamp(23px,2.9vw,33px)}
h3{font-size:clamp(17px,1.6vw,20px);line-height:1.3}
h4{font-size:16px;line-height:1.35}
p{margin:0 0 1.05em;max-width:72ch}
.lede{font-size:clamp(17px,1.4vw,21px);line-height:1.52;color:var(--ink)}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:var(--green-text);margin:0 0 .85em}
.sec--deep .eyebrow{color:var(--bright)}
.muted{color:var(--muted)}
.small{font-size:14.5px;line-height:1.55}
.rule{width:58px;height:4px;background:var(--green);border:0;border-radius:2px;margin:0 0 26px}
a{color:var(--green-text);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--deep)}
strong,b{font-weight:700;color:var(--deep)}
.sec--deep strong{color:#fff}
ul,ol{padding-left:1.15em;margin:0 0 1.05em;max-width:72ch}
li{margin-bottom:.5em}
ul.plain{list-style:none;padding:0}
ul.ticks{list-style:none;padding:0}
ul.ticks li{position:relative;padding-left:28px;margin-bottom:.72em}
ul.ticks li::before{content:"";position:absolute;left:4px;top:.52em;width:9px;height:9px;
  background:var(--green);border-radius:2px}

/* ---------- header ---------- */
/* Identity on the left: the mark is the only image. The company name and the
   tagline are live text. One font-size on .brand__txt drives both, and the
   tagline is a fixed fraction of it (0.5625em), so the tagline is always just
   narrower than "Pioneer Smart Innovate" and justifies to both its edges at
   every screen width. Change the one size and the whole lockup scales. */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--rule)}
.hdr__in{display:flex;align-items:center;gap:24px;min-height:96px;padding-block:12px}
.brand{display:flex;align-items:center;gap:14px;flex:0 0 auto;text-decoration:none}
.brand__mark{display:block;height:62px;width:auto;flex:0 0 auto}
.brand__txt{display:block;width:fit-content;width:-moz-fit-content;font-size:24px}
/* #2F5A3C is the artwork green darkened to 7.9:1 on white. */
.brand__name{display:block;font-size:1em;font-weight:700;line-height:1.1;
  color:#2F5A3C;letter-spacing:-.004em}
.brand__name span{display:block}
/* The artwork orange (#F86800) is 3.0:1 and fails AA. #A64B00 is the closest
   tone to it that passes, at 5.8:1. */
.brand__tag{display:block;margin-top:.17em;font-size:.5625em;font-weight:500;
  line-height:1.3;color:#A64B00;letter-spacing:.004em;
  text-align:justify;text-align-last:justify}

.nav{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.nav__row{display:flex;align-items:center;gap:3px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:8px 12px;border-radius:7px;font-size:15px;font-weight:500;
  color:var(--deep);text-decoration:none;white-space:nowrap}
.nav a:hover,.nav a:focus-visible{background:var(--pale)}
.nav a[aria-current=page]{background:var(--band);color:var(--deep)}
.navtoggle{display:none;margin-left:auto;background:var(--pale);border:1px solid var(--rule);
  border-radius:8px;padding:10px 14px;font:500 15px Poppins,sans-serif;color:var(--deep);
  cursor:pointer;flex:0 0 auto}

@media(max-width:1180px){
  .hdr__in{gap:18px}
  .brand__mark{height:56px}
  .brand__txt{font-size:clamp(19px,1.9vw,22px)}
  .nav a{padding:8px 10px;font-size:14.5px}
}
@media(max-width:959px){
  .navtoggle{display:block}
  .hdr__in{min-height:0;gap:16px}
  .brand__mark{height:54px}
  .brand__txt{font-size:24px}
  /* Menu folds below the identity block and wraps three to a row. */
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--rule);flex-direction:row;flex-wrap:wrap;
    align-items:stretch;padding:10px var(--gut) 16px;gap:6px;box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav__row{display:contents}
  .nav__row li{flex:1 1 28%}
  .nav a{text-align:center;padding:11px 8px;font-size:14.5px;background:var(--pale)}
}
/* Phones: the Menu button drops to its own line so the identity keeps the full
   width. That is what lets the lockup stay large enough to read AND stay
   justified, instead of shrinking the tagline to nine pixels. */
@media(max-width:640px){
  .hdr__in{flex-wrap:wrap;gap:10px 12px;padding-block:10px}
  .brand{flex:1 1 100%}
  .brand__mark{height:clamp(40px,11.5vw,54px)}
  .brand__txt{font-size:clamp(17px,6vw,24px)}
  .navtoggle{order:3;margin-left:auto;padding:9px 13px;font-size:14px}
}
@media(max-width:400px){
  .brand{gap:10px}
  .nav__row li{flex:1 1 44%}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:9px;
  font:500 16px/1.2 Poppins,sans-serif;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn--pri{background:var(--deep);color:#fff}
.btn--pri:hover{background:#15290c;color:#fff}
.btn--sec{background:transparent;color:var(--deep);border-color:var(--deep)}
.btn--sec:hover{background:var(--pale);color:var(--deep)}
.sec--deep .btn--sec{color:#fff;border-color:var(--bright)}
.sec--deep .btn--sec:hover{background:rgba(255,255,255,.1);color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}

/* ---------- cards ---------- */
.card{background:var(--pale);border-radius:var(--r);padding:clamp(18px,2vw,26px);
  border-top:4px solid var(--green)}
.card--flag{border-top-color:var(--orange)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.card--plain{background:#fff;border:1px solid var(--rule);border-top:4px solid var(--green)}
.sec--deep .card{background:rgba(255,255,255,.07);border-top-color:var(--bright);color:var(--band)}
.sec--deep .card p{color:var(--band)}
.tile{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:20px}
.tile h3{font-size:16.5px}
.tile p{font-size:14.5px;color:var(--muted);margin:0}
.num{font:700 clamp(30px,3.6vw,44px)/1 Poppins,sans-serif;color:var(--deep)}
.numlab{font-size:14px;color:var(--muted);line-height:1.4;margin-top:6px;display:block}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--band) 0%,var(--pale) 100%);
  padding-block:clamp(44px,6.5vw,84px) clamp(36px,5vw,64px)}
.hero h1{max-width:19ch}
.hero .lede{max-width:62ch}
.hero__stats{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,56px);margin-top:34px;
  padding-top:26px;border-top:1px solid var(--rule)}
.hero__stat{flex:1 1 0;min-width:120px;max-width:215px}
.hero__aside{background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--shadow);
  border-top:4px solid var(--orange)}
.hero__aside h2{font-size:18px;margin-bottom:.6em}
.hero__aside ol{margin:0;padding-left:1.1em;font-size:14.6px;line-height:1.5}
.hero__aside li{margin-bottom:.6em}
.hero__aside li:last-child{margin-bottom:0}

/* ---------- statline ---------- */
.statline{background:var(--pale);border-left:5px solid var(--orange);border-radius:0 var(--r) var(--r) 0;
  padding:18px 22px;margin:26px 0}
.statline p{margin:0}
.sec--deep .statline{background:rgba(255,255,255,.08);border-left-color:var(--bright)}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto;margin:0 0 1.2em}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:15px}
caption{text-align:left;font-size:14px;color:var(--muted);padding-bottom:10px}
th,td{text-align:left;vertical-align:top;padding:13px 15px;border:1px solid var(--rule)}
thead th{background:var(--band);color:var(--deep);font-weight:700;font-size:14.5px}
tbody tr:nth-child(even){background:var(--pale)}
.flag{display:inline-block;font-size:12.5px;font-weight:500;padding:3px 9px;border-radius:20px;
  background:var(--band);color:var(--deep);white-space:nowrap}
.flag--done{background:var(--deep);color:#fff}
.flag--prog{background:#FBE6CE;color:var(--orange-text)}

/* ---------- forms ---------- */
.form{max-width:640px}
.field{margin-bottom:20px}
.field label{display:block;font-weight:500;font-size:15px;color:var(--deep);margin-bottom:6px}
.req{color:var(--orange-text);font-weight:700}
.hint{display:block;font-size:13.5px;color:var(--muted);margin-top:4px;font-weight:400}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid #9BA394;border-radius:8px;background:#fff;
  font:400 16px/1.45 Poppins,sans-serif;color:var(--ink)}
textarea{min-height:140px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--deep);outline:3px solid var(--band)}
.consent{display:flex;gap:12px;align-items:flex-start;background:var(--pale);padding:16px 18px;
  border-radius:var(--r);margin-bottom:22px}
.consent input{margin-top:4px;width:20px;height:20px;flex:0 0 auto;accent-color:var(--deep)}
.consent label{font-weight:400;font-size:14.5px;color:var(--ink);margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:16px 20px;border-radius:var(--r);margin-bottom:24px;font-size:15.5px}
.alert--ok{background:var(--band);border-left:5px solid var(--green);color:var(--deep)}
.alert--err{background:#FDECE3;border-left:5px solid var(--orange);color:var(--orange-text)}

/* ---------- route cards ---------- */
.route{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column}
.route__n{font:700 13px Poppins,sans-serif;color:#fff;background:var(--deep);
  width:30px;height:30px;border-radius:7px;display:grid;place-items:center;margin-bottom:14px}
.route h3{font-size:17px}
.route p{font-size:14.8px;color:var(--muted)}
.route p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
.foot{background:var(--deep);color:var(--band);padding-block:clamp(40px,5vw,60px) 26px;font-size:15px}
.foot h2,.foot h3{color:#fff;font-size:15px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:14px}
.foot a{color:var(--band);text-decoration:none}
.foot a:hover,.foot a:focus-visible{color:#fff;text-decoration:underline}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:9px}
.foot__grid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.foot__brand img,.foot__brand svg{height:46px;width:auto;margin-bottom:16px}
.foot__btm{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.17);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:13.5px;color:#B9C79A}
.foot__btm a{color:#B9C79A}

/* ---------- misc ---------- */
.crumbs{font-size:14px;color:var(--muted);padding-top:20px}
.crumbs a{color:var(--muted)}
.pagehead{padding-block:clamp(34px,4.4vw,58px) clamp(20px,2.6vw,34px);background:var(--pale);
  border-bottom:1px solid var(--rule)}
.pagehead h1{margin-bottom:.35em}
.pagehead .lede{max-width:66ch;margin-bottom:0}
.anchors{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.anchors a{background:#fff;border:1px solid var(--rule);border-radius:20px;padding:7px 15px;
  font-size:14px;text-decoration:none;color:var(--deep)}
.anchors a:hover{background:var(--band)}
.extlink::after{content:" ↗";font-size:.85em}
@media print{.hdr,.nav,.btns,.foot__btm{display:none}body{font-size:11pt}}

/* ---------- floating WhatsApp ----------
   One enquiry route that needs no form. Deep olive rather than the WhatsApp
   green: #1E3A12 carries white text at 15.6:1, the brand green does not, and a
   restrained pill sits better with the rest of the page than a bright bubble.
   The number is not in the markup — psi.js assembles it (see that file). */
.wa{position:fixed;right:16px;bottom:16px;z-index:60;display:inline-flex;
  align-items:center;gap:8px;padding:11px 16px 11px 13px;border-radius:999px;
  background:var(--deep);color:#fff;text-decoration:none;font-weight:500;
  font-size:15px;line-height:1;box-shadow:0 2px 6px rgba(30,58,18,.2),0 10px 28px rgba(30,58,18,.18);
  transition:transform .15s ease,background .15s ease}
.wa:hover,.wa:focus-visible{background:#2A4F19;transform:translateY(-1px);color:#fff}
.wa:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
.wa__i{width:21px;height:21px;fill:currentColor;flex:0 0 auto}
.wa__t{white-space:nowrap}
/* Clear the footer's last line so the button never sits on top of a link. */
.foot{padding-bottom:84px}
@media(max-width:640px){
  .wa{right:12px;bottom:12px;padding:10px 14px 10px 11px;font-size:14px}
  .wa__i{width:19px;height:19px}
}
@media print{ .wa{display:none} }

/* ---------- narrow-viewport integrity ----------
   A grid item's automatic minimum size is its min-content width, so a long
   unbreakable token (an e-mail address, a wide table) can push a single-column
   grid wider than the viewport. Below 400px this was costing /contact/ 316px
   and /connect/ 35px of horizontal scroll. min-width:0 lets the track shrink;
   the wrap rule then breaks the token rather than overflowing. */
.grid>*,.split>*,.hdr__in>*{min-width:0}
body{overflow-wrap:break-word}
.tblwrap{max-width:100%}