/**
 * Elsafwa Trading Est. - Homepage V2 Visual Concept 2 CSS
 * Theme: Bright Industrial Cinema
 */

:root {
    --c2-bg: #F8F9FA;
    --c2-surface: #FFFFFF;
    --c2-surface-pearl: #F4F6F8;
    --c2-text-primary: #1A1F24;
    --c2-text-secondary: #5A6573;
    --c2-teal: #0D6E6E;
    --c2-deep-teal: #085252;
    --c2-amber: #D9822B;
    --c2-amber-light: #F5A623;
    --c2-gold: #C59B27;
    --c2-metallic-border: #E2E7EC;
    --c2-steel: #8C9BA5;
    --c2-radius: 14px;
    --c2-radius-sm: 8px;
    --c2-shadow: 0 10px 30px rgba(26, 31, 36, 0.06);
    --c2-shadow-lg: 0 20px 50px rgba(26, 31, 36, 0.12);
}

/* ==========================================
   BODY & HEADER ISOLATED OVERRIDES
   ========================================== */
body.page-homepage-concept-2 {
    background-color: var(--c2-bg);
    color: var(--c2-text-primary);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

body.page-homepage-concept-2 .header {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c2-metallic-border);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

body.page-homepage-concept-2 .header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--c2-shadow);
}

body.page-homepage-concept-2 .nav a {
    color: var(--c2-text-primary);
    font-weight: 600;
    transition: color 0.2s ease;
}

body.page-homepage-concept-2 .nav a:hover,
body.page-homepage-concept-2 .nav a.active {
    color: var(--c2-amber);
}

/* Topbar metallic refinement */
body.page-homepage-concept-2 .topbar {
    background: #15191D;
    color: #E2E7EC;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.page-homepage-concept-2 .topbar a {
    color: #E2E7EC;
}

body.page-homepage-concept-2 .topbar a:hover {
    color: var(--c2-amber-light);
}

/* ==========================================
   CINEMATIC HERO SECTION
   ========================================== */
.c2-hero {
    position: relative;
    width: 100%;
    min-height: 660px;
    height: calc(100vh - 100px);
    max-height: 800px;
    display: flex;
    align-items: center;
    background-color: #111518;
    overflow: hidden;
}

/* Background image scale container — carries cinematic motion on desktop.
   The JS pointer parallax writes inline transforms to .c2-hero__bg-img.
   Applying CSS animation to .c2-hero__bg-wrap avoids all transform conflicts
   because they are two separate DOM elements. Zero PHP edits required. */
.c2-hero__bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    transform-origin: 72% 50%;
    will-change: transform;
    backface-visibility: hidden;
}

.c2-hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 78% center;
    filter: contrast(1.05) saturate(1.08) brightness(1.01);
    /* Static scale(1.035) keeps JS parallax base consistent */
    transform: scale(1.035);
    will-change: transform;
    backface-visibility: hidden;
}

/* Gradient readability overlay (Left to Right) */
.c2-hero__gradient-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        90deg, 
        rgba(248, 249, 250, 0.96) 0%, 
        rgba(248, 249, 250, 0.70) 28%, 
        rgba(248, 249, 250, 0.25) 48%, 
        rgba(248, 249, 250, 0.0) 65%
    );
    pointer-events: none;
}

/* Light sweep across tire animation */
.c2-hero__light-sweep {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(217, 130, 43, 0.08) 45%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(13, 110, 110, 0.08) 55%,
        transparent 100%
    );
    transform: rotate(25deg);
    animation: lightSweepTravel 7s ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
}

@keyframes lightSweepTravel {
    0% { transform: translateY(-30%) rotate(25deg); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(30%) rotate(25deg); opacity: 0; }
}

/* Hero Content Grid */
.c2-hero__container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding-left: clamp(48px, 6.5vw, 130px);
    padding-right: 32px;
    padding-top: 0;
    padding-bottom: 20px;
}

.c2-hero__content {
    max-width: 680px;
    animation: c2ContentReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes c2ContentReveal {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.c2-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--c2-teal);
    text-transform: uppercase;
    margin-bottom: 14px;
    background: rgba(13, 110, 110, 0.08);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(13, 110, 110, 0.15);
}

