/* =========================================================
   Combrok Premium Theme (global) — UPDATED
   - Header alignment fixed (menu closer to logo, better spacing)
   - Keeps your ribbon/offcanvas/hero/awards behavior
   - Safe overrides added at the bottom
   ========================================================= */

/* ==============
   THEME TOKENS
   ============== */
:root{
  --brand-blue:#69B8E3;
  --brand-blue-200:#CFEAF7;
  --brand-blue-400:#7FC3E7;
  --brand-blue-600:#218CCF;
  --brand-blue-700:#0F6DA9;
  --brand-blue-800:#0A4E73; /* ribbon + footer */
  --accent-green:#8BC653;

  /* ---- Futuristic accent system (Phase 2 redesign) ---- */
  --accent-electric:#12D8E0;      /* electric cyan pop */
  --accent-electric-2:#3E7BFA;    /* electric-blue pair, for gradients */
  --accent-violet:#7C6CF0;        /* rare tertiary accent, sparingly used */
  --grad-brand: linear-gradient(135deg, var(--brand-blue-700) 0%, var(--brand-blue-600) 45%, var(--accent-electric) 100%);
  --grad-mesh-a: radial-gradient(60% 60% at 12% -10%, rgba(18,216,224,.16), transparent 65%);
  --grad-mesh-b: radial-gradient(55% 55% at 108% 10%, rgba(62,123,250,.14), transparent 65%);
  --grad-mesh-c: radial-gradient(50% 50% at 50% 120%, rgba(33,140,207,.10), transparent 70%);
  --glass-bg: rgba(255,255,255,.66);
  --glass-border: rgba(255,255,255,.55);
  --glow-electric: 0 0 0 1px rgba(18,216,224,.18), 0 18px 40px rgba(18,216,224,.16);

  --ink:#0b1720;
  --bg:#fbfdff;
  --soft:#F5FAFE;
  --border:#e6eef4;
  --shadow:0 12px 40px rgba(0,0,0,.08);
  --shadow-lg:0 24px 64px rgba(10,40,70,.12);

  /* Fixed header stack heights */
  --nav-h:68px;
  --ribbon-h:44px;

  /* Ribbon fallback speed */
  --ribbon-speed:36s;
  --radius-xl:18px;
  --radius-2xl:26px;
}

/* Reserve space for navbar+ribbon */
body{
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background:
    var(--grad-mesh-a),
    var(--grad-mesh-b),
    var(--grad-mesh-c),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top:calc(var(--nav-h) + var(--ribbon-h));
}

/* Selection + focus polish */
::selection{ background:rgba(18,216,224,.30); color:var(--ink); }
a, button, .btn, input, select, textarea{ outline-color:var(--accent-electric); }
:focus-visible{ outline:2px solid var(--accent-electric); outline-offset:2px; }

/* Utilities */
.wrap{ max-width:1180px; margin-inline:auto; padding-inline:12px; }
img.rounded-10{ border-radius:10px; }
.accent{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-text{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* =========================
   NAVBAR (fixed + premium)
   ========================= */
.premium-navbar{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--nav-h);
  z-index:3000;                 /* above ribbon & content */
  background:#fff;
  border-bottom:1px solid var(--border);
  transition:box-shadow .25s ease;
  perspective:1000px;           /* subtle 3D hover (desktop) */
}

.premium-navbar.nav-scrolled{
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  backdrop-filter:saturate(180%) blur(8px);
}

.navbar-brand{ margin-left:2px; }
.brand-float{
  height:60px; width:auto; object-fit:contain; border-radius:10px;
  transform-origin:left center;
  transition:transform .2s ease, filter .2s ease;
}

/* Toggler (always visible) */
.navbar-toggler{ border:0; box-shadow:none !important; }
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(15,109,169,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* =========================================================
   NAV PILLS + CTA — modern, unified, consistent sizing
   Single source of truth: fixed height, identical padding/
   radius/weight across all links so every pill matches
   regardless of label length.
   ========================================================= */
:root{
  --nav-pill-h:42px;
}
.premium-navbar .navbar-nav{
  align-items:center;
  gap:4px;
}
.nav-link.premium-link,
.btn.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--nav-pill-h);
  box-sizing:border-box;
  border:1px solid transparent;
  border-radius:999px;
  margin:0;
  padding:0 1.05rem;
  white-space:nowrap;
  line-height:1;
  font-weight:650;
  font-size:.94rem;
  letter-spacing:.1px;
  color:var(--ink);
  background:transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

/* Desktop polish */
@media (hover:hover) and (min-width:992px){
  .premium-navbar .navbar-brand:hover .brand-float{
    transform:translateY(-4px) scale(1.03);
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.15));
  }
  .premium-navbar .nav-link.premium-link:hover{
    transform:translateY(-2px);
    color:var(--brand-blue-800);
    background:rgba(33,140,207,.08);
    border-color:rgba(33,140,207,.18);
  }
}

