/* Rusa Solutions. Bootstrap's reboot and grid load first; everything else the site looks like is in this file. */

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/dm-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2");
}

/* Design tokens. Contrast, measured: navy on white 14.52, ink on white 7.53, ink on alt 7.08.
   White on the brand rust is 4.09, below AA for button-sized text, so buttons use rust-button (4.89). The brand rust
   stays for the logo and small marks that are not text. */
:root {
    --navy: #13294b;
    --rust: #c4622d;
    --rust-button: #b4561f;
    --rust-dark: #a94f20;
    --white: #ffffff;
    --alt: #f7f8fa;
    --panel: #edf0f4;
    --on-dark-soft: #d5dbe5;
    --ink: #4a5568;
    --line: #dde1e7;
    --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius: 8px;
    --section-space: 4.5rem;
    --bs-body-font-family: var(--font);
    --bs-body-font-weight: 400;
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--white);
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.7;
    --bs-link-color-rgb: 19, 41, 75;
    --bs-link-hover-color-rgb: 19, 41, 75;
    --bs-heading-color: var(--navy);
}

/* On a short page the footer still sits at the bottom of the screen, with no gap beneath it. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

#main {
    flex: 1 0 auto;
}

h1,
h2,
h3 {
    font-weight: 600;
    color: var(--navy);
}

h1 {
    font-size: clamp(2.4rem, 3.6vw, 3.25rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

h2 {
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin-bottom: 1.25rem;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.3;
}

p {
    max-width: 60ch;
}

a {
    text-underline-offset: 0.2em;
}

img {
    max-width: 100%;
    height: auto;
}

ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.on-dark :focus-visible {
    outline-color: var(--white);
}

.on-dark h1,
.on-dark h2,
.on-dark h3 {
    color: var(--white);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--navy);
    color: var(--white);
    border-radius: var(--radius);
}

.skip-link:focus {
    top: 0.75rem;
    color: var(--white);
}

.icon {
    width: 1em;
    height: 1em;
    flex: none;
}

/* Buttons. One primary per view; anything secondary is a plain link with an arrow. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--radius);
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.btn-primary {
    padding: 12px 22px;
    background: var(--rust-button);
    color: var(--white);
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--rust-dark);
    color: var(--white);
}

.btn-secondary {
    padding: 12px 0;
    color: var(--navy);
    font-weight: 600;
}

.btn-secondary:hover {
    color: var(--navy);
    text-decoration: underline;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin-top: 2rem;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--navy);
    text-decoration: none;
}

.text-link:hover {
    color: var(--navy);
    text-decoration: underline;
}

.on-dark .text-link,
.on-dark .text-link:hover {
    color: var(--white);
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--white);
    border-bottom: 1px solid var(--line);
}

.site-header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.5rem;
}

.site-logo {
    display: block;
    margin-right: auto;
}

.site-logo img {
    display: block;
    width: 110px;
    height: auto;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.875rem;
    height: 2.875rem;
    color: var(--navy);
    font-size: 1.75rem;
    border-radius: var(--radius);
}

.menu-toggle span:not(.visually-hidden) {
    display: inline-flex;
}

.menu-toggle-close,
.menu-toggle.is-open .menu-toggle-open {
    display: none !important;
}

.menu-toggle.is-open .menu-toggle-close {
    display: inline-flex !important;
}

.site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 0.75rem 1rem;
}

.site-nav.is-open {
    display: block;
}

.site-nav a {
    display: block;
    padding: 0.75rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--navy);
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--rust);
}

/* Sections. They alternate white and the light neutral, with hairlines instead of cards. */
.section {
    padding-block: var(--section-space);
}

.section-alt {
    background: var(--alt);
}

/* Hero: the words and buttons together on one side, the lead project on the other. */
.hero {
    padding-block: 3rem var(--section-space);
}

.hero h1 {
    margin-bottom: 1.25rem;
    text-wrap: balance;
}

.hero-lead {
    margin-bottom: 0;
    font-size: 1.125rem;
}

.hero .button-row {
    margin-top: 1.75rem;
}

