@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESIGN SYSTEM TOKENS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
    --red: #cc0000;
    --red-hover: #a30000;
    --red-subtle: rgba(204, 0, 0, 0.07);
    --black: #0a0a0a;
    --charcoal: #161616;
    --dark: #242424;
    --gray: #555555;
    --silver: #8e8e8e;
    --border: #e2e2e2;
    --light: #f4f4f2;
    --cream: #faf9f6;
    --white: #ffffff;
    --heading: 'Outfit', sans-serif;
    --body: 'Inter', sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --maxw: 1400px;
    --pad: clamp(20px, 5vw, 80px);
    --sy: clamp(48px, 5.5vw, 84px);
}

/* ━━━ RESET ━━━ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { 
    font-size:16px; 
    scroll-behavior:auto; 
    width: 100%; 
    max-width: 100vw; 
    overflow-x: clip; 
}
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto!important; }
body { 
    font-family:var(--body); 
    background:var(--cream); 
    color:var(--charcoal); 
    line-height:1.6; 
    width: 100%; 
    max-width: 100vw; 
    overflow-x: clip; 
    position: relative;
    -webkit-font-smoothing:antialiased; 
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; }
ul { list-style:none; }
h1,h2,h3,h4,h5,h6 { font-family:var(--heading); font-weight:700; line-height:1.08; letter-spacing:-0.03em; }

@media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* ━━━ REUSABLE TAGS & BUTTONS ━━━ */
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--heading);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--red);
    margin-bottom: 24px;
}
.section-tag::before { content:''; width:32px; height:2px; background:var(--red); }
.section-tag.light { color: var(--silver); }
.section-tag.light::before { background: var(--red); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAVIGATION & MOBILE MENU
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.n { position:fixed; top:0; left:0; width:100%; z-index:1000; padding:14px var(--pad); background:rgba(10,10,10,0.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,0.08); transition:all .4s var(--ease); }
.n.stuck { padding:10px var(--pad); background:rgba(255,255,255,0.98); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,0.06); }
.n-inner { max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.n-logo { display:flex; align-items:center; background:#ffffff; padding:7px 18px; border-radius:14px; flex-shrink:0; margin-right:24px; box-shadow:0 4px 16px rgba(0,0,0,0.2); transition:all .4s var(--ease); }
.n-logo img { height:50px; width:auto; max-width:320px; object-fit:contain; filter:none; transition:height .4s var(--ease); }
.n.stuck .n-logo { background:transparent; box-shadow:none; padding:2px 6px; }
.n.stuck .n-logo img { height:44px; }
.n-links { display:flex; gap:20px; align-items:center; flex-grow:1; justify-content:center; }
.n-link { font-family:var(--heading); font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,0.9); transition:color .3s; position:relative; padding:6px 0; white-space:nowrap; }
.n.stuck .n-link { color:var(--charcoal); }
.n-link::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--red); transition:width .35s var(--ease); }
.n-link:hover::after, .n-link.on::after { width:100%; }
.n-link:hover { color:var(--red); }
.n.stuck .n-link:hover { color:var(--red); }

/* Dropdown */
.n-drop { position:relative; }
.n-drop .n-link i { font-size:.65rem; margin-left:4px; transition:transform .3s; }
.n-drop:hover .n-link i { transform:rotate(180deg); }
.n-drop-menu { position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(10px); background:var(--white); border:1px solid var(--border); border-radius:14px; padding:8px 0; min-width:220px; max-width:260px; max-height:350px; overflow-y:scroll; overflow-x:hidden; opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease), transform .3s var(--ease); box-shadow:0 20px 48px rgba(0,0,0,.12); }
.n-drop:hover .n-drop-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); overflow-y:scroll; }
.n-drop-menu a { display:block; padding:7px 18px; font-size:.82rem; font-weight:500; color:var(--gray); transition:color .2s, background .2s, padding-left .2s; white-space:nowrap; }
.n-drop-menu a:hover { color:var(--red); background:var(--red-subtle); padding-left:22px; }

/* Custom scrollbar for dropdown */
.n-drop-menu::-webkit-scrollbar { width:5px; }
.n-drop-menu::-webkit-scrollbar-track { background:var(--light); border-radius:4px; margin:8px 0; }
.n-drop-menu::-webkit-scrollbar-thumb { background:var(--silver); border-radius:4px; }
.n-drop-menu::-webkit-scrollbar-thumb:hover { background:var(--gray); }

/* CTA */
.n-cta { padding:10px 22px; font-family:var(--heading); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; border:1.5px solid rgba(255,255,255,0.4); border-radius:60px; color:var(--white); transition:all .35s var(--ease); white-space:nowrap; flex-shrink:0; }
.n.stuck .n-cta { border-color:var(--charcoal); color:var(--charcoal); }
.n-cta:hover { background:var(--red); border-color:var(--red); color:var(--white)!important; }

