:root{
  --cream:#f7f3ec;
  --ink:#1a1410;
  --ink-soft:#2b211a;
  --muted:#7a6f66;
  --border:#e7ddd0;
  --maroon:#6b1f2a;
  --gold:#c9a24c;
  --rose:#f3e3df;
  --white:#ffffff;
  --shadow-lift:0 30px 60px -30px rgba(26,20,16,.25);
  --gradient-ink:linear-gradient(135deg,#1a1410,#3a2a22);
  --gradient-rose:linear-gradient(135deg,#f7e8e2,#f7f3ec);
  --gradient-gold:linear-gradient(90deg,#c9a24c,#e9c878);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.serif{font-family:var(--serif);letter-spacing:-.01em}
.container{max-width:1280px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-weight:600}
.text-gradient-gold{background:var(--gradient-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-style:italic;font-weight:500}
.muted{color:var(--muted)}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:saturate(1.2) blur(14px);background:rgba(247,243,236,.78);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:-.02em}
.brand span{color:var(--maroon)}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{font-size:14px;font-weight:500;position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:width .35s ease}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:14px;transition:all .3s ease;border:none;cursor:pointer}
.btn-primary{background:var(--ink);color:var(--cream)}
.btn-primary:hover{background:var(--maroon);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn .arr{width:14px;height:14px;display:inline-block;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);margin-left:2px}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;width:40px;height:40px}
.menu-toggle span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px auto;transition:.3s}
.menu-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* HERO */
.hero{padding:160px 0 80px;position:relative;overflow:hidden}
.hero h1{font-family:var(--serif);font-size:clamp(48px,8vw,112px);font-weight:900;line-height:.92;letter-spacing:-.03em;max-width:1000px}
.hero p.lead{margin-top:36px;max-width:560px;font-size:19px;color:var(--muted);line-height:1.6}
.hero-actions{margin-top:44px;display:flex;gap:14px;flex-wrap:wrap}
.hero-grid{margin-top:80px;display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.hero-grid .img{overflow:hidden;border-radius:24px}
.hero-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.hero-grid .img:hover img{transform:scale(1.06)}
.hero-grid .a{grid-column:span 7;aspect-ratio:16/10}
.hero-grid .b{grid-column:span 5;aspect-ratio:4/5}
.hero-grid .c{grid-column:span 4;aspect-ratio:1}
.hero-grid .d{grid-column:span 4;aspect-ratio:1}
.hero-grid .quote{grid-column:span 4;aspect-ratio:1;background:var(--gradient-ink);color:var(--cream);border-radius:24px;padding:36px;display:flex;flex-direction:column;justify-content:space-between}
.hero-grid .quote .big{font-family:var(--serif);font-size:84px;line-height:1;font-weight:900}
.hero-grid .quote p{font-family:var(--serif);font-size:22px;line-height:1.25}

/* SECTIONS */
section{padding:100px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:60px;flex-wrap:wrap}
.section-head h2{font-family:var(--serif);font-size:clamp(36px,5vw,64px);font-weight:700;letter-spacing:-.02em;line-height:1.05;max-width:700px}
.bg-rose{background:var(--gradient-rose);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.bg-ink{background:var(--ink);color:var(--cream)}
.bg-ink .muted,.bg-ink .eyebrow{color:rgba(247,243,236,.6)}

/* PLANS */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plan{background:var(--white);border:1px solid var(--border);border-radius:32px;padding:40px;display:flex;flex-direction:column;transition:transform .4s ease,box-shadow .4s ease}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.plan.featured{background:var(--ink);color:var(--cream);border-color:rgba(201,162,76,.3)}
.plan-head{display:flex;justify-content:space-between;align-items:center}
.plan-name{font-family:var(--serif);font-size:36px;font-weight:700}
.tag{font-size:10px;letter-spacing:.25em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--gold);color:var(--ink);font-weight:700}
.plan .tagline{font-size:14px;color:var(--muted);margin-top:6px}
.plan.featured .tagline{color:rgba(247,243,236,.6)}
.hairline{height:1px;background:var(--border);margin:26px 0}
.plan.featured .hairline{background:rgba(247,243,236,.15)}
.price{font-family:var(--serif);font-size:60px;font-weight:900;line-height:1}
.price-row{display:flex;align-items:baseline;gap:8px}
.price-row .per{color:var(--muted)}
.plan.featured .price-row .per{color:rgba(247,243,236,.6)}
.extra{margin-top:12px;font-size:13px;color:var(--maroon);font-weight:600}
.plan.featured .extra{color:var(--gold)}
.plan ul{list-style:none;margin-top:30px;flex:1;display:flex;flex-direction:column;gap:14px}
.plan li{display:flex;gap:12px;font-size:14px;line-height:1.5}
.check{flex:0 0 20px;width:20px;height:20px;border-radius:999px;background:var(--ink);color:var(--cream);display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:2px}
.plan.featured .check{background:var(--gold);color:var(--ink)}
.plan .btn{justify-content:space-between;margin-top:36px;width:100%}
.plan.featured .btn-primary{background:var(--gold);color:var(--ink)}

/* BENEFITS GRID */
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:24px;overflow:hidden}
.bene{background:var(--white);padding:40px;display:flex;flex-direction:column;gap:24px;min-height:280px;transition:background .5s ease,color .5s ease}
.bene:hover{background:var(--ink);color:var(--cream)}
.bene-head{display:flex;justify-content:space-between;align-items:center}
.icon-circle{width:54px;height:54px;border-radius:999px;border:1px solid currentColor;display:grid;place-items:center;opacity:.85}
.icon-circle svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5}
.bene-num{font-family:var(--serif);font-size:14px;opacity:.6}
.bene h3{font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:-.01em;margin-top:auto}
.bene p{font-size:14px;opacity:.8;margin-top:10px;line-height:1.55}

