/*
Theme Name: Meet ME at Closing
Description: Custom theme for Mike Escobedo, luxury and move-up real estate across Riverside County and Orange County.
Author: Mike Escobedo
Version: 1.0
*/

  :root{
    --paper:#F4F1E9; --ink:#16231C; --money:#1F5C3F; --money-bright:#3E8E5C;
    --bill:#C9BE8C; --line: rgba(22,35,28,0.14);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{background:var(--paper); color:var(--ink); font-family:'Inter', sans-serif; -webkit-font-smoothing:antialiased;}
  h1,h2,h3{font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.01em;}
  a{color:inherit; text-decoration:none;}
  [data-counter]{font-variant-numeric: tabular-nums;}

  nav{display:flex; align-items:center; justify-content:space-between; padding:28px 64px; border-bottom:1px solid var(--line); max-width:1400px; margin:0 auto;}
  .brand{font-family:'Fraunces', serif; font-size:21px; font-weight:600;}
  .brand span{color:var(--money);}
  .navlinks{display:flex; gap:40px; font-size:14px;}
  .navlinks a{opacity:0.7; transition:opacity .2s;}
  .navlinks a:hover{opacity:1;}
  .cta-btn{background:var(--ink); color:var(--paper); padding:12px 24px; border-radius:2px; font-size:13px; letter-spacing:0.04em; text-transform:uppercase;}

  /* Mobile nav toggle — hidden on desktop, shown only below the nav
     breakpoint (see media query). Three-span hamburger, no icon font. */
  .nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:26px; height:20px; background:none; border:none; padding:0; cursor:pointer;}
  .nav-toggle span{display:block; width:100%; height:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease;}
  nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  nav.nav-open .nav-toggle span:nth-child(2){opacity:0;}
  nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .hero{max-width:1400px; margin:0 auto; padding:100px 64px 80px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center;}
  .eyebrow{font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--money); font-weight:600; margin-bottom:22px;}
  .hero h1{font-size:clamp(42px,4.6vw,68px); line-height:1.03; font-weight:500;}
  .hero h1 em{font-style:italic; color:var(--money);}
  .hero p.sub{margin-top:26px; max-width:460px; font-size:17px; line-height:1.6; opacity:0.78;}
  .hero-ctas{display:flex; gap:16px; margin-top:36px;}
  .btn-primary{background:var(--money); color:var(--paper); padding:15px 30px; border-radius:2px; font-size:14px;}
  .btn-secondary{border:1px solid var(--ink); padding:15px 30px; border-radius:2px; font-size:14px;}

  .hero-figure{background:var(--ink); border-radius:3px; aspect-ratio:4/5; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:36px;}
  .hero-figure video, .hero-figure img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .hero-figure::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(22,35,28,0.15) 0%, rgba(22,35,28,0.85) 100%); z-index:1;}
  .hero-figure-text{position:relative; z-index:2; color:var(--paper);}
  .hero-figure-text .num{font-family:'Fraunces', serif; font-size:46px; font-weight:500; color:var(--bill);}
  .hero-figure-text .lbl{font-size:13px; letter-spacing:0.06em; text-transform:uppercase; opacity:0.85; margin-top:4px;}

  .coverage{padding:100px 64px; max-width:1200px; margin:0 auto; text-align:center;}
  .coverage-eyebrow{font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--money); font-weight:600; margin-bottom:22px;}
  .coverage h2{font-size:clamp(30px,3.4vw,44px); max-width:720px; margin:0 auto 50px; line-height:1.15;}
  .coverage-cities{font-family:'Fraunces', serif; font-size:clamp(24px,3.4vw,38px); line-height:1.7; font-weight:500;}
  .coverage-cities .oc{color:var(--money-bright);}
  .coverage-cities .sep{font-family:'Inter'; opacity:0.28; margin:0 16px; font-size:20px;}
  .coverage-note{margin-top:44px; font-size:14px; opacity:0.55; max-width:480px; margin-left:auto; margin-right:auto;}

  .split{display:grid; grid-template-columns:0.9fr 1.4fr 0.9fr; gap:56px; padding:100px 64px; max-width:1400px; margin:0 auto; border-top:1px solid var(--line);}
  .split h2{font-size:32px; margin-bottom:24px;}
  .split p{font-size:16px; line-height:1.75; opacity:0.82; margin-bottom:18px;}
  .split-stat{border-top:2px solid var(--ink); padding-top:20px;}
  .split-stat .n{font-family:'Fraunces', serif; font-size:44px; color:var(--money);}
  .split-stat .l{font-size:13px; opacity:0.6; margin-top:6px;}
  .split-stat + .split-stat{margin-top:36px;}

  .stats{background:var(--ink); color:var(--paper); padding:70px 64px;}
  .stats-grid{max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .stat .n{font-family:'Fraunces', serif; font-size:42px; color:var(--bill);}
  .stat .l{font-size:13px; opacity:0.65; margin-top:6px;}

  .markets{padding:110px 64px; max-width:1400px; margin:0 auto;}
  .markets-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:16px; gap:20px;}
  .markets-head h2{font-size:34px; max-width:560px;}
  .markets-sub{font-size:14px; opacity:0.6; margin-bottom:56px;}
  .market-cols{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
  .market-col{border-top:2px solid var(--ink); padding-top:22px;}
  .market-col h3{font-size:13px; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:20px; color:var(--money);}
  .market-col.oc h3{color:var(--money-bright);}
  .market-list{list-style:none;}
  .market-list li{display:flex; justify-content:space-between; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line);}
  .market-list .city{font-family:'Fraunces', serif; font-size:20px;}
  .market-list .reach{font-size:13px; opacity:0.6; display:flex; align-items:baseline; gap:4px;}
  .market-list .reach .n{font-family:'Inter'; font-weight:600; color:var(--ink); font-size:15px;}

  .cta-band{background:var(--money); color:var(--paper); padding:100px 64px; text-align:center;}
  .cta-band h2{font-size:clamp(32px,3.6vw,50px); max-width:680px; margin:0 auto 30px;}
  .cta-band .btn-primary{background:var(--ink);}
  footer{padding:44px 64px; max-width:1400px; margin:0 auto; display:flex; justify-content:space-between; font-size:13px; opacity:0.6;}

  @media(max-width:900px){
    .hero{grid-template-columns:1fr;}
    .split{grid-template-columns:1fr;}
    .market-cols{grid-template-columns:1fr;}
    .stats-grid{grid-template-columns:1fr 1fr; gap:28px 20px;}
  }

  /* Six nav items + logo + CTA don't fit on one line below ~960px —
     collapse into a hamburger-triggered dropdown instead of wrapping/overflowing */
  @media(max-width:960px){
    nav{padding:18px 20px; flex-wrap:wrap; row-gap:16px;}
    .brand{font-size:16px; order:1;}
    .cta-btn{order:2; padding:10px 16px; font-size:12px;}
    .nav-toggle{display:flex; order:3;}
    .navlinks{order:4; flex-basis:100%; width:100%; display:none;}
    nav.nav-open .navlinks{display:block;}
    .navlinks ul{flex-direction:column; gap:0;}
    .navlinks li{width:100%;}
    .navlinks ul li a{display:block; padding:14px 4px; border-bottom:1px solid var(--line);}
  }

