/*
 * Presentational styling for the Contact Us / estimate form.
 * Targets Contact Form 7's own stable classes (wpcf7-*) plus the
 * snet-* wrapper classes added in cf7-form-template.txt. Nothing
 * here touches field names, so it's safe to edit freely.
 *
 * Colors reuse the same accent blue as the estimate emails
 * (class-summitnet-emails.php) so the form, the emails, and the
 * eventual Grok assistant all read as one product.
 */

:root {
	--snet-accent: #0b5fd9;
	--snet-accent-dark: #084dbd;
	--snet-ink: #16202e;
	--snet-ink-muted: #5c6a7c;
	--snet-line: #dde3ea;
	--snet-line-soft: #eef2f7;
	--snet-focus: rgba(11, 95, 217, 0.18);
	--snet-danger: #c0392b;
	--snet-good-bg: #e3f6ea;
	--snet-good-line: #b9e6c9;
	--snet-good-ink: #1e6b3f;
	--snet-bad-bg: #f8d7da;
	--snet-bad-line: #f5c2c7;
	--snet-bad-ink: #7a2530;
	--snet-warn-bg: #fff3cd;
	--snet-warn-line: #ffe08a;
	--snet-warn-ink: #7a5b00;
}

/* ---------- Card shell ---------- */

.snet-form {
	max-width: 760px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--snet-line);
	border-radius: 16px;
	padding: 40px clamp(20px, 4vw, 48px);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -12px rgba(16, 24, 40, 0.12);
}

.snet-form h3 {
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
	color: var(--snet-ink);
}

.snet-form .snet-intro {
	color: var(--snet-ink-muted);
	font-size: 15px;
	margin: 0 0 32px;
}

.snet-section {
	padding: 28px 0;
	border-top: 1px solid var(--snet-line-soft);
}

.snet-section:first-of-type {
	padding-top: 0;
	border-top: none;
}

.snet-form h4 {
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--snet-accent);
	margin: 0 0 18px;
}

.snet-optional {
	color: var(--snet-ink-muted);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	font-size: 12px;
}

.snet-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--snet-ink);
	margin: 0 0 10px;
}

.snet-form p {
	font-size: 14px;
	color: var(--snet-ink-muted);
	line-height: 1.5;
	margin: 0 0 20px;
}

.snet-section > p:last-child,
.snet-grid-2 p:last-child {
	margin-bottom: 0;
}

/* .snet-pricing-list carries its own 22px bottom margin for its original
   use inside a flex card (see flex-grow:1 below), which is correct there
   but not when the list is simply the last element in a text section --
   on the service landing pages that stacked on top of the normal
   section-to-section gap, making "What X covers" -> "Who this is for"
   visibly bigger than every other gap on the same page. */
.snet-section > .snet-pricing-list:last-child {
	margin-bottom: 0;
}

/* ---------- Two-column pairs on desktop ---------- */

.snet-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.snet-grid-2 p {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.snet-grid-2 {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ---------- Text / select / textarea / date inputs ---------- */

.snet-form input[type="text"],
.snet-form input[type="email"],
.snet-form input[type="tel"],
.snet-form input[type="date"],
.snet-form select,
.snet-form textarea {
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--snet-ink);
	padding: 12px 14px;
	border: 1.5px solid var(--snet-line);
	border-radius: 8px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.snet-form input:focus,
.snet-form select:focus,
.snet-form textarea:focus {
	outline: none;
	border-color: var(--snet-accent);
	box-shadow: 0 0 0 4px var(--snet-focus);
}

.snet-form textarea {
	resize: vertical;
	min-height: 120px;
}

.snet-form select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%235c6a7c' d='M4 6l4 4 4-4' stroke='%235c6a7c' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

/* ---------- Plain checkbox / radio lists (no class:snet-pills) ---------- */

.snet-form .wpcf7-list-item {
	margin: 0 14px 8px 0;
}

.snet-form input[type="checkbox"],
.snet-form input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: var(--snet-accent);
	margin-right: 6px;
	vertical-align: -2px;
}

/* ---------- Pill-style choice groups (class:snet-pills) ---------- */

.snet-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.snet-pills .wpcf7-list-item {
	margin: 0;
}

.snet-pills .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border: 1.5px solid var(--snet-line);
	border-radius: 100px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--snet-ink);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.snet-pills .wpcf7-list-item label:hover {
	border-color: var(--snet-accent);
}

.snet-pills .wpcf7-list-item label:has(:checked) {
	background: var(--snet-accent);
	border-color: var(--snet-accent);
	color: #fff;
}

