:root{
  --black:#111111;
  --near-black:#1a1a1a;
  --white:#ffffff;
  --off-white:#f7f7f5;
  --grey-100:#f0f0ee;
  --grey-300:#d8d8d4;
  --grey-500:#8a8a86;
  --grey-700:#4a4a48;
  --blue:#7ec4e8;
  --blue-dark:#5aa9d6;
  --gold:#89743f;
  --serif: 'Georgia', 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family: var(--sans);
  color: var(--black);
  background: var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,.ph{display:block; width:100%; object-fit:cover;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
h1,h2,h3{font-family: var(--serif); font-weight:400; letter-spacing:0.3px;}
.eyebrow{
  text-transform:uppercase; letter-spacing:2.5px; font-size:12px;
  color: var(--grey-500); font-weight:600; margin-bottom:14px; display:block;
}
.btn{
  display:inline-block; padding:15px 34px; border-radius:2px;
  font-size:14px; letter-spacing:1px; text-transform:uppercase; font-weight:600;
  cursor:pointer; border:1px solid transparent; transition:all .2s ease;
}
.btn-white{background:var(--white); color:var(--black);}
.btn-white:hover{background:var(--grey-300);}
.btn-black{background:var(--black); color:var(--white);}
.btn-black:hover{background:var(--grey-700);}
.btn-outline-dark{border-color:var(--black); color:var(--black); background:transparent;}
.btn-outline-dark:hover{background:var(--black); color:var(--white);}
.btn-outline-light{border-color:var(--white); color:var(--white); background:transparent;}
.btn-outline-light:hover{background:var(--white); color:var(--black);}

/* placeholder blocks */
.ph{background:var(--grey-300); display:flex; align-items:center; justify-content:center;
    color:var(--grey-700); font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
    font-weight:600; min-height:200px;}
.ph.dark{background:var(--near-black); color:var(--grey-300);}

/* ===== HEADER ===== */
header{
  background:var(--black); color:var(--white); position:sticky; top:0; z-index:50;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding-top:20px; padding-bottom:20px;}
.logo{display:inline-flex; align-items:center;}
.logo img{height:30px; width:auto; display:block;}
.nav-links{display:flex; gap:36px; font-size:14px; letter-spacing:0.5px;}
.nav-links a{opacity:.85; transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-cta{display:flex; gap:14px; align-items:center;}
.nav-mobile-join, .nav-mobile-only{display:none;}
.nav-desktop-login{margin-right:10px;}
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:28px; height:24px; background:none; border:none; cursor:pointer; padding:0;}
.nav-toggle span{display:block; width:100%; height:2px; background:var(--white); transition:transform .2s ease, opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:860px){
  .nav-links{
    display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0;
    background:var(--black); border-top:1px solid #2a2a2a; padding:8px 24px 20px;
    max-height:0; overflow:hidden; visibility:hidden;
  }
  .nav-links a{padding:12px 0; border-bottom:1px solid #2a2a2a;}
  .nav-links.open{max-height:400px; visibility:visible;}
  .nav-desktop-join, .nav-desktop-login{display:none;}
  .nav-mobile-join{display:block; text-align:center; margin-top:16px; border-bottom:none;}
  .nav-mobile-only{display:block;}
  .nav-toggle{display:flex;}
}

/* ===== HERO ===== */
.hero{background:var(--black); color:var(--white); padding:0;}
.hero-banner{position:relative; width:100%; min-height:600px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.hero-banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0;}
.hero-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.6) 100%);}
.hero-content{position:relative; z-index:2; width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; padding:70px 24px; text-shadow:0 2px 12px rgba(0,0,0,.5);}
.hero-content .eyebrow{color:var(--grey-300);}
.hero-content h1{font-size:44px; line-height:1.2; margin-bottom:22px; max-width:760px;}
.hero-content p{font-size:17px; color:var(--grey-300); max-width:520px; margin:0 auto 34px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:30px; justify-content:center;}
.hero-trust{display:flex; gap:28px; font-size:13px; color:var(--grey-300); flex-wrap:wrap; justify-content:center;}
.hero-trust strong{color:var(--white); font-family:var(--serif); font-size:20px; display:block;}
@media (max-width:860px){
  .hero-banner{min-height:520px;}
  .hero-content h1{font-size:32px;}
}
@media (max-width:560px){
  .hero-banner{min-height:460px;}
}

