/* ==========================================================================
   Services page — assets/services.css
   Page-specific layout for services.html / services-ar.html. Loads after
   home.css, which supplies the shared primitives (.hm-wrap, .hm-eyebrow,
   .hm-title, .hm-lede, .hm-btn*, .hm-link, .hm-section*, .hm-cta*, .rv).
   Everything here is prefixed .sv- and uses logical properties for RTL.

   --sv-nav-h is the measured height of the fixed navbar; services.js keeps
   it current so the sticky rail and the anchor offsets track the real bar.
   ========================================================================== */

:root {
  --sv-nav-h: 130px;
}

/* --- Statement hero (white) ------------------------------------------------- */

.sv-hero {
  padding-top: clamp(9rem, 16vh, 12rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--bg-primary);
}

.sv-crumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
}
.sv-crumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}
.sv-crumb a:hover { color: var(--accent-gold); }
.sv-crumb span[aria-current] { color: var(--accent-gold); }
.sv-crumb .sep { opacity: 0.5; }

.sv-hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.sv-hero h1 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(2.5rem, 5.6vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  text-wrap: balance;
  max-width: 15ch;
}
.sv-hero h1 em {
  font-style: normal;
  color: var(--accent-gold);
}

.sv-hero .hm-lede {
  margin-top: 1.5rem;
  max-width: 32rem;
}

.sv-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

/* One photo tile per service, each a jump link to its chapter. The second
   column is nudged down so the block reads as a composition rather than a
   grid of thumbnails; an odd tile out (General Contracting, 05) runs the full
   width underneath as a letterbox. */
.sv-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 34rem;
  margin-inline: auto;
}
.sv-index > :nth-child(even) { margin-top: 1.75rem; }
.sv-index > :nth-child(odd):last-child { margin-top: 0; grid-column: 1 / -1; aspect-ratio: 5 / 2; }

.sv-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  background: var(--hm-ink-on-dark);
  color: var(--on-image);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.sv-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--hm-ease);
}
.sv-tile-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 14, 11, 0.88) 0%, rgba(18, 14, 11, 0.35) 45%, rgba(18, 14, 11, 0.05) 100%);
  transition: opacity 0.5s ease;
}
.sv-tile-body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1rem 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.75rem;
}
.sv-tile-num {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-gold-bright);
  margin-bottom: 0.3rem;
}
.sv-tile-name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--on-image);
  text-wrap: balance;
}
.sv-tile .hm-arrow {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
  color: var(--accent-gold-bright);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sv-tile:hover img { transform: scale(1.06); }
.sv-tile:hover .hm-arrow { opacity: 1; }
.sv-tile:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; }

@media (min-width: 900px) {
  .sv-hero-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 4rem;
  }
  .sv-index { margin-inline: auto 0; max-width: 36rem; gap: 1rem; }
  [dir="rtl"] .sv-index { margin-inline: 0 auto; }
  .sv-index > :nth-child(even) { margin-top: 2.5rem; }
  .sv-tile-name { font-size: 1.15rem; }
}

@media (min-width: 1200px) {
  .sv-hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3.5rem;
  }
  /* The Arabic headline is a full sentence; at the English size it ran to
     seven lines in the narrower copy column. */
  [dir="rtl"] .sv-hero h1 { font-size: clamp(2.25rem, 3.9vw, 3.4rem); line-height: 1.2; max-width: none; }
  /* Wide screens: three square tiles over two wider ones (six tracks), with
     the middle tile of each row nudged down, so five services stay about as
     tall as the hero copy instead of pushing the fifth below the fold. */
  .sv-index {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 42rem;
  }
  .sv-index > .sv-tile { grid-column: span 2; margin-top: 0; aspect-ratio: 1; }
  .sv-index > .sv-tile:nth-child(-n+3) .sv-tile-body { padding: 0.8rem 0.9rem; }
  .sv-index > .sv-tile:nth-child(2) { margin-top: 2.5rem; }
  .sv-index > .sv-tile:nth-child(n+4) { grid-column: span 3; aspect-ratio: 3 / 2; }
  .sv-index > .sv-tile:nth-child(5) { margin-top: 1.5rem; }
  .sv-tile-name { font-size: 1.05rem; }
}

