/* ============================================================
   LOGITAP FREIGHT SERVICES — design tokens
   Palette pulled from the mark: cargo red, oxblood gradient tail,
   ink navy wordmark, pale cold-white backing.
   Display: Big Shoulders Display — cut for dockyard/rail signage.
   Body: Inter. Data/codes: JetBrains Mono, run like waybill refs.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Caveat:wght@600&display=swap');

:root{
  --paper:      #EEF1F6;
  --paper-2:    #E3E9F1;
  --panel:      #FFFFFF;
  --ink:        #0F1B33;
  --ink-soft:   #45516B;
  --red:        #C21E2C;
  --red-bright: #E63946;
  --red-deep:   #6E0F16;
  --gold:       #B4872E;
  --line:       rgba(15,27,51,0.14);
  --line-strong:rgba(15,27,51,0.28);

  --grad-wing: linear-gradient(115deg, var(--red-bright) 0%, var(--red) 45%, var(--red-deep) 100%);

  --f-display: 'Big Shoulders Display', sans-serif;
  --f-body: 'Inter', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;
  --f-script: 'Caveat', cursive;

  --container: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:800;
  letter-spacing:0.01em;
  line-height:0.98;
  margin:0;
  text-transform:uppercase;
  color:var(--ink);
}
p{margin:0;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 28px;}

/* ---------- focus / motion ---------- */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
}

/* ---------- eyebrow / manifest tab labels ---------- */
.tab-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--red-deep);
  border:1px solid var(--line-strong);
  border-left:4px solid var(--red);
  background:var(--panel);
  padding:6px 12px;
}

/* ============================================================
   HEADER / NAV — manifest header bar
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line-strong);
}
.header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 28px;
  max-width:var(--container);
  margin:0 auto;
  gap:20px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:52px;width:auto;}
.brand-word{display:flex;flex-direction:column;line-height:1;}
.brand-word strong{font-family:var(--f-display);font-size:22px;text-transform:uppercase;letter-spacing:0.02em;}
.brand-word span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.16em;color:var(--ink-soft);text-transform:uppercase;margin-top:3px;}

nav.main-nav ul{display:flex;gap:2px;}
nav.main-nav a{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:10px 14px;
  border-bottom:2px solid transparent;
  color:var(--ink-soft);
}
nav.main-nav a:hover{color:var(--red-deep);}
nav.main-nav a.active{color:var(--ink);border-bottom-color:var(--red);}

.nav-cta{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:var(--ink);
  color:var(--paper);
  padding:11px 18px;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--red-deep);}

.nav-toggle{display:none;}

@media (max-width:880px){
  nav.main-nav{position:fixed;inset:64px 0 0 0;background:var(--paper);transform:translateX(100%);transition:transform .35s ease;overflow-y:auto;border-top:1px solid var(--line);}
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav ul{flex-direction:column;padding:18px 28px;gap:0;}
  nav.main-nav a{padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;}
  .nav-cta{display:none;}
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:40px;height:40px;background:none;border:1px solid var(--line-strong);
  }
  .nav-toggle span{height:2px;background:var(--ink);width:20px;margin:0 auto;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding:64px 0 84px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:48px;
  align-items:center;
}
.hero h1{font-size:clamp(40px,6.2vw,78px);}
.hero h1 em{font-style:normal;color:var(--red);}
.hero .script{
  font-family:var(--f-script);
  font-size:clamp(20px,2.4vw,28px);
  color:var(--ink-soft);
  margin-top:10px;
  display:block;
}
.hero .lede{
  margin-top:20px;
  font-size:17.5px;
  color:var(--ink-soft);
  max-width:52ch;
}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}

.btn{
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:14px 24px;
  display:inline-block;
  border:1px solid var(--ink);
}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff;}
.btn-primary:hover{background:var(--red-deep);border-color:var(--red-deep);}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}

.hero-panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line-strong);
  padding:26px;
}
.hero-panel::before{
  content:"";
  position:absolute;top:10px;left:10px;right:-10px;bottom:-10px;
  border:1px solid var(--line-strong);
  z-index:-1;
}
.hero-panel-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--line-strong);padding-bottom:12px;margin-bottom:16px;}
.hero-panel-top span{font-family:var(--f-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);}
.hero-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.hero-stat b{font-family:var(--f-display);font-size:34px;display:block;color:var(--red);}
.hero-stat span{font-family:var(--f-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);}

@media (max-width:880px){
  .hero .wrap{grid-template-columns:1fr;}
}

/* ============================================================
   SECTION scaffolding
   ============================================================ */
