/* ==================================================================
   Signs2Fleet — homepage styles (scoped under .s2f)
   Design: industrial / fleet. Deep ink + signal orange, Space Grotesk
   display + Inter body. No frameworks, no external deps (fonts only).
================================================================== */

.s2f {
	/* Brand palette derived from the Signs2Fleet logo (blue/teal + navy).
	   Tweak --brand / --ink here to match an exact brand guide. */
	--ink: #0e2a36;      /* deep navy (logo outline) — dark sections + headings */
	--ink-2: #14323f;
	--ink-3: #1d4150;
	--brand: #147a9c;    /* primary teal-blue (logo) — buttons, links, icons */
	--brand-d: #0f5f79;  /* darker for hover */
	--accent: #35a7d6;   /* light droplet blue — small highlights */
	--paper: #ffffff;
	--alt: #f2f6f8;
	--muted: #51616c;
	--muted-d: #9fb0bc;
	--line: #e1e8ec;
	--line-d: #244a5a;
	--radius: 14px;
	--maxw: 1200px;

	color: var(--ink);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.s2f *,
.s2f *::before,
.s2f *::after { box-sizing: border-box; }

.s2f img { max-width: 100%; height: auto; display: block; }

/* ----------------------------- layout ---------------------------- */
.s2f-container {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 40px);
}
.s2f-container--narrow { max-width: 820px; }

