/*
   AFRILIME PROFESSIONAL SITE SYSTEM
   Reengineered visual layer using the existing AFRILIME identity.
   No generated-content badges, AI labels, or artificial authoring indicators.
*/

:root{
  --af-navy:#06111f;
  --af-navy-2:#0b2f5b;
  --af-blue:#2c81e2;
  --af-gold:#e5c84b;
  --af-gold-2:#f4b400;
  --af-ink:#0f172a;
  --af-text:#334155;
  --af-muted:#64748b;
  --af-soft:#f4f7fb;
  --af-white:#ffffff;
  --af-line:rgba(15,23,42,.10);
  --af-line-light:rgba(255,255,255,.14);
  --af-shadow:0 22px 70px rgba(2,8,23,.11);
  --af-shadow-soft:0 12px 38px rgba(2,8,23,.075);
  --af-radius-xl:32px;
  --af-radius-lg:24px;
  --af-radius-md:18px;
  --af-max:1240px;
  --topbar-height:48px;
  --main-header-height:78px;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:150px;
  background:var(--af-soft);
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 12%,rgba(229,200,75,.065),transparent 28%),
    radial-gradient(circle at 92% 22%,rgba(44,129,226,.055),transparent 30%),
    var(--af-soft);
  color:var(--af-text);
  font-family:'Inter','Segoe UI',Arial,sans-serif;
  font-feature-settings:'kern' 1,'liga' 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.afrilime-dark{
  background:
    radial-gradient(circle at 8% 12%,rgba(229,200,75,.055),transparent 28%),
    radial-gradient(circle at 92% 22%,rgba(44,129,226,.08),transparent 30%),
    #04101f;
}

::selection{
  background:rgba(229,200,75,.42);
  color:#06111f;
}

main{
  position:relative;
  overflow:clip;
}

main > section,
section[id]{
  scroll-margin-top:150px;
}

img{
  image-rendering:auto;
}

/* ==========================================================
   HEADER / NAVIGATION
========================================================== */
#top-header{
  height:var(--topbar-height)!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.025),transparent 30%),
    linear-gradient(135deg,#04101f 0%,#071a31 45%,#0b2f5b 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}

body > header{
  min-height:var(--main-header-height)!important;
  height:var(--main-header-height)!important;
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid rgba(15,23,42,.08)!important;
  box-shadow:0 12px 36px rgba(2,8,23,.075)!important;
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  transition:box-shadow .28s ease,background .28s ease,transform .28s ease!important;
}

body.afrilime-dark > header{
  background:rgba(4,16,31,.93)!important;
  border-color:rgba(255,255,255,.10)!important;
}

body > header.pro-header-scrolled{
  box-shadow:0 18px 48px rgba(2,8,23,.13)!important;
}

body > header .logo img{
  transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .3s ease;
}

body > header .logo a:hover img{
  transform:scale(1.035);
  filter:saturate(1.05);
}

#navMenu ul{
  gap:clamp(2px,.3vw,7px)!important;
}

#navMenu ul li a{
  min-height:42px;
  display:inline-flex!important;
  align-items:center;
  padding:0 clamp(8px,.75vw,13px)!important;
  border-radius:12px;
  font-size:clamp(10px,.72vw,12px)!important;
  letter-spacing:.035em!important;
  transition:background .24s ease,color .24s ease,transform .24s ease!important;
}

#navMenu ul li a::after{
  display:none!important;
}

#navMenu ul li a:hover,
#navMenu ul li a.is-current{
  color:var(--af-navy-2)!important;
  background:linear-gradient(135deg,rgba(229,200,75,.18),rgba(244,180,0,.10))!important;
  transform:translateY(-1px);
}

body.afrilime-dark #navMenu ul li a:hover,
body.afrilime-dark #navMenu ul li a.is-current{
  color:#ffdf65!important;
  background:rgba(229,200,75,.10)!important;
}

.request-btn,
.btn-primary,
.spares-btn.primary,
.apply-btn,
button[type="submit"]{
  border-radius:999px!important;
  background:linear-gradient(135deg,var(--af-gold),var(--af-gold-2))!important;
  color:#101827!important;
  box-shadow:0 14px 32px rgba(229,200,75,.24)!important;
}

