/*
Theme Name: Axiom Transport
Theme URI: https://axiom-international.de
Author: Armin Razavi
Description: Massgeschneidertes WordPress-Theme fuer Axiom International — internationale Spedition in Bielefeld. Transport-only, deutschsprachig, ohne Page-Builder.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: axiom
Tags: business, logistics, one-column, custom-menu, translation-ready
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root{
  --navy:        #12242F;
  --navy-dk:     #0C1A23;
  --navy-lt:     #1B3341;
  --orange:      #E8641E;
  --orange-dk:   #C9500F;
  --ink:         #16232B;
  --body:        #5A6670;
  --body-lt:     #8A959D;
  --bg:          #FFFFFF;
  --bg-alt:      #F4F6F7;
  --line:        #E3E7EA;
  --line-dk:     #24404F;
  --on-dark:     #FFFFFF;
  --on-dark-mut: #A9B8C2;

  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --text:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1240px;
  --gut:  40px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--text);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--ink);text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Eyebrow: orange dash + spaced caps, used above every section heading. */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--text);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);margin-bottom:16px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);flex:none}
.eyebrow.is-plain{color:var(--ink)}
.eyebrow.is-plain::before{background:var(--orange)}

.h-display{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.005em;line-height:1.03;
}

/* Buttons ------------------------------------------------------------------ */
/* Buttons.
   line-height is pinned to 1 so the height comes from the padding, not from
   the body's 1.65 leading — otherwise a 14px label sits in a 51px block and
   reads as unfinished. Right padding is 2px tighter than the left because the
   arrow is optically lighter than a letter. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--text);font-size:14.5px;font-weight:600;line-height:1;
  letter-spacing:.005em;
  padding:15px 21px 15px 23px;min-height:46px;
  border-radius:3px;border:1px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease,
             box-shadow .16s ease,transform .16s ease;
  cursor:pointer;
}
.btn .arw{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;flex:none;
  transition:transform .16s ease;
}
.btn .arw svg{display:block}
.btn:hover .arw{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}

.btn--primary{
  background:var(--orange);color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.12), 0 6px 16px -8px rgba(232,100,30,.75);
}
.btn--primary:hover{
  background:var(--orange-dk);
  box-shadow:0 1px 0 rgba(0,0,0,.14), 0 9px 22px -8px rgba(232,100,30,.85);
}
.btn--outline{border-color:rgba(255,255,255,.42);color:#fff}
.btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn--ghost:hover{border-color:var(--ink)}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{background:var(--navy);position:relative;z-index:20}
.site-header .wrap{display:flex;align-items:center;gap:32px;height:70px}

.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand__mark{
  width:30px;height:24px;background:var(--orange);flex:none;
  clip-path:polygon(26% 0,100% 0,74% 100%,0 100%);
}
.brand__name{
  font-family:var(--display);font-weight:700;font-size:27px;letter-spacing:.02em;
  text-transform:uppercase;color:#fff;line-height:1;
}
.brand__sub{
  border-left:1px solid rgba(255,255,255,.28);padding-left:13px;margin-left:3px;
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-mut);line-height:1.35;max-width:88px;
}

.nav{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:30px}
/* The active marker is a border on the link itself, NOT ::after.
   The dropdown caret already owns ::after on the same element — sharing it
   meant an item that was both current and a parent inherited the caret's
   45deg rotation, and the underline collapsed into an orange diamond. */