/* MARQUEE */
.marquee{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--cream);padding:24px 0}
.marquee-track{display:flex;gap:60px;white-space:nowrap;animation:scroll 40s linear infinite;font-family:var(--serif);font-size:32px;color:var(--maroon)}
.marquee-track span{display:inline-flex;align-items:center;gap:60px}
.marquee-track span::after{content:"✦";color:var(--gold);font-size:18px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* CARDS / CONTACT */
.card{background:var(--white);border:1px solid var(--border);border-radius:24px;padding:32px;transition:transform .35s ease,box-shadow .35s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}

/* FORM */
.form-wrap{max-width:780px;margin:0 auto}
.form-section{margin-top:48px;padding-top:48px;border-top:1px solid var(--border)}
.form-section h3{font-family:var(--serif);font-size:28px;font-weight:600;margin-bottom:6px}
.form-section .sub{color:var(--muted);font-size:14px;margin-bottom:28px}
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.field .req{color:var(--maroon)}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--white);font:inherit;font-size:15px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(26,20,16,.06)}
.field textarea{min-height:90px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.checkbox-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-size:14px;line-height:1.5;cursor:pointer}
.checkbox-row input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--maroon)}
.form-success{display:none;padding:32px;border-radius:20px;background:var(--gradient-rose);border:1px solid var(--border);margin-top:24px;text-align:center}
.form-success h3{font-family:var(--serif);font-size:28px;color:var(--maroon)}

/* ABOUT MOSAIC */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.mosaic .img{border-radius:24px;overflow:hidden}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.mosaic .img:hover img{transform:scale(1.05)}

/* VOWS */
.vow{display:grid;grid-template-columns:auto 1fr;gap:32px;padding:32px 0;border-top:1px solid var(--border)}
.vow .n{font-family:var(--serif);font-size:30px;color:var(--maroon)}
.vow h3{font-family:var(--serif);font-size:28px;font-weight:600}
.vow p{color:var(--muted);margin-top:8px;max-width:560px}

