/* Services page — premium reference layout */

body.page-services {
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(29, 92, 151, 0.22) 0%, transparent 58%),
    radial-gradient(ellipse 55% 45% at 88% 28%, rgba(55, 183, 240, 0.08) 0%, transparent 52%),
    radial-gradient(ellipse 40% 35% at 8% 55%, rgba(29, 92, 151, 0.06) 0%, transparent 50%),
    #010810;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

body.page-services .nav {
  background: transparent;
  box-shadow: none;
}

body.page-services .nav.scrolled {
  background: rgba(1, 8, 16, 0.9);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
}

body.page-services .text-accent {
  background: linear-gradient(118deg, #d4f1ff 0%, #6ec5f5 22%, #4a9fd4 48%, #37b7f0 72%, #2a8ec4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(55, 183, 240, 0.12));
}

/* Hero */
.svc-hero {
  position: relative;
  min-height: clamp(500px, 72vh, 660px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 48px) clamp(20px, 5vw, 72px) clamp(72px, 9vw, 100px);
  overflow: hidden;
  text-align: center;
}

.svc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 45% at 50% 28%, rgba(55, 183, 240, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(1, 8, 16, 0.35) 0%, rgba(1, 8, 16, 0.2) 45%, rgba(1, 8, 16, 0.5) 100%);
  z-index: 1;
  pointer-events: none;
}

.svc-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(180deg, transparent 0%, rgba(1, 8, 16, 0.55) 48%, #010810 100%);
  z-index: 2;
  pointer-events: none;
}

.svc-hero__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(1, 8, 16, 0.42) 0%, rgba(1, 8, 16, 0.28) 50%, rgba(1, 8, 16, 0.62) 100%),
    url('../images/svc-hero-water.png') center center / cover no-repeat;
  background-color: #010810;
}

.svc-hero__inner {
  position: relative;
  z-index: 3;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.svc-hero__eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 1.2rem;
}

.svc-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 4.2vw, 3.9rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.032em;
  max-width: none;
  margin-bottom: 1.35rem;
  text-align: center;
  white-space: nowrap;
}

.svc-hero__lead {
  max-width: 440px;
  font-size: clamp(0.93rem, 1.45vw, 1rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.015em;
  color: rgba(255, 255, 255, 0.5);
  margin-inline: auto;
  text-align: center;
}

/* Sections */
.svc-sections {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(8px, 1.2vw, 16px) clamp(16px, 4vw, 32px) clamp(64px, 8vw, 88px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.6vw, 36px);
}

.svc-block {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-block__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: 24px;
  overflow: hidden;
  min-height: clamp(340px, 42vw, 440px);
  background:
    radial-gradient(ellipse 85% 75% at 0% 100%, rgba(55, 183, 240, 0.1) 0%, transparent 52%),
    radial-gradient(ellipse 50% 45% at 100% 0%, rgba(29, 92, 151, 0.11) 0%, transparent 48%),
    linear-gradient(155deg, rgba(13, 34, 64, 0.92) 0%, rgba(11, 28, 52, 0.88) 38%, rgba(9, 24, 40, 0.9) 68%, rgba(7, 20, 34, 0.94) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(74, 159, 212, 0.14);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease;
}

.svc-block:hover .svc-block__panel {
  border-color: rgba(74, 159, 212, 0.2);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.42),
    0 0 48px rgba(55, 183, 240, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.svc-block--light .svc-block__panel {
  background:
    radial-gradient(ellipse 75% 65% at 100% 0%, rgba(55, 183, 240, 0.09) 0%, transparent 48%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(29, 92, 151, 0.08) 0%, transparent 50%),
    linear-gradient(155deg, rgba(15, 37, 72, 0.9) 0%, rgba(13, 31, 58, 0.88) 38%, rgba(10, 26, 48, 0.92) 68%, rgba(8, 22, 38, 0.94) 100%);
}

.svc-block__content {
  padding: clamp(36px, 4.8vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(55, 183, 240, 0.04) 0%, transparent 55%),
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.06) 100%);
}

.svc-block:not(.svc-block--reverse) .svc-block__content {
  background:
    linear-gradient(90deg, rgba(7, 20, 34, 0.35) 0%, transparent 22%),
    linear-gradient(135deg, rgba(55, 183, 240, 0.04) 0%, transparent 55%),
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.06) 100%);
}

