.kp-page {
    display: flex;
    flex-direction: column;
    gap: var(--text-block-gap);
    flex: 1 1 auto;
    min-height: calc(100dvh - var(--header-height) - var(--footer-height));
}


.kp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--text-block-gap);
}

.kp-toolbar--single-action {
    justify-content: flex-start;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 47, 84, 0.1);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    padding: 14px 18px;
}

.kp-title {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
}

.kp-text {
    font-size: 24px;
    color: #ffffff;
    line-height: 1.5;
}

.kp-back-link {
    font-size: 14px;
    color: var(--corp-blue);
    text-decoration: none;
    font-weight: 600;
}

.kp-back-link:hover {
    text-decoration: underline;
}


.kp-btn-primary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 22px;
    background: var(--corp-blue);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-btn);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.kp-btn-primary,
.kp-btn-filter,
.kp-btn-reset,
.kp-btn-file,
.vessel-card__btn,
.projects-next-section__btn,
.career-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.kp-btn-primary,
.kp-btn-filter,
.kp-btn-reset,
.kp-btn-file,
.vessel-card__btn,
.projects-next-section__btn,
.career-btn {
    --button-icon: url("../ui/base/arrow-right.svg");
}

.kp-btn-primary[download],
.kp-btn-file[download],
.about-brochure__btn[download],
.vessel-profile-card__brochure[download] {
    --button-icon: url("../ui/base/arrow-to-bottom.svg");
}

.kp-btn-primary::after,
.kp-btn-filter::after,
.kp-btn-reset::after,
.kp-btn-file::after,
.vessel-card__btn::after,
.projects-next-section__btn::after,
.career-btn::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 2em;
    height: 2em;
    background-color: #ffffff;
    -webkit-mask-image: var(--button-icon);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: var(--button-icon);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.arrow-nav-btn::after {
    width: 20px;
    height: 20px;
}

.kp-btn-primary:hover {
    opacity: 0.88;
}

.arrow-nav-btn {
    padding: 0;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    flex: 0 0 auto;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.arrow-nav-btn:hover,
.arrow-nav-btn:focus-visible {
    background: var(--corp-orange);
    border-color: var(--corp-orange);
    color: var(--corp-blue);
    outline: none;
    opacity: 1;
}

.arrow-nav-btn--sm {
    width: 40px;
    height: 40px;
    min-height: 40px;
}

.arrow-nav-btn--lg {
    width: 52px;
    height: 64px;
    min-height: 64px;
    border-radius: 10px;
}

.arrow-nav-btn--prev::after,
.projects-catalog-back-btn::after {
    transform: rotate(180deg);
}

.arrow-nav-btn:disabled,
.arrow-nav-btn--disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.kp-btn-filter {
    padding: 8px 18px;
    background: var(--corp-blue);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.kp-btn-filter:hover {
    opacity: 0.88;
}

.kp-btn-reset {
    padding: 8px 14px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.kp-btn-reset:hover {
    border-color: var(--corp-blue);
    color: var(--corp-blue);
}

.kp-btn-file {
    padding: 5px 12px;
    background: transparent;
    color: var(--corp-blue);
    border: 1px solid var(--corp-blue);
    border-radius: var(--radius-btn);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.kp-btn-file:hover {
    background: var(--corp-blue);
    color: #ffffff;
}


.kp-panel {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 47, 84, 0.1);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
}

.kp-panel > .kp-table-wrap {
    background: transparent;
    border: none;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: none;
}


.kp-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(15, 47, 84, 0.08);
}

.kp-controls__sep {
    width: 1px;
    height: 24px;
    background: var(--border-light);
    margin: 0 4px;
}

.kp-controls__search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


.kp-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 47, 84, 0.1);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    padding: 14px 18px;
}

.kp-filter-select {
    padding: 7px 10px;
    border: 1px solid var(--border-input);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-main);
    font-size: 13px;
    min-width: 160px;
}


.app-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.app-table-scroll-helper {
    position: fixed;
    z-index: 120;
    height: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 47, 84, 0.14);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -8px 18px rgba(15, 47, 84, 0.08);
    scrollbar-color: rgba(15, 47, 84, 0.45) rgba(15, 47, 84, 0.08);
    scrollbar-width: thin;
}

.app-table-scroll-helper::-webkit-scrollbar {
    height: 12px;
}

.app-table-scroll-helper::-webkit-scrollbar-track {
    background: rgba(15, 47, 84, 0.08);
    border-radius: 999px;
}

.app-table-scroll-helper::-webkit-scrollbar-thumb {
    background: rgba(15, 47, 84, 0.45);
    border-radius: 999px;
}

.app-table-scroll-helper__track {
    height: 1px;
}

.kp-table-wrap {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 47, 84, 0.1);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
}

.kp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.kp-table thead {
    background: var(--corp-blue);
    color: #ffffff;
}

.kp-table th {
    padding: 11px 14px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.kp-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-main);
    vertical-align: middle;
}

.kp-table tbody tr:last-child td {
    border-bottom: none;
}

.kp-table tbody tr:hover {
    background: var(--bg-muted);
}

.kp-row {
    transition: background 0.15s;
}

.kp-cell--code {
    font-weight: 700;
    color: var(--corp-blue);
    white-space: nowrap;
}

.kp-cell--center {
    text-align: center;
}

.kp-cell--amount {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kp-cell--date {
    white-space: nowrap;
}

.kp-cell--subject {
    white-space: normal;
    word-break: break-word;
    min-width: 160px;
}

.kp-cell--actions {
    text-align: right;
}

.kp-cell--actions form {
    margin: 0;
}

.kp-actions-row {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.kp-empty {
    color: var(--text-muted);
}


.kp-empty-state {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 47, 84, 0.1);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.kp-empty-state a {
    color: var(--corp-blue);
    font-weight: 600;
}


.kp-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 47, 84, 0.1);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    padding: var(--page-block-padding-y) var(--page-inline-padding-x);
}

.kp-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--page-block-padding-y);
    flex-wrap: wrap;
}

.kp-card__code {
    font-size: 20px;
    font-weight: 700;
    color: var(--corp-blue);
    white-space: nowrap;
}

.kp-card__meta {
    display: flex;
    gap: var(--page-block-padding-y);
    flex-wrap: wrap;
    flex: 1;
}

.kp-card__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--text-main);
}

.kp-card__meta-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


.kp-edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--page-block-padding-y);
}

.kp-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--text-block-gap);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 47, 84, 0.1);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    padding: var(--page-block-padding-y);
}

.kp-edit-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kp-edit-field--wide {
    grid-column: 1 / -1;
}

.kp-edit-field label {
    font-size: 14px;
    font-weight: 700;
    color: var(--corp-blue);
}

.kp-edit-field input,
.kp-edit-field select,
.kp-edit-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-input);
    font: inherit;
    background: var(--bg-input);
    color: var(--text-main);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kp-edit-field input:focus,
.kp-edit-field select:focus,
.kp-edit-field textarea:focus {
    outline: none;
    border-color: rgba(206, 76, 37, 0.9);
    box-shadow: 0 0 0 4px rgba(206, 76, 37, 0.14);
}

.kp-edit-field textarea {
    min-height: 120px;
    resize: vertical;
}

.kp-edit-field--error input,
.kp-edit-field--error select,
.kp-edit-field--error textarea {
    border-color: var(--color-error-border);
    box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.08);
}

.kp-edit-field__error {
    font-size: 12px;
    color: var(--color-error);
}

.kp-edit-actions {
    display: flex;
    align-items: center;
    gap: var(--text-block-gap);
}

.internal-vessel-list {
    display: flex;
    flex-direction: column;
    gap: var(--text-block-gap);
}

.internal-vessel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--text-block-gap);
    padding: var(--text-block-gap);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 47, 84, 0.1);
    border-radius: 12px;
}

.kp-alert {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
}

.kp-alert--success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.kp-alert--error {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error);
    border-radius: var(--radius-card);
    padding: 14px 16px;
    font-size: 14px;
}

.kp-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--corp-blue);
    margin-top: 4px;
}


.kp-hub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--text-block-gap);
}

.kp-hub__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 47, 84, 0.1);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kp-hub__item:hover,
.kp-hub__item:focus-visible {
    border-color: var(--corp-orange);
    box-shadow: 0 6px 20px rgba(206, 76, 37, 0.18);
}

.kp-hub__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--corp-blue);
}

.kp-hub__desc {
    font-size: 13px;
    color: var(--text-muted);
}




.kp-page .kp-btn-primary:hover,
.kp-page .kp-btn-primary:focus-visible,
.kp-page .kp-btn-filter:hover,
.kp-page .kp-btn-filter:focus-visible,
.kp-page .kp-btn-reset:hover,
.kp-page .kp-btn-reset:focus-visible,
.kp-page .kp-btn-file:hover,
.kp-page .kp-btn-file:focus-visible {
    background: var(--corp-orange);
    color: var(--corp-blue);
    border-color: var(--corp-orange);
    opacity: 1;
}


.projects-page {
    display: grid;
    gap: var(--page-block-padding-y);
    padding: var(--page-block-padding-y) var(--page-inline-padding-x);
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    width: calc(100% + (var(--container-padding-x) * 2));
    margin-inline: calc(var(--container-padding-x) * -1);
}

.projects-catalog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.projects-catalog-header__title-group {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.projects-catalog-header h1 {
    margin: 0;
    color: var(--corp-blue);
    font-size: clamp(26px, 3.8vw, 54px);
    line-height: 1.05;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.projects-catalog-back-btn {
    width: 48px;
    height: 48px;
    min-height: 48px;
}

.projects-catalog-back-btn:hover,
.projects-catalog-back-btn:focus-visible {
    background: var(--corp-orange);
    color: var(--corp-blue);
}

.projects-search--compact {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex: 0 1 320px;
    width: min(100%, 320px);
    min-width: 0;
    margin-left: auto;
}

.projects-search__bar {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(17, 50, 91, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 30px rgba(17, 50, 91, 0.08);
}

.projects-search__input {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 0 18px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--corp-blue);
    font: inherit;
    font-size: 14px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
}

.projects-search__input::-webkit-search-cancel-button,
.projects-search__input::-webkit-search-decoration,
.projects-search__input::-webkit-search-results-button,
.projects-search__input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.projects-search__input::-ms-clear,
.projects-search__input::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

.projects-search__input::placeholder {
    color: rgba(17, 50, 91, 0.5);
    opacity: 1;
}

.projects-search__input:focus {
    box-shadow: inset 0 0 0 2px rgba(255, 65, 0, 0.18);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.vessel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
    align-items: stretch;
    transition: opacity 0.2s ease;
}

.vessel-grid[aria-busy="true"] {
    opacity: 0.55;
}

.projects-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 22px;
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.94);
    color: var(--corp-blue);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.projects-empty a {
    color: var(--corp-orange);
    text-decoration: none;
}

.projects-empty a:hover,
.projects-empty a:focus-visible {
    text-decoration: underline;
}

.vessel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: clamp(260px, 28vw, 420px);
    overflow: hidden;
    padding: clamp(18px, 2.4vw, 30px);
    border-radius: var(--radius-card);
    background: linear-gradient(135deg, rgba(17, 50, 91, 0), rgba(17, 50, 91, 0)), var(--vessel-bg) center / cover no-repeat;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

.projects-catalog-page .vessel-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    aspect-ratio: 27 / 20;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #404040;
}