.request-btn:hover,
.btn-primary:hover,
.spares-btn.primary:hover,
.apply-btn:hover,
button[type="submit"]:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 20px 42px rgba(229,200,75,.32)!important;
}

.theme-toggle,.menu-toggle,.spare-search-toggle{
  border-radius:14px!important;
}

/* ==========================================================
   TYPOGRAPHY / SECTION SYSTEM
========================================================== */
.section,
.af-about-section,
.projects-section,
.news-section,
.award-detail,
.prospects-section,
.contact-section,
.job-listings,
.career-detail-container{
  position:relative;
}

.section-title,
.award-heading h2,
.gallery-title h2,
.page-heading h1,
.contact-header h1,
.projects-hero h1,
.services-hero h1,
.news-hero h1,
.investment-hero h1{
  text-wrap:balance;
  letter-spacing:-.045em!important;
}

.section-subtitle,
.award-heading p,
.page-heading p{
  text-wrap:pretty;
}

.eyebrow,
.spares-eyebrow,
[class*="eyebrow"]{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

/* ==========================================================
   PREMIUM CARD SYSTEM
========================================================== */
.service-card,
.project-card,
.news-card,
.job-card,
.modern-card,
.glass-card,
.value-card,
.mission-card,
.award-nav-card,
.fact-card,
.story-card,
.gallery-card,
.spares-card,
.contact-card,
.qr-card,
.prospect-card,
.overview-card,
.why-text-card,
.af-value-box,
.af-award-card,
.af-about-card{
  border-radius:var(--af-radius-lg)!important;
  border:1px solid var(--af-line)!important;
  box-shadow:var(--af-shadow-soft)!important;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .32s ease!important;
}

.service-card:hover,
.project-card:hover,
.news-card:hover,
.job-card:hover,
.modern-card:hover,
.award-nav-card:hover,
.spares-card:hover,
.prospect-card:hover,
.af-value-box:hover,
.af-award-card:hover{
  transform:translateY(-6px)!important;
  border-color:rgba(229,200,75,.42)!important;
  box-shadow:0 24px 64px rgba(2,8,23,.14)!important;
}

body.afrilime-dark .service-card,
body.afrilime-dark .project-card,
body.afrilime-dark .news-card,
body.afrilime-dark .job-card,
body.afrilime-dark .modern-card,
body.afrilime-dark .award-nav-card,
body.afrilime-dark .fact-card,
body.afrilime-dark .story-card,
body.afrilime-dark .spares-card,
body.afrilime-dark .contact-card,
body.afrilime-dark .prospect-card{
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:0 14px 40px rgba(0,0,0,.20)!important;
}

.service-card img,
.project-card img,
.news-card img,
.gallery-card img,
.spares-card img,
.award-photo img{
  transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .4s ease!important;
}

.service-card:hover img,
.project-card:hover img,
.news-card:hover img,
.gallery-card:hover img,
.spares-card:hover img,
.award-photo:hover img{
  transform:scale(1.045)!important;
  filter:saturate(1.04) contrast(1.02);
}

/* ==========================================================
   HERO CONSISTENCY
========================================================== */
.hero-slider,
.services-hero,
.projects-hero,
.news-hero,
.investment-hero,
.af-about-hero,
.awards-hero,
.spares-hero,
.contact-header{
  position:relative;
  isolation:isolate;
}

.services-hero::after,
.projects-hero::after,
.news-hero::after,
.investment-hero::after,
.af-about-hero::after,
.spares-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,#000,transparent 92%);
}

/* ==========================================================
   FORMS
========================================================== */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  border-radius:14px!important;
  border:1px solid rgba(15,23,42,.13)!important;
  background:#fff;
  transition:border-color .24s ease,box-shadow .24s ease,background .24s ease!important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus{
  outline:none!important;
  border-color:rgba(44,129,226,.55)!important;
  box-shadow:0 0 0 4px rgba(44,129,226,.10)!important;
}

