/* =========================================================
   XINNUOXIN — International Shipping Agency
   Design system: navy + restrained gold, clean business
   Signature detail: UN/LOCODE & IATA codes in IBM Plex Mono
   ========================================================= */

:root{
  --navy-900:#0A1E38;
  --navy-850:#0D2440;
  --navy-800:#0E2A4A;
  --navy-750:#113256;
  --navy-700:#143A63;
  --navy-600:#1B4C82;
  --blue-500:#2C6FB5;
  --gold:#C9A24B;
  --gold-soft:#E7D6AE;
  --paper:#F5F8FB;
  --paper-2:#ECF1F6;
  --white:#FFFFFF;
  --ink:#0C1B2E;
  --slate:#56657A;
  --slate-2:#7A8BA1;
  --line:#E3E9F0;
  --line-dark:rgba(255,255,255,.12);

  --font-display:"Sora",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --fs-display:clamp(2.6rem,5.2vw,4.4rem);
  --fs-h1:clamp(2rem,3.6vw,3rem);
  --fs-h2:clamp(1.55rem,2.6vw,2.25rem);
  --fs-h3:1.2rem;
  --fs-body:1.05rem;
  --fs-sm:.95rem;
  --fs-eyebrow:.78rem;

  --maxw:1180px;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(12,27,46,.06),0 4px 14px rgba(12,27,46,.05);
  --shadow-md:0 10px 30px rgba(10,30,56,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  font-size:var(--fs-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;margin:0;font-weight:600;letter-spacing:-.01em;color:var(--navy-900);text-wrap:balance;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}

section[id]{scroll-margin-top:100px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin:0 0 14px;
}
.section{padding:clamp(4rem,8vw,7rem) 0;}
.section-head{max-width:680px;margin:0 auto clamp(2.4rem,4vw,3.4rem);text-align:center;}
.section-head h2{font-size:var(--fs-h2);text-wrap:balance;}
.section-head p{color:var(--slate);margin-top:14px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:.98rem;padding:13px 26px;border-radius:999px;
  border:1px solid transparent;cursor:pointer;transition:all .25s var(--ease);
  font-family:inherit;
}
.btn--primary{background:var(--gold);color:#1a1206;}
.btn--primary:hover{background:#b8913c;transform:translateY(-2px);box-shadow:0 10px 24px rgba(201,162,75,.35);}
.btn--ghost{background:transparent;color:var(--white);border-color:var(--line-dark);}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold);}
.btn--nav{background:var(--navy-800);color:#fff;padding:10px 20px;font-size:.9rem;}
.btn--nav:hover{background:var(--navy-700);}
.btn--outline{background:transparent;color:var(--navy-800);border-color:var(--line);}
.btn--outline:hover{border-color:var(--navy-800);}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 3px 0 0 var(--gold);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:90px;gap:28px;}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:1.18rem;color:var(--navy-900);letter-spacing:.02em;}
.brand .mark{width:30px;height:30px;flex:none;}
.brand small{display:block;font-family:var(--font-body);font-weight:500;font-size:.62rem;letter-spacing:.22em;color:var(--slate);text-transform:uppercase;margin-top:1px;}
.brand-logo{height:72px;width:auto;display:block;object-fit:contain;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-size:.94rem;font-weight:500;color:var(--navy-800);position:relative;padding:6px 0;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .25s var(--ease);}
.nav-links a:hover::after{width:100%;}
.nav-links .nav-links-cta{display:none;}
.nav-links-foot{display:none;}
.brand-logo--white{display:none;}
.nav-cta{display:flex;align-items:center;gap:18px;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--navy-900);margin:5px 0;transition:.25s;}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-video{
  position:absolute;
  top:50%;left:50%;
  width:100%;height:100%;
  min-width:100%;min-height:100%;
  object-fit:cover;
  transform:translate(-50%,-50%) scale(1.15);
  transform-origin:center center;
  z-index:0;pointer-events:none;
  background:var(--navy-900);
}
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,30,56,.42) 0%, rgba(10,30,56,.55) 45%, rgba(10,30,56,.88) 100%),
    linear-gradient(90deg, rgba(10,30,56,.55) 0%, rgba(10,30,56,.15) 60%, rgba(10,30,56,.45) 100%);
}
.hero-route{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none;z-index:2;}
.hero-route path{stroke:var(--gold-soft);stroke-width:1.4;fill:none;stroke-dasharray:5 7;opacity:.55;}
.hero-inner{position:relative;z-index:3;padding:clamp(4.5rem,9vw,7.5rem) 0 clamp(4rem,8vw,6rem);}
.hero .eyebrow{color:var(--gold-soft);}
.hero h1{color:#fff;font-size:var(--fs-display);max-width:14ch;}
.hero h1 .accent{color:var(--gold);}
.hero p.lead{color:#C7D3E0;font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:54ch;margin:22px 0 34px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;}
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(3rem,6vw,4.5rem);background:var(--line-dark);
  border:1px solid var(--line-dark);border-radius:var(--radius);overflow:hidden;
}
.hero-stats .stat{background:rgba(255,255,255,.02);padding:22px 20px;}
.hero-stats .num{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);color:#fff;font-variant-numeric:tabular-nums;}
.hero-stats .num .u{color:var(--gold);}
.hero-stats .lbl{color:#9FB1C6;font-size:.86rem;margin-top:4px;}

/* ---------- services ---------- */
.services{background:var(--white);}
.airfreight{background:var(--paper);}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.card{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px 28px;transition:all .3s var(--ease);
  box-shadow:var(--shadow-sm);
}
.card:hover{transform:translateY(-6px);border-color:var(--gold-soft);box-shadow:var(--shadow-md);}
.card .ic{
  width:48px;height:48px;border-radius:12px;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;color:var(--navy-700);margin-bottom:18px;
  transition:.3s var(--ease);
}
.card:hover .ic{background:var(--navy-800);color:#fff;}
.card h3{font-size:1.18rem;margin-bottom:8px;}
.card .metric{font-family:var(--font-mono);font-weight:500;color:var(--gold);font-size:.85rem;margin-bottom:10px;display:block;letter-spacing:.04em;text-transform:uppercase;}
.card p{color:var(--slate);font-size:var(--fs-sm);}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:.88rem;font-weight:600;color:var(--navy-700);}
.card .more svg{transition:transform .25s var(--ease);}
.card:hover .more svg{transform:translateX(4px);}

/* ---------- about ---------- */
.about{background:var(--white);}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
.about-copy h2{font-size:var(--fs-h1);margin-bottom:18px;}
.about-copy p{color:var(--slate);margin-bottom:16px;}
.about-copy .hl{color:var(--navy-800);font-weight:600;}
.about-panel{background:var(--navy-900);color:#fff;border-radius:18px;padding:34px;position:relative;overflow:hidden;}
.about-panel::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border:1px solid var(--line-dark);border-radius:50%;}
.about-panel .p-eyebrow{color:var(--gold-soft);font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px;}
.about-panel ul{display:grid;gap:14px;}
.about-panel li{display:flex;gap:12px;align-items:flex-start;color:#D7E0EC;}
.about-panel li svg{flex:none;color:var(--gold);margin-top:3px;}
.about-panel li b{color:#fff;font-weight:600;}

/* ---------- routes ---------- */
.routes{background:var(--paper);}
.route-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.route{
  border:1px solid var(--line);border-radius:var(--radius);padding:30px;
  background:linear-gradient(180deg,var(--white),var(--paper));
  transition:all .3s var(--ease);
}
.route:hover{border-color:var(--navy-700);box-shadow:var(--shadow-md);}
.route .r-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;}
.route h3{font-size:1.3rem;}
.route .tag{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-soft);padding:4px 10px;border-radius:999px;}
.route p{color:var(--slate);font-size:var(--fs-sm);}
.route .carrier-note{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);font-size:.82rem;color:var(--navy-700);font-weight:500;}
.route .carrier-note .code{font-family:var(--font-mono);font-weight:500;color:var(--gold);margin-right:8px;letter-spacing:.02em;}

/* ---------- contact / cta band ---------- */
.contact{background:var(--navy-900);color:#fff;position:relative;overflow:hidden;}
.contact .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,3.5rem);align-items:center;}
.contact h2{color:#fff;font-size:var(--fs-h1);}
.contact p{color:#C7D3E0;margin-top:14px;max-width:46ch;}
.contact .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.contact-card{background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:16px;padding:26px;}
.contact-card .row{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-dark);}
.contact-card .row:last-child{border-bottom:0;}
.contact-card .k{color:#9FB1C6;font-size:.88rem;}
.contact-card .v{color:#fff;font-weight:600;font-size:.92rem;text-align:right;}
.contact-card a.v{color:#fff;}
.contact-card a.v:hover{color:var(--gold-soft);}

/* ---------- ports (formerly branches) ---------- */
.ports{background:var(--white);}
.branch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.branch{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;transition:all .3s var(--ease);
}
.branch:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--gold-soft);}
.branch .city{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--navy-900);}
.branch .code{font-family:var(--font-mono);font-size:.78rem;color:var(--gold);font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-top:4px;display:block;}
.branch .region{color:var(--slate);font-size:.86rem;margin-top:4px;}
.branch .pin{color:var(--gold);margin-bottom:14px;}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-800);color:#C7D3E0;padding:clamp(3rem,6vw,4.5rem) 0 30px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;}
.site-footer .brand{color:#fff;margin-bottom:14px;}
.site-footer .brand small{color:#9FB1C6;}
.footer-logo{height:78px;width:auto;display:block;object-fit:contain;margin-bottom:18px;}
.foot-about{font-size:.9rem;max-width:34ch;color:#9FB1C6;}
.foot-col h4{color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;font-family:var(--font-body);font-weight:600;}
.foot-col a{display:block;color:#AEBCCF;font-size:.9rem;padding:6px 0;transition:color .2s;}
.foot-col a:hover{color:var(--gold-soft);}
.foot-bottom{border-top:1px solid var(--line-dark);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem;color:#8295AB;}

/* ---------- mobile sticky bottom bar ---------- */
.mobile-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,30,56,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-top:1px solid rgba(231,214,174,.25);
  gap:10px;justify-content:center;
}
.mobile-bar .btn{flex:1;max-width:210px;padding:12px 18px;font-size:.92rem;}

/* ---------- reveal animation (JS-gated so content is visible without JS) ---------- */
.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease);}
.js .reveal:not(.in){opacity:0;transform:translateY(26px);}
.reveal.in{opacity:1;transform:none;}
.delay-1{transition-delay:.08s;}
.delay-2{transition-delay:.16s;}
.delay-3{transition-delay:.24s;}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr);}
  .about-grid,.contact .wrap{grid-template-columns:1fr;}
  .route-grid{grid-template-columns:1fr;}
  .branch-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .hero-route{opacity:.18;}
  .hero-route path{stroke-width:1.1;}
}

@media (max-width:840px){
  /* ---------- full-screen navigation overlay ----------
     NOTE: .site-header uses backdrop-filter, which makes it the
     containing block for this position:fixed menu. We therefore set an
     explicit viewport-relative height (100dvh) and top/left/right instead
     of inset:0, and hide the closed state with visibility+opacity so the
     menu can NEVER show on load or while scrolling, on any browser. */
  .site-header{z-index:60;}
  .brand{position:relative;z-index:62;}
  .nav-links{
    position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;
    background:var(--navy-900);z-index:55;
    flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;
    padding:calc(86px + env(safe-area-inset-top)) 30px calc(36px + env(safe-area-inset-bottom));
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateY(-100%);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .42s var(--ease),opacity .3s var(--ease),visibility 0s linear .42s;
    counter-reset:navi;
  }
  body.menu-open .nav-links{
    transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;
    transition:transform .42s var(--ease),opacity .3s var(--ease),visibility 0s;
  }
  body.menu-open .site-header{background:var(--navy-900);border-bottom-color:rgba(231,214,174,.16);}
  body.menu-open .nav-toggle span{background:#fff;}
  body.menu-open .brand-logo{display:none;}
  body.menu-open .brand-logo--white{display:inline-block;}

  .nav-links > a:not(.nav-links-cta){counter-increment:navi;}
  .nav-links > a:not(.nav-links-cta)::before{
    content:counter(navi,decimal-leading-zero);
    font-family:var(--font-mono);font-size:.72rem;color:var(--gold);
    margin-right:14px;letter-spacing:.12em;flex:none;
  }
  .nav-links > a{
    display:flex;align-items:center;
    color:#EAF0F7;font-size:1.5rem;font-weight:600;font-family:var(--font-display);
    padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-links > a::after{display:none;}
  .nav-links > a:active{color:var(--gold-soft);}
  .nav-links .nav-links-cta{
    display:inline-flex;align-self:flex-start;margin-top:28px;width:auto;
    font-size:.98rem;font-family:var(--font-body);
    background:var(--gold);color:#1a1206;padding:14px 32px;border-radius:999px;border-bottom:0;
  }
  .nav-links-foot{display:flex;flex-direction:column;gap:8px;margin-top:26px;align-self:flex-start;}
  .nav-links-foot .lab{font-family:var(--font-body);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#7E90A6;margin-bottom:2px;}
  .nav-links-foot a{font-family:var(--font-mono);font-size:.86rem;letter-spacing:.02em;color:var(--gold-soft);border-bottom:0;padding:2px 0;align-self:flex-start;}

  .nav-toggle{display:block;position:relative;z-index:63;}
  .nav-toggle span{background:var(--navy-900);}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .nav-cta .btn--nav{display:none;}
}

@media (max-width:560px){
  .cards{grid-template-columns:1fr;}
  .branch-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .hero h1{font-size:clamp(2.1rem,8vw,2.6rem);}
  .hero-inner{padding:clamp(3rem,12vw,4.5rem) 0 clamp(2.6rem,8vw,3.5rem);}
  .brand-logo{height:52px;}
  .footer-logo{height:56px;}
}

/* =========================================================
   Phone-class devices (≤640px): redesigned hero + navigation
   ========================================================= */
@media (max-width:640px){
  section[id]{scroll-margin-top:86px;}

  .wrap{padding:0 18px;}
  .section{padding:3.4rem 0;}
  .section-head{text-align:left;margin-left:0;max-width:100%;}
  .section-head .eyebrow{margin-bottom:10px;}
  .section-head .eyebrow::before{content:"";display:block;width:32px;height:1px;background:var(--gold);margin-bottom:12px;}
  .section-head h2{font-size:clamp(1.55rem,6.2vw,1.85rem);line-height:1.15;}
  .section-head p{font-size:.98rem;margin-top:10px;line-height:1.6;}

  /* header */
  .site-header{padding-top:env(safe-area-inset-top);}
  .nav{height:64px;gap:14px;}
  .brand-logo{height:40px;}
  .nav-links{padding-top:calc(76px + env(safe-area-inset-top));padding-left:22px;padding-right:22px;}

  /* hero: media block + navy copy panel */
  .hero{display:flex;flex-direction:column;background:var(--navy-900);}
  .hero-media{position:relative;height:58svh;min-height:360px;max-height:520px;inset:auto;}
  .hero-video{transform:translate(-50%,-50%) scale(1.02);}
  .hero-overlay{
    background:
      linear-gradient(180deg, rgba(10,30,56,.28) 0%, rgba(10,30,56,.45) 55%, rgba(10,30,56,.95) 100%),
      linear-gradient(90deg, rgba(10,30,56,.25) 0%, rgba(10,30,56,.05) 70%, rgba(10,30,56,.22) 100%);
  }
  .hero-route{opacity:.10;}
  .hero-inner{
    position:relative;z-index:3;
    padding:26px 0 34px;
    min-height:auto;flex:auto;
    display:flex;flex-direction:column;justify-content:flex-start;
    border-top:1px solid rgba(231,214,174,.30);
  }
  .hero .eyebrow{font-size:.7rem;letter-spacing:.16em;margin-bottom:10px;color:var(--gold-soft);}
  .hero h1{font-size:clamp(2.1rem,9.5vw,2.7rem);line-height:1.04;letter-spacing:-.02em;}
  .hero p.lead{font-size:1rem;margin:12px 0 20px;line-height:1.55;max-width:100%;}

  /* CTAs: equal-width */
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;}
  .hero-actions .btn{justify-content:center;padding:12px 12px;font-size:.88rem;}
  .hero-actions .btn--ghost{padding:12px 12px;}

  /* stats: 2x2 document grid */
  .hero-stats{
    grid-template-columns:1fr 1fr;gap:0;
    margin-top:1.6rem;border-radius:12px;background:transparent;border:1px solid var(--line-dark);
  }
  .hero-stats .stat{padding:16px 14px;text-align:left;background:rgba(255,255,255,.03);border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);}
  .hero-stats .stat:nth-child(2n){border-right:0;}
  .hero-stats .stat:nth-child(n+3){border-bottom:0;}
  .hero-stats .num{font-size:1.55rem;}
  .hero-stats .lbl{font-size:.72rem;line-height:1.35;}

  /* cards: tighter, full-width */
  .cards{gap:14px;}
  .card{padding:22px 20px;border-radius:12px;}
  .card .ic{width:42px;height:42px;border-radius:10px;margin-bottom:14px;}
  .card .metric{font-size:.78rem;}
  .card h3{font-size:1.1rem;}
  .card p{font-size:.94rem;line-height:1.55;}
  .card .more{margin-top:12px;}

  /* routes: route cards with top strip */
  .route-grid{gap:14px;}
  .route{padding:22px;border-radius:12px;}
  .route .r-top{margin-bottom:10px;}
  .route h3{font-size:1.1rem;}
  .route .tag{font-size:.68rem;padding:3px 8px;}
  .route p{font-size:.94rem;line-height:1.55;}
  .route .carrier-note{font-size:.78rem;}
  .route .carrier-note .code{display:block;margin:0 0 4px;}

  /* contact */
  .contact .wrap{gap:1.6rem;}
  .contact h2{font-size:clamp(1.55rem,6.5vw,1.85rem);}
  .contact p{font-size:.98rem;line-height:1.55;}
  .contact-card{padding:18px;}
  .contact-card .row{padding:11px 0;}
  .contact-card .k{font-size:.84rem;}
  .contact-card .v{font-size:.86rem;}

  /* ports */
  .branch-grid{gap:14px;}
  .branch{padding:20px 18px;border-radius:12px;}
  .branch .pin{margin-bottom:10px;}
  .branch .city{font-size:1.1rem;}

  /* footer */
  .site-footer{padding-bottom:calc(86px + env(safe-area-inset-bottom));}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px;}
  .foot-grid > div:first-child{grid-column:1 / -1;}
  .foot-bottom{flex-direction:column;gap:6px;margin-top:28px;}
  .mobile-bar{display:flex;}
}

/* Very narrow phones */
@media (max-width:380px){
  .hero-stats .stat{padding:14px 12px;}
  .hero-stats .num{font-size:1.35rem;}
  .hero h1{font-size:1.9rem;}
  .hero-actions .btn{font-size:.82rem;padding:11px 8px;}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;}
  .reveal{opacity:1;transform:none;transition:none;}
  .hero-route path{animation:none !important;}
}