/* Longgong Port: a quieter photographic treatment of the existing blue/orange identity. */
:root {
  --blue: #135e96;
  --blue-deep: #10344f;
  --blue-ink: #09283e;
  --mist: #f4f7fa;
  --mist-blue: #edf4f8;
  --line: #dfe8ee;
  --text: #1e3446;
  --muted: #5e7283;
  --shadow-sm: 0 8px 26px rgba(9,40,62,.055);
  --shadow-md: 0 16px 36px rgba(9,40,62,.1);
}

body { line-height: 1.8; }
h1, h2, h3 { text-wrap: balance; }
h2 { font-size: clamp(34px,3.1vw,48px); line-height:1.23; letter-spacing:-.035em; font-weight:700; }
.section { padding-block:clamp(76px,7.5vw,108px); }
.section-heading { margin-bottom:42px; }
.section-lead { line-height:1.9; }
.section-heading > p { font-size:15px; }
.section-kicker, .eyebrow { letter-spacing:.14em; font-weight:700; }
.heading-accent { color:var(--blue); }

/* Navigation remains in its original position, preserving every page's sticky anchors. */
.site-header { background:linear-gradient(180deg,rgba(6,28,46,.64),rgba(6,28,46,.12)); }
.site-header.is-scrolled, .site-header.menu-open { background:rgba(255,255,255,.97); color:var(--blue-ink); box-shadow:0 1px 0 rgba(16,52,79,.08); }
.contact-page .site-header, .legal-page .site-header, .error-page .site-header { background:rgba(255,255,255,.97); color:var(--blue-ink); }
.header-inner { gap:24px; }
.brand-copy strong { font-weight:750; letter-spacing:.07em; }
.brand-copy em { letter-spacing:.13em; }
.language-switch { gap:4px; }
.language-button, .footer-language button { min-width:28px; min-height:44px; }
.menu-toggle { width:44px; height:44px; }
.nav-link { opacity:.92; }
.button { border-radius:6px; font-size:14px; min-height:48px; box-shadow:none; }
.button-primary { background:#c65128; box-shadow:none; }
.button-primary:hover { background:#ad411e; box-shadow:0 8px 20px rgba(173,65,30,.15); }
.button-header { min-height:44px; font-size:13px; background:var(--blue); }
.button-ghost { background:rgba(8,32,51,.16); border-color:rgba(255,255,255,.7); }
.button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline-color:#e96832; }

/* Let the real port photographs and footage carry the identity. */
.hero-grid-overlay, .about-hero-grid, .advantages-hero-grid, .services-hero-grid,
.multimodal-hero-grid, .routes-hero-grid, .customs-hero-grid, .industry-hero-grid,
.smart-visual-grid, .smart-about-grid, .hero-route-overlay { opacity:.035; }
.hero-media img, .hero-media .hero-video,
:is(.about-hero-media,.advantages-hero-media,.services-hero-media,.multimodal-hero-media,.routes-hero-media,.customs-hero-media,.industry-hero-media) img,
.service-card-media img, .cargo-type-card img, .industry-card img { filter:saturate(.97) contrast(1.01); }
.hero-scrim { background:linear-gradient(90deg,rgba(6,28,46,.88),rgba(6,28,46,.6) 37%,rgba(6,28,46,.12) 78%),linear-gradient(0deg,rgba(6,28,46,.55),transparent 45%); }
.about-hero-scrim, .advantages-hero-scrim, .services-hero-scrim, .multimodal-hero-scrim,
.routes-hero-scrim, .customs-hero-scrim, .industry-hero-scrim { background:linear-gradient(90deg,rgba(6,28,46,.88),rgba(6,28,46,.6) 42%,rgba(6,28,46,.12)),linear-gradient(0deg,rgba(6,28,46,.5),transparent 60%); }
.hero { min-height:700px; height:min(900px,94svh); }
.hero-content { grid-template-columns:minmax(0,1fr); padding-top:105px; padding-bottom:125px; }
.hero h1 { font-size:clamp(68px,6.8vw,98px); font-weight:750; letter-spacing:-.04em; }
[lang="en"] .hero h1 { font-size:clamp(46px,5.5vw,78px); }
.hero-title-sub { margin-top:24px; font-size:clamp(32px,3.25vw,47px); line-height:1.3; font-weight:500; letter-spacing:-.025em; }
.hero-lead { margin-top:30px; font-size:19px; }
.hero-services { color:rgba(255,255,255,.83); font-size:14px; letter-spacing:.025em; }
.hero-aside { display:none; }
.hero-aside-code, .hero-aside-rule { display:none; }
.smart-copy h2 { font-size:clamp(31px,2.6vw,40px); }
.hero-aside p { font-size:13px; color:rgba(255,255,255,.85); }
.hero-bottom { bottom:82px; }
.hero-bottom .hero-stats, .scroll-cue { display:none; }
.hero-bottom-label { color:rgba(255,255,255,.8); font-size:11px; letter-spacing:.05em; }
.hero-video-control { right:max(24px,calc((100vw - 1280px)/2)); bottom:75px; min-height:38px; padding:9px 14px; border-radius:6px; background:rgba(6,28,46,.42); backdrop-filter:blur(8px); }
.core-numbers { width:calc(100% - 80px); max-width:1280px; margin:-48px auto 0; border:1px solid rgba(223,232,238,.7); border-radius:14px; box-shadow:0 16px 48px rgba(9,40,62,.09); }
.core-numbers .numbers-grid { padding:32px 38px 24px; }
.number-index { display:none; }
.number-value strong { font-family:"DIN Alternate","Bahnschrift",var(--font-sans); font-size:52px; font-weight:700; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.number-item p { margin-top:10px; color:var(--muted); font-size:13px; }
.core-numbers .data-note { padding:0 38px 18px; color:#667d8d; font-size:11px; }

/* Shared inner-page hierarchy. Contact retains its existing light split layout. */
:is(.about-hero,.advantages-hero,.services-hero,.multimodal-hero,.routes-hero,.customs-hero,.industry-hero) h1 { font-size:clamp(52px,5.2vw,76px); font-weight:750; letter-spacing:-.035em; line-height:1.15; }
:is(.services-hero,.multimodal-hero,.routes-hero,.customs-hero,.industry-hero) h2 { color:#b5dcf0; font-size:clamp(24px,2.3vw,34px); line-height:1.35; font-weight:500; }
:is(.about-hero-copy,.advantages-hero-copy,.services-hero-copy,.multimodal-hero-copy,.routes-hero-copy,.customs-hero-copy,.industry-hero-copy) > p:not(.eyebrow) { color:rgba(255,255,255,.84); font-size:15px; line-height:1.85; }
.image-frame, .smart-visual, .smart-about-visual { overflow:hidden; border-radius:12px; }
.image-grid-mark, .smart-corner, .smart-visual-grid, .about-side-note { display:none; }
.image-caption { background:rgba(9,40,62,.87); backdrop-filter:blur(8px); border-radius:0 6px 0 0; font-size:10px; }
.about-media { padding-right:16px; padding-bottom:16px; }
.image-slot-filled::before { background:linear-gradient(180deg,rgba(5,25,42,.02),rgba(5,25,42,.5)); opacity:1; }
.image-slot-filled::after { display:none; }
.image-slot-concept { font-size:10px; padding:6px 9px; border-radius:4px; background:rgba(6,28,46,.65); }
:is(.cta-background,.about-cta-background,.services-cta-background,.routes-cta-background,.contact-brand-background) .image-slot-concept { display:none; }
.logistics-park-visual .image-slot-filled::before { background:none; }
.logistics-park-visual .logistics-park-overlay { background:linear-gradient(0deg,rgba(6,28,46,.8),transparent 44%); }

/* Cards use a consistent edge, quieter labels and readable body text. */
.advantage-card, .service-card, .service-overview-card, .transport-service-card,
.supply-service-card, .contact-form, .journey-card { border-radius:12px; border-color:var(--line); box-shadow:none; }
.advantage-card:hover, .service-card:hover, .service-overview-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:#b6cedc; }
.advantage-card .card-code, .industry-content .card-code, .service-card-number, .service-card-media-tag { display:none; }
.advantage-card .icon-badge, .service-card-icon { background:var(--mist-blue); color:var(--blue); border-radius:10px; }
.advantage-card:hover .icon-badge, .service-overview-card:hover .service-card-icon { background:var(--blue); color:white; transform:none; }
.advantage-card h3, .service-card h3, .service-card-body h3 { letter-spacing:-.02em; font-weight:650; }
.advantage-card p, .service-card p, .service-card-body p,
.transport-card-content p, .supply-card-content p { font-size:14px; line-height:1.85; }
.service-overview-card { min-height:370px; }
.service-card-media { height:180px; }
.service-card-body { padding:22px; }
.service-card-body h3 { margin:15px 0 10px; font-size:20px; }
.service-card-body p { max-width:none; }
.service-card-link { font-size:13px; padding-top:22px; }
.service-card-shade { background:linear-gradient(180deg,transparent,rgba(6,28,46,.2)); }
.industry-card, .cargo-type-card, .multimodal-industry-card { border-radius:10px; }
.industry-overlay, .cargo-type-card > div { background:linear-gradient(0deg,rgba(6,28,46,.9),rgba(6,28,46,.06) 75%); }
.industry-content h3 { font-weight:650; }
.industry-content > p { color:rgba(255,255,255,.8); }
.service-anchor-nav, .industry-anchor-nav, .multimodal-anchor-nav, .routes-anchor-nav, .customs-anchor-nav { background:rgba(255,255,255,.97); box-shadow:0 1px 0 var(--line); }
.service-anchor-nav strong, .industry-anchor-nav strong, .multimodal-anchor-nav strong, .routes-anchor-nav strong, .customs-anchor-nav strong { font-size:13px; color:#536e80; }
.service-anchor-nav a.is-active strong, .industry-anchor-nav a.is-active strong { color:var(--blue-ink); }

.contact-form { border:1px solid var(--line); background:white; box-shadow:var(--shadow-sm); }
.contact-form :is(input,textarea,select), .contact-page-form :is(input,textarea,select) { border:1px solid #d8e3eb; border-radius:6px; background:#f7f9fb; font-size:15px; }
.contact-form :is(input,textarea):focus { border-color:var(--blue); background:white; }
.contact-list a { text-underline-offset:4px; }
.site-footer { background:#09283e; }
.footer-column-label { color:#b5cddd; letter-spacing:.08em; }
.footer-link-list a, .footer-contact-list { color:#b8c9d4; font-size:14px; }
.footer-contact-list a[href^="tel:"] { color:white; font-size:19px; letter-spacing:.015em; }
.footer-bottom { border-color:rgba(255,255,255,.13); }
.footer-motto { color:#94b0c3; }
.back-to-top { width:44px; height:44px; box-shadow:var(--shadow-sm); }
.js .reveal { transition-duration:.55s; }
.js .reveal-delay-1 { transition-delay:.06s; }
.js .reveal-delay-2 { transition-delay:.1s; }
.js .reveal-delay-3 { transition-delay:.14s; }

@media (min-width:1241px) {
  .main-nav { gap:clamp(12px,1.2vw,22px); }
  .header-inner { gap:20px; }
  .nav-link { font-size:13px; }
  .brand-copy strong { font-size:18px; }
}
@media (min-width:1600px) {
  [lang="en"] .header-inner { max-width:1680px; }
  [lang="en"] .main-nav { gap:12px; }
  [lang="en"] .nav-link { font-size:12px; }
}
@media (max-width:1240px) {
  .main-nav { border-radius:10px; }
  .main-nav .nav-link { padding-block:12px; min-height:48px; font-size:15px; }
}
@media (max-width:900px) {
  .hero-content { grid-template-columns:1fr; }
  .hero-aside { display:none; }
  .core-numbers { width:calc(100% - 44px); }
  .core-numbers .numbers-grid { padding-inline:28px; }
  .service-card-body { padding:22px; }
}
@media (max-width:680px) {
  .container { padding-inline:22px; }
  h2 { font-size:clamp(29px,7.7vw,37px); line-height:1.28; letter-spacing:-.03em; }
  .section { padding-block:64px; }
  .section-heading { margin-bottom:30px; }
  .section-lead, .section-heading > p { font-size:15px; line-height:1.85; }
  .section-kicker, .eyebrow { font-size:10px; letter-spacing:.12em; }
  .brand-copy strong { font-size:18px; }
  .brand-copy em { font-size:8px; }
  .header-inner { gap:14px; }
  .header-actions { gap:12px; }
  .hero { min-height:660px; height:calc(100svh - 100px); max-height:780px; }
  .hero-content { align-items:center; padding-top:104px; padding-bottom:126px; }
  .hero h1 { font-size:clamp(54px,14.5vw,72px); letter-spacing:-.035em; }
  [lang="en"] .hero h1 { font-size:clamp(34px,9vw,44px); }
  [lang="en"] .hero-title-sub { font-size:25px; }
  .hero-title-sub { margin-top:22px; font-size:clamp(28px,7.6vw,37px); line-height:1.32; }
  .hero-lead { margin-top:26px; font-size:16px; }
  .hero-services { margin-bottom:27px; max-width:330px; font-size:13px; line-height:1.9; }
  .hero-actions .button { min-height:48px; font-size:13px; padding-inline:17px; }
  .hero-scrim { background:linear-gradient(90deg,rgba(6,28,46,.75),rgba(6,28,46,.25)),linear-gradient(0deg,rgba(6,28,46,.72),rgba(6,28,46,.13) 75%); }
  .hero-bottom { bottom:65px; }
  .hero-bottom-label { font-size:10px; }
  .hero-video-control { right:22px; bottom:58px; min-height:38px; font-size:11px; }
  .hero-bottom-label { max-width:54%; line-height:1.7; white-space:normal; }
  .core-numbers { width:calc(100% - 32px); margin-top:-28px; border-radius:12px; }
  .core-numbers .numbers-grid { padding:26px 24px 20px; gap:24px 0; }
  .number-item, .number-item:first-child { padding-inline:0 14px; }
  .number-item:nth-child(even) { padding-left:22px; }
  .number-value strong { font-size:40px; }
  .number-item p { font-size:12px; margin-top:7px; }
  .number-value b { font-size:11px; padding-bottom:4px; }
  .core-numbers .data-note { padding:0 24px 18px; font-size:10px; }
  :is(.about-hero,.advantages-hero,.services-hero,.multimodal-hero,.routes-hero,.customs-hero,.industry-hero) h1 { font-size:clamp(44px,12.5vw,58px); line-height:1.15; }
  :is(.services-hero,.multimodal-hero,.routes-hero,.customs-hero,.industry-hero) h2 { font-size:24px; line-height:1.4; }
  :is(.about-hero-copy,.advantages-hero-copy,.services-hero-copy,.multimodal-hero-copy,.routes-hero-copy,.customs-hero-copy,.industry-hero-copy) > p:not(.eyebrow) { font-size:14px; line-height:1.85; }
  .about-hero-scrim, .advantages-hero-scrim, .services-hero-scrim, .multimodal-hero-scrim,
  .routes-hero-scrim, .customs-hero-scrim, .industry-hero-scrim { background:linear-gradient(90deg,rgba(6,28,46,.82),rgba(6,28,46,.36)),linear-gradient(0deg,rgba(6,28,46,.8),transparent 80%); }
  .services-hero { min-height:550px; height:auto; }
  .services-hero-inner { min-height:550px; padding-top:120px; padding-bottom:94px; }
  .services-hero-copy .hero-actions .button { min-height:48px; font-size:13px; }
  .services-hero-bottom { font-size:10px; }
  .service-overview-card { min-height:0; }
  .service-card-media { height:190px; }
  .service-card-body { padding:22px; }
  .service-card-body h3 { font-size:21px; }
  .service-card-body p { font-size:14px; }
  .service-card-link { margin-top:8px; padding-top:14px; }
  .service-anchor-nav strong, .industry-anchor-nav strong, .multimodal-anchor-nav strong, .routes-anchor-nav strong, .customs-anchor-nav strong { font-size:12px; }
  .service-anchor-nav a, .service-anchor-nav a:not(:first-child) { min-height:64px; }
  .image-caption { font-size:9px; }
  .image-slot-concept { font-size:9px; }
  .about-media { padding:0; }
  .about-grid, .smart-grid, .routes-layout, .services-layout, .contact-layout { gap:32px; }
  .advantage-card { min-height:210px; padding:26px; }
  .advantage-card h3 { font-size:21px; }
  .service-card { padding:25px; }
  .contact-form { padding:24px; }
  .footer-main { gap:34px 24px; padding-block:56px 36px; }
  .footer-link-list a { padding-block:5px; }
  .footer-contact-list a[href^="tel:"] { font-size:20px; }
  .back-to-top { right:16px; bottom:18px; }
}
@media (max-width:380px) {
  .header-actions { gap:6px; }
  .hero-title-sub { font-size:28px; }
  .hero-actions { gap:9px; }
  .hero-actions .button { padding-inline:14px; }
  .core-numbers .numbers-grid { padding-inline:20px; }
}
/* English labels need more room; use the existing accessible menu at laptop widths. */
@media (min-width:1241px) and (max-width:1599px) {
  [lang="en"] .header-actions { margin-left:auto; }
  [lang="en"] .button-header { display:none; }
  [lang="en"] .menu-toggle { display:inline-flex; }
  [lang="en"] .main-nav {
    position:absolute; top:84px; right:clamp(24px,5.55vw,80px); left:auto;
    width:360px; max-height:0; display:flex; flex-direction:column;
    align-items:stretch; gap:0; padding:0 24px; overflow:hidden;
    color:var(--blue-ink); background:rgba(255,255,255,.98);
    border-radius:10px; box-shadow:var(--shadow-md);
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .2s,transform .25s,max-height .25s;
  }
  [lang="en"] .main-nav .nav-link { padding-block:12px; min-height:48px; border-bottom:1px solid var(--line); font-size:15px; }
  [lang="en"] .main-nav .nav-link:last-child { border:0; }
  [lang="en"] .main-nav .nav-link::after { width:28px; right:auto; }
  [lang="en"] .site-header.menu-open .main-nav {
    padding-block:10px; max-height:calc(100svh - 110px); overflow-y:auto;
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
  }
  [lang="en"] .menu-backdrop { position:fixed; z-index:18; inset:0; display:block; background:rgba(5,25,51,.34); opacity:0; pointer-events:none; transition:opacity .2s; }
  [lang="en"] .menu-backdrop.is-visible { opacity:1; pointer-events:auto; }
}
@media (prefers-reduced-motion:reduce) {
  .js .reveal { transition:none; }
}