section{padding:76px 0;}
.section-alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-ink{background:var(--ink);color:var(--paper);}
.section-ink h1,.section-ink h2,.section-ink h3{color:var(--paper);}
.section-head{max-width:640px;margin-bottom:44px;}
.section-head h2{font-size:clamp(30px,4.2vw,46px);margin-top:10px;}
.section-head p{color:var(--ink-soft);margin-top:14px;font-size:16.5px;}
.section-ink .section-head p{color:#B9C2D6;}

/* ---------- page header (non-home pages) ---------- */
.page-header{padding:56px 0 46px;border-bottom:1px solid var(--line);}
.page-header h1{font-size:clamp(38px,6vw,64px);}
.page-header .lede{color:var(--ink-soft);margin-top:16px;max-width:60ch;font-size:17px;}
.breadcrumb{font-family:var(--f-mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;display:flex;gap:8px;align-items:center;}
.breadcrumb .sep{color:var(--line-strong);}
.breadcrumb .cur{color:var(--red-deep);}

/* ============================================================
   Grids / Cards
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--panel);
  border:1px solid var(--line-strong);
  padding:28px 24px;
  position:relative;
}
.card .num{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--red-deep);
  letter-spacing:0.08em;
  display:block;
  margin-bottom:14px;
}
.card h3{font-size:23px;margin-bottom:10px;}
.card p{color:var(--ink-soft);font-size:15px;}

.value-card{border-top:3px solid var(--red);padding-top:22px;}
.value-card h3{font-size:19px;text-transform:none;font-family:var(--f-body);font-weight:700;}

/* ---------- service block (image-free, icon-mark style) ---------- */
.service-block{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:34px;
  padding:38px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.service-block:first-of-type{border-top:1px solid var(--line);}
.service-mark{
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--ink-soft);
}
.service-mark .code{
  font-family:var(--f-display);
  font-size:46px;
  color:var(--paper-2);
  -webkit-text-stroke:1.5px var(--ink);
  color:transparent;
  display:block;
  line-height:1;
  margin-bottom:8px;
}
.service-body h3{font-size:28px;margin-bottom:12px;}
.service-body p{color:var(--ink-soft);font-size:16px;max-width:62ch;}
.service-body .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.service-body .tags span{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.05em;text-transform:uppercase;
  border:1px solid var(--line-strong);padding:5px 10px;color:var(--ink-soft);
}
@media (max-width:700px){.service-block{grid-template-columns:1fr;gap:14px;}}

/* ============================================================
   SIGNATURE — the route track (network of branches)
   ============================================================ */
.route{
  position:relative;
  padding-top:20px;
}
.route-track{
  position:relative;
  display:flex;
  justify-content:space-between;
  padding-top:0;
}
.route-track::before{
  content:"";
  position:absolute;
  top:11px;left:0;right:0;
  height:2px;
  background:repeating-linear-gradient(90deg,var(--line-strong) 0 10px,transparent 10px 18px);
}
.route-track::after{
  content:"";
  position:absolute;
  top:10px;left:0;
  height:4px;
  width:100%;
  background:var(--grad-wing);
  clip-path:polygon(0 0,86% 0,100% 50%,86% 100%,0 100%);
  opacity:0.9;
}
.stop{position:relative;flex:1;text-align:left;padding-right:12px;}
.stop .dot{
  display:block;
  width:22px;height:22px;border-radius:50%;
  background:var(--panel);
  border:3px solid var(--red);
  margin-bottom:16px;
  position:relative;z-index:2;
}
.stop.hq .dot{background:var(--red);}
.stop b{font-family:var(--f-display);font-size:20px;display:block;text-transform:uppercase;}
.stop .code{font-family:var(--f-mono);font-size:11px;color:var(--red-deep);letter-spacing:0.1em;}
.stop p{color:var(--ink-soft);font-size:13.5px;margin-top:8px;}
@media (max-width:900px){
  .route-track{flex-direction:column;gap:34px;}
  .route-track::before,.route-track::after{top:0;bottom:0;left:11px;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--line-strong) 0 10px,transparent 10px 18px);}
  .route-track::after{clip-path:polygon(0 0,100% 0,100% 86%,50% 100%,0 86%);width:4px;}
  .stop{padding-left:44px;padding-right:0;}
  .stop .dot{position:absolute;left:0;top:0;margin-bottom:0;}
}

/* ============================================================
   STAMP — signature trust mark
   ============================================================ */
.stamp{
  width:150px;height:150px;
  border-radius:50%;
  border:3px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-11deg);
  flex-shrink:0;
  position:relative;
  color:var(--gold);
  opacity:0.9;
}
.stamp::before{
  content:"";
  position:absolute;inset:8px;
  border:1px solid var(--gold);
  border-radius:50%;
}
.stamp-text{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.7;
}
.stamp-text strong{display:block;font-size:14px;letter-spacing:0.08em;}

