:root {
            --violet: #6200EE; /* Violent Purple */
            --tangerine: #FF6D00; /* Florida O'rage */
            --black: #000000; /* Black Out */
            --white: #FFFFFF; /* White Hot */
            --paper: #F0F0F0; /* Paper Cuts White */
            --font-heading: 'Unbounded', sans-serif;
            --font-body: 'DM Sans', sans-serif;
            --font-accent: 'Space Grotesk', sans-serif;
        }

/* ════════════ GLOBAL RESETS & MARGIN FIX ════════════ */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

html, body { 
    margin: 0 !important; 
    padding: 0 !important; 
    width: 100%; 
    background: var(--violet); 
    color: var(--white); 
    overflow-x: hidden; 
    line-height: 1.4; 
}

.site-header {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ════════════ THE NUCLEAR FONT OVERRIDE ════════════ */
body, p, a, span { /* Removed 'div' from this list to fix your quote font! */
    font-family: 'DM Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .pop-title, .section-title, .trad-quote {
    font-family: 'Unbounded', sans-serif !important;
}

.hero-question, .tagline, .eyebrow {
    font-family: 'Space Grotesk', sans-serif !important;
}

button, input, .intent-btn {
    color: var(--black); /* Stops iOS from turning your buttons blue */
}

/* ════════════ HEADER & NAV ════════════ */
.site-header {
    background: var(--paper);
    border-bottom: 8px solid var(--black);
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 0 rgba(0,0,0,0.1);
}

.logo-container {
    display: flex;
    align-items: center;
    flex-shrink: 0; 
}

.nav-logo {
    height: 60px;
    width: auto;
    display: block;
    transition: transform 0.2s;
}

.nav-logo:hover {
    transform: scale(1.05) rotate(-2deg);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 25px; 
}

.nav-links a {
    text-decoration: none;
    color: var(--black);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.95rem; 
    letter-spacing: 0.05em;
    position: relative;
    white-space: nowrap; 
}

/* Hover effect for text links */
.nav-links a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;
    height: 4px;
    background: var(--tangerine);
    transition: width 0.3s ease;
}

.nav-links a:not(.nav-cta):hover::after {
    width: 100%;
}

/* CTA Button Style */
.nav-cta {
    background: var(--tangerine);
    color: var(--black) !important;
    padding: 12px 30px;
    border: 3px solid var(--black);
    box-shadow: 4px 4px 0 var(--black);
    transition: all 0.2s ease;
}

.nav-cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--black);
    background: var(--white);
}

/* ════════════ RESPONSIVE HEADER ════════════ */
@media (max-width: 900px) {
    .site-header {
        padding: 15px 20px !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start; 
    }

    .logo-container {
        margin-bottom: 15px;
    }

    .nav-logo {
        height: 50px; 
    }

    .nav-links {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center; 
        gap: 15px;
    }

    .nav-links a:not(.nav-cta) {
        font-size: 0.8rem;
        padding: 0;
    }

    .nav-cta {
        position: absolute !important;
        top: 15px !important; 
        right: 25px !important; 
        margin: 0 !important;
        width: auto !important; 
        padding: 10px 18px !important;
        font-size: 0.65rem !important;
    }
}

/* ════════════ HERO ════════════ */
.hero { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.hero-container { display: grid; grid-template-columns: 1.2fr 1fr; background: var(--white); color: var(--black); border: 8px solid var(--black); box-shadow: 20px 20px 0px var(--tangerine); max-width: 1200px; width: 100%; position: relative; }
.content-pane { padding: 4rem; border-right: 8px solid var(--black); z-index: 2; }
h1 { 
    font-family: 'Unbounded', sans-serif; 
    font-size: clamp(2.5rem, 8vw, 4.5rem); /* Dynamically scales */
    line-height: 0.85; 
    margin-bottom: 2rem; 
    text-transform: uppercase; 
}
.tagline { font-family: 'Space Grotesk', sans-serif; font-weight: 900; font-size: 1.2rem; margin-bottom: 1rem; color: var(--violet); letter-spacing: 2px; }
.hero-single {
  grid-template-columns: 1fr;
}

.no-image {
  border-right: none;
}

.hero-question {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 2rem;
}

/* INTENT BUTTONS */

.intent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 420px;
}

.intent-btn {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  padding: 22px;
  border: 6px solid var(--black);
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 8px 8px 0 var(--black);
  transition: all 0.2s ease;
  background: white;
}

.intent-btn:hover {
  transform: translate(-4px,-4px);
  box-shadow: 14px 14px 0 var(--black);
}

