@font-face { font-family: 'Karla'; font-style: italic; font-weight: 700; font-display: swap; src: url('/assets/fonts/karla-700i.woff2') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/karla-400i.woff2') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/karla-700.woff2') format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: italic; font-weight: 900; font-display: swap; src: url('/assets/fonts/rubik-900i.woff2') format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: italic; font-weight: 700; font-display: swap; src: url('/assets/fonts/rubik-700i.woff2') format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: italic; font-weight: 500; font-display: swap; src: url('/assets/fonts/rubik-500i.woff2') format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/rubik-400i.woff2') format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/rubik-500.woff2') format('woff2'); }
/* ===== INTRO SECTION ===== */
    .section { padding: 100px 0; }
    .section.dark { background: #1a1a2e; color: #fff; }
    .section.gray-bg { background: #f8f8f8; }
    .intro-heading h2 {
      font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; line-height: 1.2;
      margin-bottom: 20px;
    }
    .intro-heading p { max-width: 640px; margin: 0 auto; color: #666; font-size: 16px; }
    .intro-heading p.section-script { font-family: 'Clickerscript', cursive; font-size: 42px; color: #ff71cb; max-width: none; }
    .intro-features {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 40px;
      margin-top: 50px;
    }
    .intro-feature { text-align: center; flex: 0 0 140px; }
    .intro-feature .icon-circle {
      width: 56px; height: 56px; margin: 0 auto 12px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
    }
    .intro-feature .icon-circle svg { width: 24px; height: 24px; fill: #fff; }

    /* ===== QUOTE ===== */
    .quote-section { display: none; } /* Quote merged into about section */

    /* ===== ABOUT / BETSY SECTION ===== */
    .about-split {
      display: grid; grid-template-columns: 1fr 1fr; min-height: 600px;
    }
    .about-text-col {
      display: flex; align-items: center; padding: 60px 48px;
      background: #1a1a2e; color: #fff;
    }
    .about-text-col h2 {
      font-size: clamp(24px, 3vw, 36px); line-height: 1.3; margin-bottom: 24px;
    }
    .about-text-col p { font-style: italic; color: rgba(255,255,255,0.8); margin-bottom: 24px; line-height: 1.8; }
    .signature { font-family: 'Clickerscript', 'Rubik', sans-serif; font-style: normal; font-size: 40px; color: #d4a5a5; }
    .about-image-col {
      background-image: url('/assets/optimized/Betsy_1-952.jpg');
      background-image: image-set(
        url('/assets/optimized/Betsy_1-952.avif') type('image/avif'),
        url('/assets/optimized/Betsy_1-952.webp') type('image/webp'),
        url('/assets/optimized/Betsy_1-952.jpg') type('image/jpeg')
      );
      background-size: cover;
      background-position: center 20%;
      min-height: 550px;
      position: relative;
      display: flex; align-items: flex-end;
    }
    .about-quote {
      background: rgba(13,13,13,0.7); backdrop-filter: blur(6px);
      padding: 24px 28px; margin: 20px;
      border-left: 3px solid #ff71cb; border-radius: 4px;
    }
    .about-quote em {
      font-family: 'Clickerscript', cursive; font-style: normal;
      font-size: 22px; color: #fff; line-height: 1.4; display: block;
    }
    .about-quote span {
      display: block; margin-top: 8px;
      font-family: 'Rubik', sans-serif; font-size: 12px;
      letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.6);
    }

    /* ===== WHAT I DO ===== */
    .what-i-do { max-width: 600px; margin: 0 auto; text-align: center; }
    .what-i-do h3 { font-size: 28px; margin-bottom: 16px; }
    .what-i-do p { color: #666; margin-bottom: 32px; }
    .what-i-do p.section-script { font-family: 'Clickerscript', cursive; font-size: 42px; color: #ff71cb; margin-bottom: 4px; }
    .mini-features { display: flex; justify-content: center; gap: 40px; flex-wrap: nowrap; }
    .mini-feature { text-align: center; flex: 0 1 160px; }
    .mini-feature .icon-box {
      width: 48px; height: 48px; margin: 0 auto 8px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 8px; display: flex; align-items: center; justify-content: center;
    }
    .mini-feature .icon-box svg { width: 20px; height: 20px; fill: #fff; }
    .mini-feature p { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

    /* ===== SERVICES ===== */
    .services-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); min-height: 500px;
    }
    .service-card {
      position: relative; overflow: hidden; display: flex;
      align-items: flex-end; padding: 40px 32px;
      color: #fff; cursor: pointer;
    }
    .service-card .bg {
      position: absolute; inset: 0; z-index: 0;
      transition: transform 0.6s;
    }
    .service-card:nth-child(1) .bg {
      background-image: url('/assets/optimized/sports_3-960.jpg');
      background-image: image-set(
        url('/assets/optimized/sports_3-960.avif') type('image/avif'),
        url('/assets/optimized/sports_3-960.webp') type('image/webp'),
        url('/assets/optimized/sports_3-960.jpg') type('image/jpeg')
      );
      background-size: cover; background-position: center center;
    }
    .service-card:nth-child(2) .bg {
      background-image: url('/assets/optimized/DSC_0764_-1--960.jpg');
      background-image: image-set(
        url('/assets/optimized/DSC_0764_-1--960.avif') type('image/avif'),
        url('/assets/optimized/DSC_0764_-1--960.webp') type('image/webp'),
        url('/assets/optimized/DSC_0764_-1--960.jpg') type('image/jpeg')
      );
      background-size: cover; background-position: center center;
    }
    .service-card:nth-child(3) .bg {
      background-image: url('/assets/optimized/seniorPortrait_2-960.jpg');
      background-image: image-set(
        url('/assets/optimized/seniorPortrait_2-960.avif') type('image/avif'),
        url('/assets/optimized/seniorPortrait_2-960.webp') type('image/webp'),
        url('/assets/optimized/seniorPortrait_2-960.jpg') type('image/jpeg')
      );
      background-size: cover; background-position: center 20%;
    }
    .service-card:hover .bg { transform: scale(1.05); }
    .service-card .overlay {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(to top, rgba(26,26,46,0.85) 0%, rgba(26,26,46,0.2) 100%);
    }
    .service-card .card-content { position: relative; z-index: 2; }
    .service-card h5 { font-size: 20px; margin-bottom: 8px; }
    .service-card p { font-size: 14px; opacity: 0.8; margin-bottom: 16px; }
    .service-card .link-arrow {
      font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .service-card .link-arrow::after { content: '→'; }
    .rotated-text { display: none; }

    /* ===== UNIFIED PRICING ===== */
    .pricing-unified {
      padding: 80px 0; background: #0d0d0d; color: #fff;
    }
    /* Unified section header style — all sections use this */
    .section-script, .pricing-script {
      font-family: 'Clickerscript', cursive; font-size: 42px; color: #ff71cb;
      text-align: center; margin-bottom: 4px;
    }
    .section-heading, .pricing-heading {
      text-align: center; font-family: 'Rubik', sans-serif; font-size: 28px;
      font-weight: 500; letter-spacing: 2px; margin-bottom: 12px;
    }
    .pricing-sub {
      text-align: center; max-width: 560px; margin: 0 auto 40px;
      color: #999; font-size: 15px; line-height: 1.6;
    }
    .service-tabs {
      display: flex; justify-content: center; gap: 8px; margin-bottom: 48px;
    }
    .service-tab {
      padding: 12px 32px; border: 1px solid rgba(255,255,255,0.15);
      background: transparent; color: #fff; font-family: 'Rubik', sans-serif;
      font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase;
      cursor: pointer; transition: all 0.3s; border-radius: 4px;
    }
    .service-tab:hover { border-color: rgba(255,113,203,0.4); }
    .service-tab.active {
      background: #ff71cb; color: #0d0d0d; border-color: #ff9ee0; font-weight: 600;
    }
    .pricing-panel { display: none; }
    .pricing-panel.active { display: block; animation: fadeUp 0.4s ease; }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .tier-cards {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 24px; max-width: 960px; margin: 0 auto;
    }
    .tier-card {
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px; padding: 36px 28px; text-align: center;
      position: relative; transition: all 0.3s;
      display: flex; flex-direction: column; align-items: center;
    }
    .tier-card:hover {
      border-color: rgba(255,113,203,0.3);
      transform: translateY(-4px);
      box-shadow: 0 16px 48px rgba(255,113,203,0.08);
    }
    .tier-card.featured {
      border-color: #ff9ee0;
      background: rgba(255,113,203,0.06);
      transform: scale(1.04);
    }
    .tier-card.featured:hover { transform: scale(1.04) translateY(-4px); }
    .tier-popular {
      position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
      background: #ff71cb; color: #0d0d0d; padding: 4px 16px; border-radius: 20px;
      font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
      white-space: nowrap;
    }
    .tier-badge {
      font-family: 'Rubik', sans-serif; font-size: 13px; font-weight: 500;
      letter-spacing: 2px; text-transform: uppercase; color: #aaa; margin-bottom: 16px;
    }
    .tier-price {
      font-family: 'Rubik', sans-serif; font-size: 48px; font-weight: 700;
      color: #fff; line-height: 1; margin-bottom: 8px;
    }
    .tier-card.featured .tier-price { color: #ff9ee0; }
    .tier-duration {
      font-size: 14px; color: #aaa; margin-bottom: 24px;
    }
    .tier-features {
      list-style: none; text-align: left; padding: 0; margin-bottom: 28px;
      width: 100%; flex: 1 1 auto;
    }
    .tier-features li {
      padding: 8px 0; font-size: 14px; color: #e0e0e0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      display: flex; align-items: center; gap: 10px;
    }
    .tier-features li::before {
      content: '✓'; color: #ff9ee0; font-weight: 700; flex-shrink: 0;
    }
    .tier-cta {
      display: inline-block; padding: 10px 24px; border: 1px solid rgba(255,255,255,0.2);
      color: #fff; font-family: 'Rubik', sans-serif; font-size: 12px;
      font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
      text-align: center; transition: all 0.3s; border-radius: 4px;
      white-space: nowrap; width: auto; max-width: fit-content; margin: auto auto 0;
    }
    .tier-cta:hover { background: #fff; color: #0d0d0d; }
    /* All tier CTAs same style — consistent across all cards */
    .tier-note {
      text-align: center; margin-top: 32px; font-size: 13px; color: #9090a8;
      max-width: 700px; margin-left: auto; margin-right: auto;
    }

    /* ===== GALLERY PREVIEW GRID ===== */
    .gallery-preview-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 180px; gap: 8px;
    }
    .gallery-preview-grid a {
      overflow: hidden; border-radius: 4px; display: block;
    }
    .gallery-preview-grid a.gp-tall { grid-row: span 2; }
    .gallery-preview-grid img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.4s;
    }
    .gallery-preview-grid a:hover img { transform: scale(1.05); }
    @media (max-width: 767px) {
      .gallery-preview-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
      }
      .gallery-preview-grid a.gp-tall { grid-row: span 1; }
      .gallery-preview-grid img {
        height: auto; aspect-ratio: 4/3; object-fit: cover;
      }
    }

    /* ===== TESTIMONIALS SECTION ===== */
    .testimonials-section {
      padding: 80px 24px; background: #fff; text-align: center;
    }
    .testimonials-section h2 {
      color: #1a1a2e; margin-bottom: 16px;
    }
    .testimonials-section .section-lead {
      max-width: 720px; margin: 0 auto 48px;
      color: #555; font-size: 16px; line-height: 1.6;
      font-family: 'Karla', sans-serif;
    }
    .testimonial-featured {
      max-width: 700px; margin: 0 auto 48px; position: relative; padding: 40px 32px;
      background: #1a1a2e; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
    }
    .testimonial-featured .quote-mark {
      font-family: Georgia, serif; font-size: 120px; color: rgba(255,113,203,0.3);
      position: absolute; top: -20px; left: 0; line-height: 1;
    }
    .testimonial-featured .quote-mark-close {
      font-family: Georgia, serif; font-size: 120px; color: rgba(255,113,203,0.3);
      position: absolute; bottom: -40px; right: 0; line-height: 1;
    }
    .testimonial-featured blockquote {
      font-family: 'Karla', sans-serif; font-size: 20px; line-height: 1.7;
      color: rgba(255,255,255,0.82); font-style: italic; margin: 0 0 16px;
    }
    .testimonial-featured .client-name {
      font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 500;
      letter-spacing: 1px; color: #ff71cb;
    }
    .testimonial-featured .session-type {
      font-family: 'Karla', sans-serif; font-size: 13px; color: rgba(255,255,255,0.55);
    }
    .testimonial-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
      max-width: 800px; margin: 0 auto;
    }
    .testimonial-card {
      background: #1a1a2e; border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px; padding: 28px 24px; text-align: left;
      transition: border-color 0.3s;
    }
    .testimonial-card:hover { border-color: rgba(255,113,203,0.3); }
    .testimonial-card blockquote {
      font-family: 'Karla', sans-serif; font-size: 15px; line-height: 1.6;
      color: rgba(255,255,255,0.75); font-style: italic; margin: 0 0 16px;
    }
    .testimonial-card .client-name {
      font-family: 'Rubik', sans-serif; font-size: 13px; font-weight: 500;
      color: #ff71cb; letter-spacing: 0.5px;
    }
    .testimonial-card .session-type {
      font-family: 'Karla', sans-serif; font-size: 12px; color: rgba(255,255,255,0.35);
    }
    @media (max-width: 767px) {
      .testimonial-grid { grid-template-columns: 1fr; }
      .testimonial-featured blockquote { font-size: 17px; }
    }

    /* ===== CTA SECTION ===== */
    .cta-section {
      position: relative; padding: 100px 24px; text-align: center;
      background: linear-gradient(135deg, #1a1a2e 0%, #2d2d4a 100%);
      color: #fff; overflow: hidden;
    }
    .cta-section h2 {
      font-size: clamp(28px, 4vw, 48px); line-height: 1.3; margin-bottom: 32px;
    }

    .cta-form {
      max-width: 600px; margin: 0 auto;
      display: flex; flex-direction: column; gap: 12px;
    }
    .cta-form-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    }
    .form-field {
      position: relative;
      margin-top: 8px;
    }
    .form-field label {
      position: absolute; left: 0; top: 16px;
      font-family: 'Karla', sans-serif; font-size: 15px; color: rgba(255,255,255,0.45);
      pointer-events: none;
      transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
    }
    /* Floating state — focused or has content */
    .form-field input:focus ~ label,
    .form-field input:not(:placeholder-shown) ~ label,
    .form-field textarea:focus ~ label,
    .form-field textarea:not(:placeholder-shown) ~ label,
    .form-field select:focus ~ label,
    .form-field select:valid ~ label {
      top: -6px;
      font-size: 11px;
      color: rgba(255,255,255,0.6);
      letter-spacing: 0.5px;
    }
    /* Accent color on focus */
    .form-field input:focus ~ label,
    .form-field textarea:focus ~ label,
    .form-field select:focus ~ label {
      color: #ff9ee0;
    }
    /* Select: label stays inside until a real option is chosen */
    .form-field select:invalid ~ label {
      top: 16px;
      font-size: 15px;
      color: rgba(255,255,255,0.45);
      letter-spacing: 0;
    }
    .form-field select:invalid:focus ~ label {
      top: -6px;
      font-size: 11px;
      color: #ff9ee0;
      letter-spacing: 0.5px;
    }
    .form-field select:focus ~ label { color: #ff9ee0; }
    /* Underline bar for focus highlight */
    .form-field::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0;
      height: 2px; background: #ff71cb;
      transform: scaleX(0); transition: transform 0.25s ease;
    }
    .form-field:focus-within::after {
      transform: scaleX(1);
    }
    .cta-form input, .cta-form select, .cta-form textarea {
      padding: 16px 0 8px; background: transparent;
      border: none; border-bottom: 1px solid rgba(255,255,255,0.2);
      color: #fff; font-family: 'Karla', sans-serif; font-size: 15px;
      border-radius: 0; width: 100%; transition: border-color 0.2s;
    }
    .cta-form input:-webkit-autofill,
    .cta-form input:-webkit-autofill:hover,
    .cta-form input:-webkit-autofill:focus,
    .cta-form select:-webkit-autofill,
    .cta-form textarea:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px #1a1a2e inset !important;
      -webkit-text-fill-color: #fff !important;
      transition: background-color 5000s ease-in-out 0s;
      caret-color: #fff;
    }
    .cta-form input:focus, .cta-form select:focus, .cta-form textarea:focus {
      outline: none; border-bottom-color: rgba(255,255,255,0.4);
    }
    .cta-form select { -webkit-appearance: auto; }
    .cta-form select:invalid { color: transparent; }
    .cta-form select:focus, .cta-form select:valid { color: #fff; }
    .cta-form select option { color: #1a1a2e; background: #fff; }
    .cta-form select option:disabled { color: #999; }
    .cta-form textarea { resize: vertical; min-height: 80px; }
    .cta-form input::placeholder, .cta-form textarea::placeholder { color: transparent; }
    .cta-form button {
      padding: 10px 24px; background: #ff71cb; color: #fff;
      border: 1px solid #ff71cb;
      font-family: 'Rubik', sans-serif; font-size: 12px; font-weight: 500;
      letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
      transition: all 0.3s; border-radius: 4px;
      width: auto; display: inline-block; align-self: center;
    }
    .cta-form button:hover { background: #e560b5; color: #fff; border-color: #e560b5; }
    
    /* Error Message Styling */
    .email-error-msg {
      color: #ff9ee0;
      font-size: 12px;
      font-family: 'Karla', sans-serif;
      margin-top: 6px;
      margin-bottom: 2px;
      line-height: 1.4;
      font-weight: 400;
      text-decoration: none;
      position: relative;
      z-index: 10;
      left: 0;
      width: 100%;
      z-index: 10;
      background: rgba(26, 26, 26, 0.9);
      padding: 2px 0;
    }
    
    /* Inline validation error messages */
    .form-error {
      display: none;
      color: #ff9ee0;
      font-size: 11px;
      letter-spacing: 0.5px;
      margin-top: 4px;
    }

    /* Invalid field styling */
    .cta-form input.invalid,
    .cta-form textarea.invalid {
      border-bottom-color: #ff9ee0 !important;
      box-shadow: 0 1px 0 rgba(255, 113, 203, 0.3);
    }
    
    /* Invalid label styling - make labels pink when field is invalid */
    .cta-form .form-field input.invalid ~ label,
    .cta-form .form-field textarea.invalid ~ label {
      color: #ff9ee0 !important;
    }
    
    /* Focus color update to match gallery form */
    .cta-form input:focus, .cta-form select:focus, .cta-form textarea:focus {
      outline: none; border-bottom-color: #ff9ee0;
    }
    
    /* Gallery button to match submit button styling */
    .gallery-btn {
      padding: 10px 24px; background: #ff71cb; color: #1a1a2e;
      border: 1px solid #ff71cb; text-decoration: none;
      font-family: 'Rubik', sans-serif; font-size: 12px; font-weight: 500;
      letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
      transition: all 0.3s; border-radius: 4px;
      width: auto; display: inline-block;
    }
    .gallery-btn:hover { background: #e560b5; color: #1a1a2e; border-color: #e560b5; }

    /* ===== CONTACT SECTION ===== */
    .contact-section { padding: 80px 0; }
    .contact-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
      align-items: start;
    }
    .contact-info h3 { font-size: 28px; margin-bottom: 32px; }
    .contact-detail { display: flex; gap: 16px; margin-bottom: 24px; }
    .contact-detail .detail-icon {
      width: 30px; height: 30px; flex-shrink: 0;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
    }
    .contact-detail .detail-icon svg { width: 14px; height: 14px; fill: #fff; }
    .contact-detail .detail-label { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
    .contact-detail .detail-value { font-size: 14px; color: #666; }
    .contact-detail .detail-value a { color: #667eea; }
    .social-links { display: flex; gap: 12px; margin-top: 32px; }
    .social-link {
      width: 40px; height: 40px; border-radius: 50%; background: #1a1a2e;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.3s;
    }
    .social-link:hover { background: #2d2d4a; }
    .social-link svg { width: 16px; height: 16px; fill: #fff; }
    .contact-form-wrapper form {
      display: flex; flex-direction: column; gap: 0;
    }
    .contact-form-wrapper input,
    .contact-form-wrapper select,
    .contact-form-wrapper textarea {
      padding: 16px; border: 1px solid #eee; border-bottom: none;
      font-family: 'Karla', sans-serif; font-size: 14px; background: #fff;
    }
    .contact-form-wrapper textarea { border-bottom: 1px solid #eee; min-height: 120px; resize: vertical; }
    .contact-form-wrapper select { -webkit-appearance: auto; }
    .contact-form-wrapper button {
      padding: 16px; background: #1a1a2e; color: #fff; border: none;
      font-family: 'Rubik', sans-serif; font-size: 13px; letter-spacing: 2px;
      text-transform: uppercase; cursor: pointer; transition: background 0.3s;
    }
    .contact-form-wrapper button:hover { background: #2d2d4a; }

    /* ===== INSTAGRAM ===== */
    .insta-section { padding: 80px 0; text-align: center; }
    .insta-section h3 { font-size: 24px; margin-bottom: 8px; }
    .insta-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
      margin-top: 40px;
    }
    .insta-item {
      position: relative; aspect-ratio: 1; overflow: hidden;
    }
    .insta-item img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .insta-item .insta-hover {
      position: absolute; inset: 0; background: rgba(26,26,46,0.6);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity 0.3s;
    }
    .insta-item:hover .insta-hover { opacity: 1; }
    .insta-item .insta-hover svg { width: 40px; height: 40px; fill: #fff; }

    /* ===== FOOTER ===== */
    .footer {
      background: #1a1a2e; color: #fff; padding: 40px 0 0;
    }
    .footer-cols {
      display: grid; grid-template-columns: auto auto; gap: 80px;
      justify-content: center; text-align: center;
      padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .footer-col-title {
      font-family: 'Rubik', sans-serif; font-size: 12px; font-weight: 600;
      letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.4);
      margin-bottom: 16px;
    }
    .footer-nav { display: flex; flex-direction: column; gap: 10px; }
    .footer-nav a {
      font-size: 14px; color: rgba(255,255,255,0.7); transition: color 0.2s;
    }
    .footer-nav a:hover { color: #fff; }
    .footer-social-col { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
    .footer-social-col a {
      width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.15);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      transition: border-color 0.3s, background 0.3s;
    }
    .footer-social-col a:hover { border-color: #ff9ee0; background: rgba(255,113,203,0.1); }
    .footer-social-col svg { width: 16px; height: 16px; fill: #fff; }
    .footer-bottom {
      display: flex; align-items: center; justify-content: center;
      flex-wrap: wrap; gap: 12px; padding: 20px 0;
      font-size: 14px; color: rgba(255,255,255,0.5); text-align: center;
    }
    .footer-bottom a { color: rgba(255,255,255,0.5); text-decoration: underline; transition: color 0.2s; }
    .footer-bottom a:hover { color: #fff; }
    .footer-sep { opacity: 0.3; }
    @media (max-width: 479px) {
      .footer-cols { grid-template-columns: 1fr; text-align: center; }
      .footer-social-col { justify-content: center; }
    }

    /* ===== BACK TO TOP ===== */
    .back-to-top {
      position: fixed; bottom: 32px; right: 32px; width: 44px; height: 44px;
      background: #1a1a2e; color: #fff; border: none; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; opacity: 0; transition: opacity 0.3s; z-index: 99;
    }
    .back-to-top.visible { opacity: 1; }
    .back-to-top svg { width: 16px; height: 16px; fill: #fff; }

    /* ===== ANIMATIONS ===== */
    .fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
    .fade-in.visible { opacity: 1; transform: translateY(0); }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 991px) {
      .hero-grid { grid-template-columns: repeat(4, 1fr); }
      .hero-col:nth-child(n+5) { display: none; }
      .about-split { grid-template-columns: 1fr; }
      .about-image-col { min-height: 300px; }
      .services-grid { grid-template-columns: 1fr; }
      .service-card { min-height: 300px; }
      .pricing-cards { grid-template-columns: 1fr 1fr; }
      .contact-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 767px) {
      .nav-links { display: none; }
      .nav-links.open {
        display: flex; flex-direction: column; position: absolute;
        top: 100%; left: 0; right: 0; background: rgba(26,26,46,0.98);
        padding: 32px; gap: 24px;
      }
      .nav-toggle { display: block; }
      .hero-grid { grid-template-columns: repeat(3, 1fr); }
      .hero-col:nth-child(n+4) { display: none; }
      .pricing-cards { grid-template-columns: 1fr; max-width: 400px; }
      .insta-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 479px) {
      .hero-grid { grid-template-columns: repeat(2, 1fr); }
      .hero-col:nth-child(n+3) { display: none; }
      .intro-features { gap: 24px; }
      .intro-feature { flex: 0 0 110px; }
      .mini-features { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px; }
      .mini-feature { flex: 1 1 0; min-width: 0; }
      .mini-feature p { font-size: 11px; line-height: 1.3; }
      .mini-feature p br { display: none; }
      .cta-form-row { grid-template-columns: 1fr; }
      .tier-cards { grid-template-columns: 1fr; max-width: 400px; }
      .tier-card.featured { transform: none; }
      .tier-card.featured:hover { transform: translateY(-4px); }
      .service-tabs { flex-wrap: nowrap; gap: 4px; }
      .service-tab { padding: 10px 20px; font-size: 12px; letter-spacing: 1px; }
    }
    /* Landscape phones — shorter viewport, adjust hero image aspect ratio */
    @media (max-height: 500px) and (orientation: landscape) {
      .hero { min-height: 100vh; }
      .hero-col img { aspect-ratio: 1/1; object-position: center center; }
      .about-image-col { min-height: 350px; }
      .services-grid { grid-template-columns: repeat(3, 1fr); min-height: 300px; }
      .service-card { min-height: 300px; }
    }

    /* ===== LEGAL MODALS ===== */
    .legal-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
    .legal-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
    .legal-modal-content {
      position: relative; background: #fff; max-width: 700px; width: 90%; max-height: 80vh;
      overflow-y: auto; padding: 48px 40px; border-radius: 8px; color: #333;
    }
    .legal-modal-content h2 { font-size: 28px; margin-bottom: 16px; color: #1a1a2e; }
    .legal-modal-content h3 { font-size: 18px; margin: 24px 0 8px; color: #1a1a2e; }
    .legal-modal-content p { margin-bottom: 12px; line-height: 1.7; }
    .legal-close {
      position: absolute; top: 16px; right: 16px; background: none; border: none;
      font-size: 28px; cursor: pointer; color: #666; line-height: 1;
    }
    .legal-close:hover { color: #333; }

    /* ===== SKIP LINK (ADA) ===== */
    .skip-link {
      position: absolute; top: -40px; left: 0; background: #1a1a2e;
      color: #fff; padding: 8px 16px; z-index: 200; transition: top 0.3s;
    }
    .skip-link:focus { top: 0; }
    /* Accessibility: respect reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
  
    .form-success {
      text-align: center;
      padding: 40px 20px;
      color: #fff;
      animation: fadeIn 0.5s ease;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }