/* Services page styles (page-level) ---------------------------------- */
:root{
  --navy:#0A1F44;
  --orange:#FF7A00;
  --white:#FFFFFF;
  --muted:#6C757D;
  --container:1200px;
  --transition:.45s cubic-bezier(.2,.9,.2,1);

  /* premium tokens */
  --brand:#1F5E5B;            /* Octodanor primary teal */
  --brand-2:#184C49;          /* hover teal */
  --ink:#0b2322;              /* deep ink */
  --surface:#F7F9F9;          /* off-white surface */
  --border:#DDE5E5;           /* soft border */
  --shadow:0 18px 46px rgba(0,0,0,0.18);
  --shadow-soft:0 10px 30px rgba(6,20,40,0.10);
  --focus:rgba(31,94,91,0.35);

  /* ADDED: service index styling tokens */
  --radius:16px;
  --radius-sm:12px;
}

/* stronger focus styles */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}

/* Base container */
.container{max-width:var(--container);margin:0 auto;padding:0 1rem;}

/* HERO */
.hero-landing{
  height:78vh; min-height:520px; display:flex; align-items:center; justify-content:center;
  position:relative; color:var(--white);
  background:
    linear-gradient(135deg, rgba(15,47,46,0.92), rgba(11,35,34,0.92)),
    url('../img/hero-services.jpg') center/cover no-repeat;
}
.hero-landing::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1000px 520px at 50% 35%, rgba(31,94,91,0.22), transparent 60%),
    linear-gradient(180deg, rgba(6,21,47,0.25), rgba(6,21,47,0.55));
}

.hero-inner{position:relative;text-align:center;z-index:2;max-width:900px;padding:0 1rem;}
.hero-inner h1{
  font-family:'Montserrat',sans-serif;
  font-size:3rem;
  color:var(--white);
  margin-bottom:.4rem;
  letter-spacing:0.02em;
}
.hero-inner .sub{
  font-size:1.1rem;
  color:rgba(255,255,255,0.92);
  margin-bottom:1.2rem;
  line-height:1.7;
}

.btn-ghost{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.22);
  color:#fff;
  padding:.75rem 1.1rem;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn-ghost:hover{
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.30);
  transform:translateY(-1px);
}

/* ============================= */
/* SERVICE INDEX (ADDED/FIXED)   */
/* ============================= */
.service-index{
  padding:3.5rem 0 2.5rem;
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.index-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
}
.index-card{
  display:block;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid rgba(11,35,34,0.10);
  border-radius:var(--radius);
  padding:1.15rem 1.1rem;
  box-shadow:0 8px 22px rgba(6,20,40,0.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;
  overflow:hidden;
}
.index-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(31,94,91,0.12), transparent 55%);
  opacity:0;
  transition:opacity .18s ease;
}
.index-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(6,20,40,0.10);
  border-color:rgba(31,94,91,0.30);
}
.index-card:hover::before{opacity:1;}
.index-title{
  position:relative;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  color:var(--ink);
  letter-spacing:0.01em;
  margin-bottom:.35rem;
}
.index-meta{
  position:relative;
  color:rgba(11,35,34,0.70);
  font-size:.95rem;
  line-height:1.5;
}
.index-card:focus-visible{
  border-color:rgba(31,94,91,0.45);
  box-shadow:0 0 0 4px rgba(31,94,91,0.18), 0 14px 30px rgba(6,20,40,0.10);
}

/* PARALLAX */
.parallax-section{
  position:relative;
  min-height:62vh;
  display:flex;
  align-items:center;
  padding:4rem 0;
  overflow:hidden;
  color:#fff;

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.parallax-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.08);
  transition:transform 1.2s ease;
  z-index:-1;
}
.parallax-section .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(11,35,34,0.60), rgba(11,35,34,0.78));
  z-index:0;
}