/* ===== SECTION generic ===== */
section{padding:90px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:34px;}
.section-head p{color:var(--grey-700); margin-top:16px; font-size:16px;}

/* ===== WHY CHOOSE US ===== */
.why{background:var(--off-white);}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--grey-300);}
.why-card{background:var(--off-white); padding:44px 32px; text-align:left;}
.why-icon{width:46px; height:46px; border-radius:50%; background:var(--black); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:22px; font-family:var(--serif);}
.why-card h3{font-size:19px; margin-bottom:10px; font-family:var(--sans); font-weight:600;}
.why-card p{font-size:14px; color:var(--grey-700);}
@media (max-width:860px){ .why-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .why-grid{grid-template-columns:1fr;} }

/* ===== ABOUT ===== */
.about-single{max-width:820px;}
.about-copy .eyebrow{color:var(--gold);}
.about-copy h2{font-size:32px; margin-bottom:20px;}
.about-copy p{margin-bottom:18px; color:var(--grey-700); font-size:16px;}
.about-copy p.lead{color:var(--black); font-size:19px; font-family:var(--serif); font-style:italic; line-height:1.55;}
.bg-off-white{background:var(--off-white);}
.about-tags{display:flex; flex-wrap:wrap; gap:10px; margin:24px 0;}
.about-cta{margin-top:12px;}
.tag{border:1px solid var(--grey-300); padding:7px 16px; border-radius:20px; font-size:13px; color:var(--grey-700);}

/* ===== HOW IT WORKS ===== */
.how{background:var(--black); color:var(--white);}
.how .section-head{max-width:760px;}
.how .section-head p{color:var(--grey-300);}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:40px 32px;}
.step{border-top:1px solid #333; padding-top:24px;}
.step-num{font-family:var(--serif); font-size:32px; color:var(--blue); margin-bottom:12px; display:block;}
.step h3{font-size:17px; font-family:var(--sans); font-weight:600; margin-bottom:8px;}
.step p{font-size:14px; color:var(--grey-500);}
@media (max-width:860px){ .steps{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .steps{grid-template-columns:1fr;} }

/* ===== FEATURED SENIOR SINGLES ===== */
.singles{background:var(--off-white);}
.singles-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.single-card{background:var(--white); border:1px solid var(--grey-300);}
.single-photo{position:relative;}
.single-photo a{display:block;}
.single-photo .ph, .single-photo img{height:260px; object-fit:cover;}
.single-badge{position:absolute; top:14px; left:14px; background:var(--black); color:var(--white);
  font-size:11px; letter-spacing:1px; text-transform:uppercase; padding:5px 10px; z-index:2;}
.single-info{padding:20px 22px;}
.single-info .name-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
.single-info h3{font-size:18px; font-family:var(--serif); font-weight:400;}
.single-info .loc{font-size:13px; color:var(--grey-500);}
.single-info p{font-size:14px; color:var(--grey-700);}
@media (max-width:860px){ .singles-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .singles-grid{grid-template-columns:1fr;} }

/* ===== SUCCESS STORY ===== */
.story{background:var(--near-black); color:var(--white);}
.story-item + .story-item{margin-top:70px; padding-top:70px; border-top:1px solid #333;}
.story-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:center;}
.story-item:nth-child(even) .story-grid{grid-template-columns:1.2fr 0.8fr;}
.story-item:nth-child(even) .story-image{order:2;}
.story-image .ph, .story-image img{height:420px; object-fit:cover;}
.quote-mark{font-family:var(--serif); font-size:64px; color:var(--blue); line-height:1; margin-bottom:10px;}
.story-copy p.quote{font-family:var(--serif); font-size:22px; line-height:1.6; color:var(--white); margin-bottom:24px;}
.story-author{font-size:14px; color:var(--grey-500);}
.story-author strong{color:var(--white); display:block; font-family:var(--serif); font-size:17px; margin-bottom:4px;}
.story-more{display:inline-block; margin-top:18px; color:var(--gold); font-size:14px; letter-spacing:.3px; text-decoration:none; font-weight:600;}
.story-more:hover{text-decoration:underline;}
@media (max-width:860px){
  .story-grid, .story-item:nth-child(even) .story-grid{grid-template-columns:1fr;}
  .story-item:nth-child(even) .story-image{order:0;}
  .story-image .ph, .story-image img{height:260px;}
}

/* ===== FAQ ===== */
.faq-list{max-width:800px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--grey-300); padding:26px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:17px; font-weight:600;}
.faq-q .plus{color:var(--blue-dark); font-size:20px; font-weight:400;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding-top:14px; color:var(--grey-700); font-size:15px; max-width:680px;}
.faq-item.open .faq-a{max-height:200px;}
.faq-item.open .plus{transform:rotate(45deg);}
.plus{transition:transform .2s;}

/* ===== TOP CITIES ===== */
.cities{background:var(--off-white);}
.city-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.city-card{background:var(--white); border:1px solid var(--grey-300); overflow:hidden;}
.city-photo .ph, .city-photo img{height:220px; object-fit:cover;}
.city-info{padding:26px 28px;}
.city-info h3{font-size:21px; margin-bottom:10px;}
.city-info p{font-size:14px; color:var(--grey-700);}
@media (max-width:560px){ .city-grid{grid-template-columns:1fr;} }

/* ===== CTA ===== */
.cta{background:var(--black); color:var(--white); text-align:center; padding:100px 0;}
.cta h2{font-size:38px; margin-bottom:18px;}
.cta p{color:var(--grey-300); max-width:520px; margin:0 auto 36px;}

/* ===== FOOTER ===== */
footer{background:var(--black); color:var(--grey-500); padding:60px 0 24px; border-top:1px solid #2a2a2a;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px;}
.footer-brand .logo{margin-bottom:16px;}
.footer-brand p{font-size:14px; max-width:280px;}
.footer-col h2, .footer-col h3{font-family:var(--sans); color:var(--white); font-size:13px; letter-spacing:1px; text-transform:uppercase; margin-bottom:18px; font-weight:600;}
.footer-col ul li{margin-bottom:11px; font-size:14px;}
.footer-col ul li a:hover{color:var(--white);}
.footer-bottom{text-align:center; padding-top:24px; border-top:1px solid #2a2a2a; font-size:13px;}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr;} }

/* ===== SIGNUP PAGE ===== */
.signup-home-link{color:var(--grey-300); font-size:14px; letter-spacing:.5px; transition:color .2s;}
.signup-home-link:hover{color:var(--white);}
.signup{background:var(--grey-100); padding:70px 0 100px;}
.signup-wrap{max-width:520px;}
.signup-intro{text-align:center; margin-bottom:36px;}
.signup-intro h1{font-size:36px; margin:10px 0 16px;}
.signup-intro p{color:var(--grey-700); font-size:16px;}
.signup-card{background:var(--white); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.08); padding:40px 36px;}
.field-group{margin-bottom:24px;}
.field-label{display:block; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--grey-700); margin-bottom:10px;}
.toggle-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.toggle-row input{position:absolute; opacity:0; pointer-events:none;}
.toggle-btn{display:block; text-align:center; padding:14px; border-radius:10px; border:1px solid var(--grey-300);
  font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--black); cursor:pointer; transition:all .15s ease;}
