/**
 * Framex layout for HT Window — custom styles.
 *
 * Everything Flatsome can already do is configured in Customizer / UX Builder.
 * This file only carries what no Flatsome option covers.
 *
 * Tokens below are read off the reference demo (demo.awaikenthemes.com/framex).
 */

:root {
	--framex-accent: #edc701;
	--framex-dark: #181818;
	--framex-cream: #f6f5ed;
	--framex-text: #83827f;
	--framex-white: #fff;
	--framex-divider: rgba(24, 24, 24, 0.1);
	/* Blockquote mark, inlined so the stylesheet needs no companion asset. */
	--framex-quote: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2237%22%20height=%2230%22%20viewBox=%220%200%2037%2030%22%20fill=%22none%22%3E%3Cpath%20d=%22M3.32584%2027.5735C1.24719%2025.1471%200%2022.5%200%2018.0882C0%2010.3676%205.19663%203.52941%2012.4719%200L14.3427%202.86765C7.48315%206.83824%206.02809%2011.9118%205.61236%2015.2206C6.65169%2014.5588%208.10674%2014.3382%209.5618%2014.5588C13.3034%2015%2016.2135%2018.0882%2016.2135%2022.2794C16.2135%2024.2647%2015.382%2026.25%2014.1348%2027.7941C12.6798%2029.3382%2011.0169%2030%208.9382%2030C6.65169%2030%204.57303%2028.8971%203.32584%2027.5735ZM24.1124%2027.5735C22.0337%2025.1471%2020.7865%2022.5%2020.7865%2018.0882C20.7865%2010.3676%2025.9831%203.52941%2033.2584%200L35.1292%202.86765C28.2697%206.83824%2026.8146%2011.9118%2026.3989%2015.2206C27.4382%2014.5588%2028.8933%2014.3382%2030.3483%2014.5588C34.0899%2015%2037%2018.0882%2037%2022.2794C37%2024.2647%2036.1685%2026.25%2034.9213%2027.7941C33.6742%2029.3382%2031.8034%2030%2029.7247%2030C27.4382%2030%2025.3596%2028.8971%2024.1124%2027.5735Z%22%20fill=%22%23181818%22%3E%3C/path%3E%3C/svg%3E");
	--framex-divider-dark: rgba(255, 255, 255, 0.1);
	--framex-radius-pill: 100px;
	--framex-radius-card: 20px;
	--framex-container: 1300px;

	/* Filled check circle for tick lists (mask -> tinted by background-color). */
	--framex-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.6-4.2-4.2 1.6-1.6 2.6 2.6 5.4-5.4 1.6 1.6-7 7z'/%3E%3C/svg%3E");

	/* Play triangle for the hero video button (background-image, dark on yellow). */
	--framex-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' fill='%23181818'%3E%3Cpath d='M0 0v14l12-7z'/%3E%3C/svg%3E");

	/* Category icons, generated from inc/framex-icons.php. */
	--framex-ico-window-awning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M37.8223 11.4287C37.8223 10.2651 36.8794 9.32152 35.7158 9.32129H4.28711C3.12337 9.32129 2.17969 10.265 2.17969 11.4287V35.7139C2.17969 36.8777 3.12339 37.8213 4.28711 37.8213H35.7158C36.8794 37.8211 37.8223 36.8775 37.8223 35.7139V11.4287ZM39.3223 35.7139C39.3223 37.7059 37.7079 39.3211 35.7158 39.3213H4.28711C2.29493 39.3213 0.679688 37.7061 0.679688 35.7139V11.4287C0.679688 9.43654 2.29495 7.82129 4.28711 7.82129H35.7158C37.7079 7.82152 39.3223 9.43671 39.3223 11.4287V35.7139Z'%3E%3C/path%3E%3Cpath d='M30.6816 18.5723C30.6816 17.4085 29.7379 16.4648 28.5742 16.4648H11.4316C10.2679 16.4648 9.32422 17.4085 9.32422 18.5723V28.5723C9.32434 29.7358 10.268 30.6787 11.4316 30.6787H28.5742C29.7378 30.6787 30.6815 29.7359 30.6816 28.5723V18.5723ZM32.1816 28.5723C32.1815 30.5643 30.5663 32.1787 28.5742 32.1787H11.4316C9.43955 32.1787 7.82434 30.5643 7.82422 28.5723V18.5723C7.82422 16.5801 9.43946 14.9648 11.4316 14.9648H28.5742C30.5663 14.9648 32.1816 16.5801 32.1816 18.5723V28.5723Z'%3E%3C/path%3E%3Cpath d='M25.1282 0.960252C25.387 0.636899 25.8595 0.584338 26.1829 0.843064C26.5062 1.10184 26.5578 1.57435 26.2991 1.89775L20.5853 9.04033C20.4429 9.21822 20.2271 9.32158 19.9993 9.32158C19.7717 9.32145 19.5566 9.21807 19.4144 9.04033L13.6995 1.89775C13.4408 1.57431 13.4933 1.10182 13.8167 0.843064C14.1401 0.584307 14.6126 0.636806 14.8714 0.960252L19.9993 7.37138L25.1282 0.960252Z'%3E%3C/path%3E%3C/svg%3E");
	--framex-ico-window-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M37.8223 4.28613C37.8223 3.12252 36.8794 2.17894 35.7158 2.17871H4.28711C3.12337 2.17871 2.17969 3.1224 2.17969 4.28613V35.7148C2.17992 36.8784 3.12349 37.8213 4.28711 37.8213H35.7158C36.8793 37.8211 37.822 36.8783 37.8223 35.7148V4.28613ZM39.3223 35.7148C39.322 37.7067 37.7077 39.3211 35.7158 39.3213H4.28711C2.29511 39.3213 0.679916 37.7069 0.679688 35.7148V4.28613C0.679688 2.29397 2.29495 0.678711 4.28711 0.678711H35.7158C37.7079 0.67894 39.3223 2.29413 39.3223 4.28613V35.7148'%3E%3C/path%3E%3Cpath d='M13.5352 38.5713V1.42871C13.5352 1.0145 13.8709 0.678711 14.2852 0.678711C14.6994 0.678711 15.0352 1.0145 15.0352 1.42871V38.5713C15.0352 38.9855 14.6994 39.3213 14.2852 39.3213C13.8709 39.3213 13.5352 38.9855 13.5352 38.5713Z'%3E%3C/path%3E%3Cpath d='M24.9648 38.5713V1.42871C24.9648 1.0145 25.3006 0.678711 25.7148 0.678711C26.1291 0.678711 26.4648 1.0145 26.4648 1.42871V38.5713C26.4648 38.9855 26.1291 39.3213 25.7148 39.3213C25.3006 39.3213 24.9648 38.9855 24.9648 38.5713Z'%3E%3C/path%3E%3Cpath d='M38.5723 13.5361C38.9865 13.5361 39.3223 13.8719 39.3223 14.2861C39.3223 14.7003 38.9865 15.0361 38.5723 15.0361H1.42969C1.01547 15.0361 0.679688 14.7003 0.679688 14.2861C0.679688 13.8719 1.01547 13.5361 1.42969 13.5361H38.5723Z'%3E%3C/path%3E%3Cpath d='M38.5723 24.9648C38.9865 24.9648 39.3223 25.3006 39.3223 25.7148C39.3223 26.1291 38.9865 26.4648 38.5723 26.4648H1.42969C1.01547 26.4648 0.679688 26.1291 0.679688 25.7148C0.679688 25.3006 1.01547 24.9648 1.42969 24.9648H38.5723Z'%3E%3C/path%3E%3C/svg%3E");
	--framex-ico-window-sliding: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M37.8223 4.28711C37.8223 3.12354 36.8794 2.17993 35.7158 2.17969H4.28711C3.12337 2.17969 2.17969 3.12337 2.17969 4.28711V35.7158C2.17993 36.8794 3.12353 37.8223 4.28711 37.8223H35.7158C36.8793 37.822 37.822 36.8793 37.8223 35.7158V4.28711ZM39.3223 35.7158C39.322 37.7077 37.7077 39.322 35.7158 39.3223H4.28711C2.29508 39.3223 0.679927 37.7078 0.679688 35.7158V4.28711C0.679688 2.29495 2.29495 0.679688 4.28711 0.679688H35.7158C37.7078 0.679933 39.3223 2.29508 39.3223 4.28711V35.7158Z'%3E%3C/path%3E%3Cpath d='M14.9648 38.5713V1.42871C14.9648 1.0145 15.3006 0.678711 15.7148 0.678711C16.1291 0.678711 16.4648 1.0145 16.4648 1.42871V38.5713C16.4648 38.9855 16.1291 39.3213 15.7148 39.3213C15.3006 39.3213 14.9648 38.9855 14.9648 38.5713Z'%3E%3C/path%3E%3Cpath d='M38.5723 19.25C38.9863 19.2502 39.3223 19.5859 39.3223 20C39.3223 20.4141 38.9863 20.7498 38.5723 20.75H15.7148C15.3006 20.75 14.9648 20.4142 14.9648 20C14.9648 19.5858 15.3006 19.25 15.7148 19.25H38.5723Z'%3E%3C/path%3E%3C/svg%3E");
	--framex-ico-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.7053 0.107422L12.8909 0.115234C13.3218 0.149012 13.7371 0.295769 14.095 0.541992C14.5037 0.823248 14.8186 1.22084 14.9973 1.68359L15.638 3.33887L17.6829 4.51562L19.4475 4.24707L19.4592 4.24512C19.9434 4.1794 20.4365 4.25969 20.8753 4.47461C21.2592 4.66276 21.5866 4.94733 21.8264 5.29883L21.9241 5.45312L21.926 5.45703L22.6067 6.64844C22.8592 7.0779 22.9758 7.57419 22.9407 8.07129C22.9056 8.56645 22.7207 9.03886 22.4124 9.42773L22.4133 9.42871L21.3215 10.8203V13.1748L22.4417 14.5635L22.4446 14.5674C22.7551 14.957 22.9396 15.4318 22.9749 15.9287C23.0099 16.4256 22.8943 16.9219 22.6419 17.3516L22.6409 17.3506L21.9602 18.5439L21.9583 18.5479C21.7135 18.9706 21.348 19.3104 20.9094 19.5254C20.4708 19.7402 19.9782 19.8205 19.4944 19.7549L17.718 19.4834L15.6731 20.6602L15.0315 22.3174C14.8751 22.722 14.6147 23.0768 14.2786 23.3477L14.1292 23.459C13.7203 23.7401 13.236 23.8921 12.7395 23.8936H11.2952C10.7989 23.8921 10.3143 23.7403 9.90553 23.459C9.49708 23.1778 9.18296 22.7799 9.00416 22.3174L8.36159 20.6602L6.31569 19.4834L4.54127 19.7549C4.05721 19.8205 3.56411 19.7405 3.12526 19.5254C2.68691 19.3104 2.3221 18.9704 2.07741 18.5479L2.07545 18.5439L1.38893 17.3438L1.38991 17.3428C1.14077 16.9151 1.02487 16.4226 1.05983 15.9287C1.09503 15.4317 1.28056 14.9571 1.59108 14.5674L2.67897 13.1807V10.8252L1.55983 9.43652L1.5569 9.43359C1.24629 9.04381 1.06085 8.56843 1.02565 8.07129C0.990548 7.57428 1.10712 7.07796 1.35963 6.64844L2.04127 5.45703L2.04323 5.45312C2.28796 5.03036 2.65247 4.68958 3.09108 4.47461C3.47506 4.28645 3.9007 4.20168 4.32545 4.22754L4.50709 4.24609L4.51979 4.24707L6.28541 4.51562L8.36354 3.33691L9.00416 1.68359C9.18289 1.22102 9.49703 0.823192 9.90553 0.541992C10.3144 0.260556 10.7989 0.108939 11.2952 0.107422H12.7053ZM11.1555 1.61914C11.0604 1.63385 10.9677 1.66202 10.8811 1.7041L10.7561 1.77734C10.5961 1.88744 10.4735 2.04345 10.4036 2.22461L10.4026 2.22559L9.6653 4.12793C9.60283 4.28919 9.4866 4.4244 9.33619 4.50977L6.79909 5.94922C6.65257 6.03238 6.48223 6.06447 6.31569 6.03906L4.30494 5.73145C4.11565 5.70585 3.92277 5.73724 3.75123 5.82129C3.57963 5.90537 3.43685 6.03877 3.34108 6.2041L2.65748 7.40137L2.6526 7.40918C2.55387 7.57724 2.50798 7.77138 2.52174 7.96582C2.53542 8.15881 2.60704 8.34332 2.72682 8.49512L4.01295 10.0898C4.12037 10.2232 4.17897 10.3893 4.17897 10.5605V13.4404C4.17894 13.6083 4.12247 13.7713 4.01881 13.9033L2.76784 15.498L2.76393 15.502C2.64246 15.6544 2.57066 15.8407 2.5569 16.0352C2.54664 16.181 2.56949 16.3264 2.6233 16.4609L2.68678 16.5918L2.69166 16.5996L3.37526 17.7959C3.47095 17.9612 3.61378 18.0945 3.78541 18.1787C3.95701 18.2628 4.15054 18.2943 4.3401 18.2686L6.34987 17.9619L6.47682 17.9531C6.60272 17.9554 6.72682 17.9893 6.83717 18.0527L9.3401 19.4932L9.44557 19.5654C9.54336 19.6466 9.61886 19.7523 9.6653 19.8721L10.4026 21.7754L10.4036 21.7764C10.4735 21.9574 10.5962 22.1136 10.7561 22.2236L10.8811 22.2959C11.0111 22.3591 11.1543 22.3931 11.3001 22.3936H12.7356C12.9298 22.393 13.1195 22.3337 13.2796 22.2236C13.4395 22.1135 13.5622 21.9574 13.6321 21.7764L13.6331 21.7754L14.3694 19.8721C14.4313 19.7122 14.547 19.5787 14.6956 19.4932L17.1975 18.0527C17.3448 17.968 17.5169 17.9363 17.6848 17.9619L19.6956 18.2686L19.8381 18.2773C19.9802 18.2755 20.1206 18.2417 20.2493 18.1787C20.4197 18.0952 20.5617 17.9634 20.6575 17.7998L21.344 16.5996L21.3479 16.5918C21.4466 16.4239 21.4924 16.2298 21.4788 16.0352L21.4573 15.8906C21.4257 15.7508 21.3632 15.6193 21.2737 15.5059L19.9885 13.9111C19.881 13.7778 19.8216 13.6117 19.8215 13.4404V10.5605C19.8215 10.3928 19.8782 10.2297 19.9817 10.0977L21.2337 8.50293L21.2366 8.49805C21.358 8.34559 21.4308 8.16024 21.4446 7.96582C21.4584 7.7714 21.4126 7.57734 21.3137 7.40918L21.3089 7.40137L20.6233 6.20117C20.5275 6.03766 20.3853 5.90469 20.2151 5.82129C20.0434 5.73729 19.8506 5.70673 19.6614 5.73242L17.6506 6.03906C17.4827 6.06466 17.3106 6.03201 17.1633 5.94727L14.6604 4.50781C14.5119 4.42232 14.3971 4.28771 14.3352 4.12793L13.5979 2.22559C13.528 2.04447 13.4053 1.88744 13.2454 1.77734C13.1254 1.69482 12.9886 1.64124 12.846 1.61914L12.7014 1.60742H11.3001L11.1555 1.61914ZM12.0003 7.82129C12.8267 7.82129 13.6354 8.0672 14.3225 8.52637C15.0094 8.98546 15.5444 9.63798 15.8606 10.4014C16.1769 11.1649 16.2601 12.0049 16.0989 12.8154C15.9377 13.6258 15.5398 14.3707 14.9553 14.9551C14.371 15.5394 13.6263 15.9374 12.8157 16.0986C12.0051 16.2598 11.1651 16.1766 10.4016 15.8604C9.63822 15.5441 8.98572 15.0091 8.52662 14.3223C8.06746 13.6351 7.82155 12.8264 7.82155 12C7.82163 10.8919 8.26258 9.82947 9.04616 9.0459C9.82972 8.26232 10.8922 7.82137 12.0003 7.82129ZM9.32155 12C9.32155 12.5298 9.47938 13.0478 9.77369 13.4883C10.0681 13.9288 10.4865 14.2719 10.9758 14.4746C11.4652 14.6772 12.0033 14.7302 12.5227 14.627C13.0423 14.5236 13.5202 14.2691 13.8948 13.8945C14.2693 13.5201 14.5238 13.0421 14.6272 12.5225C14.7305 12.003 14.6775 11.4649 14.4749 10.9756C14.2722 10.4862 13.929 10.0678 13.4885 9.77344C13.0481 9.47912 12.53 9.32129 12.0003 9.32129C11.29 9.32137 10.6089 9.6042 10.1067 10.1064C9.60444 10.6087 9.32163 11.2897 9.32155 12Z'%3E%3C/path%3E%3C/svg%3E");
	--framex-ico-medal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M39.8574 17.8564C39.8573 9.3947 32.9979 2.53516 24.5361 2.53516C16.0745 2.53524 9.21494 9.39475 9.21484 17.8564C9.21484 26.3182 16.0744 33.1777 24.5361 33.1777C32.9979 33.1777 39.8574 26.3182 39.8574 17.8564ZM41.3574 17.8564C41.3574 27.1467 33.8263 34.6777 24.5361 34.6777C15.246 34.6777 7.71484 27.1466 7.71484 17.8564C7.71494 8.56633 15.246 1.03524 24.5361 1.03516C33.8263 1.03516 41.3573 8.56628 41.3574 17.8564Z'%3E%3C/path%3E%3Cpath d='M30.9287 17.8574C30.9285 14.3269 28.0657 11.4648 24.5352 11.4648C21.0047 11.465 18.1428 14.327 18.1426 17.8574C18.1426 21.388 21.0046 24.2508 24.5352 24.251C28.0659 24.251 30.9287 21.3881 30.9287 17.8574ZM32.4287 17.8574C32.4287 22.2165 28.8943 25.751 24.5352 25.751C20.1762 25.7508 16.6426 22.2164 16.6426 17.8574C16.6428 13.4986 20.1763 9.96502 24.5352 9.96484C28.8942 9.96484 32.4285 13.4985 32.4287 17.8574Z'%3E%3C/path%3E%3Cpath d='M11.9142 28.1043C12.1726 27.7806 12.6452 27.7278 12.9689 27.9862C13.2923 28.2446 13.3452 28.7163 13.0871 29.0399L3.90836 40.5399L3.90738 40.5409C3.80634 40.6669 3.73541 40.8148 3.69937 40.9725C3.66338 41.1302 3.663 41.2943 3.69937 41.452C3.73577 41.6097 3.80791 41.7567 3.90933 41.8827V41.8836C4.01077 42.0095 4.14014 42.1104 4.28629 42.1795L16.1203 47.3485L16.2336 47.3905C16.3487 47.427 16.4689 47.4461 16.59 47.4461C16.7423 47.4461 16.8924 47.4146 17.0334 47.3573C17.1593 47.288 17.2715 47.1958 17.3605 47.0829C17.4546 46.9634 17.5222 46.8251 17.5587 46.6776L20.6994 33.4696C20.7954 33.0668 21.1999 32.8181 21.6027 32.9139C22.0057 33.0097 22.2552 33.4143 22.1593 33.8172L19.0158 47.0311L19.0148 47.0379C18.927 47.3925 18.7643 47.7247 18.5382 48.0116C18.3122 48.2984 18.0272 48.5337 17.7033 48.702C17.6879 48.71 17.6723 48.7176 17.6564 48.7245C17.32 48.8704 16.9569 48.9461 16.59 48.9461C16.2231 48.9461 15.86 48.8704 15.5236 48.7245L15.5216 48.7235L3.66519 43.5448C3.65845 43.5418 3.65134 43.5391 3.64469 43.536C3.29358 43.37 2.984 43.1266 2.74039 42.8241C2.49679 42.5216 2.32477 42.1672 2.23746 41.7889C2.15025 41.4106 2.15011 41.017 2.23648 40.6385C2.32288 40.2602 2.4938 39.9062 2.73648 39.6034L11.9142 28.1043Z'%3E%3C/path%3E%3Cpath d='M36.6428 27.3028C36.9684 27.0471 37.4396 27.1035 37.6956 27.4288L47.2483 39.5841L47.3411 39.6993C47.5482 39.9737 47.6956 40.2893 47.7737 40.6251C47.8608 40.9993 47.8579 41.3887 47.7678 41.7618L47.7688 41.7628C47.6866 42.1486 47.5152 42.5104 47.2688 42.8184C47.0223 43.1266 46.7064 43.3733 46.3479 43.5382L46.3362 43.544V43.5431L34.551 48.7218L34.5501 48.7208C34.2194 48.869 33.8617 48.9473 33.4993 48.9473C33.1341 48.9473 32.7733 48.8691 32.4407 48.7188C32.4363 48.7168 32.4314 48.7151 32.427 48.713C32.0895 48.5522 31.7916 48.3185 31.555 48.0294C31.3183 47.7401 31.1477 47.4018 31.0569 47.0391L31.0559 47.0323L27.8411 33.6388C27.7447 33.2361 27.9931 32.8311 28.3958 32.7345C28.7985 32.638 29.2034 32.8865 29.3001 33.2891L32.512 46.6749L32.5462 46.7843C32.5858 46.891 32.6436 46.9906 32.7161 47.0792H32.7151C32.8094 47.1944 32.9282 47.2872 33.0618 47.3526C33.1996 47.4143 33.3484 47.4473 33.4993 47.4473C33.6513 47.4473 33.802 47.4143 33.9407 47.3516L33.9475 47.3487L45.7327 42.17C45.8742 42.1028 45.9989 42.0044 46.0969 41.8819C46.1976 41.7561 46.2675 41.6079 46.301 41.4503C46.3031 41.4408 46.3055 41.4314 46.3079 41.422C46.3459 41.2726 46.3477 41.116 46.3128 40.9659V40.9649C46.2778 40.8148 46.2068 40.6749 46.1067 40.5577C46.1003 40.5502 46.0943 40.5421 46.0882 40.5343L36.5169 28.3565C36.2609 28.0309 36.3172 27.5588 36.6428 27.3028Z'%3E%3C/path%3E%3C/svg%3E");
	--framex-ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.3916 11.1465C4.3916 11.1181 4.37958 11.0905 4.35938 11.0703V11.0693C4.33937 11.0498 4.31218 11.0391 4.28418 11.0391H2.56934C2.31374 11.0392 2.06842 11.1406 1.8877 11.3213C1.70691 11.5021 1.60556 11.7474 1.60547 12.0029V14.5752C1.60558 14.8307 1.70697 15.0761 1.8877 15.2568C2.06842 15.4376 2.31374 15.539 2.56934 15.5391H4.28418C4.31254 15.539 4.34032 15.5279 4.36035 15.5078C4.38024 15.4879 4.3916 15.4601 4.3916 15.4316V11.1465ZM5.8916 15.4316C5.8916 15.8576 5.7213 16.266 5.41992 16.5674C5.11852 16.8689 4.71038 17.039 4.28418 17.0391H2.56934C1.91594 17.039 1.2892 16.7794 0.827148 16.3174C0.365106 15.8553 0.105583 15.2285 0.105469 14.5752V12.0029C0.105557 11.3495 0.365115 10.7228 0.827148 10.2607C1.2892 9.79868 1.91594 9.53917 2.56934 9.53906H4.28418C4.71028 9.5391 5.11859 9.70862 5.41992 10.0098H5.4209C5.7221 10.3111 5.8916 10.7203 5.8916 11.1465V15.4316Z'%3E%3C/path%3E%3Cpath d='M18.1055 11.1465C18.1055 10.7202 18.275 10.3111 18.5762 10.0098L18.6943 9.90332C18.9803 9.66909 19.3399 9.53906 19.7129 9.53906H21.4268C22.0802 9.53906 22.7068 9.79876 23.1689 10.2607C23.631 10.7228 23.8915 11.3495 23.8916 12.0029V14.5752C23.8915 15.2285 23.631 15.8553 23.1689 16.3174C22.7068 16.7794 22.0802 17.0391 21.4268 17.0391H19.7129C19.2866 17.0391 18.8776 16.8697 18.5762 16.5684C18.2747 16.2669 18.1055 15.8577 18.1055 15.4316V11.1465ZM19.6055 15.4316C19.6055 15.4601 19.6167 15.4878 19.6367 15.5078C19.6569 15.528 19.6846 15.5391 19.7129 15.5391H21.4268C21.6824 15.5391 21.9276 15.4375 22.1084 15.2568C22.2891 15.0761 22.3915 14.8308 22.3916 14.5752V12.0029C22.3915 11.7474 22.2892 11.5021 22.1084 11.3213C21.9276 11.1406 21.6824 11.0391 21.4268 11.0391H19.7129C19.6989 11.0391 19.6847 11.0416 19.6719 11.0469L19.6367 11.0703C19.6166 11.0905 19.6055 11.1182 19.6055 11.1465V15.4316Z'%3E%3C/path%3E%3Cpath d='M18.9639 17.5752V16.2891C18.9639 15.8748 19.2997 15.5391 19.7139 15.5391C20.128 15.5392 20.4639 15.8749 20.4639 16.2891V17.5752C20.4638 18.6831 20.0236 19.7458 19.2402 20.5293C18.4566 21.313 17.3933 21.7529 16.2852 21.7529C15.8709 21.7529 15.5352 21.4171 15.5352 21.0029C15.5353 20.5889 15.8711 20.2529 16.2852 20.2529C16.9955 20.2529 17.6765 19.9709 18.1787 19.4688L18.3574 19.2725C18.7478 18.796 18.9638 18.1966 18.9639 17.5752Z'%3E%3C/path%3E%3Cpath d='M15.5332 21.002C15.5331 20.6327 15.3861 20.2787 15.125 20.0176C14.8638 19.7564 14.5091 19.6094 14.1396 19.6094H11.5684C11.199 19.6094 10.8452 19.7564 10.584 20.0176C10.3228 20.2788 10.1758 20.6327 10.1758 21.002C10.1758 21.3714 10.3228 21.726 10.584 21.9873C10.8452 22.2483 11.1992 22.3954 11.5684 22.3955H14.1396C14.5089 22.3955 14.8637 22.2485 15.125 21.9873L15.2178 21.8848C15.4207 21.637 15.5332 21.3252 15.5332 21.002ZM17.0332 21.002C17.0332 21.6734 16.7998 22.3211 16.3779 22.8359L16.1855 23.0479C15.6431 23.5902 14.9069 23.8955 14.1396 23.8955H11.5684C10.8972 23.8955 10.25 23.6618 9.73535 23.2402L9.52344 23.0479C8.98097 22.5053 8.67578 21.7693 8.67578 21.002C8.67584 20.2348 8.98103 19.4995 9.52344 18.957C10.066 18.4145 10.8013 18.1094 11.5684 18.1094H14.1396C14.9068 18.1094 15.643 18.4145 16.1855 18.957C16.728 19.4995 17.0331 20.2349 17.0332 21.002Z'%3E%3C/path%3E%3Cpath d='M18.9639 10.2881V8.57324C18.9638 6.72637 18.2297 4.95536 16.9238 3.64941C15.6178 2.34336 13.846 1.60938 11.999 1.60938C10.1521 1.6095 8.38114 2.34347 7.0752 3.64941C5.76924 4.95537 5.03527 6.72635 5.03516 8.57324V10.2881C5.03506 10.7022 4.69931 11.0381 4.28516 11.0381C3.871 11.0381 3.53526 10.7022 3.53516 10.2881V8.57324C3.53527 6.32853 4.42738 4.17613 6.01465 2.58887C7.6019 1.00161 9.75428 0.109498 11.999 0.109375C14.2438 0.109375 16.397 1.0015 17.9844 2.58887C19.5716 4.17613 20.4638 6.32857 20.4639 8.57324V10.2881C20.4638 10.7022 20.1279 11.038 19.7139 11.0381C19.2997 11.0381 18.964 10.7022 18.9639 10.2881Z'%3E%3C/path%3E%3Cpath d='M8.67578 9.43066V6.85938C8.67578 6.44516 9.01157 6.10938 9.42578 6.10938C9.83999 6.10938 10.1758 6.44516 10.1758 6.85938V9.43066C10.1758 9.84488 9.83999 10.1807 9.42578 10.1807C9.01157 10.1807 8.67578 9.84488 8.67578 9.43066Z'%3E%3C/path%3E%3Cpath d='M13.8203 9.43066V6.85938C13.8203 6.44516 14.1561 6.10938 14.5703 6.10938C14.9845 6.10938 15.3203 6.44516 15.3203 6.85938V9.43066C15.3203 9.84488 14.9845 10.1807 14.5703 10.1807C14.1561 10.1807 13.8203 9.84488 13.8203 9.43066Z'%3E%3C/path%3E%3Cpath d='M8.67578 12.8594C8.67578 12.4452 9.01157 12.1094 9.42578 12.1094C9.83999 12.1094 10.1758 12.4452 10.1758 12.8594C10.1758 13.0952 10.2912 13.3068 10.6113 13.4961C10.9488 13.6955 11.4503 13.8193 11.9971 13.8193C12.544 13.8193 13.0463 13.6956 13.3838 13.4961C13.7037 13.3069 13.8184 13.0952 13.8184 12.8594C13.8184 12.4452 14.1543 12.1095 14.5684 12.1094C14.9826 12.1094 15.3184 12.4452 15.3184 12.8594C15.3184 13.7635 14.7906 14.4064 14.1465 14.7871C13.5197 15.1576 12.7359 15.3193 11.9971 15.3193C11.2583 15.3193 10.4744 15.1576 9.84766 14.7871C9.20363 14.4063 8.67578 13.7634 8.67578 12.8594Z'%3E%3C/path%3E%3C/svg%3E");
	--framex-ico-envelope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M28.1816 5.89258C28.1815 5.12344 27.5572 4.5 26.7881 4.5H3.2168C2.44777 4.50015 1.82437 5.12354 1.82422 5.89258V24.1074C1.82439 24.8765 2.4478 25.4999 3.2168 25.5H26.7881C27.5571 25.5 28.1815 24.8766 28.1816 24.1074V5.89258ZM29.6816 24.1074C29.6815 25.705 28.3856 27 26.7881 27H3.2168C1.61934 26.9999 0.324393 25.7049 0.324219 24.1074V5.89258C0.324371 4.29512 1.61934 3.00015 3.2168 3H26.7881C28.3856 3 29.6815 4.29504 29.6816 5.89258V24.1074Z'%3E%3C/path%3E%3Cpath d='M28.4439 5.85808C28.759 5.58922 29.2327 5.62696 29.5016 5.94206C29.7701 6.25716 29.7326 6.72993 29.4176 6.9987L16.8609 17.7135L16.8541 17.7194L16.8531 17.7184C16.3333 18.1513 15.679 18.3893 15.0025 18.3893C14.326 18.3893 13.6708 18.1515 13.151 17.7184L13.1441 17.7135L0.587489 6.9987C0.272442 6.72989 0.234801 6.25716 0.503504 5.94206C0.772314 5.62702 1.24504 5.58937 1.56014 5.85808L14.1109 16.5661C14.3613 16.7746 14.6768 16.8893 15.0025 16.8893C15.3283 16.8893 15.6439 16.7746 15.8941 16.5661L28.4439 5.85808Z'%3E%3C/path%3E%3C/svg%3E");

	/* White twin of the go-arrow, for labels that flip to white on hover
	   (a text-bearing pseudo-element cannot use a mask). */
	--framex-arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.4152 4.00684C12.7988 5.62318 9.79185 5.56248 8.10747 3.8781L7.41687 3.1875L6.09091 4.51346L6.78152 5.20406C8.00664 6.42919 9.67161 7.06255 11.325 7.09698L3.14453 15.2775L4.52574 16.6587L12.7063 8.47819C12.7407 10.1316 13.374 11.7966 14.5992 13.0217L15.2898 13.7123L16.6157 12.3864L15.9251 11.6958C14.2407 10.0114 14.1801 7.00438 15.7964 5.38804L16.4594 4.72506L15.0782 3.34386L14.4152 4.00684Z'/%3E%3C/svg%3E");

	/* Diagonal go-arrow, kept as a mask URL so buttons can tint it. */
	--framex-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.4152 4.00684C12.7988 5.62318 9.79185 5.56248 8.10747 3.8781L7.41687 3.1875L6.09091 4.51346L6.78152 5.20406C8.00664 6.42919 9.67161 7.06255 11.325 7.09698L3.14453 15.2775L4.52574 16.6587L12.7063 8.47819C12.7407 10.1316 13.374 11.7966 14.5992 13.0217L15.2898 13.7123L16.6157 12.3864L15.9251 11.6958C14.2407 10.0114 14.1801 7.00438 15.7964 5.38804L16.4594 4.72506L15.0782 3.34386L14.4152 4.00684Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   1. Base
   ========================================================================== */

body.framex {
	background-color: var(--framex-cream);
	color: var(--framex-text);
}

.framex h1,
.framex h2,
.framex h3,
.framex h4,
.framex h5,
.framex h6 {
	color: var(--framex-dark);
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Flatsome caps section titles by default; Framex uses sentence case. */
.framex h1,
.framex h2,
.framex h3 {
	text-transform: none;
}

/* ==========================================================================
   2. Buttons — Framex uses a full pill, dark label on yellow
   ========================================================================== */

/* :not(.toggle) matters: Flatsome's accordion arrow is a <button class="toggle">
   positioned absolutely with its own box — pill padding and a fixed height push
   the arrow out of the row. */
.framex .button,
.framex button:not(.toggle),
.framex input[type='submit'] {
	border-radius: var(--framex-radius-pill);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	padding: 15px 24px;
	line-height: 1.25;
	min-height: 0;
}

.framex .button.primary:not(.is-outline) {
	background-color: var(--framex-accent);
	border-color: var(--framex-accent);
	color: var(--framex-dark);
}

/* Hover states live in section 7 — the reference keeps the yellow and grows a
   white circle over it rather than swapping the background colour. */

.framex .button.white:not(.is-outline) {
	background-color: var(--framex-white);
	color: var(--framex-dark);
}

/* ==========================================================================
   3. Header — transparent bar sitting on top of the hero
   ========================================================================== */

.framex .header-main {
	height: auto;
}

/* Reference row: 1300px inner, 20px top/bottom padding. */
.framex .header-main .header-inner {
	padding-top: 20px;
	padding-bottom: 20px;
}

/* Logo left, menu centred, CTA right.
   Flatsome's main header row is [logo][left elements][right elements] with no
   centre slot, and the logo and CTA are different widths — so centring the nav
   inside its column would sit it off-centre. Pin it to the row instead.
   Desktop only: the column it lives in is hide-for-medium. */
.framex .header-inner.logo-left {
	position: relative;
}

/* Centred in the space between the logo and the hotline button, not in the
   header as a whole. Absolute centring matched the reference exactly, but the
   reference has a short wordmark, five English labels and a compact button —
   with a 170px logo, eight Vietnamese labels and a phone number the menu simply
   overran both neighbours. Flex centring cannot collide with them. */
.framex .header-inner.logo-left .flex-left.flex-grow > .header-nav-main {
	flex-wrap: nowrap;
	white-space: nowrap;
	width: 100%;
	justify-content: center;
}

/* Between the mobile breakpoint and ~1200px the centred menu can reach the
   logo, so the links tighten before anything collides. */
/* Header shrink rules for narrow desktops live at the end of the file — see
   section 29 — because later sections restyle the same button. */

.framex .header-nav-main > li > a {
	font-weight: 400;
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
	/* 10px in the reference, but that carries five short English labels. Eight
	   Vietnamese ones plus their dropdown carets need the tighter gutter, or the
	   caret drops onto a second line. */
	padding: 12px 6px;
	white-space: nowrap;
}

/* Transparent-header pages: white nav, yellow on hover/active. */
.framex .transparent .header-nav-main > li > a {
	color: var(--framex-white);
}

.framex .transparent .header-nav-main > li.active > a,
.framex .transparent .header-nav-main > li > a:hover {
	color: var(--framex-accent);
}

/* The header CTA is a header "Button 1" element.
   The label and its arrow are #181818 in the reference: the <a> itself inherits
   the body grey but carries no visible text — the colour that shows comes from
   .ekit_creative_button_text, which computes to rgb(24,24,24). */
.framex .header-nav .header-button .button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: var(--framex-radius-pill);
	padding: 15px 24px;
	margin-bottom: 0;
	color: var(--framex-dark);
}

/* Diagonal "go" arrow after the label. Drawn as a mask so it inherits the
   button's text colour; the glyph is the same path as [framex_icon
   name="arrow-up-right"] in inc/framex-icons.php. */
.framex .header-nav .header-button .button::after {
	content: '';
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	background-color: currentColor;
	-webkit-mask: var(--framex-arrow) no-repeat center / contain;
	mask: var(--framex-arrow) no-repeat center / contain;
}

.framex .header-nav .header-button .button {
	white-space: nowrap;
}

/* ==========================================================================
   4. Footer
   ========================================================================== */

.framex .framex-footer .section-title-container,
.framex .framex-footer h3 {
	color: var(--framex-white);
}

/* The reference footer is 120px top / 60px bottom. Flatsome's section padding is
   a single scrubfield value applied to both sides, so the section carries 120px
   (top stays editable in the builder) and the bottom is trimmed here.
   !important is required: Flatsome emits its padding as #section_<id>{...}, and an
   ID selector outranks any class selector we can write against a generated id. */
.framex .framex-footer {
	padding-bottom: 60px !important;
}

@media (max-width: 549px) {
	.framex .framex-footer {
		padding-bottom: 40px !important;
	}
}

.framex .framex-footer h3 {
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
	margin-bottom: 26px;
}

.framex .framex-footer,
.framex .framex-footer p {
	color: var(--framex-text);
}

/* Link lists (ux_menu) — no bullets, white labels, 15px gap between rows. */
.framex .framex-footer .ux-menu-link__link {
	padding: 0 0 15px;
	font-size: 16px;
	line-height: 22.4px;
	color: var(--framex-white);
	border: 0;
}

.framex .framex-footer a:hover,
.framex .framex-footer .ux-menu-link__link:hover {
	color: var(--framex-accent);
}

/* Social icons: 40px outlined circles. */
.framex .framex-footer .social-icons .button.icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--framex-divider-dark);
	background-color: transparent;
	color: var(--framex-text);
	margin: 0 8px 0 0;
}

