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

    :root {
      --br-deep: #2C1A0E;
      --br-rich: #3D2314;
      --br-warm: #5C3317;
      --br-mid: #7A4728;
      --br-accent: #A0622A;
      --gold: #C9943A;
      --gold-b: #E8B85A;
      --gold-l: #F0D598;
      --gold-p: #FAF0D8;
      --cream: #FBF5EC;
      --cream-w: #F5ECD8;
      --ivory: #FFF8EE;
      --lb: #EDE0CE;
      --txt: #1A0E06;
      --txt-m: #4A3020;
      --txt-mu: #8A7060;
      --bdr: rgba(160, 98, 42, 0.22);
      --shbr: rgba(44, 26, 14, 0.18);
      --shgo: rgba(201, 148, 58, 0.28);
      --panel: #FFFDF8;
      --tr: 0.38s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px
    }

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

    /* KEY CURSOR */
    #key-cursor {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99999;
      pointer-events: none;
      transform: translate(-8px, -8px);
      width: 52px;
      height: 52px;
      will-change: left, top
    }

    #key-cursor svg {
      width: 52px;
      height: 52px;
      filter: drop-shadow(0 2px 8px rgba(44, 26, 14, 0.5));
      transition: transform 0.3s, filter 0.3s
    }

    #key-cursor.hov svg {
      filter: drop-shadow(0 4px 16px rgba(201, 148, 58, 0.8));
      transform: rotate(-22deg) scale(1.22)
    }

    ::-webkit-scrollbar {
      width: 4px
    }

    ::-webkit-scrollbar-track {
      background: var(--cream-w)
    }

    ::-webkit-scrollbar-thumb {
      background: var(--gold);
      border-radius: 2px
    }

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

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

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0) rotate(0deg)
      }

      50% {
        transform: translateY(-14px) rotate(0.5deg)
      }
    }

    @keyframes shimmer {

      0%,
      100% {
        opacity: 0.4
      }

      50% {
        opacity: 1
      }
    }

    @keyframes slideR {
      from {
        transform: translateX(-34px);
        opacity: 0
      }

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

    @keyframes slideUp {
      from {
        transform: translateY(34px);
        opacity: 0
      }

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

    @keyframes marquee {
      from {
        transform: translateX(0)
      }

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

    @keyframes glowP {

      0%,
      100% {
        box-shadow: 0 0 20px rgba(201, 148, 58, 0.3)
      }

      50% {
        box-shadow: 0 0 40px rgba(201, 148, 58, 0.6)
      }
    }

    @keyframes rotS {
      from {
        transform: rotate(0deg)
      }

      to {
        transform: rotate(360deg)
      }
    }

    @keyframes keyWig {

      0%,
      100% {
        transform: rotate(0deg)
      }

      25% {
        transform: rotate(-10deg)
      }

      75% {
        transform: rotate(10deg)
      }
    }

    @keyframes imgReveal {
      from {
        clip-path: inset(0 100% 0 0);
        opacity: 0
      }

      to {
        clip-path: inset(0 0% 0 0);
        opacity: 1
      }
    }

    @keyframes scaleIn {
      from {
        opacity: 0;
        transform: scale(0.88)
      }

      to {
        opacity: 1;
        transform: scale(1)
      }
    }

    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .72s ease, transform .72s ease
    }

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

    .rd1 {
      transition-delay: .1s
    }

    .rd2 {
      transition-delay: .2s
    }

    .rd3 {
      transition-delay: .3s
    }

    .rd4 {
      transition-delay: .45s
    }

    /* NAV */
    #navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.4rem 5%;
      background: rgba(251, 245, 236, .88);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid transparent;
      transition: var(--tr)
    }

    #navbar.scrolled {
      padding: .85rem 5%;
      background: rgba(251, 245, 236, .97);
      border-bottom-color: var(--bdr);
      box-shadow: 0 8px 40px rgba(44, 26, 14, .08)
    }

    .nav-logo {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.85rem;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--br-deep);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: .5rem
    }

    .nav-logo .lkey {
      font-size: 1.1rem;
      color: var(--gold);
      animation: keyWig 3s ease-in-out infinite;
      display: inline-block
    }

    .nav-logo span {
      color: var(--gold);
      font-weight: 300
    }

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

    .nav-links a {
      text-decoration: none;
      color: var(--txt-m);
      font-size: .86rem;
      font-weight: 500;
      letter-spacing: .09em;
      text-transform: uppercase;
      position: relative;
      transition: color .25s
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 1.5px;
      background: var(--gold);
      border-radius: 2px;
      transition: width .3s ease
    }

    .nav-links a:hover {
      color: var(--gold)
    }

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

    .nav-actions {
      display: flex;
      gap: 1.1rem;
      align-items: center
    }

    .nav-btn {
      background: none;
      border: none;
      color: var(--txt-m);
      font-size: 1.1rem;
      cursor: none;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: color .25s, background .25s, transform .25s;
      position: relative
    }

    .nav-btn:hover {
      color: var(--gold);
      transform: scale(1.15);
      background: rgba(201, 148, 58, .1)
    }

    .nav-btn .badge {
      position: absolute;
      top: 3px;
      right: 3px;
      width: 17px;
      height: 17px;
      background: var(--gold);
      border-radius: 50%;
      font-size: .58rem;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      border: 2px solid var(--cream)
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: none;
      border: none;
      background: none;
      padding: 5px
    }

    .hamburger span {
      display: block;
      width: 24px;
      height: 1.5px;
      background: var(--br-deep);
      transition: var(--tr)
    }

    /* PANELS */
    .side-panel {
      position: fixed;
      top: 0;
      right: -440px;
      width: 440px;
      max-width: 96vw;
      height: 100vh;
      background: var(--panel);
      z-index: 2000;
      box-shadow: -20px 0 80px rgba(44, 26, 14, .15);
      transition: right .46s cubic-bezier(.25, .8, .25, 1);
      display: flex;
      flex-direction: column;
      overflow: hidden
    }

    .side-panel.open {
      right: 0
    }

    .panel-overlay {
      position: fixed;
      inset: 0;
      background: rgba(28, 16, 6, .5);
      z-index: 1999;
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s;
      backdrop-filter: blur(5px)
    }

    .panel-overlay.active {
      opacity: 1;
      pointer-events: all
    }

    .panel-header {
      padding: 2rem 2rem 1.5rem;
      border-bottom: 1px solid var(--lb);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(135deg, var(--cream), var(--ivory))
    }

    .panel-header h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.7rem;
      font-weight: 600;
      color: var(--br-deep);
      display: flex;
      align-items: center;
      gap: .5rem
    }

    .panel-header h2 i {
      color: var(--gold);
      font-size: 1.2rem
    }

    .panel-close {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid var(--lb);
      background: none;
      cursor: none;
      font-size: 1rem;
      color: var(--txt-mu);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--tr)
    }

    .panel-close:hover {
      background: var(--lb);
      color: var(--br-deep);
      transform: rotate(90deg)
    }

    .panel-body {
      flex: 1;
      overflow-y: auto;
      padding: 1.5rem 2rem
    }

    .panel-body::-webkit-scrollbar {
      width: 3px
    }

    .panel-body::-webkit-scrollbar-thumb {
      background: var(--gold-l)
    }

    .panel-footer {
      padding: 1.5rem 2rem;
      border-top: 1px solid var(--lb);
      background: var(--ivory)
    }

    .cart-item {
      display: flex;
      gap: 1rem;
      align-items: center;
      padding: 1rem 0;
      border-bottom: 1px solid var(--lb)
    }

    .cart-item-img {
      width: 82px;
      height: 82px;
      border-radius: 14px;
      background: var(--lb);
      background-size: cover;
      background-position: center;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(44, 26, 14, .1)
    }

    .cart-item-info {
      flex: 1
    }

    .cart-item-info h4 {
      font-size: .95rem;
      font-weight: 600;
      margin-bottom: .2rem;
      color: var(--br-deep)
    }

    .cart-item-info span {
      font-size: .8rem;
      color: var(--txt-mu)
    }

    .cart-item-price {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--br-accent);
      white-space: nowrap
    }

    .cart-qty {
      display: flex;
      align-items: center;
      gap: .5rem;
      margin-top: .5rem
    }

    .qty-btn {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid var(--bdr);
      background: none;
      cursor: none;
      font-size: .78rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--tr)
    }

    .qty-btn:hover {
      background: var(--gold);
      border-color: var(--gold);
      color: white
    }

    .qty-num {
      font-size: .9rem;
      font-weight: 700;
      min-width: 22px;
      text-align: center;
      color: var(--br-deep)
    }

    .remove-item {
      color: var(--txt-mu);
      background: none;
      border: none;
      cursor: none;
      font-size: .82rem;
      transition: color .2s;
      margin-left: auto
    }

    .remove-item:hover {
      color: #c0392b
    }

    .cart-total-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: .8rem;
      font-size: .88rem;
      color: var(--txt-m)
    }

    .cart-total-row.grand {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      font-weight: 700;
      border-top: 1px solid var(--lb);
      padding-top: 1rem;
      color: var(--br-deep)
    }

    .btn-checkout {
      width: 100%;
      padding: 1.05rem;
      background: var(--br-deep);
      color: var(--gold-l);
      border: none;
      border-radius: 60px;
      font-family: 'DM Sans', sans-serif;
      font-size: .95rem;
      font-weight: 600;
      cursor: none;
      letter-spacing: .05em;
      transition: var(--tr)
    }

    .btn-checkout:hover {
      background: var(--gold);
      color: var(--br-deep);
      box-shadow: 0 14px 34px var(--shgo);
      transform: translateY(-2px)
    }

    .empty-state {
      text-align: center;
      padding: 3rem 1rem
    }

    .empty-state i {
      font-size: 3.5rem;
      color: var(--gold-l);
      margin-bottom: 1rem;
      display: block
    }

    .empty-state p {
      color: var(--txt-mu);
      font-size: .95rem;
      line-height: 1.6
    }

    .fav-item {
      display: flex;
      gap: 1rem;
      align-items: center;
      padding: 1rem 0;
      border-bottom: 1px solid var(--lb)
    }

    .fav-item-img {
      width: 72px;
      height: 72px;
      border-radius: 12px;
      background: var(--lb);
      background-size: cover;
      background-position: center;
      flex-shrink: 0
    }

    .fav-item-info {
      flex: 1
    }

    .fav-item-info h4 {
      font-size: .92rem;
      font-weight: 600;
      color: var(--br-deep)
    }

    .fav-item-info .price {
      color: var(--br-accent);
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.18rem;
      font-weight: 700
    }

    .fav-actions {
      display: flex;
      flex-direction: column;
      gap: .5rem
    }

    .btn-fav-cart {
      padding: .42rem .9rem;
      border-radius: 30px;
      border: 1.5px solid var(--br-deep);
      background: none;
      cursor: none;
      font-size: .76rem;
      font-weight: 600;
      color: var(--br-deep);
      transition: var(--tr)
    }

    .btn-fav-cart:hover {
      background: var(--br-deep);
      color: var(--gold-l)
    }

    .btn-fav-remove {
      background: none;
      border: none;
      cursor: none;
      color: var(--txt-mu);
      font-size: .76rem;
      transition: color .2s
    }

    .btn-fav-remove:hover {
      color: #c0392b
    }

    .profile-avatar {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold), var(--br-accent));
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      font-size: 2.2rem;
      color: white;
      box-shadow: 0 8px 24px var(--shgo)
    }

    .profile-name {
      text-align: center;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.6rem;
      font-weight: 700;
      margin-bottom: .2rem;
      color: var(--br-deep)
    }

    .profile-email {
      text-align: center;
      color: var(--txt-mu);
      font-size: .84rem;
      margin-bottom: 2rem
    }

    .profile-stat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-bottom: 2rem
    }

    .profile-stat {
      background: var(--cream-w);
      border-radius: 16px;
      padding: 1.1rem;
      text-align: center;
      border: 1px solid var(--bdr)
    }

    .profile-stat .num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.7rem;
      font-weight: 700;
      color: var(--br-accent)
    }

    .profile-stat .lbl {
      font-size: .68rem;
      color: var(--txt-mu);
      text-transform: uppercase;
      letter-spacing: .07em
    }

    .profile-menu li {
      list-style: none;
      border-bottom: 1px solid var(--lb)
    }

    .profile-menu a {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 0;
      text-decoration: none;
      color: var(--txt);
      font-size: .9rem;
      transition: color .22s, padding-left .22s
    }

    .profile-menu a i {
      width: 22px;
      color: var(--gold)
    }

    .profile-menu a:hover {
      color: var(--gold);
      padding-left: 6px
    }

    .btn-logout {
      width: 100%;
      padding: .9rem;
      border-radius: 60px;
      border: 1.5px solid #c0392b;
      background: none;
      color: #c0392b;
      font-family: 'DM Sans', sans-serif;
      font-size: .9rem;
      cursor: none;
      transition: var(--tr)
    }

    .btn-logout:hover {
      background: #c0392b;
      color: white
    }

    /* ========= HERO ========= */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 8rem 5% 5rem;
      gap: 4rem;
      flex-wrap: wrap;
      background: linear-gradient(140deg, var(--ivory) 0%, var(--cream-w) 55%, var(--lb) 100%);
      position: relative;
      overflow: hidden
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 65% 70% at 72% 50%, rgba(201, 148, 58, .14) 0%, transparent 70%);
      pointer-events: none
    }

    .hdring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid var(--gold);
      opacity: .1;
      animation: rotS 30s linear infinite
    }

    .hdring:nth-child(1) {
      width: 500px;
      height: 500px;
      top: -100px;
      right: -100px
    }

    .hdring:nth-child(2) {
      width: 300px;
      height: 300px;
      bottom: -50px;
      left: 35%;
      animation-duration: 22s;
      animation-direction: reverse;
      opacity: .07
    }

    .hero-content {
      flex: 1 1 480px;
      z-index: 1
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      background: rgba(201, 148, 58, .12);
      border: 1px solid rgba(201, 148, 58, .3);
      padding: .45rem 1.3rem;
      border-radius: 60px;
      margin-bottom: 2rem;
      animation: fadeIn 1s ease
    }

    .hero-eyebrow span {
      font-size: .76rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--br-accent);
      font-weight: 600
    }

    .hero-eyebrow i {
      font-size: .65rem;
      color: var(--gold)
    }

    .hero-content h1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(3rem, 5.5vw, 5.5rem);
      font-weight: 600;
      line-height: 1.08;
      letter-spacing: -.01em;
      color: var(--br-deep);
      animation: fadeUp 1s .2s both
    }

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

    .hero-sub {
      font-size: 1.08rem;
      color: var(--txt-m);
      max-width: 500px;
      margin: 1.8rem 0 2.6rem;
      line-height: 1.75;
      font-weight: 300;
      animation: fadeUp 1s .35s both
    }

    .hero-ctas {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      animation: fadeUp 1s .5s both
    }

    .btn-hp {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      padding: .95rem 2.3rem;
      border-radius: 60px;
      background: var(--br-deep);
      color: var(--gold-l);
      text-decoration: none;
      font-size: .92rem;
      font-weight: 500;
      letter-spacing: .05em;
      transition: var(--tr);
      border: 1.5px solid var(--br-deep)
    }

    .btn-hp:hover {
      background: var(--gold);
      color: var(--br-deep);
      border-color: var(--gold);
      transform: translateY(-3px);
      box-shadow: 0 20px 40px var(--shgo)
    }

    .btn-hs {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      padding: .95rem 2.3rem;
      border-radius: 60px;
      background: transparent;
      color: var(--br-deep);
      text-decoration: none;
      font-size: .92rem;
      font-weight: 500;
      letter-spacing: .05em;
      border: 1.5px solid rgba(44, 26, 14, .22);
      transition: var(--tr)
    }

    .btn-hs:hover {
      border-color: var(--br-deep);
      background: rgba(44, 26, 14, .05);
      transform: translateY(-3px)
    }

    .hero-metrics {
      display: flex;
      gap: 2.5rem;
      margin-top: 3rem;
      padding-top: 2rem;
      border-top: 1px solid var(--bdr);
      animation: fadeUp 1s .65s both
    }

    .metric-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.1rem;
      font-weight: 700;
      color: var(--br-deep);
      line-height: 1
    }

    .metric-lbl {
      font-size: .76rem;
      color: var(--txt-mu);
      letter-spacing: .09em;
      text-transform: uppercase;
      margin-top: .3rem
    }

    /* HERO VISUAL — new image mosaic */
    .hero-visual {
      flex: 1 1 480px;
      position: relative;
      z-index: 1
    }

    .hero-img-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 320px 200px;
      gap: 14px;
      animation: fadeIn 1s .3s both
    }

    .hero-img-grid .hig-main {
      grid-column: 1;
      grid-row: 1 / 3;
      border-radius: 32px 8px 8px 32px;
      overflow: hidden;
      position: relative;
      box-shadow: 30px 30px 70px -10px var(--shbr)
    }

    .hero-img-grid .hig-top {
      grid-column: 2;
      grid-row: 1;
      border-radius: 8px 32px 8px 8px;
      overflow: hidden;
      position: relative;
      box-shadow: 20px 20px 50px -10px var(--shbr)
    }

    .hero-img-grid .hig-bot {
      grid-column: 2;
      grid-row: 2;
      border-radius: 8px 8px 32px 8px;
      overflow: hidden;
      position: relative;
      box-shadow: 20px 20px 50px -10px var(--shbr)
    }

    .hig-img {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform .7s ease
    }

    .hero-img-grid .hig-main:hover .hig-img {
      transform: scale(1.06)
    }

    .hero-img-grid .hig-top:hover .hig-img {
      transform: scale(1.08)
    }

    .hero-img-grid .hig-bot:hover .hig-img {
      transform: scale(1.08)
    }

    .hig-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 50%, rgba(28, 14, 4, .38) 100%);
      z-index: 1
    }

    .hig-label {
      position: absolute;
      bottom: 1.1rem;
      left: 1.2rem;
      z-index: 2;
      background: rgba(251, 245, 236, .88);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      padding: .55rem 1rem;
      border: 1px solid var(--bdr)
    }

    .hig-label span {
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--br-accent);
      font-weight: 700
    }

    .hero-float-badge {
      position: absolute;
      bottom: -1.2rem;
      left: -1.8rem;
      background: var(--ivory);
      border-radius: 22px;
      padding: 1.1rem 1.5rem;
      box-shadow: 0 20px 50px rgba(44, 26, 14, .16);
      display: flex;
      align-items: center;
      gap: .9rem;
      border: 1px solid var(--bdr);
      animation: slideR 1s .9s both;
      z-index: 5
    }

    .hero-float-badge i {
      font-size: 1.6rem;
      color: var(--gold)
    }

    .fb-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1;
      color: var(--br-deep)
    }

    .fb-lbl {
      font-size: .68rem;
      color: var(--txt-mu);
      text-transform: uppercase;
      letter-spacing: .09em
    }

    /* gold dot decorative element */
    .hero-dot-dec {
      position: absolute;
      top: 1.5rem;
      right: -0.5rem;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .hero-dot-dec span {
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
      opacity: .6
    }

    .hero-dot-dec span:nth-child(2) {
      opacity: .4;
      margin-left: 3px
    }

    .hero-dot-dec span:nth-child(3) {
      opacity: .25;
      margin-left: 6px
    }

    /* MARQUEE */
    .mstrip {
      background: var(--br-deep);
      padding: 1.1rem 0;
      overflow: hidden;
      border-top: 1px solid rgba(201, 148, 58, .15)
    }

    .minner {
      display: flex;
      gap: 0;
      animation: marquee 24s linear infinite;
      width: max-content
    }

    .mitem {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      padding: 0 3rem;
      font-size: .8rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(240, 213, 152, .5);
      font-weight: 500;
      white-space: nowrap
    }

    .mitem i {
      color: var(--gold);
      font-size: .6rem
    }

    /* ABOUT */
    .about {
      padding: 8rem 5%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      align-items: center;
      background: var(--ivory)
    }

    .about-visual {
      position: relative
    }

    .about-img {
      width: 100%;
      aspect-ratio: 3/4;
      border-radius: 32px;
      background-image: url('assets/about.jfif');
      background-size: cover;
      background-position: center 20%;
      box-shadow: 0 30px 70px rgba(44, 26, 14, .14)
    }

    .about-acc {
      position: absolute;
      top: -22px;
      left: -22px;
      width: 130px;
      height: 130px;
      border-radius: 22px;
      background: var(--gold);
      opacity: .12;
      z-index: -1
    }

    .about-acc2 {
      position: absolute;
      bottom: -22px;
      right: -22px;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      border: 2px solid var(--gold);
      opacity: .25
    }

    .about-counter {
      position: absolute;
      top: 2.5rem;
      right: -2.5rem;
      background: var(--ivory);
      border-radius: 22px;
      padding: 1.5rem 1.8rem;
      box-shadow: 0 20px 50px rgba(44, 26, 14, .12);
      text-align: center;
      min-width: 140px;
      border: 1px solid var(--bdr)
    }

    .about-counter .num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.6rem;
      font-weight: 700;
      color: var(--gold)
    }

    .about-counter .lbl {
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .09em;
      color: var(--txt-mu)
    }

    .stag {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      margin-bottom: 1.1rem;
      font-size: .73rem;
      text-transform: uppercase;
      letter-spacing: .17em;
      color: var(--br-accent);
      font-weight: 600
    }

    .stag::before {
      content: '';
      width: 28px;
      height: 1.5px;
      background: var(--gold);
      border-radius: 2px
    }

    .about-content h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 3.2vw, 3rem);
      font-weight: 500;
      line-height: 1.15;
      margin-bottom: 1.5rem;
      color: var(--br-deep)
    }

    .about-content p {
      color: var(--txt-m);
      line-height: 1.85;
      font-weight: 300;
      margin-bottom: 1.5rem
    }

    .about-feats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
      margin: 2rem 0
    }

    .afeat {
      display: flex;
      gap: .9rem;
      align-items: flex-start;
      padding: 1.3rem;
      background: var(--cream-w);
      border-radius: 16px;
      border: 1px solid var(--bdr);
      transition: var(--tr)
    }

    .afeat:hover {
      background: rgba(201, 148, 58, .1);
      transform: translateY(-4px);
      box-shadow: 0 10px 24px var(--shbr)
    }

    .afeat i {
      color: var(--gold);
      font-size: 1.1rem;
      margin-top: 2px
    }

    .afeat h4 {
      font-size: .88rem;
      font-weight: 600;
      margin-bottom: .2rem;
      color: var(--br-deep)
    }

    .afeat p {
      font-size: .79rem;
      color: var(--txt-mu);
      margin: 0
    }

    .btn-about {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      padding: .9rem 2.1rem;
      border-radius: 60px;
      background: var(--br-deep);
      color: var(--gold-l);
      text-decoration: none;
      font-size: .9rem;
      font-weight: 500;
      letter-spacing: .05em;
      transition: var(--tr)
    }

    .btn-about:hover {
      background: var(--gold);
      color: var(--br-deep);
      transform: translateY(-3px);
      box-shadow: 0 18px 36px var(--shgo)
    }

    /* CATEGORIES */
    .categories {
      padding: 7rem 5%;
      background: var(--cream)
    }

    .sc {
      text-align: center;
      margin-bottom: 4rem
    }

    .sc .stag {
      justify-content: center
    }

    .sc .stag::before {
      display: none
    }

    .sc .stag::after {
      content: '';
      width: 28px;
      height: 1.5px;
      background: var(--gold);
      display: inline-block;
      border-radius: 2px
    }

    .sc h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.9rem, 3.2vw, 2.7rem);
      font-weight: 500;
      color: var(--br-deep);
      margin-bottom: .5rem
    }

    .sc p {
      color: var(--txt-mu);
      font-size: 1rem;
      font-weight: 300
    }

    .cat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1.5rem
    }

    .cat-card {
      border-radius: 26px;
      overflow: hidden;
      position: relative;
      cursor: none;
      background: var(--lb);
      transition: var(--tr);
      box-shadow: 0 8px 28px rgba(44, 26, 14, .08)
    }

    .cat-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 25%, rgba(28, 14, 4, .75) 100%);
      z-index: 1
    }

    .cat-card:hover {
      transform: scale(1.025) translateY(-6px);
      box-shadow: 0 36px 70px rgba(44, 26, 14, .18)
    }

    .cat-card:hover .cat-bg {
      transform: scale(1.08)
    }

    .cat-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform .65s ease
    }

    .cat-card.tall {
      grid-row: span 2
    }

    .cat-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 2rem;
      z-index: 2
    }

    .cat-content h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.85rem;
      color: white;
      font-weight: 500;
      line-height: 1.2
    }

    .cat-content p {
      color: rgba(255, 255, 255, .65);
      font-size: .84rem;
      margin: .3rem 0 .9rem
    }

    .cat-arrow {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1.5px solid rgba(255, 255, 255, .35);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: .82rem;
      transition: var(--tr);
      background: rgba(255, 255, 255, .08)
    }

    .cat-card:hover .cat-arrow {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--br-deep);
      transform: rotate(-45deg)
    }

    /* SHOP */
    .shop {
      padding: 7rem 5%;
      background: var(--cream-w)
    }

    .shop-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 2rem;
      flex-wrap: wrap;
      gap: 1rem
    }

    .shop-top h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.4rem;
      font-weight: 500;
      color: var(--br-deep)
    }

    .shop-top p {
      color: var(--txt-mu);
      font-size: .9rem;
      margin-top: .3rem
    }

    .shop-filter {
      display: flex;
      gap: .7rem;
      flex-wrap: wrap
    }

    .filter-btn {
      padding: .5rem 1.5rem;
      border-radius: 60px;
      border: 1.5px solid var(--bdr);
      background: transparent;
      color: var(--txt-m);
      font-family: 'DM Sans', sans-serif;
      font-size: .83rem;
      font-weight: 500;
      cursor: none;
      transition: var(--tr)
    }

    .filter-btn.active,
    .filter-btn:hover {
      background: var(--br-deep);
      color: var(--gold-l);
      border-color: var(--br-deep)
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
      gap: 2rem;
      margin-top: 2.5rem
    }

    .product-card {
      background: var(--ivory);
      border-radius: 26px;
      overflow: hidden;
      border: 1px solid rgba(160, 98, 42, .1);
      box-shadow: 0 4px 24px rgba(44, 26, 14, .05);
      transition: var(--tr);
      cursor: none
    }

    .product-card:hover {
      transform: translateY(-14px);
      box-shadow: 0 34px 56px var(--shgo);
      border-color: rgba(201, 148, 58, .35)
    }

    .product-img {
      height: 290px;
      position: relative;
      overflow: hidden;
      background-color: var(--lb)
    }

    .product-img-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform .65s ease
    }

    .product-card:hover .product-img-bg {
      transform: scale(1.07)
    }

    .product-badges {
      position: absolute;
      top: 14px;
      left: 14px;
      z-index: 2;
      display: flex;
      gap: .5rem
    }

    .badge {
      padding: .35rem .95rem;
      border-radius: 60px;
      font-size: .71rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase
    }

    .badge-cat {
      background: rgba(28, 14, 4, .78);
      color: var(--gold-l)
    }

    .badge-new {
      background: var(--gold);
      color: var(--br-deep)
    }

    .badge-sale {
      background: #c0392b;
      color: white
    }

    .product-actions {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      opacity: 0;
      transform: translateX(12px);
      transition: var(--tr)
    }

    .product-card:hover .product-actions {
      opacity: 1;
      transform: translateX(0)
    }

    .p-action-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--ivory);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .85rem;
      color: var(--br-deep);
      cursor: none;
      transition: var(--tr);
      box-shadow: 0 4px 14px rgba(44, 26, 14, .12)
    }

    .p-action-btn:hover {
      background: var(--gold);
      color: var(--br-deep);
      transform: scale(1.12)
    }

    .product-info {
      padding: 1.6rem 1.6rem 1.4rem
    }

    .product-info h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.52rem;
      font-weight: 600;
      margin-bottom: .25rem;
      color: var(--br-deep)
    }

    .product-info .sub {
      font-size: .8rem;
      color: var(--txt-mu);
      margin-bottom: .9rem
    }

    .product-rating {
      display: flex;
      align-items: center;
      gap: .4rem;
      font-size: .8rem;
      color: var(--txt-mu);
      margin-bottom: 1rem
    }

    .product-rating .sf {
      color: #e8a030;
      letter-spacing: 1px
    }

    .product-footer {
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .product-price {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.58rem;
      font-weight: 700;
      color: var(--br-deep)
    }

    .product-price .old {
      font-size: .95rem;
      color: var(--txt-mu);
      text-decoration: line-through;
      margin-right: .4rem;
      font-weight: 400
    }

    .btn-add {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--br-deep);
      color: var(--gold-l);
      border: none;
      font-size: 1rem;
      cursor: none;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--tr)
    }

    .btn-add:hover {
      background: var(--gold);
      color: var(--br-deep);
      transform: rotate(90deg)
    }

    .shop-more {
      text-align: center;
      margin-top: 3.5rem
    }

    .btn-view-all {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      padding: .95rem 2.6rem;
      border-radius: 60px;
      border: 1.5px solid var(--br-deep);
      color: var(--br-deep);
      text-decoration: none;
      font-size: .9rem;
      font-weight: 500;
      transition: var(--tr)
    }

    .btn-view-all:hover {
      background: var(--br-deep);
      color: var(--gold-l);
      transform: translateY(-3px)
    }

    /* WHY US */
    .why-us {
      padding: 7rem 5%;
      background: var(--br-deep);
      position: relative;
      overflow: hidden
    }

    .why-us::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(201, 148, 58, .12) 0%, transparent 65%);
      pointer-events: none
    }

    .why-us .sc h2 {
      color: var(--gold-l)
    }

    .why-us .sc p {
      color: rgba(240, 213, 152, .55)
    }

    .why-us .stag {
      color: var(--gold)
    }

    .why-us .stag::before {
      background: var(--gold)
    }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      margin-top: 4rem
    }

    .why-card {
      background: rgba(255, 248, 238, .05);
      border-radius: 24px;
      padding: 2.5rem 2rem;
      border: 1px solid rgba(201, 148, 58, .18);
      transition: var(--tr);
      position: relative;
      overflow: hidden;
      text-align: center
    }

    .why-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--gold), var(--gold-b));
      transform: scaleX(0);
      transition: transform .4s ease;
      transform-origin: left;
      border-radius: 3px 3px 0 0
    }

    .why-card:hover {
      background: rgba(201, 148, 58, .08);
      transform: translateY(-8px);
      border-color: rgba(201, 148, 58, .35)
    }

    .why-card:hover::before {
      transform: scaleX(1)
    }

    .why-icon {
      width: 72px;
      height: 72px;
      border-radius: 20px;
      margin: 0 auto 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      background: rgba(201, 148, 58, .14);
      color: var(--gold);
      border: 1px solid rgba(201, 148, 58, .25)
    }

    .why-card h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.45rem;
      color: var(--gold-l);
      margin-bottom: .8rem
    }

    .why-card p {
      font-size: .87rem;
      color: rgba(240, 213, 152, .55);
      line-height: 1.75
    }

    /* MATERIALS */
    .materials {
      padding: 7rem 5%;
      background: var(--ivory)
    }

    .materials-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      margin-top: 4rem
    }

    .material-card {
      border-radius: 20px;
      overflow: hidden;
      cursor: none;
      position: relative;
      aspect-ratio: 3/4;
      background: var(--lb);
      transition: var(--tr);
      box-shadow: 0 6px 20px rgba(44, 26, 14, .08)
    }

    .material-card:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 28px 50px rgba(44, 26, 14, .14)
    }

    .mat-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform .6s ease
    }

    .material-card:hover .mat-bg {
      transform: scale(1.07)
    }

    .mat-ov {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(28, 14, 4, 0) 40%, rgba(28, 14, 4, .8) 100%)
    }

    .mat-info {
      position: absolute;
      bottom: 1.5rem;
      left: 1.5rem;
      z-index: 2
    }

    .mat-info h4 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.3rem;
      color: white;
      font-weight: 500
    }

    .mat-info span {
      font-size: .75rem;
      color: rgba(240, 213, 152, .7);
      text-transform: uppercase;
      letter-spacing: .1em
    }

    .mat-tag {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: rgba(201, 148, 58, .85);
      color: var(--br-deep);
      padding: .3rem .8rem;
      border-radius: 30px;
      font-size: .7rem;
      font-weight: 700;
      z-index: 2
    }

    /* PROCESS */
    .process {
      padding: 7rem 5%;
      background: var(--cream)
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
      margin-top: 4.5rem
    }

    .process-step {
      text-align: center;
      position: relative
    }

    .process-step:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 30px;
      left: calc(50% + 32px);
      right: calc(-50% + 32px);
      height: 1px;
      background: linear-gradient(to right, var(--gold), transparent)
    }

    .step-num {
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: var(--cream-w);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--br-accent);
      transition: var(--tr);
      border: 2px solid var(--bdr)
    }

    .process-step:hover .step-num {
      background: var(--gold);
      color: var(--br-deep);
      border-color: var(--gold);
      transform: scale(1.12);
      animation: glowP 1.5s ease infinite
    }

    .process-step h4 {
      font-size: .98rem;
      font-weight: 600;
      margin-bottom: .6rem;
      color: var(--br-deep)
    }

    .process-step p {
      font-size: .84rem;
      color: var(--txt-mu);
      line-height: 1.65
    }

    /* REVIEWS */
    .reviews {
      padding: 7rem 5%;
      background: var(--cream-w)
    }

    .review-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 4rem;
      flex-wrap: wrap;
      gap: 1.5rem
    }

    .review-header h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 3vw, 2.8rem);
      font-weight: 500;
      color: var(--br-deep)
    }

    .review-overall {
      text-align: right
    }

    .review-score {
      font-family: 'Cormorant Garamond', serif;
      font-size: 3.2rem;
      font-weight: 700;
      color: var(--gold);
      line-height: 1
    }

    .review-stars-big {
      color: #e8a030;
      font-size: 1.1rem;
      letter-spacing: 3px
    }

    .review-count {
      font-size: .8rem;
      color: var(--txt-mu)
    }

    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem
    }

    .review-card {
      background: var(--ivory);
      border-radius: 26px;
      padding: 2rem 1.8rem;
      border: 1px solid rgba(160, 98, 42, .1);
      box-shadow: 0 8px 28px rgba(44, 26, 14, .05);
      transition: var(--tr);
      position: relative
    }

    .review-card::before {
      content: '"';
      position: absolute;
      top: -8px;
      left: 1.8rem;
      font-family: 'Cormorant Garamond', serif;
      font-size: 5.5rem;
      color: var(--gold-l);
      line-height: 1;
      z-index: 0
    }

    .review-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 28px 54px var(--shgo);
      border-color: rgba(201, 148, 58, .3)
    }

    .review-top {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.2rem;
      position: relative;
      z-index: 1
    }

    .r-avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold-l), var(--gold));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      color: var(--br-deep);
      flex-shrink: 0
    }

    .r-name {
      font-weight: 600;
      font-size: .95rem;
      color: var(--br-deep)
    }

    .r-loc {
      font-size: .76rem;
      color: var(--txt-mu)
    }

    .r-stars {
      color: #e8a030;
      font-size: .85rem;
      letter-spacing: 1px
    }

    .r-text {
      font-size: .9rem;
      line-height: 1.75;
      color: var(--txt-m);
      font-style: italic;
      position: relative;
      z-index: 1
    }

    .r-product {
      margin-top: 1rem;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-size: .76rem;
      color: var(--br-accent);
      background: rgba(160, 98, 42, .1);
      padding: .3rem .9rem;
      border-radius: 30px
    }

    .r-verified {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      color: var(--gold);
      font-size: .73rem;
      display: flex;
      align-items: center;
      gap: .3rem
    }

    /* ========= CONCIERGE ========= */
    .concierge {
      padding: 7rem 5%;
      background: var(--ivory);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center
    }

    /* New image mosaic for concierge */
    .concierge-visual {
      position: relative
    }

    .concierge-img-mosaic {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 260px 200px;
      gap: 12px
    }

    .cim-card {
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 16px 40px rgba(44, 26, 14, .12);
      transition: var(--tr)
    }

    .cim-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 28px 55px rgba(44, 26, 14, .18)
    }

    .cim-card:hover .cim-bg {
      transform: scale(1.06)
    }

    .cim-card.cim-wide {
      grid-column: 1 / 3;
      border-radius: 22px 22px 8px 8px
    }

    .cim-card.cim-left {
      border-radius: 8px 8px 8px 22px
    }

    .cim-card.cim-right {
      border-radius: 8px 8px 22px 8px
    }

    .cim-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform .65s ease
    }

    .cim-ov {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 50%, rgba(28, 14, 4, .45) 100%)
    }

    .cim-chip {
      position: absolute;
      bottom: 1rem;
      left: 1rem;
      z-index: 2;
      background: rgba(251, 245, 236, .9);
      backdrop-filter: blur(8px);
      border-radius: 10px;
      padding: .4rem .85rem;
      border: 1px solid var(--bdr)
    }

    .cim-chip span {
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--br-accent);
      font-weight: 700
    }

    /* floating badge for concierge */
    .concierge-float {
      position: absolute;
      bottom: -1rem;
      right: -1.5rem;
      background: var(--ivory);
      border-radius: 20px;
      padding: 1.1rem 1.4rem;
      box-shadow: 0 20px 50px rgba(44, 26, 14, .14);
      display: flex;
      align-items: center;
      gap: .9rem;
      border: 1px solid var(--bdr);
      min-width: 190px;
      z-index: 5;
      animation: slideUp 1s .7s both
    }

    .concierge-float i {
      font-size: 1.4rem;
      color: var(--gold)
    }

    .cf-title {
      font-size: .8rem;
      font-weight: 700;
      color: var(--br-deep);
      line-height: 1.3
    }

    .cf-sub {
      font-size: .68rem;
      color: var(--txt-mu)
    }

    /* gold dot accent */
    .cim-dot-dec {
      position: absolute;
      top: -.8rem;
      left: -.8rem;
      z-index: 3
    }

    .cim-dot-dec svg {
      width: 60px;
      height: 60px;
      opacity: .3
    }

    .concierge-content h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 3vw, 2.9rem);
      font-weight: 500;
      color: var(--br-deep);
      margin-bottom: 1.5rem;
      line-height: 1.2
    }

    .concierge-content p {
      color: var(--txt-m);
      line-height: 1.85;
      font-weight: 300;
      margin-bottom: 2rem
    }

    .concierge-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .9rem;
      margin-bottom: 2.5rem
    }

    .concierge-list li {
      display: flex;
      align-items: center;
      gap: .9rem;
      font-size: .9rem;
      color: var(--txt-m)
    }

    .concierge-list li i {
      color: var(--gold);
      width: 20px
    }

    .btn-concierge {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      padding: .95rem 2.2rem;
      border-radius: 60px;
      background: var(--gold);
      color: var(--br-deep);
      text-decoration: none;
      font-size: .9rem;
      font-weight: 600;
      letter-spacing: .04em;
      transition: var(--tr);
      border: none;
      cursor: none
    }

    .btn-concierge:hover {
      background: var(--br-deep);
      color: var(--gold-l);
      transform: translateY(-3px);
      box-shadow: 0 18px 36px var(--shbr)
    }

    /* STATS */
    .stats-band {
      background: linear-gradient(135deg, var(--br-rich) 0%, var(--br-deep) 100%);
      padding: 5.5rem 5%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3rem;
      position: relative;
      overflow: hidden
    }

    .stats-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 80% at 30% 50%, rgba(201, 148, 58, .1) 0%, transparent 70%)
    }

    .stat-item {
      text-align: center;
      position: relative;
      z-index: 1
    }

    .stat-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 3.5rem;
      font-weight: 700;
      color: var(--gold);
      line-height: 1;
      display: block
    }

    .stat-label {
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: rgba(240, 213, 152, .45);
      margin-top: .6rem
    }

    .stat-item:not(:last-child) {
      border-right: 1px solid rgba(201, 148, 58, .12)
    }

    /* GALLERY */
    .gallery-strip {
      padding: 4rem 0;
      background: var(--cream);
      overflow: hidden
    }

    .gal-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 5%;
      margin-bottom: 2rem
    }

    .gal-head h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem;
      font-weight: 500;
      color: var(--br-deep)
    }

    .gal-head a {
      font-size: .85rem;
      color: var(--br-accent);
      text-decoration: none;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: .4rem;
      transition: color .2s
    }

    .gal-head a:hover {
      color: var(--gold)
    }

    .gallery-scroll {
      display: flex;
      gap: 1.2rem;
      overflow-x: auto;
      padding: 0 5% 1rem;
      scrollbar-width: none;
      scroll-snap-type: x mandatory
    }

    .gallery-scroll::-webkit-scrollbar {
      display: none
    }

    .gallery-thumb {
      flex-shrink: 0;
      width: 230px;
      height: 290px;
      border-radius: 22px;
      background: var(--lb);
      background-size: cover;
      background-position: center;
      scroll-snap-align: start;
      transition: var(--tr);
      cursor: none;
      border: 1px solid var(--bdr)
    }

    .gallery-thumb:hover {
      transform: scale(1.04) translateY(-6px);
      box-shadow: 0 24px 50px rgba(44, 26, 14, .15)
    }

    /* NEWSLETTER */
    .newsletter {
      padding: 5.5rem 5%;
      background: var(--br-deep);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 3rem;
      flex-wrap: wrap;
      position: relative;
      overflow: hidden
    }

    .newsletter::before {
      content: '';
      position: absolute;
      right: -100px;
      top: -100px;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: rgba(201, 148, 58, .07);
      pointer-events: none
    }

    .nl-content h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.3rem;
      font-weight: 500;
      color: var(--gold-l);
      margin-bottom: .5rem
    }

    .nl-content p {
      color: rgba(240, 213, 152, .45);
      font-size: .9rem
    }

    .nl-form {
      display: flex;
      gap: 0;
      flex: 1;
      max-width: 500px
    }

    .nl-form input {
      flex: 1;
      padding: 1.05rem 1.6rem;
      border-radius: 60px 0 0 60px;
      border: 1.5px solid rgba(201, 148, 58, .2);
      background: rgba(255, 248, 238, .06);
      color: white;
      font-family: 'DM Sans', sans-serif;
      font-size: .9rem;
      outline: none;
      transition: border-color .25s
    }

    .nl-form input::placeholder {
      color: rgba(240, 213, 152, .3)
    }

    .nl-form input:focus {
      border-color: var(--gold)
    }

    .nl-form button {
      padding: 1.05rem 2.2rem;
      border-radius: 0 60px 60px 0;
      background: var(--gold);
      color: var(--br-deep);
      border: none;
      font-family: 'DM Sans', sans-serif;
      font-size: .9rem;
      font-weight: 700;
      cursor: none;
      transition: var(--tr)
    }

    .nl-form button:hover {
      background: var(--gold-l)
    }

    /* FOOTER */
    footer {
      background: #100904;
      color: rgba(240, 213, 152, .45);
      padding: 5.5rem 5% 2.5rem
    }

    .footer-top {
      display: grid;
      grid-template-columns: 1.5fr repeat(3, 1fr);
      gap: 4rem;
      margin-bottom: 4rem
    }

    .footer-brand .logo-text {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem;
      font-weight: 700;
      color: var(--gold-l);
      letter-spacing: .06em
    }

    .footer-brand .logo-text span {
      color: var(--gold);
      font-weight: 300
    }

    .footer-brand p {
      font-size: .86rem;
      line-height: 1.75;
      margin: 1rem 0 1.6rem
    }

    .social-row {
      display: flex;
      gap: .8rem
    }

    .soc-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(201, 148, 58, .2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(240, 213, 152, .45);
      font-size: .9rem;
      text-decoration: none;
      transition: var(--tr)
    }

    .soc-btn:hover {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--br-deep);
      transform: translateY(-4px)
    }

    .footer-col h4 {
      color: var(--gold-l);
      font-size: .83rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 1.5rem
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .85rem
    }

    .footer-col ul a {
      color: rgba(240, 213, 152, .4);
      text-decoration: none;
      font-size: .86rem;
      transition: color .25s, padding-left .25s
    }

    .footer-col ul a:hover {
      color: var(--gold);
      padding-left: 6px
    }

    .footer-bottom {
      border-top: 1px solid rgba(201, 148, 58, .1);
      padding-top: 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem
    }

    .footer-bottom p {
      font-size: .8rem
    }

    .footer-legal {
      display: flex;
      gap: 1.5rem
    }

    .footer-legal a {
      color: rgba(240, 213, 152, .35);
      text-decoration: none;
      font-size: .8rem;
      transition: color .25s
    }

    .footer-legal a:hover {
      color: var(--gold)
    }

    /* TOAST */
    .toast {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%) translateY(16px);
      background: var(--br-deep);
      color: var(--gold-l);
      padding: .9rem 2.2rem;
      border-radius: 60px;
      font-size: .9rem;
      font-weight: 500;
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: all .4s cubic-bezier(.25, .8, .25, 1);
      display: flex;
      align-items: center;
      gap: .7rem;
      white-space: nowrap;
      box-shadow: 0 20px 50px rgba(44, 26, 14, .25);
      border: 1px solid rgba(201, 148, 58, .25)
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0)
    }

    .toast i {
      color: var(--gold)
    }

    /* RESPONSIVE */
    @media(max-width:1100px) {
      .hero-img-grid {
        grid-template-rows: 260px 160px
      }

      .about,
      .concierge {
        grid-template-columns: 1fr;
        gap: 3rem
      }

      .about-counter {
        right: -1rem
      }

      .why-grid {
        grid-template-columns: 1fr 1fr
      }

      .materials-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .process-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .process-step:not(:last-child)::after {
        display: none
      }

      .stats-band {
        grid-template-columns: repeat(2, 1fr)
      }

      .stat-item:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(201, 148, 58, .1);
        padding-bottom: 2rem
      }

      .footer-top {
        grid-template-columns: 1fr 1fr
      }

      .cat-grid {
        grid-template-columns: 1fr 1fr
      }

      .cat-card.tall {
        grid-row: auto
      }
    }

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

      .nav-links.open {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        background: var(--ivory);
        z-index: 999;
        padding: 6rem 5% 3rem;
        gap: 1.5rem;
        animation: fadeIn .3s ease
      }

      .nav-links.open a {
        font-size: 1.2rem;
        color: var(--br-deep)
      }

      .hamburger {
        display: flex
      }

      .hero {
        flex-direction: column-reverse;
        padding: 7rem 5% 3rem
      }

      .hero-img-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 130px
      }

      .hero-float-badge {
        left: 0;
        bottom: -1rem
      }

      .cat-grid,
      .why-grid {
        grid-template-columns: 1fr
      }

      .reviews-grid {
        grid-template-columns: 1fr
      }

      .review-header {
        flex-direction: column;
        align-items: flex-start
      }

      .review-overall {
        text-align: left
      }

      .stats-band {
        grid-template-columns: 1fr 1fr
      }

      .newsletter {
        flex-direction: column
      }

      .footer-top {
        grid-template-columns: 1fr;
        gap: 2rem
      }

      .materials-grid {
        grid-template-columns: 1fr 1fr
      }

      .concierge-img-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 150px
      }

      .concierge-float {
        right: 0;
        bottom: -0.5rem;
      }

      .nav-logo {
        font-size: 1.4rem;
      }

      .nav-actions {
        gap: 0.8rem;
      }

      .nav-btn {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
      }

      .nav-btn .badge {
        width: 14px;
        height: 14px;
        font-size: 0.5rem;
      }

      .hamburger {
        gap: 4px;
        padding: 2px;
      }

      .hamburger span {
        width: 20px;
      }
    }

    @media(max-width:480px) {
      .hero-metrics {
        flex-direction: column;
        gap: 1.5rem
      }

      .hero-ctas {
        flex-direction: column
      }

      .hero-img-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 260px 160px 140px
      }

      .hig-top {
        grid-column: 1;
        grid-row: 2
      }

      .hig-bot {
        grid-column: 1;
        grid-row: 3
      }

      .stats-band {
        grid-template-columns: 1fr
      }

      .materials-grid {
        grid-template-columns: 1fr
      }

      .concierge-img-mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: 220px 150px 130px
      }

      .cim-card.cim-wide {
        grid-column: 1
      }

      .cim-card.cim-left,
      .cim-card.cim-right {
        grid-column: 1
      }
    }