/* style-home-cro.css
 *
 * Conversion-rate overrides for the homepage only (front-page.php, page ID 11).
 * Loaded by inc/home-cro.php at wp_head(), which prints after style.php (inlined
 * at header.php:30) and style.css (linked at header.php:31). Equal-specificity
 * rules therefore win on source order, and no !important is needed anywhere.
 *
 * Every desktop rule is wrapped in a min-width query. The base rules in style.php
 * and style.css already carry SMALLER mobile values inside max-width queries whose
 * selectors are lower specificity, so an unmediated body.home rule here would beat
 * them and make mobile spacing worse. Each wrapper sits one pixel above the
 * matching existing mobile breakpoint.
 */

/* --------------------------------------------------------------------------
   1. Hero: lift the form's submit button above the fold.
   Beats style.php:128 (200/100) and style.php:130 (150/100, max-width 1600).
   Guarded at 768 so style.css:6813 (20/50 plus its border-top) survives.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	body.home section#hero {
		padding: 80px 0 72px;
	}
}

/* --------------------------------------------------------------------------
   2. Hero form: visual size only. These are the same selectors style.css
   uses at 11528-11580, re-scoped to body.home so the service-page hero
   (section#hero.ind-service-banner) keeps its current larger treatment.
   No Gravity Forms setting is touched: form 12 posts to HubSpot unchanged.
   -------------------------------------------------------------------------- */
body.home section#hero .hero-form {
	padding: 40px 32px;
}

body.home section#hero span.logic-form-span {
	font-size: 28px;
	margin-bottom: 10px;
}

body.home section#hero .hero-form #gform_fields_12 input {
	padding: 14px 16px;
}

/* Gravity Forms' own spacing. These selectors carry two IDs, so they beat
   GF's class-only rules regardless of which stylesheet prints last. */
body.home section#hero .hero-form #gform_fields_12 {
	grid-row-gap: 10px;
	row-gap: 10px;
}

body.home section#hero .hero-form #gform_fields_12 .gfield_label {
	margin-bottom: 4px;
	font-size: 15px;
	line-height: 1.3;
}

body.home section#hero .hero-form .gform_footer {
	padding: 8px 0 0;
	margin: 0;
}

body.home section#hero .hero-form input#gform_submit_button_12,
body.home section#hero .hero-form button#gform_submit_button_12 {
	padding: 15px 34px;
	font-size: 17px;
	width: 100%;
}

/* --------------------------------------------------------------------------
   3. Section rhythm. Every rule is wrapped above the breakpoint of the
   existing mobile override it would otherwise beat, so narrow screens keep
   their current, tighter spacing.
   -------------------------------------------------------------------------- */

/* style.php:345 testimonials, style.php:355 services, style.css:161 about
   and style.css:318 portfolio all have smaller values below 768. */
@media (min-width: 768px) {
	body.home section#testimonials {
		padding: 72px 0;
	}

	body.home section#about {
		padding: 24px 0 96px;
	}

	body.home section#portfolio {
		padding: 72px 20px 80px;
	}

	body.home section#services {
		padding: 72px 0;
	}
}

/* Mirrors the min-width:1024px guard style.php:230 and style.php:196 use. */
@media (min-width: 1024px) {
	body.home section.cta-testimonial {
		margin: 56px 0;
	}

	/* The 80px cleared the results cards that used to sit directly above.
	   After the reorder #services follows #about, whose bottom padding
	   already provides the gap. */
	body.home section#services {
		margin-top: 0;
	}
}

/* style.css:5621 gives #faq 80/50 below 1024. */
@media (min-width: 1025px) {
	body.home section#faq {
		padding: 80px 0 72px;
	}
}

/* style.php:301 trust and style.css:477 why-choose both shrink below 1200. */
@media (min-width: 1201px) {
	body.home section#trust {
		margin-top: 56px;
	}

	body.home section#why-choose {
		padding: 96px 0 88px;
	}
}

/* #thought has no responsive override at any breakpoint, so it needs both. */
body.home section#thought {
	padding: 88px 0 96px;
}

@media (max-width: 1024px) {
	body.home section#thought {
		padding: 56px 0 64px;
	}
}

/* --------------------------------------------------------------------------
   4. Supports the reorder in front-page.php, where the results band moves
   up to sit directly after the trust logos.
   -------------------------------------------------------------------------- */

/* Un-hide the proof heading. style.css:11383 hides it with
   .page-id-11 section#results-heading-container h2#results-heading (2,1,2).
   Adding body makes this (2,1,3), so it wins without touching style.css.
   Without the heading the band reads as an unlabelled row of coloured tiles
   directly under an unlabelled row of client logos.

   More space sits above the heading than below it, so it binds to the cards
   it labels rather than to the logo strip. */
body.home section#results-heading-container h2#results-heading {
	display: block;
	margin: 32px 0 0;
}

/* #results has no padding of its own; its rhythm came from whatever sat
   above it. Under the heading it needs its own top gap. */
body.home section#results {
	margin-top: 24px;
}

@media (max-width: 767px) {
	body.home section#results-heading-container h2#results-heading {
		margin-top: 24px;
	}

	body.home section#results {
		margin-top: 16px;
	}
}