.framex .framex-footer .social-icons .button.icon:hover {
	background-color: var(--framex-accent);
	border-color: var(--framex-accent);
	color: var(--framex-dark);
}

/* Newsletter form (Contact Form 7). */
.framex .framex-newsletter input[type='email'],
.framex .framex-newsletter input[type='text'] {
	background-color: var(--framex-divider-dark);
	border: 0;
	border-radius: var(--framex-radius-pill);
	color: var(--framex-white);
	height: 50px;
	padding: 0 20px;
	margin-bottom: 12px;
	box-shadow: none;
}

/* The reference centres the field's text, not just the placeholder. */
.framex .framex-newsletter input[type='email'],
.framex .framex-newsletter input[type='text'] {
	text-align: center;
}

.framex .framex-newsletter input::placeholder {
	color: var(--framex-text);
}

.framex .framex-newsletter input[type='submit'] {
	background-color: var(--framex-accent);
	color: var(--framex-dark);
	border-radius: var(--framex-radius-pill);
	height: 50px;
	width: 100%;
	font-weight: 500;
}

.framex .framex-newsletter input[type='submit']:hover {
	background-color: var(--framex-white);
}

/* Brand column. */
.framex .framex-footer-brand p {
	max-width: 320px;
	margin-bottom: 24px;
}

