/*
Theme Name: SKS INTERNACIONAL
Theme URI: https://sksinternacional.com
Author: SKS INTERNACIONAL LLC
Author URI: https://sksinternacional.com
Description: Lightweight corporate theme for SKS INTERNACIONAL LLC: vehicle imports from China and the United States, and ocean freight logistics coordination from China.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sks-internacional
*/
:root{--navy:#0B1F3A;--ink:#05080F;--gold:#D4A942;--silver:#C9D1DB;--steel:#5B6B7F;--text:#3B4A5E;--line:#D5DBE3;--bg:#F3F5F8}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--navy);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(28px,4vw,38px);font-weight:700;margin-bottom:18px}
h3{font-size:19px;font-weight:700}
p{margin:0}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--navy);padding:10px 16px;z-index:100;border-radius:6px}
.skip:focus{left:8px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:1px solid #1E2430}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand img{border-radius:8px;display:block}
.brand span{display:flex;flex-direction:column;line-height:1.15}
.brand b{font-size:16px;letter-spacing:.05em}
.brand small{font-size:11px;letter-spacing:.25em;color:#AEBBCC}
.nav{display:flex;align-items:center;gap:26px}
.nav a{color:#E6EBF1;text-decoration:none;font-size:14px;font-weight:500}
.nav a:hover{color:var(--gold)}
.nav .btn{color:var(--navy)}
.nav-toggle{display:none;background:none;border:1px solid #3A4456;border-radius:8px;width:48px;height:48px;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:10px;font:600 15px/1 Inter,system-ui,sans-serif;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:#E2BB5C}
.btn-line{border-color:#8FA0B5;color:#fff}
.btn-line:hover{background:rgba(255,255,255,.08)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#16345C}

/* Hero */
.hero{background:linear-gradient(120deg,#05080F 0%,#0B1F3A 60%,#1C3557 100%);color:#fff;padding:80px 0 72px}
.kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#AEBBCC;margin-bottom:12px}
.kicker.dark{color:#4A5A6E}
.hero h1{font-size:clamp(34px,5.6vw,56px);font-weight:800;max-width:900px;margin-bottom:22px}
.lead{font-size:18px;line-height:1.6;color:#D3DAE3;max-width:760px;margin-bottom:34px}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:52px}
.cover{display:block;width:100%;border-radius:14px;border:1px solid #3A5378}

/* Sections */
.sec{padding:88px 0}
.alt{background:var(--bg)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.body-lg{font-size:17px;color:var(--text);line-height:1.7}
.narrow{max-width:720px;margin-bottom:34px}
.mt{margin-top:28px}
.grid{display:grid;gap:24px;margin-top:34px;list-style:none;padding:0}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
.grid.tight{margin-top:0;gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:12px;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(11,31,58,.1)}
.card p{font-size:14px;color:var(--text)}
.ic{width:46px;height:46px;border-radius:10px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center}
.more{margin-top:auto;font-size:14px;font-weight:600;text-decoration:none;color:var(--navy);padding-top:6px}
.more:hover{text-decoration:underline}
.steps b{font-size:34px;color:#8FA0B5;line-height:1}
.why .card{padding:22px}
.why h3{font-size:16px}

/* Vehicle categories */
.cat-art{height:240px;border-radius:14px;background:linear-gradient(150deg,#3A4F6B,#0B1F3A);color:#D4DAE3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin-bottom:18px}
.cat-art.us{background:linear-gradient(150deg,#56657A,#14284A)}
.cat-art svg{width:84px;height:84px;stroke-width:1.2}
.cat-art span{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.cat h3{font-size:21px;margin-bottom:6px}
.cat p{color:var(--text)}

/* Model catalog */
.models-h{margin:0}
.models{margin-top:20px}
.model{padding:0;overflow:hidden;gap:0}
.model img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.model-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4A5A6E}
.disclaimer{font-size:13px;color:var(--steel);margin-top:20px;max-width:820px}

/* Freight */
.dark-sec{background:var(--navy);color:#fff}
.dark-sec h2{color:#fff}
.ship{width:100%;border-radius:14px;border:1px solid #3A5378;object-fit:cover}
.light{color:#D3DAE3;font-size:16px;line-height:1.65;margin-bottom:20px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:#E6EBF1;font-size:15px}
.ticks li{padding-left:28px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.note{font-size:13px;color:#AEBBCC;margin-top:20px}

/* Quote form */
.quote{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.small{font-size:14px;color:var(--text);margin-top:16px}
.form{gap:16px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-size:13px;font-weight:600}
input,select,textarea{font:inherit;font-size:15px;padding:12px 14px;border:1px solid #8E9AAA;border-radius:8px;width:100%;background:#fff;color:var(--navy)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:#B3261E}
.err{font-size:13px;color:#B3261E;min-height:0}
.err:empty{display:none}
.form .btn{align-self:flex-start}
.status{padding:12px 14px;border-radius:8px;font-size:14px;font-weight:500}
.status.ok{background:#E6F4EA;color:#14532D}
.status.bad{background:#FDECEA;color:#8A1C14}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}

/* Contact */
.contact{padding:64px 0}
.contact .grid{margin-top:0}
.h3{font-size:24px}
.big{display:flex;align-items:flex-start;gap:12px;font-size:17px;font-weight:600;text-decoration:none;font-style:normal;color:var(--navy)}
a.big:hover{text-decoration:underline}

/* Footer */
.site-footer{background:var(--ink);color:#C9D1DB;padding:56px 0 28px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-grid img{border-radius:10px;display:block;margin-bottom:14px}
.foot-grid p{max-width:360px;line-height:1.6}
.foot-grid nav,.foot-grid address{display:flex;flex-direction:column;gap:8px;font-style:normal}
.site-footer a{color:#C9D1DB;text-decoration:none}
.site-footer a:hover{color:var(--gold);text-decoration:underline}
.foot-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid #20365A;margin-top:36px;padding-top:20px;font-size:13px}
.foot-bar span:last-child{display:flex;gap:20px}

/* Generic pages */
.page-main{padding:72px 0;min-height:60vh}
.prose{max-width:820px}
.prose h1{font-size:clamp(30px,4vw,42px);margin-bottom:24px}
.prose h2{font-size:22px;margin:32px 0 10px}
.prose p,.prose li{color:var(--text);line-height:1.75}
.prose a{color:var(--navy);text-decoration:underline}

/* Responsive */
@media (max-width:1024px){
	.g4{grid-template-columns:repeat(2,1fr)}.g5{grid-template-columns:repeat(2,1fr)}
	.nav-toggle{display:flex}
	.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);flex-direction:column;align-items:stretch;gap:0;padding:12px 24px 24px;border-bottom:1px solid #1E2430}
	.nav.open{display:flex}
	.nav a{padding:14px 4px;border-bottom:1px solid #1E2430;font-size:16px}
	.nav .btn{margin-top:16px;border:0;text-align:center}
}
@media (max-width:760px){
	.sec{padding:60px 0}.hero{padding:56px 0 48px}
	.two,.quote,.g2,.g3,.foot-grid{grid-template-columns:1fr}
	.g4,.g5{grid-template-columns:1fr}
	.two{gap:32px}.quote{gap:32px}
	.cta .btn{flex:1 1 100%}
	.form .btn{align-self:stretch}
	.cat-art{height:180px}
}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{transition:none!important;animation:none!important}
}