.font-display,.testimonial-card::before{font-family:"Microsoft PhagsPa","Segoe UI",Georgia,serif}footer,footer a{color:var(--gray-300)}:root{--primary-blue:#013d7c;--primary-dark:#003d7a;--primary-light:#0066cc;--white:#ffffff;--cream:#f5f1eb;--light-gray:#f0ebe3;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--success:#10b981;--error:#ef4444}*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Microsoft PhagsPa","Segoe UI",Arial,sans-serif;background:linear-gradient(135deg,var(--cream) 0,var(--light-gray) 100%);color:var(--gray-800);line-height:1.6;overflow-x:hidden}.gradient-text{background:linear-gradient(135deg,var(--primary-blue) 0,var(--primary-dark) 50%,var(--primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glass-morphism{background:rgba(255,255,255,.95);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2)}.hover-lift{transition:transform .3s cubic-bezier(.4, 0, .2, 1)}.hover-lift:hover{transform:translateY(-8px) scale(1.02)}.progress-bar{height:4px;background:linear-gradient(90deg,var(--primary-blue) 0,var(--primary-light) 100%);position:fixed;top:0;left:0;z-index:9999;transition:width .3s}.skip-link,nav a .underline-animation{background:var(--primary-blue);left:0}.skip-link{position:absolute;top:-40px;color:#fff;padding:8px 16px;text-decoration:none;z-index:10000}.skip-link:focus{top:0}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--primary-blue);outline-offset:2px}header{position:fixed;width:100%;top:0;z-index:50}.logo-circle{width:40px;height:40px;background:linear-gradient(135deg,var(--primary-blue),var(--primary-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.25rem}.btn-primary,.btn-secondary{padding:.5rem 1.5rem;display:inline-block;transition:.3s;text-decoration:none}nav a{color:var(--gray-700);transition:color .3s;text-decoration:none;font-weight:500;position:relative}.faq-question:hover,nav a:hover{color:var(--primary-blue)}nav a .underline-animation{position:absolute;bottom:0;width:0;height:2px;transition:width .3s}nav a:hover .underline-animation{width:100%}.btn-primary{background:linear-gradient(to right,var(--primary-blue),var(--primary-dark));color:#fff;border-radius:9999px;font-weight:600;box-shadow:0 4px 6px rgba(0,80,158,.3)}.btn-primary:hover{background:linear-gradient(to right,var(--primary-dark),var(--primary-blue));transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,80,158,.4)}.card:hover,.gallery-item:hover{transform:translateY(-4px)}.btn-secondary{border:2px solid var(--primary-blue);color:var(--primary-blue);border-radius:9999px;font-weight:600}.btn-secondary:hover{background:var(--primary-blue);color:#fff}.badge,.filter-btn:hover,.stat-number{color:var(--primary-blue)}.mobile-menu{display:none;position:fixed;top:72px;left:0;right:0;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);padding:1.5rem;box-shadow:0 10px 30px rgba(0,0,0,.1);z-index:40;max-height:calc(100vh - 72px);overflow-y:auto}.timeline-dot,.timeline-line{left:50%;transform:translateX(-50%)}.lightbox,.modal{inset:0;z-index:1000}.gallery-item,.hero-section{position:relative;overflow:hidden}.error-message.show,.mobile-menu.active,.success-message.show{display:block}.mobile-menu a{display:block;padding:1rem 0;border-bottom:1px solid rgba(0,0,0,.1)}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}}.hero-section{padding-top:8rem;padding-bottom:5rem;background:linear-gradient(135deg,#e3f2fd 0,#bbdefb 100%)}.hero-section::before{content:"";position:absolute;inset:0;background-image:url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%2300509E" fill-opacity="0.05"%3E%3Ccircle cx="30" cy="30" r="4"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');opacity:.4}.badge{display:inline-block;padding:.5rem 1rem;background:rgba(0,80,158,.1);border-radius:9999px;font-size:.875rem;font-weight:600;margin-bottom:1.5rem}.card{background:#fff;border-radius:1.5rem;padding:2rem;box-shadow:0 4px 6px rgba(0,0,0,.05);border:2px solid rgba(0,80,158,.1);transition:.3s}.card:hover,.stat-card{box-shadow:0 8px 16px rgba(0,0,0,.1)}.card:hover{border-color:var(--primary-blue)}.stat-card{background:rgba(255,255,255,.8);backdrop-filter:blur(10px);border-radius:1.5rem;padding:2rem;border:2px solid rgba(0,80,158,.2)}.benefit-card,.product-card{box-shadow:0 4px 6px rgba(0,0,0,.05)}.stat-number{font-size:3rem;font-weight:700;margin-bottom:.5rem}.form-input,.form-select,.form-textarea{width:100%;padding:1rem 1.25rem;border:2px solid var(--gray-200);border-radius:.75rem;font-size:1rem;transition:.3s;background:#fff}.error-message,.success-message{font-size:.875rem;margin-top:.5rem;padding-left:.25rem;display:none}.form-input:focus,.form-select:focus,.form-textarea:focus,.search-input:focus{border-color:var(--primary-blue);box-shadow:0 0 0 3px rgba(0,80,158,.1);outline:0}.job-card:hover,.product-card:hover{box-shadow:0 12px 24px rgba(0,0,0,.1)}.form-input.error,.form-select.error,.form-textarea.error{border-color:var(--error)}.form-input.success,.form-select.success,.form-textarea.success{border-color:var(--success)}.filter-btn.active,.filter-btn:hover,.product-card:hover{border-color:var(--primary-blue)}.error-message{color:var(--error)}.success-message{color:var(--success)}.gallery-item{border-radius:1rem;cursor:pointer;transition:transform .3s}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.gallery-item:hover img,.product-card:hover .product-image img{transform:scale(1.1)}.gallery-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,80,158,.8),transparent);opacity:0;transition:opacity .3s;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem}.gallery-item:hover .gallery-overlay{opacity:1}.filter-btn{padding:.75rem 1.5rem;border-radius:9999px;border:2px solid var(--gray-300);background:#fff;color:var(--gray-600);font-weight:600;transition:.3s;cursor:pointer;min-width:max-content}.filter-btn.active{background:linear-gradient(135deg,var(--primary-blue),var(--primary-dark));color:#fff}.filter-section{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.filter-section::-webkit-scrollbar{display:none}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;grid-auto-flow:dense}.gallery-item.tall{grid-row:span 2}.gallery-item.wide{grid-column:span 2}@keyframes slideHint{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(5px)}}@media (min-width:769px){.filter-section .flex{justify-content:center!important}}.lightbox{display:none;position:fixed;background:rgba(0,0,0,.95);justify-content:center;align-items:center;padding:2rem}.lightbox-close,.step-number{align-items:center;color:#fff;font-size:1.5rem}.lightbox.active,.modal.active{display:flex}.lightbox img{max-width:90%;max-height:90%;object-fit:contain;border-radius:.5rem}.lightbox-close{position:absolute;top:2rem;right:2rem;width:48px;height:48px;background:rgba(255,255,255,.1);border:2px solid #fff;border-radius:50%;cursor:pointer;display:flex;justify-content:center;transition:.3s}.lightbox-close:hover{background:rgba(255,255,255,.2);transform:scale(1.1)}.product-card{background:#fff;border-radius:1rem;overflow:hidden;border:2px solid rgba(0,80,158,.1);transition:.3s}.product-card:hover{transform:translateY(-8px)}.product-image{position:relative;overflow:hidden;padding-top:100%;background:linear-gradient(135deg,var(--gray-100),var(--gray-200))}.product-image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}.job-card,.store-card{transition:.3s;cursor:pointer}.job-card:hover{transform:translateY(-4px)}.benefit-card{background:#fff;border-radius:1rem;padding:2rem;border:2px solid rgba(0,80,158,.1);transition:.3s}.benefit-card:hover,.skill-card:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(0,0,0,.1)}.timeline-dot{position:absolute;width:20px;height:20px;background:var(--primary-blue);border:4px solid #fff;border-radius:50%;box-shadow:0 0 0 4px rgba(0,80,158,.2)}.timeline-item::before,.timeline-line{bottom:0;width:2px;background:linear-gradient(180deg,var(--primary-blue),var(--primary-light))}.timeline-line{position:absolute;top:0}.testimonial-card{position:relative;padding:2rem;background:#fff;border-radius:1.5rem;box-shadow:0 4px 6px rgba(0,0,0,.05);border:2px solid rgba(0,80,158,.1)}.testimonial-card::before{content:'"';position:absolute;top:-10px;left:20px;font-size:4rem;color:var(--primary-blue);line-height:1}.spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:.6s linear infinite spin}.modal,.sticky-cta,.timeline-item:last-child::before{display:none}@keyframes spin{to{transform:rotate(360deg)}}.modal{position:fixed;background:rgba(0,0,0,.7);justify-content:center;align-items:center;padding:2rem}.modal-content{background:#fff;border-radius:1.5rem;padding:3rem;max-width:500px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}.sticky-cta{position:fixed;bottom:2rem;right:2rem;z-index:50}.sticky-cta.show{display:block;animation:.3s ease-out slideUp}@keyframes slideUp{from{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width:768px){.gallery-item.wide{grid-column:span 1}.filter-section::after{content:"→";position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--primary-blue);font-size:1.5rem;pointer-events:none;opacity:.5;animation:2s ease-in-out infinite slideHint}.filter-section .flex{justify-content:flex-start}.timeline-dot,.timeline-line{left:20px}.sticky-cta{bottom:1rem;right:1rem;left:1rem}}.faq-item{border-bottom:1px solid var(--gray-200)}.faq-question{width:100%;text-align:left;padding:1.5rem 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:color .3s;background:0 0;border:none}.accordion-content,.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.faq-answer.active{max-height:500px;transition:max-height .5s ease-in}.faq-icon{transition:transform .3s}.faq-icon.active{transform:rotate(180deg)}.step-card{position:relative;background:#fff;border-radius:1.5rem;padding:2rem;border:2px solid rgba(0,80,158,.1);box-shadow:0 4px 6px rgba(0,0,0,.05)}.step-number{position:absolute;top:-20px;left:2rem;width:60px;height:60px;background:linear-gradient(135deg,var(--primary-blue),var(--primary-dark));border-radius:50%;display:flex;justify-content:center;font-weight:700;box-shadow:0 4px 12px rgba(0,80,158,.4)}.play-button,.video-placeholder{align-items:center;display:flex}.skill-card{transition:.3s}.timeline-item{position:relative;padding-left:3rem;padding-bottom:2rem}.timeline-item::before{content:"";position:absolute;left:.5rem;top:0}.accordion-button{cursor:pointer;transition:.3s}.accordion-content.active{max-height:500px}.video-placeholder{aspect-ratio:16/9;background:linear-gradient(135deg,var(--primary-dark),var(--primary-blue));border-radius:1rem;justify-content:center;position:relative;overflow:hidden}.play-button{width:80px;height:80px;background:rgba(255,255,255,.9);border-radius:50%;justify-content:center;cursor:pointer;transition:.3s}.play-button:hover{transform:scale(1.1);background:#fff}footer{background:var(--gray-900);padding:4rem 0}footer a{text-decoration:none;transition:color .3s}footer a:hover{color:#60a5fa}footer .social-icon{width:44px;height:44px;background:rgba(55,65,81,.6);border:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:.3s;color:inherit}footer .social-icon svg{width:20px;height:20px;fill:currentColor;transition:.3s}footer .social-icon:hover{background:var(--primary-blue)!important;color:#fff!important;transform:translateY(-2px);box-shadow:0 4px 12px rgba(1,61,124,.5)}footer .social-icon:hover svg{fill:white!important;transform:scale(1.1)}.store-card.active{border-color:var(--primary-blue);box-shadow:0 0 0 3px rgba(0,80,158,.2)}.search-input{padding:1rem 1rem 1rem 3rem;border:2px solid var(--gray-200);border-radius:9999px;font-size:1rem;width:100%;transition:.3s}.search-icon{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);color:var(--gray-600)}.cart-icon{position:relative}.cart-badge{position:absolute;top:-8px;right:-8px;width:20px;height:20px;background:var(--primary-blue);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}.store-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.1);border-color:var(--primary-blue)}.leaflet-popup-content-wrapper{border-radius:.75rem;box-shadow:0 4px 12px rgba(0,0,0,.15)}.leaflet-popup-content{margin:12px 16px;font-family:inherit}.map-error{display:flex;align-items:center;justify-content:center;height:100%;background:#fef2f2;border-radius:1rem;padding:2rem}@keyframes animate-fade-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:animate-fade-in .5s ease-out forwards}.reveal{opacity:0;transform:translateY(28px);transition:opacity .55s ease,transform .55s ease}.reveal.visible{opacity:1;transform:none}.testimonial-slider-track{display:flex;gap:1.5rem;transition:transform .45s cubic-bezier(.25,.46,.45,.94)}.testimonial-slide{flex:0 0 calc(33.333% - 1rem);min-width:0}@media(min-width:1280px){.testimonial-slide{flex:0 0 calc(25% - 1.125rem)}}@media(min-width:1536px){.testimonial-slide{flex:0 0 calc(20% - 1.2rem)}}@media(max-width:1023px){.testimonial-slide{flex:0 0 calc(50% - .75rem)}}@media(max-width:639px){.testimonial-slide{flex:0 0 100%}}.testimonial-nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;background:#013d7c;border:2px solid #013d7c;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:.3s;box-shadow:0 4px 12px rgba(1,61,124,.35);color:#fff}.testimonial-nav-btn:hover{background:#002d5f;border-color:#002d5f;color:#fff;box-shadow:0 6px 16px rgba(1,61,124,.5)}.testimonial-prev{left:-22px}.testimonial-next{right:-22px}@media(max-width:639px){.testimonial-nav-btn{display:none}}.testimonial-dots{display:flex;gap:.5rem;align-items:center}.testimonial-dot{width:8px;height:8px;border-radius:50%;background:#d1d5db;border:none;cursor:pointer;padding:0;transition:.3s}.testimonial-dot.active{background:#013d7c;width:24px;border-radius:4px}.testimonial-pause-btn{background:none;border:1px solid #d1d5db;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#6b7280;transition:.3s;padding:0}.testimonial-pause-btn:hover{border-color:#013d7c;color:#013d7c}

/* ============================================================
   PHASE 1 — NEW DESIGN SYSTEM (oat-milk + espresso + crema-gold)
   ============================================================ */
:root{
  --espresso-deep:#160B06;
  --void-black:#0A0603;
  --roast:#2A1408;
  --oat-milk:#FBF8F2;
  --ivory-deep:#F0E8DC;
  --crema-gold:#D4A827;
  --crema-gold-dark:#C4920A;
  --crema-accessible:#A06A08;
  --copper:#A05828;
  --interactive-blue:#003087;
  --on-surface:#1A0C07;
  --on-surface-variant:#5C3A22;
  --outline-variant:#D8C9BE;
  --shadow-dark:rgba(0,48,135,0.10);
  --shadow-light:rgba(255,255,255,0.92);
  --card-bg:#F8FAFE
}

/* Canvas bg = espresso; shows in any gap below body content */
html{background:var(--espresso-deep);min-height:100vh}
body{background:#ffffff!important}
body,button,input,textarea,select{font-family:'Manrope','Microsoft PhagsPa','Segoe UI',Arial,sans-serif}
h1,h2,h3,.font-display{font-family:'Fraunces','Libre Caslon Text','Microsoft PhagsPa',Georgia,serif}

.gradient-text{background:linear-gradient(135deg,var(--interactive-blue) 0%,#001f5c 50%,var(--interactive-blue) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.crema-text{background:linear-gradient(135deg,var(--interactive-blue) 0%,#001f5c 50%,var(--interactive-blue) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-counter{color:var(--interactive-blue)}

/* Neomorphic components */
.neo-card{background:var(--card-bg);box-shadow:12px 12px 28px var(--shadow-dark),-12px -12px 24px var(--shadow-light);border-radius:2rem;border:1px solid rgba(0,48,135,.07);transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease}
.neo-card:hover{box-shadow:18px 18px 36px rgba(0,48,135,.13),-12px -12px 24px rgba(255,255,255,.95)}
.neo-card-sm{background:var(--card-bg);box-shadow:8px 8px 18px var(--shadow-dark),-8px -8px 16px var(--shadow-light);border-radius:1.5rem;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
.neo-card-sm:hover{box-shadow:14px 14px 28px rgba(0,48,135,.13),-8px -8px 16px rgba(255,255,255,.95)}
.neo-recessed{background:var(--card-bg);box-shadow:inset 5px 5px 12px rgba(0,48,135,.08),inset -5px -5px 12px rgba(255,255,255,.9);border-radius:.75rem}

/* Glass components */
.glass-panel{background:rgba(255,255,255,.32);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.45)}
.glass-nav{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;border-bottom:1px solid rgba(0,48,135,.08)!important;box-shadow:0 2px 16px rgba(0,0,0,.06)!important}

/* Typography */
.hero-h1{font-family:'Fraunces','Libre Caslon Text','Microsoft PhagsPa',Georgia,serif;font-size:clamp(2.4rem,6vw,5rem);font-weight:700;line-height:1.08;letter-spacing:-.03em;color:var(--espresso-deep)}
.section-headline{font-family:'Fraunces','Libre Caslon Text','Microsoft PhagsPa',Georgia,serif;font-size:clamp(1.9rem,3.5vw,3rem);font-weight:700;line-height:1.15;color:var(--espresso-deep)}

/* Hero badge */
.hero-badge{display:inline-flex;align-items:center;gap:.625rem;background:rgba(255,255,255,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.55);padding:.5rem 1.25rem;border-radius:9999px;font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--interactive-blue)}
.hero-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--interactive-blue);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}

/* Section badge (replaces blue pill badges sitewide) */
.section-badge{display:inline-flex;align-items:center;background:rgba(0,48,135,.08);border:1px solid rgba(0,48,135,.2);color:var(--interactive-blue);padding:.4rem 1rem;border-radius:9999px;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.25rem;font-family:'Manrope',sans-serif}

/* Stats strip */
.stats-strip{background:#EFF6FF;display:block;width:100%;max-width:100%;box-sizing:border-box}
.stats-strip .stat-num{font-family:'Fraunces','Libre Caslon Text','Microsoft PhagsPa',Georgia,serif;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;color:#003087;display:block;line-height:1}
.stats-strip .stat-label{font-size:clamp(.58rem,.65vw,.68rem);letter-spacing:.1em;text-transform:uppercase;color:#374151;font-family:'Manrope',sans-serif;font-weight:600;margin-top:.4rem;display:block}

/* Button overrides */
.btn-hero-primary{background:var(--espresso-deep)!important;color:var(--oat-milk)!important;border:none!important;box-shadow:0 8px 24px rgba(45,27,20,.28);transition:transform .2s ease,box-shadow .2s ease}
.btn-hero-primary:hover{transform:translateY(-3px)!important;box-shadow:0 14px 32px rgba(45,27,20,.42)!important;color:var(--oat-milk)!important}
.btn-hero-secondary{border:2px solid var(--interactive-blue)!important;color:var(--interactive-blue)!important;background:transparent!important;transition:all .2s ease}
.btn-hero-secondary:hover{background:var(--interactive-blue)!important;color:#fff!important;transform:translateY(-3px)}

/* Float animations */
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-18px) rotate(4deg)}}
@keyframes float-reverse{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(-4deg)}}
.float-anim{animation:float 7s ease-in-out infinite}
.float-anim-slow{animation:float-reverse 9s ease-in-out infinite;animation-delay:-3s}

/* Particle field — CSS-only, desktop-only */
.particle-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;display:none}
@media(min-width:1024px){.particle-field{display:block}}
.particle-blob{position:absolute;background:radial-gradient(circle,rgba(212,163,115,.2) 0%,transparent 70%);border-radius:50%;filter:blur(4px);animation:particle-rise 20s ease-in-out infinite;will-change:transform,opacity}
@keyframes particle-rise{0%{transform:translateY(10%) translateX(0);opacity:0}15%{opacity:.55}80%{opacity:.2}100%{transform:translateY(-110%) translateX(28px);opacity:0}}

