<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="The Middle Shelf Holdings LLC — Premium resources for marriage, family, personal finance, and leadership. Home of The PreMarriage Counselor app." />
  <meta name="keywords" content="premarriage counseling, marriage resources, family resources, personal finance, leadership, speaking engagements, Gary Wallace, Donna Wallace" />
  <meta name="author" content="The Middle Shelf Holdings LLC" />
  <title>The Middle Shelf</title>

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Cinzel:wght@400;500;600&display=swap" rel="stylesheet" />

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

    :root {
      /* ── Brand Palette (from Middle_Shelf_Color_Palatte_.pptx) ── */
      --blue:        #1E5FFF;
      --blue-mid:    #1A4FD6;
      --blue-dk:     #1238A0;
      --blue-lt:     #E8F0FF;
      --blue-soft:   #C8D8FF;

      --orange:      #E97132;
      --orange-mid:  #C95D22;
      --orange-dk:   #A04818;
      --orange-lt:   #FFF4DD;
      --orange-soft: #FFD9B0;

      --green:       #169632;
      --green-mid:   #117826;
      --green-dk:    #0B5C1D;
      --green-lt:    #E9F9EE;
      --green-soft:  #B8ECC8;

      --white:       #FFFFFF;
      --dark:        #333333;
      --ink:         #1A2035;
      --ink-mid:     #3D4560;
      --muted:       #6B7490;
      --surface:     #F6F8FF;
      --border:      rgba(30,40,80,0.10);
      --border-blue: rgba(30,95,255,0.20);

      --radius-sm:   6px;
      --radius-md:   12px;
      --radius-lg:   20px;
      --shadow-sm:   0 2px 8px rgba(30,40,80,0.08);
      --shadow-md:   0 6px 24px rgba(30,40,80,0.12);
      --shadow-lg:   0 16px 48px rgba(30,40,80,0.16);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--white);
      color: var(--dark);
      line-height: 1.7;
      font-size: 16px;
      overflow-x: hidden;
    }

    .container { max-width: 1140px; margin: 0 auto; padding: 0 2rem; }

    /* ── BADGES ── */
    .badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 100px;
      background: var(--blue-lt);
      color: var(--blue-dk);
      border: 1px solid var(--blue-soft);
    }
    .badge-orange { background: var(--orange-lt); color: var(--orange-dk); border-color: var(--orange-soft); }
    .badge-green  { background: var(--green-lt);  color: var(--green-dk);  border-color: var(--green-soft); }

    /* ── BUTTONS ── */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 13px 26px; border-radius: var(--radius-sm);
      font-family: 'DM Sans', sans-serif; font-size: 15px;
      font-weight: 500; cursor: pointer; text-decoration: none;
      transition: all 0.2s ease; border: none;
    }
    .btn-primary { background: var(--blue); color: var(--white); }
    .btn-primary:hover { background: var(--blue-mid); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(30,95,255,0.30); }
    .btn-orange  { background: var(--orange); color: var(--white); }
    .btn-orange:hover  { background: var(--orange-mid); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(233,113,50,0.35); }
    .btn-green   { background: var(--green); color: var(--white); }
    .btn-green:hover   { background: var(--green-mid); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(22,150,50,0.30); }
    .btn-outline { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }
    .btn-outline:hover { background: var(--blue); color: var(--white); transform: translateY(-1px); }
    .btn-ghost   { background: rgba(255,255,255,0.10); color: var(--white); border: 1.5px solid rgba(255,255,255,0.35); }
    .btn-ghost:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.65); }

    /* ════════════════════════
       NAVIGATION
    ════════════════════════ */
    #site-header {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
    }
    .nav-inner {
      display: flex; align-items: center;
      justify-content: space-between; height: 70px;
    }
    .logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; }
    .logo-top { font-family: 'Cinzel', serif; font-size: 16px; font-weight: 600; color: var(--blue); letter-spacing: 0.04em; }
    .logo-sub { font-size: 9.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); }

    .nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
    .nav-links a {
      display: block; padding: 8px 13px; font-size: 14px; font-weight: 500;
      color: var(--ink-mid); text-decoration: none; border-radius: var(--radius-sm);
      transition: all 0.15s;
    }
    .nav-links a:hover  { background: var(--blue-lt); color: var(--blue); }
    .nav-links a.active { color: var(--blue); font-weight: 600; }

    .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
    .hamburger span { display: block; width: 24px; height: 2px; background: var(--dark); border-radius: 2px; }

    /* ════════════════════════
       HERO
    ════════════════════════ */
    #hero {
      background: var(--blue); position: relative;
      overflow: hidden; padding: 100px 0 84px;
    }
    #hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 55% 70% at 88% 35%, rgba(255,255,255,0.07) 0%, transparent 65%),
        radial-gradient(ellipse 45% 55% at 10% 85%, rgba(233,113,50,0.20) 0%, transparent 60%);
    }
    .hero-ring {
      position: absolute; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.07);
      pointer-events: none;
    }
    .hero-ring-1 { width: 540px; height: 540px; top: -160px; right: -160px; }
    .hero-ring-2 { width: 380px; height: 380px; top: -90px; right: -90px; }
    .hero-ring-3 { width: 220px; height: 220px; top: -20px; right: -20px; }

    .hero-inner {
      position: relative;
      display: grid; grid-template-columns: 1fr 400px;
      gap: 64px; align-items: center;
    }
    .hero-eyebrow {
      display: flex; align-items: center;
      gap: 12px; margin-bottom: 22px;
    }
    .hero-pip { width: 32px; height: 2px; background: var(--orange); border-radius: 2px; }
    .hero-eyebrow-text {
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(255,255,255,0.6);
    }
    .hero-headline {
      font-family: 'Cormorant Garamond', serif;
      font-size: 66px; font-weight: 300;
      line-height: 1.05; color: var(--white); margin-bottom: 22px;
    }
    .hero-headline em { font-style: italic; color: #FFD0A0; }
    .hero-desc { font-size: 17px; color: rgba(255,255,255,0.70); line-height: 1.8; margin-bottom: 36px; max-width: 480px; }
    .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

    /* Hero App Card */
    .hero-card {
      background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.15);
      border-radius: var(--radius-lg); padding: 32px;
    }
    .hc-badge {
      font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--orange);
      padding: 4px 10px; background: rgba(233,113,50,0.15);
      border: 1px solid rgba(233,113,50,0.35); border-radius: 100px;
      display: inline-block; margin-bottom: 14px;
    }
    .hero-card h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 26px; font-weight: 500;
      color: var(--white); line-height: 1.2; margin-bottom: 12px;
    }
    .hero-card p { font-size: 14px; color: rgba(255,255,255,0.60); line-height: 1.7; margin-bottom: 18px; }
    .hc-topics { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
    .hc-topics li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.78); }
    .hc-topics li::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
    .hc-link { display: inline-flex; align-items: center; gap: 6px; color: #FFD0A0; font-size: 14px; font-weight: 500; text-decoration: none; }
    .hc-link:hover { text-decoration: underline; }
    .hc-link svg { transition: transform 0.15s; }
    .hc-link:hover svg { transform: translateX(3px); }

    /* ════════════════════════
       SECTION HEADER
    ════════════════════════ */
    .section-header { margin-bottom: 52px; }
    .section-header .badge { margin-bottom: 14px; }
    .section-header h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 46px; font-weight: 400;
      line-height: 1.1; color: var(--ink); margin-bottom: 14px;
    }
    .section-header h2 em { font-style: italic; color: var(--blue); }
    .section-header p { font-size: 17px; color: var(--muted); max-width: 560px; }
    .section-header.centered { text-align: center; }
    .section-header.centered p { margin: 0 auto; }

    /* ════════════════════════
       FEATURED APP
    ════════════════════════ */
    #premarriage { padding: 96px 0; background: var(--white); }

    .app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }

    .app-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 50px; font-weight: 400;
      line-height: 1.05; color: var(--ink); margin-bottom: 8px;
    }
    .app-title em { font-style: italic; color: var(--blue); }
    .app-tagline {
      font-size: 13px; font-weight: 600; letter-spacing: 0.10em;
      text-transform: uppercase; color: var(--orange); margin-bottom: 22px;
    }
    .app-desc { font-size: 16px; color: var(--muted); line-height: 1.85; margin-bottom: 20px; }

    .store-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
    .store-badge {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 10px 16px; border: 1.5px solid var(--border);
      border-radius: var(--radius-sm); text-decoration: none;
      background: var(--white); transition: all 0.15s;
    }
    .store-badge:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
    .store-badge.soon  { opacity: 0.5; cursor: not-allowed; }
    .store-badge.soon:hover { transform: none; box-shadow: none; border-color: var(--border); }
    .sb-icon { font-size: 22px; line-height: 1; }
    .sb-text { display: flex; flex-direction: column; }
    .sb-label { font-size: 10px; color: var(--muted); }
    .sb-name  { font-size: 14px; font-weight: 600; color: var(--ink); }

    .hiw-label {
      font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--blue); margin-bottom: 18px;
    }
    .how-steps { display: flex; flex-direction: column; gap: 16px; }
    .how-step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
    .step-num {
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--blue-lt); border: 1px solid var(--blue-soft);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Cormorant Garamond', serif;
      font-size: 18px; font-weight: 600; color: var(--blue); flex-shrink: 0;
    }
    .step-text h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
    .step-text p  { font-size: 14px; color: var(--muted); line-height: 1.6; }

    /* Topic cards (right column) */
    .topic-item {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius-md); padding: 18px 20px;
      display: flex; gap: 14px; align-items: flex-start;
      transition: box-shadow 0.2s, border-color 0.2s;
    }
    .topic-item:hover { box-shadow: var(--shadow-sm); border-color: var(--blue-soft); }
    .topic-icon {
      width: 42px; height: 42px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 19px; flex-shrink: 0;
    }
    .ti-blue   { background: var(--blue-lt); }
    .ti-orange { background: var(--orange-lt); }
    .ti-green  { background: var(--green-lt); }
    .topic-item h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
    .topic-item p  { font-size: 13px; color: var(--muted); line-height: 1.6; }

    .couple-note {
      margin-top: 22px; padding: 18px 20px;
      background: var(--orange-lt); border-radius: var(--radius-md);
      border-left: 3px solid var(--orange);
    }
    .couple-note p { font-size: 14px; color: var(--ink-mid); line-height: 1.7; }
    .couple-note strong { color: var(--orange-mid); }

    /* ════════════════════════
       COMING SOON — APPS
    ════════════════════════ */
    #coming-soon { padding: 80px 0; background: var(--blue-lt); }

    .coming-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
    .coming-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius-md); padding: 30px;
      position: relative; overflow: hidden; transition: box-shadow 0.2s;
    }
    .coming-card:hover { box-shadow: var(--shadow-md); }
    .coming-card::after {
      content: 'Coming Soon';
      position: absolute; top: 20px; right: -28px;
      background: var(--blue); color: var(--white);
      font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; padding: 5px 42px;
      transform: rotate(45deg);
    }
    .cc-icon {
      width: 54px; height: 54px; border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      font-size: 26px; margin-bottom: 18px;
    }
    .coming-card h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 22px; font-weight: 500; color: var(--ink);
      margin-bottom: 8px; line-height: 1.2;
    }
    .coming-card p { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 18px; }
    .notify-btn {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 13px; font-weight: 500; color: var(--blue);
      background: none; border: none; padding: 0;
      font-family: inherit; cursor: pointer;
    }
    .notify-btn:hover { text-decoration: underline; }

    /* ════════════════════════
       BOOKS
    ════════════════════════ */
    #books { padding: 80px 0; background: var(--white); }

    .books-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

    .book-stack { position: relative; height: 300px; }
    .book-spine {
      position: absolute; width: 168px; height: 228px;
      border-radius: 3px 10px 10px 3px; padding: 18px;
      font-family: 'Cormorant Garamond', serif;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center; line-height: 1.3;
      box-shadow: 4px 6px 20px rgba(30,40,80,0.18);
    }
    .book-1 { background: var(--blue);   color: var(--white); top: 0;  left: 10px;  transform: rotate(-5deg); }
    .book-2 { background: var(--orange); color: var(--white); top: 28px; left: 158px; transform: rotate(2deg); }
    .book-3 { background: var(--green);  color: var(--white); top: 60px; left: 306px; transform: rotate(-2deg); }
    .book-spine h5 { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
    .book-spine span { font-size: 10px; opacity: 0.7; letter-spacing: 0.08em; text-transform: uppercase; }
    .books-cs { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; }

    .book-row {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 0; border-bottom: 1px solid var(--border);
    }
    .book-row:last-of-type { border-bottom: none; }
    .book-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .book-row span { font-size: 15px; color: var(--ink-mid); flex: 1; }

    /* ════════════════════════
       SPEAKING
    ════════════════════════ */
    #speaking { padding: 80px 0; background: var(--blue); }

    .speaking-inner { display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: center; }

    .speaking-eyebrow {
      display: flex; align-items: center; gap: 10px;
      font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
      text-transform: uppercase; color: rgba(255,255,255,0.50);
      margin-bottom: 18px;
    }
    .speaking-eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: var(--orange); border-radius: 2px; }

    .speaking-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 50px; font-weight: 300; color: var(--white);
      line-height: 1.1; margin-bottom: 20px;
    }
    .speaking-title em { font-style: italic; color: #FFD0A0; }
    .speaking-desc { font-size: 16px; color: rgba(255,255,255,0.65); line-height: 1.8; margin-bottom: 28px; }
    .speaking-actions { display: flex; gap: 14px; flex-wrap: wrap; }

    .speakers-card {
      background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.14);
      border-radius: var(--radius-lg); padding: 28px;
    }
    .sc-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
      text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 18px;
    }
    .speaker-row {
      display: flex; align-items: center; gap: 14px;
      padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .speaker-row:last-of-type { border-bottom: none; }
    .speaker-av {
      width: 46px; height: 46px; border-radius: 50%;
      background: rgba(233,113,50,0.22); border: 1px solid rgba(233,113,50,0.40);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Cinzel', serif; font-size: 15px; font-weight: 600;
      color: #FFD0A0; flex-shrink: 0;
    }
    .speaker-info h4 { font-size: 15px; font-weight: 500; color: var(--white); }
    .speaker-info p  { font-size: 13px; color: rgba(255,255,255,0.50); }

    .topic-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
    .pill {
      font-size: 11px; padding: 4px 10px; border-radius: 100px;
      background: rgba(233,113,50,0.14); border: 1px solid rgba(233,113,50,0.30);
      color: #FFD0A0;
    }
    .booking-note {
      margin-top: 18px; padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,0.09);
      text-align: center; font-size: 11px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(255,255,255,0.32);
    }

    /* ════════════════════════
       ABOUT
    ════════════════════════ */
    #about { padding: 96px 0; background: var(--white); }

    .about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }

    .about-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 46px; font-weight: 400; color: var(--ink);
      line-height: 1.1; margin-bottom: 28px;
    }
    .about-title em { font-style: italic; color: var(--blue); }

    .about-pull {
      font-family: 'Cormorant Garamond', serif;
      font-size: 26px; font-weight: 400; font-style: italic;
      color: var(--blue); line-height: 1.55;
      padding: 24px 26px;
      border-left: 3px solid var(--orange);
      background: var(--blue-lt); border-radius: 0 var(--radius-md) var(--radius-md) 0;
      margin-bottom: 26px;
    }
    .about-text { font-size: 16px; color: var(--muted); line-height: 1.85; margin-bottom: 16px; }

    .values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .value-card {
      border-radius: var(--radius-md); padding: 20px;
      border: 1px solid var(--border);
    }
    .vc-blue   { background: var(--blue-lt);   border-color: var(--blue-soft); }
    .vc-orange { background: var(--orange-lt); border-color: var(--orange-soft); }
    .vc-green  { background: var(--green-lt);  border-color: var(--green-soft); }
    .vc-gray   { background: var(--surface); }
    .value-card .vi    { font-size: 22px; display: block; margin-bottom: 10px; }
    .value-card h4     { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
    .value-card p      { font-size: 13px; color: var(--muted); line-height: 1.6; }

    .company-box {
      margin-top: 22px; padding: 20px 22px;
      background: var(--surface); border-radius: var(--radius-md);
      border: 1px solid var(--border);
    }
    .company-box h5 {
      font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
    }
    .company-box p { font-size: 14px; color: var(--ink-mid); line-height: 1.9; }
    .company-box a { color: var(--blue); font-weight: 500; text-decoration: none; }
    .company-box a:hover { text-decoration: underline; }

    /* ════════════════════════
       CONTACT
    ════════════════════════ */
    #contact { padding: 80px 0; background: var(--orange-lt); }

    .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }

    .contact-item {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 18px 0; border-bottom: 1px solid rgba(30,40,80,0.09);
    }
    .contact-item:last-child { border-bottom: none; }
    .ci-icon {
      width: 42px; height: 42px; border-radius: var(--radius-sm);
      background: var(--white); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; flex-shrink: 0;
    }
    .contact-item h4 {
      font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
    }
    .contact-item p, .contact-item a { font-size: 15px; color: var(--ink); text-decoration: none; line-height: 1.5; }
    .contact-item a:hover { color: var(--blue); }

    .contact-form {
      background: var(--white); border: 1px solid rgba(30,40,80,0.10);
      border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm);
    }
    .contact-form h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 28px; font-weight: 500; color: var(--ink); margin-bottom: 24px;
    }
    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%; padding: 11px 14px;
      border: 1.5px solid var(--border); border-radius: var(--radius-sm);
      font-family: 'DM Sans', sans-serif; font-size: 15px;
      color: var(--ink); background: var(--surface);
      transition: border-color 0.15s, box-shadow 0.15s; outline: none;
    }
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(30,95,255,0.08);
      background: var(--white);
    }
    .form-group textarea { min-height: 96px; resize: vertical; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

    .form-success {
      display: none; text-align: center; padding: 28px;
      background: var(--green-lt); border-radius: var(--radius-md);
      border: 1px solid var(--green-soft);
    }
    .form-success .fs-icon { font-size: 36px; margin-bottom: 12px; }
    .form-success h4 { font-size: 18px; font-weight: 600; color: var(--green-dk); margin-bottom: 6px; }
    .form-success p  { font-size: 14px; color: var(--green-mid); }

    /* ════════════════════════
       FOOTER
    ════════════════════════ */
    footer { background: var(--ink); padding: 60px 0 32px; }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 44px; }
    .footer-logo-top { font-family: 'Cinzel', serif; font-size: 17px; font-weight: 600; color: var(--white); letter-spacing: 0.04em; }
    .footer-logo-sub { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-top: 2px; display: block; }
    .footer-brand p { font-size: 14px; color: rgba(255,255,255,0.42); line-height: 1.75; margin-top: 14px; max-width: 280px; }

    .footer-col h4 {
      font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
      text-transform: uppercase; color: rgba(255,255,255,0.82); margin-bottom: 16px;
    }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-col a { font-size: 14px; color: rgba(255,255,255,0.42); text-decoration: none; transition: color 0.15s; }
    .footer-col a:hover { color: var(--orange); }

    .footer-bottom {
      padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.07);
      display: flex; justify-content: space-between;
      align-items: center; flex-wrap: wrap; gap: 12px;
    }
    .footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.28); }
    .footer-legal { display: flex; gap: 20px; }
    .footer-legal a { font-size: 13px; color: rgba(255,255,255,0.28); text-decoration: none; }
    .footer-legal a:hover { color: rgba(255,255,255,0.60); }

    /* ════════════════════════
       MOBILE NAV
    ════════════════════════ */
    .mobile-nav {
      display: none; position: fixed; inset: 0;
      background: var(--white); z-index: 200;
      padding: 32px; flex-direction: column; gap: 4px;
    }
    .mobile-nav.open { display: flex; }
    .mobile-close { align-self: flex-end; font-size: 28px; background: none; border: none; cursor: pointer; color: var(--dark); margin-bottom: 20px; line-height: 1; }
    .mobile-nav a {
      display: block; padding: 18px 0;
      font-family: 'Cormorant Garamond', serif;
      font-size: 32px; font-weight: 400;
      color: var(--ink); text-decoration: none;
      border-bottom: 1px solid var(--border);
    }

    /* ════════════════════════
       RESPONSIVE
    ════════════════════════ */
    @media (max-width: 1024px) {
      .hero-inner      { grid-template-columns: 1fr; }
      .hero-headline   { font-size: 52px; }
      .hero-card       { display: none; }
      .app-grid        { grid-template-columns: 1fr; gap: 48px; }
      .coming-grid     { grid-template-columns: 1fr 1fr; }
      .books-layout    { grid-template-columns: 1fr; }
      .book-stack      { display: none; }
      .speaking-inner  { grid-template-columns: 1fr; }
      .about-layout    { grid-template-columns: 1fr; }
      .contact-layout  { grid-template-columns: 1fr; }
      .footer-grid     { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .hero-headline   { font-size: 40px; }
      .section-header h2 { font-size: 34px; }
      .coming-grid     { grid-template-columns: 1fr; }
      .nav-links       { display: none; }
      .hamburger       { display: flex; }
      .nav-cta .btn    { display: none; }
      .app-title       { font-size: 38px; }
      .speaking-title  { font-size: 36px; }
      .footer-grid     { grid-template-columns: 1fr; }
      .form-row        { grid-template-columns: 1fr; }
      .values-grid     { grid-template-columns: 1fr; }
      #hero            { padding: 72px 0 60px; }
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fu { animation: fadeUp 0.65s ease both; }
    .d1 { animation-delay: 0.10s; }
    .d2 { animation-delay: 0.20s; }
    .d3 { animation-delay: 0.32s; }
    .d4 { animation-delay: 0.44s; }
  </style>
</head>
<body>

<!-- ══════════════════════════════════
     NAVIGATION
══════════════════════════════════ -->
<header id="site-header">
  <div class="container">
    <nav class="nav-inner">
      <a href="#hero" class="logo">
        <span class="logo-top">The Middle Shelf</span>
        <span class="logo-sub"> </span>
      </a>

      <ul class="nav-links">
        <li><a href="#hero">Home</a></li>
        <li><a href="#premarriage">Apps</a></li>
        <li><a href="#books">Books</a></li>
        <li><a href="#speaking">Speaking</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>

      <div class="nav-cta" style="display:flex;align-items:center;gap:12px;">
        <a href="https://bepremarriagecounselor.themiddleshelf.com/login"
           class="btn btn-primary" target="_blank" rel="noopener">Launch App</a>
        <button class="hamburger" id="hamburger-btn" aria-label="Menu">
          <span></span><span></span><span></span>
        </button>
      </div>
    </nav>
  </div>
</header>

<!-- Mobile Nav -->
<div class="mobile-nav" id="mobile-nav">
  <button class="mobile-close" id="mobile-close">✕</button>
  <a href="#hero"        onclick="closeMobile()">Home</a>
  <a href="#premarriage" onclick="closeMobile()">Apps</a>
  <a href="#books"       onclick="closeMobile()">Books</a>
  <a href="#speaking"    onclick="closeMobile()">Speaking</a>
  <a href="#about"       onclick="closeMobile()">About</a>
  <a href="#contact"     onclick="closeMobile()">Contact</a>
</div>


<!-- ══════════════════════════════════
     HERO
══════════════════════════════════ -->
<section id="hero">
  <div class="hero-ring hero-ring-1"></div>
  <div class="hero-ring hero-ring-2"></div>
  <div class="hero-ring hero-ring-3"></div>
  <div class="container">
    <div class="hero-inner">

      <div>
        <div class="hero-eyebrow fu">
          <span class="hero-pip"></span>
          <span class="hero-eyebrow-text">The Middle Shelf </span>
        </div>
        <h1 class="hero-headline fu d1">
          Resources Built<br>for <em>Real Life</em><br>&amp; Lasting Bonds.
        </h1>
        <p class="hero-desc fu d2">
          Premium tools, guided experiences, and expert voices for the moments that shape who you are — as a partner, a family, a leader, and a steward of your finances.
        </p>
        <div class="hero-actions fu d3">
          <a href="#premarriage" class="btn btn-orange">Explore Our App</a>
          <a href="#about" class="btn btn-ghost">Learn More</a>
        </div>
      </div>

      <div class="hero-card fu d4">
        <div class="hc-badge">Featured App — Now Available</div>
        <h3>The PreMarriage Counselor</h3>
        <p>A structured digital platform where certified counselors guide couples through five essential relationship pillars — before they say "I do."</p>
        <ul class="hc-topics">
          <li>Compatibility &amp; Core Values</li>
          <li>Finances &amp; Financial Expectations</li>
          <li>Family Dynamics &amp; Boundaries</li>
          <li>Romance, Intimacy &amp; Sexuality</li>
          <li>Effective Communication</li>
        </ul>
        <a href="https://bepremarriagecounselor.themiddleshelf.com/login"
           class="hc-link" target="_blank" rel="noopener">
          Access the platform
          <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M5 12h14M12 5l7 7-7 7"/>
          </svg>
        </a>
      </div>

    </div>
  </div>
</section>


<!-- ══════════════════════════════════
     FEATURED APP — THE PREMARRIAGE COUNSELOR
══════════════════════════════════ -->
<section id="premarriage">
  <div class="container">
    <div class="app-grid">

      <!-- Left: Info & Steps -->
      <div>
        <span class="badge" style="margin-bottom:16px;display:inline-block;">Available Now</span>
        <h2 class="app-title">The <em>PreMarriage</em><br>Counselor</h2>
        <p class="app-tagline">Guided Sessions · Deeper Conversations · Stronger Foundations</p>

        <p class="app-desc">
          The PreMarriage Counselor is a professional digital platform connecting certified counselors with engaged couples for structured, topic-based pre-marital counseling sessions. Modeled after the facilitated approach pioneered by platforms like SYMBIS, our tool empowers counselors to invite, facilitate, and track progress across five transformative session topics — all within a secure, purpose-built environment.
        </p>
        <p class="app-desc">
          Whether you're a pastor, licensed therapist, or lay counselor, The PreMarriage Counselor gives you the framework and tools to walk couples through the conversations that matter most — before the wedding day.
        </p>

        <div class="store-row">
          <a href="https://bepremarriagecounselor.themiddleshelf.com/login"
             class="store-badge" target="_blank" rel="noopener">
            <span class="sb-icon">🌐</span>
            <span class="sb-text">
              <span class="sb-label">Open the</span>
              <span class="sb-name">Web App</span>
            </span>
          </a>
          <div class="store-badge soon" title="Coming Soon to App Store">
            <span class="sb-icon">🍎</span>
            <span class="sb-text">
              <span class="sb-label">Download on the</span>
              <span class="sb-name">App Store</span>
            </span>
            <span style="font-size:10px;color:var(--muted);margin-left:4px;">(Soon)</span>
          </div>
          <div class="store-badge soon" title="Coming Soon to Google Play">
            <span class="sb-icon">▶</span>
            <span class="sb-text">
              <span class="sb-label">Get it on</span>
              <span class="sb-name">Google Play</span>
            </span>
            <span style="font-size:10px;color:var(--muted);margin-left:4px;">(Soon)</span>
          </div>
        </div>

        <p class="hiw-label">How It Works</p>
        <div class="how-steps">
          <div class="how-step">
            <div class="step-num">1</div>
            <div class="step-text">
              <h4>Counselor Creates an Account</h4>
              <p>Register as a counselor to access the full facilitation dashboard and session management tools.</p>
            </div>
          </div>
          <div class="how-step">
            <div class="step-num">2</div>
            <div class="step-text">
              <h4>Invite the Engaged Couple</h4>
              <p>Send a personalized invitation. Each partner receives their own private login to complete assessments independently.</p>
            </div>
          </div>
          <div class="how-step">
            <div class="step-num">3</div>
            <div class="step-text">
              <h4>Facilitate Guided Sessions</h4>
              <p>Lead the couple through five structured topic areas. Review responses, identify alignment and tension, and guide meaningful dialogue.</p>
            </div>
          </div>
          <div class="how-step">
            <div class="step-num">4</div>
            <div class="step-text">
              <h4>Build a Stronger Foundation</h4>
              <p>Equip couples with the insights, language, and tools they need before they walk down the aisle.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Right: Five Topics -->
      <div>
        <p class="hiw-label">The Five Session Topics</p>
        <p style="font-size:14px;color:var(--muted);margin-bottom:22px;line-height:1.7;">
          Each session addresses a critical dimension of a healthy marriage. Couples complete assessments privately, then come together with their counselor to explore results and build shared understanding.
        </p>

        <div style="display:flex;flex-direction:column;gap:12px;">
          <div class="topic-item">
            <div class="topic-icon ti-blue">🧭</div>
            <div>
              <h4>Compatibility &amp; Core Values</h4>
              <p>Discover shared values, life goals, faith perspectives, and personal expectations that form the bedrock of a lasting partnership.</p>
            </div>
          </div>
          <div class="topic-item">
            <div class="topic-icon ti-orange">💰</div>
            <div>
              <h4>Finances</h4>
              <p>Navigate money beliefs, spending habits, financial goals, and debt conversations before they become conflict in marriage.</p>
            </div>
          </div>
          <div class="topic-item">
            <div class="topic-icon ti-green">🏡</div>
            <div>
              <h4>Family Dynamics</h4>
              <p>Explore family of origin patterns, in-law expectations, parenting philosophies, and how each partner defines "family."</p>
            </div>
          </div>
          <div class="topic-item">
            <div class="topic-icon ti-orange">❤️</div>
            <div>
              <h4>Romance, Intimacy &amp; Sexuality</h4>
              <p>Address expectations, love languages, physical intimacy, and the emotional dimensions of a fulfilling marriage relationship.</p>
            </div>
          </div>
          <div class="topic-item">
            <div class="topic-icon ti-blue">💬</div>
            <div>
              <h4>Effective Communication</h4>
              <p>Build listening, conflict resolution, and expressive skills that transform tension into deeper connection.</p>
            </div>
          </div>
        </div>

        <div class="couple-note">
          <p><strong>Are you a couple?</strong> Ask your pastor, therapist, or pre-marital counselor to invite you through the platform. The PreMarriage Counselor is a counselor-led experience designed to be facilitated by a qualified third party.</p>
        </div>
      </div>

    </div>
  </div>
</section>


<!-- ══════════════════════════════════
     COMING SOON — OTHER APPS
══════════════════════════════════ -->
<section id="coming-soon">
  <div class="container">
    <div class="section-header centered">
      <span class="badge">More On the Way</span>
      <h2>More Tools for <em>Life's Most Important</em> Moments</h2>
      <p>We're building a full suite of resources to support marriage, family, personal finances, and leadership. Sign up to be notified when each launches.</p>
    </div>

    <div class="coming-grid">
      <div class="coming-card">
        <div class="cc-icon" style="background:var(--blue-lt);">💑</div>
        <h3>The Marriage Resource App</h3>
        <p>Ongoing tools and guided resources for married couples at every stage — from the newlywed season to decades-long partnerships navigating new chapters.</p>
        <button class="notify-btn" onclick="notifyMe('Marriage Resource App')">
          <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
          Notify Me at Launch
        </button>
      </div>

      <div class="coming-card">
        <div class="cc-icon" style="background:var(--orange-lt);">📊</div>
        <h3>Personal Financial Management</h3>
        <p>Faith-informed, practical financial tools to help individuals and families build budgets, reduce debt, grow wealth, and develop a healthy relationship with money.</p>
        <button class="notify-btn" onclick="notifyMe('Personal Financial Management App')">
          <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
          Notify Me at Launch
        </button>
      </div>

      <div class="coming-card">
        <div class="cc-icon" style="background:var(--green-lt);">🧭</div>
        <h3>Leadership Development App</h3>
        <p>Resources, assessments, and guided learning paths designed for emerging and established leaders who want to grow with integrity, clarity, and lasting impact.</p>
        <button class="notify-btn" onclick="notifyMe('Leadership Development App')">
          <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
          Notify Me at Launch
        </button>
      </div>
    </div>

  </div>
</section>


<!-- ══════════════════════════════════
     BOOKS
══════════════════════════════════ -->
<section id="books">
  <div class="container">
    <div class="books-layout">

      <div class="book-stack">
        <div class="book-spine book-1">
          <h5>Marriage &amp; Family Resources</h5>
          <span>Title Coming Soon</span>
        </div>
        <div class="book-spine book-2">
          <h5>Personal Finance Wisdom</h5>
          <span>Title Coming Soon</span>
        </div>
        <div class="book-spine book-3">
          <h5>Leadership Essentials</h5>
          <span>Title Coming Soon</span>
        </div>
        <div class="books-cs">
          <span class="badge badge-orange">Books — Coming Soon</span>
        </div>
      </div>

      <div>
        <span class="badge badge-orange" style="margin-bottom:16px;display:inline-block;">Published Resources</span>
        <h2 style="font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:400;color:var(--ink);line-height:1.1;margin-bottom:14px;">
          Books &amp; Written<br>
          <em style="font-style:italic;color:var(--orange);">Resources</em>
        </h2>
        <p style="font-size:16px;color:var(--muted);line-height:1.8;margin-bottom:14px;">
          Our team is authoring a series of books designed to complement our digital tools — practical, accessible, and rooted in the same values that drive everything we build.
        </p>
        <p style="font-size:16px;color:var(--muted);line-height:1.8;margin-bottom:28px;">
          Spanning marriage and family, personal finances, and leadership, each title will offer the kind of depth that apps alone cannot provide.
        </p>

        <div style="margin-bottom:28px;">
          <div class="book-row">
            <div class="book-dot" style="background:var(--blue);"></div>
            <span>Marriage &amp; Family Resources</span>
            <span class="badge" style="font-size:10px;">Coming Soon</span>
          </div>
          <div class="book-row">
            <div class="book-dot" style="background:var(--orange);"></div>
            <span>Personal Financial Management</span>
            <span class="badge badge-orange" style="font-size:10px;">Coming Soon</span>
          </div>
          <div class="book-row">
            <div class="book-dot" style="background:var(--green);"></div>
            <span>Leadership Development</span>
            <span class="badge badge-green" style="font-size:10px;">Coming Soon</span>
          </div>
        </div>

        <button class="btn btn-outline" onclick="notifyMe('Book Releases')">
          Notify Me When Available
        </button>
      </div>
    </div>
  </div>
</section>


<!-- ══════════════════════════════════
     SPEAKING ENGAGEMENTS
══════════════════════════════════ -->
<section id="speaking">
  <div class="container">
    <div class="speaking-inner">

      <div>
        <div class="speaking-eyebrow">Speaking Engagements</div>
        <h2 class="speaking-title">
          Voices for the<br><em>Moments That Matter</em>
        </h2>
        <p class="speaking-desc">
          Gary and Donna Wallace bring decades of lived experience, study, and ministry to every stage they step onto. Whether you're hosting a marriage retreat, a leadership conference, a church event, or a financial wellness seminar, the Wallaces deliver a message that is both grounded and transformative.
        </p>
        <p class="speaking-desc" style="margin-bottom:32px;">
          Our speaking booking platform is currently in development. In the meantime, reach out directly to inquire about availability, topics, and engagements.
        </p>
        <div class="speaking-actions">
          <a href="#contact" class="btn btn-orange">Inquire About Booking</a>
          <a href="mailto:support@themiddleshelf.com" class="btn btn-ghost">Email Us Directly</a>
        </div>
      </div>

      <div class="speakers-card">
        <p class="sc-label">Our Speakers</p>
        <div class="speaker-row">
          <div class="speaker-av">GW</div>
          <div class="speaker-info">
            <h4>Gary Wallace</h4>
            <p>Marriage, Family &amp; Leadership</p>
          </div>
        </div>
        <div class="speaker-row">
          <div class="speaker-av">DW</div>
          <div class="speaker-info">
            <h4>Donna Wallace</h4>
            <p>Marriage, Family &amp; Relationships</p>
          </div>
        </div>
        <div class="topic-pills">
          <span class="pill">Pre-Marriage &amp; Marriage</span>
          <span class="pill">Family Dynamics</span>
          <span class="pill">Personal Finance</span>
          <span class="pill">Leadership</span>
          <span class="pill">Communication</span>
          <span class="pill">Church &amp; Ministry</span>
        </div>
        <div class="booking-note">⏳ &nbsp; Online Booking — Coming Soon</div>
      </div>

    </div>
  </div>
</section>


<!-- ══════════════════════════════════
     ABOUT
══════════════════════════════════ -->
<section id="about">
  <div class="container">
    <div class="about-layout">

      <div>
        <span class="badge" style="margin-bottom:20px;display:inline-block;">Who We Are</span>
        <h2 class="about-title">
          Built on <em>Purpose</em>,<br>Driven by Mission.
        </h2>
        <div class="about-pull">
          "To create excellent tools and resources that equip people to thrive in their most important relationships, responsibilities, and roles."
        </div>
        <p class="about-text">
          The Middle Shelf Holdings LLC is a US-based company founded to bridge the gap between professional-grade guidance and everyday accessibility. We believe the resources people need to build strong marriages, raise healthy families, manage money wisely, and lead with integrity should never be out of reach.
        </p>
        <p class="about-text">
          Our name reflects what we stand for — not the cheapest, not the most inaccessible — but the best of what's available, within reach, and ready to use. "The Middle Shelf" is where quality lives.
        </p>
        <p class="about-text">
          Our growing portfolio spans web and mobile applications, published books, and in-person speaking engagements — all designed around the moments that define a life well-lived.
        </p>
      </div>

      <div>
        <p style="font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;">Our Core Areas</p>
        <div class="values-grid">
          <div class="value-card vc-blue">
            <span class="vi">💑</span>
            <h4>Marriage &amp; Family</h4>
            <p>Tools and guidance for couples and families at every stage of their journey together.</p>
          </div>
          <div class="value-card vc-orange">
            <span class="vi">💳</span>
            <h4>Personal Finance</h4>
            <p>Practical resources for building a healthy, intentional relationship with money.</p>
          </div>
          <div class="value-card vc-green">
            <span class="vi">🧭</span>
            <h4>Leadership</h4>
            <p>Development resources for leaders who want to grow with clarity and character.</p>
          </div>
          <div class="value-card vc-gray">
            <span class="vi">🎙️</span>
            <h4>Speaking</h4>
            <p>Engaging, experienced voices for conferences, retreats, and church events.</p>
          </div>
        </div>

        <div class="company-box">
          <h5>Company Information</h5>
          <p>
            <strong>The Middle Shelf Holdings LLC</strong><br>
            Fort Lauderdale, Florida<br>
            <a href="mailto:support@themiddleshelf.com">support@themiddleshelf.com</a><br>
            <a href="https://www.themiddleshelf.com">www.themiddleshelf.com</a>
          </p>
        </div>
      </div>

    </div>
  </div>
</section>


<!-- ══════════════════════════════════
     CONTACT
══════════════════════════════════ -->
<section id="contact">
  <div class="container">
    <div class="section-header" style="margin-bottom:44px;">
      <span class="badge badge-orange">Get In Touch</span>
      <h2>We'd Love to <em>Hear From You</em></h2>
      <p>Whether you have a question about The PreMarriage Counselor, want to inquire about speaking, or want to know what's coming next — we're here.</p>
    </div>

    <div class="contact-layout">
      <div>
        <div class="contact-item">
          <div class="ci-icon">✉️</div>
          <div>
            <h4>General Support</h4>
            <a href="mailto:support@themiddleshelf.com">support@themiddleshelf.com</a>
          </div>
        </div>
        <div class="contact-item">
          <div class="ci-icon">💻</div>
          <div>
            <h4>The PreMarriage Counselor App</h4>
            <a href="https://bepremarriagecounselor.themiddleshelf.com/login" target="_blank" rel="noopener">
              bepremarriagecounselor.themiddleshelf.com
            </a>
          </div>
        </div>
        <div class="contact-item">
          <div class="ci-icon">🌐</div>
          <div>
            <h4>Company Website</h4>
            <a href="https://www.themiddleshelf.com">www.themiddleshelf.com</a>
          </div>
        </div>
        <div class="contact-item">
          <div class="ci-icon">🎙️</div>
          <div>
            <h4>Speaking Inquiries</h4>
            <p>Use the form and select "Speaking Engagements" as your topic.</p>
          </div>
        </div>

        <div style="margin-top:24px;padding:18px 20px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);">
          <p style="font-size:13px;color:var(--muted);line-height:1.7;">
            <strong style="color:var(--ink);">Response Time:</strong> We aim to respond to all inquiries within 2 business days. For urgent app support, include <strong>"APP SUPPORT"</strong> in your subject line.
          </p>
        </div>
      </div>

      <div class="contact-form">
        <h3>Send Us a Message</h3>
        <div id="cf-body">
          <div class="form-row">
            <div class="form-group">
              <label for="cf-name">Full Name</label>
              <input type="text" id="cf-name" placeholder="Your name" />
            </div>
            <div class="form-group">
              <label for="cf-email">Email Address</label>
              <input type="email" id="cf-email" placeholder="your@email.com" />
            </div>
          </div>
          <div class="form-group">
            <label for="cf-topic">Topic</label>
            <select id="cf-topic">
              <option value="">Select a topic...</option>
              <option>The PreMarriage Counselor — App Support</option>
              <option>The PreMarriage Counselor — Counselor Account</option>
              <option>Speaking Engagements — Gary &amp; Donna Wallace</option>
              <option>Upcoming Apps — Notify Me</option>
              <option>Books &amp; Publications</option>
              <option>General Inquiry</option>
              <option>Press &amp; Media</option>
              <option>Partnership Opportunities</option>
            </select>
          </div>
          <div class="form-group">
            <label for="cf-msg">Message</label>
            <textarea id="cf-msg" placeholder="Tell us how we can help..."></textarea>
          </div>
          <button class="btn btn-primary" style="width:100%;justify-content:center;" onclick="submitForm()">
            Send Message
          </button>
        </div>

        <div class="form-success" id="form-success">
          <div class="fs-icon">✅</div>
          <h4>Message Received!</h4>
          <p>Thank you for reaching out. We'll be in touch within 2 business days.</p>
        </div>
      </div>
    </div>
  </div>
</section>


<!-- ══════════════════════════════════
     FOOTER
══════════════════════════════════ -->
<footer>
  <div class="container">
    <div class="footer-grid">
      <div class="footer-brand">
        <div class="footer-logo-top">The Middle Shelf</div>
        <span class="footer-logo-sub">Holdings LLC</span>
        <p>Premium resources for marriage, family, personal finance, and leadership. Tools built for the moments that define a life well-lived.</p>
      </div>

      <div class="footer-col">
        <h4>Products</h4>
        <ul>
          <li><a href="#premarriage">The PreMarriage Counselor</a></li>
          <li><a href="#coming-soon">Marriage Resources <span style="opacity:.5;font-size:11px;">(Soon)</span></a></li>
          <li><a href="#coming-soon">Personal Finance App <span style="opacity:.5;font-size:11px;">(Soon)</span></a></li>
          <li><a href="#coming-soon">Leadership App <span style="opacity:.5;font-size:11px;">(Soon)</span></a></li>
        </ul>
      </div>

      <div class="footer-col">
        <h4>Resources</h4>
        <ul>
          <li><a href="#books">Books &amp; Publications</a></li>
          <li><a href="#speaking">Speaking Engagements</a></li>
          <li><a href="#about">About Us</a></li>
          <li><a href="#contact">Contact &amp; Support</a></li>
        </ul>
      </div>

      <div class="footer-col">
        <h4>Legal</h4>
        <ul>
          <li><a href="#privacy">Privacy Policy</a></li>
          <li><a href="#terms">Terms of Service</a></li>
          <li><a href="#cookies">Cookie Policy</a></li>
          <li><a href="mailto:support@themiddleshelf.com">support@themiddleshelf.com</a></li>
        </ul>
      </div>
    </div>

    <div class="footer-bottom">
      <p>© 2025 The Middle Shelf Holdings LLC. All rights reserved.</p>
      <div class="footer-legal">
        <a href="#privacy">Privacy Policy</a>
        <a href="#terms">Terms of Service</a>
        <a href="#contact">Contact</a>
      </div>
    </div>
  </div>
</footer>


<script>
  /* Mobile nav */
  document.getElementById('hamburger-btn').addEventListener('click', function() {
    document.getElementById('mobile-nav').classList.add('open');
  });
  document.getElementById('mobile-close').addEventListener('click', function() {
    document.getElementById('mobile-nav').classList.remove('open');
  });
  function closeMobile() {
    document.getElementById('mobile-nav').classList.remove('open');
  }

  /* Notify-me shortcut */
  function notifyMe(product) {
    var sel = document.getElementById('cf-topic');
    var msg = document.getElementById('cf-msg');
    sel.value = 'Upcoming Apps — Notify Me';
    msg.value = "I'd like to be notified when " + product + " is available.";
    document.getElementById('contact').scrollIntoView({ behavior: 'smooth' });
  }

  /* Contact form submit */
  function submitForm() {
    var name  = document.getElementById('cf-name').value.trim();
    var email = document.getElementById('cf-email').value.trim();
    var topic = document.getElementById('cf-topic').value;
    var msg   = document.getElementById('cf-msg').value.trim();
    if (!name || !email || !topic || !msg) {
      alert('Please fill in all fields before submitting.');
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      alert('Please enter a valid email address.');
      return;
    }
    document.getElementById('cf-body').style.display = 'none';
    document.getElementById('form-success').style.display = 'block';
  }

  /* Active nav highlight on scroll */
  var navLinks = document.querySelectorAll('.nav-links a');
  var sections = ['hero','premarriage','coming-soon','books','speaking','about','contact'];
  window.addEventListener('scroll', function() {
    var scrollY = window.scrollY;
    var active  = 'hero';
    sections.forEach(function(id) {
      var el = document.getElementById(id);
      if (el && el.offsetTop - 100 <= scrollY) { active = id; }
    });
    navLinks.forEach(function(a) {
      var href = a.getAttribute('href').replace('#','');
      a.classList.toggle('active', href === active);
    });
  });
</script>

</body>
</html>
