/* Organic Cart Studio Crafted Interactive Pro 10.6
   Service chapter rail, black service titles and homepage title refinement.
   Visual layer only. No content, URL, metadata or database behavior changes. */

/* Service-page hero titles stay black on the light editorial surface. */
body.ocs-service-detail .svc-hero h1,
body.ocs-service-detail .service-hero h1,
body.ocs-service-detail .ocs-legacy-service__hero h1{
  color:#07110c!important;
  -webkit-text-fill-color:#07110c!important;
}

/* Homepage title: black statement followed by one stronger green line. */
.home .ocs-crafted-hero h1{
  color:#07110c!important;
  -webkit-text-fill-color:#07110c!important;
}
.home .ocs-crafted-hero h1 em{
  color:#087a4d!important;
  -webkit-text-fill-color:#087a4d!important;
  font-style:italic;
}

/* Service pages use the same premium six-chapter interaction language. */
.ocs-service-chapter-rail{
  --rail-progress:0%;
}
.ocs-service-chapter-rail .ocs-chapter-rail__progress i{
  height:var(--rail-progress);
  background:#087a4d;
}
.ocs-service-chapter-rail a:hover,
.ocs-service-chapter-rail a.is-active{
  color:#075c3b;
}
.ocs-service-chapter-rail a.is-active span{
  color:#075c3b;
}
.ocs-service-chapter-rail>small{
  color:#344a3f;
}

/* The rail should become visible after the service hero starts leaving view. */
body.ocs-service-detail.ocs-chapters-visible .ocs-service-chapter-rail{
  opacity:1;
  pointer-events:auto;
}

/* Anchored service sections get comfortable scroll positioning. */
body.ocs-service-detail [data-service-chapter]{
  scroll-margin-top:118px;
}

/* Compact, device-safe chapter navigator for tablets and phones. */
@media(max-width:1250px){
  body.ocs-service-detail .ocs-service-chapter-rail{
    display:grid!important;
    position:fixed;
    z-index:80;
    left:max(10px,env(safe-area-inset-left));
    right:max(10px,env(safe-area-inset-right));
    bottom:max(10px,env(safe-area-inset-bottom));
    top:auto;
    transform:none;
    grid-template-columns:minmax(0,1fr) auto;
    gap:9px 12px;
    align-items:center;
    padding:10px 12px 9px;
    border:1px solid rgba(7,17,12,.18);
    background:rgba(241,238,228,.96);
    box-shadow:0 12px 35px rgba(7,17,12,.14);
    backdrop-filter:blur(14px);
    opacity:0;
  }
  body.ocs-service-detail .ocs-service-chapter-rail__progress,
  body.ocs-service-detail .ocs-service-chapter-rail .ocs-chapter-rail__progress{
    grid-column:1/-1;
    grid-row:1;
    width:100%;
    height:2px;
    background:rgba(7,17,12,.14);
  }
  body.ocs-service-detail .ocs-service-chapter-rail .ocs-chapter-rail__progress i{
    display:block;
    width:var(--rail-progress);
    height:100%;
    transition:width .28s ease;
  }
  body.ocs-service-detail .ocs-service-chapter-rail nav{
    grid-column:1;
    grid-row:2;
    display:flex;
    gap:2px;
    min-width:0;
    overflow-x:auto;
    scrollbar-width:none;
  }
  body.ocs-service-detail .ocs-service-chapter-rail nav::-webkit-scrollbar{display:none}
  body.ocs-service-detail .ocs-service-chapter-rail a{
    display:flex;
    grid-template-columns:none;
    min-width:38px;
    min-height:34px;
    align-items:center;
    justify-content:center;
    padding:0 7px;
    border:1px solid transparent;
    color:#526159;
  }
  body.ocs-service-detail .ocs-service-chapter-rail a span{
    font-size:.72rem;
  }
  body.ocs-service-detail .ocs-service-chapter-rail a b{
    display:none;
  }
  body.ocs-service-detail .ocs-service-chapter-rail a.is-active{
    border-color:#087a4d;
    background:#087a4d;
    color:#fff;
  }
  body.ocs-service-detail .ocs-service-chapter-rail a.is-active span{color:#fff}
  body.ocs-service-detail .ocs-service-chapter-rail>small{
    grid-column:2;
    grid-row:2;
    white-space:nowrap;
    font-size:.56rem;
    letter-spacing:.12em;
  }
  body.ocs-service-detail .site-footer{
    padding-bottom:78px;
  }
}

@media(max-width:420px){
  body.ocs-service-detail .ocs-service-chapter-rail{
    left:7px;
    right:7px;
    bottom:max(7px,env(safe-area-inset-bottom));
    padding:9px 9px 8px;
  }
  body.ocs-service-detail .ocs-service-chapter-rail a{
    min-width:31px;
    padding:0 5px;
  }
  body.ocs-service-detail .ocs-service-chapter-rail>small{
    font-size:.5rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .ocs-service-chapter-rail,
  .ocs-service-chapter-rail *{
    transition:none!important;
  }
}


/* 10.6.1: keep service chapter numbers as clean single-line labels. */
.ocs-service-chapter-rail a span{
  display:inline-flex!important;
  align-items:center;
  justify-content:flex-start;
  min-width:24px;
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  line-height:1!important;
}
.ocs-service-chapter-rail>small{
  white-space:nowrap!important;
  line-height:1!important;
}
@media(max-width:1250px){
  body.ocs-service-detail .ocs-service-chapter-rail a span{
    min-width:auto;
    justify-content:center;
  }
}

/* 10.6.2: section numbers stay beside their labels on every device. */
.ocs-legacy-service .ocs-service-section-head{
  display:grid!important;
  grid-template-columns:clamp(34px,4vw,58px) minmax(0,1fr)!important;
  align-items:start!important;
  column-gap:clamp(12px,2vw,24px)!important;
  row-gap:0!important;
}
.ocs-legacy-service .ocs-service-section-head>span{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:.12em 0 0!important;
  font-size:clamp(1rem,2vw,1.55rem)!important;
  line-height:1!important;
  white-space:nowrap!important;
  color:var(--ocs-primary)!important;
}
.ocs-legacy-service .ocs-service-section-head>div{
  min-width:0!important;
}
.ocs-legacy-service .ocs-service-section-head small{
  display:block!important;
  margin:0 0 10px!important;
  line-height:1.25!important;
}
@media(max-width:900px){
  .ocs-legacy-service .ocs-service-section-head{
    grid-template-columns:30px minmax(0,1fr)!important;
    gap:12px!important;
  }
  .ocs-legacy-service .ocs-service-section-head>span{
    font-size:1rem!important;
  }
}

/* 10.6.2: only the crafted full-screen menu is visible on mobile. */
@media(max-width:1040px){
  .site-header .desktop-navigation,
  .site-header .site-navigation,
  .site-header #primary-menu{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  #mobile-menu .ocs-menu-primary{
    display:block!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
}

/* The homepage trigger is icon-only, as requested. */
body.home .menu-toggle{
  width:44px!important;
  min-width:44px!important;
  padding:0!important;
  justify-content:center!important;
}
body.home .menu-toggle>span{
  display:none!important;
}

/* The overlay contains one navigation list plus a compact contact note. */
.ocs-menu-contact{
  display:block!important;
  align-self:end;
}
.ocs-menu-contact>div{
  max-width:360px;
}
.ocs-menu-contact p{
  margin:0 0 10px;
}
@media(max-width:760px){
  .ocs-menu-contact{
    padding-top:4px;
    border-top:1px solid rgba(255,255,255,.14);
  }
}
