/*
Theme Name: Sheffield Fencing
Template: generatepress
Description: Child theme for Sheffield Fencing (fencingsheffield.uk)
Author: Internet Assist Limited
Author URI: https://ia.uk
Version: 1.2.2
Text Domain: sheffield-fencing
*/

:root {
	--sf-green: #1d3a2a;
	--sf-green-2: #2b5a40;
	--sf-amber: #00a470;
	--sf-amber-dark: #008a5e;
	--sf-cream: #f7f3ec;
	--sf-ink: #1c1f1d;
	--sf-muted: #5b625d;
	--sf-line: #e3ddd2;
	--sf-radius: 12px;
	--sf-shadow: 0 10px 30px rgba(20, 35, 25, .12);
	--sf-max: 75rem; /* content width: 1200px at the default 16px */
}

body {
	background: #fff;
	color: var(--sf-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
}
h1, h2, h3 { color: var(--sf-green); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.2rem; }
a { color: var(--sf-green-2); }
img { height: auto; }

.sf-wrap { max-width: var(--sf-max); margin: 0 auto; padding: 0 20px; }
.sf-center { text-align: center; margin-top: 2rem; }
.sf-rounded { border-radius: var(--sf-radius); box-shadow: var(--sf-shadow); }
.sf-hide-sm { }

/* Buttons */
.sf-btn, .sf-btn:visited {
	display: inline-block; background: var(--sf-amber); color: #fff; font-weight: 700;
	padding: .8em 1.4em; border-radius: 8px; border: 2px solid var(--sf-amber);
	text-decoration: none; line-height: 1.2; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.sf-btn:hover, .sf-btn:focus { background: var(--sf-amber-dark); border-color: var(--sf-amber-dark); color: #fff; }
.sf-btn--lg { font-size: 1.1rem; padding: 1em 1.6em; }
.sf-btn--ghost, .sf-btn--ghost:visited { background: transparent; color: var(--sf-green); border-color: var(--sf-green); }
.sf-btn--ghost:hover { background: var(--sf-green); color: #fff; border-color: var(--sf-green); }
.sf-btn--light, .sf-btn--light:visited { background: #fff; color: var(--sf-green); border-color: #fff; }
.sf-btn--light:hover { background: var(--sf-cream); color: var(--sf-green); border-color: var(--sf-cream); }
.sf-btn--outline-light, .sf-btn--outline-light:visited { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); }
.sf-btn--outline-light:hover { background: #fff; color: var(--sf-green); border-color: #fff; }
.sf-link { background: none; border: 0; color: var(--sf-muted); cursor: pointer; padding: .5em 0; font-weight: 600; }

/* Top bar + header */
.sf-topbar { background: #ffd744; color: var(--sf-green); font-size: .88rem; }
.sf-topbar .sf-wrap { display: flex; justify-content: space-between; gap: 1rem; padding-top: .45rem; padding-bottom: .45rem; }
.sf-topbar a { color: var(--sf-green); font-weight: 700; text-decoration: none; }
.site-header { box-shadow: 0 1px 0 var(--sf-line); position: sticky; top: 0; z-index: 50; background: #fff; }
.inside-header { padding-top: 14px; padding-bottom: 14px; align-items: center; }
.main-title a { color: var(--sf-green); font-weight: 900; letter-spacing: -.02em; }
.site-description { color: var(--sf-muted); font-size: .85rem; }
.sf-header-cta { display: flex; gap: .6rem; margin-left: auto; order: 3; }
.sf-header-cta .sf-btn { padding: .6em 1em; font-size: .95rem; }
.main-navigation .main-nav ul li a { font-weight: 600; color: var(--sf-ink); }
.main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li.current-menu-item > a, .main-navigation .main-nav ul li.current-menu-ancestor > a, .main-navigation .main-nav ul li.current-menu-parent > a { color: var(--sf-amber-dark); }
.main-navigation ul ul { box-shadow: var(--sf-shadow); border-radius: 0 0 8px 8px; }
.main-navigation .main-nav ul ul li a { font-size: .92rem; padding-top: .7em; padding-bottom: .7em; }

/* Full-width pages */
.sf-full .site-content { display: block; padding: 0; }
.sf-full #page.grid-container, .sf-full .site-content { max-width: none; }
.sf-full .content-area, .sf-full .inside-article { padding: 0; margin: 0; }

/* Hero */
.sf-hero { position: relative; color: #fff; padding: clamp(2.5rem, 6vw, 5rem) 0; overflow: hidden; isolation: isolate; }
.sf-hero__bg { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; z-index: -2; }
.sf-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(16,34,24,.92) 0%, rgba(16,34,24,.75) 45%, rgba(16,34,24,.35) 100%); }
.sf-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.sf-hero h1 { color: #fff; margin-bottom: 1rem; }
.sf-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 800; color: var(--sf-amber); margin-bottom: .5rem; }
.sf-ticks { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.sf-ticks li { padding-left: 1.8em; position: relative; margin-bottom: .35rem; font-size: 1.05rem; }
.sf-ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--sf-amber); font-weight: 900; }
.sf-hero__btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.sf-rating { margin-top: 1.2rem; color: #f5d9a8; }
.sf-rating strong { color: #fff; }
.sf-hero__form { background: #fff; color: var(--sf-ink); border-radius: var(--sf-radius); padding: 1.6rem; box-shadow: var(--sf-shadow); }
.sf-hero__form h2 { font-size: 1.4rem; margin-bottom: .75rem; }

/* Trust strip */
.sf-trust { background: var(--sf-cream); border-bottom: 1px solid var(--sf-line); }
.sf-trust .sf-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-top: 1.3rem; padding-bottom: 1.3rem; }
.sf-trust .sf-wrap > div { display: flex; flex-direction: column; border-left: 3px solid var(--sf-amber); padding-left: .8rem; }
.sf-trust strong { color: var(--sf-green); }
.sf-trust span { font-size: .88rem; color: var(--sf-muted); }

/* Sections */
.sf-section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.sf-section--alt { background: var(--sf-cream); }
.sf-section--dark { background: var(--sf-green); color: #e4ebe5; }
.sf-section--dark h2 { color: #fff; }
.sf-section__head { max-width: 42.5rem; margin: 0 auto 2.5rem; text-align: center; }
.sf-section__head p:last-child { color: var(--sf-muted); }
.sf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }

/* Services */
.sf-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.sf-service { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s, border-color .2s; }
.sf-service:hover { box-shadow: var(--sf-shadow); border-color: var(--sf-amber); }
.sf-service img { transition: transform .4s; }
.sf-service:hover img { transform: scale(1.05); }
.sf-service img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.sf-service__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.sf-service h3 { margin: 0 0 .35rem; font-size: 1.08rem; }
.sf-service p { font-size: .93rem; color: var(--sf-muted); margin: 0 0 .8rem; }
.sf-more { margin-top: auto; color: var(--sf-amber-dark); font-weight: 700; font-size: .92rem; }

/* Features */
.sf-features { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; }
.sf-features li { padding: .6rem 0 .6rem 2rem; position: relative; border-bottom: 1px solid var(--sf-line); }
.sf-features li::before { content: "✓"; position: absolute; left: 0; top: .55rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--sf-green); color: #fff; font-size: .8rem; display: grid; place-items: center; }

/* Projects */
.sf-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.sf-project { position: relative; display: block; border-radius: var(--sf-radius); overflow: hidden; color: #fff; text-decoration: none; aspect-ratio: 4 / 3; }
.sf-project img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .4s; }
.sf-project:hover img { transform: scale(1.05); }
.sf-project__body { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1rem 1rem; background: linear-gradient(transparent, rgba(10,20,14,.85)); display: flex; flex-direction: column; gap: .3rem; }
.sf-tag { align-self: flex-start; background: var(--sf-amber); color: #fff; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .2em .6em; border-radius: 4px; }

/* Steps */
.sf-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 0; padding: 0; }
.sf-steps li { counter-increment: s; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--sf-radius); padding: 1.6rem; }
.sf-steps li::before { content: counter(s); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--sf-amber); color: #fff; font-weight: 900; margin-bottom: .9rem; }
.sf-steps strong { display: block; color: #fff; font-size: 1.15rem; margin-bottom: .3rem; }

/* Areas + FAQ */
.sf-areas { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sf-areas li { background: var(--sf-cream); border: 1px solid var(--sf-line); border-radius: 999px; padding: .3em .9em; font-size: .92rem; }
.sf-split .sf-faq { align-self: start; }
.sf-faq details { border-bottom: 1px solid var(--sf-line); padding: .9rem 0; }
.sf-faq summary { font-weight: 700; cursor: pointer; color: var(--sf-green); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.sf-faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--sf-amber); }
.sf-faq details[open] summary::after { content: "–"; }
.sf-faq details p { margin: .6rem 0 0; color: var(--sf-muted); }

/* CTA band */
.sf-cta { background: linear-gradient(120deg, var(--sf-green) 0%, var(--sf-green-2) 100%); color: #dfe8e1; padding: 3rem 0; }
.sf-cta .sf-wrap { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.sf-cta h2 { color: #fff; margin: 0 0 .3rem; }
.sf-cta p { margin: 0; }
.sf-cta__btns { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Quote form */
.sf-form fieldset { border: 0; padding: 0; margin: 0; display: none; }
.sf-form fieldset.is-active { display: block; }
.sf-form legend { font-weight: 800; color: var(--sf-green); margin-bottom: .75rem; font-size: 1.05rem; }
.sf-form__progress { display: flex; list-style: none; margin: 0 0 1rem; padding: 0; gap: .4rem; font-size: .75rem; font-weight: 700; color: var(--sf-muted); }
.sf-form__progress li { flex: 1; border-top: 4px solid var(--sf-line); padding-top: .3rem; }
.sf-form__progress li.is-active { border-color: var(--sf-amber); color: var(--sf-ink); }
.sf-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.sf-choices label { cursor: pointer; }
.sf-choices input { position: absolute; opacity: 0; }
.sf-choices label > span { display: block; border: 2px solid var(--sf-line); border-radius: 8px; padding: .55rem .7rem; font-size: .92rem; font-weight: 600; transition: border-color .15s, background .15s; }
.sf-choices input:checked + span { border-color: var(--sf-amber); background: #fdf3e6; }
.sf-step legend small { font-size: .8rem; font-weight: 400; color: var(--sf-muted); margin-left: .35rem; }
.sf-choices input:focus-visible + span { outline: 3px solid var(--sf-green-2); }
.sf-field { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .75rem; }
.sf-field input, .sf-field textarea { display: block; width: 100%; margin-top: .25rem; border: 2px solid var(--sf-line); border-radius: 8px; padding: .65rem .75rem; font-size: 16px; background: #fff; }
.sf-field input:focus, .sf-field textarea:focus { border-color: var(--sf-green-2); outline: 0; }
.sf-form__nav { display: flex; justify-content: space-between; align-items: center; }
.sf-form__small { font-size: .8rem; color: var(--sf-muted); margin: .6rem 0 0; }
.sf-form .sf-btn { width: auto; }
.sf-step:first-of-type > .sf-btn { width: 100%; }
.sf-hp { position: absolute !important; left: -9999px; }
.sf-form--done { padding: 1rem 0; }

/* Inner pages */
.page:not(.sf-full) .inside-article, .single-project .inside-article { padding-top: 2.5rem; }
.entry-content > * + h2 { margin-top: 2rem; }
.entry-content .sf-projects { margin: 1.5rem 0; }
.wp-block-gallery img { border-radius: 8px; }

/* Footer */
.sf-footer { background: #13271c; color: #b9c6bd; padding: 3.5rem 0 2rem; font-size: .95rem; }
.sf-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.sf-footer h3 { color: #fff; font-size: 1rem; margin-bottom: .8rem; }
.sf-footer a { color: #e7ede8; text-decoration: none; }
.sf-footer a:hover { color: var(--sf-amber); }
.sf-footer ul { list-style: none; margin: 0; padding: 0; }
.sf-footer li { margin-bottom: .35rem; }
.sf-footer__brand { display: block; color: #fff; font-size: 1.3rem; margin-bottom: .6rem; }
.site-info { background: #0e1d15; color: #889a8e; font-size: .85rem; }
.site-info .inside-site-info { display: block; }
.site-info .copyright-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; width: 100%; text-align: left; }
.site-info a { color: #c9d4cc; }
.site-info a:hover { color: var(--sf-amber); }

/* Mobile action bar */
.sf-mobilebar { display: none; }

@media (max-width: 1024px) {
	.sf-services { grid-template-columns: repeat(2, 1fr); }
	.sf-footer__grid { grid-template-columns: 1fr 1fr; }
	.sf-header-cta .sf-btn--ghost { display: none; }
}

@media (max-width: 768px) {
	body { font-size: 16px; padding-bottom: 64px; }
	.sf-hide-sm { display: none; }
	.sf-header-cta { display: none; }
	.sf-hero__grid, .sf-split, .sf-steps { grid-template-columns: 1fr; gap: 2rem; }
	.sf-trust .sf-wrap { grid-template-columns: 1fr 1fr; }
	.sf-projects { grid-template-columns: 1fr 1fr; gap: .75rem; }
	.sf-project strong { font-size: .9rem; }
	.sf-hero__btns .sf-btn { flex: 1; text-align: center; }
	.sf-cta .sf-wrap { flex-direction: column; align-items: flex-start; }
	.sf-mobilebar {
		display: flex; position: fixed; inset: auto 0 0 0; z-index: 100; background: var(--sf-green);
		box-shadow: 0 -4px 16px rgba(0,0,0,.15); padding-bottom: env(safe-area-inset-bottom);
	}
	.sf-mobilebar a { flex: 1; text-align: center; color: #fff; font-weight: 800; padding: 1rem .5rem; text-decoration: none; }
	.sf-mobilebar a + a { border-left: 1px solid rgba(255,255,255,.15); }
	.sf-mobilebar .sf-q { background: var(--sf-amber); }
}

@media (max-width: 480px) {
	.sf-services, .sf-projects, .sf-footer__grid { grid-template-columns: 1fr; }
	.sf-choices { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

/* Page hero */
.sf-hero--page { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.sf-hero--page::before { background: linear-gradient(100deg, rgba(16,34,24,.94) 0%, rgba(16,34,24,.8) 55%, rgba(16,34,24,.5) 100%); }
.sf-hero--page h1 { max-width: 51rem; font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: .75rem; }
.sf-hero__sub { max-width: 42.5rem; font-size: 1.12rem; color: #dbe5dd; margin-bottom: 1.5rem; }
.sf-hero--page .sf-rating { font-size: .92rem; }
.sf-crumbs { font-size: .85rem; color: #b8c7bc; margin-bottom: 1.4rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.sf-crumbs a { color: #fff; text-decoration: none; }
.sf-crumbs a:hover { color: var(--sf-amber); }
.sf-crumbs [aria-current] { color: #f5d9a8; }

/* Content + sidebar */
.sf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 23.75rem; gap: 3.5rem; align-items: start; }
.sf-aside { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 1.25rem; }
.sf-card { background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); padding: 1.6rem; box-shadow: var(--sf-shadow); }
.sf-card h2 { font-size: 1.35rem; margin: 0 0 .25rem; }
.sf-card__sub { color: var(--sf-muted); font-size: .92rem; margin: 0 0 1rem; }
.sf-card--form { border-top: 5px solid var(--sf-amber); }
.sf-card--trust { background: var(--sf-cream); box-shadow: none; }
.sf-card--trust ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.sf-card--trust li { padding: .55rem 0 .55rem 2rem; position: relative; font-size: .88rem; color: var(--sf-muted); border-bottom: 1px solid var(--sf-line); }
.sf-card--trust li strong { display: block; color: var(--sf-green); font-size: .98rem; }
.sf-card--trust li::before { content: "✓"; position: absolute; left: 0; top: .7rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--sf-amber); color: #fff; font-size: .75rem; display: grid; place-items: center; }
.sf-aside__call { display: block; text-align: center; text-decoration: none; font-size: 1.35rem; font-weight: 900; color: var(--sf-green); }
.sf-aside__call span { display: block; font-size: .8rem; font-weight: 600; color: var(--sf-muted); }
.sf-btn--block { display: block; width: 100%; text-align: center; margin-top: .6rem; }

/* Long-form content */
.sf-prose { font-size: 1.05rem; }
.sf-prose > p:first-child { font-size: 1.2rem; color: var(--sf-ink); line-height: 1.6; }
.sf-prose h2 { margin: 2.5rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--sf-line); font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.sf-prose h2::before { content: ""; display: block; width: 44px; height: 4px; background: var(--sf-amber); border-radius: 2px; margin-bottom: .9rem; }
.sf-prose ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sf-prose ul li { background: var(--sf-cream); border-radius: 8px; padding: .75rem .9rem .75rem 2.6rem; position: relative; line-height: 1.45; }
.sf-prose ul li::before { content: "✓"; position: absolute; left: .85rem; top: .8rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--sf-green); color: #fff; font-size: .72rem; display: grid; place-items: center; }
.sf-prose .sf-projects { grid-template-columns: repeat(2, 1fr); margin: 1.25rem 0 0; }

/* Projects archive */
.sf-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.sf-chips--center { justify-content: center; }
.sf-chips a { text-decoration: none; border: 2px solid var(--sf-line); border-radius: 999px; padding: .4em 1em; font-weight: 700; font-size: .9rem; color: var(--sf-ink); background: #fff; transition: border-color .15s, background .15s; }
.sf-chips a:hover { border-color: var(--sf-amber); }
.sf-chips a.is-active { background: var(--sf-green); border-color: var(--sf-green); color: #fff; }
.sf-chips a span { opacity: .6; font-weight: 600; margin-left: .2em; }
.sf-project__count { position: absolute; top: .75rem; right: .75rem; background: rgba(0,0,0,.6); color: #fff; font-size: .78rem; font-weight: 700; padding: .25em .6em; border-radius: 999px; }
.sf-projects + .navigation { margin-top: 2rem; }

/* Single project */
.sf-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.sf-gallery a { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
.sf-gallery a:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.sf-gallery img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .4s; }
.sf-gallery a:hover img { transform: scale(1.04); }
.sf-details { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 1rem 0 1.25rem; font-size: .95rem; }
.sf-details dt { color: var(--sf-muted); }
.sf-details dd { margin: 0; font-weight: 700; }

/* Lightbox */
.sf-lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.sf-lightbox::backdrop { background: rgba(8,16,11,.92); }
.sf-lightbox[open] { display: grid; place-items: center; }
.sf-lightbox img { max-width: 92vw; max-height: 88vh; width: auto; border-radius: 8px; }
.sf-lightbox button { position: fixed; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.sf-lightbox button:hover { background: var(--sf-amber); }
.sf-lightbox__close { top: 1rem; right: 1rem; }
.sf-lightbox__prev { left: 1rem; top: 50%; }
.sf-lightbox__next { right: 1rem; top: 50%; }

/* Free quote page */
.sf-quote-page { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; align-items: start; max-width: 62.5rem; }
.sf-card--wide { padding: 2.2rem; }
.sf-quote-page__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.sf-quote-page__trust li { background: #fff; border-radius: var(--sf-radius); padding: 1.1rem 1.2rem; border: 1px solid var(--sf-line); color: var(--sf-muted); font-size: .92rem; }
.sf-quote-page__trust strong { display: block; color: var(--sf-green); font-size: 1.05rem; }
.sf-quote-page__trust a { font-weight: 800; font-size: 1.15rem; color: var(--sf-green); text-decoration: none; }

/* Contact page */
.sf-contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem; align-items: start; margin-bottom: 3rem; }
.sf-contact__cards { display: grid; gap: 1rem; }
.sf-contact__card { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; align-items: center; text-decoration: none; color: var(--sf-muted); box-shadow: none; transition: border-color .15s, box-shadow .15s; }
a.sf-contact__card:hover { border-color: var(--sf-amber); box-shadow: var(--sf-shadow); }
.sf-contact__card .sf-ico { grid-row: span 2; width: 3rem; height: 3rem; border-radius: 50%; background: var(--sf-cream); display: grid; place-items: center; font-size: 1.3rem; }
.sf-contact__card strong { color: var(--sf-green); font-size: 1.05rem; }
.sf-map { width: 100%; height: 380px; border: 0; border-radius: var(--sf-radius); box-shadow: var(--sf-shadow); }

@media (max-width: 1024px) {
	.sf-layout, .sf-quote-page, .sf-contact { grid-template-columns: 1fr; }
	.sf-aside { position: static; }
}

@media (max-width: 600px) {
	.sf-prose ul, .sf-prose .sf-projects { grid-template-columns: 1fr; }
	.sf-gallery { gap: .5rem; }
	.sf-gallery a:first-child { aspect-ratio: 4 / 3; }
	.sf-hero--page .sf-rating { display: none; }
	.sf-map { height: 280px; }
}

/* Pagination */
.nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 1rem; border: 2px solid var(--sf-line); border-radius: 8px; background: #fff; color: var(--sf-ink); font-weight: 700; text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.nav-links a.page-numbers:hover { border-color: var(--sf-amber); color: var(--sf-amber-dark); }
.nav-links .page-numbers.current { background: var(--sf-green); border-color: var(--sf-green); color: #fff; }
.nav-links .page-numbers.dots { border: 0; background: none; min-width: auto; padding: 0 .25rem; }
.nav-links .prev, .nav-links .next { background: var(--sf-amber); border-color: var(--sf-amber); color: #fff; }
.nav-links a.prev:hover, .nav-links a.next:hover { background: var(--sf-amber-dark); border-color: var(--sf-amber-dark); color: #fff; }

/* ==========================================================================
   Responsive refinements
   ========================================================================== */
.sf-btn { white-space: nowrap; }

@media (max-width: 1024px) {
	.sf-hero__grid { gap: 2rem; }
	.sf-split { gap: 2.5rem; }
	.sf-projects { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.sf-section { padding: 2.75rem 0; }
	.sf-section__head { margin-bottom: 1.75rem; }
	.sf-hero__form, .sf-card { padding: 1.25rem; }
	.sf-card--wide { padding: 1.5rem; }
	/* Filter chips become one swipeable row */
	.sf-chips:not(.sf-chips--center) { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 1.5rem; padding: 0 20px .5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.sf-chips:not(.sf-chips--center)::-webkit-scrollbar { display: none; }
	.sf-chips a { flex: 0 0 auto; }
	/* Compact service cards: image left, text right */
	.sf-services { grid-template-columns: 1fr; gap: .75rem; }
	.sf-service { flex-direction: row; }
	.sf-service img { flex: 0 0 38%; width: 38%; aspect-ratio: auto; height: 0 !important; min-height: 100%; align-self: stretch; object-fit: cover; }
	.sf-service { min-height: 130px; }
	.sf-service__body { padding: .85rem 1rem; }
	.sf-service p { margin-bottom: .4rem; }
	.sf-features li { font-size: .95rem; }
	.sf-footer { padding-top: 2.5rem; }
	.site-info .copyright-bar { justify-content: center; text-align: center; }
	.sf-cta__btns, .sf-cta__btns .sf-btn { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
	body { font-size: 15.5px; }
	.sf-wrap { padding: 0 16px; }
	.sf-chips:not(.sf-chips--center) { margin: 0 -16px 1.25rem; padding: 0 16px .5rem; }
	.sf-hero__btns { flex-direction: column; }
	.sf-hero__btns .sf-btn { width: 100%; }
	.sf-hero h1 { font-size: 1.85rem; }
	.sf-hero--page h1 { font-size: 1.65rem; }
	.sf-hero__sub { font-size: 1rem; }
	.sf-eyebrow { font-size: .72rem; letter-spacing: .1em; }
	.sf-trust .sf-wrap { gap: .75rem; }
	.sf-trust strong { font-size: .9rem; }
	.sf-projects { grid-template-columns: 1fr; }
	.sf-project { aspect-ratio: 16 / 11; }
	.sf-service img { width: 36%; }
	.sf-steps li { padding: 1.25rem; }
	.sf-tag { font-size: .65rem; }
	.sf-contact__card { grid-template-columns: 2.5rem 1fr; }
	.sf-contact__card .sf-ico { width: 2.5rem; height: 2.5rem; font-size: 1.1rem; }
	.nav-links .page-numbers { min-width: 2.5rem; height: 2.5rem; padding: 0 .8rem; }
	.sf-lightbox__prev, .sf-lightbox__next { top: auto !important; bottom: 1.5rem; }
}

/* ==========================================================================
   Mobile navigation drawer
   ========================================================================== */
.sf-drawer__head, .sf-drawer__foot, .sf-backdrop, .sf-burger { display: none; }

@media (max-width: 768px) {
	/* Burger → X */
	.menu-toggle .gp-icon { display: none; }
	.menu-toggle { position: relative; z-index: 1002; }
	.sf-burger { display: inline-flex; flex-direction: column; justify-content: space-between; width: 24px; height: 17px; vertical-align: middle; }
	.sf-burger i { display: block; height: 3px; border-radius: 2px; background: var(--sf-green); transition: transform .35s cubic-bezier(.7,0,.3,1), opacity .2s, width .3s; transform-origin: center; }
	.sf-burger i:nth-child(2) { width: 70%; margin-left: auto; }
	.menu-toggle:hover .sf-burger i:nth-child(2) { width: 100%; }
	.sf-nav-open .sf-burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.sf-nav-open .sf-burger i:nth-child(2) { opacity: 0; transform: scaleX(0); }
	.sf-nav-open .sf-burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* Drawer panel */
	#site-navigation {
		display: block !important; position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001;
		width: min(88vw, 380px); height: 100vh; height: 100dvh; margin: 0;
		background: var(--sf-green); color: #fff; overflow-y: auto; overscroll-behavior: contain;
		transform: translateX(105%); visibility: hidden;
		transition: transform .45s cubic-bezier(.7,0,.2,1), visibility 0s linear .45s;
		box-shadow: -20px 0 50px rgba(0,0,0,.25);
	}
	.sf-nav-open #site-navigation { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s; }
	#site-navigation .inside-navigation { display: flex; flex-direction: column; align-items: stretch; min-height: 100%; padding: 0 1.5rem 1.5rem !important; max-width: none; }
	#site-navigation .inside-navigation > * { width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
	#site-navigation .inside-navigation > .menu-toggle { display: none !important; }

	#site-navigation .inside-navigation > .sf-drawer__head { display: flex !important; align-items: center; justify-content: space-between; padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
	.sf-drawer__brand { font-weight: 900; font-size: 1.2rem; letter-spacing: -.02em; }
	.sf-drawer__close { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .3s; padding: 0; }
	.sf-drawer__close:hover, .sf-drawer__close:focus-visible { background: var(--sf-amber); transform: rotate(90deg); }

	/* Menu list */
	#site-navigation .main-nav { flex: 1; padding: 1rem 0; }
	#site-navigation .main-nav > ul { display: block !important; background: none; }
	#site-navigation .main-nav ul li { float: none; border-bottom: 1px solid rgba(255,255,255,.08); }
	#site-navigation .main-nav ul li a { display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 1.25rem; font-weight: 800; padding: 1rem 0; line-height: 1.3; }
	#site-navigation .main-nav ul li a:hover, #site-navigation .main-nav ul li.current-menu-item > a, #site-navigation .main-nav ul li.current-menu-ancestor > a { color: var(--sf-amber); }
	#site-navigation .dropdown-menu-toggle { padding: 0; transition: transform .3s; }
	#site-navigation .sf-sub-open > a .dropdown-menu-toggle { transform: rotate(180deg); }

	/* Services accordion */
	#site-navigation .main-nav ul ul { position: static; display: block; float: none; width: auto; height: 0; overflow: hidden; opacity: 1; visibility: visible; left: auto; box-shadow: none; background: rgba(0,0,0,.18); border-radius: 10px; pointer-events: auto; transition: none; }
	#site-navigation .sf-sub-open > ul.sub-menu { height: auto; margin-bottom: .75rem; }
	#site-navigation .main-nav ul ul li { border-color: rgba(255,255,255,.06); }
	#site-navigation .main-nav ul ul li:last-child { border: 0; }
	#site-navigation .main-nav ul ul li a { font-size: 1rem; font-weight: 600; padding: .75rem 1rem; color: #dfe8e1; }

	/* Drawer footer */
	#site-navigation .inside-navigation > .sf-drawer__foot { display: block !important; padding-top: 1rem; }
	.sf-drawer__foot .sf-btn { margin-top: .6rem; padding: .9em 1em; font-size: 1.02rem; font-weight: 800; }
	.sf-drawer__foot p { margin: 1rem 0 0; text-align: center; font-size: .85rem; color: #f5d9a8; }

	/* Backdrop */
	.sf-backdrop { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(8,16,11,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s linear .4s; }
	.sf-nav-open .sf-backdrop { opacity: 1; visibility: visible; transition: opacity .4s, visibility 0s; }
	.sf-nav-open body { overflow: hidden; }
	.sf-nav-open .sf-mobilebar { opacity: 0; pointer-events: none; }
	.sf-mobilebar { transition: opacity .3s; }
	.sf-nav-open .site-header { z-index: 1001; }

	@media (prefers-reduced-motion: reduce) {
		#site-navigation, .sf-backdrop, .sf-burger i { transition: none !important; }
	}
}

/* Desktop dropdown */
@media (min-width: 769px) {
	.main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li:focus-within > a { color: var(--sf-amber-dark); }
	.main-navigation .main-nav ul ul {
		width: 300px; background: #fff; border: 1px solid var(--sf-line); border-top: 3px solid var(--sf-amber);
		border-radius: 0 0 12px 12px; padding: .5rem; box-shadow: 0 18px 40px rgba(20,35,25,.15);
		transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
	}
	.main-navigation .main-nav ul li:hover > ul, .main-navigation .main-nav ul li:focus-within > ul, .main-navigation .main-nav ul li.sfHover > ul {
		transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s;
	}
	.main-navigation .main-nav ul ul li a { font-size: .93rem; font-weight: 600; color: var(--sf-ink); padding: .65rem .85rem; border-radius: 8px; transition: background .15s, color .15s, padding-left .2s; }
	.main-navigation .main-nav ul ul li a:hover, .main-navigation .main-nav ul ul li.current-menu-item > a { background: var(--sf-cream); color: var(--sf-green); padding-left: 1.15rem; }
	.main-navigation .main-nav ul li.menu-item-has-children > a .dropdown-menu-toggle { transition: transform .25s; }
	.main-navigation .main-nav ul li.menu-item-has-children:hover > a .dropdown-menu-toggle { transform: rotate(180deg); }
}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a { color: var(--sf-amber-dark); }
@media (max-width: 768px) {
	#site-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a { color: var(--sf-amber); }
}

/* Form error + reCAPTCHA notice */
.sf-form__error { background: #fdecea; border: 1px solid #f5c2bd; color: #8a1f14; border-radius: 8px; padding: .7rem .9rem; font-size: .92rem; margin-bottom: 1rem; }
.sf-form__error a { color: inherit; font-weight: 800; }
.sf-form__recaptcha { font-size: .72rem; margin-top: .35rem; }
.sf-form__recaptcha a { color: inherit; }

/* Cookie consent */
.sf-consent { position: fixed; left: 20px; bottom: 20px; z-index: 900; max-width: 420px; background: #fff; border: 1px solid var(--sf-line); border-top: 4px solid var(--sf-amber); border-radius: var(--sf-radius); box-shadow: 0 18px 50px rgba(20,35,25,.2); padding: 1.1rem 1.2rem; font-size: .9rem; color: var(--sf-ink); }
.sf-consent[hidden] { display: none; }
.sf-consent p { margin: 0 0 .9rem; }
.sf-consent__btns { display: flex; gap: .5rem; justify-content: flex-end; }
.sf-consent .sf-btn { padding: .55em 1.2em; font-size: .9rem; }
@media (max-width: 768px) {
	.sf-consent { left: 12px; right: 12px; bottom: 76px; max-width: none; }
	.sf-consent__btns .sf-btn { flex: 1; text-align: center; }
}

/* Google reviews */
.sf-reviews__summary { display: inline-flex; align-items: center; gap: .6rem; margin-top: .75rem; background: #fff; border: 1px solid var(--sf-line); border-radius: 999px; padding: .5rem 1.1rem; box-shadow: 0 4px 14px rgba(20,35,25,.06); }
.sf-reviews__summary strong { font-size: 1.35rem; color: var(--sf-ink); }
.sf-reviews__summary span:last-child { color: var(--sf-muted); font-size: .92rem; }
.sf-g { width: 22px; height: 22px; flex: none; }
.sf-stars { color: #fbbc04; letter-spacing: .08em; font-size: 1.05rem; line-height: 1; }
.sf-stars__off { color: #dadce0; }
.sf-reviews__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; align-items: start; }
.sf-review { margin: 0; background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); padding: 1.3rem 1.4rem; box-shadow: 0 6px 20px rgba(20,35,25,.06); display: flex; flex-direction: column; gap: .6rem; }
.sf-review__head { display: flex; align-items: center; gap: .75rem; }
.sf-review__head .sf-g { margin-left: auto; width: 20px; height: 20px; }
.sf-review__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.sf-review__avatar--initial { display: grid; place-items: center; background: var(--sf-green); color: #fff; font-weight: 800; font-size: 1.1rem; }
.sf-review figcaption { display: flex; flex-direction: column; font-weight: 800; color: var(--sf-ink); line-height: 1.3; min-width: 0; }
.sf-review figcaption a { color: inherit; text-decoration: none; }
.sf-review figcaption a:hover { color: var(--sf-amber-dark); }
.sf-review figcaption span { font-weight: 500; font-size: .82rem; color: var(--sf-muted); }
.sf-review__text { margin: 0; padding: 0; border: 0; font-style: normal; font-size: .96rem; color: var(--sf-ink); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.sf-review__text p { margin: 0; }
.sf-review.is-open .sf-review__text { -webkit-line-clamp: unset; display: block; }
.sf-review__more { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--sf-amber-dark); font-weight: 700; cursor: pointer; font-size: .9rem; }
.sf-reviews__links { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.sf-reviews__credit { text-align: center; font-size: .75rem; color: var(--sf-muted); margin: 1rem 0 0; }
@media (max-width: 480px) {
	.sf-reviews__grid { grid-template-columns: 1fr; }
	.sf-reviews__links .sf-btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   WhatsApp widget
   ========================================================================== */
.sf-wa { --wa: #25d366; --wa-dark: #128c7e; position: fixed; right: 24px; bottom: 24px; z-index: 950; font-size: 15px; }
.sf-wa__btn { position: relative; width: 62px; height: 62px; border-radius: 50%; border: 0; padding: 0; background: var(--wa); color: #fff; cursor: pointer; box-shadow: 0 10px 28px rgba(18,140,126,.45); display: grid; place-items: center; transition: background .2s, box-shadow .2s; }
.sf-wa__btn:hover, .sf-wa__btn:focus-visible { background: var(--wa-dark); box-shadow: 0 12px 34px rgba(18,140,126,.6); }
.sf-wa__btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--wa); z-index: -1; animation: sfWaPulse 2.4s ease-out infinite; }
.sf-wa.is-open .sf-wa__btn::before { animation: none; opacity: 0; }
@keyframes sfWaPulse { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
.sf-wa__ico { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .25s, rotate .35s cubic-bezier(.4,0,.2,1), scale .35s cubic-bezier(.4,0,.2,1); }
.sf-wa__ico svg { width: 34px; height: 34px; }
.sf-wa__ico--x { font-size: 2.1rem; line-height: 1; opacity: 0; rotate: -90deg; scale: .5; }
.sf-wa.is-open .sf-wa__ico--wa { opacity: 0; rotate: 90deg; scale: .5; }
.sf-wa.is-open .sf-wa__ico--x { opacity: 1; rotate: 0deg; scale: 1; }

/* Nudge tooltip */
.sf-wa__tip { position: absolute; right: 76px; bottom: 14px; white-space: nowrap; background: #fff; color: var(--sf-ink); font-weight: 700; font-size: .88rem; padding: .55rem .9rem; border-radius: 10px; box-shadow: 0 8px 24px rgba(20,35,25,.18); opacity: 0; translate: 8px 0; pointer-events: none; transition: opacity .3s, translate .3s; }
.sf-wa__tip::after { content: ""; position: absolute; right: -6px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right: 0; border-left-color: #fff; }
.sf-wa.show-tip:not(.is-open) .sf-wa__tip, .sf-wa:not(.is-open):not(.tip-seen) .sf-wa__btn:hover ~ .sf-wa__tip { opacity: 1; translate: 0 0; }

/* Panel */
.sf-wa__panel { position: absolute; right: 0; bottom: 78px; width: 350px; max-width: calc(100vw - 48px); background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(10,25,15,.28); transform-origin: bottom right; opacity: 0; visibility: hidden; scale: .85; translate: 0 12px; transition: opacity .25s, scale .3s cubic-bezier(.2,.8,.2,1), translate .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s; }
.sf-wa.is-open .sf-wa__panel { opacity: 1; visibility: visible; scale: 1; translate: 0 0; transition: opacity .25s, scale .35s cubic-bezier(.2,.8,.2,1), translate .35s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.sf-wa__head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; background: var(--wa-dark); color: #fff; }
.sf-wa__head strong { display: block; font-size: 1.02rem; }
.sf-wa__head span { font-size: .8rem; opacity: .85; }
.sf-wa__avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; flex: none; }
.sf-wa__avatar svg { width: 24px; height: 24px; }
.sf-wa__close { margin-left: auto; background: rgba(255,255,255,.14); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0; transition: background .2s; }
.sf-wa__close:hover { background: rgba(255,255,255,.28); }
.sf-wa__body { padding: 1rem 1.1rem .5rem; background: #ece5dd; background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 14px 14px; }
.sf-wa__bubble { position: relative; background: #fff; border-radius: 0 10px 10px 10px; padding: .7rem .85rem; font-size: .92rem; line-height: 1.45; color: var(--sf-ink); box-shadow: 0 1px 1px rgba(0,0,0,.08); margin-bottom: .9rem; }
.sf-wa__bubble::before { content: ""; position: absolute; left: -7px; top: 0; border: 7px solid transparent; border-top-color: #fff; border-right-color: #fff; }
.sf-wa__label { margin: 0 0 .45rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #54656f; }
.sf-wa__opt { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #d9e1dc; border-radius: 10px; padding: .6rem .85rem; margin-bottom: .45rem; color: var(--sf-ink); font-weight: 600; font-size: .92rem; text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.sf-wa__opt:hover, .sf-wa__opt:focus-visible { border-color: var(--wa); background: #f0fdf4; color: var(--wa-dark); }
.sf-wa__opt span { color: var(--wa-dark); font-weight: 800; }
.sf-wa__start { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .75rem 1.1rem 1.1rem; background: var(--wa); color: #fff; font-weight: 800; text-decoration: none; border-radius: 999px; padding: .75rem 1rem; transition: background .2s; }
.sf-wa__start:hover { background: var(--wa-dark); color: #fff; }
.sf-wa__start svg { width: 20px; height: 20px; }

/* Phones use the WhatsApp button in the bottom bar instead. */
/* (phones: see floating widget rules below) */
@media (prefers-reduced-motion: reduce) {
	.sf-wa__btn::before { animation: none; }
	.sf-wa__panel, .sf-wa__ico, .sf-wa__tip { transition: none; }
}

/* Back to top */
.sf-top { position: fixed; left: 30px; bottom: 30px; z-index: 940; width: 50px; height: 50px; border-radius: 50%; border: 0; padding: 0; background: #fff; color: var(--sf-green); cursor: pointer; box-shadow: 0 8px 24px rgba(20,35,25,.18); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .3s, translate .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s, background .2s, color .2s; }
.sf-top.is-visible { opacity: 1; visibility: visible; transition: opacity .3s, translate .3s cubic-bezier(.2,.8,.2,1), visibility 0s, background .2s, color .2s; }
.sf-top:hover, .sf-top:focus-visible { background: var(--sf-green); color: #fff; }
.sf-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.sf-top__ring circle { fill: none; stroke-width: 3; }
.sf-top__ring circle:first-child { stroke: var(--sf-line); }
.sf-top__progress { stroke: var(--sf-amber); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .1s linear; }
.sf-top__arrow { width: 20px; height: 20px; transition: translate .2s; }
.sf-top:hover .sf-top__arrow { translate: 0 -2px; }
/* Keep clear of the cookie banner while it is showing. */
body:has(.sf-consent:not([hidden])) .sf-top { opacity: 0; visibility: hidden; }
@media (max-width: 768px) {
	.sf-top { left: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); width: 46px; height: 46px; }
	.sf-nav-open .sf-top { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .sf-top { transition: opacity .2s, visibility 0s; translate: none; } }

/* ==========================================================================
   Homepage hero: fit hero + trust strip in the first screen
   ========================================================================== */
.sf-quote-mobile { display: none; }
.sf-hero__grid { position: relative; }

/* Animated scroll indicator */
.sf-scroll { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; color: rgba(255,255,255,.85); text-decoration: none; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; z-index: 2; transition: color .2s; }
.sf-scroll:hover, .sf-scroll:focus-visible { color: var(--sf-amber); }
.sf-scroll__mouse { width: 24px; height: 38px; border: 2px solid currentColor; border-radius: 14px; display: flex; justify-content: center; padding-top: 6px; }
.sf-scroll__wheel { width: 4px; height: 8px; border-radius: 2px; background: currentColor; animation: sfWheel 1.8s cubic-bezier(.6,0,.4,1) infinite; }
.sf-scroll__label { animation: sfScrollBob 1.8s ease-in-out infinite; }
@keyframes sfWheel { 0% { translate: 0 0; opacity: 1; } 70% { translate: 0 12px; opacity: 0; } 71% { translate: 0 0; opacity: 0; } 100% { opacity: 1; } }
@keyframes sfScrollBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }
@media (prefers-reduced-motion: reduce) { .sf-scroll__wheel, .sf-scroll__label { animation: none; } }

@media (min-width: 769px) {
	.sf-hero:not(.sf-hero--page) { padding: clamp(1.5rem, 3.5vh, 3rem) 0 clamp(3.75rem, 7vh, 5rem); }
	.sf-hero:not(.sf-hero--page) .sf-hero__grid { gap: 2.5rem; }
	.sf-hero:not(.sf-hero--page) h1 { font-size: clamp(1.9rem, min(4.2vw, 5.6vh), 3.2rem); margin-bottom: .75rem; }
	.sf-hero:not(.sf-hero--page) .sf-eyebrow { margin-bottom: .35rem; }
	.sf-hero:not(.sf-hero--page) .sf-ticks { margin-bottom: 1.1rem; }
	.sf-hero:not(.sf-hero--page) .sf-ticks li { margin-bottom: .2rem; font-size: 1rem; }
	.sf-hero:not(.sf-hero--page) .sf-btn--lg { padding: .85em 1.5em; font-size: 1.05rem; }
	.sf-hero:not(.sf-hero--page) .sf-rating { margin: .9rem 0 0; }
	.sf-hero__form { padding: 1.2rem 1.35rem; }
	.sf-hero__form h2 { font-size: 1.22rem; margin-bottom: .5rem; }
	.sf-hero__form .sf-form__progress { margin-bottom: .6rem; }
	.sf-hero__form legend { margin-bottom: .5rem; font-size: 1rem; }
	.sf-hero__form .sf-choices { gap: .4rem; margin-bottom: .75rem; }
	.sf-hero__form .sf-choices label > span { padding: .45rem .65rem; font-size: .87rem; line-height: 1.3; }
	.sf-hero__form .sf-btn { padding: .7em 1.2em; }
	.sf-hero__form .sf-field { margin-bottom: .55rem; }
	.sf-hero__form .sf-field input, .sf-hero__form .sf-field textarea { padding: .5rem .7rem; }
	.sf-trust .sf-wrap { padding-top: 1.1rem; padding-bottom: 1.1rem; }
}

@media (max-width: 768px) {
	.sf-scroll { display: none; }
	.sf-hero:not(.sf-hero--page) { padding: 1.5rem 0 1.75rem; }
	.sf-hero:not(.sf-hero--page) .sf-hero__form { display: none; }
	.sf-hero:not(.sf-hero--page) h1 { font-size: 1.75rem; margin-bottom: .6rem; }
	.sf-hero:not(.sf-hero--page) .sf-ticks { margin-bottom: 1rem; }
	.sf-hero:not(.sf-hero--page) .sf-ticks li { font-size: .95rem; margin-bottom: .15rem; }
	.sf-hero:not(.sf-hero--page) .sf-hero__btns { gap: .6rem; }
	.sf-hero:not(.sf-hero--page) .sf-btn--lg { padding: .8em 1em; }
	.sf-hero:not(.sf-hero--page) .sf-rating { margin-top: .8rem; font-size: .9rem; }
	/* Compact trust strip: titles only, 2 × 2 */
	.sf-trust .sf-wrap { gap: .6rem .75rem; padding-top: .9rem; padding-bottom: .9rem; }
	.sf-trust .sf-wrap > div { padding-left: .6rem; justify-content: center; }
	.sf-trust strong { font-size: .86rem; line-height: 1.25; }
	.sf-trust span { display: none; }
	.sf-quote-mobile { display: block; padding: 1.75rem 0 .5rem; scroll-margin-top: 90px; }
}
@media (max-width: 768px) and (max-height: 760px), (max-width: 380px) {
	.sf-hero:not(.sf-hero--page) { padding: 1.1rem 0 1.25rem; }
	.sf-hero:not(.sf-hero--page) h1 { font-size: 1.55rem; }
	.sf-hero:not(.sf-hero--page) .sf-ticks li { font-size: .9rem; margin-bottom: 0; }
	.sf-hero:not(.sf-hero--page) .sf-btn--lg { padding: .7em 1em; }
	.sf-hero:not(.sf-hero--page) .sf-rating { margin-top: .6rem; }
	/* The Call button is already in the sticky bar and top bar. */
	.sf-hero:not(.sf-hero--page) .sf-hero__btns .sf-btn--outline-light { display: none; }
}
/* In-page links stop below the sticky header, and glide there. */
[id] { scroll-margin-top: 100px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Hero fills the first screen exactly (height set by JS; CSS fallback). */
.sf-hero:not(.sf-hero--page) { min-height: var(--sf-fold, calc(100svh - 220px)); display: flex; align-items: center; }
.sf-hero:not(.sf-hero--page) > .sf-wrap { width: 100%; }

/* Phones: floating WhatsApp widget above the bottom bar (bar = Call + Free Quote). */
@media (max-width: 768px) {
	.sf-wa { display: block; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); }
	.sf-wa__btn { width: 54px; height: 54px; }
	.sf-wa__ico svg { width: 30px; height: 30px; }
	.sf-wa__tip { right: 66px; bottom: 10px; }
	.sf-wa__panel { position: fixed; left: 12px; right: 12px; width: auto; max-width: none; bottom: calc(142px + env(safe-area-inset-bottom)); max-height: calc(100svh - 170px); overflow-y: auto; transform-origin: bottom right; }
	.sf-nav-open .sf-wa { opacity: 0; visibility: hidden; }
	.sf-wa.is-open ~ .sf-top, body:has(.sf-wa.is-open) .sf-top { opacity: 0; visibility: hidden; }
}

/* Social links */
.sf-social { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; }
.sf-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: background .2s, color .2s, border-color .2s; }
.sf-social svg { width: 20px; height: 20px; }
.sf-social--footer { margin-top: 1rem; }
.sf-social--footer a, .sf-social--drawer a { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); }
.sf-social--footer a:hover, .sf-social--drawer a:hover, .sf-social--footer a:focus-visible, .sf-social--drawer a:focus-visible { background: var(--sf-amber); border-color: var(--sf-amber); color: #fff; }
.sf-social--drawer { justify-content: center; margin-top: 1rem; }
.sf-social--contact { margin-top: .4rem; }
.sf-social--contact a { width: 36px; height: 36px; background: var(--sf-cream); color: var(--sf-green); border: 1px solid var(--sf-line); }
.sf-social--contact a:hover { background: var(--sf-green); color: #fff; border-color: var(--sf-green); }
#site-navigation .sf-social--drawer { display: flex !important; }
.sf-social__soon { position: relative; cursor: pointer; }
.sf-social__tip { position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 4px; white-space: nowrap; background: var(--sf-ink); color: #fff; font-size: .78rem; font-weight: 700; padding: .3rem .6rem; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s; z-index: 5; }
.sf-social__soon.is-tip .sf-social__tip { opacity: 1; translate: -50% 0; }
.sf-social__soon.sf-has-ripple { overflow: visible; } /* the tap ripple would clip the bubble */
.sf-social__soon .sf-ripple { display: none; }

/* ==========================================================================
   Press feedback
   ========================================================================== */
/* Ripple */
.sf-has-ripple { position: relative; overflow: hidden; isolation: isolate; }
.sf-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .28; scale: 0; z-index: -1; animation: sfRipple .55s cubic-bezier(.2,.6,.3,1) forwards; }
.sf-btn .sf-ripple, .sf-mobilebar a .sf-ripple, .sf-wa__start .sf-ripple, .sf-wa__btn .sf-ripple, .nav-links .current .sf-ripple { background: #fff; opacity: .35; }
@keyframes sfRipple { to { scale: 1; opacity: 0; } }

/* Press-in: a quick shrink while held (overrides GSAP's inline scale reset) */
.sf-btn, .sf-choices label > span, .sf-chips a, .sf-mobilebar a, .sf-wa__opt, .sf-wa__start, .sf-top, .sf-drawer__close,
.sf-social a, .sf-service, .sf-project, .sf-contact__card, .nav-links .page-numbers, .menu-toggle, .sf-wa__btn, .sf-faq summary {
	-webkit-tap-highlight-color: transparent;
}
.sf-btn:active, .sf-chips a:active, .sf-wa__opt:active, .sf-wa__start:active, .sf-social a:active, .nav-links .page-numbers:active,
.sf-drawer__close:active, .menu-toggle:active, .sf-contact__card[href]:active { scale: .96 !important; transition-duration: .08s; }
.sf-mobilebar a:active { scale: .97 !important; filter: brightness(.92); }
.sf-service:active, .sf-project:active { scale: .985 !important; }
.sf-top:active, .sf-wa__btn:active { scale: .9 !important; }
.sf-choices label:active > span { scale: .97; }
.sf-faq summary:active { opacity: .7; }
.sf-btn, .sf-chips a, .sf-wa__opt, .sf-wa__start, .sf-social a, .nav-links .page-numbers, .sf-mobilebar a, .sf-service, .sf-project,
.sf-top, .sf-wa__btn, .sf-choices label > span, .sf-contact__card { transition-property: background, border-color, color, box-shadow, filter, scale; transition-duration: .2s; }

/* Navigation links: amber press flash */
.main-navigation .main-nav ul li a:active { color: var(--sf-amber) !important; }
#site-navigation .main-nav ul li a:active { background: rgba(255,255,255,.06); }

/* Quote option "pop" when selected */
.sf-choices input:checked + span { animation: sfPop .32s cubic-bezier(.3,1.6,.5,1); }
.sf-choices label > span { position: relative; padding-right: 1.9rem !important; }
.sf-choices input:checked + span::after { content: "✓"; position: absolute; right: .6rem; top: 50%; translate: 0 -50%; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--sf-amber); color: #fff; font-size: .7rem; font-weight: 900; display: grid; place-items: center; line-height: 1; }
@keyframes sfPop { 0% { scale: .94; } 60% { scale: 1.03; } 100% { scale: 1; } }

/* Keyboard users get a clear focus ring instead */
.sf-btn:focus-visible, .sf-chips a:focus-visible, .sf-wa__opt:focus-visible, .nav-links .page-numbers:focus-visible, .sf-social a:focus-visible,
.sf-service:focus-visible, .sf-project:focus-visible, .sf-mobilebar a:focus-visible { outline: 3px solid var(--sf-amber); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.sf-choices input:checked + span { animation: none; }
	[class*="sf-"]:active { scale: none !important; }
}

/* Pop on release (same bounce as the quote options) */
.sf-popping { animation: sfPop .34s cubic-bezier(.3,1.6,.5,1); }
.sf-service.sf-popping, .sf-project.sf-popping { animation-name: sfPopSoft; }
@keyframes sfPopSoft { 0% { scale: .985; } 60% { scale: 1.012; } 100% { scale: 1; } }

/* Back-to-top pops into view */
.sf-top.is-visible { animation: sfTopIn .45s cubic-bezier(.3,1.6,.5,1); }
.sf-top.is-visible.sf-popping { animation: sfPop .34s cubic-bezier(.3,1.6,.5,1); }
@keyframes sfTopIn { 0% { scale: .3; } 65% { scale: 1.12; } 100% { scale: 1; } }

@media (prefers-reduced-motion: reduce) {
	.sf-popping, .sf-top.is-visible { animation: none; }
}

/* Top progress bar */
.sf-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; pointer-events: none; }
.sf-progress__bar { display: block; height: 100%; background: linear-gradient(90deg, var(--sf-amber) 0%, #f0b45a 100%); transform: scaleX(0); transform-origin: left center; box-shadow: 0 0 8px rgba(0,164,112,.6); border-radius: 0 2px 2px 0; }
.sf-progress.is-loading { height: 3px; }
.sf-progress.is-loading .sf-progress__bar { transition: transform 2.5s cubic-bezier(.1,.7,.2,1); }
.sf-progress.is-loading .sf-progress__bar::after { content: ""; position: absolute; right: 0; top: -2px; width: 80px; height: 7px; border-radius: 50%; background: rgba(240,180,90,.7); filter: blur(4px); }
.sf-progress__bar { position: relative; }
.sf-nav-open .sf-progress { opacity: 0; }
body.admin-bar .sf-progress { top: 32px; }
@media (max-width: 782px) { body.admin-bar .sf-progress { top: 46px; } }
@media (prefers-reduced-motion: reduce) { .sf-progress.is-loading .sf-progress__bar { transition-duration: .2s; } }
.sf-choices__hint { margin: -.4rem 0 .75rem; color: #b42318; font-size: .85rem; font-weight: 700; }
.sf-choices.sf-shake { animation: sfShake .4s cubic-bezier(.36,.07,.19,.97); }
@keyframes sfShake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
@media (prefers-reduced-motion: reduce) { .sf-choices.sf-shake { animation: none; } }

/* ==========================================================================
   Wide screens: full-width layout from 1600px
   ========================================================================== */
/* Navbar is full width at every size (logo left, buttons right). */
.site-header .inside-header { max-width: none; }
.grid-container:not(#page):not(.inside-header) { max-width: var(--sf-max); }

@media (min-width: 1600px) {
	/* Type and spacing scale gently: 16px at 1600px → 21px at ~2850px and wider. */
	html { font-size: clamp(16px, calc(16px + (100vw - 1600px) * .004), 21px); }
}

/* Full-width layout on laptops and desktops. */
@media (min-width: 1025px) {
	:root { --sf-gutter: clamp(2.5rem, 4vw, 7rem); --sf-max: none; }

	/* Everything spans the screen with the same side gutter. */
	.sf-wrap, .sf-topbar .sf-wrap, .site-header .inside-header, .site-info .inside-site-info { max-width: none; padding-left: var(--sf-gutter); padding-right: var(--sf-gutter); }

	/* Hero: text left, form right, using the full width. */
	.sf-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(24rem, 34rem); gap: 4rem; }
	.sf-hero h1 { max-width: 46rem; }
	.sf-hero--page h1, .sf-hero__sub { max-width: 56rem; }

	/* Grids gain columns instead of cards growing huge. */
	.sf-services { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
	.sf-projects { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
	.sf-reviews__grid { grid-template-columns: repeat(3, 1fr); }
	.sf-steps { gap: 2rem; }
	.sf-trust .sf-wrap { grid-template-columns: repeat(4, auto); justify-content: space-between; }
	.sf-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 4rem; }

	/* Split sections: image and text share the width evenly. */
	.sf-split { gap: 5rem; }

	/* Service pages: content fills the width; paragraphs keep a readable line length. */
	.sf-layout { grid-template-columns: minmax(0, 1fr) 23.75rem; gap: clamp(3rem, 4vw, 5rem); }
	.sf-prose > p { max-width: 75ch; }
	.sf-prose ul { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
	.sf-prose .sf-projects { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
	.sf-section__head { max-width: 60rem; }
	.sf-quote-page { max-width: 70rem; }
}

@media (min-width: 2200px) {
	.sf-layout:has(.sf-gallery) { grid-template-columns: minmax(0, 1fr) 25rem; }
	.sf-gallery { grid-template-columns: repeat(3, 1fr); }
}
/* Tablets and phones: header edges match the 20px content gutter. */
@media (max-width: 1024px) {
	.site-header .inside-header { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 480px) {
	.site-header .inside-header { padding-left: 16px; padding-right: 16px; }
}

/* Video */
.sf-split--video { grid-template-columns: .9fr 1.1fr; }
.sf-ticks--dark li { color: var(--sf-ink); }
.sf-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--sf-radius); overflow: hidden; background: #0d1a12; box-shadow: 0 24px 60px rgba(20,35,25,.25); }
.sf-video__poster { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transition: scale .6s; }
.sf-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,15,.15), rgba(10,22,15,.65)); pointer-events: none; }
.sf-video__play { position: absolute; inset: 0; z-index: 2; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; color: #fff; font-weight: 800; font-size: 1rem; }
.sf-video__btn { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--sf-amber); display: grid; place-items: center; box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: background .2s, scale .25s cubic-bezier(.3,1.6,.5,1); }
.sf-video__btn::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); animation: sfVidRing 2s ease-out infinite; }
@keyframes sfVidRing { 0% { scale: .85; opacity: 1; } 100% { scale: 1.35; opacity: 0; } }
.sf-video__btn svg { width: 34px; height: 34px; margin-left: 4px; }
.sf-video__label { text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.sf-video__play:hover .sf-video__btn, .sf-video__play:focus-visible .sf-video__btn { background: var(--sf-amber-dark); scale: 1.08; }
.sf-video:hover .sf-video__poster { scale: 1.04; }
.sf-video__play:focus-visible { outline: 3px solid var(--sf-amber); outline-offset: -6px; border-radius: var(--sf-radius); }
.sf-video iframe, .sf-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.sf-video video { z-index: 1; object-fit: cover; background: #0d1a12; }
.sf-video.is-playing video { z-index: 3; }
.sf-video.is-playing::after, .sf-video.is-playing .sf-video__play { display: none; }
.sf-prose .sf-video { margin: 1.5rem 0; }
@media (max-width: 768px) {
	.sf-split--video { grid-template-columns: 1fr; }
	.sf-split--video > .sf-video { order: -1; }
	.sf-video__btn { width: 68px; height: 68px; }
}
@media (prefers-reduced-motion: reduce) { .sf-video__btn::before { animation: none; } }

/* ==========================================================================
   Text on the accent colour: white, with a darker hover
   ========================================================================== */
:root { --sf-on-amber: #fff; --sf-amber-hover: #008a5e; }
.sf-btn, .sf-btn:visited { color: var(--sf-on-amber); }
.sf-btn:hover, .sf-btn:focus { background: var(--sf-amber-hover); border-color: var(--sf-amber-hover); color: var(--sf-on-amber); }
.sf-mobilebar .sf-q, .sf-mobilebar .sf-q:visited { color: var(--sf-on-amber); }
.sf-tag { color: var(--sf-on-amber); }
.sf-steps li::before { color: var(--sf-on-amber); }
.sf-card--trust li::before, .sf-choices input:checked + span::after { color: var(--sf-on-amber); }
.sf-video__btn { color: var(--sf-on-amber); }
.sf-video__play:hover .sf-video__btn, .sf-video__play:focus-visible .sf-video__btn { background: var(--sf-amber-hover); }
.sf-drawer__close:hover, .sf-drawer__close:focus-visible, .sf-lightbox button:hover { color: var(--sf-on-amber); }
.sf-social--footer a:hover, .sf-social--drawer a:hover, .sf-social--footer a:focus-visible, .sf-social--drawer a:focus-visible { color: var(--sf-on-amber); }
.nav-links .prev, .nav-links .next { color: var(--sf-on-amber); }
.nav-links a.prev:hover, .nav-links a.next:hover { background: var(--sf-amber-hover); border-color: var(--sf-amber-hover); color: var(--sf-on-amber); }
.sf-btn .sf-ripple { background: var(--sf-on-amber); opacity: .18; }
/* Buttons on dark/light backgrounds keep their own colours */
.sf-btn--ghost, .sf-btn--ghost:visited { color: var(--sf-green); }
.sf-btn--ghost:hover { background: var(--sf-green); border-color: var(--sf-green); color: #fff; }
.sf-btn--light, .sf-btn--light:visited, .sf-btn--light:hover { color: var(--sf-green); }
.sf-btn--outline-light, .sf-btn--outline-light:visited { color: #fff; }
.sf-btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--sf-green); }
.sf-btn--outline-light .sf-ripple, .sf-btn--ghost .sf-ripple { background: currentColor; }

/* ==========================================================================
   Welcome pop-up
   ========================================================================== */
.sf-welcome { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 1rem; background: rgba(8,16,11,0); transition: background .35s; }
.sf-welcome[hidden] { display: none; }
.sf-welcome.is-open { background: rgba(8,16,11,.55); }
.sf-welcome__card { position: relative; width: min(100%, 30rem); background: #fff; border-radius: 18px; padding: 2rem 2rem 1.4rem; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.35); border-top: 5px solid var(--sf-amber); opacity: 0; scale: .9; translate: 0 20px; transition: opacity .3s, scale .4s cubic-bezier(.3,1.4,.5,1), translate .4s cubic-bezier(.3,1.4,.5,1); }
.sf-welcome.is-open .sf-welcome__card { opacity: 1; scale: 1; translate: 0 0; }
.sf-welcome__close { position: absolute; top: .75rem; right: .75rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0; background: var(--sf-cream); color: var(--sf-ink); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0; transition: background .2s, rotate .3s; }
.sf-welcome__close:hover, .sf-welcome__close:focus-visible { background: var(--sf-amber); color: var(--sf-on-amber); rotate: 90deg; }
.sf-welcome__fence { display: flex; justify-content: center; gap: 6px; height: 44px; align-items: flex-end; margin: 0 auto 1rem; position: relative; width: max-content; }
.sf-welcome__fence i { width: 10px; height: 100%; background: var(--sf-amber); clip-path: polygon(50% 0, 100% 22%, 100% 100%, 0 100%, 0 22%); }
.sf-welcome__fence::before, .sf-welcome__fence::after { content: ""; position: absolute; left: -6px; right: -6px; height: 4px; background: var(--sf-green); border-radius: 2px; }
.sf-welcome__fence::before { top: 16px; } .sf-welcome__fence::after { top: 30px; }
.sf-welcome h2 { font-size: 1.5rem; margin: 0 0 .5rem; }
.sf-welcome p { color: var(--sf-muted); margin: 0 0 1rem; }
.sf-welcome__perks { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.sf-welcome__perks li { background: var(--sf-cream); border-radius: 999px; padding: .3em .8em; font-size: .82rem; font-weight: 700; color: var(--sf-green); }
.sf-welcome__btns { display: flex; flex-direction: column; gap: .55rem; }
.sf-welcome__btns .sf-btn { width: 100%; text-align: center; }
.sf-welcome__later { margin-top: .6rem; background: none; border: 0; color: var(--sf-muted); font-weight: 600; font-size: .88rem; cursor: pointer; padding: .4rem; }
.sf-welcome__later:hover { color: var(--sf-ink); text-decoration: underline; }

/* Phones: small bottom sheet that never blocks the page on arrival */
.sf-welcome--sheet { place-items: end center; padding: 0 .75rem calc(70px + env(safe-area-inset-bottom)); pointer-events: none; }
.sf-welcome--sheet.is-open { background: rgba(8,16,11,.25); }
.sf-welcome--sheet .sf-welcome__card { pointer-events: auto; padding: 1.25rem 1.1rem 1rem; translate: 0 40px; border-radius: 16px; }
.sf-welcome--sheet .sf-welcome__fence { height: 32px; margin-bottom: .6rem; }
.sf-welcome--sheet .sf-welcome__fence::before { top: 11px; } .sf-welcome--sheet .sf-welcome__fence::after { top: 21px; }
.sf-welcome--sheet .sf-welcome__fence i { width: 8px; }
.sf-welcome--sheet h2 { font-size: 1.2rem; }
.sf-welcome--sheet p { font-size: .9rem; margin-bottom: .75rem; }
.sf-welcome--sheet .sf-welcome__perks { margin-bottom: .9rem; }
.sf-welcome--sheet .sf-welcome__btns { flex-direction: row; }
.sf-welcome--sheet .sf-welcome__btns .sf-btn { font-size: .92rem; padding: .75em .6em; }
@media (prefers-reduced-motion: reduce) { .sf-welcome, .sf-welcome__card { transition: none; } }
.sf-rating .sf-stars { font-size: 1em; }
.sf-rating .sf-stars__off { color: rgba(255,255,255,.35); }

/* Text-style buttons: override GeneratePress's dark button:hover/focus background. */
.sf-welcome__later:hover, .sf-welcome__later:focus,
.sf-link:hover, .sf-link:focus,
.sf-review__more:hover, .sf-review__more:focus,
.sf-video__play:hover, .sf-video__play:focus { background: transparent; }
.sf-welcome__later:hover, .sf-welcome__later:focus-visible { color: var(--sf-green); text-decoration: underline; text-underline-offset: 3px; }
.sf-link:hover, .sf-link:focus-visible { color: var(--sf-green); }
.sf-review__more:hover, .sf-review__more:focus-visible { color: var(--sf-green); text-decoration: underline; text-underline-offset: 3px; }
.sf-video__play:hover, .sf-video__play:focus { color: #fff; }