/*
 * It GROWS on You — site chrome (header, footer, brand textures).
 * Uses the theme.json token CSS vars for colour/type; bespoke decorative
 * soil/grass tones are intentionally literal (client-specific decoration).
 */

:root { scroll-behavior: smooth; }
body { overflow-x: hidden; }

.skip-to-content {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--wp--preset--color--brand-600);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
	font-weight: var(--wp--custom--font-weight--semibold);
	text-decoration: none;
}
.skip-to-content:focus { left: var(--wp--preset--spacing--4); top: var(--wp--preset--spacing--4); }

:focus-visible { outline: 2px solid var(--wp--preset--color--brand-200); outline-offset: 2px; }

/* ============================ HEADER ============================ */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	padding: var(--wp--preset--spacing--4) 0;
	transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
.site-header__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--6);
	display: flex;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--8);
}
.site-header.is-sticky {
	background-color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--2) 0;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

.site-header__logo { display: flex; align-items: center; text-decoration: none; }
.site-header__logo-img { height: 80px; width: auto; display: block; }
.site-header__logo-img--dark { display: none; }
.site-header.is-sticky .site-header__logo-img--light { display: none; }
.site-header.is-sticky .site-header__logo-img--dark { display: block; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: var(--wp--preset--spacing--2); list-style: none; margin: 0; padding: 0; }
.site-nav a {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--medium);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--wider);
	text-decoration: none;
	transition: color 0.3s ease;
}
.site-nav a:hover { color: var(--wp--preset--color--white); }
.site-header.is-sticky .site-nav a { color: var(--wp--preset--color--gray-900); }
.site-header.is-sticky .site-nav a:hover { color: var(--wp--preset--color--brand-200); }

.site-header__right { display: flex; align-items: center; gap: var(--wp--preset--spacing--4); }
.site-header__call {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--medium);
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s ease, color 0.3s ease;
}
.site-header__call:hover { opacity: 0.8; color: var(--wp--preset--color--white); }
.site-header.is-sticky .site-header__call { color: var(--wp--preset--color--brand-600); font-weight: var(--wp--custom--font-weight--bold); }
.site-header.is-sticky .site-header__call:hover { color: var(--wp--preset--color--brand-200); opacity: 1; }