/* ============================================================
   Why-choose ticks
   ============================================================ */
.tick-list{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;}
.tick-list li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:15.5px;color:var(--ink-soft);
  padding:14px 0;border-bottom:1px solid var(--line);
}
.tick-list li::before{
  content:"";
  flex-shrink:0;margin-top:6px;
  width:9px;height:9px;background:var(--red);
  transform:rotate(45deg);
}
@media (max-width:620px){.tick-list{grid-template-columns:1fr;}}

/* ============================================================
   Industry chips
   ============================================================ */
.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.industry-card{
  background:var(--panel);border:1px solid var(--line-strong);
  padding:30px 22px;min-height:150px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.industry-card .tag{font-family:var(--f-mono);font-size:11px;color:var(--red-deep);letter-spacing:0.08em;}
.industry-card h3{font-size:22px;margin-top:22px;}
@media (max-width:900px){.industry-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.industry-grid{grid-template-columns:1fr;}}

/* ============================================================
   Offices / contact
   ============================================================ */
.office-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.office-card{
  background:var(--panel);border:1px solid var(--line-strong);
  padding:26px 22px;
}
.office-card.hq{border-color:var(--red);border-width:2px;}
.office-card .badge{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:#fff;background:var(--red);padding:4px 9px;display:inline-block;margin-bottom:14px;
}
.office-card h3{font-size:20px;margin-bottom:10px;}
.office-card address{font-style:normal;color:var(--ink-soft);font-size:14.5px;line-height:1.65;}
.office-card .phones{margin-top:14px;font-family:var(--f-mono);font-size:13.5px;color:var(--ink);border-top:1px dashed var(--line-strong);padding-top:12px;}
.office-card .phones div{margin-bottom:4px;}
@media (max-width:900px){.office-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.office-grid{grid-template-columns:1fr;}}

/* ---------- contact form ---------- */
.contact-panel{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:var(--panel);border:1px solid var(--line-strong);
}
.contact-panel .form-side{padding:44px;}
.contact-panel .info-side{padding:44px;background:var(--ink);color:var(--paper);}
.field{margin-bottom:18px;}
.field label{font-family:var(--f-mono);font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:8px;}
.field input,.field select,.field textarea{
  width:100%;
  background:var(--paper);
  border:1px solid var(--line-strong);
  padding:12px 14px;
  font-family:var(--f-body);
  font-size:15px;
  color:var(--ink);
}
.field textarea{resize:vertical;min-height:100px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--red);outline-offset:0;border-color:var(--red);}
.info-side .row{border-bottom:1px solid rgba(255,255,255,0.14);padding:16px 0;}
.info-side .row:first-child{padding-top:0;}
.info-side .row span{font-family:var(--f-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#93A0BC;display:block;margin-bottom:6px;}
.info-side .row a, .info-side .row div{font-size:15.5px;}
@media (max-width:820px){.contact-panel{grid-template-columns:1fr;}}

/* ============================================================
   Testimonials / logos strip (why-choose page)
   ============================================================ */
.strip{display:flex;gap:0;border:1px solid var(--line-strong);}
.strip > div{flex:1;padding:24px 20px;border-right:1px solid var(--line-strong);text-align:center;}
.strip > div:last-child{border-right:none;}
.strip b{font-family:var(--f-display);font-size:30px;display:block;color:var(--red);}
.strip span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);}
@media (max-width:700px){.strip{flex-wrap:wrap;}.strip>div{flex:1 1 50%;border-bottom:1px solid var(--line-strong);}}

/* ============================================================
   CTA banner
   ============================================================ */
.cta-band{
  background:var(--grad-wing);
  color:#fff;
  padding:56px 0;
}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;}
.cta-band h2{color:#fff;font-size:clamp(26px,4vw,40px);}
.cta-band p{color:rgba(255,255,255,0.85);margin-top:8px;}
.cta-band .btn-ghost{border-color:#fff;color:#fff;}
.cta-band .btn-ghost:hover{background:#fff;color:var(--red-deep);}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:#B9C2D6;padding:52px 0 26px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,0.12);}
.foot-brand img{height:44px;margin-bottom:14px;}
.foot-brand p{font-size:14px;color:#93A0BC;max-width:32ch;}
footer h4{color:#fff;font-family:var(--f-mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px;}
footer ul li{margin-bottom:10px;}
footer ul a{font-size:14.5px;color:#B9C2D6;}
footer ul a:hover{color:#fff;}
.foot-bottom{display:flex;justify-content:space-between;padding-top:22px;font-family:var(--f-mono);font-size:12px;color:#7887A6;flex-wrap:wrap;gap:10px;}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr;}}