/*
 * Resonate Solution - UI polish layer.
 * Loaded AFTER the inline styles in link.php. Visual refinement only: same colours (#f37321 / #0e1b1f family),
 * same fonts, same content. Remove the <link> to this file to return to the previous look.
 */

:root {
    --rs-orange: #f37321;
    --rs-dark: #0e1b1f;
    --rs-ease: cubic-bezier(.22, .61, .36, 1);
    --rs-shadow-sm: 0 2px 6px rgba(14, 27, 31, .08), 0 6px 16px rgba(14, 27, 31, .06);
    --rs-shadow-md: 0 10px 30px rgba(14, 27, 31, .16);
    --rs-shadow-glow: 0 14px 36px rgba(243, 115, 33, .28);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html, body { max-width: 100%; overflow-x: clip; }
img { max-width: 100%; }
::selection { background: var(--rs-orange); color: #fff; }
:focus-visible { outline: 2px solid var(--rs-orange); outline-offset: 3px; border-radius: 6px; }
a { transition: color .25s var(--rs-ease), background-color .25s var(--rs-ease), opacity .25s var(--rs-ease); }
main section { position: relative; }
h1, h2, h3 { letter-spacing: -.01em; text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- Scroll progress ---------- */
.rs-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 1000;
    background: linear-gradient(90deg, var(--rs-orange), #ffb27a);
    transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* ---------- Header ---------- */
header#header { transition: background-color .35s var(--rs-ease), box-shadow .35s var(--rs-ease), backdrop-filter .35s; }
header#header.bg-white {
    background-color: rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 6px 24px rgba(14, 27, 31, .10) !important;
    border-bottom-color: rgba(14, 27, 31, .06);
}
#top-nav { transition: transform .35s var(--rs-ease), opacity .35s var(--rs-ease); }
#logo-link .logo-icon img { transition: transform .5s var(--rs-ease); }
#logo-link:hover .logo-icon img { transform: rotate(-6deg) scale(1.06); }

.navbar .nav-link { position: relative; font-weight: 500; transition: color .25s var(--rs-ease); }
@media (min-width: 992px) {
    .navbar .nav-link::before {
        content: ""; position: absolute; left: 50%; bottom: 4px; width: 0; height: 2px;
        background: var(--rs-orange); border-radius: 2px;
        transform: translateX(-50%); transition: width .3s var(--rs-ease);
    }
    .navbar .nav-link:hover::before { width: 56%; }
}

.dropdown-menu {
    border: 0; border-radius: 14px; box-shadow: var(--rs-shadow-md); overflow: hidden;
    animation: rs-drop .28s var(--rs-ease) both;
}
.nav-item.dropdown-2 .dropdown-menu { border-radius: 0 0 18px 18px; border-top: 3px solid var(--rs-orange); }
.dropdown-item { transition: background-color .2s var(--rs-ease), color .2s var(--rs-ease), padding-left .2s var(--rs-ease); }
.dropdown-item:hover { padding-left: 1.4rem; }
.dropdown-list a { transition: color .2s var(--rs-ease), transform .2s var(--rs-ease); display: inline-block; }
.dropdown-list a:hover { transform: translateX(4px); }
@keyframes rs-drop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 991.98px) {
    .navbar-collapse { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 120px !important; }
    .navbar .nav-link { padding: 14px 4px !important; font-size: 1.05rem; }
    .navbar-toggler { transition: transform .25s var(--rs-ease); }
    .navbar-toggler:active { transform: scale(.9); }
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 999px; font-weight: 500; letter-spacing: .01em;
    transition: transform .25s var(--rs-ease), box-shadow .25s var(--rs-ease), background .35s var(--rs-ease), color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-3d, .btn-warning, .btn-dark.btn-3d { position: relative; overflow: hidden; box-shadow: 0 6px 18px rgba(14, 27, 31, .22); }
.btn-3d:hover, .btn-warning:hover { box-shadow: var(--rs-shadow-glow); }
.btn-3d::after {
    content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-20deg); transition: left .6s var(--rs-ease); pointer-events: none;
}
.btn-3d:hover::after { left: 130%; }
.btn-outline-warning:hover { box-shadow: var(--rs-shadow-glow); }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: 12px; transition: border-color .25s var(--rs-ease), box-shadow .25s var(--rs-ease), transform .25s var(--rs-ease);
}
.form-control:focus, .form-select:focus {
    border-color: var(--rs-orange); box-shadow: 0 0 0 .22rem rgba(243, 115, 33, .22);
}
.form-label { font-weight: 500; }
.alert { border-radius: 12px; border: 0; box-shadow: var(--rs-shadow-sm); animation: rs-drop .4s var(--rs-ease) both; }

/* ---------- Cards ---------- */
.card { transition: transform .4s var(--rs-ease), box-shadow .4s var(--rs-ease), border-color .4s var(--rs-ease), background .4s; }
#services .card, #work .card, #serve .card {
    will-change: transform;
}
#services .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 0 1px rgba(243, 115, 33, .55), 0 22px 44px rgba(0, 0, 0, .55), 0 0 40px rgba(243, 115, 33, .18);
}
#services .card::before { opacity: .7; }
#services .card:hover::before { opacity: 1; box-shadow: inset 0 0 0 .06rem rgba(243, 115, 33, .5); }
#services .card img { transition: transform .5s var(--rs-ease); }
#services .card:hover img { transform: translateY(-4px) scale(1.08); }