.projects-catalog-page .vessel-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: calc(100% - 24px);
}

.vessel-card h2 {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0;
    color: #ffffff;
    font-size: clamp(18px, calc(2.2vw - 2px), 32px);
    line-height: 1.08;
    white-space: nowrap;
}

.projects-catalog-page .vessel-card:not(.vessel-card--caption-link) h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    display: inline-flex;
    width: fit-content;
    max-width: calc(100% - 24px);
    align-self: start;
    padding: 0.35em 0.65em;
    border: 1px solid var(--corp-blue);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--corp-blue);
    font-size: clamp(16px, calc(2.2vw - 4px), 30px);
    line-height: 1.08;
    white-space: nowrap;
    text-shadow: none;
    -webkit-text-stroke: 0;
}

.vessel-card__type {
    position: relative;
    z-index: 1;
    max-width: calc(100% - 24px);
    margin: 0;
    padding: 0.3em 0.6em;
    border-radius: 0.45rem;
    background: rgba(17, 50, 91, 0.92);
    color: #ffffff;
    font-size: clamp(13px, calc(1.25vw - 1px), 18px);
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projects-catalog-page .vessel-card__image-link {
    position: relative;
    inset: auto;
    z-index: 0;
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 0;
}

.projects-catalog-page .vessel-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.projects-catalog-page .vessel-card:hover .vessel-card__image,
.projects-catalog-page .vessel-card:focus-within .vessel-card__image {
    transform: scale(1.015);
}

.projects-catalog-page .vessel-card__image-link:focus-visible {
    outline: 2px solid var(--corp-orange);
    outline-offset: -2px;
}

.vessel-card__footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 66px;
    padding: 0 12px 0 16px;
    background: #404040;
    color: #ffffff;
}

.vessel-card__title {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    display: block;
    text-align: left;
    color: #ffffff;
    font-size: clamp(11px, 0.945vw + 1px, 17.6px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.projects-catalog-page .vessel-card--showcase .vessel-card__title {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    z-index: 2 !important;
    display: block !important;
    width: auto !important;
    max-width: calc(100% - 92px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: clamp(11px, 0.945vw + 1px, 17.6px) !important;
    font-weight: 500 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    text-align: left !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

.vessel-card__arrow {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 0 0 auto;
}

.projects-catalog-page .vessel-card__arrow,
.projects-catalog-page .vessel-card__arrow:hover,
.projects-catalog-page .vessel-card__arrow:focus,
.projects-catalog-page .vessel-card__arrow:focus-visible,
.projects-catalog-page .vessel-card__arrow:active {
    position: absolute;
    right: 10px;
    top: 50%;
    z-index: 2;
    background: transparent;
    border-color: transparent;
    color: #ffffff;
    opacity: 1;
    outline: none;
    transform: translateY(-50%);
    box-shadow: none;
}

.projects-catalog-page .vessel-card__arrow::after {
    width: 22px;
    height: 22px;
}

.vessel-card--caption-link {
    justify-content: flex-end;
    padding: 0;
}

.vessel-card--caption-link h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    display: inline-flex;
    width: fit-content;
    max-width: calc(100% - 24px);
    align-self: start;
    padding: 0.35em 0.65em;
    border: 1px solid var(--corp-blue);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--corp-blue);
    font-size: clamp(16px, calc(2.2vw - 4px), 30px);
    line-height: 1.08;
    white-space: nowrap;
    text-shadow: none;
    -webkit-text-stroke: 0;
}

.vessel-card--caption-link h2 a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.vessel-card--caption-link h2 a:hover,
.vessel-card--caption-link h2 a:focus-visible {
    color: var(--corp-orange);
}

.vessel-card__btn {
    position: relative;
    z-index: 1;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    border-radius: var(--radius-btn);
    background: var(--corp-blue);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    outline: 1px solid rgba(255, 255, 255, 0.85);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.projects-catalog-page .vessel-card__btn {
    margin-top: auto;
}

.vessel-card__btn:hover,
.vessel-card__btn:focus-visible {
    background: var(--corp-orange);
    color: var(--corp-blue);
}

.projects-next-section {
    display: flex;
    justify-content: flex-start;
}

.projects-next-section__btn {
    outline: 1px solid rgba(255, 255, 255, 0.85);
}

.projects-next-section__btn:hover,
.projects-next-section__btn:focus-visible {
    background: var(--corp-orange);
    color: var(--corp-blue);
    border-color: var(--corp-orange);
    opacity: 1;
}

.projects-back-link {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    width: fit-content;
    height: 44px;
    min-width: 44px;
    padding: 0 16px 0 14px;
    flex-direction: row-reverse;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
}

.projects-back-link:hover,
.projects-back-link:focus-visible {
    background: var(--corp-orange);
    color: var(--corp-blue);
}

.projects-back-link__text {
    line-height: 1;
    font-size: 14px;
    font-weight: 700;
    color: inherit;
}

.vessel-detail-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
    gap: var(--page-block-padding-y);
    padding: var(--page-block-padding-y) var(--page-inline-padding-x);
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-card);
}

.vessel-detail-card__image {
    overflow: hidden;
    margin: 0;
    border-radius: calc(var(--radius-card) - 6px);
}

.vessel-detail-card__image img {
    display: block;
    width: 100%;
    height: clamp(300px, 42vw, 620px);
    object-fit: cover;
}

.vessel-detail-card__content {
    display: grid;
    align-content: start;
    gap: var(--text-block-gap);
    color: var(--corp-blue);
}

.vessel-detail-card__content h1 {
    margin: 0;
    font-size: clamp(28px, 3vw, 48px);
    line-height: 1.05;
}

.vessel-detail-card__content p,
.vessel-detail-placeholder,
.projects-empty-template p {
    margin: 0;
    font-size: clamp(15px, 1.4vw, 19px);
    line-height: 1.45;
}

.vessel-detail-placeholder,
.projects-empty-template {
    padding: var(--text-block-gap);
    border: 1px dashed rgba(17, 50, 91, 0.35);
    border-radius: calc(var(--radius-card) - 8px);
    background: rgba(255, 255, 255, 0.66);
}

.projects-empty-template {
    display: grid;
    justify-items: start;
    gap: var(--text-block-gap);
    color: var(--corp-blue);
}

.vessel-profile-card {
    display: grid;
    gap: var(--page-block-padding-y);
    padding: var(--page-block-padding-y) var(--page-inline-padding-x) var(--page-block-padding-y) 0;
    background: rgba(255, 255, 255, 0.94);
    border-radius: var(--radius-card);
    color: var(--corp-blue);
}

.vessel-profile-page .vessel-profile-card {
    padding-top: 0;
}

.vessel-profile-card__header {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto;
    gap: var(--text-block-gap);
    align-items: start;
}

.vessel-profile-card__header-main {
    display: grid;
    gap: var(--page-block-padding-y);
    align-content: start;
    justify-items: start;
    min-width: 0;
}

.vessel-profile-card__title {
    margin: 0;
    color: var(--corp-blue);
    font-size: clamp(24px, 3vw, 44px);
    line-height: 1.05;
    text-align: left;
    white-space: nowrap;
}

.vessel-profile-card__title-block {
    display: grid;
    gap: 6px;
    justify-items: start;
}

.vessel-profile-card__subtitle {
    margin: 0;
    color: var(--corp-blue);
    font-size: clamp(12px, 1.5vw, 22px);
    font-weight: 700;
    line-height: 1.1;
}

.vessel-profile-card__nav {
    display: inline-flex;
    justify-content: center;
    justify-self: end;
    align-self: start;
    margin-top: calc(51px + var(--page-block-padding-y));
    gap: 10px;
}

@media (max-width: 1200px), (max-width: 1377px) and (pointer: coarse) {
    .vessel-profile-card__header {
        grid-template-columns: 1fr;
    }

    .vessel-profile-card__header-main {
        gap: var(--page-block-padding-y);
    }

    .vessel-profile-card__title {
        white-space: normal;
    }

    .vessel-profile-card__nav {
        justify-self: start;
        align-self: start;
        margin-top: calc(51px + var(--page-block-padding-y));
    }

    .vessel-profile-card__body {
        grid-template-columns: 1fr;
    }
}

.vessel-profile-card__arrow {
    width: 44px;
    height: 44px;
    min-height: 44px;
}

.vessel-profile-card__arrow--disabled,
.vessel-profile-card__arrow--disabled:hover,
.vessel-profile-card__arrow--disabled:focus-visible {
    opacity: 0.35;
    cursor: default;
}

.vessel-profile-card__body {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--page-block-padding-y);
    align-items: start;
}

.vessel-profile-card__primary,
.vessel-profile-card__details {
    display: grid;
    gap: var(--text-block-gap);
    min-width: 0;
}

.vessel-profile-card__main-image {
    overflow: hidden;
    margin: 0;
    border-radius: calc(var(--radius-card) - 6px);
    background: var(--bg-muted);
    box-shadow: var(--shadow);
}

.vessel-profile-card__main-image--media {
    display: grid;
    gap: var(--text-block-gap);
    padding: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    position: relative;
}