/* --- Chapters + rail --------------------------------------------------------- */

.sv-body {
  padding-block: 0 var(--hm-section-y);
  border-top: 1px solid var(--rule-soft);
}

.sv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
.sv-layout > * { min-width: 0; }

/* The aside is the sticky element, not the rail: a sticky box only sticks
   within its parent, and the aside (which spans the whole chapter column
   in the grid) is the parent that is actually tall. */
.sv-aside {
  position: sticky;
  top: var(--sv-nav-h);
  z-index: 5;
  align-self: start;
}

/* Phones and tablets: a sticky chip bar directly under the navbar. */
.sv-rail {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * var(--hm-pad-x) - 2rem);
  padding: 0.65rem calc(var(--hm-pad-x) + 2rem);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--rule-soft);
}
.sv-rail::-webkit-scrollbar { display: none; }

.sv-rail a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  background: var(--bg-primary);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.sv-rail a span {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--accent-gold);
}
.sv-rail a.is-active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: #fff;
}
.sv-rail a.is-active span { color: var(--accent-gold-bright); }

.sv-rail-note { display: none; }

.sv-chapters {
  display: grid;
  gap: 0;
  padding-top: 1rem;
}

.sv-chapter {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--rule);
  /* Land below the fixed navbar and the sticky chip bar on deep links. */
  scroll-margin-top: calc(var(--sv-nav-h) + 4rem);
}
.sv-chapter:first-child { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.sv-chapter:last-child { border-bottom: 0; padding-bottom: 0; }

.sv-chapter-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "num sub"
    "num title"
    ".   desc";
  column-gap: 1.25rem;
  align-items: start;
}
.sv-num {
  grid-area: num;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 0.85;
  color: var(--accent-gold);
  padding-top: 0.15rem;
}
.sv-chapter-head .hm-eyebrow { grid-area: sub; margin-bottom: 0.6rem; }
.sv-chapter h2 {
  grid-area: title;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-wrap: balance;
}
.sv-desc {
  grid-area: desc;
  margin-top: 1.1rem;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 40rem;
}

/* Photo mosaic: one lead image and two supporting tiles from real jobs. */
.sv-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block: 2rem;
}
.sv-media figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-secondary);
}
.sv-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--hm-ease);
}
.sv-media figure:hover img { transform: scale(1.04); }
.sv-media-main { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.sv-media-tile { aspect-ratio: 4 / 3; }
.sv-media figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.5rem 0.9rem 0.7rem;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-image-muted);
  background: linear-gradient(to top, rgba(18, 14, 11, 0.82), transparent);
  pointer-events: none;
}

.sv-details {
  display: grid;
  gap: 2rem;
}

.sv-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.9rem;
}

.sv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1.5rem;
}
.sv-list li {
  position: relative;
  padding-inline-start: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-light);
}
.sv-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--accent-gold-bright);
  transform: rotate(45deg);
}

.sv-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.sv-tags li {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: var(--bg-primary);
}

.sv-more { margin-top: 1.75rem; }

@media (min-width: 760px) {
  .sv-media {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
  }
  .sv-media-main { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; min-height: 0; }
  .sv-details { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; }
}