.intent-btn.money { background: var(--tangerine); }
.intent-btn.fun { background: var(--violet); color:white; }
.intent-btn.same { background: var(--paper); }

/* POPUP FORM */

.intent-form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.intent-form input,
.intent-form textarea {
  border: 4px solid black;
  padding: 14px;
  font-weight: 700;
}

.intent-form button {
  background: var(--violet);
  color: white;
  border: 4px solid black;
  padding: 16px;
  font-family: 'Space Grotesk', sans-serif;
  cursor: pointer;
}

/* ════════════ POPUP ACTION BUTTON GROUP ════════════ */

.pop-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 2rem;
}

@media (max-width: 700px){
  .pop-actions{
    grid-template-columns: 1fr;
  }
}


/* ════════════ POPUP ACTION BUTTONS ════════════ */

.pop-btn{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;

  padding: 16px 18px;
  border: 4px solid var(--black);
  cursor: pointer;

  background: var(--white);
  color: var(--black);

  box-shadow: 8px 8px 0 var(--black);
  transition: all .18s ease;
}

/* hover = lift + offset exaggeration */
.pop-btn:hover{
  transform: translate(-3px, -3px);
  box-shadow: 12px 12px 0 var(--black);
}

/* active = pressed-in */
.pop-btn:active{
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 var(--black);
}


/* ════════════ VARIANTS ════════════ */

/* Primary = orange brand hit */
.pop-btn.primary{
  background: var(--tangerine);
  color: var(--black);
}

/* Ghost = paper / neutral */
.pop-btn.ghost{
  background: var(--paper);
  color: var(--black);
}


/* Optional: focus accessibility */
.pop-btn:focus-visible{
  outline: 4px solid var(--purple);
  outline-offset: 2px;
}


/* HERO SPLIT WITH STATIC IMAGE */

.hero-split {
  grid-template-columns: 1.2fr 1fr;
}

.image-pane {
  position: relative;
  background: transparent;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-left: 8px solid var(--black);
}
.image-pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .image-pane {
    border-left: none;
    border-top: 8px solid var(--black);
    padding: 16px;
  }
}


  .image-pane-static {
    border-left: none;
    border-top: 8px solid var(--black);
  }

  .image-pane-static img {
    max-height: 420px;
  }



/* ════════════ MODAL & OVERLAY ════════════ */
.modal-overlay {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(98, 0, 238, 0.85); /* Brand Violet with transparency */
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px); /* Adds a subtle blur to the background */
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.info-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);

    width: 92%;
    max-width: 760px;      /* ⬅️ bigger */
    max-height: 85vh;      /* ⬅️ scrollable */

    background: var(--white);
    border: 8px solid var(--black);
    padding: 3.5rem;

    box-shadow: 24px 24px 0px var(--black);
    z-index: 2001;

    overflow-y: auto;      /* ⬅️ allows long text */

    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(.2,.9,.2,1);
}