.vessel-profile-card__media-frame {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: calc(var(--radius-card) - 6px);
    background:
        radial-gradient(circle at 50% 45%, #7b7b7b 0%, #686868 48%, #565656 100%);
    box-shadow: var(--shadow);
}

.vessel-profile-card__media-image,
.vessel-profile-card__media-model {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    background: transparent;
}

.vessel-profile-card__media-image[hidden],
.vessel-profile-card__media-model[hidden] {
    display: none;
}

.vessel-profile-card__media-model {
    --poster-color: transparent;
}

.vessel-profile-card__main-image--media.is-model-active .vessel-profile-card__media-frame {
    background:
        radial-gradient(circle at 50% 45%, #7b7b7b 0%, #686868 48%, #565656 100%);
}

.vessel-profile-card__media-switcher {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.vessel-profile-card__media-switch {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--corp-blue);
    border-radius: 50%;
    background: var(--corp-blue);
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.vessel-profile-card__media-switch:hover,
.vessel-profile-card__media-switch:focus-visible {
    background: var(--corp-orange);
    border-color: var(--corp-orange);
    outline: none;
    transform: translateY(-1px);
}

.vessel-profile-card__media-switch.is-active {
    background: var(--corp-orange);
    border-color: var(--corp-orange);
}

.vessel-profile-card__media-switch-icon {
    display: block;
    width: 32больгpx;
    height: 32px;
    box-sizing: border-box;
    object-fit: contain;
    clip-path: inset(2px 0 2px 0);
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.vessel-profile-card__media-controls {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 5;
    display: none;
    align-items: flex-end;
    gap: 10px;
}

.vessel-profile-card.is-3d-disabled .vessel-profile-card__media-switcher,
.vessel-profile-card.is-3d-disabled .vessel-profile-card__media-controls {
    display: none !important;
}

.vessel-profile-card__main-image--media.is-model-active .vessel-profile-card__media-controls {
    display: flex;
}

.vessel-profile-card__main-image--media.is-model-active .vessel-profile-card__media-view-group {
    display: none;
}

.vessel-profile-card__media-view-group {
    position: relative;
}

.vessel-profile-card__media-control {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--corp-blue);
    border-radius: 50%;
    background: var(--corp-blue);
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.vessel-profile-card__media-control:hover,
.vessel-profile-card__media-control:focus-visible {
    background: var(--corp-orange);
    border-color: var(--corp-orange);
    outline: none;
    transform: translateY(-1px);
}

.vessel-profile-card__media-control-icon {
    display: block;
    pointer-events: none;
    color: #ffffff;
}

.vessel-profile-card__media-control-icon--views {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.vessel-profile-card__media-control-icon--fullscreen {
    position: relative;
    width: 18px;
    height: 18px;
}

.vessel-profile-card__media-control-icon--fullscreen::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(currentColor, currentColor) left top / 7px 2px no-repeat,
        linear-gradient(currentColor, currentColor) left top / 2px 7px no-repeat,
        linear-gradient(currentColor, currentColor) right top / 7px 2px no-repeat,
        linear-gradient(currentColor, currentColor) right top / 2px 7px no-repeat,
        linear-gradient(currentColor, currentColor) left bottom / 7px 2px no-repeat,
        linear-gradient(currentColor, currentColor) left bottom / 2px 7px no-repeat,
        linear-gradient(currentColor, currentColor) right bottom / 7px 2px no-repeat,
        linear-gradient(currentColor, currentColor) right bottom / 2px 7px no-repeat;
}

.vessel-profile-card__media-view-menu {
    position: absolute;
    right: 0;
    bottom: 48px;
    display: grid;
    gap: 4px;
    min-width: 164px;
    padding: 6px;
    border: 1px solid rgba(17, 50, 91, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 36px rgba(17, 50, 91, 0.18);
}

.vessel-profile-card__media-view-menu[hidden] {
    display: none;
}

.vessel-profile-card__media-view-option {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--corp-blue);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.vessel-profile-card__media-view-option:hover,
.vessel-profile-card__media-view-option:focus-visible,
.vessel-profile-card__media-view-option.is-active {
    background: var(--corp-orange);
    border-color: var(--corp-orange);
    color: var(--corp-blue);
    outline: none;
}

.vessel-profile-card__main-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.vessel-other-carousel {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: calc(var(--radius-card) - 6px);
    background: var(--bg-muted);
    box-shadow: var(--shadow);
}

.vessel-other-carousel__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.vessel-other-carousel__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--text-block-gap);
    align-items: center;
    min-height: 76px;
    padding: 14px 18px;
    background: #404040;
    color: #ffffff;
}

.vessel-other-carousel__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.vessel-other-carousel__nav {
    display: inline-flex;
    gap: 8px;
}

.vessel-other-carousel__arrow {
    width: 44px;
    height: 44px;
    min-height: 44px;
}

.vessel-other-carousel__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.vessel-specs {
    display: grid;
    gap: 8px;
    margin: 0;
}

.vessel-specs__row {
    display: grid;
    grid-template-columns: max-content minmax(24px, 1fr) max-content;
    gap: 6px;
    align-items: end;
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.35;
}

.vessel-specs__row dt,
.vessel-specs__row dd {
    margin: 0;
}

.vessel-specs__row dt {
    color: var(--corp-blue);
    font-weight: 600;
}

.vessel-specs__row dd {
    color: var(--text-main);
    text-align: right;
}

.vessel-specs__leader {
    min-width: 16px;
    border-bottom: 1px dotted rgba(17, 50, 91, 0.45);
    transform: translateY(-0.32em);
}

.vessel-profile-card__brochure {
    width: fit-content;
    justify-self: start;
}

.vessel-profile-card__brochure:hover,
.vessel-profile-card__brochure:focus-visible {
    background: var(--corp-orange);
    color: var(--corp-blue);
    border-color: var(--corp-orange);
    opacity: 1;
}

@media (max-width: 1377px) and (pointer: coarse) {
    .vessel-profile-card__header {
        grid-template-columns: 1fr;
    }

    .vessel-profile-card__header-main {
        gap: var(--page-block-padding-y);
    }

    .vessel-profile-card__title {
        white-space: normal;
    }

    .vessel-profile-card__nav {
        justify-self: start;
        align-self: start;
        margin-top: calc(51px + var(--page-block-padding-y));
    }

    .vessel-profile-card__body {
        grid-template-columns: 1fr;
    }

    .vessel-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vessel-info-block {
    display: grid;
    gap: 8px;
}

.vessel-info-block h2 {
    margin: 0;
    color: var(--corp-orange);
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 700;
    line-height: 1.15;
}

.vessel-info-block p {
    margin: 0;
    color: var(--corp-blue);
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.vessel-operating-copy {
    display: grid;
    gap: 10px;
    color: var(--corp-blue);
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.5;
}

.vessel-operating-copy p {
    margin: 0;
}

.vessel-operating-copy__row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
}

.vessel-operating-copy__bullet {
    display: grid;
    grid-template-columns: 1em minmax(0, 1fr);
    gap: 6px;
    align-items: start;
}

.vessel-operating-copy__bullet-mark {
    font-weight: 700;
}

.vessel-operating-copy__bullet-body {
    min-width: 0;
}

.vessel-operating-copy__numbered {
    display: grid;
    grid-template-columns: 2em minmax(0, 1fr);
    gap: 6px;
    align-items: start;
}

.vessel-operating-copy__numbered-number,
.vessel-operating-copy__numbered-lead {
    font-weight: 700;
}

.vessel-operating-copy__numbered-body {
    min-width: 0;
}

.vessel-operating-copy__accent {
    color: var(--corp-orange);
    font-weight: 700;
}

.vessel-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--text-block-gap);
}

.vessel-gallery__item {
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: var(--bg-muted);
    cursor: pointer;
    box-shadow: var(--shadow);
}

.vessel-gallery__item:hover,
.vessel-gallery__item:focus-visible {
    border-color: var(--corp-orange);
    outline: none;
}

.vessel-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.vessel-gallery__item:hover img,
.vessel-gallery__item:focus-visible img {
    transform: scale(1.03);
}

.vessel-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 56px 28px 28px;
    background: rgba(0, 0, 0, 0.88);
}

body.is-vessel-lightbox-open {
    overflow: hidden;
}

.vessel-lightbox[hidden] {
    display: none;
}

.vessel-lightbox__frame {
    position: relative;
    width: min(92vw, 1280px);
    max-width: 100%;
}

.vessel-lightbox__image {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 96px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.vessel-lightbox__close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: rgba(17, 50, 91, 0.82);
    color: #ffffff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.vessel-lightbox__close:hover,
.vessel-lightbox__close:focus-visible {
    background: var(--corp-orange);
    color: var(--corp-blue);
    outline: none;
}

.vessel-lightbox__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
}

.vessel-lightbox [data-vessel-lightbox-prev] {
    left: 16px;
}

.vessel-lightbox [data-vessel-lightbox-next] {
    right: 16px;
}

.vessel-lightbox__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.vessel-lightbox__nav:disabled:hover,
.vessel-lightbox__nav:disabled:focus-visible {
    background: inherit;
}

@media (max-width: 900px), (max-width: 1377px) and (pointer: coarse) {
    .projects-catalog-page {
        gap: 12px;
        padding: 16px;
    }

    .projects-page.projects-catalog-page {
        gap: clamp(16px, 2.4vw, 28px);
    }

    .projects-catalog-page .vessel-grid {
        align-content: start;
        justify-content: start;
    }

    .vessel-grid,
    .vessel-detail-card,
    .vessel-profile-card__body {
        grid-template-columns: 1fr;
    }

    .projects-catalog-header {
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
        gap: clamp(16px, 2.4vw, 28px);
    }

    .projects-catalog-header__title-group {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        row-gap: 0;
        gap: 10px;
    }

    .projects-catalog-header h1 {
        white-space: nowrap;
        max-width: 100%;
        font-size: clamp(20px, 4.8vw, 30px);
    }

    .projects-search--compact {
        flex: none;
        width: 100%;
        max-width: none;
        align-items: stretch;
    }

    .projects-search__bar,
    .projects-search__input {
        width: 100%;
        max-width: 100%;
    }

    .projects-catalog-back-btn {
        width: 40px;
        height: 40px;
        min-height: 40px;
    }

    .vessel-card h2 {
        max-width: 100%;
    }

    .projects-catalog-page .vessel-card:not(.vessel-card--caption-link) h2 {
        max-width: 100%;
    }

    .vessel-profile-card__header {
        grid-template-columns: 1fr;
    }

    .vessel-profile-card__nav {
        justify-self: center;
        align-self: start;
        margin-top: 0;
    }

    .vessel-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-block--intro,
    .home-projects-carousel__page {
        display: block !important;
        grid-template-columns: none;
        width: 100%;
        min-width: 100%;
    }

    .home-projects-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        min-width: 100%;
        max-width: none;
        justify-self: stretch;
        flex: none;
    }

    .home-projects-card .vessel-card__btn {
        width: fit-content;
        align-self: flex-end;
        justify-self: flex-end;
        margin-top: auto;
    }

    .home-block--career {
        grid-template-columns: minmax(0, 1.08fr) minmax(120px, 0.92fr) !important;
        gap: 12px;
        align-items: start;
    }

    .home-block--contacts {
        grid-template-columns: 1fr !important;
        min-height: auto;
    }

    .home-career__text {
        order: 1;
        align-self: center;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .home-career__media {
        order: 2;
        grid-template-columns: 1fr !important;
        min-height: 0;
        width: 100%;
        min-width: 0;
        justify-items: center;
    }

    .home-career__stack {
        display: none !important;
    }

    .home-career__figure--main {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        min-height: 0;
        margin: 0 auto;
        justify-self: center;
    }

    .home-contacts__map {
        min-height: clamp(320px, 60vw, 520px);
        grid-column: 1 / -1;
    }
}

@media (max-width: 576px) {
    .projects-catalog-page .vessel-grid {
        align-content: start;
        justify-content: start;
    }

    .projects-catalog-page {
        gap: 0;
    }

    .projects-page {
        gap: 0;
        padding: 10px var(--container-padding-x);
        border-radius: 0;
    }

    .projects-page.projects-catalog-page {
        gap: clamp(16px, 2.4vw, 28px);
    }

    .projects-catalog-header {
        gap: clamp(16px, 2.4vw, 28px);
    }

    .projects-catalog-header__title-group {
        gap: 8px;
    }

    .projects-catalog-header h1 {
        font-size: clamp(18px, 5vw, 26px);
        line-height: 1.1;
    }

    .projects-catalog-back-btn {
        width: 34px;
        height: 34px;
        min-height: 34px;
    }

    .projects-search--compact {
        flex: none;
        gap: 4px;
    }

    .projects-catalog-page > .vessel-grid {
        margin-top: 0;
    }

    .projects-search__watermark {
        min-height: 48px;
        font-size: 13px;
    }

    .vessel-card {
        min-height: 180px;
        border-radius: 12px;
    }

    .projects-catalog-page .vessel-card {
        aspect-ratio: 27 / 20;
        min-height: 0;
        border-radius: 12px;
    }

    .vessel-card {
        padding: 14px;
    }

    .projects-catalog-page .vessel-card__footer {
        position: relative;
        display: block;
        min-height: 50px;
        padding: 0 44px 0 12px;
        overflow: hidden;
    }

    .projects-catalog-page .vessel-card--showcase .vessel-card__title {
        left: 12px !important;
        max-width: calc(100% - 70px) !important;
        font-size: 11px !important;
        line-height: 1.05 !important;
    }

    .projects-catalog-page .vessel-card__arrow {
        width: 40px;
        height: 40px;
        min-height: 40px;
        right: 8px;
    }

    .projects-catalog-page .vessel-card__arrow::after {
        width: 20px;
        height: 20px;
    }

    .projects-catalog-page .vessel-card:not(.vessel-card--caption-link) h2 {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.05;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .vessel-card--caption-link h2 {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.05;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .vessel-card h2 {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.05;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .vessel-card__btn {
        min-height: 36px;
        padding: 0 16px;
        font-size: 12px;
        width: fit-content;
        align-self: flex-end;
        margin-top: auto;
    }

    .projects-next-section__btn {
        width: 100%;
    }

    .home-page {
        gap: 0;
    }

    .home-block {
        min-height: auto;
        padding: var(--page-block-padding-y) var(--page-inline-padding-x);
        border-radius: 0;
    }

    .home-block--career,
    .home-block--contacts {
        padding: var(--page-block-padding-y) var(--page-inline-padding-x);
    }

    .home-block--career {
        grid-template-columns: 1fr !important;
        gap: 10px;
        align-items: start;
    }

    .home-block__title {
        font-size: 20px;
    }

    .home-block__subtitle {
        font-size: 13px;
    }

    .home-block__eyebrow p {
        font-size: 12px;
    }

    .home-block__btn,
    .home-career__btn,
    .home-contacts__btn {
        font-size: 12px;
    }

    .home-block__figure img {
        height: 220px;
    }

    .home-block__section-title {
        font-size: 18px;
    }

    .home-projects-card {
        min-height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        min-width: 100%;
        max-width: none;
        justify-self: stretch;
        flex: none;
    }

    .home-projects-card .vessel-card__btn {
        width: fit-content;
        align-self: flex-end;
        margin-top: auto;
    }

    .home-block--projects .home-projects-card h3 {
        font-size: 11px !important;
        line-height: 1.05;
        display: inline-flex;
        width: fit-content;
        max-width: calc(100% - 24px);
        box-sizing: border-box;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .home-projects-carousel__controls {
        justify-content: space-between;
    }

    .home-projects-carousel__page {
        gap: 12px;
    }

    .home-projects-carousel__nav {
        width: 44px;
        height: 44px;
    }

    .home-career__text {
        height: auto;
        gap: 12px;
        align-self: start;
        width: 100%;
        max-width: 100%;
    }

    .home-career__title,
    .home-contacts__title {
        font-size: 18px !important;
        line-height: 1.1 !important;
    }

    .home-career__copy,
    .home-contacts__details {
        font-size: 12px !important;
        line-height: 1.28 !important;
    }

    .home-career__media {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr !important;
        gap: 0;
        order: 2;
        justify-items: center;
        align-self: end;
    }

    .home-career__stack {
        display: none !important;
    }

    .home-career__figure--main {
        width: min(100%, 220px);
        height: auto;
        aspect-ratio: 4 / 3;
        min-height: 0;
        margin: 0 auto;
        align-self: start;
        justify-self: center;
    }

    .home-career__figure--top {
        padding: 4px;
        min-height: 110px;
    }

    .home-career__figure--bottom {
        min-height: 110px;
    }

    .home-contacts__text {
        gap: var(--text-block-gap);
        grid-column: 1 / -1;
    }

    .home-career__copy,
    .home-contacts__details {
        gap: var(--text-block-gap);
        font-size: 12px;
        line-height: 1.26;
    }

    .home-contacts__actions {
        margin-top: 0;
    }

    .home-contacts__map {
        min-height: 360px;
        grid-column: 1 / -1;
    }

    .home-contacts__footer {
        gap: 6px;
    }

    .home-contacts__text {
        order: 1;
    }

    .home-contacts__map {
        order: 2;
    }

    .vessel-profile-card {
        gap: 14px;
        padding: 12px;
        border-radius: 12px;
    }

    .vessel-profile-card__header {
        gap: 10px;
    }

    .vessel-profile-card__title {
        max-width: 100%;
        font-size: clamp(13px, 3.6vw, 20px);
        line-height: 1.08;
        text-align: center;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }

    .vessel-profile-card__title-block {
        justify-items: center;
    }

    .vessel-profile-card__subtitle {
        font-size: 12px;
    }

    .vessel-profile-card__arrow {
        width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .vessel-profile-card__body,
    .vessel-profile-card__primary,
    .vessel-profile-card__details {
        gap: 14px;
    }

    .vessel-profile-card__main-image {
        border-radius: 10px;
    }

    .vessel-profile-card__main-image img {
        aspect-ratio: 4 / 3;
    }

    .vessel-profile-card__media-switcher {
        gap: 8px;
    }

    .vessel-profile-card__media-switch,
    .vessel-profile-card__media-control {
        width: 36px;
        height: 36px;
    }

    .vessel-profile-card__media-switch-icon {
        width: 28px;
        height: 28px;
    }

    .vessel-profile-card__media-controls {
        right: 10px;
        bottom: 10px;
        gap: 6px;
    }

    .vessel-profile-card__media-view-menu {
        bottom: 40px;
        right: 0;
        width: max-content;
        min-width: 106px;
        max-width: calc(100vw - 80px);
        padding: 3px;
        gap: 1px;
        border-radius: 9px;
    }

    .vessel-profile-card__media-view-option {
        padding: 5px 7px;
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
        border-radius: 6px;
    }

    .vessel-other-carousel {
        border-radius: 10px;
    }

    .vessel-other-carousel__image {
        aspect-ratio: 4 / 3;
    }

    .vessel-other-carousel__caption {
        gap: 10px;
        min-height: 58px;
        padding: 10px 12px;
    }

    .vessel-other-carousel__title {
        font-size: 13px;
        line-height: 1.2;
    }

    .vessel-other-carousel__nav {
        gap: 6px;
    }

    .vessel-other-carousel__arrow {
        width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .vessel-specs {
        gap: 0;
    }

    .vessel-specs__row {
        grid-template-columns: 1fr;
        gap: 3px;
        padding: 9px 0;
        border-bottom: 1px solid rgba(17, 50, 91, 0.12);
        font-size: 13px;
    }

    .vessel-specs__leader {
        display: none;
    }

    .vessel-specs__row dt,
    .vessel-specs__row dd {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .vessel-specs__row dd {
        text-align: left;
        font-weight: 700;
    }

    .vessel-info-block {
        gap: 6px;
    }

    .vessel-info-block h2 {
        font-size: 18px;
    }

    .vessel-info-block p {
        font-size: 14px;
        line-height: 1.42;
        overflow-wrap: anywhere;
    }

    .vessel-operating-copy {
        gap: 8px;
        font-size: 14px;
        line-height: 1.42;
    }

    .vessel-operating-copy__row {
        grid-template-columns: max-content minmax(0, 1fr);
    }

    .vessel-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .vessel-gallery__item {
        border-radius: 8px;
    }

    .vessel-profile-card__brochure {
        min-height: 40px;
        width: 100%;
        justify-content: center;
        font-size: 13px;
    }

    .vessel-lightbox {
        padding: 54px 10px 20px;
    }

    .vessel-lightbox__frame {
        width: min(94vw, 100%);
    }

    .vessel-lightbox__nav {
        width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .vessel-lightbox [data-vessel-lightbox-prev] {
        left: 10px;
    }

    .vessel-lightbox [data-vessel-lightbox-next] {
        right: 10px;
    }

    .vessel-lightbox__close {
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
        font-size: 28px;
    }

    .vessel-lightbox__image {
        max-height: calc(100vh - 84px);
    }
}





section.home-page {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: calc(100% + (var(--container-padding-x) * 2));
    margin-inline: calc(var(--container-padding-x) * -1);
    padding: 0;
    min-height: auto;
}

.home-block {
    position: relative;
    width: calc(100% + (var(--container-padding-x) * 2));
    margin-inline: calc(var(--container-padding-x) * -1);
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: var(--text-block-gap);
    min-height: clamp(420px, 40vw, 520px);
    padding: clamp(24px, 3vw, 36px) var(--page-inline-padding-x);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.home-block--projects {
    background: #ffffff;
}

.home-block::before {
    content: none;
}

.home-block--intro {
    background: url("../ui/base/about.jpg") center 35% / cover no-repeat;
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--page-block-padding-y);
}

.home-block--intro > * {
    position: relative;
    z-index: 1;
}

.home-block--projects::before {
    content: none;
}

.home-block--projects > * {
    position: relative;
    z-index: 1;
}

.home-block__text {
    display: grid;
    gap: var(--page-block-padding-y);
    min-width: 0;
    max-width: 920px;
}

.home-block--intro .home-block__text {
    height: 100%;
    padding-left: clamp(10px, 0.9vw, 18px);
    box-sizing: border-box;
}

.home-block__eyebrow {
    display: grid;
    gap: 2px;
    justify-self: start;
}

.home-block__eyebrow p {
    margin: 0;
    
    color: white;
    font-style: italic;
    font-size: clamp(18px, 1.9vw, 30px);
    line-height: 1.05;
    text-transform: uppercase;
}

.home-block__content {
    display: grid;
    gap: var(--text-block-gap);
    align-self: center;
}

.home-block__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(32px, 3.4vw, 62px);
    font-weight: 700;
    line-height: 1.04;
}

.home-block__subtitle {
    margin: 0;
    color: #ffffff;
    font-size: clamp(18px, 1.9vw, 28px);
    font-weight: 700;
    line-height: 1.2;
}

.home-block__actions {
    display: flex;
    justify-content: flex-start;
}

.home-block--intro .home-block__actions {
    margin-top: auto;
}

.home-block__btn {
    width: fit-content;
    outline: 1px solid rgba(255, 255, 255, 0.85);
}

.home-block__btn:hover,
.home-block__btn:focus-visible {
    background: var(--corp-orange);
    color: var(--corp-blue);
    border-color: var(--corp-orange);
    opacity: 1;
}

@media (min-width: 993px) and (pointer: fine), (min-width: 1378px) {
    .page-hero.home-block--intro {
        min-height: clamp(520px, 40vw, 720px);
        padding: var(--intro-block-start) var(--intro-inline-start) clamp(28px, 2.2vw, 44px);
        background-size: 102% auto;
    }

    .page-hero.page-hero--home,
    .page-hero.page-hero--about,
    .page-hero.page-hero--services,
    .page-hero.page-hero--career,
    .page-hero.page-hero--contacts {
        --hero-min-height: clamp(520px, 40vw, 720px);
        background-size: 102% auto;
    }

    .home-block--intro .home-block__text {
        align-content: start;
        gap: 0;
        height: auto;
        max-width: none;
        padding: 0;
    }

    .home-block--intro .home-block__eyebrow {
        margin: 0;
        padding: 0;
    }

    .home-block--intro .home-block__eyebrow p {
        font-size: clamp(18px, 1.85vw, 30px);
        line-height: 1.05;
        font-style: italic;
        letter-spacing: normal;
    }

    .home-block--intro .home-block__content {
        gap: clamp(10px, 1vw, 16px);
        margin-top: clamp(34px, 2.9vw, 48px);
    }

    .home-block--intro .home-block__title {
        max-width: none;
        font-size: clamp(38px, 4.03vw, 64px);
        line-height: 1.04;
        white-space: nowrap;
    }

    .home-block--intro .home-block__subtitle {
        max-width: none;
        font-size: clamp(18px, 1.82vw, 28px);
        line-height: 1.2;
    }

    .home-block--intro .home-block__subtitle br {
        display: block;
    }

    .home-block--intro .home-block__actions {
        margin-top: clamp(34px, 2.7vw, 44px);
    }
}

@media (max-width: 992px), (max-width: 1377px) and (pointer: coarse) {
    .home-block--intro {
        min-height: clamp(360px, 72vw, 520px);
        padding: clamp(20px, 3vw, 30px) var(--page-inline-padding-x) clamp(22px, 4vw, 32px);
    }

    .home-block--intro .home-block__text {
        height: auto;
        max-width: 100%;
        padding-left: 0;
        gap: clamp(10px, 2vw, 16px);
    }

    .home-block--intro .home-block__eyebrow {
        margin-top: 2px;
    }

    .home-block--intro .home-block__eyebrow p {
        font-size: clamp(12px, 1.8vw, 22px);
        line-height: 1.08;
    }

    .home-block--intro .home-block__content {
        gap: clamp(8px, 1.8vw, 14px);
    }

    .home-block--intro .home-block__title {
        max-width: 11ch;
        font-size: clamp(26px, 5vw, 48px);
        line-height: 1.08;
    }

    .home-block--intro .home-block__subtitle {
        max-width: 20ch;
        font-size: clamp(14px, 2.6vw, 22px);
        line-height: 1.22;
    }

    .home-block--intro .home-block__actions {
        margin-top: 0;
    }
}

.home-block__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.home-block__section-title {
    margin: 0;
    color: var(--corp-blue);
    font-size: clamp(24px, 2.4vw, 40px);
    font-weight: 700;
    line-height: 1.1;
}

.home-projects-carousel {
    display: grid;
    gap: var(--text-block-gap);
    height: 100%;
}

.home-projects-carousel__viewport {
    position: relative;
    overflow: hidden;
    height: 100%;
    cursor: default;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    border-radius: var(--radius-card);
}

.home-projects-carousel__viewport.is-dragging {
    cursor: grabbing;
}

.home-projects-carousel__edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(72px, 6vw, 120px);
    z-index: 5;
    display: none;
    padding: 0;
    border: 0;
    border-radius: var(--radius-card);
    background: transparent;
    color: transparent;
    appearance: none;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.home-projects-carousel__edge::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.home-projects-carousel__edge--prev {
    left: 0;
    background: linear-gradient(90deg, rgba(17, 50, 91, 0.55) 0%, rgba(17, 50, 91, 0) 100%);
}

.home-projects-carousel__edge--next {
    right: 0;
    background: linear-gradient(270deg, rgba(17, 50, 91, 0.55) 0%, rgba(17, 50, 91, 0) 100%);
}

@media (hover: hover) and (pointer: fine) {
    .home-projects-carousel__edge {
        display: block;
    }

    .home-projects-carousel__edge:hover,
    .home-projects-carousel__edge:focus-visible,
    .home-projects-carousel__edge:active {
        opacity: 1;
        outline: none;
    }
}

.home-projects-carousel__edge:active {
    cursor: grabbing;
}

.home-projects-carousel__track {
    --home-projects-page-gap: var(--text-block-gap);
    display: flex;
    gap: var(--home-projects-page-gap);
    transition: transform 0.45s ease;
    will-change: transform;
    height: 100%;
}

.home-projects-carousel__page {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--home-projects-page-gap);
    height: 100%;
}

.home-projects-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 27 / 20;
    min-height: 0;
    padding: 0;
    align-self: start;
    box-sizing: border-box;
    background: #404040;
    cursor: pointer;
}

.home-projects-card .home-projects-card__image-link {
    position: relative;
    inset: auto;
    z-index: 0;
    display: block;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 0;
}

.home-projects-card__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.home-projects-card:hover .home-projects-card__image,
.home-projects-card:focus-within .home-projects-card__image {
    transform: scale(1.015);
}

.home-projects-card .home-projects-card__image-link:focus-visible {
    outline: 2px solid var(--corp-orange);
    outline-offset: -2px;
}

.home-projects-card .vessel-card__footer {
    position: relative;
    display: block;
    flex: 0 0 66px;
    min-height: 66px;
    padding: 0 56px 0 16px;
    overflow: hidden;
}

.home-projects-card .vessel-card__title {
    position: absolute;
    left: 16px;
    top: 50%;
    max-width: calc(100% - 92px);
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateY(-50%);
}

.home-projects-card .vessel-card__arrow,
.home-projects-card .vessel-card__arrow:hover,
.home-projects-card .vessel-card__arrow:focus,
.home-projects-card .vessel-card__arrow:focus-visible,
.home-projects-card .vessel-card__arrow:active {
    position: absolute;
    right: 10px;
    top: 50%;
    z-index: 2;
    background: transparent;
    border-color: transparent;
    color: #ffffff;
    box-shadow: none;
    opacity: 1;
    outline: none;
    transform: translateY(-50%);
}

.home-projects-card .vessel-card__arrow::after {
    width: 22px;
    height: 22px;
}

.home-block--career {
    background: var(--corp-blue);
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
    align-items: stretch;
    gap: var(--page-block-padding-y);
}

.home-block--contacts {
    background: #ffffff;
    grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1.18fr);
    grid-auto-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--page-block-padding-y);
    flex: 1;
}

.home-block--career::before {
    content: none;
}

.home-block--contacts::before {
    content: none;
}

.home-block--career > * {
    position: relative;
    z-index: 1;
}

.home-block--contacts > * {
    position: relative;
    z-index: 1;
}

.home-career__text {
    display: grid;
    align-content: start;
    gap: var(--page-block-padding-y);
    min-width: 0;
    height: 100%;
    color: #ffffff;
    text-align: left;
}

.home-career__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(28px, 3vw, 54px);
    font-weight: 700;
    line-height: 1.05;
}

.home-career__copy {
    margin: 0;
    color: #ffffff;
    font-size: clamp(18px, 1.8vw, 26px);
    font-weight: 400;
    line-height: 1.35;
}

.home-career__actions {
    margin-top: auto;
}

.home-career__btn {
    width: fit-content;
    outline: 1px solid rgba(255, 255, 255, 0.9);
}

.home-career__btn:hover,
.home-career__btn:focus-visible {
    background: var(--corp-orange);
    color: var(--corp-blue);
    border-color: var(--corp-orange);
    opacity: 1;
}

.home-career__figure {
    margin: 0;
    overflow: hidden;
    min-width: 0;
}

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

.home-career__picture {
    display: block;
    width: 100%;
    height: 100%;
}

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

.home-career__figure--main {
    border-radius: var(--radius-card);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.22);
}

.home-career__media {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: 8px;
    align-items: stretch;
    min-height: clamp(320px, 34vw, 460px);
    height: 100%;
    width: 100%;
}

.home-career__stack {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    width: 100%;
}

.home-career__figure--top {
    padding: 4px;
    background: #ffffff;
    border-radius: var(--radius-card);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
    min-height: 0;
    height: 100%;
}

.home-career__figure--top img {
    border-radius: calc(var(--radius-card) - 6px);
}

.home-career__figure--bottom {
    border-radius: var(--radius-card);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
    min-height: 0;
    height: 100%;
}

.home-projects-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.home-projects-carousel__indicators {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    margin-right: auto;
}

.home-projects-carousel__arrows {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-projects-carousel__dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #b7bdc7;
    border: 0;
    padding: 0;
    flex: 0 0 auto;
    appearance: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.home-projects-carousel__dot.is-active {
    background: var(--corp-blue);
    transform: scale(1.15);
}

.home-contacts__text {
    display: grid;
    align-content: start;
    gap: var(--text-block-gap);
    min-width: 0;
    height: 100%;
    color: var(--corp-blue);
    text-align: left;
}

.home-contacts__title {
    margin: 0;
    color: var(--corp-blue);
    font-size: clamp(28px, 3vw, 54px);
    font-weight: 700;
    line-height: 1.05;
}

.home-contacts__details {
    display: grid;
    gap: var(--text-block-gap);
    margin: 0;
    color: var(--corp-blue);
    font-size: clamp(18px, 1.8vw, 26px);
    font-weight: 400;
    line-height: 1.45;
}

.home-contacts__details p {
    margin: 0;
}

.home-contacts__details a {
    color: var(--corp-orange);
    font-weight: 700;
    text-decoration: none;
}

.home-contacts__details a:hover,
.home-contacts__details a:focus-visible {
    text-decoration: underline;
}

.home-contacts__actions {
    margin-top: 0;
}

.home-contacts__btn {
    width: fit-content;
    outline: 1px solid rgba(255, 255, 255, 0.9);
}

.home-contacts__btn:hover,
.home-contacts__btn:focus-visible {
    background: var(--corp-orange);
    color: var(--corp-blue);
    border-color: var(--corp-orange);
    opacity: 1;
}

.home-contacts__map {
    height: 100%;
    min-height: 100%;
}

.home-contacts__footer {
    display: grid;
    gap: 12px;
    margin-top: auto;
}

    .home-contacts__social {
        display: grid;
        gap: 8px;
        margin: 0;
        font-size: 9px;
        line-height: 1.45;
    }

.social-promo__text {
    display: none;
}

.home-projects-carousel__nav {
    width: 48px;
    height: 48px;
    box-shadow: var(--shadow);
}

.home-projects-carousel__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.about-section-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    width: calc(100% + (var(--container-padding-x) * 2));
    margin-inline: calc(var(--container-padding-x) * -1);
    min-height: auto;
}

.page-hero {
    --intro-inline-start: var(--page-inline-padding-x);
    --intro-block-start: clamp(20px, 1.8vw, 27px);
    position: relative;
    display: grid;
    flex: 0 0 auto;
    align-content: start;
    justify-items: start;
    gap: var(--text-block-gap);
    width: calc(100% + (var(--container-padding-x) * 2));
    margin-inline: calc(var(--container-padding-x) * -1);
    overflow: hidden;
    padding: var(--intro-block-start) var(--intro-inline-start) var(--page-block-padding-y);
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: var(--hero-min-height, clamp(320px, 40vw, 560px));
}

.page-hero--nested {
    width: 100%;
    margin-inline: 0;
}

.page-hero > * {
    position: relative;
    z-index: 1;
}

.page-hero .kp-title,
.page-hero .kp-text,
.page-hero .home-block__eyebrow p,
.page-hero .home-block__title,
.page-hero .home-block__subtitle {
    color: #ffffff;
    text-align: left;
}

.page-hero > .kp-title,
.page-hero > .kp-text,
.page-hero > .about-brochure,
.page-hero > .page-hero__content {
    width: 100%;
    max-width: 920px;
}

.page-hero > .page-hero__content {
    display: grid;
    gap: var(--text-block-gap);
}

.page-hero br,
.privacy-policy-text br {
    display: none;
}

.page-hero .kp-text {
    max-width: 60ch;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.page-hero--home {
    --hero-min-height: clamp(440px, 32.23vw, 620px);
    background-image: url("../ui/base/about.jpg");
    grid-template-columns: 1fr;
    gap: var(--page-block-padding-y);
}

@media (max-width: 992px), (max-width: 1377px) and (pointer: coarse) {
    .home-page > .home-block {
        margin-inline: 0;
    }

    .page-hero--home,
    .page-hero--about,
    .page-hero--services,
    .page-hero--career,
    .page-hero--contacts {
        --hero-min-height: clamp(360px, 72vw, 520px);
    }
}

.page-hero--about,
.page-hero--services,
.page-hero--career,
.page-hero--contacts {
    --hero-min-height: clamp(440px, 32.23vw, 620px);
    background-image: url("../ui/base/about.jpg");
}

.page-hero--home:before,
.page-hero--about:before,
.page-hero--services:before,
.page-hero--career:before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
          90deg,
          rgba(9, 30, 54, 0.76) 0%,
          rgba(9, 30, 54, 0.58) 30%,
          rgba(9, 30, 54, 0.18) 55%,
          transparent 82%
      );
}

.about-brochure {
    margin: var(--text-block-gap) 0;
}

.about-brochure__btn {
    width: fit-content;
    outline: 1px solid white;
}

.about-section-panel .services-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    flex: 1;
    min-height: calc(100dvh - var(--header-height) - var(--footer-height));
    width: 100%;
    margin-inline: 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--page-block-padding-y);
    align-items: stretch;
    margin-top: 0;
    padding: var(--page-block-padding-y) var(--page-inline-padding-x);
    background: #ffffff;
    border-radius: 0;
    flex: 1;
}

