/* =========================================================================
   JLopez Moving Company — Design System
   Palette drawn from the company's own red/navy/truck-gray brand mark.
   Display type is a condensed industrial stencil face (crate-label energy);
   body type is a warm, humanist sans for long-form trust content; a mono
   face carries prices and quote numbers, like figures on a shipping tag.
   Signature element: the "Quote Tag" — an instant-estimate card built to
   look like a tag clipped to a box before moving day.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Roboto+Mono:wght@500;700&display=swap');

:root{
  --red:        #D6293E;
  --red-dark:   #A81F30;
  --navy:       #14283F;
  --navy-mid:   #1B3A5C;
  --gray:       #5B6472;
  --gray-light: #9AA3AF;
  --kraft:      #E7D9BE;
  --kraft-light:#F6F1E6;
  --paper:      #FAFAF8;
  --ink:        #201D1A;
  --success:    #2F7D5A;
  --line:       #E4DED2;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  --radius: 10px;
  --shadow: 0 10px 30px rgba(20,40,63,0.12);
  --shadow-sm: 0 4px 14px rgba(20,40,63,0.10);
  --container: 1140px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.02em;
  color:var(--navy);
  margin:0 0 .5em;
  line-height:1.1;
}
h1{font-size:clamp(2.1rem,4.5vw,3.4rem);}
h2{font-size:clamp(1.6rem,3vw,2.3rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em;}
.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.75rem;
  color:var(--red);
  font-weight:700;
}

:focus-visible{outline:3px solid var(--red);outline-offset:2px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.04em;
  font-size:.95rem;font-weight:600;
  padding:.85em 1.6em;
  border-radius:6px;
  border:2px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{background:var(--red);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--red-dark);transform:translateY(-2px);}
.btn-outline{background:transparent;border-color:var(--navy);color:var(--navy);}
.btn-outline:hover{background:var(--navy);color:#fff;}
.btn-light{background:#fff;color:var(--navy);}
.btn-light:hover{background:var(--kraft-light);}
.btn-block{width:100%;}

/* ---------- Header / Nav ---------- */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:20px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.brand img{height:52px;width:auto;}
.brand-text{font-family:var(--font-display);color:var(--navy);line-height:1.1;}
.brand-text small{display:block;font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:.7rem;color:var(--gray);font-weight:600;}

.main-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;}
.main-nav a{
  text-decoration:none;font-weight:600;font-size:.92rem;color:var(--navy);
  text-transform:uppercase;letter-spacing:.03em;
  padding:6px 2px;border-bottom:2px solid transparent;
}
.main-nav a:hover,.main-nav a.active{border-color:var(--red);color:var(--red);}
.header-cta{display:flex;align-items:center;gap:14px;}
.phone-link{font-family:var(--font-mono);font-weight:700;color:var(--navy);text-decoration:none;font-size:1rem;white-space:nowrap;}
.phone-link span{display:block;font-family:var(--font-body);font-weight:600;font-size:.68rem;color:var(--gray);text-transform:uppercase;letter-spacing:.08em;}
.nav-toggle{display:none;background:none;border:2px solid var(--navy);border-radius:6px;padding:8px 10px;cursor:pointer;}