.nav a{
  display:block;font-size:14.5px;font-weight:500;color:#D8E0E6;
  padding:6px 1px 7px;
  border-bottom:3px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.nav a:hover{color:#fff;border-bottom-color:rgba(232,100,30,.5)}
.nav .current-menu-item > a,
.nav .current-menu-parent > a,
.nav .current_page_item > a,
.nav .is-active > a{color:#fff;border-bottom-color:var(--orange)}

/* Dropdown caret: owns ::after, sits inline after the label. */
/* Dropdown caret — driven by WordPress' menu-item-has-children, so it appears
   only when a submenu actually exists. Previously it was a hand-added class
   that promised a menu which was never there. */
.nav .menu-item-has-children > a::after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:8px;
  vertical-align:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.75;
}

/* Submenus */
.nav li{position:relative}
.nav .sub-menu{
  position:absolute;top:100%;left:-14px;min-width:270px;z-index:40;
  background:var(--navy-lt);border-top:2px solid var(--orange);
  padding:6px 0;margin:0;list-style:none;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.65);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .sub-menu a{
  display:block;padding:10px 20px;font-size:14px;font-weight:500;
  color:#C8D4DC;border-bottom:0;white-space:normal;line-height:1.4;
}
.nav .sub-menu a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav .sub-menu .current-menu-item > a{color:#fff;border-bottom:0}
.header-cta{flex:none}

.nav-toggle{display:none}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;background:var(--navy);overflow:hidden}
.hero__media{position:absolute;inset:0 0 0 26%;background-size:cover;background-position:center}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy) 0%,rgba(18,36,47,.94) 22%,rgba(18,36,47,.32) 58%,rgba(18,36,47,.18) 100%);
}
.hero .wrap{position:relative;padding-top:86px;padding-bottom:96px}
.hero__inner{max-width:620px}
.hero h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(40px,4.6vw,62px);line-height:1.02;color:#fff;letter-spacing:.004em;
}
.hero h1 .accent{color:var(--orange);display:block}
.hero__sub{margin-top:22px;max-width:46ch;color:#C6D2DA;font-size:17px}
.hero__btns{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* ==========================================================================
   Services
   ========================================================================== */
.services{background:var(--bg-alt);padding:74px 0 78px}
.services__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.svc{background:#fff;display:flex;flex-direction:column}
.svc__img{aspect-ratio:16/10;background:#DCE2E6 center/cover no-repeat}
.svc__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.svc__icon{color:var(--ink);margin-bottom:14px}
.svc h3{
  font-family:var(--text);font-size:15px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:10px;
}
.svc p{font-size:15px;line-height:1.6;margin-bottom:20px}
.svc .more{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:var(--ink);
}
.svc .more .arw{color:var(--orange);transition:transform .18s ease}
.svc .more:hover .arw{transform:translateX(3px)}

/* ==========================================================================
   Why / dark band
   ========================================================================== */
.why{background:var(--navy);color:var(--on-dark-mut);padding:78px 0}
.why__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:64px;align-items:start}
.why h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,3.1vw,40px);line-height:1.06;color:#fff;
}
.why__lead{margin-top:20px;color:var(--on-dark-mut);font-size:15.5px;max-width:42ch}
.why .btn{margin-top:28px}

.why__points{display:grid;grid-template-columns:repeat(3,1fr)}
.why__points > div{padding:0 26px 30px;border-left:1px solid var(--line-dk)}
.why__points > div:nth-child(3n+1){border-left:0;padding-left:0}
.why__points > div:nth-child(n+4){padding-top:30px;border-top:1px solid var(--line-dk)}
.why__points .ic{color:var(--orange);margin-bottom:14px}
.why__points h4{
  font-family:var(--text);font-size:13.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;margin-bottom:9px;
}
.why__points p{font-size:14.5px;line-height:1.55;color:var(--on-dark-mut)}

/* ==========================================================================
   Stats
   ========================================================================== */
.stats{background:var(--bg-alt);padding:44px 0}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stats__grid > div{padding:6px 30px;border-left:1px solid var(--line)}
.stats__grid > div:first-child{border-left:0;padding-left:0}
.stat__n{
  font-family:var(--display);font-weight:700;font-size:44px;line-height:1;
  color:var(--orange);font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.stat__l{
  margin-top:8px;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body);
}
/* Placeholder figure — swap for a verified number before launch. */
.tbd{border-bottom:2px dotted currentColor;padding-bottom:2px}

/* ==========================================================================
   News
   ========================================================================== */
.news{background:var(--bg);padding:78px 0}
.news__grid{display:grid;grid-template-columns:.72fr 2fr;gap:56px;align-items:start}
.news h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,2.9vw,37px);line-height:1.06;
}
.news__lead{margin-top:18px;font-size:15.5px}
.news .btn{margin-top:26px}
.news__list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.post__img{aspect-ratio:16/9;background:#DCE2E6 center/cover no-repeat}
.post__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.post__date{
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--body-lt);margin-bottom:10px;
}
.post h3{font-family:var(--text);font-size:16px;font-weight:700;line-height:1.35;margin-bottom:10px}
.post p{font-size:14.5px;line-height:1.6;margin-bottom:18px}
.post .more{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:var(--ink);
}
.post .more .arw{color:var(--orange)}

/* ==========================================================================
   Partners
   ========================================================================== */
