/* ==========================================================================
   Terra theme styles
   v1.2.0
   --------------------------------------------------------------------------
   - Custom logo support (header + centered footer)
   - 6 Customizer image slots with empty-state handling
   - Form section restyled to dark-wood per mockup
   - Gravity Forms 2.5+ Orbital theme overrides
   ========================================================================== */

:root {
	/* Brand palette — official names from TerraBrandGuide.pdf */
	--citrus-orange:    #ff5c00;
	--desert-moss:      #533c1d;
	--meringue:         #d9ca96;
	--rusted:           #91371f;   /* brand guide had a typo of #d9ca96; using HTML mockup value */
	--chocolate-mousse: #9e5f3c;
	--dark-wood:        #2f1e00;
	--concrete:         #e0e0d1;

	/* Layout */
	--max:        1200px;
	--max-narrow: 720px;
	--gap:        clamp(1rem, 2vw, 2rem);
	--pad-y:      clamp(3.5rem, 7vw, 6rem);

	/* Typography — free stand-ins for Axis Bold / Orator Std / Source Sans Variable */
	--font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--font-mono:    'IBM Plex Mono', ui-monospace, Menlo, 'Courier New', monospace;
	--font-sans:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.6;
	color: var(--dark-wood);
	background: var(--concrete);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--rusted); }
a:hover { color: var(--citrus-orange); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; top: -100px; left: 0;
	background: var(--dark-wood); color: var(--meringue);
	padding: 0.75rem 1rem; z-index: 1000;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.terra-container {
	width: min(var(--max), 100% - 2rem);
	margin-inline: auto;
}
.terra-container--narrow { max-width: var(--max-narrow); }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.terra-eyebrow {
	font-family: var(--font-mono);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.78rem;
	color: var(--desert-moss);
	margin: 0 0 1rem;
}
.terra-eyebrow--rust  { color: var(--rusted); }
.terra-eyebrow--cream { color: var(--meringue); }

.terra-h2 {
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 3vw, 2.6rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--dark-wood);
	margin: 0 0 1.25rem;
	letter-spacing: -0.015em;
}

.terra-h3 {
	font-family: var(--font-mono);
	font-size: 0.95rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--rusted);
	margin: 0 0 0.6rem;
}

.terra-lede {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1.9vw, 1.4rem);
	font-weight: 500;
	color: var(--desert-moss);
	margin: 0 0 1.25rem;
	max-width: 38rem;
	line-height: 1.3;
}
.terra-body { max-width: 42rem; }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */

.terra-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(224, 224, 209, 0.92);
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid rgba(47, 30, 0, 0.08);
}
.terra-site-header__inner {
	width: min(var(--max), 100% - 2rem);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.9rem;
	gap: 1rem;
}

/* Logo (when uploaded via Customize → Site Identity → Logo) */
.terra-brand--has-logo .custom-logo-link {
	display: block;
	line-height: 0;
}
.terra-brand--has-logo .custom-logo {
	max-height: 44px;
	width: auto;
	display: block;
}

/* Text wordmark fallback (when no logo uploaded) */
.terra-brand--text {
	font-family: var(--font-mono);
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--dark-wood);
	text-decoration: none;
	font-size: 1.05rem;
	background: var(--meringue);
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--dark-wood);
	border-radius: 2px;
}

.terra-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
}
.terra-nav a {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dark-wood);
	text-decoration: none;
}
.terra-nav a:hover { color: var(--rusted); }
.terra-nav__cta {
	background: var(--dark-wood);
	color: var(--meringue) !important;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	transition: background 0.15s ease;
}
.terra-nav__cta:hover { background: var(--rusted); }

@media (max-width: 540px) {
	.terra-nav a:not(.terra-nav__cta) { display: none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.terra-hero {
	position: relative;
	background: var(--meringue);
	padding-block: clamp(5rem, 12vw, 9rem);
	border-bottom: 1px solid rgba(47, 30, 0, 0.08);
	overflow: hidden;
}
.terra-hero--has-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* Meringue scrim so the headline stays legible over any photo. */
.terra-hero--has-image .terra-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(217, 202, 150, 0.85);
	pointer-events: none;
}
.terra-hero__inner {
	position: relative;
	width: min(var(--max), 100% - 2rem);
	margin-inline: auto;
	z-index: 1;
}
.terra-hero__title {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 6vw, 4.6rem);
	font-weight: 700;
	line-height: 1.02;
	color: var(--dark-wood);
	margin: 0.4rem 0 1.25rem;
	letter-spacing: -0.025em;
	max-width: 14ch;
}
.terra-hero__sub {
	max-width: 38rem;
	color: var(--desert-moss);
	font-size: 1.1rem;
}

