/* === AL-NEXA GULF — Premium Inner Service Page === */

/* ── Navbar over dark hero ── */
.navbar .nav-links a{color:rgba(255,255,255,.82)}
.navbar .nav-links a:hover,.navbar .nav-links a.active{color:#fff}
.navbar .nav-links a::after{background:#fff}
.navbar .nav-logo{filter:brightness(10)}
.navbar .nav-toggle span{background:#fff}
.navbar .nav-cta{background:#fff;color:var(--brand)}
.navbar .nav-cta:hover{background:var(--accent);color:#1a1a1a}
.navbar .nav-dropdown-menu{background:rgba(0,0,0,.9);border-color:rgba(255,255,255,.1)}
.navbar .nav-dropdown-menu a{color:rgba(255,255,255,.75)}
.navbar .nav-dropdown-menu a:hover{background:rgba(255,255,255,.08);color:#fff}

/* Revert on scroll */
.navbar.scrolled .nav-links a{color:var(--text-secondary)}
.navbar.scrolled .nav-links a:hover,.navbar.scrolled .nav-links a.active{color:var(--brand)}
.navbar.scrolled .nav-links a::after{background:var(--brand)}
.navbar.scrolled .nav-logo{filter:none}
.navbar.scrolled .nav-toggle span{background:var(--brand)}
.navbar.scrolled .nav-cta{background:var(--brand);color:#fff}
.navbar.scrolled .nav-cta:hover{background:var(--brand-bright)}
.navbar.scrolled .nav-dropdown-menu{background:#fff;border-color:var(--border-subtle)}
.navbar.scrolled .nav-dropdown-menu a{color:var(--text-secondary)}
.navbar.scrolled .nav-dropdown-menu a:hover{background:var(--brand-dim);color:var(--brand)}

/* ── Hero ── */
.srv-hero{position:relative;min-height:55vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.srv-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;will-change:transform}
.srv-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.35))}
.srv-hero-content{position:relative;z-index:1;text-align:center;padding:calc(var(--nav-height) + var(--space-2xl)) var(--space-lg) var(--space-2xl)}
.srv-hero-content .badge{margin-bottom:var(--space-sm)}
.srv-hero-content h1{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,5vw,4rem);font-weight:800;color:#fff;margin-bottom:var(--space-sm)}
.srv-hero-content p{color:rgba(255,255,255,.8);font-size:1.1rem;max-width:500px;margin:0 auto}

/* ── Intro ── */
.srv-intro{padding:var(--space-3xl) 0}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);align-items:center}
.intro-img-wrap{position:relative}
.intro-img{width:100%;aspect-ratio:4/3;background-size:cover;background-position:center;position:relative;z-index:1}
.intro-img-frame{position:absolute;top:var(--space-md);left:var(--space-md);right:calc(-1*var(--space-md));bottom:calc(-1*var(--space-md));border:3px solid var(--accent);z-index:0}
.intro-text .gold-line{width:60px;height:3px;background:var(--accent);margin-bottom:var(--space-md)}
.intro-text h2{font-size:1.8rem;margin-bottom:var(--space-sm);color:var(--brand)}
.intro-lead{color:var(--accent);font-size:1rem;font-weight:600;margin-bottom:var(--space-sm)}
.intro-text p{color:var(--text-secondary);line-height:1.75;margin-bottom:var(--space-lg)}

/* ── Highlights Section ── */
.srv-highlights{padding:var(--space-2xl) 0 var(--space-3xl);background:var(--bg-secondary)}
.srv-section{margin-bottom:var(--space-2xl)}
.srv-section:last-child{margin-bottom:0}
.sec-heading{text-align:center;font-size:1.6rem;margin-bottom:var(--space-xl);color:var(--brand);position:relative}
.sec-heading::after{content:'';display:block;width:50px;height:2px;background:var(--accent);margin:var(--space-sm) auto 0}

/* ── Feature Grid ── */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}
.feat-card{background:var(--bg-card);border:1px solid var(--border-subtle);padding:var(--space-xl) var(--space-lg);text-align:center;transition:all .4s var(--ease-out-expo);position:relative;overflow:hidden}
.feat-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out-expo)}
.feat-card:hover{border-color:var(--border-accent);transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,.08)}
.feat-card:hover::before{transform:scaleX(1)}
.feat-icon{font-size:1.8rem;color:var(--accent);margin-bottom:var(--space-sm);transition:transform .4s var(--ease-out-expo)}
.feat-card:hover .feat-icon{transform:scale(1.15)}
.feat-card h3{font-size:1rem;margin-bottom:var(--space-xs);color:var(--brand)}
.feat-card p{color:var(--text-muted);font-size:.82rem;line-height:1.55}