.parallax-section .content{
  position:relative;
  z-index:2;
  max-width:1100px;
  margin:0 auto;
  padding:2.2rem 2.1rem;
  border-radius:16px;
  backdrop-filter:blur(8px);

  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:var(--shadow);
}
.parallax-section h2{
  font-family:'Montserrat',sans-serif;
  font-size:2rem;
  letter-spacing:0.01em;
  margin-bottom:.6rem;
}
.parallax-section p{
  color:rgba(255,255,255,0.92);
  max-width:780px;
  line-height:1.7;
  margin-bottom:.35rem;
}
.parallax-section .link{
  color:rgba(255,255,255,0.95);
  font-weight:800;
  text-decoration:none;
  margin-top:.8rem;
  display:inline-block;
  border-bottom:1px solid rgba(255,255,255,0.28);
  padding-bottom:.15rem;
}
.parallax-section .link:hover{
  border-bottom-color:rgba(255,255,255,0.55);
}
.parallax-section[data-side="left"] .content{margin-left:6%;text-align:left;transform:translateX(-10px);opacity:0;}
.parallax-section[data-side="right"] .content{margin-right:6%;text-align:right;transform:translateX(10px);opacity:0;}
.parallax-section.visible .content{transform:translateX(0);opacity:1;transition:transform .7s ease,opacity .6s ease;}

/* embedded compliance/process block */
.compliance-block{
  margin-top:1.35rem;
  padding:1.1rem 1.1rem;
  border-radius:14px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.16);
}
.compliance-title{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  letter-spacing:0.02em;
  margin-bottom:.7rem;
  color:rgba(255,255,255,0.95);
}
.compliance-list{list-style:none;padding:0;margin:0;}
.compliance-list li{
  position:relative;
  padding-left:1.05rem;
  margin:.55rem 0;
  color:rgba(255,255,255,0.90);
  line-height:1.6;
}
.compliance-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.65em;
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--brand);
}

/* SLIDER (kept; not used on your current HTML, but safe) */
.case-highlights{
  padding:4rem 0;
  background:var(--surface);
  color:var(--ink);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.section-header{text-align:center;margin-bottom:2rem;}
.slider{position:relative;max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:1rem;}
.slides{
  position:relative;
  flex:1;
  overflow:hidden;
  border-radius:12px;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(11,35,34,0.10);
}
.slide{position:absolute;inset:0;opacity:0;transform:translateX(20px);transition:all .6s ease;}
.slide.active{opacity:1;transform:translateX(0);}
.slide img{width:100%;height:420px;object-fit:cover;border-radius:12px;filter:brightness(.7);}
.slide .caption{
  position:absolute;left:1rem;bottom:1rem;
  background:rgba(11,35,34,0.78);
  color:#fff;
  padding:.65rem .95rem;
  border-radius:10px;
  font-weight:700;
  border:1px solid rgba(255,255,255,0.14);
}
.slider-btn{
  background:rgba(255,255,255,0.95);
  border:none;border-radius:50%;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;cursor:pointer;
  box-shadow:0 6px 18px rgba(6,20,40,0.12);
  transition:transform .2s ease, box-shadow .2s ease;
}
.slider-btn:hover{transform:scale(1.05);box-shadow:0 10px 22px rgba(6,20,40,0.16);}
.dots{display:flex;gap:.5rem;justify-content:center;margin-top:.9rem;}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(10,31,68,0.2);cursor:pointer;}
.dot.active{background:var(--brand);}
.view-all{margin-top:2rem;}

