/* services.css — /services/ pages. Builds on tokens.css, pages.css and
   case-study.css (fluid root, kicker, actions). */

.svc-body { background: var(--dark); color: var(--chalk); }
html[lang="fa"] .svc-body { font-family: 'YekanBakh', sans-serif; }

.svc {
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem);
}
.svc [id] { scroll-margin-top: 5.5rem; }

/* ── Hero ── */
.svc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.svc-hero--solo { grid-template-columns: minmax(0, 1fr); }
.svc-hero--solo .svc-hero-copy { max-width: 52rem; }

.svc-title {
  margin: 0;
  color: var(--chalk);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.25rem, 6.6vw, 7rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.9;
  text-wrap: balance;
}
html[lang="fa"] .svc-title {
  font-family: 'YekanBakh', sans-serif;
  font-size: clamp(2.5rem, 4.6vw, 4.75rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.3;
}
.svc-answer {
  max-width: 38rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--lime);
  color: rgba(240,236,227,0.82);
  font-size: clamp(1.0625rem, 1.35vw, 1.3rem);
  line-height: 1.75;
}
.svc-hero .cs-actions { margin-top: 2rem; }

.svc-frame { position: relative; margin: 0; }
.svc-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid rgba(240,236,227,0.14);
  background: rgba(255,255,255,0.03);
}
.svc-frame::before,
.svc-frame::after {
  content: '';
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
  border: 0 solid rgba(240,236,227,0.7);
}
.svc-frame::before { inset-block-start: 0.75rem; inset-inline-start: 0.75rem; border-block-start-width: 1px; border-inline-start-width: 1px; }
.svc-frame::after { inset-block-end: 3.25rem; inset-inline-end: 0.75rem; border-block-end-width: 1px; border-inline-end-width: 1px; }
.svc-frame figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  font-size: 0.8125rem;
  color: rgba(240,236,227,0.6);
}
.svc-frame-tag { color: var(--lime); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.svc-frame-name { color: var(--chalk); }

/* ── Facts strip ── */
.svc-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  background: rgba(240,236,227,0.14);
}
.svc-facts > div { padding: 1.25rem; background: var(--dark); }
.svc-facts dt,
.svc-section .svc-included dt,
.svc-evidence dt {
  color: var(--lime);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.svc-facts dd { margin: 0.6rem 0 0; color: rgba(240,236,227,0.88); font-size: 1rem; line-height: 1.5; }

/* ── Sections ── */
.svc-section {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 6vw, 6rem);
  margin-top: clamp(4rem, 9vw, 8rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(240,236,227,0.15);
}
.svc-h2 {
  align-self: start;
  margin: 0;
  color: var(--chalk);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.25rem, 3.4vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.98;
  text-wrap: balance;
}
html[lang="fa"] .svc-h2 {
  font-family: 'YekanBakh', sans-serif;
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.4;
}
.svc-body-col > p,
.svc-section > .svc-body-col p { max-width: 42rem; margin: 0; color: rgba(240,236,227,0.74); font-size: 1.0625rem; line-height: 1.85; }
.svc-section > .svc-body-col > p + p { margin-top: 1.25rem; }

/* What's included */
.svc-included,
.svc-evidence { margin: 0; display: grid; gap: 0; }
.svc-included { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
.svc-included > div { padding: 1.1rem 0 1.5rem; border-top: 1px solid rgba(240,236,227,0.12); }
.svc-section .svc-included dt { color: var(--chalk); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.005em; text-transform: none; }
.svc-included dd { margin: 0.5rem 0 0; color: rgba(240,236,227,0.66); font-size: 0.9375rem; line-height: 1.7; }
.svc-evidence > div {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid rgba(240,236,227,0.12);
}
.svc-evidence dd { margin: 0; color: rgba(240,236,227,0.74); font-size: 1rem; line-height: 1.8; }
.svc-evidence dd a,
.svc-body-col p a { color: var(--lime); text-underline-offset: 0.2em; }
.svc-evidence dd a:hover,
.svc-body-col p a:hover { color: var(--chalk); }

/* Process: a vertical rule with one stop per stage */
.svc-steps { margin: 0; padding: 0; list-style: none; }
.svc-steps li { position: relative; padding: 0 0 2rem; padding-inline-start: 2.25rem; }
.svc-steps li::before {
  content: '';
  position: absolute;
  inset-block-start: 0.45rem;
  inset-inline-start: 0;
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--lime);
}
.svc-steps li::after {
  content: '';
  position: absolute;
  inset-block: 1.35rem 0;
  inset-inline-start: 0.25rem;
  width: 1px;
  background: rgba(240,236,227,0.2);
}
.svc-steps li:last-child { padding-bottom: 0.5rem; }
.svc-steps li:last-child::after { display: none; }
.svc-steps h3 { margin: 0; color: var(--chalk); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.svc-steps p { margin: 0.5rem 0 0; max-width: 36rem; color: rgba(240,236,227,0.68); font-size: 1rem; line-height: 1.75; }

/* Work rows */
.svc-work-intro { margin-bottom: 1.5rem !important; }
.svc-work-list { margin: 0; padding: 0; list-style: none; }
.svc-work-list li { border-top: 1px solid rgba(240,236,227,0.14); }
.svc-work-list li:last-child { border-bottom: 1px solid rgba(240,236,227,0.14); }
.svc-work-row,
.svc-index-row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.25rem 0;
  color: inherit;
  text-decoration: none;
}
.svc-work-row img,
.svc-index-row img {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border: 1px solid rgba(240,236,227,0.14);
  filter: saturate(0.85);
  transition: filter 240ms ease, border-color 240ms ease;
}
.svc-work-text { display: grid; gap: 0.35rem; min-width: 0; }
.svc-work-tag { color: var(--lime); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.svc-work-title { color: var(--chalk); font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.75rem, 2.4vw, 2.5rem); letter-spacing: 0.02em; line-height: 1; transition: color 200ms ease; }
html[lang="fa"] .svc-work-title { font-family: 'YekanBakh', sans-serif; font-weight: 800; letter-spacing: 0; line-height: 1.35; }
.svc-work-line { color: rgba(240,236,227,0.62); font-size: 0.9375rem; line-height: 1.6; }
.svc-work-arrow { color: var(--lime); font-size: 1.5rem; transition: translate 240ms ease; }
html[lang="fa"] .svc-work-arrow { scale: -1 1; }
.svc-work-row:hover img, .svc-index-row:hover img,
.svc-work-row:focus-visible img, .svc-index-row:focus-visible img { filter: saturate(1.1); border-color: var(--lime); }
.svc-work-row:hover .svc-work-title, .svc-index-row:hover .svc-work-title { color: var(--lime); }
.svc-work-row:hover .svc-work-arrow, .svc-index-row:hover .svc-work-arrow { translate: 0.35rem 0; }
html[lang="fa"] .svc-work-row:hover .svc-work-arrow,
html[lang="fa"] .svc-index-row:hover .svc-work-arrow { translate: -0.35rem 0; }
.svc-work-row:focus-visible, .svc-index-row:focus-visible,
.svc-related-list a:focus-visible, .svc-faq summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

/* FAQ */
.svc-faq details { border-top: 1px solid rgba(240,236,227,0.14); }
.svc-faq details:last-child { border-bottom: 1px solid rgba(240,236,227,0.14); }
.svc-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.25rem 0;
  color: var(--chalk);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after { content: '+'; flex-shrink: 0; color: var(--lime); font-size: 1.5rem; line-height: 1; transition: rotate 200ms ease; }
.svc-faq details[open] summary::after { rotate: 45deg; }
.svc-faq details > p { max-width: 40rem; margin: 0 0 1.25rem; color: rgba(240,236,227,0.72); font-size: 1rem; line-height: 1.8; }

/* Related services */
.svc-related-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
.svc-related-list a { display: grid; gap: 0.35rem; padding: 1.1rem 0 1.4rem; border-top: 1px solid rgba(240,236,227,0.14); color: inherit; text-decoration: none; }
.svc-related-name { color: var(--chalk); font-size: 1.0625rem; font-weight: 500; transition: color 200ms ease; }
.svc-related-line { color: rgba(240,236,227,0.62); font-size: 0.9375rem; line-height: 1.6; }
.svc-related-list a:hover .svc-related-name { color: var(--lime); }

/* Closing call */
.svc-cta {
  margin-top: clamp(4rem, 9vw, 8rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  background: var(--lime);
  color: var(--dark);
}
.svc-cta-title {
  margin: 0;
  max-width: 14ch;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 6.4vw, 6.5rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.92;
}
html[lang="fa"] .svc-cta-title { max-width: none; font-family: 'YekanBakh', sans-serif; font-size: clamp(2.25rem, 4.4vw, 4.25rem); font-weight: 800; letter-spacing: 0; line-height: 1.3; }
.svc-cta-line { max-width: 34rem; margin: 1.25rem 0 0; font-size: 1.125rem; line-height: 1.7; }
.svc-cta-list { margin: clamp(1.75rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
.svc-cta-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.95rem 0; border-top: 1px solid rgba(26,34,16,0.35); color: var(--dark); text-decoration: none; transition: padding 200ms ease; }
.svc-cta-list a:hover { padding-inline: 0.75rem; background: var(--dark); color: var(--lime); }
.svc-cta-list a:focus-visible, .svc-cta-form a:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
.svc-cta-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.svc-cta-value { font-size: 1.0625rem; overflow-wrap: anywhere; }
.svc-cta-form { margin: 1.5rem 0 0; font-size: 0.9375rem; }
.svc-cta-form a { color: var(--dark); text-underline-offset: 0.2em; }

/* FA: Latin letter-spacing and caps have no place in Persian runs */
html[lang="fa"] .svc-facts dt,
html[lang="fa"] .svc-evidence dt,
html[lang="fa"] .svc-frame-tag,
html[lang="fa"] .svc-work-tag,
html[lang="fa"] .svc-cta-label { letter-spacing: 0; text-transform: none; }
html[lang="fa"] .svc-steps h3,
html[lang="fa"] .svc-faq summary { letter-spacing: 0; }
html[lang="fa"] .svc-frame figcaption { flex-direction: row-reverse; }

/* One-shot entrance on load: transform and opacity only, so nothing shifts */
@media (prefers-reduced-motion: no-preference) {
  .svc-hero-copy > * { animation: svc-rise 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
  .svc-hero-copy > :nth-child(2) { animation-delay: 80ms; }
  .svc-hero-copy > :nth-child(3) { animation-delay: 170ms; }
  .svc-hero-copy > :nth-child(4) { animation-delay: 260ms; }
  .svc-frame img { animation: svc-reveal 1100ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 120ms both; }
}
@keyframes svc-rise { from { opacity: 0; transform: translateY(1.25rem); } }
@keyframes svc-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* ── Narrow: its own single-column layout, 1023px and below ── */
@media (max-width: 1023px) {
  .svc-hero { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 2.5rem; }
  .svc-title { font-size: clamp(3rem, 14vw, 5.5rem); }
  html[lang="fa"] .svc-title { font-size: clamp(2.25rem, 8.5vw, 3.75rem); }
  .svc-answer { font-size: 1.125rem; }
  .svc-frame img { aspect-ratio: 16 / 10; }
  .svc-frame::after { inset-block-end: 3.25rem; }
  .svc-section { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: clamp(3.5rem, 10vw, 5.5rem); }
  .svc-h2 { font-size: clamp(2.25rem, 8vw, 3.25rem); }
  html[lang="fa"] .svc-h2 { font-size: clamp(1.625rem, 5.4vw, 2.25rem); }
  .svc-cta-title { font-size: clamp(3rem, 13vw, 5.5rem); }
  html[lang="fa"] .svc-cta-title { font-size: clamp(2rem, 8vw, 3.25rem); }
}
@media (max-width: 719px) {
  .svc-facts { grid-template-columns: minmax(0, 1fr); }
  .svc-included,
  .svc-related-list,
  .svc-cta-list { grid-template-columns: minmax(0, 1fr); }
  .svc-evidence > div { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .svc-work-row,
  .svc-index-row { grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1rem; }
  .svc-work-line { font-size: 0.875rem; }
  .svc-body .page-back span { display: none; }
  .svc-body .page-logo { font-size: 1.125rem; }
  .svc-body .page-footer { flex-direction: column; align-items: flex-start; }
}