/* Service pages.
   Load order is company-pages.css → falaq-2026.css → aether-flow.css → this.
   company-pages.css gives the nav, footer and base type; falaq-2026.css gives
   the "Cinematic Precision" tokens; aether-flow.css owns the hero and the
   floating service bot. This file owns everything between the hero and the
   footer, and reconciles the three where they disagree.

   Every class here is `sv-` prefixed: aether-flow.css still ships home-page
   selectors (.nav-links, section.blk, .model, .rv …) and a prefix is the only
   cheap way to guarantee no collision.

   Layout uses logical properties throughout, so the Arabic (rtl) and English
   (ltr) builds share one rule set. */

/* --- reconciliation ---------------------------------------------------- */
/* aether-flow.css re-points these at :root with !important, which would drag
   the nav, footer and every hairline back to the old palette. Same specificity,
   later file, so these win. */
:root {
  --line: #232427 !important;
  --line-hi: #33343a !important;
  --accent: #c084fc !important;
  --accent-strong: #a855f7 !important;
  --panel: #101112 !important;
  --dim: #a9a5b3 !important;
  --mute: #6f6b79 !important;
}
.nav-links { color: var(--ink-2) !important; font-size: .875rem !important; }
.site-nav { background: rgba(7, 7, 8, .82); }
body { background: var(--s-void); }

/* --- hero -------------------------------------------------------------- */
/* The canvas hero is aether-flow.css's; only the parts the generator needs
   differently are set here. */
.aether-flow-hero { min-height: 640px !important; padding: 104px 0 72px !important; background: var(--s-void) !important; }
.sv-listing .aether-flow-hero { min-height: 480px !important; padding: 92px 0 60px !important; }
.aether-flow-hero .sv-hero-in { position: relative; z-index: 2; }
/* The scroll cue is an anchor here, not a div; keep it quiet. */
.aether-flow-hero .aether-scroll-cue { flex-direction: column; align-items: center; gap: 6px; color: var(--ink-3); }
.aether-flow-hero .aether-scroll-cue:hover { opacity: 1 !important; }
.sv-cue-arrow { color: var(--acc); font-size: 18px; animation: sv-bob 1.8s ease-in-out infinite; }

@keyframes sv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* --- breadcrumb strip -------------------------------------------------- */
.sv-crumbs { border-block: 1px solid var(--line); background: var(--s-base); }
.sv-crumbs .wrap { display: flex; min-height: 46px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.sv-crumbs nav { color: var(--ink-3); font-size: .8rem; }
.sv-crumbs nav a:hover { color: var(--acc-lo); }
.sv-crumbs .t-label { white-space: nowrap; }

/* --- pressure ticker --------------------------------------------------- */
/* Full-bleed marquee. The track is duplicated in the markup so the -50%
   translate loops seamlessly; overflow is clipped on the parent so the page
   never gains horizontal scroll. */
.sv-ticker { overflow: hidden; padding: 18px 0; border-bottom: 1px solid var(--line); background: var(--s-base); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sv-ticker-track { display: flex; width: max-content; gap: 10px; animation: sv-marquee 46s linear infinite; }
.sv-ticker-track span { flex-shrink: 0; padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--s-1); color: var(--ink-2); font-size: .8rem; font-weight: 600; white-space: nowrap; }
@keyframes sv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[dir="rtl"] .sv-ticker-track { animation-name: sv-marquee-rtl; }
@keyframes sv-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* --- bands ------------------------------------------------------------- */
/* Vertical rhythm and hairlines carry the structure; there are no shadows on
   this page except the hero button's. */
.sv-band { padding: var(--x7) 0; border-bottom: 1px solid var(--line); }
.sv-band:last-of-type { border-bottom: 0; }
.sv-band-alt { background: var(--s-base); }

.sv-head { max-width: 720px; margin-inline: auto; margin-bottom: var(--x5); text-align: center; }
.sv-head-start { margin-inline: 0; text-align: start; }
.sv-head .t-label { display: block; margin-bottom: var(--x3); }
.sv-head h2 { margin-bottom: var(--x3); color: var(--ink); }
.sv-head p { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.7; }

.sv-band h2, .sv-band h3 { color: var(--ink); }
.sv-prose p { margin: 0 0 var(--x3); color: var(--ink-2); font-size: 1rem; line-height: 1.8; }
.sv-prose p:last-child { margin-bottom: 0; }

/* --- asymmetric split -------------------------------------------------- */
/* Copy on one side, a panel on the other; `sv-flip` mirrors it for the next
   band so the page alternates rather than marching down one edge. */
.sv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--x6); align-items: center; }
.sv-split-wide { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.sv-flip > :first-child { order: 2; }

/* --- panels ------------------------------------------------------------ */
.sv-panel { padding: var(--x4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--s-1); }
.sv-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--x4); padding-bottom: var(--x3); border-bottom: 1px solid var(--line); }
.sv-panel-head strong { color: var(--ink); font-size: .95rem; font-weight: 700; }

