/* Forge My Brand theme. Colours, fonts and corners come from Theme options (fmb_style() sets --fmb-*). */

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; font: 400 16px/1.6 var(--fmb-font); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4 { font-family: var(--fmb-font-head); margin: 0; font-weight: 700; text-wrap: balance; }
p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2.5px solid var(--or); outline-offset: 3px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: inherit; }
.fmb-rv [data-r] { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 900ms cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--d, 0) * 80ms); }
.fmb-rv [data-r].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fmb-rv [data-r] { opacity: 1; transform: none; transition: none; } }
details summary { list-style: none; cursor: pointer; } details summary::-webkit-details-marker { display: none; }
/* half-screen panel */
.fk-scrim { position: fixed; inset: 0; z-index: 90; background: rgb(12 12 13 / .35); opacity: 0; transition: opacity 400ms ease; }
.fk-scrim.on { opacity: 1; }
.fk-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: max(50vw, 520px); max-width: 100%; background: var(--ink); color: #fff; overflow: hidden auto; transform: translateX(100%); visibility: hidden; transition: transform 650ms cubic-bezier(.76,0,.24,1), visibility 0s linear 650ms; padding: calc(env(safe-area-inset-top, 0px) + 32px) max(24px, env(safe-area-inset-right, 0px)) 0 clamp(24px, 6vw, 120px); }
.fk-panel.on { transform: none; visibility: visible; transition: transform 650ms cubic-bezier(.76,0,.24,1), visibility 0s; }
.fk-close { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top, 0px) + 28px); right: max(28px, env(safe-area-inset-right, 0px)); width: 72px; height: 72px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #fff; color: #fff; display: grid; place-items: center; transition: transform 500ms cubic-bezier(.22,1,.36,1), background 300ms ease, color 300ms ease; }
.fk-close:hover { transform: rotate(90deg); background: #fff; color: var(--ink); }
.fk-body { position: relative; z-index: 1; max-width: 560px; padding-block: clamp(110px, 14vh, 150px) 160px; display: grid; gap: 28px; }
.fk-body > * { opacity: 0; transform: translateY(24px); transition: opacity 500ms ease, transform 700ms cubic-bezier(.22,1,.36,1); }
.fk-panel.on .fk-body > * { opacity: 1; transform: none; }
.fk-panel.on .fk-body > :nth-child(1) { transition-delay: 250ms; } .fk-panel.on .fk-body > :nth-child(2) { transition-delay: 320ms; } .fk-panel.on .fk-body > :nth-child(3) { transition-delay: 390ms; } .fk-panel.on .fk-body > :nth-child(4) { transition-delay: 440ms; } .fk-panel.on .fk-body > :nth-child(n+5) { transition-delay: 500ms; }
.fk-big { margin: 0; font: 700 clamp(40px, 4.6vw, 72px)/0.98 var(--fmb-font-head); letter-spacing: -0.05em; color: #fff; text-wrap: balance; }
.fk-big i { font-style: normal; color: var(--or); }
.fk-intro { margin: 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; color: #e5e7eb; max-width: 34ch; }
.fk-pnav { display: grid; gap: 4px; }
.fk-pnav a { font: 600 26px/1.3 var(--fmb-font-head); letter-spacing: -0.03em; color: #fff; transition: color 250ms ease, transform 400ms cubic-bezier(.22,1,.36,1); justify-self: start; }
.fk-pnav a:hover { color: var(--or); transform: translateX(8px); }
@media (min-width: 1100px) { .fk-pnav { display: none; } }
.fk-body hr { width: 100%; border: 0; height: 2px; background: #fff; margin: 4px 0; }
.fk-addr { margin: 0; font: 600 17px/1.6 var(--fmb-font-head); letter-spacing: -0.02em; color: #fff; }
.fk-soc { display: flex; gap: 22px; }
.fk-soc a { color: #fff; transition: color 250ms ease, transform 300ms ease; } .fk-soc a:hover { color: var(--or); transform: translateY(-3px); }
.fk-sun { position: absolute; right: 8%; bottom: 0; width: 260px; height: 130px; border-radius: 130px 130px 0 0; background: var(--or); transform: translateY(100%); transition: transform 900ms cubic-bezier(.22,1,.36,1) 300ms; }
.fk-panel.on .fk-sun { transform: translateY(35%); }
html.fk-lock { overflow: hidden; }
@media (max-width: 600px) { .fk-panel { width: 100%; padding-left: max(24px, env(safe-area-inset-left, 0px)); } .fk-close { width: 56px; height: 56px; top: calc(env(safe-area-inset-top, 0px) + 10px); right: max(16px, env(safe-area-inset-right, 0px)); } .fk-body { padding-top: 96px; } .fk-addr { font-size: 15px; } .fk-sun { display: none; } }
@media (prefers-reduced-motion: reduce) { .fk-panel, .fk-panel.on, .fk-body > *, .fk-sun { transition: none !important; } }

/* ===== Work: four square cards ===== */
.wk-grid { display: grid; gap: 28px 20px; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 639px) { .wk-grid { grid-auto-flow: column; grid-auto-columns: 76%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .wk { scroll-snap-align: start; } .wk-grid::-webkit-scrollbar { display: none; } }
@media (min-width: 640px) { .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wk { display: grid; gap: 16px; color: var(--ink); }
.mk { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 100%; border-radius: 20px; overflow: hidden; isolation: isolate; }
.mk > * { transition: transform 700ms cubic-bezier(.22,1,.36,1); }
.wk:hover .mk > *, .wk:focus-visible .mk > * { transform: scale(1.05); }
.wk-meta { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.wk h3 { font: 600 19px/1.2 var(--fmb-font-head); letter-spacing: -0.03em; margin: 0 0 6px; }
.wk-tag { font-size: 14px; color: var(--muted); }
.wk-go { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--ink); transition: transform 500ms cubic-bezier(.22,1,.36,1), box-shadow 300ms ease; }
.wk-go svg { width: 15px; height: 15px; }
.wk:hover .wk-go, .wk:focus-visible .wk-go { transform: scale(1.12); box-shadow: inset 0 0 0 1.5px var(--or); }
/* film: a video player */
.mk-video { background: #f3f4f6; }
.vp { position: relative; width: 84%; border-radius: 12px; background: var(--ink); padding: 8px; box-shadow: 0 18px 40px -18px rgb(12 12 13 / .45); }
.vp-pic { display: block; aspect-ratio: 4/3; border-radius: 7px; background: #fff; overflow: hidden; }
.vp-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.vp-play { position: absolute; left: 50%; top: calc(50% - 13px); translate: -50% -50%; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--or); color: var(--or-ink); }
.vp-bar { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 4px; }
.vp-bar i { flex: 1; height: 3px; border-radius: var(--fmb-r, 3px); background: linear-gradient(90deg, var(--or) 58%, #3a3a3e 58%); }
.vp-bar small { font: 500 9px/1 var(--fmb-font); color: #9ca3af; white-space: nowrap; }
/* branding: a brand board */
.mk-toho { background: #e5e7eb; padding: 12px; grid-template: 1.4fr 1fr / 1.3fr 1fr; gap: 10px; place-items: stretch; }
.tb { border-radius: 12px; display: grid; place-content: center; text-align: center; }
.tb-logo { grid-column: 1 / -1; background: var(--ink); color: var(--or); gap: 6px; }
.tb-logo b { font: 800 clamp(34px, 4vw, 54px)/0.85 var(--fmb-font-head); letter-spacing: -0.06em; }
.tb-logo small { font: 500 9px/1 var(--fmb-font-head); letter-spacing: 0.4em; color: #fff; }
.tb-mono { background: var(--or); color: var(--ink); font: 800 clamp(40px, 4.4vw, 60px)/1 var(--fmb-font-head); }
.tb-tag { background: #fff; color: var(--ink); gap: 10px; }
.tb-tag small { font: 600 11px/1 var(--fmb-font-head); letter-spacing: 0.1em; }
.sw { display: flex; gap: 5px; justify-content: center; }
.sw i { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); } .sw i:nth-child(2) { background: var(--or); } .sw i:nth-child(3) { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
/* book: a standing cover */
.mk-book { background: #f3f4f6; }
.cover { position: relative; width: 52%; aspect-ratio: 2/3; border-radius: var(--fmb-r, 3px) 10px 10px 3px; background: var(--or); color: #fff; display: flex; flex-direction: column; justify-content: end; padding: 14px 14px 14px 20px; overflow: hidden; box-shadow: inset 7px 0 0 rgb(22 10 0 / .16), 14px 18px 30px -16px rgb(12 12 13 / .55); }
.cover .road { position: absolute; inset: 0 0 auto auto; width: 70%; height: auto; }
.cover b { position: relative; font: 700 clamp(17px, 1.7vw, 22px)/1 var(--fmb-font-head); letter-spacing: -0.04em; color: var(--ink); }
.cover small { position: relative; margin-top: 8px; font: 500 10px/1 var(--fmb-font); color: var(--or-ink); letter-spacing: 0.04em; }
/* social: a phone with a post grid */
.mk-social { background: var(--ink); }
.ph { width: 54%; aspect-ratio: 9/15; border-radius: 22px; background: #fff; padding: 10px 8px; display: grid; grid-template-rows: auto 1fr; gap: 8px; box-shadow: 0 0 0 4px #2c2c2f; }
.ph-top { display: flex; align-items: center; gap: 6px; padding: 0 4px; }
.ph-top i { width: 16px; height: 16px; border-radius: 50%; background: var(--or); }
.ph-top b { font: 600 9px/1 var(--fmb-font); color: var(--ink); }
.ph-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 3px; }
.ph-grid i { border-radius: var(--fmb-r, 3px); font: 700 8.5px/1.15 var(--fmb-font-head); font-style: normal; display: grid; place-content: center; text-align: center; }
.g1 { background: var(--or); color: var(--ink); } .g2 { background: #f3e9dc; background-image: radial-gradient(circle at 50% 55%, #6b3b1f 0 22%, transparent 23%); }
.g3 { background: var(--ink); background-image: radial-gradient(circle at 50% 50%, var(--or) 0 18%, transparent 19%); } .g4 { background: #f3e9dc; background-image: linear-gradient(transparent 46%, var(--ink) 46% 54%, transparent 54%); }
.g5 { background: var(--ink); color: #fff; } .g6 { background: var(--or); background-image: radial-gradient(circle at 50% 50%, #fff 0 20%, transparent 21%); }
@media (prefers-reduced-motion: reduce) { .mk > *, .wk-go { transition: none; } }

:root { --or: var(--fmb-accent, #ff6d00); --or-ink: var(--fmb-on-accent, #160a00); --ink: var(--fmb-ink, #0c0c0d); --sand: var(--fmb-sand, #f4efe9); --m: max(24px, env(safe-area-inset-left, 0px)); --bg: #ffffff; --card: #f9fafb; --card2: #f3f4f6; --line: var(--ink); --line2: var(--ink); --text: #4b5563; --soft: #374151; --faint: #9ca3af; --hd: var(--ink); --hd-bg: rgb(255 255 255 / .9); --shadow: rgb(12 12 13 / .18); --chip: var(--ink); --chip-ink: #ffffff; --hot: #fff4ec; --hot-line: #ffd2b0; --contact: #f3f4f6; --ill-filter: none; --hc-line: rgb(12 12 13 / .13); --sel-bg: var(--ink); --sel-ink: #ffffff; --btn: var(--ink); --btn-ink: #ffffff; --btn-h: var(--or); --btn-h-ink: var(--or-ink); --bo: var(--ink); --bo-ink: #ffffff; --bo-ring: transparent; --band-btn: var(--or); --band-btn-ink: var(--or-ink); --tv-lt: block; --tv-dk: none; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a0a0b; --card: #111113; --card2: #18181b; --line: #232327; --line2: #3a3a40; --text: #b4b4bb; --soft: #d4d4d8; --faint: #8b8b93; --hd: #f5f5f5; --hd-bg: rgb(10 10 11 / .9); --shadow: rgb(0 0 0 / .9); --chip: #f5f5f5; --chip-ink: var(--ink); --hot: #1d1410; --hot-line: #4a2a12; --contact: #f5f5f5; --hc-line: rgb(255 255 255 / .09); --sel-bg: #ffffff; --sel-ink: var(--ink); --btn: var(--or); --btn-ink: var(--or-ink); --btn-h: #ffffff; --btn-h-ink: var(--ink); --bo: var(--or); --bo-ink: var(--or-ink); --bo-ring: transparent; --band-btn: var(--or); --band-btn-ink: var(--or-ink); --ill-filter: invert(1) hue-rotate(180deg) saturate(1.15); --tv-lt: none; --tv-dk: block; color-scheme: dark; } }
:root[data-theme="dark"] { --bg: #0a0a0b; --card: #111113; --card2: #18181b; --line: #232327; --line2: #3a3a40; --text: #b4b4bb; --soft: #d4d4d8; --faint: #8b8b93; --hd: #f5f5f5; --hd-bg: rgb(10 10 11 / .9); --shadow: rgb(0 0 0 / .9); --chip: #f5f5f5; --chip-ink: var(--ink); --hot: #1d1410; --hot-line: #4a2a12; --contact: #f5f5f5; --hc-line: rgb(255 255 255 / .09); --sel-bg: #ffffff; --sel-ink: var(--ink); --btn: var(--or); --btn-ink: var(--or-ink); --btn-h: #ffffff; --btn-h-ink: var(--ink); --bo: var(--or); --bo-ink: var(--or-ink); --bo-ring: transparent; --band-btn: var(--or); --band-btn-ink: var(--or-ink); --ill-filter: invert(1) hue-rotate(180deg) saturate(1.15); --tv-lt: none; --tv-dk: block; color-scheme: dark; }
@media (max-width: 600px) { :root { --m: max(16px, env(safe-area-inset-left, 0px)); } }
body { background: var(--bg); color: var(--text); font-size: 15.5px; transition: background 300ms ease, color 300ms ease; }
.ct { width: 100%; max-width: 1240px; margin-inline: auto; padding-left: var(--m); padding-right: var(--m); }
h1, h2, h3 { color: var(--hd); }
/* buttons: square corners like the reference */
.b { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: var(--fmb-r, 3px); background: var(--btn); color: var(--btn-ink); font-weight: 600; font-size: 14.5px; white-space: nowrap; justify-self: start; transition: background 250ms ease, color 250ms ease, transform 400ms cubic-bezier(.22,1,.36,1); }
.b:hover { background: var(--btn-h); color: var(--btn-h-ink); transform: scale(1.03); }
.b.o { background: var(--bo); color: var(--bo-ink); box-shadow: inset 0 0 0 1px var(--bo-ring); } .b.o:hover { background: var(--btn-h); color: var(--btn-h-ink); box-shadow: none; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--or); font-size: 17px; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 14px; }
.eyebrow i { width: 11px; height: 11px; border-radius: 50%; background: var(--or); }
/* header */
.hd { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--hd-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transition: box-shadow 350ms ease; }
.hd.scrolled { box-shadow: 0 14px 30px -14px var(--shadow); }
.hd { --bg: #0a0a0b; --hd: #f5f5f5; --hd-bg: #0a0a0b; --text: #b4b4bb; --soft: #d4d4d8; --faint: #8b8b93; --line: #232327; --line2: #3a3a40; --btn: var(--or); --btn-ink: var(--or-ink); --btn-h: #ffffff; --btn-h-ink: var(--ink); --sel-bg: #ffffff; --sel-ink: var(--ink); color-scheme: dark; color: var(--hd); }
.hd .ct { display: flex; align-items: center; gap: 24px; height: 84px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--hd); font: 600 17px/1 var(--fmb-font-head); letter-spacing: -0.03em; white-space: nowrap; }
.lg { width: 30px; height: 38px; color: var(--or); display: grid; place-items: center; } .lg svg { width: 100%; height: 100%; }
.nav { display: flex; gap: 28px; margin-inline: auto; font-size: 14.5px; color: var(--soft); }
.nav a { display: inline-flex; align-items: center; gap: 6px; transition: color 200ms ease; } .nav a:hover { color: var(--or); }
.nav b { width: 20px; height: 20px; border-radius: 50%; background: var(--or); color: var(--ink); display: grid; place-items: center; }
.burger { display: none; width: 46px; height: 46px; border-radius: var(--fmb-r, 3px); box-shadow: inset 0 0 0 1px var(--line2); place-items: center; color: var(--hd); }
.burger span { width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
@media (max-width: 900px) { .nav { display: none; } .hd-cta { margin-left: auto; } .burger { display: grid; } }
@media (max-width: 480px) { .hd-cta { display: none; } .burger { margin-left: auto; } .hd .ct { height: 70px; } }
/* hero */
.hero { padding-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); column-gap: 48px; }
.eyebrow-line { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; font-size: clamp(15px, 1.5vw, 21px); color: var(--soft); text-transform: uppercase; letter-spacing: -0.01em; }
.eyebrow-line i { width: 84px; height: 1.5px; background: var(--or); }
.hero h1 { grid-column: 1 / -1; grid-row: 2; margin-top: 28px; font: 700 clamp(44px, 7.8vw, 116px)/1.04 var(--fmb-font-head); letter-spacing: -0.055em; }
.hero h1 span { display: block; } .hero h1 .l2 { color: var(--or); }
.hero-p { grid-column: 2; grid-row: 2; align-self: end; margin-bottom: 0.9em; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.45; color: var(--soft); font-weight: 300; padding-left: clamp(0px, 3vw, 40px); }
.hero-row { grid-column: 1 / -1; margin-top: 44px; display: grid; grid-template-columns: minmax(0, 0.47fr) auto 1fr; align-items: end; }
.strip { margin: 0; height: 150px; border-radius: var(--fmb-r, 3px); overflow: hidden; background: var(--or); }
.strip video { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; filter: grayscale(1) contrast(1.05); transition: filter 600ms ease; }
.strip:hover video { filter: none; }
.strip-cta { align-self: center; margin-left: -50px; position: relative; }
.socials { justify-self: end; display: flex; gap: 40px; font-size: 14px; color: var(--soft); }
.socials { gap: 10px !important; } .socials a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--hd); box-shadow: inset 0 0 0 1px var(--line2); transition: background 250ms ease, color 250ms ease, transform 400ms cubic-bezier(.22,1,.36,1), box-shadow 250ms ease; } .socials a:hover { background: var(--or); color: var(--or-ink); box-shadow: none; transform: scale(1.1); } .socials svg { width: 19px; height: 19px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero-p { grid-column: 1; grid-row: auto; padding: 0; margin-top: 20px; } .hero-row { grid-template-columns: 1fr; gap: 20px; } .strip { height: 200px; } .strip-cta { margin: -40px 0 0 16px; justify-self: start; } .socials { justify-self: start; } }
/* trust */
.trust { padding-top: 60px; text-align: center; }
.trust > p { font-size: 13.5px; text-transform: uppercase; color: var(--soft); letter-spacing: 0.02em; }
.trust-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 36px; margin-top: 28px; }
.trust-row b { font: 700 clamp(17px, 2vw, 26px)/1 var(--fmb-font-head); letter-spacing: -0.04em; color: var(--faint); transition: color 250ms ease; } .trust-row b:hover { color: var(--hd); }
@media (max-width: 700px) { .trust-row { justify-content: center; } }
/* about */
.about { padding-top: clamp(80px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.about h2, .sec-head h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.3; letter-spacing: -0.04em; font-weight: 600; }
.about-txt { display: grid; gap: 18px; } .about-txt > p:not(.eyebrow) { max-width: 52ch; } .about-txt .b { margin-top: 30px; }
.about-pic { margin: 0; aspect-ratio: 4/3; border-radius: var(--fmb-r, 3px); background: #f5f5f5; display: grid; place-items: center; overflow: hidden; }
.about-pic img { height: 94%; width: auto; transition: transform 900ms cubic-bezier(.22,1,.36,1); } .about-pic:hover img { transform: scale(1.05); }
.about-team { background: #000; aspect-ratio: 1/1; align-self: center; border-radius: 0; }
.about-team video { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 900ms cubic-bezier(.22,1,.36,1); } .about-team:hover video { transform: scale(1.04); }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
.about { position: relative; isolation: isolate; padding-bottom: clamp(64px, 8vw, 110px); margin-bottom: clamp(32px, 4vw, 56px); color-scheme: dark;
  --hd: #f5f5f5; --text: #c4c4cc; --soft: #e4e4e7; --line: #3a3a40; --line2: #f5f5f5; --sel-bg: #ffffff; --sel-ink: var(--ink); --btn: var(--band-btn); --btn-ink: var(--band-btn-ink); --btn-h: #ffffff; --btn-h-ink: var(--ink); --bo: var(--band-btn); --bo-ink: var(--band-btn-ink); --bo-ring: transparent; color: var(--text); }
.about::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); background: #000; z-index: -1; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 64px; }
.stats > div { display: grid; gap: 6px; } .stats > div:nth-child(2), .stats > div:nth-child(3) { text-align: center; } .stats > div:last-child { text-align: right; }
.stats .n { font: 700 clamp(36px, 3.6vw, 50px)/1 var(--fmb-font-head); letter-spacing: -0.05em; color: var(--hd); }
.stats .n + p { color: var(--soft); font-size: 14.5px; }
@media (max-width: 700px) { .stats { display: grid; grid-template-columns: 1fr 1fr; } .stats > div { text-align: left !important; } }
.stats { gap: 0; } .stats > div { text-align: center !important; justify-items: center; padding: 8px 16px; }
.stats > div + div { border-left: 1.5px solid var(--hd); }
@media (max-width: 700px) { .stats { row-gap: 0; } .stats > div { padding: 20px 12px; } .stats > div:nth-child(3) { border-left: 0; } .stats > div:nth-child(n+3) { border-top: 1.5px solid var(--hd); } }
/* sections */
.sec { padding-top: clamp(80px, 9vw, 120px); }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; padding-bottom: 26px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.sec-head .eyebrow { margin-bottom: 8px; }
/* process */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.step { position: relative; border: 1px solid var(--line); border-radius: var(--fmb-r, 3px); padding: 0 22px 26px; display: grid; gap: 8px; align-content: start; background: linear-gradient(180deg, transparent, transparent); transition: border-color 300ms ease, background 300ms ease, transform 500ms cubic-bezier(.22,1,.36,1); }
.step.hot, .step:hover { background: linear-gradient(160deg, var(--card2), var(--card2) 70%); }
.step:hover { transform: translateY(-4px); border-color: var(--line2); }
.step-n { justify-self: start; margin: -1px 0 22px -23px; background: var(--chip); color: var(--chip-ink); padding: 10px 22px 8px; font-size: 15px; line-height: 1.1; border-radius: var(--fmb-r, 3px) 0 3px 0; }
.step-n b { display: block; font: 700 26px/1 var(--fmb-font-head); letter-spacing: -0.04em; }
.step.hot .step-n { background: var(--or); color: var(--or-ink); }
.step-go { position: absolute; right: 20px; top: 14px; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line2); display: grid; place-items: center; color: var(--hd); transition: transform 500ms cubic-bezier(.22,1,.36,1), background 250ms ease, color 250ms ease; } .step-go svg { width: 14px; height: 14px; }
.step:hover .step-go { transform: scale(1.12); background: var(--or); color: var(--or-ink); box-shadow: none; }
.step h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.03em; } .step p:last-child { font-size: 14.5px; line-height: 1.6; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
/* services */
.svc { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.badge { position: relative; justify-self: center; width: min(100%, 250px); aspect-ratio: 1; }
.ring { width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--line); animation: spin 22s linear infinite; }
.ring text { font: 600 17px var(--fmb-font-head); fill: var(--hd); letter-spacing: 0.06em; }
.badge-core { position: absolute; inset: 24%; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 2px var(--or); display: grid; place-items: center; } .badge-core img { height: 66%; width: auto; margin-top: -6%; }
@keyframes spin { to { transform: rotate(360deg); } }
.sv { border-top: 1px solid var(--line); }
.sv a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 6px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.sv sup { grid-row: 1; font-size: 11px; color: var(--soft); align-self: start; margin-top: 4px; }
.sv-t { font: 700 clamp(24px, 2.8vw, 38px)/1.1 var(--fmb-font-head); letter-spacing: -0.05em; color: var(--hd); transform-origin: left center; transition: transform 550ms cubic-bezier(.22,1,.36,1), color 250ms ease; }
.sv-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--soft); }
.sv-tags i { font-style: normal; } .sv-tags i::before { content: "•"; margin-right: 8px; color: var(--faint); }
.sv-go { grid-column: 3; grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 50%; background: var(--chip); color: var(--chip-ink); display: grid; place-items: center; transition: transform 550ms cubic-bezier(.22,1,.36,1), background 250ms ease; } .sv-go svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform 400ms ease; }
.sv a:hover .sv-t { transform: scale(1.05); color: var(--or); } .sv a:hover .sv-go { background: var(--or); color: var(--or-ink); transform: scale(1.15); } .sv a:hover .sv-go svg { transform: rotate(45deg); }
@media (max-width: 900px) { .svc { grid-template-columns: 1fr; } .badge { width: 180px; } }
/* case studies */
.case { display: grid; gap: 6px; }
.case-pic { display: block; border-radius: var(--fmb-r, 3px); overflow: hidden; margin-bottom: 14px; }
.case-pic .mk { border-radius: 0; aspect-ratio: 16/10; }
.case-big .case-pic .mk { aspect-ratio: 21/9; }
.cp-1 .mk-toho { background: #e9dcd8; padding: 5%; grid-template: 1fr / 1.6fr 0.8fr 0.8fr; }
.cp-1 .tb-logo { grid-column: auto; } .cp-1 .tb-logo b { font-size: clamp(40px, 6vw, 96px); } .cp-1 .tb-mono { font-size: clamp(50px, 6vw, 100px); }
.case h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.03em; transition: color 250ms ease; } .case:hover h3 { color: var(--or); }
.case p { font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .chips i { font-style: normal; font-size: 12px; padding: 4px 10px; border-radius: 2px; background: var(--card2); color: var(--soft); }
.case-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.case-two .mk-video { background: var(--card2); } .case-two .vp { width: 54%; } .case-two .cover { width: auto; height: 80%; } .case-two .mk-book { background: var(--or); } .case-two .mk-book .cover { background: #fff; } .case-two .mk-book .cover b { color: var(--ink); } .case-two .mk-book .road path { stroke: var(--or); }
@media (max-width: 700px) { .case-two { grid-template-columns: 1fr; } .case-big .case-pic .mk { aspect-ratio: 4/3; } .cp-1 .mk-toho { grid-template: 1.3fr 1fr / 1fr 1fr; } .cp-1 .tb-logo { grid-column: 1 / -1; } }
/* why */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: stretch; }
.why-l { display: grid; gap: 14px; }
.why-l li { border: 1px solid var(--line); border-radius: var(--fmb-r, 3px); padding: 20px 22px; transition: border-color 300ms ease, background 300ms ease; }
.why-l li:hover { border-color: var(--or); background: var(--hot); }
.why-l h3 { font-size: 16px; color: var(--or); font-weight: 600; margin-bottom: 8px; letter-spacing: -0.02em; } .why-l p { font-size: 14px; }
.why-pic { margin: 0; border-radius: var(--fmb-r, 3px); overflow: hidden; background: var(--or); min-height: 300px; }
.why-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.22,1,.36,1); } .why-pic:hover img { transform: scale(1.04); }
.why:has(.why-ill) { grid-template-columns: minmax(0, .62fr) minmax(0, 1.6fr); gap: 48px; }
.why-ill { margin: 0; position: relative; min-height: 520px; }
.why-ill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: var(--ill-filter); transform-origin: 50% 100%; transition: transform 900ms cubic-bezier(.22,1,.36,1); }
.why-ill:hover img { transform: rotate(-2deg) scale(1.02); }
@media (max-width: 900px) { .why:has(.why-ill) { grid-template-columns: 1fr; gap: 32px; } .why-ill { min-height: 460px; } }

::selection { background: var(--sel-bg); color: var(--sel-ink); -webkit-text-fill-color: var(--sel-ink); }
/* client marquee */
.mq { overflow: hidden; padding-block: clamp(18px, 2.4vw, 30px); margin-top: clamp(8px, 2vw, 24px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track { display: flex; width: max-content; animation: mq 32s linear infinite; }
.mq:hover .mq-track { animation-play-state: paused; }
.mq-set { display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); padding-right: clamp(28px, 4vw, 64px); }
.mq-set b { font: 800 clamp(26px, 3.6vw, 52px)/1 var(--fmb-font-head); letter-spacing: -0.05em; color: var(--hd); white-space: nowrap; transition: color 250ms ease; }
.mq-set b:hover { color: var(--or); }
.mq-set i { font-style: normal; color: var(--or); font-size: clamp(18px, 2vw, 28px); }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation-duration: 120s; } }
/* poster hero */
.pz { background-color: var(--ink); background-image: linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; color: #f5f5f5; text-align: center; padding-block: clamp(48px, 6vw, 88px) clamp(40px, 5vw, 64px); overflow: hidden; --sel-bg: #ffffff; --sel-ink: var(--ink); }
.pz-h { font: 800 clamp(44px, 8vw, 128px)/.86 var(--fmb-font-head); letter-spacing: -0.06em; text-transform: uppercase; color: var(--or); position: relative; z-index: 1; text-wrap: initial; }
.pz-h i { font-style: normal; color: #f5f5f5; }
.pz-ill { position: relative; z-index: 2; width: clamp(200px, 26vw, 360px); margin: clamp(20px, 2.5vw, 36px) auto 0; }
.pz-ill img { position: relative; width: 100%; height: auto; display: block; transition: transform 900ms cubic-bezier(.22,1,.36,1); }
.pz-ill:hover img { transform: translateY(-8px) rotate(-2deg); }
.pz-sun { position: absolute; left: 50%; bottom: 4%; width: 92%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--sand); }
.pz-sub { margin: 22px auto 0; max-width: 44ch; color: #e4e4e7; font-size: 17px; }
@media (max-width: 600px) { .pz-ill { margin-top: 18px; } .pz-sub { font-size: 15.5px; } }
/* giant crop hero */
.hc { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100svh - 84px); display: flex; flex-direction: column; justify-content: space-between; padding-top: clamp(48px, 7vw, 110px); }
.hc-pat { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(90deg, var(--hc-line) 0 1px, transparent 1px 22px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%); mask-image: linear-gradient(180deg, transparent, #000 60%); }
.hc-h { max-width: 15ch; font: 700 clamp(32px, 4.6vw, 70px)/1.05 var(--fmb-font-head); letter-spacing: -0.05em; color: var(--hd); }
.hc-h span { color: var(--or); }
.hc-giant { font: 800 24vw/.74 var(--fmb-font-head); letter-spacing: -0.075em; margin: 4vw 0 -2vw; white-space: nowrap; text-align: center; width: 100%; color: var(--hd); user-select: none; }
.hc-giant i { font-style: normal; color: var(--or); }
@media (max-width: 600px) { .hc { min-height: 0; padding-top: 40px; } .hc-h { font-size: clamp(30px, 9vw, 40px); } }
/* typographic hero */
.hero.tg { display: block; padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(24px, 4vw, 48px); }
.tg-meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: clamp(13px, 1.1vw, 15px); text-transform: uppercase; letter-spacing: .06em; color: var(--soft); padding-bottom: 14px; border-bottom: 1.5px solid var(--hd); }
.tg-h { margin: clamp(10px, 1.5vw, 20px) 0 0; font: 800 clamp(40px, 9vw, 150px)/.9 var(--fmb-font-head); letter-spacing: -0.06em; color: var(--hd); text-transform: uppercase; }
.tg-ph { display: none; } @media (max-width: 600px) { h1.tg-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tg-ph { display: block; } }
.tg-l { display: block; width: max-content; white-space: nowrap; padding-block: .02em; }
.tg-l em { font: italic 300 1em/1 var(--fmb-font); letter-spacing: -0.04em; text-transform: none; color: var(--or); margin-right: .06em; }
.tg-or { color: var(--or); }
.tg-lt { font-weight: 300; letter-spacing: -0.07em; } .tg-lt i { font-style: normal; color: var(--or); font-weight: 800; }
.tg-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: clamp(14px, 2vw, 24px); padding-top: 14px; border-top: 1.5px solid var(--hd); font: 600 clamp(12px, 1.2vw, 16px) var(--fmb-font-head); letter-spacing: -0.02em; text-transform: uppercase; color: var(--hd); }
.tg-foot span:nth-child(odd) { color: var(--or); }

@media (max-width: 900px) { .why { grid-template-columns: 1fr; } }
/* pricing */
.bill { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--fmb-r, 3px); padding: 3px; }
.bill button { padding: 9px 14px; border-radius: 2px; font-size: 13.5px; font-weight: 600; color: var(--soft); transition: background 250ms ease, color 250ms ease; } .bill button[aria-pressed="true"] { background: var(--or); color: var(--or-ink); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plan { border: 1px solid var(--line); border-radius: var(--fmb-r, 3px); padding: 0 24px 26px; display: flex; flex-direction: column; gap: 12px; transition: transform 500ms cubic-bezier(.22,1,.36,1), border-color 300ms ease; }
.plan:hover { transform: translateY(-4px); border-color: var(--line2); }
.plan.hot { background: linear-gradient(160deg, var(--hot), var(--card2) 65%); border-color: var(--hot-line); }
.plan-tag { align-self: flex-start; margin: -1px 0 10px -25px; padding: 10px 22px; background: var(--chip); color: var(--chip-ink); font: 700 17px/1 var(--fmb-font-head); letter-spacing: -0.03em; border-radius: var(--fmb-r, 3px) 0 3px 0; }
.plan.hot .plan-tag { background: var(--or); color: var(--or-ink); }
.plan-sub { font-size: 14px; }
.plan-price { font: 700 clamp(38px, 3.6vw, 50px)/1 var(--fmb-font-head); letter-spacing: -0.06em; color: var(--hd); display: flex; align-items: baseline; gap: 6px; overflow: hidden; }
.plan.hot .plan-price { color: var(--or); }
.plan-price small { font: 400 14px var(--fmb-font); letter-spacing: 0; color: var(--text); }
.plan ul { display: grid; gap: 9px; padding: 16px 0 20px; border-top: 1px solid var(--line); flex: 1; font-size: 14.5px; color: var(--soft); }
.plan li { padding-left: 22px; position: relative; } .plan li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 11px; height: 6px; border-left: 2px solid var(--or); border-bottom: 2px solid var(--or); transform: rotate(-45deg); }
.plan .b { justify-content: center; }
.one-off { margin-top: 26px; padding: 18px 22px; border: 1px dashed var(--line2); border-radius: var(--fmb-r, 3px); color: var(--soft); }
.one-off a { color: var(--or); font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
/* reviews */
.revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rev { margin: 0; border: 1px solid var(--line); border-radius: var(--fmb-r, 3px); padding: 22px; display: grid; gap: 16px; align-content: start; transition: border-color 300ms ease, transform 500ms cubic-bezier(.22,1,.36,1); }
.rev:hover { border-color: var(--line2); transform: translateY(-4px); }
.rev-top { display: flex; justify-content: space-between; align-items: center; } .qm { font: 700 48px/0.6 var(--fmb-font-head); color: var(--hd); height: 24px; } .stars { display: flex; gap: 3px; color: var(--or); }
.rev blockquote { margin: 0; color: var(--hd); font-weight: 500; font-size: 15px; line-height: 1.55; }
.rev figcaption { display: flex; align-items: center; gap: 12px; font-size: 13px; } .rev figcaption b { display: block; color: var(--hd); font-size: 14px; }
.av { width: 40px; height: 40px; border-radius: 50%; background: var(--card2); color: var(--or); display: grid; place-items: center; font: 700 15px/1 var(--fmb-font-head); flex: none; }
@media (max-width: 900px) { .revs { grid-template-columns: 1fr; } }
/* crossing bands */
.bands { position: relative; height: 210px; margin-top: clamp(80px, 9vw, 120px); overflow: hidden; }
.band { position: absolute; left: -5%; right: -5%; top: 50%; padding: 16px 0; overflow: hidden; }
.band-a { background: var(--or); color: var(--ink); transform: translateY(-50%) rotate(-3deg); z-index: 1; }
.band-b { background: var(--chip); color: var(--chip-ink); transform: translateY(-50%) rotate(3deg); }
.band-track { display: flex; width: max-content; animation: tick 36s linear infinite; font: 800 clamp(20px, 2.3vw, 30px)/1 var(--fmb-font-head); letter-spacing: -0.04em; text-transform: uppercase; }
.band-b .band-track { animation-direction: reverse; }
.band-track span { display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; white-space: nowrap; } .band-track span::after { content: ""; width: 26px; height: 26px; border-radius: 50%; background: currentColor; }
@keyframes tick { to { transform: translateX(-50%); } }
/* faq */
.fq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.fq-side { position: sticky; top: 110px; background: var(--sand); color: var(--ink); border-radius: 6px; padding: clamp(24px, 2.8vw, 40px); display: grid; gap: 18px; overflow: hidden; --sel-bg: var(--ink); --sel-ink: #ffffff; }
.fq-side h2 { color: var(--ink); font-size: clamp(28px, 3.2vw, 46px); line-height: 1.04; letter-spacing: -0.05em; }
.fq-side .eyebrow { color: #c24f00; }
.fq-ill { position: relative; margin: 0; height: clamp(200px, 22vw, 290px); }
.fq-sun { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; max-width: 100%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--or); opacity: .14; transition: scale 900ms cubic-bezier(.22,1,.36,1); }
.fq-ill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform 900ms cubic-bezier(.22,1,.36,1); animation: floaty 6s ease-in-out infinite; }
.fq-side:hover .fq-ill img { transform: rotate(-4deg) scale(1.04); } .fq-side:hover .fq-sun { scale: 1.12; }
.fq-note { color: #4b5563; font-size: 14.5px; max-width: 38ch; }
.fq-btn { background: var(--ink); color: #ffffff; } .fq-btn:hover { background: var(--or); color: var(--or-ink); }
.qs { display: grid; border-top: 1.5px solid var(--hd); }
.q { border-bottom: 1.5px solid var(--line); position: relative; }
.q::before { content: ""; position: absolute; left: 0; bottom: -1.5px; height: 1.5px; width: 100%; background: var(--or); transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms cubic-bezier(.22,1,.36,1); }
.q[open]::before, .q:hover::before { transform: none; }
.q summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: clamp(20px, 2.2vw, 28px) 0; color: var(--hd); font: 600 clamp(16px, 1.5vw, 20px)/1.3 var(--fmb-font-head); letter-spacing: -0.035em; }
.q summary span { transition: transform 500ms cubic-bezier(.22,1,.36,1), color 300ms ease; }
.q:hover summary span { transform: translateX(8px); }
.q[open] summary span { color: var(--or); transform: none; }
.q summary i { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--hd); color: var(--hd); transition: transform 500ms cubic-bezier(.34,1.56,.64,1), background 250ms ease, color 250ms ease, border-color 250ms ease; }
.q:hover summary i { background: var(--hd); color: var(--bg); }
.q[open] summary i { transform: rotate(135deg); background: var(--or); border-color: var(--or); color: var(--or-ink); }
.qa { overflow: hidden; }
.q p { padding: 0 64px clamp(20px, 2.2vw, 28px) 0; max-width: 64ch; font-size: 15px; line-height: 1.7; color: var(--text); }
.q[open] p { animation: qIn 600ms cubic-bezier(.22,1,.36,1) both; }
@keyframes qIn { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 900px) { .fq { grid-template-columns: 1fr; } .fq-side { position: static; } .q p { padding-right: 0; } }
@media (prefers-reduced-motion: reduce) { .fq-ill img, .q[open] p { animation: none; } }
/* contact: black band + ForgeTraq form box */
.contact { margin-top: clamp(80px, 9vw, 120px); background: #000; color: #b4b4bb; padding-block: clamp(72px, 9vw, 120px); position: relative; overflow: hidden; --sel-bg: #ffffff; --sel-ink: var(--ink); }
.fp-block:has(> .pgh-dark, > .contact-dark) + .fp-block > .contact-dark { margin-top: 0; }
.contact::before { content: ""; position: absolute; width: 60vw; max-width: 760px; aspect-ratio: 1; border-radius: 50%; left: -18vw; bottom: -38vw; background: radial-gradient(closest-side, color-mix(in srgb, var(--or) 22%, transparent), transparent); pointer-events: none; animation: glow 9s ease-in-out infinite; }
@keyframes glow { 50% { transform: translate(6vw, -3vw) scale(1.1); } }
.contact-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; position: relative; }
.c-left { display: grid; gap: 20px; align-content: start; }
.c-h { color: #f5f5f5; font-size: clamp(30px, 4vw, 58px); line-height: 1.04; letter-spacing: -0.055em; font-weight: 700; }
.c-h span { color: var(--or); display: block; }
.c-lead { font-size: 16px; max-width: 42ch; }
.c-rows { display: grid; margin-top: 14px; border-top: 1.5px solid #2a2a2f; }
.c-rows li { display: flex; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1.5px solid #2a2a2f; transition: padding 400ms cubic-bezier(.22,1,.36,1); }
.c-rows li:hover { padding-left: 8px; }
.c-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #3a3a40; color: var(--or); transition: background 300ms ease, color 300ms ease, border-color 300ms ease, transform 500ms cubic-bezier(.34,1.56,.64,1); }
.c-rows li:hover .c-ic { background: var(--or); color: var(--or-ink); border-color: var(--or); transform: rotate(-10deg) scale(1.06); }
.c-rows small { display: block; font-size: 12.5px; color: #8b8b93; text-transform: uppercase; letter-spacing: .06em; }
.c-rows b { color: #f5f5f5; font-weight: 500; font-size: 15px; }
.c-box { background: #ffffff; color: var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--or) 60%, transparent); --sel-bg: var(--ink); --sel-ink: #ffffff; transition: transform 600ms cubic-bezier(.22,1,.36,1); }
.c-box-top { background: var(--or); color: var(--or-ink); padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 40px) clamp(20px, 2.4vw, 28px); position: relative; overflow: hidden; }
.c-box-top::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; aspect-ratio: 1; border-radius: 50%; border: 28px solid rgb(22 10 0 / .08); animation: spinR 18s linear infinite; }
@keyframes spinR { to { transform: rotate(360deg) scale(1.05); } }
.c-kicker { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.c-box-top h3 { font: 800 clamp(26px, 2.8vw, 38px)/1.05 var(--fmb-font-head); letter-spacing: -0.055em; margin: 10px 0 18px; color: var(--or-ink); }
.c-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.c-steps li { display: inline-flex; align-items: center; gap: 8px; background: rgb(22 10 0 / .1); border-radius: 99px; padding: 6px 14px 6px 6px; font-size: 13px; font-weight: 500; }
.c-steps b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--or-ink); color: var(--or); font: 700 11px/1 var(--fmb-font-head); }
.c-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--or-ink); box-shadow: 0 0 0 0 rgb(22 10 0 / .45); animation: ping 2.2s ease-out infinite; }
@keyframes ping { 70%, 100% { box-shadow: 0 0 0 9px rgb(22 10 0 / 0); } }
.c-embed { padding: clamp(22px, 3vw, 40px); }
.c-embed iframe { display: block; width: 100%; min-height: 560px; border: 0; }
.c-form { display: grid; gap: 22px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.fl { position: relative; display: block; }
.fl input, .fl textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; padding: 24px 0 8px; outline: none; resize: vertical; }
.fl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--or); transform: scaleX(0); transform-origin: 0 50%; transition: transform 500ms cubic-bezier(.22,1,.36,1); }
.fl:focus-within::after { transform: none; }
.fl textarea ~ span, .fl span { position: absolute; left: 0; top: 22px; font-size: 16px; color: #6b7280; pointer-events: none; transform-origin: 0 0; transition: transform 300ms cubic-bezier(.22,1,.36,1), color 250ms ease; }
.fl input:focus + span, .fl input:not(:placeholder-shown) + span, .fl textarea:focus + span, .fl textarea:not(:placeholder-shown) + span { transform: translateY(-20px) scale(.76); color: #c24f00; }
.c-pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.c-pick legend { font-size: 13px; font-weight: 600; color: #4b5563; margin-bottom: 10px; padding: 0; }
.c-pick label { cursor: pointer; }
.c-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.c-pick span { display: inline-block; padding: 8px 14px; border-radius: 99px; border: 1.5px solid #d4d4d8; font-size: 13.5px; transition: background 250ms ease, border-color 250ms ease, color 250ms ease, transform 400ms cubic-bezier(.34,1.56,.64,1); }
.c-pick label:hover span { border-color: var(--ink); }
.c-pick input:checked + span { background: var(--ink); border-color: var(--ink); color: #ffffff; transform: scale(1.04); }
.c-pick input:focus-visible + span { outline: 2.5px solid var(--or); outline-offset: 2px; }
.c-send { width: 100%; justify-content: center; padding-block: 18px; background: var(--ink); color: #ffffff; font-size: 15.5px; }
.c-send:hover { background: var(--or); color: var(--or-ink); transform: none; }
.c-send.sent { background: var(--or); color: var(--or-ink); animation: sent 600ms cubic-bezier(.34,1.56,.64,1); }
@keyframes sent { 40% { transform: scale(.97); } }
@media (max-width: 900px) { .contact-in { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .two { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .contact::before, .c-dot { animation: none; } }
@media (max-width: 480px) { .two { grid-template-columns: 1fr; } }
/* footer */
.ft { padding-top: 64px; border-top: 1px solid var(--line); }
.ft-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.ft-brand { display: grid; gap: 16px; align-content: start; } .ft-brand p { max-width: 34ch; font-size: 14px; }
.ft h4 { font: 600 15px/1 var(--fmb-font-head); color: var(--hd); margin-bottom: 14px; }
.ft-in > div:not(.ft-brand) { display: grid; gap: 9px; align-content: start; font-size: 14px; } .ft-in a:hover { color: var(--or); }
.ft-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-block: 22px; border-top: 1px solid var(--line); font-size: 13px; }
.ft-soc { display: flex; gap: 8px; } .ft-soc a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line2); color: var(--hd); transition: background 250ms ease, color 250ms ease, transform 400ms cubic-bezier(.22,1,.36,1); } .ft-soc a:hover { background: var(--or); color: var(--or-ink); box-shadow: none; transform: scale(1.1); } .ft-soc svg { width: 16px; height: 16px; } .ft-bottom { align-items: center; }
@media (max-width: 900px) { .ft-in { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .ring, .band-track { animation: none; } }

/* ===== content and theme additions ===== */
.theme { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--hd); box-shadow: inset 0 0 0 1px var(--line2); flex: none; transition: background 250ms ease, color 250ms ease, transform 500ms cubic-bezier(.22,1,.36,1); }
.theme:hover { background: var(--or); color: var(--or-ink); box-shadow: none; transform: rotate(20deg); }
.theme .i-moon { display: none; }
:root[data-theme="dark"] .theme .i-sun { display: none; } :root[data-theme="dark"] .theme .i-moon { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme .i-sun { display: none; } :root:not([data-theme="light"]) .theme .i-moon { display: block; } }
.hd-cta { margin-left: 4px; }
.hero h1 .l2 { color: var(--or); }
.hero h1 { font-size: clamp(34px, 5.5vw, 84px); line-height: 1.06; }
.hero-row { grid-template-columns: minmax(0, 0.5fr) auto 1fr !important; }
.hero-side { justify-self: end; display: grid; gap: 22px; justify-items: end; max-width: 400px; }
.hero-side .hero-p { grid-column: auto; grid-row: auto; align-self: auto; padding: 0; margin: 0; text-align: right; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.45; color: var(--soft); }
@media (max-width: 900px) { .hero-row { grid-template-columns: 1fr !important; } .hero-side { justify-self: start; justify-items: start; } .hero-side .hero-p { text-align: left; } }
.sv a { padding: 16px 0; } .sv-t { font-size: clamp(20px, 2.3vw, 32px); }
.svc { align-items: start; } @media (min-width: 901px) { .badge { position: sticky; top: 130px; } }
.case-two { margin-top: 0; }
.case-two .case-pic .mk { aspect-ratio: 4/3; }
.case-client { font-size: 13px; color: var(--or); font-weight: 600; }
.cp-1 .mk-toho { grid-template: 1.3fr 1fr / 1fr 1fr; } .cp-1 .tb-logo { grid-column: 1 / -1; } .cp-1 .tb-logo b, .cp-1 .tb-mono { font-size: clamp(36px, 4.4vw, 64px); }
.why-l { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .why-l { grid-template-columns: 1fr; } }
.rev h3 { font-size: 20px; letter-spacing: -0.04em; } .rev p { font-size: 14.5px; } .rev .step-go { position: static; }
.rev .av { background: var(--or); color: var(--or-ink); }
a.rev:hover h3 { color: var(--or); } a.rev:hover .step-go { transform: scale(1.12); background: var(--or); color: var(--or-ink); box-shadow: none; }
.c-card span:last-child { max-width: 34ch; } .av.big svg { width: 50%; height: 62%; }
:root { --about-bg: #f5f5f5; }
.logo .fmb-logo { height: 60px; width: auto; display: block; transition: transform 500ms cubic-bezier(.22,1,.36,1); } .logo:hover .fmb-logo { transform: rotate(-4deg) scale(1.04); }
.ft-brand .fmb-logo { height: 104px; }
@media (max-width: 480px) { .logo .fmb-logo { height: 50px; } }
.av-logo { background: transparent !important; width: 76px !important; height: 76px !important; } .av-logo .fmb-logo { width: 100%; height: 100%; }
/* motion layer */
.pz-h .ln { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.pz-h .ln > span { display: inline-block; }
.fmb-rv .pz-h .ln > span { transform: translateY(105%); animation: lnUp 1100ms cubic-bezier(.19,1,.22,1) forwards; animation-delay: calc(120ms + var(--l) * 110ms); }
@keyframes lnUp { to { transform: none; } }
.fmb-rv .pz-h i { display: inline-block; animation: dotPop 700ms cubic-bezier(.34,1.56,.64,1) 900ms both; }
@keyframes dotPop { from { transform: scale(0); } to { transform: scale(1); } }
.fmb-rv .pz-sun { animation: sunIn 1300ms cubic-bezier(.19,1,.22,1) 500ms both; }
@keyframes sunIn { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.pz-ill img { animation: floaty 6s ease-in-out 1.6s infinite; }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.pz-ill { will-change: transform; }
/* picture reveal: wipe up */
.fmb-rv .about-team[data-r] > video, .fmb-rv .why-ill[data-r] > img, .fmb-rv .case[data-r] .case-pic { clip-path: inset(100% 0 0 0); transition: clip-path 1200ms cubic-bezier(.19,1,.22,1) 120ms; }
.fmb-rv .about-team[data-r].in > video, .fmb-rv .why-ill[data-r].in > img, .fmb-rv .case[data-r].in .case-pic { clip-path: inset(0 0 0 0); }
.fmb-rv .case[data-r] .case-pic > * { transform: scale(1.12); transition: transform 1600ms cubic-bezier(.19,1,.22,1); }
.fmb-rv .case[data-r].in .case-pic > * { transform: none; }
.case .case-pic { overflow: hidden; }
/* headings: slight blur-in */
.fmb-rv h2[data-r] { filter: blur(6px); transition: opacity 700ms ease, transform 900ms cubic-bezier(.22,1,.36,1), filter 900ms ease; }
.fmb-rv h2[data-r].in { filter: none; }
/* buttons: arrow nudge + press */
.b svg { transition: transform 400ms cubic-bezier(.22,1,.36,1); }
.b:hover svg { transform: translateX(4px); }
.b:active { transform: scale(.97); }
/* back to top */
.totop { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 50; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--or); color: var(--or-ink); box-shadow: 0 10px 30px -10px var(--shadow); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.8); transition: opacity 400ms ease, transform 500ms cubic-bezier(.34,1.56,.64,1), visibility 0s linear 400ms, background 250ms ease, color 250ms ease; }
.totop.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.totop:hover { background: var(--hd); color: var(--bg); transform: translateY(-4px); }
.totop:active { transform: scale(.92); }
.totop-ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); rotate: -90deg; pointer-events: none; }
.totop-ring circle { fill: none; stroke-width: 2.5; }
.totop-ring circle:first-child { stroke: var(--line2); opacity: .25; }
.totop-bar { stroke: var(--or); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); stroke-linecap: round; }
.totop:hover .totop-arr { animation: arrUp 700ms cubic-bezier(.22,1,.36,1); }
@keyframes arrUp { 0% { transform: none; } 45% { transform: translateY(-140%); opacity: 0; } 46% { transform: translateY(140%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (max-width: 600px) { .totop { width: 46px; height: 46px; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) {
  .fmb-rv .pz-h .ln > span, .fmb-rv .pz-h i, .fmb-rv .pz-sun, .pz-ill img { animation: none; transform: none; opacity: 1; }
  .fmb-rv .about-team[data-r] > video, .fmb-rv .why-ill[data-r] > img, .fmb-rv .case[data-r] .case-pic { clip-path: none; }
  .fmb-rv .case[data-r] .case-pic > * { transform: none; } .fmb-rv h2[data-r] { filter: none; }
  .totop, .totop.on { transition: opacity 200ms ease, visibility 0s; transform: none; } .totop:hover .totop-arr { animation: none; }
}
/* why: bento */
:root { --bt-k: var(--ink); --bt-k-line: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bt-k: #141416; --bt-k-line: #2a2a2f; } }
:root[data-theme="dark"] { --bt-k: #141416; --bt-k-line: #2a2a2f; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: 14px; }
.bt { border-radius: 6px; padding: clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 10px; transition: transform 500ms cubic-bezier(.22,1,.36,1), box-shadow 500ms ease; }
.fmb-rv .bt[data-r].in:hover, .bt:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -26px var(--shadow); }
.bento .bt h3, .bento .bt p { color: inherit; } .bento .bt-big .eyebrow { color: var(--or); opacity: 1; } .bento .bt-cr p, .bento .bt-wh p, .bento .bt-k p { opacity: .82; }
.bt h3 { font-size: clamp(17px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.2; }
.bt p { font-size: 14.5px; }
.bt-n { font: 800 15px/1 var(--fmb-font-head); margin-bottom: auto; }
.bt-or { background: var(--or); color: var(--or-ink); } 
.bt-cr { background: var(--sand); color: var(--ink); } .bt-cr .bt-n { color: #c24f00; }
.bt-wh { background: var(--bg); color: var(--hd); border: 1.5px solid var(--line); } .bt-wh .bt-n { color: var(--or); }
.bt-k { background: var(--bt-k); color: #f5f5f5; border: 1.5px solid var(--bt-k-line); } .bt-k .bt-n { color: var(--or); }
.bt-wide { grid-column: span 2; }
.bt-big { grid-column: span 2; grid-row: span 2; position: relative; overflow: hidden; background: var(--bt-k); border: 1.5px solid var(--bt-k-line); color: #f5f5f5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 16px; padding: clamp(24px, 2.6vw, 36px); --sel-bg: #ffffff; --sel-ink: var(--ink); }
.bt-txt { display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 1; }
.bt-big h2 { font-size: clamp(26px, 3vw, 42px); line-height: 1.05; letter-spacing: -0.05em; color: #f5f5f5; }
.bt-btn { margin-top: auto; align-self: flex-start; background: var(--or); color: var(--or-ink); } .bt-btn:hover { background: #ffffff; color: var(--ink); }
.bt-ill { position: relative; margin: 0; min-height: 360px; }
.bt-sun { position: absolute; left: 50%; bottom: 6%; width: 120%; max-width: 330px; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--sand); transition: transform 900ms cubic-bezier(.22,1,.36,1); }
.bt-ill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: transform 900ms cubic-bezier(.22,1,.36,1); }
.bt-big:hover .bt-ill img { transform: translateY(-12px) rotate(3deg); }
.bt-big:hover .bt-sun { transform: scale(1.06); }
.fmb-rv .bt-big[data-r] .bt-ill img { opacity: 0; translate: 0 40px; scale: .94; filter: blur(6px); transition: opacity 1400ms ease 350ms, translate 1600ms cubic-bezier(.16,1,.3,1) 350ms, scale 1600ms cubic-bezier(.16,1,.3,1) 350ms, filter 1200ms ease 350ms, transform 900ms cubic-bezier(.22,1,.36,1); }
.fmb-rv .bt-big[data-r].in .bt-ill img.ok { opacity: 1; translate: 0 0; scale: 1; filter: none; }
.fmb-rv .bt-big[data-r] .bt-sun { scale: .4; opacity: 0; transition: scale 1200ms cubic-bezier(.19,1,.22,1), opacity 600ms ease, transform 900ms cubic-bezier(.22,1,.36,1); }
.fmb-rv .bt-big[data-r].in .bt-sun { scale: 1; opacity: 1; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } .bt-big { grid-row: span 1; } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } .bt-big, .bt-wide { grid-column: auto; } .bt-big { grid-template-columns: 1fr; } .bt-ill { min-height: 380px; } .bt { min-height: 180px; } }
@media (prefers-reduced-motion: reduce) { .fmb-rv .bt-big[data-r] .bt-ill img { opacity: 1; translate: none; scale: none; filter: none; transition: none; } .fmb-rv .bt-big[data-r] .bt-sun { scale: 1; opacity: 1; } }
/* header products dropdown */
.nav { align-items: center; }
.nav-dd { position: relative; }
.nav-dd .nav-dd-t b { transition: transform 400ms cubic-bezier(.22,1,.36,1); }
.nav-dd:hover .nav-dd-t b, .nav-dd:focus-within .nav-dd-t b, .nav-dd.on .nav-dd-t b { transform: rotate(180deg); }
.dd { position: absolute; left: 50%; top: 100%; padding-top: 26px; width: min(760px, 92vw); translate: -50% 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 250ms ease, transform 450ms cubic-bezier(.22,1,.36,1), visibility 0s linear 250ms; z-index: 60; }
.nav-dd:hover .dd, .nav-dd:focus-within .dd, .nav-dd.on .dd { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd::before { content: ""; position: absolute; left: 50%; top: 20px; width: 14px; height: 14px; background: #111113; border-left: 1px solid #2a2a2f; border-top: 1px solid #2a2a2f; translate: -50% 0; rotate: 45deg; }
.dd-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; background: #111113; border: 1px solid #2a2a2f; border-radius: 10px 10px 0 0; padding: 12px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7); }
.nav .dd-c { position: relative; display: grid; gap: 14px; align-content: start; padding: 18px; border-radius: 8px; background: #18181b; color: #f5f5f5; transition: background 300ms ease, transform 400ms cubic-bezier(.22,1,.36,1); }
.nav .dd-c:hover { background: var(--or); color: var(--or-ink); transform: translateY(-3px); }
.dd-mk { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--or); color: var(--or-ink); font: 800 20px/1 var(--fmb-font-head); transition: background 300ms ease, color 300ms ease, transform 500ms cubic-bezier(.34,1.56,.64,1); }
.dd-c:hover .dd-mk { background: var(--or-ink); color: var(--or); transform: rotate(-8deg); }
.dd-tx { display: grid; gap: 6px; }
.dd-tx strong { font: 700 16px/1.2 var(--fmb-font-head); letter-spacing: -0.04em; }
.dd-tx small { font-size: 13px; line-height: 1.5; color: #b4b4bb; transition: color 300ms ease; }
.dd-c:hover .dd-tx small { color: #2a1400; }
.dd-go { position: absolute; right: 14px; top: 16px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #3a3a40; transition: transform 400ms cubic-bezier(.22,1,.36,1), border-color 300ms ease; }
.dd-go svg { width: 13px; height: 13px; }
.dd-c:hover .dd-go { border-color: var(--or-ink); transform: rotate(45deg); }
.nav .dd-all { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; background: var(--or); color: var(--or-ink); font-weight: 600; font-size: 14px; border-radius: 0 0 10px 10px; transition: background 250ms ease, color 250ms ease; }
.nav .dd-all:hover { background: #ffffff; color: var(--ink); }
.nav .dd-all svg { transition: transform 400ms cubic-bezier(.22,1,.36,1); } .nav .dd-all:hover svg { transform: translateX(4px); }
.fmb-rv .dd-c { opacity: 0; transform: translateY(8px); }
.nav-dd:hover .dd-c, .nav-dd:focus-within .dd-c, .nav-dd.on .dd-c { opacity: 1; transform: none; transition: opacity 400ms ease calc(var(--k, 0) * 60ms + 80ms), transform 500ms cubic-bezier(.22,1,.36,1) calc(var(--k, 0) * 60ms + 80ms), background 300ms ease; }
.dd-c:nth-child(2) { --k: 1; } .dd-c:nth-child(3) { --k: 2; }
@media (prefers-reduced-motion: reduce) { .dd, .dd-c { transition: none !important; } .fmb-rv .dd-c { transform: none; } }
/* forgetraq showcase */
:root { --ftq-bg: var(--sand); --ftq-ink: var(--ink); --ftq-soft: #4b5563; --ftq-line: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ftq-bg: #111113; --ftq-ink: #f5f5f5; --ftq-soft: #b4b4bb; --ftq-line: #3a3a40; } }
:root[data-theme="dark"] { --ftq-bg: #111113; --ftq-ink: #f5f5f5; --ftq-soft: #b4b4bb; --ftq-line: #3a3a40; }
.ftq { margin-top: clamp(80px, 9vw, 120px); background: var(--ftq-bg); color: var(--ftq-soft); padding-block: clamp(72px, 9vw, 120px); overflow: hidden; }
.ftq-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ftq-txt h2 { color: var(--ftq-ink); font-size: clamp(30px, 3.8vw, 54px); line-height: 1.04; letter-spacing: -0.055em; }
.ftq-lead { margin-top: 18px; font-size: 16px; max-width: 46ch; }
.ftq-tabs { margin-top: 30px; display: grid; border-top: 1.5px solid var(--ftq-line); }
.ftq-tab { position: relative; display: grid; gap: 4px; text-align: left; padding: 16px 0 18px; border-bottom: 1.5px solid var(--ftq-line); color: var(--ftq-ink); cursor: pointer; }
.ftq-tn { font: 700 clamp(17px, 1.7vw, 22px)/1.2 var(--fmb-font-head); letter-spacing: -0.045em; transition: color 300ms ease, transform 400ms cubic-bezier(.22,1,.36,1); }
.ftq-td { font-size: 14px; color: var(--ftq-soft); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 500ms cubic-bezier(.22,1,.36,1), opacity 400ms ease; }
.ftq-tab:hover .ftq-tn { transform: translateX(6px); }
.ftq-tab[aria-selected="true"] .ftq-tn { color: var(--or); transform: none; }
.ftq-tab[aria-selected="true"] .ftq-td { max-height: 60px; opacity: 1; }
.ftq-bar { position: absolute; left: 0; bottom: -1.5px; height: 2.5px; width: 100%; background: var(--or); transform: scaleX(0); transform-origin: 0 50%; }
.ftq-tab[aria-selected="true"] .ftq-bar { animation: ftbar var(--dur, 6s) linear forwards; }
.ftq.paused .ftq-tab[aria-selected="true"] .ftq-bar { animation: none; transform: none; }
@keyframes ftbar { to { transform: none; } }
.ftq-app { position: relative; }
.ft-win { background: var(--ink); color: #f5f5f5; border-radius: 12px; border: 1px solid #2a2a2f; box-shadow: 0 50px 100px -50px rgb(12 12 13 / .55), 0 0 0 10px color-mix(in srgb, var(--or) 10%, transparent); overflow: hidden; }
.ft-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid #232327; }
.ft-dots { display: flex; gap: 6px; } .ft-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a40; } .ft-dots i:first-child { background: var(--or); }
.ft-url { font-size: 12.5px; color: #8b8b93; background: #18181b; padding: 5px 12px; border-radius: 99px; }
.ft-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 400px; }
.ft-side { border-right: 1px solid #232327; padding: 16px 10px; display: grid; align-content: start; gap: 4px; }
.ft-proj { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; padding: 4px 8px 14px; }
.ft-proj b { width: 28px; height: 28px; border-radius: 7px; background: var(--or); color: var(--or-ink); display: grid; place-items: center; font: 800 13px/1 var(--fmb-font-head); }
.ft-nav { font-size: 13.5px; color: #b4b4bb; padding: 9px 10px; border-radius: 6px; transition: background 300ms ease, color 300ms ease; }
.ft-nav.on { background: var(--or); color: var(--or-ink); font-weight: 600; }
.ft-main { padding: 20px 22px; position: relative; }
.ft-h { font: 700 18px/1.2 var(--fmb-font-head); letter-spacing: -0.04em; margin-bottom: 16px; }
.ft-pane:not([hidden]) { animation: paneIn 600ms cubic-bezier(.22,1,.36,1) both; }
@keyframes paneIn { from { opacity: 0; transform: translateY(14px); } }
.ft-pane:not([hidden]) li, .ft-pane:not([hidden]) .ft-msg { animation: paneIn 600ms cubic-bezier(.22,1,.36,1) both; }
.ft-pane li:nth-child(2), .ft-msg.t { animation-delay: 90ms !important; } .ft-pane li:nth-child(3) { animation-delay: 180ms !important; } .ft-pane li:nth-child(4) { animation-delay: 270ms !important; } .ft-pane li:nth-child(5) { animation-delay: 360ms !important; }
.ft-prog { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 13px; margin-bottom: 16px; } .ft-prog span { color: #b4b4bb; } .ft-prog b { color: var(--or); font-weight: 600; }
.ft-prog i { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: #232327; overflow: hidden; }
.ft-prog em { display: block; height: 100%; width: var(--w); background: var(--or); border-radius: inherit; }
.ft-pane:not([hidden]) .ft-prog em { animation: grow 1200ms cubic-bezier(.22,1,.36,1) 200ms both; }
@keyframes grow { from { width: 0; } }
.ft-ms { display: grid; gap: 8px; }
.ft-ms li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; background: #141416; font-size: 14px; }
.ft-ms small { font-size: 12px; color: #8b8b93; }
.ft-st { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #3a3a40; display: grid; place-items: center; }
.ft-ms .done .ft-st { background: var(--or); border-color: var(--or); color: var(--or-ink); } .ft-ms .done { color: #8b8b93; }
.ft-ms .now { background: #1d1410; box-shadow: inset 0 0 0 1px #4a2a12; } .ft-ms .now small { color: var(--or); }
.ft-ms .now .ft-st { border-color: var(--or); border-top-color: transparent; animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ft-fb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ft-art { position: relative; aspect-ratio: 1; border-radius: 8px; background: var(--sand); display: grid; place-items: center; }
.ft-logo { font: 800 clamp(22px, 2.4vw, 34px)/.9 var(--fmb-font-head); letter-spacing: -0.06em; color: var(--ink); text-transform: uppercase; } .ft-logo i { color: var(--or); font-style: normal; }
.ft-pin { position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: var(--or); color: var(--or-ink); font: 700 12px/26px var(--fmb-font); text-align: center; box-shadow: 0 0 0 0 color-mix(in srgb, var(--or) 60%, transparent); animation: ping 2s ease-out infinite; }
.ft-thread { display: grid; gap: 10px; align-content: start; }
.ft-msg { font-size: 13.5px; line-height: 1.5; padding: 10px 12px; border-radius: 10px; background: #18181b; } .ft-msg b { display: block; font-size: 12px; color: #8b8b93; margin-bottom: 2px; }
.ft-msg.t { background: var(--or); color: var(--or-ink); } .ft-msg.t b { color: #4a2400; }
.ft-typing { display: flex; gap: 4px; padding: 8px 12px; } .ft-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8b8b93; animation: dot 1.2s ease-in-out infinite; } .ft-typing i:nth-child(2) { animation-delay: .15s; } .ft-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-4px); opacity: .4; } }
.ft-ap { display: grid; gap: 10px; }
.ft-ap li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 14px; border-radius: 8px; background: #141416; }
.ft-ap b { display: block; font-size: 14px; font-weight: 600; } .ft-ap small { font-size: 12px; color: #8b8b93; }
.ft-ap .ok em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; color: var(--or); font-size: 13px; font-weight: 600; }
.ft-ap .muted { opacity: .5; }
.ft-btns { display: flex; gap: 6px; }
.ft-btns button { font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 6px; cursor: pointer; transition: transform 300ms cubic-bezier(.34,1.56,.64,1), background 250ms ease; }
.ft-yes { background: var(--or); color: var(--or-ink); } .ft-no { background: #232327; color: #f5f5f5; }
.ft-btns button:hover { transform: translateY(-2px); } .ft-btns button:active { transform: scale(.95); }
.ft-ap li.just { box-shadow: inset 0 0 0 1.5px var(--or); }
.ft-dl { display: grid; gap: 8px; }
.ft-dl li { display: grid; grid-template-columns: 44px 1fr 34px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: #141416; transition: background 300ms ease; }
.ft-dl li:hover { background: #1d1410; }
.ft-ext { height: 44px; border-radius: 8px; background: var(--sand); color: var(--ink); display: grid; place-items: center; font: 800 11px/1 var(--fmb-font-head); }
.ft-dl b { display: block; font-size: 14px; font-weight: 600; } .ft-dl small { font-size: 12px; color: #8b8b93; }
.ft-dl a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--or); color: var(--or-ink); transition: transform 400ms cubic-bezier(.34,1.56,.64,1); } .ft-dl a:hover { transform: translateY(3px); }
.ft-toast { position: absolute; right: -14px; bottom: 36px; display: flex; align-items: center; gap: 10px; background: #ffffff; color: var(--ink); font-size: 13.5px; font-weight: 600; padding: 12px 16px; border-radius: 10px; box-shadow: 0 20px 40px -18px rgb(0 0 0 / .45); animation: toast 7s cubic-bezier(.22,1,.36,1) 1.5s infinite both; }
.ft-toast span { width: 24px; height: 24px; border-radius: 50%; background: var(--or); color: var(--or-ink); display: grid; place-items: center; }
@keyframes toast { 0% { opacity: 0; transform: translateY(16px) scale(.96); } 8%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-8px); } }
.ftq-cap { margin-top: 14px; font-size: 12.5px; color: var(--ftq-soft); text-align: right; }
@media (max-width: 1000px) { .ftq-in { grid-template-columns: 1fr; } .ft-toast { right: 8px; } }
@media (max-width: 600px) { .ft-body { grid-template-columns: 1fr; } .ft-side { display: flex; overflow-x: auto; gap: 6px; border-right: 0; border-bottom: 1px solid #232327; padding: 10px; } .ft-proj { display: none; } .ft-nav { white-space: nowrap; } .ft-fb { grid-template-columns: 1fr; } .ft-art { aspect-ratio: 16 / 9; } .ft-main { padding: 16px; } .ft-toast { display: none; } }
@media (prefers-reduced-motion: reduce) { .ft-pane:not([hidden]), .ft-pane li, .ft-msg, .ft-prog em, .ft-ms .now .ft-st, .ft-pin, .ft-typing i { animation: none !important; } .ft-toast { animation: none; opacity: 1; } .ftq-tab[aria-selected="true"] .ftq-bar { animation: none; transform: none; } }

/* pixel cursor (sample 06) */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2036%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%226%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%226%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%228%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%224%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%226%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%228%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%224%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%226%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%224%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%226%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%228%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%224%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%226%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%228%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%224%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%226%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%228%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%224%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%226%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%228%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%224%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%226%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%228%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%224%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%226%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%224%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2234%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2234%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3C/svg%3E") 1 1, auto; }
  a, button, summary, label, select, [role="tab"], .ft-nav, .c-pick span, .theme, .burger { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2234%22%20viewBox%3D%220%200%2032%2034%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2210%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2210%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2210%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2212%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%226%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2210%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2212%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2214%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2216%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%226%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%228%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%226%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%228%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2226%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%226%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2226%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%224%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%226%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%228%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2226%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2230%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%224%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%226%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%228%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2226%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2230%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%224%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%226%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%228%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2226%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2230%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%224%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%226%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%228%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2226%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2230%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%224%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%226%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%228%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2226%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%226%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%228%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2226%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%226%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%228%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2226%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%228%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ff6d00%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%228%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2212%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2218%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230c0c0d%22/%3E%3C/svg%3E") 9 1, pointer; }
  input, textarea { cursor: text; }
}
.fire-cv { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; image-rendering: pixelated; }
.firing, .firing * { -webkit-user-select: none; user-select: none; }
.pz { position: relative; isolation: isolate; }
.pz-embers { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; z-index: 0; pointer-events: none; image-rendering: pixelated; -webkit-mask-image: linear-gradient(to top, #000 55%, transparent); mask-image: linear-gradient(to top, #000 55%, transparent); }
.pz > .ct { position: relative; z-index: 1; }

/* footer 09 */
.ft9 { background: var(--bg); color: var(--text); border-top: 3px solid var(--or); }
.ft9-g { display: grid; grid-template-columns: 1.3fr .8fr 1.2fr .8fr; gap: 36px; padding-block: 56px; }
.ft9-b { display: grid; gap: 16px; align-content: start; } .ft9-b p { font-size: 14.5px; max-width: 34ch; }
.ft9 .logo .fmb-logo { height: 64px; }
.ft9-c { display: grid; gap: 10px; align-content: start; }
.ft9-c h4 { font: 600 14px/1.2 var(--fmb-font-head); letter-spacing: -0.02em; color: var(--hd); margin-bottom: 6px; }
.ft9-c a { font-size: 14.5px; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 400ms cubic-bezier(.22,1,.36,1), color 250ms ease, transform 400ms cubic-bezier(.22,1,.36,1); }
.ft9-c a:hover { color: var(--or); background-size: 100% 1.5px; transform: translateX(4px); }
.ft9-soc { display: flex; flex-wrap: wrap; gap: 8px; }
.ft9-soc a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); color: var(--hd); transition: background 250ms ease, color 250ms ease, border-color 250ms ease, transform 500ms cubic-bezier(.34,1.56,.64,1); }
.ft9-soc a svg { width: 16px; height: 16px; }
.ft9-soc a:hover { background: var(--or); border-color: var(--or); color: var(--or-ink); transform: translateY(-4px) rotate(-8deg); }
.ft9-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-block: 22px; font-size: 13.5px; border-top: 1px solid var(--line); }
.ft9-leg { display: flex; flex-wrap: wrap; gap: 6px 20px; } .ft9-leg a:hover { color: var(--or); }
@media (max-width: 900px) { .ft9-g { grid-template-columns: 1fr 1fr; } .ft9-b { grid-column: 1 / -1; } }
@media (max-width: 480px) { .ft9-g { grid-template-columns: 1fr; } }

/* hero fits one screen */
:root { --hdh: 84px; }
@media (max-width: 480px) { :root { --hdh: 70px; } }
section.pz { height: calc(100vh - var(--hdh)); height: calc(100svh - var(--hdh)); min-height: 520px; max-height: 1100px; padding-block: clamp(20px, 4svh, 56px) 0; display: flex; }
section.pz > .ct { display: flex; flex-direction: column; align-items: center; min-height: 0; flex: 1; }
section.pz .pz-h { font-size: max(30px, min(8vw, 9.6svh, 128px)); flex: none; }
section.pz .pz-ill { flex: 1 1 0; min-height: 140px; width: auto; height: auto; aspect-ratio: 900 / 1119; max-width: 100%; margin: clamp(10px, 2.4svh, 32px) auto 0; }
section.pz .pz-ill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
@media (max-aspect-ratio: 4/5) { section.pz > .ct { justify-content: center; } section.pz .pz-ill { flex: 0 1 auto; width: 100%; min-height: 0; } }
@media (max-height: 560px) and (min-width: 700px) { section.pz { min-height: 0; } }

/* products rows */
.pr-go { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; flex: none; transition: transform 500ms cubic-bezier(.34,1.56,.64,1), background 250ms, color 250ms, border-color 250ms; }
/* app mocks: always dark windows */
.pm { background: #141416; color: #f5f5f5; border: 1px solid #2a2a2e; border-radius: 10px; padding: 0 14px 14px; font-size: 12px; display: grid; gap: 9px; box-shadow: 0 18px 40px -20px rgb(0 0 0 / .5); }
.pm-bar { display: flex; align-items: center; gap: 5px; margin: 0 -14px; padding: 9px 12px; border-bottom: 1px solid #2a2a2e; }
.pm-bar i { width: 8px; height: 8px; border-radius: 50%; background: #3a3a40; } .pm-bar i:first-child { background: var(--or); }
.pm-bar span { margin-left: 8px; color: #9a9aa3; font-size: 11px; }
.mt-r { display: grid; grid-template-columns: 1fr 70px auto; align-items: center; gap: 10px; }
.mt-r b { height: 6px; border-radius: var(--fmb-r, 3px); background: #2a2a2e; position: relative; overflow: hidden; }
.mt-r b::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--or); border-radius: var(--fmb-r, 3px); }
.mt-r em { font-style: normal; font-size: 10.5px; padding: 2px 7px; border-radius: 20px; background: #2a2a2e; color: #c9c9cf; min-width: 64px; text-align: center; }
.mt-r em.ok { background: var(--or); color: var(--or-ink); font-weight: 600; }
.ms-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ms-f { background: #1d1d20; border-radius: 6px; padding: 10px 8px; display: grid; gap: 6px; }
.ms-f b { width: 30px; height: 36px; border-radius: var(--fmb-r, 3px); background: #2a2a2e; display: grid; place-items: end center; font-size: 8.5px; text-transform: uppercase; padding-bottom: 3px; color: var(--or); clip-path: polygon(0 0, 70% 0, 100% 22%, 100% 100%, 0 100%); }
.ms-f span { font-size: 10.5px; color: #c9c9cf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-h { height: 46px; border-radius: 6px; background: linear-gradient(90deg, var(--or) 0 38%, #2a2a2e 38%); }
.mp-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mp-g div { display: grid; gap: 4px; } .mp-g b { height: 40px; border-radius: 5px; background: #2a2a2e; } .mp-g i { height: 5px; border-radius: var(--fmb-r, 3px); background: #2a2a2e; } .mp-g i + i { width: 50%; background: var(--or); }
.mp-apps { display: flex; align-items: center; gap: 6px; color: #9a9aa3; font-size: 11px; } .mp-apps i { width: 20px; height: 20px; border-radius: 5px; background: #2a2a2e; } .mp-apps i:nth-child(3) { background: var(--or); }


.pr-list { margin-top: 0; }
#products .sec-head { margin-bottom: 0; border-bottom: 2px solid var(--hd); }
.pr-r { color: var(--hd); } .pr-n { color: var(--hd); }
.pr-r { position: relative; display: grid; grid-template-columns: 180px 1fr 1fr auto; align-items: center; gap: 12px 28px; padding: clamp(22px, 3vw, 34px) 16px; border-bottom: 2px solid var(--hd); isolation: isolate; }
.pr-r::before { content: ""; position: absolute; inset: 0; background: var(--or); transform: scaleY(0); transform-origin: bottom; transition: transform 500ms cubic-bezier(.22,1,.36,1); z-index: -1; }
.pr-k { font-size: 13.5px; color: var(--soft); }
.pr-n { font: 700 clamp(30px, 5vw, 72px)/1 var(--fmb-font-head); letter-spacing: -0.04em; transition: transform 500ms cubic-bezier(.22,1,.36,1); }
.pr-d { font-size: 15px; max-width: 34ch; color: var(--text); }
.pr-shot { display: block; border-radius: 10px; overflow: hidden; border: 1px solid rgba(12,12,13,.12); box-shadow: 0 24px 50px -24px rgba(0,0,0,.5); background: #fff; }
.pr-shot img { display: block; width: 100%; height: auto; }
.pr-m { position: absolute; right: 96px; top: 50%; width: 280px; z-index: 2; transform: translate(40px, -50%) rotate(4deg); opacity: 0; pointer-events: none; transition: opacity 300ms, transform 600ms cubic-bezier(.22,1,.36,1); }
@media (hover: hover) {
  .pr-r:hover::before { transform: none; }
  .pr-r:hover, .pr-r:hover .pr-n, .pr-r:hover .pr-k, .pr-r:hover .pr-d { color: var(--or-ink); }
  .pr-r:hover .pr-n { transform: translateX(10px); }
  .pr-r:hover .pr-m { opacity: 1; transform: translate(0, -50%) rotate(-3deg); }
  .pr-r:hover .pr-d { opacity: 0; }
  .pr-r:hover .pr-go { background: var(--or-ink); color: var(--or); border-color: var(--or-ink); transform: rotate(45deg); }
}
@media (max-width: 860px) { .pr-r { grid-template-columns: 1fr auto; } .pr-k { grid-column: 1 / -1; } .pr-n { grid-row: 2; } .pr-go { grid-row: 2; } .pr-d { grid-column: 1 / -1; } .pr-m { position: static; width: 100%; opacity: 1; transform: none; grid-column: 1 / -1; } .pr-r:hover .pr-d { opacity: 1; } }



  .sec { padding-top: clamp(56px, 6vw, 88px); }
  .about { padding-top: clamp(56px, 6vw, 88px); }
  .stats { padding-top: 48px; }
  .contact, .ftq { margin-top: clamp(56px, 6vw, 88px); padding-block: clamp(56px, 6vw, 88px); }
  .contact { padding-bottom: clamp(40px, 4.5vw, 64px); }
  .bands { margin-top: clamp(8px, 1.5vw, 20px); height: 170px; }
  .bands + .sec { padding-top: clamp(24px, 3vw, 48px); }
  section.pz { position: relative; isolation: isolate; }
  .pz-fire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  section.pz > .ct { position: relative; z-index: 1; }
  section.pz .pz-h { text-shadow: 0 2px 0 var(--ink), 0 0 24px rgb(12 12 13 / .8); }
/* hero illustration rises from behind the strip */
section.pz { overflow: clip; }
.fmb-rv section.pz .pz-ill[data-r] { opacity: 1; transition: none; }
.fmb-rv section.pz .pz-ill[data-r] img { transform: translateY(75%) rotate(4deg); transition: transform 1900ms cubic-bezier(.33,1,.32,1) 450ms; }
.fmb-rv section.pz .pz-ill[data-r].in img { transform: none; }
.fmb-rv section.pz .pz-ill[data-r].in:hover img { transform: translateY(-8px) rotate(-2deg); transition-delay: 0ms; transition-duration: 900ms; }
@media (prefers-reduced-motion: reduce) { .fmb-rv section.pz .pz-ill[data-r] img { transform: none; transition: none; } }
/* about video: soft circle reveal */
.fmb-rv .about-team[data-r] { background: transparent; opacity: 1; transform: none; transition: background 0s 1400ms; }
.fmb-rv .about-team[data-r].in { background: #000; }
.fmb-rv .about-team[data-r] > video { clip-path: circle(12% at 50% 55%); opacity: 0; transform: scale(1.18); filter: blur(14px); transition: clip-path 1500ms cubic-bezier(.65,0,.25,1) 150ms, opacity 700ms ease 150ms, transform 1700ms cubic-bezier(.19,1,.22,1) 150ms, filter 1100ms ease 250ms; }
.fmb-rv .about-team[data-r].in > video { clip-path: circle(75% at 50% 50%); opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .fk-panel .fk-big, .fk-panel .fk-pnav a, .fk-panel hr, .fk-panel .fk-addr, .fk-panel .fk-soc { opacity: 1 !important; animation: none !important; } .fmb-rv .about-team[data-r] > video { clip-path: none; opacity: 1; transform: none; filter: none; } .fmb-rv .about-team[data-r] { background: #000; } }
/* marquee band covers the illustration base */
:root { --mqh: clamp(64px, 6vw, 88px); --ov: clamp(44px, 5.4vw, 80px); }
section.pz { height: calc(100svh - var(--hdh) - var(--mqh) + var(--ov)); }
section.mq { position: relative; z-index: 3; margin-top: calc(var(--ov) * -1); height: var(--mqh); padding-block: 0; display: flex; align-items: center; background: var(--bg); -webkit-mask-image: none; mask-image: none; border-top: 1px solid var(--line); }
section.mq .mq-set b { font-size: clamp(20px, 2.4vw, 34px); }
@media (max-aspect-ratio: 4/5) { section.pz > .ct { justify-content: flex-end; } }
section.mq .mq-set i { font-size: clamp(14px, 1.4vw, 20px); }
section.pz .pz-h { line-height: .98; letter-spacing: -0.025em; word-spacing: .06em; font-size: max(30px, min(6.8vw, 8.4svh, 112px)); }
section.pz .pz-h .ln { padding-bottom: .06em; margin-bottom: -.02em; }
@media (min-width: 901px) { section.pz { padding-top: clamp(64px, 11svh, 120px); } }
.fk-sun { display: none !important; }
html, body { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
.rail { display: none; }
@media (min-width: 901px) {
  :root { --hdh: 0px; --rail: 96px; }
  body { padding-left: var(--rail); }
  header.hd { display: none; }
  .rail { position: fixed; z-index: 102; left: 0; top: 0; bottom: 0; width: var(--rail); background: var(--ink); color: #f5f5f5; border-right: 1px solid #232327; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: calc(env(safe-area-inset-top, 0px) + 18px) 0 calc(env(safe-area-inset-bottom, 0px) + 18px); }
  .rail-logo .fmb-logo { height: 54px; width: auto; display: block; transition: transform 500ms cubic-bezier(.34,1.56,.64,1); } .rail-logo:hover .fmb-logo { transform: rotate(-6deg) scale(1.06); }
  .rail-m { width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--or); display: grid; place-content: center; gap: 5px; cursor: pointer; transition: transform 500ms cubic-bezier(.34,1.56,.64,1), background 250ms; }
  .rail-m i { width: 20px; height: 2px; background: var(--or-ink); display: block; transition: width 300ms; } .rail-m i:nth-child(2) { width: 14px; justify-self: end; }
  .rail-m:hover { transform: rotate(90deg); } .rail-m:hover i { width: 20px; }
  .rail-v { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 13px var(--fmb-font-head); letter-spacing: .08em; text-transform: uppercase; color: #8b8b93; margin-top: auto; white-space: nowrap; }
  .rail-cta { width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--or); color: var(--or); display: grid; place-items: center; transition: background 250ms, color 250ms, transform 500ms cubic-bezier(.34,1.56,.64,1); }
  .rail-cta:hover { background: var(--or); color: var(--or-ink); transform: rotate(45deg); }
  .rail-t { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #3a3a40; background: none; color: #f5f5f5; display: grid; place-items: center; cursor: pointer; transition: background 250ms, color 250ms; }
  .rail-t:hover { background: var(--or); color: var(--or-ink); border-color: var(--or); }
  .rail-t .i-moon { display: none; }
  :root[data-theme="dark"] .rail-t .i-sun { display: none; } :root[data-theme="dark"] .rail-t .i-moon { display: block; }
  /* menu opens from the rail */
  .fk-panel { left: var(--rail); right: auto; width: min(560px, calc(100vw - var(--rail))); transform: translateX(calc(-100% - var(--rail))); z-index: 101; }
  .fk-scrim { left: var(--rail) !important; }
  .fk-panel.on { transform: none; }
  .fk-pnav { display: grid !important; gap: 2px; margin: 8px 0 24px; }
  .fk-pnav a { font: 700 clamp(26px, 2.6vw, 38px)/1.2 var(--fmb-font-head); letter-spacing: -0.04em; color: #fff; width: fit-content; transition: color 200ms, transform 400ms cubic-bezier(.22,1,.36,1); }
  .fk-pnav a:hover { color: var(--or); transform: translateX(8px); }
  .fk-intro { display: none; }
  .totop { right: 24px; }
  /* staggered menu content */
  @keyframes pnIn { from { opacity: 0; translate: -48px 0; } to { opacity: 1; translate: 0 0; } }
  .fk-panel .fk-big, .fk-panel .fk-pnav a, .fk-panel hr, .fk-panel .fk-addr, .fk-panel .fk-soc { opacity: 0; }
  .fk-panel.on .fk-big, .fk-panel.on .fk-pnav a, .fk-panel.on hr, .fk-panel.on .fk-addr, .fk-panel.on .fk-soc { animation: pnIn 800ms cubic-bezier(.22,1,.36,1) both; }
  .fk-panel.on .fk-big { animation-delay: 220ms; }
  .fk-panel.on .fk-pnav a:nth-child(1) { animation-delay: 320ms; }
  .fk-panel.on .fk-pnav a:nth-child(2) { animation-delay: 390ms; }
  .fk-panel.on .fk-pnav a:nth-child(3) { animation-delay: 460ms; }
  .fk-panel.on .fk-pnav a:nth-child(4) { animation-delay: 530ms; }
  .fk-panel.on .fk-pnav a:nth-child(5) { animation-delay: 600ms; }
  .fk-panel.on .fk-pnav a:nth-child(6) { animation-delay: 670ms; }
  .fk-panel.on .fk-pnav a:nth-child(7) { animation-delay: 740ms; }
  .fk-panel.on hr { animation-delay: 820ms; } .fk-panel.on .fk-addr { animation-delay: 880ms; } .fk-panel.on .fk-soc { animation-delay: 940ms; }
  /* rail buttons: white outline only, orange on hover */
  .rail-m, .rail-cta, .rail-t { width: 50px; height: 50px; border-radius: 50%; background: transparent !important; border: 1.5px solid #f5f5f5 !important; box-shadow: none !important; color: #f5f5f5 !important; transition: border-color 250ms, color 250ms, transform 500ms cubic-bezier(.34,1.56,.64,1); }
  .rail-m i { background: currentColor !important; }
  .rail-m:hover, .rail-cta:hover, .rail-t:hover { border-color: var(--or) !important; color: var(--or) !important; background: transparent !important; }
}


section.pgh { position: relative; isolation: isolate; overflow: clip; background-color: var(--ink); background-image: linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; color: #f5f5f5; min-height: clamp(220px, 32svh, 360px); display: flex; align-items: flex-end; padding-block: clamp(32px, 5svh, 64px) clamp(32px, 5svh, 56px); }
section.pgh .pz-fire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
section.pgh > .ct { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 34ch); justify-content: space-between; gap: clamp(24px, 4vw, 64px); align-items: end; }
.pgh:not([hidden]) ~ .mq { margin-top: 0 !important; }
.pgh-h { margin: 0; font-family: var(--fmb-font-head); font-weight: 800; text-transform: uppercase; color: var(--or); font-size: max(44px, min(11vw, 12svh, 150px)); line-height: .92; letter-spacing: -0.03em; text-shadow: 0 2px 0 var(--ink), 0 0 24px rgb(12 12 13 / .8); text-wrap: balance; }
.pgh-h i { font-style: normal; color: #f5f5f5; }
.pgh-p { margin: 0; max-width: 34ch; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: rgb(245 245 245 / .82); }
.pgh-p a { color: var(--or); }
.pgh-h .ln, .pgh-p { display: block; animation: phUp 900ms cubic-bezier(.22,1,.36,1) both; }
.pgh-p { animation-delay: 200ms; }
@keyframes phUp { from { opacity: 0; transform: translateY(28px); } }
@media (max-width: 760px) { section.pgh > .ct { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pgh-h .ln, .pgh-p { animation: none; } }
.c-rows .c-addr b { font-weight: 500; line-height: 1.5; }
.c-map { display: table; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--or); text-decoration: underline; text-underline-offset: 3px; }
main:has(> .pgh:only-child) { padding-bottom: 0 !important; margin-bottom: 0 !important; }
main:has(> .pgh:only-child) + .contact { margin-top: 0 !important; }
[hidden] { display: none !important; }
.pgh-back { position: absolute; z-index: 2; top: clamp(16px, 2.4vw, 28px); right: max(16px, clamp(16px, 3vw, 40px)); display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px 0 16px; border-radius: 999px; border: 1.5px solid #f5f5f5; color: #f5f5f5; font: 600 14px var(--fmb-font); text-decoration: none; transition: border-color 250ms, color 250ms, transform 400ms cubic-bezier(.22,1,.36,1); }
.pgh-back:hover { border-color: var(--or); color: var(--or); } .pgh-back:hover svg { transform: translateX(-3px); } .pgh-back svg { transition: transform 300ms; }
@media (max-width: 900px) { .pgh-back { height: 40px; padding: 0 14px 0 12px; } section.pgh { padding-top: 76px !important; } }
section.pgh { padding-top: clamp(96px, 8vw, 116px) !important; }
@media (max-width: 600px) { section.pgh { padding-top: 76px !important; } }
.pg-first { padding-top: clamp(40px, 4.5vw, 64px) !important; margin-top: 0 !important; }
.contact.pg-first { padding-top: clamp(48px, 5vw, 72px) !important; }


.folio .fo-bar { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 28px; border-bottom: 2px solid var(--hd); }
.fo-f { font: 600 14px/1 var(--fmb-font); padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: none; color: var(--hd); cursor: pointer; transition: background 200ms, color 200ms, border-color 200ms; }
.fo-f:hover { border-color: var(--or); color: var(--or); }
.fo-f[aria-pressed="true"] { background: var(--or); border-color: var(--or); color: var(--or-ink); }
.fo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; margin-top: 36px; grid-auto-flow: dense; }
.fo-card.fo-wide { grid-column: span 2; }
.fo-card.fo-full { grid-column: 1 / -1; }
.fo-card.fo-full .case-pic { aspect-ratio: 8/2.8; }
.fo-card .case-pic { aspect-ratio: 4/3; position: relative; margin-bottom: 14px; }
.fo-card .case-pic .mk { aspect-ratio: auto; height: 100%; }
.fo-card.fo-wide .case-pic { aspect-ratio: 8/3.6; }
.fo-card .case-pic > * { transition: transform 700ms cubic-bezier(.22,1,.36,1); }
.fo-card:hover .case-pic > * { transform: scale(1.04); }
.fo-pic { background: var(--fo); display: grid; place-items: center; }
.fo-pic > img { width: 78%; height: 88%; object-fit: contain; }
.fo-full .fo-pic > img { width: 40%; }
.case-client.is-sample { color: var(--soft); font-weight: 500; }
.fo-card[hidden] { display: none !important; }
.fo-card.fo-in { animation: foIn 500ms cubic-bezier(.22,1,.36,1) both; }
@keyframes foIn { from { opacity: 0; transform: translateY(16px); } }
.fw { width: 74%; aspect-ratio: 16/10; background: #fff; border-radius: 6px; display: grid; grid-template: 12px 1fr 14px 14px / repeat(3, 1fr); gap: 6px; padding: 8px; }
.fw i { height: 6px; width: 6px; border-radius: 50%; background: #ddd; }
.fw b { grid-column: 1 / -1; background: var(--or); border-radius: var(--fmb-r, 3px); }
.fw s { grid-column: span 3; background: #eee; border-radius: 2px; }
.fw u { display: none; }
.bk { width: 42%; aspect-ratio: 2/3; background: var(--ink); color: #fff; display: grid; align-content: space-between; padding: 10% 9%; box-shadow: 12px 14px 0 rgb(0 0 0 / .25); }
.bk b { font: 800 clamp(18px, 2.2vw, 30px)/.95 var(--fmb-font-head); color: var(--or); }
.bk small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.fo-3d .orb { position: absolute; width: 38%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffd2a6, var(--or) 40%, #5a1a00 80%); left: 22%; top: 18%; }
.fo-3d .orb.o2 { width: 22%; left: 58%; top: 48%; background: radial-gradient(circle at 32% 28%, #fff, #bbb 45%, #333 85%); }
.fo-pack { display: flex; align-items: center; justify-content: center; }
.bx { width: 30%; aspect-ratio: 3/4; background: var(--ink); display: grid; place-items: center; transform: rotate(-6deg); }
.bx b { font: 800 13px var(--fmb-font-head); color: var(--or); letter-spacing: .08em; }
.bx.b2 { background: var(--or); transform: rotate(5deg) translateX(-12%); width: 24%; }
@media (max-width: 900px) { .fo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fo-grid { grid-template-columns: minmax(0, 1fr); } .fo-card.fo-wide { grid-column: auto; } .fo-card.fo-wide .case-pic { aspect-ratio: 4/3; } .fo-card.fo-full .case-pic { aspect-ratio: 4/3; } }
@media (prefers-reduced-motion: reduce) { .fo-card.fo-in { animation: none; } .fo-card .case-pic > * { transition: none; } }


.pd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 2px solid var(--hd); }
.pd-lead { font-size: clamp(18px, 1.7vw, 24px); line-height: 1.55; color: var(--hd); margin: 0; max-width: 34ch; }
.pd-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pd-shot { padding: clamp(8px, 2vw, 24px); }
.pd-shot.is-dev { padding: 0; }
.dk { position: relative; aspect-ratio: 16 / 11; }
.dk-s { position: absolute; width: 78%; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -24px rgba(0,0,0,.4); transition: transform 700ms cubic-bezier(.22,1,.36,1); }
.dk-s img { display: block; width: 100%; height: auto; }
.dk-s.k1 { right: 0; top: 0; transform: rotate(4deg); }
.dk-s.k2 { right: 9%; top: 12%; transform: rotate(-1deg); }
.dk-s.k3 { right: 18%; top: 26%; transform: rotate(-5deg); }
.dk:hover .k1 { transform: rotate(6deg) translate(10px, -8px); } .dk:hover .k3 { transform: rotate(-7deg) translate(-10px, 6px); }
@media (prefers-reduced-motion: reduce) { .dk-s { transition: none; } }
.pd-shot .pm { transform: rotate(-2deg); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6); }
.pd-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); padding-block: clamp(36px, 4vw, 56px); }
.pd-g h3 { font: 700 clamp(22px, 2.2vw, 30px)/1.1 var(--fmb-font-head); letter-spacing: -0.03em; color: var(--or); margin: 0 0 18px; }
.pd-g ul { list-style: none; margin: 0; padding: 0; display: grid; }
.pd-g li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); }
.pd-g li b { font-weight: 600; color: var(--hd); }
.pd-g li span { font-size: 15px; line-height: 1.55; color: var(--soft); }
.pd-band { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; margin-top: clamp(32px, 4vw, 56px); padding: clamp(24px, 4vw, 48px); border-radius: 6px; background: var(--or); color: var(--or-ink); }
.pd-band h2 { margin: 0 0 8px; font: 700 clamp(24px, 2.6vw, 34px) var(--fmb-font-head); letter-spacing: -0.04em; color: var(--or-ink); }
.pd-band p { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.55; }
.pd-band .b { background: var(--ink); color: #fff; border-color: var(--ink); }
.pd-pg.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pd-pg.n4 .pd-pr { flex-wrap: wrap; } .pd-pg.n4 .pd-pr b { font-size: clamp(30px, 2.5vw, 40px); }
@media (max-width: 1100px) { .pd-pg.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pd-pg.n4 { grid-template-columns: minmax(0, 1fr); } }
.pd-plans { padding-top: clamp(24px, 3vw, 40px); }
.pd-plans .sec-head { align-items: end; }
.pd-note { font-size: 14px; color: var(--soft); max-width: 46ch; margin: 0; }
.pd-pg { display: grid; gap: 20px; margin-top: 28px; }
.pd-pg.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-pg.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-plan { border: 1.5px solid var(--line); border-radius: 4px; padding: clamp(22px, 2.5vw, 32px); display: flex; flex-direction: column; gap: 10px; }
.pd-plan.is-mid { background: var(--ink); border-color: var(--ink); color: #b4b4bb; }
.pd-plan.is-mid h3, .pd-plan.is-mid .pd-pr b { color: #fff; }
.pd-plan.is-mid > p, .pd-plan.is-mid .pd-pr small { color: #b4b4bb; }
.pd-plan.is-mid .b { background: var(--or); border-color: var(--or); color: var(--or-ink); }
.pd-plan h3 { font: 700 22px var(--fmb-font-head); margin: 0; color: var(--hd); }
.pd-plan > p { margin: 0; font-size: 15px; color: var(--soft); }
.pd-pr { display: flex; align-items: baseline; gap: 8px; margin: 8px 0; }
.pd-pr b { font: 800 clamp(34px, 3.4vw, 48px)/1 var(--fmb-font-head); letter-spacing: -0.04em; color: var(--hd); }
.pd-pr small { font-size: 14px; color: var(--soft); }
.pd-plan ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; font-size: 15px; flex: 1; }
.pd-plan li { padding-left: 22px; position: relative; } .pd-plan li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--or); }
.pd-plan .b { align-self: flex-start; }
.pd-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); padding-top: clamp(48px, 5vw, 72px); }
.pd-faq h2 { margin: 0; }
.pd-q { border-top: 1.5px solid var(--line); } .pd-q:last-child { border-bottom: 1.5px solid var(--line); }
.pd-q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 0; font: 600 clamp(16px, 1.4vw, 19px)/1.35 var(--fmb-font-head); letter-spacing: -0.02em; color: var(--hd); }
.pd-q summary::-webkit-details-marker { display: none; }
.pd-q summary span { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; transition: transform 300ms, background 300ms, color 300ms; }
.pd-q[open] summary { color: var(--or); } .pd-q[open] summary span { transform: rotate(45deg); background: var(--or); border-color: var(--or); color: var(--or-ink); }
.pd-q p { margin: 0 0 20px; color: var(--soft); line-height: 1.65; max-width: 60ch; }
.ap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 32px 0 20px; }
.ap { border: 1.5px solid var(--line); border-radius: 4px; padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: border-color 250ms, transform 400ms cubic-bezier(.22,1,.36,1); }
.ap:hover { border-color: var(--or); transform: translateY(-4px); }
.ap[hidden] { display: none !important; }
.ap-top { display: flex; justify-content: space-between; align-items: center; }
.ap-ic { width: 48px; height: 48px; border-radius: 10px; background: var(--or); color: var(--or-ink); display: grid; place-items: center; font: 800 16px var(--fmb-font-head); }
.ap-cat { font-size: 13px; color: var(--soft); }
.ap h3 { margin: 6px 0 0; font: 700 20px var(--fmb-font-head); letter-spacing: -0.03em; color: var(--hd); }
.ap p { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.55; flex: 1; }
.ap-bot { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.ap-bot b { font: 700 18px var(--fmb-font-head); color: var(--hd); }
.ap-bot a { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: var(--or); }
@media (max-width: 900px) { .pd-top, .pd-faq { grid-template-columns: minmax(0, 1fr); } .pd-feats, .pd-pg.n3, .ap-grid { grid-template-columns: minmax(0, 1fr); } .pd-pg.n2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .pd-feats { row-gap: 40px; } }
@media (min-width: 601px) and (max-width: 900px) { .ap-grid, .pd-pg.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ap { padding: 0; overflow: hidden; gap: 0; position: relative; cursor: pointer; }
.ap-in { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ap-in .ap-ic { width: 40px; height: 40px; font-size: 14px; }
.ap-open { all: unset; cursor: pointer; }
.ap-open::after { content: ""; position: absolute; inset: 0; border-radius: 4px; }
.ap-open:focus-visible::after { outline: 3px solid var(--or); outline-offset: -3px; }
.ap-more { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: var(--or); font-size: 15px; }
.ap .ar { transition: transform 300ms cubic-bezier(.22,1,.36,1); }
.ap:hover .ap-more .ar { transform: translateX(4px); }
.ap-th { aspect-ratio: 16 / 10; padding: 26px 0 0 26px; overflow: hidden; position: relative; }
.ap-shot { position: relative; height: 100%; border-radius: 8px 0 0 0; overflow: hidden; background: #fff; box-shadow: 0 18px 40px -16px rgba(0,0,0,.45); transition: transform 600ms cubic-bezier(.22,1,.36,1); }
.ap-shot img { display: block; width: 125%; max-width: none; height: auto; }
.ap:hover .ap-shot { transform: translate(-6px, -6px); }
.ap-th.is-big { aspect-ratio: auto; min-height: 0; padding: clamp(16px, 4vw, 48px); border-radius: 12px; }
.ap-th.is-big .ap-shot { height: auto; border-radius: 8px; transform: none; }
.ap-th.is-big .ap-shot img { width: 100%; }
.ap-th.t-o { background: var(--or); } .ap-th.t-d { background: var(--ink); } .ap-th.t-c { background: #f3ede6; }
.ap-th.t-d::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 70% 100%, rgba(255,109,0,.35), transparent 70%); }
.aw { position: relative; width: min(100%, 260px); background: #ffffff; color: var(--ink); border-radius: 10px; padding: 10px 12px 12px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 7px; transform: translateY(10px) rotate(-2deg); transition: transform 600ms cubic-bezier(.22,1,.36,1); font-family: var(--fmb-font); }
.ap:hover .aw { transform: translateY(2px) rotate(0deg); }
.aw-bar { display: flex; gap: 4px; } .aw-bar i { width: 6px; height: 6px; border-radius: 50%; background: #d9d9de; }
.aw-hd { display: flex; align-items: center; gap: 8px; font: 700 12px var(--fmb-font-head); letter-spacing: -0.02em; }
.aw .ap-ic { width: 24px; height: 24px; border-radius: 6px; font-size: 9px; }
.aw-big { font: 800 22px var(--fmb-font-head); letter-spacing: -0.04em; color: var(--or); }
.aw-r { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; padding: 6px 8px; border-radius: 6px; background: #f4f4f6; }
.aw-r span { color: #5b5b63; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .aw-r b { font-weight: 600; white-space: nowrap; }
.aw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .aw-grid i { aspect-ratio: 1; border-radius: 4px; background: linear-gradient(135deg, #ffb27a, var(--or)); } .aw-grid i:nth-child(2n) { background: linear-gradient(135deg, #2a2a2e, var(--ink)); }
.as { position: fixed; inset: 0; z-index: 200; }
.as-scrim { position: absolute; inset: 0; background: rgba(8,8,9,.62); opacity: 0; transition: opacity 350ms; }
.as-p { position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% - max(32px, env(safe-area-inset-top, 0px) + 16px)); background: var(--bg); color: var(--text); border-radius: 18px 18px 0 0; overflow-y: auto; overscroll-behavior: contain; transform: translateY(100%); transition: transform 520ms cubic-bezier(.22,1,.36,1); outline: none; }
.as.on .as-scrim { opacity: 1; } .as.on .as-p { transform: none; }
.as-grab { display: block; width: 44px; height: 5px; border-radius: var(--fmb-r, 3px); background: var(--line); margin: 10px auto 0; }
.as-x { position: sticky; top: 14px; margin: 4px max(16px, env(safe-area-inset-right, 0px)) -48px auto; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--bg); color: var(--hd); display: grid; place-items: center; cursor: pointer; z-index: 2; transition: background 200ms, color 200ms, border-color 200ms; }
.as-x:hover { background: var(--or); border-color: var(--or); color: var(--or-ink); }
.as-c { max-width: 1080px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 28px; }
.as-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-right: 56px; }
.as-ic { width: 64px; height: 64px; border-radius: 14px; font-size: 20px; flex: none; }
.as-t { flex: 1; min-width: 0; } .as-t h2 { margin: 0; font: 700 clamp(26px, 3.4vw, 40px) var(--fmb-font-head); letter-spacing: -0.04em; color: var(--hd); } .as-t p { margin: 4px 0 0; color: var(--soft); font-size: 15px; }
.as-act { display: flex; align-items: center; gap: 16px; } .as-pr { font: 700 22px var(--fmb-font-head); color: var(--hd); }
.ap-th.is-big .aw { width: min(100%, 420px); padding: 16px 18px 18px; gap: 10px; transform: none; }
.ap-th.is-big .aw-hd { font-size: 15px; } .ap-th.is-big .aw .ap-ic { width: 32px; height: 32px; font-size: 11px; }
.ap-th.is-big .aw-big { font-size: 36px; } .ap-th.is-big .aw-r { font-size: 14px; padding: 9px 12px; }
.as-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(24px, 4vw, 56px); align-items: start; }
.as-lead { margin: 0 0 8px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--hd); max-width: 60ch; }
.as-main h3, .as-others h3 { margin: 24px 0 12px; font: 700 16px var(--fmb-font-head); letter-spacing: -0.02em; color: var(--hd); }
.as-f { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .as-f li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; } .as-f svg { color: var(--or); flex: none; margin-top: 4px; }
.as-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.as-steps li { border: 1.5px solid var(--line); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; } .as-steps b { font: 700 14px var(--fmb-font-head); color: var(--or); }
.as-side { margin: 0; border: 1.5px solid var(--line); border-radius: 10px; padding: 4px 18px; position: sticky; top: 72px; }
.as-side div { padding: 14px 0; border-bottom: 1px solid var(--line); } .as-side div:last-child { border-bottom: 0; }
.as-side dt { font-size: 13px; color: var(--soft); } .as-side dd { margin: 2px 0 0; font-weight: 600; color: var(--hd); }
.as-mos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.as-mo { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 12px; align-items: center; border: 1.5px solid var(--line); border-radius: 8px; padding: 14px; transition: border-color 200ms, transform 300ms cubic-bezier(.22,1,.36,1); }
.as-mo:hover, .as-mo:focus-visible { border-color: var(--or); transform: translateY(-2px); } .as-mo .ap-ic { width: 40px; height: 40px; font-size: 13px; flex: none; }
.as-mo b { display: block; color: var(--hd); font-size: 15px; } .as-mo small { color: var(--soft); font-size: 13px; }
@media (max-width: 760px) { .as-body { grid-template-columns: minmax(0, 1fr); } .as-side { position: static; } .as-steps, .as-mos { grid-template-columns: minmax(0, 1fr); } .as-head { padding-right: 56px; } .as-act { width: 100%; justify-content: space-between; } .as-x { top: 10px; } .as-ic { width: 52px; height: 52px; } .as-t { flex-basis: calc(100% - 140px); } }
@media (prefers-reduced-motion: reduce) { .as-p, .as-scrim, .aw { transition: none; } }

.fpg { padding-top: clamp(40px, 5vw, 72px); }
.fpg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.fpg-f { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.fpg-f.is-wide { grid-column: 1 / -1; }
.fpg-img { border-radius: 10px; overflow: hidden; border: 1.5px solid var(--line); background: #f3ede6; aspect-ratio: 16 / 10; }
.fpg-f.is-wide .fpg-img { aspect-ratio: 16 / 8; background: var(--or); padding: clamp(16px, 3vw, 40px) clamp(16px, 3vw, 40px) 0; }
.fpg-img img { display: block; width: 100%; height: auto; }
.fpg-f.is-wide .fpg-img img { border-radius: 8px 8px 0 0; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); }
.fpg-f figcaption { display: flex; flex-direction: column; gap: 4px; } .fpg-f figcaption b { font: 700 17px var(--fmb-font-head); letter-spacing: -0.02em; color: var(--hd); } .fpg-f figcaption span { color: var(--soft); font-size: 15px; }
@media (max-width: 760px) { .fpg-grid { grid-template-columns: minmax(0, 1fr); } .fpg-f.is-wide .fpg-img { aspect-ratio: 16 / 11; } }


.sv-art { border-radius: 6px; background: var(--sand); display: grid; place-items: center; aspect-ratio: 4/3; overflow: hidden; }
.sv-art img { width: 82%; height: 90%; object-fit: contain; }
.sv-num { background: var(--ink); background-image: linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px); background-size: 28px 28px; align-content: center; gap: 6px; }
.sv-num b { font: 800 clamp(90px, 13vw, 190px)/.85 var(--fmb-font-head); letter-spacing: -0.05em; color: var(--or); }
.sv-num span { font: 600 15px var(--fmb-font); color: #f5f5f5; letter-spacing: .14em; text-transform: uppercase; }
.sv-make, .sv-how { padding-top: clamp(40px, 5vw, 64px); }
.sv-make h2, .sv-how h2 { margin: 0 0 24px; }
.sv-cg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--hd); }
.sv-c { display: grid; gap: 8px; padding: 24px 24px 28px 0; border-bottom: 1px solid var(--line); }
.sv-c b { font: 700 clamp(18px, 1.6vw, 22px)/1.2 var(--fmb-font-head); letter-spacing: -0.03em; color: var(--hd); }
.sv-c span { font-size: 15px; line-height: 1.55; color: var(--soft); max-width: 34ch; }
.sv-how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sv-how li { display: grid; gap: 8px; align-content: start; padding: 22px; border: 1.5px solid var(--line); border-radius: 4px; }
.sv-how li small { font-weight: 600; color: var(--or); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.sv-how li b { font: 700 20px var(--fmb-font-head); letter-spacing: -0.03em; color: var(--hd); }
.sv-how li span { font-size: 15px; line-height: 1.55; color: var(--soft); }
.sv-fp { margin-top: clamp(40px, 5vw, 64px); background: var(--ink); color: #b4b4bb; border-radius: 6px; padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); }
.sv-fp h2 { color: #fff; margin: 0 0 14px; } .sv-fp-h p { margin: 0 0 24px; line-height: 1.6; }
.sv-fp-h .b { background: var(--or); border-color: var(--or); color: var(--or-ink); }
.sv-fp ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.sv-fp li { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid rgb(255 255 255 / .14); }
.sv-fp li b { font: 700 18px var(--fmb-font-head); color: var(--or); letter-spacing: -0.02em; }
.sv-fp li span { font-size: 15px; line-height: 1.55; }
@media (max-width: 900px) { .sv-cg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-how ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-fp { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .sv-cg, .sv-how ol, .sv-fp ul { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================================================
   Theme pages and block looks. Everything below is the forgemybrands.com theme around the sample's
   sections: alternate looks for each UI block, the page tops, forms, the store, My account, the blog,
   portfolio, services, FAQ and error pages. Logical properties, so Arabic (right to left) mirrors.
   ===================================================================================================== */
:root { --bad: #c81e1e; --bad-bg: #fdecec; --ok: #15803d; --ok-bg: #e9f7ee; --warn: #92400e; --warn-bg: #fff4e5; --box: var(--bg); --fi: var(--hd); --fl-line: var(--line2); --fl-word: #6b7280; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bad: #f87171; --bad-bg: #2a1212; --ok: #4ade80; --ok-bg: #0f2418; --warn: #fbbf24; --warn-bg: #261b0a; --box: #111113; --fl-word: #8b8b93; } }
:root[data-theme="dark"] { --bad: #f87171; --bad-bg: #2a1212; --ok: #4ade80; --ok-bg: #0f2418; --warn: #fbbf24; --warn-bg: #261b0a; --box: #111113; --fl-word: #8b8b93; }
body { background: var(--bg); color: var(--text); }
main { display: block; outline: none; }
main > .fp-block:first-child > .sec:first-child, main > .fp-page > .fp-block:first-child > .sec:first-child { padding-top: clamp(56px, 6vw, 88px); }
.fmb-skip { position: fixed; z-index: 200; inset-inline-start: 12px; top: -120px; padding: 12px 18px; border-radius: var(--fmb-r); background: var(--or); color: var(--or-ink); font-weight: 600; transform: translateY(-160%); transition: transform 200ms ease; }
.fmb-skip:focus { top: 12px; transform: none; }
.muted { color: var(--faint); font-size: 14px; }
.lk { color: var(--or); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; display: inline-flex; align-items: center; gap: 6px; }
.lk:hover { color: var(--hd); }
.b.sm { padding: 9px 14px; font-size: 13.5px; gap: 8px; }
.b.is-block { display: flex; width: 100%; justify-content: center; }
.b.is-off, .b:disabled { opacity: .5; pointer-events: none; }
.b:disabled { cursor: not-allowed; }
.accent { color: var(--or); }
.prose { color: var(--text); font-size: 16.5px; line-height: 1.75; max-width: 70ch; }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3, .prose h4 { color: var(--hd); letter-spacing: -0.035em; line-height: 1.2; margin-top: 1.6em; }
.prose h2 { font-size: clamp(22px, 2.2vw, 30px); } .prose h3 { font-size: clamp(18px, 1.7vw, 22px); }
.prose a { color: var(--or); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-inline-start: 1.3em; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li + li { margin-top: .35em; }
.prose blockquote { margin: 0; padding-inline-start: 20px; border-inline-start: 3px solid var(--or); color: var(--hd); font-size: 1.1em; }
.prose img { border-radius: var(--fmb-r); height: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose code { font-size: .9em; background: var(--card2); padding: 2px 6px; border-radius: 4px; }
.prose hr { border: 0; border-top: 1px solid var(--line); }
.chips:empty { display: none; }

/* --- page tops (the dark band, the light and primary-colour looks, the small one on inner pages) --- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13.5px; color: rgb(245 245 245 / .7); margin-bottom: 14px; }
.crumbs a { color: inherit; } .crumbs a:hover { color: var(--or); }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: "/"; opacity: .5; }
.crumbs [aria-current] { color: #f5f5f5; }
.crumbs.is-light { color: var(--faint); } .crumbs.is-light [aria-current] { color: var(--hd); }
section.pgh.pgh-sm { min-height: clamp(180px, 24svh, 260px); }
section.pgh.pgh-sm > .ct { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; }
section.pgh.pgh-sm .pgh-h { font-size: max(32px, min(7vw, 8svh, 84px)); }
section.pgh.pgh-sm .pgh-p { max-width: 60ch; }
section.pgh.pgh-light { background-color: var(--bg); background-image: linear-gradient(var(--hc-line) 1px, transparent 1px), linear-gradient(90deg, var(--hc-line) 1px, transparent 1px); color: var(--text); border-bottom: 1px solid var(--line); }
section.pgh.pgh-light .pgh-h { color: var(--hd); text-shadow: none; } section.pgh.pgh-light .pgh-h i { color: var(--or); }
section.pgh.pgh-light .pgh-p { color: var(--soft); }
section.pgh.pgh-accent { background-color: var(--or); background-image: linear-gradient(rgb(0 0 0 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(0 0 0 / .08) 1px, transparent 1px); color: var(--or-ink); }
section.pgh.pgh-accent .pgh-h { color: var(--or-ink); text-shadow: none; } section.pgh.pgh-accent .pgh-h i { color: #fff; }
section.pgh.pgh-accent .pgh-p { color: var(--or-ink); opacity: .85; }
section.pgh.pgh-light .pgh-back, section.pgh.pgh-accent .pgh-back { color: inherit; border-color: currentColor; }
[data-heat] { position: relative; isolation: isolate; }
[data-heat] > .pz-fire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
[data-heat] > :where(:not(.pz-fire, .pz-embers)) { position: relative; z-index: 1; }
section.pgh > .pgh-back { position: absolute; z-index: 2; }

/* --- hero looks --- */
.pz-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.pz-words { position: relative; z-index: 1; }
section.pz.pz-light { background-color: var(--bg); background-image: linear-gradient(var(--hc-line) 1px, transparent 1px), linear-gradient(90deg, var(--hc-line) 1px, transparent 1px); color: var(--text); }
section.pz.pz-light .pz-h { text-shadow: none; } section.pz.pz-light .pz-h i { color: var(--hd); }
section.pz.pz-light .pz-sub { color: var(--soft); }
section.pz.pz-split { background: var(--sand); background-image: none; color: var(--ink); text-align: start; height: auto; min-height: min(760px, calc(100svh - var(--hdh, 0px))); display: flex; align-items: center; }
section.pz.pz-split > .ct { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
section.pz.pz-split .pz-h { color: var(--ink); text-shadow: none; } section.pz.pz-split .pz-h i { color: var(--or); }
section.pz.pz-split .pz-sub { margin-inline: 0; color: #374151; } section.pz.pz-split .pz-cta { justify-content: flex-start; }
section.pz.pz-split .pz-ill { width: 100%; margin: 0; }
@media (max-width: 900px) { section.pz.pz-split > .ct { grid-template-columns: minmax(0, 1fr); } }

/* --- marquee looks --- */
section.mq.mq-outline { background: var(--ink); border-color: #232327; }
section.mq.mq-outline .mq-set b { color: transparent; -webkit-text-stroke: 1.5px #f5f5f5; }
section.mq.mq-outline .mq-set i { color: var(--or); }
section.mq.mq-outline .mq-set b:hover { color: var(--or); -webkit-text-stroke-color: var(--or); }
:not(.pz-wrap) > .fp-block:not(:first-child) > section.mq, main > .fp-page > .fp-block:first-child > section.mq { margin-top: clamp(24px, 3vw, 48px); }
/* A strip straight after the hero tucks under it, as in the sample (the hero is made taller by the same amount). */
.fp-block:has(> section.pz) + .fp-block > section.mq { margin-top: calc(var(--ov) * -1); }

/* --- about looks --- */
.about-prose { display: grid; gap: 14px; font-size: 16.5px; line-height: 1.7; color: var(--text); margin-top: 18px; }
.about-txt { display: grid; align-content: start; gap: 6px; } .about-txt .b { margin-top: 18px; }
.about.about-light .about-pic { background: var(--sand); }
.about.about-flip .about-txt { order: 2; }
@media (max-width: 900px) { .about.about-flip .about-txt { order: 0; } }

/* --- numbers looks --- */
.stats.stats-cards > div { border: 1.5px solid var(--line); border-radius: var(--fmb-r); padding: 24px; text-align: start !important; }
.stats.stats-dark { background: var(--ink); color: #b4b4bb; padding: clamp(32px, 4vw, 56px) var(--m); margin-top: clamp(56px, 6vw, 88px); border-radius: var(--fmb-r); }
.stats.stats-dark .n { color: #f5f5f5; } .stats.stats-dark .n b { color: var(--or); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats > div { text-align: start !important; } }

/* --- services looks --- */
.sec-lead { max-width: 64ch; margin: -6px 0 28px; color: var(--text); font-size: 16.5px; }
.svc-list .sv { border-top: 2px solid var(--hd); }
.svc-cards .sv-cg { border-top: 0; gap: 16px; }
.sv-card { border: 1.5px solid var(--line); border-radius: var(--fmb-r); padding: 24px; position: relative; transition: border-color 250ms ease, transform 400ms cubic-bezier(.22,1,.36,1); }
.sv-card:hover { border-color: var(--or); transform: translateY(-4px); }
.sv-card sup { font-size: 11px; color: var(--faint); }
.sv-card .sv-go { margin-top: 8px; }
.sv-cg.is-tight .sv-c { padding: 18px 18px 20px 0; }
.sv-cg.is-tight .sv-c b { font-size: 16px; }

/* --- steps looks --- */
.steps-boxes .step { border: 0; background: var(--card2); }
.steps-boxes .step.hot { background: var(--or); color: var(--or-ink); } .steps-boxes .step.hot h3 { color: var(--or-ink); }
.steps-timeline .steps { grid-template-columns: minmax(0, 1fr); gap: 0; border-inline-start: 2px solid var(--line); margin-inline-start: 18px; }
.steps-timeline .step { border: 0; border-radius: 0; padding: 0 0 32px 32px; padding-inline: 32px 0; }
.steps-timeline .step-n { margin: 0 0 10px; margin-inline-start: -51px; border-radius: 99px; padding: 8px 14px; }
.steps-timeline .step-n b { font-size: 16px; display: inline; margin-inline-start: 6px; }

/* --- why looks --- */
.bento.is-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento.is-grid .bt-big { grid-column: 1 / -1; }
.bt-cr { border: 1.5px solid var(--line); color: var(--text); } .bt-cr h3 { color: var(--hd) !important; }
.bt-cr .bt-n { color: var(--or); }
@media (max-width: 900px) { .bento.is-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- product window looks --- */
.ftq.ftq-dark { --ftq-bg: var(--ink); --ftq-ink: #f5f5f5; --ftq-soft: #b4b4bb; --ftq-line: #3a3a40; }
.ftq.ftq-light { --ftq-bg: var(--bg); --ftq-ink: var(--hd); --ftq-soft: var(--text); --ftq-line: var(--line2); border-block: 1px solid var(--line); }
.ft-shots { position: relative; }
.ft-pane[hidden] { display: none; }

/* --- portfolio looks --- */
.fo-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.folio-two .fo-grid:not(.is-three) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .fo-grid.is-three, .folio-two .fo-grid:not(.is-three) { grid-template-columns: minmax(0, 1fr); } }
.fo-ph { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; font: 800 64px/1 var(--fmb-font-head); color: var(--or-ink); }
.fo-pic { background: var(--fo, var(--or)); }
.fo-list { border-top: 2px solid var(--hd); margin-top: 28px; }
.fo-list a { display: grid; grid-template-columns: 96px minmax(0, 1.4fr) minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); transition: padding 400ms cubic-bezier(.22,1,.36,1); }
.fo-list a:hover { padding-inline-start: 10px; }
.fo-ln-pic { aspect-ratio: 4 / 3; border-radius: var(--fmb-r); overflow: hidden; background: var(--fo, var(--card2)); }
.fo-ln-pic img { width: 100%; height: 100%; object-fit: cover; }
.fo-ln-t b { display: block; font: 600 clamp(17px, 1.6vw, 22px)/1.2 var(--fmb-font-head); color: var(--hd); letter-spacing: -0.03em; }
.fo-ln-t small, .fo-ln-k, .fo-ln-y { color: var(--faint); font-size: 14px; }
.fo-list a:hover .fo-ln-t b { color: var(--or); }
@media (max-width: 700px) { .fo-list a { grid-template-columns: 72px minmax(0, 1fr) auto; } .fo-ln-k, .fo-ln-y { display: none; } }
.fo-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

/* --- pricing looks --- */
.price-dark { background: var(--ink); color: #b4b4bb; padding: clamp(40px, 5vw, 72px) var(--m); margin-top: clamp(56px, 6vw, 88px); border-radius: var(--fmb-r); --line: #2a2a2f; --hd: #f5f5f5; --text: #b4b4bb; --soft: #d4d4d8; --bo: transparent; --bo-ink: #f5f5f5; --bo-ring: #f5f5f5; }
.price-dark .sec-head { border-color: #2a2a2f; }
.bill { display: inline-flex; padding: 4px; border-radius: 99px; border: 1.5px solid var(--line); }
.bill button { padding: 9px 16px; border-radius: 99px; font-size: 14px; font-weight: 600; color: var(--soft); transition: background 200ms, color 200ms; }
.bill button[aria-pressed="true"] { background: var(--or); color: var(--or-ink); }
.one-off { margin-top: 22px; font-size: 14.5px; color: var(--faint); }

/* --- platforms and feature looks --- */
.pr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pr-cards .pr-r { display: flex; flex-direction: column; gap: 10px; border: 1.5px solid var(--line); border-radius: var(--fmb-r); padding: 24px; transition: border-color 250ms, transform 400ms cubic-bezier(.22,1,.36,1); }
.pr-cards .pr-r:hover { border-color: var(--or); transform: translateY(-4px); }
.pr-cards .pr-m { order: -1; display: block; aspect-ratio: 16 / 10; border-radius: var(--fmb-r); overflow: hidden; background: var(--sand); position: static; width: auto; opacity: 1; transform: none; }
.pr-cards .pr-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pr-cards .pr-n { font: 700 clamp(22px, 2vw, 28px)/1.1 var(--fmb-font-head); color: var(--hd); letter-spacing: -0.04em; }
@media (max-width: 900px) { .pr-cards { grid-template-columns: minmax(0, 1fr); } }
.feat-head { display: grid; gap: 10px; margin-bottom: 28px; } .feat-head .sec-lead { margin: 0; }
.feat-cards .sv-cg { border: 0; gap: 16px; } .feat-cards .sv-c { border: 1.5px solid var(--line); border-radius: var(--fmb-r); padding: 22px; }
.intro-single .sv-art, .intro-browser .pd-shot { align-self: center; }

/* --- app store looks --- */
.apps-compact .ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.apps-compact .ap { flex-direction: row; align-items: center; padding: 18px; }
.apps-compact .ap-th { display: none; }
.apps-compact .ap-in { padding: 0; }
@media (max-width: 700px) { .apps-compact .ap-grid { grid-template-columns: minmax(0, 1fr); } }
.ap-open::after { content: ""; position: absolute; inset: 0; }
.ap { position: relative; } .ap a:not(.ap-open), .ap button { position: relative; z-index: 1; }
.pd-ph { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; font: 800 clamp(48px, 7vw, 96px)/1 var(--fmb-font-head); color: var(--or-ink); }

/* --- questions looks --- */
.fq.no-side { grid-template-columns: minmax(0, 1fr); gap: 0; }
.faq-dark { background: var(--ink); color: #b4b4bb; padding: clamp(40px, 5vw, 72px) var(--m); margin-top: clamp(56px, 6vw, 88px); border-radius: var(--fmb-r); --hd: #f5f5f5; --line: #2a2a2f; --text: #b4b4bb; }
.faq-dark .sec-head { border-color: #2a2a2f; }
.qa > * { padding-bottom: 22px; } .qa { color: var(--text); }
.q summary::-webkit-details-marker { display: none; }

/* --- call to action looks --- */
.cta-wrap { margin-top: clamp(56px, 6vw, 88px); }
/* (room under the last section: see "Page edges" at the end) */
.cta { border-radius: var(--fmb-r); padding: clamp(32px, 5vw, 72px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; overflow: hidden; }
.cta-txt { display: grid; gap: 12px; max-width: 60ch; }
.cta h2 { font-size: clamp(28px, 4vw, 56px); line-height: 1.04; letter-spacing: -0.05em; }
.cta-p { font-size: 16.5px; }
.cta-dark { background-color: var(--ink); background-image: linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px); background-size: 56px 56px; color: #b4b4bb; }
.cta-dark h2 { color: #f5f5f5; } .cta-dark h2 span, .cta-dark h2 em { color: var(--or); }
.cta-accent { background: var(--or); color: var(--or-ink); --bo: var(--ink); --bo-ink: #ffffff; } .cta-accent h2, .cta-accent .eyebrow { color: var(--or-ink); } .cta-accent .eyebrow i { background: var(--or-ink); }
.cta-light { background: var(--sand); color: #374151; } .cta-light h2 { color: var(--ink); }

/* --- contact looks --- */
.contact-light { background: var(--sand); color: #4b5563; }
.contact-light .c-h, .contact-light .c-rows b { color: var(--ink); } .contact-light .c-rows, .contact-light .c-rows li { border-color: rgb(12 12 13 / .12); }
.contact-light .c-ic { border-color: rgb(12 12 13 / .2); } .contact-light .c-rows small { color: #6b7280; }
.contact-simple { background: transparent; padding-block: 0; } .contact-simple::before { display: none; }
.contact-in.is-simple { grid-template-columns: minmax(0, 760px); justify-content: center; }
.contact-simple .c-box { border: 1.5px solid var(--line); box-shadow: none; }
.c-hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.c-sent { display: flex; gap: 10px; align-items: center; margin: 0 0 18px; padding: 14px 16px; border-radius: var(--fmb-r); background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.c-box .c-sent { background: #e9f7ee; color: #15803d; }
.c-form .fl, .c-box { --fi: var(--ink); --fl-line: var(--ink); --fl-word: #6b7280; }

/* --- form fields everywhere: the floating label, its line, errors and help --- */
.fl::after { display: none; }
.fl input, .fl textarea, .fl select { color: var(--fi); border-bottom-color: var(--fl-line); background: linear-gradient(var(--or), var(--or)) 0 100% / 0 2px no-repeat; transition: background-size 500ms cubic-bezier(.22,1,.36,1), border-color 250ms ease; }
.fl input:focus, .fl textarea:focus, .fl select:focus { background-size: 100% 2px; }
[dir="rtl"] .fl input, [dir="rtl"] .fl textarea, [dir="rtl"] .fl select { background-position: 100% 100%; }
.fl > span { color: var(--fl-word); left: auto; inset-inline-start: 0; }
[dir="rtl"] .fl > span { transform-origin: 100% 0; }
.fl input:-webkit-autofill + span { transform: translateY(-20px) scale(.76); }
.fl select { width: 100%; font: inherit; font-size: 16px; border: 0; border-bottom: 1.5px solid var(--fl-line); border-radius: 0; padding: 24px 28px 8px 0; padding-inline: 0 28px; appearance: none; -webkit-appearance: none; outline: none; cursor: pointer; }
.fl select option { color: var(--ink); background: #fff; }
.fl.is-sel > span { transform: translateY(-20px) scale(.76); }
.fl.is-sel > svg { position: absolute; inset-inline-end: 4px; top: 30px; pointer-events: none; color: var(--fl-word); }
.fl.is-area textarea { min-height: 96px; }
.fl.is-bad input, .fl.is-bad textarea, .fl.is-bad select { border-bottom-color: var(--bad); }
.fl.is-bad > span { color: var(--bad) !important; }
.fl-e, .fl-h { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; }
.fl-e { color: var(--bad); font-weight: 500; } .fl-h { color: var(--faint); }
.fl input[type="date"]:not(:focus):invalid { color: transparent; }
input.up { text-transform: uppercase; }
.ck { position: relative; display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14.5px; line-height: 1.45; color: var(--soft); }
.ck input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; }
.ck > span { flex: none; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--line2); border-radius: 4px; display: grid; place-items: center; transition: background 200ms, border-color 200ms; }
.ck > span::after { content: ""; width: 10px; height: 6px; border-inline-start: 2px solid var(--or-ink); border-bottom: 2px solid var(--or-ink); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform 250ms cubic-bezier(.34,1.56,.64,1); }
.ck input:checked + span { background: var(--or); border-color: var(--or); } .ck input:checked + span::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.ck input:focus-visible + span { outline: 2.5px solid var(--or); outline-offset: 2px; }
.ck.is-bad > span { border-color: var(--bad); }
.ck a { color: var(--or); text-decoration: underline; text-underline-offset: 2px; }
.sh-choices { display: grid; gap: 10px; }
.sh-choices[aria-busy="true"] { opacity: .55; transition: opacity 200ms; }
.sh-choice { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--fmb-r); cursor: pointer; transition: border-color 200ms, background 200ms; }
.sh-choice:hover { border-color: var(--line2); }
.sh-choice:has(input:checked) { border-color: var(--or); background: var(--hot); }
.sh-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sh-choice b { display: block; color: var(--hd); font-weight: 600; } .sh-choice small { display: block; color: var(--faint); font-size: 13.5px; }
.sh-choice > span:nth-of-type(2) { flex: 1; min-width: 0; }
.rd { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line2); display: grid; place-items: center; }
.rd::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--or); transform: scale(0); transition: transform 250ms cubic-bezier(.34,1.56,.64,1); }
.sh-choice input:checked + .rd { border-color: var(--or); } .sh-choice input:checked + .rd::after { transform: scale(1); }
.sh-choice input:focus-visible + .rd { outline: 2.5px solid var(--or); outline-offset: 2px; }
.sh-cost { font-weight: 700; color: var(--hd); white-space: nowrap; }
.sh-terms { font-size: 12.5px; font-weight: 600; color: var(--ok); white-space: nowrap; } .sh-terms.is-off { color: var(--warn); }

/* --- messages --- */
.sh-flash { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; border-radius: var(--fmb-r); background: var(--ok-bg); color: var(--ok); font-size: 14.5px; line-height: 1.5; margin-bottom: 18px; }
.sh-flash > svg { flex: none; } .sh-flash > span { flex: 1; min-width: min(240px, 100%); }
.sh-flash.is-bad { background: var(--bad-bg); color: var(--bad); }
.sh-flash.is-warn { background: var(--warn-bg); color: var(--warn); }
.sh-flash ul { margin: 4px 0 0; padding-inline-start: 1.2em; list-style: disc; }
.sh-flash .sh-inline input { color: var(--hd); }
.sh-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sh-inline input:not([type="hidden"]):not([type="file"]) { font: inherit; font-size: 15px; padding: 9px 12px; border: 1.5px solid var(--line2); border-radius: var(--fmb-r); background: var(--bg); color: var(--hd); width: 10em; }
.fmb-toast { position: fixed; z-index: 150; inset-inline-start: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; display: flex; align-items: center; gap: 14px; max-width: min(520px, calc(100vw - 32px)); padding: 14px 18px; border-radius: var(--fmb-r); background: var(--ink); color: #f5f5f5; box-shadow: 0 20px 50px -20px rgb(0 0 0 / .6); font-size: 14.5px; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 300ms ease, transform 450ms cubic-bezier(.22,1,.36,1); }
[dir="rtl"] .fmb-toast { translate: 50% 0; }
.fmb-toast.on { opacity: 1; transform: none; pointer-events: auto; }
.fmb-toast.is-bad { background: var(--bad); color: #fff; }
.fmb-toast a { color: var(--or); font-weight: 700; white-space: nowrap; } .fmb-toast.is-bad a { color: #fff; }
@media (min-width: 901px) { .fmb-toast { inset-inline-start: calc(50% + var(--rail, 0px) / 2); } }

/* --- store pages: boxes, two columns, lists, totals --- */
.sh-page { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 96px); }
.sh-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(24px, 3vw, 44px); align-items: start; }
@media (max-width: 960px) { .sh-two { grid-template-columns: minmax(0, 1fr); } }
.sh-co { display: grid; gap: 18px; min-width: 0; }
.sh-box { border: 1.5px solid var(--line); border-radius: var(--fmb-r); padding: clamp(20px, 2.4vw, 30px); display: grid; gap: 18px; align-content: start; background: var(--box); min-width: 0; }
.sh-box > h2, .sh-box > h3, .sh-sum > h2 { display: flex; align-items: center; gap: 12px; color: var(--hd); font-size: clamp(17px, 1.5vw, 20px); letter-spacing: -0.03em; }
.sh-box.is-hot { border-color: var(--or); background: var(--hot); }
.sh-step { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--or); color: var(--or-ink); font: 700 13px/1 var(--fmb-font-head); }
.sh-form { display: grid; gap: 20px; }
.sh-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.sh-sum { border: 1.5px solid var(--line); border-radius: var(--fmb-r); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 18px; background: var(--card); }
.sh-sum.is-sticky { position: sticky; top: calc(var(--hdh, 84px) + 24px); }
@media (min-width: 901px) { .sh-sum.is-sticky { top: 32px; } }
.sh-lines { display: grid; gap: 14px; }
.sh-lines li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; font-size: 14.5px; }
.sh-lines.is-plain li { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.sh-lines b { color: var(--hd); white-space: nowrap; }
.sh-pic { position: relative; width: 52px; height: 52px; border-radius: var(--fmb-r); background: var(--card2); display: grid; place-items: center; color: var(--faint); }
.sh-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.sh-pic em { position: absolute; top: -7px; inset-inline-end: -7px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 99px; background: var(--hd); color: var(--bg); font: 700 11px/21px var(--fmb-font); text-align: center; font-style: normal; }
.sh-line-n { color: var(--hd); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.sh-opt { display: block; color: var(--faint); font-size: 12.5px; font-weight: 400; }
.sh-totals { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; }
.sh-totals > div { display: flex; justify-content: space-between; gap: 16px; }
.sh-totals dt { color: var(--soft); } .sh-totals dd { color: var(--hd); font-weight: 600; text-align: end; }
.sh-totals .is-save dd, .sh-totals .is-save dt { color: var(--ok); }
.sh-totals .is-total { padding-top: 12px; border-top: 1px solid var(--line); font-size: 17px; }
.sh-totals .is-total dt, .sh-totals .is-total dd { color: var(--hd); font-weight: 700; }
.sh-totals .is-left dd { color: var(--warn); }
.sh-safe { display: flex; align-items: center; gap: 8px; justify-content: center; text-align: center; }
.sh-more summary { display: inline-flex; align-items: center; gap: 8px; color: var(--or); font-weight: 600; font-size: 14.5px; }
.sh-more[open] summary { margin-bottom: 18px; }
.sh-empty { display: grid; justify-items: center; gap: 14px; text-align: center; padding: clamp(36px, 5vw, 64px) 20px; border: 1.5px dashed var(--line2); border-radius: var(--fmb-r); color: var(--soft); }
.sh-empty > svg { color: var(--or); } .sh-empty.is-big { padding-block: clamp(56px, 8vw, 112px); }
.sh-empty h2 { color: var(--hd); font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.04em; }
.sh-facts { display: grid; gap: 10px; font-size: 14.5px; }
.sh-facts > div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sh-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.sh-facts dt { color: var(--faint); } .sh-facts dd { color: var(--hd); font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.sh-addr { font-style: normal; line-height: 1.6; color: var(--soft); }
.sh-note { font-size: 14px; color: var(--soft); } .sh-note.is-ok { color: var(--ok); } .sh-note.is-bad { color: var(--bad); }
.sh-file { display: grid; gap: 6px; font-size: 14px; color: var(--soft); } .sh-file.is-bad { color: var(--bad); }
.sh-file input { font-size: 14px; color: var(--soft); }
.sh-pick { position: relative; overflow: hidden; cursor: pointer; } .sh-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* cart */
.sh-cart { display: grid; gap: 0; border-top: 2px solid var(--hd); }
.sh-cl { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.sh-cl .sh-pic { width: 72px; height: 72px; }
.sh-cl-n { min-width: 0; } .sh-cl-n a { color: var(--hd); font-weight: 600; } .sh-cl-n a:hover { color: var(--or); }
.sh-cl-u { color: var(--faint); font-size: 14px; white-space: nowrap; } .sh-cl-t { color: var(--hd); white-space: nowrap; }
.sh-cl-q { display: inline-flex; }
.sh-cl.is-gift { background: var(--hot); padding-inline: 12px; }
.sh-x { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--faint); transition: background 200ms, color 200ms; }
.sh-x:hover { background: var(--bad-bg); color: var(--bad); }
.sh-cart .sh-acts { justify-content: space-between; padding-top: 18px; }
@media (max-width: 640px) { .sh-cl { grid-template-columns: 60px minmax(0, 1fr) auto; } .sh-cl .sh-pic { width: 60px; height: 60px; grid-row: span 2; } .sh-cl-u { display: none; } .sh-cl-q, .sh-cl > .qty { grid-column: 2; justify-self: start; } }
.sh-coupon { display: flex; gap: 8px; align-items: flex-end; } .sh-coupon .fl { flex: 1; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line2); border-radius: var(--fmb-r); height: 46px; }
.qty button { width: 40px; height: 100%; display: grid; place-items: center; color: var(--hd); }
.qty button:hover { color: var(--or); }
.qty input { width: 44px; height: 100%; border: 0; background: transparent; text-align: center; font: 600 15px var(--fmb-font); color: var(--hd); -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* order lists, status and progress */
.sh-orders { border-top: 1.5px solid var(--line); }
.sh-orders a { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1.5px solid var(--line); font-size: 14.5px; transition: padding 300ms ease; }
.sh-orders a:hover { padding-inline-start: 8px; } .sh-orders a:hover b { color: var(--or); }
.sh-orders b { color: var(--hd); font-family: var(--fmb-font-head); letter-spacing: -0.02em; }
.sh-orders span { color: var(--faint); }
.sh-o-t { color: var(--hd) !important; font-weight: 600; text-align: end; } .sh-o-t small { display: block; color: var(--faint); font-weight: 400; font-size: 12.5px; }
@media (max-width: 640px) { .sh-orders a { grid-template-columns: 1fr auto; } .sh-orders a > span:nth-of-type(1) { grid-column: 1; } .sh-orders .sv-go { display: none; } }
.sh-status { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 99px; font: 600 12px/1.3 var(--fmb-font); background: var(--card2); color: var(--soft); white-space: nowrap; }
.sh-status.is-completed, .sh-status.is-delivered, .sh-status.is-paid { background: var(--ok-bg); color: var(--ok) !important; }
.sh-status.is-cancelled, .sh-status.is-refunded, .sh-status.is-failed { background: var(--bad-bg); color: var(--bad) !important; }
.sh-status.is-pending, .sh-status.is-processing, .sh-status.is-on_hold, .sh-status.is-shipped { background: var(--warn-bg); color: var(--warn) !important; }
.sh-pay { font-weight: 600; } .sh-pay.is-paid { color: var(--ok); } .sh-pay.is-unpaid, .sh-pay.is-partial { color: var(--warn); }
.sh-progress { display: flex; gap: 8px; margin-bottom: 22px; overflow-x: auto; padding-bottom: 4px; }
.sh-progress li { flex: 1 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 99px; background: var(--card2); color: var(--faint); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.sh-progress li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; }
.sh-progress li span svg { opacity: 0; }
.sh-progress li.is-done { color: var(--ok); background: var(--ok-bg); } .sh-progress li.is-done span svg { opacity: 1; }
.sh-progress li.is-now { color: var(--or-ink); background: var(--or); }
.sh-progress li.is-bad { color: var(--bad); background: var(--bad-bg); } .sh-progress li.is-bad span svg { opacity: 1; }
.ord-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-bottom: 18px; color: var(--soft); }
.ord-head p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .ord-head b { color: var(--hd); }
.ord-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ord-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ord-side { display: grid; gap: 18px; min-width: 0; }
@media (max-width: 960px) { .ord-grid { grid-template-columns: minmax(0, 1fr); } }
.sh-paybox { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; border-radius: var(--fmb-r); background: var(--hot); border: 1.5px solid var(--hot-line); }
.sh-paybox-i { flex: 1; min-width: 200px; color: var(--hd); }
.sh-ship { display: grid; gap: 10px; } .sh-ship-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; color: var(--hd); }
.sh-ship-log { display: grid; gap: 8px; border-inline-start: 2px solid var(--line); padding-inline-start: 14px; font-size: 13.5px; color: var(--soft); }
.sh-ship-log .failed, .sh-ship-log .returned { color: var(--bad); }
.sh-keys { display: grid; gap: 10px; }
.sh-keys li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; padding: 12px 14px; border-radius: var(--fmb-r); background: var(--card2); }
.sh-key-w { min-width: 0; display: grid; gap: 2px; font-size: 13px; color: var(--faint); }
.sh-keys code, .lic-key code { font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--hd); overflow-wrap: anywhere; }
[data-fmb-copy].is-copied { background: var(--ok); color: #fff; box-shadow: none; }
.sh-dls { display: grid; gap: 10px; }
.sh-dls li { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--fmb-r); }
.sh-dls li.is-off { opacity: .6; }
.sh-dl-i { flex: none; width: 42px; height: 42px; border-radius: var(--fmb-r); display: grid; place-items: center; background: var(--hot); color: var(--or); }
.sh-dl-t { flex: 1; min-width: 180px; display: grid; gap: 2px; color: var(--hd); font-weight: 600; } .sh-dl-t small { color: var(--faint); font-weight: 400; font-size: 13px; }
.thanks > .sh-box, .thanks > .sh-flash { margin-bottom: 18px; }
.thanks .sh-acts { margin-top: 24px; }
.trk .ord-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.trk-box { align-self: start; }

/* --- My account --- */
.acc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; padding-block: clamp(32px, 4vw, 56px) clamp(56px, 6vw, 96px); }
@media (max-width: 900px) { .acc { grid-template-columns: minmax(0, 1fr); } }
.acc-side { position: sticky; top: 32px; display: grid; gap: 18px; }
@media (max-width: 900px) { .acc-side { position: static; } }
.acc-me { display: flex; align-items: center; gap: 12px; min-width: 0; }
.acc-me > span:last-child { min-width: 0; display: grid; } .acc-me b { color: var(--hd); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-me small { color: var(--faint); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-av { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--or); color: var(--or-ink); font: 700 14px/1 var(--fmb-font-head); }
.acc-av img { width: 100%; height: 100%; object-fit: cover; }
.acc-av.is-big { width: 72px; height: 72px; font-size: 22px; } .acc-av.is-staff { background: var(--ink); color: var(--or); }
.acc-nav { display: grid; gap: 2px; border-top: 1.5px solid var(--line); padding-top: 10px; }
.acc-nav a, .acc-nav button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: var(--fmb-r); color: var(--soft); font-size: 15px; font-weight: 500; text-align: start; transition: background 200ms, color 200ms; }
.acc-nav a:hover, .acc-nav button:hover { background: var(--card2); color: var(--hd); }
.acc-nav a[aria-current] { background: var(--hd); color: var(--bg); } .acc-nav a[aria-current] svg { color: var(--or); }
.acc-nav em { margin-inline-start: auto; min-width: 22px; height: 22px; border-radius: 99px; background: var(--or); color: var(--or-ink); font: 700 11.5px/22px var(--fmb-font); text-align: center; font-style: normal; padding: 0 6px; }
@media (max-width: 900px) { .acc-nav { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; scrollbar-width: thin; } .acc-nav a, .acc-nav button { width: auto; white-space: nowrap; border: 1.5px solid var(--line); } .acc-nav form { flex: none; } }
.acc-main { min-width: 0; display: grid; gap: 18px; align-content: start; }
.acc-main > .sh-flash { margin: 0; }
.acc-hello { font-size: 17px; color: var(--soft); max-width: 60ch; }
.acc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.acc-stats > * { display: grid; gap: 4px; padding: 20px; border: 1.5px solid var(--line); border-radius: var(--fmb-r); color: var(--faint); transition: border-color 250ms; }
.acc-stats > a:hover { border-color: var(--or); }
.acc-stats svg { color: var(--or); } .acc-stats b { font: 700 clamp(22px, 2.2vw, 30px)/1.1 var(--fmb-font-head); color: var(--hd); letter-spacing: -0.04em; }
@media (max-width: 600px) { .acc-stats { grid-template-columns: minmax(0, 1fr); } }
.acc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.acc-tiles a { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--fmb-r); background: var(--card2); color: var(--hd); font-weight: 600; transition: background 200ms, color 200ms; }
.acc-tiles a:hover { background: var(--or); color: var(--or-ink); } .acc-tiles .sv-go { margin-inline-start: auto; }
.acc-sub { font-size: clamp(18px, 1.6vw, 22px); color: var(--hd); letter-spacing: -0.03em; margin-top: 10px; }
.acc-photo { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 20px; }
.acc-photo > div { display: grid; gap: 10px; } .acc-photo h3 { color: var(--hd); font-size: 17px; }
.addr-grid, .set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .addr-grid, .set-grid { grid-template-columns: minmax(0, 1fr); } }
.addr-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.addr-top h2, .addr-top h3 { color: var(--hd); font-size: 18px; }
.sec-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--faint); } .sec-state.is-on { color: var(--ok); }
.sec-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font: 600 15px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--hd); }
.sec-codes li { padding: 8px 12px; border-radius: var(--fmb-r); background: var(--bg); text-align: center; }
.sec-steps { display: grid; gap: 6px; padding-inline-start: 1.2em; list-style: decimal; color: var(--soft); font-size: 14.5px; }
.sec-qr { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.sec-qr-img { width: 168px; height: 168px; padding: 10px; border-radius: var(--fmb-r); background: #fff; } .sec-qr-img svg, .sec-qr-img img { width: 100%; height: 100%; }
.sec-qr code { font-size: 14px; color: var(--hd); overflow-wrap: anywhere; }

/* licences */
.lic-list { display: grid; gap: 16px; }
.lic-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.lic-top h2, .lic-top h3 { color: var(--hd); font-size: 18px; letter-spacing: -0.03em; }
.lic-key { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--fmb-r); background: var(--card2); max-width: 100%; }
.lic-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--faint); }
.lic-meta b { color: var(--hd); font-weight: 600; } .lic-meta b.is-bad { color: var(--bad); } .lic-meta b.is-warn { color: var(--warn); }
.lic-dl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lic-sites { display: grid; gap: 6px; } .lic-sites li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--fmb-r); background: var(--card2); font-size: 14px; color: var(--hd); }

/* --- sign in and register --- */
section.auth { min-height: calc(100svh - var(--hdh, 0px)); display: grid; place-items: center; padding: clamp(32px, 5vw, 72px) var(--m); background-color: var(--ink); background-image: linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; }
.auth-card { width: min(460px, 100%); background: var(--bg); color: var(--text); border-radius: 10px; padding: clamp(24px, 4vw, 40px); display: grid; gap: 20px; box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--or) 60%, transparent); }
.auth-head { display: grid; gap: 10px; } .auth-logo { justify-self: start; margin-bottom: 8px; } .auth-logo .fmb-logo { height: 64px; width: auto; display: block; }
.auth-head h1 { color: var(--hd); font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.05em; line-height: 1.1; }
.auth-head p { color: var(--soft); font-size: 15px; } .auth-head a { color: var(--or); font-weight: 600; }
.auth-form { display: grid; gap: 20px; }
.auth-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; font-size: 14.5px; } .auth-row > a { color: var(--or); font-weight: 600; }
.auth-go { justify-content: center; width: 100%; padding-block: 16px; }
.auth-foot { text-align: center; font-size: 14.5px; color: var(--soft); } .auth-foot a { color: var(--or); font-weight: 600; }
.auth-sso { display: grid; gap: 10px; }
.auth-sso-b { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 16px; border: 1.5px solid var(--line2); border-radius: var(--fmb-r); color: var(--hd); font-weight: 600; font-size: 15px; transition: border-color 200ms, background 200ms; }
.auth-sso-b:hover { border-color: var(--or); background: var(--hot); }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 13px; } .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* --- shop and product page --- */
.shop-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-bottom: 8px; }
.shop-bar .fo-bar { margin: 0; padding: 0; border: 0; }
.fo-bar.is-sub .fo-f { padding: 8px 14px; font-size: 13px; }
a.fo-f { display: inline-flex; align-items: center; } a.fo-f[aria-current] { background: var(--or); border-color: var(--or); color: var(--or-ink); }
.shop-find { display: flex; align-items: center; gap: 8px; min-width: min(320px, 100%); border-bottom: 1.5px solid var(--line2); }
.shop-find input { flex: 1; min-width: 0; font: inherit; font-size: 15.5px; padding: 12px 0; border: 0; background: transparent; color: var(--hd); outline: none; }
.shop-find button { width: 40px; height: 40px; display: grid; place-items: center; color: var(--hd); } .shop-find button:hover { color: var(--or); }
.shop-find:focus-within { border-color: var(--or); }
.shop-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding-block: 14px; border-bottom: 2px solid var(--hd); }
.shop-sort { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.shop-sort a { color: var(--faint); } .shop-sort a:hover, .shop-sort a[aria-current] { color: var(--hd); font-weight: 600; }
.pd { padding-block: clamp(28px, 3vw, 48px) 0; }
.pd-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .pd-main { grid-template-columns: minmax(0, 1fr); } }
.pd-gal { display: grid; gap: 12px; position: sticky; top: 32px; }
@media (max-width: 900px) { .pd-gal { position: static; } }
.pd-pic { border-radius: 10px; }
.pd-pic img { width: 100%; height: auto; border-radius: 8px; }
.pd-thumbs { display: flex; gap: 8px; overflow-x: auto; }
.pd-thumbs a { flex: none; width: 76px; height: 56px; border-radius: var(--fmb-r); overflow: hidden; border: 2px solid transparent; opacity: .7; transition: opacity 200ms, border-color 200ms; }
.pd-thumbs a[aria-current], .pd-thumbs a:hover { opacity: 1; border-color: var(--or); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pd-info { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pd-name { color: var(--hd); font-size: clamp(30px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.05em; }
.pd-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.pd-price b { font: 700 clamp(24px, 2.4vw, 32px)/1 var(--fmb-font-head); color: var(--hd); letter-spacing: -0.04em; }
.pd-price small { color: var(--faint); } .pd-price s { color: var(--faint); font-size: 16px; }
.pd-short { color: var(--text); font-size: 16.5px; line-height: 1.7; }
.pd-buy { display: grid; gap: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.pd-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.pd-add { flex: 1; justify-content: center; min-width: 200px; padding-block: 15px; }
.pd-buy[aria-busy="true"] .pd-add { opacity: .6; }
.pd-note { display: flex; gap: 8px; align-items: center; color: var(--soft); font-size: 14px; }
.pd-more { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 64px); padding-top: clamp(48px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .pd-more { grid-template-columns: minmax(0, 1fr); } }
.pd-more > h2, .pd-more h2 { color: var(--hd); font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.04em; margin-bottom: 14px; }
.pd-specs { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pd-specs th, .pd-specs td { text-align: start; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.pd-specs th { color: var(--faint); font-weight: 500; width: 40%; padding-inline-end: 16px; } .pd-specs td { color: var(--hd); }
.pd-specs tr.is-group th { color: var(--hd); font-weight: 700; padding-top: 22px; }
.pdo { display: grid; gap: 18px; }
.pdo-r { display: grid; gap: 8px; }
.pdo-l, .pdo-pick legend { color: var(--hd); font-weight: 600; font-size: 14.5px; padding: 0; }
.pdo-pick { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; } .pdo-pick legend small { color: var(--faint); font-weight: 400; }
.pdo-add { color: var(--or); font-weight: 600; font-size: 13px; }
.pdo-in, .sel select { width: 100%; font: inherit; font-size: 15.5px; padding: 12px 14px; border: 1.5px solid var(--line2); border-radius: var(--fmb-r); background: var(--bg); color: var(--hd); outline: none; transition: border-color 200ms; }
.pdo-in:focus, .sel select:focus { border-color: var(--or); }
.pdo-r.is-bad .pdo-in, .pdo-r.is-bad .sel select { border-color: var(--bad); }
.sel { position: relative; display: block; } .sel select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; cursor: pointer; }
.sel > svg { position: absolute; inset-inline-end: 14px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--faint); }
.pdo-num { display: flex; align-items: center; gap: 10px; } .pdo-num .pdo-in { max-width: 180px; } .pdo-num span { color: var(--faint); }
.pdo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pdo-chips label { cursor: pointer; } .pdo-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pdo-chips span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; border: 1.5px solid var(--line2); font-size: 14px; color: var(--hd); transition: background 200ms, border-color 200ms, color 200ms; }
.pdo-chips span small { color: var(--or); font-weight: 600; }
.pdo-chips label:hover span { border-color: var(--hd); }
.pdo-chips input:checked + span { background: var(--hd); border-color: var(--hd); color: var(--bg); }
.pdo-chips input:focus-visible + span { outline: 2.5px solid var(--or); outline-offset: 2px; }
.pdo-h { color: var(--faint); font-size: 13px; }
.pdo-file { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; border: 1.5px dashed var(--line2); border-radius: var(--fmb-r); }
.pdo-file input[type="file"] { font-size: 14px; color: var(--soft); max-width: 100%; }
.pdo-file.is-busy { opacity: .6; } .pdo-file small { font-size: 13px; color: var(--faint); }
.pd-store { padding-bottom: 8px; }
.shop .ap-grid, .pd-store .ap-grid { margin-top: 24px; }

/* --- blog --- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; margin-top: 28px; }
@media (max-width: 900px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .posts { grid-template-columns: minmax(0, 1fr); } }
.post { display: grid; gap: 10px; align-content: start; }
.post-pic { display: block; aspect-ratio: 16 / 10; border-radius: var(--fmb-r); overflow: hidden; background: var(--sand); }
.post-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms cubic-bezier(.22,1,.36,1); }
.post:hover .post-pic img { transform: scale(1.04); }
.post h2, .post h3 { color: var(--hd); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.25; letter-spacing: -0.03em; } .post h2 a:hover, .post h3 a:hover { color: var(--or); }
.post-meta { color: var(--faint); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 12px; } .post-meta a { color: var(--or); font-weight: 600; }
.post-ex { color: var(--text); font-size: 15px; }
.art { padding-block: clamp(32px, 4vw, 56px) 0; display: grid; gap: clamp(24px, 3vw, 40px); }
.art-pic { border-radius: 10px; overflow: hidden; max-height: 620px; background: var(--sand); } .art-pic img { width: 100%; height: 100%; object-fit: cover; }
.art-body { display: grid; gap: 22px; max-width: 760px; width: 100%; margin-inline: auto; }
.art-lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--hd); }
.art-body .prose { max-width: none; }
.art-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.art-share { display: flex; gap: 8px; align-items: center; color: var(--faint); font-size: 14px; }
.art-share a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line2); color: var(--hd); transition: border-color 200ms, color 200ms; } .art-share a:hover { border-color: var(--or); color: var(--or); }
.art-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.art-nav a { display: grid; gap: 4px; padding: 18px; border: 1.5px solid var(--line); border-radius: var(--fmb-r); color: var(--hd); font-weight: 600; transition: border-color 200ms; }
.art-nav a small { color: var(--faint); font-weight: 400; font-size: 13px; } .art-nav a:hover { border-color: var(--or); }
.art-nav a.is-next { text-align: end; grid-column: 2; }
.cmts { max-width: 760px; width: 100%; margin-inline: auto; display: grid; gap: 22px; padding-top: clamp(32px, 4vw, 56px); }
.cmts > h2 { color: var(--hd); font-size: 22px; letter-spacing: -0.03em; }
.cmt-list { display: grid; gap: 18px; } .cmt-list.is-replies { margin-top: 14px; padding-inline-start: 22px; border-inline-start: 2px solid var(--line); }
.cmt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; } .cmt > div { display: grid; gap: 6px; min-width: 0; }
.cmt .acc-av { width: 40px; height: 40px; font-size: 13px; }
.cmt-who { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; color: var(--faint); } .cmt-who b { color: var(--hd); }
.cmt-form { padding: clamp(20px, 2.4vw, 28px); border: 1.5px solid var(--line); border-radius: var(--fmb-r); }
.cmt-to { display: flex; gap: 10px; align-items: center; color: var(--soft); font-size: 14px; }

/* --- portfolio project and services pages --- */
.prj { padding-block: clamp(32px, 4vw, 56px) 0; display: grid; gap: clamp(24px, 3vw, 40px); }
.prj-pic { border-radius: 10px; overflow: hidden; background: var(--fo, var(--sand)); } .prj-pic img { width: 100%; height: auto; }
.prj-body { display: grid; grid-template-columns: minmax(240px, .4fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .prj-body { grid-template-columns: minmax(0, 1fr); } }
.prj-facts { display: grid; gap: 16px; position: sticky; top: 32px; } @media (max-width: 900px) { .prj-facts { position: static; } }
.prj-lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--hd); margin-bottom: 1em; }
.prj-gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.prj-gal img { width: 100%; height: auto; border-radius: var(--fmb-r); }
.prj-gal > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
@media (max-width: 600px) { .prj-gal { grid-template-columns: minmax(0, 1fr); } }
.svc-list .sv { margin-top: 0; }

/* --- FAQ page --- */
.faq-find { margin-bottom: clamp(32px, 4vw, 48px); max-width: 520px; }
.faq-group + .faq-group { margin-top: clamp(40px, 5vw, 64px); }
.faq-group .sec-head { margin-bottom: 0; border: 0; padding-bottom: 14px; }
.faq-vote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13.5px; color: var(--faint); }
.faq-vote button[aria-pressed="true"] { color: var(--hd); text-decoration: none; }
.faq-vote[aria-busy="true"] { opacity: .6; }
.faq-more { display: grid; justify-items: start; gap: 14px; margin-top: 40px; padding: clamp(24px, 3vw, 40px); border-radius: var(--fmb-r); background: var(--sand); color: #374151; }
.faq-more h2, .faq-more h3 { color: var(--ink); }

/* --- pager --- */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 40px; }
.pager a, .pager span { min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--fmb-r); display: grid; place-items: center; border: 1.5px solid var(--line); color: var(--hd); font-weight: 600; font-size: 14.5px; }
.pager a:hover { border-color: var(--or); color: var(--or); }
.pager [aria-current] { background: var(--hd); border-color: var(--hd); color: var(--bg); }
.pager .is-off { opacity: .4; }

/* --- error, closed and offline pages --- */
section.err, main.err { min-height: calc(100svh - var(--hdh, 0px)); display: flex; align-items: center; background-color: var(--ink); background-image: linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; color: #b4b4bb; padding-block: clamp(48px, 6vw, 96px); overflow: clip; }
main.err.is-full { min-height: 100svh; }
.err .ct { display: grid; gap: 18px; justify-items: start; }
.err-n { font: 800 clamp(96px, 20vw, 260px)/.82 var(--fmb-font-head); color: var(--or); letter-spacing: -0.06em; }
.err-h { color: #f5f5f5; font-size: clamp(28px, 4vw, 56px); line-height: 1.04; letter-spacing: -0.05em; max-width: 18ch; }
.err-p { max-width: 52ch; font-size: 17px; } .err-p a, .err-contact a { color: var(--or); }
.err .pz-cta { justify-content: flex-start; margin-top: 10px; }
.err .b.o { --bo: transparent; --bo-ink: #f5f5f5; --bo-ring: #f5f5f5; }
.err-staff { padding: 12px 14px; border-radius: var(--fmb-r); background: rgb(255 255 255 / .06); font-size: 14px; }
body.is-closed { padding-left: 0; }

/* --- footer credit line and the cart count in the rail --- */
.has-n { position: relative; }
.has-n b { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--or); color: var(--or-ink); font: 700 11px/20px var(--fmb-font); text-align: center; }
.hd-sp { flex: 1; }
.fk-acc { display: grid; gap: 6px; margin: 4px 0 22px; }
.fk-acc a { display: inline-flex; align-items: center; gap: 10px; color: #d4d4d8; font-weight: 500; width: fit-content; } .fk-acc a:hover { color: var(--or); }
.fk-pnav a.is-sub { font-size: .62em; opacity: .8; padding-inline-start: 18px; }
.ft9-credit a { color: var(--or); }

/* --- right to left: the few rules above that are not logical --- */
[dir="rtl"] .rail-v { transform: none; }
[dir="rtl"] .sv-go svg, [dir="rtl"] .b svg:last-child, [dir="rtl"] .lk svg { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .fmb-toast { transition: opacity 200ms; transform: none; } .fl input, .fl textarea, .fl select { transition: none; } }

/* Dark bands: buttons take the accent so they show on the black ground (light and dark themes). */
.cta-dark, .err, .pgh-dark { --btn: var(--band-btn); --btn-ink: var(--band-btn-ink); --btn-h: #ffffff; --btn-h-ink: var(--ink); --bo: transparent; --bo-ink: #f5f5f5; --bo-ring: #f5f5f5; }
.auth-more { display: grid; gap: 16px; text-align: center; } .auth-more > summary { justify-self: center; cursor: pointer; list-style: none; } .auth-more > summary::-webkit-details-marker { display: none; } .auth-more > form { text-align: start; }
.auth-foot .lk { font-size: inherit; }
/* Right-to-left: the rail and its menu sit on the right. Numbers like "60+" keep their order. */
@media (min-width: 901px) {
  [dir="rtl"] body { padding-left: 0; padding-right: var(--rail); }
  [dir="rtl"] .rail { left: auto; right: 0; border-right: 0; border-left: 1px solid #232327; }
  [dir="rtl"] .fk-panel { left: auto; right: var(--rail); transform: translateX(calc(100% + var(--rail))); }
  [dir="rtl"] .fk-panel.on { transform: none; }
  [dir="rtl"] .fk-scrim { left: 0 !important; right: var(--rail) !important; }
  [dir="rtl"] .fk-pnav a:hover { transform: translateX(-8px); }
}
[dir="rtl"] .stats .n { direction: ltr; unicode-bidi: isolate; }

/* Page edges. A coloured band straight under the page head touches it (its gap is for bands further down). */
.fp-block:has(> .pgh) + .fp-block > :is(.ftq, .contact, .bands, .stats-dark, .price-dark, .faq-dark) { margin-top: 0; }
/* Room above the footer on every page (app pages such as the blog, FAQ and shop included). A closing band that
   is meant to meet the footer (the dark contact section) still does. "Last" skips blocks that show nothing,
   such as an app store with no apps yet. */
main { --fmb-end: clamp(64px, 7vw, 104px); padding-bottom: var(--fmb-end); }
main .fp-block:not(:has(~ .fp-block > *)) > .contact { margin-bottom: calc(var(--fmb-end) * -1); }
main .fp-block:not(:has(~ .fp-block > *)) > .cta-wrap { margin-bottom: 0; }
main:has(> section.auth) { padding-bottom: 0; }
/* Services as a list: full width (the two columns are for the badge look). */
.svc-list .svc { grid-template-columns: minmax(0, 1fr); }
/* Services as a list: one line between the heading and the list (the list's own bold line). */
.svc-list > .sec-head { border-bottom: 0; padding-bottom: 0; }
/* The menu panel scrolls when it's taller than the screen, without a scrollbar of its own. */
.fk-panel { scrollbar-width: none; } .fk-panel::-webkit-scrollbar { display: none; }

/* Hero fits the first screen (2026-11-11): the admin bar (signed-in team) is taken off its height too, and
   the band covers only the picture's bottom edge, so the whole illustration stays in view at every size. */
:root { --ov: clamp(12px, 1.4vw, 20px); }
section.pz:not(.pz-split) { height: calc(100svh - var(--hdh) - var(--fp-admin-bar, 0px) - var(--mqh) + var(--ov)); }
section.pz:not(.pz-split) { min-height: 380px; }
/* The hero picture stands on the band: it never lifts off it (no float, and the hover grows it from its base). */
section.pz:not(.pz-split) .pz-ill img { animation: none; translate: none; transform-origin: 50% 100%; }
.fmb-rv section.pz:not(.pz-split) .pz-ill[data-r].in:hover img, section.pz:not(.pz-split) .pz-ill:hover img { transform: scale(1.025) rotate(-1deg); }
/* Contact form showing a ForgeTraq web form */
.c-embed.is-ftq { padding: 0; }
.c-ftq { display: block; width: 100%; height: 640px; border: 0; background: transparent; color-scheme: normal; }

/* Hero "Fire vines": the words sit in the centre, fmb.js draws the vines from images/fire-vines.riv on canvases at the edges. */
section.pz.pz-vines > .ct { justify-content: center; }
section.pz.pz-vines .pz-words { width: 100%; display: flex; flex-direction: column; align-items: center; }
.pz-vn { position: absolute; z-index: 0; pointer-events: none; display: block; max-width: none; }
.pz-vn-src { position: fixed; left: 0; top: 0; width: 2px; height: 2px; visibility: hidden; pointer-events: none; z-index: -1; }
.fmb-rv .pz-vn { opacity: 0; transition: opacity 1200ms ease 300ms; }
.fmb-rv .pz-vn.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fmb-rv .pz-vn { transition: none; } }
/* Fire vines headline styles: white (starred words and the dot in the primary colour), big (small line above, very big words), orange (as the other looks). */
section.pz.pz-t-white .pz-h, section.pz.pz-t-big .pz-h { color: #ffffff; }
section.pz.pz-t-white .pz-h em, section.pz.pz-t-big .pz-h em { font-style: normal; color: var(--or); }
section.pz.pz-t-white .pz-h i, section.pz.pz-t-big .pz-h i { color: var(--or); }
section.pz.pz-t-orange .pz-h em { font-style: normal; color: #ffffff; }
section.pz.pz-t-big .pz-h { font-size: max(40px, min(10vw, 12.5svh, 170px)); letter-spacing: -0.05em; line-height: .94; }
.pz-eb { margin: 0 0 clamp(12px, 2svh, 20px); font: 600 13px/1.3 var(--fmb-font-body, inherit); letter-spacing: .28em; text-transform: uppercase; color: var(--or); }
@media (max-width: 600px) { .pz-eb { font-size: 11px; letter-spacing: .2em; } }
section.pz[data-vines] { touch-action: pan-y; }
section.pz.pz-vines { --btn: var(--or); --btn-ink: var(--or-ink); --btn-h: #ffffff; --btn-h-ink: var(--ink); --bo: transparent; --bo-ink: #ffffff; --bo-ring: rgb(255 255 255 / .5); }
/* Light / dark switch: the icon sits in the exact middle of its circle (no text baseline under it). */
:is(.rail-t, .theme) > span { line-height: 0; } :is(.rail-t, .theme) svg { display: block; }
/* A heading straight above a list of questions: the list's own top line is enough, so the heading drops its line. */
.sec-head:has(+ .qs) { border-bottom: 0; margin-bottom: 0; }
section.pz.pz-vines > .ct { position: relative; z-index: 1; }
.pz-spark { position: absolute; z-index: 2; pointer-events: none; display: block; }