/* CTA BANNER */
.cta{position:relative;text-align:center;padding:120px 24px;overflow:hidden;color:var(--cream);background:var(--ink)}
.cta::before{content:"";position:absolute;inset:0;background-image:url(../images/sisterhood.jpg);background-size:cover;background-position:center;opacity:.18}
.cta h2{position:relative;font-family:var(--serif);font-size:clamp(40px,6vw,72px);font-weight:700;letter-spacing:-.02em;max-width:800px;margin:0 auto}
.cta .btn{position:relative;margin-top:40px;background:var(--cream);color:var(--ink)}
.cta .btn:hover{background:var(--gold)}

/* FOOTER */
.footer{background:var(--ink);color:var(--cream);padding:80px 0 40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:60px}
.footer .brand{color:var(--cream);font-size:26px}
.footer .brand span{color:var(--gold)}
.footer p{color:rgba(247,243,236,.6);font-size:14px;margin-top:14px;max-width:320px;line-height:1.6}
.footer h4{font-size:12px;letter-spacing:.25em;text-transform:uppercase;margin-bottom:18px;color:rgba(247,243,236,.6)}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer a{color:var(--cream);font-size:14px;opacity:.85;transition:opacity .2s}
.footer a:hover{opacity:1;color:var(--gold)}
.footer-bottom{border-top:1px solid rgba(247,243,236,.1);padding-top:24px;display:flex;justify-content:space-between;color:rgba(247,243,236,.5);font-size:13px;flex-wrap:wrap;gap:10px}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* ═══════════════════════════════════════
   LOGO & BRAND
═══════════════════════════════════════ */
.brand { display:flex; align-items:center; gap:10px; }
.brand-logo { width:44px; height:44px; border-radius:999px; object-fit:cover; border:1px solid var(--border); flex:0 0 auto; }
.footer .brand { font-size:20px; }
.footer .brand-logo { border-color:rgba(247,243,236,.2); }
.hero-logo { display:inline-flex; align-items:center; gap:14px; margin-bottom:20px; }
.hero-logo img { width:60px; height:60px; border-radius:999px; object-fit:cover; border:2px solid var(--gold); }
.hero-logo-text { display:flex; flex-direction:column; line-height:1.3; }
.hero-logo-text strong { font-family:var(--serif); font-size:15px; }
.hero-logo-text span { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* ═══════════════════════════════════════
   CASHBACK BANNER
═══════════════════════════════════════ */
.cashback-banner { background:var(--gold); padding:14px 24px; text-align:center; font-family:var(--serif); font-weight:700; font-size:clamp(12px,2vw,17px); color:var(--ink); letter-spacing:.02em; line-height:1.5; }

/* ═══════════════════════════════════════
   TABLET — max-width: 900px
═══════════════════════════════════════ */
@media (max-width: 900px) {

  /* Nav */
  .nav-links { display:none; position:absolute; top:78px; left:0; right:0; background:var(--cream); flex-direction:column; padding:24px; gap:16px; border-bottom:1px solid var(--border); z-index:100; }
  .nav-links.open { display:flex; }
  .menu-toggle { display:block; }
  .brand { font-size:15px; gap:8px; }
  .brand-logo { width:38px; height:38px; }

  /* Hero */
  .hero { padding:120px 0 52px; }
  .hero h1 { font-size:clamp(40px,9vw,72px); line-height:1.0; letter-spacing:-.02em; }
  .hero p.lead { font-size:17px; margin-top:24px; }
  .hero-actions { margin-top:32px; gap:12px; }
  .hero-grid { grid-template-columns:repeat(6,1fr); gap:12px; margin-top:48px; }
  .hero-grid .a { grid-column:span 6; aspect-ratio:16/9; }
  .hero-grid .b { grid-column:span 6; aspect-ratio:16/9; }
  .hero-grid .c { grid-column:span 3; }
  .hero-grid .d { grid-column:span 3; }
  .hero-grid .quote { grid-column:span 6; aspect-ratio:unset; padding:28px; }
  .hero-grid .quote .big { font-size:56px; }
  .hero-grid .quote p { font-size:18px; }

  /* Sections */
  section { padding:64px 0; }
  .section-head { flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:40px; }
  .section-head h2 { font-size:clamp(28px,6vw,48px); }

  /* Plans */
  .plans-grid { grid-template-columns:1fr; gap:16px; }

  /* Benefits */
  .benefits-grid { grid-template-columns:1fr; border-radius:16px; }
  .bene { min-height:auto; padding:28px 24px; gap:16px; }
  .bene h3 { font-size:22px; }

  /* Footer */
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; margin-bottom:40px; }

  /* Mosaic */
  .mosaic { grid-template-columns:repeat(6,1fr); gap:12px; }
  .mosaic > * { grid-column:span 6 !important; aspect-ratio:16/9 !important; }

  /* Vows */
  .vow { grid-template-columns:auto 1fr; gap:20px; padding:24px 0; }
  .vow h3 { font-size:22px; }

  /* Inline grids — collapse all */
  [style*="grid-template-columns:5fr 7fr"],
  [style*="grid-template-columns:7fr 5fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"] { display:block !important; }

  /* Contact cards */
  .cards-grid { grid-template-columns:1fr; gap:12px; }
  [style*="margin-top:60px;display:grid"] { display:block !important; margin-top:32px !important; }

  /* Field rows */
  .field-row { grid-template-columns:1fr; }

  /* CTA */
  .cta { padding:80px 24px; }
}