/* The work grid. Each screenshot sits in a panel and runs off its bottom edge, which gives sites of very different
   colours a common frame. */
.work {
    padding-bottom: var(--section-space);
}

.work-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    margin-bottom: 2rem;
}

.work-head h2 {
    margin-bottom: 0;
}

.tile-panel {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2rem) 0;
    border-radius: 12px;
    background: var(--panel);
}

.tile-tall .tile-panel {
    aspect-ratio: 7 / 9;
    background: var(--navy);
}

.shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 12px 32px rgba(19, 41, 75, 0.16);
    transition: transform 0.25s ease;
}

.tile-tall .shot {
    width: 66%;
    margin-inline: auto;
    border-radius: 18px 18px 0 0;
}

.shot-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1rem;
    background: var(--white);
    font-weight: 500;
    font-size: 0.9375rem;
    text-align: center;
}

.project-tile {
    display: block;
    color: inherit;
    text-decoration: none;
}

.project-tile:hover {
    color: inherit;
}

.project-tile:hover .shot {
    transform: translateY(-6px);
}

.project-tile:hover .project-name {
    text-decoration: underline;
    text-decoration-color: var(--rust);
    text-decoration-thickness: 2px;
}

.project-name {
    display: block;
    margin-top: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--navy);
}

.project-type {
    display: block;
    font-size: 0.9375rem;
}

/* What we do: read like a rate card. Each whole row is the link to that service. */
.rate-card {
    margin-top: 2.5rem;
}

.rate-card li {
    position: relative;
    --bs-gutter-y: 0;
    margin-inline: 0;
    padding-block: 2rem;
    border-top: 1px solid var(--line);
    transition: background-color 0.15s ease;
}

.rate-card li:last-child {
    border-bottom: 1px solid var(--line);
}

.rate-card li > * {
    margin-top: 0;
    padding-inline: 0;
}

.rate-card :is(h2, h3) {
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.rate-card :is(h2, h3) a {
    color: var(--navy);
    text-decoration: none;
}

.rate-card :is(h2, h3) a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.rate-card li:hover :is(h2, h3) a {
    color: var(--rust-dark);
}

.rate-card p {
    margin-bottom: 0.75rem;
}

.rate-card-price {
    font-weight: 500;
    color: var(--navy);
}

.rate-card-arrow {
    display: none;
    font-size: 1.5rem;
    color: var(--navy);
    transition: transform 0.15s ease;
}

.rate-card li:hover .rate-card-arrow {
    transform: translateX(6px);
}

/* How a project runs: a navy panel, shaped like the project panels, with the steps joined along one line. The line runs
   down the page on phones and across it on wider screens. */
.process-panel {
    padding: clamp(2rem, 5vw, 4.5rem);
    border-radius: 12px;
    background: var(--navy);
    color: var(--on-dark-soft);
}

.process-panel h2 {
    margin-bottom: 2.5rem;
}

.process-track li {
    position: relative;
    padding: 0 0 2.25rem 1.75rem;
}

.process-track li:last-child {
    padding-bottom: 0;
}

.process-track li::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0.35rem;
    left: -5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--rust);
}

/* The line joins this step's dot to the next, so nothing shows before the first dot or after the last. */
.process-track li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0.35rem;
    bottom: -0.35rem;
    left: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.process-track h3 {
    margin-bottom: 0.625rem;
}

.process-track p {
    margin-bottom: 0;
}

/* The maintenance terms */
.prose-lead {
    max-width: 44ch;
    font-size: 1.125rem;
}

.terms {
    row-gap: 2rem;
    margin-top: 0;
}

.terms h3 {
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
}

.terms li {
    display: flex;
    gap: 0.75rem;
    padding-block: 0.625rem;
    border-top: 1px solid var(--line);
    color: var(--navy);
}

.terms .icon {
    margin-top: 0.35em;
    color: var(--rust-dark);
}

.terms .terms-dash {
    flex: none;
    width: 1em;
    height: 2px;
    margin-top: 0.8em;
    background: var(--line);
}

