/* ============================================================
   SHIPVEST — Service page design layer (v2)
   Scoped to <main class="svc2">. Content-agnostic: restyles the
   existing section markup into a new editorial layout system.
   ============================================================ */

.svc2{ --ink:#03045E; --ink-soft:#4a6e9e; --line:#E1ECF6; --accent:#0077B6; --accent-2:#00B4D8; }

/* ---------- section rhythm & transitions ---------- */
.svc2 > section{ position:relative; }
.svc2 > section.bg-white,
.svc2 > section.bg-navy-50\/40{ padding-top:clamp(4rem,7vw,6.5rem); padding-bottom:clamp(4rem,7vw,6.5rem); }
.svc2 > section.bg-navy-50\/40{
  background:linear-gradient(180deg,#F7FBFE 0%,#EEF6FC 100%);
}
.svc2 > section.bg-white + section.bg-white{ padding-top:0; }
.svc2 > section.bg-navy-50\/40::before,
.svc2 > section.bg-white + section.bg-navy-50\/40::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,180,216,.45),transparent);
}

/* ---------- headings ---------- */
.svc2 h2{ letter-spacing:.01em; }
.svc2 h2::after{
  content:""; display:block; width:3.25rem; height:3px; margin-top:1.1rem;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.svc2 .text-center h2::after{ margin-left:auto; margin-right:auto; }

/* ---------- prose ---------- */
.svc2 .spp-lead-text{
  position:relative; padding-left:1.4rem; margin-top:1.75rem;
  font-size:1.0625rem; line-height:1.75; color:var(--ink); font-weight:500;
}
.svc2 .spp-lead-text::before{
  content:""; position:absolute; left:0; top:.35rem; bottom:.35rem; width:3px;
  background:linear-gradient(180deg,var(--accent-2),rgba(0,180,216,0));
}
.svc2 .spp-text{ color:var(--ink-soft); }
@media (min-width:640px){ .svc2 .spp-lead-text{ font-size:1.1875rem; } }

/* ---------- media: layered editorial frames ---------- */
.svc2 .spp-figure,
.svc2 .page-media-frame{
  position:relative; overflow:hidden; margin:0;
  box-shadow:0 30px 70px -34px rgba(3,4,94,.55);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.svc2 .spp-figure img,
.svc2 .page-media-frame img{
  display:block; width:100%; height:auto;
  transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.svc2 .spp-figure:hover,
.svc2 .page-media-frame:hover{ transform:translateY(-5px); box-shadow:0 44px 90px -36px rgba(3,4,94,.6); }
.svc2 .spp-figure:hover img,
.svc2 .page-media-frame:hover img{ transform:scale(1.06); filter:saturate(1.06); }

/* corner rule, desktop only, anchored to the media block */
@media (min-width:1024px){
  .svc2 .svc-frame{ position:relative; }
  .svc2 .svc-frame::before{
    content:""; position:absolute; right:-1rem; bottom:-1rem; width:56%; height:58%;
    border-right:2px solid rgba(0,180,216,.55); border-bottom:2px solid rgba(0,180,216,.55);
    pointer-events:none; z-index:0;
  }
  .svc2 .svc-frame > *{ position:relative; z-index:1; }
}

/* ---------- panels ---------- */
.svc2 .svc-panel-light,
.svc2 .svc-panel-dark{ border-radius:0; }

/* ---------- capability index (replaces boxed chips) ---------- */
.svc2 .spp-grid{
  counter-reset:svcidx; margin-top:clamp(2.5rem,4vw,3.5rem);
  gap:0; grid-template-columns:1fr;
  border-top:1px solid var(--line);
}
@media (min-width:768px){ .svc2 .spp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(2rem,4vw,4rem); } }
@media (min-width:1280px){ .svc2 .spp-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.svc2 .spp-item{
  counter-increment:svcidx;
  position:relative; display:flex; align-items:center; gap:1rem;
  padding:1.05rem 1.1rem 1.05rem .25rem;
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  background:transparent; box-shadow:none;
  transition:padding-left .35s cubic-bezier(.2,.7,.2,1), background-color .35s ease;
}
.svc2 .spp-item::before{
  content:counter(svcidx,decimal-leading-zero);
  font-family:'Bebas Neue',sans-serif; font-size:.95rem; letter-spacing:.08em;
  color:#9BB6D4; transition:color .35s ease;
}
.svc2 .spp-item::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .45s cubic-bezier(.2,.7,.2,1);
}
.svc2 .spp-item:hover{ transform:none; padding-left:.9rem; background:rgba(234,249,253,.55); }
.svc2 .spp-item:hover::before{ color:var(--accent); }
.svc2 .spp-item:hover::after{ width:100%; }
.svc2 .spp-item-icon{ display:none; }
.svc2 .spp-item-label{ font-size:.975rem; font-weight:500; color:var(--ink); line-height:1.45; }

/* ---------- capability cards (pages that use card grids) ---------- */
.svc2 .group.rounded-2xl{
  border-color:var(--line);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.svc2 .group.rounded-2xl:hover{ transform:translateY(-4px); border-color:#90E0EF; }

/* ---------- eyebrow ---------- */
.svc2 .uppercase.tracking-\[0\.22em\]{ font-size:.7rem; }

/* ---------- bright accent bands (replaces the old dark navy blocks) ---------- */
.svc2 section.bg-navy-800{
  background:
    radial-gradient(60rem 32rem at 12% -10%, rgba(0,180,216,.16), transparent 62%),
    radial-gradient(48rem 30rem at 92% 108%, rgba(0,119,182,.13), transparent 60%),
    linear-gradient(180deg,#FBFDFF 0%,#F2F8FD 100%);
  overflow:hidden;
}
/* fine engineering grid, very low contrast */
.svc2 section.bg-navy-800::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(3,4,94,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(3,4,94,.045) 1px, transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 40%, #000 30%, transparent 100%);
  mask-image:radial-gradient(75% 65% at 50% 40%, #000 30%, transparent 100%);
}
.svc2 section.bg-navy-800 > *{ position:relative; z-index:1; }
/* invert the inverted type back to ink */
.svc2 section.bg-navy-800 .text-white:not(a):not(button),
.svc2 section.bg-navy-800 h2,
.svc2 section.bg-navy-800 h3{ color:var(--ink) !important; }
.svc2 section.bg-navy-800 a.bg-teal-500{ color:#fff !important; }
.svc2 section.bg-navy-800 .text-sky-300,
.svc2 section.bg-navy-800 .text-sky-200,
.svc2 section.bg-navy-800 .text-teal-300{ color:#0077B6 !important; }
.svc2 section.bg-navy-800 .spp-text-invert{ color:var(--ink-soft) !important; }
.svc2 section.bg-navy-800 .bg-sky-300\/60,
.svc2 section.bg-navy-800 .bg-white\/10,
.svc2 section.bg-navy-800 .bg-white\/15{ background:rgba(0,119,182,.28) !important; }
.svc2 section.bg-navy-800 .border-white\/10,
.svc2 section.bg-navy-800 .border-white\/15,
.svc2 section.bg-navy-800 .border-white\/20{ border-color:var(--line) !important; }
.svc2 section.bg-navy-800 .bg-white\/5,
.svc2 section.bg-navy-800 .bg-white\/\[0\.04\]{ background:#fff !important; box-shadow:0 24px 60px -40px rgba(3,4,94,.4); }
.svc2 section.bg-navy-800 .svc-highlight::before{ background:linear-gradient(180deg,#0077B6,rgba(0,119,182,0)); }
/* drop the dark photo + navy overlay layer inside these bands */
.svc2 section.bg-navy-800 > .absolute.inset-0[aria-hidden="true"]{ display:none; }
/* the white outline button needs a real fill on a light band */
.svc2 section.bg-navy-800 a.bg-white{
  background:#03045E !important; color:#fff !important;
  box-shadow:0 18px 40px -18px rgba(3,4,94,.55);
}
.svc2 section.bg-navy-800 a.bg-white:hover{ background:#012A4A !important; }
.svc2 section.bg-navy-800 .border-white\/15{ border-color:rgba(0,119,182,.28) !important; }
.svc2 section.bg-navy-800 .bg-white\/5{ background:rgba(0,180,216,.10) !important; box-shadow:none; }

/* ---------- asymmetric editorial split ---------- */
@media (min-width:1024px){
  .svc2 section > .grid.lg\:grid-cols-2{ grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr); column-gap:clamp(3rem,5vw,5.5rem); }
  .svc2 section > .grid.lg\:grid-cols-2 > .max-w-2xl,
  .svc2 section > .grid.lg\:grid-cols-2 > .max-w-xl{ max-width:34rem; }
}
/* stacked image pairs inside a media column read as one composition */
.svc2 .service-media > .grid{ gap:.75rem; margin-top:.75rem; }

/* ---------- stage composition: wide media + overlapping note card ---------- */
.svc-stage{ position:relative; }
.svc-stage-media img{ width:100%; height:auto; display:block; object-fit:cover; aspect-ratio:16/7; }
.svc-stage-card{
  position:relative; z-index:2; background:#fff; border:1px solid var(--line);
  padding:1.75rem; margin-top:1rem; box-shadow:0 30px 70px -38px rgba(3,4,94,.45);
}
.svc-stage-card::before{
  content:""; position:absolute; left:0; top:0; width:4.5rem; height:3px;
  background:linear-gradient(90deg,#0077B6,#00B4D8);
}
@media (min-width:1024px){
  .svc-stage-card{ margin:-5.5rem 0 0 3.5rem; max-width:46rem; padding:2.5rem 3rem; }
}

/* ---------- offset image duo ---------- */
.svc-duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:start; }
@media (min-width:1024px){ .svc-duo > :last-child{ transform:translateY(3rem); } }

/* ---------- highlight block (dark band text) ---------- */
.svc-highlight{ position:relative; padding-left:1.5rem; }
.svc-highlight::before{
  content:""; position:absolute; left:0; top:.25rem; bottom:.25rem; width:2px;
  background:linear-gradient(180deg,#00B4D8,rgba(0,180,216,0));
}

.svc-highlight-light{ position:relative; padding-left:1.5rem; }
.svc-highlight-light::before{
  content:""; position:absolute; left:0; top:.25rem; bottom:.25rem; width:2px;
  background:linear-gradient(180deg,#0077B6,rgba(0,119,182,0));
}

/* ---------- bright feature band (replaces heavy navy mid-page bands) ---------- */
.svc-lightband{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(0,180,216,.13) 0%, rgba(0,180,216,0) 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(0,119,182,.12) 0%, rgba(0,119,182,0) 60%),
    linear-gradient(180deg,#FCFEFF 0%,#F1F8FD 100%);
}
.svc-lightband::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(3,4,94,.10) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(115deg, rgba(0,0,0,.55), transparent 62%);
  mask-image:linear-gradient(115deg, rgba(0,0,0,.55), transparent 62%);
}
.svc-lightband::after{
  content:""; position:absolute; right:-6rem; top:-6rem; width:26rem; height:26rem;
  border:1px solid rgba(0,180,216,.22); border-radius:999px; pointer-events:none;
}
.svc-lightband > .pointer-events-none{ display:none; }
.svc-lightband .spp-text-invert{ color:#4a6e9e; }
.svc-lightband .text-sky-300{ color:#0077B6; }
.svc-lightband .bg-sky-300\/60{ background-color:#00B4D8; }
.svc-lightband .svc-highlight::before{ background:linear-gradient(180deg,#0077B6,rgba(0,119,182,0)); }

/* ---------- capability cards (Image-1 pattern) ---------- */
.svc2 .spp-grid{
  counter-reset:none;
  border-top:0;
  gap:1rem;
  grid-template-columns:1fr;
  margin-top:clamp(2.5rem,4vw,3.5rem);
}
@media (min-width:640px){ .svc2 .spp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .svc2 .spp-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.125rem; } }

.svc2 .spp-item{
  counter-increment:none;
  position:relative; display:flex; align-items:center; gap:1rem;
  padding:1.15rem 1.35rem;
  border:1px solid #E6EEF7; border-radius:14px;
  background:#fff;
  box-shadow:0 10px 26px -20px rgba(3,4,94,.45);
  overflow:hidden;
  transition:transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease, border-color .38s ease;
}
.svc2 .spp-item::before{ content:none; }
.svc2 .spp-item::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  transform:scaleY(0); transform-origin:top; opacity:0;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
  height:auto;
}
.svc2 .spp-item:hover{
  transform:translateY(-4px);
  padding-left:1.35rem;
  background:#fff;
  border-color:#BFE6F5;
  box-shadow:0 26px 48px -26px rgba(3,4,94,.4);
}
.svc2 .spp-item:hover::after{ transform:scaleY(1); opacity:1; width:3px; }

.svc2 .spp-item-icon{
  display:inline-flex; align-items:center; justify-content:center;
  flex:none; height:2.85rem; width:2.85rem; border-radius:999px;
  background:#EAF6FD; color:#0077B6;
  transition:background-color .38s ease, color .38s ease, transform .38s cubic-bezier(.2,.7,.2,1);
}
.svc2 .spp-item-icon svg{ height:1.25rem; width:1.25rem; }
.svc2 .spp-item:hover .spp-item-icon{ background:#0077B6; color:#fff; transform:scale(1.06); }

.svc2 .spp-item-label{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.05rem; font-weight:400; letter-spacing:.045em; line-height:1.2;
  color:var(--ink); text-transform:uppercase;
}