/* ═══════════════════════════════════════
   MOBILE — max-width: 600px
═══════════════════════════════════════ */
@media (max-width: 600px) {

  /* Container */
  .container { padding:0 18px; }

  /* Nav */
  .brand { font-size:13px; gap:6px; }
  .brand-logo { width:32px; height:32px; }
  .nav-inner { height:64px; }
  .nav-links { top:64px; }

  /* Hero */
  .hero { padding:100px 0 44px; }
  .hero h1 { font-size:clamp(32px,10vw,52px); line-height:1.05; word-break:break-word; }
  .hero p.lead { font-size:15px; max-width:100%; }
  .hero-actions { flex-direction:column; gap:10px; }
  .hero-actions .btn { width:100%; justify-content:center; text-align:center; }
  .hero-grid { gap:10px; margin-top:36px; }
  .hero-grid .c, .hero-grid .d { grid-column:span 6 !important; aspect-ratio:16/9; }
  .hero-grid .quote { padding:24px; }
  .hero-grid .quote .big { font-size:44px; }
  .hero-grid .quote p { font-size:16px; }

  /* Sections */
  section { padding:48px 0; }
  .section-head h2 { font-size:clamp(26px,8vw,40px); }

  /* Plans */
  .plan { padding:24px 18px; border-radius:20px; }
  .plan-name { font-size:28px; }
  .price { font-size:44px; }

  /* Benefits */
  .bene { padding:22px 18px; }
  .bene h3 { font-size:20px; }
  .icon-circle { width:44px; height:44px; }

  /* Marquee */
  .marquee-track { font-size:22px; gap:40px; }
  .marquee-track span { gap:40px; }

  /* Footer */
  .footer { padding:52px 0 28px; }
  .footer-grid { grid-template-columns:1fr !important; gap:28px; margin-bottom:32px; }
  .footer .brand { font-size:16px; }
  .footer-bottom { flex-direction:column; gap:6px; text-align:center; }

  /* CTA */
  .cta { padding:64px 18px; }
  .cta h2 { font-size:clamp(28px,8vw,48px); }

  /* Cashback */
  .cashback-banner { font-size:11px; padding:12px 18px; }

  /* Vow */
  .vow { gap:12px; }
  .vow h3 { font-size:20px; }
  .vow .n { font-size:24px; }

  /* Cards */
  .card { padding:24px; border-radius:18px; }

  /* Contact inline grid */
  [style*="margin-top:60px"] { margin-top:24px !important; }
  [style*="display:grid"] { display:block !important; }
}