/* ============================================================================
   SADER — SERVICES PAGE  (sp-)
   A full-page dark cinematic experience for /services.html.
   Theme: dark throughout (data-theme="dark" on every section).
   Composes on: tokens.css, base.css, components.css (.btn, .eyebrow, .divider,
   .reveal, [data-parallax]). All properties logical — RTL for free.
   ============================================================================ */


/* ============================================================================
   SP HERO
   ============================================================================ */

.sp-hero {
  position: relative;
  block-size: 100svh;
  block-size: 100dvh; /* prefer dynamic viewport height on mobile */
  min-block-size: 560px; /* absolute floor so very short screens still work */
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  background-color: var(--ink-brown);
  padding-block-end: clamp(var(--space-8), 8vh, var(--space-10));
}

/* ---- Background media --------------------------------------------------- */
.sp-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.sp-hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  scale: 1.08; /* over-scale so parallax drift never exposes an edge */
}
/* Same left-weighted wash as the homepage hero: keeps sp-hero__copy legible
   over moving footage while the ghosted "06" stays readable above it. */
.sp-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  --_to: right;
  --_ink: var(--ink-brown);
  background:
    linear-gradient(
      to var(--_to),
      color-mix(in srgb, var(--_ink) 68%, transparent) 0%,
      color-mix(in srgb, var(--_ink) 24%, transparent) 46%,
      transparent 78%),
    linear-gradient(
      to top,
      color-mix(in srgb, var(--_ink) 40%, transparent) 0%,
      transparent 32%,
      transparent 74%,
      color-mix(in srgb, var(--_ink) 34%, transparent) 100%);
  pointer-events: none;
}
[dir="rtl"] .sp-hero__scrim { --_to: left; }

.sp-hero__inner {
  position: relative;
  z-index: var(--z-raised);
  inline-size: 100%;
  padding-block-start: calc(var(--header-h) + var(--space-9));
}

.sp-hero__copy {
  max-inline-size: 44rem;
}

/* Eyebrow — inherits .eyebrow; override colour on dark */
.sp-hero__kicker {
  color: var(--text-faint);
}

/* Title — capped by viewport height so eyebrow + lead always stay in view */
.sp-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, min(1.6rem + 3.2vw, 8.5svh), 5.25rem);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: wrap;
  color: var(--text);
  margin-block: var(--space-4) var(--space-4);
}

.sp-hero__title em {
  font-style: italic;
  color: var(--accent);
}

[dir="rtl"] .sp-hero__title em {
  font-style: normal;
}

/* Lead paragraph */
.sp-hero__lead {
  color: var(--text-muted);
  max-inline-size: 50ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  margin-block-end: var(--space-6);
}

/* Giant ghosted ordinal watermark */
.sp-hero__watermark {
  position: absolute;
  inset-block-end: -0.12em;
  inset-inline-end: -0.08em;
  font-family: var(--font-display);
  font-size: clamp(18rem, 30vw, 42rem);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--text);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  z-index: var(--z-base);
  will-change: transform; /* parallax target */
}

/* --------------------------------------------------------------------------
   Service index list
   -------------------------------------------------------------------------- */
.sp-hero__index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.sp-hero__index-item {
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

.sp-hero__index-link {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-4);
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease),
              padding-inline-start var(--dur-fast) var(--ease);
}

.sp-hero__index-link:hover {
  color: var(--text);
  padding-inline-start: var(--space-3);
}

.sp-hero__index-num {
  color: var(--text-faint);
  font-size: var(--fs-micro);
  font-weight: var(--fw-regular);
  font-variant-numeric: lining-nums;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Scroll cue
   -------------------------------------------------------------------------- */
.sp-hero__scroll {
  position: absolute;
  z-index: var(--z-raised);
  inset-block-end: clamp(var(--space-6), 4vh, var(--space-8));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-faint);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease);
}

.sp-hero__scroll:hover {
  color: var(--text-muted);
}

.sp-hero__scroll-line {
  display: block;
  inline-size: 1px;
  block-size: clamp(40px, 6vh, 64px);
  background-color: currentColor;
  transform-origin: top;
}

@media (prefers-reduced-motion: no-preference) {
  .sp-hero__scroll-line {
    animation: sp-scroll-pulse 2.4s var(--ease-in-out) infinite;
  }
}

@keyframes sp-scroll-pulse {
  0%   { transform: scaleY(0); opacity: 0; transform-origin: top; }
  40%  { transform: scaleY(1); opacity: 1; transform-origin: top; }
  60%  { transform: scaleY(1); opacity: 1; transform-origin: bottom; }
  100% { transform: scaleY(0); opacity: 0; transform-origin: bottom; }
}


/* ============================================================================
   SP PANELS — six alternating editorial panels
   ============================================================================ */