/* Active state */
.nav-link.premium-link.active,
.nav-link.premium-link[aria-current="page"]{
  transform:translateY(0);
  color:#fff !important;
  background:var(--grad-brand);
  border-color:transparent;
  box-shadow:0 8px 20px rgba(33,140,207,.28);
}

/* Primary CTA (Private Sale) — always filled, stands apart from nav links */
.btn.nav-cta.btn-brand,
.btn-brand.nav-cta{
  color:#fff !important;
  background:var(--grad-brand);
  border-color:transparent;
  font-weight:750;
  box-shadow:0 10px 24px rgba(33,140,207,.28);
}
@media (hover:hover){
  .btn.nav-cta.btn-brand:hover,
  .btn-brand.nav-cta:hover{
    transform:translateY(-2px);
    box-shadow:var(--glow-electric), 0 14px 30px rgba(33,140,207,.3);
  }
}
.btn.nav-cta.btn-brand.active,
.btn-brand.nav-cta.active{
  box-shadow:inset 0 2px 6px rgba(0,0,0,.18);
}

.btn-outline-primary.nav-cta{
  color:var(--brand-blue-700);
  border-color:var(--brand-blue-600);
}
.btn-outline-primary.nav-cta:hover{
  background:var(--brand-blue-600);
  color:#fff;
}

/* Desktop color specificity vs .navbar-light + alignment safeguards */
@media (min-width:992px){
  .premium-navbar.navbar-light .navbar-nav .nav-link.premium-link{ color:var(--ink); }
  .premium-navbar.navbar-light .navbar-nav .nav-link.premium-link:hover{ color:var(--brand-blue-800); }

  .premium-navbar .container,
  .premium-navbar .wrap{
    height: var(--nav-h);
    display:flex;
    align-items:center;
  }

  /* (Old behavior was pushing menu too far right; override later) */
  .premium-navbar .navbar-brand{ padding-top:0; padding-bottom:0; }
  .premium-navbar .brand-float{ height:56px; }
}

/* With 7 links + CTA, tighten slightly at the lg breakpoint so
   everything still fits on one line without wrapping/overflow. */
@media (min-width:992px) and (max-width:1220px){
  .premium-navbar .navbar-nav{ gap:1px; }
  .nav-link.premium-link{ padding:0 .78rem; font-size:.88rem; }
  .btn.nav-cta{ padding:0 .95rem; font-size:.88rem; }
}

/* =========================
   MINI RIBBON (fixed under navbar)
   ========================= */
.mini-ribbon{
  position:fixed;
  top:var(--nav-h);
  left:0; right:0;
  height:var(--ribbon-h);
  z-index:2900;                 /* below navbar, above content */
  background:var(--brand-blue-800);
  color:#fff;
  display:flex; align-items:center;
  overflow:hidden;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  font-weight:600; letter-spacing:.4px;
}
.mini-ribbon .wrap{ padding-left:10px; padding-right:12px; }
.mini-ribbon strong{ white-space:nowrap; margin-right:10px; }

/* One-at-a-time lane */
#ribbonRotator{
  position:relative; height:var(--ribbon-h);
  overflow:hidden; white-space:nowrap; flex:1 1 auto;
  line-height:var(--ribbon-h); text-align:left;
}
#ribbonRotator .ribbon-msg{
  position:absolute; inset:0; margin:0 auto; width:100%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:0; transform:translateX(100%);
  transition:transform 1.7s ease, opacity 1.05s ease;
  will-change:transform, opacity;
}
#ribbonRotator .ribbon-msg.show{ opacity:1; transform:translateX(0); }
#ribbonRotator .ribbon-msg.exit{ opacity:0; transform:translateX(-100%); }

