/* ============================================================
   Takshak Speed Couriers — public site
   Palette: ink navy / marigold / paper / slate
   Type: Archivo (display) · Inter (body) · IBM Plex Mono (waybill)
   ============================================================ */
:root{
  --ink:#101d2e;
  --ink-2:#1a2c44;
  --marigold:#f7a600;
  --marigold-deep:#d98f00;
  --paper:#faf9f6;
  --white:#ffffff;
  --slate:#45505f;
  --line:#e5e4df;
  --green:#1e9e6a;
  --red:#c0392b;
  --radius:10px;
  --shadow:0 10px 30px rgba(16,29,46,.08);
  --font-display:"Archivo",sans-serif;
  --font-body:"Inter",sans-serif;
  --font-mono:"IBM Plex Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--slate);background:var(--paper);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.15;font-weight:800;letter-spacing:-.01em}
.container{width:min(1160px,92%);margin-inline:auto}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--marigold-deep);display:block;margin-bottom:.9rem}
.section{padding:5.5rem 0}
.section-title{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:1rem}

/* dashed route divider — the signature motif */
.route-line{position:relative;height:26px;margin:0 auto;width:min(1160px,92%);}
.route-line::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid rgba(16,29,46,.22)}
.route-line::after{content:"";position:absolute;right:0;top:50%;width:11px;height:11px;border-radius:50%;background:var(--marigold);transform:translateY(-50%)}
.route-line span{position:absolute;left:0;top:50%;width:11px;height:11px;border-radius:50%;background:var(--ink);transform:translateY(-50%)}