/* Hamburger */
.n-burger { display:none; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:transparent; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; z-index:2500 !important; transition:all .3s; }
.n.stuck .n-burger { border-color:var(--border); background:var(--light); }
.n-burger span { width:20px; height:2px; background:var(--white); border-radius:2px; transition:all .4s var(--ease); pointer-events:none; }
.n.stuck .n-burger span { background:var(--charcoal); }
.n-burger.on { background: var(--red) !important; border-color: var(--red) !important; z-index: 2500 !important; }
.n-burger.on span { background: var(--white) !important; }
.n-burger.on span:first-child { transform:translateY(3.5px) rotate(45deg); background:var(--white)!important; }
.n-burger.on span:last-child { transform:translateY(-3.5px) rotate(-45deg); background:var(--white)!important; }

/* Mobile Overlay */
.m-menu { 
    position:fixed; 
    inset:0; 
    background:var(--black); 
    z-index:2000 !important; 
    display:flex; 
    flex-direction:column; 
    justify-content:flex-start !important; 
    padding:85px 30px 40px 30px !important; 
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    clip-path:circle(0% at calc(100% - 48px) 36px); 
    transition:clip-path .5s var(--ease), opacity .35s ease, visibility .35s ease; 
}
.m-menu.on { 
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    clip-path:circle(150% at calc(100% - 48px) 36px); 
}

/* Explicit Close Button inside Mobile Overlay */
.m-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2500 !important;
    transition: all 0.3s var(--ease);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.m-close-btn:hover, .m-close-btn:active {
    background: var(--red) !important;
    border-color: var(--red) !important;
    color: #ffffff !important;
    transform: scale(1.1);
}

.m-menu a { font-family:var(--heading); font-size:clamp(1.6rem,6vw,2.6rem); font-weight:700; color:var(--white); display:block; padding:8px 0; opacity:0; transform:translateX(-20px); transition:all .35s var(--ease); }
.m-menu.on a { opacity:1; transform:translateX(0); }
.m-menu.on a:nth-child(1){transition-delay:.1s}
.m-menu.on a:nth-child(2){transition-delay:.15s}
.m-menu.on a:nth-child(3){transition-delay:.2s}
.m-menu.on a:nth-child(4){transition-delay:.25s}
.m-menu.on a:nth-child(5){transition-delay:.3s}
.m-menu.on a:nth-child(6){transition-delay:.35s}
.m-menu.on a:nth-child(7){transition-delay:.4s}
.m-menu.on a:nth-child(8){transition-delay:.45s}
.m-menu a:hover { color:var(--red); }
.m-contact { margin-top:36px; border-top:1px solid rgba(255,255,255,.12); padding-top:24px; color:var(--silver); font-size:.92rem; }
.m-contact a { font-size:.92rem; color:var(--white); padding:2px 0; display:inline; }

/* Mobile Dropdown */
.m-drop { width:100%; }
.m-drop-toggle { font-family:var(--heading); font-size:clamp(1.6rem,6vw,2.6rem); font-weight:700; color:var(--white); display:flex!important; align-items:center; gap:12px; padding:8px 0; }
.m-drop-toggle i { font-size:0.6em; transition:transform .3s var(--ease); }
.m-drop.open .m-drop-toggle i { transform:rotate(180deg); }
.m-drop-menu { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height .4s var(--ease); 
    padding-left: 12px; 
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}
.m-drop.open .m-drop-menu { 
    max-height: 280px !important; 
    overflow-y: auto !important; 
    padding-right: 8px;
    margin-top: 4px;
}
.m-drop-menu a { font-size:clamp(0.95rem,3.2vw,1.2rem)!important; font-weight:500!important; color:rgba(255,255,255,.9)!important; padding:6px 0!important; border-left:2px solid var(--red); padding-left:14px!important; }
.m-drop-menu a:hover { color:var(--red)!important; }

