:root{
  --bg:#fffaf3;
  --bg-alt:#fdf4e5;
  --card-bg:#ffffff;
  --accent:#d3a454;
  --accent-soft:rgba(211,164,84,.20);
  --accent-deep:#b5832c;
  --text:#271b10;
  --muted:#7a6552;
  --border-subtle:#ebdcc9;
  --radius-lg:18px;
  --radius-pill:999px;
  --shadow-soft:0 18px 38px rgba(139,109,74,.28);
  --shadow-subtle:0 12px 26px rgba(170,140,103,.22);
  --container-width:1140px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at top left,#fff8ee 0,transparent 55%),
    radial-gradient(circle at top right,#fbeedc 0,transparent 60%),
    linear-gradient(180deg,#fffaf3,#f7ebdd);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
video{display:block}

.container{
  width:100%;
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 20px;
}

/* ==========================
   HEADER
========================== */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter:blur(18px);
  background:rgba(255,249,241,.96);
  border-bottom:1px solid rgba(232,211,186,.9);
  box-shadow:0 10px 24px rgba(195,152,95,.24);
}

.nav-container{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 20px;
}

.logo a{display:inline-flex;align-items:center;line-height:1}
.logo img{height:95px;width:95px;display:block}

/* Tablet */
@media (max-width:1024px){
  .logo img{height:66px;width:66px}
}

/* Mobile: bigger logo */
@media (max-width:768px){
  .logo img{height:54px;width:54px}
}

/* Small mobile */
@media (max-width:480px){
  .logo img{height:50px;width:50px}
  .nav-container{padding:6px 16px}
}

.main-nav{
  display:flex;
  gap:18px;
  align-items:center;
  font-size:.9rem;
}

.main-nav a{
  padding:6px 10px;
  border-radius:var(--radius-pill);
  color:var(--muted);
  border:1px solid transparent;
  transition:all .18s ease;
  white-space:nowrap;
}

.main-nav a:hover{
  color:var(--text);
  border-color:rgba(225,203,174,.9);
  background:rgba(255,255,255,.85);
}

.main-nav a.active{
  color:var(--text);
  border-color:var(--accent-soft);
  background:linear-gradient(135deg,#ffffff,#f7ebd9);
  box-shadow:0 10px 26px rgba(193,157,105,.24);
}

.nav-cta{
  padding:8px 18px;
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg,var(--accent),#f1cb81);
  color:#3c2810;
  font-weight:600;
  font-size:.85rem;
  box-shadow:0 12px 30px rgba(175,135,82,.40);
  transition:transform .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.nav-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(175,135,82,.55);
}

.nav-toggle{display:none}
.nav-toggle-label{
  display:none;
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid rgba(213,190,160,.9);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:rgba(255,253,249,.98);
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after{
  display:block;
  position:relative;
  width:16px;height:2px;
  background:var(--muted);
  border-radius:999px;
  transition:all .18s ease;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after{
  content:"";
  position:absolute;
  left:0;
}
.nav-toggle-label span::before{top:-5px}
.nav-toggle-label span::after{top:5px}
.nav-toggle:checked + .nav-toggle-label span{background:transparent}
.nav-toggle:checked + .nav-toggle-label span::before{transform:translateY(5px) rotate(45deg)}
.nav-toggle:checked + .nav-toggle-label span::after{transform:translateY(-5px) rotate(-45deg)}

/* ==========================
   HERO
========================== */
.hero{
  position:relative;
  min-height:100vh;
  padding:90px 0 40px;
  overflow:hidden;
}

.hero-video-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.45;
  pointer-events:none;
}
.hero-video-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top,rgba(255,250,243,.65),transparent 55%),
    linear-gradient(180deg,rgba(255,250,243,.90),rgba(247,235,221,.78));
  mix-blend-mode:soft-light;
}
.hero-video-bg video{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.05);
}

.hero-grid{display:grid;grid-template-columns:1fr;align-items:center}
.hero-grid.hero-grid-single{justify-items:start}

/* ==========================
   BUTTONS
========================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  font-size:.9rem;
  cursor:pointer;
  transition:all .18s ease;
}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),#f1cb81);
  color:#3c2810;
  font-weight:600;
  box-shadow:0 12px 30px rgba(175,135,82,.40);
}
.btn.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 46px rgba(175,135,82,.60);
}
.btn.secondary{
  border-color:rgba(225,203,174,.95);
  color:var(--text);
  background:rgba(255,255,255,.82);
}
.btn.secondary:hover{
  border-color:var(--accent-soft);
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 28px rgba(170,140,103,.20);
}

/* ==========================
   OPENING CARD
========================== */
.opening-card{
  width:100%;
  max-width:760px;
  margin-top:8px;
  border-radius:22px;
  padding:16px 16px 14px;
  border:1px solid rgba(255,255,255,.50);
  background:rgba(255,253,249,.88); /* desktop fallback */
  box-shadow:0 22px 55px rgba(139,109,74,.18);
  position:relative;
  overflow:hidden;
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))){
  .opening-card{
    background:linear-gradient(135deg,rgba(255,253,249,.52),rgba(247,235,221,.55));
    backdrop-filter:blur(18px) saturate(1.15);
    -webkit-backdrop-filter:blur(18px) saturate(1.15);
  }
}