.site-header__cta {
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	background-color: var(--wp--preset--color--brand-200);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--semibold);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	text-decoration: none;
	border-radius: var(--wp--custom--radius--sm);
	transition: background-color 0.25s ease, transform 0.25s ease;
}
.site-header__cta:hover { background-color: color-mix(in srgb, var(--wp--preset--color--brand-200) 88%, #000); color: var(--wp--preset--color--white); transform: translateY(-2px); }
.site-header.is-sticky .site-header__cta { display: inline-flex; }

/* Mobile burger */
.site-header__toggle {
	display: none;
	background: none;
	border: none;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	width: 48px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.site-header.is-sticky .site-header__toggle { color: var(--wp--preset--color--brand-600); }
.site-header__burger { position: relative; width: 26px; height: 18px; display: inline-block; }
.site-header__burger span {
	position: absolute;
	left: 0; right: 0;
	height: 2.5px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}
.site-header__burger span:nth-child(1) { top: 0; }
.site-header__burger span:nth-child(2) { top: 50%; margin-top: -1.25px; }
.site-header__burger span:nth-child(3) { top: 100%; margin-top: -2.5px; }
.site-header__toggle[aria-expanded="true"] .site-header__burger span:nth-child(1) { top: 50%; margin-top: -1.25px; transform: rotate(45deg); }
.site-header__toggle[aria-expanded="true"] .site-header__burger span:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] .site-header__burger span:nth-child(3) { top: 50%; margin-top: -1.25px; transform: rotate(-45deg); }

@media (max-width: 768px) {
	/* Nav is hidden (drawer) on mobile, so push the logo and the icon
	   cluster to opposite ends of the bar. */
	.site-header__inner { justify-content: space-between; align-items: center; }
	.site-header__toggle { display: inline-flex; }
	.site-header__call-text { display: none; }
	.site-header__cta { display: none !important; }
	.site-header__logo-img { height: 54px; margin-bottom: 0; }

	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background-color: var(--wp--preset--color--brand-600);
		padding: var(--wp--preset--spacing--6) 0;
		text-align: center;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}
	.site-nav.is-open { display: block; }
	.site-nav ul { flex-direction: column; gap: var(--wp--preset--spacing--6); }
	.site-nav a,
	.site-header.is-sticky .site-nav a { color: var(--wp--preset--color--white); }
	.site-nav a:hover,
	.site-header.is-sticky .site-nav a:hover { color: var(--wp--preset--color--brand-200); }
}

/* ============================ CONTACT TEXTURE ============================ */
/* Grass-blade + noise texture layered on the contact block's forest bg. */
.contact-block::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg stroke-linecap='round' fill='none' stroke-width='1'%3E%3Cpath d='M8 15 L9 5' stroke='%232C5540'/%3E%3Cpath d='M22 22 L23 10' stroke='%23356048'/%3E%3Cpath d='M38 18 L39 7' stroke='%23162C1E'/%3E%3Cpath d='M52 25 L53 13' stroke='%232A5540'/%3E%3Cpath d='M68 19 L69 6' stroke='%23306048'/%3E%3Cpath d='M84 24 L85 12' stroke='%23254C38'/%3E%3Cpath d='M98 17 L99 5' stroke='%232E5A44'/%3E%3Cpath d='M114 21 L115 9' stroke='%232C5540'/%3E%3Cpath d='M10 45 L11 33' stroke='%23162C1E'/%3E%3Cpath d='M28 52 L29 40' stroke='%23356048'/%3E%3Cpath d='M45 48 L46 36' stroke='%23294D38'/%3E%3Cpath d='M62 55 L63 43' stroke='%232A5540'/%3E%3Cpath d='M78 49 L79 37' stroke='%23306048'/%3E%3Cpath d='M94 53 L95 41' stroke='%23162C1E'/%3E%3Cpath d='M110 47 L111 35' stroke='%232C5540'/%3E%3Cpath d='M15 75 L16 63' stroke='%23356048'/%3E%3Cpath d='M32 82 L33 70' stroke='%232C5540'/%3E%3Cpath d='M50 78 L51 66' stroke='%23254C38'/%3E%3Cpath d='M68 85 L69 73' stroke='%232E5A44'/%3E%3Cpath d='M85 79 L86 67' stroke='%23306048'/%3E%3Cpath d='M102 83 L103 71' stroke='%23162C1E'/%3E%3Cpath d='M118 77 L119 65' stroke='%232A5540'/%3E%3Cpath d='M8 105 L9 93' stroke='%23254C38'/%3E%3Cpath d='M25 112 L26 100' stroke='%23306048'/%3E%3Cpath d='M42 108 L43 96' stroke='%232C5540'/%3E%3Cpath d='M60 115 L61 103' stroke='%23162C1E'/%3E%3Cpath d='M78 109 L79 97' stroke='%23356048'/%3E%3Cpath d='M95 113 L96 101' stroke='%232A5540'/%3E%3Cpath d='M112 107 L113 95' stroke='%232E5A44'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 120px 120px;
	opacity: 0.8;
	pointer-events: none;
}
.contact-block > .contact-block__container { position: relative; z-index: 1; }