/* Custom scrollbar for mobile product menu */
.m-drop-menu::-webkit-scrollbar { width: 6px; }
.m-drop-menu::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); border-radius: 4px; }
.m-drop-menu::-webkit-scrollbar-thumb { background: var(--red); border-radius: 4px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. HERO — Split Screen
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; overflow:hidden; }
.hero-text { background:var(--black); display:flex; flex-direction:column; justify-content:center; padding:clamp(60px,8vw,140px) var(--pad); position:relative; z-index:2; }
.hero-tag { display:inline-flex; align-items:center; gap:10px; font-family:var(--heading); font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--red); margin-bottom:36px; opacity:0; transform:translateY(20px); }
.hero-tag::before { content:''; width:36px; height:2px; background:var(--red); }
.hero-h1 { font-size:clamp(3rem,6vw,5.5rem); color:var(--white); margin-bottom:28px; line-height:1.02; }
.hero-line { display:block; overflow:hidden; }
.hero-word { display:inline-block; transform:translateY(110%); }
.hero-word.accent { color:var(--red); }
.hero-p { color:var(--silver); font-size:clamp(1rem,1.4vw,1.2rem); max-width:460px; margin-bottom:44px; line-height:1.75; opacity:0; transform:translateY(20px); }
.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; opacity:0; transform:translateY(20px); }
.hero-btn { display:inline-flex; align-items:center; gap:10px; padding:18px 40px; background:var(--red); color:var(--white); font-family:var(--heading); font-weight:700; font-size:.92rem; text-transform:uppercase; letter-spacing:.06em; border-radius:60px; transition:all .4s var(--ease); }
.hero-btn:hover { background:var(--red-hover); transform:translateY(-2px); }
.hero-btn i { transition:transform .3s var(--ease); }
.hero-btn:hover i { transform:translateX(4px); }
.hero-link { font-family:var(--heading); font-weight:600; font-size:.88rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.6); position:relative; padding-bottom:4px; }
.hero-link::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background:rgba(255,255,255,.3); transition:background .3s; }
.hero-link:hover { color:var(--white); }
.hero-link:hover::after { background:var(--red); }

.hero-img { position:relative; overflow:hidden; background:var(--black); width:100%; height:100%; min-height:100%; }
.hero-carousel { position:absolute; inset:0; width:100%; height:100%; }
.hero-slide { position:absolute; inset:0; width:100%; height:100%; opacity:0; visibility:hidden; transition:opacity 1s var(--ease), transform 1.2s var(--ease); z-index:1; }
.hero-slide.active { opacity:1; visibility:visible; z-index:2; }
.hero-slide img { width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 7s ease-out; }
.hero-slide.active img { transform:scale(1.0); }

/* Navigation Dots */
.hero-carousel-dots { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:10; background:rgba(10,10,10,0.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:8px 16px; border-radius:30px; border:1px solid rgba(255,255,255,0.15); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
.hero-carousel-dots .dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.4); cursor:pointer; transition:all 0.4s var(--ease); }
.hero-carousel-dots .dot:hover { background:rgba(255,255,255,0.9); transform:scale(1.2); }
.hero-carousel-dots .dot.active { width:28px; border-radius:10px; background:var(--red); }

/* Arrow Controls */
.hero-carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(10,10,10,0.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.2); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; opacity:0; transition:all 0.35s var(--ease); }
.hero-img:hover .hero-carousel-arrow { opacity:1; }
.hero-carousel-arrow:hover { background:var(--red); border-color:var(--red); transform:translateY(-50%) scale(1.1); box-shadow:0 6px 20px rgba(204,0,0,0.4); }
.hero-prev { left:20px; }
.hero-next { right:20px; }

