/* ═══════════════════════════════════════════════════════════════
   AHINSA DENIM — MOTION ENGINE (shared, site-wide)
   Loaded on every page via includes/header.php, after style.css
   and theme.css. Builds on those files' existing tokens
   (--bg/--bg2/--bg3/--bg4/--text/--text-sub/--text-muted/--border/
   --card-bg/--card-border/--orange/--orange-dim/--gold/--playfair)
   instead of redefining a parallel palette, so every component here
   already flips correctly under [data-theme="light"] with zero
   extra overrides. Only a handful of components below need an
   explicit light-mode rule (glass/translucent surfaces).
═══════════════════════════════════════════════════════════════ */

:root {
    --ease-out:    cubic-bezier(0.22,1,0.36,1);
    --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
}

/* ─── Custom cursor replaces the native one site-wide ─── */
body { cursor: none; }
@media (hover: none) { body { cursor: auto; } }

/* ═══════════════════════════════════════════
   SCROLL PROGRESS BAR
═══════════════════════════════════════════ */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(to right, var(--orange), #f37121, #ffb347);
    z-index: 9999;
    transition: width 0.08s linear;
    box-shadow: 0 0 8px rgba(243,113,33,0.5);
}

/* ═══════════════════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════════════════ */
.cursor-dot {
    position: fixed;
    width: 8px; height: 8px;
    background: var(--orange);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%,-50%);
    transition: transform 0.05s, width 0.25s var(--ease-spring), height 0.25s var(--ease-spring), opacity 0.25s;
    will-change: left, top;
}
.cursor-ring {
    position: fixed;
    width: 36px; height: 36px;
    border: 1.5px solid rgba(243,113,33,0.55);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9997;
    transform: translate(-50%,-50%);
    transition: left 0.14s var(--ease-out), top 0.14s var(--ease-out),
                width 0.3s var(--ease-spring), height 0.3s var(--ease-spring),
                border-color 0.3s, opacity 0.3s;
    will-change: left, top;
}
.cursor-dot.hover  { width: 12px; height: 12px; background: #fff; }
.cursor-ring.hover { width: 56px; height: 56px; border-color: var(--orange); }
.cursor-dot.click  { transform: translate(-50%,-50%) scale(0.5); }
.cursor-ring.click { transform: translate(-50%,-50%) scale(0.85); }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* ═══════════════════════════════════════════
   GRAIN TEXTURE OVERLAY  (add class="grain-wrap" to any section)
═══════════════════════════════════════════ */
.grain-wrap::after {
    content: '';
    position: fixed;
    inset: -50%;
    width: 200%; height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-size: 180px;
    opacity: 0.028;
    pointer-events: none;
    z-index: 9996;
    animation: grainShift 0.4s steps(1) infinite;
}
@keyframes grainShift {
    0%   { transform: translate(0,0); }
    20%  { transform: translate(-3%,-4%); }
    40%  { transform: translate(-5%, 2%); }
    60%  { transform: translate( 4%,-3%); }
    80%  { transform: translate( 2%, 4%); }
    100% { transform: translate(-4%, 1%); }
}

/* ═══════════════════════════════════════════
   SECTION HEADING — upgrade shared .section-title to Playfair,
   upgrade shared .section-divider to a scroll-reveal animated line
   (both classes already used site-wide via style.css)
═══════════════════════════════════════════ */
.section-title { font-family: var(--playfair); letter-spacing: -0.02em; }
.section-divider {
    width: 56px; height: 1px;
    background: linear-gradient(to right, transparent, var(--orange), transparent);
    margin: 0 auto 1.5rem;
    opacity: 0;
    border-radius: 0;
    transition: opacity 0.8s var(--ease-out), width 0.8s var(--ease-out);
}
.section-divider.visible { opacity: 1; width: 80px; }

/* ═══════════════════════════════════════════
   DATA-REVEAL SCROLL ANIMATIONS
═══════════════════════════════════════════ */
[data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
[data-reveal].visible { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="1"] { transition-delay: 0.1s; }
[data-reveal][data-delay="2"] { transition-delay: 0.2s; }
[data-reveal][data-delay="3"] { transition-delay: 0.3s; }

/* ═══════════════════════════════════════════
   3D TILT SUPPORT  (JS applies the transform; these keep it crisp)
═══════════════════════════════════════════ */
.counter-card, .contact-cta-box, .lux-card, .metric-card, [data-tilt], .feature-card {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ═══════════════════════════════════════════
   FEATURE CARD  (spotlight + tilt)
═══════════════════════════════════════════ */
.feature-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.4s, border-color 0.4s;
    text-decoration: none;
    display: block;
    cursor: none;
}
.feature-card .spotlight {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(243,113,33,0.12) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.feature-card:hover .spotlight { opacity: 1; }
.feature-card:hover {
    border-color: rgba(243,113,33,0.2);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 30px rgba(243,113,33,0.06);
}
.feature-card-icon {
    width: 52px; height: 52px;
    background: var(--orange-dim);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--orange);
    margin-bottom: 1.5rem;
    transition: transform 0.4s var(--ease-spring), background 0.3s;
}
.feature-card:hover .feature-card-icon { transform: scale(1.1) rotate(-8deg); background: rgba(243,113,33,0.18); }
.feature-card-title {
    font-family: var(--playfair);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.65rem;
    transition: color 0.3s;
}
.feature-card-desc { font-size: 0.82rem; color: var(--text-sub); line-height: 1.7; margin-bottom: 1.25rem; }
.feature-card-link {
    font-size: 0.68rem;
    color: var(--orange);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: gap 0.3s var(--ease-spring);
}
.feature-card:hover .feature-card-link { gap: 0.7rem; }
.feature-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0%; height: 2px;
    background: var(--orange);
    transition: width 0.4s var(--ease-out);
}
.feature-card:hover::after { width: 100%; }
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    gap: 1.25rem;
    max-width: 1280px;
    margin: 0 auto;
    perspective: 1200px;
}
.features-section {
    padding: 7rem 2rem;
    background: var(--bg3);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

/* ═══════════════════════════════════════════
   SUSTAINABILITY / METRIC COUNTERS
═══════════════════════════════════════════ */
.sustain-section {
    padding: 7rem 2rem;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    position: relative;
}
.sustain-section::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 80vw; height: 50vw;
    background: radial-gradient(ellipse, rgba(243,113,33,0.04) 0%, transparent 70%);
    pointer-events: none;
}
.counter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
    perspective: 1000px;
}
.counter-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-top: 3px solid var(--orange);
    padding: 3rem 2rem;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.4s;
    position: relative;
    overflow: hidden;
}
.counter-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 120%, rgba(243,113,33,0.08) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
}
.counter-card:hover::before { opacity: 1; }
.counter-icon {
    width: 56px; height: 56px;
    background: var(--orange-dim);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.5rem;
    color: var(--orange);
    transition: transform 0.4s var(--ease-spring);
}
.counter-card:hover .counter-icon { transform: scale(1.12) rotate(-5deg); }
.counter-number {
    font-family: var(--playfair);
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--orange);
    line-height: 1;
    margin-bottom: 0.4rem;
}
.counter-label {
    color: var(--text);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.counter-desc { color: var(--text-muted); font-size: 0.82rem; line-height: 1.65; }

/* ═══════════════════════════════════════════
   TIMELINE  (journey-through-years component)
═══════════════════════════════════════════ */
.timeline-section {
    background: var(--bg);
    padding: 7rem 0;
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.timeline-section::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 70vw; height: 50vw;
    background: radial-gradient(ellipse, rgba(243,113,33,0.04) 0%, transparent 70%);
    pointer-events: none;
}
.timeline-inner { max-width: 1140px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 2; }
.timeline-track { position: relative; display: flex; justify-content: space-between; gap: 1.2rem; padding-top: 1.8rem; margin-top: 3rem; }
.timeline-rail {
    position: absolute;
    top: 2.2rem; left: 2%; right: 2%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(243,113,33,0.5) 20%, rgba(243,113,33,0.5) 80%, transparent);
}
.timeline-item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.timeline-item.active .timeline-card { border-color: rgba(243,113,33,0.4); background: rgba(243,113,33,0.06); }
.timeline-item.active .timeline-dot { width: 18px; height: 18px; box-shadow: 0 0 0 5px rgba(243,113,33,0.2), 0 0 20px rgba(243,113,33,0.4); }
.timeline-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--orange);
    border: 2px solid var(--bg);
    box-shadow: 0 0 0 3px rgba(243,113,33,0.25);
    margin-bottom: 1.4rem;
    flex-shrink: 0;
    transition: transform 0.3s;
}
.timeline-dot.future { background: var(--bg3); border-color: rgba(243,113,33,0.4); box-shadow: 0 0 0 3px rgba(243,113,33,0.12); }
.timeline-item:hover .timeline-dot { transform: scale(1.4); }
.timeline-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 1.3rem 1rem;
    width: 100%;
    transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
    cursor: default;
}
.timeline-card:hover { background: rgba(243,113,33,0.05); border-color: rgba(243,113,33,0.28); transform: translateY(-6px); }
.tl-year { display: block; font-family: var(--playfair); font-size: 1.55rem; font-weight: 900; color: var(--orange); line-height: 1; margin-bottom: 0.55rem; }
.timeline-card h3 { font-size: 0.78rem; font-weight: 600; color: var(--text); margin: 0 0 0.6rem; letter-spacing: 0.01em; line-height: 1.3; }
.timeline-card p { font-size: 0.7rem; color: var(--text-sub); line-height: 1.65; margin: 0; }
@media (max-width: 900px) {
    .timeline-track { flex-direction: column; gap: 1.5rem; }
    .timeline-rail { display: none; }
    .timeline-item { flex-direction: row; align-items: flex-start; text-align: left; gap: 1rem; }
    .timeline-dot { margin-bottom: 0; margin-top: 0.3rem; flex-shrink: 0; }
    .timeline-card { flex: 1; }
}

