/* ==========================================================================
   Shroom SEO – white theme with dark navy accents, on top of Bootstrap 5.3
   ========================================================================== */

:root {
	--shroom-bg: #ffffff;
	--shroom-surface: #ffffff;
	--shroom-surface-2: #f5f4f7;
	--shroom-line: #e9e7ee;
	--shroom-ink: #16141c;
	--shroom-muted: #6c6875;
	--shroom-accent: #14213d;
	--shroom-accent-dark: #0b1428;
	--shroom-accent-soft: #e8ecf4;
	--shroom-tint: #ffffff;
	--shroom-navy: #14213d;
	--shroom-navy-dark: #0b1428;

	/* Striped gradient behind the 404 illustration. */
	--shroom-gradient: linear-gradient(140deg, #f4f6fa 0%, #e3e8f1 50%, #b9c4d9 100%);

	--bs-primary: var(--shroom-accent);
	--bs-primary-rgb: 20, 33, 61;
	--bs-body-bg: var(--shroom-bg);
	--bs-body-color: var(--shroom-ink);
	--bs-secondary-color: var(--shroom-muted);
	--bs-border-color: var(--shroom-line);
	--bs-link-color: var(--shroom-accent-dark);
	--bs-link-color-rgb: 11, 20, 40;
	--bs-link-hover-color: var(--shroom-ink);
	--bs-link-hover-color-rgb: 22, 20, 28;
	--bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bs-body-font-size: .975rem;
	--bs-border-radius: .5rem;
	--bs-border-radius-lg: .875rem;
	--bs-border-radius-xl: 1.25rem;
}

body {
	background-color: var(--shroom-bg);
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--shroom-accent); color: #fff; }

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .display-1, .display-4, .display-5, .brand-name {
	font-family: "Inter Tight", "Inter", system-ui, sans-serif;
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--shroom-ink);
}

.text-muted-ink { color: var(--shroom-muted) !important; }
.small-muted { font-size: .85rem; color: var(--shroom-muted); }

/* Buttons ---------------------------------------------------------------- */
.btn {
	--bs-btn-font-weight: 500;
	--bs-btn-font-size: .9rem;
	--bs-btn-padding-x: 1.05rem;
	--bs-btn-padding-y: .6rem;
	--bs-btn-border-radius: .5rem;
}
.btn-lg { --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .8rem; --bs-btn-font-size: 1rem; }

/* Main call-to-action buttons are dark navy. */
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--shroom-navy);
	--bs-btn-border-color: var(--shroom-navy);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--shroom-navy-dark);
	--bs-btn-hover-border-color: var(--shroom-navy-dark);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--shroom-navy-dark);
	--bs-btn-active-border-color: var(--shroom-navy-dark);
	--bs-btn-disabled-bg: var(--shroom-navy);
	--bs-btn-disabled-border-color: var(--shroom-navy);
	--bs-btn-focus-shadow-rgb: 20, 33, 61;
}

.btn-light-outline {
	--bs-btn-color: var(--shroom-ink);
	--bs-btn-bg: #fff;
	--bs-btn-border-color: var(--shroom-line);
	--bs-btn-hover-color: var(--shroom-ink);
	--bs-btn-hover-bg: var(--shroom-surface-2);
	--bs-btn-hover-border-color: #d6d3dd;
	--bs-btn-active-color: var(--shroom-ink);
	--bs-btn-active-bg: #eceaf0;
	--bs-btn-active-border-color: #d6d3dd;
}

.btn-ink {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--shroom-ink);
	--bs-btn-border-color: var(--shroom-ink);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #000;
	--bs-btn-hover-border-color: #000;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #000;
}

/* Layout ----------------------------------------------------------------- */
.section { padding: 4.5rem 0; }
@media (min-width: 992px) {
	.section { padding: 6.5rem 0; }
}

.section-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: .75rem; }
.section-lead { color: var(--shroom-muted); max-width: 34rem; font-size: .95rem; }
.text-center .section-lead { margin-inline: auto; }

.panel {
	background: var(--shroom-surface);
	border: 1px solid var(--shroom-line);
	border-radius: var(--bs-border-radius-lg);
}

/* Striped gradient surfaces ---------------------------------------------- */
.gradient-panel {
	position: relative;
	overflow: hidden;
	background: var(--shroom-gradient);
	isolation: isolate;
}
.gradient-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0) 70px);
}
.gradient-band {
	position: relative;
	background: #fff;
	border-top: 1px solid var(--shroom-line);
	isolation: isolate;
}


/* Header ----------------------------------------------------------------- */
.site-header {
	background-color: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--shroom-line); }

