/* =====================================================================
   SNAPSIDE — custom.css
   Pixel-fidelity layer on top of theme.json. All values mirror the
   original UiCore/Elementor CSS (uicore-global.css + post-150/154/611/148).
   Loaded on the front end AND in the block editor (add_editor_style).

   TABLE OF CONTENTS
   1. Self-hosted fonts (@font-face)
   2. Base / layout primitives
   3. Responsive type scale (mirrors Elementor breakpoints 1024 / 767)
   4. Eyebrow label (.eyebrow)
   5. Buttons (pill + hover)
   --- section-specific rules are appended below as sections are built ---
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. SELF-HOSTED FONTS
   Figtree + Playfair Display are shipped in /assets/fonts as variable
   woff2 (full weight range). IvyPresto Display + Automate come from the
   client's Adobe Fonts kit (loaded in functions.php), so no @font-face
   here for those two.
   --------------------------------------------------------------------- */
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/playfairdisplay-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/playfairdisplay-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------
   2. BASE / LAYOUT PRIMITIVES
   --------------------------------------------------------------------- */
:root {
	--snap-yellow: #FCFC88;
	--snap-green: #072825;
	--snap-mint: #8AFFB9;
	--snap-sage: #9FA58E;
	--snap-offwhite: #F7F9F2;
	--snap-pale: #EBF2DA;
	--snap-white: #FFFFFF;
	--snap-container: 1240px;
	--snap-radius-card: 25px;
	--snap-radius-sm: 12.5px;
	--snap-shadow-card: 8px 25px 65px -10px rgba(0, 0, 0, 0.10);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: var(--snap-white);
	color: var(--snap-green);
}

/* The original container is min(95%, 1240px), centred. Mirror that for the
   constrained content width so side gutters match at every width. */
.wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.is-layout-constrained > .wp-block:where(:not(.alignfull)) {
	max-width: min(95%, var(--snap-container));
}

/* Images never overflow their column. */
.wp-block-image img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------
   3. RESPONSIVE TYPE SCALE
   theme.json sets the desktop sizes; these media queries reproduce the
   exact UiCore reductions at the tablet (<=1024) and mobile (<=767)
   breakpoints. Values verbatim from uicore-global.css.
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
	h1, .wp-block-heading.is-style-h1 { font-size: 60px; }
	h2 { font-size: 36px; }
	h3 { font-size: 21px; }
	h4 { font-size: 18px; }
	h5, .eyebrow { font-size: 15px; }
	h6 { font-size: 13px; }
	body { font-size: 16px; }
}

@media (max-width: 767px) {
	h1, .wp-block-heading.is-style-h1 { font-size: 34px; }
	h2 { font-size: 28px; }
	h3 { font-size: 18px; }
	h4 { font-size: 16px; }
	h5, .eyebrow { font-size: 14px; }
	h6 { font-size: 12px; }
	body { font-size: 15px; }
}

@media (max-width: 480px) {
	h1, .wp-block-heading.is-style-h1 { font-size: 32px; }
	h2 { font-size: 26px; }
	body { font-size: 14px; }
}

/* ---------------------------------------------------------------------
   4. EYEBROW LABEL  (.eyebrow)
   Original: UiCore H5 — Automate, 16px, weight 700, uppercase, ls 0.1em.
   Applied to paragraphs with class "eyebrow".
   --------------------------------------------------------------------- */
.eyebrow {
	font-family: "automate", "Figtree", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--snap-green);
	margin: 0 0 12px 0;
}

/* ---------------------------------------------------------------------
   5. BUTTONS  (pill + hover)
   theme.json sets base colours/padding/radius; reinforce the pill shape,
   hover swap and tap target here so it holds across button variations.
   --------------------------------------------------------------------- */
.wp-block-button__link {
	border-radius: 100px;
	font-family: "Figtree", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	padding: 17px 40px;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--snap-sage) !important;
	color: var(--snap-yellow) !important;
}

@media (max-width: 1024px) {
	.wp-block-button__link { font-size: 16px; padding: 16px 32px; }
}
@media (max-width: 767px) {
	.wp-block-button__link { font-size: 14px; padding: 13px 35px; }
}

/* =====================================================================
   SECTION-SPECIFIC RULES  (appended during homepage/page conversion)
   ===================================================================== */

