/* =========================================================================
   Satvik Infotech design system
   Editorial, warm, fast. Self-hosted Fraunces serif + system sans for UI.
   All tokens live in :root. Style reference: calm cream/olive editorial.
   ========================================================================= */

@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Fraunces";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/fraunces-latin-italic.woff2") format("woff2");
}

:root {
	/* Color */
	--brand: #4a5a2e;          /* olive */
	--brand-deep: #1a1a1a;     /* near-black ink */
	--accent: #4a5a2e;         /* olive */
	--accent-2: #6b7f42;       /* lighter olive (hover) */
	--gradient: linear-gradient(135deg, #4a5a2e, #5e7239);

	--ink: #1a1a1a;
	--muted: #5a5a5a;
	--line: #e2dcc9;
	--bg: #faf7f0;             /* ivory */
	--bg-soft: #f3eee2;        /* cream */

	/* Spacing / shape */
	--radius: 10px;
	--radius-sm: 6px;
	--maxw: 1360px;
	--pad: clamp(1rem, 4vw, 2rem);

	--shadow-sm: 0 1px 2px rgba(26, 26, 26, .05), 0 4px 12px rgba(26, 26, 26, .05);
	--shadow-md: 0 8px 24px rgba(26, 26, 26, .10);

	/* Blog images are old, loud stock art. This pulls them toward the site's
	   calm olive/cream palette. Full colour is restored on hover. */
	--img-tone: saturate(.55) sepia(.35) hue-rotate(35deg) contrast(.95) brightness(.96);

	--font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
		Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* --- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-serif);
	color: var(--ink);
	background: var(--bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.1; color: var(--ink); margin: 0 0 .5em; letter-spacing: -.03em; }
h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
p  { margin: 0 0 1rem; color: var(--muted); }

:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; border-radius: 4px; }

/* --- Layout helpers ----------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: clamp(2.5rem, 6vw, 4.25rem); }
.section--soft { background: var(--bg-soft); }
.center { text-align: center; }
.eyebrow {
	display: inline-block; font-family: var(--font); font-size: .78rem; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem;
}
.lead { font-size: 1.15rem; max-width: 60ch; }
.center .lead { margin-inline: auto; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--font); font-weight: 600; font-size: .98rem; padding: .8rem 1.5rem;
	border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--brand-deep); color: #fff; }
.btn--primary:hover { background: var(--accent); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { padding: .55rem 1.1rem; font-size: .9rem; }

/* --- Header / nav ------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(250, 247, 240, .88);
	-webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--line);
}
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-serif); font-weight: 600; color: var(--ink); font-size: 1.15rem; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
/* The Si mark cropped from the company logo and recoloured to the palette
   (olive S, ink i). The wordmark beside it is live text, not part of the
   image, so it stays crisp and searchable. */
.brand .mark {
	width: auto; height: 30px; display: block; flex: none;
	background: none; border-radius: 0;
}
/* Hamburger navigation at ALL screen sizes (user preference). The header
   shows brand + CTA button + hamburger; links live in the dropdown. */
.nav-actions { display: flex; align-items: center; gap: .6rem; }

.nav-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; cursor: pointer; padding: .5rem;
	width: 44px; height: 44px;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
	content: ""; display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; position: relative;
	transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after  { position: absolute; top: 7px; }

.nav-links {
	position: absolute; top: 64px; right: 0; display: none;
	flex-direction: column; gap: 0; list-style: none; margin: 0; padding: .5rem 1.25rem 1rem;
	width: min(320px, 100vw);
	background: var(--bg); border: 1px solid var(--line); border-top: 0;
	border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-md);
}
.nav-links.open { display: flex; }
.nav-links li { width: 100%; }
.nav-links a, .nav-links .nav-chat {
	font-family: var(--font); color: var(--ink); font-weight: 500; font-size: .95rem;
	display: block; width: 100%; text-align: left; padding: .8rem 0;
	border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer;
}
.nav-links a:hover, .nav-links .nav-chat:hover { color: var(--accent); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--accent); }
.nav-links li:last-child a, .nav-links li:last-child .nav-chat { border-bottom: 0; }
.dot-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: .45rem; }
/* "Ask our AI" button visible in the header bar on bigger screens only
   (on phones it lives in the dropdown + floating bubble instead) */
.nav-ai { display: none; }
@media (min-width: 761px) { .nav-ai { display: inline-flex; } .nav-ai .dot-live { margin-right: 0; } }

@media (max-width: 760px) {
	.nav-links { left: 0; right: 0; width: auto; border-radius: 0; border-inline: 0; padding-inline: var(--pad); }
	.nav-actions .btn { padding: .55rem .9rem; font-size: .88rem; }
}

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(60% 60% at 15% 0%, rgba(74, 90, 46, .06), transparent 60%),
		radial-gradient(50% 50% at 100% 20%, rgba(226, 220, 201, .45), transparent 60%);
}
.hero .container { padding-block: clamp(2.75rem, 7vw, 5rem); }
.hero .btn-row { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; }

/* --- Subpage header band ------------------------------------------------ */
/* Distinct first section for inner pages: cream band, hairline divider,
   left-aligned serif title + breadcrumbs (home keeps its own hero). */
.page-head { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.page-head .container { padding-block: clamp(2.5rem, 6vw, 4rem); }
.crumbs { font-family: var(--font); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); text-decoration: none; }
.crumbs .sep { margin: 0 .4rem; color: var(--accent); }
.crumbs .here { color: var(--accent); }
.page-head h1 { margin-bottom: .4rem; }
.page-head .lead { margin: 0; }
.page-head .crumbs, .page-head h1, .page-head .lead { animation: rise .6s ease-out both; }
.page-head h1 { animation-delay: .07s; }
.page-head .lead { animation-delay: .14s; }

/* --- Hero two-column + visual ------------------------------------------ */
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.hero-copy .btn-row { justify-content: flex-start; margin-top: 1.6rem; }
.trust-line { margin-top: 1.5rem; font-size: .9rem; color: var(--muted); display: flex; gap: .5rem .9rem; flex-wrap: wrap; align-items: center; }
.trust-line strong { color: var(--ink); }
.trust-line .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line); }

.hero-visual { width: 100%; max-width: 520px; justify-self: end; }
.hv-card {
	background: #fff;
	border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow-md); padding: 1.5rem;
}
.hv-title { font-family: var(--font); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .9rem; display: flex; align-items: center; gap: .5rem; }
.hv-title .live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(74, 90, 46, .40); }
	50% { box-shadow: 0 0 0 6px rgba(74, 90, 46, 0); }
}
.hv-flow { display: grid; gap: .7rem; }
.hv-step { display: flex; align-items: center; gap: .75rem; padding: .85rem .95rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); font-family: var(--font); font-weight: 500; font-size: .95rem; color: var(--ink); }
.hv-step .n { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; background: var(--brand-deep); color: var(--bg); font-family: var(--font); font-size: .8rem; flex: none; }
.hv-step--ai { background: rgba(74, 90, 46, .08); border-color: rgba(74, 90, 46, .30); }
.hv-tools { margin: .9rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.hv-tools strong { color: var(--ink); }

@media (max-width: 860px) {
	.hero-grid { grid-template-columns: 1fr; text-align: center; }
	.hero-copy .btn-row, .trust-line { justify-content: center; }
	.hero-visual { max-width: 440px; margin-inline: auto; width: 100%; }
}

/* --- Trust strip -------------------------------------------------------- */
.strip { border-block: 1px solid var(--line); background: var(--bg); }
.strip .container { padding-block: 1.1rem; }
.strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem 1.5rem; }
.strip-item { display: flex; align-items: center; gap: .55rem; font-family: var(--font); font-weight: 500; color: var(--ink); font-size: .92rem; }
.strip-item .check { color: var(--accent); flex: none; width: 20px; height: 20px; }

/* --- Steps -------------------------------------------------------------- */
.step { position: relative; }
.step .num { display: inline-block; font-family: var(--font-serif); font-size: 2.4rem; font-weight: 600; line-height: 1; margin-bottom: .6rem; color: var(--accent); }

