* { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #000; }

    /* ── MODAL ── */
    .age-modal {
      position: fixed;
      inset: 0;
      z-index: 99999;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 1;
      visibility: visible;
      transition: opacity 0.8s ease, visibility 0.8s ease;
    }
    .age-modal.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* Background winery photo */
    .age-modal-background {
      position: absolute;
      inset: 0;
      background-image: url('https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?w=1800&q=85&fit=crop');
      background-size: cover;
      background-position: center 40%;
      z-index: 0;
      transform: scale(1.04);
      animation: bgDrift 18s ease-in-out infinite alternate;
    }
    @keyframes bgDrift {
      0%   { transform: scale(1.04) translateX(0px) translateY(0px); }
      100% { transform: scale(1.08) translateX(-12px) translateY(-8px); }
    }
    .age-modal-background::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 50%, rgba(10,0,3,0.3) 0%, rgba(8,0,2,0.82) 100%);
      z-index: 1;
    }
    .age-modal-background::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      opacity: 0.05;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E");
    }

    /* Content */
    .age-modal-content {
      position: relative;
      z-index: 3;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      padding: 20px;
    }

    /* The Card */
    .age-card {
      position: relative;
      width: min(480px, 92vw);
      padding: clamp(36px, 6vw, 60px) clamp(28px, 5vw, 56px) clamp(32px, 5vw, 52px);
      text-align: center;
      overflow: hidden;
      background: rgba(12, 2, 6, 0.72);
      backdrop-filter: blur(24px) saturate(1.5);
      -webkit-backdrop-filter: blur(24px) saturate(1.5);
      border: 1px solid rgba(196, 152, 80, 0.3);
      border-top-color: rgba(212, 175, 55, 0.6);
      box-shadow:
        0 0 0 1px rgba(0,0,0,0.6),
        0 32px 80px rgba(0,0,0,0.8),
        0 0 140px rgba(100, 8, 22, 0.22),
        inset 0 1px 0 rgba(212, 175, 55, 0.1);
      animation: cardReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes cardReveal {
      from { opacity: 0; transform: translateY(28px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .age-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212,175,55,0.75) 40%, rgba(212,175,55,0.75) 60%, transparent);
    }
    .age-card::after {
      content: '';
      position: absolute;
      bottom: -40px; left: 50%;
      transform: translateX(-50%);
      width: 70%;
      height: 80px;
      background: radial-gradient(ellipse, rgba(140,10,35,0.3) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Ornament */
    .age-ornament {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-bottom: 22px;
    }
    .age-ornament-line {
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212,175,55,0.45));
    }
    .age-ornament-line:last-child {
      background: linear-gradient(90deg, rgba(212,175,55,0.45), transparent);
    }
    .age-ornament-icon {
      width: 38px;
      height: 38px;
      color: #c9a84c;
      flex-shrink: 0;
      filter: drop-shadow(0 0 8px rgba(201,168,76,0.65));
      animation: iconPulse 3s ease-in-out infinite;
    }
    @keyframes iconPulse {
      0%, 100% { filter: drop-shadow(0 0 6px rgba(201,168,76,0.5)); }
      50%       { filter: drop-shadow(0 0 16px rgba(201,168,76,0.9)); }
    }

    /* Eyebrow */
    .age-eyebrow {
      font-family: "Outfit", sans-serif;
      font-size: clamp(0.58rem, 2vw, 0.7rem);
      font-weight: 400;
      letter-spacing: 5.5px;
      text-transform: uppercase;
      color: #c9a84c;
      margin-bottom: 16px;
      display: block;
      opacity: 0.88;
    }

    /* Heading */
    .age-modal-text h2 {
      font-family: "Outfit", sans-serif;
      font-size: clamp(1.6rem, 5vw, 2.3rem);
      font-weight: 300;
      
      color: #f5ece8;
      line-height: 1.22;
      margin-bottom: 0;
      letter-spacing: 0.3px;
      text-shadow: 0 2px 22px rgba(0,0,0,0.7);
    }

    /* Divider */
    .age-divider {
      width: 44px;
      height: 1px;
      background: linear-gradient(90deg, transparent, #c9a84c, transparent);
      margin: 20px auto 20px;
    }

    /* Subtext */
    .age-subtext {
      font-family: "Outfit", sans-serif;
      font-size: clamp(0.7rem, 2.2vw, 0.8rem);
      color: rgba(220, 190, 180, 0.6);
      letter-spacing: 1px;
      margin-bottom: clamp(28px, 5vw, 40px);
      line-height: 1.75;
      font-weight: 300;
    }

    /* Buttons */
    .age-modal-buttons {
      display: flex;
      gap: clamp(12px, 3vw, 18px);
      justify-content: center;
      margin-bottom: 22px;
    }
    .age-btn {
      font-family: "Outfit", sans-serif;
      font-size: clamp(0.68rem, 2.4vw, 0.8rem);
      font-weight: 600;
      letter-spacing: 4.5px;
      text-transform: uppercase;
      padding: clamp(13px, 2.5vw, 16px) clamp(28px, 6.5vw, 50px);
      cursor: pointer;
      transition: all 0.38s cubic-bezier(0.22, 1, 0.36, 1);
      position: relative;
      overflow: hidden;
      border: none;
      outline: none;
    }
    .age-btn-yes {
      background: linear-gradient(160deg, #7a1020 0%, #9b1a2f 45%, #6d0e1b 100%);
      color: #fae8ec;
      border: 1px solid rgba(196, 48, 74, 0.65);
      box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 28px rgba(100,10,25,0.6), 0 0 0 1px rgba(0,0,0,0.4);
    }
    .age-btn-yes:hover {
      background: linear-gradient(160deg, #921626 0%, #b52038 45%, #831323 100%);
      border-color: rgba(220,60,90,0.85);
      box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 16px 44px rgba(120,12,30,0.78), 0 0 0 1px rgba(0,0,0,0.4);
      transform: translateY(-3px);
      color: #fff;
    }
    .age-btn-no {
      background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
      color: rgba(215, 185, 170, 0.75);
      border: 1px solid rgba(196,152,80,0.3);
      box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 16px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.5);
    }
    .age-btn-no:hover {
      background: linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
      border-color: rgba(212,175,55,0.55);
      color: rgba(240,215,200,0.95);
      box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 8px 28px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.5);
      transform: translateY(-3px);
    }

    /* Legal */
    .age-legal {
      font-family: "Outfit", sans-serif;
      font-size: clamp(0.58rem, 1.8vw, 0.66rem);
      color: rgba(175, 145, 135, 0.38);
      letter-spacing: 0.8px;
      line-height: 1.75;
    }

    /* Brand mark */
    .age-brand-mark {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(212,175,55,0.1);
    }
    .age-brand-mark span {
      font-family: "Outfit", sans-serif;
      font-size: 0.62rem;
      letter-spacing: 5px;
      text-transform: uppercase;
      color: rgba(201,168,76,0.38);
      font-weight: 300;
    }
    .age-brand-dot {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(201,168,76,0.3);
    }

    /* Mobile */
    @media (max-width: 480px) {
      .age-modal-buttons { flex-direction: column; align-items: center; }
      .age-btn { width: 100%; max-width: 260px; }
    }