/* ============================================================
   Black Ocean Digital — multi-page review build
   Additions only. Everything else is inherited from /styles.css
   ============================================================ */

:root{--nav-h:82px}

/* ---- active nav state ---- */
.nav__links a.is-active{color:#fff}
.nav__links a.is-active::after{transform:scaleX(1)}
.drawer a[aria-current="page"]{color:var(--teal-glow)}

/* ---- inner-page hero ---- */
.page-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--teal-deep);
  padding-top:calc(var(--nav-h,72px) + clamp(3.25rem,7vw,6rem));
  padding-bottom:calc(clamp(3.25rem,7vw,6rem) + 5vw);
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(80% 120% at 12% 0%,rgba(0,151,178,.34),transparent 60%),
    radial-gradient(60% 90% at 100% 20%,rgba(95,210,232,.14),transparent 65%);
}
.page-hero h1{
  font-size:clamp(2.15rem,5.4vw,3.9rem);line-height:1.04;letter-spacing:-.03em;
  color:#fff;margin:0 0 1.15rem;max-width:22ch;
}
.page-hero .lede{max-width:56ch;color:rgba(255,255,255,.82)}
.page-hero .kicker{color:var(--teal-glow)}

/* ---- breadcrumbs ---- */
.crumbs{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
  font-size:var(--text-sm);font-weight:600;color:rgba(255,255,255,.6);
}
.crumbs a{color:rgba(255,255,255,.78);text-decoration:none}
.crumbs a:hover{color:var(--teal-glow);text-decoration:underline;text-underline-offset:3px}
.crumbs span[aria-hidden]{color:rgba(255,255,255,.34)}
.crumbs [aria-current]{color:#fff}

/* ---- service detail blocks ---- */
.svcd-list{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.svcd{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.5rem,3.5vw,3rem);align-items:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.6rem,3.2vw,2.75rem);
  scroll-margin-top:calc(var(--nav-h,72px) + 1.5rem);
}
.svcd__head{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.svcd__head .svc__ico{margin-bottom:0}
.svcd__num{
  font-size:var(--text-sm);font-weight:900;letter-spacing:.14em;
  color:var(--teal-ink);opacity:.55;margin:0;
}
.svcd__body h2{
  font-size:clamp(1.55rem,2.9vw,2.15rem);line-height:1.1;letter-spacing:-.02em;
  margin:0 0 1.1rem;
}
.svcd__body p{color:var(--ink-55);max-width:62ch;margin:0 0 1.05rem}
.svcd__body h3{
  font-size:var(--text-sm);font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);margin:1.9rem 0 1rem;
}
.svcd .arrow-link{margin-top:1.75rem}
@media (max-width:720px){
  .svcd{grid-template-columns:1fr;gap:1.4rem}
  .svcd__head{flex-direction:row;align-items:center;gap:1.1rem}
}

/* ---- tick lists ---- */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.ticks li{
  position:relative;padding-left:1.85rem;
  color:var(--ink-70);font-size:var(--text-sm);line-height:1.6;
}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:13px;height:8px;
  border-left:2.2px solid var(--teal);border-bottom:2.2px solid var(--teal);
  transform:rotate(-45deg);border-radius:1px;
}
@media (max-width:820px){.ticks{grid-template-columns:1fr}}

/* ---- closing CTA band ---- */
.cta-band{text-align:center}
.cta-band .wrap{max-width:760px}
.cta-band h2{color:#fff;margin-bottom:1.1rem}
.cta-band .kicker{justify-content:center;color:var(--teal-glow)}
.cta-band .lede{margin:0 auto 2.15rem;color:rgba(255,255,255,.8)}
.cta-band__actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ---- contact page: the form section doubles as the hero ---- */
.contact--page{padding-top:calc(var(--nav-h,72px) + clamp(2.75rem,6vw,5rem))}

/* ---- "see more" link under a card grid ---- */
.section-more{margin:clamp(1.75rem,3vw,2.5rem) 0 0}

/* contact page: promote the section heading to hero scale */
.contact--page h1{
  font-size:clamp(2.15rem,5.4vw,3.9rem);line-height:1.04;letter-spacing:-.03em;
  color:#fff;margin:0 0 1.1rem;max-width:20ch;
}
.contact--page .crumbs{margin-bottom:clamp(1.25rem,2.5vw,2rem)}