/* Private background-depth study. No content, layout, typography or project
   presentation changes. Custom vector reliefs are decorative backgrounds. */
.hero { isolation:isolate; background:linear-gradient(110deg,#edf2f5 0%,#edf2f5 48%,#d4e3eb 100%); }
.hero::before {
  content:""; position:absolute; z-index:0; width:clamp(630px,64vw,960px);
  aspect-ratio:960/570; right:-100px; top:12px;
  background:url('../assets/brand-depth/ok-relief-light.svg') center/contain no-repeat;
  transform:rotate(-9deg); pointer-events:none;
}
/* Contained dark field, with no extra panel or content spacing. */
.problem { background:#edf2f5; isolation:isolate; }
.problem::before {
  content:""; position:absolute; z-index:-1; inset:0 24px; border-radius:12px;
  background:linear-gradient(115deg,#0a3446,#104459); pointer-events:none;
}
/* A continuous ground removes the mechanical every-other-section stripe. */
.services,.platform,.work { background-color:#edf2f5; }
.platform::before {
  content:""; position:absolute; top:0; left:max(24px,calc((100% - 732px)/2));
  right:max(24px,calc((100% - 732px)/2)); height:1px;
  background:#c0d2dc; pointer-events:none;
}
/* Depth belongs to surfaces. Work imagery and its original frame are retained. */
.service-card,.price-card:not(.price-card--featured) {
  box-shadow:0 2px 0 #cedee6,0 12px 25px -20px #0a344680;
}
.service-card:hover { box-shadow:0 2px 0 #c5d8e2,0 8px 20px -15px #0a344673; }
.price-card--featured { box-shadow:0 6px 0 #b0c637,0 18px 30px -22px #0a344680; }
.why { background-color:#0a3446; }
.about { isolation:isolate; overflow:hidden; background:linear-gradient(110deg,#0a3446 0%,#0a3446 62%,#103e51 100%); }
.about::before {
  content:""; position:absolute; z-index:0; width:840px; aspect-ratio:960/570;
  right:-370px; bottom:-50px; transform:rotate(-9deg);
  background:url('../assets/brand-depth/ok-relief-dark.svg') center/contain no-repeat;
  pointer-events:none;
}
.about .container { position:relative; z-index:1; }
.cta-band__inner {
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(115deg,#e5edf2,#d6e4ec);
  box-shadow:0 7px 0 #bfd2dc,0 16px 30px -24px #0a344680;
}
.cta-band__inner::before {
  content:""; position:absolute; z-index:-1; width:520px; aspect-ratio:960/570;
  right:-160px; bottom:-130px; transform:rotate(-9deg);
  background:url('../assets/brand-depth/ok-relief-light.svg') center/contain no-repeat;
  pointer-events:none;
}
/* Restrained echoes across the existing service and supporting page openings. */
.about-hero,.work-hero,.pricing-hero,.wd-hero,.seo-hero,.care-hero {
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(110deg,#edf2f5 0%,#edf2f5 62%,#dce8ee 100%);
}
.about-hero::before,.work-hero::before,.pricing-hero::before,
.wd-hero::before,.seo-hero::before,.care-hero::before {
  content:""; position:absolute; z-index:-1; width:530px; aspect-ratio:960/570;
  right:-310px; bottom:-80px; transform:rotate(-9deg);
  background:url('../assets/brand-depth/ok-relief-light.svg') center/contain no-repeat;
  pointer-events:none;
}
@media(max-width:1024px) { .hero::before { width:690px; top:auto; bottom:0; right:-140px; } }
@media(max-width:600px) {
  .hero { background:linear-gradient(175deg,#edf2f5 0%,#edf2f5 55%,#d4e3eb 100%); }
  .hero::before { width:560px; top:150px; bottom:auto; right:-360px; opacity:.35; transform:rotate(-9deg); }
  .problem::before { inset:0 10px; border-radius:8px; }
  .about::before { width:530px; right:-300px; bottom:-70px; opacity:.7; }
  .cta-band__inner::before { width:350px; right:-200px; bottom:-80px; opacity:.5; }
  .about-hero::before,.work-hero::before,.pricing-hero::before,
  .wd-hero::before,.seo-hero::before,.care-hero::before { display:none; }
}
@media(forced-colors:active) {
  .hero::before,.problem::before,.platform::before,.about::before,.cta-band__inner::before,
  .about-hero::before,.work-hero::before,.pricing-hero::before,
  .wd-hero::before,.seo-hero::before,.care-hero::before { display:none; }
  .problem { background:Canvas; color:CanvasText; }
}