.services-grid__text {
    display: flex;
    flex-direction: column;
    gap: var(--text-block-gap);
    min-width: 0;
}

.services-grid__text h3 {
    margin: 0;
    color: var(--corp-blue);
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.2;
}

.services-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 20px;
    color: var(--corp-blue);
    font-size: 16px;
    line-height: 1.2;
}

.services-list li::marker {
    color: var(--corp-blue);
    font-size: 1.25em;
}

.services-brochure {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: var(--text-block-gap);
}

.services-project-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    background: transparent;
}

.services-project-card img {
    display: block;
    width: 100%;
    height: clamp(240px, 28vw, 420px);
    object-fit: cover;
    border-radius: 0.75rem;
}

.services-project-card figcaption {
    display: flex;
    margin-top: auto;
    padding: 18px 0 0;
    font-size: 1rem;
    background: transparent;
    color: #ffffff;
}

.services-project-card figcaption a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    width: fit-content;
    max-width: 100%;
    background: var(--corp-blue);
    color: #ffffff;
    border-radius: var(--radius-btn);
    outline: 1px solid white;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: normal;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.services-project-card figcaption a:hover,
.services-project-card figcaption a:focus-visible {
    background: var(--corp-orange);
    color: var(--corp-blue);
    border-color: var(--corp-orange);
}