body.afrilime-dark input:not([type="checkbox"]):not([type="radio"]),
body.afrilime-dark select,
body.afrilime-dark textarea{
  background:#0b1728!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.12)!important;
}

/* ==========================================================
   CAREERS - UPGRADE EXISTING CONTENT WITHOUT REMOVAL
========================================================== */
.page-heading{
  width:min(1120px,calc(100% - 36px));
  margin:40px auto 28px!important;
  padding:54px 28px!important;
  border-radius:30px;
  color:#fff!important;
  background:
    radial-gradient(circle at 14% 8%,rgba(229,200,75,.22),transparent 28%),
    linear-gradient(135deg,#06111f,#0b2f5b);
  box-shadow:var(--af-shadow);
}

.page-heading h1{
  color:#fff!important;
  font-size:clamp(36px,5vw,58px)!important;
  font-weight:900!important;
}

.page-heading p{
  max-width:720px;
  margin:12px auto 0;
  color:rgba(255,255,255,.78)!important;
  font-size:16px!important;
}

.career-search{
  width:min(1040px,calc(100% - 36px));
  max-width:none!important;
  margin:0 auto 36px!important;
  padding:16px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--af-line);
  box-shadow:var(--af-shadow-soft);
}

.career-search input,
.career-search select{
  flex:1 1 190px;
  min-height:48px;
}

.career-search button{
  min-height:48px;
  padding-inline:24px!important;
}

.job-listings{
  width:min(1040px,calc(100% - 36px));
  max-width:none!important;
  gap:16px!important;
}

.job-card{
  position:relative;
  overflow:hidden;
  padding:28px!important;
}

.job-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,var(--af-gold),var(--af-gold-2));
}

.job-card h3{
  color:var(--af-navy-2)!important;
  font-weight:900;
}

.career-detail-container{
  width:min(960px,calc(100% - 36px));
  max-width:none!important;
  margin:54px auto 90px!important;
  padding:clamp(28px,5vw,52px)!important;
  border-radius:30px!important;
  border:1px solid var(--af-line);
  box-shadow:var(--af-shadow)!important;
}

/* ==========================================================
   CONTACT / SPARES REFINEMENT
========================================================== */
.contact-grid,
.spares-wrap{
  width:min(var(--af-max),calc(100% - 36px))!important;
}

.contact-card,.qr-card,.search-card,.detail-card{
  overflow:hidden;
}

.spares-page .search-card,
.spares-page .detail-card{
  border-radius:28px!important;
}

/* ==========================================================
   SERVICE DETAIL - STICKY RIGHT SERVICE TITLES
========================================================== */
.pro-service-page{
  background:var(--af-soft);
}

.pro-service-hero{
  position:relative;
  min-height:430px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background-position:center;
  background-size:cover;
}

.pro-service-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(110deg,rgba(6,17,31,.96) 0%,rgba(6,17,31,.82) 48%,rgba(6,17,31,.48) 100%),
    radial-gradient(circle at 78% 18%,rgba(229,200,75,.20),transparent 28%);
}

.pro-service-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:linear-gradient(to bottom,#000,transparent 96%);
}

.pro-service-hero-inner{
  width:min(var(--af-max),calc(100% - 36px));
  margin:0 auto;
  padding:80px 0 62px;
}

.pro-service-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
}

.pro-service-breadcrumb a:hover{
  color:#ffdf65;
}

.pro-service-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  margin-bottom:14px;
  border-radius:999px;
  color:#ffdf65;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.pro-service-hero h1{
  max-width:850px;
  color:#fff!important;
  font-size:clamp(38px,6vw,72px);
  line-height:.98;
  letter-spacing:-.06em;
  text-wrap:balance;
}

.pro-service-hero p{
  max-width:700px;
  margin-top:18px;
  color:rgba(255,255,255,.80)!important;
  font-size:16px;
}

.pro-service-layout{
  width:min(var(--af-max),calc(100% - 36px));
  margin:0 auto;
  padding:70px 0 96px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(270px,340px);
  gap:34px;
  align-items:start;
}

.pro-service-main{
  min-width:0;
}

