/* DavidBlue Consolidated CSS - Somefolk Style */

/* CSS Reset & Base Styles */
*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}

/* CSS Custom Properties - Match Somefolk exactly */
:root{
-webkit-text-size-adjust:100%;
--case-2:#f6f6eb;--charcoal:#343434;--frost:#f6f6eb;--black:black;--vanilla:#f6f6eb;--margin:1.2em;--case-1:#f6f6eb;--case-3:#f56363;--white:white;
}

/* Typography - Match Somefolk exactly */
body{color:#333;font-family:Arial,sans-serif;line-height:1.5;font-size:16px;box-sizing:border-box;text-transform:uppercase}

h1,h2,h3,h4,h5,h6{font-weight:400;line-height:12.3679px;letter-spacing:-0.281089px;color:rgb(246,246,235);text-transform:uppercase}

h1{font-size:14.0544px;font-weight:400;line-height:12.3679px;letter-spacing:-0.281089px;color:rgb(246,246,235);text-transform:uppercase;font-family:"Swizzy Mono",sans-serif}
h2{font-size:14.0544px;font-weight:400;line-height:12.3679px;letter-spacing:-0.281089px;text-transform:uppercase}
h3{font-size:14.0544px;font-weight:400;line-height:12.3679px;letter-spacing:-0.281089px;text-transform:uppercase}
h4{font-size:14.0544px;font-weight:400;line-height:12.3679px;letter-spacing:-0.281089px;text-transform:uppercase}
h5{font-size:14.0544px;font-weight:400;line-height:12.3679px;letter-spacing:-0.281089px;text-transform:uppercase}
h6{font-size:14.0544px;font-weight:400;line-height:12.3679px;letter-spacing:-0.281089px;text-transform:uppercase}

p{margin-top:0;margin-bottom:10px;font-size:var(--font-size-base);line-height:var(--line-height-relaxed);color:var(--color-text);text-transform:uppercase}

a{color:rgb(51,51,51);text-decoration:none;transition:all 150ms cubic-bezier(0,0,0.2,1);cursor:pointer;text-transform:uppercase}
a:hover{color:rgb(51,51,51)}

/* Webflow Classes */
.w-mod-js,.w-mod-ix{}
.w-inline-block{display:inline-block}
.w--current{color:var(--color-primary)}
.k-a{opacity:1;transform:none;transition:all var(--transition-base) var(--ease-out)}
.k-a.f,.k-a.g,.k-a.h{}
.is-nm{}
.nd{}

/* Navigation */
.nav-wrapper{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;justify-content:space-between;align-items:center;width:100%;padding:24.0933px 24.0933px 24.0933px 24.0933px;overflow:hidden;gap:3rem;background:rgba(255,255,255,0.85);box-shadow:0 8px 32px rgba(0,0,0,0.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,0.1);transition:background-color 0.3s ease,backdrop-filter 0.3s ease}

.logo-div{display:flex;align-items:center;justify-content:center;font-size:20.0778px;font-weight:400;color:#000}

.work-nav{display:flex;align-items:center;gap:1.5rem}
.right-nav{display:flex;align-items:center;justify-content:flex-end;gap:4rem;padding:0;flex-direction:row}

.menu-flex{display:flex;align-items:center;gap:2rem}

.mob-nav{display:none}
@media (max-width: 768px) {
  .mob-nav{display:flex}
  .menu-flex{display:none}
}

.nav-link{text-decoration:none;color:#000;font-size:18px;font-weight:400;position:relative;display:inline-block;transition:color .3s ease;text-transform:uppercase}
.nav-link:hover{color:#000}

/* Frost/Scrolled Navigation State */
.nav-wrapper.nav-scrolled{background:rgba(255,255,255,0.9) !important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,0.2);transform:translateY(0) !important;box-shadow:0 8px 32px rgba(31,38,135,0.37)}
.nav-wrapper.nav-scrolled .nav-link{color:#000 !important}
.nav-wrapper.nav-scrolled .nav-link:hover{color:#000 !important}
.nav-wrapper.nav-scrolled .logo-div{color:#000 !important}
.nav-wrapper.nav-scrolled .nav-underline{background:#000 !important}
.nav-wrapper.nav-scrolled .mono-text{color:#000 !important}
.nav-link div:first-child{line-height:1.4;margin-bottom:0.25rem}

.nav-underline{width:0%;height:1px;background:#000;margin-top:2px;transition:width .3s ease;display:block}
.nav-link:hover .nav-underline{width:100% !important}

/* Email link spacing */
.nav-link.nm{margin-top:0px;padding:0px}

/* Layout */
.main{position:relative;min-height:100vh}

.hero-wrapper{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}

.hero-wrapper.is-home{background:var(--color-background)}

.hero-primary{position:relative;z-index:2;padding:var(--space-20) var(--space-8);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:80vh}

.hero-primary.is-home{padding:var(--space-24) var(--space-8)}

.fold-content{display:flex;flex:1;justify-content:space-between;align-items:center;padding:0px 18.6133px 0px 18.6133px;margin:-25vh 0px 0px;position:relative;width:74%;z-index:4}

.mono-flex{display:flex;flex-direction:column;justify-content:normal;align-items:flex-start;gap:50.1944px;padding:0px;margin:0px;position:relative;transform:none;will-change:auto;transform-style:flat;opacity:1}

.w-layout-vflex{display:flex;flex-direction:column;gap:0.5rem;align-items:flex-start}

.mono-text{color:rgb(0,0,0);letter-spacing:-0.281089px;text-transform:uppercase;margin-top:0;margin-bottom:0;font-family:Arial,sans-serif;font-size:14.0544px;font-weight:400;line-height:12.3679px}
.mono-text.is-centre{text-align:center}
.mono-text.blue{color:white}
.hero-video-container .mono-text{color:white !important;font-size:18px;letter-spacing:0.2em}
.mono-text.is-hover{opacity:0 !important;transition:opacity .3s ease}
.mono-text.is-hover[style*="opacity"]{opacity:0 !important}
.mono-text.cs{font-size:var(--font-size-xs);color:var(--color-text-muted);font-style:italic}
.mono-text.scroll-scramble{transition:opacity .3s ease}

.hero-video-container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:normal;padding:0px;margin:0px;position:relative;width:280px;height:160px;border-radius:var(--radius-lg);overflow:hidden;transition:transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);will-change:transform;transform-style:preserve-3d;opacity:1;cursor:pointer;box-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,7.2px 7.2px 12px rgba(255,255,255,0.6)}

.hero-video-container:hover .vertical-flex{transform:translateY(-8px) !important}

.hero-video-container:hover .mono-text.is-hover[style*="opacity"]{opacity:1 !important}
.hero-video-container:hover .mono-text.is-hover{opacity:1 !important}

.hero-video-container:hover .image-overlay{background:rgba(0,0,0,0.3) !important}

.hero-video-container.k-a.g{will-change:transform;transform-style:preserve-3d}

.video-link-block{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:var(--radius-lg);transition:transform var(--transition-base) var(--ease-out)}

.vertical-flex{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0.1rem;padding:1rem;margin:0px;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;transform:matrix(1,0,0,1,0,8);will-change:auto;transform-style:preserve-3d;opacity:1;transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);text-align:center}
.vertical-flex.is-vid{transform:translate3d(0px,.5rem,0px) scale3d(1,1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);transform-style:preserve-3d}
.vertical-flex.nm{}

.hero-vid-text{font-size:32.4px;font-weight:600;color:white;margin:0.5rem 0;text-transform:uppercase;font-family:Arial,sans-serif;letter-spacing:0.15em}
.hero-vid-text.video{}

.case-image{position:relative;width:100%;height:100%;overflow:hidden}

.w-embed{position:relative;width:100%;height:100%}

.w-background-video{position:relative;width:100%;height:100%}

.w-background-video-atom{position:relative;width:100%;height:100%}

.image-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.1);z-index:2;border-radius:var(--radius-lg);pointer-events:none}

.image-overlay.is-vid{background:rgba(0,0,0,.2)}

.display-container{position:absolute;top:50%;left:0;transform:translateY(-50%);display:flex;flex-direction:column;gap:0;z-index:3;pointer-events:none;will-change:transform;width:100%;justify-content:center;align-items:flex-start;padding-left:2rem}

.letter-div{opacity:1;transform:translate(0px,0vw);transition:all var(--transition-base) var(--ease-out);will-change:transform}
.letter-div.k-a{animation:fadeInUp 1s var(--ease-out) forwards}
.letter-div.up{transform:translateY(-2vh)}

.display-text{font-size:12vw;font-weight:900;line-height:.8;color:#f6f6eb;text-transform:uppercase;font-family:Arial,sans-serif;white-space:nowrap}
.display-text.is-s,.display-text.is-f,.display-text.is-p,.display-text.is-n1{font-size:12vw}

.hero-secondary{z-index:10;justify-content:space-between;width:100%;padding:20em 1.2em 1.2em;display:flex;position:relative;box-sizing:border-box}

.hero-left{flex:1}

.hero-secondary-flex{display:flex;flex-direction:column;gap:186.133px}

.image-full-k-a{position:absolute;top:0;left:0;width:100%;height:120%;object-fit:cover;z-index:1;transform:translate(0px,0%);translate:none;rotate:none;scale:none;image-rendering:auto;will-change:transform}
.image-full-k-a.lazy-pixelated{image-rendering:pixelated;transition:image-rendering .3s ease}
.video-background{position:absolute;top:0;left:0;width:100%;height:120%;object-fit:cover;z-index:1;will-change:transform}

/* Animations */
@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}

.loaded .k-a{animation:fadeInUp .8s var(--ease-out) forwards}

/* Footer */
.footer-legal{color:#f6f6eb;text-transform:uppercase}

/* Hero Secondary Section */
.hero-secondary{z-index:2;justify-content:space-between;width:100%;padding:12.5em 1.2em 1.2em;display:flex;position:relative;box-sizing:border-box}
.hero-left{flex:0 1 auto;display:block}
.hero-right{flex-direction:column;justify-content:space-between;align-items:flex-start;width:41%;display:flex}
.hero-secondary-flex{display:flex;flex-direction:column;gap:186.133px}
.sfco-flex{display:flex;flex-direction:column;gap:12.4089px}
.heading5{color:white !important;font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);text-transform:uppercase}
.is-blue{color:white !important}
.home{color:white !important}
.hero-serif-flex{display:flex;gap:32px;margin-bottom:64px}
.social-container{display:flex;flex-direction:column;gap:var(--space-1)}
.serif-subheading{color:white !important;font-size:var(--font-size-base);text-decoration:none;text-transform:uppercase}
.body-copy{color:white !important;font-size:var(--font-size-sm);text-transform:uppercase}
.intro-flex{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:32px}
.hero-copyright{color:white !important;text-transform:uppercase}

/* Social Container Hover Effects - Pure CSS (Somefolk Style) */
.hero-secondary .social-container .body-copy{opacity:0 !important;transition:opacity .3s ease !important;color:rgb(246,246,235) !important}
.hero-secondary .social-container:hover .body-copy{opacity:1 !important;color:rgb(246,246,235) !important}

/* Override any inline styles - Match Somefolk exactly - Higher specificity */
.hero-secondary .social-container .body-copy[style*="opacity"]{opacity:0 !important;color:rgb(246,246,235) !important;transition:opacity .3s ease !important}
.hero-secondary .social-container:hover .body-copy[style*="opacity"]{opacity:1 !important;color:rgb(246,246,235) !important}

/* Make all text in hero-secondary visible and frost color - Match Somefolk exactly */
.hero-secondary .heading5,
.hero-secondary .mono-text,
.hero-secondary .serif-subheading{color:rgb(246,246,235) !important;visibility:visible !important;position:relative !important}

/* Specific font sizes to match Somefolk */
.hero-secondary .heading5{font-size:31.0222px !important;font-weight:500 !important;opacity:1 !important}
.hero-secondary .mono-text{font-size:11.9778px !important;opacity:1 !important}
.hero-secondary .serif-subheading{font-size:29.0889px !important;opacity:1 !important}
.hero-secondary .body-copy{font-size:13.6889px !important;opacity:1 !important}


/* Override any inline opacity styles on hero-secondary elements */
.hero-secondary .mono-text[style*="opacity"],
.hero-secondary .heading5[style*="opacity"],
.hero-secondary .serif-subheading[style*="opacity"],
.hero-secondary .body-copy[style*="opacity"]{opacity:1 !important;color:rgb(246,246,235) !important;visibility:visible !important}

/* Ensure all fold-content elements are visible */
.fold-content{opacity:1 !important;visibility:visible !important;position:relative}
.fold-content .mono-text,
.fold-content .hero-vid-text,
.fold-content h1,
.fold-content p,
.fold-content a{opacity:1 !important;color:rgb(246,246,235) !important;position:relative;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,7.2px 7.2px 12px rgba(255,255,255,0.6)}

/* Ensure hero-video-container is visible */
.hero-video-container{opacity:1 !important;visibility:visible !important;position:relative}


/* Responsive */
@media (max-width:768px){
.hero-primary{padding:var(--space-16) var(--space-4)}
.fold-content{flex-direction:column;align-items:flex-start;gap:var(--space-8)}
.mono-flex{gap:var(--space-8)}
.display-text{font-size:130vw;line-height:0.9;margin-bottom:0.2em}
.display-container{gap:1rem}
.nav-wrapper{padding:.8em}
.hero-video-container{width:100%;height:200px}
.mob-nav{align-items:center;gap:2rem;margin-bottom:1.5rem}
.menu-flex{display:none}
.hero-left{display:none}
}

@media (max-width:480px){
.display-text{font-size:130vw;line-height:0.9;margin-bottom:0.2em}
.display-container{gap:1rem}
.hero-primary{padding:var(--space-12) var(--space-3)}
}

/* David Blue Loading Screen Styles (SAFE ZONE - NOT PROTECTED) */
#loading-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#1e3a5f,#2a5490,#3e6fa3);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:1;visibility:visible;transition:opacity 0.5s ease,visibility 0.5s ease}
#loading-screen.fade-out{opacity:0;visibility:hidden}
#loading-screen.loaded{opacity:0;visibility:hidden}

/* New Layout Structure */
.loading-container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:white;gap:3rem;height:100vh}

/* Top Text Styling */
.loading-text-top{position:relative;z-index:5;font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:2px}
.loading-line-top{margin:0;font-size:1.4rem;font-weight:600;color:rgba(255,255,255,0.95)}

/* Center Section with Logo and Spiral */
.loading-center{position:relative;display:flex;align-items:center;justify-content:center;width:250px;height:250px}

/* David Blue Spiral Animation */
.loading-spiral-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:240px;height:240px;pointer-events:none;z-index:1;perspective:800px}
.loading-spiral-particles{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%}

/* Monster logo positioning */
.loading-monster{position:relative;z-index:5;animation:monsterFloat 2s ease-in-out infinite alternate}
.monster-logo{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,0.3))}

