* { margin:0; padding:0; box-sizing:border-box; }
  .hero-bg-wrap { position:absolute; inset:0; overflow:hidden; background:#1a1a1a;}
  .hero-bg {
    position:absolute; inset:0;
    background-size: cover;
    background-position: center;
    opacity: 0;
	background-repeat:no-repeat;
    transform-origin: 100% 50%; /* anchor right -> drifts left */
  }
  .hero-bg.active {
    opacity: 1;
    animation: kenburns 9s ease-out forwards, fadeIn 0.9s ease forwards;
  }
  @keyframes kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.09); }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .hero-overlay {
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(10,12,18,0.75) 0%, rgba(10,12,18,0.15) 42%, rgba(10,12,18,0.55) 78%, rgba(10,12,18,0.88) 100%);
  }
  /* nav */
  
  /* content */
  .hero-content {
    position: relative; 
	z-index:0;
    padding:0;
    margin-top:35vh;
    width:75%;
  }
  .eyebrow {
    display:inline-block;
	font-family:"akzidenz-grotesk-next-pro";
    font-size:14px;
	text-transform:uppercase;
    color:#e8a93a; 
	font-weight:700; 
	margin-bottom:5px;
    opacity:0; 
	transform: translateY(8px);
    animation: riseIn 0.6s ease forwards 0.15s;
  }
  .hero-content h1 {
	margin:0;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .45);
    font-size: 55px;
    font-weight:400;
	text-align:left;
	color:#FFF;
    line-height: 1.15;
    margin-bottom:0;
    opacity:0; 
	transform: translateY(14px);
    animation: riseIn 0.7s ease forwards 0.25s;
  }
  @keyframes riseIn {
    to { opacity:1; transform:translateY(0); }
  }

  .cta-btn {
    display:inline-flex; align-items:center; gap:12px;
    background:#ffc100; color:#1a1a1a; font-weight:400; font-size:15px;
    padding:16px 26px; text-decoration:none; letter-spacing:0.2px;
    transition: background 0.25s, transform 0.25s;
    opacity:0; transform: translateY(14px);
    animation: riseIn 0.7s ease forwards 0.35s;
  }
  .cta-btn:hover { background:#d69a2f; transform: translateY(-2px); }
  .cta-btn .arrow {
    width:26px; height:26px; border-radius:50%;
    border:1.5px solid #1a1a1a;
    display:flex; align-items:center; justify-content:center;
    font-size:14px;
  }

  /* tabs, BSR style */
  .hero-tabs { position:absolute; bottom:0; left:0; right:0; z-index:0;  }
  .tabs-inner { position:relative; }
  .tabs-list {
    display:flex; list-style:none;
    border-top: 1px solid rgba(255,255,255,0.28);
    position: relative;
	flex-wrap:wrap;
	gap:30px;
  }
  .tab-item {
    flex:1;
    padding: 25px 0;
    cursor:pointer;
    transition: opacity 0.25s;
    font-size:16px;
    font-weight:400;
    letter-spacing:0;
	color:rgba(255,255,255,0.9);
  }
  .tab-item:hover { opacity:0.9;}
  .tab-item.active { opacity:1; }
  .tab-num { display:block; font-size:15px; color:#e8a93a; letter-spacing:0; margin-bottom:5px; font-weight:400; }

  .tabs-track {
    position:absolute; top:-1px; left:0; height:2px;
    background:#e8a93a;
    width:25%;
    transform: translateX(0);
    opacity: 0; /* hidden until a tab is actually chosen */
    transition: transform 0.45s cubic-bezier(0.65,0,0.35,1), opacity 0.3s ease;
  }
  .tabs-track.visible { opacity: 1; }
  
@media (max-width: 991px) {
	.hero .banner-wrapper{min-height: 70vh;}
	.hero-content{width:100%; margin-top: 15vh;}
    .hero-content h1 { margin-bottom: 22px; font-size:35px;}
    .cta-btn { padding: 14px 22px; font-size: 14px; }
    .hero-tabs { padding: 0 20px; }
    .tabs-inner { position: static; } /* the sliding-underline track only makes sense
                                          for a single row; on mobile the tabs wrap
                                          into a 2x2 grid so we drop it entirely below */
    .tabs-track { display: none; }
    .tabs-list {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 8px;
      border-top: none;
    }
    .tab-item {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 6px;
      padding: 12px 12px 13px;
      font-size:18px;
      opacity: 1; /* full opacity on mobile — dimming reads as "disabled" on touch, not "inactive" */
      color: rgba(255,255,255,0.75);
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    .tab-item .tab-num { font-size: 10px; margin-bottom: 5px; }
    .tab-item.active {
      background: rgba(232,169,58,0.16);
      border-color: #e8a93a;
      color: #fff;
    }
  }

  @media (max-width: 767px) {
    .hero-content h1 { font-size: 26px; }
    .tabs-list { gap: 6px; }
    .tab-item { font-size: 11.5px; padding: 10px 10px 11px; }
  }
  @media (max-width: 480px) {
	.hero .banner-wrapper{min-height:80vh; justify-content:flex-end; padding-bottom: 30px;}
	.tabs-list{grid-template-columns: 1fr 1fr; gap:12px; }
	.hero-content h1 { font-size:30px; }
	.hero-content{margin-top: 20vh;}
  }
  @media (max-width:390px){
	.hero .banner-wrapper{min-height:90vh;}
	.hero-content{margin-top:15vh;}
	.hero-content a.dscvrbttnnew{margin-top:0; margin-bottom:20px;}
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-bg.active { animation: fadeIn 0.9s ease forwards; }
  }