/* --- FAQ ---------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: start; }
@media (max-width: 760px) { .faq { grid-template-columns: 1fr; } }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; padding: 0 1.1rem; transition: border-color .15s ease; }
.faq details[open] { border-color: var(--accent); }
.faq summary { cursor: pointer; font-weight: 600; padding: 1rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding: 0 0 1rem; margin: 0; }

/* --- Inquiry form (on-page) -------------------------------------------- */
.lead-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: clamp(1.25rem, 3vw, 1.75rem); }
.lead-benefits { list-style: none; margin: 0 0 0; padding: 0; display: grid; gap: 1.15rem; }
.lead-benefits li { display: flex; gap: .85rem; align-items: flex-start; color: var(--ink); }
.lead-benefits .check { color: var(--accent); flex: none; width: 22px; height: 22px; margin-top: 1px; }
.lead-benefits strong { display: block; margin-bottom: .15rem; }
.lead-benefits span { color: var(--muted); font-size: .93rem; line-height: 1.5; }

/* --- Grid / cards ------------------------------------------------------- */
.grid { display: grid; gap: 1.25rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
	position: relative;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.6rem; box-shadow: var(--shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
/* Cards that link somewhere: whole card is clickable and clearly interactive */
.card--link { display: flex; flex-direction: column; }
.card--link:hover { border-color: var(--accent); }
.card--link .more { margin-top: auto; padding-top: 1.1rem; }
.card h3 { margin-bottom: .35rem; }
.card p { margin: 0; font-size: .97rem; }
.card .icon {
	width: 44px; height: 44px; border-radius: 12px; margin-bottom: 1rem;
	display: grid; place-items: center; background: rgba(74, 90, 46, .10); color: var(--accent);
}
.card .icon svg { width: 24px; height: 24px; }
.card h3 a { color: inherit; }
.card h3 a:hover { color: var(--accent); text-decoration: none; }
/* "Explore X" call to action inside a card: reads as a button, and its
   ::after stretches over the whole card so any click follows the link. */
.more { margin: 1.1rem 0 0; }
.more a {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--font); font-size: .92rem; font-weight: 600;
	color: var(--ink); background: var(--bg-soft);
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	padding: .6rem 1.05rem;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.more a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.more a:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; text-decoration: none; }
.card:hover .more a { border-color: var(--accent); }
.card:hover .more a:hover { border-color: var(--brand-deep); }
.more span { transition: transform .15s ease; display: inline-block; }
.more a:hover span { transform: translateX(3px); }

/* --- Testimonials ------------------------------------------------------- */
/* Wide 2-up boxes with a tight gap (user preference: big boxes, less space) */
.t-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 760px) { .t-grid { grid-template-columns: 1fr; } }
.quote { font-family: var(--font-serif); font-style: italic; font-size: 1.08rem; color: var(--ink); margin: 0 0 1rem; }
.quote::before { content: "\201C"; color: var(--accent); font-weight: 600; margin-right: .1em; }
.cite { margin: 0; display: grid; gap: .15rem; }
.cite-name { font-family: var(--font); font-weight: 600; font-size: .9rem; color: var(--ink); }
.cite-role { font-family: var(--font); font-size: .8rem; letter-spacing: .02em; color: var(--muted); }

/* --- Direct answer block (AEO) ------------------------------------------ */
/* A question heading, a short definition, then scannable specifics. Uses the
   standard centred section head so it matches the rest of the page rhythm. */
.answer-list {
	list-style: none; margin: 0 auto; padding: 0; max-width: 980px;
	display: grid; grid-template-columns: 1fr 1fr; gap: .7rem;
}
@media (max-width: 760px) { .answer-list { grid-template-columns: 1fr; } }
.answer-list li {
	position: relative; padding: .95rem 1.15rem .95rem 2.5rem;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
	font-family: var(--font); font-size: .93rem; line-height: 1.5; color: var(--muted);
}
.answer-list li::before {
	content: ""; position: absolute; left: 1.15rem; top: 1.3rem;
	width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.answer-list strong { display: block; color: var(--ink); margin-bottom: .1rem; }
.prose { max-width: 70ch; margin: 0 auto; font-size: 1.02rem; }
.prose p:last-child { margin-bottom: 0; }

/* --- Comparison tables (AEO) -------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; font-family: var(--font); font-size: .95rem; }
.table-wrap caption { caption-side: bottom; padding: .9rem 1.1rem; font-size: .82rem; color: var(--muted); text-align: left; }
.table-wrap th, .table-wrap td { text-align: left; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap thead th { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--bg-soft); }
.table-wrap tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.table-wrap tbody tr:last-child th, .table-wrap tbody tr:last-child td { border-bottom: 0; }

/* --- Editorial pull quote ----------------------------------------------- */
.pullquote {
	font-family: var(--font-serif); font-style: italic; font-weight: 400;
	font-size: clamp(1.4rem, 3.2vw, 2.1rem); line-height: 1.3; letter-spacing: -.01em;
	color: var(--ink); max-width: 30ch; margin: 0 auto .75rem;
}
.pullquote-cite { font-family: var(--font); font-size: .85rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0; }

/* --- Section heading ---------------------------------------------------- */
.section-head { max-width: 62ch; margin: 0 auto clamp(1.5rem, 4vw, 2.25rem); }

/* --- CTA band ----------------------------------------------------------- */
.cta {
	background: var(--brand-deep); color: #fff; border-radius: var(--radius);
	padding: clamp(2rem, 5vw, 3.5rem); text-align: center;
}
.cta h2, .cta p { color: #fff; }
.cta p { opacity: .85; }
/* Dark band: both button styles must invert or they vanish into it */
.cta .btn--primary { background: var(--bg); color: var(--ink); }
.cta .btn--primary:hover { background: var(--bg-soft); }
.cta .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); background: transparent; }
.cta .btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .1); }
/* Buttons sit in a centred row rather than as inline text */
.cta .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.5rem 0 0; }