.snet-pills input[type="checkbox"],
.snet-pills input[type="radio"] {
	width: 13px;
	height: 13px;
	accent-color: #fff;
	margin: 0;
}

/* ---------- Submit ---------- */

.snet-submit-row {
	margin-top: 8px;
	padding-top: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.snet-recaptcha-copy {
	font-size: 12px;
	color: var(--snet-ink-muted);
	margin: 8px 0 0;
	max-width: 36em;
	line-height: 1.4;
}
.snet-recaptcha-copy a {
	color: inherit;
	text-decoration: underline;
}
.grecaptcha-badge {
	visibility: visible;
}

.snet-form input[type="submit"] {
	appearance: none;
	background: var(--snet-accent);
	color: #fff;
	font-size: 15.5px;
	font-weight: 700;
	border: none;
	border-radius: 8px;
	padding: 14px 32px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

.snet-form input[type="submit"]:hover {
	background: var(--snet-accent-dark);
	transform: translateY(-1px);
}

.snet-form input[type="submit"]:active {
	transform: translateY(0);
}

.snet-submit-note {
	font-size: 12.5px;
	color: var(--snet-ink-muted);
}

/* ---------- Validation + response messages ---------- */

.snet-form .wpcf7-not-valid-tip {
	color: var(--snet-danger);
	font-size: 12.5px;
	font-weight: 500;
	margin-top: 4px;
}

.snet-form .wpcf7-not-valid {
	border-color: var(--snet-danger) !important;
}

.wpcf7 .wpcf7-response-output {
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 14px;
	border-width: 1.5px;
	margin: 20px 0 0;
}

.wpcf7 form.sent .wpcf7-response-output {
	background: var(--snet-good-bg);
	border-color: var(--snet-good-line);
	color: var(--snet-good-ink);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	background: var(--snet-bad-bg);
	border-color: var(--snet-bad-line);
	color: var(--snet-bad-ink);
}

.wpcf7 form.spam .wpcf7-response-output {
	background: var(--snet-warn-bg);
	border-color: var(--snet-warn-line);
	color: var(--snet-warn-ink);
}

/* ---------- Homepage sections ----------
 * Uses the sage/rust palette from the current logo, deliberately kept
 * separate from --snet-accent (blue) above, which the Contact Us form
 * and estimate emails still use. If you want the whole site on one
 * palette, that's a one-line swap of --snet-accent's value — ask and
 * I'll do the emails/form pass too. Until then this section intentionally
 * doesn't touch the form's variables.
 * See SETUP-GUIDE.md for the paired HTML for each block below. */

:root {
	--snet-home-accent: #6b9142;
	--snet-home-accent-fill: #8cb35b;
	--snet-home-rust: #bf5b37;
	--snet-home-rust-soft: #f7e6de;
	--snet-home-cream: #fbf3e7;
	--snet-home-ink: #3a2e22;
	--snet-home-ink-muted: #8a7a64;
}

/* Warm, tinted page background instead of stark white -- content sections
   read as flat and empty without it. Surfaces that used to blend into a
   plain white page (service cards, trust pills, the final CTA) get an
   explicit white background below so they still read as distinct cards
   floating on the cream, rather than disappearing into it.

   Scoped to body.home until 2026-08-31. Now site-wide, so moving between
   pages doesn't flash from cream to white -- the inner pages already paint
   their own card surfaces white, so they gained the card-on-cream look for
   free rather than needing per-page work. */
body {
	background: var(--snet-home-cream);
}

/* On the front page, .snet-hero is the real headline -- the theme's own
   centered post-title (plus its two spacer blocks) is redundant on top
   of it and was the main source of the page reading as plain/empty at
   first glance. Same pattern already used on Contact Us. */
body.home main > .wp-block-group:has(.wp-block-post-title) {
	display: none !important;
}

/* Same redundant-title bug, same fix, on the six service landing pages
   built for the Search campaign ad groups (2026-09-01/02) -- each opens
   with its own .snet-hero, so the theme's post-title above it just added
   a tall empty-looking band before any real content. IDs, not slugs,
   since two of these (managed-it, network-install) are also nav labels
   that could get renamed without the page itself changing. */
body.page-id-165 main > .wp-block-group:has(.wp-block-post-title),
body.page-id-166 main > .wp-block-group:has(.wp-block-post-title),
body.page-id-167 main > .wp-block-group:has(.wp-block-post-title),
body.page-id-168 main > .wp-block-group:has(.wp-block-post-title),
body.page-id-187 main > .wp-block-group:has(.wp-block-post-title),
body.page-id-188 main > .wp-block-group:has(.wp-block-post-title) {
	display: none !important;
}

.snet-hero {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(64px, 13vw, 150px) 20px clamp(56px, 11vw, 130px);
	text-align: left;
	/* No overflow:hidden here -- the full-bleed photo below relies on
	   ::before extending past this element's own 900px box out to the
	   viewport edges (the standard "100vw breakout" trick), which
	   overflow:hidden would clip right back down to 900px.
	   The 7.5px-per-side spill that trick causes on a window with a
	   classic scrollbar is clipped at the root instead -- see the
	   "Full-bleed breakout containment" block in snet-site-polish.css. */
}
/* Full-bleed Pikes Peak (Garden of the Gods sunrise, Lori Stevens /
   Unsplash, free-to-use license) behind the hero text -- the same
   "photo with a legibility gradient" treatment that gives the
   PowerForgeNet reference its depth, in this site's own warm ink tones
   instead of their navy. left:50%/translateX(-50%)/width:100vw is what
   lets a photo this wide sit behind a max-width:900px text column
   without any change to the surrounding markup. */
.snet-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	height: 100%;
	transform: translateX(-50%);
	background:
		linear-gradient(100deg, rgba(58, 46, 34, 0.90) 0%, rgba(58, 46, 34, 0.72) 30%, rgba(58, 46, 34, 0.38) 55%, rgba(58, 46, 34, 0.12) 80%),
		linear-gradient(to top, rgba(58, 46, 34, 0.55) 0%, rgba(58, 46, 34, 0) 30%),
		url('../images/snet-hero-pikes-peak.jpg');
	background-size: cover;
	background-position: center 62%;
	background-repeat: no-repeat;
	z-index: -1;
	pointer-events: none;
}
@media (max-width: 640px) {
	.snet-hero::before {
		/* Narrower text column eats more of the frame at this width, so
		   the overlay goes heavier and flatter (less left-to-right
		   reveal) to keep every line legible regardless of what's behind
		   it, rather than fading out to bare photo on the right. */
		background:
			linear-gradient(rgba(58, 46, 34, 0.82), rgba(58, 46, 34, 0.82)),
			url('../images/snet-hero-pikes-peak.jpg');
		background-size: cover;
		background-position: center 62%;
		background-repeat: no-repeat;
	}
}
/* Linked wordmark above the eyebrow badges -- the hero otherwise never
   names the company at all. Cardo (the headline's own serif), bold and
   with real presence, gives it a "logotype" feel distinct from the
   sans-serif eyebrow/body text below it -- but its clamp() stays
   proportionally under the headline's own clamp(30px,4.5vw,46px) at
   every viewport width on purpose: the headline is the actual value
   proposition doing the persuading and should stay the dominant
   element, the wordmark's job is identification, not competing for
   top billing. !important for the same reason as the headline/link
   colors below: overrides snet-site-polish.css's sitewide link-color
   rule, which would otherwise win on specificity. */
.snet-hero .snet-brand {
	margin: 0 0 10px;
}
.snet-hero .snet-brand a {
	display: inline-block;
	font-family: Cardo, Georgia, serif;
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff !important;
	text-decoration: none !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.snet-hero .snet-brand a:hover {
	text-decoration: underline !important;
	text-decoration-color: rgba(255, 255, 255, 0.5) !important;
}
.snet-hero .snet-eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}
.snet-hero .snet-eyebrow a {
	display: inline-flex;
	align-items: center;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--snet-home-rust) !important;
	background: #fff;
	border: 1px solid #f0e4d2;
	border-radius: 100px;
	padding: 6px 14px;
}
.snet-hero .snet-eyebrow a:hover {
	border-color: var(--snet-home-rust);
}
.snet-hero h1,
.snet-hero h2 {
	font-size: clamp(30px, 4.5vw, 46px);
	line-height: 1.12;
	margin: 0 0 16px;
	/* White, not the site's usual dark ink -- this headline sits on the
	   Pikes Peak photo (.snet-hero::before) now, not flat cream.
	   !important because snet-site-polish.css's sitewide
	   `h1,h2,...{color:#3A2E22 !important}` rule (deliberately
	   !important there, to enforce brand color despite the theme's own
	   stored Site Editor styles) would otherwise win regardless of
	   selector specificity -- this is the one narrow, intentional
	   exception to it. */
	color: #fff !important;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
/* Headline links straight to the estimate flow it's describing -- a much
   bigger click target than the button alone, and reinforces the one
   action the page wants rather than detouring to another page.
   !important for the same reason as above: snet-site-polish.css's
   `.wp-block-post-content a:not(...):not(...)` rule (rust color,
   underline) has higher specificity than a plain `.snet-hero h1 a`, so
   without !important it would win and put the old rust/underlined link
   color back on a headline that's supposed to be a plain white
   inherit-from-parent. */
.snet-hero h1 a,
.snet-hero h2 a {
	color: inherit !important;
	text-decoration: none !important;
}
.snet-hero h1 a:hover,
.snet-hero h2 a:hover {
	text-decoration: underline !important;
	text-decoration-color: rgba(255, 255, 255, 0.45) !important;
	text-underline-offset: 4px;
}
.snet-hero p {
	font-size: 17px;
	/* !important: overrides snet-site-polish.css's `body{color:#3A2E22
	   !important}`. */
	color: rgba(255, 255, 255, 0.88) !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
	max-width: 58ch;
	margin: 0 0 28px;
}
/* The inline "preliminary cost estimate in minutes" link inside the
   hero paragraph has its own explicit color from snet-site-polish.css's
   `.wp-block-post-content a:not(...):not(...)` rule (higher specificity
   than a plain `.snet-hero p a`, so it wins outright regardless of the
   parent paragraph's color) -- same !important override as the headline
   link above, keeping the underline as a link affordance but recolored
   to match. */
.snet-hero p a {
	color: inherit !important;
	text-decoration-color: rgba(255, 255, 255, 0.5) !important;
}
.snet-hero .snet-btns {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.snet-btn {
	display: inline-block;
	font-weight: 700;
	font-size: 15px;
	padding: 13px 26px;
	border-radius: 8px;
	text-decoration: none;
}
.snet-btn-primary {
	background: var(--snet-home-accent-fill);
	color: #fff;
}
.snet-btn-primary:hover {
	background: var(--snet-home-accent);
	color: #fff;
}
.snet-btn-secondary {
	color: var(--snet-home-ink);
	border: 1.5px solid var(--snet-line);
}
/* Ghost-button treatment for the hero's secondary CTA specifically --
   the plain dark-ink version above would be nearly invisible against the
   photo behind .snet-hero. Higher specificity than the bare rule above,
   so this wins regardless of source order. */
.snet-hero .snet-btn-secondary {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.08);
}
.snet-hero .snet-btn-secondary:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: #fff;
}

