/* Service page template — branding pilot */

.sk-service-page {
  /* Match “Let’s Talk About Your Project!” (form h2) */
  --sk-svc-heading-mobile: 30px;
  --sk-svc-heading-desktop: 56px;
  --sk-svc-heading: clamp(var(--sk-svc-heading-mobile), 4.5vw, var(--sk-svc-heading-desktop));

  /* Match FAQ answer body copy (p.body) */
  --sk-svc-body-mobile: 16px;
  --sk-svc-body-desktop: 16px;
  --sk-svc-body: clamp(var(--sk-svc-body-mobile), 2vw, var(--sk-svc-body-desktop));

  /* Match statement block (z2rFv4 h5) */
  --sk-svc-statement-mobile: 24px;
  --sk-svc-statement-desktop: 40px;
  --sk-svc-statement: clamp(var(--sk-svc-statement-mobile), 3.5vw, var(--sk-svc-statement-desktop));

  font-family: Ubuntu, system-ui, sans-serif;
  color: #1a1a1a;
  background: #fff;
}

.sk-service-page .page__blocks {
  width: 100%;
}

.sk-svc-container {
  width: min(1224px, calc(100% - 32px));
  margin-inline: auto;
}

/* Sections 2–5 */
.sk-svc-section {
  position: relative;
  padding: clamp(48px, 8vw, 88px) 0;
  overflow: visible;
}
.sk-svc-section--light { background: #f4f4f4; }
.sk-svc-section--dark { background: #2b2b2b; color: #fff; }
.sk-svc-section--white { background: #fff; }
.sk-svc-section--work { background: #1d1e20; color: #fff; }
.sk-svc-section__inner {
  position: relative;
  z-index: 1;
}

/* Tier 1 — section headings (match form title) */
.sk-svc-split--matched h2,
.sk-svc-section__title,
.sk-svc-section__title--light,
.sk-service-page #brief #zvtyRW h2,
.sk-service-page #brief .text-box h2,
.sk-service-page #zdbPTm h3 {
  font-family: Ubuntu, sans-serif !important;
  font-size: var(--sk-svc-heading) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

.sk-service-page #brief #zvtyRW h2,
.sk-service-page #brief .text-box h2 {
  color: rgb(204, 0, 0) !important;
}

.sk-svc-split--matched h2 {
  margin: 0 0 16px;
}
.sk-svc-section__title {
  margin: 0 0 16px;
}
.sk-svc-section__title--light { color: #fff; }

/* Hero text — align with page content column */
.sk-service-page #zVJ_WR .block-layout--layout {
  width: min(1224px, calc(100% - 32px)) !important;
  max-width: min(1224px, calc(100% - 32px)) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  --v66d5c4a6: 0 !important;
  --v1984096a: 0 !important;
  box-sizing: border-box;
}
.sk-service-page #zVJ_WR .layout-element[style*="--grid-row:2/3"],
.sk-service-page #zVJ_WR .layout-element[style*="--grid-row:4/5"],
.sk-service-page #zVJ_WR .sk-hero-estimate-wrap {
  justify-self: start !important;
  width: 100%;
  max-width: 100%;
}

/* Extra space after FAQ before footer */
.sk-service-page #zdbPTm {
  padding-bottom: 36px !important;
  --block-padding-bottom: 36px !important;
}

/* Clients marquee on service pages */
.sk-service-page .sk-clients-section {
  display: flex;
  width: 100%;
}
.sk-service-page .sk-marquee-host {
  display: flex !important;
  width: 100% !important;
}

/* Why Choose — vertically center content in red block */
.sk-service-page #zKn6hD .block-layout--layout {
  --grid-template-rows: 1fr auto 0 auto 1fr !important;
  --small-desktop-grid-template-rows: 1fr auto 0 auto 1fr !important;
  --m-grid-template-rows: 10.56vw auto 0 auto 46px !important;
}
@media (min-width: 921px) {
  .sk-service-page #zKn6hD .block-layout--layout {
    min-height: var(--block-min-height, 444px) !important;
  }
}
.sk-service-page #zKn6hD .layout-element:has(#zvu6TW) {
  margin-bottom: 0 !important;
  align-self: start !important;
}
.sk-service-page #zKn6hD .layout-element:has(#zVEW8c) {
  margin-top: 20px !important;
  align-self: start !important;
}
.sk-service-page #zKn6hD #zvu6TW h2 {
  margin-bottom: 0 !important;
}