/* Contact strip above the copyright. Vertical rhythm measured off the reference:
   row -> strip 70px, strip -> copyright 60px. */
.framex .framex-footer-cta {
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: var(--framex-radius-card);
	margin-top: 70px;
	padding: 30px 40px;
}

.framex .framex-footer-bottom {
	margin-top: 60px;
}

.framex .framex-footer-cta h2 {
	color: var(--framex-white);
	font-size: 24px;
	margin-bottom: 0;
	line-height: 1.3;
}

/* Phone / email items: yellow circle icon + label above value. */
.framex .framex-cta-item {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 0;
}

.framex .framex-cta-icon {
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--framex-accent);
	color: var(--framex-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* [framex_icon] renders inline SVG that inherits colour from its wrapper. */
.framex .framex-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.framex .framex-icon svg {
	display: block;
}

.framex .framex-cta-body {
	display: block;
	line-height: 1.5;
}

.framex .framex-cta-body strong {
	color: var(--framex-text);
	display: block;
	font-size: 14px;
	font-weight: 400;
}

.framex .framex-cta-item .framex-cta-body {
	color: var(--framex-white);
	font-size: 16px;
}

.framex .framex-footer-bottom p {
	margin-bottom: 0;
	font-size: 16px;
	color: var(--framex-white);
}

/* Flatsome's own footer chrome is unused — the whole footer is a UX Block. */
.framex .footer-widgets.footer.footer-2,
.framex .absolute-footer {
	display: none;
}

/* ==========================================================================
   5. Responsive
   ========================================================================== */

@media (max-width: 849px) {
	.framex .framex-footer h3 {
		margin-top: 28px;
	}

	.framex .framex-footer-cta {
		text-align: center;
	}
}

/* ==========================================================================
   6. Home page
   Measurements taken from the reference demo at 1440px.
   ========================================================================== */

/* --- 6.1 Shared type ---------------------------------------------------- */

.framex .framex-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Headings inherit a full-width box from the theme; the pill must shrink to
	   its label or it stretches across the whole container. */
	width: fit-content;
	background-color: var(--framex-white);
	color: var(--framex-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	padding: 10px 16px;
	border-radius: var(--framex-radius-pill);
	margin: 0 0 20px;
}

.framex .framex-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--framex-accent);
}

.framex .framex-eyebrow--light {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--framex-white);
}

.framex .framex-title {
	font-size: 46px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--framex-dark);
	margin-bottom: 20px;
}

.framex .framex-title--light {
	color: var(--framex-white);
}

.framex .framex-sechead {
	margin-bottom: 50px;
}

.framex .framex-sechead .framex-title {
	margin-bottom: 0;
}

/* Services / Projects / Team / Testimonials / Blog centre their heading;
   Why / Video / Process / FAQ / Contact keep it left (measured on the demo). */
.framex .framex-sechead--center {
	text-align: center;
}

.framex .framex-sechead--center .framex-eyebrow {
	margin-left: auto;
	margin-right: auto;
}

/* Dark sections need the light variant of the note line. */
.framex .framex-testimonials .framex-note p,
.framex .framex-testimonials .framex-note a {
	color: var(--framex-white);
}

.framex .framex-testimonials .framex-note a:hover {
	color: var(--framex-accent);
}

.framex .framex-sechead--center .framex-title {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.framex .framex-sechead--center p {
	max-width: 700px;
	margin: 16px auto 0;
}

.framex .framex-note {
	margin-top: 40px;
}

.framex .framex-note p {
	margin-bottom: 0;
}

.framex .framex-note a {
	color: var(--framex-dark);
	text-decoration: underline;
}

.framex .framex-note a:hover {
	color: var(--framex-accent);
}

/* Tick lists. */
.framex .framex-ticks {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
}

.framex .framex-ticks li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	margin: 0;
}

.framex .framex-ticks li::before {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background-color: var(--framex-accent);
	-webkit-mask: var(--framex-check) no-repeat center / contain;
	mask: var(--framex-check) no-repeat center / contain;
}

.framex .framex-ticks--dark {
	flex-direction: column;
	gap: 14px;
}

/* Buttons carrying the diagonal arrow, same glyph as the header CTA. */
.framex .framex-btn.button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-right: 14px;
}

.framex .framex-btn--arrow.button::after {
	content: "";
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	background-color: currentColor;
	-webkit-mask: var(--framex-arrow) no-repeat center / contain;
	mask: var(--framex-arrow) no-repeat center / contain;
}

.framex .framex-btn--play.button::before {
	content: "";
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	margin-left: -14px;
	border-radius: 50%;
	background-color: var(--framex-accent);
	background-image: var(--framex-play);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px;
}

/* --- 6.2 Hero ----------------------------------------------------------- */

.framex .framex-hero .framex-hero__title {
	font-size: 58px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--framex-white);
	margin-bottom: 18px;
}

.framex .framex-hero__lead {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.85);
	max-width: 560px;
	margin-bottom: 26px;
}

.framex .framex-hero .framex-ticks li {
	color: var(--framex-white);
}

/* --- 6.3 About ---------------------------------------------------------- */

.framex .framex-about__media {
	position: relative;
}

.framex .framex-about__img-1 img,
.framex .framex-about__img-2 img,
.framex .framex-why__img img,
.framex .framex-process__img-1 img,
.framex .framex-process__img-2 img {
	border-radius: var(--framex-radius-card);
}

.framex .framex-about__img-2 {
	position: absolute;
	right: 30px;
	bottom: -40px;
	border: 8px solid var(--framex-cream);
	border-radius: 26px;
	overflow: hidden;
}

/* Badge styles live in section 11 (rebuilt to the reference). */

.framex .framex-stats {
	display: flex;
	gap: 60px;
	margin-top: 44px;
	padding-top: 34px;
	border-top: 1px solid var(--framex-divider);
}

.framex .framex-stat__num {
	display: block;
	font-size: 44px;
	font-weight: 500;
	line-height: 1;
	color: var(--framex-dark);
}

.framex .framex-stat__label {
	display: block;
	margin-top: 6px;
	font-size: 16px;
}

/* --- 6.4 Services ------------------------------------------------------- */

.framex .framex-service,
.framex .framex-project,
.framex .framex-post {
	border-radius: var(--framex-radius-card);
	overflow: hidden;
}

/* The card anchors its text box to the top, then stretches it over the whole
   banner so the icon stays up and the title/link drop to the bottom. */
.framex .framex-service .text-box {
	height: 100%;
}

.framex .framex-service .framex-service__body {
	padding: 30px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

.framex .framex-service__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 10px;
	background-color: var(--framex-accent);
	color: var(--framex-dark);
}

.framex .framex-service__title {
	font-size: 20px;
	font-weight: 400;
	color: var(--framex-dark);
	margin: 24px 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--framex-divider);
}

.framex .framex-service__more,
.framex .framex-project__more,
.framex .framex-post__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	color: var(--framex-dark);
}

.framex .framex-service__more::after,
.framex .framex-project__more::after,
.framex .framex-post__more::after {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--framex-arrow) no-repeat center / contain;
	mask: var(--framex-arrow) no-repeat center / contain;
}

/* --- 6.5 Why work with us ---------------------------------------------- */

.framex .framex-feature {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--framex-divider);
}

.framex .framex-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	flex: 0 0 50px;
	border-radius: 50%;
	background-color: var(--framex-accent);
	color: var(--framex-dark);
}

.framex .framex-feature__title {
	font-size: 18px;
	font-weight: 400;
	margin: 0;
}

.framex .framex-why__foot {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
	margin-top: 30px;
}

.framex .framex-phone {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--framex-dark);
}

.framex .framex-phone__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 50%;
	background-color: var(--framex-accent);
}

.framex .framex-phone__body strong {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: var(--framex-text);
}

/* --- 6.6 Projects & posts ---------------------------------------------- */

.framex .framex-project .framex-project__body,
.framex .framex-post .framex-post__body {
	padding: 30px;
}

.framex .framex-project__title,
.framex .framex-post__title {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--framex-white);
	margin: 0 0 16px;
}

.framex .framex-project__more,
.framex .framex-post__more {
	color: var(--framex-white);
}

.framex .framex-post__cat {
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.16);
	color: var(--framex-white);
	font-size: 14px;
	padding: 7px 14px;
	border-radius: var(--framex-radius-pill);
	margin-bottom: 14px;
}

/* --- 6.7 Video (see section 10 — rebuilt as a light section) ----------- */

/* --- 6.8 How it works --------------------------------------------------- */

.framex .framex-process__body {
	position: relative;
}

.framex .framex-process__img-2 {
	position: absolute;
	right: -30px;
	bottom: -30px;
	border: 8px solid var(--framex-cream);
	border-radius: 26px;
	overflow: hidden;
}

.framex .framex-process__lead {
	margin-bottom: 30px;
}

.framex .framex-step {
	display: flex;
	gap: 24px;
	padding: 24px 0;
	border-top: 1px solid var(--framex-divider);
}

.framex .framex-step__num {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: var(--framex-accent);
	color: var(--framex-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.framex .framex-step__body h3 {
	font-size: 20px;
	font-weight: 400;
	margin: 0 0 8px;
}

.framex .framex-step__body p {
	margin: 0;
}

/* --- 6.9 Team ----------------------------------------------------------- */

/* Flatsome's team_member takes image_radius as a percentage; the reference uses
   a 20px corner, so it is set here instead. */
.framex .framex-member .box-image-inner {
	border-radius: var(--framex-radius-card) !important;
}

.framex .framex-member .box-text {
	padding: 18px 0 0;
	text-align: left;
}

.framex .framex-member .person-name {
	display: block;
	font-size: 20px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--framex-dark);
}

.framex .framex-member .person-title {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--framex-text);
	opacity: 1;
}

/* --- 6.10 Testimonials -------------------------------------------------- */

.framex .framex-testimonials .testimonial-text,
.framex .framex-testimonials blockquote {
	color: var(--framex-white);
	font-size: 18px;
	line-height: 1.6;
}

.framex .framex-testimonials .testimonial-meta,
.framex .framex-testimonials .testimonial-name,
.framex .framex-testimonials strong {
	color: var(--framex-white);
}

/* --- 6.11 FAQ ----------------------------------------------------------- */

/* Rating card. The reference is a single 80px dark pill: circular 60px avatar,
   then score + stars on one line with the review count wrapped beneath, and the
   Call Us button pushed to the far end. */
.framex .framex-rating {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin: 30px 0 0;
	padding: 10px;
	background-color: var(--framex-dark);
	border-radius: var(--framex-radius-card);
}

.framex .framex-rating__avatar {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
}

.framex .framex-rating__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* flex-wrap is what puts the review count on its own line — the label is
   flex-basis 100%, so it always breaks after the stars however long it gets. */
.framex .framex-rating__stack {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 10px;
	margin-right: auto;
}

.framex .framex-rating__score {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--framex-white);
}

/* Negative margin cancels the letter-spacing trailing the last star, so the
   review count below lines up with the score above. */
.framex .framex-rating__stars {
	font-size: 18px;
	line-height: 1.3;
	color: var(--framex-accent);
	letter-spacing: 5px;
	margin-right: -5px;
}

.framex .framex-rating__label {
	flex: 1 1 100%;
	font-size: 16px;
	line-height: 1.7;
	color: var(--framex-white);
}

/* Not a .button, so the pill styling and the ripple's stacking context have to
   be declared here; z-index 0 keeps the ripple's z-index:-1 inside the anchor. */
.framex .framex-rating__cta {
	position: relative;
	z-index: 0;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 24px;
	overflow: hidden;
	background-color: var(--framex-accent);
	border-radius: var(--framex-radius-pill);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: var(--framex-dark);
}

.framex .framex-rating__cta:hover,
.framex .framex-rating__cta:focus {
	color: var(--framex-dark);
}

.framex .framex-rating__cta .framex-icon {
	color: var(--framex-dark);
}

.framex .framex-accordion .accordion-item {
	background-color: var(--framex-white);
	border: 0;
	border-radius: var(--framex-radius-card);
	margin-bottom: 14px;
	overflow: hidden;
}

.framex .framex-accordion .accordion-title {
	border: 0;
	font-size: 18px;
	font-weight: 400;
	color: var(--framex-dark);
	padding: 20px 24px;
	text-transform: none;
}

.framex .framex-accordion .accordion-inner {
	padding: 0 24px 22px;
}

/* --- 6.12 Contact ------------------------------------------------------- */

.framex .framex-contact__card {
	margin-top: 30px;
}

.framex .framex-contact__help {
	color: var(--framex-dark);
	font-size: 18px;
	font-weight: 400;
	margin-bottom: 6px;
}

.framex .framex-contact__phone {
	display: block;
	color: var(--framex-dark);
	font-size: 30px;
	font-weight: 500;
	margin-bottom: 10px;
}

.framex .framex-contact__note {
	color: var(--framex-text);
	font-size: 14px;
	margin: 0;
}