/* CTA */
.final-cta{
  padding:3.8rem 0;
  background:linear-gradient(135deg, #0f2f2e, #0b2322);
  color:#fff;
  text-align:center;
  border-top:1px solid rgba(255,255,255,0.10);
}
.final-cta h2{
  font-family:'Montserrat',sans-serif;
  font-size:1.6rem;
  margin-bottom:1.2rem;
  line-height:1.35;
  letter-spacing:0.01em;
}
.btn-primary{
  background:var(--brand);
  color:var(--white);
  padding:.95rem 1.7rem;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--brand);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn-primary:hover{
  background:var(--brand-2);
  border-color:var(--brand-2);
  transform:translateY(-1px);
}

/* MOBILE NAV & DROPDOWN */
@media (max-width:900px){
  header nav ul{
    position:absolute;top:100%;left:0;right:0;background:var(--navy);
    flex-direction:column;align-items:stretch;
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height 0.35s ease,opacity 0.35s ease;
  }
  header nav ul.active{max-height:700px;opacity:1;visibility:visible;}
  header nav ul li{border-top:1px solid rgba(255,255,255,0.08);}
  header nav ul li .dropdown-menu{
    position:static;background:rgba(255,255,255,0.05);
    padding:0;margin:0;max-height:0;overflow:hidden;
    transition:max-height 0.35s ease,padding 0.25s ease;
    border-left:3px solid var(--brand);
  }
  header nav ul li.dropdown.open > .dropdown-menu{
    max-height:400px;padding:.6rem 1rem;
  }
  header nav ul li .dropdown-menu li a{
    padding:.6rem 0;color:var(--white);display:block;
  }
  .menu-toggle{display:block;background:none;border:none;color:var(--white);font-size:1.8rem;cursor:pointer;}
}

/* RESPONSIVE: index grid + content boxes */
@media (max-width:1100px){
  .index-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:640px){
  .index-grid{grid-template-columns:1fr;}
  .parallax-section .content{padding:1.6rem 1.2rem;border-radius:14px;}
  .parallax-section[data-side="left"] .content,
  .parallax-section[data-side="right"] .content{
    margin-left:auto;
    margin-right:auto;
    text-align:left;
  }
}

/* SMALL SCREEN */
@media (max-width:420px){
  .hero-inner h1{font-size:1.8rem;}
  .hero-inner .sub{font-size:.95rem;}
  .slide img{height:180px;}
}
/* ============================= */
/* FIX: FORCE OCTODANOR NAV LOOK */
/* (override global style.css)   */
/* ============================= */

header{
  background:linear-gradient(135deg, #0f2f2e, #0b2322) !important;
  border-bottom:1px solid rgba(255,255,255,0.10);
}

.logo span{
  color:rgba(255,255,255,0.95) !important;
  letter-spacing:.06em;
}

nav ul li a{
  color:rgba(255,255,255,0.92) !important;
}

nav ul li a:hover{
  color:rgba(255,255,255,1) !important;
}

/* Ensure the CTA button matches Octodanor brand */
nav .nav-cta .btn,
nav ul li.nav-cta a.btn{
  background:var(--brand) !important;
  border:1px solid var(--brand) !important;
  color:var(--white) !important;
  border-radius:12px !important;
  font-weight:800 !important;
  padding:.85rem 1.3rem !important;
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
}

nav .nav-cta .btn:hover,
nav ul li.nav-cta a.btn:hover{
  background:var(--brand-2) !important;
  border-color:var(--brand-2) !important;
  transform:translateY(-1px);
}

/* Mobile menu background should also align */
@media (max-width:900px){
  header nav ul{
    background:linear-gradient(135deg, #0f2f2e, #0b2322) !important;
  }
}


/* ============================= */
/* FIX: REMOVE GAP ABOVE FOOTER  */
/* ============================= */
.final-cta{ margin-bottom:0 !important; }
.site-footer{ margin-top:0 !important; }
main#services{ padding-bottom:0 !important; }


/* ============================= */
/* FIX: OCTODANOR FOOTER THEME   */
/* ============================= */
.site-footer{
  background:linear-gradient(135deg, #0f2f2e, #0b2322) !important;
  color:rgba(255,255,255,0.92) !important;
  border-top:1px solid rgba(255,255,255,0.10);
}

.footer-col h4{
  color:rgba(255,255,255,0.92) !important;
  letter-spacing:.02em;
}

.footer-col a,
.footer-col p{
  color:rgba(255,255,255,0.80) !important;
}

.footer-col a:hover{
  color:rgba(255,255,255,0.98) !important;
}

.footer-log span{
  color:rgba(255,255,255,0.95) !important;
  letter-spacing:.06em;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12) !important;
  color:rgba(255,255,255,0.75) !important;
}