/* =========================================================
   SERVICE DETAIL PAGES — Octodanor (shared)
   File: /assets/css/service-detail.css
   Works for: /services/*.html
   ========================================================= */

/* Keep global tokens if present, add only what we need */
:root{
  --brand:#1F5E5B;
  --brand-2:#184C49;
  --ink:#0b2322;
  --surface:#F7F9F9;
  --border:#DDE5E5;
  --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);
  --container:1200px;
}

:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}

/* Shared container (safe even if style.css already has it) */
.container{max-width:var(--container);margin:0 auto;padding:0 1rem;}

/* =========================================================
   HERO
   ========================================================= */

.service-hero{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.service-hero__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 50% 35%, rgba(31,94,91,0.26), transparent 60%),
    linear-gradient(180deg, rgba(11,35,34,0.55), rgba(11,35,34,0.82));
}

.service-hero__inner{
  position:relative;
  z-index:2;
  max-width:980px;
  padding:0 1rem;
}

.service-hero__kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;

  font-family:'Montserrat',sans-serif;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.78rem;

  padding:.45rem .75rem;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
}

.service-hero h1{
  font-family:'Montserrat',sans-serif;
  font-size:3.1rem;
  letter-spacing:0.01em;
  margin:.9rem 0 .8rem;
  line-height:1.15;
}

.service-hero__sub{
  max-width:860px;
  margin:0 auto 1.4rem;
  font-size:1.1rem;
  line-height:1.7;
  color:rgba(255,255,255,0.90);
}

/* CTA row */
.service-hero__cta{
  display:flex;
  gap:.75rem;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:.6rem;
}

/* Button styles (safe: doesn't kill your global .btn) */
.btn-primary{
  background:var(--brand);
  color:#fff;
  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);
}

.btn-ghost{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.22);
  color:#fff;
  padding:.85rem 1.25rem;
  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);
}

/* Optional full-width block button */
.btn-block{width:100%;}

/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.service-main{
  background:#fff;
}

.service-section{
  padding:5.2rem 0;
}

.service-section--muted{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

/* grid */
.service-grid{
  display:grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap:2rem;
  align-items:start;
}

/* Main content panel */
.service-panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-soft);
  padding:2.2rem 2rem;
}

.service-panel h2{
  font-family:'Montserrat',sans-serif;
  font-size:1.9rem;
  color:var(--ink);
  margin-bottom:1rem;
  letter-spacing:0.01em;
}

.service-panel p{
  color:rgba(11,35,34,0.75);
  line-height:1.8;
  margin-bottom:1.1rem;
}

/* Bullets (premium cards) */
.service-bullets{
  display:grid;
  gap:1rem;
  margin-top:1.2rem;
}

.bullet{
  border:1px solid rgba(221,229,229,0.9);
  border-radius:16px;
  padding:1.1rem 1.1rem;
  background:linear-gradient(180deg, #fff, rgba(247,249,249,0.55));
}

.bullet__title{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  color:var(--ink);
  margin-bottom:.45rem;
  letter-spacing:0.01em;
}

.bullet__text{
  color:rgba(11,35,34,0.72);
  line-height:1.7;
}

/* Aside */
.service-aside{
  display:grid;
  gap:1rem;
}

.aside-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-soft);
  padding:1.6rem 1.4rem;
}

.aside-title{
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  letter-spacing:0.02em;
  color:var(--ink);
  margin-bottom:.6rem;
}

.aside-text{
  color:rgba(11,35,34,0.72);
  line-height:1.7;
  margin-bottom:.75rem;
}

.aside-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.6rem;
}

.aside-list li{
  position:relative;
  padding-left:1.05rem;
  color:rgba(11,35,34,0.74);
  line-height:1.6;
}

.aside-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--brand);
}

/* =========================================================
   CAPABILITY BLOCK
   ========================================================= */

.capability{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:2rem;
  align-items:start;

  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-soft);
  padding:2.1rem 2rem;
}

.capability__left h2{
  font-family:'Montserrat',sans-serif;
  font-size:1.9rem;
  color:var(--ink);
  margin-bottom:.6rem;
}

.capability__left p{
  color:rgba(11,35,34,0.72);
  line-height:1.75;
  margin:0;
}

.capability__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.7rem;
}

.capability__list li{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  color:rgba(11,35,34,0.74);
  line-height:1.7;
}

.capability__list .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--brand);
  margin-top:.4rem;
  flex:0 0 auto;
}

/* =========================================================
   FINAL CTA
   ========================================================= */

.service-cta{
  padding:4.2rem 0;
  background:linear-gradient(135deg, #0f2f2e, #0b2322);
  color:#fff;
  border-top:1px solid rgba(255,255,255,0.10);
}

.cta-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.4rem;
  padding:2rem 2rem;
  border-radius:18px;

  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:var(--shadow);
}

.cta-box h2{
  font-family:'Montserrat',sans-serif;
  font-size:1.6rem;
  margin:0 0 .4rem;
  letter-spacing:0.01em;
}

.cta-box p{
  margin:0;
  color:rgba(255,255,255,0.86);
  line-height:1.6;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px){
  .service-grid{
    grid-template-columns:1fr;
  }
  .cta-box{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 640px){
  .service-hero h1{font-size:2.2rem;}
  .service-hero__sub{font-size:1rem;}

  .service-panel{padding:1.6rem 1.2rem;}
  .aside-card{padding:1.4rem 1.1rem;}
  .capability{grid-template-columns:1fr;padding:1.6rem 1.2rem;}
  .cta-box{padding:1.6rem 1.2rem;}
}