.mobility-page { background: var(--mantwerp-petrol-deep); color: #f1ece2; }
.mobility-page .site-header { background: var(--mantwerp-petrol-deep); border-bottom: 1px solid rgba(237, 180, 70, .18); }
.mobility-page main { overflow: clip; }
.mobility-page :is(h1, h2, h3, p, dl) { margin-top: 0; }
.mobility-page :is(h1, h2, h3) { letter-spacing: 0; }
.mobility-page em { color: var(--mantwerp-gold-soft); font-style: normal; }
.mobility-page section[id] { scroll-margin-top: 28px; }

.mobility-kicker { margin-bottom: 22px; color: var(--mantwerp-gold-soft); font-family: var(--font-display); font-size: 14px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.mobility-hero { position: relative; min-height: 600px; padding: clamp(84px, 9vw, 148px) 0 100px; background: #10272f; isolation: isolate; }
.mobility-hero::before { position: absolute; z-index: -1; inset: 0; background: url('/img/rays-bg.png') center 48% / cover no-repeat; opacity: .17; content: ''; }
.mobility-hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .65fr); gap: 50px 8vw; align-items: end; }
.mobility-hero .mobility-kicker { grid-column: 1 / -1; margin-bottom: 0; }
.mobility-hero .mobility-kicker span { margin-left: 22px; color: rgba(241, 236, 226, .67); }
.mobility-hero h1 { margin: 0; font-size: clamp(80px, 9vw, 154px); line-height: .84; }
.mobility-hero__intro { max-width: 510px; padding-bottom: 8px; color: #f1ece2; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; }
.mobility-hero__intro p:last-child { margin-bottom: 0; }

.mobility-choices { padding: 30px 0 54px; background: #f1ece2; color: var(--mantwerp-petrol-deep); }
.mobility-choices .mobility-kicker { color: #85611e; }
.mobility-choices__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(16, 39, 47, .38); border-bottom: 1px solid rgba(16, 39, 47, .38); }
.mobility-choices__grid a { display: flex; min-height: 100px; padding: 20px clamp(10px, 1.4vw, 26px); align-items: center; gap: 12px; border-right: 1px solid rgba(16, 39, 47, .22); color: inherit; font-family: var(--font-display); font-size: clamp(21px, 1.8vw, 31px); line-height: 1; text-decoration: none; transition: background-color .25s ease, color .25s ease; }
.mobility-choices__grid a:first-child { padding-left: 0; }
.mobility-choices__grid a:last-child { border-right: 0; }
.mobility-choices__grid a span:first-child { align-self: flex-start; color: #85611e; font-size: 12px; }
.mobility-choices__grid a span:last-child { margin-left: auto; color: #85611e; font-size: 18px; }
.mobility-choices__grid a:hover, .mobility-choices__grid a:focus-visible { background: #e5dfd1; }

.mobility-section { padding: clamp(84px, 8vw, 130px) 0; }
.mobility-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: clamp(48px, 8vw, 150px); align-items: start; }
.mobility-section h2, .mobility-walk h2, .mobility-finale h2 { max-width: 1050px; margin-bottom: 0; font-size: clamp(55px, 5.7vw, 98px); line-height: .93; overflow-wrap: normal; }
.mobility-copy { max-width: 580px; padding-top: 34px; color: rgba(241, 236, 226, .82); font-size: clamp(17px, 1.2vw, 19px); line-height: 1.65; }
.mobility-copy p { margin-bottom: 20px; }
.mobility-link { display: inline-flex; min-height: 36px; margin-top: 12px; align-items: center; gap: 30px; border-bottom: 1px solid currentColor; color: var(--mantwerp-gold-soft); font-family: var(--font-display); font-size: 17px; line-height: 1; letter-spacing: .04em; text-decoration: none; transition: color .2s ease, gap .2s ease; }
.mobility-link:hover, .mobility-link:focus-visible { gap: 36px; color: #f1ece2; }
.mobility-link span { font-size: 20px; }
.mobility-section--train, .mobility-section--car { background: var(--mantwerp-petrol-deep); }
.mobility-train-times { margin-top: clamp(70px, 7vw, 118px); }
.mobility-train-times dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid rgba(237, 180, 70, .3); border-bottom: 1px solid rgba(237, 180, 70, .3); }
.mobility-train-times dl div { display: flex; min-height: 94px; padding: 20px 28px; flex-direction: column; justify-content: center; gap: 8px; border-right: 1px solid rgba(237, 180, 70, .23); font-family: var(--font-display); }
.mobility-train-times dl div:first-child { padding-left: 0; }
.mobility-train-times dl div:last-child { border-right: 0; }
.mobility-train-times dt { color: rgba(241, 236, 226, .7); font-size: 16px; }
.mobility-train-times dd { margin: 0; color: var(--mantwerp-gold-soft); font-size: 31px; line-height: 1; }
.mobility-page .mobility-note { margin: 16px 0 0; color: rgba(241, 236, 226, .58); font-size: 13px; line-height: 1.5; }

.mobility-section--park { background: #f1ece2; color: var(--mantwerp-petrol-deep); }
.mobility-section--park em { color: #a16c12; }
.mobility-section--park .mobility-kicker { color: #986719; }
.mobility-section--park .mobility-copy { color: #30474c; }
.mobility-park__heading { display: flex; margin-top: clamp(90px, 9vw, 150px); justify-content: space-between; align-items: baseline; }
.mobility-park__heading span { color: #85611e; font-family: var(--font-display); font-size: 14px; }
.mobility-park__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(16, 39, 47, .4); }
.mobility-park__item { min-height: 280px; padding: 30px clamp(20px, 2.4vw, 44px) 30px 0; border-bottom: 1px solid rgba(16, 39, 47, .3); }
.mobility-park__item:not(:nth-child(3n)) { border-right: 1px solid rgba(16, 39, 47, .2); }
.mobility-park__item:nth-child(3n + 2), .mobility-park__item:nth-child(3n + 3) { padding-left: clamp(20px, 2.4vw, 44px); }
.mobility-park__top { display: flex; justify-content: space-between; color: #85611e; font-family: var(--font-display); font-size: 14px; letter-spacing: .06em; }
.mobility-park__item h3 { margin: 32px 0 6px; font-size: clamp(37px, 3.2vw, 52px); line-height: .95; }
.mobility-park__spaces { color: #986719; font-family: var(--font-display); font-size: 22px; }
.mobility-park__address, .mobility-park__connection { max-width: 340px; margin-bottom: 8px; color: #30474c; font-size: 15px; line-height: 1.5; }
.mobility-park__more { display: flex; padding: 42px 0 0; justify-content: space-between; align-items: center; gap: 30px; }
.mobility-park__more p { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 2.5vw, 39px); }
.mobility-park__more .mobility-link { margin-top: 0; color: #805614; white-space: nowrap; }
.mobility-alert { display: grid; grid-template-columns: 64px minmax(0, 1fr); max-width: 1100px; margin-top: clamp(86px, 9vw, 140px); padding: 38px 0 0; gap: 16px; border-top: 2px solid #986719; }
.mobility-alert__symbol { color: #986719; font-family: var(--font-display); font-size: 58px; line-height: .85; }
.mobility-alert h3 { margin: 0 0 16px; font-size: clamp(32px, 3vw, 48px); }
.mobility-alert p:not(.mobility-kicker) { max-width: 820px; margin-bottom: 10px; color: #30474c; font-size: 17px; line-height: 1.6; }
.mobility-alert .mobility-link { color: #805614; }

.mobility-section--other, .mobility-section--bike { background: var(--mantwerp-petrol); }
.mobility-lez { display: grid; grid-template-columns: .7fr 1.5fr auto; margin-top: clamp(70px, 7vw, 110px); padding-top: 32px; align-items: start; gap: 30px; border-top: 1px solid rgba(237, 180, 70, .3); }
.mobility-lez p:not(.mobility-kicker) { max-width: 640px; color: rgba(241, 236, 226, .76); font-size: 16px; line-height: 1.6; }
.mobility-lez .mobility-link { margin-top: 0; white-space: nowrap; }
.mobility-walk { padding: clamp(85px, 9vw, 145px) 0; background: #e4b354; color: var(--mantwerp-petrol-deep); }
.mobility-walk__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); align-items: center; gap: clamp(48px, 8vw, 150px); }
.mobility-walk .mobility-kicker, .mobility-walk em { color: #69420a; }
.mobility-walk h2 { max-width: 1280px; }
.mobility-walk .mobility-walk__copy { max-width: 670px; margin: 0; font-size: 18px; line-height: 1.6; }
.mobility-finale { padding: clamp(90px, 9vw, 150px) 0 70px; background: var(--mantwerp-petrol-deep); text-align: center; }
.mobility-finale h2 { margin-inline: auto; }
.mobility-finale p:not(.mobility-kicker):not(.mobility-disclaimer) { max-width: 620px; margin: 28px auto; color: rgba(241, 236, 226, .8); font-size: 18px; line-height: 1.6; }
.mobility-button { display: inline-flex; min-height: 54px; padding: 14px 28px; align-items: center; justify-content: space-between; gap: 54px; border: 1px solid var(--mantwerp-gold-soft); color: var(--mantwerp-gold-soft); font-family: var(--font-display); font-size: 16px; letter-spacing: .05em; text-decoration: none; transition: color .25s ease, background-color .25s ease; }
.mobility-button:hover, .mobility-button:focus-visible { background: var(--mantwerp-gold-soft); color: var(--mantwerp-petrol-deep); }
.mobility-page .mobility-disclaimer { max-width: 650px; margin: 24px auto 0; color: rgba(241, 236, 226, .5); font-size: 13px; line-height: 1.6; }

@media (max-width: 1023.98px) {
    .mobility-hero { min-height: 0; }
    .mobility-hero__inner { grid-template-columns: 1fr; gap: 28px; }
    .mobility-hero__intro { padding-top: 10px; }
    .mobility-split { grid-template-columns: 1fr; gap: 20px; }
    .mobility-walk__inner { grid-template-columns: 1fr; gap: 24px; }
    .mobility-copy { padding-top: 0; }
    .mobility-choices__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mobility-choices__grid a:nth-child(3) { border-right: 0; }
    .mobility-choices__grid a:nth-child(n + 4) { border-top: 1px solid rgba(16, 39, 47, .22); }
    .mobility-park__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mobility-park__item:not(:nth-child(3n)) { border-right: 0; }
    .mobility-park__item:nth-child(odd) { padding-left: 0; border-right: 1px solid rgba(16, 39, 47, .2); }
    .mobility-park__item:nth-child(even) { padding-left: 28px; }
    .mobility-lez { grid-template-columns: 1fr 2fr; }
    .mobility-lez .mobility-link { grid-column: 2; }
}

@media (max-width: 767.98px) {
    .mobility-hero { padding: 76px 0 82px; }
    .mobility-hero .mobility-kicker span { display: block; margin: 12px 0 0; }
    .mobility-hero h1 { font-size: clamp(64px, 15vw, 92px); }
    .mobility-section h2, .mobility-walk h2, .mobility-finale h2 { font-size: clamp(48px, 11vw, 72px); }
    .mobility-choices { padding: 38px 0; }
    .mobility-choices__grid { grid-template-columns: 1fr; }
    .mobility-choices__grid a { min-height: 72px; padding: 16px 0; border-right: 0; border-bottom: 1px solid rgba(16, 39, 47, .22); }
    .mobility-choices__grid a:last-child { border-bottom: 0; }
    .mobility-choices__grid a:nth-child(n + 4) { border-top: 0; }
    .mobility-choices__grid a span:first-child { align-self: center; width: 28px; }
    .mobility-train-times dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mobility-train-times dl div { min-height: 90px; padding: 16px 20px; }
    .mobility-train-times dl div:nth-child(2) { border-right: 0; }
    .mobility-train-times dl div:nth-child(n + 3) { border-top: 1px solid rgba(237, 180, 70, .23); }
    .mobility-train-times dl div:nth-child(3) { padding-left: 0; }
    .mobility-train-times dd { font-size: 26px; }
    .mobility-park__heading { margin-top: 80px; }
    .mobility-park__grid { grid-template-columns: 1fr; }
    .mobility-park__item, .mobility-park__item:nth-child(even), .mobility-park__item:nth-child(odd) { min-height: 0; padding: 28px 0; border-right: 0; }
    .mobility-park__item h3 { margin-top: 22px; }
    .mobility-park__more { align-items: start; flex-direction: column; }
    .mobility-alert { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
    .mobility-alert__symbol { font-size: 42px; }
    .mobility-lez { grid-template-columns: 1fr; gap: 8px; }
    .mobility-lez .mobility-link { grid-column: 1; }
    .mobility-page .mobility-note { margin-top: 14px; }
    .mobility-page .mobility-disclaimer { margin-top: 18px; }
}

@media (max-width: 389.98px) {
    .mobility-page h1, .mobility-page h2 { overflow-wrap: anywhere; }
    .mobility-hero h1 { font-size: 62px; }
    .mobility-section h2, .mobility-walk h2, .mobility-finale h2 { font-size: 46px; }
}