/* ══════════════════════════════════════════════
   LOGO-MATCHED COLOR SYSTEM
   Logo gold exact: #b18d31
   Light tint:      #c9a84c
   Pale wash:       #f0ddb0
   Deep tone:       #8a6a1a
   Background dark: #16100a
══════════════════════════════════════════════ */
 :root {
   --logo: #b18d31;
   /* EXACT logo gold */
   --logo-lt: #c9a84c;
   /* lighter logo tone */
   --logo-dk: #8a6a1a;
   /* darker logo tone  */
   --logo-pale: #f0ddb0;
   /* pale wash         */
   --logo-glow: rgba(177, 141, 49, .35);
   --cream: #fffaee;
   --warm: #faf3de;
   --ink: #1a1105;
   --ink-mid: #2d1d08;
   --text: #372008;
   --text-mid: #6a3f10;
   --text-soft: #9a7040;
   --white: #ffffff;
 }

 *,
 *::before,
 *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 html {
   scroll-behavior: smooth;
 }

 /* LENIS smooth scroll override */
 html.lenis {
   height: auto;
 }

 .lenis.lenis-smooth {
   scroll-behavior: auto;
 }

 .lenis.lenis-smooth [data-lenis-prevent] {
   overscroll-behavior: contain;
 }

 body {
   background: var(--cream);
   color: var(--text);
   font-family: 'DM Sans', sans-serif;
   font-weight: 400;
   overflow-x: hidden;
   cursor: none;
 }

 /* ── CURSOR ── */
 #cur {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;
   pointer-events: none;
   mix-blend-mode: normal;
 }

 #cur-dot {
   position: absolute;
   width: 8px;
   height: 8px;
   background: var(--logo);
   border-radius: 50%;
   transform: translate(-50%, -50%);
   transition: transform .15s;
 }

 #cur-ring {
   position: absolute;
   width: 36px;
   height: 36px;
   border: 1.5px solid rgba(177, 141, 49, .5);
   border-radius: 50%;
   transform: translate(-50%, -50%);
   transition: width .35s, height .35s, border-color .35s, opacity .35s;
 }

 body:not(:hover) #cur {
   opacity: 0;
 }

 /* ══════════════════════════════════════════════
   NAV
══════════════════════════════════════════════ */
 #nav {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 700;
   padding: 1.2rem 4.5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   transition: all .5s cubic-bezier(.16, 1, .3, 1);
 }

 #nav.solid {
   background: rgba(22, 16, 10, .96);
   border-bottom: 1px solid rgba(177, 141, 49, .12);
   backdrop-filter: blur(20px);
   padding: .95rem 4.5rem;
 }

 .nav-logo {
   display: flex;
   align-items: center;
   gap: .8rem;
 }

 .nav-logo img {
   height: 60px;
   transition: filter .3s;
   /* logo already gold, just ensure visibility */
   filter: drop-shadow(0 0 8px rgba(177, 141, 49, .2));
 }

 .nav-wordmark {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.1rem;
   font-weight: 600;
   color: var(--logo-pale);
   letter-spacing: .06em;
   line-height: 1.15;
 }

 .nav-wordmark span {
   display: block;
   font-family: 'DM Sans', sans-serif;
   font-size: .52rem;
   letter-spacing: .5em;
   color: var(--logo);
   text-transform: uppercase;
   font-weight: 500;
   margin-top: 1px;
 }

 .nav-links {
   display: flex;
   gap: 2.5rem;
   list-style: none;
 }

 .nav-links a {
   color: rgba(240, 221, 176, .65);
   text-decoration: none;
   font-size: .73rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   font-weight: 500;
   position: relative;
   transition: color .3s;
   padding-bottom: 3px;
 }

 .nav-links a::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 1px;
   background: var(--logo);
   transition: width .4s ease;
 }

 .nav-links a:hover {
   color: var(--logo-pale);
 }

 .nav-links a:hover::after {
   width: 100%;
 }

 .nav-btn {
   padding: .55rem 1.6rem;
   background: transparent;
   border: 1px solid var(--logo);
   color: var(--logo-pale);
   font-size: .68rem;
   letter-spacing: .25em;
   text-transform: uppercase;
   font-weight: 600;
   text-decoration: none;
   cursor: none;
   transition: background .3s, color .3s, box-shadow .3s;
   position: relative;
   overflow: hidden;
 }

 .nav-btn::before {
   content: '';
   position: absolute;
   inset: 0;
   background: var(--logo);
   transform: translateX(-101%);
   transition: transform .35s cubic-bezier(.16, 1, .3, 1);
 }

 .nav-btn:hover::before {
   transform: translateX(0);
 }

 .nav-btn:hover {
   color: var(--ink);
   box-shadow: 0 4px 20px var(--logo-glow);
 }

 .nav-btn span {
   position: relative;
   z-index: 1;
 }

 /* ══════════════════════════════════════════════
   HERO — FULLSCREEN IMMERSIVE
══════════════════════════════════════════════ */
 #hero {
   position: relative;
   height: 100vh;
   min-height: 700px;
   display: flex;
   align-items: center;
   background: var(--ink);
   overflow: hidden;
 }

 /* ─ HERO BG MOSAIC ─ */
 .hero-mosaic {
   position: absolute;
   inset: 0;
   display: grid;
   grid-template-columns: 1.1fr .9fr .85fr;
   grid-template-rows: 1.2fr .8fr;
   gap: 2px;
 }

 .hm {
   overflow: hidden;
   position: relative;
 }

 .hm img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(.22) saturate(1.2);
   transform: scale(1.12);
   transition: transform 12s cubic-bezier(.16, 1, .3, 1);
   will-change: transform;
 }

 .hero-mosaic:hover .hm img {
   transform: scale(1.17);
 }

 /* Multi-layer overlay for warmth + readability */
 .hero-ov1 {
   position: absolute;
   inset: 0;
   background:
     radial-gradient(ellipse 55% 70% at 32% 55%, rgba(177, 141, 49, .14) 0%, transparent 70%),
     radial-gradient(ellipse 30% 50% at 0% 100%, rgba(22, 16, 10, .9) 0%, transparent 60%),
     linear-gradient(108deg, rgba(22, 16, 10, .97) 0%, rgba(22, 16, 10, .75) 42%, rgba(22, 16, 10, .25) 100%);
 }

 .hero-ov2 {
   position: absolute;
   inset: 0;
   background:
     linear-gradient(to bottom, rgba(22, 16, 10, .6) 0%, transparent 20%, transparent 60%, rgba(22, 16, 10, .9) 100%);
 }

 /* Subtle gold vignette lines */
 .hero-lines {
   position: absolute;
   inset: 0;
   background:
     repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(177, 141, 49, .025) 80px),
     repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(177, 141, 49, .025) 80px);
   pointer-events: none;
 }

 /* ─ FLOATING EMBERS ─ */
 .ember {
   position: absolute;
   border-radius: 50%;
   background: radial-gradient(circle, var(--logo) 0%, transparent 70%);
   animation: ember-float linear infinite;
   opacity: 0;
   pointer-events: none;
 }

 @keyframes ember-float {
   0% {
     transform: translateY(0) translateX(0) scale(0);
     opacity: 0;
   }

   10% {
     opacity: .7;
     transform: scale(1);
   }

   80% {
     opacity: .25;
   }

   100% {
     transform: translateY(-95vh) translateX(var(--ex, 30px)) scale(.4);
     opacity: 0;
   }
 }

 /* ─ HERO CONTENT ─ */
 .hero-body {
   position: relative;
   z-index: 10;
   /* Centered balance between fixed navbar (~72px) and bottom info bar (~80px) */
   padding: calc(72px + 2.5rem) 4.5rem calc(80px + 2.5rem);
   max-width: 820px;
   width: 70%;
   flex-shrink: 0;
 }

 .hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 1rem;
   font-size: .68rem;
   letter-spacing: .5em;
   text-transform: uppercase;
   color: var(--logo-lt);
   font-weight: 600;
   margin-top: 0;
   margin-bottom: 1.5rem;
   opacity: 0;
   animation: h-up .9s .3s cubic-bezier(.16, 1, .3, 1) forwards;
 }

 .hero-eyebrow i {
   display: block;
   width: 42px;
   height: 1px;
   background: var(--logo);
 }

 .hero-eyebrow i:last-child {
   transform: scaleX(-1);
 }

 .hero-logo-img {
   display: block;
   height: 64px;
   margin-bottom: 1.4rem;
   filter: drop-shadow(0 0 30px rgba(177, 141, 49, .5)) brightness(1.05);
   opacity: 0;
   animation: h-up .9s .48s cubic-bezier(.16, 1, .3, 1) forwards;
 }

 .hero-h1 {
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(3.5rem, 5.6vw, 5.8rem);
   font-weight: 300;
   line-height: 0.98;
   color: var(--white);
   letter-spacing: -.02em;
   opacity: 0;
   animation: h-up 1s .62s cubic-bezier(.16, 1, .3, 1) forwards;
 }

 .hero-h1 .line2 {
   display: block;
   font-style: italic;
   font-weight: 400;
   color: var(--logo);
   font-size: .84em;
   letter-spacing: .03em;
   margin-top: .5rem;
   text-shadow: 0 0 50px rgba(177, 141, 49, .45);
 }

 .hero-sub {
   font-size: 1.15rem;
   line-height: 1.85;
   color: rgba(240, 221, 176, .85);
   margin-top: 1.5rem;
   max-width: 580px;
   font-weight: 300;
   opacity: 0;
   animation: h-up .9s .78s cubic-bezier(.16, 1, .3, 1) forwards;
 }

 .hero-pills {
   display: flex;
   flex-wrap: wrap;
   gap: .8rem;
   margin-top: 1.8rem;
   opacity: 0;
   animation: h-up .9s .9s cubic-bezier(.16, 1, .3, 1) forwards;
 }

 .hpill {
   padding: .5rem 1.25rem;
   border: 1px solid rgba(177, 141, 49, .4);
   background: rgba(177, 141, 49, .1);
   font-size: .74rem;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--logo-pale);
   font-weight: 500;
   backdrop-filter: blur(6px);
   border-radius: 4px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
 }

 .hero-cta {
   display: none !important;
 }

 @media (max-width: 768px) {
   .hero-cta {
     display: flex !important;
     gap: .75rem;
     margin-top: 1.5rem;
     position: relative;
     z-index: 12;
   }
 }

 .cta-primary {
   padding: .85rem 2.2rem;
   background: var(--logo);
   color: var(--ink);
   font-size: .72rem;
   letter-spacing: .24em;
   text-transform: uppercase;
   font-weight: 700;
   text-decoration: none;
   cursor: none;
   box-shadow: 0 6px 30px rgba(177, 141, 49, .4);
   transition: background .3s, transform .25s, box-shadow .3s;
   position: relative;
   overflow: hidden;
 }

 .cta-primary::after {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, .12);
   transform: translateX(-100%) skewX(-15deg);
   transition: transform .6s cubic-bezier(.16, 1, .3, 1);
 }

 .cta-primary:hover::after {
   transform: translateX(200%) skewX(-15deg);
 }

 .cta-primary:hover {
   background: var(--logo-lt);
   transform: translateY(-2px);
   box-shadow: 0 10px 40px rgba(177, 141, 49, .5);
 }

 .cta-secondary {
   padding: .85rem 2.2rem;
   border: 1px solid rgba(240, 221, 176, .3);
   color: rgba(240, 221, 176, .8);
   font-size: .72rem;
   letter-spacing: .24em;
   text-transform: uppercase;
   font-weight: 400;
   text-decoration: none;
   cursor: none;
   transition: border-color .3s, color .3s, background .3s;
 }

 .cta-secondary:hover {
   border-color: var(--logo);
   color: var(--logo-pale);
   background: rgba(177, 141, 49, .06);
 }

 /* Compact height laptops / desktop screens */
 @media (max-height: 820px) and (min-width: 1051px) {
   .hero-body {
     padding-top: calc(72px + 1.2rem);
     padding-bottom: calc(75px + 1.2rem);
   }

   .hero-logo-img {
     height: 54px;
     margin-bottom: 1.1rem;
   }

   .hero-eyebrow {
     margin-bottom: 1.1rem;
   }

   .hero-h1 {
     font-size: clamp(3.0rem, 5.0vw, 4.8rem);
     line-height: 1.0;
   }

   .hero-h1 .line2 {
     font-size: .84em;
     margin-top: .4rem;
   }

   .hero-sub {
     margin-top: 1.1rem;
     font-size: 1.05rem;
     line-height: 1.75;
   }

   .hero-pills {
     margin-top: 1.4rem;
   }
 }

 @media (max-height: 580px) and (min-width: 1051px) {
   .hero-cta {
     display: none;
   }
 }

 /* ─ HERO RIGHT SHOWCASE ─ */
 .hero-right {
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
   width: 32%;
   z-index: 8;
   display: flex;
   flex-direction: column;
   gap: 2px;
 }

 .hright-panel {
   flex: 1;
   overflow: hidden;
   position: relative;
   cursor: none;
 }

 .hright-panel img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(.45) saturate(1.3);
   transform: scale(1.07);
   transition: transform .8s cubic-bezier(.16, 1, .3, 1), filter .6s;
 }

 .hright-panel:hover img {
   filter: brightness(.7) saturate(1.5);
   transform: scale(1.12);
 }

 .hright-label {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: .7rem 1.1rem;
   background: linear-gradient(to top, rgba(22, 16, 10, .95), transparent);
   font-size: .6rem;
   letter-spacing: .3em;
   text-transform: uppercase;
   color: var(--logo-pale);
   font-weight: 500;
   transform: translateY(6px);
   opacity: 0;
   transition: transform .4s, opacity .4s;
 }

 .hright-panel:hover .hright-label {
   transform: translateY(0);
   opacity: 1;
 }

 /* gradient blend into content area */
 .hero-right::before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   width: 120px;
   z-index: 2;
   pointer-events: none;
   background: linear-gradient(to right, var(--ink), transparent);
 }

 /* ─ HERO BOTTOM BAR ─ */
 .hero-bar {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 15;
   background: rgba(22, 16, 10, .82);
   border-top: 1px solid rgba(177, 141, 49, .15);
   backdrop-filter: blur(16px);
   display: flex;
   padding: 1.3rem 4.5rem;
   gap: 0;
   opacity: 0;
   animation: h-up .8s 1.2s cubic-bezier(.16, 1, .3, 1) forwards;
 }

 .hbar-cell {
   flex: 1;
   display: flex;
   align-items: center;
   gap: .9rem;
   padding: 0 2rem 0 0;
   border-right: 1px solid rgba(177, 141, 49, .1);
 }

 .hbar-cell:last-child {
   border-right: none;
   padding-right: 0;
   /* padding-left: 2rem; */
   padding-left: 0rem;
 }

 .hbar-cell:first-child {
   padding-left: 0;
 }

 .hbar-ico {
   width: 34px;
   height: 34px;
   flex-shrink: 0;
   color: var(--logo);
 }

 .hbar-l {
   font-size: .57rem;
   letter-spacing: .28em;
   text-transform: uppercase;
   color: var(--text-soft);
   font-weight: 500;
 }

 .hbar-v {
   font-size: .88rem;
   font-weight: 600;
   color: var(--white);
   margin-top: .1rem;
 }

 /* ─ SCROLL CUE ─ */
 .scroll-cue {
   position: absolute;
   left: 4.5rem;
   bottom: 7.5rem;
   z-index: 15;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: .5rem;
   font-size: .55rem;
   letter-spacing: .4em;
   text-transform: uppercase;
   color: rgba(177, 141, 49, .4);
   opacity: 0;
   animation: h-up .8s 1.4s cubic-bezier(.16, 1, .3, 1) forwards;
 }

 .sc-line {
   width: 1px;
   height: 52px;
   background: linear-gradient(to bottom, var(--logo), transparent);
   transform-origin: top;
   animation: sc-pulse 2.5s ease-in-out infinite;
 }

 @keyframes sc-pulse {

   0%,
   100% {
     transform: scaleY(.5);
     opacity: .35;
   }

   50% {
     transform: scaleY(1);
     opacity: 1;
   }
 }

 @keyframes h-up {
   from {
     opacity: 0;
     transform: translateY(32px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* ══════════════════════════════════════════════
   MARQUEE RIBBON
══════════════════════════════════════════════ */
 .marquee {
   background: var(--logo);
   padding: .8rem 0;
   overflow: hidden;
   white-space: nowrap;
   border-top: 1px solid var(--logo-lt);
   border-bottom: 1px solid var(--logo-dk);
 }

 .marquee-track {
   display: inline-flex;
   gap: 2.5rem;
   animation: marquee 20s linear infinite;
 }

 @keyframes marquee {
   to {
     transform: translateX(-50%);
   }
 }

 .marquee-item {
   display: inline-flex;
   align-items: center;
   gap: .7rem;
   font-size: .68rem;
   letter-spacing: .35em;
   text-transform: uppercase;
   font-weight: 700;
   color: var(--ink);
 }

 .marquee-sep {
   width: 4px;
   height: 4px;
   background: rgba(22, 16, 10, .35);
   border-radius: 50%;
   flex-shrink: 0;
 }

 /* ══════════════════════════════════════════════
   SECTION GLOBALS
══════════════════════════════════════════════ */
 .tag {
   display: inline-flex;
   align-items: center;
   gap: .8rem;
   font-size: .6rem;
   letter-spacing: .5em;
   text-transform: uppercase;
   font-weight: 700;
   color: var(--logo);
   margin-bottom: 1.2rem;
 }

 .tag::before {
   content: '';
   width: 26px;
   height: 2px;
   background: var(--logo);
   flex-shrink: 0;
 }

 .sh {
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(2.2rem, 4.2vw, 3.8rem);
   font-weight: 600;
   line-height: 1.05;
   color: var(--text);
 }

 .sh em {
   font-style: italic;
   color: var(--logo);
 }

 .sh-w {
   color: var(--white);
 }

 .sp {
   font-size: .97rem;
   line-height: 1.9;
   color: var(--text-mid);
 }

 .sp-w {
   color: rgba(240, 221, 176, .68);
 }

 .divider {
   width: 56px;
   height: 2px;
   background: linear-gradient(to right, var(--logo), var(--logo-lt));
   margin: 1.8rem 0;
 }

 /* REVEAL ANIMATIONS */
 .rv {
   opacity: 0;
   transform: translateY(38px);
   transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
 }

 .rv.on {
   opacity: 1;
   transform: translateY(0);
 }

 .d1 {
   transition-delay: .1s
 }

 .d2 {
   transition-delay: .2s
 }

 .d3 {
   transition-delay: .3s
 }

 .d4 {
   transition-delay: .4s
 }

 /* ══════════════════════════════════════════════
   STORY
══════════════════════════════════════════════ */
 #story {
   padding: 9rem 4.5rem;
   background: var(--cream);
   position: relative;
   overflow: hidden;
 }

 #story::after {
   content: '';
   position: absolute;
   right: -80px;
   top: 50%;
   transform: translateY(-50%);
   width: 420px;
   height: 420px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(177, 141, 49, .06), transparent 70%);
   pointer-events: none;
 }

 .story-grid {
   max-width: 1180px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1.1fr;
   gap: 7rem;
   align-items: center;
 }

 .story-img-wrap {
   position: relative;
 }

 .story-img {
   width: 100%;
   aspect-ratio: 3/4;
   object-fit: cover;
   display: block;
 }

 .story-corner {
   position: absolute;
   width: 52px;
   height: 52px;
   border-color: var(--logo);
   border-style: solid;
   border-width: 0;
 }

 .story-corner.tl {
   top: -14px;
   left: -14px;
   border-top-width: 2px;
   border-left-width: 2px;
 }

 .story-corner.br {
   bottom: -14px;
   right: -14px;
   border-bottom-width: 2px;
   border-right-width: 2px;
 }

 .story-badge {
   position: absolute;
   bottom: -22px;
   right: -22px;
   width: 120px;
   height: 120px;
   background: var(--logo);
   border-radius: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 32px rgba(177, 141, 49, .45);
 }

 .story-badge .bn {
   font-family: 'Cormorant Garamond', serif;
   font-size: 2.6rem;
   font-weight: 600;
   color: var(--ink);
   line-height: 1;
 }

 .story-badge .bl {
   font-size: .55rem;
   letter-spacing: .2em;
   color: rgba(22, 16, 10, .7);
   text-transform: uppercase;
   font-weight: 700;
 }

 .story-text {
   padding-left: .5rem;
 }

 .story-text .sh {
   margin-bottom: 1.2rem;
 }

 .story-text .sp {
   margin-bottom: .9rem;
 }

 .story-stats {
   display: flex;
   gap: 2.2rem;
   margin-top: 2rem;
   padding-top: 2rem;
   border-top: 1px solid rgba(177, 141, 49, .15);
 }

 .sstat {
   border-left: 3px solid var(--logo);
   padding-left: 1.1rem;
 }

 .sstat-n {
   font-family: 'Cormorant Garamond', serif;
   font-size: 2.4rem;
   font-weight: 600;
   color: var(--logo);
   line-height: 1;
 }

 .sstat-l {
   font-size: .6rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--text-soft);
   font-weight: 600;
   margin-top: .25rem;
 }

 /* ══════════════════════════════════════════════
   MENU
══════════════════════════════════════════════ */
 #menu {
   padding: 40px 4.5rem;
   background: var(--ink-mid);
   position: relative;
   overflow: hidden;
 }

 #menu::before {
   content: '';
   position: absolute;
   inset: 0;
   background: repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(177, 141, 49, .03) 80px),
     repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(177, 141, 49, .03) 80px);
   pointer-events: none;
 }

 .menu-hd {
   max-width: 1180px;
   margin: 0 auto 2.2rem;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
 }

 .menu-hd .sh-w {
   color: var(--white);
 }

 .menu-hd-r {
   max-width: 300px;
   font-size: .92rem;
   color: rgba(240, 221, 176, .5);
   line-height: 1.75;
   text-align: right;
 }

 .menu-grid {
   max-width: 1180px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2px;
 }

 .mc {
   background: rgba(255, 255, 255, .02);
   border: 1px solid rgba(177, 141, 49, .08);
   padding: 2.6rem 2.2rem;
   position: relative;
   overflow: hidden;
   cursor: none;
   transition: background .45s, transform .4s cubic-bezier(.16, 1, .3, 1), border-color .45s;
 }

 .mc::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: linear-gradient(to right, var(--logo), var(--logo-lt));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .45s cubic-bezier(.16, 1, .3, 1);
 }

 .mc:hover {
   background: rgba(177, 141, 49, .07);
   transform: translateY(-6px);
   border-color: rgba(177, 141, 49, .28);
   z-index: 2;
 }

 .mc:hover::after {
   transform: scaleX(1);
 }

 .mc-ico {
   width: 54px;
   height: 54px;
   color: var(--logo);
   margin-bottom: 1.5rem;
 }

 .mc-cat {
   font-size: .58rem;
   letter-spacing: .42em;
   text-transform: uppercase;
   color: var(--logo-lt);
   font-weight: 700;
   margin-bottom: .55rem;
 }

 .mc-name {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.55rem;
   font-weight: 600;
   color: var(--white);
   line-height: 1.2;
   margin-bottom: .65rem;
 }

 .mc-desc {
   font-size: .86rem;
   color: rgba(240, 221, 176, .52);
   line-height: 1.75;
 }

 .mc-price {
   margin-top: 1.4rem;
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.15rem;
   font-style: italic;
   color: var(--logo);
   display: inline-flex;
   align-items: baseline;
   gap: .25rem;
 }

 .mc-price .rs {
   font-style: normal;
   font-size: .75rem;
   font-family: 'DM Sans', sans-serif;
 }

 /* Featured */
 .mc.feat {
   background: var(--logo);
   border-color: var(--logo);
   grid-row: span 2;
 }

 .mc.feat:hover {
   background: var(--logo-lt);
 }

 .mc.feat::after {
   background: rgba(22, 16, 10, .35);
 }

 .mc.feat .mc-cat {
   color: rgba(22, 16, 10, .6);
 }

 .mc.feat .mc-name {
   color: var(--ink);
   font-size: 2rem;
 }

 .mc.feat .mc-desc {
   color: rgba(22, 16, 10, .68);
 }

 .mc.feat .mc-price {
   color: var(--ink);
 }

 .mc.feat .mc-ico {
   color: rgba(22, 16, 10, .7);
 }

 /* ══════════════════════════════════════════════
   ATMOSPHERE
══════════════════════════════════════════════ */
 #atm {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 640px;
   background: var(--ink);
 }

 .atm-img {
   position: relative;
   overflow: hidden;
 }

 .atm-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(.4) saturate(1.4);
   transform: scale(1.05);
   transition: transform 9s ease;
 }

 .atm-img:hover img {
   transform: scale(1.09);
 }

 .atm-img-ov {
   position: absolute;
   inset: 0;
   background: linear-gradient(to right, transparent 55%, var(--ink) 100%);
 }

 .atm-body {
   padding: 5.5rem 4.5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .atm-body .sh-w {
   margin-bottom: 1.2rem;
 }

 .atm-body .sp-w {
   margin-bottom: 2.5rem;
 }

 .pl-list {
   display: flex;
   flex-direction: column;
   gap: 1.1rem;
 }

 .pl {
   display: flex;
   align-items: flex-start;
   gap: 1.1rem;
   padding: 1.2rem 1.4rem;
   border: 1px solid rgba(177, 141, 49, .1);
   cursor: none;
   transition: background .35s, border-color .35s;
 }

 .pl:hover {
   background: rgba(177, 141, 49, .08);
   border-color: rgba(177, 141, 49, .3);
 }

 .pl-ico {
   width: 42px;
   height: 42px;
   flex-shrink: 0;
   background: rgba(177, 141, 49, .14);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--logo);
 }

 .pl-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.05rem;
   font-weight: 600;
   color: var(--white);
   margin-bottom: .25rem;
 }

 .pl-text {
   font-size: .82rem;
   color: rgba(240, 221, 176, .52);
   line-height: 1.65;
 }

 /* ══════════════════════════════════════════════
   GALLERY
══════════════════════════════════════════════ */
 #gallery {
   padding: 6rem 4.5rem;
   background: var(--warm);
 }

 .gallery-hd {
   max-width: 1180px;
   margin: 0 auto 3rem;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
 }

 .gallery-grid {
   max-width: 1180px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   grid-template-rows: 270px 270px;
   gap: 5px;
 }

 .gc {
   overflow: hidden;
   position: relative;
   cursor: none;
 }

 .gc img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(.75) saturate(1.1);
   transform: scale(1.04);
   transition: transform .8s cubic-bezier(.16, 1, .3, 1), filter .6s;
 }

 .gc:hover img {
   transform: scale(1.09);
   filter: brightness(.92) saturate(1.35);
 }

 .gc.tall {
   grid-row: span 2;
 }

 .gc-lbl {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: .65rem 1rem;
   background: linear-gradient(to top, rgba(22, 16, 10, .88), transparent);
   font-size: .62rem;
   letter-spacing: .28em;
   text-transform: uppercase;
   color: var(--logo-pale);
   font-weight: 500;
   transform: translateY(100%);
   transition: transform .45s cubic-bezier(.16, 1, .3, 1);
 }

 .gc:hover .gc-lbl {
   transform: translateY(0);
 }

 /* gold border flash on hover */
 .gc::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 2px solid rgba(177, 141, 49, 0);
   transition: border-color .4s;
   pointer-events: none;
 }

 .gc:hover::after {
   border-color: rgba(177, 141, 49, .4);
 }

 /* ══════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════ */
 #testi {
   padding: 7rem 4.5rem;
   background: var(--ink);
   position: relative;
   overflow: hidden;
 }

 #testi::before {
   content: '';
   position: absolute;
   top: -80px;
   left: 50%;
   transform: translateX(-50%);
   width: 700px;
   height: 700px;
   background: radial-gradient(circle, rgba(177, 141, 49, .05), transparent 65%);
   border-radius: 50%;
   pointer-events: none;
 }

 .testi-hd {
   max-width: 1180px;
   margin: 0 auto 3.5rem;
   text-align: center;
 }

 .testi-hd .tag {
   justify-content: center;
 }

 .testi-hd .tag::before {
   display: none;
 }

 .testi-hd .tag::after {
   content: '';
   width: 26px;
   height: 2px;
   background: var(--logo);
 }

 .testi-hd .sh-w {
   color: var(--white);
 }

 .testi-wrap {
   overflow: hidden;
   position: relative;
 }

 .testi-wrap::before,
 .testi-wrap::after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   width: 180px;
   z-index: 2;
   pointer-events: none;
 }

 .testi-wrap::before {
   left: 0;
   background: linear-gradient(to right, var(--ink), transparent);
 }

 .testi-wrap::after {
   right: 0;
   background: linear-gradient(to left, var(--ink), transparent);
 }

 .testi-track {
   display: flex;
   gap: 1.4rem;
   animation: tscroll 30s linear infinite;
   width: max-content;
 }

 @keyframes tscroll {
   to {
     transform: translateX(-50%);
   }
 }

 .tc {
   min-width: 355px;
   background: rgba(255, 255, 255, .028);
   border: 1px solid rgba(177, 141, 49, .1);
   padding: 2rem 2.2rem;
   transition: border-color .3s, background .3s;
 }

 .tc:hover {
   border-color: rgba(177, 141, 49, .3);
   background: rgba(177, 141, 49, .05);
 }

 .tc-stars {
   color: var(--logo);
   font-size: .8rem;
   letter-spacing: .08em;
   margin-bottom: .8rem;
 }

 .tc-q {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.05rem;
   font-style: italic;
   color: var(--white);
   line-height: 1.75;
   margin-bottom: 1.1rem;
 }

 .tc-a {
   font-size: .62rem;
   letter-spacing: .25em;
   text-transform: uppercase;
   color: var(--text-soft);
   display: flex;
   align-items: center;
   gap: .5rem;
 }

 .tc-a::before {
   content: '—';
   color: var(--logo);
 }

 /* ══════════════════════════════════════════════
   VISIT
══════════════════════════════════════════════ */
 #visit {
   padding: 9rem 4.5rem;
   background: var(--cream);
 }

 .visit-grid {
   max-width: 1180px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 6rem;
   align-items: start;
 }

 .visit-info .sh {
   margin-bottom: 2.2rem;
 }

 .ic {
   display: flex;
   align-items: flex-start;
   gap: 1.1rem;
   padding: 1.4rem;
   margin-bottom: .9rem;
   border: 1px solid rgba(177, 141, 49, .22);
   transition: border-color .3s, background .3s;
   cursor: none;
 }

 .ic:hover {
   border-color: var(--logo);
   background: rgba(177, 141, 49, .04);
 }

 .ic-ico {
   width: 46px;
   height: 46px;
   flex-shrink: 0;
   background: var(--logo);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--ink);
 }

 .ic-lbl {
   font-size: .58rem;
   letter-spacing: .32em;
   text-transform: uppercase;
   color: var(--logo);
   font-weight: 700;
   margin-bottom: .35rem;
 }

 .ic-val {
   font-size: .95rem;
   color: var(--text);
   line-height: 1.65;
 }

 .map {
   position: relative;
   aspect-ratio: 1;
   background: var(--ink-mid);
   overflow: hidden;
 }

 .map::before {
   content: '';
   position: absolute;
   inset: 0;
   background: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(177, 141, 49, .07) 40px),
     repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(177, 141, 49, .07) 40px);
 }

 .map-svg {
   position: absolute;
   inset: 0;
 }

 .map-pin {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -60%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: .5rem;
 }

 .map-dot {
   width: 16px;
   height: 16px;
   background: var(--logo);
   border-radius: 50%;
   animation: mpulse 2s ease-in-out infinite;
   box-shadow: 0 0 0 0 rgba(177, 141, 49, .6);
 }

 @keyframes mpulse {

   0%,
   100% {
     box-shadow: 0 0 0 0 rgba(177, 141, 49, .6);
   }

   50% {
     box-shadow: 0 0 0 20px rgba(177, 141, 49, 0);
   }
 }

 .map-lbl {
   background: rgba(22, 16, 10, .92);
   border: 1px solid rgba(177, 141, 49, .32);
   padding: .45rem .9rem;
   font-size: .6rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--logo-pale);
   white-space: nowrap;
 }

 .map-addr {
   position: absolute;
   bottom: 1.2rem;
   left: 0;
   right: 0;
   text-align: center;
   font-size: .62rem;
   color: rgba(240, 221, 176, .3);
   letter-spacing: .1em;
 }

 /* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
 footer {
   background: #0c0804;
   padding: 4.5rem 4.5rem 2.5rem;
   border-top: 1px solid rgba(177, 141, 49, .1);
 }

 .ft {
   max-width: 1240px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1.35fr 1fr 1fr 1.25fr;
   gap: 3.2rem;
   padding-bottom: 3.2rem;
   border-bottom: 1px solid rgba(177, 141, 49, .18);
   position: relative;
   z-index: 2;
 }

 .ft-logo-link {
   display: inline-block;
   text-decoration: none;
   margin-bottom: 1.2rem;
 }

 .ft-brand img {
   height: 44px;
   width: auto;
   display: block;
   object-fit: contain;
   filter: drop-shadow(0 0 10px rgba(177, 141, 49, .3));
 }

 .ft-desc {
   font-size: .92rem;
   color: rgba(240, 221, 176, .88);
   line-height: 1.8;
   margin-bottom: 1.3rem;
   font-weight: 300;
 }

 .ft-badges {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
 }

 .ft-badge {
   font-size: .68rem;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--logo-pale);
   background: rgba(177, 141, 49, .12);
   border: 1px solid rgba(177, 141, 49, .3);
   padding: .32rem .75rem;
   border-radius: 999px;
   font-weight: 600;
 }

 .ft-heading {
   font-family: 'Cormorant Garamond', Georgia, serif;
   font-size: 1.35rem;
   font-weight: 600;
   color: #fff;
   margin-bottom: 1.3rem;
   letter-spacing: .04em;
   position: relative;
   display: inline-block;
 }

 .ft-heading::after {
   content: '';
   display: block;
   width: 28px;
   height: 2px;
   background: var(--logo);
   margin-top: .4rem;
 }

 .ft-links {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: .7rem;
 }

 .ft-links a {
   font-size: .9rem;
   color: rgba(240, 221, 176, .86);
   text-decoration: none;
   letter-spacing: .02em;
   transition: all .25s ease;
   display: inline-flex;
   align-items: center;
   gap: .4rem;
 }

 .ft-links a::before {
   content: '›';
   color: var(--logo);
   font-size: 1.15rem;
   line-height: 1;
   opacity: .65;
   transition: transform .25s, opacity .25s;
 }

 .ft-links a:hover {
   color: #ffffff;
   transform: translateX(4px);
 }

 .ft-links a:hover::before {
   opacity: 1;
   color: var(--logo-pale);
 }

 .ft-outlet-box {
   background: rgba(22, 16, 10, .65);
   border: 1px solid rgba(177, 141, 49, .22);
   border-radius: 10px;
   padding: .85rem 1rem;
   margin-bottom: .85rem;
   transition: border-color .3s, background .3s;
 }

 .ft-outlet-box:hover {
   border-color: var(--logo);
   background: rgba(32, 22, 12, .85);
 }

 .ft-outlet-name {
   font-size: .9rem;
   font-weight: 600;
   color: #fff;
   margin-bottom: .2rem;
 }

 .ft-outlet-addr {
   font-size: .8rem;
   color: rgba(240, 221, 176, .76);
   line-height: 1.45;
   margin-bottom: .4rem;
 }

 .ft-direction-link {
   font-size: .78rem;
   font-weight: 600;
   color: var(--logo-pale) !important;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: .25rem;
   letter-spacing: .04em;
   transition: color .2s, transform .2s;
 }

 .ft-direction-link:hover {
   color: #fff !important;
   transform: translateX(3px);
 }

 .ft-hours-chip {
   display: flex;
   align-items: center;
   gap: .6rem;
   background: rgba(177, 141, 49, .12);
   border: 1px solid rgba(177, 141, 49, .3);
   padding: .6rem .9rem;
   border-radius: 8px;
   font-size: .82rem;
   color: rgba(240, 221, 176, .95);
   margin-top: .5rem;
 }

 .ft-hours-dot {
   width: 8px;
   height: 8px;
   background: #4ade80;
   border-radius: 50%;
   box-shadow: 0 0 8px #4ade80;
   flex-shrink: 0;
 }

 .ft-hours-chip strong {
   color: #fff;
 }

 .ft-bot {
   max-width: 1240px;
   margin: 2.2rem auto 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 1rem;
   position: relative;
   z-index: 2;
 }

 .ft-copy,
 .ft-tagline {
   font-size: .78rem;
   color: rgba(240, 221, 176, .78);
   letter-spacing: .08em;
   margin: 0;
   font-weight: 500;
 }

 .ft-tagline {
   color: var(--logo-pale);
 }

 /* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
 @media(max-width:1050px) {
   #nav {
     padding: 1rem 2rem;
   }

   #nav.solid {
     padding: .8rem 2rem;
   }

   .nav-links {
     display: none;
   }

   .hero-body {
     padding: 8rem 2rem 8rem;
   }

   .hero-bar {
     padding: 1rem 2rem;
     gap: 1.2rem;
     flex-wrap: wrap;
   }

   .hbar-cell {
     border-right: none;
     padding: 0;
   }

   .hero-right {
     display: none;
   }

   #story,
   .story-grid,
   .visit-grid {
     display: block;
   }

   #story {
     padding: 5rem 2rem;
   }

   .story-grid .story-img-wrap {
     margin-bottom: 4rem;
   }

   #menu {
     padding: 5rem 2rem;
   }

   .menu-hd {
     flex-direction: column;
     align-items: flex-start;
     gap: 1rem;
   }

   .menu-hd-r {
     text-align: left;
   }

   .menu-grid {
     grid-template-columns: 1fr;
   }

   .mc.feat {
     grid-row: span 1;
   }

   #atm {
     grid-template-columns: 1fr;
   }

   .atm-img {
     height: 300px;
   }

   .atm-body {
     padding: 4rem 2rem;
   }

   #gallery {
     padding: 5rem 2rem;
   }

   .gallery-hd {
     flex-direction: column;
     align-items: flex-start;
     gap: 1rem;
   }

   .gallery-grid {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto;
   }

   .gc.tall {
     grid-row: span 1;
   }

   #testi {
     padding: 5rem 2rem;
   }

   #visit {
     padding: 5rem 2rem;
   }

   .visit-grid {
     display: block;
   }

   .visit-info {
     margin-bottom: 3rem;
   }

   footer {
     padding: 4rem 2rem 2rem;
   }

   .ft {
     grid-template-columns: 1fr;
     gap: 2.5rem;
   }

   .ft-bot {
     flex-direction: column;
     gap: .5rem;
     text-align: center;
   }

   .scroll-cue {
     left: 2rem;
   }
 }

 /* Mobile Responsive Adjustments */
 @media (max-width: 768px) {
   #hero {
     display: flex;
     flex-direction: column;
     height: auto;
     min-height: 100vh;
     padding-top: 60px;
     /* Space for a header if you have one */
     overflow: hidden;
   }

   /* Stack the main body content */
   .hero-body {
     width: 100%;
     padding: 20px;
     text-align: center;
     z-index: 10;
   }

   .hero-h1 {
     font-size: 2.5rem;
     /* Adjust based on your preference */
     line-height: 1.2;
   }

   /* Hide the side panels on mobile to save space, 
     or you can turn them into a small horizontal scroll */
   .hero-right {
     display: none;
   }

   /* Adjust the pills to wrap nicely */
   .hero-pills {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 8px;
   }

   .hpill {
     font-size: 0.8rem;
     padding: 4px 10px;
   }

   /* Make the bottom info bar stack or scroll */
   .hero-bar {
     position: relative;
     flex-direction: column;
     height: auto;
     background: rgba(0, 0, 0, 0.8);
     padding: 20px 0;
   }

   .hbar-cell {
     width: 100%;
     justify-content: center;
     margin-bottom: 15px;
     border-right: none !important;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     padding-bottom: 10px;
   }

   /* Ensure the background mosaic doesn't distract from text */
   .hero-mosaic {
     opacity: 0.4;
   }

   /* Center CTAs */
   .hero-cta {
     display: flex;
     flex-direction: column;
     gap: 12px;
     align-items: center;
   }

   .cta-primary,
   .cta-secondary {
     width: 80%;
     text-align: center;
   }
 }

 @media (max-width: 768px) {
   .story-stats {
     display: flex;
     justify-content: center;
     /* Centers the items horizontally */
     align-items: center;
     /* Aligns items vertically */
     text-align: center;
     /* Centers the text inside each stat */
     gap: 20px;
     /* Adds spacing between the columns */
     width: 100%;
     /* Ensures it takes full width to allow centering */
     margin: 0 auto;
   }

   .sstat {
     flex: 1;
     /* Optional: makes all three take equal space */
     max-width: 100px;
     /* Optional: keeps them tight together */
   }
 }

 @media (max-width: 768px) {
   .hero-bar {
     display: flex;
     flex-direction: column;
     /* Stacks items vertically */
     height: auto;
     /* Allows height to grow with content */
     padding: 20px;
     gap: 15px;
     /* Space between each info block */
     background: rgba(0, 0, 0, 0.9);
     /* Ensures readability against background */
   }

   .hbar-cell {
     display: flex;
     align-items: center;
     /* Vertically aligns icon with text */
     justify-content: flex-start;
     /* Keep left aligned, or use 'center' if preferred */
     width: 100%;
     border-right: none !important;
     /* Removes desktop dividers */
     padding: 10px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     /* Subtle separator */
   }

   .hbar-cell:last-child {
     border-bottom: none;
     /* Removes border from the last item */
   }

   .hbar-ico {
     width: 24px;
     /* Fixed icon size for consistency */
     height: 24px;
     margin-right: 15px;
     /* Space between icon and text */
     flex-shrink: 0;
     /* Prevents icon from squishing */
   }

   .hbar-l {
     font-size: 0.7rem;
     /* Label (e.g., LOCATION) */
     text-transform: uppercase;
     letter-spacing: 1px;
     opacity: 0.7;
   }

   .hbar-v {
     font-size: 1rem;
     /* Value (e.g., Sanjay Nagar) */
     font-weight: 500;
   }
 }