@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:opsz,wght@8..40,400;8..40,600;8..40,800&family=JetBrains+Mono:wght@400;600&display=swap");

/* =========================
   ZE tokens
========================= */
:root{
  /* Palette */
  --ze-bg:#f6f8fb;
  --ze-surface:#ffffff;
  --ze-card:#ffffff;
  --ze-keyline:#e6eaf0;
  --ze-text:#0b1220;
  --ze-text-2:#4b5563;
  --ze-accent:#0b66ff;
  --ze-accent-2:#14b8a6;
  --ze-success:#16a34a;
  --ze-warning:#ea580c;
  --ze-info:#0ea5e9;

  /* Map tints */
  --ze-map-ocean: transparent;
  --ze-map-active:#1c6dd0;

  /* Type */
  --ze-font-ui:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ze-font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Rhythm and sizes */
  --ze-space-1:4px;  --ze-space-2:8px;  --ze-space-3:12px; --ze-space-4:16px;
  --ze-space-5:20px; --ze-space-6:24px; --ze-space-7:32px; --ze-space-8:40px;
  --ze-space-9:56px; --ze-space-10:72px;
  --ze-max:1200px;

  /* Lines, radii, shadows, focus */
  --ze-line: rgba(2,6,23,0.12);
  --ze-r-1:12px; --ze-r-2:16px; --ze-r-3:22px;
  --ze-shadow-1:0 1px 2px rgba(2,6,23,0.06), 0 10px 24px rgba(2,6,23,0.06);
  --ze-shadow-2:0 2px 4px rgba(2,6,23,0.07), 0 18px 50px rgba(2,6,23,0.10);
  --ze-focus:0 0 0 3px rgba(11,102,255,0.35);

  /* Readability widths */
  --ze-copy-ch:68ch;
  --ze-hero-ch:24ch;

  /* Section alternation */
  --ze-surface-1:#ffffff;
  --ze-surface-2:#f6f8fb;
  --ze-band-1:#0b66ff;
  --ze-band-2:#14b8a6;
}

/* =========================
   Olive theme overrides
   Paste below your existing :root block
========================= */
:root{
  /* Core accents */
  --ze-accent:#556B2F;   /* primary olive */
  --ze-accent-2:#A3B18A; /* light olive */

  /* Semantic tweaks to match olive feel */
  --ze-success:#4F7D3A;
  --ze-info:#6B8E23;

  /* Gradients and focus */
  --ze-band-1:#556B2F;
  --ze-band-2:#A3B18A;
  --ze-focus:0 0 0 3px rgba(85,107,47,0.35);

  /* Map */
  --ze-map-active:#6B8E23;
}

:root{
  --ze-surface-2:#f3f5ef; /* subtle olive-tinted section alt */
}

/* Buttons */
.ze-btn{
  background:var(--ze-accent);
  box-shadow:0 2px 12px rgba(85,107,47,.15);
}
.ze-btn:hover{ background:#435826 }

/* Active nav chip */
.ze-menu-links a.ze-active{
  background:#eef1e8; /* olive tint instead of blue */
  border-color:#cfd8c6;
}

/* Callout block */
.ze-callout{
  border:1px solid rgba(85,107,47,0.22);
  border-left:4px solid var(--ze-accent);
  background:linear-gradient(0deg, rgba(85,107,47,0.06), rgba(85,107,47,0.06));
}

/* CTA banner tint */
.ze-cta-banner.ze-section{
  background:linear-gradient(180deg, rgba(85,107,47,.06), rgba(0,0,0,0));
}

/* Map base tints */
.ze-geo-country{ fill:#e4eadf; stroke:#9aae8b; stroke-width:.5 }


/* =========================
   Base
========================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.ze-body{
  margin:0;
  color:var(--ze-text);
  background:var(--ze-bg);
  font-family:var(--ze-font-ui);
  line-height:1.6;
  font-feature-settings:"tnum" 1,"lnum" 1;
  text-rendering:optimizeLegibility;
}
.ze-grid-bg{
  background-image:
    linear-gradient(to bottom, transparent 0 calc(32px - 1px), var(--ze-keyline) calc(32px - 1px), var(--ze-keyline) 32px),
    linear-gradient(to right,  transparent 0 calc(32px - 1px), var(--ze-keyline) calc(32px - 1px), var(--ze-keyline) 32px);
  background-size:32px 32px,32px 32px;
}
.ze-container{max-width:var(--ze-max);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.ze-section{position:relative;padding-block:clamp(var(--ze-space-8),7vw,var(--ze-space-10));scroll-margin-top:96px}
.ze-section:nth-of-type(odd){background:var(--ze-surface-1)}
.ze-section:nth-of-type(even){background:var(--ze-surface-2)}
.ze-section::before{
  content:"";position:absolute;inset:0 0 auto 0;height:6px;
  background:linear-gradient(90deg,var(--ze-band-1),var(--ze-band-2));
  opacity:.9;border-bottom:1px solid var(--ze-line);pointer-events:none;
}
.ze-center{text-align:center}
.ze-lead{max-width:70ch;margin-inline:auto;color:var(--ze-text-2)}

/* Headings */
:where(h1,h2){text-wrap:balance}
.ze-hero h1{
  font-weight:800;letter-spacing:.2px;
  font-size:clamp(2.5rem,4.6vw,3.25rem);
  line-height:1.08;max-width:var(--ze-hero-ch);
  margin:0 0 var(--ze-space-2);text-align:center
}
.ze-hero .ze-lead{font-size:clamp(1.0625rem,1.6vw,1.125rem)}
.ze-section h2{font-size:clamp(1.75rem,2.4vw,2rem);line-height:1.2;margin:0 0 .75rem}
.ze-section h3{font-size:1.25rem;line-height:1.3;margin:0 0 .5rem}
p{letter-spacing:.005em}

/* =========================
   Layout helpers
========================= */
.ze-grid{display:grid;gap:clamp(16px,2vw,24px)}
.ze-grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.ze-grid-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ze-grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ze-two{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(12,1fr)}
.ze-two .ze-left{grid-column:span 5}.ze-two .ze-right{grid-column:span 7}
@media (max-width:900px){.ze-two .ze-left,.ze-two .ze-right{grid-column:1/-1}}

/* =========================
   Components
========================= */
.ze-card{
  background:var(--ze-card);
  border:1px solid var(--ze-keyline);
  border-radius:var(--ze-r-2);
  box-shadow:var(--ze-shadow-1);
  padding:clamp(var(--ze-space-5),2.4vw,var(--ze-space-6));
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ze-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--ze-accent) 28%, var(--ze-keyline));
  box-shadow:0 6px 18px rgba(0,0,0,.07);
}
.ze-callout{
  display:grid;gap:.5rem;padding:1.1rem 1rem;
  border:1px solid rgba(11,102,255,0.22);
  border-left:4px solid var(--ze-accent);
  background:linear-gradient(0deg, rgba(11,102,255,0.06), rgba(11,102,255,0.06));
  border-radius:var(--ze-r-1);
}
.ze-badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ze-badge{padding:.35rem .6rem;border-radius:999px;border:1px solid var(--ze-keyline);color:var(--ze-text-2);background:#fff}
.ze-inline-list{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;list-style:none;padding:0;margin:10px 0 0}
.ze-inline-list li{
  background:#fff;border:1px solid var(--ze-keyline);
  box-shadow:0 1px 1px rgba(0,0,0,.04);font-weight:600;
  border-radius:9999px;padding:8px 14px;line-height:1.35;white-space:nowrap;overflow:visible
}
@media (max-width:480px){.ze-inline-list li{white-space:normal;text-wrap:pretty}}

.ze-btn{
  appearance:none;border:1px solid transparent;background:var(--ze-accent);color:#fff;
  padding:.8rem 1rem;border-radius:12px;font-weight:700;text-decoration:none;
  box-shadow:0 2px 12px rgba(11,102,255,.15);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease
}
.ze-btn:hover{transform:translateY(-2px);background:#084acc}
.ze-btn:focus-visible{outline:none;box-shadow:var(--ze-focus)}
.ze-btn.secondary{background:transparent;border:1px solid var(--ze-line);color:var(--ze-text)}
.ze-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:.5rem}

/* Clamp utilities */
.ze-clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.ze-clamp-1{--ze-clamp-lines:1}.ze-clamp-2{--ze-clamp-lines:2}.ze-clamp-3{--ze-clamp-lines:3}.ze-clamp-4{--ze-clamp-lines:4}
.ze-clamp-2{-webkit-line-clamp:2;line-clamp:2}
.ze-clamp-3{-webkit-line-clamp:3;line-clamp:3}
.ze-clamp-4{-webkit-line-clamp:4;line-clamp:4}

/* =========================
   Header and footer
========================= */
.ze-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.86);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--ze-keyline)}
.ze-nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.ze-brand{display:flex;align-items:center;gap:.6rem;color:var(--ze-text);text-decoration:none}
/* Replace gradient badge with your image */
.ze-logo{
  width:48px; height:48px;
  background: none;
  background-image: url("assets/logo-64.png");
  background-size: cover;
  background-position: center;
  border: 0;
  box-shadow: none;
  border-radius: 999px;
}
.ze-logo::after{ content: none; }

.ze-menu{display:none}
.ze-menu-links{display:flex;gap:clamp(8px,2vw,16px);flex-wrap:wrap}
.ze-menu-links a{color:var(--ze-text);text-decoration:none;padding:.5rem .7rem;border-radius:10px;border:1px solid transparent;font-weight:600}
.ze-menu-links a:hover{border-color:var(--ze-keyline);background:#f6f8fb}
.ze-menu-links a.ze-active{background:#eef4ff;border-color:#cfe0ff}
@media (max-width:900px){
  .ze-menu{display:inline-block;background:#fff;border:1px solid var(--ze-keyline);color:var(--ze-text);padding:.5rem .7rem;border-radius:10px}
  .ze-menu-links{display:none;flex-direction:column;position:absolute;right:16px;top:64px;background:#fff;border:1px solid var(--ze-keyline);border-radius:12px;padding:8px}
  .ze-menu-links.ze-show{display:flex}
}

.ze-footer{border-top:1px solid var(--ze-keyline);padding-block:28px;background:#fff;color:var(--ze-text-2)}
.ze-links{list-style:none;padding:0;margin:0}.ze-links li{margin:.2rem 0}
.ze-footgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ze-top{position:fixed;right:16px;bottom:16px;display:none;border:1px solid var(--ze-keyline);background:#fff;color:var(--ze-text);padding:.6rem .8rem;border-radius:10px}
.ze-top.ze-show{display:inline-block}

/* =========================
   Forms
========================= */
.ze-form{display:grid;gap:.75rem;grid-template-columns:repeat(6,1fr)}
.ze-span-3{grid-column:span 3}.ze-span-6{grid-column:span 6}
.ze-form label{font-weight:600;color:var(--ze-text)}
.ze-form input,.ze-form select,.ze-form textarea{
  width:100%;min-height:44px;padding:.7rem .8rem;border-radius:10px;background:#fff;color:var(--ze-text);border:1px solid var(--ze-keyline)
}
.ze-form input:focus-visible,.ze-form select:focus-visible,.ze-form textarea:focus-visible{outline:none;box-shadow:var(--ze-focus)}
.ze-form input:invalid,.ze-form select:invalid,.ze-form textarea:invalid{border-color:#ef4444;box-shadow:0 0 0 2px rgba(239,68,68,.12)}
.ze-actions{display:flex;gap:.6rem;align-items:center}

/* =========================
   A11y and motion
========================= */
.ze-skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.ze-skip:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:var(--ze-accent);color:#fff;border-radius:8px;z-index:1000;outline:var(--ze-focus)}
.ze-reveal{opacity:0;transform:translateY(10px);transition:opacity .4s ease, transform .4s ease}
.ze-reveal.ze-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .ze-reveal{opacity:1;transform:none}
}
@media (forced-colors:active){
  .ze-card,.ze-btn{forced-color-adjust:auto;box-shadow:none}
}
@media print{
  body{background:#fff;color:#000}
  .ze-header,.ze-footer,.ze-top{display:none !important}
  .ze-card,.ze-callout{box-shadow:none;border-color:#ddd}
}

/* =========================
   Map
========================= */
.ze-geo-wrap{display:grid;gap:1rem;aspect-ratio:16/9}
@media(min-width:900px){.ze-geo-wrap{grid-template-columns:280px 1fr}}
.ze-legend{display:flex;flex-wrap:wrap;gap:.5rem}
.ze-legend .ze-region,.ze-legend .ze-reset{
  appearance:none;border:1px solid var(--ze-keyline);background:#fff;
  padding:.5rem .75rem;border-radius:.5rem;cursor:pointer;font:inherit;
  box-shadow:0 1px 2px rgba(0,0,0,.05)
}
.ze-legend .ze-region[aria-pressed="true"]{background:var(--ze-map-active);color:#fff;border-color:transparent}
.ze-map-area{position:relative}
#ze-geo-map{
  width:100%;height:auto;background:var(--ze-map-ocean);
  border:0;border-radius:14px;box-shadow:none;
  touch-action:pan-x pan-y;
}
.is-framed #ze-geo-map{border:1px solid var(--ze-keyline);box-shadow:var(--ze-shadow-1)}
.ze-geo-graticule{stroke:rgba(20,40,80,.12);fill:none;display:none}
.ze-geo-country{fill:#d4e2f5;stroke:#7a93b3;stroke-width:.5}
.ze-geo-country.is-active{fill:var(--ze-map-active)}
.ze-tooltip{
  position:absolute;pointer-events:none;padding:.35rem .5rem;background:#111;color:#fff;
  border-radius:.375rem;font-size:.85rem;box-shadow:0 2px 6px rgba(0,0,0,.25);transform:translate(-50%,-120%)
}

/* =========================
   Page specific trims
   Uses og:title targeting to avoid global overrides
========================= */

/* Expertise and Services: row style instead of heavy cards, with zebra scan aid */
html:has(head meta[property="og:title"][content="Expertise"]) .ze-section .ze-grid,
html:has(head meta[property="og:title"][content="Commercial Services"]) main > .ze-section:nth-of-type(2) .ze-grid{
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
}
html:has(head meta[property="og:title"][content="Expertise"]) .ze-section .ze-card,
html:has(head meta[property="og:title"][content="Commercial Services"]) main > .ze-section:nth-of-type(2) .ze-card{
  background:transparent;border:0;box-shadow:none;border-bottom:1px solid var(--ze-line);
  border-radius:0;padding:16px 0;margin:0
}
html:has(head meta[property="og:title"][content="Expertise"]) .ze-section .ze-card:nth-child(even),
html:has(head meta[property="og:title"][content="Commercial Services"]) main > .ze-section:nth-of-type(2) .ze-card:nth-child(even){
  background:rgba(2,6,23,.03)
}

/* Commercial Services: pill list for engagement models */
html:has(head meta[property="og:title"][content="Commercial Services"]) main > .ze-section:nth-of-type(3) .ze-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:clamp(14px,2vw,20px);align-items:stretch
}
html:has(head meta[property="og:title"][content="Commercial Services"]) main > .ze-section:nth-of-type(3) .ze-card{
  background:#fff;border:1.5px dashed var(--ze-line);border-radius:999px;
  padding:clamp(16px,2.2vw,22px) clamp(22px,3vw,32px);line-height:1.5;overflow:visible;text-wrap:pretty
}
@supports (border-image:initial){
  html:has(head meta[property="og:title"][content="Commercial Services"]) main > .ze-section:nth-of-type(3) .ze-card{border-style:dashed;border-image:initial}
}
@media (max-width:720px){
  html:has(head meta[property="og:title"][content="Commercial Services"]) main > .ze-section:nth-of-type(3) .ze-grid{grid-template-columns:1fr}
}

/* Expertise: smoother square cards for deeper lists */
html:has(head meta[property="og:title"][content="Expertise"]) main > .ze-section:nth-of-type(3) .ze-grid,
html:has(head meta[property="og:title"][content="Expertise"]) main > .ze-section:nth-of-type(4) .ze-grid{
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));align-items:stretch
}
html:has(head meta[property="og:title"][content="Expertise"]) main > .ze-section:nth-of-type(3) .ze-card,
html:has(head meta[property="og:title"][content="Expertise"]) main > .ze-section:nth-of-type(4) .ze-card{
  background:var(--ze-surface);border:1px solid var(--ze-keyline);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.05);
  padding:clamp(16px,2vw,22px);display:flex;flex-direction:column
}

/* =========================
   Home and About centering
========================= */
/* Center the Browse industries button and keep it centered even if markup shifts */
main .ze-section:has(.ze-inline-list) .ze-inline-list{justify-content:center}
main .ze-section:has(.ze-inline-list) p.ze-center{display:grid;place-items:center;margin-top:12px}
main .ze-section:has(.ze-inline-list) p.ze-center .ze-btn{margin-inline:auto}
.ze-cta-banner.ze-section{
  background:linear-gradient(180deg, rgba(11,102,255,.06), rgba(0,0,0,0));
  border-top:1px solid var(--ze-keyline);border-bottom:1px solid var(--ze-keyline);
  padding-block:clamp(56px,10vw,120px)
}


/* Sitewide hero centering */
.ze-hero,
.ze-hero .ze-container { 
  text-align: center; 
}

.ze-hero h1 { 
  margin-left: auto; 
  margin-right: auto; 
  max-width: var(--ze-hero-ch); 
}

.ze-hero .ze-lead { 
  margin-left: auto; 
  margin-right: auto; 
  max-width: 72ch; 
}

.ze-hero .ze-cta { 
  justify-content: center; 
}

/* Make the brand name much larger and give it a subtle hover */
.ze-nav{ padding:1rem 0; } /* a little extra room */

.ze-brand strong{
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  transition: color .2s ease;
}

.ze-brand:hover strong{ color: var(--ze-accent); }


/* =========================
   Final olive lock - paste at file end
========================= */

/* Links */
:root{
  --ze-link:#556B2F;
  --ze-link-hover:#435826;
}
a{ color:var(--ze-link); }
a:hover, a:focus-visible{
  color:var(--ze-link-hover);
  text-decoration-color:var(--ze-link-hover);
}

/* Buttons - kill blue hover and blue shadow */
.ze-btn{
  background:var(--ze-accent);
  color:#fff;
  border:1px solid var(--ze-accent);
  box-shadow:0 2px 12px rgba(85,107,47,.15);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.ze-btn:hover,
.ze-btn:focus-visible{
  background:#435826;
  border-color:#435826;
  color:#fff;
}

/* Active nav chip - remove blue tint */
.ze-menu-links a.ze-active{
  background:#EEF1E8;    /* olive tint */
  border-color:#CFD8C6;
  color:#1C1C1C;
}
/* Optional: soften generic hover */
.ze-menu-links a:hover{
  border-color:#CFD8C6;
  background:#F3F5EF;
}

/* Callout - remove blue borders and wash */
.ze-callout{
  border:1px solid rgba(85,107,47,0.22);
  border-left:4px solid var(--ze-accent);
  background:linear-gradient(0deg, rgba(85,107,47,0.06), rgba(85,107,47,0.06));
}

/* CTA banner wash - from blue to olive */
.ze-cta-banner.ze-section{
  background:linear-gradient(180deg, rgba(85,107,47,.06), rgba(0,0,0,0));
}

/* Map - remove blue land and strokes */
.ze-geo-country{
  fill:#E3EBD9;
  stroke:#8DA37A;
  stroke-width:.5;
  transition:fill .2s ease, stroke .2s ease, opacity .2s ease;
}
.ze-geo-country:hover{
  fill:#A3B18A;
  stroke:#556B2F;
  stroke-width:.6;
}
.ze-geo-country.is-active,
.ze-geo-country[aria-current="true"]{
  fill:var(--ze-map-active); /* already olive */
  stroke:#3F4D23;
  stroke-width:.7;
}
.ze-geo-graticule{
  stroke:#C7D2BE;
  fill:none;
  stroke-opacity:.6;
  stroke-width:.5;
}

/* Clean list bullets used in Services cards */
.ze-bullets{
  list-style:none;
  margin:.5rem 0 0;
  padding-left:0;
}
.ze-bullets li{
  position:relative;
  padding-left:1.1rem;
  margin:.35rem 0;
  line-height:1.55;
}
.ze-bullets li::before{
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:.42em; height:.42em;
  border-radius:50%;
  background:currentColor;
  opacity:.45;
}

/* Services section: lighter “row” cards instead of heavy boxes */
html:has(head meta[property="og:title"][content="Commercial Services"]) main > .ze-section:nth-of-type(2) .ze-card{
  background:transparent;
  border:0;
  box-shadow:none;
  border-bottom:1px solid var(--ze-line);
  border-radius:0;
  padding:16px 0 18px;
}
html:has(head meta[property="og:title"][content="Commercial Services"]) main > .ze-section:nth-of-type(2) .ze-card h3{
  margin-bottom:.4rem;
}