.c2-hero__title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(38px, 4.8vw, 60px);
    font-weight: 900;
    color: var(--c2-text-primary);
    line-height: 1.08;
    margin-bottom: 18px;
    letter-spacing: -0.02em;
}

.c2-hero__title span.accent-amber {
    color: var(--c2-amber);
    position: relative;
    display: inline-block;
}

.c2-hero__copy {
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.55;
    color: var(--c2-text-secondary);
    margin-bottom: 26px;
    max-width: 580px;
    font-weight: 450;
}

.c2-hero__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.c2-hero__actions .btn {
    padding: 15px 30px;
    font-size: 15.5px;
    font-weight: 700;
    border-radius: var(--c2-radius-sm);
    transition: all 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.c2-hero__actions .btn--primary {
    background: linear-gradient(135deg, var(--c2-teal) 0%, var(--c2-deep-teal) 100%);
    border: 1px solid var(--c2-deep-teal);
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(13, 110, 110, 0.3);
}

.c2-hero__actions .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(13, 110, 110, 0.4);
}

.c2-hero__actions .btn--outline {
    background: var(--c2-surface);
    border: 1.5px solid var(--c2-metallic-border);
    color: var(--c2-text-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.c2-hero__actions .btn--outline:hover {
    border-color: var(--c2-text-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Qualitative trust badges inside hero */
.c2-hero__trust-list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    border-top: 1px solid var(--c2-metallic-border);
    padding-top: 18px;
}

.c2-hero__trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c2-text-primary);
}

.c2-hero__trust-item span.icon {
    color: var(--c2-amber);
    font-size: 14px;
}

/* ==========================================
   FLOATING CATALOG SEARCH TRAY (TASK 9)
   ========================================== */
.c2-search-sec {
    position: relative;
    z-index: 20;
    margin-top: -55px; /* Overlaps lower hero edge */
    padding-bottom: 60px;
}

.c2-search-tray {
    background: var(--c2-surface);
    border: 1px solid var(--c2-metallic-border);
    border-radius: var(--c2-radius);
    padding: 28px 36px;
    box-shadow: var(--c2-shadow-lg);
}

.c2-search-tray__tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 1.5px solid var(--c2-metallic-border);
    padding-bottom: 14px;
}

.c2-search-tray__tab {
    background: transparent;
    border: none;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--c2-text-secondary);
    padding: 8px 20px;
    cursor: pointer;
    border-radius: var(--c2-radius-sm);
    transition: all 0.2s ease;
}

.c2-search-tray__tab.active {
    background: var(--c2-teal);
    color: #FFFFFF;
}

.c2-search-tray__form {
    display: flex;
    gap: 16px;
    flex-direction: column;
}

@media (min-width: 640px) {
    .c2-search-tray__form {
        flex-direction: row;
    }
}

.c2-search-tray__input-wrap {
    flex-grow: 1;
    position: relative;
}

.c2-search-tray__input {
    width: 100%;
    padding: 16px 22px;
    border: 1.5px solid var(--c2-metallic-border);
    border-radius: var(--c2-radius-sm);
    background: var(--c2-surface-pearl);
    font-size: 15px;
    color: var(--c2-text-primary);
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.c2-search-tray__input:focus {
    border-color: var(--c2-teal);
    background: #FFFFFF;
}

.c2-search-tray__button {
    padding: 16px 36px;
    background: var(--c2-amber);
    color: #FFFFFF;
    border: none;
    border-radius: var(--c2-radius-sm);
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(217, 130, 43, 0.3);
}

.c2-search-tray__button:hover {
    background: var(--c2-gold);
    transform: translateY(-1px);
}

.c2-search-tray__quick-links {
    margin-top: 16px;
    display: flex;
    gap: 24px;
    font-size: 13.5px;
    font-weight: 600;
}

.c2-search-tray__quick-links a {
    color: var(--c2-teal);
    text-decoration: none;
}

.c2-search-tray__quick-links a:hover {
    text-decoration: underline;
    color: var(--c2-deep-teal);
}

/* ==========================================
   OFFICIAL BRAND PORTFOLIO RAIL (TASK 10)
   ========================================== */
.c2-brand-rail-sec {
    padding: 40px 0 60px 0;
    background: var(--c2-surface);
    border-top: 1px solid var(--c2-metallic-border);
    border-bottom: 1px solid var(--c2-metallic-border);
}

.c2-brand-rail-head {
    text-align: center;
    margin-bottom: 24px;
}

.c2-brand-rail-head span {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--c2-steel);
    text-transform: uppercase;
}