.svc-block--reverse .svc-block__content {
  background:
    linear-gradient(270deg, rgba(7, 20, 34, 0.35) 0%, transparent 22%),
    linear-gradient(135deg, rgba(55, 183, 240, 0.04) 0%, transparent 55%),
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.06) 100%);
}

.svc-block__visual {
  position: relative;
  overflow: hidden;
  min-height: 280px;
}

.svc-block__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}

#white-label .svc-block__visual img,
#restaurants .svc-block__visual img {
  object-position: left center;
}

#branding .svc-block__visual img {
  object-position: 72% center;
}

.svc-block:hover .svc-block__visual img {
  transform: scale(1.035);
  filter: brightness(1.04);
}

.svc-block__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(7, 20, 34, 0.08) 38%,
    rgba(7, 20, 34, 0.42) 62%,
    rgba(7, 20, 34, 0.78) 82%,
    rgba(7, 20, 34, 0.95) 100%
  );
  z-index: 1;
}

.svc-block--reverse .svc-block__visual::after {
  background: linear-gradient(
    270deg,
    transparent 0%,
    rgba(7, 20, 34, 0.08) 38%,
    rgba(7, 20, 34, 0.42) 62%,
    rgba(7, 20, 34, 0.78) 82%,
    rgba(7, 20, 34, 0.95) 100%
  );
}

.svc-block--reverse .svc-block__panel {
  direction: rtl;
}

.svc-block--reverse .svc-block__panel > * {
  direction: ltr;
}

.svc-block__caption {
  position: absolute;
  bottom: clamp(22px, 3.2vw, 36px);
  left: clamp(22px, 3.2vw, 36px);
  right: clamp(22px, 3.2vw, 36px);
  z-index: 2;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.98rem, 1.85vw, 1.18rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.6);
}

.svc-block__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.4rem;
}

.svc-block__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(74, 159, 212, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
  background: linear-gradient(145deg, rgba(55, 183, 240, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
  box-shadow:
    0 0 24px rgba(55, 183, 240, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.svc-block__icon svg {
  width: 19px;
  height: 19px;
}

.svc-block__num {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.32);
}

.svc-block__title {
  font-family: var(--font-heading);
  font-size: clamp(1.16rem, 2.25vw, 1.55rem);
  font-weight: 700;
  line-height: 1.34;
  margin-bottom: 0.95rem;
  letter-spacing: -0.018em;
  color: rgba(255, 255, 255, 0.96);
}

.svc-block__intro {
  font-size: 0.89rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.012em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.35rem;
}

.svc-block__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
}

.svc-block__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.6);
}

.svc-block__list li svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 5px;
  color: #4a9fd4;
  opacity: 0.95;
  filter: drop-shadow(0 0 4px rgba(55, 183, 240, 0.3));
}

/* Duo */
.svc-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.6vw, 36px);
}

.svc-duo__card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: clamp(340px, 40vw, 420px);
  border: 1px solid rgba(74, 159, 212, 0.14);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease;
}

.svc-duo__card:hover {
  border-color: rgba(74, 159, 212, 0.2);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.42),
    0 0 48px rgba(55, 183, 240, 0.04);
}

.svc-duo__card .svc-block__visual {
  position: absolute;
  inset: 0;
}

.svc-duo__card .svc-block__visual::after {
  background:
    linear-gradient(180deg, rgba(1, 8, 16, 0.1) 0%, rgba(1, 8, 16, 0.5) 45%, rgba(1, 8, 16, 0.92) 100%),
    linear-gradient(95deg, rgba(1, 8, 16, 0.85) 0%, rgba(1, 8, 16, 0.4) 42%, rgba(1, 8, 16, 0.08) 72%, transparent 100%);
}

.svc-duo__card .svc-block__content {
  position: relative;
  z-index: 2;
  height: 100%;
  justify-content: flex-end;
  padding-top: 45%;
  background: none;
}

