/* =========================================================================
   Alrasly — Service Page template (light "working page")
   Navy HERO + navy CTA bands bookend a white/off-white readable body.
   Brand law (CLAUDE.md) supreme: palette only, radius 0, squares only,
   Manrope/Noto, no shadows/gold/green. Light text on dark bands; ink on light.
   Buttons reuse the sitewide .btn system (with on-dark modifiers in the bands).

   Polish-sweep invariants (apply to every service page):
   - Spacing: every gap/padding on the --space scale (4/8/12/16/24/32/48/64/96).
   - Type: token sizes only (--fs-caption/small/body/body-lg/h2/display).
   - Cards: 1px rgba(41,37,97,.12) border + 3px brand top accent.
   - Motion: ONE pattern — sections fade/translate-up 12px, 250ms ease, once;
     timeline steps stagger 60ms. Gated behind .js; reduced-motion shows final.
   ========================================================================= */

.svc{ position:relative; background:var(--offwhite); color:var(--ink); }

/* Faint square brand grid texture across the page (absolute → stays out of the footer). */
.svc::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;
}
.svc-hero,.svc-sec,.svc-cta{ position:relative; z-index:1; }

/* ---------- shared bits ---------- */
.svc-kick{ display:flex; align-items:center; gap:var(--space-3); margin:0 0 var(--space-4); }
.svc-tick{ display:grid; grid-template-columns:9px 9px; grid-template-rows:9px 9px; gap:2px; flex:0 0 auto; }
.svc-tick i{ width:9px; height:9px; display:block; }
.svc-kick__t{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.22em; text-transform:uppercase; color:var(--blue); }
[dir="rtl"] .svc-kick__t{ letter-spacing:normal; text-transform:none; }   /* never letter-space Arabic */

.svc-h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:var(--fw-bold); color:var(--navy); max-width:22ch; margin:0; letter-spacing:-.4px; }
.svc-body{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); max-width:58ch; margin:var(--space-4) 0 0; }

.svc-sec{ padding-block:var(--space-8); }

.svc-btnrow{ display:flex; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-6); }
.svc-btnrow--center{ justify-content:center; }

/* text links — hover swaps tone + underline; keyboard focus gets the global 2px blue square ring */
.svc-textlink{ color:var(--blue); font-weight:var(--fw-bold); text-decoration:none; display:inline-block; transition:color .15s ease; }
.svc-textlink:hover,.svc-textlink:focus-visible{ text-decoration:underline; text-underline-offset:3px; color:var(--blue-hover); }
.svc-textlink--sky{ color:var(--sky); }
.svc-textlink--sky:hover,.svc-textlink--sky:focus-visible{ color:var(--white); }

.svc-rule{ border:0; border-top:1px solid rgba(41,37,97,.12); max-width:var(--container-max); margin-inline:auto; }

/* decorative low-opacity brand square accents (square, behind content) */
.svc-acc{ position:absolute; z-index:0; pointer-events:none; }

/* navy-duotone square image placeholder */
.svc-ph{ position:relative; background:linear-gradient(135deg,#211d4e,#292561); border:1px solid rgba(174,234,253,.3); display:grid; place-items:center; overflow:hidden; min-height:240px; }
.svc-ph::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg,rgba(174,234,253,.06) 0 10px,transparent 10px 20px); }
.svc-ph__lab{ position:relative; z-index:1; text-align:center; color:var(--sky); padding:var(--space-4); }
.svc-ph__sq{ display:block; width:34px; height:34px; border:2px solid var(--sky); margin:0 auto var(--space-3); }
.svc-ph__lab strong{ display:block; font-size:var(--fs-small); font-weight:var(--fw-bold); color:var(--white); }
.svc-ph__lab span{ display:block; font-size:var(--fs-caption); color:rgba(174,234,253,.85); margin-top:var(--space-1); }

/* ---------- HERO (navy band) ---------- */
.svc-hero{
	color:var(--white);
	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);
}
.svc-hero__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); align-items:center; }
.svc-hero .svc-kick__t{ color:var(--sky); }
.svc-hero__title{ font-size:var(--fs-display); line-height:var(--lh-display); font-weight:var(--fw-bold); letter-spacing:-1px; max-width:15ch; color:var(--white); margin:0; }
.svc-hero__lead{ font-size:var(--fs-body-lg); line-height:var(--lh-body); color:rgba(255,255,255,.85); max-width:46ch; margin:var(--space-4) 0 0; }
.svc-hero__media .svc-ph{ min-height:300px; border-color:rgba(174,234,253,.3); }

/* ---------- PROBLEM (two-column: copy + on-brand square graphic) ---------- */
.svc-problem .svc-body{ max-width:48ch; }
.svc-figsvg{ display:block; width:100%; height:auto; border:1px solid rgba(174,234,253,.3); }

/* ---------- WHAT YOU GET — watermark layer (the single PA watermark spec) ----------
   Decorative icon masks behind the section. navy, 10% opacity, masked by a committed
   SVG asset (platform logo or Lucide icon — never hand-drawn). Eight fixed slots set
   the size + position. Source of truth: CLAUDE.md §17. */
.svc-getwrap{ position:relative; overflow:hidden; }
.svc-logobg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.svc-wm{
	position:absolute; background:var(--navy); opacity:.10;
	-webkit-mask:center / contain no-repeat; mask:center / contain no-repeat;
}
.svc-wm--1{ width:96px; height:96px; top:6%;     left:3%;    }
.svc-wm--2{ width:78px; height:78px; top:32%;    left:13%;   }
.svc-wm--3{ width:64px; height:64px; top:66%;    left:5%;    }
.svc-wm--4{ width:72px; height:72px; bottom:8%;  left:22%;   }
.svc-wm--5{ width:70px; height:70px; top:9%;     right:8%;   }
.svc-wm--6{ width:56px; height:56px; top:48%;    right:4%;   }
.svc-wm--7{ width:82px; height:82px; bottom:12%; right:11%;  }
.svc-wm--8{ width:60px; height:60px; top:30%;    right:27%;  }
.svc-getwrap > .svc-kick,
.svc-getwrap > .svc-h2,
.svc-getwrap > .svc-get,
.svc-getwrap > .svc-plats{ position:relative; z-index:1; }
.svc-get{ display:grid; grid-template-columns:1fr; gap:var(--space-3); margin-top:var(--space-5); }
.svc-g{ background:var(--white); border:1px solid rgba(41,37,97,.12); border-left:3px solid var(--blue); padding:var(--space-4); font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--navy); }
[dir="rtl"] .svc-g{ border-left:1px solid rgba(41,37,97,.12); border-right:3px solid var(--blue); }
.svc-plats{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-5); list-style:none; padding:0; }
.svc-plat{ background:var(--white); border:1px solid rgba(41,37,97,.12); padding:var(--space-2) var(--space-4); font-size:var(--fs-small); font-weight:var(--fw-semibold); color:var(--navy); }

/* ---------- OUR PROCESS — vertical alternating timeline ----------
   The ONLY positioned decoration is one full-bleed centre rail (.svc-tl::before, desktop).
   Number tiles are in-flow, centred on the rail via the grid; cards alternate sides.
   Mobile (<1040): the existing stacked left-rail timeline (marker left, text right). */
.svc-tl{ position:relative; margin-top:var(--space-6); }

/* number tile (square, tone bg) + text — shared by both layouts */
.svc-tl__num{ width:48px; height:48px; display:inline-grid; place-items:center; position:relative; z-index:1;
	font-weight:var(--fw-bold); font-size:var(--fs-body-lg); color:var(--white); }
.svc-tl__num--navy{   background:var(--navy); }
.svc-tl__num--blue{   background:var(--blue); }
.svc-tl__num--purple{ background:var(--purple-blue); }
.svc-tl__num--sky{    background:var(--sky); color:var(--navy); }   /* navy numeral on sky (CLAUDE.md §5) */
.svc-tl__title{ font-size:var(--fs-body); font-weight:var(--fw-bold); color:var(--navy); margin:0 0 var(--space-1); }
.svc-tl__desc{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink); margin:0; }

/* Mobile (default): stacked left-rail timeline — marker left, title + description right. */
.svc-tl__step{ position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:var(--space-4); align-items:start; padding-bottom:var(--space-6); }
.svc-tl__step::before{ content:""; position:absolute; left:23px; top:52px; bottom:0; width:2px; background:rgba(41,37,97,.18); z-index:0; }
[dir="rtl"] .svc-tl__step::before{ left:auto; right:23px; }
.svc-tl__step:last-child::before{ display:none; }
.svc-tl__card{ padding-top:var(--space-1); }

/* Desktop (≥1040): one centred rail + cards alternating left/right of it. */
@media (min-width:1040px){
	.svc-tl{ display:grid; row-gap:var(--space-7); }
	.svc-tl::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-1px); background:var(--navy); z-index:0; }
	.svc-tl__step{ grid-template-columns:1fr auto 1fr; column-gap:var(--space-6); align-items:center; padding-bottom:0; }
	.svc-tl__step::before{ display:none; }
	.svc-tl__num{ grid-column:2; }
	.svc-tl__card{ position:relative; z-index:1; max-width:380px; padding:var(--space-4) var(--space-5);
		background:var(--white); border:1px solid rgba(41,37,97,.12); border-top:3px solid var(--navy); }
	.svc-tl__card--blue{   border-top-color:var(--blue); }
	.svc-tl__card--purple{ border-top-color:var(--purple-blue); }
	.svc-tl__card--sky{    border-top-color:var(--sky); }
	.svc-tl__step--left  .svc-tl__card{ grid-column:1; margin-left:auto; }    /* hug the rail from the left */
	.svc-tl__step--right .svc-tl__card{ grid-column:3; margin-right:auto; }   /* hug the rail from the right */
}

/* ---------- SELECTED WORK ---------- */
.svc-thumbs{ display:grid; grid-template-columns:1fr; gap:var(--space-3); margin-top:var(--space-5); }
.svc-thumbs .svc-ph{ min-height:180px; }
.svc-work__more{ text-align:center; margin-top:var(--space-5); }

/* ---------- WHY ALRASLY ---------- */
.svc-split{ display:grid; grid-template-columns:1fr; gap:var(--space-6); align-items:center; margin-top:var(--space-4); }
.svc-split__media .svc-ph{ min-height:260px; }
.svc-proof{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin:var(--space-6) 0 0; }
.svc-pf{ background:var(--white); border:1px solid rgba(41,37,97,.12); border-top:3px solid var(--blue); padding:var(--space-4); margin:0; }
.svc-pf__big{ font-size:var(--fs-h2); font-weight:var(--fw-bold); color:var(--navy); line-height:1.1; }
.svc-pf__lbl{ font-size:var(--fs-caption); color:var(--ink); margin:var(--space-1) 0 0; }

/* ---------- WHO IT'S FOR ---------- */
.svc-two{ display:grid; grid-template-columns:1fr; gap:var(--space-3); margin-top:var(--space-5); }
.svc-fit{ background:var(--white); border:1px solid rgba(41,37,97,.12); padding:var(--space-5); }
.svc-fit--yes{ border-top:3px solid var(--blue); }
.svc-fit--no { border-top:3px solid rgba(41,37,97,.22); }
/* icon header — square badge + label, reads designed */
.svc-fit__head{ display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); }
.svc-fit__badge{ width:40px; height:40px; flex:0 0 auto; display:inline-grid; place-items:center; }
.svc-fit__badge svg{ width:20px; height:20px; display:block; }
.svc-fit--yes .svc-fit__badge{ background:var(--blue); }
.svc-fit--no  .svc-fit__badge{ background:rgba(41,37,97,.12); }
.svc-fit__h{ font-size:var(--fs-caption); letter-spacing:.1em; text-transform:uppercase; margin:0; }
[dir="rtl"] .svc-fit__h{ letter-spacing:normal; text-transform:none; }
.svc-fit--yes .svc-fit__h{ color:var(--blue); }
.svc-fit--no  .svc-fit__h{ color:var(--ink); }
/* list items — each with a small square icon */
.svc-fit__list{ list-style:none; margin:0; padding:0; }
.svc-fit__list li{ display:grid; grid-template-columns:auto 1fr; gap:var(--space-3); align-items:start; padding:var(--space-2) 0; }
.svc-fit__ic{ width:20px; height:20px; flex:0 0 auto; display:inline-grid; place-items:center; margin-top:1px; }
.svc-fit__ic svg{ width:12px; height:12px; display:block; }
.svc-fit--yes .svc-fit__ic{ background:var(--blue); }
.svc-fit--no  .svc-fit__ic{ background:rgba(41,37,97,.12); }
.svc-fit__txt{ font-size:var(--fs-small); color:var(--ink); line-height:var(--lh-small); }

/* ---------- HOW WE WORK WITH YOU ---------- */
.svc-assure{ display:grid; grid-template-columns:1fr; gap:var(--space-3); margin-top:var(--space-5); }
.svc-as{ background:var(--white); border:1px solid rgba(41,37,97,.12); border-top:3px solid var(--blue); padding:var(--space-5); }
.svc-asico{ display:inline-grid; place-items:center; width:44px; height:44px; background:var(--blue); margin-bottom:var(--space-4); }
.svc-asico svg{ width:22px; height:22px; display:block; }
.svc-as__h{ font-size:var(--fs-body); font-weight:var(--fw-bold); color:var(--navy); margin:0 0 var(--space-2); }
.svc-as__p{ font-size:var(--fs-small); color:var(--ink); line-height:var(--lh-small); margin:0; }

/* ---------- FAQ ---------- */
.svc-faqlist{ margin-top:var(--space-5); }
.svc-faqitem{ border:1px solid rgba(41,37,97,.12); background:var(--white); margin-top:var(--space-2); }
.svc-faqq{
	padding:var(--space-4); font-weight:var(--fw-semibold); font-size:var(--fs-body); cursor:pointer; list-style:none;
	color:var(--navy); display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
	transition:background-color .15s ease, color .15s ease;
}
.svc-faqq::-webkit-details-marker{ display:none; }
/* +/– toggle glyph: fixed-width box so open/close never shifts alignment */
.svc-faqq::after{ content:"+"; color:var(--blue); font-weight:var(--fw-bold); font-size:var(--fs-h4); line-height:1; flex:0 0 auto; width:20px; text-align:center; }
.svc-faqitem[open] .svc-faqq::after{ content:"–"; }
.svc-faqq:hover{ background:var(--offwhite); color:var(--blue); }
.svc-faqq:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.svc-faqa{ padding:0 var(--space-4) var(--space-4); }
.svc-faqa p{ color:var(--ink); font-size:var(--fs-small); line-height:var(--lh-small); margin:0; max-width:72ch; }

/* ---------- FINAL CTA (navy band) ---------- */
.svc-cta{
	text-align:center; color:var(--white);
	background-image:
		radial-gradient(120% 120% at 50% 0%,rgba(85,70,250,.4),transparent 55%),
		linear-gradient(135deg,#211d4e,#191636);
	padding-block:clamp(64px,9vw,96px);
}
.svc-cta__title{ color:var(--white); font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:var(--fw-bold); max-width:22ch; margin:0 auto; }
.svc-cta__more{ margin-top:var(--space-5); }

/* ---------- responsive ---------- */
@media (min-width:600px){
	.svc-get{ grid-template-columns:1fr 1fr; }
	.svc-two{ grid-template-columns:1fr 1fr; }
	.svc-thumbs{ grid-template-columns:repeat(3,1fr); }
	.svc-assure{ grid-template-columns:1fr 1fr; }
	.svc-proof{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1040px){
	.svc-hero__grid{ grid-template-columns:1.1fr .9fr; gap:var(--space-7); }
	.svc-split{ grid-template-columns:.9fr 1.1fr; gap:var(--space-6); }
	.svc-split--copyfirst{ grid-template-columns:1.1fr .9fr; }   /* problem: copy left, graphic right */
	.svc-assure{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- Motion — the single site reveal pattern, tuned for service pages ----------
   Sections carry [data-reveal] (markup) and fade/translate-up 12px once, 250ms ease
   (overrides main.css's 16px/.55s base within .svc). Timeline steps stagger 60ms inside
   their section's reveal. .js-gated: no JS → everything visible; reduced-motion →
   reveal.js shows the final state instantly and main.css zeroes transition durations. */
.js .svc [data-reveal]{
	transform:translateY(12px);
	transition:opacity .25s ease, transform .25s ease;
}
.js .svc [data-reveal].is-visible{ opacity:1; transform:none; }

.js .svc .svc-proc[data-reveal] .svc-tl__step{ opacity:0; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease; }
.js .svc .svc-proc[data-reveal].is-visible .svc-tl__step{ opacity:1; transform:none; }
.js .svc .svc-proc[data-reveal].is-visible .svc-tl__step:nth-child(2){ transition-delay:.06s; }
.js .svc .svc-proc[data-reveal].is-visible .svc-tl__step:nth-child(3){ transition-delay:.12s; }
.js .svc .svc-proc[data-reveal].is-visible .svc-tl__step:nth-child(4){ transition-delay:.18s; }
.js .svc .svc-proc[data-reveal].is-visible .svc-tl__step:nth-child(5){ transition-delay:.24s; }
.js .svc .svc-proc[data-reveal].is-visible .svc-tl__step:nth-child(6){ transition-delay:.30s; }
.js .svc .svc-proc[data-reveal].is-visible .svc-tl__step:nth-child(7){ transition-delay:.36s; }
.js .svc .svc-proc[data-reveal].is-visible .svc-tl__step:nth-child(8){ transition-delay:.42s; }

@media (prefers-reduced-motion:reduce){
	.js .svc [data-reveal],
	.js .svc .svc-proc[data-reveal] .svc-tl__step{ opacity:1 !important; transform:none !important; transition:none !important; }
}