.s2f-section { padding-block: clamp(56px, 8vw, 104px); }
.s2f-section--alt { background: var(--alt); }
.s2f-section--dark { background: var(--ink); color: #eef2f6; }

.s2f-center { text-align: center; }

.s2f-head { max-width: 760px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.s2f-head--light { color: #eef2f6; }

/* --------------------------- typography -------------------------- */
.s2f-h2 {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 .5em;
}
.s2f-lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--muted); margin: 0; }
.s2f-lead--light { color: var(--muted-d); }
.s2f-eyebrow {
	font-family: "Space Grotesk", sans-serif;
	text-transform: uppercase;
	letter-spacing: .18em;
	font-weight: 600;
	font-size: .78rem;
	color: var(--brand);
	margin: 0 0 1.1rem;
}
/* On the dark hero images the teal eyebrow blends in — use white for legibility. */
.s2f-hero .s2f-eyebrow { color: #fff; }

/* ----------------------------- buttons --------------------------- */
.s2f-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	font-size: .98rem;
	letter-spacing: .02em;
	text-decoration: none;
	padding: .95em 1.7em;
	border-radius: 10px;
	border: 2px solid transparent;
	transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
	cursor: pointer;
}
.s2f-btn--brand { background: var(--brand); color: #fff; }

/* On light sections: darken + lift + shadow (clearly visible). */
.s2f-btn--brand:hover,
.s2f-btn--brand:focus-visible {
	background: var(--brand-d);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(20, 122, 156, .40);
}
/* On dark sections/hero: darkening would blend into the bg, so BRIGHTEN instead. */
.s2f-hero .s2f-btn--brand:hover,
.s2f-hero .s2f-btn--brand:focus-visible,
.s2f-section--dark .s2f-btn--brand:hover,
.s2f-section--dark .s2f-btn--brand:focus-visible {
	background: var(--accent);
	color: #06222e;
	box-shadow: 0 10px 24px rgba(53, 167, 214, .45);
}

.s2f-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
/* Invert to a solid fill on hover — unmistakable against the dark hero. */
.s2f-btn--ghost:hover,
.s2f-btn--ghost:focus-visible {
	background: #fff;
	color: var(--ink);
	border-color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

.s2f-btn--lg { font-size: 1.1rem; padding: 1.1em 2.2em; }

/* Keyboard focus ring for all buttons. */
.s2f-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.s2f-btn:active { transform: translateY(0); }

.s2f-link {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	color: var(--brand-d);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	transition: color .15s ease;
}
.s2f-link span { transition: transform .15s ease; }
.s2f-link:hover,
.s2f-link:focus-visible {
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.s2f-link:hover span,
.s2f-link:focus-visible span { transform: translateX(4px); }

/* ------------------------------ grids ---------------------------- */
.s2f-grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.s2f-grid--4 { grid-template-columns: repeat(4, 1fr); }
.s2f-grid--3 { grid-template-columns: repeat(3, 1fr); }
.s2f-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ----------------- placeholder media (swap for photos) ----------- */
.s2f-ph {
	position: relative;
	background:
		linear-gradient(135deg, rgba(20, 122, 156, .14), rgba(14, 42, 54, .04)),
		repeating-linear-gradient(45deg, #e9edf1 0 14px, #eef2f6 14px 28px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.s2f-ph::after {
	content: attr(data-label);
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	font-size: .9rem;
	letter-spacing: .02em;
	color: var(--ink);
	background: rgba(255, 255, 255, .78);
	padding: .5em .9em;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(14, 17, 22, .08);
}

/* Real-photo media (product cards + project gallery). */
.s2f-card__media--photo,
.s2f-shot--photo {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.s2f-shot--photo { display: flex; align-items: flex-end; }

/* =============================== HERO ============================= */
.s2f-hero {
	background-color: var(--ink);
	/* Layers top→bottom: teal glow, strong navy overlay, then the photo.
	   The overlay keeps white text legible and preserves the brand tone. */
	background-image:
		radial-gradient(1200px 600px at 75% -10%, rgba(53, 167, 214, .22), transparent 55%),
		linear-gradient(180deg, rgba(14, 42, 54, .82), rgba(14, 42, 54, .94)),
		var(--hero-img, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	padding-block: clamp(72px, 12vw, 140px);
	position: relative;
	overflow: hidden;
}
.s2f-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 64px);
	pointer-events: none;
}
.s2f-hero__inner { position: relative; max-width: 880px; }
.s2f-hero__title {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: clamp(2.2rem, 6vw, 4rem);
	line-height: 1.03;
	letter-spacing: -0.02em;
	margin: 0 0 .5em;
}
.s2f-hero__sub { font-size: clamp(1.05rem, 1.9vw, 1.3rem); color: #cbd4de; max-width: 640px; margin: 0 0 1.6rem; }
.s2f-hero__chips { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: 0 0 2rem; }
.s2f-hero__chips li {
	font-family: "Space Grotesk", sans-serif;
	font-size: .85rem;
	font-weight: 500;
	padding: .45em .9em;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	color: #e7edf3;
}
.s2f-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.4rem; }
.s2f-hero__ticks {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem 1.8rem;
	padding: 1.6rem 0 0;
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.s2f-hero__ticks li {
	position: relative;
	padding-left: 1.6rem;
	font-weight: 500;
	font-size: .95rem;
	color: #dde4ea;
}
.s2f-hero__ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: .95rem;
	height: .55rem;
	border-left: 2px solid var(--brand);
	border-bottom: 2px solid var(--brand);
	transform: rotate(-45deg);
}

/* ============================= PRODUCTS ========================== */
.s2f-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.s2f-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14, 17, 22, .1); border-color: #d3dae1; }
.s2f-card__media { aspect-ratio: 4 / 3; }
.s2f-card__body { padding: 1.3rem 1.3rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.s2f-card__title { font-family: "Space Grotesk", sans-serif; font-size: 1.2rem; font-weight: 600; margin: 0; }
.s2f-card__text { color: var(--muted); font-size: .95rem; margin: 0 0 .6rem; flex: 1; }

/* Two top-level categories (Fleet Graphics / Vehicle Decals) */
.s2f-catgroup { margin-bottom: clamp(34px, 5vw, 60px); }
.s2f-catgroup:last-child { margin-bottom: 0; }
.s2f-catgroup__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: .5rem 1.5rem;
	flex-wrap: wrap;
	border-bottom: 2px solid var(--line);
	padding-bottom: .85rem;
	margin-bottom: clamp(16px, 2.5vw, 26px);
}
.s2f-catgroup__title {
	font-family: "Space Grotesk", sans-serif;
	font-size: clamp(1.3rem, 2.6vw, 1.75rem);
	font-weight: 700;
	margin: 0;
	color: var(--ink);
}
.s2f-catgroup__desc { color: var(--muted); margin: .25rem 0 0; font-size: .98rem; }
.s2f-catgroup__cta { font-size: 1rem; white-space: nowrap; }

/* Get Instant Pricing (embedded upload/pricing tool) */
html { scroll-behavior: smooth; }
#instant-pricing { scroll-margin-top: 110px; }
.s2f-pricing__tool {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(1.2rem, 3vw, 2rem);
	box-shadow: 0 18px 50px rgba(14, 42, 54, .06);
}
.s2f-pricing__tool > * { max-width: 100%; }

/* How to Order — responsive video */
.s2f-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	background: #000;
	box-shadow: 0 20px 55px rgba(14, 42, 54, .18);
}
.s2f-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* =============================== WHY ============================= */
.s2f-feature {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.6rem 1.4rem;
}
.s2f-feature__icon {
	display: inline-flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(20, 122, 156, .1);
	color: var(--brand-d);
	margin-bottom: 1rem;
}
.s2f-feature__icon svg { width: 26px; height: 26px; }
.s2f-feature__title { font-family: "Space Grotesk", sans-serif; font-size: 1.1rem; font-weight: 600; margin: 0 0 .4rem; }
.s2f-feature__text { color: var(--muted); font-size: .95rem; margin: 0; }

/* ========================== HOW IT WORKS ========================= */
.s2f-steps {
	list-style: none;
	padding: 0;
	margin: 0 0 clamp(28px, 4vw, 44px);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 3vw, 36px);
	counter-reset: step;
}
.s2f-step { position: relative; padding-top: .5rem; }
.s2f-step__num {
	display: inline-flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 1rem;
}
.s2f-step__title { font-family: "Space Grotesk", sans-serif; font-size: 1.15rem; font-weight: 600; margin: 0 0 .4rem; }
.s2f-step__text { color: var(--muted); margin: 0; }

/* ============================ MATERIALS ========================== */
.s2f-spec {
	background: var(--ink-2);
	border: 1px solid var(--line-d);
	border-radius: var(--radius);
	padding: 1.8rem 1.6rem;
}
.s2f-spec__title {
	font-family: "Space Grotesk", sans-serif;
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0 0 1rem;
	color: #fff;
}
.s2f-spec__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.s2f-spec__list li { position: relative; padding-left: 1.7rem; color: #cfd8e1; }
.s2f-spec__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: .95rem;
	height: .55rem;
	border-left: 2px solid var(--brand);
	border-bottom: 2px solid var(--brand);
	transform: rotate(-45deg);
}
.s2f-materials .s2f-center { margin-top: clamp(28px, 4vw, 44px); }

/* ============================ PROJECTS =========================== */
.s2f-shot {
	margin: 0;
	aspect-ratio: 3 / 2;
	border-radius: var(--radius);
	overflow: hidden;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 1rem;
}
.s2f-shot::after { content: none; }
.s2f-shot figcaption {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	font-size: .9rem;
	color: var(--ink);
	background: rgba(255, 255, 255, .85);
	padding: .45em .85em;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(14, 17, 22, .08);
}

/* ============================= REVIEWS =========================== */
.s2f-review {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.6rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .8rem;
}
.s2f-stars { color: var(--brand); letter-spacing: .1em; font-size: 1.05rem; }
.s2f-review__quote { font-size: 1.02rem; margin: 0; }
.s2f-review__who { display: flex; flex-direction: column; margin-top: auto; }
.s2f-review__name { font-family: "Space Grotesk", sans-serif; font-weight: 600; }
.s2f-review__co { color: var(--muted); font-size: .9rem; }

/* ============================== TRUST ============================ */
.s2f-trust__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2.5vw, 28px);
	text-align: center;
}
.s2f-trust__grid li {
	padding: 1.4rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
}
.s2f-trust__grid strong {
	display: block;
	font-family: "Space Grotesk", sans-serif;
	font-size: 1.15rem;
	margin-bottom: .25rem;
}
.s2f-trust__grid span { color: var(--muted); font-size: .9rem; }