[data-counter]{font-variant-numeric: tabular-nums;}

/* ---------------------------------------------------------------
   Interior page templates (page.php, page-about.php, county pages,
   home.php, single.php, index.php fallback)
   --------------------------------------------------------------- */

/* wp_nav_menu() renders a <ul><li><a>; lay it out the same as the
   original hard-coded <a> links in nav */
.navlinks ul{display:flex; align-items:center; gap:40px; list-style:none; margin:0; padding:0;}
.navlinks li{list-style:none; margin:0; padding:0;}
.navlinks .current-menu-item > a{opacity:1;}

/* Generic interior-page hero: eyebrow + title, no figure */
.page-hero{max-width:1400px; margin:0 auto; padding:90px 64px 50px; border-bottom:1px solid var(--line);}
.page-hero h1{font-size:clamp(36px,4.2vw,58px); line-height:1.05; font-weight:500;}

/* Orange-County-flavored modifier: pair with .eyebrow, .cities-eyebrow,
   or .cta-band to swap the money-green accent for the brighter OC green */
.eyebrow.oc{color:var(--money-bright);}

/* County landing pages (page-riverside-county.php, page-orange-county.php) */
.market-hero{max-width:900px; margin:0 auto; padding:100px 64px 60px;}
.market-hero h1{font-size:clamp(34px,4.2vw,54px); line-height:1.08; max-width:760px;}
.market-hero .sub{margin-top:24px; font-size:17px; line-height:1.6; opacity:0.75; max-width:520px;}

