body {
    background: linear-gradient(to bottom, #003366, #001a33);
    font-family: 'Verdana', sans-serif;
    color: #fff;
    text-align: center;
    margin: 0;
  }

  header {
    background: linear-gradient(to bottom, #0066cc, #004c99);
    padding: 15px 0;
    border-bottom: 4px ridge #e0e0e0;
    box-shadow: 0 0 15px #000 inset;
  }

  h1 {
    font-family: "Trebuchet MS", sans-serif;
    font-size: 36px;
    text-shadow: 2px 2px 4px #000;
    margin: 0;
  }

  h2 {
    color: #ffcc33;
    text-shadow: 1px 1px 3px #000;
  }

  nav {
    background: #00264d;
    border-top: 2px solid #99ccff;
    border-bottom: 2px solid #99ccff;
    padding: 10px;
  }

  nav a {
    color: #ffcc33;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
  }

  nav a:hover {
    color: #ffffff;
    text-decoration: underline;
  }

  main {
    background: #ffffffcc;
    color: #000;
    margin: 30px auto;
    padding: 20px;
    max-width: 750px;
    border: 3px double #003366;
    border-radius: 10px;
    box-shadow: 0 0 10px #000;
  }

  /* === RETRO LINK COLORS === */
  a:link {
    color: #ff66cc;          /* pink for unvisited links */
    text-decoration: none;
  }
  
  a:visited {
    color: #ffcc33;          /* yellow/gold for visited links */
  }
  
  a:hover {
    color: #ffffff;          /* white on hover */
    text-decoration: underline;
  }
  
  a:active {
    color: #ff9900;          /* orange flash when clicked */
  }


  .button {
    display: inline-block;
    background: linear-gradient(to bottom, #ffcc33, #cc9900);
    color: #003366;
    padding: 10px 20px;
    margin-top: 20px;
    font-weight: bold;
    border: 2px outset #996600;
    border-radius: 8px;
    text-decoration: none;
  }

  .button:hover {
    background: linear-gradient(to bottom, #ffe066, #cc9900);
  }

  footer {
    background: #001a33;
    border-top: 3px ridge #99ccff;
    padding: 10px;
    font-size: 12px;
    color: #99ccff;
    margin-top: 20px;
  }

  marquee {
    color: #ffff66;
    background: #003366;
    padding: 5px;
    font-weight: bold;
    border-top: 2px solid #99ccff;
    border-bottom: 2px solid #99ccff;
  }

  img {
    border: 4px ridge #99ccff;
    border-radius: 6px;
    box-shadow: 3px 3px 6px #000;
    margin: 10px;
  }
  
  /* === FACTOID CARDS SECTION === */

  .factoid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
    align-items: start; /* 🟢 key line: stops cards from stretching */
  }

  
  .fact-card {
    background: linear-gradient(to bottom, #003366, #001a33);
    color: #ffcc33;
    border: 2px ridge #99ccff;
    border-radius: 10px;
    padding: 15px;
    text-align: left;
    box-shadow: inset 0 0 10px #000;
    text-shadow: 1px 1px 3px #000;
  }
  
  .fact-card h3 {
    color: #ffe066;
    margin-top: 0;
  }
  
  .fact-card p {
    color: #ffffff;
    line-height: 1.6;
  }
  
  /* --- DMV card photo styling --- */
  .dmv-card {
    background: linear-gradient(to bottom, #004c99, #00264d);
    border: 2px ridge #99ccff;
    border-radius: 10px;
    padding: 15px;
    text-align: left;
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    box-shadow: 0 0 10px #000;
    width: 100%;
    box-sizing: border-box;
  }
  
  .dmv-photo {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border: 3px ridge #99ccff;
    border-radius: 6px;
    box-shadow: 3px 3px 6px #000;
    margin-bottom: 10px;
  }
  
  .dmv-card h3 {
    color: #ffcc33;
    margin-top: 0;
  }
  
  .dmv-card a {
    color: #99ccff;
    text-decoration: none;
  }
  
  .dmv-card a:hover {
    color: #ffffff;
    text-decoration: underline;
  }

  /* === DMV image overlay === */
  .dmv-image-wrap {
    position: relative;
    width: 100%;
  }
  
  .dmv-photo {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border: 3px ridge #99ccff;
    border-radius: 6px;
    box-shadow: 3px 3px 6px #000;
    display: block;
  }
  
  /* Caption overlay */
  .dmv-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    color: #ffcc33;
    font-weight: bold;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    text-shadow: 1px 1px 3px #000;
  }

  /* === Moving to Tennessee Card Styling === */
  .move-card {
    position: relative;
    background: linear-gradient(to bottom, #002b5c, #001a33);
    border: 2px ridge #99ccff;
    border-radius: 10px;
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    box-shadow: inset 0 0 10px #000;
    overflow: hidden;
  }
  
  .move-image-wrap {
    position: relative;
    width: 100%;
  }
  
  .move-photo {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-bottom: 2px solid #99ccff;
    display: block;
  }
  
  .move-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
    color: #ffcc33;
    font-weight: bold;
    text-align: center;
    padding: 6px 0;
    font-size: 14px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    text-shadow: 1px 1px 3px #000;
  }
  
  .move-card h3 {
    color: #ffcc33;
    margin-top: 10px;
  }
  
  .move-card p {
    color: #ffffff;
    line-height: 1.6;
  }
  
    /* === Emergency Power of Attorney Card === */
  .emergency-card {
    background: linear-gradient(to bottom, #440000, #1a0000);
    border: 2px ridge #ffcc33;
    border-radius: 10px;
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    box-shadow: inset 0 0 10px #000;
    overflow: hidden;
  }
  
  .emergency-image-wrap {
    position: relative;
    width: 100%;
  }
  
  .emergency-photo {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-bottom: 2px solid #ffcc33;
    display: block;
  }
  
  .emergency-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
    color: #ffcc33;
    font-weight: bold;
    text-align: center;
    padding: 6px 0;
    font-size: 14px;
    text-shadow: 1px 1px 3px #000;
  }
  
  .emergency-card h3 {
    color: #ffcc33;
    margin-top: 10px;
  }
  
  .emergency-card p {
    line-height: 1.6;
    color: #fff;
  }

  /* === Section Header (aligned with main) === */
  .section-header {
    width: 100%;
    max-width: 750px;              /* match main content width */
    margin: 40px auto 15px auto;
    padding: 10px 15px;
    background: linear-gradient(to bottom, #0066cc, #003366);
    border: 3px ridge #99ccff;
    border-radius: 8px;
    color: #ffcc33;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 3px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 0 12px #000 inset;
  }
  
  .section-icon {
    width: 36px;
    height: 36px;
    border: 2px ridge #99ccff;
    border-radius: 50%;
    box-shadow: 2px 2px 5px #000;
    background-color: #001a33;
    padding: 3px;
  }
  
  /* === Services Grid (perfect 3-column center) === */
  /* === FIXED GRID ALIGNMENT AND ROW FLOW === */
  .service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    justify-content: center;   /* centers the whole grid */
    align-items: flex-start;       /* lets each card stay its own height */
    max-width: 750px;
    margin: 25px auto;
    box-sizing: border-box;
  }
  
  
  @media (max-width: 900px) {
    .service-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .service-grid { grid-template-columns: 1fr; }
  }
  
  .service-card {
    background: linear-gradient(to bottom, #003366, #001a33);
    color: #ffcc33;
    border: 2px ridge #99ccff;
    border-radius: 10px;
    padding: 15px;
    text-align: left;
    text-shadow: 1px 1px 3px #000;
    box-shadow: inset 0 0 10px #000;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    height: auto;
    width: 100%;
    box-sizing: border-box;
  }

  
  .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 12px #99ccff;
  }
  
  .service-card h3 {
    color: #ffe066;
    margin-top: 0;
    border-bottom: 1px solid #99ccff;
    padding-bottom: 5px;
    margin-bottom: 10px;
  }
  
  .service-card p {
    color: #ffffff;
    line-height: 1.5;
    font-size: 0.95rem;
  }
  
    /* Remove bullet points */
  ul {
    list-style: none;
    padding-left: 0;
  }
  
  /* Add visual separators for readability */
  section {
    margin: 25px auto;
    max-width: 800px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 20px 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }
  
  /* Make section titles pop */
  h2 {
    color: #ffd54f;
    text-shadow: 1px 1px 3px #000;
    margin-bottom: 10px;
  }
  
  /* Emphasize key phrases */
  strong {
    color: #fff59d;
  }
  
  /* Add subtle animation when scrolling */
  section {
    transition: transform 0.2s ease, background 0.3s ease;
  }
  section:hover {
    transform: scale(1.02);
    background: rgba(255,255,255,0.12);
  }
  
  /* Call-to-action button */
  .button {
    display: inline-block;
    background: linear-gradient(90deg, #f9a825, #fdd835);
    color: #000;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.2s ease;
  }
  .button:hover {
    background: linear-gradient(90deg, #ffeb3b, #fff176);
    transform: scale(1.05);
  }