/* Cursor glow */
#cursor-glow{width:380px;height:380px;background:radial-gradient(circle,rgba(212,163,115,.1) 0%,transparent 70%);border-radius:50%;position:fixed;pointer-events:none;z-index:9998;opacity:0;transition:opacity .5s ease;will-change:transform;transform:translate(-200px,-200px)}

/* Benefit card overrides — neo style */
.benefit-card{background:var(--card-bg);border:1px solid rgba(0,48,135,.07);box-shadow:8px 8px 18px var(--shadow-dark),-8px -8px 16px var(--shadow-light);border-radius:1.5rem}
.benefit-card:hover{box-shadow:14px 14px 28px rgba(0,48,135,.13),-8px -8px 16px rgba(255,255,255,.95);transform:translateY(-4px)}

/* Testimonial card overrides — neo style */
.testimonial-card{background:var(--card-bg)!important;border:none!important;box-shadow:8px 8px 18px var(--shadow-dark),-8px -8px 16px var(--shadow-light)}
.testimonial-card::before{color:var(--interactive-blue);opacity:.35}

/* Nav — glass context overrides */
.glass-nav a.btn-espresso-nav{background:var(--interactive-blue);color:#fff;padding:.5rem 1.25rem;border-radius:9999px;font-weight:700;font-family:'Manrope',sans-serif;font-size:.875rem;transition:transform .2s,box-shadow .2s;text-decoration:none;display:inline-block}
.glass-nav a.btn-espresso-nav:hover{background:#001f5c;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,48,135,.35);color:#fff!important}
header#navbar nav a:not(.btn-espresso-nav){font-family:'Manrope',sans-serif;font-weight:500}
header#navbar nav a:not(.btn-espresso-nav):hover{color:var(--interactive-blue)!important}
header#navbar nav a[aria-current="page"]:not(.btn-espresso-nav){color:var(--interactive-blue)!important}
header#navbar nav a span{background-color:var(--interactive-blue)!important}

/* Footer — espresso deep */
footer{background:var(--espresso-deep)!important}
/* Boost all text contrast on dark bg */
footer .text-gray-400{color:#c8d3e0!important}
footer .text-gray-500{color:#96a5b8!important}
footer .text-gray-300{color:#dce5f0!important}
/* Nav links — bright default, light-blue on hover */
footer a:not(.social-icon):not(.footer-nl-btn){color:#c8d3e0!important}
footer a:not(.social-icon):not(.footer-nl-btn):hover{color:#93c5fd!important}
/* Force text-blue-400 elements (icons, nav arrows) to be readable on dark bg */
footer .text-blue-400{color:#60a5fa!important}
/* Section headings */
footer h5{color:#ffffff!important}
footer .social-icon{background:rgba(255,255,255,.1)!important;color:#fff!important}
footer .social-icon svg{fill:#fff!important}
footer .social-icon:hover{background:var(--interactive-blue)!important;color:#fff!important;transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,48,135,.45)!important}
footer .social-icon:hover svg{fill:#fff!important;transform:scale(1.1)}

/* Anchor scroll offset — keep #fragment targets (e.g. contact.php#crmWebToEntityForm
   apply form, franchise.php#process) clear of the fixed navbar on load/click. */
:target{scroll-margin-top:6rem}

/* FAQ accordion — native <details>, no JS required */
.faq-item summary{list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .faq-chevron{transition:transform .25s ease;color:var(--interactive-blue)}
.faq-item[open] .faq-chevron{transform:rotate(180deg)}

/* Mobile menu */
.mobile-menu{background:rgba(255,255,255,.97)!important}
.mobile-menu a:hover{color:var(--interactive-blue)!important}
.mobile-menu a[aria-current="page"]{color:var(--interactive-blue)!important}

/* Prefers-reduced-motion — kill all Phase 1 animations */
@media(prefers-reduced-motion:reduce){.float-anim,.float-anim-slow{animation:none!important}.particle-blob{animation:none!important;display:none!important}.hero-badge-dot{animation:none!important}}
/* Navy on light bg (default), overridden to light blue in footer */
.obfuscated-email-link{color:var(--interactive-blue)!important}.obfuscated-email-link:hover{color:#001f5c!important}
footer .obfuscated-email-link{color:#93c5fd!important}footer .obfuscated-email-link:hover{color:#bfdbfe!important}

/* Testimonial slider — unified navy */
.testimonial-nav-btn:hover{background:var(--interactive-blue)!important;border-color:var(--interactive-blue)!important;color:#fff!important}
.testimonial-dot.active{background:var(--interactive-blue)!important}
.testimonial-pause-btn:hover{border-color:var(--interactive-blue)!important;color:var(--interactive-blue)!important}

/* Fix: bounce animation for floating hero investment badge */
@keyframes bounce-slow{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.animate-bounce-slow{animation:bounce-slow 3s ease-in-out infinite}

/* Fix: guarantee white icon strokes in benefit cards regardless of Tailwind output */
.benefit-icon-wrap{color:#fff!important}

/* Fix: investment card values on light oat-milk background — espresso is readable, gold is not */
.invest-value{color:var(--espresso-deep)!important;font-family:'Fraunces','Libre Caslon Text','Microsoft PhagsPa',Georgia,serif;font-weight:700}

/* How It Works step cards */
.how-step-card{transition:transform .3s ease,box-shadow .3s ease}
.how-step-card:hover{transform:translateY(-4px)}

/* ============================================================
   PHASE 0 — GLOBAL DESIGN SYSTEM UTILITIES (June 2026)
   ============================================================ */

/* Progress bar — brand gradient (overrides legacy blue) */
.progress-bar{background:linear-gradient(90deg,var(--espresso-deep) 0%,var(--interactive-blue) 100%)!important}

/* Header scroll-shrink state */
header#navbar{transition:box-shadow .3s ease,padding .3s ease}
header#navbar.navbar-scrolled .container{padding-top:.25rem!important;padding-bottom:.25rem!important}
/* Logo: fixed size (matches the former scrolled size) — no shrink-on-scroll */
header#navbar img.nav-logo{width:8.5rem;height:auto;max-height:2.5rem}

/* Grain texture overlay — premium noise layer */
.grain-overlay{position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");opacity:.05;border-radius:inherit}

/* Scroll-reveal — IntersectionObserver adds .visible via JS */
/* Hidden state only applies when JS is active (html.js set by inline head script),
   so no-JS / failed-JS users always see content. .visible is gated on html.js too
   to keep higher specificity than the hidden rules. */
html.js .reveal-up{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1)}
html.js .reveal-fade{opacity:0;transition:opacity .7s ease}
html.js .reveal-scale{opacity:0;transform:scale(.95);transition:opacity .6s ease,transform .6s ease}
html.js .reveal-up.visible,html.js .reveal-fade.visible,html.js .reveal-scale.visible{opacity:1;transform:none}

/* Stagger children — parent gets .stagger-children; JS adds .visible on the parent */
html.js .stagger-children > *{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease}
html.js .stagger-children.visible > *{opacity:1;transform:none}
.stagger-children.visible > *:nth-child(1){transition-delay:.04s}
.stagger-children.visible > *:nth-child(2){transition-delay:.13s}
.stagger-children.visible > *:nth-child(3){transition-delay:.22s}
.stagger-children.visible > *:nth-child(4){transition-delay:.31s}
.stagger-children.visible > *:nth-child(5){transition-delay:.40s}
.stagger-children.visible > *:nth-child(6){transition-delay:.49s}
@media(prefers-reduced-motion:reduce){
  .reveal-up,.reveal-fade,.reveal-scale{opacity:1!important;transform:none!important;transition:none!important}
  .stagger-children > *{opacity:1!important;transform:none!important;transition:none!important}
}

/* Bento grid layout */
.bento-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem;align-items:stretch;grid-auto-rows:auto}
.bento-grid > *{display:flex;flex-direction:column}
.bento-2{grid-column:span 2}
.bento-3{grid-column:span 3}
.bento-4{grid-column:span 4}
@media(max-width:1279px){.bento-4{grid-column:span 6}.bento-2{grid-column:span 3}.bento-3{grid-column:span 3}}
@media(max-width:767px){.bento-grid{grid-template-columns:repeat(2,1fr)}.bento-2,.bento-3,.bento-4{grid-column:span 2}}
@media(max-width:639px){.bento-grid{grid-template-columns:1fr}.bento-2,.bento-3,.bento-4{grid-column:span 1}}

/* Chip / pill filters */
.chip{display:inline-flex;align-items:center;padding:.4rem 1rem;border-radius:9999px;border:1.5px solid var(--outline-variant);background:transparent;color:var(--on-surface-variant);font-size:.8rem;font-weight:600;font-family:'Manrope',sans-serif;cursor:pointer;transition:all .2s ease;white-space:nowrap;line-height:1}
.chip:hover{border-color:var(--espresso-deep);color:var(--espresso-deep)}
.chip.active{background:var(--espresso-deep);border-color:var(--espresso-deep);color:var(--oat-milk)}

/* Horizontal scrollable container */
.scrollable-x{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.scrollable-x::-webkit-scrollbar{display:none}

/* Section alternating backgrounds */
.section-ivory{background:var(--ivory-deep)}
.section-blue{background:var(--card-bg)}

/* Cards flip to white when sitting inside a blue section */
.section-blue .neo-card{background:#ffffff!important;box-shadow:12px 12px 28px rgba(0,48,135,.08),-12px -12px 24px rgba(255,255,255,1)!important}
.section-blue .neo-card:hover{box-shadow:18px 18px 36px rgba(0,48,135,.12),-12px -12px 24px rgba(255,255,255,1)!important}
.section-blue .neo-card-sm{background:#ffffff!important;box-shadow:8px 8px 18px rgba(0,48,135,.08),-8px -8px 16px rgba(255,255,255,1)!important}
.section-blue .neo-recessed{background:#ffffff!important;box-shadow:inset 4px 4px 10px rgba(0,48,135,.07),inset -4px -4px 10px rgba(255,255,255,.95)!important}
.section-blue .benefit-card{background:#ffffff!important;box-shadow:8px 8px 18px rgba(0,48,135,.08),-8px -8px 16px rgba(255,255,255,1)!important}
.section-blue .testimonial-card{background:#ffffff!important;box-shadow:8px 8px 18px rgba(0,48,135,.08),-8px -8px 16px rgba(255,255,255,1)!important}
.section-blue .how-step-card{background:#ffffff!important}

/* Form inputs — brand focus ring sitewide */
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--interactive-blue)!important;box-shadow:0 0 0 3px rgba(0,48,135,.12)!important;outline:0}

/* Footer newsletter button — unified navy */
.footer-nl-btn{background:var(--interactive-blue)!important;color:#fff!important;font-weight:700!important;border:none!important}
.footer-nl-btn:hover{background:#001f5c!important;transform:translateY(-1px)!important;box-shadow:0 6px 16px rgba(0,48,135,.4)!important}

/* Footer newsletter input focus */
#newsletterForm input[type="email"]:focus{border-color:#60a5fa!important;box-shadow:0 0 0 2px rgba(96,165,250,.2)!important}

/* Mobile Action Bar — fixed to bottom of viewport on mobile only.
   Deliberately NO viewport-fit=cover / live env(safe-area-inset-bottom): on
   mobile Chrome that inset toggles between 0 and the gesture-bar height as the
   browser toolbar hides/shows on scroll, which made the bar visibly grow and
   shrink. Without viewport-fit the browser keeps a fixed bottom-0 bar above the
   gesture bar on its own, so a constant height stays rock-stable on scroll
   (this matches the ethereal-v3 bar). Don't re-add viewport-fit=cover. */
.mobile-action-bar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;bottom:0;left:0;right:0;z-index:100;box-shadow:0 -4px 24px rgba(0,0,0,.18)}
@media(min-width:768px){.mobile-action-bar{display:none!important}}
/* Reserve room at the bottom of the footer so its content clears the fixed bar. */
@media(max-width:767px){footer{padding-bottom:5rem!important}}
.mob-action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.75rem .5rem;text-decoration:none;font-family:'Manrope',sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.04em;transition:filter .2s ease;-webkit-tap-highlight-color:transparent}
.mob-action-btn:active{filter:brightness(.85)}
.mob-action-call{background:#013d7c;color:#ffffff;border-right:1px solid rgba(255,255,255,.15)}
.mob-action-wa{background:#1a6b5e;color:#ffffff}
.mob-action-quote{background:#c05228;color:#ffffff;border-left:1px solid rgba(255,255,255,.15)}

/* Notification toast — brand */
#notification .border-blue-600{border-color:var(--interactive-blue)!important}
#notification .text-blue-600{color:var(--interactive-blue)!important}

/* Kinetic hero text — JS-driven opacity/transform transition */
/* Kinetic hero word rotator — all candidate words are stacked in a single
   inline-grid cell, so the box always reserves the tallest/widest word on every
   viewport (incl. mobile, where each word still wraps normally instead of
   overflowing). Only .is-active is visible; cycling words therefore can never
   change the headline's height → zero CLS. No-JS: first word keeps .is-active. */
#hero-kinetic{display:inline-grid;vertical-align:top;text-align:left}
#hero-kinetic > .kinetic-word{
  grid-area:1 / 1;
  min-width:0;
  /* Extend the background-clip:text paint box so Fraunces descenders (g,y,p)
     aren't cut by the tight 1.08 line-height; negative margin cancels the
     added box height so the rotator's reserved height (zero-CLS) is unchanged. */
  padding-bottom:.18em;
  margin-bottom:-.18em;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .35s ease,transform .35s ease,visibility .35s}
#hero-kinetic > .kinetic-word.is-active{opacity:1;visibility:visible;transform:none}
@media(prefers-reduced-motion:reduce){
  #hero-kinetic > .kinetic-word{transition:none}}

/* WhatsApp pulse ring */
@keyframes wa-ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.75);opacity:0}}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;animation:wa-ring 2.5s ease-out infinite;pointer-events:none}

/* ============================================================
   HERO CREATIVE PASS (June 2026) — depth, proof, motion
   All animations auto-disabled by the global reduced-motion rule.
   Pure CSS / no network requests → LCP-safe, no CLS.
   ============================================================ */

/* 1. Warm ambient glow behind the headline (sits below z-10 content) */
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(620px 420px at 12% 26%,rgba(212,168,39,.16),transparent 70%),
    radial-gradient(680px 520px at 88% 80%,rgba(0,48,135,.10),transparent 72%)}

/* 2. Hero stat proof-cards (count-up still runs on .stat-counter inside) */
.hero-stat{position:relative;overflow:hidden;text-align:center;border-radius:1rem;
  padding:1rem .6rem;background:rgba(255,255,255,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.6);box-shadow:0 6px 20px rgba(0,48,135,.06);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
.hero-stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--crema-gold),var(--interactive-blue))}
.hero-stat:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,48,135,.12)}

/* 3. Trust pills */
.hero-trust{display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(0,48,135,.12);padding:.45rem .9rem;border-radius:9999px;
  font-size:.78rem;font-weight:600;color:#374151;transition:transform .25s ease,box-shadow .25s ease}
.hero-trust:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,48,135,.1)}
.hero-trust-ic{width:18px;height:18px;border-radius:50%;background:var(--interactive-blue);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
/* Compact the hero trust pills on mobile so more of the hero fits above the fold */
@media(max-width:639px){
  .hero-trust{padding:.35rem .75rem;font-size:.72rem;gap:.4rem}
  .hero-trust-ic{width:16px;height:16px}
}

/* 4. Hero primary CTA — light sweep + warm glow so it clearly leads the secondary.
   Scoped to .btn-hero-cta so other pages' primary buttons are untouched. */
.btn-hero-cta{position:relative;overflow:hidden;animation:cta-glow 3.4s ease-in-out infinite}
.btn-hero-cta::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);animation:cta-sheen 4.6s ease-in-out infinite;pointer-events:none}
@keyframes cta-glow{0%,100%{box-shadow:0 8px 24px rgba(45,27,20,.28)}
  50%{box-shadow:0 10px 30px rgba(45,27,20,.34),0 0 22px rgba(212,168,39,.30)}}
@keyframes cta-sheen{0%,16%{left:-130%}42%,100%{left:170%}}

/* 5. Crema headline word — gentle gradient shimmer (hero only, not other pages) */
#hero-kinetic .crema-text{background-size:200% auto;animation:crema-shimmer 6s linear infinite}
@keyframes crema-shimmer{to{background-position:200% center}}

/* 6. Soft aura behind the hero photo card (desktop only — image col is hidden < lg) */
.hero-img-aura{position:absolute;top:8%;left:6%;right:6%;bottom:6%;border-radius:2.5rem;
  z-index:0;pointer-events:none;filter:blur(36px);
  background:
    radial-gradient(60% 60% at 50% 38%,rgba(212,168,39,.22),transparent 70%),
    radial-gradient(60% 60% at 50% 82%,rgba(0,48,135,.18),transparent 72%)}

/* Responsive content container — all sections use this instead of max-w-7xl */
.site-container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
@media(min-width:640px){.site-container{padding-left:1.5rem;padding-right:1.5rem}}
@media(min-width:1024px){.site-container{padding-left:2.5rem;padding-right:2.5rem}}
@media(min-width:1280px){.site-container{max-width:90rem;padding-left:3rem;padding-right:3rem}}
@media(min-width:1536px){.site-container{max-width:112rem;padding-left:4rem;padding-right:4rem}}

/* Mobile-only (<640px): gentle, site-wide reduction of section vertical spacing.
   Every public page uses py-14 (sections) / py-12 (a few sections + empty states) as
   the base mobile padding, with sm:+ overrides. Overriding the base utilities here
   (style.css loads after output.css) tightens all sections on phones without touching
   any tablet/desktop breakpoint, and auto-applies to future pages. */
@media(max-width:639px){
  .py-14{padding-top:3rem;padding-bottom:3rem}      /* 56px → 48px */
  .py-12{padding-top:2.5rem;padding-bottom:2.5rem}  /* 48px → 40px */
}

/* Reserve space for the Cloudflare Turnstile widget (default "normal" size is
   300×65). The widget is injected as an iframe by the async Turnstile script;
   without a reserved height the footer newsletter button jumps down on load → CLS. */
.cf-turnstile{min-height:65px}