/*
 * Front-page-only sections (hero, brand marquee, services grid, mid CTA,
 * team, gallery, coverage, reviews, FAQ, closing CTA). Enqueued only when
 * is_front_page() — everything shared with the rest of the site (nav,
 * footer, sticky bar, buttons, tokens) lives in theme.css.
 */

/* ---------- hero ---------- */
.htl-hero {
	position: relative; min-height: min(78vh, 640px); display: flex; align-items: center;
	overflow: hidden; color: #fff;
	background: linear-gradient(100deg, var(--htl-accent-800) 0%, var(--htl-accent-400) 42%, var(--htl-accent) 68%, var(--htl-accent-600) 100%);
}
.htl-hero-inner {
	position: relative; max-width: 1200px; width: 100%; margin: 0 auto;
	padding: 64px clamp(20px, 5vw, 64px);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px clamp(24px, 5vw, 72px); align-items: center;
}
.htl-h1 { font-size: clamp(38px, 2vw, 46px); line-height: 1.12; letter-spacing: -0.015em; color: #fff; }
.htl-h1 span { display: block; }
.htl-hero-lead { font-size: 17px; line-height: 1.7; max-width: 52ch; margin-top: 20px; color: #fff; font-weight: 600; }
.htl-badges { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 36px; }
.htl-badge { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #fff; font-weight: 600; }
.htl-badge svg { flex: none; }

.htl-hero-figure {
	margin: 0; aspect-ratio: 1 / 1; position: relative; background: #fff;
	border-radius: 20px; overflow: hidden; box-shadow: var(--htl-shadow-lg);
}
.htl-slide {
	position: absolute; inset: 0; opacity: 0; transition: opacity .6s; pointer-events: none;
	display: flex; align-items: center; justify-content: center;
}
.htl-slide.is-active { opacity: 1; pointer-events: auto; }
.htl-slide img { width: 100%; height: 100%; object-fit: cover; }
.htl-slide-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.htl-slide-logo img { width: 44%; max-width: 220px; }
.htl-dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.htl-dot {
	width: 8px; height: 8px; border-radius: 4px; border: none; padding: 0; cursor: pointer;
	background: var(--htl-neutral-300); transition: width .3s, background .3s;
}
.htl-dot:hover { background: var(--htl-accent-400); }
.htl-dot.is-active { width: 20px; background: var(--htl-accent); }
.htl-dot.is-active:hover { background: var(--htl-accent-600); }

/* ---------- generic panels ---------- */
.htl-panel { border-radius: 20px; margin: 24px 0; padding: 36px clamp(20px, 4vw, 40px); }
.htl-panel-grey { background: var(--htl-surface); }
.htl-panel-white { background: #fff; box-shadow: var(--htl-shadow-sm); }
.htl-panel-tint { background: var(--htl-accent-100); }

.htl-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.htl-step { display: flex; gap: 14px; }
.htl-step-num { font-family: var(--htl-font-heading); font-weight: 800; font-size: 28px; color: var(--htl-accent); flex: none; }
.htl-step h4 { margin-bottom: 6px; font-size: 17px; }
.htl-step p { font-size: 14.5px; opacity: .78; margin: 0; }

/* ---------- brands ---------- */
.htl-brands-heading { padding: 36px 0 16px; }
.htl-marquee-wrap {
	overflow: hidden; border-radius: 20px; margin: 0 0 8px; background: #fff; width: 100%;
	padding: 20px clamp(20px, 5vw, 64px);
}
/* The track holds exactly two back-to-back copies of the logo list and
   animates translateX(-50%) to loop — for that to land seamlessly, the
   track's own box must contain *only* the repeating content (items + gap).
   Any padding here would count toward "50% of its own width" without
   actually repeating in the middle, so the loop would visibly jump/snap at
   the seam. Edge spacing lives on .htl-marquee-wrap (a static, non-animated
   parent) instead. */
.htl-marquee-track {
	display: flex; width: max-content; gap: clamp(48px, 8vw, 96px);
	animation: htl-marquee 18s linear infinite;
}
.htl-marquee-track img { height: 34px; width: auto; object-fit: contain; flex: none; opacity: .85; transition: opacity .2s; }
.htl-marquee-track img:hover { opacity: 1; }
.htl-marquee-wrap:hover .htl-marquee-track { animation-play-state: paused; }
@keyframes htl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .htl-marquee-track { animation: none; } }

/* ---------- services ---------- */
.htl-services { padding: 44px 0 30px; margin-top: 8px; }
.htl-services-title { margin: 0 0 24px; max-width: 42ch; font-size: 32px; }
.htl-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* Structural/visual only here — the 5 photo tiles and the plain-color CTA
   tile (6th grid item, no photo) lay out their own content differently, so
   layout rules live on .htl-service-content (photo tiles) and .htl-service-cta
   (CTA tile) instead of being shared on the base class. */
.htl-service-tile {
	position: relative; overflow: hidden; background: var(--htl-surface);
	border-radius: 16px; box-shadow: var(--htl-shadow-sm); aspect-ratio: 1;
	transition: transform .2s, box-shadow .2s;
}
.htl-service-tile:hover { transform: translateY(-4px); box-shadow: var(--htl-shadow-md); }

.htl-service-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.htl-service-tile:hover .htl-service-photo { transform: scale(1.08); }
.htl-service-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--htl-neutral-900) 0%, transparent) 32%, color-mix(in srgb, var(--htl-neutral-900) 60%, transparent) 72%, color-mix(in srgb, var(--htl-neutral-900) 85%, transparent) 100%);
}
.htl-service-content {
	position: relative; z-index: 1; height: 100%;
	display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
	text-align: center; padding: 20px; gap: 6px;
}
.htl-service-num { font-family: var(--htl-font-heading); font-weight: 800; font-size: 13px; color: #fff; opacity: .85; }

.htl-service-content h3,
.htl-service-cta h3 { font-size: 17px; line-height: 1.3; color: #fff; margin: 0; }
.htl-service-content p,
.htl-service-cta p { font-size: 13px; line-height: 1.5; margin: 0; color: #fff; opacity: .9; }

/* Pure white gives stronger contrast on the solid accent tile than the
   cream --htl-bg token would. */
.htl-service-cta {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; padding: 24px; gap: 10px; background: var(--htl-accent); color: #fff;
}
.htl-service-cta:hover { background: var(--htl-accent-600); color: #fff; }

/* ---------- mid CTA ---------- */
.htl-mid-cta {
	background: var(--htl-accent); border-radius: 20px; display: flex; align-items: center;
	justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 32px clamp(24px, 5vw, 48px);
	margin: 32px 0; color: #fff;
}
.htl-mid-cta .htl-cta-row { margin-top: 0; }
.htl-mid-cta-info { display: flex; align-items: center; gap: 16px; }
.htl-mid-cta-icon {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.18);
}
.htl-mid-cta-title { font-family: var(--htl-font-heading); font-weight: 800; font-size: 23px; color: #fff; margin: 0; }
.htl-mid-cta-sub { margin-top: 4px; font-size: 15px; font-weight: 600; color: #fff; }
.htl-mid-cta .htl-btn-primary { font-size: 15px; padding: 14px 26px; }

/* ---------- team ---------- */
.htl-team {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 36px 56px; align-items: center;
}
.htl-team h2 { margin: 0 0 14px; font-size: 32px; }
.htl-lead { font-size: 15.5px; line-height: 1.7; opacity: .78; max-width: 48ch; margin: 0; }
.htl-team-figure {
	margin: 0; aspect-ratio: 951/665; border-radius: 20px; overflow: hidden;
	filter: grayscale(1) contrast(1.08); transition: filter .3s;
}
.htl-team-figure:hover { filter: grayscale(0) contrast(1.02); }
.htl-team-figure img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- gallery ---------- */
.htl-gallery { padding: 16px 0 44px; }
.htl-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.htl-gallery-item { margin: 0; aspect-ratio: 1; border-radius: 16px; overflow: hidden; box-shadow: var(--htl-shadow-sm); }
.htl-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.htl-gallery-item:hover img { transform: scale(1.06); }

/* ---------- coverage ---------- */
.htl-coverage-title { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.4; letter-spacing: -0.01em; margin-bottom: 8px; max-width: 30ch; }
.htl-coverage-sub { font-size: 15px; opacity: .7; margin: 0; }

/* ---------- reviews ---------- */
.htl-reviews { padding: 8px 0 48px; }
.htl-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.htl-review-card {
	display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 16px;
	box-shadow: var(--htl-shadow-sm); padding: 20px; transition: transform .2s, box-shadow .2s;
}
.htl-review-card:hover { transform: translateY(-3px); box-shadow: var(--htl-shadow-md); }
.htl-stars { display: flex; gap: 3px; }
.htl-review-quote { font-size: 15px; line-height: 1.7; margin: 0; }
.htl-review-name { font-size: 13px; color: var(--htl-neutral-700); font-weight: 600; margin: 0; }

/* ---------- FAQ ---------- */
.htl-faq { padding: 40px 0 48px; }
.htl-faq-list { display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: var(--htl-shadow-sm); padding: 4px 20px; }
.htl-faq-item { padding: 18px 0; border-top: 1px solid var(--htl-divider); }
.htl-faq-item:first-child { border-top: none; }
.htl-faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px; }
.htl-faq-item summary::-webkit-details-marker { display: none; }
.htl-faq-icon {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 38px; height: 38px; border-radius: 50%; background: var(--htl-accent-100); color: var(--htl-accent-700);
	transition: background .2s, color .2s;
}
.htl-faq-q { font-family: var(--htl-font-heading); font-weight: 800; font-size: 16px; flex: 1; transition: color .2s; }
.htl-faq-toggle { flex: none; transition: transform .2s; }
.htl-faq-item summary:hover .htl-faq-icon { background: var(--htl-accent); color: #fff; }
.htl-faq-item summary:hover .htl-faq-q { color: var(--htl-accent-700); }
.htl-faq-item[open] .htl-faq-toggle { transform: rotate(45deg); }
.htl-faq-item[open] .htl-faq-icon { background: var(--htl-accent); color: #fff; }
.htl-faq-a { margin-top: 12px; font-size: 14.5px; line-height: 1.7; opacity: .78; max-width: 56ch; padding-inline-start: 52px; }

/* ---------- close CTA ---------- */
/* Pure white for the same contrast reason noted on .htl-btn-primary above. */
.htl-close { background: var(--htl-accent); color: #fff; }
.htl-close-inner { max-width: 1200px; margin: 0 auto; padding: 56px clamp(20px, 5vw, 64px); }
.htl-close h3 { font-size: clamp(30px, 4vw, 48px); line-height: 1.15; letter-spacing: -0.01em; }
.htl-close p { font-size: 16px; margin-top: 14px; color: #fff; font-weight: 600; }
.htl-close .htl-btn-white,
.htl-close .htl-btn-whatsapp { padding: 14px 26px; }

/* ---------- mobile swipe carousels (services / gallery / reviews) ----------
   Below 769px these long grids turn into horizontal scroll-snap carousels
   instead of stacking every card vertically — the single biggest fix for
   the page's mobile length, since 6 square service tiles or 4 gallery
   photos stacked in one column each ran well over 1000px tall on a phone.
   JS (landing.js → initSwipeCarousels) adds the dot indicators underneath;
   the swipe/scroll itself is plain CSS scroll-snap, so it still works with
   JS disabled. */
.htl-carousel-dots { display: none; justify-content: center; gap: 8px; margin-top: 4px; }
.htl-carousel-dot {
	width: 8px; height: 8px; border-radius: 4px; border: none; padding: 0; cursor: pointer;
	background: var(--htl-neutral-300); transition: width .3s, background .3s;
}
.htl-carousel-dot:hover { background: var(--htl-accent-400); }
.htl-carousel-dot.is-active { width: 20px; background: var(--htl-accent); }

@media (max-width: 768px) {
	.htl-services-title { font-size: 26px; }
	.htl-mid-cta { flex-direction: column; align-items: flex-start; }

	.htl-services-grid[data-swipe],
	.htl-gallery-grid[data-swipe],
	.htl-reviews-grid[data-swipe] {
		display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 14px;
		margin-inline: calc(-1 * clamp(20px, 5vw, 64px));
		padding: 4px clamp(20px, 5vw, 64px) 6px;
	}
	.htl-services-grid[data-swipe]::-webkit-scrollbar,
	.htl-gallery-grid[data-swipe]::-webkit-scrollbar,
	.htl-reviews-grid[data-swipe]::-webkit-scrollbar { display: none; height: 0; }

	.htl-services-grid[data-swipe] > .htl-service-tile,
	.htl-gallery-grid[data-swipe] > .htl-gallery-item {
		flex: 0 0 76%; scroll-snap-align: center;
	}
	.htl-reviews-grid[data-swipe] > .htl-review-card {
		flex: 0 0 84%; scroll-snap-align: center;
	}

	.htl-carousel-dots { display: flex; }
}