/* Fallback marquee */
.ribbon-fallback{
  position:relative; height:var(--ribbon-h);
  overflow:hidden; line-height:var(--ribbon-h); white-space:nowrap; flex:1 1 auto;
}
.ribbon-fallback .ribbon-track{
  display:inline-block; padding-left:100%;
  will-change:transform; animation:ribbonTicker var(--ribbon-speed) linear infinite;
}
.ribbon-fallback .chunk{ display:inline-block; margin:0 36px; color:#fff; font-weight:600; }
.ribbon-fallback:hover .ribbon-track{ animation-play-state:paused; }
@keyframes ribbonTicker{ 0%{transform:translateX(0%)} 100%{transform:translateX(-100%)} }
.ticker-track{ animation:none !important; }

/* =========================
   OFFCANVAS (mobile): below header, fits content, centered title
   ========================= */
.offcanvas.premium-offcanvas{
  position:fixed;
  z-index:3200;                                   /* above header/backdrop */
  top:calc(var(--nav-h) + var(--ribbon-h));       /* under header stack */
  bottom:auto;
  height:auto;                                    /* fit content */
  max-height:calc(100vh - (var(--nav-h) + var(--ribbon-h) + 12px));
  right:12px; left:auto;
  width:70vw; max-width:300px;                    /* slim drawer */
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.offcanvas.premium-offcanvas .offcanvas-header{
  padding:.55rem .8rem .35rem;
  border-bottom:1px solid var(--border);
  position:relative;
  min-height:44px;
}
.offcanvas.premium-offcanvas .offcanvas-title{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  width:max-content;
  font-weight:700;
}
.offcanvas.premium-offcanvas .btn-close{
  position:absolute;
  right:8px; top:50%;
  transform:translateY(-50%);
}
.offcanvas.premium-offcanvas .offcanvas-body{ padding:.45rem .8rem .55rem; }
.offcanvas.premium-offcanvas .navbar-nav{ gap:.2rem; }
.offcanvas.premium-offcanvas .nav-link,
.offcanvas.premium-offcanvas .btn.nav-cta{
  height:44px;
  font-size:.92rem !important;
  padding:0 .9rem !important;
  border-radius:12px !important;
  width:100%;
  text-align:center;
  font-weight:650;
}
.offcanvas.premium-offcanvas .btn.nav-cta{
  margin-top:6px;
  border:1px solid transparent;
  background:var(--grad-brand);
  color:#fff;
  font-weight:750;
}
.offcanvas.premium-offcanvas .btn.nav-cta:hover{
  transform:translateY(-1px);
  box-shadow:var(--glow-electric);
}
.offcanvas-backdrop.show{
  position:fixed;
  top:calc(var(--nav-h) + var(--ribbon-h));
  left:0; right:0;
  height:calc(100vh - (var(--nav-h) + var(--ribbon-h)));
  z-index:3190;
}

/* Make drawer behave like inline nav on desktop */
@media (min-width: 992px){
  .offcanvas.premium-offcanvas{
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    width: auto !important;
    max-width: none !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .offcanvas.premium-offcanvas .offcanvas-header{ display: none !important; }
  .offcanvas.premium-offcanvas .offcanvas-body{ padding: 0 !important; }
  .offcanvas-backdrop{ display:none !important; }
}

/* =========================
   HERO (carousel) + fast fade + Ken Burns
   ========================= */
.hero .carousel-item{ height:70vh; min-height:420px; }
.hero .carousel-item img{
  object-fit:cover; width:100%; height:100%;
  filter:none !important; image-rendering:auto;
  transform: scale(1);
  animation: none;
  will-change: transform;
}
.carousel.carousel-fade .carousel-item{
  transition-property: opacity;
  transition-duration: .6s;
  transition-timing-function: ease-out;
}
.hero .carousel-item.active img{
  animation: kenburnsZoom 3.6s ease-in-out both;
}
@keyframes kenburnsZoom{
  0%{ transform: scale(1) }
  100%{ transform: scale(1.06) }
}
.carousel-control-prev-icon, .carousel-control-next-icon{
  filter:invert(1) drop-shadow(0 0 2px rgba(0,0,0,.25));
}
.carousel-indicators [data-bs-target]{
  background-color:var(--accent-electric);
  width:10px; height:10px; border-radius:50%; opacity:.6;
}
.carousel-indicators .active{ opacity:1; box-shadow:0 0 0 3px rgba(18,216,224,.3); }

/* Thin gradient accent line under the hero */
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--grad-brand);
  z-index:2;
}

/* Floating trapezium stats */
.stats-float{
  position:absolute; left:18px; bottom:18px; z-index:2;
  color:#fff; padding:14px 16px; width:320px; max-width:80vw;
  background:linear-gradient(135deg, rgba(10,78,115,.5), rgba(18,216,224,.28));
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,.3); border-radius:12px;
  clip-path:polygon(0 0, 90% 0, 100% 100%, 0 100%);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.stats-float .stat-card{ display:none; }
.stats-float .stat-card.show{ display:block; }
.stats-float .i{ font-size:42px; line-height:1; margin-right:10px; vertical-align:middle }
.stats-float strong{ font-size:22px; font-weight:800; vertical-align:middle }
.stats-float small{ display:block; margin-top:4px; font-size:13px; opacity:.95 }

/* =========================
   SECTIONS & CARDS
   ========================= */
.section-pad{ padding-block:56px; }
.stats-strip{
  background:linear-gradient(90deg,#EAF6FC,#CFEAF7);
  border-top:1px solid #CFEAF7;
  padding:36px 0 54px;
}
.cardy{
  background:var(--glass-bg);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glass-border); border-radius:16px;
  padding:14px 16px; box-shadow:0 10px 24px rgba(0,0,0,.06);
  display:flex; align-items:center; gap:12px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cardy:hover{ transform:translateY(-3px); box-shadow:var(--glow-electric); }
.cardy .i{ font-size:28px }

/* Images & bullets */
.soft{ border:1px solid var(--border); border-radius:20px; }
.premium-bullets li{ padding-left:28px; position:relative; margin-bottom:10px; }
.premium-bullets li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:10px; height:10px; border-radius:999px; background:#69B8E3; box-shadow:0 0 0 3px rgba(105,184,227,.25);
}

/* ---- Why Combrok / ratio images ---- */
.why-img.card{
  border-radius:20px; overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.why-img .ratio{ --bs-aspect-ratio:56.25%; } /* 16:9 */
.why-img .ratio > picture,
.why-img .ratio > img,
.why-img .ratio > video{
  position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover;
}
.why-img .ratio > picture > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (hover:hover){
  .why-img .ratio > picture > img,
  .why-img .ratio > img{ transition:transform .6s ease; }
  .why-img:hover .ratio > picture > img,
  .why-img:hover .ratio > img{ transform:scale(1.04); }
}

/* =========================
   VISION / MISSION / VALUES
   (glass cards — used on Home)
   ========================= */
.cards{
  display:grid; grid-template-columns:1fr; gap:20px;
}
@media (min-width:900px){
  .cards{ grid-template-columns:repeat(3,1fr); gap:22px; }
}
.card.hover.reveal{
  position:relative;
  background:var(--glass-bg);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  padding:26px 24px 24px;
  box-shadow:0 14px 34px rgba(10,40,70,.07);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
.card.hover.reveal::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--grad-brand);
  opacity:.9;
}
.card.hover.reveal:hover{
  transform:translateY(-6px);
  box-shadow:var(--glow-electric), 0 20px 44px rgba(10,40,70,.12);
  border-color:rgba(18,216,224,.35);
}
.card.hover.reveal .with-icon{
  display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem;
  font-size:1.05rem; font-weight:800; color:var(--brand-blue-800);
}
.card.hover.reveal .with-icon .i{
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; flex:none;
  background:var(--grad-brand);
  color:#fff;
  box-shadow:0 8px 18px rgba(33,140,207,.28);
}
.card.hover.reveal .with-icon .i svg{ width:19px; height:19px; }
.card.hover.reveal p{ color:#3d5568; margin:0; line-height:1.6; }
.card.hover.reveal .bullets{
  padding-left:0; margin:0; list-style:none;
  display:flex; flex-direction:column; gap:8px;
}
.card.hover.reveal .bullets.values-inline{
  flex-direction:column; align-items:flex-start; gap:8px;
}
.card.hover.reveal .bullets li{
  position:relative; padding-left:18px; line-height:1.35; color:#3d5568; font-weight:600;
}
.card.hover.reveal .bullets li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:999px;
  background:var(--accent-electric); box-shadow:0 0 0 3px rgba(18,216,224,.22);
}

/* =========================
   AUCTION PROCESS
   ========================= */
.auction-process{
  background: var(--soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: 80px;
}
.auction-heading{
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--brand-blue-800);
  margin-bottom: 0.5rem;
  text-align:center;
}
.auction-subtitle{
  max-width: 640px;
  margin: 0 auto 2.5rem;
  font-size: 1.1rem;
  color: #444;
  text-align:center;
}
.auction-steps{
  position: relative;
  max-width: 950px;
  margin: 0 auto 3rem;
  padding-inline: 1rem;
}
.auction-line{ display: none; }
@media (min-width: 768px){
  .auction-line{
    display: block;
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(33,140,207,.35), rgba(18,216,224,.45));
    transform: translateY(-50%);
  }
}
.auction-grid{
  display: grid;
  grid-template-columns: repeat(1,1fr);
  gap: 2rem;
}
@media (min-width: 768px){
  .auction-grid{ grid-template-columns: repeat(4,1fr); gap: 2rem; }
}
.auction-step{
  text-align: center;
  position: relative;
  z-index: 2;
  transition: transform .25s ease, box-shadow .25s ease;
}
.auction-step:hover{ transform: translateY(-4px); }
.auction-step h3{
  font-size: 1.15rem;
  font-weight: 600;
  color: #0b1720;
  margin-bottom: .35rem;
}
.auction-step p{ color: #555; font-size: .95rem; line-height: 1.45; }
.auction-circle{
  height: 64px; width: 64px;
  background: var(--grad-brand);
  color: #fff; font-weight: 700; font-size: 1.25rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 6px 14px rgba(33,140,207,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.auction-step:hover .auction-circle{
  transform: scale(1.1);
  box-shadow: var(--glow-electric);
}
.reveal._in .auction-step{ animation: fadeInUp .7s ease both; }
.reveal._in .auction-step:nth-child(1){ animation-delay: .05s; }
.reveal._in .auction-step:nth-child(2){ animation-delay: .15s; }
.reveal._in .auction-step:nth-child(3){ animation-delay: .25s; }
.reveal._in .auction-step:nth-child(4){ animation-delay: .35s; }
@keyframes fadeInUp{ 0%{opacity:0;transform:translateY(20px)} 100%{opacity:1;transform:none} }
.auction-btn .btn-brand{
  border-radius: 999px;
  padding: .7rem 1.4rem;
  background: var(--grad-brand);
  border: none;
}
.auction-btn .btn-brand:hover{ box-shadow:var(--glow-electric); }

/* =========================
   CTA WIDE (Request Data)
   ========================= */
.cta-wide{
  position:relative;
  background:linear-gradient(90deg, #EAF6FC, #CFEAF7);
  border-top:1px solid #CFEAF7;
  border-bottom:1px solid #e6eef4;
  padding:54px 0;
  overflow:hidden;
}
.cta-wide::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(10,78,115,.06) 1px, transparent 1px);
  background-size:16px 16px;
  opacity:.5;
  pointer-events:none;
}
.cta-wide .wrap{ position:relative; z-index:1; }
.cta-wide h3{ color:#0b1720; }
.cta-wide p{ color:#4b5563; }
.cta-wide .btn.btn-brand{
  background:var(--grad-brand);
  border:none;
  border-radius: 999px;
  box-shadow:0 10px 22px rgba(15,109,169,.18), 0 4px 10px rgba(15,109,169,.12);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cta-wide .btn.btn-brand:hover{
  transform:translateY(-2px);
  box-shadow:var(--glow-electric), 0 14px 30px rgba(15,109,169,.22);
}

/* =========================
   REVEAL
   ========================= */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal._in{ opacity:1; transform:none; }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:991.98px){
  .brand-float{ height:56px; }
  .hero .carousel-item{ height:60vh; }
  .stats-float{ left:12px; right:12px; width:auto; clip-path:polygon(0 0, 92% 0, 100% 100%, 0 100%); }
}
@media (max-width:480px){
  :root{ --ribbon-h:40px; }
}

/* Safety: keep content above stacking */
.hero, .section, .wrap, .container{ position:relative; z-index:1; }

/* Ensure the ribbon always under the navbar */
.premium-navbar{ z-index: 3000; }
.mini-ribbon{ z-index: 2900; }

/* Optional: zero out Bootstrap default navbar paddings to lock 68px height */
.premium-navbar.navbar{ padding-top:0; padding-bottom:0; }

/* ==========================================================
   HERO AWARDS – FULL IMAGE MODE (FINAL OVERRIDE)
   ========================================================== */
.hero-awards{ min-height: 340px; position: relative; }
@media (min-width: 992px){ .hero-awards{ min-height: 380px; } }

.hero-awards.image-only{
  padding: 0 !important;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}
.hero-awards.image-only .hero-awards-head,
.hero-awards.image-only .award-body,
.hero-awards.image-only .hero-awards-dots{ display: none !important; }

.hero-awards.image-only .hero-awards-slider,
.hero-awards.image-only .award-slide.active,
.hero-awards.image-only .award-image{ width: 100%; height: 100%; }

.hero-awards.image-only .award-slide{ display: block !important; }

.hero-awards.image-only .award-image picture,
.hero-awards.image-only .award-image img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0;
}

.award-image{ cursor: zoom-in; }
.hero-awards.image-only .award-image{ cursor: zoom-out; }
.award-media .ratio picture,
.award-media .ratio img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* ==========================================================
   HOMEPAGE AWARDS — SPOTLIGHT REDESIGN
   ========================================================== */
.awards-strip{
  position:relative;
  background:linear-gradient(180deg,#ffffff, #f7fbff);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.awards-strip::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(18,216,224,.10) 1px, transparent 1px);
  background-size:18px 18px;
  opacity:.6;
  pointer-events:none;
}
.awards-strip .wrap{ position:relative; z-index:1; }

/* Eyebrow tag above the heading */
.awards-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .9rem;
  margin-bottom:12px;
  border-radius:999px;
  background:rgba(18,216,224,.10);
  border:1px solid rgba(18,216,224,.25);
  color:var(--brand-blue-800);
  font-weight:800;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Showcase wrapper: centres the single spotlight card and gives
   the section some presence instead of a small card floating
   in a lot of empty space. */
.awards-showcase{
  position:relative;
  max-width:820px;
  margin:0 auto;
  padding:8px;
}
.awards-glow{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(46% 60% at 15% 10%, rgba(18,216,224,.16), transparent 70%),
    radial-gradient(46% 60% at 88% 92%, rgba(33,140,207,.14), transparent 70%);
  filter:blur(6px);
  pointer-events:none;
  z-index:0;
}

.award-card{
  position:relative;
  z-index:1;
  border-radius:26px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--glass-border);
  box-shadow:0 24px 56px rgba(10,40,70,.12);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display:flex;
  flex-direction:column;
}
/* The award photo is a portrait shot (3:4) — from ~576px up we
   switch to a side-by-side layout so the full photo (and the
   trophy in it) shows properly instead of being cropped into a
   short landscape strip. */
@media (min-width:576px){
  .award-card{ flex-direction:row; align-items:stretch; }
}
.award-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--grad-brand);
  z-index:2;
}
@media (hover:hover){
  .award-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--glow-electric), 0 30px 64px rgba(10,40,70,.16);
    border-color:rgba(18,216,224,.35);
  }
}