/* CF7 wraps each line of fields in its own <p>, so the paragraph — not the
   surrounding div — has to be the flex row. */
.framex .framex-form .framex-form-row > p {
	display: flex;
	gap: 16px;
	margin: 0;
}

.framex .framex-form .framex-form-row .wpcf7-form-control-wrap {
	flex: 1 1 0;
	min-width: 0;
}

.framex .framex-form .framex-form-row input {
	width: 100%;
}

.framex .framex-form input[type="text"],
.framex .framex-form input[type="email"],
.framex .framex-form input[type="tel"],
.framex .framex-form textarea {
	background-color: var(--framex-white);
	border: 0;
	border-radius: 14px;
	box-shadow: none;
	padding: 14px 18px;
	height: auto;
	margin-bottom: 16px;
}

.framex .framex-form textarea {
	min-height: 130px;
}

.framex .framex-form input[type="submit"] {
	background-color: var(--framex-accent);
	color: var(--framex-dark);
	border-radius: var(--framex-radius-pill);
	padding: 15px 30px;
}

/* --- 6.13 Responsive ---------------------------------------------------- */

@media (max-width: 849px) {
	.framex .framex-title {
		font-size: 32px;
	}

	.framex .framex-hero .framex-hero__title {
		font-size: 36px;
	}

	.framex .framex-stats {
		gap: 30px;
	}

	.framex .framex-form .framex-form-row {
		flex-direction: column;
		gap: 0;
	}

	.framex .framex-sechead {
		margin-bottom: 30px;
	}
}

/* ==========================================================================
   7. Hover & cursor
   The reference uses one motion language throughout:
     buttons  — a white circle grows from where the pointer entered
     arrows   — rotate 45deg
     images   — scale(1.06)
     timing   — 0.4s ease-in-out
   ========================================================================== */

:root {
	--framex-ease: 0.4s ease-in-out;
}

/* --- 7.1 Buttons -------------------------------------------------------- */

.framex .button {
	position: relative;
	overflow: hidden;
	z-index: 1;
	transition: color var(--framex-ease);
}

/* The circle sits behind the label: z-index -1 inside the button's own stacking
   context paints it over the background but under the text. Its origin is moved
   to the pointer by assets/js/framex.js. */
.framex .framex-ripple {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 0;
	height: 0;
	border-radius: 50%;
	background-color: var(--framex-white);
	transform: translate(-50%, -50%);
	transition: width var(--framex-ease), height var(--framex-ease);
	pointer-events: none;
	z-index: -1;
}

.framex .framex-has-ripple:hover .framex-ripple {
	width: 225%;
	height: 562.5px;
}

/* White buttons invert the fill so it stays visible. */
.framex .button.white .framex-ripple,
.framex .framex-btn--play .framex-ripple {
	background-color: var(--framex-accent);
}

/* The label keeps its colour — the reference does not flip it to white. */
.framex .button.primary:not(.is-outline):hover {
	background-color: var(--framex-accent);
	border-color: var(--framex-accent);
	color: var(--framex-dark);
}

.framex .header-nav .header-button .button:hover {
	color: var(--framex-dark);
}

/* --- 7.2 Arrows --------------------------------------------------------- */

.framex .framex-btn--arrow.button::after,
.framex .header-nav .header-button .button::after,
.framex .framex-service__more::after,
.framex .framex-project__more::after,
.framex .framex-post__more::after {
	transition: transform var(--framex-ease);
}

.framex .framex-btn--arrow.button:hover::after,
.framex .header-nav .header-button .button:hover::after {
	transform: rotate(45deg);
}

.framex .framex-service:hover .framex-service__more::after,
.framex .framex-project:hover .framex-project__more::after,
.framex .framex-post:hover .framex-post__more::after {
	transform: rotate(45deg);
}

/* --- 7.3 Cards & images ------------------------------------------------- */

.framex .framex-service .bg,
.framex .framex-project .bg,
.framex .framex-post .bg {
	transition: transform 0.6s ease-in-out, opacity var(--framex-ease);
}

.framex .framex-project:hover .bg,
.framex .framex-post:hover .bg {
	transform: scale(1.06);
}

/* The service card is a flat cream tile at rest; on hover Flatsome fades its
   cream overlay away to reveal the photo, and this scrim fades in on top so the
   white label still reads. It lives on .banner-bg, which sits under
   .banner-layers, so the card text stays above it. */
.framex .framex-service .overlay {
	transition: opacity var(--framex-ease);
}

.framex .framex-service .banner-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(24, 24, 24, 0.45);
	opacity: 0;
	transition: opacity var(--framex-ease);
	pointer-events: none;
}

.framex .framex-service:hover .banner-bg::after {
	opacity: 1;
}

/* Icon flips from yellow to white, matching the reference. */
.framex .framex-service:hover .framex-service__icon {
	background-color: var(--framex-white);
	color: var(--framex-dark);
}

.framex .framex-service:hover .framex-service__title {
	border-color: var(--framex-divider-dark);
}

.framex .framex-service__title,
.framex .framex-service__more,
.framex .framex-service__icon {
	transition: color var(--framex-ease), border-color var(--framex-ease),
		background-color var(--framex-ease);
}

/* Once the photo is showing, the card text has to read on it. */
.framex .framex-service:hover .framex-service__title,
.framex .framex-service:hover .framex-service__more {
	color: var(--framex-white);
}

/* Team portraits and standalone images. */
.framex .framex-member .box-image-inner,
.framex .framex-about__img-1,
.framex .framex-about__img-2,
.framex .framex-why__img,
.framex .framex-process__img-1,
.framex .framex-process__img-2 {
	overflow: hidden;
}

.framex .framex-member .box-image img,
.framex .framex-about__img-1 img,
.framex .framex-about__img-2 img,
.framex .framex-why__img img,
.framex .framex-process__img-1 img,
.framex .framex-process__img-2 img {
	transition: transform 0.6s ease-in-out;
}

/* Only team portraits scale here; the editorial photos are handled in
   section 11, where the reference shows they do not move. */
.framex .framex-member:hover .box-image img {
	transform: scale(1.06);
}

/* Blog category chip. */
.framex .framex-post__cat {
	transition: background-color var(--framex-ease), color var(--framex-ease);
}

.framex .framex-post:hover .framex-post__cat {
	background-color: var(--framex-accent);
	color: var(--framex-dark);
}

/* Feature rows and footer links pick up the accent on hover. */
.framex .framex-feature,
.framex .framex-feature__icon,
.framex .framex-phone {
	transition: border-color var(--framex-ease), background-color var(--framex-ease),
		color var(--framex-ease);
}

.framex .framex-feature:hover .framex-feature__icon,
.framex .framex-phone:hover .framex-phone__icon {
	background-color: var(--framex-dark);
	color: var(--framex-accent);
}

/* Accordion. */
.framex .framex-accordion .accordion-title {
	transition: background-color var(--framex-ease), color var(--framex-ease);
}

.framex .framex-accordion .accordion-title:hover {
	color: var(--framex-accent);
}

/* Reduced motion removes the easing, not the hover feedback itself — cancelling
   the transform here also killed the zoom for anyone whose OS has animations
   switched off (common on Windows), which is not what the setting asks for. */
@media (prefers-reduced-motion: reduce) {
	.framex .framex-ripple,
	.framex .framex-project .bg,
	.framex .framex-post .bg,
	.framex .framex-member .box-image img {
		transition: none;
	}
}

/* ==========================================================================
   8. Audit corrections
   Differences found by measuring the reference section by section, not by eye.
   ========================================================================== */

/* The eyebrow label is 14px in the reference; the pill is its wrapper. */
.framex .framex-eyebrow {
	font-size: 14px;
}

/* Hero: 240px top / 110px bottom padding rather than a fixed height. */
.framex .framex-hero {
	padding-bottom: 110px !important;
}

/* --- Projects: dark section, arch-topped cards, rating strip ------------- */

.framex .framex-projects .framex-note p,
.framex .framex-projects .framex-note a {
	color: var(--framex-white);
}

.framex .framex-projects .framex-note a:hover {
	color: var(--framex-accent);
}

/* Reference card: 336x410 with a 1000px arch on the top corners. */
.framex .framex-project {
	border-radius: 1000px 1000px 0 0;
	overflow: hidden;
}

.framex .framex-score {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
	color: var(--framex-white);
	font-size: 16px;
}

.framex .framex-score__num {
	font-weight: 500;
}

.framex .framex-score__stars {
	color: var(--framex-accent);
	letter-spacing: 2px;
}

.framex .framex-score__label {
	color: var(--framex-text);
}

/* --- Contact: photo behind the section, white form card ----------------- */

.framex .framex-contact .framex-form {
	background-color: var(--framex-white);
	border-radius: var(--framex-radius-card);
}

.framex .framex-contact .framex-form .framex-title,
.framex .framex-contact .framex-form p {
	color: var(--framex-dark);
}

.framex .framex-contact .framex-form p {
	color: var(--framex-text);
}

/* Left column now sits directly on the photo. */
.framex .framex-contact__info {
	margin-top: 30px;
}

/* Only the dark placement inverts, and only its left column: the form card is
   white in both placements, so a bare .framex-title here would tie with
   `.framex-contact .framex-form .framex-title` and win on source order,
   painting the form's heading white on white. */
.framex .framex-contact.dark > .section-content > .row > .col:first-child .framex-title,
.framex .framex-contact.dark > .section-content > .row > .col:first-child p,
.framex .framex-contact.dark .framex-contact__help,
.framex .framex-contact.dark .framex-contact__phone {
	color: var(--framex-white);
}

.framex .framex-contact.dark .framex-contact__note {
	color: rgba(255, 255, 255, 0.7);
}

.framex .framex-contact .framex-form input[type="text"],
.framex .framex-contact .framex-form input[type="email"],
.framex .framex-contact .framex-form input[type="tel"],
.framex .framex-contact .framex-form textarea {
	background-color: var(--framex-cream);
}

/* --- Services / Process now sit on white -------------------------------- */

.framex .framex-services .framex-service .overlay {
	background-color: var(--framex-cream) !important;
}

/* ==========================================================================
   9. Cursor — matched to the reference script
   The reference ball is a 10px accent dot easing at ratio 0.15 that COLLAPSES
   (scale 0) over links, buttons and form controls, rather than growing.
   Verified on the demo: transform reads matrix(0,0,0,0,…) while hovering a link.
   ========================================================================== */

.framex-cursor {
	position: fixed;
	left: 0;
	top: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--framex-accent);
	pointer-events: none;
	z-index: 100000;
	opacity: 0;
	will-change: transform;
}

.framex-cursor__inner {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: inherit;
	transform: scale(1);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.framex-cursor.is-visible {
	opacity: 1;
}

/* Over anything clickable the dot collapses, exactly as the reference does. */
.framex-cursor.is-hidden .framex-cursor__inner {
	transform: scale(0);
	opacity: 0;
}

/* Click: a short pop before it fades. */
.framex-cursor.is-click .framex-cursor__inner {
	transform: scale(1.3);
	opacity: 0;
}

/* The native pointer stays visible. The reference declares no `cursor: none`
   anywhere (its CSS has none, and the live demo computes `cursor: auto` on
   html, body and headings) — the yellow dot trails alongside the real arrow. */

/* ==========================================================================
   10. Second audit pass
   ========================================================================== */

/* --- Video: cream section, heading left, stats right, video card below --- */

.framex .framex-video__head {
	margin-bottom: 50px;
}

.framex .framex-video__lead {
	margin-bottom: 30px;
	color: var(--framex-text);
}

.framex .framex-video .framex-title {
	margin-bottom: 26px;
}

/* Three stats sit in a row divided by rules, as in the reference. */
.framex .framex-stats--three {
	gap: 0;
	border-top: 1px solid var(--framex-divider);
	padding-top: 30px;
	margin-top: 0;
}

.framex .framex-stats--three .framex-stat {
	flex: 1 1 0;
	padding-left: 24px;
	border-left: 1px solid var(--framex-divider);
}

.framex .framex-stats--three .framex-stat:first-child {
	padding-left: 0;
	border-left: 0;
}

.framex .framex-stats--three .framex-stat__num {
	font-size: 34px;
}

.framex .framex-video__player {
	overflow: hidden;
}

.framex .framex-video__ticks {
	margin-top: 30px;
}

.framex .framex-ticks--center {
	justify-content: center;
	margin-bottom: 0;
	gap: 12px 50px;
}

/* --- Testimonials: card matches the reference box ----------------------- */

.framex .framex-testimonials .testimonial-text,
.framex .framex-testimonials blockquote {
	font-size: 18px;
	line-height: 1.65;
}

/* --- About: image column proportioned like the reference ---------------- */

.framex .framex-about__img-1 img {
	max-height: 600px;
	width: 100%;
	object-fit: cover;
}

.framex .framex-about__media {
	max-height: 640px;
}

/* --- Hero: reference h1 is 58px and wraps to three lines at 1440 -------- */

.framex .framex-hero .framex-hero__title {
	max-width: 620px;
}

.framex .framex-hero__lead {
	max-width: 520px;
}

/* --- Third pass: heights measured against the reference ----------------- */

/* The reference h1 wraps to three lines at 1440px. Be Vietnam Pro is narrower
   than the original face, so the column is capped to force the same break. */
.framex .framex-hero {
	min-height: 100vh;
}

/* No width cap: the reference h1 fills its column (613px, two lines at 1920). */
.framex .framex-hero .framex-hero__title {
	max-width: none;
}

/* Projects runs flush into the next section in the reference (padding-bottom 0).
   Same !important reason as the footer: Flatsome writes #section_<id>{...}. */
.framex .framex-projects {
	padding-bottom: 0 !important;
}

.framex .framex-projects .framex-note {
	padding-bottom: 60px;
}

/* ==========================================================================
   11. Badge + hover corrections
   ========================================================================== */

/* --- Years of Experience badge ------------------------------------------
   Reference: 273x112 yellow card, radius 20 on every corner, padding 20/30,
   flex with 20px gap — a 50px medal, then number over label. It straddles the
   bottom edge of the two photos rather than clinging to the top-left.
   ------------------------------------------------------------------------ */

.framex .framex-badge {
	position: absolute;
	left: 34%;
	bottom: 26px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px 30px;
	border-radius: var(--framex-radius-card);
	background-color: var(--framex-accent);
	color: var(--framex-dark);
}

.framex .framex-badge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 50px;
	color: var(--framex-dark);
}

.framex .framex-badge__body {
	display: block;
	line-height: 1.2;
}

.framex .framex-badge__num {
	display: block;
	font-size: 34px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--framex-dark);
}

.framex .framex-badge__label {
	display: block;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--framex-dark);
	white-space: nowrap;
}

/* --- About stats stack vertically on the right of the copy -------------- */

.framex .framex-stats--stacked {
	flex-direction: column;
	gap: 0;
	align-items: flex-start;
	max-width: 200px;
	margin-left: auto;
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.framex .framex-stats--stacked .framex-stat {
	padding: 26px 0;
	width: 100%;
	border-bottom: 1px solid var(--framex-divider);
}

.framex .framex-stats--stacked .framex-stat:last-child {
	border-bottom: 0;
}

/* --- Image hover: only the cards scale, not the editorial photos --------
   Measured on the reference: hovering the About / Why / Process images leaves
   transform at "none". Only the project, blog and service cards scale.
   ------------------------------------------------------------------------ */

.framex .framex-about__img-1:hover img,
.framex .framex-about__img-2:hover img,
.framex .framex-why__img:hover img,
.framex .framex-process__img-1:hover img,
.framex .framex-process__img-2:hover img {
	transform: none;
}

/* Team portrait scaling is declared once, in section 7. */

/* ==========================================================================
   12. Button sizing
   Every button in the reference is exactly 50px tall, whatever it contains.
   ========================================================================== */

.framex .button,
.framex button:not(.toggle),
.framex input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	min-height: 50px;
	padding: 0 24px;
	line-height: 1;
}

.framex .header-nav .header-button .button {
	height: 50px;
	padding: 0 24px;
}

/* The hero's video control is a 50px circle with the label beside it, not a
   pill — matching the reference, where only "Get a Free Quote" has a fill. */
.framex .framex-btn--play.button {
	background-color: transparent;
	border: 0;
	padding: 0;
	color: var(--framex-white);
	gap: 14px;
	box-shadow: none;
}

.framex .framex-btn--play.button::before {
	content: "";
	width: 50px;
	height: 50px;
	flex: 0 0 50px;
	margin-left: 0;
	border-radius: 50%;
	background-color: var(--framex-accent);
	background-image: var(--framex-play);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
}

/* No expanding fill on the plain-link variant. */
.framex .framex-btn--play .framex-ripple {
	display: none;
}

/* Textarea and the message field keep their own height. */
.framex .framex-form textarea {
	height: auto;
	min-height: 130px;
	padding: 14px 18px;
	line-height: 1.5;
}

/* CF7 submit sits inside the card, same 50px rhythm. */
.framex .framex-form input[type="submit"] {
	padding: 0 30px;
}

/* ==========================================================================
   13. Image hover — read from the reference theme's own stylesheet
   themes/framex/style.css defines .at-shiny-glass-effect: a translucent white
   band, rotated -45deg, that grows from height 0 to 250% and fades out. It is
   what the About / Why / Process / Team photos do on hover — NOT a zoom, which
   is why sampling `transform` on them read "none".
   ========================================================================== */

.framex .framex-shine {
	position: relative;
	overflow: hidden;
}

.framex .framex-shine::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 200%;
	height: 0;
	background-color: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%) rotate(-45deg);
	z-index: 1;
	pointer-events: none;
}