.snet-services {
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
@media (max-width: 900px) {
	.snet-services {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 720px) {
	.snet-services {
		grid-template-columns: 1fr 1fr;
	}
}
.snet-services .snet-card {
	border: 1px solid var(--snet-line);
	border-radius: 10px;
	padding: 18px;
	text-decoration: none;
	display: block;
	background: #fff;
	box-shadow: 0 1px 3px rgba(58, 46, 34, 0.06);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.snet-services .snet-card:hover {
	border-color: var(--snet-home-accent-fill);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(58, 46, 34, 0.1);
}
/* Lucide icons (ISC licence), inlined rather than loaded from a CDN so the
   homepage services grid has no external request or third-party dependency.
   stroke="currentColor" in the SVG markup itself is what lets `color` here
   drive it. */
.snet-services .snet-card .snet-card-icon {
	display: block;
	width: 26px;
	height: 26px;
	margin: 0 0 10px;
	color: var(--snet-home-accent);
	stroke-width: 1.75;
}
.snet-services .snet-card:hover .snet-card-icon {
	color: var(--snet-home-accent-fill);
}
.snet-services .snet-card h3 {
	font-size: 15px;
	color: var(--snet-home-ink);
	margin: 0 0 4px;
}
.snet-services .snet-card p {
	font-size: 13.5px;
	color: var(--snet-home-ink-muted);
	margin: 0;
}

/* Count-up stat band -- numbers verified true at time of writing (years,
   named certifications, in-house-only staffing) rather than the vague/
   unverifiable "client satisfaction %" style stat a lot of MSP sites use.
   Animation itself lives in snet-reveal.js; this is the static/no-JS and
   reduced-motion fallback state (see that file's header comment). */
.snet-stats {
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
}
.snet-stats .snet-stat-num {
	display: block;
	font-family: Cardo, Georgia, serif;
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 700;
	color: var(--snet-home-accent);
	line-height: 1;
}
.snet-stats p {
	margin: 6px 0 0;
	font-size: 13.5px;
	color: var(--snet-home-ink-muted);
}
@media (max-width: 900px) {
	.snet-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	.snet-stats {
		grid-template-columns: 1fr;
	}
}

.snet-why {
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 900px) {
	.snet-why {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 480px) {
	.snet-why {
		grid-template-columns: 1fr;
	}
}
.snet-why h3 {
	font-size: 16px;
	color: var(--snet-home-ink);
	margin: 0 0 4px;
}
.snet-why p {
	font-size: 14px;
	color: var(--snet-home-ink-muted);
	margin: 0;
}

/* The four (or, on /services/, ten) items inside .snet-why rendered as
   bare heading+paragraph text with no visual boundary. Give them the same
   card shell as .snet-services .snet-card so "why us" grids and service
   summaries read as cards instead of loose columns of text. */
.snet-why > div {
	border: 1px solid var(--snet-line);
	border-radius: 10px;
	padding: 20px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(58, 46, 34, 0.06);
}

/* .snet-service-card (the /services/ page's ten linked summaries) was
   never actually given card styling despite the name -- same shell as
   above, plus the flex column .snet-pricing-list already expected (see
   its flex-grow:1 comment) so the checklist can push cards to equal
   height, and a hover lift since these are links to the estimate flow. */
.snet-service-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--snet-line);
	border-radius: 10px;
	padding: 20px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(58, 46, 34, 0.06);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.snet-service-card:hover {
	border-color: var(--snet-home-accent-fill);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(58, 46, 34, 0.1);
}
.snet-service-card h3 {
	color: var(--snet-home-ink);
}
.snet-service-card p {
	color: var(--snet-home-ink-muted);
}

.snet-faq {
	max-width: 760px;
	margin: 0 auto;
	padding: 20px;
}
.snet-faq details {
	border-bottom: 1px solid var(--snet-line);
	padding: 14px 0;
}
.snet-faq summary {
	font-weight: 700;
	font-size: 15px;
	color: var(--snet-home-ink);
	cursor: pointer;
}
.snet-faq p {
	font-size: 14px;
	color: var(--snet-home-ink-muted);
	margin: 10px 0 0;
}

.snet-final-cta {
	max-width: 700px;
	margin: 0 auto;
	padding: 40px;
	text-align: center;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 4px 20px rgba(58, 46, 34, 0.08);
}
.snet-final-cta h2 {
	font-size: 24px;
	color: var(--snet-home-ink);
	margin: 0 0 8px;
}
.snet-final-cta p {
	color: var(--snet-home-ink-muted);
	margin: 0 0 20px;
}

/* ---------- Optional "how it works" band — see SETUP-GUIDE.md for the HTML ---------- */

.snet-how {
	max-width: 760px;
	margin: 0 auto 28px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: 1px solid var(--snet-line);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.snet-how-step {
	padding: 18px 16px;
	border-right: 1px solid var(--snet-line-soft);
	position: relative;
}

.snet-how-step:last-child {
	border-right: none;
}

.snet-how-step .snet-how-k {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--snet-accent);
}

.snet-how-step .snet-how-t {
	font-weight: 700;
	font-size: 14.5px;
	color: var(--snet-ink);
	margin: 4px 0 4px;
}

.snet-how-step .snet-how-d {
	font-size: 12.5px;
	color: var(--snet-ink-muted);
	line-height: 1.4;
}

@media (max-width: 640px) {
	.snet-how {
		grid-template-columns: 1fr;
	}
	.snet-how-step {
		border-right: none;
		border-bottom: 1px solid var(--snet-line-soft);
	}
	.snet-how-step:last-child {
		border-bottom: none;
	}
}

/* ---------- Pricing page — see templates/services-pricing.html ---------- */

.snet-pricing-grid {
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
}
@media (max-width: 900px) {
	.snet-pricing-grid {
		grid-template-columns: 1fr;
		max-width: 500px;
	}
}

.snet-pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1.5px solid var(--snet-line);
	border-radius: 14px;
	padding: 28px 24px 24px;
}

.snet-pricing-card.snet-pricing-featured {
	border-color: var(--snet-home-rust);
	box-shadow: 0 4px 20px -8px rgba(58, 46, 34, 0.25);
}

.snet-pricing-badge {
	position: absolute;
	top: -13px;
	left: 24px;
	background: var(--snet-home-rust);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 100px;
}

.snet-pricing-name {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--snet-home-rust);
	margin: 0 0 6px;
}

.snet-pricing-price {
	font-size: clamp(26px, 3vw, 32px);
	font-weight: 800;
	color: var(--snet-home-ink);
	line-height: 1.1;
	margin: 0 0 4px;
}
.snet-pricing-price span {
	font-size: 14px;
	font-weight: 600;
	color: var(--snet-home-ink-muted);
}

.snet-pricing-audience {
	font-size: 13.5px;
	color: var(--snet-home-ink-muted);
	margin: 0 0 20px;
}

.snet-pricing-list {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	flex-grow: 1;
}
.snet-pricing-list li {
	position: relative;
	font-size: 14px;
	color: var(--snet-home-ink);
	padding: 0 0 10px 24px;
	line-height: 1.4;
}
.snet-pricing-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--snet-home-accent);
	font-weight: 700;
}

