/* Split landing section — scoped to .section_split_landing only
   Keep in sync with source/scss/blocks/_split_landing_section.scss */

.section_split_landing {
  /* Block-scoped tokens (theme has no matching muted greys; cyan #00a9ef exists as --cl-f) */
  --split-landing-background-top: #080d10;
  --split-landing-background-mid: #162123;
  --split-landing-background-bottom: #29383b;
  --split-landing-contract-accent: #a6cf4d;
  --split-landing-developer-accent: #00a9f0; /* brighter mockup cyan; theme --cl-f is #00a9ef */
  --split-landing-divider: rgba(176, 184, 186, 0.22);
  --split-landing-text: #ffffff;
  /* Brighter neutral greys for readable contrast on dark bg */
  --split-landing-text-muted: rgba(220, 220, 218, 0.88);
  --split-landing-text-desc: rgba(226, 226, 224, 0.9);
  --split-landing-text-faint: rgba(190, 190, 188, 0.65);
  --split-landing-text-footer: rgba(200, 200, 198, 0.72);

  /*
    Readable type scale (px — theme root rem scales with vw and was fighting readability).
    Targets: body ≥14–15px, secondary ≥14px, legal/footer ≥12px, UI ≥14px.
  */
  --sl-title-size: 30px;
  --sl-intro-size: 15px;
  --sl-service-title-size: 22px;
  --sl-service-desc-size: 14px;
  --sl-btn-font-size: 14px;
  --sl-btn-w: 210px;
  --sl-btn-h: 48px;
  /* Fill the right column (soft cap only on very wide screens) */
  --sl-content-w: min(560px, 100%);
  --sl-legal-w: min(520px, 100%);
  --sl-right-pad-left: 48px;
  --sl-right-pad-top: 64px;
  --sl-intro-gap: 24px;
  --sl-intro-after: 40px;
  --sl-services-gap: 40px;
  --sl-btn-mt: 28px;
  --sl-disclaimer-mt: 10px;
  --sl-disclaimer-size: 11px;
  --sl-footer-size: 12px;

  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--split-landing-text);
  font-family: 'Inter', system-ui, sans-serif;
  background: linear-gradient(
    180deg,
    var(--split-landing-background-top) 0%,
    #0d1719 22%,
    var(--split-landing-background-mid) 48%,
    #1e2c2d 74%,
    var(--split-landing-background-bottom) 100%
  );
  overflow-x: hidden;
  overflow-y: visible;
  box-sizing: border-box;
}

@media (min-width: 1025px) {
  .section_split_landing {
    --landing-divider-x: 56%;
    /* Combined logo+reflection asset: size by visible artwork (~570px at 1440) */
    --landing-logo-visual: min(39.5vw, 70vh, 580px);
    --landing-logo-img-width: calc(var(--landing-logo-visual) * 717 / 572);
  }
}

@media (min-width: 1025px) and (min-height: 900px) {
  .section_split_landing {
    /* Fit one desktop screen — trim gaps slightly to kill tiny scrollbars */
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    --sl-right-pad-top: 48px;
    --sl-intro-gap: 20px;
    --sl-intro-after: 28px;
    --sl-services-gap: 28px;
    --sl-btn-mt: 22px;
    --sl-disclaimer-mt: 8px;
    --sl-disclaimer-size: 11px;
  }
}

@media (min-width: 1025px) and (max-height: 899px) {
  .section_split_landing {
    /* Shorter desktops: grow with readable type instead of crushing it */
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }
}

.section_split_landing *,
.section_split_landing *::before,
.section_split_landing *::after {
  box-sizing: border-box;
}

.section_split_landing__inner {
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  width: 100%;
  height: 100%;
  min-height: inherit;
}

@media (min-width: 1025px) {
  .section_split_landing__inner {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  }
}

/* Left / logo panel */
.section_split_landing__left {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

/* Allow tiny divider terminals to render fully across the column seam */
@media (min-width: 1025px) {
  .section_split_landing__left {
    overflow: visible;
  }
}

.section_split_landing__divider {
  position: absolute;
  top: 8.3%;
  bottom: 13.8%;
  right: 0;
  width: 1px;
  background: var(--split-landing-divider);
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

/* Tiny tapered trapezoid caps — top points down into the line, bottom mirrors up */
.section_split_landing__divider::before,
.section_split_landing__divider::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 5px;
  height: 3px;
  background: var(--split-landing-divider);
  transform: translateX(-50%);
  pointer-events: none;
}

.section_split_landing__divider::before {
  top: 0;
  /* Wide top → narrow tip into the 1px line (squat trapezoid) */
  clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%);
}