/* ---------------------------------------------------------------------
   HEADER  (parts/header.html)
   Floating white pill bar, sticky to the top. Mirrors the original
   UiCore "classic / box" sticky header (logo-h 36px, items-gap 25px,
   menu-spacing 30px, uppercase menu).
   --------------------------------------------------------------------- */
.snap-header {
	position: sticky;
	top: 0;
	z-index: 999;
	width: 100%;
	padding-top: 16px;
	padding-bottom: 16px;
	background: transparent;
	pointer-events: none;
}
.snap-header__bar {
	pointer-events: auto;
	max-width: min(95%, var(--snap-container));
	margin: 0 auto;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 14px rgba(0, 0, 0, 0.06);
	gap: 25px;
}
/* Logo */
.snap-header .snap-logo,
.snap-header .wp-block-site-logo img {
	height: 36px;
	width: auto;
}
.snap-header .wp-block-site-logo img {
	max-width: none;
}
/* Push the CTA to the far right, let the nav take the centre */
.snap-header__bar > .snap-nav { flex: 1 1 auto; }

/* Nav menu — uppercase Figtree, headline colour, sage on hover */
.snap-nav {
	font-family: "Figtree", sans-serif;
}
.snap-nav .wp-block-navigation-item__content,
.snap-nav .wp-block-navigation__submenu-icon {
	color: var(--snap-green);
}
.snap-nav .wp-block-navigation-item__content {
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}
.snap-nav .wp-block-navigation-item__content:hover,
.snap-nav .wp-block-navigation-item__content:focus {
	color: var(--snap-sage);
}
/* Header CTA — slightly tighter pill than section CTAs */
.snap-header__cta .wp-block-button__link {
	font-size: 16px;
	padding: 13px 30px;
}

