/* ==========================================================================
   Campaign landing pages (layout-landing.tpl) — loaded only there.
   Palette from style.css: orange #f5821e, dark #1f1e20, gray #efefef
   ========================================================================== */

/* ---- hero ---- */
.landing-hero {
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 30%;
	padding: 9rem 0 8rem;
	margin-top: 100px;
	color: #fff;
}
.landing-hero:before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(31,30,32,0.88) 0%, rgba(31,30,32,0.72) 55%, rgba(31,30,32,0.35) 100%);
}
.landing-hero-inner { position: relative; max-width: 720px; }
.landing-hero h1 { color: #fff; font-size: 3rem; font-weight: 800; line-height: 1.15; text-transform: uppercase; margin-bottom: 1.25rem; }
.landing-hero-lead { font-size: 1.2rem; line-height: 1.55; font-weight: 500; color: #fff; margin-bottom: 2rem; }
.landing-cta { padding: 1rem 1.8rem; font-size: 1rem; }
.btn-primary:hover, .btn-primary:focus { background: #1f1e20; box-shadow: none; }

/* ---- sections ---- */
.landing-section { padding: 90px 0; }
.landing-section-head { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.landing-kicker { display: block; text-transform: uppercase; letter-spacing: 2px; font-size: 0.75rem; font-weight: 700; color: #f5821e; margin-bottom: 0.6rem; }
.landing-section h2 { font-size: 2rem; font-weight: 800; line-height: 1.2; color: #1f1e20; margin-bottom: 1rem; }
.landing-text { font-size: 1.1rem; line-height: 1.6; font-weight: 500; }
.landing-section-note { text-align: center; font-size: 1.05rem; font-weight: 600; margin: 2.5rem auto 0; max-width: 760px; }

/* 2 · services */
.landing-services { background: #fff; }
.landing-service { height: 100%; padding: 32px 26px; background: #f7f7f7; border-radius: 0 0 0 20px; border-top: 4px solid #f5821e; }
.landing-service-icon { font-size: 2rem; color: #f5821e; margin-bottom: 1rem; }
.landing-service h3 { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.6rem; }
.landing-service p { font-size: 0.95rem; margin: 0; }
.landing-service-grid [class*="col-"] { margin-bottom: 30px; }

/* 3 · what we take over */
.landing-takeover { background: #efefef; }
.landing-checklist { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.landing-checklist li { position: relative; padding-left: 34px; margin-bottom: 0.8rem; font-size: 1.05rem; font-weight: 500; line-height: 1.45; }
.landing-checklist i, .landing-checklist svg { position: absolute; left: 0; top: 3px; color: #f5821e; font-size: 1.2rem; }
.landing-benefit { background: #1f1e20; color: #fff; padding: 40px 36px; border-radius: 0 0 0 24px; }
.landing-benefit h3 { color: #f5821e; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; margin-bottom: 1rem; }
.landing-benefit p { font-size: 1.1rem; line-height: 1.55; font-weight: 500; margin-bottom: 1.5rem; }

/* 4 · steps */
.landing-steps { background: #fff; }
.landing-step { position: relative; padding: 0 10px; text-align: center; }
.landing-step-num {
	width: 64px; height: 64px; margin: 0 auto 1.2rem;
	display: flex; align-items: center; justify-content: center;
	background: #f5821e; color: #fff; font-size: 1.6rem; font-weight: 800; border-radius: 50%;
	position: relative; z-index: 1;
}
.landing-step h3 { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.5rem; }
.landing-step p { font-size: 0.95rem; margin: 0; }
@media (min-width: 992px) {
	.landing-step-grid .landing-step:before {
		content: ''; position: absolute; top: 32px; left: 50%; width: 100%; height: 2px; background: #e3e3e3;
	}
	.landing-step-grid [class*="col-"]:last-child .landing-step:before { display: none; }
}
.landing-step-grid [class*="col-"] { margin-bottom: 30px; }

/* 5 · audience */
.landing-audience { background: #1f1e20; color: #fff; }
.landing-audience h2, .landing-audience .landing-text { color: #fff; }

/* 6 · faq */
.landing-faq-section { background: #fff; }
.landing-faq-item { border-bottom: 1px solid #e3e3e3; }
.landing-faq-item h3 { margin: 0; font-size: 1rem; }
.landing-faq-q {
	width: 100%; text-align: left; background: none; border: 0; padding: 1.1rem 0;
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	font-family: inherit; font-size: 1.05rem; font-weight: 700; color: #1f1e20; cursor: pointer;
}
.landing-faq-q:focus { outline: none; color: #f5821e; }
.landing-faq-q i, .landing-faq-q svg { color: #f5821e; transition: transform .2s; flex: 0 0 auto; }
.landing-faq-q[aria-expanded="true"] i, .landing-faq-q[aria-expanded="true"] svg { transform: rotate(180deg); }
.landing-faq-a { padding: 0 0 1.2rem; }
.landing-faq-a p { font-size: 1rem; line-height: 1.6; margin: 0; }

/* 7 · form */
.landing-form-section { background: #efefef; }
.landing-form-box { background: #fff; padding: 48px 44px; border-radius: 0 0 0 24px; }
.landing-form-box .landing-section-head { margin-bottom: 2rem; }
.form28 label { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.form28 .form-control { border-radius: 3px; border: 1px solid #cfcfcf; padding: 0.7rem 0.9rem; height: auto; font-size: 0.95rem; }
.form28 .form-control:focus { border-color: #f5821e; box-shadow: 0 0 0 3px rgba(245,130,30,0.15); }
.form28 .form-control.is-invalid { border-color: #dc3545; }
.form28 .form-group { margin-bottom: 1.25rem; }
.form28 .form-text, .form28 .textLimit-counter { font-size: 0.8rem; color: #777; }
.form28-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form28-actions { margin-top: 0.5rem; }
.form28-submit {
	display: inline-block; background: #f5821e; color: #fff; border: 0; border-radius: 3px;
	padding: 0.95rem 1.8rem; font-size: 1rem; font-weight: 700; text-transform: uppercase; cursor: pointer;
	transition: background .3s;
}
.form28-submit:hover { background: #1f1e20; }
.form28-submit:disabled, .form28-submit.is-sending { opacity: .6; cursor: wait; }
.form28-alert { margin: 1rem 0 0; padding: 0.8rem 1rem; background: #fdecea; color: #b02a20; border-radius: 3px; font-weight: 600; }
.form28-fielderror { font-size: 0.8rem; color: #b02a20; margin-top: 0.3rem; }
.form28-thanks { padding: 1.5rem; background: #eef8ee; border-radius: 3px; }
.landing-consent { font-size: 0.8rem; color: #777; margin: 1.5rem 0 0; line-height: 1.5; }
.landing-form-missing { font-size: 1rem; }

/* ---- thank-you page ---- */
.landing-thanks { padding: 110px 0; margin-top: 100px; } /* under the fixed header, like the hero */
.landing-thanks-icon { font-size: 4rem; color: #f5821e; margin-bottom: 1.5rem; }
.landing-thanks h1 { font-size: 2.4rem; font-weight: 800; margin-bottom: 1rem; }
.landing-thanks-body p { font-size: 1.15rem; }
.landing-thanks-urgent { margin: 2.5rem 0; }
.landing-thanks-urgent p { text-transform: uppercase; letter-spacing: 2px; font-size: 0.75rem; font-weight: 700; color: #777; margin-bottom: 0.8rem; }
.landing-thanks-contact { display: inline-block; margin: 0 14px 10px; font-size: 1.15rem; font-weight: 700; color: #1f1e20; }
.landing-thanks-contact i, .landing-thanks-contact svg { color: #f5821e; margin-right: 4px; }
.landing-thanks-contact:hover { color: #f5821e; }
.landing-back { font-weight: 600; color: #f5821e; border-bottom: 1px solid #f5821e; }
.landing-back:hover { color: #1f1e20; border-color: #1f1e20; }

/* ---- responsive ---- */
@media (max-width: 991.99px) {
	.landing-hero { padding: 6rem 0 5rem; margin-top: 0; }
	.landing-hero h1 { font-size: 2.3rem; }
	.landing-section { padding: 70px 0; }
	.landing-benefit { margin-top: 2.5rem; }
	.landing-step { margin-bottom: 1rem; }
}
@media (max-width: 767.99px) {
	.landing-hero { padding: 4.5rem 0 4rem; }
	.landing-hero h1 { font-size: 1.8rem; }
	.landing-hero-lead { font-size: 1.05rem; }
	.landing-cta { display: block; text-align: center; }
	.landing-section { padding: 56px 0; }
	.landing-section h2 { font-size: 1.5rem; }
	.landing-form-box { padding: 32px 22px; }
	.landing-thanks { padding: 70px 0; margin-top: 0; }
	.landing-thanks h1 { font-size: 1.8rem; }
	/* responsive.css gives every #body-content column a 40px bottom margin on phones — the grids set their own */
	#body-content .landing-service-grid [class*="col-"],
	#body-content .landing-step-grid [class*="col-"] { margin-bottom: 20px; }
}