/* =============================== FAQ ============================= */
.s2f-faq__item {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 0 1.3rem;
	margin-bottom: .8rem;
}
.s2f-faq__item summary {
	cursor: pointer;
	list-style: none;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	padding: 1.15rem 2rem 1.15rem 0;
	position: relative;
}
.s2f-faq__item summary::-webkit-details-marker { display: none; }
.s2f-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--brand-d);
	line-height: 1;
}
.s2f-faq__item[open] summary::after { content: "\2013"; }
.s2f-faq__a { padding: 0 0 1.2rem; color: var(--muted); }

/* ============================ FINAL CTA ========================== */
.s2f-finalcta .s2f-h2 { color: #fff; }
.s2f-finalcta .s2f-lead { margin-bottom: 1.8rem; }

/* ============================= FOOTER ============================ */
.s2f-foot { background: var(--ink); color: #c7d0d9; }
.s2f-foot__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: clamp(24px, 4vw, 48px);
	padding-block: clamp(44px, 6vw, 72px);
}
.s2f-foot__name {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	color: #fff;
	margin: 0 0 .5rem;
}
.s2f-foot__tag { color: var(--muted-d); font-size: .9rem; margin: 0; }
.s2f-foot__col h3 {
	font-family: "Space Grotesk", sans-serif;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--muted-d);
	margin: 0 0 1rem;
}
.s2f-foot__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.s2f-foot__col a { color: #d7dee5; text-decoration: none; font-size: .95rem; }
.s2f-foot__col a:hover { color: var(--brand); }
.s2f-foot__bottom {
	border-top: 1px solid var(--line-d);
	padding-block: 1.3rem;
	font-size: .85rem;
	color: var(--muted-d);
}

/* =========================== animations ========================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------- responsive ------------------------- */
@media (max-width: 960px) {
	.s2f-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.s2f-foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
	.s2f-grid--3,
	.s2f-grid--2,
	.s2f-steps { grid-template-columns: 1fr; }
	.s2f-hero__cta .s2f-btn { flex: 1 1 auto; }
	.s2f-trust__grid { grid-template-columns: 1fr 1fr; }
	.s2f-foot__grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
	.s2f-grid--4 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	.s2f-btn,
	.s2f-card { transition: none; }
}

/* ==================================================================
   FIXES
   1) Explicit heading colors — Astra sets a global h1..h6 color that
      overrides inherited white, so set colors on the classes directly.
   2) True full-width homepage — neutralize Astra's residual boxed
      width / sidebar on the front page only.
================================================================== */

/* --- heading & lead contrast (id-prefixed for high specificity so Astra's
       global heading color cannot win) --- */
#s2f-home .s2f-hero__title { color: #fff; }
#s2f-home .s2f-h2 { color: var(--ink); }
#s2f-home .s2f-section--dark .s2f-h2,
#s2f-home .s2f-head--light .s2f-h2,
#s2f-home .s2f-finalcta .s2f-h2 { color: #fff; }
#s2f-home .s2f-section--dark .s2f-lead { color: #cbd4de; }

#s2f-home .s2f-card__title,
#s2f-home .s2f-feature__title,
#s2f-home .s2f-step__title,
#s2f-home .s2f-review__name,
#s2f-home .s2f-faq__item summary { color: var(--ink); }
#s2f-home .s2f-spec__title,
#s2f-home .s2f-foot__name { color: #fff; }

/* --- full-width front page (scoped to .home; multiple Astra selectors) --- */
.s2f-page #secondary,
.s2f-page .widget-area,
.s2f-page .ast-separate-container .ast-sidebar-section { display: none !important; }

.s2f-page #primary,
.s2f-page .content-area {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.s2f-page .site-content .ast-container,
.s2f-page #content .ast-container {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	display: block !important;
}

/* ==================================================================
   CONTACT PAGE  (reuses the hero + card system)
================================================================== */
.s2f-hero--page { padding-block: clamp(54px, 9vw, 92px); }
.s2f-hero--page .s2f-hero__title { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: .4em; }
.s2f-hero--page .s2f-hero__sub { margin-bottom: 0; }

.s2f-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
}
.s2f-contact__info .s2f-h2,
.s2f-contact__form .s2f-h2 { text-align: left; }
.s2f-contact__info .s2f-lead { text-align: left; margin-bottom: 1.8rem; }