.snet-pricing-card .snet-btn {
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

.snet-pricing-foot {
	font-size: 12px;
	color: var(--snet-home-ink-muted);
	margin: 12px 0 0;
	text-align: center;
}

.snet-pricing-addons {
	max-width: 900px;
	margin: 8px auto 0;
	padding: 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
@media (max-width: 720px) {
	.snet-pricing-addons {
		grid-template-columns: 1fr;
	}
}
.snet-pricing-addons > div {
	background: var(--snet-home-rust-soft);
	border-radius: 12px;
	padding: 20px 22px;
}
.snet-pricing-addons h3 {
	font-size: 15.5px;
	color: var(--snet-home-ink);
	margin: 0 0 6px;
}
.snet-pricing-addons p {
	font-size: 13.5px;
	color: var(--snet-home-ink-muted);
	margin: 0 0 12px;
}
.snet-pricing-addons a {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--snet-home-rust);
	text-decoration: none;
}
.snet-pricing-addons a:hover {
	text-decoration: underline;
}

/* ---------- Contact page first impression (hero + trust) ----------
 * Replaces the bulky 3-step "how it works" band above the form.
 * First viewport should read: outcome headline, proof, one question. */

body:has(.snet-contact-hero) .wp-block-post-title {
	display: none !important;
}

.snet-contact-hero {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(40px, 8vw, 90px) 20px clamp(32px, 6vw, 70px);
}

/* Same full-bleed Pikes Peak treatment as the homepage hero
   (.snet-hero::before) -- shorter here since this page's job is to get
   straight to the form, not linger, but the same photo/overlay/breakout
   technique so the two pages feel like one site. See .snet-hero::before
   for why the 100vw/translateX(-50%) approach and the !important
   overrides below are both necessary. */
.snet-contact-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	height: 100%;
	transform: translateX(-50%);
	background:
		linear-gradient(100deg, rgba(58, 46, 34, 0.90) 0%, rgba(58, 46, 34, 0.72) 35%, rgba(58, 46, 34, 0.42) 65%, rgba(58, 46, 34, 0.18) 90%),
		url('../images/snet-hero-pikes-peak.jpg');
	background-size: cover;
	background-position: center 62%;
	background-repeat: no-repeat;
	z-index: -1;
	pointer-events: none;
}
@media (max-width: 640px) {
	.snet-contact-hero::before {
		background:
			linear-gradient(rgba(58, 46, 34, 0.85), rgba(58, 46, 34, 0.85)),
			url('../images/snet-hero-pikes-peak.jpg');
		background-size: cover;
		background-position: center 62%;
		background-repeat: no-repeat;
	}
}

