/* ===== Services — Ocean Transportation ===== */
.s-services{
  position:relative;
  background:var(--c-bg);
  color:var(--c-text);
  padding-block:clamp(56px,8vw,104px);
  overflow:hidden;
  isolation:isolate;
}
.s-services::before{
  content:"";
  position:absolute;
  inset-block-start:-18%;
  inset-inline-end:-12%;
  inline-size:min(560px,62vw);
  aspect-ratio:1;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--c-secondary) 15%, transparent),
    transparent 68%);
  pointer-events:none;
  z-index:0;
}

/* ---------- Section head ---------- */
.s-services .section-head{
  position:relative;
  z-index:1;
  margin-block-end:clamp(32px,4.5vw,56px);
  text-align:center;
}
.s-services .section-head .eyebrow{
  color:var(--c-secondary);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.s-services .section-head h2{
  font-family:var(--font-head);
  color:var(--c-text);
  letter-spacing:.02em;
  line-height:1.2;
  margin-block:12px 0;
}
.s-services .section-head::after{
  content:"";
  display:block;
  inline-size:64px;
  block-size:2px;
  margin-inline:auto;
  margin-block-start:18px;
  background:linear-gradient(90deg,transparent,var(--c-secondary),transparent);
}

/* ---------- Grid ---------- */
.s-services .services-grid,
.s-services .grid-3,
.s-services .s-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,28px);
  align-items:stretch;
}

/* ---------- Card ---------- */
.s-services :is(.card,.service-card,.s-card){
  position:relative;
  display:flex;
  flex-direction:column;
  min-inline-size:0;
  background:linear-gradient(180deg,
    var(--c-surface),
    color-mix(in srgb, var(--c-surface) 86%, var(--c-primary)));
  border:1px solid color-mix(in srgb, var(--c-secondary) 20%, transparent);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.s-services :is(.card,.service-card,.s-card):hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--c-secondary) 52%, transparent);
  box-shadow:var(--shadow-md);
}
.s-services :is(.card,.service-card,.s-card):focus-within{
  border-color:var(--c-secondary);
  outline:none;
}

/* ---------- Card media ---------- */
.s-services :is(.card-media,.card-img,.card__media,.s-card__media){
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 22% 0%,
      color-mix(in srgb, var(--c-secondary) 18%, transparent),
      transparent 62%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--c-surface) 70%, var(--c-primary)),
      var(--c-primary));
  border-block-end:1px solid color-mix(in srgb, var(--c-secondary) 16%, transparent);
}
.s-services :is(.card-media,.card-img,.card__media,.s-card__media) img{
  display:block;
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  color:transparent;
  filter:saturate(.92) contrast(1.04);
  transition:transform .7s ease;
}
.s-services :is(.card,.service-card,.s-card):hover :is(.card-media,.card-img,.card__media,.s-card__media) img{
  transform:scale(1.06);
}
.s-services :is(.card-media,.card-img,.card__media,.s-card__media)::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    transparent 42%,
    color-mix(in srgb, var(--c-primary) 88%, transparent));
  pointer-events:none;
}
/* fallback surface if an image file is ever missing */
.s-services :is(.card-media,.card-img,.card__media,.s-card__media).is-empty{
  background:
    radial-gradient(120% 100% at 30% 0%,
      color-mix(in srgb, var(--c-secondary) 22%, transparent),
      transparent 64%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--c-surface) 82%, var(--c-primary)),
      var(--c-primary));
}
.s-services :is(.card-media,.card-img,.card__media,.s-card__media).is-empty::after{display:none}

/* ---------- Card body ---------- */
.s-services :is(.card-body,.card__body,.card-content,.s-card__body){
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  gap:10px;
  padding:clamp(18px,2vw,26px);
}
.s-services :is(.card,.service-card,.s-card) h3{
  margin:0;
  font-family:var(--font-head);
  font-size:clamp(1.05rem,1.4vw,1.28rem);
  line-height:1.35;
  color:var(--c-secondary);
  letter-spacing:.01em;
}
.s-services :is(.card,.service-card,.s-card) p{
  margin:0;
  color:var(--c-muted);
  font-size:.95rem;
  line-height:1.75;
}

/* ---------- Icons inside cards (pixel-centered, no offsets) ---------- */
.s-services :is(.card,.service-card,.s-card) .icon-circle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  inline-size:48px;
  block-size:48px;
  padding:0;
  margin-block-end:4px;
  background:color-mix(in srgb, var(--c-secondary) 14%, transparent);
  color:var(--c-secondary);
  border:1px solid color-mix(in srgb, var(--c-secondary) 32%, transparent);
}
.s-services :is(.card,.service-card,.s-card) .icon-circle svg{
  display:block;
  flex:0 0 auto;
  inline-size:22px;
  block-size:22px;
  margin:0;
  padding:0;
  transform:none;
  vertical-align:middle;
  stroke:currentColor;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- Links / buttons inside cards ---------- */
.s-services :is(.card,.service-card,.s-card) .btn{
  align-self:flex-start;
  margin-block-start:auto;
  min-block-size:44px;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .s-services .services-grid,
  .s-services .grid-3,
  .s-services .s-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-services::before{inset-inline-end:-25%}
}
@media (max-width:600px){
  .s-services .services-grid,
  .s-services .grid-3,
  .s-services .s-grid{grid-template-columns:1fr}
  .s-services :is(.card-media,.card-img,.card__media,.s-card__media){aspect-ratio:16/9}
  .s-services :is(.card,.service-card,.s-card):hover{transform:none}
  .s-services :is(.card,.service-card,.s-card):hover :is(.card-media,.card-img,.card__media,.s-card__media) img{transform:none}
  .s-services :is(.card-body,.card__body,.card-content,.s-card__body){padding:18px}
  .s-services :is(.card,.service-card,.s-card) .icon-circle{inline-size:44px;block-size:44px}
  .s-services :is(.card,.service-card,.s-card) .icon-circle svg{inline-size:20px;block-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .s-services :is(.card,.service-card,.s-card),
  .s-services :is(.card-media,.card-img,.card__media,.s-card__media) img{transition:none}
}