/* The closing call, ruled off from the footer that follows. */
.closing {
    padding-top: var(--section-space);
    background: var(--navy);
    color: var(--white);
}

.closing-inner {
    padding-bottom: 3.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.closing h2 {
    font-size: clamp(2rem, 3.2vw, 2.75rem);
}

.closing p {
    margin-bottom: 0;
}

.closing a:not(.btn) {
    color: var(--white);
}

/* Inner pages */
.page-head {
    padding-block: 3rem 2.5rem;
}

.page-head h1 {
    max-width: 22ch;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}

.page-head-only {
    padding-bottom: var(--section-space);
}

.page-body {
    padding-bottom: var(--section-space);
}

.page-body + .section:not(.section-alt) {
    padding-top: 0;
}

.page-body .rate-card {
    margin-top: 0;
}

.fine-print {
    margin: 1.25rem 0 0;
    font-size: 0.9375rem;
}

.price-box {
    padding: 2rem;
    border-radius: 12px;
    background: var(--panel);
}

.price-box-main {
    margin-bottom: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--navy);
}

.price-box .btn {
    margin-top: 1.5rem;
}

.feature-list {
    display: grid;
    gap: 0 2.5rem;
    margin-top: 2rem;
}

.feature-list li {
    padding-block: 1.25rem;
    border-top: 1px solid var(--line);
}

.feature-list h3 {
    margin-bottom: 0.375rem;
}

.feature-list p {
    margin-bottom: 0;
}

.items-note {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    max-width: none;
    border-top: 1px solid var(--line);
    font-weight: 500;
    color: var(--navy);
}

.examples {
    margin-top: 1rem;
}

.about-text {
    max-width: 60ch;
    margin-bottom: 0;
}

/* The contact form */
.site-form label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--navy);
}

.site-form .optional {
    font-weight: 400;
    color: var(--ink);
}

.site-form input,
.site-form select,
.site-form textarea {
    display: block;
    width: 100%;
    min-height: 2.875rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid #8a94a6;
    border-radius: var(--radius);
    background: var(--white);
    color: var(--navy);
    font: inherit;
}

.site-form [aria-invalid="true"] {
    border-color: #b3261e;
    border-width: 2px;
}

.field-error {
    margin: 0.375rem 0 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #b3261e;
}

.field-hint {
    margin-top: 0.375rem;
    font-size: 0.875rem;
}

.form-alert {
    margin-bottom: 1.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid #b3261e;
    border-radius: var(--radius);
    color: #b3261e;
    font-weight: 500;
}

.grecaptcha-badge {
    visibility: hidden;
}

.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.site-form .btn {
    margin-top: 1.25rem;
    border: 0;
    cursor: pointer;
}

.contact-aside h2 {
    margin-bottom: 0.625rem;
    font-size: 1.25rem;
}

.contact-aside p {
    margin-bottom: 0;
}

.contact-aside .fine-print {
    margin-top: 0.375rem;
}

.contact-aside h2:not(:first-child) {
    margin-top: 2rem;
}

/* The work page */
.work-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
    font-weight: 500;
}

.work-filter a {
    color: var(--navy);
    text-decoration: none;
    padding-block: 0.25rem;
}

.work-filter a:hover,
.work-filter a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--rust);
    text-decoration-thickness: 2px;
}

/* A case study */
.case-type {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.page-head .button-row {
    margin-top: 0.75rem;
}

.case-shot {
    padding-bottom: var(--section-space);
}

.tile-panel-wide {
    aspect-ratio: 16 / 9;
}

.case-row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin-top: 0;
    padding-block: 2.5rem;
    border-top: 1px solid var(--line);
}

.case-row h2 {
    margin-bottom: 1rem;
}

.case-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.case-row p:last-child {
    margin-bottom: 0;
}

.case-features li {
    display: flex;
    gap: 0.75rem;
    padding-block: 0.5rem;
    color: var(--navy);
}

.case-features .icon {
    margin-top: 0.35em;
    color: var(--rust-dark);
}

.case-quote {
    margin: 0;
    font-size: 1.125rem;
    color: var(--navy);
}

.case-quote footer {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink);
}