.snet-contact-hero .snet-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff !important;
	margin: 0 0 10px;
}

.snet-contact-hero h1 {
	font-size: clamp(26px, 4.2vw, 40px);
	line-height: 1.15;
	margin: 0 0 12px;
	color: #fff !important;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.snet-contact-hero p {
	font-size: 16.5px;
	color: rgba(255, 255, 255, 0.88) !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
	max-width: 46ch;
	margin: 0;
	line-height: 1.45;
}

.snet-contact-hero a {
	color: #fff !important;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.5) !important;
}

.snet-contact-hero a:hover {
	text-decoration-color: #fff !important;
}

/* ---------- About page title band (same Pikes Peak treatment) ----------
 * The About page has no custom hero block like .snet-hero/.snet-contact-hero
 * -- just the theme's own default post-title. Rather than build a custom
 * block for one page (more content-fixes migration risk for a purely
 * cosmetic change), this targets that existing title wrapper directly,
 * scoped by page ID so it can never apply anywhere else. Page ID is more
 * stable than a slug (survives a slug rename), and this mirrors the
 * `body.home main > .wp-block-group:has(.wp-block-post-title)` selector
 * already used above to hide this same block on the front page. */
body.page-id-65 main > .wp-block-group:has(.wp-block-post-title) {
	position: relative;
	padding-top: clamp(56px, 11vw, 120px) !important;
	padding-bottom: clamp(40px, 8vw, 90px) !important;
}
body.page-id-65 main > .wp-block-group:has(.wp-block-post-title)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	height: 100%;
	transform: translateX(-50%);
	background:
		linear-gradient(rgba(58, 46, 34, 0.6), rgba(58, 46, 34, 0.6)),
		url('../images/snet-hero-pikes-peak.jpg');
	background-size: cover;
	background-position: center 62%;
	background-repeat: no-repeat;
	z-index: -1;
	pointer-events: none;
}
body.page-id-65 main > .wp-block-group:has(.wp-block-post-title) .wp-block-post-title {
	color: #fff !important;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.snet-trust {
	max-width: 760px;
	margin: 12px auto 20px;
	padding: 0 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.snet-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--snet-home-ink);
	/* White rather than cream: these sit on the cream page background and
	   have to read as distinct badges rather than dissolving into it. */
	background: #fff;
	border: 1px solid #f0e4d2;
	border-radius: 100px;
	padding: 7px 12px 7px 10px;
	line-height: 1.2;
}