/* ---------- header ---------- */
.topbar{background:var(--ink);color:#c8d2e0;font-size:.8rem;padding:.45rem 0}
.topbar .container{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.topbar a{color:#fff}
.topbar .mono{font-family:var(--font-mono)}
header.site{position:sticky;top:0;z-index:50;background:rgba(250,249,246,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.logo{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display)}
.logo .mark{width:42px;height:42px;border-radius:9px;background:var(--ink);display:grid;place-items:center;color:var(--marigold);font-weight:900;font-size:1.25rem;letter-spacing:0}
.logo .word{font-weight:900;color:var(--ink);font-size:1.12rem;line-height:1.05;letter-spacing:-.01em}
.logo .word small{display:block;font-family:var(--font-mono);font-weight:500;font-size:.62rem;letter-spacing:.26em;color:var(--marigold-deep);text-transform:uppercase}
.nav ul{display:flex;gap:2rem;list-style:none;align-items:center}
.nav ul a{font-weight:600;font-size:.92rem;color:var(--ink);position:relative;padding:.3rem 0}
.nav ul a.active::after,.nav ul a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-4px;border-bottom:2px solid var(--marigold)}
.btn{display:inline-block;font-weight:700;font-size:.92rem;padding:.72rem 1.5rem;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:.18s;font-family:var(--font-body)}
.btn-solid{background:var(--marigold);color:var(--ink); padding: 5px 10px !important; }
.btn-solid:hover{background:var(--marigold-deep); border-bottom:0px !important;}
.btn-solid:hover::after{ content:none; border-bottom:0px !important;}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.nav-toggle{display:none;background:none;border:0;font-size:1.6rem;color:var(--ink);cursor:pointer}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:#c8d2e0;padding:5rem 0 6.5rem;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(700px 340px at 85% -10%,rgba(247,166,0,.16),transparent 60%),
  repeating-linear-gradient(90deg,transparent 0 118px,rgba(255,255,255,.025) 118px 120px)}
.hero .container{position:relative}
.hero h1{color:#fff;font-size:clamp(2.1rem,5vw,3.6rem);font-weight:900;max-width:25ch}
.hero h1 em{font-style:normal;color:var(--marigold)}
.hero p.lede{margin:1.2rem 0 2.4rem;max-width:72ch;font-size:1.05rem}

/* waybill tracking bar — signature element */
.waybill{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem 1.5rem;max-width:720px}
.waybill .wb-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);border-bottom:1px dashed var(--line);padding-bottom:.7rem;margin-bottom:1rem}
.waybill .wb-head b{color:var(--ink)}
.waybill form{display:flex;gap:.8rem}
.waybill input{flex:1;font-family:var(--font-mono);font-size:1rem;letter-spacing:.06em;padding:.85rem 1rem;border:2px solid var(--line);border-radius:8px;color:var(--ink);text-transform:uppercase;min-width:0}
.waybill input:focus{outline:none;border-color:var(--marigold)}
.wb-route{display:flex;align-items:center;gap:.6rem;margin-top:1rem;font-family:var(--font-mono);font-size:.72rem;color:var(--slate)}
.wb-route .dash{flex:1;border-top:2px dashed var(--line);position:relative}
.wb-route .dash::after{content:"▸";position:absolute;right:-4px;top:-11px;color:var(--marigold)}

/* ---------- stats strip ---------- */
.stats{background:var(--marigold)}
.stats .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.stats .cell{padding:1.6rem 1rem;text-align:center;border-left:1px dashed rgba(16,29,46,.28)}
.stats .cell:first-child{border-left:0}
.stats b{display:block;font-family:var(--font-display);font-weight:900;font-size:1.7rem;color:var(--ink)}
.stats span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- services ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem;margin-top:2.5rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .thumb{aspect-ratio:16/8;background:var(--ink-2);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .thumb .ph{width:100%;height:100%;display:grid;place-items:center;color:var(--marigold);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em}
.card .body{padding:1.4rem;flex:1;display:flex;flex-direction:column}
.card h3{font-size:1.12rem;margin-bottom:.6rem}
.card .desc{font-size:.92rem;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.card .desc p{margin-bottom:.5rem}
.card .foot{margin-top:1.1rem;padding-top:1rem;border-top:1px dashed var(--line)}
.card .foot a{font-weight:700;color:var(--ink);font-size:.88rem}
.card .foot a:hover{color:var(--marigold-deep)}

/* ---------- why us ---------- */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-top:2.5rem}
.why .item{padding-left:1.1rem;border-left:3px solid var(--marigold)}
.why .item h3{font-size:1.02rem;margin-bottom:.4rem}
.why .item p{font-size:.9rem}

/* ---------- content pages ---------- */
.page-head{background:var(--ink);color:#c8d2e0;padding:3.6rem 0}
.page-head h1{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem)}
.prose{max-width:760px}
.prose p{margin-bottom:1rem}
.prose strong{color:var(--ink)}
.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem}
.panel h3{margin-bottom:1rem;font-size:1.05rem}

/* ---------- forms ---------- */
.form-grid{display:grid;gap:1rem}
.form-grid label{font-weight:600;font-size:.86rem;color:var(--ink);display:block;margin-bottom:.3rem}
.form-grid input,.form-grid textarea,.form-grid select{width:100%;padding:.75rem .9rem;border:2px solid var(--line);border-radius:8px;font-family:var(--font-body);font-size:.95rem;color:var(--ink);background:#fff}
.form-grid input:focus,.form-grid textarea:focus{outline:none;border-color:var(--marigold)}
.form-msg{display:none;padding:.85rem 1rem;border-radius:8px;font-size:.9rem;margin-top:1rem}
.form-msg.ok{display:block;background:#e7f6ef;color:var(--green)}
.form-msg.err{display:block;background:#fdeceb;color:var(--red)}

/* ---------- tracking result ---------- */
.track-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2rem}
.track-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.track-card .head{padding:.9rem 1.3rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.track-card .head.book{background:var(--ink)}
.track-card .head.deli{background:var(--marigold-deep)}
.track-card table{width:100%;border-collapse:collapse;font-size:.9rem}
.track-card td{padding:.65rem 1.3rem;border-top:1px solid var(--line);vertical-align:top}
.track-card td:first-child{font-weight:600;color:var(--ink);width:44%}
.track-card td.mono{font-family:var(--font-mono);text-transform:uppercase}
.chip{display:inline-block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;padding:.28rem .7rem;border-radius:99px;background:#eef1f5;color:var(--ink)}
.chip.delivered{background:#e7f6ef;color:var(--green)}
.chip.transit{background:#fdf3dd;color:var(--marigold-deep)}
.chip.problem{background:#fdeceb;color:var(--red)}
.history{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-top:1.5rem;padding:1.6rem}
.history h3{font-size:1rem;margin-bottom:1rem}
.history .entries p{position:relative;padding:.35rem 0 .35rem 1.6rem;font-size:.9rem;margin:0}
.history .entries p::before{content:"";position:absolute;left:.35rem;top:.95rem;width:8px;height:8px;border-radius:50%;background:var(--marigold)}
.history .entries p::after{content:"";position:absolute;left:.67rem;top:1.35rem;bottom:-.6rem;border-left:2px dashed var(--line)}
.history .entries p:last-child::after{display:none}
.notfound{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:2.4rem;text-align:center;margin-top:2rem}
.notfound b{font-family:var(--font-mono);color:var(--ink)}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#9fb0c6;margin-top:5rem}
footer .grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;padding:3.6rem 0 2.4rem}
footer h4{color:#fff;font-size:.95rem;margin-bottom:1rem}
footer a:hover{color:var(--marigold)}
footer ul{list-style:none}
footer ul li{margin-bottom:.55rem;font-size:.9rem}
footer .fine{border-top:1px dashed rgba(255,255,255,.14);padding:1.2rem 0;font-size:.78rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-family:var(--font-mono)}

/* ---------- print invoice ---------- */
.invoice{max-width:820px;margin:2rem auto;background:#fff;border:1px solid var(--line);padding:2.2rem}
@media print{.no-print{display:none}body{background:#fff}.invoice{border:0;margin:0}}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;gap:0;border-bottom:1px solid var(--line);padding:.5rem 0}
  .nav ul.open{display:flex}
  .nav ul li{width:100%;text-align:center;padding:.7rem 0}
  .nav-toggle{display:block}
  .two-col,.track-grid{grid-template-columns:1fr}
  .waybill form{flex-direction:column}
  footer .grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}