/* Dotted field, echoing the reference's technical figures. Purely decorative,
   so it carries no data and makes no claim. */
.sv-field { border-radius: var(--r); background-image: radial-gradient(var(--line-hi) 1px, transparent 1px); background-size: 18px 18px; }

/* --- card grids -------------------------------------------------------- */
.sv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--x4); }
.sv-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sv-card { display: flex; min-width: 0; flex-direction: column; padding: var(--x4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--s-1); transition: background-color .18s ease, border-color .18s ease; }
.sv-card:hover { border-color: var(--line-hi); background: var(--s-2); }
.sv-card .t-label { display: block; margin-bottom: var(--x3); }
.sv-card h3 { margin: 0 0 var(--x2); color: var(--ink); font-family: var(--f-head); font-size: 1.0625rem; font-weight: 620; letter-spacing: -.02em; line-height: 1.35; }
html[dir="rtl"] .sv-card h3 { font-family: var(--f-body); font-weight: 700; letter-spacing: 0; }
.sv-card p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.7; }
.sv-card p + p { margin-top: var(--x2); }

/* --- chips ------------------------------------------------------------- */
.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sv-chips li { padding: 7px 14px; border: 1px solid var(--line-hi); border-radius: 999px; background: var(--acc-dim); color: var(--ink); font-size: .82rem; font-weight: 600; }

/* --- numbered stage rail ----------------------------------------------- */
/* One continuous hairline behind the markers, so the four stages read as a
   single run rather than four detached cards. */
.sv-rail { position: relative; display: grid; gap: var(--x5); margin: 0; padding: 0; list-style: none; }
.sv-rail::before { position: absolute; top: 12px; bottom: 12px; inset-inline-start: 15px; width: 1px; background: var(--line); content: ""; }
.sv-rail li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--x4); align-items: start; }
.sv-rail-num { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line-hi); border-radius: 50%; background: var(--s-2); color: var(--acc-lo); font-family: var(--f-data); font-size: .7rem; font-weight: 600; }
.sv-rail h3 { margin: 4px 0 var(--x2); color: var(--ink); font-family: var(--f-head); font-size: 1.0625rem; font-weight: 620; letter-spacing: -.02em; }
html[dir="rtl"] .sv-rail h3 { font-family: var(--f-body); font-weight: 700; letter-spacing: 0; }
.sv-rail p { margin: 0; max-width: 60ch; color: var(--ink-2); font-size: .92rem; line-height: 1.75; }

/* --- ordered "what is included" ---------------------------------------- */
.sv-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--x3); margin: 0; padding: 0; list-style: none; counter-reset: sv-step; }
.sv-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--x3); align-items: baseline; padding: var(--x4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--s-1); color: var(--ink-2); font-size: .92rem; line-height: 1.65; }
.sv-steps li::before { counter-increment: sv-step; color: var(--acc); content: counter(sv-step, decimal-leading-zero); font-family: var(--f-data); font-size: .72rem; font-weight: 600; letter-spacing: .1em; }

/* --- plain checked list ------------------------------------------------ */
.sv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--x2) var(--x4); margin: 0; padding: 0; list-style: none; }
.sv-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .92rem; line-height: 1.6; }
.sv-list li::before { color: var(--acc); content: "✓"; font-size: .8rem; }
.sv-list-1 { grid-template-columns: minmax(0, 1fr); }