.snet-trust-item::before {
	content: "✓";
	color: var(--snet-home-accent);
	font-weight: 800;
}

.snet-founder-proof {
	max-width: 760px;
	margin: 0 auto 22px;
	padding: 0 20px;
	font-size: 13.5px;
	color: var(--snet-home-ink-muted);
	line-height: 1.45;
}

.snet-founder-proof a {
	color: var(--snet-home-ink);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(58, 46, 34, 0.25);
}

.snet-founder-proof a:hover {
	text-decoration-color: var(--snet-home-ink);
}

@media (max-width: 600px) {
	.snet-trust {
		gap: 6px;
	}
	.snet-trust-item {
		font-size: 12px;
		padding: 6px 10px 6px 8px;
	}
}

/* ---------- Multi-step form wizard ---------- */

.snet-form .snet-progress {
	margin: 0 0 20px;
}

.snet-progress-track {
	height: 6px;
	background: var(--snet-line-soft);
	border-radius: 100px;
	overflow: hidden;
}

.snet-progress-fill {
	display: block;
	height: 100%;
	width: 33%;
	background: var(--snet-accent);
	border-radius: 100px;
	transition: width 0.2s ease;
}

.snet-progress-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--snet-ink-muted);
	margin: 8px 0 0;
}

.snet-form-wizard.is-ready [data-snet-step]:not(.is-active) {
	display: none;
}