/* ═══════════════════════════════════════════
   SLIDER / CAROUSEL
═══════════════════════════════════════════ */
.slider-section { padding: 6rem 0; background: var(--bg2); border-top: 1px solid var(--border); }
.slider-track-wrap { position: relative; }
.slider-scroll {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding: 1.5rem 5vw 2.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}
.slider-scroll::-webkit-scrollbar { display: none; }
.slider-scroll:active { cursor: grabbing; }
.slide-card {
    flex-shrink: 0;
    width: 290px;
    aspect-ratio: 3/4;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
    transition: transform 0.5s var(--ease-spring), box-shadow 0.5s;
    transform-origin: bottom center;
    transform-style: preserve-3d;
    perspective: 800px;
}
.slide-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 30px rgba(243,113,33,0.1); z-index: 2; }
.slide-card-img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; transition: transform 0.7s var(--ease-out); }
.slide-card:hover .slide-card-img { transform: scale(1.06); }
.slide-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 35%, rgba(0,0,0,0.15) 100%);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem;
    transition: background 0.4s;
}
.slide-card:hover .slide-card-overlay { background: linear-gradient(to top, rgba(0,0,0,0.95) 45%, rgba(0,0,0,0.1) 100%); }
.slide-card-tag { display: inline-block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.4rem; }
.slide-card-title { font-family: var(--playfair); font-size: 1.15rem; color: #fff; font-weight: 700; line-height: 1.2; margin-bottom: 0.4rem; }
.slide-card-desc {
    font-size: 0.78rem; color: rgba(255,255,255,0.55); line-height: 1.5; margin-bottom: 0.8rem;
    max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out), opacity 0.4s; opacity: 0;
}
.slide-card:hover .slide-card-desc { max-height: 80px; opacity: 1; }
.slide-read-more {
    display: inline-flex; align-items: center; gap: 0.35rem; color: var(--orange);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
    opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s var(--ease-spring);
}
.slide-card:hover .slide-read-more { opacity: 1; transform: translateY(0); }
.slide-card.landscape { width: 360px; aspect-ratio: 16/10; }
.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(10,10,12,0.85); border: 1px solid var(--border); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: none;
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
    backdrop-filter: blur(12px);
}
.slider-arrow:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-50%) scale(1.1); }
.slider-arrow.prev { left: 1.5rem; }
.slider-arrow.next { right: 1.5rem; }
[data-theme="light"] .slider-arrow { background: rgba(245,245,247,0.92); border-color: rgba(0,0,0,0.12); color: #1c1c2e; }
[data-theme="light"] .slider-arrow:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
@media (max-width: 768px) { .slide-card { width: 250px; } .slide-card.landscape { width: 310px; } }
@media (max-width: 600px) { .slider-arrow { display: none; } }

/* ═══════════════════════════════════════════
   DENIM SHOWCASE GRID  (3D hover bento grid)
═══════════════════════════════════════════ */
.denim-showcase-section { padding: 7rem 2rem; background: var(--bg); overflow: hidden; position: relative; }
.denim-showcase-header { text-align: center; max-width: 720px; margin: 0 auto 4rem; }
.denim-types-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 280px 280px;
    gap: 12px;
    max-width: 1360px;
    margin: 0 auto;
    perspective: 1400px;
}
.denim-type-card {
    position: relative; border-radius: 6px; overflow: hidden; cursor: none;
    border: 1px solid var(--card-border);
    transition: transform 0.5s var(--ease-out), box-shadow 0.5s, border-color 0.4s, z-index 0s;
    transform-style: preserve-3d; will-change: transform;
}
.denim-type-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(243,113,33,0.12); border-color: rgba(243,113,33,0.25); z-index: 2; }
.denim-type-card.featured { grid-column: span 2; grid-row: span 2; }
.denim-type-card.wide     { grid-column: span 2; }
.denim-type-img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; transition: transform 0.8s var(--ease-out); }
.denim-type-card:hover .denim-type-img { transform: scale(1.06); }
.denim-type-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.1) 100%);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; transition: background 0.4s;
}
.denim-type-card.featured .denim-type-overlay { background: linear-gradient(to top, rgba(0,0,0,0.88) 30%, rgba(0,0,0,0.1) 100%); padding: 2rem; }
.denim-type-card:hover .denim-type-overlay { background: linear-gradient(to top, rgba(0,0,0,0.94) 40%, rgba(0,0,0,0.05) 100%); }
.denim-type-badge { display: inline-block; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.35rem; }
.denim-type-name { font-family: var(--playfair); font-size: 1rem; color: #fff; font-weight: 700; line-height: 1.2; margin-bottom: 0; transition: margin-bottom 0.3s; }
.denim-type-card.featured .denim-type-name { font-size: 2rem; margin-bottom: 0.5rem; }
.denim-type-card:hover .denim-type-name { margin-bottom: 0.5rem; }
.denim-type-desc {
    font-size: 0.78rem; color: rgba(255,255,255,0.55); line-height: 1.5;
    max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.45s var(--ease-out), opacity 0.4s;
}
.denim-type-card:hover .denim-type-desc,
.denim-type-card.featured .denim-type-desc { max-height: 100px; opacity: 1; }
.denim-type-link {
    display: inline-flex; align-items: center; gap: 0.3rem; color: var(--orange);
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none;
    margin-top: 0.75rem; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s var(--ease-spring);
}
.denim-type-card:hover .denim-type-link,
.denim-type-card.featured .denim-type-link { opacity: 1; transform: translateY(0); }
.denim-spec-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; }
.denim-spec-tag {
    font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    background: rgba(243,113,33,0.12); border: 1px solid rgba(243,113,33,0.25); color: var(--orange);
    padding: 0.25rem 0.65rem; border-radius: 4px;
}
@media (max-width: 1024px) {
    .denim-types-grid { grid-template-columns: repeat(2,1fr); grid-template-rows: auto; }
    .denim-type-card.featured, .denim-type-card.wide { grid-column: span 1; grid-row: span 1; }
    .denim-type-card.featured .denim-type-name { font-size: 1.2rem; }
}
@media (max-width: 768px) { .denim-types-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .denim-types-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════
   QUALITY / R&D STRIP
═══════════════════════════════════════════ */
.quality-strip { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.quality-strip-panel { padding: 5rem 4vw; border-right: 1px solid var(--border); border-top: 3px solid var(--orange); position: relative; overflow: hidden; transition: background 0.4s; }
.quality-strip-panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 50%, rgba(243,113,33,0.04) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s; }
.quality-strip-panel:hover::before { opacity: 1; }
.quality-strip-panel:last-child { border-right: none; }
.strip-icon { font-size: 2.2rem; color: var(--orange); margin-bottom: 1.5rem; display: inline-block; transition: transform 0.4s var(--ease-spring); }
.quality-strip-panel:hover .strip-icon { transform: scale(1.15) rotate(-5deg); }
.strip-title { font-family: var(--playfair); font-size: 1.7rem; color: var(--text); font-weight: 700; margin-bottom: 0.75rem; }
.strip-desc { color: var(--text-sub); font-size: 0.9rem; line-height: 1.75; margin-bottom: 1.75rem; }
.strip-ul { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; }
.strip-ul li { color: var(--text-sub); font-size: 0.84rem; padding-left: 1.4rem; position: relative; transition: color 0.25s, padding-left 0.25s; }
.strip-ul li::before { content: '→'; position: absolute; left: 0; color: var(--orange); transition: left 0.25s; }
.strip-ul li:hover { color: var(--text); padding-left: 1.8rem; }
.strip-ul li:hover::before { left: 0.2rem; }
@media (max-width: 1024px) {
    .quality-strip { grid-template-columns: 1fr; }
    .quality-strip-panel { border-right: none; border-bottom: 1px solid var(--border); }
    .quality-strip-panel:last-child { border-bottom: none; }
}

/* ═══════════════════════════════════════════
   CSR BANNER  (parallax image band)
═══════════════════════════════════════════ */
.csr-banner { position: relative; min-height: 480px; overflow: hidden; display: flex; align-items: center; }
.csr-banner img { position: absolute; inset: 0; width: 100%; height: 110%; top: -5%; object-fit: cover; will-change: transform; }
.csr-banner-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,10,12,0.96) 38%, rgba(10,10,12,0.7) 65%, rgba(10,10,12,0.25) 100%); }
.csr-content { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 5rem 5vw; width: 100%; }
.csr-stats { display: flex; gap: 3.5rem; flex-wrap: wrap; margin-top: 2.5rem; }
.csr-stat-num { font-family: var(--playfair); font-size: 2.8rem; font-weight: 900; color: var(--orange); line-height: 1; transition: transform 0.3s var(--ease-spring); }
.csr-stat-num:hover { transform: scale(1.08); }
.csr-stat-label { font-size: 0.72rem; color: rgba(255,255,255,0.6); margin-top: 0.3rem; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 768px) { .csr-stats { gap: 2rem; } }