/* Quote */
.svc-quote {
  position: relative;
  padding: clamp(88px, 13vw, 128px) clamp(20px, 5vw, 48px);
  text-align: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(74, 159, 212, 0.2) 0%, rgba(55, 183, 240, 0.06) 42%, transparent 70%),
    radial-gradient(ellipse 48% 40% at 10% 78%, rgba(29, 92, 151, 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 48% 40% at 90% 78%, rgba(29, 92, 151, 0.14) 0%, transparent 58%),
    linear-gradient(180deg, #071422 0%, #0a1e38 42%, #081626 72%, #010810 100%);
  overflow: hidden;
}

.svc-quote::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 280' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='rgba(74,159,212,0.14)' stroke-width='1.5' d='M-20,200 C200,120 400,240 640,160 C880,80 1100,200 1460,140'/%3E%3Cpath fill='none' stroke='rgba(55,183,240,0.1)' stroke-width='1' d='M0,220 C280,140 520,260 800,180 C1020,120 1240,200 1440,160'/%3E%3Cpath fill='rgba(74,159,212,0.06)' d='M0,180 C300,100 600,200 900,120 C1100,60 1300,100 1440,80 L1440,280 L0,280 Z'/%3E%3Cpath fill='rgba(55,183,240,0.04)' d='M0,210 C360,130 720,230 1080,150 C1260,100 1380,120 1440,100 L1440,280 L0,280 Z'/%3E%3C/svg%3E") bottom center / 100% 160px no-repeat;
  pointer-events: none;
}

.svc-quote::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 159, 212, 0.35), transparent);
  pointer-events: none;
}

.svc-quote__marks {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(3.75rem, 9.5vw, 5.75rem);
  line-height: 0.42;
  color: rgba(255, 255, 255, 0.08);
  font-weight: 400;
}

.svc-quote__text {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: clamp(1.18rem, 2.75vw, 1.72rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.9);
  max-width: 760px;
  margin: 0 auto;
  letter-spacing: -0.012em;
}

.svc-quote__actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(28px, 4vw, 40px);
}

.svc-quote__text .text-accent {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(118deg, #d4f1ff 0%, #6ec5f5 24%, #4a9fd4 52%, #37b7f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(55, 183, 240, 0.15));
}

body.page-services .footer {
  margin-top: 0;
}

@media (max-width: 960px) {
  .svc-block__panel,
  .svc-block--reverse .svc-block__panel {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .svc-block__visual {
    min-height: 240px;
  }

  .svc-duo {
    grid-template-columns: 1fr;
  }

  .svc-duo__card .svc-block__content {
    padding-top: 50%;
  }
}

/* ─── Services CTA ─── */
.svc-cta { padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 24px) clamp(64px, 9vw, 104px); }
.svc-cta__inner {
  position: relative;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 56px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #0f2f56, #1d5c97);
  color: #fff;
  box-shadow: 0 44px 100px -46px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(74, 159, 212, 0.22);
}
.svc-cta__eyebrow { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem; color: var(--aqua-light); margin-bottom: 14px; }
.svc-cta__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.12; margin-bottom: 16px; }
.svc-cta__title .text-accent { color: var(--aqua); }
.svc-cta__text { color: rgba(255, 255, 255, 0.82); font-size: 1.02rem; line-height: 1.66; max-width: 520px; margin: 0 auto 30px; }
.svc-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.svc-cta__btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; font-family: var(--font-heading); font-weight: 700; font-size: 0.98rem; text-decoration: none; transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease, background 0.2s ease; }
.svc-cta__btn--primary { background: linear-gradient(135deg, var(--aqua), var(--ocean)); color: #fff; box-shadow: 0 10px 30px rgba(55, 183, 240, 0.4); }
.svc-cta__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(55, 183, 240, 0.55); }
.svc-cta__btn--ghost { border: 1px solid rgba(255, 255, 255, 0.32); color: #fff; }
.svc-cta__btn--ghost:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
.svc-cta__btn-icon { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: inline-flex; align-items: center; justify-content: center; }
.svc-cta__btn-icon svg { width: 13px; height: 13px; }

/* Fix italic gradient text clipping at line-wrap */
.svc-quote__text .text-accent { padding-right: 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }