/* =========================================================================
   Alrasly — /work index + case-study pages. Same offwhite + faint-grid surface
   as the other sub-pages; navy bands. Uses the shared .al-mosaic component
   (al-components.css). Brand law (CLAUDE.md): palette only via tokens, radius 0,
   squares only, AAA, reduced-motion-safe.
   ========================================================================= */

/* shared page surface */
.wk, .cs{ position:relative; background:var(--offwhite); color:var(--ink); }
.wk::before, .cs::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;
}
.wk-hero,.wk-main,.wk-report,.wk-proof,.wk-cta,
.cs-hero,.cs-metricbar,.cs-resultband,.cs-main,.cs-cta{ position:relative; z-index:1; }

/* navy hero band, shared look */
.wk-hero, .cs-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);
}

/* four-square kicker */
.wk-kick,.cs-kick{ margin:0 0 var(--space-4); }
/* case-study hero client logo — constrained to a consistent display height so
   heroes match regardless of source dimensions; width auto keeps aspect. */
.cs-hero__logo{ margin:0 0 var(--space-5); }
.cs-hero__logo img{ height:48px; width:auto; display:block; }
.wk-kick{ display:flex; align-items:center; gap:var(--space-3); }
.wk-tick4{ display:grid; grid-template-columns:9px 9px; grid-template-rows:9px 9px; gap:2px; flex:0 0 auto; }
.wk-tick4 i{ width:9px; height:9px; display:block; }
.wk-kick__t{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.22em; text-transform:uppercase; color:var(--sky); }
.cs-kick{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.16em; text-transform:uppercase; color:var(--sky); }
[dir="rtl"] .wk-kick__t,[dir="rtl"] .cs-kick{ letter-spacing:normal; text-transform:none; }

.wk-hero__title,.cs-hero__title{ font-size:var(--fs-display); line-height:var(--lh-display); font-weight:var(--fw-bold); letter-spacing:-1px; color:var(--white); margin:0; max-width:20ch; }
.wk-hero__standfirst,.cs-hero__standfirst{ font-size:var(--fs-body-lg); line-height:var(--lh-body); color:rgba(255,255,255,.85); max-width:62ch; margin:var(--space-5) 0 0; }

/* =========================================================================
   /work — CASE CARDS
   ========================================================================= */
.wk-cards{ padding-block:var(--space-8); display:flex; flex-direction:column; gap:var(--space-6); }
.wk-card{
	display:grid; grid-template-columns:1fr; gap:0; text-decoration:none; color:var(--ink);
	border:1px solid rgba(41,37,97,.12); background:var(--white);
	transition:transform .3s ease, border-color .25s ease;
}
.wk-card:hover{ transform:translateY(-4px); border-color:var(--navy); }
.wk-card:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.wk-card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.wk-card__index{ position:absolute; z-index:3; top:var(--space-4); left:var(--space-4); font-size:var(--fs-h3); font-weight:var(--fw-bold); color:var(--sky); line-height:1; letter-spacing:-1px; }
/* cursor-follow chip — pointer-only; JS positions it; never on keyboard/touch */
.wk-card__chip{
	position:absolute; z-index:4; top:0; left:0; margin:-14px 0 0 -26px; pointer-events:none;
	background:var(--sky); color:var(--navy); font-size:var(--fs-caption); font-weight:var(--fw-bold);
	letter-spacing:.08em; padding:var(--space-1) var(--space-3); opacity:0; transition:opacity .18s ease;
	will-change:transform;
}
.wk-card__media.is-chip .wk-card__chip{ opacity:1; }
.wk-card__meta{ background:var(--offwhite); padding:var(--space-6); display:flex; flex-direction:column; }
.wk-card__eyebrow{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
[dir="rtl"] .wk-card__eyebrow{ letter-spacing:normal; text-transform:none; }
.wk-card__title{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:var(--fw-bold); color:var(--navy); margin:var(--space-3) 0 0; letter-spacing:-.3px; }
.wk-card__summary{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink); margin:var(--space-3) 0 0; max-width:52ch; }
/* stat block: 2px navy top border, count-up figure, six-bar micro-chart */
.wk-card__stat{ margin:var(--space-5) 0 0; padding-top:var(--space-4); border-top:2px solid var(--navy); display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:0 var(--space-3); }
.wk-card__fig{ grid-row:1; font-size:var(--fs-h1); line-height:1; font-weight:var(--fw-bold); color:var(--navy); font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.wk-card__statlabel{ grid-row:1; align-self:center; font-size:var(--fs-small); color:var(--ink); }
.wk-chart{ grid-column:1 / -1; grid-row:2; display:flex; align-items:flex-end; gap:4px; height:34px; margin-top:var(--space-3); }
.wk-chart i{ width:12px; height:100%; background:var(--blue); transform:scaleY(var(--h)); transform-origin:bottom; }
.wk-chart i:last-child{ background:var(--sky); }
.wk-card__more{ margin-top:var(--space-5); font-size:var(--fs-small); font-weight:var(--fw-bold); color:var(--blue); }

@media (min-width:900px){
	.wk-card{ grid-template-columns:1.15fr 1fr; }
	.wk-card--rev .wk-card__media{ order:2; }
	.wk-card__meta{ justify-content:center; padding:var(--space-8); }
	/* Media fills the full card height (the meta column sets the row height); the
	   4:3 ratio is a mobile-only band. align-items:stretch (grid default) stretches
	   the media cell to the row; drop the aspect-ratio so it can, and the mosaic
	   image cover-crops to fill — never stretches. No white strip under the image. */
	.wk-card__media{ aspect-ratio:auto; height:100%; }
}

/* micro-chart build on reveal (staggered scaleY); reduced-motion = final */
.js .wk .wk-chart i{ transform:scaleY(0); }
.js .wk .wk-card[data-reveal].is-visible .wk-chart i{ transform:scaleY(var(--h)); transition:transform .5s var(--al-ease); transition-delay:calc(var(--i) * 70ms + .1s); }

/* /work "How we report" band */
.wk-report{ color:var(--white); background:linear-gradient(135deg,#211d4e,#292561 55%,#191636); padding-block:var(--space-8); }
.wk-report__kick{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.18em; text-transform:uppercase; color:var(--sky); margin:0 0 var(--space-4); }
.wk-report__body{ font-size:var(--fs-h4); line-height:var(--lh-h4); font-weight:var(--fw-semibold); color:var(--white); max-width:70ch; margin:0; }

/* /work proof strip — four squares, navy, sky figures, gutter 0 */
.wk-proof{ background:linear-gradient(135deg,#191636,#211d4e); padding-block:var(--space-8); }
.wk-proof__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-block:0; padding:0; list-style:none; }
.wk-prooftile{ padding:var(--space-6) var(--space-5); border:1px solid rgba(174,234,253,.16); margin:-0.5px; }
.wk-prooftile__num{ display:block; font-size:var(--fs-display); line-height:1; font-weight:var(--fw-bold); color:var(--sky); font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.wk-prooftile__label{ display:block; font-size:var(--fs-small); color:rgba(255,255,255,.85); margin-top:var(--space-2); }
@media (min-width:760px){ .wk-proof__grid{ grid-template-columns:repeat(4,1fr); } }

/* /work + case CTA (navy) */
.wk-cta, .cs-cta{ 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); }
.wk-cta__title,.cs-cta__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; }
.wk-cta__body,.cs-cta__body{ font-size:var(--fs-body); line-height:var(--lh-body); color:rgba(255,255,255,.85); max-width:56ch; margin:var(--space-4) auto 0; }
.wk-cta__btn,.cs-cta__btn{ display:inline-block; margin-top:var(--space-6); padding:var(--space-3) 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; }
.wk-cta__btn:hover,.cs-cta__btn:hover{ background:var(--sky); color:var(--navy); }
.wk-cta__btn:focus-visible,.cs-cta__btn:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

/* =========================================================================
   CASE STUDY
   ========================================================================= */
.cs-hero__media{ margin-top:var(--space-7); }
.cs-figure{ margin:0; position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid rgba(41,37,97,.12); }
.cs-hero__media .cs-figure{ border-color:rgba(174,234,253,.3); }
.cs-sec .cs-figure{ aspect-ratio:3/2; margin-top:var(--space-6); }
/* a real photo (alrasly_al_duo) fills the figure frame; the figure keeps the border */
.cs-figure .al-duo{ position:absolute; inset:0; border:0; }

/* metric bar (Mubasher) — 4 navy squares, sky figures, gutter 0 */
.cs-metricbar{ background:linear-gradient(135deg,#191636,#211d4e); padding-block:var(--space-7); }
.cs-metricbar__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin:0 auto; padding:0; list-style:none; max-width:var(--container-max); }
.cs-metric{ padding:var(--space-6) var(--space-5); border:1px solid rgba(174,234,253,.16); margin:-0.5px; }
.cs-metric__fig{ display:block; font-size:var(--fs-h1); line-height:1; font-weight:var(--fw-bold); color:var(--sky); font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.cs-metric__label{ display:block; font-size:var(--fs-small); line-height:var(--lh-small); color:rgba(255,255,255,.85); margin-top:var(--space-2); }
.cs-metricbar__cap{ color:rgba(255,255,255,.7); font-size:var(--fs-caption); margin:var(--space-5) auto 0; }
@media (min-width:760px){ .cs-metricbar__grid{ grid-template-columns:repeat(4,1fr); } }

/* result band (AASN single; XO two figures) */
.cs-resultband{ background:linear-gradient(135deg,#211d4e,#292561 55%,#191636); padding-block:var(--space-8); color:var(--white); text-align:center; }
.cs-resultband__fig{ display:block; font-size:var(--fs-display); line-height:1; font-weight:var(--fw-bold); color:var(--sky); letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.cs-resultband__sub{ display:block; font-size:var(--fs-h4); font-weight:var(--fw-semibold); color:var(--white); margin-top:var(--space-2); }
.cs-resultband__note{ display:block; font-size:var(--fs-small); font-style:italic; color:rgba(255,255,255,.82); margin-top:var(--space-2); }
.cs-resultband__cap{ font-size:var(--fs-caption); color:rgba(255,255,255,.7); margin:var(--space-5) 0 0; }
.cs-resultband__two{ display:grid; grid-template-columns:1fr; gap:var(--space-6); }
.cs-resultband__two .cs-resultband__cap{ grid-column:1 / -1; }
@media (min-width:640px){ .cs-resultband--two .cs-resultband__two{ grid-template-columns:1fr 1fr; } }

/* scope band (XO) — offwhite, 1px ink border, above the numbers */
.cs-scopeband{ margin-block:var(--space-7); border:1px solid var(--ink); padding:var(--space-5); }
.cs-scopeband__row{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink); margin:0 0 var(--space-2); }
.cs-scopeband__row:last-child{ margin-bottom:0; }
.cs-scopeband__row strong{ color:var(--navy); }

/* numbered sections (alternating surfaces) */
.cs-sec{ padding-block:var(--space-8); }
.cs-sec--white{ background:var(--white); }
.cs-sec--off{ background:var(--offwhite); }
.cs-sec__inner{ max-width:74ch; }
.cs-sec__num{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.18em; color:var(--blue); margin:0 0 var(--space-2); }
.cs-sec__title{ font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:var(--fw-bold); color:var(--navy); margin:0 0 var(--space-5); letter-spacing:-.4px; }
.cs-p{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); margin:0 0 var(--space-4); }
.cs-p:last-child{ margin-bottom:0; }
.cs-p strong{ color:var(--navy); }
.cs-note{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink); border-left:2px solid var(--blue); padding-left:var(--space-4); margin:0 0 var(--space-4); }
.cs-list{ margin:0 0 var(--space-4); padding-left:var(--space-5); }
.cs-list li{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); margin-bottom:var(--space-2); }
.cs-list li strong{ color:var(--navy); }
.cs-more{ margin:var(--space-4) 0 0; }
.cs-textlink{ color:var(--blue); font-weight:var(--fw-semibold); text-decoration:none; }
.cs-textlink:hover{ color:var(--blue-hover); text-decoration:underline; }
.cs-h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:var(--fw-bold); color:var(--navy); margin:0 0 var(--space-5); letter-spacing:-.4px; }

/* quote band (Mubasher) — full-bleed navy, breaks container */
.cs-quote{ background:linear-gradient(135deg,#191636,#211d4e); color:var(--white); padding-block:var(--space-9); }
.cs-quote__mark{ display:block; font-size:96px; line-height:.6; color:var(--sky); font-weight:var(--fw-bold); }
.cs-quote__q{ font-size:var(--fs-h2); line-height:1.2; font-weight:var(--fw-bold); color:var(--white); margin:var(--space-4) 0 var(--space-5); max-width:26ch; }
.cs-quote__by{ font-size:var(--fs-body); font-weight:var(--fw-regular); color:rgba(255,255,255,.85); margin:0; }
.cs-quote__name{ font-weight:var(--fw-bold); color:var(--white); }

/* business lesson (AASN/XO) — full-bleed navy pull-quote */
.cs-lesson{ background:linear-gradient(135deg,#211d4e,#292561 55%,#191636); color:var(--white); padding-block:var(--space-9); }
.cs-lesson__mark{ display:block; font-size:96px; line-height:.6; color:var(--sky); font-weight:var(--fw-bold); margin-bottom:var(--space-4); }
.cs-lesson .cs-p{ font-size:var(--fs-h4); line-height:var(--lh-h4); color:var(--white); font-weight:var(--fw-semibold); max-width:60ch; }
.cs-lesson .cs-p:first-of-type{ font-size:var(--fs-h3); }

/* measurement box — offwhite, 1px ink border, small type */
.cs-measure-sec{ padding-block:var(--space-8); }
.cs-measure{ border:1px solid var(--ink); padding:var(--space-6); max-width:80ch; }
.cs-measure__h{ font-size:var(--fs-h4); line-height:var(--lh-h4); font-weight:var(--fw-bold); color:var(--navy); margin:0 0 var(--space-4); }
.cs-measure .cs-p{ font-size:var(--fs-small); line-height:var(--lh-small); }

/* FAQ — semantic <dl>, progressive accordion (open without JS) */
.cs-faq{ padding-block:var(--space-8); }
.cs-faqlist{ margin:0; max-width:80ch; }
.cs-faqitem{ border:1px solid rgba(41,37,97,.12); background:var(--white); margin-bottom:var(--space-2); }
.cs-faqq{ margin:0; padding:var(--space-4); font-weight:var(--fw-semibold); font-size:var(--fs-body); color:var(--navy); }
.js .cs-faqq{ cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); }
.js .cs-faqq::after{ content:"+"; color:var(--blue); font-weight:var(--fw-bold); font-size:var(--fs-h4); line-height:1; flex:0 0 auto; }
.js .cs-faqq[aria-expanded="true"]::after{ content:"–"; }
.js .cs-faqq:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.cs-faqa{ margin:0; padding:0 var(--space-4) var(--space-4); }
.js .cs-faqa[hidden]{ display:none; }
.cs-faqa p{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink); margin:0; max-width:72ch; }
.cs-faqa__links{ margin-top:var(--space-3); display:flex; gap:var(--space-4); }

/* scope of work — offwhite, two columns */
.cs-scopework{ padding-block:var(--space-8); }
.cs-scopework__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:var(--space-2); }
.cs-scopework__list li{ font-size:var(--fs-small); color:var(--ink); padding-left:var(--space-4); border-left:2px solid var(--blue); }
@media (min-width:640px){ .cs-scopework__list{ grid-template-columns:1fr 1fr; gap:var(--space-2) var(--space-6); } }

/* =========================================================================
   MOTION — sitewide reveal; count-up handled by reveal.js
   ========================================================================= */
.js .wk [data-reveal], .js .cs [data-reveal]{ opacity:0; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease; }
.js .wk [data-reveal].is-visible, .js .cs [data-reveal].is-visible{ opacity:1; transform:none; }
.js .wk .wk-cards [data-reveal].is-visible:nth-child(2){ transition-delay:.06s; }
.js .wk .wk-cards [data-reveal].is-visible:nth-child(3){ transition-delay:.12s; }
@media (prefers-reduced-motion:reduce){
	.js .wk [data-reveal], .js .cs [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
	.js .wk .wk-chart i{ transform:scaleY(var(--h)) !important; transition:none !important; }
	.wk-card{ transition:none; }
	.wk-card:hover{ transform:none; }
	.wk-card__chip{ transition:none; }
}