.social-links{display:flex; gap:10px; flex-wrap:wrap;}
.social-links a{border:1px solid var(--ink); border-radius:2px; padding:10px 16px; font-size:12px; letter-spacing:0.03em;}
.social-links a:hover{background:var(--ink); color:var(--paper);}

/* Instagram embeds section — heading + social links on one row, the
   embeds themselves below. Instagram's own widget enforces a 326-540px
   width per video, so this sits full-width rather than in a sidebar. */
.ig-embeds-section{max-width:1400px; margin:0 auto; padding:0 64px 100px;}
.ig-embeds-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:32px;}
.ig-embeds-head h2{font-size:24px;}
.ig-embeds{display:flex; flex-wrap:wrap; gap:20px;}
.ig-embeds .instagram-media{margin:0 !important; flex:1 1 326px; max-width:480px;}

.market-proof{background:var(--ink); color:var(--paper); padding:60px 64px;}
.market-proof-grid{max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.market-proof .n{font-family:'Fraunces', serif; font-size:40px; color:var(--bill);}
.market-proof .l{font-size:13px; opacity:0.65; margin-top:8px;}

.market-narrative{max-width:720px; margin:0 auto; padding:100px 32px 40px;}
.market-narrative p{font-size:18px; line-height:1.8; opacity:0.85; margin-bottom:24px;}
.market-narrative p.lede{font-family:'Fraunces', serif; font-size:23px; line-height:1.5; opacity:1; font-weight:400; color:var(--ink);}

.market-cities{max-width:1400px; margin:0 auto; padding:40px 64px 100px;}
.market-cities .cities-eyebrow{font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--money); font-weight:600; margin-bottom:40px;}
.market-cities .cities-eyebrow.oc{color:var(--money-bright);}
.city-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.city-item{background:var(--paper); padding:32px 24px;}
.city-item h3{font-size:19px; margin-bottom:8px;}
.city-item p{font-size:13px; opacity:0.65; line-height:1.5;}

.market-services{max-width:1400px; margin:0 auto; padding:0 64px 110px;}
.market-services h2{font-size:30px; max-width:600px; margin-bottom:44px;}
.service-list{list-style:none; max-width:640px;}
.service-list li{font-family:'Fraunces', serif; font-size:19px; padding:16px 0; border-bottom:1px solid var(--line);}

/* Orange County's CTA band uses the brighter green instead of the
   default money green — everywhere else .cta-band stays as-is */
.cta-band.oc{background:var(--money-bright);}

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

/* Body copy / WYSIWYG content area shared by page.php, about, county pages,
   and the plain index.php fallback. Also where WPForms / MLS Import
   shortcode output lands via the_content(). */
.page-content, .basic-page{max-width:800px; margin:0 auto; padding:60px 64px 100px; font-size:17px; line-height:1.75;}
.page-content-narrow{padding-bottom:70px;}
.page-content p, .basic-page p{margin-bottom:22px; opacity:0.85;}
.page-content h2, .basic-page h2{font-size:28px; margin:44px 0 18px;}
.page-content h3, .basic-page h3{font-size:22px; margin:34px 0 14px;}
.page-content ul, .page-content ol, .basic-page ul, .basic-page ol{margin:0 0 22px 22px; line-height:1.8; opacity:0.85;}
.page-content a, .basic-page a{color:var(--money); text-decoration:underline;}
.page-content img, .page-content table, .page-content iframe,
.basic-page img, .basic-page table, .basic-page iframe{max-width:100%;}

/* Break a shortcode block (MLS/IDX grids, wide embeds) out of the narrow
   reading column when it's given one of these WP-standard alignment classes */
.alignwide{max-width:1100px; margin-left:calc(50% - 550px); margin-right:calc(50% - 550px);}
.alignfull{max-width:none; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);}

/* WPForms: align form fields/buttons with the theme's tokens instead of
   the plugin's default blue */
.wpforms-container{font-family:'Inter', sans-serif; margin-top:10px;}
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=number],
.wpforms-container select,
.wpforms-container textarea{
  border:1px solid var(--line) !important;
  border-radius:2px !important;
  font-family:'Inter', sans-serif !important;
  color:var(--ink) !important;
  background:var(--paper) !important;
}
.wpforms-container label,
.wpforms-container .wpforms-field-label{
  font-family:'Inter', sans-serif !important;
  color:var(--ink) !important;
}
.wpforms-container button[type=submit],
.wpforms-container .wpforms-submit{
  background:var(--money) !important;
  color:var(--paper) !important;
  border-radius:2px !important;
  border:none !important;
  font-family:'Inter', sans-serif !important;
  padding:15px 30px !important;
}