/* Work heading + subtitle spacing — 10px gap */
.sk-svc-section--work .sk-svc-section__title {
  margin: 0 0 10px;
}
.sk-svc-work-subtitle {
  margin: 0 0 28px;
  max-width: 820px;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Tier 2 — body copy (match FAQ answers) */
.sk-svc-split--matched p,
.sk-svc-work-subtitle,
.sk-service-page #zdbPTm p.body,
.sk-service-page #zdbPTm .text-box p.body {
  font-family: Ubuntu, sans-serif !important;
  font-size: var(--sk-svc-body) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: rgb(31, 31, 31);
}
.sk-svc-split--matched p,
.sk-svc-split--matched .sk-svc-richtext p {
  margin: 0;
}
.sk-svc-richtext p + p,
.sk-svc-richtext p + ul,
.sk-svc-richtext ul + p {
  margin-top: 0.85em;
}
.sk-svc-bullets {
  margin: 0.85em 0 0;
  padding-left: 1.25em;
  list-style: disc;
}
.sk-svc-bullets li {
  margin: 0.35em 0;
}
.sk-svc-richtext strong {
  font-weight: 700;
}
.sk-svc-section--dark .sk-svc-split--matched p,
.sk-svc-section--dark .sk-svc-split--matched .sk-svc-bullets {
  color: rgba(255, 255, 255, 0.92);
}

/* Tier 3 — intro + Why Choose body (match statement block) */
.sk-svc-lead,
.sk-svc-lead--configurable,
.sk-service-page #zKn6hD #zVEW8c h5,
.sk-service-page #zKn6hD #zVEW8c h5 span {
  font-family: Ubuntu, sans-serif !important;
  font-size: var(--sk-svc-statement) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}
.sk-svc-lead,
.sk-svc-lead--configurable {
  margin: 0;
  max-width: 100%;
}
.sk-svc-lead--configurable {
  color: var(--sk-intro-color, #0d141a);
}
.sk-service-page #zKn6hD #zVEW8c h5,
.sk-service-page #zKn6hD #zVEW8c h5 span {
  color: rgb(255, 255, 255) !important;
}

/* Floating decorative elements — front layer, desktop/tablet only */
.sk-svc-deco {
  position: absolute;
  z-index: 999;
  pointer-events: none;
  user-select: none;
  width: var(--sk-deco-width, 14vw);
  height: var(--sk-deco-height, auto);
  top: var(--sk-deco-top, auto);
  right: var(--sk-deco-right, auto);
  bottom: var(--sk-deco-bottom, auto);
  left: var(--sk-deco-left, auto);
  opacity: var(--sk-deco-opacity, 1);
}
.sk-svc-deco img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Sections 3 & 4 — image 2/3, text 1/3 */
.sk-svc-split--matched {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.sk-svc-split--matched.sk-svc-split--image-left {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.sk-svc-split--matched.sk-svc-split--image-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.sk-svc-split__media {
  margin: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0;
}
.sk-svc-split--matched .sk-svc-split__media--large {
  width: 100%;
}
.sk-svc-split--matched .sk-svc-split__media--large img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: 0;
}

/* Work grid */
.sk-service-work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.sk-service-work-grid__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 5 / 4;
  background: #333;
  border: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: zoom-in;
}
.sk-service-work-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  filter: grayscale(1);
  transition: transform 0.35s ease, filter 0.35s ease;
}
.sk-service-work-grid__item:hover img {
  transform: scale(1.04);
  filter: grayscale(0);
}
.sk-service-work-grid__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;
  font-size: var(--sk-svc-body-mobile);
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}
@media (min-width: 768px) {
  .sk-service-work-grid__label {
    font-size: var(--sk-svc-body-desktop);
  }
}
.sk-svc-work-more {
  margin: 32px 0 0;
  text-align: center;
}

/* Lightbox (same behaviour as Our Work page) */
.sk-lightbox__caption {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 48px));
  text-align: center;
  color: #fff;
  font-family: Ubuntu, sans-serif;
  pointer-events: none;
  z-index: 3;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
.sk-lightbox__caption-cat {
  font: 600 11px/1.2 Ubuntu, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #c8c5d0;
  margin-bottom: 4px;
}
.sk-lightbox__caption-name {
  font: 600 15px/1.25 Ubuntu, sans-serif;
  color: #fff;
}
.sk-lightbox__caption-desc {
  margin: 4px 0 0;
  font: 400 12px/1.4 Ubuntu, sans-serif;
  opacity: .88;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sk-lightbox .sk-lb-count {
  top: 28px;
  bottom: auto;
  opacity: .85;
  font-size: 13px;
  z-index: 4;
}

/* Clients proof line — larger on service pages */
.sk-service-page .sk-clients-title {
  font-family: Ubuntu, sans-serif !important;
  font-size: clamp(24px, 3.8vw, 36px) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.06em !important;
}

/* Legacy builder sections */
.sk-service-page .sk-service-main > .block,
.sk-service-page .sk-service-main > section.block {
  width: 100%;
}

/* Form submit button */
.sk-service-page #brief form .form__button,
.sk-service-page #brief form button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  width: auto !important;
  min-width: 120px !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 14px 32px !important;
  margin-bottom: 50px !important;
  font-family: Ubuntu, sans-serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  text-align: center;
  white-space: nowrap !important;
  color: #fff !important;
  background-color: #cc0000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
  transform: none !important;
  box-shadow: none !important;
}
.sk-service-page #brief form .form__button:hover,
.sk-service-page #brief form .form__button:focus,
.sk-service-page #brief form button[type="submit"]:hover,
.sk-service-page #brief form button[type="submit"]:focus {
  color: #fff !important;
  background-color: #1d1e20 !important;
  transform: none !important;
  box-shadow: none !important;
}

