/* =========================================================================
   Alrasly — Services index (/services) page chrome. The reusable .al-duo and
   .al-flow components now live in al-components.css (loaded site-wide); this file
   holds only the /services page layout + its reveal wiring. Same offwhite +
   faint-grid surface as the service/contact pages (no bespoke bg). Brand law
   (CLAUDE.md) supreme: palette only via tokens, radius 0, squares only, Manrope,
   AAA body pairings. Motion patterns documented in CLAUDE.md §18.
   ========================================================================= */

/* ---------- page surface (identical to service/contact) ---------- */
.svcs{ position:relative; background:var(--offwhite); color:var(--ink); }
.svcs::before{
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
	background-image:
		linear-gradient(rgba(41,37,97,.04) 1px,transparent 1px),
		linear-gradient(90deg,rgba(41,37,97,.04) 1px,transparent 1px);
	background-size:72px 72px;
}
.svcs-hero,.svcs-sec,.svcs-cta-band{ position:relative; z-index:1; }

/* ---------- shared bits ---------- */
.svcs-kick{ display:flex; align-items:center; gap:var(--space-3); margin:0 0 var(--space-4); }
.svcs-tick4{ display:grid; grid-template-columns:9px 9px; grid-template-rows:9px 9px; gap:2px; flex:0 0 auto; }
.svcs-tick4 i{ width:9px; height:9px; display:block; }
.svcs-kick__t{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.22em; text-transform:uppercase; color:var(--blue); }
.svcs-kick--dark .svcs-kick__t{ color:var(--sky); }
[dir="rtl"] .svcs-kick__t{ letter-spacing:normal; text-transform:none; }
.svcs-h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:var(--fw-bold); color:var(--navy); max-width:24ch; margin:0 0 var(--space-4); letter-spacing:-.4px; }
.svcs-sec{ padding-block:var(--space-8); }
.svcs-textlink{ color:var(--blue); font-weight:var(--fw-semibold); text-decoration:none; }
.svcs-textlink:hover{ color:var(--blue-hover); text-decoration:underline; }
.svcs-textlink--sky{ color:var(--sky); }
.svcs-textlink--sky:hover{ color:var(--white); }

/* ---------- HERO (navy band, same treatment as service/contact/packages heroes) ---------- */
.svcs-hero{
	color:var(--white); overflow:hidden;
	background-image:
		radial-gradient(120% 90% at 82% 18%,rgba(9,91,244,.5),transparent 55%),
		radial-gradient(110% 90% at 95% 95%,rgba(85,70,250,.45),transparent 50%),
		linear-gradient(135deg,#211d4e,#292561 50%,#191636);
	padding-block:clamp(72px,10vw,116px) var(--space-8);
}
.svcs-hero__title{ font-size:var(--fs-display); line-height:var(--lh-display); font-weight:var(--fw-bold); letter-spacing:-1px; max-width:14ch; color:var(--white); margin:0; }
/* attention-hook one-liner — sky accent on navy is the one permitted sky-on-dark use (§5) */
.svcs-hero__oneliner{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:var(--fw-bold); color:var(--sky); max-width:34ch; margin:var(--space-5) 0 0; }
.svcs-hero__squares{ position:absolute; top:var(--space-8); inset-inline-end:var(--space-8); display:grid; grid-template-columns:repeat(3,var(--space-6)); gap:var(--space-2); opacity:.18; }
.svcs-hero__squares i{ width:var(--space-6); height:var(--space-6); display:block; background:var(--sky); }

/* ---------- INTRO ---------- */
.svcs-intro{ padding-block:var(--space-7) var(--space-2); }
.svcs-intro__t{ font-size:var(--fs-body-lg); line-height:var(--lh-body); color:var(--ink); max-width:78ch; margin:0; }

/* ---------- the service grid ---------- */
.svcs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }

.svcs-process__sub{ font-size:var(--fs-body-lg); line-height:var(--lh-body); color:var(--ink); max-width:60ch; margin:var(--space-4) 0 0; }

/* ---------- PACKAGES TEASER section (full-bleed image band, own vertical rhythm) ---------- */
.svcs-teaser-sec{ position:relative; z-index:1; margin-block:var(--space-8); }
.svcs-teaser-sec .al-duo{ display:block; }

/* ---------- FINAL CTA (navy band) ---------- */
.svcs-cta-band{
	color:var(--white); text-align:center;
	background-image:
		radial-gradient(120% 120% at 15% 10%,rgba(9,91,244,.45),transparent 55%),
		radial-gradient(120% 120% at 90% 90%,rgba(85,70,250,.4),transparent 50%),
		linear-gradient(135deg,#211d4e,#292561 55%,#191636);
	padding-block:var(--space-9);
}
.svcs-cta-band__title{ font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:var(--fw-bold); color:var(--white); max-width:22ch; margin:0 auto; letter-spacing:-.4px; }
.svcs-btnrow{ display:flex; justify-content:center; margin-top:var(--space-6); }
.svcs-band__btn{
	display:inline-block; padding:var(--space-4) var(--space-6); text-decoration:none;
	font-weight:var(--fw-bold); font-size:var(--fs-body); background:var(--white); color:var(--navy);
	transition:background-color .18s ease, color .18s ease;
}
.svcs-band__btn:hover{ background:var(--sky); color:var(--navy); }
.svcs-band__btn:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }
.svcs-cta-band__more{ margin:var(--space-5) 0 0; }

/* =========================================================================
   MOTION — sitewide reveal (12px / 250ms) + 60ms stagger; flow pulse on reveal.
   One observer only (reveal.js adds .is-visible). Hiding gated behind .js so
   no-JS/crawlers see everything.
   ========================================================================= */
.js .svcs [data-reveal]{ opacity:0; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease; }
.js .svcs [data-reveal].is-visible{ opacity:1; transform:none; }
/* the grid + flow containers stay put; their children stagger in */
.js .svcs .svcs-grid[data-reveal],
.js .svcs .al-flow[data-reveal]{ opacity:1; transform:none; transition:none; }
.js .svcs .svcs-grid[data-reveal] .al-duo,
.js .svcs .al-flow[data-reveal] .al-flow__step{ opacity:0; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease; }
.js .svcs .svcs-grid[data-reveal].is-visible .al-duo,
.js .svcs .al-flow[data-reveal].is-visible .al-flow__step{ opacity:1; transform:none; }
.js .svcs .svcs-grid[data-reveal].is-visible .al-duo:nth-child(2),
.js .svcs .al-flow[data-reveal].is-visible .al-flow__step:nth-child(2){ transition-delay:.06s; }
.js .svcs .svcs-grid[data-reveal].is-visible .al-duo:nth-child(3),
.js .svcs .al-flow[data-reveal].is-visible .al-flow__step:nth-child(3){ transition-delay:.12s; }
.js .svcs .svcs-grid[data-reveal].is-visible .al-duo:nth-child(4),
.js .svcs .al-flow[data-reveal].is-visible .al-flow__step:nth-child(4){ transition-delay:.18s; }
.js .svcs .svcs-grid[data-reveal].is-visible .al-duo:nth-child(5){ transition-delay:.24s; }
.js .svcs .svcs-grid[data-reveal].is-visible .al-duo:nth-child(6){ transition-delay:.30s; }

@media (prefers-reduced-motion:reduce){
	.js .svcs [data-reveal],
	.js .svcs .svcs-grid[data-reveal] .al-duo,
	.js .svcs .al-flow[data-reveal] .al-flow__step{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
	.svcs-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
	.svcs-grid{ grid-template-columns:1fr; }
	.svcs-hero__squares{ display:none; }
}