.pro-service-article{
  padding:clamp(24px,4vw,42px);
  border-radius:30px;
  background:#fff;
  border:1px solid var(--af-line);
  box-shadow:var(--af-shadow-soft);
}

.pro-service-article img{
  width:100%;
  max-height:540px;
  object-fit:cover;
  margin:28px 0 0;
  border-radius:24px;
  box-shadow:0 18px 46px rgba(2,8,23,.13);
}

.pro-service-description{
  font-size:16px;
  line-height:1.82;
  color:#475569;
}

.pro-service-description h1,
.pro-service-description h2,
.pro-service-description h3,
.pro-service-description h4{
  color:var(--af-ink);
  margin:1.25em 0 .55em;
  line-height:1.15;
  letter-spacing:-.03em;
}

.pro-service-description p,
.pro-service-description ul,
.pro-service-description ol{
  margin-bottom:1em;
}

.pro-service-description ul,
.pro-service-description ol{
  padding-left:1.35em;
}

.pro-service-sidebar{
  position:sticky;
  top:calc(var(--topbar-height) + var(--main-header-height) + 22px);
  max-height:calc(100vh - var(--topbar-height) - var(--main-header-height) - 44px);
  overflow:auto;
  scrollbar-width:thin;
  padding:22px;
  border-radius:26px;
  background:
    radial-gradient(circle at 90% 4%,rgba(229,200,75,.16),transparent 28%),
    linear-gradient(145deg,#06111f,#0b2f5b);
  color:#fff;
  box-shadow:0 24px 64px rgba(2,8,23,.22);
  border:1px solid rgba(255,255,255,.10);
}

.pro-service-sidebar-head{
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.pro-service-sidebar-head small{
  display:block;
  color:#ffdf65;
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.pro-service-sidebar-head h2{
  margin-top:5px;
  color:#fff!important;
  font-size:21px;
  letter-spacing:-.035em;
}

.pro-service-title-list{
  display:grid;
  gap:7px;
}

.pro-service-title-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:48px;
  padding:10px 12px;
  border-radius:14px;
  color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.055);
  border:1px solid transparent;
  font-size:12px;
  font-weight:800;
  line-height:1.35;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}

.pro-service-title-link:hover{
  color:#fff;
  background:rgba(229,200,75,.12);
  border-color:rgba(229,200,75,.24);
  transform:translateX(3px);
}

.pro-service-title-link i{
  color:#ffdf65;
  font-size:10px;
  flex:0 0 auto;
}

.pro-service-request-box{
  margin-top:16px;
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

.pro-service-request-box p{
  margin:0 0 12px;
  color:rgba(255,255,255,.74);
  font-size:12px;
}

.pro-service-request-box a{
  width:100%;
}

.pro-related-services{
  padding:92px 0;
  background:#fff;
}

.pro-related-inner{
  width:min(var(--af-max),calc(100% - 36px));
  margin:0 auto;
}

.pro-related-header{
  max-width:740px;
  margin:0 auto 36px;
  text-align:center;
}

.pro-related-header h2{
  color:var(--af-ink);
  font-size:clamp(30px,4.2vw,50px);
  line-height:1.05;
  letter-spacing:-.05em;
}

.pro-related-header p{
  margin-top:12px;
  color:var(--af-muted);
}

.pro-related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.pro-related-card{
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--af-line);
  box-shadow:var(--af-shadow-soft);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}

.pro-related-card:hover{
  transform:translateY(-5px);
  border-color:rgba(229,200,75,.42);
  box-shadow:0 22px 54px rgba(2,8,23,.14);
}

.pro-related-card img{
  width:100%;
  height:190px;
  object-fit:cover;
  transition:transform .5s ease;
}

.pro-related-card:hover img{
  transform:scale(1.04);
}

.pro-related-card-copy{
  padding:19px;
}

.pro-related-card h3{
  color:var(--af-navy-2);
  font-size:17px;
  line-height:1.25;
  letter-spacing:-.025em;
}

.pro-related-card p{
  margin-top:8px;
  color:var(--af-muted);
  font-size:12px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.pro-related-card-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:13px;
  color:var(--af-navy-2);
  font-size:12px;
  font-weight:900;
}

body.afrilime-dark .pro-service-page,
body.afrilime-dark .pro-related-services{
  background:#04101f;
}

body.afrilime-dark .pro-service-article,
body.afrilime-dark .pro-related-card{
  background:#0b1728;
  border-color:rgba(255,255,255,.10);
}

body.afrilime-dark .pro-service-description,
body.afrilime-dark .pro-related-card p{
  color:#cbd5e1;
}

body.afrilime-dark .pro-service-description h1,
body.afrilime-dark .pro-service-description h2,
body.afrilime-dark .pro-service-description h3,
body.afrilime-dark .pro-service-description h4,
body.afrilime-dark .pro-related-header h2,
body.afrilime-dark .pro-related-card h3{
  color:#fff!important;
}

/* ==========================================================
   FOOTER
========================================================== */
.main-footer{
  border-top:1px solid rgba(255,255,255,.08);
}

.footer-container{
  gap:clamp(26px,4vw,48px)!important;
}

.footer-service-box{
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* ==========================================================
   MOTION / REVEAL SYSTEM
========================================================== */
.pro-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .7s cubic-bezier(.2,.8,.2,1),
    transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay:var(--pro-delay,0ms);
  will-change:opacity,transform;
}

.pro-reveal.pro-reveal-left{
  transform:translateX(-28px);
}

.pro-reveal.pro-reveal-right{
  transform:translateX(28px);
}

.pro-reveal.is-visible{
  opacity:1;
  transform:none;
}

.pro-tilt{
  transform-style:preserve-3d;
  will-change:transform;
}

.pro-scroll-progress{
  position:fixed;
  top:0;
  left:0;
  z-index:20000;
  width:100%;
  height:3px;
  pointer-events:none;
  background:transparent;
}

.pro-scroll-progress > span{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--af-gold),var(--af-gold-2),var(--af-blue));
  box-shadow:0 0 14px rgba(229,200,75,.42);
  transform-origin:left center;
}

