/*
 * INNER-EXPERIENCE-009: «تواصل معنا», on this page only. A navy first screen with the three ways to reach the company, joined
 * by a short line from a point (the home page's arrival, smaller); then the address and a few helpful lines. The call and
 * WhatsApp are the white cards; the request is the outlined one. Responses are short and never needed to use a link.
 */
.ct-page { --line: #7CC0FF; }
.ct-page h1, .ct-page h2 { letter-spacing: 0; text-wrap: balance; }

.ct-top { position: relative; overflow: hidden; overflow: clip; padding-block-end: 40px; background: var(--primary); color: #E0E5F7; view-timeline: --ct block; }
.ct-top .breadcrumb ol, .ct-top .breadcrumb li + li::before { color: #C6CBE7; }
.ct-top a { color: var(--white); }
.ct-top :focus-visible { outline-color: var(--white); }
.ct-head { max-width: 44rem; padding-block-start: 4px; }
.ct-eyebrow { margin: 0 0 6px; color: #A9D4FF; font-weight: 600; font-size: 15px; }
.ct-head h1 { margin: 0; color: var(--white); font-size: 30px; line-height: 1.3; }
.ct-head .lead { margin: 12px 0 0; color: #E0E5F7; font-size: 17px; line-height: 1.85; }
@media (max-width: 479px) {
	/* Small phones: the call and WhatsApp on the first screen. */
	.ct-head h1 { font-size: 26px; }
	.ct-head .lead { margin-block-start: 8px; font-size: 15px; line-height: 1.7; }
	.ct-options { gap: 10px; margin-block-start: 16px; }
	.ct-card { min-height: 0; padding: 12px 14px; gap: 0 12px; }
	.ct-card h2 { font-size: 17px; }
	.ct-help { font-size: 14px; line-height: 1.5; }
	.ct-action.is-number { font-size: 21px; }
}
@media (min-width: 768px) { .ct-head h1 { font-size: 40px; } }
@media (min-width: 1024px) { .ct-top { padding-block-end: 64px; } .ct-head h1 { font-size: 48px; } }

/* The ways, with the line: a node at the start, a trunk across, a stub into each card. */
.ct-options { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-block-start: 24px; padding-inline-start: 18px; }
.ct-line { position: absolute; inset: 0; pointer-events: none; }
.ct-trunk { position: absolute; inset-block: 12px 48px; inset-inline-start: 0; width: 2px; background: var(--line); transform-origin: top; }
.ct-node { position: absolute; inset-block-start: 6px; inset-inline-start: -5px; width: 12px; height: 12px; background: var(--line); transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(124, 192, 255, .22); }
.ct-card { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; align-items: center; min-height: 92px; padding: 16px 18px; background: var(--white); border: 2px solid var(--white); color: var(--primary); text-decoration: none; transition: box-shadow var(--t-fast) linear, border-color var(--t-fast) linear; }
.ct-top .ct-card { color: var(--primary); }
.ct-card::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: -20px; width: 18px; height: 2px; background: var(--line); }
.ct-card.is-request { background: transparent; border-color: rgba(255, 255, 255, .55); }
.ct-top .ct-card.is-request { color: var(--white); }
.ct-card:hover { box-shadow: 0 0 0 2px var(--line); }
.ct-top .ct-card:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.ct-icon { grid-row: 1 / span 3; width: 40px; height: 40px; color: var(--accent); overflow: visible; }
.ct-card.is-chat .ct-icon { color: #128C4A; }
.ct-card.is-request .ct-icon { color: #A9D4FF; }
.ct-card h2 { margin: 0; font-size: 19px; line-height: 1.4; color: inherit; }
.ct-help { font-size: 15px; line-height: 1.6; color: var(--muted); }
.ct-card.is-request .ct-help { color: #D6DCF2; }
.ct-action { font-weight: 600; font-size: 16px; color: var(--link); text-decoration: underline; text-underline-offset: 4px; }
.ct-action.is-number { font: 700 23px/1.3 var(--font-en); color: var(--primary); text-decoration: none; }
.ct-card.is-request .ct-action { color: var(--white); }
.ct-arrow { display: inline-block; font-style: normal; font-family: var(--font-en); transition: transform var(--t-fast) var(--ease-out); }
@media (min-width: 900px) {
	.ct-options { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: 20px; margin-block-start: 56px; padding-inline-start: 0; padding-block-start: 30px; }
	.ct-options:has(> a:nth-of-type(2):last-of-type) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ct-options:has(> a:only-of-type) { grid-template-columns: minmax(0, 28rem); }
	.ct-trunk { inset-block: 0 auto; inset-inline: 0 calc(100% / var(--count, 3) / 2); width: auto; height: 2px; transform-origin: right; }
	.ct-node { inset-block-start: -5px; inset-inline-start: -6px; }
	.ct-card { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; min-height: 200px; padding: 24px; }
	.ct-card::before { inset-block-start: -30px; inset-inline-start: 50%; width: 2px; height: 28px; }
	.ct-icon { grid-row: auto; margin-block-end: 6px; }
	.ct-action { margin-block-start: auto; padding-block-start: 8px; }
}
.ct-options:has(.ct-card:hover) .ct-line, .ct-options:has(.ct-card:focus-visible) .ct-line { opacity: .55; }
.ct-line { transition: opacity var(--t-fast) linear; }

/* Address and helpful lines. */
.ct-more { background: var(--white); }
.ct-more-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.ct-where { display: grid; gap: 16px; align-content: start; }
.ct-fact { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 20px; background: #F7F4EE; border-inline-start: 4px solid var(--accent); }
.ct-fact svg { width: 36px; height: 36px; color: var(--primary); }
.ct-fact h2 { margin: 0; font-size: 18px; color: var(--muted); font-weight: 600; }
.ct-fact p { margin: 4px 0 0; font-size: 19px; line-height: 1.7; color: var(--primary); font-weight: 600; }
.ct-guide h2 { margin: 0 0 12px; font-size: 24px; }
.ct-guide ul { margin: 0; padding: 0; list-style: none; border-block-start: 2px solid var(--primary); }
.ct-guide li { padding-block: 14px; border-block-end: 1px solid var(--border); line-height: 1.8; }
.ct-guide strong { color: var(--primary); }
.ct-guide-note { margin: 14px 0 0; color: var(--muted); }
@media (min-width: 1024px) { .ct-more-grid.has-both { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }

@media (prefers-reduced-motion: no-preference) {
	.ct-card.is-call:is(:hover, :focus-visible) .ic-move { animation: ct-ring .4s ease-out; transform-origin: center; }
	.ct-card.is-call:is(:hover, :focus-visible) .is-number { color: var(--accent); }
	.ct-card.is-chat:is(:hover, :focus-visible) .ct-icon { animation: ct-pop .35s ease-out; }
	.ct-card.is-request:is(:hover, :focus-visible) .ct-arrow { transform: translateX(-5px); }
	@keyframes ct-ring { 30% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } }
	@keyframes ct-pop { 50% { transform: scale(1.08); } }
	@supports (animation-timeline: view()) {
		.ct-trunk { animation: ct-draw linear both; animation-timeline: --ct; animation-range: entry 60% entry 100%; }
		@keyframes ct-draw { from { transform: scale(0); } }
	}
}
@media (prefers-reduced-motion: reduce) { .ct-card.is-call:is(:hover, :focus-visible) .is-number { color: var(--accent); } }