.pop-title {
  font-family: 'Unbounded';
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.info-popup p {
  font-size: 1.15rem;
  line-height: 1.6;
  font-weight: 600;
}

.info-popup.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Close Buttons */
.close-pop { cursor: pointer; display: block; margin-top: 2rem; font-weight: 900; text-transform: uppercase; text-decoration: underline; color: var(--violet); text-align: center; }
.close-x { position: absolute; top: 15px; right: 15px; font-size: 2rem; font-weight: 900; cursor: pointer; line-height: 0.8; color: var(--black); transition: color 0.2s; }
.close-x:hover { color: var(--tangerine); }


/* ════════════ MARQUEE ════════════ */
.marquee-bar { background: var(--tangerine); border-top: 8px solid var(--black); border-bottom: 8px solid var(--black); padding: 15px 0; overflow: hidden; white-space: nowrap; }
.marquee-inner { display: inline-block; font-family: 'Unbounded'; font-size: 1.5rem; font-weight: 900; color: white; animation: marquee 35s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Import fonts from original file to ensure exact look */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@400;600;700&display=swap');

/* ════════════ CREATIVE PILLARS HEADER ════════════ */

.pillars-intro .eyebrow{
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  color: var(--violet);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* Make this match the UNBLOCKABLE MEDIA headline vibe */
.branding-pillars .section-title {
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(2rem, 6vw, 3.5rem); 
    line-height: 0.9;
    margin: 1.2rem 0 1.5rem;
    text-transform: uppercase;
    color: var(--black);
}

/* Optional: tighten the subhead to feel like the Unblockable Media block */
.branding-pillars .section-sub{
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  max-width: 900px;
  margin: 0 auto;
}


/* ════════════ BRANDING PILLARS (FLIP CARDS) ════════════ */
.branding-pillars {
    padding: 100px 20px;
    background: var(--paper);
    border-top: 8px solid var(--black);
}

.pillars-container {
    max-width: 1200px;
    margin: 0 auto;
}

.pillars-intro {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 3rem;
    color: var(--black);
    margin-bottom: 1.5rem;
}

.section-sub {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--black);
    max-width: 800px;
    margin: 0 auto;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

/* FLIP CARD LOGIC & LAYOUT */
.pillar-card-wrap {
    perspective: 1000px;
    height: 460px; 
}

.pillar-card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}

.pillar-card-wrap:hover .pillar-card {
    transform: rotateY(180deg);
}

.pillar-front, .pillar-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 8px solid var(--black);
    padding: 2.2rem;
    display: flex;
    flex-direction: column;
}

.pillar-front {
    background: var(--white);
    box-shadow: 15px 15px 0px var(--violet); 
    color: var(--black);
    justify-content: space-between; /* Stretches the elements to top, middle, and bottom */
    gap: 0; /* Removes the forced clustering */
}

.pillar-back {
    background: var(--white);
    color: var(--black);
    transform: rotateY(180deg);
    box-shadow: -15px 15px 0px var(--black);
    justify-content: center;
    text-align: left;
    overflow-y: auto; 
}

.pillar-back::-webkit-scrollbar {
    width: 6px;
}

.pillar-back::-webkit-scrollbar-thumb {
    background-color: var(--tangerine);
}

/* FLIP CARD TYPOGRAPHY */
.pillar-num {
    font-family: 'Unbounded', sans-serif !important;
    font-size: 4rem;
    color: var(--tangerine);
    -webkit-text-stroke: 2px var(--black);
    line-height: 1;
}

.pillar-front h3 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 900;
    font-size: 2.5rem;
}

.pillar-back p {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* FLIP CARD MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
    .section-title { 
        font-size: 2rem; 
    }
    .pillar-card-wrap { 
        height: 480px; 
    }
    .pillar-front h3 {
        font-size: 2.5rem; 
    }
}

/* ===== DIGITAL SECTION LAYOUT + BALANCED SPACING ===== */

.module-section{
  background: var(--violet);
  padding: clamp(70px, 7vw, 110px) 20px;
  border-top: 8px solid var(--black);

  /* key fix: stop vertically-centering everything */
  min-height: auto;
  display: block;
}

.digital-wrap{
  max-width: 1400px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 44px);
}

/* tighten/center intro so it “reads” like a header, not a floating block */
.digital-intro{
  width: 100%;
  max-width: 1100px;
  margin: 0;             /* was auto-centered with big bottom margin */
  padding: 0;
  color: var(--white);
}

.digital-intro .eyebrow{
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--paper);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.digital-title{
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  font-size: clamp(1.7rem, 8vw, 4.2rem);
  line-height: 0.95;
  margin-bottom: 14px;
  color: var(--white);
  text-transform: uppercase;
}

.digital-description{
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  line-height: 1.55;
  max-width: 900px;
  color: rgba(255,255,255,.9);
  margin-bottom: 18px;
}

/* CTA — complete the missing hover rule */
.brutalist-popup-cta{
  background: var(--violet);
  color: var(--paper);
  border: 4px solid var(--black);
  padding: 16px 22px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 8px 8px 0 var(--black);
  transition: all .18s ease;
}

.brutalist-popup-cta:hover{
  transform: translate(-3px, -3px);
  box-shadow: 12px 12px 0 var(--black);
  background: var(--white);
    color: var(--violet);
}

.brutalist-popup-cta:active{
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 var(--black);
}

/* keep the visual interface centered and consistent under the header */
.visual-interface{
  margin: 0;            /* remove accidental centering weirdness */
}

/* responsive: reduce headline + keep spacing clean */
@media (max-width: 900px){
  .digital-intro{
    max-width: 100%;
  }
}



/* ════════════ VISUAL MODULE SECTION ════════════ */
/* New Wrapper for VH and Spacing */
.module-section {
    background: var(--violet);
    padding: 100px 20px;
    border-top: 8px solid var(--black);
    min-height: 90vh; /* Increases vertical height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-interface {
    /* Scoped Colors - Keeping Original Logic */
    --primary: #000000;
    --accent: #FF3B30; /* Original Red */
    --bg: #FFFFFF;
    --text: #1a1a1a;
    --gray: #666666;
    --light-gray: #f5f5f5;
    --success: #34C759; /* Original Green */
    
    /* Layout */
    display: grid;
    grid-template-columns: 240px 1fr; /* Wider sidebar for new fonts */
    gap: 3rem; /* Increased gap */
    width: 100%;
    max-width: 1400px; /* Wider container */
    font-family: 'DM Sans', sans-serif; /* Brand Body Font */
    text-align: left;
}

/* Selectors - UPDATED TO BRAND STYLE */
.visual-selectors {
    position: sticky;
    top: 40px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.selector-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem; /* Larger click area */
    background: white;
    border: 4px solid var(--primary); /* Thicker border */
    cursor: pointer;
    transition: all 0.2s ease;
  font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    color: var(--primary);
    box-shadow: 8px 8px 0 var(--black); /* Brand Shadow */
    text-transform: uppercase;
}

.selector-btn:hover {
    background: var(--tangerine); 
    color: white;
    border-color: var(--black);
    transform: translate(-2px, -2px);
    box-shadow: 12px 12px 0 var(--black);
}

.selector-btn.active {
    background: var(--tangerine); 
    color: white;
    border-color: var(--black);
    transform: translate(0, 0);
    box-shadow: 4px 4px 0 var(--black); /* Depressed state */
}

.selector-icon { font-size: 1.5rem; }

/* Content Area */
.visual-content-area { position: relative; }

.visual-module {
    display: none;
    animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.visual-module.active { display: block; }

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* The Main Display Box - UPDATED TO BRAND STYLE */
.visual-box {
    background: white;
    border: 8px solid var(--primary); /* Thick Brand Border */
    padding: 4rem; /* Generous Padding */
    box-shadow: 15px 15px 0 var(--black); /* Hard Brand Shadow */
    min-height: 600px; /* Force Height */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.visual-title {
    font-family: 'Unbounded', cursive; /* Brand Header Font */
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    line-height: 1.1;
    color: var(--primary);
    text-transform: uppercase;
}

/* --- EMAIL INBOX VISUAL --- */
.email-inbox {
    max-width: 800px;
    margin: 0 auto;
    background: #f8f9fa;
    border: 4px solid var(--black);
    font-family: 'DM Sans', sans-serif;
    color: #333;
}

.inbox-header {
    background: var(--black);
    color: white;
    padding: 1rem 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
}

.inbox-list { background: white; }

.email-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
    transition: all 0.3s ease;
    opacity: 0.5;
    font-size: 0.95rem;
}

.email-row.unread { font-weight: 700; opacity: 0.7; }

.email-row.our-email {
    background: linear-gradient(90deg, rgba(255, 59, 48, 0.1) 0%, rgba(255, 59, 48, 0.05) 100%);
    border-left: 6px solid var(--accent);
    opacity: 1;
    font-weight: 700;
    animation: emailRise 1s ease-out forwards;
    position: relative;
    padding-right: 7rem; 
    line-height: 1.3;
}

.email-row.our-email::after {
    content: '👁️ READ';
    position: absolute;
    right: 1.5rem;
    font-size: 0.7rem;
    color: var(--success);
    font-weight: 900;
    font-family: 'Unbounded', sans-serif;
}

@keyframes emailRise {
    0% { transform: scale(0.95); opacity: 0; }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

.inbox-caption {
    text-align: center;
    margin-top: 2rem;
    font-weight: 700;
    color: var(--accent);
    font-size: 1.1rem;
    font-family: 'Space Grotesk', sans-serif;
}

/* --- SOCIAL MEDIA VISUAL --- */
.social-container { max-width: 900px; margin: 0 auto; }
.social-toggle-wrapper { text-align: center; margin-bottom: 3rem; }
.toggle-instruction { font-size: 1.1rem; color: var(--gray); margin-bottom: 1rem; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }

.industry-toggle {
    display: inline-flex;
    background: var(--light-gray);
    border: 4px solid var(--primary);
    position: relative;
    cursor: pointer;
    user-select: none;
    box-shadow: 6px 6px 0 var(--black);
}

.toggle-option {
    padding: 1rem 3rem;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    font-family: 'Unbounded', sans-serif;
}

.toggle-option.industry { color: var(--accent); }
.toggle-option.tenkelly { color: var(--gray); }

.industry-toggle.switched .toggle-option.industry { color: var(--gray); }
.industry-toggle.switched .toggle-option.tenkelly { color: var(--success); }

.toggle-slider-bg {
    position: absolute;
    top: 0; left: 0; width: 50%; height: 100%;
    background: white;
    border: 4px solid var(--accent);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 0;
}

.industry-toggle.switched .toggle-slider-bg { left: 50%; border-color: var(--success); }

.social-grids-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }

.social-grid-panel {
    background: var(--light-gray);
    padding: 2rem;
    border: 4px solid var(--primary);
}

.panel-label {
    font-weight: 900;
    text-align: center;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.05em;
    font-family: 'Unbounded', sans-serif;
}

.panel-label.industry-label { color: var(--accent); }
.panel-label.tenkelly-label { color: var(--success); }

.dots-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; margin-bottom: 1.5rem; }

.dot {
    width: 100%;
    aspect-ratio: 1;
    background: #bbb;
    border-radius: 50%;
    opacity: 0.3;
    transition: all 0.4s ease;
}

.dot.visible { opacity: 1; box-shadow: 0 0 8px currentColor; transform: scale(1.1); }
.dot.industry-dot.visible { background: var(--accent); }
.dot.tenkelly-dot.visible { background: var(--success); }

.dots-caption {
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--gray);
    margin-top: 1rem;
    font-weight: 600;
}

.woa-badge {
    display: inline-block;
    background: var(--success);
    color: white;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-top: 0.8rem;
    font-family: 'Unbounded', sans-serif;
    border: 2px solid var(--black);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}

/* --- WEB/MAGNET VISUAL --- */
.lead-magnet-visual { 
    width: 100%; 
    max-width: 900px; 
    margin: 0 auto; 
    display: block;
    color: #000000 !important; /* Forces text to be black (visible) */
}

.magnet-stage {
    position: relative;
    width: 100%;
    height: 300px;
    background: #f5f5f5; /* Hardcoded light gray to ensure contrast */
    border: 4px solid #000000;
    border-radius: 6px;
    overflow: hidden;
    display: block;
    margin-top: 1.5rem;
}

/* BUILDING (Centerpiece) */
.store-building {
    position: absolute; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 6rem; /* Slightly smaller to ensure fit */
    line-height: 1;
    z-index: 5;
    opacity: 1 !important; /* Force visible */
}

/* PERSON (Animation) */
.person-start {
    position: absolute; 
    left: 5%; 
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem; 
    line-height: 1;
    z-index: 10;
    opacity: 1; /* Default to visible */
    animation: pullIntoStore 4s ease-in-out infinite;
}

/* MAGNET (Animation) */
.magnet-behind {
    position: absolute; 
    left: 50%; 
    top: 35%; /* Moved up slightly */
    transform: translate(-50%, -50%);
    font-size: 2.5rem; 
    z-index: 1;
    opacity: 0.5;
    animation: magnetPulse 4s ease-in-out infinite;
}

/* MONEY BAGS (Animation) */
.money-container {
    position: absolute; 
    right: 10%; 
    top: 50%; 
    transform: translateY(-50%);
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem; 
    align-items: center;
    z-index: 10;
}

.money-bag { 
    font-size: 2rem; 
    line-height: 1;
    opacity: 0; /* Starts hidden for animation effect */
}

.money-bag:nth-child(1) { animation: moneyFall 4s ease-in-out infinite; animation-delay: 0s; }
.money-bag:nth-child(2) { animation: moneyFall 4s ease-in-out infinite; animation-delay: 0.2s; }
.money-bag:nth-child(3) { animation: moneyFall 4s ease-in-out infinite; animation-delay: 0.4s; }

/* LABELS (The previously missing text) */
.magnet-labels {
    display: flex; 
    justify-content: space-between; 
    padding: 0 20px;
    margin-top: 1.5rem;
    font-size: 0.9rem; 
    font-weight: 900; 
    text-transform: uppercase;
    letter-spacing: 0.05em; 
    color: #666666 !important; /* Force Dark Gray */
    font-family: 'Space Grotesk', sans-serif;
    width: 100%;
}

.magnet-caption {
    text-align: center; 
    margin-top: 1.5rem;
    font-size: 1.1rem; 
    line-height: 1.6; 
    font-weight: 600;
    color: #000000 !important; /* Force Black */
    max-width: 800px; 
    margin-left: auto; 
    margin-right: auto;
}

/* ANIMATIONS */
@keyframes pullIntoStore {
    0% { left: 5%; opacity: 0; transform: translateY(-50%) scale(0.5); }
    10% { opacity: 1; transform: translateY(-50%) scale(1); }
    35% { left: 42%; opacity: 1; transform: translateY(-50%) scale(1); }
    40% { left: 45%; opacity: 0; transform: translateY(-50%) scale(0.8); }
    100% { left: 45%; opacity: 0; transform: translateY(-50%) scale(0.8); }
}

@keyframes magnetPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
    50% { transform: translate(-50%, -60%) scale(1.2); opacity: 0.8; }
}

/* ... end of visual module CSS (animations, etc) ... */