#brief { scroll-margin-top: 96px; }

@media (max-width: 920px) {
  .sk-svc-deco {
    display: none !important;
  }

  /* Hero — tighter stack, positioned lower on mobile */
  .sk-service-page section#zVJ_WR .block-layout--layout {
    --m-grid-template-rows:
      minmax(110px, auto)
      auto
      4px
      auto
      auto
      minmax(72px, auto) !important;
    padding-bottom: 20px !important;
  }
  .sk-service-page section#zVJ_WR .layout-element[style*="--grid-row:2/3"],
  .sk-service-page section#zVJ_WR .layout-element[style*="--grid-row:4/5"],
  .sk-service-page section#zVJ_WR .sk-hero-estimate-wrap {
    transform: translateY(72px) !important;
  }
  .sk-service-page section#zVJ_WR .layout-element[style*="--grid-row:4/5"] {
    margin-top: 0 !important;
  }
  .sk-service-page section#zVJ_WR .sk-hero-estimate-wrap {
    margin-top: 6px !important;
  }

  /* Hero aligns with section content on mobile */
  .sk-service-page #zVJ_WR .block-layout--layout {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
  }

  /* Left-align custom sections on mobile */
  .sk-service-page .sk-svc-section,
  .sk-service-page .sk-svc-container,
  .sk-service-page .sk-svc-section__inner,
  .sk-service-page .sk-svc-split--matched,
  .sk-service-page .sk-svc-split__text,
  .sk-service-page .sk-svc-lead,
  .sk-service-page .sk-svc-work-subtitle {
    text-align: left;
  }

  /* Statement block = intro size on mobile */
  .sk-service-page #z2rFv4 #zrZUuB h5,
  .sk-service-page #z2rFv4 #zrZUuB h5 span {
    font-family: Ubuntu, sans-serif !important;
    font-size: var(--sk-svc-statement-mobile) !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    text-align: left !important;
  }
  .sk-service-page .sk-svc-lead--configurable {
    font-size: var(--sk-svc-statement-mobile) !important;
  }

  /* Why Choose — vertically center content in red block on mobile */
  .sk-service-page #zKn6hD .block-layout--layout {
    --t-grid-template-rows: 1fr auto 0 auto 1fr !important;
    --m-grid-template-rows: 1fr auto 0 auto 1fr !important;
    min-height: var(--t-block-min-height, 471px) !important;
    --m-block-min-height: 471px !important;
  }
  .sk-service-page #zKn6hD .layout-element:has(#zvu6TW) {
    --m-element-margin: 0 !important;
    margin: 0 !important;
  }
  .sk-service-page #zKn6hD .layout-element:has(#zVEW8c) {
    margin-top: 20px !important;
  }
  .sk-service-page #zKn6hD #zvu6TW h2,
  .sk-service-page #zKn6hD #zvu6TW h2 span,
  .sk-service-page #zKn6hD #zvu6TW h2 strong {
    font-family: Ubuntu, sans-serif !important;
    font-size: var(--sk-svc-heading-mobile) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    text-align: left !important;
  }
  .sk-service-page #zKn6hD .layout-element,
  .sk-service-page #z2rFv4 .layout-element {
    --text: left !important;
    --align: flex-start !important;
    --justify: flex-start !important;
  }

  .sk-svc-split--matched.sk-svc-split--image-left,
  .sk-svc-split--matched.sk-svc-split--image-right {
    grid-template-columns: 1fr;
  }
  .sk-svc-split--image-right .sk-svc-split__text,
  .sk-svc-split--image-right .sk-svc-split__media { order: unset; }
  .sk-service-page .sk-clients-title {
    text-align: center;
    padding: 0 16px;
  }
  .sk-service-page #brief form .form__button,
  .sk-service-page #brief form button[type="submit"] {
    font-size: 15px !important;
    padding: 12px 24px !important;
    white-space: normal !important;
  }
}