/* ============================================================
   UZBEK TRUCK WORLD — GLOBAL STYLESHEET
   This one file is shared by every page (index, services, about,
   contact, privacy). Sections below, in order:

     1.  RESET & BASE TYPOGRAPHY
     2.  LAYOUT HELPERS (.wrap container, focus outline)
     3.  ROAD-LINE DIVIDER (decorative strip under header)
     4.  HEADER & NAVIGATION
     5.  BUTTONS (.btn variants)
     6.  HERO (home page top banner)
     7.  SECTION HEADINGS (shared heading+tag row pattern)
     8.  SERVICES "MANIFEST" LIST (home + services page)
     9.  CTA BAND (dark call-to-action strip)
     10. ABOUT PAGE (bio grid, credentials box, values grid)
     11. CONTACT PAGE (form, SMS consent block, status messages)
     12. FOOTER
     13. PRIVACY / LEGAL PAGE LAYOUT (table of contents + article)

   NOTE ON LOGO: there is no image logo wired in yet — the header
   currently renders a text "wordmark" (see HEADER section below).
   Once the final logo file is ready, drop it into
   /assets/img/logo.svg (or .png) and swap the markup in each
   page's <header> — search every HTML file for "LOGO PLACEHOLDER".
   ============================================================ */

/* ---------- 1. RESET & BASE TYPOGRAPHY ---------- */
:root{
  --navy:#132132;
  --navy-2:#1E3049;
  --asphalt:#3E4652;
  --paper:#EDE8DC;
  --paper-2:#E2DBCB;
  --ink:#191712;
  --orange:#CC6A20;
  --orange-dark:#A9531A;
  --green:#33684C;
  --line:#C9C0AC;
  --white:#FBF9F4;
  --radius:2px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Work Sans", -apple-system, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Oswald", sans-serif;
  font-weight:600;
  letter-spacing:.2px;
  margin:0;
  color:var(--navy);
}
a{color:inherit;}
img{max-width:100%;display:block;}

/* ---------- 2. LAYOUT HELPERS ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}

/* ---------- 3. ROAD-LINE DIVIDER ---------- */
/* Thin decorative strip under the header, styled like a dashed
   highway center line. Purely cosmetic. */
.road-rule{
  height:10px;
  background:var(--asphalt);
  background-image:repeating-linear-gradient(
    to right, transparent 0, transparent 18px,
    #E8DFC8 18px, #E8DFC8 40px
  );
  background-position:center;
  background-size:auto 3px;
  background-repeat:repeat-x;
}