/* ==========================================================
   RESPONSIVE
========================================================== */
@media(max-width:1100px){
  .pro-service-layout{
    grid-template-columns:minmax(0,1fr) 290px;
    gap:24px;
  }
  .pro-related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:900px){
  :root{
    --topbar-height:0px;
    --main-header-height:72px;
  }

  #top-header{
    display:none!important;
  }

  body{
    padding-top:var(--main-header-height)!important;
  }

  body > header{
    height:var(--main-header-height)!important;
    min-height:var(--main-header-height)!important;
  }

  #navMenu ul li a{
    width:100%;
    min-height:48px;
    justify-content:flex-start;
    padding:0 14px!important;
    border-radius:12px!important;
  }

  .pro-service-layout{
    grid-template-columns:1fr;
    padding-top:34px;
  }

  .pro-service-sidebar{
    position:relative;
    top:auto;
    max-height:none;
    order:-1;
    overflow:visible;
  }

  .pro-service-title-list{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:4px;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
  }

  .pro-service-title-link{
    flex:0 0 min(280px,80vw);
    scroll-snap-align:start;
  }

  .pro-service-request-box{
    display:none;
  }
}

@media(max-width:700px){
  html{
    scroll-padding-top:92px;
  }

  .service-card,
  .project-card,
  .news-card,
  .job-card,
  .award-nav-card,
  .fact-card,
  .story-card,
  .spares-card,
  .contact-card,
  .prospect-card{
    border-radius:20px!important;
  }

  .page-heading{
    margin-top:22px!important;
    padding:40px 20px!important;
    border-radius:24px;
  }

  .career-search{
    padding:12px;
    border-radius:18px;
  }

  .pro-service-hero{
    min-height:360px;
  }

  .pro-service-hero-inner{
    padding:56px 0 44px;
  }

  .pro-service-hero h1{
    font-size:clamp(34px,10vw,48px);
  }

  .pro-service-article{
    padding:22px;
    border-radius:22px;
  }

  .pro-related-services{
    padding:68px 0;
  }

  .pro-related-grid{
    grid-template-columns:1fr;
  }

  .pro-related-card img{
    height:210px;
  }
}

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