/* ============================================================
   POS index2 — Hybrid edition
   Editorial header and slider; every section below
   #banner keeps the original index.php styling.
   ============================================================ */

.pos-v3{
  --v3-orange:#ff5a0a;
  --v3-orange-soft:#ff7a35;
  --v3-ink:#161719;
}

/* Header */
.pos-v3 #header-region{
  padding:19px 0;background:linear-gradient(180deg,rgba(10,11,12,.72),transparent);
  border:0;backdrop-filter:none;box-shadow:none;
}
.pos-v3 #header-region .row{max-width:1320px;padding-left:28px;padding-right:28px}
.pos-v3 #logo img{height:56px;filter:brightness(0) invert(1)}
.pos-v3 #header-region.scrolled{
  padding:10px 0;background:rgba(255,253,249,.96);backdrop-filter:blur(18px);
  box-shadow:0 12px 35px rgba(22,23,25,.12);border-bottom:1px solid rgba(22,23,25,.07);
}
.pos-v3 #header-region.scrolled #logo img{height:48px;filter:none}
.pos-v3 .site_main_menu{gap:4px}
.pos-v3 .site_main_menu a{
  color:#fff;padding:10px 16px;font-size:12px;letter-spacing:.1em;border-radius:0;
}
.pos-v3 .site_main_menu a::after{bottom:2px;width:calc(100% - 32px);height:1px;background:var(--v3-orange)}
.pos-v3 #header-region.scrolled .site_main_menu a{color:var(--v3-ink)}
.pos-v3 .site_main_menu .current-menu-item>a{color:var(--v3-orange)}
.pos-v3 .social-icons{gap:7px}
.pos-v3 .social-icons a{
  width:34px;height:34px;color:#fff;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.28);font-size:13px;
}
.pos-v3 #header-region.scrolled .social-icons a{color:var(--v3-ink);border-color:rgba(22,23,25,.14);background:transparent}
.pos-v3 #header-region.scrolled .social-icons a.social-icon-1:hover{
  color:#fff;background:#1877f2;border-color:#1877f2;box-shadow:0 8px 20px rgba(24,119,242,.28);
}
.pos-v3 #header-region.scrolled .social-icons a.social-icon-2:hover{
  color:#fff;background:var(--v3-orange);border-color:var(--v3-orange);box-shadow:0 8px 20px rgba(255,90,10,.28);
}
.pos-v3 #header-region.scrolled .social-icons a.social-icon-3:hover{
  color:#fff;background:#0a66c2;border-color:#0a66c2;box-shadow:0 8px 20px rgba(10,102,194,.28);
}
.pos-v3 .site_main_menu .sub-menu{border-radius:0;border-top:3px solid var(--v3-orange)}
.pos-v3 .site_main_menu .sub-menu a{color:var(--v3-ink)}
.pos-v3 .site_main_menu .sub-menu a:hover{
  color:var(--v3-orange);background:rgba(255,90,10,.06);
}

/* Editorial slider */
.pos-v3 #banner{height:100svh;min-height:700px;max-height:980px;background:var(--v3-ink)}
.pos-v3 .hero-slider{isolation:isolate;background:var(--v3-ink)}
.pos-v3 .hero-slide{
  opacity:0;transform:none;background-color:var(--v3-ink);background-size:auto 100%;
  background-position:right center;transition:opacity .85s cubic-bezier(.2,.65,.2,1);
}
.pos-v3 .hero-slide.active{opacity:1;transform:none}
.pos-v3 .hero-slide::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(90deg,var(--v3-ink) 0%,var(--v3-ink) 39%,rgba(22,23,25,.97) 43%,rgba(22,23,25,.55) 58%,rgba(22,23,25,.12) 77%),
    linear-gradient(180deg,rgba(0,0,0,.24),transparent 30%,transparent 70%,rgba(0,0,0,.45));
}
.pos-v3 .hero-slide::after{
  content:"";position:absolute;z-index:1;top:0;bottom:0;left:43%;width:1px;
  background:linear-gradient(180deg,transparent 14%,rgba(255,90,10,.85) 44%,transparent 86%);
  transform:skewX(-8deg);transform-origin:top;opacity:.8;
}
.pos-v3 .hero-slide .slide-content{
  position:relative;z-index:2;max-width:1320px;padding:105px 28px 90px;isolation:isolate;
}
.pos-v3 .hero-slide .slide-content::before{
  content:var(--slide-number);position:absolute;z-index:-1;left:8px;top:50%;transform:translateY(-54%);
  color:rgba(255,255,255,.035);font-size:clamp(190px,25vw,390px);font-weight:800;line-height:1;
  letter-spacing:-.1em;pointer-events:none;
}
.pos-v3 .hero-slide .slide-tag{
  margin:0 0 25px;padding:0;background:none;border:0;border-radius:0;backdrop-filter:none;
  color:var(--v3-orange-soft);font-size:10px;font-weight:800;letter-spacing:.23em;
}
.pos-v3 .hero-slide .slide-tag::before{width:42px;height:1px;border-radius:0;background:var(--v3-orange);box-shadow:none}