.case-gallery {
    display: grid;
    gap: 1.5rem;
}

.tile-panel-phone {
    background: var(--navy);
}

.tile-panel-phone .shot {
    width: 42%;
    margin-inline: auto;
    border-radius: 18px 18px 0 0;
}

.case-next {
    padding-block: 2rem;
    border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
    .case-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Client logos */
.clients {
    padding-bottom: var(--section-space);
}

.clients h2 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    letter-spacing: 0;
}

/* Wraps rather than a grid, so a last row that is not full sits in the middle. */
.client-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.client-grid li {
    flex: 0 0 calc((100% - 1rem) / 3);
    min-width: 0;
}

.client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.75rem;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    transition: border-color 0.15s ease;
}

.client-logo:hover {
    border-color: var(--navy);
}

.client-logo-dark {
    border-color: var(--navy);
    background: var(--navy);
}

.client-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

/* Common questions: every answer is on show, so nobody has to open them one by one. */
.faq-grid {
    display: grid;
    gap: 0 3rem;
    margin-top: 2rem;
}

.faq-item {
    padding-block: 1.5rem;
    border-top: 1px solid var(--line);
}

.faq-item h3 {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
}

.faq-item p {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .faq-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .client-grid li {
        flex-basis: calc((100% - 3rem) / 7);
    }

    .client-logo {
        height: 4.25rem;
        padding: 0.625rem 1rem;
    }
}

/* The ad landing page */
.page-head .start-title {
    max-width: 24ch;
}

.page-head .start-title ~ .button-row {
    margin-top: 1.75rem;
}

.start-demo video {
    display: block;
    width: 100%;
    max-width: 56rem;
    height: auto;
    margin-top: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--navy);
}

.start-uses {
    display: grid;
    gap: 0 2.5rem;
    margin-top: 2rem;
}

.start-uses li {
    padding-block: 1.25rem;
    border-top: 1px solid var(--line);
}

.start-uses h3 {
    margin-bottom: 0.375rem;
}

.start-uses p {
    margin-bottom: 0;
}

/* The legal pages */
.legal > * {
    max-width: 52rem;
}

.legal h2 {
    margin: 2.5rem 0 0.75rem;
    font-size: 1.375rem;
}

.legal-table {
    margin-bottom: 1rem;
    overflow-x: auto;
}

.legal-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.legal-table th,
.legal-table td {
    padding: 0.625rem 0.75rem 0.625rem 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    color: var(--navy);
    font-weight: 600;
}

/* Products. */
.product-intro {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

.product-icon {
    display: block;
    width: 5.5rem;
    height: 5.5rem;
}

.rate-card .product-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
}

.product-steps {
    margin-top: 2rem;
}

.product-steps h3 {
    margin: 0;
}

.product-steps p {
    max-width: 60ch;
}

.section-lead {
    max-width: 60ch;
}

.compare-table {
    margin-top: 2rem;
    overflow-x: auto;
}

.compare-table table {
    width: 100%;
    border-collapse: collapse;
}

.compare-table th,
.compare-table td {
    padding: 0.875rem 0.75rem;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.compare-table th:first-child {
    padding-left: 0;
    text-align: left;
}

.compare-table thead th {
    color: var(--navy);
    font-weight: 600;
}

.compare-table tbody th {
    font-weight: 400;
}

.compare-table .icon {
    color: var(--navy);
}

.compare-none {
    color: #6b7280;
}

@media (min-width: 768px) {
    .product-intro {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 2.5rem;
    }

    .product-intro .product-icon {
        width: 7rem;
        height: 7rem;
    }
}

@media (min-width: 992px) {
    .rate-card .product-icon {
        margin-bottom: 0;
    }
}

/* Cookie choice, in the middle of the page because Nigeria's GAID 2025 (Article 7) treats a notice at the bottom as not being
   transparent. Accepting and declining carry the same weight. */
.consent {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 60;
    width: calc(100% - 2rem);
    max-width: 27rem;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: 1.25rem;
    transform: translate(-50%, -50%);
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 20px 50px rgba(19, 41, 75, 0.2);
}

.consent[hidden] {
    display: none;
}

.consent p {
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.consent-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}

.consent .btn {
    border: 1px solid transparent;
    cursor: pointer;
}

.consent .consent-choice {
    padding: 10px 14px;
    border-color: var(--navy);
    background: var(--white);
    color: var(--navy);
    font-weight: 600;
}

.consent .consent-choice:hover {
    background: var(--navy);
    color: var(--white);
}

.footer-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--white);
    font: inherit;
    cursor: pointer;
}

