:root {--navy: #102a4c;--blue: #148dcc;--cyan: #27afe4;--orange: #f5822b;--ink: #172333;--muted: #64748b;--light: #f4f8fb;--line: #dbe5ee;--white: #fff;--shadow: 0 14px 40px rgba(16, 42, 76, .10)}
* {box-sizing: border-box}
html {scroll-behavior: smooth}
body {margin: 0;font-family: Inter, Arial, Helvetica, sans-serif;color: var(--ink);line-height: 1.6;background: #fff}
a {color: inherit;text-decoration: none}
img {max-width: 100%;display: block}
.container {width: min(1180px, calc(100% - 40px));margin: auto}
.topbar {background: var(--navy);color: #fff;font-size: 12px}
.topbar-inner {display: flex;gap: 26px;align-items: center;min-height: 34px}
.top-hours {margin-left: auto}
.site-header {background: #fff;position: sticky;top: 0;z-index: 1000;border-bottom: 1px solid #edf2f6}
.nav-wrap {min-height: 82px;display: flex;align-items: center;gap: 28px}
.brand img {width: 178px}
.main-nav {display: flex;align-items: center;gap: 22px;margin-left: auto;font-weight: 700;font-size: 14px}
.main-nav>a:hover, .nav-drop button:hover {color: var(--orange)}
.nav-drop {position: relative}
.nav-drop button {border: 0;background: none;font: inherit;color: inherit;padding: 12px 0;cursor: pointer}
.drop-menu {display: none;position: absolute;top: 48px;left: -15px;background: #fff;box-shadow: var(--shadow);border: 1px solid var(--line);border-radius: 12px;padding: 10px;width: 235px}
.nav-drop:hover .drop-menu{display: block}
.nav-drop:focus-within .drop-menu {display: block}
.drop-menu a {display: block;padding: 9px 12px;font-size: 13px}
.drop-menu a:hover {background: var(--light);color: var(--orange);border-radius: 7px}
.header-actions {display: flex;align-items: center;gap: 15px}
.phone {white-space: nowrap;color: var(--navy);font-size: 14px}
.btn {display: inline-flex;align-items: center;justify-content: center;border-radius: 8px;padding: 13px 20px;font-weight: 800;font-size: 14px;border: 2px solid transparent;transition: .2s}
.btn-orange {background: var(--orange);color: #fff}
.btn-orange:hover {background: #dc6e1e;transform: translateY(-1px)}
.btn-outline {border-color: var(--navy);color: var(--navy)}
.btn-light-outline {border-color: #fff;color: #fff}
.menu-toggle {display: none;border: 0;background: none}
.hero {background: linear-gradient(110deg, #edf8fd 0%, #fff 55%);overflow: hidden}
.hero-grid {display: grid;grid-template-columns: 1.5fr 1fr;gap: 35px;align-items: center;min-height: 610px;padding: 70px 0}
.eyebrow {display: inline-block;color: var(--orange);font-size: 13px;font-weight: 900;letter-spacing: .08em;text-transform: uppercase}
.hero h1 {font-size: clamp(42px, 5vw, 68px);line-height: 1.05;margin: 12px 0 22px;color: var(--navy);letter-spacing: -.04em}
.hero h1 span {color: var(--blue)}
.hero p {font-size: 18px;max-width: 650px;color: #526275}
.hero-actions {display: flex;gap: 12px;margin: 28px 0}
.hero-points {display: flex;gap: 20px;flex-wrap: wrap;margin-top: 25px}
.hero-points div {font-size: 13px;font-weight: 800;color: var(--navy);display: flex;align-items: center;gap: 8px}
.hero-points i {width: 28px;height: 28px;border: 2px solid var(--blue);border-radius: 50%;display: grid;place-items: center;color: var(--blue);font-style: normal}
.hero-visual {position: relative}
.hero-image {min-height: 500px;border-radius: 26px;background: linear-gradient(145deg, #d9f1fb, #b5dcef);position: relative;overflow: hidden;box-shadow: var(--shadow)}
.hero-image:before {content: 'SA BEST MOVERS';position: absolute;inset: auto 8% 18% 8%;font-weight: 900;font-size: 54px;color: rgba(16, 42, 76, .12);transform: rotate(-8deg)}
.truck-art {position: absolute;bottom: 30px;left: 8%;right: 8%;height: 220px}
.truck-body {position: absolute;left: 8%;bottom: 0;width: 68%;height: 145px;background: #fff;border-radius: 10px 16px 12px 12px;box-shadow: 0 20px 30px rgba(0, 0, 0, .14);border: 4px solid #d9e2ea}
.truck-cab {position: absolute;right: 0;bottom: 0;width: 28%;height: 120px;background: #eef4f7;border-radius: 8px 22px 8px 8px;border: 4px solid #d9e2ea}
.truck-cab:after {content: '';position: absolute;right: 12px;top: 16px;width: 55px;height: 35px;background: #9dd5ec;border-radius: 4px}
.truck-wheel {position: absolute;bottom: -20px;width: 58px;height: 58px;border-radius: 50%;background: #152234;border: 11px solid #8e9aaa}
.w1 {left: 20%}
.w2 {right: 16%}
.truck-brand {position: absolute;left: 18%;top: 38px;font-weight: 1000;color: var(--navy);font-size: 25px}
.truck-brand span {color: var(--orange)}
.quote-card {position: relative;background: var(--navy);color: #fff;padding: 25px;border-radius: 16px;box-shadow: 0 20px 50px rgba(16, 42, 76, .28)}
.quote-card h3 {margin: 0 0 3px;font-size: 21px}
.quote-card h3 span {color: var(--orange)}
.quote-card p {font-size: 12px;color: #d6e1eb;margin: 0 0 16px}
.quote-card label {font-size: 11px;font-weight: 800;display: block;margin-top: 9px}
.quote-card input, .quote-card select {width: 100%;padding: 10px;border-radius: 6px;border: 1px solid #d7e0e8;margin-top: 4px;background: #fff}
.quote-card .btn {width: 100%;margin-top: 15px}
.trust-strip {padding: 34px 0;background: #fff;border-bottom: 1px solid var(--line)}
.trust-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 22px}
.trust-item {display: flex;gap: 12px;align-items: flex-start}
.trust-icon {width: 42px;height: 42px;border-radius: 50%;border: 2px solid var(--blue);display: grid;place-items: center;color: var(--blue);font-weight: 900;flex: none}
.trust-item h4 {margin: 0 0 2px;color: var(--navy)}
.trust-item p {margin: 0;font-size: 12px;color: var(--muted)}
.section {padding: 82px 0}
.section.alt {background: var(--light)}
.section-head {text-align: center;max-width: 760px;margin: 0 auto 40px}
.section-head h2, .contact-copy h2, .callout h2 {font-size: clamp(30px, 4vw, 44px);line-height: 1.12;color: var(--navy);margin: 8px 0 12px}
.section-head p {color: var(--muted);margin: 0}
.service-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px}
.service-card {border: 1px solid var(--line);border-radius: 14px;background: #fff;padding: 27px;box-shadow: 0 6px 22px rgba(16, 42, 76, .05);transition: .2s}
.service-card:hover {transform: translateY(-4px);box-shadow: var(--shadow)}
.service-icon {width: 52px;height: 52px;border-radius: 12px;background: #eaf7fd;color: var(--blue);display: grid;place-items: center;font-size: 25px;margin-bottom: 18px}
.service-card h3 {color: var(--navy);margin: 0 0 8px;font-size: 19px}
.service-card p {font-size: 13px;color: var(--muted);min-height: 62px}
.learn {color: var(--orange);font-weight: 800;font-size: 13px}
.interstate {background: var(--navy);color: #fff;border-radius: 20px;padding: 36px}
.interstate h2 {font-size: 32px;margin: 0 0 8px}
.interstate p {color: #d6e3ee;max-width: 620px}
.route-grid {display: grid;grid-template-columns: repeat(6, 1fr);gap: 10px;margin-top: 22px}
.route {background: rgba(255, 255, 255, .08);border: 1px solid rgba(255, 255, 255, .15);border-radius: 10px;padding: 14px;text-align: center;font-size: 12px;font-weight: 800}
.route strong {display: block;color: var(--cyan);font-size: 14px;margin-top: 7px}
.split {display: grid;grid-template-columns: 1fr 1fr;gap: 55px;align-items: center}
.photo-panel {min-height: 420px;border-radius: 22px;background: linear-gradient(135deg, #d8f1fb, #aacfe0);position: relative;overflow: hidden}
.photo-panel:after {content: 'MOVING MADE SIMPLE';position: absolute;left: 25px;bottom: 25px;background: var(--navy);color: #fff;padding: 12px 17px;border-radius: 8px;font-weight: 900}
.benefits {display: grid;grid-template-columns: 1fr 1fr;gap: 22px;margin-top: 25px}
.benefit {display: flex;gap: 12px}
.benefit .service-icon {width: 44px;height: 44px;margin: 0}
.benefit h4 {margin: 0;color: var(--navy)}
.benefit p {font-size: 13px;color: var(--muted);margin: 2px 0}
.steps {display: grid;grid-template-columns: repeat(6, 1fr);gap: 10px}
.step {text-align: center;position: relative}
.step-number {width: 52px;height: 52px;border-radius: 50%;background: var(--blue);color: #fff;display: grid;place-items: center;font-weight: 900;margin: 0 auto 14px}
.step h4 {font-size: 14px;margin: 0 0 5px;color: var(--navy)}
.step p {font-size: 12px;color: var(--muted);margin: 0}
.locations {display: grid;grid-template-columns: repeat(4, 1fr);gap: 12px}
.locations a {background: #fff;border: 1px solid var(--line);padding: 13px 15px;border-radius: 8px;color: var(--navy);font-weight: 700}
.locations a:before {content: '✓';color: var(--blue);margin-right: 8px}
.reviews {background: var(--navy);color: #fff}
.review-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px}
.review {background: #fff;color: var(--ink);border-radius: 14px;padding: 25px}
.stars {color: #f7b500;letter-spacing: 2px}
.review p {font-size: 14px}
.review strong {color: var(--navy)}
.faq {max-width: 900px;margin: auto}
.faq-item {border-bottom: 1px solid var(--line)}
.faq-q {width: 100%;padding: 20px 0;border: 0;background: none;text-align: left;font-weight: 800;font-size: 17px;color: var(--navy);display: flex;justify-content: space-between;cursor: pointer}
.faq-a {display: none;padding: 0 0 20px;color: var(--muted)}
.faq-item.open .faq-a {display: block}
.callout {background: linear-gradient(110deg, var(--orange), #ff9a4c);color: #fff;padding: 45px 0}
.callout-inner {display: flex;justify-content: space-between;align-items: center;gap: 30px}
.callout h2 {color: #fff;margin-bottom: 5px}
.callout p {margin: 0;color: #fff8f2}
.callout-actions {display: flex;gap: 10px;flex: none}
.contact-section {padding: 80px 0;}
.contact-grid {display: grid;grid-template-columns: .8fr 1.2fr;gap: 55px;align-items: start}
.contact-points {margin-top: 30px;display: grid;gap: 18px}
.contact-points div {display: grid;gap: 2px}
.contact-points b {color: var(--navy)}
.contact-points a {color: var(--blue);font-weight: 800}
.form-card {background: #fff;border-radius: 18px;padding: 30px;box-shadow: var(--shadow)}
form label {display: block;font-size: 13px;font-weight: 800;color: var(--navy);margin-bottom: 15px}
input, select, textarea {font: inherit}
form input, form select, form textarea {width: 100%;border: 1px solid #cfdbe5;border-radius: 8px;padding: 12px;margin-top: 6px;background: #fff;color: var(--ink)}
form textarea {resize: vertical}
.form-row {display: grid;grid-template-columns: 1fr 1fr;gap: 15px}
.full {width: 100%}
form small {display: block;color: var(--muted);font-size: 11px;margin-top: 10px}
.hp {display: none!important}
.page-hero {background: linear-gradient(110deg, #edf8fd, #fff);padding:50px 0}
.page-hero h1 {font-size: clamp(38px, 5vw, 58px);line-height: 1.05;color: var(--navy);margin: 8px 0 15px}
.page-hero p {max-width: 800px;color: var(--muted);font-size: 17px}
.content-grid {display: grid;grid-template-columns: 1fr 340px;gap: 45px}
.content h2 {color: var(--navy);font-size: 30px}
.content h3 {color: var(--navy);font-size: 22px}
.content p, .content li {color: #536274}
.side-card {background: var(--navy);color: #fff;border-radius: 16px;padding: 25px;position: sticky;top: 110px}
.side-card h3 {color: #fff;margin-top: 0}
.side-card a {display: block;color: #fff;padding: 10px 0;border-bottom: 1px solid rgba(255, 255, 255, .12)}
.footer {background: #0a203b;color: #d6e2ee}
.footer-grid {padding: 65px 0 45px;display: grid;grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;gap: 35px}
.footer img {width: 180px;margin-bottom: 15px}
.footer h3 {color: #fff;font-size: 16px}
.footer a, .footer p {display: block;font-size: 13px;margin: 8px 0;color: #c7d5e2}
.footer a:hover {color: #fff}
.socials {display: flex;gap: 8px}
.socials a {width: 34px;height: 34px;border: 1px solid #41627f;border-radius: 50%;display: grid;place-items: center;color: #fff}
.footer-bottom {border-top: 1px solid rgba(255, 255, 255, .1);padding: 14px 0;font-size: 11px}
.footer-bottom .container {display: flex;justify-content: space-between}
.mobile-sticky {display: none}
.notice {padding: 15px 18px;border-radius: 9px;background: #e8f8ee;color: #166534;margin-bottom: 20px}
.error {background: #fff0f0;color: #991b1b}
.article-card {border: 1px solid var(--line);padding: 25px;border-radius: 12px;margin-bottom: 15px}
.article-card h3 {margin-top: 0}
.breadcrumbs {font-size: 12px;color: var(--muted);margin-bottom: 15px}
.breadcrumbs a {color: var(--blue)}
.btn.btndark {background: #0a203b;}

@media(max-width: 1050px) {.main-nav {gap: 14px;font-size: 13px}
.header-actions .phone {display: none}
.service-grid {grid-template-columns: repeat(2, 1fr)}
.footer-grid {grid-template-columns: 1.5fr 1fr 1fr}
.footer-grid>div:last-child {grid-column: auto}
.hero-grid {grid-template-columns: 1fr}
.hero-visual {max-width: 760px;width: 100%;margin: auto}
.trust-grid {grid-template-columns: repeat(2, 1fr)}
.route-grid {grid-template-columns: repeat(3, 1fr)}
}
@media(max-width: 760px) {
.container {width: min(100% - 28px, 680px)}
.topbar {display: none}
.site-header {position: sticky;top: 0}
.nav-wrap {min-height: 70px}
.brand img {width: 145px}

.header-actions {display: none}
.hero-grid {padding: 45px 0 70px}
.hero h1 {font-size: 42px}
.hero p {font-size: 16px}
.hero-image {min-height: 400px}
.hero-visual {display: flex;flex-direction: column;}
.hero-image {margin-bottom: -20px;}
.hero-actions {flex-direction: column;align-items: stretch;}
.hero-actions .btn {width: 100%;}
.hero-points {display: grid;grid-template-columns: 1fr 1fr;gap: 12px;}
.trust-grid {grid-template-columns: 1fr;}
.service-grid {grid-template-columns: 1fr;}
.section {padding: 60px 0;}
.interstate {padding: 28px 20px}

.route-grid {grid-template-columns: repeat(2, 1fr)}
.split, .contact-grid, .content-grid {grid-template-columns: 1fr;gap: 30px}
.photo-panel {min-height: 300px}
.benefits {grid-template-columns: 1fr}
.steps {grid-template-columns: 1fr 1fr;gap: 25px}
.locations {grid-template-columns: 1fr 1fr}
.review-grid {grid-template-columns: 1fr}
.callout-inner {flex-direction: column;align-items: flex-start}
.callout-actions {width: 100%;flex-direction: column}
.callout-actions .btn {width: 100%}
.form-row {grid-template-columns: 1fr}
.footer-grid {grid-template-columns: 1fr 1fr;gap: 28px;padding-bottom: 90px}
.footer-grid>div:first-child {grid-column: 1/-1;}
.footer-bottom .container {flex-direction: column;gap: 5px}
.mobile-sticky {position: fixed;display: grid;grid-template-columns: 1fr 1fr 1fr;bottom: 0;left: 0;right: 0;height: 62px;background: var(--navy);z-index: 2000;box-shadow: 0 -5px 20px rgba(0, 0, 0, .15)}
.mobile-sticky a, .mobile-sticky button {border: 0;border-right: 1px solid rgba(255, 255, 255, .15);background: transparent;color: #fff;display: flex;align-items: center;justify-content: center;gap: 6px;font-weight: 900;font-size: 13px}
.mobile-sticky a:first-child {background: var(--orange)}
.mobile-sticky span {font-size: 10px}
.side-card {position: static}
.content-grid .side-card {order: -1;}
}

.quote-card label{color:#fff;}