@keyframes moneyFall {
    0% { opacity: 0; transform: translateY(-40px) scale(0.5); }
    20% { opacity: 1; transform: translateY(0) scale(1); }
    80% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(10px) scale(1); }
}

/* ════════════ MOBILE RESPONSIVENESS ════════════ */
@media (max-width: 900px) {
    /* Visual Module Adjustments */
    .visual-interface {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .pillar-front h3 { 
        font-size: 1.4rem;
    }
    .visual-selectors {
        position: relative;
        top: 0;
        flex-direction: row; 
        flex-wrap: wrap;
        justify-content: center;
        overflow: visible; 
        padding-bottom: 10px;
        gap: 10px;
        width: 100%;
    }
    .selector-btn {
        width: auto;
        padding: 0.8rem 1.2rem;
        font-size: 0.85rem;
        justify-content: center;
        text-align: center;
    }
    .visual-box {
        padding: 1.5rem;
        min-height: auto;
    }
    .social-grids-wrapper {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .toggle-option {
        padding: 0.8rem 1.5rem;
        font-size: 0.85rem;
    }

    /* Padding Crush Fixes */
    .content-pane { 
        padding: 2rem; 
    }
    .info-popup { 
        padding: 2rem; 
        width: 95%; 
    }
    
    /* TRADITIONAL MEDIA FIXES */
    .traditional-media {
        padding: 60px 20px;
    }
    .trad-container {
        display: flex !important; 
        flex-direction: column; 
        gap: 40px;
    }
    .trad-info {
        position: relative !important;
        top: 0 !important;
        margin-bottom: 10px;
    }
    .trad-title {
        font-size: clamp(2rem, 8vw, 2.5rem);
    }
    .trad-block { 
        padding: 1.5rem; 
    }
}

/* ════════════ TRADITIONAL MEDIA SECTION ════════════ */
.traditional-media {
    background: var(--paper);
    color: var(--black);
    padding: 100px 5%;
    border-top: 8px solid var(--black);
    border-bottom: 8px solid var(--black);
}

.trad-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}

/* LEFT STICKY COLUMN */
.trad-info {
    position: sticky;
    top: 150px;
}

.trad-info .eyebrow {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 900;
    color: var(--violet);
    letter-spacing: 2px;
}

.trad-title {
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(1.7rem, 8vw, 3.5rem);
    line-height: 0.9;
    margin: 1.5rem 0;
    text-transform: uppercase;
}

.trad-description {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 2.5rem;
}

.trad-quote {
    background: var(--white);
    color: var(--black);
    padding: 2rem;
    font-family: 'Unbounded', sans-serif;
    font-size: 1.1rem;
    border-left: 8px solid var(--tangerine);
    box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
}

/* RIGHT SCROLLING COLUMN */
.trad-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.trad-block {
    background: var(--white);
    border: 6px solid var(--black);
    padding: 3rem;
    transition: all 0.3s ease;
    box-shadow: 10px 10px 0 var(--black);
}

.trad-block:hover {
    transform: translate(-5px, -5px);
    box-shadow: 15px 15px 0 var(--tangerine);
    border-color: var(--black);
}

.trad-tag {
    display: inline-block;
    background: var(--black);
    color: var(--white);
    padding: 4px 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 900;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.trad-block h3 {
    font-family: 'Unbounded', sans-serif;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--black);
}

.trad-block p {
    font-size: 1.05rem;
    font-weight: 500;
    color: #444;
    line-height: 1.6;
}

/* ════════════ PROCESS ════════════ */
    .process-outer { background: var(--white); height: 200vh; position: relative; border-top: 8px solid var(--black); }
    .process-sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
    .process-header { text-align: center; font-family: 'Unbounded'; font-size: 4rem; color: var(--black); margin-bottom: 2rem; }
    .process-slider { display: flex; padding: 0 10vw; will-change: transform; transition: transform 0.1s linear; }
    .process-card { 
        min-width: 450px; 
        height: 400px; 
        margin-right: 80px; 
        background: var(--white); 
        border: 8px solid var(--black); 
        padding: 3rem; box-shadow: 15px 15px 0px var(--violet); 
        display: flex; flex-direction: column; justify-content: space-between; color: var(--black); }
    .step-num { font-family: 'Unbounded'; font-size: 5rem; color: var(--tangerine); -webkit-text-stroke: 3px black; line-height: 1; }
    .process-front h3 {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 900;
        font-size: 2rem;
    }
    
    .quiz-box { background: var(--black); color: var(--white); padding: 2rem; margin-top: 2rem; border: 4px solid var(--violet); }
    .q-btn { padding: 18px; border: none; cursor: pointer; font-weight: 900; text-transform: uppercase; width: 100%; transition: 0.2s; }
    .p-btn { background: #E8E1D5; font-family: "Papyrus", fantasy; }
    .t-btn { background: var(--violet); color: white; font-family: "Times New Roman", serif; }
    footer { background: var(--violet); padding: 80px; text-align: center; border-top: 8px solid var(--tangerine); }
    footer a { color: var(--tangerine); font-weight: 900; margin: 0 20px; text-decoration: none; font-size: 1.5rem; }

@media (max-width: 900px) {
    .hero-container { grid-template-columns: 1fr; }
    .process-slider { flex-direction: column; padding: 20px; }
    .process-card { min-width: 100%; margin-right: 0; margin-bottom: 40px; }
    .process-outer { height: auto; }
    .info-popup { width: 90%; left: 5%; transform: translateY(100%); }
    .info-popup.active { transform: translateY(-50%); }
}

/* ════════════ CTA / CONTACT SECTION ════════════ */
.cta-section {
    background: var(--violet);
    padding: 100px 20px;
    border-top: 8px solid var(--black);
    display: flex;
    justify-content: center;
}

.cta-container {
    background: var(--white);
    border: 8px solid var(--black);
    box-shadow: 20px 20px 0px var(--black);
    padding: 4rem;
    max-width: 800px;
    width: 100%;
    position: relative;
}

.cta-header {
    font-family: 'Unbounded', sans-serif;
    font-size: 3.5rem;
    line-height: 0.9;
    color: var(--black);
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.cta-sub {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--black);
    margin-bottom: 3rem;
}

/* FORM STYLES */
.brutalist-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-family: 'Unbounded', sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.brutalist-form input, 
.brutalist-form textarea {
    background: #f0f0f0;
    border: 4px solid var(--black);
    padding: 1.2rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--black);
    transition: all 0.2s ease;
    border-radius: 0; /* Brutalist sharp edges */
}

.brutalist-form input::placeholder, 
.brutalist-form textarea::placeholder {
    color: #888;
    text-transform: uppercase;
    font-weight: 600;
}

.brutalist-form input:focus, 
.brutalist-form textarea:focus {
    outline: none;
    background: var(--white);
    border-color: var(--tangerine);
    box-shadow: 8px 8px 0 var(--black);
    transform: translate(-4px, -4px);
}

.cta-submit {
    margin-top: 1rem;
    background: var(--tangerine);
    color: var(--black);
    border: 4px solid var(--black);
    padding: 1.5rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 8px 8px 0 var(--black);
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.cta-submit:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0 var(--black);
    background: var(--paper);
}

@media (max-width: 768px) {
    .cta-container { padding: 2rem; }
    .cta-header { font-size: 2.5rem; }
}

/* ════════════ WORK DASHBOARD (SPLIT VIEW) ════════════ */
.work-section { 
    background: var(--white); 
    color: var(--black); 
    padding: 80px 20px; 
    border-top: 8px solid var(--black); 
}

.work-dashboard-grid {
    max-width: 1600px;
    margin: 0 auto;
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 50px;
}

.work-sidebar {
    width: 300px;
    min-width: 300px;
    position: sticky;
    top: 50px;
}

.work-title {
    font-family: 'Unbounded'; 
    font-size: 3rem; 
    margin-bottom: 2rem; 
    text-transform: uppercase;
    line-height: 0.9;
    text-align: left;
}

.partner-badges {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 4px solid var(--black);
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
}

.badge-icon {
    height: 85px; 
    width: auto;
    filter: grayscale(1) invert(1); 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0.8;
}

.badge-icon:hover {
    filter: none;
    opacity: 1;
    transform: scale(1.15); 
}

.canva-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tab { 
    background: var(--white); 
    padding: 15px 20px; 
    font-weight: 900; 
    cursor: pointer; 
    border: 4px solid var(--black); 
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    transition: all 0.2s ease;
    text-align: center;
    box-shadow: 4px 4px 0 var(--black); 
}

.tab:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--black);
    background: var(--tangerine);
}