/* ── Tabs ── */
.tabs-wrap{max-width:800px;margin:0 auto}
.tab-btns{display:flex;gap:var(--space-xs);justify-content:center;margin-bottom:var(--space-lg);flex-wrap:wrap}
.tab-btn{padding:.6rem 1.4rem;font-family:var(--font-heading);font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--bg-card);border:1px solid var(--border-default);color:var(--text-muted);cursor:pointer;transition:all .25s}
.tab-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.tab-btn:hover:not(.active){border-color:var(--accent);color:var(--accent)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeUp .4s var(--ease-out-expo)}
.tab-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem var(--space-lg)}
.tab-list li{font-size:.9rem;color:var(--text-secondary);padding:.4rem 0;border-bottom:1px solid var(--border-subtle)}
.tab-list li:nth-last-child(-n+2){border-bottom:none}

/* ── Timeline ── */
.timeline{max-width:720px;margin:0 auto;position:relative;padding:var(--space-md) 0}
.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--border-default);transform:translateX(-50%)}
.tl-step{display:flex;align-items:flex-start;margin-bottom:var(--space-xl);position:relative}
.tl-step:last-child{margin-bottom:0}
.tl-step:nth-child(odd){flex-direction:row}
.tl-step:nth-child(even){flex-direction:row-reverse}
.tl-marker{flex:0 0 70px;display:flex;align-items:center;justify-content:center;z-index:1}
.tl-marker span{width:46px;height:46px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:.8rem;font-weight:700;box-shadow:0 4px 20px rgba(137,44,55,.25)}
.tl-body{flex:1;padding:0 var(--space-md)}
.tl-step:nth-child(odd) .tl-body{text-align:left}
.tl-step:nth-child(even) .tl-body{text-align:right}
.tl-body h3{font-size:1.05rem;margin-bottom:.25rem;color:var(--brand)}
.tl-body p{color:var(--text-muted);font-size:.82rem;line-height:1.5;max-width:280px}
.tl-step:nth-child(odd) .tl-body p{margin-right:auto}
.tl-step:nth-child(even) .tl-body p{margin-left:auto}

/* ── Icon Grid ── */
.icon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}
.icon-card{background:var(--bg-card);border:1px solid var(--border-subtle);padding:var(--space-xl) var(--space-md);text-align:center;transition:all .4s var(--ease-out-expo);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);cursor:default}
.icon-card:hover{border-color:var(--accent);transform:translateY(-6px);box-shadow:0 14px 40px rgba(0,0,0,.08)}
.icon-card i{font-size:1.8rem;color:var(--accent);transition:transform .4s var(--ease-out-expo)}
.icon-card:hover i{transform:scale(1.2)}
.icon-card span{font-size:.82rem;font-weight:600;color:var(--text-secondary);line-height:1.35}

/* ── Accordion ── */
.accordion{max-width:820px;margin:0 auto}
.acc-item{border:1px solid var(--border-subtle);margin-bottom:var(--space-xs);background:var(--bg-card);transition:all .3s}
.acc-item.open{border-color:var(--border-accent);box-shadow:0 4px 20px rgba(0,0,0,.04)}
.acc-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);font-family:var(--font-heading);font-size:.9rem;font-weight:600;color:var(--text-primary);background:none;text-align:left;cursor:pointer;transition:color .25s}
.acc-trigger:hover{color:var(--brand)}
.acc-trigger i{font-size:.65rem;transition:transform .35s;color:var(--accent)}
.acc-item.open .acc-trigger i{transform:rotate(180deg)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out-expo)}
.acc-item.open .acc-panel{max-height:700px}
.acc-panel ul{list-style:none;padding:0 var(--space-lg) var(--space-md);display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem var(--space-md)}
.acc-panel li{font-size:.82rem;color:var(--text-muted);padding:.25rem 0 .25rem 1rem;position:relative}
.acc-panel li::before{content:'◆';position:absolute;left:0;color:var(--accent);font-size:.4rem;top:.55rem}

