/* ==========================================================================
PineSucceed site styles
Cascade layers, lowest priority first:
vendor Bootstrap 5.0.1 and Font Awesome Free 6.5.0
base element defaults the design is built on
components page and component styles
responsive fluid type scale and small-screen fixes (last, so it wins)
Unlayered rules (fonts, phone input, body, headings, scrollbar) and the
Swiper 4.2.0 stylesheet on the About page take priority over the layers.
Bootstrap utilities are used in the markup wherever they match the design
exactly; the component rules below cover everything else.
========================================================================== */
@layer vendor, base, components, responsive;
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css") layer(vendor);
@import url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.0/css/all.min.css") layer(vendor);
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css") layer(vendor);
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css") layer(vendor);
@import url("https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/css/intlTelInput.min.css") layer(vendor);
/* Swiper stays unlayered, as in the reference pages that link it before site.css,
so it takes priority over the layered component styles. */
@import url("https://cdn.jsdelivr.net/npm/swiper@4.2.0/dist/css/swiper.min.css");
/* ==========================================================================
1. Fonts & vendor styles
========================================================================== */
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/2c55a0e60120577a-s.woff2") format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/9c72aa0f40e4eef8-s.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/ad66f9afd8947f86-s.woff2") format("woff2");
unicode-range: U+1F??;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/5476f68d60460930-s.woff2") format("woff2");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/2bbe8d2671613f1f-s.woff2") format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/1bffadaabf893a1e-s.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/83afe278b6a6bb3c-s.p.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/2c55a0e60120577a-s.woff2") format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/9c72aa0f40e4eef8-s.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/ad66f9afd8947f86-s.woff2") format("woff2");
unicode-range: U+1F??;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/5476f68d60460930-s.woff2") format("woff2");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/2bbe8d2671613f1f-s.woff2") format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/1bffadaabf893a1e-s.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/83afe278b6a6bb3c-s.p.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/2c55a0e60120577a-s.woff2") format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/9c72aa0f40e4eef8-s.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/ad66f9afd8947f86-s.woff2") format("woff2");
unicode-range: U+1F??;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/5476f68d60460930-s.woff2") format("woff2");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/2bbe8d2671613f1f-s.woff2") format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/1bffadaabf893a1e-s.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/83afe278b6a6bb3c-s.p.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/2c55a0e60120577a-s.woff2") format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/9c72aa0f40e4eef8-s.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/ad66f9afd8947f86-s.woff2") format("woff2");
unicode-range: U+1F??;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/5476f68d60460930-s.woff2") format("woff2");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/2bbe8d2671613f1f-s.woff2") format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/1bffadaabf893a1e-s.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/83afe278b6a6bb3c-s.p.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/2c55a0e60120577a-s.woff2") format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/9c72aa0f40e4eef8-s.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/ad66f9afd8947f86-s.woff2") format("woff2");
unicode-range: U+1F??;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/5476f68d60460930-s.woff2") format("woff2");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/2bbe8d2671613f1f-s.woff2") format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/1bffadaabf893a1e-s.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/83afe278b6a6bb3c-s.p.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Fraunces;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/1e219c03c996efbd-s.woff2") format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Fraunces;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/b35b0dbffda7f2c4-s.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Fraunces;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/03bda585a99c6450-s.p.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Fraunces;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/1e219c03c996efbd-s.woff2") format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Fraunces;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/b35b0dbffda7f2c4-s.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Fraunces;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/03bda585a99c6450-s.p.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Fraunces;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/1e219c03c996efbd-s.woff2") format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Fraunces;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/b35b0dbffda7f2c4-s.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Fraunces;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/03bda585a99c6450-s.p.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Fraunces;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/1e219c03c996efbd-s.woff2") format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Fraunces;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/b35b0dbffda7f2c4-s.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Fraunces;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/03bda585a99c6450-s.p.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Phone number input (country select + flag) */
:root {
--PhoneInput-color--focus: #03b2cb;
--PhoneInputInternationalIconPhone-opacity: .8;
--PhoneInputInternationalIconGlobe-opacity: .65;
--PhoneInputCountrySelect-marginRight: .35em;
--PhoneInputCountrySelectArrow-width: .3em;
--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
--PhoneInputCountrySelectArrow-borderWidth: 1px;
--PhoneInputCountrySelectArrow-opacity: .45;
--PhoneInputCountrySelectArrow-color: currentColor;
--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
--PhoneInputCountrySelectArrow-transform: rotate(45deg);
--PhoneInputCountryFlag-aspectRatio: 1.5;
--PhoneInputCountryFlag-height: 1em;
--PhoneInputCountryFlag-borderWidth: 1px;
--PhoneInputCountryFlag-borderColor: #00000080;
--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
--PhoneInputCountryFlag-backgroundColor--loading: #0000001a;
}
.PhoneInput {
align-items: center;
display: flex;
}
.PhoneInputInput {
flex: 1;
min-width: 0;
}
.PhoneInputCountryIcon {
width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
height: var(--PhoneInputCountryFlag-height);
}
.PhoneInputCountryIcon--square {
width: var(--PhoneInputCountryFlag-height);
}
.PhoneInputCountryIcon--border {
background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),
inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
}
.PhoneInputCountryIconImg {
width: 100%;
height: 100%;
display: block;
}
.PhoneInputInternationalIconPhone {
opacity: var(--PhoneInputInternationalIconPhone-opacity);
}
.PhoneInputInternationalIconGlobe {
opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}
.PhoneInputCountry {
margin-right: var(--PhoneInputCountrySelect-marginRight);
align-self: stretch;
align-items: center;
display: flex;
position: relative;
}
.PhoneInputCountrySelect {
z-index: 1;
opacity: 0;
cursor: pointer;
border: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.PhoneInputCountrySelect[disabled], .PhoneInputCountrySelect[readonly] {
cursor: default;
}
.PhoneInputCountrySelectArrow {
content: "";
width: var(--PhoneInputCountrySelectArrow-width);
height: var(--PhoneInputCountrySelectArrow-width);
margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
border-style: solid;
border-color: var(--PhoneInputCountrySelectArrow-color);
border-top-width: 0;
border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
border-left-width: 0;
border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
transform: var(--PhoneInputCountrySelectArrow-transform);
opacity: var(--PhoneInputCountrySelectArrow-opacity);
display: block;
}
.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
opacity: 1;
color: var(--PhoneInputCountrySelectArrow-color--focus);
}
.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),
inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
}
.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
opacity: 1;
color: var(--PhoneInputCountrySelectArrow-color--focus);
}
/* Phone input inside the consultation forms */
.custom-phone-input {
align-items: center;
width: 100%;
display: flex;
}
.custom-phone-input .PhoneInputCountry {
align-items: center;
margin-right: .5rem;
display: flex;
}
.custom-phone-input .PhoneInputCountrySelectArrow {
margin-left: .3rem;
margin-right: .5rem;
opacity: 1 !important;
border-color: #d61a2c !important;
}
.custom-phone-input .PhoneInputInput {
color: #111;
background: none;
width: 100%;
font-size: .875rem;
border: none !important;
outline: none !important;
}
.custom-phone-input {
align-items: center;
gap: 10px;
display: flex;
}
.custom-phone-input .PhoneInputInput {
color: #000;
background: none;
border: none;
outline: none;
width: 100%;
}
.custom-phone-input .PhoneInputInput::placeholder {
color: #ffffffb3;
}
.custom-phone-input .PhoneInputInput:focus {
outline: none;
}
.custom-phone-input .PhoneInputCountrySelect {
color: #000;
background: none;
}
.custom-phone-input .PhoneInputCountrySelectArrow {
color: #fff;
opacity: 1;
}
.homeContactInputText input {
color: #fff !important;
}
/* ==========================================================================
2. Site-wide rules
========================================================================== */
:root {
--background: #ffffff;
--foreground: #171717;
/* Brand colors */
--primary: #003466;
--primary-dark: #003466;
--ink: #3d3d3d;
--ink-strong: #0b1c30;
--body: #423e3e;
--border: #c6c6cd;
--tint: #f6f6f6;
--red:#fe1718;
/* Fonts */
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Page side gutter: lines content up with the header logo and Contact Us button. */
--page-gutter: 1.25rem;
/* Scrollbar */
--scrollbar-width: 10px;
--scrollbar-track: #f5f5f5;
--scrollbar-thumb: #003466;
--scrollbar-thumb-hover: #003466;
}
@media (min-width: 768px) {
:root {
--page-gutter: 2rem;
}
}
@media (min-width: 1024px) {
:root {
--page-gutter: 3rem;
}
}
@media (min-width: 1280px) {
:root {
--page-gutter: 3rem;
}
}
@media (min-width: 1536px) {
:root {
--page-gutter: 3.5rem;
}}
@media (min-width: 1920px) {
:root {
--page-gutter: 6.5rem;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-body) !important;
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display) !important;
}
/* Scrollbar */
html::-webkit-scrollbar,
*::-webkit-scrollbar {
width: var(--scrollbar-width);
height: var(--scrollbar-width);
}
html::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
html::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 10px;
border: 2px solid var(--scrollbar-track);
transition: background 0.3s ease;
}
html::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}
/* AI services tab list: slim scrollbar with no arrow buttons. scrollbar-color
is inherited from body, and while it is set Chrome ignores every
::-webkit-scrollbar rule (and draws the arrows), so reset it here. */
.ai-lifecycle-tabs--scroll {
scrollbar-color: auto;
scrollbar-width: auto;
}
.ai-lifecycle-tabs--scroll::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.ai-lifecycle-tabs--scroll::-webkit-scrollbar-thumb {
border: 0;
}
.ai-lifecycle-tabs--scroll::-webkit-scrollbar-button,
.ai-lifecycle-tabs--scroll::-webkit-scrollbar-button:single-button,
.ai-lifecycle-tabs--scroll::-webkit-scrollbar-button:vertical:decrement,
.ai-lifecycle-tabs--scroll::-webkit-scrollbar-button:vertical:increment {
display: none;
width: 0;
height: 0;
background: none;
border: 0;
}
/* Project services scrollbar */
.project-development-services-scroll::-webkit-scrollbar-button,
.project-development-services-scroll::-webkit-scrollbar-button:single-button {
display: none;
height: 0;
width: 0;
}
/* About page slider (Swiper 4.2.0): let the page scroll vertically while swiping sideways */
.swiper-container-horizontal {
touch-action: pan-y;
}
/* Animations */
@keyframes slide-up-fade {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fade-slide-x {
from {
opacity: 0;
transform: translateX(16px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* ==========================================================================
3. Base layer
Element defaults the design is built on. They sit above Bootstrap's
Reboot (layer "vendor") and below the component rules.
========================================================================== */
@layer base {
*,
::before,
::after,
::backdrop,
::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
:root {
/* Anchor jumps stop below the sticky header. */
scroll-padding-top: 80px;
}
/* Lenis smooth scrolling (js/components/smooth-scroll.js) */
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--font-body);
-webkit-tap-highlight-color: transparent;
}
body {
line-height: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
a,
a:hover {
color: inherit;
text-decoration: inherit;
}
b,
strong {
font-weight: bolder;
}
small {
font-size: 80%;
}
hr {
height: 0;
color: inherit;
background-color: transparent;
border-top-width: 1px;
opacity: 1;
}
ol,
ul,
menu {
list-style: none;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
img,
video {
max-width: 100%;
height: auto;
}
img {
color: transparent;
}
label {
display: inline;
}
button,
input,
select,
optgroup,
textarea,
::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
button,
input:where([type="button"], [type="reset"], [type="submit"]),
::file-selector-button {
appearance: button;
}
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
cursor: revert;
}
button:focus:not(:focus-visible) {
outline: revert;
}
textarea {
resize: vertical;
}
::placeholder {
opacity: 1;
color: color-mix(in oklab, currentColor 50%, transparent);
}
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}
.bg-gray{
background-color: #f5f4f0;
}
/* Icons (Font Awesome Free 6.5.0): each icon keeps the 24x24 box of the
original icon artwork; the glyph is centred and scaled to that box. */
.icon {
position: relative;
display: block;
width: 24px;
height: 24px;
vertical-align: middle;
container-type: size;
}
.icon::before {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 62cqh;
line-height: 1;
}
.icon.fa-chevron-down::before {
font-size: 62cqh;
}
.icon.fa-chevron-right::before {
font-size: 62cqh;
}
.icon.fa-arrow-left::before {
font-size: 72cqh;
}
.icon.fa-arrow-right::before {
font-size: 72cqh;
}
.icon.fa-arrow-right.icon-diagonal::before {
font-size: 66cqh;
transform: rotate(-45deg);
}
.icon.fa-check-double::before {
font-size: 92cqh;
}
.icon.fa-xmark::before {
font-size: 80cqh;
}
.icon.fa-circle-notch::before {
font-size: 86cqh;
}
.icon.fa-check::before {
font-size: 82cqh;
}
.icon.fa-bars::before {
font-size: 80cqh;
}
.icon.fa-arrow-right::before {
font-size: 80cqh;
}
.icon.fa-chevron-left::before {
font-size: 62cqh;
}
.icon.fa-minus::before {
font-size: 80cqh;
}
.icon.fa-plus::before {
font-size: 80cqh;
}
}
/* ==========================================================================
3b. Layout: Bootstrap container and grid (every page)
Page sections put their content in .container, and card/column layouts
use .row + .col-*. These rules come first in the components layer, so
page classes written later can still add their own spacing.
========================================================================== */
@layer components {
/* Same width as the header: full width up to 1920px, with the site
gutter as side padding (Bootstrap's default caps at 1320px). */
.container {
max-width: 1920px;
margin-right: auto;
margin-left: auto;
padding-right: var(--page-gutter);
padding-left: var(--page-gutter);
}
/* The base-layer reset (margin/padding: 0 on every element) beats
Bootstrap's vendor layer, so re-apply the grid gutters set by .g-*. */
.row {
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-0.5 * var(--bs-gutter-x));
margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
margin-top: var(--bs-gutter-y);
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
}
}
/* ==========================================================================
4. Header & navigation
========================================================================== */
@layer components {
.header {
position: sticky;
z-index: 50;
padding-inline: 1.25rem;
}
@media (min-width: 768px) {
.header {
padding-inline: 2rem;
}
}
@media (min-width: 1024px) {
.header {
padding-inline: 2.5rem;
}
}
@media (min-width: 1280px) {
.header {
padding-inline: 3rem;
}
}
@media (min-width: 1536px) {
.header {
padding-inline: 3.5rem;
}
}
@media (min-width: 1920px) {
.header {
padding-inline: 6.5rem;
}
}
.header-transparent {
background-color: #0000;
}
.header-not-transparent {
background-color: #fff;
}
.header-2 {
transition-property: background-color, box-shadow;
transition-timing-function: cubic-bezier(0, 0, .2, 1);
transition-duration: .3s;
}
.header-scrolled {
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lab(91.6229% -.159085 -2.26791);
box-shadow: 0 6px 20px #0f172a1a;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.header-not-scrolled {
box-shadow: none;
}
.header-main-bar {
height: 70px;
color: #0f172a;
}
.header-nav-button {
cursor: pointer;
gap: 0.375rem;
font-size: 16px;
font-weight: 600;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s;
}
.header-nav-button-not-label {
color: #000000;
}
@media (hover: hover) {
.header-nav-button-not-label:hover {
color: #003466;
}
}
.header-nav-chevron {
height: 14px;
width: 14px;
transition-property: transform, translate, scale, rotate;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s;
}
.header-nav-chevron-label {
rotate: 180deg;
color: var(--red);
}
.header-nav-chevron-not-label {
color: #003466;
}
.header-category-button {
padding-block: 0.75rem;
font-size: .75rem;
line-height: calc(1 / .75);
font-weight: 600;
color: #000;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s;
}
@media (min-width: 1280px) {
.header-category-button {
font-size: .875rem;
line-height: calc(1.25 / .875);
}
}
.header-category-button-active {
border-bottom-style: solid;
border-bottom-width: 2px;
border-color: var(--red);
background-color: #fff;
box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}
@media (hover: hover) {
.header-category-button-not-active:hover {
background-color: color-mix(in oklab, lab(91.6229% -.159085 -2.26791) 60%, transparent);
color: #000;
}
}
.header-category-chevron {
height: 1rem;
width: 1rem;
transition-property: transform, translate, scale, rotate;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.header-category-chevron-active {
translate: 0.25rem 0;
color: var(--red);
}
.header-category-chevron-not-active {
color: lab(65.9269% -.832707 -8.17474);
}
.header-panel-wrapper {
z-index: 50;
padding-inline: 1rem;
}
@media (min-width: 1024px) {
.header-panel-wrapper {
padding-inline: 3rem;
}
}
.header-service-items-link {
transition-property: transform, translate, scale, rotate;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s;
}
:where(.header-service-items-link > :not(:last-child)) {
margin-top: 0;
margin-bottom: 0.375rem;
}
@media (hover: hover) {
.header-service-items-link:hover {
translate: 0 -0.125rem;
}
}
.header-service-items-row {
gap: 0.25rem;
}
.header-service-items {
font-size: .75rem;
line-height: calc(1 / .75);
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (min-width: 1280px) {
.header-service-items {
font-size: .875rem;
line-height: calc(1.25 / .875);
}
}
.header-service-items-not-active {
color: #000;
}
@media (hover: hover) {
.header-service-items-not-active:is(:where(.hover-group):hover *) {
color: var(--red);
text-decoration-line: underline;
}
}
.header-service-items-2 {
height: 0.875rem;
width: 0.875rem;
color: var(--red);
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.header-service-items-active {
opacity: 1;
}
.header-service-items-not-active-2 {
opacity: 0;
}
@media (hover: hover) {
.header-service-items-not-active-2:is(:where(.hover-group):hover *) {
opacity: 1;
}
}
.header-service-items-text {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -webkit-box;
font-size: 11px;
line-height: 1.625;
color: lab(47.7841% -.393212 -10.0268);
}
@media (min-width: 1280px) {
.header-service-items-text {
font-size: .75rem;
}
}
.header-services-panel-grid {
min-height: max-content;
max-width: 1280px;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 1.5rem;
border-radius: .75rem;
border-style: solid;
border-width: 1px;
border-color: lab(96.1596% -.082314 -1.13575);
padding: 1.5rem;
box-shadow: 0 25px 50px -12px #00000040;
}
@media (min-width: 1024px) {
.header-services-panel-grid {
padding: 2rem;
}
}
.header-services-panel-stack {
grid-column: span 4 / span 4;
max-height: min-content;
min-height: max-content;
border-radius: .75rem;
background-color: #f6f6f6;
}
:where(.header-services-panel-stack > :not(:last-child)) {
margin-top: 0;
margin-bottom: 0.25rem;
}
.header-services-panel-grid-2 {
grid-column: span 8 / span 8;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem 1.5rem;
padding: 0.5rem;
}
@media (min-width: 1024px) {
.header-services-panel-grid-2 {
padding: 1rem;
}
}
@media (min-width: 1280px) {
.header-services-panel-grid-2 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.header-about-panel-link {
border-radius: 1rem;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s;
}
@media (hover: hover) {
.header-about-panel-link:hover {
background-color: #f5f4f0;
}
}
.header-about-panel-title {
font-size: .875rem;
line-height: calc(1.25 / .875);
color: lab(8.11897% .811279 -12.254);
}
@media (hover: hover) {
.header-about-panel-link:hover .header-about-panel-title {
color: var(--red);
}
}
@media (min-width: 1280px) {
.header-about-panel-title {
font-size: 1rem;
line-height: 1.5;
}
}
.header-about-panel {
height: 1rem;
width: 1rem;
color: #243047;
transition-property: transform, translate, scale, rotate;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.header-about-panel:is(:where(.hover-group):hover *) {
translate: 0.125rem -0.125rem;
color: var(--red);
}
}
.header-about-panel-text {
margin-top: 0.375rem;
font-size: .75rem;
line-height: 1.625;
color: lab(35.6337% -1.58697 -10.8425);
}
.header-about-panel-grid {
max-width: 1100px;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 2rem;
border-radius: 1.5rem;
border-style: solid;
border-width: 1px;
border-color: lab(96.1596% -.082314 -1.13575);
padding: 1.5rem;
box-shadow: 0 25px 50px -12px #00000040;
}
@media (min-width: 1024px) {
.header-about-panel-grid {
padding: 2rem;
}
}
.header-about-panel-box {
grid-column: span 7 / span 7;
}
:where(.header-about-panel-box > :not(:last-child)) {
margin-top: 0;
margin-bottom: 1rem;
}
.header-about-panel-stack {
grid-column: span 5 / span 5;
align-self: stretch;
min-height: 360px;
border-radius: 1rem;
box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
}
.header-about-panel-overlay {
background-image: linear-gradient(to top in oklab, color-mix(in oklab, #000 90%, transparent) 0%, color-mix(in oklab, #000 50%, transparent) 50%, transparent 100%);
}
.header-about-panel-box-2 {
z-index: 10;
}
:where(.header-about-panel-box-2 > :not(:last-child)) {
margin-top: 0;
margin-bottom: 0.5rem;
}
.header-about-panel-title-2 {
font-size: 1.25rem;
line-height: 2rem;
font-weight: 500;
}
@media (min-width: 1280px) {
.header-about-panel-title-2 {
font-size: 30px;
}
}
.header-about-panel-box-3 {
z-index: 10;
}
.header-about-panel-link-2 {
gap: 0.5rem;
border-radius: 3.40282e38px;
border-style: solid;
border-width: 1px;
border-color: color-mix(in oklab, #fff 30%, transparent);
background-color: color-mix(in oklab, #fff 10%, transparent);
font-size: .75rem;
line-height: calc(1 / .75);
font-weight: 600;
color: #fff;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.header-about-panel-link-2:hover {
background-color: #fff;
color: #000;
}
}
.header-about-panel-2 {
height: 0.875rem;
width: 0.875rem;
}
.header-industries-panel-link {
transition-property: transform, translate, scale, rotate;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s;
}
:where(.header-industries-panel-link > :not(:last-child)) {
margin-top: 0;
margin-bottom: 0.25rem;
}
@media (hover: hover) {
.header-industries-panel-link:hover {
translate: 0 -0.125rem;
}
}
.header-industries-panel-not-active {
color: lab(8.11897% .811279 -12.254);
}
@media (hover: hover) {
.header-industries-panel-not-active:is(:where(.hover-group):hover *) {
color: var(--red);
}
}
.header-industries-panel-text {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
font-size: 11px;
line-height: 1.625;
color: lab(47.7841% -.393212 -10.0268);
}
.header-industries-panel-grid {
max-width: 1280px;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem 2rem;
border-radius: 1.5rem;
border-style: solid;
border-width: 1px;
border-color: lab(96.1596% -.082314 -1.13575);
padding: 1.5rem;
box-shadow: 0 25px 50px -12px #00000040;
}
@media (min-width: 1024px) {
.header-industries-panel-grid {
padding: 2rem;
}
}
.header-mobile-submenu-box {
margin-top: 0.75rem;
}
:where(.header-mobile-submenu-box > :not(:last-child)) {
margin-top: 0;
margin-bottom: 0.5rem;
}
.header-mobile-submenu-box-2 {
border-radius: .5rem;
background-color: lab(98.2596% -.247031 -.706708);
padding: 0.625rem;
}
.header-mobile-submenu-box-3 {
font-size: .75rem;
line-height: calc(1 / .75);
color: lab(16.1051% -1.18239 -11.7533);
}
.header-mobile-submenu-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0.5rem;
border-top-style: solid;
border-top-width: 1px;
border-color: lab(91.6229% -.159085 -2.26791);
}
:where(.header-mobile-submenu-link > :not(:last-child)) {
margin-top: 0;
margin-bottom: 0.125rem;
}
.header-mobile-submenu {
font-size: .75rem;
line-height: calc(1 / .75);
}
.header-mobile-submenu-box-4 {
font-size: 11px;
color: lab(47.7841% -.393212 -10.0268);
}
.header-mobile-submenu-box-5 {
margin-top: 0.75rem;
}
:where(.header-mobile-submenu-box-5 > :not(:last-child)) {
margin-top: 0;
margin-bottom: 0.75rem;
}
.header-mobile-submenu-link-2 {
border-radius: .5rem;
background-color: lab(98.2596% -.247031 -.706708);
padding: 0.75rem;
}
:where(.header-mobile-submenu-link-2 > :not(:last-child)) {
margin-top: 0;
margin-bottom: 0.25rem;
}
.header-mobile-submenu-box-6 {
font-size: .75rem;
line-height: calc(1 / .75);
color: #003466;
}
.header-mobile-submenu-grid-2 {
margin-top: 0.75rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0.5rem;
}
/* Tablets: the drawer is wide, so About, Industries and each Services group
list their links in two columns. */
@media (min-width: 768px) and (max-width: 991.98px) {
.header-mobile-submenu-box-5 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.header-mobile-submenu-box-5 > * {
margin-bottom: 0;
}
.header-mobile-submenu-grid,
.header-mobile-submenu-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.header-mobile-submenu-link-3 {
border-radius: .5rem;
background-color: lab(98.2596% -.247031 -.706708);
padding: 0.625rem;
}
:where(.header-mobile-submenu-link-3 > :not(:last-child)) {
margin-top: 0;
margin-bottom: 0.125rem;
}
.header-mobile-submenu-box-7 {
font-size: .75rem;
line-height: calc(1 / .75);
color: var(--red);
}
.header-mobile-drawer {
cursor: pointer;
font-size: 1rem;
font-weight: 600;
}
.header-mobile-drawer-link {
font-size: 1rem;
font-weight: 600;
}
.header-mobile-drawer-2 {
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: lab(96.1596% -.082314 -1.13575);
padding-bottom: 0.75rem;
}
.header-mobile-drawer-row {
font-weight: 500;
color: lab(8.11897% .811279 -12.254);
}
.header-mobile-drawer-box {
top: calc(100% + 8px);
z-index: 60;
max-height: calc(100vh - 100px);
overflow-y: auto;
border-radius: 24px;
border-style: solid;
border-width: 1px;
border-color: color-mix(in oklab, #fff 60%, transparent);
background-color: color-mix(in oklab, #fff 95%, transparent);
padding-block: 1.25rem;
color: #000;
box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
}
@media (min-width: 1024px) {
.header-mobile-drawer-box {
display: none;
}
}
/* Drawer drops in from the hamburger (top right); items follow one by one. */
.header-mobile-drawer-box {
transform-origin: top right;
animation: drawerIn .35s cubic-bezier(.22, 1, .36, 1) both;
}
.header-mobile-drawer-box.is-closing {
animation: drawerOut .2s cubic-bezier(.4, 0, 1, 1) both;
}
.header-mobile-drawer-box > ul > li {
animation: drawerItemIn .35s cubic-bezier(.22, 1, .36, 1) both;
}
.header-mobile-drawer-box > ul > li:nth-child(1) { animation-delay: .05s; }
.header-mobile-drawer-box > ul > li:nth-child(2) { animation-delay: .09s; }
.header-mobile-drawer-box > ul > li:nth-child(3) { animation-delay: .13s; }
.header-mobile-drawer-box > ul > li:nth-child(4) { animation-delay: .17s; }
.header-mobile-drawer-box > ul > li:nth-child(5) { animation-delay: .21s; }
.header-mobile-drawer-box > ul > li:nth-child(6) { animation-delay: .25s; }
.header-mobile-drawer-box > ul > li:nth-child(n+7) { animation-delay: .29s; }
@keyframes drawerIn {
from { opacity: 0; transform: translateY(-12px) scale(.96); }
to { opacity: 1; transform: none; }
}
@keyframes drawerOut {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(-8px) scale(.97); }
}
@keyframes drawerItemIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
/* Hamburger / close icon turns as it swaps. */
.header-btn .icon.is-swapping {
animation: iconSwap .3s cubic-bezier(.22, 1, .36, 1);
}
@keyframes iconSwap {
from { opacity: 0; transform: rotate(-90deg) scale(.6); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.header-mobile-drawer-box,
.header-mobile-drawer-box.is-closing,
.header-mobile-drawer-box > ul > li,
.header-btn .icon.is-swapping {
animation: none;
}
}
.header-mobile-drawer-list {
gap: 0.75rem;
padding-inline: 1.25rem;
}
@media (min-width: 768px) {
.header-mobile-drawer-list {
padding-inline: 2rem;
}
}
.consult-consultation-modal {
height: 1.5rem;
width: 1.5rem;
}
.header-row {
padding-inline: 0;
}
@media (min-width: 1024px) {
.header-row {
}
}
@media (min-width: 1280px) {
.header-row {
padding-inline: 0;
}
}
.header-link {
height: 50px;
width: 200px;
}
@media (max-width: 767.98px) {
.header-link {
height: 45px;
width: 165px;
}
}
.shared-img-2 {
object-fit: contain;
object-position: left;
}
.header-nav {
display: none;
translate: -50% -50%;
}
@media (min-width: 1024px) {
.header-nav {
display: block;
/* The logo is wider than the Contact button, so nudge the centred menu
right to leave the same space on both sides. */
margin-left: 2.25rem;
}
}
.header-list {
gap: 1.5rem;
}
/* 1024-1279px: tighter menu so it keeps clear space from the logo and the Contact button. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
.header-list {
gap: 1rem;
}
.header-nav .header-link-2,
.header-nav .header-nav-button {
font-size: 16px;
}
}
@media (min-width: 1280px) {
.header-list {
gap: 2.5rem;
}
}
.header-link-2 {
white-space: nowrap;
font-size: 16px;
font-weight: 600;
color: #000000;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s;
}
@media (hover: hover) {
.header-link-2:hover {
color: var(--red);
}
}
.header-link-3 {
display: none;
height: 40px;
min-width: 101px;
border-radius: 3.40282e38px;
border-style: solid;
border-width: 1.5px;
border-color: #000000;
/* Red fill sweeps in from the left on hover (background-size 0% -> 100%). */
background: linear-gradient(var(--red), var(--red)) left / 0% 100% no-repeat #fff;
padding-inline: 1.25rem;
font-size: 14px;
font-weight: 500;
color: #000000;
transition: background-size .35s cubic-bezier(.4, 0, .2, 1), border-color .35s, color .35s, transform .2s;
}
@media (hover: hover) {
.header-link-3:hover {
border-color: var(--red);
background-size: 100% 100%;
color: #fff;
transform: translateY(-3px);
/* Red ring that grows out of the button and fades, every 2s. */
animation: pulseOut 2s ease-out infinite;
}
}
@keyframes pulseOut {
0% { box-shadow: 0 0 0 0 rgba(254, 23, 24, .55); }
100% { box-shadow: 0 0 0 12px rgba(254, 23, 24, 0); }
}
@media (prefers-reduced-motion: reduce) {
.header-link-3 {
animation: none;
}
}
@media (min-width: 1024px) {
.header-link-3 {
display: inline-flex;
}
}
.header-btn {
z-index: 70;
display: flex;
border-radius: 3.40282e38px;
border-style: solid;
border-width: 1px;
border-color: color-mix(in oklab, #000 20%, transparent);
color: #0f172a;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .3s;
}
.header-btn:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: currentColor;
}
@media (min-width: 1024px) {
.header-btn {
display: none;
}
}
}
/* ==========================================================================
5. Footer
========================================================================== */
@layer components {
/* Side padding matches the header logo and Contact Us button edges. */
.footer {
background-color: #fcfaf4;
border-top: 1px solid #ebe6da;
padding: 3.5rem var(--page-gutter) 1.75rem;
color: #1f2a44;
}
@media (min-width: 1024px) {
.footer {
padding-block: 4.5rem 2rem;
}
}
/* Two link columns on phones keep the footer short; the brand block spans both. */
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.5rem 1.5rem;
}
@media (min-width: 1024px) {
.footer-grid {
grid-template-columns: 1.3fr .8fr 2fr 1.1fr .9fr;
gap: 2rem;
}
}
/* Services column: spans both phone columns and lists its links side by side. */
.footer-nav-wide {
grid-column: span 2 / span 2;
}
@media (min-width: 1024px) {
.footer-nav-wide {
grid-column: span 1 / span 1;
}
}
.footer-box {
grid-column: span 2 / span 2;
}
@media (min-width: 1024px) {
.footer-box {
grid-column: span 1 / span 1;
}
}
.footer-link {
aspect-ratio: 185 / 50;
width: clamp(190px, 16vw, 260px);
}
.footer-link:focus-visible {
border-radius: .25rem;
outline-style: solid;
outline-width: 2px;
outline-offset: 4px;
outline-color: var(--primary);
}
.footer-text {
margin-top: 1.75rem;
max-width: 300px;
font-size: 16px;
line-height: 1.6;
color: #4b5a78;
}
@media (min-width: 1280px) {
.footer-text {
margin-top: 2.25rem;
font-size: 17px;
}
}
.footer-list {
gap: 0.625rem;
margin: 1.5rem 0 0;
padding: 0;
list-style: none;
}
/* Social links: outlined circles that fill with the brand navy on hover. */
.footer-social {
width: 40px;
height: 40px;
border: 1px solid #cfd6e3;
font-size: 16px;
color: var(--primary);
text-decoration: none;
transition: color .2s ease, background-color .2s ease, border-color .2s ease, translate .2s ease;
}
@media (hover: hover) {
.footer-social:hover {
border-color: var(--primary);
background-color: var(--primary);
color: #fff;
translate: 0 -2px;
}
}
.footer-social:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 3px;
}
.footer-title {
font-size: 13px;
font-weight: 600;
letter-spacing: .1em;
color: #0b1c30;
}
@media (min-width: 1280px) {
.footer-title {
font-size: 16px;
}
}
.footer-label-3 {
margin-top: 0.75rem;
height: 3px;
width: 36px;
background-color: #fe1718;
}
.footer-list-2 {
margin-top: 1.5rem;
font-size: 15px;
color: #3a4a66;
}
:where(.footer-list-2 > :not(:last-child)) {
margin-top: 0;
margin-bottom: 0.75rem;
}
@media (min-width: 1280px) {
.footer-list-2 {
font-size: 16px;
}
}
.footer-list-split {
columns: 2;
column-gap: 1.5rem;
}
.footer-list-split > li {
break-inside: avoid;
}
.footer-link-3 {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.footer-link-3:hover {
color: #fe1718;
}
}
.footer-link-3:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 4px;
outline-color: var(--primary);
}
/* Bottom bar: logos above the copyright on small screens, side by side on large ones. */
.footer-bottom {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #e3ddcf;
}
@media (min-width: 1024px) {
.footer-bottom {
flex-direction: row-reverse;
justify-content: space-between;
margin-top: 4rem;
}
}
.footer-row {
gap: 9px;
}
@media (min-width: 1280px) {
.footer-row {
gap: 0.75rem;
}
}
.footer-img {
height: 70px;
object-fit: contain;
}
@media (min-width: 1280px) {
.footer-img {
height: 96px;
}
}
/* Certification and Clutch logo strip: sized by width, height follows the image ratio. */
.footer-logos {
width: 260px;
max-width: 100%;
height: auto;
}
@media (min-width: 1280px) {
.footer-logos {
width: 360px;
}
}
.footer-label-4 {
width: 70px;
height: 70px;
}
@media (min-width: 1280px) {
.footer-label-4 {
width: 96px;
height: 96px;
}
}
.footer-img-2 {
scale: 1.02;
object-fit: cover;
}
.footer-text-2 {
margin: 0;
font-size: 14px;
text-align: center;
color: #4b5a78;
}
@media (min-width: 1280px) {
.footer-text-2 {
font-size: 15px;
}
}
}
/* ==========================================================================
6. Shared (used on several pages)
========================================================================== */
@layer components {
.header-nav-button-label {
color: var(--red);
}
/* About page: the highlighted words in section titles stay the same
black as the rest of the title. */
[data-page="about"] .section-title .header-nav-button-label {
color: inherit;
}
.shared-img {
object-fit: cover;
}
.retail-tab-base {
height: 121px;
width: 148px;
border-radius: 4px;
border-style: solid;
border-width: 1px;
border-color: #e5e5e5;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .3s;
}
/* Tabs share the row width but never get narrower than 148px. */
@media (min-width: 768px) {
.retail-tab-base {
flex: 1 0 148px;
}
}
.retail-tab-active {
box-shadow: 0 4px 14px #0000000f;
}
@media (hover: hover) {
.retail-tab-idle:hover {
border-color: #d7d7d7;
box-shadow: 0 6px 20px #0f172a0d;
}
}
.retail-label-base {
font-size: 12px;
white-space: pre-line;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .3s;
}
@media (min-width: 1800px) {
.retail-label-base {
font-size: 14px;
}
}
.retail-label-active {
font-weight: 600;
color: #111;
}
.retail-label-idle {
color: #1f1f1f;
}
@media (hover: hover) {
.retail-label-idle:is(:where(.hover-group):hover *) {
color: #111;
}
}
.retail-underline {
height: 0.25rem;
background-color: #d71920;
}
.retail-point {
font-size: 13px;
line-height: 1.4;
color: var(--ink);
text-decoration-line: underline;
text-decoration-color: #3d3d3d;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
@media (min-width: 1536px) {
.retail-point {
font-size: 14px;
}
}
.retail-segment-active {
height: 2px;
background-color: var(--red);
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.retail-segment-idle {
height: 2px;
background-color: color-mix(in oklab, #fff 40%, transparent);
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.retail-segment-idle:is(:where(.hover-group):hover *) {
background-color: color-mix(in oklab, #fff 70%, transparent);
}
}
.retail-item {
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: #d9dbe0;
}
.retail-question-button {
cursor: pointer;
gap: 1rem;
padding-block: 1.25rem;
}
/* Keyboard focus ring shared by the industry page buttons */
.retail-question-button:focus-visible,
.retail-pager-button:focus-visible,
.industry-btn-2:focus-visible,
.industry-btn-3:focus-visible,
.industry-btn-4:focus-visible,
.industry-r-uatperlb-btn:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: var(--primary);
}
@media (min-width: 768px) {
.retail-question-button {
gap: 1.5rem;
}
}
@media (min-width: 1280px) {
.retail-question-button {
padding-block: 22px;
}
}
.retail-question-icon {
height: 20px;
width: 20px;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.retail-question-icon {
height: 24px;
width: 24px;
}
}
.retail-question-text {
font-size: 17px;
line-height: 1.3;
color: var(--ink-strong);
}
@media (min-width: 768px) {
.retail-question-text {
font-size: 20px;
}
}
@media (min-width: 1280px) {
.retail-question-text {
font-size: 26px;
}
}
@media (min-width: 1536px) {
.retail-question-text {
font-size: 30px;
}
}
.retail-answer {
margin-top: -0.5rem;
padding-bottom: 1.25rem;
padding-left: 44px;
font-size: 14px;
line-height: 1.55;
color: #3d4655;
}
@media (min-width: 768px) {
.retail-answer {
padding-left: 52px;
font-size: 16px;
}
}
@media (min-width: 1280px) {
.retail-answer {
margin-top: -0.75rem;
padding-bottom: 18px;
padding-left: 56px;
font-size: 18px;
}
}
@media (min-width: 1536px) {
.retail-answer {
font-size: 20px;
}
}
.retail-pager-button {
cursor: pointer;
gap: 0.375rem;
font-size: 16px;
color: var(--primary);
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.retail-pager-button:hover {
opacity: .8;
color: var(--red);
}
}
@media (min-width: 1280px) {
.retail-pager-button {
font-size: 18px;
}
}
@media (min-width: 1536px) {
.retail-pager-button {
font-size: 20px;
}
}
.retail-pager-icon {
height: 16px;
width: 16px;
}
@media (min-width: 1536px) {
.retail-pager-icon {
height: 18px;
width: 18px;
}
}
.shared-root {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.shared-body {
min-height: 100%;
background-color: #fff;
color: #000;
}
.shared-link:focus {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 9999;
border-radius: .375rem;
background-color: #fff;
padding: 0.5rem 1rem;
color: #000;
box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
}
.shared-box {
aspect-ratio: 1448 / 1086;
}
.shared-box-2 {
min-width: 0;
}
.shared-img-3 {
object-fit: cover;
transition-property: transform, translate, scale, rotate;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .5s;
}
@media (hover: hover) {
.shared-img-3:is(:where(.hover-group):hover *) {
scale: 105% 105%;
}
}
.shared-img-4 {
object-fit: cover;
object-position: right;
}
.shared-label {
translate: 0 -1px;
font-size: 13px;
}
.shared-img-5 {
object-fit: cover;
object-position: center;
}
/* CTA buttons (every page), in the careers "Submit Application" style (.career-btn):
6px corners and a 1px lift on hover. "Get Free Consultation" (.cta-btn) is solid red;
"Request a Proposal" (.cta-btn.cta-btn-outline) is a red outline that fills red on hover. */
.cta-btn,
.cta-btn-outline {
/* gap: .875rem; */
padding: .925rem 0.8rem;
border: 0;
border-radius: 6px;
background-color: var(--red);
font-size: 14px;
font-weight: 400;
color: #fff;
cursor: pointer;
transition: background-color .2s ease, translate .2s ease;
}
.cta-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(254, 23, 24, .35);
}
.cta-btn:hover,
.cta-btn:focus-visible {
background-color: #e0080a;
color: #fff;
translate: 0 -1px;
}
/* Outline drawn with an inset shadow, so the button keeps the solid one's size. */
.cta-btn.cta-btn-outline {
background-color: transparent;
border: 1px solid var(--ink-strong);
color: var(--ink-strong);
}
.cta-btn.cta-btn-outline:hover,
.cta-btn.cta-btn-outline:focus-visible {
background-color: var(--red);
color: #fff;
border-color: var(--red);
translate: 0 -1px;
}
/* Compliance CTA banner is dark navy: the navy outline disappears there, so use white. */
.compliance-cta-banner .cta-btn.cta-btn-outline {
border-color: #fff;
color: #fff;
}
.compliance-cta-banner .cta-btn.cta-btn-outline:hover,
.compliance-cta-banner .cta-btn.cta-btn-outline:focus-visible {
border-color: var(--red);
color: #fff;
}
.industry-box {
padding-top: 3rem;
padding-bottom: 2rem;
}
@media (min-width: 640px) {
.industry-box {
padding-top: 2rem;
padding-bottom: 2.25rem;
}
}
@media (min-width: 768px) {
.industry-box {
padding-top: 3rem;
padding-bottom: 2.5rem;
}
}
@media (min-width: 1024px) {
.industry-box {
padding-top: 4rem;
padding-bottom: 3rem;
}
}
@media (min-width: 1280px) {
.industry-box {
padding-top: 6rem;
padding-bottom: 3.5rem;
}
}
.industry-title {
max-width: 850px;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: clamp(2rem, 3.15vw, 3.55rem);
line-height: 1.08;
font-weight: 700;
letter-spacing: -.035em;
color: #000;
}
@media (min-width: 640px) {
.industry-title {
max-width: 900px;
}
}
@media (min-width: 768px) {
.industry-title {
max-width: 950px;
}
}
@media (min-width: 1024px) {
.industry-title {
max-width: 1000px;
}
}
@media (min-width: 1280px) {
.industry-title {
max-width: 1080px;
}
}
.industry-box-2 > p {
max-width: 950px;
}
.industry-box-3 {
margin-top: 2.25rem;
aspect-ratio: 3.19;
border-radius: 16px;
}
@media (min-width: 640px) {
.industry-box-3 {
margin-top: 2.5rem;
border-radius: 18px;
}
}
@media (min-width: 768px) {
.industry-box-3 {
margin-top: 2.75rem;
border-radius: 20px;
}
}
@media (min-width: 1024px) {
.industry-box-3 {
margin-top: 3rem;
aspect-ratio: 4;
}
}
@media (min-width: 1280px) {
.industry-box-3 {
margin-top: 3.25rem;
}
}
/* Phones: taller hero image. */
@media (max-width: 767.98px) {
.industry-box-3 {
aspect-ratio: 2.5;
}
}
.industry-text-2 {
margin-top: 45px;
margin-bottom: 1.75rem;
}
@media (max-width: 767.98px) {
.industry-text-2 {
margin-top: 30px;
}
}
.industry-stack {
margin-top: 1.25rem;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.75rem;
}
@media (min-width: 640px) {
.industry-stack {
flex-direction: row !important;
align-items: center !important;
gap: 15px;
justify-content: flex-start !important;
}
}
.industry-expertise-section {
color: var(--ink-strong);
}
.industry-expertise-box,
.industry-expertise-inner {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
@media (min-width: 1024px) {
.industry-expertise-box,
.industry-expertise-inner {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
}
.industry-expertise-box-2 {
margin-top: 2rem;
}
@media (min-width: 1280px) {
.industry-expertise-box-2 {
gap: 1.5rem;
}
}
.industry-expertise-title {
max-width: 1080px;
}
.industry-expertise-text {
max-width: 1400px;
}
.industry-expertise-box-3 {
background-color: #f7f6f4;
}
/* .row.g-5; smaller row gap while the columns are stacked */
.industry-expertise-grid {
--bs-gutter-y: 2.5rem;
}
/* Side by side: the card row fills the column height (as the old grid did) */
@media (min-width: 1200px) {
.industry-expertise-grid-2 {
height: calc(100% + var(--bs-gutter-y));
}
}
.industry-expertise-title-2 {
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 28px;
line-height: 1.15;
font-weight: 600;
letter-spacing: -.02em;
color: var(--ink-strong);
}
@media (min-width: 768px) {
.industry-expertise-title-2 {
font-size: 34px;
}
}
@media (min-width: 1280px) {
.industry-expertise-title-2 {
font-size: 42px;
}
}
.industry-expertise-list {
margin-top: 1rem;
}
@media (min-width: 1280px) {
.industry-expertise-list {
margin-top: 1.5rem;
}
}
.industry-expertise-item {
gap: 0.75rem;
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: var(--border);
padding-block: 0.75rem;
}
.industry-expertise-item:last-child {
border-bottom-width: 0;
}
@media (min-width: 1280px) {
.industry-expertise-item {
padding-block: 1rem;
}
}
.industry-expertise-label {
margin-top: 3px;
}
@media (min-width: 1280px) {
.industry-expertise-label {
margin-top: 4px;
}
}
.industry-expertise-label-2 {
font-size: 14px;
line-height: 1.55;
color: #3d4655;
}
@media (min-width: 1280px) {
.industry-expertise-label-2 {
font-size: 16px;
}
}
.industry-expertise-box-4 {
min-height: 560px;
border-radius: 18px;
}
@media (max-width: 767.98px) {
.industry-expertise-box-4 {
min-height: 440px;
}
}
@media (min-width: 768px) {
.industry-expertise-box-4 {
min-height: 100%;
}
}
.industry-expertise-box-5 {
background-image: linear-gradient(to top in oklab, #f3eee8 0%, lab(94.3664% .967741 3.53795 / .95) 70%, transparent 100%);
padding: 6rem 2rem 2rem;
}
.industry-expertise-box-6 {
color: var(--ink-strong);
}
.industry-expertise-text-2 {
font-size: 11px;
font-weight: 600;
letter-spacing: .2em;
}
@media (min-width: 1280px) {
.industry-expertise-text-2 {
font-size: 12px;
}
}
.industry-expertise-label-3 {
margin-top: 0.75rem;
height: 2px;
width: 34px;
background-color: currentColor;
}
.industry-expertise-title-3 {
margin-top: 1.25rem;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 28px;
line-height: 1.1;
font-weight: 600;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.industry-expertise-title-3 {
font-size: 34px;
}
}
.industry-expertise-text-3 {
margin-top: 0.75rem;
font-size: 15px;
color: #3d4655;
}
@media (min-width: 1280px) {
.industry-expertise-text-3 {
font-size: 17px;
}
}
.industry-expertise-grid-3 {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1rem;
}
.industry-expertise-box-7 {
min-height: 280px;
border-radius: 18px;
}
@media (min-width: 1280px) {
.industry-expertise-box-7 {
min-height: 300px;
}
}
.industry-expertise-img {
object-fit: cover;
object-position: 80% center;
}
.industry-expertise-box-8 {
z-index: 10;
max-width: 270px;
padding: 1.75rem;
}
@media (min-width: 1280px) {
.industry-expertise-box-8 {
padding: 2rem;
}
}
/* Mobile: the photo sits behind the text, so the text gets a full-width
light fade and room below it before the photo shows through. */
@media (max-width: 767.98px) {
.industry-expertise-box-8 {
max-width: none;
padding-bottom: 4.5rem;
background-image: linear-gradient(to bottom, rgb(255 255 255 / .9) 0%, rgb(255 255 255 / .8) 65%, transparent 100%);
}
}
.industry-expertise-title-4 {
margin-top: 1.25rem;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 26px;
line-height: 1.1;
font-weight: 600;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.industry-expertise-title-4 {
font-size: 32px;
}
}
.industry-expertise-text-4 {
margin-top: 0.75rem;
font-size: 15px;
line-height: 1.45;
color: #3d4655;
}
@media (min-width: 1280px) {
.industry-expertise-text-4 {
font-size: 17px;
}
}
.industry-expertise-box-9 {
z-index: 10;
max-width: 290px;
padding: 1.75rem;
}
@media (min-width: 1280px) {
.industry-expertise-box-9 {
padding: 2rem;
}
}
/* Mobile: same as the B2B card, but a dark fade for the white text. */
@media (max-width: 767.98px) {
.industry-expertise-box-9 {
max-width: none;
padding-bottom: 4.5rem;
background-image: linear-gradient(to bottom, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .4) 65%, transparent 100%);
text-shadow: 0 1px 2px rgb(0 0 0 / .3);
}
}
.industry-expertise-title-5 {
margin-top: 1.25rem;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 26px;
line-height: 1.1;
font-weight: 600;
}
@media (min-width: 1280px) {
.industry-expertise-title-5 {
font-size: 32px;
}
}
.industry-expertise-text-5 {
margin-top: 0.75rem;
font-size: 15px;
line-height: 1.45;
color: color-mix(in oklab, #fff 90%, transparent);
}
@media (min-width: 1280px) {
.industry-expertise-text-5 {
font-size: 17px;
}
}
.industry-section {
margin-top: 2rem;
background-color: #f5f4f0;
padding-block: 2rem;
}
@media (min-width: 768px) {
.industry-section {
padding-block: 3rem;
}
}
@media (min-width: 1536px) {
.industry-section {
padding-top: 55px;
padding-bottom: 60px;
}
}
.industry-box-4 {
z-index: 2;
}
.industry-box-5 {
margin-bottom: 2rem;
}
@media (min-width: 768px) {
.industry-box-5 {
margin-bottom: 3rem;
}
}
@media (min-width: 1024px) {
.industry-box-5 {
margin-bottom: 4rem;
}
}
@media (min-width: 1536px) {
.industry-box-5 {
margin-bottom: 60px;
}
}
.industry-title-2 {
max-width: 1200px;
}
.industry-text-4 {
max-width: 1340px;
font-size: 15px;
line-height: 1.45;
font-weight: 600;
color: #3d4655;
}
@media (min-width: 768px) {
.industry-text-4 {
font-size: 17px;
}
}
@media (min-width: 1280px) {
.industry-text-4 {
font-size: 19px;
}
}
.industry-text-5 {
max-width: 1340px;
font-size: 15px;
line-height: 1.45;
color: #3d4655;
}
@media (min-width: 768px) {
.industry-text-5 {
font-size: 17px;
}
}
@media (min-width: 1280px) {
.industry-text-5 {
font-size: 19px;
}
}
.industry-box-6 {
margin-bottom: 2.5rem;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
@media (min-width: 768px) {
.industry-box-6 {
margin-bottom: 3rem;
}
}
@media (min-width: 1024px) {
.industry-box-6 {
margin-bottom: 3rem;
}
}
@media (min-width: 1536px) {
.industry-box-6 {
margin-bottom: 40px;
}
}
.industry-box-6::-webkit-scrollbar {
display: none;
}
/* One row of tabs at every width; it scrolls sideways when the tabs do not fit. */
.industry-row {
gap: 0.5rem;
}
@media (min-width: 768px) {
.industry-row {
gap: 0.75rem;
}
}
@media (min-width: 1536px) {
.industry-row {
gap: 19px;
}
}
.industry-row-2 {
margin-bottom: 0.625rem;
height: 1.75rem;
width: 1.75rem;
}
.industry-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 2rem;
}
@media (min-width: 1024px) {
.industry-grid {
grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
gap: 2.5rem;
}
}
@media (min-width: 1280px) {
.industry-grid {
grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
gap: 3rem;
}
}
@media (min-width: 1536px) {
.industry-grid {
grid-template-columns: 640px 908px;
gap: 48px;
justify-content: space-between;
}
}
@media (min-width: 1024px) {
.industry-box-7 {
padding-top: 18px;
}
}
.industry-box-8 {
transition-property: opacity, translate;
transition-timing-function: cubic-bezier(0, 0, .2, 1);
transition-duration: .45s;
}
@starting-style {
.industry-box-8 {
translate: 0 0.75rem;
opacity: 0;
}
}
.industry-title-3 {
max-width: 600px;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: clamp(1.75rem, 2.6vw, 45px);
line-height: 1.15;
font-weight: 600;
letter-spacing: -.01em;
color: #111;
}
.industry-text-6 {
margin-top: 1rem;
max-width: 600px;
font-size: 15px;
line-height: 1.2;
color: #111;
}
@media (min-width: 768px) {
.industry-text-6 {
margin-top: 1.25rem;
}
}
@media (min-width: 1536px) {
.industry-text-6 {
margin-top: 22px;
font-size: 16px;
}
}
.industry-text-7 {
margin-top: 1.5rem;
font-size: 14px;
font-weight: 600;
color: #111;
}
@media (min-width: 1536px) {
.industry-text-7 {
margin-top: 2rem;
font-size: 15px;
}
}
/* ul.row: the li get col-* classes (also in industry-page.js) */
.industry-list {
--bs-gutter-x: 2rem;
--bs-gutter-y: 1rem;
margin-top: calc(1.25rem - var(--bs-gutter-y));
}
@media (min-width: 1536px) {
.industry-list {
--bs-gutter-y: 1.25rem;
margin-top: calc(1.5rem - var(--bs-gutter-y));
}
}
.industry-box-9 {
border-radius: 16px;
background-color: #f5f5f5;
transition-property: opacity, translate;
transition-timing-function: cubic-bezier(0, 0, .2, 1);
transition-duration: .45s;
}
@media (min-width: 1024px) {
.industry-box-9 {
border-radius: 20px;
}
}
@media (min-width: 1536px) {
.industry-box-9 {
border-radius: 22px;
}
}
@starting-style {
.industry-box-9 {
translate: 0 0.75rem;
opacity: 0;
}
}
.industry-img {
height: 260px;
object-fit: cover;
transition-property: transform, translate, scale, rotate;
transition-timing-function: cubic-bezier(0, 0, .2, 1);
transition-duration: .7s;
}
@media (hover: hover) {
.industry-img:hover {
scale: 1.02;
}
}
@media (min-width: 640px) {
.industry-img {
height: 340px;
}
}
@media (min-width: 768px) {
.industry-img {
height: 300px;
}
}
@media (min-width: 1024px) {
.industry-img {
height: 400px;
}
}
@media (min-width: 1536px) {
.industry-img {
height: 444px;
}
}
.industry-section-2 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
color: var(--ink-strong);
}
@media (min-width: 1024px) {
.industry-section-2 {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
.industry-row-3 {
gap: 1rem;
color: #fe1718;
}
.industry-title-4 {
margin-top: 0.75rem;
max-width: 1300px;
}
.industry-text-9 {
max-width: 940px;
}
.industry-grid-2 {
margin-top: 2rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1rem;
}
@media (min-width: 640px) {
.industry-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.industry-grid-2 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.industry-grid-2 {
margin-top: 2.5rem;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.industry-card {
height: 360px;
border-radius: 14px;
background-color: #eef0f2;
padding: 0.75rem;
box-shadow: 0 2px 10px #10192c14;
}
.industry-text-10 {
z-index: 10;
border-radius: 3.40282e38px;
background-color: color-mix(in oklab, #fff 85%, transparent);
padding: 0.625rem 1.25rem;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.industry-text-10 {
font-size: 12px;
}
}
.industry-overlay {
aspect-ratio: 16 / 9;
}
.industry-img-2 {
object-fit: cover;
transition-property: transform, translate, scale, rotate;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .7s;
}
@media (hover: hover) {
.industry-img-2:is(:where(.hover-group):hover *) {
scale: 105% 105%;
}
}
.industry-box-10 {
height: 33.3333%;
background-image: linear-gradient(to top in oklab, #eef0f2 0%, transparent 100%);
}
.industry-stack-2 {
left: 0.75rem;
right: 0.75rem;
bottom: 0.75rem;
z-index: 20;
min-height: 0;
border-radius: 14px;
border-style: solid;
border-width: 1px;
border-color: color-mix(in oklab, #fff 70%, transparent);
background-color: color-mix(in oklab, #fff 80%, transparent);
padding-block: 1.25rem;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
transition-property: min-height, background-color;
transition-timing-function: cubic-bezier(.22, 1, .36, 1);
transition-duration: .5s;
}
@media (hover: hover) {
.industry-stack-2:is(:where(.hover-group):hover *) {
min-height: calc(100% - 24px);
background-color: color-mix(in oklab, #fff 90%, transparent);
}
}
.industry-title-5 {
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 20px;
line-height: 1.15;
font-weight: 600;
letter-spacing: -.01em;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.industry-title-5 {
font-size: 21px;
}
}
.industry-text-11 {
margin-top: 0.5rem;
font-size: 14px;
line-height: 1.35;
color: #3d4655;
transition-property: margin;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .5s;
}
@media (hover: hover) {
.industry-text-11:is(:where(.hover-group):hover *) {
margin-top: 0.75rem;
}
}
@media (min-width: 1280px) {
.industry-text-11 {
font-size: 15px;
}
}
.industry-card-2 {
height: 360px;
border-radius: 14px;
background-color: #e9eef5;
padding: 0.75rem;
box-shadow: 0 2px 10px #10192c14;
}
.industry-text-12 {
z-index: 10;
border-radius: 3.40282e38px;
background-color: #dcebfa;
padding: 0.625rem 1.25rem;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.industry-text-12 {
font-size: 12px;
}
}
.industry-box-11 {
height: 33.3333%;
background-image: linear-gradient(to top in oklab, #e9eef5 0%, transparent 100%);
}
.industry-card-3 {
height: 360px;
border-radius: 14px;
background-color: #f6e6dc;
padding: 0.75rem;
box-shadow: 0 2px 10px #10192c14;
}
.industry-text-13 {
z-index: 10;
border-radius: 3.40282e38px;
background-color: #fbe3dc;
padding: 0.625rem 1.25rem;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.industry-text-13 {
font-size: 12px;
}
}
.industry-box-12 {
height: 33.3333%;
background-image: linear-gradient(to top in oklab, #f6e6dc 0%, transparent 100%);
}
.industry-card-4 {
height: 360px;
border-radius: 14px;
background-color: #e8eef6;
padding: 0.75rem;
box-shadow: 0 2px 10px #10192c14;
}
.industry-box-13 {
height: 33.3333%;
background-image: linear-gradient(to top in oklab, #e8eef6 0%, transparent 100%);
}
.industry-card-5 {
height: 360px;
border-radius: 14px;
background-color: #efe9e2;
padding: 0.75rem;
box-shadow: 0 2px 10px #10192c14;
}
.industry-text-14 {
z-index: 10;
border-radius: 3.40282e38px;
background-color: #dcefe2;
padding: 0.625rem 1.25rem;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.industry-text-14 {
font-size: 12px;
}
}
.industry-box-14 {
height: 33.3333%;
background-image: linear-gradient(to top in oklab, #efe9e2 0%, transparent 100%);
}
.industry-card-6 {
height: 360px;
border-radius: 14px;
background-color: #e9e4dc;
padding: 0.75rem;
box-shadow: 0 2px 10px #10192c14;
}
.industry-text-15 {
z-index: 10;
border-radius: 3.40282e38px;
background-color: #f6e6d6;
padding: 0.625rem 1.25rem;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.industry-text-15 {
font-size: 12px;
}
}
.industry-box-15 {
height: 33.3333%;
background-image: linear-gradient(to top in oklab, #e9e4dc 0%, transparent 100%);
}
.industry-card-7 {
height: 360px;
border-radius: 14px;
background-color: #e6e6f6;
padding: 0.75rem;
box-shadow: 0 2px 10px #10192c14;
}
.industry-text-16 {
z-index: 10;
border-radius: 3.40282e38px;
background-color: #e3e4f8;
padding: 0.625rem 1.25rem;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.industry-text-16 {
font-size: 12px;
}
}
.industry-box-16 {
height: 33.3333%;
background-image: linear-gradient(to top in oklab, #e6e6f6 0%, transparent 100%);
}
.industry-card-8 {
height: 360px;
border-radius: 14px;
background-color: #efe6da;
padding: 0.75rem;
box-shadow: 0 2px 10px #10192c14;
}
.industry-text-17 {
z-index: 10;
border-radius: 3.40282e38px;
background-color: #dbefe9;
padding: 0.625rem 1.25rem;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.industry-text-17 {
font-size: 12px;
}
}
.industry-box-17 {
height: 33.3333%;
background-image: linear-gradient(to top in oklab, #efe6da 0%, transparent 100%);
}
.industry-card-9 {
height: 360px;
border-radius: 14px;
background-color: #f3e1d6;
padding: 0.75rem;
box-shadow: 0 2px 10px #10192c14;
}
.industry-text-18 {
z-index: 10;
border-radius: 3.40282e38px;
background-color: #f8e4dc;
padding: 0.625rem 1.25rem;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.industry-text-18 {
font-size: 12px;
}
}
.industry-box-18 {
height: 33.3333%;
background-image: linear-gradient(to top in oklab, #f3e1d6 0%, transparent 100%);
}
.industry-card-10 {
height: 360px;
border-radius: 14px;
background-color: #f1ece6;
padding: 0.75rem;
box-shadow: 0 2px 10px #10192c14;
}
.industry-text-19 {
z-index: 10;
border-radius: 3.40282e38px;
background-color: #fae1e6;
padding: 0.625rem 1.25rem;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.industry-text-19 {
font-size: 12px;
}
}
.industry-box-19 {
height: 33.3333%;
background-image: linear-gradient(to top in oklab, #f1ece6 0%, transparent 100%);
}
.industry-section-3 {
background-color: #f8f7f5;
padding-block: 2.5rem;
color: var(--ink-strong);
}
@media (min-width: 1024px) {
.industry-section-3 {
padding-block: 4rem;
}
}
.industry-row-4 {
gap: 2rem;
}
.industry-row-5 {
gap: 1rem;
}
.industry-title-6 {
margin-top: 0.75rem;
max-width: 1080px;
}
.industry-text-21 {
margin-top: 0.75rem;
max-width: 1080px;
}
.industry-box-20 {
display: none;
gap: 1.25rem;
}
@media (min-width: 640px) {
.industry-box-20 {
display: flex;
}
}
.industry-btn-2 {
width: 52px;
height: 52px;
cursor: pointer;
border-radius: 3.40282e38px;
background-color: #ececec;
color: var(--ink-strong);
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.industry-btn-2:hover {
background-color: var(--red);
color: #fff;
}
}
@media (min-width: 1280px) {
.industry-btn-2 {
width: 64px;
height: 64px;
}
}
.industry-icon {
height: 1.25rem;
width: 1.25rem;
}
.industry-btn-3 {
width: 52px;
height: 52px;
cursor: pointer;
border-radius: 3.40282e38px;
background-color: var(--red);
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.industry-btn-3:hover {
opacity: .9;
}
}
@media (min-width: 1280px) {
.industry-btn-3 {
width: 64px;
height: 64px;
}
}
.industry-grid-3 {
margin-top: 2rem;
height: 460px;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0.75rem;
padding-inline: 1.5rem;
}
@media (min-width: 640px) {
.industry-grid-3 {
padding-inline: 2rem;
}
}
@media (min-width: 768px) {
.industry-grid-3 {
height: 480px;
grid-template-columns: 1fr 2.45fr 1fr;
padding-inline: 0;
}
}
@media (min-width: 1280px) {
.industry-grid-3 {
margin-top: 2.25rem;
height: 540px;
}
}
.industry-btn-4 {
cursor: pointer;
border-radius: 6px;
}
.industry-overlay-2 {
background-image: linear-gradient(to top in oklab, color-mix(in oklab, #000 70%, transparent) 0%, color-mix(in oklab, #000 10%, transparent) 50%, transparent 100%);
}
.industry-row-6 {
gap: 1rem;
padding: 1.5rem;
}
@media (min-width: 1280px) {
.industry-row-6 {
padding: 2.5rem;
}
}
.industry-label {
max-width: 300px;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 22px;
line-height: 1.1;
font-weight: 600;
}
@media (min-width: 1280px) {
.industry-label {
font-size: 32px;
}
}
.industry-card-11 {
border-radius: 6px;
}
.industry-overlay-3 {
background-image: linear-gradient(to right in oklab, color-mix(in oklab, #000 75%, transparent) 0%, color-mix(in oklab, #000 45%, transparent) 50%, color-mix(in oklab, #000 10%, transparent) 100%);
}
.industry-stack-3 {
padding: 1.5rem 1.5rem 1.75rem;
}
@media (min-width: 640px) {
.industry-stack-3 {
padding-inline: 2.5rem;
}
}
@media (min-width: 1280px) {
.industry-stack-3 {
padding-top: 2rem;
}
}
.industry-text-22 {
font-size: 15px;
font-weight: 600;
letter-spacing: .04em;
}
.industry-label-3 {
color: color-mix(in oklab, #fff 60%, transparent);
}
.industry-box-21 {
max-width: 520px;
animation: .7s cubic-bezier(.22, .61, .36, 1) fade-slide-x;
}
/* Solutions carousel (Swiper): the centre card shows its full content, the
cards peeking in at either side show only their title. */
.solutions-host {
display: block;
position: relative;
}
.solutions-host .swiper-container,
.solutions-host .swiper-slide {
height: 100%;
}
.solutions-host .swiper-wrapper {
transition-timing-function: cubic-bezier(.45, 0, .2, 1);
}
.solutions-slide:not(.swiper-slide-active) {
cursor: pointer;
}
.solutions-main,
.solutions-shade-main,
.solutions-shade-side,
.solutions-side-label {
transition: opacity .5s ease;
}
.solutions-main,
.solutions-shade-main,
.solutions-side-label {
opacity: 0;
}
.swiper-slide-active .solutions-main,
.swiper-slide-active .solutions-shade-main {
opacity: 1;
}
.swiper-slide-active .solutions-shade-side {
opacity: 0;
}
.solutions-img {
transition: scale .7s cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) {
.solutions-slide:not(.swiper-slide-active):hover .solutions-img {
scale: 1.05;
}
}
/* Only about 40% of a side card is visible, so its title sits on the visible edge. */
.solutions-side-label {
max-width: 40%;
padding: 1.5rem;
}
@media (min-width: 1280px) {
.solutions-side-label {
padding: 2.5rem;
}
}
.swiper-slide-prev .solutions-side-label,
.swiper-slide-duplicate-prev .solutions-side-label {
right: 0;
text-align: right;
opacity: 1;
}
.swiper-slide-next .solutions-side-label,
.swiper-slide-duplicate-next .solutions-side-label {
left: 0;
opacity: 1;
}
.solutions-host .industry-box-21 {
animation: none;
}
.solutions-host .swiper-slide-active .industry-box-21 {
animation: .8s cubic-bezier(.22, .61, .36, 1) .15s both fade-slide-x;
}
/* Counter and segment bar float over the centre card (positioned by JS). */
.solutions-hud {
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
pointer-events: none;
}
.solutions-hud button {
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.solutions-host .swiper-slide-active .industry-box-21 {
animation: none;
}
}
@media (min-width: 1280px) {
.industry-box-21 {
margin-left: 46px;
}
}
.industry-title-7 {
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 32px;
line-height: 1.1;
font-weight: 600;
letter-spacing: -.01em;
}
@media (min-width: 768px) {
.industry-title-7 {
font-size: 40px;
}
}
@media (min-width: 1280px) {
.industry-title-7 {
font-size: 48px;
}
}
.industry-text-23 {
font-size: 15px;
color: color-mix(in oklab, #fff 90%, transparent);
}
@media (min-width: 768px) {
.industry-text-23 {
font-size: 17px;
}
}
@media (min-width: 1280px) {
.industry-text-23 {
font-size: 20px;
}
}
.industry-row-7 {
gap: 0.5rem;
}
.industry-btn-5 {
height: 1rem;
flex: 1;
cursor: pointer;
}
.industry-row-8 {
display: flex;
gap: 1rem;
}
@media (min-width: 640px) {
.industry-row-8 {
display: none;
}
}
.industry-btn-6 {
width: 48px;
height: 48px;
border-radius: 3.40282e38px;
background-color: #ececec;
color: var(--ink-strong);
}
.industry-btn-7 {
width: 48px;
height: 48px;
border-radius: 3.40282e38px;
background-color: var(--primary);
}
.industry-why-choose-section {
padding-block: 2.5rem;
color: var(--ink-strong);
}
@media (min-width: 1024px) {
.industry-why-choose-section {
padding-block: 4rem;
}
}
:where(.industry-why-choose-box > :not(:last-child)) {
margin-top: 0;
margin-bottom: 1rem;
}
.industry-why-choose-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1rem;
}
@media (min-width: 768px) {
.industry-why-choose-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.industry-why-choose-grid {
grid-template-columns: .85fr 1.1fr .95fr;
}
}
.industry-why-choose-stack {
padding-block: 1rem;
}
@media (min-width: 768px) {
.industry-why-choose-stack {
grid-column: span 2 / span 2;
}
}
@media (min-width: 1280px) {
.industry-why-choose-stack {
padding-block: 0;
grid-column: span 1 / span 1;
padding-right: 1.5rem;
}
}
.industry-why-choose-row {
gap: 1rem;
color: var(--primary);
}
.industry-why-choose-title {
margin-top: 1.25rem;
}
.industry-why-choose-text {
margin-top: 1.25rem;
max-width: 460px;
}
.industry-why-choose-card {
min-height: 300px;
border-radius: 10px;
}
@media (min-width: 1280px) {
.industry-why-choose-card {
min-height: 290px;
}
}
.industry-why-choose-img {
object-fit: cover;
object-position: right;
transition-property: transform, translate, scale, rotate;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .7s;
}
@media (hover: hover) {
.industry-why-choose-img:is(:where(.hover-group):hover *) {
scale: 105% 105%;
}
}
.industry-why-choose-overlay {
background-image: linear-gradient(to right in oklab, #bcd3ee 0%, transparent 50%, transparent 100%);
}
.industry-why-choose-stack-2 {
margin: 1rem;
max-width: 340px;
border-radius: 10px;
background-color: color-mix(in oklab, #fff 80%, transparent);
padding: 1.25rem 1.5rem;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
@media (min-width: 640px) {
.industry-why-choose-stack-2 {
margin: 1.5rem;
}
}
@media (min-width: 1280px) {
.industry-why-choose-stack-2 {
padding: 1.5rem 1.75rem;
}
}
.industry-why-choose-text-2 {
font-size: 11px;
font-weight: 600;
letter-spacing: .18em;
color: var(--primary);
}
@media (min-width: 1280px) {
.industry-why-choose-text-2 {
font-size: 12px;
}
}
.industry-title-8 {
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 22px;
line-height: 1.15;
font-weight: 600;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.industry-title-8 {
font-size: 26px;
}
}
.industry-text-24 {
margin-top: 0.75rem;
font-size: 14px;
line-height: 1.45;
color: #2f3440;
}
@media (min-width: 1280px) {
.industry-text-24 {
font-size: 16px;
}
}
.industry-why-choose-overlay-2 {
background-image: linear-gradient(to right in oklab, #f0d5c4 0%, transparent 50%, transparent 100%);
}
.industry-why-choose-overlay-3 {
background-image: linear-gradient(to right in oklab, #cfe8d6 0%, transparent 50%, transparent 100%);
}
.industry-why-choose-overlay-4 {
background-image: linear-gradient(to right in oklab, #f3cfcf 0%, transparent 50%, transparent 100%);
}
.industry-why-choose-overlay-5 {
background-image: linear-gradient(to right in oklab, #cfdff3 0%, transparent 50%, transparent 100%);
}
.industry-why-choose-overlay-6 {
background-image: linear-gradient(to right in oklab, #f6dfc6 0%, transparent 50%, transparent 100%);
}
.industry-why-choose-overlay-7 {
background-image: linear-gradient(to right in oklab, #dcd6f3 0%, transparent 50%, transparent 100%);
}
.industry-why-choose-overlay-8 {
background-image: linear-gradient(to right in oklab, #cfe9e6 0%, transparent 50%, transparent 100%);
}
.industry-r-uatperlb-section {
color: var(--ink-strong);
}
.industry-r-uatperlb-box {
padding-top: 3rem;
padding-bottom: 3rem;
}
@media (min-width: 768px) {
.industry-r-uatperlb-box {
padding-block: 4rem;
}
}
@media (min-width: 1280px) {
.industry-r-uatperlb-box {
padding-top: 50px;
padding-bottom: 65px;
}
}
.industry-r-uatperlb-title {
max-width: 820px;
}
.industry-r-uatperlb-btn {
margin-top: 2rem;
cursor: pointer;
font-size: 13px;
font-weight: 600;
letter-spacing: .02em;
color: var(--ink-strong);
text-decoration-line: underline;
text-underline-offset: 4px;
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.industry-r-uatperlb-btn:hover {
opacity: .7;
color: var(--red);
}
}
.industry-r-uatperlb-btn:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: var(--primary);
}
@media (min-width: 1280px) {
.industry-r-uatperlb-btn {
margin-top: 3rem;
font-size: 15px;
}
}
.industry-r-uatperlb-box-2 {
margin-top: 1rem;
border-top-style: solid;
border-top-width: 1px;
border-color: #d9dbe0;
}
@media (min-width: 1280px) {
.industry-r-uatperlb-box-2 {
margin-top: 1.25rem;
}
}
.industry-r-uatperlb-row {
margin-top: 1.5rem;
gap: 2rem;
}
@media (min-width: 1280px) {
.industry-r-uatperlb-row {
margin-top: 2rem;
}
}
.industry-cta-section {
padding-block: 2rem;
}
@media (min-width: 1024px) {
.industry-cta-section {
padding-block: 3rem;
}
}
.industry-cta-grid {
border-radius: 20px;
background-color: #f7f6f3;
}
@media (min-width: 992px) {
.industry-cta-grid {
min-height: 400px;
}
}
/* Stacked (below lg): image column first, text under it. */
@media (max-width: 991.98px) {
.industry-cta-grid > .col-lg-5 {
order: -1;
}
}
.industry-cta-row {
padding: 3rem 1.5rem;
}
@media (min-width: 640px) {
.industry-cta-row {
padding-inline: 2.5rem;
}
}
@media (min-width: 768px) {
.industry-cta-row {
padding-inline: 3rem;
}
}
@media (min-width: 1024px) {
.industry-cta-row {
padding-block: 2.25rem;
}
}
@media (min-width: 1280px) {
.industry-cta-row {
padding-inline: 64px;
}
}
.industry-cta-box {
max-width: 920px;
}
.industry-cta-box-2 {
margin-top: 1.25rem;
max-width: 900px;
color: #2f3440;
}
:where(.industry-cta-box-2 > :not(:last-child)) {
margin-top: 0;
margin-bottom: 1rem;
}
.industry-cta-row-2 {
margin-top: 1.75rem;
gap: 0.75rem;
}
@media (min-width: 640px) {
.industry-cta-row-2 {
gap: 15px;
}
}
.industry-cta-row-3 {
min-height: 300px;
padding: 2.5rem 1.5rem;
}
@media (min-width: 640px) {
.industry-cta-row-3 {
min-height: 460px;
padding-inline: 2rem;
}
}
@media (min-width: 992px) {
.industry-cta-row-3 {
min-height: 0;
}
}
.industry-cta-box-3 {
max-width: 440px;
padding: 1rem;
box-shadow: 0 10px 30px #0034662e;
}
@media (min-width: 1280px) {
.industry-cta-box-3 {
padding: 1.5rem;
}
}
/* Tablets (stacked, full width): a shorter image band and a smaller framed photo. */
@media (min-width: 768px) and (max-width: 991.98px) {
.industry-cta-row-3 {
min-height: 320px;
}
.industry-cta-box-3 {
max-width: 340px;
padding: .75rem;
}
}
}
/* ==========================================================================
7. Consultation & proposal modals
========================================================================== */
@layer components {
.consult-input-underline {
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: #555;
font-size: .875rem;
line-height: calc(1.25 / .875);
color: lab(8.11897% .811279 -12.254);
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.consult-input-underline::placeholder {
color: #555;
}
.consult-input-underline:focus {
border-color: lab(48.4493% 77.4328 61.5452);
outline-style: none;
}
.consult-consultation-modal-row {
z-index: 100;
background-color: color-mix(in oklab, #000 50%, transparent);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.consult-consultation-modal-box {
max-height: 90vh;
max-width: 1220px;
overflow-y: auto;
border-radius: 1.5rem;
background-color: #f8f9fb;
padding: 1.5rem;
box-shadow: 0 25px 50px -12px #00000040;
}
@media (min-width: 640px) {
.consult-consultation-modal-box {
padding: 2.5rem;
}
}
@media (min-width: 1024px) {
.consult-consultation-modal-box {
padding: 3rem;
}
}
.consult-consultation-modal-btn {
top: 1.25rem;
right: 1.25rem;
cursor: pointer;
border-radius: 3.40282e38px;
color: lab(65.9269% -.832707 -8.17474);
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.consult-consultation-modal-btn:hover {
color: lab(27.1134% -.956401 -12.3224);
background-color: lab(91.6229% -.159085 -2.26791);
}
}
.consult-consultation-modal-stack {
flex-direction: column;
gap: 2rem;
}
@media (min-width: 1024px) {
.consult-consultation-modal-stack {
flex-direction: row;
gap: 3rem;
align-items: center;
justify-content: center;
}
}
@media (min-width: 1024px) {
.consult-consultation-modal-stack-2 {
max-width: 500px;
flex: 1;
}
}
.consult-consultation-modal-title {
font-size: 1.875rem;
line-height: 1.2;
font-weight: 600;
letter-spacing: -.025em;
color: #111;
}
@media (min-width: 640px) {
.consult-consultation-modal-title {
font-size: 2.25rem;
line-height: calc(2.5 / 2.25);
}
}
.consult-consultation-modal-text {
font-size: 18px;
color: #555;
}
@media (min-width: 640px) {
.consult-consultation-modal-text {
font-size: 1rem;
line-height: 1.5;
}
}
.consult-consultation-modal-box-2 {
margin-top: 1.5rem;
}
@media (min-width: 1024px) {
.consult-consultation-modal-box-2 {
margin-top: 2rem;
}
}
.consult-consultation-modal-img {
object-fit: cover;
}
@media (min-width: 768px) {
.consult-consultation-modal-img {
width: 85%;
}
}
.consult-consultation-modal-box-3 {
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
}
@media (min-width: 640px) {
.consult-consultation-modal-box-3 {
padding: 2rem;
}
}
@media (min-width: 1024px) {
.consult-consultation-modal-box-3 {
max-width: 696px;
flex: 1;
}
}
:where(.consult-consultation-modal-form > :not(:last-child)) {
margin-top: 0;
margin-bottom: 1.5rem;
}
.consult-consultation-modal-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 640px) {
.consult-consultation-modal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.consult-consultation-modal-label {
font-size: .75rem;
line-height: calc(1 / .75);
font-weight: 500;
color: #555;
}
.consult-consultation-modal-box-4 {
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: #555;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.consult-consultation-modal-box-4:focus-within {
border-color: lab(48.4493% 77.4328 61.5452);
}
.consult-consultation-modal-textarea {
resize: none;
border-radius: .75rem;
border-style: solid;
border-width: 1px;
border-color: lab(91.6229% -.159085 -2.26791);
padding: 0.75rem;
font-size: .875rem;
line-height: calc(1.25 / .875);
color: lab(8.11897% .811279 -12.254);
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.consult-consultation-modal-textarea::placeholder {
color: #555;
}
.consult-consultation-modal-textarea:focus {
border-color: lab(48.4493% 77.4328 61.5452);
outline-style: none;
}
.consult-consultation-modal-btn-2 {
cursor: pointer;
gap: 0.5rem;
border-radius: 3.40282e38px;
background-image: linear-gradient(to right in oklab, #d61a2c 0%, #a60d1d 100%);
padding-block: 0.875rem;
font-size: 16px;
font-weight: 600;
box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.consult-consultation-modal-btn-2:hover {
filter: brightness(110%);
}
}
.consult-consultation-modal-btn-2:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px lab(55.4814% 75.0732 48.8528), 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
outline-style: none;
}
.consult-consultation-modal-btn-2:disabled {
opacity: .6;
}
.consult-set-error-span-label {
font-size: 11px;
color: lab(55.4814% 75.0732 48.8528);
}
.consult {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.consult-phone-error {
border-color: lab(55.4814% 75.0732 48.8528);
}
.consult-not-phone-error {
border-color: #555;
}
.consult-2 {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.consult-2:focus-within {
border-color: lab(48.4493% 77.4328 61.5452);
}
.consult-3 {
border-bottom-style: solid;
border-bottom-width: 1px;
font-size: .875rem;
line-height: calc(1.25 / .875);
color: lab(8.11897% .811279 -12.254);
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.consult-3::placeholder {
color: #555;
}
.consult-3:focus {
outline-style: none;
}
.consult-email-error {
border-color: lab(55.4814% 75.0732 48.8528);
}
.consult-email-error:focus {
border-color: lab(48.4493% 77.4328 61.5452);
}
.consult-not-email-error {
border-color: #555;
}
.consult-not-email-error:focus {
border-color: lab(48.4493% 77.4328 61.5452);
}
.consult-4 {
border-radius: .75rem;
padding: 0.875rem;
font-size: .875rem;
line-height: calc(1.25 / .875);
}
.consult-success {
border-style: solid;
border-width: 1px;
border-color: lab(92.4222% -26.4702 12.9427);
background-color: lab(98.1563% -5.60117 2.75913);
color: lab(47.0329% -47.0239 31.4788);
}
.consult-not-success {
border-style: solid;
border-width: 1px;
border-color: lab(86.017% 19.8815 7.75869);
background-color: lab(96.5005% 4.18511 1.52329);
color: lab(40.4273% 67.2623 53.7441);
}
.consult-5 {
height: 1.25rem;
width: 1.25rem;
animation: spin 1s linear infinite;
}
:where(.proposal-select-box > :not(:last-child)) {
margin-top: 0;
margin-bottom: 0.25rem;
}
.proposal-select-label {
font-size: 16px;
font-weight: 500;
}
.proposal-select-label-required {
color: #d10000;
}
.proposal-trigger {
cursor: pointer;
border-bottom-style: solid;
border-bottom-width: 1px;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.proposal-trigger-not-has-error {
border-color: lab(91.6229% -.159085 -2.26791);
}
@media (hover: hover) {
.proposal-trigger-not-has-error:hover {
border-color: #d10000;
}
}
.proposal-trigger-label {
gap: 0.25rem;
background-color: lab(96.5005% 4.18511 1.52329);
padding-block: 0.125rem;
font-size: .75rem;
line-height: calc(1 / .75);
font-weight: 500;
color: #d10000;
}
.proposal-trigger-2 {
margin-left: 0.125rem;
font-size: .75rem;
line-height: calc(1 / .75);
}
@media (hover: hover) {
.proposal-trigger-2:hover {
color: lab(40.4273% 67.2623 53.7441);
}
}
.proposal-trigger-label-not-length {
font-size: .875rem;
line-height: calc(1.25 / .875);
color: lab(85.1236% -.612259 -3.7138);
}
.proposal-trigger-row {
min-height: 28px;
gap: 0.375rem;
}
.proposal-trigger-label-sel {
font-size: 16px;
color: #170f49;
}
.proposal-trigger-row-2 {
min-height: 25px;
gap: 0.375rem;
}
.proposal-trigger-3 {
height: 1rem;
width: 1rem;
color: lab(65.9269% -.832707 -8.17474);
}
.proposal-popup {
cursor: pointer;
padding-inline: 0.75rem;
font-size: .75rem;
line-height: calc(1 / .75);
font-weight: 500;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.proposal-popup-selected {
background-color: lab(96.5005% 4.18511 1.52329);
color: #d10000;
}
.proposal-popup-not-selected {
color: lab(27.1134% -.956401 -12.3224);
}
@media (hover: hover) {
.proposal-popup-not-selected:hover {
background-color: lab(98.2596% -.247031 -.706708);
}
}
.proposal-popup-2 {
height: 0.875rem;
width: 0.875rem;
color: #d10000;
}
.proposal-popup-box {
z-index: 30;
}
.proposal-popup-multi {
max-height: 104px;
}
.proposal-popup-not-multi {
max-height: 7rem;
}
.proposal-popup-3 {
overflow-y: auto;
border-radius: .75rem;
border-style: solid;
border-width: 1px;
border-color: lab(96.1596% -.082314 -1.13575);
box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
}
.proposal-modal-row {
z-index: 100;
padding: 0.75rem;
}
@media (min-width: 640px) {
.proposal-modal-row {
padding: 1.5rem;
}
}
.proposal-modal-box {
background-color: color-mix(in oklab, #000 50%, transparent);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.proposal-modal-box-2 {
z-index: 10;
max-height: 92vh;
max-width: 66.375rem;
transform: rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);
overflow: hidden auto;
border-radius: 28px;
border-style: solid;
border-width: 1px;
border-color: lab(96.1596% -.082314 -1.13575);
padding-inline: 1.5rem;
color: #000;
box-shadow: 0 25px 50px -12px #00000040;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (min-width: 640px) {
.proposal-modal-box-2 {
padding-inline: 2.5rem;
}
}
.proposal-modal-box-3 {
margin-bottom: 2rem;
}
:where(.proposal-modal-box-3 > :not(:last-child)) {
margin-bottom: 0.25rem;
margin-top: 0;
}
.proposal-modal-title {
margin-bottom: 0.75rem;
font-size: 1.5rem;
line-height: calc(2 / 1.5);
font-weight: 600;
letter-spacing: .025em;
}
@media (min-width: 640px) {
.proposal-modal-title {
font-size: 1.875rem;
line-height: 1.2;
}
}
.proposal-modal-text {
font-size: .75rem;
line-height: calc(1 / .75);
color: #6f6c8f;
}
@media (min-width: 640px) {
.proposal-modal-text {
font-size: 18px;
}
}
.proposal-modal-box-4 {
margin-bottom: 2rem;
border-radius: 1rem;
border-style: solid;
border-width: 1px;
border-color: lab(96.1596% -.082314 -1.13575);
background-color: color-mix(in oklab, lab(98.2596% -.247031 -.706708) 80%, transparent);
padding: 0.75rem;
}
@media (min-width: 640px) {
.proposal-modal-box-4 {
padding: 1rem;
}
}
.proposal-modal-row-2 {
margin-top: 2.5rem;
}
.proposal-modal-label {
font-size: .75rem;
line-height: calc(1 / .75);
font-weight: 500;
color: lab(65.9269% -.832707 -8.17474);
}
.proposal-set-error-p-text {
font-size: 11px;
color: lab(55.4814% 75.0732 48.8528);
}
:where(.proposal-step1-box > :not(:last-child)) {
margin-top: 0;
margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
:where(.proposal-step1-box > :not(:last-child)) {
margin-bottom: 1.75rem;
}
}
.proposal-step1-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 640px) {
.proposal-step1-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
}
}
:where(.proposal-step1-box-2 > :not(:last-child)) {
margin-top: 0;
margin-bottom: 0.25rem;
}
.proposal-step1-input {
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: lab(91.6229% -.159085 -2.26791);
padding-block: 0.75rem;
font-size: 16px;
color: #170f49;
}
.proposal-step1-input::placeholder {
color: lab(85.1236% -.612259 -3.7138);
}
.proposal-step1-input:focus {
border-color: #d10000;
outline-style: none;
}
.proposal-step1-input-2 {
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: lab(91.6229% -.159085 -2.26791);
font-size: 16px;
color: #170f49;
}
.proposal-step1-input-2::placeholder {
color: lab(85.1236% -.612259 -3.7138);
}
.proposal-step1-input-2:focus {
border-color: #d10000;
outline-style: none;
}
.proposal-update {
border-bottom-style: solid;
border-bottom-width: 2px;
padding-block: 0.75rem;
font-size: 16px;
color: #170f49;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.proposal-update::placeholder {
color: lab(85.1236% -.612259 -3.7138);
}
.proposal-update:focus {
outline-style: none;
}
.proposal-update-not-name-bad {
border-color: lab(91.6229% -.159085 -2.26791);
}
.proposal-update-not-name-bad:focus {
border-color: #d10000;
}
.proposal-update-2 {
border-bottom-style: solid;
border-bottom-width: 2px;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.proposal-update-not-phone-bad {
border-color: lab(91.6229% -.159085 -2.26791);
}
.proposal-update-not-phone-bad:focus-within {
border-color: #d10000;
}
.proposal-update-3 {
border-bottom-style: solid;
border-bottom-width: 1px;
font-size: 16px;
color: #170f49;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.proposal-update-3::placeholder {
color: lab(85.1236% -.612259 -3.7138);
}
.proposal-update-3:focus {
outline-style: none;
}
.proposal-update-4 {
resize: none;
border-bottom-style: solid;
border-bottom-width: 1px;
font-size: 16px;
color: #170f49;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.proposal-update-4::placeholder {
color: lab(85.1236% -.612259 -3.7138);
}
.proposal-update-4:focus {
outline-style: none;
}
.proposal-step3-label {
color: lab(65.9269% -.832707 -8.17474);
}
.proposal-file-slot-row {
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: lab(91.6229% -.159085 -2.26791);
}
.proposal-file-slot-label {
max-width: 85%;
text-overflow: ellipsis;
font-size: .875rem;
line-height: calc(1.25 / .875);
font-weight: 500;
color: #170f49;
}
.proposal-file-slot-btn {
cursor: pointer;
border-radius: 3.40282e38px;
background-color: lab(96.5005% 4.18511 1.52329);
color: #d10000;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.proposal-file-slot-btn:hover {
background-color: lab(92.243% 10.2865 3.83865);
}
}
.proposal-file-slot-input {
cursor: pointer;
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: lab(91.6229% -.159085 -2.26791);
font-size: .75rem;
line-height: calc(1 / .75);
color: lab(47.7841% -.393212 -10.0268);
}
.proposal-file-slot-input::file-selector-button {
padding: 0.25rem 0.75rem;
font-size: .75rem;
line-height: calc(1 / .75);
color: #d10000;
margin-right: 1rem;
border-radius: .375rem;
border-style: solid;
border-width: 0;
background-color: lab(96.5005% 4.18511 1.52329);
font-weight: 600;
}
:where(.proposal-step4-box > :not(:last-child)) {
margin-top: 0;
margin-bottom: 1.25rem;
}
.proposal-step4-textarea {
resize: none;
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: lab(91.6229% -.159085 -2.26791);
padding-block: 0.75rem;
font-size: 16px;
color: lab(8.11897% .811279 -12.254);
}
.proposal-step4-textarea::placeholder {
color: lab(85.1236% -.612259 -3.7138);
}
.proposal-step4-textarea:focus {
border-color: #d10000;
outline-style: none;
}
:where(.proposal-step4-box-2 > :not(:last-child)) {
margin-top: 0;
margin-bottom: 0.375rem;
}
.proposal-step4-label {
cursor: pointer;
gap: 0.5rem;
font-size: 16px;
color: #a0a3bd;
}
.proposal-step4-input {
color: #d10000;
}
.proposal-step4-link {
color: #003ec3;
text-decoration-line: underline;
}
.proposal-header-btn-step {
cursor: pointer;
gap: 0.5rem;
font-size: 16px;
font-weight: 500;
color: #514f6e;
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.proposal-header-btn-step:hover {
opacity: .8;
}
}
.proposal-header-img-step {
height: 2.25rem;
width: 2.25rem;
object-fit: contain;
}
.proposal-header-btn {
height: 2.25rem;
width: 2.25rem;
cursor: pointer;
border-radius: 3.40282e38px;
background-color: lab(96.1596% -.082314 -1.13575);
color: lab(47.7841% -.393212 -10.0268);
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.proposal-header-btn:hover {
background-color: lab(91.6229% -.159085 -2.26791);
color: lab(16.1051% -1.18239 -11.7533);
}
}
.proposal-stepper {
display: flex;
align-items: center;
gap: 0.625rem;
}
@media (min-width: 640px) {
.proposal-stepper {
gap: 0.75rem;
}
}
.proposal-stepper-step {
cursor: pointer;
}
.proposal-stepper-row {
display: flex;
height: 1.75rem;
width: 1.75rem;
align-items: center;
border-radius: 3.40282e38px;
font-size: .75rem;
line-height: calc(1 / .75);
font-weight: 500;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (min-width: 640px) {
.proposal-stepper-row {
height: 2rem;
width: 2rem;
}
}
.proposal-stepper-active {
background-color: #d10000;
color: #fff;
box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}
.proposal-stepper-completed {
border-style: solid;
border-width: 1px;
border-color: #d10000;
color: lab(65.9269% -.832707 -8.17474);
}
.proposal-stepper-not-completed {
border-style: solid;
border-width: 1px;
border-color: lab(91.6229% -.159085 -2.26791);
background-color: #fff;
color: lab(65.9269% -.832707 -8.17474);
}
.proposal-stepper-active-2 {
font-weight: 500;
color: #d10000;
}
.proposal-stepper-completed-2 {
font-weight: 600;
color: #170f49;
}
.proposal-stepper-not-completed-2 {
font-weight: 400;
color: #474343;
}
.proposal-stepper-label {
margin-top: 0.125rem;
display: block;
font-size: 11px;
font-weight: 400;
}
.proposal-stepper-completed-3 {
color: #16a34a;
}
.proposal-stepper-not-completed-3 {
color: #a0a3bd;
}
.proposal-stepper-box-length {
flex: 1;
padding-inline: 0.5rem;
}
@media (min-width: 640px) {
.proposal-stepper-box-length {
padding-inline: 1rem;
}
}
.proposal-stepper-box-length-2 {
height: 0.125rem;
width: 100%;
border-radius: 3.40282e38px;
}
.proposal-stepper-id {
background-color: #d10000;
}
.proposal-stepper-not-id {
background-color: lab(91.6229% -.159085 -2.26791);
}
.proposal-footer {
cursor: pointer;
border-radius: 3.40282e38px;
background-image: linear-gradient(#003466 0% 100%);
padding: 0.75rem 2.5rem;
font-size: 22px;
font-weight: 500;
box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.proposal-footer:hover:enabled {
opacity: .95;
}
}
.proposal-footer:disabled {
cursor: not-allowed;
opacity: .4;
}
.proposal-footer-2 {
min-width: 180px;
cursor: pointer;
gap: 0.5rem;
border-radius: 3.40282e38px;
background-image: linear-gradient(#003466 0% 100%);
padding: 0.75rem 2.5rem;
font-size: 22px;
font-weight: 500;
box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.proposal-footer-2:hover:enabled {
opacity: .95;
}
}
.proposal-footer-2:disabled {
cursor: not-allowed;
opacity: .5;
}
.proposal-footer-3 {
height: 1rem;
width: 1rem;
animation: spin 1s linear infinite;
}
}
/* ==========================================================================
8. Home page
========================================================================== */
/* Built for What's Next: business challenge cards */
@layer components {
.home-challenges-section {
padding-block: 3rem;
background-color: #fcfbf9;
}
@media (min-width: 768px) {
.home-challenges-section {
padding-block: 4rem;
}
}
@media (min-width: 1280px) {
.home-challenges-section {
padding-block: 5rem;
}
}
.home-challenges-head {
margin-bottom: 2rem;
padding-inline: 0.25rem;
}
@media (min-width: 1024px) {
.home-challenges-head {
margin-bottom: 2.5rem;
padding-inline: 0.25rem;
}
}
.home-challenges-eyebrow {
margin-bottom: 0.75rem;
color: #d7192f;
}
.home-challenges-lead {
margin-top: 1rem;
}
.home-challenges-grid {
--bs-gutter-x: 1.1rem;
--bs-gutter-y: 1.1rem;
}
@media (min-width: 1024px) {
.home-challenges-grid {
--bs-gutter-x: 1.4rem;
--bs-gutter-y: 1.4rem;
}
}
/* Card: full-height image with a beige title bar at the bottom. On hover the
image stays put and the bar slides up over it to show the description + link. */
.home-challenge-card {
height: 340px;
border-radius: 14px;
background-color: #f4f1ec;
box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04);
}
@media (min-width: 1280px) {
.home-challenge-card {
height: 360px;
}
}
.home-challenge-media {
position: absolute;
inset: 0;
}
.home-challenge-img {
object-fit: cover;
}
.home-challenge-body {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
padding: 1.4rem 1.6rem 1.5rem;
background-color: #f4f1ec;
}
.home-challenge-title {
font-size: 24px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.home-challenge-title {
font-size: 29px;
}
}
.home-challenge-more {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.3s ease;
}
.home-challenge-text {
padding-top: 0.6rem;
font-size: 14px;
line-height: 1.5;
color: #4a5568;
}
@media (min-width: 1280px) {
.home-challenge-text {
font-size: 15px;
}
}
.home-challenge-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.75rem;
font-size: 15px;
font-weight: 600;
color: #d7192f;
}
.home-challenge-arrow {
font-size: 1.2em;
line-height: 1;
transition: transform 0.2s ease;
}
.home-challenge-link:hover .home-challenge-arrow {
transform: translateX(3px);
}
/* hover (mouse) and keyboard focus */
.home-challenge-card:hover .home-challenge-more,
.home-challenge-card:focus-within .home-challenge-more {
max-height: 13rem;
opacity: 1;
}
/* touch screens have no hover: always show the description and link */
@media (hover: none) {
.home-challenge-card {
height: auto;
}
.home-challenge-media {
position: relative;
inset: auto;
aspect-ratio: 16 / 8;
}
.home-challenge-body {
position: static;
}
.home-challenge-more {
max-height: none;
opacity: 1;
}
}
}
/* Industries We Serve: card slider (Swiper 4.2.0) */
@layer components {
.home-industries-section {
padding-block: 3rem;
}
@media (min-width: 768px) {
.home-industries-section {
padding-block: 4rem;
}
}
.home-industries-head {
margin-bottom: 1.75rem;
}
@media (min-width: 1024px) {
.home-industries-head {
margin-bottom: 2.25rem;
}
}
.home-industries-eyebrow {
margin-bottom: 0.75rem;
color: var(--ink-strong);
}
.home-industries-title {
max-width: 780px;
}
.home-industries-lead {
margin-top: 1rem;
}
.home-industries-all {
gap: 0.9rem;
margin-top: 1.25rem;
padding-bottom: 0.35rem;
border-bottom: 1.5px solid currentColor;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--ink-strong);
transition: color 0.2s ease, gap 0.2s ease;
}
@media (min-width: 768px) {
.home-industries-all {
margin-top: 0;
margin-left: 2rem;
}
}
@media (min-width: 1024px) {
.home-industries-all {
font-size: 16px;
}
}
@media (hover: hover) {
.home-industries-all:hover {
gap: 1.2rem;
color: var(--primary);
}
}
/* Cards */
.home-industries-card {
height: 460px;
border-radius: 12px;
background-color: #1f1a15;
}
@media (min-width: 768px) {
.home-industries-card {
height: clamp(460px, 34vw, 580px);
}
}
.home-industries-img {
object-fit: cover;
transition: transform 0.6s ease;
}
@media (hover: hover) {
.home-industries-card:hover .home-industries-img {
transform: scale(1.03);
}
}
.home-industries-tag {
top: 1rem;
left: 1rem;
z-index: 1;
padding: 0.4rem 1.1rem;
border: 1.5px solid rgba(255, 255, 255, 0.9);
border-radius: 999px;
background-color: rgba(0, 0, 0, 0.12);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
color: #fff;
}
@media (min-width: 1024px) {
.home-industries-tag {
top: 1.6rem;
left: 1.6rem;
padding: 0.5rem 1.5rem;
font-size: 14px;
}
}
.home-industries-body {
right: 0.75rem;
bottom: 0.75rem;
left: 0.75rem;
z-index: 1;
padding: 1.25rem 1.25rem 1.1rem;
border-radius: 14px;
background-color: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
@media (min-width: 768px) {
.home-industries-body {
right: 1.1rem;
bottom: 1.1rem;
left: auto;
width: min(450px, 60%);
padding: 1.9rem 2.25rem 1.7rem;
}
}
/* ease-in-out glide between cards (Swiper sets only the duration inline) */
.home-industries-slider .swiper-wrapper {
transition-timing-function: cubic-bezier(.45, 0, .2, 1);
}
/* Card states: the waiting card sits slightly zoomed and dimmed, then eases
into focus as it becomes active, and its info box rises in. */
.home-industries-slider .home-industries-img {
scale: 1.08;
filter: brightness(.78);
transition: transform .6s ease, scale 1.1s cubic-bezier(.22, .61, .36, 1), filter 1.1s ease;
}
.home-industries-slider .swiper-slide-active .home-industries-img,
.home-industries-slider .swiper-slide-duplicate-active .home-industries-img {
scale: 1;
filter: none;
}
.home-industries-slider .swiper-slide-active .home-industries-body,
.home-industries-slider .swiper-slide-active .home-industries-tag {
animation: slide-up-fade .8s cubic-bezier(.22, .61, .36, 1) .25s both;
}
@media (prefers-reduced-motion: reduce) {
.home-industries-slider .home-industries-img {
scale: 1;
filter: none;
transition: none;
}
.home-industries-slider .swiper-slide-active .home-industries-body,
.home-industries-slider .swiper-slide-active .home-industries-tag {
animation: none;
}
}
/* the peeking (next) card shows its info box on the left, as in the design */
@media (min-width: 768px) {
.home-industries-slider .swiper-slide:not(.swiper-slide-active) .home-industries-body {
right: auto;
left: 1.1rem;
padding: 1.6rem 2rem 1.7rem;
}
.home-industries-slider .swiper-slide:not(.swiper-slide-active) .home-industries-card-link {
display: none;
}
}
.home-industries-card-title {
font-size: 28px;
font-weight: 600;
line-height: 1.15;
color: var(--ink-strong);
}
@media (min-width: 1280px) {
.home-industries-card-title {
font-size: 40px;
}
}
.home-industries-card-text {
margin-top: 0.75rem;
font-size: 14px;
line-height: 1.6;
color: #5b6475;
}
@media (min-width: 1280px) {
.home-industries-card-text {
margin-top: 1rem;
font-size: 16px;
}
}
.home-industries-card-link {
display: inline-flex;
align-items: center;
gap: 0.75rem;
margin-top: 1.1rem;
padding-bottom: 0.25rem;
border-bottom: 1.5px solid currentColor;
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
color: var(--ink-strong);
transition: gap 0.2s ease, color 0.2s ease;
}
@media (min-width: 1280px) {
.home-industries-card-link {
margin-top: 1.5rem;
font-size: 19px;
}
}
@media (hover: hover) {
.home-industries-card-link:hover {
gap: 1rem;
color: var(--primary);
}
}
/* Pagination + arrows */
.home-industries-controls {
gap: 0.75rem;
margin-top: 1.5rem;
}
.home-industries-pagination {
margin-right: 1rem;
white-space: nowrap;
}
.home-industries-nav {
width: 46px;
height: 46px;
padding: 0;
border: 1.5px solid #9aa3b2;
background-color: #fff;
font-size: 14px;
color: var(--ink-strong);
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
@media (hover: hover) {
.home-industries-nav:hover {
border-color: var(--red);
background-color: var(--red);
color: #fff;
}
}
.home-industries-nav.swiper-button-disabled {
opacity: 0.5;
pointer-events: none;
}
}
/* Swiper pagination dots (unlayered so they win over swiper.min.css) */
.home-industries-pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
margin: 0 4px;
background-color: #c5cad3;
opacity: 1;
}
.home-industries-pagination .swiper-pagination-bullet-active {
background-color: var(--red);
}
@layer components {
.header-mobile-submenu-active {
color: #003466;
text-decoration-line: underline;
}
.proposal-file-slot {
height: 1rem;
width: 1rem;
}
.home-core-capabilities-br {
display: none;
}
@media (min-width: 640px) {
.home-core-capabilities-br {
display: block;
}
}
.home-cap-active {
background-color: #fff;
font-weight: 600;
color: #0b1c30;
}
@media (min-width: 1024px) {
.home-cap-active {
background-color: #0000;
}
}
.home-cap-inactive {
color: #4a5568;
}
@media (hover: hover) {
.home-cap-inactive:hover {
color: #0b1c30;
}
}
.home-cap-bullet {
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: #e2e6ec;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 16px;
line-height: 1.3;
color: #1f2937;
}
@media (min-width: 1280px) {
.home-cap-bullet {
font-size: 19px;
}
}
.home-core-capabilities-box {
animation: .45s ease-out fade-slide-x;
}
.home-core-capabilities-box-2 {
padding-inline: 1.5rem;
padding-top: 2rem;
}
@media (min-width: 768px) {
.home-core-capabilities-box-2 {
padding-left: 2.5rem;
padding-right: 2rem;
border-right-style: solid;
border-right-width: 2px;
border-color: #003466;
padding-bottom: 1.5rem;
}
}
@media (min-width: 1280px) {
.home-core-capabilities-box-2 {
padding-left: 52px;
padding-top: 2.75rem;
}
}
.home-core-capabilities-text {
font-size: 11px;
font-weight: 600;
letter-spacing: .22em;
color: var(--red);
}
@media (min-width: 1280px) {
.home-core-capabilities-text {
font-size: 13px;
}
}
.home-core-capabilities-title {
max-width: 560px;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 28px;
line-height: 1.08;
font-weight: 600;
letter-spacing: -.02em;
color: #0b1c30;
}
@media (min-width: 768px) {
.home-core-capabilities-title {
font-size: 34px;
}
}
@media (min-width: 1280px) {
.home-core-capabilities-title {
font-size: 44px;
}
}
.home-core-capabilities-text-2 {
max-width: 560px;
font-size: 15px;
color: #4a5568;
}
@media (min-width: 1280px) {
.home-core-capabilities-text-2 {
font-size: 18px;
}
}
.home-core-capabilities-box-3 {
margin-top: 1.5rem;
aspect-ratio: 16 / 9;
}
@media (min-width: 768px) {
.home-core-capabilities-box-3 {
margin-top: 0;
aspect-ratio: auto;
min-height: 260px;
height: 100%;
}
}
.home-core-capabilities-grid-2 {
--bs-gutter-x: 0;
--bs-gutter-y: 0;
padding: 1rem 1.5rem 2rem;
}
@media (min-width: 768px) {
.home-core-capabilities-grid-2 {
--bs-gutter-x: 3.5rem;
padding-inline: 2.5rem;
}
}
@media (min-width: 1280px) {
.home-core-capabilities-grid-2 {
padding-inline: 52px;
padding-top: 1.5rem;
}
}
.home-service-details-list {
border-color: #e2e6ec;
}
.home-service-details-list-column-index {
border-top-style: solid;
border-top-width: 1px;
}
@media (min-width: 768px) {
.home-service-details-list-not-column-index {
border-top-style: solid;
border-top-width: 1px;
}
}
.home-core-capabilities-label {
display: none;
width: 5px;
background-color: var(--red);
}
@media (min-width: 1024px) {
.home-core-capabilities-label {
display: block;
}
}
.home-set-phone-error {
border-color: lab(63.7053% 60.7449 31.3109);
}
.home-set-phone-error-2 {
border-color: #d6dbe3;
}
.home-set-phone-error-label {
font-size: .75rem;
line-height: calc(1 / .75);
color: lab(48.4493% 77.4328 61.5452);
}
.home-set-status-box {
border-radius: .5rem;
border-style: solid;
border-width: 1px;
padding: 0.75rem;
font-size: .875rem;
line-height: calc(1.25 / .875);
}
.home-set-status-box-success {
border-color: lab(92.4222% -26.4702 12.9427);
background-color: lab(98.1563% -5.60117 2.75913);
color: lab(47.0329% -47.0239 31.4788);
}
.home-set-status-box-not-success {
border-color: lab(86.017% 19.8815 7.75869);
background-color: lab(96.5005% 4.18511 1.52329);
color: lab(40.4273% 67.2623 53.7441);
}
.home-hero-section {
padding-top: 2.5rem;
padding-bottom: 0.75rem;
}
@media (min-width: 640px) {
.home-hero-section {
padding-top: 3rem;
padding-bottom: 2.5rem;
}
}
@media (min-width: 768px) {
.home-hero-section {
padding-top: 3.5rem;
padding-bottom: 3rem;
}
}
@media (min-width: 1024px) {
.home-hero-section {
padding-top: 4rem;
padding-bottom: 2.5rem;
}
}
.home-hero-text {
margin-bottom: 0.75rem;
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
color: #fe1718;
}
@media (min-width: 640px) {
.home-hero-text {
margin-bottom: 1rem;
font-size: 10px;
}
}
@media (min-width: 768px) {
.home-hero-text {
font-size: 11px;
}
}
@media (min-width: 1024px) {
.home-hero-text {
font-size: 16px;
}
}
.home-hero-title {
max-width: 900px;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: clamp(2rem, 7vw, 4rem);
line-height: 1.12;
font-weight: 700;
letter-spacing: -.035em;
color: #111827;
}
@media (min-width: 640px) {
.home-hero-title {
font-size: clamp(2.4rem, 6vw, 4rem);
}
}
@media (min-width: 768px) {
.home-hero-title {
font-size: clamp(2.8rem, 5vw, 4rem);
}
}
.home-br {
display: none;
}
@media (min-width: 640px) {
.home-br {
display: inline;
}
}
.home-hero-box {
isolation: isolate;
margin-inline: 1rem;
margin-top: 1.75rem;
max-height: 760px;
min-height: 450px;
border-radius: 20px;
background-color: #000;
}
@media (min-width: 640px) {
.home-hero-box {
margin-inline: 1.5rem;
margin-top: 2rem;
min-height: 540px;
border-radius: 24px;
height: 68vh;
}
}
@media (min-width: 768px) {
.home-hero-box {
margin-inline: 2rem;
min-height: 450px;
height: 50vh;
}
}
@media (min-width: 1024px) {
.home-hero-box {
margin-inline: 5.5vw;
margin-top: 2.5rem;
min-height: 560px;
border-radius: 25px;
height: 60vh;
}
}
@media (min-width: 1280px) {
.home-hero-box {
height: 64vh;
}
}
@media (min-width: 1536px) {
.home-hero-box {
height: 66vh;
}
}
.home-hero-video {
object-fit: cover;
}
.home-hero-overlay {
background-color: color-mix(in oklab, #000 15%, transparent);
}
.home-hero-box-2 {
bottom: 1rem;
left: 1rem;
z-index: 10;
width: calc(100% - 32px);
max-width: 430px;
border-radius: 16px;
padding: 1rem;
box-shadow: 0 12px 35px #0000002e;
transition-property: transform, translate, scale, rotate;
transition-timing-function: cubic-bezier(0, 0, .2, 1);
transition-duration: .3s;
}
@media (hover: hover) {
.home-hero-box-2:hover {
translate: 0 -0.25rem;
}
}
@media (min-width: 640px) {
.home-hero-box-2 {
bottom: 1.25rem;
left: 1.25rem;
width: 65%;
border-radius: 18px;
padding: 1.25rem;
}
}
@media (min-width: 768px) {
.home-hero-box-2 {
bottom: 1.5rem;
left: 1.5rem;
width: 53%;
}
}
@media (min-width: 1024px) {
.home-hero-box-2 {
bottom: 4.3%;
left: 2.35%;
width: max(400px, 28.5%);
border-radius: 19px;
padding: 1.75rem;
}
}
@media (hover: hover) and (min-width: 1024px) {
.home-hero-box-2:hover {
translate: 0 -0.375rem;
}
}
.home-hero-text-2 {
margin-bottom: 0.75rem;
font-size: 8px;
font-weight: 600;
letter-spacing: .12em;
color: #718096;
}
@media (min-width: 640px) {
.home-hero-text-2 {
margin-bottom: 1rem;
font-size: 10px;
}
}
@media (min-width: 768px) {
.home-hero-text-2 {
font-size: 11px;
}
}
@media (min-width: 1024px) {
.home-hero-text-2 {
font-size: 12px;
}
}
.home-hero-title-2 {
max-width: 350px;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 16px;
line-height: 1.3;
font-weight: 700;
letter-spacing: -.015em;
color: #172033;
}
@media (min-width: 640px) {
.home-hero-title-2 {
font-size: 18px;
}
}
@media (min-width: 768px) {
.home-hero-title-2 {
font-size: 19px;
}
}
@media (min-width: 1024px) {
.home-hero-title-2 {
font-size: 21px;
}
}
.home-hero-br {
display: none;
}
@media (min-width: 1024px) {
.home-hero-br {
display: block;
}
}
.home-hero-text-3 {
margin-top: 0.75rem;
max-width: 350px;
font-size: 10px;
line-height: 1.55;
color: #6b7280;
}
@media (min-width: 640px) {
.home-hero-text-3 {
margin-top: 1rem;
font-size: 11px;
}
}
@media (min-width: 768px) {
.home-hero-text-3 {
font-size: 12px;
}
}
@media (min-width: 1024px) {
.home-hero-text-3 {
font-size: 13.5px;
}
}
.home-hero-stack-2 {
flex-direction: column;
gap: 0.5rem;
}
@media (min-width: 640px) {
.home-hero-stack-2 {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
}
.home-hero-stack-3 {
margin-inline: 1rem;
flex-direction: column;
gap: 1rem;
padding-top: 1rem;
}
@media (min-width: 640px) {
.home-hero-stack-3 {
margin-inline: 1.5rem;
padding-top: 1.25rem;
}
}
@media (min-width: 768px) {
.home-hero-stack-3 {
margin-inline: 2rem;
flex-direction: row;
}
}
@media (min-width: 1024px) {
.home-hero-stack-3 {
margin-inline: 5.2083vw;
padding-top: 1.5rem;
}
}
.home-hero-explore {
gap: 0.5rem;
}
/* Offset the scrollbar padding below the links so the label stays centred */
.home-hero-explore .home-hero-label {
margin-bottom: 0.5rem;
}
@media (min-width: 640px) {
.home-hero-explore {
gap: 0.625rem;
}
}
.home-hero-row {
gap: 0.5rem;
min-width: 0;
flex: 1 1 auto;
overflow-x: auto;
padding-bottom: 0.5rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #d1d5db transparent;
}
.home-hero-row::-webkit-scrollbar {
height: 4px;
}
.home-hero-row::-webkit-scrollbar-thumb {
background-color: #d1d5db;
border-radius: 999px;
}
.home-hero-row > * {
flex-shrink: 0;
white-space: nowrap;
}
@media (min-width: 640px) {
.home-hero-row {
gap: 0.625rem;
}
}
.home-hero-label {
margin-right: 0.125rem;
font-size: 11px;
letter-spacing: .12em;
color: #8a94a6;
}
@media (min-width: 640px) {
.home-hero-label {
margin-right: 0.25rem;
font-size: 11px;
}
}
@media (min-width: 768px) {
.home-hero-label {
font-size: 12px;
}
}
@media (min-width: 1024px) {
.home-hero-label {
font-size: 12.5px;
}
}
.home-hero-link {
border-radius: 3.40282e38px;
background-color: #f3f4f6;
padding: 0.5rem 0.875rem;
font-size: 12px;
font-weight: 500;
color: #374151;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .3s;
}
@media (hover: hover) {
.home-hero-link:hover {
background-color: var(--red);
color: #fff;
}
}
@media (min-width: 640px) {
.home-hero-link {
padding: 0.5rem 1rem;
font-size: 12px;
}
}
@media (min-width: 768px) {
.home-hero-link {
font-size: 12px;
}
}
@media (min-width: 1024px) {
.home-hero-link {
font-size: 13px;
}
}
.home-tech-partner-section {
padding-block: 2.5rem;
}
@media (min-width: 640px) {
.home-tech-partner-section {
padding-block: 3rem;
}
}
@media (min-width: 1024px) {
.home-tech-partner-section {
padding-block: 3.5rem;
}
}
@media (min-width: 1280px) {
.home-tech-partner-section {
padding-block: 4rem;
}
}
.home-tech-partner-grid {
--bs-gutter-x: 2.5rem;
--bs-gutter-y: 2.5rem;
}
@media (min-width: 1280px) {
.home-tech-partner-grid {
--bs-gutter-x: 3rem;
--bs-gutter-y: 3rem;
}
}
.home-tech-partner-text {
color: #fe1718;
}
.home-tech-partner-title {
margin-top: 1rem;
max-width: 760px;
}
@media (min-width: 640px) {
.home-tech-partner-title {
margin-top: 1.25rem;
}
}
.home-tech-partner-text-2 {
margin-top: 1.25rem;
max-width: 680px;
}
@media (min-width: 640px) {
.home-tech-partner-text-2 {
margin-top: 1.5rem;
}
}
.home-tech-partner-img {
width: 100%;
height: auto;
border-radius: 16px;
}
/* From laptop width the image matches the height of the text column beside it. */
@media (min-width: 992px) {
.home-tech-partner-media {
position: relative;
align-self: stretch;
}
.home-tech-partner-img {
position: absolute;
inset: 0 calc(var(--bs-gutter-x) * .5);
width: calc(100% - var(--bs-gutter-x));
height: 100%;
object-fit: cover;
border-radius: 20px;
}
}
.home-tech-partner-row {
aspect-ratio: 886 / 600;
border-radius: 16px;
}
@media (min-width: 1024px) {
.home-tech-partner-row {
border-radius: 20px;
}
}
.home-overlay {
background-color: color-mix(in oklab, #000 25%, transparent);
}
.home-tech-partner-box {
width: 44%;
padding: 2.5%;
box-shadow: 0 12px 30px #0f172a40;
}
.home-tech-partner-grid-2 {
margin-top: 2.5rem;
}
@media (min-width: 1024px) {
.home-tech-partner-grid-2 {
margin-top: 3.5rem;
}
}
@media (min-width: 1536px) {
.home-tech-partner-grid-2 {
margin-top: 4rem;
}
}
.home-tech-partner-box-2 {
padding-block: 1.25rem;
}
@media (min-width: 640px) {
.home-tech-partner-box-2 {
padding-block: 0.75rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.home-tech-partner-box-2 {
padding-block: 0;
padding-right: 2.5rem;
}
}
.home-tech-partner-title-2 {
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 20px;
line-height: 1.15;
font-weight: 600;
letter-spacing: -.02em;
color: #111827;
}
@media (min-width: 1280px) {
.home-tech-partner-title-2 {
font-size: 24px;
}
}
@media (min-width: 1536px) {
.home-tech-partner-title-2 {
font-size: 28px;
}
}
.home-tech-partner-text-3 {
margin-top: 0.75rem;
max-width: 330px;
font-size: 14px;
line-height: 1.55;
color: #5b6478;
}
@media (min-width: 1280px) {
.home-tech-partner-text-3 {
font-size: 16px;
}
}
@media (min-width: 1536px) {
.home-tech-partner-text-3 {
font-size: 18px;
}
}
.home-tech-partner-box-3 {
border-top-style: solid;
border-top-width: 1px;
border-color: #dedede;
padding-block: 1.25rem;
}
@media (min-width: 640px) {
.home-tech-partner-box-3 {
border-top-width: 0;
padding: 0.75rem 1.5rem;
border-left-style: solid;
border-left-width: 1px;
}
}
@media (min-width: 1024px) {
.home-tech-partner-box-3 {
padding: 0 2.5rem;
}
}
.home-tech-partner-box-4 {
border-top-style: solid;
border-top-width: 1px;
border-color: #dedede;
padding-block: 1.25rem;
}
@media (min-width: 640px) {
.home-tech-partner-box-4 {
border-top-width: 0;
padding-block: 0.75rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.home-tech-partner-box-4 {
padding: 0 2.5rem;
border-left-style: solid;
border-left-width: 1px;
}
}
.home-core-capabilities-section {
padding-block: 2.25rem;
}
@media (min-width: 640px) {
.home-core-capabilities-section {
padding-block: 2.75rem;
}
}
@media (min-width: 1024px) {
.home-core-capabilities-section {
padding-block: 3.5rem;
}
}
@media (min-width: 1536px) {
.home-core-capabilities-section {
padding-block: 2.5rem;
}
}
.home-core-capabilities-text-3 {
margin-bottom: 0.5rem;
color: #fe1718;
}
@media (min-width: 640px) {
.home-core-capabilities-text-3 {
margin-bottom: 0.75rem;
}
}
.home-core-capabilities-title-2 {
max-width: 1000px;
}
.home-core-capabilities-text-4 {
margin-top: 0.75rem;
max-width: 1150px;
}
@media (min-width: 640px) {
.home-core-capabilities-text-4 {
margin-top: 1rem;
}
}
.home-core-capabilities-grid-3 {
margin-top: 2rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
border-radius: 12px;
border-style: solid;
border-width: 1px;
border-color: #e7eaee;
}
@media (min-width: 1024px) {
.home-core-capabilities-grid-3 {
margin-top: 2.5rem;
grid-template-columns: 300px minmax(0, 1fr);
}
}
@media (min-width: 1280px) {
.home-core-capabilities-grid-3 {
grid-template-columns: 360px minmax(0, 1fr);
}
}
@media (min-width: 1536px) {
.home-core-capabilities-grid-3 {
grid-template-columns: 445px minmax(0, 1fr);
}
}
.home-core-capabilities-nav {
gap: 0.5rem;
overflow-x: auto;
background-color: #f1f4f8;
padding: 1rem;
scrollbar-width: none;
}
@media (min-width: 640px) {
.home-core-capabilities-nav {
padding-inline: 1.5rem;
}
}
@media (min-width: 1024px) {
.home-core-capabilities-nav {
gap: 0;
overflow: visible;
padding-block: 1.5rem;
flex-direction: column;
}
}
@media (min-width: 1536px) {
.home-core-capabilities-nav {
padding-left: 2rem;
padding-right: 1.75rem;
}
}
/* Mobile and tablet: the tabs scroll sideways, so show a slim red scrollbar as a cue. */
@media (max-width: 1023.98px) {
.home-core-capabilities-nav {
padding-bottom: .75rem;
scrollbar-width: thin;
scrollbar-color: var(--red) #dfe4ec;
}
.home-core-capabilities-nav::-webkit-scrollbar {
height: 4px;
}
.home-core-capabilities-nav::-webkit-scrollbar-track {
border-radius: 4px;
background-color: #dfe4ec;
}
.home-core-capabilities-nav::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: var(--red);
}
}
.home-core-capabilities-btn {
cursor: pointer;
border-radius: 4px;
padding: 0.75rem 1rem;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 14px;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (min-width: 1024px) {
.home-core-capabilities-btn {
border-radius: 0;
padding: 17px 30px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: #dfe3e9;
}
}
@media (min-width: 1280px) {
.home-core-capabilities-btn {
font-size: 18px;
}
}
@media (min-width: 1536px) {
.home-core-capabilities-btn {
font-size: 20px;
}
}
.home-tech-partner-execution-section {
padding-block: 2.5rem;
}
@media (min-width: 1024px) {
.home-tech-partner-execution-section {
padding-block: 3.5rem;
}
}
.home-tech-partner-execution-grid {
--bs-gutter-x: 0.75rem;
--bs-gutter-y: 0.75rem;
}
/* Tablets: top row = strategy photo card + "Technology built" card side by side;
the two small cards below span the full width. The right column and its inner grid
use display: contents so their pieces join this grid. */
@media (min-width: 768px) and (max-width: 991.98px) {
.home-tech-partner-execution-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .75rem;
margin: 0;
}
.home-tech-partner-execution-grid > * {
width: auto;
margin: 0;
padding: 0;
}
.home-tech-partner-execution-grid > .col-md-7,
.home-tech-partner-execution-grid .home-tech-partner-execution-grid-2 {
display: contents;
}
.home-tech-partner-execution-grid .home-tech-partner-execution-grid-3 {
grid-column: 1 / -1;
}
.home-tech-partner-execution-grid .home-tech-partner-execution-stack {
min-height: 420px;
}
}
.home-tech-partner-execution-stack {
min-height: 520px;
border-radius: 10px;
padding: 1.75rem;
}
@media (min-width: 640px) {
.home-tech-partner-execution-stack {
padding: 2.5rem;
}
}
@media (min-width: 1280px) {
.home-tech-partner-execution-stack {
padding: 52px;
}
}
/* Tablets: this card is the narrow left column, so tighter padding, a smaller title
and a one-line button. */
@media (min-width: 768px) and (max-width: 991.98px) {
.home-tech-partner-execution-stack {
padding: 1.75rem;
}
.home-tech-partner-execution-stack .home-tech-partner-execution-img {
object-position: center;
}
.home-tech-partner-execution-stack .home-tech-partner-execution-title {
font-size: 2rem;
}
/* Smaller button; the markup's py-md-2 sets its height. */
.home-tech-partner-execution-stack .home-tech-partner-execution-link {
margin-top: 1.25rem;
padding-inline: 1.125rem;
font-size: 12px;
white-space: nowrap;
}
}
.home-tech-partner-execution-img {
object-fit: cover;
object-position: top;
}
.home-tech-partner-execution-title {
margin-top: 0.75rem;
}
.home-tech-partner-execution-link {
margin-top: 1.75rem;
gap: 0.75rem;
border-radius: 6px;
padding-inline: 1.75rem;
font-size: 13px;
font-weight: 600;
letter-spacing: .06em;
background-color: var(--red);
color: #fff;
transition-property: transform, translate, scale, rotate;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.home-tech-partner-execution-link:hover {
translate: 0 -0.125rem;
color: #fff;
}
}
/* Navy shades over the Why Choose photos so the white text stays readable. */
.home-why-shade--bottom {
background: linear-gradient(to top, rgba(15, 35, 64, .96) 0%, rgba(15, 35, 64, .8) 30%, rgba(15, 35, 64, 0) 62%);
}
.home-why-shade--left {
background: linear-gradient(to right, rgba(15, 35, 64, .97) 0%, rgba(15, 35, 64, .85) 45%, rgba(15, 35, 64, 0) 80%);
}
.home-why-shade--full {
background: linear-gradient(to top, rgba(15, 35, 64, .95) 0%, rgba(15, 35, 64, .8) 50%, rgba(15, 35, 64, .25) 100%);
}
.home-tech-partner-execution-stack-3 > img {
object-position: center 20%;
}
@media (min-width: 1280px) {
.home-tech-partner-execution-link {
font-size: 15px;
}
}
.home-tech-partner-execution-grid-2 {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0.75rem;
}
.home-tech-partner-execution-row {
min-height: 340px;
border-radius: 10px;
padding: 2.5rem 1.75rem;
}
@media (min-width: 640px) {
.home-tech-partner-execution-row {
padding-inline: 2.5rem;
}
}
@media (min-width: 1280px) {
.home-tech-partner-execution-row {
min-height: 440px;
padding-inline: 60px;
}
}
.home-tech-partner-execution-box {
max-width: 520px;
}
.home-tech-partner-execution-text-2 {
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 32px;
line-height: 1.02;
font-weight: 600;
letter-spacing: -.03em;
}
@media (min-width: 768px) {
.home-tech-partner-execution-text-2 {
font-size: 44px;
}
}
@media (min-width: 1280px) {
.home-tech-partner-execution-text-2 {
font-size: 58px;
}
}
@media (min-width: 1536px) {
.home-tech-partner-execution-text-2 {
font-size: 66px;
}
}
.home-tech-partner-execution-text-3 {
margin-top: 1.25rem;
max-width: 560px;
font-size: 15px;
color: color-mix(in oklab, #fff 90%, transparent);
}
@media (min-width: 1280px) {
.home-tech-partner-execution-text-3 {
font-size: 19px;
}
}
.home-tech-partner-execution-grid-3 {
--bs-gutter-x: 0.75rem;
--bs-gutter-y: 0.75rem;
}
.home-tech-partner-execution-box-2 {
border-radius: 10px;
background-color: #f3eee7;
padding: 2.25rem 1.75rem;
}
@media (min-width: 640px) {
.home-tech-partner-execution-box-2 {
padding-inline: 2.5rem;
}
}
@media (min-width: 1280px) {
.home-tech-partner-execution-box-2 {
padding-block: 3rem;
}
}
.home-tech-partner-execution-stack-2 {
gap: 1.5rem;
}
@media (min-width: 1280px) {
.home-tech-partner-execution-stack-2 {
gap: 2rem;
}
}
.home-tech-partner-execution-text-4 {
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
color: #8b6c58;
}
@media (min-width: 1280px) {
.home-tech-partner-execution-text-4 {
font-size: 13px;
}
}
.home-tech-partner-execution-title-2 {
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 22px;
line-height: 1.12;
font-weight: 600;
letter-spacing: -.01em;
color: #0b1c30;
}
@media (min-width: 1280px) {
.home-tech-partner-execution-title-2 {
font-size: 28px;
}
}
@media (min-width: 1536px) {
.home-tech-partner-execution-title-2 {
font-size: 32px;
}
}
.home-tech-partner-execution-text-5 {
max-width: 380px;
font-size: 14px;
color: #5b6478;
}
@media (min-width: 1280px) {
.home-tech-partner-execution-text-5 {
font-size: 16px;
}
}
.home-tech-partner-execution-label {
margin-bottom: 1.5rem;
height: 1px;
width: 60%;
background-color: #d9d6cf;
}
@media (min-width: 1280px) {
.home-tech-partner-execution-label {
margin-bottom: 2rem;
}
}
.home-tech-partner-execution-stack-3 {
border-radius: 10px;
padding: 2.25rem 1.75rem;
}
@media (min-width: 640px) {
.home-tech-partner-execution-stack-3 {
padding-inline: 2.5rem;
}
}
@media (min-width: 1280px) {
.home-tech-partner-execution-stack-3 {
padding: 3rem 56px;
}
}
.home-tech-partner-execution-text-6 {
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
color: color-mix(in oklab, #fff 90%, transparent);
}
@media (min-width: 1280px) {
.home-tech-partner-execution-text-6 {
font-size: 13px;
}
}
.home-tech-partner-execution-title-3 {
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 22px;
line-height: 1.12;
font-weight: 600;
letter-spacing: -.01em;
}
@media (min-width: 1280px) {
.home-tech-partner-execution-title-3 {
font-size: 28px;
}
}
@media (min-width: 1536px) {
.home-tech-partner-execution-title-3 {
font-size: 32px;
}
}
.home-tech-partner-execution-text-7 {
max-width: 380px;
font-size: 14px;
color: color-mix(in oklab, #fff 85%, transparent);
}
@media (min-width: 1280px) {
.home-tech-partner-execution-text-7 {
font-size: 16px;
}
}
.home-tech-partner-execution-label-2 {
margin-bottom: 1.5rem;
height: 1px;
width: 60%;
background-color: color-mix(in oklab, #fff 30%, transparent);
}
@media (min-width: 1280px) {
.home-tech-partner-execution-label-2 {
margin-bottom: 2rem;
}
}
.home-contact-section {
padding-block: 2.5rem;
}
@media (min-width: 1024px) {
.home-contact-section {
padding-block: 3.5rem;
}
}
.home-contact-text {
color: #fe1718;
}
.home-contact-title {
margin-top: 0.75rem;
}
.home-contact-text-2 {
margin-top: 0.75rem;
max-width: 1080px;
}
.home-contact-grid {
--bs-gutter-x: 1.25rem;
--bs-gutter-y: 1.25rem;
margin-top: calc(2rem - var(--bs-gutter-y));
}
@media (min-width: 1024px) {
.home-contact-grid {
margin-top: calc(2.5rem - var(--bs-gutter-y));
}
}
.home-contact-form {
gap: 1.5rem;
border-radius: 8px;
border-style: solid;
border-width: 1px;
border-color: #e3e7ed;
padding: 1.75rem 1.25rem;
}
@media (min-width: 640px) {
.home-contact-form {
padding-inline: 2rem;
}
}
@media (min-width: 1280px) {
.home-contact-form {
padding: 40px 42px;
}
}
.home-contact-label {
min-width: 0;
gap: 0.5rem;
font-size: 14px;
line-height: 1.2;
font-weight: 500;
color: #1f2937;
}
@media (min-width: 1280px) {
.home-contact-label {
font-size: 16px;
}
}
.home-contact-input {
border-radius: 4px;
border-style: solid;
border-width: 1px;
padding-block: 0.875rem;
font-size: 14px;
color: #0b1c30;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
outline-style: none;
}
.home-contact-input::placeholder {
color: #9aa3b2;
}
.home-contact-input:focus {
border-color: #003466;
}
@media (min-width: 1280px) {
.home-contact-input {
font-size: 15px;
}
}
.home-contact-box-2 {
border-radius: 4px;
border-style: solid;
border-width: 1px;
padding-block: 0.75rem;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
.home-contact-box-2:focus-within {
border-color: #003466;
}
.home-contact-box-2 input {
background-color: #0000;
font-size: 14px;
font-weight: 400;
color: #0b1c30;
outline-style: none;
}
.home-contact-box-2 input::placeholder {
color: #9aa3b2;
}
.home-contact-textarea {
resize: vertical;
border-radius: 4px;
border-style: solid;
border-width: 1px;
padding-block: 0.875rem;
font-size: 14px;
line-height: 1.4;
color: #0b1c30;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
outline-style: none;
}
.home-contact-textarea::placeholder {
color: #9aa3b2;
}
.home-contact-textarea:focus {
border-color: #003466;
}
@media (min-width: 1280px) {
.home-contact-textarea {
font-size: 15px;
}
}
.home-contact-label-2 {
gap: 0.75rem;
font-size: 14px;
color: #1f2937;
}
@media (min-width: 1280px) {
.home-contact-label-2 {
font-size: 15px;
}
}
.home-contact-input-2 {
width: 22px;
height: 22px;
cursor: pointer;
appearance: none;
border-radius: 4px;
border-style: solid;
border-width: 2px;
border-color: #003466;
}
/* appearance: none hides the native tick, so draw a white one when checked. */
.home-contact-input-2:checked {
background-color: #003466;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 15px;
}
.home-contact-input-2:focus-visible {
outline: 2px solid rgba(0, 52, 102, .35);
outline-offset: 2px;
}
.home-contact-policy-link {
color: var(--red);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 3px;
}
.home-contact-policy-link:hover {
color: #e0080a;
}
.home-contact-btn {
max-width: 322px;
cursor: pointer;
gap: 0.75rem;
border-radius: 4px;
background-color: #003466;
font-size: 16px;
font-weight: 500;
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.home-contact-btn:hover {
opacity: .9;
}
}
.home-contact-btn:disabled {
opacity: .6;
}
@media (min-width: 1280px) {
.home-contact-btn {
font-size: 18px;
}
}
.home-contact-aside {
border-radius: 8px;
background-color: #f1efeb;
}
.home-contact-box-3 {
aspect-ratio: 700 / 250;
}
.home-contact-box-4 {
padding: 1.75rem 1.5rem;
}
@media (min-width: 640px) {
.home-contact-box-4 {
padding-inline: 2.5rem;
}
}
@media (min-width: 1280px) {
.home-contact-box-4 {
padding: 2rem 48px;
}
}
.home-contact-title-2 {
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 26px;
line-height: 1.15;
font-weight: 600;
color: #0b1c30;
}
@media (min-width: 1280px) {
.home-contact-title-2 {
font-size: 36px;
}
}
.home-contact-text-3 {
font-size: 15px;
color: #5b6478;
}
@media (min-width: 1280px) {
.home-contact-text-3 {
font-size: 20px;
}
}
/* Narrow label column so the email, phone and address get the room. */
.home-contact-grid-3 {
grid-template-columns: 4.5rem minmax(0, 1fr);
gap: .75rem;
border-top-style: solid;
border-top-width: 1px;
border-color: #dcd8d1;
padding-block: 1rem;
}
@media (min-width: 1280px) {
.home-contact-grid-3 {
padding-block: 1rem;
}
}
/* Tablets: form and contact card sit side by side, so both columns are narrow.
Form fields take one per row, and each contact label sits above its value. */
@media (min-width: 768px) and (max-width: 991.98px) {
.home-contact-grid-2 > * {
width: 100%;
}
.home-contact-grid-3 {
grid-template-columns: minmax(0, 1fr);
gap: .25rem;
}
}
.home-contact-term {
font-size: 14px;
font-weight: 500;
color: #5b6478;
}
@media (min-width: 1280px) {
.home-contact-term {
font-size: 17px;
}
}
.home-contact-desc {
font-size: 14px;
/* white-space: pre-line; */
color: #1f2937;
}
@media (min-width: 1280px) {
.home-contact-desc {
font-size: 17px;
}
}
.home-contact-link {
overflow-wrap: anywhere;
}
@media (hover: hover) {
.home-contact-link:hover {
text-decoration-line: underline;
}
}
}
/* ==========================================================================
9. About page
========================================================================== */
@layer components {
.proposal-stepper-text {
font-size: 18px;
line-height: 1;
}
.about-hero-section {
isolation: isolate;
margin-top: -70px;
min-height: 530px;
padding-top: 70px;
}
@media (min-width: 640px) {
.about-hero-section {
min-height: 490px;
}
}
@media (min-width: 1024px) {
.about-hero-section {
min-height: 570px;
}
}
@media (min-width: 1280px) {
.about-hero-section {
min-height: 550px;
}
}
@media (min-width: 1536px) {
.about-hero-section {
min-height: 600px;
}
}
.about-hero-video {
z-index: -20;
object-fit: cover;
}
.about-hero-box {
padding-block: 3.5rem;
}
@media (min-width: 1280px) {
.about-hero-box {
padding-block: 5rem;
}
}
.about-hero-text {
font-size: 12px;
letter-spacing: .02em;
color: #fe1718;
}
@media (min-width: 640px) {
.about-hero-text {
font-size: 14px;
}
}
@media (min-width: 1280px) {
.about-hero-text {
font-size: 16px;
}
}
.about-hero-title {
margin-top: 2rem;
max-width: 1420px;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 40px;
line-height: 1.1;
letter-spacing: -.01em;
color: var(--ink-strong);
}
@media (min-width: 640px) {
.about-hero-title {
font-size: 52px;
}
}
@media (min-width: 768px) {
.about-hero-title {
margin-top: 2.5rem;
font-size: 64px;
}
}
@media (min-width: 1024px) {
.about-hero-title {
font-size: 76px;
}
}
@media (min-width: 1280px) {
.about-hero-title {
margin-top: 40px;
font-size: 88px;
}
}
@media (min-width: 1536px) {
.about-hero-title {
font-size: 96px;
}
}
.about-hero-row {
margin-top: 2rem;
gap: 0.75rem;
}
@media (min-width: 640px) {
.about-hero-row {
gap: 15px;
}
}
@media (min-width: 768px) {
.about-hero-row {
margin-top: 2.5rem;
}
}
@media (min-width: 1280px) {
.about-hero-row {
margin-top: 70px;
}
}
/* "Who We Are": white section with a rounded cube-image block (same layout
as the tech stack page's "Technologies behind our expertise"); the copy
sits on the image's light left side. */
.about-who-section {
padding-block: 3rem;
}
@media (min-width: 1200px) {
.about-who-section {
padding-block: 4.5rem;
}
}
.about-who-frame {
min-height: 400px;
border-radius: 24px;
padding: 2.5rem 1.5rem;
background-color: #f3eee8;
}
@media (min-width: 992px) {
.about-who-frame {
padding: 3rem;
}
}
@media (min-width: 1200px) {
.about-who-frame {
min-height: 340px;
padding: 4rem;
}
}
.about-who-bg {
object-fit: cover;
object-position: right center;
}
/* Narrow screens crop to the cubes, so lighten them behind the text. */
.about-who-overlay {
background: linear-gradient(90deg, rgba(243, 238, 232, .94) 0%, rgba(243, 238, 232, .8) 65%, rgba(243, 238, 232, .45) 100%);
}
@media (min-width: 992px) {
.about-who-overlay {
background: none;
}
}
.about-who-copy {
max-width: 700px;
}
@media (min-width: 992px) {
.about-who-copy {
max-width: 44%;
}
}
.about-who-heading {
margin: 0;
}
.about-who-text {
margin: 1.25rem 0 0;
}
@media (min-width: 1200px) {
.about-who-text {
margin-top: 1.75rem;
}
}
.about-who-are-box {
padding-block: 1.5rem;
}
@media (min-width: 768px) {
.about-who-are-box {
padding-block: 2rem;
}
}
@media (min-width: 1024px) {
.about-who-are-box {
padding-block: 2.5rem;
}
}
.about-who-are-stack {
flex-direction: column;
gap: 2.5rem;
}
@media (min-width: 768px) {
.about-who-are-stack {
gap: 3rem;
}
}
@media (min-width: 1024px) {
.about-who-are-stack {
flex-direction: row;
gap: 2rem;
}
}
@media (min-width: 1280px) {
.about-who-are-stack {
gap: 2.5rem;
}
}
@media (min-width: 1536px) {
.about-who-are-stack {
gap: 3rem;
}
}
.about-who-are-box-2 {
width: 100%;
}
@media (min-width: 1024px) {
.about-who-are-box-2 {
width: 42%;
}
}
.about-who-are-text {
margin-top: 1rem;
max-width: 515px;
font-size: clamp(.875rem, .95vw, 1rem);
line-height: 28px;
color: #171717;
}
@media (min-width: 768px) {
.about-who-are-text {
margin-top: 1.25rem;
}
}
@media (min-width: 1024px) {
.about-who-are-text {
margin-top: 1rem;
line-height: 35px;
}
}
@media (min-width: 1280px) {
.about-who-are-text {
margin-top: 1.25rem;
}
}
.about-who-are-box-3 {
width: 100%;
}
@media (min-width: 1024px) {
.about-who-are-box-3 {
width: 80%;
}
}
@media (min-width: 1536px) {
.about-who-are-box-3 {
width: 50.5%;
}
}
.about-who-are-img {
max-width: 630px;
object-fit: contain;
}
.about-who-are-row {
position: relative;
z-index: 20;
margin-top: -2.5rem;
width: calc(100% - 24px);
gap: 0.75rem;
border-radius: 14px;
background-color: #f5f4f1;
padding: 1.25rem 1rem;
box-shadow: 0 10px 30px #0000000f;
}
@media (min-width: 768px) {
.about-who-are-row {
position: absolute;
margin-top: 0;
width: 235px;
padding: 2.5rem;
top: 11%;
right: 0;
}
}
@media (min-width: 1024px) {
.about-who-are-row {
width: 250px;
padding: 2rem;
}
}
@media (min-width: 1536px) {
.about-who-are-row {
width: 300px;
}
}
.about-who-are-title-2 {
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 1.75rem;
font-weight: 600;
color: #172033;
}
@media (min-width: 768px) {
.about-who-are-title-2 {
font-size: 2rem;
}
}
@media (min-width: 1024px) {
.about-who-are-title-2 {
font-size: 3.4rem;
}
}
.about-who-are-text-2 {
margin-top: 0.75rem;
font-size: .75rem;
line-height: 1.2;
font-weight: 500;
color: #172033;
}
@media (min-width: 768px) {
.about-who-are-text-2 {
font-size: .875rem;
}
}
@media (min-width: 1024px) {
.about-who-are-text-2 {
font-size: 16px;
}
}
.about-who-are-box-4 {
width: 1px;
background-color: #d8d6d1;
}
@media (min-width: 768px) {
.about-who-are-box-4 {
width: 100%;
margin-top: 2rem;
margin-bottom: 2.5rem;
height: 1px;
}
}
.about-who-are-text-3 {
font-size: .75rem;
line-height: 1.2;
font-weight: 500;
color: #172033;
}
@media (min-width: 768px) {
.about-who-are-text-3 {
font-size: .875rem;
}
}
@media (min-width: 1024px) {
.about-who-are-text-3 {
font-size: 16px;
}
}
.about-from-strategyto-section {
background-color: #f5f3f0;
}
.about-from-strategyto-grid {
--bs-gutter-x: 2rem;
--bs-gutter-y: 2rem;
}
@media (min-width: 992px) {
.about-from-strategyto-grid {
--bs-gutter-x: 3rem;
--bs-gutter-y: 0;
}
}
@media (min-width: 1280px) {
.about-from-strategyto-grid {
--bs-gutter-x: 4rem;
}
}
.about-from-strategyto-box-2 {
margin-bottom: 0.75rem;
color: #fe1718;
}
.about-from-strategyto-title {
max-width: 850px;
}
/* Copy sits under the title, full width. */
.about-from-strategyto-row {
margin-top: 1.25rem;
}
@media (min-width: 1280px) {
.about-from-strategyto-row {
margin-top: 1.75rem;
}
}
.about-from-strategyto-text {
max-width: 1300px;
margin-bottom: 0;
}
.about-from-strategyto-box-3 {
margin-top: 2.5rem;
}
@media (min-width: 1024px) {
.about-from-strategyto-box-3 {
margin-top: 38px;
}
}
@media (min-width: 1280px) {
.about-from-strategyto-box-3 {
margin-top: 42px;
}
}
.about-from-strategyto-grid-2 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 1024px) {
.about-from-strategyto-grid-2 {
grid-template-columns: 36% 64%;
}
}
@media (min-width: 1536px) {
.about-from-strategyto-grid-2 {
grid-template-columns: 32% 68%;
}
}
.about-from-strategyto-box-4 {
display: none;
min-height: 390px;
}
@media (min-width: 1024px) {
.about-from-strategyto-box-4 {
display: block;
grid-row: span 2 / span 2;
/* Height comes from the card grid, so the image's top and bottom
edges line up with the first and last card rows. */
min-height: 0;
margin: 1.5rem 0 2.5rem max(var(--page-gutter), 50vw - 960px + var(--page-gutter));
border-radius: 14px;
}
}
.about-from-strategyto-img {
object-fit: cover;
object-position: center;
}
/* Sits outside .container: side padding follows the page gutter, and from
1024px the right edge lines up with the .container content edge
(max-width 1920px) while the grid bleeds in from the image on the left. */
.about-from-strategyto-grid-3 {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
padding-inline: var(--page-gutter);
}
@media (min-width: 640px) {
.about-from-strategyto-grid-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.about-from-strategyto-grid-3 {
padding-left: 1.5rem;
padding-right: max(var(--page-gutter), 50vw - 960px + var(--page-gutter));
margin-top: 1.5rem;
grid-auto-rows: minmax(110px, auto);
padding-bottom: 2.5rem;
}
}
@media (min-width: 1400px) {
.about-from-strategyto-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: minmax(135px, auto);
}
}
.about-from-strategyto-row-2 {
min-height: 105px;
border-radius: 12px;
padding-inline: 1.25rem;
box-shadow: 0 3px 10px #0f172a14;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .3s;
}
@media (hover: hover) {
.about-from-strategyto-row-2:hover {
box-shadow: 0 10px 25px #0f172a1f;
translate: 0 -0.25rem;
}
}
@media (min-width: 640px) {
.about-from-strategyto-row-2 {
min-height: 110px;
}
}
@media (min-width: 1024px) {
.about-from-strategyto-row-2 {
min-height: 0;
}
}
.about-from-strategyto-box-5 {
max-width: 190px;
padding-right: 0.75rem;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 16px;
line-height: 22px;
font-weight: 600;
letter-spacing: 0em;
color: #000;
}
.about-from-strategyto-box-6 {
height: 88px;
width: 88px;
border-radius: 7px;
}
@media (min-width: 1400px) {
.about-from-strategyto-box-6 {
height: 112px;
width: 124px;
border-radius: 8px;
}
}
.about-from-strategyto-box-7 {
margin-top: 2rem;
display: block;
}
@media (min-width: 1024px) {
.about-from-strategyto-box-7 {
display: none;
}
}
.about-from-strategyto-box-8 {
aspect-ratio: 4 / 3;
border-radius: 14px;
}
@media (min-width: 640px) {
.about-from-strategyto-box-8 {
max-width: 560px;
}
}
.about-from-strategyto-img-2 {
object-fit: cover;
object-position: center;
}
/* Tablets: the photo under the cards lines up with them (same gutter, full width). */
@media (min-width: 768px) and (max-width: 1023.98px) {
.about-from-strategyto-box-7 {
padding-inline: var(--page-gutter);
}
.about-from-strategyto-box-8 {
max-width: none;
aspect-ratio: 21 / 9;
}
}
.about-mission-vision-box {
padding-block: 70px;
}
@media (min-width: 640px) {
.about-mission-vision-box {
padding-block: 35px;
}
}
@media (min-width: 768px) {
.about-mission-vision-box {
padding-block: 40px;
}
}
@media (min-width: 1024px) {
.about-mission-vision-box {
padding-block: 50px;
}
}
@media (min-width: 1024px) {
.about-mission-vision-box-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 3rem;
}
}
@media (min-width: 1280px) {
.about-mission-vision-box-2 {
display: flow-root;
}
}
.about-mission-vision-box-3 {
position: relative;
z-index: 20;
}
@media (min-width: 1024px) {
.about-mission-vision-box-3 {
grid-column-start: 1;
grid-row-start: 1;
}
}
@media (min-width: 1280px) {
.about-mission-vision-box-3 {
position: absolute;
top: 17px;
left: 0;
width: 31%;
}
}
.about-mission-vision-box-4 {
margin-bottom: 18px;
color: #fe1718;
}
.about-mission-vision-title {
color: #111827;
}
.about-mission-vision-box-5 {
position: relative;
z-index: 10;
margin-top: 2.5rem;
height: 390px;
width: 100%;
border-radius: 15px;
}
@media (min-width: 640px) {
.about-mission-vision-box-5 {
height: 450px;
}
}
@media (min-width: 768px) {
.about-mission-vision-box-5 {
height: 500px;
}
}
@media (min-width: 1024px) {
.about-mission-vision-box-5 {
height: 420px;
grid-column-start: 1;
grid-row-start: 2;
}
}
@media (min-width: 1280px) {
.about-mission-vision-box-5 {
position: absolute;
margin-top: 0;
height: 480px;
width: 33%;
top: 0;
left: 34.5%;
}
}
.about-mission-vision-box-6 {
position: relative;
z-index: 20;
margin-top: 2.5rem;
width: 100%;
}
@media (min-width: 640px) {
.about-mission-vision-box-6 {
margin-top: 3rem;
}
}
@media (min-width: 768px) {
.about-mission-vision-box-6 {
margin-top: 3.5rem;
}
}
@media (min-width: 1024px) {
.about-mission-vision-box-6 {
margin-top: 0;
grid-column-start: 2;
grid-row: span 2 / span 2;
grid-row-start: 1;
align-self: center;
}
}
@media (min-width: 1280px) {
.about-mission-vision-box-6 {
position: absolute;
width: 28.1%;
top: 64px;
left: 71.9%;
}
}
.about-mission-vision-title-2 {
gap: 10px;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 28px;
font-weight: 600;
letter-spacing: -.035em;
color: #111;
}
@media (min-width: 640px) {
.about-mission-vision-title-2 {
font-size: 30px;
}
}
@media (min-width: 1024px) {
.about-mission-vision-title-2 {
font-size: 32px;
}
}
.about-mission-vision-label {
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
color: #fe1718;
}
.about-mission-vision-text {
margin-top: 27px;
max-width: 390px;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
font-size: 23px;
line-height: 1.48;
letter-spacing: -.025em;
color: #182235;
}
@media (min-width: 640px) {
.about-mission-vision-text {
font-size: 24px;
}
}
@media (min-width: 1024px) {
.about-mission-vision-text {
font-size: 25px;
}
}
.about-mission-vision-text-2 {
margin-top: 38px;
max-width: 390px;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
font-size: 15px;
line-height: 1.58;
letter-spacing: -.01em;
color: #182235;
}
.about-mission-vision-box-7 {
z-index: 30;
margin-top: 2rem;
width: 100%;
border-radius: 16px;
background-color: #f1f0ed;
padding: 1.75rem 1.25rem;
}
@media (min-width: 640px) {
.about-mission-vision-box-7 {
padding-inline: 1.75rem;
}
}
@media (min-width: 768px) {
.about-mission-vision-box-7 {
padding: 2rem;
}
}
@media (min-width: 1024px) {
.about-mission-vision-box-7 {
margin-top: 2.5rem;
padding: 35px 70px;
grid-column: span 2 / span 2;
}
}
@media (min-width: 1280px) {
.about-mission-vision-box-7 {
margin-top: 329px;
width: 45.7%;
padding-inline: 50px;
min-height: 343px;
}
}
@media (min-width: 1536px) {
.about-mission-vision-box-7 {
padding-inline: 70px;
}
}
.about-mission-vision-row {
gap: 12px;
}
.about-mission-vision-label-2 {
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
font-size: 30px;
font-weight: 600;
letter-spacing: -.03em;
color: #fe1718;
}
@media (min-width: 1024px) {
.about-mission-vision-label-2 {
font-size: 34px;
}
}
.about-mission-vision-title-3 {
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 28px;
font-weight: 600;
letter-spacing: -.035em;
color: #111;
}
@media (min-width: 1024px) {
.about-mission-vision-title-3 {
font-size: 32px;
}
}
.about-mission-vision-text-3 {
margin-top: 20px;
max-width: 535px;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
font-size: 22px;
line-height: 1.45;
letter-spacing: -.025em;
color: #182235;
}
@media (min-width: 640px) {
.about-mission-vision-text-3 {
font-size: 23px;
}
}
@media (min-width: 1024px) {
.about-mission-vision-text-3 {
font-size: 25px;
margin-left: 55px;
}
}
.about-mission-vision-text-4 {
margin-top: 21px;
max-width: 535px;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
font-size: 14px;
line-height: 1.55;
letter-spacing: -.005em;
color: #182235;
}
@media (min-width: 640px) {
.about-mission-vision-text-4 {
font-size: 15px;
}
}
@media (min-width: 1024px) {
.about-mission-vision-text-4 {
margin-left: 55px;
}
}
.about-core-strengths-section {
padding-block: 2rem;
}
@media (min-width: 640px) {
.about-core-strengths-section {
padding-block: 2.5rem;
}
}
@media (min-width: 1024px) {
.about-core-strengths-section {
padding-block: 3rem;
}
}
@media (min-width: 1280px) {
.about-core-strengths-section {
padding-block: 3.5rem;
}
}
.about-core-strengths-grid {
--bs-gutter-x: 2.5rem;
--bs-gutter-y: 2.5rem;
}
@media (min-width: 992px) {
.about-core-strengths-grid {
--bs-gutter-y: 0;
}
}
@media (min-width: 1280px) {
.about-core-strengths-grid {
--bs-gutter-x: 3rem;
}
}
.about-core-strengths-box {
margin-bottom: 0.75rem;
color: #fe1718;
}
.about-core-strengths-title {
max-width: 850px;
color: #111827;
}
.about-core-strengths-text {
margin-top: 2.25rem;
max-width: 625px;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
font-size: 14px;
line-height: 1.55;
letter-spacing: -.01em;
color: #182235;
}
@media (min-width: 640px) {
.about-core-strengths-text {
font-size: 15px;
}
}
@media (min-width: 1024px) {
.about-core-strengths-text {
margin-top: 2.5rem;
}
}
.about-core-strengths-row {
margin-top: 2rem;
}
@media (min-width: 1024px) {
.about-core-strengths-row {
margin-top: -12px;
}
}
@media (min-width: 1536px) {
.about-core-strengths-row {
margin-top: -40px;
}
}
.about-core-strengths-img {
max-width: 600px;
object-fit: cover;
object-position: center;
}
.about-core-strengths-box-2 {
min-width: 0;
padding-top: 0;
}
@media (min-width: 1024px) {
.about-core-strengths-box-2 {
padding-top: 60px;
}
}
@media (min-width: 1280px) {
.about-core-strengths-box-2 {
padding-top: 62px;
}
}
.about-core-strengths-box-3 {
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: #d7d7d7;
padding-block: 14px;
}
.about-core-strengths-box-3:first-child {
padding-top: 0;
}
.about-core-strengths-box-3:last-child {
border-bottom-width: 0;
}
@media (min-width: 640px) {
.about-core-strengths-box-3 {
padding-block: 15px;
}
}
@media (min-width: 1024px) {
.about-core-strengths-box-3 {
padding-block: 14px;
}
}
@media (min-width: 1280px) {
.about-core-strengths-box-3 {
padding-block: 15px;
}
}
.about-core-strengths-title-2 {
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 18px;
font-weight: 600;
letter-spacing: -.025em;
color: #111827;
}
@media (min-width: 640px) {
.about-core-strengths-title-2 {
font-size: 19px;
}
}
@media (min-width: 1024px) {
.about-core-strengths-title-2 {
font-size: 18px;
}
}
@media (min-width: 1280px) {
.about-core-strengths-title-2 {
font-size: 19px;
}
}
.about-core-strengths-text-2 {
margin-top: 9px;
max-width: 650px;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
font-size: 14px;
line-height: 1.35;
letter-spacing: -.005em;
color: #182235;
}
@media (min-width: 1280px) {
.about-core-strengths-text-2 {
font-size: 15px;
}
}
.about-capabilities-that-section {
background-color: #f5f4f0;
padding-block: 22px;
}
@media (min-width: 640px) {
.about-capabilities-that-section {
padding-block: 25px;
}
}
@media (min-width: 1024px) {
.about-capabilities-that-section {
padding-block: 30px;
}
}
@media (min-width: 1280px) {
.about-capabilities-that-section {
padding-block: 40px;
}
}
.about-capabilities-that-bar {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.75rem;
}
@media (min-width: 1024px) {
.about-capabilities-that-bar {
grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
gap: 80px;
}
}
@media (min-width: 1280px) {
.about-capabilities-that-bar {
gap: 112px;
}
}
.about-text {
margin-bottom: 4px;
color: #fe1718;
}
.about-capabilities-that-title {
max-width: 850px;
}
.about-capabilities-that-box {
max-width: 1100px;
padding-top: 0;
}
@media (min-width: 1024px) {
.about-capabilities-that-box {
padding-top: 30px;
}
}
.about-capabilities-that-box-2 {
margin-top: 58px;
}
@media (min-width: 1024px) {
.about-capabilities-that-box-2 {
margin-top: 50px;
}
}
@media (min-width: 1280px) {
.about-capabilities-that-box-2 {
margin-top: 40px;
}
}
.about-capabilities-that-card {
max-width: 1285px;
flex-direction: column;
border-radius: 10px;
}
@media (min-width: 1024px) {
.about-capabilities-that-card {
flex-direction: row;
min-height: 290px;
}
}
@media (min-width: 1280px) {
.about-capabilities-that-card {
min-height: 315px;
}
}
.about-capabilities-that-box-3 {
position: relative;
height: 200px;
}
@media (min-width: 640px) {
.about-capabilities-that-box-3 {
height: 280px;
}
}
@media (min-width: 1024px) {
.about-capabilities-that-box-3 {
position: absolute;
height: auto;
inset: 0;
}
}
.about-capabilities-that-img {
object-fit: cover;
object-position: 75% center;
}
@media (min-width: 1024px) {
.about-capabilities-that-img {
object-position: center;
}
}
.about-capabilities-that-overlay {
z-index: 1;
display: none;
width: 52%;
background-image: linear-gradient(145deg, #ad0000 0%, #770006 47%, #5d0005 100%);
clip-path: polygon(0 0, 94% 0, 82% 7%, 72% 18%, 64% 31%, 56% 48%, 49% 68%, 43% 85%, 40% 100%, 0 100%);
}
@media (min-width: 1024px) {
.about-capabilities-that-overlay {
display: block;
}
}
.about-capabilities-that-stack {
z-index: 10;
width: 100%;
background-image: linear-gradient(145deg, #ad0000 0%, #770006 47%, #5d0005 100%);
padding: 28px 24px;
}
@media (min-width: 640px) {
.about-capabilities-that-stack {
padding: 34px 40px;
}
}
@media (min-width: 1024px) {
.about-capabilities-that-stack {
width: 48%;
background-image: none;
padding: 38px 44px;
}
}
@media (min-width: 1280px) {
.about-capabilities-that-stack {
width: 45%;
}
}
.about-capabilities-that-title-2 {
max-width: 470px;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 27px;
line-height: 1.22;
font-weight: 600;
}
@media (min-width: 640px) {
.about-capabilities-that-title-2 {
font-size: 29px;
}
}
@media (min-width: 1280px) {
.about-capabilities-that-title-2 {
font-size: 31px;
}
}
.about-capabilities-that-text-2 {
margin-top: 10px;
max-width: 445px;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
font-size: 13px;
line-height: 1.22;
color: color-mix(in oklab, #fff 95%, transparent);
}
@media (min-width: 640px) {
.about-capabilities-that-text-2 {
font-size: 14px;
}
}
.about-capabilities-that-btn {
margin-top: 27px;
width: fit-content;
gap: 10px;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: .02em;
color: color-mix(in oklab, #fff 85%, transparent);
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.about-capabilities-that-btn:hover {
opacity: .7;
}
}
.about-capabilities-that-box-4 {
margin-top: 49px;
}
@media (min-width: 640px) {
.about-capabilities-that-box-4 {
margin-right: -2rem;
}
}
@media (min-width: 768px) {
.about-capabilities-that-box-4 {
margin-right: -2.5rem;
}
}
@media (min-width: 1024px) {
.about-capabilities-that-box-4 {
margin-top: 54px;
margin-right: -3rem;
}
}
@media (min-width: 1280px) {
.about-capabilities-that-box-4 {
margin-top: 55px;
margin-right: calc(-1 * max(96px, 50vw - 850px));
}
}
.about-capabilities-that-box-5 {
overflow-x: visible !important;
overflow-y: visible !important;
}
.about-capabilities-that-box-6 {
height: auto !important;
}
.about-capabilities-that-card-2 {
cursor: pointer;
flex-direction: column;
gap: 18px;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 7px #00000012;
transition-property: box-shadow;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .3s;
}
@media (hover: hover) {
.about-capabilities-that-card-2:hover {
box-shadow: 0 8px 24px #0000001a;
}
}
@media (min-width: 1600px) {
.about-capabilities-that-card-2 {
flex-direction: row;
gap: 20px;
padding: 24px;
}
}
@media (min-width: 640px) {
.about-capabilities-that-card-2 {
flex-direction: row;
gap: 20px;
padding: 24px;
}
}
.about-capabilities-that-stack-2 {
min-width: 0;
flex: 1;
}
@media (min-width: 640px) {
.about-capabilities-that-stack-2 {
justify-content: center;
}
}
.about-capabilities-that-title-3 {
max-width: 360px;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 20px;
line-height: 1.2;
font-weight: 600;
letter-spacing: -.015em;
color: #0e0f12;
}
@media (min-width: 640px) {
.about-capabilities-that-title-3 {
font-size: 21px;
}
}
@media (min-width: 1280px) {
.about-capabilities-that-title-3 {
font-size: 24px;
}
}
.about-capabilities-that-text-3 {
margin-top: 12px;
max-width: 390px;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
font-size: 14px;
line-height: 1.65;
color: #293241;
}
@media (min-width: 1600px) {
.about-capabilities-that-text-3 {
margin-top: 18px;
font-size: 16px;
line-height: 1.72;
}
}
@media (min-width: 1536px) {
.about-capabilities-that-text-3 {
font-size: 16px;
}
}
.about-capabilities-that-box-7 {
height: 190px;
width: 100%;
border-radius: 7px;
}
@media (min-width: 1600px) {
.about-capabilities-that-box-7 {
height: 200px;
width: 38%;
}
}
@media (min-width: 640px) {
.about-capabilities-that-box-7 {
height: 180px;
width: 38%;
max-width: 260px;
}
}
@media (min-width: 1024px) {
.about-capabilities-that-box-7 {
height: 200px;
}
}
.about-capabilities-that-img-2 {
object-fit: cover;
transition-property: transform, translate, scale, rotate;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .5s;
}
@media (hover: hover) {
.about-capabilities-that-img-2:is(:where(.hover-group):hover *) {
scale: 1.025;
}
}
.about-capabilities-that-row {
margin-top: 24px;
gap: 14px;
}
@media (min-width: 640px) {
.about-capabilities-that-row {
margin-top: 26px;
margin-left: -2rem;
}
}
@media (min-width: 768px) {
.about-capabilities-that-row {
margin-left: -2.5rem;
}
}
@media (min-width: 1024px) {
.about-capabilities-that-row {
margin-left: -3rem;
}
}
@media (min-width: 1280px) {
.about-capabilities-that-row {
margin-left: calc(-1 * max(96px, 50vw - 850px));
}
}
.about-capabilities-that-btn-2 {
height: 42px;
width: 42px;
border-radius: 3.40282e38px;
border-style: solid;
border-width: 1px;
border-color: #d5d4cf;
background-color: #fff;
color: #003466;
cursor: pointer;
transition-property: transform, translate, scale, rotate, color, background-color, border-color;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s;
}
@media (hover: hover) {
.about-capabilities-that-btn-2:hover {
scale: 105% 105%;
border-color: var(--red);
background-color: var(--red);
color: #fff;
}
}
.about-capabilities-that-btn-2.swiper-button-disabled {
opacity: 1 !important;
}
.about-values-that-section {
padding-block: 48px;
}
@media (min-width: 640px) {
.about-values-that-section {
padding-block: 30px;
}
}
@media (min-width: 1024px) {
.about-values-that-section {
padding-block: 40px;
}
}
@media (min-width: 1280px) {
.about-values-that-section {
padding-block: 50px;
}
}
.about-values-that-bar {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 28px;
}
@media (min-width: 1024px) {
.about-values-that-bar {
grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
gap: 70px;
}
}
@media (min-width: 1280px) {
.about-values-that-bar {
gap: 120px;
}
}
.about-values-that-title {
max-width: 700px;
color: #101827;
}
.about-values-that-box {
max-width: 620px;
padding-top: 8px;
}
@media (min-width: 1024px) {
.about-values-that-box {
padding-top: 31px;
}
}
.about-values-that-text {
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
font-size: 14px;
line-height: 1.95;
color: #202735;
}
@media (min-width: 640px) {
.about-values-that-text {
font-size: 15px;
}
}
.about-values-that-stack {
margin-top: 70px;
flex-direction: column;
gap: 20px;
}
@media (min-width: 768px) {
.about-values-that-stack {
margin-top: 82px;
}
}
@media (min-width: 1024px) {
.about-values-that-stack {
flex-direction: row;
gap: 35px;
align-items: stretch;
}
}
@media (min-width: 1280px) {
.about-values-that-stack {
margin-top: 72px;
}
}
.about-values-that-card {
min-height: 360px;
width: 100%;
border-radius: 16px;
background-color: #0b1620;
}
@media (min-width: 640px) {
.about-values-that-card {
min-height: 460px;
}
}
@media (min-width: 768px) {
.about-values-that-card {
min-height: 640px;
}
}
@media (min-width: 1024px) {
.about-values-that-card {
min-height: 698px;
width: 38%;
flex-shrink: 0;
}
}
@media (min-width: 1280px) {
.about-values-that-card {
width: 36%;
}
}
.about-values-that-overlay {
background-image: linear-gradient(to bottom in oklab, color-mix(in oklab, #000 15%, transparent) 0%, color-mix(in oklab, #000 15%, transparent) 50%, color-mix(in oklab, #000 5%, transparent) 100%);
}
.about-values-that-overlay-2 {
background-image: linear-gradient(to bottom in oklab, color-mix(in oklab, #000 75%, transparent) 0%, color-mix(in oklab, #000 45%, transparent) 50%, color-mix(in oklab, #000 0%, transparent) 100%);
}
.about-values-that-box-2 {
z-index: 10;
padding: 28px;
}
@media (min-width: 640px) {
.about-values-that-box-2 {
padding: 34px;
}
}
@media (min-width: 1024px) {
.about-values-that-box-2 {
padding: 20px;
}
}
@media (min-width: 1280px) {
.about-values-that-box-2 {
padding: 22px;
}
}
.about-values-that-title-2 {
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 48px;
font-weight: 600;
letter-spacing: -.025em;
}
@media (min-width: 640px) {
.about-values-that-title-2 {
font-size: 54px;
}
}
@media (min-width: 1024px) {
.about-values-that-title-2 {
font-size: 51px;
}
}
@media (min-width: 1280px) {
.about-values-that-title-2 {
font-size: 54px;
}
}
.about-values-that-text-2 {
margin-top: 18px;
max-width: 455px;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
font-size: 14px;
line-height: 2.05;
color: color-mix(in oklab, #fff 95%, transparent);
}
@media (min-width: 640px) {
.about-values-that-text-2 {
font-size: 15px;
}
}
@media (min-width: 1024px) {
.about-values-that-text-2 {
font-size: 14px;
}
}
@media (min-width: 1280px) {
.about-values-that-text-2 {
font-size: 15px;
}
}
.about-values-that-stack-2 {
min-width: 0;
flex: 1;
gap: 20px;
}
.about-values-that-stack-3 {
flex-direction: column;
gap: 20px;
}
@media (min-width: 640px) {
.about-values-that-stack-3 {
flex-direction: row;
flex-wrap: wrap;
}
}
.about-values-that-box-3 {
width: 100%;
}
@media (min-width: 640px) {
.about-values-that-box-3 {
width: calc(50% - 10px);
}
}
@media (min-width: 1024px) {
.about-values-that-box-3 {
flex: 1;
flex-basis: calc(50% - 10px);
}
}
.about-values-that-card-2 {
min-height: 200px;
border-radius: 16px;
background-color: #101820;
}
.about-values-that-overlay-3 {
background-color: color-mix(in oklab, #000 10%, transparent);
}
.about-values-that-box-4 {
z-index: 10;
max-width: 280px;
padding: 22px;
}
@media (min-width: 640px) {
.about-values-that-box-4 {
padding: 24px;
}
}
.about-values-that-title-3 {
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 20px;
line-height: 1.05;
font-weight: 600;
letter-spacing: -.015em;
}
@media (min-width: 640px) {
.about-values-that-title-3 {
font-size: 21px;
}
}
.about-values-that-text-3 {
margin-top: 9px;
max-width: 220px;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
font-size: 13px;
line-height: 1.2;
color: color-mix(in oklab, #fff 95%, transparent);
}
@media (min-width: 640px) {
.about-values-that-text-3 {
font-size: 14px;
}
}
.about-values-that-card-3 {
min-height: 258px;
border-radius: 16px;
background-color: #101820;
}
.about-values-that-box-5 {
z-index: 10;
max-width: 420px;
padding: 22px;
}
@media (min-width: 640px) {
.about-values-that-box-5 {
padding: 24px;
}
}
@media (min-width: 1024px) {
.about-values-that-box-5 {
padding: 28px;
}
}
.about-values-that-title-4 {
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 27px;
line-height: 1.05;
font-weight: 600;
letter-spacing: -.015em;
}
@media (min-width: 640px) {
.about-values-that-title-4 {
font-size: 30px;
}
}
.about-values-that-text-4 {
margin-top: 9px;
max-width: 330px;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
font-size: 14px;
line-height: 1.2;
color: color-mix(in oklab, #fff 95%, transparent);
}
@media (min-width: 640px) {
.about-values-that-text-4 {
font-size: 15px;
}
}
.about-why-choose-section {
background-color: #f5f4f0;
}
.about-why-choose-stack {
flex-direction: column;
padding-block: 4rem;
}
@media (min-width: 768px) {
.about-why-choose-stack {
padding-block: 5rem;
}
}
@media (min-width: 1024px) {
.about-why-choose-stack {
padding-block: 6rem;
}
}
@media (min-width: 1280px) {
.about-why-choose-stack {
flex-direction: row;
padding-block: 5vw;
min-height: 38.75vw;
align-items: center;
justify-content: space-between;
}
}
.about-why-choose-box {
z-index: 20;
width: 100%;
max-width: 620px;
}
@media (min-width: 1280px) {
.about-why-choose-box {
width: 32vw;
max-width: none;
flex-shrink: 0;
}
}
.about-why-choose-text {
margin-bottom: 4px;
color: #fe1718;
}
.about-why-choose-text-2 {
margin-top: 2rem;
max-width: 610px;
}
@media (min-width: 768px) {
.about-why-choose-text-2 {
margin-top: 58px;
}
}
@media (min-width: 1280px) {
.about-why-choose-text-2 {
margin-top: 3.6vw;
max-width: none;
}
}
.about-why-choose-stack-2 {
margin-top: 3.5rem;
flex-direction: column;
}
@media (min-width: 1280px) {
.about-why-choose-stack-2 {
margin-top: 0;
flex-direction: row;
flex-shrink: 0;
}
}
.about-why-choose-box-2 {
z-index: 10;
height: min(440px, 142vw - 90.88px);
width: min(310px, 100vw - 64px);
}
@media (min-width: 640px) {
.about-why-choose-box-2 {
height: 520px;
width: 365px;
}
}
@media (min-width: 768px) {
.about-why-choose-box-2 {
height: 560px;
width: 385px;
}
}
@media (min-width: 1280px) {
.about-why-choose-box-2 {
height: 29.2vw;
width: 22.2vw;
}
}
.about-why-choose-box-3 {
rotate: -5deg;
border-radius: 18px;
}
.about-why-choose-box-4 {
z-index: 30;
margin-top: 2.5rem;
width: 100%;
max-width: 680px;
border-radius: 13px;
padding: 1.75rem 1.5rem;
box-shadow: 0 12px 35px #14141409;
}
@media (min-width: 640px) {
.about-why-choose-box-4 {
padding: 2rem;
}
}
@media (min-width: 1280px) {
.about-why-choose-box-4 {
margin-top: 0;
width: 33.35vw;
max-width: none;
padding: 2.1vw 1.15vw;
margin-left: -5.7vw;
translate: 0 1.25vw;
}
}
/* Tablets (until the desktop row at 1280px): a smaller photo on the left with the
points card overlapping it on the right, and a tighter gap under the title. */
@media (min-width: 768px) and (max-width: 1279.98px) {
.about-why-choose-text-2 {
margin-top: 1.5rem;
}
.about-why-choose-stack-2 {
margin-top: 2.5rem;
flex-direction: row;
}
.about-why-choose-box-2 {
width: 260px;
height: 360px;
margin-left: 1rem;
}
.about-why-choose-box-4 {
flex: 1 1 auto;
margin-top: 0;
margin-left: -1.5rem;
max-width: none;
padding: 1.75rem 1.5rem;
}
}
.about-why-choose-grid {
--bs-gutter-x: 2rem;
--bs-gutter-y: 2rem;
}
@media (min-width: 576px) {
.about-why-choose-grid {
--bs-gutter-y: 2.25rem;
}
}
@media (min-width: 1280px) {
.about-why-choose-grid {
--bs-gutter-x: 1.56vw;
--bs-gutter-y: 2.9vw;
}
}
.about-why-choose-row {
min-height: 61px;
gap: 11px;
}
.about-why-choose-label {
width: 2px;
min-width: 2px;
background-color: #003466;
}
.about-why-choose-box-5 {
padding-top: 1px;
}
.about-why-choose-title-2 {
margin-bottom: 3px;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 17px;
line-height: 1.08;
letter-spacing: -.015em;
color: #111;
}
@media (min-width: 1280px) {
.about-why-choose-title-2 {
font-size: clamp(14px, .94vw, 18px);
}
}
.about-why-choose-text-3 {
margin-top: 1px;
font-size: 15px;
line-height: 1.12;
letter-spacing: -.005em;
color: #171717;
}
@media (min-width: 1280px) {
.about-why-choose-text-3 {
font-size: clamp(13px, .84vw, 16px);
line-height: 1.2;
}
}
.about-building-technology-section {
padding-block: 2.5rem;
}
@media (min-width: 640px) {
.about-building-technology-section {
padding-block: 3rem;
}
}
@media (min-width: 768px) {
.about-building-technology-section {
padding-block: 3.5rem;
}
}
@media (min-width: 1024px) {
.about-building-technology-section {
padding-block: 3.75rem;
}
}
.about-building-technology-box {
isolation: isolate;
min-height: 0;
border-radius: 20px;
background-color: #f5f4f0;
color: #050505;
}
@media (min-width: 1024px) {
.about-building-technology-box {
height: 479px;
}
}
.about-building-technology-box-2 {
display: none;
width: 38.65%;
border-top-left-radius: 100px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
@media (min-width: 1024px) {
.about-building-technology-box-2 {
display: block;
}
}
.about-building-technology-overlay {
background-color: #0000;
}
.about-building-technology-box-3 {
order: -9999;
display: block;
height: 260px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
@media (min-width: 1024px) {
.about-building-technology-box-3 {
display: none;
}
}
.about-building-technology-row {
z-index: 10;
width: 100%;
padding: 2.5rem 1.75rem;
}
@media (min-width: 640px) {
.about-building-technology-row {
padding: 3rem 2.5rem;
}
}
@media (min-width: 768px) {
.about-building-technology-row {
padding: 3.5rem 3rem;
}
}
@media (min-width: 1024px) {
.about-building-technology-row {
width: 61.35%;
padding: 0 2.5rem 0 52px;
height: 100%;
}
}
@media (min-width: 1280px) {
.about-building-technology-row {
padding-right: 3rem;
}
}
.about-building-technology-box-4 {
max-width: 730px;
}
.about-building-technology-title {
max-width: 690px;
color: #050505;
}
.about-building-technology-box-5 {
margin-top: 1.25rem;
max-width: 700px;
font-size: 14px;
line-height: 1.48;
letter-spacing: -.005em;
color: #111;
}
@media (min-width: 640px) {
.about-building-technology-box-5 {
margin-top: 1.5rem;
font-size: 15px;
}
}
@media (min-width: 1024px) {
.about-building-technology-box-5 {
margin-top: 1rem;
font-size: 14px;
}
}
.about-building-technology-row-2 {
margin-top: 1.5rem;
gap: 0.75rem;
}
@media (min-width: 640px) {
.about-building-technology-row-2 {
margin-top: 1.75rem;
gap: 15px;
}
}
}
/* ==========================================================================
10. Office page
========================================================================== */
@layer components {
/* Side gutter comes from the inner .container. */
.office-hero-section {
padding-block: 20px 2.5rem;
}
@media (min-width: 640px) {
.office-hero-section {
padding-block: 25px 3rem;
}
}
@media (min-width: 768px) {
.office-hero-section {
padding-block: 28px 3.5rem;
}
}
@media (min-width: 1024px) {
.office-hero-section {
padding-block: 32px 4rem;
}
}
@media (min-width: 1280px) {
.office-hero-section {
padding-block: 35px 5rem;
}
}
.office-hero-box-2 {
aspect-ratio: 2.6;
border-radius: 16px;
}
@media (min-width: 640px) {
.office-hero-box-2 {
aspect-ratio: 2.85;
border-radius: 18px;
}
}
@media (min-width: 768px) {
.office-hero-box-2 {
aspect-ratio: 3;
border-radius: 20px;
}
}
@media (min-width: 1024px) {
.office-hero-box-2 {
aspect-ratio: 3.15;
}
}
@media (min-width: 1280px) {
.office-hero-box-2 {
aspect-ratio: 3.19;
}
}
.office-hero-video {
object-fit: cover;
object-position: center;
}
.office-hero-overlay {
background-color: color-mix(in oklab, #000 4%, transparent);
}
.office-hero-box-3 {
padding-top: 1.5rem;
}
@media (min-width: 640px) {
.office-hero-box-3 {
padding-top: 1.75rem;
}
}
@media (min-width: 768px) {
.office-hero-box-3 {
padding-top: 2rem;
}
}
@media (min-width: 1024px) {
.office-hero-box-3 {
padding-top: 1.75rem;
}
}
.office-hero-title {
max-width: 1100px;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: clamp(2rem, 3.45vw, 3.55rem);
line-height: 1.08;
letter-spacing: -.025em;
color: #000;
}
@media (min-width: 640px) {
.office-hero-title {
font-size: clamp(2.15rem, 3.35vw, 3.5rem);
}
}
@media (min-width: 1024px) {
.office-hero-title {
font-size: clamp(2.4rem, 3.25vw, 3.55rem);
}
}
@media (min-width: 1280px) {
.office-hero-title {
font-size: clamp(2.8rem, 3.15vw, 3.55rem);
}
}
.office-hero-text {
margin-top: 0.5rem;
max-width: 1050px;
}
@media (min-width: 640px) {
.office-hero-text {
margin-top: 0.625rem;
}
}
@media (min-width: 1024px) {
.office-hero-text {
margin-top: 0.5rem;
}
}
.office-hero-stack {
margin-top: 1.25rem;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.75rem;
}
@media (min-width: 640px) {
.office-hero-stack {
flex-direction: row !important;
align-items: center !important;
gap: 15px;
justify-content: flex-start !important;
}
}
/* .container on the same element adds the side gutter. */
.office-get-touch-box {
padding-block: 2.5rem;
}
@media (min-width: 640px) {
.office-get-touch-box {
padding-block: 3rem;
}
}
@media (min-width: 768px) {
.office-get-touch-box {
padding-block: 3.5rem;
}
}
@media (min-width: 1024px) {
.office-get-touch-box {
padding-block: 4rem;
}
}
@media (min-width: 1280px) {
.office-get-touch-box {
padding-block: 2rem;
}
}
/* .row: 1 / 2 (sm) / 3 (lg) columns. The gutters replace the old grid gap;
margin-top and width add the row's negative gutter margins back so the
cards keep their old spacing and the grid still takes 80% of the page. */
.office-get-touch-grid {
--bs-gutter-x: 0;
--bs-gutter-y: 3rem;
--office-grid-mt: 3rem;
margin-top: calc(var(--office-grid-mt) - var(--bs-gutter-y));
width: calc(80% + var(--bs-gutter-x));
}
@media (min-width: 576px) {
.office-get-touch-grid {
--bs-gutter-x: 2.5rem;
--bs-gutter-y: 3.5rem;
}
}
@media (min-width: 640px) {
.office-get-touch-grid {
--office-grid-mt: 3.5rem;
}
}
@media (min-width: 992px) {
.office-get-touch-grid {
--bs-gutter-x: 76px;
--bs-gutter-y: 140px;
}
}
@media (min-width: 1280px) {
.office-get-touch-grid {
--office-grid-mt: 3.25rem;
}
}
.office-get-touch-box-2 {
position: relative;
width: 100%;
min-width: 0;
}
@media (min-width: 992px) {
.office-get-touch-box-2 {
min-height: 156px;
}
}
@media (min-width: 992px) {
.office-get-touch-box-2:after {
position: absolute;
width: 1px;
content: "";
top: 0;
right: 0;
height: 100%;
background-color: #e1e1e1;
}
}
.office-get-touch-title-2 {
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: #000;
padding-bottom: 1px;
font-family: Fraunces, Georgia, Times New Roman, serif;
font-size: 28px;
line-height: 1.05;
letter-spacing: -.015em;
color: #000;
}
@media (min-width: 640px) {
.office-get-touch-title-2 {
font-size: 29px;
}
}
@media (min-width: 1024px) {
.office-get-touch-title-2 {
font-size: 31px;
}
}
@media (min-width: 1280px) {
.office-get-touch-title-2 {
font-size: 32px;
}
}
.office-get-touch-row {
font-size: 14px;
line-height: 1.45;
color: #404040;
}
@media (min-width: 1280px) {
.office-get-touch-row {
font-size: 15px;
}
}
.office-get-touch-row-2 {
font-size: 14px;
line-height: 1.45;
color: #404040;
}
@media (min-width: 1280px) {
.office-get-touch-row-2 {
font-size: 15px;
}
}
.office-get-touch-box-3 {
min-width: 0;
}
@media (min-width: 992px) {
.office-get-touch-box-3 {
min-height: 156px;
}
}
.office-get-touch-box-4 {
position: relative;
width: 100%;
min-width: 0;
padding-top: 0;
}
@media (min-width: 576px) {
.office-get-touch-box-4 {
padding-top: 1.75rem;
border-top-style: solid;
border-top-width: 1px;
border-color: #e1e1e1;
}
}
@media (min-width: 992px) {
.office-get-touch-box-4 {
padding-top: 0;
border-top-width: 0;
min-height: 156px;
}
}
@media (min-width: 992px) {
.office-get-touch-box-4:after {
position: absolute;
width: 1px;
content: "";
top: 0;
right: 0;
height: 100%;
background-color: #e1e1e1;
}
}
.office-get-touch-box-5 {
min-width: 0;
padding-top: 0;
}
@media (min-width: 576px) {
.office-get-touch-box-5 {
padding-top: 1.75rem;
border-top-style: solid;
border-top-width: 1px;
border-color: #e1e1e1;
}
}
@media (min-width: 992px) {
.office-get-touch-box-5 {
padding-top: 0;
border-top-width: 0;
min-height: 156px;
}
}
}
/* ==========================================================================
10a. Tech Stack page
========================================================================== */
@layer components {
/* Hero: full-bleed spheres image, copy on the left. */
.tech-hero {
min-height: 560px;
padding-block: 4rem;
background-color: #f4efe9;
}
@media (min-width: 1200px) {
.tech-hero {
min-height: 680px;
padding-block: 5rem;
}
}
.tech-hero-bg {
object-fit: cover;
object-position: 70% center;
}
/* Light wash keeps the copy readable where it overlaps the spheres. */
.tech-hero-overlay {
background: linear-gradient(90deg, rgba(250, 247, 243, .92) 0%, rgba(250, 247, 243, .75) 55%, rgba(250, 247, 243, .35) 100%);
}
@media (min-width: 992px) {
.tech-hero-overlay {
background: linear-gradient(90deg, rgba(250, 247, 243, .55) 0%, rgba(250, 247, 243, .25) 40%, rgba(250, 247, 243, 0) 55%);
}
}
.tech-hero-copy {
max-width: 640px;
}
@media (min-width: 1200px) {
.tech-hero-copy {
max-width: 700px;
}
}
.tech-hero-actions {
gap: 1rem;
margin-top: 2rem;
}
.tech-hero-btn {
min-height: 52px;
gap: .75rem;
border: 1.5px solid transparent;
border-radius: 10px;
padding: .75rem 1.75rem;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media (min-width: 1200px) {
.tech-hero-btn {
min-height: 64px;
padding-inline: 2rem;
font-size: 18px;
}
}
.tech-hero-btn .icon {
transition: transform .2s ease;
}
.tech-hero-btn:hover .icon {
transform: translateX(4px);
}
.tech-hero-btn:focus-visible {
outline: 2px solid #0f1d4a;
outline-offset: 3px;
}
.tech-hero-btn-primary {
border-color: #e5172b;
background-color: #e5172b;
color: #fff;
}
.tech-hero-btn-primary:hover {
border-color: #c4101f;
background-color: #c4101f;
color: #fff;
}
.tech-hero-btn-outline {
border-color: #0f1d4a;
background-color: rgba(255, 255, 255, .7);
color: #0f1d4a;
}
.tech-hero-btn-outline:hover {
background-color: #0f1d4a;
color: #fff;
}
/* Stack sections: background image, heading, then a frosted card of tech rows. */
.tech-stack-section {
padding-block: 3.5rem;
background-color: #e9e4de;
}
@media (min-width: 1200px) {
.tech-stack-section {
padding-block: 5rem;
}
}
.tech-stack-bg {
object-fit: cover;
object-position: right center;
}
.tech-stack-overlay {
background: linear-gradient(180deg, rgba(248, 245, 241, .55) 0%, rgba(248, 245, 241, .15) 45%, rgba(248, 245, 241, 0) 100%);
}
.tech-stack-head {
max-width: 900px;
margin-bottom: 2rem;
}
@media (min-width: 1200px) {
.tech-stack-head {
margin-bottom: 2.5rem;
}
}
.tech-stack-rule {
width: 64px;
height: 3px;
margin-bottom: 1.25rem;
background-color: #e5172b;
}
.tech-stack-title {
color: #0f1d4a;
}
.tech-stack-intro {
margin-top: 1rem;
font-size: 17px;
line-height: 1.55;
color: #1f2a44;
}
@media (min-width: 1200px) {
.tech-stack-intro {
font-size: 22px;
}
}
.tech-stack-card {
border: 1px solid rgba(255, 255, 255, .7);
border-radius: 20px;
padding: .5rem 1.25rem;
background-color: rgba(255, 255, 255, .78);
box-shadow: 0 20px 50px -20px rgba(15, 29, 74, .25);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
@media (min-width: 992px) {
.tech-stack-card {
padding: .5rem 1.75rem;
}
}
.tech-stack-row {
gap: 1.25rem;
padding-block: 1.5rem;
}
.tech-stack-row + .tech-stack-row {
border-top: 1px solid rgba(15, 29, 74, .12);
}
@media (min-width: 992px) {
.tech-stack-row {
align-items: center;
gap: 2rem;
}
}
.tech-stack-label {
position: relative;
padding-top: .9rem;
font-family: var(--font-body) !important; /* beats the global serif heading rule */
font-size: 18px;
font-weight: 700;
line-height: 1.3;
color: #0f1d4a;
}
.tech-stack-label::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 3px;
background-color: #e5172b;
}
@media (min-width: 992px) {
.tech-stack-label {
flex: 0 0 240px;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 1.5rem;
border-right: 1px solid rgba(15, 29, 74, .15);
}
.tech-stack-label::before {
position: static;
margin-bottom: .6rem;
}
}
@media (min-width: 1200px) {
.tech-stack-label {
flex-basis: 270px;
font-size: 20px;
}
}
/* Flex, not grid: each item is as wide as its name, so names stay on one line. */
/* Variant: plain white section, white card with a soft border, no label dash. */
.tech-stack-section-plain {
background-color: #fff;
}
.tech-stack-section-plain .tech-stack-head {
max-width: none;
}
/* Light blue block holding the heading and the white card. */
.tech-stack-panel {
border-radius: 24px;
padding: 2rem 1.25rem;
background-color: #edf1f5;
}
/* Grey block, as in the back-end design. */
.tech-stack-panel-grey {
background-color: #f0f0f1;
}
/* Beige block, as in the database design. */
.tech-stack-panel-beige {
background-color: #ede5dd;
}
/* Bullet list of capabilities, flowing into columns on wider screens. */
.tech-stack-bullets {
flex: 1 1 auto;
list-style: disc;
padding-left: 1.1rem;
font-size: 15px;
line-height: 1.5;
color: #1f2a44;
}
.tech-stack-bullets li {
display: list-item;
margin-bottom: .45rem;
break-inside: avoid;
}
@media (min-width: 768px) {
.tech-stack-bullets {
column-count: 2;
column-gap: 2.5rem;
}
}
@media (min-width: 1200px) {
.tech-stack-bullets {
column-count: 3;
font-size: 16px;
}
}
/* Red rule placed under the heading instead of above it. */
.tech-stack-rule-below {
margin-top: 1rem;
margin-bottom: 0;
}
@media (min-width: 992px) {
.tech-stack-panel {
padding: 2.5rem 1.75rem;
}
}
@media (min-width: 992px) {
.tech-stack-card-plain .tech-stack-label {
font-size: 18px;
}
}
@media (min-width: 1200px) {
.tech-stack-card-plain .tech-stack-label {
font-size: 20px;
}
}
.tech-stack-card-plain {
border-color: #e6e9ef;
background-color: #fff;
box-shadow: 0 8px 30px -16px rgba(15, 29, 74, .12);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.tech-stack-card-plain .tech-stack-row + .tech-stack-row {
border-top-color: #e6e9ef;
}
.tech-stack-card-plain .tech-stack-label {
padding-top: 0;
}
.tech-stack-card-plain .tech-stack-label::before {
display: none;
}
@media (min-width: 992px) {
.tech-stack-card-plain .tech-stack-label {
border-right-color: #e6e9ef;
}
}
/* Variant: short red dash sits beside the label instead of above it. */
.tech-stack-card-inline .tech-stack-row {
padding-block: 1.1rem;
}
.tech-stack-card-inline .tech-stack-label {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: .9rem;
padding-top: 0;
}
.tech-stack-card-inline .tech-stack-label::before {
position: static;
flex: 0 0 auto;
width: 18px;
margin-bottom: 0;
}
@media (min-width: 992px) {
.tech-stack-card-inline .tech-stack-label {
flex-basis: 290px;
white-space: nowrap;
}
}
@media (min-width: 1200px) {
.tech-stack-card-inline .tech-stack-label {
flex-basis: 320px;
}
}
.tech-stack-list {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
gap: 1.25rem 1rem;
}
@media (min-width: 1200px) {
.tech-stack-list {
column-gap: 1.5rem;
}
}
.tech-stack-item {
min-width: 80px;
gap: .55rem;
}
.tech-stack-icon {
width: 40px;
height: 40px;
object-fit: contain;
transition: transform .2s ease;
}
@media (min-width: 1200px) {
.tech-stack-icon {
width: 46px;
height: 46px;
}
}
.tech-stack-item:hover .tech-stack-icon {
transform: translateY(-3px);
}
.tech-stack-name {
font-size: 14px;
line-height: 1.3;
white-space: nowrap;
color: #1f2a44;
}
@media (min-width: 1200px) {
.tech-stack-name {
font-size: 16px;
}
}
/* "Technologies behind our expertise": white card, tab list on the left,
one panel of technology rows on the right. */
.tech-tabs-section {
padding-block: 3rem;
background-color: #fff;
}
@media (min-width: 1200px) {
.tech-tabs-section {
padding-block: 4.5rem;
}
}
/* Rounded image block on the white section; the frosted card sits on it. */
.tech-tabs-frame {
border-radius: 24px;
padding: 1rem;
background-color: #e9e4de;
}
@media (min-width: 992px) {
.tech-tabs-frame {
padding: 3rem;
}
}
.tech-tabs-bg {
object-fit: cover;
object-position: right center;
}
.tech-tabs-card {
border: 1px solid rgba(255, 255, 255, .7);
border-radius: 20px;
padding: 1.75rem 1.25rem;
background-color: rgba(255, 255, 255, .86);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow: 0 16px 48px -24px rgba(15, 29, 74, .35);
}
@media (min-width: 992px) {
.tech-tabs-card {
padding: 2.5rem 2.25rem;
}
}
.tech-tabs-subtitle {
margin: .75rem 0 0;
}
.tech-tabs-body {
gap: 1.5rem;
margin-top: 1.75rem;
}
@media (min-width: 992px) {
.tech-tabs-body {
gap: 2.25rem;
margin-top: 2.5rem;
}
}
/* Phones and tablets: pills in one row that scrolls sideways. The native
scrollbar is hidden (phones hide or ignore it); .tech-tabs-track below is
a custom indicator that tech-stack.js keeps in sync, so it shows everywhere. */
.tech-tabs-nav {
min-width: 0;
}
.tech-tabs-list {
position: relative; /* offsetParent for the JS that centres the active pill */
flex: 0 0 auto;
gap: .5rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.tech-tabs-list::-webkit-scrollbar {
display: none !important;
}
/* Drag the thumb or tap the track to scroll the pills (tech-stack.js). */
.tech-tabs-track {
position: relative;
height: 5px;
margin-top: .85rem;
border-radius: 3px;
background-color: #d6dce6;
cursor: pointer;
touch-action: none;
}
/* Bigger invisible hit area so the bar is easy to grab with a finger. */
.tech-tabs-track::before {
content: "";
position: absolute;
inset: -12px 0;
}
.tech-tabs-thumb {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 30%;
border-radius: 3px;
background-color: var(--scrollbar-thumb);
cursor: grab;
}
.tech-tabs-track.is-dragging .tech-tabs-thumb {
cursor: grabbing;
}
@media (min-width: 992px) {
.tech-tabs-nav {
flex: 0 0 270px;
align-self: flex-start;
}
.tech-tabs-list {
gap: 0;
overflow: visible;
}
.tech-tabs-track {
display: none;
}
}
.tech-tabs-tab {
flex: 0 0 auto;
gap: 1rem;
border: 1px solid #d6dce6;
border-radius: 999px;
padding: .5rem .95rem;
background: rgba(255, 255, 255, .7);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
text-align: left;
white-space: nowrap;
color: #1f2a44;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tech-tabs-tab:hover {
background-color: #f5f6f8;
}
.tech-tabs-tab:focus-visible {
outline: 2px solid #0f1d4a;
outline-offset: 2px;
}
.tech-tabs-tab[aria-selected="true"] {
border-color: #e5172b;
background-color: #e5172b;
font-weight: 600;
color: #fff;
}
.tech-tabs-chevron {
display: none;
font-size: 13px;
}
@media (min-width: 992px) {
/* Desktop: vertical list with a red bar on the active item. */
.tech-tabs-tab {
width: 100%;
border: 0;
border-bottom: 1px solid #e6e9ef;
border-left: 4px solid transparent;
border-radius: 0;
padding: .9rem 1.25rem;
background: transparent;
font-size: 18px;
}
.tech-tabs-tab:focus-visible {
outline-offset: -2px;
}
.tech-tabs-tab[aria-selected="true"] {
border-bottom-color: #e6e9ef;
border-left-color: #e5172b;
border-radius: 4px;
background-color: #f1f2f4;
font-weight: 700;
color: #0f1d4a;
}
.tech-tabs-tab[aria-selected="true"] .tech-tabs-chevron {
display: inline-block;
}
}
.tech-tabs-panels {
flex: 1 1 auto;
min-width: 0;
}
@media (min-width: 992px) {
.tech-tabs-panels {
border-left: 1px solid #e6e9ef;
padding-left: 2.25rem;
/* Fixed height: title and intro stay put, only the rows scroll. */
height: 540px;
}
.tech-tabs-panel:not([hidden]) {
display: flex;
height: 100%;
flex-direction: column;
}
.tech-tabs-rows {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
/* Undo the inherited site-wide scrollbar-color so the webkit styles below apply. */
scrollbar-color: auto;
scrollbar-width: auto;
overscroll-behavior: contain;
padding-right: 1rem;
}
}
/* !important: the site-wide *::-webkit-scrollbar rules are unlayered. */
.tech-tabs-rows::-webkit-scrollbar {
width: 6px !important;
}
.tech-tabs-rows::-webkit-scrollbar-track {
border-radius: 3px;
background: #e6e9ef !important;
}
.tech-tabs-rows::-webkit-scrollbar-thumb {
border: 0 !important;
border-radius: 3px !important;
background: var(--scrollbar-thumb) !important;
}
.tech-tabs-rows::-webkit-scrollbar-button {
display: none;
}
/* Firefox: standard properties. Chrome would show arrow buttons with these,
so they apply only where ::-webkit-scrollbar is unsupported. */
@supports not selector(::-webkit-scrollbar) {
.tech-tabs-rows {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) #e6e9ef;
}
}
.tech-tabs-panel:focus-visible {
outline: 2px solid #0f1d4a;
outline-offset: -2px;
border-radius: 4px;
}
.tech-tabs-title {
font-size: var(--fs-h3);
font-weight: 700;
line-height: 1.2;
color: #0f1d4a;
}
.tech-tabs-intro {
margin: .6rem 0 1rem;
font-size: 16px;
line-height: 1.55;
color: #5b6478;
}
@media (min-width: 1200px) {
.tech-tabs-intro {
font-size: 17px;
}
}
.tech-tabs-row {
gap: .9rem;
padding-block: 1.1rem;
}
.tech-tabs-row + .tech-tabs-row {
border-top: 1px solid #e6e9ef;
}
@media (min-width: 992px) {
.tech-tabs-row {
align-items: center;
gap: 1.75rem;
}
}
.tech-tabs-label {
font-family: var(--font-body) !important; /* beats the global serif heading rule */
font-size: 16px;
font-weight: 600;
line-height: 1.35;
color: #1f2a44;
}
@media (min-width: 992px) {
.tech-tabs-label {
flex: 0 0 200px;
align-self: stretch;
display: flex;
align-items: center;
padding-right: 1.25rem;
border-right: 1px solid #e6e9ef;
font-size: 17px;
font-weight: 500;
}
}
/* Panel is narrower than a full section: two bullet columns at most. */
@media (min-width: 1200px) {
.tech-tabs-panel .tech-stack-bullets {
column-count: 2;
}
}
.tech-tabs-items {
flex: 1 1 auto;
gap: .9rem 1.6rem;
}
.tech-tabs-item {
gap: .6rem;
font-size: 15px;
line-height: 1.3;
white-space: nowrap;
color: #1f2a44;
}
.tech-tabs-icon {
width: 28px;
height: 28px;
object-fit: contain;
}
@media (min-width: 1200px) {
.tech-tabs-icon {
width: 32px;
height: 32px;
}
}
/* "Solutions we engineer": light-burst image, white heading with a red
bar, then a 3-column grid of frosted white cards. */
.tech-solutions-section {
padding-block: 3rem;
background-color: #0f2a52;
}
@media (min-width: 1200px) {
.tech-solutions-section {
padding-block: 4.5rem;
}
}
.tech-solutions-bg {
object-fit: cover;
object-position: center;
}
/* Darkens the bright centre on narrow screens, where the heading sits on it. */
.tech-solutions-overlay {
background: linear-gradient(180deg, rgba(10, 30, 62, .7) 0%, rgba(10, 30, 62, .25) 45%, rgba(10, 30, 62, 0) 100%);
}
@media (min-width: 992px) {
.tech-solutions-overlay {
background: linear-gradient(90deg, rgba(10, 30, 62, .35) 0%, rgba(10, 30, 62, 0) 45%);
}
}
.tech-solutions-heading {
margin: 0;
}
.tech-solutions-subtitle {
margin: .5rem 0 0;
}
.tech-solutions-grid {
grid-template-columns: 1fr;
gap: .9rem;
margin-top: 1.75rem;
}
@media (min-width: 768px) {
.tech-solutions-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 992px) {
.tech-solutions-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.1rem 1.25rem;
margin-top: 2.5rem;
}
}
.tech-solutions-card {
min-height: 84px;
border: 1px solid rgba(255, 255, 255, .7);
border-radius: 8px;
padding: 1.1rem 1.5rem;
background-color: rgba(255, 255, 255, .9);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 12px 32px -20px rgba(15, 29, 74, .45);
font-size: 17px;
font-weight: 600;
line-height: 1.35;
color: #0f1d4a;
}
@media (min-width: 1200px) {
.tech-solutions-card {
min-height: 96px;
padding: 1.25rem 3rem;
font-size: 22px;
}
}
/* "How we select your technology stack": intro on the left, two-column
list of red-dash criteria with dividers on the right. */
.tech-select-section {
padding-block: 3rem;
background-color: #ffffff;
}
@media (min-width: 1200px) {
.tech-select-section {
padding-block: 5rem;
}
}
.tech-select-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 992px) {
.tech-select-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr);
gap: 3.5rem;
}
}
.tech-select-heading {
margin: 0;
}
.tech-select-text {
margin: 1rem 0 0;
}
@media (min-width: 1200px) {
.tech-select-text {
margin-top: 1.5rem;
}
}
.tech-select-subheading {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: #0f1d4a;
}
@media (min-width: 992px) {
.tech-select-subheading {
margin-top: .5rem;
}
}
.tech-select-list {
grid-template-columns: 1fr;
column-gap: 3.5rem;
margin-top: 1rem;
}
@media (min-width: 768px) {
.tech-select-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.tech-select-item {
gap: 1.25rem;
border-bottom: 1px solid #d9dbe1;
padding-block: 1rem;
font-size: 17px;
line-height: 1.45;
color: #1f2a44;
}
@media (min-width: 1200px) {
.tech-select-item {
padding-block: 1.4rem;
font-size: 20px;
}
}
/* Last row of each column has no divider. */
.tech-select-item:last-child {
border-bottom: 0;
}
@media (min-width: 768px) {
.tech-select-item:nth-last-child(2) {
border-bottom: 0;
}
}
.tech-select-item::before {
flex-shrink: 0;
width: 18px;
height: 2px;
margin-top: .72em;
background-color: var(--red);
content: "";
}
/* "Work with expert developers": intro and red button on the left, white
card with a red-dash list on the right. */
.tech-experts-section {
padding-block: 3rem;
background-color: #ebe4dd;
}
@media (min-width: 1200px) {
.tech-experts-section {
padding-block: 5rem;
}
}
.tech-experts-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 992px) {
.tech-experts-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
gap: 3.5rem;
}
}
.tech-experts-heading {
margin: 0;
}
.tech-experts-text {
margin: 1.25rem 0 0;
}
.tech-experts-cta {
margin-top: 1.75rem;
}
@media (min-width: 1200px) {
.tech-experts-cta {
margin-top: 2.25rem;
}
}
.tech-experts-card {
border-radius: 12px;
padding: 1.5rem 1.25rem;
background-color: rgba(255, 255, 255, .72);
}
@media (min-width: 1200px) {
.tech-experts-card {
padding: 2.25rem 2.25rem 1.5rem;
}
}
.tech-experts-subheading {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: #0f1d4a;
}
.tech-experts-list {
margin-top: .75rem;
}
.tech-experts-item {
gap: 1.25rem;
border-bottom: 1px solid #d9dbe1;
padding-block: 1rem;
font-size: 16px;
font-weight: 600;
line-height: 1.45;
color: #1f2a44;
}
@media (min-width: 1200px) {
.tech-experts-item {
gap: 2.25rem;
padding-block: 1.1rem;
font-size: 20px;
}
}
.tech-experts-item:last-child {
border-bottom: 0;
}
.tech-experts-item::before {
flex-shrink: 0;
width: 20px;
height: 3px;
margin-top: .7em;
background-color: var(--red);
content: "";
}
/* "Why PineSucceed Technologies?": dark navy panel, white heading with a
red bar, then a 2-column grid of outlined glass cards. */
.tech-why-section {
padding-block: 3rem;
background-color: #111a2c;
background-image: linear-gradient(90deg, #0d1628 0%, #141f36 60%, #1a2540 100%);
}
@media (min-width: 1200px) {
.tech-why-section {
padding-block: 5rem;
}
}
/* Code-screen photo across the whole section. */
.tech-why-bg {
object-fit: cover;
object-position: right center;
}
/* Narrow screens crop to the bright code area, so dim it behind the text. */
@media (max-width: 991.98px) {
.tech-why-bg {
opacity: .45;
}
}
.tech-why-heading {
max-width: 14ch;
margin: 0;
}
.tech-why-grid {
grid-template-columns: 1fr;
gap: .9rem;
margin-top: 1.75rem;
}
@media (min-width: 768px) {
.tech-why-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.tech-why-grid {
max-width: 1240px;
gap: .75rem 1rem;
margin-top: 2.5rem;
}
}
.tech-why-card {
min-height: 84px;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 6px;
padding: 1.1rem 1.5rem;
background-color: rgba(15, 29, 60, .55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
font-size: 17px;
font-weight: 500;
line-height: 1.4;
color: #fff;
}
@media (min-width: 1200px) {
.tech-why-card {
min-height: 116px;
padding: 1.25rem 2.75rem;
font-size: 22px;
}
}
/* Closing CTA uses the shared .ai-cta card; it sits right above the
footer here, so give it the same space below as above. */
.ai-cta.tech-cta {
padding-bottom: 3rem;
}
@media (min-width: 1024px) {
.ai-cta.tech-cta {
padding-bottom: 4rem;
}
}
}
/* ==========================================================================
10b. Compliance and Policies page
========================================================================== */
@layer components {
/* Side gutter comes from the inner .container. */
/* Same vertical rhythm for every section on the page, like the service pages. */
.compliance-intro-section,
.compliance-certs-section,
.compliance-approach-section,
.compliance-guides-section,
.compliance-policies-section,
.compliance-cta-section {
padding-block: 3rem;
}
@media (min-width: 768px) {
.compliance-intro-section,
.compliance-certs-section,
.compliance-approach-section,
.compliance-guides-section,
.compliance-policies-section,
.compliance-cta-section {
padding-block: 4rem;
}
}
@media (min-width: 1200px) {
.compliance-intro-section,
.compliance-certs-section,
.compliance-approach-section,
.compliance-guides-section,
.compliance-policies-section,
.compliance-cta-section {
padding-block: 4.5rem;
}
}
/* Tablets: tighter vertical rhythm. */
@media (min-width: 768px) and (max-width: 991.98px) {
.compliance-intro-section,
.compliance-certs-section,
.compliance-approach-section,
.compliance-guides-section,
.compliance-policies-section,
.compliance-cta-section {
padding-block: 2rem;
}
}
/* White card with a soft offset block behind it. */
.compliance-intro-frame {
border-radius: 16px;
border-color: #e5e7eb !important;
box-shadow: 14px 16px 0 #f1e9e7, 0 10px 30px rgba(15, 23, 42, .08);
}
.compliance-intro-img {
aspect-ratio: 20 / 10;
object-fit: cover;
border-radius: 12px;
}
/* Section 2: Our compliance approach */
.compliance-approach-text {
max-width: 520px;
}
.compliance-approach-panel {
container-type: inline-size;
padding: 1rem;
border-radius: 24px;
background-color: #f1f1f0;
}
.compliance-approach-grid {
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
@media (min-width: 576px) {
.compliance-approach-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.compliance-approach-card {
position: relative;
padding: 1.5rem;
border-radius: 16px;
color: #13213a;
}
.compliance-approach-card-1 {
background-color: #d8b99f;
}
.compliance-approach-card-2 {
background-color: #e6dbd5;
}
.compliance-approach-card-3 {
background-color: #d4d5d9;
}
.compliance-approach-card-4 {
background-color: #263a52;
color: #fff;
}
.compliance-approach-title {
margin-bottom: .5rem;
font-size: clamp(1.25rem, 2.7cqw, 1.75rem);
line-height: 1.25;
color: inherit;
}
.compliance-approach-card-text {
font-size: clamp(1rem, 2.35cqw, 1.25rem);
line-height: 1.42;
}
/*
* Tablet and up: staggered, overlapping cards as in the design. Column and
* row tracks follow the design's card edges; heights come from the content,
* so text never overflows. Card 1 and 2 extend under the cards below them
* (negative bottom margin) so no gap shows where the four cards meet.
*/
@media (min-width: 768px) {
.compliance-approach-panel {
/* % padding is relative to the panel width, so it scales with it. */
padding: 7.2% 0 4.7%;
border-radius: 3.4% / 5.5%;
}
.compliance-approach-accent {
top: 0;
left: 45.8%;
width: 11.8%;
margin-top: 4.7%;
aspect-ratio: 131 / 90;
border-radius: 1.6cqw;
background-color: #c99085;
}
.compliance-approach-grid {
grid-template-columns:
minmax(0, 4.49fr) minmax(0, 3.78fr) minmax(0, 37.53fr) minmax(0, 2.54fr)
minmax(0, 2.96fr) minmax(0, 41.15fr) minmax(0, 3.05fr) minmax(0, 4.5fr);
grid-template-rows: 2.4cqw auto 1.2cqw auto 2cqw;
gap: 0;
}
.compliance-approach-card {
padding: clamp(1.25rem, 4.3cqw, 3rem) 3cqw clamp(1.25rem, 4cqw, 2.75rem);
border-radius: 2cqw;
}
.compliance-approach-card-1 {
z-index: 2;
grid-column: 3 / 6;
grid-row: 1 / 3;
margin-bottom: -2.5cqw;
padding-left: 4.95cqw;
}
.compliance-approach-card-2 {
z-index: 1;
grid-column: 6 / 7;
grid-row: 2 / 4;
margin-bottom: -2.5cqw;
padding-left: 5.5cqw;
}
.compliance-approach-card-3 {
z-index: 3;
grid-column: 2 / 5;
grid-row: 3 / 6;
padding-left: 5.9cqw;
}
.compliance-approach-card-4 {
z-index: 4;
grid-column: 4 / 8;
grid-row: 4 / 5;
padding-left: 9.6cqw;
}
/* ch widths reproduce the design's line breaks at any font size. */
.compliance-approach-card-1 .compliance-approach-card-text {
max-width: 21ch;
}
.compliance-approach-card-2 .compliance-approach-card-text {
max-width: 21.7ch;
}
.compliance-approach-card-3 .compliance-approach-card-text {
max-width: 17ch;
}
.compliance-approach-card-4 .compliance-approach-card-text {
max-width: 20.5ch;
}
}
/* Section 3: Certifications and assurance */
/*
* Every logo uses the same scale of its source size, so the logos keep the
* relative sizes of the design. Bootstrap .img-fluid keeps them inside narrow columns.
*/
.compliance-certs-img {
--logo-scale: .4;
/* Drops the off-white background baked into the logo files. */
mix-blend-mode: multiply;
filter: brightness(1.05) contrast(1.1);
}
@media (min-width: 768px) {
.compliance-certs-img {
--logo-scale: .6;
}
}
@media (min-width: 1200px) {
.compliance-certs-img {
--logo-scale: .7;
}
}
.compliance-certs-img-iso-9001,
.compliance-certs-img-clutch,
.compliance-certs-img-hipaa {
width: calc(326px * var(--logo-scale));
}
.compliance-certs-img-iso-27001 {
width: calc(390px * var(--logo-scale));
}
.compliance-certs-img-cmmi {
width: calc(369px * var(--logo-scale));
}
.compliance-certs-img-gdpr {
width: calc(239px * var(--logo-scale));
}
/* Section 4: What guides our business (accordion) */
.compliance-guides-img {
height: auto;
aspect-ratio: 565 / 430;
object-fit: cover;
}
/* Tablets and up (side by side): image fills the rest of the column, so the left
column ends exactly where the accordion ends. */
@media (min-width: 768px) {
.compliance-guides-img {
flex: 1 1 0;
min-height: 14rem;
aspect-ratio: auto;
}
}
.compliance-guides-item {
border-bottom: 1px solid #e5e7eb;
transition: background-color .2s ease;
}
.compliance-guides-item[open] {
background-color: #f4f1ee;
}
.compliance-guides-summary {
gap: 1rem;
padding: 1.25rem 1.25rem 1.25rem 1rem;
list-style: none;
cursor: pointer;
}
.compliance-guides-summary::-webkit-details-marker {
display: none;
}
.compliance-guides-summary:focus-visible {
outline: 2px solid #003466;
outline-offset: -2px;
}
.compliance-guides-item[open] .compliance-guides-summary {
padding-top: 1.5rem;
padding-bottom: .75rem;
}
/* Red bar in front of every title. */
.compliance-guides-summary::before {
content: "";
flex-shrink: 0;
align-self: stretch;
width: 4px;
min-height: 2.25rem;
margin-right: .75rem;
background-color: #fe1718;
}
.compliance-guides-title {
font-size: clamp(1.125rem, 1rem + .6vw, 1.625rem);
line-height: 1.3;
color: #13213a;
}
.compliance-guides-icon {
flex-shrink: 0;
font-size: 1.25rem;
color: #13213a;
}
/* Font Awesome minus glyph while the item is open. */
.compliance-guides-item[open] .compliance-guides-icon::before {
content: "\f068";
}
.compliance-guides-text {
max-width: 62rem;
padding: 0 3.5rem 1.75rem calc(1rem + 4px + .75rem + 1rem);
font-size: clamp(.9375rem, .9rem + .25vw, 1.125rem);
line-height: 1.65;
color: #374151;
}
@media (max-width: 575.98px) {
.compliance-guides-text {
padding-right: 1.25rem;
}
}
/* Tablets: the accordion is the narrow right column, so smaller type and a red bar
closer to the text (the answer lines up with the title). */
@media (min-width: 768px) and (max-width: 991.98px) {
.compliance-guides-summary {
gap: .75rem;
padding: 1.125rem 1rem 1.125rem .75rem;
}
.compliance-guides-summary::before {
margin-right: 0;
}
.compliance-guides-title {
font-size: 17px;
}
.compliance-guides-icon {
font-size: 1rem;
}
.compliance-guides-text {
padding: 0 1rem 1.5rem calc(.75rem + 4px + .75rem);
font-size: 15px;
}
}
/* Phones: smaller titles, red bar closer to the text (the answer lines up with the title). */
@media (max-width: 767.98px) {
.compliance-guides-summary {
gap: .75rem;
padding: 1rem .75rem 1rem .5rem;
}
.compliance-guides-item[open] .compliance-guides-summary {
padding-top: 1.25rem;
padding-bottom: .5rem;
}
.compliance-guides-summary::before {
min-height: 2rem;
margin-right: 0;
}
.compliance-guides-title {
font-size: 16px;
}
.compliance-guides-icon {
font-size: 1rem;
}
.compliance-guides-text {
padding: 0 .75rem 1.25rem calc(.5rem + 4px + .75rem);
}
}
@media (min-width: 992px) {
.compliance-guides-summary {
padding-left: 2.25rem;
padding-right: 2rem;
}
.compliance-guides-summary::before {
margin-right: 1.25rem;
}
.compliance-guides-text {
padding-left: calc(2.25rem + 4px + 1.25rem + 1rem);
}
}
/* Section 5: Corporate policies (vertical tabs) */
.compliance-policies-section {
background-color: #f6f4f1;
}
.compliance-policies-card {
border: 1px solid #e4dfd9;
border-radius: 14px;
background-color: #fff;
}
.compliance-policies-nav {
padding: 1.5rem 1rem 1.25rem 1.25rem;
background-color: #efebe6;
}
@media (min-width: 992px) {
.compliance-policies-nav {
display: flex;
flex-direction: column;
padding: 2rem 1.5rem 1.75rem 2rem;
}
}
.compliance-policies-nav-title {
font-size: clamp(1.25rem, 1.1rem + .45vw, 1.625rem);
color: #13213a;
}
/* Scrollable list with a slim navy scrollbar, as in the design. */
.compliance-policies-tablist {
max-height: 18rem;
padding-right: 1.25rem;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: #1e3a5f transparent;
}
.compliance-policies-tablist::-webkit-scrollbar {
width: 4px;
}
.compliance-policies-tablist::-webkit-scrollbar-track {
background: transparent;
}
.compliance-policies-tablist::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #1e3a5f;
}
/* Large screens: the list fills the nav column and scrolls, so the card
height comes from the policy content, not from the 13 list items. */
@media (min-width: 992px) {
.compliance-policies-tablist {
flex: 1 1 0;
min-height: 0;
max-height: none;
}
}
.compliance-policies-tab {
width: 100%;
display: block;
text-align: left;
padding: .625rem 1rem .625rem 1.5rem;
border: 0;
border-bottom: 1px solid #ddd6ce;
background: transparent;
font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
line-height: 1.4;
color: #3b4352;
transition: background-color .2s ease, color .2s ease;
}
.compliance-policies-tab:hover {
color: #13213a;
}
.compliance-policies-tab:focus-visible {
outline: 2px solid #003466;
outline-offset: -2px;
}
.compliance-policies-tab[aria-selected="true"] {
border-bottom-color: transparent;
border-left: 4px solid #fe1718;
border-radius: 4px;
padding-left: calc(1.5rem - 4px);
background-color: #fff;
font-weight: 700;
color: #13213a;
}
/* Mobile and tablet: the policy list becomes one row of pills that scrolls sideways. */
@media (max-width: 991.98px) {
.compliance-policies-tablist {
display: flex;
align-items: center;
gap: .5rem;
max-height: none;
padding: 0 0 .625rem;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
}
.compliance-policies-tablist::-webkit-scrollbar {
height: 4px;
}
.compliance-policies-tab,
.compliance-policies-tab[aria-selected="true"] {
/* Every pill has the same size; long names wrap onto two lines inside it. */
display: flex;
flex: 0 0 13.5rem;
align-items: center;
justify-content: center;
width: 13.5rem;
height: 3.25rem;
padding: .375rem .875rem;
font-size: .8125rem;
border: 1px solid #ddd6ce;
border-radius: 20px;
background-color: #fff;
line-height: 1.3;
text-align: center;
scroll-snap-align: start;
}
.compliance-policies-tab[aria-selected="true"] {
border-color: #fe1718;
background-color: #fe1718;
color: #fff;
}
}
/* All panels share one grid cell; inactive ones keep their space (invisible),
so on large screens the card is as tall as the longest policy and never jumps on switch. */
.compliance-policies-content {
display: grid;
min-height: 26rem;
padding: 1.75rem 1.25rem 2rem;
}
.compliance-policies-panel {
grid-area: 1 / 1;
}
.compliance-policies-panel:not(.is-active) {
visibility: hidden;
}
@media (min-width: 992px) {
.compliance-policies-content {
padding: 2.75rem 3rem 3rem;
}
}
/* Mobile and tablet: the tabs sit above the card, so let it fit the shown policy
instead of leaving the longest policy's height blank under short ones. */
@media (max-width: 991.98px) {
.compliance-policies-content {
min-height: 0;
}
.compliance-policies-panel:not(.is-active) {
display: none;
}
}
.compliance-policies-panel:focus-visible {
outline: 2px solid #003466;
outline-offset: 4px;
}
.compliance-policies-title {
border-color: #e5e7eb !important;
font-size: clamp(1.75rem, 1.3rem + 1.9vw, 3.25rem);
line-height: 1.15;
letter-spacing: -.02em;
color: #13213a;
}
.compliance-policies-intro {
max-width: 62rem;
font-size: clamp(1rem, .95rem + .3vw, 1.3125rem);
line-height: 1.6;
color: #2b3a55;
}
/* Navy dash in front of each point. */
.compliance-policies-point {
position: relative;
padding-left: calc(var(--bs-gutter-x) * .5 + 2.75rem);
font-size: clamp(.9375rem, .9rem + .25vw, 1.1875rem);
line-height: 1.55;
color: #2b3a55;
}
.compliance-policies-point::before {
content: "";
position: absolute;
top: .75em;
left: calc(var(--bs-gutter-x) * .5);
width: 1.5rem;
height: 3px;
background-color: #13213a;
}
/* Section 6: CTA banner */
.compliance-cta-banner {
padding: 2.5rem 1.5rem;
border-radius: 20px;
background:
radial-gradient(120% 140% at 85% 10%, #1f3150 0%, transparent 60%),
#0f1d33;
}
@media (min-width: 992px) {
.compliance-cta-banner {
padding: 4rem 3.5rem;
border-radius: 24px;
}
}
/* Full-bleed ribbon artwork. Stacked layouts dim it so text stays readable. */
.compliance-cta-img {
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: .4;
}
@media (min-width: 992px) {
.compliance-cta-img {
opacity: 1;
}
/* Navy shade behind the heading and the text keeps them readable where
the ribbons cross. Layers: image, shade, content. */
.compliance-cta-banner::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(10, 22, 44, .6) 0%, rgba(10, 22, 44, 0) 32%, rgba(10, 22, 44, 0) 52%, rgba(10, 22, 44, .65) 68%);
pointer-events: none;
}
.compliance-cta-row {
z-index: 2;
}
}
/* Buttons are the site's shared CTA pills (same as the other pages);
only the outline one is recoloured so it reads on the dark banner. */
.compliance-cta-actions {
gap: .75rem;
}
@media (min-width: 640px) {
.compliance-cta-actions {
gap: 15px;
}
}
/* Text column: narrower than col-lg-6 on wide screens, as in the design. */
@media (min-width: 1200px) {
.compliance-cta-copy {
width: 44%;
}
}
.compliance-cta-note {
font-size: clamp(.9375rem, .9rem + .2vw, 1.125rem);
color: #1f2937;
}
}
/* ==========================================================================
11. Contact page
========================================================================== */
@layer components {
/* Required-field asterisk, also used by the consultation modal. */
.contact-re-end-label {
color: lab(55.4814% 75.0732 48.8528);
}
/* Side gutter shared with the header (see --page-gutter). */
.contact-hero,
.contact-main,
.contact-closing {
--contact-gutter: var(--page-gutter);
}
/* Section 1 - hero: full-width architecture photo behind the copy. */
.contact-hero {
background-color: #f6f3ee;
}
.contact-hero-bg {
object-fit: cover;
object-position: right center;
}
/* Below lg the copy covers the whole width, so fade the photo behind it. */
@media (max-width: 991.98px) {
.contact-hero::after {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(246, 243, 238, .95) 0%, rgba(246, 243, 238, .85) 60%, rgba(246, 243, 238, .4) 100%);
content: "";
}
.contact-hero > .container {
z-index: 1;
}
}
.contact-hero-copy {
max-width: 640px;
padding-block: 2.5rem;
}
@media (min-width: 992px) {
.contact-hero-copy {
padding-block: 3rem 3.5rem;
}
}
.contact-eyebrow {
margin-bottom: 0.75rem;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--red);
}
.contact-hero-title {
margin-bottom: 1.5rem;
font-family: var(--font-display);
font-size: clamp(2.5rem, calc(1.6rem + 3.2vw), 4.25rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink-strong);
}
.contact-hero-lead {
max-width: 34rem;
margin: 0;
font-family: var(--font-body);
font-size: clamp(1rem, calc(0.92rem + 0.3vw), 1.25rem);
line-height: 1.5;
color: #3a4a66;
}
/* Section 2 - topics card and form card */
.contact-main {
padding-block: 1.5rem 3rem;
background-color: #fff;
}
@media (min-width: 992px) {
.contact-main {
padding-block: 1.75rem 4rem;
}
}
/* .row: aside col-lg-5 / form col-lg-7. */
.contact-main-inner {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 1.5rem;
}
.contact-aside {
height: 100%;
padding: 1.75rem 1.5rem;
border-radius: 14px;
background: linear-gradient(160deg, #f1ede7 0%, #e9e4dd 100%);
}
@media (min-width: 992px) {
.contact-aside {
padding: 2.25rem 2rem;
}
}
.contact-aside-title {
margin-bottom: 1.25rem;
font-family: var(--font-display);
font-size: clamp(1.75rem, calc(1.3rem + 1.1vw), 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink-strong);
}
.contact-topics {
display: grid;
gap: 0.625rem;
margin: 0;
padding: 0;
list-style: none;
}
.contact-topic {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 1.125rem 1.5rem;
border: 1px solid transparent;
border-radius: 8px;
background-color: #fff;
font-family: var(--font-body);
font-size: 1.125rem;
font-weight: 600;
text-align: left;
color: var(--ink-strong);
cursor: pointer;
transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-topic i {
color: var(--red);
transition: transform .2s ease;
}
.contact-topic:hover,
.contact-topic:focus-visible {
box-shadow: 0 6px 18px rgba(11, 28, 48, .08);
}
.contact-topic:hover i,
.contact-topic:focus-visible i,
.contact-topic[aria-pressed="true"] i {
transform: translateX(4px);
}
.contact-topic[aria-pressed="true"] {
border-color: var(--red);
}
.contact-divider {
margin: 2rem 0 0.5rem;
border: 0;
border-top: 1px solid #c9c2b8;
opacity: 1;
}
.contact-details {
margin: 0;
}
.contact-details dt {
margin-top: 1.5rem;
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #4b5a78;
}
.contact-details dd,
.contact-details address {
margin: 0.375rem 0 0;
font-family: var(--font-body);
font-size: 1.0625rem;
font-style: normal;
line-height: 1.5;
color: var(--ink-strong);
}
.contact-details a {
color: inherit;
text-decoration: none;
}
.contact-details a:hover {
text-decoration: underline;
}
.contact-form {
height: 100%;
padding: 1.5rem;
border: 1px solid #e3e3e8;
border-radius: 14px;
background-color: #fff;
}
@media (min-width: 992px) {
.contact-form {
padding: 2rem;
}
}
/* .row .gx-4: fields in col-12 col-sm-6, wide fields in col-12. */
.contact-form-grid {
--bs-gutter-y: 1.125rem;
}
.contact-field label {
display: block;
margin-bottom: 0.5rem;
line-height: 1.3;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--ink-strong);
}
.contact-req {
color: var(--red);
}
.contact-field input,
.contact-field select,
.contact-field textarea {
display: block;
width: 100%;
padding: 0.625rem 0.875rem;
line-height: 1.4;
border: 1px solid #c9ced8;
border-radius: 6px;
background-color: #fff;
font-family: var(--font-body);
font-size: 0.9375rem;
color: var(--ink-strong);
appearance: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-field textarea {
min-height: 88px;
resize: vertical;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 3px rgba(0, 52, 102, .12);
}
.contact-field [aria-invalid="true"] {
border-color: var(--red);
}
.contact-select {
position: relative;
}
.contact-select select {
padding-right: 2.5rem;
cursor: pointer;
}
.contact-select i {
position: absolute;
top: 50%;
right: 0.875rem;
font-size: 0.8125rem;
color: var(--ink-strong);
pointer-events: none;
transform: translateY(-50%);
}
.contact-consent {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-top: 1.25rem;
margin-bottom: 1rem;
font-family: var(--font-body);
font-size: 0.8125rem;
line-height: 1.5;
color: #3a4a66;
}
.contact-consent input {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 0.125rem;
accent-color: var(--primary);
}
.contact-consent a {
color: var(--ink-strong);
text-decoration: underline;
}
.contact-status {
margin: 1.25rem 0 0;
padding: 0.75rem 1rem;
border-left: 3px solid var(--primary);
background-color: #eef2f8;
font-size: 0.875rem;
color: var(--ink-strong);
}
.contact-status[data-type="error"] {
border-left-color: var(--red);
background-color: #fdeeee;
}
.contact-submit {
display: inline-flex;
align-items: center;
gap: 0.75rem;
margin-top: 1.25rem;
padding: 0.875rem 1.625rem;
border: 0;
border-radius: 6px;
background-color: var(--red);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
color: #fff;
transition: background-color .2s ease, translate .2s ease;
}
.contact-submit:hover,
.contact-submit:focus-visible {
background-color: #e0080a;
translate: 0 -1px;
}
.contact-submit:disabled {
opacity: 0.7;
cursor: wait;
}
/* Section 3 - closing band */
.contact-closing {
padding-block: 2.5rem;
background-color: #efefef;
}
@media (min-width: 992px) {
.contact-closing {
padding-block: 2rem;
}
}
/* .row: title col-lg-7 / text col-lg-5, stacked with a 1.5rem gap below lg. */
.contact-closing-inner {
--bs-gutter-y: 1.5rem;
}
@media (min-width: 992px) {
.contact-closing-inner {
--bs-gutter-y: 0;
}
}
.contact-closing-title {
margin: 0;
}
.contact-closing-text {
margin: 0;
padding-left: 1.25rem;
border-left: 2px solid var(--red);
}
@media (min-width: 992px) {
.contact-closing-text {
margin-left: 4.5rem;
padding: 1.5rem 0 1.5rem 4.5rem;
}
}
}
/* ==========================================================================
11c. Careers page (pages/career.blade.php)
========================================================================== */
@layer components {
.career-page {
background-color: #f7f7f8;
}
/* Section 1 - career hero: intro, hiring process band and join copy */
.career-hero {
padding-top: 4.5rem;
}
@media (min-width: 992px) {
.career-hero {
padding-top: 5rem;
}
}
.career-eyebrow {
margin-bottom: .75rem;
font-size: 15px;
font-weight: 600;
color: var(--red);
}
.career-title {
margin-bottom: 1.5rem;
font-family: var(--font-display);
font-size: clamp(2.25rem, calc(1.5rem + 3vw), 4rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -.02em;
color: #0a0a0a;
}
.career-lead {
max-width: 52rem;
}
/* Section 2 - hiring process band; the colours match the edges of the artwork. */
.career-process {
padding-block: 1.5rem;
background-color: #e6e1de;
}
.career-process-img {
width: 100%;
max-width: 1320px;
height: auto;
/* Crop the empty space above and below the steps to keep the band short. */
aspect-ratio: 4.2 / 1;
object-fit: cover;
margin-inline: auto;
/* Fade the artwork edges into the band so no box shows. */
-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
mask-composite: intersect;
}
/* Phones: the steps as a vertical list of pills with arrows between them. */
.career-steps {
display: grid;
gap: 1.75rem;
margin: 0;
padding: .5rem 0;
list-style: none;
}
.career-step {
position: relative;
padding: 1rem 1.25rem;
border: 1px solid rgba(255, 255, 255, .8);
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(233, 222, 212, .85));
box-shadow: 0 8px 20px rgba(150, 110, 70, .18), inset 0 1px 0 #fff;
font-size: 1.0625rem;
font-weight: 700;
text-align: center;
color: #13235b;
}
.career-step--dark {
border-color: #2b3d57;
background: linear-gradient(180deg, #5a6b82, #3b4b63);
box-shadow: 0 8px 20px rgba(30, 45, 70, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
color: #fff;
}
.career-step:not(:last-child)::after {
position: absolute;
bottom: -1.5rem;
left: 50%;
color: #8a8f99;
font-family: "Font Awesome 6 Free";
font-size: .875rem;
font-weight: 900;
content: "\f063";
transform: translateX(-50%);
}
/* Section 3 - benefits cards */
.career-benefits {
padding-block: 3rem 1rem;
}
@media (min-width: 992px) {
.career-benefits {
padding-block: 4.5rem 3.5rem;
}
}
.career-benefits-title {
margin-bottom: 1rem;
}
.career-benefits-lead {
margin-bottom: 1.75rem;
}
.career-benefit {
padding: 1.375rem 1.5rem 1.5rem;
border-radius: 10px;
background: linear-gradient(160deg, #f1f1f2 0%, #e9e9eb 100%);
box-shadow: 0 1px 2px rgba(11, 28, 48, .04);
transition: background .25s ease, box-shadow .25s ease, translate .25s ease;
}
.career-benefit--warm {
background: linear-gradient(160deg, #f4efe9 0%, #ece5dc 100%);
}
/* Hover: the card turns navy with white text, as in the design. */
.career-benefit:hover {
background: #13274a;
box-shadow: 0 12px 28px rgba(19, 39, 74, .25);
translate: 0 -2px;
}
.career-benefit-title {
margin: 0;
font-family: var(--font-body);
font-size: clamp(1.25rem, calc(1rem + .7vw), 1.3rem);
font-weight: 700;
line-height: 1.3;
color: #13235b;
transition: color .25s ease;
}
.career-benefit-note {
margin: .875rem 0 0;
font-size: 1rem;
line-height: 1.45;
color: #3a4a66;
transition: color .25s ease;
}
.career-benefit:hover .career-benefit-title,
.career-benefit:hover .career-benefit-note {
color: #fff;
}
/* Section 4 - hiring process cards (number, title, text, illustration on the right) */
.career-hiring {
padding-block: 3rem 3.5rem;
background: #efe9e3;
}
@media (min-width: 992px) {
.career-hiring {
padding-block: 3rem 4rem;
}
}
/* Heading in the bold sans face, as in the design. */
/* 992px and up: one designed card image per step with HTML text on top. Positions
are percentages and font sizes card-width units, measured from the 480px-wide
card images (1px = 0.2083cqw), so each card scales as one piece. */
.career-design-card {
container-type: inline-size;
border: 1px solid rgba(190, 172, 150, .45);
border-radius: 12px;
box-shadow: 0 2px 10px rgba(11, 28, 48, .07);
}
.career-design-card--light {
border-color: #1d3459;
}
/* Scaled up slightly so the soft edge baked into the artwork is cut off by the card. */
.career-design-bg {
width: 100%;
height: auto;
scale: 1.01;
/* Slightly shorter than the 480 x 336 artwork; the empty bottom strip is cropped. */
aspect-ratio: 500 / 322;
object-fit: cover;
object-position: center top;
}
.career-design-num,
.career-design-title,
.career-design-text {
position: absolute;
margin: 0;
white-space: nowrap;
}
/* Step badge drawn in CSS: navy disc, gold ring, soft shadow (64px of the card image). */
.career-design-num {
display: flex;
align-items: center;
justify-content: center;
width: 13.33cqw;
height: 13.33cqw;
border: .625cqw solid #c9a77c;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #284573 0%, #142b4f 55%, #0f2240 100%);
box-shadow: 0 0 0 .42cqw rgba(255, 255, 255, .55), 0 1.25cqw 2.5cqw rgba(19, 39, 74, .3), inset 0 .3cqw .6cqw rgba(255, 255, 255, .12);
font-family: var(--font-body);
font-size: 5.625cqw; /* 27px */
font-weight: 700;
line-height: 1;
letter-spacing: -.01em;
color: #fff;
translate: -50% -50%;
}
.career-design-card--light .career-design-num {
border-color: #d9c7ad;
box-shadow: 0 0 0 .42cqw rgba(255, 255, 255, .18), 0 1.25cqw 2.5cqw rgba(0, 0, 0, .35), inset 0 .3cqw .6cqw rgba(255, 255, 255, .12);
}
.career-design-title {
font-size: 6cqw; /* 30px */
font-weight: 800;
line-height: 1.0667; /* 32px */
letter-spacing: -.02em;
color: #0a0a0a;
}
.career-design-text {
font-family: var(--font-body);
font-size: 3cqw !important; /* 17px; beats the phone-wide 15px paragraph rule */
font-weight: 400;
line-height: 1.3235; /* 22.5px */
color: #3a3f4b;
}
.career-design-card--light .career-design-title,
.career-design-card--light .career-design-text {
color: #ffffffbf;
}
.career-hiring-grid {
--bs-gutter-x: 1.125rem;
--bs-gutter-y: 1.125rem;
}
.career-hiring-card {
min-height: 100%;
padding: 1.5rem 1.375rem 1.75rem;
border: 1px solid rgba(201, 182, 160, .45);
border-radius: 10px;
box-shadow: 0 2px 8px rgba(11, 28, 48, .05);
}
@media (min-width: 768px) {
.career-hiring-card {
padding: 1.5rem 2rem 2rem;
min-height: 21rem;
}
}
.career-hiring-card--warm {
background: linear-gradient(135deg, #f5ede3 0%, #ece0d2 100%);
}
.career-hiring-card--cool {
background: linear-gradient(135deg, #eef0f4 0%, #e2e6ed 100%);
}
.career-hiring-card--dark {
border-color: #1d3459;
background: radial-gradient(circle at 75% 60%, #3b5582 0%, #213a63 35%, #142a4d 70%);
}
/* Illustration (transparent background, cropped to its content). */
.career-hiring-img {
position: absolute;
top: 1rem;
right: .75rem;
width: 7.5rem;
height: auto;
}
/* 768px and up: two-part card as in the design - text on the left, illustration on
the right. Sizes and positions come from the --img-* / --text-w / --title-w
variables set per card in career.blade.php (measured from the design). */
@media (min-width: 768px) {
.career-hiring-card {
container-type: inline-size;
}
.career-hiring-card > * {
/* Illustration width: a share of the card, but never bigger than in the design. */
--img: min(calc(var(--img-pct) * 1cqw), var(--img-cap));
}
.career-hiring-img {
top: var(--img-top);
right: var(--img-right);
width: var(--img);
}
/* Text stays left of the illustration (1cqw = 1% of the card content width). */
.career-hiring-title {
max-width: calc(100cqw - var(--img) + var(--title-room, 1rem));
}
.career-hiring-text {
max-width: calc(100cqw - var(--img) + var(--overlap));
}
}
/* 2-column layout (768-1399px): wide cards, so the text stops before the illustration. */
@media (min-width: 768px) and (max-width: 1399.98px) {
.career-hiring-text {
max-width: calc(100cqw - var(--img) - 1rem);
}
}
.career-hiring-body {
z-index: 1;
}
.career-hiring-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.25rem;
height: 3.25rem;
border: 2px solid #c9a97a;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #2a4472, #13274a 70%);
box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 4px 12px rgba(19, 39, 74, .3);
font-family: var(--font-body);
font-size: 1.25rem;
font-weight: 700;
color: #fff;
}
@media (min-width: 768px) {
.career-hiring-num {
width: 4rem;
height: 4rem;
font-size: 1.625rem;
}
}
.career-hiring-title {
margin: 1rem 0 0;
font-family: var(--font-body) !important; /* the design uses the sans face here */
font-size: clamp(1.375rem, calc(1.05rem + .9vw), 1.875rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -.02em;
color: #0a1424;
overflow-wrap: normal !important; /* never split a word; beats the global h3 rule */
}
.career-hiring-text {
margin: 1rem 0 0;
font-size: .9375rem;
line-height: 1.45;
color: #2c3445;
}
@media (min-width: 1400px) {
.career-hiring-text {
font-size: 1.0625rem;
}
}
/* Phones: the title stays clear of the small illustration. */
@media (max-width: 767.98px) {
.career-hiring-title {
padding-right: 7rem;
}
}
.career-hiring-card--dark .career-hiring-title,
.career-hiring-card--dark .career-hiring-text {
color: #fff;
}
.career-hiring-cta {
margin-top: 1.25rem;
}
.career-hiring-cta .career-btn {
padding: .625rem 1rem;
border-radius: 8px;
background-color: #d7192d;
font-weight: 400;
}
/* Section 2 (below the process band) - join copy and application button */
.career-join {
padding-block: 2.25rem 0;
}
@media (min-width: 992px) {
.career-join {
padding-block: 2.5rem 0;
}
}
.career-join-text {
max-width: 62rem;
}
.career-btn {
gap: .875rem;
padding: .625rem 1rem;
border-radius: 6px;
background-color: var(--red);
font-size: 1rem;
font-weight: 400;
color: #fff;
transition: background-color .2s ease, translate .2s ease;
}
.career-btn:hover,
.career-btn:focus-visible {
background-color: #e0080a;
color: #fff;
translate: 0 -1px;
}
/* Section 4 - current openings. Layout, spacing and type come from Bootstrap
utilities and the shared classes; only what they cannot do is here. */
/* Network photo behind the panel, faded to cream on the left (on top below 992px). */
.career-openings-panel {
border-radius: 24px;
background: linear-gradient(90deg, #f1e8e1f2, #f1e8e199 40%, #f1e8e100 70%), var(--openings-bg) right top / cover no-repeat, #e9dfd6;
box-shadow: 0 24px 60px rgba(11, 28, 48, .14);
}
@media (max-width: 991.98px) {
.career-openings-panel {
background: linear-gradient(180deg, #f1e8e18c, #f1e8e1d9 14rem, #e9dfd6 22rem), var(--openings-bg) right top / auto 22rem no-repeat, #e9dfd6;
}
}
/* "Grow with PineSucceed" and "Open positions" */
.career-openings-label {
font-size: 14px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--red);
}
.career-openings-list,
.career-role-card {
border: 1px solid rgba(255, 255, 255, .7);
border-radius: 14px;
}
.career-openings-list {
background: #f0ece8d9;
backdrop-filter: blur(6px);
}
/* Phones: the "Current openings" intro sits on a busy photo, so use the title's dark ink. */
@media (max-width: 767.98px) {
.career-openings-panel .section-desc {
color: #0b1c30;
}
}
.career-role-card {
background: #f8f6f3;
box-shadow: 0 4px 18px rgba(11, 28, 48, .08);
}
/* Role list scrolls on its own once there are more roles than fit */
.career-openings-nav {
flex-wrap: nowrap;
max-height: 420px;
overflow-y: auto;
padding-right: 0.25rem;
scrollbar-width: thin;
scrollbar-color: #b8b2ab transparent;
}
.career-openings-nav::-webkit-scrollbar {
width: 4px;
}
.career-openings-nav::-webkit-scrollbar-thumb {
background-color: #b8b2ab;
border-radius: 999px;
}
.career-openings-nav .nav-link {
flex-shrink: 0;
border-radius: 10px;
color: #0b1c30;
}
.career-openings-nav .nav-link.active {
background: #0b1c30;
box-shadow: 0 6px 16px rgba(11, 28, 48, .25);
color: #fff;
}
/* Role names in the list, the open role's title and its meta line
(sizes match Bootstrap's fs-5 / fs-2 / fs-5 above phones). */
.career-openings-role,
.career-role-meta--bar {
font-size: 1.25rem;
}
.career-role-title {
font-size: calc(1.325rem + .9vw);
}
@media (min-width: 1200px) {
.career-role-title {
font-size: 2rem;
}
}
/* Phones and tablets: the role list is one row of cards that scrolls sideways (the
markup's flex-lg-column keeps it vertical from lg up), with smaller role names.
The open role's title and meta follow the phone sizes at the end of this file (20px / 15px).
Chrome ignores ::-webkit-scrollbar while scrollbar-width/-color are set, and the thin bar
is an overlay that only shows while scrolling: reset them so the site's styled bar shows. */
@media (max-width: 991.98px) {
.career-openings-nav {
max-height: none;
overflow-x: auto;
overflow-y: hidden;
padding: 0 0 0.75rem;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: auto;
scrollbar-color: auto;
}
/* Equal cards: same width, all as tall as the tallest role, content centred. */
.career-openings-nav .nav-link {
display: flex;
flex: 0 0 85%;
flex-direction: column;
justify-content: center;
scroll-snap-align: start;
}
.career-openings-role {
font-size: 16px;
}
}
/* Tablets: about two and a half role cards in view. */
@media (min-width: 768px) and (max-width: 991.98px) {
.career-openings-nav .nav-link {
flex-basis: 40%;
}
}
.career-role :is(h3, h4) {
color: #0b1c30;
}
.career-role li {
list-style: disc;
}
.career-role li::marker {
color: #8a8f99;
}
/* Jaipur · Full-time (tabs), Jaipur | Full-time | 1–4 years (role card) */
.career-role-meta span + span::before {
margin-inline: .5rem;
content: "·";
}
.career-role-meta--bar span + span::before {
margin-inline: .875rem;
content: "|";
}
@media (min-width: 768px) {
.career-role-col + .career-role-col {
border-left: 1px solid #dcd8d3;
}
}
/* Tab change: the new role's content comes in with a short stagger. */
.career-role.show :is(.border-bottom, h4, li) {
animation: career-role-in .45s cubic-bezier(.22, 1, .36, 1) both;
}
.career-role.show h4 { animation-delay: .08s; }
.career-role.show li { animation-delay: .15s; }
@keyframes career-role-in {
from {
opacity: 0;
translate: 0 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.career-role.show :is(.border-bottom, h4, li) {
animation: none;
}
}
/* Section 5 - application checklist: cream card, photo on the right. */
.career-checklist-card,
.career-checklist-note {
border-radius: 16px;
background: #efebe6;
}
.career-checklist-media {
min-height: 18rem;
}
.career-checklist,
.career-checklist-note {
color: #0b1c30;
}
.career-checklist li {
list-style: disc;
}
/* Career text sizes: Bootstrap's fs-5 / fs-4 above phones, smaller on phones.
(Bootstrap's fs-* are !important in the vendor layer, so nothing here could shrink them.) */
.career-fs-5 {
font-size: 1.25rem;
}
.career-fs-4 {
font-size: calc(1.275rem + .3vw);
}
@media (min-width: 1200px) {
.career-fs-4 {
font-size: 1.5rem;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.career-fs-5 {
font-size: 16px;
}
}
@media (max-width: 767.98px) {
.career-fs-5 {
font-size: 15px;
}
.career-fs-4 {
font-size: 18px;
}
}
.career-checklist li::marker {
color: #b5a596;
font-size: 1.8em;
}
.career-checklist-note {
background: #eef0f4;
}
.career-checklist-note > span {
border-left: 4px solid var(--red);
}
/* Section 6 - privacy / fraud cards: coloured bar on the left, tinted panel on the right. */
.career-notice {
border-left: clamp(.75rem, 3vw, 3rem) solid #b5a596;
border-radius: 16px;
background: #ebe9e7;
}
.career-notice--alert {
border-left-color: var(--red);
background: #ddd3cb;
}
.career-notice-aside {
background: linear-gradient(160deg, #e2d8cf 0%, #a9adb8 55%, #34476b 100%);
}
.career-notice-aside--light {
background: linear-gradient(160deg, #e9e7e6 0%, #d3d3d8 60%, #b9bcc5 100%);
}
/* Candidate privacy: photo fills the right panel, a dark fade carries the link text. */
.career-notice-aside--photo {
min-height: 18rem;
overflow: hidden;
background: #34476b;
}
.career-notice-img {
object-position: center 40%;
transition: scale .6s ease;
}
.career-notice-aside--photo:hover .career-notice-img {
scale: 1.04;
}
.career-notice-aside--photo::before {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(11, 28, 48, 0) 35%, rgba(11, 28, 48, .85) 100%);
content: "";
}
.career-notice-caption {
z-index: 2;
}
.career-notice-caption:hover,
.career-notice-caption:focus-visible {
color: #fff;
text-decoration: underline !important;
text-underline-offset: 4px;
}
}
/* ==========================================================================
11b. AI services page (ai-across-sdlc-services.html)
========================================================================== */
@layer components {
/* Gap below the nav and image height match the industry page hero
(.industry-box padding-top and .industry-box-3). */
.ai-hero {
padding: 3rem 0 3rem;
background-color: #fff;
}
@media (min-width: 640px) {
.ai-hero {
padding-top: 2rem;
}
}
@media (min-width: 768px) {
.ai-hero {
padding-top: 3rem;
}
}
@media (min-width: 1024px) {
.ai-hero {
padding-block: 4rem 4.5rem;
}
}
@media (min-width: 1280px) {
.ai-hero {
padding-top: 6rem;
}
}
.ai-hero-media {
aspect-ratio: 3.19;
border-radius: 16px;
}
@media (min-width: 640px) {
.ai-hero-media {
border-radius: 18px;
}
}
@media (min-width: 768px) {
.ai-hero-media {
border-radius: 20px;
}
}
@media (min-width: 1024px) {
.ai-hero-media {
aspect-ratio: 4;
}
}
/* Heading block above the image, text and buttons below it. */
.ai-hero-copy {
max-width: 1050px;
padding-top: 1.75rem;
}
.ai-hero-head {
padding-top: 0;
padding-bottom: 1.75rem;
}
@media (min-width: 1024px) {
.ai-hero-copy {
padding: 2rem 0 0 0.5rem;
}
.ai-hero-head {
padding-top: 0;
padding-bottom: 2.25rem;
}
}
.ai-hero-subtitle {
margin-bottom: 0;
font-family: var(--font-body);
font-size: 17px !important;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--ink-strong);
margin-top: 12px;
}
/* Service pages (data-page="service"), phones only. */
@media (max-width: 767.98px) {
[data-page="service"] .ai-hero-subtitle {
font-size: 15px !important;
}
}
.ai-hero-text {
margin-bottom: 1rem;
font-size: 16px;
line-height: 1.6;
color: #5b6478;
font-weight: 500;
}
.ai-hero-actions {
margin-top: 1.75rem;
}
/* Section 2 - AI Across SDLC services (life cycle tabs) */
.ai-lifecycle {
padding: 1rem 0 4rem;
background-color: #f5f4f0;
}
@media (min-width: 1024px) {
.ai-lifecycle {
padding-bottom: 3.5rem;
padding-top: 2.5rem;
}
}
.ai-lifecycle-head {
margin-bottom: 2rem;
}
@media (min-width: 1024px) {
.ai-lifecycle-head {
margin-bottom: 2.75rem;
padding-left: 1.25rem;
}
}
.ai-lifecycle-title {
margin-bottom: 0.75rem;
}
.ai-lifecycle-lead {
margin: 0;
}
/* Columns come from Bootstrap .row / .col-* in the markup */
.ai-lifecycle-card {
overflow: hidden;
border: 1px solid #e6e3dc;
border-radius: 16px;
background-color: #fff;
}
@media (min-width: 1200px) {
.ai-lifecycle-card {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 0.85fr);
min-height: 600px;
}
}
.ai-lifecycle-nav {
padding: 1.75rem 1.25rem;
background-color: #f4f1ec;
}
@media (min-width: 1024px) {
.ai-lifecycle-nav {
padding: 2rem 1.75rem;
}
}
.ai-lifecycle-nav-title {
margin: 0 0 1.25rem 0.75rem;
font-family: var(--font-display);
font-size: clamp(1.5rem, calc(1.1rem + 0.8vw), 1.875rem);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink-strong);
}
.ai-lifecycle-tabs {
display: flex;
flex-direction: column;
}
/* Long tab lists (17 services) scroll inside the nav instead of making
the whole card very tall */
.ai-lifecycle-tabs--scroll {
max-height: 22rem;
overflow-y: auto;
padding: 2px 6px 2px 2px;
overscroll-behavior: contain;
}
@media (min-width: 1200px) {
.ai-lifecycle-tabs--scroll {
max-height: 450px;
}
}
.ai-lifecycle-tabs--scroll > .ai-lifecycle-tab {
flex-shrink: 0;
}
.ai-lifecycle-tab {
position: relative;
padding: 0.8rem 1.5rem;
border: 0;
border-bottom: 1px solid #e2ded4;
background: none;
font-size: 16px;
text-align: left;
color: #3a4a66;
transition: background-color .2s ease, color .2s ease;
}
@media (min-width: 1280px) {
.ai-lifecycle-tab {
font-size: 17px;
}
}
.ai-lifecycle-tab:hover {
color: var(--ink-strong);
}
.ai-lifecycle-tab[aria-selected="true"] {
border-bottom-color: transparent;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 2px 10px #10192c0f;
font-weight: 600;
color: var(--ink-strong);
}
.ai-lifecycle-tab[aria-selected="true"]::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 3px;
border-radius: 3px 0 0 3px;
background-color: var(--red);
content: "";
}
.ai-lifecycle-tab:focus-visible {
outline: 2px solid var(--primary);
outline-offset: -2px;
}
/* Mobile and tablet: the nav takes the full card width and the scrolling
tab list becomes one horizontally scrolling row above the panel */
@media (max-width: 1199.98px) {
.ai-lifecycle-card > .ai-lifecycle-nav,
.ai-lifecycle-card > .ai-lifecycle-panel {
flex: 0 0 100%;
max-width: 100%;
}
.ai-lifecycle-card > .ai-lifecycle-nav {
padding-bottom: 1.25rem;
}
.ai-lifecycle-tabs--scroll {
flex-direction: row;
gap: 0.5rem;
max-height: none;
padding: 2px 2px 10px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
}
/* Every tab has the same size; long service names wrap onto two lines
inside it instead of running past the screen edge. */
.ai-lifecycle-tabs--scroll > .ai-lifecycle-tab {
display: flex;
flex: 0 0 13.5rem;
align-items: center;
justify-content: center;
width: 13.5rem;
height: 3.25rem;
padding: .375rem .875rem;
border: 1px solid #e2ded4;
border-radius: 6px;
font-size: .8125rem;
line-height: 1.3;
text-align: center;
scroll-snap-align: start;
}
.ai-lifecycle-tabs--scroll > .ai-lifecycle-tab[aria-selected="true"] {
border-color: transparent;
}
}
.ai-lifecycle-panel {
padding: 2rem 1.25rem 2.25rem;
}
@media (min-width: 1024px) {
.ai-lifecycle-panel {
padding: 2.25rem 2.5rem 2.5rem;
}
}
.ai-lifecycle-panel.is-changing > * {
animation: fade-slide-x .5s cubic-bezier(.22, .61, .36, 1) both;
}
.ai-lifecycle-step {
margin-bottom: 1rem;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6b7891;
}
.ai-lifecycle-step-no {
color: var(--red);
}
.ai-lifecycle-panel-title {
margin-bottom: 1.25rem;
font-family: var(--font-display);
font-size: clamp(1.75rem, calc(1.2rem + 1.6vw), 2.75rem);
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--ink-strong);
}
.ai-lifecycle-text {
margin-bottom: 1.75rem;
font-size: clamp(1rem, calc(0.92rem + 0.3vw), 1.1875rem);
line-height: 1.6;
color: #5b6a86;
}
.ai-lifecycle-list-title {
margin-bottom: 1rem;
font-family: var(--font-body);
font-size: 17px;
font-weight: 600;
color: var(--ink-strong);
}
.ai-lifecycle-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem 2rem;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 576px) {
.ai-lifecycle-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-flow: column;
grid-template-rows: repeat(4, auto);
}
}
.ai-lifecycle-list[hidden] {
display: none;
}
.ai-lifecycle-list li {
position: relative;
padding-left: 2.5rem;
font-size: 16px;
line-height: 1.5;
color: #3a4a66;
}
.ai-lifecycle-list li::before {
position: absolute;
top: 0.72em;
left: 0;
width: 18px;
height: 2px;
background-color: var(--ink-strong);
content: "";
}
.ai-lifecycle-media {
min-height: 260px;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.ai-lifecycle-media {
min-height: 320px;
}
}
.ai-lifecycle-media img {
object-fit: cover;
}
/* Section 3 - Transform Software Delivery with AI (two outcome cards) */
.ai-outcome {
padding: 0 0 4rem;
background-color: #fff;
}
@media (min-width: 1024px) {
.ai-outcome {
padding-bottom: 3.5rem;
padding-top: 2.5rem;
}
}
.ai-outcome-head {
margin-bottom: 1.75rem;
}
@media (min-width: 1024px) {
.ai-outcome-head {
margin-bottom: 2rem;
padding-left: 0.5rem;
}
}
.ai-outcome-card {
position: relative;
overflow: hidden;
padding: 2rem 1.25rem;
border-radius: 20px;
}
@media (min-width: 768px) {
.ai-outcome-card {
padding: 2rem 2.5rem 2.25rem;
}
}
@media (min-width: 1280px) {
.ai-outcome-card {
padding: 1.75rem 2.5rem 2.5rem;
}
.ai-outcome-card--dark {
padding-bottom: 1.25rem;
}
}
.ai-outcome-card > * {
position: relative;
z-index: 1;
}
.ai-outcome-card--light {
background-color: #efede6;
color: var(--ink-strong);
}
/* Navy card with soft diagonal light bands */
.ai-outcome-card--dark {
background-color: #0f2350;
background-image: linear-gradient(160deg, #11306a 0%, #0c1f47 100%);
color: #fff;
}
.ai-outcome-card--dark::before,
.ai-outcome-card--dark::after {
position: absolute;
z-index: 0;
pointer-events: none;
content: "";
}
.ai-outcome-card--dark::before {
inset: 0;
background-color: #ffffff0f;
clip-path: polygon(55% 0, 100% 0, 100% 75%, 60% 100%, 35% 100%, 70% 45%);
}
.ai-outcome-card--dark::after {
top: -30%;
right: -38%;
width: 70%;
aspect-ratio: 1;
border-radius: 50%;
background-color: #ffffff0f;
}
.ai-outcome-title {
margin-bottom: 1.25rem;
max-width: 16ch;
font-family: var(--font-display);
font-size: clamp(1.75rem, calc(1.2rem + 1.3vw), 2.75rem);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.025em;
color: inherit;
}
.ai-outcome-card--dark .ai-outcome-title {
margin-bottom: 0.75rem;
}
.ai-outcome-text {
margin-bottom: 1.75rem;
padding-bottom: 1.75rem;
border-bottom: 1px solid #cfcbc0;
font-size: clamp(1rem, calc(0.92rem + 0.3vw), 1.1875rem);
line-height: 1.5;
color: #3a4a66;
}
@media (min-width: 768px) {
.ai-outcome-card--light .ai-outcome-text {
padding-right: 25%;
}
}
.ai-outcome-card--dark .ai-outcome-text {
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom-color: #ffffffb3;
color: #fff;
}
.ai-outcome-label {
margin-bottom: 0.75rem;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: inherit;
}
.ai-outcome-card--dark .ai-outcome-label {
margin-bottom: 0.25rem;
}
.ai-outcome-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
column-gap: 2.75rem;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 576px) {
.ai-outcome-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(3, auto);
grid-auto-flow: column;
}
.ai-outcome-list--questions {
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
grid-template-rows: repeat(4, auto);
}
}
.ai-outcome-list li {
font-size: 16px;
line-height: 1.4;
}
@media (min-width: 1280px) {
.ai-outcome-list li {
font-size: 17px;
}
}
/* Light card: single-line rows, room for the corner shape */
.ai-outcome-card--light .ai-outcome-list li {
padding: 0.8rem 0.25rem;
border-bottom: 1px solid #d6d2c8;
color: #3a4a66;
}
.ai-outcome-card--light .ai-outcome-list li:nth-child(3),
.ai-outcome-card--light .ai-outcome-list li:nth-child(6) {
border-bottom: 0;
}
@media (max-width: 575.98px) {
.ai-outcome-card--light .ai-outcome-list li:nth-child(3) {
border-bottom: 1px solid #d6d2c8;
}
}
@media (min-width: 768px) {
.ai-outcome-card--light .ai-outcome-list {
max-width: 82%;
}
}
/* Navy card: two-line questions, tighter rows */
.ai-outcome-card--dark .ai-outcome-list li {
padding: 0.4rem 0.25rem 0.45rem;
border-bottom: 1px solid #ffffffb3;
color: #fff;
}
.ai-outcome-card--dark .ai-outcome-list li:nth-child(4),
.ai-outcome-card--dark .ai-outcome-list li:last-child {
border-bottom: 0;
}
@media (max-width: 575.98px) {
.ai-outcome-card--dark .ai-outcome-list li:nth-child(4) {
border-bottom: 1px solid #ffffffb3;
}
}
@media (min-width: 1200px) {
.ai-outcome-card--dark .ai-outcome-list li {
max-width: 16em;
}
}
.ai-outcome-shape {
display: none;
}
@media (min-width: 768px) {
.ai-outcome-shape {
position: absolute;
right: 0;
bottom: 0;
z-index: 0;
display: block;
width: 24%;
max-width: 260px;
height: auto;
}
}
/* Section 4 - AI Across SDLC implementation process (hover cards) */
/* Shared spacing for the AI service page sections (desktop values set per section below) */
.ai-process,
.ai-goals,
.ai-tech,
.ai-why,
.ai-benefits {
padding: 3.5rem 0 4rem;
}
/* Shared lead text under section headings */
.ai-goals-lead,
.ai-tech-lead,
.ai-benefits-lead {
margin: 0;
}
.ai-process {
background-color: #06264b;
color: #fff;
}
@media (min-width: 1024px) {
.ai-process {
padding-block: 5rem 5.5rem;
}
}
.ai-process-head {
margin-bottom: 2rem;
}
@media (min-width: 1024px) {
.ai-process-head {
margin-bottom: 3rem;
}
}
.ai-process-heading {
margin: 0 0 1rem;
}
/* Description sits under the heading */
.ai-process-intro {
max-width: 40rem;
margin: 0;
}
.ai-process-card {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
min-width: 0;
height: 510px;
overflow: hidden;
border: 1px solid #ffffff80;
background-color: #fff;
box-shadow: 0 18px 38px #000a1929;
color: #081d36;
}
@media (min-width: 651px) {
.ai-process-card {
height: 545px;
}
}
/* Top visual: one photo split into four offset strips */
.ai-process-visual {
position: relative;
flex: 0 0 65%;
overflow: hidden;
padding: 1.375rem;
background-color: #e5e9eb;
}
.ai-process-visual::after {
position: absolute;
inset: 1.375rem;
background: linear-gradient(120deg, #081e361a, transparent 45%, #774e311f);
pointer-events: none;
content: "";
}
@media (min-width: 651px) {
.ai-process-visual {
padding: 2rem;
}
.ai-process-visual::after {
inset: 2rem;
}
}
.ai-process-strips {
display: flex;
gap: 3px;
height: 100%;
overflow: hidden;
}
.ai-process-strip {
flex: 1;
background-size: cover;
background-position: center;
filter: saturate(0.66) contrast(1.04);
}
.ai-process-strip:nth-child(1) {
flex: 1.15;
background-position: 0% center;
filter: sepia(0.13) saturate(0.7);
}
.ai-process-strip:nth-child(2) {
flex: 0.58;
background-position: 34% center;
filter: saturate(0.52) brightness(1.12);
}
.ai-process-strip:nth-child(3) {
flex: 0.95;
background-position: 67% center;
filter: sepia(0.2) saturate(0.62);
}
.ai-process-strip:nth-child(4) {
flex: 0.48;
background-position: 100% center;
filter: saturate(0.46);
}
.ai-process-card--01 .ai-process-strip {
background-image: url("../img/services/ai-data/ai-across-sdlc-services/process/01_Discovery.webp");
}
.ai-process-card--02 .ai-process-strip {
background-image: url("../img/services/ai-data/ai-across-sdlc-services/process/02_AI_Readiness.webp");
}
.ai-process-card--03 .ai-process-strip {
background-image: url("../img/services/ai-data/ai-across-sdlc-services/process/03_Use_Cases.webp");
}
.ai-process-card--04 .ai-process-strip {
background-image: url("../img/services/ai-data/ai-across-sdlc-services/process/04_Governance_Design.webp");
}
.ai-process-card--05 .ai-process-strip {
background-image: url("../img/services/ai-data/ai-across-sdlc-services/process/05_Pilot_Validation.webp");
}
.ai-process-card--06 .ai-process-strip {
background-image: url("../img/services/ai-data/ai-across-sdlc-services/process/06_Rollout.webp");
}
/* Steps 7 to 9, for service pages with longer processes */
.ai-process-card--07 .ai-process-strip {
background-image: url("../img/services/ai-data/ai-across-sdlc-services/process/04_Governance_Design.webp");
}
.ai-process-card--08 .ai-process-strip {
background-image: url("../img/services/ai-data/ai-across-sdlc-services/process/02_AI_Readiness.webp");
}
.ai-process-card--09 .ai-process-strip {
background-image: url("../img/services/ai-data/ai-across-sdlc-services/process/06_Rollout.webp");
}
.ai-process-glaze {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 28%;
background-color: #ffffff8c;
clip-path: polygon(0 65%, 100% 10%, 100% 100%, 0 100%);
}
.ai-process-step {
position: absolute;
top: 2.625rem;
left: 2.625rem;
z-index: 2;
padding: 0.5rem 1rem;
border: 1px solid #fff;
border-radius: 30px;
background-color: #03172c73;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
}
@media (min-width: 651px) {
.ai-process-step {
top: 3.25rem;
left: 3.25rem;
}
}
.ai-process-base {
display: flex;
flex: 1 1 auto;
justify-content: space-between;
align-items: flex-end;
gap: 0.875rem;
padding: 1.5rem 1.5rem 1.625rem;
}
@media (min-width: 651px) {
.ai-process-base {
padding: 1.5rem 1.75rem 1.75rem;
}
}
/* Phones: the card keeps its fixed height (the step reveal fills it), so give the
photo more of it to close the gap above the title, and use a smaller arrow button. */
@media (max-width: 650.98px) {
.ai-process-visual {
flex-basis: 71%;
}
.ai-process-base {
padding-top: 1rem;
}
.ai-process-base .ai-process-open {
width: 36px;
height: 36px;
font-size: 13px;
}
}
/* Georgia as in the design; !important beats the global heading font rule */
.ai-process-title,
.ai-process-reveal-title {
margin: 0 0 0.75rem;
font-family: Georgia, "Times New Roman", serif !important;
font-size: clamp(1.5rem, calc(1rem + 1vw), 2.125rem);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.02em;
color: #081d36;
}
.ai-process-short {
margin: 0;
font-size: 14px;
line-height: 1.45;
color: #54677b;
}
.ai-process-open {
display: grid;
flex: none;
place-items: center;
width: 50px;
height: 50px;
padding: 0;
border: 0;
border-radius: 50%;
background-color: #06264b;
font-size: 18px;
color: #fff;
cursor: pointer;
transition: transform 0.25s ease, background-color 0.25s ease;
}
.ai-process-open:hover {
background-color: #174a78;
transform: translateX(3px);
}
.ai-process-open:focus-visible,
.ai-process-close:focus-visible {
outline: 3px solid var(--red);
outline-offset: 3px;
}
/* Detail panel: slides up on hover, or when opened with the arrow button */
.ai-process-reveal {
position: absolute;
inset: 0;
z-index: 4;
display: flex;
flex-direction: column;
padding: 1.5rem;
background-color: #f4f6f7;
box-shadow: 0 -10px 30px #051a3140;
color: #081d36;
visibility: hidden;
transform: translateY(101%);
transition: transform 0.48s cubic-bezier(0.2, 0.75, 0.2, 1), visibility 0s linear 0.48s;
}
@media (min-width: 651px) {
.ai-process-reveal {
padding: 1.875rem;
}
}
@media (hover: hover) {
.ai-process-card:not(.suppress-hover):hover .ai-process-reveal {
transform: translateY(0);
visibility: visible;
transition-delay: 0s;
}
}
.ai-process-card.is-open .ai-process-reveal {
transform: translateY(0);
visibility: visible;
transition-delay: 0s;
}
.ai-process-reveal-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.875rem;
}
.ai-process-reveal-head span {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--red);
}
.ai-process-close {
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid #9eacb8;
border-radius: 50%;
background: transparent;
font-size: 16px;
color: #06264b;
cursor: pointer;
}
.ai-process-desc {
margin: 0 0 1.125rem;
font-size: 15px;
line-height: 1.5;
color: #41556b;
}
.ai-process-label {
margin: 0 0 0.5rem;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.ai-process-list {
margin: 0;
padding: 0;
overflow: auto;
list-style: none;
scrollbar-color: #9dafbd transparent;
}
.ai-process-list li {
display: flex;
gap: 0.625rem;
padding: 0.4rem 0;
border-top: 1px solid #d1d8df;
font-size: 13px;
line-height: 1.3;
}
.ai-process-list li::before {
font-weight: 700;
color: var(--red);
content: "\2197";
}
@media (prefers-reduced-motion: reduce) {
.ai-process-reveal,
.ai-process-open {
transition: none;
}
}
/* Section 5 - AI Across SDLC for different business goals (goal cards) */
.ai-goals {
background-color: #fff;
}
@media (min-width: 1024px) {
.ai-goals {
padding-block: 4.5rem 5.5rem;
}
}
.ai-goals-head {
margin-bottom: 1.75rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #d5dbe6;
}
@media (min-width: 1024px) {
.ai-goals-head {
margin-bottom: 2.25rem;
}
}
.ai-goals-title {
margin-bottom: 0.75rem;
}
/* Card: text on the left, decorative image on the right. The images
have their right corners rounded in the file, on the section colour. */
/* Height comes from the text (min 222px, as in the design), never from
the image: the image is positioned to fill the right side. */
.ai-goal-card {
position: relative;
display: flex;
overflow: hidden;
min-height: 13.875rem;
border-radius: 22px;
background-color: #edf2f9;
}
@media (min-width: 768px) and (max-width: 991.98px) {
.ai-goal-card {
min-height: 11rem;
}
}
.ai-goal-body {
display: flex;
flex-direction: column;
width: 70%;
min-width: 0;
padding: 1.75rem 1.5rem 1.5rem;
}
@media (min-width: 576px) {
.ai-goal-body {
width: 65%;
}
}
@media (min-width: 768px) {
.ai-goal-body {
padding: 1.75rem 2.25rem 1.75rem;
}
}
/* Narrow text measure as in the design: longer titles and descriptions
wrap to two lines. */
.ai-goal-title {
max-width: 13.5em;
margin-bottom: 1rem;
font-family: var(--font-display);
font-size: clamp(1.25rem, calc(1rem + 0.6vw), 1.75rem);
font-weight: 700;
line-height: 1.25;
letter-spacing: 0.01em;
color: #172b45;
}
.ai-goal-text {
max-width: 21rem;
font-size: 16px;
line-height: 1.45;
color: #5b6b80;
}
@media (min-width: 1280px) {
.ai-goal-text {
max-width: 22rem;
font-size: 18px;
}
}
.ai-goal-media {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 30%;
height: 100%;
object-fit: cover;
object-position: left center;
}
@media (min-width: 576px) {
.ai-goal-media {
width: 35%;
}
}
/* Section 6 - Technologies and platforms we work with (icon cards) */
.ai-tech {
background-color: #f5f4f0;
}
@media (min-width: 1024px) {
.ai-tech {
padding-block: 4.5rem 5.5rem;
}
}
.ai-tech-head {
margin-bottom: 2rem;
}
@media (min-width: 1024px) {
.ai-tech-head {
margin-bottom: 3.25rem;
}
}
.ai-tech-heading {
margin-bottom: 1.25rem;
}
.ai-tech .row {
--bs-gutter-x: 1.875rem;
--bs-gutter-y: 1.875rem;
}
/* Card: icon tile on the left, category and tools on the right */
.ai-tech-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.5rem 1.25rem;
border: 2px solid #dfe7f0;
border-radius: 22px;
background-color: #fff;
}
@media (min-width: 1280px) {
.ai-tech-card {
gap: 1.75rem;
padding: 1.625rem 1.5rem;
}
}
/* Icon tiles are 632x712 images with the rounded corners drawn in */
.ai-tech-icon {
flex: 0 0 auto;
width: 6.5rem;
height: auto;
}
@media (min-width: 1280px) {
.ai-tech-icon {
width: 6rem;
}
}
.ai-tech-body {
min-width: 0;
padding-top: 0.5rem;
}
/* Phones and tablets: smaller icon on top, text full width under it. */
@media (max-width: 991.98px) {
.ai-tech-card {
flex-direction: column;
gap: 0.75rem;
}
.ai-tech-icon {
width: 4.5rem;
}
.ai-tech-body {
padding-top: 0;
}
}
.ai-tech-title {
margin-bottom: 0.875rem;
font-size: clamp(1.25rem, calc(1rem + 0.6vw), 1.75rem);
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.01em;
color: #172b45;
}
.ai-tech-text {
margin: 0;
font-size: 16px;
line-height: 1.45;
color: #5b6b80;
}
@media (min-width: 1280px) {
.ai-tech-text {
font-size: 16px;
}
}
/* Section 7 - Why choose PineSucceed (intro + accordion) */
.ai-why {
background-color: #fff;
}
@media (min-width: 1024px) {
.ai-why {
padding-block: 5.5rem 6rem;
}
}
/* Beside the accordion the intro stays in view while the list scrolls;
top keeps it clear of the sticky header. */
@media (min-width: 992px) {
.ai-why-intro {
position: sticky;
top: 7.5rem;
padding-right: 2.5rem;
}
}
.ai-why-heading {
margin-bottom: 1.75rem;
}
.ai-why-heading span{
color: #033468;
}
.ai-why-lead {
max-width: 36rem;
margin: 0;
}
.ai-why-item {
border-bottom: 1px solid #d5e0e9;
}
/* Sans labels as in the design; !important beats the global heading font */
.ai-why-item-title {
margin: 0;
font-family: var(--font-body) !important;
}
.ai-why-trigger {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
min-height: 5.5rem;
padding: 1.25rem 0.25rem 1.25rem 0;
border: 0;
background: none;
text-align: left;
color: #102d4d;
cursor: pointer;
}
@media (min-width: 768px) {
.ai-why-trigger {
gap: 1.5rem;
min-height: 7rem;
padding-block: 1.75rem;
}
}
.ai-why-item.is-open .ai-why-trigger {
padding-bottom: 0.75rem;
}
.ai-why-trigger:focus-visible {
outline: 2px solid #407da8;
outline-offset: -3px;
}
.ai-why-number {
display: none;
min-width: 36px;
font-size: 15px;
font-weight: 700;
color: #8aa0b2;
}
@media (min-width: 576px) {
.ai-why-number {
display: block;
}
}
.ai-why-label {
flex: 1;
font-size: clamp(1.25rem, calc(0.95rem + 0.8vw), 1.6875rem);
font-weight: 500;
line-height: 1.2;
transition: color 0.2s ease;
font-family: var(--font-display);
}
.ai-why-item.is-open .ai-why-label {
font-weight: 600;
}
.ai-why-trigger:hover .ai-why-label,
.ai-why-trigger:focus-visible .ai-why-label {
color: #2c628d;
}
/* Round +/- button; the minus is the plus with its vertical bar hidden */
.ai-why-indicator {
position: relative;
flex: 0 0 auto;
width: 38px;
height: 38px;
border: 1px solid #c5d3de;
border-radius: 50%;
color: #102d4d;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
@media (min-width: 768px) {
.ai-why-indicator {
width: 45px;
height: 45px;
}
}
.ai-why-indicator::before,
.ai-why-indicator::after {
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 1.5px;
background-color: currentColor;
transform: translate(-50%, -50%);
content: "";
}
.ai-why-indicator::after {
transform: translate(-50%, -50%) rotate(90deg);
transition: opacity 0.2s ease;
}
.ai-why-item.is-open .ai-why-indicator {
border-color: #102d4d;
background-color: #102d4d;
color: #fff;
}
.ai-why-item.is-open .ai-why-indicator::after {
opacity: 0;
}
.ai-why-panel {
padding: 0 3.25rem 1.75rem 0;
}
@media (min-width: 576px) {
.ai-why-panel {
padding-left: calc(36px + 0.75rem);
}
}
@media (min-width: 768px) {
.ai-why-panel {
padding: 0 4.5rem 2rem calc(36px + 1.5rem);
}
}
/* Tablets: the list sits under the intro at full width, so tighter rows
and a smaller gap after the intro. */
@media (min-width: 768px) and (max-width: 991.98px) {
.ai-why .row {
--bs-gutter-y: 1.5rem;
}
.ai-why-heading {
margin-bottom: 1rem;
}
.ai-why-trigger {
gap: 1rem;
min-height: 0;
padding-block: 1.125rem;
}
.ai-why-item.is-open .ai-why-trigger {
padding-bottom: .5rem;
}
.ai-why-panel {
padding: 0 4rem 1.25rem calc(36px + 1rem);
}
}
.ai-why-panel p {
max-width: 44rem;
margin: 0;
font-size: clamp(1rem, calc(0.9rem + 0.3vw), 1.1875rem);
line-height: 1.55;
color: #4b6073;
}
/* Section 8 - Benefits of AI across the SDLC (four value cards) */
.ai-benefits {
background-color: #f5f4f0;
}
@media (min-width: 1024px) {
.ai-benefits {
padding-block: 4rem 5rem;
}
}
.ai-benefits-head {
margin-bottom: 2rem;
}
@media (min-width: 1024px) {
.ai-benefits-head {
margin-bottom: 2.5rem;
}
}
.ai-benefits-heading {
margin-bottom: 1rem;
}
.ai-benefits-lead {
margin: 0;
}
/* Card: short accent bar, serif title, dotted list. The featured card is
navy; on hover devices the navy moves to the card under the pointer. */
.ai-benefit-card {
position: relative;
min-height: auto;
padding: 2rem 1.75rem 2rem;
border: 2px solid #dde6ef;
border-radius: 20px;
background-color: #fff;
color: #102d4d;
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
@media (min-width: 1280px) {
.ai-benefit-card {
min-height: auto;
padding: 1.875rem 1.875rem 2rem;
}
}
.ai-benefit-title {
margin-bottom: 1.25rem;
font-size: clamp(1.5rem, calc(1.1rem + 0.85vw), 1.875rem);
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.01em;
color: inherit;
}
.ai-benefit-list {
display: flex;
flex-direction: column;
gap: 1.125rem;
margin: 0;
padding: 0;
list-style: none;
}
.ai-benefit-list li {
position: relative;
padding-left: 1.625rem;
font-size: 16px;
line-height: 1.4;
color: #4d6178;
transition: color 0.3s ease;
}
@media (min-width: 1280px) {
.ai-benefit-list li {
font-size: 18px;
}
}
.ai-benefit-list li::before {
position: absolute;
top: 0.55em;
left: 0.25rem;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #2f6e9f;
content: "";
transition: background-color 0.3s ease;
}
/* Navy state */
.ai-benefit-card--featured,
.ai-benefit-card:hover {
border-color: #17406a;
background-color: #123459;
background-image: linear-gradient(150deg, #18426d 0%, #0d2a4a 100%);
color: #fff;
}
.ai-benefit-card--featured::before,
.ai-benefit-card:hover::before,.ai-benefits-grid:hover .ai-benefit-card--featured:not(:hover)::before {
background-color: var(--red);
}
.ai-benefit-card--featured .ai-benefit-list li,
.ai-benefit-card:hover .ai-benefit-list li {
color: #fff;
}
.ai-benefit-card--featured .ai-benefit-list li::before,
.ai-benefit-card:hover .ai-benefit-list li::before {
background-color: #9fc2e0;
}
@media (hover: hover) {
.ai-benefits-grid:hover .ai-benefit-card--featured:not(:hover) {
border-color: #dde6ef;
background-color: #fff;
background-image: none;
color: #102d4d;
}
.ai-benefits-grid:hover .ai-benefit-card--featured:not(:hover) .ai-benefit-list li::before {
background-color: #2f6e9f;
}
.ai-benefits-grid:hover .ai-benefit-card--featured:not(:hover) .ai-benefit-list li {
color: #4d6178;
}
}
/* Section 9 - CTA banner: light text column over the red image */
.ai-cta {
padding: 1rem 0 4rem;
background-color: #fff;
}
@media (min-width: 1024px) {
.ai-cta {
padding-block: 4rem 1.5rem;
}
}
.ai-cta-card {
padding: 2.5rem 1.5rem;
border-radius: 28px;
background-color: #f1e9e4;
}
@media (min-width: 768px) {
.ai-cta-card {
padding: 2.75rem 2.625rem;
}
}
/* Wide banner as in the design (about 4:1, 425px tall at full width) */
@media (min-width: 1200px) {
.ai-cta-card {
display: flex;
align-items: center;
min-height: 26.5rem;
padding-block: 2.25rem;
}
}
.ai-cta-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
}
/* Light fade over the image so the text stays readable at every width */
.ai-cta-card::before {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, #fbf6f3 0%, #fbf6f3eb 36%, #fbf6f399 48%, #fbf6f300 64%);
content: "";
}
@media (max-width: 991.98px) {
.ai-cta-card::before {
background: linear-gradient(90deg, #fbf6f3f7 0%, #fbf6f3e6 70%, #fbf6f3b3 100%);
}
}
.ai-cta-content {
z-index: 2;
flex: 1 1 auto;
max-width: 44.5rem;
}
/* Two classes so it wins over the shared .section-title, which comes later */
.ai-cta .ai-cta-title {
margin-bottom: 1.25rem;
}
.ai-cta-text {
margin-bottom: 0.5rem;
}
.ai-cta-actions {
gap: 0.75rem;
margin-top: 1.375rem;
}
@media (min-width: 640px) {
.ai-cta-actions {
gap: 15px;
}
}
/* Section 10 - FAQ reuses the industry FAQ classes; the answers, the extra
questions and the pager buttons are in the HTML and toggled with [hidden].
The pager buttons get display here instead of Bootstrap's d-flex, whose
!important (vendor layer) would beat any [hidden] rule in this layer. */
[data-ai-faq] .retail-pager-button,
[data-tech-faq] .retail-pager-button {
display: flex;
}
[data-ai-faq] [hidden],
[data-tech-faq] [hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.ai-lifecycle-panel.is-changing > * {
animation: none;
}
}
}
/* ==========================================================================
12. Healthcare page
========================================================================== */
@layer components {
.health-expertise-overlay {
background-image: linear-gradient(to right in oklab, #f3eee8 0%, lab(94.3664% .967741 3.53795 / .95) 70%, transparent 100%);
}
.health-ai-healthcare-text {
margin-top: 1.5rem;
max-width: 940px;
font-size: 14px;
color: #5b6170;
}
@media (min-width: 1280px) {
.health-ai-healthcare-text {
margin-top: 2rem;
font-size: 15px;
}
}
.health-solutions-box {
margin-top: 2rem;
max-width: 1080px;
font-size: 14px;
color: #5b6170;
}
:where(.health-solutions-box > :not(:last-child)) {
margin-top: 0;
margin-bottom: 0.75rem;
}
@media (min-width: 1280px) {
.health-solutions-box {
margin-top: 2.5rem;
font-size: 15px;
}
}
}
/* ==========================================================================
Healthcare: development approach slider (Swiper 4.2.0)
========================================================================== */
@layer components {
/* same container spacing as the other sections on the page */
.approach-section {
padding-block: 2.5rem;
background-color: #fff;
}
.approach-section.bg-gray {
background-color: #f5f4f0;
}
@media (min-width: 1024px) {
.approach-section {
padding-block: 4rem;
}
}
.approach-lead {
margin-top: 0.9rem;
}
/* spacing sits on the lead: swiper.min.css resets the slider margins */
.approach-lead {
margin-bottom: 2rem;
}
@media (min-width: 1024px) {
.approach-lead {
margin-bottom: 2.5rem;
}
}
/* Card: photo with a frosted text box, at the bottom or (every second card) at the top */
.approach-card {
height: 460px;
border-radius: 12px;
background-color: #e9e5df;
}
@media (min-width: 1024px) {
.approach-card {
height: clamp(460px, 31vw, 560px);
}
}
.approach-img {
object-fit: cover;
}
.approach-body {
right: 1.25rem;
bottom: 1.5rem;
left: 1.25rem;
z-index: 1;
padding: 1.4rem 1.6rem;
border-radius: 14px;
background-color: rgba(248, 245, 241, 0.9);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.approach-card--top .approach-body {
top: 2.25rem;
bottom: auto;
}
.approach-card-title {
font-size: 24px;
font-weight: 700;
line-height: 1.2;
color: #1d1d22;
}
@media (min-width: 1280px) {
.approach-card-title {
font-size: 29px;
}
}
.approach-card-text {
margin-top: 0.6rem;
font-size: 16px;
line-height: 1.5;
color: #3b3b40;
}
@media (min-width: 1280px) {
.approach-card-text {
font-size: 19px;
}
}
/* Controls: prev, dots, next */
.approach-controls {
gap: 1rem;
margin-top: 1.75rem;
}
@media (min-width: 768px) {
.approach-controls {
gap: 1.75rem;
}
}
.approach-pagination {
white-space: nowrap;
}
.approach-nav {
width: 50px;
height: 50px;
padding: 0;
border: 0;
background-color: #f2f2f2;
font-size: 15px;
color: #1d1d22;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
@media (hover: hover) {
.approach-nav:hover {
background-color: #d7192f;
color: #fff;
}
}
.approach-nav.swiper-button-disabled {
opacity: 0.5;
pointer-events: none;
}
}
/* Swiper pagination dots (unlayered so they win over swiper.min.css) */
.approach-pagination .swiper-pagination-bullet {
width: 9px;
height: 9px;
margin: 0 5px;
background-color: #cfcfcf;
opacity: 1;
}
.approach-pagination .swiper-pagination-bullet-active {
width: 12px;
height: 12px;
vertical-align: -1.5px;
background-color: #d7192f;
}
/* ==========================================================================
Helpers (replace the former inline styles)
========================================================================== */
@layer components {
/* image that fills its positioned parent */
.img-fill {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
}
/* ==========================================================================
Section typography (same on every page)
Every section heading uses .section-title and its description .section-desc;
page classes only add colour, width and spacing.
========================================================================== */
@layer components {
.section-title {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.02em;
color: #0b1c30;
}
/* Sans face on a heading (the global h1-h6 rule sets the serif with !important). */
.font-body {
font-family: var(--font-body) !important;
}
.font-display {
font-family: var(--font-display) !important;
}
/* Privacy policy page */
.privacy-policy {
color: var(--body);
font-size: 1.0625rem;
line-height: 1.75;
}
.privacy-policy h2 {
margin: 2.25rem 0 0.75rem;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
color: var(--ink-strong);
}
.privacy-policy ul {
list-style: disc;
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.privacy-policy li {
margin-bottom: 0.5rem;
}
.privacy-policy li::marker {
color: var(--link);
}
.privacy-policy strong {
color: var(--ink-strong);
}
.privacy-policy a {
color: var(--red);
}
.privacy-policy-updated {
font-size: 0.9375rem;
color: #6b7280;
}
/* Sitemap page */
.sitemap-group-title {
color: var(--ink-strong);
}
.sitemap-link {
color: var(--body);
text-decoration: none;
transition: color .2s;
}
.sitemap-link:hover,
.sitemap-link:focus-visible {
color: var(--red);
}
.section-desc {
font-family: var(--font-body);
font-weight: 400;
line-height: 1.5;
color: #5b6478;
}
.section-label {
font-family: var(--font-body);
color: #fe1718;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.02em;
text-transform: uppercase;
}
@media (min-width: 1024px) {
.section-label {
font-size: 16px;
}
}
}
/* ==========================================================================
Responsive typography & overflow fixes (every page)
One fluid type scale replaces the fixed and oversized heading sizes, so
text grows smoothly from 320px phones to 1920px+ screens without getting
too large. This layer comes last, so it wins over the component rules
(and their breakpoint overrides) without needing extra specificity.
========================================================================== */
:root {
/* Values at 320px / 768px / 1280px / 1440px / 1920px in comments. */
--fs-display: clamp(2rem, 1.4rem + 2.4vw, 3.875rem); /* 32 / 41 / 53 / 57 / 60 */
--fs-h2: clamp(1.5rem, 1.05rem + 2.5vw, 3.875rem); /* 25 / 36 / 49 / 53 / 62 */
--fs-stat: clamp(2rem, 1.4rem + 1.9vw, 3.25rem); /* 32 / 37 / 47 / 50 / 52 */
--fs-h3: clamp(1.5rem, 1.15rem + 1vw, 2.25rem); /* 24 / 26 / 31 / 33 / 36 */
--fs-h4: clamp(1.375rem, 1.15rem + 0.55vw, 1.75rem); /* 22 / 23 / 25 / 26 / 28 */
--fs-h5: clamp(1.25rem, 1.1rem + 0.35vw, 1.5rem); /* 20 / 20 / 22 / 23 / 24 */
--fs-lead-lg: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); /* 18 / 19 / 22 / 22 / 22 */
--fs-lead: clamp(1rem, 0.93rem + 0.35vw, 1.25rem); /* 16 / 18 / 19 / 20 / 20 */
}
@layer responsive {
/* Page heroes (h1) */
.home-hero-title,
.about-hero-title,
.contact-hero-title,
.office-hero-title,
.industry-title {
font-size: var(--fs-display);
}
/* Section headings, including the AI-page h1 and CTA titles */
.section-title,
.home-tech-partner-execution-text-2 {
font-size: var(--fs-h2);
}
/* Phones: the manual line breaks in titles are for wide screens; let titles wrap
naturally instead (every
in a title has a space before it). */
@media (max-width: 767.98px) {
.section-title {
line-height: 1.22;
}
.section-title br {
display: none;
}
}
/* Big stat numbers and value-card words */
.about-who-are-title-2,
.about-values-that-title-2 {
font-size: var(--fs-stat);
}
/* Large card and panel titles */
.industry-title-7,
.industry-title-3,
.ai-lifecycle-panel-title,
.ai-outcome-title,
.home-core-capabilities-title,
.industry-expertise-title-2,
.contact-aside-title,
.home-industries-card-title,
.home-contact-title-2 {
font-size: var(--fs-h3);
}
/* Medium card titles */
.ai-process-title,
.industry-expertise-title-3,
.industry-expertise-title-4,
.industry-expertise-title-5,
.about-mission-vision-title-3,
.ai-hero-subtitle,
.industry-label,
.home-tech-partner-execution-title-2,
.home-tech-partner-execution-title-3,
.office-get-touch-title-2,
.about-capabilities-that-title-2,
.about-values-that-title-4,
.ai-lifecycle-nav-title,
.ai-benefit-title {
font-size: var(--fs-h4);
}
/* FAQ questions: a step below the medium card titles (17px on phones, 18-24px above). */
.retail-question-text {
font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
}
@media (max-width: 767.98px) {
.retail-question-text {
font-size: 17px;
}
}
/* Small card titles */
.approach-card-title,
.home-challenge-title,
.home-tech-partner-title-2,
.ai-goal-title,
.ai-tech-title,
.ai-why-label,
.industry-title-8 {
font-size: var(--fs-h5);
}
/* Intro / lead paragraphs */
.about-mission-vision-text,
.about-mission-vision-text-3 {
font-size: var(--fs-lead-lg);
}
.contact-hero-lead,
.section-desc {
font-size: var(--fs-lead);
}
/* Phones: one size for every subtitle (20px) and every description paragraph (15px).
The tokens cover the shared groups; the element rules are at the end of this file. */
@media (max-width: 767.98px) {
:root {
--fs-h3: 20px;
--fs-h4: 20px;
--fs-h5: 20px;
--fs-lead-lg: 15px;
--fs-lead: 15px;
}
}
/* Long words and URLs never push the page wider than the screen. */
h1,
h2,
h3,
h4,
p {
overflow-wrap: break-word;
}
/* .g-5 rows pull out 1.5rem on each side, more than the 1.25rem phone
gutter, which made phones scroll sideways by 4px. Cap the gutter at
the page gutter so the row always fits inside .container. */
.row.g-5,
.row.gx-5 {
--bs-gutter-x: min(3rem, calc(2 * var(--page-gutter)));
}
}
/* ==========================================================================
Laravel site components
Header, footer, contact form, request/proposal modals and a few page
blocks that the static site does not have.
========================================================================== */
:root {
--ps-header-line-strong: #e2e8f0;
--ps-footer-gutter: 1.25rem;
--ps-footer-text: #1f2a44;
--ps-font-body: "Inter", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--ps-footer-muted: #4b5a78;
--ps-font-display: "Fraunces", Georgia, "Times New Roman", serif;
}
/* --- from main.css --- */
.blc-btn {
background: #212721;
border-radius: 0px;
color: #fff;
padding: 5px 25px;
text-transform: uppercase;
font-size: 14px;
display: inline-block;
border: none;
font-family: "inter", sans-serif;
letter-spacing: 1.2px;
position: relative;
white-space: nowrap;
border: 1px solid #212721;
text-align: center;
}
.blc-btn:hover {
color: #212721 !important;
background: white !important;
}
@media (max-width:1024px) {
.blc-btn {
background: #212721;
border-radius: 0px;
color: #fff;
padding: 5px 25px;
text-transform: uppercase;
font-size: 14px;
display: inline-block;
border: none;
font-family: "Inter", sans-serif;
letter-spacing: 1.2px;
position: relative;
white-space: nowrap;
border: 1px solid #212721;
text-align: center;
}
.blc-btn:hover {
color: #212721;
background: white;
}
}
.banner-section .one-item .item .banner-box .banner-contant .bc-box .blc-btn {
bottom: -25px;
position: absolute;
font-family: "Inter", sans-serif;
padding: 11px 25px;
}
.inner-banner-txt .blc-btn {
font-family: "Inter", sans-serif;
padding: 10px 25px;
text-transform: uppercase;
font-size: 18px;
}
.cta-box .blc-btn {
min-width: 185px;
margin-left: 50px;
}
.footer-inside {
background: #212721;
padding: 50px 0 80px !important;
color: #f0f7ff;
/* margin:-90px 0 0 0!important; */
margin: 0px 0 0 0 !important;
}
.show-f-menu~.f-menu {
display: block;
margin-bottom: 15px;
}
.show-f-menu .f-menu {
display: block;
/* margin-bottom: 15px; */
}
/* Popups: the base reset (margin: 0) removes Bootstrap's auto margins, so put them back
to keep every dialog in the middle of the page. */
.modal-dialog {
margin: .75rem auto;
padding-inline: .75rem;
}
.modal-dialog-centered {
min-height: calc(100% - 1.5rem);
}
@media (min-width: 576px) {
.modal-dialog {
margin-block: 1.75rem;
}
.modal-dialog-centered {
min-height: calc(100% - 3.5rem);
}
}
/* Request a Proposal popup (partials/modals/request.blade.php) */
.request-quote-modal .modal-dialog {
max-width: 760px;
}
.request-quote-modal .modal-content {
position: relative;
padding: 1.75rem 1.25rem 1.5rem;
border: 0;
border-radius: 16px;
box-shadow: 0 24px 60px rgba(11, 28, 48, .25);
font-family: var(--font-body);
}
@media (min-width: 768px) {
.request-quote-modal .modal-content {
padding: 2.25rem 2.5rem 2rem;
}
}
.request-quote-modal .btn-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
width: 1rem;
height: 1rem;
padding: .5rem;
box-sizing: content-box;
border-radius: 50%;
opacity: .6;
}
.request-quote-modal .btn-close:hover {
opacity: 1;
background-color: #f1f1f4;
}
.request-modal-head {
margin-bottom: 1.5rem;
padding-right: 2rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid #ececf0;
}
.request-modal-title {
margin-bottom: .375rem;
font-family: var(--font-display);
font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem);
font-weight: 700;
line-height: 1.15;
color: var(--ink-strong);
}
.request-modal-lead {
margin: 0;
font-size: .9375rem;
color: #5b6478;
}
.request-quote-modal .form-label {
display: block;
margin-bottom: .375rem;
font-size: .875rem;
font-weight: 600;
color: var(--ink-strong);
}
.request-quote-modal .form-label small {
font-weight: 400;
}
.request-quote-modal .form-control {
display: block;
width: 100%;
padding: .625rem .875rem;
border: 1px solid #c9ced8;
border-radius: 6px;
background-color: #fff;
font-size: .9375rem;
line-height: 1.4;
color: var(--ink-strong);
transition: border-color .2s ease, box-shadow .2s ease;
}
.request-quote-modal .form-control:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 3px rgba(0, 52, 102, .12);
}
.request-quote-modal input[type="file"].form-control {
padding: .5rem .75rem;
cursor: pointer;
}
.request-quote-modal input[type="file"].form-control::file-selector-button {
margin-right: .75rem;
padding: .375rem .875rem;
border: 0;
border-radius: 4px;
background-color: #eef0f4;
font-weight: 600;
color: var(--ink-strong);
cursor: pointer;
}
.request-quote-modal textarea.form-control {
min-height: 90px;
resize: vertical;
}
/* intl-tel-input wraps the phone field; let it take the full column. */
.request-quote-modal .iti {
display: block;
width: 100%;
}
.request-quote-modal .error-text {
display: block;
margin-top: .25rem;
font-size: .8125rem;
}
.request-quote-modal #requestSubmitBtn {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: .5rem;
padding: .875rem 1.75rem;
border: 0;
border-radius: 6px;
background-color: var(--red);
font-size: 1rem;
font-weight: 600;
letter-spacing: .02em;
color: #fff;
transition: background-color .2s ease;
}
.request-quote-modal #requestSubmitBtn:hover {
background-color: #e0080a;
}
.process-section .icon-box {
width: 150px;
height: 150px;
margin: 0 auto 15px;
border-radius: 50%;
background: linear-gradient(135deg, #7db7e8, #4a8fd8);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.process-section .icon-box i {
font-size: 84px;
color: #fff;
}
.ps-footer-new {
--ps-font-body: "Inter", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--ps-font-display: "Fraunces", Georgia, "Times New Roman", serif;
}
.ps-footer-new,
.ps-footer-new * {
transition: all 0s;
}
.ps-header-new--scrolled .ps-header-new__bar {
border-bottom-color: var(--ps-header-line-strong);
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.ps-header-new--transparent .ps-header-new__bar {
background-color: transparent;
}
@media (max-width: 1023.98px) {
.ps-header-new--open .ps-header-new__nav {
display: block;
}
}
.ps-footer-new {
--ps-footer-text: #1f2a44;
--ps-footer-muted: #4b5a78;
--ps-footer-gutter: 1.25rem;
padding: 3.5rem var(--ps-footer-gutter) 1.75rem;
background-color: #fcfaf4;
border-top: 1px solid #ebe6da;
color: var(--ps-footer-text);
font-family: var(--ps-font-body);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ps-footer-new :where(ul) {
margin: 0;
padding: 0;
list-style: none;
}
.ps-footer-new li {
display: list-item;
margin: 0;
list-style: none;
}
.ps-footer-new a {
color: inherit;
font-size: inherit;
text-decoration: inherit;
}
.ps-footer-new li a:hover {
color: inherit;
padding-left: 0;
}
.ps-footer-new img {
max-width: 100%;
}
.ps-footer-new__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.5rem 1.5rem;
}
.ps-footer-new__brand,
.ps-footer-new__nav-wide {
grid-column: span 2 / span 2;
}
.ps-footer-new__logo {
position: relative;
display: block;
width: clamp(190px, 16vw, 260px);
aspect-ratio: 185 / 35;
}
.ps-footer-new__logo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: left;
}
.ps-footer-new__tagline {
max-width: 300px;
margin: 1.75rem 0 0;
color: var(--ps-footer-muted);
font-size: 16px;
line-height: 1.6;
}
.ps-footer-new__social {
display: flex;
align-items: center;
gap: 0.625rem;
margin-top: 1.5rem;
}
.ps-footer-new .ps-footer-new__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid #cfd6e3;
border-radius: 50%;
color: var(--primary);
font-size: 16px;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, translate 0.2s ease;
}
.ps-footer-new__title {
margin: 0;
color: #0b1c30;
font-family: var(--ps-font-display);
font-size: 13px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.ps-footer-new__title-bar {
display: block;
width: 36px;
height: 3px;
margin-top: 0.75rem;
background-color: #fe1718;
}
.ps-footer-new__links {
margin-top: 1.5rem;
color: #3a4a66;
font-size: 15px;
}
.ps-footer-new__links > li:not(:last-child) {
margin-bottom: 0.75rem;
}
.ps-footer-new__links--split {
columns: 2;
column-gap: 1.5rem;
}
.ps-footer-new__links--split > li {
break-inside: avoid;
}
.ps-footer-new__link {
border-radius: 0.25rem;
transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
.ps-footer-new .ps-footer-new__social-link:hover {
border-color: var(--red);
background-color: var(--red);
color: #fff;
translate: 0 -2px;
}
.ps-footer-new .ps-footer-new__link:hover {
color: #fe1718;
}
}
.ps-footer-new__logo:focus-visible {
border-radius: 0.25rem;
}
.ps-footer-new__logo:focus-visible,
.ps-footer-new__link:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 4px;
}
.ps-footer-new__social-link:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 3px;
}
.ps-footer-new__bottom {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #e3ddcf;
}
.ps-footer-new__badges {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 9px;
}
.ps-footer-new__badge {
width: auto;
height: 60px;
/* Drops the off-white background baked into the logo files. */
mix-blend-mode: multiply;
}
/* Below laptop width: 2 logos per row on mobile, 3 on tablet. */
@media (max-width: 991.98px) {
.ps-footer-new__badges {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
justify-items: center;
gap: 1rem 1.5rem;
width: 100%;
}
.ps-footer-new__badge {
height: auto;
max-height: 70px;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.ps-footer-new__badges {
/* Takes the row space left beside the copyright. */
flex: 1 1 0;
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.ps-footer-new__copyright {
margin: 0;
color: var(--ps-footer-muted);
font-size: 14px;
line-height: 1.5;
text-align: center;
}
@media (min-width: 768px) {
.ps-footer-new {
--ps-footer-gutter: 2rem;
}
}
@media (min-width: 1024px) {
.ps-footer-new__badges {
display: grid;
/* Logos keep their own width and sit flush against the right edge. */
grid-template-columns: repeat(6, auto);
justify-content: end;
margin-left: auto;
}
.ps-footer-new {
--ps-footer-gutter: 5rem;
padding-top: 4.5rem;
padding-bottom: 2rem;
}
.ps-footer-new__grid {
grid-template-columns: 1.3fr 0.8fr 2fr 1.1fr 0.9fr;
gap: 2rem;
}
.ps-footer-new__brand,
.ps-footer-new__nav-wide {
grid-column: span 1 / span 1;
}
.ps-footer-new__bottom {
flex-direction: row-reverse;
justify-content: space-between;
margin-top: 4rem;
}
}
@media (min-width: 1280px) {
.ps-footer-new {
--ps-footer-gutter: 3rem;
}
.ps-footer-new__tagline {
margin-top: 2.25rem;
font-size: 17px;
}
.ps-footer-new__title,
.ps-footer-new__links {
font-size: 16px;
}
.ps-footer-new__badges {
gap: 0.75rem;
}
.ps-footer-new__copyright {
font-size: 15px;
}
}
@media (min-width: 1536px) {
.ps-footer-new {
--ps-footer-gutter: 3.5rem;
}
}
@media (min-width: 1920px) {
.ps-footer-new {
--ps-footer-gutter: 6.5rem;
}
}
.ps-ref .ps-ref-captcha {
min-height: 78px;
}
/* The reCAPTCHA widget is a fixed 304px wide: shrink it on narrow phones so it fits the form. */
@media (max-width: 400px) {
.ps-ref-captcha,
.proposal-captcha {
transform: scale(.86);
transform-origin: 0 0;
}
}
@media (max-width: 350px) {
.ps-ref-captcha,
.proposal-captcha {
transform: scale(.76);
}
}
.ps-ref .ps-ref-captcha-error {
color: #dc2626;
font-size: 13px;
}
.ps-ref .ps-ref-captcha-error:empty {
display: none;
}
.form-step { display: none;
}
.form-step.active { display: block; animation: fadeIn 0.4s ease-in-out;
}
.form-control-custom {
width: 100%; padding: 12px 16px; border: 1px solid #e5e7eb; border-radius: 8px;
font-size: 16px; outline: none; transition: all 0.3s ease; background-color: #fff;
}
.form-control-custom:focus { border-color: #e5e7eb; background-color: #fff;
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;
}
.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.option-card {
border: 1px solid #e5e7eb; padding: 14px 18px; border-radius: 8px; cursor: pointer;
display: flex; align-items: center; gap: 12px; background-color: #ffffff;
transition: all 0.2s ease-in-out; margin-bottom: 0; position: relative;
}
.option-card:hover { background-color: #f8fafc; border-color: #cbd5e1; box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.option-card input[type="radio"],
.option-card input[type="checkbox"] {
accent-color: #003366; width: 18px; height: 18px; margin: 0; padding: 0; flex-shrink: 0;
}
.option-text { font-size: 14px; color: #334155; font-weight: 500; pointer-events: none;
}
.btn-custom { padding: 12px 28px; font-size: 14px; font-weight: 600; border-radius: 8px; border: none; transition: all 0.1s ease;
}
.btn-custom:active { transform: scale(0.98);
}
.primary-btn { background-color: #003366; color: white;
}
.primary-btn:hover { background-color: #002244; color: white;
}
.secondary-btn { background-color: #f3f4f6; color: #4b5563;
}
.secondary-btn:hover { background-color: #e5e7eb; color: #1f2937;
}
.progressbar-container { position: relative; max-width: 750px; margin: 10px auto; padding: 0 10px;
}
.progressbar { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1;
}
.progress-line {
position: absolute; top: 22px; left: 0; height: 4px; width: 100%; z-index: -1;
transition: all 0.4s ease; border-radius: 4px; background-color: #e5e7eb;
}
.step { flex: 1; display: flex; justify-content: center; position: relative;
}
.icon-box { display: flex; flex-direction: column; align-items: center; text-align: center; width: 110px;
}
.step .icon {
width: 44px; height: 44px; border-radius: 50%; background-color: #ffffff; color: #9ca3af;
font-size: 15px; transition: all 0.3s ease; border: 2px solid #e5e7eb;
display: flex; align-items: center; justify-content: center;
}
.step-text { font-size: 13px; font-weight: 600; color: #9ca3af; margin-top: 10px; margin-bottom: 0; white-space: nowrap; transition: color 0.3s ease;
}
.step.active .icon { background-color: #003366; color: white; border-color: #003366; box-shadow: 0 0 0 5px rgba(0, 51, 102, 0.12);
}
.step.active .step-text { color: #003366; font-weight: 700;
}
.captcha-wrapper { display: flex; width: 100%;
}
.thank-you-container .success-icon { font-size: 54px;
}
.thank-you-container.active ~ .progressbar-container {
display: none;
}
.consent-wrapper {
margin-top: 10px;
}
.consent-box {
display: flex;
align-items: flex-start;
gap: 10px;
}
.consent-box:hover {
border-color: #cbd5e1;
background: #f8fafc;
}
.consent-box .form-check-input {
width: 18px;
height: 18px;
margin-top: 2px;
cursor: pointer;
accent-color: #003366;
flex-shrink: 0;
}
.consent-box .form-check-label {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #374151;
cursor: pointer;
}
.consent-box .form-check-input.border-danger {
outline: 2px solid #dc3545;
outline-offset: 2px;
}
.ms-wrapper {position:relative
}
.ms-trigger {display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:6px 12px;border:1px solid #ced4da;border-radius:6px;background:#fff;cursor:pointer;gap:8px
}
.ms-trigger:hover {border-color:#aaa
}
.ms-trigger.border-danger { border-color: #dc3545 !important;
}
.ms-tags {display:flex;flex-wrap:wrap;gap:4px;flex:1
}
.ms-placeholder {color:#000;font-size:16px
}
.ms-arrow {font-size:18px;color:#666;transition:transform .15s;line-height:1
}
.ms-arrow.open {transform:rotate(180deg);display:inline-block
}
.ms-dropdown {position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #ced4da;border-radius:6px;z-index:999;box-shadow:0 4px 16px rgba(0,0,0,.1);overflow:hidden
}
.ms-search {padding:8px 12px;border-bottom:1px solid #eee
}
.ms-search input {width:100%;border:none;outline:none;font-size:14px;background:transparent
}
.ms-list {max-height:220px;overflow-y:auto
}
.ms-option.selected {background:#eef3ff
}
.ms-option.selected .ms-checkbox {background:#1a56db;border-color:#1a56db;color:#fff
}
.ms-wrapper { position: relative;
}
.ms-trigger { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 6px 12px; border: 1px solid #ced4da; border-radius: 6px; background: #fff; cursor: pointer; gap: 8px;
}
.ms-tags { display: flex; flex-wrap: wrap; gap: 4px; flex: 1;
}
.ms-placeholder { color: #aaa; font-size: 14px;
}
.ms-arrow { font-size: 16px; transition: transform 0.15s;
}
.ms-arrow.open { transform: rotate(180deg);
}
.ms-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #ced4da; border-radius: 6px; z-index: 999; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.ms-option.selected { background: #eef3ff;
}
.ms-option.selected .ms-checkbox { background: #1a56db; border-color: #1a56db; color: white; font-size: 11px;
}
.consent-link {
color: #0d6efd;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.consent-link:hover {
color: #003366;
text-decoration: underline;
}
.ms-wrapper {position:relative
}
.ms-trigger {display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:6px 12px;border:1px solid #ced4da;border-radius:6px;background:#fff;cursor:pointer;gap:8px
}
.ms-trigger:hover {border-color:#aaa
}
.ms-trigger.is-invalid {border-color:#dc3545
}
.ms-tags {display:flex;flex-wrap:wrap;gap:4px;flex:1
}
.ms-placeholder {color:#aaa;font-size:14px
}
.ms-arrow {font-size:18px;color:#666;transition:transform .15s;display:inline-block
}
.ms-arrow.open {transform:rotate(180deg)
}
.ms-dropdown {position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #ced4da;border-radius:6px;z-index:999;box-shadow:0 4px 16px rgba(0,0,0,.1);overflow:hidden
}
.ms-search {padding:8px 12px;border-bottom:1px solid #eee
}
.ms-search input {width:100%;border:none;outline:none;font-size:14px
}
.ms-list {max-height:220px;overflow-y:auto
}
.ms-option.selected {background:#eef3ff
}
.ms-option.selected .ms-checkbox {background:#1a56db;border-color:#1a56db;color:#fff
}
.file-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* --- from responsive.css --- */
@media screen and (max-width: 1299px) {
.inner-banner-txt .blc-btn {
padding: 5px 25px;
font-size: 14px;
}
}
@media screen and (max-width: 767px) {
.banner-section .one-item .item .banner-box .banner-contant .bc-box .blc-btn {
padding: 6px 25px;
}
.cta-box .blc-btn {
margin-left: 0;
margin-top: 20px;
}
.pgination .blc-btn {
padding: 6px 8px;
font-size: 12px;
line-height: 1;
}
}
@media screen and (max-width: 575px) {
.inner-banner-txt .blc-btn {
padding: 3px 17px;
font-size: 13px;
}
}
/* ==========================================================================
Laravel site overrides
Design changes made in this project on top of the reference site.css.
Appended to the end of public/front_assets/css/main.css when main.css is
rebuilt, so edit this file rather than main.css.
========================================================================== */
/* --------------------------------------------------------------------------
About page: section title spacing
-------------------------------------------------------------------------- */
.about-title-bar {
position: relative;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
}
/* --------------------------------------------------------------------------
About page: Mission & Vision (two text + image cards)
-------------------------------------------------------------------------- */
.about-purpose-section {
padding-block: 2.5rem;
}
.about-purpose-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
margin-top: 2rem;
}
.about-purpose-card {
flex-direction: column-reverse;
border-radius: 16px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.about-purpose-card--vision {
background: #f1ede8;
}
.about-purpose-card--mission {
background: #e9edf3;
}
.about-purpose-body {
flex: 1 1 auto;
padding: 1.75rem 1.5rem 2rem;
}
.about-purpose-card-title {
margin-bottom: 1rem;
/* site.css sets every heading to the display font with !important */
font-family: var(--font-body) !important;
font-size: clamp(1.625rem, calc(1.2rem + 1vw), 2.125rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink-strong);
}
.about-purpose-lead {
margin-bottom: 1.25rem;
font-family: var(--font-body);
font-size: clamp(1.125rem, calc(0.95rem + 0.55vw), 1.5rem);
line-height: 1.4;
color: #1c2840;
}
.about-purpose-text {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.7;
color: #3d4659;
}
.about-purpose-media {
height: 220px;
}
@media (min-width: 768px) {
.about-purpose-section {
padding-block: 3.5rem;
}
.about-purpose-card {
flex-direction: row;
}
.about-purpose-body {
padding: 2.5rem 2.25rem;
}
.about-purpose-media {
width: 32%;
height: auto;
min-height: 100%;
}
}
@media (min-width: 1200px) {
.about-purpose-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
.about-purpose-card {
min-height: auto;
}
}
/* --------------------------------------------------------------------------
About page: Values that Drive Our Success (6 cards, image as background)
-------------------------------------------------------------------------- */
.about-values-section {
padding-block: 2.5rem;
}
.about-values-intro {
max-width: 1100px;
margin-bottom: 2rem;
}
.about-values-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.about-value-card {
min-height: 210px;
border-radius: 14px;
background: #f1ede8;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-value-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px -12px rgba(15, 23, 42, 0.22);
}
/* Alternate tints, as in the design: beige, blue-grey, beige... */
.about-value-card:nth-child(even) {
background: #eceff4;
}
/* Image sits on the right part of the card and fades into the card colour on the left. */
.about-value-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: 62%;
height: 100%;
object-position: right center;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
mask-image: linear-gradient(to right, transparent 0%, #000 45%);
transition: transform 0.6s ease;
}
.about-value-card:hover .about-value-img {
transform: scale(1.04);
}
.about-value-body {
max-width: 64%;
padding: 1.5rem 1.5rem 1.75rem;
}
.about-value-title {
margin-bottom: 0.625rem;
/* site.css sets every heading to the display font with !important */
font-family: var(--font-body) !important;
font-size: clamp(1.5rem, calc(1.2rem + 0.8vw), 2rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink-strong);
}
.about-value-text {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
color: #2f3a52;
}
@media (min-width: 768px) {
.about-values-section {
padding-block: 3.5rem;
}
.about-values-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.about-values-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.about-value-card {
min-height: 220px;
}
}
@media (prefers-reduced-motion: reduce) {
.about-value-card,
.about-value-img {
transition: none;
}
.about-value-card:hover,
.about-value-card:hover .about-value-img {
transform: none;
}
}
/* --------------------------------------------------------------------------
About page: Our Core Strengths (8 image cards)
-------------------------------------------------------------------------- */
.about-strengths-intro {
max-width: 860px;
margin-bottom: 2rem;
}
.about-strengths-grid {
grid-template-columns: 1fr;
gap: 1.125rem;
}
.about-strengths-card {
height: 100%;
border-radius: 14px;
background: #efebe6;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-strengths-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px -12px rgba(15, 23, 42, 0.22);
}
.about-strengths-media {
aspect-ratio: 16 / 7;
border-radius: 14px 14px 0 0;
}
.about-strengths-img {
transition: transform 0.6s ease;
}
.about-strengths-card:hover .about-strengths-img {
transform: scale(1.05);
}
.about-strengths-body {
padding: 1.25rem 1.5rem 1.5rem;
}
.about-strengths-card-title {
margin-bottom: 0.5rem;
/* site.css sets every heading to the display font with !important */
font-family: var(--font-body) !important;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
color: #0f1d4a;
}
.about-strengths-card-text {
font-family: var(--font-body);
font-size: 0.9375rem;
line-height: 1.6;
color: #4b5568;
}
@media (min-width: 576px) {
.about-strengths-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.about-strengths-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.about-strengths-card-title {
font-size: 1.1875rem;
}
}
@media (prefers-reduced-motion: reduce) {
.about-strengths-card,
.about-strengths-img {
transition: none;
}
.about-strengths-card:hover,
.about-strengths-card:hover .about-strengths-img {
transform: none;
}
}
/* ==========================================================================
Phones: subtitles 20px, description paragraphs 15px (every page)
Outside any layer and at the end, so it also wins over the unlayered
page rules above. Eyebrow labels, stat numbers and counters keep their sizes.
========================================================================== */
@media (max-width: 767.98px) {
main :is(h3, h4):not([class*="label"]):not([class*="stat"]) {
font-size: 20px;
}
main p:not(.section-label):not(.text-uppercase):not([class*="label"]):not([class*="eyebrow"]):not([class*="title"]):not([class*="stat"]):not([aria-live]) {
font-size: 15px;
}
}
/* ==========================================================================
Home: Client testimonials ("Trusted by the people we build for.")
========================================================================== */
@layer components {
.home-testimonials-section {
padding-block: 3rem;
background-color: #f6f4f1;
}
@media (min-width: 768px) {
.home-testimonials-section {
padding-block: 3rem;
}
}
@media (min-width: 1280px) {
.home-testimonials-section {
padding-block: 3rem;
}
}
.home-testimonials-head {
margin-bottom: 2rem;
}
.home-testimonials-all {
padding: .85rem 1.6rem;
border: 1.5px solid var(--ink-strong);
border-radius: 999px;
color: var(--ink-strong);
font-weight: 500;
text-decoration: none;
transition: background-color .2s, color .2s;
}
.home-testimonials-all:hover,
.home-testimonials-all:focus-visible {
background: var(--ink-strong);
color: #fff;
}
.home-testimonials-frame {
padding: .75rem;
border: 1px solid #e8e4de;
border-radius: 12px;
background: #fff;
}
@media (min-width: 992px) {
.home-testimonials-frame {
padding: 1rem;
}
}
/* The peeking (not active) card sits back a little. */
.home-testimonials-frame .swiper-slide {
opacity: .55;
transition: opacity .4s ease;
}
.home-testimonials-frame .swiper-slide-active {
opacity: 1;
}
/* Phones: footer keeps dots, counter and arrows; the company name is on the card. */
@media (max-width: 575.98px) {
.home-testimonials-company {
display: none;
}
.home-testimonial-quote-text {
font-size: 1.3rem;
}
.home-testimonial-heading {
margin-bottom: 1rem !important;
}
}
.home-testimonial {
border: 1px solid #ece8e2;
border-radius: 10px;
}
.home-testimonial-main {
padding: 1.5rem 1rem;
}
@media (min-width: 992px) {
.home-testimonial-main {
padding: 2.25rem 2.5rem;
}
}
.home-testimonial-eyebrow {
font-size: .8125rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: #9a8673;
}
.home-testimonial-heading {
font-family: var(--font-display);
font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.6rem);
font-weight: 600;
line-height: 1.1;
color: var(--ink-strong);
}
.home-testimonial-quote {
position: relative;
padding-left: 1.5rem;
}
@media (min-width: 768px) {
.home-testimonial-quote {
padding-left: 2.5rem;
}
}
.home-testimonial-quote::before {
position: absolute;
top: .25rem;
left: 0;
width: 3px;
height: 7.5rem;
max-height: 60%;
background: var(--red);
content: "";
}
.home-testimonial-quote-text {
max-width: 34rem;
font-family: var(--font-display);
font-size: clamp(1.4rem, 1.15rem + .9vw, 2rem);
font-weight: 500;
line-height: 1.2;
color: var(--ink-strong);
}
.home-testimonial-detail {
max-width: 42rem;
font-size: 1.0625rem;
line-height: 1.45;
color: #2f4466;
}
.home-testimonial-author {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 0;
position: relative;
}
.home-testimonial-author::before {
position: absolute;
top: 0;
left: 0;
width: 3rem;
height: 2px;
background: #b39d86;
content: "";
}
.home-testimonial-name {
font-family: var(--font-display);
font-size: 1.375rem;
font-style: normal;
font-weight: 600;
color: var(--ink-strong);
}
.home-testimonial-company {
font-size: .875rem;
color: #2f4466;
}
.home-testimonial-badge {
padding: .55rem 1.1rem;
border-radius: 999px;
background: #eef3ea;
color: #2f4a2c;
font-size: .875rem;
}
.home-testimonial-badge i {
color: #3f6b3a;
}
/* "Verified Review": soft green box with a large outlined check. */
.home-testimonial-badge--verified {
gap: .6rem !important;
padding: .45rem .9rem .45rem .55rem;
border-radius: 8px;
background: #e9f6ec;
color: #15913f;
font-size: 1rem;
font-weight: 500;
}
.home-testimonial-check {
flex-shrink: 0;
width: 1.6rem;
height: 1.6rem;
color: #15913f;
}
.home-testimonial-location,
.home-testimonial-date {
font-size: .875rem;
color: #8a94a6;
}
.home-testimonial-aside {
padding: 1.5rem 1rem;
background: linear-gradient(180deg, #fbf3df 0%, #fdf8ec 100%);
}
@media (min-width: 992px) {
.home-testimonial-aside {
padding: 2.25rem 2.25rem;
}
}
.home-testimonial-rating,
.home-testimonial-project--rule {
border-bottom: 1px solid #eadfca;
}
.home-testimonial-score {
font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
font-weight: 700;
line-height: 1;
letter-spacing: -.02em;
color: var(--ink-strong);
}
.home-testimonial-score span {
font-size: .55em;
font-weight: 500;
color: #8a94a6;
}
/* Slides without a rating: larger project title, as in the design. */
.home-testimonial-project.home-testimonial-project--lg {
font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.6rem);
}
.home-testimonial-stars {
font-size: 1.35rem;
color: var(--red);
}
.home-testimonial-stars .is-empty {
color: #d5d8dd;
}
.home-testimonial-project {
font-family: var(--font-display);
font-size: clamp(1.4rem, 1.2rem + .6vw, 1.85rem);
font-weight: 600;
line-height: 1.1;
color: var(--ink-strong);
}
.home-testimonial-tags {
gap: .5rem;
}
.home-testimonial-tag {
padding: .5rem 1rem;
border-radius: 999px;
background: #f1e8d8;
color: #3a3530;
font-size: .875rem;
}
.home-testimonial-summary {
font-size: .875rem;
line-height: 1.6;
color: #6b6560;
}
.home-testimonials-footer {
margin-top: 1.25rem;
}
.home-testimonials-company {
font-size: .875rem;
color: #3d4a5c;
white-space: nowrap;
}
.home-testimonials-rule {
height: 1px;
background: #e3ded7;
}
.home-testimonials-dots {
gap: .55rem;
}
.home-testimonials-dots .swiper-pagination-bullet {
width: 9px;
height: 9px;
margin: 0;
background-color: #c8cbd0;
opacity: 1;
transition: background-color .2s, transform .2s;
}
.home-testimonials-dots .swiper-pagination-bullet-active {
background-color: var(--red);
transform: scale(1.15);
}
.home-testimonials-count {
margin-left: auto;
font-size: .9375rem;
font-variant-numeric: tabular-nums;
color: #3d4a5c;
white-space: nowrap;
}
@media (min-width: 768px) {
.home-testimonials-count {
margin-left: 0;
}
}
.home-testimonials-arrow {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border: 1.5px solid var(--ink-strong);
border-radius: 50%;
background: transparent;
color: var(--ink-strong);
transition: background-color .2s, color .2s;
}
.home-testimonials-arrow:hover,
.home-testimonials-arrow:focus-visible {
background: var(--red);
color: #fff;
border-color: var(--red);
}
}
/* Testimonial dots: unlayered, like the other slider dots, so they beat Swiper's blue default. */
.home-testimonials-dots .swiper-pagination-bullet-active {
background-color: var(--red);
}
/* ==========================================================================
Proposal modal ("Request a Proposal" popup, partials/modals/proposal.blade.php)
Unlayered, like the other modal rules, so Bootstrap's modal styles don't win.
========================================================================== */
.proposal-modal-dialog {
max-width: 820px;
}
.proposal-modal-content {
position: relative;
font-family: var(--font-body);
border: 1px solid #d9dce3;
border-radius: 18px;
background: #fff;
box-shadow: 0 24px 60px rgba(11, 28, 48, .18);
}
.proposal-modal-body {
padding: 1.75rem 1.25rem 1.5rem;
}
@media (min-width: 768px) {
.proposal-modal-body {
padding: 2rem 2rem 1.75rem;
}
}
.proposal-modal-close {
position: absolute;
top: 1.1rem;
right: 1.1rem;
z-index: 2;
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: #5b6573;
transition: background-color .2s, color .2s;
}
.proposal-modal-close svg {
width: 1.6rem;
height: 1.6rem;
}
.proposal-modal-close:hover,
.proposal-modal-close:focus-visible {
background: #f1f3f6;
color: var(--ink-strong);
}
/* Title with a red bar on its left */
.proposal-modal-head {
position: relative;
margin-bottom: 1.25rem;
padding-left: 1.25rem;
padding-right: 2.5rem;
}
.proposal-modal-head::before {
position: absolute;
top: .15rem;
bottom: .15rem;
left: 0;
width: 5px;
border-radius: 3px;
background: var(--red);
content: "";
}
.proposal-modal-title {
margin: 0 0 .25rem;
font-family: var(--font-display) !important;
font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -.02em;
color: var(--ink-strong);
}
.proposal-modal-lead {
margin: 0;
font-size: clamp(.95rem, .9rem + .3vw, 1.1rem);
color: #6b7280;
}
.proposal-label {
margin-bottom: .35rem;
font-size: 1rem;
font-weight: 500;
color: #111827;
}
.proposal-req {
color: var(--red);
}
.proposal-optional {
font-weight: 400;
color: #8a94a6;
}
.proposal-input {
display: block;
width: 100%;
min-height: 2.9rem;
padding: .55rem .9rem;
border: 1px solid #d5d9e1;
border-radius: 6px;
background: #f8f9fb;
font-size: 1rem;
color: #111827;
transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.proposal-input::placeholder {
color: #9aa1ad;
}
.proposal-input:focus {
outline: 0;
border-color: #0d2350;
background: #fff;
box-shadow: 0 0 0 3px rgba(13, 35, 80, .1);
}
.proposal-textarea {
min-height: 5.5rem;
resize: vertical;
}
.proposal-input.is-invalid,
.proposal-form .iti.is-invalid .proposal-input {
border-color: #dc3545;
background: #fff;
}
/* Phone: intl-tel-input wraps the field. The number's left padding follows the
dial-code box width (set by the form scripts: app.js section 5, contact.js). */
:is(.proposal-form, .contact-field, .home-contact-form) .iti {
display: block;
width: 100%;
}
/* The code box sits on top of the input: keep it 1px inside so the input's own
border stays visible all round, like the other fields. */
:is(.proposal-form, .contact-field, .home-contact-form) .iti__flag-container {
top: 1px;
bottom: 1px;
left: 1px;
}
:is(.proposal-form, .contact-field, .home-contact-form) .iti--separate-dial-code .iti__selected-flag {
padding: 0 .9rem;
border-radius: 5px 0 0 5px;
background: #f8f9fb;
box-shadow: inset -1px 0 0 #d5d9e1;
}
/* Contact page and home contact fields are white, so the code box is white there too. */
:is(.contact-field, .home-contact-form) .iti--separate-dial-code .iti__selected-flag {
background: #fff;
box-shadow: inset -1px 0 0 #c9ced8;
}
:is(.proposal-form, .contact-field, .home-contact-form) .iti--separate-dial-code .iti__selected-dial-code {
margin-left: .5rem;
color: #111827;
}
/* intl-tel-input's own CSS sits in the vendor layer, so the site's resets win over it;
these unlayered rules put back the chevron and a readable country list. */
:is(.proposal-form, .contact-field, .home-contact-form) .iti__arrow {
width: .5rem;
height: .5rem;
margin: -.2rem 0 0 .6rem;
border: 0;
border-right: 1.6px solid #4b5563;
border-bottom: 1.6px solid #4b5563;
transform: rotate(45deg);
transition: transform .2s;
}
:is(.proposal-form, .contact-field, .home-contact-form) .iti__arrow--up {
margin-top: .25rem;
transform: rotate(-135deg);
}
:is(.proposal-form, .contact-field, .home-contact-form) .iti__country-list {
z-index: 5;
width: 100%;
min-width: 18rem;
max-height: 16rem;
margin: .3rem 0 0;
padding: .35rem 0;
border: 1px solid #d5d9e1;
border-radius: 8px;
background: #fff;
box-shadow: 0 12px 30px rgba(11, 28, 48, .14);
list-style: none;
white-space: normal;
}
:is(.proposal-form, .contact-field, .home-contact-form) .iti__country {
display: flex;
align-items: center;
gap: .6rem;
padding: .5rem .9rem;
font-size: .9375rem;
line-height: 1.3;
color: #111827;
cursor: pointer;
}
:is(.proposal-form, .contact-field, .home-contact-form) .iti__country.iti__highlight,
:is(.proposal-form, .contact-field, .home-contact-form) .iti__country:hover {
background: #f1f3f6;
}
:is(.proposal-form, .contact-field, .home-contact-form) .iti__flag-box {
flex-shrink: 0;
width: 20px;
margin: 0;
}
:is(.proposal-form, .contact-field, .home-contact-form) .iti__country-name {
margin: 0;
}
:is(.proposal-form, .contact-field, .home-contact-form) .iti__dial-code {
margin-left: auto;
color: #8a94a6;
}
:is(.proposal-form, .contact-field, .home-contact-form) .iti__divider {
margin: .35rem 0;
padding: 0;
border-bottom: 1px solid #e5e7eb;
}
/* File picker */
.proposal-file {
display: flex;
align-items: center;
gap: .9rem;
min-height: 3.5rem;
padding: .55rem .9rem;
border: 1px solid #d5d9e1;
border-radius: 6px;
background: #f8f9fb;
}
.proposal-file-icon {
flex-shrink: 0;
width: 1.4rem;
height: 1.4rem;
color: #6b7280;
}
.proposal-file-btn {
flex-shrink: 0;
margin: 0;
padding: .4rem 1rem;
border: 1px solid #9aa1ad;
border-radius: 5px;
background: #fff;
font-size: 1rem;
color: #111827;
cursor: pointer;
transition: border-color .2s, background-color .2s;
}
.proposal-file-btn:hover {
border-color: #0d2350;
background: #f1f3f6;
}
.proposal-file:focus-within .proposal-file-btn {
outline: 2px solid rgba(13, 35, 80, .35);
outline-offset: 2px;
}
.proposal-file-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #8a94a6;
}
.proposal-file-name.has-file {
color: #111827;
}
.proposal-help {
margin: .4rem 0 0;
font-size: .875rem;
color: #8a94a6;
}
.proposal-captcha {
min-height: 78px;
}
/* Footer: privacy line on the left, red submit on the right */
.proposal-modal-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid #d5d9e1;
}
.proposal-privacy {
margin: 0;
font-size: .9375rem;
color: #6b7280;
}
.proposal-privacy a {
color: #0d2350;
text-decoration: underline;
text-decoration-color: rgba(13, 35, 80, .45);
text-underline-offset: 3px;
}
.proposal-submit {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .625rem 1rem;
border: 0;
border-radius: 6px;
background: #d40d2a;
font-size: 1.125rem;
font-weight: 400;
color: #fff;
transition: background-color .2s;
}
.proposal-submit #submitText,
.proposal-submit .request-submit-text:not(.d-none) {
display: inline-flex;
align-items: center;
gap: .75rem;
}
/* Field error messages (#requestModal) */
.proposal-form .error-text {
display: block;
margin-top: .3rem;
font-size: .8125rem;
color: #dc3545;
}
.proposal-form .error-text:empty {
display: none;
}
.proposal-submit:hover,
.proposal-submit:focus-visible {
background: #b50a23;
}
.proposal-submit:disabled {
opacity: .7;
}
@media (max-width: 575.98px) {
.proposal-submit {
width: 100%;
}
}
/* Thank-you state shown after a successful submit: centred icon, message and close button. */
.proposal-thanks {
display: flex;
flex-direction: column;
align-items: center;
max-width: 32rem;
margin: 0 auto;
padding: 2.5rem 1rem 1.5rem;
}
.proposal-thanks[hidden] {
display: none;
}
.proposal-thanks-icon {
display: block;
width: 4.5rem;
height: 4.5rem;
margin: 0 auto 1.25rem;
padding: .9rem;
border-radius: 50%;
background: #e9f6ec;
color: #15913f;
}
.proposal-thanks-close {
margin-top: 1.75rem;
padding: .75rem 2rem;
border: 0;
border-radius: 6px;
background: #0b1c30;
font-weight: 600;
color: #fff;
transition: background-color .2s;
}
.proposal-thanks-close:hover,
.proposal-thanks-close:focus-visible {
background: var(--red);
}
/* Proposal modal: form controls don't inherit the page font by default. */
.proposal-modal :is(input, textarea, select, button, label, .iti__country-list) {
font-family: var(--font-body);
}
/* ==========================================================================
Career application modal (#careerApplyModal, partials/modals/career-application.blade.php)
Builds on the "Proposal modal" styles above.
========================================================================== */
.proposal-select {
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-position: right .85rem center;
background-repeat: no-repeat;
background-size: 1.1rem;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.proposal-select:focus {
background-color: #fff;
}
/* Number + unit (Years / Months, Days / Weeks / Months) side by side */
.career-apply-pair {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: .75rem;
}
/* Footer: same as the Request a Proposal popup (top rule, red submit), with no privacy text,
so the button sits on the right on its own. */
.career-apply-modal .career-apply-foot {
justify-content: flex-end;
}
/* Careers buttons are