/* ==========================================================================
   Home page (loaded only on the front page).
   Measurements from the live page at 1351px wide, 2026-11-11.
   ========================================================================== */

.container--wide { max-width: 1320px; padding: 0 10px; }

/* 1. Hero ----------------------------------------------------------------- */
.hm-hero { padding: 90px 0 89px; color: var(--c-white); }
.hm-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.hm-hero__text h1 { margin: 0 0 35px; font-size: 35px; line-height: 42px; color: var(--c-white); }
.hm-hero__text p { margin: 0 0 41px; font-size: 18px; line-height: 32.4px; color: var(--c-white); }
.hm-hero__actions { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.hm-hero__media { position: relative; height: 492px; }
.hm-hero__img { position: absolute; object-fit: cover; border-top: 4px solid var(--c-yellow); }
.hm-hero__img--a { left: 0; top: 0; width: 392px; height: 396px; border-radius: 0 33%; }
.hm-hero__img--b { right: 0; top: 192px; width: 293px; height: 297px; border-radius: 33% 0; }
.hm-hero__points {
	list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
	margin-top: 57px; padding-top: 0;
}
.hm-hero__points li { display: flex; gap: 25px; align-items: flex-start; font-size: 16px; line-height: 24px; color: var(--c-white); }
.hm-hero__points .ic { width: 28px; height: 28px; flex: none; color: var(--c-yellow); }

/* 2. Why choose ----------------------------------------------------------- */
.hm-why { padding: 60px 0; }
.hm-why .container--wide { padding: 0 29px; } /* live cards: x=45, 398 wide, 42 apart */
.hm-why .sec-title { margin-bottom: 70px; line-height: 51.6px; }
.hm-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 42px; }
.why-card {
	padding: 20px 20px 25px 8px; background: var(--c-white);
	box-shadow: 3px 3px 2px -1px rgba(17, 24, 28, .85);
	display: flex; flex-direction: column; justify-content: center; min-height: 270px;
}
.why-card__icon {
	display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 15px;
	background: var(--c-yellow-17); border: 3px solid var(--c-yellow); color: var(--c-yellow);
}
.why-card__icon .ic { width: 40px; height: 40px; }
.why-card__title { margin: 0; font-size: 18px; line-height: 25.2px; font-weight: 500; }
.why-card p { margin: 5px 0 0; font-size: 14px; line-height: 28.8px; }

/* 3. CCIE successes ------------------------------------------------------- */
.hm-success { padding: 20px 0 12px; margin-bottom: 70px; }
.hm-success .sec-title { margin-bottom: 60px; }
.hm-success__cta { margin: 0 0 20px; }
.btn--caps { text-transform: uppercase; font-size: 14px; }
.success-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 40px; padding: 0 10px; }
.success-pill {
	position: relative; display: flex; align-items: center; justify-content: center;
	min-height: 69px; padding: 5px 50px; border: 2px solid var(--c-yellow-50); border-radius: 35px; text-align: center;
}
.success-pill .ic { position: absolute; left: 22px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--c-yellow); }
.success-pill strong { display: block; font-size: 22px; line-height: 26.4px; font-weight: 500; color: var(--c-ink); }
.success-pill span { font-size: 16px; line-height: 28.8px; color: var(--c-text); }

