@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Figtree:wght@400;500;600;700&display=swap");

/* Design tokens — matches the site theme (self-contained fallbacks). */
#projectsPage{
  --green:#2A5235;--green-d:#1d3a26;--green-l:#3d6b47;
  --ink:#222831;--bg:#F8F9FA;--box:#FFFFFF;--rule:#dfe3e6;
  --muted:#5b656e;--sand:#eef1ed;
  --p-serif:"Newsreader",Georgia,serif;--p-sans:"Figtree",system-ui,sans-serif;
  font-family:var(--p-sans);color:var(--ink);width:100%;
}
#projectsPage,#projectsPage *{box-sizing:border-box}
#projectsPage a{text-decoration:none;color:inherit}

/* hero */
#projectsPage .pj-hero{background:linear-gradient(180deg,var(--sand),#fff);border-bottom:1px solid var(--rule);text-align:center;padding:60px clamp(20px,4vw,72px) 48px}
#projectsPage .pj-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin:0 0 16px}
#projectsPage .pj-hero h1{font-family:var(--p-serif);font-weight:500;font-size:clamp(38px,6vw,60px);line-height:1.06;letter-spacing:-.01em;margin:0;color:var(--ink)}
#projectsPage .pj-intro{color:var(--muted);font-size:16.5px;line-height:1.6;max-width:70ch;margin:20px auto 0}

#projectsPage .pj-wrap{max-width:1080px;margin:0 auto;padding:48px clamp(20px,4vw,48px) 72px}

/* featured flagship */
#projectsPage .pj-feature{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;background:var(--box);border:1px solid var(--rule);border-radius:8px;overflow:hidden;transition:box-shadow .16s ease,transform .16s ease}
#projectsPage .pj-feature:hover{box-shadow:0 14px 40px rgba(34,40,49,.10);transform:translateY(-3px)}
#projectsPage .pj-feature .fimg{min-height:280px;background:var(--sand) center/cover no-repeat}
#projectsPage .pj-feature .fbody{padding:36px 38px;display:flex;flex-direction:column;justify-content:center}
#projectsPage .pj-feature .flag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--green);align-self:flex-start;padding:5px 11px;border-radius:2px;margin-bottom:16px}
#projectsPage .pj-feature .fmeta{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin:0 0 8px}
#projectsPage .pj-feature h2{font-family:var(--p-serif);font-weight:500;font-size:clamp(26px,3vw,34px);line-height:1.12;margin:0 0 12px;color:var(--ink)}
#projectsPage .pj-feature:hover h2{color:var(--green)}
#projectsPage .pj-feature p{font-size:15.5px;line-height:1.62;color:var(--muted);margin:0 0 22px;max-width:54ch}
#projectsPage .pj-feature .go{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--p-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--green)}
#projectsPage .pj-feature .go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
#projectsPage .pj-feature:hover .go svg{transform:translateX(4px)}

/* section heading */
#projectsPage .pj-sec{display:flex;align-items:baseline;gap:14px;border-top:2px solid var(--green);margin:52px 0 8px;padding-top:16px}
#projectsPage .pj-sec h3{font-family:var(--p-serif);font-weight:500;font-size:clamp(22px,2.6vw,28px);margin:0}
#projectsPage .pj-sec .count{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.04em}

/* wide rows */
#projectsPage .pj-row{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:26px;align-items:center;padding:24px 0;border-top:1px solid var(--rule)}
#projectsPage .pj-row:first-of-type{border-top:0}
#projectsPage .pj-thumb{width:120px;height:104px;border-radius:4px;background:var(--sand);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--green);border:1px solid var(--rule)}
#projectsPage .pj-thumb .ty{font-family:var(--p-serif);font-weight:500;font-size:30px;line-height:1}
#projectsPage .pj-thumb .tl{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-l);margin-top:4px}
#projectsPage .pj-row .rbody h4{font-family:var(--p-serif);font-weight:500;font-size:20px;line-height:1.25;margin:0 0 6px;color:var(--ink)}
#projectsPage .pj-row:hover .rbody h4{color:var(--green)}
#projectsPage .pj-row .rmeta{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green);margin:0 0 6px}
#projectsPage .pj-row .rbody p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}
#projectsPage .pj-row .go{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--p-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--green);white-space:nowrap}
#projectsPage .pj-row .go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
#projectsPage .pj-row:hover .go svg{transform:translateX(4px)}

@media(max-width:820px){
  #projectsPage .pj-feature{grid-template-columns:1fr}
  #projectsPage .pj-feature .fimg{min-height:180px}
}
@media(max-width:620px){
  #projectsPage .pj-row{grid-template-columns:64px 1fr;gap:16px}
  #projectsPage .pj-thumb{width:64px;height:64px}
  #projectsPage .pj-thumb .ty{font-size:20px}
  #projectsPage .pj-thumb .tl{display:none}
  #projectsPage .pj-row .go{display:none}
}