.partners{background:var(--bg-alt);padding:34px 0;border-top:1px solid var(--line)}
.partners__inner{display:flex;align-items:center;gap:48px;flex-wrap:wrap}
.partners__label{
  font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--body);flex:none;position:relative;padding-top:14px;
}
.partners__label::before{content:"";position:absolute;top:0;left:0;width:26px;height:2px;background:var(--orange)}
.partners__logos{display:flex;align-items:center;gap:46px;flex-wrap:wrap;flex:1;justify-content:space-between}
.partners__logos span{
  font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#A9B4BB;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--navy);color:var(--on-dark-mut);padding-top:56px}
.site-footer__grid{
  display:grid;grid-template-columns:1.25fr .75fr 1.1fr 1.1fr;gap:44px;padding-bottom:44px;
}
.site-footer .brand__sub{border-color:rgba(255,255,255,.24)}
.site-footer__tag{margin-top:16px;font-size:14.5px;color:var(--on-dark-mut);max-width:30ch}
.site-footer h5{
  font-family:var(--text);font-size:11.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:#fff;margin-bottom:18px;
}
.site-footer ul li{padding:5px 0;font-size:14.5px}
.site-footer ul a:hover{color:#fff}
.fcontact li{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start}
.fcontact .ic{color:var(--orange);padding-top:4px}
.site-footer__note{font-size:14.5px;line-height:1.6;margin-bottom:18px;max-width:32ch}
.legal{border-top:1px solid var(--line-dk)}
.legal .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:18px;padding-bottom:22px;font-size:12.5px;color:#7D8D97}
.legal ul{display:flex;gap:24px}

/* ==========================================================================
   Inner pages (blog/archive/single fall back to this)
   ========================================================================== */
.page-head{background:var(--navy);padding:52px 0}
.page-head h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,3.4vw,44px);color:#fff;line-height:1.05;
}
.page-body{padding:64px 0;max-width:760px}
.page-body h2{font-family:var(--display);text-transform:uppercase;font-size:30px;margin:34px 0 12px}
.page-body p{margin-bottom:16px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .why__grid{grid-template-columns:1fr;gap:40px}
  .why__points{grid-template-columns:repeat(2,1fr)}
  .why__points > div:nth-child(3n+1){border-left:1px solid var(--line-dk);padding-left:26px}
  .why__points > div:nth-child(2n+1){border-left:0;padding-left:0}
  .why__points > div:nth-child(n+3){padding-top:30px;border-top:1px solid var(--line-dk)}
  .news__grid{grid-template-columns:1fr;gap:36px}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:36px}
}

@media (max-width:860px){
  :root{--gut:22px}
  /* .nav is not hidden any more — it becomes the mobile panel below.
     Only the desktop quote button goes away; the sticky action bar
     carries that call to action on phones. */
  .header-cta{display:none}
  .nav-toggle{
    display:inline-flex;align-items:center;gap:9px;margin-left:auto;background:none;border:0;
    color:#fff;font-family:var(--text);font-size:12.5px;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;padding:10px 0;cursor:pointer;
  }
  .nav-toggle .bars{display:block;width:20px;height:2px;background:#fff;position:relative}
  .nav-toggle .bars::before,.nav-toggle .bars::after{
    content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;
  }
  .nav-toggle .bars::before{top:-6px}
  .nav-toggle .bars::after{top:6px}

  .hero__media{inset:0}
  .hero__media::after{
    background:linear-gradient(180deg,rgba(18,36,47,.93) 0%,rgba(18,36,47,.88) 55%,rgba(18,36,47,.95) 100%);
  }
  .hero .wrap{padding-top:60px;padding-bottom:64px}
  .hero__btns .btn{flex:1 1 auto;justify-content:center}

  .services{padding:56px 0}
  .services__grid{grid-template-columns:1fr;gap:20px}
  .why{padding:56px 0}
  .why__points{grid-template-columns:1fr}
  .why__points > div{border-left:0!important;padding-left:0!important;padding-top:26px;
    border-top:1px solid var(--line-dk)}
  .why__points > div:first-child{padding-top:0;border-top:0}
  .stats__grid{grid-template-columns:1fr 1fr;gap:24px 0}
  .stats__grid > div{border-left:0;padding-left:0}
  .stats__grid > div:nth-child(2n){padding-left:24px;border-left:1px solid var(--line)}
  .news{padding:56px 0}
  .news__list{grid-template-columns:1fr}
  .partners__inner{gap:24px}
  .partners__logos{gap:26px;justify-content:flex-start}
  .partners__logos span{font-size:17px}
  .site-footer__grid{grid-template-columns:1fr;gap:32px}
  .legal .wrap{flex-direction:column;gap:10px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.page-head__sub{margin-top:14px;color:var(--on-dark-mut);max-width:52ch;font-size:16.5px}
.page-head .eyebrow{margin-bottom:14px}

.kontakt{padding:66px 0 82px}
.kontakt__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.kontakt h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:27px;line-height:1.08;margin-bottom:22px;
}
.kontakt__list li{display:grid;grid-template-columns:22px 1fr;gap:14px;
  padding:15px 0;border-bottom:1px solid var(--line)}
.kontakt__list .ic{color:var(--orange);padding-top:3px}
.kontakt__list b{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body-lt);margin-bottom:3px}
.kontakt__list a:hover{color:var(--orange)}

.kontakt__note{margin-top:34px;background:var(--bg-alt);padding:24px 26px;border-left:2px solid var(--orange)}
.kontakt__note h3{font-family:var(--text);font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:12px}
.kontakt__note ul li{position:relative;padding:4px 0 4px 18px;font-size:15px}
.kontakt__note ul li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:1.5px;background:var(--orange)}