/* Deliberately smaller than index2 for a lighter left column. */
.pos-v3 .hero-slide .slide-content h2{
  max-width:520px;margin:0 0 25px;font-size:clamp(42px,4.6vw,64px);line-height:.94;
  letter-spacing:-.058em;text-shadow:none;text-wrap:balance;
}
.pos-v3 .hero-slide .slide-copy{
  max-width:455px;margin:0 0 30px;padding-left:18px;border-left:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.74);font-size:14px;line-height:1.68;font-weight:400;text-shadow:none;
}
.pos-v3 .hero-slide .slide-actions{gap:10px}
.pos-v3 .hero-slide .btn{
  min-width:142px;padding:13px 22px;border-radius:0;border-width:1px;font-size:10px;letter-spacing:.12em;
}
.pos-v3 .hero-slide .btn-primary{background:var(--v3-orange);border-color:var(--v3-orange);box-shadow:none}
.pos-v3 .hero-slide .btn-primary:hover{background:#fff;border-color:#fff;color:var(--v3-ink)}
.pos-v3 .hero-slide .slide-ghost{justify-content:center;border-color:rgba(255,255,255,.35)}

/* Layered entrance */
.pos-v3 .hero-slide .slide-tag,
.pos-v3 .hero-slide .slide-content h2,
.pos-v3 .hero-slide .slide-copy,
.pos-v3 .hero-slide .slide-actions{opacity:0;transform:translateX(-30px);filter:blur(5px)}
.pos-v3 .hero-slide .slide-tag{transition:opacity .55s .18s,transform .65s .18s,filter .55s .18s}
.pos-v3 .hero-slide .slide-content h2{transition:opacity .7s .28s,transform .8s .28s,filter .7s .28s}
.pos-v3 .hero-slide .slide-copy{transition:opacity .65s .4s,transform .75s .4s,filter .65s .4s}
.pos-v3 .hero-slide .slide-actions{transition:opacity .65s .5s,transform .75s .5s,filter .65s .5s}
.pos-v3 .hero-slide.active .slide-tag,
.pos-v3 .hero-slide.active .slide-content h2,
.pos-v3 .hero-slide.active .slide-copy,
.pos-v3 .hero-slide.active .slide-actions{opacity:1;transform:translateX(0);filter:blur(0)}

/* Scene selector */
.pos-v3 .slider-bullets{
  left:max(28px,calc((100vw - 1320px)/2 + 28px));right:auto;bottom:34px;transform:none;gap:6px;
}
.pos-v3 .slider-bullet{
  display:flex;align-items:center;justify-content:center;width:44px;height:32px;border-radius:0;
  background:transparent;box-shadow:none;color:rgba(255,255,255,.4);font-size:10px;font-weight:800;
  letter-spacing:.08em;border-bottom:1px solid rgba(255,255,255,.18);transition:all .3s ease;
}
.pos-v3 .slider-bullet:hover{background:transparent;color:#fff;transform:none;border-color:#fff}
.pos-v3 .slider-bullet.active{width:74px;color:#fff;background:transparent;box-shadow:none;transform:none;border-color:var(--v3-orange)}
.pos-v3 .slider-v2-ui{
  position:absolute;z-index:10;right:max(28px,calc((100vw - 1320px)/2 + 28px));bottom:30px;
  display:flex;align-items:center;gap:24px;color:#fff;
}
.pos-v3 .slider-v2-caption{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:.12em}
.pos-v3 .slider-v2-line{position:relative;width:110px;height:1px;background:rgba(255,255,255,.25);overflow:hidden}
.pos-v3 .slider-v2-line i{position:absolute;inset:0;background:var(--v3-orange);transform:scaleX(0);transform-origin:left}
.pos-v3 .slider-v2-line i.is-running{animation:v3Progress 7.2s linear forwards}
.pos-v3 .slider-v2-total{color:rgba(255,255,255,.45)}
.pos-v3 .slider-v2-arrows{display:flex;gap:1px}
.pos-v3 .slider-v2-arrows button{
  width:48px;height:48px;border:1px solid rgba(255,255,255,.28);background:rgba(22,23,25,.22);color:#fff;
  cursor:pointer;font-size:15px;transition:background .3s,border-color .3s,transform .3s;
}
.pos-v3 .slider-v2-arrows button:hover{background:var(--v3-orange);border-color:var(--v3-orange);transform:translateY(-2px)}
@keyframes v3Progress{to{transform:scaleX(1)}}

@media (max-width:1024px){
  .pos-v3 #banner{min-height:650px}
  .pos-v3 .hero-slide{background-position:65% center}
  .pos-v3 .hero-slide::before{background:linear-gradient(90deg,var(--v3-ink) 0%,rgba(22,23,25,.96) 48%,rgba(22,23,25,.38) 100%)}
  .pos-v3 .hero-slide::after{left:53%}
  .pos-v3 .hero-slide .slide-content h2{max-width:480px;font-size:clamp(41px,6.2vw,58px)}
}

@media (max-width:900px){
  .pos-v3 #header-region{padding:11px 0;background:linear-gradient(180deg,rgba(10,11,12,.78),transparent)}
  .pos-v3 #header-region .row{padding-right:82px}
  .pos-v3 #logo img{height:45px}
  .pos-v3 .menu-button{top:11px;right:20px;border-radius:0;background:var(--v3-orange);border-color:var(--v3-orange)}
  .pos-v3 #main_navigation{top:calc(100% + 4px);left:20px;right:20px;border-radius:0}
  .pos-v3 .site_main_menu a,.pos-v3 #header-region.scrolled .site_main_menu a{color:var(--v3-ink)!important}
  .pos-v3 .site_main_menu .current-menu-item>a{color:var(--v3-orange)!important}
}

@media (max-width:680px){
  .pos-v3 #banner{height:92svh;min-height:620px;max-height:none}
  .pos-v3 .hero-slide{align-items:flex-end;background-position:64% center}
  .pos-v3 .hero-slide::before{background:linear-gradient(180deg,rgba(22,23,25,.48) 0%,rgba(22,23,25,.72) 30%,rgba(22,23,25,.98) 78%,var(--v3-ink) 100%)}
  .pos-v3 .hero-slide::after{display:none}
  .pos-v3 .hero-slide .slide-content{display:flex;justify-content:flex-end;flex-direction:column;padding:120px 20px 128px}
  .pos-v3 .hero-slide .slide-content::before{left:auto;right:28px;top:26%;font-size:160px}
  .pos-v3 .hero-slide .slide-tag{margin-bottom:15px}
  .pos-v3 .hero-slide .slide-content h2{max-width:390px;margin-bottom:16px;font-size:clamp(35px,10.4vw,47px)}
  .pos-v3 .hero-slide .slide-copy{max-width:420px;margin-bottom:21px;padding-left:14px;font-size:12px;line-height:1.6}
  .pos-v3 .hero-slide .slide-actions{flex-direction:row;align-items:center;gap:8px}
  .pos-v3 .hero-slide .btn{min-width:0;padding:12px 16px;font-size:10px}
  .pos-v3 .slider-bullets{left:20px;bottom:24px;gap:2px}
  .pos-v3 .slider-bullet{width:34px}.pos-v3 .slider-bullet.active{width:50px}
  .pos-v3 .slider-v2-ui{right:20px;bottom:20px}
  .pos-v3 .slider-v2-caption{display:none}
  .pos-v3 .slider-v2-arrows button{width:40px;height:40px}
}

@media (max-width:410px){
  .pos-v3 #banner{min-height:590px}
  .pos-v3 .hero-slide .slide-content{padding-bottom:116px}
  .pos-v3 .hero-slide .slide-content h2{font-size:33px}
  .pos-v3 .hero-slide .slide-actions .slide-ghost{display:none}
  .pos-v3 .slider-bullet{width:30px}.pos-v3 .slider-bullet.active{width:42px}
}

@media (prefers-reduced-motion:reduce){
  .pos-v3 #banner *, .pos-v3 #header-region *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