.navbar-brand {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--shroom-ink);
}
.navbar-brand:hover { color: var(--shroom-ink); }
.brand-name { font-size: 1.45rem; }
.brand-mark {
	flex-shrink: 0;
	width: auto;
	height: 46px;
	transition: transform .25s ease;
}
.navbar-brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.custom-logo { max-height: 46px; width: auto; }

.navbar .nav-link {
	font-size: .9rem;
	color: var(--shroom-muted);
	padding-inline: .8rem !important;
}
.navbar .nav-link:hover { color: var(--shroom-ink); }
.navbar .nav-link.active {
	color: var(--shroom-accent);
	text-decoration: underline;
	text-underline-offset: 6px;
}
/* Add the CSS class "nav-audit" to a menu item to get the navy asterisk. */
.nav-audit,
.nav-audit > .nav-link { color: var(--shroom-ink) !important; }
a.nav-audit::after,
.nav-audit > .nav-link::after {
	content: "*";
	color: var(--shroom-accent);
	margin-left: .2rem;
}

.navbar-toggler {
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	display: grid;
	place-items: center;
	border: 1px solid var(--shroom-line);
	border-radius: .5rem;
	background: #fff;
	font-size: 1.35rem;
	color: var(--shroom-ink);
}
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(20, 33, 61, .25); }

@media (max-width: 991.98px) {
	.navbar-collapse {
		margin-top: .75rem;
		padding: .5rem;
		background: #fff;
		border: 1px solid var(--shroom-line);
		border-radius: var(--bs-border-radius-lg);
	}
	.navbar .nav-link { padding-block: .65rem; }
}

/* Hero ------------------------------------------------------------------- */
.hero { padding: 3rem 0 4rem; }
@media (min-width: 992px) {
	.hero { padding: 3.5rem 0 5rem; }
}
.hero-title { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
.hero-text { color: var(--shroom-muted); max-width: 30rem; }

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	align-self: flex-start;
	padding: .35rem .8rem;
	border-radius: 999px;
	background: var(--shroom-accent-soft);
	color: var(--shroom-accent);
	font-size: .8rem;
	font-weight: 500;
}

.hero-points { max-width: 32rem; font-size: .9rem; }
.hero-points li { display: flex; align-items: center; gap: .5rem; }
.hero-points .bi { color: var(--shroom-accent); }

.hero-stat-value { font-family: "Inter Tight", sans-serif; font-size: 2rem; font-weight: 500; letter-spacing: -.03em; }

/* Large hand logo on the right of the hero. */
.hero-logo {
	width: min(70%, 260px);
	height: auto;
	transform: rotate(-6deg);
}
@media (min-width: 992px) {
	.hero-logo { width: min(80%, 380px); }
}

/* Services --------------------------------------------------------------- */
.service-card {
	height: 100%;
	padding: 1.4rem 1.4rem 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform .2s ease, border-color .2s ease;
}
.service-card:hover {
	transform: translateY(-3px);
	border-color: var(--shroom-accent);
}
.service-card h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.service-card p { font-size: .82rem; color: var(--shroom-muted); max-width: 17rem; }

.svc-art {
	position: relative;
	height: 170px;
	margin-top: auto;
}
.svc-art .ghost-line {
	position: absolute;
	height: 10px;
	border-radius: 999px;
	background: var(--shroom-surface-2);
}
.svc-art .ghost-block {
	position: absolute;
	border-radius: .5rem;
	background: var(--shroom-surface-2);
}
.accent-orb {
	position: absolute;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--shroom-accent);
	color: #fff;
	box-shadow: 0 0 0 10px var(--shroom-accent-soft);
}
.mini-icon {
	position: absolute;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--shroom-line);
	color: var(--shroom-accent);
	font-size: .9rem;
}
.fake-input {
	position: absolute;
	left: 0;
	right: 0;
	height: 2.1rem;
	border-radius: .45rem;
	background: var(--shroom-surface-2);
	color: #a9a5b1;
	font-size: .8rem;
	display: flex;
	align-items: center;
	padding-left: .7rem;
}
.fake-btn {
	position: absolute;
	font-size: .7rem;
	font-weight: 500;
	color: #fff;
	background: var(--shroom-accent);
	border-radius: .35rem;
	padding: .35rem .8rem;
}
.fake-cursor {
	position: absolute;
	font-size: .95rem;
	color: var(--shroom-ink);
	transform: rotate(-15deg);
}
.rank-tag {
	position: absolute;
	font-size: .65rem;
	font-weight: 600;
	color: #fff;
	background: var(--shroom-ink);
	border-radius: .3rem;
	padding: .25rem .45rem;
}

