 /* ─── ROOT ───────────────────────────────────────────────── */
 :root {
     --gold: #C9A96E;
     --gold-l: #E8C98A;
     --gold-d: #A07840;
     --cream: #FAF7F2;
     --warm: #F2EBE0;
     --ink: #1A1510;
     --ink2: #3A3228;
     --ink3: #6B5E4E;
     --ink4: #A89880;
     --navy: #1C2340;
     --navy2: #2A3356;
     --border: rgba(201, 169, 110, .2);
     --border2: rgba(201, 169, 110, .1);
     --card-bg: rgba(255, 255, 255, .85);
     --overlay: rgba(26, 21, 16, .85);
 }

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

 html {
     scroll-behavior: smooth;
 }

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

 /* ─── CURSOR ─────────────────────────────────────────────── */
 .cur {
     width: 6px;
     height: 6px;
     background: var(--gold);
     border-radius: 50%;
     position: fixed;
     pointer-events: none;
     z-index: 9999;
     transform: translate(-50%, -50%);
     transition: transform .08s;
 }

 .cur-ring {
     width: 32px;
     height: 32px;
     border: 1px solid rgba(201, 169, 110, .5);
     border-radius: 50%;
     position: fixed;
     pointer-events: none;
     z-index: 9998;
     transform: translate(-50%, -50%);
     transition: all .18s ease;
 }

 body:has(a:hover, .pkg-card:hover) .cur-ring {
     transform: translate(-50%, -50%) scale(2);
     border-color: var(--gold);
 }

 @media(max-width:1024px) {

     .cur,
     .cur-ring {
         display: none;
     }
 }

 ::-webkit-scrollbar {
     width: 3px;
 }

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

 /* ─── KEYFRAMES ──────────────────────────────────────────── */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

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

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes floatY {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 @keyframes shimmer {
     0% {
         background-position: 200% center;
     }

     100% {
         background-position: -200% center;
     }
 }

 @keyframes lineGrow {
     from {
         transform: scaleX(0);
     }

     to {
         transform: scaleX(1);
     }
 }

 @keyframes grain {
     0% {
         transform: translate(0, 0);
     }

     10% {
         transform: translate(-2%, -3%);
     }

     20% {
         transform: translate(3%, 1%);
     }

     30% {
         transform: translate(-1%, 4%);
     }

     40% {
         transform: translate(2%, -2%);
     }

     50% {
         transform: translate(-3%, 3%);
     }

     60% {
         transform: translate(1%, -1%);
     }

     70% {
         transform: translate(-2%, 2%);
     }

     80% {
         transform: translate(3%, -3%);
     }

     90% {
         transform: translate(-1%, 1%);
     }

     100% {
         transform: translate(0, 0);
     }
 }

 /* ─── NAV ────────────────────────────────────────────────── */
 nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 60px;
     height: 72px;
     background: rgba(250, 247, 242, .94);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border);
     transition: all .3s;
 }

 nav.scrolled {
     height: 60px;
     box-shadow: 0 4px 40px rgba(201, 169, 110, .1);
 }

 .logo-wrap {
     display: flex;
     align-items: center;
     gap: 14px;
     text-decoration: none;
 }

 .logo-emblem {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     border: 1px solid var(--gold);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
     background: var(--navy);
 }

 .logo-emblem::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, transparent 40%, rgba(201, 169, 110, .2) 60%, transparent 70%);
     animation: shimmer 3s linear infinite;
     background-size: 300% 100%;
 }

 .logo-name {
     display: flex;
     flex-direction: column;
     line-height: 1.1;
 }

 .logo-name-top {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.3rem;
     font-weight: 600;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--ink);
 }

 .logo-name-sub {
     font-size: .52rem;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: var(--gold);
     font-weight: 500;
 }

 .nav-links {
     display: flex;
     gap: 32px;
     list-style: none;
 }

 .nav-links a {
     text-decoration: none;
     color: var(--ink3);
     font-size: .8rem;
     letter-spacing: .5px;
     font-weight: 400;
     transition: color .2s;
     position: relative;
     padding-bottom: 2px;
 }

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

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

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

 .nav-cta {
     padding: 10px 24px;
     background: var(--navy);
     border: 1px solid transparent;
     border-radius: 2px;
     font-size: .75rem;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     color: var(--gold-l);
     text-decoration: none;
     font-weight: 500;
     transition: all .25s;
     position: relative;
     overflow: hidden;
 }

 .nav-cta::before {
     content: '';
     position: absolute;
     inset: 0;
     background: var(--gold);
     transform: translateX(-100%);
     transition: transform .3s;
     z-index: 0;
 }

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

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

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

 /* ─── HERO ───────────────────────────────────────────────── */
 #hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
     background: var(--navy);
 }

 /* Film grain overlay */
 #hero::before {
     content: '';
     position: absolute;
     inset: -50%;
     width: 200%;
     height: 200%;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
     background-size: 128px 128px;
     opacity: .6;
     pointer-events: none;
     z-index: 1;
     animation: grain 8s steps(1) infinite;
 }

 /* Warm light vignette */
 .hero-vignette {
     position: absolute;
     inset: 0;
     z-index: 2;
     background:
         radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, rgba(26, 21, 16, .6) 100%),
         linear-gradient(to bottom, rgba(26, 21, 16, .3) 0%, transparent 30%, transparent 70%, rgba(26, 21, 16, .5) 100%);
     pointer-events: none;
 }

 /* Gold dust particles */
 .hero-particles {
     position: absolute;
     inset: 0;
     z-index: 2;
     pointer-events: none;
 }

 .hero-particles span {
     position: absolute;
     width: 2px;
     height: 2px;
     background: var(--gold);
     border-radius: 50%;
     opacity: 0;
     animation: floatY 4s ease-in-out infinite;
 }

 /* Background bokeh */
 .hero-bokeh {
     position: absolute;
     inset: 0;
     z-index: 1;
     pointer-events: none;
 }

 .bokeh {
     position: absolute;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(201, 169, 110, .15) 0%, transparent 70%);
     animation: floatY ease-in-out infinite;
 }

 .hero-content {
     position: relative;
     z-index: 3;
     text-align: center;
     padding: 140px 40px 100px;
     max-width: 900px;
 }

 .hero-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     font-size: .65rem;
     letter-spacing: 5px;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 28px;
     opacity: 0;
     animation: fadeUp .8s .2s forwards;
 }

 .hero-eyebrow::before,
 .hero-eyebrow::after {
     content: '';
     display: block;
     width: 40px;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--gold));
 }

 .hero-eyebrow::after {
     background: linear-gradient(90deg, var(--gold), transparent);
 }

 .hero-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(3.5rem, 9vw, 8rem);
     font-weight: 300;
     line-height: .9;
     letter-spacing: -1px;
     color: var(--cream);
     margin-bottom: 12px;
     opacity: 0;
     animation: fadeUp .9s .35s forwards;
 }

 .hero-title em {
     font-style: italic;
     color: var(--gold-l);
     background: linear-gradient(135deg, var(--gold-l), var(--gold), var(--gold-d));
     background-size: 200% auto;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: shimmer 4s linear infinite;
 }

 .hero-subtitle {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(1.2rem, 3vw, 2rem);
     font-weight: 300;
     font-style: italic;
     color: rgba(250, 247, 242, .5);
     margin-bottom: 48px;
     letter-spacing: 2px;
     opacity: 0;
     animation: fadeUp .8s .5s forwards;
 }

 .hero-divider {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 16px;
     margin-bottom: 48px;
     opacity: 0;
     animation: fadeUp .7s .65s forwards;
 }

 .hero-divider-line {
     width: 60px;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--gold));
 }

 .hero-divider-line:last-child {
     background: linear-gradient(90deg, var(--gold), transparent);
 }

 .hero-divider-gem {
     width: 8px;
     height: 8px;
     background: var(--gold);
     transform: rotate(45deg);
 }

 .hero-cta-group {
     display: flex;
     gap: 16px;
     justify-content: center;
     flex-wrap: wrap;
     opacity: 0;
     animation: fadeUp .8s .8s forwards;
 }

 .btn-gold {
     padding: 14px 36px;
     background: var(--gold);
     color: var(--navy);
     font-size: .75rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     font-weight: 500;
     border: none;
     border-radius: 2px;
     cursor: pointer;
     text-decoration: none;
     transition: all .3s;
     position: relative;
     overflow: hidden;
 }

 .btn-gold::before {
     content: '';
     position: absolute;
     inset: 0;
     background: var(--gold-l);
     transform: translateX(-100%);
     transition: transform .3s;
 }

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

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

 .btn-gold:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(201, 169, 110, .3);
 }

 .btn-outline-gold {
     padding: 14px 36px;
     background: transparent;
     border: 1px solid rgba(201, 169, 110, .5);
     color: var(--gold-l);
     font-size: .75rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     font-weight: 500;
     border-radius: 2px;
     cursor: pointer;
     text-decoration: none;
     transition: all .3s;
 }

 .btn-outline-gold:hover {
     background: rgba(201, 169, 110, .1);
     border-color: var(--gold);
     color: var(--gold);
     transform: translateY(-2px);
 }

 /* Scroll indicator */
 .scroll-hint {
     position: absolute;
     bottom: 40px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 3;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     opacity: 0;
     animation: fadeIn 1s 1.2s forwards;
 }

 .scroll-hint-txt {
     font-size: .55rem;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: rgba(201, 169, 110, .5);
 }

 .scroll-hint-line {
     width: 1px;
     height: 50px;
     background: linear-gradient(to bottom, var(--gold), transparent);
     animation: floatY 2s ease-in-out infinite;
 }

 /* ─── SECTION SHARED ─────────────────────────────────────── */
 section {
     padding: 120px 60px;
     position: relative;
 }

 .sec-tag {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: .6rem;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 16px;
 }

 .sec-tag::before {
     content: '';
     display: block;
     width: 30px;
     height: 1px;
     background: var(--gold);
 }

 .sec-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(2.5rem, 5vw, 4.5rem);
     font-weight: 300;
     line-height: 1;
     color: var(--ink);
     margin-bottom: 16px;
 }

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

 .sec-desc {
     font-size: .85rem;
     color: var(--ink3);
     line-height: 1.9;
     max-width: 520px;
     font-weight: 300;
 }

 /* Reveal */
 .reveal {
     opacity: 0;
     transform: translateY(28px);
     transition: opacity .7s ease, transform .7s ease;
 }

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

 .reveal-delay-1 {
     transition-delay: .1s;
 }

 .reveal-delay-2 {
     transition-delay: .2s;
 }

 .reveal-delay-3 {
     transition-delay: .3s;
 }

 /* ─── SERVICES OVERVIEW ──────────────────────────────────── */
 #services {
     background: var(--cream);
 }

 .services-intro {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
     margin-bottom: 80px;
 }

 @media(max-width:768px) {
     .services-intro {
         grid-template-columns: 1fr;
         gap: 40px;
     }
 }

 .services-visual {
     position: relative;
     height: 420px;
     border-radius: 4px;
     overflow: hidden;
 }

 .services-visual-bg {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, var(--navy) 0%, #2A3356 50%, #1C2340 100%);
 }

 .services-visual-pattern {
     position: absolute;
     inset: 0;
     opacity: .3;
     background-image:
         repeating-linear-gradient(45deg, rgba(201, 169, 110, .15) 0px, rgba(201, 169, 110, .15) 1px, transparent 1px, transparent 20px),
         repeating-linear-gradient(-45deg, rgba(201, 169, 110, .15) 0px, rgba(201, 169, 110, .15) 1px, transparent 1px, transparent 20px);
 }

 .services-visual-center {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 20px;
     text-align: center;
     padding: 40px;
 }

 .svc-vc-icon {
     width: 80px;
     height: 80px;
     border: 1px solid rgba(201, 169, 110, .3);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(201, 169, 110, .08);
 }

 .svc-vc-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 2.5rem;
     font-weight: 400;
     color: var(--gold-l);
     font-style: italic;
 }

 .svc-vc-sub {
     font-size: .65rem;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: rgba(201, 169, 110, .5);
 }

 .svc-vc-line {
     width: 80px;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--gold), transparent);
 }

 .services-stats {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1px;
     background: var(--border);
     border: 1px solid var(--border);
     margin-top: 40px;
     border-radius: 2px;
     overflow: hidden;
 }

 .stat-box {
     background: var(--cream);
     padding: 24px;
     text-align: center;
 }

 .stat-num {
     font-family: 'Cormorant Garamond', serif;
     font-size: 3rem;
     font-weight: 300;
     color: var(--gold-d);
     line-height: 1;
 }

 .stat-lbl {
     font-size: .65rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--ink4);
     margin-top: 4px;
 }

 /* Service Pillars */
 .svc-pillars {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1px;
     background: var(--border);
     border: 1px solid var(--border);
     border-radius: 4px;
     overflow: hidden;
 }

 @media(max-width:768px) {
     .svc-pillars {
         grid-template-columns: 1fr;
     }
 }

 .svc-pillar {
     background: var(--cream);
     padding: 48px 36px;
     transition: all .3s;
     cursor: default;
     position: relative;
     overflow: hidden;
 }

 .svc-pillar::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--gold), transparent);
     transform: scaleX(0);
     transition: transform .4s;
 }

 .svc-pillar:hover {
     background: var(--warm);
 }

 .svc-pillar:hover::before {
     transform: scaleX(1);
 }

 .svc-pillar-num {
     font-family: 'Cormorant Garamond', serif;
     font-size: 5rem;
     font-weight: 300;
     color: var(--border);
     line-height: 1;
     margin-bottom: 20px;
     transition: color .3s;
 }

 .svc-pillar:hover .svc-pillar-num {
     color: rgba(201, 169, 110, .2);
 }

 .svc-pillar-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.6rem;
     font-weight: 400;
     color: var(--ink);
     margin-bottom: 12px;
     line-height: 1.2;
 }

 .svc-pillar-desc {
     font-size: .78rem;
     color: var(--ink3);
     line-height: 1.8;
     font-weight: 300;
 }

 .svc-pillar-tag {
     display: inline-block;
     margin-top: 20px;
     padding: 4px 12px;
     border: 1px solid var(--border);
     border-radius: 1px;
     font-size: .58rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--gold-d);
 }

 /* ─── WEDDING SECTION ────────────────────────────────────── */
 #wedding {
     background: var(--navy);
     overflow: hidden;
 }

 #wedding .sec-title {
     color: var(--cream);
 }

 #wedding .sec-title em {
     color: var(--gold-l);
 }

 #wedding .sec-desc {
     color: rgba(250, 247, 242, .5);
 }

 #wedding .sec-tag {
     color: var(--gold);
 }

 .wedding-header {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: end;
     margin-bottom: 80px;
 }

 @media(max-width:768px) {
     .wedding-header {
         grid-template-columns: 1fr;
         gap: 32px;
     }
 }

 .wedding-quote {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.8rem;
     font-weight: 300;
     font-style: italic;
     color: rgba(250, 247, 242, .3);
     line-height: 1.5;
     text-align: right;
     padding-left: 40px;
     border-right: 2px solid rgba(201, 169, 110, .2);
 }

 .pkg-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1px;
     background: rgba(201, 169, 110, .1);
     border: 1px solid rgba(201, 169, 110, .1);
     border-radius: 4px;
     overflow: hidden;
 }

 @media(max-width:900px) {
     .pkg-grid {
         grid-template-columns: 1fr;
     }
 }

 .pkg-card {
     background: #1A2035;
     padding: 48px 36px;
     position: relative;
     overflow: hidden;
     cursor: pointer;
     transition: all .35s;
 }

 .pkg-card.featured {
     background: #222B42;
 }

 .pkg-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--gold), transparent);
     opacity: 0;
     transition: opacity .3s;
 }

 .pkg-card:hover {
     background: #1E2740;
 }

 .pkg-card:hover::before {
     opacity: 1;
 }

 .pkg-card.featured::after {
     content: 'POPULER';
     position: absolute;
     top: 20px;
     right: 20px;
     padding: 4px 12px;
     background: var(--gold);
     color: var(--navy);
     font-size: .52rem;
     letter-spacing: 2px;
     font-weight: 600;
     border-radius: 1px;
 }

 .pkg-type {
     font-size: .58rem;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 12px;
 }

 .pkg-name {
     font-family: 'Cormorant Garamond', serif;
     font-size: 2.2rem;
     font-weight: 400;
     color: var(--cream);
     margin-bottom: 6px;
     line-height: 1;
 }

 .pkg-tagline {
     font-family: 'Cormorant Garamond', serif;
     font-size: .9rem;
     font-style: italic;
     color: rgba(250, 247, 242, .35);
     margin-bottom: 6px;
 }

 .pkg-duration {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: .65rem;
     letter-spacing: 1px;
     color: var(--gold);
     padding: 6px 14px;
     border: 1px solid rgba(201, 169, 110, .2);
     border-radius: 1px;
     margin-bottom: 28px;
 }

 .pkg-divider {
     height: 1px;
     background: rgba(201, 169, 110, .12);
     margin-bottom: 24px;
 }

 .pkg-features {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-bottom: 32px;
 }

 .pkg-feature {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: .78rem;
     color: rgba(250, 247, 242, .65);
     line-height: 1.5;
 }

 .pkg-feature-dot {
     width: 16px;
     height: 16px;
     min-width: 16px;
     border-radius: 50%;
     border: 1px solid rgba(201, 169, 110, .3);
     background: rgba(201, 169, 110, .08);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 2px;
 }

 .pkg-feature-dot svg {
     width: 8px;
     height: 8px;
 }

 .pkg-card.featured .pkg-feature {
     color: rgba(250, 247, 242, .8);
 }

 .pkg-card.featured .pkg-feature-dot {
     background: rgba(201, 169, 110, .15);
     border-color: rgba(201, 169, 110, .4);
 }

 .pkg-cta {
     width: 100%;
     padding: 13px;
     background: transparent;
     border: 1px solid rgba(201, 169, 110, .3);
     border-radius: 2px;
     font-size: .68rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--gold-l);
     cursor: pointer;
     transition: all .25s;
     font-family: 'DM Sans', sans-serif;
     font-weight: 500;
     text-decoration: none;
     display: block;
     text-align: center;
 }

 .pkg-cta:hover {
     background: var(--gold);
     color: var(--navy);
     border-color: var(--gold);
 }

 .pkg-card.featured .pkg-cta {
     background: var(--gold);
     color: var(--navy);
     border-color: var(--gold);
 }

 .pkg-card.featured .pkg-cta:hover {
     background: var(--gold-l);
 }

 /* ─── CONTENT MANAGEMENT ─────────────────────────────────── */
 #content-mgmt {
     background: var(--warm);
 }

 .cm-header {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: end;
     margin-bottom: 80px;
 }

 @media(max-width:768px) {
     .cm-header {
         grid-template-columns: 1fr;
         gap: 32px;
     }
 }

 .cm-visual {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
     height: 300px;
 }

 .cm-vis-block {
     border-radius: 4px;
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .cm-vis-block:first-child {
     grid-row: span 2;
     background: linear-gradient(160deg, var(--navy) 0%, #2A3356 100%);
 }

 .cm-vis-block:nth-child(2) {
     background: linear-gradient(135deg, #2A1F0E 0%, var(--gold-d) 100%);
 }

 .cm-vis-block:nth-child(3) {
     background: linear-gradient(135deg, var(--gold-d) 0%, #1C2340 100%);
 }

 .cm-vis-txt {
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     color: rgba(250, 247, 242, .5);
     font-size: .9rem;
     letter-spacing: 2px;
     text-align: center;
     padding: 12px;
 }

 .cm-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
 }

 @media(max-width:900px) {
     .cm-grid {
         grid-template-columns: 1fr;
     }
 }

 .cm-card {
     background: var(--cream);
     border: 1px solid var(--border);
     border-radius: 4px;
     overflow: hidden;
     transition: all .3s;
     cursor: pointer;
     position: relative;
 }

 .cm-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--gold), var(--gold-d));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .3s;
 }

 .cm-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 20px 60px rgba(201, 169, 110, .1);
 }

 .cm-card:hover::after {
     transform: scaleX(1);
 }

 .cm-card.highlight {
     border-color: var(--gold-d);
 }

 .cm-card.highlight::before {
     content: 'MOST VALUE';
     position: absolute;
     top: 0;
     right: 0;
     padding: 6px 14px;
     background: var(--gold-d);
     color: var(--cream);
     font-size: .52rem;
     letter-spacing: 2px;
     font-weight: 600;
     border-radius: 0 0 0 4px;
 }

 .cm-card-header {
     padding: 28px 28px 20px;
     background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
     position: relative;
     overflow: hidden;
 }

 .cm-card-header::before {
     content: '';
     position: absolute;
     inset: 0;
     opacity: .3;
     background-image:
         repeating-linear-gradient(45deg, rgba(201, 169, 110, .1) 0px, rgba(201, 169, 110, .1) 1px, transparent 1px, transparent 12px);
 }

 .cm-sessions {
     font-family: 'Cormorant Garamond', serif;
     font-size: 3.5rem;
     font-weight: 300;
     color: var(--gold-l);
     line-height: 1;
     position: relative;
     z-index: 1;
 }

 .cm-sessions span {
     font-size: 1.2rem;
     color: rgba(201, 169, 110, .6);
 }

 .cm-sessions-sub {
     font-size: .6rem;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: rgba(201, 169, 110, .5);
     margin-top: 4px;
     position: relative;
     z-index: 1;
 }

 .cm-card-body {
     padding: 24px 28px 28px;
 }

 .cm-label {
     font-size: .6rem;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--gold-d);
     margin-bottom: 14px;
 }

 .cm-features {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 .cm-feature {
     display: flex;
     align-items: flex-start;
     gap: 8px;
     font-size: .78rem;
     color: var(--ink3);
     line-height: 1.5;
 }

 .cm-feat-icon {
     color: var(--gold);
     flex-shrink: 0;
     margin-top: 1px;
     font-size: .7rem;
 }

 .cm-card-footer {
     padding: 16px 28px 24px;
     border-top: 1px solid var(--border2);
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .cm-shooting {
     font-size: .7rem;
     color: var(--ink4);
     letter-spacing: .5px;
 }

 .cm-shooting strong {
     color: var(--gold-d);
     font-size: .85rem;
     display: block;
 }

 .cm-action {
     padding: 9px 20px;
     background: var(--navy);
     color: var(--gold-l);
     border: none;
     border-radius: 2px;
     font-size: .65rem;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     cursor: pointer;
     transition: all .2s;
     text-decoration: none;
     font-family: 'DM Sans', sans-serif;
 }

 .cm-action:hover {
     background: var(--gold);
     color: var(--navy);
 }

 .cm-card.highlight .cm-action {
     background: var(--gold-d);
     color: var(--cream);
 }

 .cm-card.highlight .cm-action:hover {
     background: var(--gold);
     color: var(--navy);
 }

 /* ─── WHY CHOOSE ─────────────────────────────────────────── */
 #why {
     background: var(--cream);
 }

 .why-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1px;
     background: var(--border);
     border: 1px solid var(--border);
     border-radius: 4px;
     overflow: hidden;
     margin-top: 60px;
 }

 @media(max-width:900px) {
     .why-grid {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media(max-width:480px) {
     .why-grid {
         grid-template-columns: 1fr;
     }
 }

 .why-item {
     background: var(--cream);
     padding: 40px 28px;
     text-align: center;
     transition: background .3s;
     position: relative;
 }

 .why-item:hover {
     background: var(--warm);
 }

 .why-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%) scaleX(0);
     width: 40px;
     height: 2px;
     background: var(--gold);
     transition: transform .3s;
     transform-origin: center;
 }

 .why-item:hover::before {
     transform: translateX(-50%) scaleX(1);
 }

 .why-icon {
     width: 52px;
     height: 52px;
     border: 1px solid var(--border);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 16px;
     transition: all .3s;
 }

 .why-item:hover .why-icon {
     border-color: var(--gold);
     background: rgba(201, 169, 110, .08);
 }

 .why-ttl {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.2rem;
     color: var(--ink);
     margin-bottom: 8px;
 }

 .why-txt {
     font-size: .75rem;
     color: var(--ink4);
     line-height: 1.7;
 }

 /* ─── CONTACT ────────────────────────────────────────────── */
 #contact {
     background: var(--navy);
     padding: 120px 60px;
     position: relative;
     overflow: hidden;
 }

 #contact::before {
     content: '';
     position: absolute;
     inset: -50%;
     width: 200%;
     height: 200%;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
     background-size: 128px 128px;
     pointer-events: none;
     animation: grain 8s steps(1) infinite;
 }

 .contact-inner {
     max-width: 900px;
     margin: 0 auto;
     text-align: center;
     position: relative;
     z-index: 1;
 }

 .contact-eyebrow {
     font-size: .6rem;
     letter-spacing: 5px;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 20px;
     display: block;
 }

 .contact-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(2.5rem, 6vw, 5rem);
     font-weight: 300;
     color: var(--cream);
     margin-bottom: 16px;
     line-height: 1;
 }

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

 .contact-sub {
     font-size: .85rem;
     color: rgba(250, 247, 242, .4);
     max-width: 480px;
     margin: 0 auto 56px;
     line-height: 1.8;
     font-weight: 300;
 }

 .contact-cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1px;
     background: rgba(201, 169, 110, .1);
     border: 1px solid rgba(201, 169, 110, .1);
     border-radius: 4px;
     overflow: hidden;
     margin-bottom: 48px;
 }

 @media(max-width:700px) {
     .contact-cards {
         grid-template-columns: 1fr;
     }
 }

 .cc {
     background: #1A2035;
     padding: 32px;
     display: flex;
     align-items: center;
     gap: 16px;
     text-decoration: none;
     transition: background .2s;
 }

 .cc:hover {
     background: #1E2740;
 }

 .cc-icon {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     border: 1px solid rgba(201, 169, 110, .2);
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(201, 169, 110, .06);
     flex-shrink: 0;
     transition: all .2s;
 }

 .cc:hover .cc-icon {
     border-color: var(--gold);
     background: rgba(201, 169, 110, .12);
 }

 .cc-lbl {
     font-size: .55rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: rgba(201, 169, 110, .5);
     margin-bottom: 3px;
 }

 .cc-val {
     font-size: .9rem;
     color: var(--cream);
     font-weight: 500;
 }

 .contact-cta {
     display: flex;
     gap: 16px;
     justify-content: center;
     flex-wrap: wrap;
 }

 /* ─── FOOTER ─────────────────────────────────────────────── */
 footer {
     background: #0D1020;
     padding: 32px 60px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 16px;
     border-top: 1px solid rgba(201, 169, 110, .08);
 }

 .footer-brand {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.1rem;
     letter-spacing: 4px;
     color: rgba(201, 169, 110, .3);
     text-transform: uppercase;
 }

 .footer-brand em {
     font-style: normal;
     color: rgba(201, 169, 110, .5);
 }

 .footer-copy {
     font-size: .6rem;
     color: rgba(250, 247, 242, .15);
     letter-spacing: .5px;
 }

 .footer-back {
     font-size: .6rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: rgba(201, 169, 110, .3);
     text-decoration: none;
     transition: color .2s;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .footer-back:hover {
     color: var(--gold);
 }

 /* ─── BOTTOM TAB (MOBILE) ────────────────────────────────── */
 #bottomTabBar {
     display: none;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 2000;
     height: calc(60px + env(safe-area-inset-bottom));
     padding-bottom: env(safe-area-inset-bottom);
     background: rgba(26, 32, 53, .97);
     backdrop-filter: blur(20px);
     border-top: 1px solid rgba(201, 169, 110, .12);
     align-items: stretch;
     justify-content: space-around;
 }

 @media(max-width:1024px) {
     #mainNav {
         display: none !important;
     }

     #bottomTabBar {
         display: flex !important;
     }

     body {
         padding-bottom: calc(62px + env(safe-area-inset-bottom));
     }

     section {
         padding: 80px 20px;
     }

     #hero {
         padding: 0;
     }

     .hero-content {
         padding: 120px 24px 80px;
     }

     .wedding-header,
     .cm-header {
         grid-template-columns: 1fr;
         gap: 28px;
     }

     .wedding-quote {
         text-align: left;
         padding-left: 0;
         border-right: none;
         padding-left: 20px;
         border-left: 2px solid rgba(201, 169, 110, .2);
     }

     nav,
     footer,
     #contact {
         padding-left: 20px;
         padding-right: 20px;
     }
 }

 .btab {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 3px;
     text-decoration: none;
     color: rgba(201, 169, 110, .4);
     font-size: .48rem;
     letter-spacing: .5px;
     text-transform: uppercase;
     font-weight: 500;
     background: none;
     border: none;
     cursor: pointer;
     transition: color .15s;
     -webkit-tap-highlight-color: transparent;
 }

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

 .btab svg {
     width: 20px;
     height: 20px;
 }

 /* ─── MODAL ──────────────────────────────────────────────── */
 .modal {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 3000;
     background: rgba(13, 16, 32, .9);
     backdrop-filter: blur(16px);
     align-items: center;
     justify-content: center;
     padding: 20px;
 }

 .modal.open {
     display: flex;
 }

 .modal-sheet {
     background: var(--cream);
     border-radius: 4px;
     width: 100%;
     max-width: 500px;
     max-height: 88vh;
     overflow-y: auto;
     animation: fadeUp .3s ease;
     position: relative;
     border: 1px solid var(--border);
 }

 .modal-sheet::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--gold), transparent);
 }

 .modal-hdr {
     padding: 28px 28px 20px;
     border-bottom: 1px solid var(--border2);
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     position: sticky;
     top: 0;
     background: var(--cream);
     z-index: 5;
 }

 .modal-cat {
     font-size: .58rem;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 4px;
 }

 .modal-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.8rem;
     font-weight: 400;
     color: var(--ink);
 }

 .modal-close {
     width: 32px;
     height: 32px;
     background: var(--warm);
     border: 1px solid var(--border);
     border-radius: 2px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--ink3);
     transition: all .2s;
     flex-shrink: 0;
 }

 .modal-close:hover {
     background: var(--navy);
     color: var(--gold);
     border-color: var(--navy);
 }

 .modal-body {
     padding: 24px 28px 28px;
 }

 .modal-features {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-bottom: 24px;
 }

 .modal-feature {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: .8rem;
     color: var(--ink3);
     line-height: 1.6;
     padding: 10px 14px;
     background: var(--warm);
     border-radius: 2px;
     border-left: 2px solid var(--border);
 }

 .modal-feature.highlight {
     border-left-color: var(--gold);
     background: rgba(201, 169, 110, .05);
 }

 .modal-cta {
     display: flex;
     gap: 10px;
     margin-top: 24px;
     padding-top: 20px;
     border-top: 1px solid var(--border2);
 }

 .modal-wa-btn {
     flex: 1;
     padding: 13px;
     background: var(--navy);
     border: none;
     border-radius: 2px;
     font-family: 'DM Sans', sans-serif;
     font-size: .68rem;
     font-weight: 500;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: var(--gold-l);
     cursor: pointer;
     transition: all .2s;
     text-decoration: none;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
 }

 .modal-wa-btn:hover {
     background: var(--gold);
     color: var(--navy);
 }

 .modal-wa-btn.outline {
     background: transparent;
     border: 1px solid var(--border);
     color: var(--ink4);
     flex: 0 0 auto;
     padding: 13px 18px;
 }

 .modal-wa-btn.outline:hover {
     border-color: var(--ink);
     color: var(--ink);
     background: transparent;
 }