/* Alsakan homepage layer — two-column hero, stats strip, team, service hover, dual CTA. 2026-08-12. */

/* ===========================================================
   Hero — two-column composition (text right / search left)
   =========================================================== */
/* The side CTA column must never cover the hero content. On the
   front page it stays hidden while the hero is on screen and only
   appears once the user scrolls past the hero. */
body.home .alsakan-floating-actions{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .35s var(--ui-ease),visibility .35s var(--ui-ease);
}
body.home .alsakan-floating-actions.is-past-hero{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}

/* Fixed-height content region (~500-560px below the fixed navbar):
   the section itself starts at the page top and the navbar overlays it. */
body.home .alsakan-hero{
	min-height:0!important;
	height:37.5rem;
	isolation:isolate;
}
body.home .alsakan-hero .alsakan-hero__inner{
	position:relative;
	z-index:10;
	width:min(calc(100% - 3rem),74rem);
	margin-inline:auto;
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,27.5rem);
	gap:clamp(2.5rem,5vw,4.5rem);
	align-items:center;
	padding-block:calc(var(--ui-header) + 2.25rem) 4.5rem;
}

/* --- Right: text content --- */
.alsakan-hero__content{
	max-width:34rem;
	text-align:start;
}
.alsakan-hero__eyebrow{
	display:flex;
	align-items:center;
	gap:.8rem;
	margin:0 0 1.25rem!important;
	color:#8fdad6;
	font-family:Cairo,sans-serif;
	font-size:.95rem;
	font-weight:700;
}
.alsakan-hero__eyebrow-line{
	display:inline-block;
	width:2.75rem;
	height:3px;
	border-radius:2px;
	background:linear-gradient(90deg,var(--ui-teal),rgba(77,189,184,0));
	flex:none;
}
body.home .alsakan-hero .alsakan-hero__title{
	font-size:clamp(2.6rem,5.2vw,4.3rem)!important;
	line-height:1.15!important;
	font-weight:800;
	color:#fff;
	margin:0 0 1.1rem;
	font-family:Cairo,sans-serif;
}
.alsakan-hero__title-b{color:var(--ui-teal)}
.alsakan-hero__lead{
	margin:0 0 2rem!important;
	max-width:33rem;
	font-size:clamp(1rem,1.4vw,1.13rem);
	line-height:1.9;
	color:#d5e0ec;
}
.alsakan-hero__cta{
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
	margin-bottom:1.75rem;
	width:max-content;
	max-width:100%;
	padding:.55rem;
	border:1px solid rgba(255,255,255,.28);
	border-radius:1rem;
	background:rgba(10,22,40,.34);
	box-shadow:0 18px 42px rgba(4,12,24,.22);
	-webkit-backdrop-filter:blur(12px) saturate(1.2);
	backdrop-filter:blur(12px) saturate(1.2);
}
.alsakan-hero__cta-btn{min-width:0!important;box-shadow:none!important}
body.home .alsakan-hero__cta .btn-primary{
	background:rgba(77,189,184,.96);
	border-color:rgba(77,189,184,.98);
	color:#062f36;
}
body.home .alsakan-hero__cta .btn-primary:hover,
body.home .alsakan-hero__cta .btn-primary:focus-visible{background:#63cbc6;border-color:#63cbc6;color:#052a30}
body.home .alsakan-hero__cta .btn-outline{
	background:rgba(255,255,255,.88);
	border-color:rgba(255,255,255,.72)!important;
	color:#102033!important;
}
body.home .alsakan-hero__cta .btn-outline:hover,
body.home .alsakan-hero__cta .btn-outline:focus-visible{background:#fff;border-color:#fff!important;color:var(--ui-teal-dark)!important}
.alsakan-hero__trust{
	display:grid;
	gap:.7rem;
	margin:0;
	padding:0;
	list-style:none;
}
.alsakan-hero__trust li{
	display:flex;
	align-items:center;
	gap:.6rem;
	color:#e7eef5;
	font-size:.95rem;
	font-weight:600;
}
.alsakan-hero__trust-check{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:1.4rem;
	height:1.4rem;
	border-radius:50%;
	background:rgba(77,189,184,.18);
	color:var(--ui-teal);
	font-size:.75rem;
	flex:none;
}

/* --- Left: search card --- */
.alsakan-hero-search{
	width:100%;
	margin-inline:0;
	text-align:start;
}
/* Purpose tabs attached above the card, protruding upward. */
.alsakan-hero-search__tabs{
	display:flex;
	gap:.4rem;
	position:relative;
	z-index:3;
	margin-bottom:-1px;
}
.alsakan-hero-search__tab{
	min-height:2.9rem;
	padding:.55rem 1.5rem .65rem;
	border:1px solid rgba(255,255,255,.5);
	border-bottom:0;
	border-radius:.5rem .5rem 0 0;
	background:rgba(255,255,255,.78);
	color:#344450;
	font-family:Cairo,sans-serif;
	font-weight:700;
	font-size:.92rem;
	cursor:pointer;
	box-shadow:0 -4px 18px rgba(4,12,24,.08);
	-webkit-backdrop-filter:blur(10px) saturate(1.15);
	backdrop-filter:blur(10px) saturate(1.15);
	transition:color .2s var(--ui-ease),background .2s var(--ui-ease),border-color .2s var(--ui-ease);
}
.alsakan-hero-search__tab:hover{color:var(--ui-teal-dark);background:rgba(255,255,255,.9)}
.alsakan-hero-search__tab.is-active{
	background:rgba(77,189,184,.92);
	border-color:rgba(109,215,210,.72);
	color:#06393a;
}
.alsakan-hero-search__form{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:.55rem .7rem;
	align-items:end;
	padding:1.12rem 1.22rem 1.2rem;
	background:rgba(255,255,255,.86);
	border:1px solid rgba(255,255,255,.62);
	border-radius:.8rem;
	box-shadow:0 24px 56px rgba(4,12,24,.26);
	-webkit-backdrop-filter:blur(14px) saturate(1.18);
	backdrop-filter:blur(14px) saturate(1.18);
}
.alsakan-hero-search__title{
	grid-column:1/-1;
	margin:0 0 .2rem;
	font-family:Cairo,sans-serif;
	font-size:1.12rem;
	font-weight:800;
	color:var(--ui-ink);
}
.alsakan-hero-search__field{display:grid;gap:.3rem;min-width:0}
.alsakan-hero-search__field--wide{grid-column:1/-1}
.alsakan-hero-search__label{
	font-family:Cairo,sans-serif;
	font-size:.76rem;
	font-weight:700;
	color:var(--ui-muted);
}
.alsakan-hero-search__field select,
.alsakan-hero-search__field input{
	width:100%;
	min-height:2.6rem;
	padding:.52rem .8rem;
	border:1px solid rgba(134,160,157,.52);
	border-radius:.52rem;
	background:rgba(255,255,255,.9);
	color:var(--ui-ink);
	font-size:.93rem;
	appearance:none;
}
.alsakan-hero-search__field select{
	background-image:linear-gradient(45deg,transparent 50%,var(--ui-teal-dark) 50%),linear-gradient(135deg,var(--ui-teal-dark) 50%,transparent 50%);
	background-position:0.55rem 1.15rem,1.15rem 1.15rem;
	background-size:6px 6px;
	background-repeat:no-repeat;
	padding-inline-end:2.4rem;
	cursor:pointer;
}
.alsakan-hero-search__field select:hover,
.alsakan-hero-search__field input:hover{border-color:#9ebfbc}
.alsakan-hero-search__field select:focus,
.alsakan-hero-search__field input:focus{outline:3px solid rgba(77,189,184,.34);outline-offset:1px;border-color:var(--ui-teal);background-color:#fff}
.alsakan-hero-search__submit{
	grid-column:1/-1;
	width:100%;
	min-height:3rem;
	border-radius:.45rem;
	margin-top:.2rem;
}

/* ===========================================================
   Stats strip — standalone section after services
   =========================================================== */
.alsakan-home-stats-section{padding-top:clamp(3rem,6vw,5rem)}
.alsakan-hero-stats__card{
	width:100%;
	margin-inline:auto;
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	background:#fff;
	border:1px solid #e0e9e6;
	border-radius:var(--ui-radius-lg);
	box-shadow:0 18px 50px rgba(10,22,40,.08);
	overflow:hidden;
}
.alsakan-hero-stats__item{
	padding:1.6rem 1.25rem;
	text-align:center;
	border-inline-end:1px solid #e6eeeb;
}
.alsakan-hero-stats__item:last-child{border-inline-end:0}
#alsakan-stats .alsakan-count{font-size:inherit}
.alsakan-hero-stats__value{
	margin:0 0 .25rem;
	font-size:clamp(1.7rem,3vw,2.4rem);
	font-weight:800;
	color:var(--ui-teal-dark);
}
.alsakan-hero-stats__label{
	margin:0;
	font-size:.88rem;
	color:var(--ui-muted);
}
/* ===========================================================
   Service cards — Grow Shadow + Rectangle Out (Hover.css style)
   =========================================================== */
/* Default state: clean light card, restrained shadow, accent top.
   isolation keeps the ::before teal layer behind all content. */
.alsakan-service-card{
	position:relative;
	isolation:isolate;
	overflow:hidden;
	border-radius:var(--ui-radius);
	background:var(--ui-surface);
	border:1px solid var(--ui-border);
	box-shadow:0 2px 6px rgba(10,22,40,.04),0 10px 26px rgba(10,22,40,.07);
	transition:transform 280ms var(--ui-ease),box-shadow 280ms var(--ui-ease),border-color 280ms var(--ui-ease);
}
.alsakan-service-card > *{position:relative;z-index:1}
/* Rectangle Out — teal layer grows outward from center. */
.alsakan-service-card::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	background:linear-gradient(135deg,#54c5c0,var(--ui-teal-dark));
	border-radius:inherit;
	transform:scale(0);
	transform-origin:center;
	transition:transform 280ms ease-out;
}
.alsakan-service-card:hover::before,
.alsakan-service-card:focus-within::before,
.alsakan-service-card:focus-visible::before{transform:scale(1)}
/* Grow Shadow — slight scale + deeper shadow on hover-capable pointers. */
.alsakan-service-card:hover{
	transform:none;
	box-shadow:0 2px 6px rgba(10,22,40,.04),0 10px 26px rgba(10,22,40,.07);
	border-color:var(--ui-border);
}
.alsakan-service-card:hover,
.alsakan-service-card:focus-within,
.alsakan-service-card:focus-visible{background:var(--ui-teal-dark)}
@media(hover:hover){
	.alsakan-service-card:hover,
	.alsakan-service-card:focus-within,
	.alsakan-service-card:focus-visible{
		transform:scale(1.035);
		box-shadow:0 12px 28px rgba(10,22,40,.16),0 6px 16px rgba(77,189,184,.16);
		border-color:rgba(77,189,184,.85);
	}
}
/* Content colour transitions — icon, title, description, arrow. */
.alsakan-service-card__more{
	display:inline-flex;
	align-items:center;
	gap:.4rem;
	margin-top:1rem;
	font-family:Cairo,sans-serif;
	font-size:.82rem;
	font-weight:700;
	color:var(--ui-teal-dark);
	opacity:0;
	transform:translateY(.4rem);
	transition:opacity 280ms ease-out,transform 280ms ease-out,color 280ms ease-out;
}
.alsakan-service-card__icon{
	transition:background-color 280ms ease-out,color 280ms ease-out,transform .3s var(--ui-ease);
}
.alsakan-service-card h3,
.alsakan-service-card p{transition:color 280ms ease-out}
.alsakan-service-card:hover h3,
.alsakan-service-card:focus-within h3,
.alsakan-service-card:focus-visible h3{color:#fff}
.alsakan-service-card:hover p,
.alsakan-service-card:focus-within p,
.alsakan-service-card:focus-visible p{color:rgba(255,255,255,.85)}
.alsakan-service-card:hover .alsakan-service-card__more,
.alsakan-service-card:focus-within .alsakan-service-card__more,
.alsakan-service-card:focus-visible .alsakan-service-card__more{color:#fff;opacity:1;transform:none}
.alsakan-service-card:hover .alsakan-service-card__icon,
.alsakan-service-card:focus-within .alsakan-service-card__icon,
.alsakan-service-card:focus-visible .alsakan-service-card__icon{
	background-color:rgba(255,255,255,.18);
	color:#fff!important;
	transform:scale(1.07) rotate(-3deg);
}

/* ===========================================================
   Team section — portraits only, no card boxes
   =========================================================== */
.alsakan-team-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
	gap:2.75rem 2.5rem;
	justify-items:center;
	max-width:68rem;
	margin-inline:auto;
}
.alsakan-team-card{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	max-width:15rem;
}
.alsakan-team-card__media{
	width:clamp(10.5rem,16vw,11.5rem);
	height:clamp(10.5rem,16vw,11.5rem);
	border-radius:50%;
	overflow:hidden;
	background:var(--ui-alt);
	border:3px solid var(--ui-teal-soft);
	margin-bottom:1.25rem;
	flex:none;
}
.alsakan-team-card__media img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.alsakan-team-card__avatar{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	background:linear-gradient(135deg,var(--ui-navy),var(--ui-navy-2));
	color:var(--ui-teal);
	font-family:Cairo,sans-serif;
	font-size:3.4rem;
	font-weight:800;
}
.alsakan-team-card__name{
	font-size:1.15rem;
	font-weight:800;
	color:var(--ui-ink);
	margin-bottom:.3rem;
}
.alsakan-team-card__role{
	font-size:.92rem;
	color:var(--ui-muted);
	margin-bottom:0;
}

/* ===========================================================
   Dual CTA (final action band)
   =========================================================== */
.alsakan-cta-dual__grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:1.5rem;
	max-width:58rem;
	margin-inline:auto;
}
.alsakan-cta-card{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	padding:clamp(1.35rem,2.6vw,2rem);
	background:#fff;
	border:1px solid var(--ui-border);
	border-radius:var(--ui-radius);
	box-shadow:0 12px 32px rgba(10,22,40,.08);
	transition:border-color .25s var(--ui-ease),transform .25s var(--ui-ease),box-shadow .25s var(--ui-ease);
}
.alsakan-cta-card:hover{
	border-color:rgba(77,189,184,.8);
	transform:translateY(-5px);
	box-shadow:0 18px 42px rgba(10,22,40,.13);
}
.alsakan-cta-card__icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:3.75rem;
	height:3.75rem;
	border-radius:1rem;
	background:var(--ui-teal);
	color:var(--ui-navy);
	margin-bottom:1.25rem;
	flex:none;
}
.alsakan-cta-card__icon svg{width:2rem;height:2rem;color:var(--ui-navy)}
.alsakan-cta-card__title{
	font-size:1.5rem;
	font-weight:800;
	color:var(--ui-ink);
	margin-bottom:.5rem;
}
.alsakan-cta-card__text{color:var(--ui-muted);font-size:.95rem;margin-bottom:1.25rem}
.alsakan-cta-card__btn{margin-top:auto}

/* ===========================================================
   Responsive
   =========================================================== */
@media(max-width:900px){
	/* Stack hero columns: content -> search -> stats -> services, no overlap. */
	body.home .alsakan-hero{
		height:auto;
		min-height:0!important;
	}
	body.home .alsakan-hero .alsakan-hero__inner{
		grid-template-columns:minmax(0,1fr);
		gap:2.5rem;
		padding-block:calc(var(--ui-header) + 2.5rem) 3.5rem;
	}
	.alsakan-hero__content{max-width:42rem}
	.alsakan-team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 2rem}
}
@media(max-width:520px){
	/* Override ui-recovery's forced tall hero on small screens. */
	body.home .alsakan-hero{min-height:0!important;height:auto}
	body.home .alsakan-hero .alsakan-hero__inner{padding-block:calc(var(--ui-header) + 1.75rem) 2.5rem;gap:2rem}
	body.home .alsakan-hero .alsakan-hero__title{font-size:clamp(2.2rem,11vw,2.9rem)!important}
	.alsakan-hero__lead{font-size:1rem}
	.alsakan-hero__cta{gap:.7rem;padding:.45rem;width:100%;border-radius:.85rem}
	.alsakan-hero__cta-btn{flex:1 1 100%}
	.alsakan-hero__trust{gap:.55rem}
	.alsakan-hero-search__tabs{gap:.3rem}
	.alsakan-hero-search__tab{flex:1;padding:.5rem .4rem .6rem;font-size:.88rem}
	.alsakan-hero-search__form{grid-template-columns:1fr;padding:.85rem .85rem 1rem;gap:.6rem}
	.alsakan-hero-search__field select,
	.alsakan-hero-search__field input{min-height:2.8rem}
	.alsakan-hero-search__submit{grid-column:1/-1;min-height:2.9rem}
	.alsakan-hero-stats__card{grid-template-columns:repeat(2,minmax(0,1fr))}
	.alsakan-hero-stats__item{padding:1.25rem .9rem;border-inline-end:0;border-bottom:1px solid #e6eeeb}
	.alsakan-hero-stats__item:nth-child(2n){border-inline-start:1px solid #e6eeeb}
	.alsakan-hero-stats__item:nth-last-child(-n+2){border-bottom:0}
	.alsakan-hero-stats__value{font-size:1.5rem}
	.alsakan-cta-dual__grid{grid-template-columns:1fr}
	.alsakan-team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.25rem}
	.alsakan-team-card__media{width:8.5rem;height:8.5rem}
	.alsakan-team-card__name{font-size:1rem}
	.alsakan-team-card__role{font-size:.84rem}
}
@media(prefers-reduced-motion:reduce){
	/* Kill scale/expand motion: switch colours/background instantly. */
	.alsakan-service-card,
	.alsakan-service-card::before,
	.alsakan-service-card__icon,
	.alsakan-service-card h3,
	.alsakan-service-card p,
	.alsakan-service-card__more,
	.alsakan-cta-card{transition:none}
	.alsakan-service-card:hover,
	.alsakan-service-card:focus-within,
	.alsakan-service-card:focus-visible{transform:none}
	.alsakan-service-card__more{opacity:1;transform:none}
}