:root {
    --color-bg: #ffffff;
    --color-surface: #f7f4ef;
    --color-surface-strong: #ece5d8;
    --color-text: #141414;
    --color-text-muted: #5a5a5a;
    --color-primary: #d7182a;
    --color-secondary: #000000;
    --color-accent: #ffc10e;
    --color-accent-2: #a70d1c;
    --color-accent-3: #ffe08a;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-border: rgba(20, 20, 20, 0.12);
    --color-border-soft: rgba(20, 20, 20, 0.08);
    --color-overlay: rgba(0, 0, 0, 0.34);
    --color-overlay-strong: rgba(0, 0, 0, 0.7);
    --color-nav: rgba(0, 0, 0, 0.94);

    --font-body: "League Spartan", sans-serif;
    --font-heading: "Anton", sans-serif;
    --font-display: "Anton", sans-serif;
    --font-ui: "League Spartan", sans-serif;

    --tracking-heading: 0.015em;
    --tracking-ui: 0.08em;
    --space-section: clamp(3.5rem, 8vw, 6.75rem);
    --space-section-tight: clamp(3rem, 6vw, 5rem);
    --container-lg: 74rem;
    --size-logo-width: clamp(4.75rem, 11vw, 6rem);
    --size-media-hero-50: 50svh;
    --size-media-hero-75: 75svh;
    --size-media-hero-100: 100svh;
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: 400;
    text-transform: uppercase;
}

.component-demo {
    background:
        radial-gradient(circle at top left, rgba(215, 24, 42, 0.08), transparent 0 22%),
        radial-gradient(circle at top right, rgba(255, 193, 14, 0.12), transparent 0 20%),
        var(--color-bg);
}

.c-site-brand {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.c-site-brand .logo {
    display: block;
    width: clamp(4.35rem, 9vw, 5.4rem);
}

.component-demo .lightgrey {
    background: var(--color-primary);
    color: var(--color-white);
}

.component-demo .lightgrey h1,
.component-demo .lightgrey h2,
.component-demo .lightgrey h3,
.component-demo .lightgrey h4,
.component-demo .lightgrey h5,
.component-demo .lightgrey h6,
.component-demo .lightgrey .title,
.component-demo .lightgrey p,
.component-demo .lightgrey li,
.component-demo .lightgrey strong,
.component-demo .lightgrey a:not(.button) {
    color: var(--color-white);
}

.component-demo .lightgrey .category,
.component-demo .lightgrey .meta,
.component-demo .lightgrey .c-page-hero__aside .meta {
    color: var(--color-black);
}

.component-demo .lightgrey .c-page-hero__aside,
.component-demo .lightgrey .c-value-card,
.component-demo .lightgrey .c-service-card,
.component-demo .lightgrey .c-contact-panel,
.component-demo .lightgrey .c-contact-form,
.component-demo .lightgrey .c-service-category,
.component-demo .lightgrey .c-post-card {
    background: var(--color-white);
    color: var(--color-text);
}

.component-demo .lightgrey .c-page-hero__aside p,
.component-demo .lightgrey .c-value-card p,
.component-demo .lightgrey .c-service-card p,
.component-demo .lightgrey .c-contact-panel p,
.component-demo .lightgrey .c-contact-form p,
.component-demo .lightgrey .c-service-category p,
.component-demo .lightgrey .c-post-card p,
.component-demo .lightgrey .c-post-card h3,
.component-demo .lightgrey .c-service-card h3,
.component-demo .lightgrey .c-value-card h3,
.component-demo .lightgrey .c-service-category h3,
.component-demo .lightgrey .c-contact-form h3,
.component-demo .lightgrey .c-contact-panel h2 {
    color: var(--color-text);
}

.component-demo .lightgrey .link-with-arrow:hover,
.component-demo .lightgrey .link-with-arrow:focus-visible,
.component-demo .lightgrey a:not(.button):hover,
.component-demo .lightgrey a:not(.button):focus-visible {
    color: var(--color-accent);
}

.c-media-hero {
    --media-hero-overlay: linear-gradient(115deg, rgba(0, 0, 0, 0.8) 15%, rgba(0, 0, 0, 0.45) 48%, rgba(117, 8, 19, 0.74) 100%);
}

.c-site-header__cta.button,
.has-overlay-header .c-site-header .c-site-header__cta.button,
.has-overlay-header .c-site-header.is-solid .c-site-header__cta.button {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-black);
}