.framex .framex-shine:hover::after {
	height: 250%;
	background-color: transparent;
	transition: all 600ms linear;
}

/* The reference clips the Why photo with a two-arch shape rather than a plain
   rounded rectangle. */
.framex .framex-why__img img {
	-webkit-mask-image: url("../img/our-work-shape.svg");
	mask-image: url("../img/our-work-shape.svg");
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: cover;
	mask-size: cover;
	border-radius: 0;
}

/* About: large photo 20px radius; inset photo has a cream border on three sides
   (10px top/bottom/left, none right) with a 20px radius. */
.framex .framex-about__img-1 img {
	border-radius: var(--framex-radius-card);
}

.framex .framex-about__img-2 {
	border: 10px solid var(--framex-cream);
	border-right-width: 0;
	border-radius: var(--framex-radius-card);
}

.framex .framex-about__img-2 img {
	border-radius: 0;
}

@media (max-width: 849px) {
	.framex .framex-about__img-2 {
		border-width: 5px;
		border-right-width: 0;
	}
}

/* Service cards: ElementsKit fades the photo in (opacity 0 -> 1) and the theme
   overrides its zoom back to scale(1), so the photo appears without moving. */
.framex .framex-service .bg {
	transform: none !important;
}

/* .framex-shine sets position:relative, which lands after the overlap rules in
   sections 6 and 10 and cancels them. Re-assert the offset photos here. */
.framex .framex-about__img-2 {
	position: absolute;
	right: 30px;
	bottom: -40px;
}

.framex .framex-process__img-2 {
	position: absolute;
	right: -30px;
	bottom: -30px;
}

/* The reference keeps both photos overlapping at every width (245/165 at 375px),
   so they stay absolutely positioned on mobile too. */

/* ==========================================================================
   14. Years of Experience badge motion
   Straight from the reference stylesheet:
     .about-us-counter-box { animation: experienceboxmove 3s infinite linear alternate; }
     @keyframes experienceboxmove { 50% { transform: translateX(30px); } }
   ========================================================================== */

@keyframes framex-badge-drift {
	50% {
		transform: translateX(30px);
	}
}

.framex .framex-badge {
	animation: framex-badge-drift 3s infinite linear alternate;
}

/* No reduced-motion guard here on purpose: the reference ships none (its CSS has
   zero prefers-reduced-motion blocks) and the badge drifts continuously there. */

/* ==========================================================================
   15. Hero background — parallax + gradient scrim
   ========================================================================== */

/* The layer is taken out of flow and pinned to the viewport, the way the
   reference's Jarallax does it, so the container has to clip it. Left, width and
   height are written by assets/js/framex.js — a fixed element inherits none of
   them from the box it used to sit in. */
.framex .framex-parallax-on {
	overflow: hidden;
	/* overflow alone does not clip a fixed descendant — it escapes the scroll
	   box. clip-path does clip it, and unlike transform or contain:paint it does
	   not turn this element into the containing block, so the layer still
	   resolves against the viewport. This is the same trick the reference's
	   Jarallax uses on its own container. */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.framex .framex-parallax-on > .bg {
	position: fixed;
	top: 0;
	will-change: transform;
}

/* The reference darkens the hero with two stacked gradients rather than a flat
   tint — heavy on the left behind the copy, and a band across the top so the
   transparent header stays readable:
     linear-gradient(90deg, #181818cc 0%, #181818b8 36.01%, transparent 63.02%)
     linear-gradient(#181818cc 0%, transparent 18.18%)
   Flatsome's own overlay element carries them, so it stays put while the photo
   moves underneath. */
.framex .framex-hero .section-bg-overlay {
	background-color: transparent;
	background-image: linear-gradient(
			90deg,
			rgba(24, 24, 24, 0.8) 0%,
			rgba(24, 24, 24, 0.72) 36.01%,
			rgba(0, 0, 0, 0) 63.02%
		),
		linear-gradient(rgba(24, 24, 24, 0.8) 0%, rgba(0, 0, 0, 0) 18.18%);
}

/* ==========================================================================
   16. 1920 audit corrections
   Measured against the reference at 1920x1080.
   ========================================================================== */

/* Step marker is 50px in the reference, not 46. */
.framex .framex-step__num {
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
}

/* Process photos: 555x541 in the reference. */
.framex .framex-process__img-1 img {
	min-height: 460px;
	object-fit: cover;
	width: 100%;
}

.framex .framex-process .framex-step {
	padding: 28px 0;
}

/* Contact form: card is 630x644 with 50px padding; the textarea is 108 tall. */
.framex .framex-form textarea {
	min-height: 108px;
}

/* Testimonials rating strip, same treatment as the Projects one. */
.framex .framex-testimonials .framex-score__label {
	color: var(--framex-text);
}

/* CF7 renders the message field with rows="10", so min-height alone leaves it
   261px tall. The reference textarea is 108px. */
.framex .framex-form textarea {
	height: 108px;
	min-height: 108px;
}

/* Text fields sit at 50px like every other control in the reference. */
.framex .framex-form input[type="text"],
.framex .framex-form input[type="email"],
.framex .framex-form input[type="tel"] {
	height: 50px;
	padding: 0 18px;
}

/* ==========================================================================
   17. Testimonials card — rebuilt to the reference structure
   Reference card (407x430, padding 10, bg rgba(255,255,255,.1), radius 20):
     stars   .elementskit-stars        padding 30 30 0, glyphs 20px #EDC701
     quote   20px / line-height 34px, white
     bio     387x117 panel, padding 30, radius 10, its OWN rgba(255,255,255,.1)
             holding a 57px round avatar + name (20px) over role (16px)
   Flatsome's testimonial nests the meta inside .icon-box-text, so the text
   wrapper is set to display:contents and the parts are placed on a grid.
   ========================================================================== */

.framex .framex-testimonials .testimonial-box {
	position: relative;
	display: grid;
	/* auto, not 57px: the avatar carries a 30px left margin and would overflow a
	   fixed track straight into the name. */
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"stars stars"
		"quote quote"
		"avatar meta";
	gap: 0;
	/* Flatsome gives slider cells 38.4px of side padding from a higher-specificity
	   rule; the reference card is a flat 10px on every side. */
	padding: 10px !important;
	min-height: 430px;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: var(--framex-radius-card);
}

/* Lets the three inner parts become grid items of the card itself. */
.framex .framex-testimonials .icon-box-text {
	display: contents;
}

/* The bio panel sits behind the avatar and name in the last row. */
.framex .framex-testimonials .testimonial-box::after {
	content: "";
	grid-row: 3;
	grid-column: 1 / -1;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
}

.framex .framex-testimonials .star-rating {
	grid-area: stars;
	padding: 20px 20px 0;
	font-size: 20px;
	color: var(--framex-accent);
	width: auto;
	margin: 0;
}

.framex .framex-testimonials .star-rating span::before,
.framex .framex-testimonials .star-rating::before {
	color: var(--framex-accent);
}

.framex .framex-testimonials .testimonial-text {
	grid-area: quote;
	padding: 18px 20px 24px;
	margin: 0;
}

.framex .framex-testimonials .testimonial-text p {
	font-size: 20px;
	line-height: 34px;
	font-style: normal;
	color: var(--framex-white);
	margin: 0;
}

.framex .framex-testimonials .icon-box-img {
	grid-area: avatar;
	z-index: 1;
	margin: 30px 0 30px 30px;
	width: 57px !important;
	padding: 0;
}

.framex .framex-testimonials .icon-box-img img {
	border-radius: 50%;
}

.framex .framex-testimonials .testimonial-meta {
	grid-area: meta;
	z-index: 1;
	align-self: center;
	display: flex;
	flex-direction: column;
	margin: 30px 30px 30px 14px;
	padding: 0;
}

.framex .framex-testimonials .testimonial-name {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--framex-white);
}

/* The reference puts the role on its own line, so the " / " separator goes. */
.framex .framex-testimonials .testimonial-name-divider {
	display: none;
}

.framex .framex-testimonials .testimonial-company {
	font-size: 16px;
	line-height: 1.4;
	color: var(--framex-white);
	opacity: 1;
}

@media (max-width: 549px) {
	.framex .framex-testimonials .testimonial-box {
		min-height: 0;
	}

	.framex .framex-testimonials .icon-box-img,
	.framex .framex-testimonials .testimonial-meta {
		margin: 20px;
	}

	.framex .framex-testimonials .testimonial-meta {
		margin-left: 12px;
	}
}

/* The cards are the Flickity cells themselves, so the 30px gap the reference
   leaves between them comes from their own margin — ux_slider's "margin" option
   sets the slider's outer margin, not the cell spacing. */
.framex .framex-testimonials .testimonial-box {
	margin-left: 15px;
	margin-right: 15px;
}

/* ==========================================================================
   18. Mobile
   Measured on the reference at 375px: container 355 (10px each side),
   sections 60px top/bottom, hero 140/50, h1 28/33.6, h2 26/31.2.
   ========================================================================== */

@media (max-width: 849px) {
	/* Rows are style="collapse" so they carry no gutters — the reference keeps
	   10px of breathing room at each edge. */
	.framex .section .row {
		padding-left: 10px;
		padding-right: 10px;
	}

	.framex .framex-hero .framex-hero__title {
		font-size: 28px;
		line-height: 1.2;
	}

	.framex .framex-title {
		font-size: 26px;
		line-height: 1.2;
	}

	.framex .framex-hero {
		min-height: 0;
		padding-bottom: 50px !important;
	}

	/* Section titles and eyebrows keep their left alignment; only the centred
	   heads stay centred. */
	.framex .framex-sechead {
		margin-bottom: 26px;
	}

	.framex .framex-stats,
	.framex .framex-stats--three {
		flex-direction: column;
		gap: 0;
	}

	.framex .framex-stats--three .framex-stat {
		padding: 20px 0;
		border-left: 0;
		border-bottom: 1px solid var(--framex-divider);
	}

	.framex .framex-stats--three .framex-stat:last-child {
		border-bottom: 0;
	}

	/* The reference keeps the badge absolute and still animating on mobile — just
	   smaller: 193x77 with 12px padding. Making it static let the second photo
	   overlap and clip the label. */
	.framex .framex-badge {
		padding: 12px;
		gap: 12px;
		left: auto;
		/* 30px of clearance: the drift animation pushes it that far right, so a
		   flush anchor would run the label off the screen edge. */
		right: 30px;
		bottom: 40px;
	}

	.framex .framex-badge__icon {
		flex: 0 0 38px;
	}

	.framex .framex-badge__icon svg {
		width: 38px;
		height: 38px;
	}

	.framex .framex-badge__num {
		font-size: 26px;
	}

	.framex .framex-badge__label {
		font-size: 14px;
	}

	.framex .framex-why__foot {
		gap: 20px;
	}

	.framex .framex-video__ticks .framex-ticks {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.framex .framex-contact .framex-form {
		margin-top: 24px;
	}

	.framex .framex-footer-cta {
		padding: 24px;
		margin-top: 40px;
	}

	.framex .framex-score,
	.framex .framex-note p {
		flex-wrap: wrap;
		text-align: center;
	}
}

@media (max-width: 549px) {
	.framex .framex-service__title,
	.framex .framex-project__title,
	.framex .framex-post__title {
		font-size: 18px;
	}

	.framex .framex-testimonials .testimonial-box {
		margin-left: 0;
		margin-right: 0;
	}

	.framex .framex-testimonials .testimonial-text p {
		font-size: 17px;
		line-height: 28px;
	}
}

/* Reference mobile card heights (375px): testimonial 301, team avatar 160. */
@media (max-width: 849px) {
	.framex .framex-testimonials .testimonial-box {
		min-height: 301px;
	}

	.framex .framex-about__img-2 {
		right: 10px;
		bottom: -20px;
	}

	.framex .framex-process__img-2 {
		right: 0;
		bottom: -20px;
	}
}

@media (max-width: 849px) {
	/* The desktop min-height (460px, matching the 555x541 reference photo) is far
	   too tall once the column is only 355 wide — the reference uses 326 there. */
	.framex .framex-process__img-1 img {
		min-height: 300px;
	}

	/* Three stacked counters were adding 350px to the video section head. */
	.framex .framex-stats--three .framex-stat {
		padding: 14px 0;
	}

	.framex .framex-stats--three .framex-stat__num,
	.framex .framex-stat__num {
		font-size: 30px;
	}

	.framex .framex-process .framex-step {
		padding: 20px 0;
	}

	.framex .framex-step__body p {
		font-size: 15px;
		line-height: 1.55;
	}
}

@media (max-width: 849px) {
	/* On mobile the reference anchors the inset photo near the top-right
	   (top 51px below the main photo), not to the bottom. */
	.framex .framex-about__img-2 {
		top: 50px;
		bottom: auto;
		right: 0;
	}
}

/* ==========================================================================
   19. Header hairline
   The reference draws a full-width 1px rule under the header:
     .header-version-1 { border-bottom: 1px solid rgba(255,255,255,.1) }
   Flatsome's own header_divider option renders inside the 1300 container, so the
   rule is set here instead to span the whole viewport like the reference.
   ========================================================================== */

.framex .header-main {
	border-bottom: 1px solid var(--framex-divider);
}

/* Over the hero the header is transparent, so the hairline is white at 10%. */
.framex .transparent .header-main,
.framex .header.transparent .header-main {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   20. Product category page (reference: /services/)
   Page header: 535px tall, 260/150 padding, photo + the same left-dark gradient
   as the hero, 58px white H1 with a breadcrumb under it.
   Grid: 407x451 white cards, radius 20, padding 40, 30px gap, 80x80 yellow icon
   at the top and "Learn More" with the diagonal arrow at the bottom.
   ========================================================================== */

/* --- 20.1 Page header --------------------------------------------------- */

.framex .framex-pagehead .section-bg-overlay {
	background-color: transparent;
	background-image: linear-gradient(
			90deg,
			rgba(24, 24, 24, 0.8) 0%,
			rgba(24, 24, 24, 0.72) 36.01%,
			rgba(0, 0, 0, 0) 63.02%
		),
		linear-gradient(rgba(24, 24, 24, 0.8) 0%, rgba(0, 0, 0, 0) 18.18%);
}

.framex .framex-pagehead__title {
	font-size: 58px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--framex-white);
	margin: 0 0 12px;
}

.framex .framex-crumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	color: var(--framex-white);
}

.framex .framex-crumbs a {
	color: var(--framex-white);
}

.framex .framex-crumbs a:hover {
	color: var(--framex-accent);
}

.framex .framex-crumbs__current {
	color: var(--framex-accent);
}

/* --- 20.2 Category cards ------------------------------------------------ */

.framex .framex-cat-grid .col {
	padding-bottom: 30px;
}

.framex .framex-cat-grid .box-category {
	display: flex;
	flex-direction: column;
	min-height: 451px;
	padding: 40px;
	background-color: var(--framex-white);
	border-radius: var(--framex-radius-card);
	transition: box-shadow var(--framex-ease);
}

.framex .framex-cat-grid .box-category:hover {
	box-shadow: 0 20px 40px rgba(24, 24, 24, 0.08);
}

/* Flatsome's image slot only ever held a WooCommerce placeholder here — the
   photo and the icon are printed by framex_cat_card_media() in functions.php. */
.framex .framex-cat-grid .box-image {
	display: none;
}

/* Photo layer: hidden at rest, fades in over the whole card on hover. */
.framex .framex-cat-grid .col-inner {
	position: relative;
}

.framex .framex-cat-photo {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--framex-radius-card);
	overflow: hidden;
	opacity: 0;
	transition: opacity var(--framex-ease);
	pointer-events: none;
}

.framex .framex-cat-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Scrim so the white label reads on the photo. */
.framex .framex-cat-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(24, 24, 24, 0.55);
}

.framex .framex-cat-grid .col-inner:hover .framex-cat-photo {
	opacity: 1;
}

/* Icon tile, 80x80 as in the reference, sitting above the photo. */
.framex .framex-cat-icon {
	position: absolute;
	top: 40px;
	left: 40px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 10px;
	background-color: var(--framex-accent);
	color: var(--framex-dark);
	transition: background-color var(--framex-ease), color var(--framex-ease);
	pointer-events: none;
}

.framex .framex-cat-grid .col-inner:hover .framex-cat-icon {
	background-color: var(--framex-white);
}

/* Card text sits above the photo and flips to white on hover. */
.framex .framex-cat-grid .box-text {
	position: relative;
	z-index: 2;
}

.framex .framex-cat-grid .col-inner:hover .header-title,
.framex .framex-cat-grid .col-inner:hover .box-text-inner::after {
	color: var(--framex-white);
}

.framex .framex-cat-grid .col-inner:hover .header-title {
	border-bottom-color: var(--framex-divider-dark);
}


/* Title sits at the bottom of the card, above the rule. */
.framex .framex-cat-grid .box-text {
	margin-top: auto;
	padding: 0;
}

.framex .framex-cat-grid .header-title {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
	color: var(--framex-dark);
	margin: 0 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--framex-divider);
}

/* "Learn More" is decorative — the whole card is already the link. */
.framex .framex-cat-grid .box-text-inner::after {
	content: "Learn More";
	display: inline-block;
	font-size: 16px;
	color: var(--framex-dark);
	padding-right: 24px;
	background-image: var(--framex-arrow);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 16px;
	transition: background-position var(--framex-ease);
}

.framex .framex-cat-grid .box-category:hover .box-text-inner::after {
	background-position: right 2px center;
}

.framex .framex-cat-grid a {
	display: block;
	height: 100%;
}

@media (max-width: 849px) {
	.framex .framex-pagehead__title {
		font-size: 32px;
	}

	.framex .framex-cat-grid .box-category {
		min-height: 300px;
		padding: 24px;
	}
}

