@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,340;0,9..144,440;0,9..144,560;1,9..144,440&family=Work+Sans:wght@300;400;500;600&display=swap');

/* ==========================================================================
   FitSeason design system
   Loaded after astra-theme-css (declared dependency), so plain specificity
   is enough to win — no !important arms race.
   ========================================================================== */

:root {
	--fs-green: #124626;
	--fs-green-deep: #0b2e19;
	--fs-green-soft: rgba(18, 70, 38, .08);
	--fs-ivory: #FFFCF2;
	--fs-ivory-warm: #FBF3E5;
	--fs-line: rgba(18, 70, 38, .16);
	--fs-body: #33342E;
	--fs-white: #fff;

	--fs-korean: #B23A2E;
	--fs-sichuan: #6B1E23;
	--fs-teriyaki: #A9702B;
	--fs-umami: #2F6F62;
	--fs-lemon: #D9A521;

	--fs-serif: 'Fraunces', Georgia, serif;
	--fs-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Matches Astra's header container (max-width 1240px / 20px padding) so the
	   nav, page content and footer all sit on the same column. */
	--fs-maxw: 1240px;
	--fs-gutter: 20px;
	--fs-header-h: 91px;
}

/* --------------------------------------------------------------------------
   1. Escape the block editor's content-width cage.
   WordPress sets `.entry-content > * { max-width: 1200px; margin: auto }`,
   which caged every section at 1200px and left dead gutters on wide screens.
   -------------------------------------------------------------------------- */
/* Astra caps every block child with
   `max-width: var(--wp--custom--ast-content-width-size)` from a (0,4,0)
   selector. Instead of fighting that rule, feed it our own width — sections
   inherit the value and Astra's own `margin-inline: auto` centres them, so the
   whole page sits on the same column as the header nav and footer. */
.fs-page {
	--wp--custom--ast-content-width-size: var(--fs-maxw);
	--wp--style--global--content-size: var(--fs-maxw);
	--wp--style--global--wide-size: var(--fs-maxw);
}

.entry-content > .fs-page {
	max-width: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

/* Astra's own footer is replaced by [fitseason_footer]. */
.site-footer {
	display: none;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
.fs-page {
	font-family: var(--fs-sans);
	color: var(--fs-body);
	background: var(--fs-ivory);
}

.fs-page *,
.fs-page *::before,
.fs-page *::after {
	box-sizing: border-box;
}

.fs-page h1,
.fs-page h2,
.fs-page h3 {
	font-family: var(--fs-serif);
	color: var(--fs-green);
	font-weight: 440;
	letter-spacing: -.01em;
	margin: 0;
}

.fs-page p {
	line-height: 1.7;
}

.fs-container {
	width: 100%;
	max-width: var(--fs-maxw);
	margin-inline: auto;
	padding-inline: var(--fs-gutter);
}

/* Rounded corners on the boxed sections that carry their own colour or image,
   so the column reads as a deliberate panel rather than a clipped band. */
.fs-hero-img:first-child {
	border-radius: 0 0 18px 18px;
}

.fs-section {
	padding-block: clamp(56px, 7vw, 104px);
}

.fs-section--tight {
	padding-block: clamp(40px, 4vw, 64px);
}

.fs-eyebrow {
	display: inline-block;
	font-family: var(--fs-sans);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fs-green);
	opacity: .7;
	margin-bottom: 14px;
}

.fs-lede {
	font-size: clamp(16px, 1.15vw, 19px);
	line-height: 1.75;
	opacity: .85;
	max-width: 62ch;
}

.fs-center { text-align: center; }
.fs-mx-auto { margin-inline: auto; }

/* --------------------------------------------------------------------------
   3. Texture
   -------------------------------------------------------------------------- */
.fs-grain { position: relative; }

.fs-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.07  0 0 0 0 0.27  0 0 0 0 0.15  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. Buttons & badges
   -------------------------------------------------------------------------- */
.fs-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--fs-green-soft);
	color: var(--fs-green);
	border: 1px solid var(--fs-line);
	border-radius: 999px;
	padding: 7px 18px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.fs-btn {
	display: inline-block;
	font-family: var(--fs-sans);
	font-weight: 500;
	font-size: 15px;
	padding: 14px 30px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background .25s ease, color .25s ease;
}