.kontakt__form{background:#fff;border:1px solid var(--line);padding:36px 38px}
.form p{margin-bottom:16px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form label{display:block;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);margin-bottom:7px}
.form label span{color:var(--orange)}
.form input,.form select,.form textarea{
  width:100%;border:1px solid var(--line);background:#FCFDFD;padding:13px 14px;
  font-family:var(--text);font-size:15.5px;color:var(--ink);border-radius:3px;
}
.form input::placeholder,.form textarea::placeholder{color:#A9B2B8}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--orange);outline:none;box-shadow:0 0 0 3px rgba(232,100,30,.14)}
.form textarea{resize:vertical}
.form button{border:0;font-family:var(--text);cursor:pointer}
.form__note{margin-top:16px;font-size:13px;color:var(--body-lt);line-height:1.55}
/* Honeypot. Parking it at left:-9999px is the classic trick, but it only
   hides in left-to-right: in Persian the inline start is the right edge, so a
   far-left element overflows the end and adds ~9,900px of scrollable width —
   which reads as a blank strip beside the page. Clipped in place instead, so
   it takes no space in either direction. The field stays aria-hidden with
   tabindex="-1", so no one is offered it. */
.hp{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.notice{padding:16px 20px;margin-bottom:26px;border-left:3px solid;font-size:15px;line-height:1.6}
.notice strong{display:block;margin-bottom:3px;color:var(--ink)}
.notice--ok{background:#EFF7F1;border-color:#2E7D4F}
.notice--err{background:#FDF1EC;border-color:var(--orange)}

/* Rich text on inner pages */
.page-body ul{margin:0 0 18px;padding:0}
.page-body ul li{position:relative;padding:5px 0 5px 22px}
.page-body ul li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:2px;background:var(--orange)}
.page-body h3{font-family:var(--text);font-size:17px;font-weight:700;margin:26px 0 8px;color:var(--ink)}
.page-body .lead{font-size:19px;line-height:1.6;color:var(--ink);margin-bottom:26px}
.page-body table{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:15.5px}
.page-body th{text-align:left;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--body-lt);padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.page-body td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line)}
.page-body td:first-child{font-weight:600;color:var(--ink)}

@media (max-width:1080px){
  .kontakt__grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:860px){
  .kontakt{padding:48px 0 60px}
  .kontakt__form{padding:26px 22px}
  .form .two{grid-template-columns:1fr}
  .page-body table{display:block;overflow-x:auto}
}

/* ==========================================================================
   Matching the approved reference more closely
   ========================================================================== */

/* The hero eyebrow in the reference carries no rule; the section ones do. */
.eyebrow--bare::before{display:none}

/* Hero: photo reaches further left and the dark wash is softer, so the port
   reads as a photograph rather than a panel pinned to the right. */
.hero__media{inset:0 0 0 22%;background-position:center right}
.hero__media::after{
  background:linear-gradient(90deg,
    var(--navy) 0%,
    rgba(18,36,47,.97) 18%,
    rgba(18,36,47,.62) 42%,
    rgba(18,36,47,.16) 72%,
    rgba(18,36,47,.06) 100%);
}
.hero .wrap{padding-top:78px;padding-bottom:86px}
.hero h1{font-size:clamp(36px,3.95vw,53px);line-height:1.07;max-width:19ch}
.hero h1 .accent{display:block}
.hero__sub{font-size:16.5px;max-width:44ch;color:#BDCAD3}

/* Partner strip: the logo lockup is one image lifted from the reference. */
.partners__logos img{
  width:100%;height:auto;display:block;
  opacity:.85;mix-blend-mode:multiply;
}
.partners__inner{gap:34px}
.partners__label{flex:0 0 auto;max-width:150px;line-height:1.4}

/* Service cards: the reference shows a hairline, not a hard edge. */
.svc{border:1px solid var(--line);transition:box-shadow .2s ease,transform .2s ease}
.svc:hover{box-shadow:0 12px 30px -18px rgba(18,36,47,.45)}
.svc__img{aspect-ratio:16/9}

/* News cards link through on the image and the title. */
.post__img{display:block}
.post h3 a:hover{color:var(--orange)}

@media (max-width:860px){
  /* Full-bleed on phones — and the anchor has to be reset too. The desktop
     rule pins the photo to 'center right' so the vehicle sits clear of the
     headline; carried onto a narrow screen that shows only the right edge of
     the frame. Centred keeps the tractor in view at every width. */
  .hero__media{inset:0;background-position:50% 50%}
  html[dir="rtl"] .hero__media{inset:0;background-position:50% 50%}
  .partners__inner{flex-direction:column;align-items:flex-start;gap:18px}
  .partners__label{max-width:none}
}

/* ==========================================================================
   Language switcher
   ========================================================================== */
.langsw{display:flex;align-items:center;gap:2px;flex:none;margin-left:26px}
.langsw a{
  font-family:var(--text);font-size:12px;font-weight:700;letter-spacing:.08em;
  color:#8FA0AC;padding:5px 8px;border-radius:3px;line-height:1;
  transition:color .18s ease,background .18s ease;
}
.langsw a:hover{color:#fff;background:rgba(255,255,255,.08)}
.langsw a.is-on{color:var(--navy);background:var(--orange)}
@media (max-width:860px){
  .langsw{margin-left:auto;order:2}
  .nav-toggle{margin-left:14px}
}

/* ==========================================================================
   Header density
   --------------------------------------------------------------------------
   German labels run longer than the English ones ("Sendungsverfolgung" against
   "Track & Trace"), and the language switcher takes further width. Without
   this the bar wraps onto two lines in German.
   ========================================================================== */
.site-header .wrap{gap:20px}
.nav ul{gap:19px}
.nav a{font-size:14px;white-space:nowrap}
.langsw{margin-left:18px}

@media (max-width:1180px){
  .nav ul{gap:14px}
  .nav a{font-size:13.5px}
  .header-cta{padding:12px 15px;font-size:13px}
  .brand__sub{display:none}
}

/* ==========================================================================
   Sticky action bar (phones) and floating WhatsApp
   ========================================================================== */
.actionbar{display:none}
.wafloat{display:none}

@media (max-width:860px){
  .actionbar{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--line-dk);
    /* Promote to its own compositor layer so the bar is not repainted on
       every scroll frame. It does not stop the bar tracking the browser
       toolbar as that collapses — that is the browser moving the visual
       viewport, not us — but it removes the jitter around it. */
    will-change:transform;
    padding-bottom:0;
  }
  .actionbar:has(.actionbar__wa){grid-template-columns:1fr 1fr 1fr}
  .actionbar a{
    display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:56px;font-size:14px;font-weight:600;
    /* The lift lives on each button, not on the bar. That way the button's own
       colour still reaches the screen edge — padding on the container showed
       as a strip in the bar's divider colour, which read as a gap — while the
       label sits clear of the browser's bottom toolbar. */
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);
    box-sizing:content-box;
  }
  .actionbar__call{background:var(--navy);color:#fff}
  .actionbar__wa{background:#1F6F4A;color:#fff}
  .actionbar__quote{background:var(--orange);color:#fff}
  /* Clear the bar, plus whatever the device reserves for its home indicator. */
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px))}
  .wafloat{
    display:grid;place-items:center;position:fixed;right:16px;bottom:72px;z-index:59;
    width:52px;height:52px;border-radius:50%;background:#1F6F4A;color:#fff;
    box-shadow:0 6px 20px -6px rgba(0,0,0,.5);
  }
}

/* ==========================================================================
   Lane pages
   ========================================================================== */
.page-head__btns{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

.lanefacts{background:var(--bg-alt);border-bottom:1px solid var(--line)}
.lanefacts dl{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0;margin:0;padding:26px 0;
}
.lanefacts dl > div{padding:6px 26px;border-left:1px solid var(--line)}
.lanefacts dl > div:first-child{border-left:0;padding-left:0}
.lanefacts dt{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--body-lt);margin-bottom:6px;
}
.lanefacts dd{
  margin:0;font-family:var(--display);font-size:23px;font-weight:700;
  text-transform:uppercase;color:var(--ink);line-height:1.1;
}

.faq{background:var(--bg-alt);padding:66px 0;border-top:1px solid var(--line)}
.faq h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:30px;margin-bottom:28px;
}
.faq__list{display:grid;grid-template-columns:1fr 1fr;gap:26px 44px;max-width:1000px}
.faq__item h3{
  font-family:var(--text);font-size:16.5px;font-weight:700;color:var(--ink);
  margin-bottom:7px;
}
.faq__item p{font-size:15.5px;line-height:1.62}

.lanecta{background:var(--navy);color:var(--on-dark-mut)}
.lanecta .wrap{
  padding-top:46px;padding-bottom:46px;display:flex;align-items:center;
  justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.lanecta h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:29px;color:#fff;margin-bottom:6px;
}
.lanecta p{max-width:52ch;font-size:15.5px}

.lanelist{padding:56px 0;border-top:1px solid var(--line)}
.lanelist h2{
  font-family:var(--text);font-size:12px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--body-lt);margin-bottom:18px;
}
.lanelist ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0}
.lanelist li{border-bottom:1px solid var(--line)}
.lanelist a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 22px 15px 0;font-size:16px;font-weight:600;color:var(--ink);
}
.lanelist a .arw{color:var(--orange);transition:transform .18s ease}
.lanelist a:hover .arw{transform:translateX(4px)}