/* Page header is 260px top / 150px bottom in the reference; Flatsome's section
   padding is a single value, so the bottom is trimmed here (ID-selector rule,
   hence !important — same reason as the footer). */
.framex .framex-pagehead {
	padding-bottom: 150px !important;
}

@media (max-width: 849px) {
	.framex .framex-pagehead {
		padding-bottom: 80px !important;
	}
}

/* Flatsome paints #wrapper and #main white, which covered the cream body on any
   section without its own background — the reference keeps those layers
   transparent so the cream shows and white cards read against it. */
.framex #wrapper,
.framex #main {
	background-color: transparent;
}

/* --- 20.3 Premium Quality (services page) -------------------------------
   Dark section with three 200px round photos, centred title and copy.
   ------------------------------------------------------------------------ */

.framex .framex-quality {
	margin-top: 10px;
}

.framex .framex-quality__img img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
}

.framex .framex-quality__title {
	font-size: 20px;
	font-weight: 400;
	color: var(--framex-white);
	margin: 26px 0 10px;
}

.framex .framex-quality p {
	color: var(--framex-text);
	max-width: 280px;
	margin: 0 auto;
}

.framex .framex-premium .framex-note p,
.framex .framex-premium .framex-note a {
	color: var(--framex-white);
}

.framex .framex-premium .framex-note a:hover {
	color: var(--framex-accent);
}

.framex .framex-premium .framex-score__label {
	color: var(--framex-text);
}

/* The "Learn More" arrow is a background-image, so it needs the white twin when
   the card flips to its photo state. */
.framex .framex-cat-grid .col-inner:hover .box-text-inner::after {
	background-image: var(--framex-arrow-light);
}

/* ==========================================================================
   21. FAQ accordion — matched to the reference
   Reference row: 69px tall, numbered "1. …", a 19px yellow + on the right
   (22px from the edge) that becomes a − when open, and the open row turns dark
   with white text.
   Flatsome ships a chevron in a <button class="toggle"> pinned to the LEFT, so
   the marker is redrawn here rather than restyled.
   ========================================================================== */

.framex .framex-accordion {
	counter-reset: framex-faq;
}

.framex .framex-accordion .accordion-title {
	position: relative;
	counter-increment: framex-faq;
	padding: 22px 60px 22px 24px;
	transition: background-color var(--framex-ease), color var(--framex-ease);
}

.framex .framex-accordion .accordion-title::before {
	content: counter(framex-faq) ". ";
}

/* Flatsome's chevron button becomes the +/- marker. */
.framex .framex-accordion .accordion-title .toggle {
	position: absolute;
	top: 50%;
	right: 22px;
	left: auto;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	opacity: 1;
	color: var(--framex-accent);
}

.framex .framex-accordion .accordion-title .toggle i {
	display: none;
}

.framex .framex-accordion .accordion-title .toggle::before,
.framex .framex-accordion .accordion-title .toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var(--framex-accent);
	transform: translate(-50%, -50%);
	transition: opacity var(--framex-ease), transform var(--framex-ease);
}

/* horizontal bar — always shown */
.framex .framex-accordion .accordion-title .toggle::before {
	width: 19px;
	height: 2px;
}

/* vertical bar — hidden once the row is open, turning + into − */
.framex .framex-accordion .accordion-title .toggle::after {
	width: 2px;
	height: 19px;
}

.framex .framex-accordion .accordion-title.active .toggle::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

/* Open row: dark card, white copy. The panel is the title's next sibling, so no
   :has() is needed. */
.framex .framex-accordion .accordion-title.active,
.framex .framex-accordion .accordion-title.active + .accordion-inner {
	background-color: var(--framex-dark);
	color: var(--framex-white);
}

.framex .framex-accordion .accordion-title.active {
	color: var(--framex-white);
}

.framex .framex-accordion .accordion-title.active + .accordion-inner p {
	color: rgba(255, 255, 255, 0.75);
}

.framex .framex-accordion .accordion-title:hover {
	color: var(--framex-accent);
}

.framex .framex-accordion .accordion-title.active:hover {
	color: var(--framex-white);
}

.framex .framex-accordion .accordion-inner {
	padding: 0 60px 22px 24px;
	transition: background-color var(--framex-ease);
}

/* Footer CTA: the phone/email pair is small-6 in the builder, but the icon plus
   its two lines needs ~250px — it breaks out of a 178px half-column on a phone.
   Stacking them keeps the column setting editable for wider screens. */
@media (max-width: 549px) {
	.framex .framex-footer-cta .col {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* Rating card on a phone (reference: 335x134). The avatar and the text stay on
   one line and only the CTA drops below, still at its own width.
   The 150px basis is what produces that break: 60 + 15 + 150 leaves no room for
   the 126px pill, so it wraps, and the stack then grows into the free space. */
@media (max-width: 549px) {
	.framex .framex-rating {
		flex-wrap: wrap;
		/* the columns stack here, so the card needs the gutter the row gave it */
		margin-bottom: 30px;
	}

	.framex .framex-rating__stack {
		flex: 1 1 150px;
		min-width: 0;
	}
}

/* ==========================================================================
   22. Product detail (reference: /services/casement-windows-installation/)
   1300px row split 433/867, 120px top and bottom, 60px between blocks.
   The aside is sticky at 40px and holds two 388px cards; the main column is
   long-form copy at 46px headings over 16/27.2 body.
   ========================================================================== */

.framex .framex-product__body {
	padding: 120px 0;
}

.framex .framex-product__row {
	max-width: 1300px;
	margin: 0 auto;
}

/* Flatsome's grid gutter is 30px; the reference gap is 45px, so the aside takes
   the difference as its own right padding rather than widening the row. */
.framex .framex-product__aside {
	padding-right: 45px;
}

.framex .framex-product__aside-inner {
	position: sticky;
	top: 40px;
}

.framex .framex-product__main {
	display: flex;
	flex-direction: column;
	gap: 60px;
}

/* --- 22.1 Sidebar cards ------------------------------------------------- */

.framex .framex-side {
	background-color: var(--framex-white);
	border-radius: var(--framex-radius-card);
	overflow: hidden;
}

.framex .framex-side__head {
	margin: 0;
	padding: 20px 30px;
	background-color: var(--framex-accent);
	color: var(--framex-dark);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
}

.framex .framex-side__body {
	padding: 30px;
}

.framex .framex-catlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.framex .framex-catlist__item {
	margin: 0;
	padding: 0 0 20px;
}

/* The rule belongs to the row above it, so the last row has none — matching the
   reference, where the card's bottom padding is the only thing under it. */
.framex .framex-catlist__item + .framex-catlist__item {
	padding-top: 20px;
	border-top: 1px solid rgba(24, 24, 24, 0.1);
}

.framex .framex-catlist__item a {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 15px;
	color: var(--framex-text);
	font-size: 16px;
	line-height: 1.5;
	transition: color var(--framex-ease);
}

.framex .framex-catlist__arrow {
	flex: 0 0 18px;
	color: var(--framex-dark);
	line-height: 0;
	transition: transform var(--framex-ease), color var(--framex-ease);
}

.framex .framex-catlist__item a:hover,
.framex .framex-catlist__item.is-current > a {
	color: var(--framex-dark);
}

.framex .framex-catlist__item a:hover .framex-catlist__arrow {
	transform: translate(2px, -2px);
	color: var(--framex-accent);
}

.framex .framex-catlist__item.is-current > a {
	font-weight: 500;
}

/* --- 22.2 Sidebar contact card ------------------------------------------ */

.framex .framex-side--cta {
	padding: 10px;
}

.framex .framex-side__cta-top {
	padding: 30px 20px 20px;
	text-align: center;
}

.framex .framex-side__logo {
	margin: 0 auto 20px;
}

.framex .framex-side__cta-title {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--framex-dark);
	text-transform: none;
	letter-spacing: 0;
}

/* Same construction as the FAQ card's Call Us: not a .button, so the pill and
   the ripple's stacking context are declared here. */
.framex .framex-side__phone {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 24px;
	overflow: hidden;
	background-color: var(--framex-accent);
	border-radius: var(--framex-radius-pill);
	color: var(--framex-dark);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.framex .framex-side__phone:hover,
.framex .framex-side__phone:focus {
	color: var(--framex-dark);
}

.framex .framex-side__photo {
	border-radius: 10px;
	overflow: hidden;
	margin: 0;
}

/* --- 22.3 Main column --------------------------------------------------- */

.framex .framex-product__cover {
	margin: 0;
	border-radius: var(--framex-radius-card);
	overflow: hidden;
}

.framex .framex-product__cover img {
	display: block;
	width: 100%;
	height: 500px;
	object-fit: cover;
}

.framex .framex-product__buy .price {
	font-size: 30px;
	color: var(--framex-dark);
	margin-bottom: 20px;
}

/* WooCommerce ships the cart button as .button.alt, which Flatsome paints dark.
   The reference has no cart at all, so it follows the site's primary pill. */
.framex .framex-product__buy .single_add_to_cart_button {
	background-color: var(--framex-accent);
	border-color: var(--framex-accent);
	color: var(--framex-dark);
}

/* Long-form copy. The description is the product's own content, so the rhythm
   is set on the container rather than on classes the editor would have to add. */
.framex .framex-product__content {
	font-size: 16px;
	line-height: 1.7;
	color: var(--framex-text);
}

.framex .framex-product__content > *:first-child {
	margin-top: 0;
}

.framex .framex-product__content > *:last-child {
	margin-bottom: 0;
}

.framex .framex-product__content p {
	margin: 0 0 20px;
}

/* Article scale, shared with .post-entry so a product description, a project
   write-up and a blog post all read the same. */
.framex .framex-product__content h1,
.framex .framex-product__content h2,
.framex .framex-product__content h3,
.framex .framex-product__content h4,
.framex .framex-product__content h5,
.framex .framex-product__content h6,
.framex .framex-product__h2 {
	font-weight: 600;
	line-height: 1.25;
	color: var(--framex-dark);
	margin: 1em 0 0.5em;
	text-transform: none;
	letter-spacing: 0;
}

.framex .framex-product__content h1 {
	font-size: 36px;
}

.framex .framex-product__content h2,
.framex .framex-product__h2 {
	font-size: 30px;
}

.framex .framex-product__content h3 {
	font-size: 24px;
	font-weight: 500;
}

.framex .framex-product__content h4 {
	font-size: 20px;
	font-weight: 500;
}

.framex .framex-product__content h5 {
	font-size: 18px;
	font-weight: 500;
}

.framex .framex-product__content h6 {
	font-size: 16px;
	font-weight: 500;
}

/* The FAQ block heading opens its own section rather than following a
   paragraph, so it keeps a flat top margin. */
.framex .framex-product__h2 {
	margin: 0 0 30px;
}

.framex .framex-product__content img {
	border-radius: var(--framex-radius-card);
}

.framex .framex-product__content a {
	color: var(--framex-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.framex .framex-product__content a:hover {
	color: var(--framex-accent);
}

.framex .framex-product__content ul,
.framex .framex-product__content ol {
	margin: 0 0 20px 20px;
}

.framex .framex-product__content li {
	margin-bottom: 8px;
}

.framex .framex-product__content table {
	width: 100%;
	margin-bottom: 20px;
}

.framex .framex-product__content iframe {
	max-width: 100%;
	border-radius: var(--framex-radius-card);
}

/* --- 22.4 Reusable content blocks the reference uses inside the copy ----- */

/* Pill label above a card title, e.g. "Durable" / "Ecofriendly". */
.framex .framex-tag {
	display: inline-block;
	padding: 6px 15px;
	background-color: var(--framex-cream);
	border-radius: var(--framex-radius-pill);
	font-size: 14px;
	line-height: 1.3;
	color: var(--framex-dark);
}

.framex .framex-tag--accent {
	background-color: var(--framex-accent);
	border-radius: 20px;
	padding: 5px 14px;
}

/* White card used for the paired "why choose" blocks. */
.framex .framex-note {
	padding: 20px;
	background-color: var(--framex-white);
	border-radius: 10px;
}

.framex .framex-note__title {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--framex-dark);
	margin: 15px 0 10px;
	text-transform: none;
	letter-spacing: 0;
}

.framex .framex-note p {
	margin: 0;
}

/* Icon + copy, two per row. */
.framex .framex-kf {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.framex .framex-kf__icon {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--framex-accent);
	color: var(--framex-dark);
}

.framex .framex-kf__title {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--framex-dark);
	margin: 0 0 10px;
	text-transform: none;
	letter-spacing: 0;
}

/* Centred card for the "types we offer" trio. */
.framex .framex-type {
	padding: 40px 25px;
	background-color: var(--framex-white);
	border-radius: var(--framex-radius-card);
	text-align: center;
}

.framex .framex-type__icon {
	width: 50px;
	height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--framex-accent);
	color: var(--framex-dark);
}

.framex .framex-type__title {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--framex-dark);
	margin: 40px 0 0;
	text-transform: none;
	letter-spacing: 0;
}

/* --- 22.5 Responsive ---------------------------------------------------- */

@media (max-width: 849px) {
	.framex .framex-product__body {
		padding: 60px 0;
	}

	.framex .framex-product__aside {
		padding-right: 0;
	}

	/* Sticky is pointless once the aside is a full-width band above the copy,
	   and it would pin the cards over the article while scrolling. */
	.framex .framex-product__aside-inner {
		position: static;
	}

	.framex .framex-product__main {
		gap: 40px;
	}

	.framex .framex-product__cover img {
		height: 260px;
	}

	/* The trail is a flex row, so a long post title becomes its own narrow
	   column instead of wrapping. Going back to inline flow lets it run on as
	   ordinary text. */
	.framex .framex-crumbs {
		display: block;
		font-size: 14px;
		line-height: 1.6;
	}

	.framex .framex-crumbs a,
	.framex .framex-crumbs span {
		display: inline;
	}

	.framex .framex-crumbs span[aria-hidden] {
		margin: 0 6px;
	}

	.framex .framex-product__content h1 {
		font-size: 28px;
	}

	.framex .framex-product__content h2,
	.framex .framex-product__h2 {
		font-size: 24px;
	}

	.framex .framex-product__content h3 {
		font-size: 20px;
	}

	.framex .framex-product__content h4 {
		font-size: 18px;
	}

	.framex .framex-product__content h5 {
		font-size: 16px;
	}

	.framex .framex-product__content h6 {
		font-size: 14px;
	}
}

/* ==========================================================================
   23. Blog archive (reference: /blog/)
   Cards are the photo itself: 450px tall, radius 20, darkened to 55% with the
   copy laid over it — glass tag at the top, title and Learn More at the bottom
   above a hairline. Values below are taken from the reference stylesheet.
   ========================================================================== */

.framex .page-blog-archive {
	padding: 120px 0;
}

/* Flatsome opens its blog wrapper with 30px of padding. Now that the header
   floats over the banner, that padding shows as a strip of page background
   above it. Every blog view renders the banner as its first element, so the gap
   is always wrong here. The product template has no such wrapper. */
.framex .blog-wrapper.page-wrapper {
	padding-top: 0;
}

/* Flatsome prints "Category Archives: X" above the loop on term archives. The
   framex-page-header block already carries the h1, so this is a duplicate
   heading, not just a visual one — display:none drops it from the a11y tree
   too, leaving exactly one h1 on the page. */
.framex .archive-page-header {
	display: none;
}

.framex .framex-blog__row {
	max-width: 1300px;
	margin: 0 auto;
}

.framex .framex-blog__col {
	padding-bottom: 0;
}

.framex .page-blog-archive .post-item {
	position: relative;
	min-height: 450px;
	/* the -30px is the card's own bottom margin, so equal-height columns still
	   leave the row gutter between rows */
	height: calc(100% - 30px);
	margin-bottom: 30px;
	border-radius: var(--framex-radius-card);
	overflow: hidden;
}

/* Without a photo there is nothing to write on, so the card inverts. */
.framex .page-blog-archive .post-item.no-image {
	background-color: var(--framex-white);
}

.framex .page-blog-archive .post-featured-image,
.framex .page-blog-archive .post-featured-image figure {
	height: 100%;
	margin: 0;
}

/* brightness(), not an overlay layer: it darkens the photo without washing out
   the colour the way a black scrim does. */
.framex .page-blog-archive .post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(55%);
	transition: transform 0.6s ease-in-out;
}

.framex .page-blog-archive .post-item:hover .post-featured-image img {
	transform: scale(1.06);
}

.framex .page-blog-archive .post-item-body {
	position: absolute;
	inset: 30px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
}

.framex .page-blog-archive .post-item-tag ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.framex .page-blog-archive .post-item-tag li {
	margin: 0;
}

.framex .page-blog-archive .post-item-tag a {
	display: inline-block;
	padding: 6px 16px;
	background-color: var(--framex-divider-dark);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: var(--framex-radius-pill);
	color: var(--framex-white);
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	transition: background-color var(--framex-ease), color var(--framex-ease);
}

.framex .page-blog-archive .post-item.no-image .post-item-tag a {
	background-color: var(--framex-divider);
	color: var(--framex-dark);
}

.framex .page-blog-archive .post-item-tag a:hover {
	background-color: var(--framex-accent);
	color: var(--framex-dark);
}

.framex .page-blog-archive .post-item-content h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--framex-white);
	text-transform: none;
	letter-spacing: 0;
}

.framex .page-blog-archive .post-item.no-image .post-item-content h2 {
	color: var(--framex-dark);
}

.framex .page-blog-archive .post-item-content h2 a {
	color: inherit;
	word-wrap: break-word;
}