.terra-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--citrus-orange);
	color: var(--dark-wood) !important;
	padding: 0.95rem 1.7rem;
	text-decoration: none;
	font-weight: 600;
	margin-top: 1.75rem;
	border-radius: 999px;
	transition: transform 0.18s ease, background 0.18s ease;
	font-family: var(--font-sans);
}
.terra-cta::after { content: '→'; transition: transform 0.18s ease; }
.terra-cta:hover { transform: translateY(-1px); background: var(--rusted); color: var(--meringue) !important; }
.terra-cta:hover::after { transform: translateX(2px); }

/* --------------------------------------------------------------------------
   Section paddings
   -------------------------------------------------------------------------- */

.terra-about,
.terra-pillars,
.terra-location,
.terra-renderings,
.terra-contact {
	padding-block: var(--pad-y);
}

/* --------------------------------------------------------------------------
   Who we are — single col by default, two col when accent image is set
   -------------------------------------------------------------------------- */

.terra-about { background: var(--concrete); }
.terra-about__grid {
	display: block;
}
.terra-about--two-col .terra-about__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.terra-about__image {
	margin: 0;
}
.terra-about__image img {
	width: 100%;
	border-radius: 4px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--chocolate-mousse);
}
@media (max-width: 720px) {
	.terra-about--two-col .terra-about__grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Pillars
   -------------------------------------------------------------------------- */

.terra-pillars {
	background: var(--meringue);
	border-top: 1px solid rgba(47, 30, 0, 0.06);
	border-bottom: 1px solid rgba(47, 30, 0, 0.06);
}
.terra-pillars__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--gap);
	margin-top: 2rem;
}
.terra-pillar {
	background: rgba(255, 255, 255, 0.45);
	border: 1px solid rgba(47, 30, 0, 0.08);
	border-radius: 6px;
	padding: 1.5rem 1.4rem;
}
.terra-pillar p { color: var(--desert-moss); margin: 0; }

/* --------------------------------------------------------------------------
   Location
   -------------------------------------------------------------------------- */

.terra-location { background: var(--concrete); }
.terra-distances {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: flex;
	gap: clamp(1.5rem, 4vw, 3rem);
	flex-wrap: wrap;
	border-top: 1px solid rgba(47, 30, 0, 0.12);
	border-bottom: 1px solid rgba(47, 30, 0, 0.12);
	padding-block: 1.25rem;
}
.terra-distances li {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.terra-distances__num {
	font-family: var(--font-mono);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--rusted);
	letter-spacing: -0.01em;
}
.terra-distances__label {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--desert-moss);
}

.terra-location__img {
	margin: 2.5rem 0 0;
}
.terra-location__img img {
	width: 100%;
	border-radius: 4px;
	background: var(--chocolate-mousse);
	max-height: 720px;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Renderings (dark)
   -------------------------------------------------------------------------- */

.terra-renderings {
	background: var(--dark-wood);
	color: var(--meringue);
}
.terra-renderings .terra-h2 { color: var(--meringue); }
.terra-renderings__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--gap);
	margin-top: 2rem;
}
.terra-renderings__grid figure { margin: 0; }
.terra-renderings__grid img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
	background: var(--desert-moss);
}

/* --------------------------------------------------------------------------
   Contact / form — dark-wood section, two-column, dark form card
   -------------------------------------------------------------------------- */

.terra-contact {
	background: var(--dark-wood);
	color: var(--meringue);
}
.terra-contact .terra-h2 { color: var(--meringue); }
.terra-contact .terra-eyebrow { color: var(--meringue); }

