/* :root vars, reset, body, nav, mobile-menu — moved to resources/css/app.css */
    /* ========================================
       HERO
    ======================================== */
    .hero {
      height: 100vh; min-height: 700px;
      position: relative; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      background: var(--charcoal-deep);
    }
    .hero-bg {
      position: absolute; inset: 0;
    }
    .hero-slide {
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      opacity: 0; transform: scale(1.08);
      transition: opacity 1.8s ease-in-out, transform 8s linear;
      will-change: opacity, transform;
      filter: saturate(1.05);
    }
    .hero-slide.active {
      opacity: 1; transform: scale(1);
    }
    .hero::after {
      content: ''; position: absolute; inset: 0;
      background: none;
    }

    .hero-content {
      position: relative; z-index: 1;
      text-align: center; color: var(--ivory);
      display: flex; flex-direction: column; align-items: center;
    }
    .hero-logo-stack {
      position: relative;
      display: flex; flex-direction: column; align-items: center;
      gap: 0.4rem; margin-bottom: 3rem;
      padding: 4rem 6rem;
    }
    .hero-logo-stack::before {
      content: ''; position: absolute; inset: 0; z-index: -1;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(14px) saturate(1.1);
      -webkit-backdrop-filter: blur(14px) saturate(1.1);
      -webkit-mask-image: radial-gradient(ellipse 38% 60% at center,rgba(0,0,0,1) 0%,rgba(0,0,0,0.92) 12%,rgba(0,0,0,0.74) 26%,rgba(0,0,0,0.5) 42%,rgba(0,0,0,0.28) 58%,rgba(0,0,0,0.13) 72%,rgba(0,0,0,0.05) 84%,rgba(0,0,0,0.01) 94%,rgba(0,0,0,0) 100%);
      mask-image: radial-gradient(ellipse 38% 60% at center,rgba(0,0,0,1) 0%,rgba(0,0,0,0.92) 12%,rgba(0,0,0,0.74) 26%,rgba(0,0,0,0.5) 42%,rgba(0,0,0,0.28) 58%,rgba(0,0,0,0.13) 72%,rgba(0,0,0,0.05) 84%,rgba(0,0,0,0.01) 94%,rgba(0,0,0,0) 100%);
    }
    .hero-tagline-wrap {
      position: relative;
      padding: 3rem 5rem;
    }
    .hero-tagline-wrap::before {
      content: ''; position: absolute; inset: 0; z-index: -1;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(14px) saturate(1.1);
      -webkit-backdrop-filter: blur(14px) saturate(1.1);
      -webkit-mask-image: radial-gradient(ellipse 45% 55% at center,rgba(0,0,0,1) 0%,rgba(0,0,0,0.92) 12%,rgba(0,0,0,0.74) 26%,rgba(0,0,0,0.5) 42%,rgba(0,0,0,0.28) 58%,rgba(0,0,0,0.13) 72%,rgba(0,0,0,0.05) 84%,rgba(0,0,0,0.01) 94%,rgba(0,0,0,0) 100%);
      mask-image: radial-gradient(ellipse 45% 55% at center,rgba(0,0,0,1) 0%,rgba(0,0,0,0.92) 12%,rgba(0,0,0,0.74) 26%,rgba(0,0,0,0.5) 42%,rgba(0,0,0,0.28) 58%,rgba(0,0,0,0.13) 72%,rgba(0,0,0,0.05) 84%,rgba(0,0,0,0.01) 94%,rgba(0,0,0,0) 100%);
    }
    .hero-logo-stack .zh {
      font-size: 5.5rem; font-weight: 500;
      letter-spacing: 0.4em; line-height: 1.1;
      color: var(--gold);
      text-indent: 0.4em;
      text-shadow: 0 2px 24px rgba(0,0,0,0.5), 0 1px 8px rgba(0,0,0,0.3);
    }
    .hero-logo-stack .en {
      font-family: 'Bodoni 72', 'Bodoni Moda', Georgia, serif;
      font-size: 1.5rem; letter-spacing: 0.5em;
      color: var(--gold); text-transform: uppercase;
      text-indent: 0.5em;
      text-shadow: 0 2px 24px rgba(0,0,0,0.6), 0 1px 8px rgba(0,0,0,0.4);
    }

    .hero-divider {
      width: 1px; height: 40px;
      background: var(--gold); opacity: 0.4;
      margin: 0 auto 2rem;
    }
    .hero-tagline-en {
      font-family: Georgia, 'Bodoni 72', serif;
      font-size: 0.85rem; letter-spacing: 0.5em;
      color: rgba(255, 253, 245, 0.5);
      text-transform: uppercase;
      text-indent: 0.5em;
      margin-bottom: 0.6rem;
      text-shadow: 0 2px 24px rgba(0,0,0,0.5), 0 1px 8px rgba(0,0,0,0.3);
    }
    .hero-tagline-zh {
      font-size: 1.05rem; letter-spacing: 0.35em;
      color: rgba(255, 253, 245, 0.65);
      font-weight: 300;
      text-indent: 0.35em;
      text-shadow: 0 2px 24px rgba(0,0,0,0.5), 0 1px 8px rgba(0,0,0,0.3);
    }

    .scroll-indicator {
      position: absolute; bottom: 2.5rem; left: 50%;
      transform: translateX(-50%); z-index: 1;
      display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    }
    .scroll-indicator span {
      font-family: Georgia, serif; font-size: 0.55rem;
      letter-spacing: 0.4em; color: rgba(255, 253, 245, 0.3);
      text-transform: uppercase;
    }
    .scroll-line {
      width: 1px; height: 30px; position: relative; overflow: hidden;
      background: rgba(255, 253, 245, 0.12);
    }
    .scroll-line::after {
      content: ''; position: absolute; top: -100%; left: 0;
      width: 1px; height: 100%;
      background: var(--gold);
      animation: scrollDown 2s ease-in-out infinite;
    }
    @keyframes scrollDown {
      0% { top: -100%; } 50% { top: 0; } 100% { top: 100%; }
    }

    /* ========================================
       SHARED STYLES
    ======================================== */
    /* .section-label / .section-title / .section-desc / .btn-gold — moved to resources/css/partials/typography.css */

    /* ========================================
       PROMISE SECTION
    ======================================== */
    .promise {
      display: grid; grid-template-columns: 1fr 1fr;
      min-height: 95vh;
    }
    .promise-img {
      position: relative; overflow: hidden;
      grid-column: 1; grid-row: 1;
    }
    .promise-text {
      grid-column: 2; grid-row: 1;
    }
    .promise-img img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 8s ease;
    }
    .promise-img:hover img { transform: scale(1.04); }
    .promise-text {
      display: flex; flex-direction: column;
      justify-content: center;
      padding: 6rem 6rem;
      background: var(--charcoal-deep);
    }
    .promise-text .section-title {
      color: var(--champagne-light);
    }
    .promise-text .section-desc {
      color: rgba(255, 253, 245, 0.55);
    }
    .promise-poetic {
      font-size: 0.82rem; font-weight: 200;
      letter-spacing: 0.2em; color: var(--champagne);
      margin-top: 2.5rem; font-style: italic;
      opacity: 0.8;
    }

    /* ========================================
       VENUES SECTION
    ======================================== */
    .venues {
      background: var(--ivory);
      padding: 7rem 4rem;
      position: relative;
    }
    .venues-header {
      text-align: center; margin-bottom: 5rem;
      position: relative;
    }
    .venues-header .section-title {
      color: var(--champagne);
    }
    .venues-header .section-desc {
      color: rgba(80, 83, 80, 0.55);
      margin: 0 auto;
      text-align: center;
    }

    .venues-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem; max-width: 1200px; margin: 0 auto;
      position: relative;
    }
    .venue-card {
      position: relative; overflow: hidden;
      aspect-ratio: 3/4; cursor: default;
    }
    .venue-card-bg {
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      transition: transform 6s ease;
    }
    .venue-card:hover .venue-card-bg { transform: scale(1.05); }
    .venue-info {
      position: absolute; bottom: 0; left: 0; right: 0;
      z-index: 1; padding: 2.4rem 2rem;
    }
    .venue-info::before {
      content: ''; position: absolute; inset: 0; z-index: -1;
      background: rgba(0, 0, 0, 0.32);
      backdrop-filter: blur(14px) saturate(1.1);
      -webkit-backdrop-filter: blur(14px) saturate(1.1);
      -webkit-mask-image: radial-gradient(ellipse 70% 95% at center,rgba(0,0,0,1) 0%,rgba(0,0,0,0.92) 12%,rgba(0,0,0,0.74) 26%,rgba(0,0,0,0.5) 42%,rgba(0,0,0,0.28) 58%,rgba(0,0,0,0.13) 72%,rgba(0,0,0,0.05) 84%,rgba(0,0,0,0.01) 94%,rgba(0,0,0,0) 100%);
      mask-image: radial-gradient(ellipse 70% 95% at center,rgba(0,0,0,1) 0%,rgba(0,0,0,0.92) 12%,rgba(0,0,0,0.74) 26%,rgba(0,0,0,0.5) 42%,rgba(0,0,0,0.28) 58%,rgba(0,0,0,0.13) 72%,rgba(0,0,0,0.05) 84%,rgba(0,0,0,0.01) 94%,rgba(0,0,0,0) 100%);
    }
    .venue-info .venue-en {
      font-family: Georgia, 'Bodoni 72', serif;
      font-size: 0.55rem; letter-spacing: 0.4em;
      color: var(--gold); text-transform: uppercase;
      margin-bottom: 0.5rem;
      text-shadow: 0 1px 6px rgba(0,0,0,0.4);
    }
    .venue-info h3 {
      font-size: 1.15rem; font-weight: 600;
      color: var(--ivory); margin-bottom: 0.6rem;
      letter-spacing: 0.08em;
      text-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
    }
    .venue-info p {
      font-size: 0.72rem; color: rgba(255, 253, 245, 0.85);
      line-height: 1.9; font-weight: 300;
      text-shadow: 0 1px 8px rgba(0,0,0,0.4);
    }

    /* Villa strip */
    .villa-strip {
      background: var(--charcoal-deep);
      padding: 9rem 4rem;
      min-height: 75vh;
      display: flex; flex-direction: column; justify-content: center;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .villa-strip::before {
      content: ''; position: absolute; inset: 0;
      background: image-set(url('/images/page-hero-aerial-view.webp') type('image/webp'), url('/images/page-hero-aerial-view.jpg') type('image/jpeg')) center/cover no-repeat;
      opacity: 1;
    }
    .villa-strip-text-wrap {
      position: relative;
      display: inline-block;
      padding: 4rem 6rem;
      margin-bottom: 2rem;
    }
    .villa-strip-text-wrap::before {
      content: ''; position: absolute; inset: 0; z-index: 0;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(14px) saturate(1.1);
      -webkit-backdrop-filter: blur(14px) saturate(1.1);
      -webkit-mask-image: radial-gradient(ellipse 50% 65% at center,rgba(0,0,0,1) 0%,rgba(0,0,0,0.92) 12%,rgba(0,0,0,0.74) 26%,rgba(0,0,0,0.5) 42%,rgba(0,0,0,0.28) 58%,rgba(0,0,0,0.13) 72%,rgba(0,0,0,0.05) 84%,rgba(0,0,0,0.01) 94%,rgba(0,0,0,0) 100%);
      mask-image: radial-gradient(ellipse 50% 65% at center,rgba(0,0,0,1) 0%,rgba(0,0,0,0.92) 12%,rgba(0,0,0,0.74) 26%,rgba(0,0,0,0.5) 42%,rgba(0,0,0,0.28) 58%,rgba(0,0,0,0.13) 72%,rgba(0,0,0,0.05) 84%,rgba(0,0,0,0.01) 94%,rgba(0,0,0,0) 100%);
    }
    .villa-strip-text-wrap > * {
      position: relative; z-index: 1;
    }
    .villa-strip .section-title {
      color: var(--champagne-light);
      position: relative;
      text-shadow: 0 2px 16px rgba(0,0,0,0.5), 0 1px 6px rgba(0,0,0,0.3);
    }
    .villa-strip .section-label {
      position: relative;
      text-shadow: 0 1px 8px rgba(0,0,0,0.4);
    }
    .villa-strip .section-desc {
      margin: 0 auto 3rem;
      text-align: center;
      color: rgba(255, 253, 245, 0.5);
      position: relative;
      text-shadow: 0 1px 8px rgba(0,0,0,0.4);
    }
    .villa-buildings {
      display: flex; justify-content: center;
      gap: 3rem; flex-wrap: wrap;
      position: relative;
    }
    .villa-item {
      text-align: center;
    }
    .villa-letter {
      font-family: Georgia, 'Bodoni 72', serif;
      font-size: 2rem; color: var(--gold);
      letter-spacing: 0.1em; line-height: 1;
      margin-bottom: 0.5rem;
      font-weight: 400;
      text-shadow: 0 2px 12px rgba(0,0,0,0.4);
    }
    .villa-name {
      font-size: 0.7rem; color: rgba(255, 253, 245, 0.5);
      letter-spacing: 0.15em; font-weight: 300;
      text-shadow: 0 1px 6px rgba(0,0,0,0.4);
    }
    .villa-capacity {
      font-size: 0.6rem; color: rgba(255, 253, 245, 0.3);
      letter-spacing: 0.1em; font-weight: 300;
      margin-top: 0.2rem;
      text-shadow: 0 1px 6px rgba(0,0,0,0.3);
    }

    /* ========================================
       BESPOKE EXPERIENCE
    ======================================== */
    .bespoke {
      background: #ffffff;
      padding: 7rem 4rem;
    }
    .bespoke-header {
      text-align: center; margin-bottom: 4.5rem;
    }
    .bespoke-header .section-title {
      color: var(--champagne);
    }
    .bespoke-grid {
      display: grid; grid-template-columns: repeat(5, 1fr);
      max-width: 1100px; margin: 0 auto;
      border-top: 1px solid rgba(201, 169, 110, 0.15);
    }
    .bespoke-item {
      text-align: center;
      padding: 3rem 1.5rem;
      border-right: 1px solid rgba(201, 169, 110, 0.15);
      border-bottom: 1px solid rgba(201, 169, 110, 0.15);
      transition: background 0.4s;
    }
    .bespoke-item:last-child { border-right: none; }
    .bespoke-item:hover {
      background: rgba(201, 169, 110, 0.1);
    }
    .bespoke-icon {
      font-size: 1.4rem; margin-bottom: 1.2rem;
      opacity: 0.7; color: var(--champagne);
    }
    .bespoke-item h4 {
      font-size: 0.85rem; font-weight: 600;
      color: var(--charcoal); letter-spacing: 0.08em;
      margin-bottom: 0.4rem;
    }
    .bespoke-item .en-label {
      font-family: Georgia, 'Bodoni 72', serif;
      font-size: 0.55rem; letter-spacing: 0.3em;
      color: var(--gold); text-transform: uppercase;
      margin-bottom: 0.8rem;
    }
    .bespoke-item p {
      font-size: 0.7rem; color: rgba(80, 83, 80, 0.5);
      line-height: 1.9; font-weight: 300;
    }

    /* ========================================
       CUISINE SECTION
    ======================================== */
    .cuisine-section {
      display: grid; grid-template-columns: 1fr 1fr;
      min-height: 80vh;
    }
    .cuisine-text {
      display: flex; flex-direction: column;
      justify-content: center;
      padding: 6rem;
      background: var(--charcoal-deep);
    }
    .cuisine-text .section-title { color: var(--champagne-light); }
    .cuisine-text .section-desc { color: rgba(255, 253, 245, 0.5); }
    .cuisine-text .section-label { color: var(--gold); }
    .cuisine-img {
      position: relative; overflow: hidden;
    }
    .cuisine-img img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 8s ease;
    }
    .cuisine-img:hover img { transform: scale(1.04); }

    /* ========================================
       QUOTE BANNER
    ======================================== */
    .quote-banner {
      background: var(--champagne-light);
      text-align: center;
      padding: 7rem 2rem;
      min-height: 85vh;
      position: relative;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .quote-video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      z-index: 0;
      pointer-events: none;
    }
    .quote-text-wrap {
      position: relative;
      display: inline-block;
      background: rgba(0, 0, 0, 0.32);
      backdrop-filter: blur(14px) saturate(1.1);
      -webkit-backdrop-filter: blur(14px) saturate(1.1);
      border-radius: 0;
      padding: 2.5rem 3.5rem;
      -webkit-mask-image: radial-gradient(ellipse 60% 95% at center,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.82) 18%,rgba(0,0,0,0.66) 34%,rgba(0,0,0,0.46) 50%,rgba(0,0,0,0.26) 66%,rgba(0,0,0,0.12) 80%,rgba(0,0,0,0.04) 90%,rgba(0,0,0,0.01) 97%,rgba(0,0,0,0) 100%);
      mask-image: radial-gradient(ellipse 60% 95% at center,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.82) 18%,rgba(0,0,0,0.66) 34%,rgba(0,0,0,0.46) 50%,rgba(0,0,0,0.26) 66%,rgba(0,0,0,0.12) 80%,rgba(0,0,0,0.04) 90%,rgba(0,0,0,0.01) 97%,rgba(0,0,0,0) 100%);
    }
    .quote-zh {
      font-size: 1.6rem; font-weight: 700;
      color: var(--champagne);
      letter-spacing: 0.3em;
      margin-bottom: 1.2rem;
      position: relative;
      text-indent: 0.3em;
    }
    .quote-en {
      font-family: Georgia, 'Bodoni 72', serif;
      font-size: 0.8rem; letter-spacing: 0.5em;
      color: rgba(230, 164, 1, 0.6);
      text-transform: uppercase;
      font-style: italic;
      position: relative;
      text-indent: 0.5em;
    }
    .quote-deco {
      width: 40px; height: 1px;
      background: var(--gold); opacity: 0.3;
      margin: 2rem auto 0;
      position: relative;
    }

    /* ========================================
       PARTY GALLERY
    ======================================== */
    .party-gallery {
      background: var(--ivory);
      padding: 7rem 4rem;
    }
    .party-gallery-header {
      text-align: center; margin-bottom: 3.5rem;
    }
    .party-gallery-header .section-desc {
      margin: 0 auto; text-align: center;
    }
    .party-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;
      max-width: 1200px; margin: 0 auto;
    }
    .party-grid-item {
      position: relative; overflow: hidden;
      aspect-ratio: 1;
    }
    .party-grid-item img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 5s ease, filter 0.5s ease;
      filter: saturate(1.05);
    }
    .party-grid-item:hover img {
      transform: scale(1.06);
      filter: saturate(1.15);
    }
    .party-grid-item::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to bottom, transparent 60%, rgba(201, 169, 110, 0.08) 100%);
      pointer-events: none;
    }

    @media (max-width: 768px) {
      .party-gallery { padding: 5rem 2rem; }
      .party-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ========================================
       JOURNAL / BLOG
    ======================================== */
    .journal-section {
      background: var(--champagne-light);
      padding: 7rem 4rem;
    }
    .journal-header {
      text-align: center; margin-bottom: 4rem;
    }
    .journal-header .section-desc {
      margin: 0 auto; text-align: center;
    }
    .journal-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 2rem; max-width: 1200px; margin: 0 auto;
    }
    .journal-card {
      background: var(--ivory);
      overflow: hidden;
      display: flex; flex-direction: column;
      text-decoration: none; color: inherit;
      transition: transform 0.4s, box-shadow 0.4s;
    }
    .journal-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 44px rgba(58, 60, 58, 0.14);
    }
    .journal-card-img {
      position: relative; overflow: hidden;
      aspect-ratio: 4/3;
    }
    .journal-card-img img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 6s ease;
    }
    .journal-card:hover .journal-card-img img { transform: scale(1.06); }
    .journal-card-body {
      padding: 1.8rem 1.6rem 2rem;
      display: flex; flex-direction: column; flex: 1;
    }
    .journal-date {
      font-family: Georgia, 'Bodoni 72', serif;
      font-size: 0.6rem; letter-spacing: 0.4em;
      color: var(--gold); text-transform: uppercase;
      margin-bottom: 0.8rem;
    }
    .journal-title {
      font-size: 1rem; font-weight: 600;
      color: var(--charcoal-deep);
      letter-spacing: 0.05em; line-height: 1.7;
      margin-bottom: 0.8rem;
    }
    .journal-excerpt {
      font-size: 0.78rem; line-height: 1.9;
      color: rgba(80, 83, 80, 0.6);
      font-weight: 300; flex: 1;
    }
    .journal-readmore {
      font-family: Georgia, 'Bodoni 72', serif;
      font-size: 0.65rem; letter-spacing: 0.3em;
      color: var(--gold); text-transform: uppercase;
      margin-top: 1.4rem;
      transition: letter-spacing 0.3s;
    }
    .journal-card:hover .journal-readmore {
      letter-spacing: 0.45em;
    }
    .journal-footer-link {
      text-align: center; margin-top: 4rem;
    }

    @media (max-width: 1024px) {
      .journal-grid { grid-template-columns: repeat(2, 1fr); }
      .journal-card:nth-child(3) { grid-column: 1 / -1; max-width: 500px; margin: 0 auto; width: 100%; }
    }
    @media (max-width: 768px) {
      .journal-section { padding: 5rem 2rem; }
      .journal-grid { grid-template-columns: 1fr; gap: 1.5rem; }
      .journal-card:nth-child(3) { max-width: none; }
    }

    /* ========================================
       CONTACT / CTA
    ======================================== */
    .contact-section {
      background: #ffffff;
      padding: 7rem 4rem;
    }
    .contact-inner {
      max-width: 600px; margin: 0 auto;
      text-align: center;
    }
    .contact-inner .section-title {
      color: var(--champagne);
    }
    .contact-inner .section-desc {
      color: rgba(80, 83, 80, 0.5);
      margin: 0 auto 3rem;
      text-align: center;
    }

    .contact-form {
      display: flex; flex-direction: column;
      gap: 1.2rem; text-align: left;
    }
    .form-row {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
    }
    .form-field { display: flex; flex-direction: column; gap: 0.4rem; }
    .form-field label {
      font-size: 0.68rem; letter-spacing: 0.15em;
      color: rgba(80, 83, 80, 0.5); font-weight: 300;
    }
    .form-field input,
    .form-field textarea,
    .form-field select {
      font-family: 'Noto Serif TC', Georgia, serif;
      font-size: 0.85rem; padding: 0.8rem 0;
      border: none; border-bottom: 1px solid rgba(201, 169, 110, 0.2);
      background: transparent; color: var(--charcoal);
      outline: none; transition: border-color 0.3s;
      letter-spacing: 0.05em;
    }
    .form-field input:focus,
    .form-field textarea:focus,
    .form-field select:focus {
      border-bottom-color: var(--champagne);
    }
    .form-field textarea {
      resize: vertical; min-height: 100px;
    }
    .form-field select {
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    .venue-checkboxes {
      display: flex; flex-wrap: wrap; gap: 1.2rem 2rem;
      padding: 0.8rem 0 0.4rem;
      border-bottom: 1px solid rgba(201, 169, 110, 0.2);
    }
    .venue-checkbox {
      display: flex; align-items: center; gap: 0.5rem;
      cursor: pointer;
      font-size: 0.85rem; letter-spacing: 0.05em;
      color: var(--charcoal); font-weight: 400;
      user-select: none;
    }
    .venue-checkbox input[type="checkbox"] {
      width: 16px; height: 16px;
      accent-color: var(--gold);
      cursor: pointer;
      margin: 0;
    }

    .form-submit {
      text-align: center; margin-top: 1.5rem;
    }
    .btn-berry {
      display: inline-block; padding: 0.9rem 3.5rem;
      background: var(--champagne); color: var(--ivory);
      border: none; cursor: pointer;
      font-family: 'Noto Serif TC', Georgia, serif;
      font-size: 0.78rem; letter-spacing: 0.3em;
      transition: all 0.4s;
    }
    .btn-berry:hover {
      background: var(--gold);
    }

    /* FOOTER — moved to resources/css/app.css */

    /* ========================================
       ANIMATIONS
    ======================================== */
    .fade-in {
      opacity: 0; transform: translateY(30px);
      transition: opacity 1s ease, transform 1s ease;
    }
    .fade-in.visible {
      opacity: 1; transform: translateY(0);
    }
    .fade-in-slow {
      opacity: 0; transform: translateY(20px);
      transition: opacity 1.4s ease, transform 1.4s ease;
    }
    .fade-in-slow.visible {
      opacity: 1; transform: translateY(0);
    }

    /* Stagger children */
    .stagger-children .fade-in:nth-child(1) { transition-delay: 0s; }
    .stagger-children .fade-in:nth-child(2) { transition-delay: 0.15s; }
    .stagger-children .fade-in:nth-child(3) { transition-delay: 0.3s; }
    .stagger-children .fade-in:nth-child(4) { transition-delay: 0.45s; }
    .stagger-children .fade-in:nth-child(5) { transition-delay: 0.6s; }
    .stagger-children .fade-in:nth-child(6) { transition-delay: 0.75s; }
    .stagger-children .fade-in:nth-child(7) { transition-delay: 0.9s; }
    .stagger-children .fade-in:nth-child(8) { transition-delay: 1.05s; }

    /* ========================================
       RESPONSIVE
    ======================================== */
    @media (max-width: 1024px) {
      .bespoke-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .bespoke-item:nth-child(3) { border-right: none; }
      .bespoke-item:nth-child(4),
      .bespoke-item:nth-child(5) {
        /* Centered last row */
      }
    }

    @media (max-width: 768px) {
      nav { padding: 1rem 1.8rem; }
      .nav-links {
        position: fixed; top: 0; right: -100%;
        width: 75%; max-width: 320px; height: 100vh;
        background: rgba(255, 253, 245, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column; justify-content: center;
        align-items: center; gap: 2rem;
        transition: right 0.4s ease;
      }
      .nav-links.open { right: 0; }
      .nav-links a {
        font-size: 0.9rem; color: rgba(80, 83, 80, 0.7);
      }
      .nav-toggle { display: block; }

      .hero-logo-stack { padding: 2.4rem 3rem; }
      .hero-logo-stack .zh { font-size: 3.5rem; }
      .hero-logo-stack .en { font-size: 1rem; letter-spacing: 0.4em; }
      .hero-tagline-wrap { padding: 1.6rem 2rem; }
      .hero-tagline-en { font-size: 0.7rem; letter-spacing: 0.35em; }
      .hero-tagline-zh { font-size: 0.95rem; letter-spacing: 0.3em; }

      .promise { grid-template-columns: 1fr; }
      .promise-text { padding: 4rem 2rem; grid-column: 1; grid-row: auto; }
      .promise-img { min-height: 55vh; grid-column: 1; grid-row: auto; }

      .villa-strip { padding: 5rem 1.5rem; min-height: 60vh; }
      .villa-strip-text-wrap {
        text-align: center;
        padding: 2.5rem 1.5rem;
        display: block;
      }
      .villa-strip .section-title {
        font-size: 1.4rem !important;
        margin-bottom: 0.8rem !important;
      }
      .villa-strip .section-desc {
        margin: 0 auto 2rem !important;
        max-width: none;
      }
      .villa-strip-text-wrap .btn-berry {
        white-space: nowrap;
        display: inline-block;
      }
      .quote-video { object-position: 65% center; }

      .venues { padding: 5rem 2rem; }
      .venues-grid { grid-template-columns: 1fr; gap: 1rem; }
      .venue-card { aspect-ratio: 4/3; }

      .villa-buildings { gap: 1.8rem; }

      .bespoke { padding: 5rem 2rem; }
      .bespoke-grid { grid-template-columns: 1fr 1fr; }
      .bespoke-item:nth-child(even) { border-right: none; }
      .bespoke-item:nth-child(3) { border-right: 1px solid rgba(201, 169, 110, 0.15); }

      .cuisine-section { grid-template-columns: 1fr; }
      .cuisine-text { padding: 4rem 2rem; order: 2; }
      .cuisine-img { min-height: 50vh; order: 1; }

      .quote-zh { font-size: 1.2rem; }

      .contact-section { padding: 5rem 2rem; }
      .form-row { grid-template-columns: 1fr; }
    }

    @media (max-width: 480px) {
      .hero-logo-stack .zh { font-size: 2.8rem; letter-spacing: 0.3em; }
      .bespoke-grid { grid-template-columns: 1fr; }
      .bespoke-item { border-right: none !important; }
      .villa-buildings { gap: 1.2rem; }
      .villa-letter { font-size: 1.5rem; }
    }