#serve .card { box-shadow: var(--rs-shadow-sm); transition: transform .4s var(--rs-ease), box-shadow .4s var(--rs-ease), border-color .3s; }
#serve .card:hover { transform: translateY(-8px); box-shadow: 0 18px 38px rgba(243, 115, 33, .22); border-color: rgba(243, 115, 33, .45); }
#serve .card img { transition: transform .45s var(--rs-ease); }
#serve .card:hover img { transform: scale(1.1); }

#work .card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(243, 115, 33, .5), 0 20px 40px rgba(0, 0, 0, .5); }
#work .card-img { transition: transform .45s var(--rs-ease); }
#work .card:hover .card-img { transform: scale(1.1) rotate(-3deg); }

#blog .card, #sub-services .card, .cardD1 .card { box-shadow: var(--rs-shadow-sm); border-color: rgba(14, 27, 31, .08); }
#blog .card:hover, #sub-services .card:hover, .cardD1 .card:hover { transform: translateY(-6px); box-shadow: var(--rs-shadow-md); }
#blog .card img { transition: transform .6s var(--rs-ease); }
#blog .card:hover img { transform: scale(1.06); }

/* Quick Enquiry and other form cards: soften, don't lift */
.card:has(form):hover { transform: none; }

/* ---------- Images & marquee ---------- */
.marquee-item img { transition: transform .35s var(--rs-ease), filter .35s var(--rs-ease); }
.marquee-item img:hover { transform: scale(1.12); }
.man img { filter: drop-shadow(0 18px 28px rgba(14, 27, 31, .22)); }
main section .row > [class*="col-"] > img { transition: transform .6s var(--rs-ease); }
.home-links img { transition: transform .4s var(--rs-ease); }

/* ---------- Footer ---------- */
footer { position: relative; }
footer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--rs-orange), transparent);
}
footer ul li a { display: inline-block; transition: color .25s var(--rs-ease), transform .25s var(--rs-ease); }
footer ul li a:hover { transform: translateX(5px); }
footer h5 { position: relative; padding-bottom: 10px; }
footer h5::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px;
    background: var(--rs-orange); border-radius: 2px;
}
footer iframe { border-radius: 16px !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }

.so-links ul li a { display: inline-block; transition: transform .25s var(--rs-ease), color .25s; }
.so-links ul li a:hover { transform: scale(1.22); color: #fff; }
.so-links { box-shadow: -6px 6px 24px rgba(0, 0, 0, .28); }

/* ---------- Reveal on scroll (classes added by polish.js) ---------- */
.rs-reveal {
    opacity: 0; transform: translateY(26px);
    transition: opacity .7s var(--rs-ease), transform .7s var(--rs-ease);
    transition-delay: var(--rs-d, 0s);
}
.rs-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive refinements ---------- */
@media (max-width: 767.98px) {
    main section { overflow-x: clip; }
    .card { border-radius: 24px; }
    #services .card:hover, #serve .card:hover, #work .card:hover, #blog .card:hover { transform: none; }
    .btn { padding-top: .6rem; padding-bottom: .6rem; }
    body { padding-bottom: 62px; }          /* room for the fixed mobile action bar */
    .so-links { box-shadow: 0 -6px 20px rgba(0, 0, 0, .25); }
}

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
    .rs-reveal { opacity: 1; transform: none; }
    .marquee-inner { animation: none !important; }
}