/* ── Bullet List ── */
.bullet-list{list-style:none;max-width:700px;margin:0 auto}
.bullet-list li{display:flex;align-items:flex-start;gap:.7rem;padding:.6rem 0;font-size:.9rem;color:var(--text-secondary);border-bottom:1px solid var(--border-subtle)}
.bullet-list li:last-child{border-bottom:none}
.bullet-list i{color:var(--accent);font-size:1rem;margin-top:.1rem;flex-shrink:0}

/* ── Project List ── */
.proj-list{max-width:750px;margin:0 auto}
.proj-item{display:flex;justify-content:space-between;align-items:center;padding:.7rem var(--space-md);border-bottom:1px solid var(--border-subtle);transition:all .3s}
.proj-item:hover{background:var(--bg-card);padding-left:var(--space-lg);border-bottom-color:var(--border-accent)}
.proj-name{font-weight:600;font-size:.85rem;color:var(--text-primary)}
.proj-loc{font-size:.75rem;color:var(--text-muted);white-space:nowrap}
.proj-loc i{color:var(--accent);margin-right:.25rem;font-size:.6rem}

/* ── CTA Banner ── */
.srv-cta{padding:var(--space-2xl) 0 var(--space-3xl)}
.cta-banner{background:var(--brand);padding:var(--space-2xl);text-align:center;position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;inset:0;opacity:.06;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cta-banner h2{color:#fff;font-size:1.8rem;margin-bottom:var(--space-sm);position:relative}
.cta-banner p{color:rgba(255,255,255,.7);margin-bottom:var(--space-lg);position:relative}
.cta-banner .btn{background:var(--accent);color:#1a1a1a;position:relative}
.cta-banner .btn:hover{background:var(--accent-bright)}

/* ── Related ── */
.related{padding:var(--space-3xl) 0}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-md)}
.related-card{background:var(--bg-card);border:1px solid var(--border-subtle);padding:var(--space-lg);text-align:center;transition:all .4s var(--ease-out-expo);display:block}
.related-card:hover{border-color:var(--accent);transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,.06)}
.related-icon{font-size:1.5rem;color:var(--accent);margin-bottom:var(--space-sm);transition:transform .3s}
.related-card:hover .related-icon{transform:translateX(6px)}
.related-card h3{font-size:.95rem;margin-bottom:var(--space-xs)}
.related-link{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-heading);font-size:.72rem;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;transition:gap .25s}
.related-card:hover .related-link{gap:.6rem}

/* ── Responsive ── */
@media(max-width:1024px){
  .intro-grid{grid-template-columns:1fr;gap:var(--space-xl)}
  .intro-img-wrap{max-width:500px;margin:0 auto}
  .feat-grid,.icon-grid{grid-template-columns:repeat(2,1fr)}
  .srv-hero{min-height:40vh}
}
@media(max-width:768px){
  .feat-grid,.icon-grid{grid-template-columns:1fr}
  .tab-list{grid-template-columns:1fr}
  .tab-list li:nth-last-child(-n+2){border-bottom:1px solid var(--border-subtle)}
  .tab-list li:last-child{border-bottom:none}
  .acc-panel ul{grid-template-columns:1fr}
  .tl-step{flex-direction:column!important;align-items:center;text-align:center!important}
  .tl-step .tl-body{text-align:center!important;padding:var(--space-sm) 0 0}
  .tl-step .tl-body p{margin:0 auto!important;max-width:100%}
  .timeline::before{left:35px}
  .tl-marker{flex:0 0 auto}
  .proj-item{flex-direction:column;align-items:flex-start;gap:.2rem}
  .intro-img-frame{right:0;bottom:0}
}