/* About page (page-about.php) */
.about-hero{max-width:1400px; margin:0 auto; padding:100px 64px 70px; display:grid; grid-template-columns:1.2fr 0.8fr; gap:60px; align-items:end;}
.about-hero h1{font-size:clamp(38px,4.8vw,64px); line-height:1.06;}
.about-hero h1 em{font-style:italic; color:var(--money);}
.about-hero-side{padding-bottom:6px;}
.about-hero-side p{font-size:16px; line-height:1.65; opacity:0.75;}
.about-headshot{width:100%; max-width:280px; aspect-ratio:4/5; object-fit:cover; border-radius:3px; display:block; margin-bottom:24px;}

.about-media{max-width:1400px; margin:0 auto; padding:0 64px 70px;}
.trailer{background:var(--ink); border-radius:3px; aspect-ratio:21/9; overflow:hidden; position:relative;}
.trailer iframe, .trailer video{width:100%; height:100%; border:0; display:block; object-fit:cover;}

.proof{background:var(--ink); color:var(--paper); padding:70px 64px;}
.proof-grid{max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.proof .n{font-family:'Fraunces', serif; font-size:44px; color:var(--bill);}
.proof .l{font-size:13px; opacity:0.65; margin-top:8px; letter-spacing:0.02em; line-height:1.4;}

.narrative{max-width:720px; margin:0 auto; padding:100px 32px 60px;}
.narrative p{font-size:18px; line-height:1.8; opacity:0.85; margin-bottom:24px;}
.narrative p.lede{font-family:'Fraunces', serif; font-size:24px; line-height:1.5; opacity:1; font-weight:400; color:var(--ink);}

.why{max-width:1400px; margin:0 auto; padding:60px 64px 110px;}
.why-head{max-width:640px; margin-bottom:60px;}
.why-head .eyebrow{margin-bottom:18px;}
.why-head h2{font-size:34px; line-height:1.2;}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.why-item{background:var(--paper); padding:44px 36px;}
.why-item .idx{font-family:'Fraunces', serif; font-size:14px; color:var(--money); margin-bottom:20px;}
.why-item h3{font-size:21px; margin-bottom:14px; line-height:1.25;}
.why-item p{font-size:15px; line-height:1.65; opacity:0.75;}

.credentials{border-top:1px solid var(--line); padding:44px 64px; max-width:1400px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; font-size:13px; opacity:0.6;}

@media(max-width:900px){
  .about-hero{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .proof-grid{grid-template-columns:1fr 1fr; gap:28px 20px;}
}

/* Journal index (home.php) */
.journal-list{max-width:900px; margin:0 auto; padding:20px 64px 100px;}
.journal-card{border-bottom:1px solid var(--line); padding:40px 0; display:grid; grid-template-columns:220px 1fr; gap:32px;}
.journal-card:first-child{padding-top:0;}
.journal-card-thumb img{width:100%; border-radius:2px; display:block; aspect-ratio:4/3; object-fit:cover;}
.journal-meta{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--money); margin-bottom:10px;}
.journal-card h2{font-size:26px; line-height:1.2; margin-bottom:12px;}
.journal-excerpt{font-size:15px; line-height:1.7; opacity:0.8; margin-bottom:14px;}
.journal-more{font-size:13px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink);}
.journal-pagination{display:flex; justify-content:space-between; margin-top:40px; font-size:14px;}
.journal-pagination .page-numbers{margin-right:14px; opacity:0.7;}
.journal-pagination .page-numbers.current{opacity:1; font-weight:600; color:var(--money);}