/* Trust block, used on About and Contact */
.trust{background:var(--bg-alt);padding:44px 0;border-top:1px solid var(--line)}
.trust h2{
  font-family:var(--text);font-size:12px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--body-lt);margin-bottom:20px;
}
.trust ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 30px}
.trust li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15px}
.trust .ic{color:var(--orange);padding-top:2px}
.trust b{display:block;color:var(--ink);font-weight:600}

@media (max-width:860px){
  .faq__list{grid-template-columns:1fr;gap:22px}
  .lanefacts dl{grid-template-columns:1fr 1fr;gap:18px 0;padding:22px 0}
  .lanefacts dl > div{border-left:0;padding-left:0}
  .lanefacts dl > div:nth-child(2n){padding-left:20px;border-left:1px solid var(--line)}
  .lanecta .wrap{padding-top:36px;padding-bottom:36px}
}

/* ==========================================================================
   Persian / right-to-left
   --------------------------------------------------------------------------
   Barlow has no Persian glyphs, so the whole page switches to Vazirmatn when
   the language is Persian. The condensed display face has no Persian either,
   so headings use Vazirmatn 700 instead — Persian script does not take
   condensed treatment well anyway.
   ========================================================================== */
[lang="fa"], [lang="fa-IR"], html[dir="rtl"]{
  --display:"Vazirmatn","Barlow Condensed",Tahoma,sans-serif;
  --text:"Vazirmatn",Tahoma,sans-serif;
}
html[dir="rtl"] body{line-height:1.85}