/* ═══════════════════════════════════════════
   CONTACT CTA  (glassmorphism card)
═══════════════════════════════════════════ */
.contact-cta { padding: 7rem 2rem; text-align: center; background: var(--bg2); position: relative; overflow: hidden; }
.contact-cta::before {
    content: ''; position: absolute; bottom: -20%; left: 50%; transform: translateX(-50%);
    width: 60vw; height: 40vw; background: radial-gradient(ellipse, rgba(243,113,33,0.07) 0%, transparent 70%); pointer-events: none;
}
.contact-cta-box {
    max-width: 680px; margin: 0 auto;
    background: rgba(30,30,34,0.65);
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 2px solid rgba(243,113,33,0.5);
    border-radius: 8px; padding: 4rem 3.5rem;
    backdrop-filter: blur(24px);
    position: relative; z-index: 2;
    transition: transform 0.15s, box-shadow 0.4s;
}
.contact-cta-box:hover { box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 40px rgba(243,113,33,0.08); }
[data-theme="light"] .contact-cta-box { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.1); }
@media (max-width: 768px) { .contact-cta-box { padding: 3rem 2rem; } }

/* ═══════════════════════════════════════════
   LINK + KEYFRAMES
═══════════════════════════════════════════ */
.link-orange {
    display: inline-flex; align-items: center; gap: 0.4rem; color: var(--orange);
    font-size: 0.82rem; font-weight: 600; text-decoration: none; letter-spacing: 0.06em;
    text-transform: uppercase; transition: gap 0.3s var(--ease-spring);
}
.link-orange:hover { gap: 0.9rem; }

.btn-ghost-hero {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 2rem;
    border: 1px solid rgba(255,255,255,0.22); border-radius: 100px; color: #fff;
    font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; text-decoration: none;
    background: rgba(255,255,255,0.04); backdrop-filter: blur(12px);
    transition: background 0.35s, border-color 0.35s, color 0.35s, transform 0.2s;
    cursor: none; position: relative; overflow: hidden;
}
.btn-ghost-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% -20%, rgba(243,113,33,0.2), transparent 70%);
    opacity: 0; transition: opacity 0.4s;
}
.btn-ghost-hero:hover { border-color: var(--orange); color: var(--orange); }
.btn-ghost-hero:hover::before { opacity: 1; }
.btn-primary-hero {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 2rem;
    border: 1px solid var(--orange); border-radius: 100px; color: #fff;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-decoration: none;
    background: var(--orange); transition: background 0.3s, transform 0.2s, box-shadow 0.3s; cursor: none;
}
.btn-primary-hero:hover { background: #e05c10; box-shadow: 0 8px 32px rgba(243,113,33,0.4); color: #fff; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }