:root {

    --navy: #0c2340;

    --navy-light: #1a3a5c;

    --gold: #c9a227;

    --gold-light: #e8c547;

    --sea: #1e6b8a;

    --sea-light: #2a8fb5;

    --foam: #f4f8fb;

    --white: #ffffff;

    --text: #1a2b3c;

    --muted: #5a6b7c;

}



* { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: 'Segoe UI', system-ui, sans-serif; color: var(--text); background: var(--foam); line-height: 1.6; }

a { color: var(--sea); text-decoration: none; }

a:hover { color: var(--gold); }



.container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }



/* ——— Topbar ——— */

.topbar { background: linear-gradient(90deg, #071528, var(--navy)); color: #fff; font-size: 0.82rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(201,162,39,.2); }

.topbar-inner { display: flex; justify-content: center; }

.topbar-text { opacity: 0.92; letter-spacing: 0.02em; }



/* ——— Navbar ——— */

.site-header { position: sticky; top: 0; z-index: 200; }

.navbar { background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(12,35,64,.08); box-shadow: 0 4px 24px rgba(12,35,64,.06); }

.navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 1.25rem; }

.brand { display: flex; align-items: center; gap: 0.85rem; color: var(--navy); font-weight: 700; text-decoration: none; }

.brand:hover { color: var(--navy); }

.brand-logo { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }

.brand-wordmark { width: clamp(130px, 20vw, 190px); height: auto; display: block; }

.nav-panel { display: flex; align-items: center; gap: 0.75rem; flex: 1; justify-content: flex-end; }

.nav-links { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }

.nav-link {

    color: var(--navy);

    font-weight: 600;

    font-size: 0.9rem;

    padding: 0.5rem 0.85rem;

    border-radius: 999px;

    transition: background .2s, color .2s;

}

.nav-link:hover { background: rgba(30,107,138,.08); color: var(--sea); }

.nav-link.is-active { background: rgba(12,35,64,.08); color: var(--navy); box-shadow: inset 0 0 0 1px rgba(12,35,64,.1); }

.btn-login {

    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

    padding: 0.55rem 1.15rem;

    border-radius: 999px;

    background: linear-gradient(135deg, var(--navy), var(--sea));

    color: #fff !important;

    font-weight: 700;

    font-size: 0.88rem;

    box-shadow: 0 4px 14px rgba(12,35,64,.22);

    border: 1px solid rgba(201,162,39,.35);

    white-space: nowrap;

    transition: transform .2s, box-shadow .2s;

}

.btn-login:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(12,35,64,.28); color: #fff !important; }

.btn-login-icon { font-size: 0.95rem; opacity: 0.9; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.35rem; }

.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; }



/* ——— Hero ——— */

.hero {

    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 45%, var(--sea) 100%);

    color: #fff;

    padding: 4.5rem 0 4rem;

    position: relative;

    overflow: hidden;

}

.hero-maritime {

    background:

        linear-gradient(135deg, rgba(12,35,64,.88) 0%, rgba(26,58,92,.82) 40%, rgba(30,107,138,.78) 100%),

        url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=1600&q=70') center/cover no-repeat;

}

.hero::after {

    content: '';

    position: absolute;

    bottom: -1px; left: 0; right: 0; height: 60px;

    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath fill='%23f4f8fb' d='M0,30 Q300,60 600,30 T1200,30 L1200,60 L0,60Z'/%3E%3C/svg%3E") center/cover no-repeat;

}

.hero-inner { position: relative; z-index: 2; }

.hero-deco { position: absolute; pointer-events: none; opacity: 0.55; background-size: contain; background-repeat: no-repeat; z-index: 1; }

.hero-deco--anchor { width: 140px; height: 168px; right: 4%; bottom: 12%; background-image: url('../assets/images/maritime/anchor.svg'); }

.hero-deco--helm { width: 120px; height: 120px; left: 3%; top: 18%; background-image: url('../assets/images/maritime/helm.svg'); }

.hero h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: 0.75rem; text-shadow: 0 2px 12px rgba(0,0,0,.25); }

.hero p { font-size: 1.1rem; opacity: 0.95; max-width: 640px; }

.hero-badges { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }

.badge { background: rgba(255,255,255,.12); border: 1px solid rgba(201,162,39,.45); padding: 0.45rem 1rem; border-radius: 999px; font-size: 0.85rem; backdrop-filter: blur(4px); }



/* ——— Sections ——— */

.section { padding: 3.5rem 0; position: relative; overflow: hidden; }

.section-maritime { isolation: isolate; }

.section-maritime--pier {

    background:

        linear-gradient(180deg, var(--foam) 0%, #eef4f9 100%),

        url('https://images.unsplash.com/photo-1505118387557-cef4e58d550a?auto=format&fit=crop&w=1400&q=60') center/cover no-repeat;

    background-blend-mode: overlay;

}

.section-maritime--boats {

    background:

        linear-gradient(180deg, rgba(244,248,251,.94), rgba(244,248,251,.98)),

        url('https://images.unsplash.com/photo-1567899378495-47b5c2d5a3b6?auto=format&fit=crop&w=1400&q=60') center/cover no-repeat;

}

.section-deco { position: absolute; pointer-events: none; background-size: contain; background-repeat: no-repeat; opacity: 0.45; z-index: 0; }

.section-deco--waves { inset: auto 0 0 0; height: 80px; background-image: url('../assets/images/maritime/waves.svg'); background-size: cover; opacity: 0.35; }

.section-deco--waves-bottom { inset: auto 0 0 0; height: 70px; background-image: url('../assets/images/maritime/waves.svg'); background-size: cover; opacity: 0.3; transform: rotate(180deg); }

.section-deco--anchor { width: 100px; height: 120px; left: 2%; top: 15%; background-image: url('../assets/images/maritime/anchor.svg'); }

.section-deco--helm-right { width: 90px; height: 90px; right: 3%; bottom: 18%; background-image: url('../assets/images/maritime/helm.svg'); }

.section .container { position: relative; z-index: 1; }



.section-title { text-align: center; margin-bottom: 2rem; }

.section-title h2 { color: var(--navy); font-size: 1.75rem; }

.section-title p { color: var(--muted); }

.section-title::after { content: '⚓'; display: block; margin-top: 0.5rem; color: var(--gold); font-size: 1.1rem; }



.section-head { text-align: center; margin-bottom: 2.25rem; }

.section-head--light { color: #fff; }

.section-head--light h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0.35rem 0 0.5rem; }

.section-head--light p { color: rgba(255,255,255,.82); max-width: 560px; margin: 0 auto; }

.section-kicker { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); }

.section-cta { text-align: center; margin-top: 2.25rem; }



/* ——— Homepage news ——— */

.section-home-news {

    position: relative;

    padding: 4.5rem 0;

    background: linear-gradient(155deg, rgba(12,35,64,.92) 0%, rgba(15,45,74,.88) 50%, rgba(13,90,120,.86) 100%);

}

.section-home-news-inner { position: relative; z-index: 2; }

.home-news-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

}

.home-news-bg-photo {

    position: absolute;

    inset: 0;

    background-image: url('../assets/images/maritime/harbor/harbor-main.png');

    background-size: cover;

    background-position: center 42%;

    filter: saturate(1.1) brightness(0.94);

    transform: scale(1.015);

}

.home-news-bg-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(115deg, rgba(12,35,64,.44) 0%, rgba(15,45,74,.34) 45%, rgba(13,90,120,.46) 100%),

        linear-gradient(180deg, rgba(12,35,64,.22) 0%, transparent 38%, rgba(12,35,64,.28) 100%);

}

.home-news-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1rem 1.25rem;

}

.home-news-grid:has(.home-news-item:only-child) {

    grid-template-columns: minmax(0, 1fr);

    max-width: 820px;

    margin: 0 auto;

}

.home-news-item {

    display: grid;

    grid-template-columns: 132px 1fr;

    gap: 1rem;

    align-items: start;

    background: #fff;

    border-radius: 14px;

    padding: 0.85rem 1rem 0.95rem;

    border: 1px solid rgba(201,162,39,.28);

    box-shadow: 0 10px 32px rgba(0,0,0,.16);

    transition: transform .22s, box-shadow .22s;

}

.home-news-item:hover {

    transform: translateY(-3px);

    box-shadow: 0 16px 40px rgba(0,0,0,.22);

}

.home-news-thumb {

    display: block;

    width: 132px;

    height: 99px;

    border-radius: 10px;

    overflow: hidden;

    flex-shrink: 0;

    background: linear-gradient(135deg, var(--navy-light), var(--sea));

}

.home-news-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .35s;

}

.home-news-item:hover .home-news-thumb img { transform: scale(1.04); }

.home-news-thumb-empty {

    display: grid;

    place-items: center;

    width: 100%;

    height: 100%;

    font-size: 1.75rem;

    color: rgba(255,255,255,.8);

}

.home-news-info { min-width: 0; }

.home-news-meta {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.4rem 0.65rem;

    margin-bottom: 0.35rem;

}

.home-news-cat {

    background: var(--gold);

    color: var(--navy);

    font-size: 0.68rem;

    font-weight: 800;

    padding: 0.2rem 0.55rem;

    border-radius: 999px;

    text-transform: uppercase;

    letter-spacing: 0.04em;

}

.home-news-meta time { font-size: 0.78rem; color: var(--muted); font-weight: 600; }

.home-news-info h3 {

    font-size: 1.02rem;

    line-height: 1.38;

    margin: 0 0 0.35rem;

    color: var(--navy);

}

.home-news-info h3 a { color: inherit; text-decoration: none; }

.home-news-info h3 a:hover { color: var(--sea); }

.home-news-info p {

    font-size: 0.88rem;

    line-height: 1.5;

    color: var(--muted);

    margin: 0 0 0.45rem;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

.home-news-read {

    font-size: 0.82rem;

    font-weight: 700;

    color: var(--sea);

    text-decoration: none;

}

.home-news-read:hover { color: var(--gold); }

.news-empty--light { color: rgba(255,255,255,.85) !important; }



/* ——— Cards & buttons ——— */

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }

.card { background: var(--white); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(12,35,64,.06); border: 1px solid rgba(12,35,64,.06); transition: transform .2s, box-shadow .2s; }

.card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(12,35,64,.12); }

.card-body { padding: 1.25rem; }

.card h3 { color: var(--navy); margin-bottom: 0.5rem; font-size: 1.1rem; }

.card .meta { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.75rem; }

.card p { color: var(--muted); font-size: 0.95rem; }

.service-card { border-top: 3px solid var(--gold); }

.service-icon { font-size: 1.6rem; display: block; margin-bottom: 0.5rem; }



.btn { display: inline-block; padding: 0.65rem 1.25rem; border-radius: 999px; font-weight: 700; border: none; cursor: pointer; font-size: 0.95rem; transition: transform .2s, box-shadow .2s; }

.btn-lg { padding: 0.75rem 1.6rem; font-size: 1rem; }

.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--navy); box-shadow: 0 4px 14px rgba(201,162,39,.35); }

.btn-gold:hover { transform: translateY(-1px); color: var(--navy); box-shadow: 0 6px 18px rgba(201,162,39,.45); }

.btn-navy { background: var(--navy); color: #fff; }

.btn-navy:hover { background: var(--navy-light); color: #fff; }



.portal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }

.portal-card {

    background: linear-gradient(145deg, var(--navy) 0%, var(--sea) 100%);

    color: #fff;

    padding: 2rem;

    border-radius: 18px;

    border: 1px solid rgba(201,162,39,.25);

    box-shadow: 0 10px 32px rgba(12,35,64,.15);

    position: relative;

    overflow: hidden;

}

.portal-card::before {

    content: '⚓';

    position: absolute;

    right: 1rem; bottom: 0.5rem;

    font-size: 3rem;

    opacity: 0.08;

}

.portal-card h3 { margin-bottom: 0.5rem; color: var(--gold-light); }

.portal-card p { opacity: 0.92; margin-bottom: 1rem; font-size: 0.95rem; }



/* ——— Footer ——— */

footer { background: linear-gradient(180deg, var(--navy), #071528); color: rgba(255,255,255,.85); padding: 3rem 0 1.5rem; margin-top: 0; }

.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin-bottom: 2rem; }

footer h4 { color: var(--gold); margin-bottom: 0.75rem; font-size: 1rem; }

footer a { color: rgba(255,255,255,.8); display: block; margin-bottom: 0.35rem; }

footer a:hover { color: var(--gold); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1rem; text-align: center; font-size: 0.85rem; opacity: 0.7; }



.page-header { background: linear-gradient(135deg, var(--navy), var(--sea)); color: #fff; padding: 2.5rem 0; }

.page-header h1 { font-size: 2rem; }

.content-block { background: var(--white); padding: 2rem; border-radius: 12px; box-shadow: 0 2px 12px rgba(12,35,64,.06); margin-top: -1.5rem; position: relative; }



/* ——— News archive ——— */

.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }

.news-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 2rem 0; }

.news-card { background: var(--white); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(12,35,64,.06); border: 1px solid rgba(12,35,64,.06); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }

.news-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(12,35,64,.12); }

.news-card-media { display: block; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg, var(--navy), var(--sea)); }

.news-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }

.news-card:hover .news-card-media img { transform: scale(1.04); }

.news-card-media--placeholder { display: grid; place-items: center; color: rgba(255,255,255,.85); font-size: 2rem; }

.news-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }

.news-card-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; font-size: .8rem; color: var(--muted); }

.news-cat-badge { background: rgba(201,162,39,.15); color: var(--navy); padding: .2rem .55rem; border-radius: 999px; font-weight: 600; font-size: .72rem; }

.news-card h3 { color: var(--navy); margin-bottom: .5rem; font-size: 1.08rem; line-height: 1.35; }

.news-card h3 a { color: inherit; }

.news-card h3 a:hover { color: var(--sea); }

.news-card p { color: var(--muted); font-size: .95rem; margin-bottom: .75rem; flex: 1; }

.news-tag-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }

.news-tag { background: var(--foam); color: var(--sea); border: 1px solid rgba(30,107,138,.15); padding: .15rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }

.news-card-btn { align-self: flex-start; margin-top: auto; }

.news-filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }

.news-filter { padding: .45rem .9rem; border-radius: 999px; border: 1px solid rgba(12,35,64,.12); color: var(--navy); font-size: .88rem; font-weight: 600; background: #fff; }

.news-filter:hover, .news-filter.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

.news-filter-sub { font-weight: 500; opacity: .92; }

.news-detail-header .container { display: grid; gap: 1.5rem; }

.news-detail-cover { border-radius: 14px; overflow: hidden; max-height: 360px; border: 1px solid rgba(255,255,255,.12); }

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

.news-detail-intro h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: .5rem; }

.news-detail-excerpt { opacity: .88; margin-top: .75rem; max-width: 720px; }

.news-content { line-height: 1.75; color: var(--text); }

.news-content h2, .news-content h3, .news-content h4 { color: var(--navy); margin: 1.25rem 0 .75rem; }

.news-content p { margin-bottom: 1rem; }

.news-content img, .news-inline-img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 1rem 0;
    box-shadow: 0 6px 20px rgba(12,35,64,.1);
    display: block;
}
.news-content a:has(img) { display: block; text-decoration: none; border: none; }

.news-content figure { margin: 1.25rem 0; }

.news-content ul, .news-content ol { margin: 0 0 1rem 1.25rem; }

.news-content a:not(:has(img)) { color: var(--sea); text-decoration: underline; }

.news-related {

    margin-top: 2.75rem;

    padding-top: 2rem;

    border-top: 1px solid rgba(12,35,64,.1);

}

.news-related-head { margin-bottom: 1.25rem; }

.news-related-kicker {

    display: inline-block;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--gold);

    margin-bottom: 0.35rem;

}

.news-related-head h2 {

    font-size: 1.45rem;

    color: var(--navy);

    margin: 0;

}

.news-related-grid { gap: 0.9rem 1.1rem; }

.news-related-grid .home-news-item {

    box-shadow: 0 4px 18px rgba(12,35,64,.08);

    border-color: rgba(12,35,64,.08);

}

.news-related-grid .home-news-info h3 { font-size: 0.98rem; }

.news-related-grid .home-news-info p { font-size: 0.84rem; -webkit-line-clamp: 2; }

@media (min-width: 900px) {

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

}



@media (min-width: 900px) {

    .news-detail-header .container { grid-template-columns: 1.1fr 1fr; align-items: end; }

}



@media (max-width: 900px) {

    .hero-deco { opacity: 0.25; transform: scale(0.75); }

    .section-deco { opacity: 0.2; }

}



@media (max-width: 768px) {

    .nav-toggle { display: flex; }

    .nav-panel {

        display: none;

        position: absolute;

        top: 100%; left: 0; right: 0;

        background: #fff;

        flex-direction: column;

        align-items: stretch;

        padding: 1rem 1.25rem 1.25rem;

        border-bottom: 1px solid rgba(12,35,64,.1);

        box-shadow: 0 12px 32px rgba(12,35,64,.12);

    }

    .nav-panel.is-open { display: flex; }

    .navbar { position: relative; }

    .nav-links { flex-direction: column; align-items: stretch; width: 100%; }

    .nav-link { padding: 0.65rem 0.85rem; }

    .btn-login { justify-content: center; width: 100%; margin-top: 0.5rem; }

    .brand-logo { width: 52px; height: 52px; }

    .home-news-grid { grid-template-columns: 1fr; }

    .home-news-item { grid-template-columns: 110px 1fr; padding: 0.75rem; }

    .home-news-thumb { width: 110px; height: 83px; }

    .home-news-info h3 { font-size: 0.95rem; }

}