:root {
    --page: #e8edee;
    --ink: #14263a;
    --muted: #4a5d70;
    --chassis: #1b3045;
    --link-led: #07cb79;
    --link-text: #066b42;
    --fibre-yellow: #edb92e;
    --fibre-aqua: #1e9fc4;
    --fibre-violet: #b83a90;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font: 400 1.0625rem/1.55 Archivo, Arial, sans-serif;
}

h1, h2, h3, p, dl, dd { margin: 0; }

a { color: var(--link-text); }

:focus-visible { outline: 3px solid var(--fibre-aqua); outline-offset: 2px; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.wrap { width: min(100% - 48px, 1200px); margin-inline: auto; }

/* Header */
.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding-block: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 1.375rem;
    font-weight: 800;
    font-stretch: 125%;
    text-decoration: none;
}

.led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--link-led);
}

nav { display: flex; gap: 24px; }

nav a { color: var(--ink); font-weight: 500; }

/* Hero */
.hero { padding-block: 56px 48px; }

h1 {
    max-width: 15ch;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    font-weight: 700;
    font-stretch: 125%;
    line-height: 1.02;
    letter-spacing: -.02em;
}

.lead {
    max-width: 50ch;
    margin-block: 28px 32px;
    color: var(--muted);
    font-size: 1.25rem;
}

.button {
    display: inline-block;
    padding: 14px 24px;
    border: 0;
    border-radius: 4px;
    background: var(--link-led);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.button:hover { background: #2bdc92; }

/* Switch and services: cables end exactly where the column borders begin */
.switch { display: block; width: 100%; height: auto; }

.link circle { animation: traffic 2.3s steps(2) infinite; }
.link circle:nth-child(2) { animation-duration: 1.4s; }
.link circle:nth-child(3) { animation-duration: 3.1s; }

@keyframes traffic {
    0%, 70% { opacity: 1; }
    85% { opacity: .25; }
}

.services { display: grid; grid-template-columns: repeat(3, 1fr); }

.service {
    padding: 8px 32px 56px 24px;
    border-left: 5px solid;
}

.network { border-color: var(--fibre-yellow); }
.hosting { border-color: var(--fibre-aqua); }
.servers { border-color: var(--fibre-violet); }

h3 {
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    font-stretch: 112%;
    line-height: 1.15;
}

.service p { max-width: 34ch; color: var(--muted); }

/* About */
.about {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding-block: 72px;
}

h2 {
    font-size: 2rem;
    font-weight: 700;
    font-stretch: 125%;
    line-height: 1.1;
    letter-spacing: -.01em;
}

.about p { max-width: 55ch; font-size: 1.25rem; }

/* Contact sits on the switch chassis colour */
.contact {
    padding-block: 72px;
    background: var(--chassis);
    color: #fff;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.contact a { color: #fff; }

dl { margin-top: 32px; }

dt { margin-top: 20px; color: #b4c4d2; }

dd { font-size: 1.375rem; font-weight: 600; }

label { display: block; margin-bottom: 18px; font-weight: 500; }

input, textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    border: 1px solid #6c8297;
    border-radius: 4px;
    background: #0f2233;
    color: #fff;
    font: inherit;
}

.trap { display: none; }

#form-status { min-height: 1.55em; margin-top: 16px; }

.footer { padding-block: 24px; color: var(--muted); }

/* Error page */
.error-page {
    display: grid;
    min-height: 100vh;
    place-content: center;
    padding: 24px;
    background: var(--chassis);
    color: #fff;
}

.error-page h1 { margin-bottom: 20px; }

.error-page a { color: #fff; font-size: 1.25rem; }

@media (max-width: 760px) {
    .switch { margin-bottom: calc(-190 / 1200 * 100%); }
    .cables { display: none; }
    .services { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
    .service { padding-bottom: 8px; }
    .about, .contact-grid { grid-template-columns: 1fr; gap: 20px; }
    .about, .contact { padding-block: 56px; }
    .contact-grid { gap: 40px; }
    .hero { padding-block: 32px 40px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .link circle { animation: none; }
}