/* --- Contact form ------------------------------------------------------- */
.form { display: grid; gap: .85rem; max-width: 620px; }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--font); font-weight: 600; font-size: .92rem; color: var(--ink); }
.field input, .field textarea {
	font-family: var(--font); font-size: 1rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: #fff; color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74, 90, 46, .18); }
.field textarea { min-height: 110px; resize: vertical; }

/* --- "Book a call" card, beside the inquiry form ------------------------- */
.book-card {
	background: var(--bg-soft); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 1.35rem 1.4rem; margin: 0 0 1.75rem;
}
.book-card-title {
	font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600;
	color: var(--ink); margin: 0 0 .4rem; letter-spacing: -.01em;
}
.book-card p { font-family: var(--font); font-size: .9rem; margin: 0 0 1rem; }
.book-card .btn { width: 100%; justify-content: center; }

/* --- Mautic embedded form ------------------------------------------------ */
/* The embed injects its own <style> at runtime, so these selectors are kept
   more specific than its defaults in order to win the cascade. Field names
   come from Mautic; only the presentation is ours. */
.lead-form .mauticform_wrapper { max-width: none; margin: 0; }
.lead-form .mauticform-name,
.lead-form .mauticform-description { display: none; }
/* Mautic nests the fields one level deeper than it looks:
   .mauticform-innerform > .mauticform-page-wrapper > .mauticform-row
   so the spacing has to go on the page wrapper. Putting it on innerform
   spaces its single child and does nothing between fields. */
.lead-form .mauticform-innerform { display: grid; }
.lead-form .mauticform-page-wrapper { display: grid; gap: 1.1rem; }
.lead-form .mauticform-row { display: grid; gap: .4rem; margin: 0; }
.lead-form .mauticform-label {
	font-family: var(--font); font-weight: 600; font-size: .92rem; color: var(--ink);
	margin: 0; display: block;
}
.lead-form .mauticform-required { color: var(--accent); margin-left: .15rem; }
.lead-form .mauticform-helpmessage {
	font-family: var(--font); font-size: .8rem; color: var(--muted); margin: 0;
}
.lead-form .mauticform-input,
.lead-form .mauticform-textarea,
.lead-form .mauticform-selectbox {
	width: 100%; font-family: var(--font); font-size: 1rem; color: var(--ink);
	padding: .75rem .9rem; background: #fff;
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	box-shadow: none; height: auto;
}
.lead-form .mauticform-textarea { min-height: 110px; resize: vertical; }
.lead-form .mauticform-input:focus,
.lead-form .mauticform-textarea:focus {
	outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74, 90, 46, .18);
}
.lead-form .mauticform-button-wrapper { margin: .25rem 0 0; }
/* Mautic ships `.mauticform-button-wrapper .mauticform-button.btn-default`
   and injects it after our stylesheet, so this has to out-specify it. */
