/* ==========================================================================
   DEPARTMENT OF AGRICULTURE — Core design system
   "Field & Grain" · Manrope / Inter / IBM Plex Sans
   See 03-DESIGN/DESIGN-DNA.md. Do not add page-specific rules to this file.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* palette */
  --forest:#123B2A;
  --gov:#176B45;
  --agri:#2F7D4A;
  --sage:#7FA88A;
  --mint:#DCEDE3;
  --sand:#E8DFC9;
  --gold:#C99A3D;
  --offwhite:#F8FAF8;
  --white:#FFFFFF;
  --charcoal:#17221C;
  --muted:#617067;

  /* derived */
  --line:rgba(23,34,28,.12);
  --line-2:rgba(23,34,28,.22);
  --line-dk:rgba(255,255,255,.16);
  --line-dk-2:rgba(255,255,255,.3);
  --wash:#EFF4EF;
  --gov-dk:#0F5334;
  --gold-dk:#A87F2C;

  /* type families */
  --f-display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-data:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* type scale */
  --t-mega:clamp(2.6rem,6.4vw,5.4rem);
  --t-h1:clamp(2.1rem,4.6vw,3.9rem);
  --t-h2:clamp(1.75rem,3.4vw,2.9rem);
  --t-h3:clamp(1.22rem,1.9vw,1.62rem);
  --t-h4:clamp(1.05rem,1.35vw,1.22rem);
  --t-lead:clamp(1.04rem,1.35vw,1.28rem);
  --t-body:clamp(.96rem,1.02vw,1.05rem);
  --t-sm:clamp(.86rem,.92vw,.93rem);
  --t-label:clamp(.68rem,.76vw,.76rem);

  /* space */
  --gutter:clamp(20px,5vw,72px);
  --shell:min(1320px,100% - (2 * var(--gutter)));
  --shell-narrow:min(880px,100% - (2 * var(--gutter)));
  --sec:clamp(72px,9vw,132px);
  --sec-sm:clamp(52px,6vw,84px);

  /* radii */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:34px; --r-pill:999px;

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --d-fast:.24s; --d-mid:.46s; --d-slow:.72s;

  /* shadow */
  --sh-sm:0 1px 2px rgba(18,59,42,.06), 0 2px 8px rgba(18,59,42,.05);
  --sh-md:0 4px 12px rgba(18,59,42,.07), 0 14px 34px rgba(18,59,42,.08);
  --sh-lg:0 10px 26px rgba(18,59,42,.09), 0 30px 70px rgba(18,59,42,.12);

  --util-h:38px;
  --nav-h:76px;
  --head-h:calc(var(--util-h) + var(--nav-h));
}
@media (max-width:900px){ :root{ --nav-h:64px; --util-h:0px; } }

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.66;
  color:var(--charcoal);
  background:var(--offwhite);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-synthesis-weight:none;
}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1.08;color:var(--charcoal);text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--gov);color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
:where(.on-dark) :focus-visible{outline-color:var(--gold)}

/* skip link */
.skip{
  position:absolute;left:16px;top:-100px;z-index:2000;
  background:var(--forest);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) var(--r-sm);
  font-family:var(--f-data);font-size:var(--t-label);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;transition:top var(--d-fast) var(--ease);
}
.skip:focus{top:0}