.opening-card::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(circle at 30% 20%, rgba(211,164,84,.22), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(211,164,84,.14), transparent 60%);
  opacity:.55;
  pointer-events:none;
}
.opening-card > *{position:relative;z-index:1}

.opening-top{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:var(--radius-pill);
  font-size:.78rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  white-space:nowrap;
}
.pill-gold{
  border:1px solid rgba(211,164,84,.40);
  background:rgba(211,164,84,.14);
  color:var(--accent-deep);
}
.pill-soft{
  border:1px solid rgba(232,211,186,.90);
  background:rgba(255,250,243,.88);
  color:var(--muted);
}
.pill-news{
  border:1px solid rgba(211,164,84,.38);
  background:linear-gradient(135deg, rgba(211,164,84,.16), rgba(255,255,255,.88));
  color:var(--accent-deep);
  font-weight:800;
  letter-spacing:.08em;
}
.pill-news:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(175,135,82,.18);
}

.opening-title{
  font-weight:900;
  letter-spacing:.01em;
  margin-bottom:6px;
  line-height:1.12;
  font-size:clamp(2.0rem, 3vw, 2.55rem);
  white-space:nowrap; /* desktop one line */
  color:var(--accent-deep);
}
@supports (-webkit-background-clip:text){
  .opening-title{
    background:linear-gradient(135deg,var(--accent-deep),var(--accent));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}
.opening-title .title-line1,
.opening-title .title-line2{display:inline}

/* Wrap-safe text always */
.opening-sub{
  color:rgba(122,101,82,.94);
  font-size:.95rem;
  margin-bottom:10px;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  display:block;
}

/* Desktop cards */
.opening-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:6px;
}
.opening-item{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.62);
  padding:10px 10px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  box-shadow:0 12px 26px rgba(112,87,58,.12);
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  .opening-item{
    background:rgba(255,255,255,.42);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
}
.opening-item h3{font-size:.96rem;margin-bottom:4px}
.opening-item p{
  font-size:.88rem;
  color:rgba(122,101,82,.92);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.dot{
  width:10px;height:10px;
  border-radius:999px;
  border:2px solid var(--accent);
  margin-top:6px;
  flex:0 0 auto;
}

.opening-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.opening-note{
  margin-top:10px;
  font-size:.86rem;
  color:rgba(122,101,82,.92);
}
.opening-note a{
  color:var(--accent-deep);
  border-bottom:1px dashed rgba(211,164,84,.45);
}
.opening-note a:hover{border-bottom-color:rgba(211,164,84,.80)}

/* Mobile-only points list */
.opening-points{
  display:none;
  list-style:none;
  margin:10px 0 0;
  padding:0;
  gap:8px;
}
.opening-points li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(232,211,186,.85);
  background:rgba(255,255,255,.60);
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  .opening-points li{
    background:rgba(255,255,255,.40);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
}
.opening-points li span:last-child{
  color:rgba(122,101,82,.94);
  font-size:.92rem;
  line-height:1.35;
}

/* ==========================
   SECTIONS
========================== */
.section{padding:40px 0}

.section-soft{
  background:linear-gradient(135deg,rgba(255,246,235,.96),rgba(248,235,217,.98));
  border-top:1px solid rgba(232,211,186,.9);
  border-bottom:1px solid rgba(232,211,186,.9);
}

.section-title{font-size:1.3rem;margin-bottom:14px}
.section-title.center{text-align:center}

.section-intro{
  font-size:.95rem;
  color:var(--muted);
  max-width:640px;
  margin:0 auto 16px;
  text-align:center;
}

.section-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px;
  align-items:flex-start;
}
.section-grid p{color:var(--muted)}