@keyframes monsterFloat{
0%{transform:translateY(0px)}
100%{transform:translateY(-10px)}
}

/* Bottom Text Styling */
.loading-text-bottom{position:relative;z-index:5;font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:2px}
.loading-line-bottom{margin:0;font-size:1.1rem;font-weight:500;color:rgba(255,255,255,0.8)}

/* Loading word animations */
.loading-word{display:inline-block;margin:0 0.3rem;animation:wordPulse 2s ease-in-out infinite}
.loading-dots{animation:dotsBlink 1.5s ease-in-out infinite}

@keyframes wordPulse{
0%,100%{opacity:0.7;transform:scale(1)}
50%{opacity:1;transform:scale(1.05)}
}

@keyframes dotsBlink{
0%,100%{opacity:0.3}
50%{opacity:1}
}

/* Spiral particle base styles - will be enhanced by JavaScript */
.spiral-particle{position:absolute;border-radius:50%;pointer-events:none}

/* Mobile responsiveness for loading screen */
@media (max-width:768px){
.loading-container{gap:2rem}
.loading-center{width:200px;height:200px}
.loading-spiral-wrapper{width:190px;height:190px}
.monster-logo{width:80px;height:80px}
.loading-line-top{font-size:1.2rem}
.loading-line-bottom{font-size:1rem}
}

