/*
 Theme Name:   Bricks Child – fm-creations
 Description:  fm-creations: motion layer and structural CSS for native Bricks pages. Content, typography and colours live in Bricks global classes (fm-*), palette and variables.
 Author:       fm-creations
 Template:     bricks
 Version:      1.0.0
 Text Domain:  bricks
*/

/* Fonts: local only */
@font-face { font-family: "Space Grotesk"; src: url("assets/fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* Metric-matched local fallbacks (no shift when the webfont arrives). Calibrated with qa/font-calibrate.mjs. */
@font-face { font-family: "FM Display Fallback"; font-weight: 100 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 96.5%; ascent-override: 102%; descent-override: 30.2%; line-gap-override: 0%; }
@font-face { font-family: "FM Text Fallback"; font-weight: 100 599; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("Roboto"), local("Roboto-Regular"); size-adjust: 106.4%; ascent-override: 91.1%; descent-override: 22.7%; line-gap-override: 0%; }
@font-face { font-family: "FM Text Fallback"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 101.3%; ascent-override: 95.6%; descent-override: 23.8%; line-gap-override: 0%; }

:root {
	--fm-bg: #0b0d10; --fm-surface: #14171c; --fm-line: #1f2937; --fm-glow: #10241a; --fm-mint: #97ea90; --fm-text: #f2f4f7; --fm-muted: #9aa3ae; --fm-white: #ffffff;
	--fm-ease: cubic-bezier(.2, .7, .1, 1);
	--fm-font-display: "Space Grotesk", "FM Display Fallback", Arial, sans-serif;
	--fm-font-text: "Inter", "FM Text Fallback", Arial, sans-serif;
	--fm-ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--fm-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
@media (max-width: 767px) { :root { --fm-header-h: 68px; } }

html { -webkit-text-size-adjust: 100%; background: var(--fm-bg); scroll-padding-top: calc(var(--fm-header-h, 76px) + 20px); }
body { background: var(--fm-bg); color: var(--fm-text); font-family: var(--fm-font-text); font-size: 16px; line-height: 1.55; }
:focus-visible { outline: 2px solid var(--fm-mint); outline-offset: 3px; }
.brxe-text p, .brxe-text-basic { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
p, li { text-wrap: pretty; }
.fm-sec > .brxe-container, .fm-phero, .fm-footer { --fm-dummy: 0; }

/* Placeholders inside rich text (open points, always visible) */
.fm-placeholder { background: #ffe08a; color: #0b0d10; padding: 0 .25em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.fm-legal .fm-placeholder { font-weight: 500; }

/* ---------- Buttons: micro-interactions ---------- */
.fm-btn { -webkit-tap-highlight-color: transparent; transition: background-color .25s var(--fm-ease), color .25s var(--fm-ease), border-color .25s var(--fm-ease), transform .2s var(--fm-ease); }
.fm-btn:active { transform: scale(.97); }

/* ---------- Header (Bricks header template: absolute + sticky) ---------- */
#brx-header { position: fixed !important; inset: 0 0 auto 0; z-index: 100; padding: 12px var(--fm-gutter, 20px) 0; background: transparent; pointer-events: none; display: flex; justify-content: center; }
#brx-header > * { pointer-events: auto; }
#brx-header.fm-scrolled .fm-header { background-color: rgba(14, 17, 21, .86); }
html:not(.fm-js) #brx-header { position: absolute !important; }
.fm-logo img, .fm-nav__logo img, img.fm-nav__logo { display: block; width: 100%; height: auto; }

/* nav: desktop row */
.fm-nav .brx-nav-nested-items { gap: clamp(8px, 1.5vw, 22px); align-items: center; }
.fm-nav .fm-nav__link { text-decoration: none; transition: color .2s var(--fm-ease); }
.fm-nav a.fm-nav__link:hover, .fm-nav a[aria-current="page"] { color: var(--fm-mint); }
.fm-nav__cta, .fm-nav__logo, .fm-nav .brx-toggle-div { display: none !important; }
.fm-burger { color: var(--fm-text); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 992px) { .fm-burger { display: none !important; } }

/* nav: mobile overlay */
@media (max-width: 991px) {
	.fm-nav { margin-left: 8px !important; order: 3; flex: 0 0 auto; }
	.fm-header__actions { order: 2; margin-left: auto; }
	/* backdrop-filter makes the pill the containing block of fixed children: switch it off while the overlay is open */
	.fm-header:has(.brx-open) { -webkit-backdrop-filter: none; backdrop-filter: none; }
	.fm-nav.brx-open .brx-nav-nested-items {
		position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important;
		background: #0b0d10 !important; padding: calc(var(--fm-header-h, 76px) + 24px) var(--fm-gutter) 40px !important;
		display: flex; flex-direction: column; align-items: flex-start !important; justify-content: flex-start !important; gap: 2px; overflow-y: auto;
	}
	.fm-nav.brx-open .brx-nav-nested-items > li { width: 100%; justify-content: flex-start !important; }
	.fm-nav.brx-open .fm-nav__link { font-family: var(--fm-font-display); font-size: clamp(30px, 22px + 2vw, 40px); font-weight: 600; letter-spacing: -0.02em; padding: 10px 0; line-height: 1.1; }
	.fm-nav.brx-open .brx-nav-nested-items > li:has(> .brx-toggle-div) { display: block !important; position: absolute; top: 20px; right: var(--fm-gutter); width: 44px !important; height: 44px; padding: 0; }
	.fm-nav.brx-open .brx-toggle-div { display: inline-flex !important; position: static !important; width: 44px; height: 44px; color: var(--fm-text); }
	.fm-nav.brx-open .brx-nav-nested-items > li:has(> .fm-nav__logo) { display: block !important; position: absolute; top: 20px; left: var(--fm-gutter); width: auto !important; padding: 0; }
	.fm-nav.brx-open .fm-nav__logo { display: block !important; }
	.fm-nav.brx-open .fm-nav__cta { display: inline-flex !important; margin-top: 24px; }
}
@media (max-width: 767px) { .fm-nav.brx-open .fm-nav__cta { width: 100% !important; } }

/* ---------- Start hero: static base (no JS, reduced motion, builder) ---------- */
.fm-hero { position: relative; isolation: isolate; }
.fm-stage { position: relative; overflow: hidden; }
.fm-poster, .fm-scene { pointer-events: none; }
.fm-poster { position: absolute; left: 0; top: 0; width: 100%; height: 100svh; z-index: 0; margin: 0; }
.fm-poster img, .fm-poster picture, img.fm-poster { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.fm-scene { position: absolute; inset: 0 0 auto 0; height: 100svh; z-index: 1; opacity: 0; transition: opacity .9s ease; }
.fm-scene canvas { display: block; width: 100%; height: 100%; }
.fm-hero.fm-scene-ready .fm-scene.is-live { opacity: 1; }
.fm-poster { transition: opacity .7s ease; }
.fm-hero.fm-scene-live .fm-poster { opacity: 0; }
.fm-hero.fm-scene-loading .fm-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(151, 234, 144, .06) 50%, transparent 60%) 0 0 / 250% 100%; animation: fm-sheen 1.6s linear infinite; }
@keyframes fm-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.fm-screens-src { display: none; }
.fm-hero__inner { position: relative; z-index: 3; }
.fm-progress, .fm-scrollhint, .fm-rail { display: none; }
html:not(.fm-motion) .fm-chapter + .fm-chapter { display: none; }
.fm-chapter__t { display: none; }
.fm-chapters { width: 100%; }
/* static: copy sits on a soft dark scrim so the poster behind it stays calm */
.fm-hero__inner::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(11, 13, 16, 0) 40%, rgba(11, 13, 16, .86) 76%, rgba(11, 13, 16, .94) 100%); }
@media (min-width: 992px) { .fm-hero__inner::before { background: linear-gradient(90deg, rgba(11, 13, 16, .82) 0%, rgba(11, 13, 16, .46) 42%, rgba(11, 13, 16, 0) 62%); } }
.fm-title br { display: block; }

/* static hero on portrait screens: poster on top, copy below it instead of on it */
@media (max-width: 991px) {
	html:not(.fm-motion) .fm-poster { position: relative; height: 54svh; }
	html:not(.fm-motion) .fm-poster img { object-position: 50% 0; }
	html:not(.fm-motion) .fm-hero__inner { min-height: 0; padding-top: 0; }
	html:not(.fm-motion) .fm-hero__inner::before { display: none; }
	html:not(.fm-motion) .fm-stage { display: flex; flex-direction: column; }
}

/* H1 word masks (JS adds .fm-w around the verb/noun) */
.fm-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .06em .12em 0; margin: -.08em -.06em -.12em 0; }
.fm-w__i { display: inline-block; will-change: transform; }

/* ---------- Motion mode (html.fm-motion): sticky scene, then normal content ---------- */
.fm-motion .fm-hero { height: 340svh; }
.fm-motion .fm-stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
.fm-motion .fm-hero__inner { height: 100%; min-height: 0; }
.fm-motion .fm-screens-src { display: none; }
.fm-motion .fm-rail { display: flex; }
.fm-motion .fm-rail__item { position: relative; padding-bottom: 7px; transition: color .3s var(--fm-ease); }
.fm-motion .fm-rail__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--fm-mint); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--fm-ease); }
.fm-motion .fm-rail__item.is-active { color: var(--fm-text); }
.fm-motion .fm-rail__item.is-active::after, .fm-motion .fm-rail__item.is-done::after { transform: scaleX(1); }
.fm-motion .fm-rail__item.is-done { color: var(--fm-text); }
.fm-motion .fm-chapters { display: grid; }
.fm-motion .fm-chapter { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s var(--fm-ease), transform .45s var(--fm-ease), visibility 0s linear .35s; }
.fm-motion .fm-chapter.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--fm-ease), transform .5s var(--fm-ease), visibility 0s; }
.fm-motion .fm-chapter__t { display: none; }
.fm-motion .fm-progress { display: block; position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 2px; background: var(--fm-mint); transform-origin: 0 50%; transform: scaleX(0); }
.fm-motion .fm-scrollhint { display: flex; position: absolute; z-index: 4; right: var(--fm-gutter); bottom: clamp(20px, 4vh, 40px); align-items: center; gap: 10px; transition: opacity .4s ease; }
.fm-motion .fm-scrollhint::after { content: ""; width: 1px; height: 36px; background: linear-gradient(180deg, currentColor, transparent); animation: fm-hint 1.8s var(--fm-ease) infinite; transform-origin: 50% 0; }
.fm-motion .fm-hero[data-fm-scrolled] .fm-scrollhint { opacity: 0; }
@keyframes fm-hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 991px) { .fm-motion .fm-scrollhint { display: none; } }
.fm-motion .fm-hero__inner::before { background: linear-gradient(180deg, rgba(11, 13, 16, 0) 42%, rgba(11, 13, 16, .78) 62%, rgba(11, 13, 16, .94) 100%); }
@media (min-width: 992px) { .fm-motion .fm-hero__inner::before { background: linear-gradient(90deg, rgba(11, 13, 16, .74) 0%, rgba(11, 13, 16, .3) 38%, rgba(11, 13, 16, 0) 54%); } }
@media (max-width: 767px) and (max-height: 720px) { .fm-motion .fm-hero__copy .fm-btn--line { display: none; } }