.c2-brand-marquee {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 10px 0;
}

.c2-brand-marquee__track {
    display: flex;
    width: max-content;
    animation: c2BrandMarquee 42s linear infinite;
}

.c2-brand-marquee:hover .c2-brand-marquee__track {
    animation-play-state: paused;
}

.c2-brand-marquee:focus-within .c2-brand-marquee__track {
    animation-play-state: paused;
}

@keyframes c2BrandMarquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

.c2-brand-marquee__group {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-right: 32px; /* balance the trailing gap */
}

.c2-brand-logo-frame {
    width: 200px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c2-bg);
    border: 1px solid var(--c2-metallic-border);
    border-radius: var(--c2-radius-sm);
    padding: 12px;
    box-sizing: border-box;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.c2-brand-logo-frame:hover {
    border-color: var(--c2-teal);
    transform: translateY(-2px);
    box-shadow: var(--c2-shadow);
}

.c2-brand-logo-frame img {
    width: auto;
    height: auto;
    max-width: 82%;
    max-height: 62px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

/* Explicit brand-specific balancing dimensions (no raw scale only) */
.brand-logo--sentury img {
    max-width: 140px !important;
    max-height: 48px !important;
}

.brand-logo--delinte img {
    max-width: 130px !important;
    max-height: 36px !important;
}

.brand-logo--solite img {
    max-width: 130px !important;
    max-height: 44px !important;
}

.brand-logo--atlas img {
    max-width: 130px !important;
    max-height: 40px !important;
}

.brand-logo--cst img {
    max-width: 120px !important;
    max-height: 40px !important;
}

.brand-logo--lanspider img {
    max-width: 130px !important;
    max-height: 42px !important;
}

.brand-logo--sebang img {
    max-width: 120px !important;
    max-height: 40px !important;
}

.brand-logo--bater img {
    max-width: 120px !important;
    max-height: 40px !important;
}

.brand-logo--saite img {
    max-width: 120px !important;
    max-height: 40px !important;
}

/* ==========================================
   SIGNATURE TIRES AND BATTERIES SHOWCASE
   ========================================== */
.c2-showcase-sec {
    padding: 80px 0;
    background: var(--c2-bg);
    position: relative;
}

.c2-transition-divider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(13, 110, 110, 0) 0%, rgba(13, 110, 110, 0.25) 50%, rgba(13, 110, 110, 0) 100%);
}

.c2-showcase-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}

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

.c2-showcase-panel {
    position: relative;
    border-radius: var(--c2-radius);
    overflow: hidden;
    min-height: 460px;
    display: flex;
    align-items: flex-end;
    background: #111518;
    border: 1px solid var(--c2-metallic-border);
    box-shadow: var(--c2-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.c2-showcase-panel:hover {
    transform: translateY(-4px);
    box-shadow: var(--c2-shadow-lg);
}

.c2-showcase-panel__bg-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.c2-showcase-panel__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.c2-showcase-panel--tires .c2-showcase-panel__bg {
    object-position: center center;
}

.c2-showcase-panel--batteries .c2-showcase-panel__bg {
    object-position: center center;
}

.c2-showcase-panel:hover .c2-showcase-panel__bg {
    transform: scale(1.025);
}

.c2-showcase-panel__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(17, 21, 24, 0.0) 30%, rgba(17, 21, 24, 0.9) 100%);
    transition: opacity 0.3s ease;
}

.c2-showcase-panel:hover .c2-showcase-panel__overlay {
    background: linear-gradient(180deg, rgba(17, 21, 24, 0.0) 25%, rgba(17, 21, 24, 0.95) 100%);
}