.framex .page-blog-archive .post-item-content h2 a:hover {
	color: var(--framex-accent);
}

.framex .page-blog-archive .post-item-btn {
	margin-top: 25px;
	padding-top: 25px;
	border-top: 1px solid var(--framex-divider-dark);
	line-height: 0;
}

.framex .page-blog-archive .post-item.no-image .post-item-btn {
	border-top-color: var(--framex-divider);
}

.framex .page-blog-archive .post-item-btn a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--framex-white);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
}

.framex .page-blog-archive .post-item.no-image .post-item-btn a {
	color: var(--framex-dark);
}

.framex .page-blog-archive .post-item-btn a:hover {
	color: var(--framex-accent);
}

/* The arrow already points up-right, so a 45deg turn lands it horizontal —
   the reference's way of making it read as "go". */
.framex .page-blog-archive .post-item-btn .framex-icon {
	line-height: 0;
	transition: transform var(--framex-ease);
}

.framex .page-blog-archive .post-item-btn a:hover .framex-icon {
	transform: rotate(45deg);
}

/* --- 23.1 Pagination ---------------------------------------------------- */

.framex .framex-blog__pager {
	padding-top: 30px;
	padding-bottom: 0;
}

.framex .framex-blog__pager .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.framex .framex-blog__pager .page-numbers li {
	margin: 0;
}

.framex .framex-blog__pager .page-number,
.framex .framex-blog__pager a.page-numbers,
.framex .framex-blog__pager span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--framex-radius-pill);
	background-color: var(--framex-white);
	color: var(--framex-dark);
	font-size: 16px;
	line-height: 1;
	transition: background-color var(--framex-ease), color var(--framex-ease);
}

.framex .framex-blog__pager .page-number:hover,
.framex .framex-blog__pager a.page-numbers:hover {
	background-color: var(--framex-dark);
	color: var(--framex-white);
}

.framex .framex-blog__pager .page-number.current,
.framex .framex-blog__pager .page-numbers.current {
	background-color: var(--framex-accent);
	color: var(--framex-dark);
}

/* --- 23.2 Responsive ---------------------------------------------------- */

@media (max-width: 1099px) {
	.framex .page-blog-archive .post-item {
		min-height: 380px;
	}
}

@media (max-width: 849px) {
	.framex .page-blog-archive {
		padding: 60px 0;
	}

	.framex .page-blog-archive .post-item {
		min-height: 320px;
	}

	.framex .page-blog-archive .post-item-body {
		inset: 20px;
	}

	.framex .page-blog-archive .post-item-content h2 {
		font-size: 18px;
	}

	.framex .page-blog-archive .post-item-btn {
		margin-top: 15px;
		padding-top: 15px;
	}
}

/* ==========================================================================
   24. Single post (reference: /how-to-choose-the-right-windows-for-your-home/)
   Header carries the title over a date + category line instead of a breadcrumb.
   Body is a 1270px cover image then a 1100px measure — narrower than the 1300
   container, so long articles stay readable.
   Values below come from the reference stylesheet.
   ========================================================================== */

/* --- 24.1 Header meta --------------------------------------------------- */

.framex .post-single-meta ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1;
}

.framex .post-single-meta li {
	display: inline-flex;
	align-items: center;
	margin: 0 15px 0 0;
	font-size: 18px;
	line-height: 1;
	color: var(--framex-white);
}

.framex .post-single-meta li:last-child {
	margin-right: 0;
}

.framex .post-single-meta li a {
	color: inherit;
}

.framex .post-single-meta li a:hover {
	color: var(--framex-accent);
}

.framex .framex-meta__icon {
	display: inline-flex;
	margin-right: 8px;
	line-height: 0;
	color: var(--framex-white);
}

/* --- 24.2 Body ---------------------------------------------------------- */

.framex .page-single-post {
	padding: 120px 0;
}

.framex .framex-single__row {
	max-width: 1300px;
	margin: 0 auto;
}

.framex .framex-single__cover {
	padding-bottom: 0;
}

.framex .post-single-image {
	margin-bottom: 30px;
	overflow: hidden;
}

.framex .post-single-image figure {
	margin: 0;
}

/* The reference leaves the cover unconstrained because every demo photo is
   already 16:9. Real uploads are not, and a portrait shot renders a metre tall
   here, so the ratio is pinned and the photo cropped to it instead. */
.framex .post-single-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--framex-radius-card);
}

/* The measure, not the container: 1100 inside 1300. */
.framex .post-content {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.framex .post-entry {
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--framex-divider);
	font-size: 16px;
	line-height: 1.7;
	color: var(--framex-text);
}

.framex .post-entry::after {
	content: "";
	display: block;
	clear: both;
}

.framex .post-entry p {
	margin-bottom: 20px;
}

.framex .post-entry p:last-child {
	margin-bottom: 0;
}

.framex .post-entry a {
	color: var(--framex-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.framex .post-entry a:hover {
	color: var(--framex-accent);
}

.framex .post-entry h1,
.framex .post-entry h2,
.framex .post-entry h3,
.framex .post-entry h4,
.framex .post-entry h5,
.framex .post-entry h6 {
	margin: 1em 0 0.7em;
	color: var(--framex-dark);
	text-transform: none;
	letter-spacing: 0;
}

.framex .post-entry h1 {
	font-size: 36px;
}

.framex .post-entry h2 {
	font-size: 30px;
}

.framex .post-entry h3 {
	font-size: 24px;
}

.framex .post-entry h4 {
	font-size: 20px;
}

.framex .post-entry h5 {
	font-size: 18px;
}

.framex .post-entry h6 {
	font-size: 16px;
}

.framex .post-entry ul {
	margin: 20px 0;
	padding-left: 20px;
}

.framex .post-entry ol {
	margin: 20px 0;
}

.framex .post-entry ul li,
.framex .post-entry ol li {
	margin-bottom: 15px;
	font-size: 18px;
	line-height: 1.5;
	color: var(--framex-text);
}

.framex .post-entry ol li {
	font-weight: 500;
}

.framex .post-entry ul ul,
.framex .post-entry ul ol,
.framex .post-entry ol ol,
.framex .post-entry ol ul {
	margin-top: 10px;
	margin-bottom: 0;
}

.framex .post-entry img {
	border-radius: var(--framex-radius-card);
}

.framex .post-entry hr {
	border-top: 1px solid var(--framex-divider);
	opacity: 1;
}

.framex .post-entry iframe {
	max-width: 100%;
	border-radius: var(--framex-radius-card);
}

/* Yellow card with the quote mark set into the left gutter. */
.framex .post-entry blockquote,
.framex .framex-product__content blockquote {
	margin: 0 0 30px;
	padding: 30px 30px 30px 90px;
	background-color: var(--framex-accent);
	background-image: var(--framex-quote);
	background-repeat: no-repeat;
	background-position: 30px 30px;
	background-size: 45px;
	border: 0;
	border-radius: var(--framex-radius-card);
	color: var(--framex-dark);
}

.framex .post-entry blockquote p,
.framex .framex-product__content blockquote p {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--framex-dark);
}

.framex .post-entry blockquote p:last-child,
.framex .framex-product__content blockquote p:last-child {
	margin-bottom: 0;
}

.framex .post-entry blockquote cite,
.framex .framex-product__content blockquote cite {
	font-size: 18px;
	color: var(--framex-dark);
}

.framex .post-entry table {
	width: 100%;
	border-top: 1px solid var(--framex-dark);
	border-left: 1px solid var(--framex-dark);
}

/* --- 24.3 Tags and sharing --------------------------------------------- */

.framex .framex-single__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.framex .tag-links {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	font-size: 20px;
	font-weight: 500;
	color: var(--framex-dark);
}

.framex .post-tags .tag-links a {
	display: inline-block;
	padding: 12px 20px;
	background-color: var(--framex-accent);
	border-radius: var(--framex-radius-pill);
	color: var(--framex-dark);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-transform: capitalize;
	transition: background-color var(--framex-ease), color var(--framex-ease);
}

.framex .post-tags .tag-links a:hover {
	background-color: var(--framex-dark);
	color: var(--framex-white);
}

/* Flatsome's [share] emits .social-icons a; the reference styles them as 40px
   accent circles rather than the theme's outlined default. */
/* Stays right even on a post with no tags, where space-between has nothing to
   push against. */
.framex .post-social-sharing {
	margin-left: auto;
}

.framex .post-social-sharing .social-icons a.button {
	width: 40px;
	height: 40px;
	min-height: 0;
	margin: 0 12px 0 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--framex-accent);
	border-color: var(--framex-accent);
	border-radius: 50%;
	color: var(--framex-dark);
	transition: background-color var(--framex-ease), color var(--framex-ease);
}

.framex .post-social-sharing .social-icons a.button:last-child {
	margin-right: 0;
}

.framex .post-social-sharing .social-icons a.button:hover {
	background-color: var(--framex-dark);
	border-color: var(--framex-dark);
	color: var(--framex-white);
}

.framex .post-social-sharing .social-icons a.button i {
	font-size: 18px;
	color: inherit;
}

/* --- 24.4 Responsive ---------------------------------------------------- */

@media (max-width: 849px) {
	.framex .page-single-post {
		padding: 60px 0;
	}

	.framex .post-single-meta li {
		font-size: 15px;
	}

	.framex .post-entry p {
		margin-bottom: 15px;
	}

	.framex .post-entry ul li,
	.framex .post-entry ol li {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.framex .post-entry h1 {
		font-size: 28px;
	}

	.framex .post-entry h2 {
		font-size: 24px;
	}

	.framex .post-entry h3 {
		font-size: 20px;
	}

	.framex .post-entry h4 {
		font-size: 18px;
	}

	.framex .post-entry h5 {
		font-size: 16px;
	}

	.framex .post-entry h6 {
		font-size: 14px;
	}

	/* The quote mark moves above the text — there is no room for a 70px gutter
	   on a phone. */
	.framex .post-entry blockquote,
	.framex .framex-product__content blockquote {
		padding: 60px 20px 20px;
		background-position: 20px 20px;
		background-size: 30px;
		margin-bottom: 20px;
	}

	.framex .post-entry blockquote p,
	.framex .framex-product__content blockquote p {
		font-size: 16px;
	}

	.framex .framex-single__foot {
		align-items: flex-start;
		flex-direction: column;
	}

	.framex .tag-links {
		font-size: 18px;
		gap: 10px;
	}

	.framex .post-tags .tag-links a {
		padding: 12px 15px;
	}
}

/* ==========================================================================
   25. Projects (reference: /projects/ and /projects/<slug>/)
   Cards are a portrait 1/1.22 crop with a scrim across the bottom third and the
   title over it. The single page reuses the product layout and only swaps the
   sidebar card. Values below come from the reference stylesheet.
   ========================================================================== */

/* --- 25.1 Archive cards ------------------------------------------------- */

.framex .framex-projects__row {
	max-width: 1300px;
	margin: 0 auto;
}

.framex .framex-projects__col {
	padding-bottom: 0;
}

.framex .project-item {
	position: relative;
	/* the -30px is the card's own bottom margin, so equal-height columns still
	   leave the row gutter between rows */
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.framex .project-item.no-image {
	background-color: var(--framex-white);
	border-radius: var(--framex-radius-card);
	aspect-ratio: 1 / 1.22;
}

.framex .project-item-image figure {
	display: block;
	margin: 0;
	border-radius: var(--framex-radius-card);
	overflow: hidden;
}

.framex .project-item-image a {
	position: relative;
	display: block;
	border-radius: var(--framex-radius-card);
}

/* A scrim over the bottom third rather than the blog card's flat brightness
   filter — the photo keeps its colour and only the copy area darkens. */
.framex .project-item-image a figure::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 39.2%, rgba(24, 24, 24, 0.8) 100%);
}

.framex .project-item-image a figure img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1.22;
	object-fit: cover;
	border-radius: var(--framex-radius-card);
	transition: transform 0.6s ease-in-out;
}

.framex .project-item:hover .project-item-image a figure img {
	transform: scale(1.06);
}

.framex .project-item-body {
	position: absolute;
	right: 40px;
	bottom: 40px;
	left: 40px;
	z-index: 1;
}

.framex .project-item-content h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--framex-white);
	text-transform: none;
	letter-spacing: 0;
}

.framex .project-item.no-image .project-item-content h2 {
	color: var(--framex-dark);
}

.framex .project-item-content h2 a {
	color: inherit;
}

.framex .project-item-content h2 a:hover {
	color: var(--framex-accent);
}

.framex .project-item-btn {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--framex-divider-dark);
	line-height: 0;
}

.framex .project-item.no-image .project-item-btn {
	border-top-color: var(--framex-divider);
}

.framex .project-item-btn a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--framex-white);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
}

.framex .project-item.no-image .project-item-btn a {
	color: var(--framex-dark);
}

.framex .project-item-btn a:hover {
	color: var(--framex-accent);
}

.framex .project-item-btn .framex-icon {
	line-height: 0;
	transition: transform var(--framex-ease);
}

.framex .project-item-btn a:hover .framex-icon {
	transform: rotate(45deg);
}

/* --- 25.2 Project Information card -------------------------------------- */

.framex .framex-projinfo {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The value is pushed to the far edge, so the row is a three-part flex line
   rather than a definition list. */
.framex .framex-projinfo__row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--framex-divider);
}

.framex .framex-projinfo__icon {
	display: inline-flex;
	flex: 0 0 20px;
	color: var(--framex-accent);
	line-height: 0;
}

.framex .framex-projinfo__label {
	font-size: 16px;
	font-weight: 400;
	color: var(--framex-dark);
}

.framex .framex-projinfo__value {
	margin-left: auto;
	font-size: 16px;
	color: var(--framex-text);
	text-align: right;
}

.framex .framex-projinfo__share {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* Flatsome's [share] renders outlined buttons; here they are small flat glyphs
   sitting on the card, matching the reference. */
.framex .framex-projinfo__share .social-icons a.button {
	width: 30px;
	height: 30px;
	min-height: 0;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--framex-dark);
	transition: color var(--framex-ease);
}

.framex .framex-projinfo__share .social-icons a.button:hover {
	background-color: transparent;
	color: var(--framex-accent);
}

.framex .framex-projinfo__share .social-icons a.button i {
	font-size: 16px;
	color: inherit;
}

/* --- 25.3 Responsive ---------------------------------------------------- */

@media (max-width: 849px) {
	.framex .project-item-image a figure img,
	.framex .project-item.no-image {
		aspect-ratio: 1 / 1.1;
	}

	.framex .project-item-body {
		right: 30px;
		bottom: 30px;
		left: 30px;
	}

	.framex .project-item-content h2 {
		font-size: 18px;
	}

	.framex .project-item-btn {
		margin-top: 15px;
		padding-top: 15px;
	}
}

/* ==========================================================================
   26. About page — the three sections the home page does not already carry
   ========================================================================== */

/* --- 26.1 Our Approach -------------------------------------------------- */

/* Plain variant of the accordion: no card, no dark open state — just rules
   between the rows. The +/- marker from section 21 carries over unchanged. */
.framex .framex-accordion--plain .accordion-item {
	background-color: transparent;
	border-radius: 0;
	margin-bottom: 0;
	overflow: visible;
}

.framex .framex-accordion--plain .accordion-title {
	padding: 20px 40px 20px 0;
	border-top: 1px solid var(--framex-divider);
	font-size: 18px;
}

.framex .framex-accordion--plain .accordion-title .toggle {
	right: 0;
}

/* The counter belongs to the plain list, so numbering is dropped here. */
.framex .framex-accordion--plain .accordion-title::before {
	content: none;
}

.framex .framex-accordion--plain .accordion-title.active,
.framex .framex-accordion--plain .accordion-title.active + .accordion-inner {
	background-color: transparent;
	color: var(--framex-dark);
}

.framex .framex-accordion--plain .accordion-title.active + .accordion-inner p {
	color: var(--framex-text);
}

.framex .framex-accordion--plain .accordion-inner {
	padding: 0 40px 20px 0;
}

.framex .framex-approach__media {
	position: relative;
}

.framex .framex-approach__photo {
	border-radius: var(--framex-radius-card);
	overflow: hidden;
	margin: 0;
}

/* Sits over the bottom-left of the photo, overhanging it slightly. */
.framex .framex-approach__rating {
	position: absolute;
	left: 30px;
	bottom: 30px;
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px 20px;
	background-color: var(--framex-white);
	border-radius: var(--framex-radius-card);
	box-shadow: 0 20px 40px rgba(24, 24, 24, 0.08);
}

.framex .framex-approach__avatars {
	display: inline-flex;
	align-items: center;
}

/* -10px each is what makes the row read as a stack rather than a list. */
.framex .framex-approach__avatars img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--framex-white);
	margin-left: -10px;
}

.framex .framex-approach__avatars img:first-child {
	margin-left: 0;
}

.framex .framex-approach__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: -10px;
	border-radius: 50%;
	border: 2px solid var(--framex-white);
	background-color: var(--framex-accent);
	color: var(--framex-dark);
	font-size: 18px;
	line-height: 1;
}

.framex .framex-approach__body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
}

.framex .framex-approach__label {
	flex: 1 1 100%;
	font-size: 16px;
	line-height: 1.5;
	color: var(--framex-text);
}

/* --- 26.2 Key Fact ------------------------------------------------------ */