/* ---------- Page hero ---------- */
.fm-phero__grid > .fm-phero__text { align-self: end; }
.fm-phero:not(:has(.fm-phero__grid > * + *)) .fm-phero__grid { grid-template-columns: minmax(0, 1fr); }

/* ---------- Bento / project fills: images take the free height so no card has an empty lower half ---------- */
@media (min-width: 992px) {
	.fm-card--big .fm-card__body { flex-grow: 0; }
	.fm-card--big .fm-bento__stack > .fm-frame:first-child { flex: 1 1 0; aspect-ratio: auto !important; min-height: 280px; position: relative; }
	.fm-card--big .fm-bento__stack > .fm-frame:first-child img { position: absolute; inset: 0; }
}
@media (min-width: 768px) {
	.fm-project--side:not(.fm-project--all) .fm-card__body { flex-grow: 0; }
	.fm-project--side:not(.fm-project--all) > .fm-frame { flex: 1 1 0; aspect-ratio: auto !important; min-height: 220px; position: relative; }
	.fm-project--side:not(.fm-project--all) > .fm-frame img { position: absolute; inset: 0; }
}

/* ---------- Media ---------- */
.fm-media .brxe-image, .fm-frame .brxe-image { display: block; width: 100%; height: 100%; }
.fm-frame { line-height: 0; }