.check-list{list-style:none;margin-top:8px}
.check-list li{
  position:relative;
  padding-left:22px;
  margin-bottom:6px;
  font-size:.93rem;
  color:var(--muted);
}
.check-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:10px;height:10px;
  border-radius:999px;
  border:2px solid var(--accent);
}

/* ==========================
   MEDIA VIDEO SECTION (ADDED STYLES)
========================== */
.section-media{position:relative}

.media-video-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:12px;
}

.media-video-card{
  border-radius:20px;
  border:1px solid rgba(232,211,186,.95);
  background:radial-gradient(circle at top left,rgba(253,242,222,.98),#fffdf9);
  box-shadow:var(--shadow-subtle);
  padding:10px 10px 12px;
}

.media-video{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 16px 38px rgba(112,87,58,.42);
}

.media-video video{
  width:100%;
  height:180px;
  object-fit:cover;
  transform:scale(1.02);
  filter:saturate(1.04);
  transition:transform .2s ease, filter .2s ease;
}

.media-video-card:hover video{
  transform:scale(1.06);
  filter:saturate(1.12);
}

.media-tag{
  position:absolute;
  left:10px;
  bottom:10px;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  background:rgba(255,250,243,.9);
  border:1px solid rgba(241,220,191,.95);
  font-size:.78rem;
  color:var(--muted);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.media-video-card h3{margin-top:10px;font-size:.98rem}
.media-video-card p{margin-top:4px;font-size:.9rem;color:var(--muted)}

/* ==========================
   LOCATIONS
========================== */
.locations-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:14px;
}

.location-card{
  border-radius:20px;
  border:1px solid rgba(232,211,186,.95);
  background:radial-gradient(circle at top left,rgba(253,242,222,.98),#fffdf9);
  box-shadow:var(--shadow-subtle);
  padding:16px 16px 18px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.location-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-soft)}

.location-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.location-card h3{font-size:1.05rem;color:var(--text)}

.status-pill{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:var(--radius-pill);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid rgba(232,211,186,.95);
  background:rgba(255,250,243,.92);
  color:var(--muted);
}
.status-pill.open{
  border-color:rgba(211,164,84,.35);
  background:linear-gradient(135deg,rgba(211,164,84,.18),rgba(255,255,255,.95));
  color:var(--accent-deep);
}
.status-pill.soon{
  border-color:rgba(211,164,84,.35);
  background:rgba(211,164,84,.12);
  color:var(--accent-deep);
}

.location-meta{font-size:.9rem;color:var(--muted);margin-bottom:6px}
.location-desc{font-size:.9rem;color:var(--muted);margin-bottom:12px}
.location-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ==========================
   FRANCHISE
========================== */
.franchise-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:14px;
}
.franchise-card{
  border-radius:20px;
  border:1px solid rgba(232,211,186,.95);
  background:linear-gradient(135deg,#ffffff,#f9efe2);
  box-shadow:var(--shadow-subtle);
  padding:16px 16px 18px;
}
.franchise-card h3{font-size:1.05rem;margin-bottom:6px}
.franchise-card p{color:var(--muted);margin-bottom:10px;font-size:.92rem}

/* ==========================
   HIGHLIGHT BOX
========================== */
.highlight-box{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px dashed var(--accent-soft);
  background:rgba(255,252,247,.98);
  font-size:.9rem;
  color:var(--muted);
}
.highlight-box .small-text{display:block;margin-top:4px;font-size:.8rem}
.small-text{font-size:.8rem;color:var(--muted)}

/* ==========================
   FORMS
========================== */
.contact-form{
  margin-top:8px;
  border-radius:18px;
  padding:16px 16px 18px;
  border:1px solid rgba(232,211,186,.95);
  background:#fffdf9;
  box-shadow:var(--shadow-subtle);
}

.form-row{margin-bottom:10px}
.form-row label{display:block;font-size:.86rem;margin-bottom:4px;color:var(--muted)}

.form-row input,
.form-row textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(232,211,186,.95);
  background:#fffdf9;
  color:var(--text);
  padding:8px 10px;
  font-size:.9rem;
  outline:none;
  transition:border .18s ease, box-shadow .18s ease, background .18s ease;
}

