/* ICT Turf brand colors from the supplied combined Lights and Turf logos. */
:root {
  --ink: #173344;
  --ink-2: #214655;
  --lime: #66b246;
  --cream: #f5f9f7;
  --muted: #53636a;
  --line: #d7e5e5;
  --brand-green: #66b246;
  --brand-green-dark: #2f7438;
  --brand-blue: #2b98cb;
  --brand-blue-dark: #156b96;
  --brand-gray: #7d7e7e;
}

html { scroll-padding-top: 108px; }
a:focus-visible, summary:focus-visible { outline-color: var(--brand-blue); }

.site-header { box-shadow: 0 1px 0 rgba(23, 51, 68, .12); }
.header-inner { min-height: 108px; }
.wordmark { display: block; flex: none; line-height: 0; }
.wordmark img { display: block; width: 158px; height: auto; }
.desktop-nav a:hover, .portal-link:hover, .footer-links a:hover { color: var(--brand-blue-dark); }

.button-bright { background: var(--brand-green); color: #102c21; }
.button-bright:hover { background: #7bc45c; }
.button-dark { background: var(--brand-blue-dark); }
.button-dark:hover { background: #0f5679; }
.hero { background: #102d36; }
.hero-shade {
  background: linear-gradient(90deg, rgba(11, 39, 48, .93) 0%, rgba(12, 45, 52, .78) 34%, rgba(11, 39, 48, .2) 72%, rgba(11, 39, 48, .08) 100%),
              linear-gradient(0deg, rgba(11, 39, 48, .34), transparent 45%);
}
.hero h1 em { color: #52b2df; }
.hero-lead { color: #edf7f7; }
.hero-note-line { background: var(--brand-blue); }
.eyebrow { color: var(--brand-green-dark); }
.eyebrow.light { color: #91d16f; }
.intro-ribbon { background: var(--brand-blue); color: #fff; }

.section-heading h2 span, .service-area-layout h2 span { color: var(--brand-green-dark); }
.service-card:hover { border-color: #9ac7d9; box-shadow: 0 20px 45px rgba(21, 107, 150, .09); }
.service-number { color: var(--brand-blue-dark); }
.service-symbol span { background: #d8edf4; }
.service-symbol span:nth-child(2) { background: #8ccde6; }
.service-symbol span:nth-child(3) { background: var(--brand-blue); }
.service-card:nth-child(2) .service-symbol span { background: #dceecf; }
.service-card:nth-child(2) .service-symbol span:nth-child(2) { background: #a6d58b; }
.service-card:nth-child(2) .service-symbol span:nth-child(3) { background: var(--brand-green); }
.service-card:nth-child(3) .service-symbol span { background: #e2e7e7; }
.service-card:nth-child(3) .service-symbol span:nth-child(2) { background: #a7b7be; }
.service-card:nth-child(3) .service-symbol span:nth-child(3) { background: var(--brand-gray); }
.text-link:hover { color: var(--brand-blue-dark); border-color: var(--brand-blue-dark); }
.service-area-section { background: #e7f3f8; }
.service-area-copy p { color: #344f5c; }

.process-section { background: #173746; }
.process-intro > p:not(.eyebrow), .step p { color: #d7e8eb; }
.step > span { color: #63bee5; }
.customer-section { background: #f1f7f8; }
.customer-panel { background: #e0f2e7; }
.customer-copy .eyebrow { color: var(--brand-green-dark); }
.customer-mark {
  padding: 35px 22px;
  background: radial-gradient(circle at 45% 35%, #fff 0%, #e7f5fa 72%);
  transform: none;
  line-height: 1.2;
  letter-spacing: normal;
}
.customer-mark img { display: block; width: min(100%, 280px); height: auto; }
.customer-mark small { margin-top: 12px; color: var(--brand-blue-dark); font-weight: 800; }
.faq-list summary:after { color: var(--brand-blue-dark); }
.closing-section { background: var(--brand-green-dark); }

.site-footer { background: #edf5f6; color: var(--ink); }
.footer-wordmark img { width: 178px; }
.footer-bottom { color: #49606b; border-top-color: #c5d8dd; }
.footer-bottom a:hover { color: var(--brand-blue-dark); }

@media (max-width: 760px) {
  html { scroll-padding-top: 80px; }
  .header-inner { min-height: 80px; }
  .wordmark img { width: 112px; }
  .hero-shade {
    background: linear-gradient(90deg, rgba(11, 39, 48, .92), rgba(11, 39, 48, .7) 65%, rgba(11, 39, 48, .45)),
                linear-gradient(0deg, rgba(11, 39, 48, .45), transparent 60%);
  }
  .customer-mark { min-height: 280px; }
  .customer-mark img { width: min(80%, 230px); }
  .footer-wordmark img { width: 158px; }
}

@media (max-width: 390px) {
  .wordmark img { width: 100px; }
}