/* ==========================================================================
   Theme polish: charcoal + copper. Kept last so it styles every page.
   ========================================================================== */
::selection { background: #ffd9bf; color: var(--ink); }
body { background: #fcfaf7; -webkit-font-smoothing: antialiased; }
h1, h2 { font-weight: 800; letter-spacing: -.03em; }
h3 { font-weight: 700; letter-spacing: -.01em; }

/* Header: frosted charcoal with a copper hairline */
.site-header { background: rgba(20, 26, 34, .92); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 0; box-shadow: 0 10px 30px -18px rgba(0,0,0,.6); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, #e8743a 30%, #ffb547 70%, transparent); opacity: .85; }
.brand-logo { filter: drop-shadow(0 6px 12px rgba(232,116,58,.35)); transition: transform .3s; }
.brand:hover .brand-logo { transform: rotate(-12deg) scale(1.05); }
.brand-name { font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.nav-list a { color: #d5dbe2; font-weight: 600; font-size: .93rem; padding: .5em .8em; border-radius: 999px; transition: background-color .2s, color .2s; }
.nav-list a:hover { background: rgba(255,154,92,.14); color: #fff; }
.nav-list a[aria-current="page"] { background: rgba(255,154,92,.18); color: #ffc49e; box-shadow: none; border-radius: 999px; }
@media (max-width: 1260px) {
  /* backdrop-filter would trap the fixed full-screen menu inside the header box */
  .site-header { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-nav { background: var(--ink); }
  .nav-list a { border-radius: 0; padding: 14px 4px; font-size: 1.1rem; }
  .nav-list a[aria-current="page"] { background: transparent; box-shadow: inset 4px 0 0 var(--green-bright); border-radius: 0; padding-left: 16px; }
}

/* Buttons: pill shape, depth and a gentle lift */
.btn { border-radius: 999px; font-weight: 700; letter-spacing: -.005em; transition: transform .2s, box-shadow .2s, background-color .2s, border-color .2s, color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-quote { background: var(--grad-amber); color: var(--ink); box-shadow: 0 10px 24px -10px rgba(255,157,58,.8); }
.btn-quote:hover { background: linear-gradient(135deg, #ffd38a, #ffab4f); color: var(--ink); box-shadow: 0 14px 30px -10px rgba(255,157,58,.9); }
.btn-wa { box-shadow: 0 10px 24px -12px rgba(22,163,74,.75); }
.btn-call { box-shadow: 0 10px 24px -14px rgba(20,26,34,.7); }
.btn-outline { color: var(--green-d); border-color: #e9c9b3; background: transparent; }
.page-service .content-aside > .aside-card:first-child .btn-outline, .page-area .content-aside .btn-outline, .page-faq .aside-card .btn-outline, .about-contact-card .btn-outline { color: #f3f5f8; border-color: rgba(255,255,255,.35); }
.page-service .content-aside > .aside-card:first-child .btn-outline:hover, .page-area .content-aside .btn-outline:hover, .page-faq .aside-card .btn-outline:hover, .about-contact-card .btn-outline:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-outline:hover { background: var(--green); border-color: var(--green); color: #fff; }

/* Hero: charcoal over the yard photo, with a warm copper glow */
.hero { background:
  radial-gradient(900px 500px at 85% 20%, rgba(232,116,58,.28), transparent 60%),
  linear-gradient(90deg, rgba(16,21,28,.96), rgba(16,21,28,.80) 45%, rgba(16,21,28,.30)),
  linear-gradient(0deg, rgba(16,21,28,.7), transparent 60%),
  url('../images/mumbai-scrap-yard-hero.png') center / cover; }
.hero::after { height: 3px; background: linear-gradient(90deg, #e8743a, #ffb547, transparent); }
.hero h1 { font-weight: 800; letter-spacing: -.045em; }
.hero h1 > span, .page-hero--area h1, .page-hero--service h1,
.about-hero h1 > span, .areas-hero h1 > span, .contact-hero h1 > span,
.faq-hero h1 > span, .services-hero h1 > span {
  background: linear-gradient(100deg, #ff9a5c 0%, #ffc76b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-eyebrow { color: #ffd2b3; }
.home-eyebrow > span { background: #ff9a5c; box-shadow: 0 0 0 5px rgba(255,154,92,.22); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(255,154,92,0); } }
.hero-benefits .icon, .hero-areas .icon { color: #ff9a5c; }
.hero .btn-quote { background: var(--grad-amber); color: var(--ink); }
.hero .btn-quote:hover { background: linear-gradient(135deg, #ffd38a, #ffab4f); }
.hero .btn-call { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-copy > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) backwards; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(n+5) { animation-delay: .32s; }
.hero .slip { animation: rise .8s .2s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Pickup slip */
/* Copper top bar is a background layer so the card's rounded corners clip it */
.slip { background: linear-gradient(90deg, #e8743a, #ffb547) top / 100% 5px no-repeat, #fff; border: 1px solid rgba(255,255,255,.8); border-radius: 24px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.55); }
.slip-eyebrow { color: var(--green-d); }
.slip-chip span { border-radius: 999px; padding: 8px 14px; border-color: var(--line); }
.slip-chip:hover span { border-color: var(--green); background: var(--green-soft); }
.slip-chip input:checked + span { background: var(--grad-copper); border-color: transparent; color: #fff; box-shadow: 0 6px 14px -6px rgba(194,84,28,.7); }
.slip select, .slip input[type="text"] { border-radius: 12px; border-color: var(--line); background: #fdfbf8; }

/* Highlights strip */
.highlights { background: #fff; box-shadow: 0 12px 30px -24px rgba(20,26,34,.5); position: relative; }
.highlight-list .icon { box-sizing: content-box; width: 22px; height: 22px; padding: 9px; border-radius: 12px; background: var(--green-soft); color: var(--green); }

/* Section titles and eyebrows */
.section-title { font-weight: 800; letter-spacing: -.035em; }
.category-eyebrow, .services-eyebrow, .areas-eyebrow, .contact-eyebrow, .about-eyebrow, .ac-section-eyebrow, .area-editorial-label { display: flex; align-items: center; gap: 10px; color: var(--green-d) !important; font-weight: 700 !important; }
.category-eyebrow::before, .services-eyebrow::before, .areas-eyebrow::before, .contact-eyebrow::before, .about-eyebrow::before, .ac-section-eyebrow::before, .area-editorial-label::before { content: ""; flex-shrink: 0; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #e8743a, #ffb547); }
.home-process .process-heading .category-eyebrow { justify-content: center; }
.section--ink .category-eyebrow, .home-cta .category-eyebrow,
.services-hero .services-eyebrow, .areas-hero .areas-eyebrow, .contact-hero .contact-eyebrow, .about-hero .about-eyebrow, .faq-eyebrow { color: #ffc49e !important; }
.feature-kicker { color: var(--green-d) !important; font-weight: 700 !important; }

/* Cards: soft depth, copper on hover */
.cat-card, .service-card, .area-card, .home-why .why-item, .faq-item, .mini-cat, .band-links a, .link-list a { transition: transform .25s, box-shadow .25s, border-color .25s, background-color .25s; }
.cat-card, .service-card--photo { border-color: var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.cat-card:hover, .cat-card:focus-visible, .service-card--photo:hover, .service-card--photo:focus-visible { border-color: #f0b892; box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.cat-action, .service-photo-action { color: var(--green-d); }
.cat-card:hover .cat-action > span, .service-card--photo:hover .service-photo-action > span { background: var(--grad-copper); color: #fff; }
.cat-photo-icon { background: #fff; color: var(--green); }
.service-card-icon { background: var(--ink); color: var(--green-bright); }
a.service-card:hover { border-color: #f0b892; }
.home-why .why-item { background: #fff; border-color: var(--line); }
.home-why .why-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #f0c7aa; }
.home-why .why-item > .icon { background: var(--grad-copper); color: #fff; }

/* How it works */
.section--ink { background: radial-gradient(800px 400px at 15% 0%, rgba(232,116,58,.18), transparent 60%), var(--ink); }
.home-process { background: radial-gradient(800px 420px at 50% 0%, rgba(232,116,58,.22), transparent 65%), linear-gradient(105deg, rgba(16,21,28,.96), rgba(16,21,28,.9)), url('../images/mumbai-scrap-yard-hero.png') center / cover; }
.home-process .step { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); transition: transform .25s, border-color .25s; }
.home-process .step:hover { transform: translateY(-4px); border-color: rgba(255,154,92,.45); }
.home-process .step::before { background: var(--grad-amber); color: var(--ink); box-shadow: 0 8px 20px -8px rgba(255,157,58,.8); }
.home-process .steps::before { border-top-color: rgba(255,154,92,.4); }
.process-footer .btn { background: var(--wa); color: #fff; }
.process-footer .btn:hover { background: var(--wa-d); color: #fff; }

/* CTA band */
.cta-band { background: radial-gradient(700px 300px at 100% 0%, rgba(255,181,71,.22), transparent 60%), linear-gradient(120deg, #1d2530 0%, #141a22 55%, #3a2116 100%); }
.home-cta { background: transparent; }
.home-cta .cta-band-inner { background: linear-gradient(90deg, rgba(20,26,34,.97), rgba(20,26,34,.9) 55%, rgba(156,65,21,.55)), url('../images/categories/truck.jpg') right center / cover; box-shadow: var(--shadow-lg); }
.cta-band p { color: #d9dee4; }

/* FAQ */
.faq-item { border-radius: 14px; }
.faq-item:hover { border-color: #f0c7aa; }
.faq-item[open] { background: #fff8f2; border-color: #f0c7aa; box-shadow: var(--shadow); }
.faq-toggle::before, .faq-toggle::after { background: var(--green); }

/* Forms */
.field input, .field select, .field textarea { border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green) !important; outline: none !important; box-shadow: 0 0 0 4px rgba(194,84,28,.16); }
.quote-form-wrap, .contact-form-card, .contact-card { border-radius: 24px; }
.form-actions .btn-quote, .enquiry-modal .form-actions .btn-quote, .enquiry-modal-success .btn { background: var(--grad-copper) !important; color: #fff !important; box-shadow: 0 12px 26px -12px rgba(194,84,28,.8); }
.form-actions .btn-quote:hover, .enquiry-modal .form-actions .btn-quote:hover, .enquiry-modal-success .btn:hover { background: linear-gradient(135deg, #f0844a, #a8461a) !important; }

/* Station line */
.line-map::before { background: linear-gradient(90deg, #e8743a, #ffb547); }
@media (max-width: 860px) { .line-map::before { background: linear-gradient(180deg, #e8743a, #ffb547); } }
.station a:hover .station-dot, .station.is-current .station-dot { background: var(--amber); }

/* Footer */
.site-footer { border-top: 0; position: relative; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #e8743a, #ffb547, #e8743a); }

/* Floating actions */
.float-btn { box-shadow: 0 14px 30px -10px rgba(20,26,34,.55); }
.float-wa { animation: float-ring 3s ease-out infinite; }
@keyframes float-ring { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45), 0 14px 30px -10px rgba(20,26,34,.55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(22,163,74,0), 0 14px 30px -10px rgba(20,26,34,.55); } }
.float-call { border-color: var(--amber); }

/* Scroll reveal (main.js adds .js-reveal; content stays visible without JS) */
.js-reveal .reveal:not(.is-visible) { opacity: 0; }
.js-reveal .reveal.is-visible { animation: rise .7s cubic-bezier(.2,.7,.2,1) backwards; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1 !important; animation: none !important; }
  .home-eyebrow > span, .float-wa { animation: none; }
}

/* One button shape everywhere (page stylesheets set 9-10px corners) */
.btn { border-radius: 999px !important; }

/* Call buttons are always charcoal; WhatsApp on dark panels is solid green */
.page-contact .contact-card .btn-call { background: var(--ink); }
.page-contact .contact-card .btn-call:hover { background: var(--ink-3); }
.page-service .content-aside .btn-wa, .page-area .content-aside .btn-wa, .page-faq .aside-card .btn-wa, .page-about .about-contact-card .btn-wa { background: var(--wa); color: #fff; }
.page-service .content-aside .btn-wa:hover, .page-area .content-aside .btn-wa:hover, .page-faq .aside-card .btn-wa:hover, .page-about .about-contact-card .btn-wa:hover { background: var(--wa-d); color: #fff; }