/* ============================ FOOTER (topsoil) ============================ */
.site-footer {
	position: relative;
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--16) 0 var(--wp--preset--spacing--8);
	overflow: hidden;
	background:
		url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 28' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,26 C 70,14 140,22 220,18 C 310,14 380,24 470,19 C 560,14 630,22 720,16 C 820,11 890,21 980,17 C 1070,13 1140,23 1200,18 L 1200,0 L 0,0 Z' fill='%231F4232'/%3E%3C/svg%3E") no-repeat top left / 100% 28px,
		radial-gradient(circle at 18% 15%, rgba(140, 110, 75, 0.22) 3px, transparent 5px),
		radial-gradient(circle at 82% 35%, rgba(80, 55, 28, 0.28) 2.5px, transparent 4px),
		radial-gradient(circle at 42% 72%, rgba(30, 20, 10, 0.3) 3.5px, transparent 5.5px),
		radial-gradient(circle at 90% 85%, rgba(110, 80, 50, 0.22) 2.5px, transparent 4px),
		radial-gradient(circle at 8% 55%, rgba(90, 65, 38, 0.25) 2px, transparent 3.5px),
		linear-gradient(180deg, #3A3518 0%, #4D3018 4%, #3A2413 20%, #2A1B0E 44%, #1F1408 64%, #110A04 86%, #050201 100%);
	background-size: 100% 28px, 240px 240px, 260px 260px, 220px 220px, 280px 280px, 250px 250px, auto;
}
.site-footer__inner,
.site-footer__bottom { position: relative; z-index: 1; }
.site-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--6) var(--wp--preset--spacing--16);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--16);
}
.site-footer__brand { max-width: 300px; }
.site-footer__logo { height: 64px; width: auto; display: block; margin-bottom: var(--wp--preset--spacing--4); }
.site-footer__brand p { color: rgba(255, 255, 255, 0.85); font-size: var(--wp--preset--font-size--sm); margin: 0; }
.site-footer__links { display: flex; gap: var(--wp--preset--spacing--24); }
.site-footer__col h4 {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: var(--wp--custom--font-weight--semibold);
	font-size: var(--wp--preset--font-size--sm);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--widest);
	margin: 0 0 var(--wp--preset--spacing--6);
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin-bottom: var(--wp--preset--spacing--4); color: rgba(255, 255, 255, 0.85); font-size: var(--wp--preset--font-size--sm); }
.site-footer__col a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.site-footer__col a:hover { color: var(--wp--preset--color--brand-200); }
.site-footer__bottom {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--6);
	text-align: center;
	font-size: var(--wp--preset--font-size--sm);
	color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 768px) {
	.site-footer__inner { flex-direction: column; text-align: center; gap: var(--wp--preset--spacing--12); }
	.site-footer__links { flex-direction: column; gap: var(--wp--preset--spacing--12); }
	.site-footer__brand { margin: 0 auto; }
	.site-footer__logo { margin-left: auto; margin-right: auto; }
}

/* ============================================================
   PROTOTYPE-EXACT OVERRIDES
   Pin the brand-specific widths/type that differ from the
   parent library's generic block defaults, so this site matches
   the itgrowsonyou static prototype pixel-for-pixel.
   ============================================================ */

/* Container widths + 32px gutters (prototype: 1200 default, 1400 wide) */
.hero-cover-block__container,
.testimonials-block__container,
.contact-block__container { max-width: 1200px; }
.service-gallery-block__container,
.portfolio-block__container { max-width: 1400px; }
.hero-cover-block__container,
.service-gallery-block__container,
.portfolio-block__container,
.testimonials-block__container,
.contact-block__container {
	padding-left: var(--wp--preset--spacing--8);
	padding-right: var(--wp--preset--spacing--8);
}

/* Hero — 80px top offset, white eyebrow, 800px left text column, 56px title */
.hero-cover-block { padding-top: 5rem; padding-bottom: 0; }
.hero-cover-block__eyebrow { color: var(--wp--preset--color--white); letter-spacing: 0.15em; }
.hero-cover-block__title {
	font-size: clamp(2rem, 6vw, 3.5rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	max-width: 800px;
}
.hero-cover-block__description { max-width: 800px; }
.hero-cover-block__actions { max-width: 800px; gap: var(--wp--preset--spacing--8); }
.hero-cover-block__btn { padding: 1.2em 3em; }

/* Section headings — editorial italic, 56px, matching eyebrow tracking */
.service-gallery-block__title,
.portfolio-block__title,
.testimonials-block__title,
.contact-block__title {
	font-size: clamp(1.75rem, 6vw, 3.5rem);
	line-height: 1.2;
	font-style: italic;
}
.service-gallery-block__eyebrow,
.portfolio-block__eyebrow,
.testimonials-block__eyebrow { letter-spacing: 0.15em; }
.service-gallery-block__header,
.portfolio-block__header,
.testimonials-block__header { max-width: 700px; }

/* Services grid — 64px gap at the 2-column (tablet) breakpoint */
@media (max-width: 1100px) {
	.service-gallery-block__grid { gap: var(--wp--preset--spacing--16); }
}

/* Services — 2-up compact grid on mobile (6 services; halves the height).
   Parent forces 1 column at <=600px, so override the grid plus the card
   internals (smaller image, tighter padding, smaller title) to suit narrow cards. */
@media (max-width: 600px) {
	.service-gallery-block__container {
		padding-left: var(--wp--preset--spacing--4);
		padding-right: var(--wp--preset--spacing--4);
	}
	.service-gallery-block__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--3);
	}
	.service-gallery-block__image { height: 130px; }
	.service-gallery-block__content { padding: var(--wp--preset--spacing--4); }
	.service-gallery-block__card-title {
		font-size: var(--wp--preset--font-size--lg);
		margin-bottom: var(--wp--preset--spacing--2);
	}
	.service-gallery-block__card-desc { font-size: var(--wp--preset--font-size--sm); }
	.service-gallery-block__launch { margin-top: var(--wp--preset--spacing--4); }
}

