/* ============================================================ FIRESTOAK STRATEGIES — Design System Dark/light theming via [data-theme] on . "Keep the fire burning" — ember accent used with restraint. ============================================================ */ /* ---------- Fonts ---------- */ /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../fonts/c47a9ce4-6f1b-4751-a7b9-c951bf8e2528.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../fonts/f0746e18-1ad7-467a-a95f-8852c28b188c.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../fonts/10732542-d157-4a8b-b028-edfceb6b05af.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../fonts/c47a9ce4-6f1b-4751-a7b9-c951bf8e2528.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../fonts/f0746e18-1ad7-467a-a95f-8852c28b188c.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../fonts/10732542-d157-4a8b-b028-edfceb6b05af.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../fonts/c47a9ce4-6f1b-4751-a7b9-c951bf8e2528.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../fonts/f0746e18-1ad7-467a-a95f-8852c28b188c.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../fonts/10732542-d157-4a8b-b028-edfceb6b05af.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("../fonts/c47a9ce4-6f1b-4751-a7b9-c951bf8e2528.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("../fonts/f0746e18-1ad7-467a-a95f-8852c28b188c.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("../fonts/10732542-d157-4a8b-b028-edfceb6b05af.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("../fonts/c47a9ce4-6f1b-4751-a7b9-c951bf8e2528.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("../fonts/f0746e18-1ad7-467a-a95f-8852c28b188c.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("../fonts/10732542-d157-4a8b-b028-edfceb6b05af.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-stretch: 100%; font-display: swap; src: url("../fonts/c47a9ce4-6f1b-4751-a7b9-c951bf8e2528.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-stretch: 100%; font-display: swap; src: url("../fonts/f0746e18-1ad7-467a-a95f-8852c28b188c.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-stretch: 100%; font-display: swap; src: url("../fonts/10732542-d157-4a8b-b028-edfceb6b05af.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/af57da0c-59f0-418b-9f16-1d3540285d67.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* vietnamese */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/a5ab724a-e8c2-4fb9-8673-b44a69beac8a.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/41cf10ea-ee29-49a3-b59d-4fa13c18f859.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/41eb42f1-8975-42a5-b128-4b4e4d00fd3e.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/af57da0c-59f0-418b-9f16-1d3540285d67.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* vietnamese */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/a5ab724a-e8c2-4fb9-8673-b44a69beac8a.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/41cf10ea-ee29-49a3-b59d-4fa13c18f859.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/41eb42f1-8975-42a5-b128-4b4e4d00fd3e.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/af57da0c-59f0-418b-9f16-1d3540285d67.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* vietnamese */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/a5ab724a-e8c2-4fb9-8673-b44a69beac8a.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/41cf10ea-ee29-49a3-b59d-4fa13c18f859.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/41eb42f1-8975-42a5-b128-4b4e4d00fd3e.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/af57da0c-59f0-418b-9f16-1d3540285d67.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* vietnamese */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/a5ab724a-e8c2-4fb9-8673-b44a69beac8a.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/41cf10ea-ee29-49a3-b59d-4fa13c18f859.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/41eb42f1-8975-42a5-b128-4b4e4d00fd3e.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cbc21475-b2e3-43ce-88cc-99db0db6477d.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/c51ccc90-882a-4781-811e-494faaefef1c.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/6b25251c-1ef0-4625-9aaf-25b818f62bb8.woff2") format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/eb43a41d-3011-48f0-bcdb-40e4ce04700c.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/0815f748-9d14-411d-838f-7e7f002c76b0.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/aee03a6b-ea65-494a-954e-0316bd4c5d35.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cbc21475-b2e3-43ce-88cc-99db0db6477d.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/c51ccc90-882a-4781-811e-494faaefef1c.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/6b25251c-1ef0-4625-9aaf-25b818f62bb8.woff2") format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/eb43a41d-3011-48f0-bcdb-40e4ce04700c.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/0815f748-9d14-411d-838f-7e7f002c76b0.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/aee03a6b-ea65-494a-954e-0316bd4c5d35.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cbc21475-b2e3-43ce-88cc-99db0db6477d.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/c51ccc90-882a-4781-811e-494faaefef1c.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/6b25251c-1ef0-4625-9aaf-25b818f62bb8.woff2") format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/eb43a41d-3011-48f0-bcdb-40e4ce04700c.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/0815f748-9d14-411d-838f-7e7f002c76b0.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/aee03a6b-ea65-494a-954e-0316bd4c5d35.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Tokens: shared ---------- */ :root { --font-display: 'Archivo', sans-serif; --font-body: 'Hanken Grotesk', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Red — constant across themes (vibrant, punchy) */ --ember: #FF2D2D; --ember-bright: #FF4242; --amber: #FF6B3D; --red-deep: #E00020; --fire-grad: linear-gradient(105deg, #E00020 0%, #FF2D2D 48%, #FF6B3D 100%); /* Data / trust cool accent */ --steel: #2D6BFF; --steel-soft: #6E9DFB; --maxw: 1240px; --gutter: clamp(20px, 5vw, 64px); --radius: 16px; --radius-sm: 10px; --radius-lg: 26px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --section-pad: clamp(72px, 11vh, 148px); } /* ---------- DARK (default) — true black ---------- */ :root, [data-theme="dark"] { --bg: #080808; --bg-elev: #101010; --panel: #141414; --panel-2: #1B1B1B; --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18); --ink: #FAFAFA; --ink-mut: #ADADAD; --ink-faint: #6E6E6E; --card-glow: radial-gradient(120% 120% at 50% 0%, rgba(255, 45, 45, 0.12), transparent 60%); --hero-glow: radial-gradient(70% 90% at 78% 8%, rgba(255, 45, 45, 0.24), transparent 60%), radial-gradient(60% 80% at 12% 100%, rgba(255, 107, 61, 0.10), transparent 65%); --noise-op: 0.045; --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8); --shadow-card: 0 18px 40px -24px rgba(0, 0, 0, 0.9); --metric: var(--ember-bright); --on-ember: #FFFFFF; --chip-bg: rgba(255, 255, 255, 0.06); --track: rgba(255, 255, 255, 0.10); } /* ---------- LIGHT — crisp white ---------- */ [data-theme="light"] { --bg: #FFFFFF; --bg-elev: #FFFFFF; --panel: #FFFFFF; --panel-2: #F4F4F4; --line: rgba(10, 10, 10, 0.12); --line-strong: rgba(10, 10, 10, 0.20); --ink: #0A0A0A; --ink-mut: #555555; --ink-faint: #969696; --card-glow: radial-gradient(120% 120% at 50% 0%, rgba(255, 45, 45, 0.07), transparent 60%); --hero-glow: radial-gradient(70% 90% at 80% 4%, rgba(255, 45, 45, 0.13), transparent 62%), radial-gradient(56% 80% at 8% 100%, rgba(255, 107, 61, 0.09), transparent 66%); --noise-op: 0.02; --shadow: 0 30px 60px -28px rgba(10, 10, 10, 0.22); --shadow-card: 0 20px 44px -28px rgba(10, 10, 10, 0.18); --metric: var(--ember); --on-ember: #FFFFFF; --chip-bg: rgba(10, 10, 10, 0.05); --track: rgba(10, 10, 10, 0.10); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; transition: background-color 0.5s var(--ease), color 0.5s var(--ease); } /* Default backgrounds for Firestoak widget sections, scoped to avoid global theme bleed */ [class*="elementor-widget-firestoak_"] .firestoak-module, .firestoak-module { background-color: var(--bg); background-image: var(--grain), var(--page-glow); background-repeat: repeat, no-repeat; background-attachment: scroll, fixed; background-blend-mode: var(--grain-blend, normal); transition: background-color 0.5s var(--ease); } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ::selection { background: var(--ember); color: #fff; } /* page grain */ body::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: var(--noise-op); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-pad); position: relative; } .section--tight { padding-block: clamp(48px, 7vh, 84px); } /* ---------- Type ---------- */ .eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember-bright); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--ember); opacity: 0.7; } .eyebrow--center { justify-content: center; } h1, h2, h3, h4, body .firestoak-module h1, body .firestoak-module h2, body .firestoak-module h3, body .firestoak-module h4, .elementor-page .firestoak-module h1, .elementor-page .firestoak-module h2, .elementor-page .firestoak-module h3, .elementor-page .firestoak-module h4, .elementor-editor-active .firestoak-module h1, .elementor-editor-active .firestoak-module h2, .elementor-editor-active .firestoak-module h3, .elementor-editor-active .firestoak-module h4 { font-family: var(--font-display), sans-serif; font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); text-transform: none; font-style: normal; text-decoration: none; } .h-display, body .firestoak-module .h-display, .elementor-page .firestoak-module .h-display, .elementor-editor-active .firestoak-module .h-display { font-size: clamp(44px, 7vw, 92px); font-weight: 900; letter-spacing: -0.035em; line-height: 0.96; } .h-section, body .firestoak-module .h-section, .elementor-page .firestoak-module .h-section, .elementor-editor-active .firestoak-module .h-section { font-size: clamp(32px, 4.6vw, 60px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.0; text-wrap: balance; } .h-sub, body .firestoak-module .h-sub, .elementor-page .firestoak-module .h-sub, .elementor-editor-active .firestoak-module .h-sub { font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.02em; } .lead { font-size: clamp(17px, 1.5vw, 21px); font-weight: 400; color: var(--ink-mut); line-height: 1.6; max-width: 60ch; text-wrap: pretty; } .muted { color: var(--ink-mut); } .faint { color: var(--ink-faint); } .flame-text { background: var(--fire-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-head { max-width: 760px; } .section-head--center { margin-inline: auto; text-align: center; } .section-head .eyebrow { margin-bottom: 22px; } .section-head .lead { margin-top: 22px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 100px; font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease); } .btn svg { width: 17px; height: 17px; transition: transform 0.25s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn--fire { background: var(--fire-grad); color: #fff; box-shadow: 0 10px 30px -8px rgba(255, 45, 45, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .btn--fire:hover { box-shadow: 0 16px 40px -8px rgba(255, 45, 45, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .btn--fire:hover svg { transform: translateX(3px); } .btn--ghost { background: var(--chip-bg); color: var(--ink); border: 1px solid var(--line-strong); } .btn--ghost:hover { border-color: var(--ember); color: var(--ember-bright); } .btn--lg { padding: 18px 34px; font-size: 16px; } /* ---------- Chips ---------- */ .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 100px; background: var(--chip-bg); border: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-mut); } /* ---------- Cards ---------- */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); } /* ---------- Example badge (illustrative data) ---------- */ .ex-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); padding: 4px 9px; border-radius: 100px; border: 1px dashed var(--line-strong); } .ex-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); } /* ---------- Image placeholders ---------- */ .ph { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: repeating-linear-gradient(135deg, rgba(255, 45, 45, 0.10) 0 2px, transparent 2px 12px), linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-faint); } .ph span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; background: var(--bg-elev); border: 1px solid var(--line); } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } body.elementor-editor-active .reveal, .elementor-editor-active .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } body.elementor-editor-active .reveal .mark::after, .elementor-editor-active .reveal .mark::after { transform: scaleX(1) !important; } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: 0.07s; } .reveal[data-d="2"] { transition-delay: 0.14s; } .reveal[data-d="3"] { transition-delay: 0.21s; } .reveal[data-d="4"] { transition-delay: 0.28s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } html { scroll-behavior: auto; } } /* divider */ .rule { height: 1px; background: var(--line); border: 0; } /* ============================================================ FIRESTOAK — Section & component styles ============================================================ */ /* ---------------- NAV ---------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease); border-bottom: 1px solid transparent; } .nav.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(18px) saturate(1.3); border-bottom-color: var(--line); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; } .brand__mark { width: 30px; height: 30px; flex: none; border-radius: 50% !important; } .nav__links { display: flex; align-items: center; gap: 4px; } .nav__links a { padding: 9px 15px; border-radius: 100px; font-size: 14.5px; font-weight: 500; color: var(--ink-mut); transition: color 0.2s, background 0.2s; } .nav__links a:hover { color: var(--ink); background: var(--chip-bg); } .nav__right { display: flex; align-items: center; gap: 12px; } .theme-toggle { width: 58px; height: 32px; border-radius: 100px; position: relative; background: var(--chip-bg); border: 1px solid var(--line-strong); display: inline-flex; align-items: center; padding: 0 4px; flex: none; } .theme-toggle__knob { width: 24px; height: 24px; border-radius: 50%; background: var(--fire-grad); box-shadow: 0 2px 8px rgba(255, 45, 45, 0.5); transform: translateX(0); transition: transform 0.4s var(--ease); display: grid; place-items: center; } .theme-toggle__knob svg { width: 14px; height: 14px; color: #fff; } [data-theme="light"] .theme-toggle__knob { transform: translateX(26px); } .theme-toggle .ic-sun { display: none; } [data-theme="light"] .theme-toggle .ic-sun { display: block; } [data-theme="light"] .theme-toggle .ic-moon { display: none; } .nav__burger { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line-strong); } .nav__burger span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 3px auto; border-radius: 2px; } /* ---------------- HERO ---------------- */ .hero { position: relative; isolation: isolate; padding-top: 150px; padding-bottom: clamp(60px, 8vh, 110px); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-glow); } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero__tag { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 11px; border-radius: 100px; white-space: nowrap; background: var(--chip-bg); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-mut) !important; margin-bottom: 26px; } .hero__tag b { color: var(--ink) !important; } .hero__dot { width: 8px; height: 8px; border-radius: 50%; background: #38C172; box-shadow: 0 0 0 4px rgba(56, 193, 114, 0.18); } .hero h1 { margin-bottom: 24px; } .hero__lead { font-weight: 400; margin-bottom: 36px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero__trust { display: flex; align-items: center; gap: 22px; margin-top: 40px; flex-wrap: nowrap; } .hero__trust .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hero__trust .t b { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink) !important; } .hero__trust .t span { font-size: 12.5px; font-weight: 400 !important; color: var(--ink-faint) !important; } .hero__trust .v { width: 1px; height: 36px; background: var(--line); flex-shrink: 0; } /* hero visual — momentum dashboard collage */ .hero__visual { position: relative; } .hero-board { position: relative; border-radius: var(--radius-lg); padding: 22px; background: linear-gradient(165deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-strong); box-shadow: var(--shadow); overflow: hidden; } .hero-board::after { content: ""; position: absolute; top: -40%; right: -20%; width: 70%; height: 80%; background: var(--card-glow); pointer-events: none; } .hero-board__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .hero-board__title { font-size: 13px; font-weight: 600; color: var(--ink-mut); display: flex; align-items: center; gap: 8px; } .spark { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin: 6px 0 18px; } .spark i { flex: 1; background: var(--fire-grad); border-radius: 3px 3px 0 0; opacity: 0.92; transform-origin: bottom; animation: grow 1s var(--ease) both; } @keyframes grow { from { transform: scaleY(0.05); } } .hero-stat { display: flex; align-items: baseline; gap: 10px; } .hero-stat b { font-family: var(--font-display); font-weight: 900; font-size: 40px; letter-spacing: -0.03em; color: var(--metric); } .hero-stat span { font-size: 13px; color: var(--ink-mut); } .hero-pills { display: grid; gap: 10px; margin-top: 18px; } .hero-pill { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--line); } .hero-pill__ic { width: 34px; height: 34px; border-radius: 9px; background: var(--fire-grad); display: grid; place-items: center; flex: none; } .hero-pill__ic svg { width: 17px; height: 17px; color: #fff; } .hero-pill__txt { display: flex; flex-direction: column; line-height: 1.2; } .hero-pill__txt b { font-size: 16px; font-weight: 700; white-space: nowrap; } .hero-pill__txt span { font-size: 11.5px; color: var(--ink-faint); } .hero-pill__val { margin-left: auto; text-align: right; } .hero-pill__val b { font-size: 16px; font-weight: 700; color: var(--metric); } .hero-pill__val span { font-size: 11px; color: var(--ink-faint); display: block; } .hero-float { position: absolute; right: 18px; bottom: -28px; z-index: 3; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 14px; padding: 13px 16px; box-shadow: var(--shadow); display: flex; gap: 12px; align-items: center; animation: floaty 5s ease-in-out infinite; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .hero-float b { font-family: var(--font-display) !important; font-weight: 900; font-size: 22px; color: #38C172 !important; letter-spacing: -0.02em; } .hero-float span { font-size: 11.5px; font-weight: 400; color: var(--ink-mut); display: block; max-width: 120px; } /* logos strip */ .logos { display: flex; flex-direction: column; align-items: center; gap: 22px; } .logos__row { display: flex; align-items: center; gap: clamp(18px, 3.5vw, 44px); flex-wrap: wrap; justify-content: center; } .logo-item { display: flex; align-items: center; gap: 11px; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ink-mut) !important; transition: color 0.25s var(--ease); } .logo-item:hover { color: var(--ink) !important; } .logo-tile { width: 42px; height: 42px; flex: none; border-radius: 11px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; box-shadow: var(--shadow-card); overflow: hidden; } .logo-tile img { width: 100%; height: 100%; object-fit: contain; padding: 7px; } .logos__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint) !important; font-weight: 400 !important; } /* ---------------- WHAT WE DO ---------------- */ .do-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; } .do-card { padding: 30px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); transition: transform 0.3s var(--ease), border-color 0.3s; } .do-card:hover { transform: translateY(-4px); border-color: var(--line-strong); } .do-card__ic { width: 50px; height: 50px; border-radius: 13px; background: var(--chip-bg); border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 20px; color: #ff4242 !important; } .do-card__ic svg { width: 24px; height: 24px; } .do-card h3 { font-size: 20px; margin-bottom: 9px; } .do-card p { font-size: 15px; color: var(--ink-mut); } .do-card__metric { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 8px; } .do-card__metric b { font-family: var(--font-display) !important; font-weight: 800; font-size: 24px; color: #ff4242 !important; letter-spacing: -0.02em; } .do-card__metric span { font-size: 12.5px; font-weight: 400; color: var(--ink-faint); } /* ---------------- SERVICES ---------------- */ .svc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; } .svc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .svc { position: relative; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); padding: 26px; overflow: hidden; min-height: 220px; display: flex; flex-direction: column; transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s; grid-column: span 4; } .svc::before { content: ""; position: absolute; inset: 0; background: var(--card-glow); opacity: 0; transition: opacity 0.4s; } .svc:hover { transform: translateY(-5px); border-color: var(--ember); box-shadow: var(--shadow-card); } .svc:hover::before { opacity: 1; } .svc:hover .svc__arrow { background: var(--fire-grad); color: #fff; transform: rotate(-45deg); } .svc--wide { grid-column: span 6; } .svc--feat { grid-column: span 6; background: linear-gradient(160deg, var(--panel-2), var(--panel)); } .svc__num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); letter-spacing: 0.1em; } .svc__arrow { position: absolute; top: 24px; right: 24px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--ink-mut); transition: all 0.35s var(--ease); } .svc__arrow svg { width: 16px; height: 16px; } .svc h3 { font-size: clamp(20px, 2vw, 26px); margin-top: auto; margin-bottom: 8px; } .svc p { font-size: 14.5px; color: var(--ink-mut); max-width: 42ch; } .svc__proof { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--metric); } .svc__proof svg { width: 15px; height: 15px; } .svc__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; } /* ---------------- PROCESS ---------------- */ .proc { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 5vw, 72px); align-items: start; } .proc__sticky { position: sticky; top: 110px; } .proc__steps { display: flex; flex-direction: column; gap: 14px; } .proc-step { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 26px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); transition: border-color 0.3s, transform 0.3s; } .proc-step:hover { border-color: var(--line-strong); transform: translateX(4px); } .proc-step__n { width: 50px; height: 50px; border-radius: 13px; background: var(--bg-elev); border: 1px solid var(--line-strong); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--ember-bright); } .proc-step h3 { font-size: 21px; margin-bottom: 7px; } .proc-step p { font-size: 15px; color: var(--ink-mut); } .proc-step__tag { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-faint); } /* ---------------- RESULTS: industry cards ---------------- */ .ind-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 52px; } .ind-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; transition: transform 0.35s var(--ease), border-color 0.35s; } .ind-card:hover { transform: translateY(-4px); border-color: var(--line-strong); } .ind-card__img { height: 200px; position: relative; } .ind-card__img .ph { position: absolute; inset: 0; border-radius: 0; border: 0; } .ind-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ind-card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--panel) 2%, rgba(0, 0, 0, 0.15) 60%, transparent); } .ind-card__body { padding: 26px; } .ind-card__cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } .ind-card__big { font-family: var(--font-display) !important; font-weight: 900; font-size: clamp(40px, 5vw, 60px); letter-spacing: -0.04em; color: #ff4242 !important; line-height: 1; margin: 8px 0 4px; } .ind-card__desc { font-size: 15px; color: var(--ink); } .ind-card ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 9px; } .ind-card li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 13.5px; color: var(--ink-mut); } .ind-card li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); margin-top: 7px; } .ind-card__tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; } .ind-card__foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } /* ---------------- RESULTS: Meta CBO cards ---------------- */ .cbo { position: relative; } .cbo__deck { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; } .cbo-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: var(--shadow-card); } .cbo-card__head { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .cbo-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: 6px; } .cbo-tag--hi { color: #2d7d52; background: rgba(56, 193, 114, 0.14); } .cbo-tag--new { color: var(--ember-bright); background: rgba(255, 45, 45, 0.13); } .cbo-card__name { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; } .cbo-card__thumb { width: 34px; height: 34px; border-radius: 7px; flex: none; background: #fff url("../images/e7472680-2764-44cc-bfa2-63eb43df1ef8.png") center/66% no-repeat; border: 1px solid var(--line); } .cbo-card__name p { font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--ink); } .cbo-card__name small { font-size: 10.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 5px; margin-top: 3px; } .cbo-card__name small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #38C172; } .cbo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cbo-stat b { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; display: block; } .cbo-stat b em { font-style: normal; color: var(--ember); font-size: 9px; vertical-align: super; margin-left: 1px; } .cbo-stat span { font-size: 10px; color: var(--ink-faint); line-height: 1.2; display: block; margin-top: 2px; } /* ---------------- RESULTS: PPC progress ---------------- */ .ppc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; } .ppc-card { padding: 30px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); } .ppc-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; } .ppc-card__top h3 { font-size: 22px; } .ppc-card__lift { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember-bright); font-weight: 600; } .ppc-card__sub { font-size: 14px; color: var(--ink-mut); margin-bottom: 24px; } .ppc-row { margin-bottom: 18px; } .ppc-row__label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .ppc-row__label span { font-size: 14px; font-weight: 600; } .ppc-row__label b { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--ember-bright); letter-spacing: -0.01em; } .ppc-track { height: 9px; border-radius: 100px; background: var(--track); overflow: hidden; } .ppc-fill { height: 100%; border-radius: 100px; background: var(--fire-grad); width: 0; transition: width 1.1s var(--ease); } /* ---------------- COMPARISON TABLE ---------------- */ .cmp { margin-top: 52px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .cmp__row { display: grid; grid-template-columns: 1.1fr 1.3fr 1.5fr; align-items: center; } .cmp__row>div { padding: 18px 22px; } .cmp__row--head>div { padding-block: 16px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint) !important; } .cmp__row--head { background: var(--panel-2); } .cmp__row:not(.cmp__row--head):nth-child(even) { background: var(--chip-bg); } .cmp__row:not(.cmp__row--head) { border-top: 1px solid var(--line); } .cmp__cap { font-weight: 700; color: var(--ink) !important; font-size: 15px; } .cmp__them { color: var(--ink-faint) !important; font-size: 14px; } .cmp__us { color: var(--ink) !important; font-size: 14px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; } .cmp__us svg { width: 17px; height: 17px; color: var(--ember-bright); margin-top: 2px; flex: none; } .cmp__uscol { background: linear-gradient(180deg, rgba(255, 45, 45, 0.06), transparent); } .cmp__brand { color: var(--ember-bright) !important; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; } /* ---------------- SERVICE SPOTLIGHT (paid ads phone) ---------------- */ .spot { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; padding: clamp(30px, 4vw, 56px); border-radius: var(--radius-lg); background: linear-gradient(155deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); position: relative; overflow: hidden; } .spot::before { content: ""; position: absolute; inset: 0; background: var(--card-glow); } .spot>* { position: relative; } .spot h3 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 16px; } .spot p { font-size: 16px; color: var(--ink-mut); margin-bottom: 22px; max-width: 46ch; } .spot__list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; } .spot__list li { display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 500; } .spot__list li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--fire-grad); flex: none; box-shadow: 0 0 0 4px rgba(255, 45, 45, 0.14); } .phone-wrap { position: relative; display: grid; place-items: center; min-height: 440px; } .phone { width: 230px; aspect-ratio: 9/19.2; border-radius: 38px; background: #0a0a0a; border: 7px solid #1c1c1e; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6); position: relative; overflow: hidden; transform: rotate(4deg); } .phone__notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 80px; height: 22px; background: #000; border-radius: 100px; z-index: 4; } .phone__screen { position: absolute; inset: 0; } .phone__screen .ph { position: absolute; inset: 0; border-radius: 0; border: 0; } .phone-metric { position: absolute; left: 14px; right: 14px; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 11px 13px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } .phone-metric__ic { width: 32px; height: 32px; border-radius: 50%; background: #fff url("../images/e7472680-2764-44cc-bfa2-63eb43df1ef8.png") center/64% no-repeat; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); display: grid; place-items: center; flex: none; } .phone-metric__ic svg { display: none; } .phone-metric b { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: #111; letter-spacing: -0.02em; } .phone-metric span { font-size: 10px; color: #666; display: block; } .phone-metric .r { margin-left: auto; text-align: right; } .phone-metric .r b { color: #111; } /* ---------------- WORK SHOWCASE ---------------- */ .work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 50px; } .work { grid-column: span 6; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--panel); position: relative; transition: transform 0.35s var(--ease); } .work:hover { transform: translateY(-4px); } .work--tall { grid-column: span 6; } .work__img { aspect-ratio: 16/10; } .work__img .ph { position: absolute; inset: 0; border-radius: 0; border: 0; } .work__body { padding: 22px 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .work__body h3 { font-size: 21px; margin-bottom: 5px; } .work__body p { font-size: 13.5px; color: var(--ink-mut); } .work__tag { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.08em; } /* ---------------- INDUSTRIES ---------------- */ .ind-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; } .ind-pill { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 100px; background: var(--panel); border: 1px solid var(--line); transition: border-color 0.3s, transform 0.3s; } .ind-pill:hover { border-color: var(--ember); transform: translateY(-2px); } .ind-pill b { font-size: 15px; font-weight: 600; } .ind-pill small { font-family: var(--font-mono); font-size: 11px; color: var(--metric); } /* ---------------- REGIONS ---------------- */ .regions { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; } .reg-col h3 { font-size: 22px; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; } .reg-col>p { font-size: 14px; color: var(--ink-mut); margin-bottom: 18px; } .reg-acc { display: flex; flex-direction: column; gap: 10px; } .reg-item { border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel); overflow: hidden; } .reg-item__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; text-align: left; } .reg-item__btn h4 { font-family: var(--font-display); font-size: 17px; font-weight: 700; } .reg-item__btn small { display: block; font-size: 12.5px; color: var(--ink-faint); font-weight: 400; margin-top: 3px; } .reg-item__plus { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; flex: none; transition: background 0.3s, transform 0.3s; position: relative; } .reg-item__plus::before, .reg-item__plus::after { content: ""; position: absolute; background: var(--ink); border-radius: 2px; transition: transform 0.3s; } .reg-item__plus::before { width: 12px; height: 2px; } .reg-item__plus::after { width: 2px; height: 12px; } .reg-item.open .reg-item__plus { background: var(--fire-grad); } .reg-item.open .reg-item__plus::before, .reg-item.open .reg-item__plus::after { background: #fff; } .reg-item.open .reg-item__plus::after { transform: scaleY(0); } .reg-item__body { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); } .reg-item__inner { padding: 0 20px 20px; } .reg-cities { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; } .reg-cities span { font-size: 12.5px; padding: 5px 11px; border-radius: 100px; background: var(--chip-bg); border: 1px solid var(--line); color: var(--ink-mut); } .reg-item__body p { font-size: 13.5px; color: var(--ink-mut); } .reg-soon { opacity: 0.62; } .reg-soon .reg-item__plus { pointer-events: none; } /* ---------------- VIDEO ---------------- */ .video { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-strong); margin-top: 50px; aspect-ratio: 16/8; box-shadow: var(--shadow); } .video .ph { position: absolute; inset: 0; border-radius: 0; border: 0; } .video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(20, 10, 6, 0.55), rgba(20, 10, 6, 0.15)); } .video__content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 4vw, 52px); } .video__play { width: 78px; height: 78px; border-radius: 50%; background: var(--fire-grad); display: grid; place-items: center; box-shadow: 0 14px 40px -8px rgba(255, 45, 45, 0.7); align-self: flex-start; margin-bottom: auto; transition: transform 0.3s; } .video__play:hover { transform: scale(1.07); } .video__play svg { width: 28px; height: 28px; color: #fff; margin-left: 3px; } .video__content h3 { color: #fff; font-size: clamp(24px, 3vw, 40px); max-width: 16ch; } .video__content p { color: rgba(255, 255, 255, 0.8); font-size: 15px; margin-top: 10px; max-width: 50ch; } /* ---------------- FOOTER ---------------- */ .footer { border-top: 1px solid var(--line); padding-block: 56px 40px; } .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } .footer__brand p { font-size: 14px; color: var(--ink-mut) !important; margin-top: 16px; max-width: 30ch; } .footer h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint) !important; margin-bottom: 16px; } .footer ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } .footer ul li { margin: 0 !important; padding: 0 !important; list-style-type: none !important; } .footer ul a { font-size: 14px; color: var(--ink-mut) !important; transition: color 0.2s; } .footer ul a:hover { color: var(--ember-bright) !important; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; } .footer__bottom p { font-size: 13px; color: var(--ink-faint) !important; } /* ---------------- RESPONSIVE ---------------- */ @media (max-width: 1000px) { .hero__grid, .proc, .spot, .regions { grid-template-columns: 1fr; } .proc__sticky { position: static; } .do-grid { grid-template-columns: repeat(2, 1fr); } .cbo__deck { grid-template-columns: repeat(2, 1fr); } .ind-grid, .ppc-grid, .footer__top { grid-template-columns: 1fr 1fr; } .svc, .svc--wide, .svc--feat, .work, .work--tall { grid-column: span 6; } .nav__links { display: none; } .nav__burger { display: block; } } @media (max-width: 640px) { .do-grid, .cbo__deck, .ind-grid, .ppc-grid, .work-grid>.work, .footer__top { grid-template-columns: 1fr; } .svc, .svc--wide, .svc--feat, .work, .work--tall { grid-column: span 12; } .hero__trust .v { display: none; } .cmp__row { grid-template-columns: 1fr; } .cmp__row>div { padding: 12px 16px; } .cmp__row--head { display: none; } .footer__bottom { flex-direction: column; align-items: flex-start; } } /* ============================================================ FIRESTOAK — High-end refinement layer Loaded last; elevates the base system to agency-grade polish. ============================================================ */ /* ---------- More air & confident rhythm ---------- */ :root { --maxw: 1280px; --section-pad: clamp(92px, 13vh, 184px); } /* ---------- Site-wide radial ambient + grain (behind all content) ---------- */ :root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } [data-theme="dark"] { --grain-blend: multiply; --page-glow: radial-gradient(46% 52% at 86% 6%, rgba(255, 45, 45, 0.18), transparent 70%), radial-gradient(50% 48% at 8% 30%, rgba(255, 107, 61, 0.10), transparent 72%), radial-gradient(52% 44% at 92% 58%, rgba(255, 45, 45, 0.14), transparent 70%), radial-gradient(48% 46% at 4% 82%, rgba(255, 45, 45, 0.10), transparent 72%); } [data-theme="light"] { --grain-blend: multiply; --page-glow: radial-gradient(46% 52% at 88% 4%, rgba(255, 45, 45, 0.11), transparent 70%), radial-gradient(50% 48% at 6% 28%, rgba(255, 107, 61, 0.09), transparent 72%), radial-gradient(52% 44% at 94% 60%, rgba(255, 45, 45, 0.08), transparent 70%), radial-gradient(48% 46% at 2% 84%, rgba(255, 107, 61, 0.08), transparent 72%); } body { background-color: var(--bg); background-image: var(--grain), var(--page-glow); background-repeat: repeat, no-repeat; background-attachment: scroll, fixed; background-blend-mode: var(--grain-blend, normal); } /* Per-section accent glows for depth (sit behind section content) */ .section { position: relative; isolation: isolate; } .section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.92; background: var(--sec-glow, none); } #what::before { --sec-glow: radial-gradient(38% 60% at 96% 12%, rgba(255, 45, 45, 0.13), transparent 65%); } #services::before { --sec-glow: radial-gradient(42% 70% at 2% 30%, rgba(255, 107, 61, 0.11), transparent 62%); } #process::before { --sec-glow: radial-gradient(40% 65% at 100% 50%, rgba(255, 45, 45, 0.13), transparent 64%); } #results::before { --sec-glow: radial-gradient(55% 50% at 50% -4%, rgba(255, 45, 45, 0.15), transparent 60%); } #work::before { --sec-glow: radial-gradient(45% 60% at 4% 80%, rgba(255, 107, 61, 0.10), transparent 64%); } #regions::before { --sec-glow: radial-gradient(45% 60% at 98% 20%, rgba(255, 45, 45, 0.12), transparent 64%); } /* ---------- Tabular figures on every metric ---------- */ .hero-stat b, .hero__trust .t b, .hero-pill__val b, .phone-metric b, .ind-card__big, .do-card__metric b, .ppc-row__label b, .cbo-stat b, .ind-pill small, .hero-float b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1; } /* ---------- Type: sharper, more editorial ---------- */ .h-display { letter-spacing: -0.045em; line-height: 0.92; } .h-section { letter-spacing: -0.035em; line-height: 0.98; } .lead { font-size: clamp(17px, 1.45vw, 20px); font-weight: 400; line-height: 1.62; color: var(--ink-mut); } .eyebrow { font-size: 11.5px; letter-spacing: 0.26em; gap: 12px; } .eyebrow::before { width: 26px; } [data-theme="dark"] .eyebrow { color: var(--amber); } /* refined section heads — a touch more space */ .section-head .eyebrow { margin-bottom: 26px; } .section-head .lead { margin-top: 26px; } /* ---------- Ambient: breathing ember ---------- */ .hero::before { animation: emberBreath 14s ease-in-out infinite; } @keyframes emberBreath { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } } @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } } /* ---------- Nav: refined glass + letterspacing ---------- */ .nav.scrolled { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(22px) saturate(1.5); } .nav__links a { letter-spacing: -0.005em; } .brand { letter-spacing: -0.03em; } /* ---------- Buttons: subtle gloss + spring ---------- */ .btn { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); } .btn--fire { background: var(--fire-grad); position: relative; } .btn--fire::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 42%); mix-blend-mode: screen; } .btn--fire:hover { transform: translateY(-3px); } .btn--ghost { backdrop-filter: blur(8px); } /* ---------- Hero board: glassmorphism + finer detail ---------- */ .hero-board { background: linear-gradient(165deg, color-mix(in srgb, var(--panel-2) 86%, transparent), color-mix(in srgb, var(--panel) 78%, transparent)); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid var(--line-strong); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .hero-board__title { letter-spacing: -0.01em; } .spark i { box-shadow: 0 0 14px -2px rgba(255, 45, 45, 0.5); } .hero-stat b { letter-spacing: -0.04em; } .hero-pill { background: color-mix(in srgb, var(--bg-elev) 70%, transparent); backdrop-filter: blur(6px); transition: transform 0.3s var(--ease), border-color 0.3s; } .hero-pill:hover { transform: translateX(3px); border-color: var(--line-strong); } .hero-float { box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); } /* refined trust row */ .hero__trust .t b { letter-spacing: -0.03em; } .hero__trust .v { height: 40px; opacity: 0.7; } /* ---------- Logo marquee ---------- */ .logos { gap: 26px; } .logos__marquee { width: 100%; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .logos__track { display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); width: max-content; animation: fsMarquee 38s linear infinite; } .logos:hover .logos__track { animation-play-state: paused; } @keyframes fsMarquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .logos__track { animation: none; } } .logo-tile { box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.5); transition: transform 0.3s var(--ease); } .logo-item:hover .logo-tile { transform: translateY(-3px) scale(1.04); } /* ---------- Cards: ember ring on hover, layered depth ---------- */ .do-card, .ind-card, .proc-step, .ppc-card, .work, .svc { transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); } .do-card:hover, .ppc-card:hover { box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--ember) 30%, transparent); } .svc:hover { box-shadow: var(--shadow-card), 0 0 60px -28px rgba(255, 45, 45, 0.6); } /* feature service gets a faint ember corner */ .svc--feat { position: relative; } .svc--feat::after { content: ""; position: absolute; top: -30%; right: -10%; width: 60%; height: 70%; background: radial-gradient(50% 50% at 70% 30%, rgba(255, 45, 45, 0.14), transparent 70%); pointer-events: none; } /* ---------- Industry result cards: cinematic ---------- */ .ind-card__img { height: 220px; } .ind-card__big { letter-spacing: -0.05em; text-shadow: 0 2px 30px rgba(255, 45, 45, 0.25); } .ind-card { box-shadow: var(--shadow-card); } .ind-card:hover img { transform: scale(1.04); } .ind-card__img img { transition: transform 0.7s var(--ease); } /* ---------- Comparison table: premium ---------- */ .cmp { box-shadow: var(--shadow-card); } .cmp__row--head>div { font-size: 11px; letter-spacing: 0.18em; } .cmp__brand { font-size: 15px; letter-spacing: -0.01em; } .field input:focus, .field select:focus { box-shadow: 0 0 0 4px rgba(255, 45, 45, 0.14); } /* ---------- Scroll cue under hero ---------- */ .hero__cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); } .hero__cue i { width: 1px; height: 34px; background: linear-gradient(var(--ember), transparent); animation: cueDrop 2.2s var(--ease) infinite; } @keyframes cueDrop { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; } } @media (max-width: 1000px) { .hero__cue { display: none; } } /* ---------- Section number tags for editorial structure ---------- */ .svc__num { font-size: 12px; letter-spacing: 0.12em; color: var(--ink-faint); } /* ---------- Footer refinement ---------- */ .footer__brand p { line-height: 1.6; } .footer { padding-top: 72px; } /* ---------- Hero fire (Lottie) ---------- */ .hero-fire { position: relative; display: grid; place-items: center; min-height: 500px; isolation: isolate; } .hero-fire__lottie { position: relative; z-index: 2; width: clamp(300px, 32vw, 460px); aspect-ratio: 1 / 1; filter: drop-shadow(0 30px 60px rgba(255, 45, 45, 0.40)); animation: fireFloat 5s ease-in-out infinite; } .hero-fire__lottie svg { display: block; } @keyframes fireFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @media (prefers-reduced-motion: reduce) { .hero-fire__lottie { animation: none; } } /* radial ember glow behind the flame */ .hero-fire__glow { position: absolute; z-index: 1; inset: 0; background: radial-gradient(42% 46% at 50% 48%, rgba(255, 45, 45, 0.42), transparent 70%), radial-gradient(60% 64% at 50% 56%, rgba(255, 107, 61, 0.20), transparent 72%); filter: blur(8px); animation: glowPulse 4.5s ease-in-out infinite; } @keyframes glowPulse { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } } @media (prefers-reduced-motion: reduce) { .hero-fire__glow { animation: none; } } /* warm reflected floor under the flame */ .hero-fire__base { position: absolute; z-index: 0; bottom: 6%; left: 50%; transform: translateX(-50%); width: 62%; height: 60px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 45, 45, 0.30), transparent 72%); filter: blur(10px); } .hero-fire .hero-float { right: 0; bottom: 8%; } @media (max-width: 1000px) { .hero-fire { min-height: 360px; } .hero-fire__lottie { width: clamp(240px, 60vw, 340px); } } /* ============================================================ FIRESTOAK v2 — "designed, not templated" Editorial, bold, mascot-forward. Loaded LAST, overrides base. Studies Gustavo Oliver energy; original Firestoak execution. ============================================================ */ /* ---------- Bolder rhythm ---------- */ :root { --maxw: 1320px; --section-pad: clamp(96px, 13vh, 190px); } /* ---------- HERO: oversized, confident ---------- */ .hero { padding-top: 168px; } .hero__grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; } .hero h1.h-display { font-size: clamp(52px, 8.4vw, 124px); line-height: 0.9; letter-spacing: -0.05em; font-weight: 900; text-transform: none; } .hero h1 .flame-text { font-style: italic; padding-right: 0.06em; } .hero__tag { font-size: 12px; letter-spacing: 0.02em; } .hero__lead { font-size: clamp(17px, 1.5vw, 21px); font-weight: 400; max-width: 50ch; } /* kill the scroll cue — replaced by marquee energy */ .hero__cue { display: none; } /* hero mascot sits bigger, glow softened */ .hero-fire { min-height: 520px; } .hero-fire__lottie { width: clamp(320px, 36vw, 520px); filter: drop-shadow(0 36px 70px rgba(255, 45, 45, 0.34)); } .hero-fire__glow { background: radial-gradient(44% 48% at 50% 50%, rgba(255, 45, 45, 0.34), transparent 70%), radial-gradient(64% 66% at 50% 56%, rgba(255, 107, 61, 0.16), transparent 74%); } /* ---------- DIAGONAL MARQUEE BARS ---------- */ .tape { position: relative; padding: 18px 0; margin: clamp(40px, 7vh, 96px) 0; } .tape__bar { position: relative; width: 116%; left: -8%; display: flex; overflow: hidden; padding: 16px 0; border-block: 2px solid #000; -webkit-mask: none; } .tape__bar--a { background: var(--ember); transform: rotate(-2.6deg); z-index: 2; } .tape__bar--b { background: #0A0A0A; transform: rotate(2.4deg); margin-top: -26px; z-index: 1; border-color: var(--ember); } [data-theme="light"] .tape__bar--b { background: #0A0A0A; } .tape__run { display: flex; align-items: center; gap: 28px; white-space: nowrap; width: max-content; animation: tapeRun 26s linear infinite; } .tape__bar--b .tape__run { animation-direction: reverse; animation-duration: 32s; } .tape:hover .tape__run { animation-play-state: paused; } @keyframes tapeRun { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .tape__run { animation: none; } } .tape__run span { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 2.2vw, 30px); letter-spacing: -0.01em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 28px; } .tape__bar--a .tape__run span { color: #0A0A0A !important; } .tape__bar--b .tape__run span { color: #FFFFFF !important; } .tape__run span::after { content: ""; width: 13px; height: 13px; border-radius: 50%; flex: none; } .tape__bar--a .tape__run span::after { background: #0A0A0A !important; } .tape__bar--b .tape__run span::after { background: var(--ember) !important; } /* ---------- BIG BRAND STATEMENT BLOCK ---------- */ .brandblock { position: relative; overflow: hidden; background: #0A0A0A; color: #fff; padding: clamp(72px, 11vh, 150px) 0; border-block: 1px solid var(--line-strong); } [data-theme="light"] .brandblock { background: #0A0A0A; } .brandblock__wm { font-family: var(--font-display); font-weight: 900; line-height: 0.78; font-size: clamp(72px, 12vw, 200px); letter-spacing: -0.05em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.16); user-select: none; pointer-events: none; white-space: nowrap; } .brandblock__wm em { font-style: normal; -webkit-text-stroke: 0; color: transparent; background: var(--fire-grad); -webkit-background-clip: text; background-clip: text; } .brandblock__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.72fr 0.5fr; gap: clamp(28px, 3.5vw, 52px); align-items: center; margin-top: clamp(24px, 4vw, 56px); } .brandblock__lead { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.05; max-width: 18ch; } .brandblock__lead .accent { color: var(--ember-bright); } .brandblock__body { color: rgba(255, 255, 255, 0.66); font-size: 16px; line-height: 1.62; } .brandblock__body p+p { margin-top: 14px; } .brandblock__mascot { position: absolute; right: -2%; top: 50%; transform: translateY(-50%); width: clamp(180px, 22vw, 320px); opacity: 0.92; pointer-events: none; } @media (max-width: 900px) { .brandblock__grid { grid-template-columns: 1fr; } .brandblock__mascot { display: none; } } /* ---------- BRIGHT FULL-BLEED SECTION ---------- */ .bright { position: relative; overflow: hidden; color: #fff; background: linear-gradient(118deg, #E00020 0%, #FF2D2D 52%, #FF5A2C 100%); border-block: 2px solid #000; } .bright__inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(56px, 8vh, 104px); } .bright__mascot { position: relative; display: grid; place-items: center; min-height: 340px; } .bright__lottie { width: clamp(220px, 26vw, 360px); filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.35)); } .bright__halo { position: absolute; inset: 0; background: radial-gradient(46% 46% at 50% 50%, rgba(255, 255, 255, 0.30), transparent 70%); } .bright__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .bright__eyebrow::before { content: ""; width: 24px; height: 2px; background: #fff; } .bright h2 { color: #fff !important; font-family: var(--font-display) !important; font-weight: 800 !important; font-size: clamp(32px, 4.6vw, 62px) !important; letter-spacing: -0.035em !important; line-height: 1.02 !important; margin-bottom: 20px !important; } .bright h2 p, .bright h2 * { font-size: inherit !important; line-height: inherit !important; font-family: inherit !important; font-weight: inherit !important; color: inherit !important; margin: 0 !important; padding: 0 !important; display: inline !important; } .bright h2 .u { display: inline-block !important; position: relative; } .bright h2 .u::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 0.12em; background: #0A0A0A; } .bright p { font-size: clamp(16px, 1.5vw, 19px); color: rgba(255, 255, 255, 0.92); max-width: 52ch; line-height: 1.55; } .bright__row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; } .bright .btn--dark { background: #0A0A0A; color: #fff; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5); } .bright .btn--dark:hover { background: #000; transform: translateY(-3px); } .bright .btn--wht { background: #fff; color: #0A0A0A; } .bright .btn--wht:hover { transform: translateY(-3px); } .bright__stats { display: flex; gap: clamp(24px, 4vw, 52px); margin-top: 38px; flex-wrap: wrap; } .bright__stat b { font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 4vw, 50px); letter-spacing: -0.03em; display: block; font-variant-numeric: tabular-nums; } .bright__stat span { font-size: 13px; color: rgba(255, 255, 255, 0.82); } @media (max-width: 900px) { .bright__inner { grid-template-columns: 1fr; } .bright__mascot { order: -1; min-height: 240px; } } /* ---------- FAQ ACCORDION ---------- */ .faq { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(36px, 5vw, 72px); align-items: start; } .faq__sticky { position: sticky; top: 110px; } .faq__list { display: flex; flex-direction: column; } .faq-item { border-top: 1px solid var(--line-strong); } .faq-item:last-child { border-bottom: 1px solid var(--line-strong); } .faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 4px; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.9vw, 23px); letter-spacing: -0.02em; color: var(--ink); transition: color 0.25s; } .faq-item__q:hover { color: var(--ember-bright); } .faq-item__ic { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-strong); position: relative; transition: background 0.3s, border-color 0.3s, transform 0.3s; } .faq-item__ic::before, .faq-item__ic::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--ink); border-radius: 2px; transform: translate(-50%, -50%); transition: transform 0.3s, background 0.3s; } .faq-item__ic::before { width: 13px; height: 2px; } .faq-item__ic::after { width: 2px; height: 13px; } .faq-item.open .faq-item__ic { background: var(--fire-grad); border-color: transparent; transform: rotate(90deg); } .faq-item.open .faq-item__ic::before, .faq-item.open .faq-item__ic::after { background: #fff; } .faq-item.open .faq-item__ic::after { transform: translate(-50%, -50%) scaleY(0); } .faq-item__a { max-height: 0; overflow: hidden; transition: max-height 0.42s var(--ease); } .faq-item__a p { padding: 0 4px 28px; color: var(--ink-mut); font-size: 16px; line-height: 1.62; max-width: 64ch; } .faq-item__a p+p { padding-top: 14px; } /* ---------- Fire lottie accents (used with restraint) ---------- */ .brandblock__fire { position: relative; width: clamp(140px, 15vw, 240px); aspect-ratio: 500 / 690; justify-self: center; filter: drop-shadow(0 24px 50px rgba(255, 45, 45, 0.45)); animation: fireFloat 5s ease-in-out infinite; pointer-events: none; } .brandblock::after { content: ""; position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: 26%; height: 80%; pointer-events: none; z-index: 1; background: radial-gradient(50% 50% at 60% 55%, rgba(255, 45, 45, 0.18), transparent 70%); } @media (max-width: 900px) { .brandblock__fire, .brandblock::after { display: none; } } /* ---------- Brand logo (real mark) ---------- */ .brand__mark { width: 38px; height: 38px; flex: none; border-radius: 50% !important; object-fit: contain; transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease); } .brand:hover .brand__mark { transform: rotate(-6deg) scale(1.04); } [data-theme="dark"] .brand__mark { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 18px -8px rgba(0, 0, 0, 0.8); } [data-theme="light"] .brand__mark { box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.10), 0 6px 16px -10px rgba(10, 10, 10, 0.4); } .footer__brand .brand__mark { width: 34px; height: 34px; } /* ---------- Reusable flame accent (recurring fire motif) ---------- */ .flame-accent { aspect-ratio: 500 / 690; pointer-events: none; filter: drop-shadow(0 14px 30px rgba(255, 45, 45, 0.42)); animation: fireFloat 4.6s ease-in-out infinite; } .flame-accent--md { width: clamp(70px, 7vw, 104px); } /* hero corner flame */ .hero-fire__flame { position: absolute; left: 4%; bottom: 6%; width: clamp(64px, 6vw, 92px); z-index: 4; } /* process sticky flame */ .proc__sticky .flame-accent { margin-bottom: 18px; } .mark { position: relative; display: inline-block; color: inherit; --mark-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M5 16 C 70 5 150 6 200 12 C 240 16 272 13 296 8' fill='none' stroke='%23FF2D2D' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E"); } .mark::after { content: ""; position: absolute; left: -0.06em; right: -0.06em; bottom: -0.08em; height: 0.36em; background: var(--mark-img) center / 100% 100% no-repeat; pointer-events: none; transform: scaleX(1); transform-origin: left center; } .mark--amber { --mark-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 12 C 60 18 140 17 196 10 C 238 5 270 9 297 15' fill='none' stroke='%23FF6B3D' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: no-preference) { .reveal .mark::after { transform: scaleX(0); } .reveal.in .mark::after { transform: scaleX(1); transition: transform 0.7s var(--ease) 0.25s; } } /* ---------- Section-number kicker for editorial structure ---------- */ .kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .kicker b { color: var(--ember-bright); } /* ---------- Work showcase → neon poster feel ---------- */ #work .work__img .ph { background: repeating-linear-gradient(135deg, rgba(255, 45, 45, 0.16) 0 2px, transparent 2px 13px), linear-gradient(160deg, #1a1414, #0d0b0b); } /* responsive */ @media (max-width: 900px) { .faq { grid-template-columns: 1fr; } .faq__sticky { position: static; } .tape__bar { width: 130%; left: -15%; } } /* ============================================================ FIRESTOAK v2 — Responsive layer (loaded LAST) Tablet ≤1024 · Large phone ≤768 · Phone ≤560 · Small ≤400 ============================================================ */ /* ---------------- TABLET ≤1024 ---------------- */ @media (max-width: 1024px) { :root { --section-pad: clamp(72px, 9vh, 120px); } .hero { padding-top: 128px; } .hero h1.h-display { font-size: clamp(46px, 9vw, 88px); } .brandblock__wm { font-size: clamp(60px, 17vw, 180px); } .tape { margin: clamp(32px, 5vh, 64px) 0; } } /* ---------------- LARGE PHONE ≤768 ---------------- */ @media (max-width: 768px) { :root { --section-pad: clamp(58px, 8vh, 88px); --gutter: 22px; } /* nav: declutter — keep toggle + burger, drop inline CTA */ .nav__inner { height: 68px; } .nav__right .btn--fire { display: none; } .nav__burger { display: grid; place-content: center; } /* hero stacks, mascot first feels better */ .hero { padding-top: 108px; } .hero__grid { grid-template-columns: 1fr; gap: 28px; } .hero h1.h-display { font-size: clamp(40px, 12vw, 66px); line-height: 0.94; } .hero__lead { font-size: 16.5px; font-weight: 400; max-width: 60ch; } .hero__cta { width: 100%; } .hero__cta .btn { flex: 1 1 auto; justify-content: center; } .hero-fire { min-height: 320px; } .hero-fire__lottie { width: clamp(220px, 62vw, 330px); } /* float stat: out of the absolute corner, into normal flow */ .hero__visual { display: flex; flex-direction: column; align-items: center; gap: 6px; } .hero-fire .hero-float, .hero-float { position: static; transform: none; margin: 4px auto 0; max-width: 320px; } .hero-fire__flame { width: 58px; } /* trust row wraps cleanly */ .hero__trust { gap: 16px 22px; } /* tape */ .tape__run span { font-size: clamp(15px, 4.4vw, 22px); gap: 20px; } .tape__run { gap: 20px; } /* brand block */ .brandblock { padding-block: clamp(56px, 8vh, 96px); } .brandblock__wm { font-size: clamp(46px, 16vw, 120px); } .brandblock__grid { gap: 26px; } .brandblock__lead { font-size: clamp(23px, 5.4vw, 34px); max-width: none; } .brandblock__body { font-size: 15px; } /* bright section */ .bright__inner { padding-block: clamp(48px, 7vh, 80px); gap: 28px; } .bright h2 { font-size: clamp(28px, 7vw, 44px) !important; line-height: 1.05 !important; } .bright__lottie { width: clamp(190px, 50vw, 280px); } .bright__row { width: 100%; } .bright__row .btn { flex: 1 1 auto; justify-content: center; } .bright__stats { gap: 22px 32px; } /* services header: stack title + button */ .svc-head { flex-direction: column; align-items: flex-start; gap: 18px; } .svc-head .btn { width: 100%; justify-content: center; } /* faq sticky becomes static heading */ .faq { gap: 28px; } .faq-item__q { font-size: clamp(17px, 4.6vw, 21px); padding: 22px 2px; } /* section heads a touch tighter */ .h-section { font-size: clamp(28px, 6.4vw, 44px); } } /* ---------------- PHONE ≤560 ---------------- */ @media (max-width: 560px) { :root { --section-pad: 56px; } .hero h1.h-display { font-size: clamp(36px, 13vw, 52px); letter-spacing: -0.03em; } .hero__tag { font-size: 11.5px; white-space: normal; text-align: left; } .hero__cta { flex-direction: column; } .hero__cta .btn { width: 100%; } .hero__trust { flex-direction: row; flex-wrap: nowrap; gap: 12px; } .hero__trust .t b { font-size: 22px; } /* single-column grids (belt-and-suspenders over base sheets) */ .do-grid, .cbo__deck, .ind-grid, .ppc-grid, .regions, .footer__top { grid-template-columns: 1fr; } .svc-grid { display: flex; flex-direction: column; } .svc, .svc--wide, .svc--feat { grid-column: auto; min-height: 0; } .work-grid { display: flex; flex-direction: column; } .work, .work--tall { grid-column: auto; } .work[style*="span 4"] { grid-column: auto !important; } /* brand wordmark: let it breathe, less clipping */ .brandblock__wm { font-size: clamp(38px, 15vw, 64px); -webkit-text-stroke-width: 1px; } .brandblock__lead { font-size: clamp(22px, 6.6vw, 30px); } /* bright stats stack to 2-up */ .bright__stats { gap: 18px 28px; } .bright__stat b { font-size: clamp(26px, 8vw, 38px); } /* comparison: card-style rows already collapse in sections.css at 640 */ /* phone mockup in spotlight: scale down */ .phone { width: 200px; } /* footer */ .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; } .footer__top { gap: 28px; } } /* ---------------- SMALL ≤400 ---------------- */ @media (max-width: 400px) { :root { --gutter: 18px; } .hero h1.h-display { font-size: clamp(32px, 13vw, 44px); } .brandblock__wm { font-size: clamp(34px, 15vw, 52px); } .h-section { font-size: clamp(25px, 7.4vw, 34px); } .btn { padding: 13px 20px; font-size: 14px; } .btn--lg { padding: 15px 22px; font-size: 15px; } .hero__trust .t b { font-size: 20px; } .logo-item { font-size: 14px; } .logo-tile { width: 38px; height: 38px; } } /* ---------------- Touch: disable hover-only transforms ---------------- */ @media (hover: none) { .do-card:hover, .svc:hover, .ind-card:hover, .work:hover, .ind-pill:hover, .hero-pill:hover, .ppc-card:hover { transform: none; } .logos__track, .tape__run { animation-play-state: running !important; } } /* Scoped overrides to protect Firestoak widgets from Elementor/theme styling contamination */ .firestoak-module, [class*="elementor-widget-firestoak_"] { font-family: var(--font-body); } [class*="elementor-widget-firestoak_"] h1, [class*="elementor-widget-firestoak_"] h2, [class*="elementor-widget-firestoak_"] h3, [class*="elementor-widget-firestoak_"] h4, [class*="elementor-widget-firestoak_"] h5, [class*="elementor-widget-firestoak_"] h6, .firestoak-module h1, .firestoak-module h2, .firestoak-module h3, .firestoak-module h4, .firestoak-module h5, .firestoak-module h6 { font-family: var(--font-display); } [class*="elementor-widget-firestoak_"] p, .firestoak-module p { font-family: var(--font-body); } [class*="elementor-widget-firestoak_"] a:not(.btn), .firestoak-module a:not(.btn) { font-family: inherit; color: inherit; } [class*="elementor-widget-firestoak_"] ul, [class*="elementor-widget-firestoak_"] ol, [class*="elementor-widget-firestoak_"] li, .firestoak-module ul, .firestoak-module ol, .firestoak-module li { font-family: inherit; color: inherit; } /* Generic text elements within Firestoak modules default to the body font and inherit parent color, while protecting specific design components and color highlight classes */ [class*="elementor-widget-firestoak_"] span:not(.flame-text, .accent, .eyebrow, .svc__num, .svc__proof, .member__role, .cbo-tag, .muted, .faint, .btn, .btn *, .logo-item, .brand, .hero__tag, .hero__tag *, .chip, .work__tag, .proc-step__tag, .ex-badge, .logos__label, .cmp__us span, .cmp__brand, .logo-tile, .hero-float span, .do-card__metric span, .ind-card__big span, .hero__trust, .hero__trust *, .footer, .footer *, .sp-crumb, .sp-crumb *, .sp-hero, .sp-hero *, .sp-board, .sp-board *, .sp-tile, .sp-tile *, .sp-row, .sp-row *, .sp-float, .sp-float *, .sp-deliver, .sp-deliver *, .sp-split, .sp-split *, .sp-step, .sp-step *, .sp-tier, .sp-tier *, .sp-use, .sp-use *, .sp-rel, .sp-rel *, .sp-related, .sp-related *, .sp-uses, .sp-uses *, .reg-cities, .reg-cities *, .sp-head, .sp-head *), [class*="elementor-widget-firestoak_"] div:not(.btn, .btn *, .logo-tile, .brand, .brandblock__wm, .proc-step__n, .hero-board, .do-card, .svc, .proc-step, .ind-card, .cbo-card, .ppc-card, .cmp, .spot, .phone, .work, .ind-pill, .reg-item, .member, .video, .cta, .wrap, .section, .nav__inner, .nav__right, .hero-pill__ic, .video__play, .cta__grid, .nav__burger, .nav__burger span, .logo-item, .logo-item *, .cmp__row--head, .cmp__row--head *, .cmp__row, .cmp__row *, .cmp__cap, .cmp__them, .cmp__us, .cmp__brand, .cmp__uscol, .logos__track, .logos, .tape, .tape__bar, .tape__bar--a, .tape__bar--b, .tape__run, .tape__run *, .hero__trust, .hero__trust *, .footer, .footer *, .footer__brand, .footer__brand *, .footer__bottom, .footer__bottom *, .sp-crumb, .sp-crumb *, .sp-hero, .sp-hero *, .sp-board, .sp-board *, .sp-tile, .sp-tile *, .sp-row, .sp-row *, .sp-float, .sp-float *, .sp-deliver, .sp-deliver *, .sp-split, .sp-split *, .sp-step, .sp-step *, .sp-tier, .sp-tier *, .sp-use, .sp-use *, .sp-rel, .sp-rel *, .sp-related, .sp-related *, .sp-uses, .sp-uses *, .reg-cities, .reg-cities *, .sp-head, .sp-head *), [class*="elementor-widget-firestoak_"] b:not(.btn, .btn *, .hero-float b, .hero-float *, .sp-crumb, .sp-crumb *, .sp-hero, .sp-hero *, .sp-board, .sp-board *, .sp-tile, .sp-tile *, .sp-row, .sp-row *, .sp-float, .sp-float *, .sp-deliver, .sp-deliver *, .sp-split, .sp-split *, .sp-step, .sp-step *, .sp-tier, .sp-tier *, .sp-use, .sp-use *, .sp-rel, .sp-rel *, .sp-related, .sp-related *, .sp-uses, .sp-uses *, .reg-cities, .reg-cities *, .sp-head, .sp-head *), [class*="elementor-widget-firestoak_"] strong:not(.btn, .btn *), [class*="elementor-widget-firestoak_"] i:not(.btn, .btn *), [class*="elementor-widget-firestoak_"] em:not(.btn, .btn *), [class*="elementor-widget-firestoak_"] td, [class*="elementor-widget-firestoak_"] th, [class*="elementor-widget-firestoak_"] label, .firestoak-module span:not(.flame-text, .accent, .eyebrow, .svc__num, .svc__proof, .member__role, .cbo-tag, .muted, .faint, .btn, .btn *, .logo-item, .brand, .hero__tag, .hero__tag *, .chip, .work__tag, .proc-step__tag, .ex-badge, .logos__label, .cmp__us span, .cmp__brand, .logo-tile, .hero-float span, .do-card__metric span, .ind-card__big span, .hero__trust, .hero__trust *, .footer, .footer *, .sp-crumb, .sp-crumb *, .sp-hero, .sp-hero *, .sp-board, .sp-board *, .sp-tile, .sp-tile *, .sp-row, .sp-row *, .sp-float, .sp-float *, .sp-deliver, .sp-deliver *, .sp-split, .sp-split *, .sp-step, .sp-step *, .sp-tier, .sp-tier *, .sp-use, .sp-use *, .sp-rel, .sp-rel *, .sp-related, .sp-related *, .sp-uses, .sp-uses *, .reg-cities, .reg-cities *, .sp-head, .sp-head *), .firestoak-module div:not(.btn, .btn *, .logo-tile, .brand, .brandblock__wm, .proc-step__n, .hero-board, .do-card, .svc, .proc-step, .ind-card, .cbo-card, .ppc-card, .cmp, .spot, .phone, .work, .ind-pill, .reg-item, .member, .video, .cta, .wrap, .section, .nav__inner, .nav__right, .hero-pill__ic, .video__play, .cta__grid, .nav__burger, .nav__burger span, .logo-item, .logo-item *, .cmp__row--head, .cmp__row--head *, .cmp__row, .cmp__row *, .cmp__cap, .cmp__them, .cmp__us, .cmp__brand, .cmp__uscol, .logos__track, .logos, .tape, .tape__bar, .tape__bar--a, .tape__bar--b, .tape__run, .tape__run *, .hero__trust, .hero__trust *, .footer, .footer *, .footer__brand, .footer__brand *, .footer__bottom, .footer__bottom *, .sp-crumb, .sp-crumb *, .sp-hero, .sp-hero *, .sp-board, .sp-board *, .sp-tile, .sp-tile *, .sp-row, .sp-row *, .sp-float, .sp-float *, .sp-deliver, .sp-deliver *, .sp-split, .sp-split *, .sp-step, .sp-step *, .sp-tier, .sp-tier *, .sp-use, .sp-use *, .sp-rel, .sp-rel *, .sp-related, .sp-related *, .sp-uses, .sp-uses *, .reg-cities, .reg-cities *, .sp-head, .sp-head *), .firestoak-module b:not(.btn, .btn *, .hero-float b, .hero-float *, .sp-crumb, .sp-crumb *, .sp-hero, .sp-hero *, .sp-board, .sp-board *, .sp-tile, .sp-tile *, .sp-row, .sp-row *, .sp-float, .sp-float *, .sp-deliver, .sp-deliver *, .sp-split, .sp-split *, .sp-step, .sp-step *, .sp-tier, .sp-tier *, .sp-use, .sp-use *, .sp-rel, .sp-rel *, .sp-related, .sp-related *, .sp-uses, .sp-uses *, .reg-cities, .reg-cities *, .sp-head, .sp-head *), .firestoak-module strong:not(.btn, .btn *), .firestoak-module i:not(.btn, .btn *), .firestoak-module em:not(.btn, .btn *), .firestoak-module td, .firestoak-module th, .firestoak-module label { font-family: var(--font-body); color: inherit; } /* Heading and display children inherit the correct font family */ [class*="elementor-widget-firestoak_"] h1 *, [class*="elementor-widget-firestoak_"] h2 *, [class*="elementor-widget-firestoak_"] h3 *, [class*="elementor-widget-firestoak_"] h4 *, [class*="elementor-widget-firestoak_"] h5 *, [class*="elementor-widget-firestoak_"] h6 *, [class*="elementor-widget-firestoak_"] .brand *, [class*="elementor-widget-firestoak_"] .logo-item *, [class*="elementor-widget-firestoak_"] .brandblock__wm *, [class*="elementor-widget-firestoak_"] .hero-stat *, [class*="elementor-widget-firestoak_"] .hero-float *, [class*="elementor-widget-firestoak_"] .do-card__metric *, [class*="elementor-widget-firestoak_"] .proc-step__n *, [class*="elementor-widget-firestoak_"] .ind-card__big *, [class*="elementor-widget-firestoak_"] .cbo-stat *, [class*="elementor-widget-firestoak_"] .ppc-row__label *, .firestoak-module h1 *, .firestoak-module h2 *, .firestoak-module h3 *, .firestoak-module h4 *, .firestoak-module h5 *, .firestoak-module h6 *, .firestoak-module .brand *, .firestoak-module .logo-item *, .firestoak-module .brandblock__wm *, .firestoak-module .hero-stat *, .firestoak-module .hero-float *, .firestoak-module .do-card__metric *, .firestoak-module .proc-step__n *, .firestoak-module .ind-card__big *, .firestoak-module .cbo-stat *, .firestoak-module .ppc-row__label * { font-family: inherit; } /* Monospace elements use the monospace font family */ [class*="elementor-widget-firestoak_"] .ex-badge, [class*="elementor-widget-firestoak_"] .ph span, [class*="elementor-widget-firestoak_"] .logos__label, [class*="elementor-widget-firestoak_"] .svc__num, [class*="elementor-widget-firestoak_"] .proc-step__tag, [class*="elementor-widget-firestoak_"] .ind-card__cat, [class*="elementor-widget-firestoak_"] .ppc-card__lift, [class*="elementor-widget-firestoak_"] .cmp__row--head>div, .firestoak-module .ex-badge, .firestoak-module .ph span, .firestoak-module .logos__label, .firestoak-module .svc__num, .firestoak-module .proc-step__tag, .firestoak-module .ind-card__cat, .firestoak-module .ppc-card__lift { font-family: var(--font-mono) !important; } /* Scoped overrides to protect Firestoak buttons from Elementor/theme overrides */ html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn, html body .elementor-widget-container .firestoak-module .btn, [class*="elementor-widget-firestoak_"] .btn, .firestoak-module .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 15px 26px !important; border-radius: 100px !important; font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: -0.01em !important; white-space: nowrap !important; line-height: 1.2 !important; text-decoration: none !important; text-transform: none !important; border: none !important; box-shadow: none !important; cursor: pointer !important; background: none !important; color: inherit !important; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease) !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn svg, html body .elementor-widget-container .firestoak-module .btn svg, [class*="elementor-widget-firestoak_"] .btn svg, .firestoak-module .btn svg { width: 17px !important; height: 17px !important; flex: none !important; fill: currentColor !important; transition: transform 0.25s var(--ease) !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn:hover, html body .elementor-widget-container .firestoak-module .btn:hover, [class*="elementor-widget-firestoak_"] .btn:hover, .firestoak-module .btn:hover { transform: translateY(-3px) !important; } /* Button modifiers overrides */ html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn--fire, html body .elementor-widget-container .firestoak-module .btn--fire, [class*="elementor-widget-firestoak_"] .btn--fire, .firestoak-module .btn--fire { background: var(--fire-grad) !important; color: #fff !important; box-shadow: 0 10px 30px -8px rgba(255, 45, 45, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; position: relative !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn--fire::after, html body .elementor-widget-container .firestoak-module .btn--fire::after, [class*="elementor-widget-firestoak_"] .btn--fire::after, .firestoak-module .btn--fire::after { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 42%) !important; mix-blend-mode: screen !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn--fire:hover, html body .elementor-widget-container .firestoak-module .btn--fire:hover, [class*="elementor-widget-firestoak_"] .btn--fire:hover, .firestoak-module .btn--fire:hover { box-shadow: 0 16px 40px -8px rgba(255, 45, 45, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; color: #fff !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn--fire:hover svg, html body .elementor-widget-container .firestoak-module .btn--fire:hover svg, [class*="elementor-widget-firestoak_"] .btn--fire:hover svg, .firestoak-module .btn--fire:hover svg { transform: translateX(3px) !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn--ghost, html body .elementor-widget-container .firestoak-module .btn--ghost, [class*="elementor-widget-firestoak_"] .btn--ghost, .firestoak-module .btn--ghost { background: var(--chip-bg) !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; backdrop-filter: blur(8px) !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn--ghost:hover, html body .elementor-widget-container .firestoak-module .btn--ghost:hover, [class*="elementor-widget-firestoak_"] .btn--ghost:hover, .firestoak-module .btn--ghost:hover { border-color: var(--ember) !important; color: var(--ember-bright) !important; background: var(--chip-bg) !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn--dark, html body .elementor-widget-container .firestoak-module .btn--dark, [class*="elementor-widget-firestoak_"] .btn--dark, .firestoak-module .btn--dark { background: #0A0A0A !important; color: #fff !important; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5) !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn--dark:hover, html body .elementor-widget-container .firestoak-module .btn--dark:hover, [class*="elementor-widget-firestoak_"] .btn--dark:hover, .firestoak-module .btn--dark:hover { background: #000 !important; color: #fff !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn--wht, html body .elementor-widget-container .firestoak-module .btn--wht, [class*="elementor-widget-firestoak_"] .btn--wht, .firestoak-module .btn--wht { background: #fff !important; color: #0A0A0A !important; box-shadow: none !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn--wht:hover, html body .elementor-widget-container .firestoak-module .btn--wht:hover, [class*="elementor-widget-firestoak_"] .btn--wht:hover, .firestoak-module .btn--wht:hover { background: #fff !important; color: #0A0A0A !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn--lg, html body .elementor-widget-container .firestoak-module .btn--lg, [class*="elementor-widget-firestoak_"] .btn--lg, .firestoak-module .btn--lg { padding: 18px 34px !important; font-size: 16px !important; } /* Scoped overrides to protect Firestoak form fields from theme styling overrides */ html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .field input, html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .field select, html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .field textarea, html body .elementor-widget-container .firestoak-module .field input, html body .elementor-widget-container .firestoak-module .field select, html body .elementor-widget-container .firestoak-module .field textarea, [class*="elementor-widget-firestoak_"] .field input, [class*="elementor-widget-firestoak_"] .field select, [class*="elementor-widget-firestoak_"] .field textarea, .firestoak-module .field input, .firestoak-module .field select, .firestoak-module .field textarea { width: 100% !important; padding: 13px 15px !important; border-radius: 11px !important; background: var(--bg) !important; border: 1px solid var(--line-strong) !important; color: var(--ink) !important; font-family: var(--font-body) !important; font-size: 14.5px !important; line-height: normal !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .field input:focus, html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .field select:focus, html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .field textarea:focus, html body .elementor-widget-container .firestoak-module .field input:focus, html body .elementor-widget-container .firestoak-module .field select:focus, html body .elementor-widget-container .firestoak-module .field textarea:focus, [class*="elementor-widget-firestoak_"] .field input:focus, [class*="elementor-widget-firestoak_"] .field select:focus, [class*="elementor-widget-firestoak_"] .field textarea:focus, .firestoak-module .field input:focus, .firestoak-module .field select:focus, .firestoak-module .field textarea:focus { outline: none !important; border-color: var(--ember) !important; } @media (max-width: 400px) { html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn, html body .elementor-widget-container .firestoak-module .btn, [class*="elementor-widget-firestoak_"] .btn, .firestoak-module .btn { padding: 13px 20px !important; font-size: 14px !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .btn--lg, html body .elementor-widget-container .firestoak-module .btn--lg, [class*="elementor-widget-firestoak_"] .btn--lg, .firestoak-module .btn--lg { padding: 15px 22px !important; font-size: 15px !important; } } /* High-specificity base reset for all button tags inside Firestoak widgets to prevent theme/Elementor overrides */ html body .elementor-widget-container [class*="elementor-widget-firestoak_"] button, html body .elementor-widget-container .firestoak-module button, [class*="elementor-widget-firestoak_"] button, .firestoak-module button { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; outline: none !important; border-radius: 0 !important; cursor: pointer !important; width: auto !important; height: auto !important; display: inline-block !important; text-transform: none !important; text-decoration: none !important; line-height: inherit !important; font: inherit !important; color: inherit !important; -webkit-appearance: none !important; appearance: none !important; transition: none !important; } /* Scoped overrides to protect custom button components from the raw button reset and Elementor globals */ html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .theme-toggle, html body .elementor-widget-container .firestoak-module .theme-toggle, [class*="elementor-widget-firestoak_"] .theme-toggle, .firestoak-module .theme-toggle { width: 58px !important; height: 32px !important; border-radius: 100px !important; position: relative !important; background: var(--chip-bg) !important; border: 1px solid var(--line-strong) !important; display: inline-flex !important; align-items: center !important; padding: 0 4px !important; flex: none !important; box-shadow: none !important; cursor: pointer !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .video__play, html body .elementor-widget-container .firestoak-module .video__play, [class*="elementor-widget-firestoak_"] .video__play, .firestoak-module .video__play { width: 78px !important; height: 78px !important; border-radius: 50% !important; background: var(--fire-grad) !important; display: grid !important; place-items: center !important; box-shadow: 0 14px 40px -8px rgba(255, 45, 45, 0.7) !important; border: none !important; padding: 0 !important; cursor: pointer !important; align-self: flex-start !important; margin-bottom: auto !important; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .video__play:hover, html body .elementor-widget-container .firestoak-module .video__play:hover, [class*="elementor-widget-firestoak_"] .video__play:hover, .firestoak-module .video__play:hover { transform: scale(1.07) !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .reg-item__btn, html body .elementor-widget-container .firestoak-module .reg-item__btn, [class*="elementor-widget-firestoak_"] .reg-item__btn, .firestoak-module .reg-item__btn { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 18px 20px !important; text-align: left !important; background: none !important; border: none !important; box-shadow: none !important; cursor: pointer !important; font-family: var(--font-display) !important; font-size: 17px !important; font-weight: 700 !important; line-height: inherit !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .faq-item__q, html body .elementor-widget-container .firestoak-module .faq-item__q, [class*="elementor-widget-firestoak_"] .faq-item__q, .firestoak-module .faq-item__q { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; background: none !important; border: none !important; box-shadow: none !important; cursor: pointer !important; text-align: left !important; padding: 22px 2px !important; font-family: var(--font-display) !important; font-size: clamp(17px, 4.6vw, 21px) !important; font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -0.02em !important; color: var(--ink) !important; } html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .nav__burger, html body .elementor-widget-container .firestoak-module .nav__burger, [class*="elementor-widget-firestoak_"] .nav__burger, .firestoak-module .nav__burger { display: none !important; width: 42px !important; height: 42px !important; border-radius: 10px !important; border: 1px solid var(--line-strong) !important; background: none !important; padding: 0 !important; cursor: pointer !important; } @media (max-width: 1000px) { html body .elementor-widget-container [class*="elementor-widget-firestoak_"] .nav__burger, html body .elementor-widget-container .firestoak-module .nav__burger, [class*="elementor-widget-firestoak_"] .nav__burger, .firestoak-module .nav__burger { display: block !important; } } /* ============================================================ FIRESTOAK — Service Page component library (sp-*) Built ON the v2 design system. Loaded after v2.css + responsive.css. ============================================================ */ /* ---------- Breadcrumb ---------- */ .sp-crumb { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 26px; flex-wrap: wrap; } .sp-crumb a { color: var(--ink-mut); transition: color 0.2s; } .sp-crumb a:hover { color: var(--ember-bright); } .sp-crumb svg { width: 13px; height: 13px; opacity: 0.6; } .sp-crumb .cur { color: var(--ink); } /* ---------- Service hero ---------- */ .sp-hero { position: relative; isolation: isolate; padding-top: 142px; padding-bottom: clamp(48px, 7vh, 96px); overflow: hidden; } .sp-hero::before { content:""; position:absolute; inset:0; z-index:-1; background: var(--hero-glow); } .sp-hero__grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(34px, 5vw, 78px); align-items: center; } .sp-hero__cat { display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border-radius:100px; background: var(--chip-bg); border:1px solid var(--line); font-family: var(--font-mono); font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color: var(--ember-bright); margin-bottom:22px; } .sp-hero__cat::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--fire-grad); } .sp-hero h1 { font-size: clamp(42px, 6vw, 82px); line-height:0.94; letter-spacing:-0.04em; font-weight:900; margin-bottom:22px; } .sp-hero__lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-mut); max-width: 52ch; line-height:1.6; margin-bottom:32px; } .sp-hero__cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; } .sp-hero__meta { display:flex; gap: clamp(20px,3vw,40px); margin-top:36px; flex-wrap:wrap; } .sp-hero__meta .m b { font-family: 'Archivo', var(--font-display), sans-serif !important; font-weight:900 !important; font-size: 30px !important; letter-spacing:-0.03em !important; color: var(--ink) !important; display:block; font-variant-numeric: tabular-nums; } .sp-hero__meta .m.is-hot b, .sp-hero__meta .m.is-hot b * { color: #ff4242 !important; } .sp-hero__meta .m.is-static b { font-size: clamp(32px, 3.5vw, 40px) !important; } .sp-hero__meta .m span { font-size: 12.5px !important; color: #6e6e6e !important; } /* ---------- Generic dashboard panel (hero visuals) ---------- */ .sp-board { position: relative; border-radius: var(--radius-lg); padding: 20px; background: linear-gradient(165deg, color-mix(in srgb, var(--panel-2) 90%, transparent), color-mix(in srgb, var(--panel) 82%, transparent)); backdrop-filter: blur(14px) saturate(1.2); border:1px solid var(--line-strong); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.05); overflow: hidden; } .sp-board::after { content:""; position:absolute; top:-30%; right:-15%; width:60%; height:70%; background: var(--card-glow); pointer-events:none; } .sp-board__bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; } .sp-board__title { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color: var(--ink-mut); } .sp-board__title svg { width:16px; height:16px; color: var(--ember-bright); } .sp-dots { display:flex; gap:5px; } .sp-dots i { width:9px; height:9px; border-radius:50%; background: var(--line-strong); } /* chart: bars */ .sp-chart { display:flex; align-items:flex-end; gap:5px; height:120px; padding:10px 0 0; } .sp-chart i { flex:1; border-radius:4px 4px 0 0; background: var(--fire-grad); opacity:0.92; box-shadow:0 0 16px -3px rgba(255,45,45,0.5); transform-origin:bottom; animation: spGrow 0.9s var(--ease) both; } @keyframes spGrow { from { transform: scaleY(0.04); } } .sp-chart i.mut { background: var(--track); box-shadow:none; } /* line chart (svg) */ .sp-line { width:100%; height:130px; display:block; } .sp-line path.area { fill: url(#spArea); } .sp-line path.stroke { fill:none; stroke:#FF3D2E; stroke-width:3; stroke-linecap:round; filter: drop-shadow(0 4px 10px rgba(255,45,45,0.5)); } /* metric tiles */ .sp-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; } .sp-tile { background: var(--bg-elev); border:1px solid var(--line); border-radius:12px; padding:13px; } .sp-tile b { font-family: 'Archivo', var(--font-display), sans-serif !important; font-weight:800; font-size:22px; letter-spacing:-0.02em; color: var(--ink); display:block; font-variant-numeric:tabular-nums; } .sp-tile b em { font-style:normal; color: var(--metric); font-size:12px; } .sp-tile span { font-size:11px; color: var(--ink-faint); display:block; margin-top:3px; } .sp-tile.hot b { color: #ff4242 !important; } /* keyword/rank rows */ .sp-rows { display:flex; flex-direction:column; gap:8px; margin-top:14px; } .sp-row { display:grid; grid-template-columns: 1fr auto auto; gap:12px; align-items:center; background: var(--bg-elev); border:1px solid var(--line); border-radius:10px; padding:11px 14px; } .sp-row__kw { font-size:13px; font-weight:600; color: var(--ink); } .sp-row__pos { font-family: var(--font-mono); font-size:12px; color: var(--ink-mut); } .sp-row__delta { font-size:12px; font-weight:700; color:#38C172; display:flex; align-items:center; gap:4px; } .sp-row__delta svg { width:12px; height:12px; } /* floating callout */ .sp-float { position:absolute; right:-12px; bottom:30px; z-index:3; background: var(--bg-elev); border:1px solid var(--line-strong); border-radius:14px; padding:13px 16px; box-shadow: var(--shadow); display:flex; gap:11px; align-items:center; animation: floaty 5s ease-in-out infinite; backdrop-filter: blur(10px); } .sp-float b { font-family: 'Archivo', var(--font-display), sans-serif !important; font-weight:900 !important; font-size:22px !important; color:#38C172 !important; letter-spacing:-0.02em; } .sp-float span { font-size:11.5px; color: var(--ink-mut); display:block; max-width:130px; } /* ---------- Section heading helper ---------- */ .sp-head { max-width: 720px; } .sp-head--center { margin-inline:auto; text-align:center; } .sp-head .eyebrow { margin-bottom: 20px; } .sp-head .lead { margin-top: 20px; } /* ---------- Deliverables grid ---------- */ .sp-deliver { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px; } .sp-deliver__card { padding:28px; border-radius: var(--radius); background: var(--panel); border:1px solid var(--line); transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s; } .sp-deliver__card:hover { transform: translateY(-4px); border-color: var(--ember); box-shadow: var(--shadow-card); } .sp-deliver__ic { width:50px; height:50px; border-radius:13px; background: var(--chip-bg); border:1px solid var(--line); display:grid; place-items:center; color: var(--ember-bright); margin-bottom:18px; } .sp-deliver__ic svg { width:24px; height:24px; } .sp-deliver__card h3 { font-size:20px; margin-bottom:9px; letter-spacing:-0.02em; } .sp-deliver__card p { font-size:14.5px; color: var(--ink-mut); line-height:1.55; } /* ---------- Feature split (alternating) ---------- */ .sp-split { display:grid; grid-template-columns:1fr 1fr; gap: clamp(32px,5vw,72px); align-items:center; } .sp-split + .sp-split { margin-top: clamp(48px,7vh,96px); } .sp-split--rev .sp-split__visual { order:-1; } .sp-split h3 { font-size: clamp(24px,3vw,38px); letter-spacing:-0.03em; margin-bottom:16px; line-height:1.04; } .sp-split p { font-size:16px; color: var(--ink-mut); line-height:1.62; margin-bottom:18px; max-width:48ch; } .sp-split__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; } .sp-split__list li { display:grid; grid-template-columns:auto 1fr; gap:12px; font-size:15px; color: var(--ink); } .sp-split__list svg { width:20px; height:20px; color: var(--ember-bright); margin-top:1px; } /* ---------- Process timeline (vertical) ---------- */ .sp-timeline { position:relative; margin-top:52px; display:flex; flex-direction:column; gap:0; } .sp-step { display:grid; grid-template-columns:auto 1fr; gap:26px; padding-bottom:34px; position:relative; } .sp-step:last-child { padding-bottom:0; } .sp-step__rail { display:flex; flex-direction:column; align-items:center; } .sp-step__num { width:52px; height:52px; border-radius:14px; flex:none; display:grid; place-items:center; font-family: var(--font-display); font-weight:800; font-size:19px; color:#fff; background: var(--fire-grad); box-shadow:0 8px 22px -8px rgba(255,45,45,0.6); } .sp-step__line { width:2px; flex:1; background: linear-gradient(var(--line-strong), transparent); margin-top:8px; } .sp-step:last-child .sp-step__line { display:none; } .sp-step__body { padding-top:4px; } .sp-step__body h3 { font-size:21px; letter-spacing:-0.02em; margin-bottom:7px; } .sp-step__body p { font-size:15px; color: var(--ink-mut); line-height:1.58; max-width:56ch; } .sp-step__tag { display:inline-block; margin-top:11px; font-family: var(--font-mono); font-size:11px; letter-spacing:0.08em; color: var(--ink-faint); } /* ---------- Proof block ---------- */ .sp-proof { border-radius: var(--radius-lg); border:1px solid var(--line-strong); overflow:hidden; background: linear-gradient(155deg, var(--panel-2), var(--panel)); position:relative; } .sp-proof::before { content:""; position:absolute; inset:0; background: var(--card-glow); } .sp-proof__grid { position:relative; display:grid; grid-template-columns:1fr 1fr; gap: clamp(28px,4vw,56px); align-items:center; padding: clamp(34px,5vw,60px); } .sp-proof__big { font-family: 'Archivo', var(--font-display), sans-serif !important; font-weight:900; font-size: clamp(54px,8vw,104px); line-height:0.9; letter-spacing:-0.05em; color: #ff4242 !important; font-variant-numeric:tabular-nums; } .sp-proof__cap { font-size:16px; color: var(--ink); margin-top:8px; } .sp-proof__list { list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:10px; } .sp-proof__list li { display:grid; grid-template-columns:auto 1fr; gap:10px; font-size:14px; color: var(--ink-mut); } .sp-proof__list li::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--ember); margin-top:7px; } /* ---------- Engagement tiers ---------- */ .sp-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px; } .sp-tier { padding:30px; border-radius: var(--radius); background: var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; transition: transform 0.35s var(--ease), border-color 0.35s; } .sp-tier:hover { transform: translateY(-4px); border-color: var(--line-strong); } .sp-tier--feat { border-color: var(--ember); background: linear-gradient(165deg, var(--panel-2), var(--panel)); position:relative; } .sp-tier--feat::after { content: var(--feat-badge, "Most chosen"); position:absolute; top:18px; right:18px; font-family: var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#fff; background: var(--fire-grad); padding:4px 9px; border-radius:100px; } .sp-tier__name { font-family: var(--font-display); font-weight:800; font-size:20px; letter-spacing:-0.02em; } .sp-tier__for { font-size:13px; color: var(--ink-faint); margin-top:4px; margin-bottom:18px; } .sp-tier__line { height:1px; background: var(--line); margin:6px 0 16px; } .sp-tier ul { list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:10px; } .sp-tier li { display:grid; grid-template-columns:auto 1fr; gap:10px; font-size:14px; color: var(--ink-mut); } .sp-tier li svg { width:17px; height:17px; color: var(--ember-bright); margin-top:1px; } .sp-tier .btn { margin-top:auto; justify-content:center; } /* ---------- Use-case / who it's for ---------- */ .sp-uses { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:48px; } .sp-use { display:grid; grid-template-columns:auto 1fr; gap:16px; padding:22px 24px; border-radius: var(--radius); background: var(--panel); border:1px solid var(--line); align-items:start; } .sp-use__ic { width:42px; height:42px; border-radius:11px; background: var(--chip-bg); border:1px solid var(--line); display:grid; place-items:center; color: var(--ember-bright); flex:none; } .sp-use__ic svg { width:20px; height:20px; } .sp-use h4 { font-size:16px; letter-spacing:-0.01em; margin-bottom:5px; } .sp-use p { font-size:13.5px; color: var(--ink-mut); line-height:1.5; } /* ---------- Related services ---------- */ .sp-related { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:46px; } .sp-rel { display:flex; flex-direction:column; gap:8px; padding:24px; border-radius: var(--radius); background: var(--panel); border:1px solid var(--line); transition: transform 0.3s var(--ease), border-color 0.3s; position:relative; } .sp-rel:hover { transform: translateY(-3px); border-color: var(--ember); } .sp-rel:hover .sp-rel__arr { background: var(--fire-grad); color:#fff; transform: rotate(-45deg); } .sp-rel__arr { position:absolute; top:22px; right:22px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; color: var(--ink-mut); transition: all 0.3s var(--ease); } .sp-rel__arr svg { width:15px; height:15px; } .sp-rel h4 { font-size:18px; letter-spacing:-0.02em; padding-right:40px; } .sp-rel p { font-size:13.5px; color: var(--ink-mut); line-height:1.5; } /* ---------- Cities list ---------- */ .reg-cities { display: flex; flex-wrap: wrap; gap: 10px; font-weight: 500; font-size: 15px; color: var(--ink); } .reg-cities span { display: inline-block; padding: 6px 14px; border-radius: 100px; border: 1px solid var(--line-strong); background: var(--bg-elev); } /* ---------- Responsive ---------- */ @media (max-width: 1000px) { .sp-hero__grid, .sp-split, .sp-proof__grid { grid-template-columns:1fr; } .sp-split--rev .sp-split__visual { order:0; } .sp-deliver, .sp-tiers, .sp-related { grid-template-columns:repeat(2,1fr); } } @media (max-width: 640px) { .sp-hero { padding-top:116px; } .sp-deliver, .sp-tiers, .sp-related, .sp-uses, .sp-tiles { grid-template-columns:1fr; } .sp-hero__cta { flex-direction:column; } .sp-hero__cta .btn { width:100%; justify-content:center; } .sp-step { gap:16px; } } /* ---------- LIGHT THEME OVERRIDES FOR CONTRAST & VISIBILITY ---------- */ html[data-theme="light"] body .elementor-widget-container .hero__tag, html[data-theme="light"] .firestoak-module .hero__tag, [data-theme="light"] .hero__tag { color: var(--ink-mut) !important; background: var(--chip-bg) !important; border-color: var(--line) !important; } html[data-theme="light"] body .elementor-widget-container .hero__tag b, html[data-theme="light"] .firestoak-module .hero__tag b, [data-theme="light"] .hero__tag b { color: var(--ink) !important; } html[data-theme="light"] body .elementor-widget-container .logos__label, html[data-theme="light"] .firestoak-module .logos__label, [data-theme="light"] .logos__label { color: var(--ink) !important; font-weight: 400 !important; } html[data-theme="light"] body .elementor-widget-container .logo-item, html[data-theme="light"] .firestoak-module .logo-item, [data-theme="light"] .logo-item { color: var(--ink-mut) !important; } html[data-theme="light"] body .elementor-widget-container .logo-item:hover, html[data-theme="light"] .firestoak-module .logo-item:hover, [data-theme="light"] .logo-item:hover { color: var(--ink) !important; } html[data-theme="light"] body .elementor-widget-container .logo-tile, html[data-theme="light"] .firestoak-module .logo-tile, [data-theme="light"] .logo-tile { background: #FFFFFF !important; border-color: var(--line) !important; } html[data-theme="light"] body .elementor-widget-container .cmp__row--head > div, html[data-theme="light"] .firestoak-module .cmp__row--head > div, [data-theme="light"] .cmp__row--head > div { color: var(--ink-faint) !important; } html[data-theme="light"] body .elementor-widget-container .cmp__cap, html[data-theme="light"] .firestoak-module .cmp__cap, [data-theme="light"] .cmp__cap { color: var(--ink) !important; } html[data-theme="light"] body .elementor-widget-container .cmp__them, html[data-theme="light"] .firestoak-module .cmp__them, [data-theme="light"] .cmp__them { color: var(--ink-faint) !important; } html[data-theme="light"] body .elementor-widget-container .cmp__us, html[data-theme="light"] .firestoak-module .cmp__us, [data-theme="light"] .cmp__us { color: var(--ink) !important; } html[data-theme="light"] body .elementor-widget-container .cmp__us span, html[data-theme="light"] .firestoak-module .cmp__us span, [data-theme="light"] .cmp__us span { color: var(--ink) !important; } html[data-theme="light"] body .elementor-widget-container .cmp__brand, html[data-theme="light"] .firestoak-module .cmp__brand, [data-theme="light"] .cmp__brand { color: var(--ember-bright) !important; } html[data-theme="light"] body .elementor-widget-container .proc-step__tag, html[data-theme="light"] .firestoak-module .proc-step__tag, [data-theme="light"] .proc-step__tag { color: var(--ink-faint) !important; } html[data-theme="light"] body .elementor-widget-container .work__tag, html[data-theme="light"] .firestoak-module .work__tag, [data-theme="light"] .work__tag { color: var(--ink-faint) !important; } html[data-theme="light"] body .elementor-widget-container .chip, html[data-theme="light"] .firestoak-module .chip, [data-theme="light"] .chip { color: var(--ink-mut) !important; background: var(--chip-bg) !important; border-color: var(--line) !important; } html[data-theme="light"] body .elementor-widget-container .ex-badge, html[data-theme="light"] .firestoak-module .ex-badge, [data-theme="light"] .ex-badge { color: var(--ink-faint) !important; } html[data-theme="light"] body .elementor-widget-container .hero__trust .t b, html[data-theme="light"] .firestoak-module .hero__trust .t b, [data-theme="light"] .hero__trust .t b { color: var(--ink) !important; } html[data-theme="light"] body .elementor-widget-container .hero__trust .t span, html[data-theme="light"] .firestoak-module .hero__trust .t span, [data-theme="light"] .hero__trust .t span { color: var(--ink) !important; font-weight: 400 !important; } html[data-theme="light"] body .elementor-widget-container .footer__brand p, html[data-theme="light"] .firestoak-module .footer__brand p, [data-theme="light"] .footer__brand p { color: var(--ink-mut) !important; } html[data-theme="light"] body .elementor-widget-container .footer h5, html[data-theme="light"] .firestoak-module .footer h5, [data-theme="light"] .footer h5 { color: var(--ink-faint) !important; } html[data-theme="light"] body .elementor-widget-container .footer ul a, html[data-theme="light"] .firestoak-module .footer ul a, [data-theme="light"] .footer ul a { color: var(--ink-mut) !important; } html[data-theme="light"] body .elementor-widget-container .footer ul a:hover, html[data-theme="light"] .firestoak-module .footer ul a:hover, [data-theme="light"] .footer ul a:hover { color: var(--ember-bright) !important; } html[data-theme="light"] body .elementor-widget-container .footer__bottom p, html[data-theme="light"] .firestoak-module .footer__bottom p, [data-theme="light"] .footer__bottom p { color: var(--ink-faint) !important; } /* ---------- LIGHT THEME CONTRAST & VISIBILITY FOR NEW COMPONENTS ---------- */ html[data-theme="light"] body .elementor-widget-container .eyebrow, html[data-theme="light"] .firestoak-module .eyebrow, [data-theme="light"] .eyebrow { color: var(--ember-bright) !important; } html[data-theme="light"] body .elementor-widget-container .eyebrow::before, html[data-theme="light"] .firestoak-module .eyebrow::before, [data-theme="light"] .eyebrow::before { background: var(--ember) !important; } html[data-theme="light"] body .elementor-widget-container .sp-crumb, html[data-theme="light"] .firestoak-module .sp-crumb, [data-theme="light"] .sp-crumb { color: var(--ink-faint) !important; } html[data-theme="light"] body .elementor-widget-container .sp-crumb a, html[data-theme="light"] .firestoak-module .sp-crumb a, [data-theme="light"] .sp-crumb a { color: var(--ink-mut) !important; } html[data-theme="light"] body .elementor-widget-container .sp-crumb a:hover, html[data-theme="light"] .firestoak-module .sp-crumb a:hover, [data-theme="light"] .sp-crumb a:hover { color: var(--ember-bright) !important; } html[data-theme="light"] body .elementor-widget-container .sp-crumb .cur, html[data-theme="light"] .firestoak-module .sp-crumb .cur, [data-theme="light"] .sp-crumb .cur { color: var(--ink) !important; } html[data-theme="light"] body .elementor-widget-container .sp-hero__meta .m.is-hot b, html[data-theme="light"] body .elementor-widget-container .sp-hero__meta .m.is-hot b *, html[data-theme="light"] .firestoak-module .sp-hero__meta .m.is-hot b, html[data-theme="light"] .firestoak-module .sp-hero__meta .m.is-hot b *, [data-theme="light"] .sp-hero__meta .m.is-hot b, [data-theme="light"] .sp-hero__meta .m.is-hot b * { color: #ff4242 !important; } /* ---------- LIGHT THEME OVERRIDES FOR NAVIGATION HEADER ---------- */ html[data-theme="light"] body .elementor-widget-container .brand, html[data-theme="light"] .firestoak-module .brand, [data-theme="light"] .brand { color: var(--ink) !important; } html[data-theme="light"] body .elementor-widget-container .nav__links a, html[data-theme="light"] .firestoak-module .nav__links a, [data-theme="light"] .nav__links a { color: var(--ink-mut) !important; } html[data-theme="light"] body .elementor-widget-container .nav__links a:hover, html[data-theme="light"] .firestoak-module .nav__links a:hover, [data-theme="light"] .nav__links a:hover { color: var(--ink) !important; background: var(--chip-bg) !important; } html[data-theme="light"] body .elementor-widget-container .nav__burger span, html[data-theme="light"] .firestoak-module .nav__burger span, [data-theme="light"] .nav__burger span { background: var(--ink) !important; } /* ---------- LIGHT THEME OVERRIDES FOR FAQ SECTION ---------- */ html[data-theme="light"] body .elementor-widget-container .kicker, html[data-theme="light"] .firestoak-module .kicker, [data-theme="light"] .kicker { color: var(--ink-faint) !important; } html[data-theme="light"] body .elementor-widget-container .faq-item__a, html[data-theme="light"] body .elementor-widget-container .faq-item__a p, html[data-theme="light"] body .elementor-widget-container .faq-item__a span, html[data-theme="light"] body .elementor-widget-container .faq-item__a div, html[data-theme="light"] .firestoak-module .faq-item__a, html[data-theme="light"] .firestoak-module .faq-item__a p, html[data-theme="light"] .firestoak-module .faq-item__a span, html[data-theme="light"] .firestoak-module .faq-item__a div, [data-theme="light"] .faq-item__a, [data-theme="light"] .faq-item__a p, [data-theme="light"] .faq-item__a span, [data-theme="light"] .faq-item__a div { color: var(--ink-mut) !important; } html[data-theme="light"] body .elementor-widget-container .faq-item__a strong, html[data-theme="light"] body .elementor-widget-container .faq-item__a b, html[data-theme="light"] .firestoak-module .faq-item__a strong, html[data-theme="light"] .firestoak-module .faq-item__a b, [data-theme="light"] .faq-item__a strong, [data-theme="light"] .faq-item__a b { color: var(--ink) !important; } /* ---------- ACCENT GLOW & GRAIN NOISE BACKGROUND RESTORATION OVERRIDES ---------- */ /* Ensures the brand signature grain and fixed page-wide glows remain visible as overlays even when custom background colors are applied via Elementor custom widget controls. */ html body [class*="elementor-widget-firestoak_"] .firestoak-module, html body .firestoak-module, html body [class*="elementor-widget-firestoak_"] section, html body section.firestoak-module { background-image: var(--grain), var(--page-glow) !important; background-repeat: repeat, no-repeat !important; background-attachment: scroll, fixed !important; background-blend-mode: var(--grain-blend, normal) !important; } /* ---------- UNDER CONSTRUCTION WIDGET STYLE STACK ---------- */ .uc { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; background: #000 url("../images/uc-bg.jpg") center / cover no-repeat !important; } .uc::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("../images/uc-glow.jpg") !important; background-position: right -10% top -14%; background-size: 58% auto; background-repeat: no-repeat; mix-blend-mode: screen; opacity: 0.5; -webkit-mask: linear-gradient(to left, #000 20%, transparent 70%); mask: linear-gradient(to left, #000 20%, transparent 70%); } .uc::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 10% 100%, rgba(0,0,0,0.55), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.75) 70%, #000 100%) !important; } .uc__top { position: relative; z-index: 2; padding: 32px var(--gutter) 0; } .uc__brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; color: #fff !important; } .uc__brand img { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 6px 18px -8px rgba(0,0,0,0.8); } .uc__body { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; } .uc__grid { width: 100%; max-width: 1180px; margin-inline: auto; padding: clamp(48px, 8vh, 96px) var(--gutter); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 5vw, 76px); align-items: center; } .uc__tag { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 11px; border-radius: 100px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.82); margin-bottom: 26px; } .uc__tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--fire-grad); box-shadow: 0 0 0 4px rgba(255,45,45,0.18); flex: none; } .uc h1 { font-family: var(--font-display); font-weight: 900; color: #fff !important; font-size: clamp(40px, 6vw, 76px); line-height: 0.98; letter-spacing: -0.04em; margin-bottom: 22px; } .uc p.lead { color: rgba(255,255,255,0.74); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; max-width: 52ch; margin-bottom: 34px; } .uc__contact { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; } .uc__contact a { display: inline-flex; align-items: center; gap: 12px; color: #fff !important; font-size: 15px; font-weight: 500; width: fit-content; transition: color 0.2s; } .uc__contact a:hover { color: var(--ember-bright) !important; } .uc__contact .ic { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.14) !important; display: grid !important; place-items: center !important; flex: none !important; color: var(--ember-bright) !important; } .uc__contact .ic svg { width: 17px !important; height: 17px !important; stroke: var(--ember-bright) !important; fill: none !important; } /* form card */ .uc__form { background: rgba(10,10,10,0.55); backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(255,255,255,0.14); border-radius: 22px; padding: clamp(26px, 3vw, 34px); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.85); } .uc__form h2 { font-family: var(--font-display); font-weight: 800; color: #fff !important; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 8px; } .uc__form p { color: rgba(255,255,255,0.62); font-size: 14px; margin-bottom: 22px; } .uc-field { margin-bottom: 14px; } .uc-field label { display: block; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.7); margin-bottom: 7px; text-align: left; } .uc-field input, .uc-field textarea { width: 100%; padding: 13px 15px; border-radius: 11px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); color: #fff; font-family: var(--font-body); font-size: 14.5px; transition: border-color 0.2s, box-shadow 0.2s; } .uc-field input::placeholder, .uc-field textarea::placeholder { color: rgba(255,255,255,0.35); } .uc-field input:focus, .uc-field textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 4px rgba(255,45,45,0.16); } .uc-field textarea { resize: vertical; min-height: 84px; } .uc-btn { width: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 15px 26px !important; border-radius: 100px !important; font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 15px !important; color: #fff !important; background: var(--fire-grad) !important; border: none !important; box-shadow: 0 10px 30px -8px rgba(255,45,45,0.55), inset 0 1px 0 rgba(255,255,255,0.25) !important; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease) !important; margin-top: 6px !important; } .uc-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 16px 40px -8px rgba(255,45,45,0.7), inset 0 1px 0 rgba(255,255,255,0.3) !important; } .uc-btn svg { width: 17px !important; height: 17px !important; stroke: #fff !important; fill: none !important; } .uc-assure { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 14px; justify-content: center; } .uc__foot { position: relative; z-index: 2; padding: 22px var(--gutter) 30px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.08); } .uc__foot p { font-size: 12.5px; color: rgba(255,255,255,0.42); } .uc__social { display: flex; gap: 10px; } .uc__social a { width: 34px !important; height: 34px !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,0.16) !important; display: grid !important; place-items: center !important; color: rgba(255,255,255,0.7) !important; background: transparent !important; transition: border-color 0.2s, color 0.2s !important; } .uc__social a:hover { border-color: var(--ember) !important; color: var(--ember-bright) !important; } .uc__social svg { width: 16px !important; height: 16px !important; stroke: currentColor !important; fill: none !important; } @media (max-width: 900px) { .uc__grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .uc__foot { flex-direction: column; align-items: flex-start; } }