:root{
  --brand:#0d6efd; /* bootstrap primary */
  --brand-2:#6610f2; /* secondary blend */
  --accent:#ffc107; /* gold to match logo */
  --dark:#0b1220;
  --muted:#6c757d;
  --bg-soft:#f7f9fc;
  --ink:#1b1f23;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;display:flex;flex-direction:column}
.app-navbar{box-shadow:0 6px 24px rgba(0,0,0,.08);backdrop-filter:saturate(150%) blur(6px);border-bottom:1px solid rgba(13,110,253,.15);border-top:0}
/* Remove default horizontal padding so brand can sit flush-left */
.app-navbar.navbar{padding-left:0;padding-right:0}
/* Compact, industry‑standard navbar sizing with precise logo fit */
:root{--nav-h:56px}
.app-navbar{--nav-h:56px}
@media (max-width: 992px){.app-navbar{--nav-h:52px}}
@media (max-width: 576px){.app-navbar{--nav-h:44px}}
.app-navbar .navbar-brand{height:var(--nav-h);padding-top:0;padding-bottom:0}
.navbar .navbar-brand{flex:0 0 auto;min-width:0;margin-right:clamp(.5rem,1.2vw,1rem)}
.navbar-brand .logo{height:100%;max-height:100%;width:auto;display:block;object-fit:contain;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.18))}
.navbar-brand .logo.logo-wide{height:100%;max-height:100%;width:auto}
.brand-wrap{max-width:min(48vw, 520px); overflow:hidden}
.brand-text{font-weight:700;color:var(--ink);letter-spacing:.2px;font-size:clamp(1rem,2vw,1.15rem);line-height:1.1}
/* Brand glow kept light and only behind logo */
.brand-logo-wrap{position:relative;display:inline-block}
.brand-logo-wrap::before{content:"";position:absolute;inset:-4px -6px -4px -6px;background:radial-gradient(ellipse at 30% 50%, rgba(255,208,0,.10), rgba(255,208,0,0) 55%);filter:blur(6px);z-index:0;pointer-events:none}
.brand-logo-wrap .logo{position:relative;z-index:1}
.brand-glow{animation:none}
@media (prefers-reduced-motion: reduce){.brand-glow{animation:none}}

/* Navigation link styling: subtle underline grow */
.navbar-nav .nav-link{position:relative;font-weight:600;color:var(--ink)}
.navbar-nav .nav-link::after{content:none}
.navbar-nav .nav-link:visited,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{color:var(--ink)}

/* Sliding indicator for desktop nav (professional click effect) */
.nav-area{position:relative}
.nav-indicator{position:absolute;left:0;bottom:.35rem;height:2px;background:var(--accent);border-radius:1px;width:0;opacity:0;transition:left .25s ease,width .25s ease, opacity .2s ease}
@media (max-width: 991.98px){.nav-indicator{display:none}}

/* Hero */
.hero-section{position:relative;min-height:68vh}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg, rgba(13,110,253,.55), rgba(102,16,242,.35))}
@media (max-width: 576px){.hero-section{min-height:56vh}}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-section .container{position:relative;z-index:2}
.hero-section .hero-overlay{z-index:1}
.hero-bg .carousel,.hero-bg .carousel-inner,.hero-bg .carousel-item{height:100%}
.hero-bg .carousel-item{position:relative}
.hero-bg .carousel-item img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
.hero-bg .carousel-item::before{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 80% at 20% 20%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%),
  linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35));
  mix-blend-mode: overlay;opacity:.35;pointer-events:none}
.trust-badges span{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.15);padding:.375rem .625rem;border-radius:.5rem}
.trust-badges i{font-size:1.15rem}