.terra-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.terra-contact__intro { padding-top: 0.5rem; }
.terra-contact__sub {
	color: var(--meringue);
	opacity: 0.85;
	margin: 0 0 1.75rem;
	font-size: 1.05rem;
	max-width: 38rem;
}
.terra-contact__form {
	background: var(--desert-moss);
	border: 1px solid rgba(217, 202, 150, 0.15);
	border-radius: 6px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

@media (max-width: 820px) {
	.terra-contact__grid { grid-template-columns: 1fr; }
}

.terra-form-fallback {
	background: rgba(217, 202, 150, 0.08);
	border: 1px dashed rgba(217, 202, 150, 0.3);
	padding: 1.25rem;
	border-radius: 4px;
	color: var(--meringue);
}
.terra-form-fallback a { color: var(--citrus-orange); }

/* --------------------------------------------------------------------------
   GRAVITY FORMS — Orbital theme overrides
   --------------------------------------------------------------------------
   GF 2.5+ ships with the "Orbital" theme that uses CSS custom properties and
   different markup than legacy GF. We:
     1. Set GF's CSS custom properties to brand colors (clean way).
     2. Add direct overrides with !important for properties not exposed as
        custom props, or where Orbital's defaults are too aggressive.
     3. Style native <select> with a custom chevron so it doesn't render the
        ugly browser-default zigzag pattern.
   -------------------------------------------------------------------------- */

/* Set GF custom properties on the wrapper */
.terra-contact .gform_wrapper,
.terra-contact .gform_wrapper.gravity-theme {
	--gf-color-primary:           var(--citrus-orange);
	--gf-color-primary-rgb:       255, 92, 0;
	--gf-color-primary-darker:    var(--rusted);
	--gf-color-primary-contrast:  var(--dark-wood);

	--gf-ctrl-bg-color:           var(--meringue);
	--gf-ctrl-text-color:         var(--dark-wood);
	--gf-ctrl-border-color:       var(--meringue);
	--gf-ctrl-border-color-focus: var(--citrus-orange);
	--gf-ctrl-radius:             4px;

	--gf-label-color-primary:     var(--meringue);
	--gf-color-out-ctrl-light:    rgba(217, 202, 150, 0.2);
}

/* Form margin */
.terra-contact .gform_wrapper form { margin: 0; }

/* Field grid — two-column for first/last name, full-width for everything else */
.terra-contact .gform_wrapper .gform_fields {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem 1rem;
}
.terra-contact .gform_wrapper .gfield {
	grid-column: 1 / -1; /* default to full-width */
	margin: 0 !important;
}
.terra-contact .gform_wrapper .gfield.gf-half-left { grid-column: 1 / 2; }
.terra-contact .gform_wrapper .gfield.gf-half-right { grid-column: 2 / 3; }

@media (max-width: 540px) {
	.terra-contact .gform_wrapper .gform_fields { grid-template-columns: 1fr; }
	.terra-contact .gform_wrapper .gfield.gf-half-left,
	.terra-contact .gform_wrapper .gfield.gf-half-right { grid-column: 1 / -1; }
}

/* Labels — mono uppercase in meringue */
.terra-contact .gform_wrapper .gfield_label,
.terra-contact .gform_wrapper label.gfield_label {
	font-family: var(--font-mono) !important;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--meringue) !important;
	margin-bottom: 0.5rem !important;
	display: block !important;
}

/* Input wrappers — full width */
.terra-contact .gform_wrapper .ginput_container { width: 100%; }

/* Inputs (text, email, tel, number, url, password) */
.terra-contact .gform_wrapper input[type="text"],
.terra-contact .gform_wrapper input[type="email"],
.terra-contact .gform_wrapper input[type="tel"],
.terra-contact .gform_wrapper input[type="number"],
.terra-contact .gform_wrapper input[type="url"],
.terra-contact .gform_wrapper input[type="password"],
.terra-contact .gform_wrapper select,
.terra-contact .gform_wrapper textarea {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0.75rem 0.95rem !important;
	border: 1px solid var(--meringue) !important;
	background: var(--meringue) !important;
	font-family: var(--font-sans) !important;
	font-size: 1rem !important;
	color: var(--dark-wood) !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Textarea — taller default */
.terra-contact .gform_wrapper textarea {
	min-height: 120px;
	line-height: 1.5;
	resize: vertical;
}

/* Select — custom chevron so it doesn't render the browser-default pattern */
.terra-contact .gform_wrapper select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%232f1e00' stroke-width='1.6'><path d='M1 1l5 5 5-5'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	background-size: 12px 8px !important;
	padding-right: 2.5rem !important;
	cursor: pointer;
}
.terra-contact .gform_wrapper select::-ms-expand { display: none; }