/* ---------- 3. LAYOUT ---------- */
.shell{width:var(--shell);margin-inline:auto}
.shell--narrow{width:var(--shell-narrow);margin-inline:auto}
.sec{padding-block:var(--sec)}
.sec--sm{padding-block:var(--sec-sm)}
.sec--wash{background:var(--wash)}
.sec--mint{background:var(--mint)}
.sec--sand{background:var(--sand)}
/* tinted grounds need a darker body colour to hold 4.5:1 */
.sec--mint,.sec--sand{--muted:#525F56}
.sec--dark{background:var(--forest);color:#E7EFE9}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.on-dark{color:#E7EFE9}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}

.grid{display:grid;gap:clamp(18px,2.2vw,30px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .g-3,.g-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .g-2,.g-3,.g-4{grid-template-columns:1fr} }

/* ---------- 4. TYPE HELPERS ---------- */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--f-data);font-size:var(--t-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gov);margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);flex:none}
.on-dark .eyebrow,.sec--dark .eyebrow{color:var(--sand)}
.mega{font-size:var(--t-mega)}
.h1{font-size:var(--t-h1)}
.h2{font-size:var(--t-h2)}
.h3{font-size:var(--t-h3)}
.h4{font-size:var(--t-h4);font-weight:700;letter-spacing:-.02em}
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--muted);max-width:62ch}
.on-dark .lead,.sec--dark .lead{color:#BFD3C6}
.body{color:var(--muted)}
.sm{font-size:var(--t-sm)}
.data{font-family:var(--f-data);font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.measure{max-width:66ch}
.sec-head{margin-bottom:clamp(34px,4vw,58px);max-width:70ch}
.sec-head .lead{margin-top:16px}
.sec-head--split{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;max-width:none}
@media (max-width:800px){ .sec-head--split{flex-direction:column;align-items:flex-start} }

/* ---------- 5. BUTTONS & LINKS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:var(--t-sm);font-weight:600;letter-spacing:.01em;
  border:1.5px solid transparent;cursor:pointer;text-align:center;
  transition:background var(--d-fast) var(--ease),color var(--d-fast) var(--ease),
             border-color var(--d-fast) var(--ease),transform var(--d-fast) var(--ease),
             box-shadow var(--d-fast) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--gov);color:#fff;box-shadow:var(--sh-sm)}
.btn--primary:hover{background:var(--gov-dk);box-shadow:var(--sh-md)}
.btn--ghost{border-color:var(--line-2);color:var(--charcoal);background:transparent}
.btn--ghost:hover{border-color:var(--gov);color:var(--gov);background:rgba(23,107,69,.05)}
.btn--light{background:#fff;color:var(--forest);box-shadow:var(--sh-sm)}
.btn--light:hover{background:var(--mint)}
.btn--outline-light{border-color:var(--line-dk-2);color:#fff}
.btn--outline-light:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn--sm{padding:11px 18px;font-size:var(--t-label)}
.btn__ar{transition:transform var(--d-fast) var(--ease);display:inline-block}
.btn:hover .btn__ar{transform:translateX(4px)}

.tlink{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:600;font-size:var(--t-sm);color:var(--gov);
  padding-bottom:3px;border-bottom:1.5px solid transparent;
  transition:border-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease);
}
.tlink:hover{border-bottom-color:var(--gold);color:var(--gov-dk)}
.tlink span{transition:transform var(--d-fast) var(--ease)}
.tlink:hover span{transform:translateX(4px)}
.on-dark .tlink,.sec--dark .tlink{color:var(--sand)}
.on-dark .tlink:hover,.sec--dark .tlink:hover{color:#fff}

/* ---------- 6. PHOTOGRAPHY SYSTEM ---------- */
/* Usage:
   <figure class="ph ph--16x9" style="--lqip:url('data:image/jpeg;base64,...')">
     <picture>
       <source type="image/avif" srcset="..." sizes="...">
       <source type="image/webp" srcset="..." sizes="...">
       <img src="...jpg" alt="..." width="W" height="H" loading="lazy" decoding="async">
     </picture>
   </figure>                                                                     */
.ph{
  position:relative;overflow:hidden;display:block;
  background-image:var(--lqip);background-size:cover;background-position:center;
  background-color:var(--wash);
}
.ph::after{           /* keeps the blur from showing a hard edge while decoding */
  content:"";position:absolute;inset:0;backdrop-filter:blur(6px);
  opacity:1;transition:opacity var(--d-slow) var(--ease);pointer-events:none;
}
.ph.is-loaded::after{opacity:0}
/* without JS nothing adds .is-loaded — never leave images permanently blurred */
html:not(.js) .ph::after{opacity:0}
.ph img{width:100%;height:100%;object-fit:cover}
.js .ph img{opacity:0;transition:opacity var(--d-slow) var(--ease)}
.js .ph.is-loaded img{opacity:1}
.ph--16x9{aspect-ratio:16/9}
.ph--3x2{aspect-ratio:3/2}
.ph--4x5{aspect-ratio:4/5}
.ph--1x1{aspect-ratio:1/1}
.ph--21x9{aspect-ratio:21/9}
.ph--fill{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.ph--r{border-radius:var(--r-md)}
.ph--r-lg{border-radius:var(--r-lg)}
/* hover zoom — applied by the parent card/link */
.zoom .ph img,.ph--zoom img{transition:transform var(--d-slow) var(--ease),opacity var(--d-slow) var(--ease)}
.zoom:hover .ph img,.ph--zoom:hover img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){
  .zoom:hover .ph img,.ph--zoom:hover img{transform:none}
}
/* scrims — always directional, never flat black */
.scrim{position:absolute;inset:0;pointer-events:none}
.scrim--b{background:linear-gradient(to top,rgba(18,59,42,.92) 0%,rgba(18,59,42,.62) 34%,rgba(18,59,42,.12) 70%,rgba(18,59,42,0) 100%)}
.scrim--l{background:linear-gradient(to right,rgba(18,59,42,.9) 0%,rgba(18,59,42,.62) 38%,rgba(18,59,42,.15) 70%,rgba(18,59,42,0) 100%)}
.scrim--full{background:linear-gradient(to right,rgba(18,59,42,.86) 0%,rgba(18,59,42,.66) 45%,rgba(18,59,42,.42) 100%)}
.scrim--soft{background:linear-gradient(to top,rgba(18,59,42,.6),rgba(18,59,42,.12) 60%,transparent)}

figcaption,.ph-cap{
  font-family:var(--f-data);font-size:var(--t-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:12px;font-weight:500;
}

/* ---------- 7. UTILITY BAR ---------- */
.util{background:var(--forest);color:#C6D8CC;height:var(--util-h);display:flex;align-items:center}
.util__in{width:var(--shell);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.util__gov{
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-data);font-size:var(--t-label);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:#fff;white-space:nowrap;
}
.util__gov::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.util__links{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.util__links a{
  font-family:var(--f-data);font-size:var(--t-label);font-weight:500;letter-spacing:.08em;
  color:#C6D8CC;white-space:nowrap;transition:color var(--d-fast) var(--ease);
  padding-block:4px;
}
.util__links a:hover{color:#fff}
.util__links a.is-urdu{font-size:.86rem;letter-spacing:0}
@media (max-width:900px){ .util{display:none} }

/* ---------- 8. HEADER / NAV ---------- */
.head{position:sticky;top:0;z-index:900}
.nav{
  background:rgba(248,250,248,.92);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);height:var(--nav-h);
  transition:box-shadow var(--d-mid) var(--ease),background var(--d-mid) var(--ease);
}
.head.is-stuck .nav{box-shadow:var(--sh-md);background:rgba(248,250,248,.97)}
.nav__in{width:var(--shell);margin-inline:auto;height:100%;display:flex;align-items:center;gap:clamp(16px,2.4vw,40px)}
.brand{display:flex;align-items:center;gap:13px;flex:0 1 auto;min-width:0}
.brand__mark{width:40px;height:40px;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1.14;min-width:0}
.brand__name{font-family:var(--f-display);font-weight:800;font-size:1.03rem;letter-spacing:-.03em;color:var(--forest);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand__sub{font-family:var(--f-data);font-size:.6rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
@media (max-width:420px){ .brand__sub{display:none} }

.nav__links{display:flex;align-items:center;gap:clamp(4px,1.4vw,10px);margin-left:auto}
.nav__link{
  position:relative;padding:9px 13px;border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:500;color:var(--charcoal);
  transition:color var(--d-fast) var(--ease),background var(--d-fast) var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-mid) var(--ease);
}
.nav__link:hover{color:var(--gov);background:rgba(23,107,69,.055)}
.nav__link:hover::after,.nav__link.is-here::after{transform:scaleX(1)}
.nav__link.is-here{color:var(--gov);font-weight:600}
.nav__tools{display:flex;align-items:center;gap:10px;flex:none}
.nav__search{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--charcoal);
  transition:border-color var(--d-fast) var(--ease),background var(--d-fast) var(--ease),color var(--d-fast) var(--ease);
}
.nav__search:hover{border-color:var(--gov);color:var(--gov);background:rgba(23,107,69,.06)}
@media (max-width:1100px){ .nav__links,.nav__cta{display:none} .nav__tools{margin-left:auto} }
@media (max-width:560px){ .brand__name{font-size:.94rem} .brand{gap:10px} .brand__mark{width:36px;height:36px} }
@media (max-width:380px){ .brand__name{font-size:.86rem} .nav__tools{gap:7px} }

.burger{
  width:44px;height:44px;border-radius:var(--r-sm);display:none;place-items:center;gap:5px;
  flex-direction:column;border:1px solid var(--line-2);
}
.burger i{display:block;width:18px;height:2px;background:var(--charcoal);border-radius:2px;transition:transform var(--d-mid) var(--ease),opacity var(--d-fast) var(--ease)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1100px){ .burger{display:flex} }

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:950;background:var(--forest);color:#fff;
  display:flex;flex-direction:column;padding:calc(var(--nav-h) + 22px) var(--gutter) 40px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity var(--d-mid) var(--ease),transform var(--d-mid) var(--ease),visibility var(--d-mid);
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
.drawer__links{display:flex;flex-direction:column;gap:2px;margin-bottom:34px}
.drawer__link{
  font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,7vw,2.3rem);
  letter-spacing:-.03em;color:#fff;padding:13px 0;border-bottom:1px solid var(--line-dk);
  display:flex;align-items:center;justify-content:space-between;
  opacity:0;transform:translateY(14px);
}
.drawer.is-open .drawer__link{opacity:1;transform:none;transition:opacity .5s var(--ease) var(--dly,0s),transform .5s var(--ease) var(--dly,0s)}
.drawer__link span{color:var(--sage);font-family:var(--f-data);font-size:.7rem;letter-spacing:.12em}
.drawer__util{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:auto;padding-top:26px;border-top:1px solid var(--line-dk)}
.drawer__util a{font-family:var(--f-data);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:#A9C2B3}
.drawer__util a:hover{color:#fff}
@media (prefers-reduced-motion:reduce){
  .drawer,.drawer__link{transition-duration:.01ms!important}
}

/* ---------- 9. SEARCH OVERLAY ---------- */
.so{
  position:fixed;inset:0;z-index:980;background:rgba(18,59,42,.97);
  backdrop-filter:blur(20px);color:#fff;
  opacity:0;visibility:hidden;transition:opacity var(--d-mid) var(--ease),visibility var(--d-mid);
  overflow-y:auto;overscroll-behavior:contain;
}
.so.is-open{opacity:1;visibility:visible}
.so__in{width:var(--shell);margin-inline:auto;padding:clamp(70px,10vh,120px) 0 60px;min-height:100%;display:flex;flex-direction:column}
.so__close{position:absolute;top:22px;right:var(--gutter);width:46px;height:46px;border-radius:50%;border:1px solid var(--line-dk-2);display:grid;place-items:center;color:#fff;transition:background var(--d-fast) var(--ease)}
.so__close:hover{background:rgba(255,255,255,.14)}
.so__field{display:flex;align-items:center;gap:16px;border-bottom:2px solid var(--line-dk-2);padding-bottom:18px;transition:border-color var(--d-fast) var(--ease)}
.so__field:focus-within{border-bottom-color:var(--gold)}
.so__field svg{flex:none;color:var(--sage)}
.so__input{
  flex:1;background:none;border:0;outline:0;color:#fff;
  font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.5rem,4.4vw,3rem);
}
.so__input::placeholder{color:rgba(255,255,255,.34)}
.so__hint{margin-top:16px;font-family:var(--f-data);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}
.so__body{margin-top:clamp(30px,5vh,54px);flex:1}
.so__group + .so__group{margin-top:34px}
.so__gtitle{font-family:var(--f-data);font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.so__gtitle::after{content:"";flex:1;height:1px;background:var(--line-dk)}
.so__res{display:flex;flex-direction:column;gap:2px}
.so__hit{
  display:flex;align-items:baseline;gap:14px;padding:13px 16px;border-radius:var(--r-sm);
  transition:background var(--d-fast) var(--ease);border:1px solid transparent;
}
.so__hit:hover,.so__hit:focus-visible,.so__hit.is-active{background:rgba(255,255,255,.09);border-color:var(--line-dk)}
.so__hit b{font-weight:600;font-size:var(--t-body);color:#fff}
.so__hit i{font-style:normal;font-size:var(--t-sm);color:#A9C2B3;flex:1}
.so__hit mark{background:rgba(201,154,61,.32);color:#fff;border-radius:3px;padding:0 2px}
.so__hit em{font-style:normal;font-family:var(--f-data);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--sage);border:1px solid var(--line-dk);padding:3px 8px;border-radius:var(--r-pill);flex:none}
.so__empty{padding:36px 0;color:#A9C2B3}
.so__empty b{display:block;font-family:var(--f-display);font-size:1.3rem;color:#fff;margin-bottom:8px}
.so__sugg{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.so__chip{
  padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line-dk-2);
  font-size:var(--t-sm);color:#DCEDE3;transition:background var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease);
}
.so__chip:hover{background:rgba(255,255,255,.13);border-color:#fff;color:#fff}

/* ---------- 10. CARDS ---------- */
.card{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--d-mid) var(--ease),box-shadow var(--d-mid) var(--ease),border-color var(--d-mid) var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:rgba(23,107,69,.28)}
.card__body{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:11px;flex:1}
.card__title{font-size:var(--t-h4);font-weight:700;font-family:var(--f-display);letter-spacing:-.02em;line-height:1.24}
.card__desc{font-size:var(--t-sm);color:var(--muted);line-height:1.6}
.card__foot{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.card__meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-family:var(--f-data);font-size:var(--t-label);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
/* whole-card link target */
.card__link::after{content:"";position:absolute;inset:0;z-index:1}
/* standalone overlay anchor — must stay out of flow so it cannot take a grid cell */
.card__overlay{position:absolute;inset:0;z-index:1}

/* service card — icon + supporting photo strip */
.svc{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--d-mid) var(--ease),box-shadow var(--d-mid) var(--ease),border-color var(--d-mid) var(--ease)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:rgba(23,107,69,.28)}
.svc__ph{position:relative}
.svc__ic{
  position:absolute;left:20px;bottom:-22px;z-index:2;width:52px;height:52px;border-radius:14px;
  background:var(--white);display:grid;place-items:center;color:var(--gov);
  box-shadow:var(--sh-sm);border:1px solid var(--line);
}
.svc__body{padding:36px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.svc__title{font-family:var(--f-display);font-weight:700;font-size:var(--t-h4);letter-spacing:-.02em}
.svc__desc{font-size:var(--t-sm);color:var(--muted);flex:1}
.svc__go{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-sm);font-weight:600;color:var(--gov);margin-top:4px}
.svc__go span{transition:transform var(--d-fast) var(--ease)}
.svc:hover .svc__go span{transform:translateX(4px)}

/* image card — photo with overlaid text */
.icard{position:relative;border-radius:var(--r-md);overflow:hidden;display:block;isolation:isolate;min-height:clamp(240px,30vw,360px)}
.icard .ph{position:absolute;inset:0;width:100%;aspect-ratio:auto;height:100%}
.icard__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,2.2vw,30px);color:#fff;min-height:inherit}
.icard__k{font-family:var(--f-data);font-size:var(--t-label);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--sand);margin-bottom:10px}
.icard__t{font-family:var(--f-display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.03em;color:#fff;line-height:1.16}
.icard__d{font-size:var(--t-sm);color:#C6D8CC;margin-top:9px;max-width:46ch}

/* programme card */
.pcard{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--d-mid) var(--ease),box-shadow var(--d-mid) var(--ease),border-color var(--d-mid) var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:rgba(23,107,69,.28)}
.pcard__body{padding:clamp(20px,2vw,26px);display:flex;flex-direction:column;gap:12px;flex:1}
.pcard__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pcard__t{font-family:var(--f-display);font-weight:700;font-size:var(--t-h4);letter-spacing:-.02em;line-height:1.24}
.pcard__d{font-size:var(--t-sm);color:var(--muted)}
.pcard__rows{display:flex;flex-direction:column;gap:7px;padding-top:12px;border-top:1px solid var(--line);margin-top:auto}
.pcard__row{display:flex;gap:12px;font-size:var(--t-sm)}
.pcard__row dt{font-family:var(--f-data);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex:none;width:88px;padding-top:2px}
.pcard__row dd{color:var(--charcoal);font-weight:500}

/* news card */
.ncard{position:relative;display:flex;flex-direction:column;gap:14px}
.ncard__t{font-family:var(--f-display);font-weight:700;font-size:var(--t-h4);letter-spacing:-.025em;line-height:1.26;transition:color var(--d-fast) var(--ease)}
.ncard:hover .ncard__t{color:var(--gov)}
.ncard__d{font-size:var(--t-sm);color:var(--muted)}
.ncard__m{display:flex;align-items:center;gap:10px;font-family:var(--f-data);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ncard__m i{font-style:normal;color:var(--gov);font-weight:600}
.ncard--lead .ncard__t{font-size:var(--t-h3)}

/* resource card */
.rcard{position:relative;display:flex;gap:18px;padding:20px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);transition:border-color var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)}
.rcard:hover{border-color:rgba(23,107,69,.28);box-shadow:var(--sh-sm);transform:translateY(-2px)}
.rcard__ph{width:104px;flex:none;border-radius:var(--r-sm);overflow:hidden}
.rcard__in{display:flex;flex-direction:column;gap:8px;min-width:0}
.rcard__t{font-family:var(--f-display);font-weight:700;font-size:var(--t-h4);letter-spacing:-.02em;line-height:1.26}
@media (max-width:520px){ .rcard{flex-direction:column} .rcard__ph{width:100%;aspect-ratio:3/2} }

/* office card */
.ocard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(20px,2vw,26px);display:flex;flex-direction:column;gap:14px;transition:border-color var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease)}
.ocard:hover{border-color:rgba(23,107,69,.28);box-shadow:var(--sh-sm)}
.ocard__t{font-family:var(--f-display);font-weight:700;font-size:var(--t-h4);letter-spacing:-.02em}
.ocard__list{display:flex;flex-direction:column;gap:9px;font-size:var(--t-sm);color:var(--muted)}
.ocard__li{display:flex;gap:11px;align-items:flex-start}
.ocard__li svg{flex:none;margin-top:3px;color:var(--gov)}
.ocard__li a:hover{color:var(--gov);text-decoration:underline}

/* ---------- 11. BADGES / PILLS / STATUS ---------- */
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--r-pill);
  font-family:var(--f-data);font-size:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-2);color:var(--muted);background:var(--white);white-space:nowrap;
}
.pill--green{background:var(--mint);border-color:rgba(23,107,69,.26);color:var(--gov-dk)}
.pill--gold{background:rgba(201,154,61,.14);border-color:rgba(201,154,61,.42);color:#8A6620}
.pill--sand{background:var(--sand);border-color:rgba(201,154,61,.3);color:#6A5426}
.pill--dark{background:var(--forest);border-color:transparent;color:#fff}
.pill--open::before,.pill--closed::before,.pill--soon::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.pill--open::before{background:#2F7D4A}
.pill--soon::before{background:var(--gold)}
.pill--closed::before{background:#9AA69E}

/* ---------- 12. ALERTS ---------- */
.alert{display:flex;gap:16px;padding:20px 22px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gov)}
.alert--advisory{border-left-color:var(--gold)}
.alert--weather{border-left-color:#3E7CA6}
.alert--water{border-left-color:#2F7D4A}
.alert__ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--mint);color:var(--gov)}
.alert--advisory .alert__ic{background:rgba(201,154,61,.16);color:#8A6620}
.alert--weather .alert__ic{background:rgba(62,124,166,.13);color:#2F6183}
.alert__in{display:flex;flex-direction:column;gap:6px;min-width:0}
.alert__k{font-family:var(--f-data);font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gov)}
.alert--advisory .alert__k{color:#8A6620}
.alert--weather .alert__k{color:#2F6183}
.alert__t{font-weight:600;font-size:var(--t-body)}
.alert__d{font-size:var(--t-sm);color:var(--muted)}
.alert__date{font-family:var(--f-data);font-size:var(--t-label);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* ---------- 13. STATS ---------- */
.stat{display:flex;flex-direction:column;gap:8px}
.stat__n{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,4.6vw,3.8rem);letter-spacing:-.04em;line-height:1;color:var(--forest);font-variant-numeric:tabular-nums}
.on-dark .stat__n,.sec--dark .stat__n{color:#fff}
.stat__n em{font-style:normal;color:var(--gold)}
.stat__l{font-family:var(--f-data);font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.on-dark .stat__l,.sec--dark .stat__l{color:var(--sage)}
.stat__note{font-size:var(--t-sm);color:var(--muted)}
.on-dark .stat__note,.sec--dark .stat__note{color:#A9C2B3}

/* dark statistics band (shared by home + resources) */
.statband{position:relative;isolation:isolate;overflow:hidden;background:var(--forest)}
.statband .ph{position:absolute;inset:0;width:100%;aspect-ratio:auto;height:100%;z-index:-2;opacity:.2}
.statband::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to right,rgba(18,59,42,.97) 0%,rgba(18,59,42,.88) 55%,rgba(18,59,42,.72) 100%)}

/* ---------- 14. FORMS / SEARCH FIELD ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field__l{font-family:var(--f-data);font-size:var(--t-label);font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.input,.select,.textarea{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line-2);
  background:var(--white);font-size:var(--t-sm);color:var(--charcoal);
  transition:border-color var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease);
}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--gov);box-shadow:0 0 0 3px rgba(23,107,69,.14)}
.input::placeholder,.textarea::placeholder{color:#9AA69E}
.textarea{min-height:132px;resize:vertical}
.select{appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23617067' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
}
.err{font-size:var(--t-sm);color:#A3342B;display:none;align-items:center;gap:7px}
.field.is-bad .input,.field.is-bad .select,.field.is-bad .textarea{border-color:#C0473B;box-shadow:0 0 0 3px rgba(192,71,59,.13)}
.field.is-bad .err{display:flex}

/* big hero search */
.bsearch{position:relative;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:clamp(16px,1.6vw,20px);display:flex;gap:12px;align-items:center}
.bsearch__ic{flex:none;margin-left:8px;color:var(--gov)}
.bsearch__in{flex:1;border:0;outline:0;background:none;font-size:clamp(.98rem,1.5vw,1.14rem);color:var(--charcoal);min-width:0}
.bsearch__in::placeholder{color:#9AA69E}
@media (max-width:640px){
  .bsearch{flex-wrap:wrap;border-radius:var(--r-md)}
  .bsearch .btn{width:100%}
}

/* ---------- 15. FILTER BAR ---------- */
.fbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:20px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-sm)}
.fbar .field{flex:1;min-width:158px}
.fbar__act{display:flex;gap:9px;flex:none}
.fcount{font-family:var(--f-data);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fcount b{color:var(--charcoal);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:8px 15px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--white);
  font-size:var(--t-sm);font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap;
  transition:all var(--d-fast) var(--ease);
}
.chip:hover{border-color:var(--gov);color:var(--gov)}
.chip.is-on{background:var(--gov);border-color:var(--gov);color:#fff;font-weight:600}

/* empty / loading states */
.empty{padding:clamp(40px,6vw,72px) 24px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--white)}
.empty__t{font-family:var(--f-display);font-weight:700;font-size:var(--t-h3);margin-bottom:10px}
.empty__d{color:var(--muted);max-width:46ch;margin:0 auto 20px}
.skel{background:linear-gradient(90deg,var(--wash) 25%,#E4EBE5 37%,var(--wash) 63%);background-size:400% 100%;animation:shimmer 1.4s linear infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){ .skel{animation:none} }

/* ---------- 16. ACCORDION ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;text-align:left;font-family:var(--f-display);font-weight:700;
  font-size:var(--t-h4);letter-spacing:-.02em;color:var(--charcoal);
  transition:color var(--d-fast) var(--ease);
}
.acc__btn:hover{color:var(--gov)}
.acc__ic{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;position:relative;transition:background var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease)}
.acc__ic::before,.acc__ic::after{content:"";position:absolute;background:var(--gov);border-radius:2px;transition:transform var(--d-mid) var(--ease)}
.acc__ic::before{width:12px;height:1.8px}
.acc__ic::after{width:1.8px;height:12px}
.acc__btn[aria-expanded="true"] .acc__ic{background:var(--gov);border-color:var(--gov)}
.acc__btn[aria-expanded="true"] .acc__ic::before,.acc__btn[aria-expanded="true"] .acc__ic::after{background:#fff}
.acc__btn[aria-expanded="true"] .acc__ic::after{transform:rotate(90deg)}
.acc__panel{height:0;overflow:hidden;transition:height var(--d-mid) var(--ease)}
.acc__panel > div{padding-bottom:24px;color:var(--muted);max-width:74ch}
@media (prefers-reduced-motion:reduce){ .acc__panel{transition:none} }

/* ---------- 17. BREADCRUMBS ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:var(--f-data);font-size:var(--t-label);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.crumbs a{transition:color var(--d-fast) var(--ease)}
.crumbs a:hover{color:var(--gov)}
.crumbs li:not(:last-child)::after{content:"/";margin-left:9px;color:var(--line-2)}
.crumbs li{display:flex;align-items:center}
.crumbs [aria-current]{color:var(--charcoal);font-weight:600}
.crumbs--light{color:#A9C2B3}
.crumbs--light a:hover{color:#fff}
.crumbs--light [aria-current]{color:#fff}

/* ---------- 18. PAGE HERO (inner pages) ---------- */
.phero{position:relative;isolation:isolate;min-height:clamp(380px,52vh,560px);display:flex;align-items:flex-end;overflow:hidden}
.phero .ph{position:absolute;inset:0;width:100%;aspect-ratio:auto;height:100%;z-index:-2}
.phero .scrim{z-index:-1}
.phero__in{width:var(--shell);margin-inline:auto;padding-block:clamp(38px,5vw,64px);color:#fff}
.phero__t{font-family:var(--f-display);font-weight:800;font-size:var(--t-h1);letter-spacing:-.035em;color:#fff;margin:16px 0 14px;max-width:20ch}
.phero__d{font-size:var(--t-lead);color:#D3E2D8;max-width:56ch}

/* ---------- 19. CTA BAND ---------- */
.cta{position:relative;isolation:isolate;overflow:hidden;background:var(--forest);color:#fff}
.cta .ph{position:absolute;inset:0;width:100%;aspect-ratio:auto;height:100%;z-index:-2;opacity:.36}
.cta__in{width:var(--shell);margin-inline:auto;padding-block:clamp(56px,7vw,96px);display:flex;gap:36px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta__t{font-family:var(--f-display);font-weight:800;font-size:var(--t-h2);letter-spacing:-.035em;color:#fff;max-width:20ch}
.cta__d{color:#BFD3C6;margin-top:12px;max-width:52ch}
.cta__act{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- 20. FOOTER ---------- */
.foot{background:var(--forest);color:#B6CCBE;padding-top:clamp(56px,7vw,88px)}
.foot__top{width:var(--shell);margin-inline:auto;display:grid;gap:clamp(30px,4vw,52px);grid-template-columns:1.5fr repeat(3,1fr);padding-bottom:clamp(40px,5vw,60px)}
@media (max-width:960px){ .foot__top{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot__top{grid-template-columns:1fr} }
.foot__brand{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.foot__brand .brand__name{color:#fff}
.foot__brand .brand__sub{color:var(--sage)}
.foot__blurb{font-size:var(--t-sm);color:#A9C2B3;max-width:38ch}
.foot__h{font-family:var(--f-data);font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.foot__list{display:flex;flex-direction:column;gap:10px}
.foot__list a{font-size:var(--t-sm);color:#B6CCBE;transition:color var(--d-fast) var(--ease)}
.foot__list a:hover{color:#fff}
.foot__bot{border-top:1px solid var(--line-dk);padding-block:24px}
.foot__bot-in{width:var(--shell);margin-inline:auto;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.foot__legal{font-size:var(--t-sm);color:#8FA898}
.foot__disc{
  width:var(--shell);margin-inline:auto;margin-bottom:26px;padding:16px 20px;
  border:1px solid var(--line-dk);border-left:3px solid var(--gold);border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);font-size:var(--t-sm);color:#C6D8CC;
}
.foot__disc b{color:#fff;font-weight:600}

/* ---------- 21. REVEAL ---------- */
[data-rv]{opacity:0;transform:translateY(20px)}
.is-rv{opacity:1;transform:none;transition:opacity .68s var(--ease) var(--rv-d,0s),transform .68s var(--ease) var(--rv-d,0s)}
html:not(.js) [data-rv]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1!important;transform:none!important}
  .is-rv{transition:none}
}

/* ---------- 22. UTILITIES ---------- */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.wrap{flex-wrap:wrap}
.gap-sm{gap:10px} .gap{gap:18px} .gap-lg{gap:30px}
.mt-0{margin-top:0} .mt-sm{margin-top:12px} .mt{margin-top:22px} .mt-lg{margin-top:38px}
.center{text-align:center}
.rule{height:1px;background:var(--line);border:0}
.rule--dk{background:var(--line-dk)}
.noscroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}