@media (max-width:900px){
  .main-nav{position:fixed;inset:64px 0 0 0;background:#fff;transform:translateY(-110%);transition:transform .25s ease;overflow-y:auto;padding:20px 0;border-top:1px solid var(--line);}
  .main-nav.open{transform:translateY(0);}
  .main-nav ul{flex-direction:column;gap:0;padding:0 24px;}
  .main-nav a{display:block;padding:14px 0;border-bottom:1px solid var(--line);}
  .nav-toggle{display:block;}
  .header-cta .btn-primary{display:none;}
}

/* ---------- Hero + Quote Tag (signature element) ---------- */
.hero{
  position:relative;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-mid) 100%);
  color:#fff;
  overflow:hidden;
}
.hero-inner{
  max-width:var(--container);margin:0 auto;padding:70px 24px 110px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;
  position:relative;z-index:2;
}
.hero .eyebrow{color:#F2C7CE;}
.hero h1{color:#fff;}
.hero-sub{font-size:1.15rem;color:#D7E0EA;max-width:46ch;}
.hero-trust{display:flex;gap:22px;margin-top:28px;flex-wrap:wrap;}
.hero-trust div{font-family:var(--font-mono);font-size:.85rem;color:#EDE6D4;}
.hero-trust strong{display:block;font-family:var(--font-display);font-size:1.5rem;color:#fff;}
.hero-bg-truck{
  position:absolute;right:-40px;bottom:-20px;width:46%;opacity:.16;
  filter:grayscale(1) brightness(2);
  z-index:1;pointer-events:none;
}

/* the tag */
.quote-tag{
  background:var(--kraft-light);
  color:var(--ink);
  border-radius:4px 14px 14px 4px;
  padding:28px 26px 26px 40px;
  box-shadow:var(--shadow);
  transform:rotate(1.4deg);
  position:relative;
  border:1px solid #DDD0B4;
}
.quote-tag::before{ /* punch hole */
  content:"";
  position:absolute;left:14px;top:26px;
  width:16px;height:16px;border-radius:50%;
  background:var(--navy);
  box-shadow:inset 0 0 0 3px var(--kraft-light);
}
.quote-tag::after{ /* string */
  content:"";
  position:absolute;left:22px;top:-18px;
  width:2px;height:44px;background:var(--gray-light);
  transform:rotate(18deg);
}
.quote-tag h2{font-size:1.2rem;margin-bottom:4px;}
.quote-tag .eyebrow{color:var(--red);}
.quote-tag-note{font-size:.85rem;color:var(--gray);margin-top:10px;}

.qc-row{display:flex;gap:10px;margin-bottom:12px;}
.qc-field{flex:1;}
label{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--navy);margin-bottom:5px;}
select,input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],textarea{
  width:100%;padding:11px 12px;border:1.5px solid #D8CFB9;border-radius:6px;
  font-family:var(--font-body);font-size:.95rem;background:#fff;color:var(--ink);
}
.quote-tag select,.quote-tag input{border-color:#D8CFB9;}
select:focus,input:focus,textarea:focus{border-color:var(--red);}

.qc-result{
  margin-top:16px;background:#fff;border:1px dashed #C9BC9C;border-radius:8px;padding:14px 16px;
  display:none;
}
.qc-result.show{display:block;}
.qc-result .price{font-family:var(--font-mono);font-size:1.7rem;font-weight:700;color:var(--red-dark);}
.qc-result .price small{font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--gray);}

/* ---------- Sections ---------- */
section{padding:68px 0;}
.section-kraft{background:var(--kraft-light);}
.section-navy{background:var(--navy);color:#fff;}
.section-navy h2{color:#fff;}
.section-head{max-width:640px;margin:0 auto 40px;text-align:center;}
.section-head.left{margin:0 0 40px;text-align:left;}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media (max-width:860px){.grid-3,.grid-4{grid-template-columns:1fr 1fr;}.grid-2{grid-template-columns:1fr;}}
@media (max-width:560px){.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-sm);
}
.icon-badge{
  width:48px;height:48px;border-radius:10px;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-size:1.3rem;margin-bottom:14px;
}

/* trust strip / awards */
.trust-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:34px;padding:34px 0;}
.trust-strip img{height:96px;width:auto;}

/* pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:980px){.pricing-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.pricing-grid{grid-template-columns:1fr;}}
.tier-card{
  border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.tier-card.featured{border:2px solid var(--red);transform:translateY(-8px);box-shadow:var(--shadow);}
.tier-head{padding:22px 20px;color:#fff;}
.tier-head .price{font-family:var(--font-mono);font-size:2.1rem;font-weight:700;}
.tier-head .price span{font-size:.85rem;font-family:var(--font-body);font-weight:600;opacity:.85;}
.tier-blue .tier-head{background:var(--navy-mid);}
.tier-green .tier-head{background:var(--success);}
.tier-gold .tier-head{background:#B8862B;}
.tier-platinum .tier-head{background:var(--gray);}
.tier-body{padding:22px 20px;flex:1;display:flex;flex-direction:column;gap:10px;}
.tier-body ul{list-style:none;margin:0 0 18px;padding:0;font-size:.92rem;}
.tier-body li{padding:7px 0;border-bottom:1px solid var(--line);}
.tier-body li:last-child{border-bottom:none;}

/* testimonials */
.testimonial{
  background:#fff;border-radius:var(--radius);border:1px solid var(--line);
  padding:24px;box-shadow:var(--shadow-sm);height:100%;
}
.testimonial p{font-style:italic;color:var(--navy);}
.testimonial-meta{font-family:var(--font-mono);font-size:.8rem;color:var(--gray);}
.stars{color:#D69A28;letter-spacing:2px;margin-bottom:8px;}

/* service area list */
.area-pills{display:flex;flex-wrap:wrap;gap:10px;}
.area-pills span{
  background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:999px;
  font-size:.85rem;font-weight:600;color:var(--navy);
}

/* forms */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:32px;}
fieldset{border:none;padding:0;margin:0 0 28px;}
fieldset legend{
  font-family:var(--font-display);text-transform:uppercase;color:var(--navy);
  font-size:1.05rem;padding-bottom:8px;margin-bottom:18px;border-bottom:2px solid var(--kraft);width:100%;
}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
@media (max-width:700px){.field-grid,.field-grid-3{grid-template-columns:1fr;}}
.counter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:760px){.counter-grid{grid-template-columns:repeat(2,1fr);}}
.counter-item label{font-weight:600;}
.alert{padding:14px 18px;border-radius:8px;margin-bottom:24px;font-weight:600;}
.alert-success{background:#E4F3EA;color:var(--success);border:1px solid #BFE3CD;}
.alert-error{background:#FBE7E9;color:var(--red-dark);border:1px solid #F3C3C9;}
.help-text{font-size:.82rem;color:var(--gray);margin-top:4px;}

/* footer */
.site-footer{background:var(--navy);color:#CDD8E4;padding:50px 0 26px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;margin-bottom:34px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.site-footer h4{color:#fff;font-size:.9rem;margin-bottom:14px;}
.site-footer a{color:#CDD8E4;text-decoration:none;}
.site-footer a:hover{color:#fff;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:8px;font-size:.92rem;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;font-size:.8rem;color:#9AACBF;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* admin */
.admin-shell{max-width:1100px;margin:40px auto;padding:0 20px;}
table.admin-table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-sm);}
table.admin-table th,table.admin-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:.9rem;}
table.admin-table th{background:var(--kraft-light);font-family:var(--font-display);text-transform:uppercase;font-size:.78rem;color:var(--navy);}
.status-pill{padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:700;text-transform:uppercase;}
.status-new{background:#FBE7E9;color:var(--red-dark);}
.status-contacted{background:#FCEFD8;color:#8A5A16;}
.status-quoted{background:#E1E9F5;color:var(--navy-mid);}
.status-booked, .status-closed{background:#E4F3EA;color:var(--success);}
.login-card{max-width:400px;margin:80px auto;}

.skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:10px;z-index:100;}
.skip-link:focus{left:10px;top:10px;}