/* ══ GLOBAL FONT FIX ══ */
p { font-size: 18px !important; line-height: 1.75 !important; color: #555; }
h1,h2,h3,h4,h5,h6 { font-family: 'Afacad Flux', sans-serif; }

/* ══ HERO ══ */
.area-detail-hero { position:relative; background:#0a0a0a; min-height:480px; overflow:hidden; }
.area-detail-hero .hero-bg { position:absolute; top:0; right:0; width:58%; height:100%; object-fit:cover; object-position:center left; }
.area-detail-hero .hero-overlay { position:absolute; inset:0; background:linear-gradient(to right, #0a0a0a 38%, rgba(10,10,10,0.78) 56%, rgba(10,10,10,0.05) 100%); z-index:1; }
.area-detail-hero .hero-content { position:relative; z-index:2; padding:28px 0 0; }
.hero-breadcrumb a, .hero-breadcrumb span { font-size:14px; color:#bbb; text-decoration:none; }
.hero-breadcrumb .sep { margin:0 6px; color:#666; }
.hero-breadcrumb .current { color:#FFC600; }
.area-detail-hero h1 { font-size:clamp(2.2rem,5vw,3.6rem); font-weight:900; color:#fff; line-height:1.08; margin:14px 0 5px; }
.area-detail-hero h1 span { color:#FFC600; display:block; }
.area-detail-hero .tagline { color:#ccc; font-size:1.3rem !important; font-weight:700; margin-bottom:10px; }
.area-detail-hero .hero-desc { color:#bbb; font-size:1.3rem !important; line-height:1.7 !important; max-width:500px; margin-bottom:20px; }

/* ══ HERO BUTTONS ══ */
.btn-org { background:#FFC600; color:#fff!important; font-weight:700; padding:13px 26px; border-radius:6px; text-decoration:none; font-size:15px; display:inline-flex; align-items:center; gap:8px; border:2px solid #FFC600; transition:all .2s; }
.btn-org:hover { background:#e05e00; border-color:#e05e00; }
.btn-wh-out { color:#fff!important; border:2px solid #fff; font-weight:700; padding:11px 24px; border-radius:6px; text-decoration:none; font-size:15px; display:inline-flex; align-items:center; gap:8px; transition:all .2s; }
.btn-wh-out:hover { background:#fff; color:#111!important; }

/* ══ EMERGENCY BOX ══ */
.em-box { background:#FFC600; border-radius:10px; padding:24px 22px; text-align:center; color:#fff; width:230px; }
.em-box p { color:#fff !important; }
.em-box .em-lbl { font-size:13px !important; opacity:.85; margin-bottom:4px; }
.em-box .em-num { font-size:1.7rem; font-weight:900; margin-bottom:6px; line-height:1.1; }
.em-box .em-sub { font-size:13px !important; opacity:.8; margin:0; }

/* ══ MINI BADGES ══ */
.mini-badge-item { display:flex; align-items:center; gap:10px; color:#fff; }
.mini-badge-item i { color:#FFC600; font-size:18px; flex-shrink:0; }
.mini-badge-item span { font-size:18px !important; font-weight:500; line-height:1.4; color:#fff !important; }

/* ══ STATS BAR ══ */
.stats-bar { background:#fff; padding:24px 0; border-bottom:1px solid #eee; box-shadow:0 4px 20px rgba(0,0,0,0.06); }
.stat-col { text-align:center; padding:10px; border-right:1px solid #eee; }
.stat-col:last-child { border-right:none; }
.stat-col .s-icon { color:#FFC600; font-size:30px; margin-bottom:6px; }
.stat-col .s-num { font-size:1.9rem; font-weight:900; color:#FFC600; line-height:1; }
.stat-col .s-label { font-size:14px !important; color:#777; margin-top:4px; font-weight:500; }

/* ══ IMAGE + CONTENT ══ */
.section-eyebrow { color:#FFC600; font-weight:700; font-size:13px !important; letter-spacing:2px; text-transform:uppercase; display:block; margin-bottom:8px; }
.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; list-style:none; padding:0; margin:0 0 24px; }
.check-grid li { display:flex; align-items:center; gap:8px; font-size:18px !important; color:#333; }
.check-grid li i { color:#FFC600; font-size:15px; }

/* ══ SERVICE CARDS ══ */
.svc-card { background:#fff; border:1px solid #eee; border-radius:10px; padding:24px 20px; height:100%; transition:all .22s; }
.svc-card:hover { border-color:#FFC600; box-shadow:0 6px 20px rgba(255,107,0,0.12); transform:translateY(-3px); }
.svc-card .sc-icon { font-size:32px; color:#FFC600; margin-bottom:12px; }
.svc-card h5 { font-weight:700; font-size:22px !important; margin-bottom:8px; }
.svc-card p { font-size:18px !important; color:#777; margin:0 0 10px; }
.svc-card a { color:#FFC600; font-size:16px !important; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.svc-card a:hover { text-decoration:underline; }

/* ══════════════════════════════════════
   PROCESS SECTION — IMPROVED DESIGN
══════════════════════════════════════ */
.process-section {
    background: #0d0d0d;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
/* Subtle background pattern */
.process-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, rgba(255,107,0,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.process-section h2 {
    color: #fff;
    font-weight: 900;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    margin-bottom: 10px;
    text-align: center;
}
.process-section .proc-sub {
    color: #999;
    font-size: 16px !important;
    text-align: center;
    margin-bottom: 60px;
}

/* Proc Grid */
.proc-grid {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    position: relative;
}

/* Horizontal line behind steps */
.proc-grid::before {
    content: '';
    position: absolute;
    top: 54px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(255,107,0,0.3) 20%, rgba(255,107,0,0.3) 80%, transparent);
    z-index: 0;
}

.proc-card {
    flex: 1;
    max-width: 200px;
    text-align: center;
    position: relative;
    padding: 0 12px;
    z-index: 1;
}

/* Connector arrow */
.proc-connector {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 36px;
    z-index: 1;
}
.proc-connector i {
    color: #FFC600;
    font-size: 16px;
    opacity: 0.6;
}

/* Step number */
.proc-card .step-num {
    width: 28px;
    height: 28px;
    background: #FFC600;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 4px rgba(255,107,0,0.2);
}

/* Icon circle */
.proc-card .step-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(255,107,0,0.35);
    background: rgba(255,107,0,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all .35s ease;
    position: relative;
    z-index: 2;
}
.proc-card:hover .step-icon {
    background: #FFC600;
    border-color: #FFC600;
    box-shadow: 0 8px 30px rgba(255,107,0,0.35);
    transform: translateY(-4px);
}
.proc-card .step-icon i {
    color: #FFC600;
    font-size: 28px;
    transition: color .35s;
}
.proc-card:hover .step-icon i { color: #fff; }

/* Text */
.proc-card h6 {
    color: #fff;
    font-size: 16px !important;
    font-weight: 800;
    margin-bottom: 8px;
}
.proc-card p {
    color: #888 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0;
}

/* ══ ORANGE CTA BANNER ══ */
.octa { background:#FFC600; padding:40px 0; position:relative; overflow:hidden; }
.octa .octa-truck { position:absolute; right:0; bottom:0; height:100%; opacity:0.15; pointer-events:none; }
.octa h2 { color:#fff; font-weight:800; font-size:clamp(1.3rem,2.5vw,1.9rem) !important; margin-bottom:8px; }
.octa p { color:rgba(255,255,255,.85) !important; font-size:15px !important; margin:0; }
.octa-phone { color:#fff; font-size:1.6rem; font-weight:900; text-decoration:none; display:inline-flex; align-items:center; gap:10px; }
.btn-wh-cta { background:#fff; color:#FFC600!important; font-weight:800; padding:13px 30px; border-radius:6px; text-decoration:none; font-size:15px; display:inline-block; transition:all .2s; border:2px solid #fff; }
.btn-wh-cta:hover { background:#111; color:#fff!important; border-color:#111; }

/* ══ WHY BOX ══ */
.why-box { background:#f8f8f8; border-radius:10px; padding:28px 24px; }
.why-box h3 { font-weight:800; font-size:1.4rem !important; margin-bottom:18px; }
.wi { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; font-size:18px !important; color:#333; }
.wi i { color:#FFC600; margin-top:3px; flex-shrink:0; font-size:16px; }

/* ══ FAQ ══ */
.faq-item { border:1px solid #eee; border-radius:8px; margin-bottom:12px; overflow:hidden; }
.faq-q { background:#fff; padding:18px 20px; font-weight:600; font-size:20px !important; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; transition:background .2s; }
.faq-q .faq-num { width:30px; height:30px; background:#f0f0f0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; color:#555; transition:all .2s; }
.faq-q:hover, .faq-q.open { background:#FFF3EB; color:#FFC600; }
.faq-q.open .faq-num { background:#FFC600; color:#fff; }
.faq-q .faq-plus { color:#FFC600; font-size:14px; transition:transform .3s; flex-shrink:0; }
.faq-q.open .faq-plus { transform:rotate(45deg); }
.faq-a { padding:0 20px; max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease; }
.faq-a.show { max-height:200px; padding:16px 20px; }
.faq-a p { font-size:18px !important; margin:0; line-height:1.75 !important; }

/* ══ RESPONSIVE ══ */
@media (max-width:991px) {
    .proc-grid { flex-wrap:wrap; gap:30px; justify-content:center; }
    .proc-grid::before { display:none; }
    .proc-card { max-width:150px; }
    .proc-connector { display:none; }
}
@media (max-width:768px) {
    .area-detail-hero .hero-bg { width:100%; opacity:.15; }
    .area-detail-hero .hero-overlay { background:rgba(10,10,10,0.92); }
    .area-detail-hero h1 { font-size:2rem; }
    .octa-truck { display:none; }
    .proc-card { max-width:130px; }
}
/* ══════════════════════════════════
   RECOVERY PROCESS SECTION
   File: recovery-process.css
══════════════════════════════════ */
.recovery-process {
    background: #0d0d0d;
    padding: 80px 0;
    overflow: hidden;
}
.recovery-process .rp-badge {
    display: inline-block;
    background: rgba(255,107,0,0.12);
    color: #FFC600;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255,107,0,0.25);
    margin-bottom: 14px;
}
.recovery-process h2 {
    color: #fff;
    font-weight: 900;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    margin-bottom: 10px;
    text-align: center;
}
.recovery-process .rp-sub {
    color: #666;
    font-size: 15px;
    text-align: center;
    margin-bottom: 56px;
}

/* Grid */
.rp-grid {
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

/* Connector */
.rp-connector {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.rp-connector i {
    color: rgba(255,107,0,0.45);
    font-size: 14px;
}

/* Card */
.rp-card {
    flex: 1;
    position: relative;
    background: #141414;
    border: 1px solid #222;
    border-radius: 16px;
    padding: 30px 18px 26px;
    text-align: center;
    transition: all 0.3s ease;
    overflow: hidden;
}
.rp-card:hover {
    border-color: rgba(255,107,0,0.4);
    transform: translateY(-4px);
}

/* Top accent line */
.rp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 3px;
    background: #FFC600;
    border-radius: 0 0 4px 4px;
    opacity: 0.45;
    transition: all 0.3s;
}
.rp-card:hover::before {
    opacity: 1;
    left: 10%;
    right: 10%;
}

/* Active card (highlighted) */
.rp-card.rp-active {
    background: #FFC600;
    border-color: #FFC600;
}
.rp-card.rp-active::before {
    background: rgba(255,255,255,0.35);
    opacity: 1;
}
.rp-card.rp-active:hover {
    background: #e05e00;
    border-color: #e05e00;
    transform: translateY(-4px);
}

/* Icon circle */
.rp-card .rp-icon {
    width: 58px;
    height: 58px;
    background: rgba(255,107,0,0.1);
    border: 1.5px solid rgba(255,107,0,0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    transition: all 0.3s;
}
.rp-card .rp-icon i {
    color: #FFC600;
    font-size: 22px;
    transition: color 0.3s;
}
.rp-card:hover .rp-icon {
    background: rgba(255,107,0,0.2);
    border-color: rgba(255,107,0,0.6);
}
.rp-card.rp-active .rp-icon {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.4);
}
.rp-card.rp-active .rp-icon i { color: #fff; }
.rp-card.rp-active:hover .rp-icon {
    background: rgba(255,255,255,0.25);
}

/* Step number */
.rp-card .rp-num {
    width: 24px;
    height: 24px;
    background: #FFC600;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.rp-card.rp-active .rp-num {
    background: #fff;
    color: #FFC600;
}

/* Text */
.rp-card h6 {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 8px;
}
.rp-card p {
    color: #cacaca !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}
.rp-card.rp-active h6 { color: #fff; }
.rp-card.rp-active p { color: rgba(255,255,255,0.8) !important; }

/* ══ RESPONSIVE ══ */
@media (max-width: 991px) {
    .rp-grid { flex-wrap: wrap; gap: 16px; justify-content: center; }
    .rp-card { flex: 0 0 calc(50% - 40px); min-width: 140px; }
    .rp-connector { display: none; }
}
@media (max-width: 576px) {
    .rp-card { flex: 0 0 calc(100% - 20px); }
    .recovery-process { padding: 60px 0; }
}