/* Testimonial quote — 17px / 1.5 */
.testimonials-block__quote { font-size: 1.0625rem; line-height: 1.5; }

/* Mobile hero — centred column (prototype behaviour) */
@media (max-width: 768px) {
	.hero-cover-block { padding-bottom: var(--wp--preset--spacing--6); }
	.hero-cover-block__container { text-align: center; }
	.hero-cover-block__title { max-width: none; }
	.hero-cover-block__description { font-size: 1rem; max-width: none; }
	.hero-cover-block__actions {
		flex-direction: column;
		align-items: center;
		max-width: none;
	}
	.hero-cover-block__social-proof { align-items: center; text-align: center; }
	.hero-cover-block__rating-line { justify-content: center; }
}

/* ---- Fluent Forms styling to match the prototype contact form ---- */
.contact-block .fluentform .ff-el-group { margin-bottom: var(--wp--preset--spacing--4); }
.contact-block .fluentform .ff-t-container { gap: var(--wp--preset--spacing--4); }

.contact-block .fluentform .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--semibold);
	color: var(--wp--preset--color--brand-600);
	margin-bottom: 6px;
}
.contact-block .fluentform .ff-el-is-required.asterisk-right label:after { color: var(--wp--preset--color--brand-200); }

.contact-block .fluentform input[type="text"],
.contact-block .fluentform input[type="email"],
.contact-block .fluentform input[type="tel"],
.contact-block .fluentform textarea,
.contact-block .fluentform .ff-el-form-control {
	width: 100%;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--wp--preset--color--gray-200);
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--gray-900);
	line-height: var(--wp--custom--line-height--normal);
}
.contact-block .fluentform input:focus,
.contact-block .fluentform textarea:focus,
.contact-block .fluentform .ff-el-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand-200);
	box-shadow: none;
}
.contact-block .fluentform textarea { min-height: 120px; }

.contact-block .fluentform .ff-el-group.ff_submit_btn_wrapper,
.contact-block .fluentform .ff-el-group:last-child { margin-bottom: 0; }

.contact-block .fluentform .ff-btn-submit {
	width: 100%;
	margin-top: var(--wp--preset--spacing--2);
	padding: 1.1em 2em;
	background-color: var(--wp--preset--color--brand-200);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--wider);
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}
.contact-block .fluentform .ff-btn-submit:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--brand-200) 88%, #000);
	transform: translateY(-2px);
}

/* ---- FAQ block — organic reskin (parent block is brutalist-styled) ---- */
.faq-block { border-bottom: none; }
.faq-block .section-title {
	font-style: italic;
	font-weight: var(--wp--custom--font-weight--medium);
	font-size: clamp(1.75rem, 6vw, 3.5rem);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	color: var(--wp--preset--color--brand-600);
}
.faq-block .section-description {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--gray-600);
}
.faq-item { border-top: 1px solid var(--wp--preset--color--gray-200); }
.faq-item:last-child { border-bottom: 1px solid var(--wp--preset--color--gray-200); }
.faq-item__question {
	font-weight: var(--wp--custom--font-weight--semibold);
	font-size: var(--wp--preset--font-size--xl);
	letter-spacing: normal;
	color: var(--wp--preset--color--brand-600);
}
.faq-item__icon { color: var(--wp--preset--color--brand-200); }
.faq-item__answer-inner { font-family: var(--wp--preset--font-family--outfit); }

/* Footer card → soft organic card (no hard border / offset shadow), hide brutalist avatars */
.faq-block__footer {
	border: none;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--card);
	background: var(--wp--preset--color--white);
}
.faq-block__footer .avatar-group { display: none; }
.faq-block__footer h2 {
	font-family: var(--wp--preset--font-family--unbounded);
	color: var(--wp--preset--color--brand-600);
}
.faq-block .btn--primary {
	background-color: var(--wp--preset--color--brand-200);
	color: var(--wp--preset--color--white) !important;
	border: none;
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: none;
	font-family: var(--wp--preset--font-family--outfit);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--wider);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--8);
	transition: background-color 0.25s ease, transform 0.25s ease;
}
.faq-block .btn--primary:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--brand-200) 88%, #000);
	color: var(--wp--preset--color--white) !important;
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--card-hover);
}