.lead-form .mauticform-button-wrapper .mauticform-button,
.lead-form .mauticform-button-wrapper .mauticform-button.btn-default {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; cursor: pointer;
	font-family: var(--font); font-weight: 600; font-size: .98rem;
	padding: .8rem 1.5rem; border: 1px solid transparent; border-radius: var(--radius-sm);
	background: var(--brand-deep); color: #fff;
	transition: background .15s ease;
}
.lead-form .mauticform-button-wrapper .mauticform-button:hover,
.lead-form .mauticform-button-wrapper .mauticform-button.btn-default:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.lead-form .mauticform-errormsg,
.lead-form .mauticform-error {
	font-family: var(--font); font-size: .85rem; color: #a33; margin: .2rem 0 0;
}
/* The success message box ships empty and would otherwise sit above the
   first field as a blank panel. :empty hides it until Mautic fills it in. */
.lead-form .mauticform-message:empty { display: none; }
.lead-form .mauticform-message,
.lead-form .mauticform-post-success {
	font-family: var(--font); font-size: .95rem; color: var(--ink);
	background: var(--bg-soft); border: 1px solid var(--line);
	border-radius: var(--radius-sm); padding: 1rem 1.1rem;
}
.lead-form .mauticform-field-hidden { display: none; }

.contact-grid { display: grid; gap: 1.75rem; grid-template-columns: 1.05fr .95fr; align-items: start; max-width: 960px; margin-inline: auto; }
/* On the contact page the form IS the page, so it shares one column width
   with the header band above it. Without this the title sits at the 1360px
   container edge while the form sits inside a 960px block, which reads as a
   small panel floating in the corner of a big screen. */
/* From 761px up, where the grid goes two-column. Below that everything
   stacks and already fills the container. */
