/* assets/site.css */
:root {
--navy: #102c50;
--blue: #154fc4;
--blue-dark: #123f99;
--sky: #eaf1f8;
--paper: #f5f8fc;
--ink: #172b43;
--muted: #536579;
--line: #cfdfef;
--gold: #d8b86a;
--white: #fff;
--radius: 4px;
--space: clamp(22px, 5vw, 80px);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 110px;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: 'Segoe UI', Arial, sans-serif;
line-height: 1.65;
font-size: 16px;
}
button,
input,
select,
textarea {
font: inherit;
}
a {
color: inherit;
text-underline-offset: 5px;
}
a:hover {
color: var(--blue);
}
button,
a,
input,
select,
textarea,
summary {
touch-action: manipulation;
}
button,
summary {
cursor: pointer;
}
button {
color: inherit;
}
img {
display: block;
max-width: 100%;
height: auto;
}
picture {
display: block;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1,
h2,
h3 {
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.045em;
}
h1 {
font-size: clamp(40px, 5.4vw, 78px);
}
h2 {
font-size: clamp(30px, 3.5vw, 48px);
}
h3 {
font-size: 24px;
}
p {
color: var(--muted);
margin-bottom: 1.1em;
}
strong {
font-weight: 650;
}
::selection {
background: #cfddf9;
color: var(--navy);
}
:focus-visible {
outline: 3px solid #a85c00;
outline-offset: 5px;
}
.button:focus-visible,
footer a:focus-visible,
.site-header a:focus-visible {
outline-color: #f2cb68;
}
main:focus {
outline: none;
}
.container {
width: min(1280px, calc(100% - 2 * var(--space)));
margin-inline: auto;
}
.section {
padding-block: 85px;
}
.eyebrow {
display: block;
font-size: 11px;
letter-spacing: 0.18em;
line-height: 1.6;
font-weight: 700;
color: var(--blue);
margin-bottom: 20px;
}
.small-line {
display: inline-block;
width: 34px;
height: 1px;
background: currentColor;
vertical-align: middle;
margin-right: 10px;
}
.topbar {
background: #e8eef5;
font-size: 11px;
letter-spacing: 0.1em;
padding: 10px 0;
}
.topbar .container {
display: flex;
justify-content: space-between;
gap: 15px;
}
.topbar a {
text-decoration: none;
letter-spacing: 0;
}
.topbar strong {
padding-left: 12px;
font-size: 14px;
}
.site-header {
position: sticky;
top: 0;
z-index: 20;
background: var(--navy);
color: white;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
min-height: 92px;
}
.brand {
display: flex;
align-items: center;
gap: 18px;
text-decoration: none;
color: white;
width: max-content;
}
.brand img {
width: 145px;
height: auto;
}
.brand > span {
font-size: 10px;
letter-spacing: 0.16em;
border-left: 1px solid #ffffff55;
padding-left: 17px;
color: #dbe4ee;
}
.site-header nav {
display: flex;
gap: 27px;
align-items: center;
font-size: 13px;
}
.site-header nav > a:not(.button) {
text-decoration: none;
color: #f5f8ff;
white-space: nowrap;
}
.site-header nav > a:hover {
color: #d8b86a;
}
.nav-details {
position: relative;
}
.nav-details summary {
list-style: none;
padding: 12px 0;
}
.nav-details summary::-webkit-details-marker {
display: none;
}
.nav-details summary:after {
content: '⌄';
margin-left: 7px;
}
.dropdown {
position: absolute;
top: 100%;
left: -20px;
min-width: 235px;
background: #fff;
color: var(--ink);
padding: 10px;
box-shadow: 0 14px 35px #102c5025;
border: 1px solid var(--line);
}
.dropdown a {
display: block;
padding: 9px 12px;
text-decoration: none;
}
.dropdown a:hover,
.dropdown a:focus-visible {
background: var(--sky);
}
.menu-toggle {
display: none;
}
.button {
border: 1px solid var(--blue);
background: var(--blue);
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 22px;
min-height: 52px;
padding: 13px 23px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.01em;
border-radius: var(--radius);
transition: background 0.18s;
}
.button:hover {
background: var(--blue-dark);
color: white;
}
.button.secondary {
background: transparent;
color: var(--navy);
border-color: #879bb0;
}
.button.secondary:hover {
background: var(--sky);
}
.button.light {
background: white;
border-color: white;
color: var(--navy);
}
.button.light:hover {
background: #d9e7fc;
}
.button:disabled {
cursor: wait;
opacity: 0.65;
}
.nav-cta {
min-height: 44px;
padding: 9px 17px;
background: #f7faff;
border-color: #f7faff;
color: var(--navy);
white-space: nowrap;
}
.nav-cta:hover {
background: #d9e7fc;
color: var(--navy);
}
.actions {
display: flex;
align-items: center;
gap: 23px;
flex-wrap: wrap;
}
.text-link {
font-size: 13px;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid #a8b9ca;
padding-bottom: 6px;
}
.hero {
background: linear-gradient(120deg, #edf2f7 0%, #f7f9fd 55%, #dfe8f3 100%);
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
padding-block: 60px 65px;
}
.hero-copy {
padding-block: 15px;
}
.hero h1 {
font-size: clamp(45px, 4.7vw, 70px);
line-height: 1.06;
margin-bottom: 25px;
}
.hero h1 em {
font-family: Georgia, serif;
font-weight: 400;
color: var(--blue);
letter-spacing: -0.06em;
}
.hero-copy > p {
font-size: 16px;
max-width: 490px;
margin-bottom: 30px;
}
.hero-bottom {
display: flex;
flex-wrap: wrap;
gap: 19px;
margin-top: 43px;
font-size: 9px;
letter-spacing: 0.11em;
color: #425b75;
}
.hero-bottom span:before {
content: '+';
margin-right: 7px;
color: var(--blue);
}
.hero-visual {
position: relative;
padding: 0 0 35px 20px;
}
.hero-visual:before {
content: '';
position: absolute;
inset: -25px -50px 90px 50px;
border: 1px solid #b8c8d8;
pointer-events: none;
}
.hero-visual picture {
position: relative;
}
.hero-visual img {
width: 100%;
aspect-ratio: 1/1.08;
object-fit: cover;
object-position: center;
}
.image-index {
position: absolute;
top: 17px;
left: 38px;
color: white;
background: #102c50dc;
padding: 8px 12px;
font-size: 9px;
letter-spacing: 0.13em;
}
.visual-note {
position: absolute;
bottom: 0;
left: -10px;
background: white;
padding: 22px 30px;
box-shadow: 0 15px 40px #132e4c12;
display: flex;
gap: 18px;
align-items: center;
min-width: 340px;
}
.visual-note strong,
.visual-note span {
display: block;
}
.visual-note strong {
font-size: 14px;
}
.visual-note div > span {
font-size: 11px;
letter-spacing: 0.06em;
color: var(--muted);
margin-top: 4px;
}
.note-icon {
font-size: 34px;
color: var(--blue);
}
.service-strip {
background: #fff;
border-bottom: 1px solid var(--line);
}
.service-strip .container {
display: flex;
gap: 35px;
justify-content: space-between;
align-items: center;
padding-block: 25px;
}
.service-strip a {
font-size: 13px;
text-decoration: none;
}
.service-strip span {
font-size: 10px;
color: var(--muted);
letter-spacing: 0.08em;
}
.section-heading {
display: flex;
justify-content: space-between;
align-items: end;
gap: 50px;
margin-bottom: 35px;
}
.section-heading h2 {
margin-bottom: 0;
}
.section-heading > p {
max-width: 360px;
font-size: 14px;
}
.editorial-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.editorial-cards > a {
display: block;
text-decoration: none;
background: white;
border: 1px solid var(--line);
}
.editorial-cards img {
width: 100%;
height: 300px;
object-fit: cover;
}
.editorial-cards > a > div {
padding: 28px 30px;
position: relative;
}
.editorial-cards h3 {
margin-top: 10px;
margin-bottom: 12px;
font-size: 29px;
}
.editorial-cards p {
font-size: 14px;
margin-bottom: 0;
padding-right: 30px;
}
.editorial-cards div > span:not(.arrow) {
font-size: 10px;
letter-spacing: 0.1em;
color: var(--muted);
}
.arrow {
font-size: 25px;
color: var(--blue);
}
.editorial-cards .arrow {
position: absolute;
right: 27px;
bottom: 25px;
}
.process-band {
background: var(--navy);
color: white;
padding-block: 85px;
}
.process-band .eyebrow {
color: #b3c9ee;
}
.process-band p {
color: #c3cfdf;
}
.process-band a {
color: white;
}
.process-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
}
.process-grid > div > p {
max-width: 420px;
}
.mini-steps {
list-style: none;
padding: 0;
margin: 0;
}
.mini-steps li {
display: flex;
gap: 30px;
padding-block: 25px;
border-bottom: 1px solid #ffffff33;
}
.mini-steps li:first-child {
padding-top: 0;
}
.mini-steps li > span {
font-size: 13px;
color: #a7bfdf;
}
.mini-steps h3 {
font-size: 23px;
letter-spacing: -0.02em;
margin-bottom: 10px;
}
.mini-steps p {
font-size: 13px;
margin-bottom: 0;
}
.calculator-promo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 65px;
padding: 55px;
background: #e6edf5;
}
.calculator-promo p {
max-width: 400px;
}
.calculator-promo small {
display: block;
color: var(--muted);
font-size: 11px;
margin-top: 15px;
}
.cube-art {
position: relative;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient(30deg, #d5e3f6, transparent);
}
.cube-art > span {
font-size: 110px;
font-weight: 300;
color: var(--blue);
z-index: 1;
}
.cube-art i {
position: absolute;
width: 160px;
height: 160px;
border: 1px solid #3964a8;
transform: rotate(-25deg) skew(12deg);
}
.cube-art .cube-two {
transform: translate(45px, -40px) rotate(-25deg) skew(12deg);
border-color: #7b9cc7;
}
.cube-art b {
position: absolute;
bottom: 20px;
font-size: 10px;
letter-spacing: 0.13em;
font-weight: 500;
}
.guide-preview {
padding-top: 0;
}
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
margin-block: 30px;
}
.card {
border: 1px solid var(--line);
padding: 30px;
background: white;
text-decoration: none;
display: flex;
align-items: start;
flex-direction: column;
min-width: 0;
transition: border 0.2s;
}
.card:hover {
border-color: var(--blue);
}
.card h3,
.card h2 {
font-size: 25px;
letter-spacing: -0.035em;
margin-bottom: 17px;
margin-top: 16px;
}
.card p {
font-size: 14px;
flex: 1;
}
.card-number {
color: var(--blue);
font-size: 12px;
border-bottom: 1px solid var(--line);
width: 100%;
padding-bottom: 16px;
}
.home-faq {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 70px;
padding-top: 0;
}
.faq {
border-top: 1px solid var(--line);
}
.faq details {
border-bottom: 1px solid var(--line);
padding: 20px 0;
}
.faq summary {
font-size: 17px;
list-style: none;
display: flex;
gap: 20px;
justify-content: space-between;
font-weight: 600;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary:after {
content: '+';
color: var(--blue);
font-size: 23px;
line-height: 1;
}
.faq details[open] summary:after {
content: '−';
}
.faq p {
margin: 18px 35px 0 0;
font-size: 15px;
}
.closing {
background: var(--blue);
color: white;
padding-block: 62px;
}
.closing .eyebrow {
color: #d4e2ff;
}
.closing h2 {
margin-bottom: 0;
}
.closing-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}
footer {
background: #0b203a;
color: #e2eaf5;
padding: 60px 0 24px;
font-size: 13px;
}
footer p {
color: #bdcadd;
margin-top: 22px;
}
footer a:hover {
color: #d8b86a;
}
footer h2 {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: #fff;
margin-bottom: 22px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 30px;
}
.footer-grid > div > a:not(.brand) {
display: block;
width: fit-content;
text-decoration: none;
margin-bottom: 10px;
overflow-wrap: anywhere;
}
.footer-phone {
font-size: 26px;
color: white;
letter-spacing: -0.02em;
}
.footer-bottom {
display: flex;
justify-content: space-between;
gap: 20px;
border-top: 1px solid #ffffff22;
margin-top: 45px;
padding-top: 25px;
font-size: 10px;
color: #b1c1d3;
}
.footer-bottom > div {
display: flex;
gap: 17px;
flex-wrap: wrap;
}
.footer-bottom a {
text-decoration: none;
}
.floating-contact {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 25;
background: var(--navy);
border: 1px solid #95abc5;
color: white;
padding: 11px 18px;
font-size: 12px;
text-decoration: none;
border-radius: 30px;
box-shadow: 0 5px 20px #102c5030;
}
.floating-contact:hover {
background: var(--blue);
color: white;
}
.skip-link {
position: fixed;
top: -90px;
left: 20px;
padding: 15px;
background: #fff;
color: var(--navy);
z-index: 100;
}
.skip-link:focus {
top: 10px;
}
.page-intro {
background: #e9eff6;
border-bottom: 1px solid var(--line);
padding: 25px 0 55px;
}
.breadcrumb {
font-size: 11px;
line-height: 1.6;
margin-bottom: 45px;
color: #475b73;
}
.breadcrumb a {
text-decoration: none;
}
.breadcrumb span:last-child {
overflow-wrap: anywhere;
}
.page-intro h1 {
max-width: 950px;
font-size: clamp(38px, 4.6vw, 66px);
margin-bottom: 20px;
}
.page-intro p {
max-width: 780px;
margin-bottom: 0;
}
.page-body {
padding-block: 55px 85px;
min-height: 300px;
}
.page-body > .lead {
max-width: 900px;
}
.prose-section {
margin-block: 38px;
max-width: 860px;
}
.prose-section h2 {
font-size: 30px;
letter-spacing: -0.025em;
margin-bottom: 18px;
}
.prose-section p,
.prose-section li {
font-size: 16px;
color: var(--muted);
}
.prose-section li {
padding-left: 5px;
margin-bottom: 10px;
}
.prose-section ul {
padding-left: 20px;
}
.source-note {
font-size: 12px;
max-width: 850px;
border-top: 1px solid var(--line);
padding-top: 20px;
margin-top: 35px;
overflow-wrap: anywhere;
}
.lead {
font-size: 21px;
line-height: 1.6;
}
.feature-image {
float: right;
width: 38%;
margin: 0 0 35px 55px;
}
.feature-image img {
aspect-ratio: 1/1;
object-fit: cover;
}
.page-body:after {
content: '';
display: block;
clear: both;
}
.page-body > .cards {
clear: both;
}
.steps {
list-style: none;
padding: 0;
max-width: 950px;
}
.steps li {
display: flex;
gap: 40px;
border-bottom: 1px solid var(--line);
padding: 30px 0;
}
.steps li > span {
color: var(--blue);
font-size: 25px;
min-width: 40px;
}
.steps h2 {
font-size: 29px;
margin-bottom: 13px;
}
.steps p {
margin-bottom: 0;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.contact-card {
display: flex;
flex-direction: column;
padding: 30px;
border: 1px solid var(--line);
background: white;
text-decoration: none;
overflow-wrap: anywhere;
}
.contact-card span {
font-size: 11px;
letter-spacing: 0.08em;
color: var(--muted);
}
.contact-card strong {
font-size: 25px;
margin-top: 10px;
letter-spacing: -0.03em;
}
.filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.filter {
border: 1px solid #95a9bf;
border-radius: 30px;
background: white;
padding: 9px 22px;
font-size: 13px;
}
.filter.active {
background: var(--navy);
border-color: var(--navy);
color: white;
}
.guide-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.guide-list .eyebrow {
margin-bottom: 0;
}
.gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 35px;
margin-top: 35px;
}
.gallery figure {
margin: 0;
min-width: 0;
}
.gallery button {
padding: 0;
border: 0;
background: none;
width: 100%;
display: block;
overflow: hidden;
}
.gallery img {
width: 100%;
aspect-ratio: 10/7;
object-fit: cover;
transition: transform 0.3s;
}
.gallery button:hover img {
transform: scale(1.025);
}
figcaption {
font-size: 13px;
color: var(--muted);
margin-top: 12px;
}
figcaption span {
color: var(--blue);
margin-right: 10px;
}
dialog {
padding: 20px;
border: 1px solid var(--line);
max-width: 950px;
width: calc(100% - 40px);
max-height: 94dvh;
color: var(--ink);
}
dialog::backdrop {
background: #08172bd9;
}
dialog img {
max-height: 70dvh;
width: 100%;
object-fit: contain;
background: var(--navy);
}
dialog p {
margin: 15px 0 0;
font-size: 13px;
}
.dialog-controls {
display: flex;
justify-content: end;
gap: 12px;
margin-bottom: 15px;
}
.dialog-controls button {
border: 1px solid var(--line);
padding: 8px 15px;
background: #eef4fc;
min-height: 44px;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 22px;
min-width: 0;
}
label {
font-size: 14px;
color: var(--ink);
font-weight: 600;
}
label span {
font-size: 11px;
font-weight: 400;
color: var(--muted);
}
input,
select,
textarea {
width: 100%;
min-width: 0;
border: 1px solid #879bb0;
background: #fff;
padding: 12px;
color: var(--ink);
border-radius: 3px;
min-height: 48px;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--blue);
}
input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] {
border: 2px solid #b52222;
}
small {
color: var(--muted);
font-size: 12px;
line-height: 1.6;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 23px;
}
.quote-layout {
display: grid;
grid-template-columns: 1.65fr 1fr;
gap: 65px;
align-items: start;
}
.notice {
background: #edf3fa;
border-left: 3px solid var(--blue);
padding: 18px;
font-size: 14px;
color: var(--ink);
}
.check {
display: flex;
align-items: start;
gap: 12px;
margin-block: 24px;
}
.check input {
width: 20px;
height: 20px;
min-height: 20px;
margin-top: 2px;
flex-shrink: 0;
accent-color: var(--blue);
}
.check span {
font-size: 13px;
color: var(--ink);
}
.honey {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.quote-aside {
background: #e6edf5;
padding: 35px;
position: sticky;
top: 130px;
}
.quote-aside h2 {
font-size: 35px;
}
.quote-aside li {
padding-left: 10px;
margin-bottom: 14px;
font-size: 15px;
color: var(--muted);
}
.quote-aside ol {
padding-left: 20px;
}
.quote-aside a {
display: block;
font-size: 15px;
margin-top: 15px;
}
.quote-aside p {
font-size: 14px;
}
.error {
color: #a01720;
font-size: 14px;
font-weight: 600;
margin-block: 18px;
}
.error:empty {
display: none;
}
#quote-status {
margin-top: 18px;
font-weight: 600;
color: var(--ink);
}
.calculator {
display: grid;
grid-template-columns: 1fr 290px;
gap: 0 35px;
align-items: start;
}
.calculator > .lead,
.calculator > p {
grid-column: 1/-1;
}
.volume-result {
background: var(--navy);
color: white;
padding: 30px;
position: sticky;
top: 130px;
}
.volume-result > span {
font-size: 12px;
color: #c5d4e8;
}
.volume-result strong {
display: block;
font-size: 38px;
font-weight: 400;
letter-spacing: -0.04em;
overflow-wrap: anywhere;
}
.volume-result p {
color: #d2dcea;
font-size: 13px;
margin-block: 16px;
}
.volume-result .button {
padding: 12px;
font-size: 12px;
gap: 10px;
}
.volume-row {
background: white;
border: 1px solid var(--line);
padding: 20px;
margin: 0 0 20px;
min-width: 0;
}
.volume-row legend {
padding-inline: 8px;
font-size: 12px;
color: var(--blue);
font-weight: 600;
}
.row-top {
display: grid;
grid-template-columns: 1fr 150px;
gap: 15px;
}
.dimensions {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.dimensions .field {
margin-bottom: 10px;
}
.dimensions label {
font-size: 12px;
}
.volume-row .remove-row {
background: transparent;
border: 0;
text-decoration: underline;
text-underline-offset: 3px;
font-size: 12px;
color: #8d1720;
min-height: 40px;
padding: 0 10px;
}
.narrow {
max-width: 310px;
margin-top: 30px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
[hidden] {
display: none !important;
}
@media (min-width: 1500px) {
.hero-grid {
padding-block: 80px;
}
.hero h1 {
font-size: 74px;
}
}
@media (max-width: 1150px) {
.site-header nav {
gap: 18px;
font-size: 12px;
}
.brand img {
width: 122px;
}
.brand > span {
display: none;
}
.hero-grid {
gap: 30px;
}
.quote-layout {
gap: 35px;
}
.process-grid {
gap: 50px;
}
.calculator {
grid-template-columns: 1fr 250px;
gap: 25px;
}
.visual-note {
min-width: 300px;
padding: 20px;
}
.cards {
gap: 15px;
}
.card {
padding: 23px;
}
}
@media (max-width: 900px) {
.menu-toggle {
display: flex;
align-items: center;
gap: 18px;
background: transparent;
color: white;
border: 1px solid #96abc5;
min-height: 44px;
padding: 8px 15px;
font-size: 13px;
}
.header-inner {
min-height: 78px;
position: relative;
}
.site-header nav {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
max-height: calc(100dvh - 125px);
overflow: auto;
background: var(--navy);
padding: 20px;
flex-direction: column;
align-items: stretch;
gap: 12px;
border-top: 1px solid #5d7290;
}
.site-header nav.open {
display: flex;
}
.site-header nav > a {
padding-block: 9px;
}
.dropdown {
position: static;
box-shadow: none;
background: #19395d;
color: white;
border-color: #275fa4;
margin-bottom: 10px;
}
.dropdown a:hover {
background: #254b78;
color: #fff;
}
.site-header nav .nav-cta {
align-self: start;
color: var(--navy);
}
.hero-grid {
gap: 25px;
padding-block: 38px 50px;
}
.hero h1 {
font-size: 48px;
}
.hero-copy > p {
font-size: 14px;
}
.hero-visual {
padding: 0 0 40px;
}
.hero-visual img {
aspect-ratio: 1/1.4;
}
.visual-note {
left: -20px;
min-width: 260px;
padding: 16px;
}
.visual-note strong {
font-size: 12px;
}
.hero-bottom {
gap: 10px;
font-size: 8px;
}
.hero .actions {
gap: 15px;
}
.service-strip .container {
gap: 15px;
flex-wrap: wrap;
}
.section {
padding-block: 60px;
}
.cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.process-grid {
gap: 40px;
}
.calculator-promo {
padding: 35px;
gap: 25px;
}
.home-faq {
gap: 30px;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 35px;
}
.footer-bottom {
flex-direction: column;
}
.quote-layout {
grid-template-columns: 1fr;
}
.quote-aside {
position: static;
}
.calculator {
grid-template-columns: 1fr;
}
.volume-result {
position: static;
margin-top: 15px;
}
.volume-result .button {
width: fit-content;
}
.feature-image {
width: 40%;
margin-left: 30px;
}
.editorial-cards img {
height: 240px;
}
}
@media (max-width: 620px) {
:root {
--space: 22px;
}
.topbar {
font-size: 8px;
letter-spacing: 0.04em;
padding: 8px 0;
}
.topbar strong {
font-size: 12px;
padding-left: 5px;
}
.topbar a {
font-size: 10px;
}
.header-inner {
min-height: 76px;
}
.brand img {
width: 128px;
}
.hero-grid {
grid-template-columns: 1fr;
padding-top: 32px;
gap: 30px;
}
.hero h1 {
font-size: 50px;
}
.hero .eyebrow {
font-size: 9px;
}
.hero-copy > p {
font-size: 15px;
max-width: 460px;
}
.hero .button {
font-size: 12px;
padding: 13px 16px;
}
.hero-bottom {
margin-top: 28px;
font-size: 8px;
gap: 15px;
}
.hero-visual {
padding: 0 0 28px 14px;
margin-top: 6px;
}
.hero-visual img {
aspect-ratio: 1.15/1;
}
.hero-visual:before {
inset: -13px -10px 65px 35px;
}
.image-index {
left: 27px;
top: 14px;
}
.visual-note {
left: 0;
min-width: 260px;
}
.service-strip .container {
display: grid;
grid-template-columns: 1fr 1fr;
padding-block: 22px;
gap: 12px;
}
.service-strip span {
grid-column: 1/-1;
}
.service-strip a {
font-size: 12px;
}
.section {
padding-block: 48px;
}
.section-heading {
display: block;
margin-bottom: 26px;
}
.section-heading h2 {
font-size: 35px;
}
.section-heading > p {
margin-top: 22px;
}
.section-heading > .text-link {
display: inline-block;
margin-top: 20px;
}
.editorial-cards,
.process-grid,
.calculator-promo,
.home-faq {
grid-template-columns: 1fr;
gap: 27px;
}
.editorial-cards img {
height: auto;
aspect-ratio: 1.4/1;
}
.editorial-cards > a > div {
padding: 24px;
}
.editorial-cards h3 {
font-size: 26px;
}
.process-band {
padding-block: 48px;
}
.mini-steps li {
gap: 20px;
}
.mini-steps h3 {
font-size: 22px;
}
.calculator-promo {
padding: 25px;
gap: 18px;
}
.calculator-promo h2 {
font-size: 36px;
}
.cube-art {
min-height: 230px;
}
.cube-art > span {
font-size: 85px;
}
.cube-art i {
width: 130px;
height: 130px;
}
.cube-art b {
bottom: 10px;
font-size: 9px;
}
.cards {
grid-template-columns: 1fr;
}
.card {
padding: 26px;
}
.card h3,
.card h2 {
font-size: 26px;
}
.guide-preview {
padding-top: 0;
}
.home-faq {
padding-top: 0;
}
.closing {
padding-block: 45px;
}
.closing-inner {
flex-direction: column;
align-items: start;
gap: 25px;
}
.closing h2 {
font-size: 36px;
}
.footer-grid {
gap: 35px 20px;
}
.footer-grid > div:first-child {
grid-column: 1/-1;
}
.footer-grid > div:last-child {
grid-column: 1/-1;
}
.footer-bottom {
font-size: 10px;
padding-bottom: 25px;
}
.footer-bottom > div {
gap: 14px;
}
.floating-contact {
right: 12px;
bottom: 12px;
font-size: 11px;
padding: 9px 15px;
}
.page-intro {
padding-bottom: 35px;
}
.breadcrumb {
font-size: 10px;
margin-bottom: 30px;
}
.page-intro h1 {
font-size: 39px;
line-height: 1.12;
}
.page-intro .eyebrow {
font-size: 10px;
}
.page-intro p {
font-size: 14px;
}
.page-body {
padding-block: 30px 50px;
}
.feature-image {
float: none;
width: 100%;
margin: 0 0 30px;
}
.feature-image img {
aspect-ratio: 1.4/1;
}
.prose-section {
margin-block: 28px;
}
.prose-section h2 {
font-size: 27px;
}
.prose-section p,
.prose-section li {
font-size: 15px;
}
.steps li {
gap: 20px;
padding-block: 25px;
}
.steps li > span {
min-width: 30px;
font-size: 20px;
}
.steps h2 {
font-size: 25px;
}
.contact-grid,
.form-grid {
grid-template-columns: 1fr;
}
.contact-card {
padding: 24px;
}
.contact-card strong {
font-size: 23px;
}
.gallery {
gap: 22px;
grid-template-columns: 1fr;
}
.row-top {
grid-template-columns: 1fr;
}
.dimensions {
grid-template-columns: 1fr 1fr;
}
.volume-row {
padding: 15px;
}
.volume-row input {
padding: 10px;
}
.volume-row label {
font-size: 12px;
}
.calculator > .lead {
font-size: 23px;
}
.quote-aside {
padding: 26px;
}
.quote-layout {
gap: 25px;
}
.quote-layout .actions {
align-items: stretch;
gap: 12px;
}
.quote-layout .actions .button {
width: 100%;
}
.filter {
padding: 8px 15px;
font-size: 12px;
}
dialog {
width: calc(100% - 24px);
padding: 12px;
}
dialog img {
max-height: 65dvh;
}
.button {
min-height: 48px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*:before,
*:after {
animation: none !important;
transition: none !important;
}
}
@media print {
.site-header,
.topbar,
footer,
.closing,
.floating-contact,
.actions,
.menu-toggle {
display: none;
}
.container {
width: 100%;
}
.page-body {
padding: 0;
}
body {
background: white;
color: black;
}
.feature-image {
width: 30%;
}
}
/* assets/visual.css */
/* MMT visual revision: original blue gradients and source photography. */
:root {
--navy: #0c2854;
--blue: #164fc5;
--blue-dark: #123f99;
--sky: #eaf2fc;
--paper: #f7f9fd;
--cyan: #54d3e4;
--gold: #dfbf76;
}
.topbar {
background: #e7eef9;
color: #173f78;
}
.site-header {
background: linear-gradient(110deg, #0c244b, #123a79 65%, #154b9d);
box-shadow: 0 4px 24px #061b3920;
}
.header-inner {
min-height: 88px;
}
.nav-cta {
border-radius: 30px;
}
.button {
border-radius: 7px;
box-shadow: 0 6px 18px #11377214;
}
.button:not(.light):not(.secondary):not(.nav-cta) {
background: linear-gradient(110deg, #1749b6, #1665cb);
border-color: transparent;
}
.button:not(.light):not(.secondary):not(.nav-cta):hover {
background: linear-gradient(110deg, #123d98, #1656b4);
}
.hero--immersive {
position: relative;
background: #0a2957;
color: white;
isolation: isolate;
}
.hero--immersive .hero-grid {
position: relative;
display: block;
padding-block: 80px 90px;
min-height: 690px;
}
.hero--immersive .hero-copy {
position: relative;
z-index: 3;
width: 58%;
max-width: 730px;
padding: 0;
}
.hero--immersive .eyebrow {
display: inline-block;
color: #e0efff;
border: 1px solid #b7d9ff66;
border-radius: 30px;
background: #1857a544;
backdrop-filter: blur(6px);
padding: 9px 17px;
letter-spacing: 0.12em;
font-size: 10px;
margin-bottom: 28px;
}
.hero--immersive h1 {
color: white;
font-size: clamp(48px, 5.25vw, 78px);
letter-spacing: -0.05em;
line-height: 1.06;
text-shadow: 0 2px 22px #001a361a;
}
.hero--immersive h1 em {
font: inherit;
font-style: normal;
color: #98e9f1;
}
.hero--immersive .hero-copy > p {
color: #f1f6ff;
max-width: 510px;
font-size: 16px;
margin-bottom: 30px;
}
.hero--immersive .hero-copy .button {
background: white !important;
color: #103b78;
border-color: white;
padding-inline: 26px;
}
.hero--immersive .hero-copy .button:hover {
background: #e0f5ff !important;
}
.hero--immersive .text-link {
color: white;
border-color: #bed9f6;
}
.hero--immersive .hero-bottom {
color: #f1f6ff;
font-size: 10px;
margin-top: 38px;
}
.hero--immersive .hero-bottom span:before {
color: #95e5f0;
}
.hero--immersive .hero-visual {
position: absolute;
inset: 0 calc(-1 * var(--space));
padding: 0;
z-index: 0;
}
.hero--immersive .hero-visual > picture {
position: absolute;
inset: 0;
display: block;
}
.hero--immersive .hero-visual > picture img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
object-position: 80% 48%;
filter: saturate(1.12);
}
.hero--immersive .hero-visual:before {
inset: 0;
z-index: 1;
border: 0;
background: linear-gradient(
90deg,
rgba(7, 29, 67, 0.98) 0%,
rgba(10, 49, 107, 0.94) 32%,
rgba(16, 69, 142, 0.76) 49%,
rgba(13, 57, 108, 0.14) 78%,
rgba(5, 27, 58, 0.12) 100%
);
}
.hero--immersive .hero-visual:after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(0deg, #08234d99, transparent 40%),
radial-gradient(ellipse at 32% 0, #2a78b944, transparent 55%);
pointer-events: none;
}
.hero--immersive .image-index {
left: auto;
right: 50px;
top: 30px;
z-index: 2;
background: #0b2c5d99;
border: 1px solid #ffffff55;
border-radius: 30px;
font-size: 9px;
}
.hero--immersive .visual-note {
left: auto;
right: 55px;
bottom: 50px;
z-index: 2;
background: #fffffff2;
box-shadow: 0 14px 40px #001b4530;
border-radius: 12px;
min-width: 320px;
padding: 23px;
color: #12345d;
border-left: 4px solid #d9b76d;
}
.hero--immersive .visual-note .note-icon {
color: #174fc5;
}
.hero--immersive .visual-note div > span {
color: #4d637b;
}
.service-strip {
position: relative;
background: linear-gradient(100deg, #fff, #edf4ff);
border-bottom: 1px solid #dfe5ed;
}
.service-strip .container {
padding-block: 27px;
}
.service-strip a {
font-weight: 650;
color: #153c73;
}
.service-strip a:nth-of-type(2) {
color: #126273;
}
.service-strip a:nth-of-type(3) {
color: #5b4778;
}
.photo-story {
padding-bottom: 0;
}
.photo-story-shell {
background:
radial-gradient(ellipse at 95% 85%, #117b9466, transparent 50%),
linear-gradient(115deg, #0c2854, #174fc5 70%, #176ca1);
border-radius: 22px;
position: relative;
overflow: hidden;
padding: 65px;
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 45px;
color: white;
isolation: isolate;
}
.photo-story-shell:before {
content: '';
position: absolute;
width: 520px;
height: 520px;
border: 1px solid #8fd4fa44;
border-radius: 50%;
right: -220px;
top: -280px;
box-shadow:
0 0 0 65px #8fd4fa0a,
0 0 0 130px #8fd4fa09;
z-index: -1;
}
.story-copy {
align-self: center;
}
.story-copy .eyebrow {
color: #d6f0ff;
font-size: 9px;
letter-spacing: 0.12em;
}
.story-copy h2 {
font-size: clamp(34px, 3.4vw, 49px);
color: white;
}
.story-copy p {
font-size: 15px;
color: #eef6ff;
max-width: 390px;
}
.story-copy .button {
margin-top: 7px;
}
.story-topics {
display: flex;
gap: 18px;
margin-top: 35px;
flex-wrap: wrap;
}
.story-topics span {
font-size: 9px;
letter-spacing: 0.05em;
color: #ddedff;
border-top: 1px solid #a7d2ff55;
padding-top: 10px;
}
.story-collage {
min-height: 365px;
position: relative;
margin-block: 10px 20px;
}
.story-collage figure {
margin: 0;
position: absolute;
overflow: hidden;
border-radius: 14px;
border: 4px solid #ffffff;
box-shadow: 0 18px 40px #041c5138;
background: #1f477f;
}
.story-main {
top: 0;
left: 0;
width: 87%;
transform: rotate(-3deg);
}
.story-main img {
width: 100%;
aspect-ratio: 1.48;
object-fit: cover;
}
.story-collage figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, #081c3ae8);
color: white;
padding: 30px 15px 12px;
font-size: 10px;
margin: 0;
}
.story-detail {
right: -7px;
bottom: -20px;
width: 43%;
transform: rotate(4deg);
}
.story-detail img {
width: 100%;
aspect-ratio: 0.86;
object-fit: cover;
}
.story-orbit {
position: absolute;
bottom: -10px;
left: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 128px;
height: 128px;
border-radius: 50%;
background: linear-gradient(135deg, #fbefd0, #dbc080);
color: #16315b;
font-weight: 700;
font-size: 30px;
letter-spacing: -0.03em;
border: 7px solid #ffffff15;
background-clip: padding-box;
box-shadow: 0 12px 30px #001d4929;
}
.story-orbit > span {
font-size: 7px;
letter-spacing: 0.09em;
font-weight: 600;
}
.editorial-cards > a {
border: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 35px #16356b0c;
background: linear-gradient(145deg, #fff, #eaf3ff);
}
.editorial-cards > a:nth-child(2) {
background: linear-gradient(145deg, #fff, #e6f3f6);
}
.editorial-cards > a > picture {
position: relative;
overflow: hidden;
}
.editorial-cards > a > picture:after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(0deg, #12357255, transparent 60%);
}
.editorial-cards img {
transition: transform 0.3s;
filter: saturate(1.08);
}
.editorial-cards a:hover img {
transform: scale(1.025);
}
.editorial-cards > a > div {
border-top: 4px solid #2567d6;
padding: 30px;
}
.editorial-cards > a:nth-child(2) > div {
border-top-color: #1c8194;
}
.editorial-cards div > span:not(.arrow) {
color: #234f91;
font-weight: 700;
}
.editorial-cards a:nth-child(2) div > span:not(.arrow) {
color: #216373;
}
.editorial-cards .arrow {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 50%;
background: #ffffffb8;
font-size: 23px;
}
.editorial-cards h3 {
font-size: 30px;
}
.process-band {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse at 0 100%, #12677d66, transparent 50%),
linear-gradient(115deg, #0b2754, #1749aa 80%, #155a9b);
}
.process-band .eyebrow {
color: #a6e7f0;
}
.process-band p {
color: #e1ebfc;
}
.mini-steps li {
border-bottom-color: #b9d8ff44;
}
.mini-steps li > span {
color: #a3e8ed;
background: #8ebcfa19;
border: 1px solid #9fcaff44;
width: 38px;
height: 38px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 50%;
}
.calculator-promo {
position: relative;
background:
radial-gradient(ellipse at 100% 0, #b8e7f180, transparent 60%),
linear-gradient(115deg, #e8f1ff, #f1f6ff 55%, #d9e7fc);
border: 1px solid #d0e1f6;
border-radius: 18px;
overflow: hidden;
}
.cube-art {
border-radius: 14px;
background: linear-gradient(145deg, #cfe8f9, #d4ddfc 60%, #abc9ed);
}
.cube-art > span {
color: #143e96;
}
.cube-art i {
border-color: #2a61b4;
box-shadow: 12px 15px 35px #3161ad17;
}
.card {
position: relative;
border-radius: 13px;
border: 1px solid #dbe4ee;
overflow: hidden;
box-shadow: 0 4px 20px #173c6d04;
background: linear-gradient(155deg, #fff, #f4f8ff);
}
.card:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #1b4faa, #5ba4e9);
}
.card:nth-child(3n + 2) {
background: linear-gradient(155deg, #fff, #eef8f8);
}
.card:nth-child(3n + 2):before {
background: linear-gradient(90deg, #18627b, #69c4cc);
}
.card:nth-child(3n + 3) {
background: linear-gradient(155deg, #fff, #f8f4eb);
}
.card:nth-child(3n + 3):before {
background: linear-gradient(90deg, #917039, #d9bd7d);
}
.card:hover {
box-shadow: 0 10px 30px #173c6d10;
}
.closing {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse at 100% 0, #16799177, transparent 50%),
linear-gradient(105deg, #113b88, #1755c4 65%, #1c739f);
}
.closing:after {
content: '';
position: absolute;
right: 5%;
top: -120px;
width: 370px;
height: 370px;
border: 1px solid #c6e9ff26;
border-radius: 50%;
pointer-events: none;
}
.closing-inner {
position: relative;
z-index: 1;
}
footer {
background: linear-gradient(120deg, #081b34, #0b2850);
}
.page-intro {
position: relative;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(ellipse at 100% 100%, #1b7e9a66, transparent 55%),
linear-gradient(115deg, #0c2854, #18479f 75%, #17649d);
color: white;
border: 0;
padding-bottom: 58px;
}
.page-intro:after {
content: '';
position: absolute;
right: -70px;
top: -210px;
width: 600px;
height: 600px;
border: 1px solid #b2d9ff26;
border-radius: 50%;
box-shadow:
0 0 0 80px #90c8ff09,
0 0 0 160px #90c8ff08;
z-index: -1;
}
.page-intro h1 {
color: white;
}
.page-intro .eyebrow {
color: #a9e9ef;
}
.page-intro p {
color: #f1f6ff;
}
.breadcrumb {
color: #e0edff;
}
.breadcrumb a:hover {
color: white;
text-decoration: underline;
}
.feature-image {
border-radius: 14px;
overflow: hidden;
box-shadow: 15px 15px 0 #dce9f8;
}
.feature-image img {
filter: saturate(1.08);
}
.gallery figure {
background: white;
border-radius: 14px;
overflow: hidden;
border: 1px solid #dbe5f0;
box-shadow: 0 8px 30px #173c6d09;
}
.gallery figcaption {
padding: 5px 18px 16px;
}
.gallery-open {
border-radius: 12px 12px 0 0;
}
.contact-card {
background: linear-gradient(135deg, #fff, #edf4ff);
border-radius: 12px;
border-top: 3px solid #235cc1;
}
.contact-card:nth-child(2n) {
background: linear-gradient(135deg, #fff, #eaf5f5);
border-top-color: #26778b;
}
.quote-aside {
background: linear-gradient(140deg, #e7f0ff, #dfebf4);
border: 1px solid #cdddf0;
border-radius: 14px;
}
.volume-result {
background: linear-gradient(140deg, #102f67, #1754b0);
border-radius: 14px;
box-shadow: 0 12px 30px #1e4d9617;
}
.volume-row {
border-radius: 10px;
}
.filters .active {
background: linear-gradient(110deg, #143c83, #1b5ac3);
}
@media (min-width: 1600px) {
.hero--immersive .hero-visual {
inset-inline: calc((1280px - 100vw) / 2);
}
.hero--immersive .hero-grid {
min-height: 740px;
}
}
@media (max-width: 1150px) {
.hero--immersive .hero-grid {
min-height: 650px;
padding-block: 65px 80px;
}
.hero--immersive h1 {
font-size: 64px;
}
.hero--immersive .hero-copy {
width: 63%;
}
.hero--immersive .visual-note {
right: 30px;
bottom: 35px;
min-width: 280px;
}
.photo-story-shell {
padding: 45px;
gap: 30px;
}
.story-collage {
min-height: 325px;
}
.story-orbit {
width: 100px;
height: 100px;
font-size: 27px;
}
.story-orbit > span {
font-size: 6px;
}
.story-copy h2 {
font-size: 39px;
}
}
@media (max-width: 900px) {
.header-inner {
min-height: 78px;
}
.hero--immersive .hero-grid {
min-height: 670px;
}
.hero--immersive .hero-copy {
width: 75%;
}
.hero--immersive h1 {
font-size: 58px;
}
.hero--immersive .hero-copy > p {
font-size: 15px;
}
.hero--immersive .hero-visual:before {
background: linear-gradient(90deg, #071d43fa, #0e3875e8 40%, #164e8e77 80%, #123f7255);
}
.hero--immersive .visual-note {
min-width: 260px;
padding: 17px;
bottom: 28px;
}
.hero--immersive .image-index {
right: 25px;
top: 22px;
}
.photo-story-shell {
padding: 35px;
grid-template-columns: 1fr;
gap: 30px;
}
.story-copy p {
max-width: 600px;
}
.story-collage {
max-width: 560px;
width: 100%;
justify-self: center;
min-height: 380px;
margin-block: 10px 35px;
}
.story-main {
width: 85%;
}
.story-detail {
right: 0;
bottom: -15px;
width: 36%;
}
.story-orbit {
bottom: -15px;
left: 25px;
}
.story-copy h2 {
font-size: 44px;
}
.story-topics {
margin-top: 25px;
}
.story-collage figcaption {
font-size: 11px;
}
}
@media (max-width: 620px) {
.hero--immersive .hero-grid {
padding-block: 42px 245px;
min-height: 0;
}
.hero--immersive .hero-copy {
width: 100%;
}
.hero--immersive h1 {
font-size: clamp(43px, 12.8vw, 60px);
margin-bottom: 23px;
}
.hero--immersive .eyebrow {
font-size: 8px;
letter-spacing: 0.08em;
padding: 8px 11px;
max-width: 100%;
margin-bottom: 23px;
}
.hero--immersive .small-line {
width: 19px;
margin-right: 5px;
}
.hero--immersive .hero-copy > p {
font-size: 14px;
color: #f1f6ff;
max-width: 410px;
}
.hero--immersive .actions {
gap: 18px;
}
.hero--immersive .hero-copy .button {
padding: 13px 18px;
}
.hero--immersive .hero-bottom {
font-size: 8px;
gap: 11px;
margin-top: 27px;
}
.hero--immersive .hero-visual > picture img {
object-position: 65% 95%;
height: 100%;
filter: saturate(1.1);
}
.hero--immersive .hero-visual:before {
background: linear-gradient(180deg, #092958fb 0%, #103e7fe8 43%, #114781a3 66%, #0d2f5838 90%);
}
.hero--immersive .hero-visual:after {
background: linear-gradient(0deg, #08234d66, transparent 25%);
}
.hero--immersive .image-index {
top: auto;
bottom: 192px;
right: 22px;
font-size: 8px;
}
.hero--immersive .visual-note {
right: 22px;
left: 22px;
bottom: 28px;
min-width: 0;
padding: 17px;
gap: 14px;
max-width: 390px;
}
.hero--immersive .visual-note strong {
font-size: 13px;
}
.hero--immersive .visual-note div > span {
font-size: 10px;
}
.service-strip .container {
padding-block: 23px;
}
.photo-story {
padding-bottom: 0;
}
.photo-story-shell {
border-radius: 16px;
padding: 29px 24px 20px;
gap: 20px;
}
.story-copy h2 {
font-size: 35px;
}
.story-copy p {
font-size: 14px;
}
.story-copy .eyebrow {
font-size: 8px;
letter-spacing: 0.08em;
}
.story-topics {
gap: 13px;
}
.story-topics span {
font-size: 8px;
}
.story-collage {
min-height: 280px;
margin-block: 10px 40px;
}
.story-detail {
width: 43%;
bottom: -20px;
}
.story-main {
width: 95%;
}
.story-orbit {
width: 85px;
height: 85px;
font-size: 22px;
left: 2px;
bottom: -20px;
border-width: 5px;
}
.story-orbit > span {
font-size: 5px;
}
.story-collage figcaption {
font-size: 8px;
padding: 26px 10px 10px;
}
.editorial-cards h3 {
font-size: 26px;
}
.editorial-cards > a > div {
padding: 23px;
}
.page-intro {
padding-bottom: 38px;
}
.page-intro:after {
right: -300px;
}
.feature-image {
box-shadow: 8px 8px 0 #dce9f8;
}
.closing:after {
right: -130px;
}
.calculator-promo {
border-radius: 14px;
}
.quote-aside {
border-radius: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.editorial-cards img {
transition: none;
}
.editorial-cards a:hover img {
transform: none;
}
}
.hero--immersive .hero-visual {
inset-inline: calc(50% - 50vw);
}
/* assets/navigation.css */
.header-inner {
position: relative;
}
.site-header nav {
gap: 19px;
font-size: 12px;
}
.corporate-details {
position: static;
}
.corporate-details[open] > .mega-menu {
display: grid;
grid-template-columns: 1fr 1.7fr 0.8fr;
gap: 23px;
}
.dropdown.mega-menu {
left: 0;
right: 0;
top: 100%;
width: 100%;
min-width: 0;
padding: 25px;
border-radius: 0 0 14px 14px;
box-shadow: 0 20px 45px #081e4530;
border-top: 3px solid #62c8df;
background: #fff;
}
.mega-feature {
padding: 26px;
background:
radial-gradient(ellipse at 100% 100%, #18738488, transparent 70%),
linear-gradient(125deg, #102d5b, #1b4ea8);
color: #fff;
border-radius: 10px;
}
.mega-feature .eyebrow {
font-size: 8px;
letter-spacing: 0.1em;
color: #bde9f6;
margin-bottom: 14px;
}
.mega-feature > strong {
font-size: 26px;
line-height: 1.12;
font-weight: 600;
letter-spacing: -0.035em;
display: block;
}
.mega-feature > p {
font-size: 12px;
color: #ecf4ff;
margin-top: 15px;
}
.mega-feature > a {
display: block;
padding: 10px 0;
border-top: 1px solid #ffffff55;
color: #fff;
font-weight: 650;
font-size: 12px;
}
.mega-feature > a:hover {
background: transparent;
color: #b9edf6;
}
.mega-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 12px;
align-content: start;
}
.mega-links > a {
display: flex;
gap: 12px;
align-items: start;
padding: 13px 10px !important;
border-radius: 6px;
}
.mega-links strong {
display: block;
font-size: 13px;
letter-spacing: -0.015em;
}
.mega-links small {
display: block;
font-size: 10px;
line-height: 1.5;
color: #536579;
margin-top: 4px;
}
.mega-number {
color: #2154a0;
font-size: 10px;
padding-top: 2px;
}
.mega-quick {
border-left: 1px solid #d7e4f3;
padding: 10px 0 0 19px;
}
.mega-quick .eyebrow {
font-size: 8px;
letter-spacing: 0.09em;
margin-bottom: 12px;
}
.mega-quick a {
font-size: 11px;
padding: 8px 0;
line-height: 1.6;
}
.corporate-photo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin-bottom: 35px;
}
.corporate-photo-grid img {
width: 100%;
aspect-ratio: 1.55;
object-fit: cover;
border-radius: 12px;
}
.archive-toolbar {
display: flex;
justify-content: space-between;
gap: 20px;
border-bottom: 1px solid #d5dfeb;
padding-bottom: 20px;
font-size: 13px;
color: #435c79;
}
.archive-toolbar > div {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.archive-toolbar a {
font-weight: 600;
}
.source-archive-notice {
max-width: 930px;
margin-top: 25px;
font-size: 13px;
}
.archive-entry h2 {
overflow-wrap: anywhere;
}
.archive-entry {
min-height: 260px;
}
.archive-entry > a {
font-size: 13px;
font-weight: 650;
display: block;
margin-top: auto;
}
.archive-entry > .eyebrow {
font-size: 9px;
line-height: 1.6;
margin-bottom: 0;
overflow-wrap: anywhere;
}
.pagination {
display: flex;
justify-content: center;
gap: 9px;
flex-wrap: wrap;
align-items: center;
margin-top: 45px;
}
.pagination a,
.pagination .current {
padding: 10px 16px;
border: 1px solid #a5b6cd;
background: #fff;
border-radius: 6px;
min-width: 45px;
text-align: center;
text-decoration: none;
font-size: 13px;
}
.pagination .current {
background: #143f8b;
color: #fff;
border-color: #143f8b;
}
.pagination a:hover {
background: #e6eefb;
}
@media (max-width: 1100px) {
.menu-toggle {
display: flex;
align-items: center;
gap: 18px;
background: transparent;
color: white;
border: 1px solid #96abc5;
min-height: 44px;
padding: 8px 15px;
font-size: 13px;
}
.header-inner {
min-height: 78px;
}
.site-header nav {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
max-height: calc(100dvh - 125px);
overflow: auto;
background: var(--navy);
padding: 20px;
flex-direction: column;
align-items: stretch;
gap: 12px;
border-top: 1px solid #5d7290;
}
.site-header nav.open {
display: flex;
}
.site-header nav > a {
padding-block: 9px;
}
.site-header nav .nav-cta {
align-self: start;
color: var(--navy);
}
.dropdown {
position: static;
box-shadow: none;
background: #19395d;
color: white;
border-color: #275fa4;
margin-bottom: 10px;
}
.dropdown a:hover {
background: #254b78;
color: #fff;
}
.corporate-details[open] > .mega-menu {
display: block;
}
.dropdown.mega-menu {
position: static;
width: 100%;
padding: 15px;
border-radius: 8px;
background: #f7faff;
color: #172b43;
margin-top: 6px;
}
.mega-feature {
padding: 23px;
margin-bottom: 15px;
}
.mega-feature > strong {
font-size: 24px;
}
.mega-links > a:hover,
.mega-links > a:focus-visible {
background: #e3edf9 !important;
color: #143e81 !important;
}
.mega-quick {
border-left: 0;
border-top: 1px solid #d7e4f3;
margin-top: 15px;
padding: 17px 0 0;
}
.mega-quick a {
display: inline-block;
margin-right: 18px;
}
.mega-quick a:hover {
background: #e3edf9 !important;
color: #143e81 !important;
}
}
@media (max-width: 620px) {
.mega-links {
grid-template-columns: 1fr;
gap: 0;
}
.mega-links > a {
padding-block: 12px !important;
border-bottom: 1px solid #d7e4f3;
}
.mega-links small {
font-size: 11px;
}
.mega-links strong {
font-size: 14px;
}
.mega-number {
font-size: 11px;
}
.mega-quick a {
display: block;
font-size: 12px;
}
.corporate-photo-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.dropdown.mega-menu {
padding: 12px;
}
.mega-feature .eyebrow {
font-size: 8px;
}
}
@media (max-width: 620px) {
.archive-toolbar {
flex-direction: column;
gap: 12px;
}
.archive-toolbar > div {
gap: 15px;
}
.pagination a,
.pagination .current {
padding: 9px 12px;
}
.archive-entry {
min-height: 220px;
}
}
/* assets/articles.css */
.original-article {
max-width: 900px;
margin-inline: auto;
}
.original-article > .lead {
font-size: 20px;
line-height: 1.75;
margin-bottom: 30px;
}
.original-article .prose-section {
max-width: 900px;
margin-block: 40px;
}
.original-article .prose-section p {
line-height: 1.85;
}
.article-meta {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.article-meta > span {
font-size: 10px;
letter-spacing: 0.05em;
color: #234e87;
padding: 7px 12px;
border: 1px solid #c7d9ee;
border-radius: 25px;
background: #eef4fc;
}
.article-back {
font-size: 12px;
margin-bottom: 30px;
}
.article-toc {
display: flex;
gap: 18px;
flex-wrap: wrap;
padding-block: 19px;
border-block: 1px solid #ccdced;
font-size: 12px;
}
.article-toc a {
text-decoration: none;
color: #214e90;
font-weight: 650;
}
.original-article .example-case {
padding: 30px;
background: linear-gradient(125deg, #e8f1ff, #eef7f9);
border: 1px solid #c8dbef;
border-radius: 14px;
}
.example-case .eyebrow {
font-size: 9px;
letter-spacing: 0.08em;
margin-bottom: 15px;
}
.example-case h2 {
font-size: 28px;
}
.table-scroll {
max-width: 100%;
overflow-x: auto;
margin-block: 24px;
outline-offset: 4px;
}
.table-scroll table {
border-collapse: collapse;
width: 100%;
min-width: 550px;
background: white;
font-size: 13px;
line-height: 1.6;
}
.table-scroll caption {
text-align: left;
font-size: 12px;
color: #425b78;
margin-bottom: 10px;
}
.table-scroll th,
.table-scroll td {
padding: 13px 14px;
border: 1px solid #cbd9e9;
text-align: left;
vertical-align: top;
}
.table-scroll thead th {
background: #143e79;
color: white;
font-size: 12px;
}
.table-scroll tbody th {
font-weight: 600;
color: #203d61;
background: #f5f8fc;
}
.article-next {
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
margin-top: 25px;
font-size: 13px;
}
.related-articles {
margin-top: 60px;
border-top: 1px solid #cfdeec;
padding-top: 40px;
}
.related-articles > h2 {
font-size: 30px;
}
.related-articles .card h3 {
font-size: 22px;
line-height: 1.25;
}
.related-articles .card .eyebrow {
font-size: 9px;
margin-bottom: 0;
}
.archive-intro {
max-width: 900px;
font-size: 14px;
margin-top: 24px;
}
.article-search {
max-width: 1100px;
}
.article-search label {
display: block;
margin-bottom: 10px;
}
.search-controls {
display: flex;
gap: 12px;
}
.search-controls input {
flex: 1;
}
.search-controls button {
flex-shrink: 0;
}
.article-search #search-help {
font-size: 12px;
margin-top: 10px;
}
.article-search #article-search-status {
color: #224978;
font-weight: 650;
margin-top: 28px;
font-size: 14px;
}
@media (max-width: 620px) {
.original-article > .lead {
font-size: 17px;
}
.original-article .example-case {
padding: 20px;
}
.original-article .prose-section {
margin-block: 30px;
}
.example-case h2 {
font-size: 25px;
}
.article-toc {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px;
font-size: 11px;
}
.article-meta {
gap: 8px;
}
.article-meta > span {
font-size: 9px;
}
.search-controls {
flex-direction: column;
}
.table-scroll table {
font-size: 12px;
min-width: 500px;
}
.original-article .prose-section p {
line-height: 1.8;
}
.article-next {
align-items: start;
flex-direction: column;
gap: 17px;
}
.related-articles {
padding-top: 30px;
margin-top: 40px;
}
.related-articles .card h3 {
font-size: 24px;
}
}
/* assets/callback.css */
.site-header .nav-details > summary {
display: inline-flex;
align-items: center;
gap: 9px;
}
.site-header .nav-details > summary:after {
content: '';
display: block;
width: 6px;
height: 6px;
margin: 0 1px 3px 0;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 0.18s ease;
}
.site-header .nav-details[open] > summary:after {
transform: translateY(3px) rotate(225deg);
}
.callback-section {
padding: 55px 0 12px;
background: linear-gradient(180deg, #edf3fb 0%, #f7f9fc 100%);
}
.callback-shell {
display: grid;
grid-template-columns: 0.72fr 1.6fr;
background: #fff;
border: 1px solid #d9e5f4;
border-radius: 22px;
box-shadow: 0 22px 65px #164c8420;
overflow: hidden;
}
.callback-intro {
position: relative;
isolation: isolate;
padding: 45px 35px;
display: flex;
flex-direction: column;
align-items: flex-start;
background:
radial-gradient(ellipse at 20% 100%, #167c9690, transparent 65%),
linear-gradient(145deg, #0d2b58 8%, #175ac6 90%);
color: #fff;
overflow: hidden;
}
.callback-intro:before,
.callback-intro:after {
content: '';
position: absolute;
z-index: -1;
width: 360px;
height: 360px;
border: 1px solid #a7e0ff30;
border-radius: 50%;
right: -240px;
top: 20px;
}
.callback-intro:after {
width: 460px;
height: 460px;
right: -290px;
top: -30px;
}
.callback-intro > .eyebrow {
color: #bcf1ff;
font-size: 9px;
line-height: 1.7;
letter-spacing: 0.13em;
margin-bottom: 27px;
}
.callback-intro h2 {
font-size: clamp(39px, 3.8vw, 58px);
font-weight: 600;
letter-spacing: -0.045em;
line-height: 1.08;
margin: 0 0 24px;
}
.callback-intro h2 em {
color: #9ee6f7;
font-style: normal;
}
.callback-intro > p {
font-size: 14px;
line-height: 1.85;
color: #eef6ff;
max-width: 245px;
}
.callback-visual {
display: flex;
align-items: center;
width: 100%;
margin: 34px 0;
gap: 13px;
}
.callback-visual > span {
display: grid;
place-items: center;
width: 47px;
height: 47px;
border: 1px solid #bedffd66;
border-radius: 50%;
font-size: 12px;
font-weight: 600;
background: #ffffff0c;
}
.callback-visual > i {
height: 1px;
flex: 1;
position: relative;
background: linear-gradient(90deg, #a8ddff, #a8ddff44);
}
.callback-visual > i:after {
content: '';
position: absolute;
right: 0;
top: -3px;
width: 7px;
height: 7px;
border-top: 1px solid #bdeaff;
border-right: 1px solid #bdeaff;
transform: rotate(45deg);
}
.callback-contact {
margin-top: auto;
border-top: 1px solid #bbe3ff40;
padding-top: 25px;
width: 100%;
}
.callback-contact > span {
display: block;
font-size: 8px;
letter-spacing: 0.13em;
color: #cbeafa;
margin-bottom: 10px;
}
.callback-contact > a {
font-size: 18px;
color: white;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.callback-form {
padding: 34px 36px 24px;
min-width: 0;
}
.callback-form-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 26px;
gap: 16px;
}
.callback-form-head .eyebrow {
font-size: 9px;
letter-spacing: 0.12em;
color: #1756a7;
margin: 0;
}
.callback-form-head p {
font-size: 12px;
color: #536a85;
margin: 0;
}
.callback-person {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 19px;
}
.callback-field {
min-width: 0;
}
.callback-field label {
display: block;
color: #244768;
font-size: 12px;
font-weight: 600;
margin: 0 0 8px;
}
.callback-form input:not([type='checkbox']),
.callback-form select {
width: 100%;
height: 48px;
border: 1px solid #b9cde3;
border-radius: 7px;
background: #f9fbfe;
color: #19395d;
font: inherit;
font-size: 13px;
padding: 10px 12px;
min-width: 0;
box-shadow: none;
}
.callback-form input::placeholder {
color: #64758b;
opacity: 1;
}
.callback-form :is(input, select):focus-visible {
outline: 3px solid #5a96df;
outline-offset: 2px;
border-color: #1d63b5;
background: white;
}
.callback-form input[aria-invalid='true'] {
border-color: #ac2942;
}
.callback-phone {
display: grid;
grid-template-columns: 128px minmax(0, 1fr);
gap: 7px;
}
.callback-phone select {
font-size: 11px;
padding-left: 8px;
}
.callback-field > small,
.callback-help {
display: block;
font-size: 10px;
line-height: 1.65;
color: #5a6d85;
margin-top: 7px;
}
.callback-field-error {
color: #ad2742 !important;
font-size: 11px;
line-height: 1.6;
display: block;
}
.callback-field-error:empty {
display: none;
}
.callback-route-heading {
display: flex;
align-items: center;
justify-content: space-between;
margin: 27px 0 16px;
border-top: 1px solid #dfe8f3;
padding-top: 21px;
}
.callback-route-heading h3 {
font-size: 15px;
margin: 0;
color: #1c436f;
}
.callback-route-heading > span {
display: grid;
place-items: center;
background: #e9f3fc;
color: #1d62b4;
border-radius: 50%;
width: 27px;
height: 27px;
}
.callback-route {
margin: 0 0 16px;
padding: 0;
border: 0;
min-width: 0;
}
.callback-route legend {
font-size: 12px;
font-weight: 650;
color: #254467;
margin-bottom: 11px;
padding: 0;
}
.callback-route legend > span {
font-size: 9px;
color: #2162a7;
background: #eaf3ff;
padding: 5px 6px;
border-radius: 4px;
margin-right: 8px;
}
.callback-route-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 19px;
}
.callback-help {
margin: 1px 0 20px;
}
.callback-check {
display: flex;
align-items: flex-start;
gap: 10px;
color: #3a5574;
font-size: 10px;
line-height: 1.7;
cursor: pointer;
}
.callback-check input {
margin: 3px 0 0;
flex: 0 0 16px;
width: 16px;
height: 16px;
accent-color: #1657ad;
}
.callback-check a {
color: #184e96;
text-decoration: underline;
}
.callback-submit-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
margin-top: 21px;
}
.callback-submit-row > p {
font-size: 10px;
line-height: 1.7;
color: #5a6d85;
max-width: 230px;
margin: 0;
}
.callback-form .callback-submit {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
white-space: nowrap;
background: linear-gradient(110deg, #106443, #13835b);
color: #fff;
border: 1px solid #106443;
border-radius: 8px;
font-size: 12px;
padding: 15px 18px;
box-shadow: 0 7px 18px #0f75412b;
}
.callback-form .callback-submit:hover {
background: #0e5f40;
transform: translateY(-1px);
}
.callback-submit:disabled {
opacity: 0.7;
cursor: wait;
}
.callback-status {
color: #244c77;
font-size: 12px;
line-height: 1.7;
margin-top: 14px;
}
.callback-status:empty {
display: none;
}
.callback-form #callback-fallback {
font-size: 12px;
}
.callback-data-note {
margin-top: 18px;
border-top: 1px solid #e1e8f0;
padding-top: 8px;
color: #566c84;
font-size: 10px;
}
.callback-data-note summary {
font-size: 10px;
cursor: pointer;
width: fit-content;
}
.callback-data-note p {
font-size: 10px;
line-height: 1.7;
margin: 8px 0;
}
.callback-form [hidden] {
display: none !important;
}
@media (max-width: 1100px) {
.callback-shell {
grid-template-columns: 0.7fr 1.5fr;
}
.callback-intro {
padding: 35px 25px;
}
.callback-form {
padding: 29px 25px;
}
.callback-person {
grid-template-columns: 1fr;
}
.callback-submit-row {
align-items: stretch;
flex-direction: column;
gap: 14px;
}
.callback-submit-row > p {
max-width: none;
}
.callback-form .callback-submit {
align-self: flex-start;
}
.callback-contact > a {
font-size: 16px;
}
}
@media (max-width: 700px) {
.callback-section {
padding: 30px 0 8px;
}
.callback-shell {
grid-template-columns: 1fr;
border-radius: 16px;
}
.callback-intro {
padding: 29px 24px;
display: block;
}
.callback-intro > .eyebrow {
font-size: 8px;
margin-bottom: 18px;
}
.callback-intro h2 {
font-size: 42px;
margin-bottom: 16px;
}
.callback-intro h2 br {
display: none;
}
.callback-intro > p {
max-width: 260px;
font-size: 13px;
}
.callback-visual {
position: absolute;
right: 24px;
bottom: 33px;
width: 95px;
gap: 6px;
margin: 0;
}
.callback-visual > span {
width: 31px;
height: 31px;
font-size: 8px;
}
.callback-contact {
width: auto;
padding-top: 16px;
margin-top: 20px;
padding-right: 100px;
}
.callback-contact > span {
font-size: 7px;
letter-spacing: 0.06em;
}
.callback-contact > a {
font-size: 15px;
}
.callback-form {
padding: 25px 22px;
}
.callback-form-head {
align-items: flex-start;
flex-direction: column;
gap: 8px;
margin-bottom: 21px;
}
.callback-person {
gap: 17px;
}
.callback-route-fields {
gap: 13px;
grid-template-columns: 1fr 1fr;
}
.callback-form input:not([type='checkbox']),
.callback-form select {
font-size: 16px;
padding: 10px 9px;
}
.callback-phone {
grid-template-columns: 125px minmax(0, 1fr);
}
.callback-phone select {
font-size: 11px;
}
.callback-form .callback-submit {
width: 100%;
font-size: 13px;
}
.callback-check {
font-size: 11px;
}
.callback-help,
.callback-field > small,
.callback-submit-row > p {
font-size: 11px;
}
}
@media (max-width: 370px) {
.callback-route-fields {
grid-template-columns: 1fr;
}
.callback-intro {
padding-inline: 20px;
}
.callback-form {
padding-inline: 18px;
}
.callback-intro h2 {
font-size: 37px;
}
.callback-visual {
display: none;
}
.callback-contact {
padding-right: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.site-header .nav-details > summary:after {
transition: none;
}
.callback-form .callback-submit:hover {
transform: none;
}
}
.callback-check input {
padding: 0;
min-height: 0;
align-self: flex-start;
}
#callback-submit {
background: linear-gradient(110deg, #106443, #13835b);
border-color: #106443;
}
#callback-submit:hover {
background: #0e5f40;
}
@media (max-width: 700px) {
.callback-intro h2 br {
display: initial;
}
}
/* assets/countries.css */
.countries-section {
position: relative;
isolation: isolate;
background:
radial-gradient(ellipse at 95% 0%, #1f93aa6b, transparent 47%),
linear-gradient(125deg, #102d56 0%, #163f89 55%, #1758ad 100%);
color: #fff;
margin-top: 65px;
padding: 64px 0 36px;
overflow: hidden;
}
.countries-section:before,
.countries-section:after {
content: '';
position: absolute;
border: 1px solid #9edcff23;
border-radius: 50%;
width: 900px;
height: 900px;
right: -370px;
top: -520px;
pointer-events: none;
z-index: -1;
}
.countries-section:after {
width: 1050px;
height: 1050px;
top: -595px;
right: -445px;
}
.countries-heading {
display: flex;
justify-content: space-between;
gap: 30px;
align-items: flex-end;
margin-bottom: 35px;
}
.countries-heading .eyebrow {
font-size: 9px;
letter-spacing: 0.13em;
color: #afe8f8;
margin-bottom: 19px;
}
.countries-heading h2 {
font-size: clamp(36px, 4.3vw, 63px);
line-height: 1.08;
letter-spacing: -0.045em;
margin: 0;
}
.countries-heading h2 em {
font-style: normal;
color: #a6e7fa;
}
.countries-heading-end {
padding-bottom: 5px;
max-width: 350px;
}
.countries-heading-end > p {
font-size: 14px;
line-height: 1.8;
color: #f2f6ff;
margin: 0 0 17px;
}
.countries-heading-end > a {
color: #fff;
font-size: 12px;
text-underline-offset: 5px;
}
.countries-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin: 0 0 20px;
padding-top: 22px;
border-top: 1px solid #bfdcff40;
}
.countries-controls > p {
font-size: 12px;
color: #d5e8ff;
margin: 0;
}
.countries-controls > div {
display: flex;
gap: 10px;
align-items: center;
}
.countries-controls span {
font-size: 11px;
color: #d5e8ff;
margin-right: 10px;
font-variant-numeric: tabular-nums;
}
.countries-controls button {
width: 43px;
height: 43px;
display: grid;
place-items: center;
border: 1px solid #b6d4fb88;
border-radius: 50%;
color: #fff;
background: #ffffff0d;
font-size: 19px;
line-height: 1;
}
.countries-controls button:hover {
background: #fff;
color: #164580;
}
.countries-controls button:disabled {
opacity: 0.35;
cursor: default;
}
.countries-controls button[hidden] {
display: none;
}
.countries-track {
display: flex;
gap: 21px;
list-style: none;
padding: 4px 0 22px;
margin: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-color: #b9e4fa #ffffff1a;
scrollbar-width: thin;
scroll-padding-inline: 1px;
}
.countries-track > .country-slide {
flex: 0 0 calc((100% - 63px) / 3.5);
min-width: 0;
scroll-snap-align: start;
list-style: none;
}
.country-card {
height: 100%;
display: flex;
flex-direction: column;
border-radius: 13px;
overflow: hidden;
background: #fff;
border: 1px solid #d6e3f0;
color: #14375e;
text-decoration: none;
transition: transform 0.2s;
box-shadow: 0 10px 30px #031e4c20;
}
.country-card:hover {
transform: translateY(-3px);
}
.country-card-flag {
position: relative;
background: linear-gradient(140deg, #edf3fa, #f8fbff);
padding: 24px 30px 21px;
overflow: hidden;
}
.country-card-flag > img {
display: block;
width: 100%;
height: 135px;
object-fit: contain;
filter: drop-shadow(0 6px 9px #112b4925);
}
.country-code {
position: absolute;
top: 12px;
left: 12px;
font-size: 8px;
background: #fff;
color: #345474;
border: 1px solid #dbe5f0;
border-radius: 20px;
padding: 3px 6px;
letter-spacing: 0.08em;
}
.country-card-copy {
display: flex;
flex-direction: column;
flex: 1;
padding: 22px 23px 20px;
border-top: 1px solid #e3eaf3;
}
.country-card-label {
font-size: 8px;
letter-spacing: 0.1em;
color: #255b99;
margin-bottom: 12px;
}
.country-card h3 {
font-size: 25px;
line-height: 1.18;
letter-spacing: -0.03em;
font-weight: 600;
margin: 0 0 20px;
overflow-wrap: anywhere;
}
.country-card h3 > span {
display: block;
font-size: 13px;
letter-spacing: 0;
font-weight: 400;
color: #536a85;
margin-top: 6px;
line-height: 1.5;
}
.country-card-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 11px;
color: #174f99;
font-weight: 600;
margin-top: auto;
padding-top: 15px;
border-top: 1px solid #dce7f4;
}
.country-card-link > span {
font-size: 18px;
}
.countries-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
margin-top: 19px;
}
.countries-bottom > span {
font-size: 8px;
letter-spacing: 0.08em;
color: #b7ddfb;
}
.countries-bottom > p {
font-size: 10px;
color: #e4efff;
margin: 0;
}
.countries-track:focus-visible {
outline: 3px solid #b8e8fc;
outline-offset: 6px;
}
.countries-section :is(button, a):focus-visible {
outline: 3px solid #9ee8ff;
outline-offset: 4px;
}
.countries-section .country-card:focus-visible {
outline: 3px solid #99e6ff;
outline-offset: -4px;
}
.country-banner {
display: grid;
grid-template-columns: 230px 1fr;
gap: 40px;
align-items: center;
padding: 32px;
background: linear-gradient(125deg, #e9f3fc, #f3f9fb);
border: 1px solid #d4e3f3;
border-radius: 15px;
margin-bottom: 45px;
}
.country-banner > img {
width: 230px;
height: 173px;
object-fit: contain;
filter: drop-shadow(0 6px 12px #16355522);
}
.country-banner .eyebrow {
font-size: 9px;
color: #255a96;
margin-bottom: 15px;
}
.country-banner p {
font-size: 16px;
line-height: 1.8;
margin: 0 0 20px;
max-width: 690px;
}
.country-banner .button {
font-size: 12px;
}
.country-reading {
display: grid;
grid-template-columns: 195px minmax(0, 1fr);
gap: 55px;
align-items: start;
}
.country-toc {
position: sticky;
top: 125px;
display: flex;
flex-direction: column;
gap: 14px;
border-left: 2px solid #cbd9e9;
padding-left: 20px;
font-size: 12px;
line-height: 1.6;
}
.country-toc strong {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #335675;
margin-bottom: 4px;
}
.country-toc a {
color: #29558a;
text-decoration: none;
}
.country-toc a:hover {
text-decoration: underline;
}
.country-article {
max-width: 850px;
min-width: 0;
}
.country-article p {
font-size: 16px;
line-height: 1.95;
color: #3c5675;
margin: 0 0 21px;
}
.country-article .country-lead {
font-size: 19px;
line-height: 1.85;
color: #244968;
margin-bottom: 40px;
}
.country-prose-section {
margin-bottom: 38px;
scroll-margin-top: 130px;
}
.country-prose-section h2 {
font-size: 29px;
line-height: 1.25;
letter-spacing: -0.025em;
margin: 0 0 20px;
color: #203d61;
}
.country-end {
margin-top: 42px;
padding: 35px;
background: linear-gradient(125deg, #e8f1ff, #f1f8fb);
border: 1px solid #cfdfef;
border-radius: 13px;
}
.country-end h2 {
font-size: 32px;
}
.country-end .eyebrow {
font-size: 9px;
}
.country-end p {
font-size: 15px;
max-width: 780px;
}
.country-end .actions > a {
font-size: 12px;
}
.country-related {
margin-top: 50px;
}
.country-related > h2 {
font-size: 29px;
}
.country-related .card img {
width: 85px;
height: 64px;
object-fit: contain;
align-self: start;
}
.country-related h3 {
font-size: 20px;
}
.country-related > .text-link {
display: inline-block;
margin-top: 23px;
font-size: 13px;
}
.country-directory {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 25px;
list-style: none;
padding: 0;
margin: 35px 0;
}
.country-directory .country-slide {
list-style: none;
}
.country-directory .country-card h3 {
font-size: 24px;
}
.country-directory-lead {
max-width: 900px;
font-size: 17px;
line-height: 1.9;
}
@media (max-width: 1100px) {
.countries-track > .country-slide {
flex-basis: calc((100% - 42px) / 2.7);
}
.country-card-flag {
padding: 23px 24px 20px;
}
.country-card-flag > img {
height: 125px;
}
.country-card-copy {
padding: 19px;
}
.country-card h3 {
font-size: 22px;
}
.country-reading {
grid-template-columns: 160px minmax(0, 1fr);
gap: 32px;
}
.country-directory {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.countries-section {
padding-top: 42px;
margin-top: 40px;
}
.countries-heading {
align-items: start;
flex-direction: column;
gap: 23px;
margin-bottom: 26px;
}
.countries-heading h2 {
font-size: 43px;
}
.countries-heading .eyebrow {
font-size: 8px;
max-width: 290px;
line-height: 1.8;
margin-bottom: 17px;
}
.countries-heading-end > p {
font-size: 13px;
margin-bottom: 12px;
}
.countries-heading-end > p br {
display: none;
}
.countries-heading-end > a {
font-size: 11px;
}
.countries-controls {
gap: 14px;
padding-top: 18px;
}
.countries-controls > p {
font-size: 10px;
max-width: 130px;
line-height: 1.6;
}
.countries-controls span {
font-size: 10px;
margin-right: 2px;
}
.countries-controls button {
width: 39px;
height: 39px;
font-size: 18px;
}
.countries-track {
gap: 15px;
}
.countries-track > .country-slide {
flex-basis: calc((100% - 15px) / 1.35);
}
.country-card-flag {
padding: 24px 30px 22px;
}
.country-card-flag > img {
height: 130px;
}
.country-card h3 {
font-size: 26px;
}
.country-card-copy {
padding: 22px;
}
.countries-bottom {
align-items: start;
flex-direction: column;
gap: 12px;
margin-top: 17px;
}
.countries-bottom > span {
font-size: 7px;
}
.countries-bottom > p {
font-size: 10px;
}
.country-banner {
grid-template-columns: 1fr;
gap: 25px;
padding: 25px;
}
.country-banner > img {
width: 190px;
height: 143px;
}
.country-banner p {
font-size: 15px;
}
.country-reading {
display: flex;
flex-direction: column;
gap: 30px;
}
.country-toc {
position: static;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 20px;
font-size: 11px;
}
.country-toc strong {
grid-column: 1/-1;
}
.country-article .country-lead {
font-size: 17px;
}
.country-article p {
font-size: 15px;
line-height: 1.95;
}
.country-prose-section h2 {
font-size: 26px;
}
.country-end {
padding: 25px;
}
.country-end h2 {
font-size: 28px;
}
.country-directory {
grid-template-columns: 1fr 1fr;
gap: 17px;
}
.country-directory .country-card-flag {
padding: 22px 14px;
}
.country-directory .country-card-flag > img {
height: 95px;
}
.country-directory .country-card-copy {
padding: 17px;
}
.country-directory .country-card h3 {
font-size: 21px;
}
}
@media (max-width: 480px) {
.country-directory {
grid-template-columns: 1fr;
}
.country-directory .country-card-flag > img {
height: 150px;
}
.country-card-label {
font-size: 7px;
}
}
@media (prefers-reduced-motion: reduce) {
.country-card {
transition: none;
}
.country-card:hover {
transform: none;
}
.countries-track {
scroll-behavior: auto;
}
}
/* assets/page-system.css */
.page-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 38px;
align-items: start;
}
.page-main,
.page-content {
min-width: 0;
}
.page-content .country-reading {
display: block;
}
.page-content .country-article {
max-width: none;
}
.page-content .original-article {
max-width: none;
}
.page-content .country-directory {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.page-content .quote-layout {
grid-template-columns: minmax(0, 1.55fr) minmax(190px, 1fr);
gap: 24px;
}
.page-content .calculator {
grid-template-columns: minmax(0, 1.65fr) minmax(190px, 1fr);
gap: 24px;
}
.page-content .country-banner {
grid-template-columns: 190px minmax(0, 1fr);
gap: 27px;
padding: 25px;
}
.page-content .country-banner > img {
width: 190px;
height: 143px;
}
.page-content .cards {
gap: 20px;
}
.page-content .card h2,
.page-content .card h3 {
overflow-wrap: anywhere;
}
.page-toc {
margin: 0 0 35px;
border: 1px solid #cfdfef;
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 7px 20px #1a497c07;
}
.page-toc summary {
display: flex;
align-items: center;
gap: 14px;
list-style: none;
padding: 19px 22px;
cursor: pointer;
color: #1c436f;
background: linear-gradient(110deg, #edf4ff, #f5f7fa);
}
.page-toc summary::-webkit-details-marker {
display: none;
}
.page-toc summary > span {
font-size: 16px;
font-weight: 650;
}
.page-toc summary > small {
font-size: 10px;
color: #526e8c;
margin-left: auto;
white-space: nowrap;
}
.page-toc summary > i {
width: 7px;
height: 7px;
border-right: 1.5px solid #245185;
border-bottom: 1.5px solid #245185;
transform: rotate(45deg);
margin: 0 2px 4px 0;
}
.page-toc details[open] > summary > i {
transform: translateY(3px) rotate(225deg);
}
.toc-scroll {
max-height: 320px;
overflow: auto;
scrollbar-width: thin;
}
.page-toc table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
line-height: 1.6;
}
.page-toc th {
background: #f7fafe;
color: #395e84;
font-size: 10px;
letter-spacing: 0.03em;
text-align: left;
padding: 10px 18px;
border-bottom: 1px solid #dfebf4;
}
.page-toc th:first-child,
.page-toc td:first-child {
width: 60px;
color: #54718e;
font-size: 10px;
}
.page-toc td {
padding: 10px 18px;
border-bottom: 1px solid #e3edf9;
}
.page-toc tbody tr:last-child td {
border: 0;
}
.page-toc a {
text-decoration: none;
color: #244d7b;
}
.page-toc a:hover {
text-decoration: underline;
}
.page-toc .toc-level-1 a {
font-weight: 650;
color: #183f6d;
}
.page-toc .toc-level-3 td:last-child {
padding-left: 30px;
}
.page-toc .toc-level-4 td:last-child {
padding-left: 42px;
}
.page-content :is(h2, h3, h4, h5, h6) {
scroll-margin-top: 130px;
}
.page-sidebar {
min-width: 0;
position: sticky;
top: 110px;
max-height: calc(100vh - 130px);
overflow: auto;
scrollbar-width: thin;
padding: 1px 3px 12px;
}
.sidebar-shell {
border: 1px solid #d6e3f0;
border-radius: 14px;
background: #fff;
padding: 17px;
box-shadow: 0 10px 32px #143b6c12;
}
.sidebar-header {
padding: 7px 5px 18px;
}
.sidebar-header .eyebrow {
font-size: 8px;
letter-spacing: 0.09em;
color: #255a96;
margin-bottom: 12px;
}
.sidebar-header > p {
font-size: 23px;
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.03em;
color: #163d67;
margin: 0;
}
.sidebar-action {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 15px 12px;
border: 1px solid transparent;
border-radius: 8px;
text-decoration: none;
margin-bottom: 11px;
color: white;
min-height: 74px;
box-sizing: border-box;
}
.sidebar-action > span:nth-child(2) {
flex: 1;
min-width: 0;
}
.sidebar-action small {
display: block;
font-size: 7px;
letter-spacing: 0.08em;
margin-bottom: 5px;
color: #ecf4ff;
}
.sidebar-action strong {
display: block;
font-size: 14px;
line-height: 1.3;
font-weight: 600;
}
.sidebar-action > span:last-child {
font-size: 15px;
}
.sidebar-icon {
display: grid;
place-items: center;
flex: 0 0 29px;
width: 29px;
height: 29px;
border-radius: 50%;
background: #ffffff20;
font-size: 17px;
}
.sidebar-call {
background: linear-gradient(115deg, #102f5c, #1854a8);
}
.sidebar-call strong {
font-size: 21px;
letter-spacing: -0.02em;
}
.sidebar-quote {
background: linear-gradient(110deg, #1c60b1, #187a94);
}
.sidebar-whatsapp {
background: linear-gradient(110deg, #116247, #17805a);
}
.sidebar-action:hover {
filter: brightness(1.08);
}
.sidebar-certificate {
border-top: 1px solid #e1e6ed;
margin-top: 22px;
padding-top: 20px;
}
.sidebar-certificate h2 {
font-size: 19px;
letter-spacing: -0.025em;
color: #163f6a;
margin: 0 0 7px;
}
.sidebar-certificate > p {
font-size: 8px;
color: #416b92;
letter-spacing: 0.09em;
margin: 0 0 13px;
}
.certificate-preview {
display: block;
width: 100%;
padding: 9px;
border: 1px solid #cfdfef;
border-radius: 8px;
background: #f5f9fd;
color: #245489;
overflow: hidden;
}
.certificate-preview > img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
border: 1px solid #e0e7ef;
background: #fff;
}
.certificate-preview > span {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 3px 2px;
font-size: 10px;
font-weight: 600;
}
.certificate-dialog {
width: min(1160px, calc(100vw - 40px));
max-width: calc(100vw - 40px);
max-height: calc(100dvh - 40px);
padding: 0;
border: 1px solid #bdcee1;
border-radius: 14px;
background: #fff;
color: #1c3d60;
overflow: hidden;
box-shadow: 0 30px 100px #03142b80;
}
.certificate-dialog::backdrop {
background: #041831cf;
backdrop-filter: blur(3px);
}
.certificate-dialog-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 18px 22px;
background: linear-gradient(120deg, #102e58, #1758ad);
color: #fff;
}
.certificate-dialog-bar > div > span {
font-size: 8px;
letter-spacing: 0.12em;
color: #c6e7fb;
}
.certificate-dialog-bar h2 {
font-size: 21px;
margin: 5px 0 0;
line-height: 1.3;
}
.certificate-dialog-actions {
display: flex;
gap: 10px;
align-items: center;
}
.certificate-dialog-actions button {
background: #fff;
color: #254467;
border: 1px solid #d6e3f0;
border-radius: 6px;
padding: 9px 13px;
font-size: 12px;
white-space: nowrap;
}
.certificate-viewport {
max-height: calc(100dvh - 138px);
overflow: auto;
padding: 17px;
background: #edf3f9;
overscroll-behavior: contain;
touch-action: pan-x pan-y;
}
.certificate-viewport img {
display: block;
width: 100%;
max-width: 1115px;
height: auto;
margin: auto;
background: #fff;
}
.certificate-viewport.is-zoomed img {
width: 1672px;
max-width: none;
margin: 0;
}
.document-view-open {
overflow: hidden;
}
.depth-content {
margin-top: 48px;
border-top: 1px solid #d9e4ef;
padding-top: 25px;
}
.depth-section {
margin-bottom: 38px;
max-width: 920px;
}
.depth-section h2 {
font-size: 29px;
line-height: 1.3;
letter-spacing: -0.025em;
color: #183f6e;
margin: 0 0 19px;
}
.depth-section p {
font-size: 15px;
line-height: 1.95;
color: #3b5777;
margin: 0 0 20px;
}
.home-depth {
max-width: 1280px;
margin: 50px auto 0;
padding: 45px 24px 25px;
}
.home-depth .depth-section {
max-width: 920px;
}
.home-toc {
padding-block: 12px;
}
.home-toc .page-toc {
margin: 0;
border-radius: 7px;
}
.home-toc .page-toc summary {
padding-block: 12px;
}
.home-toc .page-toc summary > span {
font-size: 12px;
}
.page-sidebar :is(a, button):focus-visible,
.page-toc :is(a, summary, .toc-scroll):focus-visible,
.certificate-dialog :is(button, .certificate-viewport):focus-visible {
outline: 3px solid #5598de;
outline-offset: 3px;
}
@media (max-width: 1200px) {
.page-body {
grid-template-columns: minmax(0, 1fr) 260px;
gap: 26px;
}
.sidebar-shell {
padding: 14px;
}
.sidebar-action {
padding-inline: 10px;
gap: 8px;
}
.sidebar-action strong {
font-size: 13px;
}
.sidebar-call strong {
font-size: 20px;
}
.page-content .cards {
grid-template-columns: 1fr 1fr;
}
.page-content .quote-layout,
.page-content .calculator {
grid-template-columns: 1fr;
}
.page-content .country-directory {
grid-template-columns: 1fr 1fr;
}
.page-content .country-banner {
grid-template-columns: 150px minmax(0, 1fr);
gap: 23px;
}
.page-content .country-banner > img {
width: 150px;
height: 113px;
}
}
@media (max-width: 1000px) {
.page-body {
grid-template-columns: 1fr;
gap: 40px;
}
.page-sidebar {
position: static;
max-height: none;
width: 100%;
max-width: 500px;
justify-self: center;
overflow: visible;
}
.sidebar-shell {
padding: 23px;
}
.sidebar-action {
min-height: 76px;
padding: 16px;
gap: 14px;
}
.sidebar-action strong {
font-size: 17px;
}
.sidebar-call strong {
font-size: 24px;
}
.sidebar-action small {
font-size: 8px;
}
.sidebar-certificate h2 {
font-size: 23px;
}
.certificate-preview > span {
font-size: 12px;
}
.page-content .quote-layout {
grid-template-columns: 1.6fr 1fr;
}
.page-content .calculator {
grid-template-columns: 1.6fr 1fr;
}
.page-content .country-banner {
grid-template-columns: 190px minmax(0, 1fr);
}
.page-content .country-banner > img {
width: 190px;
height: 143px;
}
}
@media (max-width: 700px) {
.page-toc {
margin-bottom: 28px;
border-radius: 9px;
}
.page-toc summary {
padding: 16px;
gap: 10px;
}
.page-toc summary > span {
font-size: 14px;
}
.page-toc summary > small {
font-size: 9px;
}
.page-toc th,
.page-toc td {
padding: 10px 12px;
}
.page-toc th:first-child,
.page-toc td:first-child {
width: 43px;
}
.page-toc table {
font-size: 11px;
}
.toc-scroll {
max-height: 265px;
}
.page-content .cards,
.page-content .quote-layout,
.page-content .calculator,
.page-content .country-directory,
.page-content .country-banner {
grid-template-columns: 1fr;
}
.page-content .country-banner > img {
width: 190px;
height: 143px;
}
.depth-section h2 {
font-size: 25px;
}
.depth-section p {
font-size: 15px;
}
.certificate-dialog {
width: calc(100vw - 20px);
max-width: calc(100vw - 20px);
max-height: calc(100dvh - 24px);
border-radius: 9px;
}
.certificate-dialog-bar {
padding: 15px;
gap: 10px;
align-items: flex-start;
flex-direction: column;
}
.certificate-dialog-bar h2 {
font-size: 19px;
}
.certificate-dialog-actions {
width: 100%;
justify-content: space-between;
}
.certificate-dialog-actions button {
font-size: 11px;
padding: 9px 12px;
}
.certificate-viewport {
padding: 9px;
max-height: calc(100dvh - 175px);
}
.sidebar-shell {
padding: 20px;
}
.home-toc .page-toc summary > span {
font-size: 12px;
}
.home-depth {
padding-inline: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.sidebar-action:hover {
filter: none;
}
}
/* assets/visual-header.css */
.contact-topbar {
background: #111720;
color: #edf4ff;
font-size: 11px;
padding: 0;
}
.contact-topbar > .container {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 36px;
gap: 20px;
}
.topbar-contacts,
.topbar-channels {
display: flex;
align-items: center;
gap: 22px;
}
.contact-topbar a {
color: #f3f7ff;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 7px;
}
.topbar-contacts > a > span {
color: #75c9ef;
font-size: 14px;
}
.topbar-route {
font-size: 11px !important;
letter-spacing: 0 !important;
color: #d4e3f3;
}
.topbar-channels > span {
font-size: 8px;
letter-spacing: 0.13em;
color: #b6c6d9;
}
.topbar-channels > a {
padding: 4px 11px;
background: #ffffff0c;
border: 1px solid #ffffff2b;
border-radius: 20px;
font-size: 10px;
}
.visual-site-header {
position: sticky;
top: -108px;
z-index: 100;
background: transparent;
box-shadow: none;
}
.logo-band {
height: 108px;
background: #fff;
color: #163d6f;
}
.logo-band-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
.visual-brand {
display: flex;
align-items: center;
gap: 23px;
color: #193e6d;
text-decoration: none;
min-width: 0;
}
.brand-plaque {
display: flex;
align-items: center;
justify-content: center;
width: 245px;
height: 88px;
padding: 10px 16px;
background: linear-gradient(120deg, #102c51, #174e97);
border-radius: 9px;
box-shadow: 0 6px 19px #10366812;
}
.visual-brand .brand-plaque > img {
width: 211px;
height: auto;
max-height: 78px;
object-fit: contain;
}
.visual-brand > .brand-caption {
border: 0;
margin: 0;
padding: 0;
display: block;
letter-spacing: 0;
}
.brand-caption strong {
display: block;
font-size: 12px;
letter-spacing: 0.14em;
font-weight: 650;
}
.brand-caption small {
display: block;
font-size: 11px;
color: #4e6c8c;
margin-top: 7px;
font-weight: 400;
}
.header-phone-block {
text-align: right;
text-decoration: none;
color: #194d91;
display: block;
padding: 8px 20px;
border-right: 4px solid #1a61ba;
background: linear-gradient(90deg, #f5f8fc, #e9f3ff);
border-radius: 5px;
transform: skew(-5deg);
}
.header-phone-block > span {
display: block;
font-size: 10px;
color: #536b86;
}
.header-phone-block > strong {
display: block;
font-size: 32px;
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.2;
margin: 3px 0;
}
.header-phone-block > strong > span {
font-size: 22px;
}
.header-phone-block > small {
display: block;
font-size: 8px;
letter-spacing: 0.14em;
}
.primary-bar {
background: linear-gradient(110deg, #154b9a, #165bc1);
color: #fff;
box-shadow: 0 5px 20px #0d2d5017;
}
.nav-shell {
position: relative;
}
.visual-site-header #main-nav {
display: flex;
position: static;
align-items: center;
gap: 27px;
min-height: 61px;
padding: 0;
background: transparent;
font-size: 13px;
font-weight: 600;
color: #fff;
overflow: visible;
}
.visual-site-header #main-nav > a {
color: #fff;
text-decoration: none;
padding-block: 20px;
white-space: nowrap;
}
.visual-site-header #main-nav > .nav-details > summary {
padding: 20px 0;
white-space: nowrap;
gap: 8px;
}
.visual-site-header .nav-end {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
}
.visual-site-header #main-nav .nav-cta {
background: #fff;
color: #16519e;
border: 1px solid #fff;
min-height: 42px;
border-radius: 30px;
box-shadow: none;
padding: 10px 24px;
font-size: 12px;
white-space: nowrap;
}
.visual-site-header .blog-details {
position: relative;
}
.visual-site-header .blog-details > summary {
display: flex;
align-items: center;
gap: 8px;
background: #102540;
border: 1px solid #9ec6ee66;
border-radius: 28px;
padding: 6px 12px 6px 6px;
min-height: 42px;
font-size: 11px;
}
.blog-icon {
display: grid;
place-items: center;
background: #2671cc;
border-radius: 50%;
width: 27px;
height: 27px;
font-size: 17px;
}
.visual-site-header .blog-dropdown {
min-width: 230px;
left: auto;
right: 0;
top: calc(100% + 8px);
border-radius: 12px;
}
.visual-site-header .nav-details {
position: static;
}
.visual-site-header .blog-details {
position: relative;
}
.visual-site-header .dropdown.visual-mega {
position: absolute;
inset: auto 0 auto 0;
top: calc(100% + 1px);
width: 100%;
min-width: 0;
margin: 0;
padding: 18px;
background: #fff;
border: 1px solid #d3e0ef;
border-top: 3px solid #438ac8;
border-radius: 22px;
box-shadow: 0 24px 65px #071b4160;
color: #193653;
max-height: calc(100dvh - 85px);
overflow: auto;
scrollbar-width: thin;
z-index: 110;
}
.visual-site-header .corporate-visual {
grid-template-columns: minmax(225px, 0.95fr) minmax(0, 2.5fr);
gap: 16px;
}
.visual-site-header .corporate-details[open] > .corporate-visual {
display: grid;
}
.visual-menu-main,
.service-menu-main {
min-width: 0;
}
.visual-menu-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 31px;
margin-bottom: 10px;
padding: 0 4px;
}
.visual-menu-heading > span:first-child,
.service-menu-extra > h2 {
font-size: 11px;
letter-spacing: 0.14em;
color: #195ca7;
font-weight: 750;
margin: 0;
}
.visual-menu-heading .menu-badge {
font-size: 8px;
letter-spacing: 0.04em;
color: #4c6684;
border: 1px solid #d9e5f4;
border-radius: 18px;
padding: 5px 9px;
background: #f5f8fc;
}
.visual-site-header .visual-menu-heading > a {
font-size: 11px;
color: #19579f;
font-weight: 650;
padding: 0;
display: flex;
gap: 9px;
align-items: center;
white-space: nowrap;
}
.visual-menu-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 11px;
}
.visual-site-header .visual-menu-card {
display: flex;
flex-direction: column;
align-items: stretch;
min-width: 0;
padding: 0 !important;
text-decoration: none;
color: #1b314b;
background: #f5f7fa;
border: 1px solid #e0e5ed;
border-radius: 16px;
overflow: hidden;
}
.visual-menu-card > img {
display: block;
width: 100%;
height: 112px;
object-fit: cover;
object-position: center;
}
.visual-menu-card > img.menu-document {
object-fit: contain;
background: #edf3fa;
padding: 5px;
}
.visual-menu-card-copy {
display: flex;
flex-direction: column;
padding: 12px 13px 14px;
min-width: 0;
gap: 4px;
}
.visual-menu-card-copy > strong {
font-size: 13px;
letter-spacing: -0.015em;
line-height: 1.35;
color: #1b2e46;
}
.visual-menu-card-copy > small {
font-size: 10px;
color: #627084;
line-height: 1.55;
font-weight: 400;
}
.visual-site-header .visual-menu-card:hover {
background: #edf4fc;
color: #183f72;
border-color: #96bce5;
}
.visual-site-header .visual-menu-feature {
position: relative;
isolation: isolate;
display: flex;
align-items: flex-end;
min-width: 0;
border-radius: 17px;
overflow: hidden;
padding: 23px !important;
text-decoration: none;
color: #fff;
background: #132b44;
}
.visual-menu-feature > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
}
.visual-menu-feature:after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, #0615290d 0%, #071a36b8 34%, #07182df5 100%);
z-index: -1;
}
.visual-menu-feature > div {
padding-top: 110px;
}
.visual-eyebrow {
display: block;
font-size: 9px;
color: #9be2ff;
letter-spacing: 0.14em;
margin-bottom: 10px;
}
.visual-menu-feature > div > strong {
display: block;
font-size: 25px;
line-height: 1.12;
letter-spacing: -0.035em;
color: #fff;
}
.visual-menu-feature p {
font-size: 11px;
color: #dfe8f3;
line-height: 1.7;
margin: 11px 0 18px;
}
.feature-values {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 25px;
border-top: 1px solid #fff3;
padding-top: 16px;
margin-bottom: 19px;
}
.feature-values > span {
font-size: 19px;
font-weight: 750;
color: #fff;
line-height: 1.25;
}
.feature-values b {
display: block;
font-size: 11px;
color: #eef5ff;
font-weight: 600;
margin: 0;
}
.feature-button {
display: inline-flex;
align-items: center;
gap: 15px;
padding: 11px 14px;
border-radius: 22px;
color: #fff;
background: #1b67bd;
font-size: 11px;
font-weight: 650;
}
.visual-menu-quick {
display: grid;
grid-template-columns: 1.4fr 1.4fr 1.1fr;
gap: 10px;
margin-top: 11px;
}
.visual-site-header .visual-menu-quick > a {
display: flex;
align-items: center;
gap: 10px;
padding: 12px !important;
border: 1px solid #e1e6ee;
border-radius: 13px;
background: #f5f8fc;
color: #23354e;
text-decoration: none;
}
.visual-menu-quick > a > span:nth-child(2) {
flex: 1;
}
.quick-icon {
display: grid;
place-items: center;
flex: 0 0 30px;
width: 30px;
height: 30px;
border-radius: 9px;
background: #1c60b1;
color: #fff;
font-size: 18px;
}
.visual-menu-quick strong {
display: block;
font-size: 11px;
line-height: 1.4;
}
.visual-menu-quick small {
display: block;
font-size: 9px;
color: #66758a;
line-height: 1.5;
font-weight: 400;
}
.visual-menu-quick > a > span:last-child {
font-size: 15px;
color: #1e69b5;
}
.visual-menu-quick > div {
border: 1px solid #e1e6ee;
border-radius: 13px;
background: #f5f8fc;
padding: 8px 11px;
}
.visual-site-header .visual-menu-quick > div > a {
display: block;
font-size: 9px;
line-height: 1.7;
color: #28517e;
padding: 5px 0;
}
.visual-site-header .services-details[open] > .services-visual {
display: grid;
grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
gap: 17px;
}
.service-menu-extra {
padding: 17px;
background: #f5f7fa;
border-radius: 17px;
display: flex;
flex-direction: column;
min-width: 0;
}
.service-menu-extra > h2 {
margin-bottom: 16px;
font-size: 10px;
}
.service-menu-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 15px;
}
.visual-site-header .service-menu-links > a {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 9px;
font-size: 11px;
color: #25384e;
border-bottom: 1px solid #e1e6ed;
padding: 10px 0;
line-height: 1.45;
font-weight: 600;
text-decoration: none;
}
.service-menu-links > a > span:last-child {
color: #236ab5;
}
.visual-site-header .service-menu-call {
display: block;
padding: 18px 16px !important;
border-radius: 13px;
margin-top: auto;
background: linear-gradient(115deg, #154780, #1762bd);
color: #fff;
text-decoration: none;
}
.service-menu-call > span {
display: block;
font-size: 8px;
letter-spacing: 0.06em;
color: #e3f1ff;
}
.service-menu-call > strong {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 25px;
font-weight: 800;
letter-spacing: -0.03em;
margin-top: 6px;
color: white;
}
.visual-site-header .service-menu-call:hover {
background: #123e7e;
color: white;
}
.visual-site-header #main-nav :is(a, summary):focus-visible {
outline: 3px solid #74baff;
outline-offset: 3px;
}
.visual-site-header .visual-menu-card:focus-visible {
outline-offset: -4px !important;
}
.reference-hero .hero-grid {
min-height: 635px;
padding-block: 62px 66px;
}
.reference-hero .hero-copy {
width: 61%;
max-width: 760px;
}
.reference-hero .hero-copy > .eyebrow {
font-size: 9px;
letter-spacing: 0.06em;
padding: 9px 13px;
margin-bottom: 24px;
}
.reference-hero h1 {
font-size: clamp(43px, 4.8vw, 69px);
line-height: 1.08;
letter-spacing: -0.045em;
margin: 0 0 22px;
}
.reference-hero .hero-copy > h2 {
font-size: clamp(23px, 2.3vw, 32px);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.025em;
color: #fff;
margin: 0 0 20px;
}
.reference-hero .hero-copy > p {
font-size: 16px;
line-height: 1.8;
max-width: 615px;
margin-bottom: 27px;
}
.reference-hero .hero-copy > p a {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
}
.reference-hero .hero-visual:before {
background: linear-gradient(90deg, #0b3975f5 0%, #1458b3dc 31%, #123d7880 58%, #071d3226 100%);
}
.reference-hero .hero-visual:after {
background: linear-gradient(0deg, #061b3b33, transparent 65%);
}
.reference-hero .hero-visual > picture img {
object-position: 72% 54%;
filter: saturate(1.08);
}
.reference-hero .hero-copy .actions {
gap: 13px;
flex-wrap: wrap;
}
.reference-hero .hero-copy .button {
border-radius: 35px;
min-height: 56px;
font-size: 13px;
font-weight: 650;
padding: 15px 26px;
gap: 11px;
}
.reference-hero .hero-copy .button.hero-whatsapp {
background: #107448 !important;
border-color: #107448;
color: #fff;
}
.reference-hero .hero-copy .button.hero-whatsapp:hover {
background: #0c613d !important;
}
.reference-hero .hero-copy .button.hero-call {
color: #174e94;
}
.reference-hero .hero-call > span {
font-size: 20px;
}
.reference-hero .hero-whatsapp > span {
font-size: 19px;
}
@media (max-width: 1300px) and (min-width: 1101px) {
.visual-site-header #main-nav {
gap: 20px;
font-size: 12px;
}
.brand-plaque {
width: 230px;
}
.visual-site-header #main-nav .nav-cta {
padding-inline: 20px;
}
.visual-menu-card > img {
height: 99px;
}
.visual-menu-feature > div > strong {
font-size: 23px;
}
.service-menu-links > a {
font-size: 10px !important;
}
.visual-menu-card-copy {
padding: 11px;
}
.visual-menu-card-copy > strong {
font-size: 12px;
}
.visual-menu-card-copy > small {
font-size: 9px;
}
}
@media (max-width: 1100px) {
.visual-site-header {
top: 0;
}
.logo-band {
height: 83px;
}
.brand-plaque {
width: 186px;
height: 65px;
padding: 8px 12px;
}
.visual-brand .brand-plaque > img {
width: 160px;
max-height: 55px;
}
.brand-caption strong {
font-size: 10px;
letter-spacing: 0.1em;
}
.brand-caption small {
font-size: 10px;
}
.header-phone-block {
margin-left: auto;
padding: 6px 14px;
}
.header-phone-block > strong {
font-size: 24px;
}
.header-phone-block > span {
font-size: 8px;
}
.header-phone-block > small {
font-size: 7px;
}
.visual-site-header .menu-toggle {
display: flex;
border-color: #c4d6eb;
background: #164e9b;
color: #fff;
border-radius: 7px;
min-height: 42px;
gap: 12px;
font-size: 12px;
padding: 9px 13px;
}
.primary-bar {
height: 0;
box-shadow: none;
}
.nav-shell {
position: static;
}
.visual-site-header #main-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
min-height: 0;
max-height: calc(100dvh - 95px);
overflow: auto;
background: #164a91;
padding: 15px 22px;
align-items: stretch;
flex-direction: column;
gap: 0;
border-top: 1px solid #9bbce04d;
}
.visual-site-header #main-nav.open {
display: flex;
}
.visual-site-header #main-nav > a {
padding: 13px 0;
font-size: 13px;
border-bottom: 1px solid #ffffff24;
}
.visual-site-header #main-nav > .nav-details > summary {
padding: 14px 0;
font-size: 13px;
display: flex;
justify-content: space-between;
width: 100%;
}
.visual-site-header .nav-end {
margin: 13px 0 0;
justify-content: space-between;
}
.visual-site-header .nav-end .blog-details {
flex: 1;
position: relative;
}
.visual-site-header .nav-end .blog-details > summary {
justify-content: flex-start;
width: fit-content;
}
.visual-site-header .dropdown.visual-mega {
position: static;
inset: auto;
max-height: none;
overflow: visible;
padding: 13px;
margin-bottom: 15px;
border-radius: 14px;
border-top-width: 1px;
box-shadow: none;
}
.visual-site-header .corporate-details[open] > .corporate-visual {
grid-template-columns: 1fr;
}
.visual-site-header .visual-menu-feature {
min-height: 245px;
padding: 22px !important;
}
.visual-menu-feature > div {
padding-top: 35px;
max-width: 560px;
}
.visual-menu-feature > div > strong {
font-size: 26px;
}
.visual-menu-feature p {
font-size: 12px;
}
.feature-values {
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin-bottom: 16px;
padding-top: 13px;
}
.visual-menu-grid {
gap: 12px;
}
.visual-menu-card > img {
height: 125px;
}
.visual-menu-card-copy > strong {
font-size: 13px;
}
.visual-menu-card-copy > small {
font-size: 10px;
}
.visual-menu-quick {
grid-template-columns: 1fr 1fr 1fr;
}
.visual-site-header .services-details[open] > .services-visual {
grid-template-columns: 1fr;
}
.service-menu-extra {
padding: 18px;
}
.service-menu-links > a {
font-size: 12px !important;
}
.visual-site-header .service-menu-call {
margin-top: 20px;
}
.visual-site-header .blog-dropdown {
position: static;
background: #fff;
color: #1c3d60;
margin-top: 8px;
width: 100%;
border-radius: 10px;
min-width: 0;
}
.visual-site-header .blog-dropdown a {
color: #23466f;
padding: 11px;
}
.reference-hero .hero-grid {
padding-block: 58px 65px;
min-height: 600px;
}
.reference-hero .hero-copy {
width: 74%;
max-width: 690px;
}
.reference-hero h1 {
font-size: 58px;
}
.reference-hero .hero-copy > h2 {
font-size: 28px;
}
.reference-hero .hero-visual:before {
background: linear-gradient(90deg, #0c3977f2, #0d3f83cd 52%, #18384b55);
}
.topbar-channels {
gap: 10px;
}
.topbar-contacts {
gap: 16px;
}
.topbar-channels > span {
display: none;
}
}
@media (max-width: 760px) {
.topbar-route,
.topbar-channels {
display: none;
}
.contact-topbar > .container {
min-height: 31px;
}
.topbar-contacts {
width: 100%;
justify-content: space-between;
gap: 8px;
font-size: 10px;
}
.topbar-contacts > a > span {
font-size: 12px;
}
.brand-caption,
.header-phone-block {
display: none !important;
}
.visual-brand {
gap: 0;
}
.logo-band-inner {
gap: 15px;
}
.visual-menu-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.visual-menu-card > img {
height: 98px;
}
.visual-menu-card-copy {
padding: 11px;
}
.visual-menu-card-copy > strong {
font-size: 12px;
}
.visual-menu-card-copy > small {
font-size: 10px;
}
.visual-menu-heading .menu-badge {
font-size: 7px;
max-width: 140px;
}
.visual-menu-quick {
grid-template-columns: 1fr;
}
.visual-menu-quick > div {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.visual-site-header .visual-menu-quick > div > a {
font-size: 11px;
}
.service-menu-links {
gap: 0 14px;
}
.service-menu-links > a {
font-size: 11px !important;
}
.service-menu-extra > h2 {
font-size: 9px;
}
.visual-menu-feature > div > strong {
font-size: 26px;
}
.visual-menu-feature p {
font-size: 12px;
max-width: 290px;
}
.feature-values b {
font-size: 9px;
}
.reference-hero .hero-grid {
padding: 43px 22px 58px;
min-height: 0;
}
.reference-hero .hero-copy {
width: 100%;
max-width: 590px;
}
.reference-hero .hero-copy > .eyebrow {
font-size: 7px;
letter-spacing: 0.03em;
padding: 8px 10px;
margin-bottom: 24px;
}
.reference-hero h1 {
font-size: clamp(37px, 9.7vw, 60px);
line-height: 1.1;
margin-bottom: 20px;
}
.reference-hero .hero-copy > h2 {
font-size: 24px;
line-height: 1.3;
margin-bottom: 19px;
}
.reference-hero .hero-copy > h2 br {
display: none;
}
.reference-hero .hero-copy > p {
font-size: 14px;
line-height: 1.85;
margin-bottom: 25px;
}
.reference-hero .hero-visual:before {
background: linear-gradient(90deg, #0c3977ed, #0d3979d9 70%, #163a64b3);
}
.reference-hero .hero-visual > picture img {
object-position: 68% center;
}
.reference-hero .hero-copy .button {
font-size: 11px;
padding: 14px 18px;
min-height: 50px;
gap: 8px;
}
.reference-hero .hero-copy .actions {
gap: 11px;
}
}
@media (max-width: 380px) {
.visual-site-header #main-nav {
padding-inline: 14px;
}
.visual-site-header .dropdown.visual-mega {
padding: 10px;
}
.visual-menu-grid {
grid-template-columns: 1fr;
}
.visual-menu-card > img {
height: 125px;
}
.visual-menu-quick {
grid-template-columns: 1fr;
}
.feature-values {
grid-template-columns: 1fr 1fr;
}
.service-menu-links {
grid-template-columns: 1fr;
}
.brand-plaque {
width: 174px;
}
.visual-brand .brand-plaque > img {
width: 150px;
}
.reference-hero .hero-copy .button {
padding-inline: 16px;
font-size: 10px;
}
.reference-hero .hero-copy > h2 {
font-size: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.header-phone-block {
transform: none;
}
}
@media (max-width: 1100px) {
.visual-site-header #main-nav {
max-height: calc(100dvh - 130px);
}
}
.visual-brand > .brand-plaque {
display: flex;
}
.visual-brand .brand-caption strong {
color: #244d7b;
}
.visual-site-header .corporate-details[open] > .corporate-visual {
grid-template-columns: minmax(225px, 0.95fr) minmax(0, 2.5fr);
}
.visual-menu-card-copy > strong {
font-size: 14px;
}
.visual-menu-card-copy > small {
font-size: 11px;
}
.visual-menu-quick strong {
font-size: 12px;
}
.visual-menu-quick small {
font-size: 10px;
}
.visual-site-header .service-menu-links > a {
font-size: 12px;
}
@media (max-width: 1100px) {
.visual-site-header .corporate-details[open] > .corporate-visual {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.visual-menu-card-copy > strong {
font-size: 12px;
}
.visual-menu-card-copy > small {
font-size: 10px;
}
}
.visual-menu-quick small {
color: #53647a;
}
/* assets/homepage-details.css */
.route-planner {
background: linear-gradient(180deg, #e9eff8 0%, #fff 100%);
padding: 0 0 38px;
position: relative;
z-index: 2;
}
.route-panel {
background: #fff;
border: 1px solid #e4e9f1;
border-radius: 26px;
padding: 23px 25px 16px;
box-shadow: 0 18px 40px #17365a18;
position: relative;
top: -20px;
margin-bottom: -2px;
}
.route-heading {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 19px;
}
.route-heading h2 {
font-size: 18px;
letter-spacing: -0.4px;
margin: 0;
color: #14283f;
}
.route-heading p {
margin: 0;
color: #526176;
font-size: 13px;
}
#route-form {
display: grid;
grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) 135px 175px;
align-items: end;
gap: 12px;
}
.route-address {
min-width: 0;
border: 0;
padding: 0;
margin: 0;
}
.route-address legend,
.route-home label {
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
color: #536176;
margin-bottom: 8px;
display: block;
}
.route-address > div {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.route-panel select,
.route-panel input {
background: #f4f6f9;
border: 1px solid transparent;
border-radius: 15px;
min-height: 53px;
padding: 12px;
width: 100%;
min-width: 0;
font: inherit;
font-size: 13px;
color: #172b43;
}
.route-panel input::placeholder {
color: #536176;
opacity: 1;
}
#route-swap {
border: 1px solid #dfe5ed;
background: white;
border-radius: 50%;
width: 42px;
height: 42px;
align-self: end;
margin-bottom: 6px;
color: #1455a4;
font-size: 23px;
cursor: pointer;
}
.route-submit {
background: linear-gradient(120deg, #0d4b98, #1767c7);
color: white;
border: 0;
border-radius: 28px;
min-height: 54px;
font: inherit;
font-size: 13px;
font-weight: 750;
padding: 12px 15px;
cursor: pointer;
display: flex;
justify-content: center;
gap: 13px;
}
.route-submit span {
font-size: 20px;
}
#route-note {
font-size: 11px;
color: #536176;
margin: 11px 0 0;
line-height: 1.6;
}
#route-result {
margin-top: 14px;
border-radius: 14px;
background: #ecf4ff;
padding: 16px;
color: #193858;
}
#route-result[hidden] {
display: none;
}
#route-result p {
margin: 0 0 8px;
}
#route-result a {
color: #164e91;
font-weight: 700;
}
.route-bottom {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 45px;
padding-top: 6px;
}
.route-samples h3 {
font-size: 11px;
color: #536176;
letter-spacing: 1.2px;
margin: 0 0 11px;
}
.route-samples > div {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.route-samples button,
.route-samples a {
font: inherit;
font-size: 11px;
background: #fff;
border: 1px solid #d9e4ef;
border-radius: 30px;
padding: 9px 12px;
color: #1c324b;
text-decoration: none;
cursor: pointer;
}
.route-samples button span {
color: #185eaf;
padding: 0 4px;
}
.route-samples button:hover,
.route-samples a:hover {
background: #eaf3ff;
border-color: #9fbfe6;
}
.route-assurances {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px 20px;
align-content: center;
}
.route-assurances a {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #192d46;
min-width: 0;
}
.route-assurances a > span:first-child {
font-size: 25px;
min-width: 30px;
color: #145bb1;
font-weight: 800;
}
.route-assurances strong {
font-size: 12px;
display: block;
}
.route-assurances small {
font-size: 11px;
display: block;
color: #536176;
margin-top: 2px;
}
.photo-story.story-timeline {
display: block;
background: radial-gradient(
ellipse at 100% 0%,
#247bdc 0%,
#1256ad 36%,
#0a3674 75%,
#082a58 100%
);
color: white;
padding: 62px 0 25px;
overflow: hidden;
}
.journey-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.story-timeline .eyebrow {
color: #fff;
font-size: 11px;
letter-spacing: 1.3px;
}
.journey-number {
font-size: clamp(90px, 10vw, 155px);
font-weight: 850;
line-height: 1.05;
letter-spacing: -8px;
margin: 21px 0 22px;
color: #fff;
}
.story-timeline h2 {
color: #fff;
font-size: 26px;
line-height: 1.22;
letter-spacing: -0.6px;
margin: 0 0 17px;
max-width: 460px;
}
.story-timeline p {
color: #f0f5ff;
line-height: 1.85;
font-size: 15px;
margin: 0;
max-width: 520px;
min-height: 140px;
}
.journey-link {
display: inline-flex;
gap: 24px;
color: white;
text-underline-offset: 5px;
font-size: 13px;
font-weight: 700;
margin-top: 22px;
}
.journey-collage {
height: 480px;
position: relative;
}
.journey-collage:before {
content: '';
position: absolute;
inset: 10px 20px 60px 70px;
background: #062b6345;
border: 1px solid #ffffff35;
border-radius: 28px;
transform: rotate(4deg);
}
.journey-photo {
position: absolute;
margin: 0;
border: 3px solid #fff;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 20px 35px #001c4b55;
background: #edf3fa;
}
.journey-photo picture,
.journey-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.journey-photo-1 {
left: 5%;
top: 0;
width: 73%;
height: 290px;
}
.journey-photo-2 {
right: 0;
top: 100px;
width: 42%;
height: 300px;
}
.journey-photo-3 {
left: 27%;
bottom: 0;
width: 38%;
height: 160px;
}
.journey-photo figcaption {
position: absolute;
bottom: 9px;
left: 8px;
right: 8px;
background: #10243ce8;
border-radius: 20px;
padding: 7px 9px;
color: #fff;
font-size: 10px;
font-weight: 700;
text-align: center;
}
.journey-badge {
position: absolute;
left: -5%;
bottom: 13px;
width: 175px;
height: 175px;
border-radius: 50%;
background: white;
border: 8px solid #99c6ff;
color: #1454a0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 12px 30px #00234b55;
}
.journey-badge strong {
font-size: 43px;
font-weight: 850;
letter-spacing: -2px;
}
.journey-badge span {
font-size: 10px;
font-weight: 750;
letter-spacing: 2px;
text-align: center;
line-height: 1.5;
}
.journey-controls {
display: flex;
align-items: center;
gap: 35px;
margin-top: 55px;
}
.journey-counter {
font-size: 12px;
white-space: nowrap;
font-weight: 700;
}
.journey-counter b {
font-size: 20px;
}
.journey-controls ol {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
flex: 1;
}
.journey-controls li {
position: relative;
min-width: 0;
}
.journey-controls li:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 12px;
height: 1px;
background: #ffffff65;
}
.journey-controls li:last-child:before {
right: 50%;
}
.journey-controls button {
position: relative;
border: 0;
background: transparent;
color: #daeaff;
cursor: pointer;
width: 100%;
font: inherit;
text-align: left;
padding: 0 7px 6px;
min-height: 75px;
}
.journey-dot {
display: block;
width: 12px;
height: 12px;
border: 2px solid #b1d2fc;
border-radius: 50%;
background: #1256ad;
margin: 7px 0 12px;
transition: box-shadow 0.15s;
}
.journey-controls button[aria-pressed='true'] {
color: white;
}
.journey-controls button[aria-pressed='true'] .journey-dot {
background: white;
box-shadow: 0 0 0 7px #ffffff30;
}
.journey-controls strong {
font-size: 10px;
letter-spacing: 0.7px;
display: block;
}
.journey-controls small {
font-size: 11px;
display: block;
margin-top: 3px;
}
.story-timeline :focus-visible {
outline: 3px solid #fff;
outline-offset: 5px;
}
.route-planner :focus-visible {
outline: 3px solid #1e62af;
outline-offset: 3px;
}
@media (min-width: 1101px) {
.primary-bar .nav-details > summary {
position: relative;
}
.primary-bar .nav-details[open] > summary {
background: #07376e;
}
.primary-bar .nav-details[open] > summary:before {
content: '';
position: absolute;
bottom: 8px;
height: 2px;
left: 14px;
right: 14px;
background: #fff;
border-radius: 2px;
}
}
@media (max-width: 1100px) {
#route-form {
grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
}
.route-home {
grid-column: 1/2;
}
.route-submit {
grid-column: 3/4;
}
.route-bottom {
gap: 20px;
grid-template-columns: 1.2fr 1fr;
}
.journey-grid {
gap: 25px;
}
.journey-collage {
height: 420px;
}
.journey-photo-1 {
height: 260px;
}
.journey-photo-2 {
height: 250px;
}
.journey-badge {
width: 140px;
height: 140px;
}
.story-timeline p {
min-height: 190px;
}
.journey-photo-3 {
height: 135px;
}
}
@media (max-width: 760px) {
.route-panel {
padding: 20px 17px;
top: -15px;
border-radius: 22px;
}
.route-heading {
display: block;
}
.route-heading h2 {
font-size: 18px;
}
.route-heading p {
font-size: 12px;
margin-top: 8px;
}
#route-form {
grid-template-columns: 1fr 42px;
gap: 12px;
}
.route-address {
grid-column: 1/-1;
}
.route-address > div {
grid-template-columns: 1fr 1fr;
}
#route-swap {
grid-column: 2;
grid-row: 2;
justify-self: end;
margin: 0;
}
.route-address:nth-of-type(2) {
grid-row: 3;
}
.route-home {
grid-column: 1;
grid-row: 2;
}
.route-submit {
grid-column: 1/-1;
}
.route-bottom {
grid-template-columns: 1fr;
gap: 24px;
padding: 7px 3px;
}
.route-assurances {
gap: 15px 10px;
}
.route-samples button,
.route-samples a {
font-size: 10px;
padding: 8px 10px;
}
.route-planner {
padding-bottom: 26px;
}
.photo-story.story-timeline {
padding-top: 40px;
}
.journey-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.journey-number {
font-size: 100px;
margin: 14px 0;
letter-spacing: -5px;
}
.story-timeline h2 {
font-size: 24px;
}
.story-timeline p {
font-size: 14px;
min-height: 155px;
max-width: none;
}
.journey-collage {
height: 390px;
width: 100%;
max-width: 500px;
margin: auto;
}
.journey-photo-1 {
left: 3%;
height: 235px;
width: 75%;
}
.journey-photo-2 {
height: 235px;
top: 90px;
}
.journey-photo-3 {
height: 140px;
left: 28%;
}
.journey-badge {
left: 0;
bottom: 20px;
width: 125px;
height: 125px;
border-width: 6px;
}
.journey-badge strong {
font-size: 33px;
}
.journey-badge span {
font-size: 8px;
}
.journey-controls {
gap: 10px;
margin-top: 35px;
align-items: start;
flex-direction: column;
}
.journey-controls ol {
width: 100%;
}
.journey-controls strong {
font-size: 8px;
letter-spacing: 0;
}
.journey-controls small {
font-size: 10px;
}
.journey-controls button {
padding-inline: 3px;
}
.journey-photo figcaption {
font-size: 8px;
}
.story-timeline .eyebrow {
font-size: 9px;
}
}
@media (prefers-reduced-motion: reduce) {
.journey-dot {
transition: none;
}
}
.route-planner .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.story-timeline .journey-controls small {
color: #dceaff;
}
.journey-controls strong {
font-size: 11px;
}
.journey-photo figcaption {
font-size: 11px;
}
@media (max-width: 760px) {
.journey-controls ol {
display: flex;
overflow-x: auto;
padding: 8px 5px 14px;
scroll-snap-type: x proximity;
}
.journey-controls li {
flex: 0 0 135px;
scroll-snap-align: start;
}
.journey-controls strong {
font-size: 11px;
letter-spacing: 0.3px;
}
.journey-controls small {
font-size: 12px;
}
.journey-photo figcaption {
font-size: 10px;
}
}
/* assets/footer-sidebar.css */
.corporate-footer {
background:
radial-gradient(ellipse at 0% 0%, #1b426e70, transparent 55%),
radial-gradient(#ffffff12 0.8px, transparent 0.9px), #111820;
background-size:
auto,
22px 22px,
auto;
color: #d2d9e2;
padding: 26px 0 0;
margin-top: 0;
}
.footer-contact-band {
display: grid;
grid-template-columns: 1.2fr 1.15fr 0.72fr;
align-items: center;
border: 1px solid #ffffff24;
border-radius: 29px;
overflow: hidden;
background: #ffffff05;
margin-bottom: 62px;
gap: 30px;
}
.footer-call-panel {
background:
radial-gradient(ellipse at 100% 0%, #3c88dc, transparent 65%),
linear-gradient(120deg, #0c4085, #1260bf);
padding: 30px 33px;
position: relative;
overflow: hidden;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
}
.footer-call-panel:before,
.rail-contact:before {
content: '';
position: absolute;
width: 230px;
height: 230px;
border: 1px solid #ffffff25;
border-radius: 50%;
right: -85px;
top: -110px;
pointer-events: none;
}
.footer-kicker,
.rail-kicker {
display: flex;
align-items: center;
gap: 9px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.9px;
color: white;
}
.footer-kicker i,
.rail-kicker i {
width: 9px;
height: 9px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 5px #ffffff25;
flex-shrink: 0;
}
.corporate-footer .footer-main-phone {
font-size: clamp(32px, 3.6vw, 55px);
font-weight: 800;
letter-spacing: -2px;
line-height: 1.2;
text-decoration: none;
color: #fff;
display: block;
margin: 13px 0 8px;
white-space: nowrap;
}
.footer-call-note {
font-size: 11px;
line-height: 1.7;
color: #f1f6ff;
background: #0633654d;
border: 1px solid #ffffff25;
border-radius: 25px;
padding: 6px 10px;
width: fit-content;
}
.footer-contact-copy p {
font-size: 15px;
line-height: 1.65;
color: #e1e6ed;
margin: 0 0 14px;
}
.footer-contact-copy ul {
display: flex;
flex-wrap: wrap;
list-style: none;
gap: 9px 14px;
padding: 0;
margin: 0;
}
.footer-contact-copy li {
font-size: 11px;
color: #e1e6ed;
}
.footer-contact-copy li:before {
content: '✓';
background: #1a62b5;
color: #fff;
border-radius: 50%;
padding: 3px 5px;
margin-right: 5px;
font-size: 10px;
}
.footer-contact-actions {
padding: 25px 25px 25px 0;
display: grid;
gap: 10px;
}
.footer-contact-actions a {
border-radius: 30px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 11px;
padding: 14px 12px;
min-height: 50px;
font-size: 13px;
font-weight: 750;
text-align: center;
}
.footer-contact-actions .footer-wa {
background: white;
color: #0d6843;
}
.footer-contact-actions .footer-offer {
color: white;
border: 1px solid #ffffff65;
}
.corporate-footer-grid {
display: grid;
grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(0, 1fr));
gap: 30px;
padding-bottom: 40px;
}
.footer-brand {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 8px;
text-decoration: none;
width: fit-content;
margin-bottom: 20px;
}
.footer-brand img {
width: 170px;
height: auto;
}
.footer-brand > span {
font-size: 9px;
color: #e3eaf3;
letter-spacing: 1.5px;
}
.footer-about p {
font-size: 13px;
color: #bdc6d3;
line-height: 1.9;
margin-bottom: 20px;
}
.footer-about p strong {
color: #fff;
}
.footer-plan-stages {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
margin: 0 0 17px;
}
.footer-plan-stages > span {
display: block;
min-width: 0;
border: 1px solid #ffffff25;
border-radius: 13px;
padding: 10px 5px;
font-size: 9px;
background: #ffffff06;
color: #d2dcea;
overflow-wrap: anywhere;
}
.footer-plan-stages b {
display: block;
font-size: 24px;
line-height: 1.2;
margin-bottom: 3px;
color: #fff;
}
.footer-plan-stages > span:first-child {
border-color: #3976b2;
}
.footer-badges {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 18px;
}
.footer-badges a {
font-size: 9px;
border: 1px solid #ffffff2c;
border-radius: 24px;
padding: 7px 9px;
background: #ffffff06;
text-decoration: none;
color: #f2f6ff;
}
.footer-contact-icons {
display: flex;
gap: 8px;
margin: 0 0 13px;
}
.footer-contact-icons a {
display: grid;
place-items: center;
text-decoration: none;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #ffffff35;
background: #ffffff08;
color: #fff;
font-size: 19px;
}
.footer-email {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: #f7f9fd;
border-radius: 25px;
padding: 10px 13px;
font-size: 11px;
font-weight: 650;
color: #173b68;
text-decoration: none;
overflow-wrap: anywhere;
}
.footer-links h2 {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.8px;
color: #fff;
margin: 0 0 21px;
line-height: 1.5;
position: relative;
padding-left: 18px;
}
.footer-links h2:before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 11px;
height: 3px;
border-radius: 2px;
background: #4698f2;
}
.footer-links > a {
display: block;
font-size: 12px;
text-decoration: none;
line-height: 1.7;
color: #bdc6d3;
padding: 0 0 12px;
overflow-wrap: anywhere;
}
.footer-links > a:last-child {
color: #fff;
font-weight: 700;
margin-top: 5px;
}
.corporate-footer a:hover {
color: #9bd0ff;
}
.corporate-footer .footer-wa:hover,
.corporate-footer .footer-email:hover {
color: #07376c;
background: #e0efff;
}
.corporate-footer :focus-visible {
outline: 3px solid #8ec8ff;
outline-offset: 4px;
}
.corporate-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid #ffffff20;
padding: 23px 0 30px;
font-size: 10px;
color: #b3bfd0;
}
.corporate-footer-bottom nav {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.corporate-footer-bottom a {
text-decoration: none;
color: #cbd5e3;
}
.corporate-sidebar {
padding: 1px 0 14px;
}
.corporate-sidebar .sidebar-shell {
border: 0;
background: transparent;
padding: 0;
box-shadow: none;
}
.rail-contact {
position: relative;
overflow: hidden;
padding: 24px 21px 22px;
border-radius: 27px;
background:
radial-gradient(ellipse at 100% 0%, #347fd4, transparent 62%),
linear-gradient(130deg, #0d4d9d, #0a3775);
color: white;
box-shadow: 0 18px 35px #0c4b9423;
}
.rail-kicker {
font-size: 9px;
letter-spacing: 0.7px;
position: relative;
}
.rail-contact > p {
position: relative;
font-size: 19px;
letter-spacing: -0.5px;
font-weight: 700;
line-height: 1.3;
color: white;
margin: 13px 0 8px;
}
.corporate-sidebar .sidebar-call {
position: relative;
background: none;
color: white;
display: block;
text-decoration: none;
font-size: 35px;
font-weight: 850;
line-height: 1.2;
letter-spacing: -1px;
margin-bottom: 15px;
white-space: nowrap;
}
.rail-actions {
display: flex;
gap: 7px;
position: relative;
margin-bottom: 18px;
}
.corporate-sidebar .rail-actions > a {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
padding: 12px 10px;
min-height: 44px;
border-radius: 25px;
font-size: 11px;
font-weight: 750;
text-decoration: none;
color: #fff;
white-space: nowrap;
flex: 1;
}
.corporate-sidebar .sidebar-whatsapp {
background: #08783e;
}
.corporate-sidebar .sidebar-quote {
background: #101d30;
}
.rail-contact ul {
list-style: none;
padding: 14px 0 0;
margin: 0;
border-top: 1px solid #ffffff35;
}
.rail-contact li {
font-size: 11px;
line-height: 1.7;
color: #f1f6ff;
margin: 0 0 5px;
display: flex;
gap: 8px;
}
.rail-contact li:before {
content: '✓';
flex-shrink: 0;
}
.rail-corporate {
margin-top: 17px;
padding: 21px;
border: 1px solid #e0e5ed;
border-radius: 23px;
background: #f5f6f9;
}
.rail-corporate h2 {
font-size: 11px;
font-weight: 750;
letter-spacing: 1.2px;
color: #1759a4;
margin: 0 0 13px;
}
.rail-corporate > a {
font-size: 12px;
line-height: 1.6;
color: #192b40;
padding: 12px 22px 12px 0;
display: block;
border-bottom: 1px solid #dfe4ed;
text-decoration: none;
position: relative;
}
.rail-corporate > a:after {
content: '→';
position: absolute;
right: 0;
top: 12px;
color: #175ab1;
}
.rail-corporate > a:last-child {
border: 0;
padding-bottom: 0;
}
.rail-corporate > a:hover {
color: #104e9a;
}
.corporate-sidebar .sidebar-certificate {
margin-top: 17px;
border: 1px solid #e0e5ed;
border-radius: 23px;
padding: 21px;
background: #fff;
}
.corporate-sidebar .sidebar-certificate h2 {
font-size: 18px;
}
.corporate-sidebar .certificate-preview {
border-radius: 12px;
}
.corporate-sidebar :is(a, button):focus-visible {
outline: 3px solid #b66c00;
outline-offset: 3px;
}
.rail-contact :is(a, button):focus-visible {
outline-color: #fff;
}
@media (min-width: 1201px) {
.page-body {
grid-template-columns: minmax(0, 1fr) 310px;
}
}
@media (max-width: 1200px) {
.footer-contact-band {
grid-template-columns: 1.1fr 1fr 0.8fr;
gap: 20px;
}
.footer-call-panel {
padding: 27px 23px;
}
.footer-contact-actions {
padding-right: 20px;
}
.footer-contact-copy p {
font-size: 13px;
}
.corporate-footer-grid {
grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
gap: 20px;
}
.footer-brand img {
width: 150px;
}
.footer-about p {
font-size: 12px;
}
.footer-plan-stages {
grid-template-columns: 1fr 1fr;
}
.rail-contact {
padding: 23px 17px;
}
.corporate-sidebar .sidebar-call {
font-size: 32px;
}
.corporate-sidebar .rail-actions > a {
padding-inline: 7px;
font-size: 10px;
}
}
@media (max-width: 1000px) {
.footer-contact-band {
grid-template-columns: 1fr 1fr;
}
.footer-call-panel {
grid-row: span 2;
}
.footer-contact-copy {
padding: 24px 24px 0 0;
}
.footer-contact-actions {
padding: 0 24px 24px 0;
grid-column: 2;
grid-template-columns: 1fr 1fr;
}
.footer-contact-actions a {
font-size: 11px;
padding: 10px;
}
.corporate-footer-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.footer-about {
grid-column: 1/-1;
display: block;
max-width: 620px;
}
.footer-plan-stages {
grid-template-columns: repeat(4, 1fr);
max-width: 400px;
}
.footer-email {
width: fit-content;
}
.corporate-sidebar .sidebar-call {
font-size: 40px;
}
.corporate-sidebar .rail-actions > a {
font-size: 13px;
}
.rail-contact {
padding: 26px;
}
.rail-kicker {
font-size: 11px;
}
.rail-contact li,
.rail-corporate > a {
font-size: 13px;
}
.rail-contact > p {
font-size: 23px;
}
.rail-corporate {
padding: 24px;
}
.rail-corporate h2 {
font-size: 12px;
}
}
@media (max-width: 700px) {
.corporate-footer {
padding-top: 22px;
}
.footer-contact-band {
display: block;
border-radius: 24px;
margin-bottom: 40px;
}
.footer-call-panel {
padding: 27px;
}
.corporate-footer .footer-main-phone {
font-size: 43px;
}
.footer-contact-copy {
padding: 25px 25px 18px;
}
.footer-contact-actions {
padding: 0 25px 25px;
grid-template-columns: 1fr 1fr;
}
.footer-contact-actions a {
font-size: 11px;
}
.corporate-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 23px;
}
.footer-about {
max-width: none;
}
.footer-about p {
font-size: 13px;
}
.footer-links h2 {
font-size: 11px;
margin-bottom: 16px;
}
.footer-links > a {
font-size: 12px;
}
.footer-brand img {
width: 170px;
}
.footer-plan-stages {
max-width: none;
}
.footer-email {
font-size: 12px;
}
.corporate-footer-bottom {
flex-direction: column;
align-items: start;
padding-bottom: 60px;
}
.corporate-footer-bottom nav {
gap: 12px 15px;
}
.rail-contact {
padding: 24px 22px;
}
.corporate-sidebar .sidebar-call {
font-size: 38px;
}
.corporate-sidebar .rail-actions > a {
font-size: 12px;
}
.rail-contact > p {
font-size: 22px;
}
}
@media print {
.corporate-sidebar,
.corporate-footer {
display: none;
}
}
.footer-links > a {
font-size: 14px;
}
.footer-about p {
font-size: 14px;
}
.footer-plan-stages > span {
font-size: 10px;
}
.footer-badges a {
font-size: 10px;
}
.footer-email {
font-size: 12px;
}
.corporate-footer-bottom {
padding-bottom: 80px;
}
.corporate-sidebar .sidebar-call {
font-size: 40px;
}
.corporate-sidebar .rail-actions > a {
font-size: 12px;
}
.rail-contact li {
font-size: 12px;
}
.rail-corporate > a {
font-size: 14px;
}
@media (max-width: 1200px) and (min-width: 1001px) {
.corporate-sidebar .sidebar-call {
font-size: 34px;
}
.corporate-sidebar .rail-actions > a {
font-size: 10px;
}
.rail-contact li {
font-size: 11px;
}
.rail-corporate > a {
font-size: 13px;
}
}
@media (max-width: 700px) {
.footer-links > a {
font-size: 13px;
}
.corporate-footer-bottom {
padding-bottom: 85px;
}
.corporate-sidebar .sidebar-call {
font-size: 38px;
}
}
.corporate-footer .footer-wa > span,
.corporate-sidebar .sidebar-whatsapp > span {
display: inline-block;
flex: 0 0 18px;
width: 18px;
height: 18px;
font-size: 0;
background: currentColor;
mask: url(images/contact-chat.svg) center/contain no-repeat;
}
.footer-contact-icons a[href^="https://wa.me"]
{
font-size: 0;
position: relative;
}
.footer-contact-icons a[href^="https://wa.me"]:before
{
content: '';
width: 20px;
height: 20px;
background: currentColor;
mask: url(images/contact-chat.svg) center/contain no-repeat;
}
@media (max-width: 700px) {
.footer-contact-actions {
grid-template-columns: 1fr;
}
.footer-contact-actions a {
font-size: 13px;
min-height: 48px;
}
}
/* assets/layout-refinements.css */
/* Compact horizontal callback brief, with the same container as the route card. */
.callback-section {
padding: 16px 0 30px;
background: linear-gradient(180deg, #f7faff, #edf3fb);
}
.callback-shell {
display: block;
border-radius: 26px;
box-shadow: 0 18px 40px #17365a18;
}
.callback-intro {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
padding: 18px 25px;
background:
radial-gradient(ellipse at 100% 0%, #2475c7, transparent 60%),
linear-gradient(110deg, #102f5e, #1758a6);
}
.callback-intro > .eyebrow,
.callback-visual {
display: none;
}
.callback-intro h2 {
font-size: 26px;
line-height: 1.2;
letter-spacing: -0.7px;
margin: 0;
white-space: nowrap;
}
.callback-intro h2 br,
.callback-intro > p br {
display: none;
}
.callback-intro h2 em:before {
content: ' ';
}
.callback-intro > p {
font-size: 12px;
line-height: 1.6;
max-width: 400px;
margin: 0;
}
.callback-contact {
margin: 0;
padding: 0;
width: auto;
border: 0;
text-align: right;
}
.callback-contact > span {
font-size: 7px;
margin-bottom: 4px;
}
.callback-contact > a {
font-size: 14px;
}
.callback-form {
padding: 22px 25px 16px;
display: grid;
grid-template-columns: 0.8fr 1.25fr 1.25fr 1.25fr;
gap: 12px 14px;
align-items: start;
}
.callback-form-head,
.callback-route-heading {
display: none;
}
.callback-person {
display: contents;
}
.callback-field label {
font-size: 11px;
margin-bottom: 8px;
line-height: 1.6;
}
.callback-phone {
grid-template-columns: 100px minmax(0, 1fr);
}
.callback-phone select {
font-size: 10px;
}
.callback-form input:not([type='checkbox']),
.callback-form select {
height: 48px;
border-radius: 12px;
background: #f5f7fa;
border-color: #dbe5f0;
font-size: 12px;
}
.callback-route {
margin: 0;
min-width: 0;
}
.callback-route legend {
font-size: 11px;
line-height: 1.6;
margin-bottom: 8px;
padding: 0;
}
.callback-route legend > span {
display: none;
}
.callback-route-fields {
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.callback-route .callback-field label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.callback-field > small,
.callback-help {
font-size: 9px;
line-height: 1.6;
margin-top: 5px;
}
.callback-help {
grid-column: 1/-1;
margin: 0;
}
.callback-check {
grid-column: 1/4;
align-self: center;
font-size: 11px;
line-height: 1.7;
}
#callback-privacy-error {
grid-column: 1/-1;
}
.callback-submit-row {
grid-column: 4;
grid-row: 3;
margin: 0;
display: block;
}
.callback-submit-row > p {
display: none;
}
.callback-form .callback-submit {
width: 100%;
padding: 12px 10px;
min-height: 47px;
font-size: 11px;
border-radius: 25px;
gap: 6px;
}
.callback-data-note {
grid-column: 1/-1;
padding: 0;
margin: 0;
border: 0;
}
.callback-status,
#callback-fallback {
grid-column: 1/-1;
margin: 0;
}
.callback-form .honey {
position: absolute;
}
.callback-intro a:focus-visible {
outline: 3px solid white;
outline-offset: 4px;
}
/* Navigation text and a rounded, comfortably padded hover/open treatment. */
.visual-site-header #main-nav {
font-weight: 700;
}
.visual-site-header #main-nav :is(summary, .nav-cta) {
font-weight: 700;
}
@media (min-width: 1101px) {
.visual-site-header #main-nav {
gap: 8px;
}
.visual-site-header #main-nav > a {
padding: 18px 10px;
border-radius: 10px;
}
.visual-site-header #main-nav > .nav-details > summary {
padding: 14px 15px;
min-height: 48px;
margin: 5px 0;
border-radius: 10px;
}
.visual-site-header .nav-end .nav-details > summary {
padding-inline: 15px;
}
.visual-site-header #main-nav > .nav-details[open] > summary,
.visual-site-header #main-nav > .nav-details > summary:hover,
.visual-site-header #main-nav > a:not(.nav-cta):hover {
background: linear-gradient(120deg, #ffffff14, #082e6870);
box-shadow: inset 0 0 0 1px #ffffff22;
color: white;
}
.primary-bar .nav-details[open] > summary:before {
left: 15px;
right: 15px;
bottom: 7px;
}
}
/* The rail stays in its document column; it neither follows the viewport nor scrolls internally. */
.page-sidebar.corporate-sidebar {
position: static;
top: auto;
max-height: none;
overflow: visible;
align-self: start;
}
@media (max-width: 1200px) {
.callback-form {
grid-template-columns: 1fr 1fr;
gap: 17px 20px;
}
.callback-intro {
grid-template-columns: auto 1fr;
gap: 15px 24px;
}
.callback-contact {
display: none;
}
.callback-phone {
grid-template-columns: 118px minmax(0, 1fr);
}
.callback-check {
grid-column: 1;
grid-row: auto;
}
.callback-submit-row {
grid-column: 2;
grid-row: auto;
align-self: center;
}
}
@media (max-width: 700px) {
.callback-section {
padding: 10px 0 24px;
}
.callback-shell {
border-radius: 22px;
}
.callback-intro {
display: block;
padding: 20px;
}
.callback-intro h2 {
font-size: 26px;
margin-bottom: 8px;
}
.callback-intro h2 br {
display: none;
}
.callback-intro > p {
font-size: 12px;
max-width: none;
}
.callback-form {
padding: 20px;
grid-template-columns: 1fr;
gap: 17px;
}
.callback-form input:not([type='checkbox']),
.callback-form select {
font-size: 16px;
}
.callback-phone select {
font-size: 11px;
}
.callback-field label,
.callback-route legend {
font-size: 12px;
}
.callback-field > small,
.callback-help {
font-size: 10px;
}
.callback-check,
.callback-submit-row {
grid-column: 1;
grid-row: auto;
}
.callback-form .callback-submit {
font-size: 13px;
}
.callback-form .callback-check input {
width: 16px;
height: 16px;
min-height: 0;
padding: 0;
}
}
.callback-submit-row > p {
display: block;
font-size: 9px;
line-height: 1.5;
max-width: none;
margin: 0 0 6px;
color: #52687f;
}
.callback-intro > p br {
display: initial;
}
/* assets/homepage-refresh.css */
.visual-brand > .brand-plaque {
background: none;
box-shadow: none;
border-radius: 0;
padding: 0;
}
.visual-brand .brand-plaque > img {
filter: brightness(0) saturate(100%) invert(18%) sepia(35%) saturate(1750%) hue-rotate(183deg)
brightness(92%) contrast(98%);
}
.countries-section {
margin-top: 10px;
padding: 38px 0 23px;
}
.countries-heading {
margin-bottom: 22px;
}
.countries-heading h2 {
font-size: 38px;
}
.countries-heading .eyebrow {
margin-bottom: 11px;
}
.countries-heading-end > p {
font-size: 12px;
line-height: 1.65;
}
.countries-controls {
padding-top: 15px;
margin-bottom: 15px;
}
.countries-controls button {
width: 36px;
height: 36px;
}
.countries-track {
gap: 17px;
}
.countries-track > .country-slide {
flex-basis: calc((100% - 68px) / 5);
}
.countries-section .country-card-flag {
padding: 17px 22px 13px;
}
.countries-section .country-card-flag > img {
height: 88px;
}
.countries-section .country-card-copy {
padding: 16px;
}
.countries-section .country-card h3 {
font-size: 20px;
}
.countries-section .country-card-copy p {
font-size: 10px;
}
.countries-bottom {
margin-top: 15px;
}
.home-solutions {
padding-block: 62px;
}
.home-solutions .section-heading h2,
.moving-guides .section-heading h2 {
font-size: 39px;
}
.home-solutions .section-heading > p {
font-size: 14px;
max-width: 350px;
}
.home-solution-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 21px;
}
.home-solution-card {
text-decoration: none;
border: 1px solid #d9e5f4;
border-radius: 17px;
overflow: hidden;
background: #fff;
box-shadow: 0 8px 25px #15385e07;
}
.home-solution-card picture,
.home-solution-card img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
}
.home-solution-card > div {
padding: 20px 23px;
position: relative;
}
.home-solution-card > div > span:first-child {
font-size: 10px;
font-weight: 750;
color: #2463aa;
}
.home-solution-card h3 {
font-size: 21px;
line-height: 1.2;
letter-spacing: -0.5px;
margin: 9px 0 10px;
color: #153e6b;
}
.home-solution-card p {
font-size: 12px;
line-height: 1.7;
color: #53677f;
margin: 0;
max-width: 85%;
}
.solution-arrow {
position: absolute;
right: 22px;
bottom: 22px;
color: #2365b2;
}
.home-solution-card:hover {
border-color: #8fafd2;
box-shadow: 0 12px 28px #15385e12;
}
.international-process {
background: #edf3fa;
padding: 58px 0;
color: #173b68;
}
.international-process-head {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 60px;
align-items: end;
margin-bottom: 33px;
}
.international-process-head h2 {
font-size: 38px;
color: #163d67;
line-height: 1.2;
margin: 0;
}
.international-process-head .eyebrow {
margin-bottom: 15px;
color: #245ea4;
}
.international-process-head p {
font-size: 14px;
line-height: 1.8;
color: #4e6681;
}
.international-process-head a {
font-size: 13px;
font-weight: 700;
color: #1c579d;
}
.international-step-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
.international-step-grid li {
display: flex;
gap: 16px;
padding: 23px;
background: #fff;
border: 1px solid #d7e4f3;
border-radius: 15px;
}
.international-step-grid li > span {
font-size: 14px;
font-weight: 800;
color: #2463ae;
background: #ecf4ff;
border-radius: 50%;
width: 39px;
height: 39px;
flex: 0 0 39px;
display: grid;
place-items: center;
}
.international-step-grid h3 {
font-size: 17px;
letter-spacing: -0.3px;
color: #173e6b;
margin: 3px 0 10px;
}
.international-step-grid p {
font-size: 12px;
line-height: 1.8;
color: #536a83;
margin: 0;
}
.home-volume {
padding-block: 62px;
}
.volume-corporate {
display: grid;
grid-template-columns: 1.1fr 1fr;
overflow: hidden;
border: 1px solid #dbe4ee;
border-radius: 24px;
background: linear-gradient(125deg, #f9fbfe, #eaf2fc);
}
.volume-corporate-copy {
padding: 43px 49px;
}
.volume-corporate-copy .eyebrow {
font-size: 9px;
margin-bottom: 18px;
}
.volume-corporate-copy h2 {
color: #143c6a;
font-size: 43px;
line-height: 1.14;
margin-bottom: 17px;
}
.volume-corporate-copy p {
font-size: 14px;
line-height: 1.8;
max-width: 430px;
color: #506984;
}
.volume-corporate-copy .button {
border-radius: 27px;
background: linear-gradient(110deg, #123c77, #2069bc);
color: white;
font-size: 12px;
padding: 14px 22px;
gap: 18px;
}
.volume-corporate-copy small {
display: block;
color: #536a84;
font-size: 10px;
margin-top: 16px;
}
.volume-corporate-visual {
position: relative;
isolation: isolate;
background:
radial-gradient(ellipse at 100% 0%, #276fc0, transparent 60%),
linear-gradient(140deg, #0c2e5a, #164d97);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 32px;
padding: 38px;
color: white;
overflow: hidden;
}
.volume-corporate-visual:before {
content: '';
position: absolute;
width: 450px;
height: 450px;
border: 1px solid #ffffff20;
border-radius: 50%;
left: 15%;
top: -60%;
z-index: -1;
}
.volume-cube {
width: 155px;
height: 155px;
display: grid;
place-items: center;
border: 1px solid #b9d9ff;
box-shadow:
14px -14px 0 -1px #184e8d,
14px -14px 0 0 #c1d9f7;
background: linear-gradient(135deg, #ffffff18, #ffffff05);
transform: rotate(-6deg);
border-radius: 15px;
}
.volume-cube > span {
font-size: 66px;
font-weight: 750;
line-height: 1;
}
.volume-cube sup {
font-size: 30px;
vertical-align: super;
}
.volume-formula {
display: flex;
align-items: center;
gap: 10px;
max-width: 100%;
}
.volume-formula span {
font-size: 9px;
letter-spacing: 1px;
padding: 8px 10px;
border: 1px solid #ffffff40;
border-radius: 7px;
color: #f1f6ff;
}
.volume-formula i {
font-style: normal;
font-size: 14px;
}
.volume-corporate-visual > p {
font-size: 11px;
letter-spacing: 1px;
color: #dceaff;
margin: 0;
}
.moving-guides {
padding-top: 0;
padding-bottom: 48px;
}
.moving-guide-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 23px;
}
.moving-guide-filters button {
font: inherit;
font-size: 12px;
background: #f0f5fb;
color: #28517e;
border: 1px solid #d4e1ef;
border-radius: 24px;
padding: 10px 17px;
}
.moving-guide-filters button[aria-pressed='true'] {
background: #174e97;
border-color: #174e97;
color: #fff;
}
.moving-guide-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 21px;
}
.moving-guide-card {
display: block;
background: #fff;
border: 1px solid #dbe5f0;
border-radius: 16px;
overflow: hidden;
text-decoration: none;
}
.moving-guide-card[hidden] {
display: none;
}
.moving-guide-card picture,
.moving-guide-card img {
width: 100%;
height: 145px;
object-fit: cover;
display: block;
}
.moving-guide-card > div {
padding: 20px;
position: relative;
}
.moving-guide-card > div > span {
font-size: 9px;
letter-spacing: 0.6px;
color: #2c66ac;
font-weight: 700;
}
.moving-guide-card h3 {
font-size: 20px;
line-height: 1.25;
color: #173b68;
margin: 10px 0;
}
.moving-guide-card p {
font-size: 12px;
line-height: 1.75;
color: #516a84;
margin: 0 0 12px;
max-width: 92%;
}
.moving-guide-card b {
color: #245ea4;
position: absolute;
right: 20px;
bottom: 20px;
font-weight: 500;
}
.moving-guide-status {
font-size: 11px;
color: #536a83;
margin: 17px 0 0;
}
.home-moving-faq {
background: linear-gradient(135deg, #edf3fb, #f8fafd);
border-top: 1px solid #d7e4f3;
padding: 57px 0;
}
.moving-faq-layout {
display: grid;
grid-template-columns: 0.8fr 1.4fr;
gap: 65px;
}
.moving-faq-intro h2 {
font-size: 39px;
line-height: 1.15;
color: #153e6e;
margin-bottom: 21px;
}
.moving-faq-intro > p {
color: #536b86;
font-size: 14px;
line-height: 1.8;
max-width: 310px;
}
.moving-faq-intro > a {
font-size: 12px;
color: #1b559b;
font-weight: 700;
}
.moving-faq-intro .faq-contact {
display: block;
margin-top: 28px;
border-radius: 17px;
background: linear-gradient(115deg, #102e58, #1c61b3);
padding: 22px;
color: white;
text-decoration: none;
max-width: 320px;
}
.faq-contact small {
display: block;
font-size: 8px;
letter-spacing: 0.9px;
color: #d2e7ff;
}
.faq-contact strong {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 29px;
letter-spacing: -0.5px;
margin-top: 7px;
}
.moving-faq-list details {
border: 1px solid #d2dfed;
border-radius: 12px;
background: #fff;
margin: 0 0 10px;
overflow: hidden;
}
.moving-faq-list summary {
display: flex;
align-items: center;
gap: 13px;
list-style: none;
cursor: pointer;
padding: 18px 20px;
font-size: 13px;
line-height: 1.5;
font-weight: 650;
color: #1b416d;
}
.moving-faq-list summary::-webkit-details-marker {
display: none;
}
.moving-faq-list summary > span {
font-size: 10px;
color: #275fa4;
flex-shrink: 0;
}
.moving-faq-list summary > i {
width: 8px;
height: 8px;
border-right: 1.5px solid #275fa4;
border-bottom: 1.5px solid #275fa4;
transform: rotate(45deg);
margin-left: auto;
flex: 0 0 8px;
}
.moving-faq-list details[open] summary {
background: #f5f7fa;
}
.moving-faq-list details[open] summary > i {
transform: rotate(225deg);
}
.moving-faq-list details > p {
font-size: 13px;
line-height: 1.85;
color: #4e6681;
padding: 16px 20px 19px 47px;
margin: 0;
}
@media (max-width: 1100px) {
.countries-track > .country-slide {
flex-basis: calc((100% - 51px) / 3.6);
}
.home-solution-grid,
.moving-guide-grid,
.international-step-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.volume-corporate-copy {
padding: 33px;
}
.volume-corporate-visual {
padding: 30px 20px;
}
.volume-formula {
gap: 6px;
}
.volume-formula span {
font-size: 8px;
padding: 7px;
}
.moving-faq-layout {
gap: 35px;
grid-template-columns: 0.8fr 1.3fr;
}
.international-process-head {
gap: 35px;
}
.international-process-head h2 {
font-size: 32px;
}
}
@media (max-width: 700px) {
.countries-section {
padding-block: 29px 22px;
margin-top: 0;
}
.countries-heading h2 {
font-size: 32px;
}
.countries-heading {
gap: 17px;
}
.countries-track > .country-slide {
flex-basis: calc((100% - 15px) / 1.8);
}
.countries-section .country-card-flag {
padding: 14px;
}
.countries-section .country-card-flag > img {
height: 75px;
}
.countries-section .country-card-copy {
padding: 13px;
}
.countries-section .country-card h3 {
font-size: 19px;
}
.home-solutions,
.home-volume {
padding-block: 40px;
}
.home-solutions .section-heading h2,
.moving-guides .section-heading h2 {
font-size: 32px;
}
.home-solution-grid,
.moving-guide-grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.home-solution-card picture,
.home-solution-card img {
height: 110px;
}
.home-solution-card > div {
padding: 14px;
}
.home-solution-card h3 {
font-size: 17px;
}
.home-solution-card p {
font-size: 11px;
max-width: none;
}
.solution-arrow {
display: none;
}
.international-process {
padding-block: 38px;
}
.international-process-head {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 23px;
}
.international-process-head h2 {
font-size: 30px;
}
.international-step-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.international-step-grid li {
padding: 18px;
}
.volume-corporate {
grid-template-columns: 1fr;
border-radius: 18px;
}
.volume-corporate-copy {
padding: 27px;
}
.volume-corporate-copy h2 {
font-size: 35px;
}
.volume-corporate-visual {
min-height: 310px;
padding: 35px 20px;
gap: 27px;
}
.volume-cube {
width: 125px;
height: 125px;
}
.volume-cube > span {
font-size: 54px;
}
.volume-formula span {
letter-spacing: 0.3px;
}
.moving-guide-card picture,
.moving-guide-card img {
height: 105px;
}
.moving-guide-card > div {
padding: 14px;
}
.moving-guide-card h3 {
font-size: 17px;
}
.moving-guide-card p {
font-size: 11px;
max-width: none;
}
.moving-guide-card b {
display: none;
}
.moving-guide-card > div > span {
font-size: 8px;
}
.moving-guide-filters button {
font-size: 11px;
padding: 9px 12px;
}
.moving-faq-layout {
grid-template-columns: 1fr;
gap: 27px;
}
.home-moving-faq {
padding-block: 38px;
}
.moving-faq-intro h2 {
font-size: 32px;
}
.moving-faq-intro .faq-contact {
max-width: none;
}
.moving-faq-list summary {
padding: 16px 14px;
font-size: 12px;
gap: 10px;
}
.moving-faq-list details > p {
font-size: 12px;
padding: 14px 18px;
}
.moving-faq-list summary > span {
font-size: 9px;
}
}
@media (max-width: 370px) {
.home-solution-grid,
.moving-guide-grid {
grid-template-columns: 1fr;
}
.home-solution-card picture,
.home-solution-card img,
.moving-guide-card picture,
.moving-guide-card img {
height: 140px;
}
.volume-formula {
gap: 4px;
}
.volume-formula span {
font-size: 7px;
padding: 6px;
}
.volume-corporate-copy {
padding: 23px;
}
.volume-corporate-copy h2 {
font-size: 32px;
}
}
/* International planning cards. The section background is defined separately. */
.international-process .international-step-grid {
gap: 20px;
}
.international-process .international-step-grid > li {
display: block;
padding: 0;
border: 0;
background: transparent;
border-radius: 18px;
min-width: 0;
}
.international-process-card {
--process-accent: #2476c9;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 26px 27px 23px;
border: 1px solid #d6e3f2;
border-radius: 18px;
background: linear-gradient(145deg, #fff, #f5f9fe);
color: #173e6b;
text-decoration: none;
box-shadow: 0 8px 24px #071e3d12;
transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.international-step-grid > li:nth-child(3n + 2) .international-process-card {
--process-accent: #197f98;
}
.international-step-grid > li:nth-child(3n) .international-process-card {
--process-accent: #466fc4;
}
.process-card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 22px;
}
.process-card-number {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid #d6e5f7;
border-radius: 11px;
background: #eaf3ff;
color: #1c5fa4;
font-size: 14px;
font-weight: 750;
}
.process-card-arrow {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 1px solid #d7e3f1;
border-radius: 50%;
font-size: 18px;
color: #48749f;
transition:
transform 0.25s ease,
background-color 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}
.international-process .international-step-grid h3 {
font-size: 21px;
font-weight: 700;
letter-spacing: -0.45px;
line-height: 1.35;
color: #153c67;
margin: 0 0 11px;
}
.international-process .international-step-grid p {
font-size: 13px;
line-height: 1.85;
color: #4b637d;
margin: 0 0 24px;
flex: 1;
}
.process-card-link {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding-top: 15px;
border-top: 1px solid #dce7f3;
font-size: 12px;
font-weight: 650;
color: #205b98;
}
.process-card-link > span {
transition: transform 0.25s ease;
}
.international-process-card:is(:hover, :focus-visible) {
transform: translateY(-4px);
border-color: var(--process-accent);
box-shadow:
0 0 0 2px var(--process-accent),
0 16px 32px #061b3a26;
color: #173e6b;
}
.international-process-card:is(:hover, :focus-visible) .process-card-arrow {
background: var(--process-accent);
border-color: var(--process-accent);
color: #fff;
transform: rotate(6deg);
}
.international-process-card:is(:hover, :focus-visible) .process-card-link > span {
transform: translateX(4px);
}
.international-process-card:focus-visible {
outline: 3px solid #fff;
outline-offset: 5px;
}
.international-process .international-process-head > div > a {
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 9px 15px;
border: 1px solid #b5d8fc88;
border-radius: 8px;
text-decoration: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}
.international-process .international-process-head > div > a:is(:hover, :focus-visible) {
background: #ffffff12;
border-color: #fff;
color: #fff;
}
@media (max-width: 760px) {
.international-process-card {
padding: 22px;
}
.process-card-top {
margin-bottom: 18px;
}
.international-process .international-step-grid {
gap: 16px;
}
.international-process .international-step-grid h3 {
font-size: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.international-process-card,
.process-card-arrow,
.process-card-link > span,
.international-process .international-process-head > div > a {
transition: none;
}
.international-process-card:is(:hover, :focus-visible),
.international-process-card:is(:hover, :focus-visible) .process-card-arrow,
.international-process-card:is(:hover, :focus-visible) .process-card-link > span {
transform: none;
}
}
/* Six services follow the navigation catalogue; descriptions have no number labels. */
.home-solutions .home-solution-card {
display: flex;
flex-direction: column;
}
.home-solutions .home-solution-card > div {
flex: 1;
padding: 22px 23px 30px;
}
.home-solutions .home-solution-card h3 {
margin: 0 0 12px;
font-size: 21px;
line-height: 1.35;
}
.home-solutions .home-solution-card p {
font-size: 13px;
line-height: 1.85;
max-width: none;
margin: 0;
padding-right: 10px;
}
.home-solutions .solution-arrow {
right: 17px;
bottom: 13px;
}
@media (max-width: 700px) {
.home-solutions .home-solution-card > div {
padding: 18px 18px 23px;
}
.home-solutions .home-solution-card h3 {
font-size: 20px;
}
.home-solutions .home-solution-card p {
font-size: 13px;
padding: 0;
}
}
@media (max-width: 600px) {
.home-solutions .home-solution-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.home-solutions .home-solution-card picture,
.home-solutions .home-solution-card img {
height: 180px;
}
}
/* assets/homepage-gallery.css */
.route-panel .route-heading h2 {
font-weight: 700;
font-size: 20px;
line-height: 1.3;
}
.route-panel .route-submit {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
min-height: 54px;
height: 54px;
line-height: 1.2;
font-weight: 750;
font-size: 13px;
border-radius: 14px;
padding: 12px 16px;
white-space: nowrap;
box-shadow: 0 7px 17px #1358a01a;
}
.route-submit > span {
display: inline-flex;
align-items: center;
line-height: 1;
font-weight: 400;
}
.route-panel .route-submit:hover {
background: linear-gradient(120deg, #0b3978, #145db6);
}
.home-photo-gallery {
padding: 43px 0 30px;
background: linear-gradient(180deg, #f0f5fc, #f9fbfe);
}
.home-gallery-heading,
.home-reviews-heading {
display: flex;
justify-content: space-between;
align-items: end;
gap: 35px;
margin-bottom: 23px;
}
.home-gallery-heading h2 {
font-size: 35px;
line-height: 1.15;
color: #173f70;
margin: 0;
}
.home-gallery-heading .eyebrow {
font-size: 9px;
margin-bottom: 12px;
}
.home-gallery-heading-end {
max-width: 345px;
}
.home-gallery-heading-end p {
font-size: 13px;
line-height: 1.8;
color: #516a84;
margin: 0 0 9px;
}
.home-gallery-heading-end a {
font-size: 12px;
color: #1d5da8;
font-weight: 650;
}
.home-gallery-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 17px;
}
.home-gallery-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.home-gallery-filters button {
font: inherit;
font-size: 11px;
font-weight: 650;
border: 1px solid #d4e1f0;
border-radius: 22px;
background: #fff;
color: #29517c;
padding: 9px 16px;
min-height: 38px;
}
.home-gallery-filters button[aria-pressed='true'] {
background: #174f98;
color: #fff;
border-color: #174f98;
}
.home-gallery-navigation {
display: flex;
align-items: center;
gap: 8px;
}
.home-gallery-navigation > span {
font-size: 11px;
min-width: 52px;
color: #4e6c8c;
font-variant-numeric: tabular-nums;
}
.home-gallery-navigation button {
width: 37px;
height: 37px;
border-radius: 50%;
border: 1px solid #c5d8ee;
background: white;
color: #174f98;
font-size: 19px;
}
.home-gallery-navigation button:disabled {
opacity: 0.4;
cursor: default;
}
.home-gallery-track {
display: flex;
gap: 18px;
overflow: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: #cbd5e3 #edf3fb;
list-style: none;
padding: 0 0 10px;
margin: 0;
position: relative;
overscroll-behavior-inline: contain;
}
.home-gallery-slide {
flex: 0 0 calc((100% - 36px) / 3);
min-width: 0;
scroll-snap-align: start;
}
.home-gallery-slide[hidden] {
display: none;
}
.home-gallery-open {
position: relative;
display: block;
width: 100%;
text-align: left;
border: 1px solid #d7e4f3;
border-radius: 17px;
background: white;
padding: 0;
overflow: hidden;
color: #203d61;
box-shadow: 0 6px 20px #14396908;
}
.home-gallery-open picture,
.home-gallery-open img {
display: block;
width: 100%;
height: 210px;
object-fit: cover;
}
.home-gallery-enlarge {
position: absolute;
top: 13px;
right: 13px;
display: grid;
place-items: center;
width: 33px;
height: 33px;
border-radius: 50%;
background: #ffffffee;
box-shadow: 0 4px 10px #16375a25;
color: #14539a;
font-size: 22px;
}
.home-gallery-caption {
position: relative;
display: block;
padding: 15px 20px 17px;
}
.home-gallery-caption small {
display: block;
font-size: 8px;
letter-spacing: 0.8px;
color: #516a84;
margin-bottom: 5px;
}
.home-gallery-caption strong {
font-size: 15px;
font-weight: 650;
display: block;
padding-right: 22px;
}
.home-gallery-caption > span {
position: absolute;
right: 20px;
bottom: 19px;
color: #245d9f;
font-size: 18px;
}
.home-gallery-status {
font-size: 10px;
line-height: 1.6;
color: #536c86;
margin: 10px 0 0;
}
.home-photo-gallery :focus-visible {
outline: 3px solid #b26c00;
outline-offset: 3px;
}
.home-customer-reviews {
padding: 35px 0 45px;
background: #f7faff;
border-top: 1px solid #e0e9f4;
}
.home-reviews-heading .eyebrow {
font-size: 9px;
margin-bottom: 12px;
}
.home-reviews-heading h2 {
font-size: 34px;
line-height: 1.17;
color: #173f70;
margin: 0;
}
.home-reviews-heading > a {
font-size: 12px;
line-height: 1.7;
color: #1c579d;
font-weight: 650;
}
.home-review-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.home-review-card {
background: white;
border: 1px solid #d7e4f3;
border-radius: 17px;
padding: 23px;
box-shadow: 0 10px 27px #17395d06;
}
.home-review-topic {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-bottom: 22px;
}
.home-review-topic > span:first-child {
background: #edf4fd;
color: #295b94;
padding: 6px 10px;
border-radius: 20px;
font-size: 10px;
font-weight: 650;
}
.home-review-topic > span:last-child {
font-size: 24px;
color: #4e6c8c;
}
.home-review-summary-label {
font-size: 8px;
letter-spacing: 0.9px;
font-weight: 700;
color: #55708b;
}
.home-review-card > p {
color: #215e9b;
font-size: 13px;
line-height: 1.85;
margin: 9px 0 22px;
min-height: 73px;
}
.home-review-author {
display: flex;
gap: 12px;
align-items: center;
border-top: 1px solid #e3ebf4;
padding-top: 17px;
}
.home-review-author > span {
width: 41px;
height: 41px;
display: grid;
place-items: center;
flex: 0 0 41px;
border-radius: 50%;
background: linear-gradient(135deg, #17477e, #236ac0);
color: white;
font-size: 12px;
font-weight: 750;
}
.home-review-author h3 {
font-size: 14px;
line-height: 1.3;
letter-spacing: 0;
color: #173f70;
margin: 0 0 4px;
}
.home-review-author small {
display: block;
font-size: 9px;
line-height: 1.6;
color: #56718d;
}
.home-review-card > a {
display: block;
color: #255b9b;
font-size: 10px;
margin-top: 14px;
text-underline-offset: 3px;
}
.home-review-source-note {
font-size: 10px;
line-height: 1.8;
color: #536a85;
margin: 17px 0 0;
}
.home-gallery-dialog {
padding: 0;
width: min(1050px, calc(100vw - 32px));
max-width: calc(100vw - 32px);
max-height: calc(100dvh - 32px);
border: 1px solid #aec9e7;
border-radius: 18px;
background: #fff;
color: #193e6d;
overflow: auto;
box-shadow: 0 25px 100px #051b39aa;
}
.home-gallery-dialog::backdrop {
background: #071c38d9;
backdrop-filter: blur(3px);
}
.home-gallery-dialog-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 17px 22px;
background: linear-gradient(115deg, #123768, #1d5ba8);
color: #fff;
}
.home-gallery-dialog-bar > div > span {
font-size: 8px;
letter-spacing: 1px;
color: #dceaff;
}
.home-gallery-dialog-bar h2 {
font-size: 19px;
line-height: 1.3;
letter-spacing: -0.2px;
color: white;
margin: 5px 0 0;
}
.home-gallery-dialog-bar > button {
background: #fff;
border: 1px solid #d6e3f0;
border-radius: 22px;
padding: 9px 15px;
color: #214e83;
font-size: 12px;
white-space: nowrap;
}
.home-gallery-image-area {
position: relative;
background: #e9f0f8;
}
.home-gallery-image-area > img {
display: block;
width: 100%;
height: min(62vh, 620px);
object-fit: contain;
}
.home-gallery-image-area > button {
position: absolute;
top: calc(50% - 22px);
border: 1px solid #cbd9e9;
background: #ffffffed;
color: #1b5598;
border-radius: 50%;
height: 44px;
width: 44px;
font-size: 22px;
}
.home-gallery-image-area > button:first-of-type {
left: 14px;
}
.home-gallery-image-area > button:last-of-type {
right: 14px;
}
#home-gallery-large-caption {
font-size: 12px;
line-height: 1.7;
color: #355b83;
margin: 0;
padding: 15px 22px;
}
.home-gallery-modal-open {
overflow: hidden;
}
.home-gallery-dialog :focus-visible {
outline: 3px solid #b37000;
outline-offset: 3px;
}
@media (max-width: 1100px) {
.home-gallery-slide {
flex-basis: calc((100% - 18px) / 2.3);
}
.home-gallery-open picture,
.home-gallery-open img {
height: 195px;
}
.home-review-card {
padding: 19px;
}
.home-review-card > p {
min-height: 100px;
}
.home-review-author small {
font-size: 8px;
}
}
@media (max-width: 700px) {
.route-panel .route-heading h2 {
font-size: 19px;
}
.route-panel .route-submit {
border-radius: 14px;
font-size: 13px;
}
.home-photo-gallery {
padding: 32px 0 25px;
}
.home-gallery-heading {
display: block;
margin-bottom: 20px;
}
.home-gallery-heading h2 {
font-size: 30px;
}
.home-gallery-heading-end {
margin-top: 15px;
max-width: none;
}
.home-gallery-heading-end p {
font-size: 12px;
}
.home-gallery-toolbar {
align-items: start;
flex-direction: column;
gap: 14px;
}
.home-gallery-navigation {
align-self: flex-end;
}
.home-gallery-filters button {
font-size: 10px;
padding: 8px 12px;
}
.home-gallery-track {
gap: 13px;
}
.home-gallery-slide {
flex-basis: 84%;
}
.home-gallery-open picture,
.home-gallery-open img {
height: 185px;
}
.home-gallery-caption {
padding: 14px 16px;
}
.home-gallery-caption strong {
font-size: 14px;
}
.home-customer-reviews {
padding: 29px 0 35px;
}
.home-reviews-heading {
display: block;
}
.home-reviews-heading h2 {
font-size: 29px;
}
.home-reviews-heading > a {
display: inline-block;
margin-top: 16px;
font-size: 11px;
}
.home-review-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.home-review-card {
padding: 21px;
}
.home-review-card > p {
min-height: 0;
font-size: 13px;
}
.home-review-author small {
font-size: 10px;
}
.home-review-topic {
margin-bottom: 15px;
}
.home-gallery-dialog-bar {
padding: 14px;
gap: 12px;
}
.home-gallery-dialog-bar h2 {
font-size: 15px;
}
.home-gallery-dialog-bar > button {
font-size: 11px;
padding: 8px 12px;
}
.home-gallery-image-area > img {
height: 52vh;
}
.home-gallery-image-area > button {
width: 36px;
height: 36px;
top: calc(50% - 18px);
}
#home-gallery-large-caption {
padding: 13px 16px;
font-size: 11px;
}
}
/* assets/country-route-refresh.css */
/* Blue and white sections, with customer reviews as the single charcoal main section. */
.route-planner {
background: #fff;
}
.route-address > div {
grid-template-columns: 1fr;
}
.route-panel select {
background: #f5f8fc;
}
.route-samples button {
font-size: 11px;
}
.photo-story.story-timeline {
background:
radial-gradient(ellipse at 100% 0%, #287bd6, transparent 65%),
linear-gradient(125deg, #104684, #175ab2);
}
.callback-section {
background: #fff;
}
.countries-section {
background: linear-gradient(120deg, #104684, #1e64ba);
}
.home-photo-gallery,
.home-solutions,
.home-volume {
background: #fff;
}
.international-process {
background: linear-gradient(125deg, #114585, #2268bb);
}
.international-process-head h2,
.international-process-head .eyebrow,
.international-process-head a {
color: #fff;
}
.international-process-head p {
color: #e3efff;
}
.home-volume .volume-corporate {
background: #fff;
}
.moving-guides {
background: linear-gradient(120deg, #155198, #236dc1);
padding-block: 48px;
}
.moving-guides .section-heading h2,
.moving-guides .eyebrow,
.moving-guides .text-link {
color: white;
}
.moving-guides .moving-guide-status {
color: #e0edff;
}
.moving-guides .moving-guide-filters button {
background: white;
border-color: #d1e2fa;
color: #204e83;
}
.moving-guides .moving-guide-filters button[aria-pressed='true'] {
background: #0d3a75;
border-color: #fff;
color: #fff;
}
.home-moving-faq {
background: #fff;
}
.corporate-footer {
background:
radial-gradient(#ffffff12 0.8px, transparent 0.9px), linear-gradient(125deg, #111111, #050505);
background-size:
22px 22px,
auto;
}
.footer-links > a,
.footer-about p,
.corporate-footer-bottom,
.corporate-footer-bottom a {
color: #e3edfc;
}
.footer-brand > span {
color: #fff;
}
.corporate-footer .footer-contact-copy p {
color: #fff;
}
.corporate-footer .footer-contact-copy li {
color: #e7f0ff;
}
.reviews-charcoal {
background:
radial-gradient(ellipse at 95% 0%, #20477755, transparent 55%),
radial-gradient(#ffffff0c 0.8px, transparent 0.9px), #111720;
background-size:
auto,
24px 24px,
auto;
border: 0;
position: relative;
padding: 43px 0 36px;
color: #fff;
}
.reviews-charcoal .home-reviews-heading h2,
.reviews-charcoal .home-reviews-heading .eyebrow {
color: white;
}
.reviews-charcoal .home-reviews-heading > a {
color: #d3e7ff;
}
.reviews-charcoal .home-review-source-note {
color: #c5d4e8;
}
.customer-review-controls {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 9px;
margin: 0 0 17px;
}
.customer-review-controls > span {
font-size: 11px;
min-width: 57px;
color: #d4e4fa;
font-variant-numeric: tabular-nums;
}
.customer-review-controls > button {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid #a5c4e070;
background: #ffffff09;
color: #fff;
font-size: 20px;
}
.customer-review-controls > button:disabled {
opacity: 0.4;
cursor: default;
}
.reviews-charcoal .home-review-grid {
display: flex;
gap: 20px;
position: relative;
overflow: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: #6787b1 #1e2b40;
padding: 3px 3px 13px;
margin-inline: -3px;
}
.reviews-charcoal .home-review-card {
height: 288px;
flex: 0 0 calc((100% - 40px) / 3);
min-width: 0;
display: flex;
flex-direction: column;
border: 1px solid #d6e3f0;
padding: 23px;
scroll-snap-align: start;
box-sizing: border-box;
box-shadow: none;
}
.reviews-charcoal .home-review-topic {
margin-bottom: 17px;
}
.reviews-charcoal .home-review-summary-label {
font-size: 8px;
}
.reviews-charcoal .home-review-card > p {
font-size: 17px;
line-height: 1.7;
color: #264b76;
margin: 9px 0 15px;
min-height: 0;
}
.reviews-charcoal .home-review-author {
margin-top: auto;
padding-top: 15px;
}
.reviews-charcoal .home-review-author h3 {
font-size: 13px;
}
.reviews-charcoal .home-review-author small {
font-size: 9px;
}
.reviews-charcoal .home-review-card > a {
margin-top: 10px;
}
.reviews-charcoal :focus-visible {
outline: 3px solid #8cc7ff;
outline-offset: 3px;
}
.reviews-charcoal .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.moving-faq-layout {
grid-template-columns: 0.9fr 1.2fr;
align-items: stretch;
gap: 42px;
}
.faq-corporate-visual {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 650px;
height: 100%;
margin: 0;
border: 1px solid #d7e4f3;
border-radius: 24px;
background: #104581;
}
.faq-corporate-visual > picture,
.faq-corporate-visual > picture img {
display: block;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
object-fit: cover;
object-position: 43% center;
}
.faq-corporate-visual:after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(0deg, #0b3978b0, transparent 60%);
z-index: 1;
pointer-events: none;
}
.faq-photo-detail {
position: absolute;
width: 56%;
height: 30%;
right: 21px;
bottom: 22px;
border: 3px solid #fff;
border-radius: 17px;
overflow: hidden;
z-index: 2;
box-shadow: 0 15px 30px #05224b40;
}
.faq-photo-detail picture,
.faq-photo-detail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.moving-faq-list > .eyebrow {
font-size: 9px;
margin-bottom: 12px;
}
.moving-faq-list > h2 {
font-size: 32px;
line-height: 1.2;
color: #173f70;
margin: 0 0 24px;
}
.moving-faq-list details {
background: #f9fbff;
}
.moving-faq-list details[open] summary {
background: #edf4fd;
}
@media (max-width: 1100px) {
.reviews-charcoal .home-review-card {
flex-basis: calc((100% - 20px) / 2);
height: 288px;
}
.moving-faq-layout {
gap: 28px;
grid-template-columns: 0.9fr 1.2fr;
}
.faq-corporate-visual {
min-height: 710px;
}
.reviews-charcoal .home-review-author small {
font-size: 9px;
}
}
@media (max-width: 700px) {
.route-address > div {
grid-template-columns: 1fr;
}
.route-panel .route-heading h2 {
font-size: 19px;
}
.route-panel select {
font-size: 14px;
}
.reviews-charcoal {
padding-block: 32px;
}
.reviews-charcoal .home-review-grid {
gap: 14px;
}
.reviews-charcoal .home-review-card {
flex-basis: 90%;
height: 288px;
padding: 21px;
}
.reviews-charcoal .home-review-card > p {
font-size: 17px;
}
.reviews-charcoal .home-review-author h3 {
font-size: 13px;
}
.reviews-charcoal .home-review-author small {
font-size: 9px;
}
.customer-review-controls {
margin-top: 18px;
}
.moving-faq-layout {
grid-template-columns: 1fr;
gap: 27px;
}
.faq-corporate-visual {
height: 330px;
min-height: 0;
max-height: none;
border-radius: 20px;
}
.faq-corporate-visual > picture img {
object-position: center 55%;
}
.faq-photo-detail {
width: 43%;
height: 47%;
right: 15px;
bottom: 15px;
}
.moving-faq-list > h2 {
font-size: 29px;
}
.moving-guides {
padding-block: 35px;
}
}
/* Flat navigation tones and an animated text underline, matching the supplied reference. */
@media (min-width: 1101px) {
.visual-site-header #main-nav {
gap: 0;
align-items: stretch;
}
.visual-site-header #main-nav > a:not(.nav-cta),
.visual-site-header #main-nav .nav-details > summary {
position: relative;
display: flex;
align-items: center;
min-height: 61px;
margin: 0;
padding: 18px 14px;
border: 0;
border-radius: 0;
background: transparent;
background-image: none;
color: #fff;
box-shadow: none;
transition: background-color 0.2s ease;
}
.visual-site-header #main-nav > a:not(.nav-cta):hover,
.visual-site-header #main-nav > a:not(.nav-cta):focus-visible,
.visual-site-header #main-nav .nav-details > summary:hover,
.visual-site-header #main-nav .nav-details > summary:focus-visible,
.visual-site-header #main-nav .nav-details[open] > summary {
background: #103e80;
background-image: none;
border-radius: 0;
box-shadow: none;
color: #fff;
}
.visual-site-header #main-nav > a:not(.nav-cta):before,
.visual-site-header #main-nav .nav-details > summary:before {
content: '';
position: absolute;
display: block;
left: 14px;
right: 14px;
bottom: 10px;
top: auto;
height: 2px;
border-radius: 1px;
background: #fff;
transform: scaleX(0);
transform-origin: left center;
opacity: 0;
transition:
transform 0.24s ease,
opacity 0.18s ease;
}
.visual-site-header #main-nav .nav-details > summary:before {
right: 30px;
}
.visual-site-header #main-nav > a:not(.nav-cta):hover:before,
.visual-site-header #main-nav > a:not(.nav-cta):focus-visible:before,
.visual-site-header #main-nav .nav-details > summary:hover:before,
.visual-site-header #main-nav .nav-details > summary:focus-visible:before,
.visual-site-header #main-nav .nav-details[open] > summary:before {
transform: scaleX(1);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.visual-site-header #main-nav > a,
.visual-site-header #main-nav .nav-details > summary,
.visual-site-header #main-nav > a:before,
.visual-site-header #main-nav .nav-details > summary:before {
transition: none;
}
}
/* International journey: native page scrolling, eight numbered stages. */
.photo-story.story-timeline {
padding: 0;
overflow: clip;
position: relative;
background: linear-gradient(90deg, #104684, #1e65b9);
background-size: 100% 100%;
background-position: center;
transition: none;
}
.story-timeline .journey-scene {
padding-block: 28px 18px;
position: relative;
}
.story-timeline .journey-grid {
gap: 48px;
align-items: start;
}
.story-timeline .journey-copy {
min-width: 0;
padding-top: 18px;
}
.story-timeline h2 {
font-size: clamp(26px, 2.6vw, 38px);
line-height: 1.2;
max-width: 560px;
min-height: 0;
margin: 0 0 calc(16px + 1cm);
}
.story-timeline #journey-description {
font-size: 15px;
line-height: 1.95;
min-height: 0;
max-width: 550px;
white-space: pre-line;
text-wrap: pretty;
}
.story-timeline .journey-collage {
height: 375px;
}
.story-timeline .journey-photo-1 {
height: 245px;
}
.story-timeline .journey-photo-2 {
height: 225px;
top: 75px;
}
.story-timeline .journey-photo-3 {
height: 130px;
}
.story-timeline .journey-badge {
width: 140px;
height: 140px;
}
.story-timeline .journey-badge strong {
font-size: 35px;
}
.story-timeline .journey-controls {
margin-top: 20px;
padding-top: 0;
display: block;
position: relative;
}
.story-timeline .journey-controls ol {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 0;
overflow: visible;
padding: 0;
}
.story-timeline .journey-controls li:before {
top: 17px;
left: 34px;
right: 0;
height: 1px;
background: #ffffff55;
}
.story-timeline .journey-controls li.is-complete:before {
background: #fff;
}
.story-timeline .journey-controls li:last-child:before {
display: none;
}
.story-timeline .journey-controls button {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0 9px 8px 0;
min-height: 103px;
line-height: 1.45;
}
.story-timeline .journey-dot {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #95bfea;
background: #164b90;
color: #fff;
font-size: 13px;
font-weight: 750;
margin: 0 0 13px;
position: relative;
z-index: 1;
}
.story-timeline .journey-controls strong {
font-size: 11px;
letter-spacing: 0;
max-width: 135px;
}
.story-timeline .journey-controls button[aria-pressed='true'] .journey-dot {
color: transparent;
background: #fff;
box-shadow: 0 0 0 4px #ffffff26;
}
.story-timeline #journey-status {
min-height: 0;
margin: 0;
}
.journey-truck {
position: absolute;
left: 0;
top: 0;
width: 34px;
height: 34px;
border-radius: 50%;
background: #fff;
color: #12549c;
display: grid;
place-items: center;
pointer-events: none;
transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.25, 1);
z-index: 2;
}
.journey-truck svg {
width: 25px;
height: 20px;
}
@media (max-width: 1100px) {
.story-timeline .journey-grid {
gap: 24px;
}
.story-timeline .journey-controls strong {
font-size: 10px;
}
}
@media (max-width: 760px) {
.story-timeline .journey-scene {
padding-block: 18px 12px;
}
.story-timeline .journey-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.story-timeline .journey-copy {
padding-top: 0;
}
.story-timeline h2 {
font-size: 25px;
min-height: 0;
margin-bottom: calc(12px + 1cm);
}
.story-timeline #journey-description {
font-size: 13px;
line-height: 1.8;
min-height: 0;
}
.story-timeline .journey-collage {
height: 70px;
max-width: none;
display: flex;
gap: 10px;
}
.story-timeline .journey-collage:before,
.story-timeline .journey-badge {
display: none;
}
.story-timeline .journey-photo {
position: relative;
inset: auto;
width: 33.333%;
height: 70px;
border-width: 2px;
border-radius: 12px;
box-shadow: none;
}
.story-timeline .journey-photo figcaption {
display: none;
}
.story-timeline .journey-controls {
margin-top: 20px;
}
.story-timeline .journey-controls ol {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px 0;
}
.story-timeline .journey-controls li {
min-width: 0;
}
.story-timeline .journey-controls li:nth-child(4):before {
display: none;
}
.story-timeline .journey-controls button {
min-height: 78px;
padding-right: 7px;
}
.story-timeline .journey-dot {
width: 28px;
height: 28px;
font-size: 11px;
margin-bottom: 8px;
}
.story-timeline .journey-controls li:before {
top: 14px;
left: 28px;
right: 0;
}
.story-timeline .journey-controls strong {
font-size: 9px;
}
.journey-truck {
width: 28px;
height: 28px;
}
.journey-truck svg {
width: 22px;
height: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.journey-truck {
transition: none;
}
}
/* Align the callback band with the journey's content container. */
#sizi-arayalim > .container {
max-width: 1280px;
}
#sizi-arayalim .callback-shell {
border-radius: 20px;
box-shadow: 0 10px 30px #17365a12;
}
#sizi-arayalim .callback-intro {
padding: 18px 22px;
gap: 18px;
background:
repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 12px),
radial-gradient(ellipse at 100% 0%, #2a2a2a, transparent 65%),
linear-gradient(110deg, #090909, #171717);
}
#sizi-arayalim .callback-form {
padding: 20px 22px 18px;
}
@media (max-width: 700px) {
#sizi-arayalim .callback-intro,
#sizi-arayalim .callback-form {
padding: 18px;
}
}
#sizi-arayalim .callback-submit {
width: auto;
min-width: 178px;
min-height: 40px;
padding: 9px 14px;
font-size: 11px;
justify-self: end;
align-self: center;
}
#sizi-arayalim .callback-submit svg {
width: 17px;
height: 17px;
}
@media (min-width: 701px) {
#sizi-arayalim .callback-submit-row {
display: contents;
}
#sizi-arayalim .callback-check {
grid-row: 3;
grid-column: 1/4;
align-self: center;
margin: 0;
}
#sizi-arayalim .callback-submit {
grid-row: 3;
grid-column: 4;
}
#sizi-arayalim .callback-submit-row > p {
grid-row: 4;
grid-column: 1/-1;
text-align: right;
margin: 0;
font-size: 9px;
}
#sizi-arayalim #callback-privacy-error {
grid-row: 5;
}
}
@media (min-width: 701px) and (max-width: 1200px) {
#sizi-arayalim .callback-check {
grid-row: 4;
grid-column: 1;
}
#sizi-arayalim .callback-submit {
grid-row: 4;
grid-column: 2;
}
#sizi-arayalim .callback-submit-row > p {
grid-row: 5;
}
#sizi-arayalim #callback-privacy-error {
grid-row: 6;
}
}
@media (max-width: 700px) {
#sizi-arayalim .callback-submit-row {
display: flex;
align-items: flex-end;
}
#sizi-arayalim .callback-submit {
align-self: flex-end;
}
}
/* Fitted slogan badge and compact country cards without a visible scrollbar. */
.story-timeline .journey-badge {
left: 0;
padding: 0;
border-width: 5px;
overflow: hidden;
}
.story-timeline .journey-badge > img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
}
.countries-section .countries-track {
align-items: flex-start;
scrollbar-width: none;
padding-bottom: 5px;
}
.countries-section .countries-track::-webkit-scrollbar {
display: none;
}
.countries-section .country-card {
height: auto;
}
.countries-section .country-card-flag {
padding: 12px 18px 10px;
}
.countries-section .country-card-copy {
flex: 0 0 auto;
padding: 12px 14px;
}
.countries-section .country-card-label {
margin-bottom: 6px;
font-size: 8px;
}
.countries-section .country-card h3 {
margin-bottom: 0;
font-size: 20px;
line-height: 1.2;
}
.countries-section .country-card h3 > span {
font-size: 11px;
margin-top: 4px;
line-height: 1.4;
}
.countries-section .country-card-link {
margin-top: 10px;
padding-top: 8px;
font-size: 10px;
}
@media (max-width: 700px) {
.countries-section .country-card-flag {
padding: 11px 12px 9px;
}
.countries-section .country-card-copy {
padding: 11px 12px;
}
.countries-section .country-card h3 {
font-size: 18px;
}
}
/* Corporate photo archive: editorial header, segmented filters and image-led cards. */
.home-photo-gallery {
padding: 46px 0;
background: #fff;
}
.home-photo-gallery > .container {
padding: 30px;
border: 1px solid #d9e5f4;
border-radius: 24px;
background: linear-gradient(135deg, #fff, #f5f8fc);
box-shadow: 0 14px 40px #153e7010;
}
.home-gallery-heading {
align-items: center;
gap: 36px;
margin-bottom: 26px;
}
.home-gallery-heading .eyebrow {
display: flex;
align-items: center;
gap: 10px;
font-size: 10px;
letter-spacing: 1.5px;
font-weight: 700;
color: #22598f;
margin-bottom: 13px;
}
.home-gallery-heading .eyebrow:before {
content: '';
width: 28px;
height: 2px;
background: #2477bc;
}
.home-gallery-heading h2 {
font-size: 34px;
line-height: 1.18;
letter-spacing: -0.8px;
font-weight: 700;
max-width: 560px;
}
.home-gallery-heading-end {
max-width: 310px;
padding-left: 24px;
border-left: 1px solid #d6e3f0;
}
.home-gallery-heading-end p {
font-size: 13px;
line-height: 1.8;
margin-bottom: 12px;
}
.home-gallery-heading-end a {
display: inline-flex;
align-items: center;
min-height: 32px;
font-size: 12px;
text-underline-offset: 4px;
}
.home-gallery-toolbar {
padding: 18px 0 0;
margin-bottom: 20px;
border-top: 1px solid #d9e5f4;
gap: 16px;
}
.home-gallery-filters {
padding: 4px;
gap: 3px;
background: #e9f0f8;
border: 1px solid #d9e5f4;
border-radius: 13px;
}
.home-gallery-filters button {
padding: 9px 15px;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: #345573;
min-height: 38px;
font-size: 11px;
}
.home-gallery-filters button[aria-pressed='true'] {
background: #164b86;
border-color: #164b86;
color: #fff;
box-shadow: 0 3px 8px #163f7015;
}
.home-gallery-navigation {
gap: 9px;
}
.home-gallery-navigation > span {
font-size: 11px;
margin-right: 8px;
}
.home-gallery-navigation button {
border-radius: 10px;
width: 38px;
height: 38px;
border-color: #c5d6e8;
background: white;
}
.home-gallery-navigation button:not(:disabled):hover {
background: #164b86;
color: white;
border-color: #164b86;
}
.home-gallery-track {
gap: 18px;
padding: 3px 0;
scrollbar-width: none;
overflow-x: auto;
overflow-y: hidden;
}
.home-gallery-track::-webkit-scrollbar {
display: none;
}
.home-gallery-open {
border: 1px solid #d3e0ef;
border-radius: 16px;
box-shadow: none;
isolation: isolate;
transition:
border-color 0.18s,
box-shadow 0.18s;
}
.home-gallery-open:hover {
border-color: #3976b2;
box-shadow: 0 5px 16px #123e6b18;
}
.home-gallery-open picture,
.home-gallery-open img {
height: 254px;
object-fit: cover;
}
.home-gallery-enlarge {
width: 34px;
height: 34px;
top: 14px;
right: 14px;
border: 1px solid #ffffff90;
border-radius: 10px;
background: #ffffffed;
color: #194f87;
font-size: 23px;
z-index: 2;
box-shadow: none;
}
.home-gallery-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 42px 20px 20px;
background: linear-gradient(180deg, transparent, #071c35ed 75%);
color: #fff;
z-index: 1;
}
.home-gallery-caption small {
color: #daebfb;
font-size: 9px;
letter-spacing: 1.2px;
font-weight: 600;
margin-bottom: 7px;
}
.home-gallery-caption strong {
font-size: 16px;
font-weight: 650;
line-height: 1.4;
color: #fff;
padding-right: 22px;
}
.home-gallery-caption > span {
right: 20px;
bottom: 20px;
color: #fff;
font-size: 21px;
}
.home-gallery-status {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.home-photo-gallery :focus-visible {
outline: 3px solid #1d67ad;
outline-offset: 3px;
}
@media (max-width: 1100px) {
.home-gallery-open picture,
.home-gallery-open img {
height: 235px;
}
.home-photo-gallery > .container {
padding: 25px;
}
.home-gallery-heading h2 {
font-size: 30px;
}
}
@media (max-width: 700px) {
.home-photo-gallery {
padding: 30px 0;
}
.home-photo-gallery > .container {
padding: 19px 16px;
border-radius: 19px;
}
.home-gallery-heading {
margin-bottom: 20px;
}
.home-gallery-heading h2 {
font-size: 27px;
letter-spacing: -0.5px;
}
.home-gallery-heading-end {
max-width: none;
border-left: 0;
padding-left: 0;
margin-top: 14px;
}
.home-gallery-heading-end p {
font-size: 12px;
margin-bottom: 5px;
}
.home-gallery-toolbar {
padding-top: 15px;
gap: 12px;
}
.home-gallery-filters {
width: 100%;
justify-content: space-between;
gap: 1px;
}
.home-gallery-filters button {
padding: 8px 9px;
font-size: 10px;
flex: 1;
}
.home-gallery-navigation {
align-self: flex-end;
}
.home-gallery-track {
gap: 12px;
}
.home-gallery-slide {
flex-basis: 90%;
}
.home-gallery-open picture,
.home-gallery-open img {
height: 215px;
}
.home-gallery-caption {
padding: 40px 15px 16px;
}
.home-gallery-caption strong {
font-size: 15px;
}
.home-gallery-caption > span {
right: 15px;
bottom: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.home-gallery-open {
transition: none;
}
}
/* Blog mega menu, matching the corporate photo-card navigation. */
.visual-site-header .blog-mega {
background: #fff;
border: 1px solid #d9e4ef;
border-top: 3px solid #1b64af;
border-radius: 24px;
padding: 18px;
box-shadow: 0 24px 65px #071c3b35;
color: #1c344f;
gap: 18px;
min-width: 0;
max-height: calc(100dvh - 90px);
overflow: auto;
}
.visual-site-header .blog-details[open] > .blog-mega {
display: grid;
grid-template-columns: 1.7fr 1fr;
}
.visual-site-header .blog-details:not([open]) > .blog-mega {
display: none;
}
.visual-site-header .blog-mega a {
padding: 0;
text-decoration: none;
color: #1d3858;
border-radius: 0;
background: transparent;
font-size: inherit;
line-height: inherit;
}
.blog-menu-main {
min-width: 0;
}
.blog-menu-heading {
display: flex;
justify-content: space-between;
gap: 15px;
align-items: center;
margin: 5px 5px 15px;
font-size: 11px;
font-weight: 750;
letter-spacing: 1.4px;
color: #17589e;
}
.visual-site-header .blog-menu-heading > a {
font-size: 11px;
letter-spacing: 0;
color: #17589e;
display: flex;
gap: 8px;
align-items: center;
min-height: 24px;
}
.blog-menu-heading b {
background: #edf4fc;
padding: 4px 7px;
border-radius: 20px;
font-size: 10px;
}
.blog-feature-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.visual-site-header .blog-mega .blog-feature-card {
display: flex;
flex-direction: column;
height: 350px;
overflow: hidden;
border: 1px solid #d9e4ef;
border-radius: 17px;
background: #f5f7fa;
transition:
border-color 0.18s,
background 0.18s;
}
.visual-site-header .blog-mega .blog-feature-card:hover {
background: #edf4fc;
border-color: #aac8e9;
}
.blog-feature-card > img {
display: block;
width: 100%;
height: 145px;
object-fit: cover;
flex-shrink: 0;
}
.blog-feature-copy {
padding: 15px;
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.blog-feature-copy > small {
font-size: 9px;
font-weight: 700;
color: #215e9b;
line-height: 1.5;
margin-bottom: 8px;
}
.blog-feature-copy > strong {
font-size: 15px;
font-weight: 700;
color: #1c324b;
line-height: 1.35;
letter-spacing: -0.25px;
}
.blog-feature-read {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 16px;
font-size: 10px;
color: #55708b;
}
.blog-menu-topics {
min-width: 0;
border-radius: 18px;
background: #f4f6f9;
padding: 17px;
display: flex;
flex-direction: column;
}
.blog-menu-topics > h2 {
color: #17599f;
font-size: 11px;
letter-spacing: 1.4px;
font-weight: 750;
line-height: 1.5;
margin: 0 0 12px;
}
.blog-topic-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 16px;
}
.visual-site-header .blog-topic-links > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid #dfe5ed;
font-size: 12px;
font-weight: 600;
padding: 9px 0;
min-height: 36px;
line-height: 1.5;
}
.blog-topic-links > a > span:last-child {
color: #1d67af;
font-size: 13px;
}
.visual-site-header .blog-mega .blog-menu-faq {
display: flex;
align-items: center;
gap: 11px;
background: white;
border: 1px solid #dbe4ee;
border-radius: 12px;
padding: 12px;
margin: 14px 0 10px;
}
.blog-menu-faq > span:first-child {
flex: 0 0 33px;
display: grid;
place-items: center;
width: 33px;
height: 33px;
background: #1b62aa;
color: #fff;
border-radius: 10px;
font-size: 20px;
font-weight: 700;
}
.blog-menu-faq > span:last-child {
margin-left: auto;
color: #1b62aa;
}
.blog-menu-faq strong {
font-size: 13px;
display: block;
line-height: 1.5;
}
.blog-menu-faq small {
font-size: 10px;
color: #5d7188;
display: block;
line-height: 1.6;
}
.visual-site-header .blog-mega .blog-menu-call {
display: block;
background: linear-gradient(110deg, #16477e, #216bb4);
color: white;
border-radius: 12px;
padding: 15px;
margin-top: auto;
}
.blog-menu-call > span {
font-size: 9px;
letter-spacing: 0.2px;
display: block;
line-height: 1.6;
color: #e0efff;
}
.blog-menu-call > strong {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 25px;
line-height: 1.2;
margin-top: 7px;
color: #fff;
}
.blog-mega :focus-visible {
outline: 3px solid #2972b8;
outline-offset: 3px;
}
@media (min-width: 1101px) {
.visual-site-header .nav-shell {
position: relative;
}
.visual-site-header .nav-end,
.visual-site-header .blog-details {
position: static;
}
.visual-site-header .blog-details > .blog-mega {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
width: 100%;
margin: 0;
min-width: 0;
}
}
@media (max-width: 1100px) {
.visual-site-header .nav-end {
flex-wrap: wrap;
}
.visual-site-header .nav-end .blog-details {
flex: 1 1 100%;
}
.visual-site-header .blog-details > .blog-mega {
position: static;
width: 100%;
max-height: none;
overflow: visible;
margin: 10px 0 16px;
box-shadow: none;
}
.visual-site-header .blog-details[open] > .blog-mega {
grid-template-columns: 1fr;
}
.blog-feature-card > img {
height: 135px;
}
.visual-site-header .blog-mega .blog-feature-card {
height: 300px;
}
}
@media (max-width: 700px) {
.visual-site-header .blog-mega {
padding: 12px;
border-radius: 16px;
}
.blog-menu-heading {
font-size: 9px;
letter-spacing: 1px;
margin-inline: 0;
}
.blog-feature-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.visual-site-header .blog-mega .blog-feature-card {
height: auto;
min-height: 120px;
flex-direction: row;
}
.blog-feature-card > img {
width: 34%;
height: 126px;
align-self: stretch;
object-fit: cover;
}
.blog-feature-copy {
padding: 12px;
}
.blog-feature-copy > strong {
font-size: 13px;
}
.blog-feature-copy > small {
font-size: 8px;
margin-bottom: 5px;
}
.blog-feature-read {
font-size: 9px;
padding-top: 10px;
}
.blog-menu-topics {
padding: 13px;
}
.visual-site-header .blog-topic-links > a {
font-size: 11px;
}
}
@media (prefers-reduced-motion: reduce) {
.visual-site-header .blog-mega .blog-feature-card {
transition: none;
}
}
/* Equal-size customer experience cards, presented directly on this page. */
.reviews-charcoal {
padding: 46px 0;
background: radial-gradient(ellipse at 100% 0, #23497755, transparent 60%), #101a29;
color: #fff;
}
.reviews-charcoal .home-reviews-heading {
align-items: center;
margin-bottom: 22px;
}
.reviews-charcoal .home-reviews-heading .eyebrow {
font-size: 10px;
letter-spacing: 1.5px;
color: #b6d7f7;
font-weight: 700;
}
.reviews-charcoal .home-reviews-heading h2 {
font-size: 34px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.7px;
}
.reviews-intro {
max-width: 300px;
color: #d7e4f3;
font-size: 13px;
line-height: 1.8;
margin: 0;
}
.customer-review-controls > button {
border-radius: 10px;
background: #ffffff08;
border-color: #7c99bb;
}
.reviews-charcoal .home-review-grid {
scrollbar-width: none;
padding: 3px;
overflow-x: auto;
overflow-y: hidden;
gap: 20px;
}
.reviews-charcoal .home-review-grid::-webkit-scrollbar {
display: none;
}
.reviews-charcoal .home-review-card {
height: 280px;
border: 1px solid #d9e4ef;
border-top: 3px solid #438ac8;
border-radius: 18px;
background: linear-gradient(145deg, #fff, #f4f8fc);
padding: 24px;
box-shadow: none;
}
.reviews-charcoal .home-review-topic {
margin: 0 0 22px;
}
.reviews-charcoal .home-review-topic > span:first-child {
font-size: 9px;
letter-spacing: 0.8px;
font-weight: 700;
padding: 6px 9px;
border-radius: 7px;
background: #e9f2fb;
color: #285f92;
}
.reviews-charcoal .home-review-topic > span:last-child {
color: #3780bc;
font-size: 24px;
}
.reviews-charcoal .home-review-card > p {
font-size: 19px;
font-weight: 500;
line-height: 1.6;
color: #1c3d60;
margin: 0;
min-height: 0;
max-width: 330px;
letter-spacing: -0.2px;
}
.reviews-charcoal .home-review-author {
margin-top: auto;
padding-top: 17px;
border-top: 1px solid #dfe5ed;
}
.reviews-charcoal .home-review-author > span {
width: 40px;
height: 40px;
flex: 0 0 40px;
border-radius: 12px;
background: #1b548b;
font-size: 12px;
}
.reviews-charcoal .home-review-author h3 {
font-size: 14px;
font-weight: 700;
line-height: 1.4;
margin: 0 0 4px;
color: #193b60;
}
.reviews-charcoal .home-review-author small {
font-size: 10px;
color: #5c728a;
}
@media (max-width: 700px) {
.reviews-charcoal {
padding: 32px 0;
}
.reviews-charcoal .home-reviews-heading h2 {
font-size: 28px;
}
.reviews-intro {
max-width: none;
font-size: 12px;
margin-top: 15px;
}
.reviews-charcoal .home-review-grid {
gap: 14px;
}
.reviews-charcoal .home-review-card {
height: 280px;
padding: 21px;
}
.reviews-charcoal .home-review-card > p {
font-size: 18px;
}
}
.home-example-reviews.reviews-charcoal .home-review-card {
height: auto;
min-height: 460px;
display: flex;
flex-direction: column;
}
.home-example-reviews.reviews-charcoal .home-review-card > p {
font-size: 15px;
line-height: 1.7;
margin: 16px 0 22px;
max-width: none;
}
.home-example-route {
font-size: 12px;
line-height: 1.55;
font-weight: 700;
color: #285580;
margin-top: 15px;
}
.home-example-reviews .reviews-intro {
max-width: 480px;
}
/* assets/brand-blue.css */
/* Blue design surfaces match the homepage volume-planning panel. */
:root {
--brand-logo-blue: #303089;
--brand-gradient:
radial-gradient(ellipse at 100% 0%, #276fc0, transparent 60%),
linear-gradient(140deg, #0c2e5a, #164d97);
--brand-gradient-deep: linear-gradient(140deg, #0c2e5a, #164d97);
--brand-gradient-soft: linear-gradient(125deg, #f9fbfe, #eaf2fc);
}
.primary-bar {
background: var(--brand-gradient);
}
.photo-story.story-timeline {
background: var(--brand-gradient);
}
.page-intro {
background: var(--brand-gradient-deep);
}
.countries-section,
.international-process,
.moving-guides,
.footer-call-panel,
.rail-contact {
background: var(--brand-gradient);
}
.visual-site-header .service-menu-call,
.visual-site-header .blog-mega .blog-menu-call {
background: var(--brand-gradient);
}
.route-panel .route-submit,
.home-volume .button,
.country-banner .button,
.country-end .button {
background: var(--brand-gradient);
color: #fff;
}
.button:not(.nav-cta):not(.hero-call):not(.hero-whatsapp):not(.callback-submit) {
background-image: var(--brand-gradient);
}
.visual-site-header .blog-icon,
.visual-site-header .blog-menu-faq > span:first-child,
.home-gallery-filters button[aria-pressed='true'],
.moving-guide-filters button[aria-pressed='true'],
.reviews-charcoal .home-review-author > span {
background: var(--brand-gradient-deep);
color: #fff;
}
.home-photo-gallery > .container,
.country-banner {
background: var(--brand-gradient-soft);
}
/* Dark hover belongs to the desktop navigation bar only. */
@media (min-width: 1101px) {
.visual-site-header #main-nav > a:not(.nav-cta):hover,
.visual-site-header #main-nav > a:not(.nav-cta):focus-visible,
.visual-site-header #main-nav .nav-details > summary:hover,
.visual-site-header #main-nav .nav-details > summary:focus-visible,
.visual-site-header #main-nav .nav-details[open] > summary {
background: #0c2e5a;
}
}
.reference-hero .hero-visual:before {
background: linear-gradient(90deg, #0c2e5af5 0%, #164d97b8 52%, #164d9718 100%);
}
@media (max-width: 760px) {
.reference-hero .hero-visual:before {
background: linear-gradient(90deg, #0c2e5af2, #164d97db 70%, #164d97b8);
}
}
/* Straight, slightly stronger primary navigation and matching action pills. */
.visual-site-header #main-nav > a,
.visual-site-header #main-nav > .nav-details > summary,
.visual-site-header #main-nav .nav-end > .blog-details > summary,
.visual-site-header #main-nav .nav-cta {
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: 750;
letter-spacing: 0;
}
.visual-site-header .brand-caption strong {
max-width: 340px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 700;
font-style: normal;
line-height: 1.4;
letter-spacing: 0;
}
.visual-site-header .brand-caption small {
display: block;
margin-top: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 650;
line-height: 1.4;
letter-spacing: 1px;
color: #335c8b;
}
.visual-site-header #main-nav .blog-details {
align-self: center;
}
.visual-site-header #main-nav .blog-details > summary,
.visual-site-header #main-nav .blog-details[open] > summary,
.visual-site-header #main-nav .blog-details > summary:hover,
.visual-site-header #main-nav .blog-details > summary:focus-visible {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
width: max-content;
min-width: 96px;
min-height: 42px;
height: 42px;
padding: 10px 20px;
margin: 0;
border: 1px solid #fff;
border-radius: 30px;
background: #fff;
background-image: none;
color: #16519e;
box-shadow: none;
font-size: 12px;
line-height: 1.2;
}
.visual-site-header #main-nav .blog-details > summary:hover,
.visual-site-header #main-nav .blog-details[open] > summary {
background: #edf3fa;
}
.visual-site-header #main-nav .blog-details > summary:before {
display: none;
}
.visual-site-header #main-nav .blog-details .blog-icon {
display: none;
}
/* Preserve the uploaded artwork's own colors and transparency. */
.visual-brand .brand-plaque > img {
filter: none;
}
.corporate-footer .footer-brand > img {
filter: brightness(0) invert(1);
}
.visual-site-header #main-nav .nav-end .blog-details > summary,
.visual-site-header #main-nav .nav-cta {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-weight: 800;
font-style: normal;
line-height: 1.2;
color: #303089;
}
.visual-site-header #main-nav .blog-details > summary {
position: relative;
}
.visual-site-header #main-nav .blog-details > summary:after {
position: absolute;
right: 13px;
top: calc(50% - 3px);
}
/* Header refinements: original transparent logo, larger contact, inline chevron. */
.visual-site-header .visual-brand .brand-plaque {
width: 278px;
height: 100px;
padding: 0;
background: none;
box-shadow: none;
}
.visual-site-header .visual-brand .brand-plaque > img {
width: 270px;
max-height: 100px;
height: auto;
}
.visual-site-header .header-phone-block {
padding: 12px 26px;
transform: none;
transform-origin: center;
}
.visual-site-header .header-phone-block > strong {
font-size: 38px;
}
.visual-site-header #main-nav .blog-details > summary {
gap: 10px;
padding-inline: 18px;
min-width: 110px;
}
.visual-site-header #main-nav .blog-details > summary:after {
content: '';
position: static;
display: block;
flex: 0 0 6px;
width: 6px;
height: 6px;
margin: 0 0 3px 1px;
border: 0;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
transform: rotate(45deg);
transition: transform 0.18s;
}
.visual-site-header #main-nav .blog-details[open] > summary:after {
transform: rotate(225deg);
margin-top: 5px;
}
@keyframes contact-sway {
0%,
100% {
transform: translateX(0) rotate(0);
}
25% {
transform: translateX(-3px) rotate(-1deg);
}
75% {
transform: translateX(3px) rotate(1deg);
}
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.visual-site-header .header-phone-block:hover {
animation: contact-sway 0.5s ease-in-out;
}
}
.footer-plan-stages > span {
transition:
border-color 0.18s,
background 0.18s,
box-shadow 0.18s;
}
.footer-plan-stages > span:first-child {
border-color: #ffffff25;
}
.footer-plan-stages > span:hover {
border-color: #6baded;
background: #174d8340;
box-shadow: 0 0 0 1px #6baded35;
}
.footer-social {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 0 0 14px;
}
.footer-social a {
font-size: 11px;
padding: 7px 11px;
border: 1px solid #ffffff35;
border-radius: 20px;
text-decoration: none;
color: #e9f2ff;
}
@media (max-width: 1100px) {
.visual-site-header .visual-brand .brand-plaque {
width: 220px;
height: 80px;
}
.visual-site-header .visual-brand .brand-plaque > img {
width: 215px;
max-height: 80px;
}
.visual-site-header .header-phone-block > strong {
font-size: 30px;
}
}
@media (max-width: 760px) {
.visual-site-header .visual-brand .brand-plaque {
width: 190px;
height: 72px;
}
.visual-site-header .visual-brand .brand-plaque > img {
width: 185px;
max-height: 72px;
}
}
@media (prefers-reduced-motion: reduce) {
.footer-plan-stages > span,
.visual-site-header #main-nav .blog-details > summary:after {
transition: none;
}
}
/* Fixed-size navigation actions: state changes affect color only. */
.visual-site-header #main-nav .nav-end .blog-details > summary,
.visual-site-header #main-nav .nav-end .blog-details[open] > summary,
.visual-site-header #main-nav .nav-end .blog-details > summary:hover,
.visual-site-header #main-nav .nav-end .blog-details > summary:focus-visible,
.visual-site-header #main-nav .nav-end .nav-cta,
.visual-site-header #main-nav .nav-end .nav-cta:hover,
.visual-site-header #main-nav .nav-end .nav-cta:focus-visible {
box-sizing: border-box;
width: 116px;
min-width: 116px;
height: 44px;
min-height: 44px;
padding: 10px 18px;
margin: 0;
border: 1px solid #fff;
transform: none !important;
scale: 1 !important;
animation: none;
transition:
background-color 0.18s,
color 0.18s,
border-color 0.18s;
line-height: 1.2;
}
.visual-site-header #main-nav .nav-end .blog-details > summary,
.visual-site-header #main-nav .nav-end .nav-cta {
background: #fff;
color: #303089;
}
.visual-site-header #main-nav .nav-end .blog-details > summary:hover,
.visual-site-header #main-nav .nav-end .blog-details[open] > summary,
.visual-site-header #main-nav .nav-end .blog-details > summary:focus-visible,
.visual-site-header #main-nav .nav-end .nav-cta:hover,
.visual-site-header #main-nav .nav-end .nav-cta:focus-visible {
background: #dceaf9;
color: #173c6c;
border-color: #b9d2ed;
}
/* The accent tilts independently of the readable phone content. */
.visual-site-header .header-phone-block {
position: relative;
border-right: 0;
}
.visual-site-header .header-phone-block:after {
content: '';
position: absolute;
right: 0;
top: 7px;
bottom: 7px;
width: 4px;
border-radius: 2px;
background: #2467af;
transform: skewX(-13deg);
pointer-events: none;
}
/* Keep one dark main-content section after removing the reviews. */
.home-photo-gallery {
background: #111720;
color: #fff;
}
.home-photo-gallery > .container {
background: transparent;
border-color: #ffffff24;
box-shadow: none;
}
.home-photo-gallery .home-gallery-heading h2 {
color: #fff;
}
.home-photo-gallery .home-gallery-heading .eyebrow {
color: #b9d9f7;
}
.home-photo-gallery .home-gallery-heading .eyebrow:before {
background: #80b8ed;
}
.home-photo-gallery .home-gallery-heading-end {
border-color: #ffffff30;
}
.home-photo-gallery .home-gallery-heading-end p {
color: #d3dfed;
}
.home-photo-gallery .home-gallery-heading-end a {
color: #d3e9ff;
}
.home-photo-gallery .home-gallery-toolbar {
border-color: #ffffff30;
}
.home-photo-gallery .home-gallery-filters {
background: #1c2a3c;
border-color: #405369;
}
.home-photo-gallery .home-gallery-filters button {
color: #e0ebf8;
}
.home-photo-gallery .home-gallery-filters button[aria-pressed='true'] {
background: #dceafa;
color: #153f6e;
border-color: #dceafa;
}
.home-photo-gallery .home-gallery-status,
.home-photo-gallery .home-gallery-navigation > span {
color: #d3dfed;
}
.home-photo-gallery :focus-visible {
outline-color: #8ec7ff;
}
@media (prefers-reduced-motion: reduce) {
.visual-site-header #main-nav .nav-end .nav-cta,
.visual-site-header #main-nav .nav-end .blog-details > summary {
transition: none;
}
}
/* A complete angled contact panel: its blue surface and accent share the same edge. */
.visual-site-header .header-phone-block {
isolation: isolate;
background: transparent;
border-radius: 0;
padding: 12px 34px;
color: #fff;
}
.visual-site-header .header-phone-block:before {
content: '';
position: absolute;
inset: 0 12px;
z-index: -1;
background: linear-gradient(115deg, #143c70, #245c9b);
transform: skewX(-13deg);
border-radius: 4px;
pointer-events: none;
transition: background 0.2s;
}
.visual-site-header .header-phone-block:after {
right: 12px;
top: 0;
bottom: 0;
background: #73b4ef;
transform: skewX(-13deg);
border-radius: 2px;
transition: background-color 0.2s;
}
.visual-site-header .header-phone-block > span,
.visual-site-header .header-phone-block > strong,
.visual-site-header .header-phone-block > small {
color: #fff;
transition: color 0.2s;
}
.visual-site-header .header-phone-block:hover:before,
.visual-site-header .header-phone-block:focus-visible:before {
background: linear-gradient(115deg, #e5f0fc, #c8def5);
}
.visual-site-header .header-phone-block:hover:after,
.visual-site-header .header-phone-block:focus-visible:after {
background: #245c9b;
}
.visual-site-header .header-phone-block:hover > span,
.visual-site-header .header-phone-block:hover > strong,
.visual-site-header .header-phone-block:hover > small,
.visual-site-header .header-phone-block:focus-visible > span,
.visual-site-header .header-phone-block:focus-visible > strong,
.visual-site-header .header-phone-block:focus-visible > small {
color: #173c6c;
}
@media (prefers-reduced-motion: reduce) {
.visual-site-header .header-phone-block:before,
.visual-site-header .header-phone-block:after,
.visual-site-header .header-phone-block > span,
.visual-site-header .header-phone-block > strong,
.visual-site-header .header-phone-block > small {
transition: none;
}
}
/* assets/contact-footer.css */
/* Contact page: blue introduction, compact three-step request, dark branch directory. */
.contact-hero {
background: var(--brand-gradient);
color: #fff;
padding: 34px 0 0;
position: relative;
}
.contact-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 76px;
align-items: center;
padding-bottom: 40px;
}
.contact-hero .breadcrumb,
.contact-hero .breadcrumb a {
color: #e1edfb;
font-size: 12px;
margin-bottom: 25px;
}
.contact-eyebrow {
display: block;
font-size: 10px;
font-weight: 750;
letter-spacing: 0.13em;
color: #bddcfa;
margin-bottom: 16px;
}
.contact-hero h1 {
color: #fff;
font-size: clamp(52px, 6vw, 84px);
margin: 0 0 12px;
line-height: 1.02;
font-weight: 750;
}
.contact-hero-copy > h2 {
color: #fff;
font-size: 27px;
line-height: 1.24;
margin: 0 0 20px;
letter-spacing: -0.6px;
}
.contact-hero-copy > p {
font-size: 15px;
line-height: 1.8;
color: #e8f1fc;
max-width: 530px;
margin: 0 0 24px;
}
.contact-main-phone {
display: block;
width: fit-content;
max-width: 100%;
padding: 13px 20px;
background: #fff;
border: 1px solid #d8e5f7;
border-radius: 14px;
text-decoration: none;
color: #143f76;
box-shadow: 0 12px 24px #001c3f25;
}
.contact-main-phone > span {
display: block;
font-size: 9px;
font-weight: 750;
letter-spacing: 1px;
}
.contact-main-phone > strong {
font-size: 48px;
line-height: 1.2;
font-weight: 850;
letter-spacing: -1.5px;
white-space: nowrap;
}
.contact-main-phone i {
font-style: normal;
font-size: 27px;
}
.contact-hero-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 20px;
}
.contact-hero-actions > a {
display: flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 12px 19px;
border: 1px solid #ffffff90;
border-radius: 26px;
text-decoration: none;
font-size: 12px;
font-weight: 700;
color: #fff;
}
.contact-hero-actions > .contact-wa {
background: #087440;
border-color: #087440;
}
.contact-hero-actions > a:hover {
background: #e2efff;
color: #143f76;
}
.contact-hero-tags {
display: flex;
gap: 14px;
flex-wrap: wrap;
padding: 0;
margin: 22px 0 0;
list-style: none;
color: #e0edfc;
font-size: 10px;
}
.contact-hero-tags li:before {
content: '✓';
margin-right: 5px;
color: #c6e7ff;
}
.contact-form-card {
padding: 28px;
background: #fff;
color: #182d46;
border: 1px solid #cfdef0;
border-radius: 20px;
box-shadow: 0 22px 45px #00152c45;
min-width: 0;
}
.contact-form-kicker {
font-size: 9px;
font-weight: 750;
letter-spacing: 0.12em;
color: #28588b;
}
.contact-form-card > h2 {
font-size: 31px;
line-height: 1.16;
letter-spacing: -0.6px;
margin: 10px 0 18px;
color: #122b49;
font-weight: 750;
}
.contact-form-card .callback-form {
display: block;
background: none;
padding: 0;
border: 0;
min-width: 0;
}
.contact-progress {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
padding: 0 0 16px;
margin: 0 0 20px;
border-bottom: 1px solid #dce5ef;
list-style: none;
}
.contact-progress li {
padding: 6px 8px;
font-size: 10px;
font-weight: 700;
line-height: 1.4;
border: 1px solid #d7e1ed;
background: #f2f5f9;
color: #53677d;
border-radius: 5px;
}
.contact-progress li[aria-current='step'] {
border-color: #1b579c;
background: #eaf2fc;
color: #184779;
}
.contact-form-step[hidden] {
display: none !important;
}
.contact-form-step h3 {
font-size: 17px;
letter-spacing: -0.3px;
line-height: 1.4;
margin: 0 0 16px;
color: #162e4c;
}
.contact-form-card label,
.contact-form-card legend {
font-size: 11px;
font-weight: 700;
color: #294865;
}
.contact-form-card fieldset {
padding: 13px;
border: 1px solid #dce5ef;
border-radius: 9px;
margin: 0 0 14px;
min-width: 0;
background: #f5f7fa;
}
.contact-form-card legend {
padding: 0 5px;
}
.contact-form-card legend span {
margin-right: 7px;
color: #40638c;
}
.contact-form-card .callback-route-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.contact-form-card .callback-field {
min-width: 0;
}
.contact-form-card input:not([type='checkbox']),
.contact-form-card select {
display: block;
width: 100%;
min-height: 43px;
max-width: 100%;
border: 1px solid #becddd;
border-radius: 6px;
padding: 9px 10px;
background: #fff;
color: #203c5b;
font-size: 12px;
box-sizing: border-box;
}
.contact-form-card input[aria-invalid='true'] {
border-color: #b82c36;
}
.contact-form-card .callback-field label {
display: block;
margin-bottom: 6px;
}
.contact-form-card .callback-person {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
}
.contact-form-card .callback-phone {
display: grid;
grid-template-columns: minmax(110px, 0.9fr) minmax(0, 1.1fr);
gap: 7px;
}
.contact-form-card .callback-phone select {
font-size: 10px;
}
.contact-form-card .callback-field small {
display: block;
font-size: 10px;
color: #5b6e83;
line-height: 1.5;
margin-top: 5px;
}
.contact-form-card .callback-field-error {
color: #a52332 !important;
}
.contact-form-card .callback-field-error:empty {
display: none;
}
.contact-form-card .callback-help,
.contact-step-hint {
font-size: 11px;
line-height: 1.65;
color: #5b6e83;
margin: 8px 0 14px;
}
.contact-form-step > label {
display: block;
margin: 15px 0 6px;
}
.contact-step-nav {
display: none;
align-items: center;
gap: 10px;
margin-top: 18px;
}
.contact-wizard-ready .contact-step-nav {
display: flex;
}
.contact-step-nav button,
.contact-final-back {
font: inherit;
border: 1px solid #c6d6e8;
border-radius: 24px;
background: #edf3fb;
color: #224d7b;
min-height: 43px;
padding: 10px 17px;
font-size: 12px;
font-weight: 700;
}
.contact-step-nav [data-contact-next] {
flex: 1;
background: #194f91;
border-color: #194f91;
color: white;
}
.contact-step-nav [data-contact-next]:hover {
background: #123d72;
}
.contact-final-back {
margin-top: 16px;
}
.contact-step-error {
font-size: 11px;
color: #a52332;
margin: 0;
}
.contact-step-error:empty {
display: none;
}
.contact-form-card .callback-check {
display: flex;
gap: 9px;
align-items: flex-start;
margin-top: 17px;
font-size: 10px;
font-weight: 400;
line-height: 1.6;
}
.contact-form-card .callback-check input {
flex: 0 0 16px;
width: 16px;
height: 16px;
margin-top: 3px;
}
.contact-form-card .callback-submit-row {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
margin-top: 18px;
}
.contact-form-card .callback-submit-row > p {
font-size: 10px;
color: #546e88;
line-height: 1.6;
margin: 0;
}
.contact-form-card .callback-submit {
background: #087440;
border-color: #087440;
width: 100%;
min-height: 45px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 12px;
border-radius: 25px;
}
.contact-form-card .callback-status {
font-size: 11px;
color: #284d76;
line-height: 1.6;
margin: 12px 0 0;
}
.contact-form-card .callback-status:empty {
display: none;
}
.contact-form-card .callback-form > section {
padding: 0;
margin: 0;
border: 0;
}
.contact-form-note {
font-size: 10px;
line-height: 1.6;
color: #536b83;
text-align: center;
margin: 16px 0 0;
}
.contact-channel-grid {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
transform: translateY(24px);
z-index: 1;
}
.contact-channel-grid > a {
position: relative;
padding: 17px 30px 17px 18px;
background: #fff;
border: 1px solid #d7e1ed;
border-radius: 11px;
text-decoration: none;
box-shadow: 0 9px 18px #001a3530;
min-width: 0;
color: #142d49;
}
.contact-channel-grid > a:first-child {
background: #111b29;
color: #fff;
border-color: #344155;
}
.contact-channel-grid > a > span {
display: block;
font-size: 8px;
letter-spacing: 1px;
font-weight: 750;
margin-bottom: 5px;
color: #3e648d;
}
.contact-channel-grid > a:first-child > span {
color: #c0d9f3;
}
.contact-channel-grid strong {
font-size: 14px;
font-weight: 750;
overflow-wrap: anywhere;
}
.contact-channel-grid b {
position: absolute;
right: 13px;
top: 24px;
font-size: 14px;
}
.contact-locations {
background: linear-gradient(145deg, #20252e, #10141a);
color: #fff;
padding: 85px 0 65px;
}
.contact-locations-heading {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: end;
margin-bottom: 30px;
}
.contact-locations-heading h2 {
font-size: 42px;
line-height: 1.13;
color: #fff;
margin: 0;
}
.contact-locations-heading em {
font-style: normal;
color: #99c8f5;
}
.contact-locations-heading p {
color: #c7d4e3;
font-size: 14px;
line-height: 1.8;
margin: 0;
}
.contact-locations-grid {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
gap: 22px;
align-items: start;
}
.contact-location-list {
display: grid;
gap: 11px;
}
.contact-location-card {
border: 1px solid #ffffff25;
border-radius: 12px;
background: #ffffff04;
overflow: hidden;
}
.contact-location-card:has(.location-select[aria-pressed='true']) {
background: #fff;
border-color: #d8e8f9;
}
.location-select {
display: block;
width: 100%;
padding: 18px 20px 7px;
text-align: left;
background: none;
border: 0;
color: #fff;
}
.location-select > span:first-child {
display: block;
font-size: 9px;
letter-spacing: 0.7px;
font-weight: 750;
color: #aacdf1;
margin-bottom: 7px;
}
.location-select > strong {
display: block;
font-size: 17px;
line-height: 1.3;
margin-bottom: 8px;
}
.location-select .location-address {
display: block;
font-size: 12px;
line-height: 1.65;
color: #d3deeb;
}
.location-select[aria-pressed='true'] {
color: #142c47;
}
.location-select[aria-pressed='true'] > span:first-child {
color: #295d95;
}
.location-select[aria-pressed='true'] .location-address {
color: #375875;
}
.location-card-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 3px 20px 18px;
}
.location-card-links a {
font-size: 10px;
color: #bfd9f3;
}
.contact-location-card:has(.location-select[aria-pressed='true']) .location-card-links a {
color: #1a4e87;
}
.contact-route-map {
border: 1px solid #ffffff25;
background: #ffffff03;
border-radius: 15px;
margin-bottom: 16px;
overflow: hidden;
}
.contact-route-map svg {
display: block;
width: 100%;
height: auto;
}
.contact-location-focus {
padding: 25px;
border: 1px solid #ffffff25;
border-radius: 15px;
background: #ffffff06;
}
.contact-location-focus h3 {
font-size: 26px;
color: #fff;
margin: 0 0 14px;
}
.contact-location-focus p {
font-size: 13px;
line-height: 1.8;
color: #d8e3ee;
margin-bottom: 12px;
}
.contact-location-focus .location-focus-note {
color: #b9cadd;
}
.location-focus-actions {
display: flex;
gap: 9px;
flex-wrap: wrap;
margin: 20px 0;
}
.location-focus-actions a {
padding: 10px 14px;
border: 1px solid #8caecb;
border-radius: 22px;
text-decoration: none;
font-size: 11px;
font-weight: 650;
color: #e6f2ff;
}
.location-focus-actions a:first-child {
background: #fff;
color: #194a7c;
border-color: #fff;
}
.contact-location-focus .contact-map-privacy {
font-size: 10px;
color: #b9cadd;
margin: 0;
}
.contact-hero :focus-visible,
.contact-locations :focus-visible {
outline: 3px solid #8dc9ff;
outline-offset: 4px;
}
.contact-form-card :focus-visible {
outline: 3px solid #a36700;
outline-offset: 3px;
}
/* Shared footer: complete directory, contact strip and legal controls. */
.footer-detailed {
background: radial-gradient(ellipse at 0 0, #1c3a5c55, transparent 50%), #101318;
padding: 38px 0 0;
}
.footer-detailed .footer-contact-band {
margin-bottom: 34px;
border-radius: 16px;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.7fr);
gap: 24px;
}
.footer-detailed .footer-call-panel {
padding: 26px 28px;
}
.footer-detailed .footer-main-phone {
font-size: 44px;
line-height: 1.12;
margin: 8px 0 11px;
}
.footer-detailed .footer-call-note {
font-size: 10px;
line-height: 1.6;
}
.footer-detailed .footer-contact-copy p {
font-size: 14px;
}
.footer-detailed .footer-contact-copy ul {
font-size: 10px;
gap: 10px;
}
.footer-detailed .footer-contact-actions {
padding: 20px 22px 20px 0;
}
.footer-detailed .footer-contact-actions a {
min-height: 43px;
padding: 10px;
font-size: 12px;
}
.footer-detailed .corporate-footer-grid {
grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
gap: 27px;
padding-bottom: 30px;
}
.footer-detailed .footer-brand {
margin-bottom: 17px;
}
.footer-detailed .footer-brand img {
width: 175px;
filter: brightness(0) invert(1);
}
.footer-detailed .footer-brand > span {
font-size: 8px;
letter-spacing: 0.8px;
line-height: 1.6;
}
.footer-detailed .footer-about p {
font-size: 12px;
line-height: 1.85;
}
.footer-detailed .footer-plan-stages > span {
font-size: 8px;
padding: 9px 5px;
}
.footer-detailed .footer-plan-stages b {
font-size: 22px;
}
.footer-detailed .footer-badges a {
font-size: 8px;
padding: 6px 8px;
}
.footer-detailed .footer-social {
gap: 6px;
}
.footer-detailed .footer-social a {
font-size: 10px;
padding: 6px 9px;
}
.footer-detailed .footer-feedback {
display: flex;
gap: 10px;
align-items: center;
width: fit-content;
padding: 9px 12px;
border: 1px solid #dde6f3;
background: #fff;
border-radius: 26px;
color: #17385e;
text-decoration: none;
font-size: 13px;
}
.footer-feedback strong,
.footer-feedback small {
display: block;
}
.footer-feedback strong {
font-size: 11px;
line-height: 1.4;
}
.footer-feedback small {
font-size: 9px;
color: #5b6c81;
}
.footer-detailed .footer-links h2 {
font-size: 10px;
letter-spacing: 0.6px;
margin-bottom: 17px;
}
.footer-detailed .footer-links > a {
font-size: 12px;
padding-bottom: 9px;
line-height: 1.65;
}
.footer-detail-strip {
display: grid;
grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
gap: 7px;
padding: 17px 0;
border-top: 1px solid #ffffff25;
border-bottom: 1px solid #ffffff25;
}
.footer-detail-strip > div,
.footer-detail-strip > a {
padding: 13px 14px;
border: 1px solid #ffffff20;
border-radius: 7px;
background: #ffffff04;
color: #e8eef8;
text-decoration: none;
min-width: 0;
overflow-wrap: anywhere;
}
.footer-detail-strip span {
display: block;
font-size: 8px;
letter-spacing: 0.7px;
color: #abc8e6;
margin-bottom: 7px;
font-weight: 700;
}
.footer-detail-strip strong,
.footer-detail-strip > div > a {
display: block;
font-size: 11px;
line-height: 1.65;
font-weight: 650;
color: #f3f6fa;
text-decoration: none;
}
.footer-detail-strip small {
display: block;
font-size: 10px;
line-height: 1.6;
color: #bdc9d8;
margin-top: 5px;
}
.footer-detailed .corporate-footer-bottom {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
border: 0;
gap: 20px;
padding: 20px 0 30px;
font-size: 9px;
align-items: start;
}
.footer-detailed .corporate-footer-bottom nav {
gap: 9px 13px;
font-size: 9px;
line-height: 1.65;
}
.footer-cookie-settings {
border: 0;
padding: 0;
background: none;
color: #cbd5e3;
font: inherit;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.footer-back-top {
border: 1px solid #ffffff35;
padding: 6px 10px;
border-radius: 18px;
font-size: 10px;
white-space: nowrap;
}
.footer-cookie-dialog {
width: min(560px, calc(100vw - 32px));
border: 1px solid #d2e1f2;
border-radius: 18px;
padding: 28px;
background: white;
color: #15385f;
}
.footer-cookie-dialog::backdrop {
background: #061528c9;
}
.footer-cookie-dialog h2 {
font-size: 25px;
line-height: 1.2;
margin: 0 0 20px;
}
.footer-cookie-dialog p {
font-size: 14px;
line-height: 1.85;
color: #37536e;
}
.footer-cookie-dialog > a {
font-size: 13px;
}
.footer-cookie-close {
display: block;
margin-top: 22px;
border: 1px solid #174e8b;
border-radius: 22px;
background: #174e8b;
color: #fff;
min-height: 43px;
padding: 10px 20px;
font: inherit;
font-size: 13px;
}
@media (max-width: 1100px) {
.contact-hero-grid {
gap: 35px;
}
.contact-form-card {
padding: 22px;
}
.contact-main-phone > strong {
font-size: 42px;
}
.contact-locations-heading {
gap: 35px;
}
.footer-detailed .corporate-footer-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 25px;
}
.footer-detailed .footer-about {
grid-column: 1/-1;
max-width: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 30px;
}
.footer-detailed .footer-brand {
grid-column: 1;
}
.footer-detailed .footer-about p {
grid-column: 2;
grid-row: 1/4;
}
.footer-detailed .footer-about .footer-plan-stages,
.footer-detailed .footer-about .footer-badges {
grid-column: 1;
}
.footer-detail-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.contact-hero {
padding-top: 25px;
}
.contact-hero-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.contact-hero h1 {
font-size: 60px;
}
.contact-hero-copy > h2 {
font-size: 25px;
}
.contact-hero-copy > p {
font-size: 14px;
}
.contact-hero .breadcrumb {
margin-bottom: 20px;
}
.contact-channel-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.contact-channel-grid > a {
padding: 14px 24px 14px 13px;
}
.contact-channel-grid strong {
font-size: 12px;
}
.contact-channel-grid b {
right: 10px;
top: 22px;
}
.contact-locations {
padding-top: 72px;
padding-bottom: 40px;
}
.contact-locations-heading,
.contact-locations-grid {
grid-template-columns: 1fr;
gap: 23px;
}
.contact-locations-heading h2 {
font-size: 34px;
}
.contact-locations-heading p {
font-size: 13px;
}
.contact-form-card input:not([type='checkbox']),
.contact-form-card select {
font-size: 16px;
}
.contact-form-card .callback-phone select {
font-size: 10px;
}
.contact-form-card .callback-route-fields {
gap: 8px;
}
.footer-detailed .footer-contact-band {
display: block;
}
.footer-detailed .footer-call-panel {
padding: 23px;
}
.footer-detailed .footer-contact-copy {
padding: 20px 23px 0;
}
.footer-detailed .footer-contact-actions {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 18px 23px 23px;
}
.footer-detailed .corporate-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 25px 18px;
}
.footer-detailed .footer-about {
display: block;
max-width: none;
}
.footer-detailed .footer-about p {
font-size: 12px;
}
.footer-detailed .footer-plan-stages > span {
font-size: 9px;
}
.footer-detail-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-detail-strip > :first-child {
grid-column: 1/-1;
}
.footer-detailed .corporate-footer-bottom {
grid-template-columns: 1fr;
padding-bottom: 65px;
gap: 14px;
}
.footer-back-top {
justify-self: start;
}
}
@media (max-width: 380px) {
.contact-form-card {
padding: 19px 15px;
}
.contact-form-card .callback-route-fields {
grid-template-columns: 1fr;
}
.contact-main-phone {
padding: 12px 15px;
}
.contact-main-phone > strong {
font-size: 39px;
}
.contact-hero-actions > a {
font-size: 11px;
padding: 11px 14px;
}
.contact-progress li {
font-size: 9px;
padding: 6px 5px;
}
.contact-channel-grid strong {
font-size: 11px;
}
}
/* Distinct blue footer surface, with a soft pointer-following light behind the content. */
.footer-detailed {
position: relative;
isolation: isolate;
background:
radial-gradient(ellipse at 5% 0%, #245e974d, transparent 62%),
radial-gradient(ellipse at 100% 100%, #193f714d, transparent 65%),
radial-gradient(#80baff12 0.7px, transparent 0.8px),
linear-gradient(135deg, #0d263e, #111c2d 62%, #101a29);
background-size:
auto,
auto,
22px 22px,
auto;
border-top: 1px solid #507fac55;
}
.footer-detailed > .container {
position: relative;
z-index: 1;
}
.footer-detailed:before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(
440px circle at var(--footer-light-x, 50%) var(--footer-light-y, 30%),
#489bea32,
transparent 72%
);
opacity: 0;
transition: opacity 0.3s;
}
.footer-detailed.is-light-active:before {
opacity: 1;
}
/* Footer menus: restrained animated rules, with a stable text colour and layout. */
.footer-detailed :is(.footer-links, .corporate-footer-bottom nav) > a {
position: relative;
width: fit-content;
max-width: 100%;
padding-left: 8px;
color: #cbd5e3;
text-decoration: none;
background: transparent;
}
.footer-detailed .footer-links > a:last-child {
color: #fff;
}
.footer-detailed :is(.footer-links, .corporate-footer-bottom nav) > a:is(:hover, :focus-visible) {
color: #cbd5e3;
background: transparent;
}
.footer-detailed .footer-links > a:last-child:is(:hover, :focus-visible) {
color: #fff;
}
.footer-detailed :is(.footer-links, .corporate-footer-bottom nav) > a::before,
.footer-detailed :is(.footer-links, .corporate-footer-bottom nav) > a::after {
content: '';
position: absolute;
pointer-events: none;
background: #8fc5f5;
border-radius: 2px;
opacity: 0;
transition:
transform 0.26s ease,
opacity 0.2s ease;
}
.footer-detailed :is(.footer-links, .corporate-footer-bottom nav) > a::before {
left: 4px;
top: 0.4em;
width: 2px;
height: 1em;
transform: scaleY(0);
transform-origin: bottom;
}
.footer-detailed :is(.footer-links, .corporate-footer-bottom nav) > a::after {
left: 8px;
right: 0;
bottom: 4px;
height: 1px;
transform: scaleX(0);
transform-origin: left;
}
.footer-detailed nav.footer-links > a::after {
bottom: 12px;
}
.footer-detailed
:is(.footer-links, .corporate-footer-bottom nav)
> a:is(:hover, :focus-visible)::before,
.footer-detailed
:is(.footer-links, .corporate-footer-bottom nav)
> a:is(:hover, :focus-visible)::after {
opacity: 1;
transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
.footer-detailed :is(.footer-links, .corporate-footer-bottom nav) > a::before,
.footer-detailed :is(.footer-links, .corporate-footer-bottom nav) > a::after {
transition: none;
}
}
.contact-channel-grid > a {
--channel-accent: #5daaf2;
transform: translateY(0) scale(1);
transform-origin: center;
transition:
transform 0.22s ease,
border-color 0.2s,
box-shadow 0.22s;
will-change: auto;
}
.contact-channel-grid > a:nth-child(2) {
--channel-accent: #32ae76;
}
.contact-channel-grid > a:nth-child(3) {
--channel-accent: #67a9f1;
}
.contact-channel-grid > a:nth-child(4) {
--channel-accent: #829cf0;
}
.contact-channel-grid > a:hover,
.contact-channel-grid > a:focus-visible,
.contact-channel-grid > a.is-channel-active {
z-index: 2;
border-color: var(--channel-accent);
box-shadow:
0 0 0 2px var(--channel-accent),
0 13px 26px #071e3a35;
}
.contact-channel-grid > a.is-channel-active {
transform: translateY(-4px) scale(1.035);
}
.contact-channel-grid > a:first-child:hover,
.contact-channel-grid > a:first-child:focus-visible {
color: #fff;
}
@media (prefers-reduced-motion: reduce) {
.footer-detailed:before {
display: none;
transition: none;
}
.contact-channel-grid > a {
transition: none;
}
.contact-channel-grid > a.is-channel-active {
transform: none;
}
}
@media (hover: none) {
.footer-detailed:before {
display: none;
}
.contact-channel-grid > a.is-channel-active {
transform: none;
}
}
/* assets/performance.css */
/* Native cross-document transitions retain the site's normal URLs and scripts. */
@view-transition {
navigation: auto;
}
::view-transition-group(root) {
animation-duration: 90ms;
}
::view-transition-old(root) {
animation-duration: 90ms;
}
::view-transition-new(root) {
animation-duration: 90ms;
}
body > header.site-header {
view-transition-name: site-header;
}
::view-transition-group(site-header) {
animation-duration: 0s;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
/* assets/communication-ui.css */
/* Official WhatsApp green for the fixed contact action, with readable dark text. */
a.floating-contact.comm-whatsapp {
transition:
background-color 220ms ease,
color 220ms ease,
border-color 220ms ease,
box-shadow 220ms ease;
}
a.floating-contact.comm-whatsapp:is(:hover, :focus-visible) {
background: #25d366;
color: #082f1b;
border-color: #25d366;
box-shadow: 0 5px 18px #25d36640;
}
@media (prefers-reduced-motion: reduce) {
a.floating-contact.comm-whatsapp {
transition: none;
}
}
/* Explicit contrast for the province directory action in every editorial layout. */
.province-invitation > a.button.province-guide-button,
.about-page .refresh-routes .province-invitation > a.button.province-guide-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 48px;
max-width: 100%;
padding: 13px 20px;
margin: 10px 0 16px;
border: 1px solid #235c98;
border-radius: 9px;
background: linear-gradient(110deg, #12355d, #19528b);
color: #fff;
font-size: 13px;
font-weight: 650;
line-height: 1.4;
text-decoration: none;
box-shadow: 0 5px 14px #173e6b1c;
}
.province-invitation > a.button.province-guide-button:is(:hover, :focus-visible),
.about-page
.refresh-routes
.province-invitation
> a.button.province-guide-button:is(:hover, :focus-visible) {
color: #fff;
border-color: #5f9ed9;
background-color: #12355d;
}
.province-invitation > a.button.province-guide-button:focus-visible {
outline: 3px solid #2475bd;
outline-offset: 4px;
}
.province-guide-button > svg {
flex: 0 0 18px;
width: 18px;
height: 18px;
}
/* Shared vector icons stay legible without icon fonts or external requests. */
.comm-control .contact-icon {
display: inline-block;
width: 18px;
height: 18px;
min-width: 18px;
flex: 0 0 18px;
vertical-align: -0.22em;
color: inherit;
fill: none;
stroke: currentColor;
pointer-events: none;
}
.header-phone-block .contact-icon {
width: 23px;
height: 23px;
vertical-align: -0.05em;
}
.footer-detailed .footer-main-phone {
display: inline-flex;
align-items: center;
gap: 12px;
}
.footer-detailed .footer-main-phone > .contact-icon {
width: 28px;
height: 28px;
min-width: 28px;
flex-basis: 28px;
vertical-align: middle;
}
/* Shared next-step callout: preserve its existing branded background. */
.about-page .about-contact-callout {
grid-template-columns: minmax(0, 1.15fr) minmax(290px, 0.85fr);
align-items: center;
gap: clamp(24px, 4vw, 56px);
padding: clamp(24px, 3vw, 38px);
}
.about-page .about-contact-callout > div {
min-width: 0;
}
.about-page .about-contact-callout > div:last-child {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding-left: 28px;
border-left: 1px solid #ffffff30;
}
.about-page .about-contact-callout h2 {
max-width: 540px;
margin: 12px 0 14px;
font-size: clamp(25px, 2.4vw, 34px);
line-height: 1.22;
text-wrap: balance;
}
.about-page .about-contact-callout p {
max-width: 560px;
line-height: 1.8;
}
.about-page .about-contact-callout .about-callout-phone {
display: inline-flex;
align-items: center;
gap: 12px;
margin: 0;
font-size: clamp(31px, 3.3vw, 44px);
line-height: 1.15;
}
.about-page .about-contact-callout .about-callout-phone > .contact-icon {
width: 26px;
height: 26px;
min-width: 26px;
flex-basis: 26px;
}
.about-page .about-contact-callout .about-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
}
.about-page .about-contact-callout .about-actions > a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 42px;
padding: 10px 13px;
line-height: 1.3;
white-space: nowrap;
}
@media (max-width: 900px) {
.about-page .about-contact-callout {
grid-template-columns: 1fr;
gap: 24px;
}
.about-page .about-contact-callout > div:last-child {
border-left: 0;
border-top: 1px solid #ffffff30;
padding: 22px 0 0;
}
}
.footer-contact-icons .comm-control::before {
content: none;
}
.contact-topbar .topbar-channels {
gap: 8px;
}
.contact-topbar .topbar-channels > a {
--channel-fill: linear-gradient(110deg, #2559a1, #3473bd);
display: inline-flex;
flex: 0 0 auto;
width: auto;
min-width: 0;
max-width: max-content;
min-height: 28px;
padding: 5px 10px;
gap: 6px;
border: 1px solid #ffffff3d;
border-radius: 6px;
background-color: #ffffff0a;
background-image: var(--channel-fill);
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 100%;
color: #f5f8ff;
white-space: nowrap;
text-decoration: none;
transition:
background-size 280ms ease,
border-color 200ms ease,
box-shadow 200ms ease;
}
.contact-topbar .topbar-channels > .comm-instagram {
--channel-fill: linear-gradient(110deg, #833ab4, #c52264, #a63d17);
}
.contact-topbar .topbar-channels > .comm-facebook {
--channel-fill: linear-gradient(110deg, #0866d9, #0866d9);
}
.contact-topbar .topbar-channels > .comm-whatsapp {
--channel-fill: linear-gradient(110deg, #087d42, #096e3c);
}
.contact-topbar .topbar-channels > a:is(:hover, :focus-visible) {
background-size: 100% 100%;
color: #fff;
border-color: #ffffff8c;
box-shadow: 0 3px 12px #0003;
transform: none;
}
.topbar-channels .contact-icon {
width: 14px;
height: 14px;
min-width: 14px;
flex-basis: 14px;
}
/* Lift action buttons without affecting navigation, form fields or icon controls. */
:is(
a.button,
button[type='submit'],
.rail-actions > a,
.route-hero-actions > a,
.qp-support > a,
.footer-contact-actions > a,
.mobile-nav-contact > div > a
) {
transition:
transform 180ms ease,
box-shadow 180ms ease,
border-color 180ms ease,
background-color 180ms ease,
color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
:is(
a.button,
button[type='submit'],
.rail-actions > a,
.route-hero-actions > a,
.qp-support > a,
.footer-contact-actions > a
):not(:disabled):hover {
transform: translateY(-2px);
box-shadow:
0 7px 18px #103c7024,
0 0 0 2px #5b9ce6;
}
:is(
a.button,
button[type='submit'],
.rail-actions > a,
.route-hero-actions > a,
.qp-support > a,
.footer-contact-actions > a
).comm-whatsapp:hover {
box-shadow:
0 7px 18px #087d4226,
0 0 0 2px #29b968;
}
}
:is(a.button, button[type='submit'], .comm-control):focus-visible {
outline: 2px solid #62b5ff;
outline-offset: 3px;
}
:is(a.button, button[type='submit']):not(:disabled):active {
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.contact-topbar .topbar-channels > a,
:is(
a.button,
button[type='submit'],
.rail-actions > a,
.route-hero-actions > a,
.qp-support > a,
.footer-contact-actions > a,
.mobile-nav-contact > div > a
) {
transition: none;
}
:is(
a.button,
button[type='submit'],
.rail-actions > a,
.route-hero-actions > a,
.qp-support > a,
.footer-contact-actions > a
):not(:disabled):hover {
transform: none;
}
}
/* assets/navigation-actions.css */
/* Two complementary header actions with stable hit areas in every state. */
.site-header.visual-site-header #main-nav .nav-end .nav-action-icon {
display: block;
flex: 0 0 18px;
width: 18px;
height: 18px;
pointer-events: none;
}
.site-header.visual-site-header #main-nav .nav-end .nav-action-label {
text-transform: none;
letter-spacing: 0;
line-height: 1.3;
}
.site-header.visual-site-header #main-nav .nav-end .nav-action-arrow {
transition: transform 220ms ease;
}
.site-header.visual-site-header
#main-nav
.nav-end
> .nav-cta:is(:hover, :focus-visible)
.nav-action-arrow {
transform: translateX(3px);
}
@media (min-width: 1101px) {
.site-header.visual-site-header #main-nav .nav-end {
gap: 10px;
}
.site-header.visual-site-header #main-nav .nav-end > .blog-details > summary,
.site-header.visual-site-header #main-nav .nav-end > .nav-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
width: auto;
min-width: 0;
height: 43px;
min-height: 43px;
padding: 10px 14px;
border: 1px solid #ffffff69;
border-radius: 9px;
margin: 0;
font-size: 12px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
line-height: 1.3;
white-space: nowrap;
box-shadow: none;
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 100%;
transition:
background-size 240ms ease,
background-color 240ms ease,
color 240ms ease,
border-color 240ms ease,
box-shadow 240ms ease;
}
.site-header.visual-site-header #main-nav .nav-end > .blog-details > summary {
background-color: #ffffff0b;
background-image: linear-gradient(110deg, #ffffff22, #ffffff22);
color: #fff;
}
.site-header.visual-site-header #main-nav .nav-end > .nav-cta {
border-color: #fff;
background-color: #fff;
background-image: linear-gradient(110deg, #e0efff, #f1f7ff);
color: #163f70;
}
.site-header.visual-site-header
#main-nav
.nav-end
> .blog-details
> summary:is(:hover, :focus-visible),
.site-header.visual-site-header #main-nav .nav-end > .blog-details[open] > summary,
.site-header.visual-site-header #main-nav .nav-end > .nav-cta:is(:hover, :focus-visible) {
background-size: 100% 100%;
border-color: #fff;
box-shadow: 0 4px 14px #072e5826;
}
.site-header.visual-site-header
#main-nav
.nav-end
> .blog-details
> summary:is(:hover, :focus-visible),
.site-header.visual-site-header #main-nav .nav-end > .blog-details[open] > summary {
background-color: #ffffff0b;
color: #fff;
}
.site-header.visual-site-header #main-nav .nav-end > .nav-cta:is(:hover, :focus-visible) {
background-color: #fff;
color: #12385f;
}
.site-header.visual-site-header #main-nav .nav-end > .blog-details > summary:focus-visible,
.site-header.visual-site-header #main-nav .nav-end > .nav-cta:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
}
@media (min-width: 1101px) and (max-width: 1300px) {
.site-header.visual-site-header #main-nav {
gap: 6px;
}
.site-header.visual-site-header #main-nav > a {
padding-inline: 7px;
}
.site-header.visual-site-header #main-nav > .nav-details > summary {
padding-inline: 10px;
}
.site-header.visual-site-header #main-nav .nav-end > .blog-details > summary,
.site-header.visual-site-header #main-nav .nav-end > .nav-cta {
font-size: 11px;
padding-inline: 10px;
gap: 7px;
}
.site-header.visual-site-header #main-nav .nav-end .nav-action-icon {
width: 16px;
height: 16px;
flex-basis: 16px;
}
}
@media (max-width: 1100px) {
.site-header.visual-site-header #main-nav .nav-end > .blog-details > summary {
gap: 12px;
}
.site-header.visual-site-header #main-nav .nav-end > .blog-details > summary > .nav-action-label {
flex: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.site-header.visual-site-header #main-nav .nav-end > .blog-details > summary,
.site-header.visual-site-header #main-nav .nav-end > .nav-cta,
.site-header.visual-site-header #main-nav .nav-end .nav-action-arrow {
transition: none;
}
.site-header.visual-site-header
#main-nav
.nav-end
> .nav-cta:is(:hover, :focus-visible)
.nav-action-arrow {
transform: none;
}
}
/* assets/corporate-card-motion.css */
/* Quiet emphasis for the existing dark editorial cards; surfaces stay unchanged. */
.about-page
:is(
.about-metrics-grid,
.mission-values-grid,
.refresh-step-grid,
.team-role-grid,
.service-preparation-grid
)
> :is(article, li) {
position: relative;
transition: box-shadow 240ms ease;
}
.about-page
:is(
.about-metrics-grid,
.mission-values-grid,
.refresh-step-grid,
.team-role-grid,
.service-preparation-grid
)
> :is(article, li)::after {
content: '';
position: absolute;
bottom: 0;
left: 22px;
right: 22px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, #8cbce7, #8cbce700);
opacity: 0;
transform: scaleX(0);
transform-origin: left center;
transition:
transform 300ms ease,
opacity 240ms ease;
pointer-events: none;
}
.about-page
:is(
.about-metrics-grid,
.mission-values-grid,
.refresh-step-grid,
.team-role-grid,
.service-preparation-grid
)
> :is(article, li)
> :is(strong, h3, p) {
transition: transform 240ms ease;
}
.about-page
:is(
.about-metrics-grid,
.mission-values-grid,
.refresh-step-grid,
.team-role-grid,
.service-preparation-grid
)
> :is(article, li):focus-within {
box-shadow: inset 0 0 0 1px #8cbce780;
}
.about-page
:is(
.about-metrics-grid,
.mission-values-grid,
.refresh-step-grid,
.team-role-grid,
.service-preparation-grid
)
> :is(article, li):focus-within::after {
opacity: 1;
transform: scaleX(1);
}
@media (hover: hover) and (pointer: fine) {
.about-page
:is(
.about-metrics-grid,
.mission-values-grid,
.refresh-step-grid,
.team-role-grid,
.service-preparation-grid
)
> :is(article, li):hover {
box-shadow: inset 0 0 0 1px #8cbce780;
}
.about-page
:is(
.about-metrics-grid,
.mission-values-grid,
.refresh-step-grid,
.team-role-grid,
.service-preparation-grid
)
> :is(article, li):hover::after {
opacity: 1;
transform: scaleX(1);
}
.about-page
:is(
.about-metrics-grid,
.mission-values-grid,
.refresh-step-grid,
.team-role-grid,
.service-preparation-grid
)
> :is(article, li):hover
> :is(strong, h3, p) {
transform: translateX(2px);
}
}
@media (prefers-reduced-motion: reduce) {
.about-page
:is(
.about-metrics-grid,
.mission-values-grid,
.refresh-step-grid,
.team-role-grid,
.service-preparation-grid
)
> :is(article, li),
.about-page
:is(
.about-metrics-grid,
.mission-values-grid,
.refresh-step-grid,
.team-role-grid,
.service-preparation-grid
)
> :is(article, li)::after,
.about-page
:is(
.about-metrics-grid,
.mission-values-grid,
.refresh-step-grid,
.team-role-grid,
.service-preparation-grid
)
> :is(article, li)
> :is(strong, h3, p) {
transition: none;
}
.about-page
:is(
.about-metrics-grid,
.mission-values-grid,
.refresh-step-grid,
.team-role-grid,
.service-preparation-grid
)
> :is(article, li):hover
> :is(strong, h3, p) {
transform: none;
}
}
/* assets/hero-photo-motion.css */
/* Layered photo treatment; the established hero background is untouched. */
.about-hero .about-hero-photo {
isolation: isolate;
border-color: #f7fbff;
box-shadow:
12px 12px 0 -4px #ffffff13,
12px 12px 0 -3px #ffffff30,
0 22px 42px #08244744;
transition:
transform 400ms ease,
box-shadow 400ms ease,
border-color 300ms ease;
}
.about-hero .about-hero-photo::before {
content: '';
position: absolute;
inset: 10px;
z-index: 1;
border: 1px solid #ffffff38;
border-radius: 8px;
pointer-events: none;
}
.about-hero .about-hero-photo img {
transform-origin: 55% 50%;
}
.about-hero .about-hero-photo figcaption {
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
left: 16px;
bottom: 16px;
padding: 9px 12px;
border-radius: 7px;
border-color: #ffffff66;
box-shadow: 0 4px 12px #061b3433;
transition:
transform 300ms ease,
border-color 300ms ease;
}
.about-hero .about-hero-photo figcaption::before {
content: '';
flex: 0 0 6px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #a4d8ff;
}
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
.about-hero .about-hero-photo img {
animation: corporate-photo-pan 14s ease-in-out infinite alternate;
}
.about-hero .about-hero-photo:hover {
transform: translateY(-4px) rotate(0.3deg);
border-color: #d8eeff;
box-shadow:
8px 8px 0 -4px #ffffff18,
8px 8px 0 -3px #ffffff55,
0 28px 48px #08244755;
}
.about-hero .about-hero-photo:hover img {
animation-play-state: paused;
}
.about-hero .about-hero-photo:hover figcaption {
transform: translateY(-2px);
border-color: #ffffffa0;
}
}
@keyframes corporate-photo-pan {
from {
transform: scale(1.015) translateX(0.15%);
}
to {
transform: scale(1.045) translateX(-0.55%);
}
}
@media (prefers-reduced-motion: reduce) {
.about-hero .about-hero-photo,
.about-hero .about-hero-photo figcaption {
transition: none;
}
.about-hero .about-hero-photo img {
animation: none;
transform: none;
}
.about-hero .about-hero-photo:hover {
transform: rotate(1.4deg);
}
.about-hero .about-hero-photo:hover figcaption {
transform: none;
}
}
/* assets/hero-card-motion.css */
/* Shared country-style interaction for the four introductory information cards.
   Layout, typography and resting surfaces remain page-specific. */
