/* =========================================================================
   Alrasly — Contact ("Book your free audit") page chrome
   Navy hero band, light readable body, square tiles, brand FAQ, channel tiles.
   The Fluent Forms restyle (the card, the field grid, fields/selects/button)
   lives in form.css and is shared with the service-page audit modal.
   Brand law (CLAUDE.md) supreme: palette only, radius 0, squares only, Manrope.
   ========================================================================= */

.ct{ position:relative; background:var(--offwhite); color:var(--ink); }
.ct::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;
}
.ct-hero,.ct-sec{ position:relative; z-index:1; }

/* ---------- shared bits (mirror the service system) ---------- */
.ct-kick{ display:flex; align-items:center; gap:var(--space-3); margin:0 0 var(--space-4); }
.ct-tick{ display:grid; grid-template-columns:9px 9px; grid-template-rows:9px 9px; gap:2px; flex:0 0 auto; }
.ct-tick i{ width:9px; height:9px; display:block; }
.ct-kick__t{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.22em; text-transform:uppercase; color:var(--blue); }
[dir="rtl"] .ct-kick__t{ letter-spacing:normal; text-transform:none; }
.ct-h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:var(--fw-bold); color:var(--navy); max-width:22ch; margin:0 0 var(--space-5); letter-spacing:-.4px; }
.ct-sec{ padding-block:var(--space-8); }
.ct-rule{ border:0; border-top:1px solid rgba(41,37,97,.12); max-width:var(--container-max); margin-inline:auto; }

/* ---------- HERO (navy band) ---------- */
.ct-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);
}
.ct-hero .ct-kick__t{ color:var(--sky); }
.ct-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; }
.ct-hero__lead{ font-size:var(--fs-body-lg); line-height:var(--lh-body); color:rgba(255,255,255,.85); max-width:52ch; margin:var(--space-4) 0 0; }

/* ---------- FORM + CHANNELS (two columns) ---------- */
.ct-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); }
.ct-colh{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:var(--fw-bold); color:var(--navy); margin:0 0 var(--space-4); }
.ct-formfallback{ font-size:var(--fs-body); color:var(--ink); }

/* channels column */
.ct-channels{ display:flex; flex-direction:column; gap:var(--space-3); }
.ct-wa{
	display:flex; align-items:center; gap:var(--space-4); text-decoration:none;
	background:var(--navy); color:var(--white); padding:var(--space-5);
	transition:background-color .15s ease, transform .12s ease;
}
.ct-wa__glyph{ width:40px; height:40px; flex:0 0 auto; background:var(--white);
	-webkit-mask:center / contain no-repeat; mask:center / contain no-repeat; }
.ct-wa__t{ display:flex; flex-direction:column; gap:2px; }
.ct-wa__lbl{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.14em; text-transform:uppercase; color:var(--sky); }
[dir="rtl"] .ct-wa__lbl{ letter-spacing:normal; text-transform:none; }
.ct-wa__val{ font-size:var(--fs-body-lg); font-weight:var(--fw-semibold); color:var(--white); }
.ct-wa:hover{ background:var(--navy-hover); transform:translateY(-1px); }
.ct-wa:active{ transform:translateY(0); }
.ct-wa:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

.ct-ch{
	display:flex; flex-direction:column; gap:2px; text-decoration:none;
	background:var(--white); border:1px solid rgba(41,37,97,.12); border-left:3px solid var(--blue);
	padding:var(--space-4) var(--space-5); transition:background-color .15s ease, border-color .15s ease;
}
.ct-ch__lbl{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
[dir="rtl"] .ct-ch__lbl{ letter-spacing:normal; text-transform:none; }
.ct-ch__val{ font-size:var(--fs-body-lg); font-weight:var(--fw-semibold); color:var(--navy); }
.ct-ch:hover{ background:var(--offwhite); border-left-color:var(--navy); }
.ct-ch:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* ---------- WHAT HAPPENS NEXT (3 numbered square tiles) ---------- */
.ct-steps{ display:grid; grid-template-columns:1fr; gap:var(--space-3); margin:0; padding:0; list-style:none; counter-reset:none; }
.ct-step{ display:grid; grid-template-columns:auto 1fr; gap:var(--space-4); align-items:start;
	background:var(--white); border:1px solid rgba(41,37,97,.12); border-top:3px solid var(--navy); padding:var(--space-5); }
.ct-step--navy{ border-top-color:var(--navy); }
.ct-step--blue{ border-top-color:var(--blue); }
.ct-step--sky{  border-top-color:var(--sky); }
.ct-step__num{ width:48px; height:48px; flex:0 0 auto; display:inline-grid; place-items:center;
	font-weight:var(--fw-bold); font-size:var(--fs-body-lg); color:var(--white); }
.ct-step--navy .ct-step__num{ background:var(--navy); }
.ct-step--blue .ct-step__num{ background:var(--blue); }
.ct-step--sky  .ct-step__num{ background:var(--sky); color:var(--navy); }   /* navy numeral on sky (CLAUDE.md §5) */
.ct-step__title{ font-size:var(--fs-body); font-weight:var(--fw-bold); color:var(--navy); margin:0 0 var(--space-1); }
.ct-step__desc{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink); margin:0; }

/* ---------- REASSURANCE FAQ (mirror service FAQ) ---------- */
.ct-faqlist{ margin-top:var(--space-5); }
.ct-faqitem{ border:1px solid rgba(41,37,97,.12); background:var(--white); margin-top:var(--space-2); }
.ct-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;
}
.ct-faqq::-webkit-details-marker{ display:none; }
.ct-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; }
.ct-faqitem[open] .ct-faqq::after{ content:"–"; }
.ct-faqq:hover{ background:var(--offwhite); color:var(--blue); }
.ct-faqq:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.ct-faqa{ padding:0 var(--space-4) var(--space-4); }
.ct-faqa p{ color:var(--ink); font-size:var(--fs-small); line-height:var(--lh-small); margin:0; max-width:72ch; }

/* ---------- Motion — the single site reveal pattern (12px / 250ms) ---------- */
.js .ct [data-reveal]{ transform:translateY(12px); transition:opacity .25s ease, transform .25s ease; }
.js .ct [data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
	.js .ct [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- responsive ---------- */
@media (min-width:600px){
	.ct-steps{ grid-template-columns:repeat(3,1fr); }
	.ct-step{ display:block; }
	.ct-step__num{ margin:0 0 var(--space-3); }
}
@media (min-width:1040px){
	.ct-grid{ grid-template-columns:1.5fr 1fr; gap:var(--space-7); align-items:start; }
}