.section_split_landing__divider::after {
  bottom: 0;
  /* Narrow tip into the line → wide bottom */
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
}

/*
  Single combined logo+reflection artwork (no CSS reflection).
  Centred in the left panel; vertical anchor tuned for emblem ≈ 270px at 1440×810.
*/
.section_split_landing__brand {
  position: absolute;
  top: 48%;
  left: 50%;
  width: min(80%, 620px);
  max-width: 620px;
  transform: translate(-50%, -48%);
  pointer-events: none;
}

@media (min-width: 1025px) {
  .section_split_landing__brand {
    width: var(--landing-logo-img-width);
    max-width: none;
    top: 45%;
    /* Optical shift slightly left of panel mid (~12px at 1440) */
    left: calc(50% - 12px);
    transform: translate(-52.26%, -45%);
  }
}

.section_split_landing__logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* Right / content panel */
.section_split_landing__right {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: var(--sl-right-pad-top) 28px 0 var(--sl-right-pad-left);
}

@media (min-width: 1025px) {
  .section_split_landing__right {
    padding-top: var(--sl-right-pad-top);
    padding-right: 28px;
    padding-left: var(--sl-right-pad-left);
    padding-bottom: 0;
  }
}

.section_split_landing__content {
  width: 100%;
  max-width: var(--sl-content-w);
  flex: 0 1 auto;
}

/* Landing 404: larger type, horizontally + vertically centred in the right column */
.section_split_landing--404 {
  --sl-title-size: clamp(72px, 8vw, 120px);
  --sl-intro-size: clamp(18px, 1.6vw, 22px);
  --sl-intro-gap: 16px;
  --sl-btn-mt: 36px;
  --sl-btn-w: 220px;
  --sl-btn-h: 52px;
  --sl-btn-font-size: 15px;
}

.section_split_landing--404 .section_split_landing__right {
  justify-content: center;
  align-items: center;
  padding-left: 28px;
  padding-right: 28px;
  padding-bottom: var(--sl-right-pad-top);
}

.section_split_landing--404 .section_split_landing__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: min(480px, 100%);
  margin-inline: auto;
}

.section_split_landing--404 .section_split_landing__title {
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
}

.section_split_landing--404 .section_split_landing__intro {
  margin-bottom: 0;
}

.section_split_landing--404 .section_split_landing__services {
  width: 100%;
  display: flex;
  justify-content: center;
}

.section_split_landing--404 .section_split_landing__service-title,
.section_split_landing--404 .section_split_landing__service-desc {
  display: none;
}

.section_split_landing--404 .section_split_landing__service {
  margin-top: var(--sl-btn-mt);
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 1024px) {
  .section_split_landing--404 {
    --sl-title-size: clamp(64px, 14vw, 96px);
    --sl-intro-size: 18px;
  }

  .section_split_landing--404 .section_split_landing__right {
    justify-content: center;
    padding-top: 56px;
    padding-bottom: 64px;
  }
}

.section_split_landing__title {
  margin: 0 0 var(--sl-intro-gap);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--sl-title-size);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.96);
  white-space: normal;
}

.section_split_landing__intro {
  margin: 0 0 var(--sl-intro-after);
  max-width: 100%;
  width: 100%;
}

.section_split_landing__intro p {
  margin: 0 0 0.85em;
  font-size: var(--sl-intro-size);
  line-height: 1.55;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--split-landing-text-muted);
}

.section_split_landing__intro p:last-child {
  margin-bottom: 0;
}

.section_split_landing__services {
  display: flex;
  flex-direction: column;
  gap: var(--sl-services-gap);
}

.section_split_landing__service-title {
  margin: 0 0 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--sl-service-title-size);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--split-landing-text);
}

.section_split_landing__service-desc {
  margin: 0 0 var(--sl-btn-mt);
  font-size: var(--sl-service-desc-size);
  line-height: 1.5;
  font-weight: 400;
  color: var(--split-landing-text-desc);
}

.section_split_landing__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: var(--sl-btn-w);
  max-width: 100%;
  height: var(--sl-btn-h);
  margin-top: 0;
  padding: 0 16px 0 20px;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: var(--sl-btn-font-size);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  vertical-align: top;
  transition: background-color 0.28s ease;
  background-color: var(--split-landing-contract-accent);
  /* Shared clip-path paint path avoids 1px hover jitter on rectangle buttons */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.section_split_landing__btn:hover,
.section_split_landing__btn:focus-visible {
  color: #fff;
  text-decoration: none;
}