.career-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--page-block-padding-y);
    align-items: stretch;
    padding: var(--page-block-padding-y) var(--page-inline-padding-x);
    background: #ffffff;
    border-radius: 0;
}

.career-image {
    min-width: 0;
    margin: 0;
}

.career-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(320px, 40vw, 560px);
    object-fit: cover;
    border-radius: 0;
}

.career-content {
    display: grid;
    gap: var(--page-block-padding-y);
    align-content: start;
    min-width: 0;
}

.career-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--text-block-gap);
    color: var(--corp-blue);
}

.career-section h3 {
    min-height: 1.2em;
    margin: 0;
    color: var(--corp-blue);
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.2;
}

.career-section p {
    min-height: 1.4em;
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
}

.career-brand {
    font-weight: 700;
}

.career-brand--blue {
    color: var(--corp-blue);
}

.career-brand--orange {
    color: var(--corp-orange);
}

.career-btn {
    width: 260px;
    min-height: 44px;
    outline: 1px solid white;
}

.career-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    width: 100%;
    margin-inline: 0;
    min-height: auto;
}

.career-card .career-grid {
    width: 100%;
    flex: 1;
    min-height: 0;
}

.career-form-panel {
    padding: var(--page-block-padding-y) var(--page-inline-padding-x);
    background: #ffffff;
    border-radius: 0;
    color: var(--corp-blue);
}

.career-form-back-btn {
    margin-bottom: var(--page-block-padding-y);
}

.career-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
    gap: var(--page-block-padding-y);
    align-items: stretch;
}

.career-form-main {
    display: grid;
    align-content: start;
    gap: var(--page-block-padding-y);
    min-width: 0;
}

.career-form-image {
    min-width: 0;
    margin: 0;
}

.career-form-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: 20% center;
    border-radius: 0.75rem;
}

.career-form-intro h3,
.career-terms h3 {
    min-height: 1.2em;
    margin: 0;
    color: var(--corp-blue);
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.2;
}

.career-terms h3 {
    font-size: 18px;
    font-weight: 400;
}

.career-required-note {
    font-size: 14px;
    font-weight: 400;
}

.career-form-intro p,
.career-terms p {
    min-height: 1.4em;
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
}

.career-form-intro,
.career-terms {
    display: grid;
    gap: var(--text-block-gap);
}

.career-terms p {
    font-size: 15px;
}

.career-form {
    display: grid;
    gap: var(--page-block-padding-y);
}

.career-form-fields {
    display: grid;
    gap: 18px;
}

.career-field {
    display: grid;
    gap: 8px;
    color: var(--corp-blue);
}

.career-field input,
.career-field textarea {
    width: 100%;
    min-height: 48px;
    border: 2px solid var(--border-input);
    border-radius: var(--radius-input);
    background: var(--bg-input);
    color: var(--text-main);
    font: inherit;
    font-size: 17px;
    padding: 0 16px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.career-field textarea {
    min-height: 150px;
    padding: 14px 16px;
    resize: vertical;
}

.career-field input::placeholder,
.career-field textarea::placeholder {
    color: var(--corp-blue);
    opacity: 1;
}

.career-field input:focus,
.career-field textarea:focus {
    border-color: var(--corp-blue);
    box-shadow: 0 0 0 3px rgba(17, 50, 91, 0.12);
}

.career-field.is-invalid input,
.career-field.is-invalid textarea {
    border-color: var(--corp-orange);
    box-shadow: 0 0 0 3px rgba(255, 65, 0, 0.14);
}

.career-field .errorlist,
.career-consent .errorlist {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    color: var(--corp-orange);
    font-size: 13px;
    line-height: 1.35;
}

.career-consent-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--page-block-padding-y);
    align-items: end;
}

.career-consent {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--text-block-gap);
    align-items: start;
    color: var(--corp-blue);
    cursor: pointer;
}

