/* ═══════════════════════════════════════════════
       DESIGN TOKENS
    ═══════════════════════════════════════════════ */
 :root {
     --cream: #f7f3ee;
     --gold: #c8a96e;
     --charcoal: #1a1814;
     --warm-gray: #8c8278;
     --nav-h: 88px;
     --nav-h-sm: 64px;
 }

 /* ═══════════════════════════════════════════════
       RESET & BASE
    ═══════════════════════════════════════════════ */
 *,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
     -webkit-tap-highlight-color: transparent;
 }

 body {
     background-color: var(--charcoal);
     color: var(--cream);
     font-family: 'Jost', sans-serif;
     font-weight: 300;
     overflow-x: hidden;
 }

 img {
     display: block;
     width: 100%;
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 /* ═══════════════════════════════════════════════
       GRAIN OVERLAY
    ═══════════════════════════════════════════════ */
 /* Grain removed for performance */

 /* ═══════════════════════════════════════════════
       CUSTOM CURSOR — fine-pointer (desktop) only
    ═══════════════════════════════════════════════ */
 .cursor,
 .cursor-ring {
     display: none;
 }

 @media (pointer:fine) {
     .cursor {
         display: block;
         width: 10px;
         height: 10px;
         background: var(--gold);
         border-radius: 50%;
         position: fixed;
         top: 0;
         left: 0;
         pointer-events: none;
         transform: translate(-50%, -50%);
         transition: width .2s, height .2s;
         z-index: 9999;
     }

     .cursor-ring {
         display: block;
         width: 36px;
         height: 36px;
         border: 1px solid rgba(200, 169, 110, .5);
         border-radius: 50%;
         position: fixed;
         top: 0;
         left: 0;
         pointer-events: none;
         transform: translate(-50%, -50%);
         transition: width .2s, height .2s, border-color .2s;
         z-index: 9998;
     }
 }

 /* ═══════════════════════════════════════════════
       NAVBAR
    ═══════════════════════════════════════════════ */
 .navbar-custom {
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: transparent;
     padding: 0 clamp(18px, 5vw, 60px);
     height: var(--nav-h);
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     transition: all .45s ease;
     border-bottom: 1px solid transparent;
 }

 /* safe area on notched phones */
 @supports(padding:max(0px)) {
     .navbar-custom {
         padding-left: max(clamp(18px, 5vw, 60px), env(safe-area-inset-left));
         padding-right: max(clamp(18px, 5vw, 60px), env(safe-area-inset-right));
     }
 }

 .navbar-custom.scrolled {
     background: rgba(26, 24, 20, .94);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
     height: calc(var(--nav-h) - 16px);
     border-bottom-color: rgba(200, 169, 110, .15);
 }

 .navbar-brand-text {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(1.2rem, 3vw, 1.65rem);
     letter-spacing: .1em;
     color: var(--cream);
     white-space: nowrap;
 }

 .navbar-brand-text span { color:var(--gold); }
 .brand-logo { height: clamp(30px, 4.5vw, 44px); width: auto; display: block; }
 .footer-logo { height: clamp(34px, 4vw, 50px); width: auto; display: block; }

 /* desktop links */
 .nav-links {
     display: flex;
     align-items: center;
     gap: 2px;
 }

 .nav-link-custom {
     font-size: .68rem;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: rgba(247, 243, 238, .7);
     padding: 7px 13px;
     transition: color .3s;
 }

 .nav-link-custom:hover {
     color: var(--gold);
 }

 .nav-cta {
     border: 1px solid var(--gold);
     color: var(--gold) !important;
     padding: 8px 20px !important;
     margin-left: 6px;
     transition: all .3s;
 }

 .nav-cta:hover {
     background: var(--gold);
     color: var(--charcoal) !important;
 }

 /* hamburger button */
 .hamburger {
     display: none;
     flex-direction: column;
     justify-content: center;
     gap: 5px;
     width: 40px;
     height: 40px;
     background: transparent;
     border: none;
     cursor: pointer;
     padding: 6px;
     touch-action: manipulation;
 }

 .hamburger span {
     display: block;
     height: 1px;
     background: var(--cream);
     transition: all .35s ease;
     transform-origin: center;
 }

 .hamburger.open span:nth-child(1) {
     transform: translateY(6px) rotate(45deg);
 }

 .hamburger.open span:nth-child(2) {
     opacity: 0;
     transform: scaleX(0);
 }

 .hamburger.open span:nth-child(3) {
     transform: translateY(-6px) rotate(-45deg);
 }

 /* mobile drawer */
 .mobile-drawer {
     position: fixed;
     top: var(--nav-h-sm);
     left: 0;
     right: 0;
     background: rgba(18, 15, 11, .97);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid rgba(200, 169, 110, .12);
     padding: 16px 28px 28px;
     z-index: 999;
     transform: translateY(-10px);
     opacity: 0;
     transition: all .35s cubic-bezier(.25, .46, .45, .94);
     pointer-events: none;
     display: block;
     /* always in DOM, hidden via opacity/pointer-events */
 }

 .mobile-drawer.open {
     transform: translateY(0);
     opacity: 1;
     pointer-events: all;
 }

 .mobile-drawer a {
     display: block;
     font-size: .7rem;
     letter-spacing: .22em;
     text-transform: uppercase;
     color: rgba(247, 243, 238, .7);
     padding: 13px 0;
     border-bottom: 1px solid rgba(200, 169, 110, .07);
     transition: color .3s;
 }

 .mobile-drawer a:last-child {
     border-bottom: none;
 }

 .mobile-drawer a:hover {
     color: var(--gold);
 }

 .m-cta {
     margin-top: 14px;
     border: 1px solid var(--gold) !important;
     color: var(--gold) !important;
     text-align: center;
     padding: 12px !important;
 }

 @media(max-width:991px) {
     .nav-links {
         display: none;
     }

     .hamburger {
         display: flex;
     }

     .navbar-custom {
         height: var(--nav-h-sm);
     }

     .navbar-custom.scrolled {
         height: var(--nav-h-sm);
     }
 }

 /* ═══════════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════════ */
 .hero {
     min-height: 100svh;
     /* svh for mobile browsers */
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 0 clamp(16px, 5vw, 40px);
 }

 .hero-bg {
     position: absolute;
     inset: 0;
     background: url('https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=1800&q=80') center/cover no-repeat;
 }

 .hero-bg::before {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(13, 11, 9, 0.7);
 }

 .hero-bg::after {
     content: '';
     position: absolute;
     inset: 0;
     background:
         radial-gradient(ellipse 60% 40% at 70% 40%, rgba(200, 169, 110, .09) 0%, transparent 60%),
         radial-gradient(ellipse 40% 50% at 20% 70%, rgba(232, 213, 204, .04) 0%, transparent 50%);
 }

 .hero-decor {
     position: absolute;
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(16vw, 22vw, 22vw);
     font-weight: 300;
     color: rgba(200, 169, 110, .04);
     letter-spacing: -.02em;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     white-space: nowrap;
     pointer-events: none;
     user-select: none;
 }

 .hero-content {
     position: relative;
     text-align: center;
     z-index: 2;
     max-width: 720px;
     width: 100%;
 }

 .hero-eyebrow {
     font-size: clamp(.55rem, .7vw, .65rem);
     letter-spacing: .32em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: clamp(14px, 2.5vw, 24px);
     opacity: 0;
     animation: fadeUp .8s .3s forwards;
 }

 .hero-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(2.6rem, 9vw, 7rem);
     font-weight: 300;
     line-height: 1.05;
     letter-spacing: -.01em;
     color: var(--cream);
     opacity: 0;
     animation: fadeUp .9s .5s forwards;
 }

 .hero-title em {
     color: var(--gold);
     font-style: italic;
 }

 .hero-sub {
     font-size: clamp(.72rem, .9vw, .88rem);
     letter-spacing: .12em;
     color: var(--warm-gray);
     margin-top: clamp(10px, 1.8vw, 20px);
     opacity: 0;
     animation: fadeUp .8s .7s forwards;
 }

 .hero-line {
     width: 1px;
     height: clamp(44px, 7vw, 80px);
     background: linear-gradient(to bottom, var(--gold), transparent);
     margin: clamp(20px, 3.5vw, 40px) auto 0;
     opacity: 0;
     animation: fadeUp .8s .9s forwards;
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(28px);
     }

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

 /* ═══════════════════════════════════════════════
       SECTION HEADINGS
    ═══════════════════════════════════════════════ */
 .section-eyebrow {
     font-size: .6rem;
     letter-spacing: .4em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 10px;
 }

 .section-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(1.9rem, 4.5vw, 3.5rem);
     font-weight: 300;
     color: var(--cream);
     line-height: 1.18;
 }

 .section-title em {
     color: var(--gold);
     font-style: italic;
 }

 .gold-line {
     width: 40px;
     height: 1px;
     background: var(--gold);
     margin: 14px auto 0;
 }

 /* ═══════════════════════════════════════════════
       MARQUEE STRIP
    ═══════════════════════════════════════════════ */
 .featured-strip {
     padding: clamp(28px, 5vw, 60px) 0;
     border-top: 1px solid rgba(200, 169, 110, .12);
     border-bottom: 1px solid rgba(200, 169, 110, .12);
     margin-bottom: clamp(32px, 6vw, 80px);
     overflow: hidden;
 }

 .strip-inner {
     display: flex;
     gap: clamp(20px, 4vw, 40px);
     animation: scrollX 28s linear infinite;
     width: max-content;
 }

 .strip-item {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(.82rem, 1.4vw, 1.1rem);
     font-style: italic;
     color: var(--warm-gray);
     letter-spacing: .08em;
     white-space: nowrap;
     display: flex;
     align-items: center;
     gap: clamp(20px, 4vw, 40px);
 }

 .strip-item::after {
     content: '◆';
     color: var(--gold);
     font-size: .42rem;
     font-style: normal;
 }

 @keyframes scrollX {
     from {
         transform: translateX(0);
     }

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

 /* ═══════════════════════════════════════════════
       FILTER BAR
    ═══════════════════════════════════════════════ */
 .filter-section {
     padding: clamp(48px, 9vw, 90px) 0 clamp(28px, 5vw, 52px);
     text-align: center;
 }

 .filter-bar {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: clamp(6px, 1vw, 10px);
     margin-top: clamp(20px, 3.5vw, 40px);
     padding: 0 clamp(12px, 3vw, 40px);
 }

 .filter-btn {
     font-size: clamp(.56rem, .7vw, .65rem);
     letter-spacing: .2em;
     text-transform: uppercase;
     padding: clamp(8px, 1.2vw, 11px) clamp(13px, 2.2vw, 26px);
     border: 1px solid rgba(200, 169, 110, .3);
     background: transparent;
     color: var(--warm-gray);
     cursor: pointer;
     transition: all .3s;
     font-family: 'Jost', sans-serif;
     touch-action: manipulation;
     position: relative;
     overflow: hidden;
 }

 .filter-btn:hover,
 .filter-btn.active {
     border-color: var(--gold);
     color: var(--cream);
     background: rgba(200, 169, 110, .08);
 }

 .filter-btn.active {
     color: var(--gold);
 }

 /* ═══════════════════════════════════════════════
       GALLERY MASONRY
    ═══════════════════════════════════════════════ */
 .gallery-section {
     padding: 0 0 clamp(50px, 9vw, 120px);
 }

 .gallery-grid {
     columns: 3;
     column-gap: clamp(8px, 1.2vw, 16px);
     padding: 0 clamp(12px, 3vw, 40px);
 }

 @media(max-width:991px) {
     .gallery-grid {
         columns: 2;
     }
 }

 @media(max-width:479px) {
     .gallery-grid {
         columns: 1;
     }
 }

 .gallery-item {
     break-inside: avoid;
     margin-bottom: clamp(8px, 1.2vw, 16px);
     position: relative;
     overflow: hidden;
     cursor: pointer;
 }

 .gallery-item img {
     transition: transform .7s cubic-bezier(.25, .46, .45, .94);
     filter: brightness(.92) saturate(.85);
 }

 /* hover effects only for pointer:fine (mouse) */
 @media(hover:hover) and (pointer:fine) {
     .gallery-item:hover img {
         transform: scale(1.06);
         filter: brightness(1) saturate(1);
     }

     .gallery-item:hover .gallery-overlay {
         opacity: 1;
     }

     .gallery-item:hover .overlay-icon {
         opacity: 1;
         transform: scale(1);
     }
 }

 /* touch: always show subtle gradient */
 @media(hover:none) {
     .gallery-overlay {
         opacity: 1 !important;
         background: linear-gradient(to top, rgba(26, 24, 20, .58) 0%, transparent 52%);
     }

     .overlay-icon {
         display: none;
     }
 }

 .gallery-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(26, 24, 20, .76) 0%, transparent 50%);
     opacity: 0;
     transition: opacity .4s;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: clamp(10px, 2vw, 22px);
 }

 .overlay-tag {
     font-size: .52rem;
     letter-spacing: .24em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 3px;
 }

 .overlay-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(.88rem, 1.5vw, 1.2rem);
     color: var(--cream);
     font-weight: 300;
 }

 .overlay-icon {
     position: absolute;
     top: clamp(10px, 1.5vw, 18px);
     right: clamp(10px, 1.5vw, 18px);
     width: 34px;
     height: 34px;
     border: 1px solid rgba(247, 243, 238, .4);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--cream);
     font-size: .75rem;
     opacity: 0;
     transform: scale(.7);
     transition: all .4s .1s;
 }

 /* ═══════════════════════════════════════════════
       LOAD MORE
    ═══════════════════════════════════════════════ */
 .load-more-btn {
     font-size: .66rem;
     letter-spacing: .26em;
     text-transform: uppercase;
     padding: clamp(11px, 1.8vw, 16px) clamp(28px, 4.5vw, 48px);
     border: 1px solid rgba(200, 169, 110, .4);
     background: transparent;
     color: var(--cream);
     cursor: pointer;
     transition: all .3s;
     font-family: 'Jost', sans-serif;
     display: block;
     margin: clamp(20px, 3.5vw, 40px) auto 0;
     touch-action: manipulation;
     position: relative;
     overflow: hidden;
 }

 .load-more-btn:hover {
     border-color: var(--gold);
     background: rgba(200, 169, 110, .08);
     color: var(--gold);
 }

 /* ═══════════════════════════════════════════════
       STATS
    ═══════════════════════════════════════════════ */
 .stats-section {
     padding: clamp(44px, 8vw, 80px) 0;
     background: rgba(200, 169, 110, .04);
     border-top: 1px solid rgba(200, 169, 110, .1);
 }

 .stat-num {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(2.4rem, 5vw, 3.8rem);
     font-weight: 300;
     color: var(--gold);
     line-height: 1;
 }

 .stat-label {
     font-size: clamp(.52rem, .7vw, .65rem);
     letter-spacing: .24em;
     text-transform: uppercase;
     color: var(--warm-gray);
     margin-top: 8px;
 }

 /* ═══════════════════════════════════════════════
       LIGHTBOX
    ═══════════════════════════════════════════════ */
 .lightbox {
     position: fixed;
     inset: 0;
     background: rgba(10, 8, 6, .96);
     z-index: 5000;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity .4s;
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     /* respect notch */
     padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
 }

 .lightbox.open {
     opacity: 1;
     pointer-events: all;
 }

 .lightbox-inner {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
 }

 .lightbox-img {
     max-width: min(88vw, 900px);
     max-height: min(78vh, 700px);
     object-fit: contain;
     border: 1px solid rgba(200, 169, 110, .18);
     transform: scale(.9);
     transition: transform .4s .1s;
 }

 .lightbox.open .lightbox-img {
     transform: scale(1);
 }

 .lightbox-close {
     position: fixed;
     top: max(clamp(14px, 3vw, 32px), env(safe-area-inset-top, 0px));
     right: clamp(14px, 3vw, 40px);
     width: clamp(36px, 5vw, 44px);
     height: clamp(36px, 5vw, 44px);
     border: 1px solid rgba(200, 169, 110, .4);
     border-radius: 50%;
     background: rgba(26, 24, 20, .7);
     color: var(--cream);
     font-size: .9rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all .3s;
     z-index: 5010;
     touch-action: manipulation;
 }

 .lightbox-close:hover {
     border-color: var(--gold);
     color: var(--gold);
 }

 .lightbox-nav {
     position: fixed;
     top: 50%;
     transform: translateY(-50%);
     width: clamp(36px, 5vw, 50px);
     height: clamp(36px, 5vw, 50px);
     border: 1px solid rgba(200, 169, 110, .28);
     border-radius: 50%;
     background: rgba(26, 24, 20, .7);
     color: var(--cream);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all .3s;
     font-size: .82rem;
     z-index: 5010;
     touch-action: manipulation;
 }

 .lightbox-nav:hover {
     border-color: var(--gold);
     color: var(--gold);
 }

 .lightbox-prev {
     left: clamp(8px, 2.5vw, 32px);
 }

 .lightbox-next {
     right: clamp(8px, 2.5vw, 32px);
 }

 .lightbox-caption {
     position: fixed;
     bottom: max(clamp(18px, 3.5vw, 40px), env(safe-area-inset-bottom, 0px));
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
     width: 90%;
     z-index: 5010;
 }

 .lightbox-caption-tag {
     font-size: .52rem;
     letter-spacing: .3em;
     text-transform: uppercase;
     color: var(--gold);
 }

 .lightbox-caption-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(1rem, 2vw, 1.3rem);
     color: var(--cream);
     font-weight: 300;
     margin-top: 4px;
 }

 .lightbox-counter {
     font-size: .6rem;
     letter-spacing: .2em;
     color: var(--warm-gray);
     margin-top: 4px;
 }

 /* ═══════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════ */
 .footer {
     padding: clamp(44px, 8vw, 80px) 0 clamp(20px, 4vw, 40px);
     border-top: 1px solid rgba(200, 169, 110, .12);
 }

 .footer-brand {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(1.4rem, 3vw, 2rem);
     color: var(--cream);
 }

 .footer-brand span {
     color: var(--gold);
 }

 .footer-tagline {
     font-size: .7rem;
     letter-spacing: .14em;
     color: var(--warm-gray);
     margin-top: 6px;
 }

 .footer-social a {
     width: 36px;
     height: 36px;
     border: 1px solid rgba(200, 169, 110, .28);
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--warm-gray);
     font-size: .8rem;
     margin-right: 6px;
     transition: all .3s;
 }

 .footer-social a:hover {
     border-color: var(--gold);
     color: var(--gold);
 }

 .footer-copy {
     font-size: .6rem;
     letter-spacing: .12em;
     color: rgba(140, 130, 120, .45);
 }

 .footer-divider {
     border-top: 1px solid rgba(200, 169, 110, .09);
     margin-top: clamp(20px, 3.5vw, 36px);
     padding-top: clamp(14px, 2.5vw, 24px);
 }

 /* ═══════════════════════════════════════════════
       SCROLL REVEAL
    ═══════════════════════════════════════════════ */
 .reveal {
     opacity: 0;
     transform: translateY(32px);
     transition: opacity .75s cubic-bezier(.25, .46, .45, .94),
         transform .75s cubic-bezier(.25, .46, .45, .94);
 }

 .reveal.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* ═══════════════════════════════════════════════
       RIPPLE
    ═══════════════════════════════════════════════ */
 .ripple {
     position: absolute;
     border-radius: 50%;
     background: rgba(200, 169, 110, .18);
     transform: scale(0);
     animation: rippleAnim .55s linear;
     pointer-events: none;
 }

 @keyframes rippleAnim {
     to {
         transform: scale(4);
         opacity: 0;
     }
 }

 /* ═══════════════════════════════════════════════
       MOBILE HELPERS
    ═══════════════════════════════════════════════ */
 @media(max-width:767px) {
     .text-center-sm {
         text-align: center !important;
     }

     .gold-line {
         margin-left: auto;
         margin-right: auto;
     }
 }