.tab.active { 
    background: var(--tangerine); 
    color: var(--black); 
    transform: translate(-4px, -4px); 
    box-shadow: 8px 8px 0px var(--violet); 
}

.work-display {
    flex-grow: 1;
    width: 100%; 
}

.traffic-lights { display: flex; gap: 8px; }
.light { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #000; }
.light.red { background: #FF5F56; }
.light.yellow { background: #FFBD2E; }
.light.green { background: #27C93F; }

.url-bar {
    color: var(--white); 
    font-family: 'Space Grotesk', monospace; 
    font-size: 0.9rem; 
    opacity: 0.8;
    text-decoration: none;
    cursor: pointer;
    
    /* FIX: Align lock icon with text */
    display: flex;
    align-items: center;
    gap: 8px;
}

.url-bar:hover { 
    opacity: 1; 
    color: var(--tangerine); 
    text-decoration: underline; 
}

/* Style for the lock specifically */
.url-lock {
    font-size: 0.85rem;
    filter: grayscale(1);
    display: inline-flex;
    align-items: center;
}

/* Mobile URL scaling */
@media (max-width: 900px) {
    .url-bar {
        font-size: 0.7rem;
        gap: 5px;
    }
}

/* ════════════ RECENT BUILDS: TRULY RESPONSIVE ════════════ */

.frame-container { 
    width: 100%;
    height: 75vh; 
    min-height: 500px;
    border: 8px solid var(--black); 
    background: var(--white); 
    box-shadow: 20px 20px 0px var(--violet); 
    overflow: hidden; 
    position: relative;
    display: flex;
    flex-direction: column;
}

.browser-header {
    background: var(--black); 
    padding: 12px 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    border-bottom: 4px solid var(--white);
    z-index: 100;
    flex-shrink: 0;
}

#live-frame {
    border: none;
    background: white;
    width: 100% !important; 
    height: 100% !important; 
    flex-grow: 1;
    display: block !important;
}

.mobile-partner-badge { 
    display: none; 
}

/* TABLET/MOBILE STACKING & PORTFOLIO FIX */
@media (max-width: 1024px) {
    .work-dashboard-grid { 
        flex-direction: column; 
        gap: 20px !important; 
    }
    
    .work-sidebar { 
        width: 100%; 
        min-width: 100%; 
        position: relative;
        top: 0;
    }

    .work-title {
        font-size: 2.8rem;
        text-align: center;
        margin-bottom: 25px;
    }
    
    .work-sidebar .partner-badges {
        display: none !important; 
    }

    .mobile-partner-badge {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 10px 0 25px 0;
    }
    
    .mobile-partner-badge .badge-icon {
        height: 60px;
        filter: grayscale(1) invert(1);
    }

    .canva-stack {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 12px;
        width: 100%;
        margin-bottom: 10px;
    }
    
    .tab {
        white-space: normal;
        padding: 12px 10px;
        font-size: 0.75rem;
        min-height: 65px; 
    }

    .frame-container { 
        width: 100%; 
        height: 450px; 
        min-height: auto;
        box-shadow: 10px 10px 0px var(--violet);
        position: relative; 
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        background: var(--black);
        cursor: pointer;
    }
    
    #live-frame {
        display: none !important;
    }

    .mobile-work-preview {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important; 
        object-position: top;
    }

    .work-display::after {
        display: none;
    }
}

/* ════════════ FOOTER ════════════ */

.site-footer{
  background: var(--violet);
  border-top: 8px solid var(--tangerine);
  padding: 80px 6% 40px;
  color: var(--white);
}


/* Grid layout */

.footer-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}


/* Columns left aligned */

.footer-col{
  text-align: left;
}


/* Logo */

.footer-logo{
  width: 180px;
  max-width: 100%;
  display: block;
  margin-bottom: 18px;
}

.footer-tagline{
  font-weight: 700;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
  max-width: 260px;
}


/* Column heads */

.footer-head{
  font-family: 'Unbounded', sans-serif;
  font-size: 1.05rem;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--white);
}


/* Links */

.footer-col a{
  display: block;
  color: var(--paper);
  font-weight: 800;
  text-decoration: none;
  margin: 10px 0;
  font-size: 1.05rem;
}

.footer-col a:hover{
  text-decoration: underline;
  color: var(--tangerine);
}

.footer-col p{
  display: block;
  color: var(--paper);
  font-weight: 800;
  text-decoration: none;
  margin: 10px 0;
  font-size: 1.05rem;
}

/* Bottom bar */

.footer-bottom{
  margin-top: 48px;
  padding-top: 24px;
  border-top: 2px solid rgba(255,255,255,.15);
  font-weight: 700;
  color: rgba(255,255,255,.6);
  text-align: left;
}


/* Responsive */

@media (max-width: 980px){
  .footer-grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px){
  .footer-grid{
    grid-template-columns: 1fr;
  }
}

/* STOP IOS AUTO-ZOOM ON INPUTS */
@media (max-width: 900px) {
    .brutalist-form input, 
    .brutalist-form textarea {
        font-size: 16px !important;
    }
}