/* ---------- 4. HEADER & NAVIGATION ---------- */
header{
  background:var(--navy);
  color:var(--white);
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:4px solid var(--orange);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  gap:20px;
}
/* LOGO PLACEHOLDER: text wordmark until the final logo file is
   ready. Replace the <svg> mark + text inside with an <img> tag
   pointing at /assets/img/logo.svg when available. */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--white);
}
.brand-mark{width:38px;height:38px;flex:none;}
.brand-text{
  font-family:"Oswald",sans-serif;
  font-size:19px;
  font-weight:600;
  line-height:1.15;
}
.brand-text small{
  display:block;
  font-family:"Work Sans",sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:.06em;
  color:#C9B48C;
}
nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;}
nav a{
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  color:#DCD6C6;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:border-color .15s, color .15s;
}
nav a:hover, nav a.active{
  color:var(--white);
  border-bottom-color:var(--orange);
}
.nav-toggle{
  display:none;
  background:none;
  border:1px solid #4A5A70;
  color:var(--white);
  padding:8px 12px;
  font-size:14px;
  font-family:"Work Sans",sans-serif;
  cursor:pointer;
}
@media (max-width:760px){
  nav{display:none;width:100%;order:3;}
  nav.open{display:block;}
  nav ul{flex-direction:column;gap:0;}
  nav a{display:block;padding:12px 0;border-bottom:1px solid #2A3D57;}
  .nav-toggle{display:block;}
  .nav-row{flex-wrap:wrap;}
}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-block;
  padding:14px 26px;
  font-family:"Work Sans",sans-serif;
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  border-radius:var(--radius);
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .12s ease, background .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--orange);color:var(--white);}
.btn-primary:hover{background:var(--orange-dark);}
.btn-outline{background:transparent;border-color:#5D6E85;color:var(--white);}
.btn-outline:hover{border-color:var(--white);}

/* ---------- 6. HERO (home page) ---------- */
.hero{
  background:var(--navy);
  color:var(--white);
  position:relative;
  overflow:hidden;
  padding:76px 0 90px;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:48px;
  align-items:end;
  position:relative;
  z-index:2;
}
.hero-eyebrow{color:var(--orange);font-weight:600;font-size:14px;letter-spacing:.03em;margin-bottom:18px;}
.hero h1{color:var(--white);font-size:clamp(36px,5.2vw,60px);line-height:1.04;max-width:14ch;}
.hero p.lede{margin-top:22px;font-size:18px;color:#D9D3C2;max-width:46ch;}
.hero-actions{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap;}
.hero-stats{border-left:2px solid #3A4C63;padding-left:28px;display:flex;flex-direction:column;gap:22px;}
.hero-stat b{display:block;font-family:"Oswald",sans-serif;font-size:34px;color:var(--white);font-weight:600;}
.hero-stat span{font-size:13px;color:#AEB9C8;}
.highway-graphic{
  position:absolute;left:0;right:0;bottom:0;height:56px;
  background:repeating-linear-gradient(to right, transparent 0, transparent 26px, #45556E 26px, #45556E 58px);
  opacity:.5;
}
@media (max-width:760px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero-stats{border-left:none;padding-left:0;flex-direction:row;flex-wrap:wrap;gap:28px;}
}

/* ---------- 7. SECTION HEADINGS ---------- */
/* Shared "big heading + short tag on the right" pattern used at
   the top of most content sections. */
section{padding:74px 0;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;margin-bottom:40px;border-bottom:2px solid var(--line);padding-bottom:18px;
}
.section-head h2{font-size:clamp(26px,3.4vw,36px);}
.section-tag{font-size:13px;color:var(--asphalt);font-weight:500;max-width:34ch;text-align:right;}
@media (max-width:700px){
  .section-head{flex-direction:column;align-items:flex-start;}
  .section-tag{text-align:left;}
}

/* ---------- 8. SERVICES "MANIFEST" LIST ---------- */
/* Styled like a shipping manifest / bill of lading rather than
   generic cards — used on index.html (teaser) and services.html
   (full list). */
.manifest{border-top:2px solid var(--navy);}
.manifest-row{
  display:grid;grid-template-columns:120px 1fr 1.2fr;gap:28px;
  padding:26px 0;border-bottom:1px solid var(--line);align-items:start;
}
.manifest-row .code{
  font-family:"Oswald",sans-serif;font-size:14px;letter-spacing:.05em;
  color:var(--orange-dark);font-weight:600;padding-top:4px;
}
.manifest-row h3{font-size:21px;margin-bottom:8px;}
.manifest-row p{margin:0;color:#4A4638;font-size:15px;}
@media (max-width:700px){.manifest-row{grid-template-columns:1fr;gap:6px;}}

/* ---------- 9. CTA BAND ---------- */
.cta-band{background:var(--navy-2);color:var(--white);padding:56px 0;}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.cta-band h3{color:var(--white);font-size:26px;max-width:22ch;}

/* ---------- 10. ABOUT PAGE ---------- */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;}
.about-grid p{color:#3E3A2E;font-size:16px;max-width:56ch;}
.about-grid p + p{margin-top:16px;}
.credentials{background:var(--white);border:1px solid var(--line);padding:28px;}
.credentials h4{font-size:15px;margin-bottom:16px;}
.credentials dl{margin:0;}
.credentials .row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;}
.credentials .row:last-child{border-bottom:none;}
.credentials dt{color:#6B6656;}
.credentials dd{margin:0;font-weight:600;color:var(--navy);}
.note-box{margin-top:18px;font-size:12.5px;color:#786F58;border-left:3px solid var(--orange);padding:10px 14px;background:#F5F0E4;}
.values{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.values div{background:var(--white);padding:28px;}
.values h4{font-size:17px;margin-bottom:10px;}
.values p{margin:0;font-size:14px;color:#4A4638;}
@media (max-width:760px){
  .about-grid{grid-template-columns:1fr;}
  .values{grid-template-columns:1fr;}
}

/* ---------- 11. CONTACT PAGE ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start;}
.contact-info h3{font-size:20px;margin-bottom:14px;}
.contact-info p{color:#4A4638;font-size:15px;margin:0 0 22px;}
.contact-info .line{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:14.5px;}
.contact-info .line:last-of-type{border-bottom:1px solid var(--line);}
.contact-info .line b{display:block;color:var(--navy);font-weight:600;}
.contact-info .line span{color:#6B6656;}

form.card{background:var(--white);border:1px solid var(--line);padding:34px;}
.field{margin-bottom:20px;}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:7px;}
.field .opt{font-weight:400;color:#8A8267;}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field textarea,
.field select{
  width:100%;padding:12px 13px;font-family:"Work Sans",sans-serif;font-size:15px;
  border:1px solid #B9B096;background:var(--paper);color:var(--ink);border-radius:var(--radius);
}
.field textarea{resize:vertical;min-height:110px;}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--orange);background:var(--white);}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:520px){.two-col{grid-template-columns:1fr;}}

/* Standalone SMS consent block — deliberately separated visually
   from every other field so it never reads as bundled consent. */
.sms-consent{
  margin:26px 0 24px;padding:18px 18px 18px 16px;
  background:#F5F0E4;border:1px solid var(--line);border-left:4px solid var(--orange);
}
.sms-consent .check-row{display:flex;gap:12px;align-items:flex-start;}
.sms-consent input[type=checkbox]{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--orange-dark);}
.sms-consent label{font-size:14px;font-weight:600;color:var(--navy);line-height:1.45;}
.sms-consent .fine{margin:10px 0 0 30px;font-size:12.5px;color:#6B6656;line-height:1.55;}
.sms-consent .fine a{color:var(--orange-dark);text-decoration:underline;}

.form-note{font-size:12px;color:#8A8267;margin-top:4px;}
.form-status{display:none;margin-top:18px;padding:14px 16px;border:1px solid var(--green);background:#E7EFE9;color:#234B36;font-size:14px;}
.form-status.show{display:block;}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr;}}

/* ---------- 12. FOOTER ---------- */
footer{background:var(--navy);color:#B9C1CE;padding:52px 0 26px;font-size:13.5px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:34px;border-bottom:1px solid #2A3D57;}
footer h5{color:var(--white);font-family:"Oswald",sans-serif;font-size:14px;letter-spacing:.04em;margin-bottom:14px;font-weight:500;}
footer ul{list-style:none;margin:0;padding:0;}
footer li{margin-bottom:9px;}
footer a{color:#B9C1CE;text-decoration:none;}
footer a:hover{color:var(--white);text-decoration:underline;}
.footer-bottom{padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:#7E8CA1;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- 13. PRIVACY / LEGAL PAGE LAYOUT ---------- */
.legal-hero{background:var(--paper-2);padding:52px 0 36px;border-bottom:1px solid var(--line);}
.legal-hero h1{font-size:clamp(28px,4vw,40px);}
.legal-hero p{color:#4A4638;margin-top:10px;font-size:14.5px;}
.legal-body{display:grid;grid-template-columns:230px 1fr;gap:52px;padding:52px 0 90px;}
.legal-toc{position:sticky;top:96px;align-self:start;}
.legal-toc h5{font-family:"Oswald",sans-serif;font-size:13px;letter-spacing:.03em;color:var(--asphalt);margin-bottom:12px;}
.legal-toc ul{list-style:none;margin:0;padding:0;}
.legal-toc li{margin-bottom:10px;}
.legal-toc a{font-size:13.5px;text-decoration:none;color:#5C5748;border-left:2px solid transparent;padding-left:10px;display:block;}
.legal-toc a:hover{color:var(--orange-dark);border-left-color:var(--orange);}
.legal-content h2{font-size:20px;margin-top:44px;margin-bottom:14px;padding-top:10px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{color:#3E3A2E;font-size:15px;margin:0 0 14px;max-width:70ch;}
.legal-content ul{color:#3E3A2E;font-size:15px;max-width:70ch;padding-left:20px;margin:0 0 14px;}
.legal-content li{margin-bottom:6px;}
.legal-callout{background:#F5F0E4;border:1px solid var(--line);border-left:4px solid var(--green);padding:18px 20px;margin:18px 0 24px;}
.legal-callout p{margin:0;font-size:14.5px;}
.legal-callout p + p{margin-top:10px;}
@media (max-width:820px){
  .legal-body{grid-template-columns:1fr;}
  .legal-toc{position:static;}
}