.section_split_landing__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.section_split_landing__btn--green {
  background-color: var(--split-landing-contract-accent);
  /* Notched upper-right corner — green only */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 12px, 100% 100%, 0 100%);
}

.section_split_landing__btn--green:hover,
.section_split_landing__btn--green:focus-visible {
  background-color: #c5e86a;
}

.section_split_landing__btn--blue,
.section_split_landing__service:nth-child(2) .section_split_landing__btn {
  background-color: var(--split-landing-developer-accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.section_split_landing__btn--blue:hover,
.section_split_landing__btn--blue:focus-visible,
.section_split_landing__service:nth-child(2) .section_split_landing__btn:hover,
.section_split_landing__service:nth-child(2) .section_split_landing__btn:focus-visible {
  background-color: #3ec8f7;
}

.section_split_landing__btn-text {
  pointer-events: none;
}

.section_split_landing__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  pointer-events: none;
}

.section_split_landing__btn-icon svg {
  display: block;
  width: 13px;
  height: 10px;
  /* Rest slightly left; hover nudges right (on SVG so it always paints) */
  transform: translate3d(-6px, 0, 0);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.section_split_landing__btn:hover .section_split_landing__btn-icon svg,
.section_split_landing__btn:focus-visible .section_split_landing__btn-icon svg {
  transform: translate3d(2px, 0, 0);
}

.section_split_landing__disclaimer {
  margin-top: var(--sl-disclaimer-mt);
  max-width: var(--sl-legal-w);
  font-size: var(--sl-disclaimer-size);
  line-height: 1.45;
  font-weight: 400;
  color: var(--split-landing-text-faint);
}

/* Block-level copyright row — in flow (never absolute) so it cannot overlay legal copy */
.section_split_landing__footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  position: static;
  margin-top: auto;
  padding: 28px 28px 24px 0;
  font-size: var(--sl-footer-size);
  line-height: 1.4;
  color: var(--split-landing-text-footer);
  white-space: nowrap;
}

@media (min-width: 1025px) {
  .section_split_landing__right {
    padding-bottom: 8px;
  }
}

@media (min-width: 1025px) and (min-height: 900px) {
  .section_split_landing__footer {
    padding: 16px 28px 16px 0;
  }
}

.section_split_landing__copyright {
  margin-right: 2px;
}

.section_split_landing__footer-links {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.section_split_landing__footer-links a {
  color: inherit;
  text-decoration: none;
}

.section_split_landing__footer-links a:hover,
.section_split_landing__footer-links a:focus-visible {
  color: var(--split-landing-text);
}

.section_split_landing__footer-sep {
  opacity: 0.8;
}

/* Short desktop viewports — keep readable floors */
@media (max-height: 759px) and (min-width: 1025px) {
  .section_split_landing {
    --sl-right-pad-top: 40px;
    --sl-intro-gap: 20px;
    --sl-intro-after: 28px;
    --sl-services-gap: 28px;
    --sl-btn-mt: 22px;
    --sl-title-size: 26px;
    --sl-service-title-size: 20px;
    --sl-intro-size: 14px;
    --sl-service-desc-size: 14px;
    --sl-disclaimer-size: 11px;
    --sl-footer-size: 12px;
    overflow: visible;
  }

  .section_split_landing__brand {
    position: relative;
    left: auto;
    top: auto;
    width: min(72%, 520px);
    transform: none;
    margin: 0 auto;
  }

  .section_split_landing__footer {
    position: static;
    margin-top: 24px;
  }
}

@media (max-height: 700px) and (min-width: 1025px) {
  .section_split_landing {
    min-height: auto;
    height: auto;
    overflow: visible;
  }

  .section_split_landing__inner,
  .section_split_landing__right {
    min-height: auto;
    height: auto;
  }
}

/* Stacked layout shared by tablet + mobile */
@media (max-width: 1024px) {
  .section_split_landing {
    overflow: visible;
    min-height: auto;
    height: auto;
  }

  .section_split_landing__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    height: auto;
  }

  .section_split_landing__divider {
    display: none;
  }

  .section_split_landing__left {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .section_split_landing__brand {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 0 auto;
  }

  .section_split_landing__logo {
    width: 100%;
    height: auto;
  }

  .section_split_landing__right {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: auto;
    height: auto;
    border-top: 1px solid var(--split-landing-divider);
  }

  .section_split_landing__content {
    width: var(--sl-content-w);
    max-width: var(--sl-content-w);
    margin-inline: auto;
  }

  .section_split_landing__title {
    white-space: normal;
  }

  .section_split_landing__intro {
    max-width: none;
  }

  .section_split_landing__disclaimer {
    max-width: 100%;
  }

  .section_split_landing__footer {
    position: static;
    width: var(--sl-content-w);
    max-width: var(--sl-content-w);
    margin-inline: auto;
    justify-content: flex-start;
    flex-wrap: wrap;
    white-space: normal;
    font-size: var(--sl-footer-size);
    margin-top: 32px;
    padding: 0;
  }
}

/*
  Tablet / iPad (incl. iPad Pro portrait ~1024 CSS px)
  Priority: fill ~80–90% width, centre column, larger logo, shorter hero, stepped-up type.
*/
@media (min-width: 768px) and (max-width: 1024px) {
  .section_split_landing {
    /* Fill the padded column (~85–90% of viewport once side padding is applied) */
    --sl-content-w: 100%;
    --sl-legal-w: 100%;
    --sl-title-size: 34px;
    --sl-intro-size: 17px;
    --sl-service-title-size: 26px;
    --sl-service-desc-size: 16px;
    --sl-btn-font-size: 15px;
    --sl-btn-w: 240px;
    --sl-btn-h: 54px;
    --sl-btn-mt: 28px;
    --sl-services-gap: 44px;
    --sl-disclaimer-size: 12px;
    --sl-footer-size: 13px;
    --sl-intro-gap: 22px;
    --sl-intro-after: 40px;
  }

  .section_split_landing__left {
    /* Shorter hero so the logo isn't stranded in empty space */
    min-height: 0;
    height: auto;
    padding: 40px 48px 24px;
  }

  .section_split_landing__brand {
    /* Substantially larger mark for the wide tablet canvas */
    width: min(86%, 640px);
  }

  .section_split_landing__right {
    /* Horizontal page padding; content fills the remaining width */
    padding: 48px 52px 44px;
  }

  .section_split_landing__services {
    gap: var(--sl-services-gap);
  }

  .section_split_landing__footer {
    margin-top: 40px;
  }
}

/* Phones */
@media (max-width: 767px) {
  .section_split_landing {
    --sl-content-w: 100%;
    --sl-legal-w: 100%;
    --sl-title-size: 28px;
    --sl-intro-size: 16px;
    --sl-service-title-size: 20px;
    --sl-service-desc-size: 16px;
    --sl-btn-font-size: 14px;
    --sl-btn-w: 100%;
    --sl-btn-h: 48px;
    --sl-btn-mt: 24px;
    --sl-disclaimer-size: 11px;
    --sl-footer-size: 12px;
    --sl-services-gap: 32px;
    --sl-intro-gap: 20px;
    --sl-intro-after: 32px;
  }

  .section_split_landing__brand {
    width: min(78%, 300px);
  }

  .section_split_landing__left {
    min-height: 38vh;
    padding: 40px 20px 28px;
  }

  .section_split_landing__right {
    padding: 32px 20px 24px;
    align-items: stretch;
  }

  .section_split_landing__services {
    gap: var(--sl-services-gap);
  }

  .section_split_landing__btn {
    width: 100%;
    max-width: 100%;
  }
}

/* Intro animation: hide pending targets until GSAP runs (no-JS / reduced-motion stay visible) */
.section_split_landing[data-anim="pending"] .section_split_landing__divider {
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}

.section_split_landing[data-anim="pending"] [data-sl-anim="item"],
.section_split_landing[data-anim="pending"] [data-sl-anim="logo"] {
  opacity: 0;
  will-change: opacity, transform;
}

@media (max-width: 1024px) {
  .section_split_landing[data-anim="pending"] .section_split_landing__divider {
    transform: none;
  }
}

/* Reduced motion: show final state unless forced with ?sl_anim=1 (JS sets data-sl-force via html when needed) */
@media (prefers-reduced-motion: reduce) {
  html:not([data-sl-force-anim]) .section_split_landing[data-anim="pending"] .section_split_landing__divider,
  html:not([data-sl-force-anim]) .section_split_landing[data-anim="pending"] [data-sl-anim="item"],
  html:not([data-sl-force-anim]) .section_split_landing[data-anim="pending"] [data-sl-anim="logo"] {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* Page chrome helper when Hide Header/Footer is enabled (page-level setting) */
body.hide-header-footer {
  background: var(--split-landing-background-top, #080d10);
}

body.hide-header-footer .app,
body.hide-header-footer .pages,
body.hide-header-footer .page,
body.hide-header-footer .page__content,
body.hide-header-footer .page_default {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0;
}

body.hide-header-footer #pages.pages {
  margin-top: 0 !important;
}

body.hide-header-footer .loader,
body.hide-header-footer .cursor {
  display: none !important;
}