:root {
    --sharp-ink: #111827;
    --sharp-orange: #f97316;
    --sharp-orange-dark: #c2410c;
    --sharp-court: #fff8f1;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    padding-top: 73px;
    color: var(--sharp-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

.navbar {
    min-height: 73px;
}

.navbar-brand {
    color: var(--sharp-ink);
    font-weight: 800;
    letter-spacing: -.03em;
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--sharp-ink);
}

.brand-mark {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px;
    overflow: hidden;
    flex: 0 0 auto;
    border: 2px solid var(--sharp-ink);
    border-radius: 50%;
    background: var(--sharp-orange);
}

.brand-mark::before,
.brand-mark::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: "";
    background: var(--sharp-ink);
    transform: translate(-50%, -50%);
}

.brand-mark::before {
    width: 100%;
    height: 2px;
}

.brand-mark::after {
    width: 2px;
    height: 125%;
    transform: translate(-50%, -50%) rotate(34deg);
}

.brand-name {
    font-size: 1.2rem;
}

.brand-name span {
    color: var(--sharp-orange-dark);
}

.nav-link {
    position: relative;
    padding: .5rem .7rem !important;
    color: #4b5563;
    font-weight: 600;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
    color: var(--sharp-ink) !important;
}

.nav-link.active::after {
    position: absolute;
    right: .7rem;
    bottom: .2rem;
    left: .7rem;
    height: 2px;
    content: "";
    border-radius: 999px;
    background: var(--sharp-orange);
}

.hero {
    min-height: calc(100vh - 146px);
    background:
        radial-gradient(circle at 85% 20%, rgb(249 115 22 / 14%), transparent 31rem),
        linear-gradient(135deg, var(--sharp-court), #fff 55%);
}

.hero-content {
    max-width: 760px;
}

.hero h1 {
    max-width: 680px;
    letter-spacing: -.05em;
}

.hero .lead {
    max-width: 630px;
}

.eyebrow {
    color: var(--sharp-orange-dark);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.btn-sharp {
    border-color: var(--sharp-ink);
    background: var(--sharp-ink);
    color: #fff;
    font-weight: 700;
}

.btn-sharp:hover,
.btn-sharp:focus {
    border-color: var(--sharp-orange-dark);
    background: var(--sharp-orange-dark);
    color: #fff;
}

.page-intro {
    min-height: calc(100vh - 146px);
    padding-top: clamp(4rem, 10vw, 8rem);
    background: linear-gradient(135deg, var(--sharp-court), #fff 60%);
}

@media (max-width: 575.98px) {
    .brand-name {
        font-size: 1.05rem;
    }

    .nav-link {
        padding-right: .45rem !important;
        padding-left: .45rem !important;
    }

    .hero h1 {
        font-size: clamp(2.65rem, 14vw, 4rem);
    }
}