/*
Theme Name: SY Shipping Clean
Theme URI: https://syshipping.com/
Author: SY Shipping Corp.
Description: Clean replica of the established SY Shipping brochure site.
Version: 1.3.5
Text Domain: syshipping-clean
*/

:root { --navy:#21354f; --deep:#14243a; --gray:#777; --line:#e5e5e5; --max:1080px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; max-width:100%; overflow-x:hidden; }
body { margin:0; color:#777; background:#fff; font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.65; }
body { max-width:100%; overflow-x:hidden; }
body.menu-open { overflow:hidden; }
body.menu-open .site-header::before { content:''; position:fixed; z-index:290; inset:0; background:rgba(0,0,0,.58); }
a { color:#4f7e9c; text-decoration:none; }
a:hover { color:#222; }
img { display:block; max-width:100%; height:auto; }
button,input,textarea { font:inherit; }
.wrap { width:min(calc(100% - 30px),var(--max)); margin-inline:auto; }
.screen-reader-text { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
.skip-link:focus { clip:auto;width:auto;height:auto;left:1rem;top:1rem;z-index:9999;padding:.7rem 1rem;background:#fff;color:#111; }
.topbar { height:30px; color:#fff; background:rgba(22,39,59,.72); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.topbar-inner { height:30px; display:flex; align-items:center; justify-content:space-between; }
.topbar-right { display:flex; align-items:center; gap:14px; }
.topbar-right img { width:160px; max-height:28px; object-fit:contain; }
.site-header { position:absolute; z-index:100; inset:30px 0 auto; color:#fff; transition:background .25s,box-shadow .25s; }
.site-header-inner { position:relative; height:80px; display:flex; align-items:center; justify-content:flex-start; transition:height .25s; }
.brand { flex:0 0 300px; width:300px; margin-right:24px; }
.brand-logo { width:300px; max-height:100px; object-fit:contain; object-position:left center; }
.brand-logo-color { display:none; }
.desktop-nav { display:flex; align-items:center; flex:1; min-width:0; }
.desktop-nav>ul { display:flex; align-items:center; gap:0; margin:0; padding:0; list-style:none; }
.desktop-nav li { position:relative; }
.desktop-nav a { display:block; padding:12px 10px; color:#fff; font-size:13px; font-weight:700; text-transform:uppercase; }
.desktop-nav a:hover,.desktop-nav .current-menu-item>a { color:#fff; opacity:.75; }
.desktop-nav .sub-menu { position:absolute; z-index:5; left:0; top:100%; display:none; width:235px; margin:0; padding:8px 0; background:rgba(0,0,0,.9); list-style:none; border-radius:3px; }
.desktop-nav .menu-item-has-children:hover>.sub-menu,.desktop-nav .menu-item-has-children:focus-within>.sub-menu { display:block; }
.desktop-nav .sub-menu a { padding:9px 14px; text-transform:none; }
.desktop-nav .menu-item-has-children>a::after { content:''; position:relative; top:-2px; display:inline-block; width:6px; height:6px; margin-left:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); vertical-align:middle; }
.menu-toggle,.mobile-nav-drawer { display:none; }
.menu-toggle { position:absolute; left:0; top:50%; transform:translateY(-50%); width:44px; height:44px; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; }
.menu-toggle::before,.menu-toggle::after,.menu-toggle > span:first-child { content:""; display:block; width:22px; height:2px; margin:5px auto; background:currentColor; transition:transform .2s,opacity .2s; }
.menu-open .menu-toggle { position:fixed; z-index:303; left:auto; right:18px; top:22px; transform:none; color:#fff; }
.menu-open .menu-toggle > span:first-child { opacity:0; }
.menu-open .menu-toggle::before { transform:translateY(7px) rotate(45deg); }
.menu-open .menu-toggle::after { transform:translateY(-7px) rotate(-45deg); }
.mobile-nav-drawer { position:fixed; z-index:300; inset:0 auto 0 0; width:min(365px,85vw); padding-top:70px; overflow-y:auto; visibility:hidden; opacity:0; background:#fff!important; box-shadow:8px 0 30px rgba(0,0,0,.22); transform:translateX(-105%); transition:transform .28s ease,opacity .2s,visibility 0s linear .28s; }
.mobile-nav-drawer::after { display:none; }
.menu-open .mobile-nav-drawer { left:0!important; visibility:visible; opacity:1; transform:none!important; transition-delay:0s; }
.mobile-nav-drawer ul { margin:0; padding:0; list-style:none; background:#fff; }
.mobile-nav-drawer>ul { width:calc(100% - 34px); transform:translateX(34px); }
.mobile-nav-drawer li { margin:0; border-bottom:1px solid #e6e6e6; background:#fff; }
.mobile-nav-drawer a { display:flex; min-height:56px; align-items:center; justify-content:space-between; padding:14px 20px; color:#555!important; background:#fff!important; font-size:14px; font-weight:600; line-height:1.25; text-transform:uppercase; opacity:1!important; }
.mobile-nav-drawer a:hover,.mobile-nav-drawer .current-menu-item>a { color:#111!important; background:#f2f2f2!important; }
.mobile-nav-drawer .sub-menu { display:none; background:#f6f6f6; }
.mobile-nav-drawer .submenu-open>.sub-menu { display:block; }
.mobile-nav-drawer .sub-menu li { background:#f6f6f6; }
.mobile-nav-drawer .sub-menu a { padding-left:38px; color:#555!important; background:#f6f6f6!important; font-size:13px; text-transform:none; }
.mobile-nav-drawer .menu-item-has-children>a::after { content:''; flex:0 0 8px; width:8px; height:8px; margin-left:12px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s; }
.mobile-nav-drawer .submenu-open>a::after { transform:translateY(2px) rotate(225deg); }
body.header-stuck .site-header { position:fixed; inset:0 0 auto; color:#555; background:rgba(255,255,255,.96); box-shadow:0 2px 10px rgba(0,0,0,.16); animation:header-drop .34s ease; }
body.header-stuck .site-header-inner { height:80px; }
body.header-stuck .brand-logo-light { display:none; }
body.header-stuck .brand-logo-color { display:block; }
body.header-stuck .desktop-nav a { color:#666; }
body.header-stuck .desktop-nav a:hover,body.header-stuck .desktop-nav .current-menu-item>a { color:#222; }
body.header-stuck .desktop-nav .sub-menu { background:#fff; border:1px solid #e5e5e5; box-shadow:0 8px 22px rgba(0,0,0,.15); }
body.header-stuck .desktop-nav .sub-menu a { color:#555!important; background:#fff; opacity:1; }
body.header-stuck .desktop-nav .sub-menu a:hover { color:#111!important; background:#f3f3f3; }
@keyframes header-drop { from { top:-80px; opacity:.72; } to { top:0; opacity:1; } }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:39px; padding:8px 18px; border:2px solid #fff; color:#fff; background:transparent; font-size:13px; font-weight:700; line-height:1; text-transform:uppercase; }
.button:hover { color:#263a51; background:#fff; }
.hero { position:relative; height:calc(100vh - 30px); min-height:650px; overflow:hidden; color:#fff; background:#1f2f43; }
.hero-slide { position:absolute; inset:0; opacity:0; background-position:44% 34%; background-size:cover; transform:scale(1.04); transition:opacity .65s ease,transform 6s ease; }
.hero-slide::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.17); }
.hero-slide.is-active { opacity:1; transform:scale(1); }
.hero-panel { position:absolute; z-index:2; left:max(30px,calc((100vw - var(--max))/2)); top:50%; width:min(67%,720px); transform:translateY(-35%); opacity:0; pointer-events:none; transition:opacity .5s ease; }
.hero-panel.is-active { opacity:1; pointer-events:auto; }
.hero-panel h1 { margin:0 0 12px; color:#fff; font-size:clamp(35px,5vw,61px); line-height:1.02; letter-spacing:-.015em; text-transform:uppercase; }
.hero-panel p { max-width:620px; margin:0 0 22px; color:#fff; font-size:18px; }
.hero-dots { position:absolute; z-index:5; left:50%; bottom:24px; display:flex; gap:9px; transform:translateX(-50%); }
.hero-dot { width:12px;height:12px;padding:0;border:2px solid rgba(255,255,255,.7);border-radius:50%;background:transparent;cursor:pointer; }
.hero-dot.is-active { background:#fff; }
.home-values { padding:54px 0 46px; }
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:38px; text-align:center; }
.value-icon { width:62px; height:62px; margin:0 auto 12px; object-fit:contain; }
.value h2 { margin:0 0 12px; color:#555; font-size:18px; font-weight:500; text-transform:uppercase; }
.value p { margin:0; color:#777; font-size:15px; line-height:1.6; }
.page-hero { position:relative; height:507px; display:grid; align-items:end; color:#fff; background-position:center; background-size:cover; }
.page-hero::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.49); }
.page-hero-content { position:relative; z-index:2; width:min(calc(100% - 30px),800px); margin:0 auto; padding:0 0 82px; text-align:center; }
.page-hero h1 { margin:0 0 10px; color:#fff; font-size:42px; line-height:1.1; }
.page-hero p { margin:0 auto; max-width:720px; color:#fff; font-size:18px; line-height:1.5; white-space:pre-line; }
.page-body { padding:35px 0 55px; }
.prose { width:min(calc(100% - 30px),var(--max)); margin-inline:auto; }
.prose h2,.prose h3,.prose h4 { color:#555; line-height:1.3; }
.prose h2 { font-size:28px; font-weight:500; }
.prose h3 { font-size:20px; font-weight:500; }
.prose h4 { margin-bottom:4px; font-size:17px; }
.prose p { margin:0 0 18px; }
.prose blockquote { margin:22px 0; padding:7px 0 7px 36px; border-left:2px solid #7291a5; color:#555; font-size:21px; font-style:italic; }
.prose ul { padding-left:21px; }
.replica-section { padding:60px 0; }
.replica-section.alt { background:#f0f0f0; }
.service-row { width:min(calc(100% - 30px),var(--max)); margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.service-row>* { min-width:0; }
.service-row img { width:100%; }
.service-media { min-width:0; }
.service-media img { width:100%; }
.service-row h2 { margin-top:0; }
.service-copy { display:block!important; color:#777!important; }
.service-copy h2 { color:#555!important; }
.service-row.reverse .service-copy { order:-1; }
.regions { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:40px; }
.map-frame { width:100%; min-height:410px; border:0; background:#e5e3df; }
.service-map { width:100%; min-height:410px; height:100%; background:#e5e3df; z-index:1; }
.service-map .leaflet-popup-content { color:#555; line-height:1.45; }
.map-visual { position:relative; min-width:0; min-height:410px; height:100%; overflow:hidden; background:#e5e3df; }
.map-visual .map-frame { position:absolute; inset:-50px 0 auto; display:block; width:100%; height:calc(100% + 50px); }
.location-marker { position:absolute; z-index:3; left:var(--x); top:var(--y); width:20px; height:20px; transform:translate(-50%,-100%); border:2px solid #fff; border-radius:50% 50% 50% 0; background:#d94335; box-shadow:0 2px 5px rgba(0,0,0,.35); rotate:-45deg; pointer-events:none; }
.location-marker::after { content:''; position:absolute; inset:5px; border-radius:50%; background:#fff; }
.usa-section { margin-top:25px; }
.ceo-photo { float:right; width:280px; height:280px; margin:0 0 18px 28px; object-fit:cover; }
.signature { text-align:right; }
body.page-contact-us .topbar { background:#aaa; }
body.page-contact-us .site-header { color:#555; background:#fff; }
body.page-contact-us .site-header-inner { height:80px; }
body.page-contact-us .menu-toggle { color:#666; }
body.page-contact-us .brand-logo-light { display:none; }
body.page-contact-us .brand-logo-color { display:block; }
body.page-contact-us .desktop-nav a { color:#666; }
body.page-contact-us .desktop-nav a:hover { color:#222; }
.contact-page { padding-top:92px; }
.contact-map { position:relative; height:390px; background:#e5e3df; overflow:hidden; }
.contact-map iframe { position:absolute; inset:-50px 0 auto; width:100%; height:calc(100% + 50px); border:0; filter:grayscale(1); }
.contact-map .location-marker { left:50%; top:50%; }
.map-card { position:absolute; left:50%; bottom:22px; width:min(410px,calc(100% - 30px)); padding:20px; transform:translateX(-50%); background:#fff; box-shadow:0 8px 22px rgba(0,0,0,.12); }
.map-card h3 { margin:0 0 8px; color:#555; font-size:20px; }
.map-card p { margin:0; }
.contact-columns { width:min(calc(100% - 30px),var(--max)); margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:30px; padding:35px 0 55px; }
.contact-columns>* { min-width:0; overflow-wrap:anywhere; }
.section-rule { display:flex; align-items:center; gap:18px; margin:0 0 28px; color:#555; font-size:19px; text-transform:uppercase; }
.section-rule::after { content:""; height:1px; flex:1; background:#ddd; }
.contact-form label { display:block; margin-bottom:15px; color:#555; font-weight:700; }
.contact-form input,.contact-form textarea { width:100%; margin-top:5px; padding:10px; border:1px solid #ccc; background:#fff; }
.contact-form textarea { min-height:150px; }
.contact-form .website-field { position:absolute;left:-9999px; }
.contact-form .button { border-color:#555; color:#555; }
.contact-form .button:hover { color:#fff;background:#555; }
.contact-list { padding-left:20px; }
.notice { margin-bottom:18px;padding:10px 12px;background:#eef5f8;border-left:3px solid #7291a5; }
.site-footer { color:#777; background:#f3f3f3; }
.footer-grid { width:min(calc(100% - 30px),var(--max)); margin:auto; display:grid; grid-template-columns:1fr 1.8fr; gap:55px; padding:45px 0 35px; }
.site-footer h2 { margin:0 0 14px; color:#555; font-size:16px; text-transform:uppercase; }
.site-footer p { margin:0 0 8px; font-size:14px; }
.copyright { padding:17px 0; color:#888; background:#e9e9e9; font-size:13px; }
@media(max-width:849px){
  .topbar-inner { justify-content:center; }
  .topbar-right { display:none; }
  .desktop-nav { display:none; }
  .menu-toggle,.mobile-nav-drawer { display:block; }
  .site-header-inner { height:80px; justify-content:center; }
  .brand { position:absolute; left:50%; top:50%; width:295px; max-width:64vw; margin:0; transform:translate(-50%,-50%); }
  .brand-logo { width:295px; max-width:64vw; max-height:72px; object-position:center; }
  body.header-stuck .menu-toggle { color:#666; }
  body.menu-open .menu-toggle { left:calc(min(365px,85vw) - 86px); right:auto; top:18px; color:#555; }
  body.header-stuck .brand { top:50%; }
  body.page-contact-us .site-header-inner { height:80px; }
  .hero { min-height:700px; }
  .hero-panel { left:32px; top:auto; bottom:105px; width:calc(100% - 60px); transform:none; }
  .hero-panel h1 { font-size:39px; }
  .hero-panel p { font-size:16px; }
  .value-grid,.service-row,.regions,.contact-columns,.footer-grid { grid-template-columns:1fr; }
  .value-grid { gap:42px; }
  .service-row.reverse .service-copy { order:0; }
  .replica-section { padding:35px 0; }
  .page-hero { height:465px; }
  .page-hero-content { padding-bottom:65px; }
  .page-hero h1 { font-size:39px; }
  .contact-page { padding-top:92px; }
  .contact-map { height:370px; }
  .ceo-photo { float:none; margin:0 auto 22px; }
  .footer-grid { gap:28px; }
}
@media(max-width:549px){
  .site-header-inner { height:80px; }
  .brand-logo { max-height:58px; }
  body.page-contact-us .site-header-inner { height:80px; }
  .contact-page { padding-top:92px; }
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;}}
@media(max-width:480px){.hero-panel h1{font-size:32px;overflow-wrap:anywhere}.hero-panel{left:32px;right:24px;width:auto}.hero-panel p{max-width:100%}.page-hero-content{max-width:calc(100vw - 30px)}}