.hero-float-badge { position:absolute; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); padding:14px 22px; border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.12); display:flex; align-items:center; gap:10px; z-index:5; opacity:0; }
.hfb-1 { bottom:12%; left:24px; }
.hfb-2 { top:20%; right:20px; }
.hfb-num { font-family:var(--heading); font-size:1.8rem; font-weight:800; color:var(--red); line-height:1; }
.hfb-icon { font-size:1.5rem; color:var(--red); }
.hfb-txt { font-size:.82rem; font-weight:600; color:var(--charcoal); line-height:1.2; text-transform:uppercase; letter-spacing:.04em; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. MARQUEE STRIP
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.marquee { padding:24px 0; background:var(--white); border-bottom:1px solid var(--border); overflow:hidden; }
.marquee-title { text-align:center; font-family:var(--heading); font-size:.75rem; font-weight:700; letter-spacing:.2em; color:var(--silver); margin-bottom:20px; text-transform:uppercase; }
.marquee-inner { display:flex; animation:slide 35s linear infinite; width:max-content; }
.marquee-inner img { height:36px; margin:0 44px; opacity:.9; filter:none; transition:all .4s; flex-shrink:0; object-fit:contain; }
.marquee-inner img:hover { opacity:1; transform:scale(1.08); }
@keyframes slide { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. ABOUT SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.about { padding:var(--sy) var(--pad); background:var(--cream); }
.about-wrap { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:5fr 7fr; gap:80px; align-items:stretch; }
.about-lbl { font-family:var(--heading); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--red); margin-bottom:28px; display:inline-flex; align-items:center; gap:12px; }
.about-lbl::before { content:''; width:32px; height:2px; background:var(--red); }
.about-img { 
    position:relative; 
    border-radius:24px; 
    overflow:hidden; 
    height:100%; 
    min-height:380px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.about-img img { 
    width:100%; 
    height:100%; 
    object-fit:cover; 
    display:block;
    transition:transform .8s var(--ease); 
}
.about-img:hover img { transform:scale(1.04); }
.about-badge { 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:var(--red); 
    color:var(--white); 
    padding:16px 26px; 
    font-family:var(--heading); 
    font-weight:800; 
    font-size:.85rem; 
    letter-spacing:.08em; 
    border-radius:0 20px 0 0; 
    text-transform:uppercase; 
    z-index: 5;
}
.about-right h2 { font-size:clamp(2.2rem,4.5vw,3.8rem); margin-bottom:32px; line-height:1.12; }
.about-right h2 em { font-style:normal; color:var(--red); }
.about-right p { font-size:1.1rem; color:var(--gray); line-height:1.85; margin-bottom:40px; }
.about-right .link-arrow { display:inline-flex; align-items:center; gap:10px; font-family:var(--heading); font-weight:600; font-size:.88rem; text-transform:uppercase; letter-spacing:.06em; color:var(--charcoal); }
.about-right .link-arrow::after { content:'→'; transition:transform .3s var(--ease); }
.about-right .link-arrow:hover { color:var(--red); }
.about-right .link-arrow:hover::after { transform:translateX(6px); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. INTERACTIVE SERVICE SHOWCASE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.services-showcase {
    padding: var(--sy) var(--pad);
    background: var(--white);
    position: relative;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

@media (min-width: 1025px) {
    .services-showcase {
        overflow: visible;
    }
}

@media (max-width: 1024px) {
    .services-showcase {
        overflow: hidden !important;
    }
}
.showcase-header {
    max-width: var(--maxw);
    margin: 0 auto 60px auto;
}
.showcase-header h2 {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
}
.showcase-header h2 em { font-style:normal; color:var(--red); }

.showcase-container {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 60px;
    align-items: flex-start;
}

/* Dynamic Image & Steps Preview Container — Sticky Follow */
.showcase-preview-frame {
    width: 100%;
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 110px !important;
    z-index: 10;
    align-self: flex-start !important;
}

.showcase-preview-bg {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 24px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 30px 60px rgba(0,0,0,0.12);
    transition: background-image 0.5s var(--ease), transform 0.7s var(--ease);
}
.showcase-list {
    display: flex;
    flex-direction: column;
}
.showcase-item {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 30px;
    padding: 32px 24px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.4s var(--ease);
    border-radius: 16px;
}
.showcase-item:first-child { border-top: 1px solid var(--border); }

.showcase-item:hover, .showcase-item.active {
    background: var(--cream);
    border-color: transparent;
    padding-left: 36px;
}

.item-num {
    font-family: var(--heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--silver);
    transition: color 0.3s;
}
.showcase-item:hover .item-num, .showcase-item.active .item-num {
    color: var(--red);
}

.item-info h3 {
    font-size: 1.6rem;
    margin-bottom: 8px;
    transition: color 0.3s;
}
.showcase-item:hover .item-info h3 { color: var(--red); }

.item-info p {
    font-size: 0.95rem;
    color: var(--gray);
    line-height: 1.6;
    max-width: 520px;
}

.item-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--heading);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--charcoal);
    padding: 10px 20px;
    border-radius: 40px;
    border: 1px solid var(--border);
    background: var(--white);
    transition: all 0.3s var(--ease);
}
.showcase-item:hover .item-btn {
    background: var(--red);
    color: var(--white);
    border-color: var(--red);
}
.item-btn i { transition: transform 0.3s; }
.showcase-item:hover .item-btn i { transform: translateX(4px); }

/* Process Showcase Tabs & Preview Card */
.process-showcase-home {
    background: var(--light);
}
.process-tabs-wrap {
    display: inline-flex;
    gap: 12px;
    background: rgba(0, 0, 0, 0.05);
    padding: 6px;
    border-radius: 50px;
    border: 1px solid var(--border);
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
.process-tab-btn {
    padding: 12px 26px;
    border-radius: 40px;
    border: none;
    background: transparent;
    font-family: var(--heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gray);
    cursor: pointer;
    transition: all 0.35s var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.process-tab-btn.active {
    background: var(--red);
    color: var(--white);
    box-shadow: 0 4px 18px rgba(204, 0, 0, 0.35);
}

.home-preview-card {
    background: var(--white);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.home-preview-img-wrap {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    background: #1a1a24;
}

.home-preview-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background-image 0.4s ease, transform 0.6s ease;
}

.home-preview-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--red);
    color: var(--white);
    font-family: var(--heading);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 16px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(204, 0, 0, 0.4);
}

.home-preview-body {
    padding: 26px 28px 30px;
}

.home-preview-body h3 {
    font-family: var(--heading);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--charcoal);
    margin-bottom: 12px;
    line-height: 1.25;
}