@media (max-width:480px){
.loading-container{gap:1.5rem}
.loading-center{width:150px;height:150px}
.loading-spiral-wrapper{width:140px;height:140px}
.monster-logo{width:60px;height:60px}
.loading-line-top{font-size:1rem}
.loading-line-bottom{font-size:0.9rem}
.loading-word{margin:0 0.2rem}
}

/* Mobile Navigation Styles (SAFE ZONE - Navigation is not protected) */
.mobile-menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;z-index:1001;position:relative}

.hamburger-line{display:block;width:25px;height:3px;background:#000;margin:5px 0;transition:all 0.3s ease;border-radius:2px}

/* Hamburger animation states */
.mobile-menu-toggle.active .hamburger-line:nth-child(1){transform:rotate(45deg) translate(8px,8px)}
.mobile-menu-toggle.active .hamburger-line:nth-child(2){opacity:0}
.mobile-menu-toggle.active .hamburger-line:nth-child(3){transform:rotate(-45deg) translate(7px,-6px)}

/* Mobile Navigation Overlay */
.mobile-nav-overlay{position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,0.5);z-index:998;opacity:0;visibility:hidden;transition:all 0.3s ease}
.mobile-nav-overlay.active{opacity:1;visibility:visible}

/* Mobile Navigation Menu */
.mobile-nav-menu{position:fixed;top:0;right:-300px;width:300px;height:100vh;background:white;box-shadow:-5px 0 20px rgba(0,0,0,0.1);z-index:999;transition:right 0.3s ease;padding-top:80px}
.mobile-nav-menu.active{right:0}