@media (max-width: 1024px) {
	.snap-header__bar { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 767px) {
	.snap-header { padding-top: 10px; padding-bottom: 10px; }
	.snap-header .snap-logo,
	.snap-header .wp-block-site-logo img { height: 32px; }
	/* Original mobile header shows logo + hamburger only; CTA lives in the menu overlay. */
	.snap-header__cta { display: none; }
}

/* ---------------------------------------------------------------------
   FOOTER  (parts/footer.html)
   Dark-green band, white logo + tagline, Legal links, social, copyright.
   --------------------------------------------------------------------- */
.snap-footer { font-family: "Figtree", sans-serif; }
.snap-footer__top { align-items: flex-start; }
.snap-footer__brand { flex: 1 1 280px; }
/* Legal column: centred, wide enough that each link stays on one line */
.snap-footer__legal { flex: 0 0 auto; min-width: 220px; text-align: center; }
.snap-footer__social { flex: 0 0 auto; margin-left: auto; }

.snap-footer__logo img { height: auto; }
.snap-footer__tagline {
	color: rgba(255, 255, 255, 0.70);
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}
.snap-footer__heading {
	color: #FFFFFF;
	font-size: 20px;
	font-weight: 500;
	margin: 0 0 4px 0;
}
.snap-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.snap-footer__links li { margin: 0 0 8px 0; white-space: nowrap; }
.snap-footer__links a {
	color: rgba(255, 255, 255, 0.70);
	text-decoration: none;
	font-size: 15px;
}
.snap-footer__links a:hover { color: #FFFFFF; }

/* Social icons — white, in a single inline row */
.snap-footer__social .wp-block-social-links {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 10px;
	justify-content: flex-end;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.snap-footer__social .wp-block-social-link {
	display: inline-flex !important;
	margin: 0 !important;
	background: transparent;
}
.snap-footer__social .wp-block-social-links .wp-social-link a { color: #FFFFFF; display: flex; padding: 4px; }
.snap-footer__social .wp-block-social-link svg { fill: #FFFFFF; width: 22px; height: 22px; }

/* Top border above the copyright (full-width, faint) */
.snap-footer__divider {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
	height: 0;
	width: 100% !important;
	max-width: none !important;
	margin: 8px 0 20px 0;
	background: none !important;
	opacity: 1;
}
.snap-footer__copyright {
	font-size: 14px;
	margin: 0;
}

@media (max-width: 767px) {
	.snap-footer__top { gap: 32px !important; }
	.snap-footer__social { margin-left: 0; }
	.snap-footer__copyright { text-align: center; }
	.snap-footer__brand,
	.snap-footer__legal,
	.snap-footer__social { flex-basis: 100%; }
}

/* ---------------------------------------------------------------------
   HIGHLIGHTED WORDS  (.snap-hl)
   Original: UiCore highlighted-text — IvyPresto Display, italic, weight
   300, with a hand-drawn underline SVG (stroke-width 9). Adobe font loads
   from the Typekit kit; falls back to Playfair Display.
   --------------------------------------------------------------------- */
.snap-hl {
	font-family: "ivypresto-display", "Playfair Display", serif;
	font-style: italic;
	font-weight: 300;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 150' preserveAspectRatio='none'%3E%3Cpath d='M15.2,133.3L15.2,133.3c121.9-7.6,244-9.9,366.1-6.8c34.6,0.9,69.1,2.3,103.7,4' fill='none' stroke='%23FCFC88' stroke-width='9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 100%;
	background-size: 100% 0.32em;
	padding-bottom: 0.12em;
}

/* =====================================================================
   1. HERO  (.snap-hero)  — full-bleed dark image, light text
   ===================================================================== */
.snap-hero {
	color: #FFFFFF;
	padding-top: 120px;
	padding-bottom: 56px;
}
.snap-hero :where(h1,h2,h3,p) { color: #FFFFFF; }
/* Distribute content: title block at top, portfolio + social/results at the
   bottom, with the hero image showing through the middle (as in the original). */
.snap-hero > .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	min-height: 560px;
}
.snap-hero__foot { margin-top: auto; }
.snap-hero__title {
	font-size: 94px;
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.015em;
	margin: 0 0 20px 0;
	color: var(--snap-yellow);
}
.snap-hero :where(h1).snap-hero__title { color: var(--snap-yellow); }
.snap-hero__title .snap-hl { color: var(--snap-yellow); }
.snap-hero__sub {
	font-size: 19px;
	line-height: 1.5;
	opacity: 0.9;
	margin: 0 0 28px 0;
}

/* Portfolio strip — overlapping, slightly tilted cards */
.snap-portfolio {
	gap: 0;
	margin-top: 44px;
	align-items: center;
}
.snap-portfolio__item {
	width: 150px;
	flex: 0 0 auto;
	margin: 0 -10px;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 18px 40px -12px rgba(0,0,0,0.45);
	transition: transform 0.3s ease;
}
.snap-portfolio__item img { border-radius: 14px; display: block; aspect-ratio: 1/1; object-fit: cover; }
.snap-portfolio__item:nth-child(1) { transform: rotate(-7deg); z-index: 1; }
.snap-portfolio__item:nth-child(2) { transform: rotate(4deg); z-index: 2; }
.snap-portfolio__item:nth-child(3) { transform: rotate(-3deg); z-index: 3; }
.snap-portfolio__item:nth-child(4) { transform: rotate(5deg); z-index: 2; }
.snap-portfolio__item:nth-child(5) { transform: rotate(-5deg); z-index: 1; }
.snap-portfolio__item:hover { transform: translateY(-8px) rotate(0deg); z-index: 10; }
.snap-portfolio__item--mobile { display: none; }

.snap-hero__foot { margin-top: 40px; gap: 24px; }
.snap-hero__social .wp-block-social-link svg { fill: #FFFFFF; }
.snap-hero__results { text-align: right; margin-left: auto; }
.snap-hero__results-title {
	font-family: "ivypresto-display", "Playfair Display", serif;
	font-style: italic;
	font-weight: 300;
	font-size: 30px;
	margin: 0 0 6px 0;
}
.snap-hero__results-text { font-size: 16px; opacity: 0.9; margin: 0; }

@media (max-width: 1024px) {
	.snap-hero__title { font-size: 70px; }
	.snap-portfolio__item { width: 130px; }
}
@media (max-width: 767px) {
	.snap-hero { padding-top: 96px; }
	.snap-hero__title { font-size: 46px; }
	.snap-hero__sub { font-size: 16px; }
	.snap-portfolio { flex-wrap: wrap; gap: 10px; }
	.snap-portfolio__item { width: 44%; margin: 0; transform: none !important; }
	.snap-portfolio__item--mobile { display: block; }
	.snap-hero__foot { flex-direction: column; align-items: center; }
	.snap-hero__results { text-align: center; margin: 0; }
}

/* =====================================================================
   2. TRUSTED-BY LOGO WALL  (.snap-trusted / .snap-logowall)
   Single row, auto-scrolling to the left (seamless marquee — the 9 logos
   are duplicated in the markup, so translateX(-50%) loops perfectly).
   Greyscale, muted until hover; the scroll pauses on hover.
   ===================================================================== */
.snap-trusted { overflow: hidden; text-align: center; }
.snap-trusted__label { margin-bottom: 28px; color: var(--snap-sage); text-align: center; }
.snap-logowall {
	max-width: none !important;
	width: max-content;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-items: center;
	gap: 0 !important;
	margin: 0 !important;
	animation: snap-marquee 25s linear infinite;
	will-change: transform;
}
.snap-logowall:hover { animation-play-state: paused; }
/* Even, symmetric side margins give the gap between logos AND keep the
   translateX(-50%) marquee seamless (every item — including the first and
   last — contributes the same spacing, so the seam matches the interior).
   !important is required: WordPress's flex-layout support prints
   ".wp-container-… > * { margin:0 }" after this file and would otherwise
   reset these, collapsing the logos against each other. */
.snap-logowall__logo { flex: 0 0 auto; margin: 0 40px !important; }
.snap-logowall__logo img {
	height: 34px;
	width: auto;
	max-width: none;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.65;
	transition: opacity 0.3s ease, filter 0.3s ease;
}
.snap-logowall__logo img:hover { filter: grayscale(0); opacity: 1; }
@keyframes snap-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.snap-logowall { animation: none; }
}
@media (max-width: 767px) {
	.snap-logowall__logo { margin: 0 24px !important; }
	.snap-logowall__logo img { height: 26px; }
}

/* =====================================================================
   3. ABOUT  (.snap-about)
   ===================================================================== */
.snap-about__title { font-size: 56px; font-weight: 500; margin: 6px 0 18px; }
.snap-about__lead { font-size: 26px; font-weight: 500; line-height: 1.3; max-width: 720px; margin: 0 auto 18px; }
.snap-about__body { font-size: 18px; line-height: 1.6; max-width: 680px; margin: 0 auto; color: #3a4b48; }
@media (max-width: 767px) {
	.snap-about__title { font-size: 36px; }
	.snap-about__lead { font-size: 20px; }
}

/* =====================================================================
   4. SERVICES GRID  (.snap-services / .snap-card)
   ===================================================================== */
.snap-services .eyebrow { margin-bottom: 36px; }
.snap-services__row { gap: 28px; margin-bottom: 28px; }
.snap-card { margin: 0 0 14px 0; overflow: hidden; border-radius: 20px; }
.snap-card img {
	border-radius: 20px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	display: block;
	transition: transform 0.45s ease;
}
.snap-card:hover img { transform: scale(1.04); }
.snap-card__title { font-size: 21px; font-weight: 500; margin: 0; }
@media (max-width: 767px) {
	.snap-services__row { gap: 18px; }
}

/* =====================================================================
   5. BENEFITS  (.snap-benefits / .snap-benefit)
   Dark-green rounded panel inset in the light section. Mint line-art
   icons, yellow headings + benefit titles, light copy, left-aligned
   items. "Powerful Outcomes" in IvyPresto italic (via .snap-hl).
   ===================================================================== */
.snap-benefits__panel {
	background: #072825;
	color: #FFFFFF;
	border-radius: 32px;
}
.snap-benefits__panel :where(h2, p) { color: #FFFFFF; }
.snap-benefits__eyebrow { color: var(--snap-mint); margin-bottom: 14px; }
.snap-benefits__title { font-size: 52px; font-weight: 500; line-height: 1.1; margin: 6px 0 16px; color: var(--snap-yellow); }
.snap-benefits__title .snap-hl { color: var(--snap-yellow); }
.snap-benefits__intro { font-size: 18px; max-width: 620px; margin: 0 auto 52px; color: rgba(255,255,255,0.82); }
.snap-benefits__row { gap: 32px 40px; margin-bottom: 32px; }
.snap-benefit {
	background: transparent;
	box-shadow: none;
	padding: 0;
	text-align: left;
}
/* Icon sits flush-left: override WordPress constrained-layout auto margins,
   which would otherwise centre the fixed-width (46px) icon box. */
.snap-benefit__icon { width: 46px; height: 46px; margin: 0 auto 16px 0 !important; }
.snap-benefit__icon svg { width: 46px; height: 46px; display: block; }
.snap-benefit__title { font-size: 20px; font-weight: 600; color: var(--snap-yellow); margin: 0 0 6px; }
.snap-benefit__text { font-size: 15px; line-height: 1.5; margin: 0; color: rgba(255,255,255,0.72); }
.snap-benefits .wp-block-buttons { margin-top: 36px; }
@media (max-width: 1024px) {
	.snap-benefits__panel { padding-left: 36px !important; padding-right: 36px !important; }
}
@media (max-width: 767px) {
	.snap-benefits__title { font-size: 34px; }
	.snap-benefits__panel { padding: 44px 24px !important; border-radius: 24px; }
	.snap-benefits__row { gap: 28px; }
}

/* =====================================================================
   6. WORK GALLERY  (.snap-work)  — masonry
   ===================================================================== */
.snap-work__title { font-size: 56px; font-weight: 500; margin: 0 0 16px; }
.snap-work__intro { font-size: 18px; max-width: 640px; margin: 0 auto 44px; color: #3a4b48; }
.snap-work__gallery {
	column-count: 4;
	column-gap: 18px;
	display: block !important;
	gap: 18px; /* fallback if the gallery renders as flex on some setups */
}
.snap-work__gallery .wp-block-image {
	break-inside: avoid;
	margin: 0 0 18px 0 !important; /* keep the white gap between gallery images */
	width: 100% !important;
	display: block;
}
.snap-work__gallery .wp-block-image img {
	width: 100%;
	border-radius: 16px;
	display: block;
}
.snap-work .wp-block-buttons { margin-top: 44px; }
@media (max-width: 1024px) { .snap-work__gallery { column-count: 3; } .snap-work__title { font-size: 40px; } }
@media (max-width: 767px) { .snap-work__gallery { column-count: 2; column-gap: 12px; } .snap-work__gallery .wp-block-image { margin-bottom: 12px; } }

/* =====================================================================
   7. CAPABILITY TAGS  (.snap-tags / .snap-tag)
   ===================================================================== */
.snap-tags__wrap { gap: 14px 16px; }
.snap-tag {
	margin: 0;
	padding: 12px 26px;
	border: 1px solid rgba(7,40,37,0.18);
	border-radius: 100px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: var(--snap-green);
	background: transparent;
	transition: background 0.25s ease, color 0.25s ease;
}
.snap-tag:hover { background: var(--snap-green); color: #FFFFFF; }
@media (max-width: 767px) {
	.snap-tag { padding: 10px 18px; font-size: 14px; }
}

/* =====================================================================
   8. FAQ + CONTACT CHAT  (.snap-faq)  — gradient bg + accordion
   ===================================================================== */
.snap-faq {
	background-image: linear-gradient(180deg, var(--snap-offwhite) 50%, var(--snap-pale) 85%);
}
.snap-faq__title { font-size: 56px; font-weight: 500; margin: 6px 0 40px; }
.snap-faq__list { margin-bottom: 72px; }
.snap-faq__item {
	border-bottom: 1px solid rgba(7,40,37,0.14);
	padding: 22px 8px;
}
.snap-faq__item summary {
	list-style: none;
	cursor: pointer;
	font-size: 21px;
	font-weight: 500;
	color: var(--snap-green);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.snap-faq__item summary::-webkit-details-marker { display: none; }
.snap-faq__item summary::after {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23072825' d='M207 381L12 187c-9-9-9-25 0-34l23-23c9-9 24-9 34 0l155 154 155-154c9-9 24-9 34 0l23 23c9 9 9 25 0 34L241 381c-9 9-25 9-34 0z'/%3E%3C/svg%3E") no-repeat center;
	transition: transform 0.3s ease;
}
.snap-faq__item[open] summary::after { transform: rotate(180deg); }
.snap-faq__item p {
	margin: 16px 0 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: #3a4b48;
	max-width: 92%;
}

/* Contact chat block (bottom of FAQ section) */
.snap-chat { margin-top: 8px; }
.snap-chat .eyebrow { margin-bottom: 14px; }
.snap-chat__title { font-size: 40px; font-weight: 500; line-height: 1.15; margin: 0; }
.snap-chat__sub { font-size: 24px; font-weight: 500; margin: 14px 0 8px; }
.snap-chat__text { font-size: 18px; margin: 0 0 26px; color: #3a4b48; }
@media (max-width: 767px) {
	.snap-faq__title { font-size: 34px; }
	.snap-faq__item summary { font-size: 18px; }
	.snap-chat__title { font-size: 28px; }
}

/* =====================================================================
   9. FINAL CTA  (.snap-finalcta)  — image bg, light text
   ===================================================================== */
.snap-finalcta { color: #FFFFFF; padding-top: 120px; padding-bottom: 110px; position: relative; }
.snap-finalcta :where(p) { color: #FFFFFF; }
/* Pale-green curved shape divider at the top (Elementor "curve", #EBF2DA, 80px).
   Inverted curve: the pale band dips DOWN at the centre and is thin at the
   edges, matching the original (path verbatim from the Elementor shape). */
.snap-finalcta::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 80px;
	z-index: 4;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='%23EBF2DA' d='M1000,4.3V0H0v4.3C0.9,23.1,126.7,99.2,500,100S1000,22.7,1000,4.3z'/%3E%3C/svg%3E") no-repeat top center;
	background-size: 100% 100%;
}
.snap-finalcta__title { font-size: 60px; font-weight: 600; line-height: 1.1; margin: 0 0 14px; color: var(--snap-yellow); }
.snap-finalcta__title .snap-hl { color: var(--snap-yellow); }
.snap-finalcta__sub { font-size: 20px; opacity: 0.92; margin: 0 0 30px; }
@media (max-width: 767px) {
	.snap-finalcta__title { font-size: 34px; }
	.snap-finalcta { padding-top: 72px; padding-bottom: 72px; }
}

/* =====================================================================
   PRICING PAGE  (page-pricing.html)
   ===================================================================== */
.snap-phero { color: #FFFFFF; padding-top: 130px; padding-bottom: 80px; }
.snap-phero :where(h1,p) { color: #FFFFFF; }
.snap-phero__title { font-size: 60px; font-weight: 500; line-height: 1.1; max-width: 900px; margin: 0 auto 18px; }
.snap-phero__title .snap-hl { color: #FFFFFF; }
.snap-phero__sub { font-size: 19px; line-height: 1.55; max-width: 720px; margin: 0 auto 30px; opacity: 0.92; }
@media (max-width:767px){ .snap-phero__title{ font-size:34px; } .snap-phero{ padding-top:120px !important; } }

/* How it works */
.snap-how__title { font-size: 48px; font-weight: 500; margin: 6px 0 12px; }
.snap-how__intro { font-size: 18px; max-width: 600px; margin: 0 auto 48px; color: #3a4b48; }
.snap-how .snap-row { gap: 28px; margin-bottom: 40px; }
.snap-step { text-align: center; padding: 8px; }
.snap-step__num {
	width: 54px; height: 54px; margin: 0 auto 16px;
	display: flex; align-items: center; justify-content: center;
	background: var(--snap-yellow); color: var(--snap-green);
	border-radius: 50%; font-size: 22px; font-weight: 700; line-height: 1;
}
.snap-step__title { font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.snap-step__text { font-size: 16px; line-height: 1.5; color: #3a4b48; margin: 0; }
@media (max-width:767px){ .snap-how__title{font-size:30px;} }

/* Pricing plans */
.snap-pricing__title { font-size: 48px; font-weight: 500; line-height: 1.1; margin: 6px 0 44px; }
.snap-plans { gap: 32px; align-items: stretch; max-width: 1000px; margin-left: auto; margin-right: auto; }
.snap-plan {
	background: #FFFFFF; border: 1px solid rgba(7,40,37,0.10);
	border-radius: 24px; padding: 40px 36px; height: 100%;
	box-shadow: var(--snap-shadow-card);
}
.snap-plan--featured { background: #072825; border-color: #072825; color: #FFFFFF; }
.snap-plan--featured :where(h3,p,li,strong,em) { color: #FFFFFF; }
.snap-plan--featured .snap-plan__amount { color: var(--snap-yellow); }
.snap-plan__name { font-size: 24px; font-weight: 600; margin: 0 0 10px; }
.snap-plan__price { margin: 0 0 14px; }
.snap-plan__amount { font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.snap-plan__period { font-size: 16px; opacity: 0.7; }
.snap-plan__desc { font-size: 16px; margin: 0 0 18px; opacity: 0.85; }
.snap-plan__included { font-size: 15px; margin: 0 0 14px; }
.snap-plan__features { list-style: none; margin: 0 0 22px; padding: 0; }
.snap-plan__features li {
	position: relative; padding: 0 0 14px 30px; font-size: 15px; line-height: 1.45;
}
.snap-plan__features li::before {
	content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%238AFFB9' d='M173.9 439.4 7.5 273c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.7 432.1 72.6c10-10 26.2-10 36.2 0l36.2 36.2c10 10 10 26.2 0 36.2l-294.4 294.4c-10 10-26.2 10-36.2 0z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.snap-plan__ideal { font-size: 14px; margin: 0 0 24px; }
.snap-plan .wp-block-buttons { justify-content: stretch; }
.snap-plan .wp-block-button { width: 100%; }
.snap-plan .wp-block-button__link { display: block; text-align: center; }
@media (max-width:781px){ .snap-plans{ max-width:520px; } }
@media (max-width:767px){ .snap-pricing__title{font-size:30px;} .snap-plan__amount{font-size:44px;} }

/* What you get */
.snap-wyg__heading { font-size: 40px; font-weight: 500; line-height: 1.15; max-width: 760px; margin: 6px auto 48px; }
.snap-wyg-sec .snap-row { gap: 32px 40px; margin-bottom: 32px; }
.snap-wyg { text-align: left; }
.snap-wyg__title { font-size: 21px; font-weight: 600; margin: 0 0 8px; color: var(--snap-green); }
.snap-wyg__text { font-size: 15px; line-height: 1.5; color: #3a4b48; margin: 0; }
@media (max-width:767px){ .snap-wyg__heading{font-size:28px;} }

/* Add-ons */
.snap-addons__title { font-size: 48px; font-weight: 500; line-height: 1.1; margin: 0 0 14px; }
.snap-addons__intro { font-size: 18px; max-width: 620px; margin: 0 auto 48px; color: #3a4b48; }
.snap-addons .snap-row { gap: 28px; margin-bottom: 28px; }
.snap-addon {
	background: #FFFFFF; border: 1px solid rgba(7,40,37,0.10);
	border-radius: 20px; padding: 28px 26px; height: 100%;
	box-shadow: 0 2px 18px -12px rgba(0,0,0,0.25);
}
.snap-addon__title { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.snap-addon__text { font-size: 15px; line-height: 1.5; color: #3a4b48; margin: 0 0 14px; }
.snap-addon__tag { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--snap-sage); margin: 0; text-transform: uppercase; }
.snap-addons__note { font-size: 16px; font-style: italic; color: #3a4b48; margin: 8px 0 26px; }
@media (max-width:767px){ .snap-addons__title{font-size:30px;} }

/* =====================================================================
   CONTACT PAGE  (page-contact.html)
   ===================================================================== */
.snap-contact { color: #FFFFFF; }
.snap-contact :where(h1,h3,p):not(.snap-form__note) { color: #FFFFFF; }
.snap-contact__title { font-size: 52px; font-weight: 500; line-height: 1.1; margin: 0 0 8px; }
.snap-contact__title .snap-hl { color: #FFFFFF; }
.snap-contact__subtitle { font-size: 28px; font-weight: 500; margin: 0 0 18px; }
.snap-contact__intro { font-size: 17px; line-height: 1.6; opacity: 0.92; margin: 0; }
.snap-contact__row { gap: 48px; }
/* Form card keeps dark text on white */
.snap-contact .snap-formwrap :where(label,input,textarea) { color: var(--snap-green); }
/* Contact info on the dark hero -> light */
.snap-contact .snap-cinfo__title { color: #FFFFFF; }
.snap-contact .snap-cinfo__text,
.snap-contact .snap-cinfo__text a { color: rgba(255,255,255,0.82); }

/* Form wrapper card */
.snap-formwrap {
	background: #FFFFFF;
	border-radius: 24px;
	padding: 36px 34px;
	box-shadow: var(--snap-shadow-card);
}

/* Placeholder form + form-plugin restyle (Fluent Forms / WPForms / CF7).
   These selectors style a plugin's default output to match the original. */
.snap-form,
.snap-formwrap .fluentform .ff-el-group,
.snap-formwrap .wpforms-field { margin: 0; }
.snap-form__field,
.snap-formwrap .ff-el-group,
.snap-formwrap .wpforms-field { margin-bottom: 18px; display: flex; flex-direction: column; }
.snap-form__field label,
.snap-formwrap .ff-el-input--label label,
.snap-formwrap .wpforms-field-label {
	font-size: 14px; font-weight: 600; color: var(--snap-green); margin-bottom: 7px;
}
.snap-form input,
.snap-form textarea,
.snap-formwrap .ff-el-form-control,
.snap-formwrap .wpforms-field input,
.snap-formwrap .wpforms-field textarea {
	width: 100%;
	border: 1px solid rgba(7,40,37,0.18);
	border-radius: 12px;
	padding: 14px 16px;
	font-family: "Figtree", sans-serif;
	font-size: 15px;
	color: var(--snap-green);
	background: #FFFFFF;
	box-sizing: border-box;
}
.snap-form input::placeholder,
.snap-form textarea::placeholder { color: #9aa7a3; }
.snap-form input:focus,
.snap-form textarea:focus { outline: none; border-color: var(--snap-green); }
.snap-form textarea { resize: vertical; min-height: 110px; }
.snap-form__submit,
.snap-formwrap .ff-btn-submit,
.snap-formwrap .wpforms-submit {
	width: 100%;
	margin-top: 6px;
	background: var(--snap-yellow);
	color: var(--snap-green);
	border: none;
	border-radius: 100px;
	padding: 16px 32px;
	font-family: "Figtree", sans-serif;
	font-size: 17px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}
.snap-form__submit:hover,
.snap-formwrap .ff-btn-submit:hover,
.snap-formwrap .wpforms-submit:hover { background: var(--snap-sage); color: var(--snap-yellow); }
.snap-form__submit[disabled] { opacity: 0.85; cursor: not-allowed; }
.snap-form__note { font-size: 13px; color: var(--snap-sage); margin: 12px 0 0; text-align: center; }

/* Contact info row */
.snap-cinfo { gap: 24px; margin-top: 64px; }
.snap-cinfo__item { text-align: center; }
.snap-cinfo__title { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.snap-cinfo__text { font-size: 16px; line-height: 1.5; color: #3a4b48; margin: 0; }
.snap-cinfo__text a { color: #3a4b48; text-decoration: none; }
.snap-cinfo__text a:hover { color: var(--snap-green); }

@media (max-width: 781px) {
	.snap-contact__row { gap: 28px; }
	.snap-contact__title { font-size: 36px; }
}
@media (max-width: 767px) {
	.snap-contact { padding-top: 120px !important; }
	.snap-cinfo { margin-top: 36px; }
}

/* pricing: What-You-Get subheading */
.snap-wyg__sub { font-size: 18px; color: #3a4b48; max-width: 560px; margin: -36px auto 48px; }

/* =====================================================================
   LAYOUT FIXES
   1) No stray white padding at the very top / bottom of the page.
   2) Sticky nav that stays pinned while scrolling AND floats over the hero.
   3) Flush full-width sections (no white gaps between coloured bands).
   ===================================================================== */
/* (1) Remove root/body whitespace top & bottom. */
html, body { margin: 0; padding: 0; }
.wp-site-blocks { padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; }
.wp-site-blocks > * { margin-block: 0 !important; }

/* (2) Make the HEADER TEMPLATE PART itself sticky — its parent is the full
   page, so it stays pinned the whole way down. (Sticky on the inner pill
   only worked inside the short <header>, so it scrolled away.) Keep the
   inner sticky too so the static preview matches. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 999;
}
.snap-header { position: sticky; top: 0; z-index: 999; }

/* (3) Kill WordPress's default vertical block spacing BETWEEN the top-level
   sections only (direct children) — this must NOT touch nested block gaps
   such as the Work gallery, so we use margins, not the inherited
   --wp--style--block-gap variable. */
.snap-main > *,
.wp-block-post-content > *,
.entry-content > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Pull the first section (hero/cover) up under the floating nav. */
.snap-hero,
.snap-phero,
.snap-contact {
	margin-top: -94px !important;
	position: relative;
	z-index: 1;
}
@media (max-width: 767px) {
	.snap-hero,
	.snap-phero,
	.snap-contact { margin-top: -68px !important; }
}