:root{
  --bg:#0c0c0c;
  --bg-2:#141414;
  --text:#f4f1ea;
  --muted:rgba(255,255,255,.72);
  --dark:#111;
  --paper:#ffffff;
  --ink:#1b1b1b;
  --accent:#c9a96a;
  --border:rgba(255,255,255,.16);
  --shadow:0 12px 36px rgba(0,0,0,.35);
  --container:1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#ffffff;
  line-height:1.55;
}

img{max-width:100%;display:block}

.container{
  width:min(var(--container), calc(100% - 48px));
  margin-inline:auto;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.site-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:10;
  padding:18px 0;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand{
  color:var(--text);
  text-decoration:none;
  font-family:"Playfair Display",serif;
  letter-spacing:.4px;
}

.brand-logo{
  height: 110px;
  width: auto;
  display: block;
}

.brand-mark{
  font-size:22px;
  font-weight:700;
}

.nav{
  display:flex;
  gap:18px;
  align-items:center;
}

.nav a{
  color:rgba(255,255,255,.86);
  text-decoration:none;
  font-size:12px;
  letter-spacing:2.2px;
  text-transform:uppercase;
}

.nav a:hover{color:var(--accent)}

.header-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.icon-btn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.25);
  color:rgba(255,255,255,.85);
  display:grid;
  place-items:center;
  cursor:pointer;
}

.icon-btn:hover{
  border-color:rgba(255,255,255,.32);
  color:#fff;
}

.social-btn svg{
  transition:transform 420ms ease;
  transform-origin:center;
}

.social-btn:hover svg{
  transform:rotate(360deg);
}

.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  color:var(--text);
  overflow:hidden;
}

.hero-video{
  position:absolute;
  top:50%;
  left:50%;
  min-width:100%;
  min-height:100%;
  width:auto;
  height:auto;
  transform:translate(-50%, -50%);
  object-fit:cover;
  z-index:0;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
  z-index:1;
}

.hero-inner{
  position:relative;
  z-index:2;
  padding:120px 0 64px;
  text-align:center;
}

.hero-kicker{
  margin:0 0 18px;
  font-family:"Playfair Display",serif;
  font-size:22px;
  letter-spacing:.4px;
}

.hero-title{margin:0;position:relative;display:inline-block}

.hero-title-bg{
  position:absolute;
  inset:auto 0 auto 0;
  top:-44px;
  font-family:"Playfair Display",serif;
  font-size:66px;
  letter-spacing:6px;
  color:rgba(255,255,255,.12);
  transform:translateY(-10px);
  white-space:nowrap;
}

.hero-title-main{
  display:block;
  font-family:"Playfair Display",serif;
  font-size:44px;
  font-weight:600;
}

.hero-sub{
  margin:12px auto 20px;
  max-width:740px;
  color:rgba(255,255,255,.78);
  font-size:14px;
}

.hero-divider{
  width:220px;
  height:1px;
  margin:18px auto 14px;
  background:rgba(255,255,255,.32);
}

.hero-tag{
  margin:0 0 22px;
  font-size:12px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
}

.hero-form{
  margin:0 auto;
  width:min(560px, 100%);
  display:flex;
  gap:10px;
  padding:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.28);
  border-radius:999px;
  backdrop-filter:blur(6px);
}

.hero-form input{
  flex:1;
  min-width:0;
  padding:12px 14px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  outline:none;
}

.hero-form input::placeholder{color:rgba(255,255,255,.62)}

.hero-form button{
  padding:12px 18px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  background:var(--accent);
  color:#1b1b1b;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-size:12px;
}

.hero-form button:hover{filter:brightness(1.05)}

.split{
  background: var(--paper);
  padding:54px 0;
}

.split-inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:26px;
  align-items:center;
}

.split-card{
  background:var(--paper);
  /*border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.08);*/
  padding:30px 28px;
}

.split-card h2{
  margin:0 0 12px;
  font-family:"Playfair Display",serif;
  font-weight:600;
  font-size:28px;
  line-height:1.2;
}