.fs-btn--primary { background: var(--fs-green); color: var(--fs-ivory); }
.fs-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18, 70, 38, .28); }
.fs-btn--ghost { background: transparent; color: var(--fs-green); border: 1.5px solid var(--fs-green); }
.fs-btn--ghost:hover { background: var(--fs-green); color: var(--fs-ivory); }
.fs-btn--onDark { border: 1.5px solid rgba(255, 252, 242, .5); color: var(--fs-ivory); }
.fs-btn--onDark:hover { background: var(--fs-ivory); color: var(--fs-green); }
.fs-btn--invert { background: var(--fs-ivory); color: var(--fs-green); }
.fs-btn--invert:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }

/* --------------------------------------------------------------------------
   5. Hero
   `display:grid` (not flex) so the container fills the width instead of
   shrink-wrapping to its text.
   -------------------------------------------------------------------------- */
.fs-hero-img {
	position: relative;
	display: grid;
	align-content: end;
	min-height: clamp(460px, 72vh, 760px);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* A warm near-black scrim rather than the brand green: green tints food
   photography and makes it read cold and unappetising. This keeps the chilli
   and char tones intact while still giving the overlaid text contrast. */
.fs-hero-img::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(24, 16, 10, .12) 0%, rgba(20, 13, 8, .5) 58%, rgba(14, 9, 5, .88) 100%);
}

.fs-hero-img > .fs-container {
	position: relative;
	z-index: 1;
	padding-block: clamp(48px, 6vw, 88px);
}

.fs-hero-img h1,
.fs-hero-img h2,
.fs-hero-img .fs-eyebrow { color: var(--fs-ivory); }
.fs-hero-img p { color: var(--fs-ivory); opacity: .92; }
.fs-hero-img .fs-badge { background: rgba(255, 252, 242, .14); border-color: rgba(255, 252, 242, .35); color: var(--fs-ivory); }

.fs-hero-title {
	font-size: clamp(38px, 5.2vw, 72px);
	line-height: 1.08;
	max-width: 18ch;
	margin-block: 22px 20px;
}

.fs-hero-actions {
	margin-top: 30px;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   6. Layout utilities
   -------------------------------------------------------------------------- */
.fs-grid-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

.fs-grid-auto {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: clamp(18px, 1.6vw, 26px);
}

/* The collection has exactly five items; auto-fill leaves a lone orphan on a
   second row at common desktop widths. Step the column count explicitly so a
   row is always filled. */
.fs-grid-flavors { grid-template-columns: 1fr; }

@media (min-width: 560px) {
	.fs-grid-flavors { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.fs-grid-flavors { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1240px) {
	.fs-grid-flavors { grid-template-columns: repeat(5, 1fr); }
}

.fs-dark { background: var(--fs-green); color: var(--fs-ivory); }
.fs-dark h1, .fs-dark h2, .fs-dark h3 { color: var(--fs-ivory); }
.fs-dark p { opacity: .88; }
.fs-dark a { color: var(--fs-ivory); }

/* `.fs-dark a` (0,1,1) would otherwise beat `.fs-btn--invert` (0,1,0) and
   paint ivory text on the ivory pill, making the label disappear. */
.fs-dark .fs-btn--invert { color: var(--fs-green); }
.fs-dark .fs-btn--invert:hover { color: var(--fs-green); }

.fs-quote {
	font-family: var(--fs-serif);
	font-style: italic;
	font-size: clamp(21px, 2.1vw, 31px);
	color: var(--fs-green);
	line-height: 1.5;
	border-left: 3px solid var(--fs-green);
	padding-left: 28px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.fs-card {
	background: var(--fs-white);
	border-radius: 20px;
	box-shadow: 0 2px 16px rgba(18, 70, 38, .09);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

.fs-card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(18, 70, 38, .16); }

.fs-img-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	overflow: hidden;
	background: var(--fs-white);
	box-shadow: 0 2px 16px rgba(18, 70, 38, .1);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}

.fs-img-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(18, 70, 38, .2); }

/* pointer-tracked sheen, coordinates supplied by fitseason.js */
.fs-img-card::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s ease;
	background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 252, 242, .16), transparent 60%);
}

.fs-img-card:hover::after { opacity: 1; }

.fs-img-wrap { overflow: hidden; aspect-ratio: 4 / 3; }

.fs-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.fs-img-card:hover .fs-img-wrap img { transform: scale(1.07); }

.fs-img-body { padding: 22px 20px 26px; flex: 1; }

.fs-accent {
	height: 6px;
	width: 100%;
	display: block;
}

/* --------------------------------------------------------------------------
   8. Split image + text
   -------------------------------------------------------------------------- */
.fs-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	align-items: stretch;
}

.fs-split-img {
	min-height: clamp(300px, 42vw, 560px);
	background-size: cover;
	background-position: center;
}

.fs-split-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: clamp(36px, 5vw, 80px);
}

/* --------------------------------------------------------------------------
   9. Why-us grid
   -------------------------------------------------------------------------- */
.fs-why {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1px;
	background: var(--fs-line);
	border: 1px solid var(--fs-line);
	border-radius: 20px;
	overflow: hidden;
}

.fs-why-item { background: var(--fs-white); padding: clamp(28px, 2.4vw, 40px); }
.fs-why-num { font-family: var(--fs-serif); font-size: 15px; color: var(--fs-green); opacity: .55; margin-bottom: 14px; }
.fs-why-item h3 { font-size: 19px; margin-bottom: 10px; }
.fs-why-item p { font-size: 14.5px; opacity: .8; margin: 0; }

/* --------------------------------------------------------------------------
   10. Scroll reveal (driven by fitseason.js)
   -------------------------------------------------------------------------- */
/* Content is visible by default and only hidden once the `fs-js` class is set
   by the inline head snippet. If the script fails to load, nothing is hidden
   and the page still renders in full rather than going blank. */
[data-fs-reveal] {
	transition: opacity .75s cubic-bezier(.2, .8, .2, 1), transform .75s cubic-bezier(.2, .8, .2, 1);
}

.fs-js [data-fs-reveal] {
	opacity: 0;
	transform: translateY(26px);
	will-change: opacity, transform;
}

.fs-js [data-fs-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.fs-js [data-fs-reveal] { opacity: 1; transform: none; transition: none; }
	.fs-img-card, .fs-card, .fs-btn, .fs-img-wrap img { transition: none; }
}

/* --------------------------------------------------------------------------
   11. Header
   Transparent over hero images, solid once scrolled (body.fs-scrolled from JS).
   -------------------------------------------------------------------------- */
/* Nothing should sit above the header — a stray offset on the document left a
   sliver of background visible above the sticky bar. */
html,
body,
body > .hfeed.site {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Astra's transparent-header option is disabled, so the header is back in
   normal flow. `sticky` keeps it pinned without taking it out of flow, which
   avoids the content jump a `fixed` header would cause.

   The background is fully opaque: at 94% alpha the page scrolled visibly
   through the bar, which read as a half-rendered header. */
/* `position: fixed` rather than `sticky`: <body> carries `overflow: hidden auto`,
   which can make an ancestor a scroll container and leave a sticky header
   partially rendered in some browsers. Fixed is deterministic. The header is
   taken out of flow, so `.hfeed.site` is padded by the measured header height
   (--fs-header-h, kept current by fitseason.js). */
.site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 999;
	margin: 0;
	background: var(--fs-ivory);
	transition: box-shadow .3s ease;
}

body > .hfeed.site {
	padding-top: var(--fs-header-h);
}

.site-header .main-header-bar,
.site-header .ast-main-header-wrap,
.site-header .ast-primary-header-bar {
	background: transparent;
}

