:root {
  --bg_card: #fff;
  --bg_page: #e4e4e6;
  --line: #eee;
  --txt: #1a1a1f;
  --txt_light: #555;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg_page); color: var(--txt); font-family: 'Inter', sans-serif; font-size: 16px; }
main { padding-top: 81px; }
h1 { padding: 60px 0 0 0; text-align: center; }
h2 { padding: 40px 0; text-align: center; }
h3 { font-size: 22px; font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }
footer { color: var(--txt_light); font-size: 14px; padding: 20px 0; text-align: center; }
ul { margin-left: -0.8em; }

/* Card: 1 - Vertical - image | title | body text */
.sy-c-1-w { margin: 20px 0 25px 0;}
.sy-c-1-w .card { border: none; border-radius: 14px !important; margin-bottom: 20px !important; }
.sy-c-1-w .card .card-img-top { border-radius: 14px 14px 0 0 !important; filter: grayscale(100%); transition: filter 1.0s ease; }
.sy-c-1-w .card .card-body { padding: 0 30px; }
.sy-c-1-w .card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }
.sy-c-1-w .card:hover .card-img-top { filter: grayscale(0%); }
.sy-c-l-w .card a { text-decoration: none !important; }
.sy-c-l-w .card a:hover { text-decoration: none !important; }
.sy-c-1-w .card a:hover::after { transform: translateX(0.75em); }
.sy-c-1-w .card .card-footer { border-top: none; background-color: transparent; }

/* Card: List - Vertical: title | subtitle */
.sy-c-l-w { margin: 0 auto; max-width: 720px; text-align: center; }
.sy-c-l-w .card { border: none; border-radius: 14px !important; margin-bottom: 20px; padding: 20px 20px 5px 20px !important; }
.sy-c-l-w .card .card-body { padding: 0 !important; }
.sy-c-l-w .card .card-title { font-size: 22px; font-weight: 600; margin-bottom: 10px;}

.sy-fixed-header { border-bottom: solid 1px #ddd; position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; color: #111; padding: 15px 20px; text-align: center; z-index: 1000; }
.sy-industry { color: var(--txt_light); font-size: 14px; }
.sy-client   { color: var(--txt_light); font-size: 14px; margin-bottom: 10px;}
.cta { color: rgb(104, 144, 48); font-size: 32px; font-weight: 600; padding: 40px 0 20px 0; text-align: center; }
.card.sy-feature { background-color: rgb(154, 204, 108); }
.logo-circle { width: 60px; height: 60px; display: inline-block; }
.brand-text { color: #878787; font-size: 30px; font-weight: 700; letter-spacing: 0.2px; }
.sy-photo { border-radius: 14px; margin-bottom: 20px; }