/* Persian headlines: no uppercase (meaningless), no negative tracking. */
html[dir="rtl"] .hero h1,
html[dir="rtl"] .why h2,
html[dir="rtl"] .news h2,
html[dir="rtl"] .page-head h1,
html[dir="rtl"] .kontakt h2,
html[dir="rtl"] .stat__n,
html[dir="rtl"] .brand__name,
html[dir="rtl"] .svc h3,
html[dir="rtl"] .why__points h4,
html[dir="rtl"] .site-footer h5,
html[dir="rtl"] .stat__l,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .partners__label,
html[dir="rtl"] .page-body h2{
  text-transform:none;letter-spacing:0;font-weight:700;
}
html[dir="rtl"] .hero h1{line-height:1.5;font-size:clamp(30px,3.2vw,42px);max-width:22ch}
html[dir="rtl"] .why h2,
html[dir="rtl"] .news h2,
html[dir="rtl"] .page-head h1{line-height:1.55}

/* Mirrored layout */
html[dir="rtl"] .eyebrow::before{margin-left:0}
html[dir="rtl"] .hero__media{inset:0 22% 0 0;background-position:center left}
html[dir="rtl"] .hero__media::after{
  background:linear-gradient(270deg,
    var(--navy) 0%,
    rgba(18,36,47,.97) 18%,
    rgba(18,36,47,.62) 42%,
    rgba(18,36,47,.16) 72%,
    rgba(18,36,47,.06) 100%);
}
html[dir="rtl"] .why__points > div{border-left:0;border-right:1px solid var(--line-dk);padding:0 26px 30px 0}
html[dir="rtl"] .why__points > div:nth-child(3n+1){border-right:0;padding-right:0}
html[dir="rtl"] .stats__grid > div{border-left:0;border-right:1px solid var(--line);padding:6px 30px 6px 0}
html[dir="rtl"] .stats__grid > div:first-child{border-right:0;padding-right:0}
html[dir="rtl"] .kontakt__note{border-left:0;border-right:2px solid var(--orange)}
html[dir="rtl"] .kontakt__note ul li{padding:4px 18px 4px 0}
html[dir="rtl"] .kontakt__note ul li::before{left:auto;right:0}
html[dir="rtl"] .page-body ul li{padding:5px 22px 5px 0}
html[dir="rtl"] .page-body ul li::before{left:auto;right:0}
html[dir="rtl"] .notice{border-left:0;border-right:3px solid}
html[dir="rtl"] .page-body th,
html[dir="rtl"] .page-body td{text-align:right;padding:12px 0 12px 12px}
html[dir="rtl"] .nav .sub-menu{left:auto;right:-14px}
html[dir="rtl"] .langsw{margin-left:0;margin-right:18px}
html[dir="rtl"] .btn{padding:15px 23px 15px 21px}