/* ---------- FAQ: plus → minus ---------- */
.fm-faq .accordion-title-wrapper { cursor: pointer; flex-wrap: nowrap !important; }
.fm-faq .accordion-title-wrapper::after { content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: linear-gradient(currentColor, currentColor) center / 100% 1.75px no-repeat, linear-gradient(currentColor, currentColor) center / 1.75px 100% no-repeat; transition: transform .35s var(--fm-ease); }
.fm-faq .brx-open > .accordion-title-wrapper::after { transform: rotate(45deg); }
.fm-faq .accordion-title-wrapper:hover .fm-faq__q { color: var(--fm-mint); }
.fm-faq .accordion-title-wrapper .fm-faq__q { flex: 1 1 auto; min-width: 0; }

/* ---------- Calculator ---------- */
.fm-opt__h { display: flex; }
.fm-opt__d { display: block; }
.fm-calcbar { display: none; }
@media (max-width: 767px) {
	.fm-calcbar { display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 90; transform: translateY(140%); visibility: hidden; transition: transform .35s var(--fm-ease), visibility 0s linear .35s; }
	.fm-calcbar.is-on { transform: none; visibility: visible; transition: transform .35s var(--fm-ease), visibility 0s; }
	.fm-calcbar .fm-btn { width: auto !important; }
	.fm-sum { order: 2; }
}

