/* IranTranzit homepage appearance layer — V2-polish (additive; loaded after next.css).
   Target: owner-selected website-concept-v2.png. One continuous truck/road panorama fading
   into an ivory copy zone, dark forest-green headline, a search dock on the hero edge,
   three compact News/Market/Services cards overlapping the hero, market, messenger/seller band,
   news. JS-off, reduced motion, short desktop and <=800px are fully static. */

.hm-home{
  --hm-green:#164c39;--hm-green-2:#1f5d46;--hm-green-deep:#0f2f24;
  --hm-ivory:#f6f3ea;--hm-paper:#fffdf7;--hm-mist:#ebf0e7;
  --hm-ink:#17251e;--hm-muted:#56665d;--hm-line:#e3e3d8;
  --hm-radius:18px;--hm-shadow:0 12px 30px rgba(18,38,30,.09);
  background:var(--hm-ivory);color:var(--hm-ink);
}
.hm-home :focus-visible{outline:3px solid #2f7a5c;outline-offset:3px;border-radius:8px}
/* Base .dot has explicit display; hidden must not imply a guest has unread messages. */
.hm-home #msgDot[hidden]{display:none}
.hm-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hm-ic{width:20px;height:20px;flex:none;vertical-align:middle}

/* ---------- header: light compact bar ---------- */
.hm-home header{background:rgba(250,248,241,.94);border-bottom:1px solid var(--hm-line)}
.hm-home header .mark{background:var(--hm-green);color:#e9f0c8}
.hm-home header nav a,.hm-home header nav button{min-height:44px;display:inline-flex;align-items:center;color:var(--hm-ink);font-size:13px}
.hm-home header .actions button{min-height:44px}
.hm-home header .actions .solid{background:var(--hm-green);color:#fff;border-radius:12px;padding:10px 18px}
.hm-home header .actions .solid:hover{background:var(--hm-green-2)}

/* ---------- hero: one panorama, photo left, ivory copy zone right (RTL start) ---------- */
.hm-home .hero{position:relative;display:block;min-height:0;padding:clamp(56px,9vh,96px) 6% 112px;background:var(--hm-ivory);color:var(--hm-ink);overflow:hidden;isolation:isolate}
.hm-home .hero-art{position:absolute;top:0;bottom:0;left:0;right:auto;width:72%;min-height:0;z-index:-1;background:transparent;
  -webkit-mask-image:linear-gradient(to left,transparent 0%,#000 30%);mask-image:linear-gradient(to left,transparent 0%,#000 30%)}
.hm-home .hero-art img{transform:scale(1.02);will-change:auto;object-position:50% 58%;filter:saturate(1.05) contrast(1.02)}
.hm-home .art-shade{background:linear-gradient(0deg,var(--hm-ivory) 0%,rgba(246,243,234,0) 30%)}
.hm-home .art-label{left:5%;right:auto;bottom:118px;max-width:260px;text-align:left;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.hm-home .art-label span{display:none}
.hm-home .art-label b{font-size:16px;letter-spacing:3px;text-align:left}
.hm-home .art-label small{opacity:.95;font-size:11px}
.hm-home .hero-copy{position:relative;padding:0;max-width:520px;margin:0 0 0 auto}
.hm-home .hero-copy .eyebrow{color:var(--hm-muted);font-size:13px;margin:0}
.hm-home .hero-copy .eyebrow i{background:var(--hm-green)}
.hm-home .hero h1{color:var(--hm-green-deep);font-size:clamp(46px,5.2vw,78px);line-height:1.22;letter-spacing:-1px;margin:14px 0 14px}
.hm-home .hero h1 span{color:var(--hm-green-deep)}
.hm-home .hero .intro{color:#3e4d45;font-size:17px;line-height:1.95;margin:0}
.hm-home .signature{display:none}

/* Search dock on the hero's lower edge holds the SINGLE real #searchForm (moved, not copied). */
.hm-home .hm-dock{position:relative;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:34px 0 0 auto;width:min(820px,100%);
  padding:8px;background:var(--hm-paper);border:1px solid var(--hm-line);border-radius:18px;box-shadow:0 16px 36px rgba(18,38,30,.12);font-size:14px}
.hm-home .hm-dock .solid{min-height:48px;padding:10px 22px;border-radius:13px;gap:10px;background:var(--hm-green);color:#fff;font-weight:bold;font-size:15px}
.hm-home .hm-dock .solid:hover{background:var(--hm-green-2)}
.hm-dock-hint{flex:1;min-width:180px;color:var(--hm-muted);font-size:13px;line-height:1.7}
.hm-pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid #cfd8cc;border-radius:999px;color:var(--hm-green);font-weight:bold;background:#fff}
.hm-pill:hover{border-color:var(--hm-green)}

/* ---------- News / Market / Services: compact horizontal cards on the hero edge ---------- */
.hm-eco{position:relative;z-index:2;background:transparent;padding:0 6% 8px;margin-top:-64px}
.hm-eco-stage{max-width:1240px;margin:0 auto}
.hm-eco-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hm-card{display:flex;flex-direction:row;align-items:stretch;min-height:132px;background:var(--hm-paper);border:1px solid var(--hm-line);border-radius:var(--hm-radius);overflow:hidden;box-shadow:var(--hm-shadow);color:var(--hm-ink);transition:box-shadow .2s ease,border-color .2s ease}
.hm-card:hover{box-shadow:0 18px 40px rgba(18,38,30,.14);border-color:#cfd9cd}
.hm-card-body{order:0;flex:1;min-width:0;display:grid;align-content:start;gap:4px;padding:14px 16px 10px}
.hm-card-art{order:1;width:40%;max-width:170px;flex:none;background:var(--hm-mist);overflow:hidden;margin:8px;border-radius:12px}
.hm-card-art img{display:block;width:100%;height:100%;object-fit:cover}
.hm-card-art-plain{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#e6eee4,#d5e2d3);color:var(--hm-green)}
.hm-svc-art{width:92%;height:auto}
.hm-svc-art text{display:none}
.hm-card-body b{display:flex;align-items:center;gap:8px;font-size:19px;color:var(--hm-green-deep)}
.hm-card-body b .hm-ic{width:22px;height:22px;color:var(--hm-green)}
.hm-card-body>span{font-size:13.5px;color:var(--hm-muted);line-height:1.8}
.hm-card-body em{font-style:normal;display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;color:var(--hm-green);font-weight:bold}
.hm-arrow{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--hm-green);color:#fff;flex:none}
.hm-arrow svg{width:16px;height:16px}
.hm-eco-note{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:14px 0 0;padding:6px 2px;font-size:13px;color:var(--hm-ink)}
.hm-eco-note small{color:var(--hm-muted);font-size:12.5px}

/* Desktop reveal (JS only): the three cards rise with a small vertical stagger as the strip
   enters the viewport and are fully aligned well before they reach the middle of the screen.
   Vertical only, so cards never overlap each other or cover targets; no pinning. */
.hm-motion .hm-card{transform:translate3d(0,calc(var(--hm-q,0) * var(--hm-dy,0px)),0);opacity:calc(1 - var(--hm-q,0) * .5)}
.hm-motion .hm-card-news{--hm-dy:18px}
.hm-motion .hm-card-market{--hm-dy:34px}
.hm-motion .hm-card-services{--hm-dy:50px}
.hm-motion .hm-eco.hm-live .hm-card{will-change:transform,opacity}

/* ---------- market (real data from next.js) ---------- */
.hm-home .market{background:var(--hm-ivory);padding-top:56px}
.hm-home .market .section-heading h2{color:var(--hm-green-deep);font-size:clamp(26px,2.6vw,34px);letter-spacing:-.3px;position:relative;padding-right:40px}
.hm-home .market .section-heading h2::before{content:"";position:absolute;right:0;top:50%;width:28px;height:3px;border-radius:2px;background:var(--hm-green)}
.hm-home .search{border-radius:var(--hm-radius);border:1px solid var(--hm-line);box-shadow:var(--hm-shadow)}
.hm-home .search .solid,.hm-home .more{min-height:46px;border-radius:12px;background:var(--hm-green)}
.hm-home .chips button{min-height:44px}
.hm-home .chips .selected{background:var(--hm-green)}
.hm-home .filters{background:var(--hm-paper);border:1px solid var(--hm-line);border-radius:var(--hm-radius);padding:18px}
.hm-home .card{border:1px solid var(--hm-line);border-radius:var(--hm-radius);box-shadow:var(--hm-shadow);background:var(--hm-paper)}
.hm-home .card-body h3{color:var(--hm-green-deep)}
.hm-home .card-body .solid{border-radius:12px;background:var(--hm-green)}

/* ---------- messenger / seller band ---------- */
.hm-connect{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:var(--hm-ivory);padding-top:12px;padding-bottom:40px}
.hm-connect article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;min-height:112px;border-radius:var(--hm-radius);padding:20px 24px;position:relative;overflow:hidden;isolation:isolate}
.hm-connect h2{font-size:21px;margin:0;letter-spacing:0;line-height:1.5}
.hm-connect p{margin:2px 0 0;font-size:13.5px;line-height:1.8}
.hm-connect-ic{width:52px;height:52px;display:grid;place-items:center;border-radius:14px}
.hm-connect-ic svg{width:30px;height:30px}
.hm-connect button{min-height:44px;border-radius:999px;padding:10px 22px;font-size:14px;font-weight:bold;border:0;white-space:nowrap}
.hm-connect-msg{background:var(--hm-green);color:#f6f3ea}
.hm-connect-msg p{color:#cddbd1}
.hm-connect-msg .hm-connect-ic{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
.hm-connect-msg button{background:var(--hm-paper);color:var(--hm-green)}
.hm-connect-panel{background:var(--hm-paper);border:1px solid var(--hm-line);color:var(--hm-ink)}
/* Existing approved IVECO photo as a faded backdrop on the panel's far (left) side. */
.hm-connect-panel::before{content:"";position:absolute;inset:0 auto 0 0;width:58%;z-index:-1;
  background:url("https://info.iveco.nl/hs-fs/hubfs/afbeelding-informatieve-blog-kritisch-kijken-naar-de-co2-uitstoot-is-een-vereiste__.jpg?width=900") center/cover no-repeat;
  -webkit-mask-image:linear-gradient(to left,transparent 0%,#000 55%);mask-image:linear-gradient(to left,transparent 0%,#000 55%);opacity:.9}
.hm-connect-panel p{color:var(--hm-muted)}
.hm-connect-panel .hm-connect-ic{background:var(--hm-mist);color:var(--hm-green)}
.hm-connect-panel button{background:var(--hm-green);color:#fff}

/* ---------- other existing sections: appearance only ---------- */
.hm-home .brand-strip{background:var(--hm-paper);padding:24px 6%}
.hm-home .editorial{background:var(--hm-paper)}
.hm-home .driver-hub{background:var(--hm-ivory)}
.hm-home .hub-grid article{background:var(--hm-paper);border:1px solid var(--hm-line)}
.hm-home .hub-grid button,.hm-home .news-grid a{color:var(--hm-green);font-weight:bold;min-height:44px;display:inline-flex;align-items:center}
.hm-home .news{background:var(--hm-ivory)}
.hm-home .news .section-heading h2{color:var(--hm-green-deep)}
.hm-home .news-grid article{background:var(--hm-paper);border:1px solid var(--hm-line);border-radius:var(--hm-radius);box-shadow:var(--hm-shadow);min-height:0;border-top:4px solid var(--hm-green)}
.hm-news-note{margin:6px 0 22px;padding:12px 16px;border-radius:14px;background:var(--hm-mist);color:var(--hm-muted);font-size:14px;line-height:1.9;max-width:760px}
.hm-news-note a{color:var(--hm-green);font-weight:bold;text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hm-eco-cards{grid-template-columns:1fr 1fr 1fr;gap:12px}
  .hm-card{flex-direction:column}
  .hm-card-art{order:-1;width:auto;max-width:none;height:110px;margin:8px 8px 0}
}
@media (max-width:1000px){.hm-connect{grid-template-columns:1fr}}
@media (max-width:800px){
  /* Panorama cropped to a 300px band; headline sits on its pale sky, dock card overlaps it. */
  .hm-home .hero{padding:22px 5% 0}
  .hm-home .hero-art{width:100%;height:300px;bottom:auto;-webkit-mask-image:none;mask-image:none}
  .hm-home .hero-art img{object-position:42% 62%}
  .hm-home .art-shade{background:linear-gradient(200deg,rgba(246,243,234,.94) 0%,rgba(246,243,234,.7) 32%,rgba(246,243,234,0) 58%),linear-gradient(0deg,var(--hm-ivory) 0%,rgba(246,243,234,0) 22%)}
  .hm-home .art-label{left:5%;bottom:auto;top:236px;max-width:60%}
  .hm-home .art-label b{font-size:13px;letter-spacing:2px}
  .hm-home .art-label small{font-size:10px}
  .hm-home .hero-copy{max-width:72%;min-height:220px;margin:0 0 0 auto}
  .hm-home .hero-copy .eyebrow{font-size:11.5px}
  .hm-home .hero h1{font-size:clamp(30px,9vw,44px);line-height:1.22;margin:6px 0 6px}
  .hm-home .hero .intro{font-size:13px;line-height:1.8}
  .hm-home .hm-dock{margin:22px 0 0;width:100%;flex-direction:column;align-items:stretch;gap:8px;padding:10px;border-radius:18px}
  .hm-home .hm-dock .solid{justify-content:center}
  .hm-dock-hint{min-width:0;text-align:center;font-size:12.5px}
  .hm-pill{justify-content:center}
  .hm-home .hm-dock{display:grid;grid-template-columns:1fr 1fr}
  .hm-home .hm-dock .solid,.hm-dock-hint{grid-column:1/-1}

  .hm-eco{margin-top:0;padding:18px 5% 4px}
  .hm-eco-cards{grid-template-columns:1fr;gap:10px}
  .hm-card{flex-direction:row;min-height:120px}
  .hm-card-art{order:1;width:34%;max-width:140px;height:auto;margin:8px}
  .hm-card-body{padding:10px 14px 4px}
  .hm-card-body b{font-size:17px}
  .hm-card-body>span{font-size:12.8px;line-height:1.7}
  .hm-card-body em{min-height:44px}
  .hm-home .market{padding-top:32px}
  .hm-connect{padding-bottom:28px}
  .hm-connect article{grid-template-columns:auto 1fr;padding:16px}
  .hm-connect button{grid-column:1/-1;width:100%}
  .hm-connect-panel::before{width:100%;opacity:.16;-webkit-mask-image:none;mask-image:none}
}

/* Reduced motion: no reveal offsets, no hover transitions (base already stops hero shift). */
@media (prefers-reduced-motion:reduce){
  .hm-card{transition:none}
  .hm-motion .hm-card{transform:none;opacity:1}
}
/* base next.css colours hero links lime (.hero-buttons a:not(.solid)); keep dock pills green. */
.hm-home .hm-dock .hm-pill{color:var(--hm-green)}

/* ===================== V2-polish overrides ===================== */
/* Hero: tighter top, reference-scale headline, truck kept left. */
.hm-home .hero{padding:clamp(40px,6vh,72px) 6% 104px}
.hm-home .hero-art{width:66%}
.hm-home .hero h1{font-size:clamp(42px,4.2vw,62px);line-height:1.25;margin:12px 0}
.hm-home .hero .intro{font-size:16.5px;line-height:1.9}

/* Real search form inside the dock (base .search card chrome removed). */
.hm-home .hm-dock{width:min(1000px,100%);flex-wrap:nowrap;gap:12px;padding:10px 12px}
.hm-home .hm-dock .search{flex:1 1 auto;min-width:0;margin:0;padding:0;border:0;box-shadow:none;background:transparent;border-radius:0;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;align-items:end;gap:10px}
.hm-home .hm-dock .search label{display:grid;gap:4px;margin:0;font-size:12px;color:var(--hm-muted);font-weight:bold}
.hm-home .hm-dock .search input,.hm-home .hm-dock .search select{min-height:46px;margin:0;border:1px solid #d9ddd1;border-radius:12px;background:#fff;padding:8px 12px;font-size:14px;color:var(--hm-ink);width:100%}
.hm-home .hm-dock .search .solid{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;white-space:nowrap}
.hm-dock-links{display:flex;gap:8px;flex:none;align-self:end}
.hm-home #market{scroll-margin-top:66px}

/* Listing cards from next.js: photo on top, three columns on desktop. */
.hm-home .market-results .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hm-home .market-results .card{display:flex;flex-direction:column;padding:0;gap:0;min-height:0;border-radius:var(--hm-radius)}
.hm-home .market-results .card-art{width:auto;height:180px;border-radius:0;flex:none}
.hm-home .market-results .card-art img{width:100%;height:180px;object-fit:cover}
.hm-home .market-results .card-body{padding:14px 16px 16px;flex:1}
.hm-home .market-results .card-body h3{font-size:16px;line-height:1.6}
.hm-home .market-results .card-body p{font-size:12.5px;line-height:1.7}
.hm-home .market-results .card-body strong{font-size:15px;color:var(--hm-green-deep)}
.hm-home .market-results .card-body button{font-size:13px;min-height:44px;padding:8px 12px;margin-top:10px}
.hm-home .market{padding-top:20px}
.hm-home .more[hidden]{display:none}

/* Compact messenger / seller band. */
.hm-connect{gap:14px;padding-top:8px;padding-bottom:28px}
.hm-connect article{min-height:84px;padding:14px 20px;gap:14px}
.hm-connect h2{font-size:18px}
.hm-connect p{font-size:13px;line-height:1.7}
.hm-connect-ic{width:44px;height:44px}
.hm-connect-ic svg{width:26px;height:26px}
.hm-home .news-grid article h3{color:var(--hm-green-deep)}

@media (max-width:1100px){
  .hm-home .hm-dock{flex-wrap:wrap}
  .hm-dock-links{width:100%}
  .hm-home .market-results .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:800px){
  /* Mobile panorama: photo band on the LEFT, truck framed inside it; copy on a solid ivory zone right. */
  .hm-home .hero{padding:20px 5% 0}
  .hm-home .hero-art{width:60%;height:262px;-webkit-mask-image:linear-gradient(to left,transparent 0%,#000 32%);mask-image:linear-gradient(to left,transparent 0%,#000 32%)}
  .hm-home .hero-art img{object-position:50% 60%;transform:none}
  .hm-home .art-shade{background:linear-gradient(0deg,var(--hm-ivory) 0%,rgba(246,243,234,0) 26%)}
  .hm-home .art-label{left:4%;top:auto;bottom:6px;max-width:92%;color:var(--hm-ink);text-shadow:none}
  .hm-home .art-label b{font-size:11px;letter-spacing:1.5px}
  .hm-home .art-label small{font-size:9.5px;opacity:1;color:var(--hm-muted)}
  .hm-home .hero-copy{max-width:54%;min-height:236px;margin:0 0 0 auto}
  .hm-home .hero-copy .eyebrow{font-size:11px}
  .hm-home .hero h1{font-size:clamp(26px,8.6vw,34px);line-height:1.3;margin:8px 0}
  .hm-home .hero .intro{font-size:13px;line-height:1.85}
  .hm-home .hero .intro br{display:none}

  .hm-home .hm-dock{display:block;margin:6px 0 0;padding:10px;width:100%}
  .hm-home .hm-dock .search{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .hm-home .hm-dock .search label:first-child{grid-column:1/-1}
  .hm-home .hm-dock .search .solid{grid-column:auto;width:auto;align-self:end;padding:10px 14px}
  .hm-dock-links{display:grid;grid-template-columns:1fr 1fr;margin-top:8px}
  .hm-dock-links .hm-pill{justify-content:center;padding:8px 10px;font-size:13px}

  /* Three compact tiles in ONE row: image top, icon + title, arrow; whole tile is the link. */
  .hm-eco{padding:16px 5% 0}
  .hm-eco-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .hm-card{flex-direction:column;min-height:0;border-radius:14px}
  .hm-card-art{order:0;width:auto;max-width:none;height:78px;margin:6px 6px 0;border-radius:10px}
  .hm-card-body{padding:8px 8px 6px;gap:2px;justify-items:start}
  .hm-card-body b{font-size:15px;gap:5px}
  .hm-card-body b .hm-ic{width:18px;height:18px}
  .hm-card-body>span,.hm-card-body em>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hm-card-body em{min-height:32px}
  .hm-arrow{width:26px;height:26px}
  .hm-eco-note{font-size:12px;margin-top:10px}
  .hm-eco-note small{font-size:11.5px}

  .hm-home .market{padding-top:24px}
  .hm-home .market-results .card-art,.hm-home .market-results .card-art img{height:130px}
  .hm-home .market-results .card-body{padding:10px 12px 12px}
  .hm-home .market-results .card-body h3{font-size:14.5px}

  .hm-connect article{grid-template-columns:auto 1fr;padding:12px 14px;gap:6px 12px;min-height:0}
  .hm-connect button{grid-column:1/-1;width:100%}
}
@media (max-width:650px){.hm-home .market-results .card{flex-direction:column}}
@media (max-width:359px){
  .hm-home .hero-art{width:56%}
  .hm-home .hero-copy{max-width:58%}
  .hm-home .hero h1{font-size:25px}
  .hm-home .hero .intro{font-size:12.5px}
  .hm-home .hm-dock .search{grid-template-columns:1fr}
  .hm-home .hm-dock .search .solid{width:100%}
  .hm-card-body b{font-size:14px}
  .hm-card-body b .hm-ic{display:none}
  .hm-home .market-results .cards{grid-template-columns:1fr}
}