/* Mobile Navigation Content */
.mobile-nav-content{display:flex;flex-direction:column;padding:2rem 1.5rem;height:100%;gap:0.5rem}

.mobile-nav-link{display:block;padding:1.5rem 0;color:#000;text-decoration:none;font-size:1.1rem;font-weight:500;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid rgba(0,0,0,0.1);transition:all 0.3s ease;position:relative;line-height:1.4}

.mobile-nav-link:hover{color:#3A6FA3;padding-left:10px}

.mobile-nav-link:last-child{border-bottom:none;margin-top:auto;padding-top:3rem}

.mobile-contact{font-size:0.9rem;color:#666;text-transform:none;letter-spacing:normal}

/* Show mobile menu toggle on mobile */
@media (max-width: 768px) {
.mobile-menu-toggle{display:block}
}

/* Prevent body scroll when mobile menu is open */
body.mobile-nav-open{overflow:hidden}

/* Highlight Section Mobile Optimization (UNLOCKED FOR MOBILE FIXES) */
@media (max-width: 768px) {
/* Display flex mobile layout */
.display-flex{flex-direction:column;gap:2rem;text-align:center;padding:1rem}
.sfco-flex{margin-bottom:1rem}
.sfco-flex.left,.sfco-flex.centre,.sfco-flex.right{text-align:center}

/* Display text container mobile */
.display-text-contain{padding:2rem 1rem;text-align:center}
.title-flex{flex-direction:column;gap:1rem;text-align:center}
.heading2.is-innovate.smaller{font-size:1.5rem;line-height:1.3;text-align:center}
.div-block-11{margin-top:1rem}

/* Social flex mobile */
.social-flex{flex-direction:column;gap:0.5rem;text-align:center;margin:1rem 0}

/* Flex block mobile layout */
.flex-block{flex-direction:column;gap:2rem;padding:1rem}
.mono-flex.is-1{text-align:center;margin-bottom:1.5rem}
.mono-text.frost.mm{font-size:0.9rem;line-height:1.4;margin-bottom:0.5rem}

/* Image container mobile */
.div-block-2{order:-1;margin-bottom:2rem}
.location-img-container.is-feature{width:100%;height:200px;margin:0 auto}
.image-full-copy{object-fit:cover;width:100%;height:100%}

/* Video mobile optimization */
.image-full{height:300px !important;object-fit:cover}

/* Bottom text container mobile */
.display-text-contain:last-child{padding:2rem 1rem;text-align:center}
.heading3.is-centre.is-light{font-size:1.2rem;line-height:1.4;text-align:center;margin-bottom:1rem}
}

@media (max-width: 480px) {
.display-flex{gap:1.5rem;padding:0.5rem}
.heading2.is-innovate.smaller{font-size:1.2rem}
.mono-text.frost.mm{font-size:0.8rem}
.location-img-container.is-feature{display:none}
.div-block-2{display:none}
.image-full{height:250px !important}
.heading3.is-centre.is-light{font-size:1rem}
}