/* Focus state */
.terra-contact .gform_wrapper input:focus,
.terra-contact .gform_wrapper select:focus,
.terra-contact .gform_wrapper textarea:focus {
	outline: none !important;
	border-color: var(--citrus-orange) !important;
	box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.25) !important;
}

/* Required asterisk */
.terra-contact .gform_wrapper .gfield_required {
	color: var(--citrus-orange) !important;
	margin-left: 4px;
}

/* Validation states */
.terra-contact .gform_wrapper .validation_message,
.terra-contact .gform_wrapper .gfield_validation_message,
.terra-contact .gform_wrapper .validation_error {
	color: var(--citrus-orange) !important;
	font-size: 0.85rem !important;
	margin-top: 0.4rem !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}
.terra-contact .gform_wrapper .gfield_error input,
.terra-contact .gform_wrapper .gfield_error select,
.terra-contact .gform_wrapper .gfield_error textarea {
	border-color: var(--citrus-orange) !important;
}
.terra-contact .gform_wrapper .gfield_error .gfield_label {
	color: var(--citrus-orange) !important;
}

/* Submit button — citrus-orange pill, dark-wood text */
.terra-contact .gform_wrapper .gform_footer {
	margin-top: 1.5rem !important;
	padding: 0 !important;
}
.terra-contact .gform_wrapper .gform_button,
.terra-contact .gform_wrapper input[type="submit"],
.terra-contact .gform_wrapper button[type="submit"] {
	background: var(--citrus-orange) !important;
	color: var(--dark-wood) !important;
	border: 0 !important;
	padding: 0.95rem 2rem !important;
	font-family: var(--font-sans) !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	cursor: pointer !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}
.terra-contact .gform_wrapper .gform_button:hover,
.terra-contact .gform_wrapper input[type="submit"]:hover,
.terra-contact .gform_wrapper button[type="submit"]:hover {
	background: var(--meringue) !important;
	color: var(--dark-wood) !important;
	transform: translateY(-1px);
}

/* Confirmation message */
.terra-contact .gform_confirmation_message,
.terra-contact .gform_confirmation_wrapper {
	background: rgba(217, 202, 150, 0.08) !important;
	border-left: 3px solid var(--citrus-orange) !important;
	padding: 1.25rem 1.4rem !important;
	border-radius: 0 4px 4px 0 !important;
	color: var(--meringue) !important;
	font-size: 1.05rem;
}

/* Honeypot — keep it hidden */
.terra-contact .gform_wrapper .gform_validation_container,
.terra-contact .gform_wrapper .gfield--type-honeypot { display: none !important; }

/* Spinner */
.terra-contact .gform_wrapper .gform_ajax_spinner { margin-left: 0.5rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.terra-site-footer {
	background: var(--dark-wood);
	color: var(--meringue);
	padding-block: 2.5rem;
}
.terra-site-footer__inner {
	width: min(var(--max), 100% - 2rem);
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.terra-site-footer__logo {
	display: inline-block;
	line-height: 0;
}
.terra-site-footer__logo .custom-logo-link { display: inline-block; line-height: 0; }
.terra-site-footer__logo .custom-logo {
	max-height: 60px;
	width: auto;
	display: block;
	margin-inline: auto;
}
.terra-site-footer__wordmark {
	font-family: var(--font-mono);
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--dark-wood);
	background: var(--meringue);
	padding: 0.55rem 1rem;
	border: 1px solid var(--dark-wood);
	border-radius: 2px;
	text-decoration: none;
	font-size: 0.95rem;
}
.terra-site-footer__tag {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--meringue);
	margin: 0;
}
.terra-site-footer__meta {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	color: rgba(217, 202, 150, 0.55);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; animation: none !important; }
}