main :is(.route-hero-facts, .about-hero-facts) > div {
background-image: linear-gradient(110deg, #3675b955, #79b6e922);
background-position: left center;
background-repeat: no-repeat;
background-size: 0% 100%;
transition:
background-size 280ms ease,
border-color 220ms ease,
box-shadow 220ms ease,
transform 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
main :is(.route-hero-facts, .about-hero-facts) > div:hover {
background-size: 100% 100%;
border-color: #9ac9f1;
box-shadow:
0 5px 14px #08294e26,
inset 2px 0 0 #9ac9f1;
transform: translateY(-2px);
}
}
main :is(.route-hero-facts, .about-hero-facts) > div:focus-within {
background-size: 100% 100%;
border-color: #9ac9f1;
box-shadow: inset 2px 0 0 #9ac9f1;
}
@media (prefers-reduced-motion: reduce) {
main :is(.route-hero-facts, .about-hero-facts) > div {
transition: none;
}
main :is(.route-hero-facts, .about-hero-facts) > div:hover {
transform: none;
}
}
/* assets/navigation-emblem.css */
/* Both states occupy the same link box; neighbouring menu items never move. */
.visual-site-header #main-nav > .nav-home {
position: relative;
}
.nav-home-label {
display: block;
}
.nav-home-symbol {
display: none;
}
@media (min-width: 1101px) {
.visual-site-header.nav-home-emblem #main-nav > .nav-home::before {
content: none;
}
.nav-home-label {
opacity: 1;
transform: translateY(0);
filter: blur(0);
transition:
opacity 190ms ease 65ms,
transform 300ms cubic-bezier(0.22, 1, 0.36, 1) 45ms,
filter 190ms ease 45ms;
}
.visual-site-header #main-nav > .nav-home > .nav-home-symbol {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 39px;
height: 39px;
max-width: none;
object-fit: contain;
opacity: 0;
transform: translate(-50%, -34%) scale(0.8) rotate(-7deg);
pointer-events: none;
filter: drop-shadow(0 2px 5px #041a3730);
transition:
opacity 190ms ease,
transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-home-emblem .nav-home-label {
opacity: 0;
transform: translateY(-8px) scale(0.97);
filter: blur(2px);
transition-delay: 0ms;
}
.nav-home-emblem #main-nav > .nav-home > .nav-home-symbol {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(0);
transition-delay: 65ms;
}
}
@media (prefers-reduced-motion: reduce) {
.visual-site-header .nav-home-label,
.visual-site-header #main-nav > .nav-home > .nav-home-symbol {
transition: none;
}
}
/* assets/page-principles.css */
/* Shared, numbered-free topic grid. Uses the established mission/vision surface. */
.page-principles {
padding: 56px 0;
background: linear-gradient(145deg, #202731, #10151c);
color: #fff;
}
.page-principles .page-principles-heading {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
align-items: end;
gap: 64px;
margin: 0 0 30px;
}
.page-principles .page-principles-eyebrow {
display: block;
color: #d1e4f8;
font-size: 10px;
font-weight: 750;
letter-spacing: 1.3px;
line-height: 1.7;
margin-bottom: 18px;
}
.page-principles .page-principles-heading h2 {
color: #fff;
font-size: clamp(27px, 3vw, 42px);
font-weight: 750;
line-height: 1.14;
letter-spacing: -1px;
margin: 0;
overflow-wrap: anywhere;
}
.page-principles .page-principles-heading > p {
color: #c9d6e5;
font-size: 14px;
line-height: 1.85;
margin: 0 0 3px;
}
.page-principles-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 1px solid #ffffff35;
border-radius: 12px;
overflow: hidden;
}
.page-principles .page-principles-grid > article {
position: relative;
min-width: 0;
padding: 24px;
border-right: 1px solid #ffffff25;
border-bottom: 1px solid #ffffff25;
transition: box-shadow 240ms ease;
}
.page-principles-grid > article:nth-child(3n) {
border-right: 0;
}
.page-principles-grid > article:nth-child(n + 4) {
border-bottom: 0;
}
.page-principles .page-principles-grid h3 {
color: #fff;
font-size: clamp(20px, 1.8vw, 26px);
font-weight: 750;
line-height: 1.23;
letter-spacing: -0.45px;
margin: 0 0 14px;
}
.page-principles .page-principles-grid p {
color: #c4d2e2;
font-size: 12px;
line-height: 1.9;
margin: 0;
}
.page-principles-grid > article::after {
content: '';
position: absolute;
left: 24px;
right: 24px;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, #8cbce7, #8cbce700);
opacity: 0;
transform: scaleX(0);
transform-origin: left center;
transition:
transform 300ms ease,
opacity 240ms ease;
}
@media (hover: hover) and (pointer: fine) {
.page-principles-grid > article:hover {
box-shadow: inset 0 0 0 1px #8cbce780;
}
.page-principles-grid > article:hover::after {
opacity: 1;
transform: scaleX(1);
}
}
@media (max-width: 900px) {
.page-principles .page-principles-heading {
gap: 28px;
}
.page-principles-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-principles-grid > article:nth-child(n) {
border-right: 1px solid #ffffff25;
border-bottom: 1px solid #ffffff25;
}
.page-principles-grid > article:nth-child(2n) {
border-right: 0;
}
.page-principles-grid > article:nth-last-child(-n + 2) {
border-bottom: 0;
}
}
@media (max-width: 600px) {
.page-principles {
padding: 36px 0;
}
.page-principles .page-principles-heading {
grid-template-columns: 1fr;
gap: 18px;
margin-bottom: 24px;
}
.page-principles .page-principles-eyebrow {
margin-bottom: 12px;
}
.page-principles-grid {
grid-template-columns: 1fr;
}
.page-principles .page-principles-grid > article {
padding: 22px;
border-right: 0;
border-bottom: 1px solid #ffffff25;
}
.page-principles-grid > article:last-child {
border-bottom: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.page-principles-grid > article,
.page-principles-grid > article::after {
transition: none;
}
}