/* Cards */
.feature-card .card-img-top{max-height:220px}
.value-list li{margin:.5rem 0}
/* Card accent and glossy hover */
.feature-card,.thumb-card{border:1px solid rgba(0,0,0,.06);background:#fff;border-radius:.85rem;overflow:hidden}
.feature-card::after,.thumb-card::after{content:none}
.feature-card .card-body h3{letter-spacing:.2px}
.feature-card .card-body .btn{box-shadow:0 .3rem .8rem rgba(13,110,253,.15)}

/* Info cards under What We Do */
.info-card{border:1px solid rgba(0,0,0,.08);background:#fff;border-radius:.85rem;padding:1.25rem;box-shadow:0 .25rem .6rem rgba(0,0,0,.06);transition:transform .18s ease, box-shadow .18s ease}
.info-card:hover{transform:translateY(-2px);box-shadow:0 .9rem 1.25rem rgba(0,0,0,.12)}
.info-card.brand{background:linear-gradient(180deg, rgba(13,110,253,.07), rgba(13,110,253,.02));border-color:rgba(13,110,253,.22)}
.info-card.accent{background:linear-gradient(180deg, rgba(255,193,7,.12), rgba(255,193,7,.03));border-color:rgba(255,193,7,.28)}
.info-card.neutral{background:linear-gradient(180deg, rgba(11,18,32,.05), rgba(11,18,32,.02));border-color:rgba(0,0,0,.10)}
/* Alignment: left on desktop/tablet, center on mobile */
.info-card{text-align:left}
@media (max-width:575.98px){.info-card{text-align:center}}
/* Icons inside info cards */
.info-card .icon{font-size:1.35rem;line-height:1;display:inline-block;margin-bottom:.35rem}
.info-card.brand .icon{color:var(--brand)}
.info-card.accent .icon{color:var(--accent)}
.info-card.neutral .icon{color:rgba(11,18,32,.75)}

/* Sections */
.section-title{font-weight:800;letter-spacing:.2px}
.section-sub{color:var(--muted)}
.divider{height:2px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent)}

/* Metrics */
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.metric{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:.75rem;padding:1rem;text-align:center}
.metric .num{font-weight:800;font-size:clamp(1.25rem,3.4vw,2rem)}
.metric .label{font-size:.85rem;color:var(--muted)}
@media (max-width: 768px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 420px){.metrics{grid-template-columns:1fr}}

/* Footer */
footer .vr{opacity:.25}
footer{background:linear-gradient(180deg,#0f1a2e,#0b1220); color:#cbd3df}
footer a{color:#e9edf5}

/* Brand gradient sections */
.bg-brand-gradient{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.bg-accent{background:var(--accent); color:#1b1f23}

/* Accent/primary buttons */
.btn-accent{--bs-btn-color:#1b1f23;--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:#e0ac07;--bs-btn-hover-border-color:#e0ac07;--bs-btn-active-bg:#cc9b06;box-shadow:0 .65rem 1.25rem rgba(255,193,7,.25)}
.btn-primary{--bs-btn-bg:linear-gradient(90deg,var(--brand),var(--brand-2));--bs-btn-border-color:transparent;--bs-btn-hover-bg:linear-gradient(90deg,var(--brand-2),var(--brand));--bs-btn-hover-border-color:transparent;box-shadow:0 .6rem 1.2rem rgba(13,110,253,.22)}
.btn-outline-primary{--bs-btn-color:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand);--bs-btn-hover-color:#fff}

/* Evenly split menu items across remaining navbar width (desktop) */
@media (min-width: 992px){
  .navbar-nav.even-split{display:flex; align-items:center; justify-content:space-between}
  .navbar-nav.even-split > li{flex:1 1 0; display:flex}
  .navbar-nav.even-split > li > a{flex:1 1 auto; display:flex; align-items:center; justify-content:center}
}
/* Compact, industry‑standard navbar sizing with precise logo fit */
:root{--nav-h:56px}
.app-navbar{--nav-h:56px}
@media (max-width: 992px){.app-navbar{--nav-h:52px}}
@media (max-width: 576px){.app-navbar{--nav-h:44px}}
.app-navbar .navbar-brand{height:var(--nav-h);padding-top:0;padding-bottom:0}
/* Keep brand responsive and allow wide logo to consume horizontal space */
.navbar .navbar-brand{flex:0 0 auto;min-width:0;margin-right:clamp(.75rem,2vw,2rem)}
/* Horizontal emphasis: width-driven sizing for the logo */
/* Logo fills the navbar height exactly */
.navbar-brand .logo{height:100%;max-height:100%;width:auto;display:block;object-fit:contain;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.18))}
.navbar-brand .logo.logo-wide{height:100%;max-height:100%;width:auto}
/* Cap brand max width so menus remain visible on narrow desktops */
.brand-wrap{max-width:min(48vw, 520px); overflow:hidden}
@media (max-width: 992px){
  /* heights controlled by --nav-h above; logo already at 100% */
}
@media (max-width: 576px){
  /* heights controlled by --nav-h above; logo already at 100% */
}
.brand-text{font-weight:700;color:var(--dark);letter-spacing:.2px;font-size:clamp(.95rem,2.2vw,1.15rem);line-height:1.1}

/* Brand emphasis effects */
/* Move glow to logo only so it never overlays text */
.brand-logo-wrap{position:relative;display:inline-block}
.brand-logo-wrap::before{content:"";position:absolute;inset:-4px -6px -4px -6px;background:radial-gradient(ellipse at 30% 50%, rgba(255,208,0,.10), rgba(255,208,0,0) 55%);filter:blur(6px);z-index:0;pointer-events:none}
.brand-logo-wrap .logo{position:relative;z-index:1}
.brand-text{
  font-size:1.25rem;letter-spacing:.3px;
  background:linear-gradient(90deg,#FFD760,#FFF2B3,#FFC107);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.15);
}
/* remove pulse for a more professional static emphasis */
.brand-glow{animation:none}
@media (prefers-reduced-motion: reduce){.brand-glow{animation:none}}

/* Evenly split menu items across remaining navbar width (desktop) */
@media (min-width: 992px){
  .navbar-nav.even-split{display:flex; align-items:center; justify-content:space-between}
  .navbar-nav.even-split > li{flex:1 1 0; display:flex}
  .navbar-nav.even-split > li > a{flex:1 1 auto; display:flex; align-items:center; justify-content:center}
}
.nav-link.active{font-weight:600}
img{max-width:100%;height:auto}
.object-cover{object-fit:cover;aspect-ratio: 16/10}
.object-fit-cover{object-fit:cover}

/* Hero */
.hero-section{position:relative;min-height:68vh;background:linear-gradient(180deg, rgba(11,18,32,.4), rgba(11,18,32,.2)), url('/assets/covers/liquor.jpg') center/cover no-repeat}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg, rgba(13,110,253,.55), rgba(102,16,242,.35))}
@media (max-width: 576px){.hero-section{min-height:56vh}}

.trust-badges span{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.15);padding:.375rem .625rem;border-radius:.5rem}
.trust-badges i{font-size:1.15rem}

/* Cards */
.feature-card .card-img-top{max-height:220px}
.value-list li{margin:.5rem 0}

/* Sections */
.section-title{font-weight:800;letter-spacing:.2px}
.section-sub{color:var(--muted)}
.divider{height:2px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent)}

/* Metrics */
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.metric{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:.75rem;padding:1rem;text-align:center}
.metric .num{font-weight:800;font-size:clamp(1.25rem,3.4vw,2rem)}
.metric .label{font-size:.85rem;color:var(--muted)}
@media (max-width: 768px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 420px){.metrics{grid-template-columns:1fr}}

/* Footer */
footer .vr{opacity:.25}

/* Brand gradient sections */
.bg-brand-gradient{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.bg-accent{background:var(--accent); color:#1b1f23}

/* Accent button */
.btn-accent{--bs-btn-color:#1b1f23;--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:#e0ac07;--bs-btn-hover-border-color:#e0ac07;--bs-btn-active-bg:#cc9b06}

/* Product thumbs grid */
.thumb-card{transition:transform .2s ease, box-shadow .2s ease;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:.75rem}
.thumb-card:hover{transform:translateY(-2px);box-shadow:0 .75rem 1.25rem rgba(0,0,0,.12)}
.thumb-card .ratio{background:#fff;border-bottom:1px solid rgba(0,0,0,.05);border-top-left-radius:.75rem;border-top-right-radius:.75rem}
.thumb-card .thumb-img{width:100%;height:100%;object-fit:contain;display:block;padding:10px}
.thumb-card .card-body{padding:.75rem 1rem}
.thumb-card .thumb-title{font-size:.95rem;font-weight:600;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumb-card .thumb-meta{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin-top:.15rem}

/* Utility: icon sizing */
.icon-lg{font-size:1.15rem}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translate3d(0,16px,0);transition:opacity .35s ease, transform .35s ease;will-change:opacity,transform}
.reveal.show{opacity:1;transform:translate3d(0,0,0)}