/* Arrows point the other way in an RTL reading order. */
html[dir="rtl"] .btn .arw,
html[dir="rtl"] .more .arw,
html[dir="rtl"] .lanelist .arw{transform:scaleX(-1)}
html[dir="rtl"] .btn:hover .arw{transform:scaleX(-1) translateX(3px)}
html[dir="rtl"] .svc .more:hover .arw{transform:scaleX(-1) translateX(3px)}

/* Latin runs inside Persian text — phone numbers, email — stay LTR. */
html[dir="rtl"] .fcontact a,
html[dir="rtl"] .kontakt__list a{direction:ltr;unicode-bidi:embed;display:inline-block}

/* Service card icons follow the reading direction. */
.svc__icon{display:block}
html[dir="rtl"] .svc__icon,
html[dir="rtl"] .why__points .ic,
html[dir="rtl"] .trust .ic{text-align:right}

/* ==========================================================================
   Scroll-driven reveals
   --------------------------------------------------------------------------
   Built on scroll-driven animations (animation-timeline: view()), so there is
   no JavaScript on the page at all — no observer, no scroll listener, nothing
   to run on the main thread.

   Two rules make this safe:
   1. Content is visible by default. The animation only runs where the browser
      supports it, so anywhere it does not — older Safari, older Firefox, a
      crawler, reader mode — the page simply renders normally.
   2. It is switched off entirely under prefers-reduced-motion.

   Direction-neutral: everything moves on the Y axis or fades, so the same
   rules read correctly in German, English and right-to-left Persian.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    @keyframes axiom-rise{
      from{opacity:0;transform:translateY(26px)}
      to  {opacity:1;transform:translateY(0)}
    }
    @keyframes axiom-fade{
      from{opacity:0}
      to  {opacity:1}
    }
    @keyframes axiom-wipe{
      from{opacity:0;transform:translateY(34px) scale(.985)}
      to  {opacity:1;transform:translateY(0) scale(1)}
    }

    /* Section headings and body columns */
    .services__grid,
    .why__grid > div:first-child,
    .news__grid > div:first-child,
    .kontakt__side,
    .kontakt__form,
    .page-body,
    .lanefacts dl{
      animation:axiom-rise linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 26%;
    }

    /* Cards stagger, so a row assembles rather than arriving as a block. */
    .svc,
    .post,
    .why__points > div,
    .stats__grid > div{
      animation:axiom-wipe linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 24%;
    }
    .services__grid .svc:nth-child(2),
    .news__list .post:nth-child(2),
    .stats__grid > div:nth-child(2){animation-range:entry 2% cover 28%}
    .services__grid .svc:nth-child(3),
    .news__list .post:nth-child(3),
    .stats__grid > div:nth-child(3){animation-range:entry 2% cover 32%}
    .services__grid .svc:nth-child(4),
    .stats__grid > div:nth-child(4){animation-range:entry 2% cover 36%}

    /* The dark bands fade rather than move — they are full-bleed, and sliding
       a full-width dark block reads as a glitch. */
    .why__points,
    .lanecta .wrap,
    .site-footer__grid{
      animation:axiom-fade linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 30%;
    }

    /* Hero: a single settle on load, not tied to scroll. */
    @keyframes axiom-hero{
      from{opacity:0;transform:translateY(16px)}
      to  {opacity:1;transform:translateY(0)}
    }
    .hero__inner > *{
      animation:axiom-hero .62s cubic-bezier(.22,.61,.36,1) both;
    }
    .hero__inner > :nth-child(1){animation-delay:.05s}
    .hero__inner > :nth-child(2){animation-delay:.13s}
    .hero__inner > :nth-child(3){animation-delay:.21s}
    .hero__inner > :nth-child(4){animation-delay:.29s}

    /* A slow drift on the hero photograph gives the header some depth. */
    @keyframes axiom-hero-media{
      from{transform:scale(1.06)}
      to  {transform:scale(1)}
    }
    .hero__media{
      animation:axiom-hero-media 1.6s cubic-bezier(.22,.61,.36,1) both;
    }
  }
}

/* The floating WhatsApp button belongs on desktop, where there is no action
   bar. On phones the bar already carries WhatsApp, so showing both is just
   two buttons doing one job. */
@media (min-width:861px){
  .wafloat{
    display:grid;place-items:center;position:fixed;right:22px;bottom:22px;z-index:59;
    width:56px;height:56px;border-radius:50%;background:#1F6F4A;color:#fff;
    box-shadow:0 8px 24px -8px rgba(0,0,0,.55);
    transition:transform .16s ease,box-shadow .16s ease;
  }
  .wafloat:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(0,0,0,.6)}
}
@media (max-width:860px){
  .wafloat{display:none}
}

/* A Latin run inside right-to-left text — a street address, a phone number —
   needs isolating, or the bidi algorithm moves the house number and the
   commas to the wrong end of the line. */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;text-align:left}
