/*
 * Connect IT — Dienstpagina's: hero, features, aanpak, checklist en FAQ.
 */

/* --------------------------------- Hero --------------------------------- */
.cit-dh { position: relative; overflow: hidden; background: linear-gradient(140deg, #0A1626 0%, #10304A 55%, #0C2338 100%); padding: clamp(72px, 9vw, 132px) 24px; }
.cit-dh__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(83,214,238,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(83,214,238,.055) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse 80% 80% at 30% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 80% at 30% 40%, #000 30%, transparent 100%); }
.cit-dh__inner { position: relative; max-width: var(--cit-maxw, 1240px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .cit-dh__inner { grid-template-columns: 1fr; } }
.cit-dh__eyebrow { margin: 0 0 14px; font-family: var(--cit-font-mono, monospace); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--cit-cyan, #53D6EE); }
.cit-dh__titel { margin: 0 0 18px; font-family: var(--cit-font-head, 'Archivo', sans-serif); font-weight: 700; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
.cit-dh__intro { margin: 0 0 30px; font-size: 17.5px; line-height: 1.65; color: var(--cit-on-dark, #B7C4D4); max-width: 60ch; }
.cit-dh__knoppen { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Beeld in dezelfde schuine uitsnede als het videokader op de homepage. */
/* Vaste beeldverhouding: anders verschilt de uitsnede per schermbreedte. */
.cit-dh__media { position: relative; aspect-ratio: 4 / 3; min-height: 0; }
/* Het kader moet GEDRAAID binnen de sectie passen, anders snijdt de
   overflow:hidden van .cit-dh de afgeronde hoeken af tot rechte randen.
   Gedraaide omvang = B*cos20 + H*sin20 breed en B*sin20 + H*cos20 hoog; dat is
   1.33x de mediabreedte en 1.59x de mediahoogte. De hoogte wordt opgevangen
   door de ruime sectiepadding hierboven, de breedte door de buitenmarge van de
   sectie. Vanaf ~1440px is die marge groot genoeg; daaronder schuift het kader
   met de translateX vloeiend mee naar links. */
.cit-dh__frame {
	position: absolute; top: -8%; bottom: -8%; left: -4%; right: -6%;
	transform: translateX(clamp(-30px, calc(50vw - 720px), 0px)) rotate(-20deg);
	transform-origin: 50% 50%;
	border-radius: clamp(48px, 7vw, 96px); overflow: hidden;
	box-shadow: 0 44px 88px -30px rgba(0, 0, 0, .6);
}
/* Onder 1383px is er geen buitenmarge meer om in uit te lopen en zou het kader
   de tekstkolom raken. Dan een iets smaller kader (82% van het oppervlak, even
   hoog), links uitgelijnd in de mediakolom. */
@media (max-width: 1382px) {
	.cit-dh__frame { top: -9%; bottom: -9%; left: 1.5%; right: 9.5%; transform: rotate(-20deg); }
}
/* Het beeldvlak is bewust GROTER dan het kader. Een kader van B bij H dat 20
   graden gedraaid staat, beslaat in de assen van het beeld B*cos20 + H*sin20 bij
   B*sin20 + H*cos20. Bij de kaderverhoudingen die hier voorkomen (1.26 op brede
   schermen, 1.01 daaronder) is dat hooguit 1.28x de breedte en 1.37x de hoogte.
   Met 1.34 x 1.44 zit het kader daar altijd ruim binnen, en is er dus geen zoom
   nodig om de hoeken te vullen — en kan een uitsnede ook nooit een leeg randje
   veroorzaken. Schuiven gaat gewoon met object-position.
   Let op: bij een img met width/height:auto negeert de browser de bottom-inset
   en valt hij terug op de eigen beeldverhouding, dus de maten staan expliciet. */
/* Selector bewust zwaarder dan .cit-dh__img: Elementor zet `.elementor img
   { max-width: 100%; height: auto }` met specificiteit (0,1,1), en dat wint
   anders van de breedte en hoogte hieronder. */
.cit-dh__frame img.cit-dh__img {
	position: absolute; top: -22%; left: -17%;
	width: 134%; height: 144%;
	max-width: none; max-height: none;
	object-fit: cover;
	object-position: var(--dh-x, 50%) var(--dh-y, 50%);
	transform: rotate(20deg);
}
.cit-dh__frame-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(7,15,27,.45) 0%, rgba(7,15,27,.1) 45%, rgba(7,15,27,.2) 100%); }
@media (max-width: 900px) {
	.cit-dh__media { min-height: 260px; order: -1; }
	.cit-dh__frame { position: relative; inset: auto; height: 260px; transform: none; border-radius: 24px; }
	/* rechtop kader: geen extra ruimte nodig, dus het beeld weer precies passend */
	.cit-dh__frame img.cit-dh__img { top: 0; left: 0; width: 100%; height: 100%; transform: none; }
}

/* ------------------------------ Blok-koppen ----------------------------- */
.cit-blok { max-width: var(--cit-maxw, 1240px); margin: 0 auto; padding: clamp(48px, 6vw, 76px) 24px; }
.cit-blok__kop { max-width: 680px; margin: 0 0 clamp(28px, 4vw, 44px); }
.cit-blok__eyebrow { margin: 0 0 12px; font-family: var(--cit-font-mono, monospace); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--cit-teal, #0E7490); }
.cit-blok__titel { margin: 0 0 14px; font-family: var(--cit-font-head, 'Archivo', sans-serif); font-weight: 700; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -0.02em; color: var(--cit-ink, #0D1B2A); text-wrap: balance; }
.cit-blok__intro { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--cit-text, #33475C); }

/* ------------------------------- Features ------------------------------- */
.cit-feat__grid { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cit-feat__grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .cit-feat__grid, .cit-feat__grid[data-cols="2"] { grid-template-columns: 1fr; } }
.cit-feat__item { background: #fff; border: 1px solid #E2E9F0; border-radius: 16px; padding: 26px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.cit-feat__item:hover { border-color: var(--cit-teal, #0E7490); box-shadow: 0 20px 44px -26px rgba(13,27,42,.24); transform: translateY(-2px); }
.cit-feat__ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #E7F4F8; color: var(--cit-teal, #0E7490); margin-bottom: 16px; font-size: 21px; }
.cit-feat__ic svg { width: 21px; height: 21px; }
.cit-feat__titel { margin: 0 0 8px; font-family: var(--cit-font-head, 'Archivo', sans-serif); font-weight: 600; font-size: 18.5px; line-height: 1.25; color: var(--cit-ink, #0D1B2A); }
.cit-feat__tekst { margin: 0; font-size: 15px; line-height: 1.65; color: var(--cit-muted, #5B6B7E); }

/* -------------------------------- Stappen ------------------------------- */
.cit-stap { background: transparent; }
.cit-stap__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: stap; }
@media (max-width: 1000px) { .cit-stap__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cit-stap__lijst { grid-template-columns: 1fr; } }
.cit-stap__item { position: relative; padding: 24px 22px; border-radius: 16px; background: var(--cit-surface-2, #F0F5F8); border: 1px solid #E2E9F0; }
.cit-stap__nr { display: block; font-family: var(--cit-font-mono, monospace); font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--cit-teal, #0E7490); margin-bottom: 12px; }
.cit-stap__titel { margin: 0 0 7px; font-family: var(--cit-font-head, 'Archivo', sans-serif); font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--cit-ink, #0D1B2A); }
.cit-stap__tekst { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cit-muted, #5B6B7E); }

/* ------------------------------- Checklist ------------------------------ */
.cit-check__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .cit-check__lijst { grid-template-columns: 1fr; } }
.cit-check__lijst li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.55; color: var(--cit-text, #33475C); padding-bottom: 12px; border-bottom: 1px solid #EDF2F6; }
.cit-check__ic { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: #E7F4F8; color: var(--cit-teal, #0E7490); display: grid; place-items: center; margin-top: 1px; }
.cit-check__note { margin: 22px 0 0; font-size: 14px; color: var(--cit-muted-2, #8FA3B8); }

/* ---------------------------------- FAQ --------------------------------- */
.cit-faq__lijst { max-width: 860px; border-top: 1px solid #E2E9F0; }
.cit-faq__item { border-bottom: 1px solid #E2E9F0; }
.cit-faq__vraag {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
	background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
	padding: 20px 2px !important; cursor: pointer; text-align: left;
	font-family: var(--cit-font-head, 'Archivo', sans-serif) !important; font-size: 17px !important; font-weight: 600 !important;
	color: var(--cit-ink, #0D1B2A) !important; text-transform: none !important; line-height: 1.35 !important;
}
.cit-faq__vraag:hover { color: var(--cit-teal, #0E7490) !important; }
.cit-faq__teken { position: relative; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--cit-surface-2, #F0F5F8); }
.cit-faq__teken::before, .cit-faq__teken::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--cit-teal, #0E7490); transform: translate(-50%, -50%); transition: opacity .18s ease, transform .18s ease; }
.cit-faq__teken::before { width: 10px; height: 2px; }
.cit-faq__teken::after { width: 2px; height: 10px; }
.cit-faq__vraag[aria-expanded="true"] .cit-faq__teken::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.cit-faq__antwoord p { margin: 0; padding: 0 2px 22px; font-size: 15.5px; line-height: 1.7; color: var(--cit-text, #33475C); max-width: 70ch; }

@media (prefers-reduced-motion: reduce) {
	.cit-feat__item { transition: none; }
	.cit-faq__teken::before, .cit-faq__teken::after { transition: none; }
}