.footer-button:hover {
    text-decoration: underline;
}

.footer-button[hidden] {
    display: none;
}

.footer-simple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
}

.footer-simple ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.footer-simple li,
.footer-simple p {
    margin: 0;
}

@media (min-width: 768px) {
    .start-uses {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* WhatsApp, on hand on every page without taking over any of them. */
.whatsapp-float {
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--navy);
    font-size: 1.5rem;
    box-shadow: 0 6px 18px rgba(19, 41, 75, 0.25);
    transition: background-color 0.15s ease;
}

.whatsapp-float:hover {
    border-color: var(--rust-button);
    background: var(--rust-button);
    color: var(--white);
}

/* Footer */
.site-footer {
    padding-block: 3rem 2rem;
    background: var(--navy);
    color: var(--white);
    font-size: 0.875rem;
    line-height: 1.6;
}

.site-footer a {
    color: var(--white);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

.site-footer li {
    margin-bottom: 0.375rem;
}

.footer-logo {
    display: block;
    width: 120px;
    margin-bottom: 1rem;
}

.footer-copy {
    max-width: 24rem;
    margin-bottom: 0;
}

.footer-heading {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
}

.footer-note {
    font-size: 0.8125rem;
}

.footer-legal {
    max-width: none;
    margin: 2.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.8125rem;
}

/* Roomier side margins on phones than Bootstrap's default. */
.container {
    --bs-gutter-x: 2.5rem;
}

@media (max-width: 575.98px) {
    .hero h1,
    .page-head h1 {
        font-size: 2rem;
    }

    .hero-lead {
        font-size: 1.0625rem;
    }

    .page-head {
        padding-top: 2rem;
    }

    .page-head .start-title {
        font-size: 1.75rem;
    }

    .page-head .start-title ~ .button-row {
        margin-top: 1.25rem;
    }

    .button-row .btn-primary {
        width: 100%;
    }
}

@media (min-width: 992px) {
    :root {
        --section-space: 7.5rem;
    }

    .site-logo img {
        width: 123px;
    }

    .menu-toggle {
        display: none;
    }

    .site-nav {
        display: block;
        position: static;
        padding: 0;
        border: 0;
        margin-right: 0.5rem;
    }

    .site-nav ul {
        display: flex;
        gap: 0.25rem;
    }

    .hero {
        padding-block: 4.5rem var(--section-space);
    }

    .feature-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-head {
        padding-block: 4.5rem 3.5rem;
    }

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

    .process-panel h2 {
        text-align: center;
    }

    .process-track li,
    .process-track li:last-child {
        padding: 1.75rem 1.5rem 0;
        text-align: center;
    }

    .process-track li::before {
        top: -5px;
        left: calc(50% - 5.5px);
    }

    /* Runs from the middle of this step to the middle of the next. */
    .process-track li:not(:last-child)::after {
        top: 0;
        right: -50%;
        bottom: auto;
        left: 50%;
        width: auto;
        height: 1px;
    }

    .rate-card li > p,
    .rate-card :is(h2, h3) {
        margin-bottom: 0;
        padding-right: 2.5rem;
    }

    .rate-card-arrow {
        display: block;
        text-align: right;
    }

    .terms li {
        padding-right: 1rem;
    }

    .site-nav ul {
        gap: 0.75rem;
    }

    .closing-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 3rem;
        align-items: end;
    }

    .closing .button-row {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .whatsapp-float,
    .shot,
    .rate-card-arrow {
        transition: none;
    }

    .project-tile:hover .shot,
    .rate-card li:hover .rate-card-arrow {
        transform: none;
    }
}