/* === Theme: Fade Modern ===
 * Contemporary urban barber — crisp white, charcoal ink, one electric vermilion stripe.
 * Extends the light-clean structure; colors/fonts/shape come from the catalog palette.
 * Signature: tight UPPERCASE condensed headings + a bold accent rule, sneaker-shop sharp.
 */
@import url('../light-clean/style.css');

:root {
    --gradient-dark: linear-gradient(180deg, #ffffff 0%, #f4f4f5 100%);
    --accent-red-light: color-mix(in srgb, var(--accent-red) 8%, transparent);
    --shadow-red: 0 10px 22px -10px color-mix(in srgb, var(--accent-red) 45%, transparent);
}

/* Signature typography: condensed, uppercase, tightly tracked — like a fresh lineup. */
.hero-content h1,
.section-header h2,
.cta-content h2 {
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
}
.hero-content h1 {
    -webkit-text-fill-color: var(--text-primary);
    background: none;
    font-weight: 700;
}
.hero-content h1 .highlight {
    -webkit-text-fill-color: var(--accent-red);
    background: none;
}

/* A thick accent underline that reads like a clipper guard line. */
.section-header h2::after {
    width: 56px;
    height: 5px;
    border-radius: 0;
    background: var(--accent-red);
}

/* Service cards: flat, sharp, with a left accent bar that fills on hover. */
.service-card {
    border-left: 3px solid var(--border-color);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover {
    border-left-color: var(--accent-red);
}

/* Primary button: solid block, no pill — modern and decisive. */
.btn-primary {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}