/* Astra ships `.ast-primary-header-bar { margin-top: 10px }`. With no border or
   padding between it and <body>, that margin collapsed all the way out and
   pushed the entire document down 10px, leaving a strip above the sticky
   header. Repeating the class outranks Astra's own selector. */
body .site-header .ast-primary-header-bar.ast-primary-header-bar,
body .site-header .ast-main-header-wrap.ast-main-header-wrap {
	margin-top: 0;
	margin-bottom: 0;
}

body.fs-scrolled .site-header {
	background: var(--fs-ivory);
	box-shadow: 0 2px 18px rgba(18, 70, 38, .13);
}

/* Anchor targets must clear the pinned header. */
.fs-page [id] { scroll-margin-top: calc(var(--fs-header-h) + 12px); }

/* --------------------------------------------------------------------------
   11b. Language toggle (appended to the primary menu)
   -------------------------------------------------------------------------- */
.fs-lang-item { display: flex; align-items: center; }

.fs-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--fs-line);
	border-radius: 999px;
	background: rgba(18, 70, 38, .05);
	margin-inline-start: 14px;
}

/* Rendered as real links to the translated permalink, so they must shed the
   theme's anchor styling. */
.fs-lang-btn {
	appearance: none;
	display: inline-block;
	min-width: 0;
	padding: 5px 11px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--fs-green);
	font-family: var(--fs-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	opacity: .6;
	transition: background .22s ease, color .22s ease, opacity .22s ease;
}

.fs-lang-btn:hover,
.fs-lang-btn:focus { text-decoration: none; }

.fs-lang-btn:hover { opacity: 1; }

.fs-lang-btn.is-active {
	background: var(--fs-green);
	color: var(--fs-ivory);
	opacity: 1;
}

.fs-lang-sep {
	width: 1px;
	height: 13px;
	background: var(--fs-line);
}

.fs-lang-btn:focus-visible {
	outline: 2px solid var(--fs-green);
	outline-offset: 2px;
}

/* In the mobile drawer the menu is a stacked list — centre the control and
   give it room instead of letting it sit flush against the links. */
@media (max-width: 921px) {
	.fs-lang-item { justify-content: center; padding: 14px 0; }
	.fs-lang { margin-inline-start: 0; }
}

/* --------------------------------------------------------------------------
   12. Back to top (injected by fitseason.js)
   -------------------------------------------------------------------------- */
/* Theme button styles apply `padding: 15px 40px`, which floored the width at
   80px and made this an oval — hence the explicit box reset.

   Ivory fill with a green arrow, rather than the reverse: a green button sat
   on the dark green footer and effectively disappeared. Ivory reads clearly
   against both the light sections and the footer.

   `env(safe-area-inset-*)` keeps it clear of the home indicator on notched
   phones. */
.fs-totop {
	position: fixed;
	right: calc(clamp(16px, 2vw, 32px) + env(safe-area-inset-right, 0px));
	bottom: calc(clamp(16px, 2vw, 32px) + env(safe-area-inset-bottom, 0px));
	z-index: 200;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	min-width: 0;
	padding: 0;
	border: 1px solid rgba(18, 70, 38, .18);
	border-radius: 50%;
	cursor: pointer;
	background: var(--fs-ivory);
	color: var(--fs-green);
	line-height: 1;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px) scale(.94);
	transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1),
		background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
	box-shadow: 0 6px 20px rgba(11, 46, 25, .22);
}

.fs-totop svg {
	width: 20px;
	height: 20px;
	display: block;
}