.s2f-contact__list { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: 1.1rem; }
.s2f-contact__list li { display: flex; gap: 1rem; align-items: flex-start; }
.s2f-contact__icon {
	flex: none;
	display: inline-flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(20, 122, 156, .1);
	color: var(--brand-d);
}
.s2f-contact__icon svg { width: 22px; height: 22px; }
.s2f-contact__list strong {
	display: block;
	font-family: "Space Grotesk", sans-serif;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	margin-bottom: .15rem;
}
.s2f-contact__list a,
.s2f-contact__list span { color: var(--ink); text-decoration: none; font-size: 1.05rem; }
.s2f-contact__list a:hover { color: var(--brand-d); text-decoration: underline; }

.s2f-contact__note {
	background: var(--alt);
	border: 1px solid var(--line);
	border-left: 4px solid var(--brand);
	border-radius: 12px;
	padding: 1.1rem 1.3rem;
}
.s2f-contact__note strong { display: block; font-family: "Space Grotesk", sans-serif; margin-bottom: .25rem; }
.s2f-contact__note span { color: var(--muted); font-size: .95rem; }

.s2f-contact__form {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(1.4rem, 3vw, 2.4rem);
	box-shadow: 0 18px 50px rgba(14, 42, 54, .06);
}
.s2f-contact__form .s2f-h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 1.2rem; }