.career-consent input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.career-consent__box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-input);
    border-radius: 4px;
    background: #ffffff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.career-consent input:checked + .career-consent__box {
    background: var(--corp-blue);
    border-color: var(--corp-blue);
    box-shadow: inset 0 0 0 4px #ffffff;
}

.career-consent.is-invalid .career-consent__box {
    border-color: var(--corp-orange);
    box-shadow: 0 0 0 3px rgba(255, 65, 0, 0.14);
}

.career-consent__text {
    display: grid;
    gap: 8px;
    font-size: 15px;
    line-height: 1.4;
}

.career-privacy-link {
    width: fit-content;
    color: var(--corp-orange);
    font-weight: 700;
    text-decoration: none;
}

.career-privacy-link:hover,
.career-privacy-link:focus-visible {
    text-decoration: underline;
}

.career-submit {
    width: fit-content;
    outline: 1px solid white;
}

.career-toast {
    position: fixed;
    left: 50%;
    top: 96px;
    z-index: 1000;
    max-width: calc(100vw - 32px);
    padding: 16px 24px;
    background: #ffffff;
    color: var(--corp-blue);
    border: 2px solid var(--corp-orange);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.career-toast.is-hiding {
    opacity: 0;
    transform: translate(-50%, -12px);
}

.privacy-policy-panel {
    padding: var(--page-block-padding-y) var(--page-inline-padding-x);
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-card);
    color: var(--corp-blue);
}

.privacy-policy-panel h3 {
    min-height: 1.2em;
    margin: 0 0 var(--text-block-gap);
    color: var(--corp-blue);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    line-height: 1.2;
}

.privacy-policy-panel p {
    min-height: 1.4em;
    margin: 0;
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.3;
}

.privacy-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: var(--page-block-padding-y);
    align-items: stretch;
}

.privacy-policy-text,
.privacy-policy-image {
    height: 100%;
    min-height: 0;
}

.privacy-policy-text {
    display: grid;
    gap: var(--text-block-gap);
    overflow: visible;
    padding: clamp(14px, 1.6vw, 22px);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 45, 91, 0.12);
    border-radius: calc(var(--radius-card) - 6px);
    color: var(--corp-blue);
    font-size: clamp(14px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.22;
    text-align: left;
}

.privacy-policy-text h3,
.privacy-policy-text h4,
.privacy-policy-text p {
    margin: 0;
    font-weight: 400;
}

.privacy-policy-adomat,
.privacy-policy-contact,
.privacy-policy-marine {
    font-weight: 700;
}

.privacy-policy-marine,
.privacy-policy-contact {
    color: var(--corp-orange);
}

.privacy-policy-image {
    overflow: hidden;
    margin: 0;
    border-radius: calc(var(--radius-card) - 6px);
    box-shadow: var(--shadow);
}

.privacy-policy-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contacts-page {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: calc(100% + (var(--container-padding-x) * 2));
    margin-inline: calc(var(--container-padding-x) * -1);
    min-height: auto;
    padding-inline: 0;
}

.contacts-page > .career-form-card {
    display: flex;
    flex: 1;
    min-height: 0;
    padding: 0;
}

.contacts-page > .career-form-card > .contacts-panel {
    flex: 1;
    min-height: 0;
}

.contacts-page .contacts-layout {
    flex: 1;
    min-height: 0;
}

.contacts-panel {
    padding: var(--page-block-padding-y) var(--page-inline-padding-x);
    background: #ffffff;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
}

.contacts-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
    gap: var(--page-block-padding-y);
    align-items: start;
}

.contacts-office-column {
    display: grid;
    gap: var(--text-block-gap);
    min-width: 0;
    color: var(--corp-blue);
}

.contacts-office-column h3 {
    margin: 0;
    color: var(--corp-blue);
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.2;
}

.contacts-map {
    overflow: hidden;
    width: 100%;
    min-height: clamp(260px, 32vw, 420px);
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
    background: var(--bg-muted);
}

.contacts-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    border: 0;
}

.contacts-office-info {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) auto minmax(180px, 0.9fr);
    gap: var(--page-block-padding-y);
    align-items: start;
}

.contacts-office-details,
.contacts-social-text {
    display: grid;
    gap: var(--text-block-gap);
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}

.contacts-office-details p {
    margin: 0;
}

.contacts-office-email {
    color: var(--corp-orange);
    font-weight: 700;
}

.contacts-qr {
    display: grid;
    place-items: center;
    width: 124px;
    min-width: 124px;
    padding: var(--text-block-gap);
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.contacts-qr__trigger {
    border: 0;
    padding: var(--text-block-gap);
    cursor: pointer;
}

.contacts-qr-img {
    display: block;
    width: 100px;
    height: 100px;
}

.contacts-qr-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 56px 28px 28px;
    background: rgba(0, 0, 0, 0.88);
}

body.is-contacts-qr-open {
    overflow: hidden;
}

.contacts-qr-lightbox[hidden] {
    display: none;
}

.contacts-qr-lightbox__image {
    display: block;
    max-width: min(92vw, 720px);
    max-height: calc(100vh - 96px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    background: #ffffff;
}

.contacts-qr-lightbox__close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: rgba(17, 50, 91, 0.82);
    color: #ffffff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.contacts-qr-lightbox__close:hover,
.contacts-qr-lightbox__close:focus-visible {
    background: var(--corp-orange);
    color: var(--corp-blue);
    outline: none;
}

.contacts-social-text a {
    color: var(--corp-orange);
    font-weight: 700;
    text-decoration: none;
}

.contacts-social-text a:hover,
.contacts-social-text a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 1200px), (max-width: 1377px) and (pointer: coarse) {
    .contacts-office-info {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .contacts-qr {
        justify-self: start;
        width: min(104px, 100%);
        min-width: 0;
        padding: 8px;
    }

    .contacts-qr-img {
        width: 100%;
        height: auto;
    }
}

.about-carousel-wrap {
    display: block;
    position: relative;
}

.about-carousel__cursor-hint {
    position: absolute;
    z-index: 4;
    top: 1rem;
    right: 1rem;
    bottom: 5rem;
    left: 1rem;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding-inline: 4px;
    pointer-events: none;
}

.about-carousel__cursor {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #ffffff;
    background: rgba(17, 50, 91, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.56);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
    opacity: 0.68;
}

.about-carousel__cursor svg {
    display: block;
    width: 17px;
    height: 17px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.32));
}

.about-carousel__cursor--prev {
    animation: about-carousel-hint-prev 1.8s ease-in-out infinite;
}

.about-carousel__cursor--prev svg {
    transform: translateX(-1px);
}

.about-carousel__cursor--next {
    animation: about-carousel-hint-next 1.8s ease-in-out infinite;
}

.about-carousel__cursor--next svg {
    transform: scaleX(-1) translateX(-1px);
}

@keyframes about-carousel-hint-prev {
    0%,
    100% {
        transform: translateX(3px);
        opacity: 0.6;
    }

    50% {
        transform: translateX(-3px);
        opacity: 0.8;
    }
}

@keyframes about-carousel-hint-next {
    0%,
    100% {
        transform: translateX(-3px);
        opacity: 0.6;
    }

    50% {
        transform: translateX(3px);
        opacity: 0.8;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-carousel__cursor {
        animation: none;
    }
}

.about-carousel {
    width: 100%;
    overflow: hidden;
    overflow-y: hidden;
    padding: 1rem;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-card);
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.about-carousel::-webkit-scrollbar,
.about-carousel__track::-webkit-scrollbar {
    display: none;
}

.about-carousel.is-pointer-scrolling {
    scroll-snap-type: none;
}

.about-carousel__track {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    width: max-content;
    min-width: 100%;
    will-change: transform;
}

.about-carousel__edge {
    position: absolute;
    top: 1rem;
    bottom: 5rem;
    width: 14%;
    z-index: 3;
    display: none;
    pointer-events: auto;
}

.about-carousel__edge--prev {
    left: 1rem;
}

.about-carousel__edge--next {
    right: 1rem;
}

@media (hover: hover) and (pointer: fine) {
    .about-carousel__cursor-hint {
        display: flex;
    }

    .about-carousel__edge {
        display: block;
    }
}

.about-carousel__item {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
    flex: 0 0 var(--about-carousel-item-width, calc((100% - 4rem) / 3));
    width: var(--about-carousel-item-width, calc((100% - 4rem) / 3));
}

.about-carousel__image-link {
    display: block;
    min-width: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
    text-decoration: none;
}

.about-carousel__item img {
    display: block;
    width: 100%;
    height: clamp(240px, 26vw, 500px);
    object-fit: cover;
}

.about-carousel__btn {
    min-height: 54px;
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.1;
    padding-inline: 18px;
}

@media (max-width: 1366px) {
    .about-carousel__item img {
        height: clamp(220px, 28vw, 360px);
    }
}

@media (max-width: 900px), (max-width: 1377px) and (pointer: coarse) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .career-grid {
        grid-template-columns: 1fr;
    }

    .services-brochure {
        margin-top: 0;
    }

    .services-project-card img {
        height: clamp(220px, 54vw, 360px);
    }

    .career-image img {
        height: auto;
        min-height: 0;
    }

    .career-consent-row {
        grid-template-columns: 1fr;
    }

    .career-form-layout {
        grid-template-columns: 1fr;
    }

    .career-form-image img {
        height: auto;
        min-height: 0;
    }

    .contacts-layout,
    .contacts-office-info {
        grid-template-columns: 1fr;
    }

    .privacy-policy-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .privacy-policy-grid > :nth-child(1) {
        order: 1;
    }

    .privacy-policy-grid > :nth-child(2) {
        order: 2;
    }

    .privacy-policy-grid > :nth-child(4) {
        order: 3;
    }

    .privacy-policy-grid > :nth-child(3) {
        order: 4;
    }

    .privacy-policy-grid > :nth-child(5) {
        order: 5;
    }

    .privacy-policy-grid > :nth-child(6) {
        order: 6;
    }

    .privacy-policy-grid > :nth-child(8) {
        order: 7;
    }

    .privacy-policy-grid > :nth-child(7) {
        order: 8;
    }

    .privacy-policy-grid > :nth-child(9) {
        order: 9;
    }

    .privacy-policy-grid > :nth-child(10) {
        order: 10;
    }
}