/* Single post (single.php) — narrower reading column, clear heading scale */
.single-post{max-width:680px; margin:0 auto; padding:90px 64px 100px;}
.single-post .post-header{margin-bottom:36px;}
.single-post .post-header .eyebrow{margin-bottom:14px;}
.single-post h1{font-size:clamp(32px,4vw,46px); line-height:1.12;}
.post-thumb{max-width:680px; margin:0 auto 50px; padding:0 64px;}
.post-thumb img{width:100%; border-radius:3px; display:block;}
.post-content{font-size:18px; line-height:1.8;}
.post-content p{margin-bottom:24px; opacity:0.88;}
.post-content h2{font-size:30px; margin:48px 0 18px; line-height:1.2;}
.post-content h3{font-size:23px; margin:38px 0 14px; line-height:1.25;}
.post-content h4{font-size:19px; margin:30px 0 12px;}
.post-content ul, .post-content ol{margin:0 0 24px 22px; line-height:1.85; opacity:0.88;}
.post-content blockquote{border-left:3px solid var(--money); padding-left:22px; margin:32px 0; font-style:italic; opacity:0.85;}
.post-content a{color:var(--money); text-decoration:underline;}
.post-content img{max-width:100%; border-radius:2px; margin:10px 0;}
.post-nav{max-width:680px; margin:60px auto 0; padding-top:30px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:14px;}

@media(max-width:900px){
  .page-content, .basic-page, .page-hero{padding-left:24px; padding-right:24px;}
  .journal-card{grid-template-columns:1fr;}
  .single-post, .post-thumb, .post-nav{padding-left:24px; padding-right:24px;}

  /* Nearly every section on the site was built with a fixed 64px side
     gutter, sized for desktop. Knock it down site-wide so content isn't
     squeezed into a narrow column on phones. */
  .hero, .coverage, .split, .stats, .markets, .cta-band, footer,
  .market-hero, .about-hero, .about-media, .proof, .why, .credentials,
  .market-proof, .market-cities, .market-services,
  .journal-list{
    padding-left:24px;
    padding-right:24px;
  }

  /* Instagram's widget has a hard 326px floor — give it tighter padding
     than the rest so it still fits on narrower Android phones (~360px) */
  .ig-embeds-section{padding-left:12px; padding-right:12px;}

  footer{flex-direction:column; gap:10px; text-align:center;}

  .photo-strip{grid-template-columns:1fr; max-width:340px;}

  .stat .n, .proof .n{font-size:32px;}
}

/* Move-Up Roadmap funnel (page-roadmap-landing.php, page-roadmap-quiz.php)
   — both use get_header('minimal')/get_footer('minimal'), no site nav */
.topbar{display:flex; align-items:center; justify-content:center; padding:30px 24px; position:relative;}
.lp-brand, .quiz-brand{font-family:'Fraunces', serif; font-size:17px; font-weight:600;}
.lp-brand span, .quiz-brand span{color:var(--money);}

.lp-hero{max-width:640px; margin:0 auto; padding:20px 24px 50px; text-align:center;}
.lp-hero .eyebrow{margin-left:auto; margin-right:auto;}
.lp-hero h1{font-size:clamp(30px,5.6vw,46px); line-height:1.15;}
.lp-hero h1 em{font-style:italic; color:var(--money);}
.lp-hero .sub{margin-top:20px; font-size:16px; line-height:1.6; opacity:0.75; max-width:460px; margin-left:auto; margin-right:auto;}

.hero-image{max-width:900px; margin:36px auto 0; aspect-ratio:16/9; border-radius:3px; overflow:hidden; background:var(--ink); position:relative;}
.hero-image img, .hero-image video{width:100%; height:100%; object-fit:cover; display:block;}

.lp-cta, .lp-cta-final{display:block; max-width:340px; margin:36px auto 14px; background:var(--money); color:var(--paper); text-align:center; padding:19px 24px; border-radius:2px; font-size:15px; letter-spacing:0.02em; font-weight:600;}
.lp-cta:hover, .lp-cta-final:hover{background:var(--ink);}
.lp-cta-final{margin:10px auto 60px;}
.lp-microcopy{text-align:center; font-size:12px; opacity:0.5;}

.photo-strip{max-width:900px; margin:0 auto; padding:50px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.photo-strip .photo{aspect-ratio:4/5; border-radius:3px; overflow:hidden; background:var(--ink); position:relative;}
.photo-strip .photo img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-strip .photo .img-note{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--paper); opacity:0.4; font-size:12px; text-align:center; padding:12px;}

.trust{background:var(--ink); color:var(--paper); padding:44px 24px;}
.trust-grid{max-width:640px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; text-align:center;}
.trust .n{font-family:'Fraunces', serif; font-size:28px; color:var(--bill);}
.trust .l{font-size:11px; opacity:0.6; margin-top:6px; letter-spacing:0.02em;}