@media (min-width: 761px) {
	.contact-page .page-head .container,
	.contact-page main .section > .container { max-width: 1160px; margin-inline: auto; }
	.contact-page .contact-grid { max-width: none; gap: clamp(2rem, 4vw, 3rem); }
}
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.info-list li { display: flex; gap: 1rem; align-items: flex-start; }
.info-list .icon { flex: none; margin-top: -2px; }
.info-list h3 { font-size: 1.02rem; margin: 0 0 .2rem; }
.info-list p { font-family: var(--font); font-size: .92rem; line-height: 1.55; margin: 0; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding-block: 2.5rem; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between; }
.footer-grid p { margin: .3rem 0; font-size: .95rem; }
.footer-about { max-width: 34ch; }
.footer-about .btn { margin-top: .6rem; }
.footer-title { font-family: var(--font); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 .6rem; }
.footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.footer-links--col { flex-direction: column; gap: .55rem; }
.footer-links a { font-family: var(--font); color: var(--muted); font-size: .92rem; }
.footer-links a:hover { color: var(--accent); }
.footer-bottom { font-family: var(--font); margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.sister { font-size: .95rem; }
.sister strong { color: var(--ink); }

/* --- Accessibility helpers ---------------------------------------------- */
.visually-hidden {
	position: absolute; 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; left: .75rem; top: -100%; z-index: 100;
	background: var(--brand-deep); color: #fff; padding: .6rem 1rem;
	border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: .75rem; }

/* --- Blog: listing cards ------------------------------------------------ */
.post-card { padding: 0; overflow: hidden; }
.post-card > *:not(.post-thumb):not(.post-badge) { padding-inline: 1.4rem; }
.post-card > .more { padding-bottom: 1.4rem; }
/* Thumbnails: many old featured images have text baked in, so they are
   contained rather than cropped. The tone filter calms the loud stock
   colours into the site's palette; full colour returns on hover. */
.post-thumb {
	display: block; margin: 0; position: relative; overflow: hidden;
	aspect-ratio: 16 / 9; background: var(--bg-soft);
	border-bottom: 1px solid var(--line);
}
.post-thumb img {
	width: 100%; height: 100%; object-fit: contain; display: block; padding: .7rem;
	filter: var(--img-tone); transition: filter .3s ease;
}
.card--link:hover .post-thumb img { filter: none; }
.post-meta {
	font-family: var(--font); font-size: .78rem; font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem;
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
}
.post-cat { color: var(--accent); }

/* Card hierarchy: badge on the image, then title, then a quiet date.
   Category and date used to share one uppercase line above the title, which
   made the three read as a single block. */
.post-badge {
	position: absolute; top: .85rem; left: .85rem; z-index: 2;
	font-family: var(--font); font-size: .66rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: #fff;
	background: rgba(26, 26, 26, .82); padding: .32rem .62rem; border-radius: 999px;
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.post-cat-inline {
	font-family: var(--font); font-size: .68rem; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: var(--accent); margin: 1.2rem 0 .3rem;
}
.post-card h3 { font-size: 1.15rem; margin: 0 0 .35rem; }
.post-card > h3 { padding-top: 1.2rem; }
.post-card > .post-cat-inline + h3 { padding-top: 0; }
.post-date {
	font-family: var(--font); font-size: .8rem; color: var(--muted);
	margin: 0 0 .7rem; letter-spacing: 0; text-transform: none;
}
.post-card p { font-size: .93rem; }

/* Category chips */
.tag-label {
	font-family: var(--font); font-size: .72rem; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: var(--muted); margin: 1.6rem 0 .6rem;
}
.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.tag {
	display: inline-block; font-family: var(--font); font-size: .78rem; font-weight: 600;
	letter-spacing: .04em; color: var(--muted); background: var(--bg);
	border: 1px solid var(--line); border-radius: 999px; padding: .3rem .75rem;
}
.tag:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.page-head .post-meta { margin-top: 1rem; }

/* --- Blog: article layout ------------------------------------------------ */
/* On big screens the table of contents moves into a sticky sidebar, so the
   page uses the full width instead of a narrow strip down the middle, while
   the reading column stays a comfortable line length. */
.post-layout { display: block; }
.post-body { max-width: 820px; margin-inline: auto; }
/* The two-column grid applies ONLY when a sidebar is actually present.
   Posts too short for a table of contents keep the centred column: without
   this guard their body lands in the empty 250px sidebar track. */
@media (min-width: 1080px) {
	.post-layout--sidebar {
		display: grid; grid-template-columns: 250px minmax(0, 1fr);
		gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch;
		/* sidebar + gap + reading column, centred, so no dead space is left */
		max-width: 1160px; margin-inline: auto;
	}
	/* The sidebar column runs the full height of the article. The contents
	   list scrolls away with the page like normal content; only the marketing
	   card sticks, so it stays alongside the reader the whole way down. */
	.post-layout--sidebar .post-side { display: block; }
	.post-layout--sidebar .post-side .toc { margin: 0 0 1rem; }
	.post-layout--sidebar .side-cta { position: sticky; top: 84px; }
	.post-layout--sidebar .post-body { max-width: none; margin-inline: 0; }
	.post-layout:not(.post-layout--sidebar) .post-body { max-width: 900px; }
}

/* On an article page every band shares the article column width, so the
   title, sidebar, body, older/newer nav and related posts all line up on the
   same left and right edges instead of each using its own width. */
@media (min-width: 1080px) {
	.post-page .page-head .container,
	.post-page .post-nav,
	.post-page main .section > .container,
	.post-page main .section > .container.post-layout { max-width: 1160px; margin-inline: auto; }
}

/* --- Blog: article body -------------------------------------------------- */
/* Justified article text, with hyphenation on so the extra word spacing
   justification creates does not open rivers of white down the column. */
.post-body p, .post-body li {
	font-size: 1.05rem; line-height: 1.75; color: var(--ink);
	text-align: justify; -webkit-hyphens: auto; hyphens: auto;
}
.post-body p { margin: 0 0 1.3rem; }
.post-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 2.4rem 0 .8rem; }
.post-body h3 { margin: 1.8rem 0 .6rem; }
.post-body ul, .post-body ol { margin: 0 0 1.4rem; padding-left: 1.2rem; }
.post-body li { margin-bottom: .5rem; }
.post-body a { text-decoration: underline; text-underline-offset: 2px; }
.post-body blockquote {
	margin: 1.8rem 0; padding: .3rem 0 .3rem 1.3rem; border-left: 3px solid var(--accent);
	font-family: var(--font-serif); font-style: italic; color: var(--ink);
}
/* Images framed in the site's editorial style, not bare screenshots */
.post-hero, .post-figure {
	margin: 0 0 1.8rem; padding: .6rem; background: var(--bg-soft);
	border: 1px solid var(--line); border-radius: var(--radius);
}
.post-figure { margin: 2rem 0; }
.post-hero img, .post-figure img {
	width: 100%; height: auto; display: block; border-radius: var(--radius-sm);
	transition: filter .3s ease;
}
/* Hero is decorative, so it gets the full tone. Inline figures often carry
   information (screenshots, diagrams), so they get a lighter touch and
   return to full colour on hover. */
.post-hero img { filter: var(--img-tone); }
.post-hero:hover img { filter: none; }
.post-figure img { filter: saturate(.85); }
.post-figure:hover img { filter: none; }
@media (prefers-reduced-motion: reduce) {
	.post-thumb img, .post-hero img, .post-figure img { transition: none; }
}
.post-figure figcaption {
	font-family: var(--font); font-size: .82rem; color: var(--muted);
	text-align: center; padding: .7rem .5rem .2rem;
}

/* --- Blog: table of contents -------------------------------------------- */
.toc {
	background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.25rem 1.5rem; margin: 0 0 2rem;
}
.toc-title {
	font-family: var(--font); font-size: .78rem; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--muted); margin: 0 0 .75rem;
}
/* No list markers: most of these headings already start with their own
   number ("1. Hit your visitors..."), and an ordered-list marker on top of
   that printed it twice. The heading text is the single source of truth. */
