/* Sunday Bounce — shared design system (brand guide v1.0) */
  /* ---------- Tokens (from Sunday Bounce brand guide v1.0) ---------- */
  :root {
    --rose:#bc7a78; --rose-dark:#a5645f; --rose-tint:#f4e1dd;
    --sage:#94a188; --sage-text:#5e6b54; --sage-dark:#77856b; --sage-bg:#e7ede1;
    --honey:#d9ae72; --honey-dark:#bd9155;
    --w25:#fdfbf8; --w100:#f3ece6; --w300:#d6cabc; --w500:#8c8177;
    --w700:#5a5149; --w900:#2e2823; --border:#e6ddd3; --dark:#221e1b;
    --ok:#6f8a63; --warn:#c79a54; --bad:#b5544a;
    --disp:'Bricolage Grotesque', sans-serif;
    --body:'Hanken Grotesk', sans-serif;
    --shadow-sm:0 1px 2px rgba(46,40,35,0.06);
    --shadow-md:0 8px 30px rgba(46,40,35,0.08);
    --shadow-lg:0 20px 60px rgba(46,40,35,0.12);
    --maxw:1120px;
  }

  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body {
    background:var(--w100); color:var(--w900);
    font-family:var(--body); font-size:17px; line-height:1.7;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  a { color:var(--rose); text-decoration:none; transition:color .18s ease; }
  a:hover { color:var(--rose-dark); }
  img { max-width:100%; display:block; }
  .disp { font-family:var(--disp); letter-spacing:-0.01em; }
  .wrap { max-width:var(--maxw); margin:0 auto; padding:0 32px; }
  .eyebrow {
    font-size:12px; font-weight:600; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--w500);
  }
  section { position:relative; }

  /* ---------- Castle mark ---------- */
  .logo { display:inline-flex; align-items:center; gap:12px; }
  .logo .wordmark {
    font-family:var(--disp); font-weight:600;
    letter-spacing:-0.02em; line-height:1.05; color:var(--w900);
    white-space:nowrap;
  }
  .mark { position:relative; flex:none; }
  .mark .ball, .mark .dome, .mark .door { position:absolute; }
  .mark .ball { top:0; right:2%; width:17%; aspect-ratio:1; border-radius:999px; background:var(--honey); }
  .mark .dome { bottom:0; left:0; width:100%; height:71%; border-radius:50% 50% 8% 8%; background:var(--rose); }
  .mark .door { bottom:0; left:50%; transform:translateX(-50%); width:20%; height:33%; border-radius:50% 50% 0 0; background:var(--w25); }
  /* reversed for dark surfaces */
  .mark.rev .dome { background:var(--w25); }
  .mark.rev .door { background:var(--dark); }
  .mark.rev .ball { background:var(--honey); }

  /* ---------- Buttons ---------- */
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--body); font-weight:600; font-size:15px;
    padding:14px 28px; border-radius:999px; border:1.5px solid transparent;
    cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
    white-space:nowrap;
  }
  .btn:active { transform:translateY(1px); }
  .btn-primary { background:var(--rose); color:var(--w25); box-shadow:var(--shadow-sm); }
  .btn-primary:hover { background:var(--rose-dark); color:var(--w25); }
  .btn-secondary { background:var(--w25); border-color:var(--w300); color:var(--w900); }
  .btn-secondary:hover { border-color:var(--sage); color:var(--sage-text); }
  .btn-ghost { background:transparent; color:var(--w900); padding:14px 20px; }
  .btn-ghost:hover { color:var(--rose); }
  .btn-lg { padding:17px 34px; font-size:16px; }

  /* ---------- Header ---------- */
  header {
    position:sticky; top:0; z-index:50;
    background:rgba(243,236,230,0.82); backdrop-filter:saturate(140%) blur(12px);
    border-bottom:1px solid transparent; transition:border-color .2s ease, box-shadow .2s ease;
  }
  header.scrolled { border-bottom-color:var(--border); box-shadow:var(--shadow-sm); }
  .nav { display:flex; align-items:center; justify-content:space-between; height:76px; }
  .nav-links { display:flex; align-items:center; gap:34px; }
  .nav-links a { color:var(--w700); font-weight:500; font-size:15px; }
  .nav-links a:hover { color:var(--rose); }
  .nav-cta { display:flex; align-items:center; gap:8px; }
  .nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; }
  .nav-toggle span { display:block; width:22px; height:2px; background:var(--w900); border-radius:2px; margin:4px 0; transition:.2s ease; }

  /* ---------- Hero ---------- */
  .hero { padding:72px 0 64px; overflow:hidden; }
  .hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
  .hero .tagpill {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--sage-bg); color:var(--sage-text);
    font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px; margin-bottom:24px;
  }
  .hero .tagpill .dot { width:8px; height:8px; border-radius:999px; background:var(--ok); }
  .hero h1 {
    font-family:var(--disp); font-weight:600; letter-spacing:-0.02em;
    font-size:clamp(40px, 5.4vw, 60px); line-height:1.05; color:var(--w900);
  }
  .hero .lede { font-size:19px; line-height:1.6; color:var(--w700); max-width:520px; margin-top:22px; }
  .hero-trust { display:flex; flex-wrap:wrap; gap:20px 28px; margin-top:30px; }
  .hero-trust .item { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--w700); font-weight:500; }
  .hero-trust .check { flex:none; width:20px; height:20px; border-radius:999px; background:var(--sage-bg); color:var(--sage-text); display:grid; place-items:center; }
  .hero-trust svg { width:12px; height:12px; }

  /* availability card */
  .avail-card {
    background:var(--w25); border-radius:24px; padding:32px;
    box-shadow:var(--shadow-lg); border:1px solid var(--border);
  }
  .avail-card h3 { font-family:var(--disp); font-weight:600; font-size:24px; letter-spacing:-0.01em; }
  .avail-card .sub { font-size:14px; color:var(--w500); margin-top:4px; }
  .field { margin-top:18px; }
  .field label { display:block; font-size:13px; font-weight:600; color:var(--w700); margin-bottom:7px; }
  .field input, .field select {
    width:100%; font-family:var(--body); font-size:15px; color:var(--w900);
    padding:13px 15px; border:1.5px solid var(--w300); border-radius:12px;
    background:var(--w25); transition:border-color .18s ease, box-shadow .18s ease; appearance:none;
  }
  .field input:focus, .field select:focus {
    outline:none; border-color:var(--rose); box-shadow:0 0 0 3px var(--rose-tint);
  }
  .field.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .avail-card .btn-primary { width:100%; margin-top:22px; }
  .avail-note { font-size:12.5px; color:var(--w500); text-align:center; margin-top:14px; }
  .avail-result { display:none; margin-top:20px; padding:18px 18px; border-radius:14px; background:var(--sage-bg); }
  .avail-result.show { display:block; animation:fade .3s ease; }
  .avail-result .rhead { display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:600; font-size:18px; color:var(--sage-text); }
  .avail-result .rdot { width:12px; height:12px; border-radius:999px; background:var(--ok); flex:none; }
  .avail-result p { font-size:14px; color:var(--w700); margin-top:8px; }
  @keyframes fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

  /* ---------- Logo strip / reassurance ---------- */
  .strip { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--w25); }
  .strip-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:26px 0; }
  .strip .item { display:flex; align-items:center; gap:11px; font-size:14.5px; color:var(--w700); font-weight:500; }
  .strip .item .ic { flex:none; width:34px; height:34px; border-radius:999px; background:var(--w100); display:grid; place-items:center; color:var(--rose); }
  .strip svg { width:18px; height:18px; }

  /* ---------- Generic section ---------- */
  .band { padding:96px 0; }
  .band-head { max-width:640px; margin-bottom:52px; }
  .band-head .eyebrow { color:var(--rose); }
  .band-head h2 {
    font-family:var(--disp); font-weight:600; letter-spacing:-0.02em;
    font-size:clamp(30px, 4vw, 42px); line-height:1.1; color:var(--w900); margin-top:14px;
  }
  .band-head p { font-size:17px; color:var(--w700); margin-top:16px; }
  .center { text-align:center; margin-left:auto; margin-right:auto; }

  /* ---------- The houses ---------- */
  .houses { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
  .house {
    background:var(--w25); border:1px solid var(--border); border-radius:24px;
    overflow:hidden; display:flex; flex-direction:column;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .house:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
  .house .art { position:relative; height:210px; display:grid; place-items:center; }
  .house .badge {
    position:absolute; top:14px; left:14px; background:var(--w25);
    color:var(--rose); font-size:11px; font-weight:600; letter-spacing:0.08em;
    text-transform:uppercase; padding:6px 12px; border-radius:999px; box-shadow:var(--shadow-sm);
  }
  .house .body { padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
  .house h3 { font-family:var(--disp); font-weight:600; font-size:23px; letter-spacing:-0.01em; }
  .house .desc { font-size:14.5px; color:var(--w700); margin-top:9px; flex:1; }
  .house .specs { display:flex; gap:16px; margin-top:18px; padding-top:18px; border-top:1px solid var(--w100); }
  .house .specs .s { font-size:12.5px; color:var(--w500); }
  .house .specs .s b { display:block; font-family:var(--disp); font-size:15px; color:var(--w900); font-weight:600; }
  .house .foot { display:flex; align-items:center; justify-content:space-between; margin-top:22px; }
  .house .price { font-family:var(--disp); font-weight:600; font-size:15px; color:var(--w900); }
  .house .price span { font-family:var(--body); font-weight:400; font-size:13px; color:var(--w500); }

  /* ---------- How it works ---------- */
  .how { background:var(--w25); }
  .steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; counter-reset:step; }
  .step { position:relative; }
  .step .num {
    font-family:var(--disp); font-weight:700; font-size:14px; color:var(--rose);
    width:40px; height:40px; border-radius:999px; background:var(--w100);
    display:grid; place-items:center; margin-bottom:20px;
  }
  .step h3 { font-family:var(--disp); font-weight:600; font-size:20px; letter-spacing:-0.01em; }
  .step p { font-size:14.5px; color:var(--w700); margin-top:9px; }

  /* ---------- Why / features ---------- */
  .features { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
  .feature { background:var(--w25); border:1px solid var(--border); border-radius:20px; padding:30px; }
  .feature .ic { width:44px; height:44px; border-radius:12px; background:var(--w100); display:grid; place-items:center; color:var(--rose); margin-bottom:18px; }
  .feature svg { width:22px; height:22px; }
  .feature h3 { font-family:var(--disp); font-weight:600; font-size:19px; letter-spacing:-0.01em; }
  .feature p { font-size:14.5px; color:var(--w700); margin-top:8px; }

  /* ---------- Pricing / included ---------- */
  .price-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:32px; align-items:stretch; }
  .price-hero {
    background:var(--w900); color:var(--w25); border-radius:24px; padding:44px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .price-hero .eyebrow { color:var(--honey); }
  .price-hero .big { font-family:var(--disp); font-weight:600; font-size:56px; letter-spacing:-0.02em; line-height:1; margin:16px 0 6px; }
  .price-hero .big span { font-size:20px; color:var(--w300); font-weight:400; }
  .price-hero p { color:var(--w300); font-size:15px; max-width:340px; }
  .price-hero .btn { margin-top:26px; align-self:flex-start; }
  .included { background:var(--w25); border:1px solid var(--border); border-radius:24px; padding:40px; }
  .included h3 { font-family:var(--disp); font-weight:600; font-size:22px; letter-spacing:-0.01em; margin-bottom:6px; }
  .included .lead { font-size:14.5px; color:var(--w500); margin-bottom:22px; }
  .inc-list { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
  .inc-list li { display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--w900); }
  .inc-list .tick { flex:none; width:22px; height:22px; border-radius:999px; background:var(--sage-bg); color:var(--sage-text); display:grid; place-items:center; margin-top:1px; }
  .inc-list svg { width:12px; height:12px; }

  /* ---------- Testimonials ---------- */
  .quotes { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
  .quote { background:var(--w25); border:1px solid var(--border); border-radius:20px; padding:30px; display:flex; flex-direction:column; }
  .quote .stars { display:flex; gap:3px; color:var(--honey); margin-bottom:16px; }
  .quote .stars svg { width:16px; height:16px; }
  .quote p { font-size:15.5px; color:var(--w900); line-height:1.6; flex:1; }
  .quote .who { display:flex; align-items:center; gap:12px; margin-top:22px; }
  .quote .av { width:40px; height:40px; border-radius:999px; flex:none; display:grid; place-items:center; font-family:var(--disp); font-weight:600; font-size:15px; color:var(--w25); }
  .quote .who b { display:block; font-size:14px; color:var(--w900); font-weight:600; }
  .quote .who span { font-size:13px; color:var(--w500); }

  /* ---------- FAQ ---------- */
  .faq-grid { display:grid; grid-template-columns:0.7fr 1.3fr; gap:48px; align-items:start; }
  .faq-list { border-top:1px solid var(--border); }
  .faq-item { border-bottom:1px solid var(--border); }
  .faq-q {
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:24px 0; font-family:var(--disp); font-weight:600; font-size:18px;
    letter-spacing:-0.01em; color:var(--w900);
  }
  .faq-q .pm { flex:none; width:26px; height:26px; border-radius:999px; background:var(--w100); color:var(--rose); display:grid; place-items:center; transition:.2s ease; font-size:18px; line-height:1; }
  .faq-item.open .faq-q .pm { background:var(--rose); color:var(--w25); transform:rotate(45deg); }
  .faq-a { max-height:0; overflow:hidden; transition:max-height .28s ease; }
  .faq-a p { font-size:15px; color:var(--w700); padding:0 40px 24px 0; }

  /* ---------- Final CTA ---------- */
  .cta-band { background:var(--w900); border-radius:32px; padding:72px 48px; text-align:center; position:relative; overflow:hidden; }
  .cta-band .glow { position:absolute; width:420px; height:420px; border-radius:999px; filter:blur(80px); opacity:.35; }
  .cta-band .g1 { background:var(--rose); top:-140px; left:-80px; }
  .cta-band .g2 { background:var(--sage); bottom:-160px; right:-60px; opacity:.28; }
  .cta-band .inner { position:relative; z-index:1; }
  .cta-band h2 { font-family:var(--disp); font-weight:600; font-size:clamp(32px,4.4vw,48px); letter-spacing:-0.02em; color:var(--w25); line-height:1.05; }
  .cta-band p { color:var(--w300); font-size:18px; margin:18px auto 0; max-width:520px; }
  .cta-band .btns { display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
  .cta-band .btn-secondary { background:transparent; border-color:rgba(253,251,248,0.28); color:var(--w25); }
  .cta-band .btn-secondary:hover { border-color:var(--w25); color:var(--w25); }

  /* ---------- Footer ---------- */
  footer { padding:72px 0 40px; }
  .foot-top { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--border); }
  .foot-brand .wordmark { font-size:22px; }
  .foot-brand p { font-size:14.5px; color:var(--w700); margin-top:18px; max-width:280px; }
  .foot-col h4 { font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--w500); margin-bottom:16px; }
  .foot-col a { display:block; color:var(--w700); font-size:15px; margin-bottom:11px; font-weight:500; }
  .foot-col a:hover { color:var(--rose); }
  .foot-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:28px; gap:16px; flex-wrap:wrap; }
  .foot-bottom span { font-size:13.5px; color:var(--w500); }
  .foot-social { display:flex; gap:10px; }
  .foot-social a { width:38px; height:38px; border-radius:999px; background:var(--w25); border:1px solid var(--border); display:grid; place-items:center; color:var(--w700); }
  .foot-social a:hover { color:var(--rose); border-color:var(--rose); }
  .foot-social svg { width:17px; height:17px; }

  .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity:1; transform:none; }

  /* ---------- Responsive ---------- */
  @media (max-width:900px) {
    .hero-grid { grid-template-columns:1fr; gap:40px; }
    .houses, .features, .quotes { grid-template-columns:1fr; }
    .steps { grid-template-columns:1fr 1fr; gap:32px 24px; }
    .price-grid, .faq-grid { grid-template-columns:1fr; gap:24px; }
    .foot-top { grid-template-columns:1fr 1fr; gap:32px; }
    .band { padding:72px 0; }
  }
  @media (max-width:640px) {
    .wrap { padding:0 20px; }
    .nav-links { display:none; }
    .nav-links.open {
      display:flex; position:absolute; top:76px; left:0; right:0; flex-direction:column;
      align-items:flex-start; gap:0; background:var(--w25); border-bottom:1px solid var(--border);
      padding:8px 20px 16px; box-shadow:var(--shadow-md);
    }
    .nav-links.open a { padding:12px 0; width:100%; border-bottom:1px solid var(--w100); }
    .nav-toggle { display:block; }
    .nav-cta .btn-ghost { display:none; }
    .steps { grid-template-columns:1fr; }
    .inc-list { grid-template-columns:1fr; }
    .foot-top { grid-template-columns:1fr; }
    .cta-band { padding:56px 24px; }
    .field.two { grid-template-columns:1fr; }
  }
  @media (prefers-reduced-motion:reduce) {
    * { scroll-behavior:auto !important; }
    .reveal { transition:none; opacity:1; transform:none; }
  }