:root {
  --ink: #111416;
  --green: #12191b;
  --lime: #00d7d2;
  --paper: #eef0f1;
  --white: #ffffff;
  --muted: #5c6569;
  --f1-blue: #00d7d2;
  --f1-blue-deep: #00a8a6;
  --f1-blue-soft: #85f4ef;
  --charcoal: #111719;
  --graphite: #20282b;
  --silver: #d9dddf;
  --silver-light: #f7f8f8;
  --silver-dark: #aeb5b9;
}

body {
  background:
    linear-gradient(115deg, rgba(255,255,255,.7), rgba(178,185,189,.24) 45%, rgba(255,255,255,.62)),
    #e6e9ea;
  color: var(--ink);
}

::selection {
  background: var(--f1-blue);
  color: #071011;
}

:focus-visible {
  outline: 3px solid var(--f1-blue);
  outline-offset: 3px;
}

.site-header {
  background: linear-gradient(105deg, #0c1113 0%, #1d2528 66%, #101618 100%);
  border-bottom: 3px solid var(--f1-blue);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.brand-mark {
  background: linear-gradient(145deg, var(--f1-blue-soft), var(--f1-blue) 48%, var(--f1-blue-deep));
  color: #071011;
  box-shadow: 5px 0 0 rgba(255,255,255,.13);
}

.brand small,
.site-header nav a {
  color: #d9dddf;
}

.site-header nav a:hover {
  color: var(--f1-blue-soft);
}

.header-cta,
.menu {
  border-color: var(--f1-blue);
  color: #fff;
}

.header-cta:hover,
.menu:hover {
  background: var(--f1-blue);
  color: #071011;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(7,12,14,.97) 0%, rgba(10,18,20,.82) 49%, rgba(0,215,210,.12) 100%);
}

.eyebrow,
.hero h1 span,
.trust li:before,
.steps b,
.foundation-list b,
.guarantee > strong,
.form-message,
.accessible-signoff span {
  color: var(--f1-blue);
}

.eyebrow.dark,
.process-flow b,
.check-list li:before {
  color: #007f7d;
}

.button.primary,
.service-strip {
  background: linear-gradient(115deg, var(--f1-blue-soft), var(--f1-blue) 45%, #00b7b4);
  color: #071011;
}

.button.primary:hover {
  background: #72fff8;
}

.button.ghost {
  border-color: rgba(0,215,210,.75);
}

.button.ghost:hover {
  border-color: var(--f1-blue-soft);
  background: rgba(0,215,210,.12);
}

.button.light {
  background: linear-gradient(135deg, #fff, #d7dcde);
}

.intro,
.services-grid,
.work-copy,
.accessible-process,
.accessible-columns article {
  background:
    linear-gradient(118deg, rgba(255,255,255,.92), rgba(218,222,224,.62) 48%, rgba(249,250,250,.9)),
    #e2e5e6;
}

.services-grid article {
  border-color: #b3babd;
}

.services-grid article:hover {
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 4px 0 var(--f1-blue);
}

.services-grid a {
  border-color: var(--f1-blue);
}

.icon {
  color: var(--f1-blue-deep);
}

.process,
.foundation-systems,
.accessible-hero,
.accessible-services {
  background:
    linear-gradient(125deg, #0d1315 0%, #202a2d 55%, #101719 100%);
}

.process-card p:not(.eyebrow),
.foundation-heading > p:not(.eyebrow),
.accessible-hero > p:not(.eyebrow),
.accessible-services li {
  color: #d6dcde;
}

.steps > div,
.foundation-list > div,
.accessible-services li {
  border-color: #455257;
}

.work img {
  border-left: 7px solid var(--f1-blue);
}

.accessible {
  background: #dce0e2;
}

.process-flow {
  border-color: #aeb6b9;
}

.process-flow span {
  border-color: #b6bdc0;
}

.accessible-columns {
  background: var(--f1-blue);
}

.nomination {
  box-shadow: 0 18px 60px rgba(12,21,23,.18);
  border-top: 4px solid var(--f1-blue);
}

.nomination-copy {
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(186,193,196,.72)),
    #d7dcde;
}

.heart {
  color: var(--f1-blue-deep);
}

.accessible-button {
  background: var(--charcoal);
  color: #fff;
  border: 1px solid var(--f1-blue);
}

.accessible-button:hover {
  background: var(--f1-blue-deep);
}

.accessible-signoff {
  background: linear-gradient(95deg, #101719, #263135);
  border-bottom: 4px solid var(--f1-blue);
}

.contact {
  background:
    linear-gradient(110deg, #0a1012 0%, #1f292c 70%, #0c1517 100%);
  border-top: 5px solid var(--f1-blue);
}

.contact-note {
  border-color: var(--f1-blue);
}

input,
select,
textarea {
  border-color: #607075;
  background: #172023;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--f1-blue);
  box-shadow: 0 0 0 2px rgba(0,215,210,.18);
}

footer {
  background: #070c0e;
  border-top: 1px solid #354146;
}

@media (max-width: 900px) {
  .site-header.open nav {
    background: #11191b;
    border-bottom: 2px solid var(--f1-blue);
  }
}

@media (max-width: 620px) {
  .work img {
    border-left: 0;
    border-bottom: 5px solid var(--f1-blue);
  }
}