/* Process ---------------------------------------------------------------- */
.process-card {
	height: 100%;
	min-height: 250px;
	padding: 1.4rem;
	display: flex;
	flex-direction: column;
}
.process-num { font-size: .95rem; font-weight: 500; color: var(--shroom-muted); }
.process-icon { color: var(--shroom-accent); font-size: 1.35rem; line-height: 1; }
.process-card h3 { font-size: 1.05rem; margin: auto 0 .4rem; }
.process-card p { font-size: .82rem; color: var(--shroom-muted); margin: 0; min-height: 4.5em; }

/* Website access note under the process steps */
.access-panel { padding: 1.75rem; }
.access-panel h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.access-panel p { font-size: .9rem; color: var(--shroom-muted); }

/* Managed SEO ------------------------------------------------------------ */
.managed-card { height: 100%; padding: 1.4rem; }
.managed-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 1rem;
	border-radius: var(--bs-border-radius);
	background: var(--shroom-accent-soft);
	color: var(--shroom-accent);
	font-size: 1.15rem;
}
.managed-card h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.managed-card p { font-size: .82rem; color: var(--shroom-muted); margin: 0; }

/* Contact popup ---------------------------------------------------------- */
.contact-modal .modal-content { border: 0; border-radius: var(--bs-border-radius-xl); padding: .75rem; }
.contact-modal .form-label { font-size: .85rem; font-weight: 500; }
.contact-modal .form-control,
.contact-modal .form-select { border-color: var(--shroom-line); }
.contact-modal .form-control:focus,
.contact-modal .form-select:focus { border-color: var(--shroom-accent); box-shadow: 0 0 0 .2rem var(--shroom-accent-soft); }
.request-options .btn { font-size: .85rem; }
.request-options .btn-check:checked + .btn {
	background: var(--shroom-accent);
	border-color: var(--shroom-accent);
	color: #fff;
}
.request-options .btn-check:focus-visible + .btn { box-shadow: 0 0 0 .2rem var(--shroom-accent-soft); }
.call-fields { background: var(--shroom-surface-2); }

/* Pricing ---------------------------------------------------------------- */
.pricing-section {
	background: var(--shroom-tint);
	border-block: 1px solid var(--shroom-line);
}

.price-card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	border-radius: var(--bs-border-radius-lg);
	background: #fff;
	border: 1px solid var(--shroom-line);
}
.price-card.is-featured { border: 2px solid var(--shroom-accent); }
.price-badge {
	position: absolute;
	top: -.8rem;
	right: 1rem;
	font-size: .7rem;
	font-weight: 500;
	color: #fff;
	background: var(--shroom-accent);
	border-radius: .3rem;
	padding: .3rem .55rem;
}
.price-card h3 { font-size: 1.35rem; margin-bottom: .2rem; }
.price-card .plan-blurb { font-size: .78rem; color: var(--shroom-muted); }
.price-card .price-divider { border-top: 1px solid var(--shroom-line); margin: 1rem -1.25rem; }
.price-amount { font-family: "Inter Tight", sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; }
.price-amount small { font-family: "Inter", sans-serif; font-size: .75rem; color: var(--shroom-muted); letter-spacing: 0; }
.price-card .features-label { font-size: .78rem; color: var(--shroom-muted); margin: 1rem 0 .5rem; }
.tick-list { list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: .82rem; }
.tick-list li { display: flex; gap: .5rem; padding: .3rem 0; }
.tick-list .bi { color: var(--shroom-accent); flex-shrink: 0; }
.price-perks { font-size: .8rem; color: var(--shroom-ink); }
.price-perks .bi { color: var(--shroom-accent); }

/* FAQ -------------------------------------------------------------------- */
.faq-item {
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--shroom-line);
}
.faq-item:last-child { border-bottom: 0; }
.faq-num { font-size: .8rem; color: var(--shroom-accent); padding-top: .15rem; }
.faq-item h3 { font-family: "Inter", sans-serif; font-size: .95rem; font-weight: 500; letter-spacing: 0; margin-bottom: .3rem; }
.faq-item p { font-size: .82rem; color: var(--shroom-muted); margin: 0; }

/* CTA band --------------------------------------------------------------- */
.cta-band { padding: 4.5rem 0; }
.cta-card {
	background: #fff;
	border: 1px solid var(--shroom-line);
	border-radius: var(--bs-border-radius-lg);
	padding: 2rem;
}
@media (min-width: 992px) {
	.cta-card { padding: 2.25rem 2.5rem; }
}
.cta-card h2 { font-size: clamp(1.7rem, 3vw, 2.1rem); }