.c2-showcase-panel__content {
    position: relative;
    z-index: 5;
    padding: 40px;
    width: 100%;
    box-sizing: border-box;
}

.c2-showcase-panel__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--c2-amber-light);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
}

.c2-showcase-panel__title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(26px, 2.5vw, 32px);
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 14px;
}

.c2-showcase-panel__copy {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    margin-bottom: 24px;
    max-width: 440px;
}

/* ==========================================
   BUSINESS SEGMENTS SECTION (RESTORED & REDESIGNED)
   ========================================== */
.c2-segments-sec {
    padding: 90px 0;
    background: var(--c2-bg);
    position: relative;
    border-top: 1px solid var(--c2-metallic-border);
}

.c2-segments-head {
    text-align: center;
    margin-bottom: 50px;
}

.c2-segments-head .c2-sec-title {
    margin-top: 10px;
    margin-bottom: 0;
}

.c2-segments-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

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

@media (min-width: 1024px) {
    .c2-segments-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.c2-segment-card {
    background: var(--c2-surface);
    border: 1px solid var(--c2-metallic-border);
    border-radius: var(--c2-radius);
    overflow: hidden;
    box-shadow: var(--c2-shadow);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.c2-segment-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--c2-shadow-lg);
    border-color: var(--c2-teal);
}

.c2-segment-card__media {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #111518;
}

.c2-segment-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.c2-segment-card:hover .c2-segment-card__media img {
    transform: scale(1.025);
}

.c2-segment-card__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.c2-segment-card__body h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--c2-text-primary);
    margin: 0 0 10px 0;
    transition: color 0.2s ease;
}

.c2-segment-card:hover .c2-segment-card__body h3 {
    color: var(--c2-teal);
}

.c2-segment-card__body p {
    font-size: 14px;
    color: var(--c2-text-secondary);
    line-height: 1.5;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

.c2-segment-card__link {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c2-teal);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    transition: color 0.2s ease;
}

.c2-segment-card:hover .c2-segment-card__link {
    color: var(--c2-deep-teal);
}

/* Category Accent overrides for Battery Cards */
.c2-segment-card--battery:hover {
    border-color: var(--c2-amber);
}

.c2-segment-card--battery:hover .c2-segment-card__body h3 {
    color: var(--c2-amber);
}

.c2-segment-card--battery .c2-segment-card__link {
    color: var(--c2-amber);
}

.c2-segment-card--battery:hover .c2-segment-card__link {
    color: var(--c2-amber-light);
}

/* ==========================================
   DISTRIBUTION STORY (BUSINESS PROCESS FLOW)
   ========================================== */
.c2-distribution-sec {
    position: relative;
    padding: 100px 0;
    background: #FFFFFF;
    border-top: 1px solid var(--c2-metallic-border);
    border-bottom: 1px solid var(--c2-metallic-border);
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.c2-distribution-bg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.c2-distribution-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    opacity: 1; /* Full-contrast metallic map background */
}

.c2-distribution-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Controlled left-side readability gradient ONLY behind text column (0-16%), fully transparent by 31% */
    background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0.94) 16%, rgba(255,255,255,0.55) 23%, rgba(255,255,255,0) 31%);
}

.c2-distribution-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

@media (min-width: 1024px) {
    .c2-distribution-grid {
        grid-template-columns: 0.7fr 1.3fr;
        gap: 56px;
    }
}

.c2-sec-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--c2-steel);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
}

.c2-sec-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(30px, 3.5vw, 42px);
    font-weight: 900;
    color: var(--c2-text-primary);
    line-height: 1.15;
    margin-bottom: 20px;
}

.c2-sec-copy {
    font-size: 16px;
    color: var(--c2-text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 600px;
}

.c2-distribution-content .c2-sec-copy {
    color: #25313a;
    font-weight: 500;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
}

.c2-capability-badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
}

.c2-cap-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c2-text-primary);
    background: var(--c2-bg);
    border: 1px solid var(--c2-metallic-border);
    padding: 8px 16px;
    border-radius: 30px;
    width: fit-content;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.c2-cap-badge svg {
    color: var(--c2-amber);
}

.c2-distribution-actions {
    margin-top: 8px;
}