.sp-panel {
  position: relative;
  min-block-size: 85vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background-color: var(--bg);
}

/* Alternate grounds for visual separation */
.sp-panel--odd  { background-color: var(--bg); }
.sp-panel--even { background-color: var(--bg-alt); }

/* --------------------------------------------------------------------------
   Two-column split grid
   -------------------------------------------------------------------------- */
.sp-panel__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  inline-size: 100%;
  align-items: stretch;
}

/* Default (LTR): odd → text start / image end; even → image start / text end */
.sp-panel--odd  .sp-panel__content { order: 1; }
.sp-panel--odd  .sp-panel__media   { order: 2; }
.sp-panel--even .sp-panel__content { order: 2; }
.sp-panel--even .sp-panel__media   { order: 1; }

/* RTL mirrors: odd flips so the visual rhythm is symmetric */
[dir="rtl"] .sp-panel--odd  .sp-panel__content { order: 2; }
[dir="rtl"] .sp-panel--odd  .sp-panel__media   { order: 1; }
[dir="rtl"] .sp-panel--even .sp-panel__content { order: 1; }
[dir="rtl"] .sp-panel--even .sp-panel__media   { order: 2; }

/* --------------------------------------------------------------------------
   Content side
   -------------------------------------------------------------------------- */
.sp-panel__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-9), 8vw, var(--space-12));
  gap: var(--space-5);
  position: relative;
  z-index: var(--z-raised);
}

/* Eyebrow ordinal (reuses .eyebrow component) */
.sp-panel__ord {
  /* eyebrow component provides display + tracking; just override colour */
  color: var(--text-faint);
}

/* Animated ink rule — overrides base .divider.reveal sizes */
.sp-panel__line {
  display: block;
  block-size: 1px;
  inline-size: 0;
  background-color: var(--accent);
  border: none;
  margin-block: 0;
  transition: inline-size var(--dur-slow) var(--ease);
  flex: 0 0 auto;
}

.sp-panel__line.is-in {
  inline-size: 80px;
}

/* Panel h2 */
.sp-panel__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
  font-weight: var(--fw-light);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  margin: 0;
  align-self: center;
  text-align: center;
}

/* Body copy */
.sp-panel__text {
  color: var(--text-muted);
  max-inline-size: 42ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
  text-align: justify;
  align-self: center;
  /* Lead + intro flow as one block; clamp keeps panels balanced (source shows
     the full copy truncated with an ellipsis). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

/* CTA — self-starts so it doesn't stretch to full width */
.sp-panel__cta {
  align-self: flex-end;
  margin-block-start: var(--space-3);
}

/* --------------------------------------------------------------------------
   Giant ordinal watermark inside each panel
   -------------------------------------------------------------------------- */
.sp-panel__watermark {
  position: absolute;
  inset-block-end: -0.15em;
  font-family: var(--font-display);
  font-size: clamp(14rem, 22vw, 26rem);
  font-weight: var(--fw-light);
  line-height: 1;
  opacity: 0.04;
  color: var(--text);
  pointer-events: none;
  user-select: none;
  z-index: var(--z-base);
  letter-spacing: var(--tracking-display);
}

.sp-panel--odd  .sp-panel__watermark { inset-inline-end: -0.1em; }
.sp-panel--even .sp-panel__watermark { inset-inline-start: -0.1em; }

/* RTL flips */
[dir="rtl"] .sp-panel--odd  .sp-panel__watermark { inset-inline-end: auto; inset-inline-start: -0.1em; }
[dir="rtl"] .sp-panel--even .sp-panel__watermark { inset-inline-start: auto; inset-inline-end: -0.1em; }

/* --------------------------------------------------------------------------
   Media side
   -------------------------------------------------------------------------- */
.sp-panel__media {
  position: relative;
  overflow: hidden;
  /* min-block-size is a safety floor; the grid stretches this cell to match
     the content column, so portrait images never drive the row height. */
  min-block-size: 420px;
}

.sp-panel__media img {
  /* Absolutely fill the media cell — this takes the image out of normal flow
     so its intrinsic size cannot affect the grid row height. The cell height
     comes purely from the content column, guaranteeing a square-ish split
     even with tall portrait photos (e.g. 266×400 Legal-Heritage.jpg). */
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  transition: transform var(--dur-slower) var(--ease);
  will-change: transform;
}

/* Image scale-in when panel enters viewport */
.sp-panel__media.is-in img {
  transform: scale(1);
}

/* Subtle directional reveal on the media wrapper (composited with the
   .reveal / .reveal--left / .reveal--right classes from components.css) */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .sp-panel__media.reveal--right {
    transform: translateX(32px);
  }
  .js-motion .sp-panel__media.reveal--left {
    transform: translateX(-32px);
  }
  /* When both .reveal + .is-in are present, components.css sets transform:none
     which also resets the directional offset — intentional. */
}