.toggle-row input:checked + .toggle-btn{background:var(--black); border-color:var(--black); color:var(--white);}
.age-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.age-row select{width:100%; padding:13px 14px; border-radius:10px; border:1px solid var(--grey-300); background:var(--white); font-size:15px; color:var(--black);}
.signup-submit{display:block; width:100%; text-align:center; border:none; cursor:pointer; margin-bottom:18px;}
.signup-disclaimer{font-size:12px; color:var(--grey-500); text-align:center; line-height:1.6;}
.signup-disclaimer a{color:var(--black); text-decoration:underline;}
@media (max-width:560px){ .signup-card{padding:30px 24px;} .signup-intro h1{font-size:28px;} }

/* ===== CONTACT PAGE ===== */
.contact{padding:110px 0; text-align:center;}
.contact-wrap{max-width:560px;}
.contact h1{font-size:38px; margin:10px 0 20px;}
.contact p{color:var(--grey-700); font-size:16px; margin-bottom:32px;}
@media (max-width:560px){ .contact{padding:80px 0;} .contact h1{font-size:30px;} }

/* ===== LOGIN PAGE ===== */
.text-input{width:100%; padding:13px 14px; border-radius:10px; border:1px solid var(--grey-300); background:var(--white); font-size:15px; color:var(--black); font-family:var(--sans);}
.login-switch{text-align:center; margin-top:24px; font-size:14px; color:var(--grey-700);}
.login-switch a{color:var(--black); font-weight:600; text-decoration:underline;}