/* ---------- Form skin (native Bricks form) ---------- */
.fm-form { width: 100%; }
.fm-form .form-group { padding-bottom: 16px; }
.fm-form label, .fm-form .label, .fm-form .form-group > label { font-size: 14.5px; font-weight: 500; color: var(--fm-muted); margin-bottom: 6px; display: block; text-transform: none !important; letter-spacing: 0 !important; }
.fm-form input:not([type="checkbox"]):not([type="file"]):not([type="radio"]), .fm-form textarea, .fm-form select {
	background: rgba(11, 13, 16, .55); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 14px; font: inherit; font-size: 16px; color: var(--fm-text); min-height: 52px; width: 100%;
	transition: border-color .2s var(--fm-ease), box-shadow .2s var(--fm-ease);
}
.fm-form textarea { min-height: 130px; }
.fm-form input:focus, .fm-form textarea:focus, .fm-form select:focus { outline: none; border-color: var(--fm-mint); box-shadow: 0 0 0 3px rgba(151, 234, 144, .22); }
.fm-form select option { background: #14171c; color: var(--fm-text); }
.fm-form .options-wrapper { font-size: 14.5px; line-height: 1.5; color: var(--fm-muted); }
.fm-form .options-wrapper label { font-weight: 400; display: inline; }
.fm-form input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--fm-mint); margin-right: 10px; vertical-align: -4px; }
.fm-form .required { color: var(--fm-mint); }
.fm-form .form-group.options-wrapper > label, .fm-form .form-group > .label, .fm-form .options-wrapper + label { color: var(--fm-muted); }
.fm-form .submit-button-wrapper { margin-top: 6px; }
.fm-form button[type="submit"], .fm-form .bricks-button {
	background: var(--fm-mint); color: var(--fm-bg); border: 1px solid var(--fm-mint); border-radius: 999px; font: inherit; font-size: 16px; font-weight: 600; padding: 16px 28px; min-height: 52px; cursor: pointer;
	transition: background-color .25s var(--fm-ease), transform .2s var(--fm-ease);
}
.fm-form button[type="submit"]:hover { background: #b9f3b3; border-color: #b9f3b3; }
.fm-form button[type="submit"]:active { transform: scale(.97); }
@media (max-width: 767px) { .fm-form .submit-button-wrapper { width: 100%; } .fm-form button[type="submit"] { width: 100%; justify-content: center; } }
.fm-form .message.success { animation: fm-slide-in .5s var(--fm-ease) both; }
@keyframes fm-slide-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Scroll reveals (JS adds .fm-rv only to elements below the fold) ---------- */
.fm-rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .7s var(--fm-ease), transform .8s var(--fm-ease); }
.fm-rv.is-in { opacity: 1; transform: none; }

/* ---------- Tabular figures everywhere digits are data ---------- */
.fm-btn, .fm-footer, .fm-contact__item, .fm-tl, .fm-tag, .fm-legal { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
	.fm-scene, .fm-btn, .fm-header, .fm-calcbar, .fm-media img, .fm-frame img, .fm-faq .accordion-title-wrapper::after { transition: none !important; }
	.fm-rv { opacity: 1 !important; transform: none !important; }
	.fm-hero.fm-scene-loading .fm-stage::after { animation: none; display: none; }
}

/* very short phones: keep the object large, the chapter text would crowd it out */
@media (max-width: 767px) and (max-height: 680px) { .fm-motion .fm-chapters, .fm-motion .fm-rail { display: none; } }