/* Tri-State Relocation — shared stylesheet */
:root{
  --ink:#101B29; --ink-2:#18273A;
  --navy:#14304F; --navy-dk:#0D2138; --navy-lt:#245078;
  --gold:#E0A82E; --gold-lt:#F0BE55; --gold-ink:#8A6410;
  --paper:#F7F8FA; --paper-2:#EDEFF3; --paper-3:#DDE2EA;
  --mist:#E3E9F2;
  --muted:#5A6472; --muted-lt:#C3CEDC;
  --line:rgba(16,27,41,.13); --line-lt:rgba(248,249,251,.18);
  --display:"Bricolage Grotesque","Helvetica Neue",Helvetica,sans-serif;
  --body:"Karla","Helvetica Neue",Helvetica,sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --wrap:1200px;
  --r:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.025em; margin:0}
h1{font-size:clamp(2.6rem,6.2vw,4.9rem)}
h2{font-size:clamp(2rem,4vw,3.1rem)}
h3{font-size:1.3rem; line-height:1.24; letter-spacing:-.015em}
p{margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px}
.lede{font-size:clamp(1.04rem,1.5vw,1.2rem); line-height:1.65; color:#3B4756; max-width:58ch}
.on-dark .lede{color:#C3CEDC}

.kicker{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:11px;
}
.kicker::before{content:""; width:22px; height:2px; background:var(--gold); flex:none}
.on-dark .kicker{color:var(--muted-lt)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; border:1px solid transparent;
  font-family:var(--body); font-weight:700; font-size:15.5px; letter-spacing:.005em;
  padding:15px 28px; border-radius:var(--r); text-decoration:none;
  transition:transform .2s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold); color:var(--navy)}
.btn-gold:hover{background:var(--gold-lt)}
.btn-pine{background:var(--navy); color:var(--paper)}
.btn-pine:hover{background:var(--navy-lt)}
.btn-out{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-out:hover{border-color:var(--navy); background:var(--mist)}
.btn-out-lt{background:transparent; color:var(--paper); border-color:var(--line-lt)}
.btn-out-lt:hover{background:rgba(248,249,251,.09)}
.btn .arw{transition:transform .24s} .btn:hover .arw{transform:translateX(4px)}

/* ---------- promo + header ---------- */
.promo{
  background:var(--gold); color:var(--ink); text-align:center;
  font-family:var(--mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase; padding:9px 16px;
}
header{position:sticky; top:0; z-index:100; background:rgba(251,249,245,.94); backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:24px; height:76px}
.logo{display:flex; flex-direction:row; align-items:center; gap:12px; text-decoration:none; line-height:1.05}
.logo-mark{height:34px; width:auto; flex:none}
.logo-txt{display:flex; flex-direction:column}
.logo b{font-family:var(--display); font-weight:800; font-size:1.24rem; letter-spacing:-.03em; color:var(--navy)}
.logo span{font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:3px}
nav{display:flex; align-items:center; gap:30px}
nav a:not(.btn){
  text-decoration:none; font-size:15px; font-weight:500; color:var(--ink); padding:4px 0; position:relative;
}
nav a:not(.btn)::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--gold); transition:right .28s cubic-bezier(.2,.8,.2,1)}
nav a:not(.btn):hover::after{right:0}
.tel{font-family:var(--mono); font-weight:500; font-size:15px; text-decoration:none; color:var(--navy); white-space:nowrap}
.tel:hover{color:var(--gold-ink)}
nav .btn{padding:12px 20px; font-size:14.5px}
.nav-call{display:none}
@media(max-width:940px){ nav a:not(.btn):not(.tel){display:none} }

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:92px 0 84px; background:var(--navy); color:var(--paper)}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(720px 480px at 82% 10%, rgba(224,168,46,.16), transparent 62%),
             radial-gradient(600px 460px at 0% 100%, rgba(36,80,120,.55), transparent 68%);
}
/* route motif */
.hero::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    repeating-linear-gradient(to right, rgba(248,249,251,.05) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(to bottom, rgba(248,249,251,.05) 0 1px, transparent 1px 74px);
  -webkit-mask-image:radial-gradient(circle at 76% 42%, #000, transparent 70%);
  mask-image:radial-gradient(circle at 76% 42%, #000, transparent 70%);
}
.hero .wrap{position:relative; z-index:2}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center}
@media(max-width:1000px){ .hero-grid{grid-template-columns:1fr; gap:52px} .hero{padding:64px 0 66px} }
.hero h1{margin:20px 0 24px; max-width:15ch}
.hero h1 em{font-style:normal; color:var(--gold-lt)}
.hero-cta{display:flex; flex-wrap:wrap; gap:13px; margin-top:32px}
.trust{margin-top:34px; padding-top:24px; border-top:1px solid var(--line-lt); display:flex; flex-wrap:wrap; gap:10px 26px;
  font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--muted-lt)}