body.fs-scrolled .fs-totop {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.fs-totop:hover {
	background: var(--fs-green);
	color: var(--fs-ivory);
	border-color: var(--fs-green);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(11, 46, 25, .34);
}

.fs-totop:active { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
	.fs-totop { transition: opacity .2s ease; transform: none; }
	body.fs-scrolled .fs-totop { transform: none; }
	.fs-totop:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
/* The footer spans the full viewport like the header, while its inner
   container stays on the same 1240px column as the header nav and page
   content. Resetting Astra's width variable on this element alone releases it
   from the boxed content cap. */
.fs-footer {
	--wp--custom--ast-content-width-size: none;
	position: relative;
	max-width: none;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	background: var(--fs-green-deep);
	color: var(--fs-ivory);
	padding: clamp(52px, 5vw, 84px) 0 0;
}

/* A thin accent rule separates the footer from the CTA band above, which is a
   near-identical green and otherwise blurred into it. */
.fs-footer::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--fs-korean), var(--fs-teriyaki), var(--fs-lemon), var(--fs-umami), var(--fs-sichuan));
	opacity: .85;
}

.fs-footer a { color: var(--fs-ivory); text-decoration: none; opacity: .82; transition: opacity .2s, color .2s; }
.fs-footer a:hover { opacity: 1; }

.fs-footer-top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: clamp(28px, 3vw, 56px);
	padding-bottom: clamp(36px, 3.5vw, 56px);
}

/* Keep two link columns down to small phones — a single stacked column made
   the footer several screens tall. */
@media (max-width: 900px) {
	.fs-footer-top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
	.fs-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 360px) {
	.fs-footer-top { grid-template-columns: 1fr; }
}

.fs-footer-logo {
	width: 148px;
	height: auto;
	margin-bottom: 18px;
	/* the wordmark is deep green; invert it to read on the dark panel */
	filter: brightness(0) invert(1);
	opacity: .95;
}

.fs-footer-brand p {
	opacity: .72;
	font-size: 14.5px;
	line-height: 1.75;
	max-width: 36ch;
	margin: 0 0 20px;
}

.fs-footer-tagline {
	display: inline-block;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	opacity: .55;
}

.fs-footer h4 {
	font-family: var(--fs-sans);
	color: var(--fs-ivory);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .5;
	margin: 0 0 18px;
	font-weight: 600;
}

.fs-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }

/* Links slide slightly on hover so the columns feel alive rather than static */
.fs-footer ul a { display: inline-block; transition: opacity .2s, transform .2s ease; }
.fs-footer ul a:hover { transform: translateX(3px); }

.fs-social {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
}

.fs-social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255, 252, 242, .28);
	opacity: .8;
	transition: background .25s ease, border-color .25s ease, opacity .25s ease, transform .25s ease;
}

.fs-social a:hover {
	background: var(--fs-ivory);
	border-color: var(--fs-ivory);
	color: var(--fs-green-deep);
	opacity: 1;
	transform: translateY(-2px);
}

.fs-social svg { width: 17px; height: 17px; fill: currentColor; display: block; }

.fs-footer-note { font-size: 13px; opacity: .6; line-height: 1.65; margin: 0; }

.fs-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 22px 0 26px;
	border-top: 1px solid rgba(255, 252, 242, .14);
	font-size: 13px;
	opacity: .58;
}

.fs-footer-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   14. WPForms brand alignment
   -------------------------------------------------------------------------- */
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container textarea {
	font-family: var(--fs-sans);
	border: 1.5px solid var(--fs-line);
	border-radius: 12px;
	background: var(--fs-ivory);
	padding: 14px 16px;
}

.wpforms-container input:focus,
.wpforms-container textarea:focus {
	outline: 2px solid var(--fs-green);
	outline-offset: 1px;
}

.wpforms-container button[type=submit] {
	font-family: var(--fs-sans);
	background: var(--fs-green);
	border: none;
	border-radius: 999px;
	padding: 14px 32px;
	font-weight: 500;
	transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}

.wpforms-container button[type=submit]:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(18, 70, 38, .28);
}

/* --------------------------------------------------------------------------
   15. Accessibility
   -------------------------------------------------------------------------- */
.fs-page a:focus-visible,
.fs-btn:focus-visible,
.fs-totop:focus-visible {
	outline: 3px solid var(--fs-green);
	outline-offset: 3px;
	border-radius: 4px;
}

.fs-hero-img a:focus-visible { outline-color: var(--fs-ivory); }