.framex .framex-skills {
	margin: 30px 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Title left, percentage right, bar across the full width beneath — a
   two-column grid rather than three stacked rows. */
.framex .framex-skill {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 10px;
}

.framex .framex-skill__title {
	font-size: 18px;
	color: var(--framex-dark);
}

.framex .framex-skill__pct {
	font-size: 18px;
	color: var(--framex-dark);
	text-align: right;
}

.framex .framex-skill__bar {
	grid-column: 1 / -1;
	display: block;
	height: 15px;
	border-radius: 10px;
	background-color: var(--framex-white);
	overflow: hidden;
}

.framex .framex-skill__track {
	display: block;
	height: 100%;
	border-radius: 10px;
	background-color: var(--framex-accent);
}

/* Third variant of .framex-stats, alongside --stacked and --three. The
   modifier is required: the base classes are already in use on the home page,
   and unscoped rules here were reaching those counters too. */
.framex .framex-stats--cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.framex .framex-stats--cards .framex-stat {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-height: 265px;
	padding: 30px;
	background-color: var(--framex-white);
	border-radius: var(--framex-radius-card);
}

.framex .framex-stats--cards .framex-stat__label {
	margin-top: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--framex-text);
}

/* margin-bottom:auto is what pins the description to the bottom edge while the
   label and number stay together at the top, 10px apart. */
.framex .framex-stats--cards .framex-stat__num {
	display: block;
	margin-top: 10px;
	margin-bottom: auto;
	font-size: 46px;
	font-weight: 400;
	line-height: 1;
	color: var(--framex-dark);
}

.framex .framex-stats--cards .framex-stat__desc {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--framex-text);
}


/* --- 26.3 Get Started --------------------------------------------------- */

.framex .framex-cta {
	position: relative;
	overflow: hidden;
}

/* Decorative only: they bleed past the section edges and must never intercept
   a click on the copy sitting over them. */
.framex .framex-cta__deco {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	max-width: none;
}

.framex .framex-cta__deco--left {
	top: -85px;
	left: 5px;
	width: 375px;
}

.framex .framex-cta__deco--right {
	bottom: -85px;
	right: 5px;
	width: 440px;
}

.framex .framex-cta .section-content {
	position: relative;
	z-index: 1;
}

/* Measured on the reference: the title is held to 680px so it breaks onto two
   lines and stays clear of the door and window art either side of it. */
.framex .framex-cta .framex-title {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.framex .framex-cta__lead {
	max-width: 650px;
	margin: 0 auto 20px;
	color: var(--framex-white);
}

.framex .framex-cta__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 30px;
	color: var(--framex-white);
	font-size: 16px;
}

.framex .framex-cta__score {
	font-weight: 500;
}

.framex .framex-cta__reviews {
	color: rgba(255, 255, 255, 0.75);
}

/* --- 26.4 Responsive ---------------------------------------------------- */

@media (max-width: 1099px) {
	.framex .framex-cta__deco {
		display: none;
	}
}

@media (max-width: 849px) {
	.framex .framex-approach__rating {
		left: 15px;
		right: 15px;
		bottom: 15px;
		padding: 12px 15px;
	}

	.framex .framex-stats--cards {
		grid-template-columns: 1fr;
	}

	.framex .framex-stats--cards .framex-stat {
		min-height: 0;
		gap: 20px;
	}

	.framex .framex-stats--cards .framex-stat__num {
		font-size: 36px;
	}
}

/* ==========================================================================
   27. Contact page
   The contact block itself is the home page's, minus its background. Only the
   office map is new: full container width, 600px tall, same 20px card radius.
   ========================================================================== */

/* The contact block's colours now live with the block itself (section 6.12),
   gated on .dark, so the light placement needs no overrides here. */

.framex .framex-office__map {
	border-radius: var(--framex-radius-card);
	overflow: hidden;
	line-height: 0;
}

.framex .framex-office__map iframe {
	display: block;
	width: 100%;
	height: 600px;
	border: 0;
}

@media (max-width: 849px) {
	.framex .framex-office__map iframe {
		height: 320px;
	}
}

/* ==========================================================================
   28. Mobile menu panel
   ========================================================================== */

/* Flatsome ships the off-canvas panel at 95% white. Over the hero photo the
   image reads straight through the menu, so it is made opaque.

   Scoped to -left/-right the way Flatsome scopes its own: the theme puts a bare
   `off-canvas` class on every data-open popup, so matching that alone painted a
   full-width white slab behind centred lightboxes too. */
.framex .off-canvas-left .mfp-content,
.framex .off-canvas-right .mfp-content {
	background-color: var(--framex-white);
}

/* ==========================================================================
   30. Shop archive
   Left sidebar of cards reusing the product page's .framex-side chrome, and a
   bespoke product card (woocommerce/content-product.php) rather than Flatsome's
   box markup.
   ========================================================================== */

.framex.woocommerce .category-page-row {
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
	padding: 80px 0 120px;
}

/* The banner already carries a breadcrumb and a title. */
.framex.woocommerce .shop-page-title,
.framex.woocommerce .woocommerce-breadcrumb {
	display: none;
}

.framex .framex-shop__aside {
	padding-right: 40px;
}

/* --- 30.1 Toolbar ------------------------------------------------------- */

.framex .framex-shopbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 30px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--framex-divider);
}

/* The category pills duplicate the sidebar list on the desktop layout, so they
   only appear once the sidebar has dropped below the grid. */
.framex .framex-shopbar__cats {
	display: none;
}

.framex .framex-shopbar__tools {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

.framex .framex-shopbar__tools .woocommerce-result-count {
	margin: 0;
	font-size: 15px;
	color: var(--framex-text);
}

.framex .framex-shopbar__tools .woocommerce-ordering select {
	height: 44px;
	margin: 0;
	padding: 0 38px 0 18px;
	background-color: var(--framex-white);
	border: 0;
	border-radius: var(--framex-radius-pill);
	box-shadow: none;
	color: var(--framex-dark);
	font-size: 15px;
}

/* --- 30.2 Product card -------------------------------------------------- */

.framex.woocommerce .products.row {
	margin-left: -15px;
	margin-right: -15px;
}

.framex.woocommerce .products .framex-card-col {
	padding: 0 15px 30px;
}

.framex.woocommerce .products .framex-card-col > .col-inner {
	height: 100%;
}

.framex .framex-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--framex-white);
	border-radius: var(--framex-radius-card);
	overflow: hidden;
	color: var(--framex-dark);
	transition: box-shadow var(--framex-ease), transform var(--framex-ease);
}

.framex .framex-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px rgba(24, 24, 24, 0.1);
	color: var(--framex-dark);
}

.framex .framex-card__media {
	position: relative;
	overflow: hidden;
}

/* A fixed ratio is what makes the grid line up: catalogue photos run from tall
   hinge shots to wide facade shots. */
.framex .framex-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.6s ease-in-out;
}

.framex .framex-card:hover .framex-card__media img {
	transform: scale(1.06);
}

/* Glass pill over the photo, the same treatment as the blog card's tag. */
.framex .framex-card__tag {
	position: absolute;
	top: 16px;
	left: 16px;
	max-width: calc(100% - 76px);
	padding: 6px 14px;
	background-color: rgba(24, 24, 24, 0.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: var(--framex-radius-pill);
	color: var(--framex-white);
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.framex .framex-card__sale {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 6px 12px;
	background-color: var(--framex-accent);
	border-radius: var(--framex-radius-pill);
	color: var(--framex-dark);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}

/* Sits in the corner of the photo and rises into place on hover. */
.framex .framex-card__go {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--framex-accent);
	color: var(--framex-dark);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--framex-ease), transform var(--framex-ease);
}

.framex .framex-card:hover .framex-card__go {
	opacity: 1;
	transform: translateY(0);
}

.framex .framex-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 22px 22px;
}

/* Two lines then ellipsis: product names here run long, and a ragged card
   bottom is what made the grid look untidy. */
.framex .framex-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--framex-dark);
	text-transform: none;
	letter-spacing: 0;
	transition: color var(--framex-ease);
}

.framex .framex-card:hover .framex-card__title {
	color: var(--framex-accent);
}

/* margin-top:auto pins the row to the bottom, so prices line up across a row
   whatever the title length. */
.framex .framex-card__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--framex-divider);
}

.framex .framex-card__price {
	font-size: 18px;
	font-weight: 500;
	color: var(--framex-dark);
}

.framex .framex-card__price.is-ask {
	font-size: 15px;
	font-weight: 400;
	color: var(--framex-text);
}

.framex .framex-card__price del {
	margin-right: 6px;
	font-size: 14px;
	font-weight: 400;
	color: var(--framex-text);
}

.framex .framex-card__price ins {
	text-decoration: none;
}

.framex .framex-card__more {
	flex: 0 0 auto;
	font-size: 14px;
	color: var(--framex-text);
	transition: color var(--framex-ease);
}

.framex .framex-card:hover .framex-card__more {
	color: var(--framex-dark);
}

/* --- 30.3 Sidebar lists ------------------------------------------------- */

.framex .framex-catlist__count {
	flex: 0 0 auto;
	min-width: 26px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 7px;
	background-color: var(--framex-cream);
	border-radius: var(--framex-radius-pill);
	font-size: 12px;
	color: var(--framex-text);
	transition: background-color var(--framex-ease), color var(--framex-ease);
}

.framex .framex-catlist__item.is-current > a .framex-catlist__count,
.framex .framex-catlist__item a:hover .framex-catlist__count {
	background-color: var(--framex-accent);
	color: var(--framex-dark);
}

.framex .framex-catlist__sub {
	margin: 14px 0 0;
	padding: 0 0 0 14px;
	border-left: 2px solid var(--framex-divider);
	list-style: none;
}

.framex .framex-catlist__sub .framex-catlist__item {
	padding: 0 0 12px;
}

.framex .framex-catlist__sub .framex-catlist__item + .framex-catlist__item {
	padding-top: 12px;
	border-top: 0;
}

.framex .framex-catlist__sub .framex-catlist__label {
	font-size: 15px;
}

.framex .framex-plist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.framex .framex-plist__item {
	margin: 0;
	padding: 0 0 16px;
}

.framex .framex-plist__item + .framex-plist__item {
	padding-top: 16px;
	border-top: 1px solid var(--framex-divider);
}

.framex .framex-plist__item a {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--framex-dark);
}

.framex .framex-plist__thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
}

.framex .framex-plist__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.framex .framex-plist__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.framex .framex-plist__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.4;
	transition: color var(--framex-ease);
}

.framex .framex-plist__item a:hover .framex-plist__title {
	color: var(--framex-accent);
}

.framex .framex-plist__price {
	font-size: 14px;
	color: var(--framex-text);
}

/* --- 30.4 Pagination ---------------------------------------------------- */

.framex.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.framex.woocommerce nav.woocommerce-pagination li {
	margin: 0;
	border: 0;
}

.framex.woocommerce nav.woocommerce-pagination a.page-number,
.framex.woocommerce nav.woocommerce-pagination span.page-number,
.framex.woocommerce nav.woocommerce-pagination a.page-numbers,
.framex.woocommerce nav.woocommerce-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--framex-radius-pill);
	background-color: var(--framex-white);
	color: var(--framex-dark);
	font-size: 16px;
	line-height: 1;
	transition: background-color var(--framex-ease), color var(--framex-ease);
}

.framex.woocommerce nav.woocommerce-pagination a.page-number:hover,
.framex.woocommerce nav.woocommerce-pagination a.page-numbers:hover {
	background-color: var(--framex-dark);
	color: var(--framex-white);
}

.framex.woocommerce nav.woocommerce-pagination .page-number.current,
.framex.woocommerce nav.woocommerce-pagination .page-numbers.current {
	background-color: var(--framex-accent);
	color: var(--framex-dark);
}

/* --- 30.5 Responsive ---------------------------------------------------- */

@media (max-width: 849px) {
	.framex.woocommerce .category-page-row {
		padding: 40px 0 60px;
	}

	.framex .framex-shop__aside {
		padding-right: 0;
	}

	/* With the sidebar stacked under the grid its category card is a long way
	   from the products, so the pills come back at the top. */
	.framex .framex-shopbar__cats {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: 100%;
	}

	.framex .framex-chip {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 8px 14px;
		background-color: var(--framex-white);
		border-radius: var(--framex-radius-pill);
		color: var(--framex-dark);
		font-size: 14px;
		line-height: 1.2;
	}

	.framex .framex-chip.is-current {
		background-color: var(--framex-accent);
	}

	.framex .framex-chip__count {
		font-size: 12px;
		opacity: 0.55;
	}

	.framex .framex-shopbar__tools {
		margin-left: 0;
		flex-wrap: wrap;
	}

	.framex .framex-card__body {
		padding: 14px 16px 16px;
	}

	.framex .framex-card__title {
		font-size: 15px;
		margin-bottom: 12px;
	}

	.framex .framex-card__more {
		display: none;
	}

	.framex .framex-card__go {
		opacity: 1;
		transform: none;
		width: 36px;
		height: 36px;
	}

	/* Two cards to a row leaves the pill about 90px, which truncates every
	   category name to "Cửa N…". The pills above the grid already say which
	   category is being viewed. */
	.framex .framex-card__tag {
		display: none;
	}
}

/* ==========================================================================
   31. Product enquiry
   The catalogue is quote-based, so the product page offers a form and a phone
   number where a shop would put a cart.
   ========================================================================== */

.framex .framex-product__cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 24px;
	padding: 24px;
	background-color: var(--framex-white);
	border-radius: var(--framex-radius-card);
}

.framex .framex-product__price {
	font-size: 30px;
	font-weight: 500;
	line-height: 1;
	color: var(--framex-dark);
}

.framex .framex-product__price del {
	margin-right: 8px;
	font-size: 20px;
	font-weight: 400;
	color: var(--framex-text);
}

.framex .framex-product__price ins {
	text-decoration: none;
}

.framex .framex-product__cta-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-left: auto;
}

/* Neither is a .button, so the pill and the ripple's stacking context are
   declared here — same construction as the FAQ card's Call Us. */
.framex .framex-product__quote,
.framex .framex-product__call {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding: 0 26px;
	overflow: hidden;
	border-radius: var(--framex-radius-pill);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.framex .framex-product__quote {
	background-color: var(--framex-accent);
	color: var(--framex-dark);
}

.framex .framex-product__call {
	background-color: var(--framex-cream);
	color: var(--framex-dark);
}

.framex .framex-product__quote:hover,
.framex .framex-product__quote:focus,
.framex .framex-product__call:hover,
.framex .framex-product__call:focus {
	color: var(--framex-dark);
}

/* --- 31.1 The lightbox -------------------------------------------------- */

.framex .framex-quote.lightbox-content {
	border-radius: var(--framex-radius-card);
}

.framex .framex-quote__title {
	margin: 0 0 8px;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--framex-dark);
	text-transform: none;
	letter-spacing: 0;
}

.framex .framex-quote__lead {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--framex-text);
}

/* The form is the same CF7 as the contact section, which is styled for the
   white card there; inside the lightbox it needs the cream fields back. */
.framex .framex-quote input[type="text"],
.framex .framex-quote input[type="email"],
.framex .framex-quote input[type="tel"],
.framex .framex-quote textarea {
	background-color: var(--framex-cream);
	border: 0;
	box-shadow: none;
	border-radius: 12px;
}

@media (max-width: 849px) {
	.framex .framex-product__cta {
		padding: 18px;
		gap: 14px;
	}

	.framex .framex-product__cta-actions {
		margin-left: 0;
		width: 100%;
	}

	.framex .framex-product__quote,
	.framex .framex-product__call {
		flex: 1 1 100%;
		justify-content: center;
	}

	.framex .framex-quote__title {
		font-size: 24px;
	}
}

/* ==========================================================================
   32. Company details in the footer
   ========================================================================== */

.framex .framex-orginfo {
	margin: 20px 0;
	padding: 0;
	list-style: none;
}

.framex .framex-orginfo li {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--framex-white);
}

/* The label is the quiet half — it names the value under it rather than
   competing with it. */
.framex .framex-orginfo strong {
	display: block;
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--framex-accent);
}

.framex .framex-orginfo span {
	color: rgba(255, 255, 255, 0.8);
}

/* Same detail list on the contact page, where it sits on the light ground. */
.framex .framex-orgcard {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.framex .framex-orgcard li {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--framex-dark);
}

.framex .framex-orgcard strong {
	display: block;
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--framex-text);
}

.framex .framex-orgcard a {
	color: var(--framex-dark);
	transition: color var(--framex-ease);
}

.framex .framex-orgcard a:hover {
	color: var(--framex-accent);
}

/* ==========================================================================
   29. Header on narrow desktops
   Between the mobile breakpoint and 1200px the eight menu labels and the
   hotline button have to share a shrinking row. Must stay last in the file:
   sections 7 and 13 also target .header-button .button, and equal specificity
   means source order decides.
   ========================================================================== */

/* Flatsome swaps to the off-canvas menu at 850px, which suited five short
   English labels. Seven Vietnamese ones plus the hotline button and a 170px
   logo need about 1024px on one row; below that the labels shrink until their
   dropdown carets wrap onto a second line, and the menu starts to reach the
   logo. Moving the swap up is the honest fix — shrinking type further only
   makes it unreadable.

   The four columns are Flatsome's own: it renders a desktop pair marked
   hide-for-medium and a mobile pair marked show-for-medium, and toggles between
   them by display. */
@media (max-width: 1024px) {
	.framex .header-main .flex-row > .flex-col.hide-for-medium {
		display: none !important;
	}

	.framex .header-main .flex-row > .flex-col.show-for-medium {
		display: flex !important;
	}
}

/* Just above the swap the row is still tight, so the gutters close up first. */
@media (max-width: 1200px) {
	.framex .header-nav-main > li > a {
		padding-left: 4px;
		padding-right: 4px;
		font-size: 15px;
	}

	.framex .header-nav .header-button .button {
		padding: 12px 18px;
		font-size: 15px;
		gap: 8px;
	}
}