.home-preview-body p {
    font-size: 0.92rem;
    color: var(--gray);
    line-height: 1.65;
    margin-bottom: 20px;
}

.home-preview-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-preview-list li {
    font-size: 0.88rem;
    color: var(--charcoal);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.home-preview-list li i {
    color: var(--red);
    font-size: 14px;
    flex-shrink: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. CINEMATIC PARALLAX
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cinema { position:relative; height:80vh; min-height:500px; overflow:hidden; display:flex; align-items:center; }
.cinema-bg { position:absolute; top:-15%; left:0; width:100%; height:130%; background-size:cover; background-position:center; will-change:transform; }
.cinema::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.4) 55%,transparent 100%); }
.cinema-body { position:relative; z-index:2; padding:0 var(--pad); max-width:var(--maxw); margin:0 auto; width:100%; }
.cinema-body h2 { font-size:clamp(2.5rem,5vw,4.2rem); color:var(--white); max-width:650px; margin-bottom:24px; }
.cinema-body p { font-size:1.12rem; color:rgba(255,255,255,.7); max-width:480px; margin-bottom:36px; line-height:1.75; }
.btn-w { display:inline-flex; align-items:center; gap:10px; padding:18px 40px; background:var(--white); color:var(--charcoal); font-family:var(--heading); font-weight:700; font-size:.88rem; text-transform:uppercase; letter-spacing:.06em; border-radius:60px; transition:all .4s var(--ease); border:none; cursor:pointer; }
.btn-w:hover { background:var(--red); color:var(--white); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. PROCESS — Horizontal Timeline Narrative
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.process { padding:clamp(60px,7.5vw,100px) var(--pad); background:#141414; color:#ffffff; position:relative; overflow:hidden; border-top:1px solid #222222; border-bottom:1px solid #222222; }
.process-head { max-width:var(--maxw); margin:0 auto 60px; text-align:left; }
.section-tag-dark {
    color: #aaaaaa;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.tag-dash {
    display: inline-block;
    width: 26px;
    height: 2px;
    background: var(--red);
}
.process-head h2 { font-size:clamp(2.8rem,5.5vw,4.4rem); color:#ffffff; margin-bottom:16px; font-weight:800; line-height:1.05; }
.process-head h2 em { font-style:normal; color:var(--red); }
.process-sub-dark { color:#a0a0a0; font-size:1.08rem; max-width:680px; margin:0; line-height:1.6; }

.process-grid-wrap { max-width:var(--maxw); margin:0 auto; position:relative; padding:20px 0; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; z-index:2; }
.process-line-track {
    position: absolute;
    top: 50px;
    left: 12.5%;
    width: 75%;
    height: 2px;
    background: #2e2e2e;
    border-radius: 4px;
    z-index: 1;
}
.process-line-fill {
    width: 33.33%;
    height: 100%;
    background: var(--red);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(204, 0, 0, 0.6);
    transition: width 0.3s var(--ease);
}

.p-step { text-align:center; position:relative; z-index:2; cursor:pointer; }
.p-step-dot {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #1c1c1c;
    border: 2px solid #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-family: var(--heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: #888888;
    transition: all 0.4s var(--ease);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.p-step:hover .p-step-dot, .p-step.on .p-step-dot {
    background: var(--red);
    border-color: var(--red);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(204, 0, 0, 0.55);
}
.p-step-title {
    font-family: var(--heading);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #ffffff;
    margin-bottom: 10px;
    text-transform: uppercase;
    transition: color .3s;
}
.p-step:hover .p-step-title, .p-step.on .p-step-title { color: #ffffff; }
.p-step p { font-size: 0.88rem; color: #999999; line-height: 1.6; max-width: 230px; margin: 0 auto; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. WHY CHOOSE US
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.why { padding:var(--sy) var(--pad); background:var(--cream); }
.why-wrap { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.why-left h2 { font-size:clamp(2.8rem,5vw,4.2rem); margin-bottom:28px; }
.why-left h2 em { font-style:normal; color:var(--red); }
.why-left > p { font-size:1.1rem; color:var(--gray); line-height:1.8; margin-bottom:36px; }
.why-img { border-radius:24px; overflow:hidden; }
.why-img img { width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .7s var(--ease); }
.why-img:hover img { transform:scale(1.04); }
.why-list { display:flex; flex-direction:column; gap:0; }
.why-item { padding:32px 0; border-bottom:1px solid var(--border); }
.why-item:first-child { border-top:1px solid var(--border); }
.why-item-top { display:flex; align-items:center; gap:18px; margin-bottom:12px; }
.why-ico { width:52px; height:52px; background:var(--red-subtle); color:var(--red); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.why-item h4 { font-size:1.25rem; font-weight:600; }
.why-item p { color:var(--gray); font-size:.98rem; line-height:1.7; padding-left:70px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. TESTIMONIALS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.testimonials {
    padding: clamp(45px, 5vw, 75px) var(--pad);
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.testi-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.testi-quote-mark {
    font-family: var(--heading);
    font-size: 8rem;
    line-height: 1;
    color: var(--red-subtle);
    margin-bottom: -60px;
}
.testi-quote {
    font-family: var(--heading);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 500;
    line-height: 1.4;
    color: var(--charcoal);
    margin-bottom: 32px;
}
.testi-author strong {
    display: block;
    font-family: var(--heading);
    font-size: 1.1rem;
    font-weight: 700;
}
.testi-author span {
    font-size: 0.9rem;
    color: var(--gray);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. MAINTENANCE CARDS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.maint { padding:var(--sy) var(--pad); background:var(--cream); }
.maint-head { max-width:var(--maxw); margin:0 auto 56px; text-align:center; }
.maint-head h2 { font-size:clamp(2.5rem,5vw,3.8rem); }
.maint-head h2 em { font-style:normal; color:var(--red); }
.maint-row { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.maint-card { position:relative; border-radius:24px; overflow:hidden; height:420px; display:flex; align-items:flex-end; }
.maint-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.maint-card:hover img { transform:scale(1.06); }
.maint-card::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 55%); }
.maint-card-body { position:relative; z-index:2; padding:36px; color:var(--white); }
.maint-card h3 { font-size:1.8rem; margin-bottom:8px; color:var(--white); }
.maint-card p { font-size:.92rem; color:rgba(255,255,255,.7); line-height:1.6; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. FINAL CTA
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cta { padding:var(--sy) var(--pad); background:var(--black); text-align:center; position:relative; overflow:hidden; }
.cta::before { content:''; position:absolute; top:-40%; right:-15%; width:500px; height:500px; background:radial-gradient(circle,rgba(204,0,0,.15),transparent 70%); border-radius:50%; }
.cta::after { content:''; position:absolute; bottom:-30%; left:-10%; width:400px; height:400px; background:radial-gradient(circle,rgba(204,0,0,.1),transparent 70%); border-radius:50%; }
.cta-inner { position:relative; z-index:2; max-width:800px; margin:0 auto; }
.cta h2 { font-size:clamp(3rem,6vw,5rem); color:var(--white); margin-bottom:24px; }
.cta p { font-size:1.2rem; color:var(--silver); margin-bottom:48px; line-height:1.7; }
.btn-red { display:inline-flex; align-items:center; gap:12px; padding:22px 52px; background:var(--red); color:var(--white); font-family:var(--heading); font-weight:700; font-size:1rem; text-transform:uppercase; letter-spacing:.08em; border-radius:60px; transition:all .4s var(--ease); border:none; cursor:pointer; }
.btn-red:hover { background:var(--white); color:var(--black); transform:scale(1.04); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ft { background:var(--charcoal); color:var(--white); padding:72px var(--pad) 0; }
.ft-inner { max-width:var(--maxw); margin:0 auto; }
.ft-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:56px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.06); }
.ft-brand img { height:54px; width:auto; max-width:320px; background:#ffffff; padding:8px 20px; border-radius:14px; margin-bottom:20px; display:inline-block; object-fit:contain; box-shadow:0 4px 14px rgba(0,0,0,0.2); }
.ft-brand p { color:var(--silver); font-size:.92rem; max-width:360px; line-height:1.7; }
.ft h4 { font-size:1.05rem; margin-bottom:20px; }
.ft-links { display:flex; flex-direction:column; gap:12px; }
.ft-links a { color:var(--silver); font-size:.92rem; transition:color .3s; }
.ft-links a:hover { color:var(--red); }
.ft-contact li { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; color:var(--silver); font-size:.88rem; }
.ft-contact i { color:var(--red); margin-top:3px; }
.ft-contact a { color:inherit; transition:color .3s; }
.ft-contact a:hover { color:var(--white); }
.ft-bottom { max-width:var(--maxw); margin:0 auto; padding:20px 0; display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:rgba(255,255,255,.3); }
.ft-bottom a { color:rgba(255,255,255,.5); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FLOATING ACTIONS & POPUPS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.fabs { position:fixed; right:22px; bottom:22px; display:flex; flex-direction:column; gap:10px; z-index:900; }
.fab { width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.15); transition:transform .3s var(--ease),box-shadow .3s; }
.fab:hover { transform:scale(1.12) translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.22); }
.fab-call { background:#0033cc; }
.fab-wa { background:#25D366; }
.fab-mail { background:var(--red); }
.fab-pdf { background:var(--red-hover); }

.pop { position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(8px); z-index:2000; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all .35s; }
.pop.on { opacity:1; visibility:visible; }
.pop-card { background:var(--white); width:90%; max-width:470px; padding:44px; border-radius:24px; position:relative; transform:translateY(24px); transition:transform .4s var(--ease); }
.pop.on .pop-card { transform:translateY(0); }
.pop-x { position:absolute; top:16px; right:20px; background:none; border:none; font-size:2rem; cursor:pointer; color:var(--gray); transition:transform .3s; }
.pop-x:hover { transform:rotate(90deg); color:var(--red); }
.pop h3 { font-size:1.5rem; margin-bottom:24px; font-family:var(--heading); }
.pop input, .pop textarea { width:100%; padding:15px; border:1px solid var(--border); border-radius:12px; font-family:var(--body); font-size:.95rem; margin-bottom:12px; background:var(--light); transition:border-color .3s; }
.pop input:focus, .pop textarea:focus { outline:none; border-color:var(--red); }
.pop button[type=submit] { width:100%; padding:16px; background:var(--red); color:var(--white); border:none; border-radius:12px; font-family:var(--heading); font-size:1rem; font-weight:600; cursor:pointer; transition:background .3s; }
.pop button[type=submit]:hover { background:var(--red-hover); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REVEAL HELPERS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.rv { opacity:0; transform:translateY(40px); }
.rv-s { opacity:0; transform:scale(.94); }
.rv-l { opacity:0; transform:translateX(-40px); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE (Mobile & Tablet Optimization)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:1200px){
    .hero { 
        grid-template-columns: 1fr !important; 
        min-height: auto !important; 
        width: 100%;
    }
    .hero-text { 
        width: 100%; 
        padding: 120px var(--pad) 50px; 
    }
    .hero-img { 
        width: 100%; 
        height: 420px; 
        min-height: 420px; 
        position: relative !important; 
    }
}

@media(max-width:1024px){
    .n-links, .n-cta { display:none; }
    .n-burger { display:flex; }
    .about-wrap { grid-template-columns:1fr; gap:40px; }
    .about-img { aspect-ratio:16/9; }
    .showcase-container { grid-template-columns:1fr; gap: 40px; }
    .showcase-preview-frame { position: static !important; top: 0 !important; width: 100%; }
    .process-grid { grid-template-columns:1fr 1fr; gap:36px; }
    .process-line-track { display:none; }
    .why-wrap { grid-template-columns:1fr; gap:40px; }
    .why-item p { padding-left:0; }
    .ft-grid { grid-template-columns:1fr 1fr; }
    .maint-row { grid-template-columns:1fr; }
}

@media(max-width:768px){
    :root {
        --pad: 20px;
        --sy: 60px;
    }
    
    .n-logo img { height: 42px; }
    
    .hero-text { 
        padding: 105px 20px 40px; 
    }
    
    .hero-img { 
        height: 340px; 
        min-height: 340px; 
    }

    .showcase-item, .home-step-item, .cs-showcase-item, .amc-showcase-item {
        grid-template-columns: 45px 1fr !important;
        gap: 12px 14px !important;
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }
    
    .showcase-item .item-action, 
    .home-step-item .item-action,
    .cs-showcase-item .item-action,
    .amc-showcase-item .item-action,
    .cs-showcase-item .cs-item-action,
    .amc-showcase-item .amc-item-action {
        grid-column: 1 / -1 !important;
        margin-top: 8px !important;
        width: 100% !important;
    }
    
    .showcase-item .item-btn,
    .home-step-item .item-btn,
    .cs-showcase-item .cs-item-btn,
    .amc-showcase-item .amc-item-btn,
    .cs-item-btn,
    .amc-item-btn {
        width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 10px 18px !important;
        box-sizing: border-box !important;
    }

    .process-tabs-wrap {
        flex-direction: column;
        width: 100%;
        border-radius: 20px;
        padding: 8px;
    }

    .process-tab-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
    }
    
    .home-preview-card, .cs-showcase-preview-card, .amc-showcase-preview-card {
        width: 100%;
        border-radius: 18px;
        margin-top: 10px;
    }
    
    .home-preview-body, .cs-showcase-preview-body, .amc-showcase-preview-body {
        padding: 20px 18px 24px;
    }
    
    .home-preview-img-wrap, .cs-showcase-preview-img-wrap, .amc-showcase-preview-img-wrap {
        height: 190px;
    }
    
    .process-grid { grid-template-columns:1fr; }
    .ft-grid { grid-template-columns:1fr; gap:36px; }
    .ft-bottom { flex-direction:column; gap:10px; text-align:center; }
    .cinema { height: auto; min-height: 380px; padding: 60px 20px; }
    .maint-card { height:320px; }
    .hfb-1 { bottom:5%; left:10px; scale: 0.85; }
    .hfb-2 { top:5%; right:10px; scale: 0.85; }

    .fabs {
        right: 14px;
        bottom: 14px;
        gap: 8px;
    }
    
    .fab {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .pop-card {
        padding: 30px 20px 24px;
        width: 94%;
        max-height: 88vh;
        overflow-y: auto;
        border-radius: 20px;
    }
}

@media(max-width:480px){
    .hero-text { 
        padding: 95px 16px 36px; 
        text-align: center; 
    }
    .hero-tag {
        justify-content: center;
    }
    .hero-p {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .hero-img {
        height: 280px;
        min-height: 280px;
    }
    .hero-actions { 
        flex-direction: column; 
        width: 100%; 
        gap: 12px; 
        justify-content: center;
    }
    .hero-btn {
        width: 100%;
        justify-content: center;
    }
    .btn-p, .btn-s, .btn-w { width: 100%; text-align: center; justify-content: center; }
    
    .showcase-header h2, .section-tag + h2 {
        font-size: 2rem !important;
    }
    
    .home-preview-body h3 {
        font-size: 1.25rem;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4.1 EXPERTISE SERVICES REDIRECTION SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.expertise-redir-section {
    padding: clamp(48px, 5.5vw, 84px) var(--pad);
    background: #f8f8f6;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
    width: 100%;
}

.expertise-redir-container {
    max-width: var(--maxw);
    margin: 0 auto;
}

.expertise-redir-header {
    margin-bottom: 50px;
}

.expertise-redir-header.text-center {
    text-align: center;
}

.expertise-redir-header h2 {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    margin-top: 10px;
    margin-bottom: 16px;
}

.expertise-redir-header h2 em {
    font-style: normal;
    color: var(--red);
}

.expertise-redir-sub {
    color: var(--gray);
    font-size: 1.05rem;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.7;
}

.expertise-redir-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.expertise-redir-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
    position: relative;
    overflow: hidden;
}

.expertise-redir-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    transition: background 0.4s var(--ease);
}

.expertise-redir-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
    border-color: rgba(204, 0, 0, 0.25);
}

.expertise-redir-card:hover::before {
    background: var(--red);
}

.expertise-card-badge {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--red-subtle);
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 20px;
    transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}

.expertise-redir-card:hover .expertise-card-badge {
    background: var(--red);
    color: var(--white);
    transform: scale(1.08);
}

.expertise-card-tag {
    font-family: var(--heading);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--red);
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.expertise-card-top h3 {
    font-size: 1.65rem;
    color: var(--charcoal);
    margin-bottom: 12px;
}

.expertise-card-top p {
    color: var(--gray);
    font-size: 0.98rem;
    line-height: 1.65;
    margin-bottom: 24px;
}

.expertise-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
}

.expertise-card-features li {
    font-size: 0.92rem;
    color: var(--dark);
    font-weight: 500;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.expertise-card-features li i {
    color: var(--red);
    font-size: 0.9rem;
}

.expertise-card-action {
    margin-top: auto;
}

.expertise-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 28px;
    font-family: var(--heading);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 50px;
    transition: all 0.35s var(--ease);
    text-decoration: none;
}

.expertise-btn i {
    transition: transform 0.3s var(--ease);
}

.expertise-btn:hover i {
    transform: translateX(5px);
}

.btn-red-outline {
    background: transparent;
    color: var(--charcoal);
    border: 2px solid var(--charcoal);
}

.btn-red-outline:hover {
    background: var(--red);
    color: var(--white);
    border-color: var(--red);
}

.btn-red-solid {
    background: var(--red);
    color: var(--white);
    border: 2px solid var(--red);
}

.btn-red-solid:hover {
    background: var(--red-hover);
    border-color: var(--red-hover);
    box-shadow: 0 8px 20px rgba(204, 0, 0, 0.25);
}

@media (max-width: 900px) {
    .expertise-redir-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .expertise-redir-card {
        padding: 30px 22px;
    }
}