.trust b{color:var(--gold-lt); font-weight:500}

/* route card */
.route{background:rgba(248,249,251,.07); border:1px solid var(--line-lt); border-radius:var(--r); padding:32px 30px; backdrop-filter:blur(3px)}
.route-h{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-lt); margin-bottom:24px}
.stop{display:flex; gap:16px; align-items:flex-start; position:relative; padding-bottom:26px}
.stop:last-child{padding-bottom:0}
.stop .dot{width:13px; height:13px; border-radius:50%; border:2px solid var(--gold-lt); margin-top:5px; flex:none; background:var(--navy)}
.stop:last-child .dot{background:var(--gold-lt)}
.stop::before{content:""; position:absolute; left:6px; top:22px; bottom:-4px; width:1px;
  background-image:linear-gradient(to bottom, var(--muted-lt) 50%, transparent 50%); background-size:1px 7px}
.stop:last-child::before{display:none}
.stop .t{font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:-.01em}
.stop .d{font-size:14.5px; color:#C3CEDC; margin-top:3px; line-height:1.5}

/* ---------- stats ---------- */
.stats{background:var(--paper-2); border-bottom:1px solid var(--line)}
.stats-in{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
@media(max-width:860px){ .stats-in{grid-template-columns:repeat(2,1fr)} }
.stat{padding:36px 26px; border-right:1px solid var(--line); text-align:center}
.stat:last-child{border-right:none}
@media(max-width:860px){ .stat:nth-child(2n){border-right:none} .stat:nth-child(-n+2){border-bottom:1px solid var(--line)} }
.stat b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,3vw,2.3rem); color:var(--navy); letter-spacing:-.03em}
.stat span{display:block; margin-top:8px; font-size:14px; line-height:1.45; color:var(--muted)}

/* ---------- sections ---------- */
section{padding:104px 0}
@media(max-width:800px){ section{padding:70px 0} }
.dark{background:var(--navy); color:var(--paper)}
.tint{background:var(--paper-2)}
.sec-head{max-width:60ch; margin-bottom:56px}
.sec-head h2{margin:18px 0 20px}

/* services */
.svcs{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line)}
@media(max-width:800px){ .svcs{grid-template-columns:1fr} }
.svc{background:var(--paper); padding:40px 34px; transition:background .3s; position:relative}
.tint .svc{background:var(--paper-2)}
.svc:hover{background:var(--mist)}
.svc .n{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--gold-ink); display:block; margin-bottom:18px}
.svc h3{margin-bottom:11px}
.svc p{font-size:15.5px; line-height:1.62; color:#3B4756}

/* why */
.why{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-lt)}
@media(max-width:900px){ .why{grid-template-columns:1fr} }
.why-i{background:var(--navy); padding:34px 30px; transition:background .3s}
.why-i:hover{background:var(--navy-dk)}
.why-i h3{font-size:1.1rem; margin-bottom:9px; color:var(--paper)}
.why-i p{font-size:14.8px; line-height:1.6; color:#B8C4D4}

/* estimates */
.ests{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:900px){ .ests{grid-template-columns:1fr} }
.est{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:34px 28px 30px;
  display:flex; flex-direction:column; position:relative; transition:transform .28s, border-color .28s, box-shadow .28s;
}
.est:hover{transform:translateY(-4px); border-color:var(--navy); box-shadow:0 18px 40px -22px rgba(16,27,41,.4)}
.est.feat{border-color:var(--gold); border-width:2px}
.est .tag{
  position:absolute; top:-11px; left:26px; background:var(--gold); color:var(--navy);
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; padding:4px 11px; border-radius:2px;
}
.est .n{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase}
.est h3{margin:14px 0 11px}
.est p{font-size:15px; line-height:1.6; color:#3B4756; flex:1}
.est .btn{margin-top:24px; width:100%}

/* ---------- form ---------- */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start}
@media(max-width:980px){ .contact-grid{grid-template-columns:1fr; gap:44px} }
form{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:38px 34px}
.tint form{background:var(--paper)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:560px){ .row2{grid-template-columns:1fr} }
.field{margin-bottom:20px}
.field label{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.field input,.field textarea{
  width:100%; font-family:var(--body); font-size:16px; color:var(--ink); background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--r); padding:13px 14px; transition:border-color .22s, background .22s; outline:none;
}
.field input:focus,.field textarea:focus{border-color:var(--navy); background:#fff}
.field textarea{resize:vertical; min-height:104px; line-height:1.55}
.hp{position:absolute; left:-9999px; opacity:0}
form .btn{width:100%; margin-top:4px}
.fine{margin-top:16px; font-size:13px; line-height:1.6; color:var(--muted)}
.info{margin-top:30px; border-top:1px solid var(--line)}
.info-r{display:flex; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); align-items:baseline}
.info-r .k{font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); width:104px; flex:none}
.info-r .v{font-size:15.5px; color:#3B4756; line-height:1.5}
.info-r .v a{color:var(--navy); text-decoration-color:var(--line)}
.info-r .v a:hover{color:var(--gold-ink)}

/* ---------- footer ---------- */
footer{background:var(--ink); color:#A9B7C8; padding:60px 0 30px}
.f-top{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:38px; border-bottom:1px solid var(--line-lt)}
@media(max-width:820px){ .f-top{grid-template-columns:1fr; gap:30px} }
.f-top .logo b{color:var(--paper)}
.f-top .logo span{color:#8FA0B4}
.f-h{font-family:var(--mono); font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; color:#8FA0B4; margin-bottom:14px}
.f-l{display:flex; flex-direction:column; gap:9px}
.f-l a,.f-l span{text-decoration:none; font-size:15px; color:#A9B7C8; transition:color .22s}
.f-l a:hover{color:var(--gold-lt)}
.f-bot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.07em; color:#8493A6}
.f-bot a{text-decoration:none} .f-bot a:hover{color:var(--gold-lt)}

/* ---------- legal pages ---------- */
.legal{max-width:76ch; margin:0 auto; padding:76px 32px 96px}
.legal h1{font-size:clamp(2.1rem,4.4vw,3.1rem); margin-bottom:14px}
.legal .meta{font-family:var(--mono); font-size:12.5px; color:var(--muted); letter-spacing:.05em; margin-bottom:44px; padding-bottom:24px; border-bottom:1px solid var(--line)}
.legal h2{font-size:1.32rem; margin:44px 0 14px; letter-spacing:-.015em}
.legal h3{font-size:1.06rem; margin:28px 0 10px; color:var(--navy)}
.legal p{margin:0 0 15px; color:#3B4756}
.legal ul{margin:0 0 18px; padding-left:22px; color:#3B4756}
.legal li{margin-bottom:7px}
.legal a{color:var(--navy)}
.legal .box{background:var(--paper-2); border-left:3px solid var(--gold); padding:20px 22px; margin:0 0 20px; border-radius:0 var(--r) var(--r) 0}
.legal .box p:last-child{margin-bottom:0}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(20px); transition:opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

/* small screens */
@media(max-width:600px){
  .wrap{padding:0 22px}
  .tel{display:none}
  .nav-quote{display:none}
  .nav-call{display:inline-flex}
  nav .btn{padding:11px 16px; font-size:14px; white-space:nowrap}
  .logo span{display:none}
  .logo-mark{height:28px}
  .logo{gap:9px}
  h1{font-size:clamp(2.2rem,8.4vw,4.9rem)}
  .bar{height:66px}
  .logo b{font-size:1.1rem}
  .route{padding:26px 22px}
  form{padding:30px 24px}
  .svc{padding:32px 24px}
  .est{padding:30px 22px 26px}
  .stat{padding:28px 18px}
  .info-r .k{width:88px}
  .legal{padding:52px 22px 72px}
  .hero-cta .btn{flex:1 1 100%}
}