/* 5. Top courses ---------------------------------------------------------- */
.hm-courses { padding: 120px 0; background: rgba(255, 255, 255, .5); }
.hm-courses .sec-title { margin-bottom: 60px; }
.course-tiles { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.course-tile {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
	min-height: 220px; padding: 20px; border: 1px solid #E5E7E8; border-radius: 3px; background: var(--c-white);
	font-size: 20px; line-height: 28px; font-weight: 500; color: var(--c-ink); text-align: center;
	transition: box-shadow .25s, border-color .25s;
}
.course-tile .ic { width: 22px; height: 22px; color: var(--c-yellow); }
.course-tile:hover { color: var(--c-ink); background: var(--c-yellow-17); border-color: var(--c-yellow-17); box-shadow: 0 0 20px rgba(0, 0, 0, .2); }

/* 6. Google reviews ------------------------------------------------------- */
.hm-reviews { padding: 90px 0 40px; background: var(--c-white); }
.hm-reviews .sec-title { margin-bottom: 40px; }

/* 7. Testimonials --------------------------------------------------------- */
.hm-testimonials { padding: 20px 0 45px; background: var(--c-white); }
.hm-testimonials .sec-title { margin-bottom: 70px; }
.t-carousel {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 3); gap: 30px;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 0 4px 48px;
}
.t-carousel::-webkit-scrollbar { display: none; }
.t-card {
	scroll-snap-align: start; margin: 0; padding: 30px 30px 40px;
	border: 1px solid #E5E7E8; background: var(--c-white); min-height: 745px;
}
.t-card .ic { width: 34px; height: 34px; color: #D9DCDE; margin-bottom: 26px; }
.t-card blockquote { margin: 0 0 26px; font-size: 17px; line-height: 27.2px; color: var(--c-text); }
.t-card figcaption { font-size: 18px; line-height: 25.2px; font-weight: 500; color: var(--c-ink); }

/* 8. Delivery modes ------------------------------------------------------- */
.hm-modes { padding: 40px 0 30px; }
.hm-modes .sec-title { margin-bottom: 55px; line-height: 42px; }
.hm-modes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px 20px; padding: 0 13px; } /* live cards: 630 wide, 20 apart */
.mode-card {
	display: grid; grid-template-columns: 64px 1fr; gap: 33px; align-items: start;
	padding: 35px 48px 45px 50px; border-radius: 16px; background: var(--c-white);
}
.mode-card h3 { margin: 0 0 18px; font-size: 27px; line-height: 35.1px; }
.mode-card__list { list-style: none; display: grid; gap: 20px; }
.mode-card__list li { display: flex; gap: 14px; }
.mode-card__list .ic { width: 32px; height: 32px; flex: none; color: var(--c-yellow); }
.mode-card__list strong { display: block; font-size: 18px; line-height: 21.6px; font-weight: 500; color: var(--c-ink); }
.mode-card__list span { display: block; margin-top: 4px; font-size: 14px; line-height: 28.8px; color: var(--c-text); }
.mode-card--soon { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0; }
.mode-card--soon img { width: 260px; height: auto; }
.mode-card__soon { margin: 0; font-size: 27px; line-height: 35.1px; font-weight: 500; color: var(--c-ink); }

/* 9. CCIE training accordion --------------------------------------------- */
.hm-ccie { padding: 116px 0 160px; }
.hm-ccie__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.hm-ccie .sec-title { margin-bottom: 42px; }
.accordion { background: #BFD5F4; }
.accordion details { border-bottom: 1px solid rgba(255, 255, 255, .45); }
.accordion details:last-child { border-bottom: 0; }
.accordion summary {
	display: flex; align-items: center; gap: 22px; min-height: 51px; padding: 0 20px;
	list-style: none; cursor: pointer; font-size: 15px; font-weight: 600; color: #2C3338;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary span { flex: 1; }
.accordion summary .ic { width: 16px; height: 16px; flex: none; }
.accordion summary .ic:last-child { width: 12px; height: 12px; transition: transform .2s; }
.accordion details[open] summary .ic:last-child { transform: rotate(90deg); }
.accordion details p { margin: 0; padding: 0 20px 18px 58px; font-size: 16px; line-height: 27.2px; }
.hm-ccie__img { width: 100%; height: auto; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1020px) {
	.hm-hero__grid, .hm-ccie__grid { grid-template-columns: 1fr; }
	.hm-hero__media { height: 520px; max-width: 600px; }
	.hm-hero__points { grid-template-columns: 1fr 1fr; }
	.hm-why__grid, .success-list, .course-tiles { grid-template-columns: 1fr 1fr; }
	.hm-modes__grid { grid-template-columns: 1fr; }
	.t-carousel { grid-auto-columns: calc((100% - 30px) / 2); padding-left: 0; }
}
@media (max-width: 778px) {
	.hm-courses { padding: 70px 0; }
	.sec-title { font-size: 30px; line-height: 1.3; }
	.hm-hero { padding-top: 50px; }
	.hm-hero__text h1 { font-size: 30px; line-height: 38px; }
	.hm-hero__media { height: 380px; }
	.hm-hero__img--a { width: 70%; height: 300px; }
	.hm-hero__img--b { width: 55%; height: 220px; top: 150px; }
	.hm-hero__points, .hm-why__grid, .success-list, .course-tiles { grid-template-columns: 1fr; }
	.hm-why__grid { gap: 30px; }
	.t-carousel { grid-auto-columns: 100%; }
	.t-card { min-height: 0; }
	.mode-card { grid-template-columns: 1fr; padding: 30px 24px; gap: 15px; }
	.hm-modes__grid { padding: 0; }
	.hm-ccie { padding: 70px 0; }
}

/* Hover (as live) */
.why-card:hover { box-shadow: 2px 3px 2px 0 var(--c-yellow); }
.accordion summary:hover { background: #414141; color: var(--c-white); }
.accordion summary:hover .ic { color: var(--c-white); }