/* ============================================================================
   SP STICKY SIDE NAVIGATOR
   ============================================================================ */

.sp-subnav {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-end: var(--space-5);
  transform: translateY(-50%);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
  pointer-events: none;
}

.sp-subnav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.sp-subnav__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  /* Align dot to the right; label slides in on hover */
  flex-direction: row-reverse;
}

[dir="rtl"] .sp-subnav__item {
  flex-direction: row;
}

.sp-subnav__dot {
  display: block;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transition: background-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
  flex: 0 0 auto;
}

.sp-subnav__item:hover .sp-subnav__dot,
.sp-subnav__item[data-sp-dot].is-active ~ * .sp-subnav__dot { /* fallback */ }

/* Active state set via JS adding .is-active on the <a> itself */
.sp-subnav__item.is-active .sp-subnav__dot {
  background-color: #fff;
  transform: scale(1.5);
}

.sp-subnav__label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  color: rgba(255, 255, 255, 0);
  transition: color var(--dur-fast) var(--ease);
  white-space: nowrap;
  pointer-events: none;
}

.sp-subnav__item:hover .sp-subnav__label,
.sp-subnav__item.is-active .sp-subnav__label {
  color: rgba(255, 255, 255, 0.6);
}


/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/* Tablet: reduce panel height, keep two columns */
@media (max-width: 1024px) {
  .sp-hero__copy {
    max-inline-size: 44ch;
  }

  .sp-panel__content {
    padding: clamp(var(--space-8), 6vw, var(--space-10));
  }
}

/* Mobile (≤768px): stack columns; image above, content below */
@media (max-width: 768px) {
  .sp-subnav {
    display: none; /* hide side nav on small screens */
  }

  .sp-panel__split {
    grid-template-columns: 1fr;
    grid-template-rows: 56vw auto;
  }

  /* Always: image on top, content on bottom regardless of odd/even */
  .sp-panel--odd  .sp-panel__content,
  .sp-panel--even .sp-panel__content { order: 2; }
  .sp-panel--odd  .sp-panel__media,
  .sp-panel--even .sp-panel__media   { order: 1; }

  [dir="rtl"] .sp-panel--odd  .sp-panel__content,
  [dir="rtl"] .sp-panel--even .sp-panel__content { order: 2; }
  [dir="rtl"] .sp-panel--odd  .sp-panel__media,
  [dir="rtl"] .sp-panel--even .sp-panel__media   { order: 1; }

  .sp-panel__media {
    min-block-size: 56vw;
  }

  .sp-panel__content {
    padding: var(--space-8) var(--space-6);
    gap: var(--space-4);
  }

  .sp-panel__watermark {
    font-size: clamp(8rem, 28vw, 14rem);
  }

  .sp-hero__watermark {
    font-size: clamp(12rem, 40vw, 22rem);
  }

  .sp-hero__lead {
    max-inline-size: 100%;
  }
}

/* Small mobile (≤480px) */
@media (max-width: 480px) {
  .sp-panel__content {
    padding: var(--space-7) var(--space-5);
  }

  .sp-hero__copy {
    max-inline-size: 100%;
  }
}


/* ============================================================================
   SP INDEX — directory strip between hero and panels
   ============================================================================ */

.sp-index {
  background-color: var(--bg-alt);
  padding-block: clamp(var(--space-7), 6vh, var(--space-10));
}

/* The index reuses .sp-hero__index* styles already defined above.
   Override only the container background / border accent on this strip. */
.sp-index .sp-hero__index {
  border-block-start-color: rgba(255, 255, 255, 0.14);
}

.sp-index .sp-hero__index-item {
  border-block-end-color: rgba(255, 255, 255, 0.14);
}

/* Optional two-column layout on wider screens for a denser, editorial grid */
@media (min-width: 900px) {
  .sp-index .sp-hero__index {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-block-start: none;
  }

  .sp-index .sp-hero__index-item {
    border-block-start: 1px solid rgba(255, 255, 255, 0.14);
  }

  /* Right column items get a start border to simulate column separator */
  .sp-index .sp-hero__index-item:nth-child(odd) {
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
  }

  [dir="rtl"] .sp-index .sp-hero__index-item:nth-child(odd) {
    border-inline-end: none;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.08);
  }
}


/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .sp-hero__scroll-line {
    animation: none;
    opacity: 0.4;
  }

  .sp-panel__media img {
    transform: none;
    transition: none;
  }

  .sp-panel__media.is-in img {
    transform: none;
  }

  .sp-panel__line {
    transition: none;
    inline-size: 80px; /* always visible, no transition */
  }

  .sp-hero__index-link {
    transition: none;
  }

  .sp-subnav,
  .sp-subnav__dot,
  .sp-subnav__label {
    transition: none;
  }
}