.how{max-width:560px; margin:0 auto; padding:70px 24px;}
.how h2{text-align:center; font-size:24px; margin-bottom:44px;}
.how .step{display:flex; gap:20px; padding:20px 0; border-top:1px solid var(--line);}
.how .step .idx{font-family:'Fraunces', serif; font-size:15px; color:var(--money); flex-shrink:0; width:24px;}
.how .step h3{font-size:17px; margin-bottom:6px;}
.how .step p{font-size:14px; opacity:0.7; line-height:1.55;}

.lp-footer, .quiz-footer{max-width:640px; margin:0 auto; padding:30px 24px 50px; text-align:center; font-size:12px; opacity:0.5;}

/* Quiz-specific — .step here means a form panel, scoped under .quiz-wrap
   so it doesn't collide with .how .step above (a "how it works" row) */
.progress-wrap{max-width:420px; margin:0 auto; padding:0 24px 30px;}
.progress-track{height:3px; background:var(--line); border-radius:2px; overflow:hidden;}
.progress-fill{height:100%; background:var(--money); width:25%; transition:width .35s ease;}
.progress-label{font-size:12px; opacity:0.5; margin-top:10px; text-align:center;}

.quiz-wrap{max-width:520px; margin:0 auto; padding:20px 24px 100px; min-height:340px;}
.quiz-wrap .step{display:none;}
.quiz-wrap .step.active{display:block; animation:mmacFadeIn .35s ease;}
@keyframes mmacFadeIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

.quiz-wrap .step h2{font-size:clamp(22px,3.6vw,30px); line-height:1.25; text-align:center; margin-bottom:36px;}

.options{display:flex; flex-direction:column; gap:12px;}
.option{border:1.5px solid var(--line); border-radius:2px; padding:18px 20px; font-size:16px; text-align:left; background:var(--paper); cursor:pointer; transition:border-color .2s, background .2s;}
.option:hover{border-color:var(--money);}
.option.selected{border-color:var(--money); background:rgba(31,92,63,0.06); font-weight:600;}

.field-group{display:flex; flex-direction:column; gap:16px; margin-bottom:30px;}
.field-group label{font-size:13px; opacity:0.65;}
.field-group input{border:1.5px solid var(--line); border-radius:2px; padding:15px 16px; font-size:16px; font-family:'Inter'; background:var(--paper);}
.field-group input:focus{outline:none; border-color:var(--money);}

.nav-row{display:flex; justify-content:space-between; margin-top:36px;}
.btn-back{font-size:14px; opacity:0.5; background:none; border:none; cursor:pointer; font-family:'Inter', sans-serif;}
.btn-next{background:var(--money); color:var(--paper); border:none; padding:15px 30px; border-radius:2px; font-size:14px; font-weight:600; cursor:pointer; letter-spacing:0.02em; font-family:'Inter', sans-serif;}
.btn-next:disabled{opacity:0.35; cursor:not-allowed;}
.btn-next:not(:disabled):hover{background:var(--ink);}

.results{display:none;}
.results.active{display:block; animation:mmacFadeIn .4s ease;}
.results-eyebrow{font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--money); font-weight:600; text-align:center; margin-bottom:16px;}
.results h1{font-size:clamp(26px,4vw,36px); text-align:center; line-height:1.2; margin-bottom:40px;}

.results-card{background:var(--ink); color:var(--paper); border-radius:3px; padding:40px 32px; margin-bottom:24px;}
.results-row{display:flex; justify-content:space-between; align-items:baseline; padding:16px 0; border-bottom:1px solid rgba(244,241,233,0.12);}
.results-row:last-child{border-bottom:none;}
.results-row .rl{font-size:14px; opacity:0.65;}
.results-row .rv{font-family:'Fraunces', serif; font-size:17px; color:var(--bill);}

.results-note{font-size:14px; line-height:1.6; opacity:0.75; text-align:center; max-width:420px; margin:0 auto 30px;}
.results-cta{display:block; background:var(--money); color:var(--paper); text-align:center; padding:18px 24px; border-radius:2px; font-size:15px; font-weight:600; text-decoration:none;}
.results-cta:hover{background:var(--ink);}
.results-restart{display:block; text-align:center; font-size:13px; opacity:0.5; margin-top:18px; background:none; border:none; cursor:pointer; font-family:'Inter', sans-serif;}