/* Customers section, team page and the shared site footer. Loaded after base.css on every page. */
.site-ic{display:block;width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity 600ms var(--ease),transform 700ms var(--ease);transition-delay:calc(var(--d,0) * 70ms)}
.js .reveal.is-in{opacity:1;transform:none}
.kicker{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#9fb86a}
.kicker b{font-weight:600;color:#d1f5a0}
/* Marks content that is waiting for real details from ZEVO (client names, address, hours, social links). */
.pending{color:#6f7988;font-style:italic}

/* Customers */
#customers{background:radial-gradient(ellipse at 15% 0%,#1b231740,transparent 55%),#0b0d10}
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.case{display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid #2c323b;border-radius:16px;background:linear-gradient(180deg,#13161a,#0f1114);transition:border-color 200ms ease}
.case:hover{border-color:#4e6132}
.case-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:999px;border:1px solid #3d4a2b;background:#1b2317;color:#c9e79a;font-size:11px}
.case-tag .site-ic{width:14px;height:14px}
.case h3{font-size:20px;line-height:1.35;margin:0}
.case>p{margin:0;font-size:13.5px;line-height:1.7;color:#aeb6c2}
.case ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:13px;line-height:1.6;color:#c3cad4}
.case li{position:relative;padding-left:16px}
.case li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:#7f9a52}
.case-note{margin-top:auto;padding-top:14px;border-top:1px solid #262b33;font-size:11.5px;color:#7f8996}

/* Footer */
.site-footer{padding:76px 0 28px;border-top:1px solid #2a2d33;background:radial-gradient(ellipse at 85% 0%,#1b231733,transparent 50%),#090a0b}
.footer-cta{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:34px 36px;margin-bottom:64px;border:1px solid #2f3a24;border-radius:20px;background:linear-gradient(120deg,#151b10,#0f1114 60%)}
.footer-cta h2{font-size:clamp(24px,2.6vw,34px);line-height:1.2;margin:0 0 8px}
.footer-cta p{margin:0;font-size:14px;color:#aab2bf;max-width:52ch}
.footer-cta-actions{display:flex;gap:10px;flex-wrap:wrap;flex:none}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(0,1fr)) minmax(0,1.35fr);gap:40px}
.footer-brand .logo{width:112px}
.footer-tagline{margin:20px 0 0;font-size:14px;line-height:1.75;color:#aab2bf;max-width:32ch}
.socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.social{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid #2f353e;background:#111317;color:#c3cad4;transition:color 160ms ease,border-color 160ms ease,background 160ms ease}
.social .site-ic{width:18px;height:18px}
.social[href]:hover{color:#fff;border-color:#8cad52;background:#1b2317}
.social:not([href]){color:#6f7988;border-style:dashed}
.footer-heading{margin:0 0 16px;font-size:11px;line-height:1.4;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#d1f5a0}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.footer-col a{display:inline-flex;align-items:center;min-height:34px;font-size:13.5px;color:#aab2bf;text-decoration:none;transition:color 160ms ease}
.footer-col a:hover{color:#fff}
.footer-contact li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;font-size:13.5px;line-height:1.6;color:#aab2bf}
.footer-contact li .site-ic{width:17px;height:17px;margin-top:3px;color:#7f9a52}
.footer-contact a{min-height:0;display:inline}
.footer-contact small{display:block;font-size:11.5px;color:#7f8996}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:56px;padding-top:22px;border-top:1px solid #ffffff12;font-size:11.5px;color:#8f99a8}
.footer-bottom p{margin:0}
.footer-bottom a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.footer-bottom a:hover{color:#fff}

/* Team page */
.page-hero{position:relative;padding:176px 0 92px;border-bottom:1px solid #ffffff10;background:radial-gradient(ellipse at 78% 18%,#1b231766,transparent 58%),#090a0b;overflow:hidden}
.page-hero h1{font-size:clamp(46px,6.2vw,84px);text-align:left;max-width:14ch}
.page-hero .panel-intro{margin-top:26px;font-size:17px;max-width:58ch}
.page-hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:56px 56px;-webkit-mask:radial-gradient(ellipse at 75% 30%,#000,transparent 65%);mask:radial-gradient(ellipse at 75% 30%,#000,transparent 65%)}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.hero-chips span{padding:7px 12px;border:1px solid #373d46;border-radius:999px;font-size:12px;color:#c0c8d4}
.principles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.principle{padding:26px 24px;border:1px solid #2c323b;border-radius:16px;background:#111317}
.principle .site-ic{width:26px;height:26px;color:#c9f28a}
.principle h3{font-size:18px;line-height:1.35;margin:18px 0 8px}
.principle p{margin:0;font-size:13.5px;line-height:1.75;color:#aeb6c2}
#roles{background:#0b0d10}
.role-group+.role-group{margin-top:48px}
.role-group-title{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#9fb86a}
.role-group-title::after{content:'';flex:1;height:1px;background:#262b33}
.role-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.role{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;padding:24px;border:1px solid #2c323b;border-radius:16px;background:linear-gradient(180deg,#13161a,#0f1114);transition:border-color 200ms ease,transform 300ms var(--ease)}
.role:hover{border-color:#5d7a3a;transform:translateY(-3px)}
.role-avatar{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;border:1px solid #4e6132;background:#1b2317;color:#c9f28a}
.role-avatar .site-ic{width:24px;height:24px}
.role h4{margin:3px 0 7px;font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:#eef0f4}
.role p{margin:0;font-size:13px;line-height:1.7;color:#aeb6c2}
.role-note{margin:28px 0 0;font-size:12px;color:#7f8996}
.team-steps .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.team-chip{padding:5px 10px;border-radius:999px;border:1px solid #3d4a2b;background:#1b2317;color:#dcf5bd;font-size:11.5px}
.careers{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center;padding:44px;border:1px solid #2c323b;border-radius:20px;background:radial-gradient(ellipse at 100% 0%,#1b231780,transparent 60%),#111317}
.careers h2{font-size:clamp(30px,3.4vw,44px)}
.careers .panel-intro{margin-top:18px}
.careers ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.careers li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.6;color:#c3cad4}
.careers li .site-ic{margin-top:2px;color:#c9f28a}
.careers .panel-button{margin-top:28px}

@media(max-width:1100px){
  .footer-grid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:44px}
  .footer-brand{grid-column:1/-1}
  .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .principles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:850px){
  .case-grid{grid-template-columns:1fr}
  .footer-cta{flex-direction:column;align-items:flex-start;padding:28px 24px;margin-bottom:52px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
  .footer-contact{grid-column:1/-1}
  .careers{grid-template-columns:1fr;gap:30px;padding:32px 26px}
  .page-hero{padding:140px 0 70px}
}
@media(max-width:552px){
  .case{padding:22px 20px}
  .principles,.role-grid{grid-template-columns:1fr}
  .role{grid-template-columns:46px 1fr;gap:14px;padding:20px}
  .role-avatar{width:46px;height:46px;border-radius:12px}
  .site-footer{padding-top:56px}
  .footer-cta-actions{width:100%}.footer-cta-actions .btn{flex:1}
  .footer-bottom{flex-wrap:wrap;gap:6px 18px}
  .page-hero h1{font-size:clamp(40px,11vw,56px)}
  .page-hero .panel-intro{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}