.split-card p{margin:0 0 14px;color:#444}

.checklist{
  margin:0 0 18px;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}

.checklist li{
  position:relative;
  padding-left:22px;
  color:#333;
}

.checklist li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:10px;
  height:10px;
  border-radius:2px;
  background:var(--accent);
  transform:translateY(-50%);
}

.btn{
  display:inline-block;
  padding:11px 16px;
  border-radius:999px;
  text-decoration:none;
  background:var(--dark);
  color:#fff;
  font-size:12px;
  letter-spacing:2.2px;
  text-transform:uppercase;
}

.btn:hover{background:#000}

.slider{
  position:relative;
}

.slider-track{
  display:flex;
  gap:10px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:0;
  width:100%;
}

.slider-track::-webkit-scrollbar{height:8px}
.slider-track::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:999px}
.slider-track::-webkit-scrollbar-track{background:transparent}

.slider-slide{
  flex:0 0 auto;
  scroll-snap-align:start;
}

.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  z-index:2;
}

.slider-btn span{font-size:22px;line-height:1}

.slider-btn.prev{left:10px}
.slider-btn.next{right:10px}

.slider-btn:hover{background:rgba(0,0,0,.5)}

.split-media{
  background:#fff;
  /*border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.08);*/
  padding:14px;
  display:flex;
  align-items:center;
}

.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}

.categories{
  min-height:180px;
}

.categories .slider-track{
  gap:0;
  padding:0;
  width:100%;
}

.category{
  position:relative;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.65)),
    var(--img);
  background-size:cover;
  background-position:center;
}

.categories .category{
  flex:0 0 33.3333%;
  min-height:180px;
}

.category-overlay{position:absolute;inset:0;background:rgba(0,0,0,.18)}

.category-label{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  color:#fff;
  font-family:"Playfair Display",serif;
  font-size:18px;
  letter-spacing:2px;
  text-transform:capitalize;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.25);
  border-radius:999px;
}

.feature{
  position:relative;
  padding:70px 0;
  color:var(--ink);
  background: url("images/feature-banner.jpg") no-repeat center / cover;
  
}

.feature-overlay{ background: rgba(0, 0, 0, 0.9);}

.feature-inner{
  position:relative;
  text-align:center;
  
}

.feature h2{
  margin:0;
  font-family:"Playfair Display",serif;
  color:#ffffff;
  font-size:34px;
  font-weight:600;
}

.feature-sub{
  margin:8px 0 28px;
  color:#ffffff;
  font-size:13px;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-top:16px;
}

.feature-item{
  padding:18px 14px;
}

.feature-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  margin:0 auto 10px;
  background:rgba(201,169,106,.14);
  color:var(--accent);
}

.feature-icon svg{width:22px;height:22px}

.feature-title{font-weight:600;letter-spacing:.4px}

.feature-text{font-size:12px;color:#555}

.tradition{
  background:var(--papper);
  padding:64px 0 52px;
}

.tradition-inner{
  background:#fff;
  /*border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.08);*/
  padding:30px 28px 22px;
}

.tradition-head h2{
  margin:0;
  font-family:"Playfair Display",serif;
  font-size:30px;
  font-weight:600;
}

.muted{color:#777}

.tradition-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:10px;
  color:#444;
}

.gallery{
  margin-top:18px;
}

.gallery .slider-track{
  gap:10px;
  padding:0 46px;
}

.gallery-item{
  flex:0 0 auto;
}

.gallery img{
  width:160px;
  height:86px;
  object-fit:cover;
  border-radius:10px;
}

.gallery .slider-btn{
  border-color:rgba(0,0,0,.10);
  background:rgba(255,255,255,.7);
  color:#111;
}

.gallery .slider-btn:hover{background:rgba(255,255,255,.9)}

.experience{
  padding:56px 0 80px;
  background:#fff;
}

.experience-inner{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:26px;
  align-items:center;
}

.experience-media{
  height:620px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0)),
    url('images/premium-whisky.jpeg');
  background-size:cover;
  background-position:center;
  
}