.c2-distribution-visual-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
}

.c2-corridor-svg-overlay {
    display: block;
    width: 100%;
    height: auto;
    background: transparent;
}

/* Gateway & El Safwa Pulse Animations */
@keyframes c2GatewayGlow {
    0%, 100% { transform: scale(1); opacity: 0.75; }
    50% { transform: scale(1.15); opacity: 0.98; }
}

@keyframes c2ElsafwaGlow {
    0%, 100% { transform: scale(1); opacity: 0.65; }
    50% { transform: scale(1.12); opacity: 0.92; }
}

.c2-gateway-pulse {
    animation: c2GatewayGlow 4s ease-in-out infinite;
    transform-origin: center;
}

.c2-elsafwa-pulse {
    animation: c2ElsafwaGlow 3.5s ease-in-out infinite;
    transform-origin: center;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .c2-motion-dot,
    .c2-gateway-pulse,
    .c2-elsafwa-pulse {
        animation: none !important;
    }
}

.c2-distribution-label-wrap .label--right {
    text-align: right;
    color: var(--c2-teal);
}

.c2-pulse-dot {
    filter: drop-shadow(0 0 3px rgba(219, 130, 43, 0.8));
}

/* ==========================================
   TYREMART CLOSING FEATURE
   ========================================== */
.c2-tyremart-closing-sec {
    padding: 90px 0;
    background: #0B0E11; /* deep visual contrast */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.c2-tyremart-closing-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #E61E1E; /* TyreMart Red border accent */
}

.c2-tyremart-closing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

@media (min-width: 1024px) {
    .c2-tyremart-closing-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.c2-tyremart-badge {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.2em;
    color: #E61E1E;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: block;
}

.c2-tyremart-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(32px, 3.5vw, 44px);
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.15;
    margin-bottom: 20px;
}

.c2-tyremart-copy {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 500px;
}

.c2-tyremart-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.btn--tyremart-red {
    background-color: #E61E1E !important;
    border-color: #E61E1E !important;
    color: #FFFFFF !important;
}

.btn--tyremart-red:hover {
    background-color: #C51717 !important;
    border-color: #C51717 !important;
}

.btn--tyremart-outline {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
}