.award-media{
  position:relative;
  width:100%;
  aspect-ratio:3 / 4;
  background:#0a0f14;
  flex:0 0 auto;
  transition:width .25s ease, height .25s ease;
}
@media (min-width:576px){
  .award-media{ width:40%; max-width:280px; }
}
.award-media .ratio{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#0a0f14;
}
.award-media .ratio picture,
.award-media .ratio img,
.award-media .ratio picture img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center top !important;
}
/* soft scrim so the medal seal always reads clearly */
.award-media::before{
  content:"";
  position:absolute; inset:auto 0 0 0; height:34%;
  background:linear-gradient(180deg, transparent, rgba(4,14,22,.5));
  pointer-events:none;
  z-index:1;
}

/* Medal seal — sits inside the image corner */
.award-medal{
  position:absolute;
  left:16px; bottom:16px;
  z-index:3;
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:linear-gradient(135deg,#f6c453,#e2a324);
  color:#5a3b00;
  box-shadow:0 10px 22px rgba(226,163,36,.4), 0 0 0 4px rgba(255,255,255,.9);
}

.award-body{
  position:relative;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px;
  background:linear-gradient(180deg,#ffffff, #fbfdff);
}
.award-year{
  display:inline-block;
  align-self:center;
  margin:0 auto 14px;
  padding:.5rem 1.4rem;
  border-radius:999px;
  background:rgba(33,140,207,.10);
  color:var(--brand-blue-700);
  font-weight:900;
  font-size:1.35rem;
  letter-spacing:.08em;
}
.award-title{
  font-size:1.4rem;
  font-weight:900;
  color:var(--brand-blue-800);
  margin:0 0 8px;
  text-align:center;
}
.award-text{
  margin:0 auto;
  color:#4b5d6c;
  font-size:1rem;
  line-height:1.6;
  max-width:52ch;
  text-align:center;
}

.award-zoom-btn{
  position:absolute;
  inset:0;
  border:0;
  background:transparent;
  cursor:zoom-in;
  z-index:2;
}

/* "Tap to enlarge" affordance + expand icon, revealed on hover */
.award-hint{
  position:absolute;
  right:14px; top:14px;
  z-index:3;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background:rgba(4,14,22,.55);
  backdrop-filter:blur(4px);
  color:#fff;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  opacity:0;
  transform:translateY(-4px);
  transition:.2s ease;
  pointer-events:none;
}
@media (hover:hover){
  .award-card:hover .award-hint{ opacity:1; transform:none; }
}

/* Zoomed: drop the side-by-side split, show the full portrait
   photo large and centred, hide the copy. */
.award-card.is-zoomed{ flex-direction:column; }
.award-card.is-zoomed .award-body{ display:none !important; }
.award-card.is-zoomed .award-media{
  width:100%;
  max-width:none;
  aspect-ratio:auto;
  height:min(72vh, 640px);
}
.award-card.is-zoomed .award-medal{ display:none; }
.award-card.is-zoomed .award-zoom-btn{ cursor:zoom-out; }
.award-card.is-zoomed .award-hint{ opacity:1; transform:none; }
.award-card.is-zoomed .award-hint span{ display:none; }
.award-card.is-zoomed .award-hint::before{ content:"✕ Close"; }

@media (max-width: 575.98px){
  .award-media{ aspect-ratio:4 / 5; }
  .award-body{ padding:24px 20px; }
  .award-medal{ left:14px; bottom:14px; width:44px; height:44px; }
}

/* =========================================================
   ✅ HEADER ALIGNMENT OVERRIDES (FIX)
   - Move links closer to logo
   - Keep CTA on the right
   - Remove double "push-right" from ms-auto + margin-left:auto
   ========================================================= */

/* If you keep <div class="container wrap">, this prevents weird Bootstrap padding */
.premium-navbar .container.wrap{
  max-width:1180px;
  padding-left:12px;
  padding-right:12px;
}

/* Desktop layout: logo | nav (near logo) | CTA (right) */
@media (min-width: 992px){
  /* Make offcanvas behave like an inline flex row */
  .premium-navbar .offcanvas.premium-offcanvas{
    flex:1 1 auto;
    display:flex !important;
    align-items:center;
    justify-content:flex-start;
  }

  /* Bring menu closer to logo; stop pushing it to far right */
  .premium-navbar .navbar-nav,
  .premium-navbar .navbar-nav.ms-auto{
    margin-left:18px !important;   /* ✅ near logo */
    margin-right:auto !important;  /* ✅ leaves space for CTA at far right */
    gap:8px;
    align-items:center;
    flex-wrap:nowrap;
  }

  /* CTA to far right */
  .premium-navbar .navbar-nav .nav-item:last-child{
    margin-left:12px;
  }

  /* Logo sizing + spacing */
  .premium-navbar .brand-float{ height:54px; }
  .premium-navbar .navbar-brand{ margin-right:10px; }
}

/* Mobile: keep offcanvas centered & clean (already good) */
@media (max-width: 991.98px){
  .premium-navbar .navbar-nav{ gap:.25rem; }
}
/* ==========================================================
   Nav pill sizing/hierarchy is defined once, in the
   "NAV PILLS + CTA" block near the top of this file.
   ========================================================== */