/* Footer ----------------------------------------------------------------- */
.site-footer { padding-top: 5rem; }
.footer-address { font-family: "Inter Tight", sans-serif; font-size: 1.3rem; line-height: 1.25; letter-spacing: -.02em; }
.footer-contact a { color: var(--shroom-ink); text-decoration: none; font-size: 1.05rem; }
.footer-contact a:hover { color: var(--shroom-accent); }
.footer-contact .bi { color: var(--shroom-accent); }
.footer-links { font-size: .88rem; }
.footer-links a { color: var(--shroom-muted); text-decoration: none; }
.footer-links a:hover { color: var(--shroom-ink); }
.social-links a {
	width: 1.9rem;
	height: 1.9rem;
	display: inline-grid;
	place-items: center;
	border-radius: .4rem;
	color: var(--shroom-ink);
	font-size: 1.25rem;
	text-decoration: none;
}
.social-links a:hover { color: var(--shroom-accent); }
.newsletter-card { padding: 1.25rem; background: var(--shroom-tint); }
.newsletter-card .form-control {
	background: #fff;
	border-color: var(--shroom-line);
	font-size: .88rem;
}
.footer-bottom { font-size: .82rem; color: var(--shroom-muted); }
.footer-bottom a { color: var(--shroom-muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--shroom-ink); }
.footer-notice { font-size: .74rem; max-width: 46rem; }

/* Forms ------------------------------------------------------------------ */
.form-control:focus {
	border-color: var(--shroom-accent);
	box-shadow: 0 0 0 .2rem rgba(20, 33, 61, .15);
}
.hp-field { position: absolute; left: -9999px; }

/* 404 -------------------------------------------------------------------- */
.error-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: 2.5rem 0;
}
.error-code {
	font-family: "Inter Tight", sans-serif;
	font-size: clamp(6rem, 14vw, 9.5rem);
	font-weight: 400;
	letter-spacing: -.05em;
	line-height: .9;
	color: var(--shroom-ink);
}
.error-visual {
	border-radius: var(--bs-border-radius-xl);
	border: 1px solid var(--shroom-line);
	aspect-ratio: 54 / 56;
	display: grid;
	place-items: center;
	padding: 1.75rem;
}
.browser-window {
	width: 100%;
	max-width: 480px;
	background: #fff;
	border: 1px solid var(--shroom-line);
	border-radius: .75rem;
	overflow: hidden;
}
.browser-bar {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem .75rem;
	background: var(--shroom-surface-2);
	border-bottom: 1px solid var(--shroom-line);
	font-size: .7rem;
	color: #8a8694;
}
.browser-dots { display: flex; gap: .3rem; }
.browser-dots span { width: .5rem; height: .5rem; border-radius: 50%; }
.browser-url {
	flex: 1;
	text-align: center;
	background: #e9e7ee;
	border-radius: .35rem;
	padding: .2rem .5rem;
	color: #4b4853;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Blog / content --------------------------------------------------------- */
.page-header { padding: 3.5rem 0 2.5rem; text-align: center; }
.entry-content { font-size: 1.025rem; line-height: 1.75; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--bs-border-radius-lg); }
.entry-content h2, .entry-content h3 { margin-top: 2rem; }
.entry-content blockquote {
	border-left: 3px solid var(--shroom-accent);
	padding: .5rem 0 .5rem 1.25rem;
}
.post-card {
	border-radius: var(--bs-border-radius-lg);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--shroom-line) !important;
	box-shadow: none !important;
	padding: .5rem;
}
.post-card .card-img-top { border-radius: .6rem; }
.post-card .card-title a { color: inherit; text-decoration: none; }
.post-card .card-title a:hover { color: var(--shroom-accent); }
.eyebrow { display: inline-block; font-size: .85rem; color: var(--shroom-muted); margin-bottom: .5rem; }

.pagination {
	--bs-pagination-active-bg: var(--shroom-accent);
	--bs-pagination-active-border-color: var(--shroom-accent);
	--bs-pagination-color: var(--shroom-ink);
}

.alignwide { margin-inline: -4rem; max-width: calc(100% + 8rem); }
.alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; }
@media (max-width: 991.98px) {
	.alignwide { margin-inline: 0; max-width: 100%; }
}
.wp-caption-text, .wp-element-caption { font-size: .875rem; color: var(--bs-secondary-color); }

/* Accessibility ---------------------------------------------------------- */
.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 2000;
}
html { scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) {
	.service-card, .site-header, .brand-mark { transition: none; }
	.service-card:hover { transform: none; }
}

/* Wide g-5 gutters overflow the container on phones; narrow them there. */
@media (max-width: 575.98px) {
	.row.g-5 { --bs-gutter-x: 1.5rem; }
}