/* --- WPForms, themed to match --- */
#s2f-home .wpforms-container { margin: 0; }
#s2f-home .wpforms-field { padding: 0 0 1rem; }
#s2f-home .wpforms-field-label {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	font-size: .9rem;
	color: var(--ink);
	margin-bottom: .4rem;
}
#s2f-home .wpforms-form input[type="text"],
#s2f-home .wpforms-form input[type="email"],
#s2f-home .wpforms-form input[type="tel"],
#s2f-home .wpforms-form input[type="url"],
#s2f-home .wpforms-form input[type="number"],
#s2f-home .wpforms-form select,
#s2f-home .wpforms-form textarea {
	width: 100%;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: .75em .9em;
	transition: border-color .15s ease, box-shadow .15s ease;
}
#s2f-home .wpforms-form input:focus,
#s2f-home .wpforms-form select:focus,
#s2f-home .wpforms-form textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(20, 122, 156, .15);
}
#s2f-home .wpforms-form textarea { min-height: 140px; resize: vertical; }
#s2f-home .wpforms-form button[type="submit"],
#s2f-home .wpforms-submit {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	font-size: .98rem;
	letter-spacing: .02em;
	color: #fff;
	background: var(--brand);
	border: 2px solid transparent;
	border-radius: 10px;
	padding: .9em 1.9em;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
#s2f-home .wpforms-form button[type="submit"]:hover,
#s2f-home .wpforms-submit:hover {
	background: var(--brand-d);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(20, 122, 156, .4);
}

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