.experience-card{
  background:#fff;
  padding:30px 28px;
}

.experience-card h2{
  margin:0;
  font-family:"Playfair Display",serif;
  font-size:30px;
  font-weight:600;
}

.experience-cols{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.dotlist{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
  color:#333;
}

.dotlist li{
  position:relative;
  padding-left:18px;
}

.dotlist li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  transform:translateY(-50%);
}

.site-footer{
  background:#0f0f0f;
  color:rgba(255,255,255,.72);
  padding:60px 0 20px;
}

.footer-content{
  display:grid;
  grid-template-columns:2fr 1fr 2fr;
  gap:40px;
  margin-bottom:40px;
}

.footer-section h3{
  color:var(--text);
  font-family:"Playfair Display",serif;
  font-size:24px;
  font-weight:600;
  margin:0 0 16px;
}

.footer-section h4{
  color:var(--text);
  font-family:"Playfair Display",serif;
  font-size:18px;
  font-weight:600;
  margin:0 0 16px;
}

.footer-section p{
  margin:0 0 12px;
  line-height:1.6;
}

.footer-section ul{
  margin:0;
  padding:0;
  list-style:none;
}

.footer-section ul li{
  margin-bottom:8px;
}

.footer-section ul li a{
  color:rgba(255,255,255,.72);
  text-decoration:none;
  transition:color 0.3s ease;
}

.footer-section ul li a:hover{
  color:var(--accent);
}

.footer-social{
  display:flex;
  gap:12px;
  margin-top:20px;
}

.footer-social a{
  color:rgba(255,255,255,.6);
  transition:color 0.3s ease;
}

.footer-social a:hover{
  color:var(--accent);
}

.footer-contact-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-contact-form input,
.footer-contact-form textarea{
  padding:12px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);
  color:var(--text);
  border-radius:6px;
  font-family:Montserrat, sans-serif;
  font-size:14px;
  transition:border-color 0.3s ease, background 0.3s ease;
}

.footer-contact-form input::placeholder,
.footer-contact-form textarea::placeholder{
  color:rgba(255,255,255,.5);
}

.footer-contact-form input:focus,
.footer-contact-form textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:rgba(255,255,255,.15);
}

.footer-contact-form button{
  padding:12px 20px;
  border:0;
  background:var(--accent);
  color:#1b1b1b;
  border-radius:6px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:background 0.3s ease;
}

.footer-contact-form button:hover{
  background:#b8941f;
}

.form-message{
  margin-top:8px;
  padding:8px;
  border-radius:4px;
  font-size:13px;
  text-align:center;
}

.form-message.success{
  background:rgba(76, 175, 80, 0.2);
  color:#4caf50;
  border:1px solid rgba(76, 175, 80, 0.3);
}

.form-message.error{
  background:rgba(244, 67, 54, 0.2);
  color:#f44336;
  border:1px solid rgba(244, 67, 54, 0.3);
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;
}

.footer-inner{
  display:block;
}

@media (max-width: 980px){
  .nav{display:none}
  .hero-title-bg{display:none}
  .hero-title-main{font-size:36px}
  .split-inner{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:repeat(2, 1fr)}
  .tradition-body{grid-template-columns:1fr}
  .categories .category{flex-basis:60%}
  .experience-inner{grid-template-columns:1fr}
  .experience-media{height:620px}
  .footer-content{grid-template-columns:1fr;gap:30px}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
}

@media (max-width: 560px){
  .hero-inner{padding:106px 0 58px}
  .hero-kicker{font-size:18px}
  .hero-title-main{font-size:28px}
  .hero-form{flex-direction:column;border-radius:16px}
  .hero-form input,.hero-form button{width:100%}
  .categories .category{flex-basis:92%;min-height:140px}
  .feature-grid{grid-template-columns:1fr}
  .gallery img{width:140px}
  .footer-content{gap:20px}
  .footer-section h3{font-size:20px}
  .footer-section h4{font-size:16px}
  .footer-inner{flex-direction:column;align-items:flex-start}
}