/* Desktop: the rail becomes a sticky column of numbered links. */
@media (min-width: 1000px) {
  .sv-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 4.5rem;
    align-items: start;
  }
  .sv-aside {
    top: calc(var(--sv-nav-h) + 1.5rem);
    z-index: 1;
  }
  .sv-rail {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    margin: 0;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 0;
    border-bottom: 0;
    background: transparent;
  }
  .sv-rail a {
    position: relative;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    padding: 1rem 0;
    gap: 1rem;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    background: transparent;
    white-space: normal;
    transition: color 0.3s ease, padding-inline-start 0.5s var(--hm-ease);
  }
  .sv-rail a:first-child { border-top: 1px solid var(--rule); }
  .sv-rail a::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: -1px;
    height: 1px;
    width: 0;
    background: var(--accent-gold);
    transition: width 0.6s var(--hm-ease);
  }
  .sv-rail a:hover { color: var(--text-primary); }
  .sv-rail a.is-active {
    background: transparent;
    color: var(--text-primary);
    padding-inline-start: 0.4rem;
  }
  .sv-rail a.is-active::after { width: 100%; }
  .sv-rail a.is-active span { color: var(--accent-gold); }
  .sv-rail-note {
    display: block;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-muted);
  }
  .sv-rail-note a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
  .sv-chapters { padding-top: 0; }
  .sv-chapter { scroll-margin-top: calc(var(--sv-nav-h) + 1.5rem); }
  .sv-chapter-head { column-gap: 1.75rem; }
}

/* --- "Where to start" cards ---------------------------------------------------- */

.sv-cases {
  display: grid;
  gap: 1rem;
}

.sv-case {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.75rem 1.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--rule-soft);
  border-radius: var(--hm-radius);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: transform 0.6s var(--hm-ease), box-shadow 0.6s ease, border-color 0.3s ease;
}
.sv-case:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(140, 97, 52, 0.35);
}

.sv-case-say {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--text-primary);
  text-wrap: balance;
}
.sv-case-say::before {
  content: '\201C';
  display: block;
  font-size: 2.6rem;
  line-height: 0.6;
  color: var(--accent-gold-bright);
  margin-bottom: 0.5rem;
}

.sv-case-body {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.sv-case-go {
  margin-top: auto;
  padding-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--accent-gold);
  transition: gap 0.4s var(--hm-ease);
}
.sv-case:hover .sv-case-go { gap: 0.85rem; }

@media (min-width: 900px) {
  .sv-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .sv-case { padding: 2.25rem 2rem; }
  .sv-case-say { font-size: 1.5rem; }
}

/* --- FAQ ----------------------------------------------------------------------- */

.sv-faq {
  display: grid;
  gap: 2.5rem;
}

.sv-faq-intro .hm-lede { margin-top: 1.25rem; }
.sv-faq-intro .hm-link { margin-top: 1.5rem; }

.sv-acc {
  border-top: 1px solid var(--rule);
}
.sv-acc details {
  border-bottom: 1px solid var(--rule);
}
.sv-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--text-primary);
  transition: color 0.3s ease;
}
.sv-acc summary::-webkit-details-marker { display: none; }
.sv-acc summary:hover { color: var(--accent-gold); }
.sv-acc summary:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 4px; }

.sv-acc-icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  transition: transform 0.5s var(--hm-ease), background-color 0.3s ease, border-color 0.3s ease;
}
.sv-acc-icon::before,
.sv-acc-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 1px;
  background: var(--text-primary);
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease;
}
.sv-acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.sv-acc details[open] .sv-acc-icon {
  transform: rotate(45deg);
  background: var(--text-primary);
  border-color: var(--text-primary);
}
.sv-acc details[open] .sv-acc-icon::before,
.sv-acc details[open] .sv-acc-icon::after { background: #fff; }

.sv-acc-body {
  padding: 0 0 1.5rem;
  padding-inline-end: 3rem;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 42rem;
}
.sv-acc-body a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 900px) {
  .sv-faq {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 5rem;
    align-items: start;
  }
  .sv-faq-intro { position: sticky; top: calc(var(--sv-nav-h) + 1.5rem); }
  .sv-acc summary { padding: 1.6rem 0; font-size: 1.2rem; }
}

/* --- Motion preferences --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sv-tile img, .sv-media img, .sv-case, .sv-rail a, .sv-acc-icon { transition: none; }
}