/* No height cap and no inner scrollbar: the list is not sticky, so it can
   simply be as tall as it needs and scroll away with the page. */
.toc ol { margin: 0; padding-left: 0; list-style: none; display: grid; gap: .4rem; }
.toc li { font-family: var(--font); font-size: .95rem; color: var(--muted); }
.toc a { color: var(--ink); }
.toc a:hover { color: var(--accent); }
.post-body h2 { scroll-margin-top: 84px; }

/* --- Blog: sticky sidebar marketing card --------------------------------- */
/* Rides along beside the article while reading, then stops with the sidebar
   at the end of the post (before the older/newer nav). Hidden below the
   sidebar breakpoint, where the fixed mobile CTA bar already does this job. */
.side-cta { display: none; }
@media (min-width: 1080px) {
	.side-cta {
		display: block; flex: none; margin-top: 1rem; padding: 1.35rem 1.3rem;
		background: var(--brand-deep); color: var(--bg);
		border-radius: var(--radius); box-shadow: var(--shadow-sm);
	}
}
.side-cta-eyebrow {
	font-family: var(--font); font-size: .68rem; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: #8fae5d; margin: 0 0 .5rem;
}
.side-cta-title {
	font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; line-height: 1.2;
	color: #fff; margin: 0 0 .5rem; letter-spacing: -.01em;
}
.side-cta p {
	font-family: var(--font); font-size: .85rem; line-height: 1.5;
	color: rgba(250, 247, 240, .78); margin: 0 0 .9rem;
}
.side-cta ul { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .45rem; }
.side-cta li {
	position: relative; padding-left: 1.1rem; font-family: var(--font);
	font-size: .82rem; line-height: 1.4; color: rgba(250, 247, 240, .9);
}
.side-cta li::before {
	content: ""; position: absolute; left: 0; top: .45em;
	width: 6px; height: 6px; border-radius: 50%; background: #8fae5d;
}
/* The card is near-black, so an ink-filled button would disappear into it.
   Solid olive reads clearly as the thing to click. */
.side-cta .btn, .side-cta .btn--primary {
	width: 100%; justify-content: center;
	background: var(--accent); color: #fff; border-color: var(--accent);
}
.side-cta .btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.side-cta-ask {
	display: block; width: 100%; margin-top: .5rem; padding: .5rem;
	background: none; border: 0; cursor: pointer;
	font-family: var(--font); font-size: .8rem; font-weight: 600;
	color: rgba(250, 247, 240, .72); text-decoration: underline; text-underline-offset: 2px;
}
.side-cta-ask:hover { color: #fff; }

/* --- Blog: pager and prev/next ------------------------------------------ */
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.5rem; }
.pager-info { font-family: var(--font); font-size: .88rem; color: var(--muted); }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-bottom: 1rem; }
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } }
.post-nav-link {
	display: block; padding: 1.1rem 1.3rem; background: #fff;
	border: 1px solid var(--line); border-radius: var(--radius);
	font-family: var(--font-serif); font-weight: 600; color: var(--ink); line-height: 1.35;
}
.post-nav-link:hover { border-color: var(--accent); text-decoration: none; }
.post-nav-link span {
	display: block; font-family: var(--font); font-size: .74rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .35rem;
}