.form-row textarea{resize:vertical}
.form-row input:focus,
.form-row textarea:focus{
  border-color:var(--accent-soft);
  box-shadow:0 0 0 1px rgba(211,164,84,.30);
  background:#ffffff;
}

.form-actions{margin-top:8px;text-align:right}

.form-note{
  margin-top:10px;
  font-size:.85rem;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(232,211,186,.95);
  background:rgba(255,253,249,.92);
  color:var(--muted);
}
.form-note.ok{border-color:rgba(211,164,84,.30)}
.form-note.err{border-color:rgba(200,120,90,.35)}

.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

/* ==========================
   MAP
========================== */
.map-embed{
  margin-top:14px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(232,211,186,.95);
  box-shadow:var(--shadow-subtle);
  width:100%;
  height:300px;
  background:#fff;
}
.map-embed iframe{width:100%;height:100%;border:0}
@media (min-width:900px){ .map-embed{height:360px} }

/* ==========================
   FOOTER
========================== */
.site-footer{
  margin-top:40px;
  border-top:1px solid rgba(232,211,186,.95);
  padding:18px 0 0;
  background:linear-gradient(135deg,#f9efdf,#f5ebde);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:18px;
  font-size:.86rem;
  color:var(--muted);
}
.footer-grid h3,
.footer-grid h4{
  font-size:.98rem;
  margin-bottom:4px;
  color:var(--text);
}
.footer-note{margin-top:6px}
.footer-bottom{
  margin-top:12px;
  border-top:1px solid rgba(232,211,186,.95);
  padding:10px 0 14px;
}
.footer-bottom-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:.78rem;
  color:var(--muted);
}
.footer-credit{opacity:.85}

/* ==========================
   REVEAL (SAFE)
   - Only hidden when .js exists on <html>
========================== */
.reveal{opacity:1;transform:none}
.js .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .45s ease, transform .45s ease;
}
.js .reveal.visible{opacity:1;transform:translateY(0)}

/* ==========================
   RESPONSIVE
========================== */
@media (max-width:900px){
  .section-grid{grid-template-columns:minmax(0,1fr)}
  .opening-grid{grid-template-columns:minmax(0,1fr)}
  .locations-grid,
  .franchise-grid,
  .media-video-grid{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:768px){
  .nav-toggle-label{display:inline-flex}

  .main-nav{
    position:absolute;
    top:calc(100% + 10px);
    left:16px; right:16px;
    background:rgba(255,250,243,.98);
    border-radius:16px;
    border:1px solid rgba(232,211,186,.95);
    flex-direction:column;
    padding:10px 10px 6px;
    gap:4px;
    transform-origin:top;
    transform:scaleY(.8);
    opacity:0;
    pointer-events:none;
    transition:opacity .16s ease, transform .16s ease;
    z-index:60;
  }
  .nav-toggle:checked ~ .main-nav{
    opacity:1;
    pointer-events:auto;
    transform:scaleY(1);
  }
  .nav-cta{display:none}

  /* Mobile: make hero card MORE transparent (see background video) */
  .opening-card{
    background:rgba(255,253,249,.72);
    box-shadow:0 18px 44px rgba(139,109,74,.14);
  }
  @supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))){
    .opening-card{
      background:linear-gradient(135deg,rgba(255,253,249,.28),rgba(247,235,221,.30));
      backdrop-filter:blur(24px) saturate(1.18);
      -webkit-backdrop-filter:blur(24px) saturate(1.18);
    }
  }

  /* Mobile: title 2 lines */
  .opening-title{
    white-space:normal;
    line-height:1.08;
  }
  .opening-title .title-line1,
  .opening-title .title-line2{display:block}
  .opening-title .title-line2{margin-top:2px}

  /* Mobile: hide desktop cards, show bullet list */
  .opening-grid{display:none}
  .opening-points{display:grid}

  .opening-actions .btn{width:100%; justify-content:center}

  .map-embed{height:260px}

  .media-video video{height:200px}
}

@media (max-width:480px){
  .hero{padding-top:70px}
  .opening-title{
    font-size:clamp(1.20rem, 6.2vw, 1.55rem);
    letter-spacing:0;
  }
}
