/* Services-only composition, built on the shared palette and CTA components. */
.sv-page { --sv-navy: #102237; --sv-warm: #d0b68b; }
.sv-page h1, .sv-page h2, .sv-page h3 {
  margin: 0;
  font-family: "Sora", sans-serif;
  letter-spacing: -0.045em;
  font-weight: 700;
  color: var(--sv-navy);
  text-wrap: balance;
}
.sv-page h2 { font-size: clamp(32px, 3.5vw, 48px); line-height: 1.2; }
.sv-page p { line-height: 1.8; }
.sv-page .sv-kicker {
  margin: 0 0 20px;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.sv-page .sv-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.sv-page .button { min-height: 52px; padding: 14px 24px; font-size: 14px; }
.sv-page .button svg { width: 20px; height: 20px; flex-shrink: 0; }
.sv-page .button--primary { box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2); }
.sv-page .button--primary:hover { background: #1d4ed8; }
.sv-page .sv-whatsapp { color: #065f46; background: #fff; border: 1px solid #a7f3d0; }
.sv-page .sv-whatsapp:hover { background: #ecfdf5; }
.sv-hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 680px; color: #fff; background: #102237; }
.sv-hero__image, .sv-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.sv-hero__image { object-fit: cover; object-position: center 58%; }
.sv-hero__shade { background: linear-gradient(90deg, rgba(8, 24, 42, 0.94) 0%, rgba(8, 24, 42, 0.82) 42%, rgba(8, 24, 42, 0.1) 100%); }
.sv-hero__content { padding-block: 86px 64px; }
.sv-hero .sv-kicker { color: #e6cfaa; }
.sv-hero h1 { max-width: 730px; color: #fff; font-size: clamp(38px, 4.5vw, 64px); font-weight: 700; line-height: 1.14; }
.sv-page .sv-hero__lead { max-width: 635px; margin: 26px 0 0; font-size: 17px; color: #edf2f7; }
.sv-hero__explore { display: inline-flex; align-items: center; gap: 36px; min-height: 44px; margin-top: 38px; font-size: 12px; font-weight: 700; color: #e3eaf3; }
.sv-hero__explore span { font-size: 22px; }
.sv-offerings { padding-block: 104px; }
.sv-section-heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 80px; margin-bottom: 48px; }
.sv-section-heading > p { max-width: 440px; margin: 0; color: #475569; font-size: 16px; }
.sv-featured { display: grid; gap: 32px; }
.sv-service { min-width: 0; border-radius: 28px; background: #fff; box-shadow: 0 14px 40px -16px rgba(16, 34, 55, 0.22), 0 2px 6px rgba(16, 34, 55, 0.04); transition: transform 350ms ease, box-shadow 350ms ease; }
.sv-service__image { overflow: hidden; border-radius: 28px 28px 0 0; aspect-ratio: 1.9; background: #edf1f4; }
.sv-service__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 650ms cubic-bezier(.2,.7,.3,1); }
.sv-service__body { display: flex; flex-direction: column; align-items: flex-start; padding: 36px 38px 32px; }
.sv-service__eyebrow { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; color: #64748b; font-size: 12px; font-weight: 600; }
.sv-service__eyebrow span { color: #896c42; font-weight: 800; font-size: 11px; }
.sv-service h3 { font-size: clamp(24px, 2.3vw, 30px); line-height: 1.3; text-wrap: auto; }
.sv-service__description { margin: 18px 0 24px; color: #475569; font-size: 15px; }
.sv-service__link { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; margin-top: auto; color: #1d4ed8; font-size: 13px; font-weight: 800; }
.sv-service__link svg { width: 20px; height: 20px; transition: transform 250ms ease; }
.sv-service--feature { display: grid; grid-template-columns: 1.08fr 1fr; min-height: 380px; }
.sv-service--feature .sv-service__image { min-height: 100%; aspect-ratio: auto; border-radius: 28px 0 0 28px; }
.sv-service--feature .sv-service__body { justify-content: center; padding: 48px; }
.sv-service--feature .sv-service__link { margin-top: 0; }
.sv-service--feature h3 { font-size: clamp(28px, 3vw, 38px); }
.sv-service--reverse { grid-template-columns: 1fr 1.08fr; }
.sv-service--reverse .sv-service__image { order: 2; border-radius: 0 28px 28px 0; }
.sv-service--reverse .sv-service__body { background: #f5f8fc; border-radius: 28px 0 0 28px; }
.sv-services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.sv-services-grid .sv-service { display: flex; flex-direction: column; }
.sv-services-grid .sv-service__body { flex: 1; }
.sv-work { padding-block: 12px 90px; }
.sv-work__heading { text-align: center; }
.sv-work__heading > p:last-child { max-width: 680px; margin: 24px auto 0; color: #475569; font-size: 16px; }
.sv-marquee { margin-top: 28px; }
.sv-marquee__controls { display: flex; justify-content: flex-end; min-height: 44px; }
.sv-motion-toggle { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; border: 0; padding: 8px 0 8px 16px; background: transparent; color: #475569; font-size: 12px; font-weight: 700; cursor: pointer; }
.sv-motion-toggle[hidden] { display: none; }
.sv-marquee__viewport { overflow: hidden; }
.sv-marquee__track { width: 100%; }
.sv-marquee__group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; max-width: 1180px; margin: 0 auto; padding: 28px 20px; list-style: none; }
.sv-project { text-align: center; min-width: 0; }
.sv-project__identity { display: flex; justify-content: center; align-items: center; height: 74px; margin-bottom: 16px; }
.sv-project__identity img { width: 150px; height: 64px; object-fit: contain; }
.sv-project__wordmark { max-width: 245px; font-family: "Sora", sans-serif; font-size: 21px; line-height: 1.3; font-weight: 700; color: #253c52; letter-spacing: -.045em; }
.sv-project p { margin: 0; font-size: 13px; font-weight: 800; color: #1e293b; }
.sv-project > span { display: block; margin-top: 5px; font-size: 11px; color: #64748b; }
@keyframes sv-marquee-scroll { to { transform: translate3d(-50%, 0, 0); } }
.sv-marquee.is-animated .sv-marquee__track { display: flex; width: max-content; animation: sv-marquee-scroll 85s linear infinite; will-change: transform; }
.sv-marquee.is-animated .sv-marquee__group { display: flex; flex-shrink: 0; gap: 64px; max-width: none; padding: 28px 32px; }
.sv-marquee.is-animated .sv-project { width: 240px; flex: 0 0 240px; }
.sv-marquee.is-paused .sv-marquee__track,
.sv-marquee.is-offscreen .sv-marquee__track,
.sv-marquee:focus-within .sv-marquee__track { animation-play-state: paused; }
.sv-visual { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 570px; background: var(--sv-navy); }
.sv-visual__photo { overflow: hidden; }
.sv-visual__photo img { width: 100%; height: 100%; object-fit: cover; }
.sv-visual__content { align-self: center; max-width: 660px; padding: 70px clamp(32px, 5vw, 80px); }
.sv-visual .sv-kicker { color: #e6cfaa; }
.sv-visual h2 { color: #fff; font-size: clamp(36px, 3.7vw, 54px); }
.sv-visual__content > p:not(.sv-kicker) { margin: 24px 0 30px; color: #d6e1ed; font-size: 16px; }
.sv-capabilities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px; padding-block: 72px; }
.sv-capabilities__mark { display: inline-block; margin-bottom: 20px; padding-top: 14px; border-top: 2px solid #bda47d; color: #806844; font-size: 11px; font-weight: 800; }
.sv-capabilities h3 { font-size: 17px; letter-spacing: -.025em; line-height: 1.4; text-wrap: auto; }
.sv-capabilities p { margin: 12px 0 0; color: #64748b; font-size: 14px; }
.sv-final { padding-block: 68px 116px; text-align: center; }
.sv-final h2 { max-width: 810px; margin-inline: auto; }
.sv-final > p:not(.sv-kicker) { max-width: 610px; margin: 24px auto 0; color: #475569; font-size: 17px; }
.sv-final .sv-actions { justify-content: center; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sv-service:hover { transform: translateY(-5px); box-shadow: 0 24px 46px -20px rgba(16, 34, 55, 0.3); }
  .sv-service:hover .sv-service__image img { transform: scale(1.035); }
  .sv-service__link:hover svg { transform: translateX(4px); }
  .sv-marquee:hover .sv-marquee__track { animation-play-state: paused; }
}
@media (max-width: 980px) {
  .sv-section-heading { gap: 40px; }
  .sv-service--feature .sv-service__body { padding: 32px; }
  .sv-service__body { padding: 28px; }
  .sv-service__eyebrow { gap: 10px; font-size: 11px; }
  .sv-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-visual { grid-template-columns: 1fr 1fr; min-height: 510px; }
  .sv-visual__content { padding: 44px 28px; }
}
@media (max-width: 767px) {
  .sv-hero { min-height: 660px; }
  .sv-hero__content { padding-block: 64px 44px; }
  .sv-hero__shade { background: linear-gradient(90deg, rgba(8,24,42,.94), rgba(8,24,42,.65)); }
  .sv-hero__image { object-position: 44% center; }
  .sv-hero h1 { max-width: 560px; font-size: clamp(34px, 6.5vw, 48px); }
  .sv-page .sv-hero__lead { font-size: 16px; }
  .sv-offerings { padding-block: 64px; }
  .sv-section-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 32px; }
  .sv-featured { gap: 24px; }
  .sv-service--feature { display: flex; flex-direction: column; min-height: auto; }
  .sv-service--feature .sv-service__image { aspect-ratio: 1.5; min-height: 0; border-radius: 24px 24px 0 0; order: 0; }
  .sv-service--feature .sv-service__body { padding: 28px; border-radius: 0 0 24px 24px; }
  .sv-service { border-radius: 24px; }
  .sv-service__image { border-radius: 24px 24px 0 0; aspect-ratio: 1.5; }
  .sv-services-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .sv-service h3, .sv-service--feature h3 { font-size: 27px; }
  .sv-service__eyebrow { font-size: 11px; }
  .sv-work { padding-block: 12px 64px; }
  .sv-work__heading > p:last-child { font-size: 15px; }
  .sv-marquee__group { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sv-marquee.is-animated .sv-marquee__group { gap: 32px; padding-inline: 16px; }
  .sv-marquee.is-animated .sv-project { width: 210px; flex-basis: 210px; }
  .sv-project__wordmark { font-size: 18px; }
  .sv-visual { grid-template-columns: 1fr; }
  .sv-visual__photo { aspect-ratio: 1.5; }
  .sv-visual__content { padding: 44px 24px 52px; }
  .sv-capabilities { gap: 32px 24px; padding-block: 56px; }
  .sv-final { padding-block: 40px 80px; }
  .sv-final > p:not(.sv-kicker) { font-size: 16px; }
}
@media (max-width: 420px) {
  .sv-page .sv-actions { flex-direction: column; }
  .sv-hero { min-height: 740px; }
  .sv-service__body, .sv-service--feature .sv-service__body { padding: 26px 22px; }
  .sv-service h3, .sv-service--feature h3 { font-size: 25px; }
  .sv-capabilities { gap: 28px 20px; }
  .sv-project__identity img { max-width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-page *, .sv-page *::before, .sv-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .sv-page .button:hover { transform: none; }
  .sv-marquee.is-animated .sv-marquee__track { display: block; width: 100%; transform: none; }
  .sv-marquee.is-animated .sv-marquee__group { display: grid; max-width: 1180px; gap: 28px; }
  .sv-marquee.is-animated .sv-project { width: auto; }
  .sv-marquee__group[aria-hidden="true"], .sv-motion-toggle { display: none; }
}