:root{
  /* brand palette */
  --ink:#1C2143; --magenta:#CD2E8F; --pink:#FF66C4; --gold:#E5A72C;
  --muted:#f6f7fb; --focus:0 0 0 3px rgba(205,46,143,.3);

  /* spacing + shadows */
  --s-1:6px; --s0:10px; --s1:14px; --s2:18px; --s3:24px; --s4:32px; --s5:48px;
  --sh1:0 4px 12px rgba(28,33,67,.08); --sh2:0 12px 28px rgba(28,33,67,.14);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  margin:0; color:#333; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.container{width:min(1100px,92vw);margin:auto}
a{text-decoration:none}

/* ---------- Header ---------- */
.header{
  background:var(--ink); color:#fff; padding:12px 0; position:sticky; top:0; z-index:10;
  box-shadow:0 6px 16px rgba(0,0,0,.08); backdrop-filter:saturate(120%) blur(4px);
  transition:box-shadow .2s ease, background-color .2s ease;
}
.header__row{display:flex;align-items:center;justify-content:space-between;gap:12px}

.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand__img{
  width:48px;height:48px;object-fit:contain;border-radius:50%;
  padding:3px;background:#fff1;border:2px solid var(--gold);
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__name{font-weight:800;font-size:19px}
.brand__tagline{display:none;color:#fff;opacity:.8;font-weight:600}
@media(min-width:1080px){.brand__tagline{display:inline}}

.nav{display:flex;gap:14px;align-items:center}
.nav__link{color:#fff;opacity:.9;padding:10px 12px;border-radius:8px;font-weight:600}
.nav__link:hover{opacity:1;background:rgba(255,255,255,.09)}
.nav__toggle{display:none;background:transparent;border:0;color:#fff;font-size:20px}
@media (max-width:840px){
  .nav{
    display:none;position:absolute;left:0;right:0;top:56px;background:var(--ink);
    flex-direction:column;padding:12px;border-top:1px solid rgba(255,255,255,.1);z-index:100
  }
  body.nav-open .nav{display:flex}
  .nav__toggle{display:block}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:12px 20px;border-radius:10px;font-weight:700;
  transition:transform .08s ease, filter .18s ease, box-shadow .18s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--focus),0 6px 16px rgba(0,0,0,.12)}
.btn--primary{background:linear-gradient(135deg,var(--magenta),var(--pink));color:#fff;border:0}
.btn--primary:hover{transform:translateY(-1px);filter:brightness(1.07)}
.btn--ghost{border:2px solid #fff;color:#fff;background:transparent}
.btn--ghost:hover{transform:translateY(-1px);background:#fff;color:var(--ink)}
.btn--gold{background:var(--gold);color:#000}
.btn--link{color:var(--magenta);padding:0}
.btn--link:hover{color:#b02076}

/* ---------- Hero (animated vibrant gradient) ---------- */
.hero{
  position:relative; isolation:isolate; min-height:78vh;
  display:flex; align-items:center; text-align:center; color:#fff;
  padding:var(--s5) var(--s2); overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(-45deg,#6a11cb,#2575fc,#ff66c4,#9b51e0);
  background-size:400% 400%; animation:gradientFlow 16s ease infinite;
  z-index:-2; pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:0; background:rgba(28,33,67,.36);
  z-index:-1; pointer-events:none;
}
.hero__content{width:min(900px,92vw);margin-inline:auto;position:relative;z-index:1}
.hero__title{font-size:clamp(2rem,1.2rem + 3vw,3.1rem);font-weight:800;margin:0 0 var(--s1);letter-spacing:.3px}
.hero__subtitle{opacity:.95;margin:0 0 var(--s1)}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:var(--s1)}
@keyframes gradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Hero watermark variant */
.hero--branded{
  position:relative;
  background:linear-gradient(-45deg,#6a11cb,#2575fc,#ff66c4,#9b51e0);
  background-size:400% 400%;
  animation:gradientFlow 16s ease infinite;
  overflow:hidden;
}
.hero--branded::before{
  content:""; position:absolute; inset:0;
  background:url("../images/sps_logo_round.png") no-repeat center center;
  background-size:520px; opacity:.12;
  filter:brightness(1.4) contrast(120%); pointer-events:none; z-index:0;
}
@media (max-width:600px){ .hero--branded::before{ background-size:240px; opacity:.15; } }

/* ---------- Badges ---------- */
.badges{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px;
}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  color:#fff; font-weight:600; font-size:.92rem;
}
/* Solid badges for light backgrounds (About/sections) */
.badges--solid .badge{
  background:#fff;
  color:rgba(0,0,0,.72);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 2px 8px rgba(28,33,67,.06);
}

/* ---------- Sections & headings ---------- */
.section{padding:var(--s5) 0}
.section + .section{ border-top:1px solid #f0f1f6; }
.section--muted{background:var(--muted)}
.h2{
  color:var(--ink);margin:0 0 var(--s2);letter-spacing:.2px;
  position:relative; display:inline-block; padding-bottom:6px;
}
.h2::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px;
  background:linear-gradient(90deg,var(--gold), rgba(229,167,44,.2));
  border-radius:3px;
}
.h3{
  font-size:1.125rem;
  font-weight:700;
  color:var(--ink);
  border-left:4px solid var(--gold);
  padding-left:8px;
  margin:0 0 var(--s1);
}

/* ---------- Grid & cards ---------- */
.grid{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:stretch}
.card{
  background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:var(--s2);
  box-shadow:var(--sh1);transition:.18s transform,.2s box-shadow,.2s border-color;
  display:flex;flex-direction:column;height:100%;
  will-change:transform, box-shadow;
}
.card:hover{
  box-shadow:0 12px 24px rgba(205,46,143,.15), var(--sh1);
  border-color:rgba(205,46,143,.25);
  transform:translateY(-3px) scale(1.01);
}
.card h3{margin-top:2px;margin-bottom:10px}
.card__text{margin-top:auto;color:#3a3a3a}
.icon-wrap{
  width:56px;height:56px;border-radius:12px;background:rgba(205,46,143,.1);
  border:1px solid rgba(205,46,143,.25);display:grid;place-items:center;margin-bottom:var(--s1);
  transition:.18s ease;
}
.card:hover .icon-wrap{transform:translateY(-2px);background:rgba(255,102,196,.14);border-color:rgba(255,102,196,.32)}
.icon{width:28px;height:28px;color:var(--magenta);stroke-width:2}

/* ---------- Metrics + trust ---------- */
.metrics__row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-bottom:var(--s2)}
@media (max-width:880px){.metrics__row{grid-template-columns:repeat(2,1fr)}}
.metric{
  background:#fff;border:1px solid #e7e9f3;border-radius:12px;text-align:center;
  padding:var(--s2);box-shadow:var(--sh1)
}
.metric__num{font-weight:800;color:var(--ink);font-size:1.6rem}

.trust__logos{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap}
.trust__logos span{
  background:linear-gradient(#fff,#fbfbfe);
  border:1px solid #e7e9f3;border-radius:8px;padding:6px 12px;
  color:#555;font-weight:600;box-shadow:0 2px 8px rgba(28,33,67,.06)
}

/* ---------- Reviews ---------- */
.quote{
  background:#fff;border-left:4px solid var(--gold);padding:16px;border-radius:10px;
  margin:10px 0;box-shadow:0 6px 16px rgba(28,33,67,.06)
}
.quote__meta{color:#666;font-weight:600;font-size:.9rem}

/* ---------- CTA Band ---------- */
.cta-band{background:linear-gradient(90deg,#1C2143,#2d3570);color:#fff;padding:var(--s3) 0;margin-top:30px}
.cta-band__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.cta-band__title{margin:0;font-size:1.25rem}
.cta-band__actions{display:flex;gap:var(--s1);flex-wrap:wrap}
.cta-band .btn--gold:hover{filter:brightness(1.06)}

/* ---------- Forms ---------- */
.form{background:#fff;border:1px solid #eee;border-radius:12px;padding:20px;box-shadow:0 6px 16px rgba(0,0,0,.05)}
.field{margin-bottom:16px}
.label{display:block;font-weight:600;margin-bottom:6px}
.input,.select,.textarea,.date{width:100%;padding:10px;border-radius:8px;border:1px solid #ccc;font:inherit}
.input:focus,.select:focus,.textarea:focus,.date:focus{outline:none;border-color:var(--magenta);box-shadow:var(--focus)}
.textarea{min-height:100px}
.form__actions{text-align:right}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#fff;padding:20px 0;text-align:center;margin-top:40px}
.footer__row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.link{color:#fff;opacity:.9}
.link:hover{opacity:1}

/* ---------- Toasts ---------- */
.toast{background:#0B3D2E;color:#E6FFF4;padding:12px 16px;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.2);margin:10px}
.toast--error{background:#3d0b0b;color:#fff}

/* ---------- Projects emblems ---------- */
.emblems{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.emblem{
  width:144px;height:72px;display:grid;place-items:center;background:#fff;border:1px solid #e9eaf2;border-radius:12px;
  box-shadow:var(--sh1);overflow:hidden;transition:.3s;filter:grayscale(100%);opacity:.85
}
.emblem img{max-width:80%;max-height:60%;object-fit:contain}
.emblem:hover{filter:none;opacity:1;transform:translateY(-2px);box-shadow:var(--sh2)}

/* ---------- Reveal animation ---------- */
.reveal{
  opacity:0;
  transform: translateY(12px) scale(0.99);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--stagger, 0ms);
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero, .hero--branded{ animation:none }
  .hero::before{ animation:none }
}

/* =========================
   ABOUT PAGE (new)
   Minimal edits only here
   ========================= */
.about-hero{
  max-width: 980px;
  margin: 0 auto 18px;
}
.about-lead{
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(0,0,0,.70);
  margin: 10px 0 0;
}

/* Top layout: main + aside */
.about-top{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s2);
  margin-top: 18px;
  align-items: stretch;
}
.about-title{ margin-bottom: 10px; }
.about-subtext{
  margin: 0;
  color: rgba(0,0,0,.68);
  line-height: 1.65;
}

/* Glance list */
.glance{
  display:grid;
  gap: 12px;
  margin-top: 12px;
}
.glance__item{
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(28,33,67,.03);
  border: 1px solid rgba(28,33,67,.08);
}
.glance__k{
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}
.glance__v{
  color: rgba(0,0,0,.70);
}

/* VMV consolidated layout */
.vmv-consolidated{
  display: grid;
  gap: var(--s2);
}

.vmv-commit{
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(1200px 500px at 10% 0%, rgba(205,46,143,.08), transparent 60%), #fff;
}

.vmv-commit__top{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  margin-bottom: 14px;
}

.vmv-commit__icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(205,46,143,.10);
  border: 1px solid rgba(205,46,143,.22);
  color: var(--magenta);
  flex: 0 0 auto;
}
.vmv-commit__icon svg{ width:22px; height:22px; }

.vmv-commit__sub{
  margin: 4px 0 0;
  color: rgba(0,0,0,.62);
}

.vmv-commit__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 10px;
}

.vmv-commit__block{
  border: 1px solid rgba(28,33,67,.10);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

.vmv-commit__label{
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 6px;
}

.vmv-commit__text{
  margin: 0;
  color: rgba(0,0,0,.70);
  line-height: 1.65;
}

/* */
.vmv-values{
  border-radius: 16px;
  background: radial-gradient(900px 320px at 0% 0%, rgba(229,167,44,.12), transparent 55%), #fff;
  border: 1px solid rgba(28,33,67,.10);
}

.vmv-values__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.vmv-values__title{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--ink);
}

.vmv-values__icon{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(229,167,44,.14);
  border: 1px solid rgba(229,167,44,.30);
  color: var(--ink);
}
.vmv-values__icon svg{ width:18px; height:18px; }

.clients-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px;
  justify-items:center;
}

.client-card{
  width:220px;
  height:96px;
  background:#fff;
  border:1px solid #e9eaf2;
  border-radius:12px;
  display:grid;
  place-items:center;
  box-shadow:var(--sh1);
  transition:.25s ease;
  filter:grayscale(100%);
  opacity:.88;
}

.client-card img{
  max-width:80%;
  max-height:60%;
  object-fit:contain;
}

.client-card:hover{
  filter:none;
  opacity:1;
  transform:translateY(-3px);
  box-shadow:var(--sh2);
}

.client-fallback{
  text-align:center;
  color:#999;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
}

/* ===== Location Card ===== */
.location-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.location-address {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
}

.map-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}

.map-wrap iframe {
  width: 100%;
  height: 260px;
  border: 0;
  display: block;
}

.location-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.location-note {
  font-size: 0.85rem;
  color: #777;
  border-top: 1px dashed rgba(0,0,0,0.1);
  padding-top: 10px;
}

/* Responsive */
@media (max-width: 980px){
  .about-top{ grid-template-columns: 1fr; } 
  .vmv-commit__grid{ grid-template-columns: 1fr; }
}

/* FIX: card__text uses margin-top:auto, which creates huge white space in Location card */
.location-card .card__text{
  margin-top: 0 !important;
}

/* Keep address + note looking correct */
.location-card .location-address{
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
}

.location-card .location-note{
  margin: 0;
  font-size: 0.85rem;
  color: #777;
  border-top: 1px dashed rgba(0,0,0,0.1);
  padding-top: 10px;
}

/* ======================================
   CONTACT PAGE GRID: stop stretching
   ====================================== */

/* Grid: do NOT stretch children to match tallest column */
.grid.grid--contact{
  align-items: start !important;
}

/* Cards inside this grid should hug content */
.grid.grid--contact > .card{
  height: fit-content !important;   /* key */
  align-self: start !important;      /* key */
}

/* Safety: if any card__text exists inside location, don't auto-push */
.grid.grid--contact .location-card .card__text{
  margin-top: 0 !important;
}