html[dir="rtl"] .fcontact .ltr,
html[dir="rtl"] .kontakt__list .ltr{text-align:right}

/* ==========================================================================
   Mobile navigation
   --------------------------------------------------------------------------
   The button used to be a link to the contact page — it never opened a menu,
   so phones had no navigation at all. This is a real toggle, driven by a
   visually hidden checkbox rather than JavaScript. The checkbox stays
   focusable, so Space opens the menu for keyboard users.
   ========================================================================== */
.nav-check{
  position:absolute;width:1px;height:1px;opacity:0;margin:0;
  pointer-events:none;
}
.nav-toggle__word{line-height:1}

@media (max-width:860px){
  .site-header .wrap{position:relative;flex-wrap:nowrap}
  .brand{margin-right:auto}

  /* Button sits top right, after the language switcher. */
  .langsw{order:3;margin-left:0;margin-right:4px}
  .nav-toggle{
    order:4;display:inline-flex;align-items:center;gap:9px;
    margin-left:2px;padding:0 6px;min-height:44px;cursor:pointer;
    color:#fff;font-family:var(--text);font-size:12.5px;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-check:focus-visible ~ .nav-toggle{outline:2px solid var(--orange);outline-offset:3px}

  /* Bars morph into a cross when open. */
  .nav-toggle .bars{
    position:relative;display:block;width:22px;height:2px;background:#fff;
    transition:background .18s ease;
  }
  .nav-toggle .bars::before,
  .nav-toggle .bars::after{
    content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;
    transition:transform .22s ease,top .22s ease;
  }
  .nav-toggle .bars::before{top:-7px}
  .nav-toggle .bars::after{top:7px}
  .nav-check:checked ~ .nav-toggle .bars{background:transparent}
  .nav-check:checked ~ .nav-toggle .bars::before{top:0;transform:rotate(45deg)}
  .nav-check:checked ~ .nav-toggle .bars::after{top:0;transform:rotate(-45deg)}

  /* The panel itself. */
  /* Toggled with display, not max-height. A height transition on a panel of
     unknown height needs a magic number, and any stray visibility rule
     elsewhere in the cascade silently wins — which is exactly what happened
     the first time. This cannot be overridden by accident. */
  .nav{
    display:none;
    order:9;position:absolute;top:100%;left:0;right:0;z-index:50;
    margin:0;background:var(--navy-lt);
    border-top:1px solid var(--line-dk);
    box-shadow:0 24px 40px -20px rgba(0,0,0,.75);
    max-height:78vh;overflow-y:auto;
  }
  .nav-check:checked ~ .nav{display:block;animation:axiom-nav-open .22s ease both}
  @keyframes axiom-nav-open{
    from{opacity:0;transform:translateY(-6px)}
    to{opacity:1;transform:translateY(0)}
  }

  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav a{
    display:block;padding:15px 22px;font-size:16px;white-space:normal;
    border-bottom:1px solid rgba(255,255,255,.08);
    border-left:3px solid transparent;
  }
  .nav .current-menu-item > a,
  .nav .current_page_item > a,
  .nav .is-active > a{
    border-bottom-color:rgba(255,255,255,.08);
    border-left-color:var(--orange);background:rgba(255,255,255,.04);
  }
  .nav a:hover{border-bottom-color:rgba(255,255,255,.08)}

  /* Submenus stack inline rather than floating. */
  .nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;background:rgba(0,0,0,.22);border-top:0;box-shadow:none;
    padding:0;
  }
  .nav .sub-menu a{padding-left:40px;font-size:15px}
  .nav .menu-item-has-children > a::after{float:right;margin-top:7px}
}

/* Right-to-left: the active marker and submenu indent flip. */
@media (max-width:860px){
  html[dir="rtl"] .brand{margin-right:0;margin-left:auto}
  html[dir="rtl"] .nav a{border-left:0;border-right:3px solid transparent}
  html[dir="rtl"] .nav .current-menu-item > a,
  html[dir="rtl"] .nav .current_page_item > a{border-right-color:var(--orange)}
  html[dir="rtl"] .nav .sub-menu a{padding-left:22px;padding-right:40px}
  html[dir="rtl"] .nav .menu-item-has-children > a::after{float:left}
}

/* ==========================================================================
   Right-to-left, phone widths — must be last
   --------------------------------------------------------------------------
   The desktop RTL rules further up set a 22% inset on the hero photo so the
   vehicle sits clear of the headline. They have the same specificity as the
   mobile override, so whichever comes last in the file wins — and they came
   later. The result was a Persian hero that stopped 82px short of the right
   edge on phones, leaving a bare strip. Keep this block at the end.
   ========================================================================== */
@media (max-width:860px){
  html[dir="rtl"] .hero__media{inset:0;background-position:50% 50%}
}