/* =====================================================
   WW2 AGENCY — CONTACTO / STYLES.CSS
   ===================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&display=swap');

   /* ── Variables ─────────────────────────────────────── */
   :root {
     --color-primary:    #FFD000;
     --color-bg-dark:    #0A0A0A;
     --color-card-dark:  #1E1E1E;
     --color-muted:      #64748b;
     --font-display:     'Inter', sans-serif;
     --font-bebas:       'Bebas Neue', cursive;
     --max-width:        1280px;
     --radius:           0.5rem;
     --radius-lg:        0.75rem;
     --radius-full:      9999px;
   }
   
   /* ── Reset ─────────────────────────────────────────── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   html { scroll-behavior: smooth; }
   
   body {
     background-color: var(--color-bg-dark);
     font-family: var(--font-display);
     color: #f1f5f9;
     overflow-x: hidden;
   }
   
   ::selection {
     background-color: var(--color-primary);
     color: var(--color-bg-dark);
   }
   
   /* ── Shared: Header ────────────────────────────────── */
   .site-header {
     position: sticky;
     top: 0;
     z-index: 50;
     width: 100%;
     border-bottom: 1px solid rgba(255,255,255,0.1);
     background-color: rgba(10,10,10,0.95);
     backdrop-filter: blur(12px);
   }
   
   .header-inner {
     max-width: var(--max-width);
     margin: 0 auto;
     padding: 0 1.5rem;
     height: 4rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
   }
   
   .logo {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     color: var(--color-primary);
     text-decoration: none;
     flex-shrink: 0;
   }
   
   .logo-icon { font-size: 1.5rem; }
   .logo-text  { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.05em; font-style: italic; }
   
   .desktop-nav { display: none; align-items: center; gap: 2.5rem; }
   
   .desktop-nav a {
     font-size: 0.875rem;
     font-weight: 600;
     color: #f1f5f9;
     text-decoration: none;
     transition: color 0.2s;
   }
   
   .desktop-nav a:hover,
   .desktop-nav a.nav-active { color: var(--color-primary); }
   
   .desktop-nav a.nav-active {
     border-bottom: 2px solid var(--color-primary);
     padding-bottom: 0.25rem;
   }
   
   .btn-header {
     display: none;
     background-color: var(--color-primary);
     color: var(--color-bg-dark);
     padding: 0.625rem 1.5rem;
     border-radius: var(--radius);
     font-weight: 700;
     font-size: 0.875rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     border: none;
     cursor: pointer;
     transition: filter 0.2s;
     white-space: nowrap;
   }
   
   .btn-header:hover { filter: brightness(1.1); }
   
   .btn-hamburger {
     display: flex;
     background: none;
     border: none;
     cursor: pointer;
     color: var(--color-primary);
     padding: 0;
   }
   
   .btn-hamburger .material-symbols-outlined { font-size: 1.875rem; }
   
   .mobile-menu {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.35s ease;
     border-top: 1px solid rgba(255,255,255,0.08);
     background-color: rgba(10,10,10,0.98);
   }
   
   .mobile-menu.open { max-height: 440px; }
   
   .mobile-nav {
     display: flex;
     flex-direction: column;
     padding: 1.5rem;
     gap: 1.25rem;
   }
   
   .mobile-nav a {
     font-size: 0.875rem;
     font-weight: 900;
     text-transform: uppercase;
     letter-spacing: 0.15em;
     color: #f1f5f9;
     text-decoration: none;
     transition: color 0.2s;
   }
   
   .mobile-nav a:hover,
   .mobile-nav a.nav-active { color: var(--color-primary); }
   
   .btn-mobile-cta {
     width: 100%;
     background-color: var(--color-primary);
     color: var(--color-bg-dark);
     padding: 1rem;
     border-radius: var(--radius);
     font-weight: 900;
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.15em;
     border: none;
     cursor: pointer;
     margin-top: 0.25rem;
   }
   
   /* ── Page Hero ─────────────────────────────────────── */
   .contact-hero {
     position: relative;
     padding: 4rem 1.5rem;
     border-bottom: 1px solid rgba(255,255,255,0.05);
     overflow: hidden;
     text-align: center;
   }
   
   .contact-hero-glow {
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at 50% 50%, rgba(255,208,0,0.05), transparent 70%);
     pointer-events: none;
   }
   
   .contact-hero-inner {
     position: relative;
     z-index: 1;
     max-width: var(--max-width);
     margin: 0 auto;
   }
   
   .contact-hero-title {
     font-family: var(--font-display);
     font-size: 3rem;
     font-weight: 900;
     letter-spacing: -0.04em;
     line-height: 0.95;
     text-transform: uppercase;
     margin-bottom: 1.5rem;
   }
   
   /* Mobile: use Bebas Neue like code_3 */
   @supports (font-family: 'Bebas Neue') {
     .contact-hero-title {
       font-family: var(--font-bebas);
       font-size: 3.25rem;
       letter-spacing: 0.01em;
       line-height: 0.9;
     }
   }
   
   .contact-hero-highlight {
     color: var(--color-primary);
     font-style: italic;
   }
   
   .contact-hero-subtitle {
     font-size: 1rem;
     color: #94a3b8;
     font-weight: 300;
     line-height: 1.7;
     max-width: 36rem;
     margin: 0 auto;
   }
   
   /* ── Contact Split ─────────────────────────────────── */
   .contact-split {
     padding: 4rem 1.5rem;
   }
   
   .contact-split-inner {
     max-width: var(--max-width);
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     gap: 3rem;
   }
   
   /* ── Left: Info ────────────────────────────────────── */
   .contact-info {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 2.5rem;
   }
   
   .contact-info-top { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
   
   .contact-badge {
     display: inline-block;
     background-color: var(--color-primary);
     color: var(--color-bg-dark);
     font-size: 0.625rem;
     font-weight: 900;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     padding: 0.375rem 1rem;
     border-radius: var(--radius-full);
   }
   
   .contact-info-title {
     font-size: 1.875rem;
     font-weight: 900;
     line-height: 1.2;
   }
   
   /* Channels */
   .contact-channels {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 2.5rem;
     width: 100%;
   }
   
   .contact-channel {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.75rem;
   }
   
   .channel-icon {
     width: 3.5rem;
     height: 3.5rem;
     border-radius: 50%;
     background: rgba(255,208,0,0.1);
     border: 1px solid rgba(255,208,0,0.2);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--color-primary);
     flex-shrink: 0;
   }
   
   .channel-icon .material-symbols-outlined { font-size: 1.5rem; }
   
   .channel-label {
     display: block;
     font-size: 0.625rem;
     font-weight: 700;
     color: var(--color-muted);
     text-transform: uppercase;
     letter-spacing: 0.2em;
     margin-bottom: 0.25rem;
   }
   
   .channel-value {
     font-size: 1.125rem;
     font-weight: 600;
   }
   
   /* Social */
   .contact-social {
     display: flex;
     gap: 1rem;
     justify-content: center;
   }
   
   .social-icon-btn {
     width: 3rem;
     height: 3rem;
     border-radius: 50%;
     background: rgba(30,41,59,0.5);
     border: 1px solid rgba(255,255,255,0.05);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #94a3b8;
     text-decoration: none;
     transition: background 0.2s, color 0.2s;
   }
   
   .social-icon-btn:hover {
     background: var(--color-primary);
     color: var(--color-bg-dark);
   }
   
   /* Response badge */
   .contact-response-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.625rem 1.25rem;
     background: rgba(255,208,0,0.1);
     border: 1px solid rgba(255,208,0,0.2);
     border-radius: var(--radius-full);
   }
   
   .response-dot { position: relative; display: flex; width: 0.625rem; height: 0.625rem; flex-shrink: 0; }
   
   .response-dot-ping {
     position: absolute;
     inset: 0;
     border-radius: 50%;
     background: var(--color-primary);
     opacity: 0.75;
     animation: ping 1.5s cubic-bezier(0,0,0.2,1) infinite;
   }
   
   .response-dot-solid {
     position: relative;
     width: 0.625rem;
     height: 0.625rem;
     border-radius: 50%;
     background: var(--color-primary);
   }
   
   @keyframes ping {
     75%, 100% { transform: scale(2); opacity: 0; }
   }
   
   .response-text {
     font-size: 0.625rem;
     font-weight: 700;
     color: var(--color-primary);
     text-transform: uppercase;
     letter-spacing: 0.1em;
   }
   
   /* ── Right: Form Card ──────────────────────────────── */
   .contact-form-card {
     background-color: var(--color-card-dark);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     border: 1px solid rgba(255,255,255,0.05);
     box-shadow: 0 25px 50px rgba(0,0,0,0.4);
   }
   
   .contact-form {
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
   }
   
   .form-row {
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
   }
   
   .form-group {
     display: flex;
     flex-direction: column;
     gap: 0.375rem;
   }
   
   .form-label {
     font-size: 0.625rem;
     font-weight: 700;
     color: #94a3b8;
     text-transform: uppercase;
     letter-spacing: 0.15em;
   }
   
   .form-input {
     width: 100%;
     background-color: var(--color-bg-dark);
     border: 1px solid #1e293b;
     border-radius: var(--radius);
     color: #f1f5f9;
     padding: 0.875rem 1rem;
     font-family: var(--font-display);
     font-size: 0.9375rem;
     transition: border-color 0.2s, box-shadow 0.2s;
     outline: none;
     appearance: none;
     -webkit-appearance: none;
   }
   
   .form-input::placeholder { color: #475569; }
   
   .form-input:focus {
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px rgba(255,208,0,0.1);
   }
   
   .form-textarea { resize: none; }
   
   /* Custom select */
   .select-wrapper { position: relative; }
   
   .form-select { cursor: pointer; padding-right: 2.5rem; }
   
   .select-arrow {
     position: absolute;
     right: 0.75rem;
     top: 50%;
     transform: translateY(-50%);
     color: #64748b;
     pointer-events: none;
     font-size: 1.25rem;
   }
   
   /* Submit button */
   .btn-submit {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.75rem;
     width: 100%;
     background-color: var(--color-primary);
     color: var(--color-bg-dark);
     padding: 1.25rem;
     border-radius: var(--radius);
     font-weight: 900;
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     border: none;
     cursor: pointer;
     transition: filter 0.2s, transform 0.15s;
     box-shadow: 0 10px 30px rgba(255,208,0,0.2);
   }
   
   .btn-submit:hover  { filter: brightness(1.1); }
   .btn-submit:active { transform: scale(0.98); }
   
   .btn-submit .material-symbols-outlined { font-size: 1.25rem; }
   
   /* ── Audit Banner ──────────────────────────────────── */
   .audit-banner {
     background-color: var(--color-primary);
     padding: 4rem 1.5rem;
     margin-top: 0;
     text-align: center;
   }
   
   .audit-banner-inner {
     max-width: var(--max-width);
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2rem;
   }
   
   .audit-banner-text { display: flex; flex-direction: column; gap: 0.75rem; }
   
   .audit-banner-title {
     color: var(--color-bg-dark);
     font-size: 2rem;
     font-weight: 900;
     font-style: italic;
     letter-spacing: -0.04em;
     line-height: 1.05;
     text-transform: uppercase;
   }
   
   .audit-banner-subtitle {
     color: rgba(10,10,10,0.7);
     font-size: 0.875rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     max-width: 20rem;
     margin: 0 auto;
   }
   
   .btn-audit {
     width: 100%;
     background-color: var(--color-bg-dark);
     color: var(--color-primary);
     padding: 1.25rem 2rem;
     border-radius: var(--radius);
     font-weight: 900;
     font-size: 0.875rem;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     border: none;
     cursor: pointer;
     box-shadow: 0 20px 40px rgba(0,0,0,0.3);
     transition: transform 0.2s;
     white-space: nowrap;
   }
   
   .btn-audit:hover  { transform: scale(1.03); }
   .btn-audit:active { transform: scale(0.98); }
   
   /* ── Footer ────────────────────────────────────────── */
   .site-footer {
     background-color: var(--color-bg-dark);
     border-top: 1px solid rgba(255,255,255,0.05);
     padding: 4rem 1.5rem;
   }
   
   .footer-inner { max-width: var(--max-width); margin: 0 auto; }
   
   .footer-main {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 2.5rem;
     margin-bottom: 4rem;
   }
   
   .footer-brand { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
   
   .footer-logo {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     color: var(--color-primary);
     text-decoration: none;
   }
   
   .footer-logo-text { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.05em; font-style: italic; }
   
   .footer-tagline { color: #475569; font-size: 0.875rem; font-weight: 500; max-width: 18rem; }
   
   .footer-nav {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1.5rem;
   }
   
   .footer-nav a {
     font-size: 0.875rem;
     font-weight: 700;
     color: #94a3b8;
     text-decoration: none;
     text-transform: uppercase;
     letter-spacing: 0.15em;
     transition: color 0.2s;
   }
   
   .footer-nav a:hover,
   .footer-nav a.nav-active { color: var(--color-primary); }
   
   .footer-bottom {
     padding-top: 2rem;
     border-top: 1px solid rgba(255,255,255,0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1rem;
     font-size: 0.625rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.2em;
     color: #334155;
   }
   
   .footer-bottom-links { display: flex; gap: 2rem; }
   .footer-bottom-links a { color: #334155; text-decoration: none; transition: color 0.2s; }
   .footer-bottom-links a:hover { color: var(--color-primary); }
   
   /* =====================================================
      TABLET  ≥ 768px
      ===================================================== */
   @media (min-width: 768px) {
   
     /* Header */
     .header-inner    { height: 5rem; padding: 0 1.5rem; }
     .desktop-nav     { display: flex; }
     .btn-header      { display: block; }
     .btn-hamburger   { display: none; }
     .logo-icon       { font-size: 1.75rem; }
     .logo-text       { font-size: 1.5rem; }
   
     /* Hero */
     .contact-hero         { padding: 5rem 1.5rem; }
     .contact-hero-title   { font-size: 4.5rem; }
     .contact-hero-subtitle { font-size: 1.125rem; }
   
     /* Contact info: horizontal channels */
     .contact-info { align-items: flex-start; text-align: left; }
     .contact-info-top { align-items: flex-start; }
     .contact-channels { gap: 2rem; }
   
     .contact-channel {
       flex-direction: row;
       align-items: flex-start;
       gap: 1.25rem;
     }
   
     .channel-icon {
       width: 3rem;
       height: 3rem;
       border-radius: var(--radius);
     }
   
     .contact-social { justify-content: flex-start; }
     .contact-response-badge { align-self: flex-start; }
   
     .contact-info-title { font-size: 2.25rem; }
   
     /* Form row: 2 cols */
     .form-row { flex-direction: row; gap: 1.5rem; }
     .form-row .form-group { flex: 1; }
   
     /* Form card padding */
     .contact-form-card { padding: 2.5rem; }
   
     /* Audit banner */
     .audit-banner-title  { font-size: 2.5rem; }
     .audit-banner-subtitle { display: none; }
     .btn-audit           { width: auto; padding: 1.25rem 2.5rem; }
   
     /* Footer */
     .footer-main {
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
       text-align: left;
     }
   
     .footer-brand { align-items: flex-start; }
   
     .footer-nav { flex-direction: row; gap: 3rem; }
   
     .footer-bottom { flex-direction: row; justify-content: space-between; }
   }
   
   /* =====================================================
      DESKTOP  ≥ 1024px
      ===================================================== */
   @media (min-width: 1024px) {
   
     /* Header */
     .header-inner { padding: 0 2.5rem; }
   
     /* Hero */
     .contact-hero         { padding: 6rem 2.5rem; }
     .contact-hero-title   { font-size: 6rem; }
     .contact-hero-subtitle { font-size: 1.25rem; }
   
     /* Contact split: 2 columns */
     .contact-split { padding: 5rem 2.5rem; }
   
     .contact-split-inner {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 4rem;
       align-items: start;
     }
   
     .contact-info { gap: 3rem; }
     .contact-info-title { font-size: 3rem; line-height: 1.05; }
   
     .channel-icon { width: 3rem; height: 3rem; }
     .channel-value { font-size: 1.25rem; }
   
     /* Form */
     .contact-form-card { padding: 3rem; }
     .btn-submit { font-size: 1.125rem; padding: 1.375rem; }
   
     /* Audit banner: horizontal */
     .audit-banner { padding: 4rem 2.5rem; }
   
     .audit-banner-inner {
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
       text-align: left;
     }
   
     .audit-banner-title { font-size: 3rem; }
     .audit-banner-subtitle { display: block; margin: 0; }
   
     /* Footer */
     .site-footer { padding: 4rem 2.5rem; }
   }