.snet-form-wizard.is-ready [data-snet-step].is-active {
	display: block;
}

.snet-form-wizard.is-ready .snet-wizard-nav:not([hidden]) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px solid var(--snet-line-soft);
}

.snet-wizard-nav p {
	display: contents;
}

.snet-wizard-nav br {
	display: none;
}

.snet-progress p {
	margin: 0;
}

.snet-progress-track p {
	height: 100%;
}

body.page-contact-us:has(.snet-contact-hero) .snet-how {
	display: none;
}

.snet-hero + .snet-trust {
	max-width: 900px;
	margin-top: 0;
	margin-bottom: 4px;
}

.snet-back,
.snet-next {
	appearance: none;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	border-radius: 8px;
	padding: 12px 22px;
	cursor: pointer;
}

.snet-back {
	background: transparent;
	border: 1.5px solid var(--snet-line);
	color: var(--snet-ink);
}

.snet-back:hover {
	border-color: var(--snet-ink-muted);
}

.snet-back[hidden] {
	visibility: hidden;
	pointer-events: none;
}

.snet-next {
	margin-left: auto;
	background: var(--snet-accent);
	border: none;
	color: #fff;
}

.snet-next:hover {
	background: var(--snet-accent-dark);
}

.snet-form-wizard.is-ready [data-snet-step="3"] .snet-submit-row {
	margin-top: 12px;
}

.snet-more {
	margin: 8px 0 0;
	border: 1px solid var(--snet-line-soft);
	border-radius: 10px;
	padding: 4px 14px 4px;
	background: #fbfcfe;
}

.snet-more summary {
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--snet-ink);
	padding: 10px 0;
	list-style: none;
}

.snet-more summary::-webkit-details-marker {
	display: none;
}

.snet-more summary::before {
	content: "+";
	display: inline-block;
	width: 1.1em;
	color: var(--snet-accent);
	font-weight: 800;
}

.snet-more[open] summary::before {
	content: "–";
}

.snet-more[open] {
	padding-bottom: 16px;
}

.snet-step-tip {
	display: block;
	color: var(--snet-danger);
	font-size: 12.5px;
	font-weight: 500;
	margin-top: 6px;
}

.snet-form-wizard textarea {
	min-height: 88px;
}

/* ---------- Sticky homepage CTA bar (class-summitnet-sticky-cta.php) ---------- */

.snet-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: #fff;
	border-top: 1px solid var(--snet-line);
	box-shadow: 0 -4px 16px rgba(58, 46, 34, 0.1);
	padding: 12px 20px;
	transform: translateY(100%);
	transition: transform 0.25s ease;
}

.snet-sticky-cta.is-visible {
	transform: translateY(0);
}

.snet-sticky-cta-inner {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.snet-sticky-cta-text {
	font-size: 14px;
	font-weight: 600;
	color: var(--snet-home-ink);
}

.snet-sticky-cta-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.snet-sticky-cta-call {
	font-size: 14px;
	font-weight: 700;
	color: var(--snet-home-ink);
	text-decoration: none;
	white-space: nowrap;
}

.snet-sticky-cta-call:hover {
	color: var(--snet-home-rust);
}

.snet-sticky-cta .snet-btn-primary {
	padding: 10px 20px;
	font-size: 14px;
	white-space: nowrap;
}

/* Mobile is CALL-FIRST.
   74% of this site's traffic is mobile, and a business whose network is down
   wants a person, not a form -- they search for a provider, not a symptom.
   Summit Networks answers every call with an AI receptionist that qualifies,
   quotes real published rates and books a Teams meeting, so a phone call is
   the strongest conversion this site has.
   This block previously hid the phone number outright on mobile, leaving only
   the estimate button. Now the call is the full-width primary tap target and
   the estimate sits underneath as the quieter, non-urgent path. */
@media (max-width: 640px) {
	.snet-sticky-cta {
		padding: 10px 16px;
		padding-bottom: max(10px, env(safe-area-inset-bottom));
	}
	.snet-sticky-cta-text {
		display: none;
	}
	.snet-sticky-cta-inner {
		display: block;
	}
	.snet-sticky-cta-actions {
		display: flex;
		flex-direction: column-reverse; /* call renders above the estimate */
		align-items: stretch;
		gap: 8px;
	}
	.snet-sticky-cta-call {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		padding: 14px 20px;
		border-radius: 9px;
		background: #1c5d8c;
		color: #fff;
		font-size: 17px;
		font-weight: 700;
		text-decoration: none;
		box-sizing: border-box;
	}
	.snet-sticky-cta-call:hover,
	.snet-sticky-cta-call:focus-visible {
		color: #fff;
		filter: brightness(1.08);
	}
	/* Demoted to a quiet secondary now that calling leads. */
	.snet-sticky-cta .snet-btn-primary {
		width: 100%;
		text-align: center;
		padding: 11px 20px;
		font-size: 14px;
		background: transparent;
		color: #1c5d8c;
		border: 1px solid #b9cbd9;
		box-shadow: none;
	}
}

/* ---------------------------------------------------------------------------
   /sign/ — documents people sign online (added 2026-09-23).
   Reuses the pricing-card shape so a signing card reads as the same family as
   a plan card, rather than looking like a page someone bolted on.
   --------------------------------------------------------------------------- */
.snet-sign-grid {
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	align-items: stretch;
}

@media (max-width: 860px) {
	.snet-sign-grid {
		grid-template-columns: 1fr;
		max-width: 560px;
	}
}

.snet-sign-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1.5px solid var(--snet-line);
	border-radius: 14px;
	padding: 26px 24px 24px;
}

.snet-sign-card h2 {
	margin: 4px 0 10px;
	font-size: 1.25rem;
	line-height: 1.3;
}

.snet-sign-for {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--snet-green, #4d6b2f);
}

.snet-sign-meta {
	font-size: 0.9rem;
	color: #5c5245;
	background: #faf7f2;
	border-left: 3px solid var(--snet-rust, #bf5b37);
	padding: 10px 12px;
	margin: 0 0 18px;
}

/* Push the button to the bottom so cards of different text length still line up. */
.snet-sign-card .snet-btn {
	margin-top: auto;
	align-self: flex-start;
}