/* ==========================================================
   Vetta Shipping — Mobile & Tablet Polish
   Scope: <= 1024px only. Desktop remains untouched.
   ========================================================== */

@media (max-width:1024px){
  html{overflow-x:hidden}
  body{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  main,section,article,aside,header,footer,div{min-width:0}
  img,svg,video,canvas{max-width:100%;height:auto}
  :where(h1,h2,h3,h4,p,a,span,strong,small){overflow-wrap:break-word}

  /* Tablet typography: keep hierarchy without desktop-scale display type. */
  :where(.hero h1,.commercial-hero h1,.aboutpage-hero h1,.freight-v2-hero-copy h1,
    .proc-v2-hero-copy h1,.doc-title,.trade-title,.market-page-hero h1,
    .myv-preview h1,.quote-hero h1,.client-hero h1,.intro h1){
    font-size:clamp(38px,5.7vw,52px)!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
  }
  :where(.section h2,.commercial-head h2,.commercial-copy-grid h2,.commercial-world h2,
    .aboutpage-section-head h2,.aboutpage-intro-heading h2,.aboutpage-global-copy h2,
    .aboutpage-change-copy h2,.freight-v2-section h2,.freight-v2-difference h2,
    .freight-v2-myv h2,.freight-v2-final h2,.proc-v2-section h2,.proc-v2-reach h2,
    .proc-v2-decision h2,.proc-v2-final h2,.doc-section-title,.doc-final-cta h2,
    .contact-direct-head h2,.contact-path-cta h2,.trade-section-head h2,
    .trade-final-card h2,.market-watch-head h2){
    font-size:clamp(30px,4.5vw,40px)!important;
    line-height:1.08!important;
    letter-spacing:-.025em!important;
  }

  /* Tablet vertical rhythm. */
  body.home-page main>.section,
  .commercial-section,.aboutpage-intro,.aboutpage-services,.aboutpage-value,
  .aboutpage-global,.aboutpage-change,.aboutpage-entry,.freight-v2-section,
  .proc-v2-section,.doc-section,.trade-section{
    padding-top:58px!important;
    padding-bottom:58px!important;
  }
}

@media (max-width:820px){
  /* Consistent gutters on every public page. */
  .container,
  body.home-page .container,
  .trade-tool-page .container,
  .client-area-page .container{
    width:min(calc(100% - 32px),1220px)!important;
    max-width:1220px!important;
    margin-inline:auto!important;
  }

  /* Core type scale. */
  :where(.hero h1,.commercial-hero h1,.aboutpage-hero h1,.freight-v2-hero-copy h1,
    .proc-v2-hero-copy h1,.doc-title,.trade-title,.market-page-hero h1,
    .myv-preview h1,.quote-hero h1,.client-hero h1,.intro h1){
    font-size:clamp(35px,7vw,44px)!important;
    line-height:1.04!important;
  }
  :where(.section h2,.commercial-head h2,.commercial-copy-grid h2,.commercial-world h2,
    .aboutpage-section-head h2,.aboutpage-intro-heading h2,.aboutpage-global-copy h2,
    .aboutpage-change-copy h2,.aboutpage-contact-card h2,.freight-v2-section h2,
    .freight-v2-difference h2,.freight-v2-myv h2,.freight-v2-final h2,
    .proc-v2-section h2,.proc-v2-reach h2,.proc-v2-decision h2,.proc-v2-final h2,
    .doc-section-title,.doc-final-cta h2,.contact-direct-head h2,.contact-path-cta h2,
    .trade-section-head h2,.trade-final-card h2,.market-watch-head h2,
    .client-panel-head h2,.client-section-head h2){
    font-size:clamp(28px,5.5vw,35px)!important;
    line-height:1.1!important;
  }
  :where(.hero-lead,.aboutpage-hero-lead,.commercial-hero p,.freight-v2-hero-copy p,
    .proc-v2-hero-copy p,.doc-hero-copy>p,.trade-lead,.market-page-hero p,
    .quote-hero p,.intro p){
    font-size:15px!important;
    line-height:1.65!important;
  }

  /* Reduce over-long mobile sections while retaining comfortable spacing. */
  body.home-page main>.section,
  body.home-page main>.final-cta,
  .commercial-section,.aboutpage-intro,.aboutpage-services,.aboutpage-value,
  .aboutpage-global,.aboutpage-change,.aboutpage-entry,.freight-v2-section,
  .proc-v2-section,.doc-section,.trade-section{
    padding-top:52px!important;
    padding-bottom:52px!important;
  }

  /* Cards: consistent radius/padding and no desktop min-heights. */
  :where(.solution-card,.pillar-card,.commercial-service-card,.commercial-tool,
    .aboutpage-service-card,.aboutpage-value-card,.freight-v2-mode-card,
    .freight-v2-service-card,.proc-v2-service-card,.proc-v2-model-card,
    .tool-refresh-card,.container-card,.cbm-card,.client-card,.client-panel,
    .quote-card,.quote-help){
    border-radius:20px!important;
  }
  :where(.solution-card,.pillar-card,.commercial-service-card,.commercial-tool,
    .freight-v2-mode-card,.freight-v2-service-card,.proc-v2-service-card,
    .proc-v2-model-card){
    min-height:0!important;
  }

  /* HOME */
  body.home-page .hero#home .hero-grid{min-height:540px!important;padding-top:30px!important;padding-bottom:34px!important}
  body.home-page .section h2,
  body.home-page .outsourcing-title h2,
  body.home-page .world-copy h2,
  body.home-page .about-v2-heading h2,
  body.home-page .client-access-v2 h2,
  body.home-page .quote-compact-copy h2,
  body.home-page .final-cta h2{
    font-size:clamp(29px,5.7vw,35px)!important;
    line-height:1.08!important;
  }
  body.home-page .section-head{gap:14px!important;margin-bottom:30px!important}
  body.home-page .section-head p{font-size:14px!important;line-height:1.65!important}
  body.home-page .pillar-card{padding:24px!important}
  body.home-page .world-grid{gap:22px!important}
  body.home-page .world-stackmark span{font-size:46px!important;line-height:.9!important}
  body.home-page .world-stackmark i{font-size:24px!important}
  body.home-page .home-tools .tool-card.home-tool-card{min-height:300px!important}
  body.home-page .about-v2-services{gap:12px!important}
  body.home-page .client-access-shell{padding:24px!important;border-radius:22px!important}
  body.home-page .quote-compact-shell{padding:26px 22px!important}

  /* WHO WE ARE */
  body.about-fluid-page .aboutpage-hero,
  body.about-fluid-page .aboutpage-hero-grid{min-height:570px!important}
  body.about-fluid-page .aboutpage-hero-grid{padding-top:42px!important;padding-bottom:46px!important}
  body.about-fluid-page .aboutpage-hero h1{font-size:clamp(36px,7.4vw,44px)!important}
  body.about-fluid-page .aboutpage-section-head{margin-bottom:28px!important}
  body.about-fluid-page .aboutpage-service-card{padding:24px!important;min-height:0!important}
  body.about-fluid-page .aboutpage-service-card--primary{min-height:280px!important}
  body.about-fluid-page .aboutpage-global-visual{min-height:300px!important}
  body.about-fluid-page .aboutpage-contact-card{padding:30px 22px!important}

  /* FREIGHT + PROCUREMENT */
  .freight-v2-hero,.proc-v2-hero{padding-top:46px!important;padding-bottom:46px!important}
  .freight-v2-hero-copy h1,.proc-v2-hero-copy h1{font-size:clamp(35px,7vw,44px)!important}
  .freight-v2-section-head,.proc-v2-section-head{margin-bottom:28px!important}
  .freight-v2-track-card,.freight-v2-difference-shell,.freight-v2-chain-card,
  .freight-v2-shipment,.freight-v2-final-shell,.proc-v2-flow-card,
  .proc-v2-decision-shell,.proc-v2-chain-card,.proc-v2-final-shell{
    border-radius:20px!important;
  }

  /* DOCUMENT / TOOLS / CONTACT */
  body[data-content-refresh="1"] .doc-title{font-size:clamp(35px,7vw,44px)!important}
  body[data-content-refresh="1"] .doc-section-title{font-size:clamp(28px,5.6vw,34px)!important}
  .doc-hero,.contact-refresh-hero,.trade-hero,.market-page-hero{padding-top:48px!important;padding-bottom:48px!important}
  .tool-refresh-grid,.contact-refresh-grid,.market-page-hero-grid{gap:24px!important}
  .tool-refresh-card{padding:22px!important}
  .tool-refresh-card h2{font-size:20px!important;min-height:0!important;height:auto!important}
  .contact-panel{padding:24px!important;border-radius:20px!important}
  .contact-direct-head h2,.contact-path-cta h2{font-size:clamp(28px,5.6vw,34px)!important}

  /* NCM / INCOTERMS / TRADE TOOLS */
  .ncm-tool-heading h1,.tool-main-title{font-size:clamp(32px,6.8vw,40px)!important;line-height:1.08!important}
  .trade-title{font-size:clamp(34px,6.8vw,42px)!important}
  .trade-hero-grid{gap:24px!important}
  .trade-hero-visual{min-height:230px!important}
  .trade-section-head{margin-bottom:26px!important}
  .container-detail-head,.container-detail-body{padding:22px!important}

  /* MY VETTA / REGISTRATION */
  .myv-preview{padding:28px!important;border-radius:22px!important}
  .myv-preview h1{font-size:clamp(34px,6.8vw,42px)!important}
  .myv-login-card{padding:26px!important;border-radius:22px!important}
  .myv-login-top h2{font-size:28px!important;line-height:1.1!important}
  .page .intro h1{font-size:clamp(34px,6.8vw,42px)!important}
  .page .intro p{font-size:15px!important}
  .page .panel{border-radius:22px!important}

  /* CUSTOMER AREA + QUOTE */
  .client-hero{padding-top:48px!important;padding-bottom:72px!important}
  .client-hero h1{font-size:clamp(34px,6.8vw,42px)!important}
  .client-section,.client-panel{padding:22px!important}
  .client-quotes-list{grid-template-columns:1fr!important}
  .client-quote-card{cursor:pointer}
  .client-modal-dialog{width:min(calc(100% - 28px),720px)!important;max-height:calc(100dvh - 28px)!important;border-radius:20px!important}
  .client-modal-head{padding:20px!important}
  .client-modal-head h2{font-size:24px!important}
  .quote-hero{padding-top:42px!important;padding-bottom:58px!important}
  .quote-hero h1{font-size:clamp(34px,6.8vw,42px)!important}
  .quote-layout{margin-top:-24px!important}
  .quote-card{padding:22px!important}
  .quote-section-head h2{font-size:21px!important;line-height:1.15!important}

  /* Long tabular content remains usable without shrinking text into illegibility. */
  :where(.table-wrap,.ncm-table-wrap,.market-table-wrap,.container-table-wrap){overflow-x:auto;-webkit-overflow-scrolling:touch}
  :where(table){max-width:none}
}

@media (max-width:560px){
  .container,
  body.home-page .container,
  .trade-tool-page .container,
  .client-area-page .container{
    width:min(calc(100% - 24px),1220px)!important;
  }

  /* Smartphone display type: deliberately calmer than the old 38–50px scale. */
  :where(.hero h1,.commercial-hero h1,.aboutpage-hero h1,.freight-v2-hero-copy h1,
    .proc-v2-hero-copy h1,.doc-title,.trade-title,.market-page-hero h1,
    .myv-preview h1,.quote-hero h1,.client-hero h1,.intro h1){
    font-size:clamp(32px,9vw,38px)!important;
    line-height:1.06!important;
    letter-spacing:-.03em!important;
  }
  :where(.section h2,.commercial-head h2,.commercial-copy-grid h2,.commercial-world h2,
    .aboutpage-section-head h2,.aboutpage-intro-heading h2,.aboutpage-global-copy h2,
    .aboutpage-change-copy h2,.aboutpage-contact-card h2,.freight-v2-section h2,
    .freight-v2-difference h2,.freight-v2-myv h2,.freight-v2-final h2,
    .proc-v2-section h2,.proc-v2-reach h2,.proc-v2-decision h2,.proc-v2-final h2,
    .doc-section-title,.doc-final-cta h2,.contact-direct-head h2,.contact-path-cta h2,
    .trade-section-head h2,.trade-final-card h2,.market-watch-head h2,
    .client-panel-head h2,.client-section-head h2){
    font-size:clamp(26px,7.6vw,31px)!important;
    line-height:1.12!important;
  }
  :where(.hero-lead,.aboutpage-hero-lead,.commercial-hero p,.freight-v2-hero-copy p,
    .proc-v2-hero-copy p,.doc-hero-copy>p,.trade-lead,.market-page-hero p,
    .quote-hero p,.intro p){font-size:14px!important;line-height:1.65!important}

  body.home-page main>.section,
  body.home-page main>.final-cta,
  .commercial-section,.aboutpage-intro,.aboutpage-services,.aboutpage-value,
  .aboutpage-global,.aboutpage-change,.aboutpage-entry,.freight-v2-section,
  .proc-v2-section,.doc-section,.trade-section{
    padding-top:46px!important;
    padding-bottom:46px!important;
  }

  /* Home sections shown in the supplied screenshots. */
  body.home-page .hero#home .hero-grid{min-height:515px!important;padding-top:24px!important;padding-bottom:28px!important}
  body.home-page .section h2,
  body.home-page .outsourcing-title h2,
  body.home-page .world-copy h2,
  body.home-page .about-v2-heading h2,
  body.home-page .client-access-v2 h2,
  body.home-page .quote-compact-copy h2,
  body.home-page .final-cta h2{
    font-size:clamp(27px,8vw,31px)!important;
    line-height:1.1!important;
  }
  body.home-page .section-head{margin-bottom:24px!important}
  body.home-page .pillar-card{padding:22px 20px!important}
  body.home-page .pillar-card h3{font-size:25px!important}
  body.home-page .world-stackmark span{font-size:40px!important}
  body.home-page .world-stackmark i{font-size:21px!important}
  body.home-page .world-map-card{padding:10px!important;border-radius:18px!important}
  body.home-page .about-v2-services{grid-template-columns:1fr!important}
  body.home-page .home-tools .tool-cards.home-tool-grid{grid-template-columns:1fr!important}
  body.home-page .home-tools .tool-card.home-tool-card{min-height:270px!important}
  body.home-page .client-access-shell{padding:20px!important}
  body.home-page .client-access-card{padding:20px!important}
  body.home-page .quote-compact-shell{padding:24px 20px!important}

  /* Who we are */
  body.about-fluid-page .aboutpage-hero,
  body.about-fluid-page .aboutpage-hero-grid{min-height:520px!important}
  body.about-fluid-page .aboutpage-hero-grid{padding-top:34px!important;padding-bottom:38px!important}
  body.about-fluid-page .aboutpage-hero h1{font-size:clamp(33px,9.2vw,38px)!important}
  body.about-fluid-page .aboutpage-section-head h2,
  body.about-fluid-page .aboutpage-intro-heading h2,
  body.about-fluid-page .aboutpage-global-copy h2,
  body.about-fluid-page .aboutpage-change-copy h2,
  body.about-fluid-page .aboutpage-contact-card h2{font-size:clamp(26px,7.6vw,31px)!important}
  body.about-fluid-page .aboutpage-service-card{padding:22px!important}
  body.about-fluid-page .aboutpage-service-card--primary{min-height:245px!important}
  body.about-fluid-page .aboutpage-global-visual{min-height:270px!important}
  body.about-fluid-page .aboutpage-ops-photo{min-height:300px!important}
  body.about-fluid-page .aboutpage-contact-card{padding:26px 20px!important}

  /* Freight / procurement */
  .freight-v2-hero,.proc-v2-hero{padding-top:40px!important;padding-bottom:40px!important}
  .freight-v2-hero-copy h1,.proc-v2-hero-copy h1{font-size:clamp(32px,9vw,38px)!important}
  .freight-v2-section h2,.freight-v2-difference h2,.freight-v2-myv h2,.freight-v2-final h2,
  .proc-v2-section h2,.proc-v2-reach h2,.proc-v2-decision h2,.proc-v2-final h2{
    font-size:clamp(26px,7.6vw,31px)!important;
  }
  .freight-v2-track-card,.freight-v2-difference-shell,.freight-v2-chain-card,
  .freight-v2-shipment,.freight-v2-final-shell,.proc-v2-flow-card,
  .proc-v2-decision-shell,.proc-v2-chain-card,.proc-v2-final-shell{
    padding:22px 18px!important;
  }
  .freight-v2-mode-card,.freight-v2-service-card,.proc-v2-service-card{padding:20px!important}
  .proc-v2-route-flow{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 14px!important}

  /* Tools/contact pages */
  body[data-content-refresh="1"] .doc-title{font-size:clamp(32px,9vw,38px)!important}
  body[data-content-refresh="1"] .doc-section-title{font-size:clamp(26px,7.6vw,31px)!important}
  .doc-hero,.contact-refresh-hero,.trade-hero,.market-page-hero{padding-top:40px!important;padding-bottom:40px!important}
  .tool-refresh-card{padding:20px!important}
  .contact-panel{padding:20px!important}
  .doc-final-cta-grid,.contact-path-inner{gap:24px!important}

  /* Forms and utility tools */
  .ncm-tool-heading h1,.tool-main-title,.trade-title{font-size:clamp(30px,8.5vw,36px)!important}
  .ncm-tool-shell,.tool-shell{border-radius:20px!important}
  .tool-topbar,.result-panel,.question-panel{padding-left:18px!important;padding-right:18px!important}
  .trade-hero-visual{min-height:205px!important}
  .cbm-card,.container-detail-head,.container-detail-body{padding:18px!important}
  .cbm-summary-stats{grid-template-columns:1fr 1fr!important}

  /* Authentication */
  .myv-preview{padding:22px!important}
  .myv-preview h1{font-size:clamp(31px,8.7vw,37px)!important}
  .myv-login-card{padding:22px 20px!important}
  .myv-login-top h2{font-size:25px!important}
  .page{width:min(calc(100% - 24px),1120px)!important;margin-top:22px!important;margin-bottom:54px!important}
  .page .intro{padding-top:10px!important}
  .page .intro h1{font-size:clamp(31px,8.7vw,37px)!important}
  .page .panel{padding:20px!important}
  .actions{align-items:stretch!important;flex-direction:column!important}
  .actions .btn{width:100%!important}

  /* Customer area */
  .client-hero{padding-top:38px!important;padding-bottom:62px!important}
  .client-hero h1{font-size:clamp(31px,8.7vw,37px)!important}
  .client-stats{gap:10px!important}
  .client-stat{padding:18px!important}
  .client-section,.client-panel{padding:20px!important;border-radius:18px!important}
  .client-section-head{gap:14px!important}
  .client-section-head h2{font-size:25px!important}
  .client-quote-card{padding:14px!important}
  .client-modal-dialog{width:calc(100% - 20px)!important;max-height:calc(100dvh - 20px)!important}
  .client-modal-head{padding:18px!important}
  .client-modal-body{padding:18px!important}

  /* Quote */
  .quote-hero{padding-top:34px!important;padding-bottom:52px!important}
  .quote-hero h1{font-size:clamp(31px,8.7vw,37px)!important}
  .quote-card{padding:18px!important;border-radius:18px!important}
  .quote-progress{gap:4px!important}
  .quote-progress button span{width:28px!important;height:28px!important}
  .quote-step{padding-top:22px!important}
  .quote-section-head{gap:11px!important;margin-bottom:18px!important}
  .quote-section-head>span{width:34px!important;height:34px!important;flex-basis:34px!important}
  .quote-section-head h2{font-size:19px!important}
  .quote-grid{gap:13px!important}
  .quote-actions{grid-template-columns:1fr!important}
  .quote-actions #quote-submit{grid-column:auto!important}
  .quote-help{padding:18px!important}

  /* Floating actions stay reachable without dominating content. */
  .quick-actions{right:12px!important;bottom:14px!important}
  .quick-toggle{width:48px!important;height:48px!important}
  .vetta-whatsapp,.client-whatsapp,.wa{transform:scale(.92);transform-origin:bottom right}
}

@media (max-width:380px){
  :where(.hero h1,.commercial-hero h1,.aboutpage-hero h1,.freight-v2-hero-copy h1,
    .proc-v2-hero-copy h1,.doc-title,.trade-title,.market-page-hero h1,
    .myv-preview h1,.quote-hero h1,.client-hero h1,.intro h1){font-size:30px!important}
  :where(.section h2,.aboutpage-section-head h2,.freight-v2-section h2,.proc-v2-section h2,
    .doc-section-title,.trade-section-head h2,.client-section-head h2){font-size:25px!important}
  body.home-page .section h2,
  body.home-page .outsourcing-title h2,
  body.home-page .world-copy h2,
  body.home-page .about-v2-heading h2,
  body.home-page .client-access-v2 h2,
  body.home-page .quote-compact-copy h2,
  body.home-page .final-cta h2{font-size:26px!important}
  .lang-field{padding-inline:8px!important}
}


/* VETTA MOBILE FIX 2026-08-31 FX FOOTER V4 */
/* Footer logos: the PNG is intrinsically square; force both dimensions so no
   legacy width-only rule can retain the old HTML height and stretch the mark. */
.site-footer .footer-brand img,
.site-footer.footer-v2 .footer-brand img,
.site-footer.commercial-footer .footer-brand img,
.commercial-footer .footer-brand img{
  width:96px!important;
  height:96px!important;
  max-width:96px!important;
  max-height:96px!important;
  object-fit:contain!important;
  aspect-ratio:1/1!important;
  display:block!important;
}

/* Home FX ticker on phones/tablets. Every quotation and both duplicated
   marquee groups must keep their intrinsic width. This prevents flex-shrink
   from laying USD/EUR/GBP/CNY/JPY text on top of the next quotation. */
@media (max-width:820px){
  body.home-page .vetta-fx-viewport{
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  body.home-page .vetta-fx-track{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    flex:0 0 auto!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    white-space:nowrap!important;
    column-gap:0!important;
  }
  body.home-page .vetta-fx-group{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    flex:0 0 auto!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    align-items:center!important;
    gap:22px!important;
    padding-right:22px!important;
    white-space:nowrap!important;
  }
  body.home-page .vetta-fx-item{
    display:inline-flex!important;
    flex:0 0 auto!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    align-items:center!important;
    gap:6px!important;
    white-space:nowrap!important;
  }
  body.home-page .vetta-fx-item strong,
  body.home-page .vetta-fx-item b,
  body.home-page .vetta-fx-item em{
    display:inline-block!important;
    flex:0 0 auto!important;
    width:auto!important;
    white-space:nowrap!important;
  }
}
@media (max-width:430px){
  body.home-page .vetta-fx-group{gap:18px!important;padding-right:18px!important}
  body.home-page .vetta-fx-item{gap:5px!important}
  body.home-page .vetta-fx-item strong,
  body.home-page .vetta-fx-item b{font-size:9.2px!important}
  body.home-page .vetta-fx-item em{font-size:7.6px!important}
}