@media (max-width: 992px), (max-width: 1377px) and (pointer: coarse) {
    .projects-catalog-page {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .projects-catalog-page > .vessel-grid {
        margin-top: 0;
    }

    .projects-catalog-page .vessel-grid {
        display: grid;
    }

    .projects-catalog-page .vessel-card + .vessel-card {
        margin-top: 0;
    }

    .projects-catalog-page .vessel-card {
        aspect-ratio: 27 / 20;
        min-height: 0;
    }

    .contacts-office-info {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .contacts-qr {
        justify-self: start;
        width: 104px;
        min-width: 104px;
    }
}

@media (min-width: 768px) and (max-width: 1366px) {
    .home-block__text {
        max-width: 62ch;
    }

    .page-hero .kp-title,
    .page-hero .kp-text {
        text-align: left;
    }

    .page-hero .kp-text {
        max-width: 62ch;
        padding-right: 24px;
    }
}

@media (max-width: 767px) {
    :root {
        --text-block-gap: 12px;
    }

    .about-section-panel {
        width: calc(100% + (var(--container-padding-x) * 2));
        margin-inline: calc(var(--container-padding-x) * -1);
        padding: 0;
    }

    .page-hero {
        padding: 20px var(--page-inline-padding-x);
    }

    .page-hero .kp-title {
        font-size: 24px;
        line-height: 1.15;
    }

    .page-hero .kp-text {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.45;
    }

   .page-hero--home,
   .page-hero--about,
   .page-hero--services,
   .page-hero--career,
   .page-hero--contacts {
      min-height: clamp(200px, 60vw, 400px);
      padding: 24px var(--page-inline-padding-x) 28px;
   }

    .home-block--intro .home-block__text {
        gap: 12px;
    }

    .home-block--intro .home-block__eyebrow p {
        font-size: 11px;
        line-height: 1.08;
    }

    .home-block--intro .home-block__title {
        max-width: 12ch;
        font-size: 22px;
        line-height: 1.1;
    }

    .home-block--intro .home-block__subtitle {
        max-width: 22ch;
        font-size: 12px;
        line-height: 1.25;
    }

    .about-brochure {
        margin-top: 20px;
        margin-bottom: 24px;
    }

    .services-grid__text h3 {
        font-size: 18px;
    }

    .services-list {
        gap: 4px;
        font-size: 14px;
        line-height: 1;
    }

}

@media (max-width: 576px) {
    .contacts-page {
        gap: 0;
    }

    .career-form-panel,
    .privacy-policy-panel {
        padding: var(--page-block-padding-y) var(--container-padding-x);
    }

    .contacts-panel {
        padding: var(--page-block-padding-y) var(--page-inline-padding-x);
    }

    .career-form-main {
        gap: 18px;
    }

    .career-form,
    .career-form-fields {
        gap: 12px;
    }

    .career-form-intro h3,
    .career-terms h3,
    .contacts-office-column h3,
    .privacy-policy-panel h3 {
        margin-bottom: 0;
        font-size: 18px;
        line-height: 1.15;
    }

    .career-form-intro p,
    .career-terms p,
    .career-consent__text,
    .contacts-office-details,
    .contacts-social-text,
    .privacy-policy-panel p,
    .privacy-policy-text {
        font-size: 12px;
        line-height: 1.3;
    }

    .career-required-note {
        font-size: 11px;
    }

    .career-field input,
    .career-field textarea {
        min-height: 40px;
        border-radius: 10px;
        font-size: 13px;
        padding: 0 12px;
    }

    .career-field textarea {
        min-height: 110px;
        padding: 10px 12px;
    }

    .career-consent-row {
        gap: 14px;
    }

    .career-consent {
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 9px;
    }

    .career-consent__box {
        width: 18px;
        height: 18px;
    }

    .career-submit {
        min-height: 38px;
        padding: 0 18px;
        font-size: 12px;
    }

    .career-content .career-section h3 {
        margin-bottom: 0;
        font-size: 16px;
        line-height: 1.15;
    }

    .career-content .career-section p {
        margin-bottom: 0;
        font-size: 12px;
        line-height: 1.3;
    }

    .privacy-policy-text {
        padding: 12px;
        max-height: 420px;
    }

    .privacy-policy-text {
        overflow: visible;
        max-height: none;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .contacts-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contacts-form-column,
    .contacts-office-column,
    .contacts-office-info {
        width: 100%;
        min-width: 0;
    }

    .contacts-office-column {
        gap: var(--text-block-gap);
    }

    .contacts-map {
        min-height: 220px;
        border-radius: 10px;
    }

    .contacts-office-info {
        grid-template-columns: 1fr;
        gap: var(--text-block-gap);
    }

    .contacts-qr {
        justify-self: start;
        width: 104px;
        min-width: 104px;
        padding: 0;
    }

    .contacts-qr-img {
        width: 84px;
        height: 84px;
    }
}

@media (max-width: 380px) {
    .contacts-page {
        gap: 10px;
    }

    .home-block--career {
        grid-template-columns: minmax(0, 0.88fr) minmax(135px, 1.12fr) !important;
        gap: 10px;
    }

    .home-career__text {
        height: auto;
        gap: 12px;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .home-career__media {
        height: auto;
        min-width: 0;
        width: 100%;
    }

    .home-career__title {
        font-size: 14px;
        line-height: 1.12;
    }

    .home-career__copy {
        font-size: 10px;
        line-height: 1.24;
    }

    .home-block__eyebrow p {
        font-size: 10px;
    }

    .home-block__title {
        font-size: 18px;
    }

    .home-block__subtitle {
        font-size: 11px;
    }

    .home-block__section-title {
        font-size: 16px;
    }

    .home-block--projects .home-projects-card h3 {
        font-size: 10px !important;
        display: inline-flex;
        width: fit-content;
        max-width: calc(100% - 24px);
        box-sizing: border-box;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .home-block__btn,
    .home-career__btn,
    .home-contacts__btn {
        font-size: 11px;
    }

    .home-career__figure--main {
        min-height: 0;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 4 / 3;
    }

    .vessel-gallery {
        grid-template-columns: 1fr;
    }

    .vessel-card h2 {
        font-size: 16px;
    }

    .vessel-profile-card__title {
        max-width: 100%;
        font-size: clamp(12px, 3.2vw, 18px);
        line-height: 1.08;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }
}




@media (max-width: 900px), (max-width: 1377px) and (pointer: coarse) {
    .about-carousel {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
    }

    .about-carousel__track {
        gap: 0.85rem;
        min-width: 0;
        padding-right: 1rem;
    }

    .about-carousel__edge {
        display: none !important;
    }

    .about-carousel__item {
        flex-basis: clamp(14rem, 74vw, 20rem);
        width: clamp(14rem, 74vw, 20rem);
    }

    .about-carousel__item img {
        height: clamp(210px, 58vw, 320px);
    }

    .about-carousel__btn {
        min-height: 50px;
    }

    .home-projects-carousel__viewport {
        scrollbar-width: none;
    }

    .home-projects-carousel__viewport::-webkit-scrollbar {
        display: none;
    }

    .home-projects-carousel__page {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .home-projects-card {
        min-width: 0;
    }
}

@media (max-width: 1377px) and (any-pointer: coarse) {
    .about-carousel {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    .about-carousel__track {
        gap: 0.85rem;
        min-width: 0;
        transform: none !important;
        padding-right: 1rem;
    }

    .about-carousel__edge {
        display: none !important;
    }

    .about-carousel__item {
        flex-basis: clamp(14rem, 74vw, 20rem);
        width: clamp(14rem, 74vw, 20rem);
    }

    .about-carousel__item img {
        height: clamp(210px, 58vw, 320px);
    }

    .home-projects-carousel__viewport {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .home-projects-carousel__viewport::-webkit-scrollbar {
        display: none;
    }

    .home-projects-carousel__track {
        display: flex;
        width: 100%;
        min-width: 0;
        gap: 12px;
        transition: none;
        transform: none !important;
    }

    .home-projects-carousel__page {
        flex: 0 0 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        min-width: 100%;
        box-sizing: border-box;
        scroll-snap-align: start;
    }

    .home-projects-card {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        justify-self: stretch;
        flex: none;
    }

    .home-projects-carousel__controls {
        justify-content: space-between;
    }

    .home-projects-carousel__nav {
        width: 44px;
        height: 44px;
    }

    .home-projects-carousel__nav.is-pressed {
        background: var(--corp-orange);
        border-color: var(--corp-orange);
        color: var(--corp-blue);
        opacity: 1;
    }

    .home-projects-carousel__nav:hover,
    .home-projects-carousel__nav:focus,
    .home-projects-carousel__nav:focus-visible {
        background: var(--corp-blue);
        border-color: var(--corp-blue);
        color: #ffffff;
        opacity: 1;
    }

    .home-projects-carousel__nav:active {
        background: var(--corp-orange);
        border-color: var(--corp-orange);
        color: var(--corp-blue);
        opacity: 1;
    }

    .home-projects-carousel__page {
        gap: 12px;
    }
}

@media (max-width: 576px) {
    .home-projects-carousel__page {
        display: block !important;
        grid-template-columns: none;
    }

    .home-projects-card {
        min-width: 100%;
    }
}

@media (max-width: 767px) {
    :root {
        --text-block-gap: 12px;
    }

    .home-block--career {
        grid-template-columns: 1fr !important;
        gap: var(--text-block-gap) !important;
        align-items: start !important;
        grid-auto-flow: row;
    }

    .home-career__text {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .home-career__media {
        min-width: 0;
        width: 100%;
        min-height: 0;
        height: auto;
        justify-items: center;
        align-self: start;
    }

    .home-career__stack {
        display: none !important;
    }

    .home-career__figure--main {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        min-height: 0;
    }
}

@media (max-width: 380px) {
    :root {
        --text-block-gap: 10px;
    }

    .home-block--career {
        grid-template-columns: 1fr !important;
        gap: var(--text-block-gap) !important;
    }

    .home-career__text {
        min-width: 0;
        overflow-wrap: anywhere;
        max-width: 100%;
    }

    .home-career__media {
        min-width: 0;
        width: 100%;
        min-height: 0;
        height: auto;
        align-self: start;
    }

    .home-career__title,
    .home-contacts__title {
        font-size: 14px;
        line-height: 1.12;
    }

    .home-career__copy,
    .home-contacts__details {
        font-size: 10px !important;
        line-height: 1.24 !important;
    }

    .home-career__figure--main {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 4 / 3;
        height: auto;
    }
}

@media (min-width: 1101px) and (pointer: fine), (min-width: 1378px) {
    .home-career__media {
        align-self: center;
        height: clamp(420px, 30vw, 560px);
        min-height: 0;
    }

    .home-career__figure--main {
        align-self: stretch;
        height: 100%;
        max-height: none;
    }

    .home-career__figure--main img {
        height: 125%;
        object-position: center;
        transform: translateY(-10%);
    }
}