html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: #333; }

.site-container {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}
@media (min-width: 640px) { .site-container { padding-inline: 2rem; } }
@media (min-width: 1024px) { .site-container { padding-inline: 2.5rem; } }

.hero-container { width: 100%; max-width: 42rem; margin-inline: auto; }
.hairline { border-color: #dedede; }
.hero-title { letter-spacing: -1.5px; }

.feature-image {
    width: min(220px, 100%); height: 180px;
    border-radius: 46% 54% 48% 52% / 50% 45% 55% 50%;
    background: linear-gradient(145deg, #ddd, #f3f3f3);
    overflow: hidden; position: relative;
}
.feature-image::after {
    content: 'IMAGE'; position: absolute; inset: 0;
    display: grid; place-items: center; color: #999; font-size: 11px; letter-spacing: 2px;
}

.circle-photo {
    width: 100px; height: 100px; border-radius: 999px;
    background: #ddd; position: absolute; overflow: hidden;
}
.circle-photo::after {
    content: 'PHOTO'; position: absolute; inset: 0;
    display: grid; place-items: center; color: #999; font-size: 10px;
}

.icon-pill {
    width: 43px; height: 43px; border-radius: 999px;
    background: #f43b0b; color: #fff; display: grid; place-items: center; font-size: 14px;
}
.icon-pill.small { width: 34px; height: 34px; font-size: 12px; }

.nav-item { white-space: nowrap; font-size: 0.8125rem; color: #333; transition: color 0.15s; }
.nav-item:hover, .nav-item.active { color: #f43b0b; }
.nav-sep { color: #ccc; user-select: none; font-size: 0.75rem; }

.btn-brand {
    background-color: #f43b0b; color: #fff; font-weight: 700;
    border-radius: 9999px; transition: background-color 0.15s;
}
.btn-brand:hover { background-color: #dc3307; }
.input-brand:focus { outline: none; border-color: #f43b0b; box-shadow: 0 0 0 2px rgba(244, 59, 11, 0.2); }

.desktop-nav { display: none; }
.mobile-nav { display: block; }
@media (min-width: 768px) {
    .desktop-nav { display: flex; }
    .mobile-nav { display: none; }
}

.section-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 768px) {
    .section-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.footer-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) {
    .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

.hero-art { position: relative; height: 280px; max-width: 520px; margin-inline: auto; }
@media (min-width: 768px) { .hero-art { height: 340px; max-width: 600px; } }