/* --- Fixed mobile CTA bar ----------------------------------------------- */
.mobile-cta { display: none; }
@media (max-width: 760px) {
	.mobile-cta {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		padding: .6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
		background: rgba(250, 247, 240, .92);
		-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
		border-top: 1px solid var(--line);
	}
	.mobile-cta .btn { width: 100%; justify-content: center; }
	/* Keep the footer readable above the fixed bar */
	body { padding-bottom: 76px; }
}

/* --- AI chat widget ------------------------------------------------------ */
.chat-fab {
	position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70;
	display: inline-flex; align-items: center; gap: .55rem;
	font-family: var(--font); font-weight: 600; font-size: .95rem;
	background: var(--brand-deep); color: #fff; border: 0; cursor: pointer;
	padding: .8rem 1.25rem; border-radius: 999px; box-shadow: var(--shadow-md);
	transition: background .15s ease;
}
.chat-fab:hover { background: var(--accent); }
.chat-fab svg { width: 20px; height: 20px; flex: none; }

.chat-panel {
	position: fixed; right: 1.1rem; bottom: 5rem; z-index: 71;
	width: min(380px, calc(100vw - 2.2rem)); max-height: min(560px, calc(100vh - 7rem));
	display: none; flex-direction: column; overflow: hidden;
	background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow-md);
}
.chat-panel.open { display: flex; }
.chat-head {
	display: flex; align-items: center; justify-content: space-between; gap: .75rem;
	padding: .9rem 1.1rem; background: var(--brand-deep); color: #fff;
}
.chat-head .t { font-family: var(--font); font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.chat-head .live { width: 8px; height: 8px; border-radius: 50%; background: #8fae5d; flex: none; }
.chat-close { background: none; border: 0; color: #fff; cursor: pointer; font-size: 1.3rem; line-height: 1; padding: .2rem .4rem; }

.chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: grid; gap: .6rem; align-content: start; }
.chat-msg { font-family: var(--font); font-size: .93rem; line-height: 1.5; padding: .6rem .85rem; border-radius: 12px; max-width: 85%; white-space: pre-wrap; overflow-wrap: break-word; }
.chat-msg--bot { background: var(--bg-soft); color: var(--ink); border: 1px solid var(--line); justify-self: start; border-bottom-left-radius: 4px; }
.chat-msg--user { background: var(--brand-deep); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.chat-msg--typing { color: var(--muted); font-style: italic; }

.chat-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--line); background: var(--bg); }
.chat-form input {
	flex: 1; font-family: var(--font); font-size: 16px; padding: .6rem .8rem;
	border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}
.chat-form input:focus { outline: none; border-color: var(--accent); }
.chat-form button {
	font-family: var(--font); font-weight: 600; font-size: .9rem; cursor: pointer;
	background: var(--brand-deep); color: #fff; border: 0; border-radius: var(--radius-sm); padding: .6rem 1rem;
}
.chat-form button:hover { background: var(--accent); }
.chat-form button:disabled { opacity: .5; cursor: default; }
.chat-note { font-family: var(--font); font-size: .72rem; color: var(--muted); text-align: center; padding: 0 .75rem .6rem; margin: 0; background: var(--bg); }

@media (max-width: 760px) {
	/* sit above the fixed mobile CTA bar */
	.chat-fab { bottom: calc(76px + .75rem + env(safe-area-inset-bottom)); right: .9rem; padding: .75rem; }
	.chat-fab .label { display: none; }
	.chat-panel { right: .6rem; left: .6rem; width: auto; bottom: calc(76px + 4.4rem + env(safe-area-inset-bottom)); max-height: min(480px, calc(100vh - 10rem)); }
}

/* --- Motion (subtle, professional) -------------------------------------- */
/* Hero entrance: gentle staggered rise on load */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero .eyebrow, .hero h1, .hero .lead, .hero .btn-row, .hero .trust-line, .hero-visual { animation: rise .6s ease-out both; }
.hero h1 { animation-delay: .07s; }
.hero .lead { animation-delay: .14s; }
.hero .btn-row { animation-delay: .21s; }
.hero .trust-line { animation-delay: .28s; }
.hero-visual { animation-delay: .3s; }

/* Scroll reveal: JS adds .reveal, then .in when the element enters view */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease-out, transform .55s ease-out; }
.reveal.in { opacity: 1; transform: none; }

/* --- Utilities ---------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.stack > * + * { margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
	/* Never hide content from users who opt out of motion */
	.reveal { opacity: 1 !important; transform: none !important; }
}