.c-site-header__cta.button:hover,
.c-site-header__cta.button:focus-visible,
.has-overlay-header .c-site-header .c-site-header__cta.button:hover,
.has-overlay-header .c-site-header .c-site-header__cta.button:focus-visible,
.has-overlay-header .c-site-header.is-solid .c-site-header__cta.button:hover,
.has-overlay-header .c-site-header.is-solid .c-site-header__cta.button:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.has-overlay-header .c-site-header.is-solid {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.94);
    backdrop-filter: blur(18px);
}

.has-overlay-header .c-site-header.is-solid .c-site-nav a,
.has-overlay-header .c-site-header.is-solid .c-site-nav a[aria-current="page"],
.has-overlay-header .c-site-header.is-solid .c-nav-toggle {
    color: var(--color-white);
}

.component-demo .c-service-card,
.component-demo .c-post-card,
.component-demo .c-value-card,
.component-demo .c-process-card,
.component-demo .c-contact-panel,
.component-demo .c-contact-form,
.component-demo .c-page-hero__aside,
.component-demo .c-service-category {
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-sm);
}

.c-service-card__icon {
    background: rgba(215, 24, 42, 0.1);
    color: var(--color-primary);
}

.c-testimonial-feature {
    background:
        radial-gradient(circle at top right, rgba(255, 193, 14, 0.12), transparent 0 18%),
        linear-gradient(145deg, #050505 0%, #181818 100%);
}

.c-cta-band {
    background: linear-gradient(135deg, #000000 0%, #8d0f1a 55%, #d7182a 100%);
}

.c-site-footer {
    background: #050505;
    color: var(--color-white);
}

.c-site-footer a {
    color: inherit;
}

.c-site-footer a:hover,
.c-site-footer a:focus-visible {
    color: var(--color-accent);
}

.c-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1rem;
}

.c-footer-social a {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* QA refinement: lighter uppercase heading system and stronger red section treatment */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-heading);`r`n    font-weight: 400;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.c-site-brand {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.component-demo .lightgrey {
    background:
        linear-gradient(180deg, rgba(215, 24, 42, 0.97) 0%, rgba(186, 12, 31, 0.97) 100%),
        var(--color-primary);
    color: var(--color-white);
}

.component-demo .lightgrey h1,
.component-demo .lightgrey h2,
.component-demo .lightgrey h3,
.component-demo .lightgrey h4,
.component-demo .lightgrey h5,
.component-demo .lightgrey h6,
.component-demo .lightgrey .title,
.component-demo .lightgrey p,
.component-demo .lightgrey li,
.component-demo .lightgrey strong,
.component-demo .lightgrey a:not(.button) {
    color: var(--color-white);
}

.component-demo .lightgrey .category,
.component-demo .lightgrey .meta,
.component-demo .lightgrey .c-page-hero__aside .meta,
.component-demo .lightgrey .c-service-category__intro .category {
    color: var(--color-black);
}

.component-demo .lightgrey .c-page-hero__aside,
.component-demo .lightgrey .c-value-card,
.component-demo .lightgrey .c-service-card,
.component-demo .lightgrey .c-contact-panel,
.component-demo .lightgrey .c-contact-form,
.component-demo .lightgrey .c-service-category,
.component-demo .lightgrey .c-post-card,
.component-demo .lightgrey .c-feature-split__panel {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.component-demo .lightgrey .c-service-item {
    border-top-color: rgba(255, 255, 255, 0.18);
}

.component-demo .lightgrey .c-page-hero__aside p,
.component-demo .lightgrey .c-value-card p,
.component-demo .lightgrey .c-service-card p,
.component-demo .lightgrey .c-contact-panel p,
.component-demo .lightgrey .c-contact-form p,
.component-demo .lightgrey .c-service-category p,
.component-demo .lightgrey .c-post-card p,
.component-demo .lightgrey .c-post-card h3,
.component-demo .lightgrey .c-service-card h3,
.component-demo .lightgrey .c-value-card h3,
.component-demo .lightgrey .c-service-category h3,
.component-demo .lightgrey .c-service-item h3,
.component-demo .lightgrey .c-service-item p,
.component-demo .lightgrey .c-contact-form h3,
.component-demo .lightgrey .c-contact-panel h2,
.component-demo .lightgrey .c-feature-split__panel h2,
.component-demo .lightgrey .c-feature-split__panel p,
.component-demo .lightgrey .c-feature-split__panel li {
    color: var(--color-white);
}

.component-demo .lightgrey .link-with-arrow:hover,
.component-demo .lightgrey .link-with-arrow:focus-visible,
.component-demo .lightgrey a:not(.button):hover,
.component-demo .lightgrey a:not(.button):focus-visible {
    color: var(--color-accent);
}


/* QA refinement: hero title sizing */
.c-media-hero__content h1,
.c-media-hero__content .h1 {
    font-size: clamp(3.25rem, 8vw, 5.5rem);
    letter-spacing: normal;
}

/* QA refinement: visual menu items */
.c-service-item {
    display: grid;
    grid-template-columns: clamp(5.5rem, 10vw, 7rem) minmax(0, 1fr);
    gap: 1.1rem;
    align-items: center;
}

.c-service-item__media {
    margin: 0;
    overflow: hidden;
    border-radius: 1rem;
    aspect-ratio: 1 / 1;
    background: rgba(0, 0, 0, 0.14);
}

.c-service-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-service-item__body > *:last-child {
    margin-bottom: 0;
}

@media only screen and (max-width: 640px) {
    .c-service-item {
        grid-template-columns: 1fr;
        gap: 0.9rem;
        align-items: start;
    }

    .c-service-item__media {
        max-width: 8.5rem;
    }
}

/* QA refinement: image-based value cards */
.c-value-card {
    padding: 0;
    overflow: hidden;
}

.c-value-card__media {
    margin: 0;
    aspect-ratio: 16 / 10;
    background: rgba(0, 0, 0, 0.14);
}

.c-value-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-value-card__body {
    display: grid;
    gap: 0.65rem;
    padding: clamp(1.35rem, 3vw, 1.9rem);
}

.c-value-card__body > * {
    margin-bottom: 0;
}

/* QA refinement: mobile menu overlay */
@media only screen and (max-width: 1024px) {
    .c-site-header.is-menu-open .c-site-header__menu,
    .has-overlay-header .c-site-header.is-menu-open .c-site-header__menu,
    .has-overlay-header .c-site-header.is-solid.is-menu-open .c-site-header__menu {
        background: rgba(0, 0, 0, 0.84);
    }

    .c-site-header.is-menu-open .c-site-header__cta.button,
    .has-overlay-header .c-site-header.is-menu-open .c-site-header__cta.button,
    .has-overlay-header .c-site-header.is-solid.is-menu-open .c-site-header__cta.button {
        border-color: var(--color-accent);
        background: var(--color-accent);
        color: var(--color-black);
    }

    .c-site-header.is-menu-open .c-site-header__cta.button:hover,
    .c-site-header.is-menu-open .c-site-header__cta.button:focus-visible,
    .has-overlay-header .c-site-header.is-menu-open .c-site-header__cta.button:hover,
    .has-overlay-header .c-site-header.is-menu-open .c-site-header__cta.button:focus-visible,
    .has-overlay-header .c-site-header.is-solid.is-menu-open .c-site-header__cta.button:hover,
    .has-overlay-header .c-site-header.is-solid.is-menu-open .c-site-header__cta.button:focus-visible {
        border-color: var(--color-primary);
        background: var(--color-primary);
        color: var(--color-white);
    }
}

/* QA refinement: mobile CTA band actions */
.button--phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.button--phone::before {
    content: "\\260E";
    font-size: 0.95em;
    line-height: 1;
}

@media only screen and (max-width: 900px) {
    .c-cta-band .c-action-row {
        width: min(100%, 22rem);
        margin-inline: auto;
    }

    .c-cta-band .c-action-row .button {
        width: 100%;
    }
}

/* QA refinement: stacked menu category intro width */
@media only screen and (max-width: 1024px) {
    .c-service-category__intro {
        max-width: none;
        width: 100%;
    }
}

/* QA refinement: homepage intro media aside */
.c-page-hero__aside--media {
    padding: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.c-page-hero__aside--media img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* QA refinement: consistent card and image radius */
.c-service-card,
.c-post-card,
.c-value-card,
.c-process-card,
.c-contact-panel,
.c-contact-form,
.c-page-hero__aside,
.c-service-category,
.c-cta-band,
.c-hero-split__media,
.c-offset-feature__media,
.c-story-grid img,
.c-value-card__media,
.c-service-item__media,
.c-page-hero__aside--media,
.c-page-hero__aside--media img,
.c-value-card__media img,
.c-service-item__media img,
.c-post-card img,
.c-hero-split__media img,
.c-offset-feature__media img,
.c-media-hero__media img,
.c-contact-panel img,
.c-contact-form img {
    border-radius: var(--radius-lg);
}