.btn--tyremart-outline:hover {
    border-color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.c2-tyremart-closing-media {
    display: flex;
    justify-content: center;
}

.c2-tyremart-image-frame {
    position: relative;
    border-radius: var(--c2-radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 520px;
    aspect-ratio: 16/10;
}

.c2-tyremart-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c2-tyremart-preview-badge {
    position: absolute;
    bottom: 16px;
    right: 16px;
    font-size: 10px;
    font-weight: 800;
    background: rgba(11, 14, 17, 0.85);
    color: #FFFFFF;
    padding: 5px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 10;
}

/* ==========================================
   STAKEHOLDER TRUST STRIP (TASK 12)
   ========================================== */
.c2-trust-strip-sec {
    background: var(--c2-surface);
    border-top: 1px solid var(--c2-metallic-border);
    padding: 45px 0;
}

.c2-trust-strip__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (min-width: 1024px) {
    .c2-trust-strip__grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.c2-trust-strip__item {
    text-align: center;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.c2-trust-strip__icon-wrap {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(13, 110, 110, 0.08);
    color: var(--c2-teal);
    margin-bottom: 12px;
    border: 1.5px solid rgba(13, 110, 110, 0.15);
}

.c2-trust-icon {
    width: 24px;
    height: 24px;
    stroke: var(--c2-teal);
    display: block;
}

.c2-trust-strip__item h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--c2-text-primary);
    margin: 0;
    line-height: 1.3;
}

/* Focus-within pause for accessibility */
.c2-brand-marquee:focus-within .c2-brand-marquee__track {
    animation-play-state: paused;
}

/* ==========================================
   RESPONSIVE HERO ADAPTATIONS
   ========================================== */
@media (max-width: 1024px) {
    .c2-hero {
        min-height: 620px;
        height: auto;
        padding: 50px 0 70px 0;
    }
    
    .c2-hero__bg-img {
        object-position: 70% center;
    }
    
    .c2-hero__container {
        padding-left: 32px;
        padding-right: 32px;
    }
    
    .c2-hero__gradient-overlay {
        background: linear-gradient(
            90deg, 
            rgba(248, 249, 250, 0.96) 0%, 
            rgba(248, 249, 250, 0.85) 45%, 
            rgba(248, 249, 250, 0.30) 75%, 
            rgba(248, 249, 250, 0.0) 100%
        );
    }
}

/* ============================================================
   DESKTOP HERO — CINEMATIC SLOW ZOOM & HORIZONTAL DRIFT LOOP
   Scope: min-width: 1025px only.
   Element: .c2-hero__cinematic-layer (parent of picture/img).
   The JS pointer parallax writes to .c2-hero__bg-img inline —
   these are two separate DOM elements, zero transform conflict.
   ============================================================ */

/* Keyframe:
   0%   scale(1.000) translateX(0)     — initial static state
   22%  scale(1.045) translateX(0)     — zoom in complete, no drift yet
   48%  scale(1.045) translateX(1.8%)  — drift right while zoomed
   72%  scale(1.000) translateX(1.8%)  — zoom out, right drift held
   100% scale(1.000) translateX(0)     — return to origin, seamless loop

   transform-origin 72% 50%: anchor point on tire side so the
   extra scale headroom expands toward the left (text zone),
   never exposing the right edge of the image.

   translateX is positive (rightward), but because the anchor
   is at 72%, the net visible movement of the focal tire is
   only ~0.5% — imperceptible as individual motion. */

@keyframes c2CinematicDrift {
    0%   { transform: scale(1.000) translateX(0);    }
    22%  { transform: scale(1.045) translateX(0);    }
    48%  { transform: scale(1.045) translateX(1.8%); }
    72%  { transform: scale(1.000) translateX(1.8%); }
    100% { transform: scale(1.000) translateX(0);    }
}

@media (min-width: 1025px) {
    .c2-hero__bg-wrap {
        animation: c2CinematicDrift 32s linear infinite;
        /* linear avoids per-keyframe easing jumps; the keyframe rhythm
           itself provides the cinematic acceleration feel */
        transform-origin: 72% 50%;
        will-change: transform;
        backface-visibility: hidden;
    }
}

/* Reduced motion: completely disable animation, restore static state */
@media (prefers-reduced-motion: reduce) {
    .c2-hero__bg-wrap {
        animation: none !important;
        transform: none !important;
    }
}

@media (max-width: 767px) {

    .c2-brand-marquee {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
    }
    .c2-brand-marquee__track {
        animation: none !important;
    }
    .c2-brand-marquee__group {
        gap: 20px;
        padding-right: 20px;
    }
    .c2-brand-logo-frame {
        width: 130px;
        height: 64px;
        padding: 8px;
    }
    .c2-brand-logo-frame img {
        max-height: 42px;
    }
    .brand-logo--sentury img,
    .brand-logo--delinte img,
    .brand-logo--solite img,
    .brand-logo--atlas img,
    .brand-logo--cst img,
    .brand-logo--lanspider img,
    .brand-logo--sebang img,
    .brand-logo--bater img,
    .brand-logo--saite img {
        max-width: 85% !important;
        max-height: 42px !important;
    }
}

@media (max-width: 640px) {
    .c2-hero {
        min-height: 560px;
        padding: 40px 0 60px 0;
    }
    
    .c2-hero__bg-img {
        object-position: center center;
    }
    
    .c2-hero__container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .c2-hero__gradient-overlay {
        background: linear-gradient(
            180deg, 
            rgba(248, 249, 250, 0.96) 0%, 
            rgba(248, 249, 250, 0.85) 60%, 
            rgba(248, 249, 250, 0.40) 100%
        );
    }
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    .c2-brand-marquee__track {
        animation: none !important;
    }
}



/* ==========================================================================
   HOMEPAGE CONCEPT 2 — MOBILE PRECISION FIX (< 768px)
   All rules scoped to prevent desktop/other-route leaks.
   ========================================================================== */

/* ── Defaults: mobile-only elements hidden on desktop ── */
.c2-mobile-trust-strip       { display: none; }
.c2-distribution-mobile-sec  { display: none; }

/* ══════════════════════════════════════════════════════
   BREAKPOINT: ≤ 767px  (all mobile phones)
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── 1. Hero: geometry fix ──────────────────────────── */
    .c2-hero {
        min-height: clamp(680px, 88svh, 780px) !important;
        height: auto !important;
        padding-top: 80px !important;
        padding-bottom: 32px !important;
    }

    /* Portrait crop is centered; position keeps tire right, space left for text */
    .c2-hero__bg-img {
        object-fit: cover !important;
        object-position: 72% center !important;
        /* No transform that would alter geometry */
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Left-side readability veil: protects text, tire stays vivid on right */
    .c2-hero__gradient-overlay {
        background: linear-gradient(
            90deg,
            rgba(248, 249, 250, 0.94) 0%,
            rgba(248, 249, 250, 0.78) 36%,
            rgba(248, 249, 250, 0.22) 60%,
            rgba(248, 249, 250, 0.00) 78%
        ) !important;
    }

    /* ── 2. Hero typography ─────────────────────────────── */
    .c2-hero__content {
        padding: 0 24px !important;
        max-width: 68% !important;  /* Keep headline left of tire */
    }
    .c2-hero__eyebrow {
        font-size: 10.5px !important;
        padding: 4px 10px !important;
        margin-bottom: 12px !important;
        /* Dark pill on light background */
        background: rgba(15, 23, 42, 0.08) !important;
        color: #1E293B !important;
        border-color: rgba(15, 23, 42, 0.15) !important;
    }
    .c2-hero__title {
        font-size: clamp(42px, 10.5vw, 58px) !important;
        line-height: 1.05 !important;
        margin-bottom: 14px !important;
        color: #0F172A !important;
        /* Restrained white edge halo — preserves dark charcoal, lifts text off tire tread */
        text-shadow:
            0 0 2px rgba(255, 255, 255, 0.98),
            1px 0 0 rgba(255, 255, 255, 0.72),
           -1px 0 0 rgba(255, 255, 255, 0.72),
            0 1px 0 rgba(255, 255, 255, 0.72),
            0 -1px 0 rgba(255, 255, 255, 0.72),
            0 3px 12px rgba(255, 255, 255, 0.72) !important;
    }
    /* Orange "Markets." emphasis — same halo so it stays crisp over tire tread */
    .c2-hero__title span.accent-amber {
        text-shadow:
            0 0 2px rgba(255, 255, 255, 0.98),
            1px 0 0 rgba(255, 255, 255, 0.72),
           -1px 0 0 rgba(255, 255, 255, 0.72),
            0 1px 0 rgba(255, 255, 255, 0.72),
            0 -1px 0 rgba(255, 255, 255, 0.72),
            0 3px 12px rgba(255, 255, 255, 0.72) !important;
    }
    .c2-hero__copy {
        font-size: 16px !important;
        line-height: 1.45 !important;
        margin-bottom: 22px !important;
        max-width: 100% !important;
        color: #1E293B !important;
        /* Softer white readability shadow for supporting paragraph */
        text-shadow:
            0 1px 2px rgba(255, 255, 255, 0.95),
            0 0 10px rgba(255, 255, 255, 0.82) !important;
    }

    /* ── 3. Hero CTAs ───────────────────────────────────── */
    .c2-hero__actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .c2-hero__actions .btn {
        height: 54px !important;
        line-height: 54px !important;
        padding: 0 14px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        border-radius: 10px !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* ── 4. Trust list: hide from hero, show separate strip ── */
    .c2-hero__trust-list {
        display: none !important;
    }
    .c2-mobile-trust-strip {
        display: block !important;
        background: #FFFFFF;
        border-bottom: 1px solid #E2E8F0;
        padding: 14px 20px;
    }
    .c2-mobile-trust-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 16px;
        max-width: 500px;
        margin: 0 auto;
    }
    .c2-mobile-trust-item {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        font-weight: 700;
        color: #0F172A;
    }
    .c2-mobile-trust-icon { color: #0284C7; font-weight: 900; }

    /* ── 5. Search tray: independent card ───────────────── */
    .c2-search-sec {
        padding: 20px 0 !important;
    }
    .c2-search-tray {
        margin-top: 0 !important;
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
        border-radius: 14px !important;
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
    }

    /* ── 6. Desktop Trade Corridor: hide completely on mobile ── */
    .c2-distribution-sec {
        display: none !important;
    }

    /* ── 7. Mobile Trade Corridor: show two-block layout ── */
    .c2-distribution-mobile-sec {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 32px 20px 36px !important;
        background: #F8FAFC !important;
    }

    /* Block A: Content Card — pure white, no map */
    .c2-distribution-mobile__content {
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 16px !important;
        padding: 28px 22px 24px !important;
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
    }
    .c2-distribution-mobile__content .c2-sec-eyebrow {
        color: #0284C7 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0.1em !important;
        display: block !important;
        margin-bottom: 10px !important;
    }
    .c2-distribution-mobile__content .c2-sec-title {
        color: #0F172A !important;
        font-size: 30px !important;
        font-weight: 900 !important;
        margin-bottom: 14px !important;
        line-height: 1.1 !important;
    }
    .c2-distribution-mobile__content .c2-sec-copy {
        color: #334155 !important;
        font-size: 14.5px !important;
        font-weight: 500 !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
        text-shadow: none !important;
    }

    /* Compact capability badges */
    .c2-distribution-mobile__badges {
        display: flex;
        flex-direction: column;
        gap: 9px;
        margin-bottom: 22px;
    }
    .c2-distribution-mobile__badge {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 50px;
        padding: 0 16px;
        background: #F8FAFC;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 700;
        color: #0F172A;
    }
    .c2-distribution-mobile__badge svg {
        flex-shrink: 0;
        color: #0284C7;
    }

    /* CTA */
    .c2-distribution-mobile__cta {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        height: 56px !important;
        line-height: 56px !important;
        border-radius: 10px !important;
        font-weight: 800 !important;
        font-size: 15px !important;
    }

    /* Block B: Standalone map card — no overlay content on top */
    .c2-distribution-mobile__map-figure {
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        position: relative !important;
        border: 1px solid #CBD5E1 !important;
        box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12) !important;
        background: #0F172A;
        display: block !important;
    }
    .c2-distribution-mobile__map-img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: cover !important;
        /* Geometry preservation: intrinsic AR 4:5 maintained by height:auto */
    }
    .c2-distribution-mobile__map-badge {
        position: absolute !important;
        bottom: 14px !important;
        left: 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: rgba(15, 23, 42, 0.85) !important;
        backdrop-filter: blur(6px) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #F8FAFC !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.06em !important;
        padding: 5px 11px !important;
        border-radius: 20px !important;
        font-style: normal !important;
    }
    .c2-distribution-mobile__map-dot {
        width: 8px !important;
        height: 8px !important;
        background: #F5A623 !important;
        border-radius: 50% !important;
        box-shadow: 0 0 7px #F5A623 !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════
   BREAKPOINT: ≤ 420px  (small phones: stacked CTAs)
   ══════════════════════════════════════════════════════ */
@media (max-width: 420px) {
    .c2-hero__actions {
        grid-template-columns: 1fr !important;
    }
    .c2-hero__content {
        max-width: 82% !important;
    }
}

/* ══════════════════════════════════════════════════════
   COMPACT TOP CONTACT BAR — scoped to Concept 2 only
   ══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* body:has() scopes this strictly to pages containing the concept-2 root */
    body:has(#homepage-concept-2-root) .topbar {
        padding: 6px 0 !important;
    }
    body:has(#homepage-concept-2-root) .topbar__inner {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 11.5px !important;
        padding: 0 16px !important;
    }
    body:has(#homepage-concept-2-root) .topbar a[href^="mailto:"],
    body:has(#homepage-concept-2-root) .topbar .sep {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════
   WHATSAPP FLOATING BUTTON — safe area
   ══════════════════════════════════════════════════════ */
.whatsapp-float,
.wa-widget {
    bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 20px)) !important;
    right: 20px !important;
    z-index: 999 !important;
}

/* END OF HOMEPAGE CONCEPT 2 STYLESHEET */