/* --- with / without contrast ------------------------------------------- */
.sv-contrast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--x4); }
.sv-track { padding: var(--x4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--s-1); }
.sv-track-good { border-color: var(--line-accent); background: linear-gradient(180deg, rgba(168, 85, 247, .05), transparent 45%), var(--s-1); }
.sv-track > .t-label { display: block; margin-bottom: var(--x4); }
.sv-track-good > .t-label { color: var(--acc-lo); }
.sv-track ol { display: grid; gap: 0; margin: 0 0 var(--x3); padding: 0; list-style: none; counter-reset: sv-node; }
.sv-track li { position: relative; padding: 11px 0 11px var(--x4); padding-inline: var(--x4) 0; color: var(--ink-2); font-size: .9rem; line-height: 1.6; }
.sv-track li::before { position: absolute; inset-inline-start: 5px; top: 17px; width: 7px; height: 7px; border: 1px solid var(--line-hi); border-radius: 50%; background: var(--s-3); content: ""; }
.sv-track li:not(:last-child)::after { position: absolute; inset-inline-start: 8px; top: 26px; bottom: -2px; width: 1px; background: var(--line); content: ""; }
.sv-track-good li:last-child::before { border-color: var(--acc); background: var(--acc); }
.sv-track-bad li:last-child::before { border-color: #ef6a6a; background: #ef6a6a; }
.sv-track-note { margin: 0; padding-top: var(--x3); border-top: 1px solid var(--line); color: var(--ink-3); font-size: .84rem; font-style: normal; line-height: 1.6; }

/* --- FAQ --------------------------------------------------------------- */
.sv-faq { display: grid; max-width: 820px; margin-inline: auto; gap: 0; }
.sv-faq details { border-bottom: 1px solid var(--line); }
.sv-faq details:first-child { border-top: 1px solid var(--line); }
.sv-faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--x4); padding: var(--x4) 0; color: var(--ink); cursor: pointer; font-size: .98rem; font-weight: 650; line-height: 1.5; list-style: none; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { color: var(--acc); content: "+"; font-family: var(--f-data); font-size: 1.1rem; transition: transform .18s ease; }
.sv-faq details[open] summary::after { transform: rotate(45deg); }
.sv-faq p { margin: 0; padding: 0 0 var(--x4); max-width: 70ch; color: var(--ink-2); font-size: .92rem; line-height: 1.8; }

/* --- flow diagram host -------------------------------------------------- */
.sv-flow { max-width: 900px; margin-inline: auto; }

/* --- engagement band ---------------------------------------------------- */
.sv-engage { padding: var(--x7) 0; border-block: 1px solid var(--line); background: radial-gradient(110% 130% at 50% 0%, rgba(168, 85, 247, .09), transparent 62%), var(--s-base); }
.sv-engage .sv-head { margin-bottom: var(--x4); }
.sv-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: var(--x5); }
.sv-actions .nav-button { min-height: 46px; padding: 0 22px; border-radius: var(--r); font-size: .88rem; }

/* --- related ------------------------------------------------------------ */
.sv-related { padding: var(--x6) 0 var(--x7); background: var(--s-void); }
.sv-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--x3); }
.sv-related-card { display: block; min-width: 0; padding: var(--x4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--s-1); transition: background-color .18s ease, border-color .18s ease; }
.sv-related-card:hover { border-color: var(--line-hi); background: var(--s-2); }
.sv-related-card b { display: block; margin-bottom: 6px; color: var(--ink); font-size: .95rem; }
.sv-related-card span { color: var(--ink-3); font-size: .84rem; line-height: 1.6; }

/* --- listing ------------------------------------------------------------ */
.sv-cat { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--x3); margin-bottom: var(--x4); padding-bottom: var(--x3); border-bottom: 1px solid var(--line); }
.sv-cat h2 { margin: 0; color: var(--ink); }
.sv-cat p { max-width: 52ch; margin: 0; color: var(--ink-2); font-size: .92rem; }

/* --- motion ------------------------------------------------------------- */
/* Entrance only, and only once. assets/service-pages.js adds `is-in`; if the
   script never runs the content is visible anyway, because the hidden state is
   applied by the script's own `sv-motion` flag on <html>. */
.sv-motion .sv-rise { opacity: 0; transform: translateY(14px); }
.sv-motion .sv-rise.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--sv-delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .sv-motion .sv-rise, .sv-motion .sv-rise.is-in { opacity: 1; transform: none; transition: none; }
  .sv-ticker-track { animation: none; }
  .sv-cue-arrow { animation: none; }
}

/* --- responsive --------------------------------------------------------- */
@media (max-width: 1000px) {
  .sv-grid, .sv-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-split { gap: var(--x5); }
}

@media (max-width: 760px) {
  .aether-flow-hero { min-height: 0 !important; padding: 84px 0 56px !important; }
  .sv-split, .sv-split-wide { grid-template-columns: minmax(0, 1fr); gap: var(--x4); }
  .sv-flip > :first-child { order: 0; }
  .sv-grid, .sv-grid-2, .sv-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .sv-related-grid { grid-template-columns: minmax(0, 1fr); }
  .sv-steps, .sv-list { grid-template-columns: minmax(0, 1fr); }
  .sv-contrast { grid-template-columns: minmax(0, 1fr); }
  .sv-rail li { grid-template-columns: 28px minmax(0, 1fr); gap: var(--x3); }
  .sv-rail::before { inset-inline-start: 13px; }
  .sv-rail-num { width: 28px; height: 28px; }
  .sv-head { text-align: start; margin-inline: 0; }
  .sv-crumbs .wrap { min-height: 0; padding-block: 12px; }
}